/* Cashflow-Übersicht — Auswahl zwischen Erklärung und Übung.
   Hauptbuch & Beleg; das Menü übernimmt Form und Farben des
   Aufgabengenerator-Menüs (css/aufgabengenerator.css, .ag-menue). */

.cfu-body {
    --cfu-tinte:        #1A1A17;
    --cfu-grau:         #5F5848;
    --cfu-linie:        #DAD3C2;
    --cfu-rot:          #B0492C;
    --cfu-karte:        #FBE7CE;
    --cfu-karte-hover:  #F5D9B4;
    --cfu-karte-druck:  #EFCC9C;
    --cfu-karte-linie:  #E0C49B;
    --cfu-karte-akzent: #93381C;
    --cfu-serif: 'Lora', 'Source Serif 4', Georgia, serif;
    --cfu-mono:  'JetBrains Mono', 'IBM Plex Mono', monospace;

    min-height: 100vh;
    margin: 0;
    background-color: #F4F1E8;
    background-image:
        linear-gradient(to right, rgba(120,110,85,0.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(120,110,85,0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    color: var(--cfu-tinte);
    font-family: var(--cfu-serif);
}

.cfu-seite {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 24px 72px;
}

/* ── Brotkrume ─────────────────────────────────────────────────── */
.cfu-krume ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    font-family: var(--cfu-mono);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--cfu-grau);
}
.cfu-krume li + li::before {
    content: "/";
    margin-right: 6px;
}
.cfu-krume [aria-current] { color: var(--cfu-tinte); }

/* ── Kopf ──────────────────────────────────────────────────────── */
.cfu-kicker {
    margin: 0 0 10px;
    font-family: var(--cfu-mono);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cfu-rot);
}
.cfu-titel {
    margin: 0;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--cfu-tinte);
    font-family: var(--cfu-serif);
    font-size: clamp(34px, 5vw, 48px);
    font-weight: 500;
    line-height: 1.1;
    text-align: left;
    color: var(--cfu-tinte);
}
.cfu-vorspann {
    max-width: 62ch;
    margin: 18px 0 36px;
    font-size: 18px;
    line-height: 1.65;
    color: #3D3A33;
}

/* ── Menüfenster ───────────────────────────────────────────────── */
.cfu-fenster {
    border: 2px solid var(--cfu-tinte);
    background: #FCFBF7;
}
.cfu-fenster-kopf {
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--cfu-tinte);
    background: #F4F1E8;
}
.cfu-fenster-marke {
    display: inline-block;
    margin: 0 0 8px;
    padding: 2px 7px;
    border: 1px solid var(--cfu-linie);
    font-family: var(--cfu-mono);
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--cfu-grau);
}
.cfu-fenster-kopf h2 {
    margin: 0;
    font-family: var(--cfu-serif);
    font-size: 21px;
    font-weight: 500;
}

.cfu-menue {
    display: grid;
    gap: 10px;
    padding: 18px;
}
.cfu-punkt {
    display: grid;
    grid-template-columns: 2.6em minmax(0, 1fr) 1.4em;
    gap: 14px;
    align-items: baseline;
    padding: 16px 18px;
    border: 1px solid var(--cfu-karte-linie);
    background: var(--cfu-karte);
    color: var(--cfu-tinte);
    text-decoration: none;
}
/* Der harte Druckschatten ist die einzige Schattenform der Designsprache:
   Er hebt die Karte beim Überfahren an und setzt sie beim Klick ab. */
.cfu-punkt:hover {
    background: var(--cfu-karte-hover);
    box-shadow: 3px 3px 0 var(--cfu-tinte);
}
.cfu-punkt:active {
    background: var(--cfu-karte-druck);
    box-shadow: 1px 1px 0 var(--cfu-tinte);
    transform: translate(2px, 2px);
}
.cfu-punkt:focus-visible {
    outline: 2px solid var(--cfu-karte-akzent);
    outline-offset: 2px;
}
.cfu-nr {
    font-family: var(--cfu-mono);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--cfu-grau);
}
.cfu-text { display: grid; gap: 3px; min-width: 0; }
.cfu-punkt-titel {
    font-size: 17px;
    font-weight: 500;
}
.cfu-punkt-lead {
    font-size: 14px;
    line-height: 1.55;
    color: var(--cfu-grau);
}
.cfu-pfeil {
    font-family: var(--cfu-mono);
    font-size: 15px;
    text-align: right;
    color: var(--cfu-karte-akzent);
}

/* ── Querverweis ───────────────────────────────────────────────── */
.cfu-siehe {
    margin: 28px 0 0;
    font-size: 15px;
    color: var(--cfu-grau);
}
.cfu-siehe a {
    color: var(--cfu-tinte);
    border-bottom: 1px solid var(--cfu-tinte);
    text-decoration: none;
}
.cfu-siehe a:hover {
    color: var(--cfu-rot);
    border-bottom-color: var(--cfu-rot);
}

@media (max-width: 720px) {
    .cfu-seite { padding: 28px 16px 56px; }
    .cfu-menue { padding: 12px; }
    .cfu-punkt {
        grid-template-columns: 2.2em minmax(0, 1fr);
        gap: 10px;
        padding: 14px;
    }
    .cfu-pfeil { display: none; }
}