/* ===========================================================
   .Havior Studios — base layer
   Tokens aus Figma: BG #EDEDED, Rot #FA2D39, Kacheln #D9D9D9.
   Display-Font: Platzhalter-Stack, wird gegen Figma-Font getauscht.
   =========================================================== */

:root {
  --bg: #ededed;            /* Hero-Hintergrund (Figma) */
  --fg: #17140f;
  --muted: #7d7a73;
  --brand-red: #fa2d39;     /* Logo / Statement-Kachel (Figma) */
  --line: #f31a27;          /* Konstruktionslinien (Figma) */
  --tile-gray: #d9d9d9;     /* Bento-Kacheln (Figma 04) */
  --tile-label: #ffffff;
  --tile-gap: clamp(8px, 0.9vw, 16px);  /* EIN Gap überall — Kachel↔Kachel und Kachel↔Rand */
  --font-display: "Helvetica Neue", "Arial Black", system-ui, sans-serif; /* TODO: Figma-Font */
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.5;
}

/* ===========================================================
   HERO (gepinnt — die gesamte Seite)
   =========================================================== */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* --- Hover-Content-Layer (Zellen des Linienrasters) ---
   Enter: schnelles Aufblitzen (0.16s) + Mikro-Zoom-Settle des Bildes.
   Leave: weicheres Verblassen (0.35s). Assets sind bereits im
   Marken-Duotone vorbereitet — keine Filter nötig. */
.hero__cells {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__cell {
  position: absolute;
  overflow: hidden;
  /* Zellen sind Größen-Container: Prozentzahlen skalieren per
     cqh/cqw proportional zur EIGENEN Zelle (Renes Skizzen-Regel) */
  container-type: size;
}
.hero__cell-img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  /* Assets haben roten Grund — Restflächen bei extremen Formaten
     bleiben damit nahtlos markenrot */
  background-color: var(--brand-red);
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.hero__cell-red {
  position: absolute;
  inset: 0;
  background: var(--brand-red);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hero__cell.is-on .hero__cell-img {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.16s ease-out, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero__cell.is-on .hero__cell-red {
  opacity: 1;
  transition: opacity 0.14s ease-out;
}

/* --- Intro-Stage: Text-Zellen (Raster 25/75) ---
   Layer ist nur während der Statement-Stage aktiv (JS/Timeline). */
.hero__cells--intro {
  opacity: 0;
  visibility: hidden;
}
/* Textblöcke: EINHEITLICHES System für alle Hover-Zellen —
   oben verankert mit identischem Padding wie die Statement-Kachel
   (2vw) → Headlines/Sublines fluchten exakt mit deren Text.
   Headline- und Subline-Größe sind in ALLEN Zellen gleich;
   nur die Prozentzahlen sind groß (füllen die Zelle, ziehen Fokus). */
.hero__cell-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  background: var(--brand-red);
  color: #fff;
  padding: 2vw;
  opacity: 0;
  transition: opacity 0.35s ease;
  overflow: hidden;
}
.hero__cell.is-on .hero__cell-text {
  opacity: 1;
  transition: opacity 0.16s ease-out;
}
/* Headlines: UNTERKANTE reihenweit aligned — bottom-verankert an
   der Linie knapp über der Subline (48% + 1.4vw Abstand); sie
   wachsen nach oben, die Unterkante bleibt fix (Rene 2026-07-04) */
.hero__cell-text h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  /* Skaliert mit der EIGENEN Zelle (cqw/cqh) statt mit dem Viewport →
     Headline bleibt in jedem Kachelformat innerhalb der Kachel und
     bricht sauber um (Rene 2026-07-15). */
  font-size: clamp(0.68rem, min(8.5cqw, 11cqh), 1.7rem);
  line-height: 1.12;
  letter-spacing: 0.015em;
  margin: 0;
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: calc(50% + 0.5rem);
  overflow-wrap: break-word;
}
.hero__cell-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  /* Skizzen-Regel v2 (2026-07-04): Zahl skaliert zur EIGENEN Zelle —
     Höhe 23cqh (füllt bis knapp über die 2-zeilige Headline),
     Breite 35.5cqw („80%" = 2.117em passt in den Zellinhalt).
     Dadurch gleichmäßiges Zahl↔Headline-Verhältnis in jeder Zelle. */
  font-size: clamp(2.6rem, min(23cqh, 35.5cqw), 12rem);
  line-height: 0.95;
}
.hero__cell-text p {
  /* Subline skaliert zur Zelle und ist nach unten begrenzt; passt der
     Text nicht, wird er sauber abgeschnitten statt über die Kachel zu
     laufen. In kleinen Kacheln blendet er ganz aus (Container-Query). */
  font-size: clamp(0.56rem, min(5.4cqw, 6.4cqh), 0.98rem);
  line-height: 1.4;
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  position: absolute;
  top: 52%;
  left: 7%;
  right: 7%;
  bottom: 7%;
  overflow: hidden;
}

/* Kleine Kachel: Subline verschwindet, Headline füllt die Kachel mittig.
   Wird die Kachel wieder größer (Fenster-Resize, anderes Format), kommt
   die Subline automatisch zurück — die Container-Query reagiert live auf
   die tatsächliche Kachelgröße. Rene 2026-07-15. */
@container (max-width: 210px) or (max-height: 250px) {
  .hero__cell-text p { display: none; }
  .hero__cell-text h3 {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* --- Konstruktionslinien (über den Zellen) --- */
.hero__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.hero__line {
  position: absolute;
  background: var(--line);
  opacity: 0.3;
}
.hero__line--v {
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-0.5px);
}
.hero__line--h {
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-0.5px);
}

/* --- Wortmarke (fix zentriert, kein Maus-Effekt) ---
   Liegt ÜBER der Kachel (z4): beim Einblenden der Rot-Fläche färbt
   sich das Logo synchron um (Ebenen-Effekt, JS koppelt die Tweens). */
.hero__logo-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none; /* Hover trifft die Mittelzelle darunter */
}
.hv-logo {
  display: block;
  width: clamp(190px, 15vw, 300px);
  height: auto;
  color: var(--brand-red);
}

/* --- Statement-Kachel (rot) ---
   Stage 2: volle Größe, blendet per Opacity ein.
   Stage 3: schrumpft (JS) in den Grid-Slot. */
.hero__tile {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* %-basiert (nicht vw): fluchtet exakt mit den %-Linien,
     unabhängig von der Scrollbar-Breite */
  width: 25%;
  height: 50%;
  background: var(--brand-red);
  overflow: hidden;
  opacity: 0;
  z-index: 3;
  /* unsichtbar ≠ untastbar: darf den Hover der Mittelzelle nicht
     schlucken (für spätere Klick-Navigation gezielt reaktivieren) */
  pointer-events: none;
}
.hero__tile-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25vw;
  height: 50vh;
  padding: 2vw;
}
/* Copy-Container = volle Kachelfläche: GSAP animiert ihn (Transform),
   deshalb muss er selbst der Bezugsrahmen der 52%-Subline sein */
.hero__tile-copy {
  position: absolute;
  inset: 0;
  padding: 2vw;
}
/* Statement-Typo = exakt die Größen der Hover-Zellen (Rene:
   alle Headlines/Sublines einheitlich); Headline bottom-verankert,
   Subline auf der reihenweiten 52%-Linie — beide Kanten fluchten
   mit den Nachbarzellen der Reihe */
.hero__headline {
  font-family: var(--font-display);
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.9rem);
  line-height: 1.14;
  letter-spacing: 0.015em;
  margin: 0;
  position: absolute;
  left: 2vw;
  right: 2vw;
  bottom: calc(48% + 1.4vw);
}
.hero__body {
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(0.8rem, 0.88vw, 1.05rem);
  line-height: 1.5;
  max-width: 36ch;
  margin: 0;
  position: absolute;
  top: 52%;
  left: 2vw;
  right: 2vw;
}
.hv-mark {
  display: block;
  color: #fff;
  height: auto;
}
/* zentriertes .H: festes Verhältnis zur Kachel (56 % Breite) —
   skaliert 1:1 mit der Kachel, ohne Größen-Deckel */
.hv-mark--center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56%;
  opacity: 0;
}
/* wanderndes .H (Wortmarke → Kachel-Ecke); Position/Größe setzt JS */
.hero__dotH {
  position: absolute;
  z-index: 4;
  color: var(--brand-red);
  opacity: 0;
  pointer-events: none;
}

/* --- Bento-Grid ---
   Gross-Kanten stoßen aneinander; jede Kachel trägt eine
   transparente Halb-Gap-Border → jeder Abstand = exakt --tile-gap.
   Der Container ist um Halb-Gap eingerückt → Außenrand = gleicher Gap. */
.hero__bento {
  position: absolute;
  inset: calc(var(--tile-gap) / 2);
  z-index: 2;
  /* Container darf die Hover-Zellen darunter nicht blockieren —
     nur die Kacheln selbst sind interaktiv */
  pointer-events: none;
}
.bento-tile {
  position: absolute;
  border: calc(var(--tile-gap) / 2) solid transparent;
  background: var(--tile-gray);
  background-clip: padding-box;
  cursor: pointer;
  will-change: transform;
  pointer-events: auto;
  transition: background-color 0.35s ease;
}
/* Home-Hover: Kachel wird rot (JS-gesteuert, nur im Home-Zustand) */
.bento-tile.is-on {
  background-color: var(--brand-red);
  transition: background-color 0.16s ease-out;
}
.bento-tile > span {
  display: block;
  padding: 1.1vw 1.2vw;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(0.72rem, 1.15vw, 1.5rem);
  line-height: 1.25;
  color: var(--tile-label);
}
/* Nummer 01–08 der Entscheidungsreise: dezent über dem Titel,
   skaliert in em mit dem Label — keine eigenen Größen/Abstände */
.bento-tile__no {
  display: block;
  font-size: 0.72em;
  letter-spacing: 0.12em;
  opacity: 0.55;
  margin-bottom: 0.3em;
  font-variant-numeric: tabular-nums;
}
.bento-tile__title { display: block; }

/* --- PAGE-Overlay (Home → Page) ---
   Expandiert aus der geklickten Kachel (Rect setzt JS); trägt nur
   Konstruktionslinien (weiß) + skalierende Headline. */
.hero__page {
  position: absolute;
  background: var(--brand-red);
  z-index: 6;
  overflow: hidden;
  visibility: hidden;
  will-change: left, top, width, height;
}
.hero__page-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__pline {
  position: absolute;
  background: #fff;
  opacity: 0;
}
.hero__pline--v {
  top: 0;
  width: 1px;
  height: 100%;
  transform: translateX(-0.5px) scaleY(0);
  transform-origin: 50% 0%;
}
.hero__pline--h {
  left: 0;
  width: 100%;
  height: 1px;
  transform: translateY(-0.5px) scaleX(0);
  transform-origin: 0% 50%;
}
.hero__page-headline {
  position: absolute;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  will-change: left, top, font-size;
  pointer-events: none; /* Wheel/Hover gehen an den Scroller durch */
}
/* gedrehtes Seitenlabel: horizontal MITTIG in der ersten Spalte,
   vertikal BÜNDIG nach oben (Rene 2026-07-04); Rotation/Zentrierung
   setzt JS (xPercent/rotation), damit GSAP die Transforms besitzt */
.hero__page-side {
  position: absolute;
  left: 1.875%;
  top: 2.5%;
  pointer-events: none;
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(10px, 0.85vw, 17px);
  opacity: 0;
}

/* --- Seiten-Inhalt: Scroller (aktuell nur Hall of Fame) --- */
.hero__page-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  display: none;
}
.hero__page-scroll::-webkit-scrollbar { display: none; }
.hero__page[data-page="portfolio"] .hero__page-scroll,
.hero__page[data-page="advisory"] .hero__page-scroll { display: block; }
/* Seiten-Inhalte: nur der Block der offenen Seite ist aktiv */
.page-content { display: none; }
.hero__page[data-page="portfolio"] .page-content--portfolio { display: block; }
.hero__page[data-page="advisory"] .page-content--advisory { display: block; }
.pf-stage { height: 100%; }
.pf-end { height: 12vh; }

/* ===========================================================
   ABOUT — Media-Kachel mit Scrub-Phasen (Vorhang, Logo, Badges,
   Split mit Mission-Text). Positionen/Transforms treibt JS.
   =========================================================== */
.ab-media {
  position: relative;
  margin-left: 14.25%;
  width: 68%;
  height: 88vh;
}
.ab-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2a2828;
}
.ab-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ab-curtain {
  position: absolute;
  inset: 0;
  background: var(--brand-red);
}
.ab-logo {
  position: absolute;
  color: #fff;
  height: auto;
  pointer-events: none;
  z-index: 2;
}
/* Figma-/Miro-Cursor-Badges: Pfeil + Pill, magnetisch zur Maus */
.ab-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.ab-badge {
  position: absolute;
  opacity: 0;
}
.ab-badge__inner {
  display: inline-block;
  position: relative;
  will-change: transform;
}
/* Figma-Cursor (Spitze oben links bei 0°); JS setzt ihn an die dem
   Gesicht zugewandte Pill-Ecke und rotiert die Spitze dorthin */
.ab-badge__inner i {
  position: absolute;
  width: 16px;
  height: 16px;
  clip-path: polygon(0 0, 100% 36%, 52% 62%, 36% 100%);
  display: block;
}
/* Pille im Referenz-Stil: rund, dunkler Text, Monogramm-Chip links */
.ab-badge__inner b {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(10px, 0.78vw, 14px);
  letter-spacing: 0.01em;
  padding: 0.32em 1em 0.32em 0.32em;
  border-radius: 999px;
  white-space: nowrap;
}
.ab-badge__chip {
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78em;
  letter-spacing: 0;
  flex: 0 0 auto;
}
/* Mission-Text rechts (erscheint im Split) */
.ab-text {
  position: absolute;
  left: 66%;
  top: 16%; /* direkt unter dem (auf 5% verbleibenden) Logo */
  width: 32%;
  opacity: 0;
  z-index: 2;
}
.ab-mission {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.15vw, 1.5rem);
  line-height: 1.45;
  color: rgba(250, 45, 57, 0.55);
}
.ab-mission strong {
  color: var(--brand-red);
  font-weight: 700;
}
.ab-end { height: 24vh; }

/* --- Brand-Kacheln (Hall of Fame) --- */
.pf-brands {
  margin-left: 14.25%;
  width: 72%;
}
.pf-brands__label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(0.7rem, 0.85vw, 1.05rem);
  color: var(--brand-red);
  margin: 0 0 1.6vw;
}
.pf-brands__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 0.9vw, 16px);
}
.pf-tile {
  background: var(--tile-gray);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16%;
  cursor: pointer;
  transition: background-color 0.35s ease;
}
.pf-tile img {
  max-width: 100%;
  max-height: 52%;
  object-fit: contain;
  filter: brightness(0);            /* Logos einheitlich schwarz */
  transition: filter 0.25s ease;
}
.pf-tile--cta span {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 0.95vw, 1.2rem);
  line-height: 1.2;
  color: #17140f;
  transition: color 0.25s ease;
}
.pf-tile.is-on { background: var(--brand-red); transition: background-color 0.16s ease-out; }
.pf-tile.is-on img { filter: brightness(0) invert(1); }   /* schwarz → weiß */
.pf-tile.is-on span { color: #fff; }

/* --- Portfolio-Mosaik (Hall of Fame) --- */
.pf-folio {
  margin: 12vh 0 0 14.25%;
  width: 72%;
}
/* Hover-Zoom entfernt (Rene 2026-07-08e: „zu extrem") — statisches Raster */
.pf-folio__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(70px, 11vh, 130px);
  grid-auto-flow: dense;
  gap: clamp(8px, 0.9vw, 16px);
}
.pf-item {
  overflow: hidden;
  position: relative;
}
.pf-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* AWARDS: Markenrot, Wort füllt die Kachel zentriert (~90% Breite);
   Hover startet den Cursor-Orbit (eigene Ebene, kein Panel) */
.pf-item--awards {
  background: var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  container-type: inline-size;
  cursor: pointer;
}
.pf-awards__word {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-size: 20cqw; /* „AWARDS" ≈ 90% der Kachelbreite, zentriert */
  line-height: 1;
  letter-spacing: 0.02em;
}
/* AWARDS-Orbit: EIGENE EBENE direkt unter .hero__page (kein Panel) —
   sitzt zentriert am Cursor (xPercent/yPercent −50, x/y via quickTo),
   folgt der Maus über der AWARDS-Kachel und ist nie klickbar. Arme
   drehen um die Bühnenmitte, Frames kontern (Logos bleiben aufrecht);
   alle Transformationen setzt GSAP — CSS liefert nur Grundlayout. */
.pf-orbit {
  --stage: min(46vh, 26vw);
  --frame: calc(var(--stage) * 0.24);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage);
  height: var(--stage);
  z-index: 5;
  pointer-events: none;
  visibility: hidden; /* GSAP autoAlpha übernimmt */
}
.pf-orbit__arm {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.pf-orbit__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--frame);
  height: var(--frame);
  padding: calc(var(--frame) * 0.1);
  background: #fff;
  opacity: 0;
  will-change: transform, top;
}
.pf-orbit__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (max-width: 820px) {
  .pf-orbit { --stage: min(38vh, 62vw); }
}

/* ---------- Mobile (Basis — Feinschliff folgt) ---------- */
@media (max-width: 820px) {
  .hero__tile { width: 86%; height: 50%; }
  .hero__tile-inner { width: 86vw; height: 50vh; }
  .hero__tile-inner, .hero__tile-copy { padding: 6vw; }
  /* Intro-Zellen behalten ihr Container-basiertes Layout (7% + cqw/cqh);
     nur die Statement-Kachel nutzt die 6vw-Ausrichtung. */
  .hero__body, .hero__headline { left: 6vw; right: 6vw; }
  /* Statement-Typo bleibt identisch zu den Hover-Zellen —
     keine Sondergrößen mehr (Rene: alles einheitlich) */
  .bento-tile > span { font-size: clamp(0.55rem, 2.4vw, 0.95rem); padding: 2vw 2.2vw; }
}

/* ===========================================================
   Vor-JS-Zustände für die Load-Intro (progressive enhancement)
   =========================================================== */
.js #hero .hero__line--v  { transform: translateX(-0.5px) scaleY(0); transform-origin: 50% 0%; }
.js #hero .hero__line--h  { transform: translateY(-0.5px) scaleX(0); transform-origin: 0% 50%; }
.js #hero .hv-logo__glyph { opacity: 0; }

/* Reduced-Motion: keine Animationen, statischer Endzustand via JS */
@media (prefers-reduced-motion: reduce) {
  .js #hero .hero__line--v  { transform: translateX(-0.5px) scaleY(1); }
  .js #hero .hero__line--h  { transform: translateY(-0.5px) scaleX(1); }
  .js #hero .hv-logo__glyph { opacity: 1; }
}