/* Vertrauen-Bausteine der Startseite nach Auswahl des Kunden (10, 11, 12, 13, 14, 20, 24, 28; Auftrag vom 24.10.2026).
   Vorlage vertrauen-varianten-2026-10-22/bausteine.css (k-band, k-zahlen, k-schritte, k-galerie, k-firma, k-kasten,
   k-stimmen, k-video), umgesetzt mit den Farben aus kopf.css über richtung-a.css (--tinte, --tief, --orange, --auf-nacht,
   --linie, --flaeche, --leise). Markup aus tools/startseite-vertrauen.mjs, eingebunden im Kopf von start.html nach
   richtung-a.css. Gilt nur innerhalb von .ra. Orange als Schrift nur auf Nachtblau (Band 14, Zahlenband), sonst nur als
   Zeichen und Linie. Bedienziele mindestens 44 px. Keine Großschrift außer .marke und der Bildunterschrift im Band. */

/* 14 Vorteilsband groß: Nachtblau unter dem Titelbild, eigenes Foto links bis an den Fensterrand, rechte Bildkante im
   Winkel des Logo-Schrägstrichs (wie C), vier Punkte im Raster 2 x 2. Im Verkauf ohne Freigabe von unternehmen.json drei
   Punkte, dann läuft der letzte über die ganze Breite. */
.ra .vs-band{background:var(--tinte);color:#fff;overflow:hidden}
.ra .vs-band-innen{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:clamp(32px,4vw,72px);align-items:stretch}
.ra .vs-band-bild{position:relative;min-height:clamp(300px,24vw,400px);margin:0 0 0 calc(-1 * max(var(--rand),(100vw - var(--breite)) / 2 + var(--rand)));background:var(--tief);clip-path:polygon(0 0,100% 0,calc(100% - clamp(48px,6vw,110px)) 100%,0 100%)}
.ra .vs-band-bild img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 58%}
.ra .vs-band-bild figcaption{position:absolute;left:0;bottom:0;padding:12px 22px 12px max(var(--rand),18px);background:var(--tief);color:#fff;font-size:12px;font-weight:800;letter-spacing:.14em;line-height:1.4;text-transform:uppercase}
.ra .vs-band-text{min-width:0;padding:clamp(24px,2.6vw,44px) 0;align-self:center}
.ra .vs-band-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.ra .vs-band-liste>li{display:flex;gap:16px;min-width:0;padding:24px 28px 24px 0;border-top:1px solid rgba(255,255,255,.14)}
.ra .vs-band-liste>li:nth-child(-n+2){border-top:0}
.ra .vs-band-liste>li:nth-child(even){padding-left:28px;border-left:1px solid rgba(255,255,255,.14)}
.ra .vs-band-liste>li:last-child:nth-child(odd){grid-column:1 / -1}
.ra .vs-band-zeichen{flex:none;width:30px;height:30px;color:var(--orange)}
.ra .vs-band-liste p{font-size:15px;line-height:1.5;color:var(--auf-nacht)}
.ra .vs-band-liste p.vs-band-titel{margin-bottom:4px;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.25;color:#fff}
.ra .vs-band-liste a.vs-band-tel{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-size:20px;font-weight:800;letter-spacing:-.01em;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:5px}
.ra .vs-band-liste a.vs-band-tel:hover{text-decoration-color:#fff}
.ra .vs-band a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* 10 und 13 im Abschnitt "Über Oberkersch": Text mit Firmenangaben links, Kontakt rechts, darunter das Zahlenband über die
   ganze Breite. Schmal: Text, Zahlen, Kontakt untereinander. */
.ra .vs-betrieb{row-gap:56px}
.ra .vs-betrieb>.vs-zahlen{grid-column:1 / -1}
.ra .vs-firma{margin:0 0 28px}
.ra .vs-firma-titel{margin-bottom:12px;font-size:var(--h3);letter-spacing:-.025em}
.ra .vs-firma dl{margin:0;border-bottom:1px solid #d3dae4}
.ra .vs-firma dl>div{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:4px 24px;padding:10px 0;border-top:1px solid #d3dae4}
.ra .vs-firma dt{font-size:15px;font-weight:600;color:var(--leise)}
.ra .vs-firma dd{margin:0;font-size:16px;font-weight:700;color:var(--tinte)}
.ra .vs-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;background:var(--tinte);color:#fff}
.ra .vs-zahlen>div{min-width:0;padding:clamp(24px,2.4vw,36px) clamp(20px,2.4vw,40px);border-left:1px solid rgba(255,255,255,.14)}
.ra .vs-zahlen>div:first-child{border-left:0}
.ra .vs-zahlen dt{margin-bottom:10px;font-size:clamp(30px,2.6vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--orange)}
.ra .vs-zahlen dd{margin:0;font-size:15px;line-height:1.5;color:var(--auf-nacht)}

/* 11 So entsteht dein Glas: vier Karten mit Zeichen, bis Fotos aus der Werkstatt da sind. */
.ra .vs-entstehung{border-top:1px solid var(--linie)}
.ra .vs-schritte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ra .vs-schritte>li{display:flex;flex-direction:column;gap:8px;min-width:0;padding:26px 24px 28px;background:#fff;border:1px solid var(--linie);border-top:3px solid var(--tinte)}
.ra .vs-schritt-zeichen{flex:none;width:52px;height:52px;margin-bottom:10px;padding:12px;background:var(--flaeche);color:var(--tinte)}
.ra .vs-schritt-nr{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--leise)}
.ra .vs-schritte h3{font-size:21px;letter-spacing:-.025em}
.ra .vs-schritte p:not(.vs-schritt-nr){font-size:15.5px;line-height:1.55;color:#33415a}

/* 20 Sonderform nach Vorlage: ruhiger Kasten direkt hinter dem Konfigurator-Abschnitt. */
.ra .vs-sonderform{padding-bottom:0}
.ra .vs-kasten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 24px;max-width:980px;padding:clamp(22px,2.6vw,36px);background:#fff;border:1px solid var(--linie);border-left:4px solid var(--tinte)}
.ra .vs-kasten-zeichen{width:40px;height:40px;color:var(--tinte)}
.ra .vs-kasten .h3{margin-bottom:8px}
.ra .vs-kasten p{max-width:62ch;font-size:16.5px;line-height:1.6;color:#33415a}
.ra .vs-kasten .link-alle{margin-top:6px}

/* 12 Eigene Arbeiten: erscheint erst mit weiteren eigenen Fotos. */
.ra .vs-arbeiten{border-top:1px solid var(--linie)}
.ra .vs-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:24px}
.ra .vs-galerie figure{height:100%;margin:0;background:#fff;border:1px solid var(--linie)}
.ra .vs-galerie img{width:100%;aspect-ratio:4 / 5;object-fit:cover}
.ra .vs-galerie figcaption{padding:12px 14px;font-size:14.5px;font-weight:700;line-height:1.4;color:var(--tinte)}

/* 24 Kundenstimmen: nur mit echten Stimmen aus config/vertrauen.json, ohne Sterne. */
.ra .vs-stimmen{border-top:1px solid var(--linie)}
.ra .vs-stimmen-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:24px}
.ra .vs-stimme{display:flex;flex-direction:column;gap:18px;height:100%;margin:0;padding:28px;background:#fff;border:1px solid var(--linie);border-top:3px solid var(--tinte)}
.ra .vs-stimme blockquote{margin:0;font-size:17px;line-height:1.6;color:var(--tinte)}
.ra .vs-stimme figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.ra .vs-stimme-name{font-weight:800;color:var(--tinte)}
.ra .vs-stimme-quelle{font-size:14px;color:var(--leise)}

/* 28 Video aus der Werkstatt: nur mit Video aus config/vertrauen.json, ohne Autoplay. */
.ra .vs-video{border-top:1px solid var(--linie)}
.ra .vs-video-innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);align-items:center}
.ra .vs-video-text{margin-top:12px;font-size:16px;color:#33415a}
.ra .vs-video-bild{margin:0;background:var(--tief)}
.ra .vs-video-bild video{display:block;width:100%;height:auto}

@media (max-width:1099px){
  .ra .vs-band-innen{grid-template-columns:minmax(0,1fr);gap:0}
  /* Schmal: Foto unter den Punkten, damit es nicht direkt am Foto des Titelbilds steht; obere Kante schräg wie dort. */
  .ra .vs-band-bild{order:2;min-height:0;height:clamp(200px,34vw,300px);margin:0 calc(-1 * var(--rand));clip-path:polygon(0 36px,100% 0,100% 100%,0 100%)}
  .ra .vs-band-text{padding:20px 0 28px}
  .ra .vs-betrieb{row-gap:48px}
  .ra .vs-betrieb>.a-kontakt{order:1}
  .ra .vs-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ra .vs-video-innen{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ra .vs-zahlen{grid-template-columns:minmax(0,1fr)}
  .ra .vs-zahlen>div{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .ra .vs-zahlen>div:first-child{border-top:0}
}
@media (max-width:640px){
  .ra .vs-band-liste{grid-template-columns:minmax(0,1fr)}
  .ra .vs-band-liste>li:nth-child(n){padding:20px 0;border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .ra .vs-band-liste>li:first-child{border-top:0}
  .ra .vs-schritte{grid-template-columns:minmax(0,1fr)}
  .ra .vs-firma dl>div{grid-template-columns:minmax(0,1fr)}
  .ra .vs-kasten{grid-template-columns:minmax(0,1fr)}
}