/* ==========================================================================
   Sicherungskasten – Gestaltung angeglichen an den Klönkasten (ab V1.11.0)
   Leichtes, modernes Design: warmgrauer Grund, weiße Flächen mit feiner Linie,
   runde Ecken, dunkle Hauptknöpfe. Lexend SemiBold für Überschriften (lokal,
   siehe fonts/schrift.css), Systemschrift für Text. Von der Sketchnote-Herkunft
   bleiben: Haftzettel-Symbol, Textmarker, Pastellfarben als zarte Flächen.
   Ab V1.13.0 wie der Klönkasten in EKHN-Lila: Hauptknöpfe #5C2483, Marker und
   abgesetzte Flächen in hellem Lila; Gelb nur noch für Warnungen und das Symbol.
   ========================================================================== */

:root {
  /* Klönkasten-Palette */
  --grund: #F8F7F3;
  --flaeche: #FFFFFF;
  --linie: #E6E3DA;
  --linie-zart: #EFECE4;
  --linie-stark: #DAD6CB;
  --rand-feld: #8A867B;     /* Rahmen von Eingabefeldern: mind. 3 : 1 gegen Weiß und Grund (WCAG 1.4.11, seit 1.17.2) */
  --tusche: #23253A;
  --tusche-hover: #34374F;
  --grau: #5F6275;
  --gelb: #FFE27A;
  --t-gelb: #FFF7D6;
  --t-gelb-2: #FFFBEA;
  --r-gelb: #F1E2A6;
  --t-blau: #EAF1FA;
  --r-blau: #C9DBF0;
  --t-gruen: #E8F5EE;
  --r-gruen: #CFE9DB;
  --t-pfirsich: #FCEEE4;
  --r-pfirsich: #F4D9C6;
  /* EKHN-Lila wie im Klönkasten (ab 1.13.0): farbige Knöpfe und abgesetzte Flächen */
  --lila: #5C2483;
  --lila-hover: #4A1D6A;
  --akzent: #DFCDF0;       /* Textmarker – helles EKHN-Lila statt Gelb */
  --t-lila: #EEE6F6;
  --t-lila-2: #F6F1FA;
  --r-lila: #DCCDEB;
  --punkt-gruen: #7CC4A0;
  --punkt-pfirsich: #EFA375;
  --punkt-blau: #8DB3E2;
  --punkt-gelb: #E9C94F;
  --punkt-lila: #B39AD3;
  --ok: #2F7A55;
  --rot: #B3261E;
  --t-rot: #FBE9E7;
  --fokus: #4A6FA5;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Lexend', var(--sans);
  --r-s: 10px; --r-m: 14px; --r-l: 18px;
  --schatten-s: 0 1px 2px rgba(35,37,58,.04);
  --schatten-m: 0 1px 2px rgba(35,37,58,.04), 0 12px 32px rgba(35,37,58,.06);
  --schatten-l: 0 2px 4px rgba(35,37,58,.06), 0 24px 60px rgba(35,37,58,.18);
  /* ältere Namen, die noch im Code vorkommen */
  --papier: var(--flaeche);
  --violett: var(--tusche);
  --blau: var(--t-blau);
  --rand: 1px solid var(--linie);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--grund); color: var(--tusche); font-family: var(--sans); font-size: 1rem; line-height: 1.5; }
a { color: var(--tusche); text-underline-offset: 3px; }
a:hover { color: var(--tusche-hover); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.sprung { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--tusche); color: #fff; padding: 8px 14px; border-radius: 8px; }
.sprung:focus { left: 12px; color: #fff; }
[hidden] { display: none !important; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; }

.rahmen { max-width: 46rem; margin: 0 auto; padding: 32px 20px 8px; }
body.breit .rahmen { max-width: 72rem; }

/* ---------- Kopfzeile (wie Klönkasten) ---------- */
.seitenkopf { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); border-bottom: 1px solid var(--linie); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.seitenkopf-in { max-width: 72rem; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.kopf-marke { display: inline-flex; align-items: center; gap: 10px; color: var(--tusche); text-decoration: none; border-radius: 10px; }
.kopf-marke:hover { color: var(--tusche); }
.marke-zettel { flex: none; width: 34px; height: 34px; }
.marke-wort { font-family: var(--display); font-weight: 600; font-size: 1.1875rem; letter-spacing: -.02em; }
.kopf-unterzeile { padding-left: 16px; border-left: 1px solid var(--linie); font-size: 0.8438rem; color: var(--grau); }
/* Link zu allen Diensten oben rechts (seit 1.17.7, wie Klön-Café „nav-services“) */
.kopf-navi { margin-left: auto; }
.kopf-dienste { display: inline-flex; align-items: center; gap: .35em; min-height: 40px; padding: 0 12px; border-radius: var(--r-s); font-size: 0.875rem; font-weight: 500; color: var(--grau); text-decoration: none; white-space: nowrap; }
.kopf-dienste:hover { background: var(--t-lila-2); color: var(--tusche); }
@media (max-width: 30rem) { .kopf-unterzeile { display: none; } .seitenkopf-in { padding: 10px 16px; } .kopf-dienste { padding: 0 8px; } }
@media print { body.qr-seite .seitenkopf { display: none !important; } .seitenkopf { position: static; } }

/* ---------- Fußzeile (wie Klönkasten) ---------- */
.fuss { border-top: 1px solid var(--linie); margin-top: 56px; }
.fuss-in { max-width: 72rem; margin: 0 auto; padding: 24px 24px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 0.8125rem; color: var(--grau); }
.fuss-in img { width: 200px; height: auto; display: block; }
.fuss-in p { margin: 0; }
.fuss-in a { color: var(--grau); }

/* ---------- Text und Überschriften ---------- */
.text-seite { max-width: 46rem; }
.text-seite h2 { font-size: 1.3125rem; margin: 2.2rem 0 .5rem; }
.text-seite h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin: 1.4rem 0 .4rem; }
.text-seite p, .text-seite li { line-height: 1.65; }
.text-seite ul { padding-left: 1.3em; }
.text-seite li { margin-bottom: .35rem; }
.text-seite address { font-style: normal; line-height: 1.6; margin: 0 0 12px; padding: 12px 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); }
.marke { margin: 0 0 1.25rem; }
.marke img { display: block; width: 100%; max-width: 260px; height: auto; }

.kopf { margin-bottom: 1.5rem; }
.dachzeile { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--grau); }
.dachzeile a { color: var(--grau); }
h1 { margin: .2rem 0 .3rem; font-size: clamp(26px, 4vw, 34px); line-height: 1.2; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; line-height: 1.25; }
h3 { font-size: 1.0625rem; }
.marker {
  background: linear-gradient(transparent 55%, var(--akzent) 55%, var(--akzent) 92%, transparent 92%);
  padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.klein { font-size: 0.8438rem; color: var(--grau); }
.aktionen, .knopfzeile, .zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.aktionen { margin-top: 1rem; }
.zeile + .zeile { margin-top: .6rem; }
.sprungnavi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .9rem; font-size: 0.875rem; }
.sprungnavi a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; font-weight: 500; }
.sprungnavi a:hover { border-color: var(--linie-stark); }

/* ---------- Karten / Panels ---------- */
.karte { background: var(--flaeche); padding: 20px; margin: 0 0 1rem; }
.karte.schmal { max-width: 28rem; }
.sketch { border: 1px solid var(--linie); border-radius: var(--r-l); }

/* ---------- Formulare ---------- */
.formular { display: flex; flex-direction: column; gap: 8px; }
.formular label { font-size: 0.875rem; font-weight: 600; }
.formular .knopf { align-self: flex-start; margin-top: 6px; }
.zeile.formular { flex-direction: row; align-items: flex-end; }
input, select, textarea {
  font: inherit; font-size: 0.9375rem; color: var(--tusche); background: var(--flaeche);
  border: 1px solid var(--rand-feld); border-radius: 12px; padding: 10px 14px; min-height: 44px; width: 100%;
}
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; }
.zeile input { width: auto; flex: 1 1 14rem; }
textarea { resize: vertical; line-height: 1.45; }
/* Fokus in Feldern so deutlich wie bei Knöpfen (seit 1.17.2; vorher halbtransparent, ungefähr 1,6 : 1) */
input:focus, textarea:focus, select:focus { border-color: var(--fokus); outline: 3px solid var(--fokus); outline-offset: 1px; }

/* ---------- Knöpfe (wie .btn im Klönkasten) ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; font: inherit; font-size: 0.9062rem; font-weight: 600; text-decoration: none;
  color: var(--tusche); background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 12px; cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.knopf:hover { background: var(--grund); color: var(--tusche); }
.knopf:active { transform: translateY(1px); }
.knopf.haupt { background: var(--lila); border-color: var(--lila); color: #fff; }
.knopf.haupt:hover { background: var(--lila-hover); border-color: var(--lila-hover); color: #fff; }
.knopf.leise { border-color: transparent; background: transparent; padding-inline: 12px; }
.knopf.leise:hover { background: var(--linie-zart); }
.knopf.gefahr { color: var(--rot); }
.knopf.gefahr:not(.leise) { border-color: #F0C9C5; }
.knopf.gefahr:hover { background: var(--t-rot); }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.knopf.klein-knopf { min-height: 36px; padding: 0 12px; font-size: 0.8438rem; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .knopf { transition: none; } .knopf:active { transform: none; } }

/* ---------- Meldungen ---------- */
.meldung { padding: 10px 14px; border-radius: 12px; border: 1px solid transparent; font-size: 0.9062rem; }
.meldung.fehler { background: var(--t-rot); border-color: #F0C9C5; color: #7A1B15; }
.meldung.erfolg { background: var(--t-gruen); border-color: var(--r-gruen); }
.meldung.warnung { background: var(--t-gelb); border-color: var(--r-gelb); }

/* ---------- Beiträge ---------- */
.beitraege { display: flex; flex-direction: column; gap: 12px; }
.abschnitt-beitraege { position: relative; }
.leitfrage { padding: 20px; }
.leitfrage-titel { margin: 0 0 .25rem; font-family: var(--sans); font-size: 0.7812rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--grau); }
.leitfrage-text { margin: 0 0 .9rem; font-size: 1.05rem; font-weight: 600; }
.beitrag-stapel { display: flex; flex-direction: column; gap: 12px; }
.beitrag { position: relative; padding: 14px 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); box-shadow: var(--schatten-s); }
.beitrag-kopf { display: flex; justify-content: space-between; gap: .5rem; align-items: center; flex-wrap: wrap; }
.typ { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 0.7812rem; font-weight: 600; background: var(--t-blau); }
.beitrag.typ-diktat .typ { background: var(--t-lila); }
.beitrag.typ-foto .typ { background: var(--t-gruen); }
.icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zeit { font-size: 0.8125rem; color: var(--grau); }
.beitrag-text { margin: .5rem 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.hinweis { margin: 0; font-size: 0.8125rem; color: var(--grau); }
.hinweis.sperre { color: #7A4B00; font-weight: 600; }
.beitrag.gesperrt { border-style: dashed; border-color: var(--linie-stark); }
.beitrag-aktionen { display: flex; justify-content: flex-end; gap: 4px; }
.am-bearbeiten { box-shadow: 0 0 0 3px rgba(74,111,165,.35); }
/* Lange Beiträge gekürzt, Knopf „Ganzen Beitrag anzeigen“ (seit 1.17.3) */
.text-kuerzung:not(.offen) .beitrag-text.kuerzbar { max-height: 15em; overflow: hidden; }   /* 10 Zeilen à 1,5 */
.text-kuerzung.ist-gekuerzt:not(.offen) .beitrag-text {
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent);
          mask-image: linear-gradient(to bottom, #000 65%, transparent);
}
.text-kuerzung .beitrag-text.foto-unterschrift.kuerzbar { margin-top: .5rem; }
.knopf.mehr-knopf { min-height: 36px; margin: -.25rem 0 .25rem; padding: 0 10px; margin-left: -10px; color: var(--lila); font-size: 0.875rem; text-decoration: underline; text-underline-offset: 3px; }
.knopf.mehr-knopf:hover { color: var(--lila-hover); }
@media print {
  .text-kuerzung .beitrag-text.kuerzbar { max-height: none !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .mehr-knopf, .ansicht-wahl { display: none !important; }
}
.leer { padding: 16px; border: 1px dashed var(--linie-stark); border-radius: var(--r-m); color: var(--grau); background: transparent; }
.weitere { margin-top: .5rem; }

.neuer-beitrag { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie); }
.mini-titel { font-family: var(--sans); font-size: 0.7812rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--grau); margin: 0 0 10px; }

/* ---------- Admin ---------- */
.abschnitt { margin: 2rem 0; scroll-margin-top: 80px; }
.abschnitt > h2 { margin: 0 0 14px; }
.liste-veranstaltungen, .gruppenliste, .leitfragenliste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.liste-veranstaltungen h2 { margin: 0 0 .25rem; font-size: 1.0625rem; }
.liste-veranstaltungen .karte { padding: 14px 16px; border-radius: var(--r-m); margin: 0; }
.liste-veranstaltungen .karte:hover { border-color: var(--linie-stark); }
.link-feld { font-family: ui-monospace, Menlo, monospace; font-size: 0.8125rem; }
.leitfragenliste li { justify-content: space-between; border-bottom: 1px solid var(--linie-zart); padding-bottom: .4rem; }
.admin-gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 16px; align-items: start; }
.admin-gruppe { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); padding: 16px; }
/* Anordnung „Untereinander“ (seit 1.17.3): jede Gruppe über die volle Breite, ihre Beiträge als Raster */
.ansicht-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.ansicht-wahl .klein { margin-right: 4px; }
.ansicht-wahl .knopf[aria-pressed="true"] { background: var(--lila); border-color: var(--lila); color: #fff; }
.admin-gruppen.untereinander { grid-template-columns: minmax(0, 1fr); }
.admin-gruppen.untereinander .beitrag-stapel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 12px; align-items: start; }
.admin-gruppen.untereinander .ergaenzen { max-width: 40rem; }
@media (max-width: 40rem) { .ansicht-wahl { display: none; } }   /* am Handy stehen die Gruppen ohnehin untereinander */
.admin-gruppe-titel { margin: 0 0 .9rem; font-size: 1.0625rem; }
.ergaenzen { margin-top: 1rem; }
.ergaenzen summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

@media (max-width: 30rem) { .rahmen { padding: 24px 14px 8px; } }

/* Admin-Navigation (wie die Navigation in der Klönkasten-Kopfzeile) */
.admin-navi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -12px 0 20px; padding: 6px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); font-size: 0.875rem; }
.admin-navi > a { text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 10px; color: var(--grau); }
.admin-navi > a:hover { background: var(--linie-zart); color: var(--tusche); }
.admin-navi > a[aria-current="page"] { background: var(--linie-zart); color: var(--tusche); font-weight: 600; }
.admin-navi .klein { margin-left: auto; padding: 0 8px; }
.admin-navi form { margin: 0; }
.admin-navi .knopf.leise { min-height: 36px; font-size: 0.875rem; }
@media (max-width: 38rem) { .admin-navi .klein { margin-left: 0; width: 100%; order: 9; padding: 4px 12px 2px; } }
.gesperrt { opacity: .75; }
.einmal { border-color: var(--r-lila); background: var(--t-lila-2); }
.zugang { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
.zugang dt { font-weight: 600; }
.zugang dd { margin: 0; overflow-wrap: anywhere; }
.zugang code { font-size: 1.15rem; font-weight: 700; letter-spacing: .03em; }

/* ---------- Startseite ---------- */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* ---------- Startseite (ab 1.15.0 im Aufbau wie Babbelback: Hero, Karte „Mitmachen“, Karte „Anmelden“) ---------- */
body.startseite .rahmen { max-width: 1100px; padding: 32px 24px 24px; }
.hero { text-align: center; padding: 24px 0 8px; }
.hero-symbol { display: block; margin: 0 auto 10px; }
.hero h1 { font-size: clamp(34px, 6vw, 48px); letter-spacing: -.03em; line-height: 1.1; margin: 0; }
.hero h1 .marker { padding: 0 2px; }
.hero p { color: var(--grau); font-size: 1.0625rem; margin: 8px 0 0; }
.panel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); padding: 20px; max-width: 560px; margin: 20px auto 0; }
.panel-titel { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; margin: 0 0 14px; }
.panel .hinweis { font-size: 0.8125rem; color: var(--grau); margin: 12px 0 0; }
.panel .hinweis-oben { color: var(--grau); margin: -6px 0 14px; }
.panel .meldung { margin: 0 0 12px; }
.mitmachen { margin-top: 28px; text-align: center; }
.code-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.code-eingabe { font-family: var(--display) !important; font-weight: 600; font-size: 1.875rem !important; letter-spacing: .12em; text-align: center; width: 230px !important; height: 60px; border-radius: 14px !important; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.code-eingabe::placeholder { color: var(--grau); }   /* 6 : 1 statt 2,7 : 1 (seit 1.17.2) */
.mitmachen .meldung { margin: 12px 0 0; text-align: left; }
.knopf.gross { min-height: 50px; padding: 0 20px; font-size: 0.9375rem; border-radius: 14px; }
.code-form .knopf.gross { min-height: 60px; }
.knopf.breit { width: 100%; }
.anmelden .formular { gap: 6px; }
.anmelden .formular label { font-size: 0.8438rem; }
.anmelden .formular label + input { margin-bottom: 8px; }
.anmelden .formular .knopf { align-self: stretch; margin-top: 6px; }

/* ---------- Menüleiste unter dem Veranstaltungsnamen ---------- */
.v-menue { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 14px; }
.aufklapp { position: relative; }
.aufklapp > summary { list-style: none; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::after { content: "▾"; font-size: .8em; margin-left: 2px; color: var(--grau); }
.aufklapp[open] > summary { background: var(--linie-zart); }
.aufklapp-inhalt {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: min(26rem, 90vw);
  padding: 18px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); box-shadow: var(--schatten-l);
  max-height: min(80vh, 46rem); overflow-y: auto;
}
.aufklapp-inhalt p { margin: 0 0 .75rem; }
.knopf.gefahr-text { color: var(--rot); }
@media (max-width: 40rem) { .aufklapp { position: static; } .aufklapp-inhalt { left: 1rem; right: 1rem; width: auto; } }

/* ---------- Gruppen als Klapp-Kacheln ---------- */
.kacheln { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 60rem) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 38rem) { .kacheln { grid-template-columns: 1fr; } }
.kacheln > li { scroll-margin-top: 80px; }
.kachel { background: var(--flaeche); border-radius: var(--r-m); overflow: hidden; }
.kachel > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 600; }
.kachel > summary::-webkit-details-marker { display: none; }
.kachel > summary::before { content: "▸"; display: inline-block; width: 1em; color: var(--grau); transition: transform .15s; }
.kachel[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .kachel > summary::before { transition: none; } }
.kachel > summary:hover { background: var(--grund); }
.kachel-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.abzeichen { display: inline-flex; align-items: center; font-size: 0.7812rem; font-weight: 600; padding: 1px 9px; border-radius: 999px; background: var(--t-lila); color: var(--tusche); line-height: 1.6; }
.kachel-inhalt { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-top: 1px solid var(--linie-zart); }
.kachel-inhalt .formular { gap: 6px; }
.kachel-inhalt .zeile input { min-width: 0; }
.kachel-inhalt textarea { font-size: 0.9062rem; }
.kachel-fuss { justify-content: space-between; }
.kachel-fuss .knopf.leise { font-size: 0.8438rem; }
.kachel-code { margin: 0; font-size: 0.8438rem; color: var(--grau); }
.kachel-code strong { font-family: ui-monospace, Menlo, monospace; font-size: 1rem; letter-spacing: .06em; color: var(--tusche); background: var(--t-lila); padding: 1px 8px; border-radius: 8px; }

/* ---------- Aufgaben auf der Gruppenseite ---------- */
.aufgaben { margin: 0 0 1.5rem; padding: 18px 20px; background: var(--t-lila-2); border: 1px solid var(--r-lila); border-radius: var(--r-l); }
.aufgaben h3.mini-titel { margin-top: .9rem; }
.aufgabe-text { margin: 0; white-space: pre-wrap; font-size: 1.05rem; }

/* ---------- Diktieren ---------- */
.diktat { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.diktat p { margin: 0; }
.diktat-knopf svg, .foto-knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.diktat-knopf.nimmt-auf { color: #fff; background: var(--rot); border-color: var(--rot); }
.diktat-knopf.nimmt-auf:hover { background: var(--rot); filter: brightness(.92); }
.diktat-uhr { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; }
.diktat-uhr::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .4rem; border-radius: 50%; background: var(--rot); vertical-align: .05em; }
@media (prefers-reduced-motion: no-preference) { .diktat-uhr::before { animation: blinken 1s steps(2, start) infinite; } }
@keyframes blinken { to { visibility: hidden; } }
.diktat-status:empty { display: none; }
.diktat progress { width: 100%; max-width: 24rem; height: .7rem; accent-color: var(--lila); }
.diktat-pegel { display: inline-block; width: 9rem; max-width: 40vw; height: .7rem; border: 1px solid var(--linie-stark); border-radius: 999px; overflow: hidden; background: var(--flaeche); }
.diktat-pegel-balken { display: block; width: 100%; height: 100%; background: var(--punkt-gruen); transform-origin: left center; transform: scaleX(0); }
.diktat-details { margin-top: .4rem; font-size: 0.8125rem; }
.diktat-details summary { cursor: pointer; font-weight: 600; }
.diktat-log { max-height: 16rem; overflow: auto; margin: .4rem 0; padding: .5rem .6rem; background: var(--grund); border: 1px solid var(--linie); border-radius: 10px; font-size: 0.75rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Dialoge ---------- */
.dialog { max-width: min(32rem, calc(100vw - 2rem)); padding: 24px; background: var(--flaeche); color: var(--tusche); border: 1px solid var(--linie); border-radius: var(--r-l); box-shadow: var(--schatten-l); }
.dialog::backdrop { background: rgba(35, 37, 58, .45); }
.dialog h2 { margin: 0 0 12px; font-size: 1.25rem; }
.dialog ul { padding-left: 1.2rem; }
.dialog li + li { margin-top: .35rem; }
.dialog .knopfzeile { margin-top: 18px; }

/* ---------- Gruppenseite: Eingabe oben ---------- */
.eingabe { margin: 0 0 2rem; padding: 20px; background: var(--flaeche); box-shadow: var(--schatten-m); }
.eingabe-titel { margin: 0 0 12px; font-size: 1.25rem; }
.eingabe-text { font-size: 1.05rem; line-height: 1.5; min-height: 10rem; }
.foto-bereich { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linie-zart); }
.foto-bereich p { margin: 8px 0 0; }
.foto-knopf { cursor: pointer; }
.foto-hinweis { padding: 10px 14px; border-radius: 12px; background: var(--t-lila); border: 1px solid var(--r-lila); font-size: 0.9062rem; }
.foto-dialog-kern { margin: 0 0 12px; padding: 12px 14px; font-size: 1.1rem; font-weight: 600; line-height: 1.4; background: var(--t-lila); border: 1px solid var(--r-lila); border-radius: 12px; }
.foto-form { margin-top: 8px; }
.foto-vorschau { display: block; max-width: 100%; max-height: 22rem; width: auto; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--grund); }
.bisherige .mini-titel .klein { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.8125rem; }

/* Fotos in der Beitragsliste */
.foto-link { display: block; margin: .5rem 0; }
.beitrag .foto { display: block; max-width: 100%; max-height: 28rem; width: auto; height: auto; border-radius: 10px; border: 1px solid var(--linie); }
.foto-unterschrift { font-style: italic; }

/* ---------- QR-Codes: Druckansicht ---------- */
.schalter { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.schalter input { width: 1.2rem; height: 1.2rem; accent-color: var(--lila); }
.qr-blatt { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 16px; margin-top: 1.5rem; }
.qr-karte { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); }
.qr-veranstaltung { margin: 0; font-size: 0.8125rem; color: var(--grau); }
.qr-name { margin: .2rem 0 .6rem; font-size: 1.35rem; line-height: 1.2; overflow-wrap: anywhere; }
.qr-code { display: block; width: 13rem; max-width: 100%; aspect-ratio: 1; }
.qr-code svg { display: block; width: 100%; height: 100%; }
.qr-hinweis { margin: .6rem 0 .15rem; font-size: 0.8125rem; }
.qr-link { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 0.75rem; overflow-wrap: anywhere; color: var(--tusche); }
/* Link auf der Karte: anklickbar am Bildschirm und im gespeicherten PDF (seit 1.17.2) */
.qr-link a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.qr-code-text { margin: .35rem 0 0; font-size: 0.8125rem; }
.qr-code-text strong { font-family: ui-monospace, Menlo, monospace; font-size: 1.15rem; letter-spacing: .08em; }
.qr-blatt.einzeln { grid-template-columns: 1fr; }
.qr-blatt.einzeln .qr-code { width: 20rem; }
.qr-blatt.einzeln .qr-name { font-size: 2rem; }

@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body.qr-seite { background: #fff; }
  body.qr-seite .nicht-drucken, body.qr-seite .fuss, body.qr-seite .sprung { display: none !important; }
  body.qr-seite .rahmen { max-width: none; padding: 0; margin: 0; }
  .qr-blatt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6mm; margin: 0; padding: 0 1mm; }
  .qr-karte { height: 84mm; justify-content: center; padding: 4mm; break-inside: avoid; page-break-inside: avoid; border: 1.5px solid #23253A; border-radius: 4mm; }
  .qr-code { width: 46mm; }
  .qr-name { font-size: 15pt; margin: 1mm 0 2mm; }
  .qr-veranstaltung, .qr-hinweis { font-size: 8.5pt; color: #333; }
  .qr-link { font-size: 7.5pt; }
  .qr-code-text { font-size: 9pt; } .qr-code-text strong { font-size: 12pt; }
  .qr-blatt.einzeln { grid-template-columns: 1fr; gap: 0; }
  .qr-blatt.einzeln .qr-karte { height: 270mm; border: none; break-after: page; page-break-after: always; }
  .qr-blatt.einzeln .qr-karte:last-child { break-after: auto; page-break-after: auto; }
  .qr-blatt.einzeln .qr-code { width: 125mm; }
  .qr-blatt.einzeln .qr-name { font-size: 32pt; margin-bottom: 8mm; }
  .qr-blatt.einzeln .qr-veranstaltung, .qr-blatt.einzeln .qr-hinweis { font-size: 13pt; }
  .qr-blatt.einzeln .qr-link { font-size: 11pt; }
  .qr-blatt.einzeln .qr-code-text { font-size: 14pt; } .qr-blatt.einzeln .qr-code-text strong { font-size: 22pt; }
}

/* ---------- Veranstaltungsseite: Bereiche als weiße Panels mit Farbpunkt ---------- */
.bereich { --punkt: var(--linie-stark); padding: 20px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); }
.bereich > h2 { margin-top: 0; display: flex; align-items: center; gap: 10px; }
.bereich > h2::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--punkt); flex: none; }
.bereich-aufgabe    { --punkt: var(--lila); }
.bereich-gruppen    { --punkt: var(--punkt-blau); }
.bereich-ergebnisse { --punkt: var(--punkt-gruen); }
.bereich-leitung    { --punkt: var(--punkt-lila); }
.bereich .kachel, .bereich .admin-gruppe { background: var(--flaeche); }
.bereich .kacheln .kachel { border: 1px solid var(--linie); box-shadow: var(--schatten-s); }
@media (max-width: 38rem) { .bereich { padding: 16px 14px; } }

/* Farbpunkte in der Sprungnavigation */
.sprungnavi a[class^="punkt-"]::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.sprungnavi .punkt-aufgabe::before    { background: var(--lila); }
.sprungnavi .punkt-gruppen::before    { background: var(--punkt-blau); }
.sprungnavi .punkt-ergebnisse::before { background: var(--punkt-gruen); }
.sprungnavi .punkt-leitung::before    { background: var(--punkt-lila); }

/* Neue Gruppe */
.neue-gruppe > summary { list-style: none; display: inline-flex; }
.neue-gruppe > summary::-webkit-details-marker { display: none; }
.neue-gruppe[open] > summary { display: none; }
.neue-gruppe-form { max-width: 36rem; padding: 18px; background: var(--flaeche); }
/* Seit 1.17.4: „Alle Links kopieren“ neben „+ Neue Gruppe“; ist das Formular offen, steht der Knopf darunter */
.gruppen-aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gruppen-aktionen > .neue-gruppe[open] { flex: 1 0 100%; }
.linkliste-meldung { flex: 1 0 100%; margin: 0; }
.linkliste-meldung:empty { display: none; }
.kopf .linkliste-meldung { margin-top: 10px; }

/* Einstellungsmenü mit Leitung; Export im Ergebnisbereich */
.menue-leitung { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linie-zart); }
.menue-leitung .leitfragenliste { list-style: none; margin: .4rem 0 .8rem; padding: 0; }
.menue-leitung .leitfragenliste li { justify-content: space-between; padding: .3rem 0; border-bottom: 1px solid var(--linie-zart); }
.export-zeile { margin: .2rem 0 .3rem; }

/* ---------- 1.10.0: Beiträge für die Gruppe unsichtbar ---------- */
.abzeichen-verborgen { background: var(--t-blau); }
.schalter-zeile { display: flex; align-items: center; gap: 10px; }
.schalter-zeile input[type=checkbox] { width: 1.3rem; height: 1.3rem; margin: 0; accent-color: var(--lila); flex: none; }
.schalter-zeile label { font-weight: 600; }
.sichtbarkeit { border-top: 1px solid var(--linie-zart); padding-top: 12px; }
.hinweis-verborgen { background: var(--t-blau); border-color: var(--r-blau); margin: 0 0 .8rem; }

/* ---------- 1.10.0: Präsentationsmodus ---------- */
.admin-gruppe-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .9rem; }
.admin-gruppe-kopf .admin-gruppe-titel { margin: 0; }
.admin-gruppe-kopf .knopf { flex: none; }

body.praesentation .seitenkopf, body.praesentation .fuss { display: none; }
body.praesentation .rahmen { max-width: none; padding: 1rem clamp(1rem, 3vw, 3rem) 3rem; }
.praes { --praes-groesse: 1; }
.praes-leiste { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 8px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); }
.praes-wechsel { display: inline-flex; gap: 6px; align-items: center; }
.praes-wechsel select { min-height: 40px; max-width: 16rem; }
.praes-kopf { margin: 1.4rem 0 1rem; }
.praes-kopf .dachzeile { font-size: calc(1rem * var(--praes-groesse)); }
.praes-kopf h1 { font-size: calc(2.6rem * var(--praes-groesse)); line-height: 1.15; }
.praes-aufgaben { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 1.4rem; padding: 14px 18px; background: var(--t-lila-2); border: 1px solid var(--r-lila); border-radius: var(--r-l); }
.praes-aufgabe { margin: 0; font-size: calc(1.05rem * var(--praes-groesse)); white-space: pre-wrap; overflow-wrap: anywhere; }
.praes-status { margin: 0 0 1rem; }
.praes-beitraege { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(22rem * var(--praes-groesse))), 1fr)); gap: 16px; align-items: start; }
.praes-karte { background: var(--flaeche); padding: 18px 20px; border: 1px solid var(--linie); border-radius: var(--r-l); box-shadow: var(--schatten-m); }
.praes-karte.typ-foto { grid-column: span 2; }
@media (max-width: 50rem) { .praes-karte.typ-foto { grid-column: auto; } }
.praes-text { margin: 0; font-size: calc(1.5rem * var(--praes-groesse)); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.praes-figur { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.praes-foto { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; border-radius: 10px; border: 1px solid var(--linie); }
.praes-meta { margin: .6rem 0 0; font-size: calc(.9rem * var(--praes-groesse)); color: var(--grau); }
.praes-leer { font-size: calc(1.2rem * var(--praes-groesse)); }
body.praes-vollbild { background: var(--grund); }

@media print {
  .praes-leiste { display: none; }
  .praes-karte { box-shadow: none; break-inside: avoid; }
}

/* Namen der Teilnehmer*innen (seit 1.12.0) */
.namen-bereich { margin: 0 0 1.5rem; padding: 18px 20px; background: var(--t-gruen); border: 1px solid var(--r-gruen); border-radius: var(--r-l); }
.namen-bereich .formular { margin: 0; }
.namen-bereich label.mini-titel { display: block; color: var(--tusche); }
.namen-bereich textarea { background: var(--flaeche); }
.namen-bereich .klein { margin: .4rem 0 0; }
.abzeichen-namen { background: var(--t-gruen); }
.admin-namen { margin: 0 0 .8rem; padding: 8px 12px; background: var(--t-gruen); border: 1px solid var(--r-gruen); border-radius: var(--r-s); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- 1.13.0: Gruppen-Kacheln öffnen ein Pop-up ---------- */
.kachel-knopf {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  min-height: 48px; padding: 12px 14px; font: inherit; color: var(--tusche); cursor: pointer;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); box-shadow: var(--schatten-s);
  transition: border-color .15s, background .15s;
}
.kachel-knopf { -webkit-tap-highlight-color: transparent; }
.kachel-knopf:hover { border-color: var(--r-lila); background: var(--t-lila-2); }
.kachel-knopf .kachel-name { font-weight: 600; font-size: 0.9688rem; }
.kachel-code-kurz { font-family: ui-monospace, Menlo, monospace; font-size: 0.8125rem; letter-spacing: .06em; color: var(--grau); }
.kachel-abzeichen { display: flex; flex-wrap: wrap; gap: 4px; }
.kachel-mehr { font-size: 0.8125rem; font-weight: 600; color: var(--lila); }
.kachel-mehr::after { content: " ›"; }
@media (prefers-reduced-motion: reduce) { .kachel-knopf { transition: none; } }

.gruppen-dialog { width: min(36rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); padding: 0; overflow: auto; overscroll-behavior: contain; }
.gruppen-dialog .dialog-kopf { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 12px 22px; background: var(--flaeche); border-bottom: 1px solid var(--linie-zart); }
.gruppen-dialog .dialog-kopf h2 { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.dialog-zu { flex: none; width: 44px; padding: 0; font-size: 1.125rem; }
.gruppen-dialog .kachel-inhalt { padding: 16px 22px 22px; border-top: 0; }
.dialog-fuss { justify-content: flex-end; border-top: 1px solid var(--linie-zart); padding-top: 14px; }
@media (max-width: 38rem) {
  .gruppen-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); margin: auto; }
  .gruppen-dialog .dialog-kopf { padding: 10px 8px 10px 16px; }
  .gruppen-dialog .kachel-inhalt { padding: 14px 16px 18px; }
  .kachel-fuss { flex-direction: column; align-items: stretch; }
  .kachel-fuss form, .kachel-fuss .knopf { width: 100%; }
}
body:has(dialog[open]) { overflow: hidden; }

/* ---------- 1.13.0: Ergebnisse einklappbar ---------- */
.klapp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; min-height: 44px; margin: -6px; padding: 6px; border-radius: var(--r-m); }
.klapp > summary::-webkit-details-marker { display: none; }
.klapp > summary:hover { background: var(--grund); }
.klapp-kopf h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.klapp-kopf h2::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--punkt); flex: none; }
.klapp-kurz { flex: 1 1 auto; }
.klapp-pfeil { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linie-stark); border-radius: 10px; background: var(--flaeche); }
.klapp-pfeil::before { content: "▾"; color: var(--tusche); transition: transform .15s; }
.klapp[open] .klapp-pfeil::before { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .klapp-pfeil::before { transition: none; } }
.klapp-inhalt { margin-top: 16px; }

/* ==========================================================================
   Kontenübersicht und Gäste (ab V1.16.0)
   ========================================================================== */
.konten-zahlen { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 12px; }
.konten-zahlen li { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); }
.konten-zahlen .zahl { font-family: var(--display); font-weight: 600; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.02em; }
.konten-zahlen .zahl-text { font-weight: 600; font-size: 0.9062rem; }
.konten-zahlen .zahl-zusatz { font-size: 0.7812rem; color: var(--grau); }
.konten-zahlen .zahl-warnung { background: var(--t-gelb-2); border-color: var(--r-gelb); }

.konten-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 14px; }
.reiter { display: inline-flex; gap: 4px; padding: 4px; background: var(--linie-zart); border-radius: 12px; }
.reiter a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 9px; text-decoration: none; font-weight: 600; font-size: 0.9062rem; color: var(--grau); }
.reiter a:hover { color: var(--tusche); background: rgba(255,255,255,.6); }
.reiter a[aria-current="page"] { background: var(--flaeche); color: var(--tusche); box-shadow: var(--schatten-s); }
.reiter-zahl { min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: var(--t-lila); font-size: 0.7812rem; line-height: 1.6; text-align: center; }
.konten-suche { flex: 1 1 14rem; display: flex; align-items: center; gap: 10px; }
.konten-suche input { flex: 1 1 auto; min-width: 0; max-width: 24rem; }
.konten-werkzeug > .knopf { margin-left: auto; }

.konten-kopfzeile, .konto-zeile { display: grid; grid-template-columns: 40px minmax(0, 2.4fr) 10rem 9.5rem minmax(0, 1.3fr) 7rem; gap: 6px 16px; align-items: center; }
.konten-kopfzeile.gaeste, .konten-liste.gaeste .konto-zeile { grid-template-columns: 40px minmax(0, 1.8fr) minmax(0, 2.2fr) minmax(0, 1.1fr) 11.5rem; }
.konten-kopfzeile { padding: 0 16px 8px; font-size: 0.7812rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--grau); }
.konten-kopfzeile span:first-child { grid-column: 2; }
.konten-liste { list-style: none; margin: 0; padding: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); overflow: hidden; }
.konto-zeile { padding: 12px 16px; border-top: 1px solid var(--linie-zart); }
.konto-zeile:first-child { border-top: 0; }
.konto-zeile:hover { background: var(--t-lila-2); }
.konto-zeile.ist-gesperrt { background: var(--grund); }
.konto-zeile.ist-gesperrt .konto-wer, .konto-zeile.ist-gesperrt .avatar { opacity: .6; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 0.9062rem; background: var(--t-blau); color: var(--tusche); }
.avatar-haupt { background: var(--lila); color: #fff; }
.avatar-leitung { background: var(--t-lila); }
.avatar-gast { background: var(--t-gruen); }
.konto-wer { display: flex; flex-direction: column; min-width: 0; }
.konto-wer strong { overflow-wrap: anywhere; }
.konto-wer .klein { overflow-wrap: anywhere; }
.konto-wer .fehlt { color: #7A1B15; }
.konto-zahl { font-variant-numeric: tabular-nums; }
.konto-status { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.konto-aktion { justify-self: end; }
.konto-aktion form { margin: 0; }
.konto-aktion.knopfzeile { gap: 6px; flex-wrap: nowrap; }
.nur-schmal { display: none; }
.rolle-haupt { background: var(--lila); color: #fff; }
.rolle-leitung { background: var(--t-lila); }
.rolle-gast, .abzeichen-gast { background: var(--t-gruen); }
.abzeichen-ich { background: var(--t-blau); font-size: 0.7188rem; margin-left: 4px; vertical-align: 2px; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8438rem; font-weight: 600; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grau); flex: none; }
.status-aktiv::before { background: #2E9E6A; }
.status-neu::before { background: var(--punkt-blau); }
.status-offen::before { background: #D9A400; }
.status-gesperrt { color: #7A1B15; }
.status-gesperrt::before { background: var(--rot); }
.konto-veranstaltungen { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.chip { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 3px 10px; border-radius: 999px; background: var(--t-lila-2); border: 1px solid var(--r-lila); font-size: 0.8125rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.chip:hover { background: var(--t-lila); }
.chip-datum { font-weight: 400; color: var(--grau); white-space: nowrap; }
.leer-gross { padding: 28px 20px; text-align: center; }
.leer-gross p { margin: 0 0 .3rem; }
.dialog-abschnitt { padding-top: 12px; border-top: 1px solid var(--linie-zart); }
.dialog-abschnitt form { margin: 0; }
.gefahrzone p { margin: 0 0 10px; }

@media (max-width: 52rem) {
  .konten-kopfzeile { display: none; }
  .konto-zeile, .konten-liste.gaeste .konto-zeile { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av wer akt" "av info info"; }
  .konto-zeile .avatar { grid-area: av; align-self: start; }
  .konto-wer { grid-area: wer; }
  .konto-aktion { grid-area: akt; align-self: start; }
  .konto-rolle, .konto-zahl, .konto-status, .konto-veranstaltungen { grid-column: 2 / -1; }
  .konto-rolle { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
  .konto-status { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
  .konto-zahl { font-size: 0.8438rem; color: var(--grau); }
  .nur-schmal { display: inline; }
  .konten-werkzeug > .knopf { margin-left: 0; }
}
@media (max-width: 30rem) {
  .konten-liste.gaeste .konto-zeile { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "av wer"; }
  .konten-liste.gaeste .konto-aktion { grid-area: auto; grid-column: 2; justify-self: start; }
  .konten-liste.gaeste .konto-veranstaltungen, .konten-liste.gaeste .konto-status { grid-column: 2; }
  .konten-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .konten-zahlen li { padding: 10px 12px; }
  .konten-zahlen .zahl { font-size: 1.375rem; }
  .konten-zahlen .zahl-text { font-size: 0.8125rem; line-height: 1.3; }
  .konten-zahlen .zahl-zusatz { display: none; }
  .konten-zahlen .zahl-warnung { grid-column: 1 / -1; }
  .reiter { width: 100%; }
  .reiter a { flex: 1 1 0; justify-content: center; }
  .konten-suche input { max-width: none; }
}

/* Gäste in der Veranstaltung */
.gast-hinweis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: .6rem 0 0; padding: 10px 14px; font-size: 0.875rem; background: var(--t-gruen); border: 1px solid var(--r-gruen); border-radius: 12px; }
.gaesteliste li { align-items: flex-start; gap: 6px 12px; }
.gast-wer { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.gaesteliste .zeile form { margin: 0; }

/* ---------- Bilder zur Aufgabe (seit 1.17.0) ---------- */
.aufgabe-bilder { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 10px; margin: .8rem 0 0; padding: 0; }
.aufgabe-bilder li { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.aufgabe-bild { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--r-lila); border-radius: var(--r-s); cursor: zoom-in; transition: box-shadow .15s, border-color .15s; }
.aufgabe-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.aufgabe-bild::after { content: ""; position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2483' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: 0 1px 3px rgba(35,37,58,.25); }
.aufgabe-bild:hover { border-color: var(--lila); box-shadow: var(--schatten-s); }
.aufgabe-bilder-hinweis { margin: .5rem 0 0; color: var(--grau); }
.aufgabe-bilder-verwalten { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linie-zart); }
.aufgabe-bilder-verwalten h3.mini-titel { margin: 0 0 .4rem; }
.aufgabe-bilder-admin { margin: .4rem 0 .8rem; }
.aufgabe-bilder-admin .aufgabe-bild { border-color: var(--linie); }
.aufgabe-bild-text { overflow-wrap: anywhere; color: var(--grau); }
.aufgabe-bilder-admin form { margin: 0; }
.aufgabe-bild-form { margin-top: .4rem; }
.aufgabe-bild-form input[type="file"] { max-width: 100%; }
.praes-bilder { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(11rem * var(--praes-groesse))), 1fr)); margin: .2rem 0 .3rem; }

/* Bild groß im Pop-up */
.bild-dialog { width: min(72rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); padding: 10px 12px 14px; overflow: auto; overscroll-behavior: contain; }
.bild-dialog::backdrop { background: rgba(35, 37, 58, .75); }
.bild-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 8px 6px; }
.bild-dialog-buehne { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bild-dialog-bild { display: block; max-width: 100%; height: auto; max-height: calc(100vh - 9rem); max-height: calc(100dvh - 9rem); width: auto; object-fit: contain; background: #fff; border-radius: var(--r-s); }
.bild-dialog-text { margin: 0; max-width: 60rem; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; }
.bild-dialog-blaettern { position: absolute; top: calc(50% - 1.6rem); width: 48px; height: 48px; padding: 0; font-size: 1.75rem; line-height: 1; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: var(--schatten-m); }
.bild-dialog-zurueck { left: 6px; }
.bild-dialog-vor { right: 6px; }
@media (max-width: 40rem) {
  .bild-dialog { width: calc(100vw - 12px); max-height: calc(100dvh - 12px); padding: 6px 6px 10px; }
  .bild-dialog-bild { max-height: calc(100dvh - 8rem); }
  .bild-dialog-blaettern { width: 42px; height: 42px; font-size: 1.5rem; }
}
.gruppen-dialog .aufgabe-bilder-verwalten { scroll-margin-top: 76px; }

/* Anklickbare Links in Aufgaben (seit 1.17.1) */
.text-link { color: var(--lila); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.text-link:hover { color: #4A1D6A; text-decoration-thickness: 2px; }
/* Gemeinsames Aufgaben-Formular (seit 1.17.1) */
.aufgabe-form fieldset.aufgabe-bilder-verwalten { margin: .9rem 0 0; padding: .9rem 0 0; border: 0; border-top: 1px solid var(--linie-zart); min-width: 0; }
.aufgabe-form fieldset.aufgabe-bilder-verwalten legend { padding: 0; margin-bottom: .4rem; }
.aufgabe-bilder-admin input[type="text"] { width: 100%; min-height: 38px; padding: 6px 10px; font-size: 0.875rem; }
.bild-entfernen { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 400; color: var(--grau); }
.bild-entfernen:has(input:checked) { color: #A1281F; font-weight: 600; }
.aufgabe-bilder-admin li:has(.bild-entfernen input:checked) .aufgabe-bild { opacity: .4; }
.neu-vorschau { cursor: default; }
.aufgabe-bilder-neu li.zu-viel { opacity: .45; }
.aufgabe-fehler { white-space: pre-line; }
.aufgabe-form > .knopfzeile { margin-top: 1rem; }