/* ==========================================================================
   Werkstattseiten · Suchhelden · Entwurfsfassung
   Grundlage ist der Entwurf aus dem Design-Fenster (Variante "Redaktion").
   Dieses Stylesheet uebertraegt dessen Formensprache auf alle Seiten:

     Band            ein Abschnitt, 100 px Luft, Flaeche wechselt hell/hell
     Augenbraue      kleine rote Versalzeile ueber der Ueberschrift
     H2              40/50 Versalien, erste Wortgruppe rot
     Zweispalter     Fliesstext links, Tabelle oder Grafik rechts
     Raster          Karten mit 1 px Rinne, weisse Flaechen
     Pillenknopf     wie auf der Startseite

   Abschnitt 9 ("Bruecke") enthaelt die Gegenregeln gegen die Seitenvorlage
   von suchhelden.de, die Tabellenzellen mit !important setzt.
   ========================================================================== */

/* --- 1. Bausteine aus dem Entwurf (unveraendert uebernommen) -------------- */
#lf-seite *{box-sizing:border-box}
#lf-seite a:where(:not(.sh-orig *)){color:#d10000;text-decoration:none}
#lf-seite a:where(:not(.sh-orig *)):hover{color:#1e1e1e;text-decoration:underline}
#lf-seite :focus-visible{outline:3px solid #d10000;outline-offset:2px}
#lf-seite [data-tab]{width:100%;border-collapse:collapse;font:400 16px/20px Inter,sans-serif;color:#222}
#lf-seite [data-tab] th[scope=col]{background:#1a1a1a;color:#fff;font:700 12px/18px Inter,sans-serif;letter-spacing:.96px;text-transform:uppercase;text-align:left;padding:13px 12px;vertical-align:bottom}
#lf-seite [data-tab] td,#lf-seite [data-tab] th[scope=row]{padding:14px 12px;text-align:left;vertical-align:top;font-weight:400}
#lf-seite [data-tab] th[scope=row]{font-weight:700;color:#1e1e1e}
#lf-seite [data-tab] tbody tr{background:#fff}
#lf-seite [data-tab] tbody tr:nth-child(even){background:#eaeaea}
#lf-seite ul[data-liste]{margin:0 0 18px;padding:0;list-style:none}
#lf-seite ul[data-liste] li{position:relative;padding:0 0 12px 26px;font:400 16px/25px Inter,sans-serif;color:#1e1e1e}
#lf-seite ul[data-liste] li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;background:#d10000}
#lf-seite details[data-faq] summary{list-style:none;cursor:pointer}
#lf-seite details[data-faq] summary::-webkit-details-marker{display:none}
#lf-seite details[data-faq][open] [data-plus]{transform:rotate(45deg)}
#lf-seite [data-raster]>*{box-shadow:0 0 0 1px rgba(0,0,0,.1)}

/* --- 2. Baender und Raster ------------------------------------------------ */
#lf-seite{font-family:Inter,Helvetica,Arial,sans-serif;background:#fafafa;
  -webkit-font-smoothing:antialiased}
#lf-seite .sh-band{padding:100px 0}
#lf-seite .sh-band--a{background:#fafafa}
#lf-seite .sh-band--b{background:#efefef}
#lf-seite .sh-band--einstieg{padding-top:78px}
#lf-seite .sh-band--toc{padding-bottom:64px}
#lf-seite .sh-rahmen{max-width:1378px;margin:0 auto;padding:0 15px}
#lf-seite .sh-zwei{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));
  gap:58px;align-items:start}
#lf-seite .sh-text,#lf-seite .sh-seite,#lf-seite .sh-voll{min-width:0}
#lf-seite .sh-text--breit{max-width:920px}
#lf-seite .sh-voll{margin:52px 0 0}
#lf-seite .sh-zwei + .sh-voll{margin-top:58px}

/* --- 3. Schrift ----------------------------------------------------------- */
#lf-seite .sh-augenbraue{font:700 11px/16px Inter,sans-serif;letter-spacing:.96px;
  text-transform:uppercase;color:#d10000;margin:0 0 12px}
#lf-seite .sh-h2{font:700 40px/50px Inter,sans-serif;text-transform:uppercase;
  color:#1e1e1e;letter-spacing:-.005em;margin:0 0 30px}
#lf-seite .sh-h2 span{color:#d10000}
#lf-seite h3:where(:not(.sh-orig *)){font:700 25px/30px Inter,sans-serif;text-transform:uppercase;
  color:#1e1e1e;margin:42px 0 12px}
#lf-seite h4:where(:not(.sh-orig *)){font:700 18px/25.2px Inter,sans-serif;color:#1e1e1e;margin:26px 0 8px}
#lf-seite p:where(:not(.sh-orig *)){font:400 16px/25px Inter,sans-serif;color:#1e1e1e;margin:0 0 18px}
#lf-seite li:where(:not(.sh-orig *)){font:400 16px/25px Inter,sans-serif;color:#1e1e1e}
#lf-seite .sh-vorspann{font:400 20px/31px Inter,sans-serif;margin:0 0 22px}
#lf-seite .sh-stand{font:400 14px/21px Inter,sans-serif;color:#5a5a5a;margin:0 0 30px}
#lf-seite .lf-klein,#lf-seite .lf-quellzeile,#lf-seite .lf-tool-fuss{
  font:400 14px/21.7px Inter,sans-serif;color:#7d7d7d}
#lf-seite .lf-q{font-size:11px;vertical-align:super;font-weight:700;margin-left:2px;color:#d10000}
#lf-seite .lf-etikett{display:inline-block;font:700 11px/16px Inter,sans-serif;
  letter-spacing:.96px;text-transform:uppercase;color:#5a5a5a}
#lf-seite .lf-kasten-titel,#lf-seite .lf-tabelle-titel{
  display:block;font:700 12px/18px Inter,sans-serif;letter-spacing:.96px;
  text-transform:uppercase;color:#5a5a5a;margin:0 0 10px}
#lf-seite ul:where(:not(.sh-orig *)),#lf-seite ol:where(:not(.sh-orig *)){margin:0 0 18px;padding-left:22px}
#lf-seite li:where(:not(.sh-orig *)){margin:0 0 8px}
#lf-seite .sh-text ul{list-style:none;padding:0}
#lf-seite .sh-text ul > li{position:relative;padding:0 0 12px 26px;margin:0}
#lf-seite .sh-text ul > li::before{content:"";position:absolute;left:0;top:9px;
  width:9px;height:9px;background:#d10000}
#lf-seite .sh-text ol{padding-left:24px}
#lf-seite strong:where(:not(.sh-orig *)){color:#1e1e1e}

/* --- 4. Karten, Kacheln, Zahlen ------------------------------------------ */
#lf-seite .sh-raster,#lf-seite .lf-karten,#lf-seite .lf-kacheln{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:1px;margin:0}
#lf-seite .sh-raster--zwei{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
#lf-seite .lf-karten--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
#lf-seite .lf-karten--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
#lf-seite .sh-karte,#lf-seite .lf-karte,#lf-seite .lf-kachel{
  background:#fff;padding:30px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
#lf-seite .sh-karte__titel,#lf-seite .lf-karte h3,#lf-seite .lf-karte h4,
#lf-seite .lf-kachel h3,#lf-seite .lf-kachel h4{
  font:700 20px/25px Inter,sans-serif;text-transform:uppercase;color:#1e1e1e;margin:0 0 10px}
#lf-seite .sh-karte__text,#lf-seite .lf-karte p,#lf-seite .lf-kachel p{
  font:400 16px/25px Inter,sans-serif;color:#222;margin:0 0 10px}
#lf-seite .lf-karte p:last-child,#lf-seite .lf-kachel p:last-child,
#lf-seite .sh-karte__text:last-child{margin:0}
#lf-seite .lf-karte__nr{display:block;font:700 14px/18px Inter,sans-serif;
  letter-spacing:.96px;color:#d10000;margin:0 0 12px}
#lf-seite .lf-kachel__icon{display:none}
#lf-seite .lf-zahlen{display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));margin:0}
#lf-seite .lf-zahl{background:#fff;padding:30px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
#lf-seite .lf-zahl__wert{display:block;font:700 40px/46px Inter,sans-serif;color:#d10000;
  letter-spacing:-.01em;margin:0 0 6px}
#lf-seite .lf-zahl__label{display:block;font:400 16px/23px Inter,sans-serif;color:#1e1e1e}
#lf-seite .lf-zahl__q{display:block;font:400 13px/19px Inter,sans-serif;color:#7d7d7d;margin:6px 0 0}

/* --- 5. Tabellen ---------------------------------------------------------- */
#lf-seite .lf-tabelle-wrap{margin:0 0 34px}
#lf-seite .lf-tabelle-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
#lf-seite .lf-tabelle{width:100%;border-collapse:collapse;
  font:400 16px/20px Inter,sans-serif;color:#222}
#lf-seite .lf-tabelle thead th{background:#1a1a1a;color:#fff;
  font:700 12px/18px Inter,sans-serif;letter-spacing:.96px;text-transform:uppercase;
  text-align:left;padding:13px 12px;vertical-align:bottom}
#lf-seite .lf-tabelle td,#lf-seite .lf-tabelle tbody th{
  padding:14px 12px;text-align:left;vertical-align:top;font-weight:400}
#lf-seite .lf-tabelle tbody th{font-weight:700;color:#1e1e1e}
#lf-seite .lf-tabelle tbody tr{background:#fff}
#lf-seite .lf-tabelle tbody tr:nth-child(even){background:#eaeaea}

/* --- 6. Grafiken, Zeitleisten, Schritte ---------------------------------- */
#lf-seite .lf-grafik{margin:0 0 34px}
#lf-seite .lf-grafik__box{background:#fff;padding:30px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
#lf-seite .lf-grafik__box .lf-zahlen{gap:1px;background:transparent}
#lf-seite .lf-grafik__box .lf-zahl{box-shadow:none;padding:0 22px 0 0}
#lf-seite .lf-bar{display:grid;grid-template-columns:minmax(120px,210px) 1fr minmax(70px,auto);
  gap:10px 16px;align-items:center;margin:0 0 10px}
#lf-seite .lf-bar__name{font:400 15px/21px Inter,sans-serif;color:#1e1e1e}
#lf-seite .lf-bar__track{height:14px;background:rgba(127,127,127,.25)}
#lf-seite .lf-bar__fill{height:100%;background:#d10000}
#lf-seite .lf-bar__wert{font:700 15px/21px Inter,sans-serif;color:#1e1e1e;text-align:right}
#lf-seite .lf-dual{display:grid;gap:10px}
#lf-seite .lf-dual__row{display:grid;grid-template-columns:minmax(100px,160px) 1fr 70px;
  gap:10px;align-items:center;font:400 15px/21px Inter,sans-serif}
#lf-seite .lf-stack{display:flex;height:42px;overflow:hidden;margin:8px 0 6px;gap:2px}
#lf-seite .lf-zeit{display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
#lf-seite .lf-zeit__phase{background:#fff;padding:30px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
#lf-seite .lf-zeit__phase h4{margin:0 0 10px;font:700 18px/24px Inter,sans-serif;
  text-transform:uppercase}
#lf-seite .lf-zeit__bar{height:4px;background:#d10000;margin:0 0 16px;width:48px}
#lf-seite .lf-schritte{display:grid;gap:1px}
#lf-seite .lf-schritt{background:#fff;padding:26px 30px;box-shadow:0 0 0 1px rgba(0,0,0,.1);
  display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start}
#lf-seite .lf-schritt__nr{font:700 26px/30px Inter,sans-serif;color:#d10000}
#lf-seite .lf-fluss{display:grid;gap:1px}
#lf-seite .lf-fluss__schritt{background:#fff;padding:22px 26px;box-shadow:0 0 0 1px rgba(0,0,0,.1)}

/* --- 7. Kaesten ----------------------------------------------------------- */
#lf-seite .lf-hinweis,#lf-seite .lf-warnung,#lf-seite .lf-beispiel,
#lf-seite .lf-einfach,#lf-seite .lf-testsatz,#lf-seite .lf-kasten{
  font:400 16px/25px Inter,sans-serif;background:#fff;padding:24px 28px;
  border-left:4px solid #d10000;margin:0 0 22px}
#lf-seite .lf-warnung{border-left-color:#8a6100}
#lf-seite .lf-beispiel{border-left-color:#1a7a35}
#lf-seite .lf-einfach{border-left-color:#1e1e1e}
#lf-seite .lf-hinweis p:last-child,#lf-seite .lf-warnung p:last-child,
#lf-seite .lf-beispiel p:last-child,#lf-seite .lf-einfach p:last-child{margin:0}
#lf-seite .lf-download{background:#fff;padding:24px 28px;box-shadow:0 0 0 1px rgba(0,0,0,.1);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:0 0 18px}
#lf-seite .lf-download__txt strong{display:block;font:700 18px/25px Inter,sans-serif}
#lf-seite .lf-download__txt span{font:400 14px/21px Inter,sans-serif;color:#7d7d7d}

/* --- 8. Werkzeuge, Fragen, Quellen --------------------------------------- */
#lf-seite .lf-tool{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);margin:0 0 34px}
#lf-seite .lf-tool__kopf{padding:34px 34px 0}
#lf-seite .lf-tool__kopf h3{margin:0 0 8px;font:700 25px/30px Inter,sans-serif;
  text-transform:uppercase}
#lf-seite .lf-tool__kopf p{font:400 16px/25px Inter,sans-serif;color:#5a5a5a;margin:0}
#lf-seite .lf-tool__body{padding:28px 34px 34px}
#lf-seite .lf-tool fieldset{border:0;margin:0 0 22px;padding:0}
#lf-seite .lf-feld__legende{font:700 18px/25px Inter,sans-serif;padding:0;margin:0 0 12px}
#lf-seite .lf-feld{margin:0 0 18px}
#lf-seite .lf-feld label{display:block;font:700 14px/20px Inter,sans-serif;margin:0 0 7px}
#lf-seite .lf-feld input,#lf-seite .lf-feld select{width:100%;
  font:400 16px/20px Inter,sans-serif;padding:12px 13px;
  border:1px solid rgba(127,127,127,.45);background:#fff;color:#1e1e1e}
#lf-seite .lf-radios{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
#lf-seite .lf-radios label{display:flex;gap:10px;align-items:flex-start;
  font:400 15px/21px Inter,sans-serif;padding:12px 14px;
  background:rgba(127,127,127,.12);cursor:pointer}
#lf-seite .lf-radios input{margin:3px 0 0;accent-color:#d10000}
#lf-seite .lf-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#lf-seite .lf-checks li{margin:0}
#lf-seite .lf-checks li label{display:flex;gap:11px;align-items:flex-start;
  font:400 15px/22px Inter,sans-serif;padding:11px 13px;
  background:rgba(127,127,127,.12);cursor:pointer}
#lf-seite .lf-checks input{margin:3px 0 0;accent-color:#d10000}
#lf-seite .lf-balken{height:14px;background:rgba(127,127,127,.25);margin:0 0 12px}
#lf-seite .lf-balken__fuell{height:100%;background:#d10000;width:0;transition:width .3s}
#lf-seite .lf-ergebnis{margin:22px 0 0;padding:22px;background:rgba(209,0,0,.07);
  border-left:4px solid #d10000;font:400 16px/25px Inter,sans-serif}
#lf-seite .lf-ergebnis p{margin:0 0 8px}
#lf-seite .lf-ergebnis p:last-child{margin:0}
#lf-seite .lf-btn{display:inline-flex;align-items:center;gap:12px;background:#d10000;
  color:#fafafa!important;font:700 14px/1 Inter,sans-serif;text-transform:uppercase;
  letter-spacing:.5px;border:0;border-radius:35px;padding:19px 34px;cursor:pointer;
  text-decoration:none}
#lf-seite .lf-btn:hover{background:#1e1e1e;color:#fafafa!important;text-decoration:none}
#lf-seite .lf-btn--klein{padding:13px 24px;font-size:13px!important}
#lf-seite .lf-btn--hell{background:#fff;color:#1e1e1e!important;
  box-shadow:inset 0 0 0 2px #d10000}
#lf-seite .lf-btn--hell:hover{background:#d10000;color:#fafafa!important}

#lf-seite .lf-faq{display:grid;gap:18px 58px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));align-items:start}
#lf-seite .lf-faq details{background:#f0f0f0;padding:0}
#lf-seite .lf-faq summary{display:flex;gap:20px;align-items:flex-start;
  justify-content:space-between;padding:26px 30px;list-style:none;cursor:pointer;
  font:700 18px/25.2px Inter,sans-serif;color:#1e1e1e}
#lf-seite .lf-faq summary::-webkit-details-marker{display:none}
#lf-seite .lf-faq summary::after{content:"+";flex:0 0 auto;width:34px;height:34px;
  border-radius:17px;background:#fff;color:#d10000;display:flex;align-items:center;
  justify-content:center;font:400 22px/1 Inter,sans-serif;transition:transform .2s}
#lf-seite .lf-faq details[open] summary::after{transform:rotate(45deg)}
#lf-seite .lf-faq__a{padding:0 30px 28px}
#lf-seite .lf-faq__a p{font:400 16px/25px Inter,sans-serif;color:#222;margin:0 0 12px}
#lf-seite .lf-faq__a p:last-child{margin:0}

#lf-seite ol.lf-quellen{list-style:none;padding:0;margin:0;counter-reset:q}
#lf-seite ol.lf-quellen li{counter-increment:q;position:relative;padding:18px 0 18px 42px;
  border-bottom:1px solid rgba(0,0,0,.1);font:400 15px/23px Inter,sans-serif;margin:0}
#lf-seite ol.lf-quellen li::before{content:counter(q);position:absolute;left:0;top:18px;
  font:700 14px/23px Inter,sans-serif;color:#d10000}
#lf-seite .lf-quellen__stand{display:block;font:400 13px/20px Inter,sans-serif;color:#7d7d7d}

/* --- 9. Bilder, Inhaltsverzeichnis, CTA-Baender --------------------------- */
#lf-seite img:where(:not(.sh-orig *)){max-width:100%;height:auto}
#lf-seite .sh-foto{display:block;width:100%;object-fit:cover;object-position:50% 35%;
  margin:30px 0 0}
#lf-seite .sh-toc{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
#lf-seite .sh-toc li{margin:0}
#lf-seite .sh-toc a{display:flex;gap:14px;align-items:baseline;background:#fff;
  padding:18px 22px;box-shadow:0 0 0 1px rgba(0,0,0,.1);
  font:400 16px/23px Inter,sans-serif;color:#1e1e1e}
#lf-seite .sh-toc a:hover{background:#d10000;color:#fafafa;text-decoration:none}
#lf-seite .sh-toc a span{font:700 12px/23px Inter,sans-serif;letter-spacing:.96px;
  color:#d10000;flex:0 0 auto}
#lf-seite .sh-toc a:hover span{color:#fafafa}

#lf-seite .sh-cta{padding:100px 0;background:#f2f2f2;overflow:hidden}
#lf-seite .sh-cta--team{padding:100px 0 0}
#lf-seite .sh-cta__rahmen{max-width:1378px;margin:0 auto;padding:0 15px}
#lf-seite .sh-cta__raster{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:58px;align-items:center}
#lf-seite .sh-cta__zeile{font:700 48px/54px Inter,sans-serif;text-transform:uppercase;
  color:#1e1e1e;letter-spacing:-.01em;margin:0 0 22px}
#lf-seite .sh-cta__zeile span{color:#d10000}
#lf-seite .sh-cta__text{font:400 16px/25px Inter,sans-serif;color:#1e1e1e;
  margin:0 0 40px;max-width:709px}
#lf-seite .sh-cta__knoepfe{display:flex;flex-wrap:wrap;gap:22px}
#lf-seite .sh-cta__bild{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  object-position:50% 35%}
#lf-seite .sh-cta__portraets{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:10px;margin:64px 0 -56px}
#lf-seite .sh-cta__portraets img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
#lf-seite .lf-btn--tel{background:#fff;color:#1e1e1e!important;
  border:3px solid #d10000;padding:16px 31px}
#lf-seite .lf-btn--tel:hover{background:#d10000;color:#fafafa!important;border-color:#d10000}
#lf-seite .lf-btn svg{flex:0 0 auto}

/* --- 10. Brücke: Gegenregeln zur Seitenvorlage ---------------------------
   Die Vorlage setzt Tabellenzellen mit !important (16/20, 20 px Innenabstand)
   und die erste Tabellenzeile in Versalien. Ohne diese Regeln sprengen die
   Tabellen ihre Spalte und die erste Zeile schreit. */
#lf-seite{--lf-rot:#d10000;--lf-rot-dunkel:#a80000;--lf-rot-hell:#fdf0f0;--lf-dunkel:#1e1e1e;--lf-text:#222222;--lf-text-hell:#4d4d4d;--lf-grau:#7d7d7d;--lf-bg:#ffffff;--lf-bg-grau:#fafafa;--lf-bg-grau2:#f0f0f0;--lf-linie:rgba(0,0,0,.14);--lf-linie-stark:rgba(0,0,0,.24);--lf-gruen:#1a7a35;--lf-gruen-hell:#f1f8f3;--lf-gelb:#8a6100;--lf-gelb-hell:#fff9ec;--lf-blau:#007095;--lf-blau-hell:#f0f7fa;--lf-radius:0px}
#lf-seite table:where(:not(.sh-orig *)){border:0!important;border-spacing:0!important;border-collapse:collapse!important;
  margin:0!important;background:transparent!important;width:100%}
#lf-seite table:where(:not(.sh-orig *)) td,#lf-seite table:where(:not(.sh-orig *)) th{font-size:16px!important;line-height:25px!important;
  padding:14px 12px!important;text-transform:none!important;background:transparent!important;
  border:0!important;text-align:left;vertical-align:top;overflow-wrap:break-word}
#lf-seite table:where(:not(.sh-orig *)) tr:nth-child(1){text-transform:none!important;font-weight:400!important}
#lf-seite table:where(:not(.sh-orig *)) tr:nth-child(1) td{background:transparent!important}
#lf-seite .lf-tabelle thead th,#lf-seite [data-tab] th[scope=col]{
  font-weight:700!important;font-size:12px!important;line-height:18px!important;
  letter-spacing:.96px;text-transform:uppercase!important;color:#fafafa!important;
  background:#1a1a1a!important;padding:13px 12px!important}
#lf-seite .lf-tabelle tbody th,#lf-seite [data-tab] th[scope=row]{
  font-weight:700!important;color:#1e1e1e}
#lf-seite .lf-radios label:has(input:checked),
#lf-seite .lf-checks li label:has(input:checked){background:#d10000;color:#fafafa;font-weight:600}
#lf-seite .lf-radios label:has(input:checked) *,
#lf-seite .lf-checks li label:has(input:checked) *{color:#fafafa}
#lf-seite .lf-radios label:hover,#lf-seite .lf-checks li label:hover{background:rgba(209,0,0,.12)}
#lf-seite .lf-radios label:has(input:checked):hover,
#lf-seite .lf-checks li label:has(input:checked):hover{background:#a80000}
#lf-seite .lf-ergebnis__reihe{display:grid;gap:26px;margin:0 0 18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
#lf-seite .lf-ergebnis__reihe > div{display:flex;flex-direction:column;gap:2px}
#lf-seite .lf-ergebnis__label{display:block;font:700 11px/16px Inter,sans-serif;letter-spacing:.96px;
  text-transform:uppercase;color:#5a5a5a}
#lf-seite .lf-ergebnis__zahl{display:block;font:700 32px/38px Inter,sans-serif;color:#1e1e1e;
  letter-spacing:-.01em}
#lf-seite .lf-ergebnis hr{border:0;border-top:1px solid rgba(0,0,0,.12);margin:20px 0}
#lf-seite .lf-ergebnis strong{font-weight:700;font-size:16px}
#lf-seite .lf-ergebnis ul{list-style:disc;margin:8px 0 0;padding-left:20px}
#lf-seite .lf-ergebnis li{font:400 15px/24px Inter,sans-serif}
#lf-seite .lf-hint-rot{font:400 16px/25px Inter,sans-serif;color:#1e1e1e;
  background:rgba(209,0,0,.07);border-left:4px solid #d10000;padding:14px 18px;
  margin:14px 0 0}
#lf-seite .lf-hint-rot strong{color:#1e1e1e}
#lf-seite pre{max-width:100%;overflow-x:auto;background:#fff;padding:18px 20px;
  box-shadow:0 0 0 1px rgba(0,0,0,.1);margin:0 0 22px}
#lf-seite pre code{font:400 14px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}
#lf-seite :where(p,li,td,th,a,h2,h3,h4,summary):where(:not(.sh-orig *)){overflow-wrap:break-word}
#lf-seite a:where(:not(.sh-orig *)){overflow-wrap:anywhere}

/* --- 11. Schmalere Bildschirme ------------------------------------------- */
@media (max-width:1023px){
  #lf-seite .sh-band{padding:64px 0}
  #lf-seite .sh-h2{font-size:30px;line-height:38px;margin-bottom:22px}
  #lf-seite h3{font-size:21px;line-height:27px}
  #lf-seite .sh-zwei{gap:34px}
  #lf-seite .sh-cta__raster{grid-template-columns:1fr;gap:34px}
  #lf-seite .lf-bar{grid-template-columns:1fr auto;gap:2px 12px}
  #lf-seite .lf-bar__track{grid-column:1/-1}
}
@media (max-width:760px){
  #lf-seite .sh-cta,#lf-seite .sh-cta--team{padding:64px 0}
  #lf-seite .sh-cta--team{padding-bottom:0}
  #lf-seite .sh-cta__zeile{font-size:30px;line-height:36px}
  #lf-seite .sh-cta__portraets{grid-template-columns:repeat(4,minmax(0,1fr));margin:40px 0 -28px}
  #lf-seite .sh-vorspann{font-size:18px;line-height:28px}
  #lf-seite table:where(:not(.sh-orig *)) td,#lf-seite table:where(:not(.sh-orig *)) th{padding:8px 12px!important}
  #lf-seite .lf-tabelle thead,#lf-seite [data-karten] thead{display:none}
  #lf-seite .lf-tabelle tbody tr,#lf-seite [data-karten] tbody tr{display:block;padding:8px 0;
    box-shadow:0 0 0 1px rgba(0,0,0,.1);margin:0 0 12px;background:#fff!important}
  #lf-seite .lf-tabelle td,#lf-seite .lf-tabelle tbody th,
  #lf-seite [data-karten] td,#lf-seite [data-karten] tbody th{display:block;padding:6px 14px!important}
  #lf-seite .lf-tabelle td::before,#lf-seite [data-karten] td::before{content:attr(data-th);display:block;
    font:700 11px/16px Inter,sans-serif;letter-spacing:.9px;text-transform:uppercase;color:#6a6a6a}
  #lf-seite .lf-tabelle tbody th,#lf-seite [data-karten] tbody th{padding-top:14px!important;font-size:18px!important}
  #lf-seite [data-karten] td:empty{display:none}
  #lf-seite [data-tab]{display:block;overflow-x:auto}
  #lf-seite .lf-tool__kopf{padding:26px 22px 0}
  #lf-seite .lf-tool__body{padding:22px}
  #lf-seite .sh-karte,#lf-seite .lf-karte,#lf-seite .lf-kachel,
  #lf-seite .lf-zahl,#lf-seite .lf-zeit__phase{padding:24px 22px}
  #lf-seite .lf-zahl__wert{font-size:32px;line-height:38px}
  #lf-seite .lf-ergebnis__zahl{font-size:26px;line-height:32px}
}
@media print{ .sh-vorschau-band{display:none} }

/* --- 12. Bausteine aus den Paketen ---------------------------------------
   Diese Komponenten kommen nur auf einzelnen Seiten vor (Eisberg, Zeitleiste,
   Treppe, Kreis, Quiz, Code, URL-Zeilen, Massnahmen, Stapelbalken ...).
   Beim Umstieg auf das neue Design hatten sie keine Regel mehr und wurden
   nackt ausgegeben. Hier zurueckgeholt und auf die neuen Werte gebracht. */
#lf-seite .lf-einfach__icon{flex:0 0 auto;font-size:20px;line-height:1.4}
#lf-seite .lf-karte__beleg{font-size:14px;color:var(--lf-grau);border-top:1px solid var(--lf-linie);padding-top:10px;margin-top:14px}
#lf-seite .lf-schritt__doku{background:var(--lf-bg-grau);border-radius:var(--lf-radius);padding:12px 16px;font-size:16px;margin:16px 0 0}
#lf-seite .lf-schritt__doku strong{color:var(--lf-rot)}
#lf-seite .lf-feld__hilfe{font-size:14px;color:var(--lf-grau);margin:-4px 0 8px;line-height:1.5}
#lf-seite .lf-checks__tipp{display:block;font-size:14px;color:var(--lf-gelb);margin:6px 0 0 30px;line-height:1.5}
#lf-seite .lf-checks li:has(input:checked) .lf-checks__tipp{display:none}
#lf-seite .lf-checks__gruppe{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--lf-grau);margin:22px 0 4px}
#lf-seite .lf-checks__gruppe:first-child{margin-top:0}
#lf-seite .lf-stack__name{font-weight:600;font-size:16px;margin:0 0 6px}
#lf-seite .lf-stack__bar{display:flex;height:30px;border-radius:3px;overflow:hidden}
#lf-seite .lf-stack__seg{display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;font-weight:600}
#lf-seite .lf-treppe{display:flex;gap:14px;align-items:flex-end}
#lf-seite .lf-treppe__stufe{flex:1;background:var(--lf-bg-grau);border-top:4px solid var(--lf-rot);padding:18px}
#lf-seite .lf-treppe__stufe:nth-child(1){padding-top:18px}
#lf-seite .lf-treppe__stufe:nth-child(2){padding-top:40px}
#lf-seite .lf-treppe__stufe:nth-child(3){padding-top:62px}
#lf-seite .lf-treppe__stufe h4{margin:0 0 8px;font-size:16px}
#lf-seite .lf-treppe__stufe p{margin:0;font-size:15px;line-height:1.55}
#lf-seite .lf-kreis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
#lf-seite .lf-kreis a{display:block;text-decoration:none;color:var(--lf-text);border:1px solid var(--lf-linie);border-radius:var(--lf-radius);padding:16px;font-size:15px;line-height:1.5;transition:all .15s}
#lf-seite .lf-kreis a:hover{border-color:var(--lf-rot);color:var(--lf-rot)}
#lf-seite .lf-kreis a strong{display:block;font-size:13px;color:var(--lf-rot);margin:0 0 6px;letter-spacing:.5px}
#lf-seite .lf-kreis--start a{background:var(--lf-bg-grau2)}
#lf-seite .lf-code{background:var(--lf-dunkel);border-radius:var(--lf-radius);padding:18px 20px;margin:32px 0;overflow-x:auto;max-width:100%}
/* Der dunkle Kasten bringt Hintergrund und Rahmen selbst mit. Ohne diese
   Gegenregeln setzt #lf-seite pre eine weisse Flaeche hinein - dann steht der
   helle Text auf Weiss und ist praktisch unlesbar. Der Strich unter jeder
   Zeile kommt vom Chip-Stil fuer <code> aus der Seitenvorlage. */
#lf-seite .lf-code pre{margin:0;white-space:pre;font-size:14px;line-height:1.6;
  background:transparent!important;box-shadow:none!important;padding:0;
  border:0;max-width:none;overflow-x:visible}
#lf-seite .lf-code code{font-family:'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  color:#e8e8e8!important;font-size:14px;background:none!important;
  padding:0!important;border:0!important;border-radius:0!important}
#lf-seite .lf-eisberg{max-width:620px;margin:0 auto;text-align:center}
#lf-seite .lf-eisberg>div{padding:18px 22px}
#lf-seite .lf-eisberg strong{display:block;font-size:19px;margin:0 0 6px}
#lf-seite .lf-eisberg span{display:block;font-size:15px;line-height:1.55}
#lf-seite .lf-eisberg__oben{background:#eaf4fa;border-radius:var(--lf-radius) var(--lf-radius) 0 0;width:52%;margin:0 auto;color:var(--lf-dunkel)}
#lf-seite .lf-eisberg__linie{border-top:2px dashed var(--lf-blau);border-bottom:2px dashed var(--lf-blau);background:#d9ecf5;padding:7px 22px!important}
#lf-seite .lf-eisberg__linie span{font-size:13px;color:var(--lf-blau);font-weight:600}
#lf-seite .lf-eisberg__mitte{background:#b9d9e8;width:82%;margin:0 auto;color:#10323f}
#lf-seite .lf-eisberg__unten{background:#23353d;color:#fff;border-radius:0 0 var(--lf-radius) var(--lf-radius)}
#lf-seite .lf-eisberg__unten span{color:rgba(255,255,255,.75)}
#lf-seite .lf-zeitleiste{position:relative;padding:0 0 0 0}
#lf-seite .lf-zl{display:grid;grid-template-columns:78px 1fr;gap:0 18px;align-items:start}
#lf-seite .lf-zl__jahr{font-weight:700;font-size:16px;color:var(--lf-dunkel);text-align:right;padding:10px 0;font-variant-numeric:tabular-nums}
#lf-seite .lf-zl__inhalt{border-left:3px solid var(--lf-linie);padding:10px 0 10px 22px;position:relative;font-size:16px;line-height:1.55}
#lf-seite .lf-zl__inhalt::before{content:"";position:absolute;left:-8px;top:17px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--lf-grau)}
#lf-seite .lf-zl--web .lf-zl__inhalt::before{border-color:var(--lf-rot);background:var(--lf-rot)}
#lf-seite .lf-zl--web .lf-zl__inhalt{border-left-color:var(--lf-rot-hell)}
#lf-seite .lf-zl--web .lf-zl__inhalt strong{color:var(--lf-rot)}
#lf-seite .lf-zl__spur{font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--lf-grau);display:block;margin-bottom:2px}
#lf-seite .lf-url-liste{margin:12px 0 0}
#lf-seite .lf-url-zeile{display:flex;gap:16px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--lf-linie)}
#lf-seite .lf-url-zeile:first-child{border-top:0}
#lf-seite .lf-url-chip{flex:0 0 auto;max-width:44%;font-family:'SF Mono',Menlo,Consolas,monospace;font-size:15px;padding:5px 8px;border-radius:3px;word-break:break-all}
#lf-seite .lf-url-zeile>div{flex:1 1 auto;min-width:0;font-size:16px}
#lf-seite .lf-quizfrage{border-top:1px solid var(--lf-linie)!important;padding-top:20px!important;margin-bottom:22px!important}
#lf-seite .lf-quizfrage:first-child{border-top:0!important;padding-top:0!important}
#lf-seite .lf-quizloesung{margin:14px 0 0;font-size:16px;line-height:1.6;background:var(--lf-bg-grau);border-radius:var(--lf-radius);padding:14px 16px}
#lf-seite .lf-kacheln--5{grid-template-columns:repeat(5,1fr);gap:10px}
#lf-seite .lf-kacheln--5 .lf-kachel{text-align:center;padding:14px 10px}
#lf-seite .lf-kacheln--5 .lf-kachel h4{font-size:15px}
#lf-seite .lf-kacheln--5 .lf-kachel p{font-size:13px}
#lf-seite .lf-massnahmen{counter-reset:ma;list-style:none;padding:0;margin:0}
#lf-seite .lf-massnahmen li{counter-increment:ma;position:relative;padding:16px 0 16px 46px;border-top:1px solid var(--lf-linie);font-size:16px;line-height:1.6}
#lf-seite .lf-massnahmen li:first-child{border-top:0}
#lf-seite .lf-massnahmen li::before{content:counter(ma);position:absolute;left:0;top:16px;width:30px;height:30px;border-radius:50%;background:var(--lf-rot);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
#lf-seite .lf-massnahmen li strong{color:var(--lf-dunkel)}
#lf-seite .lf-testsatz__de{font-size:21px;line-height:1.5;font-weight:600;color:var(--lf-dunkel);border-left:4px solid var(--lf-rot);padding:6px 0 6px 18px;margin:0 0 10px}
#lf-seite .lf-tabelle--sort th{padding:0}
#lf-seite .lf-tabelle--sort th button{all:unset;display:block;width:100%;box-sizing:border-box;padding:13px 16px;cursor:pointer;font-weight:600;font-size:14px;color:#fff}
#lf-seite .lf-tabelle--sort th button:hover{background:rgba(255,255,255,.12)}
#lf-seite .lf-tabelle--sort th button:focus-visible{outline:2px solid #fff;outline-offset:-3px}
#lf-seite .lf-dual__name{font-weight:600;font-size:16px}
#lf-seite .lf-dual__bars{display:grid;gap:5px}
#lf-seite .lf-dual__lab{color:var(--lf-grau);font-size:13px}
#lf-seite .lf-zahlen--4{grid-template-columns:repeat(4,1fr)}
#lf-seite .lf-tabelle--sort{min-width:1020px}
#lf-seite .lf-tabelle--sort td:first-child{min-width:260px;width:260px}
#lf-seite .lf-tabelle--sort td{vertical-align:top}
#lf-seite .lf-tabelle--sort td:not(:first-child){min-width:120px}
#lf-seite .lf-tag{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;background:var(--lf-bg-grau2);color:var(--lf-text-hell);padding:2px 7px;border-radius:3px;vertical-align:middle}
#lf-seite .lf-block{border:1px solid var(--lf-linie);border-radius:var(--lf-radius);padding:18px 20px;margin:16px 0 0;background:#fff}
#lf-seite .lf-block--zweit{background:var(--lf-bg-grau);border-style:dashed}
#lf-seite .lf-block__titel{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--lf-dunkel);margin:0 0 12px}
#lf-seite .lf-block__titel span{display:inline-block;margin-left:8px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--lf-grau);font-size:13px}
@media (max-width:1023px){
  #lf-seite .lf-kreis{grid-template-columns:1fr 1fr}
  #lf-seite .lf-treppe{display:block}
  #lf-seite .lf-treppe__stufe{padding:18px!important;margin:0 0 12px}
  #lf-seite .lf-eisberg__oben,#lf-seite .lf-eisberg__mitte{width:auto}
  #lf-seite .lf-zl{grid-template-columns:62px 1fr;gap:0 12px}
  #lf-seite .lf-zl__jahr{font-size:15px}
  #lf-seite .lf-zl__inhalt{padding-left:16px}
  #lf-seite .lf-testsatz__de{font-size:18px}
  #lf-seite .lf-zahlen--4{grid-template-columns:1fr 1fr}
  #lf-seite .lf-tabelle--sort{min-width:0}
  #lf-seite .lf-tabelle--sort td:first-child{min-width:0;width:auto}
  #lf-seite .lf-tabelle--sort td:not(:first-child){min-width:0}
}
@media (max-width:420px){
  #lf-seite .lf-kacheln--5{grid-template-columns:1fr}
}
@media (max-width:480px){
  #lf-seite .lf-zahlen--4{grid-template-columns:1fr}
}
@media (max-width:600px){
  #lf-seite .lf-url-zeile{display:block}
  #lf-seite .lf-url-chip{max-width:100%;display:inline-block;margin-bottom:8px}
}
@media (max-width:900px){
  #lf-seite .lf-kacheln--5{grid-template-columns:repeat(2,1fr)}
}

/* Ampel-Kaesten aus den Werkzeugen (gelb = Hinweis, rot = Fehler) */
#lf-seite .lf-ampel{font:400 16px/25px Inter,sans-serif;background:#fff;
  padding:20px 24px;border-left:4px solid #1a7a35;margin:0 0 14px}
#lf-seite .lf-ampel p{margin:0}
#lf-seite .lf-ampel p + p{margin:8px 0 0}
#lf-seite .lf-ampel strong{color:#1e1e1e}
#lf-seite .lf-ampel--gelb{border-left-color:#8a6100;background:#fff9ec}
#lf-seite .lf-ampel--rot{border-left-color:#d10000;background:#fdf0f0}
#lf-seite .lf-ampel--gruen{border-left-color:#1a7a35;background:#f1f8f3}
/* Preisherkunft hinter einem Ankreuzfeld */
#lf-seite .lf-herkunft{display:inline-block;font-style:normal;
  font:400 13px/18px Inter,sans-serif;color:#7d7d7d;margin-left:6px}
/* Kartenueberschriften: h3 und h4 gleich behandeln */
#lf-seite .lf-zeit__phase h3{margin:0 0 10px;font:700 18px/24px Inter,sans-serif;
  text-transform:none}
#lf-seite .lf-treppe__stufe h3{margin:0 0 8px;font:700 16px/23px Inter,sans-serif;
  text-transform:none}
#lf-seite .lf-kacheln--5 .lf-kachel h3{font-size:15px;line-height:21px}

/* --- 13. Nachbesserungen aus der Sichtpruefung --------------------------- */
/* Eingabefelder: die Seitenvorlage deckelt die Hoehe von select, dadurch
   wurde der gewaehlte Eintrag abgeschnitten. Und Felder mit Hilfetext
   standen tiefer als ihre Nachbarn. */
#lf-seite .lf-feld{display:flex;flex-direction:column;justify-content:flex-end}
#lf-seite .lf-feld label{margin:0 0 7px}
#lf-seite .lf-feld__hilfe{margin:-2px 0 8px}
#lf-seite .lf-feld input,#lf-seite .lf-feld select{
  height:auto!important;min-height:46px;box-sizing:border-box}
/* Eisberg: die unterste Schicht ist dunkel, die Beschriftung muss hell sein. */
#lf-seite .lf-eisberg__unten strong,#lf-seite .lf-eisberg__unten span{color:#fff}
#lf-seite .lf-eisberg__unten span{color:rgba(255,255,255,.78)}

/* --- 14. Klebende Spalten und zwei neue Seitenblöcke ---------------------
   Ist eine Spalte deutlich kuerzer als die andere, blieb daneben eine lange
   Leerflaeche stehen. Die kuerzere Spalte bleibt jetzt in Sicht. */
@media (min-width:1024px){
  #lf-seite .sh-zwei > .sh-text,
  #lf-seite .sh-zwei > .sh-seite{position:sticky;top:88px;align-self:start}
}

/* Bausteine: URL, HTTP, HTML im Zusammenspiel */
#lf-seite .sh-bau{display:grid;gap:1px;margin:18px 0 0}
#lf-seite .sh-bau__adresse,#lf-seite .sh-bau__format{background:#fafafa;padding:16px 18px;
  box-shadow:0 0 0 1px rgba(0,0,0,.1)}
#lf-seite .sh-bau__marke{display:inline-block;font:700 11px/16px Inter,sans-serif;
  letter-spacing:.96px;text-transform:uppercase;color:#fafafa;background:#d10000;
  padding:3px 9px;margin:0 0 8px}
#lf-seite .sh-bau code{display:block;font:400 13px/20px ui-monospace,Menlo,Consolas,monospace;
  color:#1e1e1e;word-break:break-all;margin:0 0 6px}
#lf-seite .sh-bau em{display:block;font:400 14px/21px Inter,sans-serif;font-style:normal;color:#5a5a5a}
#lf-seite .sh-bau__paar{display:grid;grid-template-columns:1fr auto 1fr;gap:1px;align-items:stretch}
#lf-seite .sh-bau__geraet{background:#1e1e1e;color:#fafafa;padding:18px 16px;text-align:center}
#lf-seite .sh-bau__geraet strong{display:block;font:700 16px/22px Inter,sans-serif;color:#fafafa}
#lf-seite .sh-bau__geraet span{display:block;font:400 13px/19px Inter,sans-serif;
  color:rgba(250,250,250,.72);margin:4px 0 0}
#lf-seite .sh-bau__leitung{background:#fafafa;box-shadow:0 0 0 1px rgba(0,0,0,.1);
  padding:14px 14px;display:flex;flex-direction:column;justify-content:center;gap:5px;
  text-align:center;min-width:112px}
#lf-seite .sh-bau__leitung i{display:block;font:400 12px/17px Inter,sans-serif;
  font-style:normal;color:#5a5a5a;white-space:nowrap}

/* Wer was beigetragen hat */
#lf-seite .sh-wer{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);padding:30px}
#lf-seite .sh-wer ol{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:1px}
#lf-seite .sh-wer li{display:grid;grid-template-columns:58px 1fr;gap:18px;
  padding:18px 0;border-top:1px solid rgba(0,0,0,.1)}
#lf-seite .sh-wer li:first-child{border-top:0;padding-top:0}
#lf-seite .sh-wer li:last-child{padding-bottom:0}
#lf-seite .sh-wer__kuerzel{display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;background:#d10000;color:#fafafa;
  font:700 17px/1 Inter,sans-serif;letter-spacing:.5px}
#lf-seite .sh-wer__kuerzel--grau{background:#1e1e1e}
#lf-seite .sh-wer strong{display:block;font:700 17px/24px Inter,sans-serif;color:#1e1e1e}
#lf-seite .sh-wer em{display:block;font:700 11px/16px Inter,sans-serif;font-style:normal;
  letter-spacing:.96px;text-transform:uppercase;color:#d10000;margin:3px 0 7px}
#lf-seite .sh-wer p{margin:0;font:400 15px/23px Inter,sans-serif;color:#3a3a3a}
@media (max-width:760px){
  #lf-seite .sh-bau__paar{grid-template-columns:1fr}
  #lf-seite .sh-wer{padding:24px 22px}
  #lf-seite .sh-wer li{grid-template-columns:46px 1fr;gap:14px}
  #lf-seite .sh-wer__kuerzel{width:46px;height:46px;font-size:14px}
}

/* Randnotiz: Kasten oder Liste, die neben den Text gewandert ist */
#lf-seite .sh-merk{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);padding:30px}
#lf-seite .sh-merk > :last-child{margin-bottom:0}
#lf-seite .sh-merk > p:first-child{margin-top:0}
#lf-seite .sh-merk .lf-hinweis,#lf-seite .sh-merk .lf-warnung,
#lf-seite .sh-merk .lf-beispiel,#lf-seite .sh-merk .lf-einfach,
#lf-seite .sh-merk .lf-kasten{background:transparent;padding:0 0 0 20px;margin:0}
#lf-seite .sh-merk ul{list-style:none;padding:0;margin:0 0 20px}
#lf-seite .sh-merk ul:last-child{margin-bottom:0}
#lf-seite .sh-merk ul > li{position:relative;padding:0 0 14px 26px;margin:0}
#lf-seite .sh-merk ul > li:last-child{padding-bottom:0}
#lf-seite .sh-merk ul > li::before{content:"";position:absolute;left:0;top:9px;
  width:9px;height:9px;background:#d10000}
#lf-seite .sh-merk ol{margin:0 0 20px;padding-left:22px}
#lf-seite .sh-merk ol:last-child{margin-bottom:0}
#lf-seite .sh-merk ol > li{padding:0 0 14px}
#lf-seite .sh-merk ol > li:last-child{padding-bottom:0}
@media (max-width:760px){ #lf-seite .sh-merk{padding:24px 22px} }
#lf-seite .sh-merk--breit{padding:38px 44px}
#lf-seite .sh-merk--breit .lf-beispiel{padding-left:24px}
@media (max-width:760px){ #lf-seite .sh-merk--breit{padding:26px 22px} }
#lf-seite .sh-fehl{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:1px}
#lf-seite .sh-fehl li{padding:14px 0;border-top:1px solid rgba(0,0,0,.1)}
#lf-seite .sh-fehl li:first-child{border-top:0;padding-top:0}
#lf-seite .sh-fehl li:last-child{padding-bottom:0}
#lf-seite .sh-fehl strong{display:block;font:700 15px/22px Inter,sans-serif;color:#1e1e1e}
#lf-seite .sh-fehl span{display:block;font:400 14px/21px Inter,sans-serif;color:#5a5a5a;margin:3px 0 0}
#lf-seite .sh-fehl code{font:400 13px/1 ui-monospace,Menlo,Consolas,monospace;background:rgba(0,0,0,.06);padding:1px 5px}
@media (min-width:1024px){
  #lf-seite .sh-karten--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- 15. Welle 4: wörtliches Zitat und Ergebnispaar --------------------- */
#lf-seite .lf-zitat{margin:0 0 30px;border-left:4px solid #1e1e1e;background:#fafafa;
  padding:26px 30px}
#lf-seite .lf-zitat blockquote{margin:0;padding:0;border:0;font-style:normal}
#lf-seite .lf-zitat blockquote p{margin:0 0 14px;font:400 17px/27px Inter,sans-serif;color:#1e1e1e}
#lf-seite .lf-zitat blockquote p:last-child{margin-bottom:0}
#lf-seite .lf-zitat blockquote p strong{color:#d10000}
#lf-seite .lf-zitat__quelle{margin:16px 0 0;font:400 14px/21px Inter,sans-serif;color:#7d7d7d}
#lf-seite .lf-ergebnis__paar{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
#lf-seite .lf-ergebnis__paar > div{min-width:0}
@media (max-width:760px){
  #lf-seite .lf-zitat{padding:20px 22px}
  #lf-seite .lf-zitat blockquote p{font-size:16px;line-height:25px}
  #lf-seite .lf-ergebnis__paar{grid-template-columns:1fr;gap:16px}
}


/* ==========================================================================
   Bewegungs-Baukasten für Grafiken          Stand 22.09.2026
   --------------------------------------------------------------------------
   Animiert wird ausschliesslich transform und opacity - nie ein Layout-Wert.
   Ohne JavaScript ist jede Grafik vollstaendig sichtbar: den Startzustand
   setzt erst html.lf-js (eine Inline-Zeile im Kopf, vor dem ersten Bildaufbau).
   .lf-da kommt von tools.js, sobald die Grafik in den Blick geraet.
   ========================================================================== */

/* --- 1. Balken wachsen auf ihren Wert ---------------------------------
   style="width:11.9%" bleibt das Layout. scaleX enthuellt diese Breite nur. */
.lf-js .lf-grafik__box:not(.lf-da) .lf-bar__fill,
.lf-js .lf-grafik__box:not(.lf-da) .lf-stack__seg,
.lf-js .lf-grafik__box:not(.lf-da) .lf-zeit__bar,
.lf-js .lf-grafik__box:not(.lf-da) .lf-balken__fuell{transform:scaleX(0)}

.lf-js .lf-grafik__box .lf-bar__fill,
.lf-js .lf-grafik__box .lf-stack__seg,
.lf-js .lf-grafik__box .lf-zeit__bar,
.lf-js .lf-grafik__box .lf-balken__fuell{transform-origin:left}

.lf-js .lf-grafik__box.lf-da .lf-bar__fill,
.lf-js .lf-grafik__box.lf-da .lf-stack__seg,
.lf-js .lf-grafik__box.lf-da .lf-zeit__bar,
.lf-js .lf-grafik__box.lf-da .lf-balken__fuell{
  animation:lf-wachs .8s cubic-bezier(.22,.7,.3,1) both;
  animation-delay:calc(var(--lf-i,0) * .07s);
}
@keyframes lf-wachs{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* Beschriftung im gestapelten Balken nicht mitstauchen */
.lf-js .lf-grafik__box.lf-da .lf-stack__seg > *{
  display:inline-block;
  animation:lf-gegen .8s cubic-bezier(.22,.7,.3,1) both;
  animation-delay:calc(var(--lf-i,0) * .07s);
}
@keyframes lf-gegen{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* Der Wert rechts kommt, wenn der Balken steht */
.lf-js .lf-grafik__box:not(.lf-da) .lf-bar__wert{opacity:0}
.lf-js .lf-grafik__box.lf-da .lf-bar__wert{
  animation:lf-auf .4s ease both;
  animation-delay:calc(var(--lf-i,0) * .07s + .45s);
}

/* --- 2. Gestaffeltes Auftauchen ---------------------------------------
   Kacheln, Karten, Zahlenfelder, Ablaufschritte, Phasen, Treppenstufen */
.lf-js .lf-grafik__box:not(.lf-da) .lf-kachel,
.lf-js .lf-grafik__box:not(.lf-da) .lf-karte,
.lf-js .lf-grafik__box:not(.lf-da) .lf-zahl,
.lf-js .lf-grafik__box:not(.lf-da) .lf-fluss__schritt,
.lf-js .lf-grafik__box:not(.lf-da) .lf-zeit__phase{opacity:0}
.lf-js .lf-grafik__box:not(.lf-da) .lf-treppe__stufe{opacity:0}

.lf-js .lf-grafik__box.lf-da .lf-kachel,
.lf-js .lf-grafik__box.lf-da .lf-karte,
.lf-js .lf-grafik__box.lf-da .lf-zahl,
.lf-js .lf-grafik__box.lf-da .lf-fluss__schritt,
.lf-js .lf-grafik__box.lf-da .lf-zeit__phase{
  animation:lf-rein .5s cubic-bezier(.22,.7,.3,1) both;
  animation-delay:calc(var(--lf-i,0) * .09s);
}
.lf-js .lf-grafik__box.lf-da .lf-treppe__stufe{
  transform-origin:bottom;
  animation:lf-stufe .55s cubic-bezier(.22,.7,.3,1) both;
  animation-delay:calc(var(--lf-i,0) * .12s);
}
@keyframes lf-rein{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
@keyframes lf-stufe{from{opacity:0; transform:scaleY(.7)} to{opacity:1; transform:scaleY(1)}}
@keyframes lf-auf{from{opacity:0} to{opacity:1}}

/* --- 3. Pflicht: Bewegung abschaltbar ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  .lf-js .lf-grafik__box:not(.lf-da) .lf-bar__fill,
  .lf-js .lf-grafik__box:not(.lf-da) .lf-stack__seg,
  .lf-js .lf-grafik__box:not(.lf-da) .lf-zeit__bar,
  .lf-js .lf-grafik__box:not(.lf-da) .lf-balken__fuell,
  .lf-js .lf-grafik__box:not(.lf-da) .lf-bar__wert,
  .lf-js .lf-grafik__box:not(.lf-da) .lf-kachel,
  .lf-js .lf-grafik__box:not(.lf-da) .lf-karte,
  .lf-js .lf-grafik__box:not(.lf-da) .lf-zahl,
  .lf-js .lf-grafik__box:not(.lf-da) .lf-fluss__schritt,
  .lf-js .lf-grafik__box:not(.lf-da) .lf-zeit__phase,
  .lf-js .lf-grafik__box:not(.lf-da) .lf-treppe__stufe,
  .lf-js .lf-grafik__box.lf-da .lf-bar__fill,
  .lf-js .lf-grafik__box.lf-da .lf-stack__seg,
  .lf-js .lf-grafik__box.lf-da .lf-stack__seg > *,
  .lf-js .lf-grafik__box.lf-da .lf-zeit__bar,
  .lf-js .lf-grafik__box.lf-da .lf-balken__fuell,
  .lf-js .lf-grafik__box.lf-da .lf-bar__wert,
  .lf-js .lf-grafik__box.lf-da .lf-kachel,
  .lf-js .lf-grafik__box.lf-da .lf-karte,
  .lf-js .lf-grafik__box.lf-da .lf-zahl,
  .lf-js .lf-grafik__box.lf-da .lf-fluss__schritt,
  .lf-js .lf-grafik__box.lf-da .lf-zeit__phase,
  .lf-js .lf-grafik__box.lf-da .lf-treppe__stufe{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
}


/* ==========================================================================
   Gewinner-Bausteine der WWW-Seite            Stand 22.09.2026
   --------------------------------------------------------------------------
   Die vier Bloecke bringen ihre Gestaltung als Stilangaben am Element mit.
   Was sich nicht am Element unterbringen laesst - Tabellenzeilen, Listen-
   punkte, Nummernkreise - steht hier, eng auf .sh-gw begrenzt, damit es mit
   den Bausteinen der uebrigen Seiten nicht kollidiert. Die Merkmale heissen
   data-gw*, weil data-karten im Haus schon vergeben ist.
   !important nur dort, wo die Seitenvorlage selbst mit !important arbeitet.
   ========================================================================== */

#lf-seite .sh-gw, #lf-seite .sh-gw *{box-sizing:border-box}
#lf-seite .sh-gw a{color:#d10000;text-decoration:none}
#lf-seite .sh-gw a:hover{color:#1e1e1e;text-decoration:underline}
#lf-seite .sh-gw a.sh-gw-toc{text-decoration:none}
#lf-seite .sh-gw a.sh-gw-toc:hover{color:#d10000!important;text-decoration:none}

#lf-seite .sh-gw [data-gwt]{width:100%;border-collapse:collapse}
#lf-seite .sh-gw [data-gwt] th[scope="col"]{background:#1a1a1a!important;color:#fff!important;
  font:700 12px/18px Inter,sans-serif!important;letter-spacing:.96px;
  text-transform:uppercase!important;text-align:left;padding:14px 16px!important}
#lf-seite .sh-gw [data-gwt] td,
#lf-seite .sh-gw [data-gwt] th[scope="row"]{padding:15px 16px!important;
  text-align:left;vertical-align:top;font:400 16px/25px Inter,sans-serif!important;
  color:#222;text-transform:none!important}
#lf-seite .sh-gw [data-gwt] th[scope="row"]{font-weight:700!important;color:#1e1e1e}
#lf-seite .sh-gw [data-gwt] tbody tr{background:#fff!important}
#lf-seite .sh-gw [data-gwt] tbody tr:nth-child(2n){background:#eaeaea!important}
#lf-seite .sh-gw [data-gwnum] td{font-variant-numeric:tabular-nums}

#lf-seite .sh-gw ul[data-gwl]{margin:0;padding:0;list-style:none}
#lf-seite .sh-gw ul[data-gwl] li{position:relative;padding:0 0 12px 26px;
  font:400 16px/25px Inter,sans-serif!important;color:#1e1e1e}
#lf-seite .sh-gw ul[data-gwl] li::before{content:"";position:absolute;left:0;top:9px;
  width:9px;height:9px;background:#d10000}

#lf-seite .sh-gw ol[data-gwo]{margin:0;padding:0 0 0 24px;counter-reset:s 0;list-style:none}
#lf-seite .sh-gw ol[data-gwo] li{position:relative;padding:0 0 14px;
  font:400 16px/25px Inter,sans-serif!important;color:#1e1e1e;counter-increment:s 1}
#lf-seite .sh-gw ol[data-gwo] li::before{content:counter(s) ".";position:absolute;
  left:-24px;font-weight:700;color:#d10000}

#lf-seite .sh-gw .lf-q{font-size:11px;vertical-align:super;font-weight:700;
  color:#d10000;margin-left:2px}

/* Das rote Leitsatz-Band: die Vorlage faerbt jedes <p> dunkel, die Vererbung
   von color:#fff am Elternteil verliert gegen jede passende Regel. */
#lf-seite .sh-gw .sh-gw-leit p{color:#fff!important}

@media (max-width:760px){
  #lf-seite .sh-gw [data-gwk] thead{display:none}
  #lf-seite .sh-gw [data-gwk] tbody tr{display:block;padding:8px 0}
  #lf-seite .sh-gw [data-gwk] td,
  #lf-seite .sh-gw [data-gwk] th[scope="row"]{display:block;padding:6px 16px!important;
    text-align:left!important}
  #lf-seite .sh-gw [data-gwk] td::before{content:attr(data-gwsp);display:block;
    font:700 11px/16px Inter,sans-serif!important;letter-spacing:.9px;
    text-transform:uppercase!important;color:#6a6a6a}
  #lf-seite .sh-gw [data-gwk] th[scope="row"]{padding-top:14px!important;font-size:18px!important}
}


/* ==========================================================================
   Gewinner-Bausteine als Klassen             Stand 22.09.2026
   --------------------------------------------------------------------------
   Dieselbe Gestaltung wie die vier Einzelstuecke auf der WWW-Seite, aber als
   benannte Klassen statt als Stilangaben am Element - damit sie auf allen
   Werkstattseiten gebaut werden koennen und es genau eine Stelle gibt, an der
   sich etwas aendern laesst.
   ========================================================================== */

/* --- Inhaltsverzeichnis als Raster --------------------------------------- */
#lf-seite .sh-gwi{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px 50px}
#lf-seite .sh-gwi__gruppe>p{font:700 12px/18px Inter,sans-serif;letter-spacing:.96px;
  text-transform:uppercase;color:#1e1e1e;border-bottom:3px solid #d10000;
  padding:0 0 10px;margin:0 0 14px}
#lf-seite .sh-gwi__liste{display:grid;gap:10px;margin:0;padding:0;list-style:none}
#lf-seite .sh-gwi__liste li{margin:0;padding:0}
#lf-seite .sh-gwi__liste li::before{content:none}
#lf-seite .sh-gwi a{display:grid;grid-template-columns:38px 1fr;gap:14px;
  align-items:baseline;color:#1e1e1e!important;text-decoration:none}
#lf-seite .sh-gwi a:hover{color:#d10000!important;text-decoration:none}
#lf-seite .sh-gwi__nr{font:700 12px/22px Inter,sans-serif;letter-spacing:.9px;
  color:#fff!important;background:#d10000;text-align:center}
#lf-seite .sh-gwi__text{font:400 17px/24px Inter,sans-serif;text-wrap:pretty}

/* --- Auftakt: grosse Aussage links, Kasten rechts ------------------------- */
#lf-seite .sh-gwa{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));
  gap:50px;align-items:start;margin:0 0 44px}
#lf-seite .sh-gwa__aussage{font:400 32px/44px Inter,sans-serif;color:#1e1e1e;
  margin:0;text-wrap:pretty}
#lf-seite .sh-gwa__aussage--mittel{font:400 26px/38px Inter,sans-serif}
#lf-seite .sh-gwa__aussage--klein{font:400 22px/34px Inter,sans-serif}
#lf-seite .sh-gwa__aussage strong{font-weight:700}
#lf-seite .sh-gwa--allein{display:block;max-width:980px}
#lf-seite .sh-gwa__kasten{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);padding:34px}
#lf-seite .sh-gwa__kasten>*:first-child{margin-top:0}
#lf-seite .sh-gwa__kasten>*:last-child{margin-bottom:0}
#lf-seite .sh-gwa__kasten p{font:400 16px/25px Inter,sans-serif;color:#1e1e1e;margin:0 0 18px}
#lf-seite .sh-gwa__kasten p:first-child strong{font:700 18px/25px Inter,sans-serif;color:#1e1e1e}

/* --- Kennzahlkarten ------------------------------------------------------- */
#lf-seite .sh-gwz{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px}
#lf-seite .sh-gwz__karte{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);
  padding:30px;display:flex;flex-direction:column;gap:14px}
#lf-seite .sh-gwz__zahl{font:700 40px/44px Inter,sans-serif;color:#d10000;margin:0}
#lf-seite .sh-gwz__titel{font:700 18px/25px Inter,sans-serif;text-transform:uppercase;
  color:#1e1e1e;margin:0}
#lf-seite .sh-gwz__text{font:400 16px/25px Inter,sans-serif;color:#222;margin:0}

/* --- Weisse Karte fuer Datengrafiken -------------------------------------- */
#lf-seite .sh-gwd{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1);
  padding:36px;margin:0 0 30px}

/* --- Rotes Band mit Leitsaetzen ------------------------------------------- */
#lf-seite .sh-gwl{background:#d10000;color:#fff;padding:34px 40px;margin:44px 0 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:36px}
#lf-seite .sh-gwl p{color:#fff!important;margin:0}
#lf-seite .sh-gwl__marke{font:700 11px/16px Inter,sans-serif;letter-spacing:.96px;
  text-transform:uppercase;margin:0 0 10px!important}
#lf-seite .sh-gwl__satz{font:700 22px/27px Inter,sans-serif}

@media (max-width:760px){
  #lf-seite .sh-gwa__aussage{font-size:26px;line-height:36px}
  #lf-seite .sh-gwa__kasten{padding:26px}
  #lf-seite .sh-gwz__karte{padding:24px}
  #lf-seite .sh-gwl{padding:26px 24px}
}