/* s8-v8.css — Section 8: kompaktes blaues CTA-Panel auf Weiss.
   Rechts dieselbe Eingabe-Komponente wie im Hero (.v6-cta/.v6-field/.v6-go),
   nur der Sekundaerknopf wird fuer den blauen Grund umgefaerbt. */
.s8v{background:#fff;padding:16px 0 clamp(96px,10vw,128px)}
/* Rechte Spalte breit genug, dass „Ihre Unternehmenswebsite" im Feld ganz lesbar bleibt;
   unter 1150 px stapeln beide Spalten. */
.s8p{display:grid;grid-template-columns:46% minmax(0,1fr);gap:clamp(32px,4.4vw,64px);align-items:center;width:min(100%,1180px);margin:0 auto;padding:clamp(56px,6.4vw,84px) clamp(40px,6.4vw,84px);background:var(--v6-blue);border-radius:20px;color:#fff}
.s8p h2{font-size:38px;font-weight:700;line-height:46px;color:#fff}
.s8-copy{max-width:480px;margin-top:16px;font-size:18px;line-height:29px;color:#fff;text-wrap:pretty}
.s8-tr{list-style:none;display:grid;gap:10px;margin-top:26px}
.s8-tr li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;line-height:22px;color:#fff}
.s8-tr .ck{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--v6-blue);flex:0 0 auto}
.s8-tr .ck svg{width:13px;height:13px}
.s8p .v6-cta{margin-top:0;max-width:none}
.s8p .v6-field:focus-within{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--v6-ink)}
.s8p .v6-go{padding:0 18px}
.s8p .v6-go:focus-visible{outline:2px solid var(--v6-ink);outline-offset:2px}
/* Sekundaerknopf auf Blau: transparent, weisse Kontur und Schrift. */
.s8p .v6-2nd{border-color:#fff;color:#fff;height:40px}
.s8p .v6-2nd:hover{background:rgba(255,255,255,.12);color:#fff}
.s8p .v6-2nd:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media(max-width:600px){.s8-br{display:none}}
@media(max-width:1150px) and (min-width:601px){.s8-copy{max-width:560px}}
@media(max-width:1150px){
  .s8p{grid-template-columns:minmax(0,1fr);gap:32px;padding:48px 40px}
  .s8p h2{font-size:34px;line-height:42px}
}
@media(max-width:600px){
  .s8v{padding:8px 0 72px}
  .s8p{padding:36px 22px;border-radius:16px}
  .s8p h2{font-size:28px;line-height:36px}
  .s8-copy{font-size:17px;line-height:27px}
  .s8p .v6-2nd{height:44px}
}

/* Fingerbedienung: auch der helle Zweitknopf auf Blau bekommt 44 px. */
@media(pointer:coarse){.s8p .v6-2nd{height:44px}}