/* DWC — geteilte Hero-Section fuer Leistungsunterseiten (20.09.2026)
   ===================================================================
   1:1 aus SEO-Performance.html (Julians Referenz-Hero) herausgezogen, damit
   jede Leistungsunterseite exakt dieselbe Hero-Optik bekommt: riesige
   linksbuendige Headline (1:1 nach hugeinc.com/approach), kurze fette
   Subheadline darunter, weisser Hintergrund. Nur Schlagwort/Text pro Seite
   ist individuell (siehe <h1 class="svc-hero__title"> / <p class="svc-hero__lead">
   im jeweiligen Markup). Aenderungen hier wirken auf ALLE Leistungsunterseiten
   gleichzeitig — SEO-Performance.html selbst nutzt weiterhin ihre eigene
   .seo-hero-Kopie und bleibt unberuehrt. */

/* Variable Schrift "Satoshi": Achse wght 300-900 deckt Gewicht 760 exakt ab -
   kein Google-Fonts-Angebot fuer diese Schrift, darum lokal statt per <link>. */
@font-face{
  font-family:'Satoshi';
  src:url('../fonts/satoshi-variable.woff2') format('woff2');
  font-weight:300 900; font-style:normal; font-display:swap;
}

.svc-hero{
  position:relative; width:100%; margin-top:-88px; min-height:75vh;
  display:flex; align-items:flex-start;
  background:#fff; padding:clamp(212px,28vh,282px) clamp(23px,4.75vw,61px) clamp(60px,7vh,90px);
}
/* Hero fuellt auf Desktop/Tablet den ganzen ersten Bildschirm (20.09.2026,
   Julian: "Balken soll nicht mehr auf dem ersten Bildschirm zu sehen sein,
   erst nach dem Scrollen") - 1:1 wie SEO-Performance.html, bewusst nur ab
   900px (Tablet+), Mobil unveraendert. */
@media (min-width:900px){
  .svc-hero{ height:100vh; min-height:100vh; }
}
.svc-hero .svc-hero__inner{ max-width:900px; }
/* Subheadline bricht bei ausgereiztem Schriftgroessen-Cap (ab ca. 1650px
   Fensterbreite) sonst auf 3 statt 2 Zeilen um: im Fullscreen nur 2 Zeilen,
   3 nur bei kleineren Fenstern erlaubt. */
@media (min-width:1650px){
  .svc-hero .svc-hero__inner{ max-width:1050px; }
}

/* Doppelt genestete Selektoren (.svc-hero .svc-hero__xyz statt bloss
   .svc-hero__xyz) ab hier bewusst so - nicht nur Formsache: einige
   Leistungsunterseiten haben eigene Alt-Regeln wie ".wd p{font-size:15.5px;
   color:...}" mit Klasse+Typ-Selektor. Eine einzelne Klasse (.svc-hero__lead)
   verliert gegen so eine Kombi-Regel an Spezifitaet, auch wenn diese Datei
   spaeter im <head> verlinkt ist (20.09.2026, Julian: Bug auf Website-
   Erstellung.html - Subheadline zeigte fremde Schriftgroesse/-farbe). Zwei
   Klassen schlagen zuverlaessig jede Klasse+Typ-Kombination. */
.svc-hero .svc-hero__title{
  margin:0 0 55px; font-size:clamp(113px,13.9vw,221px); font-weight:760;
  letter-spacing:-.06em; line-height:.82; color:#000; white-space:nowrap;
  text-rendering:geometricPrecision;
  /* +5% zusaetzlich, aber gezielt nur auf der Y-Achse - font-size skaliert
     beide Achsen gleich, darum scaleY statt weiterer font-size-Erhoehung. */
  transform:scaleY(1.05); transform-origin:left bottom;
}
/* Echter gezeichneter Kreis statt des Font-Punkts - der Glyph "." wirkt
   eckig. Die Zeichenkette "." bleibt im Text fuer Screenreader/Kopieren,
   wird aber visuell durch einen echten CSS-Kreis ersetzt. */
.svc-hero .svc-hero__dot{
  display:inline-block; width:.175em; height:.175em; margin-left:-.05em;
  background:#000; border-radius:50%; color:transparent;
  vertical-align:-.03em; overflow:hidden;
  /* Gegen-Skalierung zum scaleY(1.05) der Headline, sonst wird der runde
     Punkt zum Ei. */
  transform:scaleY(.95238);
}
/* Das Original ist "ABC Monument Grotesk" von Dinamo (kostenpflichtig).
   Satoshi Variable ist die freie Ersatzschrift - ss01 aktiviert die
   einstoeckigen a/g-Formen und das alternative G. */
.svc-hero .svc-hero__title, .svc-hero .svc-hero__lead{
  font-family:'Satoshi','Instrument Sans',system-ui,sans-serif;
  font-feature-settings:"ss01" 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.svc-hero .svc-hero__lead{
  margin:0; font-size:clamp(25px,2.11vw,36px);
  line-height:1.35; color:#0A0A0A; font-weight:700; letter-spacing:-.035em;
}

/* Subheadline immer maximal 2 Zeilen (23.09.2026, Julian): Spaltenbreite
   relativ zur Schriftgroesse statt fester px-Breite der Hero-Spalte, damit
   der Umbruch bei jedem Fenster gleich bleibt (obere Zeile laenger). */
.svc-hero .svc-hero__inner{ max-width:none; }
.svc-hero .svc-hero__lead{ max-width:27em; }

/* Handy (27.09.2026): Die Headline hat ein Minimum von 113px und bricht nicht
   um - auf 390px waren "Abgesichert." & Co. 505-667px breit, die ganzen
   Leistungsseiten liessen sich seitlich verschieben (und das Vollbild-Menue
   rutschte beim Oeffnen mit). 15vw haelt das laengste Wort in der Breite
   (58px bei 390px), drei Klassen schlagen seitenspezifische Groessen. */
@media (max-width: 767px) {
  .svc-hero .svc-hero__inner .svc-hero__title {
    margin-bottom: 30px;
    font-size: 15vw;
  }
  .svc-hero .svc-hero__inner .svc-hero__lead {
    max-width: none;
    font-size: clamp(18px, 5.2vw, 22px);
    line-height: 1.25;
  }
}