/* Ticketsystem – Erscheinungsbild wie Einsatzplanung, Lehrgangsverwaltung und Terminabfrage
   (Johanniter-Unfall-Hilfe e.V.): roter Kopf mit blauer Markenschräge,
   Maven Johanniter, weiße Karten auf hellgrauem Grund. */

@font-face { font-family: "Maven Johanniter"; src: url("schriften/MavenJohanniter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Maven Johanniter"; src: url("schriften/MavenJohanniter-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Maven Johanniter"; src: url("schriften/MavenJohanniter-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Maven Johanniter"; src: url("schriften/MavenJohanniter-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --juh: #eb003c;
  --juh-dunkel: #c40033;
  --stab: #000548;
  --signal: #deff00;
  --rot-50: #fff1f4;
  --rot-100: #ffccd8;
  --blau-100: #deeefc;
  --blau-300: #6084bf;
  --grau-100: #f0f0f0;
  --text: #16181d;
  --s800: #1e293b;
  --s700: #334155;
  --s600: #475569;
  --s500: #64748b;
  --s400: #94a3b8;
  --s300: #cbd5e1;
  --s200: #e2e8f0;
  --s100: #f1f5f9;
  --s50: #f8fafc;
  --ok-bg: #d6f2e4; --ok: #0b5236;
  --gelb-bg: #fff3b0; --gelb: #6b5200;
  --fehler-bg: var(--rot-100); --fehler: #8c0025;
  --radius: 0.25rem;
  --radius-gross: 0.5rem;
  --schrift: "Maven Johanniter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grau-100);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.5;
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--juh); text-decoration: none; }
a:hover { color: var(--juh-dunkel); text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; color: var(--s800); letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; font-weight: 600; }
h2 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 .8em; }
code { font-size: .85em; background: var(--s100); padding: .1em .35em; border-radius: var(--radius); word-break: break-all; }
[hidden], .versteckt { display: none !important; }

/* ------------------------------------------------------------------ Kopf */
.kopf {
  position: relative; overflow: hidden;
  background: var(--juh); color: #fff;
}
/* Markenschräge: harter Farbumschlag bei 21,26° gegen die Senkrechte */
.kopf::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(111.26deg, transparent 0 88%, var(--stab) 88% 100%);
}
.kopf-innen { position: relative; max-width: 1600px; margin: 0 auto; padding: 0 1.5rem; }
.kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; padding: .75rem 0; }
.marke { display: flex; align-items: center; gap: .75rem; color: #fff; }
.marke:hover { color: #fff; text-decoration: none; }
.marke-logo { height: 26px; width: auto; display: block; }
.marke-logo.eigenes { height: auto; max-height: 44px; max-width: 260px; }
.marke-titel { border-left: 1px solid rgba(255,255,255,.3); padding-left: .75rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
.bereiche { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .875rem; }
.bereiche a { color: #fff; opacity: .8; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.bereiche a:hover { opacity: 1; text-decoration: none; }
.bereiche a[aria-current] { opacity: 1; font-weight: 500; border-bottom-color: #fff; }
.konto { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.konto a { color: rgba(255,255,255,.85); }
.konto a:hover { color: #fff; text-decoration: none; }
.konto .kopf-verweis { border-bottom: 2px solid transparent; padding-bottom: 2px; }
.konto .kopf-verweis.aktiv { color: #fff; border-bottom-color: #fff; font-weight: 500; }
.rolle { margin-left: .35rem; background: rgba(255,255,255,.2); border-radius: var(--radius); padding: .1rem .4rem; font-size: .75rem; }
.kopf-knopf { background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: var(--radius); padding: .25rem .5rem; font: inherit; font-size: .75rem; font-weight: 500; cursor: pointer; }
.kopf-knopf:hover { background: rgba(255,255,255,.25); }
.kopf-org { margin-left: auto; font-size: .875rem; opacity: .85; }
.unterpunkte { display: flex; flex-wrap: wrap; gap: .25rem; border-top: 1px solid rgba(255,255,255,.2); padding: .375rem 0; font-size: .875rem; }
.unterpunkte a { color: #fff; opacity: .8; border-radius: var(--radius); padding: .125rem .5rem; }
.unterpunkte a:hover { opacity: 1; background: rgba(255,255,255,.1); text-decoration: none; }
.unterpunkte a[aria-current] { opacity: 1; background: rgba(255,255,255,.2); font-weight: 500; }

/* Musterbetrieb: Signalgelb mit blauer Schrift (Markenfarben) */

/* ------------------------------------------------------------------ Rahmen */
.inhalt { width: 100%; max-width: 1600px; margin: 0 auto; padding: 1.5rem; flex: 1; }
.bereich-oeffentlich .inhalt { max-width: 1100px; }
.fuss { text-align: center; font-size: .8rem; color: var(--s500); padding: 1.5rem 1rem 2rem; }
.fuss a { color: var(--s500); }
.fuss-adresse { color: var(--stab); font-weight: 600; }
.kachel-hinweis { display: inline-block; align-self: flex-start; font-size: .78rem; font-weight: 600; color: #7a4a00; background: #fff4d6; border: 1px solid #f0d48a; border-radius: var(--radius); padding: .05rem .45rem; margin-top: .3rem; }
.kachel-adresse { display: block; font-size: .8rem; color: var(--s500); margin-top: .15rem; overflow-wrap: anywhere; }

.karte {
  background: #fff; border: 1px solid var(--s200); border-radius: var(--radius-gross);
  padding: 1.25rem; margin-bottom: 1.25rem;
}
.karte.flach { padding: 0; overflow: hidden; }
.karte.schmal { max-width: 460px; margin: 2rem auto; }
.karte.hervorgehoben { border-color: var(--juh); background: var(--rot-50); }
.karte.gefahr { border-color: var(--rot-100); }
.karte > :last-child { margin-bottom: 0; }

.kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.kopfzeile h1, .kopfzeile h2, .kopfzeile p { margin: 0; }
.ohne-abstand { margin: 0; }

.oberzeile { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--s500); margin: 0 0 .25rem; font-weight: 500; }
.untertitel { color: var(--s600); font-size: 1.05rem; }
.leise { color: var(--s500); }
.klein, .klein td { font-size: .8125rem; }
.nowrap { white-space: nowrap; }
.rechts { text-align: right; }
.mitte { text-align: center; }
.kritisch { color: var(--fehler); font-weight: 500; }
.fliesstext { white-space: normal; }
.leer { color: var(--s500); text-align: center; padding: 1.5rem; }

.raster { display: grid; gap: 0 1rem; }
.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.raster > .karte { margin-bottom: 1.25rem; }

/* ------------------------------------------------------------------ Tabellen */
.tabelle-rahmen { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabelle th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--s500); font-weight: 500; border-bottom: 1px solid var(--s200); padding: .6rem .75rem; background: #fff;
}
.tabelle td { border-bottom: 1px solid var(--s100); padding: .55rem .75rem; vertical-align: top; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: var(--s50); }
.tabelle tr.gedaempft td { color: var(--s400); }
.karte > .tabelle th:first-child, .karte > .tabelle td:first-child { padding-left: 0; }


/* ------------------------------------------------------------------ Status-Etiketten */
.status {
  display: inline-block; border-radius: var(--radius); padding: .1rem .45rem;
  font-size: .75rem; font-weight: 500; white-space: nowrap; background: var(--grau-100); color: var(--s600);
}
.status-admin { background: var(--stab); color: #fff; }
.status-anwender { background: var(--blau-100); color: var(--stab); }

/* ------------------------------------------------------------------ Meldungen */
.meldung { border-radius: var(--radius); padding: .6rem .9rem; margin-bottom: 1rem; font-size: .9rem; border: 1px solid transparent; }
.meldung-ok { background: var(--ok-bg); color: var(--ok); border-color: #a9e0c4; }
.meldung-hinweis { background: #fffbeb; color: #78350f; border-color: #fde68a; }
.meldung-fehler { background: var(--rot-50); color: var(--fehler); border-color: var(--rot-100); }

/* ------------------------------------------------------------------ Knöpfe */
.knopf, button.knopf {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--s300); background: #fff; color: var(--s700);
  border-radius: var(--radius); padding: .4rem .8rem; font: inherit; font-size: .875rem; line-height: 1.3;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.knopf:hover { border-color: var(--juh); color: var(--juh); text-decoration: none; }
.knopf.primaer { background: var(--juh); border-color: var(--juh); color: #fff; font-weight: 500; }
.knopf.primaer:hover { background: var(--juh-dunkel); border-color: var(--juh-dunkel); color: #fff; }
.knopf.gefahr { color: var(--fehler); border-color: var(--rot-100); }
.knopf.gefahr:hover { background: var(--rot-50); border-color: var(--juh); }
.knopf.klein { padding: .2rem .55rem; font-size: .78rem; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.knopfleiste { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
form.inline { display: inline; }
.aktionsleiste { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; padding: .9rem 1.25rem; }
.aktionsleiste label { margin: 0; }
.klebend { position: sticky; bottom: .75rem; z-index: 5; box-shadow: 0 4px 16px rgba(0,5,72,.08); }

/* ------------------------------------------------------------------ Formulare */
.formular label, label { display: block; font-size: .8125rem; font-weight: 500; color: var(--s700); margin-bottom: .85rem; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  display: block; width: 100%; margin-top: .25rem;
  border: 1px solid var(--s300); border-radius: var(--radius); background: #fff; color: var(--text);
  padding: .45rem .6rem; font: inherit; font-size: .9rem; font-weight: 400;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--juh); outline-offset: -1px; border-color: var(--juh); }
input:disabled, select:disabled, textarea:disabled { background: var(--grau-100); color: var(--s500); }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--text); }
textarea { resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--juh); width: 1rem; height: 1rem; }
label.checkbox { display: flex; gap: .55rem; align-items: flex-start; font-weight: 400; font-size: .9rem; color: var(--text); }
label.checkbox input { margin-top: .2rem; flex: none; }
fieldset { border: 1px solid var(--s200); border-radius: var(--radius); margin: 0 0 .85rem; padding: .5rem .75rem; }
fieldset.ohne-rahmen { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: .8125rem; font-weight: 500; color: var(--s700); padding: 0 .25rem; }
.inline-formular { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.inline-formular input, .inline-formular select { width: auto; margin: 0; }
.zeilenformular { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: flex-end; }
.zeilenformular label { margin: 0; }
.zeilenformular label.breit { flex: 1 1 16rem; }
details { border-top: 1px solid var(--s100); padding: .6rem 0; }
details summary { cursor: pointer; font-weight: 500; color: var(--s800); margin-bottom: .5rem; }
.sprungmarken { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: 1rem; font-size: .875rem; }
pre.vorschau { background: var(--s50); border: 1px solid var(--s200); border-radius: var(--radius); padding: .6rem .8rem; font-family: var(--schrift); font-size: .85rem; white-space: pre-wrap; margin: 0 0 .85rem; }

/* Segmentierte Auswahl */
.segmente { display: inline-flex; border: 1px solid var(--s300); border-radius: var(--radius); overflow: hidden; }
.segmente label { margin: 0; }
.segmente input { position: absolute; opacity: 0; pointer-events: none; }
.segmente span { display: block; padding: .25rem .6rem; font-size: .78rem; font-weight: 500; color: var(--s600); cursor: pointer; border-left: 1px solid var(--s200); }
.segmente label:first-child span { border-left: 0; }
.segmente input:checked + span { background: var(--juh); color: #fff; }
.segmente label:first-child input:checked + span { background: var(--s500); }

/* ------------------------------------------------------------------ Listen */
.eckdaten { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0 0 1rem; font-size: .9rem; }
.eckdaten dt { color: var(--s500); }
.eckdaten dd { margin: 0; }
.liste-schlicht { list-style: none; padding: 0; margin: 0; }
.liste-schlicht li { padding: .45rem 0; border-bottom: 1px solid var(--s100); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.liste-schlicht li:last-child { border-bottom: 0; }
.pruefliste { list-style: none; padding: 0; }
.pruefliste .ok { color: var(--ok); }
.pruefliste .fehlt { color: var(--fehler); font-weight: 600; }
.filter { display: flex; flex-wrap: wrap; gap: .25rem; }
.filter a { font-size: .85rem; padding: .25rem .65rem; border-radius: var(--radius); color: var(--s600); border: 1px solid var(--s200); background: #fff; }
.filter a:hover { border-color: var(--juh); color: var(--juh); text-decoration: none; }
.filter a.aktiv { background: var(--stab); border-color: var(--stab); color: #fff; }

.meldung-neu { background: var(--blau-100); color: var(--stab); border-color: #b9d6f2; }
.punkt-neu { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--signal); margin-left: .15rem; vertical-align: middle; }
.version-kopf { display: flex; gap: 1rem; align-items: center; }
.version-kopf h2 { margin: 0; }
.version-nummer { flex: none; min-width: 4.2rem; text-align: center; background: var(--stab); color: #fff; font-weight: 600; border-radius: var(--radius); padding: .3rem .5rem; font-variant-numeric: tabular-nums; }
.version.hervorgehoben .version-nummer { background: var(--juh); }
.aenderungsliste { list-style: none; margin: .75rem 0 0; padding: 0; }
.aenderungsliste li { display: grid; grid-template-columns: 11rem 1fr; gap: .25rem 1rem; padding: .45rem 0; border-top: 1px solid var(--s100); line-height: 1.45; }
.bereich-etikett { font-size: .75rem; font-weight: 600; color: var(--s600); text-transform: uppercase; letter-spacing: .03em; padding-top: .1rem; overflow-wrap: anywhere; }
@media (max-width: 600px) { .aenderungsliste li { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Seitenkopf, allgemeine Bausteine */
.seiten-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.seiten-kopf h1 { margin: 0; overflow-wrap: anywhere; }
.kopf-org { margin-left: auto; font-size: .875rem; opacity: .85; text-align: right; line-height: 1.25; }
.kopf-org small { font-size: .75rem; opacity: .85; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.datenschutz-hinweis { font-size: .8rem; color: var(--s500); }
.link-feld { display: flex; gap: .5rem; align-items: stretch; }
.link-feld input { margin: 0 !important; font-size: .8rem !important; }
.hinweis-box { font-size: .85rem; background: var(--blau-100); color: var(--stab); border-radius: var(--radius); padding: .6rem .8rem; margin: 0 0 1rem; }
.zaehler-punkt { display: inline-block; min-width: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--signal); color: var(--stab); font-size: .7rem; font-weight: 700; text-align: center; line-height: 1.15rem; }
.anleitung h2 { margin-top: 1.25rem; }
.anleitung h2:first-of-type { margin-top: .5rem; }
.anleitung li { margin-bottom: .3rem; }
.pflicht { color: var(--juh); font-weight: 600; }
h2.abschnitt { margin: 1.5rem 0 .75rem; font-size: 1rem; }
.status-bearbeitung { background: var(--blau-100); color: var(--stab); }
.status-offen { background: var(--ok-bg); color: var(--ok); }
.status-geschlossen { background: var(--gelb-bg); color: var(--gelb); }

/* Kennzahlen (Aktualisierung & Sicherung) */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.kennzahl { background: #fff; border: 1px solid var(--s200); border-radius: var(--radius-gross); padding: .75rem 1rem; display: flex; flex-direction: column; }
.kennzahl .zahl { font-size: 1.6rem; font-weight: 600; color: var(--s800); font-variant-numeric: tabular-nums; }
.kennzahl > span:last-child { font-size: .75rem; color: var(--s500); text-transform: uppercase; letter-spacing: .04em; }
.ticket-titel { font-weight: 500; color: var(--s800); }

/* ------------------------------------------------------------------ Etiketten */
.status-punkt { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 500; color: var(--s700); white-space: nowrap;
  background: color-mix(in srgb, var(--f) 12%, #fff); border: 1px solid color-mix(in srgb, var(--f) 35%, #fff); border-radius: 999px; padding: .05rem .55rem .05rem .45rem; }
.status-punkt::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--f); }
.typ-etikett { display: inline-block; font-size: .72rem; font-weight: 600; color: var(--f); background: color-mix(in srgb, var(--f) 10%, #fff);
  border-radius: var(--radius); padding: .05rem .4rem; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.gruppe-etikett { display: inline-block; font-size: .72rem; font-weight: 500; color: var(--s700); border: 1px solid color-mix(in srgb, var(--f) 45%, #fff);
  background: color-mix(in srgb, var(--f) 8%, #fff); border-radius: 999px; padding: 0 .45rem; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.prio { display: inline-block; font-size: .72rem; font-weight: 600; border-radius: var(--radius); padding: .05rem .4rem; white-space: nowrap; }
.prio-niedrig { background: var(--s100); color: var(--s500); }
.prio-normal { background: var(--s100); color: var(--s700); }
.prio-hoch { background: var(--gelb-bg); color: var(--gelb); }
.prio-dringend { background: var(--juh); color: #fff; }
.faellig { font-size: .78rem; color: var(--s600); white-space: nowrap; }
.faellig.heute { color: var(--gelb); font-weight: 600; }
.faellig.ueberfaellig { color: var(--fehler); font-weight: 600; }
.neu-punkt { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--juh); vertical-align: middle; margin-left: .25rem; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; flex: none;
  background: var(--stab); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .02em; }
.avatar.ich { background: var(--juh); }
.avatar.frei { background: #fff; color: var(--s400); border: 1px dashed var(--s300); }
.avatar.melder { background: var(--blau-300); }
.etiketten { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-top: .5rem; }

/* ------------------------------------------------------------------ Filter */
.filterleiste { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filterleiste input, .filterleiste select { width: auto; margin: 0; font-size: .85rem; padding: .35rem .5rem; }
.filterleiste input[type="search"] { flex: 1 1 14rem; max-width: 22rem; }
.schnellfilter .zahl { display: inline-block; min-width: 1.2rem; text-align: center; font-size: .72rem; font-weight: 600; border-radius: 999px; background: var(--s100); color: var(--s700); padding: 0 .3rem; margin-left: .15rem; }
.schnellfilter a.aktiv .zahl { background: rgba(255,255,255,.25); color: #fff; }
.schnellfilter a.warnung { border-color: var(--rot-100); color: var(--fehler); }
.schnellfilter a.warnung .zahl { background: var(--rot-100); color: var(--fehler); }

/* ------------------------------------------------------------------ Kanban */
.board { display: flex; gap: .9rem; overflow-x: auto; padding-bottom: .75rem; align-items: flex-start; min-height: 50vh; scroll-snap-type: x proximity; }
.spalte { flex: 1 0 17rem; max-width: 24rem; background: var(--s100); border-radius: var(--radius-gross); border-top: 3px solid var(--f); display: flex; flex-direction: column; max-height: calc(100vh - 13rem); scroll-snap-align: start; transition: background .15s; }
.spalte.ziel { background: color-mix(in srgb, var(--f) 12%, var(--s100)); outline: 2px dashed var(--f); outline-offset: -2px; }
.spalte-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem .4rem; }
.spalte-kopf h2 { margin: 0; font-size: .9rem; }
.spalte-zahl { font-size: .75rem; font-weight: 600; color: var(--s600); background: #fff; border-radius: 999px; padding: 0 .5rem; }
.spalte-karten { display: flex; flex-direction: column; gap: .5rem; padding: .25rem .5rem .6rem; overflow-y: auto; min-height: 4rem; }
.spalte-leer { color: var(--s400); font-size: .8rem; text-align: center; margin: .75rem 0; }
.spalte-fuss { display: block; font-size: .75rem; text-align: center; padding: .4rem .5rem .6rem; color: var(--s600); }
.spalte-erledigt .karte-ticket { opacity: .8; }
.karte-ticket { background: #fff; border: 1px solid var(--s200); border-left: 4px solid var(--typ); border-radius: var(--radius); padding: .55rem .65rem; cursor: grab;
  box-shadow: 0 1px 2px rgba(0,5,72,.05); transition: box-shadow .15s, transform .15s; display: flex; flex-direction: column; gap: .35rem; }
.karte-ticket:hover { box-shadow: 0 3px 10px rgba(0,5,72,.1); }
.karte-ticket.zieht { opacity: .35; }
.karte-ticket.speichert { opacity: .6; }
.karte-ticket.gespeichert { box-shadow: 0 0 0 2px var(--ok); }
.karte-ticket.ungelesen { background: var(--rot-50); }
.karte-ticket.prio-rand-dringend { box-shadow: inset 0 2px 0 var(--juh); }
.karte-oben { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.karte-oben .nummer { font-size: .72rem; color: var(--s500); font-variant-numeric: tabular-nums; flex: none; }
.karte-oben .typ-etikett { min-width: 0; }
.karte-oben .neu-punkt { margin-left: auto; flex: none; }
.karte-titel { color: var(--s800); font-weight: 500; font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.karte-titel:hover { color: var(--juh); }
.karte-unten { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; font-size: .78rem; }
.karte-unten .avatar { margin-left: auto; }

/* ------------------------------------------------------------------ Ticket */
.ticket-raster { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
.ticket-seite .karte { padding: 1rem; }
.ticket-seite h2 { font-size: .95rem; }
.ticket-seite details.karte summary { margin: 0; }
.ticket-seite details.karte[open] summary { margin-bottom: .5rem; }
.beschreibung { font-size: .95rem; overflow-wrap: anywhere; margin-bottom: 1rem; }
.beschreibung:last-child { margin-bottom: 0; }
.felder-anzeige { border-top: 1px solid var(--s100); padding-top: .9rem; }
.felder-anzeige:first-child { border-top: 0; padding-top: 0; }
.wertliste { margin: 0; padding-left: 1.1rem; }

.verlauf { list-style: none; margin: 0 0 1rem; padding: 0; position: relative; }
.verlauf::before { content: ""; position: absolute; left: .85rem; top: 0; bottom: 0; width: 2px; background: var(--s200); }
.verlauf > li { position: relative; margin-bottom: .75rem; }
.ereignis { font-size: .8rem; color: var(--s600); padding: .15rem 0 .15rem 2.3rem; }
.ereignis::before { content: ""; position: absolute; left: .6rem; top: .55rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--s300); border: 2px solid var(--grau-100); }
.beitrag { background: #fff; border: 1px solid var(--s200); border-radius: var(--radius-gross); padding: .75rem .9rem; margin-left: 2.3rem; }
.beitrag-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem; font-size: .85rem; margin-bottom: .4rem; }
.beitrag-kopf .avatar { position: absolute; left: -2.3rem; top: .6rem; box-shadow: 0 0 0 3px var(--grau-100); }
.beitrag-kopf time { margin-left: auto; font-size: .78rem; }
.beitrag-art { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--s500); }
.beitrag-text { font-size: .92rem; overflow-wrap: anywhere; }
.beitrag-kommentar { background: #fffbeb; border-color: #fde68a; }
.beitrag-kommentar .beitrag-art { color: #92400e; }
.beitrag-antwort { border-color: #b9d6f2; background: #f5faff; }
.beitrag-antwort .beitrag-art { color: var(--stab); }
.beitrag-melder { border-left: 3px solid var(--blau-300); }

.anhaenge { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .85rem; }
.anhaenge li { display: flex; flex-direction: column; gap: .2rem; max-width: 16rem; overflow-wrap: anywhere; }
.anhang-bild img { display: block; max-width: 10rem; max-height: 7.5rem; border-radius: var(--radius); border: 1px solid var(--s200); object-fit: cover; }

.eintrag-form { margin-top: .5rem; }
.eintrag-form.ist-antwort { border-color: #b9d6f2; box-shadow: inset 0 3px 0 var(--stab); }
.eintrag-art { margin-bottom: .5rem; }
.eintrag-art span { padding: .35rem .75rem; font-size: .82rem; }
.eintrag-form .segmente label:first-child input:checked + span { background: #92400e; }
.eintrag-form .segmente input:disabled + span { opacity: .45; cursor: not-allowed; }
.eintrag-unten { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin-top: .75rem; }
.eintrag-unten .danach { margin: 0; }
.eintrag-unten .danach select { width: auto; }
.eintrag-unten button { margin-left: auto; }
.eintrag-unten [data-dateiliste] { flex: 1 1 12rem; }
.datei-wahl { margin: 0; cursor: pointer; border: 1px dashed var(--s300); border-radius: var(--radius); padding: .4rem .7rem; background: var(--s50); font-weight: 500; }
.datei-wahl:hover { border-color: var(--juh); color: var(--juh); }
.datei-wahl input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.datei-wahl:focus-within { outline: 2px solid var(--juh); }

/* Typauswahl */
.typ-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.typ-kachel { display: flex; flex-direction: column; gap: .3rem; background: #fff; border: 1px solid var(--s200); border-top: 4px solid var(--f); border-radius: var(--radius-gross);
  padding: 1rem 1.1rem; color: var(--text); transition: box-shadow .15s, transform .15s; }
.typ-kachel:hover { text-decoration: none; color: var(--text); box-shadow: 0 4px 14px rgba(0,5,72,.1); transform: translateY(-1px); }
.typ-kachel strong { font-size: 1.05rem; color: var(--s800); }
.typ-kachel span { font-size: .85rem; color: var(--s600); }

/* Feld-Editor */
.feld-editor { list-style: none; margin: 0 0 .75rem; padding: 0; }
.feld-zeile { display: flex; gap: .5rem; border: 1px solid var(--s200); border-radius: var(--radius-gross); background: var(--s50); padding: .65rem .75rem; margin-bottom: .6rem; }
.feld-zeile .griff { color: var(--s400); padding-top: 1.4rem; user-select: none; }
.feld-inhalt { flex: 1; min-width: 0; }
.feld-reihe { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: flex-end; }
.feld-reihe label { margin-bottom: .45rem; }
.feld-reihe label.breit { flex: 1 1 14rem; }
.feld-reihe label.checkbox { margin-bottom: .7rem; }
.feld-knoepfe { display: flex; gap: .25rem; margin: 0 0 .5rem auto; }
.knopf.symbol { padding: .2rem .5rem; }
.spalten-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0 1rem; }
.spalten-liste label { margin-bottom: .35rem; }
fieldset.feld-mehrfach label.checkbox { margin-bottom: .3rem; }

/* ------------------------------------------------------------------ Öffentliche Seiten */
.melde-kopf { text-align: center; max-width: 42rem; margin: 1rem auto 1.5rem; }
.melde-kopf h1 { font-size: 1.9rem; }
.melde-form, .melde-ticket { border-top: 4px solid var(--f, var(--juh)); }
.melde-form h2 { margin-top: 1.25rem; font-size: 1rem; }
.melde-ticket h1 { font-size: 1.6rem; overflow-wrap: anywhere; }
.stand { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: 1rem; font-size: .9rem; }
.danke h2 { color: var(--stab); }

/* ------------------------------------------------------------------ Schmale Bildschirme */
@media (max-width: 1000px) {
  .ticket-raster { grid-template-columns: 1fr; }
  .ticket-seite { order: -1; }
}
@media (max-width: 900px) {
  .raster-2, .raster-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .inhalt { padding: 1rem; }
  .kopf-innen { padding: 0 1rem; }
  .kopf-org { display: none; }
  .kopf-zeile { gap: .4rem 1rem; }
  .konto { margin-left: 0; width: 100%; flex-wrap: wrap; gap: .35rem .9rem; font-size: .8125rem; }
  .konto a, .konto .kopf-verweis { white-space: nowrap; }
  .konto .rolle { display: none; }
  .konto form { margin-left: auto; }
  .spalte { flex-basis: 82vw; max-height: none; }
  .filterleiste select, .filterleiste input[type="search"] { flex: 1 1 45%; max-width: none; }
  .beitrag { margin-left: 0; }
  .verlauf::before, .beitrag-kopf .avatar { display: none; }
  .ereignis { padding-left: 1rem; }
  .ereignis::before { left: 0; }
  .eintrag-unten button { margin-left: 0; width: 100%; justify-content: center; }
  .feld-zeile .griff { display: none; }
}

/* ------------------------------------------------------------------ Druck */
@media print {
  .kopf, .fuss, .nicht-drucken, .knopfleiste, .unterpunkte, .meldung, form, .ticket-seite { display: none !important; }
  body { background: #fff; font-size: 11px; }
  .inhalt { padding: 0; max-width: none; }
  .karte { border: 0; padding: 0; }
  .ticket-raster { display: block; }
}

/* ------------------------------------------------------------------ 1.2: Ansichten, Eskalation, Verknüpfungen, Auswertung */
.board-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .5rem 1rem; }
.board-leiste .filterleiste { flex: 1 1 auto; }
.ansicht-wahl { align-items: center; margin-bottom: 1rem; background: #fff; }
.ansicht-wahl .ansicht-titel { font-size: .75rem; color: var(--s500); padding: 0 .6rem; }
.ansicht-wahl a { display: block; padding: .3rem .65rem; font-size: .8rem; font-weight: 500; color: var(--s600); border-left: 1px solid var(--s200); }
.ansicht-wahl a:hover { text-decoration: none; color: var(--juh); }
.ansicht-wahl a.aktiv { background: var(--stab); color: #fff; }
.spalte-status { font-size: .72rem; color: var(--s500); margin: -.25rem .75rem .3rem; }
.eskaliert-zeichen { color: var(--fehler); font-weight: 700; font-size: .8rem; flex: none; }
.eskaliert { font-size: .78rem; font-weight: 600; color: var(--fehler); background: var(--rot-50); border-radius: var(--radius); padding: .05rem .45rem; }
.schlummert { font-size: .78rem; color: var(--s600); background: var(--s100); border-radius: var(--radius); padding: .05rem .45rem; white-space: nowrap; }
.textbaustein-wahl { width: auto !important; max-width: 100%; margin: 0 0 .5rem !important; font-size: .82rem !important; }
.verknuepfungen li { font-size: .85rem; gap: .25rem .5rem; }
.verknuepfungen li > a { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.verknuepfungen .erledigt-link { text-decoration: line-through; color: var(--s500); }
.link-form { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0; }
.link-form select, .link-form input { width: auto !important; margin: 0 !important; font-size: .82rem !important; padding: .3rem .4rem !important; }
.link-form input { flex: 1 1 6rem; min-width: 6rem; }
.stufe-satz { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-bottom: .85rem; font-size: .9rem; }
.stufe-satz select, .stufe-satz input { width: auto !important; margin: 0 !important; }
.stufe-empfaenger { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1rem; }
.stufe.gedaempft { opacity: .65; }
.diagramm { width: 100%; height: auto; display: block; margin: .5rem 0; }
.diagramm .raster-linie { stroke: var(--s100); stroke-width: 1; }
.diagramm .grundlinie { stroke: var(--s300); stroke-width: 1; }
.diagramm .achse { font-size: 11px; fill: var(--s500); font-family: var(--schrift); }
.diagramm .saeule:hover path { opacity: .8; }
.legende { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8rem; color: var(--s600); }
.legende i { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: -.05rem; }
.tabellen-titel { padding: .9rem 1rem 0; margin: 0; font-size: 1rem; }
.rangliste { margin: 0; padding-left: 1.3rem; }
.rangliste li { padding: .25rem 0; border-bottom: 1px solid var(--s100); }
.rangliste li .rechts { float: right; font-variant-numeric: tabular-nums; }
.textbaustein textarea { font-size: .88rem; }

/* ------------------------------------------------------------------ 1.3: Mehrfachbearbeitung, Ansichten, Meine Meldungen */
.auswahl-spalte { width: 1%; padding-right: 0 !important; }
.mehrfach-leiste { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; padding: .75rem 1rem;
  background: var(--stab); color: #fff; border-radius: 0 0 var(--radius-gross) var(--radius-gross); font-size: .85rem; }
.mehrfach-leiste select, .mehrfach-leiste input[type="date"] { width: auto; margin: 0; font-size: .82rem; padding: .3rem .4rem; }
.mehrfach-leiste label { color: #fff; margin: 0; display: inline-flex; gap: .35rem; align-items: center; font-weight: 400; }
.mehrfach-leiste label.checkbox span { color: #fff; font-size: .8rem; }
.mehrfach-leiste .knopf.primaer { margin-left: auto; }
.objekt-hinweis { font-size: 1rem; color: var(--s700); margin: -.2rem 0 .8rem; }
.ansichten { position: relative; }
.ansichten summary { list-style: none; cursor: pointer; margin: 0; }
.ansichten summary::-webkit-details-marker { display: none; }
.ansichten[open] .ansichten-menue { display: block; }
.ansichten { border: 0; padding: 0; }
.ansichten-menue { position: absolute; z-index: 20; top: calc(100% + .3rem); left: 0; min-width: 17rem; background: #fff; border: 1px solid var(--s200); border-radius: var(--radius-gross);
  box-shadow: 0 8px 24px rgba(0,5,72,.12); padding: .5rem; }
.ansichten-menue ul { list-style: none; margin: 0 0 .5rem; padding: 0; }
.ansichten-menue li { display: flex; align-items: center; gap: .4rem; padding: .2rem .3rem; border-radius: var(--radius); font-size: .85rem; }
.ansichten-menue li:hover { background: var(--s50); }
.ansichten-menue li a { flex: 1; color: var(--s800); }
.ansichten-menue li .leise { font-size: .72rem; }
.ansichten-menue form.speichern { border-top: 1px solid var(--s100); padding-top: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.ansichten-menue form.speichern input[type="text"] { margin: 0; font-size: .85rem; padding: .3rem .45rem; }
.ansichten-menue label.checkbox { margin: 0; font-size: .8rem; }
.meine-liste .tabelle td { vertical-align: middle; }
.wieder-oeffnen { display: inline-flex; gap: .35rem; align-items: center; }
.wieder-oeffnen select { width: auto; margin: 0; font-size: .85rem; padding: .35rem .4rem; }

/* ================================================================ Zentrale Anmeldung */

.anmeldung h1 { margin-bottom: 0.25rem; }
.anmeldung .fuer { margin: 0 0 1rem; color: var(--s600); }
.code-feld { font-size: 1.4rem; letter-spacing: 0.25em; font-variant-numeric: tabular-nums; max-width: 12rem; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.kacheln .kachel { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.2rem; background: #fff; border: 1px solid var(--s200); border-top: 4px solid var(--juh); border-radius: var(--radius-gross); color: var(--text); text-decoration: none; transition: box-shadow 0.15s, transform 0.15s; }
.kacheln .kachel:hover { box-shadow: 0 4px 14px rgb(0 5 72 / 0.12); transform: translateY(-1px); }
.kacheln .kachel[aria-disabled="true"] { pointer-events: none; opacity: 0.6; }
.kachel-titel { font-weight: 700; font-size: 1.1rem; color: var(--stab); }
.kachel-text { color: var(--s600); font-size: 0.9rem; }
.kacheln .kachel .status { align-self: flex-start; }

.matrix select { min-width: 7.5rem; padding: 0.2rem 0.35rem; font-size: 0.9rem; }
.matrix select.geaendert { outline: 2px solid var(--signal); background: #fbffe0; }
.matrix td:first-child { min-width: 13rem; }
.status-normal { background: var(--blau-100); color: var(--stab); }
.text-warnung { color: var(--fehler); font-weight: 600; }
.text-fehler { color: var(--juh); font-weight: 600; }
.text-ok { color: #1f7a3a; }

.notfallcodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1.5rem; list-style: none; padding: 0; font-size: 1.1rem; }
.qr { margin: 0.75rem 0; }
.qr svg { width: 200px; height: auto; background: #fff; padding: 8px; border: 1px solid var(--s200); }
.schritte li { margin-bottom: 0.75rem; }
code.geheimnis { word-break: break-all; font-size: 1rem; }

dl.angaben { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin: 0 0 1rem; }
dl.angaben dt { color: var(--s600); }
dl.angaben dd { margin: 0; }
dl.angaben dd code { word-break: break-all; }
@media (max-width: 40rem) { dl.angaben { grid-template-columns: 1fr; } dl.angaben dd { margin-bottom: 0.5rem; } }

iframe.unsichtbar { position: absolute; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }

@media print {
  .kopf, .fuss, .knopfleiste { display: none !important; }
}

.kacheln .kachel-link { border-top-color: var(--blau-300); }
.link-zeile { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.4rem; padding: 0.6rem 0; border-bottom: 1px solid var(--s200); }
.link-zeile input[type=number] { max-width: 6rem; }
.link-zeile .knopfleiste { margin: 0; align-self: center; }
@media (max-width: 40rem) { .link-zeile { grid-template-columns: 1fr; } }

.zugang-zeile { display: grid; grid-template-columns: 1fr 11rem; gap: 0.75rem; align-items: end; }
.zugang-zeile .checkbox { align-self: center; }
@media (max-width: 40rem) { .zugang-zeile { grid-template-columns: 1fr; } }
.trenner { display: flex; align-items: center; gap: 0.75rem; color: var(--s500); font-size: 0.85rem; margin: 1rem 0 0.5rem; }
.trenner::before, .trenner::after { content: ''; flex: 1; border-top: 1px solid var(--s200); }
.passkey-knopf { width: 100%; justify-content: center; }
.weitere-anwendungen { margin: 1rem 0; }
.weitere-anwendungen summary { cursor: pointer; color: var(--stab); font-weight: 600; }
.weitere-anwendungen .inline-formular { display: inline-flex; gap: 0.4rem; margin-left: 0.5rem; }
.weitere-anwendungen input { padding: 0.2rem 0.4rem; font-size: 0.9rem; }
blockquote { margin: 0.5rem 0 1rem; padding: 0.5rem 0.9rem; border-left: 3px solid var(--juh); background: var(--s50); }

.status-link { background: var(--blau-100); color: var(--blau-300); }
.kachel-leiste { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: -0.25rem 0 1rem; }
.kachel-leiste > span { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.kachel-schieben { display: none; gap: 0.35rem; margin-top: auto; }
.kachel-schieben button { border: 1px solid var(--s300); background: #fff; border-radius: var(--radius); padding: 0.1rem 0.55rem; cursor: pointer; font-size: 0.85rem; color: var(--stab); }
.kacheln.anordnen .kachel-schieben { display: inline-flex; }
.kacheln.anordnen .kachel { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: 2px dashed var(--s300); outline-offset: 2px; }
.kacheln.anordnen .kachel:hover { transform: none; }
.kacheln.anordnen .kachel.zieht { cursor: grabbing; opacity: 0.55; pointer-events: none; outline-color: var(--juh); }
.kacheln.anordnen .kachel[aria-disabled="true"] { pointer-events: auto; }

.matrix-bearbeiten { background: #fffdf2; }
.bearbeiten-hinweis { position: sticky; top: 0; z-index: 5; }
.bearbeiten-hinweis [data-aenderungen-zahl] { font-weight: 700; }
tr.zeile-warnung td { background: var(--rot-50); }

.kachel-ueberschrift { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; border-bottom: 2px solid var(--s200); padding-bottom: 0.3rem; }
.kachel-ueberschrift:first-child { margin-top: 0; }
.kachel-ueberschrift h2 { margin: 0; font-size: 1.15rem; color: var(--stab); }
.kacheln.anordnen .kachel-ueberschrift { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; outline: 2px dashed var(--s300); outline-offset: 4px; }
.kacheln.anordnen .kachel-ueberschrift.zieht { opacity: 0.55; pointer-events: none; outline-color: var(--juh); }
.kacheln.anordnen .kachel-ueberschrift .kachel-schieben { display: inline-flex; margin: 0 0 0 auto; }
.link-zeile .link-sichtbar { grid-column: 1 / -1; } .link-sichtbar select { width: 100%; }
.kacheln .kachel-eigen { border-top-color: #1f8a5b; }
.status-eigen { background: var(--ok-bg); color: var(--ok); }

/* Suche und „Mein Tag“ */
.suchfeld { display: flex; gap: .5rem; margin: 0 0 1.25rem; max-width: 40rem; }
.suchfeld input { flex: 1; min-width: 0; padding: .55rem .8rem; border: 1px solid var(--s300); border-radius: var(--radius); font: inherit; }
.mein-tag { margin: 0 0 1.5rem; }
.mein-tag-kopf { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; cursor: pointer; list-style: none; padding: .3rem 0; }
.mein-tag-kopf::-webkit-details-marker { display: none; }
.mein-tag-kopf h2 { margin: 0; font-size: 1.2rem; color: var(--stab); }
.mein-tag-kopf h2::before { content: '▸'; display: inline-block; width: 1.1rem; color: var(--juh); transition: transform .15s; }
.mein-tag[open] .mein-tag-kopf { margin-bottom: .6rem; }
.mein-tag[open] .mein-tag-kopf h2::before { transform: rotate(90deg); }
.mein-tag-zahl { font-size: .85rem; font-weight: 600; color: var(--stab); background: var(--s100); border-radius: 999px; padding: .1rem .6rem; }
.mein-tag-zahl:empty { display: none; }
.mein-tag-zahl.dringend { color: #fff; background: var(--juh); }
.mein-tag-kopf .knopf { margin-left: auto; }
.mein-tag-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; }
.mein-tag-karte, .such-gruppe { background: #fff; border: 1px solid var(--s200); border-left: 4px solid var(--juh); border-radius: var(--radius-gross); padding: .8rem 1rem; }
.mein-tag-karte h3, .such-gruppe h2 { margin: 0 0 .4rem; font-size: 1rem; color: var(--stab); }
.mein-tag-karte ul, .such-gruppe ul { list-style: none; margin: 0; padding: 0; }
.info-eintrag a { display: grid; grid-template-columns: 1fr auto; gap: 0 .75rem; padding: .4rem 0; border-top: 1px solid var(--s100); color: var(--text); text-decoration: none; }
.info-eintrag:first-child a { border-top: 0; }
.info-eintrag a:hover .info-titel { text-decoration: underline; }
.info-titel { font-weight: 500; }
.info-zeit { color: var(--s600); font-size: .85rem; white-space: nowrap; }
.info-text { grid-column: 1 / -1; color: var(--s600); font-size: .85rem; }
.info-eintrag.dringend .info-titel, .info-eintrag.dringend .info-zeit { color: var(--fehler); }
.info-eintrag.dringend .info-titel::before { content: "● "; color: var(--juh); }
.info-mehr { padding-top: .35rem; font-size: .875rem; }
.such-ergebnisse { display: grid; gap: 1rem; }

/* Datei-Wächter */
.status-ok { background: var(--ok-bg); color: var(--ok); }
.status-fehler { background: var(--fehler-bg); color: var(--fehler); }
.waechter-wert code { font-size: .75rem; word-break: break-all; }
.waechter-warnung { border-left: 4px solid var(--fehler); }
.waechter-warnung h2 { color: var(--fehler); margin-top: 0; }
/* Anmeldung mit dem Handy (QR-Code) */
.qr-karte { max-width: 760px; margin: 2rem auto; }
.qr-inhalt { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.qr-bild { background: #fff; padding: .75rem; border-radius: .6rem; line-height: 0; }
.qr-bild svg { width: 240px; height: 240px; }
.qr-text { flex: 1; min-width: 240px; }
.qr-schritte { margin: 0 0 .25rem; padding-left: 1.2rem; }
.qr-pruefzahl { font-size: 3.4rem; font-weight: 700; letter-spacing: .08em; color: var(--stab); margin: .25rem 0 .5rem; }
.qr-aus .qr-bild { opacity: .25; }
.qr-knopf { display: block; text-align: center; }
.freigabe-daten { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0 0 1rem; }
.freigabe-daten dt { color: var(--s500); }
.freigabe-daten dd { margin: 0; }
.freigabe-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .4rem 0; }
.freigabe-zahlen .knopf { font-size: 1.6rem; font-weight: 700; padding: .9rem 0; justify-content: center; }
.qr-hinweis { margin-top: -.4rem; }
.kopf-ablauf { font-variant-numeric: tabular-nums; }
.kopf-ablauf-knapp { background: #fff; color: var(--juh); border-radius: var(--radius); padding: 0 .4rem; font-weight: 700; }