/* MSC Startseiten-Hero – Motiv der offiziellen Website (www.munichstrategyconsulting.de).
   Bild: MSC_Home_high.jpg (MSC, 2963×1250) – orangefarbenes Panel und beide Streifen sind IM BILD enthalten.
   Desktop: Hero behält das Seitenverhältnis des Bildes, damit Panel/Streifen nie verrutschen; Text liegt auf dem Panel.
   Mobil (≤760px): Bildausschnitt + SVG-Panel mit Streifen in gleicher Reihenfolge
   (von links: Panel → dicker Streifen → dünner Streifen; Bildausschnitt auf den Lichteinfall). Ebenen: Foto 0 → SVG 2 → Text 3. */
:root{
  --msc-orange:#F49624;
  --msc-hero-image:url("../img/msc-home.jpg");
  --msc-hero-font:"Univia Pro","Manrope",system-ui,sans-serif;  /* @font-face in site.css */
}
.msc-hero{position:relative;isolation:isolate;aspect-ratio:2963/1250;margin-top:76px;overflow:hidden;color:#fff;background:#e8892a}
.msc-hero__image{position:absolute;inset:0;z-index:0;background:var(--msc-hero-image) left top/100% 100% no-repeat}

/* SVG-Formen nur mobil (Desktop: im Bild enthalten) */
.msc-hero__shapes{display:none;position:absolute;inset:0;z-index:2;width:100%;height:100%;pointer-events:none}
.msc-hero__shapes polygon{fill:var(--msc-orange)}
.msc-hero__panel{opacity:.92}
.msc-hero__stripe{opacity:.55}

/* Text */
/* Linke Textkante = Inhaltskante von .wrap (site.css: max-width var(--max), padding var(--gutter), zentriert),
   damit Hero-Text, Logo und Body-Text bei jeder Fensterbreite bündig sind. 100% = Hero-Breite (ohne Scrollbar).
   min(…, 47.5% - 495px): erst ab ca. 3000px Breite aktiv – hält "Perspektivenwechsel" (55px) im Panel des Bildes. */
.msc-hero__content{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;padding-left:max(var(--gutter),min(calc((100% - var(--max))/2 + var(--gutter)),calc(47.5% - 495px)));padding-right:var(--gutter)}
.msc-hero__title,.msc-hero__sub{color:#fff;font-family:var(--msc-hero-font);font-weight:400;font-style:normal}
.msc-hero__title{margin:0;font-size:clamp(2rem,4.1vw,3.45rem);line-height:1.12;letter-spacing:-.015em}
.msc-hero__sub{margin:.9em 0 0;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.55;letter-spacing:normal}

@media (max-width:760px){
  .msc-hero{aspect-ratio:auto;height:min(78vh,640px);min-height:440px}
  .msc-hero__image{background-size:cover;background-position:60% center}
  .msc-hero__shapes{display:block}
  .msc-hero__content{justify-content:flex-start;padding-top:22%}
}
/* Sehr schmale Phones: "Perspektivenwechsel" ist bei 32px fast so breit wie der Screen – nur hier mitskalieren. */
@media (max-width:380px){.msc-hero__title{font-size:7.9vw}}