/* =======================================================================
   Kundenseiten: Beitritt (/join), Web-Karte (/card), Plakat (/poster),
   Rechtsseiten und die Landeseite des Scan-Handys (/kasse).

   Seit 2026-09-19 im neuen Design der Team-App — aber NUR hell: die
   Kundenwelt ist warmes Creme mit weißen Karten, Serifen-Titeln, einem
   ruhigen Gold als Akzent und gezeichneten Symbolen statt Emojis.
   Keinen Dunkelmodus (Betreiber-Vorgabe): die Karte sieht auf jedem
   Handy gleich aus.

   MASSSYSTEM — eine Leiter, überall dieselbe:
      4px  Wortabstand (Symbol zu Text, Unterzeile an ihrem Titel)
      8px  eng Zusammengehöriges (Beschriftung → Eingabefeld)
     12px  Innenabstand einer Karte (Titel → Inhalt, Zeile → Zeile)
     16px  Abstand ZWISCHEN allen Blöcken der Seite (.page gap)
     18px  Innenrand jeder Karte
     24px  Seitenkopf und Abschnitte langer Texte
   Die Abstände kommen so weit wie möglich aus `gap`, nicht aus Rändern
   einzelner Elemente: Zwei Ränder addieren sich sonst zu einer Lücke,
   die niemand wollte — genau das war der ungleiche Rhythmus davor.
   Zeilenhöhen sind fest: Fließtext 1.45, Kleingedrucktes 1.4, lange
   Rechtstexte 1.6.

   Die Stempelkreise kommen aus stempel.css (geteilt mit der Team-App)
   und bekommen hier über die --dot-*-Variablen ihre helle Umgebung.
   ACHTUNG: stempel.css wird NACH card.css geladen. Wer dort Gesetztes
   überschreiben will (.standzeile, .stand, .stempel-halo), braucht
   deshalb einen Vorfahren im Selektor — sonst gewinnt die spätere
   Datei bei gleicher Spezifität.
   ======================================================================= */

:root {
  color-scheme: light;

  /* ---- Flächen ---- */
  --bg: #f6f1e6;          /* warmes Creme, die Kundenwelt */
  --card: #ffffff;        /* Karten liegen weiß auf dem Creme */
  --card-2: #f8f3e8;      /* ruhige Innenfläche (Hinweiskästen) */
  --line: rgba(40, 30, 10, 0.08);        /* Haarlinie am Kartenrand */
  --line-strong: rgba(40, 30, 10, 0.16); /* Ränder, die tragen müssen */
  --schatten: 0 8px 24px rgba(60, 45, 10, 0.08);

  /* ---- Schrift ---- */
  --text: #17130c;
  --text-2: #4b4538;
  /* Grau für Unterzeilen. Bewusst etwas dunkler als der Entwurf
     (#7b7464 käme auf Creme nur auf 4.1:1) — so liest es 4.8:1. */
  --muted: #70695a;
  /* Titelschrift wie in der Team-App: eine Serifenschrift des Systems,
     nichts Geladenes (CSP, kein Springen, alle Zeichen der 19 Sprachen —
     auch die vietnamesischen Tonzeichen: „New York" und „Noto Serif"
     decken sie ab, „Palatino Linotype" auf Windows ebenso). */
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, "Noto Serif", "Times New Roman", serif;

  /* ---- Gold ----
     Zwei Stufen: --gold für Symbole, Ränder und Flächen (Grafik, 3:1
     genügt), --gold-text überall dort, wo Gold LESETEXT ist (4.8:1). */
  --gold: #9a7718;
  --gold-text: #836612;
  --gold-dim: rgba(154, 119, 24, 0.10);
  --gold-rand: rgba(154, 119, 24, 0.22);
  --gold-glow: rgba(201, 162, 50, 0.28);

  /* ---- Farbcode des Produkts ----
     Vollkarte PINK, Geburtstagsgeschenk LILA — überall gleich (Karte,
     Scan-Bereich, Wallet). Die Textstufe ist je eine Spur dunkler,
     damit auch 14px fett auf der getönten Fläche 4.5:1 erreichen. */
  --pink: #d6337f;
  --pink-text: #c2266e;
  --pink-dim: rgba(214, 51, 127, 0.08);
  --lila: #7b3fd4;
  --lila-rand: #9563e8;
  --lila-dim: rgba(149, 99, 232, 0.10);
  /* Extra-Geschenk BLAU (seit 2026-09-21) — klar getrennt vom Pink der
     vollen Karte und vom Lila des Geburtstags: ein kühler, satter Ton,
     kein Violett. Die Textstufe liest auf der getönten Fläche 4.8:1. */
  --blau: #1f6fd0;
  --blau-text: #12569f;
  --blau-rand: rgba(31, 111, 208, 0.35);
  --blau-dim: rgba(31, 111, 208, 0.08);
  /* Freunde werben GRÜN (seit 2026-09-21) — das Grün des Stempels, auf Creme
     eine Spur dunkler (wie der Bestätigungs-Halo): Es geht um Stempel, und
     Grün ist die ruhigste der Produktfarben. Die Textstufe liest 5.4:1. */
  --gruen: #1f9155;
  --gruen-text: #17744a;
  --gruen-rand: rgba(31, 145, 85, 0.35);
  --gruen-dim: rgba(31, 145, 85, 0.08);
  --gruen-glow: rgba(31, 145, 85, 0.24);
  /* Gewinnspiel ORANGE (seit 2026-09-21, nur Max) — warm und satt, klar
     getrennt vom Gold der Marke (gelblich) und vom Rot für Gelöschtes. Die
     Textstufe liest auf der getönten Fläche 4.8:1. */
  --orange: #d9660b;
  --orange-text: #a84600;
  --orange-rand: rgba(217, 102, 11, 0.40);
  --orange-dim: rgba(217, 102, 11, 0.09);
  --orange-kachel: rgba(217, 102, 11, 0.13);
  /* Bühne der Live-Ziehung (seit 2026-09-23) — Nacht und Gold der Marke,
     dieselben Töne wie in der App der Inhaberin: Beide Bildschirme zeigen
     dasselbe, die Inhaberin darf es abfilmen. */
  --ziehung-nacht: #11100e;
  --ziehung-gold: #d4af37;
  /* Fläche hinter dem Studio-Logo (seit 2026-09-24) — dieselben zwei Farben
     wie `FARBEN` in src/logoflaeche.js: Nacht des Passes, Creme der Marke. */
  --logo-flaeche-dunkel: #11100E;
  --logo-flaeche-hell: #FAF5F1;
  --rot: #b3201a;
  --rot-text: #a82019;
  --rot-dim: rgba(198, 40, 34, 0.08);
  /* „Zuletzt eingelöst" (seit 2026-09-23) trägt bewusst KEINE Produktfarbe:
     Es ist Verlauf, kein Angebot. Die Haken-Kachel ist ein neutrales Grau. */
  --verlauf-kachel: rgba(40, 30, 10, 0.05);
  --verlauf-rand: rgba(40, 30, 10, 0.14);

  /* Vollkarten-Show auf Creme: kräftiges Pink, warme Glut. */
  --voll-pink: #d6337f;
  --voll-gold: #b8912e;
  --voll-glut: #f3e2b8;

  --radius: 22px;      /* Karten */
  --radius-sm: 16px;   /* Knöpfe, Felder, Balken */
  --radius-xs: 12px;   /* Symbol-Kacheln, kleine Kästen */

  /* Stempelkreise auf hellem Grund (Vorgaben in stempel.css sind dunkel).
     Volle Stempel: weiße Füllung, grüner Ring, schwarze Schrift. */
  --dot-leer-bg: #f2ecdf;
  --dot-leer-rand: rgba(40, 30, 10, 0.10);
  --dot-leer-schatten: inset 0 3px 7px rgba(60, 45, 10, 0.10);
  --dot-voll-bg: #ffffff;
  --dot-voll-schrift: #111111;
  --dot-voll-schrift-schatten: none;
  --dot-voll-schatten: 0 4px 10px rgba(60, 45, 10, 0.14);
  /* Frisch vergebener Stempel blinkt dreimal (stempel.css, .dot.neu):
     Auf dem weißen Kreis bringt ein heller Filter nichts — er wird zart
     grün, der Rand im Grün des Halos (.stampcard .stempel-halo). */
  --dot-blink: rgba(31, 145, 85, 0.6);
  --dot-blink-bg: #b9edd1;
  --dot-blink-filter: saturate(1.35);
  --stand-farbe: #17130c;
}

/* =======================================================================
   Grundgerüst
   ======================================================================= */

* { box-sizing: border-box; }

/* Ohne diesen Reset gewinnt jede eigene display-Regel (etwa .btn) gegen
   das hidden-Attribut — der Push-Knopf stand dadurch immer sichtbar da,
   auch ohne Klick-Handler. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* Kein Doppeltipp-Zoom — auch in der Web-App auf dem Homescreen. */
  touch-action: manipulation;
}

button, a, .dot { touch-action: manipulation; }
/* 16px hält den iOS-Zoom fern; die Schrift erben, sonst zeigt das
   Datumsfeld („tt.mm.jjjj") die Festbreitenschrift des Browsers. */
input, select, textarea, button { font-family: inherit; }
input, select, textarea { font-size: 16px; }

/* Tastaturweg sichtbar halten — die Kundenseiten sind oft der erste
   Kontakt, und ein unsichtbarer Fokus ist eine Sackgasse. Seit der
   UX-Runde 2026-09-29 3px und etwas dunkler (auf dem Creme las das
   helle Gold unter 3:1). Die Eingabefelder zeigen ihren Fokus weiter
   über den goldenen Rand samt Schein (.formular input:focus). */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--gold-text);
  outline-offset: 2px;
}
/* Auf dem schwarzen Nachrichten-Kasten braucht der Rahmen die helle
   Goldfarbe — der Link liegt dort IM Schwarzen. Der schwarze Apple-Knopf
   behält dagegen das dunkle Gold: Sein Rahmen liegt mit outline-offset
   AUSSERHALB des Knopfs auf der weißen Karte, und dort läse das helle
   Gold nur 1,6:1 (Gegenprüfung der UX-Runde). */
.card.nachricht a:focus-visible { outline-color: #e4c878; }

body { display: flex; justify-content: center; min-height: 100vh; min-height: 100dvh; }

/* Die Seite ist EINE Spalte mit EINEM Abstand: 16px zwischen allen
   Blöcken. Kein Block bringt eigene Ränder mit. */
.page {
  width: 100%;
  max-width: 440px;
  /* Oben der Abstand zur Uhr des iPhones: In Safari ist
     `safe-area-inset-top` null (die Leiste gehört dem Browser), in der
     nativen Team-App liegt die Seite aber bis unter die Statusleiste —
     dort verdeckte die Uhr den Knopf „‹ Zurück" der Teilnahmebedingungen
     (am iPhone gesehen, 2026-09-23). Die Kundenseiten tragen
     `viewport-fit=cover`, sonst wäre der Wert immer null. */
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Ab 380px ein etwas großzügigerer Rand; bei 320px bleiben es 16px,
   damit nichts seitlich herausläuft. */
@media (min-width: 380px) {
  .page { padding-left: 20px; padding-right: 20px; }
}
/* Kein Block bringt eigene Ränder mit — sonst addiert sich der
   Standard-Rand eines <p> (1em) zu den 16px der Spalte, und zwei
   gleich aussehende Blöcke stehen verschieden weit auseinander. */
.page > * { margin: 0; }
/* Leere Blöcke bekämen über `gap` trotzdem Platz — die Lücke wäre
   doppelt so groß wie überall sonst. Betrifft #vouchers, solange keine
   Vollkarte und kein Geburtstagsgeschenk offen ist. */
.page > .stack:empty { display: none; }
/* Blöcke, die gestapelt auf Seitenebene stehen (Geburtstagsgeschenk über
   voller Karte), halten denselben Abstand wie alle anderen Seitenblöcke —
   sonst stünden genau diese beiden enger als der Rest. */
.page > .stack { gap: 16px; }

/* =======================================================================
   Kleine Helfer
   ======================================================================= */

.muted { color: var(--muted); }
.small { font-size: 13px; line-height: 1.4; }
.center { text-align: center; }
.big { font-size: 17px; font-weight: 700; }
/* Senkrechte Reihe gleich großer Blöcke (Wallet-Knöpfe, Gutscheine). */
.stack { display: flex; flex-direction: column; gap: 12px; }

/* =======================================================================
   Sprachwahl — dezent oben rechts. Mit drei Sprachen war das eine Leiste
   „DE · EN · ES"; mit 19 Sprachen klappt ein <details> eine Liste auf.
   Kein JavaScript nötig (strikte CSP), kein Formular, funktioniert auch
   mit abgeschaltetem Skript. Die Sprachen stehen in ihrer eigenen
   Schreibweise („Ελληνικά", nicht „EL") — wer sie sucht, kennt sie so.
   ======================================================================= */

.langwahl {
  align-self: flex-end;
  position: relative;
  z-index: 20;
  font-size: 13px;
  font-weight: 700;
}
/* Der Auslöser ist ein stiller Umriss-Knopf — 44px hoch, damit der
   Daumen ihn sicher trifft. */
.langwahl summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--gold-text);
  letter-spacing: 0.04em;
  user-select: none;
}
.langwahl summary::-webkit-details-marker { display: none; }
.langwahl summary::after { content: '▾'; color: var(--muted); font-size: 10px; }
.langwahl details[open] summary::after { content: '▴'; }
.langwahl ul {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(60, 45, 10, 0.16);
  display: grid;
  grid-template-columns: repeat(2, minmax(124px, 1fr));
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}
.langwahl li a,
.langwahl li .on {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
}
.langwahl li a:hover { background: var(--gold-dim); }
.langwahl li .on { color: var(--gold-text); font-weight: 700; background: var(--gold-dim); }

/* =======================================================================
   Markenkopf — Logo oder Studioname in Serifen, darunter eine kleine
   gesperrte Zeile („CLUBKARTE · ANNA · KUNDE #12").
   ======================================================================= */

.brandhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.brandhead h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.kopfzeile {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.kopfzeile span { color: var(--gold); }

/* Das Salon-Logo ist eine Wortmarke (breit, transparent) und steht
   deshalb frei — ohne Rahmen, ohne Beschnitt. `contain` statt `cover`,
   damit auch quadratische Logos anderer Salons unversehrt bleiben. */
.salonlogo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(280px, 78%);
  max-height: 84px;
  margin: 0;
  object-fit: contain;
}
.salonlogo.small { max-width: min(220px, 66%); max-height: 58px; }

/* Fläche hinter dem Logo (seit 2026-09-24, src/logoflaeche.js): Die
   Kundenseiten sind Creme — ein weißes Logo verschwände darauf. Es steht dann
   in einer kleinen Nacht-Kachel. Die helle Fläche (nur, wenn die Inhaberin
   sie ausdrücklich wählt) ist auf der hellen Karte bloß ein feiner Rahmen —
   bewusst. `vertical-align` nimmt dem Aushang die Unterlänge unter der
   Kachel (dort steht sie in einer Textzeile, hier im Flex-Kopf zählt es
   nicht). */
.logo-flaeche {
  display: inline-block;
  box-sizing: content-box;
  vertical-align: top;
  padding: 10px 16px;
  border-radius: 14px;
  line-height: 0;
}
.logo-flaeche-dunkel { background: var(--logo-flaeche-dunkel); }
.logo-flaeche-hell { background: var(--logo-flaeche-hell); border: 1px solid var(--line-strong); }
/* Das Bild behält seine Maße. Seine Prozent-Grenze rechnete in der Kachel
   gegen die Kachel, die sich selbst nach dem Bild richtet — das Logo
   schrumpfte und säße links in seiner Kachel. Deshalb trägt die KACHEL die
   Grenze des Bildes (content-box: der Innenrand kommt dazu, das Bild bekommt
   genau so viel Platz wie ohne Fläche), und das Bild füllt höchstens sie.
   Wer die Grenzen von .salonlogo oder .posterlogo ändert, ändert sie hier
   mit. */
.logo-flaeche:has(> .salonlogo) { max-width: min(280px, 78%); }
.logo-flaeche:has(> .salonlogo.small) { max-width: min(220px, 66%); }
.logo-flaeche:has(> .posterlogo) { max-width: min(380px, 82%); }
.logo-flaeche > .salonlogo,
.logo-flaeche > .salonlogo.small,
.logo-flaeche > .posterlogo { max-width: 100%; }
/* Aushang: Unten folgt die Zeile direkt unter dem Logo — an der Kante der
   Kachel klebte sie sonst (der Kopf der Karte hat dafür seinen `gap`). Oben
   rückt die Kachel unter der Sprachwahl hervor: Auf dem Handy reicht die
   Pille oben rechts 10px in das Blatt, über einem durchsichtigen Logo sah
   das niemand, über der Nacht-Kachel schon. */
.posterblatt > .logo-flaeche { margin: 12px 0 10px; }

/* =======================================================================
   Karten — weiße Fläche, Haarlinie, weicher Schatten. Jede Karte ist
   selbst eine Spalte mit 12px Abstand; ihre Kinder bringen keine
   eigenen Ränder mit (Ausnahme: die langen Rechtstexte, die im
   klassischen Textfluss bleiben).
   ======================================================================= */

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--schatten);
}
.card:not(.recht) > * { margin: 0; }
.card.intro { text-align: center; }

/* Kartentitel: Symbol-Kachel + fette Zeile. Steht auch allein (etwa als
   Dankeszeile nach der Umfrage). */
.formtitel {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  /* Lange Wörter (fi „Syntymäpäivälahja", de Zusammensetzungen) umbrechen
     statt über den Kartenrand zu laufen — aber nur, wo ein Wort allein
     nicht in die Zeile passt (UX-Runde 2026-09-29). */
  overflow-wrap: anywhere;
}
/* Symbol-Kachel wie in der Team-App, nur kleiner: neben einer 17px-Zeile
   wären 48px eine Fläche, kein Zeichen. */
.ico {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-xs);
  background: var(--gold-dim);
  border: 1px solid var(--gold-rand);
  color: var(--gold);
  display: grid;
  place-items: center;
}
.ico svg { display: block; width: 21px; height: 21px; }

/* Belohnung des Studios auf der Beitrittsseite — der eine Satz, wegen
   dem die Kundin die Karte anlegt. */
.belohnung {
  background: var(--gold-dim);
  border: 1px solid var(--gold-rand);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  color: var(--gold-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  /* Der Belohnungstext ist Freitext des Studios (bis 120 Zeichen) —
     ein langes Wort darf die Karte nicht sprengen. */
  overflow-wrap: break-word;
}

/* =======================================================================
   Knöpfe — Hauptweg gold gefüllt mit dunkler Schrift, Nebenweg still
   mit Umriss. 52px hoch: sicher zu treffen, auch mit dem Daumen.
   ======================================================================= */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.08s cubic-bezier(0.22, 1, 0.36, 1);
  /* Lange Übersetzungen („Hozzáadás az Apple Wallethez", „Χρήση στο
     browser") brechen im Knopf um, statt ihn zu sprengen. */
  overflow-wrap: anywhere;
}
/* Der Text neben einem Zeichen darf schrumpfen, sonst schöbe ein langes
   Wort das Zeichen aus dem Knopf. */
.btn > span:not(.knopf-zeichen) { min-width: 0; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.big { min-height: 56px; font-size: 17px; }
.btn.gold {
  background: linear-gradient(180deg, #e2c35a, #c9a232);
  color: #1a1500;
  box-shadow: 0 6px 22px var(--gold-glow);
}
.btn.ghost {
  background: var(--card);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
/* Wallet-Knöpfe behalten ihr amtliches Aussehen: Apple schwarz,
   Google weiß mit Rand. */
.btn.wallet.apple { background: #000; border: 1px solid #444; color: #fff; }
.btn.wallet.google { background: #fff; color: #1a1a1a; border: 1px solid var(--line-strong); }
/* Zeichen + Text nebeneinander, mittig — der Apfel nimmt die Schriftfarbe
   des Knopfs (weiß auf Schwarz), das G bringt seine vier Farben mit. */
.btn.wallet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn.wallet .wallet-zeichen { flex: none; width: 22px; height: 22px; display: block; }
/* Der Apfel sitzt optisch etwas hoch (der Stiel zählt zur Höhe). */
.btn.wallet.apple .wallet-zeichen { width: 21px; height: 21px; margin-top: -3px; }
.btn.wallet.big .wallet-zeichen { width: 24px; height: 24px; }
.btn.wallet.apple.big .wallet-zeichen { width: 23px; height: 23px; }
/* „Im Browser nutzen" (UX-Runde 2026-09-29; vorher „Ohne Wallet
   fortfahren" in Link-Optik, blass und unterstrichen — leicht zu
   übersehen): ein richtiger zweiter Knopf, aber klar nachrangig zu den
   Wallet-Knöpfen — ruhige Creme-Fläche statt Weiß mit Rand (der
   Google-Knopf ist weiß mit Rand, beide sähen sonst gleich aus), etwas
   niedriger, kleinere Schrift. Weiterhin ein echter Absende-Knopf (die
   Beitrittsseite hat kein JavaScript). */
.btn.zweitweg {
  background: var(--card-2);
  border: 1px solid var(--line);
  min-height: 48px;
  padding: 12px 16px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 650;
}
/* Gezeichnetes Zeichen vor dem Text eines Knopfs (Browserfenster, Glocke) —
   wie der Apfel und das G auf den Wallet-Knöpfen. Farbe vom Knopf. */
.btn .knopf-zeichen { flex: none; display: block; width: 21px; height: 21px; }
.btn .knopf-zeichen svg { display: block; width: 100%; height: 100%; }
/* Frage, Erklärsatz und die Knöpfe „Wo speicherst du deine Karte?" gehören
   zusammen: eine Gruppe im 12px-Takt der Karte. */
.speicherwahl {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.speicherwahl > * { margin: 0; }
.wahl-titel {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
/* Der gefährliche Knopf trägt als einziger auf den Kundenseiten Rot. */
.btn.gefahr {
  background: var(--rot);
  color: #fff;
  box-shadow: 0 6px 20px rgba(179, 32, 26, 0.22);
}
/* Kurze Meldung unter einem Knopf (card.js) — window.alert ist tabu. */
.btn-hinweis { text-align: center; }

/* =======================================================================
   Stempelkarte — die Kreise selbst kommen aus stempel.css (geteilt mit
   der Team-App). Hier nur die Bühne drumherum.
   ======================================================================= */

.stampcard { text-align: center; position: relative; overflow: hidden; }
/* Vor dem ersten Zeichnen (und ohne JavaScript) sind Kreise und
   Zielzeile leer — ohne diese Regel stünde die leere Hülle als
   12px-Lücke in der Karte. Bewusst NUR diese beiden: Halo, Schockwelle
   und Pink-Flut sind ebenfalls leere <div>, müssen aber sichtbar sein. */
.stampcard .dots:empty,
.stampcard .rewardline:empty { display: none; }
/* stempel.css bringt der Standzeile 12px Rand mit; hier macht das den
   Abstand doppelt, weil die Karte schon 12px gap hat. */
.stampcard .standzeile { margin-top: 0; gap: 10px; }
/* Der große Zählstand ist die Schlagzeile der Karte — in Serifen wie
   die Bildschirmtitel der Team-App. */
.stampcard .stand {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.stampcard .standzeile .muted {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Die Zielzeile („Bei 10 Stempeln: …") ist eine ruhige Unterzeile. Sie
   trägt den Freitext des Studios, deshalb der Umbruch. */
.rewardline {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  overflow-wrap: break-word;
}
/* Die Zeile sagt seit der UX-Runde 2026-09-29, wie viele Stempel NOCH
   fehlen — sie ist die zweite Hauptaussage der Karte und steht deshalb
   in der Textfarbe statt grau. */
.stampcard .rewardline {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
}
/* Der Bestätigungs-Halo braucht auf Creme ein dunkleres Grün. Mit
   Vorfahre im Selektor, sonst gewinnt stempel.css (später geladen). */
.stampcard .stempel-halo { border-color: #1f9155; }

/* =======================================================================
   Nach der Kartenerstellung und „Karte speichern" (UX-Runde 2026-09-29).
   Der Willkommens-Block (?neu=1) steht ganz oben und trägt das Gold der
   Marke — er ist der eine Moment, in dem die Kundin erfährt, wo die Karte
   liegt und wie sie sie wiederfindet. „Karte speichern" ist eine ruhige
   weiße Karte nach den Belohnungen: Wallet, Home-Bildschirm, Mitteilungen.
   ======================================================================= */

.card.willkommen {
  background: var(--gold-dim);
  border-color: var(--gold-rand);
}
.card.willkommen .formtitel { color: var(--gold-text); }
.card.willkommen p { overflow-wrap: break-word; }
.card.willkommen .wiederfinden {
  border-top: 1px solid var(--gold-rand);
  padding-top: 12px;
}
.card.speichern .btn-hinweis { text-align: left; }

/* =======================================================================
   Einklappbare Blöcke (Betreiber, 2026-09-29: „Karte speichern &
   Geburtstag: man soll den Block minimieren können nach dem Durchlesen, um
   Platz zu sparen"). Die KARTE ist ein benannter Bereich <section
   class="card …">, darin ein natives <details class="klapp">
   (src/public-routes.js, klappBlockHtml): Die Titelzeile <summary> sieht aus
   wie jeder Kartentitel (Kachel + Überschrift), rechts ein Chevron — offen
   zeigt er nach unten, zugeklappt dreht er sich nach rechts, wie das „›" der
   Aufklappbereiche in der Team-App. Zugeklappt bleibt nur die Titelzeile
   (≥ 44px, sicher mit dem Daumen zu treffen); den Fokusrahmen trägt sie über
   die gemeinsame Regel `summary:focus-visible` ganz oben.
   ======================================================================= */

/* Kein Flex auf <details>: Ältere Safari- und Chrome-Fassungen machen daraus
   keinen Flex-Behälter (der Inhalt hängt dort an einem inneren Slot). Das
   <details> ist deshalb ein schlichter Block im Flex der Karte, und den
   12px-Takt hält der Inhalt selbst (.klapp-inhalt) — in jedem Browser
   gleich. */
details.klapp { display: block; }
.klapp-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* Der Fokusrahmen folgt der runden Kachel statt eckig um die Zeile. */
  border-radius: var(--radius-xs);
}
/* Das Dreieck des Browsers weg — der Chevron rechts ersetzt es (Safari zeichnet
   es über ::-webkit-details-marker, die übrigen über ::marker). */
.klapp-kopf::-webkit-details-marker { display: none; }
.klapp-kopf::marker { content: ''; }
.klapp-kopf .formtitel { flex: 1 1 auto; min-width: 0; }
.klapp-pfeil {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--muted);
}
.klapp-pfeil svg {
  display: block;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}
details.klapp:not([open]) .klapp-pfeil svg { transform: rotate(-90deg); }
/* Beim Hovern mit der Maus zeigt die Kachel des Chevrons, dass die Zeile
   ein Knopf ist; auf dem Handy bleibt sie ruhig. */
@media (hover: hover) {
  .klapp-kopf:hover .klapp-pfeil { background: var(--card-2); color: var(--text-2); }
}
/* Der Inhalt unter der Titelzeile: derselbe 12px-Takt wie in jeder Karte. */
.klapp-inhalt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
}
.klapp-inhalt > * { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .klapp-pfeil svg { transition: none; }
}

/* =======================================================================
   Gutscheine — volle Karten PINK, Geburtstagsgeschenk LILA. Gleiche
   Form wie die Karten, nur getönt.
   ======================================================================= */

.gutschein {
  background: var(--pink-dim);
  border: 1px solid var(--pink);
  color: var(--pink-text);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: break-word;
}
/* Gezeichnetes Geschenk-Zeichen vor „Volle Karte" — wie in der Team-App.
   Größe und Farbe kommen vom Text, damit es in der Zeile mitläuft. */
.gutschein .zeichen {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  margin-right: 6px;
}
.gutschein .zeichen svg { width: 100%; height: 100%; display: block; }
.gutschein.geburtstag {
  background: var(--lila-dim);
  border-color: var(--lila-rand);
  color: var(--lila);
}
.gutschein small {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

/* =======================================================================
   QR-Bereich — der weiße Kasten ist das, was im Studio über den Tresen
   geht; die Bildunterschrift sagt, was damit zu tun ist.
   ======================================================================= */

.qrcard { text-align: center; }
/* Starter: unsere Wortmarke über dem QR-Code (dunkle Schrift, die Karte ist
   hell) und DIREKT darunter die Werbezeile, genau so breit wie die Wortmarke
   (SVG-Text mit textLength, siehe markeMitWerbungHtml) — dieselbe Bedingung
   wie beim Pass. Der Block ist 200 px breit und mittig. */
.qrcard .marke-block {
  width: 200px;
  max-width: 70%;
  margin: 0 auto 14px;
}
.qrcard .marke { display: block; width: 100%; height: auto; }
.qrcard .werbung {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -3px;            /* eng an die Wortmarke (das Bild hat 4 px Luft) */
  color: var(--muted);
}
.qrcard .werbung text {
  font-family: inherit;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .04em;
  fill: currentColor;
}
.qrcard #qr {
  align-self: center;
  width: min(62vw, 244px);
  height: auto;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 10px;
  border: 1px solid var(--line-strong);
}

/* =======================================================================
   Extra-Geschenk — BLAU (seit 2026-09-21). Ein eigener Block je offenem
   Geschenk, damit zwei Geschenke nicht zu einem Absatz verschwimmen.
   Dieselbe Form wie die übrigen Karten, nur blau getönt.
   ======================================================================= */

.card.geschenk-extra {
  background: var(--blau-dim);
  border-color: var(--blau-rand);
}
.card.geschenk-extra .ico {
  background: rgba(31, 111, 208, 0.12);
  border-color: var(--blau-rand);
  color: var(--blau);
}
.card.geschenk-extra .formtitel { color: var(--blau-text); }
.card.geschenk-extra .gtext {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  overflow-wrap: break-word;
}
/* Ein GEWINN aus dem Gewinnspiel (`quelle` 'gewinnspiel', seit 2026-09-24 —
   Betreiber: „Bei Gewinner-Geschenk soll die Farbe des Geschenks die Farbe
   von Gewinnspiel sein"): derselbe Block, ORANGE getönt wie der
   Gewinnspiel-Block darunter, mit dem Pokal statt des Päckchens. */
.card.geschenk-extra.gewinn {
  background: var(--orange-dim);
  border-color: var(--orange-rand);
}
.card.geschenk-extra.gewinn .ico {
  background: var(--orange-kachel);
  border-color: var(--orange-rand);
  color: var(--orange);
}
.card.geschenk-extra.gewinn .formtitel { color: var(--orange-text); }
/* Der Abhol-Hinweis unter dem Gewinn (seit 2026-09-24 abends, feste Frist
   von 30 Tagen: „Bitte innerhalb von 30 Tagen im Studio einlösen — bis …").
   Er soll gelesen werden, bevor der Gewinn verfällt — deshalb nicht im
   stillen Grau der übrigen Kleinschrift, sondern in der Schrift des
   Gewinnspiels und etwas kräftiger. */
.card.geschenk-extra.gewinn .frist {
  color: var(--orange-text);
  font-weight: 600;
}
/* Der Ausweis-Hinweis darunter (seit 2026-09-25, Betreiber: der Vorname der
   Karte muss zum Ausweis passen, sonst gibt das Studio den Gewinn nicht
   aus — eine Karte lässt sich weitergeben). Dieselbe Gewichtung wie der
   Abhol-Hinweis: Er muss VOR dem Besuch gelesen werden. */
.card.geschenk-extra.gewinn .ausweis {
  color: var(--orange-text);
  font-weight: 600;
}

/* =======================================================================
   Zuletzt eingelöst — RUHIG (seit 2026-09-23). Höchstens EINE Karte unter
   den Extra-Geschenken: die jüngste Einlösung (volle Karte, Extra-Geschenk
   oder Geburtstagsgeschenk) als Beleg für die Kundin. Weiße Karte, graue
   Schrift, graue Haken-Kachel — bunt bleibt nur, was noch etwas wert ist.
   ======================================================================= */

.card.verlauf-karte .ico {
  background: var(--verlauf-kachel);
  border-color: var(--verlauf-rand);
  color: var(--muted);
}
.card.verlauf-karte .formtitel { color: var(--muted); }
.card.verlauf-karte .vtext {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-2);
  /* Belohnung und Geschenk sind Freitext des Studios. */
  overflow-wrap: break-word;
}

/* =======================================================================
   Gewinnspiel — ORANGE (seit 2026-09-21, nur Max). EIN Block, solange das
   Gewinnspiel läuft: was es zu gewinnen gibt, „Deine Lose: n" groß, darunter
   die Regel in einem Satz und der Weg zu den Teilnahmebedingungen. Dieselbe
   Form wie das Extra-Geschenk, nur orange getönt.
   ======================================================================= */

.card.gewinnspiel {
  background: var(--orange-dim);
  border-color: var(--orange-rand);
}
.card.gewinnspiel .ico {
  background: var(--orange-kachel);
  border-color: var(--orange-rand);
  color: var(--orange);
}
.card.gewinnspiel .formtitel { color: var(--orange-text); }
.card.gewinnspiel .gwpreis {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  overflow-wrap: break-word;
}
.card.gewinnspiel .gwlose {
  margin: 0;
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--orange-text);
  font-variant-numeric: tabular-nums;
}
.card.gewinnspiel p { margin: 0; }
.card.gewinnspiel a { color: var(--orange-text); font-weight: 600; }
/* „Teilnahmebedingungen" steht allein in seiner Zeile: 44px Tippfläche
   ohne höhere Zeile (Innenrand, vom Außenrand wieder abgezogen). */
.card.gewinnspiel p.small > a:only-child {
  display: inline-block;
  padding: 12px 0;
  margin: -12px 0;
}

/* ---- Live-Ziehung (docs/GEWINNSPIEL-LIVE.md, seit 2026-09-23) ----
   Countdown auf die Sekunde und danach das Ergebnis. Die Show selbst läuft
   seit 2026-09-24 im gemeinsamen Pop-up (public/ziehung-fenster.js +
   public/ziehung.css) — Nacht + Gold der Marke, dasselbe Bild wie in der
   App der Inhaberin. Im Block trägt nur die Losnummer diese Farben. */

.card.gewinnspiel .gwstufen {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.card.gewinnspiel .gwstufe {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.card.gewinnspiel .gwrang {
  flex: none;
  min-width: 92px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--orange-text);
}
.card.gewinnspiel .gwstufe .gwpreis { font-size: 15px; }
.card.gewinnspiel .gwmal {
  font-size: 14px;
  font-weight: 700;
  color: var(--orange-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.card.gewinnspiel .gwuhr {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.card.gewinnspiel .gwuhr-wort {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}
.card.gewinnspiel .gwuhr b {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--orange-text);
  font-variant-numeric: tabular-nums;
}
.card.gewinnspiel .gwlive {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--orange-text);
}
.card.gewinnspiel .gwlive[hidden] { display: none; }
/* Die Einladung zur Live-Show (card.js liveHinweisHtml) — die ganze
   Laufzeit unter dem Countdown: Wer sie liest, weiß, dass zur Ziehung
   hier auf der Karte etwas zu SEHEN ist, nicht nur eine Nachricht kommt.
   Ein schmaler oranger Strich links hebt sie vom Kleingedruckten ab. */
.card.gewinnspiel .gwhinweis {
  padding-left: 10px;
  border-left: 3px solid var(--orange-rand);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  overflow-wrap: break-word;
}

/* Die eigene LOSNUMMER neben „Deine Lose: n" (Live-Ziehung 3, 2026-09-24):
   Die Zahl, die in der Trommel auf IHRER Kugel steht (= Kundennummer). Sie
   steht wie die Kugel selbst da — Gold auf Nacht —, denn Gold auf dem hellen
   Orange-Grund wäre nicht zu lesen. Server (src/gewinnspiel.js) und card.js
   zeichnen dieselben Klassen. */
.card.gewinnspiel .gw-lose-reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
}
.card.gewinnspiel .gw-los {
  display: flex;
  align-items: center;
  gap: 8px;
}
.card.gewinnspiel .gw-los-wort {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--orange-text);
}
.card.gewinnspiel .gw-los-nr {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ziehung-nacht);
  border: 1px solid var(--ziehung-gold);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ziehung-gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Ton-Knopf im Ziehungs-Fenster (card.js tonKnopfSetzen, public/ziehung-ton.js):
   sitzt in der Kopfzeile `.zf-kopf` direkt vor dem X — das Fenster ist immer
   Nacht, der Knopf Gold. Das Fenster selbst gestaltet public/ziehung.css.
   `.warten` = Ton gewünscht, aber noch nicht erlaubt (iOS braucht einen
   Tipp): der Knopf pulsiert leicht. */
.zf-deckel .ziehung-ton {
  flex: none;
  margin-left: auto;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ziehung-gold);
  background: var(--ziehung-nacht);
  color: var(--ziehung-gold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zf-deckel .ziehung-ton ~ .zf-x { margin-left: 8px; }
.zf-deckel .ziehung-ton svg { display: block; width: 18px; height: 18px; }
.zf-deckel .ziehung-ton.warten { animation: ziehung-ton-puls 1.6s ease-in-out infinite; }
@keyframes ziehung-ton-puls {
  0% { box-shadow: 0 0 0 0 var(--ziehung-gold); }
  70%, 100% { box-shadow: 0 0 0 9px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .zf-deckel .ziehung-ton.warten { animation: none; box-shadow: 0 0 0 2px var(--ziehung-gold); }
}

.card.gewinnspiel .gwgewonnen {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--orange-text);
  overflow-wrap: break-word;
}
.card.gewinnspiel .gwleider {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
.card.gewinnspiel .gwgewinner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--orange-rand);
}
.card.gewinnspiel .gwtitel {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--muted);
}
.card.gewinnspiel .gwnummern {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 4px;
}
.card.gewinnspiel .gwnr {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--orange-kachel);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--orange-text);
  font-variant-numeric: tabular-nums;
}
.card.gewinnspiel .gwnr.ich {
  background: var(--ziehung-nacht);
  color: var(--ziehung-gold);
}
.card.gewinnspiel .gwwieder { width: 100%; }

/* =======================================================================
   Freunde werben — GRÜN wie der Stempel (seit 2026-09-21). Auf der Karte
   der Block „Freunde einladen" mit EINEM Knopf „Link teilen"; auf der
   Beitrittsseite derselbe grüne Kasten mit dem Satz „Du wurdest
   eingeladen …". Dieselbe Form wie die übrigen Karten, nur grün getönt.
   ======================================================================= */

.card.freunde-karte {
  background: var(--gruen-dim);
  border-color: var(--gruen-rand);
}
.card.freunde-karte .ico {
  background: rgba(31, 145, 85, 0.12);
  border-color: var(--gruen-rand);
  color: var(--gruen);
}
.card.freunde-karte .formtitel { color: var(--gruen-text); }
.card.freunde-karte .ftext {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: break-word;
}
/* Beitrittsseite: Der Satz IST der Titel — er darf umbrechen. */
.card.freunde-karte.einladung .formtitel {
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.btn.gruen {
  background: linear-gradient(180deg, #2fa868, #1f9155);
  color: #fff;
  box-shadow: 0 6px 20px var(--gruen-glow);
}
/* Rückfall, wenn sich der Link weder teilen noch kopieren lässt: Er steht
   zum Markieren da (public/karte-freunde.js). */
.freunde-link {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}

/* =======================================================================
   Nachricht aus dem Studio (seit 2026-09-21 in zwei Zuständen).

   UNGELESEN: ein Pop-up über der Karte — die Kundin soll die Nachricht
   nicht übersehen, und ein Tipp genügt, um sie wegzuräumen. Der
   Hintergrund wird abgedunkelt, das Fenster sitzt über `inset` mittig:
   NIE über left:50% + translateX(-50%), das rechnet iOS in die
   Seitenbreite ein (siehe CLAUDE.md).

   GELESEN: ein SCHWARZER Kasten ganz unten auf der Karte — sie bleibt
   nachlesbar, tritt aber optisch zurück. Als einziger dunkler Block der
   Kundenwelt ist er sofort als „vom Studio" zu erkennen.
   ======================================================================= */

.nachricht-pop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background: rgba(20, 15, 4, 0.55);
  /* `hidden` muss stärker sein als das display:flex darüber. */
}
.nachricht-pop[hidden] { display: none; }
.nachricht-pop .pop-karte {
  width: 100%;
  max-width: 380px;
  max-height: 100%;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(30, 20, 0, 0.35);
  animation: popauf 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes popauf {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nachricht-pop .pop-karte { animation: none; }
}
.nachricht-pop .pop-von {
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--gold-text);
}
.nachricht-pop .ntext {
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.card.nachricht {
  background: #17130c;
  border-color: #2c2418;
  color: #f3eee2;
}
.card.nachricht .formtitel { color: #f3eee2; }
.card.nachricht .ico {
  background: rgba(230, 200, 120, 0.14);
  border-color: rgba(230, 200, 120, 0.30);
  color: #e4c878;
}
.card.nachricht .ntext {
  font-size: 15px;
  line-height: 1.45;
  color: #e7e1d3;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.card.nachricht .ndatum { color: #a49b88; }
/* Links in einer Studio-Nachricht (seit 2026-09-23: die Einladung zur
   Google-Bewertung trägt den Link des Studios als eigene Zeile). */
.ntext a {
  color: var(--gold-text);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.card.nachricht .ntext a { color: #e4c878; }

/* =======================================================================
   Kartenerstellung — seit 2026-09-19 (abends) NUR noch der Vorname; der
   Geburtstag zieht als eigener Block auf die fertige Karte (nur Pro), die
   Stadt entfällt ganz.
   ======================================================================= */

/* Die Feldliste hat einen eigenen, etwas größeren Takt als die Karte:
   16px von Feld zu Feld, 8px von der Beschriftung zu ihrem Eingabefeld. */
.felder { display: flex; flex-direction: column; gap: 16px; }
.feld-gruppe { display: flex; flex-direction: column; gap: 8px; }
/* Auch hier: keine Eigenränder, sonst kommt der 1em-Rand eines <p>
   (der Geschenk-Hinweis) zu den 8px der Gruppe dazu. */
.feld-gruppe > * { margin: 0; }

/* Auch der Gruppenname über den drei Geburtstags-Rollen ist eine
   Beschriftung — er steht nur als <span>, weil er zu drei Feldern gehört
   und nicht zu einem. */
label.feld,
.feld-gruppe > span.feld {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-align: left;
}
/* „(freiwillig)" hinter dem Feldnamen — leiser als die Beschriftung
   selbst, damit klar bleibt, was das Feld ist. */
label.feld .freiwillig {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 0.85;
}
/* Kurzer Hinweis zwischen Beschriftung und Eingabefeld — nennt den
   Freitext des Studios, deshalb der Umbruch. */
.formular .feldhinweis {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  text-align: left;
  overflow-wrap: break-word;
}
/* Der Geschenk-Hinweis am Geburtsdatum trägt die Geburtstagsfarbe —
   dieselbe wie der lila Balken auf der Karte, damit die Kundin die
   beiden später zusammenbringt. */
.formular .feldhinweis.geschenk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--lila-dim);
  border: 1px solid var(--lila-rand);
  border-radius: var(--radius-xs);
  color: var(--lila);
  padding: 10px 12px;
}
.formular .feldhinweis.geschenk svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.formular input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px; /* 16px verhindert den iOS-Auto-Zoom beim Fokussieren */
  min-height: 52px;
  padding: 13px 14px;
  appearance: none;
  color-scheme: light; /* heller Datums-Picker passend zum Creme-Look */
}
/* Die Auswahlfelder tragen dasselbe Kleid wie die Eingabefelder — der
   eigene Pfeil ersetzt den des Systems, damit alle drei gleich hoch
   bleiben. Als Data-URI, weil die CSP keine fremden Adressen erlaubt. */
.formular select {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 16px; /* 16px verhindert den iOS-Auto-Zoom beim Fokussieren */
  min-height: 52px;
  padding: 13px 34px 13px 12px;
  appearance: none;
  color-scheme: light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238a7f70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  /* Ein langer Monatsname („Kuukausi", „Ιανουαρίου") darf die Zeile nie
     sprengen — lieber abschneiden als die drei Felder auseinanderdrücken. */
  text-overflow: ellipsis;
}
.formular input:focus,
.formular select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}

/* Geburtsdatum als DREI Rollen (Tag · Monat · Jahr) statt eines
   Datumsfeldes: Ein natives `type=date` zeigt das Format des BROWSERS,
   nicht das der Karte. Die Reihenfolge setzt der Server nach der Sprache
   (ungarisch Jahr-Monat-Tag), hier steht nur, wie breit die drei sind —
   der Monat trägt ein Wort, Tag und Jahr nur Ziffern. */
.datumswahl { display: flex; gap: 8px; }
.datumswahl .datumsteil {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 0;
  /* Ohne das wächst ein Feld über seinen Anteil hinaus, sobald sein
     längster Eintrag breiter ist als die Spalte. */
  min-width: 0;
}
.datumswahl .datumsteil > * { margin: 0; }
.datumswahl .datumsteil.monat { flex-grow: 1.7; }
.datumswahl .datumsteil.jahr { flex-grow: 1.15; }
/* Die Beschriftungen der drei Rollen sind die ZWEITE Ebene unter
   „Geburtsdatum": normal geschrieben statt in Versalien, damit nicht zwei
   Zeilen Großbuchstaben übereinanderstehen. Sie stehen enger an ihrem
   Feld als die Gruppe (4 statt 8) — sie gehören sichtbar zusammen. */
.datumswahl .datumsteil label.feld {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
}
/* Der Geburtstags-Block der Karte: dieselbe Formularkarte, nur dass die
   beiden kurzen Sätze unter dem Feld zusammengehören (4px) statt im
   12px-Takt der Karte zu stehen. */
.geburtstagkarte .hinweise {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.geburtstagkarte .hinweise > * { margin: 0; }
/* Nach dem Speichern (oder einem Fehler) springt der Browser über den Anker
   #geburtstag an diesen Block (seit 2026-09-23). Etwas Luft darüber — und
   auf dem Home-Bildschirm auch unter der Uhr des iPhones hervor, dort
   liegt die Seite bis unter die Statusleiste (viewport-fit=cover). */
.geburtstagkarte { scroll-margin-top: calc(16px + env(safe-area-inset-top)); }

/* Fehlerzeile über dem Formular: dunkles Rot — das Neon-Rot der dunklen
   Team-App liest auf Creme zu schwach. */
.formular .formfehler {
  background: var(--rot-dim);
  border: 1px solid #c62822;
  color: var(--rot-text);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

/* Unsichtbarer Standard-Knopf der Kartenerstellung (Gegenprüfung
   2026-09-29): Die Eingabetaste im Vornamen-Feld löst den ERSTEN
   Absende-Knopf aus — das ist dieser („Im Browser nutzen"), nicht der
   Wallet-Knopf. Bewusst NICHT display:none (manche Browser übergehen einen
   ausgeblendeten Standard-Knopf), sondern aus dem Bild geschnitten;
   absolut gesetzt, damit er im Flex-Stapel des Formulars keinen Abstand
   bekommt. Tab und Screenreader erreichen ihn nicht (tabindex, aria-hidden). */
.formular .standard-absenden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* =======================================================================
   Zufriedenheits-Umfrage
   ======================================================================= */

/* Drei Smileys: traurig = Rot, neutral = Gelb, froh = Grün — seit 2026-10-06
   die 3D-Bilder aus /smiley/ (Betreiber: „neue, schönere und modernere
   Smileys"), darunter das Wort. Drei gleich breite Spalten, jede ein Knopf.
   Vor der Wahl wippen sie reihum ganz leicht (lädt zum Antippen ein); die
   Wahl springt auf, bekommt einen Schein in ihrer Farbe und ein fettes
   Wort, die beiden anderen treten zurück (grau, kleiner). */
.smileys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  max-width: 340px;
  margin: 2px auto 0;
}
.smileys button {
  --smiley-farbe: #c73a31;
  --smiley-schein: rgba(217, 70, 61, 0.26);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 14px 4px 10px;
  border: none;
  border-radius: 18px;
  background: none;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s, opacity 0.18s, filter 0.18s, background 0.18s;
}
/* Dunkles Amber — reines Gelb liest auf Creme unter 3:1. */
.smileys .mittel { --smiley-farbe: #8a5c00; --smiley-schein: rgba(217, 154, 0, 0.30); }
.smileys .froh { --smiley-farbe: #17744a; --smiley-schein: rgba(31, 157, 92, 0.28); }
.smiley-bild {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 6px 8px rgba(40, 30, 10, 0.16));
  transition: transform 0.22s cubic-bezier(0.2, 1.5, 0.4, 1), box-shadow 0.2s;
  animation: smiley-wippen 3.6s ease-in-out infinite;
}
.smileys .mittel .smiley-bild { animation-delay: 0.45s; }
.smileys .froh .smiley-bild { animation-delay: 0.9s; }
.smiley-wort {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}
.smileys button:active .smiley-bild { transform: scale(0.94); }
.smileys button:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
/* Die Wahl. */
.smileys button.an { background: var(--card); color: var(--smiley-farbe); box-shadow: 0 0 0 1.5px var(--smiley-schein), 0 8px 20px var(--smiley-schein); }
.smileys button.an .smiley-wort { font-weight: 800; }
.smileys button.an .smiley-bild {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px var(--smiley-schein);
  animation: smiley-wahl 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
}
/* Ist gewählt, treten die anderen zurück (card.js setzt `gewaehlt`). */
.smileys.gewaehlt .smiley-bild { animation: none; }
.smileys.gewaehlt button:not(.an) { opacity: 0.6; filter: grayscale(0.75); transform: scale(0.94); }
.smileys.gewaehlt button.an .smiley-bild { animation: smiley-wahl 0.55s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes smiley-wippen {
  0%, 16%, 100% { transform: translateY(0) rotate(0deg); }
  5% { transform: translateY(-5px) rotate(-5deg); }
  10% { transform: translateY(0) rotate(4deg); }
}
@keyframes smiley-wahl {
  0% { transform: scale(0.8) rotate(-10deg); }
  45% { transform: scale(1.26) rotate(6deg); }
  70% { transform: scale(1.06) rotate(-2deg); }
  100% { transform: scale(1.1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .smiley-bild, .smileys button.an .smiley-bild, .smileys.gewaehlt button.an .smiley-bild { animation: none; }
  .smileys button, .smiley-bild { transition: none; }
}
.umfrage textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  padding: 13px 14px;
  resize: vertical;
}
.umfrage textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}

/* Inline-Fehlerzeile (statt nativer Dialoge, card.js). */
.fehlerzeile {
  background: var(--rot-dim);
  border: 1px solid #c62822;
  color: var(--rot-text);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* =======================================================================
   Bestätigungsseite „Karte löschen" — der rote Knopf trägt als einziger
   auf den Kundenseiten Rot (.btn.gefahr), und „Abbrechen" steht darunter
   mit demselben Gewicht: Wer hier aus Versehen gelandet ist, kommt mit
   einem Tipp wieder heraus. Etwas mehr Luft über dem gefährlichen Knopf.
   ======================================================================= */

.loeschkarte form { margin-top: 4px; }

/* =======================================================================
   Fußzeile und Datenschutzhinweis — dezent: sie sollen da sein, wenn
   jemand sie sucht. Die Fußzeile bricht mittig um; Zeilen- und
   Spaltenabstand sind verschieden groß, damit eine zweite Zeile wie
   gewollt aussieht und nicht wie ein Unfall.
   ======================================================================= */

.fusszeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  font-size: 13px;
  line-height: 1.4;
}
/* Die Zeile bleibt zierlich, die Tippfläche ist trotzdem 44px hoch
   (UX-Runde 2026-09-29; vorher 40px — unter Apples Mindestmaß). */
.fusszeile a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  padding: 0 4px;
  text-align: center;
  overflow-wrap: anywhere;
}
.fusszeile a:hover { color: var(--gold-text); text-decoration: underline; }
/* Fuß der Kartenseite: vier Links als ruhiges 2×2-Raster — oben die beiden
   Karten-Aktionen, unten das Rechtliche. Ein loser Umbruch ließ sonst
   „Impressum" allein in der zweiten Zeile stehen.

   `minmax(0, max-content)` statt `max-content`: Solange Platz ist, ändert
   sich nichts — die Spalten sind so breit wie ihr längster Link. Passen
   sie nicht mehr (320px-Handy, lange Wörter: vietnamesisch heißt das
   Impressum „Thông tin nhà cung cấp"), dürfen sie schrumpfen und der Text
   bricht um, statt die ganze Seite seitlich herauszuschieben. Eine feste
   `max-content`-Spalte kennt dieses Nachgeben nicht — und eine zu breite
   Seite wandert am iPhone beim Scrollen mit (siehe CLAUDE.md). */
.fusszeile.karten-fuss {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: center;
  justify-items: center;
  column-gap: 28px;
  row-gap: 0;
}
.fusszeile span { color: var(--line-strong); }

.datenschutzhinweis {
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.datenschutzhinweis a {
  color: var(--gold-text);
  /* 44px Tippfläche, ohne die Zeile höher zu machen: Der Innenrand nach oben
     und unten wird vom Außenrand wieder abgezogen (UX-Runde 2026-09-29). */
  display: inline-block;
  padding: 12px 4px;
  margin: -12px 0;
}
.datenschutzhinweis span { color: var(--line-strong); margin: 0 4px; }

/* =======================================================================
   Plakat (/poster) — weißes Blatt zum Ausdrucken, eigene Welt: kein
   Creme, keine Karten, große Typografie fürs Schaufenster.
   ======================================================================= */

/* min-height: Das <html> trägt das Creme der Kundenwelt; ohne diese
   Zeile blitzte es auf einem kurzen Blatt unter dem weißen Körper
   hervor. (Im Druck fällt sie wieder weg — siehe @media print unten.)
   padding-bottom: Ohne eigenen Innenrand fällt der untere Rand des
   letzten Knopfes aus dem Körper heraus (Randkollaps) — „Drucken" saß
   dann direkt auf der Kante der weißen Fläche. */
body.poster {
  background: #fff;
  color: #111;
  display: block;
  min-height: 100vh;
  /* In der nativen Team-App liegt auch der Aushang bis unter die
     Statusleiste des iPhones — die Sprachwahl oben rechts saß unter Uhr
     und Akku, und ein Tipp dort erreichte sie nie (am iPhone gesehen,
     2026-09-23). Die Seite trägt dafür `viewport-fit=cover`; im Browser
     und im Druck ist der Wert null. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
.posterblatt {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 32px 24px;
  text-align: center;
}
.posterlogo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(380px, 82%);
  max-height: 150px;
  margin: 0 auto;
  object-fit: contain;
}
.posterblatt h1 {
  font-family: var(--serif);
  font-size: 34px;
  margin: 18px 0 4px;
}
.postertext { font-size: 19px; color: #555; margin: 0 0 22px; }
.posterqr { width: min(70vw, 330px); height: auto; }
.posterbelohnung {
  font-size: 21px;
  font-weight: 700;
  color: #8a6a12;
  margin: 20px 0 6px;
}
/* Die drei Schritte (scannen → Vorname → Wallet). Linksbündig in einem
   mittig stehenden Block: Eine zentrierte Liste mit Zahlen läse sich
   unruhig, ein linksbündiger Block auf einem zentrierten Blatt nicht.
   Die Zahlen stehen in eigenen Kreisen statt in Listenpunkten — so
   bleiben sie auch im Druck sichtbar (Browser drucken Listenmarken
   sonst gern zu schwach). */
.posterschritte {
  list-style: none;
  counter-reset: posterschritt;
  display: inline-block;
  margin: 20px 0 14px;
  padding: 0;
  text-align: left;
}
.posterschritte li {
  counter-increment: posterschritt;
  position: relative;
  min-height: 26px;
  padding: 0 0 0 38px;
  font-size: 17px;
  line-height: 1.35;
  color: #333;
  /* Eine Zeile darf nie über den Seitenumbruch rutschen. */
  break-inside: avoid;
  page-break-inside: avoid;
}
.posterschritte li + li { margin-top: 12px; }
.posterschritte li::before {
  content: counter(posterschritt);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border: 1.5px solid #8a6a12;
  border-radius: 50%;
  color: #8a6a12;
  font-size: 14px;
  font-weight: 700;
  line-height: 23px;
  text-align: center;
}
.posterhint { color: #666; font-size: 14px; }
.zurueckbtn {
  max-width: 240px;
  margin: 18px auto 0;
}
/* Der untere Rand kommt jetzt vom Körper (body.poster), nicht vom Knopf:
   Ein Rand am letzten Kind fällt aus dem Körper heraus und wäre keine
   Luft, sondern nur ein Loch unter der weißen Fläche. */
.druckbtn {
  max-width: 240px;
  margin: 10px auto 0;
}
body.poster .langwahl {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  right: 18px;
}

@media print {
  /* Ein Aushang ist ein A4-Blatt — nicht Letter, nicht Legal. Der Rand
     ist bewusst schmaler als die Browser-Vorgabe: Der Inhalt soll groß
     bleiben und trotzdem sicher auf EINE Seite passen. */
  @page { size: A4; margin: 12mm; }

  .druckbtn, .zurueckbtn, .langwahl { display: none; }

  /* GENAU EINE Seite — hier lag die zweite, leere.
     `min-height: 100vh` ist im Druck die Falle: Die Browser rechnen `vh`
     dort gegen die Höhe des BILDSCHIRM-Fensters, nicht gegen das Blatt.
     Der Inhalt des Aushangs ist rund 740px hoch, die bedruckbare Fläche
     eines A4-Blattes rund 1050px — aber auf einem großen Monitor stand
     im Druckmodus `min-height: 1600px` am Körper, und alles über 1050px
     schob eine zweite Seite hinterher. Auf der lag nichts: Gezeichnet
     wird nur oben. Im Druck trägt der Körper deshalb gar keine
     Mindesthöhe; das Creme, gegen das sie auf dem Bildschirm schützt,
     druckt ohnehin niemand. */
  html, body, body.poster { min-height: 0; height: auto; }
  body.poster { background: #fff; padding-top: 0; padding-bottom: 0; }

  /* Alles auf EIN A4-Blatt: Der QR-Code und die Schritte rücken zusammen,
     das Blatt bleibt als Ganzes beieinander und zieht nichts hinter sich
     her (ein Umbruch NACH dem letzten Inhalt wäre wieder eine leere
     Seite). */
  .posterblatt {
    padding-top: 24px;
    break-inside: avoid;
    page-break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
  }
  .posterqr { width: 300px; }
  /* Die Fläche hinter dem Logo ist Inhalt, kein Schmuck: Browser lassen
     Hintergründe beim Drucken sonst weg — ein weißes Logo stünde dann
     unsichtbar auf dem weißen Blatt. */
  .logo-flaeche { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .posterschritte { margin: 16px 0 10px; break-inside: avoid; page-break-inside: avoid; }
  .posterschritte li::before { border-color: #555; color: #555; }
  .posterhint { margin-bottom: 0; }
}

/* =======================================================================
   Rechtsseiten (/impressum, /datenschutz, /agb, /avv) und die beiden
   Datenschutzrechte an der Kundenkarte.

   Lange Fließtexte brauchen anderes als eine Stempelkarte: linksbündig,
   ruhige Zeilenhöhe (1.6 statt 1.45), klare Zwischenüberschriften. Die
   Seiten bleiben trotzdem im Creme der Kundenwelt — sie werden von der
   Kartenseite aus verlinkt und sollen nicht wie ein fremdes Dokument
   wirken.
   ======================================================================= */

/* Rückweg ganz oben. Der Aushang hat dafür `.zurueckbtn` (mittig unter
   dem Blatt, mit eigenem Rand) — hier passt das nicht: Der Knopf sitzt
   links über dem Text, so schmal wie seine Beschriftung, und holt
   seinen Abstand aus dem 16px-`gap` der Seite, nicht aus einem Rand.
   `hidden` bleibt wirksam, bis public/zurueck.js ihn aufdeckt. */
.rechtzurueck[hidden] { display: none; }
.rechtzurueck {
  align-self: flex-start;
  width: auto;
  min-height: 42px;
  padding: 10px 16px 10px 12px;
  gap: 6px;
  font-size: 15px;
  color: var(--text-2);
}
.rechtzurueck span { font-size: 19px; line-height: 1; color: var(--gold-text); }

/* Kleiner DE · EN · VI-Umschalter. Nicht der 18-Sprachen-Umschalter der
   Kundenseiten: Die Rechtstexte gibt es in genau drei Sprachen. */
.rechtlang {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
/* 12px oben und unten: 42px Tippfläche, ohne die Zeile aufzublähen. */
.rechtlang a, .rechtlang .on { padding: 12px 4px; }
.rechtlang a { color: var(--muted); text-decoration: none; }
.rechtlang a:hover { color: var(--gold-text); }
.rechtlang .on { color: var(--gold-text); }
.rechtlang span { color: var(--line-strong); }

.rechtkopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.rechtkopf h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.rechtkopf p { margin: 0; }

/* Der eigentliche Textkörper. `overflow-wrap` fängt lange Paragrafen-
   ketten und E-Mail-Adressen ab, damit auf einem schmalen Handy nichts
   seitlich herausragt. */
.recht {
  display: block;
  text-align: left;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.recht section + section { margin-top: 24px; }
/* Der erste Absatz sitzt am Kartenrand — sein Standardrand käme sonst
   zu den 18px Innenrand dazu. */
.recht > *:first-child { margin-top: 0; }
.recht h2 {
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--gold-text);
  letter-spacing: 0.01em;
}
.recht p { margin: 0 0 12px; }
.recht p:last-child { margin-bottom: 0; }
.recht ul { margin: 0 0 12px; padding-left: 20px; }
.recht li { margin: 0 0 6px; }
.recht a { color: var(--gold-text); }
/* Anker-Sprung aus der Kartenseite (#karte): etwas Luft über der
   Überschrift, sonst klebt sie unter der Adressleiste des Handys. */
.recht section[id] { scroll-margin-top: 16px; }

/* Hinweiskasten: fehlende Anbieterangaben (Impressum) und der Satz zur
   maßgeblichen deutschen Fassung (EN/VI). */
.rechthinweis {
  background: var(--gold-dim);
  border: 1px solid var(--gold-rand);
  border-radius: var(--radius-xs);
  margin: 16px 0;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--gold-text);
  font-weight: 700;
}
.recht .rechthinweis.massgeblich {
  background: var(--card-2);
  border-color: var(--line);
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 20px;
}