/* AI Værk — base.css: Reset, Typografie, Buttons, Nav, Footer. 2/5 */

/* ── Base ──────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  /* Clip visual overflow without creating a scroll container. `hidden`
     prevents the sticky site header from sticking on narrow screens. */
  overflow-x: clip;
  /* Typografie-Standard (gilt fuer alle drei Domains): Fliesstext bricht
     "pretty" um, damit kein einzelnes Wort allein in der letzten Zeile
     steht. Erbt in p, li, dd, td, figcaption, blockquote usw. Der
     Shorthand setzt auch text-wrap-mode: wrap, das erbt nur; wer selbst
     white-space: nowrap traegt, behaelt es. */
  text-wrap: pretty;
}

h1, h2, h3 {
  font-family: var(--font-brand);
  font-weight: 560;
  letter-spacing: -0.022em;
  line-height: 1.12;
}
/* Ueberschriften aller Ebenen umbrechen ausgewogen. Nur bewusst und mit
   Kommentar ueberschreiben. */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
/* Kleine Telefone (unter 390 px): lange Komposita ("Praxiswerkstaetten",
   "Processautomatisering") sind dort breiter als die Spalte und liefen
   ueber den Rand. Ueberschriften trennen darum nach der Sprache der Seite
   (html lang), aber nur lange Woerter (ab 14 Zeichen, je 6 vor und nach
   dem Strich), damit kurze wie "zusammen" ganz bleiben. Ebenso summary,
   die Frage-Zeile der FAQ ("Behandlungsempfehlungen?"). Ab 390 px passt
   jedes Wort, dort bleibt es beim Umbruch ohne Trennstrich. */
@media (max-width: 389.98px) {
  h1, h2, h3, h4, h5, h6, summary { hyphens: auto; hyphenate-limit-chars: 14 6 6; }
}
/* Explizit statt nur geerbt: Absaetze bleiben "pretty", auch wenn ein
   Container balance oder nowrap setzt. */
p { text-wrap: pretty; }
/* Bewusste Ausnahme: Eingabefelder brechen normal um. Mit geerbtem pretty
   springen schon getippte Woerter beim Schreiben zwischen den Zeilen hin
   und her (im Kontaktformular gemessen: dreimal in einem Satz). */
textarea { text-wrap: wrap; }
img, svg { max-width: 100%; }

a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -48px;
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 8px;
  z-index: 100; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ── Buttons ───────────────────────────────────────────── */
/* Ein Knopf ist nie breiter als seine Spalte. Passt die Beschriftung nicht
   auf eine Zeile (lange Labels auf kleinen Telefonen, 320 px), bricht sie
   um, statt ueber den Rand zu laufen. Einzeilig sieht er aus wie zuvor:
   die Zeilenbox ist 4 px hoeher als die Schrift, das Polster oben und unten
   dafuer je 2 px kleiner. Hoehe und Lage der Schrift bleiben gleich
   (min-height 44 px greift wie bisher), zwei Zeilen haben Luft. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: calc(1em + 4px);
  border-radius: 10px;
  padding: 12px 22px;
  min-height: 44px;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
/* Kleine Telefone: etwas schmaleres Seitenpolster, damit ein langes Label
   in zwei statt drei Zeilen umbricht. Steht vor .btn-sm und den
   Nav-Knoepfen, deren eigenes Polster gilt weiter. */
@media (max-width: 389.98px) {
  .btn { padding-inline: 18px; }
}
/* Der Pfeil behaelt seine Groesse; schmaler wird nur die Beschriftung
   (vorher schrumpfte er bei langen Labels auf 0 px). */
.btn > .ai-ico, .btn > svg { flex: none; }
.btn svg { transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }

.btn-dark { background: var(--ink); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.btn-dark:hover { background: #322e28; }
/* Aurora-Flare im Button: ein flacher Lichtsaum am unteren Rand.
   Hinterer Layer = breiter, stark geblurrter Schein (der "Himmel"),
   vorderer Layer = wenige weiche Kerne, die darin auf- und abglimmen.
   Beides bleibt in der unteren Buttonhälfte. Läuft permanent
   unsichtbar, Hover blendet nur ein — Ein-/Ausstieg immer sauber. */
.btn-dark::before,
.btn-dark::after {
  content: "";
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: -14%;
  height: 92%;
  z-index: -1;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  animation-play-state: paused;
  pointer-events: none;
}
.btn-dark::before {
  background-image:
    radial-gradient(50% 100% at 50% 100%, rgba(120, 158, 255, 0.9), transparent 62%),
    radial-gradient(50% 100% at 50% 100%, rgba(168, 124, 255, 0.8), transparent 60%),
    radial-gradient(50% 100% at 50% 100%, rgba(232, 128, 226, 0.65), transparent 58%),
    radial-gradient(50% 100% at 50% 100%, rgba(104, 176, 232, 0.7), transparent 60%);
  background-size: 110% 132%, 92% 116%, 84% 104%, 88% 110%;
  filter: blur(10px);
  animation: aurora-sky 9s ease-in-out infinite;
}
.btn-dark::after {
  background-image:
    radial-gradient(50% 100% at 50% 100%, rgba(150, 200, 255, 0.85), transparent 60%),
    radial-gradient(50% 100% at 50% 100%, rgba(255, 150, 220, 0.7), transparent 58%),
    radial-gradient(50% 100% at 50% 100%, rgba(178, 140, 255, 0.8), transparent 60%),
    radial-gradient(50% 100% at 50% 100%, rgba(150, 220, 200, 0.6), transparent 58%);
  background-size: 52% 96%, 42% 80%, 46% 88%, 40% 76%;
  filter: blur(6px);
  animation: aurora-cores 6.5s ease-in-out infinite;
}
/* Der Schein wogt als Ganzes ganz langsam und verschiebt den Ton. */
/* Muss nach den animation-Shorthands stehen: die wuerden den
   paused-Zustand sonst zuruecksetzen. */
.btn-dark::before, .btn-dark::after { animation-play-state: paused; }
@keyframes aurora-sky {
  0%, 100% { background-position: -4% 100%, 62% 108%, 104% 102%, 34% 106%; filter: blur(10px) hue-rotate(0deg) brightness(1); }
  33% { background-position: 2% 104%, 52% 100%, 97% 110%, 40% 100%; filter: blur(11px) hue-rotate(-14deg) brightness(1.1); }
  66% { background-position: -6% 108%, 70% 104%, 108% 100%, 28% 110%; filter: blur(10px) hue-rotate(10deg) brightness(0.94); }
}
/* Die Kerne glimmen einzeln auf: einer steigt, während ein anderer
   absinkt und dabei dunkler wird — das langsame Zucken echter Flares. */
@keyframes aurora-cores {
  0%, 100% { background-position: 4% 102%, 50% 112%, 96% 100%, 70% 108%; filter: blur(6px) brightness(1); }
  26% { background-position: 10% 110%, 46% 100%, 88% 112%, 64% 100%; filter: blur(7px) brightness(1.15); }
  52% { background-position: 0% 100%, 56% 106%, 100% 104%, 75% 114%; filter: blur(6px) brightness(0.88); }
  80% { background-position: 7% 106%, 43% 116%, 92% 108%, 67% 102%; filter: blur(6px) brightness(1.08); }
}
.btn-dark:hover::before, .btn-dark:focus-visible::before { opacity: 1; animation-play-state: running; }
.btn-dark:hover::after, .btn-dark:focus-visible::after { opacity: 0.95; animation-play-state: running; }
@media (prefers-reduced-motion: reduce) {
  .btn-dark::before, .btn-dark::after { animation: none; }
}
/* Ein gesperrter Knopf reagiert nicht auf den Zeiger: kein Hover-Grund, kein
   Aurora-Schein. Auf Touch blieb :hover nach dem Tippen stehen, "Weiter" im
   Readiness-Check leuchtete gesperrt (BR-07). Hoehere Spezifitaet statt
   Reihenfolge, damit das auch hinter einer @media-(hover)-Huelle gilt. */
.btn.btn-dark:disabled { background: var(--ink); cursor: default; }
.btn.btn-dark:disabled::before,
.btn.btn-dark:disabled::after { opacity: 0; animation-play-state: paused; }
.btn-ghost {
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--stone); }
.btn-light { background: var(--paper-deep); color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-sm { font-size: 14px; padding: 11px 16px; }

/* Sprach-Toggle in der Nav: bewusst leise. */
.lang-toggle {
  font-family: var(--font-brand);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--stone);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 9px;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.lang-toggle:hover, .lang-toggle:focus-visible { color: var(--ink); background: rgba(33, 30, 26, 0.05); }

/* Sprach-Hinweis fuer en/sv-Browser auf deutschen Seiten (site.js).
   Ruhige Flaeche wie das offene Kontakt-Panel: weiss, Haarlinie, nur ein
   enger Schatten (Blur <= 16 px; ein weicher grosser zeichnet sich ueber
   farbigen Kaesten als Kante ab). Der Text bricht um, statt abgeschnitten
   zu werden. Desktop: unten links, auf einer Linie mit dem Kontaktknopf,
   mit reserviertem Platz fuer ihn. Telefon: volle Breite ueber dem Knopf,
   so beruehrt er ihn bei keiner Knopfbreite. scripts/lang-hint-check.cjs
   prueft Lesbarkeit, Abstand und Schatten. */
.lang-hint {
  /* Randabstand wie beim Kontaktknopf (components.css, .fab). */
  --hint-inset: clamp(16px, 2.4vw, 28px);
  position: fixed;
  left: var(--hint-inset);
  bottom: calc(var(--hint-inset) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 4px;
  /* Rechts bleiben bis zu 220 px fuer den Knopf plus 12 px Luft frei. */
  max-width: min(440px, calc(100vw - 2 * var(--hint-inset) - 232px));
  padding-left: 8px;
  background: #fff;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(33, 30, 26, 0.05), 0 6px 14px -8px rgba(33, 30, 26, 0.16);
  color: var(--ink-soft);
  font-size: 13.5px;
  line-height: 20px;
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-exit), translate 0.25s var(--ease-exit), visibility 0s linear 0.25s;
}
.lang-hint.is-show {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  pointer-events: auto;
  transition: opacity 0.4s var(--ease), translate 0.45s var(--ease), visibility 0s;
}
/* Der ganze Satz ist der Link: 44 px hohe Tippflaeche statt eines
   einzelnen Worts. */
.lang-hint a {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 8px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
/* Fokusring innerhalb der Flaeche statt ueber ihrem Rand. */
.lang-hint a:focus-visible { outline-offset: -2px; border-radius: 10px; }
.lang-hint a span { color: var(--accent); font-weight: 600; }
.lang-hint button {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--stone);
  font: inherit;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.lang-hint button:focus-visible { outline-offset: -8px; border-radius: 999px; }
/* Sichtbar ist nur ein 28-px-Kreis; die Tippflaeche bleibt 44 px. */
.lang-hint button span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 17px;
  line-height: 1;
  transition: background-color 0.2s var(--ease);
}
.lang-hint button:active span { background: rgba(33, 30, 26, 0.06); }
@media (hover: hover) {
  .lang-hint a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .lang-hint button:hover { color: var(--ink); }
  .lang-hint button:hover span { background: rgba(33, 30, 26, 0.06); }
}
@media (max-width: 600px) {
  .lang-hint {
    right: var(--hint-inset);
    max-width: none;
    font-size: 14px;
  }
  /* Ueber dem Kontaktknopf (am Telefon eine 50 px hohe Pille,
     components.css). Reserviert sind 56 px plus 12 px Luft, also 18 px
     Abstand; die Pille stoesst so bei keiner Breite an. */
  .fab ~ .lang-hint { bottom: calc(var(--hint-inset) + 56px + 12px); }
}
/* Offenes Kontakt-Panel: der Hinweis tritt zurueck, wie beim offenen
   Menue (nav.css, html.mn-open). */
.fab.is-open ~ .lang-hint {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-exit), visibility 0s linear 0.2s;
}
@media (prefers-reduced-motion: reduce) {
  .lang-hint, .lang-hint.is-show { translate: none; }
  .lang-hint button, .lang-hint button span { transition: none; }
}

/* ── Header / Nav ──────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}
/* Inhalt als eigener Stapelkontext unter dem Header: Safari zeichnet
   sonst animierte Elemente (translate, filter wie die Glow-Woerter im
   Seitenkopf) beim Scrollen ueber den sticky Header. Kein transform auf
   .site-header, weil das Mobile-Menue darin position: fixed ist. */
main { isolation: isolate; }
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 66px;
}
.brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 9px;
  font-family: var(--font-brand);
  font-weight: 620;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand svg { transform: translateY(-0.5px); }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.site-nav a {
  font-size: 14.5px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 8px;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
  white-space: nowrap;
}
.site-nav button { white-space: nowrap; }
.site-nav a:hover { color: var(--ink); background: rgba(33, 30, 26, 0.05); }
.site-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 560;
  background: rgba(33, 30, 26, 0.065);
}
.nav-actions { display: flex; align-items: center; gap: 12px; }
/* Die Sprachwahl ist derselbe Klapper wie das "Mehr"-Menue und teilt sich
   dessen Masse: gleiche Radien, gleicher Schatten, gleiche Zeilenhoehe.
   Zwei Dropdowns nebeneinander in derselben Leiste duerfen nicht nach zwei
   Bausteinen aussehen. Die Regeln stehen weiter unten bei .nav-more. */
.language-picker { position: relative; flex: none; }
.language-picker > summary::-webkit-details-marker { display: none; }
.language-picker > summary::marker { content: ''; }
.language-picker[open] > summary svg { transform: rotate(180deg); }
.language-picker :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav-cta-mobile { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
}
.nav-toggle-box {
  display: block; width: 20px; position: relative; height: 12px;
}
.nav-toggle-box i {
  position: absolute; left: 0; right: 0; height: 1.8px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.35s var(--ease), top 0.35s var(--ease);
}
.nav-toggle-box i:first-child { top: 0; }
.nav-toggle-box i:last-child { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box i:first-child { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-box i:last-child { top: 5px; transform: rotate(-45deg); }

@media (max-width: 1240px) {
  .nav-row { height: 60px; }
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }

  /* Scrim behind the open panel — content never bleeds through. */
  .nav-scrim {
    position: fixed;
    inset: 0;
    top: 60px;
    background: rgba(25, 23, 19, 0.36);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
    z-index: 34;
  }
  html.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  html.nav-open { overflow: hidden; }

  .site-nav {
    position: fixed;
    top: 60px; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    border-radius: 0 0 20px 20px;
    display: block;
    box-shadow: 0 40px 80px rgba(25, 23, 19, 0.22);
    z-index: 35;
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    filter: blur(2px);
    transition:
      transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
      filter 180ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 220ms;
    will-change: transform, opacity, filter;
  }
  .site-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    filter: blur(0);
    transition:
      transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
      filter 260ms cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0s;
  }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px calc(var(--gutter) - 6px) 20px;
  }
  .site-nav li { border-bottom: 0; }
  .site-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px;
    font-size: 17px;
    font-weight: 480;
    border-radius: 10px;
  }
  .site-nav a::after {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: transparent;
    transition: background-color 0.25s var(--ease);
  }
  .site-nav a[aria-current="page"] {
    background: var(--paper-deep);
    font-weight: 560;
  }
  .site-nav a[aria-current="page"]::after { background: var(--accent); }
  .nav-cta-mobile { display: block; padding: 14px 6px 0; margin-top: 10px; border-top: 1px solid var(--hairline); }
  .nav-cta-mobile .btn { width: 100%; justify-content: center; }
  .site-nav a.nav-mail {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 14px;
    color: var(--stone);
    padding: 10px 12px;
  }
  .site-nav a.nav-mail::after { content: none; }
  .site-nav a.btn-dark { color: #fff; font-size: 15px; padding: 12px 22px; }
  .site-nav a.btn-dark::after { content: none; }
}
@media (max-width: 1240px) and (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-nav.open {
    transform: none;
    filter: none;
    transition: none !important;
  }
}
@media (min-width: 1241px) {
  .nav-scrim { display: none; }
}

/* ── Sections ──────────────────────────────────────────── */
.sec { padding: clamp(52px, 9vw, 104px) 0; }
.sec + .sec { border-top: 1px solid var(--hairline); }

/* Tinted full-width band for the signature Wissensflow section. */
.sec-tint {
  background: linear-gradient(to bottom, #f6f2ea, #f3efe6);
}

.sec-head { max-width: 720px; }
.sec-head h2 {
  font-size: clamp(28px, 4vw, 40px);
}
.sec-head .sub {
  display: block;
  font-weight: 400;
  color: var(--stone);
}
.sec-head .intro {
  margin-top: 18px;
  font-size: 16.5px;
  color: var(--stone);
  max-width: 580px;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--stone);
  margin-bottom: 22px;
}
.kicker::after {
  content: "";
  flex: 1;
  max-width: 160px;
  border-top: 1px dashed var(--hairline-strong);
}

/* ── Footer / Aurora ───────────────────────────────────── */
.site-footer {
  position: relative;
  margin-top: clamp(48px, 8vw, 88px);
  background: var(--dark);
  color: var(--paper-deep);
  /* clip statt hidden: hidden macht den Footer zum Scroll-Container, dann misst
     view() die Aurora gegen ihn statt gegen die Seite und der Aufstieg steht.
     hidden bleibt als Rueckfall fuer Browser ohne clip (die kennen auch kein view()). */
  overflow: hidden;
  overflow: clip;
}
/* Aurora (Mischung 2+ mit Sog, 25.09.2026). Geschichtete Verlaeufe statt geblurrter
   Balken: Halo (in .aurora-veil), zwei Kronen-Lappen mit je einem Glimmen, Kern mit
   Dither. Kein filter, keine Maske, kein Blend-Mode; animiert werden nur transform
   und opacity, alle Ebenen laufen auf dem Compositor. Farben: die oklch-Stufen der
   alten Aurora mit ihrem Alpha, vorgemischt auf #191713, damit sich verschachtelte
   Baender nicht aufaddieren. Studie und Messwerte: .scratch/art/AURORA-NOTES.md. */
.aurora {
  position: absolute;
  left: -4%; right: -4%; bottom: -14px;
  /* eine stetige Hoehe ohne Breakpoint: 273px am Telefon, 300px bei 1280, bis 340px */
  height: clamp(273px, calc(250px + 4vw), 340px);
  z-index: 0;
  pointer-events: none;
  contain: paint;
  --aurora-f-deep: rgb(8 37 63) 0%, rgb(8 37 63 / 0.844) 25%, rgb(8 37 63 / 0.5) 50%, rgb(8 37 63 / 0.156) 75%, rgb(8 37 63 / 0) 100%;  /* oklch(0.29 0.09 248) bei 67.1 % */
  --aurora-f-blue: rgb(10 84 113) 26%, rgb(10 84 113 / 0.844) 44.5%, rgb(10 84 113 / 0.5) 63%, rgb(10 84 113 / 0.156) 81.5%, rgb(10 84 113 / 0) 100%;  /* oklch(0.55 0.12 235) bei 61.2 % */
  --aurora-f-cyan: rgb(45 111 123) 16%, rgb(45 111 123 / 0.844) 37%, rgb(45 111 123 / 0.5) 58%, rgb(45 111 123 / 0.156) 79%, rgb(45 111 123 / 0) 100%;  /* oklch(0.72 0.11 215) bei 55.2 % */
  --aurora-f-green: rgb(53 72 61) 30%, rgb(53 72 61 / 0.844) 47.5%, rgb(53 72 61 / 0.5) 65%, rgb(53 72 61 / 0.156) 82.5%, rgb(53 72 61 / 0) 100%;  /* oklch(0.72 0.08 165) bei 31.3 % */
  --aurora-f-magenta: rgb(119 74 112) 45.7%, rgb(119 74 112 / 0.844) 59.3%, rgb(119 74 112 / 0.5) 72.8%, rgb(119 74 112 / 0.156) 86.4%, rgb(119 74 112 / 0) 100%;  /* oklch(0.68 0.14 330) bei 53.7 % */
  --aurora-f-indigo: rgb(55 46 97) 63.5%, rgb(55 46 97 / 0.844) 72.6%, rgb(55 46 97 / 0.5) 81.8%, rgb(55 46 97 / 0.156) 90.9%, rgb(55 46 97 / 0) 100%;  /* oklch(0.45 0.15 285) bei 53.7 % */
  --aurora-f-dark: rgb(20 30 46) 67.5%, rgb(20 30 46 / 0.844) 75.6%, rgb(20 30 46 / 0.5) 83.8%, rgb(20 30 46 / 0.156) 91.9%, rgb(20 30 46 / 0) 100%;  /* oklch(0.3 0.1 260) bei 35.8 % */
}
/* Huelle fuer den scrollgebundenen Aufstieg (nur scale; eine animierte Gruppen-
   Deckkraft wuerde alles darin durch einen Extra-Durchgang zwingen). Malt den Halo. */
.aurora-veil {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  transform-origin: 68.5% 100%;
  background-image:
    radial-gradient(ellipse 29.7% 100% at 68.3% 100%, var(--aurora-f-indigo)),
    radial-gradient(ellipse 30.6% 83% at 67.4% 100%, var(--aurora-f-indigo)),
    radial-gradient(ellipse 78.1% 53.1% at 64% 100%, var(--aurora-f-indigo)),
    radial-gradient(ellipse 29.7% 100% at 68.3% 100%, var(--aurora-f-dark)),
    radial-gradient(ellipse 30.6% 83% at 67.4% 100%, var(--aurora-f-dark)),
    radial-gradient(ellipse 78.1% 53.1% at 64% 100%, var(--aurora-f-dark));
  background-size: min(113.8%, 2155px) 97%, min(194.1%, 3758px) 97%, 100% 97%, min(113.8%, 2155px) 97%, min(194.1%, 3758px) 97%, 100% 97%;
  background-position: 68.3% 100%, 67.4% 100%, 0 100%, 68.3% 100%, 67.4% 100%, 0 100%;
  background-repeat: no-repeat;
}
.aurora :where(.aurora-veil i, .aurora-veil b) { position: absolute; display: block; background-repeat: no-repeat; }
/* Sog-Huellen: malen nichts und tragen keine CSS-Animation; nur das Hover-Skript
   in site.js schreibt ihr transform, so kommen sich Keyframes und JS nie in die Quere. */
.aurora-hv1 { top: 0; right: 0; bottom: 0; left: 0; transform-origin: 70% 100%; }
.aurora-hv2 { top: 0; right: 0; bottom: 0; left: 0; transform-origin: 64% 100%; }
/* Kronen-Lappen: drei weiche Spitzen, traegt das Magenta-Glimmen. */
.aurora-l1 {
  bottom: 0; left: 36%; width: 64%; height: 100%;
  transform-origin: 53.1% 100%;
  background-image:
    radial-gradient(ellipse 44.9% 100% at 53.1% 100%, var(--aurora-f-magenta)),
    radial-gradient(ellipse 37.1% 90% at 39.1% 100%, var(--aurora-f-magenta)),
    radial-gradient(ellipse 29.2% 88% at 68.8% 100%, var(--aurora-f-magenta));
  background-size: min(94%, 1248px) 90.4%, min(50.6%, 648px) 90.4%, min(58.8%, 786px) 90.4%;
  background-position: 53.1% 100%, 39.1% 100%, 68.8% 100%;
  will-change: transform;
  animation: aurora-l1-slide 31.3s cubic-bezier(0.45, 0.05, 0.55, 0.95) -12.2s infinite, aurora-l1-lift 15.7s cubic-bezier(0.37, 0, 0.63, 1) -6.1s infinite;
  animation-play-state: paused;
}
.aurora-l1 > b {
  left: calc(53.1% - min(18.8%, 260px));
  width: calc(2 * min(18.8%, 260px));
  bottom: 60%; height: 28%;
  background: radial-gradient(closest-side, rgb(232 135 210 / 0.17) 0%, rgb(232 135 210 / 0.143) 25%, rgb(232 135 210 / 0.085) 50%, rgb(232 135 210 / 0.027) 75%, rgb(232 135 210 / 0) 100%);
  opacity: 0.35;
  will-change: opacity;
  animation: aurora-l1-glow 8.9s cubic-bezier(0.5, 0.08, 0.5, 0.92) -3.3s infinite;
  animation-play-state: paused;
}
/* Koerper-Lappen: Schultern und Flanken, traegt das Cyan-Glimmen. Die Box ragt je
   Seite 10 % ueber, damit beim Gleiten nie eine Kante ins Bild kommt. */
.aurora-l2 {
  bottom: 0; left: -10%; width: 120%; height: 84%;
  transform-origin: 61.7% 100%;
  background-image:
    radial-gradient(ellipse 34.7% 83% at 63.3% 100%, var(--aurora-f-magenta)),
    radial-gradient(ellipse 65% 53% at 60.8% 100%, var(--aurora-f-magenta)),
    radial-gradient(ellipse 31.3% 51% at 33.3% 100%, var(--aurora-f-magenta)),
    radial-gradient(ellipse 14.7% 60% at 83.3% 100%, var(--aurora-f-magenta)),
    radial-gradient(ellipse 46.8% 77% at 48.8% 100%, var(--aurora-f-magenta));
  background-size: min(139.4%, 3173px) 107.6%, 100% 107.6%, min(39.9%, 1021px) 107.6%, min(73.9%, 1909px) 107.6%, min(19.6%, 513px) 107.6%;
  background-position: 63.3% 100%, 0 100%, 33.3% 100%, 83.3% 100%, 48.8% 100%;
  will-change: transform;
  animation: aurora-l2-slide 39.7s cubic-bezier(0.65, 0.05, 0.36, 1) -24.4s infinite, aurora-l2-lift 22.3s cubic-bezier(0.42, 0, 0.58, 1) -8.9s infinite;
  animation-play-state: paused;
}
.aurora-l2 > b {
  left: calc(48.8% - min(8.3%, 220px));
  width: calc(2 * min(8.3%, 220px));
  bottom: 52.4%; height: 26.2%;
  background: radial-gradient(closest-side, rgb(101 210 213 / 0.15) 0%, rgb(101 210 213 / 0.127) 25%, rgb(101 210 213 / 0.075) 50%, rgb(101 210 213 / 0.023) 75%, rgb(101 210 213 / 0) 100%);
  opacity: 0.35;
  will-change: opacity;
  animation: aurora-l2-glow 13.1s cubic-bezier(0.33, 0.02, 0.67, 0.98) -5.2s infinite;
  animation-play-state: paused;
}
/* Kern vorn: Tiefblau, Blau, Cyan, gruene Naht. Steht still, damit der Dither darauf
   einmal gerastert und nie neu abgetastet wird. */
.aurora-core {
  top: 0; right: 0; bottom: 0; left: 0;
  background-image:
    radial-gradient(ellipse 29.7% 100% at 68.3% 100%, var(--aurora-f-deep)),
    radial-gradient(ellipse 30.6% 83% at 67.4% 100%, var(--aurora-f-deep)),
    radial-gradient(ellipse 78.1% 53.1% at 64% 100%, var(--aurora-f-deep)),
    radial-gradient(ellipse 29.7% 100% at 68.3% 100%, var(--aurora-f-blue)),
    radial-gradient(ellipse 30.6% 83% at 67.4% 100%, var(--aurora-f-blue)),
    radial-gradient(ellipse 78.1% 53.1% at 64% 100%, var(--aurora-f-blue)),
    radial-gradient(ellipse 29.7% 100% at 68.3% 100%, var(--aurora-f-cyan)),
    radial-gradient(ellipse 30.6% 83% at 67.4% 100%, var(--aurora-f-cyan)),
    radial-gradient(ellipse 78.1% 53.1% at 64% 100%, var(--aurora-f-cyan)),
    radial-gradient(ellipse 29.7% 100% at 68.3% 100%, var(--aurora-f-green)),
    radial-gradient(ellipse 30.6% 83% at 67.4% 100%, var(--aurora-f-green)),
    radial-gradient(ellipse 78.1% 53.1% at 64% 100%, var(--aurora-f-green));
  background-size: min(113.8%, 2155px) 16%, min(194.1%, 3758px) 16%, 100% 16%, min(113.8%, 2155px) 42%, min(194.1%, 3758px) 42%, 100% 42%, min(113.8%, 2155px) 73.3%, min(194.1%, 3758px) 73.3%, 100% 73.3%, min(113.8%, 2155px) 76.8%, min(194.1%, 3758px) 76.8%, 100% 76.8%;
  background-position: 68.3% 100%, 67.4% 100%, 0 100%, 68.3% 100%, 67.4% 100%, 0 100%, 68.3% 100%, 67.4% 100%, 0 100%, 68.3% 100%, 67.4% 100%, 0 100%;
}
/* Dither gegen 8-Bit-Stufen in den dunklen Verlaeufen: etwa +-0,6 Stufen, im Dunkeln
   ohne Helligkeitsverschiebung, als Textur unsichtbar. */
.aurora-core::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAC4ElEQVR42k2V27baMAxE90i2E/r/H9sesKcPUmhfWItgZM01kCwGyWAxHBYYRBrEyzKkRViIYIHhF2kZkAGEkYQRF2/kN2gizCaQ30gmOTYStsIHKQNpyCBYJPg3iUE3QmwuPn4jbBFMJdiIQBiLQD6C6R+lNyCkwGz3cgh0sdmI9BsEWMIHywKikU7LYpGu8SKMYViuU8HVz0U0CwZZLKvoQiSTYSGmxWWxkEWyLMOAYq/hg9IfQAofENjCWhhzCG/JR7KRZGuyOQBw97KT+Ip2GePwA3FSv8ByaSfLWDAIlsVtkY11MQgeAIu73GEazmQShMPAVTRZ1MRZO/T8sBjGcnC3vV713MUeECSjjkI7UFZv8yoPNleznja02xIywm47Dm8ttjcAVti4aMYaAOy2EgpEu71AvJqyLGc0cnFD31uuiBLcsrBahbQQ4uUoJgyDiyQeryAW4ibMVzPDtB5RzGOo/1iYiOV4yO6N5UBW6SlGG3Myya8D4NXSwbJKcBfxL5IgYbkserd96s42rnELRtRVdfNjKauQBoOG0W7IDo+4ekBa3IyKUsMTIav8zSlZOtBPkqMllk8VCVHMSZjVJ8skTaOaMiyuAkWt+xA4+lw0H9SacBFECegn5lQjkA6yyV6G6L9PugUwXD2dyl2xzsVNkGVxgyhB5SAJ+u+l/iK4mU3fs+LsPr4eiD1GVWtJYMJvieOqlF2fSvuJihL5o8EBlv8ovEEqNwc2oPDRZJP+IbCCZPsovAmswfEBCXw0OLYY3qAJ/FhY6dOjBqdE1cAEVEo1uvwuzJ8nX6piYVqOYqTsjIBhkSU0nQAgSWuoomF+MPJH6pKVD2BkqYYcDX98kMLmcCpT6ObjXYcxgZVsgyVLh8Eu1v1BCn+qi1HpelE9WN8maRjkNxtBC/p/Bhp2FpJFPm+np524/VT3v7jXUBgMR3dVlu9W35CISSJAvJiMf6b+ZqU6QfVC+AueQBwe9ybZOQAAAABJRU5ErkJggg==") 0 0 / 32px 32px repeat;
  image-rendering: pixelated;
}
/* Drift nur, solange die Aurora in Sichtweite ist (is-live aus site.js). */
.aurora.is-live .aurora-l1, .aurora.is-live .aurora-l2,
.aurora.is-live .aurora-l1 > b, .aurora.is-live .aurora-l2 > b { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .aurora-hv1, .aurora-hv2 { will-change: transform; }
}
@keyframes aurora-l1-slide {
  0%, 100% { translate: 0 0; }
  36% { translate: -6.09% 0; }
  70% { translate: 4.53% 0; }
}
@keyframes aurora-l1-lift {
  0%, 100% { scale: 1 0.96; }
  48% { scale: 1 1.1; }
}
@keyframes aurora-l1-glow {
  0%, 100% { opacity: 0.15; }
  35% { opacity: 1; }
  70% { opacity: 0.4; }
}
@keyframes aurora-l2-slide {
  0%, 100% { translate: 0 0; }
  41% { translate: 3.5% 0; }
  76% { translate: -2.58% 0; }
}
@keyframes aurora-l2-lift {
  0%, 100% { scale: 1 1; }
  33% { scale: 1 0.92; }
  66% { scale: 1 1.08; }
}
@keyframes aurora-l2-glow {
  0%, 100% { opacity: 0.25; }
  27% { opacity: 0.95; }
  51% { opacity: 0.15; }
  77% { opacity: 0.8; }
}
/* Aufstieg: an die eigene View-Timeline gebunden, umkehrbar, waechst aus dem Fuss der
   Krone. Endet bei entry 90 %, weil die Seite 14px vor der Unterkante der Aurora
   aufhoert. Ohne view() greift der Block nicht: Aurora steht aufgestiegen still. */
@keyframes aurora-rise {
  from { scale: 0.72 0; }
  to { scale: 1 1; }
}
@supports (animation-timeline: view()) {
  .aurora { view-timeline: --aurora-tl block; }
  .aurora-veil {
    will-change: transform;
    animation: aurora-rise linear both;
    animation-timeline: --aurora-tl;
    animation-range: entry 16% entry 90%;
  }
}
/* Reduzierte Bewegung: kein Aufstieg, keine Drift, kein Sog; die Grundwerte sind eine
   komponierte Ruhelage. */
@media (prefers-reduced-motion: reduce) {
  .aurora-veil, .aurora-l1, .aurora-l2,
  .aurora-l1 > b, .aurora-l2 > b { animation: none; will-change: auto; }
}
@media (forced-colors: active), print {
  .aurora { display: none; }
}
.footer-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, #191713 0%, rgba(25, 23, 19, 0.9) 34%, rgba(25, 23, 19, 0.34) 60%, rgba(25, 23, 19, 0) 82%),
    linear-gradient(to bottom, rgba(25, 23, 19, 0) 86%, rgba(25, 23, 19, 0.28) 100%);
  pointer-events: none;
}
.footer-inner { position: relative; padding: clamp(56px, 8vw, 80px) var(--gutter) clamp(120px, 20vw, 190px); }
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(24px, 4vw, 64px);
}
.footer-top h2 {
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 540;
  letter-spacing: -0.024em;
  line-height: 1.1;
  max-width: 560px;
}
.footer-sub {
  margin-top: 16px;
  font-size: 15px;
  color: rgba(242, 239, 232, 0.66);
  max-width: 46ch;
}
.footer-top .btn { flex: none; }
.footer-cols {
  margin-top: clamp(44px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1.4fr repeat(3, auto);
  gap: clamp(32px, 6vw, 96px);
  font-size: 14.5px;
  color: rgba(242, 239, 232, 0.72);
}
/* Ki-Regionalfooter: eine Spalte mehr (Marke, Leistungen, Workshops,
   Vor Ort, ai-vaerk.de). Vor den Media-Queries deklariert, damit die
   Umbrueche bei 900/520px weiterhin gewinnen. */
.footer-cols-region {
  grid-template-columns: 1.15fr repeat(4, auto);
  gap: clamp(28px, 3.4vw, 56px);
}
/* Regionalfooter mit Spalte "Für Organisationen": fuenf Linkspalten. Unter
   1400px rutscht die Marke in eine eigene Zeile, damit die Spalten Platz
   haben; die Umbrueche bei 900/520px (weiter unten) gewinnen weiterhin. */
.footer-cols-region-5 {
  grid-template-columns: 1fr repeat(5, auto);
  gap: clamp(22px, 2.6vw, 44px);
}
@media (max-width: 1400px) {
  .footer-cols-region-5 { grid-template-columns: repeat(5, auto); }
  .footer-cols-region-5 .fbrand-col { grid-column: 1 / -1; }
}
.fbrand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 18px;
  color: var(--paper-deep);
}
.fregion { margin-top: 14px; font-size: 13.5px; color: rgba(242, 239, 232, 0.55); max-width: 30ch; }
.fcol { display: grid; gap: 10px; align-content: start; }
.fcol b {
  color: var(--paper-deep);
  font-weight: 560;
  margin-bottom: 3px;
  font-family: var(--font-brand);
}
.fcol a {
  color: inherit;
  text-decoration: none;
  padding: 2px 0;
}
.fcol a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Nur der Sprung auf die andere Regionaldomain nennt seinen Host. */
.fcol a i {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: rgba(242, 239, 232, 0.42);
}
.fmail {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  color: rgba(242, 239, 232, 0.72);
  text-decoration: none;
}
.fmail:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-base {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-bottom: 26px;
  font-size: 13px;
  color: rgba(242, 239, 232, 0.55);
}
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: #fff; }

/* Markt-Umschalter im Footer. Wechselt die Domain, darum bewusst eine Liste
   und kein Toggle: der Nutzer soll sehen, wohin er geht. Farben wie in
   .footer-base, in dem er steht. */
.market-picker__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.market-picker__current { color: rgba(242, 239, 232, 0.55); }
.market-picker__link {
  color: rgba(242, 239, 232, 0.72);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.market-picker__link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .market-picker__link { transition: none; }
}

/* iOS zoomt die Seite beim Fokussieren, wenn das Eingabefeld unter
   16px liegt. Auf Touch-Breiten alle Felder anheben statt den
   Viewport zu sperren (maximum-scale waere die unzugaengliche Variante). */
@media (max-width: 640px) {
  /* html-Praefix: gewinnt auch gegen .klasse input-Selektoren in
     spaeter geladenen Stylesheets (z.B. .letter-field input, 14.5px). */
  html input[type="text"],
  html input[type="email"],
  html input[type="tel"],
  html input[type="search"],
  html textarea:not([hidden]),
  html select:not([hidden]) { font-size: 16px; }
}
@media (max-width: 900px) {
  .footer-top { flex-direction: column; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* ── Reveal (JS-gated so content is never hidden without JS) ── */

/* ── Mobile rhythm ─────────────────────────────────────────
   One coherent narrow-screen spacing system: section openings keep
   air, repeated gaps inside long stacked modules tighten. */
@media (max-width: 700px) {
  .sec { padding: 44px 0; }
  .sec-head .intro { margin-top: 12px; }
  .kicker { margin-bottom: 14px; }

  /* Hero */
  .hero-stage { padding-top: 44px; padding-bottom: 40px; }
  .hero-sub { margin-top: 22px; }
  .hero-cta { margin-top: 26px; }
  .range-list { margin-top: 32px; }

  /* Ergebnis triad */
  .triad { margin-top: 26px; gap: 22px; }
  .triad-item { padding-top: 16px; }
  .triad-item .t-icon { margin-bottom: 12px; }

  /* Wissensflow stack */
  .flow { margin-top: 30px; gap: 10px; }
  .flow-link { height: 30px; }
  .doc-stack { gap: 10px; }
  .doc-tile { padding: 12px 14px 0; }
  .engine { padding: 20px 18px 18px; }
  .engine-rows { margin-top: 12px; gap: 8px; }
  .qa-col { gap: 12px; }
  .q-bubble { padding: 12px 15px; }
  .a-card { padding: 16px 17px 15px; }
  .flow-notes { margin-top: 26px; gap: 14px; padding-top: 18px; }

  /* Lösungsfelder */
  .felder-grid { margin-top: 26px; gap: 12px; }
  .feld-card { padding: 20px 18px 18px; gap: 8px; }
  .feld-card .feld-more { padding-top: 8px; }
  .felder-cta { margin-top: 20px; }

  /* Arbeitsweise */
  .work-grid { margin-top: 24px; }
  .work-item { padding: 18px 0; }

  /* Fallstudien-Teaser */
  .case-teaser { margin-top: 16px; gap: 22px; }
  .case-teaser p { margin-top: 12px; }
  .case-teaser .btn { margin-top: 18px; }

  /* Einblicke */
  .article-list { margin-top: 26px; }
  .article-row { padding: 20px 0; }
  .note-line { margin-top: 18px; }
  .note-web { margin-top: 26px; max-width: 44ch; }

  /* Footer */
  .site-footer { margin-top: 44px; }
  .footer-inner { padding: 44px var(--gutter) 118px; }
  .footer-sub { margin-top: 12px; }
  .footer-cols {
    margin-top: 30px;
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
  }
  .fbrand-col { grid-column: 1 / -1; }
  .fregion { margin-top: 10px; }
  .fcol { gap: 8px; }
  .footer-base { padding-bottom: 20px; }
}

/* ── "Mehr"-Menü in der Navigation: bewusst leise ──────── */
.nav-more { position: relative; }
.nav-more > button,
.language-picker > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 14.5px;
  color: var(--stone);
  background: none;
  border: 0;
  padding: 7px 11px;
  border-radius: 9px;
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-more > button:hover,
.nav-more.is-open > button,
.language-picker > summary:hover,
.language-picker[open] > summary { color: var(--ink); background: rgba(33, 30, 26, 0.05); }
.nav-more > button svg,
.language-picker > summary svg { width: 11px; height: 11px; transition: transform 0.25s var(--ease); }
.nav-more.is-open > button svg { transform: rotate(180deg); }
.nav-more-menu,
.language-picker__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 208px;
  display: grid;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(33, 30, 26, 0.14);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s var(--ease-exit), transform 0.18s var(--ease-exit);
}
.nav-more.is-open .nav-more-menu {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
  transition: opacity 0.2s var(--ease), transform 0.25s var(--ease);
}
.nav-more-menu a,
.language-picker__menu > a,
.language-picker__menu > span {
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 9px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
/* Kraeftiger als der Hover in der Leiste: die Leiste steht auf --paper, das
   Panel auf Weiss, und derselbe Ton traegt dort deutlich weniger weit. */
.nav-more-menu a:hover,
.language-picker__menu > a:hover { background: rgba(33, 30, 26, 0.085); color: var(--ink); }

/* Die Sprachwahl haengt am rechten Rand der Leiste, nicht mittig unter dem
   Ausloeser: zentriert liefe sie aus dem Viewport. */
.language-picker__menu {
  left: auto;
  right: 0;
  transform: translateY(8px);
  min-width: 184px;
  z-index: 41;
  opacity: 1;
  pointer-events: auto;
  animation: language-picker-in 0.2s var(--ease) both;
}
.language-picker__menu > a,
.language-picker__menu > span { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Die aktive Sprache ist kein Ziel, sondern ein Zustand. Sie traegt den
   Akzentton, der Zeiger einen neutralen: so sind beide gleichzeitig lesbar,
   auch wenn der Zeiger auf der aktiven Zeile steht. */
.language-picker__menu > [aria-current] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 560;
  cursor: default;
}
.language-picker__menu > [aria-current] span { color: var(--accent); font-size: 12px; }
@keyframes language-picker-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .language-picker__menu { animation: none; transform: translateY(0); }
  .language-picker > summary svg { transition: none; }
}
/* Am Finger bleibt die Trefferflaeche bei 44px, am Zeiger die kompakte
   Zeilenhoehe des "Mehr"-Menues. */
@media (pointer: coarse) {
  .language-picker > summary,
  .language-picker__menu > a,
  .language-picker__menu > span { min-height: 44px; }
}
@media (max-width: 1240px) {
  /* Im Mobil-Menü: "Mehr" bleibt zusammengeklappt (Disclosure im
     Rhythmus der Hauptlinks), sonst frisst die Liste den Screen. */
  .nav-more { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); }
  .nav-more > button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 480;
    color: var(--ink);
    padding: 12px 12px;
    border-radius: 10px;
    background: none;
  }
  .nav-more > button svg { width: 13px; height: 13px; color: var(--stone); }
  .nav-more-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    border: 0;
    background: none;
    padding: 0;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 6px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease);
  }
  .nav-more.is-open .nav-more-menu { max-height: 200px; transform: none; }
  .nav-more-menu a {
    font-size: 15px;
    font-weight: 480;
    color: var(--ink-soft);
    padding: 10px 12px;
    border-radius: 10px;
  }
}