/* ========================================================================== Baukasten-Haut nach der WWW-Design-Datei (30.09.2026) Gilt nur auf Seiten mit
. 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} }