/* Reihenfolge: Schriften, dann Haussystem, dann Marke. Marke MUSS zuletzt stehen. */
/* Sora, Epilogue, Inconsolata: SIL Open Font License 1.1, Selbsthosting erlaubt.
   Dieselben Familien wie auf der alten Seite, die sie von Google geladen hat.
   Hier lokal, keine Verbindung zu Google. */
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url('../schriften/sora-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url('../schriften/sora-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Epilogue';font-style:normal;font-weight:100 900;font-display:swap;src:url('../schriften/epilogue-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Epilogue';font-style:normal;font-weight:100 900;font-display:swap;src:url('../schriften/epilogue-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inconsolata';font-style:normal;font-weight:200 900;font-display:swap;src:url('../schriften/inconsolata-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inconsolata';font-style:normal;font-weight:200 900;font-display:swap;src:url('../schriften/inconsolata-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ============================================================
   DHM-Haussystem — dunkel, grosszuegig, kontrastreich.
   Aufgebaut nach doublehmedia.de: fast schwarzer Grund, riesige
   Display-Headline, Versal-Eyebrow im Akzentton, Pill-Knopf mit
   Pfeil, Filmkorn, Sheen, Scroll-Indikator.

   Was pro Kunde wechselt, steht ausschliesslich in den Tokens
   weiter unten: --akzent, --akzent-tief, --display. Alles andere
   ist Haus.

   Keine Inline-Styles im HTML — CSP ohne unsafe-inline.
   Bewegung nur ueber transform/opacity, prefers-reduced-motion
   schaltet sie ab.
   ============================================================ */

:root {
  /* Schichten */
  --ink:        #0A0A0A;
  --layer:      #141414;
  --layer-2:    #1A1A1A;
  --cream:      #F6F4F0;
  /* Schriftfarbe auf --ink. Eigener Token, damit eine Marke das
     Haussystem umdrehen kann (helle Flaeche, dunkle Schrift), ohne
     dass 22 fest verdrahtete Werte uebrig bleiben. */
  --auf-ink:    #F6F4F0;
  --cream-tief: #E8E4DC;
  --muted:      #8A8A8A;
  --line:       color-mix(in srgb, var(--auf-ink) 10%, transparent);
  --line-stark: color-mix(in srgb, var(--auf-ink) 22%, transparent);
  --line-ink:   rgba(10, 10, 10, .12);

  /* Grundton fuer leise Abschnitte. Getrennt von --cream, weil --cream
     zugleich die Schriftfarbe auf dunklem Grund ist. Eine Marke, die das
     System umdreht (helle Flaeche, dunkle Schrift), braucht beide
     Bedeutungen getrennt, sonst wird aus dem leisen Abschnitt eine
     dunkle Flaeche mit gleichfarbiger Schrift. */
  --dunst:      var(--cream);
  --dunst-tief: var(--cream-tief);

  /* Schrift ueber Fotos. Buehne und Bildband liegen immer auf einem
     abgedunkelten Bild, auch bei einer hellen Marke. */
  --auf-bild:        var(--cream);
  --auf-bild-leise:  var(--auf-ink);
  --auf-bild-akzent: var(--akzent-hell, var(--akzent));

  /* Helle Abschnitte */
  --papier:     #FFFFFF;
  --tinte:      #0C0C0C;
  --text:       #3A3A3A;
  --text-leise: #6E6E6E;

  --weg:  cubic-bezier(.16, 1, .3, 1);
  --weg2: cubic-bezier(.22, .61, .36, 1);

  --kopf-grund:          rgba(10, 10, 10, .55);
  --kopf-grund-kompakt:  rgba(10, 10, 10, .9);

  --spur: 1240px;
  --pad: 22px;
}
@media (min-width: 700px)  { :root { --pad: 32px; } }
@media (min-width: 1100px) { :root { --pad: 48px; } }

*, *::before, *::after { box-sizing: border-box; }

/* Das hidden-Attribut versteckt ueber die Browservorgabe display:none.
   Jede eigene display-Regel schlaegt das, weil sie aus dem Autoren-
   stylesheet kommt. Bei .knopf (display:inline-flex) blieben dadurch
   "Zurueck" und "Anfrage absenden" im Planer sichtbar, obwohl das
   Skript sie versteckt hatte. Deshalb hier erzwungen. */
[hidden] { display: none !important; }

/* Sprungmarke: liegt ausserhalb des Bildes und kommt erst beim
   Tastaturfokus hervor. Ohne sie muss man auf jeder Seite durch die
   komplette Navigation tabben. */
.sprungmarke {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--akzent); color: var(--knopf-schrift, #0A0A0A);
  padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: top .25s var(--weg);
}
/* Bewusst :focus statt :focus-visible. Die Sprungmarke soll bei
   jedem Fokus hervorkommen, auch wenn der Browser den Fokus nicht
   als "sichtbar" einstuft. */
.sprungmarke:focus { top: 12px; }
main:focus { outline: none; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Scrollsperre beim offenen Klappmenue nur ueber html, body dabei
   ausdruecklich auf visible. body traegt sonst overflow-x: hidden
   (siehe unten): solange html sichtbar ist, wandert das an den Viewport.
   Wird html gesperrt, bleibt es an body haengen, body wird zum eigenen
   Scrollbereich, der sticky Kopf verliert seinen Halt und springt auf
   seine Ausgangslage am Seitenanfang. Das Menue haengt am Kopf
   (backdrop-filter macht ihn zum Bezugsrahmen fuer position: fixed),
   oeffnet ausserhalb des Bildschirms und die Seite bleibt gesperrt
   (MediNah, 31.10.2026). */
html.menue-offen { overflow: hidden; }
html.menue-offen body { overflow: visible; }

body {
  margin: 0;
  font-family: var(--fliess), -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: clamp(16px, 1.15vw, 17.5px);
  line-height: 1.72;
  color: var(--text);
  background: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* picture ist nur die Huelle fuer die AVIF-Auswahl. display:contents nimmt
   sie aus dem Layout heraus, damit das img weiterhin direktes Kind seines
   Elternelements bleibt. Sonst braeche jede Regel wie .buehne-bild img oder
   .galerie figure img und die absolute Positionierung der Buehne. */
picture { display: contents; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--tinte);
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(34px, 4.7vw, 68px); }

/* Deutsche Komposita sind lang: "Datenschutzerklaerung" sprengte bei
   360 px die Zeile. Das Dokument traegt lang="de", damit trennt der
   Browser korrekt. break-word ist der Notnagel, wenn kein Trennpunkt
   im Wort liegt. */
h1, h2, h3, h4, .hut, .zahl b, .schritt legend, .frage summary {
  hyphens: auto;
  overflow-wrap: break-word;
}
/* In Ueberschriften nicht: dort trennte es Woerter mitten durch
   ("Elektroin-nung", "Ei-gene Note"), was in einer Schlagzeile stoert.
   Ueberschriften brechen nur an Leerzeichen, den Notnagel break-word
   behalten sie fuer den Fall, dass ein einzelnes Wort breiter ist als
   die Spalte. */
h1, h2, h3, .hut, .zahl b, .schritt legend, .frage summary { hyphens: manual; }
h2 { font-size: clamp(26px, 3.1vw, 44px); }
h3 { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.25; letter-spacing: -.01em; }
h4 { font-size: clamp(15px, 1.1vw, 17px); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent-tief); text-decoration: none; transition: color .3s var(--weg); }
a:hover { color: var(--akzent); }
.recht a, .fliess a { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 3px; }

/* ------------------------------------------------ Filmkorn ------------- */
/* Feines, langsam wanderndes Korn ueber dunklen Flaechen. Kostet nichts:
   ein einziges wiederholtes Rauschmuster als data-URI, animiert nur ueber
   transform. */
.korn {
  position: relative;
  isolation: isolate;
  /* Die Kornebene liegt mit inset:-60% bewusst ueber den Rand hinaus,
     damit die Wanderbewegung keine Kanten zeigt. Ohne overflow:hidden
     schiebt sie das Dokument breit — beim Fussbereich waren das 864 px
     Querueberlauf. */
  overflow: hidden;
}
.korn::after {
  content: '';
  position: absolute;
  inset: -60%;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation: kornWandern 8s steps(6) infinite;
  mix-blend-mode: overlay;
}
.korn > * { position: relative; z-index: 1; }
@keyframes kornWandern {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4%, 3%); }
  40%  { transform: translate(3%, -3%); }
  60%  { transform: translate(-2%, 4%); }
  80%  { transform: translate(4%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ------------------------------------------------ Spur / Bloecke ------- */

.spur { width: 100%; max-width: var(--spur); margin: 0 auto; padding: 0 var(--pad); }
.spur-schmal { max-width: 860px; }

.block { padding: clamp(72px, 10vw, 156px) 0; background: var(--papier); }
.block-dunkel { background: var(--ink); color: color-mix(in srgb, var(--auf-ink) 74%, transparent); }
.block-dunkel h1, .block-dunkel h2, .block-dunkel h3, .block-dunkel h4 { color: var(--cream); }
.block-schicht { background: var(--layer); color: color-mix(in srgb, var(--auf-ink) 74%, transparent); }
.block-schicht h2, .block-schicht h3 { color: var(--cream); }
.block-dunst { background: var(--dunst); }

/* Nur die mittige Variante wird zentriert. Vorher schob das auto auch
   linksbuendige Ueberschriften um gut 200 Pixel nach innen, waehrend der
   Text darunter am Spurrand stand. */
.block-kopf { max-width: 760px; margin: 0 0 clamp(44px, 5vw, 74px); }
.block-kopf-mitte { text-align: center; margin-left: auto; margin-right: auto; }
.block-kopf p { font-size: clamp(17px, 1.35vw, 20px); color: var(--text-leise); margin-bottom: 0; }
.block-dunkel .block-kopf p, .block-schicht .block-kopf p { color: color-mix(in srgb, var(--auf-ink) 60%, transparent); }

/* ------------------------------------------------ Eyebrow -------------- */

.hut {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--fliess), sans-serif;
  font-size: clamp(11px, .78vw, 12.5px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 20px;
}
.hut::before {
  content: '';
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .55;
  flex-shrink: 0;
}
.block-kopf-mitte .hut { justify-content: center; }

/* ------------------------------------------------ Knoepfe -------------- */

.knopf {
  --sheen: rgba(255, 255, 255, .26);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 34px;
  border: 0;
  border-radius: 999px;
  font-family: var(--fliess), sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  transition: background-color .35s var(--weg), color .35s var(--weg),
              box-shadow .45s var(--weg), transform .45s var(--weg);
}
.knopf::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -55%;
  width: 42%;
  background: linear-gradient(100deg, transparent, var(--sheen), transparent);
  transform: skewX(-16deg);
  transition: left .7s var(--weg);
  z-index: -1;
}
.knopf:hover::after { left: 118%; }
.knopf .pfeil { transition: transform .45s var(--weg); }
.knopf:hover .pfeil { transform: translateX(5px); }

/* Eigener Token fuer die Knopfflaeche: bei Roth lag Weiss auf dem hellen
   Markenrot nur bei 3,6:1. Der Akzent selbst bleibt unangetastet, damit
   die Marke stimmt, nur die Flaeche unter der Schrift wird tiefer. */
.knopf-voll {
  background: var(--knopf-grund, var(--akzent));
  color: var(--knopf-schrift, #fff);
  box-shadow: 0 10px 30px -10px var(--akzent-schatten, rgba(0,0,0,.5));
}
.knopf-voll:hover {
  background: var(--knopf-grund-hover, var(--akzent-hell, var(--akzent)));
  color: var(--knopf-schrift, #fff);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px var(--akzent-schatten, rgba(0,0,0,.55));
}

/* Knopf, dessen Ziel noch fehlt. Sichtbar, aber klar nicht anklickbar,
   damit kein Verweis ins Leere laeuft. */
.knopf:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: inset 0 0 0 1px var(--line-ink); }
.knopf:disabled:hover { transform: none; }
.knopf-linie {
  background: transparent;
  color: var(--auf-bild);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--auf-bild) 26%, transparent);
  --sheen: rgba(255, 255, 255, .12);
}
.knopf-linie:hover { background: color-mix(in srgb, var(--auf-bild) 10%, transparent); color: var(--auf-bild); transform: translateY(-2px); }
.block .knopf-linie, .block-dunst .knopf-linie { color: var(--tinte); box-shadow: inset 0 0 0 1px var(--line-ink); }
.block .knopf-linie:hover, .block-dunst .knopf-linie:hover { background: rgba(10, 10, 10, .05); color: var(--tinte); }

/* Heller Zweitknopf — fuer dunkle Buehnen, wo die Linien-Variante
   zu leise waere. */
.knopf-hell {
  background: var(--dunst);
  color: var(--tinte);
  --sheen: rgba(10, 10, 10, .12);
}
.knopf-hell:hover { background: #fff; color: var(--tinte); transform: translateY(-2px); box-shadow: 0 18px 44px -14px rgba(0,0,0,.6); }

/* Knopf im Kopfbereich deutlich breiter als die uebrigen */
.kopf .knopf { padding-left: 30px; padding-right: 30px; }

/* ------------------------------------------------ Lesefortschritt ------ */

.lesefortschritt {
  position: fixed; inset: 0 0 auto 0;
  height: 2px; z-index: 200;
  background: var(--akzent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ------------------------------------------------ Kopfbereich ---------- */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: var(--kopf-grund);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--weg), border-color .4s var(--weg);
}
.kopf.kompakt { background: var(--kopf-grund-kompakt); border-bottom-color: var(--line); }

.kopf-innen {
  display: flex; align-items: center; justify-content: space-between;
  /* Die Kopfhoehe folgt dem Logo, sonst schneidet sie eine hohe
     Wortmarke unten ab. 88 Pixel bleiben die Untergrenze. */
  gap: 24px; height: max(88px, calc(var(--logo-hoehe, 40px) + 20px));
  transition: height .4s var(--weg);
}
.kopf.kompakt .kopf-innen { height: max(68px, calc(var(--logo-hoehe, 40px) * var(--logo-kompakt, .70) + 16px)); }

.marke { display: inline-flex; align-items: center; flex-shrink: 0; }
.marke img {
  height: var(--logo-hoehe, 40px); width: auto;
  filter: var(--logo-filter, none);
  transition: height .4s var(--weg), transform .5s var(--weg), filter .4s var(--weg);
}
.kopf.kompakt .marke img { height: calc(var(--logo-hoehe, 40px) * var(--logo-kompakt, .70)); }
.marke:hover img { transform: scale(1.04); filter: var(--logo-filter-hover, var(--logo-filter, none)); }

.nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); }
.nav a:not(.knopf) {
  position: relative;
  font-size: 14.5px; font-weight: 500;
  color: color-mix(in srgb, var(--auf-ink) 72%, transparent);
  padding: 8px 0;
  transition: color .3s var(--weg);
}
.nav a:not(.knopf)::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: var(--akzent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--weg);
}
.nav a:not(.knopf):hover { color: var(--cream); }
.nav a:not(.knopf):hover::after, .nav a.aktiv:not(.knopf)::after { transform: scaleX(1); }
/* Der Knopf in der Navigation traegt seine eigene Flaeche und Schrift.
   Ohne :not(.knopf) faerbte .aktiv ihn in die Textfarbe und die Schrift
   verschwand auf dem Markenton. */
.nav a.aktiv:not(.knopf) { color: var(--cream); }

.nav-schalter {
  display: none; width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; cursor: pointer; border-radius: 8px;
}
.nav-schalter span {
  display: block; width: 22px; height: 1.5px; margin: 5px auto;
  background: var(--cream); border-radius: 2px;
  transition: transform .4s var(--weg), opacity .3s var(--weg);
}
.nav-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ------------------------------------------------ Buehne --------------- */

.buehne {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: min(86vh, 820px);
  padding: 140px 0 clamp(60px, 7vw, 100px);
  background: var(--ink);
  overflow: hidden;
}
/* Die Unterseiten-Buehne war mit 480 px zu flach, das Bild wirkte wie ein
   Streifen. Jetzt naeher an der Startseite, aber weiterhin klar kuerzer. */
.buehne-kurz { min-height: min(72vh, 640px); padding-top: 148px; }

.buehne-bild { position: absolute; inset: -8% 0; z-index: 0; overflow: hidden; }
.buehne-bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--buehne-lage, center 45%); }
.buehne-bild::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.34) 34%, rgba(10,10,10,.88) 100%),
    linear-gradient(90deg, rgba(10,10,10,.78) 0%, rgba(10,10,10,.30) 62%, transparent 100%);
}
.buehne .spur { position: relative; z-index: 2; width: 100%; }
/* Die Eyebrow darf nicht mit umbrechen — nur Titel und Fliesstext
   werden auf Lesebreite gehalten. */
.buehne-text { max-width: 62ch; }
.buehne .hut { max-width: none; }
.buehne h1 { color: var(--auf-bild); max-width: 19ch; }
.buehne p {
  /* Ueber einem Foto liegt immer noch die Abdunklung. 78 Prozent Deckung
     lasen sich darauf grau statt hell, deshalb 92. */
  color: color-mix(in srgb, var(--auf-bild-leise) 92%, transparent);
  font-size: clamp(17px, 1.5vw, 21px);
  max-width: 48ch; margin-top: 24px;
}
.buehne .hut { color: var(--auf-bild-akzent); }
/* Auf hellen Abschnitten ist der volle Markenton zu leise: das Gold von
   La Casetta kam auf Weiss nur auf 2,2:1. Dort steht die tiefe Variante. */
.block .hut, .block-dunst .hut, .block-bildrand .hut { color: var(--akzent-tief); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.knopfreihe-mitte { justify-content: center; }

/* Scroll-Hinweis */
.scrollhinweis {
  position: absolute; left: var(--pad); bottom: 30px; z-index: 3;
  width: 22px; height: 36px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--auf-bild) 26%, transparent);
  pointer-events: none;
}
.scrollhinweis::after {
  content: '';
  position: absolute; left: 50%; top: 8px;
  width: 3px; height: 6px; margin-left: -1.5px;
  border-radius: 2px; background: var(--auf-bild-akzent);
  animation: radLauf 2.1s var(--weg) infinite;
}
@keyframes radLauf {
  0%   { transform: translateY(0);    opacity: 0; }
  25%  { opacity: 1; }
  75%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* ------------------------------------------------ Stichworte ----------- */

.stichworte { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; }
.stichworte li {
  list-style: none;
  padding: 8px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  /* Leicht mit dem Markenton hinterlegt. Als reine Kontur ueber einem Foto
     verschwanden die Marken je nach Bildstelle. */
  background: color-mix(in srgb, var(--auf-bild-akzent) 15%, transparent);
  color: var(--auf-bild);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--auf-bild-akzent) 42%, transparent);
  transition: background-color .35s var(--weg), color .35s var(--weg), box-shadow .35s var(--weg);
}
.stichworte li:hover {
  background: color-mix(in srgb, var(--auf-bild-akzent) 26%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--auf-bild-akzent) 70%, transparent);
}
.stichworte-hell li, .stichworte-dunkel li { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-ink); }
.stichworte-hell li:hover, .stichworte-dunkel li:hover { background: rgba(10, 10, 10, .04); color: var(--tinte); }

/* ------------------------------------------------ Karten --------------- */

.gitter { display: grid; gap: clamp(14px, 1.4vw, 20px); }
.gitter-1 { grid-template-columns: 1fr; }
.gitter-2 { grid-template-columns: repeat(2, 1fr); }
.gitter-3 { grid-template-columns: repeat(3, 1fr); }

.karte {
  position: relative;
  background: var(--papier);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 12px 34px -18px rgba(10,10,10,.28);
  transition: transform .5s var(--weg), box-shadow .5s var(--weg);
}
.karte:hover { box-shadow: 0 2px 6px rgba(10,10,10,.06), 0 30px 60px -24px rgba(10,10,10,.4); }
.block-dunkel .karte, .block-schicht .karte {
  background: var(--layer-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: color-mix(in srgb, var(--auf-ink) 70%, transparent);
}
.block-dunkel .karte:hover, .block-schicht .karte:hover {
  box-shadow: inset 0 0 0 1px var(--line-stark), 0 30px 60px -24px rgba(0,0,0,.7);
}
a.karte { display: block; color: inherit; }
a.karte:hover { color: inherit; }

.karte-text { padding: clamp(24px, 2.2vw, 34px); }
.karte h2 { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.22; margin-bottom: .5em; }
.karte h3 { margin-bottom: .5em; }
.karte p { color: var(--text-leise); margin-bottom: 0; font-size: 15.5px; }
.block-dunkel .karte p, .block-schicht .karte p { color: color-mix(in srgb, var(--auf-ink) 60%, transparent); }

.karte-bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--layer); }
.karte-bild-hoch { aspect-ratio: 3 / 4; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--weg); }
.karte:hover .karte-bild img { transform: scale(1.06); }
.karte-abstand { margin-top: 18px; }

.sinnbild {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 22px;
  border-radius: 13px;
  background: var(--akzent-dunst, rgba(0,0,0,.05));
  color: var(--akzent-tief);
  transition: background-color .45s var(--weg), color .45s var(--weg), transform .5s var(--weg);
}
.sinnbild svg { width: 22px; height: 22px; }
.karte:hover .sinnbild { background: var(--akzent); color: var(--knopf-schrift, #fff); transform: translateY(-2px); }
.block-dunkel .sinnbild, .block-schicht .sinnbild { background: color-mix(in srgb, var(--auf-ink) 7%, transparent); color: var(--akzent); }

.hinweis {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  font-size: 14px; font-weight: 600; letter-spacing: .01em;
  color: var(--akzent-tief);
  transition: color .35s var(--weg);
}
.block-dunkel .hinweis, .block-schicht .hinweis { color: var(--akzent); }
.hinweis svg { width: 15px; height: 15px; transition: transform .45s var(--weg); }
a.karte:hover .hinweis svg { transform: translateX(6px); }

/* ------------------------------------------------ Stimmen -------------- */

/* Kundenstimmen sind unterschiedlich lang. In einem festen Raster bliebe bei
   fuenf Karten ein Platz leer. Spalten statt Raster: die Karten fliessen und
   es entsteht kein Loch, egal wie viele es sind. */
.stimmen-spalten { columns: 1; column-gap: clamp(16px, 1.6vw, 24px); }
@media (min-width: 700px)  { .stimmen-spalten { columns: 2; } }
@media (min-width: 1100px) { .stimmen-spalten { columns: 3; } }
.stimmen-spalten .stimme { break-inside: avoid; margin-bottom: clamp(16px, 1.6vw, 24px); }

.stimme {
  margin: 0;
  padding: clamp(26px, 2.4vw, 38px);
  border-radius: 18px;
  background: var(--papier);
  box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 12px 34px -18px rgba(10,10,10,.28);
  transition: transform .5s var(--weg), box-shadow .5s var(--weg);
}
.stimme:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(10,10,10,.06), 0 30px 60px -24px rgba(10,10,10,.38); }
.block-dunkel .stimme, .block-schicht .stimme { background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--line); }
.stimme blockquote { margin: 0 0 18px; }
.stimme blockquote p {
  font-family: var(--display);
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.55; color: var(--tinte);
}
.block-dunkel .stimme blockquote p, .block-schicht .stimme blockquote p { color: var(--cream); }
.stimme figcaption { font-size: 13.5px; color: var(--text-leise); }
.stimme cite { font-style: normal; font-weight: 600; color: var(--akzent-tief); }
.block-dunkel .stimme cite, .block-schicht .stimme cite { color: var(--akzent); }
.sterne { display: flex; gap: 3px; margin-bottom: 16px; }
.sterne svg { width: 15px; height: 15px; fill: var(--akzent); }

/* Warnkarte in unfertigen Rechtstexten — unuebersehbar */
.karte-warnung {
  background: var(--akzent-dunst);
  box-shadow: inset 0 0 0 1.5px var(--akzent);
  margin-bottom: 34px;
}
.karte-warnung h2 { margin-top: 0; font-size: clamp(18px, 1.5vw, 22px); color: var(--akzent-tief); }
.karte-warnung code { background: rgba(10,10,10,.07); padding: 1px 6px; border-radius: 4px; font-size: .92em; }

/* ------------------------------------------------ Zahlen --------------- */

.zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.4vw, 20px); }
/* Feste Spaltenzahl passend zur Kachelzahl. Vier Spalten bei drei
   Kacheln liessen rechts einen leeren Platz stehen. */
.zahlen-drei { grid-template-columns: repeat(3, 1fr); }
.zahlen-sechs { grid-template-columns: repeat(3, 1fr); }
/* Gefuellt statt nur umrandet: als reine Kontur wirkten die Kaesten leer.
   Der Grund ist der Markenakzent in der dunklen Variante, die Schrift darauf
   creme. Kontraste je Marke nachgerechnet, siehe Markendateien. */
.zahl {
  padding: clamp(26px, 2.4vw, 38px) clamp(20px, 2vw, 28px);
  border-radius: 18px;
  background: var(--akzent-tief);
  color: var(--cream);
  box-shadow: none;
  transition: transform .5s var(--weg), box-shadow .5s var(--weg), background-color .4s var(--weg);
}
.zahl:hover {
  transform: translateY(-3px);
  background: var(--akzent-hell-tief, var(--akzent-tief));
  box-shadow: 0 20px 46px -22px var(--akzent-schatten);
}
.block-dunkel .zahl, .block-schicht .zahl { background: color-mix(in srgb, var(--akzent) 16%, transparent); }
.zahl b {
  display: block;
  font-family: var(--display);
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1; letter-spacing: -.03em;
  color: var(--akzent-tief); margin-bottom: 10px;
}
.block-dunkel .zahl b, .block-schicht .zahl b { color: var(--akzent); }
.zahl span { font-size: 14.5px; color: var(--text-leise); }
.block-dunkel .zahl span, .block-schicht .zahl span { color: color-mix(in srgb, var(--auf-ink) 76%, transparent); }
.zahlen-wort .zahl span:first-child {
  display: block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 90%, transparent); margin-bottom: 8px;
}
/* Hoehere Spezifitaet als .zahlen .zahl b weiter unten. Sonst gewinnt
   dort der Zahlgrad von 50 px und ein Wort wie "Intensivpflegekraefte"
   steht in vier getrennten Zeilen in einer 215 Pixel breiten Kachel. */
.zahlen.zahlen-wort .zahl b { font-size: clamp(18px, 1.7vw, 25px); color: var(--cream); line-height: 1.25; }
.block-dunkel .zahlen.zahlen-wort .zahl b, .block-schicht .zahlen.zahlen-wort .zahl b { color: var(--cream); }
.block-dunkel .zahlen-wort .zahl span:first-child, .block-schicht .zahlen-wort .zahl span:first-child { color: var(--akzent); }

/* ------------------------------------------------ Zweispalter ---------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 84px); align-items: center; }
.duo-bild { overflow: hidden; border-radius: 20px; }
.duo-bild img { width: 100%; }
.duo-bild-hoch img { aspect-ratio: 3 / 4; object-fit: cover; }

.haken { list-style: none; margin: 28px 0 0; padding: 0; }
.haken li {
  position: relative; padding-left: 30px; margin-bottom: 13px;
  font-size: 15.5px; color: inherit;
}
.haken li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--akzent);
}

/* --------------------------------------------- Abschnitt mit Randbild ---
   Das Foto sitzt nicht als Karte in der Mitte, sondern laeuft rechts in den
   Abschnitt hinein und wird nach links in den Untergrund geblendet. */

.block-bildrand { position: relative; overflow: hidden; }
.bildrand-bild { position: absolute; inset: 0 0 0 auto; width: min(50%, 720px); }
.bildrand-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.bildrand-bild::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--bildrand-grund, var(--papier)) 0%,
    color-mix(in srgb, var(--bildrand-grund, var(--papier)) 55%, transparent) 34%,
    transparent 76%);
}
.block-dunst.block-bildrand { --bildrand-grund: var(--dunst); }
.bildrand-text { position: relative; z-index: 1; max-width: 46ch; }

@media (max-width: 900px) {
  .bildrand-bild {
    position: relative; inset: auto; width: 100%; height: clamp(220px, 42vw, 320px);
    margin-top: clamp(32px, 4vw, 48px); border-radius: 20px; overflow: hidden;
  }
  .bildrand-bild::after { display: none; }
  .bildrand-text { max-width: none; }
}

/* ------------------------------------------------ Bildband ------------- */

.bildband {
  position: relative; height: clamp(320px, 46vw, 520px);
  display: flex; align-items: center; overflow: hidden; background: var(--ink);
}
.bildband img { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; object-position: var(--band-lage, center 50%); }
.bildband::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.9) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.3) 100%);
}
.bildband-hoch { height: clamp(400px, 56vw, 640px); }
.bildband .spur { position: relative; z-index: 2; }
.bildband h2 { color: var(--auf-bild); max-width: 18ch; }
/* Ueberschrift mit gesetztem Umbruch: die Zeilenbreite darf sie nicht
   ein zweites Mal brechen. */
.bildband h2.h2-breit { max-width: none; }
.bildband p { color: color-mix(in srgb, var(--auf-bild-leise) 88%, transparent); max-width: 50ch; margin-bottom: 0; }

/* --------------------------------------------- Reservierung ------------
   Zwei-Klick-Loesung: erst der Hinweis, nach dem Klick das Fenster des
   Anbieters. Vorher geht kein Aufruf an einen fremden Server. */

.reservierung { border-radius: 20px; overflow: hidden; }
.reservierung-hinweis {
  background: var(--dunst); border-radius: 20px;
  padding: clamp(28px, 3.4vw, 46px);
  text-align: center;
}
.block-dunkel .reservierung-hinweis, .block-schicht .reservierung-hinweis {
  background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--line);
}
.reservierung-hinweis p { max-width: 56ch; margin: 0 auto 22px; color: var(--text-leise); }
.block-dunkel .reservierung-hinweis p, .block-schicht .reservierung-hinweis p { color: color-mix(in srgb, var(--auf-ink) 74%, transparent); }
.reservierung-rahmen {
  display: block; width: 100%; height: clamp(620px, 78vh, 860px);
  border: 0; border-radius: 20px; background: var(--papier);
}

/* ------------------------------------------------ Speisekarte ---------- */

.karten-wahl {
  display: flex; gap: clamp(18px, 2.4vw, 36px);
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line-ink);
  margin-bottom: clamp(34px, 4vw, 54px);
}
.karten-wahl::-webkit-scrollbar { display: none; }
.karten-reiter {
  flex-shrink: 0; appearance: none; background: none; border: 0;
  padding: 0 0 16px; margin-bottom: -1px; cursor: pointer;
  font-family: var(--fliess), sans-serif;
  font-size: clamp(12px, .9vw, 13.5px); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-leise);
  border-bottom: 2px solid transparent;
  transition: color .35s var(--weg), border-color .35s var(--weg);
}
.karten-reiter:hover { color: var(--tinte); }
.karten-reiter[aria-selected="true"] { color: var(--akzent-tief); border-bottom-color: var(--akzent); }

.karten-notiz { color: var(--text-leise); font-size: 15.5px; margin-bottom: clamp(24px, 2.6vw, 34px); }
.karten-notiz-mitte { text-align: center; margin-top: 18px; }

.karten-liste { list-style: none; margin: 0; padding: 0; }
.karten-liste li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 17px 0; border-bottom: 1px solid var(--line-ink);
}
.karten-liste li:last-child { border-bottom: 0; }
.karten-liste b { font-family: var(--display); font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; letter-spacing: -.01em; }
.karten-liste .gericht { display: block; }
.karten-liste .gericht span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--text-leise); }
.karten-liste .fuellung { flex: 1; height: 1px; background: var(--line-ink); transform: translateY(-3px); }
.karten-liste .preis { flex-shrink: 0; font-size: 14px; color: var(--text-leise); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ Galerie -------------- */

/* Vier Kacheln je Reihe, dafuer laeuft die Galerie in einer breiteren Spur. */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.1vw, 16px); }
.g-galerie .spur { max-width: 1480px; }
.galerie figure {
  margin: 0; border-radius: 16px; overflow: hidden;
  aspect-ratio: 4 / 3;
  /* Der Platzhalter muss zum Abschnitt passen. Vorher stand hier --layer
     (#141414), dadurch zeigte jede noch nicht gezeichnete Kachel auf hellem
     Grund ein schwarzes Rechteck. */
  background: var(--dunst-tief);
  transition: transform .55s var(--weg);
}
.block-dunkel .galerie figure, .block-schicht .galerie figure { background: var(--layer); }
.galerie figure:hover { transform: translateY(-4px); }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--weg); }
.galerie figure:hover img { transform: scale(1.07); }

/* --------------------------------------------- Namenskacheln ----------
   Ansprechpartner ohne Portraet. Flexraster statt Grid, damit eine
   angebrochene letzte Reihe mittig sitzt und keine Luecke stehen bleibt. */

.namenskacheln {
  --kachel-luecke: clamp(14px, 1.5vw, 22px);
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--kachel-luecke);
}
.namenskacheln li {
  flex: 0 1 calc((100% - 3 * var(--kachel-luecke)) / 4);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(20px, 1.9vw, 28px);
  background: var(--papier);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 12px 34px -18px rgba(10,10,10,.28);
  transition: transform .5s var(--weg), box-shadow .5s var(--weg);
}
.kacheln-drei li { flex-basis: calc((100% - 2 * var(--kachel-luecke)) / 3); }
.namenskacheln li:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 6px rgba(10,10,10,.06), 0 26px 52px -22px rgba(10,10,10,.36);
}
.block-dunkel .namenskacheln li, .block-schicht .namenskacheln li {
  background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--line);
}
.namenskacheln b {
  display: block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-leise); margin-bottom: 6px;
}
.block-dunkel .namenskacheln b, .block-schicht .namenskacheln b { color: color-mix(in srgb, var(--auf-ink) 50%, transparent); }
.namenskacheln .name {
  display: block; font-family: var(--display);
  font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.25; letter-spacing: -.01em;
}
.namenskacheln a { font-weight: 500; display: inline-block; margin-top: 8px; }

/* Zwischenueberschrift ueber einer Kachelgruppe. Ohne den Strich der
   normalen Hutzeile, der stoert hier ueber mittig gesetzten Kacheln. */
.hut-abschnitt { display: flex; justify-content: center; margin: 0 0 20px; }
.hut-abschnitt::before { display: none; }
.namenskacheln + .hut-abschnitt { margin-top: clamp(34px, 3.4vw, 52px); }

@media (max-width: 1080px) {
  .namenskacheln li, .kacheln-drei li { flex-basis: calc((100% - 2 * var(--kachel-luecke)) / 3); }
}
@media (max-width: 780px) {
  .namenskacheln li, .kacheln-drei li { flex-basis: calc((100% - var(--kachel-luecke)) / 2); }
}
@media (max-width: 470px) {
  .namenskacheln li, .kacheln-drei li { flex-basis: 100%; }
}

/* ------------------------------------------------ Zeilenlisten --------- */

.zeilen { list-style: none; margin: 0; padding: 0; }
.zeilen li {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--line-ink);
}
.block-dunkel .zeilen li, .block-schicht .zeilen li { border-bottom-color: var(--line); }
.zeilen li:first-child { padding-top: 0; }
.zeilen li:last-child { border-bottom: 0; padding-bottom: 0; }
.marke-punkt {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--akzent-dunst, rgba(0,0,0,.05));
}
.marke-punkt svg { width: 17px; height: 17px; fill: var(--akzent-tief); }
.block-dunkel .marke-punkt, .block-schicht .marke-punkt { background: color-mix(in srgb, var(--auf-ink) 7%, transparent); }
.block-dunkel .marke-punkt svg, .block-schicht .marke-punkt svg { fill: var(--akzent); }
.zeilen b {
  display: block; font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-leise); margin-bottom: 5px;
}
.block-dunkel .zeilen b, .block-schicht .zeilen b { color: color-mix(in srgb, var(--auf-ink) 50%, transparent); }
.zeilen a { font-weight: 500; }

.zeiten { list-style: none; margin: 0; padding: 0; }
.zeiten li { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line-ink); font-size: 15px; }
.zeiten li:last-child { border-bottom: 0; }
.zeiten b { color: var(--tinte); font-weight: 600; }
.zeiten span { color: var(--text-leise); text-align: right; }

/* ------------------------------------------------ Formular ------------- */

.formular { background: var(--papier); border-radius: 20px; padding: clamp(26px, 3vw, 44px); box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 16px 44px -22px rgba(10,10,10,.3); }
.block-dunkel .formular, .block-schicht .formular { background: var(--layer-2); box-shadow: inset 0 0 0 1px var(--line); }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld { margin-bottom: 16px; }
.feld label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--tinte); margin-bottom: 7px; }
.block-dunkel .feld label, .block-schicht .feld label { color: var(--cream); }
.feld input, .feld textarea, .feld select {
  width: 100%; padding: 14px 16px;
  border: 0; border-radius: 12px;
  font-family: inherit; font-size: 15px; color: var(--text);
  background: rgba(10,10,10,.035);
  box-shadow: inset 0 0 0 1px var(--line-ink);
  transition: box-shadow .3s var(--weg), background-color .3s var(--weg);
}
.block-dunkel .feld input, .block-dunkel .feld textarea, .block-dunkel .feld select,
.block-schicht .feld input, .block-schicht .feld textarea, .block-schicht .feld select {
  background: color-mix(in srgb, var(--auf-ink) 5%, transparent); color: var(--cream); box-shadow: inset 0 0 0 1px var(--line);
}
.feld textarea { min-height: 140px; resize: vertical; }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: 0; background: var(--papier);
  box-shadow: inset 0 0 0 1.5px var(--akzent), 0 0 0 4px var(--akzent-dunst, rgba(0,0,0,.06));
}
/* Der Stern stand im vollen Markenton auf Weiss bei 2,7:1. */
.pflicht { color: var(--akzent-tief); }
.block-dunkel .pflicht, .block-schicht .pflicht { color: var(--akzent); }
.feld-hinweis { font-size: 13px; color: var(--text-leise); margin-bottom: 18px; }
.zustimmung { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.zustimmung input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; accent-color: var(--akzent); }
.zustimmung label { font-size: 13.5px; font-weight: 400; color: var(--text-leise); line-height: 1.55; margin: 0; }

/* ------------------------------------------------ Fragen --------------- */

.frage { border-bottom: 1px solid var(--line-ink); }
.block-dunkel .frage, .block-schicht .frage { border-bottom-color: var(--line); }
.frage summary {
  position: relative; padding: 24px 56px 24px 0;
  font-family: var(--display); font-size: clamp(17px, 1.35vw, 21px); font-weight: 700;
  letter-spacing: -.01em; color: var(--tinte);
  cursor: pointer; list-style: none;
  transition: color .3s var(--weg);
}
.block-dunkel .frage summary, .block-schicht .frage summary { color: var(--cream); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ''; position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--akzent); border-bottom: 1.5px solid var(--akzent);
  transform: rotate(45deg); transition: transform .45s var(--weg);
}
.frage[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.frage summary:hover { color: var(--akzent); }
.frage p { padding: 0 40px 24px 0; color: var(--text-leise); margin: 0; }
.block-dunkel .frage p, .block-schicht .frage p { color: color-mix(in srgb, var(--auf-ink) 60%, transparent); }

/* ------------------------------------------------ Rechtstexte ---------- */

.recht { color: var(--text); }
.recht h1 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: .6em; }
.recht h2 { font-size: clamp(20px, 1.7vw, 25px); margin-top: 2em; }
.recht h3 { margin-top: 1.6em; font-size: 17px; }
.recht ul { padding-left: 20px; }
.recht li { margin-bottom: 7px; }
.recht address { font-style: normal; margin-bottom: 1.1em; }

/* ------------------------------------------------ Fussbereich ---------- */

.fuss { background: var(--ink); color: color-mix(in srgb, var(--auf-ink) 74%, transparent); padding: clamp(64px, 7vw, 100px) 0 0; }
.fuss-gitter { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(30px, 4vw, 60px); }
.fuss h2 { color: var(--cream); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; font-family: var(--fliess), sans-serif; font-weight: 600; }
.fuss img {
  height: var(--logo-fuss-hoehe, 40px); width: auto; margin-bottom: 22px;
  filter: var(--logo-fuss-filter, none);
  transition: filter .4s var(--weg), transform .5s var(--weg);
}
.fuss-marke:hover img {
  filter: var(--logo-filter-hover, var(--logo-fuss-filter, none));
  transform: scale(1.03);
}
.fuss p { font-size: 14.5px; max-width: 42ch; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: 10px; font-size: 14.5px; }
.fuss a { color: color-mix(in srgb, var(--auf-ink) 74%, transparent); }
.fuss a:hover { color: var(--akzent); }
.fuss-riegel {
  margin-top: clamp(46px, 5vw, 70px); padding: 24px 0;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 13px;
}
.fuss-riegel nav { display: flex; gap: 24px; flex-wrap: wrap; }

/* ------------------------------------------------ Planer --------------- */

.planer { background: var(--papier); border-radius: 20px; padding: clamp(26px, 3vw, 46px); box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 16px 44px -22px rgba(10,10,10,.3); }
.planer-kopf { margin-bottom: 30px; }
.fortschritt-zeile { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.fortschritt { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border: 0; border-radius: 999px; background: var(--line-ink); overflow: hidden; }
.fortschritt::-webkit-progress-bar { background: var(--line-ink); border-radius: 999px; }
.fortschritt::-webkit-progress-value { background: var(--akzent); border-radius: 999px; transition: width .5s var(--weg); }
.fortschritt::-moz-progress-bar { background: var(--akzent); border-radius: 999px; }
.fortschritt-text { flex-shrink: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); }
.schritt { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.schritt + .schritt { margin-top: 40px; }
.planer-schrittweise .schritt + .schritt { margin-top: 0; }
.schritt legend { padding: 0; font-family: var(--display); font-size: clamp(20px, 1.8vw, 27px); font-weight: 700; letter-spacing: -.015em; color: var(--tinte); line-height: 1.2; margin-bottom: 8px; }
.schritt-hinweis { color: var(--text-leise); font-size: 15px; margin-bottom: 22px; }
.wahlgitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wahlgitter-3 { grid-template-columns: repeat(3, 1fr); }
.wahl { position: relative; display: block; cursor: pointer; }
.wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wahl span {
  display: flex; align-items: center; min-height: 58px; padding: 14px 18px;
  border-radius: 13px; background: rgba(10,10,10,.03);
  box-shadow: inset 0 0 0 1px var(--line-ink);
  font-size: 15px; font-weight: 500; color: var(--tinte); line-height: 1.35;
  transition: background-color .3s var(--weg), box-shadow .3s var(--weg), color .3s var(--weg);
}
.wahl:hover span { box-shadow: inset 0 0 0 1px var(--akzent); }
.wahl input:checked + span, .wahl.gewaehlt span {
  background: var(--akzent-dunst, rgba(0,0,0,.05));
  box-shadow: inset 0 0 0 1.5px var(--akzent);
  color: var(--akzent-tief);
}
.wahl input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.planer-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line-ink); }
.planer-fuss .knopf-linie { margin-right: auto; }
.planer-meldung { flex-basis: 100%; color: var(--akzent); font-weight: 600; font-size: 14px; }
.planer-meldung:empty { display: none; }
.planer-hinweis { font-size: 13.5px; color: var(--text-leise); margin-top: 20px; }

/* ------------------------------------------------ Bewegung ------------- */

.js [data-auf] { opacity: 0; transition: opacity .9s var(--weg), transform .9s var(--weg), clip-path 1s var(--weg); will-change: transform, opacity; }
.js [data-auf="hoch"]   { transform: translate3d(0, 38px, 0); }
.js [data-auf="gross"]  { transform: scale(.95); }
.js [data-auf="links"]  { transform: translate3d(-40px, 0, 0); }
.js [data-auf="rechts"] { transform: translate3d(40px, 0, 0); }
/* Der seitliche Versatz von 40 px passt nur, solange der Aussenabstand
   der Spur mindestens genauso gross ist. --pad ist 22, 32 und erst ab
   1100 px 48. Darunter ragt eine Spalte am rechten Rand heraus und das
   Dokument laesst sich querschieben, bis das Element eingeblendet ist.
   Deshalb laeuft der Versatz unterhalb von 1100 px senkrecht. */
@media (max-width: 1099px) {
  .js [data-auf="links"], .js [data-auf="rechts"] { transform: translate3d(0, 30px, 0); }
}
.js [data-auf].da { opacity: 1; transform: none; }
.js [data-auf-verzug="1"] { transition-delay: .1s; }
.js [data-auf-verzug="2"] { transition-delay: .2s; }
.js [data-auf-verzug="3"] { transition-delay: .3s; }

.js .folge-kind { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .85s var(--weg), transform .85s var(--weg); }
.js [data-auf-folge].da .folge-kind { opacity: 1; transform: none; }

/* Der Kasten schneidet fuer die Aufblendung ab. Gemessen bei noa.s:
   die Fraunces steht mit 20 Einheiten Unterlaenge in einem Zeilenkasten,
   der nur 13,2 Pixel unter der Grundlinie hat, dem g fehlten 5,9 Pixel.
   Luft rein, Aussenabstand wieder raus: das Layout bleibt gleich. */
.wort {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding: .06em 0 .14em;
  margin: -.06em 0 -.14em;
}
.wort-innen { display: inline-block; }
.js [data-worte] .wort-innen { transform: translate3d(0, 126%, 0); transition: transform 1s var(--weg); }
.js [data-worte].da .wort-innen { transform: none; }

[data-tiefe] { will-change: transform; }
[data-neigung] { transform-style: preserve-3d; }
[data-schein] { position: relative; }
[data-schein]::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(340px circle at var(--zx,50%) var(--zy,50%), var(--scheinfarbe, rgba(255,255,255,.5)), transparent 60%);
  opacity: 0; transition: opacity .5s var(--weg); pointer-events: none; z-index: 0;
}
[data-schein]:hover::before { opacity: 1; }
[data-schein] > * { position: relative; z-index: 1; }
.block-dunkel [data-schein], .block-schicht [data-schein] { --scheinfarbe: color-mix(in srgb, var(--auf-ink) 5.5%, transparent); }


/* ------------------------------------------------ Schmale Schirme ------ */

@media (max-width: 1240px) { .galerie { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) {
  .gitter-3 { grid-template-columns: repeat(2, 1fr); }
  .zahlen { grid-template-columns: repeat(2, 1fr); }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; }
  .duo-bild { order: -1; }
  .fuss-gitter { grid-template-columns: 1fr 1fr; }
  .nav-schalter { display: block; }
  .nav {
    position: fixed; inset: 68px 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--ink); border-bottom: 1px solid var(--line);
    padding: 10px var(--pad) 26px;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: transform .45s var(--weg), opacity .35s var(--weg), visibility .35s;
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav.offen { transform: none; opacity: 1; visibility: visible; }
  .nav a:not(.knopf) { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav a:not(.knopf)::after { display: none; }
  .kopf .knopf { margin-top: 18px; }
  .kopf-innen { height: 68px; }
  .buehne-text { max-width: none; }
}

@media (max-width: 660px) {
  .gitter-2, .gitter-3, .galerie, .zahlen, .feldpaar, .fuss-gitter, .wahlgitter, .wahlgitter-3 { grid-template-columns: 1fr; }
  .knopfreihe .knopf { width: 100%; }
  .planer-fuss .knopf { width: 100%; }
  .planer-fuss .knopf-linie { margin-right: 0; }
  .fuss-riegel { flex-direction: column; }
  .buehne { min-height: min(88vh, 720px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-auf], .js .folge-kind, .js [data-worte] .wort-innen { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .korn::after, .knopf::after, [data-schein]::before, .scrollhinweis { display: none; }
  }


/* ---------------------------------------------------- Personen im Team
   Feste Spaltenzahl statt auto-fit: die Anzahl der Personen ist bekannt,
   und auto-fit liesse bei ungeraden Zahlen leere Plaetze stehen. */
.personen {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 34px);
}
@media (min-width: 620px)  { .personen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px)  { .personen { grid-template-columns: repeat(3, 1fr); } }

.person { margin: 0; }
.person img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 22%;
  border-radius: 18px;
  filter: saturate(.92);
  transition: transform .6s var(--weg), filter .5s var(--weg), box-shadow .5s var(--weg);
}
.person:hover img {
  transform: translateY(-4px) scale(1.015);
  filter: saturate(1);
  box-shadow: 0 24px 56px -26px var(--akzent-schatten);
}
.person h3 {
  margin: 18px 0 2px; font-size: clamp(18px, 1.5vw, 22px);
  color: var(--cream); letter-spacing: -.01em;
}
.block .person h3, .block-dunst .person h3 { color: var(--tinte); }
.person p {
  margin: 0; font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--akzent); font-weight: 600;
}
.block .person p, .block-dunst .person p { color: var(--akzent-tief); }


/* Hinweis, solange kein Formularziel hinterlegt ist. */
.formular-hinweis {
  margin: 20px 0 0; padding: 14px 18px;
  border-radius: 12px; font-size: 14.5px; line-height: 1.6;
  background: var(--akzent-dunst);
  color: var(--akzent-tief);
  box-shadow: inset 0 0 0 1px var(--akzent-schatten);
}


/* Zahl oben, Erlaeuterung darunter. Vorher stand ein Fuellwort ueber einem
   Substantiv ("Erstklassiger Service"), das trug nichts und die Kaesten
   wirkten leer. Jetzt eine pruefbare Zahl mit einer Zeile Erklaerung. */
.zahlen .zahl b {
  display: block; font-family: var(--display);
  font-size: clamp(34px, 3.4vw, 50px); line-height: 1;
  letter-spacing: -.03em; color: var(--cream); margin-bottom: 10px;
}
.zahlen .zahl span {
  display: block; font-size: 14px; line-height: 1.5;
  color: color-mix(in srgb, var(--cream) 90%, transparent);
}


/* ------------------------------------------------ Stimmen als Laufband ---
   Die Karten laufen in einer Zeile durch. Der zweite Satz ist eine Kopie und
   traegt aria-hidden, damit Vorlesewerkzeuge die Zitate nicht doppelt lesen.
   Bewegt wird nur transform, es gibt also keinen Layout-Shift.

   Das Laufband haelt an, sobald der Zeiger darauf liegt oder etwas darin den
   Tastaturfokus hat. Sonst koennte man einen Text nicht zu Ende lesen. */
.stimmen-lauf {
  overflow: hidden;
  /* Platz fuer den Schatten der Karten, sonst schneidet ihn overflow ab */
  margin: 0 calc(var(--pad) * -1);
  padding: 14px var(--pad) 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.stimmen-spur {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 1.6vw, 24px);
  width: max-content;
  animation: stimmen-zug 70s linear infinite;
}
.stimmen-lauf:hover .stimmen-spur,
.stimmen-lauf:focus-within .stimmen-spur { animation-play-state: paused; }

.stimmen-spur .stimme {
  width: min(420px, 78vw);
  flex: 0 0 auto;
  display: flex; flex-direction: column;
}
.stimmen-spur .stimme blockquote { flex: 1 1 auto; }

@keyframes stimmen-zug {
  /* Genau die halbe Strecke, dann steht der zweite Satz deckungsgleich
     ueber dem ersten und der Sprung ist unsichtbar. Die Luecke nach der
     letzten Karte muss mitgerechnet werden. */
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - clamp(16px, 1.6vw, 24px) / 2), 0, 0); }
}

/* Ohne Bewegungswunsch: keine Animation, dafuer von Hand schiebbar. */
@media (prefers-reduced-motion: reduce) {
  .stimmen-spur { animation: none; }
  .stimmen-lauf { overflow-x: auto; scroll-snap-type: x mandatory; }
  .stimmen-spur .stimme { scroll-snap-align: start; }
}


/* Fliesstext, der buendig unter dem Buehnentext beginnen soll, statt
   mittig in der Spur zu stehen. */
.text-links { max-width: 68ch; margin-bottom: clamp(40px, 4.4vw, 64px); }
/* ============================================================
   Marke MK Limousines, Köln. Chauffeur Service.

   DNA der alten Seite: fast schwarzes Petrol #0C1315 als Grund,
   Gold #BFA37C fuer Hutzeilen und Icons, gesperrte Mono-Versalien
   (Inconsolata) als Hutzeile, Sora fuer Ueberschriften und Fliesstext (Epilogue
   aus der alten Seite hatte eigenwillige Ziffern, Hamza 03.11.2026). Alles dunkel, keine hellen Flaechen.

   Das Haussystem wechselt sonst zwischen hellen (.block) und dunklen
   Abschnitten. Hier sind die hellen Tokens auf dunkle Toene gedreht:
   .block ist eine etwas hellere Petrol-Schicht, .block-dunkel der
   tiefste Ton. So stossen nie zwei gleiche Flaechen aneinander, und
   keine Regel des Hauses landet auf Weiss.

   Gemessen (WCAG):
     Creme #F3EFE7 auf #0C1315 16,36 / auf #111A1D 15,40
     Text #C5CACA auf #111A1D 10,66 / auf Karte #1A262B 9,35
     Leise #9AA4A6 auf Karte #1E2C31 5,64 (knappstes Paar)
     Gold #BFA37C auf #0C1315 7,81 / auf Karte #1E2C31 5,99
     Knopf: #0C1315 auf Gold #BFA37C 7,81
   ============================================================ */
:root {
  color-scheme: dark;
  --fliess:  'Sora', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'Inconsolata', ui-monospace, Menlo, monospace;

  --ink:        #0C1315;
  --layer:      #151F23;
  --layer-2:    #1A262B;
  --cream:      #F3EFE7;
  --cream-tief: #E4DED2;
  --auf-ink:    #F3EFE7;
  --muted:      #9AA4A6;
  --line:       rgba(243, 239, 231, .10);
  --line-stark: rgba(243, 239, 231, .22);
  --line-ink:   rgba(243, 239, 231, .12);

  /* Gedrehte "helle" Abschnitte */
  --papier:     #111A1D;
  --tinte:      #F3EFE7;
  --text:       #C5CACA;
  --text-leise: #9AA4A6;
  --dunst:      #152024;
  --dunst-tief: #1E2C31;
  --karte:      #1A262B;

  --auf-bild:        #FFFFFF;
  --auf-bild-leise:  #F3EFE7;
  --auf-bild-akzent: #D6BE93;

  --akzent:          #BFA37C;
  --akzent-hell:     #D6BE93;
  --akzent-tief:     #C8AD84;
  --akzent-dunst:    rgba(191, 163, 124, .12);
  --akzent-schatten: rgba(191, 163, 124, .32);
  --knopf-grund:       #BFA37C;
  --knopf-grund-hover: #D6BE93;
  --knopf-schrift:     #0C1315;

  --kopf-grund:         rgba(12, 19, 21, .55);
  --kopf-grund-kompakt: rgba(12, 19, 21, .92);

  /* Zeichen Versatz + Wortmarke 311 x 56. Bei 54 px ist die Zusatzzeile 11 px gross,
     Versalhoehe gut 7,7 px, kompakt (x .8) 6,2 px. */
  --logo-hoehe: 54px;
  --logo-kompakt: .8;
  --logo-filter: saturate(.9);
  --logo-filter-hover: saturate(1) drop-shadow(0 0 14px rgba(191, 163, 124, .45));
  --logo-fuss-hoehe: 48px;
}

::selection { background: var(--akzent); color: var(--ink); }

/* ------------------------------------------------ Schrift ------------ */

h1, h2 { font-weight: 400; letter-spacing: -.025em; }
h3, h4 { font-weight: 500; }
h1 { font-size: clamp(38px, 5.2vw, 76px); line-height: 1.04; }
h2 { font-size: clamp(30px, 3.5vw, 52px); line-height: 1.08; }

.hut {
  font-family: var(--mono);
  font-size: clamp(12px, .85vw, 13.5px);
  font-weight: 500;
  letter-spacing: .3em;
}
.fuss h2 { font-family: var(--mono); font-weight: 500; letter-spacing: .3em; font-size: 12.5px; }

/* ------------------------------------------------ Flaechen ----------- */

/* Karten heben sich von der Abschnittsflaeche ab, statt mit ihr
   zu verschmelzen (im Haus haben beide --papier). */
.block .karte, .block-dunst .karte { background: var(--karte); box-shadow: inset 0 0 0 1px var(--line); }
.block .karte:hover, .block-dunst .karte:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 40%, transparent), 0 30px 60px -28px rgba(0, 0, 0, .7); }
.block-dunkel .karte { background: var(--layer); }
.block .formular, .block-dunst .formular { background: var(--karte); box-shadow: inset 0 0 0 1px var(--line); }
.feld input, .feld textarea, .feld select { background: rgba(243, 239, 231, .045); color: var(--tinte); }
.feld input::placeholder, .feld textarea::placeholder { color: var(--text-leise); opacity: 1; }
.feld-hinweis, .zustimmung label { color: var(--text-leise); }

.zahl { background: var(--karte); box-shadow: inset 0 0 0 1px var(--line); }
.zahl b { color: var(--akzent); }
.zahl span { color: var(--text); }

.knopf-hell { background: var(--cream); color: var(--ink); }
.knopf-hell:hover { background: #fff; color: var(--ink); }
.knopf-voll:hover { background: var(--knopf-grund-hover); color: var(--knopf-schrift); }

.galerie figure { background: var(--layer); }

/* ============================================================
   Runde 3 (03.11.2026). Hamza: zu viele Kacheln, Hutzeilen mit
   Strich über jedem Abschnitt, Pfeile in Knöpfen, Sternschnuppen
   wirkten technisch. Jetzt: keine Kachel, keine Hutzeile, jeder
   Baustein hat ein Thema aus der Welt des Kunden (Nachtfahrt,
   Bordkarte, Route, Filmstreifen). Bewegung nur transform/opacity.
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------ Knöpfe ------------- */

/* Knopftext optisch mittig, gemessen per Canvas-Metrik (Mitte der
   Versalhöhe gegen Knopfmitte). Mit Sora reicht ein gleicher Innenabstand. */
.knopf { padding: 17px 34px; gap: 10px; white-space: nowrap; flex-shrink: 0; }
.knopf svg { width: 18px; height: 18px; flex: none; margin-top: -2px; }
.knopf svg.blase { fill: currentColor; stroke: none; }
.kopf .knopf { padding: 14px 30px; }
.nav a:not(.knopf) { white-space: nowrap; }
.knopf-wa { background: var(--cream); color: var(--ink); }
.knopf-wa:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }

/* ------------------------------------------------ Sprachwahl --------- */

.sprachwahl {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr 1fr;
  padding: 4px; border-radius: 999px;
  background: rgba(243, 239, 231, .04); box-shadow: inset 0 0 0 1px var(--line-stark);
}
.sprachwahl > i {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3);
  border-radius: 999px; background: rgba(191, 163, 124, .16);
  box-shadow: inset 0 0 0 1px rgba(191, 163, 124, .55);
  transition: transform .5s var(--weg);
}
.sprachwahl-en > i { transform: translateX(100%); }
.sprachwahl-tr > i { transform: translateX(200%); }
.nav .sprachwahl a:not(.knopf) {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 6px 12px 6px 7px; border: 0;
  font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .14em; line-height: 1;
  color: var(--muted);
}
.nav .sprachwahl a:not(.knopf)::after { display: none; }
.nav .sprachwahl a:not(.knopf):hover, .nav .sprachwahl a.ist:not(.knopf) { color: var(--cream); }
.sprachwahl svg {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1px rgba(243, 239, 231, .25);
  filter: saturate(.85); transition: filter .3s var(--weg), transform .4s var(--weg);
}
.sprachwahl a:not(.ist) svg { filter: saturate(.35) brightness(.85); }
.sprachwahl a:hover svg { filter: none; transform: scale(1.08); }
/* Drei Sprachen: zwischen Handymenü und 1240 px nur die Flaggen, sonst bricht die Navigation um */
@media (min-width: 1001px) and (max-width: 1240px) {
  .nav .sprachwahl a:not(.knopf) { padding: 6px 7px; }
  .nav .sprachwahl a:not(.knopf) > span:not(.sr-only) { display: none; }
}
@media (max-width: 1000px) {
  .nav .sprachwahl { align-self: flex-start; margin-top: 18px; }
  .nav .sprachwahl a:not(.knopf) { padding: 9px 16px 9px 9px; border-bottom: 0; font-size: 13px; }
}

/* ------------------------------------------------ Nachtbühne --------- */

.buehne-nacht {
  align-items: flex-end;
  /* Der Kopf steht im Fluss (sticky), die Bühne beginnt darunter */
  min-height: min(calc(100svh - 88px), 900px);
  padding: 70px 0 36px;
  background: var(--ink); overflow: hidden;
}
.buehne-nacht .spur { display: flex; flex-direction: column; min-height: 100%; }
.buehne-nacht .buehne-text { max-width: 900px; }
.buehne-ort {
  margin: 0 0 22px; font: 500 13px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase;
  color: var(--auf-bild-akzent);
}
.buehne-nacht h1 {
  max-width: none; margin: 0 0 .32em; color: var(--auf-bild);
  font-size: clamp(46px, 6.8vw, 108px); line-height: .98; letter-spacing: -.04em; font-weight: 500;
}
.buehne-nacht.kurz { align-items: center; min-height: min(calc(100svh - 88px), 920px); padding: clamp(110px, 12vh, 170px) 0; }
.buehne-nacht.kurz p { max-width: 40ch; }
.buehne-nacht.kurz h1 { font-size: clamp(42px, 6.4vw, 96px); }
.buehne-nacht p { max-width: 54ch; }
.buehne-nacht .wort { padding-bottom: .14em; margin-bottom: -.14em; }

.gold, .gold .wort-innen {
  background: linear-gradient(100deg, #EBDAB6 0%, #C9AE84 45%, #A88B62 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Foto rechts, läuft nach links und unten in den Grundton aus.
   Unten endet die Bühne exakt im Ton des nächsten Abschnitts (--ink),
   so gibt es keine Kante. Murats Handyfotos sind 900 bis 1200 px breit,
   deshalb nur die rechte Hälfte und kein Vollbild. */
.buehne-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; z-index: 0; }
.buehne-foto picture { display: block; height: 100%; }
.buehne-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%;
  filter: brightness(.86) saturate(.95);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 30%, #000 62%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 30%, #000 62%);
  animation: buehne-zoom 2.4s var(--weg) both;
}
.buehne-foto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--ink) 0%, rgba(12, 19, 21, .6) 22%, transparent 48%),
              linear-gradient(180deg, var(--ink) 0%, transparent 16%);
}
@keyframes buehne-zoom { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@media (min-width: 761px) and (max-width: 1100px) {
  .buehne-foto img { filter: brightness(.66) saturate(.9); }
}
@media (max-width: 760px) {
  .buehne-foto { width: 100%; }
  .buehne-foto img { -webkit-mask-image: none; mask-image: none; filter: brightness(.6) saturate(.9); object-position: 50% 62%; }
  .buehne-foto::after { background: linear-gradient(180deg, rgba(12, 19, 21, .5) 0%, rgba(12, 19, 21, .72) 45%, var(--ink) 100%); }
}
/* Startseiten: das Zeichen als Punktraster rechts, angeschnitten wie das H
   auf doublehmedia.de. Gezeichnet von mk.js aus dem Pfad, ohne Bilddatei.
   Ohne JavaScript bleibt die Fläche einfach Nacht. */
.buehne-partikel { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; height: 100%; z-index: 0; pointer-events: none; }
@media (max-width: 1100px) { .buehne-partikel { opacity: .32; } }
@media (max-width: 760px) { .buehne-partikel { width: 100%; } }
/* Luft zwischen Bühne und erstem Abschnitt, beide im selben Ton */
.buehne + .szene, .buehne + .fahrten-block { padding-top: clamp(130px, 12vw, 200px); }
.buehne + .szene .szene-bild::after { background: linear-gradient(180deg, var(--ink) 0%, transparent 30%, transparent 82%, var(--ink) 100%); }

/* ------------------------------------------------ Glasleiste --------- */

.glasleiste {
  position: relative; list-style: none; margin: clamp(48px, 7vh, 90px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-radius: 26px; overflow: hidden;
  background: rgba(17, 27, 31, .55);
  box-shadow: inset 0 0 0 1px rgba(191, 163, 124, .2);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
}
/* Goldkante zieht beim Einblenden über die Oberkante */
.glasleiste::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #E6D3AE 30%, #BFA37C 70%, transparent);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--weg) .4s;
}
.glasleiste.da::before { transform: scaleX(1); }
/* Lichtschein läuft alle paar Sekunden über die Leiste */
.glasleiste::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 243, 218, .07), transparent);
  transform: translateX(-120%); animation: schein 9s var(--weg) 2s infinite;
  pointer-events: none;
}
@keyframes schein { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(420%); } }
.glasleiste li { display: flex; align-items: center; gap: 16px; padding: 22px 24px; position: relative; }
.glasleiste li + li::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(191, 163, 124, .35), transparent);
}
.glasleiste b {
  display: block; margin-bottom: 4px;
  font: 500 11.5px/1.3 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--auf-bild-akzent);
}
.glasleiste li div > span { display: block; font-family: var(--display); font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.3; color: var(--auf-bild); }
.ring {
  flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, rgba(191, 163, 124, .2), rgba(191, 163, 124, .04) 70%);
  box-shadow: inset 0 0 0 1px rgba(191, 163, 124, .45);
}
.ring svg { width: 38px; height: 38px; overflow: visible; fill: #D6BE93; }
.ring svg * { transform-box: fill-box; transform-origin: center; }
.ring .z-glas { fill: #0F181B; }
.ring .z-rad { fill: #0F181B; stroke: #D6BE93; stroke-width: 1.8; }
.ring .z-strasse { fill: none; stroke: #D6BE93; stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .5; }
.ring .z-rand { fill: rgba(191, 163, 124, .12); stroke: #D6BE93; stroke-width: 1.6; stroke-linejoin: round; }
.ring .z-haken, .ring .z-funken { fill: none; stroke: #E6D3AE; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Ruhestand vor dem Einblenden */
.js .glasleiste .z-fahrt { transform: translateX(-26px); opacity: 0; }
.js .glasleiste .z-start { transform: translate(-6px, 6px) rotate(8deg); opacity: 0; }
.js .glasleiste .z-stempel { transform: scale(1.7) rotate(-20deg); opacity: 0; }
.js .glasleiste .z-feuer circle, .js .glasleiste .z-funken { opacity: 0; }
.glasleiste.da .z-fahrt { animation: einfahrt 1.3s var(--weg) forwards, federn 3.4s ease-in-out 1.6s infinite; }
.glasleiste.da .ring-van .z-fahrt { animation-delay: .25s, 1.9s; }
.glasleiste.da .z-start { animation: abheben 1.4s var(--weg) .5s forwards, steigen 4s ease-in-out 2s infinite; }
.glasleiste.da .z-feuer circle { animation: feuer 1.8s linear 1s infinite; }
.glasleiste.da .z-feuer circle:nth-child(2) { animation-delay: 1.15s; }
.glasleiste.da .z-feuer circle:nth-child(3) { animation-delay: 1.3s; }
.glasleiste.da .z-feuer circle:nth-child(4) { animation-delay: 1.45s; }
.glasleiste.da .z-stempel { animation: stempel .9s cubic-bezier(.3, 1.5, .5, 1) .8s forwards; }
.glasleiste.da .z-funken { animation: funkeln 2.6s ease-in-out 1.6s infinite; }
@keyframes einfahrt { to { transform: none; opacity: 1; } }
@keyframes federn { 0%, 100% { transform: none; } 50% { transform: translateY(-.8px); } }
@keyframes abheben { to { transform: none; opacity: 1; } }
@keyframes steigen { 0%, 100% { transform: none; } 50% { transform: translate(1.5px, -2px) rotate(-3deg); } }
@keyframes feuer { 0%, 100% { opacity: .15; } 15% { opacity: 1; } 40% { opacity: .15; } }
@keyframes stempel { to { transform: none; opacity: 1; } }
@keyframes funkeln { 0%, 100% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1); } }

@media (max-width: 1100px) { .glasleiste { grid-template-columns: repeat(2, 1fr); } .glasleiste li:nth-child(3)::before { display: none; } }
@media (max-width: 560px) {
  .glasleiste { grid-template-columns: 1fr; border-radius: 22px; }
  .glasleiste li { padding: 16px 18px; }
  .glasleiste li + li::before { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 1px;
    background: linear-gradient(90deg, rgba(191, 163, 124, .3), transparent); }
  .ring { width: 50px; height: 50px; }
  .ring svg { width: 32px; height: 32px; }
}

/* ------------------------------------------------ Szene -------------- */

/* Bild randlos bis an den Fensterrand, läuft weich in die Fläche aus.
   Der Text steht daneben, nie auf dem Bild: Kontrast bleibt gesichert. */
.szene {
  position: relative; display: flex; align-items: center;
  min-height: clamp(700px, 58vw, 940px); padding: clamp(110px, 10vw, 170px) 0;
  background: var(--ink); overflow: hidden;
}
.szene-bild { position: absolute; top: 0; bottom: 0; width: 56%; }
.szene-rechts .szene-bild { right: 0; }
.szene-links .szene-bild { left: 0; }
.szene-bild img { width: 100%; height: 100%; object-fit: cover; }
.szene-rechts .szene-bild img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.szene-links .szene-bild img { -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 38%); mask-image: linear-gradient(270deg, transparent 0%, #000 38%); }
.szene-bild::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--ink) 0%, transparent 18%, transparent 82%, var(--ink) 100%);
}
.szene .spur { position: relative; z-index: 2; }
.szene-text { max-width: 520px; }
.szene-links .szene-text { margin-left: auto; }
.szene h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.035em; color: var(--cream); }
.szene p { color: var(--text); }
.unterschrift {
  margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line-stark); display: inline-block;
  font: 500 12.5px/1 var(--mono) !important; letter-spacing: .26em; text-transform: uppercase; color: var(--akzent) !important;
}
.linienliste { list-style: none; margin: 26px 0 0; padding: 0; }
.linienliste li { position: relative; padding: 11px 0 11px 34px; border-top: 1px solid var(--line); color: var(--cream); font-size: 16px; }
.linienliste li:last-child { border-bottom: 1px solid var(--line); }
.linienliste li::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 1px;
  background: linear-gradient(90deg, #E6D3AE, #8E7450);
}
@media (max-width: 900px) {
  .szene { display: block; min-height: 0; padding: 0 0 72px; }
  .szene-bild { position: relative; width: 100%; height: min(112vw, 560px); }
  .szene-rechts .szene-bild img, .szene-links .szene-bild img { -webkit-mask-image: none; mask-image: none; }
  .szene-bild::after { background: linear-gradient(180deg, var(--ink) 0%, transparent 16%, transparent 60%, var(--ink) 100%); }
  .szene-text, .szene-links .szene-text { max-width: none; margin: -40px 0 0; }
}

/* ------------------------------------------------ Leistungen als Fahrt */

.fahrten-block { padding-top: clamp(90px, 9vw, 140px); background: var(--ink); }
.fahrten { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 110px); align-items: start; }
.fahrten-bild {
  position: sticky; top: 69px; height: calc(100svh - 69px);
  /* bis an den linken Fensterrand */
  margin-left: calc(-1 * var(--pad) - max(0px, (100vw - var(--spur)) / 2));
  overflow: hidden;
}
.fahrten-bild figure { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--weg), transform 1.6s var(--weg); }
.fahrten-bild figure.ist { opacity: 1; transform: none; }
.fahrten-bild img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.82) saturate(.85); }
.fahrten-bild::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent 60%, var(--ink) 100%);
}
.fahrten-kopf { margin-bottom: clamp(30px, 4vw, 56px); }
.fahrten-kopf h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.035em; }
.fahrten-kopf p { color: var(--text-leise); font-size: clamp(17px, 1.35vw, 20px); }
.fahrt { position: relative; padding: clamp(28px, 3vw, 44px) 0; border-top: 1px solid var(--line); scroll-margin-top: 120px; }
.fahrt::before {
  content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 1px;
  background: linear-gradient(90deg, #E6D3AE, #8E7450 60%, transparent);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--weg);
}
.fahrt.ist::before { transform: scaleX(1); }
.fahrt h3 {
  margin: 0 0 .35em; font-weight: 400; letter-spacing: -.025em;
  font-size: clamp(28px, 3vw, 46px); color: color-mix(in srgb, var(--cream) 46%, transparent);
  transition: color .6s var(--weg), transform .6s var(--weg);
}
.fahrt.ist h3 { color: var(--cream); transform: translateX(6px); }
.fahrt p { margin: 0; max-width: 54ch; color: var(--text-leise); transition: color .6s var(--weg); }
.fahrt.ist p { color: var(--text); }
.fahrt .linienliste { max-width: 54ch; }
.zeile-mehr {
  display: inline-block; margin-top: 16px; padding-bottom: 3px;
  font: 500 12.5px/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  color: var(--akzent);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--weg), color .3s var(--weg);
}
.zeile-mehr:hover { background-size: 100% 1px; color: var(--akzent-hell); }
.fahrt-handy { display: none; }
@media (max-width: 999px) {
  .fahrten { grid-template-columns: 1fr; }
  .fahrten-bild { display: none; }
  .fahrt-handy { display: block; margin: 0 0 22px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; }
  .fahrt-handy img { width: 100%; height: 100%; object-fit: cover; }
  .fahrt h3 { color: var(--cream); }
  .fahrt.ist h3 { transform: none; }
  .fahrt p { color: var(--text); }
}

/* ------------------------------------------------ Klassen als Bordkarte */

.klassen { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.klassen-kopf h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.035em; }
.klassen-kopf p { max-width: 42ch; }
.klassen-kopf .klassen-weiter { margin: 26px 0 0; max-width: none; }
.fahrtform { scroll-margin-top: 110px; }
.klassen-schalter { display: none; }
.js .klassen-schalter {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 30px;
  padding: 5px; border-radius: 999px; background: rgba(243, 239, 231, .04); box-shadow: inset 0 0 0 1px var(--line-stark);
}
.klassen-schalter > i {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px;
  background: var(--knopf-grund); box-shadow: 0 10px 30px -12px var(--akzent-schatten);
  transition: transform .55s var(--weg);
}
.klassen-schalter.zwei > i { transform: translateX(100%); }
.klassen-schalter button {
  position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer;
  padding: 14.5px 26px 13.5px; border-radius: 999px; white-space: nowrap;
  font: 600 14.5px/1 var(--fliess); letter-spacing: .02em; color: var(--text);
  transition: color .4s var(--weg);
}
.klassen-schalter button[aria-selected="true"] { color: var(--knopf-schrift); }
.klassen-schalter button:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }

.klassen-karten { display: grid; gap: 24px; }
.bordkarte {
  --abriss: 190px;
  position: relative; display: grid; grid-template-columns: 1fr var(--abriss);
  border-radius: 24px; color: var(--text);
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, rgba(191, 163, 124, .14), transparent 60%),
    linear-gradient(135deg, #1C292E 0%, #131D20 100%);
  box-shadow: inset 0 0 0 1px rgba(191, 163, 124, .28), 0 50px 90px -50px #000;
  /* Kerben an der Perforation */
  -webkit-mask: radial-gradient(circle at calc(100% - var(--abriss)) 0, transparent 15px, #000 16px) top / 100% 51% no-repeat,
                radial-gradient(circle at calc(100% - var(--abriss)) 100%, transparent 15px, #000 16px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at calc(100% - var(--abriss)) 0, transparent 15px, #000 16px) top / 100% 51% no-repeat,
                radial-gradient(circle at calc(100% - var(--abriss)) 100%, transparent 15px, #000 16px) bottom / 100% 51% no-repeat;
}
.js .bordkarte.weg { display: none; }
.js .bordkarte.kommt { animation: bordkarte .7s var(--weg); }
@keyframes bordkarte { from { opacity: 0; transform: translateY(18px) rotate(-1deg); } to { opacity: 1; transform: none; } }
.bk-haupt { padding: clamp(26px, 3vw, 40px); }
.bk-kopf { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 26px; font: 500 11.5px/1 var(--mono); letter-spacing: .3em; color: var(--akzent); }
.bk-strecke { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.bk-strecke b { font: 500 13px/1 var(--mono); letter-spacing: .24em; color: var(--cream); white-space: nowrap; }
.bk-strecke i {
  flex: 1; height: 1px; position: relative;
  background: repeating-linear-gradient(90deg, rgba(191, 163, 124, .7) 0 6px, transparent 6px 11px);
}
.bk-strecke i::before, .bk-strecke i::after { content: ''; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; }
.bk-strecke i::before { left: 0; background: var(--akzent); }
.bk-strecke i::after { right: 0; box-shadow: inset 0 0 0 1.5px var(--akzent); background: #151F23; }
.bordkarte h3 { margin: 0 0 .3em; font-size: clamp(30px, 3vw, 44px); font-weight: 400; letter-spacing: -.03em; color: var(--cream); }
.bk-text { margin: 0 0 26px; max-width: 46ch; }
.bordkarte dl { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; gap: 18px clamp(22px, 3vw, 44px); margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.bordkarte dt { font: 500 11px/1.2 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--akzent); margin-bottom: 6px; }
.bordkarte dd { margin: 0; font-family: var(--display); font-size: 16.5px; color: var(--cream); }
.bordkarte dt, .bordkarte dd { white-space: nowrap; }
.bk-abriss {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px;
  padding: 34px 20px 30px; border-left: 2px dashed rgba(243, 239, 231, .16);
}
.bk-klasse {
  margin: 0; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--display); font-size: 30px; font-weight: 500; letter-spacing: .02em; white-space: nowrap;
  background: linear-gradient(180deg, #EBDAB6, #A88B62); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bk-abriss img { width: 56px; height: auto; opacity: .9; }
.bk-strich {
  width: 100%; height: 40px; border-radius: 3px; opacity: .55;
  background: repeating-linear-gradient(90deg, #E6D3AE 0 2px, transparent 2px 4px, #E6D3AE 4px 5px, transparent 5px 9px, #E6D3AE 9px 12px, transparent 12px 14px);
}
@media (max-width: 999px) { .klassen { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .bordkarte { grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
  .bk-abriss { flex-direction: row; border-left: 0; border-top: 2px dashed rgba(243, 239, 231, .16); padding: 20px 24px; }
  .bk-klasse { writing-mode: horizontal-tb; transform: none; font-size: 22px; }
  .bk-abriss img { width: 40px; }
  .bk-strich { width: 90px; height: 30px; }
  .bordkarte dl { grid-template-columns: 1fr 1fr; }
  .bk-kopf { letter-spacing: .2em; }
  .js .klassen-schalter { display: grid; width: 100%; }
  .klassen-schalter button { padding-left: 10px; padding-right: 10px; }
}

/* ------------------------------------------------ Filmstreifen ------- */

.filmband { padding: clamp(90px, 9vw, 140px) 0; background: var(--ink); overflow: hidden; }
.filmband h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.035em; margin-bottom: clamp(30px, 4vw, 54px); }
.film { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.film-lauf { display: flex; width: max-content; animation: filmlauf 80s linear infinite; }
.film:hover .film-lauf { animation-play-state: paused; }
.film-kopie { display: flex; }
.film figure { flex: none; margin: 0 16px 0 0; height: clamp(300px, 32vw, 470px); aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; }
.film img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--weg); }
.film figure:hover img { transform: scale(1.04); }
@keyframes filmlauf { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .film { overflow-x: auto; }
  .film-kopie { display: none; }
}

/* ------------------------------------------------ Route (Ablauf) ----- */

.route-titel { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.035em; margin-bottom: clamp(50px, 6vw, 90px); }
.route { position: relative; }
.route-bahn { position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--line-stark); }
.route-fahrt {
  position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--fahrt, 0));
  background: linear-gradient(90deg, #8E7450, #E6D3AE);
}
.route-wagen { position: absolute; left: -22px; top: -33px; width: 44px; height: 44px; transform: translateX(var(--weg-px, 0px)); }
.route-wagen svg { width: 44px; height: 44px; fill: #E6D3AE; }
.route-wagen .z-glas, .route-wagen .z-rad { fill: #0C1315; }
.route-wagen .z-rad { stroke: #E6D3AE; stroke-width: 1.8; }
.route-wagen .z-strasse { display: none; }
.route-halte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 60px); }
.route-halte li { position: relative; padding-top: 52px; }
.halt {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); box-shadow: inset 0 0 0 2px var(--akzent);
  transition: background-color .5s var(--weg), box-shadow .5s var(--weg);
}
.route-halte li.erreicht .halt { background: var(--akzent); box-shadow: 0 0 0 6px rgba(191, 163, 124, .16), 0 0 24px rgba(214, 190, 147, .6); }
.route-halte h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 400; letter-spacing: -.02em; margin-bottom: .4em; color: var(--cream); }
.route-halte p { margin: 0; color: var(--text); max-width: 34ch; }
@media (max-width: 800px) {
  .route-bahn { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .route-fahrt { transform-origin: 50% 0; transform: scaleY(var(--fahrt, 0)); }
  .route-wagen { display: none; }
  .route-halte { grid-template-columns: 1fr; gap: 40px; }
  .route-halte li { padding: 0 0 0 46px; }
}

/* ------------------------------------------------ Anfrage ------------ */

.anfrage-block { position: relative; overflow: hidden; background: var(--ink); }
.licht-oben {
  position: absolute; inset: 0 0 auto; height: 520px; pointer-events: none;
  background: radial-gradient(ellipse 55% 70% at 50% 0%, rgba(191, 163, 124, .13), transparent 70%);
}
.anfrage-block .spur { position: relative; }
.anfrage-kopf { max-width: 760px; }
.anfrage-kopf h1, .anfrage-kopf h2 { font-size: clamp(38px, 5vw, 72px); line-height: 1.02; letter-spacing: -.035em; font-weight: 400; color: var(--cream); }
.anfrage-kopf p { font-size: clamp(17px, 1.35vw, 20px); color: var(--text); }
.anfrage-seite { padding-top: clamp(70px, 8vw, 120px); }

.kontaktleiste {
  list-style: none; margin: 34px 0 0; padding: 22px 0; display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.kontaktleiste li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; padding: 6px 30px 6px 0; margin-right: 30px; border-right: 1px solid var(--line); }
.kontaktleiste li:last-child { border-right: 0; margin-right: 0; }
.kz-zeichen { grid-row: span 2; width: 22px; height: 22px; }
.kz-zeichen svg { width: 22px; height: 22px; fill: var(--akzent); }
.kontaktleiste b { font: 500 11px/1.3 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--text-leise); }
.kontaktleiste span:not(.kz-zeichen) { color: var(--cream); font-size: 15.5px; }
.kontaktleiste a { color: var(--cream); text-decoration: none; background: linear-gradient(var(--akzent), var(--akzent)) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--weg); }
.kontaktleiste a:hover { background-size: 100% 1px; }
@media (max-width: 760px) {
  .kontaktleiste { flex-direction: column; gap: 14px; }
  .kontaktleiste li { border-right: 0; margin-right: 0; padding-right: 0; }
}

/* Formular als Strecke, ohne Kasten */
.fahrtform { margin-top: clamp(44px, 5vw, 70px); }
.lf { position: relative; margin-bottom: 30px; }
.lf label { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font: 500 11.5px/1.3 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--text-leise); }
.lf .pflicht { color: var(--akzent); }
.lf input, .lf select, .lf textarea {
  width: 100%; padding: 12px 0 14px; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line-stark); background: transparent;
  font-family: var(--display); font-size: clamp(18px, 1.5vw, 22px); color: var(--cream);
  color-scheme: dark; transition: border-color .3s var(--weg);
}
.lf textarea { resize: vertical; min-height: 52px; line-height: 1.4; }
.lf input::placeholder, .lf textarea::placeholder { color: color-mix(in srgb, var(--cream) 34%, transparent); opacity: 1; }
.lf input:focus, .lf select:focus, .lf textarea:focus { outline: 0; border-bottom-color: var(--akzent); }
.lf input:focus-visible, .lf select:focus-visible, .lf textarea:focus-visible { box-shadow: 0 2px 0 0 var(--akzent); }
.lf select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 30px;
  background:
    linear-gradient(45deg, transparent 50%, var(--akzent) 50%) calc(100% - 11px) 52% / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--akzent) 50%) calc(100% - 5px) 52% / 6px 6px no-repeat;
}
.lf select option { background: #151F23; color: var(--cream); }
.lf-reihe { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 48px); }
.lf-reihe-3 { grid-template-columns: repeat(3, 1fr); }
/* Abholort und Ziel als Strecke: Punkt, gestrichelte Linie, Ring */
.strecke { position: relative; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(48px, 6vw, 96px); }
.strecke::before {
  content: ''; position: absolute; top: 58px; left: calc(50% - clamp(48px, 6vw, 96px) / 2 + 10px); width: calc(clamp(48px, 6vw, 96px) - 20px); height: 1px;
  background: repeating-linear-gradient(90deg, var(--akzent) 0 6px, transparent 6px 11px);
}
.lf-von label::before, .lf-nach label::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.lf-von label::before { background: var(--akzent); box-shadow: 0 0 12px rgba(214, 190, 147, .6); }
.lf-nach label::before { box-shadow: inset 0 0 0 1.5px var(--akzent); }
.strecke input { font-size: clamp(22px, 2vw, 30px); letter-spacing: -.01em; }
.fahrtform-fuss { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.anfrage-hinweis { font-size: 13.5px; color: var(--text-leise); margin: 18px 0 0; max-width: 70ch; }
.anfrage-hinweis a { color: var(--text); }
@media (max-width: 760px) {
  .strecke, .lf-reihe, .lf-reihe-3 { grid-template-columns: 1fr; }
  .strecke::before { top: 76px; bottom: auto; left: 4px; width: 1px; height: 46px;
    background: repeating-linear-gradient(180deg, var(--akzent) 0 5px, transparent 5px 9px); }
  .fahrtform-fuss .knopf { width: 100%; }
}

/* ------------------------------------------------ Crew: Einsätze ----- */

.einsatz { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 100px); }
.einsatz h2 { align-self: start; position: sticky; top: 130px; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.035em; }
.einsatz-liste { list-style: none; margin: 0; padding: 0; }
.einsatz-liste li { padding: 28px 0; border-top: 1px solid var(--line); }
.einsatz-liste li:last-child { border-bottom: 1px solid var(--line); }
.einsatz-liste h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; letter-spacing: -.02em; color: var(--cream); margin-bottom: .35em; }
.einsatz-liste p { margin: 0; }
@media (max-width: 900px) { .einsatz { grid-template-columns: 1fr; } .einsatz h2 { position: static; } }

/* ------------------------------------------------ WhatsApp ----------- */

.wa-schwebe {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px 14px 16px; border-radius: 999px;
  background: var(--knopf-grund); color: var(--knopf-schrift);
  font-weight: 600; font-size: 14.5px; line-height: 1; text-decoration: none;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
  transition: transform .45s var(--weg), background-color .3s var(--weg);
}
.wa-schwebe:hover { transform: translateY(-3px); background: var(--knopf-grund-hover); color: var(--knopf-schrift); }
.wa-schwebe svg { width: 20px; height: 20px; fill: currentColor; margin-top: -2px; }
@media (max-width: 660px) { .wa-schwebe span { display: none; } .wa-schwebe { padding: 15px; } .wa-schwebe svg { margin-top: 0; } }

/* ------------------------------------------------ Rechtstexte -------- */

.recht-block { padding-top: clamp(70px, 8vw, 120px); }
.recht h1 { font-size: clamp(38px, 5vw, 68px); font-weight: 400; letter-spacing: -.03em; color: var(--cream); }
.recht h2 { font-weight: 500; }
.recht address, .recht p, .recht li { color: var(--text); }
.karte-warnung {
  background: color-mix(in srgb, var(--akzent) 10%, var(--karte));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 45%, transparent);
  color: var(--text);
}
.karte-warnung h2 { color: var(--akzent); }
.karte-warnung code { background: rgba(243, 239, 231, .08); }

/* Handy: Wortmarke schmaler, damit der Menüknopf daneben Platz hat */
/* Zeichen + Wortmarke sind 311 breit: zwischen Handy und 1240 px kleiner, sonst bricht die Navigation um */
@media (max-width: 1240px) { :root { --logo-hoehe: 44px; } }
@media (max-width: 600px) { :root { --logo-hoehe: 42px; } }

/* ------------------------------------------------ Sandfläche --------- */

/* Einzige helle Fläche der Seite, Champagner aus dem Markengold.
   Tokens lokal gedreht, die Bordkarte darin bleibt dunkel.
   Gemessen: Tinte #0C1315 auf #E6D7BC 14,0 / Text #2B2721 11,6 /
   Leise #4F4536 7,6 / Akzent #5E4A2C 6,6 (alle gegen den hellsten Ton). */
.sand {
  --tinte: #0C1315; --cream: #0C1315; --text: #2B2721; --text-leise: #4F4536;
  --line: rgba(12, 19, 21, .14); --line-stark: rgba(12, 19, 21, .3);
  --akzent: #5E4A2C; --akzent-hell: #0C1315;
  --knopf-grund: #0C1315; --knopf-schrift: #F3EFE7; --akzent-schatten: rgba(12, 19, 21, .35);
  background: radial-gradient(ellipse 70% 90% at 85% 50%, #EFE3CC 0%, transparent 70%), linear-gradient(160deg, #E6D7BC 0%, #D9C5A2 100%);
  color: var(--text);
}
.sand .bordkarte {
  --tinte: #F3EFE7; --cream: #F3EFE7; --text: #C5CACA; --text-leise: #9AA4A6;
  --line: rgba(243, 239, 231, .10); --line-stark: rgba(243, 239, 231, .22); --akzent: #BFA37C; --akzent-hell: #D6BE93;
  box-shadow: inset 0 0 0 1px rgba(191, 163, 124, .28), 0 60px 90px -45px rgba(40, 28, 10, .55);
}

/* Werte in der Glasleiste nie mitten im Wort trennen (V-Klasse) */
.glasleiste li div > span { white-space: nowrap; }