@font-face { font-family: Fredoka; font-weight: 500 600; font-display: swap;
  src: url(fonts/fredoka-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: Fredoka; font-weight: 500 600; font-display: swap;
  src: url(fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Figtree; font-weight: 300 800; font-display: swap;
  src: url(fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: Figtree; font-weight: 300 800; font-display: swap;
  src: url(fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Caveat; font-weight: 400 700; font-display: swap;
  src: url(fonts/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
  --ground: #F7F3EB;
  --surface: #FFFFFF;
  --inset: #F2ECE1;
  --ink: #17181C;
  --muted: #5C606A;
  --line: #E4DDD0;
  --accent: #8F5510;
  --warm1: #FDCA6E;
  --warm2: #FD8A89;
  --nacht: #0C0D11;
  --nacht-2: #15171E;
  --nacht-ink: #F4F3EF;
  --nacht-muted: #9B9EAA;
  --nacht-line: #262A35;
  --schatten: 0 24px 60px rgba(58, 36, 10, .16);
  --schatten-tief: 0 40px 90px rgba(28, 16, 4, .3);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #08090C;
    --surface: #111319;
    --inset: #171A21;
    --ink: #F4F3EF;
    --muted: #9B9EAA;
    --line: #232733;
    --accent: #E9AC54;
    --nacht: #05060A;
    --nacht-2: #0F1117;
    --schatten: 0 24px 60px rgba(0, 0, 0, .55);
    --schatten-tief: 0 40px 90px rgba(0, 0, 0, .7);
  }
}
* { box-sizing: border-box; }
/* overflow-x: clip statt hidden, und auf html statt body.
   hidden auf dem Body macht den Body zum Scroll-Behaelter: Die Seite scrollt
   dann zwar, aber am Fenster kommt kein scroll-Ereignis mehr an, und jede
   Bewegung, die am Scrollstand haengt, steht still. clip schneidet nur ab und
   legt keinen Behaelter an. */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  padding-inline: 20px;
  background: var(--ground);
  color: var(--ink);
  font-family: Figtree, -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 44rem; margin: 0 auto; padding-block: 28px 72px; }
h1, h2, h3, .mark { font-family: Fredoka, Figtree, system-ui, sans-serif; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(30px, 6vw, 42px); line-height: 1.1; margin: 0 0 8px; }
h2 { font-size: 21px; line-height: 1.25; margin: 34px 0 8px; }
p { margin: 0 0 12px; }
a { color: var(--accent); }
ul { margin: 0 0 12px; padding-left: 20px; }
li { margin-bottom: 8px; }
img { max-width: 100%; }
.lede { color: var(--muted); margin-bottom: 4px; }
nav { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; padding-block: 14px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
nav a { text-decoration: none; font-size: 15px; }
nav a:hover { text-decoration: underline; }
.mark { display: inline-flex; align-items: center; gap: 9px; font-size: 21px; color: var(--ink); margin-right: auto; text-decoration: none; }
.mark img { width: 28px; height: 28px; border-radius: 8px; }
.lang { margin-left: auto; border: 1px solid var(--line); border-radius: 99px; padding: 3px 12px; background: var(--surface); }
footer { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer a { margin-right: 14px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; margin-bottom: 20px; }
.card h2:first-child { margin-top: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
@media (max-width: 520px) { body { font-size: 16px; } .wrap { padding-block: 18px 56px; } }

/* ---------- Einblenden beim Scrollen ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity 700ms cubic-bezier(.22,1,.36,1) var(--d, 0ms), transform 700ms cubic-bezier(.22,1,.36,1) var(--d, 0ms); }

/* ---------- Startseite ---------- */
.home { max-width: 72rem; }
.home section { margin-block: clamp(72px, 11vw, 132px); }
.home .story { margin-block: clamp(32px, 4vw, 52px) 0; }
.story h2 { margin-bottom: 10px; }
.story .abschnitt-lede { margin-bottom: 10px; }
.home .dunkel { margin-block: 0 clamp(64px, 10vw, 118px); }
.home h2 { font-size: clamp(27px, 4.6vw, 40px); margin: 0 0 14px; letter-spacing: -.01em; }
.home h3 { font-size: 19px; margin: 0 0 6px; }
.abschnitt-lede { color: var(--muted); max-width: 54ch; margin-bottom: 30px; font-size: 17.5px; }

/* ---------- Das Geraet ---------- */
.device { position: relative; width: var(--w, 250px); aspect-ratio: 9 / 19.5; border-radius: calc(var(--w, 250px) / 7.4); padding: calc(var(--w, 250px) / 44); background: linear-gradient(155deg, #55565F 0%, #2B2C33 22%, #17181D 60%, #34353D 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), var(--schatten-tief); flex: none; }
.device-screen { position: relative; height: 100%; border-radius: calc(var(--w, 250px) / 9); overflow: hidden; background: var(--nacht); }
/* Nur das Bild, das den ganzen Bildschirm fuellt. Ohne den direkten
   Nachfahren traf die Regel auch das Profilbild im nachgebauten Kopf und
   blies es auf Bildschirmgroesse auf. */
.device-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.island { position: absolute; z-index: 3; top: calc(var(--w, 250px) / 28); left: 50%; transform: translateX(-50%); width: 30%; height: calc(var(--w, 250px) / 17); border-radius: 99px; background: #000; }
figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
figcaption { font-size: 13.5px; color: var(--muted); text-align: center; max-width: 24ch; }

/* ---------- Kopf ----------
   Der Kopf blendet nicht beim Scrollen ein, sondern laeuft sofort los. Was
   ueber der Falz steht, muss da sein, bevor jemand scrollt: Ein Einblenden
   verzoegert den ersten Eindruck und laesst die Seite langsam wirken. */
@keyframes auf { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js .hero-text > *, .js .hero-art { animation: auf 700ms cubic-bezier(.22,1,.36,1) backwards; }
.js .hero-text > *:nth-child(1) { animation-delay: 60ms; }
.js .hero-text > *:nth-child(2) { animation-delay: 140ms; }
.js .hero-text > *:nth-child(3) { animation-delay: 220ms; }
.js .hero-text > *:nth-child(4) { animation-delay: 300ms; }
.js .hero-text > *:nth-child(5) { animation-delay: 380ms; }
.js .hero-art { animation-delay: 200ms; animation-duration: 900ms; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(28px, 5vw, 64px); align-items: center; min-height: min(84vh, 760px); margin-block: clamp(8px, 2vw, 28px) clamp(72px, 11vw, 132px); }
.hero h1 { font-size: clamp(36px, 5.6vw, 62px); line-height: 1.02; margin: 16px 0 18px; letter-spacing: -.025em; }
.hero .lede { font-size: clamp(17px, 1.6vw, 20px); max-width: 40ch; margin-bottom: 30px; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 99px; color: var(--accent); background: var(--surface); border: 1px solid var(--line); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(120deg, var(--warm1), var(--warm2)); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cta { position: relative; display: inline-flex; flex-direction: column; gap: 1px; text-decoration: none; padding: 15px 30px; border-radius: 17px; color: #2A1703; background: linear-gradient(100deg, var(--warm1), var(--warm2)); box-shadow: 0 12px 30px rgba(253, 160, 120, .38); transition: transform 160ms ease, box-shadow 160ms ease; overflow: hidden; }
.cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); transform: translateX(-120%); }
.js .cta::after { animation: sheen 5s ease-in-out 1.6s infinite; }
@keyframes sheen { 0%, 64% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }
.cta:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(253, 160, 120, .5); }
.cta-main { font-family: Fredoka, system-ui, sans-serif; font-size: 18px; font-weight: 600; }
.cta-sub { font-size: 13px; opacity: .82; }
.cta-ghost { display: inline-block; padding: 15px 22px; border-radius: 17px; border: 1px solid var(--line); text-decoration: none; font-weight: 600; background: var(--surface); }
.trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 28px 0 0; font-size: 14px; color: var(--muted); }
.trust-row li { display: flex; align-items: center; gap: 7px; margin: 0; }
.trust-row li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }

.hero-art { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 2vw, 22px); }
.glow { position: absolute; inset: -10% -2% 0; pointer-events: none; background: radial-gradient(56% 52% at 50% 46%, rgba(253, 170, 123, .48), transparent 70%); filter: blur(18px); z-index: 0; }
.js .glow { animation: atmen 8s ease-in-out infinite; }
@keyframes atmen { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.hero-paar { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: clamp(8px, 1.6vw, 18px); }
.hero-paar figure:first-child .device { --w: clamp(150px, 16vw, 228px); }
.hero-paar figure:last-child .device { --w: clamp(132px, 14vw, 200px); }
.hero-paar figure:last-child { margin-bottom: clamp(18px, 3vw, 40px); }

/* ---------- Der lebende Bildschirm ---------- */
.live { position: absolute; inset: 0; color: var(--nacht-ink); padding: 11% 7% 7%; font-size: clamp(8.5px, .78vw, 11.5px); display: flex; flex-direction: column; }
.live-top { display: flex; align-items: center; gap: .6em; padding-bottom: .7em; border-bottom: 1px solid var(--nacht-line); }
.live-foto { width: 1.9em; height: 1.9em; border-radius: 50%; object-fit: cover; background: #FFF6E8; flex: none; border: 1px solid rgba(255,255,255,.18); }
.live-top b { font-family: Fredoka, system-ui, sans-serif; font-size: 1.25em; }
.live-sub { margin-left: auto; color: var(--nacht-muted); font-size: .88em; }
.live-list { list-style: none; margin: 0; padding: .4em 0 0; }
.live-row { display: flex; align-items: center; gap: .55em; padding: .62em .2em; margin: 0; border-bottom: 1px solid rgba(38,42,53,.7); border-radius: 4px; }
.live-ic { width: 1.3em; color: var(--warm1); flex: none; display: flex; }
.ic { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ic rect { fill: currentColor; stroke: none; opacity: .92; }
.ic .cut { stroke: var(--nacht); stroke-width: 1.4; }
.live-time { font-variant-numeric: tabular-nums; font-weight: 700; flex: none; }
.live-what { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.live-what b { font-weight: 600; white-space: nowrap; }
.live-what i { font-style: normal; color: var(--nacht-muted); font-size: .86em; white-space: nowrap; }
.live-check { margin-left: auto; width: 1.55em; height: 1.55em; border-radius: 50%; border: 1.5px solid #2E323D; display: grid; place-items: center; flex: none; }
.live-check svg { width: .9em; height: .9em; fill: none; stroke: var(--nacht); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.js .live-check { animation: kreis 10s linear infinite; animation-delay: calc(var(--n) * .5s + var(--v, 0s)); }
@keyframes kreis { 0%, 5% { background: transparent; border-color: #2E323D; transform: scale(1); } 6% { transform: scale(.8); } 8%, 93% { background: #6CC79A; border-color: #6CC79A; transform: scale(1); } 100% { background: transparent; border-color: #2E323D; } }
.js .live-check svg { animation: zeichen 10s linear infinite; animation-delay: calc(var(--n) * .5s + var(--v, 0s)); }
@keyframes zeichen { 0%, 6% { opacity: 0; } 9%, 93% { opacity: 1; } 100% { opacity: 0; } }
.live-toast { display: flex; gap: .7em; align-items: center; margin-top: .7em; padding: .7em .8em; border-radius: 1em; background: var(--nacht-2); border: 1px solid var(--nacht-line); opacity: 0; }
.js .live-toast { animation: melden 10s ease-in-out infinite; animation-delay: var(--v, 0s); }
@keyframes melden { 0%, 30% { opacity: 0; transform: translateY(8px); } 38%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(8px); } }
.live-bell { width: 1.4em; color: var(--warm1); flex: none; display: flex; }
.live-bell svg { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.live-toast b { display: block; font-weight: 600; }
.live-toast i { font-style: normal; color: var(--nacht-muted); font-size: .86em; }
.live-tabs { display: flex; justify-content: space-between; gap: .3em; margin-top: auto; padding-top: .8em; border-top: 1px solid var(--nacht-line); color: var(--nacht-muted); font-size: .82em; }
.live-tabs .an { color: var(--warm1); font-weight: 700; }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.home .card { margin-bottom: 0; }
.problem { border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.problem h3 { color: var(--accent); }
.problem p { color: var(--muted); margin-bottom: 0; }

/* ---------- Die drei Schritte ---------- */
.story-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 70px); align-items: start; }
/* Das Telefon steht fest in der Mitte, die Texte laufen daran vorbei.

   Die Fassung davor liess das Geraet mitwandern. Das klang gut, sah aber
   schlecht aus: Mal stand die Unterkante neben Schritt 1, mal die Oberkante
   neben Schritt 2, dazwischen schwebte es frei zwischen den Texten. Ein
   ruhender Bezugspunkt ist hier das Richtige, und genau deshalb bekommt
   jeder Schritt genau eine Fensterhoehe: So steht immer genau ein Text
   neben dem Geraet, nie zwei halbe. */
.story-visual { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding-top: 26px; }
.story-visual .device { --w: clamp(200px, 21vw, 268px); }
.screens { position: absolute; inset: 0; display: flex; width: 300%; transform: translateX(calc(var(--k, 0) * -33.3333%)); transition: transform 620ms cubic-bezier(.65,0,.35,1); }
.screens img { width: 33.3333%; height: 100%; object-fit: cover; object-position: top; }
.rail { display: flex; gap: 8px; }
.rail span { width: 30px; height: 4px; border-radius: 99px; background: var(--line); transition: background 400ms ease; }
.rail span.on { background: var(--accent); }

/* Wo der Browser scrollgesteuerte Animationen kennt, laufen Bildwechsel und
   Abdunklung ohne JavaScript, also ohne scroll-Ereignis und ohne Beobachter.
   steps(3, jump-none) schaltet den Streifen in Dritteln weiter, statt ihn
   durchzuschieben: Sonst saehe man unterwegs zwei halbe Bildschirme. */
@supports (animation-timeline: view()) {
  .story-grid { view-timeline-name: --wanderung; view-timeline-axis: block; }
  /* Bis 130 Prozent statt 100: Die Schaltpunkte von steps(3) liegen dann bei
     43 und 87 Prozent, also genau dort, wo der zweite und der dritte Text die
     Mitte erreichen. Ueber 100 Prozent gerechnet lief das Bild dem Text um
     rund ein Fuenftel der Strecke voraus. */
  .screens { animation: blaettern steps(3, jump-none) both; animation-timeline: --wanderung; animation-range: contain 0% contain 130%; transition: none; }
  /* 66,667 Prozent der Streifenbreite sind zwei Geraetebreiten. -100% waere
     die volle Streifenbreite, also dreimal zu weit. */
  @keyframes blaettern { from { transform: translateX(0); } to { transform: translateX(-66.6667%); } }
  .story-visual { animation: verabschieden linear both; animation-timeline: --wanderung; animation-range: contain 86% contain 100%; }
  @keyframes verabschieden {
    from { opacity: 1; filter: blur(0); }
    to { opacity: .25; filter: blur(5px); }
  }
  .step { view-timeline-name: --schritt; view-timeline-axis: block; }
  .step-inner { animation: hervor linear both; animation-timeline: --schritt; animation-range: cover 15% cover 85%; }
  @keyframes hervor {
    0% { opacity: .22; filter: blur(3px); }
    38%, 62% { opacity: 1; filter: blur(0); }
    100% { opacity: .22; filter: blur(3px); }
  }
}
.story-steps { list-style: none; margin: 0; padding-block: 27vh 42vh; padding-inline: 0; counter-reset: schritt; }
.step { margin: 0; }
/* Jeder Schritt bekommt eine Mindesthoehe von gut drei Vierteln des Fensters.
   Ohne sie war die gesamte Klebestrecke nur rund 500 Pixel lang: Das Telefon
   legte seinen Weg in zwei, drei Umdrehungen des Mausrads zurueck und wirkte
   wie ein Sprung. Jetzt sind es ueber tausend Pixel, und der Text sitzt
   ausserdem mittig neben dem Geraet statt oben. */
.step-inner { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(14px, 2vh, 26px); }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-family: Fredoka, system-ui, sans-serif; font-size: 14px; font-weight: 600; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
.step h3 { font-size: clamp(22px, 2.7vw, 30px); margin: 14px 0 12px; }
.step p { color: var(--muted); max-width: 46ch; margin-bottom: 0; }
.step-shot { display: none; margin-top: 24px; }
.js.io-live .step-inner { opacity: .24; filter: blur(3px); transition: opacity 450ms ease, filter 450ms ease; }
.js.io-live .step.here .step-inner { opacity: 1; filter: none; }

/* ---------- Dunkler Abschnitt ---------- */
/* Volle Breite ohne Ueberlauf: 100vw zaehlt die Bildlaufleiste mit, deshalb
   wird sie in --sbw gemessen und wieder abgezogen. Ohne JavaScript bleibt der
   alte Wert, den overflow-x: clip auffaengt. */
.dunkel { position: relative; width: calc(100vw - var(--sbw, 0px)); margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2); padding: clamp(60px, 9vw, 110px) 20px; background: var(--nacht); color: var(--nacht-ink); overflow: hidden; }
.dunkel::before { content: ""; position: absolute; inset: -30% -10% auto; height: 70%; background: radial-gradient(45% 60% at 70% 40%, rgba(253,170,123,.2), transparent 70%); }
.dunkel-innen { position: relative; max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.dunkel h2 { color: var(--nacht-ink); }
.dunkel p { color: var(--nacht-muted); }
.dunkel .ticks li { color: var(--nacht-muted); }
.dunkel .ticks li::before { color: var(--warm1); }
.blatt { border-radius: 10px; overflow: hidden; box-shadow: var(--schatten-tief); border: 1px solid rgba(255,255,255,.08); transform: perspective(1400px) rotateY(-7deg) rotateX(1.5deg); transition: transform 600ms cubic-bezier(.22,1,.36,1); }
.blatt:hover { transform: perspective(1400px) rotateY(-2deg); }
.blatt img { display: block; width: 100%; height: auto; }
.blatt-figur { gap: 16px; }
.dunkel figcaption { color: var(--nacht-muted); max-width: 34ch; }
.ticks { list-style: none; padding: 0; margin: 18px 0 0; }
.ticks li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 10px; color: var(--muted); }
.ticks li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }

/* ---------- Preis ---------- */
.price-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px; }
.plan-pro { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--schatten); }
.plan-tag { position: absolute; top: -12px; left: 28px; font-size: 12px; font-weight: 700; padding: 4px 13px; border-radius: 99px; color: #2A1703; background: linear-gradient(100deg, var(--warm1), var(--warm2)); }
.plan-name { font-family: Fredoka, system-ui, sans-serif; font-size: 19px; font-weight: 600; color: var(--muted); }
.plan-price { font-family: Fredoka, system-ui, sans-serif; font-size: clamp(34px, 4vw, 44px); font-weight: 600; line-height: 1.05; margin: 6px 0 2px; }
.plan-price small { font-family: Figtree, system-ui, sans-serif; font-size: 15px; font-weight: 400; color: var(--muted); }
.plan-jahr { font-size: 15px; color: var(--muted); margin: 0 0 4px; }
.plan-jahr s { opacity: .65; }
.sparen { display: inline-block; align-self: flex-start; font-size: 13.5px; font-weight: 700; color: #2F6B4F; background: rgba(108,199,154,.18); padding: 4px 11px; border-radius: 99px; margin: 8px 0 2px; }
@media (prefers-color-scheme: dark) { .sparen { color: #8FDCB4; background: rgba(108,199,154,.14); } }
.plan-merkmale { list-style: none; padding: 0; margin: 16px 0 0; flex: 1; }
.plan-merkmale li { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 10px; color: var(--muted); font-size: 15.5px; }
.plan-merkmale li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }
.plan-merkmale li.aus { opacity: .5; }
.plan-merkmale li.aus::before { content: "·"; color: var(--muted); }
.price .foot { margin-top: 18px; font-size: 14px; color: var(--muted); max-width: 64ch; }

.person p { color: var(--muted); max-width: 62ch; }
.closing { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: clamp(32px, 5vw, 60px); }
.closing p { color: var(--muted); max-width: 54ch; margin-inline: auto; margin-bottom: 26px; }
.closing .cta { text-align: left; }
.medizin { font-size: 13.5px; margin-top: 30px; margin-bottom: 0; }

@media (max-width: 900px) {
  .hero, .dunkel-innen { grid-template-columns: minmax(0, 1fr); }
  .hero { min-height: 0; }
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-visual { display: none; }
  /* Vor- und Nachlauf richten das Telefon aus. Ohne Telefon sind sie nur
     Leerraum, und der Nachlauf von 42vh waere ein Loch am Abschnittsende. */
  .story-steps { padding-block: 0; }
  .step-shot { display: flex; justify-content: center; }
  .step-inner { min-height: 0; padding-block: 26px; }
  .js.io-live .step-inner { opacity: 1; filter: none; }
  .step-inner { animation: none; opacity: 1; filter: none; min-height: 0; }
  .hero-art { margin-top: 14px; }
  .blatt { transform: none; }
}
@media (max-width: 560px) {
  .hero-paar figure:first-child .device { --w: min(168px, 44vw); }
  .hero-paar figure:last-child .device { --w: min(146px, 38vw); }
}



/* ---------- Die Geschichte, mit Zettel und Nachricht ---------- */
.geschichte { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.geschichte p { color: var(--muted); max-width: 52ch; }
.signatur { font-family: Fredoka, system-ui, sans-serif; color: var(--ink); margin-top: 18px; }
.signatur::before { content: ""; display: block; width: 34px; height: 2px; background: var(--accent); margin-bottom: 12px; }
.geschichte-art { position: relative; display: flex; flex-direction: column; align-items: center; }
.zettel { width: min(300px, 82%); background: #FFFDF5; color: #2B2620; border-radius: 3px; padding: 22px 24px 26px; transform: rotate(-2.4deg); box-shadow: var(--schatten); font-family: Caveat, "Segoe Script", cursive; font-size: 22px; line-height: 1.75; background-image: repeating-linear-gradient(transparent, transparent 37px, rgba(120,110,90,.22) 37px, rgba(120,110,90,.22) 38px); }
.zettel-kopf { font-weight: 700; font-size: 25px; border-bottom: 2px solid rgba(120,110,90,.35); padding-bottom: 2px; margin-bottom: 8px; }
.zettel-zeile { position: relative; }
.zettel-zeile.ab { color: #6B6459; }
.zettel-zeile.ab::after { content: ""; position: absolute; left: -4px; right: 18%; top: 52%; height: 2px; background: #6B6459; transform: rotate(-1.2deg); }
.zettel-zeile.frage { color: #A8451F; }
.zettel-zeile.frage::after { content: "?"; margin-left: 8px; font-weight: 700; }
.chat { display: flex; flex-direction: column; gap: 8px; width: min(300px, 82%); margin-top: -18px; margin-left: auto; transform: rotate(1.4deg); }
.blase { max-width: 84%; padding: 9px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.4; box-shadow: 0 6px 16px rgba(50,32,10,.1); }
.blase.hin { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; color: var(--ink); }
.blase.her { align-self: flex-end; background: #DCF3C9; border-bottom-right-radius: 5px; color: #24331A; }
@media (prefers-color-scheme: dark) { .blase.her { background: #1F3A2A; color: #CFE9D8; } }
.js .reveal.in .zettel { animation: kippen 900ms cubic-bezier(.22,1,.36,1) backwards; }
@keyframes kippen { from { opacity: 0; transform: rotate(-9deg) translateY(18px); } to { opacity: 1; transform: rotate(-2.4deg); } }
.js .reveal.in .blase { animation: auf 600ms cubic-bezier(.22,1,.36,1) backwards; }
.js .reveal.in .blase.hin { animation-delay: 420ms; }
.js .reveal.in .blase.her { animation-delay: 760ms; }

/* ---------- Fuer wen ---------- */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
.chips li { margin: 0; display: flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 15.5px; }
.chips li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.chips.klein li { font-size: 14.5px; padding: 7px 13px; background: var(--inset); }

/* Die Vorteile des kostenlosen Teils, in Spalten statt als Wortschlange:
   Der Satz daneben lief ueber drei Zeilen, waehrend rechts Platz frei blieb. */
/* Feste drei Spalten statt auto-fit: Bei sechs Punkten ergibt auto-fit auf
   breiten Schirmen vier plus zwei und sieht abgerissen aus. */
.frei-liste { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 30px; padding: 0; margin: 26px 0 0; }
@media (max-width: 900px) { .frei-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .frei-liste { grid-template-columns: minmax(0, 1fr); } }
.frei-liste li { margin: 0; padding-left: 26px; position: relative; }
.frei-liste li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.frei-liste b { display: block; font-weight: 700; }
.frei-liste span { color: var(--muted); font-size: 15px; }

/* ---------- Der kostenlose Teil, fuer sich ---------- */
.frei { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 3vw, 32px); box-shadow: var(--schatten); }
.frei-kopf { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 10px 40px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.frei-name { font-family: Fredoka, system-ui, sans-serif; font-size: 19px; color: var(--muted); }
.frei-preis { font-family: Fredoka, system-ui, sans-serif; font-size: clamp(34px, 4vw, 46px); font-weight: 600; line-height: 1.05; }
.frei-satz { color: var(--muted); margin: 0; max-width: 52ch; font-size: 17px; }
.mehr { margin: 34px 0 18px; color: var(--muted); max-width: 58ch; }
/* Fett allein reicht in gedaempftem Grau nicht: der Satz bekommt auch die
   volle Schriftfarbe, sonst liest er sich nur als etwas dickeres Grau. */
.abschnitt-lede strong, .mehr strong { color: var(--ink); font-weight: 700; }

@media (max-width: 900px) {
  .frei-kopf { grid-template-columns: minmax(0, 1fr); }
  .geschichte { grid-template-columns: minmax(0, 1fr); }
  .geschichte-art { margin-top: 10px; }
  .chat { margin-left: 0; }
}