/* Neupositionierung 30.10.2026: Startseite "Erst prüfen, dann wirken." Nur lokale Ressourcen. */
.variant-flag{margin:0;padding:8px 16px;font:600 12px/1.4 var(--sans,inherit);letter-spacing:.04em;text-align:center;background:var(--bg2);color:var(--ink2);border-bottom:1px solid var(--hair)}
.hero.sh{padding:clamp(48px,9vw,112px) 0 clamp(40px,7vw,80px)}
.sh h1{font-size:clamp(40px,7.4vw,84px);line-height:1.02;letter-spacing:-.025em;max-width:15ch;margin:0}
.sh h1 em{display:block;font-style:normal;color:var(--muted);font-size:.52em;line-height:1.15;letter-spacing:-.015em;margin-top:.35em;max-width:none}
.sh .kern{font-size:clamp(18px,2.1vw,21px);line-height:1.55;color:var(--ink2);max-width:640px;margin:24px 0 0}
.sh .actions .btn-ghost{color:var(--ink)}
.sh .b2b-line{margin-top:14px;font-size:14px;color:var(--muted)}
@media (min-width:700px){.sh .actions .btn{width:auto}}
/* Variante 1: typografisch, Audit-Teaser */
.teaser{margin-top:40px;display:grid;gap:6px;max-width:560px;padding:20px 22px;border:1px solid var(--hair2);border-left:4px solid var(--gold);border-radius:14px;background:var(--card)}
.teaser .t-k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.teaser strong{font-size:20px;line-height:1.3}
.teaser span{font-size:15px;color:var(--muted)}
.teaser a{font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;width:max-content;margin-top:4px}
/* Variante 2: Claim plus Audit-Vorschau */
.sh-grid{display:grid;gap:40px;align-items:center}
@media (min-width:960px){.sh-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px}}
.auditcard{margin:0;border:1px solid var(--hair2);border-radius:18px;background:var(--card);box-shadow:0 18px 40px -24px rgba(0,0,0,.35);overflow:hidden}
.auditcard .ac-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 20px;border-bottom:1px solid var(--hair)}
.auditcard .ac-h strong{font-size:16px}
.auditcard .ac-h span{font-size:12px;color:var(--muted)}
.auditcard ul{list-style:none;margin:0;padding:6px 20px}
.auditcard li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--hair);font-size:15px}
.auditcard li:first-child{border-top:0}
.st{flex:none;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;border:1px solid var(--hair2);color:var(--ink2);background:var(--bg2)}
.st.ok{border-color:transparent;background:var(--accent-soft);color:var(--ink)}
.st.offen{border-color:var(--gold);color:var(--ink)}
.auditcard figcaption{padding:14px 20px 16px;border-top:1px solid var(--hair);font-size:13px;color:var(--muted);background:var(--bg2)}
/* Variante 3 und Ablauf-Sektion: 4 Schritte */
.flow{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:0;counter-reset:f}
.flow li{counter-increment:f;position:relative;padding:0 0 28px 60px}
.flow li::before{content:counter(f);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:16px;background:var(--gold);color:var(--on-gold)}
.flow li::after{content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;background:var(--hair2)}
.flow li:last-child::after{display:none}
.flow h3{margin:6px 0 6px;font-size:20px}
.flow p{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.flow .fp{margin-top:8px;font-weight:600;color:var(--ink)}
@media (min-width:900px){
  .flow{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
  .flow li{padding:60px 0 0}
  .flow li::after{left:48px;right:-24px;top:19px;bottom:auto;width:auto;height:2px}
}
.hero .flow.bar{margin-top:44px;padding-top:28px;border-top:1px solid var(--hair)}
.hero .flow.bar h3{font-size:17px}
.hero .flow.bar p{font-size:15px}
/* Leistungen und Preise */
.pgrid{display:grid;gap:16px;margin-top:32px}
@media (min-width:760px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pcard{display:flex;flex-direction:column;padding:24px;border:1px solid var(--hair);border-radius:var(--r,20px);background:var(--card)}
.pcard .pk{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.pcard h3{margin:6px 0 4px;font-size:21px}
.pcard h3 a{color:inherit;text-decoration:none}
.pcard h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.pcard>p{margin:0 0 10px;color:var(--muted);font-size:15px;line-height:1.5}
.plist{list-style:none;margin:auto 0 0;padding:0}
.plist li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-top:1px solid var(--hair);font-size:15px}
.plist li span{color:var(--ink2)}
.plist li b{flex:none;font-weight:600;white-space:nowrap}
.pcard .pnote{margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.pnotes{margin-top:24px;display:grid;gap:6px}
.pnotes p{margin:0}
/* Für wen */
.tiles{display:grid;gap:16px;margin-top:28px}
@media (min-width:760px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{padding:22px;border:1px solid var(--hair);border-radius:16px;background:var(--card)}
.tile h3{margin:0 0 6px;font-size:19px}
.tile p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.ortsinfo{margin-top:18px}
/* Bild-Platzhalter */
.ph-box{display:grid;place-items:center;min-height:220px;border:2px dashed var(--hair2);border-radius:16px;color:var(--muted);font-size:14px;text-align:center;padding:24px}
/* Zweiter Button im Hero als Kontur (farben.css färbt sonst alle .hero .btn gold) */
.hero.sh .btn.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--hair2)}
.hero.sh .btn.btn-ghost:hover{background:var(--accent-soft);border-color:var(--gold)}
/* Claim: "Online-Auftritte" nie am Bindestrich trennen */
.nw{white-space:nowrap}
.sh h1 em{text-wrap:balance}
/* Positionierung A (30.10. 15:03): Claim ausbalanciert umbrechen, Angebotszeile unter dem Button */
.sh h1{text-wrap:balance}
.sh .offer-line{margin:14px 0 0;font-size:15px;font-weight:600;color:var(--ink)}
.sh .offer-line+.b2b-line{margin-top:6px}
@media (min-width:960px){.sh-2 h1{font-size:clamp(40px,5.4vw,66px)}}
/* Angebotszeile lange Fassung (30.10. 15:11): ruhiger Umbruch ohne Einzelwort in der letzten Zeile */
.sh .offer-line{max-width:64ch;text-wrap:pretty;line-height:1.45}
/* Hero-Überschrift nach Fensterhöhe (30.10. 15:17): Buttons auch bei 1366 x 768 im ersten Bildschirm.
   Nur Desktop (ab 960 px Breite); Höchstwerte wie bisher (84 px bzw. 66 px), verkleinert wird nur bei niedrigen Fenstern.
   1366 x 768: hero-1/3 ca. 74 px, hero-2 ca. 62 px. Ab ca. 870 px (hero-1/3) bzw. 815 px (hero-2) Fensterhöhe unverändert. */
@media (min-width:960px){
  .sh h1{font-size:clamp(40px,min(7.4vw,9.65vh),84px)}
  .sh-2 h1{font-size:clamp(40px,min(5.4vw,8.1vh),66px)}
}