/*
 * 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); }
}

/* Wechselhafte Linien (Inhaber-Wunsch 11.10.2026): Jede Linie hat entlang ihrer Länge hohe Bögen und fast flache Stellen
   (Hüllkurve im Pfad, wiederholt sich alle 1200 Einheiten wie die Schleife), die mit dem Durchlaufen wandern. Dazu atmet jede leicht
   um ihre Mittellinie (y = 60 von 120), in eigenem Takt; nie ganz flach. Nur transform. */
@keyframes wave-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.6); }
}

.hero__wave-line {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .motion .hero__wave svg { animation: wave-flow 31.6s linear infinite; will-change: transform; }
  .motion .hero__wave-line { animation: wave-breathe 7s ease-in-out infinite; }
  .motion .hero__wave-line:nth-child(2) { animation-duration: 9.5s; animation-delay: -3s; }
  .motion .hero__wave-line:nth-child(3) { animation-duration: 5.5s; animation-delay: -1.5s; }
}

.hero__grid {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
  /* Oben eng genug, dass auf Laptop-Bildschirmen Text, Knöpfe und Feed samt Pfeilen ohne Scrollen sichtbar sind. */
  padding-block: clamp(8px, 3vh, 56px) clamp(110px, 11vw, 150px);
}

/* 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 {
  /* fit-content: Der Farbverlauf (unten) spannt sich über die Schrift, nicht über die ganze Spalte; sonst läge sein Violett
     und Magenta rechts neben dem Text (Inhaber-Wunsch 11.10.2026). */
  width: fit-content;
  max-width: 11em;
  /* Auch nach der Bildschirmhöhe (Laptops mit wenig Höhe): höchstens 8,4 % davon. */
  font-size: clamp(40px, min(5.4vw, 8.4vh), 76px);
  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) 18%, var(--violet) 58%, var(--fuchsia) 92%);
    -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(16px, 3.6vh, 40px);
  font: 800 clamp(26px, min(2.9vw, 5vh), 40px)/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(16px, 3.2vh, 32px);
  color: var(--ink-muted);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.55;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(20px, 4.2vh, 40px);
}

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

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

.hero__promise {
  margin-top: clamp(16px, 3vh, 28px);
  color: var(--ink-muted);
  font: 600 15px/1.6 var(--font-head);
}

/* ---------- Beispiel-Feed: Benachrichtigungen wie auf dem Handy, zum Blättern ---------- */

.feed { min-width: 0; }

/* 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 im Fenster. */
.feed__item:nth-child(n + 8) { display: none; }

/* Mit Skript liegen alle Karten untereinander; die Pfeile verschieben die Liste um ganze Karten (js/hero-feed.js setzt --feed-shift).
   :nth-child(n) hebt das Ausblenden ohne Skript auch schmal wieder auf. */
.feed--live .feed__item:nth-child(n) { display: grid; }

.feed--live .feed__list {
  --feed-shift: 0px;
  transform: translateY(var(--feed-shift));
}

/* Karussell (Inhaber-Wunsch 11.10.2026): Das Fenster ist genau so hoch wie vier Karten (schmal drei), js/hero-feed.js misst sie
   (--feed-view). Ganze Karten sind zu sehen, deshalb keine Ausblendung unten. */
/* Die Pfeile stehen direkt unter den Karten, auch wenn die Spalte höher ist als der Feed. */
.feed--live .feed__body { flex: none; }

.feed--live .feed__window {
  --feed-view: 520px;
  flex: none;
  height: calc(var(--feed-view) + 4px);
  min-height: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

/* 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;
}

/* Unter dem Feed: links die Pfeile zum Blättern, rechts die Fußnote. */
.feed__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  margin-top: 10px;
}

.feed__controls { display: flex; gap: 8px; }

.feed__controls[hidden] { display: none; }

/* Dezente runde Pfeile: feiner Rand, Pfeil in Tinte; beim Überfahren Violett. 44 px Trefferfläche. */
.feed__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.feed__arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feed__arrow:disabled { opacity: 0.35; cursor: default; }

@media (hover: hover) {
  .feed__arrow:not(:disabled):hover { border-color: var(--accent); color: var(--accent); }
}

.feed__note {
  margin-left: auto;
  text-align: right;
  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;
  }
}

/* Beim Blättern gleitet die Liste ruhig weiter; ohne Bewegungswunsch springt sie. */
@media (prefers-reduced-motion: no-preference) {
  .motion .feed--live .feed__list { transition: transform 0.5s var(--ease-out); }
  /* Beim Umhängen einer Karte springt die Liste unsichtbar zurück, ohne zu gleiten. */
  .motion .feed--live .feed__list.is-jumping { transition-duration: 0s; }
}

/* Schmaler: Feed unter dem Text, drei Karten im Bild. Kein eigener Scroll-Bereich (Inhaber-Wunsch 11.10.2026): Wischen scrollt
   immer die Seite, weitere Beispiele zeigen die Pfeile. */
@media (max-width: 1023px) {
  .feed__window { height: 300px; }
  .feed__item:nth-child(n + 4) { display: none; }
}

@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 {
  margin-top: 10px;
  color: var(--ink-muted);
  font-size: 17px;
  line-height: 1.55;
}

/* 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;
}

/* Beide Karten gleich aufgebaut: Quellen sitzen unten, Label und Liste beginnen auf derselben Linie. */
.audience__sources {
  margin-top: auto;
  padding-top: 26px;
}

/* Nebeneinander teilen sich beide Karten dieselben Zeilen (Titel, Text, Quellen): Label und Chips beginnen auf gleicher Höhe,
   auch wenn ein Text länger ist. Ältere Browser ohne subgrid behalten die untere Ausrichtung von oben. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 760px) {
    .audience {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .audience__sources { margin-top: 0; }
  }
}

.audience__label {
  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);
}

/* Deutlich sichtbar: Das Café-Beispiel ist nicht echt. */
.report__badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-s);
  background: var(--tint);
  color: var(--ink);
  font: 700 15px/1.3 var(--font-head);
  letter-spacing: -0.005em;
}

.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 ---------- */

/* Ü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;
  }
}

/* Fenster mit den Inhalten eines Pakets (natives <dialog>, js/packages.js). */
.package {
  width: min(520px, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.package::backdrop { background: var(--scrim); }

/* Seite dahinter bleibt stehen; die Leiste für den Bildlauf behält ihren Platz, damit nichts springt. */
.package-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.package__panel {
  position: relative;
  padding: clamp(26px, 4vw, 38px);
}

.package__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.package__close::before,
.package__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  margin: -1px 0 0 -9px;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.package__close::after { transform: rotate(-45deg); }

@media (hover: hover) {
  .package__close:hover { background: var(--tint); }
}

.package__title {
  padding-right: 44px;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.package__price {
  margin-top: 8px;
  color: var(--accent);
  font: 800 21px/1.2 var(--font-head);
  letter-spacing: -0.02em;
}

.package__list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}

/* Haken in Violett (zwei Ränder, gedreht), wie bei den Zusagen. */
.package__list li {
  position: relative;
  padding-left: 28px;
  font-size: 17px;
  line-height: 1.5;
}

.package__list li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 2px;
  width: 11px;
  height: 6px;
  border-bottom: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  transform: translateY(-3px) rotate(-45deg);
}

.package__cta { width: 100%; margin-top: 28px; }

@media (prefers-reduced-motion: no-preference) {
  .motion .package[open] { transition: opacity 0.25s ease, transform 0.3s var(--ease-out); }

  @starting-style {
    .motion .package[open] { opacity: 0; transform: translateY(12px); }
  }
}

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

.faq-more { margin-top: 28px; }

@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) ---------- */