/*
 * Antwortwerk - Oberflaeche
 *
 * Gestaltungsrichtung: Werkbank statt Schaltzentrale. Papierton, ein
 * kraeftiger Akzent, klare Groessenspruenge in der Schrift. Der Text der
 * Kundenmail ist der wichtigste Inhalt der Seite und bekommt deshalb die
 * ruhigste Umgebung - alles Bunte drumherum wuerde davon ablenken.
 */

:root {
    color-scheme: light;

    --papier: #f6f4ef;
    --flaeche: #fffdf9;
    --flaeche-tief: #efece4;
    --linie: #ddd7ca;
    --linie-stark: #c6bda9;

    --schrift: #241f18;
    --schrift-leise: #6d6455;

    --akzent: #8a3312;
    --akzent-hell: #f3e3d8;
    --gut: #2f6a3f;
    --gut-hell: #e0efe2;
    --warnung: #8a5a00;
    --warnung-hell: #f7ecd2;

    --rund: 3px;
    --rund-gross: 8px;
    --schatten: 0 1px 2px rgba(36, 31, 24, .06), 0 8px 24px -18px rgba(36, 31, 24, .5);

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --grotesk: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --schreib: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--papier);
    color: var(--schrift);
    font-family: var(--grotesk);
    font-size: 15px;
    line-height: 1.55;
}

a { color: var(--akzent); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .4rem; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem); letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: .95rem; font-family: var(--grotesk); text-transform: uppercase;
     letter-spacing: .06em; color: var(--schrift-leise); margin-top: 1.4rem; }

code { font-family: var(--schreib); font-size: .88em; }

.versteckt {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.leise { color: var(--schrift-leise); }
.klein { font-size: .82rem; }
.rechts { text-align: right; }

/* ---------------------------------------------------------------- Kopf -- */

.kopf {
    display: flex; align-items: center; gap: 1.5rem;
    padding: .55rem clamp(1rem, 3vw, 2.5rem);
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    position: sticky; top: 0; z-index: 20;
    flex-wrap: wrap;
}

.marke { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.marke-zeichen {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: var(--rund);
    background: var(--akzent); color: #fff; font-size: 1rem;
}
.marke-text { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; line-height: 1.1; }
.marke-text em { display: block; font-style: normal; font-family: var(--grotesk);
    font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--schrift-leise); }

.wege { display: flex; gap: .25rem; margin-inline-start: auto; flex-wrap: wrap; }
.wege a {
    padding: .3rem .7rem; border-radius: var(--rund);
    text-decoration: none; color: var(--schrift-leise); font-weight: 500;
    transition: background .12s ease, color .12s ease;
}
.wege a:hover { background: var(--flaeche-tief); color: var(--schrift); }
.wege a[aria-current="page"] { background: var(--akzent-hell); color: var(--akzent); }

.wer { display: flex; align-items: center; gap: .7rem; }
.wer-name { font-weight: 600; font-size: .9rem; }

.buehne { max-width: 1500px; margin: 0 auto; padding: clamp(1rem, 2.5vw, 2rem); }
.buehne-schlicht { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }

.fuss {
    max-width: 1500px; margin: 0 auto; padding: 1.5rem clamp(1rem, 2.5vw, 2rem) 3rem;
    color: var(--schrift-leise); font-size: .82rem; border-top: 1px solid var(--linie);
}

.schmal { max-width: 34rem; margin: 0 auto; }

/* ------------------------------------------------------------- Knoepfe -- */

.knopf-stark, .knopf-schlicht {
    display: inline-block; font: inherit; font-size: .88rem; font-weight: 600;
    padding: .42rem .95rem; border-radius: var(--rund); cursor: pointer;
    text-decoration: none; text-align: center; line-height: 1.4;
    border: 1px solid transparent;
    transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.knopf-stark { background: var(--akzent); color: #fff; }

/* Senden geht an einen Kunden und laesst sich nicht zuruecknehmen. Der Knopf
   sieht deshalb anders aus als alle anderen - man soll ihn nicht aus
   Versehen treffen. */
.knopf-senden {
    display: inline-block; font: inherit; font-size: .88rem; font-weight: 700;
    padding: .42rem 1.1rem; border-radius: var(--rund); cursor: pointer;
    line-height: 1.4; border: 1px solid var(--gut);
    background: var(--gut); color: #fff;
    transition: background .12s ease, transform .06s ease;
}
.knopf-senden:hover { background: #24512f; }
.knopf-senden:active { transform: translateY(1px); }
.knopf-senden:focus-visible { outline: 2px solid var(--gut); outline-offset: 2px; }
.knopf-senden[disabled] { opacity: .6; cursor: progress; }

.holen-form { margin-inline-start: auto; }
.holen-form + .suchfeld { margin-inline-start: 0; }
.knopf-stark:hover { background: #6f280d; }
.knopf-schlicht { background: var(--flaeche); color: var(--schrift); border-color: var(--linie-stark); }
.knopf-schlicht:hover { background: var(--flaeche-tief); }
.knopf-stark:active, .knopf-schlicht:active { transform: translateY(1px); }
.knopf-stark:focus-visible, .knopf-schlicht:focus-visible,
a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--akzent); outline-offset: 2px;
}

/* ------------------------------------------------------------ Formular -- */

input[type=text], input[type=search], input[type=password], input[type=date],
textarea, select {
    font: inherit; width: 100%;
    padding: .45rem .6rem;
    background: var(--flaeche);
    border: 1px solid var(--linie-stark); border-radius: var(--rund);
    color: var(--schrift);
}
textarea { resize: vertical; line-height: 1.6; }
label { display: block; font-size: .82rem; font-weight: 600; color: var(--schrift-leise); margin-bottom: .2rem; }

.formsatz { display: grid; gap: .8rem; }
.formzeile { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.formsatz button { justify-self: start; }

/* ------------------------------------------------------------ Meldung --- */

.meldung {
    padding: .65rem .9rem; border-radius: var(--rund);
    border-inline-start: 3px solid var(--linie-stark);
    background: var(--flaeche); margin: 0 0 1.2rem; font-size: .9rem;
}
.meldung.gut { background: var(--gut-hell); border-color: var(--gut); }
.meldung.warnung { background: var(--warnung-hell); border-color: var(--warnung); }
.meldung.hinweis { background: var(--flaeche-tief); }

/* --------------------------------------------------------------- Tor ---- */

.tor { width: min(24rem, 100%); }
.tor-marke { text-align: center; margin-bottom: 1.6rem; }
.tor-marke span { font-size: 2rem; }
.tor-marke h1 { margin: .3rem 0 0; }
.tor-marke p { margin: 0; color: var(--schrift-leise); font-size: .88rem; }
.tor-form {
    display: grid; gap: .3rem;
    background: var(--flaeche); padding: 1.4rem;
    border: 1px solid var(--linie); border-radius: var(--rund-gross);
    box-shadow: var(--schatten);
}
.tor-form label { margin-top: .6rem; }
.tor-form button { margin-top: 1rem; }

/* ------------------------------------------------------------- Listen --- */

.listenkopf { display: flex; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: .9rem; }
.listenkopf h1 { margin: 0; }
.untertitel { margin: .2rem 0 0; color: var(--schrift-leise); font-size: .9rem; max-width: 52ch; }

.suchfeld { display: flex; gap: .4rem; margin-inline-start: auto; align-items: center; }
.suchfeld input { min-width: 12rem; }

.reiter { display: flex; gap: .2rem; flex-wrap: wrap; margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--linie); padding-bottom: .1rem; }
.reiter a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .75rem; text-decoration: none;
    color: var(--schrift-leise); font-weight: 500; font-size: .9rem;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.reiter a:hover { color: var(--schrift); }
.reiter a.ist-da { color: var(--akzent); border-bottom-color: var(--akzent); }
.reiter .zahl {
    font-size: .72rem; font-weight: 700; padding: .05rem .4rem;
    background: var(--flaeche-tief); border-radius: 99px; color: var(--schrift-leise);
}
.reiter a.ist-da .zahl { background: var(--akzent-hell); color: var(--akzent); }

.leerlauf {
    padding: 3rem 1rem; text-align: center; color: var(--schrift-leise);
    background: var(--flaeche); border: 1px dashed var(--linie-stark); border-radius: var(--rund-gross);
}

.vorgangsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.vorgangsliste a {
    display: grid; gap: .18rem;
    padding: .7rem .9rem;
    background: var(--flaeche);
    border: 1px solid var(--linie); border-inline-start: 3px solid var(--linie-stark);
    border-radius: var(--rund);
    text-decoration: none; color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.vorgangsliste a:hover {
    border-inline-start-color: var(--akzent);
    box-shadow: var(--schatten); transform: translateX(1px);
}
.zeile.ist-belegt a { background: var(--flaeche-tief); }

.zeile-kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.zeile-kunde { font-weight: 600; }
.zeile-zeit { color: var(--schrift-leise); font-size: .8rem; white-space: nowrap; }
.zeile-betreff { font-family: var(--serif); font-size: 1.02rem; }
.zeile-anliegen { color: var(--schrift-leise); font-size: .86rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile-fuss { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .25rem; }

.fahne {
    display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    padding: .1rem .45rem; border-radius: var(--rund); white-space: nowrap;
    background: var(--flaeche-tief); color: var(--schrift-leise);
}
.fahne.bereit { background: var(--gut-hell); color: var(--gut); }
.fahne.heikel { background: var(--warnung-hell); color: var(--warnung); }
.fahne.offen { background: var(--flaeche-tief); color: var(--schrift-leise); }
.fahne.sachlich { background: var(--akzent-hell); color: var(--akzent); }
.fahne.wer { background: #e4e8f0; color: #3b4a63; }
.fahne.fertig { background: var(--gut-hell); color: var(--gut); }

/* ---------------------------------------------------------- Werkbank --- */

.vorgangskopf {
    display: grid; grid-template-columns: auto 1fr auto; gap: .5rem 1.2rem;
    align-items: start; margin-bottom: 1.2rem;
}
.zurueck { text-decoration: none; font-size: .88rem; font-weight: 600; padding-top: .35rem; white-space: nowrap; }
.vorgangskopf h1 { font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); }
.vorgangskopf-handlungen { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.vorgangskopf-handlungen form { margin: 0; }

.werkbank { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.vorschlag { position: sticky; top: 4.2rem; display: grid; gap: .9rem; }

.karte {
    background: var(--flaeche);
    border: 1px solid var(--linie); border-radius: var(--rund-gross);
    padding: 1rem 1.1rem;
    box-shadow: var(--schatten);
}
.karte h2 { margin-top: 0; }
.karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.karte-knoepfe { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .7rem; }
.karte-leer { border-style: dashed; box-shadow: none; }
.karte form, .karte textarea { margin: 0; }
#vorschlagsform textarea {
    font-family: var(--serif); font-size: 1rem; background: #fffefb;
    min-height: 18rem;
}

.hinweiskasten {
    background: var(--warnung-hell); border-inline-start: 3px solid var(--warnung);
    padding: .5rem .7rem; border-radius: var(--rund); font-size: .86rem; margin: 0 0 .7rem;
}

.herkunft { padding: .55rem 0; border-top: 1px solid var(--linie); }
.herkunft:first-of-type { border-top: 0; }
.herkunft.fehlgeschlagen { opacity: .95; }
.herkunft-art {
    display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--schrift-leise); margin-inline-end: .4rem;
}
.herkunft strong { font-weight: 600; }
.herkunft p { margin: .2rem 0 0; }

.anhangliste { list-style: none; margin: 0; padding: 0 .9rem .6rem; display: grid; gap: .25rem; }
.anhangliste li { display: flex; gap: .5rem; align-items: baseline; font-size: .88rem; }
.anhangliste a {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .18rem .5rem; border-radius: var(--rund);
    background: var(--flaeche-tief); text-decoration: none; color: var(--schrift);
    border: 1px solid var(--linie);
}
.anhangliste a:hover { border-color: var(--akzent); color: var(--akzent); }
.anhang-zeichen { font-size: .9em; }

.anhangwahl { margin-top: .7rem; padding-top: .7rem; border-top: 1px dotted var(--linie); }
.anhangwahl input[type=file] { font: inherit; font-size: .85rem; width: 100%; }
.anhangwahl p { margin: .3rem 0 0; }

.postfach { margin-bottom: .9rem; }
.postfach.ist-still { opacity: .72; }
.postfach-handgriffe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .7rem; }
.postfach-handgriffe form { display: flex; gap: .35rem; align-items: center; margin: 0; }
.postfach-handgriffe select { width: auto; }
.postfach-mehr { margin-top: .8rem; border-top: 1px solid var(--linie); padding-top: .6rem; }
.postfach-mehr summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--schrift-leise); }
.postfach-mehr form { margin-top: .8rem; }

.karte-protokoll ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .86rem; }
.karte-protokoll li { display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }

.abschnitt {
    display: flex; align-items: center; gap: .5rem;
    font-family: var(--grotesk); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--schrift-leise); margin: 1.6rem 0 .6rem;
}
.abschnitt .zahl { background: var(--flaeche-tief); border-radius: 99px; padding: .05rem .45rem; font-size: .72rem; }

.brief {
    background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: var(--rund-gross); margin-bottom: .5rem; overflow: hidden;
}
.brief.ein { border-inline-start: 3px solid var(--akzent); }
.brief.aus { border-inline-start: 3px solid var(--linie-stark); background: var(--flaeche-tief); }
.brief summary {
    display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap;
    padding: .55rem .9rem; cursor: pointer; list-style: none;
}
.brief summary::-webkit-details-marker { display: none; }
.brief summary:hover { background: rgba(0, 0, 0, .02); }
.brief-wer { font-weight: 600; }
.brief-zeit { color: var(--schrift-leise); font-size: .82rem; margin-inline-start: auto; }
.brief-einordnung {
    margin: 0; padding: .5rem .9rem;
    background: var(--flaeche-tief); border-block: 1px solid var(--linie);
    display: flex; gap: .4rem; align-items: baseline; flex-wrap: wrap;
}
.brief-text {
    padding: .8rem .9rem;
    font-family: var(--serif); font-size: 1.02rem; line-height: 1.65;
    white-space: normal; overflow-wrap: anywhere;
}
.brief-fuss { padding: 0 .9rem .7rem; margin: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------- Bausteine --- */

.bausteinliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.baustein-kopf { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .5rem; }
.baustein-kopf h2 { margin: 0; flex: 1 1 18rem; font-size: 1.05rem; }
.neu-baustein { margin-bottom: 1.2rem; }
.neu-baustein summary { cursor: pointer; font-weight: 600; }

/* ---------------------------------------------------------- Kennzahlen -- */

.zahlenband {
    display: grid; gap: .7rem; margin-bottom: 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.zahl-karte {
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund-gross);
    padding: .9rem 1rem; display: grid; gap: .1rem; align-content: start;
}
.zahl-karte.gross { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.zahl-karte.gross .zahl-name, .zahl-karte.gross .zahl-fuss { color: rgba(255, 255, 255, .82); }
.zahl-wert { font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); line-height: 1; }
.zahl-name { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--schrift-leise); }
.zahl-fuss { font-size: .8rem; color: var(--schrift-leise); }

.spalten { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); margin-bottom: 1rem; }

.balkenband { height: 8px; background: var(--flaeche-tief); border-radius: 99px; overflow: hidden; margin: .4rem 0; }
.balken-fuellung { height: 100%; background: var(--akzent); border-radius: 99px; }

.verlaufsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .84rem; }
.verlaufsliste li { display: grid; grid-template-columns: 5.5rem 1fr 4.5rem; gap: .5rem; align-items: center; }
.verlauf-balken { background: var(--flaeche-tief); height: 7px; border-radius: 99px; overflow: hidden; }
.verlauf-balken span { display: block; height: 100%; background: var(--linie-stark); }
.verlauf-wert { text-align: right; color: var(--schrift-leise); }

/* max-width/min-width sind kein Beiwerk: Ohne sie waechst die Huelle mit der
   Tabelle mit, statt sie scrollen zu lassen - auf 375 px schob die
   Kennzahlen-Tabelle die ganze Seite 20 px zur Seite. */
.tafel-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%; min-width: 0; }
.tafel { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 18rem; }
.tafel th, .tafel td { padding: .4rem .5rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tafel th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--schrift-leise); }
.tafel tr:last-child td { border-bottom: 0; }
.tafel .rechts { text-align: right; }

.befundliste { margin: .4rem 0 0; padding-inline-start: 1.1rem; }
.befundliste li { margin-bottom: .2rem; }

.paarliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .9rem; }
.paarliste li { display: flex; justify-content: space-between; gap: 1rem;
    border-bottom: 1px dotted var(--linie); padding-bottom: .25rem; }

/* --------------------------------------------------------------- eng ---- */

@media (max-width: 68rem) {
    .werkbank { grid-template-columns: 1fr; }
    .vorschlag { position: static; }
}

@media (max-width: 46rem) {
    .kopf { gap: .6rem 1rem; padding: .5rem .8rem; }
    .wege { order: 3; width: 100%; margin-inline-start: 0; overflow-x: auto; }
    .wer { margin-inline-start: auto; }
    .buehne { padding: .9rem .8rem 2rem; }
    .suchfeld { margin-inline-start: 0; width: 100%; }
    .suchfeld input { min-width: 0; flex: 1; }
    .vorgangskopf { grid-template-columns: 1fr; }
    .vorgangskopf-handlungen { justify-content: flex-start; }
    .verlaufsliste li { grid-template-columns: 4.6rem 1fr 4rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ================================================================ Ausbau == */
/* Was mit der zweiten Runde dazugekommen ist: Zeitachse, Varianten,
   Ablegeflaeche, Spam und die Textbausteine. */

/* ---------------------------------------------------------- Kleinkram --- */

.knopf-leise {
    display: inline-block; font: inherit; font-size: .78rem; font-weight: 500;
    padding: .22rem .6rem; border-radius: var(--rund); cursor: pointer;
    background: transparent; color: var(--schrift-leise);
    border: 1px solid var(--linie); line-height: 1.4;
    transition: background .12s ease, color .12s ease;
}
.knopf-leise:hover { background: var(--flaeche-tief); color: var(--schrift); }
.knopf-leise:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.fahne.neu { background: #fde8d8; color: #9a4a10; }

.schalter { display: flex; align-items: center; gap: .45rem;
    font-weight: 500; color: var(--schrift); margin: .5rem 0; }
.schalter input { width: auto; }

.schmal { width: 9rem; }

/* --------------------------------------------------------- Zeitachse ---- */
/* Eine durchgehende Linie statt loser Kaesten: Man soll auf einen Blick
   sehen, wer wann was geschrieben hat - und die eigenen Antworten stehen
   auf der anderen Seite. */

.zeitachse { list-style: none; margin: 0; padding: 0 0 0 1.1rem;
    border-inline-start: 2px solid var(--linie); display: grid; gap: .9rem; }
.zeitachse > li { position: relative; }
.zeitachse > li::before {
    content: ''; position: absolute; inset-inline-start: -1.5rem; top: 1rem;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--linie-stark); border: 2px solid var(--papier);
}
.zeitachse > li:has(.brief.aus)::before { background: var(--gut); }
.zeitachse > li:has(.brief.ein)::before { background: var(--akzent); }

.brief.aus { background: var(--gut-hell); border-color: #bcd7c2; }
.brief.aus .brief-wer { color: var(--gut); font-weight: 600; }

/* --------------------------------------------------------- Varianten ---- */

.karte-varianten { display: grid; gap: .55rem; }
.variante {
    display: block; width: 100%; text-align: start; font: inherit; cursor: pointer;
    padding: .6rem .75rem; border-radius: var(--rund);
    border: 1px solid var(--linie-stark); background: var(--flaeche);
    transition: border-color .12s ease, background .12s ease;
}
.variante:hover { border-color: var(--akzent); background: var(--akzent-hell); }
.variante.ist-gewaehlt { border-color: var(--akzent); border-inline-start-width: 3px; }
.variante-kopf { display: flex; justify-content: space-between; gap: .6rem; margin-bottom: .25rem; }
.variante-text { display: block; font-size: .85rem; color: var(--schrift-leise); line-height: 1.5; }

/* ------------------------------------------------- Zitat und Signatur --- */

.zitatwahl { margin: .7rem 0; padding: .6rem .75rem;
    background: var(--flaeche-tief); border-radius: var(--rund); }
.zitatwahl .schalter { margin: 0 0 .3rem; }
.zitatvorschau, .signaturvorschau pre {
    font-family: var(--schreib); font-size: .78rem; line-height: 1.5;
    white-space: pre-wrap; word-break: break-word;
    max-height: 16rem; overflow-y: auto; margin: .5rem 0 0;
    color: var(--schrift-leise);
}
.signaturvorschau { margin: .6rem 0; font-size: .85rem; }
.signaturvorschau summary { cursor: pointer; color: var(--schrift-leise); }

/* ------------------------------------------------------------ Speicher --- */

.speicherkarte { margin-bottom: 1rem; }

/* Der Fuellstand kommt als Wert am <progress>, nicht als style-Attribut -
   Inline-Stile verbietet die Sicherheitsrichtlinie (style-src 'self'). */
progress.speicherbalken {
    display: block; width: 100%; height: .55rem;
    appearance: none; -webkit-appearance: none; border: 0;
    border-radius: 999px; overflow: hidden;
    background: var(--flaeche-tief);
    margin: .3rem 0 .5rem;
}
progress.speicherbalken::-webkit-progress-bar { background: var(--flaeche-tief); }
progress.speicherbalken::-webkit-progress-value { border-radius: 999px; background: #2f855a; }
progress.speicherbalken::-moz-progress-bar { border-radius: 999px; background: #2f855a; }
progress.speicherbalken.warnung::-webkit-progress-value { background: #b7791f; }
progress.speicherbalken.warnung::-moz-progress-bar { background: #b7791f; }
progress.speicherbalken.heikel::-webkit-progress-value { background: #c53030; }
progress.speicherbalken.heikel::-moz-progress-bar { background: #c53030; }

/* Das Wachstum steht ueber den Grenzwerten: Der Stand allein sagt nichts
   darueber, ob man handeln muss - die Geschwindigkeit schon. */
.speicherlage { margin: 0 0 .35rem; font-size: .95rem; }
.speicherlage strong { font-weight: 600; }

/* ------------------------------------------------------ Nachschlagewerk --- */

.fragekarte textarea { width: 100%; resize: vertical; }
.auskunfttext {
    font-family: inherit; font-size: .95rem; line-height: 1.6;
    /* overflow-wrap: anywhere, nicht word-break: Ein Produktlink ist gut
       sechzig Zeichen ohne Leerzeichen und schob die Seite auf 375 px sonst
       auf das Fuenffache der Breite. */
    white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 .8rem;
}
.auskunfttext a { overflow-wrap: anywhere; }
.belegliste { list-style: none; margin: .4rem 0 0; padding: 0; }
.belegliste > li {
    padding: .6rem .7rem; border-inline-start: 3px solid var(--linie);
    background: var(--flaeche-tief); border-radius: var(--rund); margin-bottom: .5rem;
}
.belegliste > li.ist-genutzt { border-inline-start-color: var(--akzent); }
.belegliste > li > p:last-child { margin-bottom: 0; }
/* Umbruch erlauben: Artikelnamen wie „Poli-Flex Nylon Flexfolie 4801 Weiß …"
   sind gut hundert Zeichen lang und schoben auf 375 px die ganze Seite
   seitlich hinaus. */
.beleg-kopf { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .25rem;
    flex-wrap: wrap; }
.beleg-kopf strong { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.belegliste > li { overflow-wrap: anywhere; }
.rueckmeldung { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.rueckmeldung > form { display: inline-flex; }
.richtigstellen { margin: 0; }
.richtigstellen summary { cursor: pointer; }

.absenderzeile {
    margin: 0 0 .8rem; font-size: .82rem; color: var(--schrift-leise);
    padding: .4rem .6rem; background: var(--flaeche-tief); border-radius: var(--rund);
}
.absenderzeile strong { color: var(--schrift); font-weight: 600; }

.bausteinleiste { display: flex; align-items: end; gap: .6rem; margin-bottom: .6rem; }
.bausteinleiste label { margin: 0; }
.bausteinleiste select { flex: 1; }

/* ------------------------------------------------------ Ablegeflaeche --- */

.anhangwahl { margin-top: .9rem; padding: .75rem;
    border: 1px dashed var(--linie-stark); border-radius: var(--rund);
    transition: border-color .12s ease, background .12s ease; }
.anhangwahl.ist-bereit { border-color: var(--akzent); background: var(--akzent-hell); }
.ablegehinweis { margin: 0 0 .4rem; font-size: .82rem; color: var(--schrift-leise); }
.anhangvorschau { list-style: none; margin: .5rem 0 0; padding: 0;
    display: grid; gap: .2rem; font-size: .82rem; }
.anhangvorschau li { padding: .25rem .45rem; background: var(--flaeche-tief);
    border-radius: var(--rund); }

/* ------------------------------------------------------------ Lernen ---- */

.karte-lernen { border-inline-start: 3px solid var(--gut); margin-bottom: 1.2rem; }
.karte-lernen h2 { margin-bottom: .2rem; }
.karte-lernen input[type=text], .karte-lernen textarea { margin-bottom: .6rem; }

.karte-holen { text-align: center; }

/* ------------------------------------------------------------- Listen --- */


.spalten { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
/* minmax(0, 1fr), nicht 1fr: "1fr" heisst in Wahrheit "minmax(auto, 1fr)",
   und auto ist so breit wie der laengste unteilbare Inhalt. Eine Tabelle in
   der Spalte hat die Seite so auf 375 px um 19 px nach rechts geschoben -
   sichtbar nur als Wackeln beim Wischen, deshalb lange uebersehen. */
@media (max-width: 60rem) { .spalten { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================ Runde drei == */
/* Nach Jeromes Rueckmeldung: In der Liste muss man SEHEN, worum es geht,
   und es darf dort nichts geben, was einen Vorgang ungelesen abschliesst. */

/* ------------------------------------------------------------- Reiter --- */

/* Vier Ansichten fuer den Alltag oben, der Rest darunter und leiser.
   Neun gleich grosse Reiter sind keine Gliederung. */
.nebenreiter {
    display: flex; gap: .9rem; flex-wrap: wrap;
    margin: -.9rem 0 1.2rem; padding-bottom: .3rem;
    font-size: .8rem;
}
.nebenreiter a {
    text-decoration: none; color: var(--schrift-leise);
    border-bottom: 1px solid transparent; padding-bottom: .1rem;
}
.nebenreiter a:hover { color: var(--schrift); }
.nebenreiter a.ist-da { color: var(--akzent); border-bottom-color: var(--akzent); }
.nebenreiter .zahl { color: var(--linie-stark); font-variant-numeric: tabular-nums; }
.nebenreiter a.ist-da .zahl { color: var(--akzent); }

/* -------------------------------------------------------------- Zeile --- */

.vorgangsliste { gap: .55rem; }
.vorgangsliste a { gap: .22rem; padding: .8rem .95rem; }

/* Zwei Zustaende faerben den Streifen links - mehr nicht. Sonst sieht die
   Liste aus wie ein Farbkasten und man erkennt keinen Vorrang mehr. */
.zeile.ist-faellig a { border-inline-start-color: var(--akzent); }
.zeile.ist-neu a { border-inline-start-color: #d1770f; }

.zeile-zeit { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.zeile-zaehlung { font-size: .72rem; color: var(--linie-stark); }

/* Der wichtigste Zugewinn: zwei Zeilen aus der Kundenmail. Ohne sie
   beurteilt man einen Vorgang nach dem Betreff - und der lautet bei
   Kundenpost oft „Anfrage" oder gar nichts. */
.zeile-vorschau {
    color: var(--schrift-leise); font-size: .88rem; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.zeile-vorschau.leer { font-style: italic; color: var(--linie-stark); }

.zeile-fuss { margin-top: .4rem; }

.fahne.jetzt { background: var(--akzent); color: #fff; }


/* ------------------------------------------------------- Vorgangskopf --- */

.vorgangsmarken { display: flex; gap: .35rem; flex-wrap: wrap; margin: .35rem 0 0; }

/* --------------------------------------------------------------- Wege --- */
/* Abgeben, vormerken, Dankeschoen, Spam: alles, was NICHT die Hauptsache
   ist, steht hier mit einem Satz Erklaerung statt als namenloser Knopf
   neben dem Hauptknopf. */

.karte-wege { display: grid; gap: .9rem; }
.karte-wege h3 { margin-top: 0; }
.weg { display: grid; gap: .3rem; padding-bottom: .8rem; border-bottom: 1px solid var(--linie); }
.weg:last-child { border-bottom: 0; padding-bottom: 0; }
.weg p { margin: 0; }
.weg button { justify-self: start; }
.weg-zeile { display: flex; gap: .5rem; align-items: center; }
.weg-zeile select, .weg-zeile input[type=date] { flex: 1; min-width: 0; }
.weg-zeile button { flex: none; }

input[type=date] {
    font: inherit; width: 100%;
    padding: .45rem .6rem;
    background: var(--flaeche);
    border: 1px solid var(--linie-stark); border-radius: var(--rund);
    color: var(--schrift);
}

/* Der Knopf gehoert IN die Karte, nicht darunter: Sonst sieht es aus, als
   haenge er am naechsten Vorgang. Deshalb traegt jetzt das Listenelement
   den Rahmen und der Verweis nur noch den Inhalt. */
.vorgangsliste li.zeile {
    background: var(--flaeche);
    border: 1px solid var(--linie); border-inline-start: 3px solid var(--linie-stark);
    border-radius: var(--rund); overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.vorgangsliste li.zeile:hover { border-inline-start-color: var(--akzent); box-shadow: var(--schatten); }
.vorgangsliste a {
    background: none; border: 0; border-radius: 0;
    padding: .8rem .95rem .55rem; transform: none;
}
.vorgangsliste a:hover { box-shadow: none; transform: none; }
.zeile.ist-belegt { background: var(--flaeche-tief); }
.zeile.ist-belegt a { background: none; }
.zeile.ist-faellig { border-inline-start-color: var(--akzent); }
.zeile.ist-neu { border-inline-start-color: #d1770f; }

/* Zaehler im dunklen Sammelknopf - die normale .zahl waere dort unlesbar. */
.zahl-hell {
    display: inline-block; min-width: 1.3em; padding: 0 .3em;
    border-radius: 99px; background: rgba(255, 255, 255, .25);
    font-size: .78em; font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------- Sammel-Freigabe --- */

.sammelleiste { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    margin-bottom: 1rem; }
.sammelleiste .schalter { margin: 0; }
.sammelwahl { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--akzent); }