/* Reimers Data Core – Rahmen und Bauteile.
   Alle Farben, Schriften, Abstände, Rundungen und Schatten kommen aus theme.css. Hier stehen keine festen Werte dafür. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--schrift-familie); font-size: var(--schrift-basis); color: var(--farbe-text); background: var(--farbe-grund); }
a { color: var(--farbe-link); }
h1 { font-size: var(--schrift-160); margin: 0 0 var(--abstand-050); }
h2 { font-size: var(--schrift-115); margin: var(--abstand-160) 0 var(--abstand-050); }
button, input, select { font: inherit; }
button { cursor: pointer; padding: var(--abstand-050) var(--abstand-090); border: 1px solid var(--farbe-linie); border-radius: var(--rundung-s); background: var(--farbe-flaeche); color: var(--farbe-text); min-height: 40px; }
button:hover { background: var(--farbe-flaeche-leise); }
button.haupt { background: var(--bereich); border-color: var(--bereich); color: var(--farbe-text-auf-farbe); font-weight: var(--schrift-halbfett); }
button.gefahr { border-color: var(--farbe-rot); color: var(--farbe-rot); }
input, select { padding: var(--abstand-050) var(--abstand-060); border: 1px solid var(--farbe-linie-eingabe); border-radius: var(--rundung-s); background: var(--farbe-flaeche); min-height: 40px; max-width: 100%; }
:focus-visible { outline: 3px solid var(--farbe-akzent); outline-offset: 1px; }
code { background: var(--farbe-flaeche-leise); padding: var(--abstand-010) var(--abstand-030); border-radius: var(--rundung-xs); }
code.lang { display: block; padding: var(--abstand-060); overflow-wrap: anywhere; }
.klein { font-size: var(--schrift-088); color: var(--farbe-text-leise); }
.leer { color: var(--farbe-text-leise); }
.untertitel { color: var(--farbe-text-leise); margin-top: 0; }

/* Meldungen */
.meldung { padding: var(--abstand-070) var(--abstand-090); border-radius: var(--rundung-s); border-left: 5px solid; }
.meldung.fehler { background: var(--farbe-rot-hell); border-color: var(--farbe-rot); }
.meldung.erfolg { background: var(--farbe-gruen-hell); border-color: var(--farbe-gruen); }
.meldung.warnung { background: var(--farbe-gelb-hell); border-color: var(--farbe-gelb); }
.test-marke { background: var(--farbe-akzent); color: var(--farbe-text); font-size: var(--schrift-070); font-weight: var(--schrift-fett); padding: var(--abstand-010) var(--abstand-040); border-radius: var(--rundung-xs); margin-left: var(--abstand-040); vertical-align: middle; }

/* Anmeldung */
.anmeldung { min-height: 100%; display: flex; align-items: flex-start; justify-content: center; padding: 6vh var(--abstand-100); }
.anmeldung-karte { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--rundung-l); padding: var(--abstand-160); width: 100%; max-width: 460px; }
.anmeldung-karte .marke { font-weight: var(--schrift-fett); color: var(--farbe-text-leise); margin-bottom: var(--abstand-100); }
.anmeldung-karte form { display: flex; flex-direction: column; gap: var(--abstand-040); }
.anmeldung-karte label { margin-top: var(--abstand-050); font-weight: var(--schrift-halbfett); }
.anmeldung-karte button { margin-top: var(--abstand-090); }
.oder { text-align: center; color: var(--farbe-text-leise); margin: var(--abstand-100) 0; }
.qr { display: block; margin: var(--abstand-050) 0; image-rendering: pixelated; border: 1px solid var(--farbe-linie); }

/* Rahmen */
.rahmen { display: grid; grid-template-columns: var(--menue-breite) 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "balken balken" "menue kopf" "menue inhalt"; min-height: 100%; }
.rahmen.menue-zu { grid-template-columns: 0 1fr; }
.rahmen.menue-zu .menue { display: none; }
.ansicht-balken { grid-area: balken; background: var(--farbe-ansicht-balken); border-bottom: 2px solid var(--farbe-akzent); padding: var(--abstand-050) var(--abstand-100); display: flex; gap: var(--abstand-100); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ansicht-balken form { margin: 0; }

.menue { grid-area: menue; background: var(--farbe-menue); color: var(--farbe-menue-text); padding: var(--abstand-080) var(--abstand-060) var(--abstand-600); overflow-y: auto; }
.menue .marke { font-weight: var(--schrift-fett); padding: var(--abstand-030) var(--abstand-050) var(--abstand-090); }
.menue a { display: block; color: var(--farbe-menue-text); text-decoration: none; padding: var(--abstand-055) var(--abstand-070); border-radius: var(--rundung-s); }
.menue a:hover { background: var(--farbe-menue-hervor); }
.menue nav a.aktiv { background: var(--bereich); color: var(--farbe-text-auf-farbe); font-weight: var(--schrift-halbfett); }
.punkt { display: inline-block; width: .75rem; height: .75rem; border-radius: var(--rundung-rund); background: var(--bereich); margin-right: var(--abstand-055); }
.umschalter { background: var(--farbe-menue-hervor); border-radius: var(--rundung-m); margin-bottom: var(--abstand-080); border-left: 6px solid var(--bereich); }
.umschalter summary { padding: var(--abstand-070); font-weight: var(--schrift-fett); cursor: pointer; list-style: none; }
.umschalter summary::after { content: "▾"; float: right; }
.umschalter .leer { display: block; padding: var(--abstand-050) var(--abstand-070); color: var(--farbe-menue-text-leise); }
.weitere-titel { margin: var(--abstand-120) var(--abstand-050) var(--abstand-030); font-size: var(--schrift-078); text-transform: uppercase; letter-spacing: .05em; color: var(--farbe-menue-text-leise); }
.weiterer summary { padding: var(--abstand-050) var(--abstand-070); cursor: pointer; border-radius: var(--rundung-s); }
.weiterer summary:hover { background: var(--farbe-menue-hervor); }
.weiterer a { padding-left: var(--abstand-200); font-size: var(--schrift-095); }

.kopf { grid-area: kopf; background: var(--farbe-flaeche); border-bottom: 3px solid var(--bereich); display: flex; align-items: center; gap: var(--abstand-080); padding: var(--abstand-050) var(--abstand-100); position: sticky; top: 0; z-index: 5; }
.menue-knopf { font-size: var(--schrift-120); padding: var(--abstand-030) var(--abstand-070); }
.suche { position: relative; flex: 1; max-width: 640px; }
.suche input { width: 100%; }
.treffer { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--rundung-m); box-shadow: var(--schatten-l); max-height: 60vh; overflow-y: auto; z-index: 20; }
.treffer a { display: grid; grid-template-columns: 6rem 1fr; gap: var(--abstand-020) var(--abstand-060); padding: var(--abstand-055) var(--abstand-080); text-decoration: none; color: var(--farbe-text); border-bottom: 1px solid var(--farbe-flaeche-leise); }
.treffer a:hover, .treffer a.gewaehlt { background: var(--farbe-blau-hell); }
.treffer .art { color: var(--farbe-text-leise); font-size: var(--schrift-085); }
.treffer .zusatz { grid-column: 2; color: var(--farbe-text-leise); font-size: var(--schrift-085); }
.treffer .nichts { padding: var(--abstand-070) var(--abstand-080); color: var(--farbe-text-leise); }
.benutzer { position: relative; margin-left: auto; }
.benutzer summary { cursor: pointer; padding: var(--abstand-050) var(--abstand-070); border-radius: var(--rundung-s); list-style: none; font-weight: var(--schrift-halbfett); }
.benutzer summary::after { content: " ▾"; }
.benutzer-menue { position: absolute; right: 0; top: calc(100% + 4px); background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--rundung-m); box-shadow: var(--schatten-l); min-width: 220px; padding: var(--abstand-040); z-index: 20; }
.benutzer-menue a { display: block; padding: var(--abstand-050) var(--abstand-070); text-decoration: none; color: var(--farbe-text); border-radius: var(--rundung-s); }
.benutzer-menue a:hover { background: var(--farbe-flaeche-leise); }
.benutzer-menue form { margin: var(--abstand-030) 0 0; border-top: 1px solid var(--farbe-linie); padding-top: var(--abstand-040); }
.benutzer-menue button { width: 100%; text-align: left; border: 0; }

.inhalt { grid-area: inhalt; padding: var(--abstand-140) var(--abstand-160) var(--abstand-700); min-width: 0; }
.ohne-rahmen, .hinweis-seite { padding: var(--abstand-200); max-width: 640px; }

/* Startseite */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--abstand-100); margin-top: var(--abstand-100); }
.kachel { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-top: 5px solid var(--bereich); border-radius: var(--rundung-m); padding: var(--abstand-100); text-decoration: none; color: var(--farbe-text); display: flex; flex-direction: column; gap: var(--abstand-030); }
.kachel:hover { box-shadow: var(--schatten-s); }
.kachel .zahl { font-size: var(--schrift-200); font-weight: var(--schrift-fett); }
.kachel.null { opacity: .45; border-top-color: var(--farbe-linie); }
.platzhalter { background: var(--farbe-flaeche); border: 2px dashed var(--farbe-linie); border-radius: var(--rundung-m); padding: var(--abstand-150); max-width: 640px; }

/* Listen und Akten */
table.liste { width: 100%; border-collapse: collapse; background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--rundung-m); }
table.liste th, table.liste td { text-align: left; padding: var(--abstand-060) var(--abstand-080); border-bottom: 1px solid var(--farbe-flaeche-leise); vertical-align: middle; }
table.liste th { background: var(--farbe-flaeche-leise); font-size: var(--schrift-090); }
.aktionen { display: flex; gap: var(--abstand-040); flex-wrap: wrap; align-items: center; }
.aktionen form { margin: 0; display: flex; gap: var(--abstand-030); }
.aktionen button, .aktionen input { min-height: 34px; padding: var(--abstand-025) var(--abstand-060); font-size: var(--schrift-090); }
.marke-rot, .marke-gelb, .marke-gruen, .marke-grau { font-size: var(--schrift-082); padding: var(--abstand-015) var(--abstand-050); border-radius: var(--rundung-l); white-space: nowrap; }
.marke-rot { background: var(--farbe-rot-hell); color: var(--farbe-rot); }
.marke-gelb { background: var(--farbe-gelb-hell); color: var(--farbe-gelb-dunkel); }
.marke-gruen { background: var(--farbe-gruen-hell); color: var(--farbe-gruen); }
.marke-grau { background: var(--farbe-flaeche-leise); color: var(--farbe-text-leise); }
dl.felder { display: grid; grid-template-columns: max-content 1fr; gap: var(--abstand-040) var(--abstand-120); background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--rundung-m); padding: var(--abstand-100); max-width: 720px; }
dl.felder dt { color: var(--farbe-text-leise); }
dl.felder dd { margin: 0; }
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--abstand-080); }
.karte { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--rundung-m); padding: var(--abstand-080); display: flex; flex-direction: column; gap: var(--abstand-020); }
.pfad { margin: 0 0 var(--abstand-030); font-size: var(--schrift-090); }
.formular { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--abstand-080); align-items: end; max-width: 960px; }
.formular label { display: flex; flex-direction: column; gap: var(--abstand-025); font-weight: var(--schrift-halbfett); font-size: var(--schrift-092); }
form.schmal { display: flex; flex-direction: column; gap: var(--abstand-040); max-width: 460px; }
form.schmal label { margin-top: var(--abstand-050); font-weight: var(--schrift-halbfett); }
form.schmal button { margin-top: var(--abstand-090); }
.link-kasten { background: var(--farbe-blau-hell); border: 1px solid var(--farbe-blau-linie); border-radius: var(--rundung-m); padding: var(--abstand-100); margin: var(--abstand-100) 0; }
.link-kasten h2 { margin-top: 0; }
.mail { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--rundung-m); padding: var(--abstand-090); margin-bottom: var(--abstand-080); }
.mail header { display: flex; flex-direction: column; color: var(--farbe-text-leise); font-size: var(--schrift-088); }
.mail header strong { color: var(--farbe-text); font-size: var(--schrift-100); }
.mail p { white-space: pre-wrap; overflow-wrap: anywhere; }
ul.rechte { background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--rundung-m); padding: var(--abstand-080) var(--abstand-080) var(--abstand-080) var(--abstand-200); max-width: 720px; }

/* Feed-Balken und Sprachblase unten rechts */
.unten-rechts { position: fixed; right: var(--abstand-100); bottom: var(--abstand-100); display: flex; align-items: flex-end; gap: var(--abstand-060); z-index: 30; }
.feed-balken { display: flex; flex-direction: column; align-items: stretch; gap: var(--abstand-025); min-width: 220px; max-width: 340px; text-align: left; border-radius: var(--rundung-xl); border: 1px solid var(--farbe-linie); box-shadow: var(--schatten-m); padding: var(--abstand-055) var(--abstand-080); }
.feed-kopf { font-weight: var(--schrift-fett); display: flex; justify-content: space-between; align-items: center; }
.anzahl { background: var(--farbe-text); color: var(--farbe-text-auf-farbe); border-radius: var(--rundung-l); padding: 0 var(--abstand-050); font-size: var(--schrift-085); }
.feed-balken.dringend .anzahl { background: var(--farbe-rot); }
.feed-zeile { font-size: var(--schrift-088); padding-left: var(--abstand-050); border-left: 4px solid var(--farbe-gelb); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-zeile.eskalation { border-left-color: var(--farbe-rot); }
.feed-zeile.mehr { border-left-color: transparent; color: var(--farbe-text-leise); }
.sprachblase { width: 54px; height: 54px; border-radius: var(--rundung-rund); background: var(--bereich); border-color: var(--bereich); color: var(--farbe-text-auf-farbe); display: flex; align-items: center; justify-content: center; box-shadow: var(--schatten-m); padding: 0; }
.sprachblase:hover { background: var(--bereich); filter: brightness(1.1); }
.fenster { position: fixed; right: var(--abstand-100); bottom: var(--abstand-100); width: max(25vw, 360px); height: max(50vh, 380px); background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-radius: var(--rundung-xl); box-shadow: var(--schatten-xl); z-index: 40; display: flex; flex-direction: column; }
.fenster[hidden] { display: none; }
.fenster-kopf { display: flex; border-bottom: 1px solid var(--farbe-linie); }
.fenster-kopf .reiter { border: 0; border-radius: 0; border-bottom: 3px solid transparent; padding: var(--abstand-070) var(--abstand-100); font-weight: var(--schrift-halbfett); background: transparent; }
.fenster-kopf .reiter.aktiv { border-bottom-color: var(--bereich); }
.fenster-kopf .schliessen { margin-left: auto; border: 0; font-size: var(--schrift-140); background: transparent; }
.roter-punkt { background: var(--farbe-rot); color: var(--farbe-text-auf-farbe); border-radius: var(--rundung-l); padding: 0 var(--abstand-040); font-size: var(--schrift-080); margin-left: var(--abstand-030); }
.fenster-inhalt { padding: var(--abstand-080); overflow-y: auto; flex: 1; }
.fenster-inhalt[hidden] { display: none; }
.feed-eintrag { display: flex; justify-content: space-between; gap: var(--abstand-060); align-items: flex-start; border-left: 5px solid var(--farbe-linie); padding: var(--abstand-050) var(--abstand-060); margin-bottom: var(--abstand-060); background: var(--farbe-flaeche-zart); border-radius: var(--rundung-s); }
.feed-eintrag p { margin: var(--abstand-020) 0 0; font-size: var(--schrift-092); }
.feed-eintrag.art-fristheute { border-left-color: var(--farbe-gelb); }
.feed-eintrag.art-eskalation { border-left-color: var(--farbe-rot); }
.feed-eintrag form { margin: 0; }
.feed-eintrag button { min-height: 34px; padding: var(--abstand-020) var(--abstand-060); font-size: var(--schrift-088); white-space: nowrap; }

/* iPad und Handy */
@media (max-width: 900px) {
    .rahmen { grid-template-columns: 1fr; grid-template-areas: "balken" "kopf" "menue" "inhalt"; grid-template-rows: auto auto auto 1fr; }
    .menue { display: none; padding-bottom: var(--abstand-100); }
    .rahmen.menue-auf .menue { display: block; }
    .inhalt { padding: var(--abstand-100) var(--abstand-100) var(--abstand-700); }
    .fenster { inset: 0; width: auto; height: auto; border-radius: 0; }
    .feed-balken { min-width: 150px; }
    table.liste { display: block; overflow-x: auto; }
}
@media print {
    .menue, .kopf, .unten-rechts, .fenster, .ansicht-balken, table.liste, .formular, h1, h2:not(.link-kasten h2) { display: none !important; }
    .rahmen { display: block; }
}