/*
 * Visera Intelligence – Startseite. Farben nur über Tokens aus style.css.
 * Bewegung nur mit prefers-reduced-motion: no-preference und .motion am <html>.
 */

/* ---------- Hero (hell, auf dem sanften Verlauf aus style.css) ---------- */

/* Oben reines Papier (kein Goldhauch mehr, Inhaber-Wunsch 10.10.2026), von unten steigt das Blaugrau des Abschnitts „Für wen“ auf.
   Die untere Kante hat exakt dessen Farbe (--ground-soft), damit zwischen den beiden Kapiteln keine Naht entsteht. */
.hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(to bottom, transparent 0, transparent 40%, var(--ground-soft) 100%);
}

/* Leises digitales Element: eine feine Signal-Welle wie bei einem Sprachassistenten (KI, die zuhört und mitarbeitet). Drei Haarlinien,
   eine davon in Messing, liegen unten im blauen Bereich und laufen links und rechts weich aus. Mit Bewegung zieht die Welle ruhig
   nach links: Ihre Strecke ist in --band-font gerechnet, 60 em in 31,6 s (rund 1,9 em/s). 1 Einheit der Grafik = 0,05 em;
   jede Periode (400, 300, 240) passt genau in 1200 Einheiten, die Schleife springt nicht. Nur transform. */
.hero__wave {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  z-index: -1;
  height: 72px;
  overflow: hidden;
  font-size: var(--band-font);
  -webkit-mask-image: linear-gradient(to right, transparent, black 22%, black 78%, transparent);
  mask-image: linear-gradient(to right, transparent, black 22%, black 78%, transparent);
  pointer-events: none;
}

.hero__wave svg {
  display: block;
  width: 240em;
  height: 100%;
  overflow: visible;
}

.hero__wave-line {
  fill: none;
  stroke: var(--wave);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.hero__wave-line:nth-child(2) { stroke: color-mix(in srgb, var(--accent) 45%, transparent); }

@keyframes wave-flow {
  to { transform: translateX(-60em); }
}

@media (prefers-reduced-motion: no-preference) {
  .motion .hero__wave svg { animation: wave-flow 31.6s linear infinite; will-change: transform; }
}

.hero__grid {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(24px, 4.4vw, 64px) clamp(120px, 11vw, 160px);
}

/* Ab 1024 px stehen Text und Feed nebeneinander, beide an der Oberkante: die erste Karte beginnt auf der Höhe der Überschrift. */
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

.hero h1 {
  max-width: 11em;
  font-size: clamp(42px, 5.6vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

/* Überschrift im Verlauf wie die Titel der Review-Intelligence-Oberfläche: Tinte läuft in Violett und Magenta aus
   (jeder Ton mindestens 4,5 : 1 auf Weiß). Ohne background-clip bleibt sie Tinte. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1 {
    background: linear-gradient(100deg, var(--ink) 30%, var(--violet) 72%, var(--fuchsia) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Wechselzeile: alle Wörter im selben Rasterfeld, Höhe = längstes Wort, kein Springen.
   Verlauf von Violett (--accent-lo, 5,7 : 1) über Magenta zu Pink (--accent-hi, 4,9 : 1). */
.rotator {
  margin-top: clamp(20px, 2.6vw, 32px);
  font: 800 clamp(26px, 2.7vw, 36px)/1.15 var(--font-head);
  letter-spacing: -0.03em;
}

.rotator__lead { display: block; color: var(--ink); }

.rotator__words {
  display: grid;
  color: var(--accent);
}

.rotator__word { grid-area: 1 / 1; justify-self: start; }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .rotator__word {
    background: linear-gradient(100deg, var(--accent-lo) 0%, var(--fuchsia) 55%, var(--accent-hi) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.rotator__word:not(.is-current) { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .motion .rotator__word { transition: opacity 0.3s ease, transform 0.3s var(--ease-out); }
  .motion .rotator__word:not(.is-current) { transform: translateY(0.5em); }
  .motion .rotator__word.is-leaving { transform: translateY(-0.5em); }
}

.hero__sub {
  max-width: 33em;
  margin-top: clamp(20px, 2.4vw, 28px);
  color: var(--ink-muted);
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.6;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

.hero__actions .button { margin-top: 0; }

.hero__link.text-link { font-size: 18px; }

.hero__promise {
  margin-top: 24px;
  color: var(--ink-muted);
  font: 600 15px/1.6 var(--font-head);
}

/* ---------- Live-Feed: Benachrichtigungen wie auf dem Handy ---------- */

.feed { min-width: 0; }

/* Mit Bewegung ist der Feed per Tab erreichbar (js/hero-feed.js setzt tabindex): Fokus hält ihn an. */
.feed:focus-visible { outline-offset: 8px; border-radius: var(--radius-m); }

/* Benachrichtigungen wie auf dem Handy, ohne Panel: Der feste Ausschnitt blendet unten weich in den Grund aus (kein weißer Rest).
   Seitlich etwas Luft, damit die Schatten der Karten nicht abgeschnitten werden. */
.feed__window {
  height: 520px;
  margin-inline: -24px;
  padding: 4px 24px 0;
  overflow: hidden;
  /* Das Einschieben einer Karte berechnet nur den Feed neu, nicht die ganze Seite. */
  contain: layout paint;
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 72px), transparent);
  mask-image: linear-gradient(to bottom, black calc(100% - 72px), transparent);
}

.feed__list {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}

.feed__item {
  display: grid;
  grid-template-rows: 1fr;
}

/* Ohne Skript stehen die ersten sieben Karten still (so viele zeigt auch das Skript ab 1024 px; die Spalte ist immer gefüllt). */
.feed__item:nth-child(n + 8) { display: none; }

.feed--live .feed__item { display: none; }
.feed--live .feed__item.is-on { display: grid; }

/* Die Hülle schneidet beim Einschieben ab; seitlich und unten hat sie Luft, damit der Schatten der Karte weich ausläuft
   statt hart abzubrechen (der Rand gleicht die Luft wieder aus). */
.feed__clip {
  min-height: 0;
  margin-inline: -20px;
  padding-inline: 20px;
  overflow: hidden;
}

/* Eine Benachrichtigung: helle, fast deckende Fläche mit großem Radius, App-Symbol links, Titel und Branche oben, Detail darunter. */
.feed__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "check name tag"
    "check detail detail";
  align-items: baseline;
  gap: 2px 13px;
  margin-block: 2px 14px;
  padding: 13px 16px 14px 13px;
  /* Auf dem weißen Grund (Inhaber-Wunsch 11.10.2026): feiner Lavendel-Rand und ein kurzer, deutlicher Schatten, der in die
     Luft der Hülle passt (seitlich höchstens 10 px, unten höchstens 14 px). */
  border: 1px solid color-mix(in srgb, var(--violet) 16%, var(--white));
  border-radius: var(--radius-note);
  background: var(--white);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 8%, transparent), 0 6px 14px -6px color-mix(in srgb, var(--violet) 24%, transparent);
}

/* Leiser goldener Haken: zarte Goldscheibe mit feinem Rand, Haken in Messing (wie bei den Zusagen im Ablauf). */
.feed__check {
  grid-area: check;
  align-self: center;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--violet) 9%, var(--white));
  color: var(--accent);
}

.feed__check::after {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(-45deg);
}

.feed__name {
  grid-area: name;
  min-width: 0;
  font: 700 16px/1.3 var(--font-head);
  letter-spacing: -0.01em;
}

/* Branche an der Stelle der Uhrzeit: klein und gedämpft. */
.feed__tag {
  grid-area: tag;
  justify-self: end;
  color: var(--ink-muted);
  font: 600 13px/1.3 var(--font-head);
  white-space: nowrap;
}

.feed__detail {
  grid-area: detail;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.45;
}

.feed__note {
  text-align: right;
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 15px;
  font-style: italic;
}

/* Ab 1024 px: Der Feed ist so hoch wie die Textspalte, das Fenster füllt den Platz über der Fußnote.
   contain: size, damit die Liste die Rasterzeile nicht höher macht als den Text. */
@media (min-width: 1024px) {
  .feed {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .feed__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
  }

  .feed__window {
    flex: 1 1 0;
    height: auto;
    min-height: 380px;
    contain: size layout paint;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .motion .feed__item { transition: grid-template-rows 0.4s var(--ease-out), opacity 0.4s ease; }
  .motion .feed__card { transition: transform 0.4s var(--ease-out); }
  .motion .feed__item.is-entering { grid-template-rows: 0fr; opacity: 0; }
  .motion .feed__item.is-entering .feed__card { transform: translateY(-10px) scale(0.98); }
  .motion .feed__item.is-leaving { opacity: 0; }
}

/* Schmaler: Feed unter dem Text, drei Karten im Bild. Mit Skript ein eigener Ausschnitt zum Hoch- und Runterscrollen mit weiteren
   Karten darunter (Inhaber-Wunsch 10.10.2026); unten Platz, damit auch die letzte Karte aus der Ausblendung herausrollt.
   Ruhiger als breit: Karten blenden langsamer ein (Dauer wie FEED_TRANSITION_MOBILE_MS in js/hero-feed.js). */
@media (max-width: 1023px) {
  .feed__window { height: 300px; }
  .feed__item:nth-child(n + 4) { display: none; }

  .feed--live .feed__window {
    padding-bottom: 64px;
    overflow-y: auto;
    overscroll-behavior-x: none;
    scrollbar-width: none;
  }

  .feed--live .feed__window::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  .motion .feed__item,
  .motion .feed__card { transition-duration: 0.7s; }
}

@media (max-width: 599px) {
  .hero__sub { margin-top: 12px; }
  .feed__window { height: 318px; }
  .feed__card { padding: 12px 14px 13px 12px; gap: 2px 12px; }
  .feed__name { font-size: 15px; }
}

/* ---------- Ablauf ---------- */

@media (min-width: 700px) {
  .section-head--aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--col-gap);
    max-width: none;
  }

  .section-head--aside h2,
  .section-head--aside .lead { grid-column: 1; }
}

/* Drei Zusagen als editoriale Spalten (Inhaber-Wahl 10.10.2026, Richtung A; Inhalt seit 10.10.2026: Analyse, Plan mit ROI, Umsetzung):
   linksbündig, über jeder Spalte eine Haarlinie mit goldener Linie, darunter eine große Ziffer in Messing ,
   Titel, zwei Sätze und unten die Zusage. Keine Kreise, Karten oder Schatten: Die Typografie trägt. Bis 859 px untereinander, ab 860 px drei Spalten. */
.process {
  display: grid;
  column-gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(8px, 1.5vw, 16px);
  padding: 0;
  list-style: none;
}

@media (min-width: 860px) {
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Jede Spalte teilt sich über Subgrid vier Zeilen mit ihren Nachbarn (Ziffer, Titel, Text, Zusage): Titel, Texte und Zusagen
   stehen spaltenübergreifend auf einer Höhe, auch wenn eine Zusage umbricht. Abstand zwischen den Spalten untereinander (mobil) unten. */
.process__step {
  position: relative;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding-block: 28px 44px;
  border-top: 1px solid var(--line-strong);
}

@media (min-width: 860px) {
  .process__step { padding-bottom: 0; }
}

/* Goldene Linie auf der Haarlinie (2 px, liegt mittig darüber); zieht sich beim Hineinscrollen von links auf. */
.process__step::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  border-top: 2px solid var(--accent);
  transform-origin: left;
}

/* Messing auf Papier nur als große, fette Ziffer (ab 44 px); für Vorleser zählt die geordnete Liste. */
.process__num {
  color: var(--accent);
  font: 900 clamp(44px, 4.4vw, 60px)/0.9 var(--font-head);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.process h3 {
  margin-top: 24px;
  font-size: clamp(21px, 1.9vw, 24px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.process__step > p:not(.process__promise) {
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 17px;
  line-height: 1.55;
}

/* Zusage in Tinte mit kleinem Haken in Messing (zwei Ränder, gedreht); ruhig statt grüner Badge. */
.process__promise {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 22px;
  color: var(--ink);
  font: 700 16px/1.3 var(--font-head);
  letter-spacing: -0.01em;
}

.process__promise::before {
  content: "";
  flex: none;
  width: 11px;
  height: 6px;
  border-bottom: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  transform: translateY(-3px) rotate(-45deg);
}

/* Beim Hineinscrollen zieht sich die goldene Linie Spalte für Spalte (200 ms versetzt), die Inhalte jeder Spalte folgen ihr.
   Nur transform und opacity; ohne Skript oder bei reduzierter Bewegung steht alles sofort da. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .process.reveal:not(.is-visible) { opacity: 1; transform: none; }
  .reveal-ready .process__step { --delay: 0s; }
  .reveal-ready .process__step:nth-child(2) { --delay: 0.2s; }
  .reveal-ready .process__step:nth-child(3) { --delay: 0.4s; }
  .reveal-ready .process__step::before { transition: transform 0.9s var(--ease-out) var(--delay); }
  .reveal-ready .process__step > * { transition: opacity 0.6s ease calc(var(--delay) + 0.15s), transform 0.6s var(--ease-out) calc(var(--delay) + 0.15s); }
  .reveal-ready .process:not(.is-visible) .process__step::before { transform: scaleX(0); }
  .reveal-ready .process:not(.is-visible) .process__step > * { opacity: 0; transform: translateY(10px); }
}

/* ---------- Für wen: zwei Zielgruppen als Karten ---------- */

.audiences {
  display: grid;
  gap: var(--card-gap);
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.audience {
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--white);
}

.audience__title {
  font-size: clamp(21px, 1.9vw, 24px);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.audience__text {
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

.audience__label {
  margin-top: auto;
  padding-top: 22px;
  color: var(--ink-muted);
  font: 700 13px/1.3 var(--font-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Quellen als kleine Etiketten, nicht klickbar. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 6px 12px;
  border-radius: var(--radius-s);
  background: var(--tint);
  color: var(--ink);
  font: 600 15px/1.3 var(--font-head);
}

/* ---------- Beispiel-Report: Auszug als Dokument (Beweis statt Behauptung) ---------- */

.report {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  max-width: 980px;
  margin: 0;
  padding: clamp(18px, 3.4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.report__head {
  padding-bottom: clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid var(--line-strong);
}

.report__kicker,
.report__label {
  color: var(--ink-muted);
  font: 700 13px/1.3 var(--font-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.report__title {
  margin-top: 8px;
  font: 800 clamp(22px, 2.4vw, 30px)/1.15 var(--font-head);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.report__meta {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.5;
}

.report__label { margin-bottom: 12px; }

/* Schmal scrollt nur die Tabelle zur Seite, nie die Seite. */
.report__scroll {
  contain: inline-size;
  overflow-x: auto;
}

.report__table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font: 400 16px/1.4 var(--font-head);
  font-variant-numeric: tabular-nums;
}

.report__table th,
.report__table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

.report__table th:first-child { text-align: left; }

.report__table thead th {
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 600;
}

.report__table tbody th { font-weight: 600; }

.report__own th,
.report__own td {
  background: var(--tint);
  font-weight: 800;
}

/* Handy: Die Tabelle passt ohne Scrollen, Zahlen und Köpfe etwas kleiner und enger. */
@media (max-width: 599px) {
  .report__table { min-width: 0; font-size: 15px; }

  .report__table th,
  .report__table td { padding: 10px 6px; }

  .report__table thead th { font-size: 13px; }
}

.report__columns {
  display: grid;
  gap: clamp(24px, 3vw, 36px) var(--col-gap);
}

@media (min-width: 760px) {
  .report__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.report__list {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.report__list li {
  padding-left: 16px;
  border-left: 2px solid var(--line-strong);
  font: 700 17px/1.35 var(--font-head);
  letter-spacing: -0.01em;
}

.report__list span {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font: 400 15px/1.4 var(--font-text);
  letter-spacing: 0;
}

.report__block--advice {
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--radius-m);
  background: var(--ground-soft);
}

.report__advice {
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
  counter-reset: advice;
}

.report__advice li {
  position: relative;
  padding-left: 40px;
  color: var(--ink-muted);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
  counter-increment: advice;
}

.report__advice li::before {
  content: counter(advice);
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font: 800 14px/1 var(--font-head);
}

.report__advice strong { color: var(--ink); font-family: var(--font-head); font-weight: 700; }

.report__note {
  color: var(--ink-muted);
  font-size: 15px;
  font-style: italic;
}

.report__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(24px, 3vw, 36px);
}

.report__cta p {
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 1.5;
}

/* ---------- Pakete ---------- */

.prices__cta { margin-top: 14px; }

/* Überschrift auf Tinte im Verlauf wie die Titel der Review-Intelligence-Oberfläche: Weiß über Lavendel zu hellem Rosa. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  /* inline-block: Der Verlauf spannt sich über die Schrift, nicht über die ganze Spalte. */
  #pakete-title {
    display: inline-block;
    background: linear-gradient(100deg, var(--paper) 15%, var(--accent-light) 55%, var(--pink-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ---------- Häufige Fragen auf der Startseite ---------- */

@media (min-width: 860px) {
  .home-faq .split__head { position: sticky; top: calc(var(--header-h) + 32px); align-self: flex-start; }
}

/* ---------- Schmal wie eine App (Inhaber-Wahl 10.10.2026) ---------- */