/* Kennzahlen-Übersicht — Auswahl Lernen / Üben.
   Grundform aus cashflow-uebersicht.css (.cfu-*). Hier nur: der Punkt
   „Üben“ als Aufklapp-Knopf und die zwei kleineren Karten darunter. */

/* Knopf sieht aus wie die Link-Karten daneben. */
button.cfu-punkt {
    width: 100%;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.kzu-ueben[aria-expanded="true"] {
    background: var(--cfu-karte-hover);
    border-color: var(--cfu-karte-akzent);
}

.kzu-pfeil {
    display: inline-block;
    transition: transform 0.2s ease;
}
.kzu-ueben[aria-expanded="true"] .kzu-pfeil { transform: rotate(180deg); }

/* ── Unterkarten ───────────────────────────────────────────────── */
/* Eingerückt unter „Üben“, verbunden durch eine feine Linie links —
   sichtbar eine Ebene tiefer, ohne Kasten im Kasten. */
.kzu-unter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 0 1.6em;
    padding: 4px 0 4px 16px;
    border-left: 1px solid var(--cfu-karte-akzent);
    animation: kzu-auf 0.22s ease-out;
}
.kzu-unter[hidden] { display: none; }

@keyframes kzu-auf {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.kzu-karte {
    display: grid;
    grid-template-columns: 2.8em minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
    padding: 12px 14px;
    border: 1px solid var(--cfu-karte-linie);
    background: #FDF3E4;
    color: var(--cfu-tinte);
    text-decoration: none;
}
@media (hover: hover) {
    a.kzu-karte:hover {
        background: var(--cfu-karte);
        box-shadow: 3px 3px 0 var(--cfu-tinte);
    }
}
/* Auf Touch bliebe der Druckschatten des Vorbilds nach dem Tippen kleben. */
@media (hover: none) {
    button.cfu-punkt:hover { box-shadow: none; }
    button.cfu-punkt[aria-expanded="false"]:hover { background: var(--cfu-karte); }
}
/* Sprung über #ueben: „Üben“ selbst soll sichtbar bleiben. */
#ueben { scroll-margin-top: 140px; }
a.kzu-karte:active {
    background: var(--cfu-karte-hover);
    box-shadow: 1px 1px 0 var(--cfu-tinte);
    transform: translate(2px, 2px);
}
a.kzu-karte:focus-visible {
    outline: 2px solid var(--cfu-karte-akzent);
    outline-offset: 2px;
}
.kzu-karte-titel {
    font-size: 15.5px;
    font-weight: 500;
}
.kzu-karte .cfu-punkt-lead { font-size: 13.5px; }

/* Noch nicht verfügbar: gedämpft, gestrichelt, keine Hover-Reaktion. */
.kzu-karte.is-bald {
    border-style: dashed;
    background: transparent;
    color: var(--cfu-grau);
    cursor: default;
}
.kzu-bald {
    align-self: start;
    padding: 2px 7px;
    border: 1px solid var(--cfu-linie);
    font-family: var(--cfu-mono);
    font-size: 10.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--cfu-grau);
}

@media (max-width: 720px) {
    /* Das Vorbild blendet den Pfeil mobil aus. Bei „Üben“ ist er der
       einzige Hinweis aufs Aufklappen, deshalb bekommt er eine Spalte. */
    button.cfu-punkt { grid-template-columns: 2.2em minmax(0, 1fr) 1.4em; }
    .kzu-unter {
        grid-template-columns: minmax(0, 1fr);
        margin-left: 0.8em;
        padding-left: 10px;
    }
    .kzu-karte { grid-template-columns: 2.6em minmax(0, 1fr); padding: 12px; }
    .kzu-karte .cfu-pfeil { display: none; }
    .kzu-bald { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    .kzu-unter { animation: none; }
    .kzu-pfeil { transition: none; }
}

/* Ohne Konto gesperrt (seit 02.11.2026): wie „Kommt noch“, aber mit Hinweis. */
.cfu-punkt.is-gesperrt,
.kzu-karte.is-gesperrt {
    border-style: dashed;
    background: transparent;
    color: var(--cfu-grau);
    cursor: not-allowed;
    box-shadow: none;
}
.cfu-punkt.is-gesperrt:hover,
.kzu-karte.is-gesperrt:hover { background: transparent; transform: none; }
.kzu-gast { margin: 18px 0 0; color: var(--cfu-grau); font-size: 15px; line-height: 1.5; }
.kzu-gast a { color: var(--cfu-tinte); }
.cfu-punkt.is-gesperrt .kzu-bald { align-self: center; justify-self: end; white-space: nowrap; }

/* Lesetext für die Suche, zugeklappt (seit 02.11.2026) */
.kzu-mehr { margin: 40px 0 0; border-top: 1px solid var(--cfu-tinte); }
.kzu-mehr-kopf {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center;
    min-height: 48px; padding: 14px 0; cursor: pointer; list-style: none;
}
.kzu-mehr-kopf::-webkit-details-marker { display: none; }
.kzu-mehr-kopf::after { content: "+"; grid-row: 1 / span 2; grid-column: 2; font: 500 22px var(--cfu-mono); color: var(--cfu-grau); }
.kzu-mehr[open] > .kzu-mehr-kopf::after { content: "−"; }
.kzu-mehr-titel { font-size: 19px; font-weight: 600; }
.kzu-mehr-satz { color: var(--cfu-grau); font-size: 14px; }
.kzu-text { font-size: 17px; line-height: 1.65; }
.kzu-text h2 { margin: 6px 0 10px; padding-bottom: 10px; border-bottom: 2px solid var(--cfu-tinte); font-size: 28px; font-weight: 500; }
.kzu-text h3 { margin: 26px 0 6px; font-size: 20px; font-weight: 600; }
.kzu-text a { color: var(--cfu-karte-akzent); }
.kzu-text ol { padding-left: 22px; }
.kzu-text li { margin-bottom: 6px; }
.kzu-faq { border-top: 1px solid var(--cfu-linie); padding: 10px 0; }
.kzu-faq summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.kzu-faq p { margin: 8px 0 0; }
.kzu-quelle { margin-top: 26px; color: var(--cfu-grau); font-size: 14px; }
button.cfu-punkt.is-gesperrt:disabled { opacity: 1; }

/* Einleitung über die ganze Breite der Box darunter (02.11.2026) */
.cfu-vorspann { max-width: none; }