.hb-lesson-body{background-color:#f4f1e8;background-image:repeating-linear-gradient(0deg,rgba(120,110,85,.035) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(120,110,85,.035) 0 1px,transparent 1px 26px)}
.final-lesson-hero{display:grid;grid-template-columns:minmax(0,1fr) 180px;align-items:end;background:#fbf8ef;border:1px solid #dad3c2;border-bottom:2px solid #23201b;padding:42px 48px;gap:32px}
.final-lesson-hero .workshop-hero-copy{max-width:76ch}.final-lesson-seal{font-family:"JetBrains Mono",monospace;font-size:11px;line-height:1.7;letter-spacing:.14em;text-align:center;color:#5e7a4f;border:2px solid #5e7a4f;padding:18px 10px;transform:rotate(-3deg)}
.workshop-card:focus:not(:focus-visible){outline:none}.theory-explain-card p{max-width:72ch}.final-data-table{border-top:2px solid #23201b;border-bottom:3px double #23201b;background:#fcfaf4}.final-data-table h3{margin:0;padding:12px 14px;border-bottom:1px solid #dad3c2}.final-data-table>div{display:grid;grid-template-columns:minmax(140px,1fr) minmax(120px,1fr);gap:18px;padding:9px 14px;border-bottom:1px solid #dad3c2}.final-data-table>div:last-child{border-bottom:0}.final-data-table span{color:#6e6757}.final-data-table strong{text-align:right;font-family:"JetBrains Mono",monospace;font-size:.88rem}
/* Mehrspaltige Tabellen (BAB, Vergleichsrechnungen): Spaltenzahl steckt als
   --raster inline im Element, weil repeat() keine berechnete Anzahl annimmt.
   Erste Zeile ist die Kopfzeile. Bei Bedarf waagrecht scrollbar, damit sechs
   Spalten am Telefon nicht zu Brei werden. */
.final-data-table.is-wide{overflow-x:auto}
.final-data-table.is-wide>div{grid-template-columns:var(--raster);gap:10px;min-width:520px}
.final-data-table.is-wide>div.is-head{background:#f4f1e8;border-bottom:2px solid #23201b}
.final-data-table.is-wide>div.is-head span,.final-data-table.is-wide>div.is-head strong{font:600 .72rem/1.4 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:#6e6757}
.final-image-prompt{margin:0;border:1px solid #a8744d;background:#fbf8ef;padding:20px}.final-image-prompt span{font:600 10px/1.4 "JetBrains Mono",monospace;letter-spacing:.12em;color:#a8744d}.final-image-prompt h3{margin:8px 0 10px}.final-image-prompt p{margin:0;max-width:75ch;line-height:1.65}.final-image-prompt figcaption{margin-top:14px;padding-top:10px;border-top:1px solid #dad3c2;color:#6e6757;font-size:.9rem}
/* Ausstehende Illustration: ruhiger Platzhalter statt Produktionshinweis.
   Gedaempfte Rahmenfarbe (#a8744d wirkte als Warnung), Kontrast der Textfarben
   gegen den Kastenhintergrund #fbf8ef gemessen: #6e6757 = 5,29:1, #23201b = 15,28:1. */
.final-image-prompt.is-pending{border:1px dashed #c9bfa8;background:#fbf8ef}
.final-image-prompt.is-pending span{color:#6e6757}
.final-image-prompt.is-pending p{margin-top:8px;color:#23201b}
.hb-lesson-body .site-footer{border-top:2px solid #23201b;background:#f4f1e8;background-image:none}.hb-lesson-body .site-footer-column h2{font-family:"JetBrains Mono",monospace;color:#a8744d;letter-spacing:.12em;text-transform:uppercase;font-size:.65rem}.hb-lesson-body .site-footer a{font-family:"Lora",Georgia,serif;color:#3d3930}.hb-lesson-body .site-footer-bottom{border-color:#dad3c2}
@media(max-width:760px){.final-lesson-hero{grid-template-columns:1fr;padding:28px 22px}.final-lesson-seal{justify-self:start}.final-data-table:not(.is-wide)>div{grid-template-columns:1fr}.final-data-table:not(.is-wide) strong{text-align:left}.final-image-prompt{padding:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Fertige Illustration. Maße stehen im Markup (960 x 380), damit beim Nachladen
   nichts springt; die Breite folgt trotzdem dem Container. */
.final-image { margin: 0; }
.final-image img,
.final-image picture { display: block; width: 100%; height: auto; }
.final-image img { border: 1px solid #dad3c2; background: #fbf8ef; }

/* ------------------------------------------------------- Angabe der Station */
/* Der letzte Absatz einer Station ist bei allen Lektionen ab Level 11 die
   Angabe: „Untergrenze 598.000,00 EUR, Verwaltungskosten 58.000,00 EUR." Das
   ist keine Prosa, sondern das Datenblatt zur Frage. Bis August 2026 stand es
   als gewoehnliches <p> unter vier Erklaerabsaetzen und las sich deshalb wie
   ein abgebrochener Satz — man liest fluessigen Text und stolpert am Ende in
   eine Zahlenzeile.

   KLASSENNAME: bewusst „angabe-zeile" und nicht „station-angabe". In
   css/exercise-hb-shell.css steht [class*="stat"]; jede Klasse, die „stat"
   enthaelt, bekommt dort ungefragt fremde Regeln ab. */

.angabe-zeile {
    position: relative;
    margin: 18px 0 0;
    padding: 12px 16px 12px 18px;
    border-left: 3px solid var(--hb-ocker, #a8744d);
    border-radius: 0 8px 8px 0;
    background: rgba(168, 116, 77, 0.07);
    font-variant-numeric: tabular-nums;
    line-height: 1.55;
}

.angabe-zeile::before {
    content: "Angabe";
    display: block;
    margin-bottom: 4px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hb-ocker, #a8744d);
}
