/* STRAKE Kopfzeile mit Burger-Menue (Uebergabe an Alexej, Lieferung 01, GEN-434).
   Gehoert in den <head> jeder Seite, nach styles.css (am besten als eigene Datei, z. B. /assets_files/kopfzeile.css).
   Setzt nur auf die vorhandenen Webflow-Klassen auf (w-nav, nav-menu, menu-button home-two, language-*);
   neu sind .burger, .ir-gruppe, .ir-kopf, .ir-baum, .ir-unter, .ir-aus. Hausfarben #0c0f06 / #baff39. */
 /* Kopfzeile (Max, 20.10.): Das Menue ist in jeder Breite ein Burger (data-collapse="all" an .w-nav),
    das aufgeklappte Menue ist eine feine dunkle Karte rechts unter dem Knopf. Hausfarben #0c0f06 / #baff39. */
 .w-nav .menu-button.home-two { display:flex !important; align-items:center; justify-content:center; width:52px; height:52px;
                         padding:0; border:0; border-radius:12px; background-color:#baff39; color:#0c0f06;
                         cursor:pointer; transition:background-color .2s ease, transform .2s ease; }
 .menu-button.home-two:hover { background-color:#cdff6e; }
 .menu-button.home-two:focus-visible { outline:2px solid #fff; outline-offset:3px; }
 .menu-button.home-two.w--open { background-color:#baff39; color:#0c0f06; }
 .burger { position:relative; display:block; width:22px; height:14px; }
 .burger span { position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:#0c0f06;
                transition:transform .25s ease, top .25s ease, opacity .15s ease; }
 .burger span:nth-child(1) { top:0; }
 .burger span:nth-child(2) { top:6px; }
 .burger span:nth-child(3) { top:12px; }
 .w--open .burger span:nth-child(1) { top:6px; transform:rotate(45deg); }
 .w--open .burger span:nth-child(2) { opacity:0; }
 .w--open .burger span:nth-child(3) { top:6px; transform:rotate(-45deg); }
 /* Der Investor-Relations-Knopf neben dem Burger: gleiche Hoehe */
 .secondary-button.is-header { height:52px; display:flex; align-items:center; }

 /* Aufgeklapptes Menue: Webflow haengt es bei collapse="all" in .w-nav-overlay unter die Kopfzeile;
    die Ebene wird durchsichtig und nur so hoch wie die Karte, die Karte steht rechts. */
 .w-nav .w-nav-overlay { overflow:visible !important; height:auto !important; background:transparent; z-index:1000; }
 .w-nav .nav-menu-items[data-nav-menu-open] {
   position:relative !important; top:auto; right:auto; left:auto; bottom:auto; margin:14px 0 0 auto;
   width:min(380px, calc(100vw - 32px)); box-sizing:border-box;
   display:flex !important; flex-direction:column; align-items:stretch; gap:2px;
   padding:10px; background-color:#0c0f06; border:1px solid rgba(255,255,255,.09); border-radius:16px;
   box-shadow:0 20px 60px rgba(0,0,0,.45); z-index:1000; }
 .nav-menu-items[data-nav-menu-open] .nav-menu {
   display:flex; align-items:center; justify-content:space-between; width:auto; margin:0;
   padding:13px 14px; border-radius:10px; font-size:17px; font-weight:400; line-height:1.3;
   color:#fff; text-transform:none; transition:background-color .15s ease, color .15s ease; }
 .nav-menu-items[data-nav-menu-open] .nav-menu::after {
   content:"→"; color:#baff39; opacity:0; transform:translateX(-6px);
   transition:opacity .15s ease, transform .15s ease; }
 .nav-menu-items[data-nav-menu-open] .nav-menu:hover,
 .nav-menu-items[data-nav-menu-open] .nav-menu:focus-visible { background-color:rgba(255,255,255,.06); color:#fff; outline:none; }
 .nav-menu-items[data-nav-menu-open] .nav-menu:hover::after,
 .nav-menu-items[data-nav-menu-open] .nav-menu:focus-visible::after { opacity:1; transform:none; }
 /* Gruppe Investor Relations: Ueberschrift kraeftiger, Unterpunkte duenner und kleiner, mit Baumlinien
    wie in einer Ordneransicht (senkrechte Linie, waagrechter Abzweig je Punkt, endet am letzten Punkt). */
 .nav-menu-items[data-nav-menu-open] .ir-gruppe { margin-top:6px; padding:12px 14px 6px 14px;
   border-top:1px solid rgba(255,255,255,.09); }
 .nav-menu-items[data-nav-menu-open] .ir-kopf { font-size:17px; font-weight:500; color:#fff; line-height:1.3;
   display:flex; align-items:center; gap:10px; }
 .nav-menu-items[data-nav-menu-open] .ir-kopf::before { content:""; width:7px; height:7px; border-radius:50%; background:#baff39; }
 .nav-menu-items[data-nav-menu-open] .ir-baum { margin:6px 0 0 3px; }
 .nav-menu-items[data-nav-menu-open] .ir-baum .ir-unter {
   position:relative; display:flex; justify-content:space-between; align-items:center;
   padding:9px 4px 9px 26px; border-radius:0; background:none;
   font-size:15px; font-weight:300; color:rgba(255,255,255,.72); }
 .nav-menu-items[data-nav-menu-open] .ir-baum .ir-unter::before {
   content:""; position:absolute; left:0; top:0; bottom:0; width:14px;
   border-left:1px solid rgba(255,255,255,.32); }
 .nav-menu-items[data-nav-menu-open] .ir-baum .ir-unter:last-child::before { bottom:50%; border-bottom-left-radius:6px; }
 .nav-menu-items[data-nav-menu-open] .ir-baum .ir-unter > span,
 .nav-menu-items[data-nav-menu-open] .ir-baum .ir-unter { background-image:linear-gradient(rgba(255,255,255,.32), rgba(255,255,255,.32));
   background-repeat:no-repeat; background-size:14px 1px; background-position:0 50%; }
 .nav-menu-items[data-nav-menu-open] .ir-baum .ir-unter:hover,
 .nav-menu-items[data-nav-menu-open] .ir-baum .ir-unter:focus-visible { background-color:transparent; color:#fff; }
 .nav-menu-items[data-nav-menu-open] .ir-baum .ir-unter[aria-current="page"] { color:#baff39; font-weight:400; }
 .nav-menu-items[data-nav-menu-open] .ir-baum .ir-aus { color:rgba(255,255,255,.5); }
 /* Sprachwahl als Fusszeile der Karte */
 .nav-menu-items[data-nav-menu-open] .language-container {
   order:10; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; max-width:none;
   margin:8px 0 0 0; padding:12px 4px 4px 4px; border-top:1px solid rgba(255,255,255,.09); }
 .nav-menu-items[data-nav-menu-open] .language-globe { display:none; }
 .nav-menu-items[data-nav-menu-open] .language-div {
   padding:8px 0; font-size:14px; font-weight:500; line-height:1; letter-spacing:.04em; color:#fff;
   border:1px solid rgba(255,255,255,.16); border-radius:8px; background:transparent;
   transition:background-color .15s ease, border-color .15s ease; }
 .nav-menu-items[data-nav-menu-open] .language-div:hover { background:rgba(255,255,255,.08); color:#fff; }
 .nav-menu-items[data-nav-menu-open] .language-div.active { background:#baff39; border-color:#baff39; color:#0c0f06; }
 @media (prefers-reduced-motion: reduce) { .burger span, .nav-menu::after { transition:none; } }