@import "marke-GdRnwA1.css";

:root {
    --fs-h1: 1.75rem;
    --fs-h2: 1.0625rem;
    --fs-h3: 1rem;
    --fs-body: 0.9375rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.8125rem;
    --lh-body: 1.55;
    --font-zahl: var(--font-body);

    --surface-page: var(--wm-ink-050);
    --surface-card: var(--wm-white);
    --surface-side: var(--wm-white);
    --surface-subtle: var(--wm-ink-100);
    --surface-hover: var(--wm-ink-100);
    --hervorheb-farbe: var(--wm-green-050);
    --text-accent: var(--wm-green-700);
    --radius-card: 12px;
    --shadow-card: 0 1px 2px rgba(16, 20, 16, .05);
    --feld-hoehe: 40px;
    --seitenleiste-breite: 240px;
}

:root[data-theme="dunkel"] {
    --text-heading: var(--wm-white);
    --text-body: var(--wm-ink-100);
    --text-muted: var(--wm-ink-300);
    --text-link: var(--wm-green-400);
    --text-link-hover: var(--wm-green-300);
    --text-accent: var(--wm-green-400);
    --surface-page: var(--wm-ink-900);
    --surface-card: var(--wm-ink-800);
    --surface-side: var(--wm-ink-800);
    --surface-subtle: var(--wm-ink-700);
    --surface-hover: var(--wm-ink-700);
    --surface-accent-soft: #23301a;
    --hervorheb-farbe: #1d2616;
    --border-subtle: var(--wm-ink-600);
    --border-strong: var(--wm-ink-500);
    --shadow-card: none;
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-body);
    background: var(--surface-page);
    -webkit-font-smoothing: antialiased;
    transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}

h1, h2, h3, h4, h5 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--text-heading);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--space-4); }
small { color: var(--text-muted); }
code { font-size: .9em; padding: 1px 6px; border-radius: var(--radius-xs); background: var(--surface-hover); }

a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }

*:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:root[data-theme="dunkel"] *:focus-visible { outline-color: var(--wm-green-400); }

.gefahr { color: var(--wm-danger); }
.gedaempft { color: var(--text-muted); }
.nur-lesen, .nur-lesehilfe { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.turbo-progress-bar { background: var(--brand-primary); }

button,
input[type="submit"],
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--feld-hoehe);
    padding: 8px 20px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    color: var(--brand-on-primary);
    background: var(--brand-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard),
        border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
button:hover, input[type="submit"]:hover, .knopf:hover { background: var(--brand-primary-hover); color: var(--brand-on-primary); box-shadow: var(--shadow-accent); }
button:active, input[type="submit"]:active, .knopf:active { background: var(--brand-primary-active); box-shadow: none; }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.knopf .symbol, button .symbol { flex: none; }

.knopf-leise,
.knopf-sekundaer {
    background: var(--surface-card);
    color: var(--text-heading);
    border-color: var(--border-strong);
}
.knopf-leise:hover, .knopf-sekundaer:hover { background: var(--surface-hover); color: var(--text-heading); border-color: var(--border-strong); box-shadow: none; }
.knopf-leise:active, .knopf-sekundaer:active { background: var(--surface-subtle); }

.knopf-text {
    background: transparent;
    color: var(--text-body);
    border-color: transparent;
    padding-left: 12px;
    padding-right: 12px;
}
.knopf-text:hover { background: var(--surface-hover); color: var(--text-heading); box-shadow: none; }

.knopf-gefahr { background: transparent; color: var(--wm-danger); border-color: var(--wm-danger); }
.knopf-gefahr:hover { background: var(--wm-danger); color: var(--wm-white); border-color: var(--wm-danger); box-shadow: none; }

.knopf-klein, .knopf-leise.knopf-klein { min-height: 32px; padding: 5px 14px; font-size: var(--fs-xs); }

form[action$="/archivieren"] button,
form[action$="/loeschen"] button,
form[action$="/kein-interesse"] button,
form[action$="/umbenennen"] button {
    min-height: 32px;
    padding: 5px 14px;
    font-size: var(--fs-xs);
    background: var(--surface-card);
    color: var(--text-heading);
    border-color: var(--border-strong);
}
form[action$="/archivieren"] button:hover,
form[action$="/umbenennen"] button:hover { background: var(--surface-hover); box-shadow: none; }
form[action$="/loeschen"] button,
form[action$="/kein-interesse"] button { color: var(--wm-danger); border-color: var(--border-strong); }
form[action$="/loeschen"] button:hover,
form[action$="/kein-interesse"] button:hover { background: var(--wm-danger); border-color: var(--wm-danger); color: var(--wm-white); box-shadow: none; }

.symbol-knopf {
    width: 34px;
    height: 34px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}
.symbol-knopf:hover { background: var(--surface-hover); color: var(--text-heading); box-shadow: none; }
.symbol-knopf-gefahr:hover { background: var(--wm-danger); color: var(--wm-white); }

form { font-family: var(--font-body); }

label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
}

:where(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), select, textarea) {
    width: 100%;
    max-width: 480px;
    min-height: var(--feld-hoehe);
    margin-bottom: var(--space-3);
    padding: 9px 14px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--text-heading);
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
:where(input, select, textarea)::placeholder { color: var(--text-muted); opacity: .8; }
:where(input, select, textarea):hover { border-color: var(--wm-ink-400); }
:where(input, select, textarea):focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--surface-accent-soft); }
:where(textarea) { max-width: 100%; min-height: 7em; line-height: 1.5; }
:where(select) { cursor: pointer; }

input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0 6px 0 0; accent-color: var(--brand-primary); vertical-align: middle; }
input[type="color"] { width: 64px; height: var(--feld-hoehe); padding: 4px; cursor: pointer; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-card); }
input[type="range"] { accent-color: var(--brand-primary); }

form ul.form-errors, form div > ul:not([class]) {
    margin: -6px 0 var(--space-3);
    padding: 0;
    list-style: none;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--wm-danger);
}
form ul:not([class]) li + li { margin-top: 2px; }

form div:has(> input[type="checkbox"]) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
form div:has(> input[type="checkbox"]) label { margin: 0; font-weight: var(--fw-medium); }
form div:has(> input[type="checkbox"]) input { margin: 0; }

.feld { display: grid; gap: 6px; }
.feld > span { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-heading); }
.feld input, .feld select { max-width: none; margin: 0; }
.feld input.code-eingabe { min-height: 56px; font-size: 1.5rem; letter-spacing: .35em; text-align: center; padding: 12px; }
.feld-hilfe, .hilfe { margin: 4px 0 var(--space-3); font-size: var(--fs-xs); color: var(--text-muted); }

table {
    width: 100%;
    margin-bottom: var(--space-5);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
}
th, td { padding: 12px var(--space-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
th {
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-subtle);
    white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--dur-fast) var(--ease-standard); }
tbody tr:hover { background: var(--surface-page); }
:root[data-theme="dunkel"] tbody tr:hover { background: var(--surface-subtle); }
td form { display: inline-block; margin: 0; }
td form + form { margin-left: var(--space-2); }
td:has(form) { white-space: nowrap; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
td.aktionen, th.aktionen { width: 1%; white-space: nowrap; text-align: right; }

.seitenkopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.seitenkopf h1 { margin: 0; }
.seitenkopf-text { margin: 4px 0 0; max-width: 46em; font-size: var(--fs-sm); color: var(--text-muted); }
.seitenkopf-aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.krume { margin: 0 0 4px; font-size: var(--fs-xs); color: var(--text-muted); }
.krume a { color: var(--text-muted); }
.krume a:hover { color: var(--text-accent); }

.karte, .panel {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    box-shadow: var(--shadow-card);
}
.karte > :first-child, .panel > :first-child { margin-top: 0; }
.karte > :last-child, .panel > :last-child { margin-bottom: 0; }
.panel h2, .karte h2 { margin: 0 0 var(--space-4); font-size: var(--fs-h2); }
.panel h3, .karte h3 { margin: 0 0 var(--space-3); }
.panel-fuss { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.karte-kopf h2 { margin: 0; }
.karte table, .panel table { margin: 0; border: 0; border-radius: 0; }
.karte table th:first-child, .panel table th:first-child { padding-left: 0; }
.karte table td:first-child, .panel table td:first-child { padding-left: 0; }
.karte table th, .panel table th { background: transparent; border-bottom: 1px solid var(--border-subtle); }

.werkzeugleiste {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.werkzeugleiste .abstand { margin-left: auto; }

.reiter, .filterleiste {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 0 var(--space-4);
    padding: 3px;
    background: var(--surface-subtle);
    border-radius: var(--radius-pill);
}
.werkzeugleiste .reiter, .werkzeugleiste .filterleiste { margin: 0; }
.reiter a, .filterleiste a {
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
}
.reiter a:hover, .filterleiste a:hover { color: var(--text-heading); }
.reiter a[aria-current="page"], .filterleiste a[aria-current="page"] {
    background: var(--surface-card);
    color: var(--text-heading);
    box-shadow: 0 1px 3px rgba(16, 20, 16, .12);
}
:root[data-theme="dunkel"] .reiter a[aria-current="page"], :root[data-theme="dunkel"] .filterleiste a[aria-current="page"] { background: var(--wm-ink-600); }

.suchfeld {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 320px;
    min-width: 200px;
    margin: 0;
}
.suchfeld .symbol { position: absolute; left: 13px; color: var(--text-muted); pointer-events: none; }
.suchfeld input[type="search"] { width: 100%; max-width: none; margin: 0; padding-left: 38px; border-radius: var(--radius-pill); }

.bericht-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.bericht-filter > div { display: flex; flex-direction: column; }
.bericht-filter label { margin-bottom: 4px; }
.bericht-filter input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]), .bericht-filter select { width: auto; max-width: 300px; margin: 0; }
.bericht-filter button { margin: 0; }
.bericht-filter-kaestchen { flex-direction: row !important; align-items: center; gap: var(--space-2); padding-bottom: 10px; }

.abzeichen {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-accent-soft);
    color: var(--wm-green-800);
    font-size: 0.75rem;
    font-weight: var(--fw-semibold);
    line-height: 1.6;
    white-space: nowrap;
}
.abzeichen-blau { background: var(--wm-blue-100); color: var(--wm-blue-700); }
.abzeichen-grau { background: var(--surface-subtle); color: var(--text-muted); }
.abzeichen-gelb { background: #fbf0d9; color: #8a5a00; }
.abzeichen-gruen { background: var(--wm-green-100); color: var(--wm-green-800); }
.abzeichen-rot { background: #fbeaea; color: #a82424; }
:root[data-theme="dunkel"] .abzeichen { background: #23301a; color: var(--wm-green-300); }
:root[data-theme="dunkel"] .abzeichen-blau { background: #14284a; color: var(--wm-blue-200); }
:root[data-theme="dunkel"] .abzeichen-grau { background: var(--wm-ink-700); color: var(--wm-ink-300); }
:root[data-theme="dunkel"] .abzeichen-gelb { background: #3a2c0d; color: #e8c169; }
:root[data-theme="dunkel"] .abzeichen-gruen { background: #1c2a10; color: var(--wm-green-300); }
:root[data-theme="dunkel"] .abzeichen-rot { background: #3a1f1f; color: #f0a3a3; }

.aktionsmenue { position: relative; display: inline-block; }
.aktionsmenue > summary {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
}
.aktionsmenue > summary::-webkit-details-marker { display: none; }
.aktionsmenue > summary:hover, .aktionsmenue[open] > summary { background: var(--surface-hover); color: var(--text-heading); }
.aktionsmenue-liste {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    min-width: 200px;
    padding: var(--space-1);
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    text-align: left;
    white-space: nowrap;
}
.aktionsmenue-liste form { display: block; margin: 0; }
.aktionsmenue-liste a,
.aktionsmenue-liste button,
.aktionsmenue-liste form[action] button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-align: left;
    box-shadow: none;
}
.aktionsmenue-liste a:hover, .aktionsmenue-liste button:hover { background: var(--surface-hover); color: var(--text-heading); box-shadow: none; }
.aktionsmenue-liste .gefahr, .aktionsmenue-liste form[action$="/loeschen"] button { color: var(--wm-danger); }
.aktionsmenue-liste form[action$="/loeschen"] button:hover { background: var(--wm-danger); color: var(--wm-white); }
.aktionsmenue-trenner { height: 1px; margin: var(--space-1) 0; background: var(--border-subtle); }

.leerzustand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: 48px var(--space-5);
    text-align: center;
    background: var(--surface-card);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-card);
}
.leerzustand .symbol { width: 40px; height: 40px; margin-bottom: var(--space-2); padding: 9px; border-radius: 50%; background: var(--surface-accent-soft); color: var(--text-accent); }
.leerzustand h2 { margin: 0; font-size: var(--fs-h3); }
.leerzustand p { max-width: 36em; margin: 0 0 var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); }

.flash-erfolg, .flash-fehler {
    margin: var(--space-5) var(--space-6) 0;
    padding: 12px var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid;
    border-left-width: 4px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.flash-erfolg { background: var(--wm-green-050); color: var(--wm-green-900); border-color: var(--wm-green-200); border-left-color: var(--wm-green-500); }
.flash-fehler { background: #fdf2f2; color: #8f2020; border-color: #f1c4c4; border-left-color: var(--wm-danger); }
:root[data-theme="dunkel"] .flash-erfolg { background: #1c2a10; color: var(--wm-green-300); border-color: var(--wm-green-800); border-left-color: var(--wm-green-500); }
:root[data-theme="dunkel"] .flash-fehler { background: #3a1f1f; color: #f0a3a3; border-color: #6b2b2b; border-left-color: var(--wm-danger); }
.hinweis { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 var(--space-4); padding: 12px var(--space-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.hinweis.oben { margin-top: var(--space-4); }
.hinweis.fehler { background: #fdf2f2; color: #8f2020; }
:root[data-theme="dunkel"] .hinweis.fehler { background: #3a1f1f; color: #f0a3a3; }

.eyebrow { margin-bottom: 6px; font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); }

.formular-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: var(--space-5); align-items: start; max-width: 1100px; }
.formular-raster .panel input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
.formular-raster .panel select,
.formular-raster .karte input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
.formular-raster .karte select { max-width: none; }
.panel-breit, .formular-aktionen { grid-column: 1 / -1; }
.formular-aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.schmal { max-width: 640px; }

.rahmen { display: flex; min-height: 100vh; }
.hauptbereich { flex: 1; min-width: 0; }
.inhalt { max-width: none; margin: 0 auto; padding: var(--space-6) var(--space-6) 64px; }

.seitenleiste {
    width: var(--seitenleiste-breite);
    flex: none;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3) var(--space-3);
    background: var(--surface-side);
    border-right: 1px solid var(--border-subtle);
}

.marke { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-3); }
.marke img { display: block; height: 32px; width: auto; }
.marke .marke-logo-dunkel { display: none; }
.marke-name { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-heading); font-size: 1.0625rem; }
:root[data-theme="dunkel"] .marke .marke-logo-hell { display: none; }
:root[data-theme="dunkel"] .marke .marke-logo-dunkel { display: block; }
.marke .marke-logo-hell + .marke-logo-dunkel + .marke-name { margin-left: -4px; }

.menue { display: flex; flex-direction: column; gap: 1px; }
.menue-titel {
    margin: var(--space-4) 0 var(--space-1);
    padding: 0 10px;
    font-size: 0.6875rem;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
}
.menue-titel:first-child { margin-top: 0; }
.menue a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.3;
}
.menue a .symbol { flex: none; color: var(--text-muted); transition: color var(--dur-fast) var(--ease-standard); }
.menue a:hover { background: var(--surface-hover); color: var(--text-heading); }
.menue a:hover .symbol { color: var(--text-heading); }
.menue a[aria-current="page"] { background: var(--surface-accent-soft); color: var(--text-accent); font-weight: var(--fw-semibold); }
.menue a[aria-current="page"] .symbol { color: var(--text-accent); }

.seitenleiste-fuss { margin-top: auto; display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.konto { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 var(--space-1); }
.konto-initial {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface-accent-soft);
    color: var(--text-accent);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}
.konto-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--text-muted); }
.fuss-werkzeuge { display: flex; gap: 2px; }
.menue-form { display: contents; }
.werkzeug {
    position: relative;
    flex: 1;
    display: grid;
    place-items: center;
    height: 36px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    box-shadow: none;
}
.werkzeug:hover, .werkzeug[aria-current="page"] { background: var(--surface-hover); color: var(--text-heading); box-shadow: none; }
.werkzeug[aria-current="page"] { color: var(--text-accent); }

.glocke { flex: 1; display: flex; }
.glocke summary { list-style: none; width: 100%; }
.glocke summary::-webkit-details-marker { display: none; }
.glocke .zaehler {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 17px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    color: var(--text-heading);
    font-size: 0.6875rem;
    font-weight: var(--fw-bold);
    line-height: 17px;
    text-align: center;
}
.glocke .zaehler-offen { background: var(--wm-danger); color: var(--wm-white); }
.glocke-liste {
    position: fixed;
    left: calc(var(--seitenleiste-breite) + 8px);
    bottom: var(--space-4);
    width: 360px;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    z-index: 60;
}
.glocke-liste > p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.zaehler { color: var(--text-muted); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

.gast { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; min-height: 100vh; }
.gast-marke { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; background: var(--wm-ink-800); color: #fff; }
.gast-marke::before { content: ""; position: absolute; left: -140px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; background: var(--wm-green-500); opacity: .9; }
.gast-marke::after { content: ""; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%; background: var(--wm-blue-600); opacity: .55; }
.gast-marke > * { position: relative; z-index: 1; }
.gast-marke img { width: min(260px, 70%); height: auto; }
.gast-marke p { margin: 0; max-width: 14em; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.5rem; line-height: var(--lh-heading); color: #fff; }
.gast-marke small { color: rgba(255, 255, 255, .7); font-size: var(--fs-xs); }
.gast-inhalt { display: grid; place-items: center; padding: 32px 24px; background: var(--surface-page); }
.gast-karte { width: min(420px, 100%); }
.gast-karte h1 { margin-bottom: 8px; font-size: clamp(1.625rem, 2.6vw, 2.25rem); }
.gast-karte .feld input { min-height: 50px; padding: 12px 14px; font-size: var(--fs-sm); }
.gast-karte form { display: grid; gap: 16px; margin-top: 24px; }
.gast-karte .knopf, .gast-karte form > button { width: 100%; min-height: 48px; padding: 14px 26px; font-size: 15px; }
.gast-karte .fussnote { margin-top: 20px; text-align: center; }
.gast-karte form.fussnote > button { width: auto; min-height: 0; padding: 4px 2px; font-size: var(--fs-sm); }
.gast-karte p { font-size: var(--fs-sm); }
.textknopf { min-height: 0; padding: 4px 2px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-link); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.textknopf:hover { background: none; color: var(--text-link-hover); text-decoration: underline; box-shadow: none; }
.fehlernummer { font-family: var(--font-display); font-weight: 800; font-size: clamp(4rem, 12vw, 7rem); line-height: 1; color: var(--brand-primary); letter-spacing: var(--ls-display); }

@media (max-width: 960px) {
    .rahmen { flex-direction: column; }
    .seitenleiste { position: static; width: auto; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3); border-right: 0; border-bottom: 1px solid var(--border-subtle); }
    .marke { padding: 0 var(--space-2); }
    .menue { flex-direction: row; flex: 1 1 100%; order: 3; overflow-x: auto; padding-bottom: 2px; }
    .menue-titel { display: none; }
    .menue a { width: auto; flex: none; white-space: nowrap; }
    .seitenleiste-fuss { margin: 0 0 0 auto; padding: 0; border-top: 0; display: flex; align-items: center; }
    .konto { display: none; }
    .werkzeug { flex: none; width: 36px; }
    .glocke { flex: none; }
    .glocke-liste { left: var(--space-3); right: var(--space-3); bottom: auto; top: 64px; width: auto; }
    .inhalt { padding: var(--space-4) var(--space-4) 48px; }
    .flash-erfolg, .flash-fehler { margin-left: var(--space-4); margin-right: var(--space-4); }
    .gast { grid-template-columns: 1fr; }
    .gast-marke { padding: 28px 24px 56px; gap: 20px; }
    .gast-marke p { font-size: 1.25rem; }
    .gast-marke::before { width: 220px; height: 220px; left: -90px; bottom: -120px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--space-5);
}

.kachel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-top: 4px solid var(--kachel-farbe, var(--brand-primary));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.kachel:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kachel h3 { margin: 0; font-size: 1.1875rem; }
.kachel h3 a { color: var(--text-heading); }
.kachel h3 a:hover { color: var(--text-accent); }
.kachel-kunde { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; }
.kachel-marken { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kachel-zahlen { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }
.kachel-fuss { display: flex; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.kachel-fuss form { margin: 0; }

.erfassung {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.erfassung input:not([type="submit"]), .erfassung select { margin: 0; max-width: none; }

.erfassung .erfassung-text {
    flex: 1 1 260px;
    border: 0;
    background: transparent;
    padding: 10px 4px;
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
}
.erfassung .erfassung-text::placeholder { color: var(--text-muted); font-weight: var(--fw-medium); }
.erfassung .erfassung-text:focus { border: 0; outline: none; }

.erfassung .projektwahl { flex: 0 1 300px; }
.erfassung .erfassung-schlagworte { flex: 0 1 180px; }

.erfassung-laeuft { flex: 1 1 260px; display: flex; flex-direction: column; min-width: 0; }
.erfassung-laeuft strong { font-family: var(--font-display); font-size: 1.1875rem; color: var(--text-heading); }
.erfassung-laeuft span { color: var(--text-muted); font-size: var(--fs-sm); }

.erfassung-uhr {
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-heading);
    min-width: 5.5em;
    text-align: right;
}

.start-knopf {
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
}
.start-knopf-stopp { background: var(--wm-danger); }
.start-knopf-stopp:hover { background: #b32d2d; box-shadow: 0 8px 22px rgba(207, 53, 53, .28); }

.wochenleiste {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.wochenwahl {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 4px;
    background: var(--surface-card);
}
.wochenwahl a {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}
.wochenwahl a:hover { background: var(--surface-hover); color: var(--text-heading); }
.wochenwahl .woche-titel { padding: 6px 14px; font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--text-heading); }

.wochensumme { color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.wochensumme strong { margin-left: var(--space-2); color: var(--text-heading); font-size: var(--fs-sm); letter-spacing: 0; }

.woche {
    --stunde: 60px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.woche-raster {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(0, 1fr));
}

.woche-tagkopf {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    border-left: 1px solid var(--border-subtle);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-2);
    background: var(--surface-card);
}
.woche-tagkopf:first-child { border-left: 0; }
.woche-tagkopf .tag-nummer { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--text-heading); line-height: 1; }
.woche-tagkopf .tag-name { font-size: 0.75rem; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-muted); }
.woche-tagkopf .tag-summe { flex-basis: 100%; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.woche-tagkopf-heute .tag-nummer { color: var(--text-accent); }

.woche-rumpf { max-height: 640px; overflow-y: auto; }

.woche-stunden { position: relative; height: calc(24 * var(--stunde)); }
.woche-stunden span {
    position: absolute;
    right: 8px;
    transform: translateY(-50%);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.woche-tag {
    position: relative;
    height: calc(24 * var(--stunde));
    border-left: 1px solid var(--border-subtle);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--stunde) - 1px), var(--border-subtle) calc(var(--stunde) - 1px), var(--border-subtle) var(--stunde));
    cursor: cell;
}
.woche-tag-heute { background-color: var(--hervorheb-farbe); }

.jetzt-linie { position: absolute; left: 0; right: 0; height: 2px; background: var(--wm-danger); pointer-events: none; z-index: 3; }
.jetzt-linie::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--wm-danger); }

.zeitblock {
    --farbe: var(--brand-primary);
    position: absolute;
    padding: 3px 6px;
    overflow: hidden;
    border-radius: var(--radius-xs);
    border-left: 4px solid var(--farbe);
    background: color-mix(in srgb, var(--farbe) 16%, var(--surface-card));
    color: var(--text-heading);
    font-size: 0.75rem;
    line-height: 1.3;
    z-index: 2;
    cursor: pointer;
    transition: box-shadow var(--dur-base) var(--ease-standard);
}
.zeitblock:hover { box-shadow: var(--shadow-md); color: var(--text-heading); z-index: 4; }
.zeitblock strong { display: block; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeitblock span { display: block; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeitblock-laeuft { border-left-style: dashed; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--farbe) 22%, var(--surface-card)) 0 8px, color-mix(in srgb, var(--farbe) 10%, var(--surface-card)) 8px 16px); }

.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.kennzahl { padding: var(--space-4) var(--space-5); border-left: 1px solid var(--border-subtle); }
.kennzahl:first-child { border-left: 0; }
.kennzahl-titel { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.kennzahl-wert { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 1.625rem; font-weight: var(--fw-bold); color: var(--text-heading); font-variant-numeric: tabular-nums; }

.diagramme { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-5); margin-bottom: var(--space-5); }

.balken-diagramm { width: 100%; height: auto; display: block; }
.balken-diagramm .balken { fill: var(--brand-primary); }
.balken-diagramm .balken:hover { fill: var(--brand-primary-hover); }
.balken-diagramm .raster { stroke: var(--border-subtle); stroke-dasharray: 3 4; }
.balken-diagramm text { fill: var(--text-muted); font-size: 11px; font-family: var(--font-body); }
.balken-diagramm .balken-wert { fill: var(--text-heading); font-weight: 600; }

.ring-bereich { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.ring-diagramm { width: 190px; height: 190px; flex: none; }
.ring-diagramm circle.segment { fill: none; stroke-width: 26; }
.ring-diagramm circle.grund { fill: none; stroke: var(--surface-hover); stroke-width: 26; }
.ring-diagramm text { fill: var(--text-heading); font-family: var(--font-display); font-weight: 700; }
.ring-diagramm .ring-unter { fill: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.ring-legende { list-style: none; margin: 0; padding: 0; flex: 1 1 160px; font-size: var(--fs-sm); }
.ring-legende li { display: flex; align-items: center; gap: var(--space-2); padding: 3px 0; }
.ring-legende .punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--punkt); flex: none; }
.ring-legende .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ring-legende .anteil { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.aufschluesselung { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); margin-bottom: var(--space-3); }
.aufschluesselung > summary {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 110px 200px;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    list-style: none;
    font-weight: var(--fw-semibold);
    color: var(--text-heading);
}
.aufschluesselung > summary::-webkit-details-marker { display: none; }
.aufschluesselung > summary .pfeil { transition: transform var(--dur-base) var(--ease-standard); color: var(--text-muted); }
.aufschluesselung[open] > summary .pfeil { transform: rotate(90deg); }
.aufschluesselung .dauer { font-variant-numeric: tabular-nums; text-align: right; }
.anteil-balken { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-medium); }
.anteil-balken i { display: block; height: 8px; border-radius: var(--radius-pill); background: var(--brand-primary); min-width: 2px; }
.aufschluesselung table { margin: 0; border: 0; border-top: 1px solid var(--border-subtle); }

.aufschluesselung td:nth-child(2), .aufschluesselung td:last-child { white-space: nowrap; }

.projektkopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-left: 6px solid var(--kachel-farbe, var(--brand-primary));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.projektkopf h1 { margin: 0 0 var(--space-2); }
.projektkopf p { margin-bottom: var(--space-1); font-size: var(--fs-xs); }

.brett-kopf,
.brett-zellen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.brett-kopf { padding: 0 var(--space-1) var(--space-2); }
.brett-kopf strong { display: block; font-family: var(--font-display); color: var(--text-heading); }
.brett-kopf span { font-size: var(--fs-xs); color: var(--text-muted); }

.brett-zeile { margin-bottom: var(--space-5); }
.brett-zeile > header {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: 0 var(--space-1) var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-3);
}
.brett-zeile > header h2 { margin: 0; font-size: 1.0625rem; }
.brett-zeile-ueberfaellig > header h2 { color: var(--wm-danger); }

.plus-knopf {
    padding: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--surface-hover);
    color: var(--text-heading);
    align-self: center;
}
.plus-knopf:hover { background: var(--brand-primary); color: var(--wm-white); }

.brett-zelle {
    min-height: 64px;
    padding: var(--space-2);
    background: var(--surface-subtle);
    border: 2px dashed transparent;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.brett-zelle-ziel { background: var(--surface-accent-soft); border-color: var(--brand-primary); }

.aufgabenkarte {
    padding: var(--space-3);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: grab;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.aufgabenkarte:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.aufgabenkarte-ueberfaellig { border-left-color: var(--wm-danger); }
.wird-gezogen { opacity: .45; }
.karte-titel { display: block; font-weight: var(--fw-semibold); color: var(--text-heading); line-height: 1.3; margin-bottom: var(--space-2); }
.karte-titel:hover { color: var(--text-accent); }
.karte-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); }

.liste-schlicht { margin: 0; padding: var(--space-3) var(--space-5); list-style: none; border-top: 1px solid var(--border-subtle); }
.liste-schlicht li { padding: 3px 0; }

.seitenfenster {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    padding: var(--space-5);
    overflow-y: auto;
    background: var(--surface-card);
    border-left: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    z-index: 40;
}
.seitenfenster > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.seitenfenster > header h2 { margin: 0; }
.seitenfenster textarea { max-width: none; }

.kommentar { padding: var(--space-3) 0; border-top: 1px solid var(--border-subtle); }
.kommentar p { margin: var(--space-1) 0; white-space: normal; }
.kommentar footer { display: flex; align-items: center; justify-content: space-between; }
.kommentar footer form { margin: 0; }

turbo-frame#aufgabe-dialog:empty, turbo-frame#projekt-dialog:empty { display: none; }

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh var(--space-4);
    overflow-y: auto;
    background: rgba(16, 20, 16, .55);
}

.dialogkarte {
    position: relative;
    width: min(720px, 100%);
    padding: var(--space-6);
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 14px 40px rgba(16, 20, 16, .25);
}
.dialogseite .dialogkarte { box-shadow: var(--shadow-sm); border: 1px solid var(--border-subtle); }

.dialog-zu {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--surface-hover);
    color: var(--text-heading);
}
.dialog-zu:hover { background: var(--wm-danger); color: var(--wm-white); box-shadow: none; transform: none; }

.dialogkarte input.titel-eingabe {
    max-width: none;
    padding: var(--space-3) 48px var(--space-3) 0;
    border: 0;
    border-bottom: 2px solid var(--border-subtle);
    border-radius: 0;
    background: transparent;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
    color: var(--text-heading);
    margin-bottom: var(--space-4);
}
.dialogkarte input.titel-eingabe:focus { border-color: var(--brand-primary); }

.dialog-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.dialog-zeile select, .dialog-zeile input { max-width: none; }
.dialog-feld { margin-bottom: var(--space-4); }
.dialog-abschnitt { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.dialog-abschnitt > summary { cursor: pointer; font-weight: var(--fw-semibold); color: var(--text-heading); }
.dialog-abschnitt h3 { margin-bottom: var(--space-3); }
.dialog-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.dialog-loeschen { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.dialog-loeschen button { background: transparent; color: var(--wm-danger); border-color: var(--wm-danger); padding: 6px 14px; font-size: var(--fs-xs); }
.dialog-loeschen button:hover { background: var(--wm-danger); color: var(--wm-white); box-shadow: none; transform: none; }

.segmente { display: flex; gap: 2px; padding: 3px; background: var(--surface-hover); border-radius: var(--radius-pill); width: fit-content; max-width: 100%; flex-wrap: wrap; }
.segmente input { position: absolute; opacity: 0; pointer-events: none; }
.segmente label {
    margin: 0;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-body);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.segmente input:checked + label { background: var(--brand-primary); color: var(--wm-white); }
.segmente input:focus-visible + label { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.regler-zeile { display: flex; align-items: center; gap: var(--space-4); }
.regler-zeile input[type="range"] { flex: 1; max-width: none; margin: 0; padding: 0; accent-color: var(--brand-primary); }
.regler-wert { min-width: 2.2em; text-align: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.25rem; color: var(--text-heading); }

.teilschritte { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.teilschritte li { display: flex; align-items: center; gap: var(--space-3); padding: 4px 0; }
.teilschritte form { margin: 0; }
.abhaken { width: 22px; height: 22px; padding: 0; border-radius: var(--radius-xs); background: var(--surface-card); border: 2px solid var(--border-strong); color: var(--wm-white); font-size: 14px; line-height: 1; }
.abhaken:hover { background: var(--surface-hover); box-shadow: none; transform: none; border-color: var(--brand-primary); }
.abhaken-fertig, .abhaken-fertig:hover { background: var(--brand-primary); border-color: var(--brand-primary); }
.durchgestrichen { text-decoration: line-through; color: var(--text-muted); }

.zeile-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin: 0; }
.zeile-formular input, .zeile-formular select { margin: 0; }
.zeile-formular > input[type="text"] { flex: 1 1 200px; max-width: none; }
.dialogkarte textarea { max-width: none; margin-bottom: var(--space-2); }

@media (max-width: 960px) {
    .brett-kopf { display: none; }
    .brett-zellen { grid-template-columns: 1fr; }
    .brett-zelle:empty { display: none; }
}

.inhalt { max-width: none; }
.flash-erfolg, .flash-fehler { max-width: none; }

.woche { user-select: none; }
.woche-rumpf { max-height: max(520px, calc(100vh - 330px)); }
.woche-tag { touch-action: pan-y; }

.auswahl {
    position: absolute;
    left: 2px;
    right: 2px;
    z-index: 5;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    border: 2px solid var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 22%, transparent);
    color: var(--text-heading);
    font-size: 0.75rem;
    font-weight: var(--fw-semibold);
    pointer-events: none;
}

.zeitblock-beweglich { cursor: grab; touch-action: none; }
.zeitblock-zieht { cursor: grabbing; opacity: .85; box-shadow: var(--shadow-md); z-index: 6; transition: none; }
.zeitblock-griff {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 7px;
    cursor: ns-resize;
}
.zeitblock-griff::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 18px;
    height: 2px;
    margin-left: -9px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0;
}
.zeitblock:hover .zeitblock-griff::after { opacity: .35; }

.zeitblock-start {
    --farbe: var(--brand-primary);
    position: absolute;
    z-index: 5;
    width: 18px;
    height: 18px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: var(--farbe);
    color: var(--wm-white);
    box-shadow: none;
    transform: none;
    cursor: pointer;
    opacity: .5;
    transition: opacity var(--dur-base) var(--ease-standard);
}
.zeitblock-start:hover, .zeitblock-start:focus-visible { opacity: 1; background: var(--farbe); box-shadow: var(--shadow-sm); transform: none; }
.zeitblock-start:disabled { opacity: .35; cursor: progress; }
.zeitblock-start .symbol { margin-left: 1px; }
.woche-tag:has(.zeitblock-zieht) .zeitblock-start { visibility: hidden; }

.zeit-popup {
    position: fixed;
    z-index: 50;
    width: 340px;
    max-width: calc(100vw - 16px);
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    user-select: text;
}
.zeit-popup[hidden] { display: none; }
.zeit-popup input:not([type="checkbox"]), .zeit-popup select { max-width: none; margin-bottom: var(--space-3); }
.popup-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); min-height: 32px; }
.popup-werkzeuge { display: inline-flex; gap: var(--space-1); }
.popup-zu { margin-left: auto; }

.zeit-popup .popup-titel {
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    padding-left: 2px;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: var(--fw-semibold);
}
.zeit-popup .popup-titel:focus { border-bottom-color: var(--brand-primary); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-body);
    transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.chip:hover span { border-color: var(--brand-primary); }
.chip input:checked + span { background: var(--surface-accent-soft); border-color: var(--brand-primary); color: var(--text-accent); }
.chip input:focus-visible + span { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.popup-zeit { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.popup-zeit input { width: auto; flex: 1 1 90px; margin-bottom: 0; }
.popup-zeit input[type="date"] { flex-basis: 100%; }
.popup-dauer { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); color: var(--text-heading); }
.popup-fehler { margin: var(--space-2) 0; font-size: var(--fs-xs); }
.popup-fehler[hidden] { display: none; }
.popup-speichern { width: 100%; margin-top: var(--space-2); }

.kacheln { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.kachel { min-width: 0; }
.kachel-fuss { flex-wrap: wrap; }

.trichter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.trichter-spalte {
    background: var(--surface-subtle);
    border: 2px dashed transparent;
    border-radius: var(--radius-md);
    padding: var(--space-3);
    min-height: 160px;
    transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.trichter-spalte-ziel { background: var(--surface-accent-soft); border-color: var(--brand-primary); }
.trichter-spalte-still { opacity: .8; }

.trichter-spalte > header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.trichter-spalte > header h2 { margin: 0; font-size: 1.0625rem; }
.zaehler { color: var(--text-muted); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

.trichter-neu { margin-bottom: var(--space-3); padding: var(--space-3); background: var(--surface-card); border: 1px solid var(--brand-primary); border-radius: var(--radius-sm); }
.trichter-neu[hidden] { display: none; }
.trichter-neu input { max-width: none; margin-bottom: var(--space-2); }
.trichter-neu-aktionen { display: flex; gap: var(--space-2); }
.trichter-neu-aktionen button { padding: 7px 16px; font-size: var(--fs-xs); }

.trichter-karte {
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.trichter-karte:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.trichter-karte > a { display: block; font-weight: var(--fw-semibold); color: var(--text-heading); line-height: 1.3; }
.trichter-karte > a:hover { color: var(--text-accent); }
.trichter-karte small { display: block; margin-top: 2px; }
.trichter-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.trichter-aktionen form { margin: 0; }
.trichter-aktionen button { padding: 5px 12px; font-size: var(--fs-xs); }
.trichter-aktionen .knopf { padding: 5px 12px; font-size: var(--fs-xs); }
.trichter-spalte > header .trichter-summe { margin-left: auto; }

.uhrenstapel {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: min(340px, calc(100vw - 2 * var(--space-4)));
    max-height: 60vh;
    overflow-y: auto;
}
.laufende-uhr {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--brand-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--text-heading);
}
.laufende-uhr:hover { border-color: var(--brand-primary); }
.laufende-uhr-inhalt {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: inherit;
    text-decoration: none;
}
.laufende-uhr-inhalt:hover { color: inherit; }
.laufende-uhr form { margin: 0; flex: none; }
.laufende-uhr-stopp { width: 30px; height: 30px; min-width: 0; min-height: 0; padding: 0; }
turbo-frame#uhr-dialog:empty { display: none; }
.dialog-stoppen { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.dialogkarte h2 .erfassung-uhr { margin-left: var(--space-3); font-size: 1.125rem; }
.laufende-uhr-punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-primary); animation: laufende-uhr-puls 1.6s ease-in-out infinite; }
.laufende-uhr-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.laufende-uhr-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.laufende-uhr-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.laufende-uhr-zeit { flex: none; margin-left: auto; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
@keyframes laufende-uhr-puls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .laufende-uhr-punkt { animation: none; } }

.wiedervorlagen { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); list-style: none; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.wiedervorlagen li { font-size: var(--fs-sm); }

.hinweisliste { list-style: none; margin: 0; padding: 0; }
.hinweisliste li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--fs-sm);
}
.hinweisliste li:last-child { border-bottom: 0; }
.hinweisliste li > div { min-width: 0; }
.hinweisliste a { font-weight: var(--fw-semibold); }
.hinweisliste small { display: block; margin-top: 2px; }
.hinweisliste form { margin: 0; flex: none; }
.hinweisliste button { padding: 5px 12px; font-size: var(--fs-xs); }
.glocke-liste .hinweisliste li { padding: var(--space-2); }

.kennzahl-zusatz { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
.fortschritt { display: block; height: 6px; margin-top: var(--space-2); border-radius: var(--radius-pill); background: var(--surface-hover); overflow: hidden; }
.fortschritt > span { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--brand-primary); }

.dashboard-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--space-5);
    align-items: start;
}
.dashboard-breit { grid-column: 1 / -1; }
.panel-fuss { margin: var(--space-3) 0 0; font-size: var(--fs-sm); }

.schnellstart { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.schnellstart-kachel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--kachel-farbe, var(--brand-primary));
    border-radius: var(--radius-sm);
}
.schnellstart-text { min-width: 0; display: flex; flex-direction: column; }
.schnellstart-text strong { color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schnellstart-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.start-knopf-klein { width: 36px; height: 36px; flex: none; }
.erfassung-schlicht { margin-bottom: 0; box-shadow: none; }

.aufgabenliste { margin: 0; padding-left: var(--space-5); }
.aufgabenliste li { padding: var(--space-2) 0; }
.aufgabenliste li::marker { font-weight: var(--fw-bold); color: var(--text-muted); }
.aufgabenliste a { font-weight: var(--fw-semibold); }
.aufgabenliste small { display: block; }
.aufgabenliste .ueberfaellig small { color: var(--wm-danger); }

.wochenbalken { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); align-items: end; height: 150px; }
.wochenbalken-tag { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.wochenbalken-wert { font-size: 0.6875rem; color: var(--text-muted); font-variant-numeric: tabular-nums; min-height: 1em; white-space: nowrap; }
.wochenbalken-saeule { flex: 1; width: 100%; max-width: 44px; display: flex; align-items: flex-end; background: var(--surface-hover); border-radius: var(--radius-xs); overflow: hidden; }
.wochenbalken-saeule > span { display: block; width: 100%; background: var(--brand-primary); min-height: 0; }
.wochenbalken-name { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); text-transform: uppercase; }

.trichter-zahlen { list-style: none; margin: 0; padding: 0; }
.trichter-zahlen li { display: flex; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.trichter-zahlen li:last-child { border-bottom: 0; }
.trichter-zahlen strong { font-family: var(--font-display); color: var(--text-heading); }

.wichtig { margin-bottom: var(--space-5); }
.wichtig h2 { font-size: 1.0625rem; margin-bottom: var(--space-3); }
.wichtig-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); }
.wichtig-karte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-top: 4px solid var(--brand-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    color: var(--text-body);
    transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.wichtig-karte:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--text-body); }
.wichtig-karte-ueberfaellig { border-top-color: var(--wm-danger); }
.wichtig-karte strong { color: var(--text-heading); line-height: 1.3; padding-right: var(--space-5); }
.wichtig-nummer { position: absolute; top: var(--space-3); right: var(--space-3); font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-muted); }
.wichtig-projekt { font-size: var(--fs-xs); color: var(--text-muted); }
.wichtig-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: auto; font-size: var(--fs-xs); }
.nachfassen { margin-bottom: var(--space-5); }

.wichtig-karte .wichtig-titel { color: var(--text-heading); font-weight: var(--fw-semibold); line-height: 1.3; padding-right: var(--space-5); }
.wichtig-karte .wichtig-titel:hover { color: var(--text-accent); }
.wichtig-aktionen { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.wichtig-aktionen form { margin: 0; }
.wichtig-aktionen .start-knopf-klein { width: 32px; height: 32px; }
.wichtig-aktionen .symbol-knopf { border: 1px solid var(--border-strong); }
.zeitfenster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.zeitfenster > span { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-muted); margin-right: var(--space-2); }

.abrechnung-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    position: sticky;
    top: 0;
    z-index: 5;
}
.abrechnung-alle { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); padding: var(--space-3) var(--space-4) 0; border-top: 1px solid var(--border-subtle); }
.abrechnung-alle input { margin: 0; }
.abrechnung-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.abrechnung-betrag { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--text-heading); margin-left: var(--space-3); }
.abrechnung-projekttitel { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: var(--space-3) var(--space-4) 0 calc(var(--space-4) + 24px + var(--space-3)); font-size: 0.9375rem; }
.abrechnung-tabelle { table-layout: fixed; width: 100%; }
.abrechnung-tabelle th:nth-child(1) { width: 3em; }
.abrechnung-tabelle th:nth-child(2) { width: 8em; }
.abrechnung-tabelle th:nth-child(4) { width: 6em; }
.abrechnung-tabelle th:nth-child(5) { width: 8em; }
.abrechnung-tabelle th:nth-child(6) { width: 13em; }
.abrechnung-tabelle td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abrechnung-kaestchen { width: 2em; text-align: center; }
.abrechnung-kaestchen input { margin: 0; }

.projektwahl { position: relative; }
.projektwahl-suche { width: 100%; }
.zeit-popup .projektwahl { margin-bottom: var(--space-3); }
.zeit-popup .projektwahl-suche { margin-bottom: 0; }
.projektwahl-liste {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    width: max(100%, 300px);
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    color: var(--text-body);
    font-size: var(--fs-sm);
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.projektwahl-liste[hidden] { display: none; }
.projektwahl-liste li { display: flex; align-items: baseline; gap: var(--space-2); padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.projektwahl-liste li[hidden] { display: none; }
.projektwahl-liste li small { color: var(--text-muted); }
.projektwahl-liste li.aktiv { background: var(--surface-hover); }
.projektwahl-liste .projektwahl-leer { color: var(--text-muted); font-style: italic; }
.projektwahl-liste .projektwahl-nichts { color: var(--text-muted); cursor: default; }

select.suchauswahl-versteckt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}
.projektwahl-suche { max-width: none; }
.projektwahl-liste .projektwahl-neu { align-items: center; margin-top: var(--space-1); border-top: 1px solid var(--border-subtle); border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: var(--fw-semibold); color: var(--brand-primary-text, var(--text-heading)); }

.dialogkarte-breit { width: min(1000px, 100%); }

@media (max-width: 960px) {
    .diagramme { grid-template-columns: 1fr; }
    .aufschluesselung > summary { grid-template-columns: 24px minmax(0, 1fr) 90px; }
    .aufschluesselung .anteil-balken { display: none; }
}

input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

table thead tr:first-child th:first-child { border-top-left-radius: calc(var(--radius-card) - 1px); }
table thead tr:first-child th:last-child { border-top-right-radius: calc(var(--radius-card) - 1px); }
table tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--radius-card) - 1px); }
table tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--radius-card) - 1px); }
.karte table thead th, .panel table thead th { border-radius: 0; }

.farbpunkt { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: var(--punkt, var(--border-strong)); vertical-align: middle; }
.tabelle-name a { font-weight: var(--fw-semibold); color: var(--text-heading); }
.tabelle-name a:hover { color: var(--text-accent); }

.kennzahl-wert, .erfassung-uhr, .regler-wert, .wichtig-nummer, .abrechnung-betrag, .laufende-uhr-zeit,
.trichter-zahlen strong, .woche-tagkopf .tag-nummer, .ring-diagramm text, .zaehler, .kacheln .kachel-zahlen dd {
    font-family: var(--font-zahl);
    font-variant-numeric: tabular-nums;
}

.kacheln { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-4); }
.kachel {
    gap: var(--space-4);
    padding: var(--space-5);
    border-top-width: 3px;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.kachel:hover { box-shadow: var(--shadow-md); transform: none; border-color: var(--border-strong); border-top-color: var(--kachel-farbe, var(--brand-primary)); }
.kachel-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.kachel h3 { font-size: 1.0625rem; margin: 0; }
.kachel-kunde { margin: 2px 0 0; font-size: var(--fs-sm); }
.kachel-zahlen { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.kachel-zahlen dt { margin-bottom: 2px; font-size: 0.6875rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.kachel-zahlen dd { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-heading); }
.kachel-zahlen dd small { display: block; font-weight: var(--fw-regular); }
.kachel-zahlen > div:last-child { text-align: right; }

.dashboard-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: var(--space-5); align-items: start; }
.dashboard-spalte { display: grid; gap: var(--space-5); min-width: 0; }
@media (max-width: 1100px) { .dashboard-raster { grid-template-columns: 1fr; } }
.kennzahlen { box-shadow: var(--shadow-card); border-radius: var(--radius-card); }
.kennzahl-wert { font-size: 1.625rem; font-weight: var(--fw-bold); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.schnellstart-kachel { background: var(--surface-page); }
.erfassung-schlicht { background: var(--surface-page); box-shadow: none; }

.hinweisliste li { padding: var(--space-3) 0; }
.hinweisliste li:first-child { padding-top: 0; }
.hinweisliste a { color: var(--text-heading); }
.hinweisliste a:hover { color: var(--text-accent); }
.hinweisliste button { min-height: 30px; }
.aufgabenliste a { color: var(--text-heading); }
.aufgabenliste a:hover { color: var(--text-accent); }
table td a:not(.knopf) { color: var(--text-heading); font-weight: var(--fw-semibold); }
table td a:not(.knopf):hover { color: var(--text-accent); }
.formular-raster.zweispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
@media (max-width: 760px) { .formular-raster.zweispaltig { grid-template-columns: 1fr; } }

.verlauf { margin-top: var(--space-5); }
.zeitstrahl { margin: var(--space-4) 0 0; padding: 0; list-style: none; border-left: 2px solid var(--border-subtle); }
.zeitstrahl li { position: relative; padding: 0 0 var(--space-4) var(--space-4); font-size: var(--fs-sm); }
.zeitstrahl li::before { content: ""; position: absolute; left: -6px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-primary); border: 2px solid var(--surface-card); }
.zeitstrahl li:last-child { padding-bottom: 0; }
.zeitstrahl strong { display: block; font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-semibold); }

.trichter-spalte, .brett-zelle { background: var(--surface-subtle); }
.trichter-spalte > header h2 { font-size: var(--fs-sm); }
.trichter-spalte > header .zaehler { padding: 0 8px; border-radius: var(--radius-pill); background: var(--surface-card); font-size: var(--fs-xs); line-height: 20px; }
.trichter-spalte:not(:has(.trichter-karte)):not(:has(.trichter-neu:not([hidden])))::after {
    content: "Hier ablegen";
    display: block;
    padding: var(--space-5) 0;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
}
.trichter-karte, .aufgabenkarte { box-shadow: var(--shadow-card); }
.trichter-karte:hover, .aufgabenkarte:hover { transform: none; border-color: var(--border-strong); }
.brett-kopf { position: sticky; top: 0; z-index: 4; margin-bottom: var(--space-3); padding: var(--space-2) var(--space-1); background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.brett-kopf strong { font-size: var(--fs-sm); }
.brett-zeile > header h2 { font-size: var(--fs-sm); }
.projektkopf { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.erfassung { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.woche { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.wochenwahl { border-color: var(--border-strong); border-radius: var(--radius-pill); }
.wichtig-karte { border-top-width: 3px; border-radius: var(--radius-card); }
.wichtig h2 { font-size: var(--fs-h2); }
.aufschluesselung { border-radius: var(--radius-card); }
.abrechnung-leiste { border-radius: var(--radius-card); }

.menue-gruppe > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1.3;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.menue-gruppe > summary::-webkit-details-marker { display: none; }
.menue-gruppe > summary .symbol { color: var(--text-muted); }
.menue-gruppe > summary:hover { background: var(--surface-hover); color: var(--text-heading); }
.menue-pfeil { margin-left: auto; display: grid; place-items: center; transition: transform var(--dur-base) var(--ease-standard); }
.menue-pfeil .symbol { color: var(--text-muted); }
.menue-gruppe[open] > summary .menue-pfeil { transform: rotate(90deg); }
.menue-untergruppe { display: grid; gap: 1px; margin: 2px 0 var(--space-2) 19px; padding-left: var(--space-3); border-left: 1px solid var(--border-subtle); }
.menue-untergruppe a { padding: 6px 10px; }
@media (max-width: 960px) {
    .menue-gruppe { flex: none; position: relative; }
    .menue-untergruppe { position: absolute; z-index: 30; top: 100%; left: 0; min-width: 180px; margin: 4px 0 0; padding: var(--space-1); background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
}

form div:has(> input[type="radio"]) { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-bottom: var(--space-4); padding: 3px; background: var(--surface-subtle); border-radius: var(--radius-pill); }
form div > input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
form div > input[type="radio"] + label { display: block; margin: 0; padding: 7px 16px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
form div > input[type="radio"]:checked + label { background: var(--surface-card); color: var(--text-heading); box-shadow: 0 1px 3px rgba(16, 20, 16, .12); }
form div > input[type="radio"]:focus-visible + label { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { margin-bottom: var(--space-3); padding: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }

.hinweis-karte { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); background: #fbf0d9; border: 1px solid #efd9a2; border-left: 4px solid var(--wm-warning); border-radius: var(--radius-card); color: #5c3d00; }
.hinweis-karte p { margin: 2px 0 0; font-size: var(--fs-sm); }
:root[data-theme="dunkel"] .hinweis-karte { background: #3a2c0d; border-color: #6b4f12; color: #e8c169; }

.abschnitt-unten { margin-top: var(--space-5); max-width: 1100px; }
.formular-innen { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.gefahrenzone { margin-top: var(--space-5); border-color: #f1c4c4; }
.gefahrenzone h2 { color: var(--wm-danger); }
:root[data-theme="dunkel"] .gefahrenzone { border-color: #6b2b2b; }

@media (max-width: 960px) {
    .menue { min-width: 0; }
    .seitenleiste { max-width: 100vw; }
    .kennzahlen { grid-template-columns: repeat(2, 1fr); }
    .kennzahl:nth-child(odd) { border-left: 0; }
    .kennzahl:nth-child(n+3) { border-top: 1px solid var(--border-subtle); }
    .formular-raster, .formular-raster.zweispaltig, .formular-innen { grid-template-columns: 1fr; }
    .seitenkopf-aktionen { width: 100%; }
    .werkzeugleiste .abstand { margin-left: 0; }
    .suchfeld { flex-basis: 100%; }
    table { display: block; overflow-x: auto; }
}

.seitenleiste { z-index: 25; }
@media (max-width: 960px) { .seitenleiste { position: relative; } }

.farbfeld { margin-bottom: var(--space-3); }
.farbfeld-zeile { display: flex; align-items: center; gap: var(--space-2); }
.farbfeld-zeile input[type="color"] { flex: none; width: var(--feld-hoehe); height: var(--feld-hoehe); padding: 3px; border-radius: var(--radius-sm); }
.farbfeld-zeile input[type="text"] { flex: 0 1 160px; margin: 0; font-variant-numeric: tabular-nums; text-transform: lowercase; }
.farbfeld-leer .farbfeld-wahl { opacity: .45; }
.farbfeld .hilfe { margin: var(--space-2) 0 0; }

.filterkarte { margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); }
.filter-raster { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) repeat(2, minmax(0, 1fr)) auto; gap: var(--space-3); align-items: end; }
.filter-raster label { margin-bottom: 4px; }
.filter-raster input:not([type="checkbox"]), .filter-raster select { max-width: none; margin: 0; }
.filter-knopf { width: var(--feld-hoehe); padding: 0; border-radius: var(--radius-sm); }
@media (max-width: 960px) { .filter-raster { grid-template-columns: 1fr 1fr; } .filter-knopf { width: 100%; } }

.protokoll-tabelle td { vertical-align: top; }
.protokoll-tabelle .zeit { white-space: nowrap; font-variant-numeric: tabular-nums; }
.objekt-name { color: var(--text-heading); }
.felder-details > summary { cursor: pointer; color: var(--text-link); font-size: var(--fs-sm); font-weight: var(--fw-medium); list-style: none; }
.felder-details > summary::-webkit-details-marker { display: none; }
.felder-details > summary::before { content: "\25B8"; display: inline-block; margin-right: 6px; transition: transform var(--dur-fast) var(--ease-standard); }
.felder-details[open] > summary::before { transform: rotate(90deg); }
.felder-details dl { margin: var(--space-2) 0 0; font-size: var(--fs-xs); }
.felder-details dl > div { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); padding: 2px 0; }
.felder-details dt { color: var(--text-muted); }
.felder-details dt::after { content: ":"; }
.felder-details dd { margin: 0; overflow-wrap: anywhere; color: var(--text-heading); }
.wert-alt { color: var(--text-muted); text-decoration: line-through; }
.wert-neu { font-weight: var(--fw-semibold); }
.wert-pfeil { color: var(--text-muted); }

.archiv-abschnitt { margin-bottom: var(--space-6); }
.archiv-abschnitt h2 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.leerzustand-klein { padding: var(--space-5); }
.leerzustand-klein p { margin: 0; }

.personenliste { margin: var(--space-3) 0 var(--space-4); padding: 0; list-style: none; }
.personenliste li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.personenliste li:last-child { border-bottom: 0; }
.personenliste small { margin-left: var(--space-2); color: var(--text-muted); }
.personenliste form { margin: 0; }

.auswertung { margin-bottom: var(--space-5); }
.auswertung h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-h4); }
.auswertung .kennzahlen { margin: var(--space-4) 0; }
.balkenliste { margin: 0; padding: 0; list-style: none; }
.balkenliste li { display: grid; grid-template-columns: 90px 1fr 170px; align-items: center; gap: var(--space-3); padding: 4px 0; }
.balken-name small { color: var(--text-muted); }
.balken { display: block; height: 10px; border-radius: var(--radius-pill); background: var(--surface-hover); overflow: hidden; }
.balken-fuellung { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--brand-primary); }
.balken-voll { background: var(--wm-green-700); }
.balken-wert { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
@media (max-width: 640px) { .balkenliste li { grid-template-columns: 70px 1fr; } .balken-wert { grid-column: 1 / -1; text-align: left; } }

.uhren-huelle { display: contents; }
.uhren-mini-knopf { align-self: flex-end; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 0; padding: 4px 10px; font-size: var(--fs-xs); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-muted); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.uhren-mini-knopf:hover { color: var(--text-heading); border-color: var(--brand-primary); box-shadow: var(--shadow-sm); transform: none; }
.uhren-mini-knopf[hidden] { display: none; }

.miniuhr-fenster { margin: 0; padding: var(--space-3); background: var(--surface-page); font-family: var(--font-body); color: var(--text-body); }
.miniuhr-fenster .mini-kachel { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); margin-bottom: var(--space-2); background: var(--surface-card); border: 1px solid var(--border-subtle); border-left: 4px solid var(--brand-primary); border-radius: var(--radius-md); }
.miniuhr-fenster .mini-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.miniuhr-fenster .mini-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-heading); font-size: var(--fs-sm); }
.miniuhr-fenster .mini-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.miniuhr-fenster .mini-zeit { flex: none; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: 1.125rem; font-variant-numeric: tabular-nums; color: var(--text-heading); }
.miniuhr-fenster .mini-stopp { flex: none; width: 30px; height: 30px; min-width: 0; min-height: 0; padding: 0; font-size: 12px; }
.miniuhr-fenster .mini-leer { margin: var(--space-4) 0; text-align: center; color: var(--text-muted); }