/* ============================================================
   CML-Menü im Navy-Band (Reboot School & eigenständige Seiten)
   ------------------------------------------------------------
   Diese Seiten laden styles.css nicht. Damit das Hamburger-Menü
   trotzdem GENAU so aussieht wie auf allen anderen Unterseiten,
   spiegelt dieses Blatt `.site-nav.nav-open` aus styles.css
   Abschnitt 16 — mit denselben Zahlen, nur ohne Variablen
   (die Reboot-Seiten kennen --sp-* und --btn-radius nicht).

   Wenn sich das Hauptmenü in styles.css ändert, muss es hier
   nachgezogen werden. Referenzwerte, Stand 15.08.2026:
     --sp-1 4px · --sp-2 8px · --sp-3 12px · --sp-4 16px
     --sp-5 24px · --sp-6 32px · --btn-radius 9999px
   ============================================================ */

/* ACHTUNG: hier NIE eine nackte `.cml-bar`-Regel hinschreiben.
   Auf zwölf Werkstatt-Tool-Seiten steht dieser <link> hinter den inline
   <style>-Blöcken und würde deren `position:absolute` überschreiben —
   das Navy-Band rutschte dann mitten in die Seite. Nachgewiesen 15.08.2026.
   Leisten, die selbst keine Position setzen (Tool-Landings), bekommen
   stattdessen die Klasse `.cml-bar-flow`. */
.cml-bar-flow { position: relative; }

/* Wie weit rechts das Menü hängt.
   Standard 0 = bündig zur Leiste (Tool-Landings, deren Leiste selbst
   den Rand setzt). `.cml-bar-boxed` markiert die Leisten mit innerer
   1100px-Spalte (Reboot School) — dort hängt das Menü an der Spalte,
   genau wie `.site-nav.nav-open` am `.container` des Haupt-Headers. */
.cml-bar-boxed { --cml-menu-right: max(0px, calc((100% - 1100px) / 2)); }

.cml-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

/* Hamburger — Maße wie `.hamburger` im Haupt-Header */
.cml-burger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex: none;
  line-height: 0;
}
.cml-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #e8eeff;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.cml-burger:hover span { background: #3DD9A4; }
.cml-burger:focus-visible {
  outline: 2px solid #3DD9A4;
  outline-offset: 5px;
  border-radius: 4px;
}
.cml-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cml-burger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.cml-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dropdown — Spiegel von `.site-nav.nav-open`.
   align-items:center kommt im Original aus `.site-nav` und ist der
   Grund, warum die Einträge mittig stehen und die Trennlinien nur so
   breit sind wie das Wort. Ohne diese Zeile sieht es anders aus. */
.cml-menu {
  display: none;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 100%;
  right: var(--cml-menu-right, 0px);
  width: min(300px, 100vw);
  background: #0A1220;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 16px 24px var(--cml-menu-pb, 32px);
  gap: 12px;
  z-index: 99;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  font-family: var(--fb, 'Inter', system-ui, sans-serif);
}
.cml-menu.is-open { display: flex; }

.cml-menu a {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  line-height: 1.65;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: color 0.15s ease;
}
.cml-menu a:hover { color: #fff; }
.cml-menu a:last-child { border-bottom: none; }

/* Newsletter — Spiegel von `.btn.nav-nl-btn` im offenen Menü */
.cml-menu .cml-menu-nl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: stretch;
  text-align: center;
  margin-top: 4px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.65;
  padding: 8px 16px;
  border-radius: 9999px;
  border: 1px solid rgba(61, 217, 164, 0.30);
  border-bottom: 1px solid rgba(61, 217, 164, 0.30);
  background: rgba(61, 217, 164, 0.06);
  color: #3DD9A4;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.cml-menu .cml-menu-nl:hover {
  background: rgba(61, 217, 164, 0.13);
  border-color: rgba(61, 217, 164, 0.55);
  color: #3DD9A4;
}
/* Gleiche Falle wie auf der Website: ein SVG ohne Maß wird 300x150 groß. */
.cml-menu .cml-menu-nl svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin: 0;
}

/* Mobil volle Breite — wie `@media (max-width: 480px)` in styles.css */
/* Mobil volle Breite — wie `@media (max-width: 480px)` in styles.css.
   Dort schrumpft zusätzlich --sp-6 von 32px auf 28px, deshalb hier
   dieselbe Verkleinerung des unteren Innenabstands. */
@media (max-width: 480px) {
  .cml-menu {
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    --cml-menu-pb: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cml-burger span { transition: none; }
}