:root {
    color-scheme: light dark;

    --grund: #f6f7f9;
    --grund-tief: #eceef2;
    --karte: #ffffff;
    --rahmen: #dfe3e8;
    --rahmen-stark: #c6ccd4;
    --text: #14181d;
    --text-leise: #5c6672;
    --akzent: #1c5d86;
    --akzent-tief: #16496a;
    --akzent-schwach: #e8f1f7;
    --gut: #1f7a4d;
    --gut-schwach: #e7f4ed;
    --warn: #9a5b06;
    --warn-schwach: #fdf3e3;
    --warn-rahmen: #e0a944;
    --fehler: #a32020;
    --fehler-schwach: #fcecec;

    --radius: 10px;
    --radius-klein: 6px;
    --abstand: 1rem;
    --schatten: 0 1px 2px rgba(20, 24, 29, 0.06), 0 4px 12px rgba(20, 24, 29, 0.04);
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #14171b;
        --grund-tief: #0f1215;
        --karte: #1b1f24;
        --rahmen: #2b3138;
        --rahmen-stark: #3a424b;
        --text: #e8ecf1;
        --text-leise: #9aa5b1;
        --akzent: #5aa9d6;
        --akzent-tief: #7cbde3;
        --akzent-schwach: #16303f;
        --gut: #5bc38b;
        --gut-schwach: #14301f;
        --warn: #e3b062;
        --warn-schwach: #33260f;
        --warn-rahmen: #7a5c1e;
        --fehler: #ec8080;
        --fehler-schwach: #35191a;
        --schatten: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
    }
}

* {
    box-sizing: border-box;
}

/* Das Attribut hidden wirkt ueber display:none aus dem Browser-Stylesheet; jede eigene
   display-Regel schlaegt es. Statt die betroffenen Klassen einzeln nachzutragen -- und die
   naechste zu vergessen -- gilt die Regel hier fuer alles: was hidden traegt, ist weg. */
[hidden] {
    display: none !important;
}

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

h1, h2, h3 {
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.375rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }

/* ---------- Marke ---------- */

.marke {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.marke-zeichen {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(140deg, var(--akzent), var(--akzent-tief));
    border-radius: var(--radius-klein);
    flex: none;
}

.marke-unterzeile {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-leise);
}

.marke-klein .marke-zeichen {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.8125rem;
}

.marke-name {
    font-weight: 600;
}

/* ---------- Anmeldeseite ---------- */

.anmeldeseite {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--abstand);
    background:
        radial-gradient(1100px 480px at 15% -10%, var(--akzent-schwach), transparent 70%),
        var(--grund);
}

/* Raster statt Block: der Abstand kommt aus der Lücke, damit jedes Element — Marke, Knopf,
   Hinweis, Formular — gleichmäßig steht und nichts aneinanderklebt. */
.anmeldekarte {
    display: grid;
    gap: 1rem;
    align-content: start;
    width: 100%;
    max-width: 25rem;
    padding: 1.75rem;
    background: var(--karte);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

.anmeldekarte > .marke {
    margin-bottom: 0.5rem;
}

.anmeldekarte form {
    display: grid;
    gap: 0.875rem;
    margin: 0;
}

/* In der Anmeldekarte tragen die Lücken den Abstand; eigene Ränder stören dabei. */
.anmeldekarte > p,
.anmeldekarte form > p {
    margin: 0;
}

.anmeldekarte .trennzeile {
    margin: 0;
}

/* ---------- Kopfleiste ---------- */

.kopfleiste {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand);
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: var(--karte);
    border-bottom: 1px solid var(--rahmen);
}

.reiter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

/* Benennt die Gruppe der folgenden Bereiche: was dem System gehört, was dem Nutzer selbst. */
.reiter-gruppe {
    flex: none;
    padding: 0 0.375rem 0 0.75rem;
    border-left: 1px solid var(--rahmen-stark);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-leise);
    white-space: nowrap;
}

/* Die erste Gruppe braucht keinen Strich links. */
.reiter-gruppe:first-child {
    padding-left: 0;
    border-left: none;
}

.reiter button {
    padding: 0.4375rem 0.875rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--text-leise);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-klein);
    cursor: pointer;
}

.reiter button:hover {
    color: var(--text);
    background: var(--grund-tief);
}

.reiter button[aria-current='true'] {
    color: var(--akzent);
    background: var(--akzent-schwach);
    font-weight: 600;
}

/* Eine Gruppe als Aufklappmenue: die Trainingsgruppe waechst mit jedem Agenten und wuerde die
   Leiste sonst sprengen. */
.reiter-menue {
    position: relative;
    flex: none;
}

.reiter-menue > summary {
    padding: 0.4375rem 0.875rem;
    font-size: 0.875rem;
    color: var(--text-leise);
    border: 1px solid var(--rahmen-stark);
    border-radius: var(--radius-klein);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.reiter-menue > summary::-webkit-details-marker {
    display: none;
}

.reiter-menue > summary::after {
    content: ' \25BE';
}

.reiter-menue > summary:hover {
    color: var(--text);
    background: var(--grund-tief);
}

.reiter-menue > summary.aktiv {
    color: var(--akzent);
    background: var(--akzent-schwach);
    font-weight: 600;
}

.reiter-menue-liste {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.25rem);
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 13rem;
    /* Auf einem Telefon ist die Leiste schmaler als das Menue breit waere. */
    max-width: calc(100vw - 1.75rem);
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.375rem;
    background: var(--karte);
    border: 1px solid var(--rahmen-stark);
    border-radius: var(--radius-klein);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}

.reiter-menue-liste button {
    width: 100%;
    text-align: left;
}

/* Der Platz eines Agenten innerhalb seines Konzepts, nach dem Ertrag des Trainingsfensters. */
.platz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.4375rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-leise);
    background: var(--rahmen);
    border-radius: 50%;
}

.platz-erster {
    color: var(--karte);
    background: var(--gut);
}

/* Zweite Ebene: die Agenten eines Konzepts klappen für sich auf. */
.reiter-untermenue > summary {
    padding: 0.4375rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-schwach);
    cursor: pointer;
    border-radius: var(--radius-klein);
    list-style: none;
}

.reiter-untermenue > summary::-webkit-details-marker {
    display: none;
}

/* Das Dreieck zeigt, dass hier noch etwas kommt, und dreht sich beim Aufklappen. */
.reiter-untermenue > summary::before {
    display: inline-block;
    width: 0.875rem;
    content: '▸';
}

.reiter-untermenue[open] > summary::before {
    content: '▾';
}

.reiter-untermenue > summary:hover {
    background: var(--akzent-schwach);
}

.reiter-untermenue-liste {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding-left: 0.875rem;
}

/* Das Abmelden steht unter einem Strich: es ist kein Bereichswechsel. */
.reiter-menue-abmelden {
    padding: 0.5rem 0.875rem 0.4375rem;
    margin-top: 0.25rem;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    color: var(--fehler);
    background: transparent;
    border: 1px solid transparent;
    border-top: 1px solid var(--rahmen);
    border-radius: var(--radius-klein);
    cursor: pointer;
}

.reiter-menue-abmelden:hover {
    color: #fff;
    background: var(--fehler);
}

/* ---------- Aufbau ---------- */

main {
    max-width: 78rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 4rem;
}

.bereich {
    display: none;
    flex-direction: column;
    gap: 1.125rem;
}

.bereich.aktiv {
    display: flex;
}

.bereichskopf {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
}

.stand {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-leise);
    font-variant-numeric: tabular-nums;
}

.karte {
    padding: 1.125rem 1.25rem;
    background: var(--karte);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

.kartenkopf {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.karte > h3 {
    margin-bottom: 0.75rem;
}

.beschreibung {
    margin: 0 0 0.875rem;
    font-size: 0.875rem;
    color: var(--text-leise);
}

.beschreibung:last-child {
    margin-bottom: 0;
}

/* ---------- Kacheln ---------- */

.kachelreihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.875rem;
}

.kachel {
    padding: 1rem 1.125rem;
    background: var(--karte);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

.kachel-bezeichnung {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-leise);
}

.kachel-wert {
    display: block;
    margin-top: 0.375rem;
    font-size: 1.375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.kachel-erklaerung {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-leise);
}

.kachel-hinweis {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-leise);
}

/* Ein Horizont, den der bisherige Verlauf nicht traegt: die Kachel bleibt stehen, damit die Reihe
   vollstaendig ist, nennt aber keine Zahl. */
.kachel-ohne-grundlage {
    opacity: 0.5;
}

.kachel-ohne-grundlage .kachel-wert {
    color: var(--text-leise);
}

.kachel-wert.gut { color: var(--gut); }
.kachel-wert.schlecht { color: var(--fehler); }

/* ---------- Topfliste in einer Tabellenzelle ---------- */

.topfliste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    /* Ohne Mindestbreite 0 sprengt der laengste Topfname die Spalte. */
    min-width: 0;
}

.topfmarke {
    padding: 0.125rem 0.5rem;
    font-size: 0.8125rem;
    background: var(--grund-tief);
    border: 1px solid var(--rahmen);
    border-radius: 999px;
    white-space: nowrap;
}

/* ---------- Hinweise ---------- */

.hinweis-warnung {
    margin: 0;
    padding: 0.875rem 1.125rem;
    font-size: 0.875rem;
    color: var(--warn);
    background: var(--warn-schwach);
    border: 1px solid var(--warn-rahmen);
    border-left-width: 3px;
    border-radius: var(--radius-klein);
}

.fussnote {
    margin: 0 0 0.875rem;
    font-size: 0.8125rem;
    color: var(--text-leise);
}

.fussnote-unten {
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rahmen);
    font-size: 0.8125rem;
    color: var(--text-leise);
}

.bandwarnung {
    margin: 0;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    color: #fff;
    background: var(--fehler);
}

.meldung {
    margin: 0.875rem 0 0;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    border-radius: var(--radius-klein);
    background: var(--grund-tief);
}

.meldung-fehler {
    color: var(--fehler);
    background: var(--fehler-schwach);
}

.meldung-warnung {
    color: var(--warn);
    background: var(--warn-schwach);
}

.meldung-gut {
    color: var(--gut);
    background: var(--gut-schwach);
}

/* ---------- Formulare ---------- */

/* min-width: 0 ist nötig, weil ein Rasterelement sonst nicht unter seine Mindestbreite
   schrumpft — ein Datumsfeld bringt vom Browser eine eigene mit und ragt sonst hinaus. */
.feld {
    display: grid;
    gap: 0.3125rem;
    min-width: 0;
}

.feld-breit {
    grid-column: 1 / -1;
}

label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-leise);
}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='search'],
input[type='date'],
input[type='number'],
textarea,
select {
    width: 100%;
    /* Rechts mehr Platz: Passwortverwaltungen setzen dort ihr Symbol ins Feld. */
    padding: 0.5rem 2rem 0.5rem 0.625rem;
    font: inherit;
    color: var(--text);
    background: var(--karte);
    border: 1px solid var(--rahmen-stark);
    border-radius: var(--radius-klein);
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

/* Auf einem Berührungsgerät zoomt der Browser beim Antippen eines Feldes hinein, dessen Schrift
   unter 16 px liegt — und bleibt danach zugezoomt. Die Grundschrift steht bei 15 px, die Felder
   erben sie; hier bekommen sie das Sechzehntel mehr, das den Zoom verhindert. */
@media (pointer: coarse) {
    input[type='text'],
    input[type='password'],
    input[type='email'],
    input[type='search'],
    input[type='date'],
    input[type='number'],
    textarea,
    select {
        font-size: 1rem;
    }
}

textarea {
    padding-right: 0.625rem;
    resize: vertical;
    min-height: 6rem;
}

select {
    padding-right: 0.625rem;
}

input[type='date'] {
    /* Ein Datumsfeld traegt auf iOS eine eigene Mindestbreite und ignoriert dabei width:100%;
       auf einem schmalen Bildschirm schiebt es sich damit ueber den rechten Rand. Der rechte
       Innenabstand ist hier ausserdem entbehrlich -- eine Passwortverwaltung setzt in ein
       Datumsfeld kein Symbol. */
    appearance: none;
    -webkit-appearance: none;
    padding-right: 0.625rem;
}

/* Die Selbstausfuellung des Browsers soll die eigenen Farben nicht ueberschreiben. */
input:-webkit-autofill,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    box-shadow: inset 0 0 0 2rem var(--karte);
}

input:focus-visible,
select:focus-visible,
button:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 1px;
}

.betragsfeld {
    display: flex;
    align-items: stretch;
}

.betragsfeld input {
    border-radius: var(--radius-klein) 0 0 var(--radius-klein);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.einheit {
    display: grid;
    place-items: center;
    padding: 0 0.625rem;
    font-size: 0.875rem;
    color: var(--text-leise);
    background: var(--grund-tief);
    border: 1px solid var(--rahmen-stark);
    border-left: none;
    border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}

.formularreihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.875rem;
    align-items: end;
}

.suchzeile {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.suchzeile input {
    flex: 1 1 18rem;
}

.ankreuzfeld {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text);
    font-weight: 400;
    cursor: pointer;
}

.ankreuzfeld input {
    width: 1.0625rem;
    height: 1.0625rem;
    accent-color: var(--akzent);
    cursor: pointer;
}

/* Kein eigener Rand: der Hinweis stand sonst mit negativem Abstand im Feld darüber. Den
   Abstand tragen die Lücken der umgebenden Raster. */
.feldhinweis {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-leise);
}

/* Ein Formular in einer Spalte, wenn die Felder nicht nebeneinander gehören. */
.formularspalte {
    display: grid;
    gap: 0.875rem;
}

/* ---------- Knöpfe ---------- */

.knopf {
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: var(--radius-klein);
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    white-space: nowrap;
}

/* Fünf Rollen: haupt fuehrt die Maske, erfolg legt an, gefahr entfernt oder bucht
   unumkehrbar, warnung greift nach aussen, zweit steht daneben. */
.knopf-haupt {
    color: #fff;
    background: var(--akzent);
}

.knopf-haupt:hover { background: var(--akzent-tief); }

.knopf-erfolg {
    color: #fff;
    background: var(--gut);
}

.knopf-erfolg:hover { background: #175c3a; }

.knopf-warnung {
    color: #fff;
    background: var(--warn);
}

.knopf-warnung:hover { background: #7c4805; }

.knopf-gefahr {
    color: #fff;
    background: var(--fehler);
}

.knopf-gefahr:hover { background: #7f1a1a; }

.knopf-zweit,
.knopf-leise {
    color: var(--text);
    background: var(--karte);
    border-color: var(--rahmen-stark);
}

.knopf-zweit:hover,
.knopf-leise:hover { background: var(--grund-tief); }

.knopf-klein {
    min-height: 2.125rem;
    padding: 0.3125rem 0.625rem;
    font-size: 0.8125rem;
}

.knopf-breit {
    display: block;
    width: 100%;
}

/* Entfernen-Schaltflaeche: Symbol statt Wort, Beschriftung fuer Vorleseprogramme im
   aria-label. */
.knopf-symbol {
    min-height: 2.125rem;
    width: 2.125rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--fehler);
    background: var(--karte);
    border-color: var(--rahmen-stark);
}

.knopf-symbol:hover {
    color: #fff;
    background: var(--fehler);
    border-color: var(--fehler);
}

.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

/* Der Benutzername entsteht in der Zeile der Anfrage. Ein Feld mit voller Breite draengte die
   Knoepfe daneben aus der Zeile. */
.anfrage-benutzername {
    flex: 0 1 12rem;
    width: auto;
}

button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Trennzeile zwischen zwei Anmeldewegen. */
.trennzeile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    font-size: 0.8125rem;
    color: var(--text-leise);
}

.trennzeile::before,
.trennzeile::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--rahmen);
}

/* Prozentwerte in Tabellen und Listen: das Vorzeichen traegt die Farbe. */
.veraenderung {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.veraenderung.gut { color: var(--gut); }
.veraenderung.schlecht { color: var(--fehler); }

.veraenderungsreihe {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--text-leise);
}

/* Ertrag eines Topfes: Bezeichnung links, Betrag und Prozent rechts. */
.ertragsliste {
    display: grid;
    gap: 0.375rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--rahmen);
}

.ertragszeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.ertragsname {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-leise);
}

.ertragswerte {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    font-variant-numeric: tabular-nums;
}

/* ---------- Tabellen ---------- */

.tabellenrahmen {
    overflow-x: auto;
    border: 1px solid var(--rahmen);
    border-radius: var(--radius-klein);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}

th, td {
    padding: 0.5625rem 0.75rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--rahmen);
}

thead th {
    position: sticky;
    top: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-leise);
    background: var(--grund-tief);
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: var(--grund-tief);
}

/* Überschrift, die eine Gruppe von Einstellungen einleitet. */
.einstellungsgruppe {
    margin: 1.25rem 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-leise);
}

.einstellungsgruppe:first-child {
    margin-top: 0.5rem;
}

/* Der Nachladeknopf unter einer Liste. */
.nachladen {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

.nachladen:empty {
    margin-top: 0;
}

tfoot td {
    font-weight: 600;
    background: var(--grund-tief);
    border-top: 2px solid var(--rahmen-stark);
    border-bottom: none;
}

.zahl {
    text-align: right;
}

/* Die Vorschau der Rückvergütung stapelt Werte, Tabelle, Warnung und Freigabe; jeder Teil
   braucht Luft zum nächsten. */
.flushvorschau {
    display: grid;
    gap: 1.25rem;
    /* Die Freigabe soll nicht über die ganze Breite laufen. */
    justify-items: start;
}

.flushvorschau > .tabellenrahmen,
.flushvorschau > .hinweis-warnung {
    justify-self: stretch;
}

/* Die Bankverbindung, auf die ein Antrag zeigt. */
.hinweis-bank {
    display: grid;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    margin-top: 0.75rem;
    background: var(--akzent-schwach);
    border-radius: var(--radius-klein);
}

/* Der Empfaenger steht ueber der IBAN, in Fliesstext: er wird gelesen, nicht Zeichen fuer
   Zeichen verglichen. */
.kontoinhaber {
    font-size: 1rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.iban {
    font-size: 1.125rem;
    font-weight: 600;
    /* Eine IBAN wird zeichenweise verglichen; gleiche Zeichenbreiten helfen dabei. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

/* Ein Betrag im Kontoauszug zeigt seine Richtung: Zufluss grün, Abfluss rot. */
.betrag-zu {
    color: var(--gut);
}

.betrag-ab {
    color: var(--fehler);
}

/* Eine Bemerkung nimmt die Breite ihrer Spalte und bricht auch mitten im Wort, damit ein langes
   Wort die Tabelle nicht aufspreizt. pre-wrap haelt die Zeilenumbrueche, die aus den Bemerkungen
   der Kontoauszuege stammen. */
.bemerkung {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.leer {
    padding: 1.25rem;
    font-size: 0.875rem;
    color: var(--text-leise);
    text-align: center;
}

/* ---------- Wertelisten ---------- */

/* Die Wertspalte ist so breit wie ihr breitester Wert, nicht so breit wie die Karte: sonst
   stünde der Betrag am rechten Rand, weit weg von seiner Bezeichnung. */
.werteliste {
    display: grid;
    grid-template-columns: minmax(11rem, max-content) max-content;
    gap: 0.375rem 1.25rem;
    margin: 0;
    justify-content: start;
}

.werteliste dt {
    font-size: 0.875rem;
    color: var(--text-leise);
}

.werteliste dd.gut { color: var(--gut); }
.werteliste dd.schlecht { color: var(--fehler); }

/* Ein Betrag steht rechts: so stehen die Stellen der Werte untereinander und lassen sich
   vergleichen. Ein langer Wert bricht, statt die Karte zu sprengen. */
.werteliste dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------- Marken und Zustände ---------- */

/* Als Flex-Element mittig statt oben: ein inline-block streckt sich in einer Flex-Zeile und
   sein Text bliebe am oberen Rand hängen. */
.marker {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    background: var(--grund-tief);
    color: var(--text-leise);
}

/* In einer Flex-Zeile mittig statt gestreckt: ein gestreckter Marker haelt seinen Text oben. */
.knopfreihe > .marker,
.kartenkopf > .marker,
.wertpapier-rechts > .marker {
    align-self: center;
}

.marker-gut { color: var(--gut); background: var(--gut-schwach); }
.marker-warn { color: var(--warn); background: var(--warn-schwach); }
.marker-fehler { color: var(--fehler); background: var(--fehler-schwach); }
.marker-akzent { color: var(--akzent); background: var(--akzent-schwach); }

/* ---------- Topfblöcke und Nachrichten ---------- */

.topfblock {
    padding: 1.125rem 1.25rem;
    background: var(--karte);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}

.topfblock + .topfblock {
    margin-top: 0.875rem;
}

/* Summenkacheln, Fortschreibung und erster Topf stehen übereinander und brauchen Abstand. */
.kachelreihe + .topfblock,
.kachelreihe + .karte,
.karte + .topfblock {
    margin-top: 1.5rem;
}

/* Saldo links auf einem Drittel, Verlauf rechts auf zwei Dritteln. */
.topfblock-oben {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.75rem;
    align-items: stretch;
    margin-bottom: 0.75rem;
}

/* Der Saldo ist die Zahl, die gesucht wird: eigene Box, gross, vor allen anderen. */
.topfsaldo {
    padding: 0.875rem 1rem;
    background: var(--akzent-schwach);
    border-radius: var(--radius-klein);
}

/* Der Verlauf des Topfes: gebuchter Saldo als Flaeche, der vorlaeufige Ertrag gestrichelt daran. */
.topfplot {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    background: var(--grund-tief);
    border-radius: var(--radius-klein);
}

.topfplot-kopf {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.6875rem;
    color: var(--text-leise);
}

.topfplot-titel {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.topfplot-bild {
    width: 100%;
    height: auto;
    overflow: visible;
}

.topfplot-flaeche {
    fill: var(--akzent);
    fill-opacity: 0.14;
    stroke: none;
}

.topfplot-linie {
    fill: none;
    stroke: var(--akzent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.topfplot-vorlaeufig {
    stroke: var(--akzent);
    stroke-width: 2;
    stroke-dasharray: 5 4;
}

.topfplot-null {
    stroke: var(--rahmen-stark);
    stroke-width: 1;
}

.topfplot-punkt.gebucht { fill: var(--akzent); }
.topfplot-punkt.gut { fill: var(--gut); }
.topfplot-punkt.schlecht { fill: var(--fehler); }

/* Die Wertachse steht rechts im Bild; links ginge die Breite des Verlaufs verloren. */
.plot-achse {
    fill: var(--text-leise);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.plot-gitter {
    stroke: var(--rahmen);
    stroke-width: 0.5;
    stroke-dasharray: 2 3;
}

/*
 * Der Platzhalter verschwindet, sobald das Feld den Fokus hat. Der Browser laesst ihn sonst
 * stehen, bis das erste Zeichen faellt — wer hineinklickt, tippt dann gegen einen Beispielwert an.
 */
input:focus::placeholder,
textarea:focus::placeholder {
    color: transparent;
}

/* Fliesstext statt Zahlen: laengere Zeilen brauchen mehr Durchschuss. Breite und Zeilen folgen
   der Karte, wie auf jeder anderen Inhaltsseite. */
.hilfetext {
    line-height: 1.65;
}

.hilfetext h3 {
    margin: 1.75rem 0 0.5rem;
}

.hilfetext h3:first-child {
    margin-top: 0;
}

.hilfetext p,
.hilfetext li {
    margin: 0 0 0.75rem;
    color: var(--text);
}

.hilfetext ul {
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.zwischenueberschrift {
    margin: 1.25rem 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Die Vorschau steht zwischen Namen und Zahlen und traegt die Richtung der letzten Stunden. */
.minivorschau {
    display: flex;
    align-items: center;
    /* Luft zu Namen und Zahlen: die Linie soll nicht an der Nachbarspalte kleben. */
    margin: 0 1.75rem;
    padding: 0;
    background: none;
    border: none;
}

button.minivorschau {
    cursor: pointer;
    border-radius: var(--radius-klein);
}

button.minivorschau:hover {
    background: var(--grund-tief);
}

.minivorschau-bild {
    width: 7.5rem;
    height: 2rem;
    overflow: visible;
}

.minivorschau-linie {
    fill: none;
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.minivorschau-bild.gut .minivorschau-linie { stroke: var(--gut); }
.minivorschau-bild.schlecht .minivorschau-linie { stroke: var(--fehler); }

.plot-legende {
    margin: 0.25rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--text-leise);
}

.topfsaldo-bezeichnung {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-leise);
}

.topfsaldo-wert {
    display: block;
    margin-top: 0.125rem;
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.topfsaldo-erklaerung {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-leise);
}

/* Jede Zahl im Topf tragt einen Satz, der sie erklaert: ein Titel-Tooltip bliebe auf dem
   Telefon unsichtbar. */
.dreizahl .feldhinweis {
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    line-height: 1.35;
}

.dreizahl strong.gut { color: var(--gut); }
.dreizahl strong.schlecht { color: var(--fehler); }

/* Titel und Marke eines Topfes stehen nebeneinander. */
.topfblock-titel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Überschrift, die eine Gruppe von Topfblöcken einleitet. */
.zwischentitel {
    margin: 1.75rem 0 0.25rem;
}

.topfblock-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}

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

.dreizahl > div {
    padding: 0.75rem 0.875rem;
    background: var(--grund-tief);
    border-radius: var(--radius-klein);
}

.dreizahl span {
    display: block;
    font-size: 0.75rem;
    color: var(--text-leise);
}

.dreizahl strong {
    display: block;
    margin-top: 0.1875rem;
    font-size: 1.0625rem;
    font-variant-numeric: tabular-nums;
}

.wertpapier {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rahmen);
}

.wertpapier:last-child {
    border-bottom: none;
}

.wertpapier-name {
    font-weight: 500;
}

.wertpapier-isin {
    font-size: 0.8125rem;
    color: var(--text-leise);
    font-variant-numeric: tabular-nums;
}

.wertpapier-rechts {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

/* Zahlen stehen rechts, damit sie ueber die Zeilen hinweg untereinander liegen. */
.wertpapier-zahlen {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
    margin-left: auto;
}

.nachricht {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rahmen);
}

.nachricht:last-child {
    border-bottom: none;
}

.nachricht-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
    align-items: baseline;
}

.nachricht-titel {
    font-weight: 500;
}

.nachricht-quelle {
    font-size: 0.8125rem;
    color: var(--text-leise);
}

.nachricht-text {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    color: var(--text-leise);
}

/* ---------- Überlagerung ---------- */

.ueberlagerung {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: start center;
    padding: 2rem 1rem;
    overflow-y: auto;
    background: rgba(10, 13, 16, 0.55);
}

.ueberlagerung-karte {
    width: 100%;
    max-width: 44rem;
    padding: 1.25rem 1.375rem;
    background: var(--karte);
    border: 1px solid var(--rahmen);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

/* Eine Liste von Wertpapieren, eines je Zeile: ein Dutzend ISINs nebeneinander sprengt die Zeile,
   und in der Werteliste mit `max-content` bricht nichts um. */
.isinblock {
    margin-top: 1rem;
}

.isinzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--rahmen);
}

.isinzeile:last-child {
    border-bottom: none;
}

.isinname {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Die Summenzeile hebt sich ab, damit sie nicht als weitere Zeile gelesen wird. */
tfoot th,
tfoot td {
    border-top: 2px solid var(--rahmen-stark);
    font-weight: 600;
}

/* Ein angehaltenes Wertpapier: Kennung, Grund, Zeitpunkt und der Knopf zum Loesen. */
.haltzeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rahmen);
}

.haltzeile:last-child {
    border-bottom: none;
}

.haltzeile .beschreibung {
    flex: 1 1 12rem;
}

/* Ein Ergebnis in einer Tabelle: Gewinn und Verlust auch an der Farbe erkennbar. */
td.gut,
tfoot td.gut { color: var(--gut); }

td.schlecht,
tfoot td.schlecht { color: var(--fehler); }

/* Ein Name in einer Tabelle, der auf eine Unterseite fuehrt. */
.knopf-verweis {
    padding: 0;
    min-height: 0;
    font: inherit;
    font-weight: 600;
    color: var(--akzent);
    background: none;
    border: none;
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}

.knopf-verweis:hover {
    text-decoration: none;
}

/* Ein Textknopf sieht aus wie ein Verweis und passt in eine Tabellenzelle, wo ein Knopf die
   Zeile auseinanderzoege. */
.textknopf {
    padding: 0;
    font: inherit;
    color: var(--akzent);
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
}

.textknopf:hover {
    text-decoration: underline;
}

/* Bezugslinien des Kursdiagramms: an ihnen entscheidet die Heuristik. */
.kursplot-mittel {
    stroke: var(--text-leise);
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.kursplot-einstieg {
    stroke: var(--gut);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}

.kursblock .topfplot-bild {
    width: 100%;
    margin-bottom: var(--abstand);
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 40rem) {
    .kopfleiste {
        padding: 0.625rem 0.875rem;
    }

    /* Eine Zeile, die waagerecht scrollt: umgebrochen nimmt die Leiste auf einem Telefon drei
       Zeilen und damit den halben Inhalt. */
    .reiter {
        order: 3;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        /* Die Rollleiste selbst braucht hier keinen Platz; gescrollt wird mit dem Finger. */
        scrollbar-width: none;
    }

    .reiter::-webkit-scrollbar {
        display: none;
    }

    /* Nichts schrumpfen lassen: sonst quetscht die Leiste die Beschriftungen, statt zu scrollen. */
    .reiter > * {
        flex: none;
    }

    /* Absolut gesetzt schnitte der scrollende Vorfahr das Menue ab -- genau deshalb brach die
       Leiste bisher um. Fest positioniert haengt es unter der Leiste, ueber die ganze Breite, und
       kein overflow beschneidet es. Ohne top behaelt es seine Stelle unter der Schaltflaeche. */
    .reiter-menue-liste {
        position: fixed;
        /* top zurueck auf auto: die Grundregel setzt es auf 100 % der Elternhoehe, was fest
           positioniert die ganze Bildschirmhoehe waere. Mit auto bleibt das Menue an seiner
           Stelle unter der Schaltflaeche. */
        top: auto;
        left: 0.75rem;
        right: 0.75rem;
        max-width: none;
    }

    main {
        padding: 1rem 0.875rem 3rem;
    }

    /* Saldo und Verlauf untereinander, jeder ueber die volle Breite: nebeneinander bleibt fuer
       den Verlauf zu wenig Platz, um eine Linie zu erkennen. */
    .topfblock-oben {
        grid-template-columns: 1fr;
    }

    .karte {
        padding: 1rem;
    }

    .werteliste {
        grid-template-columns: 1fr;
        gap: 0.125rem;
    }

    .werteliste dd {
        margin-bottom: 0.5rem;
    }

    /* Ein Wertpapier steht untereinander: Name, Zahlen, Knöpfe. Nebeneinander wird jede
       Spalte zu schmal und die Zahlen brechen mitten im Wert. */
    .wertpapier {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .wertpapier-zahlen {
        align-items: flex-start;
        margin-left: 0;
    }

    /* Tag, Woche und Monat untereinander statt in einer Zeile. */
    .veraenderungsreihe {
        flex-direction: column;
        justify-content: flex-start;
        gap: 0.125rem;
    }

    .wertpapier-rechts {
        flex-wrap: wrap;
    }

    /* Ein Formular auf kleinem Schirm: eine Spalte, damit kein Feld hinausragt. */
    .formularreihe {
        grid-template-columns: 1fr;
    }

    .suchzeile input {
        flex-basis: 100%;
    }
}