/* ============================================================
   TYZEN44 — Unterseiten (Kino-Fassung, 01.10.2026)
   Lädt NACH kino.css und nutzt dessen Tokens, Typografie, Kopf, Fuss,
   Zickzack (.zz), Geräte (.mock-browser/.mock-phone), Vorher/Nachher
   (.vn), Chat, Preise (.pakete/.paket/.zusatz) und Kontakt.
   Hier steht nur, was es auf der Startseite nicht gibt:
   Seitenkopf mit Kino-Bild, Bühnen-Kompositionen, echte Beispiele,
   Wende-Band, Film, Kacheln, Kurz-Ablauf, Fragen, Weitere Leistungen,
   Buchung (Kinoticket), 404, Rechtstexte, Danke.
   Massstab wie kino.css: alles wächst per clamp() bis 2560 px mit.
   ============================================================ */

/* ---------- Einblenden (nur mit Bewegung; kino.js setzt .an) ---------- */
html.bewegt .einblenden { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 1s var(--aus); }
html.bewegt .einblenden.an { opacity: 1; transform: none; }
html.bewegt .einblenden--staffel > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.9s var(--aus); }
html.bewegt .einblenden.einblenden--staffel { opacity: 1; transform: none; } /* nur die Kinder steigen ein */
html.bewegt .einblenden--staffel.an > * { opacity: 1; transform: none; }
.einblenden--staffel.an > :nth-child(2) { transition-delay: 0.07s; }
.einblenden--staffel.an > :nth-child(3) { transition-delay: 0.14s; }
.einblenden--staffel.an > :nth-child(4) { transition-delay: 0.21s; }
.einblenden--staffel.an > :nth-child(5) { transition-delay: 0.28s; }
.einblenden--staffel.an > :nth-child(6) { transition-delay: 0.35s; }
.einblenden--staffel.an > :nth-child(7) { transition-delay: 0.42s; }
.einblenden--staffel.an > :nth-child(8) { transition-delay: 0.49s; }

/* Gemeinsame Kleinteile */
.text-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; transition: text-decoration-color 0.3s ease, color 0.3s ease; }
.text-link:hover { text-decoration-color: var(--accent); }
.section-head .lead a, .lead a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.overline .idx { margin-right: 1.1em; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.chip {
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 0.6em 1.15em; border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(11, 13, 12, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: var(--fs-klein); color: var(--ink-dim); line-height: 1.3;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.chip i { width: 0.6em; height: 0.6em; flex: none; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.chip b { color: var(--ink); font-weight: 500; }

/* ============================================================
   Seitenkopf: Kino-Bild als Bühne, links Titel, rechts die Komposition
   ============================================================ */
.seite-kopf {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  padding-top: calc(var(--header-h) + clamp(24px, 5vh, 96px));
  background: var(--bg-0);
}
.sk-bild, .sk-bild img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.sk-bild img { object-fit: cover; object-position: var(--sk-pos, center 45%); }
html.bewegt .sk-bild img { animation: sk-ankommen 2.6s var(--aus) both; }
@keyframes sk-ankommen { from { transform: scale(1.07); filter: brightness(0.4); } to { transform: none; filter: none; } }
/* Das Bild ist Stimmung, nicht Inhalt: kräftig abgedunkelt, links am dunkelsten */
.seite-kopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(7, 9, 8, 0.93) 0%, rgba(7, 9, 8, 0.8) 34%, rgba(7, 9, 8, 0.5) 64%, rgba(7, 9, 8, 0.62) 100%),
    linear-gradient(to top, var(--bg-0) 0%, rgba(11, 13, 12, 0.4) 22%, rgba(11, 13, 12, 0) 44%),
    linear-gradient(to bottom, rgba(7, 9, 8, 0.75) 0%, rgba(7, 9, 8, 0) 22%);
}
.sk-raster {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  column-gap: clamp(32px, 4.6vw, 130px); row-gap: 40px;
  padding-block: clamp(10px, 2vh, 40px) clamp(28px, 4vh, 80px);
}
.lp-pfad {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.9em;
  margin-bottom: clamp(18px, 2.4vh, 40px);
  font-size: var(--fs-klein); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint);
}
.lp-pfad a { transition: color 0.3s ease; }
.lp-pfad a:hover { color: var(--ink); }
.lp-pfad [aria-current] { color: var(--ink-dim); }
.lp-titel {
  font-family: var(--display); font-weight: 500; letter-spacing: -0.035em; line-height: 1;
  font-size: clamp(2.3rem, 1.25rem + 2.9vw, 6rem); /* 37 / 62 / 75 / 93 */
  text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
.sk-text .lead { margin-top: clamp(18px, 1.6vw, 40px); color: var(--ink); max-width: 44ch; text-wrap: pretty; }
.lp-aktionen { margin-top: clamp(26px, 2.4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 1.8vw, 40px); }
.sk-buehne { position: relative; }

/* Pillen-Leiste am Fuss des Kopfs: keine Sackgasse zwischen den Leistungen */
.lp-pillen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em;
  padding-block: clamp(18px, 1.8vw, 40px) clamp(26px, 3vh, 60px);
  border-top: 1px solid var(--line);
}
.lp-pillen-titel { margin-right: 0.8em; font-size: var(--fs-klein); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }
.lp-pillen a {
  padding: 0.55em 1.15em; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: var(--fs-klein); font-weight: 500; letter-spacing: 0.06em; color: var(--ink-dim);
  background: rgba(11, 13, 12, 0.5);
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.lp-pillen a:hover { border-color: var(--ink); color: var(--ink); }
.lp-pillen a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Kurzer Kopf (Buchung, 404, Recht, Danke) */
.seite-kopf--kurz { min-height: 0; grid-template-rows: auto; }
.seite-kopf--kurz .sk-raster { grid-template-columns: minmax(0, 1fr); padding-block: clamp(20px, 4vh, 90px) clamp(40px, 6vh, 120px); }
.seite-kopf--kurz .sk-text .lead { max-width: 60ch; }
.seite-kopf--schlicht { background: radial-gradient(70% 90% at 15% 0%, rgba(182, 255, 46, 0.06), transparent 60%), var(--bg-0); }
.seite-kopf--schlicht::before { display: none; }

@media (max-width: 999px) {
  .seite-kopf { min-height: 0; }
  .sk-bild { opacity: 0.6; filter: blur(5px); } /* Hochformat-Bilder haben die helle Leinwand hinter dem Titel: weich und zurückgenommen */
  .sk-raster { grid-template-columns: minmax(0, 1fr); padding-bottom: 36px; }
  .seite-kopf::before {
    background:
      linear-gradient(to bottom, rgba(7, 9, 8, 0.9) 0%, rgba(7, 9, 8, 0.84) 45%, rgba(7, 9, 8, 0.9) 100%),
      linear-gradient(to top, var(--bg-0) 0%, rgba(11, 13, 12, 0) 30%);
  }
}
@media (max-width: 480px) {
  .lp-aktionen .btn--gross { letter-spacing: 0.08em; padding-inline: 1.5em; }
  .preis-zeile .btn--gross { font-size: var(--fs-nav); letter-spacing: 0.06em; padding-inline: 1.3em; white-space: nowrap; }
}
@media (max-width: 600px) {
  .lp-pillen { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: auto; margin-inline: 0; padding-inline: var(--pad); }
  .lp-pillen::-webkit-scrollbar { display: none; }
  .lp-pillen a, .lp-pillen-titel { white-space: nowrap; }
  .lp-pillen::after { content: ""; flex: 0 0 calc(var(--pad) - 0.6em); } /* Abstand am Ende der Laufleiste */
}

/* ============================================================
   Bühnen-Kompositionen im Seitenkopf
   ============================================================ */
.sk-buehne { aspect-ratio: 16 / 10; }
.sk-buehne > .chip { position: absolute; z-index: 4; }

/* Geräte: Bildschirm mit laufender Aufnahme + Handy */
.lb-geraete { aspect-ratio: auto; padding-bottom: 9%; }
.lb-geraete .mock-browser { width: 86%; }
.lb-geraete .mock-phone { right: 0; bottom: 0; width: 22%; }
.lb-geraete .loop-knopf { right: 14%; }
.lb-geraete > .chip { left: 3%; bottom: 2%; }

/* Regler alt/neu als Bühne (Markup von kino .vn) */
.lb-vn { aspect-ratio: auto; }
.lb-vn .vn-stage { box-shadow: 0 50px 110px rgba(0, 0, 0, 0.62); }
.lb-vn > .chip { position: relative; margin-top: 18px; }
/* «Bisher» unten: oben liegt bei alten Seiten meist die Navigation, das Schild verschmölze damit */
.vn-pane--vorher .vn-tag, .duo-hinten .duo-tag, .duo-links .duo-tag { top: auto; bottom: clamp(12px, 1.2vw, 28px); }

/* Chat: Handy mit WhatsApp-Verlauf + drei Statuskarten */
.lb-chat { display: grid; place-items: center; }
.lb-telefon {
  position: relative; height: 100%; aspect-ratio: 9 / 17.5;
  border: clamp(4px, 0.32vw, 8px) solid #252a27; border-radius: clamp(30px, 2.4vw, 56px);
  overflow: hidden; background: #0d1310; box-shadow: 0 50px 110px rgba(0, 0, 0, 0.65);
}
.lb-telefon .chat { width: 100%; height: 100%; max-width: none; border: 0; border-radius: 0; display: flex; flex-direction: column; font-size: clamp(0.7rem, 0.52rem + 0.3vw, 1.02rem); }
/* Wie WhatsApp: die neuesten Nachrichten unten, der Hinweis «Beispiel» bleibt sichtbar */
.lb-telefon .chat-verlauf { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6em; padding: 1em 0.9em; overflow: hidden; }
.lb-telefon .msg { max-width: 88%; }
.lb-telefon .msg--rein { align-self: flex-start; }
.lb-telefon .msg--raus { align-self: flex-end; }
.lb-telefon .chat-hinweis { padding: 0.8em 0.9em; }
.lb-status {
  position: absolute; z-index: 2; display: grid; gap: 0.15em;
  padding: 0.9em 1.2em; border: 1px solid var(--line-strong); border-radius: calc(var(--radius) * 1.1);
  background: rgba(19, 23, 21, 0.94); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  font-size: var(--fs-klein);
}
.lb-status b { display: flex; align-items: center; gap: 0.6em; font-family: var(--display); font-weight: 500; font-size: calc(var(--fs-klein) * 1.18); color: var(--ink); }
.lb-status b::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.lb-status span { color: var(--ink-faint); }
.lb-status--1 { left: 2%; top: 14%; }
.lb-status--2 { left: 7%; bottom: 14%; }
.lb-status--3 { right: 2%; top: 38%; }

/* Karte: echte (unkenntliche) Google-Karte + Beispiel-Eintrag */
.lb-karte { border-radius: calc(var(--radius) * 1.2); overflow: hidden; border: 1px solid var(--messing); box-shadow: 0 50px 110px rgba(0, 0, 0, 0.62); }
.lb-karte .karte-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6) saturate(0.85) contrast(1.05); }
.karte-pin { position: absolute; width: clamp(40px, 3.4vw, 80px); aspect-ratio: 1; transform: translate(-50%, -100%); color: var(--accent); filter: drop-shadow(0 0 18px rgba(182, 255, 46, 0.55)); }
.karte-pin svg { width: 100%; height: 100%; }
html.bewegt .karte-pin { animation: pin-landen 1.4s var(--aus) 0.6s both; }
@keyframes pin-landen { from { transform: translate(-50%, -160%); opacity: 0; } 60% { opacity: 1; } to { transform: translate(-50%, -100%); opacity: 1; } }
.karte-eintrag {
  position: absolute; right: 4%; top: 7%; width: min(46%, 520px);
  padding: clamp(16px, 1.4vw, 32px) clamp(18px, 1.6vw, 36px);
  border: 1px solid var(--line-strong); border-radius: calc(var(--radius) * 1.2);
  background: rgba(19, 23, 21, 0.96); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  font-size: var(--fs-klein);
}
.ke-name { font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 0.8rem + 0.8vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; }
.ke-sterne { display: flex; align-items: center; gap: 0.6em; margin: 0.4em 0 0.15em; color: var(--ink-faint); }
.ke-sterne span { color: var(--accent); letter-spacing: 0.1em; }
.ke-art { color: var(--ink-faint); }
.ke-offen { margin-top: 0.6em; color: var(--accent-ink); }
.ke-knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; margin-top: 1.1em; }
.ke-knoepfe span { display: grid; justify-items: center; gap: 0.45em; padding: 0.8em 0.3em; border: 1px solid var(--line-strong); border-radius: calc(var(--radius) * 0.8); color: var(--ink-dim); }
.ke-knoepfe svg { width: 1.4em; height: 1.4em; color: var(--accent-ink); }
.lb-karte > .chip { left: 3%; bottom: 4%; }

@media (max-width: 999px) {
  .sk-buehne { width: 100%; }
  .lb-chat { aspect-ratio: 4 / 5; }
  .lb-karte { aspect-ratio: 4 / 5; }
}
@media (max-width: 600px) {
  .lb-geraete { padding-bottom: 0; }
  .lb-geraete .mock-browser { width: 88%; }
  .lb-geraete .loop-knopf { right: 12%; }
  .lb-geraete .mock-phone { width: 28%; bottom: 46px; }
  .lb-geraete > .chip { position: relative; left: auto; bottom: auto; display: flex; width: fit-content; max-width: 70%; margin-top: 16px; }
  .lb-status { display: none; }
  .lb-telefon { height: 96%; }
  .karte-eintrag { left: 5%; right: 5%; top: auto; bottom: 14%; width: auto; }
  .lb-karte > .chip { left: 5%; right: 5%; bottom: 3%; }
}

/* ============================================================
   Problem: echte Aufnahmen (fremde Firmen unkenntlich)
   ============================================================ */
.zz-idx {
  display: flex; align-items: center; gap: 0.9em;
  font-size: var(--fs-klein); font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent-ink);
}
.zz-idx::after { content: ""; width: clamp(28px, 2.4vw, 60px); height: 1px; background: var(--line-strong); }
.zz-text h3 + p { margin-top: 1.1em; }
.mock-hinweis { margin-top: clamp(12px, 1.1vw, 26px); font-size: var(--fs-klein); line-height: 1.45; color: var(--ink-faint); text-align: center; text-wrap: balance; }
.mock-viewport--frei { aspect-ratio: auto; }
.mock-viewport--frei img { position: relative; inset: auto; height: auto; }
.echt--hoch { width: min(100%, clamp(320px, 32vw, 760px)); margin-inline: auto; }
.echt-karte {
  position: relative; width: min(100%, clamp(290px, 23vw, 540px)); margin-inline: auto;
  border: 1px solid var(--line-strong); border-radius: calc(var(--radius) * 1.2); overflow: hidden;
  background: #fff; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
}
.echt-karte img { width: 100%; height: auto; }
.echt-marke {
  position: absolute; border: 2.5px dashed var(--accent); border-radius: 10px;
  background: rgba(182, 255, 46, 0.1); box-shadow: 0 0 0 4px rgba(11, 13, 12, 0.35); pointer-events: none;
}
.echt-marke b {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  padding: 0.4em 0.95em; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-klein); font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
/* Bildschirm + Handy (kino .geraete) als Hülle im figure, damit die Bildunterschrift darunter Platz hat */
div.geraete { position: relative; }
/* Eigene Seite auf Bildschirm + Handy, das Handy hervorgehoben */
.geraete--google { container-type: inline-size; }
.geraete--google .mock-phone { outline-color: var(--accent); box-shadow: 0 0 0 5px rgba(182, 255, 46, 0.16), 0 30px 70px rgba(0, 0, 0, 0.7); }
.geraet-badge {
  position: absolute; z-index: 2; right: 0;
  /* Handy = 20 % der Breite, Seitenverhältnis 390:844 → Höhe 43.3 % der Breite */
  bottom: calc(43.3cqw + 12px);
  padding: 0.4em 1em; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-klein); font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
/* Zwei Browserfenster (BYM Solar alt/neu) */
.duo { position: relative; }
.duo .mock-browser { box-shadow: 0 34px 80px rgba(0, 0, 0, 0.58); }
.duo .duo-hinten { width: 78%; opacity: 0.82; transform: rotate(-2deg); }
.duo .duo-vorn { position: relative; width: 78%; margin: -34% 0 0 auto; }
.duo .duo-tag { left: clamp(10px, 0.9vw, 22px); right: auto; }
.duo .duo-vorn .duo-tag, .duo .duo-rechts .duo-tag { color: var(--accent-ink); }
.duo-chips { display: flex; flex-wrap: wrap; gap: 0.6em; margin-top: clamp(16px, 1.4vw, 32px); }
.duo-chips span { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.5em 1em; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-klein); color: var(--ink); }
.duo-chips svg { width: 1.2em; height: 1.2em; color: var(--accent); }
.duo--nebeneinander { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 32px); align-items: start; }
.duo--nebeneinander .duo-rechts { transform: translateY(12%); }
.duo--nebeneinander .duo-links .mock-viewport img { filter: saturate(0.7); }
.duo-schalter { grid-column: 1 / -1; justify-self: center; margin-top: clamp(36px, 3.6vw, 80px); padding: 0.5em 1.1em; border: 1px solid var(--accent-ink); border-radius: 999px; font-size: var(--fs-klein); color: var(--accent-ink); }
.duo figcaption { grid-column: 1 / -1; }
/* Notiz → fertiger Textabschnitt */
.mn-paar { display: grid; grid-template-columns: minmax(0, 0.72fr) auto minmax(0, 1.3fr); align-items: center; gap: clamp(12px, 1.2vw, 28px); }
.mn-notiz {
  padding: 1.2em 1.2em 1.3em; border-radius: calc(var(--radius) * 0.9);
  background: #ece6d2; color: #1b1d16; font-size: var(--fs-klein); line-height: 1.6;
  transform: rotate(-2deg); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}
.mn-notiz b { display: block; margin-bottom: 0.6em; font-size: 0.82em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #55584c; }
.mn-pfeil { color: var(--accent); font-size: clamp(1.4rem, 1.4vw, 2.4rem); }
.mn-ergebnis .mock-viewport { aspect-ratio: 1280 / 760; }
/* Bild mit Rahmen und Unterschrift */
.lp-bild { border: 1px solid var(--line-strong); border-radius: calc(var(--radius) * 1.1); overflow: hidden; background: var(--bg-2); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); }
.lp-bild img { width: 100%; height: auto; }
.lp-bild figcaption { padding: 0.9em 1.2em; font-size: var(--fs-klein); color: var(--ink-faint); border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .mn-paar { grid-template-columns: minmax(0, 1fr); }
  .mn-notiz { max-width: 260px; }
  .mn-pfeil { transform: rotate(90deg); justify-self: center; }
}

/* ============================================================
   Wende-Band: Vollbild-Kino-Bild, darauf die Antwort
   ============================================================ */
.wende {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(84vh, 62vw); min-height: min(84svh, 62vw);
  display: flex; align-items: flex-end;
}
.wende-bild { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.wende-bild img { width: 100%; height: 100%; object-fit: cover; object-position: var(--wb-pos, center 55%); will-change: transform; }
.wende::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--bg-0) 0%, rgba(11, 13, 12, 0) 22%),
    linear-gradient(to top, rgba(7, 9, 8, 0.95) 0%, rgba(7, 9, 8, 0.72) 30%, rgba(7, 9, 8, 0.18) 64%, rgba(7, 9, 8, 0.2) 100%),
    linear-gradient(to right, rgba(7, 9, 8, 0.72) 0%, rgba(7, 9, 8, 0) 60%);
}
.wende-inhalt { padding-block: clamp(120px, 18vh, 300px) clamp(56px, 9vh, 150px); }
.wende-inhalt h2 { margin-top: 0.3em; font-size: var(--fs-h2); max-width: 18ch; }
.wende-inhalt .lead { margin-top: 1.2em; color: var(--ink); max-width: 46ch; }
.wende-inhalt .overline { color: var(--ink-dim); }
@media (max-width: 759px) {
  .wende { min-height: 0; }
  .wende-inhalt { padding-block: clamp(150px, 42vw, 240px) 48px; }
}

/* ============================================================
   Film: eine echte Arbeit als grosse, laufende Aufnahme
   ============================================================ */
.film { padding-block: var(--abstand) 0; }
.film-buehne { position: relative; width: min(var(--max), 100% - 2 * var(--pad)); margin-inline: auto; }
.film-buehne .mock-browser { box-shadow: 0 60px 140px rgba(0, 0, 0, 0.62); }
.film-buehne .loop-knopf { right: clamp(6px, 0.5vw, 12px); }
.film-text { margin-top: clamp(20px, 2vw, 48px); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 40px; }
.film-text p { color: var(--ink-dim); max-width: 70ch; text-wrap: pretty; }
@media (max-width: 760px) and (orientation: portrait) {
  .film-buehne .mock-viewport { aspect-ratio: var(--film-hoch, 16 / 10); }
}


/* ============================================================
   Kacheln: was drin ist
   ============================================================ */
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.3vw, 32px); }
.kacheln--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kacheln { column-gap: clamp(28px, 3vw, 90px); row-gap: clamp(40px, 3.6vw, 100px); }
.kachel {
  position: relative; display: flex; flex-direction: column; gap: 0.6em;
  padding-top: clamp(22px, 1.8vw, 46px);
  border-top: 1px solid var(--line-strong);
  transition: border-color 0.4s ease;
}
.kachel:hover { border-top-color: var(--accent); }
.kachel svg { width: clamp(28px, 2vw, 46px); height: auto; color: var(--accent); margin-bottom: clamp(18px, 1.6vw, 40px); }
.kachel h3 { font-size: clamp(1.1rem, 0.88rem + 0.5vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.15; }
.kachel p { color: var(--ink-dim); font-size: clamp(0.95rem, 0.82rem + 0.18vw, 1.12rem); line-height: 1.5; text-wrap: pretty; }
@media (max-width: 1199px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) { .kacheln--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kacheln, .kacheln--3 { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Ablauf kurz: Zeitleiste mit grossen Ziffern
   ============================================================ */
.zeitleiste { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); counter-reset: s; }
.zeitleiste li { position: relative; padding-right: clamp(14px, 2vw, 56px); }
.zeitleiste li::before {
  counter-increment: s; content: "0" counter(s);
  display: block; font-family: var(--display); font-weight: 300; letter-spacing: -0.04em; line-height: 0.9;
  font-size: clamp(2.6rem, 1.6rem + 2.4vw, 5.4rem); color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.zeitleiste li::after { content: ""; position: absolute; left: 0; right: 0; top: calc(clamp(2.6rem, 1.6rem + 2.4vw, 5.4rem) * 0.9 + clamp(16px, 1.4vw, 32px)); height: 1px; background: var(--line-strong); }
html:not(.bewegt) .zeitleiste li:first-child::after { background: linear-gradient(to right, var(--accent) 0, var(--accent) 3.2em, var(--line-strong) 3.2em); }
.zeitleiste { position: relative; }
.zeitleiste::after {
  content: ""; position: absolute; left: 0; height: 1px; z-index: 1;
  top: calc(clamp(2.6rem, 1.6rem + 2.4vw, 5.4rem) * 0.9 + clamp(16px, 1.4vw, 32px));
  width: calc(var(--fortschritt, 0) * 100%); background: var(--accent); box-shadow: 0 0 10px rgba(182, 255, 46, 0.5);
}
html:not(.bewegt) .zeitleiste::after { display: none; }
.zeitleiste h3 { margin-top: clamp(34px, 3vw, 70px); font-size: clamp(1.1rem, 0.88rem + 0.5vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.15; }
.zeitleiste p { margin-top: 0.6em; color: var(--ink-dim); font-size: clamp(0.95rem, 0.82rem + 0.18vw, 1.12rem); line-height: 1.5; max-width: 34ch; text-wrap: pretty; }
.zeitleiste-fuss { margin-top: clamp(36px, 3.4vw, 80px); }
@media (max-width: 999px) { .zeitleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } .zeitleiste::after { display: none; } html .zeitleiste li:first-child::after { background: linear-gradient(to right, var(--accent) 0, var(--accent) 3.2em, var(--line-strong) 3.2em); } }
@media (max-width: 560px) {
  .zeitleiste { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .zeitleiste li { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; padding-right: 0; }
  .zeitleiste li::before { grid-row: span 2; font-size: 2.4rem; }
  .zeitleiste li::after { display: none; }
  .zeitleiste h3 { margin-top: 0.2em; }
}

/* ============================================================
   Preise auf den Unterseiten (kino .pakete / .zusatz) + Fussnote
   ============================================================ */
.preis-fuss { margin-top: clamp(28px, 2.6vw, 64px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.preis-fuss p { color: var(--ink-dim); max-width: 72ch; text-wrap: pretty; }
.preis-fuss p + p { margin-top: 0.6em; }
.preis-fuss a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.paket .btn { margin-top: auto; }
.section-head + .zusaetze { margin-top: 0; }
.zusatz-knopf { margin-top: 1.2em; }
/* Einzelner Preis (Google-Profil): eine breite Zeile statt drei Karten */
.preis-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px clamp(30px, 4vw, 110px);
  padding: clamp(26px, 2.6vw, 64px); border: 1px solid var(--accent); border-radius: calc(var(--radius) * 1.3);
  background: linear-gradient(120deg, rgba(182, 255, 46, 0.07) 0%, rgba(182, 255, 46, 0) 45%), var(--panel);
}
.preis-zeile .paket-preis { margin-top: 0.2em; }
.preis-zeile .per { font-family: var(--sans); font-size: 0.26em; font-weight: 400; letter-spacing: 0.04em; color: var(--ink-faint); margin-left: 0.7em; }
.preis-zeile p:last-child { margin-top: 0.9em; color: var(--ink-dim); max-width: 64ch; }
.preis-zeile .c-label { display: block; }
@media (max-width: 760px) { .preis-zeile { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Fragen: Überschrift links (klebt), Antworten rechts
   ============================================================ */
.zweispalt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(36px, 6vw, 170px); align-items: start; }
.zweispalt .section-head { position: sticky; top: calc(var(--header-h) + 40px); margin-bottom: 0; }
.fragen details { border-top: 1px solid var(--line-strong); }
.fragen details:last-child { border-bottom: 1px solid var(--line-strong); }
.fragen summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%;
  padding-block: clamp(20px, 1.6vw, 40px);
  font-family: var(--display); font-weight: 500; font-size: clamp(1.1rem, 0.86rem + 0.6vw, 1.85rem); letter-spacing: -0.02em; line-height: 1.2;
  transition: color 0.3s ease;
}
.fragen summary:hover { color: var(--accent-ink); }
.fragen summary::after {
  content: "+"; flex: none; display: grid; place-items: center;
  width: clamp(32px, 2.2vw, 52px); aspect-ratio: 1; border: 1px solid var(--line-strong); border-radius: 50%;
  font-family: var(--sans); font-weight: 300; font-size: clamp(1rem, 0.9vw, 1.5rem); line-height: 1; color: var(--ink);
}
.fragen details[open] summary::after { transform: rotate(45deg); border-color: var(--accent); }
.fragen details p { padding-bottom: clamp(20px, 1.6vw, 40px); color: var(--ink-dim); max-width: 62ch; text-wrap: pretty; }
.fragen details a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
@media (max-width: 999px) { .zweispalt { grid-template-columns: minmax(0, 1fr); } .zweispalt .section-head { position: static; margin-bottom: 26px; } }

/* ============================================================
   Weitere Leistungen: grosse Karten mit Bild
   ============================================================ */
.weiter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 40px); }
.weiter-karte { display: flex; flex-direction: column; gap: 0.5em; }
.weiter-bild {
  display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 0.9em;
  border: 1px solid var(--line-strong); border-radius: calc(var(--radius) * 1.1); background: var(--bg-2);
  transition: border-color 0.4s ease;
}
.weiter-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.9s var(--aus), filter 0.6s ease; filter: brightness(0.86); }
.weiter-karte:hover .weiter-bild { border-color: var(--messing); }
.weiter-karte:hover .weiter-bild img { transform: scale(1.04); filter: none; }
.weiter-karte b { font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 0.9rem + 0.55vw, 1.8rem); letter-spacing: -0.02em; line-height: 1.15; }
.weiter-karte span:last-child { color: var(--ink-dim); }
.weiter-karte span:last-child::after { content: "→"; display: inline-block; margin-left: 0.35em; transition: transform 0.35s var(--aus); }
.weiter-karte:hover span:last-child::after { transform: translateX(6px); }
@media (max-width: 899px) { .weiter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .weiter { grid-template-columns: minmax(0, 1fr); } }

/* Kontakt auf Unterseiten: wie Startseite, Abstand zur letzten Sektion etwas kleiner */
.kontakt .section-head .lead { max-width: 56ch; }

/* ============================================================
   PROJEKT BUCHEN: vier Schritte, rechts die Buchung als Kinoticket.
   buchung.js setzt .bu-live und zeigt die Schritte einzeln;
   ohne JS stehen alle Schritte untereinander.
   ============================================================ */
.bu-bereich { padding-top: clamp(16px, 2vw, 50px); }
.bu-raster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 110px); align-items: start; }
.bu-form { gap: 0; }
.bu-fortschritt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 0.6vw, 14px); margin-bottom: clamp(26px, 2.4vw, 56px); }
.bu-fortschritt button {
  width: 100%; display: flex; align-items: center; gap: 0.8em;
  padding: 0.8em 1em; border: 1px solid var(--line); border-radius: calc(var(--radius) * 0.9);
  background: var(--bg-0); color: var(--ink-faint);
  font-size: var(--fs-klein); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-align: left;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.bu-fortschritt span { width: 2.1em; aspect-ratio: 1; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.bu-fortschritt .ist-aktiv button { border-color: var(--accent); color: var(--ink); }
.bu-fortschritt .ist-aktiv span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bu-fortschritt .ist-fertig button { color: var(--ink-dim); }
.bu-fortschritt .ist-fertig span { border-color: var(--accent-ink); color: var(--accent-ink); }
.bu-form:not(.bu-live) .bu-fortschritt,
.bu-form:not(.bu-live) [data-bu-weiter],
.bu-form:not(.bu-live) [data-bu-zurueck] { display: none; }
.bu-form:not(.bu-live) .bu-schritt { margin-bottom: 48px; }
.bu-schritt { border: 0; padding: 0; margin: 0; min-width: 0; }
.bu-schritt.ist-aktiv { animation: bu-rein 0.5s var(--aus); }
@keyframes bu-rein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.bu-schritt legend {
  display: block; padding: 0; margin-bottom: clamp(18px, 1.8vw, 44px);
  font-family: var(--display); font-weight: 500; font-size: var(--fs-h3); letter-spacing: -0.025em; line-height: 1.1; outline: none;
}
.bu-nr { display: block; margin-bottom: 0.7em; font-family: var(--sans); font-size: var(--fs-klein); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-ink); }
.bu-paket, .bu-zusatz { position: relative; display: block; cursor: pointer; }
.bu-paket input, .bu-zusatz input, .bu-wahl-eintrag input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bu-pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 24px); padding-top: 12px; }
.bu-zusaetze { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1vw, 24px); }
.bu-karte {
  position: relative; display: flex; flex-direction: column; gap: 0.45em; height: 100%;
  padding: clamp(18px, 1.5vw, 36px); border: 1.5px solid var(--line-strong); border-radius: calc(var(--radius) * 1.1);
  background: var(--bg-0); transition: border-color 0.2s ease, background 0.2s ease, transform 0.3s var(--aus);
}
.bu-paket:hover .bu-karte, .bu-zusatz:hover .bu-karte { border-color: var(--ink-faint); transform: translateY(-2px); }
.bu-marke {
  position: absolute; top: 0; left: clamp(16px, 1.4vw, 34px); transform: translateY(-50%);
  padding: 0.4em 1em; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: calc(var(--fs-klein) * 0.92); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2;
}
.bu-name { font-family: var(--display); font-weight: 500; font-size: clamp(1rem, 0.7rem + 0.5vw, 1.45rem); letter-spacing: -0.02em; padding-right: 1.9em; white-space: nowrap; }
.bu-preis { font-family: var(--display); font-weight: 500; font-size: clamp(1.05rem, 0.85rem + 0.45vw, 1.5rem); color: var(--accent-ink); }
.bu-sub { font-size: clamp(0.9rem, 0.8rem + 0.16vw, 1.05rem); color: var(--ink-dim); line-height: 1.45; }
.bu-liste { display: grid; gap: 0.35em; margin-top: 0.6em; padding-top: 0.8em; border-top: 1px solid var(--line); }
.bu-liste span { position: relative; padding-left: 1.2em; font-size: clamp(0.85rem, 0.78rem + 0.14vw, 1rem); color: var(--ink-dim); line-height: 1.4; }
.bu-liste span::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.6em; height: 1px; background: var(--accent); }
.bu-ico svg { width: clamp(26px, 1.8vw, 40px); height: auto; color: var(--accent); }
.bu-haken {
  position: absolute; top: clamp(14px, 1.2vw, 28px); right: clamp(14px, 1.2vw, 28px);
  width: clamp(26px, 1.7vw, 38px); aspect-ratio: 1; display: grid; place-items: center;
  border: 1.5px solid var(--line-strong); border-radius: 50%; color: transparent; transition: all 0.2s ease;
}
.bu-haken svg { width: 58%; height: 58%; }
input:checked + .bu-karte { border-color: var(--accent); background: linear-gradient(180deg, rgba(182, 255, 46, 0.08) 0%, rgba(182, 255, 46, 0.02) 60%), var(--bg-0); }
input:checked + .bu-karte .bu-haken { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
input:focus-visible + .bu-karte, .bu-wahl-eintrag input:focus-visible + span { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.bu-klein { margin-top: clamp(14px, 1.2vw, 28px); font-size: var(--fs-klein); color: var(--ink-faint); }
.bu-klein a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.bu-frage { padding-block: clamp(16px, 1.4vw, 32px); border-top: 1px solid var(--line); }
.bu-frage:first-of-type { border-top: 0; padding-top: 0; }
.bu-frage-titel { font-weight: 500; margin-bottom: 0.8em; }
.bu-wahl { display: flex; flex-wrap: wrap; gap: 0.6em; }
.bu-wahl-eintrag { position: relative; cursor: pointer; }
.bu-wahl-eintrag span { display: inline-block; padding: 0.65em 1.2em; border: 1.5px solid var(--line-strong); border-radius: 999px; font-size: clamp(0.92rem, 0.82rem + 0.16vw, 1.08rem); transition: all 0.2s ease; }
.bu-wahl-eintrag:hover span { border-color: var(--ink-faint); }
.bu-wahl-eintrag input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 600; }
.bu-bisher { margin-top: 1em; max-width: min(100%, 560px); }
.bu-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.2vw, 52px); }
.bu-meldung:empty { display: none; }
/* Die Buchung als Kinoticket (rechts, klebt beim Scrollen) */
.bu-ticket { position: sticky; top: calc(var(--header-h) + 28px); --papier: #ede7d4; --tinte: #14170f; --kerbe: clamp(12px, 0.9vw, 20px); filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5)); }
.bu-ticket-haupt {
  padding: clamp(20px, 1.6vw, 40px) clamp(20px, 1.6vw, 40px) clamp(16px, 1.3vw, 32px);
  border-radius: calc(var(--radius) * 1.2) calc(var(--radius) * 1.2) 0 0;
  color: var(--tinte); font-size: clamp(0.92rem, 0.8rem + 0.2vw, 1.12rem);
  background: repeating-linear-gradient(90deg, rgba(20, 23, 15, 0.022) 0 1px, transparent 1px 7px), var(--papier);
  -webkit-mask: radial-gradient(circle at 0 100%, transparent var(--kerbe), #000 calc(var(--kerbe) + 0.5px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 100%, transparent var(--kerbe), #000 calc(var(--kerbe) + 0.5px)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 100%, transparent var(--kerbe), #000 calc(var(--kerbe) + 0.5px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 100%, transparent var(--kerbe), #000 calc(var(--kerbe) + 0.5px)) right / 51% 100% no-repeat;
}
.bu-ticket-zeile { display: flex; justify-content: space-between; padding-bottom: 0.8em; margin-bottom: 1em; border-bottom: 1.5px solid rgba(20, 23, 15, 0.8); font-size: var(--fs-klein); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #4d5043; }
.bu-daten { display: grid; gap: 0.6em; }
.bu-daten div { display: flex; justify-content: space-between; gap: 12px; }
.bu-daten dt { color: #4d5043; }
.bu-daten dd { font-family: var(--display); font-weight: 600; text-align: right; }
.bu-kurz { margin-top: 1em; padding-top: 0.9em; border-top: 1.5px dashed rgba(20, 23, 15, 0.3); font-size: 0.92em; color: #4d5043; }
.bu-ticket-abriss {
  padding: clamp(18px, 1.4vw, 36px) clamp(20px, 1.6vw, 40px) clamp(20px, 1.6vw, 40px);
  border-radius: 0 0 calc(var(--radius) * 1.2) calc(var(--radius) * 1.2);
  border-top: 2px dashed rgba(16, 20, 8, 0.45); background: var(--accent); color: var(--on-accent);
  font-size: clamp(0.9rem, 0.8rem + 0.18vw, 1.08rem);
  -webkit-mask: radial-gradient(circle at 0 0, transparent var(--kerbe), #000 calc(var(--kerbe) + 0.5px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 0, transparent var(--kerbe), #000 calc(var(--kerbe) + 0.5px)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 0, transparent var(--kerbe), #000 calc(var(--kerbe) + 0.5px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 0, transparent var(--kerbe), #000 calc(var(--kerbe) + 0.5px)) right / 51% 100% no-repeat;
}
.bu-abriss-titel { font-size: var(--fs-klein); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.7em; }
.bu-ticket-abriss ol { list-style: decimal; display: grid; gap: 0.45em; padding-left: 1.3em; line-height: 1.4; }
.bu-direkt { margin-top: 1.2em; font-size: var(--fs-klein); color: var(--ink-dim); text-align: center; }
.bu-direkt a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
@media (max-width: 1099px) {
  .bu-raster { grid-template-columns: minmax(0, 1fr); }
  .bu-ticket { position: static; max-width: 480px; }
}
@media (max-width: 760px) { .bu-pakete { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
@media (max-width: 560px) {
  .bu-zusaetze { grid-template-columns: minmax(0, 1fr); }
  .bu-fortschritt { gap: 4px; }
  .bu-fortschritt button { flex-direction: column; gap: 4px; padding: 8px 4px; font-size: 11px; letter-spacing: 0.04em; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .bu-schritt.ist-aktiv { animation: none; } }

/* ============================================================
   404
   ============================================================ */
.nf-nummer {
  font-family: var(--display); font-weight: 600; line-height: 0.82; letter-spacing: -0.05em;
  font-size: clamp(6rem, 3rem + 13vw, 22rem);
  color: transparent; -webkit-text-stroke: clamp(1.5px, 0.12vw, 3px) var(--accent);
  margin-bottom: clamp(14px, 1.6vw, 40px);
}
.nf-tel { display: inline-flex; align-items: center; gap: 0.7em; font-size: var(--fs-nav); font-weight: 500; letter-spacing: 0.06em; color: var(--ink); padding-block: 0.5em; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.nf-tel svg { width: 1.3em; height: 1.3em; color: var(--accent-ink); }

/* ============================================================
   Rechtstexte (Impressum, Datenschutz)
   ============================================================ */
.prose-bereich { padding-block: 0 var(--abstand); }
.prose { max-width: 76ch; }
.prose h2 { margin-top: clamp(40px, 3.6vw, 90px); margin-bottom: 0.7em; font-size: var(--fs-h3); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-dim); text-wrap: pretty; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1em; }
.prose ul { display: grid; gap: 0.45em; }
.prose li { position: relative; padding-left: 1.3em; }
.prose li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.6em; height: 1px; background: var(--accent); }
.prose strong { color: var(--ink); font-weight: 500; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; transition: text-decoration-color 0.3s ease; }
.prose a:hover { text-decoration-color: var(--accent); }

/* ============================================================
   Danke
   ============================================================ */
.danke-kopf { min-height: 86vh; min-height: 86svh; align-content: center; }
.danke-kopf .sk-raster { align-items: center; }
.danke-direkt { margin-top: clamp(26px, 2.4vw, 56px); display: flex; flex-wrap: wrap; gap: 0.8em 2em; color: var(--ink-dim); }
.danke-direkt a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; }
.danke-direkt a:hover { text-decoration-color: var(--accent); }