/* mobile-first, ein Stylesheet, keine Frameworks. Zwei Aussehen (data-stil an
   <html>): konradin (Vorgabe, dieser Block) und privat (Block weiter unten). Nur
   ausdruecklich gesetzte Markenfarben aus der config.php setzt index.php inline. */
:root {
  --navy: #0B3550;
  --navy-dark: #082638;
  --teal: #2BB59A;
  /* Wortmarken-Teil auf der dunklen Kopfzeile und Akzent als Text/Symbol auf der Karte */
  --marke-akzent: var(--teal);
  --akzent-text: var(--teal);
  --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;
  /* Textmarker (==…==): helle Flaechen, dunkler Text bleibt lesbar */
  --mk-gelb: #fff0a0; --mk-gruen: #ccf0d6; --mk-blau: #d4e6fb; --mk-rot: #fbd5d1; --mk-lila: #e6d9f7;
}
/* 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;
    --mk-gelb: #5a4a12; --mk-gruen: #1e4a30; --mk-blau: #1d3d60; --mk-rot: #5c2522; --mk-lila: #432f63;
  }
}
: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;
  --mk-gelb: #5a4a12; --mk-gruen: #1e4a30; --mk-blau: #1d3d60; --mk-rot: #5c2522; --mk-lila: #432f63;
}
/* Aussehen „privat“ (Petrol wie Dokio): nur die Tokens, der Aufbau bleibt.
   Gelb nur auf Petrol bzw. dunkel (Wortmarke), nie als Text auf Weiss;
   Statusfarben (ok/hint/warn/info) bleiben wie bei konradin. */
:root[data-stil="privat"] {
  --navy: #0F6A73;            /* Petrol: Kopfzeile, Knoepfe, Marke */
  --navy-dark: #0B5158;
  --teal: #4FB7C1;            /* Fokusring, Balken, aktive Raender */
  --marke-akzent: #FFC861;    /* Gelb in der Wortmarke auf Petrol */
  --akzent-text: #0F6A73;     /* Akzent als Text/Symbol auf Weiss */
  --orange: #DB5A3F;          /* Koralle: aktiver Eintrag, Marker, Hinweis-Akzent */
  --bg: #F3F5F7; --text: #17212B; --muted: #5A6573;
  --shadow: 7, 52, 58;
}
/* privat dunkel: Knoepfe bleiben Petrol, Text in hellem Petrol */
@media (prefers-color-scheme: dark) {
  :root[data-stil="privat"]:not([data-theme="light"]) {
    --bg: #0F1619; --card: #172126; --line: #2A3A40; --text: #E6EEF0; --muted: #9DB0B6;
    --link: #A8E0E5; --akzent-text: #4FB7C1;
    --col-bg: #0C1316; --row-bg: #1C2A2F; --grid-strong: #3A4C53;
    --shadow: 0, 0, 0;
  }
}
:root[data-stil="privat"][data-theme="dark"] {
  --bg: #0F1619; --card: #172126; --line: #2A3A40; --text: #E6EEF0; --muted: #9DB0B6;
  --link: #A8E0E5; --akzent-text: #4FB7C1;
  --col-bg: #0C1316; --row-bg: #1C2A2F; --grid-strong: #3A4C53;
  --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;
  /* Doppeltippen zoomt auf Handy und Tablet nicht mehr — Aufziehen bleibt */
  touch-action: manipulation;
}
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 { display: block; width: 64px; height: 64px; margin: 0 auto 14px; }
.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; }
/* eine Auswahl ist nie breiter als ihr Platz — lange Optionstexte (Personennamen) blaehen sie sonst auf */
select { max-width: 100%; }

/* ---- 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(--marke-akzent); 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); }

/* ---- Navigation (app.js: navPunkte/shell) ----
   Breit: Reiterleiste mit „Mehr ▾“ fuer Seltenes, Konto-Menue am Profilbild,
   App-Umschalter in der Kopfzeile. Bis 760 px: untere Leiste mit hoechstens
   fuenf Eintraegen, „Mehr“ als Blatt von unten, schlanke Kopfzeile. */
.tabs a, .tabs-mehr { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.tabs-mehr { padding: 11px 13px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-weight: 500;
  color: var(--muted); cursor: pointer; white-space: nowrap; }
.tabs-mehr:hover, .tabs a:hover { color: var(--text); }
.tabs-mehr.active { color: var(--link); border-bottom-color: var(--orange); }
.tabs-mehr[aria-expanded="true"] .icon { transform: rotate(180deg); }
.tabs a:focus-visible, .tabs-mehr:focus-visible, .unten-leiste a:focus-visible, .unten-leiste button:focus-visible,
.konto-knopf:focus-visible, .topbar .profil-link:focus-visible, .topbar .brand:focus-visible, .app-wechsel a:focus-visible,
.nav-eintrag:focus-visible, .glocke:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: 6px; }
.topbar .brand { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.topbar form { min-width: 140px; }
.topbar .user { flex: none; }
/* viele oder lange App-Namen: der Umschalter schrumpft und scrollt, statt das Suchfeld zu verdraengen */
.topbar .app-wechsel { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.konto-knopf { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: #fff; font: inherit;
  cursor: pointer; padding: 4px 6px; border-radius: 8px; position: relative; max-width: 240px; }
.konto-knopf:hover, .konto-knopf[aria-expanded="true"], .konto-knopf.aktiv { background: rgba(255,255,255,.12); }
.konto-knopf .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.konto-knopf .avatar { box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.konto-knopf .nav-neu-punkt { position: absolute; top: 2px; left: 24px; box-shadow: 0 0 0 2px var(--navy); }
.topbar .profil-link { display: inline-flex; border-radius: 50%; text-decoration: none; }
.topbar .profil-link.aktiv .avatar { box-shadow: 0 0 0 2px var(--orange); }
.nur-schmal { display: none !important; }
/* Marken: Zahl (z. B. wartende Personen) und Punkt (neue Version) */
.nav-zahl { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #d63638; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-sizing: border-box; }
.nav-neu-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); flex: none; }
.nav-neu-punkt[hidden] { display: none; }
/* Aufklappmenues (Mehr ▾, Konto) — fest positioniert, damit nichts sie abschneidet */
.nav-menue { position: fixed; z-index: 60; min-width: 220px; max-width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 70px); overflow: auto;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 6px;
  box-shadow: 0 10px 30px rgba(var(--shadow), .18); }
.nav-menue[hidden] { display: none; }
.nav-menue hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.nav-menue-kopf { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.nav-menue-wer { display: flex; flex-direction: column; min-width: 0; }
.nav-menue-kopf strong { overflow-wrap: anywhere; }
.nav-eintrag { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
a.nav-eintrag:hover, button.nav-eintrag:hover { background: var(--row-bg); }
.nav-eintrag.aktiv { color: var(--link); font-weight: 600; background: var(--row-bg); }
.nav-eintrag .icon { color: var(--muted); }
.nav-eintrag.aktiv .icon { color: var(--link); }
.nav-eintrag-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.nav-eintrag kbd { font: 12px ui-monospace, monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.nav-abmelden { display: block; }
/* Untere Leiste und Blatt nur am Telefon */
.unten-leiste { display: none; }
dialog.nav-blatt { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: min(88dvh, 720px); box-sizing: border-box;
  border: 0; border-radius: 16px 16px 0 0; padding: 6px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--card); color: var(--text);
  overflow: auto; overscroll-behavior: contain; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); animation: nav-blatt-auf .18s ease-out; font: inherit; }
dialog.nav-blatt::backdrop { background: rgba(10, 30, 50, .45); }
@keyframes nav-blatt-auf { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.nav-blatt-griff { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 6px; }
.nav-blatt-kopf { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px; }
.nav-blatt-kopf h2 { margin: 0; font-size: 17px; }
.nav-gruppe { padding: 4px 0; border-top: 1px solid var(--line); }
.nav-gruppe:first-child { border-top: 0; }
.nav-gruppe h3 { margin: 6px 10px 2px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
dialog.nav-blatt .nav-eintrag { min-height: 46px; font-size: 16px; }
dialog.nav-blatt .nav-abmelden { border-top: 1px solid var(--line); padding-top: 4px; }

@media (max-width: 760px) {
  .nur-schmal { display: inline-flex !important; }
  .nur-breit, .tabs, .nav-menue, .topbar .app-wechsel { display: none !important; }
  .topbar { gap: 8px; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
  .topbar .brand { max-width: 38vw; }
  .topbar form { flex: 1 1 0; max-width: none; min-width: 0; }
  .topbar input[type=search] { font-size: 16px; padding: 6px 10px; }   /* 16 px: iOS zoomt sonst beim Antippen */
  .topbar .user { gap: 6px; opacity: 1; }
  main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .unten-leiste {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -2px 10px rgba(var(--shadow), .06);
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .unten-leiste > a, .unten-leiste > button {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 8px;
    font: inherit; font-size: 11px; font-weight: 500; color: var(--muted); text-decoration: none; background: none;
    border: 0; border-top: 2px solid transparent; cursor: pointer; min-height: 52px; box-sizing: border-box;
  }
  .unten-leiste > .active { color: var(--link); border-top-color: var(--orange); }
  .unten-leiste .tab-ico { position: relative; display: block; line-height: 1; }
  .unten-leiste .tab-ico .icon { display: block; vertical-align: 0; }
  .unten-leiste .tab-ico .nav-zahl { position: absolute; top: -5px; left: 14px; box-shadow: 0 0 0 2px var(--card); }
  .unten-leiste .tab-ico .nav-neu-punkt { position: absolute; top: -2px; right: -5px; box-shadow: 0 0 0 2px var(--card); }
  .unten-leiste .tab-kurz { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* schmale Tablets: Reiter enger, damit nichts umbricht oder scrollt */
@media (min-width: 761px) and (max-width: 1023px) {
  .tabs { padding: 0 4px; gap: 0; }
  .tabs a, .tabs-mehr { padding: 11px 9px; }
  .konto-knopf .name { 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; }
/* Ein select ist von Haus aus so breit wie sein laengster Eintrag und laesst
   sich ohne min-width: 0 nicht schmaler druecken — am Telefon ragte die
   Projektwahl des Boards dann samt Knopf ueber den Rand hinaus. */
.quickadd select { 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; }
/* Anfasser zum Umsortieren (Projektliste fuer Admins, Checkliste): Ziehen
   mit Maus, Finger und Stift ueber Pointer-Events (ziehSortierung in app.js).
   touch-action: none, sonst scrollt die Seite statt zu ziehen; die Flaeche
   ist per Padding fingergross, ohne die Zeile hoeher zu machen. */
.sortgriff {
  color: var(--muted); cursor: grab; flex: none; display: inline-flex; border-radius: 6px;
  padding: 8px 6px; margin: -8px 0 -8px -6px;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.sortgriff:hover, .sortgriff:focus-visible { color: var(--text); background: var(--bg); outline: none; }
.sortgriff:active { cursor: grabbing; }
body.zieht-liste { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.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 { margin-left: 12px; }
/* Tabellenzeilen (Vorlagen) beim Ziehen */
tr.zieht { opacity: .4; }
tr.ziel-oben > td { box-shadow: inset 0 3px 0 var(--navy); }
tr.ziel-unten > td { box-shadow: inset 0 -3px 0 var(--navy); }
td > .sortgriff { margin: -4px 0 -4px -2px; vertical-align: middle; }
.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(--akzent-text); border-color: var(--teal); }
/* Wiedervorlage: Knopf mit Klappmenue direkt darunter */
#a-wv.an { color: var(--hint-fg); border-color: var(--hint-fg); }
.wv-wrap { position: relative; display: inline-flex; }
.wv-menue {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 250px; padding: 10px; display: grid; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.wv-menue[hidden] { display: none; }
.wv-schnell { display: flex; gap: 6px; flex-wrap: wrap; }
.wv-menue label { display: grid; gap: 3px; }
.wv-menue input { width: 100%; }
.wv-fuss { display: flex; gap: 6px; justify-content: flex-end; }
/* Am Telefon haengt das Menue sonst rechts aus dem Bild */
@media (max-width: 560px) { .wv-menue { left: auto; right: 0; } }
.badge.wv { background: var(--hint-bg); color: var(--hint-fg); }
.badge.wv.wartet { background: var(--bg); color: var(--muted); }
.zurueck-zeile { margin-top: 16px; text-align: center; }
.liste.zurueck li { opacity: .7; }
/* "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; }
/* Die Projektwahl darf nie unter eine lesbare Breite fallen — vorher hatte sie
   min-width: 0 und wurde von den Knoepfen (nowrap) auf null gedrueckt */
.a-projekt-zeile select { flex: 1 1 200px; min-width: 150px; }
.a-projekt-zeile a { white-space: nowrap; }
/* Aktionsknoepfe der Aufgabe (Mitlesen, Wiedervorlage, Link, Duplizieren,
   Nachschlagen) als eigene Gruppe rechts. Die Zeile richtet sich nach der
   Breite des Panels, nicht des Fensters (Container-Abfrage): bis 900 px zeigen
   die Knoepfe nur ihr Symbol (Titel erklaert sie), unter 620 px rutschen sie
   in eine zweite Zeile. Die Handy-Regeln weiter unten gelten zusaetzlich. */
.panel { container-type: inline-size; }
.a-aktionen { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; margin-left: auto; justify-content: flex-end; }
.a-aktionen .btn { white-space: nowrap; }
@container (max-width: 900px) {
  .a-aktionen .btn-text { display: none; }
  .a-aktionen #a-wv .btn-text { display: inline; }
  .a-aktionen .btn { padding-left: 8px; padding-right: 8px; }
}
@container (max-width: 620px) {
  .a-projekt-zeile { flex-wrap: wrap; }
  .a-aktionen { flex-basis: 100%; justify-content: flex-start; gap: 6px; margin-left: 0; }
}
.a-nachschlagen { margin: 6px 0 10px; }
.a-nachschlagen input { width: 100%; }
.a-nachschlagen .treffer-zeile .akey { margin-right: 6px; }
.a-fuss { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); text-align: right; }
/* Zuletzt geoeffnete Aufgaben: Leiste unten, ueber Abdunkelung und Panel (z 30/31),
   damit man auch bei offenem Panel wechseln kann; das Panel endet darueber */
.zuletzt-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 33; display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; background: var(--card); border-top: 1px solid var(--line); overflow-x: auto; }
.zuletzt-leiste .zl-titel { margin-right: 4px; white-space: nowrap; }
.zuletzt-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 4px 6px 4px 8px; border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer; font-size: 13px; background: var(--bg); white-space: nowrap; }
.zuletzt-chip:hover { border-color: var(--teal); }
.zuletzt-chip.aktiv { background: var(--card); border-color: var(--teal); box-shadow: inset 0 -2px 0 var(--teal); }
.zuletzt-chip .zl-text { overflow: hidden; text-overflow: ellipsis; }
.zuletzt-chip .lnk { color: var(--muted); padding: 0 2px; font-size: 12px; }
.zuletzt-chip .lnk:hover { color: var(--navy); }
body.mit-zuletzt { padding-bottom: 46px; }
body.mit-zuletzt .panel { bottom: 46px; }
@media (max-width: 899px) { .zuletzt-leiste { display: none; } body.mit-zuletzt { padding-bottom: 0; } body.mit-zuletzt .panel { bottom: 0; } }
/* Zurueck zum beiseitegelegten Panel (Nachschlagen aus einer Aufgabe heraus) */
.panel-zurueck { flex-basis: 100%; order: -1; align-self: flex-start; background: none; border: none; cursor: pointer;
  color: var(--akzent-text); font: inherit; font-size: 13px; padding: 0 4px 4px; text-align: left; display: inline-flex; align-items: center; gap: 4px; }
.panel-zurueck[hidden] { display: none; }   /* display: inline-flex wuerde hidden sonst uebersteuern */
.panel-zurueck:hover { text-decoration: underline; }
.panel-kopf { flex-wrap: wrap; }
/* Vorschau-Karte ueber Aufgaben-Links */
.hover-karte { position: fixed; z-index: 40; width: min(460px, calc(100vw - 16px)); max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--card); color: var(--fg, inherit);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(var(--shadow), .22); font-size: 14px; }
.hover-karte .hk-kopf { display: flex; gap: 6px; align-items: baseline; margin-bottom: 6px; }
.hover-karte .hk-zeile { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.hover-karte .hk-text { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.hover-karte .hk-kommentare { margin-top: 8px; border-top: 1px solid var(--line); }
.hover-karte .hk-kommentar { padding-top: 6px; line-height: 1.4; white-space: pre-line; }
.hover-karte .hk-text { white-space: pre-line; }
.badge.erledigt { background: var(--ok-bg); color: var(--ok-fg); }
.panel-close, .panel-breite { background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 2px 4px; line-height: 1; align-self: flex-start; }
.panel-close:hover, .panel-breite:hover { color: var(--navy); }
.panel-close .icon, .panel-breite .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%); } }
/* Panel-Breite bei Bedarf: Knopf im Kopf schaltet auf breit, der Griff am
   linken Rand zieht frei — beides erst ab Schreibtischbreite, auf dem Handy
   ist das Panel ohnehin bildschirmbreit */
.panel-breite, .panel-griff { display: none; }
@media (min-width: 900px) {
  .panel.breit { width: min(1200px, calc(100% - 40px)); }
  .panel-breite { display: inline-block; }
  .panel-griff { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; cursor: col-resize; }
  .panel-griff:hover, .panel.zieht .panel-griff { background: var(--teal); opacity: .45; }
  .panel.zieht, .panel.zieht * { user-select: none; cursor: col-resize; }
}
.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 li > ul, .md li > ol { margin: 2px 0 0; }   /* Unterliste: haengt am Punkt, ohne Absatz-Abstand */
.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; }
/* Auszeichnungen: ~~durchgestrichen~~, ++unterstrichen++, ==markiert== in fuenf Farben */
.md mark, .farb-wahl .mk-probe { background: var(--mk-gelb); color: inherit; }
.md mark { border-radius: 3px; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.md .mk-gruen, .farb-wahl .mk-gruen { background: var(--mk-gruen); }
.md .mk-blau, .farb-wahl .mk-blau { background: var(--mk-blau); }
.md .mk-rot, .farb-wahl .mk-rot { background: var(--mk-rot); }
.md .mk-lila, .farb-wahl .mk-lila { background: var(--mk-lila); }
.md u { text-underline-offset: 2px; }
/* Kopier-Knopf an Code-Bloecken (codeKopierbar): sitzt im Rahmen, scrollt nicht mit */
.code-block { position: relative; }
.code-kopieren { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 30px; height: 30px; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted);
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer; box-shadow: -6px 0 8px var(--bg); }
.code-kopieren:hover, .code-kopieren:focus-visible { color: var(--text); border-color: var(--navy); }
.code-kopieren.ok { color: var(--ok-fg); border-color: currentColor; }
/* Farbauswahl fuer den Textmarker (farbWahl) */
.farb-wahl { position: fixed; z-index: 60; display: flex; gap: 4px; padding: 6px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 8px 30px rgba(var(--shadow), .22); }
.farb-wahl button { min-width: 36px; height: 34px; padding: 0 6px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--text); cursor: pointer; }
.farb-wahl button.an { outline: 2px solid var(--navy); outline-offset: 1px; }
.farb-wahl .mk-ohne { background: var(--card); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.farb-wahl button:hover { border-color: var(--navy); }
/* Marker-Knopf in den Leisten: Symbol mit gelbem Strich darunter */
.mk-knopf { display: inline-flex; border-bottom: 3px solid var(--mk-gelb); padding-bottom: 1px; line-height: 0; }
@media print {
  .code-kopieren { display: none !important; }
  .md mark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.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; }
/* Ungespeicherter Text aus dem Browser */
.entwurf-hinweis {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px;
  background: var(--info-bg); color: var(--info-fg); border-radius: 6px;
  padding: 6px 10px; margin-bottom: 6px; font-size: 13px;
}
.entwurf-hinweis .icon { vertical-align: -3px; }
.entwurf-hinweis .muted { color: inherit; opacity: .8; }
.entwurf-hinweis .btnrow { margin: 0; }
/* 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); }
/* Buchungsdialog: eine nach Rang gemischte Liste, darf hoeher werden */
#zb-treffer { max-height: min(360px, 50vh); }
.treffer-mehr { margin: 0; padding: 6px 10px; }
/* 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; }
/* Abwesenheiten in der Zeitleiste */
.zl-zeile.abwesenheit .zl-label { font-size: 13px; }
.zl-balken.abw { top: 9px; height: 12px; border-radius: 4px; cursor: default; }
.zl-balken.abw-urlaub, .zl-lg.abw-urlaub { background: #4a9edb; }
.zl-balken.abw-krank, .zl-lg.abw-krank { background: #e07b7b; }
.zl-balken.abw-sonstiges, .zl-lg.abw-sonstiges { background: #9aa8b5; }
.zt-abw { background: var(--info-bg); color: var(--info-fg); }
/* Abwesenheit anderer ohne Art (nur Admins und die Person selbst sehen sie): neutral, gestreift */
.zl-balken.abw-abwesend, .zl-lg.abw-abwesend { background: repeating-linear-gradient(135deg, #9aa8b5 0 4px, #c9d1d9 4px 8px); }
/* Verwaltung → Personen: wann eine inaktive Person automatisch anonymisiert wird */
.vw-anonym-am { display: block; }
.vw-anonym-am[hidden] { display: none; }
.abw-form { flex-wrap: wrap; margin-top: 10px; }
.abw-form input[type="date"] { flex: 0 1 11em; }
.abw-form input[type="text"] { flex: 1 1 10em; }
.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; }
/* Account-Kombinationsfeld: Eingabefeld in Zeilenhoehe, Treffer klappen darunter auf;
   das select bleibt unsichtbar als Wertetraeger. hidden am select versteckt alles. */
.acc-wahl { position: relative; min-width: 180px; flex: 1; }
.acc-wahl:has(> select[hidden]) { display: none; }
.acc-wahl > select { display: none; }
.acc-wahl .acc-feld { width: 100%; }
.acc-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; max-height: 260px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px;
  box-shadow: 0 8px 24px rgba(var(--shadow), .18);
}
.acc-liste button { display: block; width: 100%; text-align: left; background: none; border: none; font: inherit;
  color: inherit; padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.acc-liste button:hover, .acc-liste button.akt { background: var(--bg); }
.acc-liste button.leer { color: var(--muted); }
.acc-liste .muted { display: block; padding: 7px 9px; }
.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, .feld-mit-knopf input[type="date"] { flex: 1; min-width: 0; }
/* 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); }
.badge.status-wartet { background: var(--hint-bg); color: var(--hint-fg); }
.kb-spalte.wartet .kb-karte { opacity: .85; }

.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 { flex: none; cursor: pointer; }
.profil-avatar .avatar { width: 56px; height: 56px; }
/* Avatar: Initialen im farbigen Kreis oder Bild, immer rund */
.avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; flex: none;
  color: #fff; font-weight: 600; letter-spacing: .02em; line-height: 1; vertical-align: middle; object-fit: cover; user-select: none; }
img.avatar { background: var(--bg); }
.topbar .profil-link .avatar { box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.mention-liste button .avatar { vertical-align: -4px; }
.vw td.nowrap { white-space: nowrap; }
.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; }
/* Wochentage der Tagesmeldung: sieben kleine Chips statt einer Liste */
.wtage { display: flex; flex-wrap: wrap; gap: 4px; }
.wtage .wtag { padding: 3px 9px; font-size: 12px; min-width: 38px; }
.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(--akzent-text); }
.zt-monat { font-weight: 600; color: var(--muted); white-space: nowrap; }
.zt-monat.voll { color: var(--akzent-text); }
.zt-monat-stand { font-size: 12px; padding: 0 5px; border-radius: 8px; background: var(--col-bg); }
.zt-monat-stand.voll { color: var(--ok-fg); background: var(--ok-bg); }
.zt-monat-stand.teil { color: var(--hint-fg); background: var(--hint-bg); }
.zt-woche-grid { display: grid; grid-template-columns: repeat(var(--zt-spalten, 7), minmax(0, 1fr)); gap: 10px; align-items: start; }
.zt-wochenende { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.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(--akzent-text); }
.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-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.zt-knoepfe { margin-left: auto; display: inline-flex; gap: 2px; opacity: .55; }
.zt-buchung:hover .zt-knoepfe, .zt-knoepfe:focus-within { opacity: 1; }
.zt-knoepfe .btn-icon { padding: 2px 3px; }
.zt-vkopf { display: flex; align-items: center; gap: 6px; }
.zt-vkopf .badge { font-size: 10px; padding: 0 5px; }
.zt-zeile .zt-quelle, .zt-vkopf .zt-quelle { background: var(--info-bg); color: var(--info-fg); }
.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(min(var(--zt-spalten, 7), 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-content: sonst schrumpft der Toast wegen left: 50% auf die halbe Bildschirmbreite und bricht lange Hinweise vielzeilig um */
  width: max-content; max-width: min(640px, calc(100vw - 32px));
}
#toast.zeigen { opacity: 1; }

/* ---- Rueckfragen als Dialog (bestaetigen/eingabe/hinweis) ---- */
dialog.frage {
  border: 0; border-radius: 12px; padding: 20px 22px; max-width: min(440px, calc(100vw - 32px));
  background: var(--card); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, .28); font: inherit;
}
dialog.frage::backdrop { background: rgba(10, 30, 50, .45); }
dialog.frage p { margin: 0 0 10px; line-height: 1.45; }
dialog.frage .frage-label { display: block; margin-bottom: 12px; }
dialog.frage .pdf-schalter { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; }
dialog.frage .frage-feld { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); }
dialog.frage .frage-knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* hidden muss gewinnen — .frage-label (display: block) hebelte es aus, so stand
   im Eintrag-Dialog das Geheimnis-Feld auch bei Text und Code */
dialog.frage [hidden] { display: none !important; }
/* ---- KI-Projektbericht (Dialog) ---- */
dialog.ki-bericht {
  border: 0; border-radius: 12px; padding: 18px 20px; width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-sizing: border-box;
  background: var(--card); color: var(--text); box-shadow: 0 12px 40px rgba(0, 0, 0, .28); font: inherit; overflow: auto;
}
dialog.ki-bericht::backdrop { background: rgba(10, 30, 50, .45); }
.kib-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kib-kopf h2 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 6px; }
.kib-titel { margin: 2px 0 10px; overflow-wrap: anywhere; }
.kib-zeitraum { margin-bottom: 12px; }
.kib-inhalt { min-height: 120px; border-top: 1px solid var(--line); padding-top: 10px; }
.kib-inhalt h3:first-child { margin-top: 2px; }   /* "## …" rendert md() als h3 */
.kib-fehler { color: var(--warn-fg); }
.kib-fuss { margin: 10px 0 0; }
.kib-wiki { margin-top: 10px; }
.kib-wiki select { min-width: 150px; flex: 1; }
.kib-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
@media (max-width: 640px) {
  dialog.ki-bericht { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .kib-knoepfe { justify-content: stretch; }
  .kib-knoepfe .btn { flex: 1 1 auto; }
}
/* Toast mit Knopf (z. B. Rueckgaengig) */
#toast.mit-aktion { pointer-events: auto; display: flex; align-items: center; gap: 12px; }
#toast .toast-aktion { background: none; border: 1px solid rgba(255, 255, 255, .55); color: #fff; border-radius: 6px; padding: 3px 10px; font: inherit; font-weight: 600; cursor: pointer; }
#toast .toast-aktion:hover { background: rgba(255, 255, 255, .12); }
/* Wer Bewegung reduziert haben will, bekommt keine Uebergaenge */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

@media (max-width: 640px) {
  main { padding: 12px 12px calc(96px + env(safe-area-inset-bottom)); }
  .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: Projektwahl bekommt die ganze Breite, die Knoepfe rutschen
     in eine zweite Zeile und zeigen nur ihr Symbol — ausser der Wiedervorlage,
     deren Text (Datum) die Information ist. Nichts darf breiter als der
     Bildschirm werden; tests/handy.mjs prueft das. */
  .a-projekt-zeile { flex-wrap: wrap; }
  .a-aktionen { flex-basis: 100%; justify-content: flex-start; gap: 6px; }
  .a-aktionen .btn-text { display: none; }
  .a-aktionen #a-wv .btn-text { display: inline; }
  .a-aktionen .btn { padding-left: 8px; padding-right: 8px; }
  .a-aktionen .btn-link-copy { margin-left: auto; }
  .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). */

  /* 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; }

/* Verbund mit kon-wiki */
.token-box { background: var(--bg); border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.token-box code { font-size: 13px; word-break: break-all; }
.verweis.wiki.unsichtbar .chip-projekt { opacity: .6; font-style: italic; }
/* Wiki-Seite im Aufgaben-Panel, vom Wiki gerendert */
.wiki-inhalt { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 2px 0 10px; background: var(--row-bg); }
.wiki-inhalt-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.wiki-inhalt-kopf .icon { flex: none; }
.wiki-inhalt-kopf [data-wiki-zu] { margin-left: auto; }
.wiki-inhalt .md { font-size: 13.5px; max-height: 60vh; overflow: auto; }
.raum-form label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.raum-form label.check input { display: inline; width: auto; margin: 0 6px 0 0; }
/* Projektvorlagen: Aufgabenliste mit Bearbeitung in der Zeile */
.vorlage-tabelle input[type="text"] { width: 100%; min-width: 7em; }
.vorlage-tabelle input, .vorlage-tabelle select { font-size: 13px; padding: 4px 6px; }
.vorlage-tabelle td { padding: 4px 6px; }
.raum-form input[type="text"], .raum-form input[type="url"], .raum-form input[type="email"], .raum-form textarea, .raum-form select { display: block; width: 100%; margin-top: 4px; }

/* Offline-Leiste (Service-Worker liefert den letzten Stand) */
#offline-leiste { position: sticky; top: 0; z-index: 60; background: var(--hint-bg); color: var(--hint-fg); font-size: 13px; padding: 6px 16px; text-align: center; border-bottom: 1px solid color-mix(in srgb, var(--hint-fg) 25%, transparent); }
.md-toolbar .md-sprache { font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); max-width: 8em; }
.md pre code.hljs { padding: 0; background: transparent; }

/* WYSIWYG-Editor (Tiptap/ProseMirror unter assets/vendor/editor.js) */
.ed-feld .ProseMirror { min-height: 18em; outline: none; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.ed-feld .ProseMirror:focus { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 15%, transparent); }
.ed-feld .ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: var(--muted); float: left; height: 0; pointer-events: none; }
.ed-feld .ProseMirror h1 { font-size: 20px; margin: 14px 0 6px; } .ed-feld .ProseMirror h2 { font-size: 17px; margin: 14px 0 6px; } .ed-feld .ProseMirror h3 { font-size: 15px; }
.ed-feld .ProseMirror table { border-collapse: collapse; width: 100%; margin: 8px 0; table-layout: fixed; }
.ed-feld .ProseMirror td, .ed-feld .ProseMirror th { border: 1px solid var(--line); padding: 6px 8px; vertical-align: top; position: relative; min-width: 3em; }
.ed-feld .ProseMirror th { background: var(--col-bg); font-weight: 600; }
.ed-feld .ProseMirror .selectedCell::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--teal) 12%, transparent); pointer-events: none; }
.ed-feld .ProseMirror img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.ed-feld .ProseMirror .ProseMirror-selectednode { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Bildbreite: taucht in der Leiste auf, sobald ein Bild ausgewaehlt ist */
.ed-bild { display: inline-flex; align-items: center; gap: 4px; padding-left: 6px;
  margin-left: 2px; border-left: 1px solid var(--line); }
.ed-bild[hidden] { display: none; }
.ed-bild-titel { color: var(--muted); font-size: 12px; white-space: nowrap; }
.md-toolbar .ed-bild button { min-width: 0; padding: 4px 8px; font-size: 12px; }
.md-toolbar .ed-bild button.an { border-color: var(--teal); color: var(--akzent-text); }
.ed-feld .ProseMirror pre { background: var(--bg); border-radius: 8px; padding: 10px 12px; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
.ed-feld .ProseMirror ul[data-type="taskList"] { list-style: none; padding-left: 4px; }
.ed-feld .ProseMirror ul[data-type="taskList"] li { display: flex; gap: 8px; align-items: flex-start; }
.ed-feld .ProseMirror ul[data-type="taskList"] li > label { flex: none; margin-top: 3px; }
.ed-feld .ProseMirror ul[data-type="taskList"] li > div { flex: 1; }
.ed-feld .ProseMirror .hinweis-kopf { user-select: none; }
.ed-feld .ProseMirror .hinweis-text > p:last-child { margin-bottom: 0; }
.ed-feld .baustein-chip { display: inline-block; margin: 4px 0; padding: 4px 10px; border: 1px dashed var(--teal); border-radius: 8px; background: var(--ok-bg); color: var(--ok-fg); font-size: 13px; cursor: default; }
.ed-feld .baustein-chip.fehlt { border-color: var(--warn-fg); background: var(--warn-bg); color: var(--warn-fg); }
.ed-feld .ProseMirror a { color: var(--link); }
.ed-feld .ProseMirror-gapcursor { display: none; pointer-events: none; position: relative; }
.ed-feld .ProseMirror-gapcursor::after { content: ''; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid var(--text); animation: ed-blink 1.1s steps(2, start) infinite; }
.ed-feld .ProseMirror-focused .ProseMirror-gapcursor { display: block; }
@keyframes ed-blink { to { visibility: hidden; } }
.md-toolbar select[data-ed-sel] { font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); max-width: 9em; }

/* Markdown wie in kon-wiki: Tabellen, Kaesten, Aufgaben, Zitate */
.md-tabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0; max-width: 100%; }
.md table { border-collapse: collapse; font-size: 14px; min-width: 50%; }
.md th, .md td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
/* Schmale Bildschirme: Zellen nicht zusammenquetschen — die Tabelle wird
   breiter als der Schirm und scrollt seitlich, der rechte Rand deutet es an */
@media (max-width: 700px) {
  .md th, .md td { min-width: 7.5em; white-space: nowrap; }
  .md td:has(> :not(:empty)), .md th { white-space: normal; }
  .md-tabelle { position: relative; }
  .md-tabelle::after { content: ''; position: sticky; right: 0; top: 0; }
  .md-tabelle table { min-width: max-content; }
  .md td { max-width: 60vw; white-space: normal; }
}
.md th { background: var(--row-bg); font-weight: 600; }

/* Markdown-Erweiterungen: Zitate, Hinweiskaesten, Aufgabenlisten */
.md blockquote { margin: 0 0 8px; padding: 2px 12px; border-left: 3px solid var(--line); color: var(--muted); }
.md blockquote p:last-child { margin-bottom: 0; }
.md .hinweis { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; border: 1px solid transparent; }
.md .hinweis p:last-child, .md .hinweis ul:last-child, .md .hinweis ol:last-child { margin-bottom: 0; }
.md .hinweis-kopf { font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.md .hinweis-hinweis { background: var(--info-bg); border-color: color-mix(in srgb, var(--info-fg) 25%, transparent); }
.md .hinweis-hinweis .hinweis-kopf { color: var(--info-fg); }
.md .hinweis-warnung { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn-fg) 25%, transparent); }
.md .hinweis-warnung .hinweis-kopf { color: var(--warn-fg); }
.md .hinweis-tipp { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok-fg) 25%, transparent); }
.md .hinweis-tipp .hinweis-kopf { color: var(--ok-fg); }
.md li.aufgabe { list-style: none; margin-left: -18px; }
.md li.aufgabe input { vertical-align: -2px; margin: 0 4px 0 0; accent-color: var(--navy); }
.md li.aufgabe.erledigt { color: var(--muted); text-decoration: line-through; }
.md ol { list-style: decimal; }


/* Werkzeugleiste bleibt beim Scrollen sichtbar: unter Kopfzeile und Reitern (92px),
   im Seitenpanel oben, auf dem Handy nur unter der Kopfzeile */
.md-toolbar { position: sticky; top: 92px; z-index: 5; background: var(--card); padding-top: 6px; padding-bottom: 6px; }
.panel .md-toolbar { top: -1px; }
@media (max-width: 640px) { .md-toolbar { top: 52px; } .panel .md-toolbar { top: -1px; } }

/* Editor ueber Textfeldern (Kommentare, Vorlagen, Feedback …): Hoehe je Feld */
.ed-rahmen .ed-feld .ProseMirror { min-height: var(--ed-hoehe, 5em); }
.ed-rahmen { margin-bottom: 6px; }
.ed-leiste [data-ed-md] { font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.ed-leiste { flex-wrap: wrap; }

/* Beteiligte */
.avatar-stapel { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 2px; }
.avatar-stapel .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--card); }
.avatar-stapel .avatar:first-child { margin-left: 0; }
.avatar-stapel .avatar.mehr { width: 20px; height: 20px; font-size: 9px; background: var(--muted); }
.beteiligte-feld { margin: -4px 0 14px; }
.beteiligte { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.beteiligt-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px 2px 3px; border: 1px solid var(--line); border-radius: 20px; font-size: 13px; background: var(--card); }
.beteiligt-chip .lnk { color: var(--muted); padding: 0 4px; }
.beteiligte select { min-width: 0; font-size: 13px; }
.beteiligt-marke { color: var(--muted); margin-right: 4px; vertical-align: -2px; }

/* Suche im Projekt und Projektfilter der globalen Suche */
.p-suche { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 4px; }
.p-suche input[type=search] { flex: 1 1 240px; min-width: 0; }
.suche-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.suche-kopf select { margin-left: 6px; max-width: 260px; }
.liste li[hidden] { display: none !important; }

/* Ansichtsmodus: Admin sieht die App als andere Person */
.ansicht-balken { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px;
  padding: 7px 16px; background: #b45309; color: #fff; font-size: 13px; }
.ansicht-balken .btn { background: #fff; color: #7c2d12; border-color: #fff; }
.ansicht-balken svg { flex: none; }
.topbar.ansicht { box-shadow: inset 0 -3px 0 #f59e0b; }

/* Umschalter Projekte | Wiki in der Kopfzeile */
.app-wechsel { display: inline-flex; flex: none; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 2px; font-size: 12px; }
.app-wechsel > * { padding: 2px 10px; border-radius: 999px; color: #fff; text-decoration: none; white-space: nowrap; }
.app-wechsel .aktiv { background: rgba(255,255,255,.2); font-weight: 600; }
.app-wechsel a:hover { background: rgba(255,255,255,.12); }

/* Speichern/Abbrechen bleiben beim Scrollen im Panel sichtbar */
.md-aktionen { position: sticky; bottom: 0; z-index: 4; background: var(--card); padding: 8px 0; margin-bottom: 0; border-top: 1px solid var(--line); }
.md-aktionen .btnrow { align-items: center; }
@media (max-width: 640px) {
  /* Editor: Tastaturtipp nuetzt am Handy nichts, die Knoepfe brauchen die Zeile */
  .kommentar-form .md-tipp { display: none; }
}
.version-zeile { text-align: right; margin: 4px 2px 0; }
/* Projektseite: Schalter „mit Teilprojekten“ */
.aufgaben-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mit-teil { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
/* Emoji-Auswahl am Editor-Knopf */
.emoji-wahl { position: fixed; z-index: 60; width: min(340px, calc(100vw - 16px)); max-height: min(360px, 70vh); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 30px rgba(var(--shadow), .22); padding: 8px; }
.emoji-suche { width: 100%; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); }
.emoji-listen { overflow-y: auto; margin-top: 6px; }
.emoji-titel { font-size: 11px; text-transform: uppercase; color: var(--muted); margin: 6px 2px 2px; }
.emoji-reihe { display: flex; flex-wrap: wrap; gap: 2px; }
.emoji-reihe button { font-size: 20px; line-height: 1; padding: 4px; border: 0; background: none; border-radius: 6px; cursor: pointer; }
.emoji-reihe button:hover { background: var(--row-bg); }
.emoji-reihe button[hidden], .emoji-gruppe[hidden] { display: none; }

/* Bildbetrachter fuer Bilder im Text (siehe bildAnzeigen): Vollbild, bleibt in der App */
.bild-overlay { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: flex; flex-direction: column; }
.bild-kopf { display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; border-bottom: 1px solid var(--line); background: var(--card); }
.bild-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.bild-werkzeuge { display: flex; gap: 6px; align-items: center; flex: none; }
/* Daumen-Buttons: 44px, kein Doppeltipp-Zoom */
.bild-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation;
  background: var(--bg); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.bild-btn:hover { border-color: var(--navy); color: var(--text); }
.bild-btn:disabled { opacity: .35; }
.bild-zu { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (max-width: 700px) {
  .bild-kopf { flex-wrap: wrap; gap: 6px 8px; }
  .bild-titel { flex: 1 1 100%; }
  .bild-werkzeuge { flex: 1 1 100%; justify-content: space-between; }
  .bild-ext { display: none; }
}
.bild-koerper { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px; text-align: center; background: var(--bg); }
.bild-img { display: block; margin: 0 auto; max-width: none; height: auto; border-radius: 6px; box-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.bild-meldung { color: var(--muted); padding: 16px; }

/* ---- Projekt-Einstellungen zuklappbar; Filter-Zusammenfassung; Editor-Leiste erst bei Fokus ---- */
.projekt-einstellungen { margin: -4px 0 14px; }
.projekt-einstellungen > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 14px; color: var(--text); padding: 4px 0; }
.projekt-einstellungen > summary::-webkit-details-marker { display: none; }
.projekt-einstellungen > summary::before { content: '▸'; color: var(--muted); font-size: 12px; transition: transform .15s; }
.projekt-einstellungen[open] > summary::before { transform: rotate(90deg); }
.projekt-einstellungen > summary .muted { font-weight: 400; }
.projekt-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.projekt-einstellungen .betrifft-row { margin-top: 4px; }
.meine-filter-klapp > summary .meine-sync { margin-left: auto; }
.meine-filter-klapp .meine-filter { margin-top: 8px; }
.ed-leiste.ruhig { display: none; }
kbd { font: inherit; font-size: 12px; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--card); }
@media (max-width: 700px) { .projekt-einstellungen > summary .muted { display: none; } }

/* ---- Betriebsstatus (Verwaltung) ---- */
.lauf-tabelle { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 14px; }
.lauf-tabelle th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 8px 6px 0; border-bottom: 1px solid var(--line); }
.lauf-tabelle td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.lauf-tabelle code { font-size: 12px; }
.badge.lauf-ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge.lauf-spaet { background: #fff3e0; color: #a35a00; }
.badge.lauf-fehler { background: var(--warn-bg); color: var(--warn-fg); }
.badge.lauf-nie, .badge.lauf-optional { background: var(--bg); color: var(--muted); }
.lauf-fehler-text { color: var(--danger); }
.betrieb-zeile { margin: 8px 0; overflow-wrap: anywhere; }
.fehler-liste > summary { cursor: pointer; }
.fehler-gruppen { list-style: none; margin: 6px 0 4px; padding: 0; }
.fehler-gruppen li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.fehler-sig { display: block; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fehler-beispiel { margin-top: 2px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .lauf-tabelle thead { display: none; }
  .lauf-tabelle tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .lauf-tabelle td { display: block; padding: 0; border: 0; }
  .lauf-tabelle td:nth-child(4) { grid-column: 1 / -1; }
  .fristen-tabelle td:nth-child(3) { grid-column: 1 / -1; }
}
@media (min-width: 701px) {
  .fristen-tabelle { table-layout: fixed; }   /* beide Tabellen der Karte mit gleichen Spalten */
  .fristen-tabelle th:first-child { width: 55%; }
  .fristen-tabelle th:nth-child(2) { width: 15%; }
}
/* ---- Checkliste an der Aufgabe ---- */
.check-stand { display: inline-flex; align-items: center; gap: 3px; }
.check-stand.fertig { color: var(--ok-fg); }
.checkliste li { gap: 8px; }
.checkliste li.erledigt .titel { text-decoration: line-through; color: var(--muted); }
.checkliste li .titel { cursor: text; flex: 1; }
/* Termin je Checkpunkt: Marke, Datumsfeld an Ort und Stelle */
/* Das Datum steht zwischen Haekchen und Text — hinten ging es unter. Ohne
   Termin nur das Symbol, damit die Texte nicht springen. */
.checkliste .cp-termin { background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px 5px; margin: 0 -2px; font: inherit; font-size: 12px;
  color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; flex: none; min-width: 26px; justify-content: center; }
.checkliste .cp-termin.leer { opacity: .4; }
.checkliste li:hover .cp-termin.leer, .checkliste .cp-termin:focus-visible { opacity: 1; }
.checkliste .cp-termin:hover { border-color: var(--line); color: var(--text); }
.checkliste .cp-termin.heute { color: var(--hint-fg); font-weight: 600; }
.checkliste .cp-termin.ueberfaellig { color: var(--warn-fg, #b32d2e); font-weight: 600; }
.checkliste li.erledigt .cp-termin { opacity: .45; }
.checkliste .cp-termin-feld { display: inline-flex; align-items: center; gap: 2px; flex: none; margin: -4px 0; }
.checkliste .cp-termin-feld input { font-size: 13px; padding: 2px 4px; }
.check-stand.ueberfaellig, #a-check-stand .ueberfaellig { color: var(--warn-fg, #b32d2e); }
.check-stand.ueberfaellig b { font-weight: 700; }
.checkliste-vorlagen { margin-top: 4px; gap: 6px; }
.checkvorlage { border-top: 1px solid var(--line); padding: 8px 0; }
.checkvorlage > summary { cursor: pointer; }
.cv-punkte { margin: 6px 0; padding-left: 20px; }
.checkvorlage[open] > summary { margin-bottom: 8px; }
.checkvorlage textarea, .checkvorlage-neu textarea { width: 100%; font-family: inherit; }
.checkvorlage-neu { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.checkliste li.zieht { opacity: .5; }
.checkliste li.ziel-oben { box-shadow: 0 -2px 0 var(--teal); }
.checkliste li.ziel-unten { box-shadow: 0 2px 0 var(--teal); }
.checkliste-neu { margin-top: 6px; }
/* Screenshots an Checklisten-Punkten */
.checkliste li { align-items: flex-start; }
/* Alles neben dem Text richtet sich an der ersten Textzeile aus (24px) */
.checkliste li > .sortgriff, .checkliste li > .cp-termin, .checkliste li > .cp-termin-feld, .checkliste .cp-knoepfe { min-height: 24px; display: inline-flex; align-items: center; }
.checkliste li > input[type="checkbox"] { margin-top: 4px; }
.checkliste .cp-inhalt { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
.checkliste .cp-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 24px; }
.checkliste .cp-kopf > .titel, .checkliste .cp-kopf > .cp-text-feld { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
/* Der Text behaelt eine Mindestbreite: was daneben steht (abgehakt von/am, Link,
   Bildzahl), rutscht in die naechste Zeile, statt den Text auf ein paar Zeichen
   zusammenzudruecken */
.checkliste .cp-kopf > .titel, .checkliste .cp-kopf > .cp-text-feld { flex-basis: 11em; }
.checkliste .cp-kopf > .meta { flex: 0 1 auto; white-space: normal; }
/* Schmal ist die Checkliste nicht nur am Handy, sondern auch im Aufgaben-Panel:
   die Anpassungen haengen an ihrer eigenen Breite, nicht am Fenster */
#a-checkliste { container-type: inline-size; container-name: checkliste; }
.checkliste li .titel.leer { color: var(--muted); font-style: italic; }
.checkliste .cp-text-feld { font: inherit; padding: 2px 6px; margin: -3px 0; border: 1px solid var(--teal); border-radius: 6px; background: var(--card); color: inherit; }
.checkliste .cp-knoepfe { gap: 2px; flex: none; }
.checkliste .cp-knoepfe .btn-icon:not([data-cp-del]) { opacity: .45; }
.checkliste li:hover .cp-knoepfe .btn-icon, .checkliste .cp-knoepfe .btn-icon:focus-visible { opacity: 1; }
.checkliste .cp-link { font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; flex: none; }
.checkliste .cp-folge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; font-size: 12px; }
.checkliste .cp-folge .badge { font-size: 11px; padding: 0 6px; }
.checkliste .cp-folge-wer { color: var(--muted); }
/* Folgeaufgabe aus einem Checklisten-Punkt: Rueckweg oben im Panel */
.a-teil-von { margin: 2px 0 12px; line-height: 1.5; }
.a-teil-von .icon { vertical-align: -2px; margin-right: 2px; }
.a-teil-von .akey { font-size: 11px; }
.checkliste .cp-bildzahl { flex: none; display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 12px; color: var(--muted);
  background: none; border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px; cursor: zoom-in; }
.checkliste .cp-bildzahl:hover { color: var(--text); border-color: var(--muted); }
/* Screenshots ohne Zuschnitt: Seitenverhaeltnis bleibt, nur die Hoehe ist begrenzt */
.checkliste .cp-bilder { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.checkliste .cp-bild { position: relative; display: inline-block; }
.checkliste .cp-bild[hidden] { display: none; }
.checkliste .cp-bild > button:first-child { padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); cursor: zoom-in; display: block; }
.checkliste .cp-bild > button:first-child:hover { border-color: var(--muted); }
.checkliste .cp-bild img { display: block; width: auto; height: auto; max-height: 110px; max-width: min(420px, calc(100cqi - 10px)); border-radius: 3px; }
.checkliste li.erledigt .cp-bild img { opacity: .5; }
.checkliste .cp-bild-weg { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: var(--card, #fff);
  color: var(--muted); font-size: 11px; line-height: 1; padding: 0; cursor: pointer; opacity: 0; }
.checkliste .cp-bild:hover .cp-bild-weg, .checkliste .cp-bild-weg:focus-visible { opacity: 1; }
.checkliste li.cp-ablage, .checkliste-neu.cp-ablage { outline: 2px dashed var(--teal); outline-offset: 2px; }
.checkliste-neu .btn-icon { flex: none; }
.checkliste-filter { margin-top: 2px; }
.cp-ausgeblendet { margin: 4px 0 0; }
@container checkliste (max-width: 640px) {
  .checkliste li { gap: 5px; }
  .checkliste .cp-knoepfe { gap: 0; }
  .checkliste .cp-knoepfe .btn-icon { padding: 3px; }
  .checkliste .cp-bild img { max-height: 90px; }
  .checkliste .cp-kopf > .titel, .checkliste .cp-kopf > .cp-text-feld { flex-basis: 8em; }
}
/* Touch-Geraete haben kein Hover: Knoepfe immer voll sichtbar */
@media (hover: none) {
  .checkliste .cp-knoepfe .btn-icon, .checkliste .cp-bild-weg, .checkliste .cp-termin.leer { opacity: 1; }
}
.md-anzeige li.aufgabe input[type="checkbox"]:not([disabled]) { cursor: pointer; accent-color: var(--teal); }
/* ---- Aufgaben-Verlauf zwischen den Kommentaren ---- */
.verlauf-zeile { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.verlauf-zeile .verlauf-zeit { margin-left: auto; white-space: nowrap; }
.vorlage-tabelle textarea { width: 100%; min-width: 10em; font: inherit; font-size: 13px; resize: vertical; }
/* ---- Team-Ueberblick ---- */
.team-tabelle td, .team-tabelle th { text-align: center; }
.team-tabelle td:first-child, .team-tabelle th:first-child { text-align: left; }
.team-tabelle tr.gewaehlt td { background: var(--bg); }
.team-tabelle .badge { font-weight: 600; }
.liste li.ueberfaellig .titel { color: var(--danger); }
.teams-feld { flex: 1; min-width: 220px; font-size: 13px; }

/* ---- Was ist neu ---- */
.neu-liste { list-style: none; margin: 8px 0 16px; padding: 0; }
.neu-liste li { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.neu-liste li:last-child { border-bottom: none; }
.neu-version { flex: none; width: 5.2em; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.neu-liste li.neu .neu-version { color: var(--orange, #e07b00); }
.neu-liste li.neu { background: linear-gradient(90deg, rgba(224, 123, 0, .07), transparent 60%); margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }
.neu-text p { display: inline; margin: 0; }
.neu-details { margin: 10px 0; }
.neu-details > summary { cursor: pointer; font-weight: 600; }
.neu-details .md { margin-top: 8px; }


/* ---- Glocke: Benachrichtigungen ---- */
.glocke { position: relative; background: none; border: 0; color: #fff; cursor: pointer; padding: 4px; display: inline-flex; align-items: center; opacity: .9; }
.glocke:hover, .glocke:focus-visible { opacity: 1; }
.glocke-zahl { position: absolute; top: -3px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #d63638; color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--navy); }
.hinweis-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hinweis-kopf .filter-chips { margin: 0; flex: 1; }
.hinweise { list-style: none; margin: 0 0 12px; padding: 0; }
.hinweis { border-top: 1px solid var(--line); }
.hinweis:first-child { border-top: 0; }
.hinweis-zeile { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; padding: 10px 6px; cursor: pointer; color: var(--text); font: inherit; border-radius: 6px; }
.hinweis-zeile:hover { background: var(--bg); }
.hinweis.neu .hinweis-zeile { background: var(--info-bg); }
.hinweis.neu .hinweis-betreff { font-weight: 700; }
.hinweis-bild { flex: none; }
.hinweis-ico { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; background: var(--col-bg); color: var(--muted); }
.hinweis-inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hinweis-betreff { overflow-wrap: anywhere; }
.hinweis-text { color: var(--muted); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.hinweis-zeit { color: var(--muted); font-size: 12px; }
/* Hinweis aus einer Partner-App (Wiki, Ideen): kleine Marke vor dem Betreff */
.hinweis-app { display: inline-block; vertical-align: 1px; padding: 0 6px; border-radius: 9px; background: var(--card); border: 1px solid var(--line); color: var(--muted);
  font-size: 11px; font-weight: 600; line-height: 17px; letter-spacing: .02em; }

/* ---- Feedback: Antworten als Verlauf ---- */
.fb-verlauf { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.fb-verlauf .fb-antwort { margin: 0; padding: 6px 10px; background: var(--bg); border-radius: 8px; }
.fb-verlauf .fb-antwort.team { background: var(--info-bg); }
.fb-antwort-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.fb-antwort-kopf .meta { color: var(--muted); }
.fb-antwort-kopf .fb-antwort-weg { margin-left: auto; }
.fb-antwort-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.fb-antwort-form textarea { flex: 1; min-width: 0; font: inherit; resize: vertical; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); }

/* ---- Dokument-Import ---- */
.di-ablage { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; border: 2px dashed var(--line); border-radius: 12px;
  color: var(--muted); cursor: pointer; text-align: center; margin: 12px 0; }
.di-ablage:hover, .di-ablage.aktiv, .di-ablage:focus-visible { border-color: var(--teal); color: var(--text); outline: none; }
.di-status { min-height: 1.4em; }
.di-feld { display: flex; flex-direction: column; gap: 4px; font-weight: 600; margin: 8px 0; }
.di-feld input { font: inherit; font-weight: 400; }
.di-modi { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.di-modi legend { font-weight: 600; padding: 0 4px; }
.di-modi label, .di-optionen label { display: flex; gap: 8px; align-items: flex-start; margin: 5px 0; }
.di-optionen { margin: 6px 0 12px; }
.di-einleitung { background: var(--bg); padding: 8px 10px; border-radius: 6px; }
.di-abschnitt { border-top: 1px solid var(--line); padding: 8px 0; }
.di-kopf { display: flex; gap: 8px; align-items: center; }
.di-atitel { flex: 1; min-width: 0; font: inherit; font-weight: 600; border: 1px solid transparent; background: none; padding: 3px 6px; border-radius: 6px; color: inherit; }
.di-atitel:hover, .di-atitel:focus { border-color: var(--line); background: var(--card); }
.di-punkt { margin: 6px 0 6px 18px; }
.di-unter { margin: 4px 0 4px 24px; }
.di-punkt.aus > .di-zeile, .di-punkt.aus > .di-bilder, .di-punkt.aus .di-unter, .di-unter.aus { opacity: .45; }
.di-zeile { display: flex; gap: 6px; align-items: center; }
.di-zeile input[type=text] { flex: 1; min-width: 0; font: inherit; padding: 4px 6px; }
.di-mark { flex: none; font: inherit; font-size: 12px; padding: 2px 4px; max-width: 90px; }
.di-details { margin: 2px 0 2px 26px; white-space: pre-line; }
.di-bilder { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px 26px; }
.di-bild { padding: 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); cursor: zoom-in; }
.di-bild img { display: block; max-height: 64px; max-width: 160px; width: auto; height: auto; }
.di-fuss { display: flex; gap: 8px; align-items: center; position: sticky; bottom: 0; background: var(--card); padding: 10px 0; margin-top: 8px; border-top: 1px solid var(--line); justify-content: flex-end;
  flex-wrap: nowrap; box-shadow: 0 24px 0 var(--card); }
@media (max-width: 700px) {
  .di-punkt { margin-left: 4px; }
  .di-unter { margin-left: 14px; }
  .di-bilder, .di-details { margin-left: 4px; }
  .di-bild img { max-height: 54px; max-width: 120px; }
  .di-fuss #di-los { flex: 1; min-width: 0; white-space: normal; }
}

/* ---- Verwaltung in Reitern ---- */
.vw-reiter { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.vw-reiter::-webkit-scrollbar { display: none; }
.vw-reiter a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 500; }
.vw-reiter a:hover { color: var(--text); }
.vw-reiter a.aktiv { color: var(--text); border-bottom-color: var(--teal); font-weight: 600; }
.vw-reiter-zahl { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn-fg, #b32d2e); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
main > [data-abschnitt][hidden] { display: none !important; }

/* Verwaltung: Person vorab anlegen */
.person-neu { margin: 0 0 12px; }
.person-neu > summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 4px 0; }
.person-neu > summary:hover { color: var(--text); }
.person-neu form { margin-top: 8px; }
.person-neu .feldzeile { display: flex; gap: 12px; flex-wrap: wrap; }
.person-neu .feldzeile > label { flex: 1 1 220px; min-width: 0; }
.person-neu select[multiple] { width: 100%; }

/* Meine Aufgaben: Hinweis, dass der frische Stand von Jira/Instanzen noch kommt */
.meine-lade { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.meine-lade svg { animation: meine-dreh 1.2s linear infinite; }
@keyframes meine-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .meine-lade svg { animation: none; } }

/* Im Teams-Reiter: Abmelden entfaellt (Teams meldet an), der App-Umschalter auch (Reiter) */
.in-teams .abmelden-form { display: none; }

/* ---- Budget: Jahresplanung ---- */
.budget-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.budget-kopf h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.budget-kopf h2 select { font: inherit; font-size: 15px; padding: 3px 6px; }
.budget-kopf .btnrow { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.budget-tabelle th.num, .budget-tabelle td.num { text-align: right; }
.budget-tabelle td.num { white-space: nowrap; }
.budget-tabelle thead th { white-space: normal; vertical-align: bottom; }
.budget-tabelle td.b-summe, .budget-tabelle tfoot td { font-weight: 600; }
.budget-tabelle tfoot td { border-top: 2px solid var(--line); }
/* Zahlenfelder fuellen die Zelle; Koepfe und Summen bekommen denselben rechten Abstand
   wie der Text im Feld (4px Zelle + 6px Feldinnen + 1px Rand), damit alles buendig steht */
.budget-tabelle .b-geld { width: 100%; min-width: 6em; box-sizing: border-box; text-align: right; font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; padding: 5px 6px; }
table.budget-tabelle th.num, table.budget-tabelle td.num:not(.b-feld) { padding-right: 11px; }
table.budget-tabelle th, table.budget-tabelle td { padding-left: 4px; padding-right: 4px; }
.budget-tabelle .b-geld.ist { background: var(--row-bg); }
.budget-tabelle .b-titel { width: 12em; font: inherit; }
.budget-tabelle .b-bem { width: 100%; min-width: 7em; font: inherit; }
.budget-tabelle .b-projekt { min-width: 12em; }
.budget-tabelle .b-aktionen { display: flex; align-items: center; gap: 4px; margin-top: 5px; }
.budget-tabelle .b-rg-zahl { display: inline-block; min-width: 1.4em; padding: 0 5px; border-radius: 9px; background: var(--ok-bg); color: var(--ok-fg); font-size: 11px; text-align: center; }
.budget-tabelle .b-projekt a { font-weight: 600; text-decoration: none; }
.budget-tabelle .b-geplant { margin-left: 6px; }
.budget-tabelle .b-link { display: block; margin-top: 4px; font: inherit; font-size: 12px; max-width: 16em; }
.abw-plus { color: var(--warn-fg, #b32d2e); }
.abw-minus { color: var(--ok-fg); }
@media (max-width: 700px) {
  .budget-kopf .btnrow { margin-left: 0; }
  .budget-tabelle .b-geld { min-width: 5.2em; }
}

/* ---- Meine Aufgaben: Ansichten Fokus / Nach Projekt / Board / Mein Tag ---- */
.meine { display: flex; flex-direction: column; gap: 14px; }
.meine > .card { margin: 0; }
.meine-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.meine-zahl { margin-right: auto; }
.meine-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--card); }
.meine-seg button, .meine-seg label { border: 0; border-right: 1px solid var(--line); background: none; color: var(--muted);
  padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.meine-seg > :last-child { border-right: 0; }
.meine-seg .an { background: var(--navy); color: #fff; }
.meine-seg label input { position: absolute; opacity: 0; pointer-events: none; }
.meine-seg label:focus-within { outline: 2px solid var(--teal); outline-offset: -2px; }
.meine .gruppe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; padding: 2px 0 6px; }
.meine .gruppe-zahl { font-weight: 500; text-transform: none; letter-spacing: 0; }
.meine .gruppe-info { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; }
.meine .gruppe-info.faellig { color: var(--warn-fg); font-weight: 600; }
.meine .card > .liste, .meine details > .liste { margin: 0; }
.meine-jetzt { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent); }
.meine-jetzt > .gruppe { color: var(--ok-fg); }
.meine-mehr > summary { cursor: pointer; padding: 8px 0; color: var(--muted); font-size: 13px; list-style: none; }
.meine-mehr > summary::-webkit-details-marker { display: none; }
.meine-mehr > summary::before { content: '▸ '; }
.meine-mehr[open] > summary::before { content: '▾ '; }
.meine-abschnitt > summary.gruppe { padding: 2px 0; }
.meine-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--hint-bg); color: var(--hint-fg); font-size: 13px; }
.meine-hinweis .btn { margin-left: auto; }
.badge.neu { background: var(--navy); color: #fff; }
.badge.kommentiert { background: var(--ok-bg); color: var(--ok-fg); }
.badge.lange { background: var(--hint-bg); color: var(--hint-fg); }
.meine-stern, .meine-anheften { color: var(--muted); }
.meine-stern.an, .meine-anheften.an { color: var(--orange); }
.meine-anheften.an svg { fill: currentColor; }
.meine-gruppe > summary { cursor: pointer; list-style: none; }
.meine-gruppe > summary::-webkit-details-marker { display: none; }
.meine-gruppe > summary .btn-icon { margin-left: 4px; }
.meine-projekte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 14px; align-items: start; }
.meine-projekte .card { margin: 0; }
/* Board */
.meine-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.meine-spalte { background: var(--col-bg); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.meine-spalte.sp-eingang { background: var(--info-bg); }
.meine-spalte.sp-arbeit { background: var(--ok-bg); }
.meine-spalte h3 { margin: 0; font-size: 14px; display: flex; gap: 6px; align-items: baseline; }
.meine-spalte > p { margin: -4px 0 2px; }
.meine-spalte.ziel, .meine-irgendwann.ziel, .wk-tag.ziel { outline: 2px dashed var(--teal); outline-offset: 2px; }
.bk { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; font-size: 14px; cursor: grab; }
.bk.zieht { opacity: .4; }
.bk-titel { cursor: pointer; overflow-wrap: anywhere; color: var(--text); text-decoration: none; }
.bk-fuss { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.bk-wohin { margin-left: auto; font-size: 12px; padding: 2px 4px; max-width: 120px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); }
.bk-leer { padding: 10px; text-align: center; border: 1px dashed var(--line); border-radius: 8px; }
.meine-irgendwann-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; padding: 4px 0 0; }
/* Mein Tag */
.meine-tag { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.meine-tag .card { margin: 0; }
.wk-leiste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding-top: 4px; }
.wk-tag { border: 1px solid var(--line); border-radius: 9px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 130px; min-width: 0; }
.wk-tag.heute { border-color: var(--teal); }
.wk-tag.ueber .wk-kopf b { color: var(--warn-fg); }
.wk-kopf { display: flex; justify-content: space-between; gap: 4px; font-size: 13px; }
.wk-aufgabe { font-size: 13px; padding: 6px 7px; border-radius: 7px; background: var(--row-bg); display: flex; gap: 6px; align-items: baseline; overflow-wrap: anywhere; }
.wk-aufgabe[draggable] { cursor: grab; }
.wk-aufgabe [data-open] { cursor: pointer; }
.wk-leer { text-align: center; }
/* Einrichten, Einsortieren */
.meine-wahl { border: 0; padding: 0; margin: 0 0 16px; }
.meine-wahl legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.meine-wahl p { margin: 0 0 6px; }
.es-aufgabe { padding: 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
.es-titel { font-size: 16px; text-align: left; padding: 0; }
.es-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.es-datum { display: inline-flex; gap: 6px; align-items: center; }
/* kompakte Dichte */
.meine-kompakt .liste li { padding-top: 5px; padding-bottom: 5px; }
.meine-kompakt .gruppe { padding-top: 8px; }
.meine-kompakt .bk { padding: 6px 8px; gap: 4px; }
@media (max-width: 900px) {
  .meine-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meine-tag { grid-template-columns: minmax(0, 1fr); }
  .wk-leiste { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .meine-board { grid-template-columns: minmax(0, 1fr); }
  .meine .gruppe-info { margin-left: 0; flex-basis: 100%; }
  .meine-seg button { padding: 7px 9px; }
  .meine-kopf .nur-breit { display: none; }
}
.meine-text-knopf { border: 0; background: none; padding: 4px 2px; font: inherit; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.es-titel { font-size: 16px; font-weight: 600; text-align: left; text-decoration: none; color: var(--text); padding: 0; }
.es-titel:hover { text-decoration: underline; }
/* Meine Aufgaben: Zeilen brechen auch in schmalen Karten (Mein Tag, Projektkarten)
   um — der Titel behaelt Platz, Chips und Termine rutschen in die naechste Zeile */
.meine .liste li { flex-wrap: wrap; row-gap: 6px; }
.meine .liste li > .titel { flex: 1 1 16em; overflow-wrap: break-word; }
.meine .liste li > .chip-projekt { max-width: 100%; }
.meine .gruppe-name { min-width: 0; flex: 1 1 14em; overflow-wrap: break-word; }
.meine .gruppe-name + .gruppe-info { flex: none; }

/* Meine Aufgaben: gespeicherte Filter als Schnellzugriff ueber der Filterzeile */
.schnell-leiste { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 8px; gap: 6px; }
.schnell-leiste .chip-paar { display: inline-flex; align-items: stretch; }
.schnell-leiste .chip-paar .chip { border-radius: 20px 0 0 20px; border-right: none; }
.schnell-leiste .chip-weg {
  border: 1px solid var(--line); border-left: none; background: var(--card); color: var(--muted);
  border-radius: 0 20px 20px 0; padding: 0 9px 0 6px; font-size: 14px; line-height: 1; cursor: pointer; min-width: 28px;
}
.schnell-leiste .chip-weg:hover { color: var(--danger); border-color: var(--navy); }
.schnell-leiste .chip-paar:hover .chip { border-color: var(--navy); }

.board-filter { flex-wrap: wrap; }
.board-filter select { flex: 1 1 160px; max-width: 320px; min-width: 0; }
.board-filter input[type=search] { flex: 1 1 200px; min-width: 0; }
.p-suche select { flex: 0 1 auto; max-width: 220px; min-width: 0; }

/* Budget: Rechnungen je Planzeile */
.budget-tabelle .b-geld.aus-rg { display: block; padding: 5px 6px; border: 1px dashed var(--line); border-radius: 6px; background: var(--row-bg); }
.budget-tabelle .b-rg { padding: 2px 8px; font-size: 12px; }
.rg-neu { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rg-neu input, .rg-neu select { font: inherit; padding: 5px 7px; min-width: 0; }
.rg-neu .b-geld { width: 7.5em; text-align: right; }
.rg-neu .rg-text { flex: 1 1 180px; }
.rg-neu .rg-nr { flex: 0 1 150px; }
.rg-tabelle input, .rg-tabelle select { font: inherit; padding: 3px 5px; min-width: 0; }
.rg-tabelle .rg-text { width: 100%; min-width: 140px; }
.rg-tabelle .rg-nr { width: 8em; }
.rg-tabelle .b-geld { width: 7.5em; text-align: right; font-variant-numeric: tabular-nums; }
.rg-tabelle th.num, .rg-tabelle td.num { text-align: right; white-space: nowrap; }
.rg-tabelle tfoot td { font-weight: 600; border-top: 2px solid var(--line); }

/* Referenzen: Kostenstelle neben dem Tempo-Account */
.ref-kst { width: 8em; }

/* Auswertung nach Accounts: Exporte als Knopfgruppe */
.ausw-exporte { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ausw-leiste { flex-wrap: wrap; align-items: center; }
#ausw-monat { flex: 1 1 10em; min-width: 9em; }
@media (max-width: 700px) { .ausw-exporte { flex-basis: 100%; } }

/* Meine Zeiten: Buchungen zwischen Tagen ziehen */
.zt-buchung[draggable] { cursor: grab; }
.zt-buchung.zieht { opacity: .4; }
.zt-tag.ziel { outline: 2px dashed var(--teal); outline-offset: -2px; background: color-mix(in srgb, var(--teal) 8%, var(--card)); }

/* Status einheitlich: Badges je Status, Erledigt-Spalte des Boards eingeklappt */
.badge.status-offen { background: var(--col-bg); color: var(--muted); }
.kb-spalte.erledigt.zu { flex: 0 1 200px; min-width: 180px; }
.kb-erledigt-schalter { margin-left: 6px; font-size: 12px; padding: 0; }

/* Team: Reiter und Zeiten-Tabelle */
.team-reiter { margin-bottom: 12px; }
.tz .zt-leiste { flex-wrap: wrap; gap: 6px 10px; }
.tz #tz-suche { width: 100%; max-width: 320px; margin: 4px 0 8px; }
.tz-tabelle th.heute { color: var(--akzent-text); }
.tz-tabelle td.tz-tag { font-variant-numeric: tabular-nums; min-width: 3em; }
.tz-tabelle td.tz-voll { color: var(--ok-fg); background: var(--ok-bg); }
.tz-tabelle td.tz-teil { color: var(--hint-fg); background: var(--hint-bg); }
.tz-tabelle td.tz-leer { color: var(--warn-fg); background: var(--warn-bg); }
.tz-tabelle td.tz-abw { color: var(--muted); background: var(--col-bg); font-weight: 600; }
.tz-tabelle td.tz-frei, .tz-tabelle td.tz-zukunft { color: var(--muted); }
.tz-tabelle td.tz-summe { white-space: nowrap; font-weight: 600; color: var(--muted); }
.tz-tabelle td.tz-summe.voll { color: var(--ok-fg); }
.tz-tabelle tfoot td { font-weight: 600; border-top: 2px solid var(--line); }
.tz-tabelle .lnk { background: none; border: none; padding: 0; font: inherit; color: var(--link); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tz-tabelle .warn { color: var(--warn-fg); }
/* Namen bleiben beim seitlichen Scrollen stehen */
.tz-tabelle th:first-child, .tz-tabelle td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--line); }
.tz-tabelle tfoot td:first-child { background: var(--card); }
@media (max-width: 700px) {
  .tz-tabelle .tz-bereich { display: none; }
  .tz-tabelle td:first-child { max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; }
  .tz-tabelle td:first-child .lnk { max-width: 100%; }
}
table.vw.tz-tabelle thead th:first-child, table.vw.tz-tabelle tbody td:first-child, table.vw.tz-tabelle tfoot td:first-child { position: sticky; left: 0; z-index: 2; background: var(--card); }

/* ---- Angebotsvergleich (#/angebote/…) ---- */
.einstell-block { align-items: flex-start; flex-direction: column; }
.einstell-block textarea { width: 100%; max-width: 640px; box-sizing: border-box; font: inherit; font-size: 14px; }
.ang-kopf { margin-bottom: 6px; }
.ang-titelzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ang-titelzeile h1 { font-size: 20px; margin: 4px 0; cursor: pointer; }
.ang-titelzeile .ang-excel { margin-left: auto; }
.badge.ang-ok { background: var(--ok-bg); color: var(--ok-fg); }
.badge.ang-hint { background: var(--hint-bg); color: var(--hint-fg); }
.badge.ang-warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge.ang-info { background: var(--info-bg); color: var(--info-fg); }
.ang-raster { display: grid; gap: 0 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .ang-raster { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .ang-raster-gleich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ang-angebote { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ang-angebot { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ang-angebot-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ang-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px 16px; margin: 6px 0; font-variant-numeric: tabular-nums; }
.ang-zahlen dt { font-size: 12px; color: var(--muted); }
.ang-zahlen dd { margin: 2px 0 0; font-weight: 600; }
.ang-zahlen-gross dd { font-size: 18px; }
.ang-warnung { color: var(--hint-fg); }
.ang-fehler { color: var(--warn-fg); }
.ang-ablage { position: relative; display: flex; gap: 12px; align-items: center; border: 2px dashed var(--line); border-radius: 10px; padding: 14px; cursor: pointer; }
.ang-ablage.ueber, .ang-ablage:focus-within { border-color: var(--teal); }
.ang-ablage.ueber { background: var(--ok-bg); }
.ang-ablage input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.ang-feld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.ang-feld input, .ang-feld select, .ang-feld textarea { font: inherit; font-size: 14px; color: var(--text); }
.ang-feld textarea { width: 100%; box-sizing: border-box; }
.ang-feld-zeile > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text); }
.ang-kopffelder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; margin-top: 10px; }
.ang-kopffelder input { width: 100%; box-sizing: border-box; }
.ang-zugriff { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ang-zugriff select { max-width: 100%; min-width: 0; }   /* lange Namen in der Auswahl duerfen das Feld nicht aufblaehen */
.ang-zugriff .chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 10px; border-radius: 14px; background: var(--col-bg); color: var(--text); font-size: 13px; }
.ang-leistungen input[type="text"] { width: 100%; min-width: 9em; box-sizing: border-box; font: inherit; font-size: 14px; }
.ang-pruefen { display: grid; gap: 0 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .ang-pruefen { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .ang-pruefen.ohne-pdf { grid-template-columns: minmax(0, 1fr); }
  .ang-pruefen-pdf { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
}
.ang-pdf-leiste { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; position: sticky; top: 0; background: var(--card); z-index: 1; padding-bottom: 4px; }
.ang-pdf-leiste .small { flex: 1; text-align: center; }
.ang-pdf-blatt canvas { display: block; border: 1px solid var(--line); background: #fff; }
.ang-pdf-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 12px; box-sizing: border-box; border: 0; background: var(--card); color: var(--text); overflow: auto; }
.ang-pdf-dialog-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ang-kond input, .ang-std input, .ang-std select { font: inherit; font-size: 13px; padding: 4px 5px; box-sizing: border-box; }
.ang-num { text-align: right; font-variant-numeric: tabular-nums; }
.ang-kond [data-f="name"] { min-width: 9em; }
.ang-kond [data-f="wert"], .ang-std [data-f="wert"] { width: 100%; min-width: 12em; }
.ang-seite { font-size: 12px; white-space: nowrap; }
.ang-hinweise { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ang-hinweise li { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ang-hinweise li .btn { flex: none; }
.ang-wahl { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.ang-wahl a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--text); background: var(--card); font-size: 14px; }
.ang-wahl a.aktiv { border-color: var(--teal); font-weight: 600; }
.ang-leiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.ang-matrix th.num, .ang-matrix td.num { text-align: right; }
.ang-matrix td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ang-matrix thead th { white-space: normal; vertical-align: bottom; text-transform: none; font-size: 13px; }
.ang-matrix tbody th, .ang-matrix tfoot th { text-align: left; font-weight: 600; text-transform: none; font-size: 14px; color: var(--text); }
.ang-matrix thead th:first-child, .ang-matrix tbody th, .ang-matrix tfoot th { position: sticky; left: 0; background: var(--card); z-index: 1; min-width: 8em; }
.ang-matrix tr.ang-gruppe th { background: var(--col-bg); font-size: 12px; text-transform: uppercase; color: var(--muted); }
.ang-matrix td.ang-bester { background: var(--ok-bg); color: var(--ok-fg); font-weight: 600; }
.ang-matrix tfoot td, .ang-matrix tfoot th { font-weight: 600; }
.ang-matrix tr.ang-gesamt td, .ang-matrix tr.ang-gesamt th { border-top: 2px solid var(--line); font-size: 15px; }
.ang-matrix td .ang-fehlt { white-space: normal; }
.ang-fehlt { color: var(--warn-fg); }
.ang-aufwand { color: var(--hint-fg); }
.ang-ja { color: var(--ok-fg); font-weight: 600; }
.ang-nein { color: var(--warn-fg); font-weight: 600; }
.ang-matrix tr.ang-gewaehlt th, .ang-matrix tr.ang-gewaehlt td { background: var(--ok-bg); }
.ang-matrix input[type="text"] { width: 100%; min-width: 12em; box-sizing: border-box; font: inherit; font-size: 13px; }
.ang-gewichte { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; }
.ang-gewicht { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 14px; align-items: center; }
.ang-gewicht span { grid-column: 1 / -1; }
.ang-gewicht output { font-variant-numeric: tabular-nums; min-width: 2em; text-align: right; }
.ang-sterne { display: inline-flex; }
.ang-sterne button { border: 0; background: none; font-size: 20px; color: var(--grid-strong); cursor: pointer; padding: 0 1px; min-width: 26px; min-height: 34px; }
.ang-sterne button.an { color: var(--orange); }
.ang-karten { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ang-punkte { margin: 0 0 8px; padding-left: 18px; }
.ang-empfehlung { border-width: 2px; }
.ang-empfehlung.ang-frei { border-color: var(--ok-fg); }
.ang-empf-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.ang-liste-zahlen { margin: 0; display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; }
.ang-liste-zahlen > div { display: flex; justify-content: space-between; gap: 10px; }
.ang-liste-zahlen dd { margin: 0; font-weight: 600; text-align: right; }
.ang-vorhaben .ang-unterzeile { display: block; }
.ang-vorhaben li.ang-aktuell { background: var(--row-bg); }
.ang-vorhaben .meta { white-space: nowrap; }
.ang-vorhaben-summe { margin: 8px 0 10px; padding-top: 8px; border-top: 2px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.ang-vorhaben-gesamt { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
/* Positionen beim Pruefen: zweizeilig, nichts abgeschnitten */
.ang-pos-liste { display: flex; flex-direction: column; }
.ang-pos-zeile { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.ang-pos-zeile:first-child { border-top: 1px solid var(--line); }
.ang-pos-oben { display: flex; gap: 8px; align-items: flex-start; }
.ang-pos-seite { flex: none; min-width: 2.6em; padding-top: 6px; display: flex; flex-direction: column; }
.ang-pos-oben textarea { flex: 1; min-width: 0; resize: none; overflow: hidden; font: inherit; font-size: 14px; padding: 5px 7px; box-sizing: border-box; line-height: 1.35; }
.ang-pos-oben .btn-icon { padding-top: 7px; }
.ang-pos-unten { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: flex-end; padding-left: calc(2.6em + 8px); }
.ang-feldgruppe { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; }
.ang-mini { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.ang-mini input, .ang-mini select { font: inherit; font-size: 13px; color: var(--text); padding: 4px 5px; box-sizing: border-box; }
.ang-mini input.ang-num { width: 6.2em; }
.ang-mini input.ang-kurz { width: 4.4em; }
.ang-mini input.ang-betrag { width: 7.4em; font-weight: 600; }
.ang-mini-breit select { max-width: 13em; }
.ang-haken { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; padding-bottom: 5px; }
.ang-haken label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ang-pos-hinweis { padding-left: calc(2.6em + 8px); color: var(--hint-fg); }
.ang-pos-zeile.ist-option { box-shadow: inset 3px 0 0 var(--orange); padding-left: 8px; }
.ang-pos-zeile.nicht-gezaehlt textarea, .ang-pos-zeile.nicht-gezaehlt .ang-betrag { color: var(--muted); }
.ang-pos-zeile.ist-ausgeschlossen textarea, .ang-pos-zeile.ist-ausgeschlossen .ang-betrag { text-decoration: line-through; }
.ang-optionen { color: var(--hint-fg); }
@media (max-width: 600px) {
  .ang-pos-unten, .ang-pos-hinweis { padding-left: 0; }
  .ang-mini-breit, .ang-mini-breit select { max-width: 100%; }
}
.ang-pruefen.ohne-pdf .ang-pruefen-pdf { display: none; }
/* viel Platz (PDF ausgeblendet): Leistung breiter, die Werte passen in eine Zeile */
.ang-pos-liste { container-type: inline-size; }
@container (min-width: 1050px) { .ang-mini-breit select { max-width: 22em; } }
.ang-umfang-liste li { align-items: baseline; }
.ang-umfang-wert { flex: none; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ang-umfang-summe { margin: 12px 0; padding-top: 8px; border-top: 2px solid var(--line); }
@media (max-width: 600px) { .ang-umfang-liste li { flex-direction: column; gap: 2px; } .ang-umfang-wert { text-align: left; white-space: normal; } }

/* ---- Aufgaben-Panel (ab 0.157.0): Kopfzeile, Status, Sprungmarken, Dateien, Details ---- */
@media (min-width: 1280px) { .panel.a-panel { width: min(960px, calc(100% - 60px)); } }
.a-kopfzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.a-crumb { flex: 1 1 160px; min-width: 0; color: var(--muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-crumb:hover { color: var(--navy); text-decoration: underline; }
.a-mehr-wrap { position: relative; display: inline-flex; }
.a-mehr-menue { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 270px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.a-mehr-menue[hidden] { display: none; }
.a-mehr-punkt { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 14px;
  padding: 9px 10px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--text); }
.a-mehr-punkt:hover, .a-mehr-punkt:focus-visible { background: var(--row-bg); }
.a-mehr-punkt.gefahr { color: var(--danger); }
.a-mehr-feld { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; margin: 4px 0; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.a-mehr-feld select { font: inherit; font-size: 14px; width: 100%; min-width: 150px; }
.a-status { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 10px; }
.a-status-knopf { font: inherit; font-size: 14px; min-height: 36px; padding: 6px 13px; border: 0; border-left: 1px solid var(--line);
  background: var(--card); color: var(--text); cursor: pointer; white-space: nowrap; }
.a-status-knopf:first-child { border-left: 0; }
.a-status-knopf:hover { background: var(--row-bg); }
.a-status-knopf.an { background: var(--navy); color: #fff; }
.a-sprung { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.a-sprung button { font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 14px; border: 0; background: var(--col-bg); color: var(--text); cursor: pointer; }
.a-sprung button:hover { background: var(--line); }
.a-sprung button span:empty { display: none; }
.a-sprung .a-sprung-dateien { background: var(--ok-bg); color: var(--ok-fg); font-weight: 600; }
.a-raster { display: flex; flex-direction: column; }
.a-inhalt { min-width: 0; }
.a-inhalt > section { scroll-margin-top: 8px; }
.a-meta { order: -1; margin: 12px 0 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--row-bg); }
.a-meta-schalter { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; font: inherit; font-size: 14px;
  padding: 10px 12px; min-height: 44px; border: 0; background: none; cursor: pointer; color: var(--text); text-align: left; }
.a-meta-zeile .ueberfaellig { color: var(--warn-fg); font-weight: 600; }
.a-meta-zeile .heute { color: var(--hint-fg); font-weight: 600; }
.a-meta-felder { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.a-meta.zu .a-meta-felder { display: none; }
.a-meta .feld select, .a-meta .feld input { min-width: 0; width: 100%; box-sizing: border-box; }
.a-meta .feld-mit-knopf > select, .a-meta .feld-mit-knopf > input { flex: 1; }
.a-meta-paar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 600px) and (max-width: 859px) { .a-meta-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-meta-block { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 8px; }
.a-meta-titel { font-weight: 600; font-size: 14px; }
.a-meta .zeit-form { margin-top: 0; }
.a-meta .zeit-form #z-bemerkung, .a-meta .zeit-form #z-account { flex: 1 1 100%; max-width: none; }
.a-meta .beteiligte-feld { margin: 0; }
.a-zeit-liste summary { cursor: pointer; color: var(--muted); }
.a-zeit-liste[hidden] { display: none; }
@container (min-width: 860px) {
  .a-raster { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
  .a-meta { order: 0; margin: 14px 0 0; }
  .a-meta-schalter { display: none; }
  .a-meta.zu .a-meta-felder, .a-meta-felder { display: flex; padding: 12px; }
}
.a-dateien { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--row-bg); }
.a-dateien-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.a-dateien-kopf .abschnitt { margin: 0; }
.a-dateien-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.a-foto { display: none; }
@media (pointer: coarse) { .a-foto { display: inline-block; } }
.a-ablage { margin: 10px 0; border: 2px dashed var(--line); border-radius: 10px; padding: 10px 12px; text-align: center; color: var(--muted);
  font-size: 13px; background: var(--card); }
.a-ablage kbd { font: inherit; font-size: 12px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.a-ablage .upload-label { color: var(--link); text-decoration: underline; }
@media (pointer: coarse) { .a-ablage { display: none; } .a-ablage.leer { display: block; } }
.a-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.a-kacheln:empty { display: none; }
.a-kachel { border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.a-kachel[hidden] { display: none; }
.a-kachel-vorschau { height: 92px; width: 100%; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 700; font-size: 13px; letter-spacing: .04em; background: var(--col-bg); color: var(--muted); overflow: hidden; }
.a-kachel-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-kachel-vorschau.typ-pdf { background: var(--warn-bg); color: var(--warn-fg); }
.a-kachel-vorschau.typ-tabelle { background: var(--ok-bg); color: var(--ok-fg); }
.a-kachel-vorschau.typ-text { background: var(--info-bg); color: var(--info-fg); }
.a-kachel-vorschau.typ-archiv { background: var(--hint-bg); color: var(--hint-fg); }
.a-kachel-text { padding: 7px 9px 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.a-kachel-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-kachel-knoepfe { display: flex; gap: 4px; padding: 4px 8px 8px; }
.a-kachel-knoepfe .btn { flex: 1; display: inline-flex; justify-content: center; align-items: center; }
.panel.a-zieht { outline: 3px dashed var(--teal); outline-offset: -6px; }
.panel.a-zieht .a-ablage { border-color: var(--teal); background: var(--ok-bg); color: var(--ok-fg); }
.panel.a-zieht::after { content: 'Loslassen, um die Dateien an die Aufgabe zu hängen'; position: absolute; left: 50%; top: 70px; transform: translateX(-50%);
  z-index: 5; pointer-events: none; padding: 9px 16px; border-radius: 20px; background: var(--ok-fg); color: #fff; font-size: 14px; white-space: nowrap; }
.kommentar-form .btnrow .upload-label { margin-right: auto; }
@media (max-width: 600px) {
  .a-panel .kommentar-form { position: sticky; bottom: -14px; z-index: 2; background: var(--card); padding: 8px 0 10px; box-shadow: 0 -6px 12px -8px rgba(var(--shadow), .35); }
  .panel.a-zieht::after { white-space: normal; width: 80%; text-align: center; }
}

/* ---- Projektseite (ab 0.158.0): Kopf, Einstellungen, Reiter, Gruppen, Board, Dateien, Notizen, Angebote, Zeiten ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pk { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.pk-links { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pk .crumb { margin: 0; }
.pk-titel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pk-titel h1 { margin: 0; font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.pk-key { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--info-bg); color: var(--info-fg); }
.pk-meta { color: var(--muted); font-size: 14px; }
.pk-stand { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.pk-balken { width: 160px; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; display: inline-block; }
.pk-balken > span { display: block; height: 100%; background: var(--teal); }
.pk-mitglieder { display: inline-flex; align-items: center; padding-left: 6px; }
.pk-mitglieder .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--bg); }
.pk-mitglieder .lnk { margin-left: 8px; }
.pk-aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#pk-einst.an { border-color: var(--navy); background: var(--row-bg); }
.a-mehr-menue a.a-mehr-punkt { text-decoration: none; }
.pk-einst { margin-bottom: 14px; }
.pk-einst[hidden] { display: none; }
.pk-einst-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pk-einst-kopf h2 { margin: 0; }
.pk-einst-raster { display: grid; gap: 10px; margin-top: 10px; }
.pk-einst-zeile { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.pk-einst-name { font-size: 13px; font-weight: 600; color: var(--muted); }
.pk-einst-wert { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.pk-einst-wert .teams-feld { flex: 1 1 260px; min-width: 0; }
.pk-einst .farbwahl { margin: 0; padding: 0; border: 0; background: none; }
.pk-mitglieder-block { border-top: 1px solid var(--line); margin-top: 14px; }
.pr-reiter { margin-bottom: 14px; }
.pr-zahl { font-size: 12px; padding: 1px 7px; border-radius: 9px; background: var(--col-bg); color: var(--muted); font-weight: 400; }
.pr-aufgaben { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.pr-teile { flex: 1 1 210px; max-width: 250px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px;
  display: flex; flex-direction: column; gap: 2px; }
.pr-teile-titel { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 8px; }
.pr-teil { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.pr-teil:hover { background: var(--row-bg); }
.pr-teil.aktiv { background: var(--ok-bg); color: var(--ok-fg); font-weight: 600; }
.pr-teil-zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pr-teil-name { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.pr-teil-zahl { color: var(--muted); font-weight: 400; }
.pr-teil-balken { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-left: 15px; }
.pr-teil-balken > span { display: block; height: 100%; background: var(--teal); }
.pr-teil.archiv { flex-direction: row; align-items: center; gap: 7px; opacity: .75; font-size: 14px; }
.pr-teil-archiv, .pr-teil-neu { text-align: left; padding: 8px 10px; }
.pr-liste { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pr-werkzeug { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pr-werkzeug input[type="search"] { flex: 1 1 200px; min-width: 0; }
.pr-umschalter { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; flex: none; max-width: 100%; }
.pr-umschalter > a, .pr-umschalter > button { font: inherit; font-size: 14px; padding: 7px 13px; border: 0; border-left: 1px solid var(--line); background: var(--card);
  color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap; }
.pr-umschalter > :first-child { border-left: 0; }
.pr-umschalter > .an { background: var(--navy); color: #fff; }
.pr-haken { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; white-space: nowrap; }
.pr-info { display: flex; gap: 12px; flex-wrap: wrap; }
.pr-info[hidden] { display: none; }
.pr-gruppen { display: flex; flex-direction: column; gap: 12px; }
.pr-gruppe { padding: 0; margin: 0; overflow: hidden; }
.pr-gruppe[hidden] { display: none; }
.pr-gruppe-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pr-gruppe-schalter { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 2px; display: inline-flex; transform: rotate(90deg); transition: transform .15s; }
.pr-gruppe.zu .pr-gruppe-schalter { transform: none; }
.pr-gruppe.zu .pr-gruppe-kopf { border-bottom: 0; }
.pr-gruppe-link { margin-left: auto; }
.pr-gruppe .pr-zeilen { padding: 2px 14px; }
.pr-gruppe-leer { padding: 6px 14px; }
.pr-gruppe.zu .pr-zeilen, .pr-gruppe.zu .pr-neu, .pr-gruppe.zu .pr-gruppe-leer { display: none; }
.pr-neu { padding: 6px 14px 12px; }
.pr-liste > .pr-neu { padding: 0; }
.pr-neu input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 8px 10px; border: 1px dashed var(--grid-strong);
  border-radius: 8px; background: var(--row-bg); color: var(--text); }
.pr-neu input:focus { border-style: solid; background: var(--card); }
.pr-board-scroll { overflow-x: auto; }
.pr-board { min-width: 860px; display: flex; flex-direction: column; gap: 8px; }
.pr-board-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(150px, .7fr); gap: 10px; }
.pr-board-spaltenkopf { font-size: 13px; font-weight: 600; padding: 6px 4px; border-bottom: 2px solid var(--grid-strong); }
.pr-board-spaltenkopf.in_bearbeitung { border-bottom-color: var(--info-fg); }
.pr-board-spaltenkopf.wartet { border-bottom-color: var(--orange); }
.pr-board-spaltenkopf.erledigt { border-bottom-color: var(--teal); }
.pr-bahn { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.pr-bahn-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.pr-bahn-kopf a { margin-left: auto; }
.kb-spalte.pr-spalte { min-width: 0; max-width: none; }
.pr-spalte .kb-liste { min-height: 56px; padding-top: 10px; }
.pr-spalte .kb-karte[hidden] { display: none; }
.pr-ablage-zeile { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 12px; }
.pr-ablage { flex: 999 1 340px; position: relative; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 2px dashed var(--line);
  border-radius: 12px; background: var(--card); cursor: pointer; color: var(--muted); }
.pr-ablage input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.pr-ablage.ueber, .pr-ablage:focus-within { border-color: var(--teal); }
.pr-ablage.ueber { background: var(--ok-bg); }
.pr-ziel { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; min-width: 0; max-width: 100%; }
.pr-ziel select, .pr-werkzeug select { max-width: 100%; min-width: 0; }
.pr-dateien .pr-werkzeug, .pr-zeiten .pr-werkzeug { margin-bottom: 12px; }
.pr-tabelle-karte { padding: 0; overflow: hidden; }
.pr-tabelle-karte > .btn { margin: 10px 14px; }
.pr-dateien-tabelle td, .pr-zeiten-tabelle td { vertical-align: middle; }
.pr-dateien-tabelle .num, .pr-zeiten-tabelle .num { text-align: right; }
.pr-dateien-tabelle tr[hidden] { display: none; }
.pr-datei { display: inline-flex; align-items: center; gap: 10px; }
.pr-datei-typ { width: 40px; height: 30px; flex: none; border-radius: 6px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center;
  justify-content: center; background: var(--col-bg); color: var(--muted); }
.pr-datei-typ.typ-pdf { background: var(--warn-bg); color: var(--warn-fg); }
.pr-datei-typ.typ-bild { background: var(--info-bg); color: var(--info-fg); }
.pr-datei-typ.typ-tabelle { background: var(--ok-bg); color: var(--ok-fg); }
.pr-datei-typ.typ-text { background: var(--info-bg); color: var(--info-fg); }
.pr-datei-typ.typ-archiv { background: var(--hint-bg); color: var(--hint-fg); }
.pr-notizen { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.pr-notiz-liste { flex: 1 1 280px; max-width: 360px; display: flex; flex-direction: column; gap: 10px; }
.pr-notiz-knoepfe { display: flex; gap: 8px; }
.pr-notiz-knoepfe .btn { flex: 1; }
.pr-notiz-liste .pr-umschalter { display: flex; }
.pr-notiz-liste .pr-umschalter > * { flex: 1; padding-left: 6px; padding-right: 6px; }
.pr-notiz-eintraege { padding: 0; margin: 0; overflow: hidden; }
.pr-notiz { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.pr-notiz:last-child { border-bottom: 0; }
.pr-notiz:hover { background: var(--row-bg); }
.pr-notiz.aktiv { background: var(--ok-bg); box-shadow: inset 3px 0 0 var(--teal); }
.pr-notiz[hidden] { display: none; }
.pr-notiz-oben { display: flex; gap: 8px; align-items: center; }
.pr-notiz-lesen { flex: 999 1 500px; min-width: 0; margin: 0; }
.pr-lesen-kopf { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.pr-lesen-titel { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.pr-lesen-titel h2 { margin: 0; font-size: 20px; }
.pr-lesen-dateien { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.pr-chip { font-size: 13px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.pr-lesen-aufgabe { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.pr-angebote-kopf { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.pr-angebote-summe { flex: 999 1 420px; margin: 0; }
.pr-angebote-summe .ang-vorhaben-summe { margin: 0; padding-top: 0; border-top: 0; }
.pr-angebote-liste { display: flex; flex-direction: column; gap: 10px; }
.pr-vergleich { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; color: var(--text); text-decoration: none; margin: 0; }
.pr-vergleich:hover { border-color: var(--teal); }
.pr-vergleich-titel { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pr-vergleich-summe { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.pr-vergleich-hinweis { grid-column: 1 / -1; color: var(--hint-fg); }
.pr-websites-text { flex: 999 1 320px; margin: 0; }
.pr-website-zeile { min-width: 0; overflow-wrap: anywhere; }
.pr-website-fort { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; white-space: nowrap; }
.pr-luecke { flex: 1; }
.pr-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 12px; }
.pr-kachel { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pr-kachel-titel { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pr-kachel strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.pr-z-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 12px; }
.pr-z-balken { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pr-z-balken h2 { margin: 0; font-size: 15px; }
.pr-balken-zeile { display: flex; flex-direction: column; gap: 4px; }
.pr-balken-text { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.pr-balken-text span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-balken { height: 8px; background: var(--col-bg); border-radius: 4px; overflow: hidden; }
.pr-balken > span { display: block; height: 100%; background: var(--ok-fg); border-radius: 0 4px 4px 0; }
.pr-buchen-zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 899px) {
  .pr-teile { flex: 1 1 100%; max-width: none; flex-direction: row; overflow-x: auto; padding: 0 0 2px; background: none; border: 0; gap: 6px; }
  .pr-teile-titel, .pr-teil-balken { display: none; }
  .pr-teil, .pr-teil.archiv { flex: none; flex-direction: row; white-space: nowrap; border: 1px solid var(--line); border-radius: 18px; padding: 7px 12px; background: var(--card); }
  .pr-teil-zeile { gap: 6px; }
  .pr-teil-archiv, .pr-teil-neu { flex: none; white-space: nowrap; }
  #teil-archiv-liste:not([hidden]) { display: contents; }
  .pr-notiz-lesen { display: none; }
  .pr-notiz-liste { max-width: none; }
}
@media (max-width: 600px) {
  .pk-titel h1 { font-size: 20px; }
  .pk-aktionen { width: 100%; }
  .pk-aktionen > .btn-primary { flex: 1; }
  .pk-ki-text { display: none; }   /* KI-Bericht am Handy nur als Symbol, sonst rutscht ⋯ in die zweite Zeile */
  .pk-einst-zeile { grid-template-columns: minmax(0, 1fr); }
  .pk-balken { width: 110px; }
  .pr-vergleich { grid-template-columns: minmax(0, 1fr); }
  .pr-vergleich-summe { grid-column: 1; grid-row: auto; align-items: flex-start; }
  .pr-website-fort { grid-column: 1; grid-row: auto; }
}

/* Verwaltung → Protokoll: Filter und Liste (auf schmalen Bildschirmen gestapelt) */
.protokoll-filter { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 8px; }
.protokoll-filter label { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.protokoll-filter select { width: 100%; max-width: 100%; }
.protokoll-tabelle td { overflow-wrap: anywhere; }
.protokoll-tabelle th:first-child { width: 9.5em; }
@media (max-width: 700px) {
  .protokoll-tabelle tr { grid-template-columns: auto minmax(0, 1fr); }
  .protokoll-tabelle td:first-child { color: var(--muted); font-size: 12px; }
  .protokoll-tabelle td:nth-child(2) { font-size: 12px; text-align: right; }
  .protokoll-tabelle td:nth-child(3), .protokoll-tabelle td:nth-child(4) { grid-column: 1 / -1; }
  .protokoll-tabelle td:nth-child(4):not(:empty)::before { content: 'an '; color: var(--muted); }
}

/* ---- Heute: Faelliges aus allen Apps, je App eine Karte ---- */
.ht-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 2px 12px; }
.ht-kopf h1 { margin: 0; font-size: 22px; }
.ht-gruppe h2 { display: flex; align-items: center; gap: 8px; }
.ht-gruppe[hidden], .ht-leer[hidden] { display: none; }
.ht-liste li.ht-punkt { align-items: flex-start; gap: 10px; }
.ht-ico { color: var(--muted); flex: none; padding-top: 2px; display: inline-flex; }
.ht-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text);
  text-align: left; font: inherit; padding: 0; overflow-wrap: anywhere; }
button.ht-text { color: var(--text); }
.ht-text:hover .ht-titel { color: var(--link); text-decoration: underline; }
.ht-titel { font-weight: 500; }
.ht-hinweis { color: var(--muted); font-size: 13px; }
.ht-anzahl { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--info-bg); color: var(--info-fg);
  font-size: 12px; font-weight: 600; text-align: center; }
.ht-punkt .badge { flex: none; margin-top: 1px; }
.ht-nichts, .ht-fehler { margin: 0; }
.ht-fehler { display: flex; align-items: center; gap: 6px; }
.ht-leer { display: flex; align-items: center; gap: 14px; color: var(--akzent-text); }
.ht-leer > div { display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.ht-fuss { margin: 4px 2px 0; }

/* ---- Portfolio: Tabelle am Bildschirm, Karten am Telefon ---- */
.pf-kopf { gap: 10px 14px; }
.pf-filter { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-width: 0; max-width: 100%; }
/* Auswahlfelder werden so breit wie ihre laengste Option – lange Projektnamen
   drueckten die Websites-Uebersicht am Telefon ueber den Rand (0.176.0) */
.pf-filter select { min-width: 0; max-width: min(100%, 280px); text-overflow: ellipsis; }
.pf-ampel-filter { display: inline-flex; gap: 4px; }
.pf-ampel-filter .chip { display: inline-flex; align-items: center; gap: 5px; }
.pf-ampel { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; vertical-align: -1px; }
.pf-ampel.pf-rot { background: #d64545; }
.pf-ampel.pf-gelb { background: #e8b02e; }
.pf-ampel.pf-gruen { background: #2bb57a; }
.pf-tabelle th, .pf-tabelle td { vertical-align: top; }
.pf-tabelle th.num, .pf-tabelle td.num { text-align: right; }
.pf-tabelle .nowrap { white-space: nowrap; }
.pf-tabelle td.pf-a, .pf-tabelle th.pf-a { width: 18px; padding-right: 0; }
.pf-tabelle td.pf-a .pf-ampel { margin-top: 4px; }
.pf-sort { background: none; border: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; cursor: pointer; white-space: nowrap; }
.pf-sort.an { color: var(--text); }
.pf-name { min-width: 220px; }
.pf-name .klapp { vertical-align: -2px; margin-right: 2px; }
.pf-projekt { font-weight: 600; text-decoration: none; }
.pf-projekt:hover { text-decoration: underline; }
.pf-teil .pf-name { padding-left: 34px; }
.pf-teil .pf-projekt { font-weight: 400; }
.pf-teil td { background: var(--row-bg); font-size: 13px; }
.pf-grund { color: var(--muted); margin-top: 2px; }
.pf-fort { white-space: nowrap; }
.pf-balken { display: inline-block; width: 90px; height: 7px; border-radius: 4px; background: var(--col-bg); overflow: hidden; vertical-align: middle; }
.pf-balken > span { display: block; height: 100%; background: var(--teal); }
.pf-zahl { font-size: 12px; color: var(--muted); margin-left: 6px; font-variant-numeric: tabular-nums; }
.pf-karten { display: none; list-style: none; margin: 0; padding: 0; }
.pf-karte { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.pf-karte-kopf { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.pf-karte-zeile { margin: 8px 0; }
.pf-werte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: 13px; }
.pf-werte dt { color: var(--muted); }
.pf-werte dd { margin: 0; overflow-wrap: anywhere; }
.pf-teile { margin-top: 8px; }
.pf-teile ul { list-style: none; margin: 6px 0 0; padding: 0; }
.pf-teile li { padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
.pf-teile li .pf-ampel { margin-right: 6px; }
@media (max-width: 760px) {
  .pf-tabelle-box { display: none; }
  .pf-karten { display: block; }
  .pf-filter { margin-left: 0; }
}

/* Verwaltung → Verbund: Partner-Apps mit Token */
.wv-partner li { flex-wrap: wrap; }
.wv-partner .titel { cursor: default; flex: 1 1 200px; }
.wv-partner .titel:hover { color: inherit; text-decoration: none; }


/* ---- Websites (#/websites, #/website/<id>/<reiter>) ---- */
.ws-st-geplant { background: var(--col-bg); color: var(--muted); }
.ws-st-in_arbeit { background: var(--hint-bg); color: var(--hint-fg); }
.ws-st-test { background: var(--info-bg); color: var(--info-fg); }
.ws-st-live { background: var(--ok-bg); color: var(--ok-fg); }
.ws-st-verschoben { background: var(--warn-bg); color: var(--warn-fg); }
.ws-ueber { color: var(--warn-fg); font-weight: 600; }
input.ws-ueber { border-color: var(--warn-fg); }
.ws-detail { max-width: 1180px; margin: 0 auto; }
.ws-kopf { margin-bottom: 12px; min-width: 0; }
.ws-kopf h1 { margin: 4px 0 6px; font-size: 22px; display: flex; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.ws-kopf h1 .pf-ampel { width: 14px; height: 14px; }
.ws-zurueck { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; }
.ws-zurueck:hover { color: var(--text); }
.ws-kopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ws-domain { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; }
.ws-kopf-projekt { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.ws-kopf-projekt:hover { text-decoration: underline; }
.ws-raster { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.ws-spalte { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ws-spalte .card { margin: 0; }
.ws-formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.ws-formular textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.ws-formular label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.ws-formular label > input, .ws-formular label > select, .ws-formular label > textarea { font-weight: 400; font-size: 15px; color: var(--text); width: 100%; min-width: 0; }
.ws-formular .ws-voll { grid-column: 1 / -1; }
.ws-gruppe { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px 12px; margin: 0; min-width: 0; }
.ws-gruppe legend { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 4px; }
.ws-formular .btnrow { justify-content: flex-end; flex-wrap: wrap; }
.ws-werte { font-size: 14px; }
.ws-stand { margin: 12px 0 0; }
.ws-pk-gruppe { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 2px; }
.ws-checkliste h2 + p + .ws-pk-gruppe { margin-top: 8px; }
.ws-pks { list-style: none; margin: 0; padding: 0; }
.ws-pk { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.ws-pk:first-child { border-top: 0; }
.ws-pk-haken { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.ws-pk-haken input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--teal); }
.ws-pk-name { font-weight: 600; overflow-wrap: anywhere; }
.ws-pk-erledigt .ws-pk-name { color: var(--muted); font-weight: 400; }
.ws-pk-entfaellt .ws-pk-name { color: var(--muted); text-decoration: line-through; font-weight: 400; }
.ws-pk-meta { white-space: nowrap; }
.ws-pk-knoepfe { display: inline-flex; align-items: center; gap: 4px; }
.ws-pk-knoepfe .btn-icon.an { color: var(--akzent-text); }
.ws-pk-weg { font-size: 12px; padding: 2px 9px; }
.ws-pk-notiz { grid-column: 1 / -1; margin-left: 28px; padding: 6px 8px; font-size: 14px; min-width: 0; }
.ws-pk:not([data-phase]) { grid-template-columns: 18px minmax(0, 1fr) auto auto; }
.ws-pk-zeichen { color: var(--muted); font-weight: 700; text-align: center; }
.ws-pk-erledigt .ws-pk-zeichen { color: var(--ok-fg); }
.ws-pk-notiz-text { grid-column: 2 / -1; color: var(--muted); overflow-wrap: anywhere; }
/* Eigene Punkte: Marke am Namen, Formular zum Hinzufuegen unter der Liste */
.ws-pk-eigen { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 11px; font-weight: 500;
  color: var(--muted); vertical-align: 1px; text-decoration: none; }
.ws-pk-neu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.ws-pk-neu input { flex: 1 1 240px; min-width: 0; }
.ws-pk-neu select { flex: 1 1 auto; max-width: 220px; min-width: 0; }
.ws-pk-neu .btn { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.ws-hinweis { margin: 0 0 12px; }
.ws-ab-leiste { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start; justify-content: space-between; margin: 0 0 12px; }
.ws-ab-leiste .ws-hinweis { flex: 1 1 280px; margin: 0; }
.ws-abschnitte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 16px; align-items: start; }
.ws-abschnitt { margin: 0; min-width: 0; }
/* Kopf je Abschnitt: Anfasser, Name zum Auf-/Zuklappen, Stand, Ausblenden */
.ws-ab-kopf { display: flex; align-items: center; gap: 6px 8px; min-width: 0; }
.ws-ab-kopf .sortgriff { margin-left: -6px; }
.ws-ab-titel { margin: 0; flex: 1 1 auto; min-width: 0; }
.card h2.ws-ab-titel { margin: 0; }
.ws-ab-schalter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; padding: 2px 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.ws-ab-name { overflow-wrap: anywhere; }
.ws-ab-pfeil { display: inline-flex; align-self: center; color: var(--muted); transition: transform .15s; transform: rotate(90deg); flex: none; }
.ws-abschnitt.zu .ws-ab-pfeil { transform: none; }
.ws-ab-kurz { white-space: nowrap; font-weight: 400; }
.ws-ab-inhalt { margin-top: 10px; }
.ws-abschnitt.zieht { opacity: .4; }
.ws-abschnitt.ziel-oben { box-shadow: 0 -3px 0 var(--navy); }
.ws-abschnitt.ziel-unten { box-shadow: 0 3px 0 var(--navy); }
.ws-ab-ausgeblendet { margin-top: 16px; }
.ws-ab-ausgeblendet > summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 6px 0; overflow-wrap: anywhere; }
.ws-ab-ausgeblendet > .ws-abschnitte { margin-top: 10px; }
.ws-ab-ausgeblendet .ws-abschnitt { background: var(--bg); }

/* ---- Rollout mit blue-migration: Vorgehen, Installationen, Fahrplan, Bloecke ---- */
.badge.ws-vg-migration { background: var(--info-bg); color: var(--info-fg); }
.badge.ws-vg-neu { background: var(--col-bg); color: var(--muted); }
td .badge.ws-vg-migration, td .badge.ws-vg-neu, dd .badge.ws-vg-migration, dd .badge.ws-vg-neu { margin-left: 6px; }
.ws-inst-titel { display: flex; align-items: center; gap: 10px; }
.ws-inst-titel h2 { flex: 1; }
.ws-insts { list-style: none; margin: 0; padding: 0; }
.ws-inst { padding: 10px 0; border-top: 1px solid var(--line); }
.ws-inst:first-child { border-top: 0; }
.ws-inst-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ws-inst-kopf .ws-domain { flex: 1 1 160px; min-width: 0; }
.ws-inst-stand { margin-top: 3px; overflow-wrap: anywhere; }
.badge.ws-inst-live { background: var(--info-bg); color: var(--info-fg); }
.ws-inst-ok { color: var(--ok-fg); }
.ws-inst-alt { color: var(--hint-fg); }
.ws-fp-kopf { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-start; }
.ws-fp-kopf-text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ws-fp-links { display: flex; flex-direction: column; gap: 4px; }
.ws-fp-phasen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; align-items: start; margin-top: 14px; }
.ws-fp-phase { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ws-fp-stumm { opacity: .75; }
.ws-fp-phase-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ws-fp-balken { width: 100%; }
.ws-fp-schritte { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ws-fp-schritt { display: grid; grid-template-columns: 16px 28px minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 2px 4px; margin: 0 -4px; border-radius: 6px; }
.ws-fp-zeichen { font-weight: 700; text-align: center; }
.ws-fp-done .ws-fp-zeichen { color: var(--ok-fg); }
.ws-fp-warn { background: var(--hint-bg); }
.ws-fp-warn .ws-fp-zeichen { color: var(--hint-fg); }
.ws-fp-open, .ws-fp-none { color: var(--muted); }
.ws-fp-none .ws-fp-zeichen { color: var(--grid-strong); }
.ws-fp-naechster { outline: 2px solid var(--navy); outline-offset: -2px; color: var(--text); }
.ws-fp-label { overflow-wrap: anywhere; }
.ws-fp-laeufe { margin-top: 14px; }
.ws-fp-laeufe-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 10px 24px; font-size: 13px; }
.ws-pk-fp, .ws-pk-abw { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 500; vertical-align: 1px; }
.ws-pk-fp { border: 1px solid var(--line); color: var(--muted); }
.ws-pk-abw { background: var(--hint-bg); color: var(--hint-fg); }
.ws-pk-hinweis { display: inline-flex; align-items: center; gap: 4px; color: var(--hint-fg); margin-left: 8px; white-space: normal; }
.ws-bm-block { border: 1px solid var(--info-fg); border-color: color-mix(in srgb, var(--info-fg) 35%, transparent); background: var(--info-bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }
.ws-bm-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--info-fg); margin-bottom: 6px; }
.ws-bm-kopf strong { color: var(--info-fg); }
.ws-bm-kopf a { margin-left: auto; }
.ws-bm-zeilen { display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.ws-bm-zeilen dt { color: var(--info-fg); }
.ws-bm-zeilen dd { margin: 0; overflow-wrap: anywhere; }
.ws-bm-warn { color: var(--hint-fg); font-weight: 600; }
.ws-vg-liste select[data-fahrplan], .ws-vg-liste select[data-quelle] { flex: 0 1 220px; }
@media (max-width: 560px) {
  .ws-bm-zeilen { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .ws-bm-zeilen dd { margin-bottom: 6px; }
  .ws-fp-schritt { grid-template-columns: 16px minmax(0, 1fr); }
  .ws-fp-kurz { display: none; }
}
.ws-unter { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 16px 0 6px; font-weight: 600; }
.ws-eintraege, .ws-dateien { list-style: none; margin: 0 0 8px; padding: 0; }
.ws-eintrag { padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.ws-eintrag:first-child { border-top: 0; }
.ws-eintrag-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.ws-eintrag-knoepfe { margin-left: auto; display: inline-flex; gap: 2px; }
.ws-eintrag-wert { margin-top: 3px; overflow-wrap: anywhere; min-width: 0; }
.ws-code { margin: 0; max-width: 100%; overflow-x: auto; background: var(--col-bg); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.ws-typ-geheim { background: var(--warn-bg); color: var(--warn-fg); }
.ws-typ-url, .ws-typ-code { background: var(--info-bg); color: var(--info-fg); }
.ws-geheim { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ws-maske { letter-spacing: 2px; color: var(--muted); }
.ws-klar { letter-spacing: 0; color: var(--text); background: var(--col-bg); border-radius: 4px; padding: 1px 6px; overflow-wrap: anywhere; }
.ws-dateien li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 5px 0; overflow-wrap: anywhere; }
.ws-hochladen { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.ws-freigaben { list-style: none; margin: 0; padding: 0; }
.ws-freigabe { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.ws-freigabe.ws-fg-widerrufen, .ws-freigabe.ws-fg-abgelaufen { opacity: .75; }
.ws-fg-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ws-fg-aktionen { flex-wrap: wrap; margin-top: 6px; }
/* Website-Dialoge: so breit wie die grossen Dialoge der App (Aufgaben-Panel,
   Angebotsvergleich). Formulare rund 720 px, Freigabe/Protokoll/Vorschau bis
   1000 px, nie ueber 92vw; der Inhalt scrollt, die Knoepfe bleiben unten. */
dialog.frage.ws-dialog { width: min(720px, 92vw); max-width: 92vw; max-height: calc(100dvh - 48px); overflow: auto; box-sizing: border-box;
  padding: 20px 24px 0; overscroll-behavior: contain; }
dialog.frage.ws-dialog.ws-breit { width: min(1000px, 92vw); }
dialog.frage.ws-dialog .frage-knoepfe { position: sticky; bottom: 0; z-index: 2; background: var(--card); margin: 14px -24px 0; padding: 12px 24px 16px;
  border-top: 1px solid var(--line); flex-wrap: wrap; }
dialog.frage.ws-dialog textarea.frage-feld { min-height: 140px; resize: vertical; line-height: 1.45; }
dialog.frage.ws-dialog textarea.ws-code-feld { min-height: 240px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
  white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 4; }
.ws-dlg-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ws-dlg-raster .ws-voll { grid-column: 1 / -1; }
.ws-dlg-titel { margin: 0 0 12px; font-size: 17px; }
.ws-fg-oben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.ws-fg-oben .ws-cb { grid-column: 1 / -1; }
.ws-fg-ab { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px 10px; margin: 0 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 2px 12px; min-width: 0; }
.ws-fg-ab legend { font-weight: 700; padding: 0 4px; }
.ws-fg-alle { grid-column: 1 / -1; justify-self: start; margin-bottom: 4px; }
.ws-cb { display: flex; align-items: flex-start; gap: 6px; padding: 3px 0; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.ws-cb input { margin-top: 3px; accent-color: var(--teal); }
.ws-fg-fehler { color: var(--warn-fg); background: var(--warn-bg); border-radius: 8px; padding: 8px 10px; margin: 8px 0 0; }
/* .ws-fg-knoepfe: klebt unten wie alle Knoepfe der Website-Dialoge (dialog.frage.ws-dialog .frage-knoepfe) */
.ws-fg-platz { flex: 1; }
.ws-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
dialog.frage.ws-vorschau { width: min(1000px, 92vw); max-width: 92vw; height: calc(100dvh - 40px); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
dialog.frage.ws-vorschau:not([open]) { display: none; }
.ws-vorschau-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.ws-vorschau-kopf [data-zu] { margin-left: auto; }
.ws-vorschau iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.ws-log td { vertical-align: top; }
.ws-vg-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.ws-vg-liste { margin: 0 0 8px; padding-left: 22px; }
.ws-vg-liste li { margin: 4px 0; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ws-vg-liste input { flex: 1 1 140px; min-width: 120px; padding: 6px 8px; }
.ws-vg-liste select { flex: 0 1 auto; padding: 5px 6px; font-size: 13px; }
@media (max-width: 900px) {
  .ws-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ws-formular, .ws-gruppe { grid-template-columns: minmax(0, 1fr); }
  .ws-fg-oben { grid-template-columns: minmax(0, 1fr); }
  /* Checkliste: Haken und Name in der ersten Zeile, Stand und Knoepfe darunter */
  .ws-pk[data-phase] { grid-template-columns: minmax(0, 1fr) auto; }
  .ws-pk[data-phase] .ws-pk-haken { grid-column: 1 / -1; }
  .ws-pk[data-phase] .ws-pk-meta { margin-left: 28px; white-space: normal; }
  .ws-pk:not([data-phase]) { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .ws-pk:not([data-phase]) .ws-pk-meta { grid-column: 2 / -1; }
  .ws-kopf h1 { font-size: 19px; }
}
/* Telefon: Website-Dialoge als Blatt ueber die ganze Breite, Inhalt scrollt,
   Knoepfe bleiben unten sichtbar (mit Abstand zur Home-Leiste) */
@media (max-width: 760px) {
  dialog.frage.ws-dialog, dialog.frage.ws-dialog.ws-breit, dialog.frage.ws-vorschau {
    width: 100vw; max-width: 100vw; margin: 0; inset: auto 0 0 0; position: fixed; border-radius: 16px 16px 0 0; max-height: 94dvh; }
  dialog.frage.ws-dialog:not(.ws-vorschau) { padding: 16px 16px 0; }
  dialog.frage.ws-vorschau { height: 94dvh; }
  dialog.frage.ws-dialog .frage-knoepfe { margin: 14px -16px 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  dialog.frage.ws-dialog .frage-knoepfe .btn { flex: 1 1 auto; }
  .ws-dlg-raster { grid-template-columns: minmax(0, 1fr); }
  dialog.frage.ws-dialog .frage-feld { font-size: 16px; }   /* iOS zoomt sonst beim Antippen */
  dialog.frage.ws-dialog textarea.ws-code-feld { font-size: 16px; }
}
.ws-fg-eins { grid-template-columns: minmax(0, 1fr); }
.ws-fg-oben .frage-label .small { display: block; margin-top: 4px; }
/* Websites-Uebersicht: verknuepftes Hauptprojekt */
.ws-projekt-zelle { max-width: 260px; }
.ws-projekt { color: inherit; text-decoration: none; }
.ws-projekt:hover { text-decoration: underline; }

/* ---- Aussehen (Verwaltung › Überblick) ---- */
.stil-wahl { display: grid; gap: 8px; margin: 4px 0 10px; }
.stil-wahl .stil-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.stil-wahl .stil-option:has(input:checked) { border-color: var(--akzent-text); box-shadow: 0 0 0 1px var(--akzent-text); }
.stil-wahl input[type=radio] { flex: none; margin: 0; padding: 0; width: 17px; height: 17px; accent-color: var(--navy); }
.stil-wahl img { width: 40px; height: 40px; flex: none; }
.stil-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }