/* Grundgerüst der Kundenseite. Hell wie Papier, dunkel wenn das Gerät
   dunkel eingestellt ist. Gedacht ist alles zuerst fürs Handy: die
   Startseite ist ein Bogen Karten zum Durchwischen, der ohne Scrollen
   auf einen Schirm passt. Am Rechner kommen nur Pfeile und mehr Luft
   dazu. */

:root {
  --papier: #faf7f1;
  --papier-tief: #f1ece1;
  --karte: #ffffff;
  --rand: #e4ddcf;
  --text: #201d18;
  --leise: #736c5f;
  --gruen: #1f3a34;
  --gold: #a8803f;
  --schatten: 0 18px 44px -24px rgba(32, 29, 24, .45);
  --radius: 18px;
  --kopf: 68px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #14161a;
    --papier-tief: #101215;
    --karte: #1b1f25;
    --rand: #2b313a;
    --text: #eef1f5;
    --leise: #98a1ae;
    --gruen: #cfe3d4;
    --gold: #d9b072;
    --schatten: 0 22px 50px -26px rgba(0, 0, 0, .85);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(900px 500px at 82% -10%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%),
    var(--papier);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .zier { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-weight: 400; }

a { color: inherit; }

/* --- Kopfzeile --- */
.kopf {
  position: sticky; top: 0; z-index: 60;
  height: var(--kopf);
  display: flex; align-items: center; gap: 22px;
  padding: 0 clamp(16px, 4vw, 48px);
  background: color-mix(in srgb, var(--papier) 97%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rand);
}
/* Das Logo, nachgebaut wie die Vorlage: der Held als Bild, der Schriftzug
   als echte Schrift in der fetten runden Type - scharf in jeder Groesse
   und in jeder Farbe, ohne am Bild herumzufaerben. */
.marke {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font: 800 21px/1 "Nunito", "Quicksand", "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: -.01em; color: var(--text);
}
.marke img {
  height: 56px; width: auto; display: block;
  filter: drop-shadow(0 3px 6px rgba(20, 16, 10, .28));
}
.marke b { font-weight: 800; }
.kopf nav { margin-left: auto; display: flex; gap: 20px; align-items: center; font-size: 14.5px; }

/* Die Anlaesse in der Kopfzeile: nur am Rechner. Am Handy stehen sie als
   Schilder auf der Seite, und in der Leiste waere neben Held, Profil und
   Warenkorb ohnehin kein Platz. */
.kopf .kopf-nav { display: none; }
@media (min-width: 900px) {
  .kopf .kopf-nav {
    display: flex; gap: 20px; align-items: center; min-width: 0;
    margin-left: 28px; font-size: 14px; overflow: hidden;
  }
  .kopf .kopf-nav a { color: var(--leise); text-decoration: none; white-space: nowrap; }
  .kopf .kopf-nav a:hover { color: var(--text); }
  .kopf .kopf-nav a[aria-current="page"] { color: var(--gold); }
}
.kopf nav a { color: var(--leise); text-decoration: none; }
.kopf nav a:hover { color: var(--text); }

/* Der Warenkorb: ein rundes Glas mit Tasche, die Zahl als goldene Marke
   oben rechts - da, wo der Daumen sie erwartet. */
.korb-knopf {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 999px;
  border: 1px solid var(--rand); background: var(--karte); color: var(--text);
  transition: border-color .18s, transform .18s;
}
.korb-knopf svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.korb-knopf:hover { border-color: var(--gold); transform: translateY(-1px); }
.korb-knopf[aria-current="page"] { border-color: var(--gold); color: var(--gold); }
.korb-zahl {
  position: absolute; top: -5px; right: -5px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  font: 700 11px/1 system-ui, sans-serif; color: #241b10;
  background: linear-gradient(135deg, #e3c07a, #b98c41);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.korb-zahl[hidden] { display: none; }

/* Das Profil: derselbe runde Knopf wie der Warenkorb, darin das Bild,
   der Anfangsbuchstabe oder ein Strichmännchen. */
.profil-knopf {
  position: relative; display: grid; place-items: center; padding: 0;
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rand); background: var(--karte); color: var(--text);
  transition: border-color .18s, transform .18s;
}
.profil-knopf:hover { border-color: var(--gold); transform: translateY(-1px); }
.profil-knopf[aria-expanded="true"] { border-color: var(--gold); }
.profil-zeichen {
  width: 100%; height: 100%; border-radius: 999px; overflow: hidden;
  display: grid; place-items: center;
}
.profil-zeichen svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.profil-zeichen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profil-zeichen b {
  width: 100%; height: 100%; display: grid; place-items: center;
  font: 700 16px/1 system-ui, sans-serif; color: #241b10;
  background: linear-gradient(135deg, #e3c07a, #b98c41);
}

/* Die Blase unter dem Knopf: klein, am Handy fast die ganze Breite. */
.profil-blase {
  position: fixed; z-index: 70;
  top: calc(var(--kopf) - 4px); right: clamp(12px, 4vw, 48px);
  width: min(300px, calc(100vw - 24px));
  padding: 16px; border-radius: 16px;
  border: 1px solid var(--rand); background: var(--karte); color: var(--text);
  box-shadow: 0 26px 54px -22px rgba(0, 0, 0, .6);
}
.profil-blase[hidden] { display: none; }
.profil-titel { font: 400 21px/1.2 Georgia, "Iowan Old Style", serif; margin: 2px 0 12px; }
.profil-form { display: grid; gap: 10px; }
.profil-form label { display: grid; gap: 5px; font-size: 13px; color: var(--leise); }
.profil-form input {
  background: var(--papier); border: 1px solid var(--rand); border-radius: 10px;
  padding: 10px 12px; color: var(--text); font: inherit;
  /* 16px, sonst zoomt iOS beim Hineintippen die ganze Seite heran. */
  font-size: 16px; min-height: 44px;
}
.profil-form input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.profil-form .knopf { justify-content: center; margin-top: 2px; }
.profil-zeile { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.profil-gross {
  width: 52px; height: 52px; flex: none; border-radius: 999px; overflow: hidden;
  display: grid; place-items: center; border: 1px solid var(--rand); background: var(--papier);
}
.profil-gross img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profil-gross svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.profil-gross b {
  width: 100%; height: 100%; display: grid; place-items: center;
  font: 700 21px/1 system-ui, sans-serif; color: #241b10;
  background: linear-gradient(135deg, #e3c07a, #b98c41);
}
.profil-name { display: grid; gap: 2px; min-width: 0; }
.profil-name b { font-size: 15.5px; }
.profil-name span { font-size: 13px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-blase .knopfreihe .knopf { font-size: 13.5px; padding: 9px 14px; }
.profil-hinweis { color: var(--leise); font-size: 12.5px; margin: 12px 0 0; }

/* Der Bogen ragt bis an den Fensterrand - kein Querbalken dafuer. */
body.seite-start { overflow-x: hidden; }

.augenbraue {
  text-transform: uppercase; letter-spacing: .22em; font-size: 12px;
  color: var(--gold); font-weight: 600;
}

/* Die Bühne hinter allem: fest, seitenfüllend, ohne Eingriff in die
   Bedienung. Alles andere liegt darüber. */
.hintergrund {
  position: fixed; inset: 0; width: 100%; height: 100%;
  /* Hinter allem, aber vor dem Grund des Koerpers: negative Ebene, dann
     muss kein Abschnitt der Seite eigens nach vorn. */
  z-index: -1; pointer-events: none;
}

/* --- Die Schau: eine Seite, ein Bogen Karten --- */

/* Kopfzeile, Bogen, Text - mehr steht nicht auf dem Schirm. Der Bogen
   bekommt, was die beiden anderen übrig lassen. */
.schau {
  display: grid; gap: 12px;
  max-width: 1280px; margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 48px) 8px;
}
/* Der Bogen reicht von Seitenrand zu Seitenrand: die Nachbarkarten
   schauen dann wirklich am Rand herein, nicht an einer Innenkante. Der
   Rest der Seite behaelt seinen Abstand. */
.karussell {
  position: relative; min-height: 0;
  /* Nur so hoch, wie die vordere Karte es braucht: sie nimmt gut zwei
     Drittel der Hoehe und etwa drei Viertel der Breite ein. Waere die
     Flaeche hoeher, staende die Karte bloss in leerer Luft - und die
     Anlaesse darunter rutschten aus dem Bild. */
  /* Die Hoehe steht als eigener Wert da: an ihr haengt die Groesse der
     Karten - und damit auch, wo die Pfeile sinnvoll stehen. */
  --bogen-hoehe: min(calc(100svh - var(--kopf) - 168px), calc(var(--fenster, 100vw) * 1.04), 600px);
  height: var(--bogen-hoehe);
  /* --fenster ist die Seitenbreite ohne Rollbalken (setzt app.js); 100vw
     schloesse den Balken ein, und der Bogen saesse am Rechner um seine
     halbe Breite schief. */
  margin-inline: calc(50% - var(--fenster, 100vw) / 2);
}
/* pan-y: hoch und runter gehoert der Seite - unter dem Bogen stehen die
   Kategorien, dorthin muss man auch ueber den Bogen kommen. Zur Seite
   gehoert dem Bogen; welche Richtung gemeint ist, entscheiden die ersten
   Pixel der Bewegung (siehe KarussellBuehne). */
.karussell-leinwand {
  display: block; width: 100%; height: 100%;
  touch-action: pan-y; cursor: grab;
}
.karussell-leinwand:active { cursor: grabbing; }
.karussell:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; border-radius: 20px; }

/* Mit Maus gibt es Pfeile, am Finger wäre das nur Zierde. */
.bogen-knopf {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid var(--rand); background: var(--karte); color: var(--leise);
  font: 400 26px/1 Georgia, serif; cursor: pointer;
  transition: color .18s, border-color .18s, transform .18s;
}
.bogen-knopf:hover { color: var(--text); border-color: var(--gold); }
/* Die Pfeile stehen knapp neben dem Faecher, nicht am Bildschirmrand: am
   breiten Schirm waeren sie sonst weit weg von den Karten. Der Faecher ist
   etwa 1,25 Bogenhoehen breit - dazu der Knopf und etwas Luft. Auf
   schmalen Schirmen reichen die Karten ohnehin bis an den Rand, dort
   bleiben die 14px. */
.bogen-knopf.links { left: max(14px, calc(50% - var(--bogen-hoehe, 600px) * 1.25 - 62px)); }
.bogen-knopf.rechts { right: max(14px, calc(50% - var(--bogen-hoehe, 600px) * 1.25 - 62px)); }
.bogen-knopf.links:hover { transform: translateY(-50%) translateX(-2px); }
.bogen-knopf.rechts:hover { transform: translateY(-50%) translateX(2px); }
@media (hover: none) { .bogen-knopf { display: none; } }

/* Ueber dem Bogen: "Bestseller" als goldene Kapitaelchen zwischen zwei
   feinen Linien, die zur Mitte hin aufleuchten - dieselbe Sprache wie der
   Anlass unter der Karte, nur mit Rahmen. Nicht groesser: der Bogen
   braucht die Hoehe, und das Wort soll einordnen, nicht konkurrieren. */
.schau-kopf { display: grid; justify-items: center; gap: 4px; padding: 6px 0 0; }
.schau-kopf h1, .schau-kopf h2, .schau-kopf p {
  display: flex; align-items: center; gap: 16px; width: 100%; margin: 0;
  font: 600 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
  text-indent: .3em; /* die Sperrung haengt hinten ueber - so steht das Wort mittig */
}
.schau-kopf h1::before, .schau-kopf h1::after,
.schau-kopf h2::before, .schau-kopf h2::after,
.schau-kopf p::before, .schau-kopf p::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  opacity: .6;
}
.schau-kopf h1::after, .schau-kopf h2::after,
.schau-kopf p::after { background: linear-gradient(90deg, var(--gold), transparent); }

/* --- Die Anlass-Seite: Aufmacher und Weg ---

   Der Aufmacher sagt in drei Zeilen, wo man ist: der Anlass groß, ein
   Satz dazu, darunter die Eckdaten. Danach kommt sofort der Bogen - die
   Karten sind die Ware, nicht der Text. */
.anlass-aufmacher {
  max-width: 1280px; margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 48px) 0;
  display: grid; justify-items: center; text-align: center; gap: 6px;
}
.anlass-name {
  margin: 0; font-size: clamp(34px, 6.4vw, 60px); line-height: 1.02;
  letter-spacing: -.02em;
}
.anlass-satz {
  margin: 4px 0 0; max-width: 56ch; color: var(--leise);
  font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55;
}
/* Die Eckdaten als Chips: kleine Glaspillen, der Preis in Gold. */
.anlass-chips {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.anlass-chips li {
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--rand); background: color-mix(in srgb, var(--karte) 55%, transparent);
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .04em; color: var(--leise);
}
.anlass-chips li.stark { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }

/* Das Geldgeschenk: Bild links, Text rechts, ein Knopf. */
.geld {
  max-width: 1280px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 48px) 8px;
  display: grid; gap: clamp(18px, 4vw, 44px); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.geld-bild {
  border-radius: 22px; padding: clamp(14px, 3vw, 32px);
  background:
    radial-gradient(70% 70% at 50% 45%, rgba(232, 176, 78, .28), transparent 72%),
    color-mix(in srgb, var(--karte) 50%, transparent);
  border: 1px solid var(--rand);
}
.geld-bild img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 30px rgba(8, 10, 14, .55)); }
.geld-text { display: grid; gap: 12px; justify-items: start; }
.geld-text h2 { margin: 0; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.1; letter-spacing: -.015em; }
.geld-text > p { margin: 0; color: var(--leise); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; max-width: 48ch; }
.geld-fakten { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 8px; }
.geld-fakten li { position: relative; padding-left: 24px; font-size: 15px; }
.geld-fakten li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, #dcb264, #a07731);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
@media (max-width: 760px) {
  .geld { grid-template-columns: 1fr; }
  .geld-bild { max-width: 360px; margin: 0 auto; width: 100%; }
  .geld-text { justify-items: center; text-align: center; }
  .geld-fakten li { text-align: left; }
}

/* Die Fragen: schlichte Aufklapper, der Pfeil dreht sich. */
.fragen { max-width: 880px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 48px) 12px; display: grid; gap: 14px; }
.fragen-liste { display: grid; gap: 8px; }
.fragen-liste details {
  border: 1px solid var(--rand); border-radius: 14px;
  background: color-mix(in srgb, var(--karte) 55%, transparent);
  padding: 0 16px; transition: border-color .18s;
}
.fragen-liste details[open] { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.fragen-liste summary {
  cursor: pointer; list-style: none; padding: 14px 30px 14px 0; position: relative;
  font-family: Georgia, "Iowan Old Style", serif; font-size: 17px;
}
.fragen-liste summary::-webkit-details-marker { display: none; }
.fragen-liste summary::after {
  content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font: 400 22px/1 Georgia, serif; transition: transform .2s;
}
.fragen-liste details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.fragen-liste p { margin: 0 0 14px; color: var(--leise); font-size: 15px; line-height: 1.55; }

/* Die Abschnitte tauchen beim Scrollen auf. */
.erscheint { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.erscheint.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .erscheint { opacity: 1; transform: none; transition: none; } }

/* Der Weg in drei Schritten: nummeriert, ruhig, ohne Bilder - die Karten
   darüber haben schon genug zu zeigen. */
/* --- Die drei Schritte ---------------------------------------------------

   Aussuchen, persönlich machen, drucken. Je Schritt eine Karte mit der
   Ziffer als goldenem Kreis darüber - vorher stand sie frei schwebend
   hinter der Schrift und überlagerte sie. */
.schritte {
  max-width: 1280px; margin: 0 auto;
  padding: 26px clamp(16px, 4vw, 48px) 10px;
  display: grid; gap: 16px;
}
.schritt-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.schritt-liste li {
  display: grid; gap: 8px; align-content: start;
  padding: 22px 22px 24px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
}
/* Die Ziffer steht in einem Kreis über der Zeile - sie zählt, sie
   schmückt nicht. */
.schritt-liste i {
  width: 38px; height: 38px; display: grid; place-items: center;
  margin-bottom: 4px; font-style: normal;
  font: 400 19px/1 Georgia, "Iowan Old Style", serif;
  color: var(--gold); border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.schritt-liste b {
  font: 600 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.schritt-liste span { color: var(--leise); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 620px) {
  .schritt-liste li { padding: 18px 18px 20px; }
}

/* --- Der zweite Bogen: die Anlässe ---

   Keine Bilder, nur Schrift: je Anlass ein schräg gestelltes Schild in
   Gold auf einer Glasfläche - dieselben Farben wie der Knopf darüber.
   Gewischt wird wie beim Kartenbogen, nur dass hier der Browser rollt. */
.anlaesse {
  max-width: 1280px; margin: 0 auto;
  padding: 2px clamp(16px, 4vw, 48px) 34px;
  display: grid; gap: 14px;
}
.anlass-bahn {
  display: flex; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Oben und unten Luft im Rollbereich: die Kachel in der Mitte hebt sich
     an und wirft einen Schatten - ohne diese Reserve schnitte der
     Rollbereich beides ab. Die Raender holen die Abstaende zurueck. */
  padding: 16px clamp(16px, 4vw, 48px) 26px; margin: -12px 0 -16px;
  /* Von Rand zu Rand, auch am Rechner: die Reihe soll laufen, nicht in
     der Spaltenbreite stecken. --fenster ist die Seitenbreite ohne
     Rollbalken (setzt app.js). */
  margin-inline: calc(50% - var(--fenster, 100vw) / 2);
  justify-content: safe center;
  scrollbar-width: none;
}
.anlass-bahn::-webkit-scrollbar { display: none; }
.anlass-bahn.zieht { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.anlass-bahn.zieht .anlass-kachel:hover { transform: none; }
.anlass-kachel {
  position: relative;
  /* Der Fächer ragt beim Öffnen über die Kachel hinaus - abgeschnitten
     sähe er aus wie ein Fehler. Die Kacheln dürfen sich außerdem die
     Breite teilen, damit am Rechner alle Anlässe hineinpassen. */
  flex: 0 1 auto; min-width: 208px; scroll-snap-align: center;
  display: grid; align-items: end; justify-items: start;
  cursor: pointer; text-decoration: none;
  width: 268px; height: 196px; padding: 12px;
  border-radius: 16px; border: 1px solid var(--rand);
  background: var(--karte);
  transform: translateY(calc(-5px * var(--auf, 0))) scale(calc(1 + .05 * var(--auf, 0)));
  box-shadow: 0 calc(16px * var(--auf, 0)) calc(34px * var(--auf, 0)) calc(-18px * var(--auf, 0)) rgba(8, 10, 14, .85);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
/* Drei Karten des Anlasses, perspektivisch gefächert - die mittlere steht
   frontal, die beiden anderen drehen sich weg. Liegt nur eine Karte im
   Anlass, ist es derselbe Stoß dreimal. */
.anlass-stapel {
  position: absolute; left: 0; right: 0; top: 10px; height: 136px;
  display: grid; place-items: center;
  perspective: 560px;
}
/* Die Blaetter sind Standbilder der Karte in 3D - mit eigenem Licht,
   eigener Kante und durchsichtigem Rundherum. Kein Papier und kein
   Kasten-Schatten darunter: beides braeuchte einen rechteckigen Rahmen,
   und den hat das Bild nicht. */
.anlass-blatt {
  position: absolute; width: 122px; height: 122px; object-fit: contain;
  transition: transform .3s cubic-bezier(.22, .9, .3, 1), filter .3s ease;
  filter: drop-shadow(0 10px 16px rgba(10, 12, 16, .55));
}
.anlass-blatt:nth-child(1) {
  transform:
    translateX(calc(-48px - 22px * var(--auf, 0)))
    rotateY(calc(42deg - 28deg * var(--auf, 0)))
    rotate(calc(-5deg + 2deg * var(--auf, 0)))
    scale(calc(.84 + .1 * var(--auf, 0)))
    translateZ(calc(14px * var(--auf, 0)));
}
.anlass-blatt:nth-child(2) {
  transform:
    translateX(calc(48px + 22px * var(--auf, 0)))
    rotateY(calc(-42deg + 28deg * var(--auf, 0)))
    rotate(calc(5deg - 2deg * var(--auf, 0)))
    scale(calc(.84 + .1 * var(--auf, 0)))
    translateZ(calc(14px * var(--auf, 0)));
}
.anlass-blatt:nth-child(3) {
  transform:
    translateY(calc(-3px - 5px * var(--auf, 0)))
    scale(calc(1.12 - .14 * var(--auf, 0)))
    translateZ(calc(34px * var(--auf, 0)));
}
/* Solange das Wischen den Wert Bild für Bild setzt, darf kein Übergang
   dazwischenfunken - der liefe der Bewegung hinterher. */
.anlass-bahn.fliessend .anlass-blatt { transition: none; }
.anlass-kachel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Dieselbe Rundung wie die Kachel: ohne sie saessen die eckigen Ecken
     des Verlaufs sichtbar in den runden der Kachel - man sah zwei Ecken
     uebereinander. */
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(18, 20, 24, 0) 46%, rgba(18, 20, 24, .5) 100%);
}
.anlass-kachel:hover { transform: translateY(-2px); border-color: var(--gold); }
.anlass-kachel:hover, .anlass-kachel.offen { z-index: 2; }

/* Zeigt der Mauszeiger darauf, faechert der Stapel auf: die drei Karten
   drehen sich nach vorn und ruecken auseinander, bis man jede ganz sieht.
   Am Handy gibt es kein Darueberfahren - dort bleibt der Stapel ruhig. */
.anlass-kachel.offen { border-color: var(--gold); }

/* Am Rechner entscheidet die Maus: worüber der Zeiger steht, das fächert
   auf. Die Mitte-Regel oben greift dort nicht (siehe app.js). */
@media (hover: hover) {
  .anlass-kachel:hover .anlass-blatt:nth-child(1),
  .anlass-kachel:focus-visible .anlass-blatt:nth-child(1) {
    transform: translateX(-70px) rotateY(14deg) rotate(-3deg) scale(.94) translateZ(14px);
  }
  .anlass-kachel:hover .anlass-blatt:nth-child(2),
  .anlass-kachel:focus-visible .anlass-blatt:nth-child(2) {
    transform: translateX(70px) rotateY(-14deg) rotate(3deg) scale(.94) translateZ(14px);
  }
  .anlass-kachel:hover .anlass-blatt:nth-child(3),
  .anlass-kachel:focus-visible .anlass-blatt:nth-child(3) {
    transform: translateY(-8px) scale(.98) translateZ(34px);
  }
  .anlass-kachel:hover .anlass-blatt,
  .anlass-kachel:focus-visible .anlass-blatt {
    filter: drop-shadow(0 14px 20px rgba(10, 12, 16, .6));
  }
}
@media (prefers-reduced-motion: reduce) {
  .anlass-blatt { transition: none; }
}
.anlass-schild {
  position: relative; z-index: 1;
  transform: skewX(-11deg);
  max-width: 100%; padding: 8px 14px; border-radius: 4px;
  background: linear-gradient(135deg, #dcb264 0%, #b98c41 55%, #a07731 100%);
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .42);
}
.anlass-schild span {
  display: block; transform: skewX(11deg); white-space: nowrap;
  font: 700 11.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: #241b10;
}
.anlass-kachel[aria-current="page"] { border-color: var(--gold); }
.anlass-kachel[aria-current="page"] .anlass-schild {
  box-shadow: 0 0 0 2px rgba(247, 244, 238, .55), 0 10px 20px -12px rgba(0, 0, 0, .75);
}
@media (max-width: 620px) {
  /* Von Rand zu Rand: die Nachbarkacheln schauen wirklich am Schirmrand
     herein. --fenster ist die Seitenbreite ohne Rollbalken (setzt app.js). */
  .anlass-bahn {
    margin-inline: calc(50% - var(--fenster, 100vw) / 2);
    /* Vorn und hinten so viel Luft, dass auch die erste und die letzte
       Kachel in die Mitte ruecken koennen - sonst waere die erste nie
       ganz aufgefaechert. */
    /* Die Kachelbreite steht einmal als Wert da: die Luft vorn und hinten
       haengt daran, sonst rueckte die erste Kachel nicht mittig. */
    --kachel: 290px;
    padding-left: calc((var(--fenster, 100vw) - var(--kachel)) / 2);
    padding-right: calc((var(--fenster, 100vw) - var(--kachel)) / 2);
  }
  .anlass-kachel { flex: 0 0 auto; width: var(--kachel, 290px); height: 210px; padding: 12px; }
  .anlass-stapel { top: 8px; height: 148px; perspective: 620px; }
  .anlass-blatt { width: 120px; height: 120px; }
  .anlass-blatt:nth-child(1) {
    transform:
      translateX(calc(-46px - 24px * var(--auf, 0)))
      rotateY(calc(42deg - 28deg * var(--auf, 0)))
      rotate(calc(-5deg + 2deg * var(--auf, 0)))
      scale(calc(.84 + .16 * var(--auf, 0)))
      translateZ(calc(30px * var(--auf, 0)));
  }
  .anlass-blatt:nth-child(2) {
    transform:
      translateX(calc(46px + 24px * var(--auf, 0)))
      rotateY(calc(-42deg + 28deg * var(--auf, 0)))
      rotate(calc(5deg - 2deg * var(--auf, 0)))
      scale(calc(.84 + .16 * var(--auf, 0)))
      translateZ(calc(30px * var(--auf, 0)));
  }
  .anlass-blatt:nth-child(3) {
    transform:
      translateY(calc(-4px - 6px * var(--auf, 0)))
      scale(calc(1.12 + .04 * var(--auf, 0)))
      translateZ(calc(34px * var(--auf, 0)));
  }
  .anlass-schild { padding: 8px 14px; }
  .anlass-schild span { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .anlass-kachel:hover { transform: none; } }

.knopfreihe { display: flex; gap: 12px; flex-wrap: wrap; }
.knopf {
  border: 1px solid var(--rand); background: var(--karte); color: var(--text);
  padding: 11px 20px; border-radius: 999px; font: inherit; font-size: 14.5px;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .18s, transform .18s, background .18s;
}
.knopf:hover { border-color: var(--gold); transform: translateY(-1px); }
.knopf.voll {
  background: var(--gruen); color: var(--papier); border-color: var(--gruen);
  box-shadow: 0 14px 30px -18px color-mix(in srgb, var(--gruen) 80%, transparent);
}
.knopf.gross { min-height: 54px; font-size: 15.5px; padding: 11px 24px; }
.knopf .pfeil { transition: transform .18s; }
.knopf:hover .pfeil { transform: translateX(3px); }
@media (prefers-color-scheme: dark) { .knopf.voll { color: #131a18; } }

/* --- Filterleiste --- */
.leiste {
  position: sticky; top: var(--kopf); z-index: 55;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  padding: 14px clamp(16px, 4vw, 48px);
  max-width: 1280px; margin: 0 auto;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(10px);
}
.pille {
  border: 1px solid var(--rand); background: transparent; color: var(--leise);
  border-radius: 999px; padding: 7px 15px; font: inherit; font-size: 14px; cursor: pointer;
}
.pille:hover { color: var(--text); }
.pille[aria-current="page"] { background: var(--gruen); border-color: var(--gruen); color: var(--papier); }
@media (prefers-color-scheme: dark) { .pille[aria-current="page"] { color: #131a18; } }
.leiste .zaehler { margin-left: auto; color: var(--leise); font-size: 14px; }

/* Die 3D-Leinwand liegt über ihrem Kasten, statt dessen Höhe mitzubestimmen -
   sonst schaukeln sich Kasten und Leinwand gegenseitig hoch. */
.einzel-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* --- Die Seite einer Karte (karte.html) --- */
/* Die Seite einer Karte füllt immer den ganzen Bildschirm: links die
   Bühne, rechts die Angaben. Keine Kopfzeile, kein Rahmen - die Karte
   soll wirken, nicht die Oberfläche. */
.kartenseite {
  position: fixed; inset: 0;
  /* Die Bühne bekommt alles, was die Angaben nicht brauchen. */
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 27vw, 440px);
  gap: 0; align-items: stretch;
  background: var(--karte); overflow: hidden;
}
.kartenseite .buehne {
  position: relative; min-height: 0; overflow: hidden; cursor: grab; touch-action: none;
  /* Ein mittleres Grau, unabhängig vom Hell/Dunkel-Thema: dunkel genug,
     damit das helle Papier heraussticht, hell genug, dass die Bühne nicht
     wie ein schwarzes Loch wirkt. */
  background:
    radial-gradient(780px 440px at 50% 44%, rgba(255, 255, 255, .10), transparent 72%),
    linear-gradient(180deg, #737b89 0%, #5d6572 60%, #4e5661 100%);
}
.kartenseite .buehne .tipp { color: rgba(255, 255, 255, .72); }
.kartenseite .buehne.greift { cursor: grabbing; }
/* Ruhiges Papierweiß mit einem Hauch Gold von oben, viel Luft und klare
   Stufen: Name, Preis, Handlung - und erst danach das Kleingedruckte. */
.kartenseite .angaben {
  padding: clamp(26px, 3vw, 46px) clamp(22px, 2.6vw, 38px) clamp(32px, 4vw, 56px);
  overflow: auto; min-height: 0;
  border-left: 1px solid var(--rand);
  background:
    radial-gradient(420px 220px at 100% -6%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%),
    var(--karte);
  scrollbar-width: thin; scrollbar-color: var(--rand) transparent;
}

/* Der Anlass mit feiner Linie: stellt die Karte in ihr Regal, ohne zu drängeln. */
.kartenseite .augenbraue { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.kartenseite .augenbraue::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 50%, transparent), transparent);
}
.kartenseite h1 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -.6px; margin: 0 0 6px; }
.kartenseite .unter { color: var(--leise); margin: 0; font-size: 15px; }
.kartenseite .beschreibung { color: var(--leise); margin: 16px 0 0; font-size: 15px; max-width: 42ch; }

.preis-zeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }
.kartenseite .preisgross { font-family: Georgia, serif; font-size: 34px; line-height: 1; margin: 0; }
.preis-notiz { font-size: 12.5px; color: var(--leise); }

/* Jeder Abschnitt hängt an einer Haarlinie - das ordnet, ohne Kästen zu bauen. */
.personalisierung,
.kartenseite .block {
  margin: clamp(22px, 2.6vw, 32px) 0 0;
  padding: clamp(20px, 2.4vw, 28px) 0 0;
  border-top: 1px solid var(--rand);
}
.feinkopf {
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--leise); margin: 0 0 14px;
}

/* Ansichtsschalter als Pillen: großes Ziel, sichtbarer Zustand. */
.optionen { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rand); background: var(--papier);
  font-size: 13.5px; color: var(--leise); user-select: none;
  transition: border-color .18s, color .18s, background .18s;
}
/* Muss nach .chip stehen: sonst überstimmt display:inline-flex das
   hidden-Merkmal, mit dem die Seite den Schein-Schalter wegnimmt. */
.chip[hidden] { display: none; }
.chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chip .punkt {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: transparent; border: 1.5px solid var(--leise);
  transition: background .18s, border-color .18s;
}
.chip:hover { border-color: var(--gold); color: var(--text); }
.chip:has(input:checked) {
  border-color: var(--gold); color: var(--text);
  background: color-mix(in srgb, var(--gold) 13%, var(--karte));
}
.chip:has(input:checked) .punkt { background: var(--gold); border-color: var(--gold); }
.chip:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Eckdaten: Bezeichnung links, Wert rechts, dazwischen Haarlinien. */
.eckdaten { margin: 0; font-size: 14px; }
.eckdaten > div {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--rand) 65%, transparent);
}
.eckdaten > div:first-child { border-top: 0; padding-top: 0; }
.eckdaten dt { color: var(--leise); flex: none; }
.eckdaten dd {
  margin: 0; text-align: right;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
}
.eckdaten .klein { width: 100%; color: var(--leise); font-size: 12.5px; }
.papier-tupfer {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 1px solid var(--rand); background: var(--papier);
}
.zusicherung {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 26px 0 0; font-size: 13px; color: var(--leise);
}
.zusicherung svg {
  width: 17px; height: 17px; flex: none; margin-top: 2px;
  fill: none; stroke: var(--gold); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Zurück-Pfeil auf der Bühne. */
.zurueck {
  /* env(): am Handy liegt die Seite unter der Statusleiste - ohne den
     Zuschlag wäre der Pfeil nur zur Hälfte zu sehen. */
  position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 16px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--rand); background: var(--karte); color: var(--text);
  text-decoration: none; font-size: 17px;
}
.zurueck:hover { border-color: var(--gold); }

@media (max-width: 900px) {
  /* Am Handy gilt nur die Karte: die Bühne nimmt den ganzen Schirm, die
     Angaben liegen als Blatt darunter bereit und kommen auf Zuruf herein. */
  /* Höhe und Anfang setzt karte.js nach dem sichtbaren Ausschnitt. */
  .kartenseite { display: block; bottom: auto; height: 100vh; height: 100svh; }
  .kartenseite .buehne {
    position: absolute; inset: 0;
    transition: height .3s ease;
  }

  /* Was am Handy nicht auf die Karte gehört: Kopfdaten, Eckdaten, Zusage -
     und der Startknopf, den draußen schon der Ruf-Knopf ersetzt. */
  .ware-kopf, .kartenseite .block, .zusicherung, #persStart { display: none; }

  /* Geschrieben wird direkt an der Karte: die Eingabe liegt als dunkle
     Glasleiste über dem 3D, nicht als weißer Kasten darunter. Die Bühne
     bleibt Vollbild und zoomt an das Feld heran. */
  .kartenseite .angaben {
    position: absolute; z-index: 5;
    left: 10px; right: 10px; top: auto;
    /* Die Tastatur legt sich über den unteren Rand; karte.js meldet, wie
       hoch sie ist, und die Leiste rückt so weit nach oben. */
    bottom: calc(12px + env(safe-area-inset-bottom) + var(--tastatur, 0px));
    max-height: 64vh; max-height: 64svh;
    padding: 10px 13px 12px;
    border: 1px solid rgba(255, 255, 255, .18); border-radius: 20px;
    background: rgba(16, 20, 26, .62); backdrop-filter: blur(14px);
    color: #fff;
    /* 100% ist die eigene Höhe - der Abstand zum unteren Rand kommt dazu,
       sonst lugt genau dieser Streifen (Home-Balken!) wieder herein.
       visibility hält die Leiste zusätzlich aus dem Weg, bis sie dran ist. */
    transform: translateY(calc(100% + 40px + env(safe-area-inset-bottom)));
    visibility: hidden;
    transition: transform .3s ease, bottom .2s ease, visibility 0s linear .3s;
    overscroll-behavior: contain;
  }
  .kartenseite.blatt-offen .angaben {
    transform: none; visibility: visible;
    transition: transform .3s ease, bottom .2s ease, visibility 0s;
  }
  /* Solange geschrieben wird, ist die Klappleiste im Weg. */
  .kartenseite.blatt-offen .klappen { display: none; }

  /* Auf der Leiste selbst soll nichts passieren, wenn man daneben tippt:
     kein Doppeltipp, der den Schirm heranzieht, kein Aufziehen mit zwei
     Fingern. Schieben und Scrollen bleiben - die Sprungziele stehen in
     einer geschobenen Zeile und das Textfeld muss rollen können. */
  .kartenseite .angaben { touch-action: pan-x pan-y; }

  .personalisierung { margin: 0; padding: 0; border-top: 0; }
  /* Was die Leiste nur hoch macht: Überschriften und der Dauerhinweis. */
  .personalisierung > .feinkopf, .pers-seite h4,
  .kartenseite .angaben #persAblauf > .pers-hinweis { display: none; }
  .kartenseite .angaben .schritt-kopf { margin-bottom: 10px; }
  /* Etwas mehr Luft nach oben: das ✕ sitzt in der Zeile darüber. */
  .kartenseite .angaben .schritt-balken { margin: 11px 0 8px; }
  /* Die Sprungziele bleiben in einer Zeile und werden geschoben. */
  .kartenseite .angaben .schritt-punkte {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  }
  .kartenseite .angaben .schritt-punkte::-webkit-scrollbar { display: none; }
  .kartenseite .angaben .schritt-punkte button { white-space: nowrap; }
  .kartenseite .angaben .pers-seite { margin: 0; }
  .kartenseite .angaben .pers-feld { margin-bottom: 0; gap: 3px; }
  /* 16px ist Pflicht: bei kleinerer Schrift zoomt iOS beim Antippen die
     ganze Seite heran - dann rutscht die Karte zur Seite und die Leiste
     steht über den Rand hinaus. */
  .kartenseite .angaben .pers-feld input,
  .kartenseite .angaben .pers-feld textarea { font-size: 16px; padding: 9px 12px; }
  .kartenseite .angaben .pers-feld input { min-height: 44px; }
  .kartenseite .angaben .pers-feld textarea { min-height: 84px; }

  /* Feld und Knöpfe teilen sich eine Zeile - das spart die halbe Leiste.
     Der Kopf (Schritt, Balken, Sprungziele) sitzt darüber. */
  .kartenseite .angaben #persAblauf {
    display: grid; grid-template-columns: auto 1fr auto;
    grid-template-areas: "kopf kopf kopf" "zurueck feld weiter";
    column-gap: 7px; align-items: end;
  }
  .kartenseite .angaben .schritt-kopf { grid-area: kopf; margin-bottom: 8px; }
  /* Im Umschlagschritt gibt es kein Eingabefeld: die beiden Papiere bekommen
     die ganze Breite, die Knöpfe rücken in die Zeile darunter. */
  .kartenseite .angaben #persAblauf:has(.pers-seite:not([hidden]) .umschlag-wahl) {
    grid-template-areas: "kopf kopf kopf" "feld feld feld" "zurueck . weiter";
    row-gap: 10px;
  }
  .kartenseite .angaben #persFelder { grid-area: feld; min-width: 0; }
  /* contents: die beiden Knöpfe rücken selbst ins Raster, einer links vom
     Feld, einer rechts - so liest sich die Zeile wie ein Weg. */
  .kartenseite .angaben .schritt-knoepfe { display: contents; }
  .kartenseite .angaben #schrittZurueck { grid-area: zurueck; }
  .kartenseite .angaben #schrittWeiter { grid-area: weiter; }
  .kartenseite .angaben .schritt-knoepfe .knopf {
    flex: none; min-height: 44px; padding: 10px 18px;
  }
  /* Zurück braucht kein Wort, das Zeichen genügt und spart die Breite. */
  .kartenseite .angaben #schrittZurueck { width: 44px; padding: 0; font-size: 0; }
  .kartenseite .angaben #schrittZurueck::before { content: "\2039"; font-size: 22px; line-height: 1; }

  /* Der Feldname steht schon im Sprungziel darüber - hier bleibt nur die
     Regel mit dem Zähler, rechtsbündig in einer schmalen Zeile. */
  /* Die Regel sitzt im Feld selbst, rechts am Rand: so kostet sie keine
     eigene Zeile. Der Feldname steht ohnehin schon im Sprungziel darüber. */
  .kartenseite .angaben .pers-feld { position: relative; }
  .kartenseite .angaben .feld-kopf {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    justify-content: flex-end; pointer-events: none;
  }
  .kartenseite .angaben .feld-kopf b { display: none; }
  .kartenseite .angaben .umschlag-knopf {
    background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24);
    color: rgba(255, 255, 255, .8);
  }
  .kartenseite .angaben .umschlag-knopf[aria-current="page"] {
    background: rgba(220, 178, 100, .92); border-color: rgba(255, 255, 255, .4); color: #241b10;
  }
  .kartenseite .angaben .pers-regel { font-size: 10.5px; white-space: nowrap; }
  /* Platz nur freihalten, wo auch eine Regel steht. */
  .kartenseite .angaben .pers-feld:has(.pers-regel:not(:empty)) input { padding-right: 96px; }
  /* Im mehrzeiligen Feld ist rechts kein Platz - dort unten in die Ecke. */
  .kartenseite .angaben .pers-feld:has(textarea) .feld-kopf {
    top: auto; bottom: 7px; transform: none;
  }
  .kartenseite .angaben .pers-feld:has(.pers-regel:not(:empty)) textarea { padding-bottom: 24px; }
  .kartenseite .angaben #schrittName { display: none; }
  .kartenseite .angaben .schritt-zeile { font-size: 12px; padding-right: 30px; }
  /* Mit aufgezogener Tastatur bleibt nur das Nötigste stehen. */
  .kartenseite.tastatur-auf .angaben .schritt-punkte { display: none; }
  .kartenseite.tastatur-auf .angaben .schritt-balken { margin: 5px 0 7px; }

  /* Alles Geschriebene hell auf Glas. */
  .kartenseite .angaben .schritt-zeile { color: rgba(255, 255, 255, .72); }
  .kartenseite .angaben #schrittZaehler { color: #fff; }
  /* Eigene Regel mit ID: die Grundregel für den Seitennamen hat auch eine,
     eine Klassenregel käme dagegen nicht an. */
  .kartenseite .angaben #schrittName { color: rgba(255, 255, 255, .6); }
  .kartenseite .angaben .schritt-balken { background: rgba(255, 255, 255, .2); }
  .kartenseite .angaben .schritt-punkte button {
    border-color: rgba(255, 255, 255, .28); color: rgba(255, 255, 255, .75);
  }
  .kartenseite .angaben .schritt-punkte button[aria-selected="true"] {
    color: #fff; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5);
  }
  .kartenseite .angaben .pers-feld span,
  .kartenseite .angaben .pers-regel,
  .kartenseite .angaben .pers-hinweis { color: rgba(255, 255, 255, .62); }
  .kartenseite .angaben .feld-kopf b { color: #fff; }
  .kartenseite .angaben .pers-feld input,
  .kartenseite .angaben .pers-feld textarea {
    background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); color: #fff;
  }
  .kartenseite .angaben .pers-feld input::placeholder,
  .kartenseite .angaben .pers-feld textarea::placeholder { color: rgba(255, 255, 255, .45); }
  .kartenseite .angaben .knopf {
    background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); color: #fff;
  }
  /* Der Weg nach vorn muss auf dem dunklen Glas sofort ins Auge fallen -
     Grün auf Anthrazit verschwindet darin fast. Also dasselbe Gold wie der
     Ruf über der Karte: gleiche Farbe, gleiche Bedeutung. */
  .kartenseite .angaben .knopf.voll {
    background: linear-gradient(135deg, #dcb264 0%, #b98c41 52%, #a07731 100%);
    border-color: transparent; color: #241b10; font-weight: 600;
    box-shadow:
      0 10px 24px -10px rgba(220, 178, 100, .5),
      inset 0 1px 0 rgba(255, 255, 255, .38);
  }
  .kartenseite .angaben .knopf.voll[disabled] { box-shadow: none; }
  .blatt-zu {
    border-color: rgba(255, 255, 255, .24);
    background: rgba(255, 255, 255, .14); color: #fff;
  }
}

/* --- Bedienung auf der Kartenseite --- */
.buehne .tipp {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  color: var(--leise); font-size: 12.5px; letter-spacing: .04em; pointer-events: none;
}
.vollbild-knopf {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--rand); background: var(--karte); color: var(--text); font-size: 15px; line-height: 1;
}
body.seite-karte { overflow: hidden; }

/* Auf- und Zuklappen gehört an die Karte, nicht in die Spalte daneben:
   die Leiste sitzt am Rand der Bühne, wo auch der Blick ist. */
.klappen {
  position: absolute; z-index: 3;
  right: clamp(10px, 1.5vw, 20px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 8px; border-radius: 30px;
  background: rgba(18, 22, 28, .42); border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(9px); color: #fff;
}
.klapp-knopf {
  display: grid; place-items: center;
  width: 42px; height: 42px; cursor: pointer;
  border: 1px solid transparent; border-radius: 50%;
  background: transparent; color: inherit; font: inherit;
}
.klapp-knopf svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.klapp-knopf:hover { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .25); }
.klapp-knopf:active { background: rgba(255, 255, 255, .24); }
.klapp-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Dazwischen der Regler für jeden Zwischenwinkel - oben offen, unten zu. */
.klapp-regler { display: grid; justify-items: center; gap: 6px; }
.klapp-regler input[type="range"] {
  writing-mode: vertical-lr; direction: rtl;   /* oben = ganz offen */
  -webkit-appearance: slider-vertical;
  width: 20px; height: clamp(86px, 15vh, 140px);
  accent-color: var(--gold); background: transparent; cursor: pointer;
}
.klapp-regler span {
  font-size: 11px; color: rgba(255, 255, 255, .75);
  font-variant-numeric: tabular-nums;
}
.klapp-trenner {
  width: 30px; height: 1px; margin: 2px 0;
  background: rgba(255, 255, 255, .22);
}

/* Zurückhaltend in der oberen Ecke: klappt die Karte auf und zu. Am
   Rechner unsichtbar, dort gibt es Doppelklick und Leiste. */
.ecke-oben {
  display: none;
  position: absolute; z-index: 4;
  top: calc(14px + env(safe-area-inset-top)); right: 16px;
  gap: 6px;
}
.klapp-ecke {
  display: none;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  place-items: center; padding: 0;
  /* Goldener Rand statt weißem Haarstrich: die drei Knöpfe stehen vor
     einem ruhigen Grau und wurden schlicht übersehen. */
  border: 1px solid color-mix(in srgb, var(--gold) 72%, transparent);
  background: rgba(18, 22, 28, .5); backdrop-filter: blur(9px);
  color: #f8e8c6;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .8);
}
.klapp-ecke:hover {
  background: rgba(18, 22, 28, .68);
  border-color: var(--gold); color: #fff;
}
.klapp-ecke svg {
  width: 20px; height: 20px; grid-area: 1 / 1;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.klapp-ecke .zeichen-zu { display: none; }
/* Eingeschaltet leuchtet der Knopf golden - man sieht, was gerade an ist.
   Die Schalter melden ihren Zustand als aria-pressed; die Regel galt
   bisher nur fuer aria-current und griff deshalb nie. */
.klapp-ecke[aria-current="page"],
.klapp-ecke[aria-pressed="true"] {
  background: rgba(220, 178, 100, .92); color: #241b10;
  border-color: rgba(255, 255, 255, .45);
  box-shadow: 0 0 0 3px rgba(220, 178, 100, .22), 0 6px 16px -8px rgba(0, 0, 0, .8);
}
.klapp-ecke[aria-pressed="true"]:hover {
  background: rgba(228, 190, 120, .96); color: #241b10;
}
.klapp-ecke[data-offen="true"] .zeichen-auf { display: none; }
.klapp-ecke[data-offen="true"] .zeichen-zu { display: block; }

/* Beides gibt es nur am Handy: der Knopf holt das Blatt mit den Angaben
   herein, das ✕ schickt es wieder weg. Am Rechner steht alles nebeneinander. */
.pers-ruf, .blatt-zu { display: none; }
.pers-ruf {
  position: absolute; z-index: 4;
  left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  white-space: nowrap;
}

/* Der Ruf zum Personalisieren: Gold wie die Folie auf den Karten. Das ist
   die eine Handlung auf dieser Seite, sie darf sich vom Rest abheben. */
.pers-ruf, #persStarten {
  /* position bleibt bei jedem selbst: der schwebende Knopf steht absolut
     über der Bühne, der in der Spalte im Fluss. */
  overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .01em;
  color: #241b10;
  background: linear-gradient(135deg, #dcb264 0%, #b98c41 52%, #a07731 100%);
  box-shadow:
    0 14px 30px -12px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.pers-ruf:hover, #persStarten:hover {
  transform: translateX(-50%) translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 20px 38px -14px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
}
#persStarten:hover { transform: translateY(-2px); }
.pers-ruf:active, #persStarten:active { filter: brightness(.96); }
.pers-ruf:active { transform: translateX(-50%) translateY(0) scale(.98); }
#persStarten:active { transform: scale(.98); }
.pers-ruf:focus-visible, #persStarten:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
/* Der Preis über dem Knopf - am Handy die einzige Stelle, an der er steht. */
.preis-schwebt {
  display: none;
  position: absolute; z-index: 4;
  /* Oben in der Zeile mit den Knöpfen: zwischen dem Zurück-Pfeil links
     und den Eckknöpfen rechts, in dem Feld dazwischen mittig. */
  top: calc(14px + env(safe-area-inset-top)); left: 62px; right: 142px;
  /* margin-block: 0 ist nötig - als Absatz brächte der Preis sonst die
     Standardabstände mit und stünde tiefer als die Knöpfe daneben. */
  width: fit-content; margin: 0 auto;
  height: 38px; padding: 0 15px; border-radius: 999px;
  align-items: center; gap: 8px; white-space: nowrap;
  background: rgba(16, 20, 26, .5); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .16); color: #fff;
}
.preis-schwebt b { font-family: Georgia, serif; font-weight: 400; font-size: 19px; }
.preis-schwebt span { font-size: 12px; color: rgba(255, 255, 255, .62); }

/* Der schwebende Ruf gehört ans Handy - am Rechner steht er in der Spalte.
   Die Regel muss hinter dem gemeinsamen Block stehen, der ein display setzt. */
.pers-ruf { display: none; }
.pers-ruf .pfeil, #persStarten .pfeil { transition: transform .2s ease; }
.pers-ruf:hover .pfeil, #persStarten:hover .pfeil { transform: translateX(4px); }

/* Ein Lichtstreif wandert alle paar Sekunden darüber - wie ein Glanz auf
   der Prägefolie. Und ein Ring, der einmal pro Runde nach außen atmet. */
@media (prefers-reduced-motion: no-preference) {
  .pers-ruf::after, #persStarten::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg,
      transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%);
    transform: translateX(-120%);
    animation: glanz 4.5s ease-in-out infinite;
  }
  .pers-ruf::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(220, 178, 100, .6);
    animation: atmen 4.5s ease-out infinite;
  }
}
@keyframes glanz {
  0%, 62% { transform: translateX(-120%); }
  86%, 100% { transform: translateX(220%); }
}
@keyframes atmen {
  0%, 70% { box-shadow: 0 0 0 0 rgba(220, 178, 100, .6); }
  100% { box-shadow: 0 0 0 16px rgba(220, 178, 100, 0); }
}
/* Klein und in der Zeile des Schrittzählers - also über dem Balken, nicht
   auf der Kante der Leiste. */
.blatt-zu {
  position: absolute; z-index: 6; top: 8px; right: 11px;
  width: 24px; height: 24px; border-radius: 50%; place-items: center; cursor: pointer;
  border: 1px solid var(--rand); background: var(--papier); color: var(--text);
  font: inherit; font-size: 12px; line-height: 1;
}


/* Schmale Fenster: die Leiste legt sich quer unter die Karte. Diese Regeln
   stehen bewusst nach den Grundregeln - sonst gewinnen die wieder. */
@media (max-width: 900px) {
  /* Die Ansicht sammelt sich unten rechts, das Auf- und Zuklappen oben
     rechts - beide auf derselben Achse (Mitte 35 px vom rechten Rand). */
  .klappen {
    left: auto; right: 11px; top: auto;
    bottom: calc(12px + env(safe-area-inset-bottom));
    transform: none; flex-direction: column; gap: 3px; padding: 5px;
    border-radius: 24px;
  }
  .klapp-knopf { width: 38px; height: 38px; }
  /* Auf- und Zuklappen macht am Handy der Knopf in der Ecke. Hier bleibt
     nur, was die Ansicht betrifft: näher, weiter, zurücksetzen. */
  .klappen #btnAuf, .klappen #btnZu,
  .klappen .klapp-regler, .klappen .klapp-trenner { display: none; }
  .klapp-knopf svg { width: 19px; height: 19px; }
  .klapp-trenner { width: 1px; height: 30px; margin: 0 2px; }
  .klapp-regler { gap: 2px; }
  .klapp-regler input[type="range"] {
    writing-mode: horizontal-tb; direction: ltr; -webkit-appearance: auto;
    width: clamp(70px, 21vw, 120px); height: 18px;
  }
  .buehne .tipp { display: none; }
  /* Hier, nicht im Block weiter oben: die Grundregeln der beiden Knöpfe
     stehen dazwischen und würden ein display von dort überstimmen. */
  .ecke-oben { display: flex; }
  .preis-schwebt { display: flex; }
  .klapp-ecke { display: grid; }
  /* Muss nach der Zeile darüber stehen, sonst zeigt display:grid auch den
     Schein-Knopf bei Karten ganz ohne Stanzung. */
  .klapp-ecke[hidden] { display: none; }
  /* Beim Ausfüllen führt der Ablauf die Karte selbst - dann sind die
     Eckknöpfe nur im Weg. */
  .kartenseite.blatt-offen .ecke-oben { display: none; }
  /* Rechts unten steht die Knopfsäule fürs Zoomen. Der Ruf steht deshalb
     nicht in der Mitte des Schirms, sondern in der Mitte des freien Felds
     daneben - sonst schiebt sich sein Ende unter die Knöpfe, sobald er
     "Personalisierung fortsetzen" heißt. Etwas kleiner ist er dafür auch,
     damit er auf schmalen Geräten nicht an beiden Rändern ansteht. */
  .pers-ruf {
    display: inline-flex;
    left: calc(50% - 30px);
    font-size: 15px; padding: 13px 22px; gap: 8px;
  }
  .pers-ruf[hidden], .kartenseite.blatt-offen .pers-ruf { display: none; }
  /* Beim Ausfüllen zählt nur das Feld - der Preis steht wieder da, wenn
     die Leiste zu ist. */
  .kartenseite.blatt-offen .preis-schwebt { display: none; }
  .blatt-zu { display: grid; }
}

.schalter {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-size: 14.5px; color: var(--leise); cursor: pointer;
}
.schalter input { width: auto; accent-color: var(--gold); }

/* --- Personalisierung --- */
.pers-start .knopf { width: 100%; justify-content: center; margin-top: 10px; }
#persStarten { position: relative; width: 100%; min-height: 54px; }
.pers-seite { margin: 0 0 18px; }
.pers-seite h4 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.pers-feld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.pers-feld span { font-size: 13px; color: var(--leise); }
.feld-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.feld-kopf b { font-weight: 600; color: var(--text); }
.pers-feld input, .pers-feld textarea {
  background: var(--papier); border: 1px solid var(--rand); border-radius: 10px;
  padding: 11px 12px; color: var(--text); font: inherit; font-size: 15px; min-height: 46px;
}
.pers-feld textarea { min-height: 120px; resize: vertical; }
.pers-feld input:focus, .pers-feld textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.pers-hinweis { color: var(--leise); font-size: 13px; margin: 6px 0 0; }
.pers-regel { color: var(--leise); font-size: 12.5px; }

/* Die Wahl des Umschlags: zwei Papiere, jedes mit seinem Farbtupfer. */
.umschlag-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.umschlag-knopf {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 15px 10px 11px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--rand); background: var(--papier); color: var(--leise);
  font: inherit; font-size: 14px;
  transition: border-color .18s, color .18s, background .18s;
}
.umschlag-knopf i {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: inset -3px -3px 6px rgba(0, 0, 0, .08);
}
.umschlag-knopf:hover { border-color: var(--gold); color: var(--text); }
.umschlag-knopf[aria-current="page"] {
  border-color: var(--gold); color: var(--text);
  background: color-mix(in srgb, var(--gold) 13%, var(--karte));
}

/* --- Geführter Ablauf --- */
.schritt-kopf { margin: 0 0 16px; }
.schritt-zeile { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.schritt-zeile #schrittZaehler { color: var(--gold); font-weight: 600; letter-spacing: .04em; }
.schritt-zeile #schrittName { color: var(--leise); }
.schritt-balken { height: 4px; border-radius: 999px; background: var(--rand); margin: 8px 0 10px; overflow: hidden; }
.schritt-balken i { display: block; height: 100%; background: var(--gold); transition: width .35s ease; }
.schritt-punkte {
  display: flex; gap: 6px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.schritt-punkte::-webkit-scrollbar { display: none; }
.schritt-punkte button {
  border: 1px solid var(--rand); background: transparent; color: var(--leise);
  border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer;
  flex: 0 0 auto; white-space: nowrap;
}
.schritt-punkte button[aria-selected="true"] {
  border-color: var(--gold); color: var(--text); background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.schritt-punkte button.fertig::after { content: " ✓"; color: var(--gold); }
/* Der Reihe nach: was noch nicht dran war, lässt sich nicht anspringen. */
.schritt-punkte button[disabled] { opacity: .38; cursor: default; }
.schritt-knoepfe { display: flex; gap: 10px; margin: 14px 0; }
.schritt-knoepfe .knopf { flex: 1; justify-content: center; }
.schritt-knoepfe .knopf[disabled] { opacity: .45; cursor: default; }

.schliessen {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--rand); background: var(--karte); color: var(--text); font-size: 18px; line-height: 1;
}

/* Versteckt heisst versteckt: .knopf und .korb-summe bringen ein eigenes
   display mit, und das gewinnt sonst gegen das [hidden] des Browsers -
   dann stand "Zur Kasse" auch bei leerem Korb da. */
[hidden] { display: none !important; }

/* --- Warenkorb --- */
/* Die Meldung legt sich über die Bühne, sobald die Karte im Umschlag
   und im Korb ist - sie soll die Karte nicht verdecken, nur bestätigen. */
.korb-meldung {
  position: absolute; z-index: 6;
  left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 12px;
  padding: 16px 20px; border-radius: 20px; text-align: center;
  background: rgba(16, 20, 26, .62); backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .18); color: #fff;
}
/* Muss nach der Regel darüber stehen, sonst zeigt display:grid die
   Meldung auch, solange sie noch gar nichts zu melden hat. */
.korb-meldung[hidden] { display: none; }
.korb-meldung p { margin: 0; font-size: 15px; }

.korbseite { max-width: 900px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 4vw, 48px) 40px; }
.korbseite h1 { font-size: clamp(30px, 4vw, 44px); margin: 8px 0 26px; }
.korb-liste { display: grid; gap: 14px; }
.korb-posten {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 18px 20px; border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--karte);
}
.korb-bild {
  flex: none; width: 140px; border-radius: 12px; overflow: hidden;
  background: var(--papier); border: 1px solid var(--rand);
}
.korb-bild img { display: block; width: 100%; height: auto; }
.korb-bild:hover { border-color: var(--gold); }
.korb-posten h2 { font-size: 21px; margin: 0; }
.korb-aendern {
  display: inline-block; margin-top: 12px;
  font-size: 13.5px; color: var(--gold);
}
.korb-posten h2 a { text-decoration: none; }
.korb-posten h2 a:hover { color: var(--gold); }
.korb-unter { margin: 4px 0 0; color: var(--leise); font-size: 14px; }
.korb-werte {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 14px;
  margin: 12px 0 0; font-size: 14px;
}
.korb-werte dt { color: var(--leise); }
.korb-werte dd { margin: 0; }
.korb-posten > div:not(.korb-rechts) { flex: 1; min-width: 0; }
.korb-rechts { display: grid; justify-items: end; gap: 10px; flex: none; }
.korb-rechts b { font-family: Georgia, serif; font-size: 21px; font-weight: 400; }
.korb-weg {
  border: 0; background: transparent; color: var(--leise); cursor: pointer;
  font: inherit; font-size: 13px; text-decoration: underline; padding: 0;
}
.korb-weg:hover { color: var(--text); }
.korb-summe {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--rand);
}
.korb-summe b { font-family: Georgia, serif; font-size: 28px; font-weight: 400; }
.korbseite .knopfreihe { margin-top: 22px; }
.leer { color: var(--leise); }

.fussleiste {
  border-top: 1px solid var(--rand); padding: 28px clamp(16px, 4vw, 48px) 46px;
  color: var(--leise); font-size: 14px; max-width: 1280px; margin: 0 auto;
  display: flex; gap: 18px; flex-wrap: wrap;
}
.fussleiste a { color: var(--leise); }

/* Am Handy müssen Held, Name und Navigation in eine Zeile. */
@media (max-width: 620px) {
  .kopf { gap: 10px; padding: 0 14px; }
  .marke { font-size: 18px; gap: 5px; }
  .marke img { height: 48px; }
  .kopf nav { gap: 10px; font-size: 13.5px; }
  .korb-knopf, .profil-knopf { width: 38px; height: 38px; }
  .korb-knopf svg, .profil-zeichen svg { width: 19px; height: 19px; }
}

@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; max-height: 94vh; }
  .detail .buehne { min-height: 46vh; }
}

/* --- Die Startseite: grau, golden, ruhig - am Handy wie am Rechner ---

   Dieselbe Sprache wie die Personalisierung auf der Kartenseite: fast
   schwarzer Grund, ein warmer Schimmer darüber, Gold nur dort, wo etwas
   zu tun ist. Die Karten sind hell und stehen dadurch frei im Raum -
   auf Papierfarbe verschwimmen sie mit dem Hintergrund. */
  /* Derselbe Grund wie die Bühne der Kartenseite - dasselbe Blaugrau,
     derselbe Verlauf, dieselbe helle Mitte. Startseite und Designer sollen
     eine Fläche sein, nicht zwei; mit Schwarz hier und Grau dort sah es
     nach zwei Welten aus. */
  body.seite-start { overflow-x: hidden; }
  body.seite-start, body.seite-korb {
    --papier: #5d6572;
    --papier-tief: #4e5661;
    --karte: #6b7381;
    --rand: rgba(255, 255, 255, .2);
    --text: #f7f4ee;
    --leise: rgba(247, 244, 238, .68);
    --gold: #e3c07a;
    background:
      radial-gradient(130% 62% at 50% -18%, rgba(232, 176, 78, .78), transparent 62%),
      radial-gradient(90% 40% at 50% 116%, rgba(232, 176, 78, .26), transparent 60%),
      radial-gradient(780px 440px at 50% 40%, rgba(255, 255, 255, .08), transparent 72%),
      linear-gradient(180deg, #737b89 0%, #5d6572 60%, #4e5661 100%);
    background-repeat: no-repeat;
    min-height: 100svh;
    color: var(--text);
  }

  /* Die eine Handlung auf der Seite trägt Gold, alles andere hält sich
     zurück. */
  body.seite-start .knopf.voll, body.seite-korb .knopf.voll {
    background: linear-gradient(135deg, #dcb264 0%, #b98c41 52%, #a07731 100%);
    border-color: transparent; color: #241b10; font-weight: 600;
    box-shadow:
      0 16px 34px -14px rgba(220, 178, 100, .5),
      inset 0 1px 0 rgba(255, 255, 255, .38);
  }
  body.seite-start .knopf.voll:hover, body.seite-korb .knopf.voll:hover { transform: none; }

  body.seite-start .pille, body.seite-korb .pille {
    background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2);
    color: rgba(247, 244, 238, .78);
  }
  body.seite-start .pille[aria-current="page"], body.seite-korb .pille[aria-current="page"] {
    background: linear-gradient(135deg, #dcb264, #a07731);
    border-color: transparent; color: #241b10; font-weight: 600;
  }

  /* Anlass und Name: der Anlass fein und gesperrt, der Name groß und
     ruhig - das trägt die Seite. */
  body.seite-start .anlass-kachel {
    background: linear-gradient(140deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
    border-color: rgba(255, 255, 255, .16);
    box-shadow: 0 18px 34px -26px rgba(0, 0, 0, .8);
  }
  body.seite-start .anlass-kachel[aria-current="page"] {
    border-color: var(--gold); background: rgba(227, 192, 122, .16);
  }
  body.seite-start .korb-knopf, body.seite-start .profil-knopf,
  body.seite-korb .korb-knopf, body.seite-korb .profil-knopf {
    background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .28);
    color: #f6f2e9; box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .9);
  }
  body.seite-start .korb-knopf:hover, body.seite-start .profil-knopf:hover,
  body.seite-korb .korb-knopf:hover, body.seite-korb .profil-knopf:hover {
    background: rgba(255, 255, 255, .2); border-color: var(--gold);
  }

  /* Die Pfeile am Bogen: Glas, durch das die Karte durchscheint - aber
     mit dunklem Grund, hellem Ring und weißem Zeichen. So steht der Pfeil
     vor einer weißen wie vor einer dunklen Karte. */
  body.seite-start .bogen-knopf {
    background: rgba(16, 18, 24, .34);
    border-color: rgba(255, 255, 255, .5);
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
    box-shadow:
      0 10px 24px -12px rgba(0, 0, 0, .55),
      inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  body.seite-start .bogen-knopf:hover {
    background: rgba(16, 18, 24, .46);
    border-color: var(--gold);
    color: #ffe9bb;
  }

/* Keine Kopfleiste mehr. Der Balken hat die Seite oben abgeschnitten;
   ohne ihn läuft der goldene Staub bis an die obere Kante durch. Was
   darauf saß, schwebt jetzt frei darüber: das Logo links, Profil und Korb
   rechts. Kein Weichzeichner - auf iOS zwingt ein backdrop-filter über
   einer laufenden 3D-Fläche den Browser, den Bereich bei jedem Bild neu
   zu verwischen, und das kostet genau die Bilder, die dem Bogen fehlen. */
  body.seite-start .kopf, body.seite-korb .kopf {
    /* Der Kopf laeuft oben aus dem Bild: er haengt nicht mehr fest. Ohne
       Balken haette ein mitlaufender Kopf ohnehin nur Text ueber den
       Karten - so gehoert die Flaeche beim Scrollen ganz den Karten. */
    position: static;
    background: none; border-bottom: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    /* Der leere Streifen nimmt keine Berührung mehr an, sonst schluckte
       er Wischer, die dem Bogen darunter gelten. */
    pointer-events: none;
  }
  body.seite-start .kopf > *, body.seite-korb .kopf > * { pointer-events: auto; }

  /* Ohne Balken trägt jedes Zeichen seine Lesbarkeit selbst: heller
     Schriftzug mit weichem Schatten, darunter der Held mit eigenem. */
  body.seite-start .kopf .marke, body.seite-korb .kopf .marke {
    color: #f6f2e9; text-shadow: 0 2px 14px rgba(10, 12, 16, .6);
  }
  body.seite-start .kopf .marke img, body.seite-korb .kopf .marke img {
    filter: drop-shadow(0 5px 12px rgba(10, 12, 16, .55));
  }
  body.seite-start .kopf .kopf-nav a, body.seite-korb .kopf .kopf-nav a {
    color: rgba(246, 242, 233, .74); text-shadow: 0 1px 10px rgba(10, 12, 16, .6);
  }
  body.seite-start .kopf .kopf-nav a:hover, body.seite-korb .kopf .kopf-nav a:hover { color: #f6f2e9; }
  body.seite-start .kopf .kopf-nav a[aria-current="page"],
  body.seite-korb .kopf .kopf-nav a[aria-current="page"] { color: #e8c37d; }

  /* Die Posten im Korb: helles Glas auf dem Grau, das Bild darin heller
     als die Karte, damit die Karte selbst frei im Raum steht. */
  body.seite-korb .korb-posten {
    background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .8);
  }
  body.seite-korb .korb-bild { background: rgba(255, 255, 255, .14); }
  body.seite-korb .knopf:not(.voll) {
    background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .2);
  }

/* Ein leeres Eingabefeld pulsiert golden: hier fehlt noch etwas. Sobald
   das erste Zeichen drinsteht, ist Ruhe - das Leuchten ist ein Hinweis,
   keine Dauerdeko. */
@keyframes feld-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(227, 192, 122, 0), 0 0 0 rgba(227, 192, 122, 0); border-color: rgba(227, 192, 122, .55); }
  50% { box-shadow: 0 0 0 3px rgba(227, 192, 122, .32), 0 0 22px rgba(227, 192, 122, .6); border-color: #e3c07a; }
}
.pers-feld input.leer, .pers-feld textarea.leer {
  animation: feld-puls 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pers-feld input.leer, .pers-feld textarea.leer { animation: none; border-color: #e3c07a; }
}

/* Die Messanzeige (?fps): klein, oben rechts, nach Güte gefärbt. */
.fps-anzeige {
  position: fixed; right: 10px; bottom: 10px; z-index: 99;
  padding: 6px 10px; border-radius: 999px;
  font: 600 12px/1 system-ui, sans-serif; color: #fff;
  background: rgba(30, 90, 50, .85); pointer-events: none;
}
.fps-anzeige[data-stufe="mittel"] { background: rgba(150, 110, 20, .9); }
.fps-anzeige[data-stufe="schlecht"] { background: rgba(160, 40, 40, .9); }




/* Der Hinweis auf dem Bogen: er gehoert zur Vorfuehrung und verschwindet,
   sobald jemand selbst greift. Er faengt keine Beruehrung ab - der Finger
   soll durch ihn hindurch den Bogen treffen. */
.bogen-tipp {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 8px 16px; border-radius: 999px;
  background: rgba(16, 18, 24, .34);
  border: 1px solid rgba(255, 255, 255, .26);
  color: rgba(255, 255, 255, .92);
  font-size: 13px; letter-spacing: .01em; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity .5s ease;
}
.bogen-tipp.da { opacity: 1; }
.bogen-tipp[hidden] { display: none; }
.bogen-tipp i { width: 4px; height: 4px; border-radius: 999px; background: var(--gold); }
@media (max-width: 420px) { .bogen-tipp { font-size: 12px; padding: 7px 13px; gap: 8px; } }


/* --- Die Fußzeile -------------------------------------------------------

   Vier Blöcke: die Marke mit einem Satz zum Produkt, die Pflichtseiten,
   die Karten und der Kontakt. Am Handy stehen sie untereinander. */
.fuss {
  border-top: 1px solid var(--rand);
  margin-top: 40px;
  padding: 34px clamp(16px, 4vw, 48px) 0;
  color: var(--leise); font-size: 14px;
}
.fuss-inhalt {
  max-width: 1280px; margin: 0 auto;
  display: grid; gap: 28px;
  grid-template-columns: minmax(240px, 1.6fr) repeat(3, minmax(140px, 1fr));
}
.fuss-marke { display: flex; gap: 12px; align-items: flex-start; }
.fuss-marke img { height: 56px; width: auto; flex: none; filter: drop-shadow(0 4px 10px rgba(10, 12, 16, .45)); }
.fuss-marke b {
  display: block; margin-bottom: 6px;
  font: 800 18px/1 "Nunito", "Quicksand", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.01em; color: var(--text);
}
.fuss-marke p { margin: 0; line-height: 1.6; max-width: 42ch; }
.fuss-spalte { display: flex; flex-direction: column; gap: 9px; }
.fuss-spalte b { color: var(--text); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.fuss-spalte a { color: var(--leise); text-decoration: none; }
.fuss-spalte a:hover { color: var(--gold); }
.fuss-zeile {
  max-width: 1280px; margin: 26px auto 0;
  padding: 16px 0 34px; border-top: 1px solid var(--rand);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px;
}
.fuss-zeile a { color: var(--leise); text-decoration: none; }
.fuss-zeile a:hover { color: var(--gold); }
@media (max-width: 760px) {
  .fuss-inhalt { grid-template-columns: 1fr 1fr; gap: 24px; }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .fuss-inhalt { grid-template-columns: 1fr; }
}

/* Die schmale Zeile auf der Kartenseite: dort gibt es keine Fußzeile, die
   Pflichtseiten müssen aber von überall erreichbar sein. */
.recht-zeile {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 18px 0 0; font-size: 13px;
}
.recht-zeile a { color: var(--leise); text-decoration: none; }
.recht-zeile a:hover { color: var(--gold); }

/* --- Die Rechtsseiten ---------------------------------------------------

   Reiner Text, eine Spalte, ruhig zu lesen. Kein Bogen, keine Bewegung. */
.rechtsseite {
  max-width: 780px; margin: 0 auto;
  padding: clamp(20px, 5vw, 48px) clamp(16px, 4vw, 48px) 20px;
  line-height: 1.7;
}
.rechtsseite h1 { font-size: clamp(28px, 4vw, 40px); margin: 8px 0 22px; }
.rechtsseite h2 {
  font: 400 21px/1.3 Georgia, "Iowan Old Style", serif;
  margin: 30px 0 8px; color: var(--text);
}
.rechtsseite p, .rechtsseite li { color: var(--leise); }
.rechtsseite a { color: var(--gold); }
.rechtsseite ul { padding-left: 20px; display: grid; gap: 8px; }
.rechtsseite .vorspann {
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 16px 18px; background: rgba(255, 255, 255, .06);
}
.rechtsseite .vorspann b { color: var(--text); }
.rechtsseite .hinweis { font-size: 13px; font-style: italic; }
.rechtsseite .anschrift, .rechtsseite .formularkasten {
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 16px 18px; background: rgba(255, 255, 255, .06);
}
.rechtsseite .formularkasten p { margin: 0 0 14px; }
.rechtsseite .formularkasten p:last-child { margin-bottom: 0; }
.rechtsseite .stand { margin-top: 34px; font-size: 13px; }


/* Der untere Rand des Bogens: die Karten werfen Schatten auf den Boden,
   und die Leinwand schnitt sie an ihrer Unterkante glatt ab - das sah aus
   wie ein schwarzer Balken quer ueber die Seite. Die Maske laesst die
   letzten Prozent der Flaeche ausblenden, damit Schatten und Staub weich
   in die Seite uebergehen. */
.karussell-leinwand {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, .55) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, .55) 90%, transparent 100%);
}


/* Die Fußzeile bekommt einen eigenen, dunkleren Grund - so sieht man,
   dass die Seite hier zu Ende ist. Der Übergang läuft über die ersten
   120 Pixel weich an, eine harte Kante wäre ein Balken quer über die
   Seite. Die feine Linie oben bleibt als Abschluss. */
body.seite-start .fuss, body.seite-korb .fuss {
  border-top-color: rgba(255, 255, 255, .1);
  background:
    linear-gradient(180deg,
      rgba(10, 12, 17, .06) 0,
      rgba(10, 12, 17, .30) 120px,
      rgba(10, 12, 17, .38) 100%);
}
body.seite-start .fuss .fuss-zeile, body.seite-korb .fuss .fuss-zeile {
  border-top-color: rgba(255, 255, 255, .1);
}


/* Was die Karte kostet: eine ruhige Zeile unter dem Bogen. Der Betrag
   traegt, der Rest erklaert. */
.preis-zeile {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 4px 10px;
  margin: 2px 0 0; text-align: center;
}
.preis-zeile[hidden] { display: none; }
.preis-zeile b {
  font: 400 21px/1.2 Georgia, "Iowan Old Style", serif;
  color: var(--text);
}
.preis-zeile span { font-size: 13.5px; color: var(--leise); }
@media (max-width: 620px) {
  .preis-zeile { gap: 2px 8px; }
  .preis-zeile b { font-size: 19px; }
  .preis-zeile span { font-size: 12.5px; }
}


/* Das Banner auf dem Bogen: oben links ueber den Karten, mit goldener
   Kante und dunklem Glas dahinter - damit es auf hellen wie auf dunklen
   Karten steht. Es faengt keine Beruehrung ab.

   Beide Zeilen stehen einzeilig: umbrochen saehe das Banner aus wie ein
   Absatz, nicht wie eine Ansage. Die Schriftgroesse haengt deshalb an der
   Fensterbreite - so passt die Zeile auch auf ein schmales Telefon. */
.schau-satz {
  position: absolute; z-index: 3; pointer-events: none;
  top: 10px; left: clamp(16px, 4vw, 48px);
  max-width: calc(100% - 2 * clamp(16px, 4vw, 48px));
  margin: 0;
  padding: 11px 20px 12px 15px;
  border-left: 2px solid rgba(227, 192, 122, .75);
  border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, rgba(12, 14, 19, .55), rgba(12, 14, 19, .12));
}
.schau-satz b {
  display: block; margin-bottom: 3px; white-space: nowrap;
  font: 400 clamp(17px, 4.6vw, 30px)/1.15 Georgia, "Iowan Old Style", serif;
  background: linear-gradient(100deg, #f5dcac 0%, #e3c07a 45%, #c79a4c 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.schau-satz span {
  display: block; white-space: nowrap;
  font-size: clamp(11px, 3.1vw, 13.5px); line-height: 1.45;
  color: rgba(246, 242, 233, .82);
}
@media (max-width: 620px) {
  .schau-satz {
    top: 6px; left: 0;
    max-width: calc(100% - 14px);
    padding: 9px 14px 10px 11px;
  }
}


/* --- Personalisierung am Rechner: gross wie am Handy ---------------------

   Solange der Ablauf laeuft (body.pers-laeuft), gehoert die Spalte dem
   Ausfuellen: Beschreibung, Ansicht und Details treten ab, die Spalte
   wird breiter, und Felder, Schrittchips und Knoepfe wachsen auf die
   Groesse der Handy-Leiste. Das x oben rechts fuehrt zurueck zur Karte. */
@media (min-width: 901px) {
  body.pers-laeuft .kartenseite {
    grid-template-columns: minmax(0, 1fr) clamp(460px, 38vw, 620px);
  }
  body.pers-laeuft .kartenseite .angaben {
    position: relative;
    padding-top: clamp(22px, 2.6vw, 34px);
  }
  /* Was jetzt nicht gebraucht wird, geht aus dem Weg. */
  body.pers-laeuft .ware-kopf .beschreibung,
  body.pers-laeuft .ware-kopf .unter,
  body.pers-laeuft .angaben > .block,
  body.pers-laeuft .angaben .zusicherung,
  body.pers-laeuft .angaben .recht-zeile,
  body.pers-laeuft .personalisierung .feinkopf { display: none; }
  body.pers-laeuft .kartenseite h1 { font-size: 26px; margin-bottom: 4px; }
  body.pers-laeuft .kartenseite .preis-zeile { margin: 0 0 6px; }
  body.pers-laeuft .kartenseite .preisgross { font-size: 22px; }
  body.pers-laeuft .ware-kopf { padding-right: 44px; }

  /* Der Weg zurueck: dasselbe x wie am Handy, nur groesser. */
  body.pers-laeuft .blatt-zu {
    display: grid; top: 20px; right: 22px;
    width: 36px; height: 36px; font-size: 15px;
  }
  body.pers-laeuft .blatt-zu:hover { border-color: var(--gold); }

  /* Der Ablauf: alles eine Nummer groesser. */
  body.pers-laeuft .schritt-kopf { margin: 6px 0 20px; }
  body.pers-laeuft .schritt-zeile { font-size: 15px; }
  body.pers-laeuft .schritt-balken { height: 6px; margin: 12px 0 14px; }
  body.pers-laeuft .schritt-punkte { gap: 6px; }
  body.pers-laeuft .schritt-punkte button { font-size: 13px; padding: 8px 13px; }
  body.pers-laeuft .pers-seite { margin-bottom: 22px; }
  body.pers-laeuft .pers-feld { gap: 9px; margin-bottom: 18px; }
  body.pers-laeuft .feld-kopf b { font-size: 17px; }
  body.pers-laeuft .pers-regel { font-size: 13.5px; }
  body.pers-laeuft .pers-feld input {
    font-size: 24px; min-height: 68px; padding: 14px 18px; border-radius: 14px;
  }
  body.pers-laeuft .pers-feld textarea {
    font-size: 19px; min-height: 180px; padding: 14px 18px; border-radius: 14px; line-height: 1.45;
  }
  body.pers-laeuft .umschlag-wahl { gap: 12px; }
  body.pers-laeuft .umschlag-knopf { font-size: 16px; padding: 14px 20px 14px 14px; border-radius: 16px; }
  body.pers-laeuft .umschlag-knopf i { width: 34px; height: 34px; border-radius: 9px; }
  body.pers-laeuft .schritt-knoepfe { margin: 22px 0 12px; gap: 12px; }
  body.pers-laeuft .schritt-knoepfe .knopf { min-height: 58px; font-size: 16.5px; }
  body.pers-laeuft .pers-hinweis { font-size: 14px; }
}


/* --- Die Knoepfe der 3D-Ansicht am Rechner: wie am Handy ------------------

   Oben rechts die drei Ecken (Masse, Schein, Auf/Zu), unten rechts die
   Ansicht (naeher, weiter, zuruecksetzen). Die senkrechte Leiste in der
   Mitte und der Winkelregler entfallen - Auf und Zu macht die Ecke, den
   Rest die Maus. Der Block "Ansicht" in der Spalte wird damit doppelt und
   geht. */
@media (min-width: 901px) {
  .ecke-oben { display: flex; top: 18px; right: 18px; gap: 8px; }
  .klapp-ecke { display: grid; width: 44px; height: 44px; }
  .klapp-ecke[hidden] { display: none; }
  .klapp-ecke svg { width: 22px; height: 22px; }
  .klapp-ecke:hover { border-color: rgba(255, 255, 255, .5); }

  .klappen {
    top: auto; right: 18px; bottom: 18px; transform: none;
    gap: 4px; padding: 6px; border-radius: 28px;
  }
  .klappen #btnAuf, .klappen #btnZu,
  .klappen .klapp-regler, .klappen .klapp-trenner { display: none; }
  .klapp-knopf { width: 40px; height: 40px; }

  .kartenseite .angaben > .block:has(#masseAn) { display: none; }
}


/* Die Rechtszeile sitzt am Fuss der Spalte: die Spalte wird dafuer eine
   Flex-Saeule, und die Zeile schiebt sich mit margin-top: auto nach
   unten - ist die Spalte kuerzer als das Fenster, klebt sie am Rand, ist
   sie laenger, steht sie als Letztes. */
@media (min-width: 901px) {
  .kartenseite .angaben { display: flex; flex-direction: column; }
  .kartenseite .angaben > * { flex: none; }
  /* Die Spalte gibt ihren unteren Rand her: die Zeile sitzt direkt an der
     Kante, nur ein Fingerbreit Luft darunter. */
  .kartenseite .angaben { padding-bottom: 14px; }
  .kartenseite .angaben .recht-zeile {
    margin-top: auto; padding-top: 34px; font-size: 12.5px;
    color: var(--leise);
  }
}


/* "Zurueck zur Karte" im ersten Schritt: der Knopf nimmt sich, was der
   Text braucht, und bricht nicht um - "Weiter" bekommt den Rest. */
.schritt-knoepfe #schrittZurueck { flex: 0 1 auto; white-space: nowrap; }
.schritt-knoepfe #schrittWeiter { flex: 1 1 auto; }



/* Die 404-Seite: ein Satz, drei Wege weiter. */
.fehlt-seite { min-height: 46vh; }
.fehlt-wege { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }


/* --- Kasse ---------------------------------------------------------------

   Links die Angaben, rechts die Bestellung mit dem Zahlknopf. Am Handy
   untereinander: erst was man ausfuellt, dann was man bezahlt. */
.kassenseite {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) clamp(16px, 4vw, 48px) 32px;
}
.kassenseite h1 { font-size: clamp(30px, 4vw, 44px); margin: 8px 0 24px; }
.kasse-spalten {
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .85fr);
  align-items: start;
}
.kasse-form, .kasse-seite { display: grid; gap: 16px; }
.kassenseite .kasten {
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 18px 20px; background: rgba(255, 255, 255, .06);
}
.kassenseite .kasten h4 {
  margin: 0 0 14px; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); font-weight: 600;
}
/* Vier Spalten, damit ein Feld auch ein Viertel breit sein kann: die
   Hausnummer und die Postleitzahl brauchen kein halbes Formular. Die
   Breite eines Feldes sagt mit, was hineingehoert. */
.kassenseite .felder { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
.kassenseite .feld {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  grid-column: span 2;
}
.kassenseite .feld.breit { grid-column: 1 / -1; }
.kassenseite .feld.lang { grid-column: span 3; }
.kassenseite .feld.kurz { grid-column: span 1; }
.kassenseite .feld label { font-size: 13px; color: var(--leise); }
.kassenseite .feld .leise { color: var(--leise); }
.kassenseite input, .kassenseite textarea {
  background: var(--karte); border: 1px solid var(--rand); border-radius: 10px;
  padding: 12px 14px; color: var(--text); font: inherit; font-size: 16px;
  min-height: 48px;
}
.kassenseite input:focus, .kassenseite textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 1px;
}

/* Wohin die Karte geht: zwei grosse Schalter statt Radioknoepfe. */
.ziel-wahl { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.ziel-knopf {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 14px; padding: 13px 15px;
  background: var(--karte); color: var(--leise); font: inherit;
  transition: border-color .16s, background .16s, color .16s;
}
.ziel-knopf b { color: var(--text); font-size: 14.5px; }
.ziel-knopf span { font-size: 12.5px; }
.ziel-knopf:hover:not(:disabled) { border-color: var(--gold); }
.ziel-knopf[aria-pressed="true"] {
  border-color: var(--gold); color: var(--text);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.ziel-knopf:disabled { opacity: .4; cursor: default; }

.kasse-posten { display: grid; gap: 2px; }
.kasse-posten-zeile {
  display: flex; justify-content: space-between; gap: 14px; padding: 10px 0;
  align-items: start;
}
.kasse-posten-zeile + .kasse-posten-zeile { border-top: 1px solid var(--rand); }
.kasse-posten-zeile > div { display: grid; gap: 2px; min-width: 0; }
.kasse-posten-zeile b { font-size: 15px; }
.kasse-posten-zeile span { font-size: 12.5px; color: var(--leise); }
.kasse-posten-zeile small { font-size: 12px; color: var(--leise); overflow-wrap: anywhere; }
.kasse-preis { white-space: nowrap; font-family: Georgia, serif; font-weight: 400; font-size: 17px; }
.kasse-summe {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rand);
}
.kasse-summe b { font-family: Georgia, serif; font-size: 24px; font-weight: 400; }
.kasse-haken { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--leise); }
.kasse-haken input { accent-color: var(--gold); margin-top: 2px; min-height: 0; }
.kasse-haken a { color: var(--gold); }
.kasse-zahlung { margin: 16px 0 6px; min-height: 52px; }
.kassenseite .meldung.fehler { color: #e0a49b; font-size: 13.5px; display: block; }
.kassenseite .knopf { width: 100%; justify-content: center; }

@media (max-width: 860px) {
  .kasse-spalten { grid-template-columns: 1fr; }
  .ziel-wahl { grid-template-columns: 1fr; }
  /* Auf dem Telefon steht jedes Feld fuer sich - ausser Strasse und
     Hausnummer, PLZ und Ort: die gehoeren zusammen und passen nebeneinander. */
  .kassenseite .feld { grid-column: 1 / -1; }
  .kassenseite .feld.lang { grid-column: span 3; }
  .kassenseite .feld.kurz { grid-column: span 1; }
}

/* --- Dankeseite ---------------------------------------------------------- */
.dankeseite .danke-daten {
  display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px;
  margin: 22px 0; font-size: 14.5px;
}
.dankeseite .danke-daten dt { color: var(--leise); }
.dankeseite .danke-daten dd { margin: 0; color: var(--text); }
.danke-karten { display: grid; gap: 10px; margin: 18px 0 26px; }
.danke-karte {
  display: flex; gap: 14px; align-items: center;
  border: 1px solid var(--rand); border-radius: 14px; padding: 12px;
  background: rgba(255, 255, 255, .06);
}
.danke-karte img { width: 72px; border-radius: 8px; display: block; }
.danke-karte div { display: grid; gap: 3px; min-width: 0; }
.danke-karte b { color: var(--text); }
.danke-karte span, .danke-karte small { color: var(--leise); font-size: 13px; overflow-wrap: anywhere; }


/* Die Pflichtangabe vor dem Zahlknopf: unauffaellig, aber lesbar - sie
   muss unmittelbar vor der Bestellung stehen. */
.kasse-pflicht {
  margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--leise);
}
.kasse-pflicht b { color: var(--text); }


/* Der Bezahlknopf: so gross wie der spaetere PayPal-Knopf, damit sich am
   Bild nichts aendert, wenn er ihn ersetzt. */
.kasse-knopf {
  width: 100%; justify-content: center; min-height: 52px;
  border-radius: 999px; font-size: 16px; font-weight: 600;
}


/* Der Ladekreis auf dem Bogen: goldener Ring, der sich dreht, darunter
   ein Wort. Er deckt den Bogen ab, solange die Karten entstehen - erst
   wenn die vordere fertig ist, gibt er den Blick frei. */
.bogen-laden {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-content: center; justify-items: center; gap: 14px;
  color: var(--leise); font-size: 13.5px; letter-spacing: .04em;
  pointer-events: none;
  transition: opacity .45s ease;
}
.bogen-laden i {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(227, 192, 122, .22);
  border-top-color: var(--gold);
  animation: bogen-dreht .9s linear infinite;
}
@keyframes bogen-dreht { to { transform: rotate(360deg); } }
/* Fertig: ausblenden und aus dem Weg. */
.bogen-laden.fertig { opacity: 0; }
.bogen-laden[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bogen-laden i { animation-duration: 2.4s; }
}


/* "Zahlung mit PayPal" neben dem Preis: eine Marke, kein Satz - sie soll
   die Frage beantworten, nicht die Zeile beherrschen. */
.preis-zahlung {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--rand); border-radius: 999px;
  padding: 5px 6px 5px 14px; font-size: 13px; color: var(--leise);
  background: rgba(255, 255, 255, .06);
}
/* Das Zeichen von PayPal auf weissem Grund - dunkelblau auf Dunkelgrau
   waere nicht zu erkennen. */
.preis-paypal {
  height: 24px; width: auto; display: block;
  padding: 5px 9px; border-radius: 6px; background: #fff;
}


/* --- Anlass-Seite, zweiter Durchgang ------------------------------------

   Die Abschnitte bekommen gleiche Abstaende und eine gemeinsame Sprache:
   Kasten mit Haarlinie, goldene Ueberschrift, ruhiger Text. */
.anlass-aufmacher { padding-bottom: 6px; }

/* Die Fragen und der Geldblock rücken auf dasselbe Raster. */
.fragen { padding: 26px clamp(16px, 4vw, 48px) 10px; max-width: 1280px; }
.geld { padding-top: 26px; }



/* --- Die Ueberschrift der Startseite -----------------------------------

   Eine Zeile, die sagt, was es hier gibt. Sie darf nicht gross werden:
   darunter steht der Bogen, und am Handy zaehlt jede Zeile Hoehe. Also
   ruhig gesetzt, in der Schrift der Seite, ohne Gold - das Gold gehoert
   der Aufschrift und dem Banner. */
.seiten-titel {
  margin: 2px auto 10px; max-width: 30ch; text-align: center;
  font-size: clamp(23px, 4.4vw, 36px); line-height: 1.12;
  letter-spacing: -.01em; font-weight: 600;
  padding: 0 clamp(16px, 4vw, 48px);
}
@media (max-width: 620px) {
  .seiten-titel { margin: 0 auto 6px; }
}


/* --- Die Abteilungen eines Anlasses als Kacheln -------------------------

   Dieselbe Sprache wie die Anlass-Kacheln: dunkles Glas, feiner Rand, der
   Name auf einem schraegen Goldschild. Nur steht hier ein einzelnes Motiv
   statt eines Stapels - die Abteilung ist enger, das Bild darf es zeigen. */
.arten-schau {
  max-width: 1280px; margin: 0 auto;
  padding: 26px clamp(16px, 4vw, 48px) 10px;
  display: grid; gap: 16px; justify-items: center;
}
.arten-schau[hidden] { display: none; }
.arten-bahn {
  width: 100%;
  display: grid; gap: clamp(10px, 1.4vw, 16px);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
/* Bei wenigen Abteilungen sollen die Kacheln nicht ins Riesenhafte
   laufen - dann stehen sie zusammen in der Mitte. */
@media (min-width: 900px) {
  .arten-bahn {
    grid-template-columns: repeat(auto-fit, minmax(190px, 232px));
    justify-content: center;
  }
}
.art-kachel {
  display: grid; gap: 9px; justify-items: start; text-align: left;
  text-decoration: none; align-content: start;
  padding: 12px 12px 14px; cursor: pointer;
  border-radius: 16px; border: 1px solid var(--rand);
  background: var(--karte); color: inherit; font: inherit;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.art-kachel:hover, .art-kachel:focus-visible {
  border-color: var(--gold); transform: translateY(-3px);
  box-shadow: 0 16px 34px -18px rgba(8, 10, 14, .85);
}
.art-bild {
  width: 100%; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, .05);
}
/* Eine Abteilung, in der noch nichts liegt: der Rahmen bleibt, damit
   die Reihe gleich hoch ist, und sagt es mit einem Wort. */
.art-bild.leer {
  border: 1px dashed var(--rand); background: rgba(255, 255, 255, .03);
}
.art-bild.leer i {
  font-style: normal; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--leise); opacity: .75;
}
.art-bild img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 12px 18px rgba(8, 10, 14, .55));
}
/* Das Schild wie bei den Anlaessen - so gehoert beides sichtbar zusammen. */
.art-schild {
  transform: skewX(-11deg); max-width: 100%;
  padding: 7px 13px; border-radius: 4px;
  background: linear-gradient(135deg, #dcb264 0%, #b98c41 55%, #a07731 100%);
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .42);
}
.art-schild span {
  display: block; transform: skewX(11deg); white-space: nowrap;
  font: 700 11.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: #241b10;
}
.art-satz {
  color: var(--leise); font-size: 13.5px; line-height: 1.45; padding: 0 2px;
}
.art-zahl {
  font: 600 11.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
  padding: 0 2px;
}
/* Die gewaehlte Abteilung traegt den goldenen Rand - und ihr Schild
   bekommt denselben hellen Saum wie ein gewaehlter Anlass. */
.art-kachel[aria-current="true"] { border-color: var(--gold); }
.art-kachel[aria-current="true"] .art-schild {
  box-shadow: 0 0 0 2px rgba(247, 244, 238, .55), 0 10px 20px -12px rgba(0, 0, 0, .75);
}
/* Der Weg zurueck: leise, aber da, solange gefiltert ist. */
.arten-alle {
  border: 1px solid var(--rand); border-radius: 999px;
  padding: 9px 18px; cursor: pointer;
  background: rgba(255, 255, 255, .06); color: var(--leise);
  font: 600 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .04em;
  transition: color .18s, border-color .18s;
}
.arten-alle:hover { color: var(--text); border-color: var(--gold); }
.arten-alle[hidden] { display: none; }
@media (max-width: 620px) {
  .arten-bahn { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .art-kachel { padding: 9px 9px 12px; gap: 7px; }
  .art-satz { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .art-kachel:hover, .art-kachel:focus-visible { transform: none; }
}


/* --- Das Bildfeld im Ablauf --------------------------------------------

   Ein Schritt wie jeder andere: oben der Name, darunter das Foto (oder
   die leere Flaeche) und ein Knopf. Die Flaeche ist quadratisch, damit
   die Leiste beim Wechsel der Schritte nicht springt. */
.pers-bildfeld { display: grid; gap: 10px; }
.bild-schau {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  border: 1px dashed var(--rand); border-radius: 12px;
  background: rgba(255, 255, 255, .05); overflow: hidden;
}
.bild-schau img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bild-schau img[hidden] { display: none; }
.bild-leer {
  color: var(--leise); font-size: 13.5px; text-align: center;
  padding: 0 16px;
}
.bild-leer[hidden] { display: none; }
.bild-knopf { justify-self: stretch; text-align: center; }
.bild-stand { color: var(--leise); font-size: 12.5px; min-height: 1em; }
@media (max-width: 620px) {
  .bild-schau { aspect-ratio: 3 / 2; }
}



/* --- Die Hochzeitstage --------------------------------------------------

   Eine Reihe zum Wischen: je Jahr eine flache Kachel, links die goldene
   Zahl, daneben Name und Jahre, dahinter gedämpft das Motiv einer Karte.
   Die Reihe läuft bis an den Bildschirmrand - das zeigt, dass es
   weitergeht, besser als jeder Pfeil. */
.tage-schau {
  max-width: 1280px; margin: 0 auto;
  padding: 26px clamp(16px, 4vw, 48px) 10px;
  display: grid; gap: 14px; justify-items: center;
  /* Ohne dieses minmax() zieht die Reihe die Spalte auf ihre ganze
     Laenge auf: ein Kasten mit overflow zaehlt in einem Raster sonst
     seinen Inhalt als Mindestbreite - die halbe Seite liefe dann
     seitlich davon. */
  grid-template-columns: minmax(0, 1fr);
}
.tage-schau[hidden] { display: none; }
.tage-satz {
  margin: -4px 0 0; text-align: center; color: var(--leise);
  font-size: clamp(14px, 1.4vw, 15.5px); line-height: 1.5;
  /* Ein Satz, eine Zeile: bei 62ch brach er mitten im Wort um. Am Handy
     darf er umbrechen, dort passt er nicht anders. */
  max-width: 80ch;
}
.tage-rahmen { position: relative; width: 100%; min-width: 0; }
.tage-bahn {
  display: flex; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  /* Die Reihe reicht bis an die Raender des Abschnitts: der negative
     Rand holt zurueck, was der Abschnitt an Polster hat, das Polster
     innen gibt ihn der ersten und letzten Kachel zurueck. (Bis an den
     Bildschirmrand geht hier nicht - die prozentualen Raender wuerden
     sich am Rahmen der Pfeile messen, nicht an der Seite.) */
  margin-inline: calc(clamp(16px, 4vw, 48px) * -1);
  padding: 4px clamp(16px, 4vw, 48px) 10px;
  scroll-padding-left: clamp(16px, 4vw, 48px);
  /* Passen alle Kacheln ins Bild, stehen sie mittig - sonst saehen zwei
     Kacheln am linken Rand aus wie ein abgeschnittener Rest. */
  justify-content: safe center;
  scrollbar-width: none;
}
.tage-bahn::-webkit-scrollbar { display: none; }
/* Am Handy gibt es keine Pfeile. Dort sagt eine weiche Kante, dass die
   Reihe weitergeht: die letzte Kachel läuft nach rechts aus, sobald dort
   noch etwas liegt - und nach links, sobald man gewischt hat. */
.tage-bahn.mehr-rechts {
  mask-image: linear-gradient(to right, #000 0, #000 78%, rgba(0, 0, 0, .35) 94%, transparent 100%);
}
.tage-bahn.mehr-links {
  mask-image: linear-gradient(to left, #000 0, #000 78%, rgba(0, 0, 0, .35) 94%, transparent 100%);
}
.tage-bahn.mehr-links.mehr-rechts {
  mask-image: linear-gradient(to right,
    transparent 0, rgba(0, 0, 0, .35) 5%, #000 20%,
    #000 80%, rgba(0, 0, 0, .35) 95%, transparent 100%);
}

.tage-kachel {
  position: relative; flex: 0 0 auto; width: 226px;
  scroll-snap-align: start; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; text-align: left; text-decoration: none;
  border: 1px solid var(--rand); border-radius: 14px;
  background: var(--karte); color: inherit; font: inherit;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.tage-kachel:hover, .tage-kachel:focus-visible {
  border-color: var(--gold); transform: translateY(-2px);
  box-shadow: 0 16px 30px -18px rgba(8, 10, 14, .9);
}
.tage-kachel[aria-current="true"] {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent);
}

/* Das Motiv des Jahres hinter der Schrift: links dicht verschleiert,
   damit Zahl und Name stehen, rechts offen, damit man die Karte ahnt. */
.tage-bild { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.tage-bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Näher heran: das Standbild hat rings um die Karte Luft, und das
     Motiv selbst sitzt noch einmal mittig darin. Unvergrößert läge in
     der schmalen Kachel nur ein blasser Streifen Papier. So reicht das
     Motiv von Rand zu Rand.
     Dazu ein Hauch Unschärfe: auf einer Karte, die selbst aus Schrift
     besteht, läsen sich sonst zwei Texte übereinander. Als Textur ist
     sie ein Hinweis, als Schrift wäre sie ein Streit. */
  transform: scale(1.55);
  filter: blur(1.1px);
  transition: transform .4s ease;
}
.tage-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--karte) 94%, transparent) 0%,
    color-mix(in srgb, var(--karte) 86%, transparent) 46%,
    color-mix(in srgb, var(--karte) 46%, transparent) 100%);
}
.tage-kachel.mit-bild:hover .tage-bild img { transform: scale(1.64); }
/* Ein gefülltes Jahr trägt einen Hauch Gold im Rand - der Unterschied
   zum leeren Jahr soll sichtbar sein, ohne zu schreien. */
.tage-kachel.mit-bild { border-color: color-mix(in srgb, var(--gold) 42%, var(--rand)); }
.tage-kachel.mit-bild .tage-zahl,
.tage-kachel.mit-bild .tage-text { position: relative; z-index: 1; }
/* Auf einem hellen Motiv braucht helle Schrift einen Saum, sonst
   verschwindet sie im Papier. */
.tage-kachel.mit-bild .tage-zahl,
.tage-kachel.mit-bild .tage-name,
.tage-kachel.mit-bild .tage-jahre { text-shadow: 0 1px 3px rgba(8, 10, 14, .6); }

.tage-zahl {
  flex: 0 0 46px; text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px; font-weight: 600; line-height: 1;
  letter-spacing: -.02em; color: var(--gold);
}
.tage-zahl.schmal { font-size: 18px; letter-spacing: 0; }

.tage-text { min-width: 0; display: grid; gap: 2px; }
.tage-name {
  font-size: 14.5px; font-weight: 600; line-height: 1.25; white-space: nowrap;
}
.tage-name.lang { font-size: 12.5px; letter-spacing: -.01em; }
.tage-jahre { font-size: 12px; color: var(--leise); white-space: nowrap; }

/* Die Pfeile stehen am Rechner neben der Reihe - am Handy wischt man. */
.tage-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: none; place-items: center;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 50%;
  background: color-mix(in srgb, var(--karte) 88%, transparent);
  backdrop-filter: blur(6px);
  color: var(--leise); font-size: 19px; line-height: 1;
  transition: color .18s, border-color .18s, opacity .18s;
}
.tage-pfeil:hover { color: var(--text); border-color: var(--gold); }
.tage-pfeil[disabled] { opacity: 0; pointer-events: none; }
.tage-pfeil.links { left: -6px; }
.tage-pfeil.rechts { right: -6px; }
@media (min-width: 861px) and (hover: hover) {
  .tage-pfeil { display: grid; }
}

@media (max-width: 620px) {
  .tage-schau { padding: 22px 0 8px; gap: 10px; }
  .tage-satz { padding: 0 16px; }
  .tage-bahn { gap: 10px; margin-inline: -16px; padding-inline: 16px; scroll-padding-left: 16px; }
  .tage-kachel { width: 200px; padding: 12px 14px; gap: 10px; }
  .tage-zahl { flex-basis: 40px; font-size: 24px; }
  .tage-zahl.schmal { font-size: 16px; }
  .tage-name { font-size: 13.5px; }
  .tage-name.lang { font-size: 12px; }
  .tage-jahre { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tage-bahn { scroll-behavior: auto; }
  .tage-kachel:hover { transform: none; }
  .tage-kachel.mit-bild:hover .tage-bild img { transform: scale(1.55); }
}


/* --- Der Marktplatz -----------------------------------------------------

   Alles auf einmal: je Kachel eine Karte, gerade von vorn und so groß,
   dass man das Motiv wirklich sieht. Am Handy zwei in einer Reihe - mehr
   wären Briefmarken. */
.markt-kopf {
  max-width: 1280px; margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 48px) 0;
  display: grid; justify-items: center; text-align: center; gap: 6px;
}
.markt-zurueck {
  justify-self: start; text-decoration: none; color: var(--leise);
  font-size: 13.5px; padding: 8px 14px 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--rand); border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  transition: color .18s, border-color .18s;
}
.markt-zurueck:hover { color: var(--text); border-color: var(--gold); }
.markt-titel {
  margin: 0; font-size: clamp(28px, 5.2vw, 46px); line-height: 1.05;
  letter-spacing: -.02em;
}
.markt-satz {
  margin: 2px 0 0; max-width: 56ch; color: var(--leise);
  font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.55;
}

.markt {
  max-width: 1280px; margin: 0 auto;
  padding: 24px clamp(16px, 4vw, 48px) 40px;
}
.markt-gitter {
  display: grid; gap: clamp(12px, 2vw, 22px);
  grid-template-columns: repeat(2, 1fr);
}
/* Am Rechner passen mehr nebeneinander, ohne dass die Karte kleiner wird
   als in der Hand. */
@media (min-width: 720px) { .markt-gitter { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .markt-gitter { grid-template-columns: repeat(4, 1fr); } }

.markt-kachel {
  display: grid; gap: 10px; text-decoration: none; color: inherit;
  transition: transform .18s;
}
.markt-kachel:hover { transform: translateY(-3px); }
.markt-bild {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--rand); border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  transition: border-color .18s, box-shadow .18s;
}
.markt-kachel:hover .markt-bild {
  border-color: var(--gold);
  box-shadow: 0 20px 40px -22px rgba(8, 10, 14, .95);
}
/* Das Motiv füllt die Kachel bis auf einen schmalen Rand - groß, gerade,
   ohne Schräglage. */
.markt-bild img {
  width: 92%; height: 92%; object-fit: contain; display: block;
  filter: drop-shadow(0 14px 22px rgba(8, 10, 14, .5));
}
.markt-marke {
  position: absolute; left: 10px; bottom: 10px;
  font-style: normal; font-size: 11px; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(12, 14, 19, .66); color: #f6f2e9;
  border: 1px solid rgba(255, 255, 255, .22);
}
.markt-fuss {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 0 4px;
}
.markt-fuss b { font-weight: 600; font-size: 15px; line-height: 1.3; }
.markt-preis {
  color: var(--gold); font-family: Georgia, serif; font-size: 14.5px;
  white-space: nowrap;
}
.markt-leer {
  margin: 30px auto; max-width: 48ch; text-align: center;
  color: var(--leise); font-size: 15px; line-height: 1.6;
}
@media (max-width: 620px) {
  .markt { padding: 18px 16px 32px; }
  .markt-fuss b { font-size: 13.5px; }
  .markt-preis { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .markt-kachel:hover { transform: none; }
}


/* --- Der Marktplatz steht auch mit wenig Ware ---------------------------

   Liegen nur zwei Karten in einer Abteilung, reicht die Seite nicht bis
   zum unteren Rand - der Fuß hing dann mitten im Bild und darunter war
   Leere. Die Seite wird deshalb mindestens so hoch wie das Fenster, und
   die Ware nimmt den Platz, der übrig bleibt. */
body.seite-markt { min-height: 100dvh; display: flex; flex-direction: column; }
body.seite-markt > .markt { flex: 1 0 auto; }
body.seite-markt > .fuss { margin-top: auto; }
/* In einer Spalte aus Flex-Kaesten schrumpft ein Kasten mit "margin: 0
   auto" auf seinen Inhalt - deshalb stand der Zurueck-Knopf mitten auf
   der Seite statt links. Die volle Breite holt ihn an den Rand. */
body.seite-markt > .markt-kopf,
body.seite-markt > .markt,
body.seite-markt > .markt-text { width: 100%; }


/* Eine schmale Kachel ohne Ziffer - dann rückt der Name an den Anfang. */
.tage-kachel.ohne-zahl { padding-left: 18px; }
.tage-kachel.ohne-zahl .tage-name { white-space: normal; }


/* --- Der Textteil einer Abteilungsseite --------------------------------

   Er steht unter der Ware, nicht darüber: wer sucht, will erst die Karten
   sehen. Wer sich dann noch fragt, wie das mit dem Druck und dem Versand
   läuft, findet es hier - in ruhigen Spalten, nicht als Textwüste. */
.markt-text {
  max-width: 1280px; margin: 0 auto;
  padding: 10px clamp(16px, 4vw, 48px) 44px;
}
.markt-text-innen {
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  padding: clamp(20px, 3vw, 34px);
  display: grid; gap: 14px;
}
.markt-text h2 {
  margin: 0; font-size: clamp(19px, 2.2vw, 25px); line-height: 1.25;
  letter-spacing: -.01em;
}
.markt-fragen-titel { margin-top: 10px !important; }
.markt-absatz {
  margin: 0; color: var(--leise); max-width: 68ch;
  font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.65;
}
/* Die vier Zusagen: kurze Überschrift, ein Satz darunter. */
.markt-zusagen {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; gap: 14px clamp(16px, 2.4vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.markt-zusagen li { display: grid; gap: 4px; align-content: start; }
.markt-zusagen b {
  font: 600 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
.markt-zusagen span { color: var(--leise); font-size: 14px; line-height: 1.55; }
@media (max-width: 620px) {
  .markt-text { padding-bottom: 32px; }
}

/* --- Schnellkasse -------------------------------------------------------

   Der Schalter steht ueber der Anschrift, nicht darunter: wer ihn erst
   nach dem Abtippen sieht, aergert sich. Angehakt ist er von Haus aus -
   der schnellere Weg soll der vorgezeichnete sein. */
.kassenseite .schnell-wahl {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--gold); border-radius: 12px;
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  padding: 12px 14px; margin-bottom: 14px;
}
.kassenseite .schnell-wahl input {
  min-height: 0; width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto;
  accent-color: var(--gold);
}
.kassenseite .schnell-wahl b { display: block; font-size: 14.5px; font-weight: 600; }
.kassenseite .schnell-wahl small {
  display: block; margin-top: 2px; color: var(--leise); font-size: 12.5px;
  line-height: 1.45;
}