/* Date – Handy zuerst. Farben angelehnt an das edulin-/Hub-Kopfband. */
[hidden] { display: none !important; }
/* Farben: Designsprache „Tinte & Apricot“ (docs/konzept/bausteine-designsprache.md). Textpaare ≥ 4,5 : 1, Rahmen ≥ 3 : 1 – geprüft mit tests/kontraste.php */
:root {
  --akzent: #3D35A0; --akzent-dunkel: #2E2780; --akzent-t: #ECEBFA; --akzent-text: #FFFFFF;
  --phase1: #5B52C9; --phase2: #E07438; --phase3: #2E9C77; --phase4: #B45C9C;
  --text: #22212B; --still: #54525E; --grund: #F7F5F1; --flaeche: #FFFFFF; --flaeche-2: #EFECE6;
  --rand: #E3DED6; --rand-stark: #8E887E; --thema: #A4461B;
  --ja: #1E6E37; --ja-t: #E4F3E8; --vl: #7F5200; --vl-t: #FFF4D6; --nein: #A8231B; --nein-t: #FBE9E7;
  --fehler: #A8231B; --fehler-t: #FBE9E7; --ok: #1E6E37; --ok-t: #E4F3E8;
  --radius: 12px; --schatten: 0 1px 2px rgba(34,33,43,.06), 0 2px 8px rgba(34,33,43,.04);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --akzent: #ABA5F7; --akzent-dunkel: #C6C2FA; --akzent-t: #2A2747; --akzent-text: #15141B;
    --phase1: #ABA5F7; --phase2: #F4A57A; --phase3: #74D2AC; --phase4: #E5A6D6;
    --text: #EEEDF3; --still: #BAB8C6; --grund: #15141B; --flaeche: #1F1E27; --flaeche-2: #2A2934;
    --rand: #34323F; --rand-stark: #6E6B7C; --thema: #F4A57A;
    --ja: #86D79D; --ja-t: #17301F; --vl: #F0C45E; --vl-t: #3A2E12; --nein: #FF9D90; --nein-t: #3D1E1B;
    --fehler: #FF9D90; --fehler-t: #3D1E1B; --ok: #86D79D; --ok-t: #17301F;
    --schatten: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--akzent-dunkel); text-underline-offset: 2px; }
h1, h2, h3 { line-height: 1.25; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; margin-top: 1.4em; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
code { font-size: .9em; background: var(--akzent-t); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.still { color: var(--still); } .klein { font-size: .875rem; }
.versteckt { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf */
.band { height: 6px; background: linear-gradient(90deg, var(--phase1) 0 25%, var(--phase2) 25% 50%, var(--phase3) 50% 75%, var(--phase4) 75% 100%); }
.kopf { background: var(--flaeche); border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top); }
.kopf-innen { max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 16px; }
.marke { font-weight: 800; font-size: 1.25rem; color: var(--text); text-decoration: none; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.marke img { width: 28px; height: 28px; }
.kopf nav { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.kopf nav a, .kopf nav button { color: var(--text); text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: .95rem; background: none; border: 0; font: inherit; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.kopf nav a:hover, .kopf nav button:hover { background: var(--akzent-t); }
.zahl { background: var(--fehler); color: var(--flaeche); border-radius: 10px; font-size: .75rem; padding: 0 6px; min-width: 18px; text-align: center; font-weight: 700; }
@media (max-width: 560px) { .nur-breit { display: none; } }

main { max-width: 980px; margin: 0 auto; padding: 16px 16px 48px; }
.brot { font-size: .875rem; margin-bottom: 8px; color: var(--still); }
.brot a { color: var(--still); }

/* Karten und Raster */
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--schatten); }
.karte > :last-child { margin-bottom: 0; }
.raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { padding: 12px 0; border-top: 1px solid var(--rand); display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.liste > li:first-child { border-top: 0; padding-top: 0; }
.liste .haupt { flex: 1 1 200px; min-width: 0; }
.kachel { display: block; text-decoration: none; color: inherit; }
.kachel:hover { border-color: var(--akzent); }
.kachel h3 { margin-bottom: 4px; }
.reihe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zwischen { justify-content: space-between; }

/* Etiketten */
.marke-klein { display: inline-block; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--akzent-t); color: var(--akzent-dunkel); vertical-align: 2px; }
.marke-klein.gruen { background: var(--ok-t); color: var(--ok); }
.marke-klein.gelb { background: var(--vl-t); color: var(--vl); }
.marke-klein.rot { background: var(--nein-t); color: var(--nein); }
.marke-klein.grau { background: var(--flaeche-2); color: var(--still); }

/* Reiter im Projekt */
.reiter { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 12px -16px 16px; padding: 0 16px; position: sticky; top: 61px; background: var(--grund); z-index: 5; }
.reiter::-webkit-scrollbar { display: none; }
.reiter a { white-space: nowrap; padding: 10px 14px; border-radius: 20px; text-decoration: none; color: var(--text); background: var(--flaeche); border: 1px solid var(--rand-stark); font-size: .95rem; min-height: 44px; display: flex; align-items: center; }
.reiter a:hover { border-color: var(--akzent); }
section[id] { scroll-margin-top: 130px; }

/* Formulare */
label { display: block; font-weight: 600; margin: 12px 0 4px; }
label.zeile { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 10px 0; cursor: pointer; }
label.zeile input { margin-top: 3px; }
input[type=text], input[type=password], input[type=email], input[type=date], input[type=time], input[type=month], input[type=number], input[type=search], select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--rand-stark); border-radius: 10px; padding: 10px 12px; min-height: 44px;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--akzent) 45%, transparent); outline-offset: 1px; border-color: var(--akzent); }
textarea { min-height: 96px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--akzent); flex: none; }
.hilfe { font-size: .85rem; color: var(--still); margin-top: 4px; }
.felder { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
fieldset { border: 1px solid var(--rand); border-radius: var(--radius); padding: 4px 14px 14px; margin: 16px 0; }
legend { font-weight: 700; padding: 0 6px; }
details { margin: 12px 0; }
details > summary { cursor: pointer; font-weight: 600; padding: 10px 0; min-height: 44px; list-style-position: outside; }
details.karte > summary { margin: -6px 0; }
details[open].karte > summary { margin-bottom: 8px; }

.knopf, button.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; text-decoration: none;
  background: var(--akzent); color: var(--akzent-text); border: 1px solid var(--akzent); border-radius: 10px; padding: 10px 16px; min-height: 44px; cursor: pointer;
}
.knopf:hover { filter: brightness(1.07); }
.knopf.zweit { background: var(--flaeche); color: var(--akzent-dunkel); border-color: var(--rand-stark); }
.knopf.gefahr { background: var(--flaeche); color: var(--fehler); border-color: var(--fehler); }
.knopf.klein { min-height: 36px; padding: 6px 10px; font-size: .875rem; }
.knopf.breit { width: 100%; }
.knopf-reihe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
form.inline { display: inline; }
.link-knopf { background: none; border: 0; color: var(--akzent-dunkel); text-decoration: underline; font: inherit; cursor: pointer; padding: 4px; min-height: 36px; }
.link-knopf.gefahr { color: var(--fehler); }

/* Meldungen */
.meldung { padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; background: var(--ok-t); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.meldung.fehler { background: var(--fehler-t); color: var(--fehler); border-color: color-mix(in srgb, var(--fehler) 30%, transparent); }
.meldung.info { background: var(--akzent-t); color: var(--akzent-dunkel); border-color: color-mix(in srgb, var(--akzent) 30%, transparent); }

/* Abstimmung */
.optionen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.option { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 12px; }
.option.beste { border-color: var(--ja); box-shadow: inset 4px 0 0 var(--ja); }
.option.final { border-color: var(--akzent); box-shadow: inset 4px 0 0 var(--akzent); }
.option.voll { opacity: .65; }
.option-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.option-titel { font-weight: 700; }
.stand { font-size: .875rem; color: var(--still); white-space: nowrap; }
.wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.wahl.zwei { grid-template-columns: repeat(2, 1fr); }
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl label { margin: 0; font-weight: 600; text-align: center; border: 1px solid var(--rand); border-radius: 10px; padding: 10px 4px; min-height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--grund); }
.wahl input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--akzent) 45%, transparent); }
.wahl input[value=y]:checked + label { background: var(--ja-t); color: var(--ja); border-color: var(--ja); }
.wahl input[value=m]:checked + label { background: var(--vl-t); color: var(--vl); border-color: var(--vl); }
.wahl input[value=n]:checked + label { background: var(--nein-t); color: var(--nein); border-color: var(--nein); }
.wahl input:disabled + label { opacity: .45; cursor: not-allowed; }
.balken { height: 8px; background: var(--grund); border-radius: 4px; overflow: hidden; display: flex; margin-top: 8px; }
.balken span { display: block; height: 100%; width: 0; }
.balken .b-ja { background: var(--ja); } .balken .b-vl { background: var(--vl); }
.namen { font-size: .875rem; margin-top: 6px; color: var(--still); }
.namen b { color: var(--text); font-weight: 600; }
.schnell { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

/* Ergebnistabelle (breite Bildschirme, scrollbar) */
.tabelle-huelle { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); }
table.tabelle { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tabelle th, .tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--rand); text-align: left; vertical-align: top; }
.tabelle thead th { background: var(--grund); position: sticky; top: 0; font-weight: 700; }
.tabelle th:first-child { position: sticky; left: 0; background: var(--flaeche); z-index: 1; }
.tabelle thead th:first-child { background: var(--grund); z-index: 2; }
.zelle-y { background: var(--ja-t); color: var(--ja); text-align: center !important; font-weight: 700; }
.zelle-m { background: var(--vl-t); color: var(--vl); text-align: center !important; font-weight: 700; }
.zelle-n { background: var(--nein-t); color: var(--nein); text-align: center !important; }
.zelle-leer { text-align: center !important; color: var(--still); }

/* Teilen-Box mit QR */
.teilen { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.qr { width: 132px; height: 132px; background: #fff; padding: 6px; border-radius: 8px; border: 1px solid var(--rand); flex: none; }
.qr svg { width: 100%; height: 100%; display: block; }
.teilen .feld { flex: 1 1 220px; min-width: 0; }

/* Zeitfenster-Auswahl bei Buchungen */
.tag-gruppe { margin-bottom: 14px; }
.tag-gruppe h3 { font-size: .95rem; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label { margin: 0; font-weight: 600; border: 1px solid var(--rand); background: var(--flaeche); border-radius: 20px; padding: 8px 14px; min-height: 40px; cursor: pointer; display: inline-flex; align-items: center; }
.chips input:checked + label { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.chips input:focus-visible + label { outline: 3px solid color-mix(in srgb, var(--akzent) 45%, transparent); }

/* Editor-Zeilen (Termine, Sitzungen, Fragen, Zeitfenster) */
.zeilen { display: grid; gap: 8px; }
.ed-zeile { display: grid; gap: 8px; grid-template-columns: 1fr; background: var(--grund); border-radius: 10px; padding: 10px; position: relative; }
.ed-zeile .weg { position: absolute; top: 4px; right: 4px; }
@media (min-width: 640px) {
  .ed-zeile.termin { grid-template-columns: 180px 1fr 44px; align-items: center; }
  .ed-zeile.termin .weg { position: static; }
  .ed-zeile.fenster { grid-template-columns: 1fr 1fr 1fr 44px; align-items: center; }
  .ed-zeile.fenster .weg { position: static; }
  .ed-zeile.sitzung { grid-template-columns: 2fr 1.3fr 1fr 1fr 1.3fr .8fr 44px; align-items: end; }
  .ed-zeile.sitzung .weg { position: static; }
  .ed-zeile.frage { grid-template-columns: 1fr auto 44px; align-items: center; }
  .ed-zeile.frage .weg { position: static; }
}
.ed-zeile label { margin: 0 0 2px; font-size: .8rem; font-weight: 600; color: var(--still); }
.weg { background: none; border: 0; color: var(--fehler); font-size: 1.3rem; line-height: 1; width: 44px; height: 44px; cursor: pointer; border-radius: 8px; }
.weg:hover { background: var(--fehler-t); }

/* Zugangszettel */
.zettel-raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.zettel { background: #fff; color: #222; border: 2px dashed #9aa; border-radius: 12px; padding: 14px; display: flex; gap: 12px; align-items: center; break-inside: avoid; page-break-inside: avoid; }
.zettel .qr { width: 110px; height: 110px; border: 0; padding: 0; }
.zettel dl { margin: 0; font-size: .9rem; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; }
.zettel dt { color: #666; } .zettel dd { margin: 0; font-weight: 700; font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
.zettel .z-name { font-weight: 800; font-size: 1.05rem; margin-bottom: 4px; }
.zettel .z-adresse { font-size: .75rem; color: #555; margin-top: 4px; }

/* Termine */
.termin { display: flex; gap: 12px; }
.datum-block { flex: none; width: 56px; text-align: center; background: var(--akzent-t); color: var(--akzent-dunkel); border-radius: 10px; padding: 6px 0; line-height: 1.15; }
.datum-block b { display: block; font-size: 1.35rem; }
.datum-block span { font-size: .75rem; text-transform: uppercase; font-weight: 700; }
.vergangen { opacity: .6; }
.angeheftet { border-left: 4px solid var(--phase2); }

.fuss { text-align: center; font-size: .8rem; color: var(--still); padding: 24px 16px 40px; }
.leer { color: var(--still); font-style: italic; }

/* Druck */
@media print {
  .kopf, .band, .reiter, .knopf, .knopf-reihe, button, .nicht-drucken, details:not([open]), .fuss, form { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: none; padding: 0; }
  .karte, .option { box-shadow: none; border-color: #bbb; }
  .zettel { border-color: #888; }
  .zettel-raster { grid-template-columns: 1fr 1fr; }
  .tabelle-huelle { overflow: visible; }
  .tabelle thead { display: table-header-group; }
  a { color: #000; text-decoration: none; }
}
.gross { font-size: 1.8rem; color: var(--akzent-dunkel); }
.ohne-abstand { margin: 0; }
@media (min-width: 561px) { .nicht-breit { display: none; } }
hr { border: 0; border-top: 1px solid var(--rand); margin: 16px 0; }
.datum-block { align-self: flex-start; }
.termin .haupt { flex: 1; min-width: 0; }

.nachrichten li.erledigt .haupt::after { content: " ✓ verschickt"; color: var(--ok); font-weight: 700; font-size: .875rem; }
.wahl label, .chips label { border-color: var(--rand-stark); }

/* Veranstaltung: Phasenleiste, Countdown, „Jetzt dran“, Cockpit (Stufe 1) */
.phasenleiste { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; counter-reset: none; }
.phasenleiste li { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--still); padding-top: 8px; border-top: 5px solid var(--flaeche-2); min-width: 0; }
.phasenleiste li.ph1 { --pf: var(--phase1); } .phasenleiste li.ph2 { --pf: var(--phase2); } .phasenleiste li.ph3 { --pf: var(--phase3); } .phasenleiste li.ph4 { --pf: var(--phase4); }
.phasenleiste li.erledigt { border-top-color: var(--pf); }
.phasenleiste li.aktuell { border-top-color: var(--pf); color: var(--text); font-weight: 700; }
.phasenleiste .ph-nr { font-family: ui-monospace, Menlo, monospace; font-size: .75rem; }
.phasenleiste .ph-name { overflow-wrap: anywhere; }
.kopf-fakten { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 10px; color: var(--still); }
.kopf-fakten > span { min-width: 0; }
.kartenlinks a { color: var(--akzent-dunkel); }
.jetzt { border-radius: 12px; padding: 12px 14px; margin: 10px 0 14px; background: var(--flaeche); border: 1px solid var(--rand); border-left: 6px solid var(--pf, var(--akzent)); }
.jetzt.ph1 { --pf: var(--phase1); } .jetzt.ph2 { --pf: var(--phase2); } .jetzt.ph3 { --pf: var(--phase3); } .jetzt.ph4 { --pf: var(--phase4); }
.countdown { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.cd-zahl { font-size: 1.6rem; font-weight: 800; color: var(--akzent-dunkel); font-variant-numeric: tabular-nums; }
.teilen-text { white-space: pre-wrap; font: inherit; font-size: .9rem; background: var(--flaeche-2); border-radius: 10px; padding: 12px; margin: 8px 0; overflow-wrap: anywhere; }
.pruefliste { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; font-size: .92rem; }
.pruefliste li::before { content: "○ "; color: var(--still); font-weight: 700; }
.pruefliste li.ok::before { content: "✓ "; color: var(--ok); }
.cockpit { border-left: 6px solid var(--akzent); }
.wahl input[value=ja]:checked + label { background: var(--ja-t); color: var(--ja); border-color: var(--ja); }
.wahl input[value=vielleicht]:checked + label { background: var(--vl-t); color: var(--vl); border-color: var(--vl); }
.wahl input[value=nein]:checked + label { background: var(--nein-t); color: var(--nein); border-color: var(--nein); }

/* Landing (Stufe 2): Titelbild, Bausteine, Seitenspalte, Pinnwand, Editor */
@font-face { font-family: "Date Titel"; src: url("/assets/fonts/date-titel.woff2") format("woff2"); font-weight: 600; font-display: swap; }
.titel-gross { font-family: "Date Titel", Georgia, "Times New Roman", serif; font-weight: 600; font-size: clamp(1.7rem, 5vw, 2.6rem); letter-spacing: -.01em; margin-top: 4px; }
.cd-zahl { font-family: "Date Titel", Georgia, serif; }
.titelbild { margin: 8px 0 4px; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 6; max-width: 100%; background: var(--akzent-t); }
.titelbild img, .titelbild svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.landing { margin-top: 18px; }
.landing-werkzeug { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.landing-raster { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .landing-raster { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; } .landing-seite { position: sticky; top: 80px; } }
.landing-haupt { min-width: 0; }
.landing-block { margin-bottom: 14px; }
.landing-block > :last-child { margin-bottom: 0; }
.b-ueberschrift { margin-top: 24px; }
.b-text p, .b-hinweis p { max-width: 68ch; }
.b-text ul, .b-hinweis ul { padding-left: 1.2em; margin: 0 0 .8em; }
.b-hinweis { background: var(--akzent-t); color: var(--text); border-left: 4px solid var(--akzent); border-radius: 10px; padding: 12px 14px; }
.b-hinweis.wichtig { background: var(--nein-t); border-left-color: var(--fehler); }
.b-hinweis > :last-child { margin-bottom: 0; }
.zeitleiste { list-style: none; margin: 0; padding: 0 0 0 4px; }
.zeitleiste li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 12px; padding: 0 0 14px 18px; position: relative; border-left: 2px solid var(--rand); }
.zeitleiste li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--flaeche); border: 2px solid var(--phase1); }
.zeitleiste li:last-child { border-left-color: transparent; }
.zeitleiste li.ist-jetzt::before { background: var(--phase3); border-color: var(--phase3); }
.zeitleiste li.ist-jetzt .zl-inhalt b { color: var(--ja); }
.zl-zeit { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--akzent-dunkel); }
.b-ort { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 14px 16px; }
.b-ort h3 { margin-bottom: 2px; }
.b-ort-infos { margin: 10px 0 0; display: grid; gap: 8px; }
.b-ort-infos dt { font-weight: 700; font-size: .9rem; }
.b-ort-infos dd { margin: 0; }
.b-ort-infos dd p { margin-bottom: 4px; }
.b-kontakt { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 12px 14px; }
.b-zitat { margin: 0; padding: 4px 0 4px 16px; border-left: 4px solid var(--phase2); }
.b-zitat blockquote { margin: 0; font-family: "Date Titel", Georgia, serif; font-size: 1.15rem; quotes: "„" "“"; }
.b-zitat blockquote p::before { content: open-quote; } .b-zitat blockquote p::after { content: close-quote; }
.b-zitat figcaption { color: var(--still); font-size: .9rem; }
.b-bild { margin: 0; }
.b-bild img { border-radius: 12px; height: auto; width: 100%; }
.b-trenner { margin: 24px 0; }
.erwaehnung { background: var(--akzent-t); color: var(--akzent-dunkel); border-radius: 6px; padding: 0 4px; font-weight: 600; white-space: nowrap; }
a.thema { color: var(--thema); font-weight: 600; text-decoration: none; }
a.thema:hover { text-decoration: underline; }
.landing-seite h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--still); margin: 12px 0 2px; }
.landing-seite h3:first-child { margin-top: 0; }
.landing-seite p { margin-bottom: 4px; }
.wer-kommt { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px; }
.avatar { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: #fff; border: 2px solid var(--flaeche); }
.avatar.a0 { background: #3D35A0; } .avatar.a1 { background: #A4461B; } .avatar.a2 { background: #1D6A50; } .avatar.a3 { background: #7A3A6E; } .avatar.a4 { background: #54525E; }
.leer-karte .knopf { margin: 4px 8px 0 0; }
.pinnwand { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.zettelchen { background: var(--vl-t); border: 1px solid var(--rand); border-radius: 4px 14px 14px 14px; padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.zettelchen p { margin-bottom: 4px; }
.pinnwand-form textarea { min-height: 60px; }
.block-editor { background: var(--flaeche); border: 1px dashed var(--rand-stark); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; scroll-margin-top: 90px; }
.be-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.be-typ { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; background: var(--akzent-t); color: var(--akzent-dunkel); border-radius: 8px; font-weight: 700; }
.be-aktionen { margin-left: auto; display: flex; gap: 2px; }
.block-neu-klein { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rand); }
.block-neu-klein select { width: auto; flex: 1 1 12rem; }
.block-neu .reihe select { width: auto; flex: 1 1 14rem; }
.be-vorschau { margin: 6px 0 0; }
.bild-hochladen { margin: 8px 0; }
.vorschlaege { position: absolute; z-index: 30; background: var(--flaeche); border: 1px solid var(--rand-stark); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.15); list-style: none; margin: 0; padding: 4px; max-height: 14rem; overflow-y: auto; min-width: 12rem; }
.vorschlaege li { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.vorschlaege li[aria-selected="true"], .vorschlaege li:hover { background: var(--akzent-t); }

/* Konflikte und Vorschläge (live beim Eingeben) */
.konflikt-anzeige { margin: 8px 0; }
.ed-zeile .konflikt-anzeige { grid-column: 1 / -1; margin: 0; }
.konflikt { border-radius: 10px; padding: 10px 12px; font-size: .9rem; border-left: 4px solid; }
.konflikt ul { margin: 4px 0 0; padding-left: 1.1em; }
.konflikt.ort { background: var(--nein-t); color: var(--nein); border-color: var(--nein); }
.konflikt.zeit { background: var(--vl-t); color: var(--vl); border-color: var(--vl); }
.konflikt.tag { background: var(--akzent-t); color: var(--akzent-dunkel); border-color: var(--akzent); }
.konflikt a { color: inherit; font-weight: 700; }
.tage-leiste { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.tag-chip { font: inherit; font-size: .8rem; border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text); border-radius: 14px; padding: 3px 9px; cursor: pointer; min-height: 30px; }
.tag-chip:hover { border-color: var(--akzent); }
.konflikt-uebersicht { margin: 10px 0; border: 1px solid var(--rand); border-radius: 10px; padding: 0 12px; background: var(--flaeche); }
.konflikt-uebersicht[open] { padding-bottom: 8px; }
.konflikt-zahl { display: inline-flex; min-width: 26px; height: 26px; border-radius: 13px; align-items: center; justify-content: center; font-weight: 800; margin-right: 6px; padding: 0 6px; }
.konflikt-zahl.ort { background: var(--nein-t); color: var(--nein); } .konflikt-zahl.zeit { background: var(--vl-t); color: var(--vl); } .konflikt-zahl.tag { background: var(--akzent-t); color: var(--akzent-dunkel); }
.konflikt-punkt { flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; }
.konflikt-punkt.ort { background: var(--nein); } .konflikt-punkt.zeit { background: var(--vl); } .konflikt-punkt.tag { background: var(--akzent); }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.chip { font: inherit; font-size: .85rem; border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text); border-radius: 16px; padding: 5px 12px; cursor: pointer; min-height: 34px; }
.chip.aktiv { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.neu-seit { border-left: 6px solid var(--phase2); }
.neu-symbol { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--flaeche-2); display: inline-flex; align-items: center; justify-content: center; }

/* Organisation (Kennzahlen, Fahrplan, Kalender, Board, Gästeliste) */
.reiter a.aktiv { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.rot-text { color: var(--nein); font-weight: 600; }
.kennzahlen { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.kz { display: flex; flex-direction: column; gap: 4px; background: var(--flaeche); border: 1px solid var(--rand); border-top: 5px solid var(--rand-stark); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--text); }
.kz:hover { border-color: var(--akzent); }
.kz.ampel-gut { border-top-color: var(--ok); } .kz.ampel-achtung { border-top-color: var(--vl); } .kz.ampel-kritisch { border-top-color: var(--nein); } .kz.ampel-neutral { border-top-color: var(--akzent); }
.kz-titel { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--still); font-weight: 700; }
.kz-wert { font-family: "Date Titel", Georgia, serif; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kz-wert small { font-family: system-ui, sans-serif; font-size: .85rem; color: var(--still); }
.kz-satz { font-size: .85rem; color: var(--still); }
.kz-meter { width: 100%; height: 8px; }
meter::-webkit-meter-bar { background: var(--flaeche-2); border: 0; border-radius: 4px; }
meter::-webkit-meter-optimum-value { background: var(--akzent); border-radius: 4px; }
meter::-moz-meter-bar { background: var(--akzent); border-radius: 4px; }
.fahrplan { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--rand); margin-left: 12px; }
.fahrplan li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 4px 10px; padding: 6px 0 10px 22px; position: relative; }
.fp-symbol { position: absolute; left: -14px; top: 5px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; background: var(--flaeche); border: 2px solid var(--rand-stark); }
.fp-datum { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--still); font-size: .9rem; }
.fp-heute .fp-symbol { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); } .fp-heute .fp-titel { font-weight: 700; }
.fp-beginn .fp-symbol { background: var(--thema); color: var(--flaeche); border-color: var(--thema); } .fp-beginn .fp-titel { font-weight: 700; }
.fp-frist .fp-symbol { border-color: var(--vl); } .fp-ueberfaellig .fp-symbol { background: var(--nein); color: var(--flaeche); border-color: var(--nein); } .fp-ueberfaellig .fp-titel a { color: var(--nein); }
.fahrplan li.vergangen { opacity: .55; }
@media (max-width: 520px) { .fahrplan li { grid-template-columns: 1fr; } }
.kalender { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.kal-raster { width: 100%; border-collapse: collapse; table-layout: fixed; display: none; }
.kal-raster th { font-size: .75rem; color: var(--still); padding: 4px; text-align: left; }
.kal-raster td { vertical-align: top; height: 92px; border: 1px solid var(--rand); padding: 3px; font-size: .75rem; overflow: hidden; }
.kal-raster td.fremd { background: var(--grund); color: var(--still); }
.kal-raster td.heute .kal-zahl { background: var(--akzent); color: var(--akzent-text); border-radius: 10px; padding: 0 6px; }
.kal-raster td.hat-konflikt { box-shadow: inset 0 0 0 2px var(--nein); }
.kal-zahl { font-weight: 700; font-variant-numeric: tabular-nums; display: inline-block; margin-bottom: 2px; }
.kal-eintrag { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; color: var(--text); border-radius: 4px; padding: 1px 4px; margin-bottom: 2px; background: var(--akzent-t); }
.kal-eintrag.k-veranstaltung { background: var(--thema); color: var(--flaeche); font-weight: 700; }
.kal-eintrag.k-vorschlag { background: var(--flaeche-2); border: 1px dashed var(--rand-stark); }
.kal-eintrag.k-vorschlag.a-y { background: var(--ja-t); border-color: var(--ja); } .kal-eintrag.k-vorschlag.a-m { background: var(--vl-t); border-color: var(--vl); } .kal-eintrag.k-vorschlag.a-n { background: var(--nein-t); border-color: var(--nein); text-decoration: line-through; }
.kal-eintrag.k-aufgabe { background: var(--ok-t); color: var(--ok); }
.kal-eintrag.k-sitzung, .kal-eintrag.k-buchung { background: var(--pflaume-t, var(--flaeche-2)); }
.kal-eintrag.konfliktiert { outline: 2px solid var(--nein); }
.kal-mehr { font-size: .7rem; color: var(--still); }
.kal-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.kal-liste > li { border-left: 4px solid var(--akzent); padding-left: 10px; }
.kal-liste > li.heute { border-left-color: var(--phase2); }
.kal-liste ul { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; }
.kal-liste li.konfliktiert a { color: var(--nein); font-weight: 700; }
.kal-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; }
.kal-legende .lg-konflikt { color: var(--nein); }
@media (min-width: 700px) { .kal-raster { display: table; } .kal-liste { display: none; } }
.board { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.board-spalte { background: var(--flaeche-2); border-radius: 12px; padding: 10px; }
.board-spalte h2 { font-size: 1rem; margin: 0 0 8px; }
.board-spalte.s-arbeit { border-top: 4px solid var(--vl); } .board-spalte.s-offen { border-top: 4px solid var(--akzent); } .board-spalte.s-erledigt { border-top: 4px solid var(--ok); }
.aufgabe { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; scroll-margin-top: 90px; }
.aufgabe.ueberfaellig { border-left: 5px solid var(--nein); }
.s-erledigt .aufgabe b { text-decoration: line-through; color: var(--still); }
.aufgabe p { margin: 4px 0; }
.gaesteliste li { align-items: center; }
.schritte { border-left: 6px solid var(--phase1); }
.schritt-liste { margin: 6px 0 0; padding-left: 1.3em; display: grid; gap: 6px; }
.option.belegt { box-shadow: inset 4px 0 0 var(--vl); }
.mein-kalender { font-size: .8rem; font-weight: 700; color: var(--vl); background: var(--vl-t); border-radius: 8px; padding: 1px 8px; }
.option.vorbei { opacity: .6; }
.kalender-abgleich { background: var(--flaeche-2); border-radius: 10px; padding: 0 12px; margin: 8px 0 12px; }
.kalender-abgleich[open] { padding-bottom: 10px; }
.blick td, .blick th { white-space: nowrap; }
.mini-meter { width: 60px; height: 8px; vertical-align: middle; }
.suche-klein { width: 12rem; min-height: 36px; padding: 6px 10px; }

/* Formate und Gruppen */
.format-wahl { border: 0; padding: 0; margin: 0 0 12px; }
.format-raster { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.format-raster input { position: absolute; opacity: 0; pointer-events: none; }
.format-karte { margin: 0; display: flex; flex-direction: column; gap: 4px; font-weight: 400; background: var(--flaeche); border: 2px solid var(--rand); border-radius: 14px; padding: 12px 14px; cursor: pointer; min-height: 100%; }
.format-karte b { font-size: 1.05rem; }
.format-raster input:checked + .format-karte { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-t); }
.format-raster input:focus-visible + .format-karte { outline: 3px solid color-mix(in srgb, var(--akzent) 45%, transparent); }
.format-symbol { font-size: 1.8rem; line-height: 1; }
.format-inhalt { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.etikett-mini { font-size: .72rem; background: var(--flaeche-2); color: var(--still); border-radius: 8px; padding: 1px 7px; }
.fokus { border-left: 6px solid var(--phase2); }
.fokus-kopf { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.fokus-kopf > div:nth-child(2) { flex: 1 1 14rem; min-width: 0; }
.fokus-symbol { font-size: 2.2rem; line-height: 1; }
.klein-symbol { font-size: 1.4rem; flex: none; }
.fokus-countdown { text-align: center; }
.fokus-countdown .cd-zahl { display: block; font-size: 2.4rem; }
.jahresleiste { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .jahresleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .jahresleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.quartal { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: 10px; }
.quartal h3 { margin: 0 0 6px; font-size: .85rem; color: var(--still); letter-spacing: .06em; }
.quartal-monate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.monat { min-height: 90px; border-radius: 8px; background: var(--grund); padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.monat.jetzt { box-shadow: inset 0 0 0 2px var(--akzent); }
.monat.vorbei { opacity: .7; }
.monat-name { font-size: .75rem; font-weight: 700; color: var(--still); text-transform: uppercase; }
.jahr-chip { display: block; font-size: .72rem; text-decoration: none; color: var(--text); background: var(--akzent-t); border: 1px solid var(--akzent); border-radius: 6px; padding: 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jahr-chip.geplant { background: var(--flaeche); border-style: dashed; color: var(--still); }
.jahr-chip.erledigt { background: var(--flaeche-2); border-color: var(--rand); color: var(--still); }
.jahr-chip.abgesagt { text-decoration: line-through; }
.jahr-chip.im-fokus { background: var(--thema); border-color: var(--thema); color: var(--flaeche); font-weight: 700; }
.jahr-legende { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.jahr-legende .jahr-chip { display: inline-block; }
.gruppe-kachel { border-left: 6px solid var(--phase1); }
.format-motiv { width: 64px; height: 64px; }
.motiv-icon { width: 48px; height: 48px; flex: none; }
.titelmotiv { background: var(--akzent-t); }

/* Galerie */
.galerie { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.galerie-bild { display: block; width: 100%; padding: 0; border: 0; background: var(--flaeche-2); border-radius: 10px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; }
.galerie-bild img, .foto-pruefen img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s ease; }
.galerie-bild:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .galerie-bild img { transition: none; } }
.klein-galerie .foto-pruefen { display: flex; flex-direction: column; gap: 4px; }
.foto-pruefen img { aspect-ratio: 1; border-radius: 8px; }
.lightbox { padding: 0; border: 0; border-radius: 14px; max-width: min(96vw, 1200px); max-height: 94vh; background: var(--dunkel, #15141B); color: #fff; }
.lightbox::backdrop { background: rgba(10, 10, 15, .85); }
.lightbox img { display: block; max-width: 100%; max-height: calc(94vh - 70px); margin: 0 auto; object-fit: contain; }
.lb-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 10px; background: #15141B; }
.lb-leiste .link-knopf { color: #FF9D90; }
@media (max-width: 699px) { .quartal.leer-q { display: none; } }
@media (max-width: 400px) { .kopf-innen { padding: 6px 10px; gap: 4px; } .kopf nav a, .kopf nav button { padding: 8px 8px; } .marke { font-size: 1.1rem; } }

/* Hilfe-Box und Korrektur durch Moderation */
.hilfe-box { margin: .5rem 0 1rem; padding: .6rem .9rem; border: 1px solid var(--rand); border-radius: .6rem; background: var(--flaeche); }
.hilfe-box summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.hilfe-box p { margin: .5rem 0 0; }
details.korrektur { border-top: 1px solid var(--rand); padding: .4rem 0; }
details.korrektur summary { cursor: pointer; min-height: 24px; }
noscript .meldung { margin: .5rem auto; max-width: 60rem; }

/* Dateiablage */
ul.ablage { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.ablage li { display: flex; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--rand); flex-wrap: wrap; }
ul.ablage .haupt { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.ablage-zeichen { flex: 0 0 auto; min-width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: .5rem; background: var(--flaeche-2); color: var(--text); font-size: .75rem; font-weight: 700; }

/* Ideensammlung */
.idee-neu { display: flex; gap: .5rem; align-items: stretch; }
.idee-neu input { flex: 1 1 auto; min-width: 0; }
ol.ideen { list-style: none; padding: 0; margin: .5rem 0 1rem; }
ol.ideen li { display: flex; gap: .75rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--rand); }
ol.ideen .haupt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
ol.ideen .haupt p { margin: 0; }
.punkt-knopf { min-width: 44px; min-height: 44px; border-radius: 50%; border: 2px solid var(--rand-stark); background: var(--flaeche); color: var(--rand-stark); font-size: 1.1rem; cursor: pointer; }
.punkt-knopf[aria-pressed="true"] { background: var(--thema); border-color: var(--thema); color: var(--flaeche); }
.punkt-knopf:disabled { opacity: .45; cursor: not-allowed; }
.balken { display: block; height: 6px; border-radius: 3px; background: var(--flaeche-2); margin: .35rem 0 .2rem; overflow: hidden; }
.balken > span { display: block; height: 100%; width: 0; background: var(--thema); border-radius: 3px; }

/* Spiele und Quiz (H5P) */
ul.spiele { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.spiel-karte { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem; border: 1px solid var(--rand); border-radius: .75rem; background: var(--flaeche); color: var(--text); text-decoration: none; min-height: 44px; }
.spiel-karte:hover, .spiel-karte:focus-visible { border-color: var(--thema); }
.spiel-art { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--thema); }
.h5p-buehne { background: #fff; border: 1px solid var(--rand); border-radius: .75rem; overflow: hidden; margin: .5rem 0; }
.h5p-buehne iframe { display: block; width: 100%; height: 480px; border: 0; }
ol.rangliste { padding-left: 1.5rem; margin: .5rem 0; }
ol.rangliste li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--rand); }

/* Session-Raster (Gruppe) */
.kennzahlen-leiste { list-style: none; padding: 0; margin: .25rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.kennzahlen-leiste b { font-size: 1.25rem; color: var(--thema); }
.raster-legende { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .75rem; }
.r-woche { background: var(--flaeche); border: 1px solid var(--rand); border-radius: .75rem; margin: .5rem 0; padding: .25rem .75rem; }
.r-woche > summary { cursor: pointer; padding: .55rem 0; min-height: 44px; display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; }
.r-woche.vorbei { opacity: .7; }
.r-tag { display: grid; grid-template-columns: 5.5rem 1fr; gap: .5rem; padding: .45rem 0; border-top: 1px solid var(--rand); align-items: start; }
.r-tag.we .r-datum { font-weight: 700; }
.r-datum { padding-top: .35rem; white-space: nowrap; }
.r-fenster { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.r-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; min-height: 36px; padding: .3rem .6rem; border-radius: .5rem; border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text); font: inherit; font-size: .9rem; text-decoration: none; }
.r-chip.frei { border-style: solid; border-color: var(--rand); color: var(--still); }
.r-chip.belegt { background: var(--thema); border-color: var(--thema); color: var(--flaeche); max-width: 100%; }
.r-chip.belegt .r-titel { font-weight: 700; overflow-wrap: anywhere; }
.r-chip.belegt .r-pax { font-size: .8rem; padding: 0 .35rem; border-radius: .35rem; background: var(--flaeche); color: var(--thema); }
.r-chip.angefragt { border-style: dashed; border-width: 2px; border-color: var(--thema); }
.r-chip.gesperrt { background: var(--flaeche-2); color: var(--still); text-decoration: line-through; }
.r-chip.zusatz { border-style: dotted; color: var(--still); cursor: pointer; }
details.r-chip { display: block; }
details.r-chip > summary { cursor: pointer; list-style: none; min-height: 28px; }
details.r-chip[open] { flex-basis: 100%; }
.r-aktionen { display: grid; gap: .5rem; padding: .5rem 0 .25rem; }
.r-aktionen form { display: grid; gap: .4rem; }
@media (max-width: 420px) { .r-tag { grid-template-columns: 1fr; gap: .25rem; } .r-datum { padding-top: 0; } }
.r-fenster { align-items: center; }
.r-fenster > li { display: flex; margin: 0; }
.r-fenster form, .r-fenster form.inline { margin: 0; display: inline-flex; }
details.r-chip:not([open]) { display: inline-flex; align-items: center; }
.r-tag { padding: .35rem 0; }
.r-chip { line-height: 1.25; min-height: 36px; box-sizing: border-box; }
details.r-chip { padding: 0; }
details.r-chip > summary { min-height: 34px; padding: .3rem .6rem; margin: 0; display: flex; align-items: center; }
details.r-chip > summary::-webkit-details-marker { display: none; }
details.r-chip[open] { padding: 0 .6rem .5rem; }
details.r-chip[open] > summary { padding-left: 0; padding-right: 0; }

/* Einladungslink */
.einladung-seite { max-width: 34rem; margin: 0 auto; }
.einladung-eckdaten { display: flex; flex-direction: column; gap: .25rem; font-size: 1.05rem; }
.knopf.gross { width: 100%; min-height: 52px; font-size: 1.1rem; justify-content: center; }
.einladung-link code { display: block; padding: .6rem .75rem; background: var(--flaeche-2); border-radius: .5rem; overflow-wrap: anywhere; font-size: .9rem; }
.einladung-karte h3 { margin-top: 1rem; }

/* Schreibfeld (Formatieren mit Knöpfen) */
.schreibfeld { border: 1px solid var(--rand-stark); border-radius: .6rem; background: var(--flaeche); overflow: hidden; }
.schreibfeld:focus-within { outline: 3px solid var(--fokus, var(--thema)); outline-offset: 1px; }
.sf-leiste { display: flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; background: var(--flaeche-2); border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 2; }
.sf-knopf { min-width: 44px; min-height: 44px; padding: 0 .6rem; border: 1px solid var(--rand); border-radius: .45rem; background: var(--flaeche); color: var(--text); font: inherit; font-size: .95rem; cursor: pointer; }
.sf-knopf:active { background: var(--rand); }
.sf-extra { display: flex; flex-wrap: wrap; gap: .4rem; padding: .5rem; border-bottom: 1px solid var(--rand); align-items: center; }
.sf-extra input { flex: 1 1 12rem; min-width: 0; }
.sf-name { min-height: 40px; padding: 0 .7rem; border-radius: 999px; border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text); font: inherit; }
.sf-feld { min-height: 7rem; padding: .6rem .75rem; font-size: 16px; line-height: 1.5; outline: none; overflow-wrap: anywhere; }
.sf-feld p { margin: 0 0 .6rem; } .sf-feld ul { margin: 0 0 .6rem; padding-left: 1.3rem; }
.sf-feld a { color: var(--thema); }
/* Ablauf-Zeilen */
.ablauf-zeilen { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .5rem; }
.ablauf-zeilen li { display: grid; grid-template-columns: 7rem 1fr 1.6fr auto; gap: .4rem; align-items: center; }
.ablauf-zeilen input { margin: 0; }
.ab-weg { min-width: 44px; min-height: 44px; }
@media (max-width: 640px) {
  .ablauf-zeilen li { grid-template-columns: 7rem 1fr auto; padding: .5rem; border: 1px solid var(--rand); border-radius: .6rem; }
  .ablauf-zeilen .ab-text { grid-column: 1 / -1; grid-row: 2; }
  .ablauf-zeilen .ab-weg { grid-column: 3; grid-row: 1; }
}
.sf-leiste { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sf-knopf { flex: 0 0 auto; }

/* Meine Auftritte, Besetzung, Verfügbarkeit */
.meine-auftritte { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .6rem; }
.meine-auftritte > li { display: grid; gap: .5rem; border-left: 5px solid var(--rand-stark); }
.meine-auftritte > li.z-ja { border-left-color: #2E7D5B; } .meine-auftritte > li.z-nein { border-left-color: #A3352B; } .meine-auftritte > li.z-vielleicht { border-left-color: #B7791F; }
.ma-kopf { display: grid; gap: .1rem; }
.ma-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 0; }
.ma-knopf { min-height: 44px; border-radius: .5rem; border: 1px solid var(--rand-stark); background: var(--flaeche); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; padding: .2rem .3rem; }
.ma-knopf.gewaehlt { background: var(--thema); border-color: var(--thema); color: var(--flaeche); font-weight: 700; }
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .5rem 0; }
table.besetzung { border-collapse: collapse; min-width: 100%; font-size: .9rem; }
table.besetzung th, table.besetzung td { border-bottom: 1px solid var(--rand); padding: .4rem .5rem; text-align: center; white-space: nowrap; }
table.besetzung th[scope=row] { text-align: left; position: sticky; left: 0; background: var(--flaeche); z-index: 1; }
table.besetzung td.z-ja { color: #2E7D5B; font-weight: 700; } table.besetzung td.z-nein { color: #A3352B; } table.besetzung td.z-vielleicht { color: #8A5A10; } table.besetzung td.z-offen { color: var(--still); }
.r-datum { display: grid; gap: .1rem; align-content: start; }
.r-verfuegbar { font-size: .75rem; color: var(--still); }
.r-verfuegbar.eng { color: #A3352B; font-weight: 700; }
.r-kann { margin: 0; } .r-kann .link-knopf { font-size: .8rem; padding: 0; min-height: 28px; text-align: left; }
@media (max-width: 420px) { .r-datum { grid-template-columns: auto auto 1fr; gap: .5rem; align-items: baseline; } }
@media (prefers-color-scheme: dark) {

  table.besetzung td.z-ja { color: #7FD3AE; } table.besetzung td.z-nein, .r-verfuegbar.eng { color: #F2998E; } table.besetzung td.z-vielleicht { color: #F0C774; }
  .meine-auftritte > li.z-ja { border-left-color: #7FD3AE; } .meine-auftritte > li.z-nein { border-left-color: #F2998E; } .meine-auftritte > li.z-vielleicht { border-left-color: #F0C774; }
}
.ma-abfahrt { font-size: .85rem; font-weight: 600; }
/* Tippflächen ≥ 24 px (Simulation „große Schrift“, WCAG 2.2 Zielgröße) */
.brot a { display: inline-flex; align-items: center; min-height: 44px; }
.schritt-liste a, .schritte li a { display: inline-block; padding: .4rem 0; min-height: 32px; }
.jahr-chip { font-size: .78rem; padding: 4px 6px; min-height: 26px; line-height: 1.35; }
a.klein[href$=".csv"] { display: inline-block; padding: .4rem 0; }
a.brot { display: inline-flex; align-items: center; min-height: 44px; }
.be-aktionen .link-knopf { min-width: 44px; min-height: 44px; }
a.kal-eintrag { min-height: 24px; display: block; }
.kal-raster a, .kal-liste a { display: block; min-height: 24px; }
main p.klein > a, main a.klein, main .knopf-reihe a.link-knopf { display: inline-block; padding-block: .35rem; }