/* =====================================================================
   Lernweg-Seite (Template „Lernweg-Seite“, templates/page-lernweg.html)
   Erste Seite: Dein erstes Brot (18.10.2026). Grundlage: Prototyp
   Designprototypen 2026-10-02/Prototyp-Lernweg-Dein-erstes-Brot.html
   (Gestaltung von Sabine am 15.10.2026 gutgeheißen, Text freigegeben 18.10.2026).
   Alle Regeln hängen an .bb-lw und wirken nur auf Lernweg-Seiten.
   Geladen von inc/lernweg.php. Sicherung: _bb-backups/lernweg-seite-20261018/
   ===================================================================== */
.bb-lw{--molke:#fcfcfb;--papier:#fff;--nebel:#f1f1ef;--linie:#e5e5e2;--linie-stark:#8c8580;--umbra:#3a2620;--grau:#62514a;--hagebutte:#9a3d33;--hagebutte-dunkel:#7a2f27;--salbei:#7d8471;--salbei-dunkel:#4f5645;--salbei-flaeche:#e3e8df;--text-auf-hagebutte:#fff;
--radius-mittel:.5rem;--radius-gross:1rem;--radius-rund:999px;--schatten-karte:0 2px 12px rgba(58,38,32,.08);
--font-display:Fraunces,Georgia,'Times New Roman',serif;--font-text:Mulish,'Segoe UI',Helvetica,Arial,sans-serif;
--groesse-web-h1:clamp(2rem,1.7065rem + 1.3043vw,2.75rem);--groesse-web-h2:clamp(1.625rem,1.4783rem + .6522vw,2rem);--groesse-web-h3:clamp(1.3125rem,1.2391rem + .3261vw,1.5rem);--groesse-web-h4:clamp(1.125rem,1.0761rem + .2174vw,1.25rem);--groesse-web-text:clamp(1rem,.9511rem + .2174vw,1.125rem);--groesse-web-klein:clamp(.875rem,.8505rem + .1087vw,.9375rem);--groesse-web-dachzeile:clamp(.75rem,.7255rem + .1087vw,.8125rem);
--abstand-rand:clamp(1rem,.6087rem + 1.7391vw,2rem);--abstand-kasten:clamp(1rem,.8043rem + .8696vw,1.5rem);--abstand-abschnitt:clamp(2rem,1.6087rem + 1.7391vw,3rem);--abstand-bereich:clamp(3rem,2.6087rem + 1.7391vw,4rem);
--breite:73.5rem;--inhalt:57.5rem;
background:var(--molke);color:var(--umbra);font-family:var(--font-text);font-size:var(--groesse-web-text);line-height:1.65;overflow-x:clip}
html:has(.bb-lw){scroll-behavior:smooth}
main:has(> .bb-lw){margin-top:0!important}
@media (prefers-reduced-motion:reduce){html:has(.bb-lw){scroll-behavior:auto}}
.bb-lw,.bb-lw *{box-sizing:border-box}
.bb-lw > *{margin-block:0!important;max-width:none}
.bb-lw img{display:block;max-width:100%;height:auto}
.bb-lw :is(h1,h2,h3,h4){font-family:var(--font-display);font-weight:600;margin:0;color:var(--umbra);letter-spacing:normal;text-wrap:balance}
.bb-lw p{margin:0}
.bb-lw ul,.bb-lw ol{margin:0}
.bb-lw a{color:var(--hagebutte)}
.bb-lw :is(a,button):focus-visible{outline:3px solid var(--umbra);outline-offset:3px}
.bb-lw-sprite{position:absolute;width:0;height:0;overflow:hidden}
.bb-lw .dach{display:block;font:700 var(--groesse-web-dachzeile)/1.3 var(--font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--hagebutte)}
.bb-lw .knopf{display:inline-flex;align-items:center;gap:.5rem;font:700 .9375rem/1 var(--font-text);padding:.75rem 1.2rem;border-radius:var(--radius-mittel);border:2px solid var(--hagebutte);background:var(--hagebutte);color:var(--text-auf-hagebutte);text-decoration:none}
.bb-lw .knopf:hover{background:var(--hagebutte-dunkel);border-color:var(--hagebutte-dunkel);color:var(--text-auf-hagebutte)}
.bb-lw .knopf--zweit{background:transparent;color:var(--hagebutte)}
.bb-lw .knopf--zweit:hover{background:var(--nebel);color:var(--hagebutte-dunkel)}
.bb-lw .pfeil{width:.9em;height:.9em;flex:none}
.bb-lw .chip{display:inline-flex;align-items:center;font:700 .8125rem/1 var(--font-text);padding:.45rem .75rem;border-radius:var(--radius-rund);background:var(--nebel);color:var(--umbra)}
.bb-lw .chip--stufe{background:var(--salbei-flaeche);color:var(--salbei-dunkel)}
.bb-lw .chips{display:flex;flex-wrap:wrap;gap:.45rem}

/* Brotkrumen */
.bb-lw .krumen{max-width:var(--breite);margin:0 auto;padding:1rem var(--abstand-rand) 0;font-size:.82rem;line-height:1.4;color:var(--grau)}
.bb-lw .krumen a{color:var(--grau);text-decoration:underline;text-underline-offset:2px}

/* Hero Variante B */
.bb-lw .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:1rem;background:var(--papier);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.bb-lw .hero__text{padding:var(--abstand-bereich) clamp(1.5rem,4vw,3.5rem) var(--abstand-bereich) max(var(--abstand-rand),calc((100vw - var(--breite))/2 + var(--abstand-rand)));align-self:center}
.bb-lw .hero h1{font-size:var(--groesse-web-h1);line-height:1.08;margin-top:.6rem}
.bb-lw .hero__lead{font-family:var(--font-display);font-style:italic;font-size:var(--groesse-web-text);line-height:1.6;margin-top:1rem;max-width:32rem}
.bb-lw .hero .chips{margin-top:1.3rem}
.bb-lw .hero__knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.bb-lw .hero__bild{min-height:26rem;margin:0}
.bb-lw .hero__bild img{width:100%;height:100%;object-fit:cover}
@media (max-width:52rem){.bb-lw .hero{grid-template-columns:1fr}.bb-lw .hero__bild{order:-1;min-height:0}.bb-lw .hero__bild img{aspect-ratio:3/2;height:auto}.bb-lw .hero__text{padding:var(--abstand-abschnitt) var(--abstand-rand)}}

/* Wegleiste */
.bb-lw .leiste{max-width:var(--breite);margin:0 auto;padding:var(--abstand-abschnitt) var(--abstand-rand) 0}
.bb-lw .leiste ol{list-style:none;margin:0 auto;padding:0;max-width:var(--inhalt);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.bb-lw .leiste ol::before{content:"";position:absolute;left:10%;right:10%;top:1.2rem;height:2px;background:var(--linie)}
.bb-lw .leiste li{position:relative;text-align:center;margin:0}
.bb-lw .leiste a{display:grid;justify-items:center;gap:.5rem;text-decoration:none;color:var(--umbra);font-size:var(--groesse-web-klein);line-height:1.3;padding:0 .3rem}
.bb-lw .leiste__nr{width:2.4rem;height:2.4rem;border-radius:var(--radius-rund);display:grid;place-items:center;background:var(--papier);border:2px solid var(--hagebutte);color:var(--hagebutte);font:600 1.05rem/1 var(--font-display);font-variant-numeric:lining-nums;transition:background .2s,color .2s}
.bb-lw .leiste a:hover .leiste__nr,.bb-lw .leiste a.aktiv .leiste__nr{background:var(--hagebutte);color:var(--text-auf-hagebutte)}
.bb-lw .leiste a.aktiv span:last-child{font-weight:700}
.bb-lw .leiste__jetzt{display:none}
@media (max-width:40rem){
 .bb-lw .leiste{position:sticky;top:var(--bb-lw-oben,0px);z-index:10;background:var(--molke);border-bottom:1px solid var(--linie);padding:.6rem var(--abstand-rand) .55rem;transition:transform .25s ease}

 .bb-lw .leiste.aus{transform:translateY(-110%)}
 .bb-lw .leiste ol::before{top:.95rem}
 .bb-lw .leiste a span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .bb-lw .leiste__nr{width:1.9rem;height:1.9rem;font-size:.9rem}
 .bb-lw .leiste__jetzt{display:block;margin:.4rem 0 0;text-align:center;font:700 .78rem/1.3 var(--font-text);color:var(--grau)}
 .bb-lw .station{scroll-margin-top:calc(var(--bb-lw-oben,0px) + 5.5rem)}
}
@media (prefers-reduced-motion:reduce){.bb-lw .leiste,.bb-lw .leiste__nr{transition:none}}

/* Stationen */
.bb-lw .station{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:0 clamp(1rem,3vw,2rem);scroll-margin-top:calc(var(--bb-lw-oben,0px) + 1rem);max-width:var(--inhalt);margin:0 auto;padding:0 var(--abstand-rand)}
.bb-lw .station--erste{padding-top:var(--abstand-abschnitt)}
.bb-lw .station__spur{position:relative;display:flex;justify-content:center}
.bb-lw .station__spur::after{content:"";position:absolute;top:3.6rem;bottom:0;width:2px;background:var(--linie)}
.bb-lw .station--letzte .station__spur::after{display:none}
.bb-lw .station__nr{width:3.5rem;height:3.5rem;border-radius:var(--radius-rund);background:var(--molke);border:2px solid var(--hagebutte);color:var(--hagebutte);display:grid;place-items:center;font:600 1.6rem/1 var(--font-display);font-variant-numeric:lining-nums;position:relative;z-index:1}
.bb-lw .station__inhalt{padding-bottom:var(--abstand-bereich);min-width:0}
.bb-lw .station__dach{color:var(--grau)}
.bb-lw .station h2{font-size:var(--groesse-web-h2);line-height:1.18;margin-top:.45rem}
.bb-lw .station__text{margin-top:1rem;max-width:42rem}
.bb-lw .modul{margin-top:1.6rem}
@media (max-width:40rem){.bb-lw .station{grid-template-columns:1fr}.bb-lw .station__spur{justify-content:flex-start;margin-bottom:.8rem}.bb-lw .station__spur::after{display:none}.bb-lw .station__nr{width:2.75rem;height:2.75rem;font-size:1.3rem}}

/* Karten, Häkchen */
.bb-lw .karte{background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius-gross);padding:var(--abstand-kasten)}
.bb-lw .karte h3{font-size:var(--groesse-web-h4);line-height:1.3}
.bb-lw .karte .dach{margin-bottom:.35rem}
.bb-lw .haken{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.55rem;font-size:var(--groesse-web-klein);line-height:1.5}
.bb-lw .haken li{display:grid;grid-template-columns:1.3rem minmax(0,1fr);gap:.6rem;align-items:start;margin:0}
.bb-lw .haken svg{width:1.3rem;height:1.3rem;margin-top:.05rem;color:var(--salbei)}
.bb-lw .haken small{display:block;color:var(--grau);font-size:.85em}

/* Station 1 */
.bb-lw .brauchst figure{margin:0}
.bb-lw .brauchst figure img{width:100%;height:auto;border-radius:var(--radius-gross) var(--radius-gross) 0 0}
.bb-lw .brauchst .karte{border-radius:0 0 var(--radius-gross) var(--radius-gross);border-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2rem}
.bb-lw .kein-muss{grid-column:1/-1;padding-top:.9rem;border-top:1px solid var(--linie);font-size:var(--groesse-web-klein);color:var(--grau)}
@media (max-width:40rem){.bb-lw .brauchst .karte{grid-template-columns:1fr}}

/* Station 2 */
.bb-lw .wege{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.bb-lw .weg{display:flex;flex-direction:column;gap:.6rem}
.bb-lw .weg h3{font-size:var(--groesse-web-h3);line-height:1.25}
.bb-lw .weg p{font-size:var(--groesse-web-klein);line-height:1.55}
.bb-lw .weg__fakt{display:flex;align-items:center;gap:.5rem;font:700 .8125rem/1.3 var(--font-text);color:var(--grau)}
.bb-lw .weg__fakt svg{width:1.1rem;height:1.1rem;color:var(--grau)}
.bb-lw .weg__fuss{margin-top:auto;padding-top:.6rem}
.bb-lw .wege__notiz{margin-top:1rem;font-size:var(--groesse-web-klein);color:var(--grau)}
@media (max-width:40rem){.bb-lw .wege{grid-template-columns:1fr}}

/* Station 3 */
.bb-lw .einstieg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);background:var(--papier);border:1px solid var(--linie);border-top:4px solid var(--hagebutte);border-radius:var(--radius-mittel);overflow:hidden;box-shadow:var(--schatten-karte)}
.bb-lw .einstieg__bild{margin:0}
.bb-lw .einstieg__bild img{width:100%;height:100%;object-fit:cover}
.bb-lw .einstieg__text{padding:var(--abstand-kasten);display:flex;flex-direction:column;gap:.9rem}
.bb-lw .einstieg h3{font-size:var(--groesse-web-h3);line-height:1.2}
.bb-lw .einstieg__kurz{font-size:var(--groesse-web-klein);color:var(--grau);line-height:1.55}
.bb-lw .uebst{font:700 .72rem/1.3 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--salbei-dunkel)}
.bb-lw .einstieg .haken{margin-top:.45rem}
.bb-lw .zeitleiste{list-style:none;margin:0;padding:.8rem 0 0;border-top:1px solid var(--linie);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.bb-lw .zeitleiste li{font-size:.8rem;line-height:1.35;color:var(--grau);margin:0}
.bb-lw .zeitleiste b{display:block;font:600 1.05rem/1.3 var(--font-display);color:var(--umbra);font-variant-numeric:tabular-nums lining-nums}
.bb-lw .zeitleiste li:last-child b{color:var(--hagebutte)}
.bb-lw .einstieg .knopf{align-self:flex-start}
@media (max-width:48rem){.bb-lw .einstieg{grid-template-columns:1fr}.bb-lw .einstieg__bild img{aspect-ratio:3/2;height:auto}}
@media (max-width:26rem){.bb-lw .zeitleiste{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:.8rem}}

/* Station 4 */
.bb-lw .pruefen{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1rem}
.bb-lw .vergleich{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:.9rem}
.bb-lw .foto{margin:0}
.bb-lw .foto img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-mittel)}
.bb-lw .foto figcaption{margin-top:.35rem;font-size:.8rem;color:var(--grau);line-height:1.35}
.bb-lw .foto figcaption b{color:var(--umbra)}
.bb-lw .foto--breit{margin-top:.9rem}
.bb-lw .zum-rezept{margin-top:1rem;font-size:var(--groesse-web-klein)}
.bb-lw .zum-rezept a{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
@media (max-width:44rem){.bb-lw .pruefen{grid-template-columns:1fr}}

/* Station 5 */
.bb-lw .aufheben{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start}
.bb-lw .aufheben figure{margin:0}
.bb-lw .aufheben figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-gross)}
.bb-lw .werte{display:grid;gap:.7rem}
.bb-lw .wert{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;align-items:center;background:var(--papier);border:1px solid var(--linie);border-radius:var(--radius-mittel);padding:.85rem 1rem}
.bb-lw .wert b{font:600 1.35rem/1.15 var(--font-display);color:var(--hagebutte);font-variant-numeric:lining-nums}
.bb-lw .wert b small{display:block;font:700 .68rem/1.2 var(--font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--grau);margin-bottom:.15rem}
.bb-lw .wert__zeichen{width:2rem;height:2rem}
.bb-lw .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bb-lw .wert strong{display:block;font-weight:700;margin-bottom:.15rem}
.bb-lw .wert span{font-size:var(--groesse-web-klein);line-height:1.45}
@media (max-width:44rem){.bb-lw .aufheben{grid-template-columns:1fr}.bb-lw .aufheben figure{order:-1}}

/* Vertiefen, Problem lösen */
.bb-lw .vertiefen{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.1rem;margin-top:1.4rem;font-size:var(--groesse-web-klein)}
.bb-lw .vertiefen__titel{font:700 .72rem/1.3 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.bb-lw .vertiefen a{color:var(--umbra);font-weight:700;text-decoration:underline;text-decoration-color:var(--linie-stark);text-underline-offset:3px}
.bb-lw .vertiefen a:hover{color:var(--hagebutte);text-decoration-color:currentColor}
.bb-lw .problem{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:1rem;background:var(--nebel);border-radius:var(--radius-mittel);padding:.8rem 1rem;font-size:var(--groesse-web-klein)}
.bb-lw .problem svg{width:1.25rem;height:1.25rem;color:var(--umbra);flex:none}
.bb-lw .problem__frage{font-weight:700}
.bb-lw .problem a{margin-left:auto;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.bb-lw .problem a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:30rem){.bb-lw .problem a{margin-left:1.75rem}}

/* So geht's weiter */
.bb-lw .weiter{background:var(--nebel);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.bb-lw .weiter__innen{max-width:var(--breite);margin:0 auto;padding:var(--abstand-bereich) var(--abstand-rand)}
.bb-lw .weiter h2{font-size:var(--groesse-web-h2);margin-top:.45rem}
.bb-lw .weiter__intro{margin-top:.6rem;color:var(--grau);max-width:40rem}
.bb-lw .weiter__karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.6rem}
.bb-lw .wk{display:flex;flex-direction:column;gap:.5rem;background:var(--papier);border:1px solid var(--linie);border-top:4px solid var(--hagebutte);border-radius:var(--radius-mittel);padding:var(--abstand-kasten);box-shadow:var(--schatten-karte);text-decoration:none;color:var(--umbra);transition:transform .15s ease}
.bb-lw .wk:hover{transform:translateY(-2px);color:var(--umbra)}
.bb-lw .wk:hover h3{color:var(--hagebutte)}
.bb-lw .wk h3{font-size:var(--groesse-web-h4);line-height:1.3}
.bb-lw .wk p{font-size:var(--groesse-web-klein);color:var(--grau);line-height:1.5}
.bb-lw .wk__mehr{margin-top:auto;padding-top:.4rem;font:700 .875rem/1 var(--font-text);color:var(--hagebutte);display:inline-flex;align-items:center;gap:.35rem}
@media (max-width:52rem){.bb-lw .weiter__karten{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.bb-lw .wk{transition:none}.bb-lw .wk:hover{transform:none}}

/* Probleme lösen */
.bb-lw .diagnose{max-width:var(--inhalt);margin:0 auto;padding:var(--abstand-bereich) var(--abstand-rand);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2rem;align-items:center}
.bb-lw .diagnose h2{font-size:var(--groesse-web-h3);line-height:1.25}
.bb-lw .diagnose p{margin-top:.4rem;color:var(--grau);font-size:var(--groesse-web-klein)}
@media (max-width:40rem){.bb-lw .diagnose{grid-template-columns:1fr}}