/* Stylesheet der Weboberfläche, bewusst ohne Framework. Farben und Abstände als Variablen;
   heller und dunkler Modus folgen der Systemeinstellung. Keine Inline-Styles (Content-Security-Policy). */
:root {
    color-scheme: light;
    --text: #18181b;
    --gedaempft: #5f6370;
    --linie: #e4e4e7;
    --linie-stark: #d4d4d8;
    --flaeche: #f7f7f9;
    --karte: #ffffff;
    --hintergrund: #f4f5f7;
    --akzent: #4f46e5;
    --akzent-hover: #4338ca;
    --akzent-zart: #eef2ff;
    --akzent-text: #ffffff;
    --erfolg: #15803d;
    --erfolg-zart: #f0fdf4;
    --fehler: #b91c1c;
    --fehler-zart: #fef2f2;
    --warnung: #b45309;
    --warnung-zart: #fffbeb;
    --radius: 10px;
    --radius-klein: 6px;
    --schatten: 0 1px 2px rgb(16 24 40 / 0.05), 0 1px 3px rgb(16 24 40 / 0.06);
    --schatten-hoch: 0 8px 24px rgb(16 24 40 / 0.12);
    --fokus: 0 0 0 3px rgb(79 70 229 / 0.35);
    /* Diagramme (Velocity, Burndown) */
    --diagramm-raster: #e4e4e7;
    --diagramm-erreicht: #4f46e5;
    --diagramm-geplant: #18181b;
    --diagramm-prognose: #d97706;
    --diagramm-verbleibend: #4f46e5;
    --diagramm-umfang: #d97706;
    --diagramm-ideal: #a1a1aa;
}
/* Abgeleitete Tokens (Konzept 10.1): bewusst in einer eigenen :root-Regel vor den Themen. Custom Properties
   werden am Element aufgelöst; die Themen setzen die Grundvariablen auf demselben <html>, daher stimmen die
   Ableitungen in jedem Thema ohne eigene Werte. */
:root {
    --zeile-hover: color-mix(in srgb, var(--akzent) 5%, transparent);
    --auswahl: color-mix(in srgb, var(--akzent) 12%, transparent);
    --flaeche-gruppe: color-mix(in srgb, var(--akzent) 4%, var(--flaeche));
    /* Status: Vordergrund und zarter Hintergrund */
    --status-offen: var(--gedaempft);
    --status-bereit: color-mix(in srgb, var(--akzent) 75%, var(--gedaempft));
    --status-sprint: color-mix(in srgb, var(--akzent) 70%, var(--fehler));
    --status-erledigt: var(--erfolg);
    --status-verworfen: color-mix(in srgb, var(--gedaempft) 70%, var(--karte));
    --status-offen-zart: color-mix(in srgb, var(--status-offen) 14%, var(--karte));
    --status-bereit-zart: color-mix(in srgb, var(--status-bereit) 14%, var(--karte));
    --status-sprint-zart: color-mix(in srgb, var(--status-sprint) 14%, var(--karte));
    --status-erledigt-zart: color-mix(in srgb, var(--status-erledigt) 14%, var(--karte));
    --status-verworfen-zart: color-mix(in srgb, var(--status-verworfen) 14%, var(--karte));
    --blockiert: var(--fehler);
    --blockiert-zart: color-mix(in srgb, var(--blockiert) 12%, var(--karte));
    /* Abstände und Bewegung */
    --abstand-1: 4px;
    --abstand-2: 8px;
    --abstand-3: 12px;
    --abstand-4: 16px;
    --abstand-5: 24px;
    --abstand-6: 32px;
    --uebergang: 120ms ease;
}
/* Themen: Auswahl in der Kopfzeile (thema.js setzt data-thema an <html>). Ohne Auswahl oder mit
   "system" folgt das Thema der Systemeinstellung (hell oder dunkel). */
:root[data-thema="dunkel"] {
    color-scheme: dark;
    --text: #ececf1;
    --gedaempft: #a1a1aa;
    --linie: #2e2e35;
    --linie-stark: #3f3f46;
    --flaeche: #1f1f25;
    --karte: #18181d;
    --hintergrund: #111114;
    --akzent: #818cf8;
    --akzent-hover: #a5b4fc;
    --akzent-zart: #23234a;
    --akzent-text: #111114;
    --erfolg: #4ade80;
    --erfolg-zart: #12261a;
    --fehler: #f87171;
    --fehler-zart: #2b1515;
    --warnung: #fbbf24;
    --warnung-zart: #2a2112;
    --schatten: 0 1px 2px rgb(0 0 0 / 0.4);
    --schatten-hoch: 0 8px 24px rgb(0 0 0 / 0.5);
    --diagramm-raster: #2e2e35;
    --diagramm-erreicht: #818cf8;
    --diagramm-geplant: #ececf1;
    --diagramm-ideal: #71717a;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-thema]), :root[data-thema="system"] {
        color-scheme: dark;
        --text: #ececf1;
        --gedaempft: #a1a1aa;
        --linie: #2e2e35;
        --linie-stark: #3f3f46;
        --flaeche: #1f1f25;
        --karte: #18181d;
        --hintergrund: #111114;
        --akzent: #818cf8;
        --akzent-hover: #a5b4fc;
        --akzent-zart: #23234a;
        --akzent-text: #111114;
        --erfolg: #4ade80;
        --erfolg-zart: #12261a;
        --fehler: #f87171;
        --fehler-zart: #2b1515;
        --warnung: #fbbf24;
        --warnung-zart: #2a2112;
        --schatten: 0 1px 2px rgb(0 0 0 / 0.4);
        --schatten-hoch: 0 8px 24px rgb(0 0 0 / 0.5);
        --diagramm-raster: #2e2e35;
        --diagramm-erreicht: #818cf8;
        --diagramm-geplant: #ececf1;
        --diagramm-ideal: #71717a;
    }
}
:root[data-thema="nord"] {
    color-scheme: dark;
    --text: #eceff4;
    --gedaempft: #a3adbf;
    --linie: #3b4252;
    --linie-stark: #4c566a;
    --flaeche: #353c4a;
    --karte: #2e3440;
    --hintergrund: #272c36;
    --akzent: #88c0d0;
    --akzent-hover: #8fbcbb;
    --akzent-zart: #34404f;
    --akzent-text: #2e3440;
    --erfolg: #a3be8c;
    --erfolg-zart: #33402f;
    --fehler: #bf616a;
    --fehler-zart: #43303a;
    --warnung: #ebcb8b;
    --warnung-zart: #433f33;
    --schatten: 0 1px 2px rgb(0 0 0 / 0.35);
    --schatten-hoch: 0 8px 24px rgb(0 0 0 / 0.45);
    --fokus: 0 0 0 3px rgb(136 192 208 / 0.4);
    --diagramm-raster: #3b4252;
    --diagramm-erreicht: #88c0d0;
    --diagramm-geplant: #eceff4;
    --diagramm-prognose: #d08770;
    --diagramm-verbleibend: #88c0d0;
    --diagramm-umfang: #d08770;
    --diagramm-ideal: #4c566a;
}
:root[data-thema="dracula"] {
    color-scheme: dark;
    --text: #f8f8f2;
    --gedaempft: #a8acc6;
    --linie: #3a3c4e;
    --linie-stark: #4d5066;
    --flaeche: #2b2d3a;
    --karte: #282a36;
    --hintergrund: #1e1f29;
    --akzent: #bd93f9;
    --akzent-hover: #d0b0ff;
    --akzent-zart: #3a3150;
    --akzent-text: #1e1f29;
    --erfolg: #50fa7b;
    --erfolg-zart: #1f3a2a;
    --fehler: #ff5555;
    --fehler-zart: #3f2228;
    --warnung: #f1fa8c;
    --warnung-zart: #3a3b28;
    --schatten: 0 1px 2px rgb(0 0 0 / 0.4);
    --schatten-hoch: 0 8px 24px rgb(0 0 0 / 0.5);
    --fokus: 0 0 0 3px rgb(189 147 249 / 0.4);
    --diagramm-raster: #3a3c4e;
    --diagramm-erreicht: #bd93f9;
    --diagramm-geplant: #f8f8f2;
    --diagramm-prognose: #ffb86c;
    --diagramm-verbleibend: #8be9fd;
    --diagramm-umfang: #ffb86c;
    --diagramm-ideal: #6272a4;
}
:root[data-thema="solarized"] {
    color-scheme: light;
    --text: #073642;
    --gedaempft: #657b83;
    --linie: #e6dfc8;
    --linie-stark: #d6ceb5;
    --flaeche: #f5efdc;
    --karte: #fdf6e3;
    --hintergrund: #eee8d5;
    --akzent: #268bd2;
    --akzent-hover: #1f73ad;
    --akzent-zart: #e4ecec;
    --akzent-text: #fdf6e3;
    --erfolg: #859900;
    --erfolg-zart: #eef0d2;
    --fehler: #dc322f;
    --fehler-zart: #f8e2d8;
    --warnung: #b58900;
    --warnung-zart: #f6ecc8;
    --fokus: 0 0 0 3px rgb(38 139 210 / 0.35);
    --diagramm-raster: #e6dfc8;
    --diagramm-erreicht: #268bd2;
    --diagramm-geplant: #073642;
    --diagramm-prognose: #cb4b16;
    --diagramm-verbleibend: #268bd2;
    --diagramm-umfang: #cb4b16;
    --diagramm-ideal: #93a1a1;
}
:root[data-thema="wald"] {
    color-scheme: light;
    --text: #1c2b22;
    --gedaempft: #5b6b61;
    --linie: #dfe7e1;
    --linie-stark: #cbd8ce;
    --flaeche: #f3f7f4;
    --karte: #ffffff;
    --hintergrund: #eef3ef;
    --akzent: #15803d;
    --akzent-hover: #166534;
    --akzent-zart: #e8f5ec;
    --akzent-text: #ffffff;
    --fokus: 0 0 0 3px rgb(21 128 61 / 0.3);
    --diagramm-erreicht: #15803d;
    --diagramm-verbleibend: #15803d;
    --diagramm-prognose: #c2410c;
    --diagramm-umfang: #c2410c;
}

*, *::before, *::after { box-sizing: border-box; }
:root { --kopfhoehe: 3.25rem; --leistenbreite: 15rem; }

body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--hintergrund);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--radius-klein); }

/* --- Bausteine (Konzept 10.1) --------------------------------------------------------------- */
/* Plakette: kompakte Marke; die bisherigen Einzelmarken sind Aliase */
.plakette, .abh-plakette, .wartet-plakette, .marke-fertig, .planungsliste .punkte {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-1);
    height: 20px;
    padding: 0 var(--abstand-2);
    border-radius: var(--radius-klein);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--gedaempft);
    background: var(--flaeche);
}
.p-status-offen { color: var(--status-offen); background: var(--status-offen-zart); }
.p-status-bereit { color: var(--status-bereit); background: var(--status-bereit-zart); }
.p-status-sprint { color: var(--status-sprint); background: var(--status-sprint-zart); }
.p-status-erledigt, .marke-fertig { color: var(--status-erledigt); background: var(--status-erledigt-zart); }
.p-status-verworfen { color: var(--status-verworfen); background: var(--status-verworfen-zart); text-decoration: line-through; }
.p-punkte, .planungsliste .punkte { justify-content: center; min-width: 20px; padding: 0 var(--abstand-1); border-radius: 999px; }
.p-epic { color: var(--status-sprint); background: var(--status-sprint-zart); }
.p-label { color: var(--gedaempft); background: var(--flaeche); border: 1px solid var(--linie); }
.p-warnung, .abh-plakette, .wartet-plakette { color: var(--warnung); background: var(--warnung-zart); border: 1px solid var(--warnung); }
.p-status-archiv { color: var(--gedaempft); background: var(--flaeche); border: 1px solid var(--linie); }
.inline-formular { display: inline; margin: 0; }
.p-blockiert { color: var(--blockiert); background: var(--blockiert-zart); }

/* Fläche: Arbeitsfläche mit dünnem Rand; keine verschachtelten Flächen */
.flaeche {
    padding: var(--abstand-5);
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}
.flaeche + .flaeche { margin-top: var(--abstand-4); }
.flaeche-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-2) var(--abstand-4);
    margin-bottom: var(--abstand-3);
}
.flaeche-kopf h2, .flaeche-kopf h3 { margin: 0; font-size: 1.125rem; font-weight: 650; }
.flaeche-kopf .metadaten { flex: 1 0 100%; }
.abschnitt-titel { margin: 0 0 var(--abstand-2); font-size: 0.75rem; font-weight: 600; color: var(--gedaempft); text-transform: uppercase; letter-spacing: 0.04em; }

/* Fortschritt: <progress> oder <meter>, damit kein Inline-Style nötig ist */
.fortschritt { display: block; width: 100%; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: var(--flaeche); color: var(--akzent); appearance: none; -webkit-appearance: none; }
.fortschritt::-webkit-progress-bar { background: var(--flaeche); border-radius: 999px; }
.fortschritt::-webkit-progress-value { background: var(--akzent); border-radius: 999px; }
.fortschritt::-moz-progress-bar { background: var(--akzent); border-radius: 999px; }
.fortschritt::-webkit-meter-bar { background: var(--flaeche); border: 0; height: 6px; border-radius: 999px; }
.fortschritt::-webkit-meter-optimum-value, .fortschritt::-webkit-meter-suboptimum-value, .fortschritt::-webkit-meter-even-less-good-value { background: var(--akzent); border-radius: 999px; }
.fortschritt::-moz-meter-bar { background: var(--akzent); border-radius: 999px; }
.fortschritt-beschriftung { display: flex; justify-content: space-between; gap: var(--abstand-2); margin-bottom: var(--abstand-1); font-size: 0.8125rem; color: var(--gedaempft); }

/* Metadaten: kompaktes Raster aus Begriff und Wert */
.metadaten { display: grid; grid-template-columns: max-content 1fr; gap: var(--abstand-1) var(--abstand-4); margin: 0; font-size: 0.8125rem; }
.metadaten dt { color: var(--gedaempft); }
.metadaten dd { margin: 0; }

/* Interaktionszustände: Auswahl, Deaktiviert, Bewegung */
tr.ausgewaehlt > td, tr[aria-selected=true] > td { background: var(--auswahl); }
tr.ausgewaehlt > :first-child, tr[aria-selected=true] > :first-child { box-shadow: inset 3px 0 0 var(--akzent); }
:not(tr).ausgewaehlt, :not(tr)[aria-selected=true] { background: var(--auswahl); box-shadow: inset 3px 0 0 var(--akzent); }
:disabled, [aria-disabled=true] { opacity: 0.55; cursor: not-allowed; }
button:disabled:active, [aria-disabled=true]:active { transform: none; }
.tabelle td, .planungsliste li, .dailies li, .hindernisse li, .seitenleiste a, .seitenaktionen a { transition: background-color var(--uebergang), color var(--uebergang), box-shadow var(--uebergang); }
/* gezogenes Element: hoher Schatten und Transparenz (Ziehen: backlog-sortieren.js, board-ziehen.js, spalten-ziehen.js) */
#backlog-liste tr.zieht, #board-spalten tr.zieht, .board .aufgabe.zieht { opacity: 0.55; box-shadow: var(--schatten-hoch); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- Kopfzeile ------------------------------------------------------------------------------ */
.kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--karte) 88%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--linie);
}
.kopf-innen {
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    height: var(--kopfhoehe);
    padding: 0 1rem;
}
.kopf .marke {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--text);
}
.kopf .marke:hover { text-decoration: none; }
.kopf .logo {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--akzent), var(--status-sprint));
    color: var(--akzent-text);
    font-size: 0.9rem;
    font-weight: 700;
}
.kopf-abstand { flex: 1; }
.schubladenknopf, .einklappen {
    font: inherit;
    cursor: pointer;
    background: transparent;
    color: var(--gedaempft);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    padding: 0.2rem 0.55rem;
}
.schubladenknopf:hover, .einklappen:hover { color: var(--text); background: var(--flaeche); }
.schubladenknopf[hidden], .einklappen[hidden] { display: none; }
.schnellsuche { margin: 0; flex: 0 1 22rem; }
.schnellsuche input { width: 100%; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--flaeche); }
/* Personenmenü */
.personenmenue { position: relative; }
.personenmenue summary { list-style: none; cursor: pointer; display: block; }
.personenmenue summary::-webkit-details-marker { display: none; }
.personenmenue .initialen {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--akzent-zart);
    color: var(--akzent);
    border: 1px solid var(--linie-stark);
    font-weight: 650;
    font-size: 0.85rem;
}
.personenmenue .menue {
    position: absolute;
    right: 0;
    z-index: 30;
    display: grid;
    gap: 0.25rem;
    margin-top: 0.4rem;
    padding: 0.5rem;
    min-width: 14rem;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten-hoch);
}
.personenmenue .menue a { display: block; padding: 0.4rem 0.6rem; border-radius: var(--radius-klein); color: var(--text); }
.personenmenue .menue a:hover { background: var(--flaeche); text-decoration: none; }
.kopf .benutzer { margin: 0; padding: 0.25rem 0.6rem; color: var(--gedaempft); font-size: 0.875rem; }
.abmelden { margin: 0; }
.kopf .abmelden button {
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--text);
    border-color: transparent;
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
}
.kopf .abmelden button:hover { background: var(--flaeche); }

/* --- Shell: Seitenleiste und Inhalt --------------------------------------------------------- */
.shell { display: block; }
.shell.mit-leiste {
    display: grid;
    grid-template-columns: var(--leistenbreite) minmax(0, 1fr);
    align-items: start;
}
body.leiste-zu { --leistenbreite: 3.5rem; }
.seitenleiste {
    position: sticky;
    top: var(--kopfhoehe);
    height: calc(100vh - var(--kopfhoehe));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: var(--karte);
    border-right: 1px solid var(--linie);
}
.seitenleiste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.seitenleiste hr { width: 100%; border: 0; border-top: 1px solid var(--linie); margin: 0.5rem 0; }
.seitenleiste a, .seitenleiste .nicht-verfuegbar, .seitenleiste .einklappen, .seitenleiste .produktwechsel summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-klein);
    color: var(--gedaempft);
    font-weight: 500;
    min-height: 2.25rem;
}
.seitenleiste a:hover { background: var(--flaeche); color: var(--text); text-decoration: none; }
.seitenleiste .nicht-verfuegbar { opacity: 0.5; cursor: not-allowed; }
.seitenleiste a.aktiv { background: var(--akzent-zart); color: var(--akzent); font-weight: 650; }
.seitenleiste .symbol { flex: none; width: 1.25rem; text-align: center; }
.seitenleiste .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* kleine zweite Zeile unter dem Text, z. B. der Zeitraum beim Board */
.seitenleiste .zusatz { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 0.7rem; font-weight: 400; line-height: 1.2; color: var(--gedaempft); }
.seitenleiste .einklappen { margin-top: auto; width: 100%; border: 0; }
.seitenleiste .produktwechsel { position: relative; margin-bottom: 0.5rem; }
.seitenleiste .produktwechsel summary {
    cursor: pointer;
    list-style: none;
    color: var(--text);
    font-weight: 650;
    border: 1px solid var(--linie);
}
.seitenleiste .produktwechsel summary::-webkit-details-marker { display: none; }
.seitenleiste .produktwechsel summary .text::after { content: " ▾"; }
.seitenleiste .produktwechsel ul {
    position: absolute;
    z-index: 30;
    left: 0;
    margin-top: 0.3rem;
    padding: 0.35rem;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten-hoch);
    min-width: 14rem;
}
.seitenleiste .produktwechsel li a { color: var(--text); }
.seitenleiste .produktwechsel li.alle { border-top: 1px solid var(--linie); margin-top: 0.25rem; padding-top: 0.25rem; }
/* eingeklappt: nur Symbole, der Text bleibt über title als Tooltip erreichbar */
body.leiste-zu .seitenleiste .text { display: none; }
body.leiste-zu .seitenleiste a, body.leiste-zu .seitenleiste .nicht-verfuegbar, body.leiste-zu .seitenleiste .einklappen,
body.leiste-zu .seitenleiste .produktwechsel summary { justify-content: center; padding-inline: 0.25rem; }
body.leiste-zu .seitenleiste .einklappen .symbol { transform: scaleX(-1); }
/* Wahl der Navigation im Personenmenü */
.navigation-wahl { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.6rem; font-size: 0.875rem; color: var(--gedaempft); }
.navigation-wahl[hidden] { display: none; }
/* eingeklappt darf das Menü des Produktwechsels über die schmale Leiste hinausragen */
body.leiste-zu .seitenleiste { overflow: visible; }
/* Navigation oben: die Seitenleiste wird zur Menüleiste unter dem Kopf (Schublade bleibt unter 64rem) */
@media (min-width: 64rem) {
    html[data-navigation="oben"] .shell.mit-leiste { display: block; }
    html[data-navigation="oben"] .seitenleiste {
        /* unter der Kopfzeile (z-index 20), damit deren Personenmenü über der Menüleiste aufklappt */
        z-index: 19;
        height: auto;
        overflow: visible;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 0.35rem 1rem;
        border-right: 0;
        border-bottom: 1px solid var(--linie);
    }
    html[data-navigation="oben"] .seitenleiste ul { display: flex; flex-wrap: wrap; }
    html[data-navigation="oben"] .seitenleiste hr { width: 0; height: 1.5rem; margin: 0 0.5rem; border-top: 0; border-left: 1px solid var(--linie); }
    html[data-navigation="oben"] .seitenleiste .produktwechsel { margin: 0 0.75rem 0 0; }
    html[data-navigation="oben"] .seitenleiste .einklappen { display: none; }
    html[data-navigation="oben"] .seitenleiste a, html[data-navigation="oben"] .seitenleiste .nicht-verfuegbar, html[data-navigation="oben"] .seitenleiste .produktwechsel summary { min-height: 2rem; padding: 0.3rem 0.65rem; gap: 0.4rem; }
    /* Einklappen gilt nur für die Seitenleiste links */
    html[data-navigation="oben"] body.leiste-zu .seitenleiste .text { display: inline; }
    html[data-navigation="oben"] body.leiste-zu .seitenleiste a,
    html[data-navigation="oben"] body.leiste-zu .seitenleiste .produktwechsel summary { justify-content: flex-start; padding-inline: 0.65rem; }
}
/* Brotkrumen */
.brotkrumen { margin: 0 0 1rem; font-size: 0.85rem; color: var(--gedaempft); }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.brotkrumen li + li::before { content: "/"; margin-right: 0.25rem; color: var(--linie-stark); }
.brotkrumen a { color: var(--gedaempft); }
.brotkrumen li[aria-current] { color: var(--text); }
/* Schublade unter 64rem: Seitenleiste verborgen, der Knopf öffnet sie als Überlagerung (mit JavaScript;
   ohne JavaScript steht sie einfach über dem Inhalt) */
@media (max-width: 63.99rem) {
    .shell.mit-leiste { display: block; }
    .seitenleiste { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--linie); }
    body.js .seitenleiste {
        position: fixed;
        z-index: 40;
        top: var(--kopfhoehe);
        left: 0;
        bottom: 0;
        width: 15rem;
        height: auto;
        transform: translateX(-100%);
        visibility: hidden;
        box-shadow: var(--schatten-hoch);
    }
    body.js.schublade-offen .seitenleiste { transform: none; visibility: visible; }
    body.js.leiste-zu .seitenleiste .text { display: inline; }
    body.js.leiste-zu .seitenleiste a, body.js.leiste-zu .seitenleiste .einklappen { justify-content: flex-start; padding-inline: 0.65rem; }
    body.js .seitenleiste .einklappen { display: none; }
    .kopf .marke-text { font-size: 0.8rem; }
    .schnellsuche { flex-basis: 8rem; }
}

/* --- Inhalt --------------------------------------------------------------------------------- */
main {
    min-width: 0;
    padding: 1.5rem 1.5rem 4rem;
}
/* Seiten ohne Seitenleiste (Produktliste, Anmeldung, Fehler) behalten die begrenzte Breite */
.ohne-leiste main { max-width: 80rem; margin: 0 auto; }
/* lesbare Breite für Formular- und Textseiten innerhalb der Shell */
.schmal { max-width: 60rem; }

h1, h2, h3, h4 { letter-spacing: -0.015em; line-height: 1.25; }
h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 1rem; }
h2 { font-size: 1.125rem; font-weight: 650; margin: 2.25rem 0 0.75rem; }
h3 { font-size: 1rem; font-weight: 600; }

/* Aktionen und kontextbezogene Links unter der Überschrift, als dezente Knöpfe */
.seitenaktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}
.seitenaktionen a {
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    color: var(--gedaempft);
    font-weight: 500;
    font-size: 0.9rem;
}
.seitenaktionen a:hover { background: var(--karte); color: var(--text); text-decoration: none; box-shadow: var(--schatten); }

.liste { padding-left: 1.25rem; }
.liste li { margin: 0.2rem 0; }

/* Formulare */
.formular {
    display: grid;
    gap: 0.9rem;
    max-width: 30rem;
    padding: 1.25rem;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}
.formular label { display: grid; gap: 0.3rem; font-weight: 500; font-size: 0.9rem; }

input, select, textarea {
    font: inherit;
    color: var(--text);
    padding: 0.45rem 0.65rem;
    background: var(--karte);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein);
    max-width: 100%;
    transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
input:hover, select:hover, textarea:hover { border-color: var(--gedaempft); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--akzent); box-shadow: var(--fokus); }
input[type=checkbox], input[type=radio] { accent-color: var(--akzent); padding: 0; }
input[type=file] { padding: 0.35rem; }
textarea { width: 100%; min-height: 5rem; }

button, .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font: inherit;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.3;
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--akzent);
    border-radius: var(--radius-klein);
    background: var(--akzent);
    color: var(--akzent-text);
    cursor: pointer;
    text-decoration: none;
    justify-self: start;
    box-shadow: var(--schatten);
    transition: background-color var(--uebergang), border-color var(--uebergang), color var(--uebergang), box-shadow var(--uebergang);
}
button:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); }
button:active { transform: translateY(1px); }
.knopf { background: var(--karte); color: var(--text); border-color: var(--linie-stark); }
.knopf:hover { background: var(--flaeche); text-decoration: none; }
/* zurückhaltende Knöpfe: entfernen, verwerfen, abbrechen */
.entfernen button, .verwerfen button, .abbrechen button, .loesen button {
    background: var(--karte);
    color: var(--fehler);
    border-color: var(--linie-stark);
}
.entfernen button:hover, .verwerfen button:hover, .abbrechen button:hover {
    background: var(--fehler-zart);
    border-color: var(--fehler);
}
.loesen button { color: var(--erfolg); }
.loesen button:hover { background: var(--erfolg-zart); border-color: var(--erfolg); }

/* Meldungen */
.meldung {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    border: 1px solid var(--linie);
    border-left: 4px solid var(--akzent);
    border-radius: var(--radius-klein);
    background: var(--karte);
    box-shadow: var(--schatten);
}
.meldung.erfolg { border-left-color: var(--erfolg); background: var(--erfolg-zart); }
.meldung.fehler { border-left-color: var(--fehler); background: var(--fehler-zart); }
.meldung.hinweis, .hinweis { border-left-color: var(--akzent); }

.warnungen { padding: 0; list-style: none; }
.warnungen li {
    margin-bottom: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-left: 4px solid var(--warnung);
    border-radius: var(--radius-klein);
    background: var(--warnung-zart);
}
.bestaetigung { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.ziel { font-size: 1.05rem; }
.gedaempft { color: var(--gedaempft); }

/* einzeilige Formulare, brechen auf schmalen Bildschirmen um */
.zeile, .filter, .knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: end;
    margin: 0.5rem 0;
}
.zeile label, .filter label { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--gedaempft); font-weight: 500; }
.zeile input[name=text] { flex: 1 1 12rem; }
.knoepfe form { margin: 0; }
.filter {
    padding: 0.75rem 1rem;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
}

/* Tabellen als Karte; auf Handybreite scrollt der Container statt der Seite */
.tabelle {
    overflow-x: auto;
    margin: 1rem 0;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}
.tabelle table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.tabelle th, .tabelle td {
    text-align: left;
    vertical-align: middle;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--linie);
}
.tabelle tr:last-child > td { border-bottom: none; }
.tabelle th {
    position: sticky;
    top: 0;
    background: var(--flaeche);
    color: var(--gedaempft);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.tabelle tbody tr:hover > td { background: var(--zeile-hover); }
.tabelle td.labels, .tabelle td.epic { color: var(--gedaempft); font-size: 0.85rem; }
.ordnen { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: end; }
.ordnen form { display: flex; gap: 0.25rem; align-items: end; margin: 0; }
.ordnen label { display: grid; font-size: 0.75rem; color: var(--gedaempft); }
.ordnen input[type=number] { width: 4.5em; padding: 0.25rem 0.4rem; }
.ordnen button { padding: 0.2rem 0.5rem; background: var(--karte); color: var(--text); border-color: var(--linie-stark); box-shadow: none; }
.ordnen button:hover { background: var(--flaeche); }

.kriterien li { margin-bottom: 0.5rem; }
.kriterien li .zeile { display: inline-flex; margin: 0 0.5rem 0 0; }

/* Angaben (Begriff – Wert) als Karte */
.angaben {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}
.angaben dt { font-weight: 500; color: var(--gedaempft); }
.angaben dd { margin: 0; font-weight: 500; }

.angaben.velocity { margin: 1rem 0; }
.lage.ueberplant, .angaben dd.ohne-schaetzung { color: var(--fehler); font-weight: 600; }

/* Planning: Kandidaten und Auswahl nebeneinander, auf schmalen Bildschirmen untereinander */
.planning { display: grid; grid-template-columns: 1fr; gap: 1.25rem 2rem; }
@media (min-width: 48rem) {
    .planning { grid-template-columns: 1fr 1fr; }
}
.planning > * { min-width: 0; }
.planning h2 { margin-top: 0.5rem; }
.planungsliste {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    overflow: hidden;
}
.planungsliste li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--linie);
}
.planungsliste li:last-child { border-bottom: none; }
.planungsliste .titel { flex: 1 1 10rem; }
.planungsliste form { margin: 0; }
.planungsliste button { padding: 0.2rem 0.65rem; }
.planungsliste li.ohne-schaetzung { box-shadow: inset 4px 0 0 var(--fehler); }
.planungsliste li.ohne-schaetzung .punkte { color: var(--fehler); background: var(--fehler-zart); }
.mitglieder li { margin-bottom: 0.5rem; }
.mitglieder .rolle { font-weight: 500; }

/* Sprint-Board: je Eintrag eine Gruppe mit Spalten; auf schmalen Bildschirmen untereinander (Konzept 10.4) */
.board { display: grid; gap: var(--abstand-3); }
#sprint-backlog .gruppe + .gruppe { margin-top: var(--abstand-3); }
.gruppe {
    background: var(--flaeche-gruppe);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: var(--abstand-3);
}
.gruppe.fertig { box-shadow: inset 3px 0 0 var(--erfolg); }
.gruppe h3 { display: flex; flex-wrap: wrap; gap: var(--abstand-1) var(--abstand-2); align-items: center; font-size: 1rem; margin: 0 0 var(--abstand-3); }
.gruppe h3 .titel { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.aufgaben-fortschritt { font-size: 0.8125rem; color: var(--gedaempft); }
.gruppe.fertig h3 .titel, .gruppe.fertig .aufgaben-fortschritt, .gruppe.fertig .aufgabe a { color: var(--gedaempft); }
.spalten { display: grid; grid-template-columns: 1fr; gap: var(--abstand-2); }
@media (min-width: 48rem) {
    .spalten { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
.spalte {
    background: var(--flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 0 var(--abstand-2) var(--abstand-2);
    min-width: 0;
    min-height: 6rem;
    transition: background-color var(--uebergang), outline-color var(--uebergang);
}
/* Spaltenkopf bleibt beim Scrollen unter der Kopfzeile stehen */
.spalte h4 {
    position: sticky;
    top: var(--kopfhoehe, 0px);
    z-index: 1;
    margin: 0 calc(-1 * var(--abstand-2)) var(--abstand-2);
    padding: var(--abstand-2);
    background: var(--flaeche);
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gedaempft);
}
.spalte h4 .anzahl { font-weight: 500; }
.aufgaben { list-style: none; padding: 0; margin: 0; }
/* Karte: kompakt, Farbstrich links nach Status */
.aufgabe {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-left: 3px solid var(--status-offen);
    border-radius: var(--radius-klein);
    padding: var(--abstand-2) var(--abstand-3);
    margin-bottom: var(--abstand-2);
    overflow-wrap: anywhere;
    transition: box-shadow var(--uebergang), background-color var(--uebergang);
}
.aufgabe[data-status=IN_ARBEIT] { border-left-color: var(--status-sprint); }
.aufgabe[data-status=ERLEDIGT] { border-left-color: var(--status-erledigt); }
.aufgabe[data-status=ERLEDIGT] a { color: var(--gedaempft); }
.aufgabe:hover { background-image: linear-gradient(var(--zeile-hover), var(--zeile-hover)); }
#sprint-backlog .gruppe > .aufgaben { margin-left: var(--abstand-4); }
.aufgabe .titel { font-weight: 500; }
.aufgabe .knoepfe { margin: var(--abstand-1) 0 0; gap: var(--abstand-1); }
.aufgabe .knoepfe button {
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
    background: var(--karte);
    color: var(--text);
    border-color: var(--linie-stark);
    box-shadow: none;
}
.aufgabe .knoepfe button:hover { background: var(--flaeche); }
.aufgabe-anlegen input[name=titel] { flex: 1 1 12rem; }
.fertigmeldung { margin: 0.5rem 0; }
.fertigmeldung summary { cursor: pointer; color: var(--akzent); font-weight: 500; }
.fertigmeldung fieldset { border: 1px solid var(--linie); border-radius: var(--radius-klein); margin: 0.5rem 0; }
.fertigmeldung .kriterium { display: block; margin: 0.25rem 0; }

.dailies, .hindernisse {
    list-style: none;
    padding: 0;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    overflow: hidden;
}
.dailies:empty, .hindernisse:empty { display: none; }
.dailies li, .hindernisse li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    align-items: center;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid var(--linie);
    overflow-wrap: anywhere;
}
.dailies li:last-child, .hindernisse li:last-child { border-bottom: none; }
.dailies .datum { color: var(--gedaempft); white-space: nowrap; font-size: 0.85rem; }
.hindernisse .text, .dailies .text { flex: 1 1 12rem; }
/* offene Hindernisse deutlich, gelöste gedämpft */
.hindernisse.offen li { background: var(--blockiert-zart); box-shadow: inset 3px 0 0 var(--blockiert); }
.hindernisse.geloest li { color: var(--gedaempft); }
.hindernisse form { margin: 0; }
.hindernisse button { padding: 0.2rem 0.6rem; }
.liste .entfernen, .massnahme .knoepfe { display: inline-flex; }
.massnahme .knoepfe { flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.vorgeschlagen button { font-weight: 700; }
.abbrechen summary, details > summary { cursor: pointer; }
details > summary { color: var(--akzent); font-weight: 500; }

/* Themenauswahl in der Kopfzeile */
.thema-wahl { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--gedaempft); }
.thema-wahl[hidden] { display: none; }
.thema-wahl select { padding: 0.2rem 0.5rem; font-size: 0.85rem; border-radius: 999px; }

/* Kopf der Sprint-Seite (Konzept 10.4) */
.sprint-kopf .flaeche-kopf { justify-content: flex-start; gap: var(--abstand-2) var(--abstand-3); }
.sprint-kopf h1 { margin: 0; font-size: 1.5rem; flex: 0 1 auto; }
.sprint-kopf .tag-von { font-size: 0.8125rem; color: var(--gedaempft); }
.sprint-kopf .hindernis-plakette:hover { text-decoration: none; }
.sprint-kopf .seitenaktionen { margin: 0 0 0 auto; }
.ziel-hervorgehoben { margin: 0 0 var(--abstand-3); padding: var(--abstand-2) var(--abstand-3); border-left: 3px solid var(--akzent); background: var(--akzent-zart); border-radius: 0 var(--radius-klein) var(--radius-klein) 0; }
.ziel-hervorgehoben .abschnitt-titel { margin-bottom: var(--abstand-1); }
.ziel-hervorgehoben p { margin: 0; font-size: 1rem; font-weight: 500; }
.sprint-fortschritt { margin: 0 0 var(--abstand-3); }

/* Diagramme: Inline-SVG aus Diagramm.java, Farben nur über Klassen (CSP ohne Inline-Styles) */
.diagramm-rahmen { margin: 0 0 1rem; }
.diagramm { display: block; width: 100%; max-width: 40rem; height: auto; }
.diagramm-text { font-size: 12px; fill: var(--gedaempft); }
.diagramm-raster { stroke: var(--diagramm-raster); stroke-width: 1; }
.diagramm-achse { stroke: var(--gedaempft); stroke-width: 1; }
.diagramm-erreicht { fill: var(--diagramm-erreicht); }
.diagramm-geplant { stroke: var(--diagramm-geplant); stroke-width: 3; }
.diagramm-prognose { stroke: var(--diagramm-prognose); stroke-width: 2; stroke-dasharray: 6 4; }
.diagramm-verbleibend { stroke: var(--diagramm-verbleibend); stroke-width: 2.5; fill: var(--diagramm-verbleibend); }
.diagramm-umfang { stroke: var(--diagramm-umfang); stroke-width: 2; stroke-dasharray: 6 4; fill: var(--diagramm-umfang); }
.diagramm-ideal { stroke: var(--diagramm-ideal); stroke-width: 1.5; fill: var(--diagramm-ideal); }
polyline.diagramm-verbleibend, polyline.diagramm-umfang, polyline.diagramm-ideal { fill: none; }
.legende { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.9rem; color: var(--gedaempft); }
/* Legendenmuster: Farbe, Strichart und -stärke je Reihe über eigene Variablen */
.legende span::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    margin-right: 0.35rem;
    vertical-align: middle;
    border-top: var(--muster-dicke, 3px) var(--muster-art, solid) var(--muster-farbe, currentColor);
}
.legende-erreicht { --muster-farbe: var(--diagramm-erreicht); --muster-dicke: 0.6rem; }
.legende-geplant { --muster-farbe: var(--diagramm-geplant); }
.legende-prognose { --muster-farbe: var(--diagramm-prognose); --muster-art: dashed; }
.legende-verbleibend { --muster-farbe: var(--diagramm-verbleibend); }
.legende-umfang { --muster-farbe: var(--diagramm-umfang); --muster-art: dashed; }
.legende-ideal { --muster-farbe: var(--diagramm-ideal); --muster-dicke: 1px; }

/* Kumulatives Flussdiagramm (FlussDiagramm.java): Grundfarben je Reihe, mit der Kartenfarbe gemischt, damit
   die Flächen in hellen und dunklen Themen lesbar bleiben; dünne Trennlinie in Kartenfarbe */
:root {
    --cfd-0: color-mix(in srgb, #64748b 55%, var(--karte));
    --cfd-1: color-mix(in srgb, #d97706 65%, var(--karte));
    --cfd-2: color-mix(in srgb, #4f46e5 65%, var(--karte));
    --cfd-3: color-mix(in srgb, #0891b2 65%, var(--karte));
    --cfd-4: color-mix(in srgb, #c026d3 60%, var(--karte));
    --cfd-5: color-mix(in srgb, #ca8a04 65%, var(--karte));
    --cfd-6: color-mix(in srgb, #e11d48 60%, var(--karte));
    --cfd-7: color-mix(in srgb, #0d9488 65%, var(--karte));
    --cfd-fertig: color-mix(in srgb, var(--erfolg) 70%, var(--karte));
    --cfd-sonstige: color-mix(in srgb, var(--gedaempft) 35%, var(--karte));
}
.cfd-flaeche { stroke: var(--karte); stroke-width: 1; }
.cfd-tag { fill: transparent; }
.cfd-tag:hover { fill: color-mix(in srgb, var(--text) 8%, transparent); }
.cfd-0 { fill: var(--cfd-0); --muster-farbe: var(--cfd-0); }
.cfd-1 { fill: var(--cfd-1); --muster-farbe: var(--cfd-1); }
.cfd-2 { fill: var(--cfd-2); --muster-farbe: var(--cfd-2); }
.cfd-3 { fill: var(--cfd-3); --muster-farbe: var(--cfd-3); }
.cfd-4 { fill: var(--cfd-4); --muster-farbe: var(--cfd-4); }
.cfd-5 { fill: var(--cfd-5); --muster-farbe: var(--cfd-5); }
.cfd-6 { fill: var(--cfd-6); --muster-farbe: var(--cfd-6); }
.cfd-7 { fill: var(--cfd-7); --muster-farbe: var(--cfd-7); }
.cfd-fertig { fill: var(--cfd-fertig); --muster-farbe: var(--cfd-fertig); }
.cfd-sonstige { fill: var(--cfd-sonstige); --muster-farbe: var(--cfd-sonstige); }
.legende [class^="cfd-"] { --muster-dicke: 0.6rem; }
.cfd-auswahl { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: 0 0 var(--abstand-3); font-size: 0.9rem; }
.cfd-auswahl [aria-current="true"] { font-weight: 600; text-decoration: none; color: var(--text); }
.cfd-lesehilfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-5); margin: var(--abstand-2) 0; }
.cfd-lesehilfe div { display: flex; gap: var(--abstand-1); }
.cfd-lesehilfe dt { color: var(--gedaempft); }
.cfd-lesehilfe dd { margin: 0; font-weight: 600; }

/* Kanban-Kennzahlen (KennzahlenDiagramm.java): Farben aus den Diagramm-Variablen, damit alle Themen passen */
.kennzahl-kacheln { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin: var(--abstand-2) 0; }
.kennzahl-kachel {
    flex: 1 1 9rem;
    padding: var(--abstand-2) var(--abstand-3);
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--karte);
}
.kennzahl-kachel dt { color: var(--gedaempft); font-size: 0.85rem; }
.kennzahl-kachel dd { margin: 0; font-size: 1.25rem; font-weight: 600; }
.kennzahl-punkt { fill: var(--diagramm-erreicht); fill-opacity: 0.75; stroke: var(--karte); stroke-width: 1; }
.kennzahl-punkt:hover { fill-opacity: 1; }
.kennzahl-perzentil { stroke: var(--diagramm-prognose); stroke-width: 1.5; stroke-dasharray: 5 4; }
.kennzahl-p50 { stroke-dasharray: none; }
.kennzahl-perzentil-text { fill: var(--diagramm-prognose); font-size: 11px; }
.kennzahl-saeule { fill: var(--diagramm-erreicht); }
.legende-kennzahl-punkt { --muster-farbe: var(--diagramm-erreicht); --muster-dicke: 0.6rem; }
.legende-kennzahl-perzentil { --muster-farbe: var(--diagramm-prognose); --muster-art: dashed; }
.cfd-export { margin: var(--abstand-2) 0; font-size: 0.9rem; }

/* Backlog per Drag-and-drop ordnen: Einfügelinie über bzw. unter der Zielzeile */
#backlog-liste tr.ziel-davor > td { box-shadow: inset 0 3px 0 0 var(--akzent); }
#backlog-liste tr.ziel-danach > td { box-shadow: inset 0 -3px 0 0 var(--akzent); }

/* Sprint-Blöcke im Backlog: umrandet, vorgeplante Sprints sind Drop-Ziele */
#backlog-liste tbody.sprint-block.ziel-block { background: var(--auswahl); }
#backlog-liste tbody.liste.ziel-block { outline: 2px dashed var(--akzent); }
#backlog-liste tr.block-leer > td { color: var(--gedaempft); font-style: italic; text-align: center; }
#backlog-liste .block-details { margin-top: 0.25rem; }
#backlog-liste form.sprint-vorplanen { margin-bottom: 0.75rem; }
/* Block, in den das gezogene Element nicht passt */
#backlog-liste tbody.sprint-block.ziel-verboten { background: var(--blockiert-zart); cursor: not-allowed; }
#backlog-meldung[hidden] { display: none; }
#backlog-meldung { margin-bottom: 0.75rem; }

/* Board: Phasenmarke, Ziehen und Ablegen (board-ziehen.js) */
.phase-marke { font-weight: 400; font-size: 0.75rem; }
.board .aufgabe[draggable=true] { cursor: grab; }
.board .spalte.ziel-erlaubt { outline: 2px dashed var(--akzent); background: var(--auswahl); }
.board .spalte.ziel-verboten { background: var(--blockiert-zart); cursor: not-allowed; }
.board .spalte.ziel-erlaubt::after { content: "erlaubt"; color: var(--erfolg); font-size: 0.8rem; }
.board .spalte.ziel-verboten::after { content: "nicht erlaubt"; color: var(--fehler); font-size: 0.8rem; }
#board-meldung[hidden] { display: none; }
#board-meldung { margin-bottom: 0.75rem; }

/* Board-Spalten der Team-Seite per Drag-and-drop anordnen */
#board-spalten tr[draggable=true] { cursor: grab; }
#board-spalten tr.ziel-davor > td { box-shadow: inset 0 3px 0 0 var(--akzent); }
#board-spalten tr.ziel-danach > td { box-shadow: inset 0 -3px 0 0 var(--akzent); }
#board-spalten tr.ziel-verboten > td { box-shadow: inset 0 -3px 0 0 var(--blockiert); cursor: not-allowed; }

/* Abhängigkeiten zwischen Backlog-Einträgen (Schritt 18b) */
.wartet-auf { display: block; }
#backlog-liste tr.abh-warnung > td { background: var(--warnung-zart); }
.voraussetzungen .abh-erfuellt .marke { color: var(--erfolg); }
.voraussetzungen .abh-hinfaellig .marke, .voraussetzungen .abh-offen .marke { color: var(--warnung); }
.voraussetzungen li form { display: inline-block; margin-left: 0.5rem; }
.wartet-plakette { margin-left: 0.5rem; }
.wartet-plakette.p-blockiert { border-color: var(--blockiert); margin-left: 0; }

/* Mehrfachbearbeitung im Backlog: Felder, die JavaScript ausblendet, sind wirklich weg */
#backlog-liste form.mehrfach { padding: 0.5rem 1rem; margin: 0; border-bottom: 1px solid var(--linie); }
#backlog-liste form.mehrfach [hidden] { display: none; }

/* --- Product Backlog: kompakte Zeilen (Konzept 10.3, Teil D3) ------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Sprite in der Seite: unsichtbar, aber nicht display:none (sonst zeichnen manche Browser <use> nicht) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sym { width: 16px; height: 16px; flex: none; vertical-align: middle; }
.sym-story { color: var(--erfolg); }
.sym-fehler { color: var(--fehler); }
.sym-technisch { color: var(--gedaempft); }
.sym-epic { color: var(--status-sprint); }

/* Kopf und Filterleiste */
.backlog-kopf { margin-bottom: var(--abstand-2); }
.backlog-kopf h1 { margin: 0; font-size: 1.5rem; font-weight: 700; }
.kopf-aktionen { display: flex; gap: var(--abstand-2); margin: 0; font-size: 0.8125rem; }
.kopf-aktionen a { padding: var(--abstand-1) var(--abstand-3); border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--karte); color: var(--text); }
.kopf-aktionen a:hover { background: var(--zeile-hover); text-decoration: none; }
.filter-leiste { align-items: center; gap: var(--abstand-2); padding: var(--abstand-2) var(--abstand-3); margin: 0 0 var(--abstand-2); }
.filter-leiste label { display: inline-flex; align-items: center; gap: var(--abstand-1); font-size: 0.8125rem; }
.filter-leiste input:not([type=checkbox]), .filter-leiste select, .filter-leiste button { padding: 0.2rem var(--abstand-2); font-size: 0.8125rem; min-height: 0; height: 28px; border-radius: 999px; }
.filter-leiste input[type=search] { width: 11rem; }
.filter-leiste select { max-width: 11rem; }

/* Vorplanen und Mehrfachaktionen: kompakt und dezent */
#backlog-liste form.kompakt { align-items: center; gap: var(--abstand-2); margin: 0 0 var(--abstand-2); font-size: 0.8125rem; }
#backlog-liste form.kompakt label { display: inline-flex; align-items: center; gap: var(--abstand-1); font-size: 0.8125rem; }
#backlog-liste form.kompakt input:not([type=checkbox]), #backlog-liste form.kompakt select, #backlog-liste form.kompakt button { padding: 0.2rem var(--abstand-2); font-size: 0.8125rem; height: 28px; min-height: 0; }
#backlog-liste form.mehrfach { padding: var(--abstand-2) var(--abstand-3); margin: 0; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
#backlog-liste form.sprint-vorplanen { padding: 0; }
#backlog-liste { margin-top: 0; }

/* Tabelle: eine Zeile je Eintrag, Trennlinien statt Karten */
#backlog-liste table { font-size: 0.9375rem; }
#backlog-liste th { padding: var(--abstand-1) var(--abstand-2); }
#backlog-liste td { height: 40px; padding: 0 var(--abstand-2); }
#backlog-liste td.wahl { white-space: nowrap; width: 1%; }
#backlog-liste td.wahl input[name=auswahl] { margin: 0 var(--abstand-1) 0 0; vertical-align: middle; }
#backlog-liste .pos { color: var(--gedaempft); font-size: 0.75rem; }
#backlog-liste td.griffzelle, #backlog-liste td.typ { width: 1%; padding-inline: var(--abstand-1); }
#backlog-liste .griff { display: inline-flex; color: var(--gedaempft); cursor: grab; border-radius: var(--radius-klein); }
#backlog-liste .griff:active { cursor: grabbing; }
#backlog-liste tr:hover .griff { color: var(--text); }
#backlog-liste td.titel { width: 100%; min-width: 12rem; }
#backlog-liste td.titel > a { font-weight: 500; }
#backlog-liste .meta { margin-left: var(--abstand-2); display: inline-flex; gap: var(--abstand-1); }
/* erste Zeile der Beschreibung unter dem Titel, einzeilig und gedämpft */
#backlog-liste .auszug { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; color: var(--gedaempft); font-size: .85em; font-weight: normal; }
#backlog-liste .p-meta { color: var(--gedaempft); background: var(--flaeche); font-weight: 500; }
#backlog-liste a.p-meta:hover { text-decoration: none; background: var(--zeile-hover); }
#backlog-liste td.epic, #backlog-liste td.labels, #backlog-liste td.status, #backlog-liste td.punkte { white-space: nowrap; }
#backlog-liste td.epic .plakette + .plakette { margin-left: var(--abstand-1); }
#backlog-liste td.punkte { text-align: center; }
#backlog-liste .p-epic, #backlog-liste .p-label { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 20px; }
#backlog-liste tbody.liste tr:hover > td, #backlog-liste tbody.sprint-block tr[data-id]:hover > td { background: var(--zeile-hover); }
#backlog-liste tr[data-art=EPIC] > td { background: var(--flaeche-gruppe); }
#backlog-liste tr[data-art=EPIC] td.titel > a { font-weight: 650; }
#backlog-liste tr.ausgewaehlt > td { background: var(--auswahl); }
#backlog-liste tr.abh-warnung > td { background: var(--warnung-zart); }

/* Ordnen-Bedienelemente: mit JavaScript erst bei Hover/Fokus der Zeile, ohne immer sichtbar */
#backlog-liste td.ordnen { display: table-cell; white-space: nowrap; }
#backlog-liste td.ordnen form { display: inline-flex; align-items: center; gap: var(--abstand-1); vertical-align: middle; margin: 0 var(--abstand-1) 0 0; }
#backlog-liste td.ordnen button { padding: 0 var(--abstand-2); height: 24px; min-height: 0; font-size: 0.8125rem; }
#backlog-liste td.ordnen input[type=number] { width: 3.5em; height: 24px; padding: 0 var(--abstand-1); font-size: 0.8125rem; }
/* nur auf Geräten mit Hover; auf Touch-Geräten bleiben die Knöpfe sichtbar */
@media (hover: hover) {
    body.js-backlog #backlog-liste td.ordnen > form { opacity: 0; transition: opacity var(--uebergang); }
    body.js-backlog #backlog-liste tr:hover td.ordnen > form, body.js-backlog #backlog-liste tr:focus-within td.ordnen > form { opacity: 1; }
}

/* Sprint-Blöcke: Gruppen mit eigenem Kopf */
#backlog-liste tbody.sprint-block { border-top: 1px solid var(--linie-stark); }
#backlog-liste tr.block-kopf > td { height: auto; padding: var(--abstand-2) var(--abstand-3); background: var(--flaeche-gruppe); font-size: 0.875rem; }
#backlog-liste tbody.laufend tr.block-kopf > td { background: var(--erfolg-zart); }
#backlog-liste .block-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); }
#backlog-liste .block-titel { font-weight: 650; }
#backlog-liste .block-summe { display: inline-flex; flex-wrap: wrap; gap: var(--abstand-1); }
#backlog-liste .block-ziel { font-size: 0.8125rem; }
#backlog-liste .block-aktionen { margin-left: auto; display: inline-flex; align-items: center; gap: var(--abstand-3); }
#backlog-liste .block-knopf { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: transparent; border: 0; box-shadow: none; color: var(--gedaempft); cursor: pointer; }
#backlog-liste .block-knopf[hidden] { display: none; }
#backlog-liste .block-knopf:hover { color: var(--text); background: var(--zeile-hover); }
#backlog-liste tbody.sprint-block.zu > tr:not(.block-kopf) { display: none; }
#backlog-liste tbody.sprint-block.ziel-block.zu > tr.block-kopf > td { background: var(--auswahl); }
/* Vorgeplante Sprints und eigentliches Backlog sichtbar trennen: Sprint-Blöcke mit Akzentstrich links,
   vor dem Backlog-Kopf ein Abstand in der Seitenfarbe (wirkt wie zwei getrennte Flächen) */
#backlog-liste tbody.sprint-block.vorgeplant > tr > td:first-child { box-shadow: inset 3px 0 0 0 var(--status-sprint); }
#backlog-liste tbody.sprint-block.laufend > tr > td:first-child { box-shadow: inset 3px 0 0 0 var(--erfolg); }
#backlog-liste tr.liste-kopf > td { height: auto; padding: var(--abstand-3); background: var(--karte); border-bottom: 2px solid var(--linie-stark); font-size: 0.875rem; }
#backlog-liste tbody.sprint-block + tbody.liste-kopf > tr > td { border-top: var(--abstand-5) solid var(--hintergrund); }
#backlog-liste tbody.team-kopf td { height: auto; padding: var(--abstand-3) var(--abstand-3) var(--abstand-1); border-bottom: none; }
#backlog-liste tbody.team-kopf .abschnitt-titel { margin: 0; }

/* Sticky Streifen im Backlog: bleibt unter der Kopfleiste (bzw. unter der Menüleiste bei Navigation oben;
   seitenleiste.js setzt dann --streifen-oben) stehen und reicht über die volle Inhaltsbreite */
.backlog-streifen {
    position: sticky;
    top: var(--streifen-oben, var(--kopfhoehe));
    z-index: 15;
    margin: calc(-1 * var(--abstand-2)) -1.5rem var(--abstand-3);
    padding: var(--abstand-2) 1.5rem 0;
    background: var(--hintergrund);
    border-bottom: 1px solid var(--linie);
}
.backlog-streifen .backlog-kopf { margin-bottom: var(--abstand-2); }
.backlog-streifen .backlog-kopf h1 { font-size: 1.25rem; }
.backlog-streifen .filter-leiste { margin-bottom: var(--abstand-2); }
/* Eintrag anlegen als Dialog (eintrag-dialog.js verschiebt #anlegen hinein; ohne JS bleibt es unter der Liste) */
.kopf-aktionen a.eintrag-neu { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.kopf-aktionen a.eintrag-neu:hover { background: var(--akzent-hover); border-color: var(--akzent-hover); }
.eintrag-dialog {
    width: min(40rem, calc(100vw - 2rem));
    max-height: calc(100vh - 4rem);
    padding: 0;
    color: var(--text);
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    box-shadow: var(--schatten-hoch);
}
.eintrag-dialog::backdrop { background: color-mix(in srgb, var(--hintergrund) 30%, rgb(0 0 0 / 0.55)); }
.eintrag-dialog #anlegen.flaeche { margin: 0; border: 0; box-shadow: none; }
.eintrag-dialog .flaeche-kopf { align-items: center; }
.eintrag-dialog .dialog-schliessen {
    margin-left: auto;
    padding: 0 var(--abstand-2);
    height: 28px;
    min-height: 0;
    background: transparent;
    color: var(--gedaempft);
    border-color: transparent;
}
.eintrag-dialog .dialog-schliessen:hover { background: var(--zeile-hover); color: var(--text); }
/* Eintrag anlegen als Fläche unter der Liste */
#anlegen.flaeche { margin-top: var(--abstand-4); }

/* Produktübersicht (Konzept 10.2) */
.produkt-seite { max-width: 80rem; }
.produkt-kopf h1 { margin: 0; font-size: 1.5rem; }
.produkt-kopf .plaketten { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-bottom: var(--abstand-3); }
.produkt-raster { display: grid; grid-template-columns: 1fr; gap: var(--abstand-4); margin-top: var(--abstand-4); align-items: start; }
.produkt-raster .produkt-spalte { display: flex; flex-direction: column; gap: var(--abstand-4); min-width: 0; }
.produkt-raster .flaeche + .flaeche { margin-top: 0; }
@media (min-width: 64rem) { .produkt-raster { grid-template-columns: 3fr 2fr; } }
.produkt-seite .ziel-hervorgehoben { margin-bottom: var(--abstand-3); }
.produkt-seite .knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-bottom: var(--abstand-3); }
.produkt-seite .knoepfe form { margin: 0; }
.produkt-seite .knoepfe button { padding: 0.2rem 0.75rem; font-size: 0.8125rem; }
.produkt-seite details.bearbeiten { margin-top: var(--abstand-2); }
.produkt-seite details.bearbeiten > summary { font-size: 0.8125rem; color: var(--gedaempft); font-weight: 500; }
.produkt-seite details.bearbeiten > summary:hover { color: var(--akzent); }
.produkt-seite details.bearbeiten[open] > summary { margin-bottom: var(--abstand-2); }
.produkt-seite .fruehere-ziele-block { margin-top: var(--abstand-3); padding-top: var(--abstand-3); border-top: 1px solid var(--linie); }
.produkt-seite .fruehere-ziele li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); }
.aktuelle-sprints > li + li { margin-top: var(--abstand-3); padding-top: var(--abstand-3); border-top: 1px solid var(--linie); }
.aktuelle-sprints .sprint-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3); }
.aktuelle-sprints .sprint-links { display: inline-flex; flex-wrap: wrap; gap: var(--abstand-2); margin-left: auto; }
.aktuelle-sprints .sprint-links .knopf { padding: 0.15rem 0.65rem; font-size: 0.8125rem; }
.aktuelle-sprints .sprintziel-zeile { margin: var(--abstand-1) 0 0; font-size: 0.875rem; }
.produkt-seite .p-meta { color: var(--gedaempft); background: var(--flaeche); font-weight: 500; }

/* Definition of Ready: Checkliste auf der Eintragsseite (Konzept 12.5) */
.dor-checkliste { list-style: none; padding-left: 0; }
.dor-checkliste li { margin: 0.25rem 0; }
.dor-checkliste .dor-marke { display: inline-block; width: 1.2em; font-weight: 600; }
.dor-checkliste .dor-erfuellt .dor-marke { color: var(--erfolg); }
.dor-checkliste .dor-offen .dor-marke { color: var(--warnung); }
.dor-plakette { margin-left: 0.25rem; }
.dor-hinweis { display: block; color: var(--warnung); }

/* Kanban-Board (Schritt 21b): Zähler über dem WIP-Limit, blockierte Karten, Bereich „Nächste“ */
.spalte h4 .anzahl.ueber, .wip-ueber { color: var(--blockiert); font-weight: 700; }
.board-stand { display: flex; flex-wrap: wrap; gap: var(--abstand-1); margin: 0; }
.fluss-board .karte { border-left-color: var(--status-sprint); }
.fluss-board .karte[data-phase=OFFEN] { border-left-color: var(--status-offen); }
.fluss-board .karte[data-phase=ERLEDIGT] { border-left-color: var(--status-erledigt); }
.fluss-board .karte.blockiert { background: var(--blockiert-zart); box-shadow: inset 3px 0 0 var(--blockiert); }
.fluss-board .karte-meta { display: flex; flex-wrap: wrap; gap: var(--abstand-1); margin-top: var(--abstand-1); }
.fluss-board .karte-aktionen summary { cursor: pointer; font-size: 0.85rem; color: var(--gedaempft); }
.fluss-board .karte-aktionen form { margin-top: var(--abstand-1); }
.board .karte[draggable=true] { cursor: grab; }
.board .karte.zieht { opacity: 0.55; box-shadow: var(--schatten-hoch); }
.naechste-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-1); }
.naechste-liste li.ziehbar { cursor: grab; }
.naechste-liste li.zieht { opacity: .5; }
.p-status-board { color: var(--status-sprint); background: var(--status-sprint-zart); }
.board-block-leer { color: var(--gedaempft); }

/* Eintragsseite (eintrag.jte): Kopf mit kompakten Angaben und Statusaktionen, Feldzeilen, Klappbereiche */
.eintrag-seite section { margin: 1.5rem 0; }
.eintrag-kopf { display: grid; gap: 0.6rem; margin-bottom: 1.5rem; }
.eintrag-kopf h1 { margin-bottom: 0; }
.angaben.kompakt { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; padding: 0.6rem 1rem; }
.angaben.kompakt > div { display: flex; gap: 0.35rem; align-items: baseline; }
.angaben.kompakt dt { font-size: 0.8rem; }
.kopf-aktionen { margin: 0; align-items: center; }
.kopf-aktionen .zeile { margin: 0; }
/* Feld mit Beschriftung links, Eingabe und Symbolknöpfen rechts */
.eintrag-seite .feld { display: grid; grid-template-columns: 8rem 1fr; gap: 0.5rem; align-items: center; margin: 0.5rem 0; flex: 1 1 auto; }
.eintrag-seite .feld > label, .eintrag-seite .feld-name { font-size: 0.85rem; font-weight: 500; color: var(--gedaempft); }
.eintrag-seite .feld:has(textarea) { align-items: start; }
.eintrag-seite .feld:has(textarea) > label { padding-top: 0.5rem; }
.feld-eingabe { display: flex; gap: 0.4rem; align-items: start; min-width: 0; }
.feld-eingabe > input, .feld-eingabe > select, .feld-eingabe > textarea { flex: 1 1 auto; min-width: 0; }
.feldzeile { display: flex; gap: 0.4rem; align-items: center; }
.feldzeile > .feld-name { flex: 0 0 8rem; }
.feldzeile > .zeile { margin: 0; }
@media (max-width: 34rem) {
    .eintrag-seite .feld { grid-template-columns: 1fr; gap: 0.25rem; }
    .feldzeile > .feld-name { flex-basis: auto; }
    .feldzeile { flex-wrap: wrap; }
}
/* Symbolknöpfe: Speichern (Diskette) und Entfernen (×); gesperrt, solange nichts geändert ist */
.symbol-knopf { padding: 0.45rem; line-height: 1; }
.symbol-knopf .sym { width: 16px; height: 16px; }
.nur-bei-aenderung .symbol-knopf.speichern:disabled { background: var(--karte); color: var(--gedaempft); border-color: var(--linie-stark); box-shadow: none; }
.entfernen-symbol { color: var(--fehler); }
.entfernen-symbol:hover { color: var(--fehler); }
/* Kriterien: Feld, Speichern und Löschen in einer Zeile; die Nummer kommt als Zähler davor */
.inhalt .kriterien { list-style: none; padding-left: 0; counter-reset: kriterium; }
.inhalt .kriterien li::before { counter-increment: kriterium; content: counter(kriterium) "."; color: var(--gedaempft); min-width: 1.5rem; }
.inhalt .kriterien li { display: flex; gap: 0.4rem; align-items: center; }
.inhalt .kriterien li .zeile { flex: 1 1 auto; margin: 0.2rem 0; flex-wrap: nowrap; }
.inhalt .kriterien li .zeile + .zeile { flex: 0 0 auto; }
.inhalt .kriterien li .zeile input[name=text] { flex: 1 1 auto; min-width: 0; }
.neues-kriterium input[name=text] { flex: 1 1 12rem; }
/* Klappbereiche: Überschrift im summary, Zusatz gedämpft daneben */
.klappbereich > summary { cursor: pointer; display: flex; gap: 0.75rem; align-items: baseline; list-style: none; }
.klappbereich > summary::-webkit-details-marker { display: none; }
.klappbereich > summary::before { content: "▸"; color: var(--gedaempft); }
.klappbereich[open] > summary::before { content: "▾"; }
.klappbereich > summary h2 { margin: 0; }
.klappbereich > summary .gedaempft { font-size: 0.85rem; }
.weitere-aktionen .verwerfen button, .weitere-aktionen .papierkorb-aktion button { color: var(--fehler); }

/* Rückmeldungen zur letzten Aktion (layout.jte): schwebend oben rechts unter der Kopfleiste, ohne den Inhalt zu
   verschieben; Erfolg blendet formulare.js nach einigen Sekunden aus, Fehler bleiben bis zum Schließen */
.meldungen-schwebend {
    position: fixed; top: calc(var(--kopfhoehe) + 0.75rem); right: 1rem; z-index: 30;
    display: grid; gap: 0.5rem; width: min(26rem, calc(100vw - 2rem));
}
.meldungen-schwebend .meldung { margin: 0; box-shadow: var(--schatten-hoch); animation: meldung-ein 0.2s ease-out; }
.meldungen-schwebend .meldung.weg { opacity: 0; transform: translateY(-0.5rem); transition: opacity 0.3s, transform 0.3s; }
.meldung-schliessen { margin-left: auto; padding: 0 0.3rem; background: none; border: none; box-shadow: none; color: var(--gedaempft); font-size: 1rem; line-height: 1.3; }
.meldung-schliessen:hover { background: none; color: var(--text); }
.aenderung-hinweis { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
@keyframes meldung-ein { from { opacity: 0; transform: translateY(-0.5rem); } }
@media (prefers-reduced-motion: reduce) { .meldungen-schwebend .meldung { animation: none; } }
@media (max-width: 34rem) { .meldungen-schwebend { right: 16px; width: calc(100vw - 32px); } }

/* Startseite (produkte.jte): Produkte als Kacheln in Flächen wie auf den übrigen Seiten */
.produkt-kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-3); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.produkt-kachel { display: grid; gap: 0.4rem; align-content: start; padding: var(--abstand-3) var(--abstand-4); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); transition: border-color var(--uebergang), box-shadow var(--uebergang); }
.produkt-kachel:hover { border-color: var(--linie-stark); box-shadow: var(--schatten); }
.produkt-kachel.ist-archiviert { opacity: 0.75; }
.produkt-kachel .produkt-name { font-weight: 650; font-size: 1.05rem; color: var(--text); }
.produkt-kachel .plaketten { display: flex; flex-wrap: wrap; gap: var(--abstand-1); }
.produkt-kachel .ziel { margin: 0; font-size: 0.875rem; }
.produkt-kachel .archiv-aktion { margin: 0; }
.startseite .zeile input[name=name] { flex: 1 1 16rem; }

/* Kommentare an Backlog-Einträgen (kommentare.jte, Konzept 14): Verlauf mit Verfasser und Zeit, Text mit erhaltenen
   Zeilenumbrüchen; Plakette „💬 n“ in Backlog-Liste und auf der Kanban-Karte */
.kommentar-liste { list-style: none; margin: 0 0 var(--abstand-3); padding: 0; display: grid; gap: var(--abstand-2); }
.kommentar { padding: var(--abstand-2) var(--abstand-3); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.kommentar.eigen { border-left: 3px solid var(--akzent); }
.kommentar-kopf { display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap; font-size: 0.85rem; }
.kommentar-verfasser { font-weight: 600; color: var(--text); }
.kommentar-zeit { color: var(--gedaempft); }
.kommentar-kopf form { margin: 0 0 0 auto; }
.kommentar-text { margin: 0.3rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.neuer-kommentar { display: grid; gap: var(--abstand-2); justify-items: start; }
.neuer-kommentar textarea { width: 100%; resize: vertical; }
a.kommentar-plakette { text-decoration: none; }
a.kommentar-plakette:hover { color: var(--akzent); }

/* Benachrichtigungen (Konzept 15): Glocke im Kopf mit Zähler der ungelesenen, Liste auf /benachrichtigungen */
.glocke { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; color: var(--gedaempft); text-decoration: none; }
.glocke:hover { color: var(--akzent); background: var(--akzent-zart); }
.glocke .sym { width: 18px; height: 18px; }
.glocke-zaehler { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center; color: var(--karte); background: var(--fehler); }
.benachrichtigung-aktion { display: block; margin: 0 0 var(--abstand-3); }
.benachrichtigung-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.benachrichtigung-liste .flaeche { padding: var(--abstand-3); }
.benachrichtigung-liste .flaeche + .flaeche { margin-top: 0; }
.benachrichtigung.ungelesen { border-left: 3px solid var(--akzent); background: var(--akzent-zart); }
.benachrichtigung.gelesen { color: var(--gedaempft); }
.benachrichtigung-link { display: inline-flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap; color: var(--text); text-decoration: none; }
.benachrichtigung-link:hover .benachrichtigung-titel { color: var(--akzent); text-decoration: underline; }
.benachrichtigung-titel { font-weight: 600; }
.benachrichtigung-meta { display: block; margin-top: var(--abstand-1); font-size: 0.85rem; color: var(--gedaempft); }
.benachrichtigung-vorschau { margin: var(--abstand-1) 0 0; overflow-wrap: anywhere; }
.p-neu { color: var(--akzent); background: var(--karte); border: 1px solid var(--akzent); }

/* Erwähnungen in Kommentaren (Konzept 16): Hervorhebung im Text, Auswahlliste der Eingabehilfe (erwaehnung.js) */
.erwaehnung { color: var(--akzent); font-weight: 600; background: var(--akzent-zart); border-radius: var(--radius-klein); padding: 0 0.15em; }
.erwaehnung-liste { list-style: none; margin: calc(-1 * var(--abstand-1, 0.25rem)) 0 0; padding: 2px; width: min(100%, 22rem); max-height: 14rem; overflow-y: auto; background: var(--karte); border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); box-shadow: var(--schatten); }
.erwaehnung-liste li { display: flex; justify-content: space-between; gap: var(--abstand-2); padding: 0.3rem 0.5rem; border-radius: var(--radius-klein); cursor: pointer; }
.erwaehnung-liste li:hover, .erwaehnung-liste li[aria-selected="true"] { background: var(--auswahl); }
.erwaehnung-kuerzel { color: var(--gedaempft); font-size: 0.85rem; }

/* --- Profilbilder (Konzept 17): Monster-SVG oder Initialen, rund zugeschnitten --------------------------------- */
.avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    /* Kontur des Monsters (currentColor) folgt der Textfarbe des Themas */
    color: var(--text);
}
.avatar svg { display: block; width: 100%; height: 100%; }
.avatar-24 { width: 24px; height: 24px; }
.avatar-32 { width: 32px; height: 32px; }
.avatar-40 { width: 40px; height: 40px; }
.avatar-initialen {
    background: var(--akzent-zart);
    color: var(--akzent);
    font-weight: 650;
    font-size: 0.85rem;
}
.avatar-24.avatar-initialen { font-size: 0.7rem; }
.avatar-40.avatar-initialen { font-size: 1rem; }
.personenmenue summary .avatar { display: grid; }
.avatar-wahl { display: flex; align-items: center; gap: var(--abstand-2, 0.5rem); padding: 0.25rem 0.6rem 0.5rem; border-bottom: 1px solid var(--linie); margin-bottom: 0.25rem; }
.avatar-knoepfe { display: grid; gap: 0.2rem; flex: 1; }
.avatar-knoepfe form { margin: 0; }
.kopf .avatar-knoepfe button {
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--text);
    border-color: transparent;
    padding: 0.25rem 0.4rem;
    font-size: 0.875rem;
}
.kopf .avatar-knoepfe button:hover { background: var(--flaeche); }
.mitglieder li > .avatar { margin-right: 0.4rem; }
.benachrichtigung-link .avatar { margin-right: -0.2rem; }

/* Eigenes Profilfoto (Konzept 17.6): Foto als Avatar, Seite /konto/foto mit Zuschnittrahmen und Vorschau */
.avatar-foto { display: inline-block; object-fit: cover; box-sizing: border-box; }
.personenmenue summary .avatar-foto { display: block; }
.foto-aktuell { display: flex; align-items: center; gap: var(--abstand-2); margin: var(--abstand-3) 0; }
.foto-zuschnitt { display: grid; gap: var(--abstand-2); justify-items: start; }
.foto-zuschnitt[hidden] { display: none; }
.foto-rahmen {
    width: min(256px, 100%);
    height: auto;
    aspect-ratio: 1;
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    cursor: grab;
    /* Ziehen per Touch verschiebt den Ausschnitt statt der Seite */
    touch-action: none;
}
.foto-rahmen:active { cursor: grabbing; }
.foto-rahmen:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.foto-zoom input[type=range] { width: min(256px, 100%); }
.foto-vorschau-zeile { display: flex; align-items: center; gap: var(--abstand-2); }
.foto-vorschau {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--linie-stark);
    background: var(--flaeche);
}

/* Position im Product Backlog auf der Kanban-Karte */
.karten-nummer { color: var(--gedaempft); font-weight: 400; font-size: 0.85em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Akzeptanzkriterien abhaken: Das Kästchen ist ein Knopf (formulare.js speichert ohne Neuladen) */
.kriterium-haken { display: contents; }
.inhalt .kriterien li .kriterium-haken { margin: 0; }
button.kriterium-kaestchen { padding: 0 0.2rem; background: none; border: none; box-shadow: none; color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; }
button.kriterium-kaestchen:hover { background: none; color: var(--akzent); }
span.kriterium-kaestchen { font-size: 1.2rem; line-height: 1; }
.kriterium.erfuellt input[name=text] { color: var(--gedaempft); }

/* Meine laufende Arbeit (Konzept 21) */
.kopf-arbeit { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: inherit; text-decoration: none; }
.kopf-arbeit:hover { color: var(--akzent); background: var(--akzent-zart); }
.arbeit-summe { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; }
.arbeit-summe div { display: flex; flex-direction: column-reverse; }
.arbeit-summe dd { margin: 0; font-size: 1.4rem; font-weight: 600; }
.arbeit-summe dt { color: var(--gedaempft); font-size: 0.85rem; }
.arbeit-team-kopf { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; margin: 1rem 0 0.25rem; }
.arbeit-team-kopf h3 { margin: 0; }
.arbeit-zeile-blockade { color: var(--fehler); }