/*
 * Arbeitsblätter — Designsprache „Hauptbuch & Beleg".
 *
 * Eigenes Präfix abl-. Vermieden werden im Namen hero, kicker, card, chip,
 * btn, back und die übrigen Wörter, die styles.css über Substring-Selektoren
 * ungefragt einfängt.
 *
 * Die Seite trägt `dashboard-hb-body` und lädt css/dashboard-hb.css — daher
 * kommen der Papiergrund mit dem leisen Raster, die Schriften und die
 * --hb-*-Token. Die Rückfallwerte hinter jedem var() sind der Unterschied
 * zwischen „sieht anders aus" und „unlesbar", falls die Hülle einmal fehlt.
 *
 * ZWEI TÖNE NACHGEDUNKELT, wie auf expert.html: --hb-ink-muted und
 * --hb-ocker erreichen als 10–11px-Text auf dem Papier keine 4.5:1.
 * #736B5B und #8F5F3C tun es.
 */

.abl-page {
    --abl-tinte:  var(--hb-ink, #23201B);
    --abl-mitte:  var(--hb-ink-mid, #6E6757);
    --abl-grau:   #736B5B;
    --abl-ocker-text: #8F5F3C;
    --abl-linie:  var(--hb-border, #DAD3C2);
    --abl-flaeche: var(--hb-card, #FCFAF4);
    --abl-papier: var(--hb-paper, #F4F1E8);
    --abl-rot:    var(--hb-terra, #B0492C);
    --abl-oliv:   var(--hb-oliv, #5E7A4F);
    --abl-serif:  var(--hb-serif, 'Lora', Georgia, serif);
    --abl-mono:   var(--hb-mono, 'JetBrains Mono', monospace);
}

.abl-shell {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    padding: 34px 24px 80px;
    color: var(--abl-tinte);
    font-family: var(--abl-serif);
}

/* ── Kopf ────────────────────────────────────────────────────────── */

.abl-marke-zeile {
    margin: 0 0 8px;
    font-family: var(--abl-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--abl-rot);
}
.abl-titel {
    margin: 0;
    font-family: var(--abl-serif);
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.01em;
    text-align: left;   /* styles.css zentriert jedes h1 */
    color: var(--abl-tinte);
}
/* EINE kräftige Linie unter dem Titel. */
.abl-titel-linie {
    margin: 18px 0 22px;
    border: 0;
    border-top: 2px solid var(--abl-tinte);
}
.abl-vorspann {
    max-width: 62ch;
    margin: 0 0 26px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--abl-mitte);
}

/* Zustandszeile: eine Kante links, keine zweite Box. */
.abl-lage {
    margin: 0 0 26px;
    padding: 12px 15px;
    border-left: 2px solid var(--hb-ocker, #A8744D);
    background: var(--abl-flaeche);
    font-size: 14.5px;
    line-height: 1.55;
}
.abl-lage.ist-gut { border-left-color: var(--abl-oliv); }

/* ── Die Blätter ─────────────────────────────────────────────────── */

.abl-blaetter {
    display: grid;
    gap: 40px 36px;
    margin: 0 0 44px;
}
@media (min-width: 900px) {
    .abl-blaetter { grid-template-columns: 1fr 1fr; }
}

/* Kein Kasten ums Blatt: Das Vorschaubild ist selbst ein Blatt Papier und
   bringt seine Kante mit. Text und Knopf stehen frei daneben. */
.abl-blatt {
    display: grid;
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
.abl-vorschau {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--abl-tinte);
    background: #FFF;
}

.abl-meta {
    margin: 0 0 6px;
    font-family: var(--abl-mono);
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--abl-grau);
}
.abl-blatt-titel {
    margin: 0 0 8px;
    font-family: var(--abl-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--abl-tinte);
}
.abl-blatt-satz {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--abl-mitte);
}

/* Die vier Teile wie im PDF: Buchstabe im Tinte-Quadrat, dann der Name,
   rechts die Aufgabennummern in Mono. */
.abl-teile {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--abl-linie);
}
.abl-teile li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--abl-linie);
    font-size: 14px;
    line-height: 1.4;
}
.abl-teile span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--abl-tinte);
    font-family: var(--abl-mono);
    font-size: 11px;
    font-weight: 500;
}
.abl-teile em {
    font-family: var(--abl-mono);
    font-size: 11px;
    font-style: normal;
    color: var(--abl-grau);
}

/* ── Knöpfe ──────────────────────────────────────────────────────── */

.abl-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 20px;
    border: 1px solid var(--abl-tinte);
    background: var(--abl-rot);
    color: #FFF;
    font-family: var(--abl-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
}
.abl-knopf:hover { background: #9C4027; color: #FFF; }

.abl-knopf-zweit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: 1px solid var(--abl-tinte);
    background: transparent;
    color: var(--abl-tinte);
    font-family: var(--abl-mono);
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
}
.abl-knopf-zweit:hover { background: rgba(35,32,27,0.06); color: var(--abl-tinte); }

/* Gesperrt: kein ausgegrauter Knopf, der nach Fehler aussieht, sondern ein
   Verweis mit Schloss — er führt zur Expert-Werbung weiter unten. */
.abl-gesperrt {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border: 1px dashed var(--abl-tinte);
    color: var(--abl-tinte);
    font-family: var(--abl-mono);
    font-size: 12px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
}
.abl-gesperrt svg { color: var(--abl-rot); }
.abl-gesperrt:hover { border-style: solid; color: var(--abl-rot); }

/* ── Zwei Wege ───────────────────────────────────────────────────── */

.abl-nutzen {
    margin: 0 0 48px;
    padding-top: 22px;
    border-top: 1px solid var(--abl-tinte);
}
.abl-nutzen h2 {
    margin: 0 0 14px;
    font-family: var(--abl-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--abl-tinte);
}
.abl-wege { display: grid; gap: 22px 28px; }
@media (min-width: 720px) {
    .abl-wege { grid-template-columns: 1fr 1fr; }
}
/* Zwei Karten mit Tinte-Rahmen und hartem Druckschatten — der einzigen
   Schattenform des Hauses. Ein Ocker-Streifen oben markiert sie als
   Hinweis zum Gebrauch, nicht als Handlung (die bleibt Terrakotta). */
.abl-weg {
    padding: 18px 20px 20px;
    border: 1px solid var(--abl-tinte);
    border-top: 4px solid var(--hb-ocker, #A8744D);
    background: var(--abl-flaeche);
    box-shadow: 4px 4px 0 var(--abl-tinte);
}
.abl-wege p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--abl-tinte); }
.abl-wege .abl-weg-marke {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--abl-linie);
    font-family: var(--abl-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--abl-ocker-text);
}
.abl-weg-marke svg { flex: 0 0 auto; }

/* ── Werbung für Expert ──────────────────────────────────────────── */

.abl-expert {
    display: grid;
    gap: 28px;
    align-items: start;
    padding-top: 26px;
    border-top: 2px solid var(--abl-tinte);
    scroll-margin-top: 90px;
}
@media (min-width: 900px) {
    .abl-expert { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
}
.abl-expert h2 {
    margin: 0 0 16px;
    font-family: var(--abl-serif);
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--abl-tinte);
}

/* Offene Liste, kein Kasten — wie auf expert.html. */
.abl-vorteile { margin: 0; padding: 0; list-style: none; }
.abl-vorteile li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--abl-linie);
}
.abl-vorteile li:first-child { border-top: 1px solid var(--abl-linie); }
.abl-vorteil-nr {
    padding-top: 3px;
    font-family: var(--abl-mono);
    font-size: 11px;
    color: var(--abl-ocker-text);
}
.abl-vorteil-was { font-size: 15.5px; line-height: 1.55; }
.abl-vorteil-was strong { font-weight: 600; }
.abl-vorteil-was span {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    color: var(--abl-mitte);
}

/* Der Preiskasten ist die eine Verschachtelung, die sich lohnt — er trägt
   die Handlung und als einziges Element den harten Druckschatten. */
.abl-preis {
    display: grid;
    gap: 14px;
    padding: 24px 22px;
    border: 2px solid var(--abl-tinte);
    background: var(--abl-flaeche);
    box-shadow: 6px 6px 0 var(--abl-tinte);
}
.abl-preis-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.abl-preis-zahl {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 9px;
    margin: 0;
    font-family: var(--abl-mono);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--abl-tinte);
}
.abl-preis-zahl span {
    font-family: var(--abl-serif);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--abl-mitte);
}
/* 110px ist die Untergrenze, bei der „EXPERT" im Siegel lesbar bleibt. */
.abl-siegel { flex: 0 0 auto; width: 110px; height: auto; }
.abl-preis-fuss {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--abl-mitte);
}
.abl-preis .abl-knopf,
.abl-preis .abl-knopf-zweit { width: 100%; }

/* ── Schmal ──────────────────────────────────────────────────────── */

@media (max-width: 560px) {
    .abl-shell { padding: 26px 16px 60px; }
    .abl-blatt { grid-template-columns: 1fr; }
    .abl-vorschau { max-width: 220px; }
    .abl-knopf, .abl-gesperrt { width: 100%; justify-content: center; }
    .abl-preis { padding: 20px 18px; box-shadow: 4px 4px 0 var(--abl-tinte); }
    .abl-preis-zahl { font-size: 32px; }
}