/* kratels-events – styles. Self-hosted font (Fraunces, OFL) for headings, system font for text.
   No external resources. Mobile first. */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/fraunces-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/fraunces-latin-400-italic.woff2") format("woff2");
}

:root {
  --bg: #f6f1e7;          /* warm paper */
  --fg: #1f2a24;
  --muted: #5f6a62;
  --tanne: #173326;       /* fir green */
  --tanne-2: #224a37;
  --gold: #b0843a;
  --beere: #9e2b25;       /* berry red */
  --karte: #fffdf8;
  --linie: #e4dccb;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1f17; --fg: #ece6d8; --muted: #a9b0a6; --karte: #16291f; --linie: #29402f;
    --gold: #d8b06a; --beere: #e0736a; --tanne: #0b1811; --tanne-2: #1b3627;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
a { color: var(--beere); }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }

/* Neutral pages (home, 404) */
body.neutral main { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; text-align: center; }
.wordmark { color: var(--muted); letter-spacing: .04em; margin: 0; }

/* Festive pages: warm paper with tiny scattered stars; the header is a full-width fir-green band */
body.gate, body.event { position: relative; }
body.event {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23b0843a' opacity='.16'%3E%3Cpath d='M20 14l1.6 4.4 4.4 1.6-4.4 1.6L20 26l-1.6-4.4L14 20l4.4-1.6z'/%3E%3Cpath d='M84 70l1.2 3.3 3.3 1.2-3.3 1.2L84 79l-1.2-3.3-3.3-1.2 3.3-1.2z'/%3E%3Ccircle cx='60' cy='30' r='1.6'/%3E%3Ccircle cx='100' cy='16' r='1.2'/%3E%3Ccircle cx='30' cy='92' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}
main { position: relative; z-index: 1; }
.kopf {
  background: radial-gradient(ellipse at 50% 0, var(--tanne-2), var(--tanne) 70%);
  box-shadow: 0 0 0 100vmax var(--tanne); clip-path: inset(-1.5rem -100vmax 0);
  margin-top: -1.5rem; padding-top: 2rem !important;
}
.girlande { display: block; width: calc(100% + 2rem); height: 2.6rem; margin: -.2rem -1rem .9rem; }

/* Snowfall: above the content but click-through; flakes (❄) and dots, visible on paper and on green */
.schnee { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.schnee i {
  position: absolute; top: -2rem; font-style: normal; line-height: 1; user-select: none;
  color: #ffffff; text-shadow: 0 0 2px rgba(60, 100, 130, .55), 0 0 6px rgba(255,255,255,.8);
  font-size: 1.1rem; opacity: .9; animation: fallen 14s linear infinite;
}
.schnee i:nth-child(even) { font-size: 1.6rem; opacity: .95; }
.schnee i:nth-child(1) { left: 1.0%; animation-duration: 18s; animation-delay: -4s; }
.schnee i:nth-child(2) { left: 5.7%; animation-duration: 19s; animation-delay: -15s; }
.schnee i:nth-child(3) { left: 10.9%; animation-duration: 11s; animation-delay: -19s; }
.schnee i:nth-child(4) { left: 12.6%; animation-duration: 17s; animation-delay: -8s; }
.schnee i:nth-child(5) { left: 19.0%; animation-duration: 13s; animation-delay: -15s; font-size: .8rem; }
.schnee i:nth-child(6) { left: 23.1%; animation-duration: 18s; animation-delay: -15s; }
.schnee i:nth-child(7) { left: 26.7%; animation-duration: 12s; animation-delay: -7s; }
.schnee i:nth-child(8) { left: 31.8%; animation-duration: 18s; animation-delay: -12s; }
.schnee i:nth-child(9) { left: 36.4%; animation-duration: 20s; animation-delay: -2s; }
.schnee i:nth-child(10) { left: 38.2%; animation-duration: 19s; animation-delay: -1s; font-size: .8rem; }
.schnee i:nth-child(11) { left: 43.0%; animation-duration: 10s; animation-delay: -8s; }
.schnee i:nth-child(12) { left: 47.8%; animation-duration: 16s; animation-delay: -13s; }
.schnee i:nth-child(13) { left: 51.7%; animation-duration: 19s; animation-delay: -14s; }
.schnee i:nth-child(14) { left: 58.1%; animation-duration: 12s; animation-delay: -11s; }
.schnee i:nth-child(15) { left: 58.8%; animation-duration: 12s; animation-delay: -15s; font-size: .8rem; }
.schnee i:nth-child(16) { left: 63.5%; animation-duration: 20s; animation-delay: -13s; }
.schnee i:nth-child(17) { left: 69.9%; animation-duration: 14s; animation-delay: -13s; }
.schnee i:nth-child(18) { left: 72.9%; animation-duration: 16s; animation-delay: -18s; }
.schnee i:nth-child(19) { left: 76.5%; animation-duration: 19s; animation-delay: -13s; }
.schnee i:nth-child(20) { left: 81.6%; animation-duration: 15s; animation-delay: 0s; font-size: .8rem; }
.schnee i:nth-child(21) { left: 86.8%; animation-duration: 19s; animation-delay: -5s; }
.schnee i:nth-child(22) { left: 90.4%; animation-duration: 15s; animation-delay: -17s; }
.schnee i:nth-child(23) { left: 95.4%; animation-duration: 19s; animation-delay: -3s; }
.schnee i:nth-child(24) { left: 98.8%; animation-duration: 13s; animation-delay: -20s; }
@keyframes fallen {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(1.2rem, 55vh); }
  100% { transform: translate(-.6rem, 110vh); }
}
/* Garland baubles wobble once when the page is first opened (class set by app.js once per visit) */
.wackeln .gk { animation: wackeln 2.4s ease-out 1; }
.wackeln .g1, .wackeln .g5 { animation-delay: .15s; }
.wackeln .g2, .wackeln .g6 { animation-delay: .3s; }
.wackeln .g3, .wackeln .g7 { animation-delay: .45s; }
@keyframes wackeln {
  0% { transform: rotate(0); } 12% { transform: rotate(16deg); } 30% { transform: rotate(-12deg); }
  48% { transform: rotate(8deg); } 66% { transform: rotate(-5deg); } 84% { transform: rotate(2deg); } 100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .schnee { display: none; } .kugel, .gk { animation: none !important; } }

.stern { width: 2.6rem; height: 2.6rem; fill: var(--gold); display: block; margin: 0 auto .75rem; }

/* Gate */
body.gate { background-color: var(--tanne); background-image: linear-gradient(var(--tanne), var(--tanne-2)); color: #f3ecdc; }
body.gate main { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.kugeln { position: absolute; top: 0; left: 50%; width: 9rem; height: 12.6rem; transform: translateX(-50%); }
.kugel { transform-box: view-box; animation: wackeln 2.6s ease-out, schwingen 4s ease-in-out 2.6s infinite alternate; }
.kugel.k0 { transform-origin: 18px 0; }
.kugel.k1 { transform-origin: 50px 0; animation-delay: .2s, 2.8s; }
.kugel.k2 { transform-origin: 82px 0; animation-delay: .4s, 3s; }
@keyframes schwingen { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.gate-box { padding-top: 8rem; }
.gate-box { width: 100%; max-width: 22rem; text-align: center; }
.gate-box h1 { font-size: 2.6rem; margin: 0 0 .25rem; color: #fff7e6; }
.gate-box .unterzeile { color: #cfd8cc; margin: 0 0 1.5rem; }
.gate-form { display: grid; gap: .6rem; text-align: left; }
.gate-form label { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #cfd8cc; }
input[type=text], input[type=password] {
  font: inherit; font-size: 1.15rem; width: 100%;
  padding: .8rem .9rem; border-radius: .7rem;
  border: 1px solid rgba(255,255,255,.25); background: #fff; color: #1f2a24;
}
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
button {
  font: inherit; font-weight: 600; font-size: 1.05rem; cursor: pointer;
  padding: .85rem 1rem; border: 0; border-radius: .7rem;
  background: var(--gold); color: #1b1408;
}
button:active { transform: translateY(1px); }
.hinweis { padding: .7rem .9rem; border-radius: .6rem; margin: 0 0 1rem; text-align: left; }
.hinweis.fehler { background: #f7dcd8; color: #6e1a14; }
.hinweis.ok { background: #dcefdc; color: #1c4a24; }

/* Info page */
.kopf { text-align: center; color: #f3ecdc; padding: 1rem 0 1.25rem; }
.vorzeile { font-family: var(--serif); font-style: italic; font-weight: 400; margin: 0; color: #e6d6b3; }
.kopf h1 { font-size: clamp(2rem, 8vw, 2.8rem); margin: .2rem 0 .35rem; color: #fff7e6; }
.datum { margin: 0; letter-spacing: .06em; text-transform: uppercase; font-size: .9rem; color: #cfd8cc; }
.intro {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 1rem;
  padding: 1.1rem 1.2rem; margin: 0 0 1rem; box-shadow: 0 10px 30px -18px rgba(0,0,0,.45);
}
.karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 1rem;
  padding: 1rem 1.2rem; margin: 0 0 1rem;
}
.karte h2 { font-size: 1.25rem; margin: 0 0 .35rem; color: var(--fg); }
.karte, .intro { outline: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent); outline-offset: -7px; }
.karte h2 { display: flex; align-items: center; gap: .55rem; }
.ic {
  display: inline-grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  font-size: 1.1rem; background: color-mix(in srgb, var(--beere) 12%, var(--karte));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--beere) 25%, transparent);
}
.karte:nth-of-type(3n+2) .ic { background: color-mix(in srgb, #2f6b4a 14%, var(--karte)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #2f6b4a 28%, transparent); }
.karte:nth-of-type(3n) .ic { background: color-mix(in srgb, var(--gold) 18%, var(--karte)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
.karte p { margin: .35rem 0; }
.karte { position: relative; overflow: hidden; }
.karte.highlight::before {
  content: ""; position: absolute; inset: 0 0 auto; height: .45rem;
  background: repeating-linear-gradient(-45deg, var(--beere) 0 .55rem, #fff 0 1.1rem);
}
.karte.highlight { padding-top: 1.4rem; border-color: var(--gold); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 12%, var(--karte)), var(--karte)); }
.adresse { font-size: 1.1rem; }
.links { display: flex; flex-wrap: wrap; gap: .5rem; }
.links a {
  display: inline-block; padding: .45rem .8rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--linie); color: var(--fg); font-size: .95rem;
}
.gruss { text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--muted); margin-top: 1.5rem; }

/* ---------- Registration & lists (2b) ---------- */
.kopf.klein { padding-top: .25rem; }
.kopf.klein h1 { font-size: clamp(1.8rem, 7vw, 2.3rem); }
.zurueck { margin: 0 0 .5rem; text-align: left; }
.zurueck a { color: #e6d6b3; text-decoration: none; font-size: .95rem; }
.klein-text { font-size: .93rem; color: var(--muted); }
.hinweis p { margin: .2rem 0; }
.hinweis.info { background: #f4ead2; color: #5a4310; }

a.knopf, button.haupt, button.zweitrangig, button.gefahr {
  display: inline-block; text-align: center; text-decoration: none; font: inherit; font-weight: 600;
  padding: .75rem 1.1rem; border-radius: .7rem; border: 0; cursor: pointer;
  background: var(--beere); color: #fff;
}
a.knopf.zweitrangig, button.zweitrangig { background: transparent; color: var(--fg); border: 1px solid var(--linie); font-weight: 500; }
button.haupt { width: 100%; font-size: 1.1rem; padding: .95rem; margin: .25rem 0 1.25rem; }
button.haupt, a.knopf:not(.zweitrangig) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--beere) 85%, #fff), var(--beere));
  box-shadow: 0 6px 16px -8px var(--beere);
}
button.haupt::after, a.knopf:not(.zweitrangig)::after { content: " ✨"; }
button.gefahr { background: #8a1f1a; }
.anmelde-box { text-align: center; }
.anmelde-box p { margin: 0 0 .75rem; }

.feld { display: grid; gap: .25rem; margin: .5rem 0; }
.feld > span { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.feld input[type=text], .feld select, .feld textarea, .link-feld {
  font: inherit; width: 100%; padding: .65rem .75rem; border-radius: .6rem;
  border: 1px solid var(--linie); background: var(--bg); color: var(--fg);
}
.feld textarea { resize: vertical; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }

.zeilen { display: grid; gap: .6rem; margin: .5rem 0 .75rem; }
.zeile {
  position: relative; display: grid; gap: .1rem .75rem;
  padding: .6rem .75rem; border: 1px dashed var(--linie); border-radius: .75rem;
}
.zeile .feld { margin: .2rem 0; }
.zeile .typ { display: flex; gap: 1rem; align-items: center; padding: .2rem 0; }
.zeile .typ label { display: flex; gap: .35rem; align-items: center; }
.zeile.ist-kind .getraenke { display: none; }
.zeile .entfernen {
  position: absolute; top: .35rem; right: .35rem; width: 2rem; height: 2rem; padding: 0;
  border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 1rem; cursor: pointer;
}
.zeile .vorname, .zeile .gericht-name { padding-right: 2rem; }
@media (min-width: 34rem) {
  .zeile.person { grid-template-columns: 1.3fr auto 1.2fr; align-items: end; }
  .zeile.gericht { grid-template-columns: 1.6fr 1fr; align-items: end; }
  .zeile .vorname, .zeile .gericht-name { padding-right: 0; }
  .zeile { padding-right: 2.5rem; }
}

.link-feld { font-size: .9rem; margin: .25rem 0 .5rem; }
.loeschen summary { cursor: pointer; color: var(--muted); }
.loeschen .check { display: flex; gap: .5rem; align-items: center; margin: .5rem 0 .75rem; }

.chips { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chips li { padding: .3rem .75rem; border-radius: 999px; font-size: .95rem; background: color-mix(in srgb, var(--beere) 13%, var(--karte)); }
.chips li:nth-child(3n+2) { background: color-mix(in srgb, #2f6b4a 15%, var(--karte)); }
.chips li:nth-child(3n) { background: color-mix(in srgb, var(--gold) 22%, var(--karte)); }
.chips li::before { content: "● "; font-size: .7em; vertical-align: .15em; color: var(--beere); }
.chips li:nth-child(3n+2)::before { color: #2f6b4a; }
.chips li:nth-child(3n)::before { color: var(--gold); }
.kategorie { margin: .9rem 0 .2rem; }
.kategorie h3 { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .25rem; font-weight: 600; }
.gerichte { margin: 0; padding-left: 1.1rem; }
.gerichte li { margin: .15rem 0; }
.gerichte .von { color: var(--muted); font-size: .92rem; }
.doppelt { display: inline-block; font-size: .78rem; color: #7a5a14; background: #f4ead2; border-radius: 999px; padding: .05rem .5rem; margin-left: .25rem; }
.luecke { margin: 0; font-style: italic; color: var(--beere); font-size: .95rem; }
.leer { margin: 0; color: var(--muted); font-size: .95rem; }
#buffet .knopf { margin-top: .75rem; }

/* Yes/no, buffet hint, link box */
.antwort { display: grid; gap: .5rem; margin-top: .75rem; }
.wahl { display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; border: 1px solid var(--linie); border-radius: .75rem; cursor: pointer; }
.wahl:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--karte)); font-weight: 600; }
.wahl input { width: 1.15rem; height: 1.15rem; accent-color: var(--beere); }
@media (min-width: 34rem) { .antwort { grid-template-columns: 1fr 1fr; } }
.schon-da { grid-column: 1 / -1; margin: .1rem 0 0; font-size: .9rem; color: var(--muted); }
.schon-da.luecke { color: var(--beere); font-style: italic; }
.buffet-kurz p { margin: .2rem 0; font-size: .92rem; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.link-box { border-color: var(--gold); }
.doch-nicht form { margin: 0; }
[hidden] { display: none !important; }

/* ---------- Hosts' dashboard (2c) ---------- */
.wer { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .5rem; }
body.gate .wahl { color: #f3ecdc; border-color: rgba(255,255,255,.25); }
body.gate .wahl:has(input:checked) { background: rgba(255,255,255,.12); }
.sprung {
  position: sticky; top: 0; z-index: 5; display: flex; gap: .4rem; overflow-x: auto; padding: .5rem 0; margin: 0 0 .75rem;
  background: var(--bg); scrollbar-width: none;
}
.sprung a { flex: none; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--linie); color: var(--fg); text-decoration: none; font-size: .92rem; background: var(--karte); }
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .5rem 0; }
.kachel { padding: .7rem .8rem; border-radius: .8rem; background: color-mix(in srgb, var(--gold) 10%, var(--bg)); }
.kachel b { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; }
.kachel span { font-size: .85rem; color: var(--muted); }
.diagramm { width: 100%; height: auto; display: block; margin: .5rem 0; }
.diagramm .raster { stroke: var(--linie); stroke-width: 1; }
.diagramm .achse { font-size: 10px; fill: var(--muted); }
.diagramm .balken-e { fill: #2f6b4a; }
.diagramm .balken-k { fill: var(--gold); }
.diagramm .referenz { stroke: var(--beere); stroke-width: 1.5; stroke-dasharray: 5 4; }
.diagramm .referenz-text { font-size: 10px; fill: var(--beere); font-weight: 600; }
.legende { font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin: 0; }
.legende .punkt { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; margin-right: -.45rem; }
.legende .punkt.e { background: #2f6b4a; } .legende .punkt.k { background: var(--gold); }
.legende .linie { display: inline-block; width: 1.2rem; border-top: 2px dashed var(--beere); margin-right: -.45rem; }
.tabelle { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .95rem; }
.tabelle th, .tabelle td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid var(--linie); }
.tabelle th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.karte h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.mengen { padding-left: 1.1rem; margin: .3rem 0 .75rem; }
.mengen li { margin: .2rem 0; }
.faktoren summary, .familie summary { cursor: pointer; }
.ampel { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem .9rem; border-radius: .8rem; margin: .5rem 0 .75rem; }
.ampel .licht { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; margin-top: .15rem; box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 0 12px currentColor; background: currentColor; }
.ampel.gruen { background: #dcefdc; color: #1c4a24; } .ampel.gelb { background: #f6ebc8; color: #6a4f08; } .ampel.rot { background: #f7dcd8; color: #6e1a14; }
.ampel p { margin: .25rem 0 0; color: inherit; opacity: .85; }
.familien { display: grid; gap: .5rem; margin-top: .75rem; }
.familie { border: 1px solid var(--linie); border-radius: .75rem; padding: .6rem .8rem; background: var(--bg); }
.familie summary { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; list-style: none; }
.familie summary::-webkit-details-marker { display: none; }
.familie .fname { font-weight: 600; }
.familie .fmeta { font-size: .85rem; color: var(--muted); text-align: right; }
.familie.absage { opacity: .65; }
.familie.absage .fname { text-decoration: line-through; }
.familie .personen { margin: .5rem 0; padding-left: 1.1rem; }
.kommentar { font-style: italic; margin: .3rem 0; }
.abmelden { text-align: center; margin: 1rem 0; }

/* Invitation letter */
.brief {
  position: relative; background: var(--karte); border: 1px solid var(--linie); border-radius: 1rem;
  padding: 1.6rem 1.4rem 1.3rem; margin: 0 0 1.1rem; box-shadow: 0 14px 34px -20px rgba(0,0,0,.5);
  outline: 1px dashed color-mix(in srgb, var(--gold) 55%, transparent); outline-offset: -8px;
  font-size: 1.06rem; line-height: 1.65;
}
.brief::before, .brief::after {
  content: "✦"; position: absolute; top: .55rem; color: var(--gold); font-size: .9rem;
}
.brief::before { left: .8rem; } .brief::after { right: .8rem; }
.brief .anrede { font-family: var(--serif); font-style: italic; font-size: 1.3rem; margin: 0 0 .6rem; color: var(--beere); }
.brief p { margin: 0 0 .8rem; }
.brief p.erster::first-letter {
  font-family: var(--serif); font-weight: 600; float: left; font-size: 3.1rem; line-height: .9;
  padding: .2rem .4rem 0 0; color: var(--tanne-2);
}
.brief .zier { text-align: center; color: var(--gold); letter-spacing: .6rem; margin: .4rem 0 .6rem; }
.brief .unterschrift { font-family: var(--serif); font-style: italic; font-size: 1.35rem; text-align: right; margin: 0; }
@media (prefers-color-scheme: dark) { .brief p.erster::first-letter { color: var(--gold); } }
.orga-link { text-align: center; margin: .5rem 0 0; }
.orga-link a { color: var(--muted); font-size: .85rem; text-decoration: none; border-bottom: 1px dotted var(--muted); }
.zeile .menge, .zeile .schon-da { grid-column: 1 / -1; }
.punkt-ampel { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .2rem; vertical-align: -.05rem; }
.punkt-ampel.gruen { background: #3c9a52; } .punkt-ampel.gelb { background: #d9a520; } .punkt-ampel.rot { background: #c8352b; }
.buffet-tabelle td { vertical-align: top; }

/* ---------- Outfit vote (2d) ---------- */
.jetzt-abstimmen {
  display: grid; gap: .3rem; text-align: center; text-decoration: none; color: #fff; margin: 0 0 1rem;
  padding: 1.2rem 1rem; border-radius: 1rem; background: linear-gradient(135deg, var(--beere), #7d1a15);
  box-shadow: 0 12px 28px -14px var(--beere); animation: pulsieren 2.2s ease-in-out infinite;
}
.jetzt-abstimmen .gross { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; }
@keyframes pulsieren { 50% { transform: scale(1.02); } }
.wahl-liste { display: grid; gap: .4rem; }
@media (min-width: 30rem) { .wahl-liste { grid-template-columns: 1fr 1fr; } }
.kandidaten h2 { font-size: 1.1rem; }
.podest { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: .5rem; margin: .75rem 0; }
.stufe { text-align: center; border-radius: .8rem .8rem .3rem .3rem; padding: .7rem .4rem .5rem; position: relative; }
.stufe.platz1 { background: linear-gradient(180deg, #f6e3a8, #d8b06a); min-height: 11rem; }
.stufe.platz2 { background: linear-gradient(180deg, #eef0f2, #c4c9cf); min-height: 9rem; }
.stufe.platz3 { background: linear-gradient(180deg, #f2d6c0, #c98f63); min-height: 7.5rem; }
.stufe .medaille { font-size: 2rem; display: block; }
.sieger-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin: .2rem 0 0; color: #1f2a24; }
.sieger-familie { font-size: .8rem; margin: 0 0 .3rem; color: #3b3b36; }
.platz-nr { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #3b3b36; }
.siegerehrung { border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .jetzt-abstimmen { animation: none; } }
button.haupt-klein { font: inherit; font-weight: 600; padding: .75rem 1.1rem; border-radius: .7rem; border: 0; cursor: pointer; background: var(--beere); color: #fff; }
.spoiler summary, .loeschen summary { cursor: pointer; }
.rangliste { padding-left: 1.4rem; }

/* ---------- Award ceremony show (TV) ---------- */
body.show { background: radial-gradient(ellipse at 50% 20%, #24543c, #0b1811 75%); color: #fff7e6; overflow: hidden; }
body.show main { max-width: none; padding: 0; }
.buehne { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center; padding: 2vh 3vw; cursor: pointer; position: relative; }
.buehne .kugeln { width: 6vw; height: auto; left: .5vw; transform: none; opacity: .9; }
.show-kopf { text-align: center; }
.show-vorzeile { font-family: var(--serif); font-style: italic; color: #e6d6b3; font-size: clamp(1rem, 2.4vw, 2rem); margin: 0; }
.show-kopf h1 { font-size: clamp(2rem, 5vw, 4.2rem); margin: .2em 0 0; padding: 0 7vw; }
.show-schritt { display: none; text-align: center; }
.show-schritt.sichtbar { display: block; animation: auftauchen .9s cubic-bezier(.2, 1.4, .4, 1); }
.show-gross { font-family: var(--serif); font-size: clamp(2rem, 6vw, 5rem); margin: 0; }
.show-klein { font-size: clamp(1rem, 2vw, 1.6rem); color: #cfd8cc; }
.show-podest { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 2vw; align-items: end; width: min(100%, 1400px); }
.show-platz { visibility: hidden; display: block; border-radius: 1.2rem 1.2rem .4rem .4rem; padding: 2vh 1vw; color: #1f2a24; }
.show-platz.sichtbar { visibility: visible; }
.show-platz.leer { opacity: .35; }
.show-platz.platz1 { background: linear-gradient(180deg, #f6e3a8, #d8b06a); min-height: 52vh; }
.show-platz.platz2 { background: linear-gradient(180deg, #eef0f2, #b9c0c8); min-height: 42vh; }
.show-platz.platz3 { background: linear-gradient(180deg, #f2d6c0, #c98f63); min-height: 34vh; }
.show-platz .medaille { font-size: clamp(3rem, 8vw, 7rem); display: block; }
.show-platz .sieger-name { font-size: clamp(1.6rem, 4vw, 3.6rem); margin: .2em 0 0; }
.show-platz .sieger-familie { font-size: clamp(1rem, 1.8vw, 1.6rem); margin: 0 0 .5em; }
.show-platz .platz-nr { font-size: clamp(.9rem, 1.4vw, 1.3rem); }
.show-hilfe { font-size: .85rem; color: rgba(255,255,255,.4); margin: 0; }
@keyframes auftauchen { from { opacity: 0; transform: translateY(40px) scale(.85); } to { opacity: 1; transform: none; } }
.konfetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; display: none; }
.jubel .konfetti { display: block; }
.konfetti i { position: absolute; top: -5vh; width: .9vw; height: 1.6vw; min-width: 8px; min-height: 14px; animation: konfetti 4s linear infinite; }
.konfetti i:nth-child(1) { left: 45.2%; background: #d8b06a; animation-duration: 4.2s; animation-delay: -4.6s; }
.konfetti i:nth-child(2) { left: 46.6%; background: #2f6b4a; animation-duration: 4.0s; animation-delay: -2.9s; }
.konfetti i:nth-child(3) { left: 18.5%; background: #ffffff; animation-duration: 4.0s; animation-delay: -3.1s; }
.konfetti i:nth-child(4) { left: 79.3%; background: #e0736a; animation-duration: 2.8s; animation-delay: -1.5s; }
.konfetti i:nth-child(5) { left: 9.1%; background: #f6e3a8; animation-duration: 4.9s; animation-delay: -3.5s; }
.konfetti i:nth-child(6) { left: 4.2%; background: #b3261e; animation-duration: 5.4s; animation-delay: -4.8s; }
.konfetti i:nth-child(7) { left: 65.4%; background: #d8b06a; animation-duration: 4.3s; animation-delay: -0.8s; }
.konfetti i:nth-child(8) { left: 1.5%; background: #2f6b4a; animation-duration: 4.1s; animation-delay: -0.3s; }
.konfetti i:nth-child(9) { left: 19.0%; background: #ffffff; animation-duration: 3.2s; animation-delay: -0.2s; }
.konfetti i:nth-child(10) { left: 46.4%; background: #e0736a; animation-duration: 3.8s; animation-delay: -4.2s; }
.konfetti i:nth-child(11) { left: 51.9%; background: #f6e3a8; animation-duration: 4.4s; animation-delay: -2.5s; }
.konfetti i:nth-child(12) { left: 66.2%; background: #b3261e; animation-duration: 3.9s; animation-delay: -1.4s; }
.konfetti i:nth-child(13) { left: 99.8%; background: #d8b06a; animation-duration: 5.5s; animation-delay: -4.2s; }
.konfetti i:nth-child(14) { left: 70.8%; background: #2f6b4a; animation-duration: 3.4s; animation-delay: -1.1s; }
.konfetti i:nth-child(15) { left: 28.9%; background: #ffffff; animation-duration: 2.7s; animation-delay: -3.8s; }
.konfetti i:nth-child(16) { left: 40.0%; background: #e0736a; animation-duration: 5.0s; animation-delay: -1.9s; }
.konfetti i:nth-child(17) { left: 95.8%; background: #f6e3a8; animation-duration: 5.0s; animation-delay: -0.0s; }
.konfetti i:nth-child(18) { left: 21.0%; background: #b3261e; animation-duration: 5.2s; animation-delay: -2.3s; }
.konfetti i:nth-child(19) { left: 98.0%; background: #d8b06a; animation-duration: 3.7s; animation-delay: -0.4s; }
.konfetti i:nth-child(20) { left: 62.9%; background: #2f6b4a; animation-duration: 4.8s; animation-delay: -1.3s; }
.konfetti i:nth-child(21) { left: 8.7%; background: #ffffff; animation-duration: 3.5s; animation-delay: -4.8s; }
.konfetti i:nth-child(22) { left: 75.8%; background: #e0736a; animation-duration: 2.9s; animation-delay: -1.2s; }
.konfetti i:nth-child(23) { left: 10.1%; background: #f6e3a8; animation-duration: 2.7s; animation-delay: -4.0s; }
.konfetti i:nth-child(24) { left: 17.8%; background: #b3261e; animation-duration: 4.2s; animation-delay: -2.2s; }
.konfetti i:nth-child(25) { left: 19.1%; background: #d8b06a; animation-duration: 4.7s; animation-delay: -0.7s; }
.konfetti i:nth-child(26) { left: 64.4%; background: #2f6b4a; animation-duration: 2.8s; animation-delay: -2.1s; }
.konfetti i:nth-child(27) { left: 21.3%; background: #ffffff; animation-duration: 3.3s; animation-delay: -4.9s; }
.konfetti i:nth-child(28) { left: 80.3%; background: #e0736a; animation-duration: 3.4s; animation-delay: -4.4s; }
.konfetti i:nth-child(29) { left: 21.1%; background: #f6e3a8; animation-duration: 3.7s; animation-delay: -4.3s; }
.konfetti i:nth-child(30) { left: 64.2%; background: #b3261e; animation-duration: 2.8s; animation-delay: -4.9s; }
.konfetti i:nth-child(31) { left: 21.3%; background: #d8b06a; animation-duration: 3.3s; animation-delay: -3.9s; }
.konfetti i:nth-child(32) { left: 32.9%; background: #2f6b4a; animation-duration: 3.4s; animation-delay: -0.4s; }
.konfetti i:nth-child(33) { left: 9.0%; background: #ffffff; animation-duration: 4.2s; animation-delay: -1.2s; }
.konfetti i:nth-child(34) { left: 60.1%; background: #e0736a; animation-duration: 3.6s; animation-delay: -2.3s; }
.konfetti i:nth-child(35) { left: 95.9%; background: #f6e3a8; animation-duration: 4.0s; animation-delay: -2.9s; }
.konfetti i:nth-child(36) { left: 86.7%; background: #b3261e; animation-duration: 3.0s; animation-delay: -0.8s; }
.konfetti i:nth-child(37) { left: 90.8%; background: #d8b06a; animation-duration: 5.0s; animation-delay: -1.2s; }
.konfetti i:nth-child(38) { left: 19.0%; background: #2f6b4a; animation-duration: 4.7s; animation-delay: -4.7s; }
.konfetti i:nth-child(39) { left: 19.7%; background: #ffffff; animation-duration: 5.4s; animation-delay: -4.4s; }
.konfetti i:nth-child(40) { left: 60.4%; background: #e0736a; animation-duration: 3.8s; animation-delay: -0.5s; }
@keyframes konfetti { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(112vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .konfetti, .show-schritt.sichtbar { animation: none; } .konfetti i { animation: none; } }