/* ==================================================================
   ReadyAI — Stilvorlage der ueberarbeiteten Marketing-Startseite.
   Auslieferungs-Fassung vom 07.08.2026, aus site-entwurf/entwurf.css.

   UMBENANNT beim Herrichten: hiess im Entwurf `entwurf.css`. Der Name
   waere im Quelltext der veroeffentlichten Seite sichtbar gewesen.
   Wer die Datei zurueckbenennt, muss die drei HTML-Dateien nachziehen.

   Sie ist bewusst eigenstaendig — keine externen Schriften, keine
   Skripte von fremden Servern, keine Zaehlpixel. Die alten Vorlagen
   styles.css/home.css liegen weiterhin daneben, aber NUR fuer die
   englische Fassung unter /en/; die deutschen Seiten laden sie nicht.

   Radien, Schriftlogik und der blaue Markenakzent sind aus
   site-preview/styles.css uebernommen, damit der Entwurf wie ReadyAI
   aussieht und nicht wie ein fremdes Produkt.

   FARBWECHSEL 05.08.2026 (Rueckmeldung des Inhabers: «wirkt fast ein
   bisschen zu duester»): Die Seite steht neu auf einem HELLEN Grundton.
   Das Dunkel bleibt als Gestaltungsmittel erhalten — aber nur noch fuer
   einzelne Baender (Einstieg, Preiskarte, Abschluss/Fuss). Der blaue
   Akzent, die Typografie und das Logo bleiben unveraendert.

   Wie das technisch geloest ist: Alle Farben laufen ueber Variablen.
   `:root` traegt den hellen Satz. Die Klassen `.band-dark` und
   `.card-dark` ueberschreiben denselben Satz lokal mit dunklen Werten —
   dadurch funktioniert JEDER Baustein in beiden Umgebungen, ohne dass
   es zweite Regeln pro Baustein braucht.
   ================================================================== */

:root {
  /* Blau: zwei Toene mit klarer Aufgabe.
     --accent      = Schrift, Beschriftungen, Punkte (muss auf Hell
                     lesbar sein -> dunkleres Blau, Kontrast 6.2:1)
     --accent-deep = Flaechen/Schaltflaechen mit weisser Schrift */
  --accent: #1d4ed8;
  --accent-deep: #2563eb;
  --accent-soft: rgba(37, 99, 235, 0.1);
  --good: #0f7a5e;
  --good-soft: rgba(15, 122, 94, 0.12);
  --warn: #9a5b12;
  --warn-soft: rgba(154, 91, 18, 0.12);
  --miss: #b03636;
  --miss-soft: rgba(176, 54, 54, 0.12);

  --bg: #f4f7f6;
  --surface: #ffffff;
  --surface-2: #eef3f1;
  --line: rgba(10, 40, 34, 0.1);
  --line-strong: rgba(10, 40, 34, 0.2);
  --text: #0b1a17;
  --text-2: #46554f;
  --text-3: #5d6d67;
  --shadow: 0 1px 2px rgba(10, 40, 34, 0.04), 0 8px 24px rgba(10, 40, 34, 0.05);

  --radius: 16px;
  --shell: min(1320px, calc(100% - 48px));
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

/* ---- Dunkler Satz derselben Variablen ----
   Bewusst deutlich heller als der bisherige Entwurf (#06110f): der
   Grundton ist jetzt ein aufgehelltes Tannengruen-Schwarz, damit die
   dunklen Baender ruhig wirken statt schwer. */

.band-dark,
.card-dark {
  --accent: #8fb2fb;
  --accent-deep: #2f6bf0;
  --accent-soft: rgba(143, 178, 251, 0.16);
  --good: #4fd3ad;
  --good-soft: rgba(79, 211, 173, 0.16);
  --warn: #e6b06a;
  --warn-soft: rgba(230, 176, 106, 0.16);

  --bg: #16241f;
  --surface: #1d2f29;
  --surface-2: #24382f;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --text: #f2f7f5;
  --text-2: #b9c9c3;
  --text-3: #96a8a2;
  --shadow: none;

  background: var(--bg);
  color: var(--text);
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
  overflow-wrap: break-word;
}

h1 {
  font-weight: 700;
  letter-spacing: -0.045em;
}

h2 {
  font-weight: 700;
  letter-spacing: -0.035em;
}

h3,
h4 {
  font-weight: 650;
  letter-spacing: -0.02em;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Das Entwurfs-Banner (.draft-bar) ist beim Herrichten der
   Auslieferungs-Fassung am 07.08.2026 entfallen — die Regeln dazu
   sind hier entfernt, weil sie kein Element mehr treffen. Im Entwurf
   unter site-entwurf/ stehen sie weiterhin. */

/* ================= Platzhalter =================
   Zentrale Auszeichnung fuer alles, was noch vom Inhaber kommt.
   Absichtlich auffaellig: ein Platzhalter, den man uebersieht, wird
   irgendwann versehentlich veroeffentlicht.

   STAND 05.08.2026: Auf keiner Seite mehr im Einsatz — der Entwurf
   enthaelt keine Platzhalter mehr. Die Klassen bleiben bewusst
   stehen, damit ein spaeter ergaenzter offener Punkt sofort wieder
   sichtbar markiert werden kann. */

.ph {
  display: inline-block;
  border: 1px dashed rgba(154, 91, 18, 0.55);
  border-radius: 8px;
  padding: 0.06em 0.45em;
  background: rgba(154, 91, 18, 0.08);
  color: #7a4a0e;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ph-note {
  display: block;
  margin-top: 0.5rem;
  color: var(--warn);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ---- Bilder mit Unterschrift ----
   Alle Bilder sind eigens fuer diese Seite erzeugt — kein gekauftes
   Symbolfoto, kein fremdes Logo, keine erkennbare fremde Website.
   Die Bilder skalieren immer mit der Spalte mit (`width: 100%`), damit
   auf schmalen Bildschirmen nichts ueberlaeuft. Das Seitenverhaeltnis
   halten die `width`/`height`-Attribute im HTML — dadurch reserviert der
   Browser den Platz schon vor dem Laden und die Seite springt nicht. */

.figure {
  margin: 0;
}

.figure-img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Die Vorher-Nachher-Skizze hat einen weissen Hintergrund, der Grundton
   der Seite ist leicht gruenlich. Ohne diese weisse Flaeche mit etwas
   Luft ringsum wuerde der Bildrand als harte Kante sichtbar. */

.figure-sketch {
  margin-top: 1.2rem;
}

.figure-sketch .figure-img {
  padding: 0.9rem;
  background: #ffffff;
}

.figure figcaption {
  margin-top: 0.85rem;
  color: var(--text-3);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ---- Animationen ----
   Die vier Animationen liegen als MP4 und WebM daneben; der Browser
   nimmt das Format, das er kann. Keine fremde Abspielhilfe, keine
   fremden Server — die Regel dieser Seite gilt auch hier.

   REVIDIERT am 07.08.2026 (Wunsch des Inhabers). Vorher stand hier:
   `preload="none"`, kein Autoplay, sichtbare Bildunterschriften. Neu:

   · Die Animationen starten selbst, sobald sie im Sichtfeld sind, und
     halten an, wenn sie es verlassen (../video-autoplay.js — die
     datenschutzrechtliche Begruendung steht im Kopf jener Datei).
     Keine Endlosschleife, kein Ton, und bei «Bewegung reduzieren»
     ueberhaupt kein Selbststart.
   · Deshalb `preload="metadata"` statt `none`: Beim Seitenaufruf laedt
     weiterhin nur das Standbild plus ein paar hundert Byte Kopfdaten je
     Video, aber der Selbststart ruckelt nicht mehr los.
   · Die Bildunterschriften sind nicht mehr sichtbar (Klasse
     .visually-hidden weiter unten) — sie wiederholten die Untertitel,
     die in den Animationen ohnehin mitlaufen.

   Die Breite ist auf 60rem begrenzt: ueber die volle Rasterbreite von
   1320px gezogen wuerde eine Animation den Abschnitt erschlagen. Hoehe
   `auto` mit den width/height-Attributen im HTML haelt das
   Seitenverhaeltnis, damit beim Laden nichts springt. */

.video-figure {
  max-width: 60rem;
  margin: clamp(1.8rem, 4vw, 2.8rem) auto 0;
}

/* Eine Animation, die in einer Rasterspalte neben anderem Inhalt steht
   (Abschnitt «Warum jetzt»): kein eigener Abstand nach oben, keine
   Zentrierung, volle Spaltenbreite. */

.video-figure.is-inline {
  max-width: none;
  margin: 0;
}

/* Die Agenten-Animation ist die dichteste der vier — vier Anbieterkarten
   mit kleiner Schrift nebeneinander. Sie bekommt als einzige die volle
   Rasterbreite, sonst ist sie auf schmalen Bildschirmen nicht lesbar. */

.video-figure.is-wide {
  max-width: none;
}

.video-figure video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* ---- Visuell verborgen, fuer Vorlesehilfen aber vorhanden ----
   Die Beschreibungen unter den Animationen sind seit 07.08.2026 nicht
   mehr sichtbar. Geloescht wurden sie aber NICHT: Sie sind zugleich die
   Textfassung fuer Menschen, die das Video nicht sehen koennen.
   `display: none` waere hier falsch — das versteckt den Text auch vor
   der Vorlesehilfe. Deshalb der uebliche Weg: aus dem Sichtfeld
   geschoben und auf einen Punkt zusammengeschnitten. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ================= Kopfzeile ================= */

.site-header {
  position: relative;
  z-index: 20;
  display: grid;
  /* Marke und E-Mail-Knopf nehmen, was sie brauchen; die Navigation
     sitzt mittig im Rest. (Vorher 1fr auto 1fr — damit quetschte der
     breitere E-Mail-Knopf die Navigation in den Zeilenumbruch.) */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  width: var(--shell);
  margin: 0 auto;
  padding: 1.35rem 0 0.6rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  /* Das Logo-SVG zeichnet Schrift und Mittelpunkt mit `currentColor`.
     Dadurch ist es auf hellem Grund dunkel und in einem dunklen Band
     hell — ohne zweite Logo-Datei. Die blauen Knoten bleiben immer
     im Markenblau. */
  color: var(--text);
}

/* 07.08.2026 vergrössert (vorher clamp(12rem, 15vw, 15.5rem)) — das Logo wirkte
   in der Kopfzeile zu zurückhaltend. Zugleich ist der Zusatz «SICHTBAR ·
   RELEVANT · AUSGEWÄHLT» aus dem SVG entfernt; dadurch wird die Wortmarke
   selbst grösser, ohne dass die Kopfzeile höher wird. */
.brand svg {
  display: block;
  width: clamp(14.5rem, 18vw, 19rem);
  height: auto;
}

.nav-links {
  justify-self: center;
  display: flex;
  gap: 1.4rem;
  white-space: nowrap;
  /* 07.08.2026 kräftiger (vorher --text-2 / 0.86rem): die Menüpunkte wirkten
     zu schwach neben dem Logo und dem Zugangs-Knopf. */
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.nav-links a:hover {
  color: var(--text);
}

.header-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

/* ---- E-Mail-Knopf in der Kopfzeile ----
   Entscheid des Inhabers 05.08.2026: Die Seite erhebt keine Daten mehr,
   das Formular ist entfallen. Der E-Mail-Weg ist damit der einzige
   Zugang — er steht deshalb ganz oben und ist als solcher beschriftet,
   nicht als anonymer Knopf. */

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  border: 1px solid rgba(37, 99, 235, 0.3);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

.header-cta:hover {
  border-color: var(--accent-deep);
  background: rgba(37, 99, 235, 0.16);
}

.header-cta svg {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
}

.header-cta .cta-mail {
  color: var(--text-2);
  font-weight: 600;
}

.header-cta .cta-mail::before {
  content: "·";
  margin: 0 0.5rem 0 0.25rem;
  color: var(--line-strong);
}

/* ================= Schaltflaechen ================= */

.primary-button {
  display: inline-flex;
  min-height: 3.05rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--accent-deep);
  color: #fff;
  padding: 0.9rem 1.5rem;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 12px 34px rgba(37, 99, 235, 0.3);
  cursor: pointer;
}

.primary-button:hover {
  background: #1d4ed8;
}

.secondary-link {
  display: inline-flex;
  min-height: 3.05rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.9rem 1.4rem;
  color: var(--text-2);
  font-size: 0.92rem;
  font-weight: 650;
}

.secondary-link:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ================= Abschnitts-Grundraster ================= */

.section {
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(3.6rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--line);
}

.section-heading {
  max-width: 48rem;
  margin-bottom: clamp(2.2rem, 4.5vw, 3.4rem);
}

.section-heading > span {
  display: block;
  margin-bottom: 0.85rem;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 0;
  font-size: clamp(1.85rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  text-wrap: balance;
}

.section-heading p {
  margin: 1.2rem 0 0;
  max-width: 62ch;
  color: var(--text-2);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* ================= Hero ================= */

.hero {
  position: relative;
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(2.6rem, 6vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6%;
  width: min(1000px, 120%);
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.09), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.availability {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 2.2rem;
  padding: 0.38rem 0.9rem 0.38rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.78rem;
  font-weight: 600;
}

.availability i {
  flex: 0 0 auto;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 4px var(--good-soft);
}

.hero h1 {
  max-width: 19ch;
  margin: 0 auto 1.8rem;
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  line-height: 0.99;
  text-wrap: balance;
}

/* Der Unterstrich haengt am Zeilenkasten (box-shadow inset) statt an
   einem absolut gesetzten Element. Grund: Als inline-block riss die
   Hervorhebung auf schmalen Bildschirmen den nachfolgenden Punkt in
   eine eigene Zeile. So bricht die Hervorhebung sauber um. */
.hero h1 em {
  display: inline;
  color: var(--accent);
  font-style: normal;
  box-shadow: inset 0 -0.085em 0 rgba(37, 99, 235, 0.32);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.hero-lede {
  max-width: 60ch;
  margin: 0 auto;
  color: var(--text-2);
  font-size: clamp(1.02rem, 1.35vw, 1.19rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin: 2.6rem 0 1.6rem;
}

.fineprint {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--text-3);
  font-size: 0.87rem;
  line-height: 1.6;
}

/* ================= Vier Kopfzahlen ================= */

.scores {
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.scores-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.score {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.4rem 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.score-name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.score-name .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.score-value {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.score-value small {
  color: var(--text-3);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0;
}

.score p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.55;
}

.score-rail {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.score-rail b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.scores-foot {
  margin: 1.2rem 0 0;
  color: var(--text-3);
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 76ch;
}

/* ================= Massnahmenplan ================= */

.plan {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.plan-list {
  display: grid;
  gap: 0.85rem;
}

.measure {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1rem;
  padding: 1.25rem 1.35rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.measure-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 800;
}

.measure h4 {
  margin: 0.25rem 0 0.45rem;
  font-size: 1.02rem;
}

.measure p {
  grid-column: 2;
  margin: 0;
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.6;
}

.measure-tags {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.76rem;
  font-weight: 650;
}

.tag.is-good {
  border-color: rgba(52, 195, 156, 0.35);
  background: var(--good-soft);
  color: var(--good);
}

.tag.is-warn {
  border-color: rgba(226, 160, 77, 0.35);
  background: var(--warn-soft);
  color: var(--warn);
}

.tag.is-accent {
  border-color: rgba(77, 130, 243, 0.35);
  background: var(--accent-soft);
  color: var(--accent);
}

.plan-note {
  margin: 1.2rem 0 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ================= Ablauf in vier Schritten ================= */

.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-step {
  position: relative;
  padding: 1.6rem 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Das Symbol ersetzt den frueheren blauen Punkt: Es sitzt an derselben
   Stelle und uebernimmt dieselbe Aufgabe — den Blick an den Kartenanfang
   holen. Beides nebeneinander waere Unruhe. */

.flow-step .flow-icon {
  display: block;
  width: 66px;
  height: auto;
  margin-bottom: 0.7rem;
}

.step-no {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.flow-step h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.flow-step p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* ================= Preis ================= */

.price-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}

.price-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.045em;
}

.price-amount span {
  color: var(--text-3);
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0;
}

.price-card h3 {
  margin: 0;
  font-size: 1.1rem;
}

.price-list {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  color: var(--text-2);
  font-size: 0.94rem;
  line-height: 1.55;
}

.price-list li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px var(--good-soft);
}

.price-side {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.price-side h3 {
  margin: 0;
  font-size: 1.05rem;
}

.price-side p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.6;
}

.price-side .price-amount {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}

/* ================= Unterschiede zum anonymen Anbieter ================= */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.4rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.card .dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-bottom: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.card h3 {
  margin: 0;
  font-size: 1.02rem;
}

.card p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.6;
}

.card .card-foot {
  margin-top: auto;
  padding-top: 0.9rem;
  color: var(--text-3);
  font-size: 0.83rem;
  line-height: 1.55;
}

/* ================= Grenzen ================= */

.limits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.limit {
  padding: 1.4rem 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
}

.limit h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.limit p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* ================= Musterreport ================= */

.sample {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.sample p {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.7;
}

/* ================= Herkunft ================= */

.origin {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.origin-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0.5rem 1.2rem;
  padding: 1.05rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.origin-row dt {
  color: var(--text-3);
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}

.origin-row dd {
  margin: 0;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.6;
}

.origin-row dd b {
  color: var(--text);
}

/* ================= FAQ ================= */

.faq-list {
  display: grid;
  gap: 0.65rem;
  max-width: 62rem;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.4rem;
  padding: 0.9rem 1.3rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 650;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-answer {
  margin: 0;
  padding: 0 1.3rem 1.3rem;
  max-width: 74ch;
  color: var(--text-2);
  font-size: 0.96rem;
  line-height: 1.7;
}

/* ================= Abschluss ================= */

.closing {
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(2.8rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.closing-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

.closing-copy span {
  display: block;
  margin-bottom: 0.85rem;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.closing-copy h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.1;
}

.closing-copy p {
  margin: 0;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.65;
}

/* ================= Fussbereich ================= */

.footer {
  width: var(--shell);
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  color: var(--text-3);
}

.footer-legal {
  display: grid;
  gap: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-size: 0.88rem;
  font-weight: 650;
}

.footer-legal nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--text-3);
}

.footer-legal nav a:hover {
  color: var(--text);
}

.footer-address {
  max-width: 34ch;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-2);
}

/* ================= Ergaenzungen 05.08.2026 =================
   Dazugekommen mit den Rechtsseiten (Impressum/Datenschutz), der
   ausfuehrlichen Beispiel-Massnahme und dem Abschnitt «Was noch
   fehlt». Bewusst am Ende, damit der urspruengliche Aufbau der
   Datei lesbar bleibt. */

/* Links im Fliesstext — muessen sich vom Text abheben, ohne dass die
   ganze Seite blau wird. */
.inline-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

.inline-link:hover {
  color: var(--text);
}

/* ---- Ausfuehrliche Beispiel-Massnahme ---- */

.measure.is-example {
  padding: 1.5rem 1.6rem 1.6rem;
  border-color: var(--line-strong);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}

.measure-lead {
  margin-bottom: 1rem !important;
}

.measure-do {
  grid-column: 2;
  margin: 0 0 0.5rem !important;
  color: var(--text) !important;
  font-size: 0.9rem !important;
  font-weight: 700;
}

.measure-steps {
  grid-column: 2;
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.6;
}

.measure-steps li::marker {
  color: var(--accent);
}

.measure-foot {
  grid-column: 2;
  margin-top: 0.9rem !important;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  color: var(--text-3) !important;
  font-size: 0.8rem !important;
}

.price-foot {
  margin: 0.2rem 0 1.1rem;
  color: var(--text-3);
  font-size: 0.83rem;
  line-height: 1.6;
}

/* ---- Referenzen (erst aktiv, wenn es Kundinnen gibt) ---- */

.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.logo-row img {
  max-width: 100%;
  height: 2.4rem;
  opacity: 0.8;
}

.logo-note {
  margin: 1.4rem 0 0;
  color: var(--text-3);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ---- Rechtsseiten (Impressum, Datenschutz) ---- */

.legal {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.6rem) 0 clamp(2.5rem, 6vw, 4rem);
}

.legal h1 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  line-height: 1.1;
}

.legal h2 {
  margin: 2.6rem 0 0.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  line-height: 1.3;
}

.legal p {
  margin: 0 0 1rem;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.7;
}

.legal p b,
.legal li b {
  color: var(--text);
}

.legal-lede {
  color: var(--text) !important;
  font-size: 1.06rem !important;
  line-height: 1.65 !important;
}

.legal-list {
  margin: 0 0 1.2rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.6rem;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.65;
}

.legal-list li::marker {
  color: var(--accent);
}

.legal-box {
  margin: 1.6rem 0 0.6rem;
  padding: 1.3rem 1.4rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.legal-box b {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--text);
  font-size: 0.95rem;
}

.legal-box .legal-list {
  margin-bottom: 0;
  font-size: 0.94rem;
}

.legal-stand {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--text-3) !important;
  font-size: 0.86rem !important;
}

/* ================= Ergaenzungen 05.08.2026, zweiter Durchgang =================
   Dazugekommen mit dem hellen Grundton, dem Einstiegs-Band, dem
   E-Mail-Zugang (statt Formular) und dem positiv gerahmten
   Ehrlichkeits-Abschnitt. */

/* Auf hellem Grund tragen die Karten die Struktur — dafuer brauchen sie
   eine leichte Tiefe. Im dunklen Band ist --shadow auf `none` gesetzt,
   dort traegt der Helligkeitsunterschied. */

.score,
.flow-step,
.card,
.limit,
.assure,
.measure,
.origin-row,
.faq-item,
.price-side,
.price-card,
.plan-note,
.mail-card {
  box-shadow: var(--shadow);
}

/* ---- Dunkle Baender ----
   Volle Bildschirmbreite, Inhalt bleibt im gewohnten Raster. */

.band {
  width: 100%;
}

.band > .section {
  border-top: 0;
}

.band-dark .primary-button {
  box-shadow: none;
}

/* ---- Einstieg: warum sich das Suchen veraendert ---- */

.intro-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}

.then-now {
  display: grid;
  gap: 0.85rem;
}

.then-now article {
  padding: 1.25rem 1.35rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.then-now h3 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
}

.then-now p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.6;
}

.then-now .kicker {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--text-3);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.then-now .is-now .kicker {
  color: var(--accent);
}

.intro-note {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  max-width: 76ch;
  color: var(--text-3);
  font-size: 0.9rem;
  line-height: 1.65;
}

/* ---- Was sicher ist (positive Haelfte des Ehrlichkeits-Abschnitts) ---- */

.assures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.assure {
  padding: 1.4rem 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-deep);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
}

.assure h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.assure p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.93rem;
  line-height: 1.6;
}

.sub-heading {
  margin: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(1.2rem, 2.5vw, 1.8rem);
  max-width: 62ch;
}

.sub-heading h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: -0.03em;
}

.sub-heading p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.98rem;
  line-height: 1.65;
}

/* Die Grenzen-Karten tragen neu keinen Warnton mehr: sie sind ein
   Teil der Aufklaerung, keine Fehlermeldung. */
.limit {
  border-left-color: var(--line-strong);
}

/* ---- Zugang per E-Mail (ersetzt das fruehere Formular) ---- */

.mail-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius) + 4px);
  background: var(--surface);
}

.mail-label {
  display: block;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mail-address {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  word-break: break-word;
}

.mail-address svg {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--accent);
}

.mail-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.65;
}

.mail-hints {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mail-hints li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  color: var(--text-2);
  font-size: 0.94rem;
  line-height: 1.55;
}

.mail-hints li::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.mail-foot {
  margin: 0;
  color: var(--text-3) !important;
  font-size: 0.85rem !important;
  line-height: 1.6;
}

/* ================= Breiten ================= */

@media (max-width: 1080px) {
  /* Enger Kopf: der Knopf zeigt nur noch die Beschriftung. */
  .header-cta .cta-mail {
    display: none;
  }

  .scores-grid,
  .flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plan,
  .sample,
  .price-grid,
  .closing-grid,
  .intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .assures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .origin {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }
}

@media (max-width: 720px) {
  .scores-grid,
  .flow,
  .card-grid,
  .limits,
  .assures {
    grid-template-columns: minmax(0, 1fr);
  }

  .origin-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  /* Der E-Mail-Knopf bleibt auch auf dem Handy sichtbar — er ist der
     einzige Zugangsweg. Er zeigt dort nur die Beschriftung, die
     Adresse steht gross im Kopfbereich darunter. */
  .header-cta .cta-mail {
    display: none;
  }

  .header-cta {
    padding: 0.55rem 0.85rem;
    font-size: 0.8rem;
  }

  .brand svg {
    width: 9.5rem;
  }

  .site-header,
  .hero,
  .section,
  .scores,
  .closing,
  .footer {
    width: calc(100% - 28px);
  }

  .hero-actions .primary-button,
  .hero-actions .secondary-link,
  .mail-card .primary-button {
    width: 100%;
  }

  .mail-address {
    font-size: 1.15rem;
  }

  .measure {
    grid-template-columns: minmax(0, 1fr);
  }

  .measure h4,
  .measure p,
  .measure-tags,
  .measure-do,
  .measure-steps,
  .measure-foot {
    grid-column: 1;
  }

  .legal {
    width: calc(100% - 28px);
  }

  .measure-rank {
    margin-bottom: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Halte-Knopf der Animationen (07.08.2026) ──────────────────────────────
   Die native Bedienleiste ist entfernt: Bei einer tonlosen Erklär-Animation
   zeigte sie Zeitregler, Lautstärke und Vollbild — Bedienelemente, die hier
   nichts nützen und den Eindruck stören.

   Ganz ohne Halte-Möglichkeit geht es aber nicht: Bewegung, die von selbst
   startet und länger als fünf Sekunden dauert, MUSS anhaltbar sein
   (WCAG 2.2.2). Barrierefreiheit ist ein Prüfpunkt, den ReadyAI seinen
   eigenen Kunden meldet — hier davon abzuweichen wäre der teuerste
   Widerspruch. Der Knopf ist deshalb da, aber zurückhaltend: sichtbar erst
   bei Mauskontakt oder Tastaturfokus, im Ruhezustand nur schwach angedeutet. */
.video-figure { position: relative; }

.video-halt {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(11, 26, 23, 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s ease, background-color 0.18s ease;
  backdrop-filter: blur(6px);
}
.video-figure:hover .video-halt,
.video-figure:focus-within .video-halt { opacity: 1; }
.video-halt:hover { background: rgba(11, 26, 23, 0.75); }
.video-halt:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.video-halt svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

/* Umschalten der beiden Symbole: läuft das Video, zeigt der Knopf «Pause». */
.video-halt-play { display: none; }
.video-figure.is-angehalten .video-halt-play { display: block; }
.video-figure.is-angehalten .video-halt-pause { display: none; }
/* Ist das Video angehalten, bleibt der Knopf sichtbar — sonst wüsste niemand,
   wie er es wieder startet. */
.video-figure.is-angehalten .video-halt { opacity: 1; }

/* Auf Geräten ohne Maus gibt es kein «Hover». Dort ist der Knopf dauerhaft
   sichtbar, aber dezent. */
@media (hover: none) {
  .video-halt { opacity: 0.75; }
}

/* Wer «Bewegung reduzieren» eingestellt hat, bekommt keinen Selbststart —
   für ihn ist der Knopf der einzige Weg, die Animation zu sehen. */
@media (prefers-reduced-motion: reduce) {
  .video-halt { opacity: 1; }
}