.clw-hero,.clw-hero *{box-sizing:border-box}
/* Full-bleed Hero (volle Viewport-Breite, bricht aus der Elementor-Spalte aus) */
/* Feste Hoehe = Live-RevSlider-Hoehe, damit der -350px-Overlap des Magenta-Panels (8925be8) deckungsgleich sitzt.
   Anker: magentaTop muss Live treffen (Desktop 624px). vh wurde bewusst entfernt (RevSlider ist fix, nicht vh-basiert). */
.clw-hero{position:relative;z-index:1;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);
	height:974px;min-height:974px;overflow:hidden;display:flex;align-items:flex-start;padding-top:235px;
	background-color:#031228}
	/* z-index:1 macht den Hero zum eigenen Stacking-Context -> das Globus-Bild deckt auch den
	   Überlappungsbereich 921–974 über der nachfolgenden grauen Sektion f802b09 (#f9f9f9).
	   Sonst malt f802b09 (DOM-danach) über das Bild und nur das Overlay blieb -> grauer Streifen.
	   Die Karten (z-index:1, DOM-danach) bleiben darüber. */
/* feste px-Höhe statt height:100%: bei absolut positioniertem <img> resolved %-Höhe sonst auf das
   Seitenverhältnis (Bild füllt nur oberen Teil -> grauer Bereich unten). object-fit:cover deckt dann voll. */
.clw-hero__bg{position:absolute;inset:0;width:100%;height:974px!important;object-fit:cover;object-position:center;z-index:0}
/* Overlay: links abdunkeln (Text-Lesbarkeit) + UNTEN abdunkeln, damit die Elementor-Karten
   (8925be8, -350px Overlap) ueber einem lebendigen, dunklen Globus "schweben" wie im Live-RevSlider
   (ersetzt die entfernte sr7-shp-Dunkel-Shape). Rechts NICHT zu hell auswaschen (.28 Floor). */
/* 1:1 Original-RevSlider: GLEICHMÄSSIGE 50%-Dunkelfläche über dem GANZEN Globus
   (sr7-shp = rgba(38,43,62,.5)) -> Globus überall konsistent (links dunkel/Text lesbar,
   rechts/unten leuchtend), KEIN Gradient-Streifen, kein ausgewaschener grauer Boden.
   + dezente Extra-Abdunklung ganz links für den Titel. */
.clw-hero__overlay{position:absolute;inset:0;z-index:1;
	background:linear-gradient(90deg,rgba(3,18,40,.30) 0%,rgba(3,18,40,0) 45%),rgba(38,43,62,.5)}
/* Inner an die Header-Gutter (max-width 1340 + 28 padding) ausrichten -> Hero-Text fluchtet mit Logo */
.clw-hero__inner{position:relative;z-index:2;width:100%;color:#fff;
	padding:0 max(28px,calc((100vw - 1340px)/2 + 28px));}
/* Titel = Raleway 700 60px/72 (1:1 Live). Body-Text = POPPINS (Live nutzt Poppins, nicht Raleway). */
.clw-hero__title{font-family:"Raleway",sans-serif;font-size:clamp(2.2rem,4.2vw,60px);line-height:1.2;margin:0 0 16px;font-weight:700;color:#fff}
.clw-hero__title .pink-dot{color:#910048}
.clw-hero__title .law-light{font-weight:300}
/* Beide Absätze identisch: Poppins 16px/600, lh25 (1:1 Live). Reihenfolge via Template (line1/line2). */
.clw-hero__subline,.clw-hero__tagline{font-family:"Poppins",sans-serif;font-size:16px;font-weight:600;line-height:25px;max-width:50ch;margin:0 0 15px;color:#fff;opacity:1}
.clw-hero__eyebrow{font-family:"Poppins",sans-serif;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:10px 0 20px;opacity:.95}
.clw-hero__cta{display:inline-block;font-family:"Poppins",sans-serif;font-size:13px;font-weight:600;background:#910048;color:#fff;padding:16px 34px}
.clw-hero__cta:hover{background:#73003a;color:#fff}
@media (max-width:991px){
  /* min-height an Live angeglichen: Magenta-Karten-Anker (8925be8) muss mobil top=719 treffen
     (478px ergab nur 573 -> Karten 146px zu hoch). padding-top hebt den Titel auf Live-Niveau. */
  .clw-hero{height:624px;min-height:624px;padding-top:130px}
  .clw-hero__bg{height:624px!important}
  .clw-hero__overlay{background:linear-gradient(180deg,rgba(3,18,40,.30),rgba(3,18,40,.10) 40%),rgba(38,43,62,.55)}
}