/* ══ Navigation mobil (< 768px) - 27.09.2026, Leo ═════════════════════════
   GEMEINSAM fuer index.html und alle Unterseiten (vorher Teil von
   landing-mobile.css). Wird jeweils als letztes Nav-Stylesheet geladen -
   auf index.html nach landing-mobile.css, auf den Unterseiten nach
   subpage-nav.css. Markup (#site-header, .nav-burger, .mobile-menu*) ist auf
   allen Seiten gleich; der Menue-Button traegt ueberall .mobile-menu__cta.

   Keine Leiste und kein Logo mehr: oben rechts schwebt nur der Burger als
   runder Glas-Knopf. Geoeffnet deckt das Menue den ganzen Bildschirm, die
   Punkte kommen gestaffelt herein, "Leistungen" klappt weich auf, unten der
   Button mit umlaufendem Farbring. Tablet (768-899) und Desktop unveraendert.

   Die Kopfzeile bleibt als Element mit ihrer Hoehe stehen (Hero und
   Sprungziele rechnen mit ihr), wird aber unsichtbar und klickdurchlaessig.
   !important bei den Hintergruenden: die Leiste hat ueber home.css,
   scrolly-hero.css und navbar-mobile.css rund zehn Farbzustaende
   (.scrolled/.over-dark/.on-hero/.menu-open und Kombinationen) - mobil
   sollen alle durchsichtig sein. */
@media (max-width: 767px) {
  #site-header,
  #site-header.scrolled,
  #site-header.scrolled.over-dark,
  #site-header.on-hero.scrolled.over-dark,
  #site-header.menu-open,
  #site-header.menu-open:not(.scrolled) {
    background: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    /* dwc-base.css (Rechtstext-/Nebenseiten, NACH dieser Datei geladen) gibt
       der Leiste 24px Innenabstand - der Burger stand dort 24px weiter innen. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    pointer-events: none;
  }
  #site-header.menu-open {
    z-index: 9000; /* ueber dem Menue (8500), damit das X klickbar bleibt */
  }
  #site-header .header-logo {
    display: none !important;
  }
  #site-header .header-inner,
  #site-header:not(.scrolled) .header-inner,
  #site-header.scrolled .header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    /* volle Breite: auf den Unterseiten mit dwc-header.js war die Leiste
       schmaler als das Fenster, der Burger sass 24px weiter innen */
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    padding: max(14px, env(safe-area-inset-top)) 14px 0;
  }

  /* ── Burger: runder Glas-Knopf ─────────────────────────────────────────
     Hell (dunkle Striche) ueber hellen Flaechen und dem Hero, dunkel (weisse
     Striche) sobald das Skript .over-dark setzt und der Hero verlassen ist. */
  #site-header .nav-burger {
    pointer-events: auto;
    width: 48px;
    height: 48px;
    margin: 0;
    gap: 5px;
    border-radius: 50%;
    border: 1px solid rgba(8, 11, 17, 0.08);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    box-shadow: 0 8px 24px -10px rgba(8, 11, 17, 0.35);
    color: #0b0d12;
    filter: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
  }
  #site-header .nav-burger:active {
    transform: scale(0.94);
  }
  #site-header.over-dark:not(.on-hero) .nav-burger {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(22, 24, 30, 0.62);
    color: #fff;
  }
  #site-header.menu-open .nav-burger,
  #site-header.menu-open.on-hero .nav-burger {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: none;
  }
  #site-header .nav-burger__line {
    width: 20px;
  }

  /* ── Menue: ganzer Bildschirm ─────────────────────────────────────────── */
  .mobile-menu-overlay {
    inset: 0;
    background: #07090d;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
  }
  .mobile-menu-overlay.open {
    transition: opacity 0.32s ease, visibility 0s linear 0s;
  }
  .mobile-menu {
    inset: 0;
    max-height: none;
    padding-top: 84px;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: none;
  }
  .mobile-menu__body {
    flex: 1;
    gap: 0;
    padding: 8px 24px 16px;
    opacity: 1;
    transition: none;
    counter-reset: dwc-nav;
  }

  /* Gestaffelter Einlauf: jeder Punkt 45ms nach dem vorigen. */
  .mobile-menu__body > .mobile-menu__link,
  .mobile-menu__body > .mobile-menu__group-btn,
  .mobile-menu__foot {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .mobile-menu-overlay.open .mobile-menu__body > .mobile-menu__link,
  .mobile-menu-overlay.open .mobile-menu__body > .mobile-menu__group-btn,
  .mobile-menu-overlay.open .mobile-menu__foot {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mobile-menu-overlay.open .mobile-menu__body > :nth-child(1) { transition-delay: 0.06s; }
  .mobile-menu-overlay.open .mobile-menu__body > :nth-child(3) { transition-delay: 0.105s; }
  .mobile-menu-overlay.open .mobile-menu__body > :nth-child(4) { transition-delay: 0.15s; }
  .mobile-menu-overlay.open .mobile-menu__body > :nth-child(5) { transition-delay: 0.195s; }
  .mobile-menu-overlay.open .mobile-menu__body > :nth-child(6) { transition-delay: 0.24s; }
  .mobile-menu-overlay.open .mobile-menu__body > :nth-child(7) { transition-delay: 0.285s; }
  .mobile-menu-overlay.open .mobile-menu__foot { transition-delay: 0.33s; }

  /* Hauptpunkte: gross, mit kleiner Laufnummer davor. */
  .mobile-menu__link,
  .mobile-menu__group-btn {
    counter-increment: dwc-nav;
    justify-content: flex-start;
    gap: 14px;
    padding: 15px 2px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-menu__link::before,
  .mobile-menu__group-btn::before {
    content: counter(dwc-nav, decimal-leading-zero);
    min-width: 22px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #5f6b7d;
    font-variant-numeric: tabular-nums;
  }
  /* Nur :active - :hover bleibt auf Touch-Geraeten nach dem Tippen "kleben"
     (Leistungen stand nach dem Aufklappen dauerhaft blau). Den Grund-Hover
     aus home.css neutralisieren. */
  .mobile-menu__link:hover,
  .mobile-menu__group-btn:hover {
    background: transparent;
  }
  .mobile-menu__link:active,
  .mobile-menu__group-btn:active {
    background: transparent;
    color: #8fb4ff;
  }
  .mobile-menu__group-btn .chev {
    margin-left: auto;
    font-size: 20px;
    color: #8a94a6;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Leistungen: weich auf/zu (Hoehe + Deckkraft), Punkte mit Leitlinie. */
  .mobile-submenu,
  .mobile-submenu.open {
    padding-left: 36px;
    transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  }
  .mobile-submenu.open {
    max-height: 420px;
    padding-top: 6px;
    padding-bottom: 10px;
  }
  .mobile-submenu a {
    position: relative;
    padding: 10px 0 10px 16px;
    border-radius: 0;
    font-size: 16px;
    font-weight: 500;
    color: #a9b6c9;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-submenu a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
  }
  .mobile-submenu a:hover,
  .mobile-submenu a:active {
    background: transparent;
    color: #fff;
  }

  .mobile-menu__foot {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 24px calc(24px + env(safe-area-inset-bottom, 0px));
    border-top: 0;
  }

  /* ── Button mit umlaufendem Farbring ───────────────────────────────────
     ::before: Farbverlauf (DWC-Blau → Cyan → Violett), der sich hinter der
     Flaeche dreht - nur transform, laeuft also auf der Grafikkarte (iOS und
     Android ohne Ruckeln). ::after: die eigentliche blaue Flaeche, 2px
     eingerueckt - sichtbar bleibt der drehende Rand als Lichtring. */
  .mobile-menu__foot .mobile-menu__cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    padding: 0 22px;
    border: 0;
    border-radius: 18px;
    background: #0757f7;
    color: #fff;
    font-family: var(--font);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: 0 16px 36px -14px rgba(7, 87, 247, 0.75);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s ease, box-shadow 0.2s ease;
  }
  .mobile-menu__foot .mobile-menu__cta::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: 50%;
    top: 50%;
    width: 160%;
    aspect-ratio: 1;
    background: conic-gradient(from 0deg, #0757f7, #38bdf8, #7c5cff, #0757f7 55%, #3b82f6, #0757f7);
    transform: translate(-50%, -50%) rotate(0turn);
    animation: dwc-cta-ring 4.5s linear infinite;
  }
  .mobile-menu__foot .mobile-menu__cta::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 2px;
    border-radius: 16px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
      linear-gradient(135deg, #0a5cff, #0747d6);
  }
  .mobile-menu__foot .mobile-menu__cta svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
  }
  .mobile-menu__foot .mobile-menu__cta:active {
    transform: scale(0.97);
    box-shadow: 0 8px 20px -12px rgba(7, 87, 247, 0.8);
  }
  .mobile-menu__foot .mobile-menu__cta:active svg {
    transform: translateX(3px);
  }
}
@keyframes dwc-cta-ring {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mobile-menu__foot .mobile-menu__cta::before { animation: none; }
  .mobile-menu__body > .mobile-menu__link,
  .mobile-menu__body > .mobile-menu__group-btn,
  .mobile-menu__foot {
    transform: none;
    transition: opacity 0.2s ease;
  }
}