/* ==========================================================================
   VENTIVA — 03 Startseite
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — asymmetrisches 12er-Grid, 6/6 optisch aber 5/7 im Gewicht.
   Die Headline sitzt links auf ruhiger Tiefe, das Kissen rechts im
   Druckfeld und bricht bewusst aus dem Container zum rechten Rand aus.
   -------------------------------------------------------------------------- */
.v-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 6vw, 7rem) clamp(2.5rem, 1rem + 4vw, 4.5rem);
}

.v-hero__grid {
  align-items: center;
  row-gap: clamp(2.5rem, 1rem + 6vw, 4rem);
}

.v-hero__copy   { grid-column: 1 / span 6; position: relative; z-index: 2; }
.v-hero__stage  { grid-column: 7 / span 6; position: relative; }

.v-hero__title { margin-bottom: 1.5rem; }
.v-hero__title em {
  font-style: normal;
  color: var(--v-heat);
}

.v-hero__lead { margin-bottom: 2.4rem; }

.v-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-bottom: 2.6rem;
}
.v-hero__note {
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  color: var(--v-ink-60);
  letter-spacing: .04em;
}

/* Messleiste: drei belegbare Zahlen statt drei Marketing-Adjektive. */
/* Die Bezeichnung steht im Markup vor dem Wert (so verlangt es eine
   Beschreibungsliste), soll aber darunter erscheinen. */
.v-metrics > div { display: flex; flex-direction: column-reverse; }

.v-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--v-col-gap);
  border-top: 1px solid var(--v-line);
  padding-top: 1.6rem;
  max-width: 32rem;
}
.v-metrics__value {
  font-family: var(--v-display);
  font-stretch: 118%;
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  display: block;
}
.v-metrics__label {
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  color: var(--v-ink-60);
  letter-spacing: .08em;
  text-transform: uppercase;
  display: block;
  margin-top: .55rem;
  line-height: 1.4;
}

/* Bühne: Produkt im Druckfeld */
.v-stage {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: var(--v-radius-lg);
  background: radial-gradient(120% 90% at 62% 34%, #1D5750 0%, #10332E 58%, #0C2622 100%);
  overflow: hidden;
  box-shadow: var(--v-shadow-lg);
}

/* --- Hero: Videoflaeche ---------------------------------------------------
   Ersetzt die frühere Produktbühne mit Druckkarte. Solange kein Video
   hinterlegt ist, steht hier eine ruhige Fläche in Markenfarbe — bewusst
   ohne Platzhaltermotiv, damit niemand es für das Endergebnis hält. */
.v-herostage {
  position: relative;
  /* Exakt das Seitenverhältnis des Hero-Fotos (1066 × 1600). Der Rahmen
     richtet sich nach dem Bild, nicht das Bild nach dem Rahmen: Bei 4:5
     fiel entweder der Berggipfel oder die Unterkante des Kissens weg —
     und beides ist der Grund, warum das Motiv gewählt wurde. */
  aspect-ratio: 2 / 3;
  border-radius: var(--v-radius-lg);
  overflow: hidden;
  background: var(--v-deep-soft);
  display: grid;
  place-items: center;
}
.v-herostage__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Im Normalfall deckungsgleich mit dem Rahmen. Nur wenn ein anderes Motiv
     eingehängt wird, greift der Beschnitt — dann von unten, weil dort das
     Produkt steht. */
  object-position: 50% 100%;
}

.v-herostage.is-empty {
  /* Feiner Verlauf entlang der Markenachse, damit die leere Fläche nicht
     wie ein Ladefehler aussieht. */
  background:
    radial-gradient(120% 90% at 60% 30%, rgba(78,143,134,.35), transparent 70%),
    var(--v-deep-soft);
  box-shadow: inset 0 0 0 1px var(--v-line-deep);
}
.v-herostage__hint {
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v-paper-70);
}

@media (max-width: 61.24em) {
  /* Auf schmalen Screens etwas flacher, damit der Hero nicht den ganzen
     ersten Bildschirm füllt — aber nicht ins Querformat, sonst bliebe von
     einem hochkanten Motiv ein Streifen übrig. */
  .v-herostage { aspect-ratio: 4 / 5; }
}


.v-stage__map { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-stage__product {
  position: absolute;
  inset: 8% 6% 6%;
  width: auto;
  height: auto;
  max-height: 86%;
  margin: auto;
  object-fit: contain;
  filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .45));
}
.v-stage__tag {
  position: absolute;
  left: 1.4rem;
  bottom: 1.4rem;
  right: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  border-radius: 999px;
  background: rgba(8, 20, 18, .55);
  backdrop-filter: blur(10px);
  color: var(--v-paper);
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  letter-spacing: .06em;
}
.v-stage__tag .v-scale { color: var(--v-paper-70); }

/* Ambientes Atmen der Druckkarte — sehr langsam, kaum sichtbar. */
.v-stage__map .hot { animation: v-breathe 9s var(--v-ease) infinite alternate; }
@keyframes v-breathe { from { opacity: .55; } to { opacity: .95; } }

/* --------------------------------------------------------------------------
   VORTEILE — versetztes Raster. Kein Icon-Dreier, sondern fünf Karten
   unterschiedlicher Größe, die dem Blick eine Diagonale vorgeben.
   -------------------------------------------------------------------------- */
.v-features__head { grid-column: 1 / span 7; margin-bottom: clamp(1.8rem, 1rem + 2.4vw, 3rem); }

.v-features__grid { align-items: start; row-gap: clamp(1.2rem, .6rem + 1.6vw, 2rem); }

/* Das Kartenbauteil selbst steht in 02-base.css — die Produktseite benutzt es
   für den Testhinweis, lädt diesen Layer aber nicht. Hier bleibt nur die
   Platzierung im Raster, die es nur auf der Startseite gibt. */

/* Platzierung: bewusst ungerade Spaltenzahlen, zwei Karten leicht versetzt,
   damit keine Sitzreihe entsteht.

   Enger als vorher: Die alte Anordnung schob Karte c um 7rem und Karte d um
   4.5rem nach unten. Bei vier statt fünf Karten riss das auf dem Desktop
   grosse weisse Flächen auf, weil die Zeile so hoch wurde wie die tiefste
   Karte. Der Versatz ist jetzt halbiert, und die Karten füllen die Breite
   in zwei Reihen zu je zwei. */
.v-card--a { grid-column: 1 / span 7; }
.v-card--b { grid-column: 8 / span 5; }
.v-card--c { grid-column: 1 / span 5; }
.v-card--d { grid-column: 6 / span 7; }

@media (min-width: 61.25em) {
  .v-card--b { transform: translateY(2rem); }
  .v-card--c { margin-top: -1rem; }
  .v-card--d { margin-top: 1.5rem; }
}

/* --------------------------------------------------------------------------
   SHOWCASE — Office / Gaming / Auto als Segmented Control.
   Jede Szene zeigt dieselbe Druckkarte in anderer Sitzhaltung.
   -------------------------------------------------------------------------- */
.v-show { position: relative; }
.v-show__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2rem, 1rem + 3vw, 3.4rem);
}

/* Die Tab-Leiste ergibt nur Sinn, wenn das Skript die Panels auch umschalten
   kann. Ohne JavaScript stehen die drei Situationen untereinander — dann wären
   drei Schalter, die nichts tun, irreführend. .is-interactive setzt
   initShowcase() in ventiva.js. */
[data-v-showcase]:not(.is-interactive) .v-seg { display: none; }

/* Ohne Skript trennt eine Linie die drei Situationen, sonst laufen sie
   ineinander. */
[data-v-showcase]:not(.is-interactive) .v-show__panel + .v-show__panel {
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-top: 1px solid var(--v-line);
}

.v-seg {
  display: inline-flex;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px var(--v-line-deep);
  gap: 2px;
}
.v-seg__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--v-paper-70);
  font-family: var(--v-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -.005em;
  padding: .72rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--v-fast) var(--v-ease), color var(--v-fast) var(--v-ease);
  white-space: nowrap;
}
.v-seg__btn:hover { color: #fff; }
.v-seg__btn[aria-selected="true"] {
  background: var(--v-heat);
  color: var(--v-ink);
}

.v-show__panels { position: relative; }
.v-show__panel[hidden] { display: none; }

.v-show__panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--v-col-gap);
  align-items: center;
  animation: v-panel-in .5s var(--v-ease-out) both;
}
@keyframes v-panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.v-show__scene { grid-column: 1 / span 7; }
.v-show__body  { grid-column: 9 / span 4; }

.v-scene {
  position: relative;
  border-radius: var(--v-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--v-deep-soft);
  display: grid;
  place-items: center;
}
.v-scene img { width: 100%; height: 100%; object-fit: cover; }

/* Szene ohne Foto: ruhige Flaeche mit Hinweis statt leerem Kasten. */
.v-scene.is-empty {
  background:
    radial-gradient(110% 90% at 50% 40%, rgba(78,143,134,.30), transparent 70%),
    var(--v-deep-soft);
  box-shadow: inset 0 0 0 1px var(--v-line-deep);
}
.v-scene__hint {
  font-family: var(--v-mono);
  font-size: var(--fs-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--v-paper-70);
}
.v-scene__legend {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  width: min(220px, 60%);
  color: var(--v-paper-70);
}

.v-show__title { margin-bottom: 1rem; }
.v-show__text  { color: var(--v-paper-70); margin: 0 0 1.8rem; font-size: var(--fs-sm); line-height: 1.7; }

.v-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .9rem; }
.v-list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: .8rem;
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--v-paper-70);
  line-height: 1.55;
}
.v-list li::before {
  content: "";
  width: 8px; height: 8px;
  margin-top: .5rem;
  border-radius: 50%;
  background: var(--v-heat);
}

/* --------------------------------------------------------------------------
   PROOF — Bewertungen + Garantie-Zeile
   -------------------------------------------------------------------------- */
.v-proof__head { grid-column: 1 / span 6; }
.v-proof__quotes {
  grid-column: 7 / span 6;
  display: grid;
  gap: 1.2rem;
}
/* Vier Rueckmeldungen statt zwei — ab mittlerer Breite zweispaltig, sonst
   wird die Spalte unangenehm lang. Die erste (laengste) Karte nimmt beide
   Spalten ein. */
@media (min-width: 48em) {
  .v-proof__quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-proof__quotes .v-quote:first-child { grid-column: 1 / -1; }
}

/* Das Zitat-Bauteil selbst steht in 02-base.css: Es kommt auf Startseite,
   Stress-Landingpage UND Produktseite vor, die Produktseite lädt diesen Layer
   hier aber nicht. Genau daran ist der Block auf der Produktseite bisher
   ungestylt herausgekommen. Hier bleibt nur die Rasterung, die pro Seite
   verschieden ist. */

.v-cta-band {
  border-radius: var(--v-radius-lg);
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  background: var(--v-deep);
  color: #F2F6F3;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--v-col-gap);
  align-items: center;
}
.v-cta-band__copy { grid-column: 1 / span 7; }
.v-cta-band__side { grid-column: 9 / span 4; display: grid; gap: 1rem; justify-items: start; }
.v-cta-band p { color: var(--v-paper-70); margin: 1rem 0 0; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 61.24em) {
  .v-hero__copy,
  .v-hero__stage,
  .v-features__head,
  .v-proof__head,
  .v-proof__quotes,
  .v-show__scene,
  .v-show__body,
  .v-cta-band__copy,
  .v-cta-band__side { grid-column: 1 / -1; }

  .v-card--a, .v-card--b,
  .v-card--c, .v-card--d { grid-column: span 6; }

  .v-hero__stage { order: -1; }
  .v-show__panel { row-gap: 2rem; }
}

@media (max-width: 40em) {
  .v-card--a, .v-card--b,
  .v-card--c, .v-card--d { grid-column: 1 / -1; }

  .v-metrics { grid-template-columns: 1fr 1fr; row-gap: 1.4rem; }
  .v-metrics__value { font-size: 1.5rem; }
  .v-seg { width: 100%; overflow-x: auto; }
  .v-seg__btn { flex: 1; padding-inline: 1rem; }
}