/* ==========================================================================
   Suchhelden-Bausteine (sh-bausteine.css) · Stand 10.11.2026
   Ziel im Repo: /assets/css/sh-bausteine.css (sites/de und sites/de/relaunch)
   Vorbild: /lexikon/world-wide-web.php · Regeln: Design_Anforderungen_Suchhelden_Seite
   Alle Klassen beginnen mit shb-, alle Keyframes mit shb-. Kein JavaScript.
   Doku mit Markup-Beispielen: 02_Umsetzung/design/BAUKASTEN.md
   ========================================================================== */

:root{
  --shb-rot:#D10000;
  --shb-schwarz:#0F0F10;
  --shb-band:#0B0B0C;
  --shb-grau:#F4F4F4;
  --shb-text:#3A3A3A;
  --shb-mittel:#5A5A5A;
  --shb-linie:#E6E6E6;
  --shb-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --shb-dauer:9s;
}

/* --------------------------------------------------------------------------
   1. Sections und Raster
   -------------------------------------------------------------------------- */
.shb-sec{padding:112px 40px 0}
.shb-sec--grau{margin-top:112px;background:var(--shb-grau);padding:104px 40px}
.shb-sec--ende{padding-bottom:112px}
.shb-in{max-width:1320px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
.shb-in--eng{gap:24px}
.shb-h2{margin:0;font-size:clamp(34px,4vw,54px);font-weight:700}
.shb-h3{margin:0;font-size:clamp(22px,2vw,28px);font-weight:700;letter-spacing:-0.02em;line-height:1.2;color:var(--shb-schwarz)}
.shb-rot{color:var(--shb-rot)}
.shb-lead{margin:0;max-width:860px;font-size:17px;line-height:1.75;color:var(--shb-text)}
.shb-quelle{margin:0;font-size:14px;line-height:1.6;color:var(--shb-mittel)}
.shb-quelle a{color:var(--shb-rot);font-weight:600}
/* Label über einer H2 (rote Linie + Versal-Wort), z. B. „KURZ GESAGT“ */
.shb-label{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--shb-rot)}
.shb-label::before{content:"";width:40px;height:2px;background:var(--shb-rot)}
.shb-kopf{display:flex;flex-direction:column;gap:18px}

/* Text | Grafik: beide Spalten gleich hoch (stretch), Grafikspalte füllt Restplatz */
.shb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:stretch}
.shb-grid--breit{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.shb-text,.shb-gfx{min-width:0;display:flex;flex-direction:column;gap:18px}
.shb-text > p,.shb-text > .shb-p{margin:0;font-size:17px;line-height:1.75;color:var(--shb-text)}
.shb-text a:not([class]),.shb-lead a:not([class]),.shb-info a:not([class]){color:var(--shb-rot);font-weight:600}
/* Restplatz: Standard = letztes Element wird gestreckt (bis ca. 150 px) */
.shb-gfx > :last-child{flex-grow:1}
/* mehr als ca. 150 px frei: Elemente gleichmäßig verteilen statt strecken */
.shb-gfx--verteilen{justify-content:space-between}
.shb-gfx--verteilen > :last-child{flex-grow:0}
/* Grafik bewusst oben, Rest frei (nur wenn Text deutlich länger ist und eine 2. Karte nichts Neues zeigt) */
.shb-gfx--oben > :last-child{flex-grow:0}
/* Feinausgleich: wenige Pixel zu hoch -> engerer Abstand in der Grafikspalte */
.shb-gfx--eng{gap:12px}
/* Textspalte: letzter Kasten darf ebenfalls strecken, damit beide Spalten bündig enden */
.shb-text--strecken > :last-child{flex-grow:1}
/* gestreckte Kästen: Inhalt mittig statt oben, damit keine leere Fläche unten entsteht */
.shb-text--strecken > .shb-info:last-child,.shb-text--strecken > .shb-kurz:last-child,.shb-gfx > .shb-info:last-child,.shb-gfx > .shb-kurz:last-child{justify-content:center}
/* gestreckte letzte Karte: Kopf oben, Inhalt mittig im Rest (nie Kacheln aufblasen) */
.shb-gfx > .shb-card:last-child > .shb-card__kopf{margin-bottom:auto}
.shb-gfx > .shb-card:last-child::after{content:"";margin-top:auto;margin-bottom:-18px}
.shb-gfx > .shb-card:last-child:has(> .shb-card__fuss)::after{display:none}
.shb-gfx > .shb-card:last-child > .shb-card__mitte{flex-grow:0}

/* --------------------------------------------------------------------------
   2. Grafik-Karte
   -------------------------------------------------------------------------- */
.shb-card{margin:0;background:#FFFFFF;color:var(--shb-schwarz);border:1.5px solid var(--shb-rot);border-radius:22px;padding:28px;display:flex;flex-direction:column;gap:18px;min-width:0}
.shb-card__kopf{display:flex;flex-direction:column;gap:6px}
.shb-ueber{font-family:var(--shb-mono);font-size:12px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--shb-rot);line-height:1.4}
.shb-card__titel{font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-0.01em;color:var(--shb-schwarz)}
.shb-card__fuss{margin-top:auto;font-size:13px;line-height:1.5;color:var(--shb-mittel)}
.shb-card__mitte{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:14px}

/* --------------------------------------------------------------------------
   3. Kacheln, Ablauf, 2er-Raster
   -------------------------------------------------------------------------- */
.shb-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.shb-raster--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.shb-kachel{background:var(--shb-grau);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.shb-kachel strong,.shb-kachel b{font-size:16px;line-height:1.3;color:var(--shb-schwarz)}
.shb-kachel span{font-size:14px;line-height:1.45;color:var(--shb-mittel)}
.shb-kachel--rot{background:var(--shb-rot)}
.shb-kachel--rot strong,.shb-kachel--rot b,.shb-kachel--rot span{color:#FFFFFF}
.shb-kachel--schwarz{background:var(--shb-schwarz)}
.shb-kachel--schwarz strong,.shb-kachel--schwarz b{color:#FFFFFF}
.shb-kachel--schwarz span{color:#BDBDBD}
.shb-kachel--mitte{align-items:center;text-align:center}
.shb-mono{font-family:var(--shb-mono)}

.shb-ablauf{display:flex;align-items:stretch;gap:8px}
.shb-ablauf > .shb-kachel{flex:1 1 0;align-items:center;text-align:center;justify-content:center}
.shb-pfeil{flex:0 0 auto;align-self:center;color:var(--shb-rot);font-size:20px;font-weight:800;line-height:1}
.shb-ablauf--senkrecht{flex-direction:column}
.shb-ablauf--senkrecht > .shb-pfeil{align-self:center}

/* Kachel-Liste im Text (z. B. Leistungen): weiße Karte, dünner grauer Rand */
.shb-liste2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.shb-punkt{background:#FFFFFF;border:1px solid var(--shb-linie);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.shb-sec--grau .shb-punkt{border-color:#E2E2E2}
.shb-punkt__kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shb-punkt__nr{font-family:var(--shb-mono);font-size:13px;font-weight:700;color:var(--shb-rot)}
.shb-punkt__tag{font-family:var(--shb-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#7A7A7A;text-align:right}
.shb-punkt h3,.shb-punkt__titel{margin:0;font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-0.01em;color:var(--shb-schwarz)}
.shb-punkt p{margin:0;font-size:15px;line-height:1.65;color:var(--shb-text)}
.shb-punkt a:not([class]){color:var(--shb-rot);font-weight:600}
.shb-liste1{display:flex;flex-direction:column;gap:12px}

/* Preis-Karten (nur in Preis-Sections): weiß, eine Karte rot umrandet */
.shb-pakete{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.shb-paket{background:#FFFFFF;border:1px solid var(--shb-linie);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:10px;min-width:0}
.shb-paket--rot{border:1.5px solid var(--shb-rot)}
.shb-paket__stufe{font-family:var(--shb-mono);font-size:12px;color:#7A7A7A}
.shb-paket h3{margin:0;font-size:21px;font-weight:700;color:var(--shb-schwarz)}
.shb-paket__preis{font-size:34px;font-weight:800;letter-spacing:-0.035em;line-height:1.04;color:var(--shb-rot)}
.shb-paket__preis small{font-size:16px;font-weight:600;letter-spacing:0;color:#6E6E6E}
.shb-paket p{margin:0;font-size:16px;line-height:1.6;color:var(--shb-text)}

/* --------------------------------------------------------------------------
   4. Infobox (grau) und Kurz-gesagt-Box (schwarz)
   -------------------------------------------------------------------------- */
.shb-info{background:var(--shb-grau);border-radius:16px;padding:24px 26px;display:flex;flex-direction:column;gap:8px}
.shb-sec--grau .shb-info,.shb-info--weiss{background:#FFFFFF}
.shb-info strong:first-child,.shb-info__titel{font-size:17px;font-weight:700;color:var(--shb-schwarz)}
.shb-info p{margin:0;font-size:16px;line-height:1.7;color:var(--shb-text)}
.shb-kurz{background:var(--shb-schwarz);color:#FFFFFF;border-radius:16px;padding:24px 26px;display:flex;flex-direction:column;gap:10px}
.shb-kurz__label{display:flex;align-items:center;gap:12px;font-family:var(--shb-mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:#E6E6E6}
.shb-kurz__label::before{content:"";width:28px;height:2px;background:var(--shb-rot)}
.shb-kurz p{margin:0;font-size:18px;line-height:1.55;font-weight:600;color:#FFFFFF}

/* --------------------------------------------------------------------------
   5. Schrittliste, Zeitleiste, Checkliste
   -------------------------------------------------------------------------- */
.shb-schritte{list-style:none;margin:0;padding:0;counter-reset:shb-s;display:flex;flex-direction:column;gap:14px}
.shb-schritte > li{counter-increment:shb-s;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:start}
.shb-schritte > li::before{content:counter(shb-s,decimal-leading-zero);grid-row:1 / span 3;width:44px;height:44px;border-radius:12px;background:#FDECEC;color:var(--shb-rot);font-family:var(--shb-mono);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.shb-schritte strong,.shb-schritte h3{margin:0;font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-0.01em;color:var(--shb-schwarz)}
.shb-schritte span,.shb-schritte p{margin:0;font-size:16px;line-height:1.65;color:var(--shb-text)}
.shb-schritte .shb-zeit{font-family:var(--shb-mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:#7A7A7A}

.shb-zeitleiste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.shb-zeitleiste > li{position:relative;padding:0 0 18px 30px;display:flex;flex-direction:column;gap:2px}
.shb-zeitleiste > li::before{content:"";position:absolute;left:5px;top:6px;bottom:-6px;width:2px;background:#DADADA}
.shb-zeitleiste > li:last-child{padding-bottom:0}
.shb-zeitleiste > li:last-child::before{display:none}
.shb-zeitleiste > li::after{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;background:var(--shb-schwarz);box-sizing:border-box}
.shb-zeitleiste > li:last-child::after{background:var(--shb-rot);box-shadow:0 0 0 4px #FDECEC}
.shb-zeitleiste .shb-zeit{font-family:var(--shb-mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:#7A7A7A}
.shb-zeitleiste > li:last-child .shb-zeit{color:var(--shb-rot)}
.shb-zeitleiste strong{font-size:16px;line-height:1.35;color:var(--shb-schwarz)}
.shb-zeitleiste span:not(.shb-zeit){font-size:14px;line-height:1.5;color:var(--shb-mittel)}

.shb-haken{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.shb-haken > li{display:flex;gap:14px;align-items:flex-start;font-size:17px;line-height:1.6;color:var(--shb-text)}
.shb-haken > li::before{content:"✓";flex:0 0 26px;height:26px;margin-top:1px;border-radius:50%;background:#FDECEC;color:var(--shb-rot);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}

/* --------------------------------------------------------------------------
   6. Zahlen-Kacheln, Säulen, Balken
   -------------------------------------------------------------------------- */
.shb-zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.shb-zahl{background:var(--shb-grau);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:4px;min-width:0}
.shb-zahl b{font-size:clamp(30px,2.8vw,40px);font-weight:700;letter-spacing:-0.03em;line-height:1.05;color:var(--shb-schwarz)}
.shb-zahl span{font-size:14px;line-height:1.45;color:var(--shb-mittel)}
.shb-zahl--rot{background:var(--shb-rot)}
.shb-zahl--rot b,.shb-zahl--rot span{color:#FFFFFF}
.shb-zahl--breit{grid-column:1 / -1}
.shb-raster--3 .shb-zahl b{font-size:clamp(22px,2vw,30px);white-space:nowrap}
.shb-zahl--schwarz{background:var(--shb-schwarz)}
.shb-zahl--schwarz b{color:#FFFFFF}
.shb-zahl--schwarz span{color:#BDBDBD}

/* Punkte-Reihe (z. B. „3 von 6“): gefüllte Punkte bekommen .is-an */
.shb-punkte{display:flex;flex-wrap:wrap;gap:10px}
.shb-punkte > i{width:28px;height:28px;border-radius:50%;background:var(--shb-grau);border:2px solid #DADADA}
.shb-punkte > i.is-an{background:var(--shb-rot);border-color:var(--shb-rot)}

/* Zeit-Spuren: je Zeile ein Abschnitt auf einer Achse, Beginn über --von, Länge über --w */
.shb-spuren{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.shb-spuren > li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 12px;align-items:center}
.shb-spuren > li > b{font-family:var(--shb-mono);font-size:13px;font-weight:700;color:var(--shb-schwarz)}
.shb-spuren > li > i{position:relative;display:block;height:26px;border-radius:8px;background:var(--shb-grau)}
.shb-spuren > li > i::after{content:"";position:absolute;top:0;bottom:0;left:var(--von,0%);width:var(--w,100%);border-radius:8px;background:var(--shb-schwarz);transform-origin:0 50%}
.shb-spuren > li.is-rot > i::after{background:var(--shb-rot)}
.shb-spuren > li.is-grau > i::after{background:#BDBDBD}
.shb-spuren > li > span{grid-column:2;font-size:13px;line-height:1.4;color:var(--shb-mittel)}
.shb-spuren__achse{display:flex;justify-content:space-between;margin-left:76px;font-family:var(--shb-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:#7A7A7A}

/* Säulen: Wert je Säule über --v (0 bis 1, z. B. .8847) im seitenbezogenen <style>-Block setzen */
.shb-saeulen{display:flex;align-items:flex-end;gap:14px;height:220px;padding-top:8px;border-bottom:2px solid var(--shb-schwarz)}
.shb-saeulen--gruppen{gap:26px}
.shb-saeulen--flach{height:170px}
.shb-gruppe{flex:1 1 0;min-width:0;height:100%;display:flex;gap:6px;align-items:flex-end}
.shb-saeule{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:6px;text-align:center}
.shb-saeule > b{font-size:14px;line-height:20px;font-weight:700;color:var(--shb-schwarz);white-space:nowrap}
.shb-saeule > i{display:block;height:calc((100% - 26px) * var(--v,.5));min-height:4px;background:#CFCFCF;border-radius:8px 8px 0 0;transform-origin:50% 100%}
.shb-saeule--rot > i{background:var(--shb-rot)}
.shb-saeule--rot > b{color:var(--shb-rot)}
.shb-saeule--schwarz > i{background:var(--shb-schwarz)}
.shb-achse{display:flex;gap:14px;margin-top:8px}
.shb-saeulen--gruppen + .shb-achse{gap:26px}
.shb-achse > span{flex:1 1 0;min-width:0;text-align:center;font-size:13px;line-height:1.35;font-weight:600;color:var(--shb-schwarz)}
.shb-legende{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--shb-mittel)}
.shb-legende > span{display:inline-flex;align-items:center;gap:6px}
.shb-legende > span::before{content:"";width:12px;height:12px;border-radius:3px;background:#CFCFCF}
.shb-legende > .is-rot::before{background:var(--shb-rot)}
.shb-legende > .is-schwarz::before{background:var(--shb-schwarz)}

/* Balken (waagerecht): Breite über --w (0–100 %) */
.shb-balken{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.shb-balken > li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline}
.shb-balken > li > span{font-size:14px;font-weight:600;color:var(--shb-schwarz)}
.shb-balken > li > b{font-size:14px;font-weight:700;color:var(--shb-schwarz)}
.shb-balken > li > i{grid-column:1 / -1;display:block;height:12px;border-radius:6px;background:var(--shb-grau);overflow:hidden;position:relative}
.shb-balken > li > i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,50%);background:#BDBDBD;border-radius:6px;transform-origin:0 50%}
.shb-balken > li.is-rot > i::after{background:var(--shb-rot)}
.shb-balken > li.is-rot > b{color:var(--shb-rot)}
.shb-balken > li.is-schwarz > i::after{background:var(--shb-schwarz)}

/* Gestapelter Balken (Anteile): Segmente mit --w */
.shb-stapel{display:flex;height:44px;border-radius:12px;overflow:hidden;background:var(--shb-grau)}
.shb-stapel > span{flex:0 0 var(--w,50%);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#FFFFFF;background:var(--shb-schwarz);white-space:nowrap;overflow:hidden;transform-origin:0 50%}
.shb-stapel > span.is-rot{background:var(--shb-rot)}
.shb-stapel > span.is-grau{background:#BDBDBD;color:var(--shb-schwarz)}

/* --------------------------------------------------------------------------
   7. Vergleich zwei Spalten (rechte schwarz), ✓/✕, Chips
   -------------------------------------------------------------------------- */
.shb-vergleich{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.shb-vergleich > div{background:var(--shb-grau);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.shb-vergleich > div:last-child{background:var(--shb-schwarz);color:#FFFFFF}
.shb-vergleich h4,.shb-vergleich__titel{margin:0;font-size:16px;font-weight:700;color:inherit}
.shb-vergleich ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.shb-vergleich li{font-size:14px;line-height:1.45;color:var(--shb-text);padding-top:8px;border-top:1px solid #E0E0E0}
.shb-vergleich > div:last-child li{color:#D6D6D6;border-top-color:#2A2A2C}
.shb-vergleich li b{display:block;font-family:var(--shb-mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#7A7A7A;margin-bottom:2px}
.shb-vergleich > div:last-child li b{color:#9A9A9A}

.shb-janein{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.shb-janein > div{border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;background:var(--shb-grau)}
.shb-janein > div:last-child{background:var(--shb-schwarz);color:#FFFFFF}
.shb-janein__titel{font-family:var(--shb-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--shb-schwarz)}
.shb-janein > div:last-child .shb-janein__titel{color:#E6E6E6}
.shb-janein ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.shb-janein li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45}
.shb-janein li::before{content:"✓";flex:0 0 20px;height:20px;border-radius:50%;background:var(--shb-rot);color:#FFFFFF;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.shb-janein > div:last-child li{color:#D6D6D6}
.shb-janein > div:last-child li::before{content:"✕";background:#3A3A3C;color:#FFFFFF}

.shb-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.shb-chips > li,.shb-chip{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:var(--shb-grau);font-size:13px;font-weight:600;line-height:1.2;color:var(--shb-schwarz)}
.shb-chips > li.is-rot,.shb-chip--rot{background:var(--shb-rot);color:#FFFFFF}
.shb-chips > li.is-schwarz{background:var(--shb-schwarz);color:#FFFFFF}
.shb-chips--dunkel > li{background:#26262A;color:#FFFFFF}
.shb-kachel .shb-chips{margin-top:6px}
.shb-kachel .shb-chips > li{background:#FFFFFF;color:var(--shb-schwarz)}
.shb-kachel--mitte .shb-chips,.shb-ablauf .shb-chips{justify-content:center}

/* --------------------------------------------------------------------------
   8. Ansichten: Chat, Einstellungen, Browser
   -------------------------------------------------------------------------- */
.shb-chat{background:var(--shb-grau);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.shb-chat__kopf{display:flex;align-items:center;gap:8px;font-family:var(--shb-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:#7A7A7A}
.shb-chat__kopf::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--shb-rot)}
.shb-chat__frage{align-self:flex-end;max-width:85%;background:var(--shb-schwarz);color:#FFFFFF;border-radius:14px 14px 4px 14px;padding:10px 14px;font-size:14px;line-height:1.45}
.shb-chat__antwort{align-self:flex-start;max-width:92%;background:#FFFFFF;border:1px solid var(--shb-linie);border-radius:14px 14px 14px 4px;padding:10px 14px;font-size:14px;line-height:1.5;color:var(--shb-text)}
.shb-chat__antwort mark{background:#FDECEC;color:var(--shb-rot);font-weight:700;padding:0 3px;border-radius:4px}

.shb-einst{background:#FFFFFF;border:1px solid var(--shb-linie);border-radius:16px;overflow:hidden}
.shb-einst__kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--shb-grau);font-size:13px;font-weight:700;color:var(--shb-schwarz)}
.shb-einst__kopf span{font-family:var(--shb-mono);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#7A7A7A}
.shb-einst__zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border-top:1px solid #EFEFEF;font-size:14px;line-height:1.4;color:var(--shb-schwarz)}
.shb-einst__zeile small{display:block;font-size:12px;color:var(--shb-mittel)}
.shb-schalter{flex:0 0 auto;position:relative;width:40px;height:22px;border-radius:999px;background:#CFCFCF}
.shb-schalter::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.shb-schalter.is-an{background:var(--shb-rot)}
.shb-schalter.is-an::after{transform:translateX(18px)}
.shb-einst__wert{flex:0 0 auto;font-family:var(--shb-mono);font-size:12px;padding:4px 8px;border-radius:6px;background:var(--shb-grau);color:var(--shb-schwarz)}

.shb-browser{border:1.5px solid var(--shb-schwarz);border-radius:14px;overflow:hidden;background:#FFFFFF}
.shb-browser__leiste{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--shb-grau);border-bottom:1px solid var(--shb-linie)}
.shb-browser__leiste > i{width:9px;height:9px;border-radius:50%;background:#CFCFCF}
.shb-browser__leiste > i:first-child{background:var(--shb-rot)}
.shb-browser__url{flex:1 1 auto;min-width:0;margin-left:6px;padding:4px 10px;border-radius:999px;background:#FFFFFF;font-family:var(--shb-mono);font-size:12px;color:var(--shb-schwarz);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shb-browser__inhalt{padding:14px;display:flex;flex-direction:column;gap:10px}
.shb-anzeige{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:var(--shb-grau)}
.shb-anzeige small{font-family:var(--shb-mono);font-size:11px;color:#7A7A7A}
.shb-anzeige small b{color:var(--shb-schwarz)}
.shb-anzeige strong{font-size:14px;color:#1A0DAB}
.shb-anzeige span{font-size:12px;line-height:1.4;color:var(--shb-mittel)}
.shb-anzeige.is-rot{background:#FFFFFF;border:1.5px solid var(--shb-rot)}

/* --------------------------------------------------------------------------
   9. Organigramm (Baum mit Verbindungslinien)
   -------------------------------------------------------------------------- */
.shb-org{display:flex;flex-direction:column;align-items:center}
.shb-org__knoten{background:var(--shb-grau);border-radius:12px;padding:10px 14px;text-align:center;display:flex;flex-direction:column;gap:2px;min-width:0}
.shb-org__knoten b{font-size:15px;color:var(--shb-schwarz)}
.shb-org__knoten span{font-size:12px;line-height:1.35;color:var(--shb-mittel)}
.shb-org__knoten--top{background:var(--shb-schwarz)}
.shb-org__knoten--top b{color:#FFFFFF}
.shb-org__knoten--top span{color:#BDBDBD}
.shb-org__knoten--rot{background:var(--shb-rot)}
.shb-org__knoten--rot b,.shb-org__knoten--rot span{color:#FFFFFF}
.shb-org__ebene{list-style:none;margin:0;padding:18px 0 0;display:flex;gap:10px;position:relative;width:100%}
.shb-org__ebene::before{content:"";position:absolute;top:0;left:50%;width:2px;height:9px;background:var(--shb-rot)}
.shb-org__ebene > li{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:stretch;padding-top:9px}
.shb-org__ebene > li::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--shb-rot)}
.shb-org__ebene > li:first-child::before{left:50%}
.shb-org__ebene > li:last-child::before{right:50%}
.shb-org__ebene > li:only-child::before{display:none}
.shb-org__ebene > li::after{content:"";position:absolute;top:0;left:50%;width:2px;height:9px;background:var(--shb-rot)}
.shb-org__ebene .shb-org__ebene{padding-top:14px}

/* --------------------------------------------------------------------------
   10. Buttons, CTA-Band, Team-Band, Standort (Markup wie www)
   -------------------------------------------------------------------------- */
.shb-btn{display:inline-flex;align-items:center;gap:12px;background:var(--shb-rot);color:#FFFFFF;padding:8px 8px 8px 24px;border-radius:999px;font-weight:600;font-size:16px;line-height:1.2;transition:transform .15s ease}
.shb-btn:hover{color:#FFFFFF;transform:scale(.97)}
.shb-btn > span:last-child{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--shb-schwarz);display:flex;align-items:center;justify-content:center}
.shb-btn--weiss{background:#FFFFFF;color:var(--shb-schwarz)}
.shb-btn--weiss:hover{color:var(--shb-schwarz)}
.shb-btn--weiss > span:last-child{background:var(--shb-rot);color:#FFFFFF}
.shb-btn--schwarz{background:var(--shb-schwarz);color:#FFFFFF}
.shb-btn--schwarz > span:last-child{background:var(--shb-rot)}
.shb-btn--rand{background:transparent;border:1px solid #3A3A3C;color:#FFFFFF;padding:16px 24px}
.shb-btn--rand > span:last-child{flex:0 0 auto;width:auto;height:auto;background:none;border-radius:0}
.shb-btn--rand-hell{border-color:#CFCFCF;color:var(--shb-schwarz)}
.shb-btn--rand-hell:hover{color:var(--shb-rot);border-color:var(--shb-rot)}
.shb-btn--rand:hover{color:#FFFFFF;border-color:#FFFFFF}
.shb-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.shb-cta{position:relative;overflow:hidden;margin-top:112px;background:var(--shb-band);color:#FFFFFF;padding:88px 40px}
.shb-sec--grau + .shb-cta{margin-top:0}
.shb-cta__glow{position:absolute;right:-10%;top:-60%;width:900px;height:600px;background:radial-gradient(ellipse at center,rgba(209,0,0,0.30),rgba(11,11,12,0) 65%);pointer-events:none}
.shb-cta__in{position:relative;max-width:1320px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px 64px;align-items:center;justify-content:space-between}
.shb-cta__text{flex:1 1 560px;min-width:0;display:flex;flex-direction:column;gap:16px}
.shb-cta h2{margin:0;font-size:clamp(30px,3.4vw,46px);font-weight:700;color:#FFFFFF}
.shb-cta p{margin:0;font-size:17px;line-height:1.75;color:#BDBDBD}
.shb-cta__titel{display:block;font-size:clamp(30px,3.4vw,46px);font-weight:700;color:#FFFFFF}

.shb-team{margin-top:104px;position:relative;overflow:hidden;min-height:680px;display:flex;align-items:flex-end;color:#FFFFFF;background:var(--shb-band)}
.shb-team > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.shb-team__schleier{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,0.88) 0%,rgba(11,11,12,0.62) 45%,rgba(11,11,12,0.25) 100%),linear-gradient(0deg,rgba(11,11,12,0.75) 0%,rgba(11,11,12,0) 55%)}
.shb-team__in{position:relative;width:100%;max-width:1320px;margin:0 auto;padding:120px 40px 96px;display:flex;flex-direction:column;gap:26px}
.shb-team__ueber{display:flex;align-items:center;gap:14px;font-family:var(--shb-mono);font-size:13px;letter-spacing:0.12em;color:#E6E6E6}
.shb-team__ueber::before{content:"";width:36px;height:2px;background:var(--shb-rot)}
.shb-team h2{margin:0;max-width:900px;font-size:clamp(44px,5.6vw,80px);font-weight:800;line-height:1.02;color:#FFFFFF}
.shb-team h2 .shb-rot{text-shadow:0 2px 24px rgba(0,0,0,0.35)}
.shb-team p{margin:0;max-width:640px;font-size:19px;line-height:1.6;color:#E6E6E6}
.shb-team__fakten{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;align-self:flex-start;padding:14px 24px;border-radius:999px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.22);backdrop-filter:blur(8px);font-size:15px;font-weight:500;color:#FFFFFF}
.shb-team__fakten > i{width:6px;height:6px;border-radius:50%;background:var(--shb-rot)}

.shb-standort{display:flex;flex-wrap:wrap;margin-top:112px}
.shb-standort__dunkel{flex:1 1 480px;background:var(--shb-band);color:#FFFFFF;padding:72px clamp(32px,6vw,96px);display:flex;flex-direction:column;gap:28px}
.shb-standort__dunkel h2{margin:0;font-size:36px;font-weight:700;letter-spacing:-0.02em;color:#FFFFFF}
.shb-standort__spalten{display:flex;flex-wrap:wrap;gap:32px 64px;font-size:15px;line-height:1.6}
.shb-standort__spalten > div{display:flex;flex-direction:column}
.shb-standort__spalten strong{font-size:17px;color:#FFFFFF}
.shb-standort__spalten span,.shb-standort__spalten a{color:#A8A8A8}
.shb-standort__spalten a:hover{color:#FFFFFF}
.shb-standort__hinweis{font-size:14px;color:#8A8A8A}
.shb-standort__hell{flex:1 1 480px;background:var(--shb-grau);padding:72px clamp(32px,6vw,96px);display:flex;flex-direction:column;justify-content:center;gap:28px}
.shb-standort__hell p{margin:0;font-size:19px;line-height:1.65;color:#2A2A2A}
.shb-standort__zahlen{display:flex;flex-wrap:wrap;gap:40px}
.shb-standort__zahlen > div{display:flex;flex-direction:column}
.shb-standort__zahlen b{font-size:40px;font-weight:700;letter-spacing:-0.03em;color:var(--shb-schwarz)}
.shb-standort__zahlen span{font-size:14px;color:var(--shb-mittel)}

/* --------------------------------------------------------------------------
   10b. Werkzeug-Ergebnis / Ampel (Nachzug R3, 11.11.2026)
   Statt farbiger Pastell-Fläche: weiße Box, dünner Rand, rote Mono-Überzeile,
   Status nur als kleiner farbiger Punkt neben dem Statuswort im Text.
   !important, weil Rechner-Skripte die Hintergrundfarbe per JS setzen.
   -------------------------------------------------------------------------- */
.shb-ampel{background:#FFFFFF!important;border:1px solid #DEDEDE!important;border-radius:14px!important;padding:14px 18px 16px!important;display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;gap:6px 12px!important;box-shadow:none!important}
.shb-ampel::before{content:"Ergebnis";flex:1 0 100%;font-family:var(--shb-mono);font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--shb-rot);line-height:1.4}
.shb-ampel__punkt{flex:0 0 12px!important;width:12px!important;height:12px!important;margin:0!important;border-radius:50%!important;align-self:center!important;box-shadow:0 0 0 3px #F4F4F4}
.shb-ampel > :not(.shb-ampel__punkt){flex:1 1 0;min-width:0}
/* KI-Check, der aus einer Textspalte unter das Raster gezogen wurde (R1) */
.shb-kicheck{min-width:0}
/* Grafik-Karten als Reihe unter dem Text (wenn die Textspalte für ein Raster zu kurz ist); unter 980 px aus wie die Grafikspalte */
.shb-kartenreihe{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:18px;align-items:stretch}
@media (max-width:979px){.shb-kartenreihe{display:none}}

/* --------------------------------------------------------------------------
   11. Motion (nur CSS-Keyframes; Grundzustand = fertiges Standbild)
   Bewegungsklasse (shb-m-…) direkt an den Baustein; .shb-m ist nur noch Marker für die Prüfung.
   -------------------------------------------------------------------------- */
/* Säulen/Balken wachsen, halten, setzen zurück (Container bekommt .shb-m-wachsen) */
.shb-m-wachsen .shb-saeule > i{animation:shb-wachsen-y var(--shb-dauer) ease-out infinite both}
.shb-balken.shb-m-wachsen > li > i::after,.shb-spuren.shb-m-wachsen > li > i::after,.shb-stapel.shb-m-wachsen > span{animation:shb-wachsen-x var(--shb-dauer) ease-out infinite both}
.shb-m-wachsen > :nth-child(2) > i,.shb-m-wachsen > :nth-child(2) > i::after,.shb-m-wachsen .shb-saeule:nth-child(2) > i,.shb-stapel.shb-m-wachsen > span:nth-child(2){animation-delay:.25s}
.shb-m-wachsen > :nth-child(3) > i,.shb-m-wachsen > :nth-child(3) > i::after,.shb-m-wachsen .shb-saeule:nth-child(3) > i,.shb-stapel.shb-m-wachsen > span:nth-child(3){animation-delay:.5s}
.shb-m-wachsen > :nth-child(4) > i,.shb-m-wachsen > :nth-child(4) > i::after{animation-delay:.75s}
.shb-m-wachsen > :nth-child(5) > i,.shb-m-wachsen > :nth-child(5) > i::after{animation-delay:1s}
.shb-m-wachsen > :nth-child(6) > i,.shb-m-wachsen > :nth-child(6) > i::after{animation-delay:1.25s}
.shb-m-wachsen .shb-gruppe:nth-child(2) .shb-saeule > i{animation-delay:.5s}
.shb-m-wachsen .shb-gruppe:nth-child(2) .shb-saeule:nth-child(2) > i{animation-delay:.75s}
.shb-m-wachsen .shb-gruppe:nth-child(3) .shb-saeule > i{animation-delay:1s}
.shb-m-wachsen .shb-gruppe:nth-child(3) .shb-saeule:nth-child(2) > i{animation-delay:1.25s}
@keyframes shb-wachsen-y{0%{transform:scaleY(0)}18%,88%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
@keyframes shb-wachsen-x{0%{transform:scaleX(0)}18%,88%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}

/* Folge: Kinder leuchten nacheinander auf (max. 8), für Ablauf, Zeitleiste, Punkte */
.shb-m-folge > *{animation:shb-folge var(--shb-dauer) ease-in-out infinite both}
.shb-m-folge > :nth-child(2){animation-delay:calc(var(--shb-dauer) * .1)}
.shb-m-folge > :nth-child(3){animation-delay:calc(var(--shb-dauer) * .2)}
.shb-m-folge > :nth-child(4){animation-delay:calc(var(--shb-dauer) * .3)}
.shb-m-folge > :nth-child(5){animation-delay:calc(var(--shb-dauer) * .4)}
.shb-m-folge > :nth-child(6){animation-delay:calc(var(--shb-dauer) * .5)}
.shb-m-folge > :nth-child(7){animation-delay:calc(var(--shb-dauer) * .6)}
.shb-m-folge > :nth-child(8){animation-delay:calc(var(--shb-dauer) * .7)}
@keyframes shb-folge{0%{opacity:.35;transform:translateY(4px)}8%,86%{opacity:1;transform:none}96%,100%{opacity:.35;transform:translateY(4px)}}
.shb-m-folge > .shb-pfeil{animation-name:shb-folge-pfeil}
@keyframes shb-folge-pfeil{0%{opacity:0;transform:translateX(-6px)}8%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(-6px)}}

/* Einblenden: Kinder erscheinen nacheinander (Chat-Verlauf, Liste) */
.shb-m-ein > *{animation:shb-ein var(--shb-dauer) ease-out infinite both}
.shb-m-ein > :nth-child(2){animation-delay:calc(var(--shb-dauer) * .12)}
.shb-m-ein > :nth-child(3){animation-delay:calc(var(--shb-dauer) * .24)}
.shb-m-ein > :nth-child(4){animation-delay:calc(var(--shb-dauer) * .36)}
.shb-m-ein > :nth-child(5){animation-delay:calc(var(--shb-dauer) * .48)}
.shb-m-ein > :nth-child(6){animation-delay:calc(var(--shb-dauer) * .6)}
@keyframes shb-ein{0%{opacity:0;transform:translateY(8px)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(8px)}}

/* Punkt wandert über eine Strecke (.shb-strecke > .shb-m-punkt) */
.shb-strecke{position:relative;height:10px;border-radius:5px;background:var(--shb-grau)}
.shb-strecke > i{position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--shb-rot);box-shadow:0 0 0 5px rgba(209,0,0,.15);left:100%}
.shb-strecke > i{animation:shb-wandern var(--shb-dauer) ease-in-out infinite both}
@keyframes shb-wandern{0%{left:0}80%,100%{left:100%}}

/* Schalter gehen nacheinander an */
.shb-m-schalten .shb-schalter.is-an{animation:shb-schalter-bg var(--shb-dauer) infinite both}
.shb-m-schalten .shb-schalter.is-an::after{animation:shb-schalter-knopf var(--shb-dauer) infinite both}
.shb-m-schalten > :nth-child(3) .shb-schalter.is-an,.shb-m-schalten > :nth-child(3) .shb-schalter.is-an::after{animation-delay:.6s}
.shb-m-schalten > :nth-child(4) .shb-schalter.is-an,.shb-m-schalten > :nth-child(4) .shb-schalter.is-an::after{animation-delay:1.2s}
.shb-m-schalten > :nth-child(5) .shb-schalter.is-an,.shb-m-schalten > :nth-child(5) .shb-schalter.is-an::after{animation-delay:1.8s}
@keyframes shb-schalter-bg{0%,10%{background:#CFCFCF}16%,90%{background:var(--shb-rot)}96%,100%{background:#CFCFCF}}
@keyframes shb-schalter-knopf{0%,10%{transform:none}16%,90%{transform:translateX(18px)}96%,100%{transform:none}}

/* Puls (ein rotes Element, z. B. Ergebnis) */
.shb-m-puls{animation:shb-puls 2.4s ease-out infinite}
@keyframes shb-puls{0%{box-shadow:0 0 0 0 rgba(209,0,0,.40)}70%{box-shadow:0 0 0 12px rgba(209,0,0,0)}100%{box-shadow:0 0 0 0 rgba(209,0,0,0)}}

/* Fließlinie in SVG: <path class="shb-m-fluss" stroke-dasharray="6 6"> */
.shb-m-fluss{animation:shb-fluss 1.4s linear infinite}
@keyframes shb-fluss{to{stroke-dashoffset:-24}}

/* Standbild bei reduzierter Bewegung: alle Animationen aus, Grundzustand ist das fertige Bild */
@media (prefers-reduced-motion:reduce){
  .shb-m,.shb-m *,.shb-m *::before,.shb-m *::after,
  [class*="shb-m-"],[class*="shb-m-"] *,[class*="shb-m-"] *::before,[class*="shb-m-"] *::after{animation:none!important;transition:none!important}
}

/* --------------------------------------------------------------------------
   12. Mobil
   -------------------------------------------------------------------------- */
@media (max-width:979px){
  .shb-grid,.shb-grid--breit{grid-template-columns:minmax(0,1fr)}
  .shb-pakete{grid-template-columns:minmax(0,1fr)}
  .shb-gfx{display:none}
  /* Spalte mit Text-Kästen (Infoboxen) bleibt mobil sichtbar, nur die Grafik-Karten fallen weg */
  .shb-gfx.shb-gfx--mobil{display:flex}
  .shb-gfx--mobil > .shb-card{display:none}
}
@media (max-width:760px){
  .shb-sec{padding-top:80px}
  .shb-sec--grau{margin-top:80px;padding-top:72px;padding-bottom:72px}
  .shb-sec--ende{padding-bottom:80px}
  .shb-in{gap:28px}
  .shb-liste2,.shb-raster,.shb-raster--3,.shb-pakete{grid-template-columns:minmax(0,1fr)}
  .shb-cta{margin-top:80px;padding:64px 20px}
  .shb-cta__text{flex-basis:100%}
  .shb-team{margin-top:80px;min-height:560px}
  .shb-team__in{padding:96px 20px 64px}
  .shb-team__fakten{border-radius:18px}
  .shb-standort{margin-top:80px}
  .shb-standort__dunkel,.shb-standort__hell{padding:56px 20px}
  .shb-text > p,.shb-text > .shb-p{font-size:16px}
}