/* ==========================================================================
   Baukasten-Haut nach der WWW-Design-Datei (30.09.2026)
   Gilt nur auf Seiten mit <div id="lf-seite" class="lf-root ... wb">.
   Nur Gestaltung, kein Umbau: greift ausschliesslich in .sh-band-Abschnitten.
   CTA-Baender (.sh-cta), Originalbloecke (.sh-orig), Team, KI-Sichtbarkeits-
   Design (.kd) und Uebersetzer-Einstieg (.ue3) bleiben unberuehrt.
   ========================================================================== */
#lf-seite.wb{--bk-rot:#d10000;--bk-ink:#1e1e1e;--bk-text:#222;--bk-mid:#555;--bk-tag:#767676;
  --bk-grau:#f0f0f0;--bk-hell:#fafafa;--bk-linie:#bcbcbc;--bk-gruen:#1a7a35}

/* ---- Flaechen und Abstaende ---- */
#lf-seite.wb .sh-band{padding-top:110px;padding-bottom:110px}
#lf-seite.wb .sh-band--a{background:var(--bk-hell)}
#lf-seite.wb .sh-band--b{background:var(--bk-grau)}
#lf-seite.wb .sh-band--toc{padding-top:40px;padding-bottom:40px;background:var(--bk-hell);
  border-top:1px solid var(--bk-linie);border-bottom:1px solid var(--bk-linie)}

/* ---- Abschnittskopf: grauer Tag, H2 40/50 Versal mit rotem Anfang ---- */
#lf-seite.wb .sh-band .sh-augenbraue{color:var(--bk-tag);font:600 14px/20px Inter,Helvetica,Arial,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
#lf-seite.wb .sh-band .sh-h2{font:700 40px/50px Inter,Helvetica,Arial,sans-serif;text-transform:uppercase;
  color:var(--bk-ink);margin:0 0 40px;max-width:1000px}
#lf-seite.wb .sh-band .sh-h2 span{color:var(--bk-rot)}
#lf-seite.wb .sh-band .sh-text h3{font:700 20px/28px Inter,Helvetica,Arial,sans-serif;text-transform:uppercase;color:var(--bk-ink)}

/* ---- Inhaltsverzeichnis: Nummern rot, Zeilen mit Abschlusslinie ---- */
#lf-seite.wb .sh-band--toc .sh-augenbraue{color:var(--bk-rot);font-weight:700;letter-spacing:.04em}
#lf-seite.wb .sh-gwi__liste li{border-bottom:1px solid var(--bk-linie);padding:8px 0}
#lf-seite.wb .sh-gwi__nr{background:none!important;color:var(--bk-rot)!important;font-weight:700;border-radius:0;padding:0;min-width:28px}
#lf-seite.wb .sh-gwi__text{color:var(--bk-ink);font-weight:600}
#lf-seite.wb .sh-gwi a:hover .sh-gwi__text{color:var(--bk-rot)}

/* ---- Aufzaehlungen im Text: rotes Haekchen, Linie darunter ---- */
#lf-seite.wb .sh-band .sh-text ul:not([class]),#lf-seite.wb .sh-band .sh-voll > ul:not([class]){list-style:none;margin:0 0 24px;padding:0}
#lf-seite.wb .sh-band .sh-text ul:not([class]) > li,#lf-seite.wb .sh-band .sh-voll > ul:not([class]) > li{position:relative;
  padding:5px 0 16px 34px;margin:0 0 16px;border-bottom:1px solid var(--bk-linie);list-style:none}
#lf-seite.wb .sh-band .sh-text ul:not([class]) > li::before,#lf-seite.wb .sh-band .sh-voll > ul:not([class]) > li::before{
  content:"";position:absolute;left:0;top:11px;width:18px;height:14px;border:0;border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.027' height='16.75' viewBox='0 0 22.027 16.75'%3E%3Cpath d='M11.516,20.922l-5.18-5.187L4.5,17.484l7.016,7,15.012-15-1.836-1.75Z' transform='translate(-4.5 -7.734)' fill='%23d10000'/%3E%3C/svg%3E") no-repeat center/contain}
/* nummerierte Listen im Text: rote 01, 02 ... */
#lf-seite.wb .sh-band .sh-text ol:not([class]){list-style:none;margin:0 0 24px;padding:0;counter-reset:bk}
#lf-seite.wb .sh-band .sh-text ol:not([class]) > li{counter-increment:bk;position:relative;padding:5px 0 16px 48px;
  margin:0 0 16px;border-bottom:1px solid var(--bk-linie);list-style:none}
#lf-seite.wb .sh-band .sh-text ol:not([class]) > li::before{content:counter(bk,decimal-leading-zero);position:absolute;left:0;top:3px;
  color:var(--bk-rot);font:700 20px/1.3 Inter,Helvetica,Arial,sans-serif;background:none;border:0;width:auto;height:auto}

/* ---- Tabellen: ohne dunklen Kopf, Linien wie im Baukasten ---- */
#lf-seite.wb .sh-band .lf-tabelle-titel{font:700 14px/20px Inter,Helvetica,Arial,sans-serif;letter-spacing:.04em;
  text-transform:uppercase;color:var(--bk-ink)}
#lf-seite.wb .sh-band .lf-tabelle{border-collapse:collapse;background:transparent}
#lf-seite.wb .sh-band .lf-tabelle thead th{background:transparent!important;color:var(--bk-ink)!important;
  font:700 13px/18px Inter,Helvetica,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;
  border:0;border-bottom:3px solid var(--bk-ink);padding:10px 12px 10px 0}
#lf-seite.wb .sh-band .lf-tabelle thead th *{color:inherit!important}
#lf-seite.wb .sh-band .lf-tabelle tbody td,#lf-seite.wb .sh-band .lf-tabelle tbody th{background:transparent!important;
  border:0;border-bottom:1px solid var(--bk-linie);padding:12px 12px 12px 0}
#lf-seite.wb .sh-band .lf-tabelle tbody tr,#lf-seite.wb .sh-band .lf-tabelle tbody tr:nth-child(even){background:transparent}
#lf-seite.wb .sh-band .lf-tabelle tbody tr:nth-child(even) td{background:transparent!important}

/* ---- Hinweiskaesten: Flaeche statt roter Kante, Laufkopf fett-versal ---- */
#lf-seite.wb .sh-band .lf-hinweis{background:var(--bk-grau);border:0;border-radius:0;box-shadow:none;padding:32px 36px}
#lf-seite.wb .sh-band--b .lf-hinweis{background:var(--bk-hell)}
#lf-seite.wb .sh-band .lf-hinweis .lf-kasten-titel,#lf-seite.wb .sh-band .lf-warnung .lf-kasten-titel{display:block;
  font:700 15px/22px Inter,Helvetica,Arial,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--bk-ink);margin:0 0 6px}
#lf-seite.wb .sh-band .lf-warnung{border-radius:0;box-shadow:none}

/* ---- Werkzeuge: flacher Kasten, Versal-Kopf, eckige Felder, Pillen ---- */
#lf-seite.wb .sh-band .lf-tool{background:var(--bk-grau);border:0;border-radius:0;box-shadow:none}
#lf-seite.wb .sh-band--b .lf-tool{background:var(--bk-hell)}
#lf-seite.wb .sh-band .lf-tool__kopf{background:transparent!important;color:var(--bk-text)!important;border:0}
#lf-seite.wb .sh-band .lf-tool__kopf p{color:var(--bk-text)!important}
#lf-seite.wb .sh-band .lf-tool__kopf h3{font:700 28px/36px Inter,Helvetica,Arial,sans-serif;text-transform:uppercase;color:var(--bk-ink)!important}
#lf-seite.wb .sh-band .lf-tool__kopf p{font-size:18px;line-height:27px}
#lf-seite.wb .sh-band .lf-tool label,#lf-seite.wb .sh-band .lf-tool .lf-feld__legende{color:var(--bk-ink)}
#lf-seite.wb .sh-band .lf-feld > label,#lf-seite.wb .sh-band .lf-tool .lf-feld__legende{font:700 14px/20px Inter,Helvetica,Arial,sans-serif;text-transform:uppercase}
#lf-seite.wb .sh-band .lf-tool input[type=number],#lf-seite.wb .sh-band .lf-tool input[type=text],
#lf-seite.wb .sh-band .lf-tool input[type=search],#lf-seite.wb .sh-band .lf-tool input[type=url],
#lf-seite.wb .sh-band .lf-tool select{border:1px solid var(--bk-ink);border-radius:0;background-color:#fff;min-height:52px;box-shadow:none}
#lf-seite.wb .sh-band .lf-tool input:focus,#lf-seite.wb .sh-band .lf-tool select:focus{outline:2px solid var(--bk-rot);outline-offset:0}
#lf-seite.wb .sh-band .lf-radios label{background:transparent!important;border:1px solid var(--bk-ink);border-radius:35px;
  padding:10px 18px;color:var(--bk-ink);box-shadow:none;align-items:center}
#lf-seite.wb .sh-band .lf-radios label:hover{border-color:var(--bk-rot);color:var(--bk-rot)}
#lf-seite.wb .sh-band .lf-radios label:has(input:checked){background:var(--bk-gruen)!important;border-color:var(--bk-gruen)!important;color:#fff!important;font-weight:700}
#lf-seite.wb .sh-band .lf-radios label:has(input:checked) *{color:#fff!important}
#lf-seite.wb .sh-band .lf-radios label:has(input:focus-visible){outline:2px solid var(--bk-rot);outline-offset:2px}
#lf-seite.wb .sh-band .lf-ergebnis{background:transparent;border:0;border-top:1px solid var(--bk-linie);border-radius:0;box-shadow:none;padding-left:0;padding-right:0}
#lf-seite.wb .sh-band .lf-ergebnis__label{font:700 13px/18px Inter,Helvetica,Arial,sans-serif;text-transform:uppercase;color:var(--bk-mid)}
#lf-seite.wb .sh-band .lf-ergebnis__zahl{font-weight:600;color:var(--bk-rot)}
#lf-seite.wb .sh-band .lf-tool-fuss{font-size:14px;color:var(--bk-mid)}
#lf-seite.wb .sh-band .lf-ampel{border-radius:0}

/* ---- Hauefige Fragen: Linien, roter Kreis mit Plus ---- */
#lf-seite.wb .sh-band .lf-faq details{border:0;border-bottom:1px solid var(--bk-linie);border-radius:0;background:transparent;box-shadow:none;margin:0}
#lf-seite.wb .sh-band .lf-faq summary{position:relative;list-style:none;padding:22px 60px 22px 0;background:transparent;
  font:700 18px/26px Inter,Helvetica,Arial,sans-serif;color:var(--bk-ink)}
#lf-seite.wb .sh-band .lf-faq summary::-webkit-details-marker{display:none}
#lf-seite.wb .sh-band .lf-faq summary::before{display:none}
#lf-seite.wb .sh-band .lf-faq summary::after{content:"+";position:absolute;right:0;top:16px;width:38px;height:38px;border-radius:50%;
  background:var(--bk-rot);color:#fff;font:400 22px/36px Inter,Helvetica,Arial,sans-serif;text-align:center;transform:none;border:0}
#lf-seite.wb .sh-band .lf-faq details[open] summary::after{content:"\2013"}
#lf-seite.wb .sh-band .lf-faq .lf-faq__a{padding:0 60px 24px 0;background:transparent;border:0}

/* ---- Quellen: zweispaltig, rote Nummern, Linie ---- */
#lf-seite.wb .sh-band .lf-quellen{list-style:none;margin:0;padding:0;counter-reset:bkq;columns:2;column-gap:60px}
#lf-seite.wb .sh-band .lf-quellen > li{counter-increment:bkq;position:relative;break-inside:avoid;padding:14px 0 18px 36px;
  margin:0;border-bottom:1px solid var(--bk-linie);font-size:15px;line-height:22px;list-style:none}
#lf-seite.wb .sh-band .lf-quellen > li::before{content:counter(bkq);position:absolute;left:0;top:12px;color:var(--bk-rot);
  font:600 20px/1.2 Inter,Helvetica,Arial,sans-serif}
#lf-seite.wb .sh-band .lf-quellen a{word-break:break-all}
#lf-seite.wb .sh-band .lf-quellen__stand{display:block;font-size:13px;color:var(--bk-mid)}

/* ---- Bildunterschriften ---- */
#lf-seite.wb .sh-band figcaption{font-size:14px;line-height:21px;color:var(--bk-mid)}

/* ---- Tablet und Handy wie in der Design-Datei ---- */
@media (max-width:1024px){
  #lf-seite.wb .sh-band{padding-top:80px;padding-bottom:80px}
  #lf-seite.wb .sh-band .sh-h2{font-size:32px;line-height:40px}
}
@media (max-width:640px){
  #lf-seite.wb .sh-band{padding-top:60px;padding-bottom:60px}
  #lf-seite.wb .sh-band .sh-h2{font-size:26px;line-height:33px;margin-bottom:28px}
  #lf-seite.wb .sh-band .lf-quellen{columns:1}
  #lf-seite.wb .sh-band .lf-hinweis{padding:24px}
  #lf-seite.wb .sh-band .lf-tool__kopf h3{font-size:22px;line-height:28px}
  #lf-seite.wb .sh-band .lf-faq summary{font-size:16px;line-height:23px}
}

/* ==========================================================================
   Werkstatt Content-Bereich: Baukasten voll (30.09.2026)
   Nur auf Seiten mit class="... wb wbv" (Hub + 15 Werkstatt-Seiten).
   ========================================================================== */
/* Einstieg: Kurz gesagt als grosse Aussage mit roter Linie */
#lf-seite.wbv .sh-band--einstieg .sh-gwa{border-left:4px solid var(--bk-rot);padding:4px 0 4px 34px;margin:0 0 70px}
#lf-seite.wbv .sh-band--einstieg .sh-gwa .sh-augenbraue{color:var(--bk-rot)}
#lf-seite.wbv .sh-stand{font-size:14px;color:var(--bk-tag);margin:0 0 40px}
/* Das Wichtigste in N Punkten: Ablauf-Raster mit grossen roten Ziffern */
#lf-seite.wbv .sh-gwz{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px!important;
  counter-reset:bkg;background:none!important;box-shadow:none!important;border:0!important;margin-top:24px}
#lf-seite.wbv .sh-gwz__karte{counter-increment:bkg;background:transparent!important;box-shadow:none!important;border:0!important;
  border-bottom:1px solid var(--bk-linie)!important;border-radius:0!important;padding:0 0 30px!important;margin:0 0 30px!important;min-width:0}
#lf-seite.wbv .sh-gwz__karte::before{content:counter(bkg,decimal-leading-zero);display:block;font:600 60px/64px Inter,Helvetica,Arial,sans-serif;
  color:var(--bk-rot);letter-spacing:-.01em;margin:0 0 12px}
#lf-seite.wbv .sh-gwz__titel{font:700 18px/25px Inter,Helvetica,Arial,sans-serif!important;text-transform:uppercase;color:var(--bk-ink)!important;margin:0 0 10px!important}
#lf-seite.wbv .sh-gwz__text{font:400 16px/25px Inter,Helvetica,Arial,sans-serif!important;color:var(--bk-text)!important;margin:0!important}
/* Schritte: Ablauf-Raster statt Kastenliste */
#lf-seite.wbv .lf-schritte{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 50px!important;background:none!important;margin:10px 0 30px}
#lf-seite.wbv .lf-schritt{display:block!important;background:transparent!important;box-shadow:none!important;border:0!important;
  border-bottom:1px solid var(--bk-linie)!important;border-radius:0!important;padding:0 0 30px!important;margin:0 0 34px!important;min-width:0}
#lf-seite.wbv .lf-schritt__nr{display:block!important;font:600 60px/64px Inter,Helvetica,Arial,sans-serif!important;color:var(--bk-rot)!important;
  margin:0 0 12px!important;background:none!important;width:auto!important;height:auto!important;border-radius:0!important}
#lf-seite.wbv .lf-schritt h3,#lf-seite.wbv .lf-schritt h4{display:block;font:700 18px/25px Inter,Helvetica,Arial,sans-serif;
  text-transform:uppercase;color:var(--bk-ink);margin:0 0 10px}
#lf-seite.wbv .lf-schritt p{margin:0 0 10px}
#lf-seite.wbv .lf-schritt p:last-child{margin-bottom:0}
/* Karten (Leistungen, Team-Punkte): flach, rote Ebene, Linie darunter */
#lf-seite.wbv .ct-karten,#lf-seite.wbv .lf-karten{gap:0 40px!important;background:none!important}
#lf-seite.wbv .ct-karte,#lf-seite.wbv .lf-karte{background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;
  border-top:3px solid var(--bk-ink)!important;padding:22px 0 34px!important;margin:0 0 10px}
#lf-seite.wbv .ct-karte h3,#lf-seite.wbv .lf-karte h3,#lf-seite.wbv .lf-karte h4{font:700 18px/25px Inter,Helvetica,Arial,sans-serif!important;text-transform:uppercase;color:var(--bk-ink)!important}
#lf-seite.wbv .ct-karte__ebene{color:var(--bk-rot)!important;letter-spacing:.08em}
#lf-seite.wbv .ct-karte p,#lf-seite.wbv .lf-karte p{color:var(--bk-text)!important}
/* Abhakliste: Zeilen mit Linie statt grauer Balken */
#lf-seite.wbv .lf-checks{gap:0!important}
#lf-seite.wbv .lf-checks li label{background:transparent!important;border-radius:0!important;border-bottom:1px solid var(--bk-linie);padding:14px 4px!important;font-size:16px;line-height:24px}
#lf-seite.wbv .lf-checks li label:hover{background:rgba(209,0,0,.06)!important}
#lf-seite.wbv .lf-checks li label:has(input:checked){background:transparent!important;color:var(--bk-ink)!important;font-weight:600}
#lf-seite.wbv .lf-checks li label:has(input:checked) *{color:var(--bk-ink)!important}
#lf-seite.wbv .lf-checks input{accent-color:var(--bk-rot);width:18px;height:18px}
/* Breite Tabellen (5+ Spalten) nicht in die schmale Spalte zwaengen */
#lf-seite.wbv .sh-zwei:has(.lf-tabelle th:nth-child(5)){display:block!important}
#lf-seite.wbv .sh-zwei:has(.lf-tabelle th:nth-child(5)) > *{max-width:none!important;width:auto!important}
#lf-seite.wbv .sh-zwei:has(.lf-tabelle th:nth-child(5)) .sh-text{max-width:740px!important;margin-bottom:40px}

/* ---- Medienbaender (Bild + animierte Grafiken, Gemini) ---- */
#lf-seite.wbv .sh-band.wb-medien{background:#141414;padding-top:90px;padding-bottom:90px;color:#d8d8d8}
#lf-seite.wbv .wb-foto{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:50px;align-items:end;margin:0}
#lf-seite.wbv .wb-foto img{display:block;width:100%;height:auto;aspect-ratio:1600/893;object-fit:cover}
#lf-seite.wbv .wb-foto figcaption{font:400 24px/36px Inter,Helvetica,Arial,sans-serif;color:#f2f2f2;border-left:4px solid var(--bk-rot);padding:4px 0 4px 26px;margin:0}
#lf-seite.wbv .wb-foto figcaption span{display:block;font:600 14px/20px Inter,Helvetica,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a;margin:0 0 12px}
#lf-seite.wbv .wb-anim-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
#lf-seite.wbv .wb-anim{margin:0}
#lf-seite.wbv .wb-anim img{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid #2a2a2a}
#lf-seite.wbv .wb-anim figcaption{font:400 16px/25px Inter,Helvetica,Arial,sans-serif;color:#cfcfcf;margin:16px 0 0;padding:16px 0 0;border-top:1px solid #3d3d3d}

@media (max-width:1024px){
  #lf-seite.wbv .sh-gwz{grid-template-columns:repeat(2,minmax(0,1fr))}
  #lf-seite.wbv .lf-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
  #lf-seite.wbv .wb-foto{grid-template-columns:minmax(0,1fr);gap:28px}
  #lf-seite.wbv .sh-band.wb-medien{padding-top:60px;padding-bottom:60px}
}
@media (max-width:640px){
  #lf-seite.wbv .sh-gwz,#lf-seite.wbv .lf-schritte,#lf-seite.wbv .wb-anim-zwei{grid-template-columns:minmax(0,1fr)}
  #lf-seite.wbv .sh-gwz__karte::before,#lf-seite.wbv .lf-schritt__nr{font-size:46px!important;line-height:50px!important}
  #lf-seite.wbv .sh-band--einstieg .sh-gwa{padding-left:20px}
  #lf-seite.wbv .wb-foto figcaption{font-size:20px;line-height:30px}
}