/* Vertrauen-Baustein C "Beratung mit Foto" auf der Startseite (Auftrag 23.10.2026; Vorlage
   referenz/public/muster.html und shop.css, Block .beratung). Gebaut von tools/baue-startseite.mjs, eingebunden aus dem
   Abschnitt selbst. Statt des Stockfotos aus troas.shop (Lizenzbestätigung offen) eine eigene Arbeit aus config/unternehmen.json.
   Gilt nur innerhalb von .ra (richtung-a.css: Farben --tinte, --blau, --orange aus kopf.css, Fokus für .ra a).
   Orange nur als Schrägstrich hinter dem Titel und als Unterstreichung, nie als Schrift auf Hell. Bildkante im Winkel des
   Logo-Schrägstrichs (18 Grad, --schraeg). */
.ra .vb-beratung{--beratung-grund:#e4e9f0;background:var(--beratung-grund);overflow:hidden}
.ra .vb-beratung-innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.ra .vb-beratung-bild{position:relative;align-self:stretch;min-height:clamp(340px,30vw,460px);margin:0;background:#cfd6df;clip-path:polygon(0 0,100% 0,calc(100% - clamp(48px,6vw,110px)) 100%,0 100%)}
.ra .vb-beratung-bild img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 45%}
.ra .vb-beratung-text{min-width:0;padding:clamp(40px,5vw,72px) 0}
.ra .vb-beratung .marke{margin-bottom:12px}
.ra .vb-beratung .h2{margin:0 0 16px;white-space:normal}
.ra .vb-beratung-lead{max-width:520px;color:#2c3d5a;font-size:17px;line-height:1.6}
.ra a.vb-beratung-tel{display:inline-flex;align-items:center;gap:14px;min-height:54px;margin:26px 0 8px;padding:12px 24px 12px 18px;background:var(--blau);color:#fff;font-size:clamp(19px,1.9vw,26px);font-weight:800;letter-spacing:-.01em;line-height:1.1;text-decoration:none}
.ra a.vb-beratung-tel:hover{background:var(--blau-tief)}
.ra a.vb-beratung-tel svg{flex:none;width:24px;height:24px}
.ra .vb-beratung-zeiten{font-size:14px;font-weight:700;line-height:1.5;color:var(--leise)}
.ra .vb-beratung-mail{margin-top:14px;font-size:15px;font-weight:600;line-height:1.5;color:var(--tinte)}
.ra .vb-beratung-mail a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinte);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:5px;overflow-wrap:anywhere}
.ra .vb-beratung-mail a:hover{text-decoration-color:var(--tinte)}

/* Tablet: Foto schmaler, Text bekommt mehr Platz. */
@media (max-width:1099px){
  .ra .vb-beratung-innen{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
/* Handy: Foto oben über die ganze Breite des Inhalts, untere Kante schräg, Text darunter, Telefonknopf über die volle Breite. */
@media (max-width:760px){
  .ra .vb-beratung-innen{grid-template-columns:minmax(0,1fr);gap:0}
  .ra .vb-beratung-bild{min-height:240px;margin-top:24px;clip-path:polygon(0 0,100% 0,100% calc(100% - 36px),0 100%)}
  .ra .vb-beratung-text{padding:24px 0 44px}
  .ra .vb-beratung-lead{font-size:16px}
  .ra a.vb-beratung-tel{display:flex;justify-content:center;width:100%;padding:12px 16px}
}