/* DWC — gemeinsame Navbar-Erweiterungen fuer ALLE Seiten (10.10.2026)
   ======================================================================

   Leo: "Die Navbar von der Landingpage, mit dem Leistungen-Dropdown und den
   Hover-Animationen, auf jede Unterseite sauber uebernehmen - ueberall gleich."

   Eine Datei statt Kopien: index.html (home.css + scrolly-hero.css) und alle
   Unterseiten (subpage-nav.css) laden sie als LETZTES Navbar-Stylesheet. Was
   nur die Startseite hat (der weisse Hero-Keil), bleibt in home.css.

   Gehoert zusammen mit:
     - assets/js/dwc-navbar.js         Lage/Breite des Panels, Leistenfarbe,
                                       .dd-schliesst (alle Seiten)
     - assets/js/dwc-navbar-inseln.js  React: Buchstaben-Tausch der Menue-
                                       punkte + DE/EN-Sprachwahl (gebaut aus
                                       _intern/react-stack/src/navbar.tsx)

   Inhalt
     1  Menuepunkte: Random-Letter-Swap statt Hinterlegung/Linie
     2  Leistungen-Panel: volle Breite, buendig an der Leiste, Einklappen
     3  Panel in der Farbe der Leiste (hell/dunkel)
     4  Eintraege: Chevrons, keine Icon-Animationen, Beratungszeile
     5  Sprachwahl DE/EN */


/* ── 1  MENUEPUNKTE ──────────────────────────────────────────────────────
   Beim Ueberfahren tauschen die Buchstaben von links nach rechts senkrecht
   durch (React-Insel RandomLetterSwap auf jede <span class="nav-swap"> unter
   [data-letter-swap]). Ohne Skript bleibt der statische Text stehen.

   Die Komponente traegt Tailwind-Klassen. Auf Seiten ohne wizard.css gibt es
   die Utilities nicht - deshalb hier genau die benutzten, auf .nav-swap
   begrenzt (identische Werte wie Tailwind 4). */
@media (min-width: 900px) {
  #site-header .nav-swap { display: flex; }
  /* Die Vorlage gibt jedem Buchstaben pb-2 (8px) als Platz fuer den Tausch -
     im Knopf (align-items:center) hoebe das den Text um 4px an. -8px
     Aussenrand: gleiche Lage wie der statische Text, der Tauschbereich ragt
     nur in den Innenabstand des Knopfs. */
  #site-header .nav-swap > span { margin-bottom: -8px; }
  #site-header .nav-swap .relative { position: relative; }
  #site-header .nav-swap .absolute { position: absolute; }
  #site-header .nav-swap .flex { display: flex; }
  #site-header .nav-swap .items-center { align-items: center; }
  #site-header .nav-swap .justify-center { justify-content: center; }
  #site-header .nav-swap .overflow-hidden { overflow: hidden; }
  #site-header .nav-swap .whitespace-pre { white-space: pre; }
  #site-header .nav-swap .pb-2 { padding-bottom: .5rem; }
  #site-header .nav-swap .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
  }
}
@media (min-width: 900px) and (hover: hover) {
  /* Keine runde Hinterlegung beim Ueberfahren - die Animation ist die
     Rueckmeldung. Spezifischer als jede Hover-Regel in home.css,
     scrolly-hero.css und subpage-nav.css (dort hoechstens 1,4,0). .active
     (z. B. "Preise" auf den Preis-Seiten) bleibt unberuehrt. */
  #site-header .header-nav[data-letter-swap] .nav-btn:not(.active):hover,
  #site-header .header-nav[data-letter-swap] .nav-dropdown-btn:hover,
  #site-header .header-nav[data-letter-swap] .nav-dropdown-btn.open { background: transparent; }
}


/* ── 2  LEISTUNGEN-PANEL ─────────────────────────────────────────────────
   Das Panel reicht von Rand zu Rand, Hoehe und Kacheln bleiben wie vorher:
   der Inhaltsbereich (--dd-inhalt) bleibt der alte, der Zugewinn an Breite
   geht komplett in den Innenabstand links/rechts.
     ab 1200px   944px = 980px Panel - 2 x 18px Innenabstand
     900-1199px  Fenster - 84px
   Lage und Breite misst dwc-navbar.js (--dd-links, --dd-breite, --dd-oben):
   der Bezugsrahmen des Panels ist je nach Seite und Scrollzustand ein
   anderes Element. Greift nur mit der Klasse dwc-dd-voll (setzt dasselbe
   Skript) - ohne Skript bleibt das alte, schwebende Panel. */
@media (min-width: 900px) {
  #leistungen-dropdown.dwc-dd-voll {
    --dd-inhalt: 944px;
    /* Buendig an der Header-Unterkante: kein Spalt, keine Kante und keine
       runden Ecken oben - Leiste und Panel wirken wie eins. */
    top: var(--dd-oben, calc(100% + 8px));
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    left: var(--dd-links);
    right: auto;
    width: var(--dd-breite);
    padding-inline: calc((var(--dd-breite) - var(--dd-inhalt)) / 2);
    transform: translateY(-6px);
    /* Einklappen: geschlossen ist das Panel von unten her auf 0 Hoehe
       beschnitten, beim Schliessen rollt es in 0,4 s in die Leiste hinein,
       die Deckkraft folgt leicht verzoegert. Es gilt die transition des
       Zielzustands - die des offenen Zustands (unten) nennt clip-path nicht,
       das Ausklappen bleibt also ein kurzes Einblenden (0,2 s). */
    clip-path: inset(0 0 100% 0);
    transition:
      clip-path .4s cubic-bezier(.4, 0, .2, 1),
      transform .4s cubic-bezier(.4, 0, .2, 1),
      opacity .26s ease .14s,
      visibility 0s linear .4s;
  }
  #leistungen-dropdown.dwc-dd-voll.open {
    transform: translateY(0);
    /* Nach unten -80px: Platz fuer den Schatten. Nach oben 0: der Schatten
       (0 12px 40px) strahlte sonst rund 28px in die Leiste und toente sie
       grau - Leiste und Panel saehen verschieden aus. */
    clip-path: inset(0 0 -80px 0);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
  }
  /* Solange das Panel offen ist, faellt die Haarlinie unter der Leiste weg -
     sonst stuende sie als Strich zwischen Leiste und Panel. */
  #site-header:has(#leistungen-dropdown.dwc-dd-voll.open) {
    border-bottom-color: transparent;
    box-shadow: none;
  }
  /* Der blaue Schein unter dem CTA-Knopf (0 10px 24px -12px) reicht ueber die
     Unterkante der Leiste; das Panel deckt ihn dort hart ab und verriet so den
     Schnitt. Solange das Panel offen ist, blendet der Schein aus. */
  #site-header .header-cta .btn-primary { transition: background .15s, box-shadow .2s ease, transform .1s; }
  #site-header:has(#leistungen-dropdown.dwc-dd-voll.open) .header-cta .btn-primary { box-shadow: none; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  #leistungen-dropdown.dwc-dd-voll { --dd-inhalt: calc(var(--dd-breite) - 84px); }
}
/* Gleiche Werte auf jeder Seite: Titel, Icons, Beschreibung und Zeilenhoehe
   des Panels haengen an Seitenvariablen (--primary, --muted, --border) und an
   der Zeilenhoehe des <body>. Die Startseite hat Schwarz und 1.6, die
   Unterseiten Dunkelblau (#061B3A) und "normal", Hosting-Wartung-Details ein
   eigenes Grau - Titel waren dort dunkelblau, jede Zeile 1px niedriger, das
   Panel 4px kuerzer. Hier fest die Werte der Startseite. Das dunkle Panel
   (Abschnitt 3) setzt seine Farben selbst und bleibt davon unberuehrt. */
@media (min-width: 900px) {
  #leistungen-dropdown.dwc-dd-voll {
    --primary: #000;
    --muted: #5B6A79;
    --border: #E9EEF6;
    line-height: 1.6;
  }
}


/* ── 3  PANEL IN DER FARBE DER LEISTE ─────────────────────────────────────
   Hell: weiss wie die Leiste. Dunkel, sobald die Leiste ueber einer dunklen
   Sektion steht (.over-dark) - ausser im Hero der Startseite (.on-hero), dort
   ist die Leiste der weisse Keil bzw. weiss.

   --dd-flaeche: dwc-navbar.js uebertraegt die tatsaechliche Farbe der Leiste,
   sobald diese deckend ist (z. B. Corporate-Design: #0D0B0A statt #060A12).

   --nav-dunkel: Seiten mit eigenem Schwarz (Corporate-Design #0D0B0A;
   Fotografie, Hosting, Ueber-uns #0A0A0A) nennen es einmal am #site-header.
   Gebraucht wird es oben auf der Seite: dort ist die Leiste durchsichtig bzw.
   wird von der Regel am Ende dieses Abschnitts gefaerbt - ohne die Variable
   stuenden Leiste und Panel dort im allgemeinen #060A12 und wechselten nach
   10px Scrollen in den Seitenton.

   Unterseiten oben (nicht gescrollt) haben eine durchsichtige Leiste. Ist das
   Panel offen, bekommt sie dieselbe Farbe wie das Panel, damit beides aus
   einem Guss ist. Die Startseite hat dafuer den Keil (home.css). */
@media (min-width: 900px) {
  #site-header.over-dark:not(.on-hero) #leistungen-dropdown.dwc-dd-voll {
    --dd-hell: #fff;
    --dd-gedimmt: rgba(255,255,255,.62);
    --dd-linie: rgba(255,255,255,.10);
    --dd-blau: #5b9bff;
    background: var(--dd-flaeche, var(--nav-dunkel, #060A12));
    border-color: var(--dd-linie);
    box-shadow: 0 12px 40px rgba(0,0,0,.38);
  }
  #site-header.over-dark:not(.on-hero) .dwc-dd-voll::before { background: var(--dd-linie); }
  #site-header.over-dark:not(.on-hero) .dwc-dd-voll .nav-dd-item:hover,
  #site-header.over-dark:not(.on-hero) .dwc-dd-voll .nav-dd-item:focus-visible,
  #site-header.over-dark:not(.on-hero) .dwc-dd-voll .nav-dd-cta:hover,
  #site-header.over-dark:not(.on-hero) .dwc-dd-voll .nav-dd-cta:focus-visible { background: rgba(255,255,255,.10); }
  /* Hover auf Dunkel deutlicher: Flaeche 10 % Weiss, Icon-Kaestchen im
     markierten Eintrag 14 % (Ruhe 8 %). */
  #site-header.over-dark:not(.on-hero) .dwc-dd-voll .nav-dd-icon { background: rgba(255,255,255,.08); color: var(--dd-hell); }
  #site-header.over-dark:not(.on-hero) .dwc-dd-voll .nav-dd-item:hover .nav-dd-icon,
  #site-header.over-dark:not(.on-hero) .dwc-dd-voll .nav-dd-item:focus-visible .nav-dd-icon { background: rgba(255,255,255,.14); }
  #site-header.over-dark:not(.on-hero) .dwc-dd-voll .nav-dd-title { color: var(--dd-hell); }
  #site-header.over-dark:not(.on-hero) .dwc-dd-voll .nav-dd-desc,
  #site-header.over-dark:not(.on-hero) .dwc-dd-voll .nav-dd-item::after { color: var(--dd-gedimmt); }
  #site-header.over-dark:not(.on-hero) .dwc-dd-voll .nav-dd-item:hover::after,
  #site-header.over-dark:not(.on-hero) .dwc-dd-voll .nav-dd-cta-pfeil { color: var(--dd-hell); }

  #site-header:not(.scrolled):not([data-nav-fest]):has(#leistungen-dropdown.dwc-dd-voll.open) { background: #fff; }
  #site-header.over-dark:not(.scrolled):not([data-nav-fest]):has(#leistungen-dropdown.dwc-dd-voll.open) { background: var(--nav-dunkel, #060A12); }
}


/* ── 4  EINTRAEGE ────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  /* Keine Icon-Animationen beim Ueberfahren - die Icons stehen wie im
     Ruhezustand voll gezeichnet da. Die :hover-Animationen in home.css/
     subpage-nav.css bleiben stehen, greifen hier aber nicht mehr. */
  #leistungen-dropdown.dwc-dd-voll .nav-dd-icon * { animation: none; }
  /* Impressum, Datenschutz und AGB setzen alle Links auf 600
     (a { font-weight: 600 }) - Beschreibung und Chevron der Eintraege erbten
     das und standen dort halbfett. Der Titel setzt seine 700 selbst. */
  #leistungen-dropdown .nav-dd-item,
  #leistungen-dropdown .nav-dd-cta { font-weight: 400; }
  /* Chevrons ~5 % groesser (18 -> 19px), beim Hover in Titelfarbe statt
     blau - auf hellem Panel schwarz, auf dunklem weiss (Abschnitt 3). */
  #leistungen-dropdown.dwc-dd-voll .nav-dd-item::after { font-size: 19px; }
  #leistungen-dropdown.dwc-dd-voll .nav-dd-item:hover::after { color: var(--primary); }

  /* Beratungszeile ("weniger ist mehr"): eine ruhige Zeile in der Schrift der
     Eintraege (Titel + Beschreibung), ohne Trennlinie, so gross wie der
     Eintrag daneben. Text auf der Icon-Kante der Eintraege, der Pfeil dort,
     wo die Eintraege ihren Chevron haben - 24px, in Titelfarbe. Pfeil wie
     beim "Weiterlesen"-Link der Startseite (lucide ArrowRight, Hover: -45
     Grad nach rechts oben, 0,5 s). */
  #leistungen-dropdown .nav-dd-cta {
    grid-column: 2;
    grid-row: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 10px;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color .15s ease;
  }
  #leistungen-dropdown .nav-dd-cta > span { display: flex; flex-direction: column; }
  #leistungen-dropdown .nav-dd-cta:hover,
  #leistungen-dropdown .nav-dd-cta:focus-visible { background: rgba(36,114,232,0.05); }
  #leistungen-dropdown .nav-dd-cta-pfeil {
    flex-shrink: 0;
    margin-left: auto;
    width: 24px;
    height: 24px;
    color: var(--primary);
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  #leistungen-dropdown .nav-dd-cta:hover .nav-dd-cta-pfeil,
  #leistungen-dropdown .nav-dd-cta:focus-visible .nav-dd-cta-pfeil { transform: rotate(-45deg); }
}


/* ── 5  SPRACHWAHL DE/EN ──────────────────────────────────────────────────
   (React: _intern/react-stack/src/components/ui/language-toggle.tsx)
   DE und EN klein untereinander, aktuelle Sprache voll, andere gedimmt,
   feiner Strich links als Markierung, gleitet beim Ueberfahren zur anderen.
   Farbe folgt der Leiste. */
@media (min-width: 900px) {
  /* Massstab wie Menue und CTA-Knopf (Vorschau-Massstab .945). */
  #dwc-language-switcher-root { scale: .945; transform-origin: right center; }
  /* Nah am CTA-Knopf (~10px Luft): Spaltenabstand der CTA-Gruppe (18px,
     900-1199px 8px) plus die Skalierung des Knopfs zur rechten Kante hin
     liessen rund 32px. */
  #dwc-language-switcher-root { margin-right: -22px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  #dwc-language-switcher-root { margin-right: -9px; }
}
@media (max-width: 899px) {
  #dwc-language-switcher-root { display: none; }
}

#dwc-language-switcher-root .dwc-lang {
  --dwc-lang-zeile: 17.7px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 10px;
  color: #14233d;
  font-family: 'DWC Nav Inter', 'Inter', system-ui, -apple-system, sans-serif;
  transition: color .25s ease;
}
#dwc-language-switcher-root .dwc-lang__item {
  display: block;
  height: var(--dwc-lang-zeile);
  font-size: 12px;
  font-weight: 600;
  line-height: var(--dwc-lang-zeile);
  letter-spacing: .16em;
  color: inherit;
  text-decoration: none;
  opacity: .42;
  transition: opacity .2s ease;
}
#dwc-language-switcher-root .dwc-lang__item.is-current,
#dwc-language-switcher-root a.dwc-lang__item:hover,
#dwc-language-switcher-root a.dwc-lang__item:focus-visible { opacity: 1; }
#dwc-language-switcher-root a.dwc-lang__item:focus-visible {
  outline: 1.5px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}
#dwc-language-switcher-root .dwc-lang__strich {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5px;
  height: var(--dwc-lang-zeile);
  background: currentColor;
  border-radius: 1px;
  /* Etwas kuerzer als die Zeile: sitzt auf der Hoehe der Versalien. */
  clip-path: inset(3px 0 3px 0);
  transition: transform .32s cubic-bezier(.23, 1, .32, 1);
}
#dwc-language-switcher-root .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  #dwc-language-switcher-root .dwc-lang,
  #dwc-language-switcher-root .dwc-lang__item,
  #dwc-language-switcher-root .dwc-lang__strich { transition: none; }
}
/* Weiss, solange hinter der Sprachwahl Schwarz liegt: dunkle Leiste (wie
   Abschnitt 3) und auf der Startseite der Ruhemodus ab 1024px (rechts oben
   liegt dort das Schwarz des Heros - ausser der Keil ist fuer das offene
   Leistungen-Panel ausgefahren). Darunter steht die Hero-Diagonale fast am
   rechten Rand, die Sprachwahl liegt dann auf Weiss. Sonst dunkel. */
#site-header.over-dark:not(.on-hero) #dwc-language-switcher-root .dwc-lang { color: #fff; }
@media (min-width: 1024px) {
  #site-header[data-nav-fest].over-dark:not(.scrolled) #dwc-language-switcher-root .dwc-lang { color: #fff; }
  #site-header[data-nav-fest]:not(.scrolled):has(#leistungen-dropdown.dwc-dd-voll.open) #dwc-language-switcher-root .dwc-lang { color: #14233d; }
}