/* Backoffice: ergänzt start.css (gleiches Erscheinungsbild wie die öffentliche Seite) */
.behaelter { max-width:1200px; }
.logo { height:110px; }
.dienst { align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.bereich { color:var(--rot); font-weight:700; }
.nutzer { flex-direction:row; align-items:center; gap:6px; font-weight:400; font-size:14px; }
.nutzer select { padding:4px 6px; font-size:14px; }
.links { gap:28px; }
.links a { font-size:17px; }
.links a.aktiv { color:var(--rot); border-bottom-color:var(--rot); }
.zahl { display:inline-block; min-width:22px; padding:0 6px; margin-left:4px; font-size:12px; line-height:20px; text-align:center;
  color:#fff; background:var(--rot); border-radius:10px; vertical-align:2px; }
.kopf { border-bottom:1px solid #ddd; }

.bo { padding-top:36px; min-height:60vh; }
.bo h1 { font-family:var(--serif); font-size:32px; margin:0 0 6px; }
.bo h2 { font-family:var(--serif); font-size:22px; margin:0 0 14px; }
.unterzeile { color:var(--text2); margin:0 0 26px; }
.titelzeile { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.titelzeile .unterzeile { margin:0; }
.aktionen { display:flex; gap:8px; flex-wrap:wrap; }

select, input[type=date], input[type=datetime-local] { font:inherit; padding:9px 11px; border:1px solid #9a9a9a; border-radius:0; background:#fff; }
select:focus { outline:2px solid var(--rot); border-color:var(--rot); }

.knopf.klein { min-width:0; padding:7px 16px; font-size:15px; }
.knopf.sek { background:#fff; color:var(--rot); }
.knopf.sek:hover { background:var(--rot); color:#fff; }
.knopf.mini { min-width:0; padding:2px 10px; font-size:13px; }
.textknopf { font:inherit; background:none; border:none; padding:0; color:var(--rot); cursor:pointer; text-decoration:underline; }
.textknopf.grau { color:var(--text2); }

/* Kennzahlen */
.kennzahlen { display:grid; grid-template-columns:repeat(4,1fr); gap:3px; margin-bottom:30px; }
.kennzahl { display:block; background:var(--grau); padding:18px 22px; text-decoration:none; border-top:4px solid var(--rot); }
.kennzahl:hover { background:var(--grau2); }
.kennzahl b { display:block; font-family:var(--serif); font-size:40px; font-weight:400; line-height:1.1; }
.kennzahl span { color:var(--text2); }
.zwei { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-bottom:28px; }
.kasten.weiss { background:#fff; border:1px solid #ddd; }
.kasten + .kasten { margin-top:28px; }
.zwei .kasten + .kasten { margin-top:0; }

/* Listen und Tabellen */
.eintraege { list-style:none; margin:0; padding:0; }
.eintraege li { padding:10px 0; border-top:1px solid #d4d4d4; }
.eintraege li:first-child { border-top:none; padding-top:0; }
.eintraege a { font-weight:700; text-decoration:none; }
.eintraege a:hover { color:var(--rot); }
.meta { color:var(--text2); font-size:14px; }
.leer { color:var(--text2); font-style:italic; margin:0; }

.filter { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.filter input[type=search] { flex:1; min-width:220px; }
.tabelle { width:100%; border-collapse:collapse; background:#fff; }
.tabelle th { text-align:left; font-size:14px; padding:10px 12px; background:var(--grau2); border-bottom:2px solid var(--rot); }
.tabelle td { padding:10px 12px; border-bottom:1px solid #e1e1e1; vertical-align:top; }
.tabelle tbody tr.klick { cursor:pointer; }
.tabelle tbody tr.klick:hover { background:#fbf1f3; }
.tabelle .rechts { text-align:right; white-space:nowrap; }
.az { font-family:Consolas,monospace; font-weight:700; white-space:nowrap; }
.ueberfaellig { color:var(--rot); font-weight:700; }

.st { display:inline-block; padding:1px 9px; font-size:13px; font-weight:700; white-space:nowrap; }
.st-gelb { background:#fff1c2; color:#6f5200; }
.st-rot { background:#fbe0e5; color:#a1092a; }
.st-gruen { background:#dff1e3; color:#1d6b33; }
.st-grau { background:#e4e4e4; color:#444; }

/* Reiter */
.reiter { display:flex; gap:0; border-bottom:2px solid var(--rot); margin:10px 0 24px; flex-wrap:wrap; }
.reiter a { padding:9px 18px; text-decoration:none; font-weight:700; background:var(--grau); margin-right:3px; }
.reiter a:hover { background:var(--grau2); }
.reiter a.aktiv { background:var(--rot); color:#fff; }

/* Akte */
.stamm { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin:0 0 24px; }
.stamm div { background:var(--grau); padding:12px 16px; }
.stamm dt { font-size:13px; color:var(--text2); }
.stamm dd { margin:0; font-weight:700; }
.text { white-space:pre-wrap; background:var(--grau); padding:16px 20px; margin:0 0 24px; }
.eingabe { background:var(--grau); padding:18px 20px; margin-bottom:22px; display:grid; gap:12px; }
.eingabe .zeile { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.eingabe .knopf { justify-self:start; }
.chronik { list-style:none; margin:0; padding:0 0 0 22px; border-left:3px solid var(--grau2); }
.chronik li { position:relative; padding:0 0 20px 6px; }
.chronik li::before { content:""; position:absolute; left:-31px; top:6px; width:13px; height:13px; border-radius:50%; background:var(--rot); border:3px solid #fff; }
.chronik .typ { font-weight:700; }
.chronik p { margin:2px 0 0; white-space:pre-wrap; }

/* Eingang */
.anzeige { background:var(--grau); padding:18px 22px; margin-bottom:16px; border-left:5px solid var(--rot); }
.anzeige.erledigt { border-left-color:#9a9a9a; }
.anzeige h3 { margin:0 0 4px; font-size:18px; font-weight:700; }
.anzeige dl { display:grid; grid-template-columns:150px 1fr; gap:2px 14px; margin:10px 0 14px; }
.anzeige dt { color:var(--text2); }
.anzeige dd { margin:0; white-space:pre-wrap; }
.umschalter { display:flex; gap:3px; margin-bottom:18px; flex-wrap:wrap; }
.umschalter a { padding:6px 14px; background:var(--grau); text-decoration:none; font-weight:700; font-size:14px; }
.umschalter a.aktiv { background:var(--text); color:#fff; }

/* Dialog */
#dlg { width:760px; }
.felder { display:flex; flex-direction:column; gap:14px; }
.knoepfe { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
textarea.dokument { font-family:Georgia,serif; font-size:15px; min-height:420px; }
.hinweis { background:#fff8e1; border-left:4px solid #e0b400; padding:12px 16px; margin:0 0 22px; }

.fuss { margin-top:80px; }

@media (max-width:1000px) {
  .kennzahlen { grid-template-columns:1fr 1fr; }
  .zwei, .stamm { grid-template-columns:1fr; }
  .tabelle { display:block; overflow-x:auto; }
}
@media (max-width:760px) {
  .dienst .bereich { display:none; }
  .anzeige dl { grid-template-columns:1fr; }
}
@media print {
  .kopf, .fuss, .reiter, .eingabe, .aktionen, .knopf, .textknopf { display:none !important; }
}

/* Anmeldung */
body.gesperrt .kopf, body.gesperrt .bo, body.gesperrt .fuss { display:none; }
.anmeldung { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; padding:30px; background:var(--grau); }
.anmeldung > img { height:130px; }
.login { width:420px; max-width:100%; background:#fff; border-top:6px solid var(--rot); padding:30px; display:flex; flex-direction:column; gap:14px; box-shadow:0 10px 30px rgba(0,0,0,.08); }
.login h1 { font-family:var(--serif); font-weight:400; font-size:28px; margin:0; }
.login .unterzeile { margin:0 0 6px; }
.login .knopf { min-width:0; width:100%; }
.fehler { color:var(--rot); font-weight:700; margin:0; }
.nutzer b { font-weight:700; }
[hidden] { display:none !important; }
.abstand-oben { margin-top:40px; }
/* Pflicht-Passwortänderung: Dialog lässt sich nicht abbrechen */
#dlg[data-zwang] [data-act="dlg-zu"] { display:none; }
code { background:var(--grau2); padding:1px 5px; }