/* =========================================================================
   Stakeholder-Einschätzung Gesundheitscluster Lengg
   Palette taken from gesundheitscluster.ch. Status colours are darkened for
   contrast and never carry meaning on their own: each one also has a shape
   and a written label.
   ========================================================================= */

:root {
    --navy:        #2b3a4f;
    --navy-tief:   #1f4468;
    --marke-gruen: #6fc247;

    --grund:   #f4f6f7;
    --flaeche: #ffffff;
    --linie:   #e3e8ec;
    --linie-stark: #cfd7de;

    --text:   #1d2733;
    --gedaempft: #5c6773;
    --leise:  #808b96;

    --gruen:     #24762f;
    --gruen-hell:#e9f4ea;
    --gelb:      #f0b429;
    --gelb-text: #3a2c00;
    --gelb-hell: #fdf3dc;
    --rot:       #b5352a;
    --rot-hell:  #fbecea;
    --offen:     #9aa7af;

    --radius:   10px;
    --radius-s: 7px;
    --schatten: 0 1px 2px rgba(29, 39, 51, .06), 0 1px 3px rgba(29, 39, 51, .04);
    --schatten-hoch: 0 4px 16px rgba(29, 39, 51, .10);

    /* Height of the sticky header. Section headings stick directly below it.
       Measured values; app.js re-measures and corrects this at runtime. */
    --kopf-hoehe: 172px;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/roboto-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/roboto-medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/roboto-bold.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; }

/* Author rules like `.knopf { display: inline-flex }` beat the browser's own
   `[hidden] { display: none }`, so state it explicitly and win. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 500; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--navy-tief); }

:focus-visible {
    outline: 2px solid var(--navy-tief);
    outline-offset: 2px;
    border-radius: 3px;
}

.nur-lesbar {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sprung {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--navy);
    color: #fff;
    padding: .75rem 1rem;
    z-index: 100;
}
.sprung:focus { left: 0; }

/* --- Buttons ----------------------------------------------------------- */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .625rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    background: var(--flaeche);
    color: var(--navy);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.knopf--primaer { background: var(--navy); color: #fff; }
.knopf--primaer:hover { background: var(--navy-tief); }

.knopf--still { background: transparent; color: var(--gedaempft); border-color: var(--linie-stark); }
.knopf--still:hover { background: var(--flaeche); color: var(--navy); }

.knopf--rand { background: transparent; border-color: var(--linie-stark); color: var(--gedaempft); }
.knopf--rand:hover { border-color: var(--navy); color: var(--navy); }

.knopf--klein { min-height: 38px; padding: .4rem .85rem; font-size: .875rem; }

/* --- Status marks ------------------------------------------------------
   Shape carries the meaning, colour only reinforces it: filled disc,
   half disc, open ring. They stay distinguishable in greyscale.          */

.marke {
    display: inline-block;
    flex: none;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid currentColor;
    vertical-align: -1px;
}
.marke--gruen { background: currentColor; }
.marke--gelb  { background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%); }
.marke--rot   { background: transparent; }

.bilanz .marke--gruen, .hinweise .marke--gruen { color: var(--gruen); }
.bilanz .marke--gelb,  .hinweise .marke--gelb  { color: #9a7100; }
.bilanz .marke--rot,   .hinweise .marke--rot   { color: var(--rot); }

/* --- Messages ---------------------------------------------------------- */

.meldung {
    margin: 0 0 1rem;
    padding: .875rem 1.125rem;
    border-radius: var(--radius-s);
    border-left: 4px solid var(--navy);
    background: var(--flaeche);
    font-size: .9375rem;
    box-shadow: var(--schatten);
}
.meldung--fehler  { border-left-color: var(--rot); background: var(--rot-hell); }
.meldung--erfolg  { border-left-color: var(--gruen); background: var(--gruen-hell); }
.meldung--hinweis { border-left-color: var(--navy-tief); }
.meldung--aktion  { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* =========================================================================
   Login
   ========================================================================= */

.seite-login {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(1200px 500px at 50% -10%, #e9eef2 0%, var(--grund) 60%);
}

.login { width: 100%; max-width: 30rem; }

.login__karte {
    background: var(--flaeche);
    border-radius: var(--radius);
    box-shadow: var(--schatten-hoch);
    padding: 2.25rem;
    border-top: 4px solid var(--marke-gruen);
}


.login__titel {
    margin: .35rem 0 .75rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: -.01em;
}

.login__lead { color: var(--gedaempft); font-size: .9375rem; margin-bottom: 1.5rem; }

.login__label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .375rem; }

.login__feld {
    width: 100%;
    min-height: 52px;
    padding: .75rem 1rem;
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-s);
    background: #fbfcfd;
    font: inherit;
    font-size: 1.125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
}
.login__feld::placeholder { color: var(--leise); letter-spacing: .04em; }
.login__feld:focus { border-color: var(--navy); background: #fff; }

.login__hilfe { font-size: .8125rem; color: var(--leise); margin: .4rem 0 1.25rem; }

.login__form .knopf { width: 100%; }

.legende__liste { margin: 0; display: grid; gap: .625rem; }
.legende__liste--breit { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.legende__eintrag { display: grid; gap: .1rem; }
.legende__begriff { display: flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .9375rem; }
.legende__text { margin: 0; font-size: .8125rem; color: var(--gedaempft); line-height: 1.45; }

.login__fuss {
    margin: 1.25rem auto 0;
    max-width: 30rem;
    font-size: .8125rem;
    color: var(--leise);
    text-align: center;
    line-height: 1.5;
}

/* =========================================================================
   Sticky header of the rating screen
   ========================================================================= */

.kopf {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--navy);
    color: #fff;
    padding-top: env(safe-area-inset-top, 0px);
    box-shadow: 0 1px 0 rgba(0,0,0,.1);
}

.kopf__inhalt { max-width: 68rem; margin: 0 auto; padding: .875rem 1.25rem 1rem; }

.kopf__zeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

.kopf__marke {
    font-size: .6875rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255,255,255,.62);
    font-weight: 500;
}

.kopf__titel { font-size: 1.25rem; font-weight: 500; color: #fff; margin-top: .1rem; }

.kopf__abmelden .knopf--still { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.28); min-height: 38px; padding: .35rem .8rem; font-size: .875rem; }
.kopf__abmelden .knopf--still:hover { background: rgba(255,255,255,.1); color: #fff; }

.fortschritt { margin-top: .75rem; }

.fortschritt__balken {
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    overflow: hidden;
}

.fortschritt__fuellung {
    height: 100%;
    background: var(--marke-gruen);
    border-radius: 999px;
    transition: width .25s ease;
}

.fortschritt__text { margin-top: .4rem; font-size: .8125rem; color: rgba(255,255,255,.78); }
.fortschritt__text strong { color: #fff; font-weight: 500; }
.fortschritt__status { margin-left: .5rem; color: rgba(255,255,255,.6); }
.fortschritt__status.ist-fehler { color: #ffc9c3; font-weight: 500; }

.werkzeuge { margin-top: .75rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

.suche { position: relative; flex: 1 1 18rem; }

.suche__feld {
    width: 100%;
    min-height: 42px;
    padding: .5rem 2.25rem .5rem .875rem;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--radius-s);
    background: rgba(255,255,255,.1);
    color: #fff;
    font: inherit;
    font-size: .9375rem;
}
.suche__feld::placeholder { color: rgba(255,255,255,.55); }
.suche__feld:focus { background: #fff; color: var(--text); border-color: #fff; }
.suche__feld:focus::placeholder { color: var(--leise); }

.suche__leeren {
    position: absolute;
    right: .35rem; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border: 0; background: transparent;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.suche__feld:focus + .suche__leeren { color: var(--gedaempft); }

.schalter { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: rgba(255,255,255,.85); cursor: pointer; min-height: 42px; }
.schalter input { width: 18px; height: 18px; accent-color: var(--marke-gruen); cursor: pointer; }

.werkzeuge__treffer { margin-top: .4rem; font-size: .8125rem; color: rgba(255,255,255,.7); }

/* =========================================================================
   Content
   ========================================================================= */

.inhalt { max-width: 68rem; margin: 0 auto; padding: 1.25rem 1.25rem 7rem; }

/* Anleitung und Legende. Beim ersten Besuch offen, danach zugeklappt, aber
   immer erreichbar: seit die Anmeldeseite nichts mehr verrät, steht die
   Legende nirgends sonst. */
.hinweise {
    background: var(--flaeche);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    box-shadow: var(--schatten);
    border-top: 3px solid var(--marke-gruen);
}

.hinweise__schalter {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .875rem 1.5rem;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
    min-height: 48px;
}
.hinweise__schalter::-webkit-details-marker { display: none; }
.hinweise__schalter::before {
    content: '';
    width: 0; height: 0;
    border-left: 6px solid var(--gedaempft);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform .15s ease;
}
.hinweise[open] .hinweise__schalter::before { transform: rotate(90deg); }
.hinweise__schalter:hover { background: #f8fafb; }

.hinweise__inhalt { padding: 0 1.5rem 1.5rem; }
.hinweise__text { color: var(--gedaempft); font-size: .9375rem; max-width: 70ch; }

/* Zwei Fragen, zwei Zeilen. Im Fliesstext verschwimmt die zweite zur Fussnote. */
.hinweise__fragen {
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: frage;
    display: grid;
    gap: .45rem;
}
/* Gleiche Schrift wie der Fliesstext daneben. Die Nummern tragen die
   Gliederung, dafür braucht es keinen zweiten Schriftschnitt. */
.hinweise__fragen li {
    counter-increment: frage;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9375rem;
    font-weight: 400;
    color: var(--gedaempft);
}
.hinweise__fragen li::before {
    content: counter(frage);
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: .75rem;
    font-weight: 500;
}
.hinweise__titel {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--leise);
    margin: 1.25rem 0 .5rem;
}
.hinweise__symbol { color: #d9a021; font-size: 1rem; line-height: 1; }
kbd {
    display: inline-block;
    min-width: 1.4em;
    padding: .05em .35em;
    border: 1px solid var(--linie-stark);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #fafbfc;
    font: inherit;
    font-size: .8125rem;
    text-align: center;
}

.abschnitt { margin-bottom: 2rem; }

.abschnitt__kopf {
    position: sticky;
    top: var(--kopf-hoehe);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: .75rem;
    background: var(--grund);
    border-bottom: 2px solid var(--navy);
}

.abschnitt__titel { font-size: 1.0625rem; color: var(--navy); font-weight: 700; }
.abschnitt__zahlen { font-size: .8125rem; color: var(--gedaempft); }

.gruppe { margin-bottom: 1.25rem; }

.gruppe__titel {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--leise);
    font-weight: 500;
    padding: 0 .25rem .4rem;
}

.gruppe__liste {
    background: var(--flaeche);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    overflow: hidden;
}

/* --- One row ----------------------------------------------------------- */

.zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem 1rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--linie);
    border-left: 3px solid transparent;
    scroll-margin-top: calc(var(--kopf-hoehe) + 3.5rem);
}
.gruppe__liste .zeile:first-child { border-top: 0; }

.zeile[data-status="offen"] { border-left-color: var(--offen); background: #fcfdfd; }
.zeile[data-status="gruen"] { border-left-color: var(--gruen); }
.zeile[data-status="gelb"]  { border-left-color: #d9a021; }
.zeile[data-status="rot"]   { border-left-color: var(--rot); }

.zeile:focus-within { background: #f8fafb; }

/* No success animation. The control that was pressed already shows its own
   new state, and green would contradict an answer of «Kenne ich nicht».
   Only a failed save marks the row, because that one needs noticing. */
.zeile[data-ungespeichert] {
    outline: 2px solid var(--rot);
    outline-offset: -2px;
}

.zeile__person { min-width: 0; }

.zeile__name {
    font-weight: 500;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.chip {
    display: inline-block;
    padding: .05rem .4rem;
    border: 1px solid var(--linie-stark);
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 400;
    color: var(--gedaempft);
    letter-spacing: .02em;
    white-space: nowrap;
}
.chip--offen { border-style: dashed; color: var(--leise); }

.zeile__rolle {
    font-size: .8125rem;
    color: var(--gedaempft);
    margin-top: .1rem;
    overflow-wrap: anywhere;
}

.zeile__notiz {
    font-size: .8125rem;
    color: var(--leise);
    font-style: italic;
    margin-top: .15rem;
}

.zeile__steuerung { display: flex; align-items: center; gap: .5rem; }

/* --- Traffic light ------------------------------------------------------ */

.ampel { display: flex; gap: .25rem; }

.ampel__knopf {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 42px;
    padding: .35rem .7rem;
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-s);
    background: var(--flaeche);
    color: var(--gedaempft);
    font: inherit;
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ampel__knopf:hover { border-color: var(--navy); color: var(--navy); }

.ampel__knopf--gruen .marke { color: var(--gruen); }
.ampel__knopf--gelb  .marke { color: #9a7100; }
.ampel__knopf--rot   .marke { color: var(--rot); }

.ampel__knopf--gruen.ist-aktiv { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.ampel__knopf--gelb.ist-aktiv  { background: var(--gelb);  border-color: #d9a021;     color: var(--gelb-text); }
.ampel__knopf--rot.ist-aktiv   { background: var(--rot);   border-color: var(--rot);  color: #fff; }
.ampel__knopf.ist-aktiv .marke { color: currentColor; }

/* --- Star and comment --------------------------------------------------- */

.stern__knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--leise);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.stern__knopf:hover { background: #f2f5f7; color: var(--navy); }
.stern__knopf.ist-aktiv { color: #d9a021; }

/* The comment affordance repeats on all 126 rows, so it stays quiet and sits
   on the right, out of the way of the names the eye scans down the left. */
/* Do not make this a flex container: Chrome wraps everything after the
   summary in its own box, which would then shrink to fit and squeeze the
   comment field. Plain block plus an auto margin on the summary right-aligns
   the toggle while the field below keeps the full width. */
.notiz { grid-column: 1 / -1; }

.notiz__schalter {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: fit-content;
    margin-left: auto;
    padding: .2rem .45rem;
    border-radius: var(--radius-s);
    font-size: .75rem;
    color: var(--leise);
    cursor: pointer;
    list-style: none;
    min-height: 30px;
}
.notiz__schalter::-webkit-details-marker { display: none; }
.notiz__schalter:hover { color: var(--navy); background: #f2f5f7; }
.notiz[open] .notiz__schalter { color: var(--navy); }

/* A small speech bubble, so it does not read as an unchecked checkbox. */
.notiz__symbol {
    position: relative;
    display: inline-block;
    width: 14px; height: 11px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
}
.notiz__symbol::after {
    content: '';
    position: absolute;
    left: 2px; bottom: -5px;
    width: 0; height: 0;
    border-left: 5px solid currentColor;
    border-bottom: 5px solid transparent;
}

.notiz__form { display: flex; gap: .5rem; align-items: flex-start; padding: .35rem 0 .25rem; flex-wrap: wrap; width: 100%; }

.notiz__feld {
    flex: 1 1 22rem;
    min-height: 44px;
    padding: .5rem .7rem;
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-s);
    font: inherit;
    font-size: .875rem;
    resize: vertical;
    background: #fbfcfd;
}
.notiz__feld:focus { background: #fff; border-color: var(--navy); }

/* The comment saves by itself, but the button stays and reports what happened.
   People do not trust a text field that silently swallows what they typed, and
   the status line in the header is too far from where they are looking. */
.notiz__speichern {
    border-color: var(--linie-stark);
    background: #fff;
    color: var(--gedaempft);
    transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.notiz__speichern:hover { border-color: var(--navy); color: var(--navy); }
.notiz__speichern[data-zustand="ungespeichert"] { border-color: var(--navy); color: var(--navy); }
.notiz__speichern[data-zustand="speichert"]     { border-color: var(--linie-stark); color: var(--leise); }
.notiz__speichern[data-zustand="gespeichert"]   { border-color: var(--gruen); color: var(--gruen); background: var(--gruen-hell); }
.notiz__speichern[data-zustand="fehler"]        { border-color: var(--rot); color: var(--rot); background: var(--rot-hell); }

/* --- End of list and sticky footer -------------------------------------- */

.leer { text-align: center; color: var(--gedaempft); padding: 3rem 1rem; }

.schluss {
    background: var(--flaeche);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: var(--schatten);
    text-align: center;
    border-top: 3px solid var(--navy);
}
.schluss__titel { font-size: 1.125rem; margin-bottom: .5rem; }
.schluss__text { color: var(--gedaempft); font-size: .9375rem; max-width: 52ch; margin: 0 auto 1.25rem; }

.fussleiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 68rem;
    margin: 0 auto;
    padding: .625rem 1.25rem;
    padding-bottom: calc(.625rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -2px 12px rgba(29,39,51,.07);
}
.fussleiste__text { font-size: .875rem; color: var(--gedaempft); }
.fussleiste__text strong { color: var(--text); font-weight: 500; }

/* =========================================================================
   Narrow cards: finish screen, errors
   ========================================================================= */

.schmal { max-width: 40rem; margin: 0 auto; padding: 3rem 1.25rem; }

.karte {
    background: var(--flaeche);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--schatten-hoch);
    border-top: 4px solid var(--navy);
}
.karte--erfolg { border-top-color: var(--marke-gruen); }
.karte__marke { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gedaempft); font-weight: 500; }
.karte__titel { font-size: 1.625rem; font-weight: 700; color: var(--navy); margin: .35rem 0 .75rem; }
.karte__lead { font-size: 1rem; color: var(--text); margin-bottom: 1rem; }
.karte__warnung {
    padding: .875rem 1.125rem;
    background: var(--gelb-hell);
    border-left: 4px solid var(--gelb);
    border-radius: var(--radius-s);
    font-size: .9375rem;
    margin-bottom: 1rem;
}
.karte__hinweis { font-size: .875rem; color: var(--gedaempft); margin-bottom: 1.5rem; }
.karte__aktionen { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

.bilanz { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 1.5rem 0; }
.bilanz__posten {
    padding: .875rem 1rem;
    background: var(--grund);
    border-radius: var(--radius-s);
}
.bilanz__posten dt { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--gedaempft); }
.bilanz__posten dd { margin: .25rem 0 0; font-size: 1.75rem; font-weight: 500; color: var(--navy); }

/* =========================================================================
   Geschäftsstelle
   ========================================================================= */

.admin { max-width: 90rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.reiter { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1.5rem; border-bottom: 1px solid var(--linie); }
.reiter__link {
    padding: .7rem 1.1rem;
    color: var(--gedaempft);
    text-decoration: none;
    font-weight: 500;
    font-size: .9375rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}
.reiter__link:hover { color: var(--navy); }
.reiter__link.ist-aktiv { color: var(--navy); border-bottom-color: var(--navy); }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.kachel { background: var(--flaeche); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--schatten); }
.kachel__wert { font-size: 2rem; font-weight: 500; color: var(--navy); line-height: 1.1; }
.kachel__label { font-size: .8125rem; color: var(--gedaempft); margin-top: .35rem; }

.block { background: var(--flaeche); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--schatten); margin-bottom: 1.5rem; }
.block__titel { font-size: 1.0625rem; margin-bottom: .25rem; }
.block__lead { font-size: .875rem; color: var(--gedaempft); margin-bottom: 1.25rem; }

.balkenliste { display: grid; gap: .875rem; }
.balkenzeile { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr auto; gap: .875rem; align-items: center; }
.balkenzeile__name { font-size: .875rem; font-weight: 500; }
.balkenzeile__zahl { font-size: .8125rem; color: var(--gedaempft); white-space: nowrap; font-variant-numeric: tabular-nums; }

.stapel { display: flex; height: 22px; border-radius: 5px; overflow: hidden; background: #eef1f3; }
.stapel__teil { height: 100%; }
.stapel__teil--gruen { background: var(--gruen); }
.stapel__teil--gelb  { background: var(--gelb); }
.stapel__teil--rot   { background: var(--rot); }
.stapel__teil--offen { background: repeating-linear-gradient(45deg, #dfe5ea 0 5px, #eef1f3 5px 10px); }

.stapel-legende { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; font-size: .8125rem; color: var(--gedaempft); }
.stapel-legende span { display: inline-flex; align-items: center; gap: .4rem; }
.stapel-legende i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.filterleiste {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: var(--flaeche);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}
.filterfeld { display: grid; gap: .25rem; }
.filterfeld label { font-size: .75rem; color: var(--gedaempft); font-weight: 500; }
.filterfeld select, .filterfeld input {
    min-height: 40px;
    padding: .4rem .6rem;
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius-s);
    font: inherit;
    font-size: .875rem;
    background: #fff;
    color: var(--text);
}

.tabellenrahmen { overflow-x: auto; background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); }

table.matrix { border-collapse: collapse; width: 100%; font-size: .875rem; }
table.matrix th, table.matrix td { padding: .5rem .625rem; text-align: left; border-bottom: 1px solid var(--linie); }
table.matrix thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--navy); color: #fff;
    font-weight: 500; font-size: .75rem;
    text-align: center;
    vertical-align: bottom;
}
table.matrix thead th:first-child { text-align: left; }
table.matrix td.zelle { text-align: center; width: 62px; }
table.matrix tbody tr:hover { background: #f8fafb; }

.person__name { font-weight: 500; }
.person__rolle { display: block; font-size: .75rem; color: var(--gedaempft); margin-top: .1rem; }

.zelle__marke {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    font-size: .6875rem;
    font-weight: 700;
}
.zelle__marke--gruen { background: var(--gruen); color: #fff; }
.zelle__marke--gelb  { background: var(--gelb);  color: var(--gelb-text); }
.zelle__marke--rot   { background: var(--rot-hell); color: var(--rot); border: 1px solid #edc9c4; }
.zelle__marke--offen {
    background: repeating-linear-gradient(45deg, #e6eaee 0 4px, #f3f5f7 4px 8px);
    color: var(--leise);
    border: 1px dashed var(--linie-stark);
}

.kommentarliste { display: grid; gap: .875rem; }
.kommentarkarte { background: var(--flaeche); border-radius: var(--radius); padding: 1.125rem 1.25rem; box-shadow: var(--schatten); border-left: 4px solid var(--linie-stark); }
.kommentarkarte--gruen { border-left-color: var(--gruen); }
.kommentarkarte--gelb  { border-left-color: var(--gelb); }
.kommentarkarte--rot   { border-left-color: var(--rot); }
.kommentarkarte__kopf { display: flex; gap: .625rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .375rem; }
.kommentarkarte__person { font-weight: 500; }
.kommentarkarte__meta { font-size: .8125rem; color: var(--gedaempft); }
.kommentarkarte__text { font-size: .9375rem; }

/* =========================================================================
   Narrow screens. Directors will use an iPad, some will use a phone.
   ========================================================================= */

@media (max-width: 860px) {
    .zeile { grid-template-columns: minmax(0, 1fr); }
    .zeile__steuerung { justify-content: space-between; width: 100%; }
    .ampel { flex: 1; }
    .ampel__knopf { flex: 1; justify-content: center; padding: .35rem .4rem; }
    .abschnitt__kopf { top: var(--kopf-hoehe); }
}

@media (max-width: 470px) {
    /* Search field and toggle wrap onto their own lines. */
    :root { --kopf-hoehe: 244px; }
}

@media (max-width: 560px) {
    .kopf__inhalt, .inhalt { padding-left: 1rem; padding-right: 1rem; }
    .ampel__text { display: none; }
    .ampel__knopf { min-height: 46px; }
    .ampel__knopf.ist-aktiv .ampel__text { display: inline; }
    .fussleiste { padding-left: 1rem; padding-right: 1rem; }
    .fussleiste__text { font-size: .75rem; }
    .fussleiste .knopf { white-space: nowrap; }
    /* The footer wraps to two lines here, so the list needs more room below. */
    .inhalt { padding-bottom: 9rem; }
    .karte, .login__karte { padding: 1.5rem; }
    .balkenzeile { grid-template-columns: 1fr; gap: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================================
   Print: the Geschäftsstelle will take the overview into a meeting.
   ========================================================================= */

@media print {
    body { background: #fff; }
    .kopf, .fussleiste, .filterleiste, .reiter, .werkzeuge, .knopf, .sprung { display: none !important; }
    .block, .kachel, .tabellenrahmen, .kommentarkarte { box-shadow: none; border: 1px solid #ccc; }
    .admin { padding: 0; }
    table.matrix thead th { background: #eee !important; color: #000 !important; }
    a[href]::after { content: ''; }
}

/* --- Width utilities -------------------------------------------------
   A strict CSP blocks inline style attributes, so server-rendered bar
   widths use these classes instead of style="width: n%".             */
.w-0 { width: 0%; }
.w-1 { width: 1%; }
.w-2 { width: 2%; }
.w-3 { width: 3%; }
.w-4 { width: 4%; }
.w-5 { width: 5%; }
.w-6 { width: 6%; }
.w-7 { width: 7%; }
.w-8 { width: 8%; }
.w-9 { width: 9%; }
.w-10 { width: 10%; }
.w-11 { width: 11%; }
.w-12 { width: 12%; }
.w-13 { width: 13%; }
.w-14 { width: 14%; }
.w-15 { width: 15%; }
.w-16 { width: 16%; }
.w-17 { width: 17%; }
.w-18 { width: 18%; }
.w-19 { width: 19%; }
.w-20 { width: 20%; }
.w-21 { width: 21%; }
.w-22 { width: 22%; }
.w-23 { width: 23%; }
.w-24 { width: 24%; }
.w-25 { width: 25%; }
.w-26 { width: 26%; }
.w-27 { width: 27%; }
.w-28 { width: 28%; }
.w-29 { width: 29%; }
.w-30 { width: 30%; }
.w-31 { width: 31%; }
.w-32 { width: 32%; }
.w-33 { width: 33%; }
.w-34 { width: 34%; }
.w-35 { width: 35%; }
.w-36 { width: 36%; }
.w-37 { width: 37%; }
.w-38 { width: 38%; }
.w-39 { width: 39%; }
.w-40 { width: 40%; }
.w-41 { width: 41%; }
.w-42 { width: 42%; }
.w-43 { width: 43%; }
.w-44 { width: 44%; }
.w-45 { width: 45%; }
.w-46 { width: 46%; }
.w-47 { width: 47%; }
.w-48 { width: 48%; }
.w-49 { width: 49%; }
.w-50 { width: 50%; }
.w-51 { width: 51%; }
.w-52 { width: 52%; }
.w-53 { width: 53%; }
.w-54 { width: 54%; }
.w-55 { width: 55%; }
.w-56 { width: 56%; }
.w-57 { width: 57%; }
.w-58 { width: 58%; }
.w-59 { width: 59%; }
.w-60 { width: 60%; }
.w-61 { width: 61%; }
.w-62 { width: 62%; }
.w-63 { width: 63%; }
.w-64 { width: 64%; }
.w-65 { width: 65%; }
.w-66 { width: 66%; }
.w-67 { width: 67%; }
.w-68 { width: 68%; }
.w-69 { width: 69%; }
.w-70 { width: 70%; }
.w-71 { width: 71%; }
.w-72 { width: 72%; }
.w-73 { width: 73%; }
.w-74 { width: 74%; }
.w-75 { width: 75%; }
.w-76 { width: 76%; }
.w-77 { width: 77%; }
.w-78 { width: 78%; }
.w-79 { width: 79%; }
.w-80 { width: 80%; }
.w-81 { width: 81%; }
.w-82 { width: 82%; }
.w-83 { width: 83%; }
.w-84 { width: 84%; }
.w-85 { width: 85%; }
.w-86 { width: 86%; }
.w-87 { width: 87%; }
.w-88 { width: 88%; }
.w-89 { width: 89%; }
.w-90 { width: 90%; }
.w-91 { width: 91%; }
.w-92 { width: 92%; }
.w-93 { width: 93%; }
.w-94 { width: 94%; }
.w-95 { width: 95%; }
.w-96 { width: 96%; }
.w-97 { width: 97%; }
.w-98 { width: 98%; }
.w-99 { width: 99%; }
.w-100 { width: 100%; }

/* --- Small utilities, so no template needs an inline style attribute ----- */
.mittig          { text-align: center; }
.nowrap          { white-space: nowrap; }
.abstand-oben    { margin-top: 1rem; }
.reiter__luecke  { flex: 1; }
.spalte-person   { min-width: 16rem; font-weight: 400; }
.spalte-kommentar{ min-width: 18rem; }
.spalte-balken   { min-width: 9rem; }
.stapel--duenn   { height: 14px; }
.stapel__teil--navy { background: var(--navy); }
.stern-symbol    { color: #d9a021; }
.chip--fertig    { border-color: var(--gruen); color: var(--gruen); }
.swatch--gruen   { background: var(--gruen); }
.swatch--gelb    { background: var(--gelb); }
.swatch--rot     { background: var(--rot); }
.swatch--offen   { background: repeating-linear-gradient(45deg, #dfe5ea 0 4px, #eef1f3 4px 8px); }