/* ==========================================================================
   SMD Liquid-Menü, NUR Handy (< 768 px). Stand 2.3: Glas aus einem Guss (ganzer Bildschirm, Werte wie Header, ab 0.56 s), nur Kontakt-Button unten.
   Eigenentwicklung. theme.js bleibt die einzige Wahrheit für Öffnen/Schliessen
   (.main-nav.is-open, body.nav-open, aria-expanded); diese Datei legt nur die
   Optik darüber. Tablet und Desktop: keine einzige Regel greift.

   Grundsätze:
   - Scroll-Sperre ohne body{position:fixed}: die Seite bleibt stehen, scrollY
     ändert sich nie, .is-scrolled und das Glas im Header bleiben erhalten.
   - Header bleibt sticky und liegt während der ganzen Animation über den Schichten.
   - Schichten nur sichtbar, solange das Menü offen ist oder sich schliesst.
   - Keine Verzögerung (delay) bei irgendeinem Übergang, Sicherung nach 900 ms.
   Klassen (von liquid-menu.js) auf <html>: liquid-aktiv (Schichten sichtbar),
   liquid-offen (Schichten in Endlage), liquid-glas (Glas statt deckender
   Fläche, ab 0.56 s), liquid-zurueck (Fläche wird vor dem Schliessen wieder deckend),
   liquid-schliesst (Schichten steigen), liquid-austritt (Einträge gleiten weg),
   liquid-fertig (Endzustand erzwungen), liquid-gesperrt, liquid-feder.
   ========================================================================== */

.liquid-schichten { display: none; }

@media (max-width: 47.9375rem) {

  /* ---------- Scroll-Sperre: Seite steht, Position bleibt ----------
     body.nav-open{overflow:hidden} kommt aus dem Theme und wird an den
     Viewport weitergereicht. KEIN overflow auf <html>: sonst wird <body> selbst
     zum Scroll-Container, der sticky Header klebt am body statt am Bildschirm
     und rutscht bei gescrollter Seite samt X aus dem Bild (in WebKit gemessen).
     Wischgesten hält zusätzlich der Touch-Riegel in liquid-menu.js auf. */
  html.liquid-gesperrt { overscroll-behavior: none; }

  /* Menüknopf: iOS hält schnelle Tipps nicht für einen Doppeltipp-Zoom zurück */
  .nav-toggle { touch-action: manipulation; }

  /* ---------- Schichten ---------- */
  .liquid-schichten {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100000;              /* unter Header samt Menü (100002) */
    pointer-events: none;
    overflow: hidden;
    visibility: hidden;
  }
  html.liquid-aktiv .liquid-schichten { visibility: visible; }

  .liquid-schicht {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: currentColor;
    box-shadow: 0 3px 0 0 currentColor;   /* deckt die Naht zur Kante */
    /* Tropfenspitze (ca. 22 vh tief) liegt knapp über dem Rand: sie ist
       nach dem ersten Bildwechsel zu sehen, ohne Verzögerung nach dem Tipp. */
    transform: translate3d(0, calc(-100% - 23vh), 0);
    will-change: transform;
  }
  .liquid-schicht--koralle { color: #F14624; }
  .liquid-schicht--flaeche { color: var(--bg); }   /* dunkel #0a0a0c, hell #faf9f6 */

  /* Kante: eigener Tropfen-Umriss über doppelte Breite. Die Hülle federt in der
     Höhe (scaleY), die Welle darin gleitet seitlich: die Kante lebt, während
     sie fällt. Beides reine transform-Animationen (GPU). */
  .liquid-schicht__kante {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 26vh;
    transform-origin: 50% 0;
    transform: scaleY(1);
    will-change: transform;
  }
  .liquid-schicht__welle {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    display: block;
    fill: currentColor;
    will-change: transform;
  }
  .liquid-schicht--koralle .liquid-schicht__welle { transform: translate3d(0, 0, 0); }
  .liquid-schicht--flaeche .liquid-schicht__welle { transform: translate3d(-25%, 0, 0); }

  /* ---------- Öffnen: Koralle fällt, Fläche folgt, Kanten federn aus ---------- */
  html.liquid-offen .liquid-schicht { transform: translate3d(0, 0, 0); }
  html.liquid-offen .liquid-schicht__kante { transform: scaleY(0.3); }
  html.liquid-offen .liquid-schicht--koralle .liquid-schicht__welle { transform: translate3d(-25%, 0, 0); }
  html.liquid-offen .liquid-schicht--flaeche .liquid-schicht__welle { transform: translate3d(0, 0, 0); }

  /* ZUVERLÄSSIGKEIT: keine einzige Verzögerung (delay). Jede Bewegung startet
     im selben Bild wie der Tipp; der Versatz der Fläche steckt in ihrer Kurve.
     Grund: auf echten iPhones liefen verzögerte Schritte teilweise nie an
     (Koralle stand, Fläche und Einträge kamen nicht, X blieb ein Strich). */
  html.liquid-offen .liquid-schicht--koralle { transition: transform 0.62s cubic-bezier(0.62, 0, 0.3, 1); }
  html.liquid-offen .liquid-schicht--flaeche { transition: transform 0.72s cubic-bezier(0.74, 0, 0.26, 1); }
  html.liquid-offen .liquid-schicht--koralle .liquid-schicht__welle { transition: transform 0.9s cubic-bezier(0.3, 0.55, 0.3, 1); }
  html.liquid-offen .liquid-schicht--flaeche .liquid-schicht__welle { transition: transform 0.9s cubic-bezier(0.45, 0.3, 0.3, 1); }
  /* Feder: Tropfen streckt sich, flacht ab, schwingt einmal nach (gedämpft).
     cubic-bezier für alle, linear() nur mit html.liquid-feder (Feature-Erkennung). */
  html.liquid-offen .liquid-schicht--koralle .liquid-schicht__kante { transition: transform 0.8s cubic-bezier(0.34, 1.4, 0.64, 1); }
  html.liquid-offen .liquid-schicht--flaeche .liquid-schicht__kante { transition: transform 0.85s cubic-bezier(0.34, 1.4, 0.64, 1); }
  html.liquid-feder.liquid-offen .liquid-schicht--koralle .liquid-schicht__kante,
  html.liquid-feder.liquid-offen .liquid-schicht--flaeche .liquid-schicht__kante {
    transition-timing-function: linear(0, 0.028, 0.102, 0.21, 0.341, 0.483, 0.626, 0.762, 0.886, 0.993, 1.081, 1.148, 1.195, 1.223, 1.233, 1.23, 1.214, 1.191, 1.161, 1.128, 1.095, 1.062, 1.033, 1.007, 0.985, 0.968, 0.956, 0.949, 0.946, 0.946, 0.949, 0.954, 0.961, 0.968, 0.976, 0.984, 0.991, 0.997, 1.002, 1, 1);
  }

  /* ---------- Schliessen: Einträge weg, Fläche steigt zuerst, Koralle folgt ---------- */
  html.liquid-schliesst .liquid-schicht--flaeche { transition: transform 0.54s cubic-bezier(0.7, 0, 0.3, 1); }
  html.liquid-schliesst .liquid-schicht--koralle { transition: transform 0.64s cubic-bezier(0.8, 0, 0.3, 1); }
  html.liquid-schliesst .liquid-schicht--flaeche .liquid-schicht__kante { transition: transform 0.46s cubic-bezier(0.5, 0.3, 0.4, 1); }
  html.liquid-schliesst .liquid-schicht--koralle .liquid-schicht__kante { transition: transform 0.56s cubic-bezier(0.6, 0.2, 0.4, 1); }
  html.liquid-schliesst .liquid-schicht--flaeche .liquid-schicht__welle { transition: transform 0.6s cubic-bezier(0.55, 0, 0.3, 1); }
  html.liquid-schliesst .liquid-schicht--koralle .liquid-schicht__welle { transition: transform 0.7s cubic-bezier(0.65, 0, 0.3, 1); }

  /* ---------- Glas aus einem Guss ----------
     Genau das Glas des Headers (--header-bg, Unschärfe 18 px, Sättigung 150 %),
     lückenlos über den ganzen Bildschirm, auch hinter Logo, Sonne, EN und X.
     Die Glasebene liegt ZUUNTERST (unter Koralle und Fläche), damit sie nur die
     Seite verschwimmen lässt. Ab 0.56 s (liquid-menu.js), wenn die Fläche fast
     steht: Glas blendet in 0.2 s ein, Koralle und Fläche blenden aus, und das
     eigene Glas des Headers tritt zurück (sonst doppeltes Glas oben, sichtbare
     Kante). Laufende Bewegungen bleiben in der Übergangsliste, damit nichts springt. */
  .liquid-glasebene {
    position: absolute;
    inset: 0;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    opacity: 0;
    visibility: hidden;
  }
  html.liquid-glas .liquid-glasebene { visibility: visible; opacity: 1; transition: opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1); }
  html.liquid-glas .liquid-schicht--koralle { opacity: 0; transition: opacity 0.18s ease-out, transform 0.62s cubic-bezier(0.62, 0, 0.3, 1); }
  html.liquid-glas .liquid-schicht--flaeche { opacity: 0; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.72s cubic-bezier(0.74, 0, 0.26, 1); }
  /* Schliessen aus dem Glas: Fläche wird in 0.12 s wieder deckend, dann steigt sie */
  html.liquid-glas.liquid-zurueck .liquid-schicht--flaeche { opacity: 1; transition: opacity 0.12s ease-out, transform 0.72s cubic-bezier(0.74, 0, 0.26, 1); }

  /* Sicherung (liquid-menu.js, spätestens 900 ms nach jedem Tipp): Endzustand
     erzwingen, egal ob der Browser die Übergänge ausgeführt hat. Nur das
     Überblenden zum Glas (opacity) darf danach noch laufen. */
  html.liquid-fertig .liquid-schicht { transition-property: opacity !important; }
  html.liquid-fertig .liquid-schicht__kante,
  html.liquid-fertig .liquid-schicht__welle,
  html.liquid-fertig .nav-toggle__bar { transition: none !important; }
  html.liquid-fertig .main-nav.is-open > ul > li { animation: none !important; opacity: 1; transform: none; }

  /* ---------- Header: über den Schichten, Glas durchgehend ---------- */
  html.liquid-aktiv .site-header { z-index: 100002; }
  html.liquid-aktiv .site-header::before { opacity: 1; }
  /* Glas aus einem Guss: Header-eigenes Glas und Trennlinie treten zurück, das
     Menü-Glas darunter läuft durch bis zum oberen Rand */
  html.liquid-glas .site-header::before { opacity: 0; transition: opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1); }
  html.liquid-glas .site-header { border-bottom-color: transparent; }

  /* ---------- Menüfläche ---------- */
  .main-nav {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 6.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .main-nav.is-open { justify-content: flex-start; }
  .main-nav.is-open > ul,
  .main-nav.is-open:has(.main-nav__lang) > ul { margin-block: 0; }
  .main-nav li { border-bottom: 0; }
  /* Sprachwahl steht auf dem Handy im Header; im Menü bleibt nur der Kontakt-Button */
  .main-nav .main-nav__lang { display: none !important; }

  .main-nav > ul > li:not(.menu-item-cta) > a {
    font-family: var(--font-display);
    font-size: clamp(2rem, 9.4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
    padding: 0.42rem 0;
  }
  .main-nav .sub-menu a { font-size: 1.05rem; padding: 0.4rem 0; }
  .main-nav .menu-item-cta > a { margin: 1.25rem 0 0 0; }

  /* Einträge erscheinen gestaffelt, wenn die Fläche steht. Die Wartezeit steckt
     in den Keyframes (kein animation-delay): alles startet im ersten Bild und
     ist spätestens nach 870 ms fertig, vor der Sicherung bei 900 ms. */
  .main-nav.is-open > ul > li:nth-child(1) { animation: liquid-eintrag-1 0.66s linear both; }
  .main-nav.is-open > ul > li:nth-child(2) { animation: liquid-eintrag-2 0.69s linear both; }
  .main-nav.is-open > ul > li:nth-child(3) { animation: liquid-eintrag-3 0.72s linear both; }
  .main-nav.is-open > ul > li:nth-child(4) { animation: liquid-eintrag-4 0.75s linear both; }
  .main-nav.is-open > ul > li:nth-child(5) { animation: liquid-eintrag-5 0.78s linear both; }
  .main-nav.is-open > ul > li:nth-child(6) { animation: liquid-eintrag-6 0.81s linear both; }
  .main-nav.is-open > ul > li:nth-child(7) { animation: liquid-eintrag-7 0.84s linear both; }
  .main-nav.is-open > ul > li:nth-child(8) { animation: liquid-eintrag-8 0.87s linear both; }

  /* Schliessen: theme.js blendet das Menü sofort aus (display:none). Waren die
     Einträge ganz da (liquid-austritt), bleibt das Menü in derselben Anordnung
     sichtbar und die Einträge gleiten weg, statt hart zu verschwinden. Wird
     während des Öffnens geschlossen, verschwinden sie sofort (kein Aufblitzen). */
  html.liquid-austritt .main-nav:not(.is-open) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    pointer-events: none;
  }
  html.liquid-austritt .main-nav:not(.is-open) > ul { margin-block: 0; }
  html.liquid-austritt .main-nav:not(.is-open) > ul > li {
    animation: liquid-austritt 0.18s cubic-bezier(0.5, 0, 0.75, 0) both;
  }

  /* ---------- Hamburger -> X, eigene Bewegung ----------
     Äussere Striche gleiten zur Mitte, DANN drehen sie; der mittlere schrumpft
     zum Punkt. Schliessen läuft umgekehrt (erst zurückdrehen, dann auseinander). */
  .nav-toggle__bar {
    transform: none;
    transition: translate 0.36s cubic-bezier(0.8, 0, 0.35, 1), rotate 0.2s cubic-bezier(0.65, 0, 0.35, 1), scale 0.28s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.26s cubic-bezier(0.8, 0, 0.3, 1);
  }
  body.nav-open .nav-toggle__bar:nth-child(n) { transform: none; }
  body.nav-open .nav-toggle__bar:nth-child(1) { translate: 0 7px; rotate: 45deg; transition: translate 0.2s cubic-bezier(0.65, 0, 0.35, 1), rotate 0.44s cubic-bezier(0.8, 0, 0.3, 1.45); }
  body.nav-open .nav-toggle__bar:nth-child(2) { scale: 0.08 1; opacity: 0; transition: scale 0.18s ease, opacity 0.22s cubic-bezier(0.7, 0, 1, 0.5); }
  body.nav-open .nav-toggle__bar:nth-child(3) { translate: 0 -7px; rotate: -45deg; transition: translate 0.2s cubic-bezier(0.65, 0, 0.35, 1), rotate 0.44s cubic-bezier(0.8, 0, 0.3, 1.45); }
}

@keyframes liquid-eintrag-1 { 0%, 60.61% { opacity: 0; transform: translate3d(0, 22px, 0); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } 100% { opacity: 1; transform: none; } }
@keyframes liquid-eintrag-2 { 0%, 62.32% { opacity: 0; transform: translate3d(0, 22px, 0); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } 100% { opacity: 1; transform: none; } }
@keyframes liquid-eintrag-3 { 0%, 63.89% { opacity: 0; transform: translate3d(0, 22px, 0); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } 100% { opacity: 1; transform: none; } }
@keyframes liquid-eintrag-4 { 0%, 65.33% { opacity: 0; transform: translate3d(0, 22px, 0); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } 100% { opacity: 1; transform: none; } }
@keyframes liquid-eintrag-5 { 0%, 66.67% { opacity: 0; transform: translate3d(0, 22px, 0); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } 100% { opacity: 1; transform: none; } }
@keyframes liquid-eintrag-6 { 0%, 67.90% { opacity: 0; transform: translate3d(0, 22px, 0); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } 100% { opacity: 1; transform: none; } }
@keyframes liquid-eintrag-7 { 0%, 69.05% { opacity: 0; transform: translate3d(0, 22px, 0); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } 100% { opacity: 1; transform: none; } }
@keyframes liquid-eintrag-8 { 0%, 70.11% { opacity: 0; transform: translate3d(0, 22px, 0); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } 100% { opacity: 1; transform: none; } }
@keyframes liquid-austritt {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(0, -12px, 0); }
}

/* ---------- Rückfall Glas: ohne Unschärfe-Unterstützung oder mit «Transparenz
   reduzieren» bleibt die Fläche deckend wie bisher (JS setzt liquid-glas dann
   gar nicht; diese Regeln sind das zweite Netz). ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-glasebene { display: none !important; }
  html.liquid-glas .liquid-schicht--flaeche { opacity: 1 !important; }
  html.liquid-glas .liquid-schicht--koralle { opacity: 1 !important; }
  html.liquid-glas .site-header::before { opacity: 1 !important; }
}
@media (max-width: 47.9375rem) and (prefers-reduced-transparency: reduce) {
  .liquid-glasebene { display: none !important; }
  html.liquid-glas .liquid-schicht--flaeche { opacity: 1 !important; }
  html.liquid-glas .liquid-schicht--koralle { opacity: 1 !important; }
  html.liquid-glas .site-header::before { opacity: 1 !important; }
}

/* ---------- Reduzierte Bewegung: nur einfaches Einblenden ---------- */
@media (max-width: 47.9375rem) and (prefers-reduced-motion: reduce) {
  .liquid-schicht,
  .liquid-schicht__kante,
  .liquid-schicht__welle { transition: none !important; }
  .liquid-schicht--koralle,
  .liquid-schicht__kante { display: none; }
  .liquid-schicht--flaeche { transform: none !important; opacity: 0; transition: opacity 0.2s ease !important; }
  html.liquid-offen .liquid-schicht--flaeche { opacity: 1; }
  html.liquid-glas .liquid-schicht--flaeche { opacity: 0; }
  html.liquid-glas.liquid-zurueck .liquid-schicht--flaeche { opacity: 1; }
  .main-nav.is-open > ul > li { animation: liquid-blende 0.2s ease both !important; animation-delay: 0s !important; }
  html.liquid-austritt .main-nav:not(.is-open) { display: none; }
  .nav-toggle__bar { transition: none !important; }
}
@keyframes liquid-blende { from { opacity: 0; } to { opacity: 1; } }