/* ============================================================================
   Feier-Planer · Frontend (T4)
   Design: Jury-Sieger Variante A „Kastanienfeuer"
   Übernahmen aus B: klebende Navigation, Urteilsspalte + klebende erste Spalte,
   Offen-Aufschlüsselung je Paket, Ringkarte.
   Übernahme aus C: Zettel-Anmutung der Notizfelder (Palette bleibt A).

   Keine externen Ressourcen. Schriften liegen in /static/fonts/.
   Alle Kontrastwerte gemessen (WCAG 2.1, sRGB) – siehe design/variante_A/KONZEPT.md.
   ========================================================================== */

/* --- 0 · Schriften ------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/fraunces-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/static/fonts/fraunces-var-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/alegreya-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/alegreya-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/static/fonts/alegreya-sans-400italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/static/fonts/alegreya-sans-400italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/alegreya-sans-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/alegreya-sans-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/alegreya-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/alegreya-sans-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 1 · Token ----------------------------------------------------------- */
:root {
  /* Papier & Tinte */
  --creme:        #F6EFE3;
  --papier:       #FDF8EE;
  --creme-tief:   #F1E6D5;
  --creme-warm:   #F5E8D2;
  --tinte:        #2A1B12;   /* 14,54 : 1 auf Creme */
  --kastanie:     #5C3A21;   /*  8,82 : 1 */
  --muted:        #6B5647;   /*  6,03 : 1 */

  /* Feuer */
  --rebenrot:     #9B2622;   /*  6,82 : 1 */
  --rebenrot-tief:#8A211E;   /*  7,93 : 1 */
  --gold:         #C88A2E;   /*  nur Grafik */
  --gold-tief:    #8A5A12;   /*  5,17 : 1 */
  --gold-hell:    #E8BE79;   /* 10,11 : 1 auf Nacht */

  /* Nacht */
  --nacht:        #231610;
  --nacht-hell:   #33211A;
  --nacht-muted:  #C8B393;

  /* Linien */
  --linie:        #DCCDB4;
  --linie-ui:     #8F7A5E;   /*  3,88 : 1 */

  /* Signale */
  --gut-grund:    #EDE0C9;
  --warn-grund:   #F0E3CC;
  --acht-grund:   #F5E2DC;
  --zettel:       #FDFAF1;
  --zettel-linie: rgba(143, 122, 94, .26);

  /* Maße */
  --breit: 74rem;
  --rand: 1.15rem;
  --pl: 2.55rem;
  --faden: 2px;
  --kopf-h: 5.6rem;
}

@media (min-width: 48rem) { :root { --pl: 3.9rem; --rand: 1.5rem; --kopf-h: 3.6rem; } }

/* --- 2 · Grundlagen ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + .6rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: 'Alegreya Sans', 'Segoe UI', 'Helvetica Neue', sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Papierkorn – Data-URI, kein externer Request.
   Bewusst ohne mix-blend-mode: das erzwingt eine Compositing-Schicht ueber die
   gesamte, sehr lange Seite und macht das Scrollen auf dem Handy zaeh. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 999;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-variation-settings: 'opsz' 60, 'SOFT' 30, 'WONK' 1;
  color: var(--kastanie);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

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

a { color: var(--rebenrot); text-decoration-color: rgba(155, 38, 34, .42); text-underline-offset: .18em; overflow-wrap: anywhere; }
a:hover { background: rgba(155, 38, 34, .09); text-decoration-color: var(--rebenrot); }

:focus-visible { outline: 3px solid var(--rebenrot-tief); outline-offset: 3px; border-radius: 2px; }
/* Auf den dunklen Flaechen waere Rebenrot nur 1,94 : 1 – dort Gold (10,11 : 1). */
.mitternacht :focus-visible, .fuss :focus-visible { outline-color: var(--gold-hell); }

.nur-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.sprung {
  position: absolute; left: .75rem; top: -5rem; z-index: 1000;
  background: var(--rebenrot-tief); color: var(--papier);
  padding: .7rem 1.1rem; border-radius: 0 0 .6rem .6rem;
  text-decoration: none; font-weight: 700;
  transition: top .15s ease;
}
.sprung:focus { top: 0; }

.extern { font-size: .85em; margin-left: .15em; }

/* --- 3 · Klebende Kopfleiste (Übernahme aus Variante B) ------------------- */
.kopfleiste {
  position: sticky; top: 0; z-index: 60;
  background: rgba(246, 239, 227, .93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}
.kopfleiste__innen {
  position: relative;                 /* Anker fuer die Statusmeldung */
  max-width: var(--breit);
  margin-inline: auto;
  padding: .35rem 1rem .4rem;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .25rem .9rem;
}
.marke {
  order: 1;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 24, 'SOFT' 20, 'WONK' 0;
  font-size: 1rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--kastanie); text-decoration: none;
  padding-block: .3rem;
  white-space: nowrap;
}
.marke:hover { background: none; color: var(--rebenrot); }
.marke::before {
  content: ""; flex: none;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 .18rem rgba(200, 138, 46, .22);
}

.kopf__werkzeug {
  order: 2; margin-left: auto;
  display: flex; align-items: center; gap: .4rem .7rem; flex-wrap: nowrap;
}
.kopf-stand {
  margin: 0; white-space: nowrap;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--muted);
}

.kopf-knopf {
  font: inherit; font-size: .82rem; font-weight: 600;
  color: var(--kastanie); background: var(--papier);
  border: 1px solid var(--linie-ui); border-radius: 999px;
  padding: .3rem .8rem .35rem;
  min-height: 2rem;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; gap: .35rem;
}
.kopf-knopf:hover { background: var(--rebenrot-tief); color: var(--papier); border-color: var(--rebenrot-tief); }

/* Sprungleiste: eigene Zeile, damit kein Punkt je abgeschnitten wird (Jury 1). */
.kopf__nav {
  order: 3;
  flex: 1 1 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 14px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 14px), transparent 100%);
}
.kopf__nav::-webkit-scrollbar { display: none; }
.kopf__nav ul { display: flex; gap: .35rem; list-style: none; margin: 0; padding: .1rem 0; }
.kopf__nav a {
  display: block; white-space: nowrap; text-decoration: none;
  font-size: .8rem; font-weight: 500;
  color: var(--kastanie);
  border: 1px solid var(--linie); border-radius: 999px;
  padding: .28rem .72rem .33rem;
  background: var(--papier);
}
.kopf__nav a:hover,
.kopf__nav a[aria-current="true"] { background: var(--rebenrot-tief); color: var(--papier); border-color: var(--rebenrot-tief); }

/* Auf dem Handy weicht der Markenname dem Stand-Datum – der Punkt bleibt als
   Sprung nach oben stehen, der Name bleibt fuer Screenreader im DOM. */
@media (max-width: 47.99rem) {
  .marke { font-size: 0; gap: 0; }
}
@media (max-width: 22rem) {
  .kopf-stand { display: none; }
}

/* Ab Tablet umbricht die Leiste statt zu scrollen – dann ist jeder Punkt klickbar. */
@media (min-width: 48rem) {
  .kopf__nav { overflow-x: visible; mask-image: none; -webkit-mask-image: none; }
  .kopf__nav ul { flex-wrap: wrap; }
}

/* Statusmeldung haengt unter der Leiste und verdraengt nichts. */
.statuszeile {
  order: 4;
  position: absolute; top: 100%; right: 1rem;
  margin: 0;
  display: flex; align-items: center; gap: .5rem;
  max-width: calc(100% - 2rem);
  font-size: .8rem; font-weight: 500; color: var(--muted);
  background: var(--papier);
  border: 1px solid var(--linie); border-top: 0;
  border-radius: 0 0 .4rem .4rem;
  padding: .3rem .8rem .35rem;
  box-shadow: 0 4px 10px -8px rgba(42, 27, 18, .5);
}
.statuszeile::before {
  content: ""; flex: none;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--linie-ui);
}
.statuszeile[data-zustand="speichert"]::before { background: var(--gold-tief); }
.statuszeile[data-zustand="gespeichert"] { color: var(--kastanie); }
.statuszeile[data-zustand="gespeichert"]::before { background: var(--gold-tief); }
.statuszeile[data-zustand="fehler"] { color: var(--rebenrot-tief); font-weight: 700; }
.statuszeile[data-zustand="fehler"]::before { background: var(--rebenrot-tief); }
.statuszeile button {
  font: inherit; font-size: .78rem; font-weight: 700;
  color: var(--rebenrot-tief); background: var(--acht-grund);
  border: 1px solid var(--rebenrot-tief); border-radius: 999px;
  padding: .2rem .6rem .25rem; min-height: 1.9rem; cursor: pointer;
  white-space: nowrap;
}
/* Im Ruhezustand nur fuer Screenreader – so bleibt die Live-Region erhalten. */
.statuszeile[data-zustand="ruhe"] {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Sprungziele nicht unter der Kopfleiste verstecken */
[id] { scroll-margin-top: calc(var(--kopf-h) + 1rem); }

/* --- 4 · Der rote Faden -------------------------------------------------- */
.band, .mitternacht, .fuss { position: relative; }

.band::before, .mitternacht::before, .fuss::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: max(var(--rand), calc((100% - var(--breit)) / 2 + var(--rand)));
  width: var(--faden);
  background: var(--rebenrot);
  opacity: .55;
}
.mitternacht::before { background: var(--gold); opacity: .8; }
.fuss::before { background: var(--kastanie); opacity: .35; }

.spalte {
  position: relative;
  max-width: var(--breit);
  margin-inline: auto;
  padding-inline: var(--pl) 1.25rem;
}

.abschnittsnr {
  position: absolute; left: var(--rand); top: .1em;
  transform: translateX(-50%);
  margin: 0; width: 2.4rem; text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 14, 'WONK' 0;
  font-size: .82rem; font-weight: 600; letter-spacing: .06em;
  color: var(--rebenrot-tief);
  background: var(--creme);
  padding-block: .35rem;
}
.band--linien .abschnittsnr { background: var(--creme-tief); }

/* --- 5 · Hero ------------------------------------------------------------ */
.hero {
  position: relative;
  padding-block: clamp(2rem, 5vw, 4rem) 0;
  background:
    radial-gradient(120% 85% at 88% 8%, rgba(200, 138, 46, .26), transparent 58%),
    radial-gradient(90% 70% at 6% 96%, rgba(155, 38, 34, .13), transparent 62%),
    var(--creme);
  overflow: hidden;
  isolation: isolate;
}
.hero::before { display: none; }
.hero__innen {
  position: relative;
  max-width: var(--breit);
  margin-inline: auto;
  padding: 0 1.25rem clamp(2.5rem, 5vw, 4.5rem) var(--pl);
}

.kicker {
  font-size: .8rem; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--gold-tief);
  margin-bottom: 1.1rem;
}

.hero__titel {
  font-size: clamp(2.6rem, 1.4rem + 7.4vw, 6.4rem);
  font-variation-settings: 'opsz' 144, 'SOFT' 40, 'WONK' 1;
  font-weight: 400; letter-spacing: -0.035em; line-height: .98;
  color: var(--kastanie);
  margin: 0 0 1.1rem; max-width: 16ch;
}
.hero__lead {
  font-size: clamp(1.06rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.55; max-width: 46ch;
  color: var(--tinte); margin-bottom: 2rem;
}

.glut {
  position: absolute; right: -3.2rem; top: .25rem;
  width: clamp(7.5rem, 14vw, 12.5rem); height: auto;
  opacity: .8; z-index: -1;
}
@media (min-width: 60rem) { .glut { right: 3rem; top: 2rem; } }

.eckdaten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0; margin: 0 0 1.8rem;
  border-top: 1px solid var(--linie);
  max-width: 54rem;
}
.eckdaten > div { padding: .8rem 1rem .85rem 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 48rem) {
  .eckdaten > div { border-left: 1px solid var(--linie); padding-left: 1rem; }
  .eckdaten > div:first-child { border-left: 0; padding-left: 0; }
}
.eckdaten dt { font-size: .69rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.eckdaten dd {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 20, 'WONK' 0;
  font-size: 1.02rem; font-weight: 600; color: var(--kastanie);
  font-variant-numeric: tabular-nums;
}

.stand-band {
  display: flex; gap: .7rem; align-items: flex-start;
  max-width: 48rem;
  padding: .95rem 1.1rem;
  background: var(--creme-warm);
  border-left: 3px solid var(--gold);
  font-size: .95rem;
  margin-bottom: 0;
}
.punkt { flex: none; width: .62rem; height: .62rem; border-radius: 50%; background: var(--gold-tief); margin-top: .45rem; }

.offen-inline {
  display: inline-block;
  font-size: .74em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-tief); background: var(--warn-grund);
  padding: .1em .5em .15em; border-radius: .2rem;
  white-space: nowrap; vertical-align: .06em;
}
.offen-inline--nacht { color: var(--nacht); background: var(--gold-hell); }

.grat { display: block; width: 100%; height: clamp(38px, 6vw, 74px); }

/* --- 6 · Bänder & Typo --------------------------------------------------- */
.band { padding-block: clamp(2.6rem, 5vw, 4.6rem); }
.band--linien { background: var(--creme-tief); }

.band h2 {
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
  font-variation-settings: 'opsz' 90, 'SOFT' 40, 'WONK' 1;
  font-weight: 400; max-width: 22ch; margin-bottom: .55rem;
}
.vorspann {
  font-size: clamp(1rem, .96rem + .35vw, 1.2rem);
  color: var(--muted); max-width: 56ch; margin-bottom: 2.2rem;
}
.tag-titel {
  font-size: 1.28rem;
  font-variation-settings: 'opsz' 30, 'SOFT' 20, 'WONK' 0;
  font-weight: 600; color: var(--rebenrot);
  margin: 2.4rem 0 1.1rem;
}
.tag-titel:first-child { margin-top: 0; }
.mini {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: .6rem;
}

/* --- 7 · Kurzfassung, Kriterien, Favoriten ------------------------------- */
.kurzfassung p { max-width: 60ch; font-size: 1.06rem; }

.kriterien { display: grid; gap: 1.6rem; margin-top: 2.2rem; }
@media (min-width: 52rem) { .kriterien { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }
.kriterien h3 {
  font-size: 1.16rem;
  font-variation-settings: 'opsz' 28, 'SOFT' 20, 'WONK' 0;
  font-weight: 600; margin-bottom: .7rem;
}

.favoriten {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--gold);
  border-radius: .3rem;
  padding: 1.05rem 1.2rem 1.15rem;
  margin-top: 2.4rem;
  max-width: 60rem;
}
.favoriten h3 {
  font-size: 1.05rem;
  font-variation-settings: 'opsz' 24, 'SOFT' 20, 'WONK' 0;
  font-weight: 600; margin-bottom: .5rem;
}
.favoriten__leer { font-size: .93rem; color: var(--muted); margin: 0; }
.favoriten__liste { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.favoriten__liste a {
  display: inline-block;
  font-size: .85rem; font-weight: 600; text-decoration: none;
  color: var(--papier); background: var(--rebenrot-tief);
  border-radius: 999px; padding: .3rem .8rem .35rem;
}
.favoriten__liste a::before { content: "★ "; }
.favoriten__liste a:hover { background: var(--kastanie); color: var(--papier); }

/* --- 8 · Vorschlags-Übersicht -------------------------------------------- */
.uebersicht { display: grid; gap: 1.6rem; }
@media (min-width: 62rem) { .uebersicht { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 1.8rem; } }

.vkarte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-top: 4px solid var(--rebenrot);
  border-radius: .3rem;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  display: flex; flex-direction: column;
}
.vkarte--favorit { background: var(--creme-warm); border-color: rgba(155, 38, 34, .3); }
.vkarte__kopf { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: flex-start; }
.vkarte h3 {
  font-size: clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
  font-variation-settings: 'opsz' 72, 'SOFT' 40, 'WONK' 1;
  font-weight: 400; margin-bottom: .15rem;
}
.vkarte__charakter { font-size: 1.02rem; margin-bottom: 1rem; }
.vkarte__meta { font-size: .9rem; color: var(--muted); margin-bottom: 1rem; }
.vkarte .zweispalt { margin-bottom: 1rem; }
.vkarte__sprung {
  display: inline-block; align-self: flex-start;
  font-size: .88rem; font-weight: 700; text-decoration: none;
  color: var(--papier); background: var(--rebenrot-tief);
  border-radius: .2rem; padding: .5rem 1rem .55rem;
  margin-bottom: 1.1rem;
}
.vkarte__sprung:hover { background: var(--kastanie); color: var(--papier); }

/* --- 8b · Die Idee in Punkten -------------------------------------------- */
.prosa { max-width: 62ch; }
.prosa p { font-size: 1.02rem; }
.bilder { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .bilder { grid-template-columns: 1fr 1fr; gap: 2rem 2.6rem; } }
@media (min-width: 78rem) { .bilder { grid-template-columns: repeat(3, 1fr); } }
.bild { position: relative; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.bild__nr {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 90, 'SOFT' 60, 'WONK' 1;
  font-size: 2.4rem; line-height: 1; font-weight: 400;
  /* --gold ist Grafikfarbe (2,08 : 1); als Text muss gold-tief her (5,17 : 1). */
  color: var(--gold-tief); margin-bottom: .35rem;
}
.bild p { font-size: 1rem; color: var(--tinte); margin: 0; }

/* Sprungleiste innerhalb eines Vorschlags */
.unternav { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 1.8rem 0 0; padding: 0; }
.unternav a {
  display: inline-block; text-decoration: none;
  font-size: .82rem; font-weight: 500; color: var(--kastanie);
  border: 1px solid var(--linie); border-radius: 999px;
  padding: .34rem .82rem .4rem; background: var(--papier);
}
.unternav a:hover { background: var(--rebenrot-tief); color: var(--papier); border-color: var(--rebenrot-tief); }

/* --- 9 · Zeitleiste ------------------------------------------------------ */
.zeitleiste { list-style: none; margin: 0; padding: 0; }
.zeitleiste li {
  position: relative; display: grid; grid-template-columns: 1fr; gap: .1rem;
  padding-block: .85rem; border-bottom: 1px solid var(--linie);
}
.zeitleiste li:last-child { border-bottom: 0; }
@media (min-width: 40rem) {
  .zeitleiste li { grid-template-columns: 8.5rem 1fr; gap: 0 1.4rem; align-items: baseline; }
}
.zeitleiste li::before {
  content: "";
  position: absolute;
  left: calc(var(--rand) - var(--pl) - .31rem);
  top: 1.2rem;
  width: .72rem; height: .72rem; border-radius: 50%;
  background: var(--creme); border: 2px solid var(--rebenrot);
}
.band--linien .zeitleiste li::before { background: var(--creme-tief); }

.zeit {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 20, 'WONK' 0;
  font-size: 1.02rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--rebenrot); white-space: nowrap;
}
.zeitleiste h4 {
  font-size: 1.08rem;
  font-variation-settings: 'opsz' 24, 'SOFT' 20, 'WONK' 0;
  font-weight: 600; color: var(--tinte); margin: 0 0 .15rem;
}
.zeitleiste p { font-size: .94rem; color: var(--muted); margin: 0; }

/* Mitternachtsband */
.mitternacht {
  background: var(--nacht); color: var(--creme);
  margin-block: 2.8rem;
  padding-block: 2.6rem 2.8rem;
  background-image:
    radial-gradient(70% 130% at 78% 0%, rgba(200, 138, 46, .22), transparent 60%),
    radial-gradient(60% 100% at 12% 100%, rgba(155, 38, 34, .3), transparent 62%);
  background-color: var(--nacht);
}
.mitternacht__kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--gold-hell); margin-bottom: 1.2rem;
}
.zeitleiste--nacht li { border-bottom-color: rgba(232, 190, 121, .22); }
.zeitleiste--nacht li::before { background: var(--nacht); border-color: var(--gold); }
.zeitleiste--nacht .zeit { color: var(--gold-hell); }
.zeitleiste--nacht h4 { color: var(--creme); }
.zeitleiste--nacht p { color: var(--nacht-muted); }

.zeitleiste--nacht .ist-hoehepunkt::before {
  width: 1.15rem; height: 1.15rem;
  left: calc(var(--rand) - var(--pl) - .53rem);
  top: 1rem;
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 .38rem rgba(200, 138, 46, .2), 0 0 2.6rem .3rem rgba(200, 138, 46, .45);
}
.ist-hoehepunkt h4 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  font-variation-settings: 'opsz' 72, 'SOFT' 50, 'WONK' 1;
  font-weight: 400; color: var(--gold-hell);
}
.ist-hoehepunkt .zeit { font-size: 1.35rem; }

/* --- 10 · Location-Karte ------------------------------------------------- */
.haupt-karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-top: 4px solid var(--rebenrot);
  border-radius: .3rem;
  padding: clamp(1.3rem, 3vw, 2.4rem);
}
.haupt-karte__kopf { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between; align-items: flex-start; margin-bottom: .9rem; }
.haupt-karte__kopf > div, .vkarte__kopf > div { flex: 1 1 12rem; min-width: 0; }
.haupt-karte h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  font-variation-settings: 'opsz' 72, 'SOFT' 40, 'WONK' 1;
  font-weight: 400; margin-bottom: .15rem;
}
.ort { font-size: .92rem; color: var(--muted); margin: 0; }

/* Der Status kann ein langer Satz sein – er darf schrumpfen und umbrechen,
   sonst sprengt er auf 375 px die Karte. */
.status {
  margin: 0; flex: 0 1 auto; max-width: 100%;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  padding: .34rem .8rem .4rem;
  border-radius: .8rem;
  color: var(--gold-tief); background: var(--warn-grund);
  overflow-wrap: break-word;
}
.status--gruen { color: var(--kastanie); background: var(--gut-grund); }
.status--rot   { color: var(--rebenrot-tief); background: var(--acht-grund); }

.oeffnung {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 24, 'WONK' 0;
  font-size: 1.05rem; color: var(--kastanie);
  padding: .7rem 0; border-block: 1px solid var(--linie);
  margin-bottom: 1.5rem;
}

.zweispalt { display: grid; gap: 1.6rem; margin-bottom: 1.5rem; }
@media (min-width: 52rem) { .zweispalt { grid-template-columns: 1fr 1fr; gap: 2.4rem; } }

.liste { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .95rem; }
.liste li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; }
.liste li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.liste--haken li::before { content: "✓"; color: var(--kastanie); }
.liste--offen li::before { content: "?"; color: var(--gold-tief); }
.liste--minus li::before { content: "–"; color: var(--rebenrot); }
.liste--punkt li::before { content: "•"; color: var(--gold-tief); }

.hinweis-kasten {
  background: var(--acht-grund);
  border-left: 3px solid var(--rebenrot);
  padding: .85rem 1.05rem; font-size: .94rem; margin-bottom: 1.1rem;
}
.hinweis-kasten--gold { background: var(--warn-grund); border-left-color: var(--gold); }
.signal { font-size: .89rem; color: var(--muted); font-style: italic; margin-bottom: 1.3rem; }

.kontakt {
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .1rem 1.3rem;
  font-size: .93rem; padding-top: .7rem; border-top: 1px solid var(--linie);
}
.kontakt li { margin: 0; display: flex; }
/* WCAG 2.2 · 2.5.8 – eigenständige Links brauchen mindestens 24 px Zielhöhe */
.kontakt a, .quellen a, .fuss__ende a, .reserve a, .programm a { display: inline-block; padding-block: .4rem; }

/* --- 11 · Unterkunftskarten ---------------------------------------------- */
.karten { display: grid; gap: 1.5rem; }
@media (min-width: 62rem) {
  .karten { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  .karte--rang1 { grid-column: 1 / -1; }
}
.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: .3rem;
  padding: clamp(1.15rem, 2.4vw, 1.9rem);
  display: flex; flex-direction: column;
}
.karte--rang1 { background: var(--creme-warm); border-color: rgba(155, 38, 34, .3); border-top: 4px solid var(--rebenrot); }
.karte__teil > *:last-child { margin-bottom: 0; }
.karte__teil + .karte__teil { margin-top: 1.1rem; }
@media (min-width: 62rem) {
  .karte--rang1 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 2.4rem; align-items: start; }
  .karte--rang1 .karte__kopf, .karte--rang1 .weg, .karte--rang1 .notiz { grid-column: 1 / -1; }
  .karte--rang1 .karte__teil + .karte__teil { margin-top: 0; }
}
.rang { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rebenrot); margin-bottom: .4rem; }
.karte__urteil { font-size: .95rem; color: var(--muted); margin: .25rem 0 0; }
.karte h3 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  font-variation-settings: 'opsz' 60, 'SOFT' 40, 'WONK' 1;
  font-weight: 400; margin-bottom: .2rem;
}

/* Entfernungsbalken */
.weg { margin: 1.1rem 0 1.3rem; }
.weg__wert { font-size: .95rem; margin-bottom: .6rem; }
.weg__wert strong { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 20, 'WONK' 0; font-size: 1.1em; color: var(--kastanie); }
/* rechter Rand, damit der Marker am Ende der Skala nicht ueber die Karte hinausragt */
.weg__balken { position: relative; height: .5rem; border-radius: 999px; background: #E4D4B8; margin: 0 .6rem .4rem 0; }
.weg__balken::before {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--anteil, 0%); border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--rebenrot) 100%);
  transform-origin: left center;
  animation: fuellen .85s cubic-bezier(.2, .7, .3, 1) both;
}
.weg__balken::after {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translate(-50%, -50%);
  width: .62rem; height: .62rem; background: var(--kastanie); border-radius: 50%;
}
.weg__punkt {
  position: absolute; left: var(--anteil, 0%); top: 50%;
  transform: translate(-50%, -50%);
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--papier); border: .21rem solid var(--rebenrot);
}
.karte--rang1 .weg__punkt { background: var(--creme-warm); }
.weg__skala { display: flex; justify-content: space-between; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
@keyframes fuellen { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Fakten */
.fakten { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 1rem; background: var(--linie); border: 1px solid var(--linie); }
.fakten > div { background: var(--papier); padding: .65rem .8rem; }
.karte--rang1 .fakten > div { background: var(--creme-warm); }
.fakten dt { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.fakten dd { margin: 0; font-size: .95rem; }
.fakten--zeilen { grid-template-columns: 1fr; }

.zahl {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 20, 'WONK' 0;
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--kastanie);
}
.zahl.gross { font-size: 1.5rem; font-variation-settings: 'opsz' 48, 'WONK' 0; }
.preisdetail { font-size: .89rem; color: var(--muted); margin-bottom: 1rem; }

.badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; padding: .16em .6em .2em; border-radius: .2rem; white-space: nowrap; }
.badge--gut { color: var(--kastanie); background: var(--gut-grund); }
.badge--mittel { color: var(--gold-tief); background: var(--warn-grund); }
.badge--achtung { color: var(--rebenrot-tief); background: var(--acht-grund); }

/* Rasterkinder duerfen unter ihre Mindestbreite schrumpfen (WCAG 1.4.10, 320 px) */
.karten > *, .pakete > *, .reserven > *, .uebersicht > *, .ringkarte > *, .kriterien > * { min-width: 0; }
@media (max-width: 23rem) {
  .fakten { grid-template-columns: 1fr; }
  .paket__zahlen { grid-template-columns: 1fr; }
}

/* --- 11b · Google-Bewertung ---------------------------------------------- */
.google {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem;
  margin: .5rem 0 .2rem;
  font-size: .9rem;
}
.google__pille {
  display: inline-block;
  font-weight: 600;
  color: var(--kastanie);
  background: var(--gut-grund);
  border-radius: 999px;
  padding: .18rem .7rem .24rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.google__pille--leer { color: var(--muted); background: var(--creme-tief); font-weight: 500; }
.google__stand { font-size: .8rem; color: var(--muted); }
.google a { padding-block: .35rem; }
.google__hinweis { font-size: .82rem; color: var(--muted); margin: 0 0 .9rem; max-width: 62ch; }
.vergleich td.google-zelle { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- 12 · Ringkarte (Übernahme aus Variante B) --------------------------- */
.ringkarte { display: grid; gap: 1.4rem; margin: 2.4rem 0 0; align-items: start; }
@media (min-width: 62rem) { .ringkarte { grid-template-columns: minmax(18rem, 26rem) 1fr; gap: 2.4rem; } }
.ringkarte__bild {
  background: var(--papier); border: 1px solid var(--linie); border-radius: .3rem; padding: .8rem;
}
.ringkarte__bild svg { display: block; width: 100%; height: auto; }
.ringkarte__hinweis { font-size: .82rem; color: var(--muted); margin: .6rem 0 0; }
.ringkarte__legende { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ringkarte__legende li { display: flex; gap: .7rem; align-items: flex-start; font-size: .94rem; }
.nr-kreis {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--gold); color: var(--nacht);
  box-shadow: inset 0 0 0 1px var(--gold-tief);
  font-weight: 700; font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
.ringkarte__legende b { display: block; color: var(--kastanie); }
.ringkarte__legende span span { color: var(--muted); font-size: .9rem; }

/* --- 13 · Tabellen ------------------------------------------------------- */
.tabellen-titel {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
  font-variation-settings: 'opsz' 48, 'SOFT' 30, 'WONK' 1;
  font-weight: 400; margin: 3rem 0 .3rem;
}
.tabellen-hinweis { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }

.tabelle-scroll {
  position: relative;   /* haelt absolut positionierte Kinder (nur-sr, caption) im Kasten */
  overflow-x: auto;
  border: 1px solid var(--linie);
  background: var(--papier);
  -webkit-overflow-scrolling: touch;
}
.tabelle-scroll:focus-visible { outline-offset: 0; }

table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .9rem; }
.vergleich { min-width: 72rem; }
.schritte { min-width: 40rem; }
.kriterien-tabelle { min-width: 34rem; }
caption { text-align: left; }

thead th {
  background: var(--kastanie); color: var(--papier);
  font-family: 'Alegreya Sans', sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-align: left; padding: 0; vertical-align: bottom; white-space: nowrap;
}
thead th > span { display: block; padding: .7rem .8rem; }
tbody th, tbody td { padding: .8rem; border-top: 1px solid var(--linie); vertical-align: top; text-align: left; }
tbody th {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 24, 'SOFT' 20, 'WONK' 0;
  font-size: 1.02rem; font-weight: 600; color: var(--kastanie);
  white-space: nowrap;
}
.th-ort { display: block; font-family: 'Alegreya Sans', sans-serif; font-size: .78rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
tbody tr { background: var(--papier); }
tbody tr:nth-child(even) { background: var(--creme-tief); }
tbody tr.ist-favorit { background: #F7E9DA; }
tbody tr:hover { background: var(--creme-warm); }

/* Klebende erste Spalte – der Hausname geht nie verloren (Jury-Auflage 2) */
.vergleich tbody th, .vergleich thead th:first-child,
.kriterien-tabelle tbody th, .kriterien-tabelle thead th:first-child { position: sticky; left: 0; z-index: 2; }
.vergleich tbody th, .kriterien-tabelle tbody th { background: inherit; box-shadow: 1px 0 0 var(--linie); }
.vergleich thead th:first-child, .kriterien-tabelle thead th:first-child { background: var(--kastanie); z-index: 3; }
.vergleich tbody tr.ist-favorit th { box-shadow: 1px 0 0 var(--linie), inset 3px 0 0 var(--rebenrot); }

/* Zweite Zeile in der Kopfzelle: Titel des Vorschlags, nicht in Versalien */
thead .th-ort {
  color: var(--gold-hell); text-transform: none; letter-spacing: 0;
  font-weight: 400; white-space: normal; margin-top: .2rem; max-width: 16rem;
}

/* Fazit-Kasten über der Vergleichstabelle */
.fazit {
  background: var(--creme-warm);
  border-left: 4px solid var(--gold);
  border-radius: .3rem;
  padding: 1.1rem 1.3rem 1.2rem;
  max-width: 68ch;
  margin-bottom: 2.2rem;
}
.fazit h3 {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  font-family: 'Alegreya Sans', sans-serif; color: var(--gold-tief); margin-bottom: .5rem;
}
.fazit p { font-size: 1.02rem; color: var(--tinte); }

.sortknopf {
  font: inherit; font-size: inherit; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--papier); background: none; border: 0;
  padding: .7rem .8rem; width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: .35rem;
}
.sortknopf:hover { background: var(--rebenrot-tief); }
.sortknopf:focus-visible { outline-offset: -3px; }
.sortknopf .pfeil { color: var(--gold-hell); font-size: .9em; }
th[aria-sort="none"] .pfeil { opacity: .4; }

.zelle-zwei { display: block; }
.zelle-zwei + .zelle-zwei { margin-top: .35rem; color: var(--muted); }
.vergleich td.zahl { white-space: nowrap; }
/* Lange Textspalten umbrechen lassen, damit auf 1280 px nichts zerreißt */
.vergleich td:nth-child(7), .vergleich td:nth-child(8), .vergleich td:nth-child(9) { max-width: 17rem; }
.kriterien-tabelle td { max-width: 26rem; }
.schritte td:first-child { width: 3rem; color: var(--rebenrot); }
.schritte td:nth-child(3) { white-space: nowrap; }
.fussnote { font-size: .82rem; color: var(--muted); margin-top: .9rem; max-width: 70ch; }

/* --- 14 · Pakete --------------------------------------------------------- */
.pakete { display: grid; gap: 1.4rem; }
@media (min-width: 52rem) { .pakete { grid-template-columns: 1fr 1fr; } }
@media (min-width: 76rem) {
  .pakete { grid-template-columns: repeat(3, 1fr); }
  .paket--erste { grid-column: 1 / -1; }
  .paket--erste .paket__zahlen { grid-template-columns: repeat(4, 1fr); }
}
.paket {
  background: var(--papier); border: 1px solid var(--linie); border-radius: .3rem;
  padding: 1.3rem 1.35rem 1.5rem; display: flex; flex-direction: column;
}
.paket--erste { background: var(--creme-warm); border-top: 4px solid var(--rebenrot); border-color: rgba(155, 38, 34, .28); }
.paket--reserve { background: transparent; border-style: dashed; }
.paket__rang { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rebenrot); margin-bottom: .3rem; }
.paket h3 {
  font-size: 1.32rem;
  font-variation-settings: 'opsz' 36, 'SOFT' 30, 'WONK' 0;
  font-weight: 600; margin-bottom: .2rem;
}
.paket__urteil { font-size: .86rem; color: var(--muted); margin-bottom: 1rem; }
.paket__zahlen { display: grid; gap: .7rem 1rem; grid-template-columns: 1fr 1fr; margin: 0 0 1rem; }
.paket__zahlen dt { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .1rem; }
.paket__zahlen dd { margin: 0; font-size: .95rem; }
.paket__hinweis { font-size: .87rem; color: var(--muted); }

/* „Was ist noch offen" je Paket (Übernahme aus Variante B) */
.posten { margin: 0 0 1rem; padding: .8rem .9rem; border: 1px dashed var(--linie-ui); border-radius: .25rem; }
.paket--erste .posten { border-color: rgba(155, 38, 34, .3); }
.posten__titel { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.posten ul { list-style: none; margin: 0; padding: 0; }
.posten li { display: grid; grid-template-columns: minmax(6rem, auto) 1fr; gap: .2rem .8rem; font-size: .9rem; padding-block: .35rem; border-top: 1px solid var(--linie); }
.posten li:first-child { border-top: 0; padding-top: 0; }
.posten__was { color: var(--muted); }
.posten__wert { text-align: right; }
.posten__wert--lang { text-align: left; grid-column: 1 / -1; }
.posten__note { grid-column: 1 / -1; font-size: .82rem; color: var(--muted); }

/* --- 15 · Reserven & Rahmenprogramm -------------------------------------- */
.reserven { display: grid; gap: 1.3rem; }
@media (min-width: 56rem) { .reserven { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } }
.reserve {
  background: var(--papier); border: 1px solid var(--linie); border-radius: .3rem;
  padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; font-size: .94rem;
}
.reserve h3, .reserve h4 {
  font-size: 1.18rem;
  font-variation-settings: 'opsz' 30, 'SOFT' 30, 'WONK' 0;
  font-weight: 600; margin-bottom: .5rem;
}
.tag-marke { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-tief); margin-bottom: .35rem; }
.risiko, .bedingung { font-size: .88rem; color: var(--muted); }
.risiko strong { color: var(--rebenrot); }
.reserve--entfaellt { background: transparent; border-style: dashed; }
.reserve--entfaellt h4 { color: var(--muted); }

/* --- 16 · Verworfen ------------------------------------------------------ */
.verworfen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; max-width: 62ch; }
@media (min-width: 62rem) { .verworfen-liste { grid-template-columns: 1fr 1fr; max-width: none; gap: 1.8rem 3rem; } }
.verworfen-liste li { padding-left: 1.7rem; position: relative; }
.verworfen-liste li::before { content: ""; position: absolute; left: 0; top: .58em; width: .95rem; height: 2px; background: var(--rebenrot); }
.verworfen-liste h3 {
  font-size: 1.14rem;
  font-variation-settings: 'opsz' 28, 'SOFT' 20, 'WONK' 0;
  font-weight: 600; color: var(--muted); margin-bottom: .3rem;
  text-decoration: line-through; text-decoration-color: rgba(155, 38, 34, .5); text-decoration-thickness: 1px;
}
.verworfen-liste p { font-size: .94rem; margin: 0; }

/* --- 17 · Notizen und Bewertungen (Zettel-Anmutung aus Variante C) -------- */
.notiz {
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px dashed var(--linie);
}
.karte .notiz, .paket .notiz, .reserve .notiz, .vkarte .notiz { margin-top: auto; }
.notiz__kopf { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; justify-content: space-between; margin-bottom: .45rem; }
.notiz__kopf label { font-size: .8rem; font-weight: 700; letter-spacing: .05em; color: var(--kastanie); }
.notiz__hinweis { font-size: .86rem; color: var(--muted); margin: -.15rem 0 .5rem; }

.gespeichert {
  font-size: .72rem; font-weight: 500; letter-spacing: .05em;
  color: var(--kastanie); background: #E7DCC4;
  padding: .16rem .55rem .22rem; border-radius: 999px; white-space: nowrap;
}
.gespeichert::before { content: "✓ "; color: var(--gold-tief); font-weight: 700; }
.gespeichert[data-zustand="speichert"] { color: var(--muted); }
.gespeichert[data-zustand="speichert"]::before { content: "… "; }
.gespeichert[data-zustand="fehler"] { color: var(--rebenrot-tief); background: var(--acht-grund); font-weight: 700; }
.gespeichert[data-zustand="fehler"]::before { content: "! "; color: var(--rebenrot-tief); }
.gespeichert.ist-frisch { animation: aufblinken .5s ease-out; }
@keyframes aufblinken { from { opacity: .2; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

textarea {
  width: 100%; font: inherit; font-size: .95rem;
  color: var(--tinte);
  background-color: var(--zettel);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent, transparent 1.62rem,
    var(--zettel-linie) 1.62rem, var(--zettel-linie) calc(1.62rem + 1px));
  background-attachment: local;
  border: 1px solid var(--linie-ui);
  border-radius: .2rem;
  padding: .35rem .7rem;
  line-height: 1.62rem;
  resize: vertical;
  margin-bottom: .6rem;
}
textarea::placeholder { color: #7A6555; opacity: 1; }
textarea:focus-visible { border-color: var(--rebenrot-tief); }

.bewertung { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
/* Eigene Zeile, damit die vier Knöpfe auch in schmalen Karten nebeneinander bleiben. */
.bewertung__marke {
  flex: 1 1 100%;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: -.1rem;
}
.bew {
  font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  color: var(--kastanie); background: var(--papier);
  border: 1px solid var(--linie-ui); border-radius: 999px;
  padding: .38rem .85rem .42rem; min-height: 2.2rem; cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bew:hover { background: var(--creme-tief); }
.bew[aria-pressed="true"] { background: var(--kastanie); color: var(--papier); border-color: var(--kastanie); }
.bew--favorit[aria-pressed="true"] { background: var(--rebenrot-tief); border-color: var(--rebenrot-tief); }
.bew--favorit[aria-pressed="true"]::before { content: "★ "; }
.bew--nein[aria-pressed="true"] { background: var(--muted); border-color: var(--muted); }

/* Freie Notizfelder als Zettel */
.zettel-feld {
  position: relative;
  max-width: 48rem;
  margin-top: 2.2rem;
  background: var(--creme-warm);
  border: 1px solid rgba(155, 38, 34, .28);
  border-left: 4px solid var(--rebenrot);
  border-radius: .3rem;
  padding: 1.5rem 1.3rem 1.3rem;
  box-shadow: 0 1px 2px rgba(64, 45, 24, .12), 0 10px 18px -14px rgba(64, 45, 24, .5);
}
.zettel-feld::before {
  content: ""; position: absolute; top: -.55rem; left: 50%;
  width: 5.2rem; height: 1.15rem; margin-left: -2.6rem;
  background: rgba(200, 138, 46, .28);
  border-inline: 1px solid rgba(155, 38, 34, .18);
  transform: rotate(-1.6deg);
}
.zettel-feld .notiz { margin-top: 0; padding-top: 0; border-top: 0; }
.zettel-feld .notiz__kopf label {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 40, 'SOFT' 40, 'WONK' 1;
  font-size: 1.3rem; font-weight: 400; color: var(--kastanie); letter-spacing: -.01em;
}

/* Offene Fragen */
.fragen { display: grid; gap: 1.5rem; max-width: 48rem; }
.frage { border-top: 1px solid var(--linie); padding-top: 1.1rem; }
.frage .notiz { margin-top: 0; padding-top: 0; border-top: 0; }
.frage .notiz__kopf label { font-size: .99rem; font-weight: 500; line-height: 1.45; letter-spacing: 0; }
.frage__nr {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 20, 'WONK' 0;
  color: var(--rebenrot); font-weight: 600; margin-right: .35rem;
}

/* --- 18 · Nächste Schritte ----------------------------------------------- */
.speicher-hinweis {
  margin-top: 1.6rem; padding: 1rem 1.2rem;
  background: var(--creme-warm); border-left: 3px solid var(--gold);
  font-size: .95rem; max-width: 66ch;
}

/* --- 19 · Fuß ------------------------------------------------------------ */
.fuss { background: var(--nacht); color: var(--creme); padding-block: clamp(2.6rem, 5vw, 4rem); font-size: .92rem; }
.fuss::before { background: var(--gold); opacity: .45; }
.fuss h2, .fuss h3 { color: var(--gold-hell); }
.fuss__stand { max-width: 62ch; color: var(--creme); margin-bottom: 2.2rem; }
.fuss__stand strong { color: var(--gold-hell); }
.fuss__titel {
  font-size: 1.1rem;
  font-variation-settings: 'opsz' 24, 'SOFT' 20, 'WONK' 0;
  font-weight: 600; margin-bottom: .8rem;
}
.fuss__gruppe { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nacht-muted); margin: 1.6rem 0 .5rem; }
.quellen { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .1rem; }
@media (min-width: 56rem) { .quellen { grid-template-columns: 1fr 1fr; gap: .1rem 2.4rem; } }
.quellen a { color: var(--gold-hell); text-decoration-color: rgba(232, 190, 121, .45); }
.quellen a:hover { background: rgba(232, 190, 121, .16); color: var(--gold-hell); }
.fuss__klein { font-size: .84rem; color: var(--nacht-muted); max-width: 70ch; margin-top: 1.6rem; }
.fuss__klein strong { color: var(--creme); }
.fuss__ende { margin-top: 1.6rem; }
.fuss__ende a { color: var(--gold-hell); }

/* --- 20 · Lade- und Fehlerzustände --------------------------------------- */
.skelett { display: grid; gap: .8rem; max-width: 46rem; }
.skelett span {
  display: block; height: 1.1rem; border-radius: .2rem;
  background: linear-gradient(90deg, var(--creme-tief) 0%, var(--creme-warm) 50%, var(--creme-tief) 100%);
  background-size: 200% 100%;
}
.skelett span:nth-child(1) { height: 3.2rem; width: min(100%, 26rem); }
.skelett span:nth-child(2) { width: min(100%, 34rem); }
.skelett span:nth-child(3) { width: min(100%, 30rem); }
.skelett span:nth-child(4) { width: min(100%, 18rem); }
@media (prefers-reduced-motion: no-preference) {
  .skelett span { animation: schimmern 1.5s ease-in-out infinite; }
}
@keyframes schimmern { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.fehlerblock {
  max-width: 46rem;
  background: var(--acht-grund);
  border-left: 4px solid var(--rebenrot-tief);
  border-radius: .3rem;
  padding: 1.3rem 1.4rem;
}
.fehlerblock h2 {
  font-size: 1.4rem;
  font-variation-settings: 'opsz' 40, 'SOFT' 30, 'WONK' 0;
  font-weight: 600; margin-bottom: .5rem;
}
.fehlerblock p { font-size: .97rem; }
.knopf {
  font: inherit; font-size: .95rem; font-weight: 700;
  color: var(--papier); background: var(--rebenrot-tief);
  border: 1px solid var(--rebenrot-tief); border-radius: .2rem;
  padding: .6rem 1.1rem; min-height: 2.6rem; cursor: pointer;
}
.knopf:hover { background: var(--kastanie); border-color: var(--kastanie); }

/* --- 21 · Auftritt ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .kicker, .hero__titel, .hero__lead, .eckdaten, .stand-band, .glut {
    animation: auftauchen .8s cubic-bezier(.22, .7, .3, 1) both;
  }
  .hero__titel { animation-delay: .06s; }
  .hero__lead  { animation-delay: .16s; }
  .eckdaten    { animation-delay: .24s; }
  .stand-band  { animation-delay: .32s; }
  .glut        { animation-delay: .2s; animation-duration: 1.4s; }
}
@keyframes auftauchen { from { opacity: 0; transform: translateY(1.1rem); } to { opacity: 1; transform: none; } }

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

/* --- 22 · Anmeldeseite --------------------------------------------------- */
.anmeldung {
  min-height: 100svh;
  display: grid; place-items: center;
  padding: 2rem 1.25rem;
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 82% 12%, rgba(200, 138, 46, .3), transparent 58%),
    radial-gradient(90% 75% at 8% 94%, rgba(155, 38, 34, .16), transparent 62%),
    var(--creme);
}
.anmeldung__karte {
  position: relative;
  width: min(30rem, 100%);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-top: 4px solid var(--rebenrot);
  border-radius: .3rem;
  padding: clamp(1.6rem, 5vw, 2.8rem);
  box-shadow: 0 2px 24px rgba(42, 27, 18, .07);
}
.anmeldung .glut { position: absolute; right: -1.6rem; top: -3.8rem; width: 8.5rem; opacity: .55; z-index: 0; }
.anmeldung__kicker {
  position: relative;
  font-size: .76rem; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--gold-tief); margin-bottom: .9rem;
}
.anmeldung h1 {
  position: relative;
  font-size: clamp(2rem, 1.5rem + 3vw, 2.9rem);
  font-variation-settings: 'opsz' 96, 'SOFT' 40, 'WONK' 1;
  font-weight: 400; letter-spacing: -0.03em; line-height: 1.02; margin-bottom: .7rem;
}
.anmeldung h1 em { font-style: normal; color: var(--rebenrot); }
.anmeldung__satz { position: relative; color: var(--muted); font-size: 1.02rem; margin-bottom: 1.8rem; max-width: 36ch; }
.feld { position: relative; margin-bottom: 1.1rem; }
.feld label { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .05em; color: var(--kastanie); margin-bottom: .4rem; }
.feld input {
  width: 100%; font: inherit; font-size: 1.05rem; letter-spacing: .08em;
  color: var(--tinte); background: var(--creme);
  border: 1px solid var(--linie-ui); border-radius: .2rem;
  padding: .78rem .8rem;
}
.feld input:focus-visible { border-color: var(--rebenrot-tief); background: var(--papier); }
.anmeldung .knopf { position: relative; width: 100%; font-size: 1rem; padding: .8rem 1rem; min-height: 2.9rem; }
.anmeldung__meldung {
  position: relative; min-height: 1.4rem;
  margin: 1rem 0 0; font-size: .93rem; font-weight: 600; color: var(--rebenrot-tief);
}
.anmeldung__meldung:empty { margin: 0; min-height: 0; }
.anmeldung__fuss {
  position: relative; margin-top: 1.5rem; padding-top: 1.1rem;
  border-top: 1px solid var(--linie); font-size: .82rem; color: var(--muted);
}
.anmeldung__grat { display: block; width: min(30rem, 100%); height: 42px; margin-top: 1.4rem; }

/* --- 23 · Druck ---------------------------------------------------------- */
@media print {
  body::after, .kopfleiste, .sprung, .bewertung, .tabellen-hinweis { display: none; }
  .mitternacht, .fuss { background: #fff; color: #000; }
  .fuss h2, .fuss h3, .fuss a, .quellen a { color: #000; }
  .band::before, .mitternacht::before, .fuss::before { display: none; }
  .karte, .paket, .reserve, .vkarte { break-inside: avoid; }
  .tabelle-scroll { overflow: visible; }
}