/* Bausteine für die Entwürfe D, E und F. Grundlook aus Entwurf C: Nachtblau und Gold, Bricolage Grotesque und Inter.
   Dazu Chat (aus B) sowie Ablauf, Wochenpuls, Panorama, Lebenspaket und Regionsporträts (aus A) in derselben Palette.
   Gold steht für Automatisches aus Partnerquellen, Moosgrün für die Redaktion. Die Seiten ergänzen ihr eigenes Raster. */
:root {
  --grund: #F1EFE9;
  --grund-2: #E7E3D8;
  --kachel: #FFFFFF;
  --tinte: #121417;
  --leise: #565A61;
  --linie: #E2DED4;
  --nacht: #0E1A2B;
  --nacht-2: #172840;
  --nacht-3: #22385A;
  --nacht-linie: #2E4362;
  --nacht-text: #E9EEF6;
  --nacht-leise: #AAB6C8;
  --gold: #F4C24D;
  --gold-hell: #FCEFC8;
  --gold-tief: #7E5900;
  --moos: #2F6B4F;
  --moos-hell: #E2EDE6;
  --rot: #B42318;
  --display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 22px;
  --breite: 1320px;
  --rand: clamp(16px, 3vw, 32px);
  --schatten: 0 1px 2px rgba(14, 26, 43, 0.04), 0 10px 30px rgba(14, 26, 43, 0.07);
}

/* ===== Grundlage ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 400 1rem/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
svg { display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 10px; background: var(--tinte); color: #fff; font-weight: 600; text-decoration: none; }
.sprung:focus { top: 12px; }
.innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* ===== Kopf ===== */
.kopf { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--grund) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linie); }
.kopf .innen { display: flex; align-items: center; gap: 12px 20px; min-height: 68px; }
.marke { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; }
.marke svg { width: 38px; height: 38px; flex: none; }
.marke strong { display: block; font: 700 1.25rem/1 var(--display); letter-spacing: -0.02em; }
.marke small { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--leise); }
.nav { display: flex; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 500; font-size: 0.9375rem; color: var(--leise); text-decoration: none; white-space: nowrap; }

/* Profil als Pillen (wie C) */
.pillen { display: flex; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 999px; background: #E6E2D8; min-width: 0; }
.pille { position: relative; flex: none; }
.pille input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pille span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--leise); white-space: nowrap; transition: background 0.2s, color 0.2s; }
.pille input:checked + span { background: var(--kachel); color: var(--tinte); box-shadow: 0 2px 8px rgba(18, 20, 23, 0.12); }
.pille input:focus-visible + span { outline: 3px solid var(--tinte); outline-offset: 1px; }
.pillen.dunkel { background: rgba(233, 238, 246, 0.1); }
.pillen.dunkel .pille span { color: var(--nacht-leise); }
.pillen.dunkel .pille input:checked + span { background: var(--gold); color: var(--nacht); box-shadow: 0 4px 16px rgba(244, 194, 77, 0.3); }
.pillen.dunkel .pille input:focus-visible + span { outline-color: var(--gold); }

/* Ortsauswahl als Liste */
.ort-feld { display: inline-flex; align-items: center; gap: 10px; font-size: 0.875rem; color: var(--leise); }
.ort-feld select { min-height: 44px; max-width: 100%; padding: 0 38px 0 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--kachel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121417' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center / 11px 7px; color: var(--tinte); font: 500 0.9375rem/1 var(--sans); appearance: none; cursor: pointer; }
.ort-feld.dunkel { color: var(--nacht-leise); }
.ort-feld.dunkel select { border-color: rgba(233, 238, 246, 0.3); background-color: var(--nacht-2); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E9EEF6' stroke-width='2'/%3E%3C/svg%3E"); color: var(--nacht-text); }
.ort-feld.dunkel select:focus-visible { outline-color: var(--gold); }

/* ===== Knöpfe ===== */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border: 1.5px solid var(--nacht); border-radius: 999px; background: var(--nacht); color: #fff; font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform 0.15s, background 0.15s, box-shadow 0.15s; }
.knopf-gold { border-color: var(--gold); background: var(--gold); color: var(--nacht); }
.knopf-rand { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.knopf-klein { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1.5px solid var(--nacht); border-radius: 999px; background: var(--kachel); color: var(--nacht); font: 600 0.875rem/1 var(--sans); cursor: pointer; }
.klein-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--linie); border-radius: 999px; background: var(--kachel); color: var(--leise); font-size: 0.8125rem; font-weight: 500; cursor: pointer; }

/* ===== Kacheln ===== */
.kachel { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--kachel); }
.kachel h2 { margin: 0; font: 650 1.375rem/1.15 var(--display); letter-spacing: -0.015em; }
.kachel-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kachel-kopf > div { display: grid; gap: 8px; min-width: 0; }
.kennung { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 0.75rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--leise); }
.kennung::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kennung.ki::before { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-hell); }
.kennung.kuratiert::before { background: var(--moos); box-shadow: 0 0 0 3px var(--moos-hell); }
.klein { margin: 0; font-size: 0.875rem; color: var(--leise); }
.thema { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--t); }
.thema::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mehr { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-top: auto; align-self: flex-start; font-weight: 600; font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ===== Bühnenkarte (aus C) ===== */
.karte-buehne { background: radial-gradient(120% 70% at 50% -12%, rgba(244, 194, 77, 0.2), transparent 62%), var(--nacht); color: var(--nacht-text); border-color: transparent; overflow: hidden; }
.karte-buehne .kennung { color: var(--nacht-leise); }
.karte-buehne .kennung.ki::before { box-shadow: 0 0 0 3px rgba(244, 194, 77, 0.25), 0 0 12px rgba(244, 194, 77, 0.8); }
.karte-buehne .klein { color: var(--nacht-leise); }
.karte-bereich { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.karte { position: relative; flex: 1; min-height: 260px; aspect-ratio: 121 / 100; margin: 4px 6px 0; }
.karte > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.karte line { stroke: #2E4362; stroke-width: 0.35; stroke-dasharray: 1 1.2; }
.sterne { position: absolute; inset: -6% -4%; pointer-events: none; }
.sterne i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #DCE6F5; opacity: 0.22; animation: funkeln 6s ease-in-out var(--d) infinite; }
@keyframes funkeln { 50% { opacity: 0.7; } }
.ort-punkt { position: absolute; display: flex; align-items: center; gap: 2px; min-height: 32px; padding: 0 6px 0 0; border: 0; border-radius: 999px; background: transparent; color: var(--nacht-text); font: 600 0.8125rem/1 var(--sans); cursor: pointer; transform: translate(-16px, -16px); transition: opacity 0.3s; }
.ort-punkt.links { flex-direction: row-reverse; padding: 0 0 0 6px; transform: translate(calc(-100% + 16px), -16px); }
.ort-punkt .licht { position: relative; display: grid; place-items: center; width: 32px; height: 32px; flex: none; }
.ort-punkt .licht::before { content: ''; width: var(--g); height: var(--g); border-radius: 50%; background: var(--gold); box-shadow: 0 0 calc(var(--g) * 1.3) calc(var(--g) * 0.45) rgba(244, 194, 77, 0.5); transition: width 0.3s, height 0.3s, box-shadow 0.3s; }
.ort-punkt.hell .licht::after { content: ''; position: absolute; left: 50%; top: 50%; width: calc(var(--g) * 2.6); height: calc(var(--g) * 2.6); margin: calc(var(--g) * -1.3) 0 0 calc(var(--g) * -1.3); border: 1.5px solid rgba(244, 194, 77, 0.6); border-radius: 50%; animation: lichthof 3.4s ease-out infinite; }
@keyframes lichthof { from { transform: scale(0.45); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
.ort-punkt.still .licht::before { background: #6B7A90; box-shadow: none; }
.ort-name { padding: 4px 8px; border-radius: 999px; background: rgba(14, 26, 43, 0.74); transition: background 0.2s, color 0.2s; }
.ort-punkt[aria-pressed='true'] .ort-name { background: var(--gold); color: var(--nacht); }
.ort-punkt[aria-pressed='true'] .licht::before { outline: 2px solid #fff; outline-offset: 4px; }
.ort-punkt:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.karte.mit-treffern .ort-punkt:not(.treffer) { opacity: 0.35; }
.ort-punkt.treffer .licht::before { background: #fff; box-shadow: 0 0 0 3px var(--gold), 0 0 26px 10px rgba(244, 194, 77, 0.55); }
.ort-punkt.treffer .ort-name { background: var(--nacht-text); color: var(--nacht); }
.treffer-nr { position: absolute; left: 20px; top: -8px; display: none; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--gold); color: var(--nacht); font: 700 0.6875rem/20px var(--sans); text-align: center; white-space: nowrap; box-shadow: 0 0 0 2px var(--nacht); }
.ort-punkt.links .treffer-nr { left: auto; right: 20px; }
.ort-punkt.treffer .treffer-nr { display: block; }
.karte-treffer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0; padding: 8px 8px 8px 14px; border-radius: 14px; background: rgba(244, 194, 77, 0.14); color: var(--gold-hell); font-size: 0.875rem; font-weight: 600; }
.karte-treffer button { min-height: 36px; padding: 0 12px; border: 1px solid rgba(244, 194, 77, 0.5); border-radius: 999px; background: transparent; color: var(--gold-hell); font-weight: 600; font-size: 0.8125rem; cursor: pointer; }
.karte-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.alle-knopf { min-height: 40px; padding: 0 14px; border: 1px solid #3A4E6B; border-radius: 999px; background: transparent; color: var(--nacht-text); font-weight: 600; font-size: 0.875rem; cursor: pointer; }
.alle-knopf[aria-pressed='true'] { background: var(--nacht-text); color: var(--nacht); }
.legende { display: flex; gap: 12px; font-size: 0.75rem; color: var(--nacht-leise); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { display: inline-block; width: var(--g); height: var(--g); border-radius: 50%; background: var(--gold); }

/* ===== Listen: Als Nächstes, Neu gemeldet ===== */
.liste { list-style: none; margin: 0; padding: 0; display: grid; }
.liste > li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--linie); }
.liste > li:first-child { border-top: 0; padding-top: 2px; }
.wann { font: 700 1.0625rem/1.15 var(--display); letter-spacing: -0.01em; }
.liste strong { display: block; font-size: 0.96875rem; line-height: 1.35; }
.liste small { display: block; margin-top: 3px; font-size: 0.8125rem; color: var(--leise); }
.liste > li.trenner { display: block; padding: 14px 0 0; font: 600 0.6875rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-tief); }
.liste > li.trenner + li { border-top: 0; padding-top: 6px; }
.liste > li.leer-zeile { display: block; }
.leer-zeile p { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--grund); color: var(--leise); font-size: 0.9375rem; }
.neu .liste > li { grid-template-columns: minmax(0, 1fr) auto; }
.zeit { font-size: 0.8125rem; color: var(--leise); white-space: nowrap; }

/* Ticker (aus A) */
.ticker-liste { list-style: none; margin: 0; padding: 0; }
.ticker-liste li { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--linie); }
.ticker-liste li:first-child { border-top: 0; padding-top: 4px; }
.ticker-zeit { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.8125rem; color: var(--leise); }
.ticker-liste strong { font: 650 1.0625rem/1.3 var(--display); letter-spacing: -0.01em; }
.ticker-quelle { font-size: 0.75rem; color: var(--leise); }

/* ===== Lebenspaket ===== */
.paket-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.paket-liste li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 2px 12px; }
.paket-liste .rubrik { padding-top: 3px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-tief); }
.paket-liste strong { font-size: 0.9375rem; line-height: 1.35; }
.paket-liste small { grid-column: 2; font-size: 0.8125rem; color: var(--leise); }
.paket-liste small.nichts { grid-column: auto; padding-top: 2px; }
.paket-punkte { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 0.9375rem; }
.paket-punkte li::marker { color: var(--moos); }

.paket-gross { padding: clamp(28px, 4vw, 52px); border-radius: 28px; background: radial-gradient(80% 120% at 100% 0%, rgba(244, 194, 77, 0.18), transparent 60%), var(--nacht); color: var(--nacht-text); }
.paket-gross .kennung { color: var(--nacht-leise); }
.paket-gross h2 { margin: 6px 0 0; font: 700 clamp(1.9rem, 3.4vw, 3rem)/1.05 var(--display); letter-spacing: -0.03em; }
.paket-text { max-width: 62ch; margin: 12px 0 0; color: var(--nacht-leise); }
.spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
.spalte { display: grid; align-content: start; gap: 14px; padding-top: 16px; border-top: 2px solid var(--gold); }
.spalte h3 { margin: 0; font: 600 0.8125rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.eintrag { display: grid; gap: 4px; }
.eintrag strong { font: 600 1.0625rem/1.3 var(--display); }
.eintrag span { font-size: 0.875rem; color: var(--nacht-leise); }
.spalte .nichts { margin: 0; font-size: 0.9375rem; color: #8392A8; }
.paket-gross.paket-kuratiert { background: radial-gradient(80% 120% at 100% 0%, rgba(255, 255, 255, 0.1), transparent 60%), var(--moos); }
.paket-gross.paket-kuratiert .kennung, .paket-gross.paket-kuratiert .paket-text { color: #CFE3D7; }
.paket-gross.paket-kuratiert .kennung.kuratiert::before { background: #CFE3D7; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); }
.einstieg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 30px; }
.einstieg h3 { margin: 0 0 10px; font: 650 1.375rem/1.2 var(--display); }
.einstieg ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; color: #E4EFE8; }

/* ===== Porträt und Gut zu wissen (kuratiert) ===== */
.portraet { padding-top: 0; overflow: hidden; }
.portraet-motiv { height: 170px; margin: 0 -22px 4px; color: var(--moos); background: var(--moos-hell); }
.portraet-motiv svg, .region-motiv svg, .redaktion-motiv svg, .panorama svg { width: 100%; height: 100%; }
.portraet .zeile { margin: 0; font-weight: 600; color: var(--moos); }
.portraet p.text { margin: 0; color: var(--leise); }
.wissen { background: var(--moos); color: #fff; border-color: transparent; overflow: hidden; }
.wissen > * { position: relative; }
.wissen > .wissen-motiv { position: absolute; left: 0; right: 0; bottom: 0; height: min(52%, 190px); color: #CFE3D7; opacity: 0.2; pointer-events: none; }
.wissen-motiv svg { width: 100%; height: 100%; }
.wissen .kennung { color: #CFE3D7; }
.wissen .kennung.kuratiert::before { background: #CFE3D7; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); }
.wissen .tipp { margin: 0; font: 600 1.25rem/1.3 var(--display); letter-spacing: -0.01em; }
.wissen .klein { margin-top: auto; color: #CFE3D7; }

/* ===== Wochenkalender (aus C) ===== */
.woche-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.woche-kopf > div:first-child { display: grid; gap: 8px; }
.woche-steuerung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.woche-filter { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.875rem; color: var(--leise); }
.filter-weg { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--linie); border-radius: 50%; background: var(--kachel); color: var(--tinte); font-size: 1rem; line-height: 1; cursor: pointer; }
.umschalter { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--grund-2); }
.umschalter button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--leise); font-weight: 600; font-size: 0.8125rem; cursor: pointer; }
.umschalter button[aria-pressed='true'] { background: var(--kachel); color: var(--tinte); box-shadow: 0 2px 6px rgba(18, 20, 23, 0.12); }
.tage { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 2px; }
.tag { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 12px; border-radius: 16px; background: var(--grund); }
.tag.heute { background: var(--gold-hell); }
.tag.frei { background: transparent; border: 1px dashed var(--linie); }
.tag h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0; font: 700 1rem/1.1 var(--display); }
.tag h3 span { font: 500 0.8125rem/1 var(--sans); color: var(--leise); }
.tag ul { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.termin-chip { display: grid; gap: 2px; padding: 8px 10px; border-left: 3px solid var(--t); border-radius: 8px; background: var(--kachel); box-shadow: 0 1px 2px rgba(14, 26, 43, 0.05); }
.termin-chip time { font-size: 0.75rem; font-weight: 700; color: var(--leise); }
.termin-chip span { font-size: 0.8125rem; line-height: 1.3; font-weight: 500; overflow-wrap: anywhere; }
.tag .nichts { margin: 0; font-size: 0.8125rem; color: var(--leise); }
.woche-leer { display: grid; gap: 14px; padding: 22px 24px; border-radius: 16px; background: var(--grund); }
.woche-leer p { margin: 0; color: var(--leise); }
.woche-leer strong { color: var(--tinte); }
.leer-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Chat (aus B) ===== */
.chat { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.chat-verlauf { position: relative; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.chat[data-zustand='leer'] .chat-verlauf { display: none; }
.chat:not([data-art='buehne'])[data-zustand='dialog'] .chat-start { display: none; }
.verlauf-kopf { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px 8px; background: inherit; }
.verlauf-kopf h2 { margin: 0; font: 600 0.75rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--leise); }
.nachrichten { list-style: none; display: grid; align-content: start; gap: 20px; margin: 0; padding: 6px 2px 14px; }
.nachricht { display: grid; gap: 10px; min-width: 0; }
.nutzer { justify-items: end; }
.nutzer p { max-width: 85%; margin: 0; padding: 10px 16px; border-radius: 20px 20px 6px 20px; background: var(--nacht); color: var(--nacht-text); }
.antwort, .redaktion { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--nacht); color: var(--nacht-text); }
.avatar svg { width: 22px; height: 22px; }
.antwort-inhalt { display: grid; gap: 12px; min-width: 0; }
.pruefschritte { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; }
.pruefschritte li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--grund); font-size: 0.75rem; color: var(--leise); }
.pruefschritte li::before { content: '✓'; color: var(--moos); font-weight: 700; }
.pruefschritte li.laeuft::before { content: ''; width: 10px; height: 10px; border: 2px solid var(--gold); border-right-color: transparent; border-radius: 50%; animation: dreh 0.8s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.antwort-text { margin: 0; font-size: 1rem; }
.antwort-text .cursor { display: inline-block; width: 8px; height: 1.1em; margin-left: 2px; vertical-align: text-bottom; background: var(--tinte); animation: blinken 1s steps(2) infinite; }
@keyframes blinken { 50% { opacity: 0; } }
.treffer { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.treffer-karte { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--linie); border-left: 3px solid var(--t); border-radius: 14px; background: var(--kachel); }
.treffer-karte .nr { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--nacht); font-size: 0.6875rem; font-weight: 700; }
.treffer-meta { display: flex; gap: 8px; margin: 0; padding-right: 28px; font-size: 0.75rem; color: var(--leise); }
.treffer-meta b { color: var(--t); font-weight: 600; }
.treffer-karte h3 { margin: 0; font: 650 1rem/1.3 var(--sans); }
.treffer-zeit { margin: 0; font-size: 0.8125rem; font-weight: 600; }
.treffer-kurz { margin: 0; font-size: 0.875rem; color: var(--leise); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.original { justify-self: start; display: inline-flex; align-items: center; min-height: 28px; font-size: 0.8125rem; font-weight: 600; text-underline-offset: 3px; }
.weitere-titel { margin: 2px 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--leise); }
.quellen { padding: 10px 14px; border-radius: 12px; background: var(--grund); font-size: 0.75rem; color: var(--leise); }
.quellen h4 { margin: 0 0 4px; font-size: 0.75rem; color: var(--tinte); }
.quellen ol { display: grid; gap: 2px; margin: 0; padding-left: 1.3em; }
.antwort-aktionen, .vorschlaege-klein { display: flex; flex-wrap: wrap; gap: 6px; }
.redaktion-zeichen { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--moos-hell); color: var(--moos); font-weight: 700; font-size: 0.8125rem; }
.redaktion-karte { min-width: 0; padding: 14px 18px 16px; border: 1px solid #C7DCCF; border-left: 4px solid var(--moos); border-radius: 14px; background: var(--kachel); overflow: hidden; }
.redaktion-karte .kennung { margin-bottom: 6px; }
.redaktion-karte h3 { margin: 0 0 6px; font: 650 1.0625rem/1.3 var(--sans); }
.redaktion-karte p { margin: 0; font-size: 0.9375rem; }
.redaktion-karte ul { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 1.2em; font-size: 0.9375rem; }
.redaktion-motiv { height: 84px; margin: -14px -18px 12px; color: var(--moos); background: var(--moos-hell); }

.chat-start { display: grid; gap: 10px; align-content: start; }
.chat-intro { margin: 0; color: var(--leise); font-size: 0.9375rem; }
.chat-versprechen { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; padding: 0; }
.chat-versprechen li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--moos-hell); color: var(--moos); font-size: 0.75rem; font-weight: 600; }
.chat-versprechen li::before { content: '✓'; font-weight: 700; }
.vorschlaege-titel { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; font: 600 0.75rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--leise); }
.vorschlaege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vorschlag { display: grid; gap: 3px; align-content: start; min-height: 64px; padding: 11px 14px; border: 1px solid var(--linie); border-radius: 14px; background: var(--kachel); text-align: left; cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.vorschlag strong { font-size: 0.9375rem; line-height: 1.3; }
.vorschlag span { font-size: 0.75rem; color: var(--leise); }
.vorschlag span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--gold); }
.vorschlag span.aus-redaktion::before { background: var(--moos); }
.gerade-teil { display: grid; gap: 10px; margin-top: 6px; }
.gerade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.gerade-karte { display: grid; gap: 4px; align-content: start; padding: 11px 13px; border: 1px solid var(--linie); border-left: 3px solid var(--t); border-radius: 12px; background: var(--grund); text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.gerade-karte .treffer-meta { padding-right: 0; }
.gerade-karte strong { font-size: 0.875rem; line-height: 1.3; }
.gerade-karte .zeit { font-size: 0.75rem; white-space: normal; }

.chat-eingabe { display: grid; gap: 6px; }
.eingabe-box { display: flex; align-items: flex-end; gap: 10px; padding: 7px 7px 7px 18px; border: 1px solid #D6D3CA; border-radius: 26px; background: var(--kachel); box-shadow: 0 8px 28px rgba(14, 26, 43, 0.08); transition: box-shadow 0.15s, border-color 0.15s; }
.eingabe-box:focus-within { border-color: var(--nacht); box-shadow: 0 0 0 3px rgba(244, 194, 77, 0.55), 0 8px 28px rgba(14, 26, 43, 0.08); }
.chat-eingabe textarea { flex: 1; min-width: 0; min-height: 26px; max-height: 160px; margin: 9px 0; padding: 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--tinte); font: 400 1rem/1.5 var(--sans); }
.chat-eingabe textarea::placeholder { color: #737A83; }
.senden { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--nacht); color: #fff; cursor: pointer; transition: background 0.15s; }
.senden:disabled { background: #BFC4CB; cursor: not-allowed; }
.senden svg { width: 20px; height: 20px; }
.eingabe-hinweis { margin: 0; font-size: 0.75rem; color: var(--leise); text-align: center; }

/* ===== So entsteht diese Seite und Wochenpuls (aus A) ===== */
.schritte { list-style: none; counter-reset: schritt; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.schritte li { counter-increment: schritt; position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 18px 20px; border: 1px solid var(--linie); border-radius: 18px; background: var(--kachel); }
.schritte li::before { content: counter(schritt, decimal-leading-zero); font: 700 1.75rem/1 var(--display); letter-spacing: -0.02em; color: var(--gold-tief); }
.schritte li:not(:last-child)::after { content: '→'; position: absolute; top: 22px; right: -15px; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--nacht); font: 700 0.75rem/1 var(--sans); }
.schritte strong { font: 650 1.0625rem/1.25 var(--display); }
.schritte span { font-size: 0.875rem; color: var(--leise); }
.dunkel .schritte li { border-color: var(--nacht-linie); background: var(--nacht-2); }
.dunkel .schritte li::before { color: var(--gold); }
.dunkel .schritte span { color: var(--nacht-leise); }

.puls-form { display: grid; gap: 8px; min-width: 0; }
.puls-form label { font-weight: 600; }
.puls-zeile { display: flex; gap: 8px; min-width: 0; }
.puls-zeile input { flex: 1; min-width: 0; min-height: 50px; padding: 0 18px; border: 1.5px solid var(--linie); border-radius: 999px; background: #fff; color: var(--tinte); font: 400 1rem/1 var(--sans); }
.puls-zeile input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--nacht); }
.puls-zeile input[aria-invalid='true'] { border-color: var(--rot); }
.puls-meldung { min-height: 1.45em; margin: 0; font-size: 0.8125rem; color: var(--leise); }
.puls-meldung[data-art='fehler'] { color: var(--rot); font-weight: 600; }
.puls-meldung[data-art='ok'] { color: var(--moos); font-weight: 600; }
.dunkel .puls-form label { color: var(--nacht-text); }
.dunkel .puls-zeile input { border-color: transparent; }
.dunkel .puls-meldung { color: var(--nacht-leise); }
.dunkel .puls-meldung[data-art='fehler'] { color: #FFB4A8; }
.dunkel .puls-meldung[data-art='ok'] { color: #A7E0BF; }

/* ===== Panorama und Profilauswahl (aus A, in Nachtblau) ===== */
.panorama { height: clamp(110px, 16vw, 230px); color: var(--nacht); }
.profilband { background: var(--nacht); color: var(--nacht-text); }
.profilband-raster { display: grid; grid-template-columns: minmax(240px, 0.9fr) 2fr; gap: 20px 48px; align-items: center; padding-block: 28px 40px; }
.profilband h2 { margin: 0; font: 700 clamp(1.5rem, 2.4vw, 2rem)/1.12 var(--display); letter-spacing: -0.025em; }
.profilband-text p { margin: 8px 0 0; font-size: 0.9375rem; color: var(--nacht-leise); }
.profilband-wahl { display: grid; gap: 14px; }
.optionen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.option { position: relative; }
.option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.option span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid rgba(233, 238, 246, 0.35); border-radius: 999px; font-weight: 500; font-size: 0.9375rem; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.option input:checked + span { border-color: var(--gold); background: var(--gold); color: var(--nacht); font-weight: 600; }
.option input:focus-visible + span { outline: 3px solid var(--nacht-text); outline-offset: 3px; }

/* ===== Regionen-Schiene (aus A) ===== */
.schiene { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, calc((100% - 96px) / 4.4)); gap: 24px; margin: -4px; padding: 4px 4px 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.region { scroll-snap-align: start; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--linie); border-radius: 20px; background: var(--kachel); }
.region-motiv { height: 150px; color: var(--moos); background: var(--moos-hell); }
.region-text { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.region h3 { margin: 0; font: 650 1.3125rem/1.2 var(--display); letter-spacing: -0.01em; }
.region .zeile { margin: 0; font-weight: 600; font-size: 0.875rem; color: var(--moos); }
.region p.text { margin: 0; font-size: 0.9375rem; color: var(--leise); }
.region .nah { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--gold-hell); color: var(--gold-tief); font-size: 0.75rem; font-weight: 700; }
.schiene-knoepfe { display: flex; gap: 8px; }
.schiene-knoepfe button { width: 48px; height: 48px; border: 1.5px solid var(--tinte); border-radius: 50%; background: transparent; font: 600 1.25rem/1 var(--sans); cursor: pointer; }

/* ===== Fuß ===== */
.fuss { padding: 56px 0 32px; background: var(--nacht); color: var(--nacht-leise); font-size: 0.9375rem; }
.fuss-raster { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; }
.fuss h2 { margin: 0 0 10px; font: 600 0.75rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.fuss p { margin: 0 0 12px; }
.fuss a { display: inline-flex; align-items: center; min-height: 32px; color: var(--nacht-text); font-weight: 600; }
.fuss :focus-visible { outline-color: var(--gold); }
.fuss-marke { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--nacht-text); }
.fuss-marke svg { width: 34px; height: 34px; }
.fuss-marke strong { font: 700 1.25rem/1 var(--display); letter-spacing: -0.02em; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--nacht-linie); font-size: 0.8125rem; }

/* ===== Zeiger, Bewegung, schmale Bildschirme ===== */
@media (hover: hover) {
  .nav a:hover { background: var(--grund-2); color: var(--tinte); }
  .pille span:hover { color: var(--tinte); }
  .pillen.dunkel .pille span:hover { color: var(--nacht-text); }
  .ort-punkt:hover .ort-name { background: var(--nacht-3); }
  .ort-punkt[aria-pressed='true']:hover .ort-name { background: #FFD772; }
  .ort-punkt.treffer:hover .ort-name { background: #fff; }
  .ort-punkt:hover .licht::before { box-shadow: 0 0 0 3px rgba(244, 194, 77, 0.35), 0 0 calc(var(--g) * 1.6) calc(var(--g) * 0.6) rgba(244, 194, 77, 0.6); }
  .alle-knopf:hover { border-color: var(--nacht-text); }
  .karte-treffer button:hover { background: rgba(244, 194, 77, 0.2); }
  .knopf:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(14, 26, 43, 0.18); }
  .knopf-klein:hover { background: var(--nacht); color: #fff; }
  .klein-knopf:hover { border-color: var(--tinte); color: var(--tinte); }
  .mehr:hover, .original:hover { text-decoration-thickness: 2px; }
  .vorschlag:hover { border-color: var(--nacht); transform: translateY(-1px); box-shadow: var(--schatten); }
  .gerade-karte:hover { background: var(--kachel); border-color: var(--nacht); border-left-color: var(--t); }
  .senden:not(:disabled):hover { background: var(--nacht-3); }
  .umschalter button:not([aria-pressed='true']):hover { color: var(--tinte); }
  .filter-weg:hover { border-color: var(--tinte); }
  .option span:hover { border-color: var(--nacht-text); }
  .schiene-knoepfe button:hover { background: var(--tinte); color: #fff; }
  .termin-chip, .region { transition: transform 0.2s, box-shadow 0.2s; }
  .termin-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(14, 26, 43, 0.1); }
  .region:hover { transform: translateY(-2px); box-shadow: var(--schatten); }
}

@media (max-width: 1100px) {
  .tage { grid-template-columns: repeat(7, minmax(160px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px; }
  .tag { scroll-snap-align: start; }
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .schritte li:nth-child(3)::after { display: none; }
  .spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-raster { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .profilband-raster { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tage { grid-template-columns: minmax(0, 1fr); overflow: visible; padding-bottom: 2px; }
  .tag { grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 6px 12px; }
  .tag.frei { padding-block: 8px; }
  .tag h3 { flex-direction: column; font-size: 0.9375rem; }
  .vorschlaege { grid-template-columns: minmax(0, 1fr); }
  .vorschlag { min-height: 0; }
  .liste > li { grid-template-columns: 76px minmax(0, 1fr); }
  .paket-liste li { grid-template-columns: minmax(0, 1fr); }
  .paket-liste small { grid-column: 1; }
  .schritte { grid-template-columns: minmax(0, 1fr); }
  .schritte li::after { display: none !important; }
  .spalten, .einstieg { grid-template-columns: minmax(0, 1fr); }
  .puls-zeile { flex-direction: column; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); }
  .schiene { grid-auto-columns: 82%; }
  .nutzer p { max-width: 92%; }
  .antwort, .redaktion { grid-template-columns: minmax(0, 1fr); }
  .avatar, .redaktion-zeichen { display: none; }
}
@media (max-width: 480px) {
  .ort-name { padding: 3px 6px; font-size: 0.75rem; }
  .legende { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}