/* =====================================================================
   Octonova – pages/home.css
   Layout der Startseiten-Sektionen (aus Figma "Startseite • Desktop")
   ===================================================================== */

/* ---------- Hero ----------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;   /* Wunsch Stefanie – Figma-Frame ist 919px hoch */
  padding: 112px var(--page-padding) 96px;
  overflow: hidden;
  background-color: var(--color-valhalla-dark);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: .9;
}
/* Video liegt deckungsgleich über dem Bild. Hat es keine ladbare Quelle,
   rendert es transparent und das Bild darunter bleibt sichtbar. */
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: .9;
}
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--color-valhalla-dark) 18%,
    rgba(39, 26, 105, 0.4) 55%,
    rgba(39, 26, 105, 0.1) 100%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-large);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 52px;
}
.hero__content { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hero__title {
  font-size: clamp(64px, 8.3vw, 120px);
  font-weight: var(--fw-black);
  line-height: 1.1;
  letter-spacing: -0.01em;   /* Figma: -1%, skaliert mit der clamp-Grösse mit */
}
.hero__title .accent { color: var(--color-wattle); font-weight: var(--fw-extralight); }
.hero__subtitle { font-size: var(--fs-text-medium); color: var(--color-white); }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero blendet beim Laden gestaffelt ein (Wunsch Stefanie, Referenz
   vita-travel). CSS-Animation statt IntersectionObserver: läuft sofort beim
   Laden, unabhängig vom CMS-Boot. `both` hält den Startzustand (opacity:0), bis
   die Animation greift. Nur mit JS (.js) – ohne JS bleibt der Hero sichtbar. */
.js .hero__title,
.js .hero__subtitle,
.js .hero__actions {
  animation: hero-in .9s cubic-bezier(.16, 1, .3, 1) both;
}
.js .hero__title    { animation-delay: .05s; }
.js .hero__subtitle { animation-delay: .18s; }
.js .hero__actions  { animation-delay: .31s; }
@keyframes hero-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero__title,
  .js .hero__subtitle,
  .js .hero__actions { animation: none; }
}

/* ---------- Banner (Foto + Text-Overlay) ---------------------------- */
.banner {
  position: relative;
  min-height: 500px;   /* Wunsch Stefanie */
  display: flex;
  align-items: center;
  padding: var(--section-padding) var(--page-padding);
  overflow: hidden;
}
.banner__bg { position: absolute; inset: 0; z-index: 0; }
/* Das <picture> (für das eigene Handy-Bild) ist inline – ohne display:block
   und absolut gesetztes <img> löst sich height:100% im Flex-Kontext des
   Handy-Layouts nicht auf und das Bild fällt auf sein Seitenverhältnis
   zurück (gemessen: 176 statt 370px). Absolut füllt es beide Fälle. */
.banner__bg picture { display: block; }
.banner__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Wunsch Stefanie: linke Seite kräftiger ins dunkle Violett. Start ist ein
     dunklerer Ton als --color-valhalla-dark (#271a4b), hält länger deckend und
     löst sich erst zur rechten Seite hin auf. Werte bewusst zum Nachjustieren. */
  background: linear-gradient(90deg,
    #17102f 0%,
    rgba(23, 16, 47, 0.88) 40%,
    rgba(39, 26, 75, 0.15) 100%);
}
.banner__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-large);
  width: 100%;
  margin-inline: auto;
}
/* Alle Banner-Titel einheitlich gross (Wunsch Stefanie): fs-h1 + ExtraBold wie
   die frühere .h1-Variante. Damit reicht überall die Klasse .banner__title –
   das zusätzliche .h1 bei den Dienstleistungs-Bannern entfällt. */
.banner__title {
  max-width: 640px;
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  /* Nur manuelle Trennung (Wunsch Stefanie): der Browser trennt NICHT mehr
     automatisch nach Silben, sondern ausschliesslich an den weichen Trenn-
     zeichen (U+00AD), die in den Banner-Texten an den Wortfugen sitzen –
     also Kunden-berater, Krawatten-träger usw. Einfache Wörter bleiben ganz. */
  -webkit-hyphens: manual;
          hyphens: manual;
}
/* Die Banner der Dienstleistungen-Seite haben im Design KEINEN Verlauf über
   dem Bild (Header/54: 12202:74193, 12229:38742, 12229:38737) – anders als
   die Banner der Startseite. Textbreite dort 768px. */
.banner--plain .banner__bg::after { content: none; }
.banner--plain .banner__title { max-width: 768px; }
/* Wunsch Stefanie: die Dienstleistungen-Banner bleiben auch schmal 500px hoch.
   Doppelte Klasse für höhere Spezifität – sonst gewinnen die späteren
   .banner-Regeln in den Media-Queries (340/260px). */
.banner.banner--plain { min-height: 500px; }

/* ---------- Sektion "Menschen, die dich verstehen" ------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
/* Wunsch Stefanie: nur die Dienstleistungen-Split (#kundenstimmen) oben
   ausrichten statt mittig – die anderen Splits bleiben zentriert. */
#kundenstimmen .split { align-items: start; }
.split__media img {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 600 / 640;
  object-fit: cover;
}
.split--reverse .split__media { order: -1; }
.split__content { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.split__content .lead { color: rgba(255, 255, 255, 0.9); max-width: 520px; }

/* Karten-Reihe */
.card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 52px;
  margin-top: 64px;
}

/* Grosses Zitat – Figma-Node 12202:75456: 64px Light, 836px breit */
.pull-quote {
  max-width: 836px;
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-wattle);
  margin-top: 96px;
}
.pull-quote strong { color: var(--color-white); font-weight: var(--fw-bold); }

/* Zitat wird beim Reinscrollen Wort für Wort "geschrieben" (Wunsch Stefanie,
   Referenz vita-travel). text-write.js zerlegt den Text in .word-Spans und
   setzt die Verzögerung pro Wort inline; hier nur der Grund-/Zielzustand. Die
   Wörter kommen leicht verschwommen von unten – wirkt wie geschrieben. */
/* Gilt für alle [data-write]-Elemente: das Pull-Quote UND die Banner-Titel
   (Wunsch Stefanie – Banner-Text schreibt sich beim Reinscrollen ein, statt
   Parallax auf dem Hintergrundbild). */
.js [data-write] .word {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(6px);
  transition: opacity .45s ease, filter .45s ease, transform .45s ease;
}
.js [data-write].is-writing .word {
  opacity: 1;
  filter: none;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-write] .word {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

/* ---------- Sektion "Warum octonova" -------------------------------- */
.reasons__head {
  display: grid;
  grid-template-columns: 1fr 396px;
  gap: 64px;
  align-items: start;
  margin-bottom: 96px;
}
.reasons__intro { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.reasons__intro .actions { display: flex; align-items: center; gap: 24px; }

.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
}
.feature { display: flex; flex-direction: column; align-items: center; gap: 24px; }
/* Kein color/currentColor: die Figma-Icons bringen ihre zwei Farben selbst mit.
   Masse stehen als width/height am <img> – jedes Icon hat im Design eigene. */
.feature__icon { flex: none; }
.feature__title { font-size: var(--fs-h4); }
.feature__text { color: rgba(255, 255, 255, 0.85); font-size: var(--fs-text-reg); }

/* ---------- Logos ---------------------------------------------------- */
.logos__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.logo-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  background-color: var(--color-valhalla);
  border-radius: var(--radius);
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 4px;
  font-size: 14px;
}
.logo-cell img { max-height: 56px; max-width: 140px; object-fit: contain; }

/* Marquee (nur Mobile, aktiviert per marquee.js). Der Wrapper beschneidet das
   überbreite Band; das Grid wird zur einreihigen Flex-Spur, die per Animation
   um -50% wandert. Weil marquee.js das Zellen-Set einmal dupliziert, liegt bei
   -50% Kopie 2 deckungsgleich über dem Start – nahtloser Umlauf.
   Gleichmässiger Abstand über margin-right (nicht gap), damit -50% exakt auf
   eine Zellbreite fällt. Doppelte Klasse für Spezifität: die Mobile-Regel
   .logos__grid { gap:16px } steht später im File und würde sonst gewinnen. */
@media (max-width: 768px) {
  /* Logo-Band randlos über die ganze Bildschirmbreite (Wunsch Stefanie):
     den seitlichen --page-padding der Section negieren, sodass das Band bis an
     die Viewport-Kanten reicht. overflow:hidden beschneidet das Marquee. */
  .logos__marquee {
    overflow: hidden;
    margin-left: calc(-1 * var(--page-padding));
    margin-right: calc(-1 * var(--page-padding));
  }
}
.logos__grid.logos__grid--marquee {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 0;
  animation: logos-marquee 24s linear infinite;
}
.logos__grid.logos__grid--marquee .logo-cell {
  flex: 0 0 auto;
  width: 150px;
  margin-right: 16px;
}
@keyframes logos-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logos__grid.logos__grid--marquee { animation: none; }
}

/* ---------- Kontakt-Reihe ------------------------------------------- */
.contact-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
}
/* Figma (Contact/17 + Contact/24): Icon → 24px → Textblock, darin 16px
   zwischen Wert und Notiz. Die Notiz ist reines Weiss, nicht abgedunkelt. */
.contact-item { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.contact-item__body { display: flex; flex-direction: column; gap: 16px; }
.contact-item__icon { flex: none; width: 48px; height: 48px; }
.contact-item__value {
  font-size: var(--fs-h4);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-white);
}
.contact-item__value a:hover { color: var(--color-wattle); }
.contact-item__note { color: var(--color-white); font-size: var(--fs-text-reg); }

/* ---------- Responsive ---------------------------------------------- */
@media (max-width: 1024px) {
  /* --- Wünsche Stefanie (Tablet) --- */
  .pull-quote { margin-top: 120px; }
  .reasons__title { max-width: 80%; }
  .reasons__head { margin-bottom: 100px; }
  .feature-row { gap: 64px; }

  /* "Menschen, die dich verstehen": Bild neben Text wird zu schmal –
     untereinander, Bild zuerst. */
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--reverse .split__media { order: 0; }
  .split__media img { aspect-ratio: 3 / 2; }
  .card-row { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .info-card { min-height: 0; padding: 32px; }
  .reasons__head { grid-template-columns: 1fr; gap: 32px; }
  .feature-row { grid-template-columns: 1fr; }
  .contact-row { grid-template-columns: 1fr; gap: 48px; }
  .banner { min-height: 340px; }
}

@media (max-width: 768px) {
  :root { --section-padding: 72px; --page-padding: 24px; }

  /* 100vh bleibt (Wunsch Stefanie), aber svh statt vh: auf dem Handy zählt
     vh die eingeblendete Browser-Leiste mit, dadurch wird die Sektion höher
     als der sichtbare Bereich und der Inhalt rutscht darunter. svh nimmt
     den tatsächlich sichtbaren Ausschnitt. */
  .hero { min-height: 100svh; }

  /* Im Querformat ist 100svh keine 400px hoch – dort würde der Titel den
     Hero sprengen. Höhe dann dem Inhalt überlassen. */
  .hero__inner { gap: 32px; }
  .hero__title { font-size: clamp(44px, 13vw, 72px); }   /* Wunsch Stefanie: etwas grösser */
  .hero__bg::after {
    background: linear-gradient(180deg,
      rgba(39, 26, 75, 0.35) 0%,
      var(--color-valhalla-dark) 78%);
  }
  .logos__grid { gap: 16px; }
  .logo-cell { height: 64px; }
  .contact-item__note { font-size: 17px; }   /* Wunsch Stefanie (Home + Kontakt) */

  /* Banner auf dem Handy (Visualisierung Stefanie): Bild randlos über die
     ganze Breite, Text oben DARAUF. Section-Padding daher auf 0 – der
     Innenabstand des Textes kommt aus .banner__inner. Das Bild bleibt in
     seiner absoluten Lage (Basisregel). */
  .banner {
    min-height: 60svh;
    align-items: flex-start;
    padding: 0;
  }
  .banner__inner {
    /* Text oben ausgerichtet mit 24px Abstand (Wunsch Stefanie), nicht der
       grosse Section-Abstand. */
    padding: 24px var(--page-padding) 0;
  }
  /* Der Verlauf der Basisregel läuft waagrecht (dunkel links). Der Text sitzt
     jetzt oben – daher senkrecht abdunkeln, damit er auf jedem Motiv lesbar
     bleibt (auch auf einem eigenen Handy-Bild). */
  .banner__bg::after {
    background: linear-gradient(180deg,
      rgba(39, 26, 75, 0.72) 0%,
      rgba(39, 26, 75, 0.15) 55%,
      rgba(39, 26, 75, 0) 100%);
  }
  .banner__title { max-width: none; }
  .banner.banner--plain { min-height: 60svh; }
}

@media (max-height: 520px) and (max-width: 1024px) {
  /* Querformat-Handy: 100svh ist zu wenig für Titel + Buttons. */
  .hero, .section--first { min-height: 0; }
}