/* Dashboard (CAIDAO Compass, KT07).
   Kopfzeile Pixel für Pixel nach dem Skill caidao-produktkopfzeile.
   Akzent: Compass-Violett #434698, sparsam. Navy bleibt die Farbe der Handlung. */

@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/lato-latin-300-normal.716309aab2bc.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-latin-400-normal.e1b3b5908c9c.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-latin-700-normal.de69cf9e514d.woff2") format("woff2"); }

:root {
  --surface: #FFFFFF;
  --surface-2: #E6EBF1;
  --papier: #F3F6F9;
  --line: #CFD8E2;
  --line-strong: #AAB8C8;
  --ink: #101A26;
  --ink-2: #46566A;
  --ink-3: #6B7B8F;
  --navy: #244061;
  --navy-2: #152740;
  --on-navy: #F4F7FB;
  --orange: #FF6601;
  --akzent-schrift: #BF4D00;
  --compass: #434698;
  --compass-hell: #ECECF7;
  --rot: #B42318;   --rot-hell: #FDECEA;
  --or: #B54708;    --or-hell: #FEF0E6;
  --gelb: #8A6A00;  --gelb-hell: #FDF6DC;
  --gruen: #1F7A4D; --gruen-hell: #E6F4EC;
  --r: 6px;
  --r-gross: 10px;
  --f-body: "Lato", "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--papier); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--navy); }
h1, h2, h3 { line-height: 1.2; }
code { font-size: .9em; background: var(--surface-2); padding: 1px 5px; border-radius: 4px; }
.leise { color: var(--ink-3); }
.klein { font-size: .85rem; }

/* ------------------------------------------------ Kopfzeile (Spezifikation) */
.sitehead { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.sitehead .inner { display: flex; align-items: center; gap: 18px; padding: 12px 24px; max-width: 1120px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-right: auto; min-width: 0; }
.logo img { height: 30px; width: auto; display: block; flex: none; }
.logo .wortmarke-text { font-weight: 300; font-size: 26px; line-height: 30px; color: var(--navy); letter-spacing: -.01em; flex: none; }
.logo span { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; padding-left: 12px; border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .logo span { display: none; } }

.sitenav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sitenav a.link { color: var(--ink-2); text-decoration: none; font-size: 14px; padding: 7px 10px; border-radius: 5px; }
.sitenav a.link:hover { background: var(--surface-2); color: var(--ink); }
.sitenav a.link.an { color: var(--ink); font-weight: 700; }
.sitenav form { margin: 0; }
@media (max-width: 560px) {
  /* Angemeldet hat der Kopf vier Ziele; am Handy stehen sie in einer eigenen Zeile unter der Marke. */
  .sitehead .inner { flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; }
  .sitenav { flex-wrap: nowrap; gap: 2px; overflow-x: auto; }
  .sitenav a.link { padding: 6px 8px; font-size: 13.5px; }
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; transition: background .12s ease, border-color .12s ease; }
.btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.btn.primary { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.btn.primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.gefahr { color: var(--rot); border-color: #E4B4AF; }
.btn.gefahr:hover { background: var(--rot-hell); }
.btn.sm { padding: 5px 11px; font-size: 13px; }
.btn.xs { padding: 2px 8px; font-size: 12.5px; }
.btn.breit { width: 100%; padding: 12px 16px; font-size: 15px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.inline { display: inline; margin: 0; }

/* ------------------------------------------------ Rahmen */
main { flex: 1 0 auto; }
.bahn { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.schmal { max-width: 34rem; }
.seite { padding-top: 28px; padding-bottom: 56px; }
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.seitenkopf h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 300; color: var(--navy); margin: 0; letter-spacing: -.02em; }
.augenbraue { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--compass); margin: 0 0 .35rem; }
.meldung { background: var(--gruen-hell); border: 1px solid #B7DFC8; color: #134D31; border-radius: var(--r); padding: 10px 14px; margin: 0 0 16px; }
.meldung.error { background: var(--rot-hell); border-color: #F1B8B2; color: #7A1A12; }
.meldung.warning { background: var(--or-hell); border-color: #F5C9A8; color: #7A3306; }
.hinweisband { background: var(--compass-hell); border: 1px solid #CFD0EA; color: #2E3070; border-radius: var(--r); padding: 10px 14px; margin: 0 0 18px; font-size: .93rem; }

.karte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-gross); padding: 18px 20px; }
.karte + .karte, .abschnitt + .abschnitt { margin-top: 18px; }
.karte h2, .abschnitt > h2 { font-size: 1.05rem; margin: 0 0 12px; color: var(--navy); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.karte h2 small, .abschnitt > h2 small { font-weight: 400; color: var(--ink-3); font-size: .85rem; }

/* ------------------------------------------------ Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
@media (min-width: 760px) { .kennzahlen { grid-template-columns: repeat(4, 1fr); } }
.kennzahl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-gross); padding: 14px 16px; text-decoration: none; color: inherit; display: block; border-top: 3px solid var(--line); }
.kennzahl b { display: block; font-size: 1.9rem; font-weight: 300; line-height: 1.1; color: var(--navy); }
.kennzahl span { font-size: .85rem; color: var(--ink-2); }
.kennzahl.rot { border-top-color: var(--rot); } .kennzahl.rot b { color: var(--rot); }
.kennzahl.orange { border-top-color: var(--orange); }
.kennzahl.compass { border-top-color: var(--compass); } .kennzahl.compass b { color: var(--compass); }
a.kennzahl:hover { border-color: var(--line-strong); }

.raster { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
@media (min-width: 960px) { .raster { grid-template-columns: 1.6fr 1fr; } }

/* ------------------------------------------------ Listen von Einträgen */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; padding: 11px 0; border-top: 1px solid var(--line); align-items: start; }
.liste > li:first-child { border-top: 0; padding-top: 2px; }
.liste .wann { min-width: 5.6rem; font-variant-numeric: tabular-nums; }
.liste .wann b { display: block; font-size: .95rem; }
.liste .wann small { color: var(--ink-3); font-size: .78rem; }
.liste .was b { font-weight: 700; }
.liste .was p { margin: 2px 0 0; color: var(--ink-2); font-size: .9rem; }
.liste .meta { font-size: .8rem; color: var(--ink-3); margin-top: 3px; }
.liste .meta a { color: var(--ink-3); }
.liste .tun { display: flex; gap: 6px; align-items: center; }
@media (max-width: 560px) { .liste > li { grid-template-columns: auto 1fr; } .liste .tun { grid-column: 2; } }
.leer { color: var(--ink-3); font-size: .93rem; margin: 2px 0 0; }

.punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); margin-right: 6px; vertical-align: 1px; }
.punkt.rot { background: var(--rot); } .punkt.orange { background: var(--orange); } .punkt.gelb { background: #E3B500; } .punkt.gruen { background: var(--gruen); }

.marke { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; background: var(--surface-2); color: var(--ink-2); vertical-align: 1px; }
.marke.frist { background: var(--or-hell); color: var(--or); }
.marke.termin { background: #E8EFF7; color: var(--navy); }
.marke.aufgabe { background: var(--compass-hell); color: var(--compass); }
.marke.gremium { background: var(--gruen-hell); color: var(--gruen); }
.marke.status-wartet, .marke.status-laeuft { background: var(--compass-hell); color: var(--compass); }
.marke.status-fertig { background: var(--gruen-hell); color: var(--gruen); }
.marke.status-fehler, .marke.status-angehalten { background: var(--rot-hell); color: var(--rot); }

.gremien { display: grid; grid-template-columns: 1fr; gap: 10px; }
.gremium-karte { border: 1px solid var(--line); border-left: 3px solid var(--compass); border-radius: var(--r); padding: 10px 12px; }
.gremium-karte b { display: block; }
.gremium-karte dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: .86rem; }
.gremium-karte dt { color: var(--ink-3); } .gremium-karte dd { margin: 0; }

/* ------------------------------------------------ Tabellen */
.tabelle { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabelle th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.tabelle td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle a { font-weight: 700; text-decoration: none; }
.tabelle a:hover { text-decoration: underline; }
.rollen { overflow-x: auto; }

/* ------------------------------------------------ Vorschläge prüfen */
.vorschlag { border: 1px solid var(--line); border-radius: var(--r-gross); padding: 14px 16px; background: var(--surface); }
.vorschlag + .vorschlag { margin-top: 10px; }
.vorschlag-kopf { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.vorschlag-kopf b { font-size: 1rem; }
.vorschlag p { margin: 6px 0 0; color: var(--ink-2); }
.vorschlag dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 10px 0 0; font-size: .88rem; }
.vorschlag dt { color: var(--ink-3); } .vorschlag dd { margin: 0; }
.zitat { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--line-strong); background: var(--papier); font-size: .88rem; color: var(--ink-2); font-style: italic; }
.vorschlag .knopfreihe { margin-top: 12px; }
.verworfen { opacity: .65; }

.angaben { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: .93rem; }
.angaben dt { color: var(--ink-3); } .angaben dd { margin: 0; }

/* ------------------------------------------------ Formulare */
.feld { margin-bottom: 14px; }
.feld label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 4px; }
.feld input[type=text], .feld input[type=email], .feld input[type=password], .feld input[type=date], .feld input[type=file], .feld select, .feld textarea { width: 100%; font: inherit; font-size: 15px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.feld-hilfe { margin: 4px 0 0; font-size: .82rem; color: var(--ink-3); }
.feld-fehler, .formfehler { color: var(--rot); font-size: .86rem; margin: 4px 0 0; }
.formfehler { background: var(--rot-hell); padding: 8px 12px; border-radius: var(--r); margin-bottom: 14px; }
.feld.fehler input, .feld.fehler select { border-color: var(--rot); }
.feld.haken label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.feld.haken input { margin-top: 4px; }
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.blatt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-gross); padding: 26px 26px 22px; margin: 36px 0; }
.blatt h1 { font-size: 1.6rem; font-weight: 300; color: var(--navy); margin: 0 0 14px; }
.blatt-fuss { font-size: .88rem; color: var(--ink-3); margin: 16px 0 0; }
.filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .88rem; }
.filter select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }

/* ------------------------------------------------ Startseite */
.buehne { background: linear-gradient(180deg, var(--surface), var(--papier)); border-bottom: 1px solid var(--line); padding: 3.5rem 0 3.5rem; }
.buehne h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3rem); font-weight: 300; line-height: 1.1; letter-spacing: -.025em; color: var(--navy); margin: 0 0 1.1rem; max-width: 46rem; }
.buehne p.lead { font-size: 1.1rem; color: var(--ink-2); max-width: 40rem; margin: 0 0 1.6rem; }
.drei { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 2.5rem 0 3.5rem; }
@media (min-width: 760px) { .drei { grid-template-columns: repeat(3, 1fr); } }
.drei .karte h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--navy); }
.drei .karte p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.recht { padding: 2rem 0 3rem; } .recht h1 { font-weight: 300; color: var(--navy); } .recht h2 { font-size: 1.1rem; color: var(--navy); margin-top: 1.6rem; }
.offen { background: var(--or-hell); color: var(--or); padding: 0 4px; border-radius: 3px; }

/* ------------------------------------------------ Fuß */
.sitefoot { border-top: 1px solid var(--line); background: var(--surface); margin-top: auto; }
.sitefoot .inner { max-width: 1120px; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; font-size: .85rem; color: var(--ink-3); }
.sitefoot img { height: 34px; width: auto; display: block; }
.sitefoot nav { display: flex; gap: 16px; }
.sitefoot a { color: var(--ink-3); }

@media print {
  .sitehead, .sitefoot, .tun, .knopfreihe, .filter { display: none !important; }
  body { background: #fff; }
  .karte { border: 0; padding: 0; }
}

@media (max-width: 560px) { .bahn { padding: 0 16px; } .blatt { padding: 20px 18px; } }