/* ============================================================
   Startseite. Setzt basis.css und bausteine.css voraus.
   ============================================================ */

/* ============================================================
   Hero
   Drei Textelemente: Zeile, Satz, Handlung. Mehr nicht.
   ============================================================ */
.hero {
  position: relative;
  min-height: min(100svh, 860px);
  display: flex;
  align-items: flex-end;
  padding-block: 128px clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img,
.hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-media video { position: absolute; inset: 0; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(10, 12, 15, 0.72) 38%, rgba(10, 12, 15, 0.34) 72%, rgba(10, 12, 15, 0.55) 100%),
    linear-gradient(to right, rgba(10, 12, 15, 0.78) 0%, rgba(10, 12, 15, 0.15) 62%, transparent 100%);
}
.hero-inner { position: relative; z-index: 1; }
.hero-copy { max-width: min(100%, 58rem); }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.55rem); }
.hero-sub {
  /* Breiteres Satzbild: 46ch standen als schmale Saeule unter einer doppelt
     so breiten Headline. 62ch bleibt im lesbaren Bereich und laesst den
     Absatz in drei Zeilen laufen statt in vier. */
  max-width: 62ch;
  margin-top: 22px;
  /* Untergrenze bleibt klein, damit der Absatz auf dem Telefon nicht
     auf sechs Zeilen waechst. Am Desktop traegt ihn der vw-Anteil. */
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.52;
  color: rgba(244, 246, 248, 0.88); /* ueber Bewegtbild kraeftiger als --ink-2 */
}
.hero .accent { color: var(--accent); }

/* ============================================================
   Vertrauen: Bewertung + Logowand. Nur Logos, keine Beschriftung.
   ============================================================ */
.trust { padding-block: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.trust-inner { display: flex; align-items: center; gap: clamp(28px, 5vw, 64px); }
.trust-rating { flex: none; display: flex; align-items: center; gap: 12px; }
.trust-rating span:not(.stars) { font-size: 0.92rem; color: var(--ink-3); white-space: nowrap; }
.trust-rating b { color: var(--ink); font-weight: 600; }


/* ============================================================
   Problem: stehende Ueberschriftenspalte, Punkte laufen daneben durch.
   Trennlinien nur zwischen den Punkten, nicht ober- und unterhalb jedes.
   ============================================================ */
.problem-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.problem-aside { position: sticky; top: 108px; }
.problem-list { display: grid; }
.problem-item { display: grid; grid-template-columns: 3.2rem 1fr; gap: 22px; padding-block: 30px; }
.problem-item + .problem-item { border-top: 1px solid var(--line); }
.problem-item:first-child { padding-top: 0; }
.problem-n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--accent);
  padding-top: 0.24em;
}
.problem-item p { margin-top: 11px; font-size: 1rem; }

/* ============================================================
   Nutzen: vier Aussagen, keine Karten. Nur Raster-Haarlinien.
   ============================================================ */
/* Hier steht das Karussell daneben, der Kopf fuellt seine Spalte ganz. */
.gain-head .head { max-width: none; }
.gain-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
/* Bilderkarussell nach dem Vorbild der Logo-Laufschrift weiter oben:
   ein Bild voll sichtbar, die Nachbarn ragen angeschnitten herein und
   faden ueber eine Maske zu den Raendern aus.
   Die Breite von 76% ist auf die Maske abgestimmt: das aktive Bild liegt
   dann genau zwischen 12% und 88%, also im voll deckenden Teil. */
.gain-viewport {
  overflow: hidden;
  /* Weiche Blende statt harter Kante: mehrere Stuetzpunkte ergeben eine
     s-foermige Kurve, ein linearer Keil wirkt an den Raendern zu abrupt.
     Voll deckend ab 20%, dort beginnt bei 59% Bildbreite das Hauptbild. */
  --blende: linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.08) 4%,
      rgba(0, 0, 0, 0.28) 8%,
      rgba(0, 0, 0, 0.58) 12%,
      rgba(0, 0, 0, 0.85) 16%,
      #000 20%,
      #000 80%,
      rgba(0, 0, 0, 0.85) 84%,
      rgba(0, 0, 0, 0.58) 88%,
      rgba(0, 0, 0, 0.28) 92%,
      rgba(0, 0, 0, 0.08) 96%,
      rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: var(--blende);
  mask-image: var(--blende);
}
.gain-track {
  display: flex;
  gap: 14px;
  will-change: transform;
  transition: transform 760ms var(--ease-out);
}
.gain-item {
  flex: none;
  width: 59%;   /* Mittelweg: Anschnitt rund 60px statt 48 oder 70 */
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  opacity: 0.42;
  transform: scale(0.94);   /* wenig Schrumpf, sonst verschwindet der Anschnitt */
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.gain-item.is-active { opacity: 1; transform: none; cursor: default; }
.gain-item:not(.is-active):hover { opacity: 0.62; }
.gain-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

.gain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: clamp(40px, 5vw, 64px);
}
.gain {
  background: var(--bg);
  padding: clamp(30px, 3.4vw, 46px);
  transition: background-color 320ms var(--ease-out);
}
.gain:hover { background: var(--surface); }
.gain-k {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.gain h3 { margin: 20px 0 12px; }
.gain p { font-size: 1rem; }
.section--tint .gain { background: var(--bg-1); }
.section--tint .gain:hover { background: var(--surface); }

/* ============================================================
   Ueber LDmotion
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.about-media { position: relative; }
.about-media > picture img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4 / 5; object-fit: cover; }
.about-inset {
  position: absolute;
  right: -22px; bottom: -26px;
  width: 46%;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--mat-edge);
  box-shadow: var(--shadow);
}
.about-inset img { aspect-ratio: 4 / 3; object-fit: cover; }
/* Zwei Ebenen, zwei Geschwindigkeiten. Das kleine Bild laeuft langsamer als
   das grosse, dadurch entsteht Tiefe statt einer flachen Collage.
   Laeuft an der Scroll-Zeitleiste, nicht an einem Scroll-Handler. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .about-media > picture img { animation: about-hinten linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .about-inset { animation: about-vorn linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .about-copy > * { animation: about-text linear both; animation-timeline: view(); animation-range: entry 10% entry 85%; }
  }
}
@keyframes about-hinten { from { transform: translate3d(0, 14px, 0) scale(1.03); } to { transform: translate3d(0, -14px, 0) scale(1); } }
@keyframes about-vorn   { from { transform: translate3d(0, 40px, 0); } to { transform: translate3d(0, -26px, 0); } }
@keyframes about-text   { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.about-media > picture img, .about-inset { will-change: transform; }

.about-copy p + p { margin-top: 16px; }
.about-copy .t-h2 { margin-bottom: 20px; }
.about-sign { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.about-sign b { font-family: var(--display); font-weight: 600; display: block; }
.about-actions { margin-top: 30px; }

/* ============================================================
   Ablauf: senkrechte Schiene, Fortschritt laeuft mit dem Scrollen mit.
   ============================================================ */
/* Eine Quelle fuer beides: --rail ist die Mitte der Linie, --flow-pad der
   Einzug des Inhalts. Punkt und Linie leiten sich daraus ab und koennen
   nicht mehr auseinanderlaufen. */
.flow {
  --rail: 22px;
  --flow-pad: 62px;
  --dot: 16px;
  position: relative;
  margin-top: clamp(44px, 5vw, 68px);
  padding-left: var(--flow-pad);
}
.flow::before {
  content: "";
  position: absolute;
  left: calc(var(--rail) - 1px); top: 12px; bottom: 12px;
  width: 2px;
  background: var(--line);
}
.flow-fill {
  position: absolute;
  left: calc(var(--rail) - 1px); top: 12px;
  width: 2px;
  height: calc(100% - 24px);
  transform-origin: top;
  background: var(--accent-grad);
}
.flow-step { position: relative; padding-bottom: clamp(38px, 4vw, 58px); }
.flow-step:last-child { padding-bottom: 0; }
.flow-step::before {
  content: "";
  position: absolute;
  /* Punktmitte auf Linienmitte: Rasterrand + Versatz + halber Punkt = --rail */
  left: calc(var(--rail) - var(--flow-pad) - var(--dot) / 2);
  top: 8px;
  width: var(--dot); height: var(--dot);
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 2px solid var(--accent);
  box-sizing: border-box;
}
.section--tint .flow-step::before { background: var(--bg-1); }
.flow-inner { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(24px, 3vw, 44px); align-items: center; }
.flow-step h3 { margin-bottom: 10px; }
.flow-step p { font-size: 1rem; }
.flow-step img { border-radius: var(--r); aspect-ratio: 16 / 10; object-fit: cover; }

/* ============================================================
   Stimmen: eine grosse Aussage, zwei kleinere daneben.
   ============================================================ */
.voices { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(36px, 5vw, 72px); align-items: start; }
.voice-lead blockquote {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.28rem, 2vw, 1.62rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.voice-sub { display: grid; }
.voice-sub blockquote { margin: 0; font-size: 1rem; color: var(--ink-2); }
.voice-sub li { padding-block: 26px; }
.voice-sub li:first-child { padding-top: 0; }
.voice-sub li + li { border-top: 1px solid var(--line); }
.voice-sub ul, .voice-sub { list-style: none; margin: 0; padding: 0; }
.voice-by { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--ink-3); }
.voice-by b { color: var(--ink); font-weight: 600; }
.voice-src {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: var(--r-pill);
  background: #fff; color: #1a1a1a;
  font-family: var(--display); font-weight: 700; font-size: 11px;
  flex: none;
}
.voice-lead .stars { margin-bottom: 20px; }

/* Die Sterne kommen einzeln, wie beim Vergeben einer Bewertung.
   Sie haengen am selben Auslöser wie das Zitat daneben. */
.js .voice-lead .stars svg { opacity: 0; transform: scale(0.6); }
.js .voice-lead.is-spoken .stars svg {
  opacity: 1;
  transform: none;
  transition: opacity 300ms var(--ease-out), transform 420ms cubic-bezier(0.34, 1.4, 0.64, 1);
  transition-delay: calc(var(--s) * 70ms);
}

/* ============================================================
   Fortschrittslinie im Ablauf.
   Laeuft am Scroll-Fortschritt, nicht an einem Scroll-Listener.
   Ohne Browser-Unterstuetzung steht die Linie einfach voll.
   ============================================================ */
@supports (animation-timeline: view()) {
  .flow-fill {
    animation: flow-grow linear both;
    animation-timeline: view();
    animation-range: entry 25% cover 60%;
  }
}
@keyframes flow-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .flow-fill { animation: none; } }

/* Hero-Video blendet sich ueber das Standbild, sobald es laeuft. */
.hero-media video { opacity: 0; transition: opacity 800ms var(--ease-out); }
.hero-media video.is-playing { opacity: 1; }

/* ============================================================
   Zugaenglichkeit und Verkleinern der Startseite
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .flow-fill { transform: none !important; animation: none; }
  .gain-track, .gain-item { transition: none; }
  .voice-lead blockquote .wort,
  .voice-lead .stars svg { opacity: 1; transform: none; filter: none; transition: none; }
  .about-media > picture img, .about-inset, .about-copy > * { animation: none; transform: none; opacity: 1; }
}
@media (prefers-contrast: more) { .hero-sub { color: #fff; } }

@media (max-width: 1000px) {
  .problem-grid { grid-template-columns: 1fr; }
  .problem-aside { position: static; }
  .about-grid { grid-template-columns: 1fr; }
  .about-inset { position: static; width: 100%; margin-top: 16px; box-shadow: none; }
  .voices { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .hero { min-height: auto; padding-block: 112px 56px; }
  .hero-copy { max-width: 100%; }
  .trust-inner { flex-direction: column; align-items: flex-start; gap: 26px; }
  .marquee { width: 100%; }
  .gain-head { grid-template-columns: 1fr; }
  .gain-item { width: 70%; }
  .gain-viewport {
    --blende: linear-gradient(to right,
        rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 5%, rgba(0, 0, 0, 0.72) 10%,
        #000 15%, #000 85%,
        rgba(0, 0, 0, 0.72) 90%, rgba(0, 0, 0, 0.28) 95%, rgba(0, 0, 0, 0) 100%);
  }
  .gain-grid { grid-template-columns: 1fr; }
  .problem-item { grid-template-columns: 1fr; gap: 10px; }
  .flow { --rail: 13px; --flow-pad: 44px; }
  .flow-inner { grid-template-columns: 1fr; }
  .flow-step img { max-height: 220px; width: 100%; }
}