/* ============================================================================
   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; } }

/* Breitbild (Inhaber 03.09.2026: am PC nur Monitore ab Full HD).
   Der Container waechst in Stufen; bis 1279 px bleibt alles wie bisher.
   Alles, was sich an --breit haengt (Kopfleiste, Hero, jede .spalte, Fuss),
   waechst automatisch mit - deshalb steht hier nur diese eine Zahl.
   --lesebreite kappt Fliesstext, damit keine Zeile ueber 80 Zeichen laeuft. */
@media (min-width: 1440px) { :root { --breit: 85rem;   --lesebreite: 50ch; } }
@media (min-width: 1680px) { :root { --breit: 97.5rem; } }
@media (min-width: 2200px) { :root { --breit: 110rem;  } }

/* --- 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;
  /* Endhoehe von Anfang an reservieren, damit die Sprungleiste beim Einsetzen
     nichts nach unten schiebt (Befund R7-2, CLS). */
  min-height: 4.6rem;
  align-content: center;
}
.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);
  /* Breite reservieren: das Datum kommt erst nach dem Laden */
  min-width: 8.2rem; text-align: right;
}
@media (max-width: 22rem) { .kopf-stand { min-width: 0; } }

.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(1.2rem, 3.5vw, 3rem) 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(1.6rem, 4vw, 3.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.1rem, 1.2rem + 6.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(1rem, 1rem + 0.3vw, 1.22rem);
  line-height: 1.45; max-width: 46ch;
  color: var(--tinte); margin-bottom: .9rem;
  /* drei Zeilen Anriss; der volle Text steht im Aufklapper darunter */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

.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: .7rem .9rem;
  background: var(--creme-warm);
  border-left: 3px solid var(--gold);
  font-size: .9rem;
  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); }

/* Ladezustand: ungefaehr so hoch wie der fertige Hero, damit der Wechsel
   vom Skelett zur Ansicht nichts verschiebt (Befund R7-2). */
.hero--laden { min-height: clamp(26rem, 58vw, 34rem); }

/* --- 6 · Bänder & Typo --------------------------------------------------- */
.band { padding-block: clamp(1.5rem, 3.6vw, 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: 1fr 1fr; gap: 1.8rem; } }
.uebersicht { gap: .5rem; }

.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); }

/* --- 7b · Ansichten, Aufklapper, Teaser, Blaettern ------------------------ */
.ansicht__titel {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);
  font-variation-settings: 'opsz' 96, 'SOFT' 40, 'WONK' 1;
  font-weight: 400;
  max-width: 22ch;
  margin-bottom: .55rem;
}
.ansicht__titel:focus-visible { outline-offset: 6px; }
/* Der programmatische Fokus nach dem Ansichtswechsel soll keinen Rahmen zeigen.
   Elemente mit tabindex="-1" sind nie per Tab erreichbar - es geht also kein
   Tastatur-Fokusindikator verloren (Befund aus Runde 5). */
h1[tabindex="-1"]:focus,
#inhalt:focus:not(:focus-visible) { outline: none; }

.aufklapp {
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  margin: 1.4rem 0;
  max-width: 62rem;
}
.aufklapp + .aufklapp { margin-top: -1px; }
.aufklapp > summary {
  cursor: pointer;
  list-style: none;
  padding: .8rem 0 .85rem 1.7rem;
  position: relative;
  font-size: .95rem; font-weight: 700; letter-spacing: .02em;
  color: var(--kastanie);
}
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::before {
  content: "+";
  position: absolute; left: .3rem; top: .72rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem; line-height: 1; color: var(--rebenrot);
}
.aufklapp[open] > summary::before { content: "–"; }
.aufklapp > summary:hover { color: var(--rebenrot); }
.aufklapp > summary:focus-visible { outline-offset: -3px; }
.aufklapp > *:not(summary) { padding-bottom: 1.2rem; }
.fuss .aufklapp { border-color: rgba(232, 190, 121, .28); }
.fuss .aufklapp > summary { color: var(--gold-hell); }
.fuss .aufklapp > summary::before { color: var(--gold-hell); }

.teaser-reihe { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 48rem) { .teaser-reihe { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }
.teaser {
  display: block; text-decoration: none;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--rebenrot);
  border-radius: .3rem;
  padding: 1.05rem 1.2rem 1.15rem;
}
.teaser:hover { background: var(--creme-warm); }
.teaser h3 {
  font-size: 1.2rem;
  font-variation-settings: 'opsz' 30, 'SOFT' 30, 'WONK' 0;
  font-weight: 600; margin-bottom: .3rem;
}
.teaser h3::after { content: " →"; color: var(--rebenrot); }
.teaser p { font-size: .95rem; color: var(--muted); margin: 0; }

.blaettern { display: grid; gap: .7rem; }
@media (min-width: 48rem) {
  .blaettern { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
  .blaettern .blaettern__ziel:last-child { text-align: right; }
}
.blaettern a {
  display: block; text-decoration: none;
  font-size: .95rem; font-weight: 600; color: var(--kastanie);
  background: var(--papier);
  border: 1px solid var(--linie-ui); border-radius: .3rem;
  padding: .7rem .95rem .75rem;
}
.blaettern a:hover { background: var(--rebenrot-tief); color: var(--papier); border-color: var(--rebenrot-tief); }
.blaettern__mitte { text-align: center; white-space: nowrap; }

.antworten__werkzeug { margin: 1.4rem 0 1.8rem; }
.antworten__werkzeug .knopf { display: inline-block; text-decoration: none; }
.fuss__oben {
  font: inherit; font-size: .92rem; font-weight: 600;
  color: var(--gold-hell); background: none;
  border: 1px solid rgba(232, 190, 121, .5); border-radius: .3rem;
  padding: .5rem 1rem; cursor: pointer;
}
.fuss__oben:hover { background: rgba(232, 190, 121, .16); }

/* --- 8a · kompakte Uebersichtskarte --------------------------------------- */
.eckdaten--kompakt > div { padding-block: .6rem .65rem; }
.eckdaten--kompakt dd { font-size: .96rem; }

.vkarte--kompakt { padding: .75rem .9rem .8rem; }
.status--klein {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: .1rem .5rem .15rem; border-radius: .7rem; text-transform: none;
}
.vkarte--kompakt h3 {
  /* etwas kleiner, damit der Titel neben dem Teaserbild zweizeilig bleibt */
  font-size: clamp(1.06rem, .95rem + .7vw, 1.6rem);
  line-height: 1.18;
  margin-bottom: .1rem;
}
.vkarte--kompakt .vkarte__charakter {
  font-size: .93rem; margin-bottom: .6rem; line-height: 1.38;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.vkarte--kompakt .status { font-size: .76rem; padding: .26rem .65rem .3rem; }

/* Kennzahlen zweispaltig - halbiert die Hoehe auf dem Handy (R5-3) */
.kompakt-fakten {
  list-style: none; margin: 0 0 .75rem; padding: .5rem .7rem;
  border: 1px dashed var(--linie-ui); border-radius: .25rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem;
}
.vkarte--kompakt .kompakt-fakten { margin-bottom: .6rem; }
.kompakt-fakten li {
  display: block; font-size: .84rem; padding-block: .22rem;
  border-top: 1px solid var(--linie); min-width: 0; line-height: 1.3;
}
.kompakt-fakten li:nth-child(1), .kompakt-fakten li:nth-child(2) { border-top: 0; padding-top: 0; }
.kompakt-fakten li > span { display: block; color: var(--muted); font-size: .74rem; }
.kompakt-fakten li > b { display: block; color: var(--kastanie); font-variant-numeric: tabular-nums; }
.kompakt-fakten .google__pille { font-size: .85rem; padding: .1rem .55rem .16rem; }

/* Dieselben Kennzahlen im Kopf einer Vorschlagsseite. Sie stehen dort nicht
   ueber die ganze Breite - auf Breitbild bilden sie die rechte Spalte (§23). */
.kopf-kennzahlen { max-width: 34rem; margin-bottom: 1.2rem; }
.kopf-kennzahlen .mini { margin-bottom: .4rem; }
.kopf-kennzahlen .kompakt-fakten { margin-bottom: 0; }

.zweispalt--kompakt { gap: .9rem; margin-bottom: 1rem; }
@media (min-width: 30rem) { .zweispalt--kompakt { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }
.zweispalt--kompakt { grid-template-columns: 1fr 1fr; gap: .9rem; }
.zweispalt--kompakt > div { min-width: 0; }
.zweispalt--kompakt .liste li { overflow-wrap: anywhere; }
.zweispalt--kompakt .liste { font-size: .86rem; margin-bottom: 0; }
.zweispalt--kompakt .liste li { margin-bottom: .3rem; padding-left: 1.1rem; }
.zweispalt--kompakt .mini { margin-bottom: .35rem; }
/* Kurzform: zwei Zeilen je Punkt. Der volle Wortlaut steht auf der Unterseite
   und bleibt fuer Screenreader vollstaendig im DOM. */
.zweispalt--kompakt .liste li {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; line-height: 1.32;
}
.kompakt-mehr { margin: .5rem 0 0; font-size: .86rem; }
.vkarte--kompakt .vkarte__sprung { margin-bottom: .5rem; padding: .42rem .9rem .47rem; }
.vkarte--kompakt .notiz { margin-top: 0; padding-top: .55rem; }
.vkarte--kompakt textarea { margin-bottom: .5rem; }
.notiz--kompakt .bewertung { margin-bottom: .1rem; }
/* Die Marke steht als aria-label an der Gruppe - auf der engen Karte reicht das. */
.notiz--kompakt .bewertung__marke {
  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;
}
.notiz--kompakt .bew { min-height: 2rem; padding: .3rem .75rem .34rem; }
.vkarte .aufklapp { margin: .35rem 0; }
.vkarte .aufklapp > summary { padding-block: .5rem; font-size: .88rem; }
.vkarte .aufklapp > *:not(summary) { padding-bottom: .6rem; }
.aufklapp--notiz { border: 0; margin: 0; }
.aufklapp--notiz > summary { padding: .5rem 0 .3rem 1.5rem; font-size: .88rem; }
.aufklapp--notiz > summary::before { top: .42rem; font-size: 1.05rem; }
.aufklapp--notiz > *:not(summary) { padding-bottom: 0; }

/* --- 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; }
.vkarte__kopf { flex-wrap: nowrap; gap: .6rem .8rem; }
.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; }

/* --- 11c · Bilder: Streifen, Teaser, Band, Leuchtkasten ------------------- */
.bildstreifen {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .4rem;
}
.bildstreifen li { margin: 0; min-width: 0; }
.bildstreifen__knopf {
  display: block; width: 100%; padding: 0; cursor: pointer;
  background: var(--creme-tief);
  border: 1px solid var(--linie); border-radius: .25rem;
  overflow: hidden;
}
.bildstreifen__knopf img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .2s ease;
}
.bildstreifen__knopf:hover img { transform: scale(1.03); }
.bildstreifen__knopf:focus-visible { outline-offset: 2px; }

/* Teaser auf der Übersichtskarte: klein neben dem Kopf, kostet keine Zeile */
.teaserbild {
  flex: none; width: 6.5rem; padding: 0; cursor: pointer;
  background: var(--creme-tief);
  border: 1px solid var(--linie); border-radius: .25rem;
  overflow: hidden;
  align-self: flex-start;
}
.teaserbild img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.teaserbild:focus-visible { outline-offset: 2px; }
@media (max-width: 34rem) { .teaserbild { width: 4.8rem; } }

/* Bildband im Kopf einer Vorschlagsseite */
.bildband { display: grid; gap: .5rem; margin: 1.2rem 0 .4rem; }
@media (min-width: 34rem) { .bildband { grid-template-columns: 1fr 1fr; gap: .7rem; } }
.bildband .bildstreifen { margin-bottom: 0; }

/* Leuchtkasten */
.leuchtkasten {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.6rem, 3vw, 2rem);
  background: rgba(28, 18, 13, .96);
}
/* display: flex wuerde das hidden-Attribut aushebeln */
.leuchtkasten[hidden] { display: none; }
body.hat-leuchtkasten { overflow: hidden; }
.leuchtkasten__buehne {
  position: relative;
  display: flex; align-items: center; gap: .4rem;
  max-width: min(72rem, 100%); max-height: 100%;
}
.leuchtkasten__figur {
  margin: 0; min-width: 0;
  display: flex; flex-direction: column; gap: .7rem;
  max-height: calc(100vh - 4rem);
}
.leuchtkasten__bild {
  display: block; width: auto; max-width: 100%;
  max-height: min(70vh, 44rem); height: auto;
  object-fit: contain;
  background: var(--nacht-hell);
  border-radius: .3rem;
  margin-inline: auto;
}
.leuchtkasten__text { color: var(--creme); max-width: 60ch; margin-inline: auto; }
.leuchtkasten__alt { font-size: 1rem; line-height: 1.45; margin: 0 0 .3rem; }
.leuchtkasten__quelle { font-size: .85rem; color: var(--nacht-muted); margin: 0 0 .2rem; }
.leuchtkasten__quelle a { color: var(--gold-hell); }
.leuchtkasten__zaehler {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--nacht-muted); margin: 0;
}
.leuchtkasten__schliessen {
  position: absolute; top: -2.6rem; right: 0;
  font: inherit; font-size: .85rem; font-weight: 700;
  color: var(--nacht); background: var(--gold-hell);
  border: 1px solid var(--gold-hell); border-radius: 999px;
  padding: .35rem 1rem .4rem; min-height: 2.2rem; cursor: pointer;
}
.leuchtkasten__schliessen:hover { background: var(--creme); border-color: var(--creme); }
.leuchtkasten__pfeil {
  flex: none;
  font: inherit; font-size: 1.8rem; line-height: 1;
  color: var(--nacht); background: var(--gold-hell);
  border: 1px solid var(--gold-hell); border-radius: 50%;
  width: 2.6rem; height: 2.6rem; cursor: pointer;
}
.leuchtkasten__pfeil:hover { background: var(--creme); border-color: var(--creme); }
.leuchtkasten :focus-visible { outline-color: var(--gold-hell); }
@media (max-width: 34rem) {
  .leuchtkasten__buehne { flex-wrap: wrap; justify-content: center; }
  .leuchtkasten__figur { order: -1; flex-basis: 100%; }
  .leuchtkasten__schliessen { top: -2.4rem; }
}

.fuss__bilder { font-size: .86rem; color: var(--nacht-muted); margin: 1.2rem 0 0; max-width: 70ch; }

/* --- 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; }
/* Vier Spalten muessen bei 1280 px ohne Scrollen passen: Kriterienspalte
   darf umbrechen, die Wertspalten bekommen eine Obergrenze. */
.kriterien-tabelle { table-layout: fixed; }
.kriterien-tabelle tbody th { white-space: normal; max-width: 12rem; }
.kriterien-tabelle thead th:first-child { width: 12rem; }
.kriterien-tabelle td { max-width: 20rem; }
.schritte td:first-child { width: 3rem; color: var(--rebenrot); }
.schritte td:nth-child(3) { white-space: nowrap; }
.schritte .schritt-was { display: block; }
.fussnote { font-size: .82rem; color: var(--muted); margin-top: .9rem; max-width: 70ch; }

/* --- 13b · Vergleich als Karten (unter 48rem statt der Tabelle) ----------- */
.vergleich-wahl {
  background: var(--creme-warm);
  border: 1px solid var(--linie);
  border-radius: .3rem;
  padding: .9rem 1rem 1rem;
  margin-bottom: 1.2rem;
}
.vergleich-wahl .mini { font-size: .95rem; letter-spacing: .02em; text-transform: none; color: var(--kastanie); margin-bottom: .6rem; }
.vergleich-wahl__felder { display: grid; gap: .7rem; margin-bottom: .8rem; }
.vergleich-wahl__felder label {
  display: block;
  font-size: .9rem; font-weight: 700; letter-spacing: .02em;
  color: var(--kastanie); margin-bottom: .25rem;
}
.vergleich-wahl select {
  font: inherit; font-size: 1rem; width: 100%;
  color: var(--tinte); background: var(--papier);
  border: 1px solid var(--linie-ui); border-radius: .2rem;
  padding: .5rem .6rem; min-height: 2.6rem;
}
.vergleich-wahl__alle { display: flex; align-items: center; gap: .5rem; font-size: .95rem; cursor: pointer; }
.vergleich-wahl__alle input { width: 1.15rem; height: 1.15rem; accent-color: var(--rebenrot-tief); }

.kriterien-karten { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.kriterium-karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--gold);
  border-radius: .3rem;
  padding: .8rem .9rem .85rem;
}
.kriterium-karte h3 {
  font-size: 1.05rem;
  font-variation-settings: 'opsz' 26, 'SOFT' 20, 'WONK' 0;
  font-weight: 600;
  margin-bottom: .35rem;
}
.kriterium-karte dl { margin: 0; }
/* Marke und Wert in einer laufenden Zeile – spart je Wert eine ganze Zeile */
.kriterium-karte dl > div { padding-block: .4rem; border-top: 1px solid var(--linie); }
.kriterium-karte dt {
  display: inline; margin-right: .4rem;
  /* Wertelabel ist Inhalt, kein Ornament – daher 16 px wie der Wert (R4-2) */
  font-size: 1rem; font-weight: 700; letter-spacing: .03em;
  color: var(--rebenrot);
}
.kriterium-karte dd { display: inline; margin: 0; font-size: 1rem; line-height: 1.45; color: var(--tinte); }

/* --- 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); }

/* --- 15b · Variante innerhalb eines Vorschlags ---------------------------- */
.band.variante {
  background: var(--creme-warm);
  border-block: 1px solid var(--linie);
}
.band.variante::before { background: var(--gold); opacity: .75; }
.band.variante .abschnittsnr { background: var(--creme-warm); }
.band.variante > .spalte:first-child > h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.3rem);
}
.band.variante .karte, .band.variante .paket, .band.variante .haupt-karte { background: var(--papier); }

/* --- 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 · Breitbild ------------------------------------------------------
   Inhaber-Wunsch 03.09.2026: am PC nur Breitbild-Monitore ab Full HD.
   Bis 1279 px aendert sich nichts – alle Regeln haengen an 1440/1680 px.
   Der Container waechst ueber --breit (§1); hier wird die gewonnene Breite
   verteilt: mehr Spalten in den Rastern, zweispaltige Koepfe, volle Tabellen.
   Gegenprobe: qa/t4/pruefe_frontend.py (Breiten 1440/1680/1920/2560).
   ======================================================================== */

@media (min-width: 1440px) {

  /* -- Lesbarkeit: keine Fliesstextzeile ueber 80 Zeichen -----------------
     `ch` ist die Laufweite der Ziffer 0 und in Alegreya Sans deutlich breiter
     als der Durchschnittsbuchstabe: 68ch trugen gemessen 99 Zeichen. 52ch
     ergeben rund 76 Zeichen, 50ch rund 73 (Befund W1). Der Geltungsbereich ist derselbe,
     den der Pruefstein misst: jeder Absatz und Listenpunkt in Inhalt und Fuss. */
  #ansicht p, #ansicht li, #fuss p, #fuss li { max-width: var(--lesebreite); }
  /* Ausnahmen: Zeilen, die als Raster oder Bedienelement gebaut sind. */
  #ansicht .zeitleiste li, #ansicht .posten li, #ansicht .weg__skala,
  #ansicht .kompakt-fakten li, #ansicht .bildstreifen li,
  #ansicht .unternav li, #ansicht .favoriten__liste li,
  #ansicht .kriterium-karte li, #ansicht .blaettern p,
  #ansicht .abschnittsnr { max-width: none; }
  #ansicht .status { max-width: 100%; }
  /* Wo das Design schon enger gesetzt hat, bleibt es enger (im selben
     Verhaeltnis mitgezogen wie --lesebreite). */
  .hero__innen .hero__lead { max-width: 37ch; }
  #ansicht .vorspann { max-width: 45ch; }
  #ansicht .kurzfassung p { max-width: 48ch; }
  #fuss .fuss__stand, #ansicht .google__hinweis { max-width: 50ch; }
  /* Aufklapper duerfen die volle Breite nutzen; der Text darin ist gekappt. */
  .aufklapp { max-width: none; }

  /* -- Karten-Raster ----------------------------------------------------- */
  .karten, .reserven, .pakete { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* In einem echten Raster braucht der Rang-1-Kasten keine Sonderbreite mehr;
     warmer Grund und rote Oberkante heben ihn weiterhin hervor. */
  .karte--rang1 { grid-column: auto; display: flex; }
  .karte--rang1 .karte__teil + .karte__teil { margin-top: 1.1rem; }
  .paket--erste { grid-column: auto; }
  .paket--erste .paket__zahlen { grid-template-columns: 1fr 1fr; }

  /* -- Kopf einer Vorschlagsseite: Text links, Bilder/Zahlen/Zettel rechts
     Zwei Rasterspalten statt Floats: das Bildband beginnt auf Hoehe der H1
     (kein leeres Rechteck oben rechts) und die rechte Saeule stapelt ohne
     Luecke, weil sie nicht mehr um den Textfluss herumlaufen muss (W5). */
  .vorschlag-kopf {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) 26rem;
    /* min-content in der ersten Zeile: waere die rechte Saeule laenger als die
       linke, duerfte sie die Titelzeile nicht auseinanderziehen. */
    grid-template-rows: min-content auto;
    column-gap: 3rem;
  }
  .kopf-titel { grid-column: 1; grid-row: 1; min-width: 0; }
  .kopf-text { grid-column: 1; grid-row: 2; min-width: 0; }
  .kopf-seite { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  .kopf-seite > .bildband { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .kopf-seite > .kopf-kennzahlen { max-width: none; margin-top: 1.4rem; }
  .kopf-seite > .zettel-feld { max-width: none; margin-top: 1.8rem; }
  .kopf-text > .unternav { margin-top: 1.4rem; }

  /* -- Die Idee: Prosa links, die Punkte rechts -------------------------- */
  .idee-raster {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.6rem 3.4rem;
  }
  .idee-raster .bilder { margin-top: 0; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }

  /* -- Der Ablauf: Samstag links, „Der Moment" und Sonntag rechts --------
     Die Reihenfolge im DOM bleibt chronologisch; das Raster stellt nur um. */
  .band--ablauf {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0;
    padding-inline: max(0px, calc((100% - var(--breit)) / 2));
  }
  .band--ablauf > .spalte, .band--ablauf > .mitternacht { max-width: none; margin-inline: 0; }
  .band--ablauf > .spalte:first-child { grid-column: 1 / -1; }
  .band--ablauf > .spalte--samstag { grid-column: 1; grid-row: span 2; }
  .band--ablauf > .mitternacht { grid-column: 2; margin-block: 0 2rem; }
  .band--ablauf > .spalte--sonntag { grid-column: 2; }
  /* Der rote Faden begleitet auch die rechte Spalte. */
  .band--ablauf > .spalte--sonntag::before {
    content: ""; position: absolute; top: 0; bottom: 0;
    left: var(--rand); width: var(--faden);
    background: var(--rebenrot); opacity: .55;
  }

  /* -- Tabellen: volle Containerbreite statt seitlichem Schieben ---------
     Feste Breiten nur fuer die schmalen Wertspalten (gemessen: eine Preis-
     spanne braucht 136 px, sie bleibt unzerrissen – Jury-Auflage 11); die
     Textspalten teilen sich den ganzen Rest und wachsen mit dem Container.
     Kopfzeilen, Hausnamen, Google-Pille und Marken duerfen dafuer umbrechen.
     So scrollt keine Tabelle mehr seitwaerts. */
  .vergleich { min-width: 0; table-layout: fixed; }
  .vergleich thead th, .vergleich .sortknopf, .vergleich tbody th,
  .vergleich .badge, .vergleich .google__pille { white-space: normal; }
  /* Der Sortierknopf war eine Flexbox und konnte nicht unter sein laengstes
     Wort schrumpfen – als Block bricht die Ueberschrift sauber um. */
  .vergleich .sortknopf { display: block; text-align: left; }
  .vergleich thead th { overflow-wrap: break-word; hyphens: auto; }
  .vergleich td.zahl:nth-child(4) { white-space: normal; }
  .vergleich td, .vergleich tbody th { overflow-wrap: break-word; hyphens: auto; }
  .vergleich thead th:nth-child(1) { width: 8.5rem; }
  .vergleich thead th:nth-child(2),
  .vergleich thead th:nth-child(3) { width: 8.75rem; }
  /* Breit genug fuer den laengsten Ortsnamen in der Ueberschrift
     („Weg zu Nörders Musikantenstadl") – sonst bricht das Wort mitten durch. */
  .vergleich thead th:nth-child(4) { width: 9.5rem; }
  .vergleich thead th:nth-child(5) { width: 7rem; }
  .vergleich thead th:nth-child(6) { width: 6rem; }
  .kriterien-tabelle thead th:first-child { width: 15rem; }
  .kriterien-tabelle tbody th { max-width: none; }
  .kriterien-tabelle td { max-width: none; }
  /* Der Hinweis auf das seitliche Schieben gilt hier nicht mehr. */
  .nur-schmal { display: none; }

  /* Die Legende der Ringkarte stand als schmale Saeule neben viel Weissraum. */
  .ringkarte__legende { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 2rem; }

  /* -- Restliche Bloecke, die sonst als schmale Saeule stehenblieben ----- */
  .fragen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: none; gap: 1.5rem 2.6rem; }
  /* Kasten ueber die Containerbreite; der Text darin bleibt bei --lesebreite.
     Der Notizzettel (.zettel-feld) bleibt bewusst schmal – ein Schreibfeld mit
     1.500 px Zeilenlaenge tippt sich niemand gern (Befund K3). */
  .favoriten { max-width: none; }
  /* K4: die „Was“-Spalte der Schritte-Tabelle lief auf 129 Zeichen je Zeile.
     Die Kappung sitzt am Block in der Zelle - eine max-width auf dem <td>
     selbst wertet das automatische Tabellenlayout nicht aus. */
  .schritte .schritt-was { max-width: var(--lesebreite); }
  /* Die Kastanienglut bleibt beim Inhalt statt am Bildschirmrand zu kleben. */
  .glut { right: max(3rem, calc((100% - var(--breit)) / 2 + 1rem)); }
}

/* Zwischenstufe 1440–1679 px: der Container ist 1.360 px, der Tabelle bleiben
   1.276 px. Mit allen zehn Spalten faenden die vier Textspalten nur 125 px –
   rund 18 Zeichen je Zeile bei bis zu 14 Zeilen je Zelle (Befund W3). Die
   Spalte „Größter Vorteil / größtes Risiko" zeigt nur den jeweils ersten Punkt
   zweier Listen, die in der Karte darueber vollstaendig stehen; in dieser Stufe
   entfaellt sie, die drei verbleibenden Textspalten wachsen auf 167 px.
   Ab 1680 px stehen wieder alle zehn Spalten (dann 175–225 px je Textspalte). */
@media (min-width: 1440px) and (max-width: 1679.98px) {
  .vergleich thead th:nth-child(9),
  .vergleich tbody td:nth-child(9) { display: none; }
}

@media (min-width: 1680px) {
  /* Alle vier Vorschlaege in einer Reihe */
  .uebersicht { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
  .karten, .reserven, .pakete { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .verworfen-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 2.6rem; }
  .quellen { grid-template-columns: repeat(3, 1fr); }

  .vorschlag-kopf { grid-template-columns: minmax(0, 1fr) 30rem; }

  .idee-raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }

  /* Grossbild darf den Platz nutzen – der Leuchtkasten bleibt zentriert. */
  .leuchtkasten__buehne { max-width: min(84rem, 100%); }
  .leuchtkasten__bild { max-height: min(74vh, 50rem); }
}

/* --- 24 · 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; }
}