/* mobile-first, ein Stylesheet, keine Frameworks. Markenfarben (--navy,
   --teal) setzt index.php aus der Konfiguration; hier stehen die Vorgaben. */
:root {
  --navy: #0B3550;
  --navy-dark: #082638;
  --teal: #2BB59A;
  --orange: #E8862E;
  --bg: #f4f6f8;
  --card: #ffffff;
  --text: #1c2b36;
  --muted: #6b7c8a;
  --line: #dde4ea;
  --danger: #c0392b;
  --radius: 10px;
  /* Textfarbe fuer Links: im Hellen die Marke, im Dunklen eine hellere Stufe */
  --link: var(--navy);
  /* Hinweisfarben (Fliesse: ok / warn / hint / info), Flaechen, Raster, Schatten */
  --ok-bg: #e6f6f1;   --ok-fg: #14735f;
  --warn-bg: #fdecea; --warn-fg: #c0392b;
  --hint-bg: #fef3e2; --hint-fg: #b05f10;
  --info-bg: #e7f0fe; --info-fg: #2c5a8c;
  --col-bg: #eceff3;  --row-bg: #f8fafb;  --grid-strong: #b6c2cc;
  --shadow: 9, 42, 66;
}
/* Dunkle Palette: gewaehlt (data-theme) oder Systemwunsch ohne Gegenwahl.
   Markenfarben bleiben — Kopfzeile und Knoepfe sehen im Dunklen gleich aus. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1519; --card: #171f26; --text: #e6ebef; --muted: #93a1ad; --line: #2a3541;
    --danger: #f28b7d; --link: #8ec5ea;
    --ok-bg: #143d33;   --ok-fg: #6fd3b5;
    --warn-bg: #4a1f1b; --warn-fg: #f28b7d;
    --hint-bg: #4a3212; --hint-fg: #f0b769;
    --info-bg: #1b2f45; --info-fg: #8ec5ea;
    --col-bg: #111820;  --row-bg: #1c2730;  --grid-strong: #3a4753;
    --shadow: 0, 0, 0;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1519; --card: #171f26; --text: #e6ebef; --muted: #93a1ad; --line: #2a3541;
  --danger: #f28b7d; --link: #8ec5ea;
  --ok-bg: #143d33;   --ok-fg: #6fd3b5;
  --warn-bg: #4a1f1b; --warn-fg: #f28b7d;
  --hint-bg: #4a3212; --hint-fg: #f0b769;
  --info-bg: #1b2f45; --info-fg: #8ec5ea;
  --col-bg: #111820;  --row-bg: #1c2730;  --grid-strong: #3a4753;
  --shadow: 0, 0, 0;
}
* { box-sizing: border-box; }
html { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); }
button { font: inherit; }

/* ---- Login ---- */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-card {
  background: var(--card); border-radius: 14px; padding: 36px 28px; width: 100%;
  max-width: 360px; text-align: center; box-shadow: 0 8px 30px rgba(var(--shadow), .12);
}
.login-logo {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 16px;
  background: var(--navy); color: #fff; font-size: 26px; font-weight: 700;
  display: grid; place-items: center; letter-spacing: -1px;
}
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-sub { margin: 0 0 22px; color: var(--muted); }
.dev-login { margin-top: 18px; display: flex; gap: 8px; }
.dev-login input { flex: 1; min-width: 0; }
.login-mail { width: 100%; margin-bottom: 10px; }
.login-code { text-transform: uppercase; letter-spacing: 2px; font-size: 17px; text-align: center; }
.login-meldung { border-radius: 8px; padding: 9px 12px; font-size: 14px; text-align: left; }
.login-meldung.ok { background: var(--ok-bg); color: var(--ok-fg); }
.login-meldung.warn { background: var(--warn-bg); color: var(--warn-fg); }

/* ---- Grundelemente ---- */
.btn {
  display: inline-block; border: 1px solid var(--line); background: var(--card);
  color: var(--text); border-radius: 8px; padding: 9px 14px; cursor: pointer;
  text-decoration: none; text-align: center;
}
.btn:hover { border-color: var(--navy); }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-dark); }
.btn-block { display: block; width: 100%; }
.btn-sm { padding: 5px 10px; font-size: 13px; border-radius: 6px; }
.btn-danger { color: var(--danger); }
.icon { vertical-align: -3px; flex: none; }
.btn .icon, .badge .icon { vertical-align: -2px; }
input, select, textarea {
  font: inherit; color: inherit; background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 1px; border-color: transparent;
}
textarea { width: 100%; resize: vertical; }

/* ---- Layout ---- */
.topbar {
  background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 20;
  padding: 0 max(12px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 10px; height: 52px;
}
.topbar .brand { font-weight: 700; text-decoration: none; color: #fff; white-space: nowrap; }
.topbar .brand em { color: var(--teal); font-style: normal; }
.topbar form { flex: 1; max-width: 480px; }
.topbar input[type=search] {
  width: 100%; background: rgba(255,255,255,.14); border: none; color: #fff;
  border-radius: 7px; padding: 7px 11px;
}
.topbar input[type=search]::placeholder { color: rgba(255,255,255,.65); }
.topbar .user { margin-left: auto; font-size: 13px; opacity: .85; white-space: nowrap; }
.topbar .user a { color: #fff; }
/* Abmelden ist ein Formular (POST statt Link) — SameSite=Lax schuetzt dann
   vollstaendig. Sehen soll es weiter aus wie der Link daneben. */
.abmelden-form { display: contents; }
button.abmelden {
  background: none; border: none; padding: 0; font: inherit; color: #fff;
  text-decoration: underline; cursor: pointer;
}

.tabs {
  background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; gap: 2px; padding: 0 8px; position: sticky; top: 52px; z-index: 19;
  overflow-x: auto;
}
.tabs a {
  padding: 11px 13px; text-decoration: none; color: var(--muted);
  border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500;
}
.tabs a.active { color: var(--link); border-bottom-color: var(--orange); }
.tab-ico, .tab-kurz { display: none; }

main { max-width: 980px; margin: 0 auto; padding: 16px 16px 90px; }
main.breit { max-width: none; }
/* Grosse Bildschirme: mehr Breite nutzen, Projektseite zweispaltig
   (Aufgaben links, Notizen/Protokolle/Anhaenge/Zeiten rechts), Panel breiter */
@media (min-width: 1280px) {
  main { max-width: 1240px; }
  .p-spalten { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 18px; align-items: start; }
  .p-spalten .p-neben .card { padding: 12px 14px; }
}
@media (min-width: 1600px) {
  main { max-width: 1480px; }
  .p-spalten { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); }
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 14px;
}
.card h2 { margin: 0 0 10px; font-size: 16px; }
/* Zuklappbare Karte (Verwaltung): die Ueberschrift wird zur Schaltflaeche.
   Zugeklappt traegt sie keinen unteren Abstand, sonst steht die Karte hohl da.
   ACHTUNG: nicht ".panel" nennen — das ist die feste Seitenleiste (Zeile 286). */
details.klappkarte > summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none;
  margin: -2px -4px; padding: 2px 4px; border-radius: 6px;
}
details.klappkarte > summary::-webkit-details-marker { display: none; }
details.klappkarte > summary::before {
  content: ''; width: 0; height: 0; flex: none;
  border-left: 5px solid var(--muted); border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; transition: transform .15s;
}
details.klappkarte[open] > summary::before { transform: rotate(90deg); }
details.klappkarte > summary:hover h2 { color: var(--navy); }
details.klappkarte > summary h2 { margin: 0; }
details.klappkarte[open] > summary { margin-bottom: 12px; }
details.klappkarte .klappkarte-info { margin-left: auto; color: var(--muted); font-size: 13px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.leer { color: var(--muted); padding: 14px 4px; }

/* ---- Schnelleingabe ---- */
.quickadd { display: flex; gap: 8px; margin-bottom: 14px; }
.quickadd input { flex: 1; min-width: 0; }

.privat-check {
  display: inline-flex; align-items: center; padding: 0 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--muted); gap: 5px;
}
.privat-check:has(input:checked) { color: var(--navy); border-color: var(--navy); }
.privat-check input { accent-color: var(--navy); }

/* ---- Listen ---- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.liste li:last-child { border-bottom: none; }
/* Reihenfolge der Projektliste (Admins): Griff zum Ziehen, auf Touch-Geraeten Pfeile */
.sortgriff { color: var(--muted); cursor: grab; flex: none; display: inline-flex; margin-right: -6px; }
.sortgriff:active { cursor: grabbing; }
.sortpfeile { display: none; flex: none; flex-direction: column; margin-right: -4px; }
.sortpfeile button { background: none; border: none; color: var(--muted); font-size: 11px; line-height: 1; padding: 5px 8px; cursor: pointer; }
.sortpfeile button:hover { color: var(--text); }
@media (hover: none) { .sortgriff { display: none; } .sortpfeile { display: inline-flex; } }
.liste li.zieht { opacity: .4; }
.liste li.ziel-oben { box-shadow: inset 0 3px 0 var(--navy); }
.liste li.ziel-unten { box-shadow: inset 0 -3px 0 var(--navy); }
.liste li.teil .sortgriff, .liste li.teil .sortpfeile { margin-left: 18px; }
.liste li[hidden], .liste[hidden], .gruppe[hidden] { display: none; }
.klapp { background: none; border: none; padding: 2px; margin: 0 -2px 0 -6px; color: var(--muted); cursor: pointer;
  display: inline-flex; border-radius: 4px; }
.klapp .icon { transition: transform .15s; }
.klapp.offen .icon { transform: rotate(90deg); }
.klapp.leer { visibility: hidden; }
.klapp:hover:not(:disabled) { background: var(--row-bg); color: var(--text); }
.liste .titel { flex: 1; min-width: 0; cursor: pointer; overflow-wrap: anywhere; }
.liste .titel:hover { color: var(--link); text-decoration: underline; }
.liste .meta { color: var(--muted); font-size: 13px; white-space: nowrap; }
.liste input[type=checkbox] { width: 19px; height: 19px; accent-color: var(--teal); flex: none; }
.erledigt .titel { text-decoration: line-through; color: var(--muted); }
.erledigt .titel:hover { color: var(--muted); }
.badge {
  background: var(--bg); border-radius: 20px; padding: 2px 9px; font-size: 12px;
  color: var(--muted); white-space: nowrap;
}
.badge.faellig { background: var(--warn-bg); color: var(--warn-fg); }
.badge.heute { background: var(--hint-bg); color: var(--hint-fg); }
.projekt-link { text-decoration: none; font-weight: 500; }
.liste li.haupt .projekt-link, .liste li.haupt .titel { font-weight: 600; }
.liste li.teil {
  margin-left: 10px; padding-left: 16px;
  border-left: 2px solid var(--line);
}
.liste li.teil .projekt-link { font-weight: 400; }
.teil-pfeil { color: var(--muted); }
.badge.betrifft { background: var(--info-bg); color: var(--info-fg); }
.betrifft-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -6px 0 12px; }
.betrifft-zeile {
  display: block; padding: 8px 4px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.betrifft-zeile.teil { padding-left: 28px; }
.betrifft-zeile input { accent-color: var(--teal); margin-right: 8px; width: 17px; height: 17px; vertical-align: -3px; }
.gruppe { margin: 18px 0 6px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); font-weight: 600; }

/* ---- Projektseite ---- */
.projekt-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.projekt-kopf h1 { margin: 0; font-size: 21px; flex: 1; min-width: 200px; overflow-wrap: anywhere; }

/* ---- Projektfarben (Zugehoerigkeit von Aufgaben) ---- */
.pfarbe {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: 1px; flex: none;
}
.pfarbe.gross { width: 13px; height: 13px; vertical-align: 0; }
/* Projektbeschriftung an Aufgaben: Name + Farbe in einem Element.
   Ohne Projektfarbe faellt der Chip auf die neutrale Badge-Optik zurueck. */
.chip-projekt {
  display: inline-block; max-width: 300px; overflow: hidden; text-overflow: ellipsis;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
  border-radius: 20px; padding: 1px 9px; font-size: 12px; white-space: nowrap;
  text-decoration: none;
}
.chip-projekt:hover { filter: brightness(.93); }
/* Pfad im Chip: das Hauptprojekt gedaempft und bei Platzmangel gekuerzt,
   das Teilprojekt dahinter immer vollstaendig */
.chip-projekt .eltern {
  display: inline-block; max-width: 130px; overflow: hidden; text-overflow: ellipsis;
  vertical-align: bottom; opacity: .72;
}
.erledigt .chip-projekt { opacity: .6; }
.farbwahl {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin: -4px 0 14px; padding: 10px 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.farbwahl[hidden] { display: none; }   /* sonst gewinnt die Klasse gegen [hidden] */
/* In einer Tabellenzeile (Jira-Projektfarben) ohne eigenen Rahmen und Abstand */
.vw .farbwahl { margin: 0; padding: 0; background: none; border: none; gap: 6px; }
.vw .farbwahl .swatch { width: 22px; height: 22px; }
.swatch {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0;
}
.swatch.aktiv { border-color: var(--card); box-shadow: 0 0 0 2px var(--navy); }
.swatch.keine { background: var(--card); color: var(--muted); font-size: 13px; }
.crumb { font-size: 13px; margin-bottom: 2px; }
.zeige-erledigt { background: none; border: none; color: var(--muted); cursor: pointer;
  padding: 8px 4px; font-size: 13px; }
.zeige-erledigt:hover { color: var(--navy); }

/* ---- Detail-Panel (Aufgabe/Notiz) ---- */
.overlay {
  position: fixed; inset: 0; background: rgba(var(--shadow), .35); z-index: 30;
}
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  background: var(--card); z-index: 31; display: flex; flex-direction: column;
  box-shadow: -6px 0 30px rgba(var(--shadow), .2);
}
.panel-kopf {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
/* Titel ist ein Textfeld, das mit dem Inhalt waechst — auf dem Telefon bricht
   ein langer Titel um, statt am Rand abgeschnitten zu werden */
.panel-kopf .titel-edit {
  flex: 1; min-width: 0; font-size: 17px; font-weight: 600; line-height: 1.3;
  border: none; padding: 2px 4px; background: transparent; width: 100%;
  resize: none; overflow: hidden; font-family: inherit; color: inherit; border-radius: 4px;
}
.panel-kopf .titel-edit:focus { outline: 2px solid var(--teal); }
.panel-kopf .akey.gross { align-self: flex-start; margin-top: 5px; }
.panel-close { align-self: flex-start; }
.a-projekt-zeile .btn-link-copy { margin-left: auto; }
#a-beobachten.an { color: var(--teal); border-color: var(--teal); }
/* "in <Projekt> zum Projekt": Auswahl nimmt den Platz, der Link bricht nie um */
.a-projekt-zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.a-projekt-zeile select { flex: 1; min-width: 0; }
.a-projekt-zeile a { white-space: nowrap; }
.a-fuss { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); text-align: right; }
.panel-close { background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 2px 4px; line-height: 1; }
.panel-close:hover { color: var(--navy); }
.panel-close .icon { vertical-align: middle; }
.panel-body { flex: 1; overflow-y: auto; padding: 14px 16px; }
@media (min-width: 1280px) { .panel { width: min(720px, 100%); } .panel-body { padding: 16px 22px; } }
@media (min-width: 1800px) { .panel { width: min(840px, 100%); } }
.feldzeile { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.feld { display: flex; flex-direction: column; gap: 4px; }
.feld label { font-size: 12px; color: var(--muted); font-weight: 600; }
.feld select, .feld input { min-width: 150px; }
.abschnitt { margin: 18px 0 8px; font-weight: 600; font-size: 14px; }

.md { overflow-wrap: anywhere; }
.md p { margin: 0 0 8px; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 22px; }
.md code { background: var(--bg); border-radius: 4px; padding: 1px 5px; font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.md pre { font-size: 13px; line-height: 1.45; white-space: pre; }
.md-toolbar button code { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.md pre { background: var(--bg); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md h1, .md h2, .md h3 { font-size: 15px; margin: 14px 0 6px; }
.md a.jira { background: var(--info-bg); border-radius: 4px; padding: 0 5px; text-decoration: none; }
.md img { max-width: 100%; height: auto; display: block; margin: 6px 0; border: 1px solid var(--line); border-radius: 6px; }
.md a.md-bild { display: inline-block; max-width: 100%; }
.md-edit-hinweis { cursor: pointer; color: var(--muted); border: 1px dashed var(--line);
  border-radius: 8px; padding: 10px 12px; }
/* Hinweis, wer dasselbe Feld gerade offen hat — informiert, sperrt nicht */
.md-andere {
  background: var(--hint-bg); color: var(--hint-fg); border-radius: 6px;
  padding: 6px 10px; margin-bottom: 6px; font-size: 13px;
}
.md-andere[hidden] { display: none; }
.md-andere .icon { vertical-align: -3px; }
/* Konflikt: beide Fassungen nebeneinander, am Telefon untereinander */
.konflikt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.konflikt-box {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  max-height: 40vh; overflow: auto; background: var(--bg);
}
@media (max-width: 640px) { .konflikt { grid-template-columns: 1fr; } }

.md-toolbar { display: flex; gap: 4px; margin-bottom: 6px; }
.md-toolbar button {
  border: 1px solid var(--line); background: var(--card); border-radius: 6px;
  min-width: 34px; padding: 5px 8px; cursor: pointer; font-size: 14px; color: var(--text);
}
.md-toolbar button:hover { border-color: var(--navy); }
.mention { background: var(--info-bg); color: var(--info-fg); border-radius: 4px; padding: 0 3px; }
.mention-liste { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 5px; }
.mention-liste button {
  border: 1px solid var(--line); background: var(--card); color: var(--navy);
  border-radius: 20px; padding: 3px 11px; font-size: 13px; cursor: pointer;
}
.mention-liste button:hover { border-color: var(--teal); }
.md-anzeige { cursor: pointer; border-radius: 8px; padding: 4px; margin: -4px; }
.md-anzeige:hover { background: var(--bg); }

.kommentar { border-top: 1px solid var(--line); padding: 10px 0; }
.kommentar .kopf { font-size: 13px; color: var(--muted); margin-bottom: 3px; }
/* Textknoepfe fuer Kommentar-Aktionen: unauffaellig, erst beim Ueberfahren betont */
/* ---- Verweise (siehe auch) ---- */
.verweise { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; }
.verweis { display: inline-flex; align-items: center; gap: 6px; }
.verweis.erledigt .chip-projekt { text-decoration: line-through; opacity: .6; }
.verweis-suche { position: relative; }
.verweis-suche input { width: 100%; }
.treffer {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(var(--shadow), .14); max-height: 240px; overflow-y: auto;
}
.treffer-zeile {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 7px 10px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--line);
}
.treffer-zeile:last-child { border-bottom: none; }
.treffer-zeile:hover { background: var(--bg); }
/* Aufgaben-Key: gedaempft vor dem Titel, im Panel groesser und kopierbar */
.akey { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em;
  margin-right: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.akey.gross { font-size: 14px; cursor: copy; align-self: center; }
/* Projektschluessel in der Projektliste: abgesetzt hinter dem Titel */
.pkey { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.akey-link { color: var(--link); font-weight: 600; text-decoration: none; }
.akey-link:hover { text-decoration: underline; }
.key-feld { width: 90px; text-transform: uppercase; font-family: ui-monospace, Menlo, monospace; }
.wdh { color: var(--muted); margin-left: 6px; vertical-align: 0; }
.wdh .icon { vertical-align: -1px; }
.k-aktionen { margin-left: 6px; }
.lnk { background: none; border: none; padding: 0 4px; color: var(--muted);
  font-size: 12px; cursor: pointer; text-decoration: underline dotted; }
.lnk:hover { color: var(--link); }
.k-edit { width: 100%; margin-bottom: 6px; }
.a-loeschen { float: right; }
.kommentar-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
/* Seltener gebrauchte Abschnitte des Aufgaben-Panels: eingeklappt, Zaehler in
   der Ueberschrift — das Panel bleibt kurz, die Kommentare oben erreichbar */
.a-details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 6px; }
.a-details summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0;
  list-style: none; }
.a-details summary::-webkit-details-marker { display: none; }
.a-details summary::before { content: '▸'; display: inline-block; width: 14px; color: var(--muted); }
.a-details[open] summary::before { content: '▾'; }
.a-details > :not(summary) { margin-top: 8px; }
.kommentar-form .btnrow { display: flex; justify-content: flex-end; gap: 8px; }

.anhaenge a { display: inline-flex; align-items: center; gap: 6px; margin: 0 10px 6px 0; }
.anhang-zeile { display: inline-flex; align-items: center; gap: 4px; margin: 0 14px 6px 0; }
.anhang-zeile a { margin: 0; }
.upload-label { display: inline-block; cursor: pointer; }
.upload-label input { display: none; }

/* ---- Zeitleiste ---- */
.zl-card { padding: 0; overflow: hidden; }
.zl-kopfzeile { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px; border-bottom: 1px solid var(--line); }
.zl-kopfzeile select { max-width: 260px; }
.zl-kopf-trenner { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.zl-linie.stark { background: var(--grid-strong); opacity: 1; }
.zl-monat.stark { font-weight: 700; color: var(--text); }
.zl-scroll { overflow-x: auto; }
.zl-inner { position: relative; }
/* z-index 2: die Heute-Linie laeuft in jeder Spur mit und muss ueber den Balken liegen */
.zl-heute { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--orange); z-index: 2; }
.zl-datum { display: none; }   /* nur am Telefon, wo es keine Tooltips gibt */
.zl-zeile { display: flex; border-bottom: 1px solid var(--line); }
.zl-zeile.kopf { background: var(--row-bg); }
.zl-zeile.monatszeile { border-bottom: 1px solid var(--line); }
.zl-label {
  position: sticky; left: 0; width: 200px; min-width: 200px; z-index: 2;
  background: var(--card); border-right: 1px solid var(--line);
  padding: 6px 10px; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zl-zeile.kopf .zl-label { background: var(--row-bg); font-weight: 600; }
.zl-label.aufgabe { cursor: pointer; color: var(--text); }
.zl-label.aufgabe:hover { text-decoration: underline; }
.zl-track { position: relative; height: 30px; flex: none; }
.zl-monate { height: 24px; }
.zl-monat { position: absolute; top: 4px; font-size: 11px; color: var(--muted);
  padding-left: 4px; border-left: 1px solid var(--line); }
.zl-linie { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); opacity: .55; }
.zl-balken { position: absolute; top: 7px; height: 16px; min-width: 8px;
  border-radius: 8px; cursor: pointer; z-index: 1; }
/* Grundfarben, solange ein Projekt keine eigene Farbe hat (sonst inline gesetzt) */
.zl-balken.haupt { background: var(--navy); }
.zl-balken.teil { background: var(--teal); }
/* Ueberzogene Balken behalten die Projektfarbe und bekommen einen roten Rand */
.zl-balken.faellig { box-shadow: 0 0 0 2px var(--danger); }
/* Huellkurve aus den Teilprojekten: flacher und blasser als ein echter Zeitraum */
.zl-balken.abgeleitet { top: 11px; height: 8px; opacity: .5; }
.zl-fuss { padding: 10px 12px; }
.zl-lg { display: inline-block; vertical-align: -1px; width: 26px; height: 10px;
  border-radius: 5px; margin-right: 4px; }
.zl-lg.ueber { background: var(--navy); box-shadow: 0 0 0 2px var(--danger); }
.zl-lg.abgeleitet { background: var(--navy); opacity: .5; height: 6px; }

/* ---- Zeiterfassung ---- */
.zeit-form { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.zeit-form #z-stunden { width: 70px; }
.zeit-form #z-bemerkung { flex: 1; min-width: 120px; }
.zeit-form #zb-stunden { width: 70px; }
.zeit-form #zb-bemerkung { flex: 1; min-width: 120px; }
.zeit-form #zb-account { max-width: 220px; }
/* Zeitbuchung: das gewaehlte Ziel steht im Suchfeld selbst */
#zb-q.gewaehlt { font-weight: 600; border-color: var(--navy); }
.zeit-form #z-account { max-width: 220px; }
.liste .ref-key { width: 120px; margin-right: 8px; font-size: 13px; }
.zeit-zeile { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.feld-mit-knopf { display: flex; gap: 6px; align-items: center; }
.feld-mit-knopf select { flex: 1; }
/* Am Telefon bricht der Trenner die Zeile (Betrifft / Zeitraum / Schluessel
   untereinander), am Desktop ist er nur ein feiner Strich in einer Zeile */
.betrifft-trenner { flex-basis: 100%; height: 0; }
@media (min-width: 641px) {
  .betrifft-trenner { flex-basis: auto; width: 1px; height: 22px; background: var(--line); margin: 0 8px; }
  .betrifft-row { row-gap: 8px; }
}

/* ---- Kanban-Board ---- */
/* align-items: stretch (Vorgabe) statt flex-start: alle Spalten sind gleich
   hoch, damit eine fast leere Spalte auf ganzer Hoehe Ablageflaeche bietet —
   sonst muss man eine Karte von unten erst ganz nach oben ziehen. */
.kb-wrap { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kb-spalte {
  background: var(--col-bg); border-radius: var(--radius); flex: 1 1 0;
  min-width: 250px; max-width: 420px;
  display: flex; flex-direction: column;
}
.kb-kopf {
  padding: 10px 12px 6px; font-weight: 600; font-size: 14px;
  background: var(--col-bg); border-radius: var(--radius) var(--radius) 0 0;
}
/* Ab dieser Breite passen alle drei Spalten nebeneinander: Das Board braucht
   dann kein eigenes Scrollen, und erst dadurch koennen die Spaltenkoepfe beim
   Scrollen der langen Seite oben kleben (in einem overflow-Container nicht). */
@media (min-width: 900px) {
  .kb-wrap { overflow-x: visible; }
  .kb-kopf {
    position: sticky; top: 92px; z-index: 1;              /* Kopfleiste + Tabs */
    box-shadow: 0 3px 5px -4px rgba(var(--shadow), .3);       /* setzt sich beim Scrollen ab */
  }
}
.kb-liste { display: flex; flex-direction: column; gap: 8px; padding: 4px 10px 10px;
  min-height: 60px; flex: 1; }
.kb-leer { color: var(--muted); font-size: 13px; padding: 10px 2px; }
.kb-karte {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  border-left: 4px solid var(--line);   /* Projektfarbe, inline gesetzt */
  padding: 8px 10px; cursor: grab;
}
.kb-karte:active { cursor: grabbing; }
.kb-karte:hover { border-top-color: var(--navy); border-right-color: var(--navy);
  border-bottom-color: var(--navy); }
.kb-titel { font-size: 14px; margin-bottom: 4px; overflow-wrap: anywhere; }
.kb-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  font-size: 12px; color: var(--muted); }
.kb-spalte.dragover { outline: 2px dashed var(--teal); outline-offset: -2px; }
.kb-spalte.erledigt .kb-karte { opacity: .65; }
.kb-spalte.erledigt .kb-titel { text-decoration: line-through; }
.badge.bearb { background: var(--ok-bg); color: var(--ok-fg); }

.jira-box { border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.jira-box p { margin: 0 0 8px; }
.vw-unter { margin: 18px 0 4px; font-size: 15px; }

/* ---- Profil ---- */
.profil-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.profil-kopf h1 { margin: 0; font-size: 21px; }
.profil-kopf p { margin: 2px 0 0; }
.profil-kopf .btn { margin-left: auto; }
.profil-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: var(--navy); color: #fff; display: grid; place-items: center;
}
.topbar .profil-link { display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; }
.topbar .profil-link:hover { text-decoration: underline; }
.topbar .user { display: flex; align-items: center; gap: 12px; }

.einstell { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.benachr .titel { cursor: default; }
.benachr select { max-width: 190px; }
.benachr li { flex-wrap: wrap; }
.benachr .titel:hover { color: inherit; text-decoration: none; }
.schalter { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.schalter input { accent-color: var(--teal); width: 17px; height: 17px; }
.schalter span { font-size: 13px; color: var(--muted); }
.einstell label { font-weight: 600; font-size: 14px; }

/* ---- Verknüpfte Installationen ---- */
.verknuepf summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.verknuepf summary .btn { font-weight: 400; margin-left: 4px; }
.verknuepf summary .icon { vertical-align: -3px; margin-right: 4px; }
.verknuepf .liste li { flex-wrap: wrap; }
.verknuepf .titel { cursor: default; }
.verknuepf .titel:hover { color: inherit; text-decoration: none; }
.verknuepf-fehler { color: var(--warn-fg); background: var(--warn-bg); border-radius: 8px;
  padding: 8px 10px; margin-top: 6px; }
.token-zeile { display: flex; gap: 6px; align-items: center; }
.token-feld { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; }
/* Jira-Tickets: kein Haekchen, an dessen Stelle ein Symbol in Kaestchenbreite */
.kein-haken { width: 19px; flex: none; display: inline-grid; place-items: center; color: var(--muted); }
.jira-form { display: grid; gap: 6px; }
.jira-form input { width: 100%; }
/* Aufgaben aus einer anderen Instanz: gleiche Zeile, dezent abgesetzt */
.liste li.fremd .titel { text-decoration: none; }
.liste li.fremd .titel:hover { text-decoration: underline; }
.jira-konten { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.jira-konten label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jira-konten select { max-width: 220px; }

/* ---- Chip-Filter (Projektliste) ---- */
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.chip {
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  border-radius: 20px; padding: 4px 12px; font-size: 13px; cursor: pointer;
}
.chip:hover { border-color: var(--navy); }
.chip.chip-bereich { font-weight: 600; }
.chip.aktiv { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip.chip-reset { color: var(--muted); }
/* Betrifft-Filter der Projektliste, zuklappbar */
.filter-klapp { margin-bottom: 12px; }
.filter-klapp > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 4px 0; user-select: none; }
.filter-klapp > summary::-webkit-details-marker { display: none; }
.filter-klapp > summary::before { content: '▸'; color: var(--muted); font-size: 12px; transition: transform .15s; }
.filter-klapp[open] > summary::before { transform: rotate(90deg); }
.filter-klapp > summary:hover .muted { color: var(--text); }
.filter-klapp .filter-chips { margin: 8px 0 0; }
.filter-klapp .chip-kopf { padding: 2px 10px; font-size: 12px; cursor: default; }
.filter-klapp > summary .chip-reset { padding: 2px 8px; font-size: 12px; }

/* ---- Push-Karte ---- */
.push-karte { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; font-size: 14px; }
.push-knoepfe { display: flex; gap: 8px; flex: none; }

/* ---- Verwaltung ---- */
table.vw { width: 100%; border-collapse: collapse; }
table.vw th, table.vw td { text-align: left; padding: 8px 8px; border-bottom: 1px solid var(--line); }
table.vw th { font-size: 12px; text-transform: uppercase; color: var(--muted); }
.vw-scroll { overflow-x: auto; }

/* ---- Auswertung nach Accounts ---- */
.vw.ausw td.r, .vw.ausw th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vw.ausw .ausw-acc { cursor: pointer; }
.vw.ausw .ausw-acc:hover td { background: var(--row-bg); }
.vw.ausw .ausw-person td { font-size: 13px; padding-top: 4px; padding-bottom: 4px; }
.vw.ausw .ausw-summe td { border-top: 2px solid var(--line); }
.klapp-txt { color: var(--muted); font-size: 12px; }

/* ---- Meine Zeiten: Wochenraster ---- */
.zt-leiste { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.zt-woche { margin-left: auto; font-weight: 600; color: var(--muted); }
.zt-woche.voll { color: var(--teal); }
.zt-woche-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: start; }
.zt-tag { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-height: 120px; }
.zt-tag.heute { border-color: var(--teal); box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 25%, transparent); }
.zt-tag.zukunft { opacity: .75; }
.zt-kopf { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.zt-wtag { font-weight: 700; }
.zt-datum { font-size: 12px; color: var(--muted); }
.zt-summe { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.zt-summe.voll { color: var(--teal); }
.zt-summe.teil { color: var(--orange); }
.zt-balken { height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.zt-balken span { display: block; height: 100%; background: var(--teal); }
.zt-buchung { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; overflow-wrap: break-word; }
.zt-buchung.tempo { background: var(--info-bg); margin: 0 -10px; padding: 6px 10px; border-top: none; }
.zt-zeile { display: flex; align-items: center; gap: 6px; }
.zt-zeile .btn-danger { margin-left: auto; padding: 1px 5px; opacity: .6; }
.zt-zeile .btn-danger:hover { opacity: 1; }
.zt-zeile .badge { font-size: 10px; padding: 0 5px; }
.zt-h { font-weight: 700; white-space: nowrap; }
.zt-buchung .titel { cursor: pointer; line-height: 1.3; }
.zt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: break-word; }
.zt-vorschlaege { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 6px; }
.zt-vk { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.zt-vorschlag { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; font-size: 13px; }
.zt-vorschlag + .zt-vorschlag { border-top: 1px solid var(--line); }
.zt-aktion { display: flex; gap: 4px; align-items: center; }
.zt-aktion input { width: 52px; padding: 4px 6px; font-size: 13px; }
.zt-aktion .btn { padding: 3px 8px; font-size: 12px; }
.zt-neu { margin-top: 6px; padding: 4px 0; }
@media (max-width: 1279px) { .zt-woche-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .zt-woche-grid { grid-template-columns: 1fr; } .zt-tag { min-height: 0; } .zt-tag.zukunft { opacity: 1; } }

/* ---- Meldungen ---- */
#toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--navy-dark); color: #fff; border-radius: 8px; padding: 10px 18px;
  z-index: 50; opacity: 0; transition: opacity .25s; pointer-events: none;
  max-width: calc(100vw - 32px);
}
#toast.zeigen { opacity: 1; }

@media (max-width: 640px) {
  .topbar .user span.name, .topbar .user .abmelden, .topbar .user .feedback-link { display: none; }
  .topbar .user .abmelden-form { display: none; }
  .topbar form { max-width: none; }
  main { padding: 12px 12px 110px; }
  .card { padding: 12px; }
  .panel { width: 100%; }
  /* Panel-Kopf: mit Key rutscht der Titel in eine eigene Zeile unter Key
     und Schliessen-Kreuz, damit lange Woerter nicht in einer schmalen Spalte
     zerfallen. 16px bleibt ueber der iOS-Zoom-Schwelle fuer Eingabefelder. */
  .panel-kopf .titel-edit { font-size: 16px; }
  /* Projektzeile: Knopf nur als Symbol, damit der Projektname Platz behaelt */
  .a-projekt-zeile .btn-link-copy .btn-text,
  .a-projekt-zeile #a-beobachten .btn-text { display: none; }
  .a-projekt-zeile .btn-link-copy,
  .a-projekt-zeile #a-beobachten { padding-left: 8px; padding-right: 8px; }
  .panel-kopf.mit-key { flex-wrap: wrap; row-gap: 4px; }
  .panel-kopf.mit-key .akey.gross { margin-top: 0; }
  .panel-kopf.mit-key .panel-close { margin-left: auto; }
  .panel-kopf.mit-key .titel-edit { order: 2; flex-basis: 100%; }
  .feld select, .feld input { min-width: 130px; }
  /* Kein overflow-x mehr auf html/body: hidden hatte jedes sticky
     ausgehebelt, und iOS loest darunter fixe Leisten beim Scrollen vom Rand.
     Dass nichts breiter als der Bildschirm wird, sichern die Ansichten selbst
     (Prozent-Zeitleiste, eigene Scroll-Container fuer Board und Tabellen). */

  /* Untere Tab-Bar (App-Muster): alle Tabs sichtbar, Icon ueber Kurzlabel */
  .tabs {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 25;
    border-top: 1px solid var(--line); border-bottom: none;
    padding: 0 0 env(safe-area-inset-bottom); gap: 0;
    justify-content: space-around; overflow: visible;
    box-shadow: 0 -2px 10px rgba(var(--shadow), .06);
  }
  .tabs a {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    align-items: center; gap: 2px; padding: 7px 2px 8px;
    font-size: 10.5px; border-bottom: none; border-top: 2px solid transparent;
  }
  .tabs a.active { border-top-color: var(--orange); }
  .tab-ico { display: block; line-height: 1; }
  .tab-ico .icon { display: block; vertical-align: 0; }
  .tab-lang { display: none; }
  .tab-kurz { display: block; }

  /* Zeitleiste am Telefon: Beschriftung ÜBER die Zeitachse statt daneben.
     Die Achse füllt dann die Bildschirmbreite (Balken sitzen in Prozent),
     nichts wird abgeschnitten, und es bleibt beim vertikalen Scrollen.
     Die Pixelbreiten stehen inline am Element — nur !important kommt daran. */
  /* kein overflow — sonst kann die Monatsleiste unten nicht am Fenster kleben */
  .zl-card, .zl-scroll { overflow: visible; }
  .zl-zeile.monatszeile {
    position: sticky; top: 52px; z-index: 3;    /* unter der Kopfleiste */
    background: var(--card); box-shadow: 0 3px 5px -4px rgba(var(--shadow), .3);
  }
  .zl-inner, .zl-track { width: 100% !important; }
  .zl-zeile { display: block; padding: 8px 12px 10px; }
  .zl-zeile.monatszeile { padding-bottom: 0; }
  .zl-label {
    position: static; width: auto; min-width: 0; border-right: none;
    padding: 0 0 5px; white-space: normal; overflow: visible;
    display: flex; align-items: baseline; gap: 8px;
  }
  .zl-label.aufgabe { padding-left: 12px; }
  .zl-datum { display: block; margin-left: auto; font-size: 11px;
    color: var(--muted); white-space: nowrap; }
  .zl-track { height: 18px; }
  .zl-monate { height: 20px; }
  .zl-balken { top: 1px; height: 16px; }
  .zl-balken.abgeleitet { top: 5px; height: 8px; }
  .zl-monat { font-size: 10px; }   /* Dichte regelt das Skript, nicht das CSS */

  /* Listenzeilen: Titel hat Vorrang (Mindestbreite), Badges brechen bei
     Bedarf in eine zweite Zeile um statt den Titel zu zerquetschen */
  .liste li { flex-wrap: wrap; row-gap: 6px; }
  .liste .titel { flex: 999 1 auto; min-width: min(70%, 240px); }
  .liste .meta { white-space: normal; }

  /* Panel-Felder und Formulare untereinander */
  .feld { flex: 1 1 45%; }
  .zeit-form input#z-datum { flex: 1; }
}
/* Verwaltung: Platzhalter aus dem Jira-Import mit einer echten Person zusammenfuehren */
.vw .zusammen { display: inline-flex; gap: 6px; align-items: center; margin-left: 8px; flex-wrap: wrap; }
.vw .zusammen select { max-width: 200px; }
/* Meine Aufgaben: Projektfilter */
.meine-filter select { flex: 1; max-width: 420px; }
.meine-filter input[type="search"] { flex: 1; min-width: 160px; }
/* Aktualisieren-Knoepfe fuer Jira und Verbund, rechts in der Filterleiste */
.meine-filter { flex-wrap: wrap; }
.meine-sync { display: flex; gap: 6px; flex: none; margin-left: auto; }
.meine-sync .btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.meine-sync .btn.fehler { border-color: var(--danger); color: var(--danger); }

/* Jira-Import: offene Zeit-Konten mit Wahl und Platzhalter-Name */
.jira-konto { padding: 8px 0; border-top: 1px solid var(--line); }
.jira-konto:first-child { border-top: none; }
.jira-konto-kopf { margin-bottom: 6px; }
.jira-konto-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.jira-konto-wahl select, .jira-konto-wahl input { flex: 1; min-width: 180px; }

/* Feedback */
.btn-icon { background: none; border: none; cursor: pointer; color: var(--muted); padding: 2px 4px; line-height: 1; }
.btn-icon:hover { color: var(--warn-fg); }
.fb-form textarea { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.fb-senden { text-align: right; }
.fb-liste { list-style: none; margin: 0; padding: 0; }
.fb-eintrag { padding: 12px 0; border-top: 1px solid var(--line); }
.fb-eintrag:first-child { border-top: none; }
.fb-eintrag.status-erledigt, .fb-eintrag.status-abgelehnt { opacity: .6; }
.fb-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.fb-kopf .meta { color: var(--muted); font-size: 12px; }
.fb-kopf .fb-weg { margin-left: auto; }
.fb-kopf .fb-status { font-size: 12px; padding: 2px 6px; }
.badge.typ-fehler { background: var(--warn-bg); color: var(--warn-fg); }
.badge.typ-wunsch { background: var(--hint-bg); color: var(--hint-fg); }
.badge.st-geplant { background: var(--hint-bg); color: var(--hint-fg); }
.fb-text { white-space: normal; }
.fb-antwort { margin-top: 8px; padding: 8px 10px; background: var(--bg); border-radius: 6px; font-size: 13px; }
.fb-antworten { margin: 8px 0 0; }

/* ======================================================================
   kon-wiki: Wiki-Layout (Seitenleiste mit Baum + Inhalt), Raumkarten,
   Seitenkopf, Verlauf. Der Rest des Stylesheets stammt aus kon-projekte.
   ====================================================================== */
.wiki { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.seitenleiste { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.raum-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.raum-kopf .raum-name { font-weight: 700; color: var(--text); text-decoration: none; }
.raum-kopf .raum-name:hover { color: var(--link); }
.badge.freigabe { background: var(--info-bg); color: var(--info-fg); display: inline-flex; align-items: center; gap: 3px; }
.badge.intern { background: var(--hint-bg); color: var(--hint-fg); display: inline-flex; align-items: center; gap: 3px; }
.neue-seite { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.baum, .baum ul { list-style: none; margin: 0; padding: 0; }
.baum-zeile { display: flex; align-items: center; gap: 2px; min-height: 28px; }
.baum-zeile a { color: var(--text); text-decoration: none; padding: 3px 6px; border-radius: 6px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.baum-zeile a:hover { background: var(--row-bg); color: var(--link); }
.baum li.aktuell > .baum-zeile a { background: var(--info-bg); color: var(--info-fg); font-weight: 600; }
.baum .klapp { margin: 0; padding: 2px; width: 20px; flex: none; }
.baum .klapp.leer { visibility: hidden; }
.baum-toggle { display: none; }
@media (max-width: 899px) {
  .seitenleiste { display: none; }
  .wiki.baum-auf .seitenleiste { display: block; }
  .baum-toggle { display: inline-flex; align-items: center; gap: 5px; width: fit-content; order: -1; }
}
@media (min-width: 900px) {
  .wiki { grid-template-columns: 260px minmax(0, 1fr); }
  .seitenleiste { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
}
.inhalt { min-width: 0; }
.seite-kopf { margin-bottom: 14px; }
.brotkrumen { font-size: 13px; color: var(--muted); margin-bottom: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.brotkrumen a { color: var(--muted); }
.brotkrumen a:hover { color: var(--link); }
.seite-kopf h1 { font-size: 26px; margin: 0 0 6px; line-height: 1.25; display: flex; align-items: center; gap: 8px; }
.seite-kopf h1.editierbar { cursor: text; }
.seite-kopf h1.editierbar:hover { color: var(--link); }
.seite-kopf h1 input { font: inherit; width: 100%; padding: 2px 6px; border: 1px solid var(--navy); border-radius: 6px; background: var(--card); color: var(--text); }
.seite-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.btn-link { background: none; border: none; color: var(--link); cursor: pointer; padding: 0; font-size: inherit; display: inline-flex; align-items: center; gap: 3px; }
.btn-link:hover { text-decoration: underline; }
.seite-aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.seite-aktionen .btn { display: inline-flex; align-items: center; gap: 5px; }
.seite-text { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 14px; min-height: 120px; }
.seite-text .md-anzeige { cursor: text; }
.seite-text .md h2 { font-size: 20px; margin: 22px 0 8px; }
.seite-text .md h3 { font-size: 17px; margin: 18px 0 6px; }
.seite-text .md h4 { font-size: 15px; margin: 14px 0 4px; }
.seite-text .md p { line-height: 1.6; }
.seite-text .md img { max-width: 100%; border-radius: 6px; }
.seite-text .md-toolbar { margin-bottom: 8px; }
.seite-text textarea { width: 100%; min-height: 300px; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.md-tipp { margin-right: auto; }
.raum-beschreibung { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px; }
.raum-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-bottom: 14px; }
.raum-karte { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--text);
  transition: border-color .15s, box-shadow .15s; }
.raum-karte:hover { border-color: var(--navy); box-shadow: 0 4px 14px rgba(var(--shadow), .08); }
.raum-titel { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.raum-besch { margin-top: 4px; }
.raum-meta { margin-top: 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.raum-form label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.raum-form input[type="text"], .raum-form textarea, .raum-form select { display: block; width: 100%; margin-top: 4px; }
.raum-form input[type="color"] { vertical-align: middle; margin: 4px 8px 0 0; }
.upload-zone { display: flex; align-items: center; gap: 6px; justify-content: center; border: 1px dashed var(--line); border-radius: 8px; padding: 12px; margin-top: 8px; color: var(--muted); cursor: pointer; font-size: 13px; }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--navy); color: var(--text); background: var(--row-bg); }
.treffer-liste .auszug { display: block; font-weight: 400; margin-top: 2px; }
.verlauf li { flex-wrap: wrap; }
.sortpfeile { display: inline-flex; flex: none; flex-direction: column; margin-right: -4px; }
.sortpfeile button { background: none; border: none; color: var(--muted); font-size: 10px; line-height: 1; padding: 3px 6px; cursor: pointer; }
.sortpfeile button:hover:not(:disabled) { color: var(--text); }
.sortpfeile button:disabled { opacity: .3; cursor: default; }

/* Inhaltsverzeichnis und tote Links */
.toc { background: var(--row-bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; margin: 0 0 16px; font-size: 14px; }
.toc summary { cursor: pointer; font-weight: 600; user-select: none; }
.toc ol { margin: 8px 0 4px; padding-left: 18px; }
.toc li { margin: 3px 0; }
.toc a { color: var(--link); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.md a.tot { color: var(--danger); text-decoration: line-through; }
.md a.tot::after { content: ' ⚠'; text-decoration: none; display: inline-block; }

/* Verschieben im Seitenbaum */
.baum-zeile[draggable="true"] { cursor: grab; }
.baum li.zieht > .baum-zeile { opacity: .4; }
.baum-zeile.ziel-vor { box-shadow: inset 0 3px 0 var(--navy); }
.baum-zeile.ziel-nach { box-shadow: inset 0 -3px 0 var(--navy); }
.baum-zeile.ziel-in { background: var(--info-bg); outline: 2px dashed var(--navy); outline-offset: -2px; border-radius: 6px; }