/* Hinweis: Die Container-Abfrage gilt nur für Kinder von .bsg, deshalb haben Reaktivierung und Kanäle einen inneren Rahmen (.rk-in, .ka-in).
   Grafiken in den sieben Bausteinen (Startseiten-Entwurf 03), als echtes HTML/SVG statt Bild (Feedback Alexander 29.09.2026:
   gerenderte Bilder waren am Handy zu groß und unscharf). Markup erzeugt marketing/entwurf/startseiten-video-grafiken/baustein-grafiken-bauen.py.
   Schriftgrößen folgen der Karte: Fließtext 15 px, deshalb in der Grafik 11,5 bis 14 px, nichts größer als die Kartenüberschrift.
   Layout richtet sich nach der Breite der Grafik selbst (Container-Abfrage): unter 500 px kompakt und senkrecht, darüber breit. */
.bsg{container-type:inline-size;margin:22px 0 12px;border:1px solid #d5e1f4;border-radius:14px;padding:16px;
  background:#f6f9fe radial-gradient(circle,#dce6f2 1px,transparent 1.2px) 0 0/18px 18px;
  font-family:Inter,system-ui,sans-serif;font-size:13px;line-height:1.35;color:#16283f;-webkit-font-smoothing:antialiased}
.bsg *{box-sizing:border-box}
.bsg svg{display:block}
.bsg .bic{display:inline-flex;flex:0 0 auto}
.bsg .bic svg{filter:drop-shadow(0 2px 5px rgba(22,40,63,.16))}
.bs-mobil .bsg{margin:16px 0 8px;padding:13px}
.bsg .bjk{font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif}

/* ---------- 1 Speed Opening ---------- */
.so-bahn{position:relative;display:flex;flex-direction:column;gap:8px}
.so-st{position:relative;display:flex;align-items:center;gap:11px}
.so-st:not(.so4)::after{content:'';position:absolute;left:12px;top:50%;width:4px;height:calc(100% + 8px);border-radius:2px;background:var(--g,#205cff);z-index:0}
.so-st.so1{--g:linear-gradient(#255a99,#205cff)}.so-st.so2{--g:linear-gradient(#205cff,#25b0a0)}.so-st.so3{--g:linear-gradient(#25b0a0,#2e8a6f)}
.so-ic{position:relative;z-index:1}
.so-k{flex:1;background:#fff;border:1px solid #e1e9f3;border-radius:10px;padding:7px 11px 8px;box-shadow:0 3px 10px rgba(22,40,63,.05)}
.so-z{font-weight:800;font-size:16px;line-height:1.1;color:var(--f);margin-right:7px}
.so-l{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b7a90}
.so-t{display:block;font-weight:700;font-size:13.5px;line-height:1.3;margin-top:3px}
.so-pille{margin-top:4px;background:#16283f;color:#fff;border-radius:10px;padding:9px 12px;text-align:center;font-size:13px;line-height:1.3}
.so-pille span{font-weight:800;font-size:14px;color:#7cf2a0;margin-right:4px}
@container (min-width:500px){
  .so-bahn{display:block;height:250px}
  .so-bahn::before{content:'';position:absolute;left:4%;right:4%;top:132px;height:5px;margin-top:-2.5px;border-radius:3px;background:linear-gradient(90deg,#255a99,#205cff 45%,#25d366)}
  .so-st{position:absolute;left:calc(4% + var(--x)*92%);top:132px;display:block}
  .so-st:not(.so4)::after{display:none}
  .so-ic{position:absolute;left:-14px;top:-14px}
  .so-k{position:absolute;width:124px}
  .so-l{display:block;margin-top:3px}
  .so1 .so-k{top:24px;left:-16px}
  .so2 .so-k,.so3 .so-k,.so4 .so-k{bottom:24px}
  .so2 .so-k,.so3 .so-k{left:-62px}
  .so4 .so-k{right:-16px}
  .so-pille{position:absolute;right:0;top:156px;margin:0;padding:7px 14px;border-radius:999px;white-space:nowrap}
}

/* ---------- 2 Warm-up ---------- */
.wu-gitter{display:grid;grid-template-columns:1fr;row-gap:2px}
.wu-name{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;margin-top:6px}
.wu-spur{position:relative;height:20px;margin:0 6px}
.wu-spur::before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--f);opacity:.28;border-radius:1px}
.wu-spur i{position:absolute;left:calc(var(--t)*100%);top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--f);box-shadow:0 0 0 2px #fff,0 1px 3px rgba(22,40,63,.25)}
.wu-spur i.btel{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;background:#fff;box-shadow:0 0 0 2.5px #0e7490 inset,0 1px 3px rgba(22,40,63,.2)}
.wu-achse{position:relative;height:16px;margin:4px 6px 0;font-size:11.5px;font-weight:600;color:#6b7a90}
.wu-achse span{position:absolute;left:calc(var(--t)*100%);transform:translateX(-50%);white-space:nowrap}
.wu-achse span:first-child{transform:none}.wu-achse span:last-child{transform:translateX(-100%)}
.wu-ziel{margin-top:12px;display:flex;align-items:center;gap:10px;background:linear-gradient(170deg,#3aa98a,#2e8a6f);color:#fff;border-radius:10px;padding:10px 12px;font-weight:800;font-size:14px;line-height:1.25;box-shadow:0 6px 16px rgba(46,138,111,.25)}
.wu-ziel .bhk{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.wu-ziel span span{display:block}
@container (min-width:500px){
  .wu-gitter{grid-template-columns:118px 1fr 146px;column-gap:14px;row-gap:0}
  .wu-name{grid-column:1;margin:0;height:34px}
  .wu-spur{grid-column:2;height:34px;margin:0}
  .wu .r1{grid-row:1}.wu .r2{grid-row:2}.wu .r3{grid-row:3}.wu .r4{grid-row:4}.wu .r5{grid-row:5}
  .wu-achse{grid-column:2;grid-row:6;margin:6px 0 0}
  .wu-ziel{grid-column:3;grid-row:1/span 5;margin:0;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:14px 12px;font-size:13.5px}
  .wu-ziel span span{white-space:nowrap}
}

/* ---------- 3 Reaktivierung ---------- */
.rk-in{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px}
.rk-kreis{width:100%;max-width:280px}
.rk-kreis svg{width:100%;height:auto;overflow:visible}
.rk-pfeil{display:flex;justify-content:center;padding:2px 0}
.rk-aus{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:4px}
.rk-karte{background:#fff;border:1px solid #e1e9f3;border-radius:10px;padding:9px 12px;box-shadow:0 3px 10px rgba(22,40,63,.05)}
.rk-pfad{display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#1f7a5c}
.rk-t{display:block;font-weight:700;font-size:13.5px;line-height:1.3;margin-top:2px}
.rk-erg{display:flex;align-items:center;gap:12px;background:linear-gradient(170deg,#3aa98a,#2e8a6f);color:#fff;border-radius:10px;padding:10px 14px;box-shadow:0 6px 16px rgba(46,138,111,.25)}
.rk-gross{font-weight:800;font-size:30px;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.rk-erg .rk-t{margin:0}
.rk-pfeil2{display:flex;justify-content:center}
.rk .rk-quer{display:none}
@container (min-width:500px){
  .rk-in{flex-direction:row;align-items:center;gap:8px}
  .rk-kreis{flex:0 0 280px}
  .rk .rk-quer{display:block}.rk .rk-hoch{display:none}
  .rk-aus{flex:1;min-width:0}
  .rk-erg{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px}
}

/* ---------- 4 KI-Anrufliste ---------- */
.al-panel{background:#fff;border:1px solid #e1e9f3;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(22,40,63,.06)}
.al-panel::before{content:'';display:block;height:3px;background:linear-gradient(90deg,#3b6bff,#8a5cff)}
.al-kopf{display:flex;align-items:center;gap:8px;padding:9px 12px;font-weight:800;font-size:14px}
.al-zeile{display:grid;grid-template-columns:26px 1fr auto;grid-template-areas:"ava name score" "chips chips chips";align-items:center;column-gap:9px;row-gap:6px;padding:9px 12px;border-top:1px solid #edf2f8;position:relative}
.al-heiss .al-zeile{background:linear-gradient(90deg,rgba(59,107,255,.06),rgba(255,255,255,0))}
.al-heiss .al-zeile::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#3b6bff,#8a5cff)}
.al-ava{grid-area:ava;width:26px;height:26px;border-radius:50%;color:#fff;font-weight:700;font-size:10.5px;display:flex;align-items:center;justify-content:center}
.al-name{grid-area:name;font-weight:700;font-size:13.5px}
.al-chips{grid-area:chips;display:flex;flex-wrap:wrap;gap:5px}
.al-chip{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #dce6f2;border-radius:999px;padding:3px 9px 3px 4px;font-size:11.5px;font-weight:600;color:#33445e;white-space:nowrap}
.al-score{grid-area:score;display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 6px;border-radius:8px;font-weight:800;font-size:13.5px;color:#3a3fb8;
  border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#3b6bff,#8a5cff) border-box}
.al-blass{display:flex;align-items:center;gap:9px;padding:9px 12px;border-top:1px solid #edf2f8;opacity:.5}
.al-blass .bk{width:22px;height:22px;border-radius:50%;background:#e3e9f1}
.al-blass .bb{height:8px;border-radius:4px;background:#e6ecf3}
@container (min-width:500px){
  .al-zeile{grid-template-columns:26px 84px 1fr auto;grid-template-areas:"ava name chips score"}
}

/* ---------- 5 Show-up-Sicherung ---------- */
.su-kette{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.su-st{display:flex;align-items:center;gap:10px;font-weight:700;font-size:13.5px}
.su-pf{display:flex;padding:3px 0 3px 7px;color:#205cff}
.su-ziel{margin-top:6px;display:flex;align-items:center;gap:10px;background:linear-gradient(170deg,#3aa98a,#2e8a6f);color:#fff;border-radius:10px;padding:10px 12px;font-weight:800;font-size:14px;box-shadow:0 6px 16px rgba(46,138,111,.25)}
.su-ziel .bhk{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.su-neben{margin-top:12px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;border:1.5px dashed #c3cfdf;border-radius:10px;padding:9px 11px;font-size:13px;font-weight:600;color:#5e6d84}
.su-neben .bteil{display:inline-flex;align-items:center;gap:7px}
.su-ki{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 7px;border-radius:999px;font-weight:700;font-size:13px;color:#3a3fb8;
  border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#3b6bff,#8a5cff) border-box}
@container (min-width:500px){
  .su-kette{flex-direction:row;align-items:center;gap:0}
  .su-st{flex-direction:column;gap:6px;font-size:12.5px;text-align:center;flex:0 0 auto;width:78px}
  .su-pf{padding:0;flex:1;justify-content:center;margin-top:-20px}
  .su-pf svg{transform:rotate(-90deg)}
  .su-ziel{margin:0 0 0 4px;flex:0 0 118px;flex-direction:column;align-items:flex-start;font-size:13.5px;line-height:1.25}
  .su-neben{justify-content:center}
}

/* ---------- 6 Engine-Dashboard: drei Spalten (Handy: drei Blöcke), je Kachel mit Verlauf und darunter die passende Quote ---------- */
.db-panel{background:#fff;border:1px solid #e1e9f3;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(22,40,63,.06)}
.db-panel::before{content:'';display:block;height:3px;background:linear-gradient(90deg,#3b6bff,#8a5cff)}
.db-leiste{display:flex;align-items:center;gap:5px;padding:8px 12px;border-bottom:1px solid #edf2f8}
.db-leiste .bp{width:7px;height:7px;border-radius:50%;background:#dce3ec}
.db-leiste .br{margin-left:auto;display:flex;align-items:center;gap:8px}
.db-live{width:8px;height:8px;border-radius:50%;background:#25c06a;box-shadow:0 0 0 4px rgba(37,192,106,.18)}
.db-inhalt{padding:12px}
.db-spalten{display:grid;grid-template-columns:1fr;gap:12px}
.db-sp{display:flex;flex-direction:column;gap:10px;border:1px solid #e3eaf3;border-radius:10px;padding:12px 12px 13px;background:linear-gradient(180deg,#fff,#fafcff)}
.db-k{display:flex;flex-direction:column;gap:8px}
.db-k .bkopf{display:flex;align-items:center;justify-content:space-between}
.db-k .bn{font-weight:700;font-size:14px}
.db-trend{display:inline-flex;width:22px;height:22px;border-radius:6px;background:#e6f6ee;align-items:center;justify-content:center}
.db-k svg.bverlauf{width:100%;height:64px}
.db-q span{display:block;font-size:12.5px;font-weight:600;color:#33445e;margin-bottom:6px}
.db-q .bspur{height:8px;border-radius:4px;background:#edf2f8;overflow:hidden}
.db-q .bspur i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#3b6bff,#8a5cff)}
@container (min-width:500px){
  .db-inhalt{padding:14px}
  .db-spalten{grid-template-columns:repeat(3,1fr);gap:12px}
  .db-k svg.bverlauf{height:96px}
  .db-sp{padding:14px 14px 16px;gap:14px}
}

/* ---------- 7 Alle Kanäle verbunden ---------- */
.ka-in{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.ka-hub{width:100%;max-width:280px}
.ka-hub>svg{width:100%;height:auto;overflow:visible}
.ka-kontakt{width:100%;background:#fff;border:1px solid #e1e9f3;border-radius:12px;padding:11px 12px 12px;box-shadow:0 4px 14px rgba(22,40,63,.06)}
.ka-kontakt .bkopf{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px}
.ka-ava{width:26px;height:26px;border-radius:50%;background:#3b6bff;color:#fff;font-weight:700;font-size:10.5px;display:flex;align-items:center;justify-content:center}
.ka-weg{position:relative;display:flex;justify-content:space-between;margin-top:10px}
.ka-weg::before{content:'';position:absolute;left:12px;right:12px;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:linear-gradient(90deg,#3b6bff,#8a5cff);opacity:.35}
.ka-weg .bic{position:relative}
@container (min-width:500px){
  .ka-in{flex-direction:row;gap:16px}
  .ka-hub{flex:0 0 270px}
  .ka-kontakt{flex:1;min-width:0}
}

/* Hot-Lead-Radar (Karte 4), ersetzt die Anrufliste, 29.09.2026 */
.hr-panel{background:#fff;border:1px solid #e1e9f3;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(22,40,63,.06)}
.hr-panel::before{content:'';display:block;height:3px;background:linear-gradient(90deg,#3b6bff,#8a5cff)}
.hr-kopf{display:flex;align-items:center;gap:8px;padding:9px 12px;font-weight:800;font-size:14px;border-bottom:1px solid #edf2f8}
.hr-body{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px}
.hr-scope{flex:0 0 auto;width:150px}
.hr-scope>svg{width:100%;height:auto;display:block;overflow:visible}
.hr-scope text{font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif;font-weight:700;font-size:9px;fill:#fff}
.hr-sweep{transform-origin:100px 100px;animation:hr-sweep 5s linear infinite}
@keyframes hr-sweep{to{transform:rotate(360deg)}}
.hr-puls{fill:none;stroke:#3b6bff;stroke-width:2;opacity:0;animation:hr-puls 2.4s ease-out infinite}
.hr-blip-heiss .hr-puls{animation-delay:.6s}
@keyframes hr-puls{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.1);opacity:0}}
.hr-liste{width:100%;min-width:0;display:flex;flex-direction:column}
.hr-zeile{display:grid;grid-template-columns:26px 1fr auto;grid-template-areas:"ava name score" "chips chips chips";align-items:center;column-gap:9px;row-gap:5px;padding:8px 10px;border-top:1px solid #edf2f8;position:relative}
.hr-zeile:first-child{border-top:0}
.hr-heiss{background:linear-gradient(90deg,rgba(59,107,255,.07),rgba(255,255,255,0));border-radius:8px}
.hr-heiss::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:linear-gradient(#3b6bff,#8a5cff)}
.hr-ava{grid-area:ava;width:26px;height:26px;border-radius:50%;color:#fff;font-weight:700;font-size:10.5px;display:flex;align-items:center;justify-content:center}
.hr-name{grid-area:name;font-weight:700;font-size:13.5px}
.hr-score{grid-area:score;display:inline-flex;align-items:center;gap:4px;border:1.5px solid #8a5cff;color:#5b3ddb;border-radius:8px;padding:2px 8px;font-weight:800;font-size:13px}
.hr-chips{grid-area:chips;display:flex;flex-wrap:wrap;gap:5px}
.hr-chip{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #dce6f2;border-radius:999px;padding:3px 9px 3px 4px;font-size:11.5px;font-weight:600;color:#33445e;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.hr-sweep,.hr-puls{animation:none}.hr-puls{opacity:.35}}
@container (min-width:500px){.hr-body{flex-direction:row;gap:14px}.hr-scope{flex:0 0 150px}.hr-liste{flex:1;width:auto}}

/* Show-up- und Conversion-Boost (Karte 5): Zeitleiste vom gebuchten Termin bis "Termin findet statt", 30.09.2026 */
.sz-bahn{position:relative;display:flex;flex-direction:column;gap:7px}
.sz-bahn::before{content:'';position:absolute;left:11px;top:14px;bottom:14px;width:4px;border-radius:2px;background:linear-gradient(#389C7F,#1FAF38 25%,#1D6EF2 50%,#205CFF 80%,#2E8A6F)}
.sz-st{position:relative;display:flex;align-items:center;gap:11px}
.sz-ic{position:relative;z-index:1}
.sz-ic svg{width:26px;height:26px;display:block}
.sz-k{flex:1;min-width:0;background:#fff;border:1px solid #e1e9f3;border-radius:10px;padding:6px 11px 7px;box-shadow:0 3px 10px rgba(22,40,63,.05)}
.sz-z{font-weight:800;font-size:14px;line-height:1.1;color:var(--f);margin-right:7px}
.sz-l{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6b7a90}
.sz-t{display:block;font-weight:700;font-size:13px;line-height:1.3;margin-top:2px}
.sz-bar{display:flex;align-items:center;gap:8px;margin-top:5px}
.sz-bar i{flex:1;display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,#3b6bff,#8a5cff);max-width:180px}
.sz-bar b{font-size:12px;font-weight:800;color:#205CFF}
.sz-ziel .sz-k{background:linear-gradient(170deg,#3aa98a,#2e8a6f);border-color:#2e8a6f;color:#fff;box-shadow:0 6px 16px rgba(46,138,111,.25)}
.sz-ziel .sz-z{color:#d6f5e7}
.sz-ziel .sz-t{font-size:14px;font-weight:800;margin-top:1px}
.sz-hk{position:relative;z-index:1;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid #2E8A6F;display:flex;align-items:center;justify-content:center}
.sz .su-neben{margin-top:10px}
@container (min-width:500px){
  .sz-k{display:flex;align-items:center;flex-wrap:wrap;column-gap:8px;padding:6px 12px}
  .sz-z{min-width:66px;margin:0}
  .sz-t{margin:0}
  .sz-bar{margin:0 0 0 auto;width:150px}
}