/* Projekta – eigenes, ruhiges Erscheinungsbild. Hell und dunkel ueber prefers-color-scheme. */
:root {
  --grund: #f6f7f9; --flaeche: #ffffff; --flaeche2: #f0f2f5; --linie: #e2e5ea; --linie2: #cfd4dc;
  --text: #1c2430; --leise: #5d6878; --akzent: #0f766e; --akzent-hell: #ccfbf1; --akzent-text: #ffffff;
  --rot: #c2410c; --gelb: #b7791f; --gruen: #15803d; --blau: #2563eb; --grau: #64748b;
  --schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0f141a; --flaeche: #161c24; --flaeche2: #1d2530; --linie: #26303c; --linie2: #354152;
    --text: #e6eaf0; --leise: #9aa5b4; --akzent: #2dd4bf; --akzent-hell: #134e4a; --akzent-text: #04211e;
    --rot: #fb923c; --gelb: #fbbf24; --gruen: #4ade80; --blau: #60a5fa; --grau: #94a3b8;
    --schatten: 0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--grund); color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--akzent); }

.zeile { display: flex; align-items: center; gap: 6px; }

/* ---------- Kopf */
.kopf { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 10px 20px;
  background: var(--flaeche); border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; letter-spacing: .2px; }
.marke-zeichen { width: 26px; height: 26px; border-radius: 7px; background: var(--akzent); display: grid; place-items: center; }
.marke-zeichen span { display: block; width: 12px; height: 12px; border: 2.5px solid var(--akzent-text); border-radius: 3px; border-right-color: transparent; }
.projektwahl { min-width: 220px; }
.reiter { display: flex; gap: 4px; background: var(--flaeche2); padding: 3px; border-radius: 9px; }
.reiter a { padding: 6px 14px; border-radius: 7px; text-decoration: none; color: var(--leise); font-weight: 500; }
.reiter a.aktiv { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.band { background: var(--akzent-hell); color: var(--text); text-align: center; font-size: 12.5px; padding: 4px 12px; }

/* ---------- Bedienelemente */
.knopf { border: 1px solid var(--linie2); background: var(--flaeche); border-radius: 8px; padding: 7px 13px; cursor: pointer; font-weight: 500; }
.knopf:hover { border-color: var(--leise); }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.knopf.gefahr { color: var(--rot); }
.knopf.klein { padding: 4px 9px; font-size: 12.5px; }
.knopf:disabled { opacity: .5; cursor: default; }
input[type=text], input[type=password], input[type=date], input[type=search], select, textarea {
  border: 1px solid var(--linie2); background: var(--flaeche); border-radius: 8px; padding: 7px 10px; min-height: 36px; }
textarea { min-height: 110px; resize: vertical; width: 100%; }
input:focus, select:focus, textarea:focus, .knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
label.feld { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--leise); }
label.feld > * { font-size: 14px; color: var(--text); }

.inhalt { padding: 20px; }
.leiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.leiste .abstand { flex: 1; }
.leer { color: var(--leise); padding: 40px; text-align: center; }

/* ---------- Abzeichen */
.abz { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--flaeche2); color: var(--leise); white-space: nowrap; }
.typ-Aufgabe { color: var(--blau); } .typ-Meilenstein { color: var(--akzent); } .typ-Fehler { color: var(--rot); }
.punkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.prio-Hoch { background: var(--rot); } .prio-Mittel { background: var(--gelb); } .prio-Niedrig { background: var(--grau); }
.st { font-weight: 600; }
.st-Offen { color: var(--grau); } .st-In-Arbeit { color: var(--blau); } .st-Prüfung { color: var(--gelb); } .st-Erledigt { color: var(--gruen); }
.kuerzel { width: 26px; height: 26px; border-radius: 50%; background: var(--akzent-hell); color: var(--text); display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; }
.ueberfaellig { color: var(--rot); font-weight: 600; }

/* ---------- Board */
.board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 14px; overflow-x: auto; align-items: start; }
.spalte { background: var(--flaeche2); border-radius: var(--radius); padding: 10px; min-height: 200px; }
.spalte.ziel { outline: 2px dashed var(--akzent); outline-offset: -2px; }
.spalte h3 { margin: 2px 4px 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--leise); display: flex; justify-content: space-between; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--schatten); }
.karte:hover { border-color: var(--linie2); }
.karte.zieht { opacity: .5; }
.karte .zeile { display: flex; align-items: center; gap: 8px; }
.karte .titel { margin: 6px 0 8px; font-weight: 500; }
.karte .schl { font-size: 12px; color: var(--leise); font-weight: 600; }
.karte .fuss { justify-content: space-between; font-size: 12px; color: var(--leise); }

/* ---------- Liste */
.tabelle-huelle { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow-x: auto; }
table.liste { width: 100%; border-collapse: collapse; }
table.liste th, table.liste td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
table.liste td.titel { white-space: normal; min-width: 220px; }
table.liste th { font-size: 12px; color: var(--leise); font-weight: 600; cursor: pointer; user-select: none; background: var(--flaeche); position: sticky; top: 0; }
table.liste tbody tr { cursor: pointer; }
table.liste tbody tr:hover { background: var(--flaeche2); }
table.liste tr:last-child td { border-bottom: none; }

/* ---------- Zeitleiste */
.zl-huelle { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); overflow: auto; max-height: calc(100vh - 190px); }
.zl-huelle svg { display: block; }
.zl-name { fill: var(--text); font-size: 12.5px; cursor: pointer; }
.zl-schl { fill: var(--leise); font-size: 11px; font-weight: 600; }
.zl-kopf { fill: var(--leise); font-size: 11px; }
.zl-kopf-hg { fill: var(--flaeche); }
.zl-linie { stroke: var(--linie); }
.zl-wochenende { fill: var(--flaeche2); }
.zl-heute { stroke: var(--rot); stroke-width: 1.5; stroke-dasharray: 4 3; }
.zl-pfeil { stroke: var(--leise); fill: none; stroke-width: 1.2; }
.zl-pfeilspitze { fill: var(--leise); }
.zl-balken { cursor: grab; }
.zl-balken.zieht { cursor: grabbing; opacity: .8; }
.zl-balken rect.hg { fill-opacity: .22; stroke-width: 1.4; }
.zl-balken rect.fort { fill-opacity: .55; }
.f-Offen { fill: var(--grau); stroke: var(--grau); } .f-In-Arbeit { fill: var(--blau); stroke: var(--blau); }
.f-Prüfung { fill: var(--gelb); stroke: var(--gelb); } .f-Erledigt { fill: var(--gruen); stroke: var(--gruen); }
.f-Meilenstein { fill: var(--akzent); stroke: var(--akzent); }
.zl-trenner { stroke: var(--linie2); }
.zl-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--leise); }

/* ---------- Dialog */
dialog { border: none; border-radius: 14px; padding: 0; width: min(760px, 96vw); background: var(--flaeche); color: var(--text); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(10, 15, 25, .45); }
.dlg-kopf { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--linie); }
.dlg-kopf h2 { margin: 0; font-size: 16px; flex: 1; }
.dlg-rumpf { padding: 18px 20px; display: grid; gap: 14px; max-height: 70vh; overflow: auto; }
.dlg-fuss { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--linie); }
.dlg-fuss .abstand { flex: 1; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.abschnitt { font-size: 12.5px; font-weight: 600; color: var(--leise); text-transform: uppercase; letter-spacing: .5px; margin-top: 6px; }
.vorg-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.kommentar { background: var(--flaeche2); border-radius: 9px; padding: 9px 12px; }
.kommentar .wer { font-size: 12px; color: var(--leise); margin-bottom: 3px; }
.geheim { font: 600 20px/1.2 ui-monospace, Consolas, monospace; background: var(--flaeche2); padding: 12px 16px; border-radius: 9px; text-align: center; letter-spacing: 1px; }

/* ---------- Hinweis */
.hinweis { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--grund); padding: 10px 18px; border-radius: 10px; box-shadow: var(--schatten); z-index: 50; max-width: 92vw; }
.hinweis[hidden] { display: none; }

/* ---------- Anmeldung */
.anmeldung { min-height: 100%; display: grid; place-items: center; padding: 20px; }
.anmeldung form { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 28px; width: min(380px, 100%); display: grid; gap: 14px; box-shadow: var(--schatten); }
.anmeldung h1 { margin: 0 0 4px; font-size: 20px; }
.fehler { color: var(--rot); min-height: 1.2em; font-size: 13px; }

@media (max-width: 720px) {
  .kopf { padding: 8px 12px; gap: 10px; }
  .inhalt { padding: 12px; }
  .projektwahl { min-width: 0; flex: 1; }
  .board { grid-template-columns: repeat(4, 82vw); }
}
.st-farbe-Offen { background: var(--grau); } .st-farbe-In-Arbeit { background: var(--blau); }
.st-farbe-Prüfung { background: var(--gelb); } .st-farbe-Erledigt { background: var(--gruen); }
.zl-balken { touch-action: none; }