/* ==========================================================================
   Home-Opening.
   Das Video liegt fest im Bild. Darüber ein rotes Feld über zwei Drittel,
   das beim Scrollen nach oben wegfährt und den Film ganz freigibt.
   Einzige Layout-Änderung gegenüber der Bestandsseite.
   Zum Zurückdrehen: den <link> in index.html entfernen.
   ========================================================================== */

/* Farbe und Schrift des Feldes kommen aus palette.css (--hero-field / --hero-ink). */

/* --- Bühne: klebt im Bild, Scrollstrecke = Höhe des roten Felds --------- */
section.vhero{
  height:calc(100svh + 50svh) !important;
  min-height:0 !important;
  overflow:visible !important;
  background:var(--surface,#151616) !important;
}
section.vhero .vhero-pin{
  position:sticky !important;top:0 !important;
  height:100svh !important;min-height:0 !important;
  overflow:hidden !important;background:var(--surface,#151616) !important;
}
section.vhero .vhero-pin .vhero-stage{ inset:0 !important; background:var(--surface) !important; }

/* Das Flipbook der Bestandsseite läuft weiter, wird hier nicht gezeigt */
section.vhero .vhero-stage .gifbg{ display:none !important; }
section.vhero .vhero-stage .hero-band{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;
  z-index:0;filter:saturate(.92);
}
section.vhero .vhero-stage::after{ background:rgba(0,0,0,.14) !important; }

/* --- Das rote Feld ----------------------------------------------------- */
.vhero .vhero-copy{
  position:absolute;top:0;left:0;right:0;height:50%;z-index:4;
  background:var(--hero-field);color:var(--hero-ink);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 0 clamp(26px,3.2vw,52px);
  will-change:transform;
}

/* --- Eine Aussenlinie für alles ----------------------------------------
   Massgeblich ist die Linie von "Studio position": das normale .frame
   (90vw, max 1500, 25px Innenabstand). Hero und Work-Sektion hatten eigene
   Werte und standen dadurch weiter aussen. */
.vhero .vhero-copy > .frame{
  width:90vw;max-width:1500px;margin:0 auto;
  padding-left:25px;padding-right:25px;
  /* die Seite setzt .vhero .frame auf height:100% — das würde den Text
     nach oben unter den Header schieben */
  height:auto !important;
}
/* Der Inhalt der Work-Sektion läuft über die volle Breite — nur die
   Überschrift sitzt auf der Linie. */
section.home-work .home-work-head{
  width:min(90vw,1500px);max-width:100%;
  margin-inline:auto;padding-inline:25px;
  box-sizing:border-box;
}
section.home-work .hw-title{max-width:24ch}
@media(max-width:860px){
  .vhero .vhero-copy > .frame{width:90vw;padding-left:0;padding-right:0}
  section.home-work .home-work-head{width:100%;padding-inline:0}
}

/* Der Satz steht wie in der Original-Sektion: .ed-costmt mit .stmt und .side.
   Die Masse kommen aus brandnw-ed.css, hier nur die Farben der Fassung.
   !important, weil theme-dark.css dieselben Klassen global umfärbt — das
   Hero-Feld hat aber seine eigene Farbe, unabhängig vom Theme der Seite. */
.vhero .ed-costmt{width:100%}
.vhero .ed-costmt .stmt{color:var(--hero-ink) !important}
.vhero .ed-costmt .side .ed-body{color:var(--hero-dim2) !important}
.vhero .ed-costmt .side .ed-textlink{color:var(--hero-ink) !important}
.vhero .ed-costmt .side .ed-textlink:hover{color:var(--hero-ink) !important;opacity:.7}

/* Keine Trennlinie unter dem Menü — auf dem Farbfeld liest sie sich als Fuge */
header.top{border-bottom-color:transparent !important;box-shadow:none !important}

/* --- Kleinere Schirme -------------------------------------------------- */
@media(max-width:1100px){
  section.vhero{height:calc(100svh + 50svh) !important}
  .vhero .vhero-copy{height:50%}
  .vhero .ed-costmt{grid-template-columns:1fr;gap:26px}
}
@media(max-width:640px){
  section.vhero{height:calc(100svh + 50svh) !important}
  .vhero .vhero-copy{height:50%}
}

/* ==========================================================================
   Der Hero muss ohne die Inline-Styles der Startseite funktionieren.
   Auf work.html fehlten drei Dinge: die Buehne war nicht absolut gesetzt
   (Bildhoehe 0), das Raster kam aus brandnw-ed.css (dort nicht geladen),
   und der Header hatte keine Kennung fuer die Farbumschaltung.
   ========================================================================== */
section.vhero .vhero-pin{position:sticky;top:0;overflow:hidden}
section.vhero .vhero-stage{
  position:absolute !important;
  top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;
  overflow:hidden;
}
/* Aussage links, Einordnung rechts — 1,5 : 1 wie auf der Startseite */
.vhero .ed-costmt{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  column-gap:clamp(24px,4vw,58px);
  align-items:end;
  width:100%;
}
.vhero .ed-costmt .side{display:grid;gap:1.1em;align-content:end}
@media(max-width:900px){
  .vhero .ed-costmt{grid-template-columns:1fr;row-gap:26px}
}