/* Zusatzbausteine der Fallstudien (vorbereitet 13.11.2026): breite Kachel über dem 3er-Raster,
   Vorher-Nachher-Balken, Trichter, aufgeklappter Musterdatensatz. Wird nur geladen, wenn ein Fall
   breit=True oder bausteine trägt (siehe styles() in _inhalte/_erfolgsgeschichten.py). */
.cs-brand-text{font-size:15px;line-height:1.35;font-weight:600;color:#18342B;max-width:22ch}

/* Breite Kachel */
.cs-card--breit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);margin:0 0 24px}
.cs-card-breit-kopf{display:flex;flex-direction:column;border-right:1px solid #CCD9CD;min-width:0}
.cs-card-breit-kopf>.cs-brand{padding:24px 26px;min-height:96px}
.cs-card--breit .cs-card-result{flex:1;border-bottom:0;justify-content:center}
.cs-card--breit .cs-metric-label{min-height:0}
.cs-card--breit .cs-card-story>p{max-width:62ch}

/* Vorher-Nachher-Balken */
.cs-compare{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:12px}
.cs-compare li{display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);align-items:center;gap:14px}
.cs-compare-label{font-size:12px;line-height:1.4;color:#53625A}
.cs-compare-bar{display:flex;align-items:center;width:var(--anteil);min-width:5.5em;height:34px;padding:0 12px;background:#DDECD6;border:1px solid #CCD9CD;border-radius:6px;box-sizing:border-box}
.cs-compare li:last-child .cs-compare-bar{background:#075B3C;border-color:#075B3C}
.cs-compare-bar strong{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:#075B3C;white-space:nowrap}
.cs-compare li:last-child .cs-compare-bar strong{color:#F4F8EF}

/* Verwandte Fallstudien: drei Karten in drei Spalten */
.cs-related-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}

/* Trichter */
.cs-funnel-block,.cs-record-block{margin-top:56px}
.cs-funnel-block h3,.cs-record-block h3{font-size:24px;line-height:1.25;letter-spacing:-.025em;font-weight:500;color:#18342B;margin:0 0 24px}
.cs-funnel{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.cs-funnel li{--breite:calc(100% - var(--stufe) * 12%);width:var(--breite);min-width:min(100%,320px);display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:baseline;column-gap:20px;row-gap:4px;padding:20px 26px;background:#EAF2E5;border:1px solid #CCD9CD;border-radius:12px;box-sizing:border-box}
.cs-funnel li:last-child{background:#183E2F;border-color:#183E2F}
.cs-funnel strong{font-size:clamp(28px,3vw,42px);font-weight:500;letter-spacing:-.045em;line-height:1.1;color:#075B3C;white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-funnel li>span{font-size:15px;line-height:1.5;color:#18342B;font-weight:500}
.cs-funnel small{grid-column:2;font-size:13px;line-height:1.6;color:#53625A}
.cs-funnel li:last-child strong,.cs-funnel li:last-child>span{color:#F4F8EF}.cs-funnel li:last-child small{color:#C9DDC8}

/* Musterdatensatz */
.cs-record{background:#fff;border:1px solid #CCD9CD;border-radius:12px;overflow:hidden}
.cs-record-name{margin:0;padding:18px 22px;border-bottom:1px solid #CCD9CD;font-size:17px;font-weight:500;color:#18342B;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cs-record-name span{font:500 11px/1.9 var(--sa-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#53625A}
.cs-record-scroll{overflow-x:auto}
.cs-record table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6}
.cs-record th,.cs-record td{text-align:left;vertical-align:top;padding:12px 22px;border-bottom:1px solid #E3EBE1}
.cs-record thead th{font:500 11px/1.6 var(--sa-font-mono);letter-spacing:.08em;text-transform:uppercase;color:#53625A;background:#FAFAF7}
.cs-record tbody th{font-weight:500;color:#18342B;width:24%}
.cs-record td{color:#344A3D}
.cs-record-beleg{font-size:12px;color:#586A5D;width:34%}
.cs-record tbody tr:last-child>*{border-bottom:0}

@media(max-width:900px){
  .cs-card--breit{grid-template-columns:1fr}
  .cs-card-breit-kopf{border-right:0}
  .cs-card--breit .cs-card-result{border-bottom:1px solid #D5E1CF}
  .cs-related-grid--3{grid-template-columns:1fr}
  .cs-funnel li{width:100%;min-width:0}
}
@media(max-width:600px){
  .cs-record thead{display:none}
  .cs-record tr{display:grid;grid-template-columns:1fr;padding:12px 18px;border-bottom:1px solid #E3EBE1}
  .cs-record tbody tr:last-child{border-bottom:0}
  .cs-record th,.cs-record td{padding:2px 0;border:0;width:auto}
  .cs-funnel li{grid-template-columns:1fr;padding:18px 20px}
  .cs-funnel small{grid-column:1}
}
@media(max-width:480px){.cs-compare li{grid-template-columns:1fr;gap:6px}}
/* In der 3er-Reihe der verwandten Fallstudien gilt die Kartengröße, nicht die Abschnittsüberschrift. */
.cs-related-grid--3 .cs-card-story>h2{font-size:24px;max-width:none}
@media(max-width:1050px){.cs-related-grid--3 .cs-card-story>h2{font-size:21px}}
@media(max-width:900px){.cs-related-grid--3 .cs-card-story>h2{font-size:25px}}