:root { --blau:#1f3864; --blau2:#2e5597; --grau:#f3f4f6; --rand:#d9dde3; --text:#1f2328; --rot:#b42318; --gruen:#1a7f37; --orange:#b54708; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Segoe UI", Arial, sans-serif; font-size:15px; color:var(--text); background:#fff; }
a { color: var(--blau2); }
.kopf { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:var(--blau); color:#fff; }
.marke { font-weight:700; font-size:20px; letter-spacing:.5px; }
.marke span { font-weight:400; font-size:14px; opacity:.8; margin-left:8px; }
.marke.gross { font-size:32px; color:var(--blau); }
.wer { font-size:14px; display:flex; gap:14px; align-items:center; }
.wer a, .wer button.link { color:#fff; }
.hinweisband { background:#fff4e5; border-bottom:1px solid #f5c67a; padding:8px 20px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.rahmen { display:flex; min-height: calc(100vh - 100px); }
.menue { width:230px; background:var(--grau); border-right:1px solid var(--rand); padding:10px 0; flex-shrink:0; }
.menue a, .menue .bald { display:block; padding:9px 20px; text-decoration:none; color:var(--text); font-weight:600; }
.menue a:hover { background:#e6e9ee; }
.menue a.aktiv { background:#dde6f5; border-left:4px solid var(--blau2); padding-left:16px; }
.menue .gruppe { padding:14px 20px 4px; font-size:12px; text-transform:uppercase; color:#6b7280; letter-spacing:.5px; }
.menue .bald { color:#9aa1ab; font-weight:400; font-size:14px; padding-top:5px; padding-bottom:5px; }
.inhalt { flex:1; padding:20px 30px 40px; min-width:0; }
h1 { font-weight:300; font-size:28px; margin:4px 0 18px; padding-bottom:8px; border-bottom:1px solid #333; }
h2 { font-size:17px; margin:0 0 12px; color:var(--blau); }
.fuss { font-size:12px; color:#6b7280; padding:10px 20px; border-top:1px solid var(--rand); }
.liste { width:100%; border-collapse:collapse; margin-bottom:16px; }
.liste th { text-align:left; background:var(--grau); font-weight:600; padding:8px; border-bottom:1px solid var(--rand); }
.liste td { padding:8px; border-bottom:1px solid #eceef1; vertical-align:top; }
.liste tbody tr:nth-child(even) { background:#fafbfc; }
.liste.dicht td { padding:5px 8px; font-size:13px; }
.liste td.leer { color:#6b7280; text-align:center; padding:20px; }
.liste td.details { max-width:380px; word-break:break-word; color:#555; font-size:12px; }
.liste tr.warnung td { background:#fff1f0; }
.leiste { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.suche { display:flex; gap:6px; }
.suche input { width:280px; }
input, select { font:inherit; padding:8px 10px; border:1px solid #c5cad1; border-radius:4px; width:100%; background:#fff; }
input:focus, select:focus { outline:2px solid #9db8e8; border-color:var(--blau2); }
button, .knopf { font:inherit; padding:8px 14px; border:1px solid #c5cad1; border-radius:4px; background:#fff; cursor:pointer; text-decoration:none; color:var(--text); display:inline-block; }
button:hover, .knopf:hover { background:#f0f2f5; }
button.haupt, .knopf.haupt { background:var(--blau); border-color:var(--blau); color:#fff; }
button.haupt:hover, .knopf.haupt:hover { background:var(--blau2); }
button.link { border:none; background:none; padding:0; text-decoration:underline; cursor:pointer; }
button.klein { padding:4px 10px; font-size:13px; }
form.inline { display:inline; }
.formular label { display:block; margin-bottom:12px; font-size:14px; color:#444; }
.formular label input, .formular label select { margin-top:4px; }
.formular .zeile { display:flex; gap:12px; }
.formular .zeile label { flex:1; }
.formular .zeile label.breit { flex:2.5; }
.formular { max-width:760px; }
.formular.schmal { max-width:420px; }
.klein { font-size:13px; color:#6b7280; }
.mono { font-family: Consolas, "Courier New", monospace; }
.fehler, .ok, .info { padding:10px 14px; border-radius:4px; margin-bottom:14px; }
.fehler { background:#fef3f2; border:1px solid #fecdca; color:var(--rot); }
.ok { background:#ecfdf3; border:1px solid #abefc6; color:var(--gruen); }
.info { background:#eff4fb; border:1px solid #c7d7f0; color:#1e3a6b; }
.karte { border:1px solid var(--rand); border-radius:6px; padding:16px 18px; margin-bottom:16px; }
.spalten { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.daten { display:grid; grid-template-columns: 120px 1fr; gap:6px 12px; margin:0; }
.daten dt { color:#6b7280; } .daten dd { margin:0; }
.abstand { margin-top:14px; }
.marker { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; background:#eef0f3; }
.marker.f-freigegeben, .marker.s-aktiv { background:#dcfae6; color:#085d3a; }
.marker.f-bestanden { background:#fff6d6; color:#7a4d00; }
.marker.s-inaktiv { background:#fee4e2; color:#912018; }
.zugangskarte { border:2px dashed var(--blau2); border-radius:6px; padding:16px 20px; max-width:520px; margin-bottom:14px; font-size:16px; }
.zugangskarte p { margin:6px 0; }
.loginseite { background:var(--grau); display:flex; align-items:center; justify-content:center; min-height:100vh; }
.loginbox { background:#fff; border:1px solid var(--rand); border-radius:8px; padding:30px 34px; width:360px; box-shadow:0 4px 20px rgba(0,0,0,.06); }
.loginbox label { display:block; margin:12px 0; font-size:14px; color:#444; }
.loginbox label input { margin-top:4px; }
.loginbox button.haupt { width:100%; margin-top:8px; padding:10px; }
.loginbox .unter { color:#6b7280; margin:4px 0 16px; font-size:14px; }
@media (max-width: 800px) {
  .rahmen { flex-direction:column; } .menue { width:auto; }
  .spalten { grid-template-columns:1fr; } .formular .zeile { flex-direction:column; gap:0; }
  .inhalt { padding:16px; } .suche input { width:100%; }
}

/* ---- Schritt 2 ---- */
.menue a.blinkt { background:#d92d20; color:#fff; animation: blinken 1.2s ease-in-out infinite; }
.menue a.blinkt:hover { background:#b42318; }
.menue a.gelesen::before { content:"●"; color:var(--gruen); margin-right:6px; font-size:12px; }
.menue .zahl { display:inline-block; background:#fff; color:#d92d20; border-radius:10px; padding:0 7px; font-size:12px; margin-left:4px; }
@keyframes blinken { 0%,100% { opacity:1; } 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) { .menue a.blinkt { animation:none; } }
.kennzahlen { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.kennzahl { background:var(--blau); color:#fff; border-radius:6px; padding:12px 18px; min-width:170px; }
.kennzahl .l { font-size:13px; opacity:.85; } .kennzahl .w { font-size:30px; font-weight:700; margin-top:2px; }
.kennzahl.hell { background:#eef2f8; color:var(--text); }
.formzeile { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.formzeile label { flex:1; min-width:140px; font-size:13px; color:#444; margin:0; }
.formzeile label input, .formzeile label select { margin-top:4px; }
.formzeile .knopfspalte { flex:0; }
.orange, button.orange { background:#f79009; border-color:#f79009; color:#fff; }
button.orange:hover { background:#dc6803; }
button.gefahr { color:var(--rot); border-color:#fda29b; }
.warnung-box { padding:10px 14px; border-radius:4px; margin-bottom:14px; background:#fffaeb; border:1px solid #fedf89; color:#93370d; }
tr.storniert td { color:#98a2b3; text-decoration:line-through; }
tr.storniert td.nicht-durch { text-decoration:none; }
.rechts { text-align:right; }
.zweispaltig { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
details.aufklapp summary { cursor:pointer; color:var(--blau2); }
details.aufklapp[open] summary { margin-bottom:8px; }
.inline-form { display:flex; gap:6px; align-items:center; }
.inline-form input { width:auto; min-width:120px; padding:4px 8px; font-size:13px; }
.wiki-inhalt { max-width:820px; line-height:1.55; }
.wiki-inhalt h3 { color:var(--blau); margin:18px 0 6px; }
.bestaetigung { margin-top:24px; padding:14px 18px; border-radius:6px; }
.bestaetigung.offen { background:#fef3f2; border:2px solid #d92d20; }
.bestaetigung.ok { background:#ecfdf3; border:1px solid #abefc6; color:var(--gruen); }
.punkt-rot::before { content:"●"; color:#d92d20; margin-right:6px; }
.punkt-gruen::before { content:"●"; color:var(--gruen); margin-right:6px; }
textarea { font:inherit; padding:8px 10px; border:1px solid #c5cad1; border-radius:4px; width:100%; min-height:260px; }
.logo-feld { border:2px dashed #c5cad1; border-radius:6px; padding:20px; text-align:center; max-width:420px; }
.logo-feld img { max-width:260px; max-height:120px; display:block; margin:0 auto 10px; }
.tabs-anker { display:flex; gap:14px; flex-wrap:wrap; margin:-6px 0 14px; font-size:14px; }
@media (max-width: 800px) { .zweispaltig { grid-template-columns:1fr; } }
.marker.alt { background:#f2f4f7; color:#475467; border:1px solid #d0d5dd; }
