/* s2-v8.css — Section 2: drei Gruende, carVertical-Logik, eigene Bildsprache.
   Nutzt die Rollen-Variablen aus hero-v8.css (--v6-*). */
.s2v{background:#fff;padding:clamp(80px,9vw,120px) 0 clamp(88px,10vw,132px)}
.s2v h2{max-width:900px;margin:0 auto;text-align:center;font-size:40px;font-weight:700;line-height:48px;color:var(--v6-ink);text-wrap:balance}
.s2v-copy{max-width:800px;margin:16px auto 0;text-align:center;font-size:18px;line-height:30px;color:var(--v6-ink);text-wrap:pretty}
.s2v-copy strong{font-weight:600}
.s2v-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px clamp(32px,5vw,72px);margin-top:clamp(56px,6vw,76px)}
.s2v-it{text-align:center}
.s2v-it h3{margin-top:24px;font-size:20px;font-weight:700;line-height:28px;color:var(--v6-ink)}
.s2v-it p{max-width:360px;margin:8px auto 0;font-size:16px;line-height:26px;color:var(--v6-ink)}

/* Illustration: leicht unregelmaessige hellblaue Grundform, flache Zeichnung darueber,
   die an zwei Stellen aus der Form herausragt. Jede Form etwas anders. */
.ill{position:relative;width:114px;height:114px;margin:0 auto}
.ill::before{content:"";position:absolute;inset:7px;background:#D6E4FC;border-radius:30px 34px 28px 36px}
.ill.i1::before{transform:rotate(-5deg)}
.ill.i2::before{transform:rotate(4deg);border-radius:34px 28px 36px 30px}
.ill.i3::before{transform:rotate(-2deg);border-radius:28px 36px 30px 34px}
.ill svg{position:relative;width:114px;height:114px;overflow:visible}
.ill .k{stroke:var(--v6-ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ill .kb{stroke:var(--v6-blue);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ill .fw{fill:#fff}
.ill .fb{fill:var(--v6-blue)}
.ill .fl{fill:#A9C4F7}
.ill .fg{fill:#22A861}
.ill .fd{fill:var(--v6-ink)}
.ill .lw{stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ill .ld{stroke:var(--v6-ink);stroke-width:2;stroke-linecap:round;fill:none}

@media(max-width:900px){
  .s2v h2{font-size:32px;line-height:40px}
  .s2v-grid{grid-template-columns:minmax(0,1fr);gap:56px}
}
@media(max-width:600px){
  .s2v h2{font-size:28px;line-height:36px}
  .s2v-copy{font-size:17px;line-height:28px}
}

/* ---------- Handy (bis 640 px und quer): drei Gruende als ruhige Zeilen statt drei Bildtafeln ---------- */
@media(max-width:640px),(pointer:coarse) and (max-height:520px) and (orientation:landscape){
  .s2v{padding:56px 0 60px}
  /* Der Lead sagt dasselbe wie „Mehr Kapazitaet schaffen" direkt darunter. */
  .s2v .s2v-copy{display:none}
  .s2v-grid{gap:26px;margin-top:28px}
  .s2v-it{display:grid;grid-template-columns:60px minmax(0,1fr);column-gap:16px;align-items:start;text-align:left}
  .s2v-it .ill{grid-row:1/span 2;width:60px;height:60px;margin:0}
  .s2v-it .ill::before{inset:4px}
  .s2v-it .ill svg{width:60px;height:60px}
  .s2v-it h3{margin-top:2px;font-size:18px;line-height:25px}
  .s2v-it p{max-width:none;margin:4px 0 0;font-size:15px;line-height:24px}
}