/* ============ STARTSEITE — nach Figma Soll-3 (Desktop, 441:3) und M-1 v3 (Mobil, 1135:2), Stand 12.10. ============
   Schriften kommen aus dem zentralen Typo-System (typo.css: Rollen mit Größe/Zeilenhöhe/Laufweite je Desktop, Tablet, Mobil);
   hier stehen nur die Zuordnung Element → Rolle, die Abstände und die Startseiten-eigenen Bausteine.
   Desktop-Maße in Design-Pixeln var(--u) (zentral in styles.css, Skalierung wie Skinn). */

/* ---------- Element → Rolle ---------- */
.start .how .label{color:rgba(255,255,255,.9)}
.start .manifest{font-size:var(--fs-manifest);line-height:var(--lh-manifest);letter-spacing:var(--ls-manifest)}
.start .zaehler{font-size:var(--fs-label);line-height:1;letter-spacing:var(--ls-label)}
.start .case-meta{font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label)}
.start .case-titel{font-size:var(--fs-kachel);line-height:var(--lh-kachel);letter-spacing:var(--ls-kachel);text-transform:none}
.start .situ em{font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label)}
.start .situ h3{font-size:var(--fs-titel-l);line-height:var(--lh-titel-l);letter-spacing:var(--ls-titel-l)}
.start .situ p{font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text)}
.start .news-row h3{font-size:var(--fs-titel-s);line-height:var(--lh-titel-s);letter-spacing:var(--ls-titel-s);text-transform:none}
.start .news-row time{font-size:var(--fs-meta);line-height:var(--lh-meta);letter-spacing:var(--ls-meta)}
.start .methodik-svg text[font-family="Inter"]{letter-spacing:.24px}
/* Startseiten-eigene Schriften (keine allgemeine Rolle): Kundenliste und „Yours next?“ */
.start .kunden-liste{letter-spacing:-.02em}
.start .pointe{font-family:var(--font-h);font-weight:500;font-size:26px;line-height:35px;letter-spacing:-.01em}

/* ---------- How we work (dunkel; mit When we come in und BI eine durchgehende dunkle Fläche) ---------- */
.start .how{background:var(--dunkel);color:var(--weiss);padding-top:185px;padding-bottom:89px}
/* gemeinsame dunkle Fläche hinter How we work, When we come in und BI: Bruchteil-Kanten (fluide Bildhöhen) zeigen sonst feine Nähte */
.start .dunkel-block{background:var(--dunkel)}
.start .how .link-l{display:inline-flex;margin-top:74px}

/* ---------- Track record: „Yours next?“ + Termin ---------- */
.start .kunden-cta{display:flex;align-items:baseline;gap:33px;margin-top:35px}

/* Case- und News-Bilder klappen beim Hereinscrollen auf: zentral (styles.css + Base.astro, Markierung data-aufklappen) */

/* BI mobil: Stufen über der Grafik (Desktop: stehen in der Grafik) */
.methodik-stufen-m{display:none;list-style:none;grid-template-columns:repeat(4,1fr);margin-top:40px;font-family:var(--font-b);font-weight:600;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--creme)}
.methodik-stufen-m span{display:block;margin-bottom:2px;color:rgba(247,244,240,.55)}
.methodik-stufen-m li+li{padding-left:6px}

/* ---------- Desktop ab 1101 px: Abstände nach Soll-3 (1440) in Design-Pixeln --u ---------- */
@media (min-width:1101px){
  /* Hero (Rand, Rundung und Navigation kommen zentral aus styles.css / nav.css) */
  .start .hero{min-height:calc(620 * var(--u))}
  .start .manifest{text-indent:calc(170 * var(--u))}
  .start .hero-ctas{gap:calc(56 * var(--u));margin-top:calc(52 * var(--u))}
  /* Grundbausteine */
  .start .label.kerbe{width:calc(170 * var(--u))}
  .start .label.kerbe,.start .wwci .label.kerbe,.start .kunden .label.kerbe{margin-top:calc(5 * var(--u))}
  .start .zaehler{margin-left:calc(10 * var(--u));top:calc(6 * var(--u))}
  .start .h2{max-width:calc(900 * var(--u))}
  .start .work .h2,.start .news .h2{max-width:none}
  .start .statement{max-width:calc(1160 * var(--u));text-indent:calc(170 * var(--u))}
  .start .body{max-width:calc(620 * var(--u))}
  .start .dot{width:calc(10 * var(--u));height:calc(10 * var(--u))}
  /* Work */
  .start .work{padding-top:calc(113 * var(--u));padding-bottom:calc(45 * var(--u))}
  .start .case-grid{margin:calc(52 * var(--u)) 0 calc(124 * var(--u));row-gap:calc(80 * var(--u))}
  .start .case-meta{margin-top:calc(25 * var(--u))}
  .start .work-link{gap:calc(8 * var(--u))}
  .start .case-titel{margin-top:calc(17 * var(--u));max-width:calc(520 * var(--u))}
  .start .case.sm .case-titel{max-width:calc(440 * var(--u))}
  /* How we work + When we come in */
  .start .how,.start .wwci{padding-top:calc(185 * var(--u));padding-bottom:calc(89 * var(--u))}
  .start .how .link-l{margin-top:calc(74 * var(--u))}
  .start .wwci .statement + .situ{margin-top:calc(20 * var(--u))}
  .start .situ{grid-template-columns:calc(170 * var(--u)) 650fr 560fr;padding-top:calc(71 * var(--u))}
  .start .situ em{padding-top:calc(12 * var(--u))}
  .start .situ h3{max-width:calc(560 * var(--u))}
  .start .situ p{padding-top:calc(7 * var(--u))}
  .start .wwci .link-l{margin-top:calc(94 * var(--u))}
  /* BI */
  .start .bi{padding-top:calc(113 * var(--u));padding-bottom:calc(89 * var(--u))}
  .start .bi-head{gap:calc(40 * var(--u))}
  .start .methodik{margin-top:calc(64 * var(--u))}
  .start .methodik-pin{padding-top:calc(60 * var(--u))}
  .start .bi-fuss{margin-top:calc(74 * var(--u))}
  .start .bi .body{margin-top:calc(26 * var(--u))}
  .start .bi-fuss .teaser{margin-top:calc(42 * var(--u))}
  .start .bi-fuss .link-l{margin-top:calc(32 * var(--u))}
  /* News */
  .start .news{padding-top:calc(103 * var(--u));padding-bottom:calc(53 * var(--u))}
  .start .news .h2{margin-bottom:calc(42 * var(--u))}
  .start .news-row{grid-template-columns:670fr 590fr calc(60 * var(--u));column-gap:calc(30 * var(--u));padding:calc(23 * var(--u)) 0 calc(24 * var(--u))}
  .start .news-row h3{padding-top:calc(7 * var(--u));max-width:calc(540 * var(--u))}
  .start .news-row .arrow.big{font-size:calc(28 * var(--u));padding-top:calc(4 * var(--u))}
  .start .news .link-l{margin-top:calc(38 * var(--u))}
  /* Track record */
  .start .kunden{padding-top:calc(115 * var(--u));padding-bottom:calc(107 * var(--u))}
  .start .kunden-liste{margin:calc(59 * var(--u)) 0 0 calc(170 * var(--u));max-width:calc(1210 * var(--u));font-size:calc(26 * var(--u));line-height:calc(35 * var(--u))}
  .start .kunden-cta{margin:calc(35 * var(--u)) 0 0 calc(170 * var(--u));gap:calc(33 * var(--u))}
  .start .pointe{font-size:calc(26 * var(--u));line-height:calc(35 * var(--u))}
}

/* ---------- Hero ab Tablet: Manifest + CTAs vertikal mittig im ersten Bildschirm (wie Skinn, 12.10.) ----------
   Skinn vermessen: Statement mittig im Raum zwischen Kopfzeile und Unterkante (900 hoch: Mitte 482, 1200 hoch: Mitte 632), läuft beim Scrollen mit.
   Bei uns: Hero = Flex-Spalte in Fensterhöhe, Auto-Ränder zentrieren den Block zwischen Nav und Unterkante; je 60 Mindestabstand. */
@media (min-width:761px){
  /* oben Platz für die fixe Navigation (75 wie zuvor die Zeile im Hero) + 60 Mindestabstand */
  .start .hero{display:flex;flex-direction:column;padding-top:calc(135 * var(--u));padding-bottom:calc(60 * var(--u))}
  .start .manifest{margin-top:auto}
  .start .hero-ctas{margin-bottom:auto}
}

/* ---------- Mobil (M-1 v3, 390 breit): Rand 20, 100 über jedem Abschnitt, 80 darunter ---------- */
@media (max-width:760px){

  /* Erster Viewport wie Skinn (12.10.): fast nur Text mit viel Weißraum. Das Showreel ragt nur 80 px herein,
     das H1-Label steht 20 px darüber am unteren Rand, Manifest + CTAs mittig im freien Raum (mind. 60 Abstand zu Kopf und Label) */
  /* oben Platz für die fixe Navigation (60) + 60 Mindestabstand */
  .start .hero{display:flex;flex-direction:column;height:auto;min-height:calc(100svh - 80px);overflow:visible;padding-top:120px}
  .start .manifest{text-indent:0;margin-top:auto}
  .start .hero-ctas{gap:32px;margin-top:56px;margin-bottom:auto}
  .start .hero > h1.hero-label.label{position:static;margin:60px 0 20px}
  .start .reel{height:auto;margin-top:0;padding:0 var(--rand);pointer-events:auto}
  .start .reel-pin{position:static;height:auto;display:block;overflow:visible}
  .start .reel-media{width:100%;margin:0;animation:none}

  /* Grundbausteine mobil */
  .start .label.kerbe{float:none;width:auto;margin:0 0 32px}
  .start .h2{position:relative}
  .start .h2:has(.zaehler){padding-right:24px}
  .start .zaehler{position:absolute;top:0;right:0;margin:0;line-height:var(--lh-label)}
  .start .statement{text-indent:0;margin-top:0}

  /* Work: eine Spalte, Bilder quadratisch */
  .start .work{padding-top:100px;padding-bottom:73px}
  .start .case-grid{grid-template-columns:1fr;grid-template-areas:none;row-gap:64px;margin:40px 0 56px}
  .start .case{grid-area:auto !important}
  .start .case-img,.start .case.sm .case-img{aspect-ratio:1/1}
  .start .case-img :is(img,video){object-position:var(--pos-m,var(--pos,50% 50%))}
  .start .case-meta{margin-top:12px}
  .start .work-link{gap:6px}
  .start .dot{width:6px;height:6px}
  .start .case-titel{margin-top:8px;max-width:none}

  /* How we work, When we come in, BI */
  .start .how,.start .wwci,.start .bi{padding-top:100px;padding-bottom:73px}
  .start .how .link-l,.start .wwci .link-l{margin-top:56px}
  .start .situ{display:block;padding:0}
  .start .wwci .statement + .situ{margin-top:40px}
  .start .situ + .situ{margin-top:48px}
  .start .situ em{display:block;padding:0}
  .start .situ h3{margin-top:10px}
  .start .situ p{padding:0;margin-top:10px}
  .start .bi-head{display:block}
  .start .methodik-stufen-m{display:grid}
  .start .methodik{height:auto;margin-top:12px}
  .start .methodik-pin{position:static;height:auto;padding:0;display:block}
  .start .methodik-buehne{width:100%}
  .start .methodik-svg{aspect-ratio:1380/760}
  .start .methodik-svg text{display:none}
  .start .bi-fuss{margin-top:48px}
  .start .bi .body{margin-top:0}
  .start .bi-fuss .teaser{margin-top:24px}
  .start .bi-fuss .link-l{margin-top:32px}

  /* News: Bild im Desktop-Verhältnis, Titel, Datum; ohne Linien und Pfeil */
  .start .news{padding-top:100px;padding-bottom:73px}
  .start .news .h2{margin-bottom:40px}
  .start .news-row{display:block;border-top:0;padding:0}
  .start .news-row + .news-row{margin-top:64px}
  .start .news-row h3{padding-top:0;margin-top:12px;max-width:none}
  .start .news-row .arrow.big{display:none}
  .start .news-row time{display:block;margin-top:8px}
  .start .news .link-l{margin-top:56px}

  /* Track record */
  .start .kunden{padding-top:100px;padding-bottom:73px}
  .start .kunden-liste{margin:40px 0 0;font-size:18px;line-height:24px}
  .start .kunden-cta{margin-top:48px;gap:16px}
  .start .pointe{font-size:18px;line-height:22px}
}