/* ==== shared/basis.css ==== */
/* Lytchie Club Card — gemeinsame Grundlage der Website.
   Farben und Schriften kommen aus der App (public/styles.css, card.css,
   Apple-Pass): Creme, Nacht, Gold, der grüne Stempel-Ring, Pro blau,
   Max pink. Schriften sind Systemschriften wie in der App — auf dem iPhone
   „New York“ und SF Pro, sonst Georgia/Noto Serif und die Systemschrift;
   keine geladenen Schriften (schnell, kein Google-Fonts-Datenschutzproblem,
   vietnamesische Zeichen überall sicher). */

:root {
  --creme: #f4f0e8;
  --creme-hell: #faf5f1;
  --papier: #fffdf9;
  --nacht: #11100e;
  --nacht-2: #1b1a17;
  --tinte: #1a1813;
  --grau: #6b655a;
  --grau-hell: #a49d90;
  --linie: #e2dbd0;
  --gold: #d4af37;
  --gold-text: #856613;
  --gold-flaeche: linear-gradient(180deg, #e6c65a 0%, #c9a227 100%);
  --gruen: #4ad489;
  --gruen-dunkel: #182420;
  --gruen-text: #1e7a4a;
  --gruen-blass: #c9f2db;
  --pro: #3f6fd1;
  --max: #d6337f;
  --serif: ui-serif, "New York", "Iowan Old Style", "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --zahl: ui-rounded, system-ui, -apple-system, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); line-height: 1.5; color: var(--tinte); background: var(--creme); }
img, video, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
[lang="de"] p, [lang="de"] li { hyphens: auto; -webkit-hyphens: auto; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==== shared/pass.css ==== */
/* Nachbau der echten Apple-Wallet-Karte (src/wallet/apple.js: Grund
   rgb(17,16,14), Schrift rgb(245,245,247), Beschriftung rgb(212,175,55)).
   Maße nach dem iPhone-Screenshot des Betreibers vom 2026-10-04, alles in
   Containerbreite (cqw), damit die Karte in jeder Größe gleich aussieht.
   Der QR-Code führt auf club.lytchie.com — NIE eine echte Kartenadresse
   (die trägt den geheimen qr_token). */

.pass {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 834 / 1168;
  background: #131210;
  color: #f5f5f7;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2.4cqw;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.55), 0 8px 18px -10px rgba(0, 0, 0, 0.35);
}
.pass small { display: block; font-size: 2.95cqw; font-weight: 600; letter-spacing: 0.035em; color: #d4af37; line-height: 1.2; }

.pass-kopf { position: absolute; left: 3.2cqw; right: 3.8cqw; top: 3.1cqw; display: flex; justify-content: space-between; align-items: flex-start; }
.pass-studio { font-size: 4.15cqw; font-weight: 600; color: #d4af37; line-height: 1.2; padding-top: 2.4cqw; }
.pass-details { text-align: right; }
.pass-details b { display: block; font-weight: 400; font-size: 4.05cqw; letter-spacing: 0.02em; line-height: 1.15; }

.pass-stand { position: absolute; left: 3.2cqw; top: 19.2cqw; }
.pass-stand b { display: block; font-weight: 300; font-size: 15.6cqw; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pass-stand small { color: #f5f5f7; font-weight: 400; font-size: 4.3cqw; letter-spacing: 0.01em; margin-top: 0.6cqw; }

.pass-marke { position: absolute; right: 9.5cqw; top: 27.4cqw; width: 18.8cqw; height: auto; }

.pass-felder { position: absolute; left: 3.2cqw; right: 3.8cqw; top: 56.6cqw; display: flex; justify-content: space-between; gap: 3cqw; }
.pass-felder > div { min-width: 0; }
.pass-felder span { display: block; font-size: 4.8cqw; line-height: 1.25; margin-top: 1.2cqw; white-space: nowrap; }
.pass-felder .pass-rechts { text-align: right; }

.pass-code { position: absolute; left: 0; right: 0; bottom: 3.4cqw; margin: 0 auto; width: 39.2cqw; height: 42.9cqw; background: #fff; border-radius: 1.2cqw; display: flex; flex-direction: column; align-items: center; padding-top: 2.4cqw; }
.pass-code img { width: 33.8cqw; height: 33.8cqw; }
.pass-code span { color: #000; font-size: 3.4cqw; line-height: 1; margin-top: 2.5cqw; white-space: nowrap; }
.pass--starter .pass-code { width: 64.6cqw; }

/* Sperrbildschirm-Mitteilung der Wallet (für Szenen „Stempel kommt an“) */
.wallet-mitteilung {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0 10px; align-items: center;
  padding: 12px 14px; border-radius: 20px;
  background: rgba(245, 243, 238, 0.86); color: #111;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35);
  font-family: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.3;
}
.wallet-mitteilung img { width: 34px; height: 34px; border-radius: 8px; grid-row: span 2; }
.wallet-mitteilung b { font-weight: 600; }
.wallet-mitteilung time { color: #6e6e73; font-size: 12px; justify-self: end; }
.wallet-mitteilung p { grid-column: 2 / 4; }

/* ==== shared/telefon.css ==== */
/* iPhone-Rahmen für die echten App-Screenshots (1320 × 2868, aus
   ~/Desktop/App-Store-Screenshots). Schlicht: dunkle Kante, Dynamic Island,
   keine falschen Spiegelungen. Mittig über left/right/margin — nie über
   translateX (Hausregel aus der App). */

.telefon {
  position: relative;
  width: 100%;
  aspect-ratio: 1320 / 2868;
  padding: 3.2%;
  border-radius: 15% / 7%;
  background: #0d0d0c;
  box-shadow:
    inset 0 0 0 1.5px #3a3936,
    inset 0 0 0 4px #0d0d0c,
    0 40px 70px -40px rgba(17, 16, 14, 0.55),
    0 14px 26px -18px rgba(17, 16, 14, 0.45);
}
.telefon > img, .telefon > video, .telefon > .telefon-inhalt {
  width: 100%; height: 100%; object-fit: cover; object-position: top;
  border-radius: 12.5% / 5.8%;
  display: block; overflow: hidden;
}
.telefon::after {
  content: ""; position: absolute; left: 0; right: 0; margin: 0 auto;
  top: 4.6%; width: 29%; height: 3.1%; border-radius: 999px; background: #000;
}

/* ==== quelle/stil/seite.css ==== */
/* =======================================================================
   club.lytchie.com — Stil der Website (aus Entwurf C „Stempel“, oben mit
   dem Foto aus Entwurf A).

   Das Bauskript hängt diese Datei an shared/basis.css, shared/pass.css und
   shared/telefon.css an (eine Datei, /assets/stil.css). Ganz am Ende fügt
   es je Sprache das Maß der großen Überschrift an (--held-mass).

   Das grafische System ist der Stempel der App: weißer Kreis, grüner Ring
   #4ad489, schwarze Schrift in drei Zeilen (Name · Tag/Monat · Jahr), leere
   Felder als cremefarbene Mulden. Bewegung nur als „Pop“ wie in der App,
   jeweils einmal.

   Content-Security-Policy: keine style-Attribute im HTML. Was C über
   style="--…" setzte, steht hier als Klasse (.stempel--h1, .t0 … .t5,
   die Tinte der Papierkarte über :nth-child).
   ======================================================================= */

:root {
  --grund: var(--papier);              /* #fffdf9 */
  --grund-2: var(--creme);             /* #f4f0e8 */
  --grund-3: #f8f3ea;
  --stein: #ebe5da;                    /* Platzhalter hinter Fotos */
  --text: var(--tinte);                /* #1a1813 */
  --text-2: #4b4538;                   /* 8,4:1 auf Creme */
  --leise: #6b6457;                    /* 5,1:1 auf Creme */
  --haar: var(--linie);                /* #e2dbd0 */
  --haar-dunkel: rgba(26, 24, 19, 0.16);
  --ring: var(--gruen);                /* #4ad489 — der Stempel */
  --ring-text: #1d7547;                /* Grün als Schrift, 5:1 auf Creme */
  --feld: #f2ecdf;                     /* leeres Stempelfeld */
  --feld-rand: rgba(40, 30, 10, 0.10);
  --feld-mulde: inset 0 3px 7px rgba(60, 45, 10, 0.10);
  --stempel-schatten: 0 4px 10px rgba(60, 45, 10, 0.14);
  --blau-text: #2f5fc4;                /* Pro als Schrift, 5,2:1 */
  --pink-text: #c2266e;                /* Max als Schrift, 4,9:1 */
  --tinte-stempel: #a83a52;            /* Stempelkissen auf der Papierkarte */
  --app-grund: #f4f1e9;                /* Grund der App in den Aufnahmen */
  --fokus: #856613;
  --rand: 20px;
  --breite: 1200px;
  --abstand: 96px;
  --knopf-schatten: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 0 rgba(122, 92, 14, 0.28), 0 10px 22px -12px rgba(150, 112, 18, 0.65);
}

@media (min-width: 640px) { :root { --rand: 32px; --abstand: 120px; } }
@media (min-width: 1024px) { :root { --rand: 48px; --abstand: 152px; } }

html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  background: var(--grund);
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
@media (min-width: 1024px) { body { font-size: 18px; } }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 6px; }
p { text-wrap: pretty; }
/* Silbentrennung nur bei langen Wörtern — „fer-tig“ soll nie vorkommen. */
p, li, dd {
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
}
/* Überschriften, kurze Zeilen und der Einstieg ohne Trennstriche. Das
   [lang] davor schlägt die Regel „[lang="de"] p { hyphens: auto }“ aus
   basis.css. */
[lang] :is(h1, h2, h3, dt, summary, .ziel-text, .scan-wort, .held-klein, .held-unterzeile, .held-absatz,
  .fussnote, .plan-preiszeile, .bildzeile, .held-bildzeile, .tresen-notiz p, .feier-demo-absatz, .fuss p) {
  hyphens: manual; -webkit-hyphens: manual;
}
b, strong { font-weight: 700; }
[hidden] { display: none !important; }

.rahmen {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin: 0 auto;
  padding-left: max(var(--rand), env(safe-area-inset-left));
  padding-right: max(var(--rand), env(safe-area-inset-right));
}

.springen {
  position: absolute; left: 12px; top: -80px; z-index: 50;
  padding: 12px 18px; border-radius: 12px;
  background: var(--text); color: var(--grund); font-weight: 700; text-decoration: none;
}
.springen:focus { top: 12px; }

/* ---------------------------------------------------------------- Typo */

.titel {
  font-weight: 800;
  font-size: clamp(32px, 8.6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
  max-width: 17ch;
}

/* Kleine Zeile über jeder Überschrift — mit einem winzigen Stempelfeld davor.
   .held-ueber ist dieselbe Zeile IN der großen Überschrift (h1) oben. */
.ueberzeile, .held-ueber {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
  font-size: 12.5px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--leise);
}
.ueberzeile::before, .held-ueber::before {
  content: ""; flex: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--ring);
  box-shadow: 0 1px 2px rgba(60, 45, 10, 0.14);
}

.bildzeile {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--leise);
}

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

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border-radius: 14px;
  background: var(--gold-flaeche);
  color: #1a1500;
  font-size: 17px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--knopf-schatten);
  transition: transform 0.12s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.knopf:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 0 rgba(122, 92, 14, 0.28), 0 14px 26px -12px rgba(150, 112, 18, 0.7); }
/* Wie ein Stempel, der aufs Papier drückt. */
.knopf:active { transform: translateY(1px) scale(0.985); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 rgba(122, 92, 14, 0.2), 0 4px 10px -8px rgba(150, 112, 18, 0.6); }
.knopf--gross { min-height: 56px; padding: 0 30px; font-size: 18px; border-radius: 16px; }
/* Im Kopf still: Umriss in Tinte. Gold bleibt den großen Knöpfen. */
.knopf--kopf {
  min-height: 44px; padding: 0 16px; font-size: 15px; border-radius: 12px;
  background: transparent; color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--text);
}
.knopf--kopf:hover { background: var(--text); color: var(--grund); box-shadow: inset 0 0 0 1.5px var(--text); }
.knopf--kopf:active { box-shadow: inset 0 0 0 1.5px var(--text); }

.pfeil-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 4px;
  font-weight: 700; color: var(--text);
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-underline-offset: 5px; text-decoration-color: var(--haar-dunkel);
}
.pfeil-link:hover { text-decoration-color: var(--text); }
.pfeil-link svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================ Stempel
   Nachbau von stempel.css + card.css der App. Größe über --d. */

.stempel {
  --d: 56px;
  position: relative;
  flex: none;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  background: #fff;
  border: max(2px, calc(var(--d) * 0.055)) solid var(--ring);
  box-shadow: var(--stempel-schatten);
  color: #111;
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.stempel .s-n { font-size: calc(var(--d) * 0.215); max-width: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Lange Namen eine Stufe kleiner, wie in der App (.dname.l6). */
.stempel .s-n.l6 { font-size: calc(var(--d) * 0.19); letter-spacing: -0.01em; }
.stempel .s-d { font-size: calc(var(--d) * 0.235); }
.stempel .s-j { font-size: calc(var(--d) * 0.178); opacity: 0.94; }

/* Leeres Feld — die Mulde, in die der Stempel fällt. */
.feld {
  --d: 56px;
  position: relative;
  flex: none;
  display: inline-block;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  background: var(--feld);
  box-shadow: inset 0 0 0 2px var(--feld-rand), var(--feld-mulde);
}
.feld > .stempel { position: absolute; inset: 0; --d: inherit; }

@keyframes stempel-pop {
  0% { opacity: 0; transform: scale(0.3) rotate(calc(var(--dreh, 0deg) - 12deg)); box-shadow: 0 0 0 0 rgba(74, 212, 137, 0.6), var(--stempel-schatten); }
  12% { opacity: 1; }
  60% { transform: scale(1.12) rotate(var(--dreh, 0deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--dreh, 0deg)); box-shadow: 0 0 0 calc(var(--d) * 0.26) rgba(74, 212, 137, 0), var(--stempel-schatten); }
}
/* Danach blinkt der frische Stempel dreimal — wie auf der Kundenkarte. */
@keyframes stempel-blink {
  0%, 100% { transform: scale(1) rotate(var(--dreh, 0deg)); }
  50% { transform: scale(1.08) rotate(var(--dreh, 0deg)); background-color: #b9edd1; box-shadow: 0 0 0 4px rgba(31, 145, 85, 0.55), 0 0 18px 4px rgba(31, 145, 85, 0.45); }
}

/* ================================================================ Kopf */

.kopf { position: relative; z-index: 5; background: var(--grund); padding-top: env(safe-area-inset-top); }
.kopf-innen { display: flex; align-items: center; gap: 12px; min-height: 68px; }
.kopf-marke { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; border-radius: 8px; }
.kopf-marke img { width: auto; height: 19px; }
.kopf-nav, .kopf-sprache { display: none; }

@media (min-width: 900px) {
  .kopf-innen { min-height: 84px; }
  .kopf-marke img { height: 20px; }
  .kopf-nav { display: flex; gap: 2px; }
  .kopf-nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border-radius: 10px; text-decoration: none;
    font-size: 15px; font-weight: 600; color: var(--text-2);
  }
  .kopf-nav a:hover { background: var(--grund-2); color: var(--text); }
  .kopf-sprache { display: flex; margin: 0 6px 0 4px; padding-left: 10px; border-left: 1px solid var(--haar); }
}

/* Sprachwahl (Kopf am Desktop, Fuß überall): DE · EN · VI als echte Links. */
.sprachwahl { align-items: center; }
.sprachwahl a {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 6px;
  border-radius: 8px;
  font-size: 13.5px; font-weight: 650; letter-spacing: 0.08em;
  color: var(--leise); text-decoration: none;
}
.sprachwahl a + a::before { content: "·"; position: absolute; left: -3px; color: var(--grau-hell); font-weight: 400; }
.sprachwahl a:hover { color: var(--text); }
.sprachwahl a[aria-current] { color: var(--text); font-weight: 800; }
.sprachwahl a[aria-current]::after {
  content: ""; position: absolute; left: 30%; right: 30%; bottom: 9px; height: 2px; border-radius: 1px;
  background: var(--ring);
}

/* ================================================================ Held
   Text und große Überschrift wie C, das Foto wie A: mobil randlos unter dem
   Text, am Desktop rechts bis an den Fensterrand. --gr ist die Schriftgröße
   der Überschrift; --held-mass die Breite der längsten Zeile samt Stempel in
   Vielfachen davon (das Bauskript rechnet es je Sprache aus). */

.held {
  --gr: clamp(30px, min(12.5vw, (100vw - 2 * var(--rand)) / var(--held-mass, 8.95)), 116px);
  position: relative;
  overflow: hidden;
  padding: 28px 0 0;
}

.held-titel {
  display: grid;
  gap: 0.1em;
  font-size: var(--gr);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}
/* Jede Zeile bleibt eine Zeile; nur wenn eine Übersetzung doch zu lang
   wird, bricht sie um, statt aus dem Bild zu laufen. */
.held-titel .zeile { display: flex; align-items: center; gap: 0.2em; text-wrap: balance; }
.held-titel .feld { --d: calc(var(--gr) * 1.3); }
.held-titel .feld .stempel {
  animation: stempel-pop 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.5s + var(--i) * 0.55s);
  transform: rotate(var(--dreh, 0deg));
}
.stempel--h1 { --i: 0; --dreh: -5deg; }
.stempel--h2 { --i: 1; --dreh: 4deg; }
.stempel--h3 { --i: 2; --dreh: -2deg; }
/* Überzeile im h1 (trägt den Suchbegriff): klein, ohne die Maße der großen Zeilen. */
.held-titel .held-ueber { margin-bottom: 12px; letter-spacing: 0.16em; }
/* Die drei Stempel im h1 tragen ihre Schrift als data-t (per CSS gezeichnet):
   So gehören „Mai 02/10 2026“ nicht zum Text der Überschrift, den Suchmaschinen lesen. */
.held-titel .stempel [data-t]::before { content: attr(data-t); }

.held-text { margin-top: 28px; max-width: 34em; }
.held-unterzeile {
  font-family: var(--serif);
  font-size: clamp(21px, 5.6vw, 27px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text);
  text-wrap: balance;
}
.held-absatz { margin-top: 14px; color: var(--text-2); max-width: 31em; }
.held-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 28px; }
.held-klein { margin-top: 16px; font-size: 14px; line-height: 1.45; color: var(--leise); max-width: 30em; }
/* App-Store-Abzeichen (Original von Apple, nicht verändern): 48 px hoch
   (Apple: mindestens 40), ringsum mindestens ein Viertel der Höhe frei. */
.app-store { display: grid; justify-items: start; gap: 12px; margin-top: 26px; }
.app-store-text { font-size: 15px; line-height: 1.4; color: var(--text-2); }
.app-store-link { display: inline-block; line-height: 0; border-radius: 10px; }
.app-store-link img { display: block; height: 48px; width: auto; }

/* Foto: mobil randlos, volle Breite. */
.held-bild { margin: 40px 0 0; }
.held-foto {
  position: relative;
  aspect-ratio: 1600 / 1986;
  overflow: hidden;
  background: var(--stein);
}
.held-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.held-bildzeile {
  max-width: calc(30em + 2 * var(--rand));
  padding: 14px max(var(--rand), env(safe-area-inset-right)) 32px max(var(--rand), env(safe-area-inset-left));
  font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.45;
  color: var(--leise);
}
/* Die Uhrzeit steht aufrecht davor, wie der Zeitstempel einer Aufnahme. */
.held-bildzeile b {
  font-family: var(--sans); font-style: normal; font-weight: 700;
  font-size: 13px; letter-spacing: 0.01em;
  color: var(--text);
}

@media (min-width: 640px) {
  .held { padding-top: 44px; }
  /* Auf dem Tablet wäre das Hochformat zu hoch: quadratischer Ausschnitt. */
  .held-foto { aspect-ratio: 1 / 1; max-height: 82svh; }
  .held-foto img { object-position: 50% 38%; }
}

@media (min-width: 1024px) {
  /* Die Überschrift richtet sich auch nach der Fensterhöhe (11vh): Auf einem
     Laptop mit 800 px Höhe steht „Kostenlos starten“ noch im ersten Bild. */
  /* Das Foto beginnt rechts neben der Textspalte (540 px + Abstand) und
     läuft bis an den Fensterrand — auf großen Bildschirmen höchstens 900 px. */
  .held {
    --gr: clamp(64px, min(7vw, 11vh, (100vw - 2 * var(--rand)) / var(--held-mass, 8.95)), 106px);
    --text-links: max(var(--rand), (100vw - var(--breite)) / 2);
    --foto-b: clamp(400px, calc(100vw - var(--text-links) - 540px - 112px), 900px);
    /* Überzeile im h1: 15 px Zeile + 12 px Abstand + Rasterlücke (0,1 em). */
    --ueber-h: calc(27px + var(--gr) * 0.1);
    --foto-oben: calc(40px + var(--ueber-h) + var(--gr) * 1.42);
    padding-top: 40px;
    min-height: calc(var(--foto-oben) + 680px);
  }
  .held-titel .feld { --d: calc(var(--gr) * 1.2); }
  /* Zeile 2 und 3 laufen nie unter das Foto. */
  .held-titel .zeile + .zeile { max-width: calc(100vw - var(--foto-b) - var(--text-links) - 24px); }
  .held-text {
    margin-top: 32px;
    max-width: min(540px, calc(100vw - var(--foto-b) - var(--text-links) - 64px));
    padding-bottom: 112px;
  }
  .held-unterzeile { font-size: 26px; }
  .held-absatz { margin-top: 14px; }
  .held-wege { margin-top: 26px; }
  .held-bild {
    position: absolute;
    right: 0;
    top: var(--foto-oben);
    bottom: 0;
    width: var(--foto-b);
    margin: 0;
    display: flex; flex-direction: column;
  }
  .held-foto { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; max-height: none; }
  .held-foto img { object-position: 46% 34%; }
  .held-bildzeile {
    flex: none;
    max-width: 36em;
    padding: 14px var(--rand) 30px 0;
    font-size: 14.5px;
  }
}

/* ============================================================ Vergleich */

.vergleich { background: var(--grund-2); padding: var(--abstand) 0; overflow: clip; }
.vergleich-raster { display: grid; gap: 64px; margin-top: 52px; }

.seite { position: relative; display: flex; flex-direction: column; }
.seite-marke {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 32px; line-height: 1; letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.seite-marke::after { content: ""; flex: 1; height: 1px; background: var(--haar-dunkel); }
.seite-bild { position: relative; width: 100%; aspect-ratio: 10 / 13; }
.seite-foto {
  position: absolute; top: 0;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(60, 45, 10, 0.12);
  background: var(--stein);
}
.seite .bildzeile { margin-top: 20px; max-width: 30em; }
.seite-text { margin-top: 12px; max-width: 31em; color: var(--text-2); }

/* Vorher: Foto links, Papierkarten rechts darüber. */
.seite--vorher .seite-foto { left: 0; width: 70%; aspect-ratio: 3 / 4; height: auto; object-position: 52% 28%; }
.papierkarten {
  position: absolute; right: -2%; bottom: 0;
  width: 80%;
  aspect-ratio: 1 / 0.78;
  container-type: inline-size;
}

/* Nachher: ohne Foto. Das Telefon mit der Web-Karte ist groß genug, dass
   die Stempel lesbar bleiben; die Lupe zeigt den neuen noch einmal. */
.seite--nachher .seite-bild { aspect-ratio: auto; padding-bottom: 6px; }
.telefon--webkarte { position: relative; width: 78%; max-width: 360px; }

/* Trennlinie wie eine Perforation. */
.seite--nachher::before {
  content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 2px;
  background-image: radial-gradient(circle, var(--haar-dunkel) 1.2px, transparent 1.6px);
  background-size: 9px 2px;
}

@media (min-width: 900px) {
  .vergleich-raster { grid-template-columns: 1fr 1fr; gap: 0; margin-top: 72px; }
  .seite--vorher { padding-right: clamp(32px, 5vw, 72px); }
  .seite--nachher { padding-left: clamp(32px, 5vw, 72px); }
  .seite--nachher::before {
    left: 0; right: auto; top: 0; bottom: 0; width: 2px; height: auto;
    background-size: 2px 9px;
  }
  .seite-marke { font-size: 40px; }
  .telefon--webkarte { width: 66%; max-width: 330px; margin-left: 6%; }
}

/* ---- Papierkarten (Scheckkartenformat 85,6 × 54 mm) ---- */

.papier {
  position: absolute;
  width: 88%;
  aspect-ratio: 85.6 / 54;
  container-type: inline-size;
  border-radius: 3.7cqw / 5.9cqw;
  box-shadow: 0 1px 1px rgba(60, 45, 10, 0.18), 0 10px 22px -12px rgba(60, 45, 10, 0.45);
}
/* Papierstruktur: feines Rauschen als eingebettetes SVG, keine Anfrage. */
.papier::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .26 0 0 0 0 .16 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.papier--vorne {
  left: 0; top: 0;
  transform: rotate(-7deg);
  background: #ead0c9;
  box-shadow: inset 0 0 0 2.6cqw #ead0c9, inset 0 0 0 calc(2.6cqw + 1px) rgba(123, 51, 70, 0.32), 0 1px 1px rgba(60, 45, 10, 0.18), 0 10px 22px -12px rgba(60, 45, 10, 0.45);
  color: #7b3346;
}
.pv-name {
  position: absolute; left: 9cqw; top: 9cqw;
  font-family: "Snell Roundhand", "Segoe Script", var(--serif);
  font-style: italic; font-synthesis: none;
  font-size: 9.6cqw; line-height: 1; white-space: nowrap;
}
.pv-zeile {
  position: absolute; left: 9.6cqw; top: 23cqw;
  font-size: 3.4cqw; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
}

.papier--hinten {
  right: 0; bottom: 0;
  transform: rotate(3deg);
  display: flex; flex-direction: column;
  padding: 5.4cqw 6.4cqw 0;
  background:
    /* Knick quer über die Karte */
    linear-gradient(97deg, transparent 61.2%, rgba(255, 255, 255, 0.7) 61.5%, rgba(110, 88, 56, 0.2) 62%, transparent 62.8%),
    /* abgegriffene Ecke unten links */
    radial-gradient(circle at 0% 100%, rgba(120, 92, 54, 0.26) 0, rgba(120, 92, 54, 0.1) 13cqw, transparent 24cqw),
    #f6efe2;
  border-bottom-left-radius: 9cqw 12cqw;
  color: #5a4a35;
}
.ph-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 4cqw; }
.ph-kopf span:first-child { font-size: 3.5cqw; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; }
.ph-kopf span:last-child { font-family: var(--serif); font-style: italic; font-size: 4.4cqw; white-space: nowrap; }
.ph-regel { margin-top: 1.6cqw; padding-bottom: 3.2cqw; border-bottom: 1px solid rgba(90, 70, 40, 0.25); font-size: 4.1cqw; font-weight: 600; }
.ph-felder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3cqw 3.6cqw; margin-top: 4cqw; padding: 0 1.4cqw; }
.ph-feld { position: relative; aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(90, 70, 40, 0.34); }
.tinte {
  position: absolute; inset: 4%;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 0.95cqw solid currentColor;
  box-shadow: inset 0 0 0 0.75cqw transparent, inset 0 0 0 1.25cqw currentColor;
  color: var(--tinte-stempel);
  opacity: var(--o);
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  -webkit-mask-image: linear-gradient(var(--m), #000 25%, rgba(0, 0, 0, 0.32) 100%);
  mask-image: linear-gradient(var(--m), #000 25%, rgba(0, 0, 0, 0.32) 100%);
  mix-blend-mode: multiply;
  font-style: normal;
}
/* Jeder Abdruck sitzt ein wenig anders — gedreht, verschoben, mal blasser. */
.ph-feld:nth-child(1) .tinte { --r: -14deg; --o: 0.62; --x: -1px; --y: 1px; --m: 170deg; }
.ph-feld:nth-child(2) .tinte { --r: 9deg; --o: 0.5; --x: 2px; --y: -1px; --m: 200deg; }
.ph-feld:nth-child(3) .tinte { --r: -4deg; --o: 0.7; --x: 0px; --y: 2px; --m: 120deg; }
.ph-feld:nth-child(4) .tinte { --r: 21deg; --o: 0.38; --x: -2px; --y: 0px; --m: 250deg; }
.ph-feld:nth-child(5) .tinte { --r: -19deg; --o: 0.55; --x: 1px; --y: -2px; --m: 80deg; }
.ph-feld:nth-child(6) .tinte { --r: 6deg; --o: 0.45; --x: -1px; --y: 2px; --m: 300deg; }
.ph-feld:nth-child(7) .tinte { --r: -9deg; --o: 0.66; --x: 2px; --y: 1px; --m: 150deg; }
/* Der Studioname auf dem Gummistempel (ein Name, in allen Sprachen gleich). */
.tinte::before { content: "MAI"; font-size: 2.9cqw; font-weight: 800; letter-spacing: 0.08em; }
/* Ein Stempel doppelt aufgesetzt — wie es am Tresen eben passiert. */
.tinte--doppelt::after {
  content: ""; position: absolute; inset: -0.95cqw;
  border-radius: 50%; border: 0.95cqw solid currentColor;
  transform: translate(1.3cqw, -0.7cqw);
  opacity: 0.32;
}

/* ---- Web-Karte im Telefon: Maße in Punkten eines 390-pt-Bildschirms ---- */

.webkarte { container-type: inline-size; background: #f6f1e6; position: relative; }
.wk {
  --pt: calc(100cqw / 390);
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; gap: calc(16 * var(--pt));
  padding: calc(66 * var(--pt)) calc(20 * var(--pt)) 0;
  color: #17130c;
  font-family: var(--sans);
  line-height: 1.45;
  text-align: center;
}
.wk-status { position: absolute; left: 0; right: 0; top: calc(29 * var(--pt)); height: calc(26 * var(--pt)); }
.wk-uhr {
  position: absolute; left: calc(40 * var(--pt)); top: 0;
  font-size: calc(17 * var(--pt)); font-weight: 650; letter-spacing: -0.01em; line-height: calc(26 * var(--pt));
  font-variant-numeric: tabular-nums;
}
.wk-symbole { position: absolute; right: calc(30 * var(--pt)); top: calc(7 * var(--pt)); width: calc(66 * var(--pt)); height: calc(12 * var(--pt)); }
.wk-kopf { display: flex; flex-direction: column; gap: calc(9 * var(--pt)); }
.wk-studio { font-family: var(--serif); font-size: calc(27 * var(--pt)); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.wk-zeile { font-size: calc(11 * var(--pt)); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #70695a; }
.wk-zeile i { font-style: normal; color: #9a7718; }
.wk-karte {
  display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--pt));
  padding: calc(18 * var(--pt));
  background: #fff;
  border: 1px solid rgba(40, 30, 10, 0.08);
  border-radius: calc(22 * var(--pt));
  box-shadow: 0 calc(8 * var(--pt)) calc(24 * var(--pt)) rgba(60, 45, 10, 0.08);
}
.wk-qr img {
  width: calc(206 * var(--pt)); height: auto;
  padding: calc(10 * var(--pt));
  border: 1px solid rgba(40, 30, 10, 0.16);
  border-radius: calc(16 * var(--pt));
  background: #fff;
  image-rendering: pixelated;
}
.wk-qr span { font-size: calc(13 * var(--pt)); line-height: 1.4; color: #70695a; }
.wk-punkte { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(10 * var(--pt)); width: 100%; }
.wk-punkte .stempel, .wk-punkte .feld { --d: calc(54.4 * var(--pt)); }
.wk-punkte .feld { background: #f2ecdf; }
.wk-stand { display: flex; align-items: baseline; justify-content: center; gap: calc(10 * var(--pt)); }
.wk-stand b { font-family: var(--serif); font-size: calc(36 * var(--pt)); line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.wk-stand span { font-size: calc(12 * var(--pt)); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #70695a; }
.wk-ziel { font-size: calc(15 * var(--pt)); font-weight: 600; line-height: 1.4; color: #4b4538; text-wrap: balance; }
.wk-safari {
  position: absolute; left: calc(18 * var(--pt)); right: calc(18 * var(--pt)); bottom: calc(24 * var(--pt));
  height: calc(46 * var(--pt));
  display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--pt));
  border-radius: 999px;
  background: rgba(252, 250, 246, 0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 calc(6 * var(--pt)) calc(18 * var(--pt)) rgba(0, 0, 0, 0.12);
  font-size: calc(15 * var(--pt)); font-weight: 500; color: #1c1c1e;
}
.wk-safari svg { width: calc(10 * var(--pt)); height: calc(12 * var(--pt)); color: #1c1c1e; }

/* Der neue Stempel (achter Kreis): Pop + dreimal Blinken, sobald sichtbar. */
.stempel--neu { opacity: 1; }
[data-webkarte].wartet .stempel--neu { opacity: 0; }
[data-webkarte].wartet .lupe .stempel { opacity: 0; }
[data-webkarte].los .stempel--neu,
[data-webkarte].los .lupe .stempel {
  animation: stempel-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both, stempel-blink 2.1s ease-in-out 0.6s 3;
}

/* Lupe: der neue Stempel noch einmal groß, mit feiner Linie zum Kreis.
   Sie sitzt auf Höhe der zweiten Stempelreihe am rechten Rand. */
.lupe { position: absolute; inset: 0; pointer-events: none; }
.lupe .stempel {
  --d: 84px;
  position: absolute;
  right: 0;
  top: calc(58% - 42px);
  border-width: 4px;
  box-shadow: var(--stempel-schatten), 0 0 0 7px rgba(244, 240, 232, 0.92);
}
.lupe-linie {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible; display: none;
}
.lupe-linie line { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 3 4; stroke-linecap: round; }
.lupe.mit-linie .lupe-linie { display: block; }

/* Bei „Bewegung reduzieren“: der neue Stempel steht sofort da, mit ruhigem Rand. */
[data-webkarte].ruhig .stempel--neu,
[data-webkarte].ruhig .lupe .stempel {
  box-shadow: 0 0 0 4px rgba(31, 145, 85, 0.5), var(--stempel-schatten);
}

@media (min-width: 900px) {
  .lupe .stempel { --d: 104px; right: 2%; top: calc(58% - 52px); }
}

/* ============================================================== Minuten */

.minuten { padding: var(--abstand) 0; overflow: clip; }

/* Zeitpunkte der Zeitleiste in Minuten (0:00 … 5:00, das Ziel bei 4:30). */
.t0 { --t: 0; } .t1 { --t: 1; } .t2 { --t: 2; } .t3 { --t: 3; } .t4 { --t: 4; } .t5 { --t: 5; }
.ziel { --t: 4.5; }

/* Mobil senkrecht: eine Minute = --u Höhe, die Linie liegt bei --x. */
.zeitleiste {
  --u: 164px;
  --x: 28px;
  --s: 4.5s;                 /* fünf Minuten laufen in viereinhalb Sekunden */
  position: relative;
  margin-top: 72px;
  padding-left: 80px;
}
.lineal {
  position: absolute; left: calc(var(--x) - 1px); top: 0;
  width: 2px; height: calc(var(--u) * 5);
  background: var(--haar-dunkel);
}
.lineal::after {               /* Endstrich bei 5:00 */
  content: ""; position: absolute; left: -9px; bottom: -1px; width: 20px; height: 2px;
  background: var(--text);
}
.lineal-striche {
  position: absolute; left: -8px; top: 0; bottom: 0; width: 18px;
  background:
    repeating-linear-gradient(180deg, var(--leise) 0 1.5px, transparent 1.5px var(--u)) left top / 18px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(26, 24, 19, 0.26) 0 1px, transparent 1px calc(var(--u) / 6)) 4px 0 / 10px 100% no-repeat;
}
.lineal-lauf {
  position: absolute; left: -1px; top: 0; width: 4px; border-radius: 2px;
  height: calc(var(--u) * 4.5);
  background: var(--ring);
  transform-origin: top;
}
.lineal-uhr { display: none; }
.lineal-zahl { display: none; }
.lineal-zahl--ende {
  /* mobil UNTER dem Endstrich, mittig auf dem Lineal — neben dem Lineal lag „5:00“
     auf der letzten Zeile des Zieltexts und las sich als Teil davon */
  display: block; position: absolute; left: -15px; top: calc(var(--u) * 5 + 8px); width: 32px; text-align: center;
  font-size: 12px; font-weight: 700; line-height: 16px; color: var(--text);
  font-variant-numeric: tabular-nums;
}

.schritte { display: block; }
.schritt { position: relative; display: flow-root; height: calc(var(--dauer, 1) * var(--u)); }
.schritt:nth-child(4) { --dauer: 1.5; }
.schritt-feld { --d: 52px; position: absolute; left: calc(var(--x) - 80px - var(--d) / 2); top: calc(var(--d) / -2); }
.stempel--zahl { font-size: 22px; font-weight: 800; }
.schritt-zeit { display: block; margin-top: -10px; font-size: 13px; font-weight: 700; color: var(--ring-text); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; line-height: 20px; }
.schritt h3 { margin-top: 2px; font-size: 20px; line-height: 1.25; font-weight: 750; letter-spacing: -0.015em; }
.schritt p { margin-top: 6px; color: var(--text-2); max-width: 26em; }
.ziel { position: relative; display: flow-root; min-height: calc(var(--u) * 0.5 + 36px); }
.ziel-feld { --d: 66px; position: absolute; left: calc(var(--x) - 80px - var(--d) / 2); top: calc(var(--d) / -2); }
.ziel-text { font-size: 20px; line-height: 1.3; font-weight: 750; letter-spacing: -0.015em; max-width: 17em; }
.ziel-text time { display: block; margin: -10px 0 2px; font-size: 13px; line-height: 20px; letter-spacing: 0.04em; color: var(--ring-text); font-weight: 700; }

/* Ablauf (nur mit Skript und Bewegung): Linie wächst, Stempel fallen der Reihe nach. */
.zeitleiste.wartet .lineal-lauf { transform: scaleY(0); }
.zeitleiste.wartet .schritt-feld .stempel,
.zeitleiste.wartet .ziel-feld .stempel { opacity: 0; }
.zeitleiste.los .lineal-lauf { transform: scaleY(1); transition: transform var(--s) linear; }
.zeitleiste.los .schritt-feld .stempel {
  animation: stempel-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--t) * 1s);
}
.zeitleiste.los .ziel-feld .stempel {
  animation: stempel-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both, stempel-blink 2.1s ease-in-out 3;
  animation-delay: var(--s), calc(var(--s) + 0.6s);
}

/* Breit: waagerecht. Eine Minute = 20 % der Breite, Linie bei --y. */
@media (min-width: 900px) {
  .zeitleiste {
    --y: 46px;
    --d-schritt: 58px;
    /* 0:00 liegt eine halbe Stempelbreite innen: Der erste Stempel steht
       bündig mit der Überschrift, die Texte bündig mit ihren Stempeln. */
    margin: 72px 24px 0 calc(var(--d-schritt) / 2);
    padding: calc(var(--y) + var(--d-schritt) / 2 + 26px) 0 0;
  }
  .lineal { left: 0; right: 0; top: calc(var(--y) - 1px); width: auto; height: 2px; }
  .lineal::after { left: auto; right: -1px; bottom: -9px; width: 2px; height: 20px; }
  .lineal-striche {
    left: 0; right: 0; top: -8px; bottom: auto; width: auto; height: 18px;
    background:
      repeating-linear-gradient(90deg, var(--leise) 0 1.5px, transparent 1.5px 20%) left top / 100% 18px no-repeat,
      repeating-linear-gradient(90deg, rgba(26, 24, 19, 0.26) 0 1px, transparent 1px calc(20% / 6)) 0 4px / 100% 10px no-repeat;
  }
  .lineal-lauf { left: 0; top: -1px; width: 90%; height: 4px; transform-origin: left; }
  .zeitleiste.wartet .lineal-lauf { transform: scaleX(0); }
  .zeitleiste.los .lineal-lauf { transform: scaleX(1); }
  .lineal-zahl {
    display: block; position: absolute; top: -40px; left: calc(var(--t) * 20%);
    width: 48px; margin-left: -24px; text-align: center;
    font-size: 13px; font-weight: 700; line-height: 16px; color: var(--leise);
    font-variant-numeric: tabular-nums;
  }
  .lineal-zahl--ende { left: 100%; top: -40px; width: auto; text-align: left; color: var(--text); }
  .lineal-uhr {
    display: block; position: absolute; top: calc(var(--d-schritt) / 2 + 6px);
    left: calc(var(--fort, 1) * 90%); margin-left: -22px; width: 44px; text-align: center;
    padding: 3px 0; border-radius: 7px;
    background: var(--text); color: var(--grund);
    font-size: 12px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;
    opacity: 0; pointer-events: none;
  }
  .zeitleiste.los .lineal-uhr { opacity: 1; }
  .zeitleiste.fertig .lineal-uhr { opacity: 0; transition: opacity 0.6s ease; }

  .schritte { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* rechts so viel Luft, wie die nächste Spalte nach links ragt (halber Stempel) — sonst stießen die Texte aneinander */
  .schritt { height: auto; margin-left: calc(var(--d-schritt) / -2); padding-right: calc(var(--d-schritt) / 2 + 16px); }
  .schritt-feld { --d: var(--d-schritt); left: 0; top: calc(-1 * var(--d) - 26px); }
  .schritt-zeit { display: none; }
  .schritt h3 { font-size: 21px; margin-top: 0; }
  .ziel {
    position: absolute; right: 0; top: calc(var(--y) + var(--d-schritt) / 2 + 26px);
    width: 20%; min-height: 0;
    text-align: center;
  }
  .ziel-feld { --d: 80px; left: calc(50% - var(--d) / 2); top: calc(var(--d) / -2 - var(--d-schritt) / 2 - 26px); }
  .ziel-text { font-size: 21px; max-width: none; padding-top: 20px; }
  .ziel-text time { margin: 0 0 4px; }
}

/* Ende des Abschnitts: die Belohnungs-Feier zum Ausprobieren — eigener Stil
   in feier-demo.css (das Erklärvideo, das hier stand, ist weg). */

/* ============================================================ Kund/innen */

.kundinnen { background: var(--grund-3); padding: var(--abstand) 0; overflow: clip; }
.kundinnen-raster { display: grid; gap: 56px; }
.punkte { display: grid; gap: 26px; margin-top: 40px; }
.punkte > li { position: relative; padding-left: 40px; color: var(--text-2); max-width: 31em; }
.punkte > li::before {
  content: ""; position: absolute; left: 0; top: 0.08em;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ring);
  box-shadow: var(--stempel-schatten);
}
.punkte b { color: var(--text); }
.sprachen {
  display: flex; flex-wrap: wrap; gap: 4px 0;
  margin-top: 14px;
  font-size: 14px; line-height: 1.5; color: var(--leise);
}
.sprachen li { white-space: nowrap; hyphens: manual; -webkit-hyphens: manual; }
.sprachen li:not(:last-child)::after { content: "·"; margin: 0 7px; color: var(--grau-hell); }

.beitritt-szene { container-type: inline-size; width: 100%; max-width: 640px; }
.szene-innen { position: relative; }
.beitritt {
  width: min(100%, 320px);
  border-radius: 24px;
  background: #f6f1e6;
  border: 1px solid rgba(40, 30, 10, 0.1);
  box-shadow: 0 1px 1px rgba(60, 45, 10, 0.08), 0 18px 40px -26px rgba(60, 45, 10, 0.5);
  overflow: hidden;
}
.bt-innen { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 22px 16px 18px; text-align: center; color: #17130c; }
.bt-studio { font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.bt-zeile { margin-top: -4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #70695a; }
.bt-belohnung {
  margin-top: 6px; padding: 11px 12px;
  border-radius: 14px;
  background: rgba(154, 119, 24, 0.1); border: 1px solid rgba(154, 119, 24, 0.22);
  color: #836612; font-size: 15px; font-weight: 700; line-height: 1.3;
}
.bt-form {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 4px; padding: 15px 14px 16px;
  border-radius: 20px; background: #fff;
  border: 1px solid rgba(40, 30, 10, 0.08);
  box-shadow: 0 8px 24px rgba(60, 45, 10, 0.08);
  text-align: left;
}
.bt-titel { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.bt-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(154, 119, 24, 0.1); border: 1px solid rgba(154, 119, 24, 0.22); color: #9a7718; }
.bt-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bt-hinweis { font-size: 12.5px; line-height: 1.4; color: #70695a; }
.bt-label { margin-top: 4px; font-size: 13px; font-weight: 700; color: #4b4538; }
.bt-eingabe {
  display: flex; align-items: center;
  min-height: 44px; padding: 0 12px;
  border-radius: 12px; border: 1.5px solid #c9a232;
  box-shadow: 0 0 0 4px rgba(201, 162, 50, 0.18);
  font-size: 16px; color: #17130c; background: #fff;
}
.bt-cursor { display: inline-block; width: 1.5px; height: 20px; margin-left: 1px; background: #1f6fd0; animation: cursor 1.1s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.bt-frage { margin-top: 6px; font-size: 14.5px; font-weight: 700; }
.bt-knopf {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 12px; border-radius: 14px;
  font-size: 14.5px; font-weight: 700; text-align: center;
}
.bt-knopf--apple { background: #000; color: #fff; border: 1px solid #444; }

/* Ergebnis: Mitteilung und Wallet-Karte. Gestapelt rechts unter der Seite. */
.beitritt-ergebnis {
  position: relative;
  width: min(72%, 260px);
  margin: 34px 0 0 auto;
}
.beitritt-pfeil {
  position: absolute; left: -70px; top: -50px;
  width: 70px; height: 70px;
  fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.beitritt-ergebnis .pass { margin-top: 12px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 24px 44px -24px rgba(17, 16, 14, 0.6); }
.beitritt-mitteilung {
  position: relative; z-index: 2;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(250, 248, 243, 0.96);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 14px 30px -16px rgba(0, 0, 0, 0.4);
}
.beitritt-mitteilung img { width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.beitritt-mitteilung .mt-zeit { justify-self: end; font-size: 11.5px; color: #66666b; }
.beitritt-bildzeile { margin-top: 28px; max-width: 26em; }

/* Genug Platz: Seite links, Ergebnis rechts daneben, Pfeil dazwischen. */
@container (min-width: 560px) {
  .szene-innen { display: flex; align-items: flex-end; gap: 52px; }
  .beitritt { flex: none; width: 310px; }
  .beitritt-ergebnis { flex: none; width: 230px; margin: 0 0 6px; }
  .beitritt-pfeil { left: -66px; top: 34%; width: 62px; height: 62px; transform: rotate(-32deg); }
}

@media (min-width: 1100px) {
  .kundinnen-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: center; }
  .beitritt-szene { justify-self: end; }
}

/* ================================================================ Tresen */

.tresen { display: grid; background: var(--grund); overflow: clip; }
.tresen-foto { position: relative; background: var(--stein); }
.tresen-foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 52%; }
.tresen-foto::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(180deg, rgba(26, 20, 12, 0) 0%, rgba(26, 20, 12, 0.62) 100%);
  pointer-events: none;
}
.tresen-foto figcaption {
  position: absolute; z-index: 1; left: max(var(--rand), env(safe-area-inset-left)); right: var(--rand); bottom: 18px;
  font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.4;
  color: #fff; max-width: 22em;
}
.tresen-text { padding: 64px var(--rand) var(--abstand); max-width: 640px; }
.tresen-absatz { margin-top: 24px; color: var(--text-2); max-width: 30em; }

.ablauf { display: grid; gap: 14px; margin-top: 40px; }
.ablauf-schritt {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 0 16px 42px;
  border-top: 1px solid var(--haar);
}
.ablauf-schritt:last-child { border-bottom: 1px solid var(--haar); }
.ablauf-nr {
  position: absolute; left: 0; top: 50%; margin-top: -14px;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--haar-dunkel);
  font-size: 13px; font-weight: 700; color: var(--leise); font-variant-numeric: tabular-nums;
}

.scan-knopf { display: flex; align-items: center; gap: 14px; flex: 1 1 0; min-width: 0; }
.scan-scheibe {
  flex: none; display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #f6e39b 0%, #dcb94a 46%, #b08a27 100%);
  color: #171206;
  box-shadow: 0 0 0 3px var(--grund), 0 0 0 4.5px rgba(222, 187, 78, 0.85), 0 8px 18px -6px rgba(176, 138, 39, 0.6);
}
.scan-scheibe svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.scan-wort { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 0; min-width: 0; }
.scan-wort b { font-size: 17px; }
.scan-wort span { font-size: 14px; color: var(--leise); }

.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 330px; }
.kachel {
  display: grid; place-items: center;
  min-height: 46px; padding: 6px;
  border-radius: 13px;
  background: linear-gradient(135deg, #4ad489 0%, #2ba063 100%);
  border: 2px solid #4ad489;
  color: #06301a; font-size: 15px; font-weight: 800;
}
.kachel--an { background: linear-gradient(135deg, #a8f5cd 0%, #62e6a4 100%); border-color: #d6ffe9; color: #042413; box-shadow: 0 0 0 3px rgba(74, 212, 137, 0.35), 0 0 22px rgba(74, 212, 137, 0.55); }
.ablauf-feld { --d: 58px; }

/* Ablauf nur mit Skript und Bewegung: Kachel leuchtet, dann fällt der Stempel. */
.ablauf-rahmen.wartet .kachel--an { background: linear-gradient(135deg, #4ad489 0%, #2ba063 100%); border-color: #4ad489; color: #06301a; box-shadow: none; }
.ablauf-rahmen.wartet [data-ablauf-stempel] { opacity: 0; }
.ablauf-rahmen.los .kachel--an { animation: kachel-tipp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }
.ablauf-rahmen.los [data-ablauf-stempel] { animation: stempel-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1s both; }
@keyframes kachel-tipp {
  0% { background: linear-gradient(135deg, #4ad489 0%, #2ba063 100%); border-color: #4ad489; transform: scale(1); box-shadow: none; }
  25% { transform: scale(0.94); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.tresen-notiz { margin-top: 36px; max-width: 30em; color: var(--text-2); }
.notiz-zeile { display: flex; align-items: flex-start; gap: 16px; }
.notiz-zahl {
  flex: none;
  font-size: 64px; font-weight: 800; line-height: 0.82; letter-spacing: -0.05em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.tresen-notiz b { color: var(--text); }

/* Echte App: Ausschnitt aus dem Screenshot „1-stempel“ — Leas Karte direkt
   nach Linhs Stempel, oben „Rückgängig“. */
.tresen-app { margin-top: 32px; max-width: 400px; }
.tresen-app .bildzeile { margin-top: 14px; }

@media (min-width: 640px) and (max-width: 899px) {
  .tresen-foto img { aspect-ratio: 3 / 2; object-position: 50% 56%; }
}
@media (min-width: 900px) {
  .tresen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .tresen-foto img { height: 100%; aspect-ratio: auto; min-height: 760px; object-position: 46% 50%; }
  .tresen-foto figcaption { left: 40px; bottom: 32px; font-size: 16px; }
  .tresen-text { padding: var(--abstand) var(--rand) var(--abstand) clamp(48px, 6vw, 96px); align-self: center; max-width: 660px; }
}

/* =================================================================== Pro */

.pro { background: var(--grund-2); padding: var(--abstand) 0; overflow: clip; }
.pro-raster { display: grid; gap: 56px; }

/* Abdruck eines Gummistempels: doppelter Rand, Tinte, leicht schräg. */
.plan-abdruck { display: inline-flex; margin-bottom: 24px; transform: rotate(-4deg); transform-origin: left center; }
.plan-abdruck > span {
  display: inline-flex; align-items: center;
  padding: 8px 15px 7px;
  border: 2px solid currentColor;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--grund-2), inset 0 0 0 3.2px currentColor;
  font-size: 14px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1;
}
.plan-abdruck--pro { color: var(--blau-text); }
.plan-abdruck--max { color: var(--pink-text); margin: 0 10px 0 0; transform: rotate(-3deg); }
.plan-abdruck--max > span { padding: 5px 10px 4px; font-size: 12.5px; }

.funktionen { display: grid; margin-top: 40px; border-top: 1px solid var(--haar-dunkel); }
.funktionen > div { padding: 18px 0 20px; border-bottom: 1px solid var(--haar); }
.funktionen dt { font-size: 19px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.3; }
.funktionen dd { margin: 4px 0 0; color: var(--text-2); max-width: 30em; }
.max-block { margin-top: 30px; }
.max-kopf { display: flex; align-items: center; gap: 4px; font-weight: 700; color: var(--text); }
.max-liste { display: grid; gap: 6px; margin-top: 12px; }
.max-liste li { position: relative; padding-left: 26px; color: var(--text-2); }
.max-liste li::before {
  content: ""; position: absolute; left: 0; top: 0.32em;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2.5px solid var(--max); background: #fff;
}

.pro-bild { max-width: 420px; }
/* Ausschnitt eines App-Screenshots (660 × 1434): Der Kasten zeigt nur den
   gewünschten Teil, das Bild rückt per negativem Rand nach oben
   (Prozent beziehen sich auf die Breite). */
.ausschnitt {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #f4f0e8;
  box-shadow: 0 0 0 1px rgba(40, 30, 10, 0.08), 0 24px 46px -30px rgba(60, 45, 10, 0.55);
}
.ausschnitt img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.ausschnitt--menue { aspect-ratio: 660 / 594; }
.ausschnitt--menue img { margin-top: -96.6%; }
.ausschnitt--tresen { aspect-ratio: 660 / 556; }
.ausschnitt--tresen img { margin-top: -32.4%; }
.pro-bild .bildzeile { margin-top: 16px; }

@media (min-width: 640px) {
  .funktionen { grid-template-columns: 1fr 1fr; column-gap: 40px; }
}
@media (min-width: 1024px) {
  .pro-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 80px; align-items: center; }
  .pro-bild { justify-self: end; }
}

/* ================================================================ Preise */

.preise { padding: var(--abstand) 0; }
.plaene { display: grid; margin-top: 52px; border-top: 2px solid var(--text); }
.plan {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px;
  align-items: start;
  padding: 36px 0 40px;
  border-bottom: 1px solid var(--haar-dunkel);
}
.preis-stempel {
  grid-row: span 2;
  --d: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: var(--d); height: var(--d); border-radius: 50%;
  background: #fff;
  border: 4px solid var(--ring);
  box-shadow: var(--stempel-schatten);
  text-align: center; line-height: 1.1;
}
.ps-betrag { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ps-zeit { margin-top: 3px; max-width: 86%; font-size: 12px; font-weight: 700; color: var(--leise); }
.plan--pro .preis-stempel { border-color: var(--pro); }
.plan--max .preis-stempel { border-color: var(--max); }
.plan-kopf h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.plan-preiszeile { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--text-2); }
.plan-marke {
  display: inline-flex; align-items: center;
  padding: 5px 10px; border-radius: 8px;
  border: 1.5px solid var(--blau-text);
  color: var(--blau-text);
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
}
.plan-liste { grid-column: 1 / -1; display: grid; gap: 9px; margin-top: 26px; }
.plan-liste li { position: relative; padding-left: 28px; font-size: 16px; line-height: 1.45; }
.plan-liste li::before {
  content: ""; position: absolute; left: 0; top: 0.3em;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2.5px solid var(--ring); background: #fff;
}
.plan--pro .plan-liste li::before { border-color: var(--pro); }
.plan--max .plan-liste li::before { border-color: var(--max); }
.plan-notiz { grid-column: 1 / -1; margin-top: 20px; font-size: 14px; line-height: 1.45; color: var(--leise); max-width: 34em; }
.plan-knopf { grid-column: 1 / -1; justify-self: start; margin-top: 28px; }
.fussnote { margin-top: 28px; font-size: 14px; line-height: 1.5; color: var(--leise); max-width: 46em; }

@media (min-width: 640px) {
  .preis-stempel { --d: 124px; border-width: 5px; }
  .ps-betrag { font-size: 36px; }
  .ps-zeit { font-size: 13px; }
  .plan { column-gap: 32px; }
  .plan-liste, .plan-notiz, .plan-knopf { grid-column: 2; }
  .plan-liste { margin-top: 20px; }
}
@media (min-width: 1024px) {
  /* Starter als breite Zeile — die Kernbotschaft. Darunter Pro und Max. */
  .plaene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .plan { column-gap: 32px; padding: 48px 0 52px; }
  .plan--starter {
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 48px;
    padding: 56px 0 60px;
  }
  .plan--starter .preis-stempel { --d: 172px; grid-row: 1 / span 3; border-width: 6px; }
  .plan--starter .ps-betrag { font-size: 52px; }
  .plan--starter .ps-zeit { font-size: 15px; }
  .plan--starter .plan-kopf h3 { font-size: 44px; }
  .plan--starter .plan-preiszeile { font-size: 18px; }
  .plan--starter .plan-notiz, .plan--starter .plan-knopf { grid-column: 2; }
  .plan--starter .plan-liste { grid-column: 3; grid-row: 1 / span 3; align-self: start; margin-top: 4px; gap: 11px; }
  .plan--starter .plan-liste li { font-size: 17px; }
  .plan--pro { padding-right: 44px; border-right: 1px solid var(--haar-dunkel); }
  .plan--max { padding-left: 44px; }
  .plan-kopf h3 { font-size: 34px; }
  .preis-stempel { --d: 128px; }
  .ps-betrag { font-size: 38px; }
}

/* ================================================================ Fragen */

.fragen { padding: 0 0 var(--abstand); }
.fragen-raster {
  display: grid; gap: 40px; padding-top: var(--abstand);
  /* Haarlinie nur über dem Inhalt, nicht über dem Seitenrand */
  background: linear-gradient(var(--haar), var(--haar)) no-repeat center top / calc(100% - 2 * var(--rand)) 1px;
}
.fragen-kontakt { margin-top: 20px; color: var(--text-2); }
.fragen-kontakt a { color: var(--text); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--haar-dunkel); }

.fragen-liste { border-top: 1px solid var(--haar-dunkel); }
.fragen-liste details { border-bottom: 1px solid var(--haar-dunkel); }
.fragen-liste summary {
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 14px 0;
  cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
}
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::marker { content: ""; }
.fragen-liste summary:focus-visible { outline-offset: 2px; }
.frage-text { flex: 1; }
/* Das Feld wird beim Öffnen „gestempelt“. */
.frage-feld {
  position: relative; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--feld);
  box-shadow: inset 0 0 0 2px var(--feld-rand), var(--feld-mulde);
  transition: background 0.2s, box-shadow 0.2s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.frage-feld::before, .frage-feld::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px;
  background: var(--text-2);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.frage-feld::after { transform: rotate(90deg); }
details[open] .frage-feld { background: #fff; box-shadow: inset 0 0 0 3px var(--ring), var(--stempel-schatten); animation: feld-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
details[open] .frage-feld::after { transform: rotate(0deg); }
@keyframes feld-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.fragen-liste details p { padding: 0 0 24px 46px; color: var(--text-2); max-width: 36em; }
@media (hover: hover) { .fragen-liste summary:hover .frage-text { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--haar-dunkel); } }

@media (min-width: 1024px) {
  .fragen-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; }
  .fragen-kopf { position: sticky; top: 40px; align-self: start; }
  .fragen-liste summary { font-size: 19px; min-height: 72px; }
}

/* ============================================================= Abschluss */

.abschluss { background: var(--grund-2); padding: var(--abstand) 0; overflow: clip; }
.abschluss-raster { display: grid; gap: 48px; justify-items: start; }
.abschluss-bild { width: min(78%, 340px); justify-self: center; }
/* Das Foto im Stempelring — das letzte Feld der Karte. */
.abschluss-kreis {
  display: block; position: relative;
  aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  border: 7px solid var(--ring);
  box-shadow: 0 0 0 7px #fff, 0 0 0 8px var(--haar), 0 30px 60px -30px rgba(60, 45, 10, 0.55);
  background: #fff;
}
.abschluss-kreis img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
.titel--abschluss { max-width: 16ch; }
.titel-zweit {
  display: block; margin-top: 14px;
  font-family: var(--serif); font-weight: 400; font-size: 0.6em; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--text-2);
  max-width: 20ch;
}
.abschluss-text .knopf { margin-top: 32px; }
.abschluss-text .held-klein { margin-top: 16px; }

@media (min-width: 900px) {
  .abschluss-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 80px; }
  .abschluss-bild { width: 100%; max-width: 440px; }
  .titel--abschluss { font-size: clamp(44px, 5.2vw, 72px); }
}

/* ================================================================== Fuß */

.fuss { padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--haar); background: var(--grund); }
.fuss-raster { display: grid; gap: 28px; }
.fuss-icon {
  width: 48px; height: 48px;
  border-radius: 11px;
  box-shadow: 0 0 0 1px rgba(26, 24, 19, 0.08), 0 6px 14px -8px rgba(17, 16, 14, 0.5);
}
.fuss-marke p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--leise); }
/* Markenhinweis für das App-Store-Abzeichen (Apple verlangt ihn). */
.fuss-marken { margin-top: 20px; max-width: 60em; font-size: 12.5px; line-height: 1.5; color: var(--leise); }
.fuss-marke .fuss-name { margin-top: 14px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -10px; }
.fuss-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-size: 15px; font-weight: 600; color: var(--text-2); text-decoration: none; border-radius: 8px;
}
.fuss-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.fuss-sprache { display: flex; margin-left: -6px; }

@media (min-width: 900px) {
  .fuss-raster { grid-template-columns: minmax(0, 1.4fr) auto auto; align-items: start; gap: 48px; }
  .fuss-links { justify-content: flex-end; }
}

/* ======================================================= Datenschutzseite */

.recht { padding: 32px 0 var(--abstand); }
.recht-rahmen { max-width: calc(46rem + 2 * var(--rand)); }
.recht-zurueck { margin-bottom: 28px; }
.recht-zurueck a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  margin-left: -4px; padding: 0 4px;
  font-size: 15px; font-weight: 650; color: var(--text-2); text-decoration: none; border-radius: 8px;
}
.recht-zurueck a:hover { color: var(--text); }
.recht-zurueck svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.recht-text { color: var(--text-2); }
.recht-text h1 {
  font-weight: 800; font-size: clamp(34px, 8vw, 56px); line-height: 1.04; letter-spacing: -0.035em;
  color: var(--text); text-wrap: balance;
}
.recht-text h1 + p { margin-top: 14px; font-size: 14px; color: var(--leise); }
.recht-text h2 {
  margin-top: 48px; padding-top: 20px;
  border-top: 1px solid var(--haar);
  font-size: 21px; font-weight: 750; line-height: 1.3; letter-spacing: -0.015em;
  color: var(--text); text-wrap: balance;
}
.recht-text h3 { margin-top: 28px; font-size: 18px; font-weight: 700; color: var(--text); }
.recht-text p, .recht-text ul, .recht-text ol { margin-top: 14px; }
.recht-text ul, .recht-text ol { display: grid; gap: 8px; }
.recht-text li { position: relative; padding-left: 24px; }
.recht-text ul > li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--ring); background: #fff;
}
.recht-text ol { counter-reset: punkt; }
.recht-text ol > li { counter-increment: punkt; }
.recht-text ol > li::before { content: counter(punkt) "."; position: absolute; left: 0; font-weight: 700; color: var(--text); }
.recht-text a { color: var(--text); font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--haar-dunkel); overflow-wrap: anywhere; }
.recht-text a:hover { text-decoration-color: var(--text); }
.recht-text strong, .recht-text b { color: var(--text); }

@media (min-width: 1024px) {
  .recht { padding-top: 48px; }
  .recht-text h2 { margin-top: 56px; font-size: 23px; }
}

/* ================================================= Sprachwahl (Wurzel) */

.seite-wurzel { background: var(--grund-2); }
.wurzel {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: calc(30rem + 2 * var(--rand));
  margin: 0 auto;
  padding: calc(48px + env(safe-area-inset-top)) var(--rand) calc(48px + env(safe-area-inset-bottom));
}
/* App-Symbol über der Wortmarke (wie Kopfzeile und Fußzeile der Seiten). */
.wurzel-icon { margin-bottom: 22px; }
.wurzel-icon img {
  width: 56px; height: 56px;
  border-radius: 22.4%;
  background: var(--nacht);
  box-shadow: 0 0 0 1px rgba(26, 24, 19, 0.10), 0 8px 18px -10px rgba(17, 16, 14, 0.6);
}
.wurzel-marke img { width: auto; height: 22px; }
.wurzel-wahl { margin-top: 40px; border-top: 2px solid var(--text); }
.wurzel-wahl li { border-bottom: 1px solid var(--haar-dunkel); }
.wurzel-wahl a {
  display: grid; gap: 2px;
  padding: 20px 4px 22px;
  color: var(--text); text-decoration: none;
}
.ww-name { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.ww-zeile { font-size: 15px; color: var(--leise); }
.ww-weiter { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 15px; font-weight: 700; }
.ww-weiter svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.wurzel-wahl a:hover .ww-weiter svg { transform: translateX(3px); }
/* Die Sprache des Browsers steht oben und trägt einen grünen Punkt. */
.wurzel-wahl .ww-empfohlen .ww-name::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 12px; height: 12px; margin-left: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--ring);
}
.wurzel-wahl a:hover .ww-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--ring); }

/* ================================================================== 404 */

.seite-fehler { background: var(--grund); }
.fehler {
  width: 100%; max-width: calc(34rem + 2 * var(--rand));
  margin: 0 auto;
  padding: calc(40px + env(safe-area-inset-top)) var(--rand) calc(64px + env(safe-area-inset-bottom));
}
/* Oben links das App-Symbol wie in der Kopfzeile der Seiten. */
.fehler-marke { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; border-radius: 12px; }
.fehler-marke img {
  width: 44px; height: 44px;
  border-radius: 22.4%;
  background: var(--nacht);
  box-shadow: 0 0 0 1px rgba(26, 24, 19, 0.10), 0 6px 14px -8px rgba(17, 16, 14, 0.6);
}
.fehler-zahl {
  display: flex; align-items: center; gap: 0.18em;
  margin: 56px 0 8px;
  font-size: clamp(72px, 24vw, 132px); font-weight: 800; line-height: 1; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
/* Ein leeres Stempelfeld: hier gibt es nichts zu stempeln. */
.fehler-zahl .feld { --d: 0.92em; }
.fehler-block { padding: 26px 0 28px; border-top: 1px solid var(--haar-dunkel); }
.fehler-block:last-child { border-bottom: 1px solid var(--haar-dunkel); }
.fehler-block h2 { font-size: 22px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.3; }
.fehler-block p { margin-top: 6px; color: var(--text-2); }
.fehler-block .pfeil-link { margin-top: 4px; margin-left: -4px; }

/* ===================================================== Weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .held-titel .feld .stempel { animation: none; opacity: 1; }
  .bt-cursor { animation: none; }
  .knopf:hover, .knopf:active { transform: none; }
  details[open] .frage-feld { animation: none; }
}

/* Adressen und E-Mail-Adressen nie trennen („club.lytchie.-com“ sah die
   deutsche Silbentrennung sonst vor). */
.adresse, .recht-text a[href^="mailto:"] { white-space: nowrap; hyphens: none; -webkit-hyphens: none; }

/* ==== quelle/stil/feier-demo.css ==== */
/* =======================================================================
   Belohnungs-Feier zum Ausprobieren — Ende von „So geht’s“ (ersetzt das
   Erklärvideo). Die Kundenkarte im Telefon nimmt den Nachbau aus „Nachher“
   (.webkarte, .wk-*); feier-demo.js lässt den zehnten Stempel fallen und
   zeigt die Feier aus feier.js IM Bildschirm des Telefons.

   Das Bauskript hängt diese Datei VOR feier.css an (alphabetisch). Die
   Regeln für das Pop-up im Rahmen sind deshalb spezifischer gebaut
   (.feier-bildschirm .feier …) — sonst gewänne feier.css.
   ======================================================================= */

.feier-demo {
  --fd-pink: #c2266e;                  /* wie der Gutschein-Block der App, 4,9:1 */
  --fd-lila: #6a33bd;                  /* wie der Geburtstags-Block, 7,6:1 */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "bild" "notiz";
  justify-items: center;
  gap: 36px;
  margin-top: 104px;
}

.feier-demo-text { grid-area: text; justify-self: stretch; }
.feier-demo-marke {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  font-size: 12.5px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--leise);
}
.feier-demo-marke svg {
  flex: none; width: 20px; height: 20px; padding: 5px 4px 5px 6px;
  border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 2px var(--ring);
  fill: var(--ring-text);
}
.feier-demo-titel {
  font-size: clamp(27px, 6.6vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 16ch;
}
.feier-demo-absatz { margin-top: 14px; color: var(--text-2); max-width: 31em; }
/* Hinweis: So läuft es auf der Web-Karte im Browser (Wallet zeigt keine Animation). */
.feier-demo-hinweis {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 18px; padding: 12px 14px 13px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--haar);
  font-size: 15px; line-height: 1.45; color: var(--text-2);
  max-width: 31em;
}
.feier-demo-hinweis svg {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  fill: none; stroke: var(--ring-text); stroke-width: 1.6; stroke-linecap: round;
}

.feier-demo-bild {
  grid-area: bild;
  display: grid; justify-items: center; gap: 22px;
  width: 100%;
}
.telefon--feier { width: min(80%, 320px); }
/* Eigene Ebene: Das Pop-up (z-index 80 in feier.css) bleibt im Bildschirm,
   die Dynamic Island des Rahmens liegt darüber. */
.feier-bildschirm { isolation: isolate; }

/* Der zehnte Stempel landet — Pop wie in der App; den Knall zeichnet feier.js. */
.feier-demo-pop { animation: stempel-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ---- Die zwei Knöpfe unter dem Telefon ---- */
.feier-demo-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.feier-demo-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 20px 0 16px;
  border: 1.5px solid var(--haar-dunkel);
  border-radius: 14px;
  background: #fff;
  color: var(--text);
  font-size: 16px; font-weight: 700; line-height: 1.15; letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(60, 45, 10, 0.06), 0 8px 18px -14px rgba(60, 45, 10, 0.5);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
}
.feier-demo-knopf svg { flex: none; width: 20px; height: 20px; }
.feier-demo-knopf--voll { --fd-farbe: var(--fd-pink); }
.feier-demo-knopf--geb { --fd-farbe: var(--fd-lila); }
.feier-demo-knopf svg path { fill: var(--fd-farbe); }
.feier-demo-knopf svg path.schnur { fill: none; stroke: var(--fd-farbe); stroke-width: 1.3; stroke-linecap: round; }
.feier-demo-knopf:hover { border-color: var(--fd-farbe); }
.feier-demo-knopf:active { transform: scale(0.98); }
/* Die gerade laufende Feier: Rand in ihrer Farbe. */
.feier-demo-knopf.laeuft { border-color: var(--fd-farbe); box-shadow: inset 0 0 0 1px var(--fd-farbe), 0 8px 18px -14px rgba(60, 45, 10, 0.5); }

.feier-demo-notiz { grid-area: notiz; max-width: 25em; text-align: center; }

@media (min-width: 900px) {
  .feier-demo {
    grid-template-columns: auto minmax(0, 24em);
    grid-template-areas: "bild text" "bild notiz";
    justify-content: center;
    justify-items: start;
    column-gap: 80px;
    row-gap: 22px;
    margin-top: 140px;
  }
  .feier-demo-text { align-self: end; }
  .feier-demo-notiz { align-self: start; text-align: left; font-size: 17px; line-height: 1.5; }
  .feier-demo-bild { width: auto; }
  /* Am Desktop größer, damit das Pop-up (echter Text, rechnet in --pt)
     lesbar bleibt: bei 360 px rund 12–14 px Schrift. */
  .telefon--feier { width: clamp(320px, 28vw, 360px); }
  /* Telefon (Höhe ≈ 2,16 × Breite) plus Knöpfe (+70 px) passen in ein
     Fenster: bei 1280 × 800 rund 313 px breit statt 358, sonst lägen die
     Knöpfe nach dem Tipp unter dem Fensterrand. Ohne svh gilt die Zeile davor. */
  .telefon--feier { width: min(clamp(320px, 28vw, 360px), max(260px, calc((100svh - 120px) * 0.46))); }
}

/* =======================================================================
   Das Pop-up im Rahmen: feier.css misst in Pixeln eines echten Handys
   (390 pt breit). Im Telefon der Website ist der Bildschirm schmaler —
   alles rechnet hier in Punkten des Rahmens (--pt), wie die Web-Karte.
   Statt der Ränder des echten Geräts (env(safe-area-…)) die Statusleiste
   des Rahmens.
   ======================================================================= */
.feier-bildschirm > .feier.im-rahmen {
  --pt: calc(100cqw / 390);
  --feier-ueberstand: calc(52 * var(--pt));
}
.feier-bildschirm > .feier.im-rahmen.feier-bild-oben { --feier-ueberstand: calc(78 * var(--pt)); }
.feier-bildschirm .feier.im-rahmen .feier-rolle {
  padding: calc(66 * var(--pt) + var(--feier-ueberstand)) calc(18 * var(--pt)) calc(40 * var(--pt));
}
.feier-bildschirm .feier.im-rahmen .feier-karte {
  max-width: calc(340 * var(--pt));
  padding: calc(62 * var(--pt)) calc(22 * var(--pt)) calc(22 * var(--pt));
  border-radius: calc(28 * var(--pt));
  gap: calc(8 * var(--pt));
  box-shadow: 0 calc(24 * var(--pt)) calc(56 * var(--pt)) rgba(30, 20, 0, 0.24), 0 0 0 1px rgba(40, 30, 10, 0.06);
}
.feier-bildschirm .feier.im-rahmen .feier-karte.mit-bild { padding-top: calc(72 * var(--pt)); }
.feier-bildschirm .feier.im-rahmen .feier-held {
  top: calc(-52 * var(--pt));
  width: calc(104 * var(--pt)); height: calc(104 * var(--pt));
  margin-left: calc(-52 * var(--pt));
}
.feier-bildschirm .feier.im-rahmen .feier-held.zeichen svg { width: calc(52 * var(--pt)); height: calc(52 * var(--pt)); }
.feier-bildschirm .feier.im-rahmen .feier-held.bild {
  top: calc(-78 * var(--pt));
  width: calc(176 * var(--pt)); height: calc(140 * var(--pt));
  margin-left: calc(-88 * var(--pt));
}
.feier-bildschirm .feier.im-rahmen .feier-kicker { font-size: max(10px, calc(12 * var(--pt))); }
.feier-bildschirm .feier.im-rahmen .feier-titel { font-size: calc(29 * var(--pt)); }
.feier-bildschirm .feier.im-rahmen .feier-text { margin-top: calc(2 * var(--pt)); font-size: max(11.5px, calc(16 * var(--pt))); }
.feier-bildschirm .feier.im-rahmen .feier-belohnung {
  margin: calc(6 * var(--pt)) 0 calc(2 * var(--pt));
  padding: calc(15 * var(--pt)) calc(16 * var(--pt));
  border-radius: calc(18 * var(--pt));
  font-size: calc(19 * var(--pt));
}
.feier-bildschirm .feier.im-rahmen .feier-hinweis { font-size: max(10.5px, calc(13 * var(--pt))); }
.feier-bildschirm .feier.im-rahmen .feier-knopf-platz { margin-top: calc(10 * var(--pt)); min-height: max(44px, calc(54 * var(--pt))); }
.feier-bildschirm .feier.im-rahmen .feier-knopf {
  min-height: max(44px, calc(54 * var(--pt)));
  padding: calc(12 * var(--pt)) calc(16 * var(--pt));
  border-radius: calc(16 * var(--pt));
  font-size: max(13px, calc(17 * var(--pt)));
}

@media (prefers-reduced-motion: reduce) {
  .feier-demo-pop { animation: none; }
  .feier-demo-knopf { transition: none; }
  .feier-demo-knopf:active { transform: none; }
}

/* ==== quelle/stil/feier.css ==== */
/* =======================================================================
   Belohnungs-Feier der Web-Karte (Betreiber, 2026-10-05).

   Pop-up mit Animation über den ganzen Bildschirm:
   • volle Karte          — Pink, wie der Gutschein-Block (Herzen)
   • Geburtstagsgeschenk  — Lila, wie der Geburtstags-Block (Luftballons)
   • Gewinn im Gewinnspiel — Orange, wie der Gewinn-Block (Konfetti)
   Dazu der Stempel-Knall: Der grüne Ring explodiert am vergebenen Stempel
   nach außen (ersetzt auf der Kundenkarte den Halo aus der Kartenmitte).

   Aufbau: .feier (füllt den Bildschirm) > Schleier · Leinwand hinten ·
   Rolle mit der Karte · Leinwand vorn. Die Teilchen zeichnet feier.js auf
   die beiden Leinwände; alles hier ist nur Rahmen und Pop-up.
   ======================================================================= */

.feier {
  --feier-akzent: #d6337f;
  --feier-akzent-text: #c2266e;
  --feier-akzent-dim: rgba(214, 51, 127, 0.08);
  --feier-akzent-rand: rgba(214, 51, 127, 0.30);
  --feier-akzent-hell: #ff9cc8;
  --feier-text: #17130c;
  --feier-text-2: #4b4538;
  --feier-leise: #70695a;
  --feier-serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  /* So weit steht das Bild oben über das Pop-up hinaus. */
  --feier-ueberstand: 52px;

  position: fixed;
  inset: 0;
  z-index: 80;
  overflow: hidden;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
/* „feier-bild-oben“ hieß im Entwurf „held-bild“ — auf der Website ist das das Foto oben. */
.feier.feier-bild-oben { --feier-ueberstand: 78px; }
/* Vorschau im Geräterahmen (nur der Entwurf): füllt den Rahmen statt das Fenster. */
.feier.im-rahmen { position: absolute; }
.feier.geburtstag {
  --feier-akzent: #7b3fd4;
  --feier-akzent-text: #6a33bd;
  --feier-akzent-dim: rgba(149, 99, 232, 0.10);
  --feier-akzent-rand: rgba(149, 99, 232, 0.36);
  --feier-akzent-hell: #c9adf8;
}
.feier.gewinn {
  --feier-akzent: #d9660b;
  --feier-akzent-text: #a84600;
  --feier-akzent-dim: rgba(217, 102, 11, 0.09);
  --feier-akzent-rand: rgba(217, 102, 11, 0.40);
  --feier-akzent-hell: #ffb46b;
}

/* ---- Schleier über der Karte ---- */
.feier-schleier {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 60% at 50% 100%, rgba(255, 156, 200, 0.34), rgba(255, 156, 200, 0) 70%),
    rgba(249, 240, 236, 0.94);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  animation: feier-ein 0.35s ease-out both;
}
.feier.geburtstag .feier-schleier {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(201, 173, 248, 0.34), rgba(201, 173, 248, 0) 70%),
    rgba(245, 241, 240, 0.94);
}
.feier.gewinn .feier-schleier {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 180, 107, 0.30), rgba(255, 180, 107, 0) 70%),
    rgba(247, 242, 232, 0.94);
}

.feier-leinwand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.feier-leinwand.hinten { z-index: 1; }
.feier-leinwand.vorn { z-index: 3; }

/* Die Rolle hält das Pop-up mittig — und scrollt, wenn es höher ist als der
   Bildschirm (kleines Handy, langer Belohnungstext): Der Knopf bleibt so
   immer erreichbar. Oben ist Platz für das Bild, das übersteht. */
.feier-rolle {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding:
    calc(16px + var(--feier-ueberstand) + env(safe-area-inset-top, 0px))
    18px
    calc(20px + env(safe-area-inset-bottom, 0px));
}

/* ---- Das Pop-up ---- */
.feier-karte {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: auto;                     /* mittig; bei Überlänge oben bündig */
  padding: 62px 22px 22px;
  border-radius: 28px;
  background: #ffffff;
  color: var(--feier-text);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow:
    0 30px 70px rgba(30, 20, 0, 0.26),
    0 0 0 1px rgba(40, 30, 10, 0.06);
  animation: feier-karte-ein 0.6s cubic-bezier(0.2, 1.25, 0.3, 1) both;
}
.feier-karte > * { margin: 0; }

/* Oben: das Bild (Geschenk, Torte, Pokal) — oder, wenn es nicht lädt, das
   gezeichnete Zeichen in einer Scheibe. */
.feier-held {
  position: absolute;
  left: 50%;
  top: -52px;
  width: 104px;
  height: 104px;
  margin-left: -52px;
  animation: feier-held-ein 0.75s cubic-bezier(0.2, 1.5, 0.35, 1) 0.2s both;
}
.feier-held.zeichen {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background:
    radial-gradient(80% 80% at 32% 26%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, var(--feier-akzent-hell), var(--feier-akzent) 62%);
  box-shadow:
    0 0 0 6px #ffffff,
    0 14px 30px rgba(30, 20, 0, 0.22);
}
.feier-held.zeichen svg { width: 52px; height: 52px; display: block; }
.feier-held.bild {
  top: -78px;
  width: 176px;
  height: 140px;
  margin-left: -88px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.feier-held.bild img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 16px rgba(30, 20, 0, 0.22));
  animation: feier-held-wippen 2.6s ease-in-out 1s infinite;
}
.feier-karte.mit-bild { padding-top: 72px; }

.feier-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--feier-akzent-text);
  animation: feier-zeile-ein 0.5s ease-out 0.55s both;
}
.feier-titel {
  font-family: var(--feier-serif);
  font-size: 29px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--feier-text);
  text-wrap: balance;
  animation: feier-zeile-ein 0.5s ease-out 0.7s both;
}
.feier-karte > .feier-text {
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--feier-text-2);
  text-wrap: balance;
  animation: feier-zeile-ein 0.5s ease-out 1.15s both;
}
/* Die Belohnung selbst — Freitext des Studios, deshalb der Umbruch. */
.feier-karte > .feier-belohnung {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 6px 0 2px;
  padding: 15px 16px;
  border-radius: 18px;
  border: 1.5px solid var(--feier-akzent-rand);
  background: var(--feier-akzent-dim);
  color: var(--feier-akzent-text);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: break-word;
  animation: feier-belohnung-ein 0.6s cubic-bezier(0.2, 1.3, 0.35, 1) 1.65s both;
}
/* Glanz, der einmal über die Belohnung läuft. */
.feier-belohnung::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 50%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  animation: feier-glanz 1.1s ease-in-out 2.2s both;
}
.feier-hinweis {
  font-size: 13px;
  line-height: 1.4;
  color: var(--feier-leise);
  text-wrap: balance;
  animation: feier-zeile-ein 0.5s ease-out 2.5s both;
}

/* Der Knopf kommt erst nach der Animation (rund fünf Sekunden). Sein
   Platz ist von Anfang an da, damit die Karte nicht springt. */
.feier-karte > .feier-knopf-platz {
  width: 100%;
  margin-top: 10px;
  min-height: 54px;
  display: flex;
}
.feier-knopf {
  width: 100%;
  min-height: 54px;
  border: none;
  border-radius: 16px;
  padding: 14px 16px;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  background: linear-gradient(180deg, var(--feier-akzent), var(--feier-akzent-text));
  box-shadow: 0 10px 24px var(--feier-akzent-rand);
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.45s ease-out, transform 0.55s cubic-bezier(0.2, 1.4, 0.35, 1);
}
.feier-knopf.bereit {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  animation: feier-knopf-puls 2.2s ease-in-out 0.8s 3;
}
.feier-knopf:active { transform: scale(0.98); }
.feier-knopf:focus-visible { outline: 3px solid var(--feier-text); outline-offset: 3px; }

/* Schließen */
.feier.geht { animation: feier-aus 0.28s ease-in forwards; pointer-events: none; }

@keyframes feier-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes feier-aus { from { opacity: 1; } to { opacity: 0; } }
@keyframes feier-karte-ein {
  0% { opacity: 0; transform: translateY(26px) scale(0.86); }
  100% { opacity: 1; transform: none; }
}
@keyframes feier-held-ein {
  0% { opacity: 0; transform: translateY(18px) scale(0.3) rotate(-14deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes feier-held-wippen {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(-2deg); }
}
@keyframes feier-zeile-ein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes feier-belohnung-ein {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: none; }
}
@keyframes feier-glanz {
  from { left: -60%; }
  to { left: 120%; }
}
@keyframes feier-knopf-puls {
  0%, 100% { box-shadow: 0 10px 24px var(--feier-akzent-rand), 0 0 0 0 var(--feier-akzent-rand); }
  50% { box-shadow: 0 10px 24px var(--feier-akzent-rand), 0 0 0 10px rgba(255, 255, 255, 0); }
}

/* Niedriger Bildschirm (kleines Handy, Querformat): alles etwas enger, damit
   der Knopf ohne Scrollen zu sehen ist. Reicht es trotzdem nicht, scrollt
   die Rolle. */
@media (max-height: 620px) {
  .feier { --feier-ueberstand: 44px; }
  .feier.feier-bild-oben { --feier-ueberstand: 60px; }
  .feier-held { top: -44px; width: 88px; height: 88px; margin-left: -44px; }
  .feier-held.zeichen svg { width: 44px; height: 44px; }
  .feier-held.bild { top: -60px; width: 140px; height: 112px; margin-left: -70px; }
  .feier-karte { padding: 52px 18px 18px; gap: 6px; }
  .feier-karte.mit-bild { padding-top: 58px; }
  .feier-titel { font-size: 24px; }
  .feier-karte > .feier-text { font-size: 15px; }
  .feier-karte > .feier-belohnung { margin: 4px 0 0; padding: 12px 14px; font-size: 17px; }
  .feier-karte > .feier-knopf-platz { margin-top: 6px; min-height: 50px; }
  .feier-knopf { min-height: 50px; padding: 12px 14px; }
}

/* Ohne Bewegung (Bedienungshilfe): kein Fliegen, kein Wippen — das Pop-up
   steht sofort da, der Knopf auch (feier.js wartet dann nicht). */
@media (prefers-reduced-motion: reduce) {
  .feier-schleier, .feier-karte, .feier-held, .feier-held.bild img, .feier-kicker, .feier-titel,
  .feier-karte > .feier-text, .feier-karte > .feier-belohnung, .feier-belohnung::after, .feier-hinweis,
  .feier-knopf.bereit { animation: none; }
  .feier-knopf { transition: none; }
  .feier-leinwand { display: none; }
}

/* =======================================================================
   Stempel-Knall: Der grüne Ring explodiert am vergebenen Stempel nach
   außen — heller Blitz, zwei Ringe, die weit aufgehen, und Funken, die
   strahlenförmig wegfliegen. feier.js (stempelKnall) setzt die Mitte
   (left/top), den Durchmesser des Kreises (--sk-d), die Richtung jedes
   Funkens (--sk-w) und bei mehreren Stempeln die Staffelung (--sk-warte).
   Die Ebene liegt über dem ganzen Bildschirm und schneidet ab, damit die
   Seite durch die fliegenden Teile nie breiter wird.
   ======================================================================= */
.stempel-knall-ebene {
  position: fixed;
  inset: 0;
  z-index: 50;                      /* unter dem Nachrichten-Pop-up (60) und der Feier (80) */
  overflow: hidden;
  pointer-events: none;
}
/* Vorschau im Geräterahmen (nur der Entwurf). */
.stempel-knall-ebene.im-rahmen { position: absolute; }
.stempel-knall {
  --sk-d: 56px;
  --sk-warte: 0ms;
  --sk-farbe: #1f9155;
  --sk-hell: #35d07f;
  position: absolute;
  width: 0;
  height: 0;
}
.stempel-knall > span {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  animation-delay: var(--sk-warte);
  animation-fill-mode: both;
  will-change: transform, opacity;
}
.sk-blitz,
.sk-ring {
  width: var(--sk-d);
  height: var(--sk-d);
  border-radius: 50%;
  box-sizing: border-box;
}
.sk-blitz {
  margin: calc(var(--sk-d) / -2) 0 0 calc(var(--sk-d) / -2);
  background: radial-gradient(circle, rgba(53, 208, 127, 0.85) 0%, rgba(53, 208, 127, 0.42) 46%, rgba(53, 208, 127, 0) 72%);
  animation: sk-blitz 0.5s ease-out;
}
/* Die Ringe wachsen über Breite und Höhe (nicht über scale): So bleibt die
   Linie schmal, statt mit dem Ring dicker zu werden. */
.sk-ring {
  transform: translate(-50%, -50%);
  border: 4px solid var(--sk-farbe);
  animation: sk-ring 0.74s cubic-bezier(0.16, 1, 0.3, 1);
}
.stempel-knall > .sk-ring.b {
  border-color: var(--sk-hell);
  animation-name: sk-ring-b;
  animation-duration: 0.95s;
  animation-delay: calc(var(--sk-warte) + 100ms);
}
.sk-funke {
  width: 20px;
  height: 5px;
  margin: -2.5px 0 0 -10px;
  border-radius: 5px;
  background: var(--sk-farbe);
  animation: sk-funke 0.78s cubic-bezier(0.14, 0.86, 0.3, 1);
}
.sk-funke.kurz {
  width: 13px;
  height: 4px;
  margin: -2px 0 0 -6.5px;
  background: var(--sk-hell);
  animation-name: sk-funke-kurz;
  animation-duration: 0.64s;
}
.stempel-knall > .sk-punkt {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--sk-hell);
  animation: sk-punkt 0.9s cubic-bezier(0.14, 0.86, 0.3, 1);
  animation-delay: calc(var(--sk-warte) + 50ms);
}
.stempel-knall > .sk-punkt.dunkel { background: var(--sk-farbe); }
@keyframes sk-blitz {
  0% { opacity: 0.95; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes sk-ring {
  0% { opacity: 1; width: calc(var(--sk-d) * 0.95); height: calc(var(--sk-d) * 0.95); border-width: 4px; }
  70% { opacity: 0.55; }
  100% { opacity: 0; width: calc(var(--sk-d) * 3.6); height: calc(var(--sk-d) * 3.6); border-width: 1px; }
}
@keyframes sk-ring-b {
  0% { opacity: 0.9; width: calc(var(--sk-d) * 0.95); height: calc(var(--sk-d) * 0.95); border-width: 3px; }
  100% { opacity: 0; width: calc(var(--sk-d) * 4.8); height: calc(var(--sk-d) * 4.8); border-width: 1px; }
}
@keyframes sk-funke {
  0% { opacity: 1; transform: rotate(var(--sk-w)) translateX(calc(var(--sk-d) * 0.5)) scaleX(1); }
  55% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--sk-w)) translateX(calc(var(--sk-d) * 1.8)) scaleX(0.45); }
}
@keyframes sk-funke-kurz {
  0% { opacity: 1; transform: rotate(var(--sk-w)) translateX(calc(var(--sk-d) * 0.5)) scaleX(1); }
  55% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--sk-w)) translateX(calc(var(--sk-d) * 1.35)) scaleX(0.45); }
}
@keyframes sk-punkt {
  0% { opacity: 1; transform: rotate(var(--sk-w)) translateX(calc(var(--sk-d) * 0.55)) scale(1); }
  60% { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(var(--sk-w)) translateX(calc(var(--sk-d) * 2.2)) scale(0.35); }
}
@media (prefers-reduced-motion: reduce) {
  .stempel-knall-ebene { display: none; }
}

/* ==== quelle/stil/held-video.css ==== */
/* =======================================================================
   Held: das Marketing-Video statt des Fotos (Betreiber, 2026-10-05).

   Video 9:16 ohne Ton, je Sprache eine Datei (der App-Bildschirm darin
   spricht die Sprache der Seite), Text NICHT eingebrannt. Die Tafeln
   darüber sind echter Text in der Sprache der Seite (held.video_t1 … t5),
   oben im Bild bei etwa 16 % der Höhe — unten bleibt das Bild frei.
   held-video.js blendet sie nach der Abspielzeit ein und aus; ohne Skript
   bleiben sie versteckt und das Video läuft einfach. Die Endtafel ist ein
   Link (nur antippbar, solange sie zu sehen ist).

   Mobil randlos unter dem Text in ganzer Höhe (9:16): Der App-Bildschirm
   schwebt in der Bildmitte, darüber ist Platz für die Tafel — ein
   Ausschnitt 4:5 hätte genau dort geschnitten. Tablet mittig und
   abgerundet, Desktop rechts neben dem Text als hohes Bild.

   Die alten Regeln für .held-bild / .held-foto / .held-bildzeile in
   seite.css greifen hier nicht mehr (eigene Klassen hv-*).
   ======================================================================= */

.held-video {
  --hv-tafel: rgba(17, 16, 14, 0.76);          /* Nacht, halb durchsichtig */
  --hv-tafel-rand: rgba(250, 245, 241, 0.12);
  --hv-schrift: var(--creme-hell);
  --hv-ruf: var(--gold);
  --hv-knopf: rgba(17, 16, 14, 0.6);
  --hv-knopf-voll: rgba(17, 16, 14, 0.82);
  --hv-start: rgba(250, 245, 241, 0.94);
  --hv-start-zeichen: var(--nacht);
  --hv-fokus: var(--nacht);                    /* Ring zweifarbig: Nacht … */
  --hv-fokus-aussen: var(--creme-hell);        /* … zwischen Creme — auf hellem wie dunklem Bild zu sehen */
  --hv-schatten: 0 1px 2px rgba(26, 24, 19, 0.08), 0 22px 44px -22px rgba(26, 24, 19, 0.42);
  margin: 40px 0 0;
}

/* ---------------------------------------------------------- Bühne */

.hv-buehne {
  position: relative;
  width: 100%;          /* bleibt randlos, auch wenn max-height greift (dann schneidet cover oben/unten) */
  aspect-ratio: 9 / 16;
  max-height: calc(100vh - 40px);
  max-height: calc(100svh - 40px);   /* kleines Handy: nie höher als der Bildschirm */
  overflow: hidden;
  background: var(--stein);
  container-type: inline-size;
}
.hv-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* ---------------------------------------------------------- Tafeln
   Alle Tafeln liegen in DERSELBEN Rasterzelle übereinander, jede mittig auf
   16 % der Bildhöhe. Eine Tafel blendet aus, bevor die nächste kommt. */

.hv-tafeln {
  position: absolute;
  left: 0;
  right: 0;
  top: 16%;
  display: grid;
  justify-items: center;
  align-items: center;
  padding: 0 6%;
  transform: translateY(-50%);
  pointer-events: none;
}
.held-video:not(.hv-js) .hv-tafeln { display: none; }

.hv-tafel {
  grid-area: 1 / 1;
  max-width: 100%;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.hv-tafel.ist-an {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.hv-satz {
  display: inline-block;
  max-width: 100%;
  padding: 0.4em 0.78em 0.44em;
  border-radius: 0.6em;
  background: var(--hv-tafel);
  box-shadow: inset 0 0 0 1px var(--hv-tafel-rand);
  color: var(--hv-schrift);
  font-family: var(--sans);
  font-size: 20px;
  font-size: clamp(16px, 5.4cqi, 25px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.012em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Endtafel: Schriftzug über „Kostenlos starten“. */
.hv-tafel--ende .hv-satz {
  display: inline-grid;
  justify-items: center;
  gap: 0.55em;
  padding: 0.95em 1.15em 0.8em;
  border-radius: 0.75em;
}
.hv-marke {
  width: 200px;
  width: min(58cqi, 260px);
  height: auto;
}
.hv-ruf {
  color: var(--hv-ruf);
  font-size: 0.86em;
  letter-spacing: 0.005em;
}
/* Die Endtafel sieht aus wie ein Aufruf — also ist sie auch einer: ein Link
   auf die Registrierung, antippbar nur, solange sie zu sehen ist. Für
   Vorlesen und Tastatur ist er unsichtbar (aria-hidden der Tafeln,
   tabindex −1); dort steht derselbe Knopf oben im Text. */
.hv-satz--link { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hv-tafel--ende.ist-an .hv-satz--link { pointer-events: auto; cursor: pointer; }
.hv-satz--link:hover .hv-ruf {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

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

/* Großer Abspielknopf — nur bei „Bewegung reduzieren“ oder wenn der
   Browser das automatische Abspielen verweigert. */
.hv-start {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--hv-start);
  color: var(--hv-start-zeichen);
  box-shadow: 0 10px 30px -10px rgba(17, 16, 14, 0.55);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hv-start svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.hv-start:hover { background: var(--creme-hell); }

/* Kleiner Knopf zum Anhalten/Abspielen (die Schleife läuft sonst endlos).
   Tippfläche 44 px, sichtbar ist ein Kreis von 36 px. */
.hv-knopf {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 4px solid transparent;
  border-radius: 50%;
  background: var(--hv-knopf);
  background-clip: padding-box;
  color: var(--hv-schrift);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease;
}
.hv-knopf:hover { background-color: var(--hv-knopf-voll); }
.hv-knopf svg { width: 16px; height: 16px; }
.hv-i-pause { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }
.hv-i-play { fill: currentColor; margin-left: 2px; }
.held-video:not(.hv-pausiert) .hv-i-play,
.held-video.hv-pausiert .hv-i-pause { display: none; }

/* Fokus: dunkler Ring zwischen zwei hellen — das Bild darunter ist mal ein
   weißer Tresen, mal die dunkle Tafel. */
.hv-start:focus-visible,
.hv-knopf:focus-visible {
  outline: 3px solid var(--hv-fokus);
  outline-offset: 2px;
  border-radius: 50%;
  box-shadow: 0 0 0 7px var(--hv-fokus-aussen);
}
.hv-start:focus-visible { box-shadow: 0 0 0 7px var(--hv-fokus-aussen), 0 10px 30px -10px rgba(17, 16, 14, 0.55); }

/* ---------------------------------------------------------- Hinweis */

.hv-hinweis {
  max-width: calc(34em + 2 * var(--rand));
  padding: 12px max(var(--rand), env(safe-area-inset-right)) 32px max(var(--rand), env(safe-area-inset-left));
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--leise);
  text-wrap: pretty;
}

/* ---------------------------------------------------------- Tablet */

@media (min-width: 640px) {
  .held-video {
    width: min(400px, calc((100vh - 80px) * 0.5625));
    width: min(400px, calc((100svh - 80px) * 0.5625));
    margin: 48px auto 0;
  }
  .hv-buehne {
    max-height: none;
    border-radius: 22px;
    box-shadow: var(--hv-schatten);
  }
  .hv-hinweis { max-width: none; padding: 14px 4px 44px; text-align: center; font-size: 13.5px; }
}

/* ---------------------------------------------------------- Desktop
   Rechts neben dem Text, oben bündig mit der zweiten Zeile der
   Überschrift (--foto-oben aus seite.css). --foto-b ist der Platz, den
   das Bild von rechts beansprucht — daran richten sich Textspalte und
   Zeilen 2–3 in seite.css aus. „Kostenlos starten“ steht links und bleibt
   bei 1280 × 800 im ersten Bild. */

@media (min-width: 1024px) {
  /* Die Höhe rechnet von der echten Oberkante aus: Kopfzeile (84 px) +
     --foto-oben; darunter bleiben 24 px Luft zum Fensterrand. So stehen
     Unterkante und Anhalten-Knopf im ersten Bild (der KI-Hinweis beginnt
     dort und darf darunter weiterlaufen — sonst würde das Video zu klein). */
  .held {
    --kopf-h: 84px;
    --unter-video: 24px;
    --vid-h: clamp(420px, calc(100vh - var(--kopf-h) - var(--foto-oben) - var(--unter-video)), 720px);
    --vid-h: clamp(420px, calc(100svh - var(--kopf-h) - var(--foto-oben) - var(--unter-video)), 720px);
    --vid-b: calc(var(--vid-h) * 0.5625);
    --foto-b: calc(var(--vid-b) + var(--text-links) + 16px);
    min-height: calc(var(--foto-oben) + var(--vid-h) + 96px);
  }
  .held-video {
    position: absolute;
    top: var(--foto-oben);
    right: var(--text-links);
    width: var(--vid-b);
    margin: 0;
  }
  .hv-buehne { border-radius: 24px; }
  .hv-hinweis { padding: 14px 4px 0; text-align: left; font-size: 13.5px; }
}

/* ---------------------------------------------------------- Weniger Bewegung
   Die Tafeln blenden nur noch über (kein Hereingleiten). */

@media (prefers-reduced-motion: reduce) {
  .hv-tafel,
  .hv-tafel.ist-an { transform: none; transition: opacity 0.2s linear; }
  .hv-knopf { transition: none; }
}


/* Ton-Knopf links neben dem Pause-Knopf (gleiche Form). */
.hv-ton {
  position: absolute; right: 56px; bottom: 8px; width: 44px; height: 44px; padding: 0;
  border: 4px solid transparent; border-radius: 50%; background: var(--hv-knopf); background-clip: padding-box;
  color: var(--hv-schrift); display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease;
}
.hv-ton:hover { background-color: var(--hv-knopf-voll); }
.hv-ton svg { width: 18px; height: 18px; }
.hv-ton svg path { fill: currentColor; }
.hv-ton svg .hv-strich { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.held-video:not(.hv-laut) .hv-i-laut,
.held-video.hv-laut .hv-i-stumm { display: none; }
.held-video.hv-ruhend .hv-ton { right: 8px; }

/* ==== quelle/stil/kopf.css ==== */
/* =======================================================================
   Kopf, Sprachwahl, Platz der Marke (Betreiber, 2026-10-05):
   „Sprachauswahl ganz oben, als Kreis wie auf der Anmeldeseite der Web-App.
   Das App-Symbol ersetzt das Logo oben links. Das Logo kommt an anderer
   Stelle noch einmal vor.“

   - Oben links die Nacht-Kachel (App-Symbol), abgerundet wie auf dem
     Home-Bildschirm.
   - Ganz oben rechts die Flagge der Sprache im Kreis — weißer Ring und
     Haarlinie wie das Foto im Abschluss (das Stempelfeld der Seite). Ein
     Tipp klappt die Liste auf: runde Flagge + Name in eigener Schreibweise,
     die aktuelle mit Haken (<details>, ohne Skript bedienbar).
   - Die Wortmarke steht über der Überschrift im Abschluss und groß in der
     Fußzeile.

   Diese Datei kommt im Bündel NACH seite.css und überschreibt dort, was
   Kopf und Fuß betrifft (seite.css bleibt unverändert).
   ======================================================================= */

/* Die Wortmarke (1105 × 162) hat links 22 px Luft im Bild — so viel wird
   sie nach links gerückt, damit die Schrift mit dem Text darunter fluchtet. */
:root { --marke-luft: -0.0199; }

/* ================================================================ Kopf */

.kopf { z-index: 30; }
.kopf-innen { gap: 10px; }

/* Tippfläche mindestens 44 × 44 — das Symbol bleibt am Handy 42 px groß. */
.kopf-marke { min-width: 44px; border-radius: 12px; }
.kopf-marke:focus-visible { border-radius: 12px; }
.kopf-marke .kopf-icon {
  width: 42px; height: 42px;
  border-radius: 22.4%;                 /* wie eine Kachel auf dem iPhone */
  background: var(--nacht);
  box-shadow: 0 0 0 1px rgba(26, 24, 19, 0.10), 0 6px 14px -8px rgba(17, 16, 14, 0.6);
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.kopf-marke:hover .kopf-icon { transform: translateY(-1px); }
.kopf-marke:active .kopf-icon { transform: scale(0.96); }

@media (min-width: 900px) {
  .kopf-innen { gap: 12px; }
  .kopf-marke .kopf-icon { width: 44px; height: 44px; }
  /* Die drei Seitenlinks rücken vom Knopf ab, die Flagge sitzt ganz außen. */
  .kopf-nav { margin-right: 10px; }
}

/* --------------------------------------------------- Sprachwahl (Kreis) */

.sprachmenue { position: relative; flex: none; margin-right: -2px; }

.sprachmenue-knopf {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sprachmenue-knopf::-webkit-details-marker { display: none; }
.sprachmenue-knopf::marker { content: ""; }
.sprachmenue-knopf:focus-visible { outline-offset: 2px; border-radius: 50%; }

/* Die Flagge füllt den Kreis ganz (mittig beschnitten, wie in der App). */
.sprachmenue-kreis {
  position: relative; display: block;
  width: 38px; height: 38px;
  border-radius: 50%; overflow: hidden;
  background: var(--nacht);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--haar-dunkel), 0 6px 12px -6px rgba(60, 45, 10, 0.45);
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s;
}
.sprachmenue-kreis img,
.sm-flagge img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Feine innere Kante: helle Streifen (Union Jack) laufen sonst in den Ring. */
.sprachmenue-kreis::after,
.sm-flagge::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(26, 24, 19, 0.16);
  pointer-events: none;
}
.sprachmenue-knopf:hover .sprachmenue-kreis { transform: scale(1.04); }
.sprachmenue-knopf:active .sprachmenue-kreis { transform: scale(0.95); }
.sprachmenue[open] .sprachmenue-kreis {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--gold), 0 6px 12px -6px rgba(60, 45, 10, 0.45);
}

/* Die Liste hängt rechtsbündig unter dem Kreis, mit einer kleinen Spitze. */
.sprachmenue-liste {
  position: absolute; top: calc(100% + 12px); right: -4px; z-index: 40;
  width: max-content; min-width: 214px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--haar);
  border-radius: 18px;
  box-shadow: 0 26px 48px -26px rgba(60, 45, 10, 0.5), 0 4px 14px rgba(60, 45, 10, 0.07);
  transform-origin: calc(100% - 26px) 0;
  animation: sprachmenue-auf 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.sprachmenue-liste::before {
  content: ""; position: absolute; top: -7px; right: 20px;
  width: 12px; height: 12px;
  background: #fff;
  border-left: 1px solid var(--haar); border-top: 1px solid var(--haar);
  border-top-left-radius: 3px;
  transform: rotate(45deg);
}
@keyframes sprachmenue-auf {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
}

.sprachmenue-liste ul { display: grid; gap: 2px; }
.sprachmenue-liste a {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 8px 12px 8px 10px;
  border-radius: 12px;
  font-size: 16px; font-weight: 600; line-height: 1.2;
  color: var(--text-2); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sprachmenue-liste a:hover { background: var(--grund-2); color: var(--text); }
.sprachmenue-liste a:focus-visible { outline-offset: -3px; border-radius: 12px; }
.sprachmenue-liste a[aria-current] { background: var(--grund-3); color: var(--text); font-weight: 800; }

.sm-flagge {
  position: relative; flex: none;
  width: 28px; height: 28px;
  border-radius: 50%; overflow: hidden;
  background: var(--nacht);
}
.sm-name { flex: 1; }
/* Haken in Stempel-Grün (als Schrift, 5:1 auf hellem Grund). */
.sm-haken {
  flex: none; width: 18px; height: 18px; margin-left: 8px;
  fill: none; stroke: var(--ring-text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ================================================================== Fuß */

/* Die Wortmarke schließt die Seite ab: unter Beschreibung, Links und
   Sprachwahl, so breit wie die Spalte (höchstens so breit, wie das Bild auf
   einem Retina-Bildschirm scharf bleibt). Sie steht nur hier — eine zweite
   über „Fang heute an.“ stand am hohen Handy im selben Bildschirm. */
.fuss-marke p:first-child { margin-top: 0; }
.fuss-wortmarke { margin-top: 48px; }
.fuss-wortmarke img {
  width: min(100%, 552px); height: auto;
  margin-left: calc(min(100%, 552px) * var(--marke-luft));
}

@media (min-width: 900px) {
  .fuss-wortmarke { margin-top: 72px; }
}

/* ===================================================== Weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
  .sprachmenue-liste { animation: none; }
  .kopf-marke .kopf-icon,
  .sprachmenue-kreis { transition: none; }
  .kopf-marke:hover .kopf-icon,
  .kopf-marke:active .kopf-icon,
  .sprachmenue-knopf:hover .sprachmenue-kreis,
  .sprachmenue-knopf:active .sprachmenue-kreis { transform: none; }
}

/* ==== quelle/stil/vorteile.css ==== */
/* =======================================================================
   Warum Lytchie Club Card — zwischen „Am Tresen“ und „Ab Pro“.
   Dunkel wie der Wallet-Pass (#11100e); jeder Vorteil trägt sein Zeichen
   in einem weißen Stempel mit grünem Ring. Mobil eine Spalte, ab 720 px
   zwei, ab 1100 px drei.
   ======================================================================= */

.vorteile {
  --v-text: #f4f0e8;
  --v-text-2: rgba(244, 240, 232, 0.76);   /* ≈ 10:1 auf Nacht */
  --v-haar: rgba(244, 240, 232, 0.14);
  background: var(--nacht);
  color: var(--v-text);
  padding: var(--abstand) 0;
  overflow: clip;
}
.vorteile .ueberzeile { color: rgba(244, 240, 232, 0.7); }
.vorteile .titel { color: var(--v-text); }
.vorteile-absatz {
  margin-top: 22px; max-width: 32em;
  font-family: var(--serif);
  font-size: clamp(19px, 4.8vw, 23px); line-height: 1.4;
  color: var(--v-text);
  text-wrap: pretty;
}

.vorteile-liste { display: grid; margin-top: 48px; border-top: 1px solid var(--v-haar); }
.vorteil {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  column-gap: 18px;
  align-content: start;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--v-haar);
}
.vorteil > :not(.vorteil-zeichen) { grid-column: 2; }
.vorteil h3 { font-size: 19px; font-weight: 750; line-height: 1.3; letter-spacing: -0.015em; color: var(--v-text); }
.vorteil p { margin-top: 6px; color: var(--v-text-2); max-width: 30em; }

/* Das Zeichen im Stempel. */
.vorteil-zeichen {
  grid-column: 1; grid-row: 1 / span 3;
  display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--ring), 0 0 0 4px rgba(74, 212, 137, 0.16);
  color: var(--tinte);
}
.vorteil-zeichen svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Der Schrägstrich über den Funkwellen bekommt eine weiße Lücke, sonst liest
   sich das Zeichen klein als Gekritzel. */
.vorteil-zeichen svg .luecke { stroke: #fff; stroke-width: 5; }
.vorteil-zeichen--null {
  font-family: var(--zahl); font-size: 14px; font-weight: 800; letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Branchen als kleine Marken. */
.branchen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.branchen li {
  padding: 5px 12px 6px;
  border-radius: 999px;
  border: 1px solid rgba(244, 240, 232, 0.26);
  font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--v-text);
  white-space: nowrap;
}

@media (min-width: 720px) {
  .vorteile-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
}
@media (min-width: 1100px) {
  .vorteile-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 56px; margin-top: 64px; }
  .vorteil { padding: 30px 0 34px; }
}

/* ==== vom Bauskript: Breite der längsten Zeile der großen Überschrift je Sprache ==== */
html[lang="de"] { --held-mass: 8.93; }
html[lang="en"] { --held-mass: 7.11; }
html[lang="vi"] { --held-mass: 6.5; }