/* Startseite katharinajakob.eu, Aurora-Palette, dieselbe Handschrift wie das
   Demo-Dashboard unter /demos/. Schriften kommen aus /demos/assets/fonts.css,
   also vom eigenen Server, ohne Verbindung zu Google. */

:root {
  --plum-deep: #1E0833;
  --plum: #5B2A6F;
  --plum-mid: #8C4DA8;
  --plum-light: #C9A3D9;
  --rose: #E89AAA;
  --peach: #F4C49C;
  --cream: #FBF7F2;
  --paper: #ffffff;
  --grau: #5c5165;
  --linie: #e8dfe6;
  --linie-stark: #cbb9cd;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --r: 18px;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut muss gewinnen. Der Browser setzt dafuer [hidden]
   { display: none }, und das hat dieselbe Spezifitaet wie jede Klasse ,
   also schlaegt jede spaetere Klasse mit eigenem display es aus dem Feld.
   Genau das war passiert: .knopf { display: inline-flex } und .freigabe
   { display: flex } liessen versteckte Schaltflaechen sichtbar stehen, der
   Freigabe-Knopf der Vorfuehrung stand von Anfang an da. Hier ist
   !important richtig: "versteckt" ist ein Zustand, kein Vorschlag. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--plum-deep);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; margin: 0 0 18px; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); letter-spacing: -0.02em; }
h1 em { font-style: italic; color: var(--plum-mid); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); letter-spacing: -0.01em; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 16px; }
a { color: var(--plum); }

.wrap { width: min(1160px, 100% - 48px); margin-inline: auto; }
.schmal { width: min(760px, 100% - 48px); }
.mitte { text-align: center; }
@media (max-width: 560px) { .wrap, .schmal { width: calc(100% - 32px); }}

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--plum-deep); color: #fff;
  padding: 12px 20px; z-index: 100; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border-radius: 999px;
  border: 1.5px solid transparent; font-weight: 600; font-size: 16px;
  text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, border-color .2s;
}
.knopf:hover { transform: translateY(-1px); }
.knopf svg { flex: none; }
.knopf--peach { background: var(--peach); color: var(--plum-deep); }
.knopf--peach:hover { background: #f0a9b8; }
.knopf--plum { background: var(--plum); color: #fff; }
.knopf--plum:hover { background: var(--plum-mid); }
.knopf--linie { border-color: var(--linie-stark); color: var(--plum-deep); }
.knopf--linie:hover { border-color: var(--plum-deep); }
.dunkel .knopf--linie { border-color: rgba(255,255,255,.45); color: #fff; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.knopfreihe.mitte { justify-content: center; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 247, 242, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
.kopf__innen { display: flex; align-items: center; gap: 20px; min-height: 74px; }
.kopf__marke { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.marke__logo { width: 44px; height: 44px; flex: none; }
.kopf__name { font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--plum-deep); line-height: 1.1; }
.kopf__name span { display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); margin-top: 3px; }
.kopf__nav { display: flex; gap: 22px; }
.kopf__nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--grau); padding: 4px 0; }
.kopf__nav a:hover { color: var(--plum-deep); }
.kopf .knopf { min-height: 44px; padding: 10px 22px; font-size: 15px; }
@media (max-width: 900px) { .kopf__nav { display: none; }}
@media (max-width: 620px) { .kopf__name span { display: none; } .marke__logo { width: 38px; height: 38px; }}
@media (max-width: 520px) { .kopf .knopf .lang { display: none; } .kopf .knopf { padding: 10px 16px; } .kopf__name { font-size: 17px; }}

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(56px, 8vw, 104px) 0; }
.abschnitt--hell { background: #F3ECF5; }
.dunkel { background: var(--plum-deep); color: #E4D7EC; }
.dunkel h2, .dunkel h3 { color: #fff; }
.dunkel a { color: var(--peach); }

.augenbraue {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--plum-mid);
}
.mitte .augenbraue { justify-content: center; }
.dunkel .augenbraue { color: var(--peach); }
.strich { display: block; width: 34px; height: 2px; background: currentColor; flex: none; }

.vorspann { color: var(--grau); max-width: 62ch; }
.dunkel .vorspann { color: #C9B8D6; }
.gross { font-size: 1.15rem; }

/* ---------- Hero ---------- */
.hero { padding: clamp(44px, 6vw, 88px) 0 clamp(36px, 5vw, 68px); }
.hero__raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(30px, 5vw, 66px); align-items: center; }
.hero__text { color: var(--grau); max-width: 48ch; }
.hero__text strong { color: var(--plum-deep); }
.hero__bild { border-radius: var(--r); overflow: hidden; box-shadow: 0 30px 60px -32px rgba(30,8,51,.5); transform: rotate(-1.2deg); }
.hero__bild img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) { .hero__raster { grid-template-columns: 1fr; } .hero__bild { order: -1; transform: none; }}

/* ---------- Schmerzliste ---------- */
.schmerz { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 12px; }
.schmerz li {
  background: var(--paper); border: 1px solid var(--linie); border-radius: 14px;
  padding: 16px 20px 16px 48px; position: relative; color: var(--grau);
}
.schmerz li::before {
  content: ""; position: absolute; left: 20px; top: 24px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--rose);
}
.merksatz {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.4;
  border-left: 3px solid var(--peach); padding-left: 22px; margin-top: 30px;
}

/* ---------- Rechner ---------- */
.rechner { background: var(--paper); border: 1px solid var(--linie); border-radius: var(--r); padding: clamp(22px, 3vw, 34px); margin-top: 26px; }
.rechner label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 16px; margin-bottom: 20px; font-weight: 600; font-size: 15.5px; }
.rechner input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--plum); height: 26px; }
.rechner output { font-variant-numeric: tabular-nums; color: var(--plum); font-weight: 700; }
.rechner__ergebnis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.rechner__ergebnis p { background: #F3ECF5; border-radius: 14px; padding: 18px; margin: 0; text-align: center; }
.rechner__ergebnis span:first-child { display: block; font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; color: var(--plum-deep); line-height: 1.1; font-variant-numeric: tabular-nums; }
.rechner__ergebnis .einheit { display: block; font-size: 13.5px; color: var(--grau); margin-top: 6px; }
.kleingedruckt { font-size: 13.5px; color: var(--grau); margin: 18px 0 0; }
@media (max-width: 520px) { .rechner__ergebnis { grid-template-columns: 1fr; }}

/* ---------- Beispiele ---------- */
.mehr { margin-top: 26px; }
.mehr a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; padding: 6px 0; }
.mehr a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Ablauf ---------- */
.schritte { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 28px); }
.schritt { background: var(--paper); border: 1px solid var(--linie); border-radius: var(--r); padding: clamp(22px, 3vw, 30px); }
.schritt__nr { display: inline-block; font-family: var(--serif); font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--peach); background: var(--plum-deep); border-radius: 999px; padding: 4px 12px; margin-bottom: 14px; }
.schritt p { color: var(--grau); margin: 0; font-size: 15.5px; }
@media (max-width: 800px) { .schritte { grid-template-columns: 1fr; }}

/* ---------- Pakete ---------- */
.pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 28px); margin-top: 30px; }
.paket { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--linie); border-radius: var(--r); padding: clamp(24px, 3vw, 34px); }
.paket--hervor { background: var(--plum-deep); color: #E4D7EC; border-color: var(--plum-deep); }
.paket--hervor h3 { color: #fff; }
.paket--hervor p { color: #C9B8D6; }
.paket .preis { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.4rem); font-weight: 700; color: var(--plum-deep); margin: 0 0 12px; }
.paket--hervor .preis { color: var(--peach); }
.paket > p { color: var(--grau); font-size: 15.5px; }
.paket .knopf { margin-top: auto; align-self: flex-start; }
.haken { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 10px; }
.haken li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 15px; }
.haken svg { width: 18px; height: 18px; margin-top: 3px; color: var(--plum-mid); }
.paket--hervor .haken svg { color: var(--peach); }
.haken span { color: var(--grau); }
.paket--hervor .haken span { color: #D9CBE3; }
@media (max-width: 900px) { .pakete { grid-template-columns: 1fr; }}

/* ---------- Über mich ---------- */
.ueber { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.ueber__bild { border-radius: var(--r); overflow: hidden; box-shadow: 0 24px 48px -28px rgba(30,8,51,.5); }
.ueber__bild img { width: 100%; height: auto; display: block; }
.ueber p { color: var(--grau); }
@media (max-width: 800px) { .ueber { grid-template-columns: 1fr; } .ueber__bild { max-width: 320px; }}

/* ---------- FAQ ---------- */
.faq { margin-top: 26px; border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 22px; font-weight: 400; color: var(--plum-mid); }
.faq details[open] summary::after { content: "−"; }
.faq div { padding: 0 0 20px; }
.faq div p { color: var(--grau); margin: 0 0 12px; }
.faq div p:last-child { margin-bottom: 0; }

/* ---------- Schluss und Fuß ---------- */
.schluss__klein { font-size: 14px; color: #C9B8D6; margin-top: 22px; }
.schluss__klein a { text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 3px 0; }

.fuss { background: var(--plum-deep); color: #C9B8D6; padding: 36px 0 32px; border-top: 1px solid rgba(255,255,255,.08); }
.fuss__innen { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; font-size: 14.5px; }
.fuss__marke { display: inline-flex; align-items: center; gap: 12px; }
.fuss__logo { width: 34px; height: 34px; flex: none; opacity: .9; }
.fuss a { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 3px 0; }
.fuss a:hover { color: #fff; }
.fuss__links { display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 620px) { .fuss__innen { flex-direction: column; align-items: flex-start; }}

/* ============================================================
   Überarbeitung: zwei Kontrastfehler und mehr optische Tiefe.

   Die zwei Fehler sind derselbe alte Bekannte: Eine allgemeinere
   Regel schlägt die speziellere, weil sie mehr Gewicht hat.
   ".dunkel a" (Klasse + Element) ist staerker als ".knopf--peach"
   (nur Klasse) und faerbte auch den Knopf pfirsich, pfirsich auf
   pfirsich, also unlesbar. Dasselbe bei ".paket > p" gegen
   ".paket--hervor p". Beide Regeln stehen deshalb hier unten neu.
   ============================================================ */

/* --- Fehler 1: Knoepfe im dunklen Abschnitt behalten ihre eigene Farbe --- */
.dunkel a:not(.knopf) { color: var(--peach); }
.dunkel .knopf--peach { color: var(--plum-deep); }

/* --- Fehler 2: Text auf der dunklen Preiskarte --- */
.paket--hervor > p { color: #C9B8D6; }
.paket--hervor .preis { color: var(--peach); }

/* --- Aurora-Schein hinter dem Aufmacher --- */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 900px; height: 900px; right: -280px; top: -420px;
  background: radial-gradient(circle, rgba(140,77,168,.20) 0%, rgba(232,154,170,.12) 42%, transparent 68%);
}
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 620px; height: 620px; left: -320px; bottom: -380px;
  background: radial-gradient(circle, rgba(244,196,156,.26) 0%, transparent 66%);
}
.hero__raster { position: relative; z-index: 1; }
.hero__bild { box-shadow: 0 40px 80px -34px rgba(30,8,51,.55), 0 0 0 1px rgba(255,255,255,.6); }

/* --- Farbverlauf in der Überschrift, wie in den Demos --- */
h1 em {
  background: linear-gradient(100deg, var(--plum-mid) 0%, var(--rose) 60%, var(--peach) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--plum-mid);
}

/* --- Helle Abschnitte bekommen einen weichen Verlauf statt einer flachen Flaeche --- */
.abschnitt--hell {
  background: linear-gradient(180deg, #F6F0F8 0%, #EFE6F2 100%);
  position: relative;
}

/* --- Merksatz als richtiges Zitat --- */
.merksatz {
  border-left: 0; padding: 26px 28px; border-radius: var(--r);
  background: linear-gradient(120deg, rgba(140,77,168,.10), rgba(244,196,156,.16));
  position: relative;
}
.merksatz::before {
  content: "„"; position: absolute; left: 14px; top: 6px;
  font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--plum-mid); opacity: .28;
}


/* --- Die Ziffern im Ablauf gross statt als kleine Pille --- */
.schritt { position: relative; overflow: hidden; }
.schritt__nr {
  background: none; padding: 0; margin: 0; border-radius: 0;
  position: absolute; right: 16px; top: 2px;
  font-size: clamp(3.2rem, 6vw, 4.6rem); font-weight: 700; line-height: 1;
  color: var(--plum-mid); opacity: .14; letter-spacing: -0.03em;
}
.schritt h3 { padding-right: 56px; }

/* --- Hervorgehobene Preiskarte mit Verlauf statt flachem Dunkel --- */
.paket--hervor {
  background: linear-gradient(155deg, #2A0E47 0%, var(--plum-deep) 55%, #170626 100%);
  position: relative; overflow: hidden;
}
.paket--hervor::before {
  content: ""; position: absolute; width: 360px; height: 360px; right: -160px; top: -160px;
  background: radial-gradient(circle, rgba(140,77,168,.45) 0%, transparent 68%); pointer-events: none;
}
.paket--hervor > * { position: relative; }

/* --- Dunkle Abschnitte ebenfalls mit Schein --- */
.dunkel { position: relative; overflow: hidden; }
.dunkel::before {
  content: ""; position: absolute; width: 780px; height: 780px; right: -240px; bottom: -420px;
  background: radial-gradient(circle, rgba(140,77,168,.42) 0%, transparent 66%); pointer-events: none;
}
.dunkel .wrap { position: relative; z-index: 1; }

/* --- Sanftes Einblenden beim Scrollen --- */
[data-auf] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-auf].ist-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-auf] { opacity: 1; transform: none; transition: none; }}

/* ============================================================
   Zweite Überarbeitung.

   Die Ziffern im Ablauf lagen absolut positioniert über dem Text.
   Gemessen: Ziffer 71 px breit, freigehalten waren 56 px, die
   Überschrift wurde überlagert, der Fließtext ebenso. Absolute
   Positionierung über Text ist hier grundsätzlich die falsche
   Loesung, weil die Breite von der Schriftgröße abhängt und bei
   jeder Bildschirmbreite anders ausfällt. Die Ziffer steht
   deshalb jetzt im normalen Textfluss.
   ============================================================ */

.schritt { overflow: visible; }
.schritt__nr {
  position: static; display: block; margin: 0 0 6px; padding: 0;
  font-family: var(--serif); font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.03em; opacity: 1;
  background: linear-gradient(140deg, var(--plum-mid), var(--rose));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--plum-mid);
}
.schritt h3 { padding-right: 0; }


/* --- Feinere Typografie ------------------------------------------------ */
h1 { letter-spacing: -0.03em; line-height: 1.06; }
h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); line-height: 1.1; letter-spacing: -0.02em; }
.hero__text { font-size: 18.5px; }
.vorspann { font-size: 17.5px; }

/* --- Haarlinie mit Verlauf oben auf hellen Karten ---------------------- */
.schritt, .paket:not(.paket--hervor), .rechner {
  position: relative; overflow: hidden;
}
.schritt::before, .paket:not(.paket--hervor)::before, .rechner::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--plum-mid), var(--rose) 55%, var(--peach));
  opacity: .5;
}

/* --- Mehr Luft zwischen den Abschnitten -------------------------------- */
.abschnitt { padding: clamp(68px, 9vw, 124px) 0; }

/* ============================================================
   Dritte Überarbeitung: abgeschnittene Schrift, laufender Ablauf.
   ============================================================ */

/* --- Unterlängen wurden abgeschnitten -------------------------------
   Ursache: Der Farbverlauf in "am Feierabend" wird über
   background-clip: text auf die Schrift beschnitten. Der Kasten
   dafür ist so hoch wie die Zeile, bei Zeilenabstand 1.06 lag das
   "g" darunter und fiel weg. Mehr Zeilenabstand plus etwas Luft
   unter der Grundlinie loesen das. */
h1 { line-height: 1.14; }
h1 em {
  display: inline-block;
  padding-bottom: .12em;
  margin-bottom: -.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- Der laufende Ablauf im Aufmacher --------------------------------
   Vier Schritte, die nacheinander aufleuchten, verbunden durch eine
   Linie, auf der ein Punkt nach unten wandert. Zeigt in acht Sekunden,
   was Automatisierung bei ihr bedeutet, ohne ein Wort Fachsprache.
   Respektiert "weniger Bewegung": dann steht alles ruhig und sichtbar. */
.hero__bild {
  transform: none; border-radius: var(--r); overflow: visible;
  background: linear-gradient(155deg, #2A0E47 0%, var(--plum-deep) 58%, #170626 100%);
  box-shadow: 0 40px 80px -34px rgba(30,8,51,.6);
  padding: clamp(24px, 3vw, 34px);
  position: relative;
}
.hero__bild::before {
  content: ""; position: absolute; width: 340px; height: 340px; right: -130px; top: -130px;
  background: radial-gradient(circle, rgba(140,77,168,.5) 0%, transparent 68%);
  pointer-events: none; border-radius: 50%;
}

@keyframes fluss-an {
  0%, 4%   { opacity: .42; transform: translateX(-4px); }
  10%, 62% { opacity: 1;   transform: translateX(0); }
  74%,100% { opacity: .42; transform: translateX(-4px); }
}
@keyframes punkt-an {
  0%, 4%   { background: var(--plum-deep); border-color: rgba(244,196,156,.45); box-shadow: none; }
  10%, 62% { background: var(--peach);     border-color: var(--peach);
             box-shadow: 0 0 0 5px rgba(244,196,156,.16); }
  74%,100% { background: var(--plum-deep); border-color: rgba(244,196,156,.45); box-shadow: none; }
}
@media (max-width: 860px) { .hero__bild { order: 0; margin-top: 8px; }}

/* ============================================================
   Vierte Überarbeitung: Der Aufmacher als Bühne.

   Statt eines Fotos ein bewegter Aurora-Hintergrund aus drei
   weichen Farbscheinen, die langsam driften. Bewusst kein
   Stockfoto und kein KI-Bild eines fremden Betriebs, das wäre
   geliehene Glaubwürdigkeit. Die Fläche ist abstrakt, gehört
   zur Marke und lädt keine einzige Datei nach.
   ============================================================ */

.hero {
  background: #150522;
  color: #EFE4F5;
  padding: clamp(84px, 13vh, 150px) 0 clamp(96px, 14vh, 160px);
  min-height: min(88vh, 820px);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  isolation: isolate;
}
.hero::before { content: none; }

.aurora { position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none; will-change: transform; }
.aurora__schein { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; }
.aurora__schein--1 {
  width: 46vw; height: 46vw; min-width: 420px; min-height: 420px; left: 4%; top: 2%;
  background: radial-gradient(circle, rgba(140,77,168,.85), transparent 66%);
  animation: driften-1 22s ease-in-out infinite alternate;
}
.aurora__schein--2 {
  width: 40vw; height: 40vw; min-width: 360px; min-height: 360px; right: 2%; top: 14%;
  background: radial-gradient(circle, rgba(232,154,170,.6), transparent 66%);
  animation: driften-2 27s ease-in-out infinite alternate;
}
.aurora__schein--3 {
  width: 34vw; height: 34vw; min-width: 300px; min-height: 300px; left: 34%; bottom: -14%;
  background: radial-gradient(circle, rgba(244,196,156,.5), transparent 68%);
  animation: driften-3 19s ease-in-out infinite alternate;
}
@keyframes driften-1 { to { transform: translate3d(9vw, 6vh, 0) scale(1.14); } }
@keyframes driften-2 { to { transform: translate3d(-8vw, 9vh, 0) scale(1.2); } }
@keyframes driften-3 { to { transform: translate3d(6vw, -8vh, 0) scale(.88); } }

.hero__innen { position: relative; z-index: 2; max-width: 880px; }
.hero .augenbraue { color: var(--peach); }
.hero h1 {
  color: #fff;
  font-size: clamp(2.8rem, 7.4vw, 5.6rem);
  line-height: 1.05; letter-spacing: -0.035em; margin-bottom: 26px;
}
.hero h1 em { padding-bottom: .14em; margin-bottom: -.14em; }
.hero__text { color: #D4C3E0; font-size: clamp(17.5px, 2vw, 21px); max-width: 44ch; }
.hero__merk { font-size: clamp(17px, 1.9vw, 19.5px); color: #C5B2D4; }
.hero__merk strong { color: #fff; }
.hero .knopf--linie { border-color: rgba(255,255,255,.45); color: #fff; }
.hero .knopf--linie:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Hinweis nach unten, damit klar ist: hier geht es weiter */
.hero__runter {
  position: absolute; z-index: 2; left: 50%; bottom: 30px; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.4); border-radius: 999px;
  display: grid; place-items: start center; padding-top: 7px;
}
.hero__runter span { display: block; width: 4px; height: 8px; border-radius: 2px; background: var(--peach); animation: tropfen 1.9s ease-in-out infinite; }
@keyframes tropfen { 0%, 100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(13px); opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .aurora__schein, .hero__runter span { animation: none; }}

/* ---------- Kopfzeile schwebt über der dunklen Bühne ----------
   Oben auf der Seite liegt der Aufmacher dunkel hinter der Kopfzeile.
   Ein cremefarbenes Band davor zerschneidet das Bild. Die Kopfzeile ist
   deshalb zunaechst durchsichtig mit heller Schrift und wird erst beim
   Scrollen zur hellen Leiste, dieselbe Klasse, die das Skript ohnehin
   schon setzt. */
.kopf { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.kopf__name { color: #fff; }
.kopf__name span { color: rgba(255,255,255,.66); }
.kopf__nav a { color: rgba(255,255,255,.8); }
.kopf__nav a:hover { color: #fff; }

.kopf.ist-gescrollt {
  background: rgba(251, 247, 242, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--linie);
}
.kopf.ist-gescrollt .kopf__name { color: var(--plum-deep); }
.kopf.ist-gescrollt .kopf__name span { color: var(--grau); }
.kopf.ist-gescrollt .kopf__nav a { color: var(--grau); }
.kopf.ist-gescrollt .kopf__nav a:hover { color: var(--plum-deep); }

/* ============================================================
   Korrektur. Drei Fehler, alle meine.

   1. Die Kopfzeile ist "sticky", steht also IM Textfluss und liegt
      damit ÜBER dem Aufmacher, nicht darauf. Ich hatte sie
      durchsichtig gemacht und die Schrift weiss, weisse Schrift
      auf cremefarbenem Grund. Unlesbar. Sie bekommt jetzt oben
      denselben dunklen Grund wie der Aufmacher und wird beim
      Scrollen hell.
   2. Das Maus-Symbol war unnötig und erklärt sich nicht. Raus.
   3. Die Kursive ragt nach rechts über ihre eigene Zeile hinaus.
      background-clip:text beschneidet genau an dieser Kante, das
      "d" verlor seinen Bogen. Es braucht Luft auf allen Seiten,
      nicht nur unten.
   ============================================================ */

/* --- 1. Kopfzeile ---------------------------------------------------- */
.kopf { background: #150522; border-bottom-color: transparent; }
.kopf.ist-gescrollt {
  background: rgba(251, 247, 242, 0.94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* --- 2. Maus-Symbol entfernt ----------------------------------------- */
.hero__runter { display: none; }

/* --- 3. Fliessender Verlauf in der Überschrift ------------------------
   Technik aus dem Kreativstudio (demos/designstudio): grosser
   Verlauf, der über die Schrift wandert. Dort bewegt sich
   background-position auf einer 400 % grossen Flaeche, dasselbe
   Prinzip hier, nur ruhiger, weil daneben schon die Aurora driftet.
   Wichtig, ebenfalls von dort uebernommen: keine Stufe darf
   durchsichtig werden, sonst verschwinden Buchstaben. */
.hero h1 em {
  display: inline-block;
  font-style: italic;
  background-image: linear-gradient(
    100deg,
    #C9A3D9 0%,
    #E89AAA 26%,
    #F4C49C 48%,
    #E89AAA 72%,
    #C9A3D9 100%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: #E0C6E8;
  -webkit-text-fill-color: transparent;
  animation: schrift-verlauf 14s ease-in-out infinite;

  /* Luft auf allen Seiten: Die Kursive haengt rechts ueber, die
     Unterlaengen unten. Der negative Aussenabstand nimmt den Platz
     wieder aus dem Layout, damit nichts verrutscht. */
  padding: .06em .14em .14em .04em;
  margin: -.06em -.14em -.14em -.04em;
}
@keyframes schrift-verlauf {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 em { animation: none; background-position: 40% 50%; }}

/* ============================================================
   Korrektur der Korrektur: das dunkle Band verschwindet.

   Fehler: Die Kopfzeile stand als "sticky" IM Textfluss, also
   oberhalb des Aufmachers. Ein eigener Streifen, erst dunkel,
   beim Scrollen hell. Dieser Umschlag war sichtbar, weil es zwei
   verschiedene Flaechen waren, nicht eine.

   Richtig ist: Die Kopfzeile gehoert NICHT in den Fluss. Sie liegt
   fest ueber der Seite, der Aufmacher beginnt darunter am oberen
   Rand. Dann ist oben gar keine Leiste zu sehen, die Buehne
   laeuft durch, und erst wenn die Buehne weggescrollt ist,
   blendet sich das helle Band weich ein.

   Voreinstellung ist jetzt die helle Leiste. Nur solange die
   dunkle Buehne hinter der Kopfzeile liegt, setzt das Skript
   .ueber-buehne. Spaetere Unterseiten ohne Aufmacher bekommen so
   automatisch die lesbare helle Variante.
   ============================================================ */

.kopf {
  position: fixed; left: 0; right: 0; top: 0;
  background: rgba(251, 247, 242, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
  transition: background-color .3s ease, border-color .3s ease;
}
/* Schrift und Flaeche muessen GEMEINSAM wechseln. Wechselt nur der Grund
   weich und die Schriftfarbe hart, steht fuer einen Moment dunkle Schrift
   auf noch dunklem Grund. */
.kopf__name, .kopf__name span, .kopf__nav a { transition: color .3s ease; }
.kopf__name { color: var(--plum-deep); }
.kopf__name span { color: var(--grau); }
.kopf__nav a { color: var(--grau); }
.kopf__nav a:hover { color: var(--plum-deep); }

/* Ueber der dunklen Buehne: keine eigene Flaeche, kein Rand, nur Schrift. */
.kopf.ueber-buehne {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
}
.kopf.ueber-buehne .kopf__name { color: #fff; }
.kopf.ueber-buehne .kopf__name span { color: rgba(255,255,255,.66); }
.kopf.ueber-buehne .kopf__nav a { color: rgba(255,255,255,.8); }
.kopf.ueber-buehne .kopf__nav a:hover { color: #fff; }

/* Die Kopfzeile deckt jetzt den oberen Rand ab. Der Aufmacher braucht
   darum oben ihre Hoehe zusaetzlich, und Sprungmarken duerfen nicht
   unter ihr landen. */
.hero { padding-top: calc(74px + clamp(48px, 9vh, 96px)); }
html { scroll-padding-top: 86px; }

/* ============================================================
   Durchgang nach der UI/UX-Checkliste (ui-ux-pro-max).
   Nur das, was die Prüfung im Browser wirklich bemängelt hat.
   ============================================================ */

/* --- Priorität 1: sichtbarer Tastatur-Fokus -------------------------------
   Vorher gab es keine eigene Fokus-Regel. Der Browser zeichnete seinen
   Standardring: 1 Pixel, orange. Sichtbar, aber dünn und fremd. Die Regel
   verlangt 2 bis 4 Pixel und 3:1 Kontrast zum Umfeld. Nur :focus-visible,
   damit der Ring bei Mausklick nicht aufblitzt. */
:focus-visible {
  outline: 3px solid var(--plum-mid);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Auf den dunklen Flächen wäre Pflaume auf Pflaume kaum zu sehen. */
.hero :focus-visible,
.dunkel :focus-visible,
.fuss :focus-visible,
.kopf.ueber-buehne :focus-visible {
  outline-color: var(--peach);
}

/* --- Priorität 2: Fingerflächen -------------------------------------------
   Gemessen auf 375 Pixel Breite: Regler 26 px hoch, Fußzeilen-Links 29 px.
   Gefordert sind 44. Der Regler bekommt die Höhe über eine unsichtbare
   Fläche, der sichtbare Balken bleibt schlank. */
.rechner input[type=range] {
  -webkit-appearance: none; appearance: none;
  height: 44px; background: transparent; margin: 0;
  touch-action: manipulation; cursor: pointer;
}
.rechner input[type=range]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--plum-light), var(--linie));
}
.rechner input[type=range]::-moz-range-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--plum-light), var(--linie));
}
.rechner input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--plum); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(30, 8, 51, .3);
  margin-top: -10px;                    /* mittig auf dem 8px-Balken */
  transition: transform .15s ease;
}
.rechner input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--plum); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(30, 8, 51, .3);
}
.rechner input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }

.fuss a { padding: 11px 0; }            /* 44 px Zeile statt 29 */
.fuss__links { gap: 12px 20px; }
.kopf__marke { padding: 3px 0; }

/* Rückmeldung beim Antippen: Ohne :active passiert am Finger sichtbar nichts,
   bis die neue Seite da ist. */
.knopf { touch-action: manipulation; }
.knopf:active { transform: scale(.97); }

/* --- Priorität 6: keine Schrift unter 12 Pixel ----------------------------
   Gemessen: 11 px im Kopfzusatz, 11,5 px in den Ablaufschritten. */
.kopf__name span { font-size: 12px; }

/* Bewegung nur, wenn sie gewünscht ist, gilt auch für die neuen Regeln. */
@media (prefers-reduced-motion: reduce) {
  .knopf:active { transform: none; }
  .rechner input[type=range]::-webkit-slider-thumb { transition: none; }
}

/* Zwei Links waren noch unter 44 px: der Weiterlink zu den Beispielen (40)
   und die Mailadresse im Kontaktblock (29). */
.mehr a { padding: 10px 0; }
a[href^="mailto:"] { display: inline-block; padding: 8px 0; }

/* --- Der Wert gehört neben seine Beschriftung -----------------------------
   Im Raster stand die Beschriftung in Zeile 1, der Regler in Zeile 2, und der
   Wert rutschte dahinter in Zeile 3, links unten. Dort las er sich wie ein
   versprengter Textrest statt wie die Zahl, die der Regler gerade einstellt.
   Beide gehören auf eine Zeile: links wonach gefragt wird, rechts die Antwort.
   Explizit gesetzt statt der automatischen Platzierung überlassen, die stolpert
   über den nackten Textknoten in der Beschriftung. */
.rechner label { row-gap: 4px; }
.rechner output {
  grid-row: 1; grid-column: 2; justify-self: end;
  font-size: 19px; font-variant-numeric: tabular-nums;
  background: #F3ECF5; border-radius: 999px; padding: 3px 14px;
  min-width: 78px; text-align: center;
}
.rechner input[type=range] { grid-row: 2; }

/* Der Hinweis, wenn die Regler in unglaubwürdige Bereiche laufen. */
.rechner__pruef {
  margin: 14px 0 0; padding: 12px 16px;
  background: #FDF1E4; border-left: 3px solid var(--peach);
  border-radius: 0 10px 10px 0;
  font-size: 15px; line-height: 1.5; color: var(--plum-deep);
}
.rechner__pruef[hidden] { display: none; }

/* ---------- Verweis auf die Beispielseite ----------
   Vorher standen hier drei grosse Vorschaukacheln. Die Beispiele haben aber
   eine eigene Seite unter /demos/, dann muss die Startseite sie nicht ein
   zweites Mal ausstellen. Ein kompakter Verweis genuegt und macht den Weg
   zum eigentlichen Thema kuerzer. */
.verweis {
  background: var(--paper); border: 1px solid var(--linie); border-radius: var(--r);
  padding: clamp(26px, 4vw, 40px);
  text-align: center;
  position: relative; overflow: hidden;
}
.verweis::before {                       /* schmaler Farbstreifen oben */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--plum-light), var(--rose), var(--peach));
}
.verweis .augenbraue { justify-content: center; }
.verweis h2 { margin-bottom: 12px; }
.verweis > p { color: var(--grau); max-width: 52ch; margin-inline: auto; }
.verweis__branchen {
  font-size: 14px; font-weight: 600; color: var(--plum-mid);
  margin: 18px 0 24px; line-height: 1.8;
}
.verweis .knopf { margin: 0; }

/* ---------- Belege ----------
   Steht da, wo sonst Kundenstimmen stünden. Bewusst als Liste und nicht als
   Kachelreihe: Drei Punkte sind zu wenig für ein Raster, und eine Reihe halb
   leerer Kacheln sieht nach fehlendem Inhalt aus. */
.belege { list-style: none; margin: 28px 0 22px; padding: 0; display: grid; gap: 16px; }
.belege li {
  background: var(--paper); border: 1px solid var(--linie); border-radius: var(--r);
  padding: 22px 24px; border-left: 4px solid var(--plum-mid);
}
.belege strong {
  display: block; font-family: var(--serif); font-size: 1.15rem;
  color: var(--plum-deep); margin-bottom: 6px; font-weight: 700;
}
.belege span { display: block; color: var(--grau); font-size: 16px; line-height: 1.6; }

/* ============================================================
   Vorführung: ein Angebot entsteht, ohne dass jemand tippt.

   Vorher stand hier eine Beschreibung in vier Kästchen. Eine
   Beschreibung ist eine Behauptung. Die sechs Beispiel-Websites
   überzeugen, weil man sie anklicken kann, für das Hauptprodukt
   gab es nichts Vergleichbares. Das hier ist das Gegenstück:
   Der Besucher trägt seine eigenen Zahlen ein, lässt den Ablauf
   durchlaufen und gibt am Ende selbst frei. Genau dieser letzte
   Klick ist der Punkt, vor dem die meisten Angst haben.

   Nichts davon geht irgendwohin. Kein Formular, kein Versand,
   keine fremde Adresse, dieselbe Regel wie in allen Demos.
   ============================================================ */

.vorfuehr {
  background: var(--paper); border: 1px solid var(--linie);
  border-radius: var(--r); overflow: hidden; margin-top: 30px;
}
.vorfuehr__kopf { padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 34px) 0; }
.vorfuehr__kopf h3 { margin-bottom: 8px; }
.vorfuehr__kopf .vorspann { color: var(--grau); margin-bottom: 0; }

/* ---------- Eingabe: die eigenen Zahlen ---------- */
.vorfuehr__eingabe {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; padding: 22px clamp(22px, 3vw, 34px);
}
.vorfuehr__eingabe label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--plum-mid);
  letter-spacing: .04em; text-transform: uppercase;
}
.vorfuehr__eingabe input {
  font: inherit; font-size: 15.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--plum-deep); background: var(--cream);
  border: 1px solid var(--linie); border-radius: 10px;
  padding: 11px 13px; min-height: 44px; width: 100%;
}
.vorfuehr__eingabe input:focus { border-color: var(--plum-mid); }
.vorfuehr__eingabe input:disabled { opacity: .55; }

/* ---------- Bühne ---------- */
.vorfuehr__buehne {
  display: grid; grid-template-columns: 250px 1fr;
  gap: clamp(20px, 3vw, 34px);
  padding: 4px clamp(22px, 3vw, 34px) clamp(22px, 3vw, 30px);
  align-items: start;
}

/* Das Handy ist gezeichnet, kein Bild, es lädt nichts nach. */
.handy {
  border: 2px solid var(--linie-stark); border-radius: 26px;
  background: linear-gradient(180deg, #2A0E47, var(--plum-deep));
  padding: 14px 12px 16px; position: relative; min-height: 232px;
  display: flex; flex-direction: column; gap: 10px;
}
.handy::before {
  content: ""; position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
  width: 52px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22);
}
.handy__zeile {
  margin-top: 14px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5); text-align: center;
}
.handy__blase {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px 14px 14px 4px; padding: 12px 14px;
}
.handy__welle { display: flex; align-items: center; gap: 3px; height: 26px; }
.handy__welle span {
  flex: 1; background: var(--peach); border-radius: 2px; height: 20%;
  transform-origin: center;
}
.vorfuehr.ist-1 .handy__welle span { animation: wellen 1.1s ease-in-out infinite; }
.handy__welle span:nth-child(2)  { animation-delay: .08s; }
.handy__welle span:nth-child(3)  { animation-delay: .16s; }
.handy__welle span:nth-child(4)  { animation-delay: .24s; }
.handy__welle span:nth-child(5)  { animation-delay: .32s; }
.handy__welle span:nth-child(6)  { animation-delay: .40s; }
.handy__welle span:nth-child(7)  { animation-delay: .48s; }
.handy__welle span:nth-child(8)  { animation-delay: .56s; }
.handy__welle span:nth-child(9)  { animation-delay: .64s; }
.handy__welle span:nth-child(10) { animation-delay: .72s; }
.handy__welle span:nth-child(11) { animation-delay: .80s; }
.handy__welle span:nth-child(12) { animation-delay: .88s; }
@keyframes wellen { 0%, 100% { height: 18%; } 50% { height: 100%; } }

.handy__text {
  color: #EFE4F5; font-size: 14.5px; line-height: 1.5; min-height: 4.5em;
}
.handy__text b { color: var(--peach); font-weight: 600; }
.handy__cursor {
  display: inline-block; width: 2px; height: 1em; background: var(--peach);
  vertical-align: -.15em; animation: blinken 1s step-end infinite;
}
@keyframes blinken { 50% { opacity: 0; } }

/* ---------- Stationen ---------- */
.stationen { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.station {
  border: 1px solid var(--linie); border-radius: 14px; background: var(--cream);
  padding: 14px 16px; display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  align-items: start; transition: border-color .3s, background .3s, opacity .3s;
  opacity: .5;
}
.station__punkt {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--linie-stark); background: var(--paper);
  font-size: 12px; font-weight: 700; color: var(--grau);
  transition: background .3s, border-color .3s, color .3s;
}
.station__titel { display: block; font-weight: 600; font-size: 15.5px; color: var(--plum-deep); }
.station__was { display: block; font-size: 14px; color: var(--grau); margin-top: 2px; }

.station.ist-dran { opacity: 1; border-color: var(--plum-light); background: var(--paper); }
.station.ist-dran .station__punkt { border-color: var(--plum-mid); color: var(--plum-mid); }
.station.ist-fertig { opacity: 1; }
.station.ist-fertig .station__punkt {
  background: var(--plum-mid); border-color: var(--plum-mid); color: #fff;
}

/* erkannte Felder */
.erkannt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.erkannt span {
  background: #F3ECF5; color: var(--plum); border-radius: 999px;
  padding: 4px 11px; font-size: 13px; font-weight: 600;
  opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s;
}
.erkannt span.ist-da { opacity: 1; transform: none; }

/* der Angebotsentwurf */
.beleg {
  display: block;                        /* niemals inline: siehe Markup-Regel oben */
  margin-top: 12px; border: 1px solid var(--linie); border-radius: 12px;
  background: var(--paper); padding: 14px 16px; font-size: 14px;
  opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s;
}
.beleg.ist-da { opacity: 1; transform: none; }
.beleg__kopf {
  display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--linie); padding-bottom: 8px; margin-bottom: 8px;
  font-size: 12.5px; color: var(--grau);
}
.beleg__kunde { font-weight: 700; color: var(--plum-deep); font-size: 15px; margin-bottom: 8px; }
.beleg__zeile { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.beleg__zeile span:last-child { font-variant-numeric: tabular-nums; }
.beleg__summe {
  display: flex; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--linie); margin-top: 8px; padding-top: 8px;
  font-weight: 700; color: var(--plum-deep);
}
.beleg__summe span:last-child { font-variant-numeric: tabular-nums; }

/* die Freigabe, der eigentliche Punkt */
.freigabe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.freigabe .knopf { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.freigabe__hinweis {
  margin: 8px 0 0; font-size: 13.5px; color: var(--grau); line-height: 1.5;
}

/* ---------- Steuerung ---------- */
.vorfuehr__steuer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  border-top: 1px solid var(--linie); background: var(--cream);
  padding: 16px clamp(22px, 3vw, 34px);
}
.vorfuehr__stand { margin: 0; font-size: 14.5px; color: var(--grau); }
.vorfuehr__stand b { color: var(--plum-deep); font-weight: 600; }

@media (max-width: 760px) {
  .vorfuehr__eingabe { grid-template-columns: 1fr 1fr; }
  .vorfuehr__buehne { grid-template-columns: 1fr; }
  .handy { max-width: 280px; margin-inline: auto; }}
@media (max-width: 420px) {
  .vorfuehr__eingabe { grid-template-columns: 1fr; }}

/* Ohne Bewegung: keine Welle, kein Tippen, alles sofort da.
   Der Ablauf bleibt bedienbar, er springt nur von Schritt zu Schritt. */
@media (prefers-reduced-motion: reduce) {
  .vorfuehr .handy__welle span,
  .vorfuehr .handy__cursor { animation: none; }
  .erkannt span, .beleg { transition: none; }
}
/* Der Demo-Hinweis am Ende gehört zur Meldung, soll ihr aber nicht die
   Aufmerksamkeit nehmen. */
.vorfuehr__demo { display: block; font-size: 13px; color: var(--grau); margin-top: 3px; }

/* ============================================================
   Vorführung, zweiter Anlauf: aus einem Formular wird eine Bühne.

   Vorher: vier gleich aussehende Kästen untereinander und ein
   flaches Rechteck als Handy. Alles richtig, nichts davon
   ansehnlich. Drei Dinge fehlten, eine Fläche, auf der das
   Ganze steht; eine sichtbare Verbindung zwischen den Stationen,
   damit man einen Ablauf sieht statt einer Liste; und ein
   Ergebnis, das aussieht wie ein Dokument und nicht wie eine
   Tabelle.
   ============================================================ */

/* ---------- Die Fläche ---------- */
.vorfuehr {
  background: linear-gradient(170deg, #ffffff 0%, #FDFAFB 46%, #F7F0F7 100%);
  border-color: #E4D7E6;
  box-shadow: 0 30px 60px -38px rgba(30, 8, 51, .42);
  position: relative;
}
.vorfuehr::before {                    /* Markenkante, wie beim Verweis-Block */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--plum-mid), var(--rose) 45%, var(--peach));
  z-index: 1;
}
.vorfuehr__kopf { padding-top: clamp(26px, 3.4vw, 36px); }

/* ---------- Eingabefelder ---------- */
.vorfuehr__eingabe input {
  background: #fff;
  box-shadow: 0 1px 2px rgba(30, 8, 51, .04);
  transition: border-color .2s, box-shadow .2s;
}
.vorfuehr__eingabe input:hover:not(:disabled) { border-color: var(--linie-stark); }
.vorfuehr__eingabe input:focus {
  box-shadow: 0 0 0 3px rgba(140, 77, 168, .14);
}

/* ---------- Das Handy ---------- */
.handy {
  background: linear-gradient(160deg, #3A1A5C 0%, #1E0833 55%, #150522 100%);
  border: 0; border-radius: 30px;
  padding: 9px; min-height: 0;
  box-shadow: 0 22px 44px -22px rgba(30, 8, 51, .6),
              inset 0 0 0 1px rgba(255, 255, 255, .13);
  display: block;
  position: sticky; top: 100px;        /* läuft beim Scrollen mit */
}
.handy::before {                       /* Hörmuschel-Schlitz */
  content: ""; position: absolute; left: 50%; top: 17px; transform: translateX(-50%);
  width: 44px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .18);
  z-index: 2;
}
.handy__schirm {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-radius: 23px; padding: 26px 13px 15px;
  display: flex; flex-direction: column; gap: 9px;
  min-height: 236px;
}
.handy__leiste {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: .02em;
  padding: 0 2px 2px;
}
.handy__balken { display: flex; align-items: flex-end; gap: 2px; height: 9px; }
.handy__balken i { width: 2.5px; background: rgba(255,255,255,.45); border-radius: 1px; }
.handy__balken i:nth-child(1) { height: 30%; }
.handy__balken i:nth-child(2) { height: 55%; }
.handy__balken i:nth-child(3) { height: 78%; }
.handy__balken i:nth-child(4) { height: 100%; }

.handy__zeile {
  margin: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.52);
}
.handy__licht {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25);
  transition: background .3s, box-shadow .3s;
}
.vorfuehr.ist-1 .handy__licht {
  background: #FF6B6B; box-shadow: 0 0 0 4px rgba(255, 107, 107, .22);
  animation: aufnahme 1.6s ease-in-out infinite;
}
@keyframes aufnahme { 50% { box-shadow: 0 0 0 7px rgba(255, 107, 107, .06); } }

/* Die Sprachnachricht als abgeschickte Blase, rechtsbündig wie im Messenger */
.handy__blase {
  align-self: flex-end; max-width: 94%;
  background: linear-gradient(135deg, rgba(244,196,156,.22), rgba(232,154,170,.18));
  border: 1px solid rgba(244, 196, 156, .3);
  border-radius: 16px 16px 5px 16px;
  padding: 11px 13px 9px;
  display: flex; flex-direction: column; gap: 5px;
}
.handy__welle { gap: 2.5px; height: 24px; }
.handy__welle span {
  background: linear-gradient(180deg, var(--peach), var(--rose));
  border-radius: 99px; height: 26%;
}
.handy__welle span:nth-child(13) { animation-delay: .96s; }
.handy__welle span:nth-child(14) { animation-delay: 1.04s; }
.handy__dauer {
  font-size: 11px; color: rgba(255,255,255,.55); align-self: flex-end;
  font-variant-numeric: tabular-nums;
}

.handy__marke {
  margin: 4px 0 0; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
.handy__text {
  margin: 0; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08); border-radius: 5px 16px 16px 16px;
  padding: 10px 13px; font-size: 14px; line-height: 1.55; min-height: 3.2em;
}

/* ---------- Die Stationen als Strang ---------- */
.stationen { position: relative; gap: 14px; }
.stationen::before {                   /* die Linie, an der entlang es läuft */
  content: ""; position: absolute; left: 13px; top: 24px; bottom: 24px; width: 2px;
  background: var(--linie); border-radius: 2px;
}
.stationen::after {                    /* der bereits gelaufene Teil */
  content: ""; position: absolute; left: 13px; top: 24px; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--plum-mid), var(--rose));
  border-radius: 2px; transition: height .55s cubic-bezier(.4, 0, .2, 1);
}
.vorfuehr.ist-2 .stationen::after { height: 28%; }
.vorfuehr.ist-3 .stationen::after { height: 58%; }
.vorfuehr.ist-4 .stationen::after { height: 82%; }
.vorfuehr.ist-5 .stationen::after { height: calc(100% - 48px); }

.station {
  background: rgba(255, 255, 255, .55);
  border-color: #EDE4EE; border-radius: 16px;
  padding: 15px 18px;
  transition: border-color .35s, background .35s, opacity .35s, box-shadow .35s, transform .35s;
}
.station.ist-dran {
  background: #fff; border-color: var(--plum-light);
  box-shadow: 0 16px 34px -22px rgba(140, 77, 168, .55);
  transform: translateX(3px);
}
.station.ist-fertig { background: #fff; border-color: #E4D7E6; }

.station__punkt {
  position: relative; z-index: 1;
  background: #fff; box-shadow: 0 0 0 4px var(--paper);
}
.station.ist-dran .station__punkt {
  background: var(--plum-mid); border-color: var(--plum-mid); color: #fff;
  animation: punkt-puls 1.8s ease-in-out infinite;
}
@keyframes punkt-puls {
  50% { box-shadow: 0 0 0 4px var(--paper), 0 0 0 9px rgba(140, 77, 168, .16); }
}
/* Erledigt: Haken statt Ziffer, auf einen Blick lesbar, ohne Farbe allein */
.station.ist-fertig .station__punkt { font-size: 0; }
.station.ist-fertig .station__punkt::after {
  content: ""; width: 10px; height: 6px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

/* ---------- Erkannte Felder ---------- */
.erkannt { gap: 7px; margin-top: 11px; }
.erkannt span {
  background: linear-gradient(135deg, #F3ECF5, #FAF2F6);
  border: 1px solid #E8DCEB; color: var(--plum);
  padding: 5px 12px 5px 9px; display: inline-flex; align-items: center; gap: 6px;
}
.erkannt span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--plum-mid); flex: none;
}

/* ---------- Der Entwurf als Dokument ---------- */
.beleg {
  border-color: #E8DCEB; border-radius: 14px; padding: 0; overflow: hidden;
  box-shadow: 0 14px 30px -20px rgba(30, 8, 51, .4);
  transform: translateY(10px) scale(.985);
}
.beleg.ist-da { transform: none; }
.beleg__kopf {
  background: linear-gradient(90deg, #F6F0F8, #FBF5F8);
  border-bottom: 1px solid #EDE4EE;
  margin: 0; padding: 10px 16px;
  font-size: 12px; letter-spacing: .04em;
}
.beleg__kopf span:last-child {
  background: var(--plum-deep); color: #fff; border-radius: 999px;
  padding: 2px 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
}
.beleg__kunde { margin: 14px 16px 10px; font-size: 16px; }
.beleg__zeile { padding: 4px 16px; color: var(--grau); }
.beleg__summe {
  margin: 10px 0 0; padding: 12px 16px;
  background: linear-gradient(90deg, rgba(140,77,168,.09), rgba(244,196,156,.16));
  border-top: 1px solid #EDE4EE; font-size: 17px;
}

/* ---------- Freigabe ---------- */
.vorfuehr.ist-4 .station:last-child {
  border-color: var(--peach);
  box-shadow: 0 18px 38px -20px rgba(244, 196, 156, .85);
}
.freigabe { margin-top: 14px; }

/* ---------- Steuerleiste ---------- */
.vorfuehr__steuer {
  background: linear-gradient(90deg, #F6F0F8, #FBF5F8);
  border-top-color: #EDE4EE;
}
.vorfuehr__stand b { color: var(--plum); }

@media (max-width: 760px) {
  .handy { position: static; }
  .stationen::before, .stationen::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vorfuehr .station,
  .vorfuehr .station__punkt,
  .vorfuehr .handy__licht { animation: none; transition: none; }
  .vorfuehr .station.ist-dran { transform: none; }
  .vorfuehr .stationen::after { transition: none; }
  .vorfuehr .beleg { transform: none; }
}

/* --- Zwei Messfehler aus dem Feinschliff, beide nachgemessen --------------
   1. Die Wellenform war 33 px breit, die Balken 0 px. Ursache: Die Blase
      schrumpft auf ihren Inhalt, und Balken mit "flex: 1" ohne Grundbreite
      haben in einem geschrumpften Kasten nichts zu verteilen. Sie brauchen
      eine Breite, an der sie sich ausrichten können.
   2. Die Verbindungslinie lag bei 13 px, die Punktmitte aber bei 32 px ,
      und die Linie verschwand ohnehin hinter den weissen Karten, weil das
      Elternelement vor seinen Kindern gezeichnet wird. Statt einer langen
      Linie hinter allem zeichnet jetzt jede Station ihr eigenes kurzes
      Stück in die Lücke darunter. Das sitzt richtig und ist sichtbar. */
.handy__welle { width: 152px; }
.handy__welle span { min-width: 2px; }

.stationen::before, .stationen::after { content: none; }
.station { position: relative; }
.station::after {
  content: ""; position: absolute; left: 32px; top: calc(100% + 1px);
  width: 2px; height: 14px; background: var(--linie);
  transition: background .45s ease;
}
.station:last-child::after { content: none; }
.station.ist-fertig::after { background: var(--plum-mid); }
@media (max-width: 760px) { .station::after { content: none; } }
@media (prefers-reduced-motion: reduce) { .station::after { transition: none; } }

/* "Transkript" war 11 px bei 3,47:1, zweimal unter der Grenze. */
.handy__marke { font-size: 12px; color: rgba(255,255,255,.58); }

/* Restliche 11-px-Stellen auf 12 gebracht. Einzige Ausnahme bleibt die
   Statusleiste des Handys ("9:41" und die Balken): Die ist aria-hidden,
   reine Kulisse und auf einem echten Telefon genauso klein. */
.handy__dauer { font-size: 12px; }
.beleg__kopf span:last-child { font-size: 12px; }