/* Teilit Pro und die animierte Startseite (ab Live).
   ===========================================================================
   Gehört zu `/pro` und zur Startseite. Liegt neben `marketing.css` und ändert
   keinen bestehenden Selektor; was jede Seite braucht (die tiefe Pro-Fläche,
   die PRO-Marke, die Pro-Karte im Fuß) steht in `marketing.css`.

   DIE ABBILDUNGEN SIND DIE APP
   Jeder Bildschirm ist aus den Maßen der App nachgebaut (`web/src`: Zeile 56 px,
   Kreis 26 px, Titel 26 px, Eingabezeile 48 px, Live-Streifen 52 px, Schrift-
   skala 13/15/17/20/26/32). Die Maße stehen in `--u` (ein App-Pixel bei 390 px
   Breite), damit das Telefon in jeder Breite so aussieht wie das echte.
   Die vier Bilder in den Pro-Karten sind die der App selbst (`ProBlatt.tsx`,
   Abschnitt „Die Bilder im Pro-Blatt" in `web/src/index.css`): gleiche Zeiten,
   gleiche Wege, gleiche Kurven.

   BEWEGUNG - die Regeln
   - Der Endzustand ist der Standard. Nichts ist im Grundzustand per `opacity: 0`
     versteckt; die Animation läuft vom Anfangsbild dorthin.
   - Jede Szene (`.sc`) läuft genau einmal, wenn sie in den Sichtbereich kommt,
     und bleibt stehen. `animieren.js` setzt dafür `html.anim` (nur ohne
     `prefers-reduced-motion`) und gibt der Szene die Klasse `an`.
   - Vorher steht jede Animation auf „paused" (`--ps`) und zeigt per
     `backwards`-Füllung ihr Anfangsbild. Ohne Skript, ohne `html.anim`: keine
     Animation, sofort der Endzustand.
   - Nur `transform`, `opacity` und Farbe. */

/* ── Werte ─────────────────────────────────────────────────────────────────── */
:root {
  /* Die sieben Töne (web/src/aussehen.ts), je hell und dunkel. */
  --f0: #4b6b3a;
  --f1: #1d5fd0;
  --f2: #0f6b57;
  --f3: #6a4c93;
  --f4: #9c3a63;
  --f5: #9a5423;
  --f6: #2c3e50;
  --c-mitteilung: rgb(255 255 255 / 0.9);
  --c-mitteilung-text: #2b2620;
  --problatt-start: 200ms;
  --problatt-ease-in: cubic-bezier(0.55, 0, 0.9, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not(.hell) {
    --f0: #8fb574;
    --f1: #93b8ff;
    --f2: #6fcbae;
    --f3: #bfa5e8;
    --f4: #ec9cbb;
    --f5: #e0a46e;
    --f6: #9fb6cc;
    --c-mitteilung: color-mix(in srgb, #f3eee6 17%, transparent);
    --c-mitteilung-text: #f3eee6;
  }
}
:root.dunkel {
  --f0: #8fb574;
  --f1: #93b8ff;
  --f2: #6fcbae;
  --f3: #bfa5e8;
  --f4: #ec9cbb;
  --f5: #e0a46e;
  --f6: #9fb6cc;
  --c-mitteilung: color-mix(in srgb, #f3eee6 17%, transparent);
  --c-mitteilung-text: #f3eee6;
}
/* Drei Farben, damit der Fluss von oben nach unten läuft: Kopf, Haken, Knopf. */
@property --za {
  syntax: '<color>';
  inherits: true;
  initial-value: #9c3a63;
}
@property --zb {
  syntax: '<color>';
  inherits: true;
  initial-value: #9c3a63;
}
@property --zc {
  syntax: '<color>';
  inherits: true;
  initial-value: #9c3a63;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.ic {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic--voll {
  fill: currentColor;
  stroke: none;
}

/* ── Mechanik ──────────────────────────────────────────────────────────────── */
html.anim .sc {
  --ps: paused;
}
html.anim .sc.an {
  --ps: running;
}

/* ═══════════════════════════════════════════════════════════════
   DAS TELEFON - ein Bildschirm der App
   ═══════════════════════════════════════════════════════════════ */
.app {
  --u: calc(100cqw / 390);
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 28px;
  background: var(--c-bg);
  color: var(--c-text);
  box-shadow:
    0 1px 2px #0000000f,
    0 18px 40px -26px #0000004d;
}
.app *,
.app *::before,
.app *::after {
  box-sizing: border-box;
}
.app svg {
  flex: none;
}
.app__kopf {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(8 * var(--u)) calc(20 * var(--u));
}
.app__menu {
  display: flex;
  flex: none;
  width: calc(35 * var(--u));
  color: var(--c-text);
}
.app__menu svg {
  width: calc(20 * var(--u));
  height: calc(14 * var(--u));
}
.app__titel {
  flex: 1;
  min-width: 0;
  padding-left: calc(2 * var(--u));
}
.app__h {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-size: calc(26 * var(--u));
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  white-space: nowrap;
}
.app__h .sym {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  color: var(--c-accent);
}
.app__h .pfeil {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  margin-left: calc(-4 * var(--u));
  color: var(--c-muted);
}
.app__unter {
  font-size: calc(13 * var(--u));
  line-height: 1.4;
  color: var(--c-muted);
  white-space: nowrap;
}
.app__av {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-fg);
  font-size: calc(13 * var(--u));
  font-weight: 700;
}
.app__av .pro-marke {
  position: absolute;
  left: 50%;
  bottom: calc(-6 * var(--u));
  transform: translateX(-50%);
  border: calc(2 * var(--u)) solid var(--c-bg);
  font-size: calc(8 * var(--u));
}
.app__pille {
  display: inline-flex;
  align-items: center;
  gap: calc(4 * var(--u));
  min-height: calc(36 * var(--u));
  margin: calc(10 * var(--u)) 0 calc(12 * var(--u)) calc(16 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(12 * var(--u));
  border: 1px solid var(--c-line);
  border-radius: calc(12 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 500;
  color: var(--c-muted);
}
.app__pille svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}
.app__liste {
  border-top: 1px solid var(--c-line);
  background: var(--c-surface);
}
.app__zeile {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: calc(57 * var(--u));
  padding-left: calc(8 * var(--u));
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface);
}
.app__feld {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(44 * var(--u));
  height: calc(56 * var(--u));
}
.app__kreis {
  display: grid;
  place-items: center;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border: max(1px, calc(2 * var(--u))) solid var(--c-ring);
  border-radius: 50%;
}
.app__kreis svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  stroke-width: 3;
  color: var(--c-accent-fg);
  opacity: 0;
}
.app__zeile--erl .app__kreis {
  border-color: var(--c-accent);
  background: var(--c-accent);
}
.app__zeile--erl .app__kreis svg {
  opacity: 1;
}
.app__text {
  flex: 1;
  min-width: 0;
  padding: calc(16 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u)) calc(2 * var(--u));
  font-size: calc(17 * var(--u));
  line-height: calc(24 * var(--u));
  overflow-wrap: anywhere;
}
.app__text--u {
  padding-top: calc(9 * var(--u));
  padding-bottom: calc(7 * var(--u));
  line-height: 1.35;
}
.app__sub {
  display: block;
  font-size: calc(13 * var(--u));
  line-height: 1.4;
  color: var(--c-muted);
}
.app__zeile--erl .app__t {
  color: var(--c-muted);
  text-decoration: line-through;
  text-decoration-thickness: max(1px, calc(1.5 * var(--u)));
}
.app__ico {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(44 * var(--u));
  height: calc(56 * var(--u));
  color: var(--c-muted);
}
.app__ico svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.app__zeile--erl .app__ico--griff {
  opacity: 0;
}
.nb *,
.nb *::before,
.nb *::after {
  box-sizing: border-box;
}
@keyframes ab-griff {
  from { opacity: 1; }
}
html.anim .app__zeile--r .app__ico--griff {
  animation: ab-griff 300ms linear 2600ms backwards;
  animation-play-state: var(--ps);
}
.app__boden {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(86 * var(--u));
}
.app__live {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: calc(52 * var(--u));
  margin: 0 calc(14 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--c-accent);
  color: var(--c-accent-fg);
  font-size: calc(15 * var(--u));
  font-weight: 600;
  line-height: 1.45;
}
.app__live svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}
.app__eingabe {
  margin-top: 1px;
  padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  border-top: 1px solid var(--c-line);
  background: var(--c-surface);
}
.app__box {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(48 * var(--u));
  padding: calc(8 * var(--u)) calc(56 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u));
  border: 1px solid var(--c-line);
  border-radius: calc(12 * var(--u));
  background: var(--c-surface);
  font-size: calc(17 * var(--u));
  color: var(--c-muted);
}
.app__box--fokus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 calc(3 * var(--u)) color-mix(in srgb, var(--c-accent) 22%, transparent);
}
.app__ph {
  flex: 1;
}
.app__tipp {
  position: absolute;
  top: 0;
  right: calc(56 * var(--u));
  bottom: 0;
  left: calc(14 * var(--u));
  display: flex;
  align-items: center;
  color: var(--c-text);
  white-space: nowrap;
  opacity: 0;
}
.app__tipp i {
  font-style: normal;
}
.app__senden {
  position: absolute;
  top: 50%;
  right: calc(6 * var(--u));
  display: grid;
  place-items: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  margin-top: calc(-18 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--c-accent);
  color: var(--c-accent-fg);
  opacity: 0;
}
.app__senden svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  stroke-width: 2.5;
}

/* Der Farbfluss im Hero: Kopf, Haken und Knopf laufen nacheinander durch alle sieben Töne und
   bleiben bei Beere stehen. Endzustand ist Beere. */
.app--fluss {
  --za: var(--f4);
  --zb: var(--f4);
  --zc: var(--f4);
}
.app--fluss .app__av {
  background: var(--za);
}
.app--fluss .app__h .sym {
  color: var(--za);
}
.app--fluss .app__av .pro-marke {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--za) 40%, transparent), transparent 60%),
    color-mix(in srgb, var(--za) 62%, #0e0c0a);
}
.app--fluss .app__zeile--erl .app__kreis {
  border-color: var(--zb);
  background: var(--zb);
}
.app--fluss .app__live,
.app--fluss .app__senden {
  background: var(--zc);
}
.app--fluss .app__box--fokus {
  border-color: var(--zc);
}
@keyframes fluss-a {
  0%, 4% { --za: var(--f0); }
  14.29%, 18.29% { --za: var(--f1); }
  28.57%, 32.57% { --za: var(--f2); }
  42.86%, 46.86% { --za: var(--f3); }
  57.14%, 61.14% { --za: var(--f5); }
  71.43%, 75.43% { --za: var(--f6); }
  85.71%, 100% { --za: var(--f4); }
}
@keyframes fluss-b {
  0%, 4% { --zb: var(--f0); }
  14.29%, 18.29% { --zb: var(--f1); }
  28.57%, 32.57% { --zb: var(--f2); }
  42.86%, 46.86% { --zb: var(--f3); }
  57.14%, 61.14% { --zb: var(--f5); }
  71.43%, 75.43% { --zb: var(--f6); }
  85.71%, 100% { --zb: var(--f4); }
}
@keyframes fluss-c {
  0%, 4% { --zc: var(--f0); }
  14.29%, 18.29% { --zc: var(--f1); }
  28.57%, 32.57% { --zc: var(--f2); }
  42.86%, 46.86% { --zc: var(--f3); }
  57.14%, 61.14% { --zc: var(--f5); }
  71.43%, 75.43% { --zc: var(--f6); }
  85.71%, 100% { --zc: var(--f4); }
}
@keyframes etikett-rastet {
  from { opacity: 0; transform: translateY(14px) scale(0.6); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.08); }
}
html.anim .app--fluss {
  animation:
    fluss-a 4.2s ease-in-out backwards,
    fluss-b 4.2s ease-in-out 150ms backwards,
    fluss-c 4.2s ease-in-out 300ms backwards;
  animation-play-state: var(--ps);
}
html.anim .etikett {
  animation: etikett-rastet 520ms cubic-bezier(0.3, 1.7, 0.5, 1) 4s backwards;
  animation-play-state: var(--ps);
}
.etikett {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px 0 10px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: var(--c-surface);
  font-size: var(--fs-small);
  font-weight: 700;
  box-shadow: 0 1px 2px #0000000f;
}
.etikett i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--f4);
  color: var(--c-accent-fg);
}
.etikett i svg {
  width: 12px;
  height: 12px;
  stroke-width: 3.4;
}

/* ═══════════════════════════════════════════════════════════════
   START: das Paar im selben Moment (Jonas tippt, Anna sieht es live)
   Ablauf in ms: Jonas tippt 400 bis 1150, schickt 1250; bei Anna kommt der Streifen
   und der Eintrag 1500; Jonas hakt „Brot" ab 2600, bei Anna im selben Moment, der
   Eintrag rutscht ans Ende (so sortiert die App seit 07.09.2026).
   ═══════════════════════════════════════════════════════════════ */
.paar {
  display: grid;
  gap: 24px;
  justify-items: center;
}
@media (min-width: 760px) {
  .paar {
    grid-template-columns: repeat(2, minmax(0, 340px));
    justify-content: center;
    align-items: start;
    gap: 40px;
  }
}
.paar__geraet {
  width: 100%;
  max-width: 340px;
  margin: 0;
}
.paar__name {
  margin-bottom: 11px;
  font-weight: 700;
}
.paar__mitte {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}
.paar figcaption {
  margin-top: 12px;
  font-size: var(--fs-small);
  color: var(--c-muted);
}
/* Endzustand: Butter steht vor „Brot" in der Liste, Brot ist abgehakt und liegt unten. Der
   Anfang der Animation verschiebt beide um eine Zeile (57 App-Pixel) zurück. */
.app__zeile--b,
.app__zeile--r {
  will-change: transform;
}
.app__live--2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}
.app__live--1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
}
/* Die Zahl im Untertitel: 4 offen, mit Butter 5, mit abgehaktem Brot wieder 4. */
.app__zahl {
  display: inline-grid;
}
.app__zahl > span {
  grid-area: 1 / 1;
}
.app__zahl .z0,
.app__zahl .z1 {
  opacity: 0;
}
.app__zahl .z2 {
  opacity: 1;
}
.app__subs {
  display: grid;
}
.app__subs > span {
  grid-area: 1 / 1;
}
.app__sub--von {
  opacity: 0;
}
.app__pille {
  align-self: flex-start;
}
.app__boden .app__live-box {
  position: relative;
  min-height: calc(52 * var(--u));
  margin: 0 calc(14 * var(--u));
}
.app__live-box .app__live {
  margin: 0;
}
@keyframes a-butter {
  0%, 46% { opacity: 0; transform: translateY(calc(57 * var(--u))); }
  56%, 81% { opacity: 1; transform: translateY(calc(57 * var(--u))); }
  95%, 100% { opacity: 1; transform: none; }
}
@keyframes j-butter {
  0%, 38% { opacity: 0; transform: translateY(calc(57 * var(--u))); }
  47%, 81% { opacity: 1; transform: translateY(calc(57 * var(--u))); }
  95%, 100% { opacity: 1; transform: none; }
}
@keyframes ab-brot {
  0%, 81% { transform: translateY(calc(-57 * var(--u))); }
  95%, 100% { transform: none; }
}
@keyframes ab-blitz {
  from { background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface)); }
}
@keyframes ab-kreis {
  from { background: transparent; border-color: var(--c-ring); }
}
@keyframes ab-haken {
  from { opacity: 0; transform: scale(0.5); }
}
@keyframes ab-streichen {
  from { color: var(--c-text); text-decoration-color: transparent; }
}
@keyframes ab-erscheint {
  from { opacity: 0; transform: translateY(-4px); }
}
@keyframes ab-live1 {
  0%, 44% { opacity: 0; transform: translateY(18px); }
  52%, 78% { opacity: 1; transform: none; }
  84%, 100% { opacity: 0; transform: none; }
}
@keyframes ab-live2 {
  0%, 82% { opacity: 0; transform: translateY(6px); }
  90%, 100% { opacity: 1; transform: none; }
}
@keyframes za0 { 0%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes za1 { 0%, 46% { opacity: 0; } 47%, 81% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes zj0 { 0%, 38% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes zj1 { 0%, 38% { opacity: 0; } 40%, 81% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes zz2 { 0%, 81% { opacity: 0; } 82%, 100% { opacity: 1; } }
@keyframes ab-von-weg { 0%, 81% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes ab-tipp {
  0%, 90% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ab-ph {
  0%, 6% { opacity: 1; }
  8%, 92% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes ab-senden {
  0% { opacity: 0; transform: scale(0.8); }
  10%, 78% { opacity: 1; transform: scale(1); }
  88% { opacity: 1; transform: scale(0.84); }
  100% { opacity: 0; transform: scale(0.84); }
}
@keyframes ab-buchstabe {
  from { opacity: 0; }
}
@keyframes ab-fokus {
  0%, 8% { border-color: var(--c-line); box-shadow: 0 0 0 0 transparent; }
  16%, 100% {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 calc(3 * var(--u)) color-mix(in srgb, var(--c-accent) 22%, transparent);
  }
}
@keyframes ab-pop {
  from { opacity: 0; transform: scale(0.7); }
}
html.anim .app__zeile--b-anna {
  animation: a-butter 3.2s var(--ease-out) backwards, ab-blitz 1000ms ease-out 1500ms backwards;
  animation-play-state: var(--ps);
}
html.anim .app__zeile--b-jonas {
  animation: j-butter 3.2s var(--ease-out) backwards;
  animation-play-state: var(--ps);
}
html.anim .app__zeile--r {
  animation: ab-brot 3.2s var(--ease-out) backwards;
  animation-play-state: var(--ps);
}
html.anim .app__zeile--r .app__kreis {
  animation: ab-kreis 300ms var(--ease-out) 2600ms backwards;
  animation-play-state: var(--ps);
}
html.anim .app__zeile--r .app__kreis svg {
  animation: ab-haken 300ms var(--ease-out) 2600ms backwards;
  animation-play-state: var(--ps);
}
html.anim .app__zeile--r .app__t {
  animation: ab-streichen 300ms var(--ease-out) 2600ms backwards;
  animation-play-state: var(--ps);
}
html.anim .app__zeile--r .app__sub--erl {
  animation: ab-erscheint 300ms var(--ease-out) 2700ms backwards;
  animation-play-state: var(--ps);
}
html.anim .app__live--1 {
  animation: ab-live1 3.2s var(--ease-out) backwards;
  animation-play-state: var(--ps);
}
html.anim .app__live--2 {
  animation: ab-live2 3.2s var(--ease-out) backwards;
  animation-play-state: var(--ps);
}
html.anim .app__zahl--a .z0 { animation: za0 3.2s linear backwards; animation-play-state: var(--ps); }
html.anim .app__zahl--a .z1 { animation: za1 3.2s linear backwards; animation-play-state: var(--ps); }
html.anim .app__zahl--j .z0 { animation: zj0 3.2s linear backwards; animation-play-state: var(--ps); }
html.anim .app__zahl--j .z1 { animation: zj1 3.2s linear backwards; animation-play-state: var(--ps); }
html.anim .app__zahl .z2 { animation: zz2 3.2s linear backwards; animation-play-state: var(--ps); }
html.anim .app__sub--von { animation: ab-von-weg 3.2s linear backwards; animation-play-state: var(--ps); }
html.anim .app__pille--spaet { animation: ab-erscheint 300ms var(--ease-out) 2600ms backwards; animation-play-state: var(--ps); }
html.anim .app__tipp {
  animation: ab-tipp 1250ms linear backwards;
  animation-play-state: var(--ps);
}
html.anim .app__ph--j {
  animation: ab-ph 1250ms linear backwards;
  animation-play-state: var(--ps);
}
html.anim .app__senden--j {
  animation: ab-senden 1250ms var(--ease-out) backwards;
  animation-play-state: var(--ps);
}
html.anim .app__box--j {
  animation: ab-fokus 1250ms linear backwards;
  animation-play-state: var(--ps);
}
html.anim .app__tipp i {
  animation: ab-buchstabe 80ms ease-out backwards;
  animation-play-state: var(--ps);
}
html.anim .app__tipp i:nth-child(1) { animation-delay: 400ms; }
html.anim .app__tipp i:nth-child(2) { animation-delay: 530ms; }
html.anim .app__tipp i:nth-child(3) { animation-delay: 660ms; }
html.anim .app__tipp i:nth-child(4) { animation-delay: 790ms; }
html.anim .app__tipp i:nth-child(5) { animation-delay: 920ms; }
html.anim .app__tipp i:nth-child(6) { animation-delay: 1050ms; }
html.anim .paar__mitte .chip {
  animation: ab-pop 420ms cubic-bezier(0.34, 1.5, 0.64, 1) 2800ms backwards;
  animation-play-state: var(--ps);
}

/* ═══════════════════════════════════════════════════════════════
   START: Szenarien, Neu in Teilit, Schritte, Pro-Hinweis
   ═══════════════════════════════════════════════════════════════ */
.szenen {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 9vw, 88px) 20px;
}
.szenen__kopf {
  max-width: 46ch;
  margin-bottom: clamp(30px, 5vw, 52px);
}
.szenen__kopf h2,
.sektion h2.gross {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
  margin-bottom: 10px;
}
.szenen__unter {
  color: var(--c-muted);
  text-wrap: pretty;
}
.szenen__raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content: start;
  gap: clamp(30px, 4vw, 52px);
}
@media (max-width: 860px) {
  .szenen__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(34px, 8vw, 48px);
    justify-items: center;
  }
}
.szene-c {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 380px;
}
.szene-c h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.szene-c p {
  color: var(--c-muted);
  text-wrap: pretty;
}
.szene-c__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
}
.szene-c__kopf .plakette {
  width: 40px;
  height: 40px;
}
.szene-c__kopf .plakette svg {
  width: 22px;
  height: 22px;
}
@keyframes karte-hoch {
  from { opacity: 0; transform: translateY(26px); }
}
html.anim .szene-c {
  animation: karte-hoch 620ms var(--ease-out) backwards;
  animation-play-state: var(--ps);
}
html.anim .szene-c:nth-child(2) { animation-delay: 120ms; }
html.anim .szene-c:nth-child(3) { animation-delay: 240ms; }
html.anim .szene-c:nth-child(4) { animation-delay: 360ms; }

.sektion {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(48px, 9vw, 88px) 20px;
}
.sektion__kopf {
  max-width: 46ch;
  margin-bottom: clamp(30px, 5vw, 48px);
}
.sektion__unter {
  color: var(--c-muted);
  text-wrap: pretty;
}
.sektion-band {
  background: var(--c-band);
  border-block: 1px solid var(--c-line);
}
.schritte-c {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}
@media (min-width: 860px) {
  .schritte-c {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}
.schritt-c {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.schritt-c__nr {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-fg);
  font-weight: 700;
}
.schritt-c h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 4px;
}
.schritt-c p {
  color: var(--c-muted);
  text-wrap: pretty;
}
.schritte-c__aktion {
  margin-top: 40px;
}
@media (max-width: 559px) {
  .schritte-c__aktion .knopf,
  .p-aktion .knopf,
  .p-preis__knopf .knopf {
    width: 100%;
  }
}

/* „Neu in Teilit": die Zeilen und Kacheln der App, je mit einer kleinen Bewegung. */
.neu-c {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width: 640px) {
  .neu-c {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .neu-c > li:last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 960px) {
  .neu-c {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .neu-c > li {
    grid-column: span 2;
  }
  .neu-c > li:nth-child(n + 4) {
    grid-column: span 3;
  }
}
.neu-c__karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.neu-c__kopf {
  display: flex;
  align-items: center;
  gap: 16px;
}
.neu-c__karte h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.neu-c__karte p {
  color: var(--c-muted);
  text-wrap: pretty;
}
.neu-c__bild {
  margin-top: auto;
  padding-top: 16px;
}
.nb {
  --u: 1px;
  display: grid;
  gap: 8px;
  align-content: center;
  min-height: 150px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--c-band);
  overflow: hidden;
}
.nb .app__zeile {
  min-height: 57px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding-left: 4px;
}
.nb .app__text {
  font-size: 17px;
}
.nb .app__text--u {
  line-height: 1.35;
}
.nb .app__sub {
  font-size: 13px;
}
.nb .app__feld {
  width: 44px;
}
.nb .app__kreis {
  width: 26px;
  height: 26px;
}
.nb .app__box {
  min-height: 48px;
  font-size: 17px;
}
.nb-kachel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.nb-kachel .plakette {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.nb-kachel .plakette svg {
  width: 20px;
  height: 20px;
}
.nb-kachel b {
  display: block;
  font-size: 17px;
  line-height: 1.3;
}
.nb-kachel span.t {
  display: block;
  font-size: 15px;
  color: var(--c-muted);
  line-height: 1.3;
}
.nb-text {
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  font-size: 15px;
  line-height: 1.5;
}
.nb-text span {
  display: block;
}
.nb-vorschlag {
  display: flex;
  gap: 8px;
}
.nb-vorschlag span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-text) 8%, var(--c-bg));
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.nb-vorschlag b {
  font-weight: 700;
}
.nb-segment {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--c-text) 8%, var(--c-bg));
}
.nb-segment__daumen {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 2);
  border-radius: 11px;
  background: var(--c-surface);
  box-shadow: 0 1px 3px #00000026;
}
.nb-segment span.l {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--c-muted);
}
.nb-segment span.l--an {
  color: var(--c-text);
}
.nb-sheet {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--c-surface);
  box-shadow: 0 -6px 18px -12px #0000003d;
  font-size: 17px;
}
.nb-sheet small {
  font-size: 13px;
  color: var(--c-muted);
}
.nb .app__ico--info {
  color: var(--c-accent);
}
.nb .app__ico--info svg {
  width: 22px;
  height: 22px;
}
.nb-edit {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--c-text);
  border-radius: 12px;
  background: var(--c-surface);
  font-size: 17px;
}
.nb-edit span {
  flex: 1;
}

@keyframes nb-hoch {
  from { opacity: 0; transform: translateY(-5px); }
}
@keyframes nb-puls {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.4); }
}
@keyframes nb-sheet {
  from { opacity: 0; transform: translateY(70%); }
}
@keyframes nb-klapp {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes nb-daumen {
  from { transform: translateX(100%); }
}
@keyframes nb-zeile {
  from { opacity: 0; transform: translateY(6px); }
}
@keyframes nb-kopie {
  from { opacity: 0; transform: translateY(-60px); }
}
html.anim .nb-von1 { animation: nb-hoch 420ms var(--ease-out) 350ms backwards; animation-play-state: var(--ps); }
html.anim .nb-von2 { animation: nb-hoch 420ms var(--ease-out) 1250ms backwards; animation-play-state: var(--ps); }
html.anim .nb-von-kreis { animation: ab-kreis 300ms var(--ease-out) 1000ms backwards; animation-play-state: var(--ps); }
html.anim .nb-von-kreis svg { animation: ab-haken 300ms var(--ease-out) 1000ms backwards; animation-play-state: var(--ps); }
html.anim .nb-von-t { animation: ab-streichen 300ms var(--ease-out) 1000ms backwards; animation-play-state: var(--ps); }
html.anim .nb-info { animation: nb-puls 520ms var(--ease-out) 300ms backwards; animation-play-state: var(--ps); }
html.anim .nb-sheet { animation: nb-sheet 560ms cubic-bezier(0.22, 1.2, 0.36, 1) 750ms backwards; animation-play-state: var(--ps); }
html.anim .nb-vorschlag { animation: nb-klapp 420ms var(--ease-out) 700ms backwards; animation-play-state: var(--ps); }
html.anim .nb-segment__daumen { animation: nb-daumen 520ms cubic-bezier(0.34, 1.3, 0.64, 1) 400ms backwards; animation-play-state: var(--ps); }
html.anim .nb-kopie { animation: nb-kopie 580ms cubic-bezier(0.3, 1.2, 0.5, 1) 600ms backwards; animation-play-state: var(--ps); }
html.anim .nb-text span { animation: nb-zeile 320ms var(--ease-out) backwards; animation-play-state: var(--ps); }
html.anim .nb-text span:nth-child(1) { animation-delay: 150ms; }
html.anim .nb-text span:nth-child(2) { animation-delay: 260ms; }
html.anim .nb-text span:nth-child(3) { animation-delay: 370ms; }
html.anim .nb-text span:nth-child(4) { animation-delay: 480ms; }
html.anim .nb-text span:nth-child(5) { animation-delay: 590ms; }
html.anim .nb-tipp i { animation: ab-buchstabe 80ms ease-out backwards; animation-play-state: var(--ps); }
html.anim .nb-tipp i:nth-child(1) { animation-delay: 100ms; }
html.anim .nb-tipp i:nth-child(2) { animation-delay: 240ms; }
.nb-tipp {
  display: inline-flex;
}
.nb-tipp i {
  font-style: normal;
}

.prohinweis {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 46rem;
  padding: 24px;
  border-radius: 24px;
}
.prohinweis h2 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
  color: var(--c-creme);
}
.prohinweis p {
  margin-top: 6px;
  color: color-mix(in srgb, var(--c-creme) 80%, transparent);
  text-wrap: pretty;
}
.prohinweis__kopf {
  display: flex;
  align-items: center;
  gap: 12px;
}
.prohinweis .weiter {
  color: var(--c-creme);
  margin-top: 4px;
}
.prohinweis .weiter svg {
  color: var(--c-creme);
}
.prohinweis__punkte {
  display: flex;
  gap: 6px;
}
.prohinweis__punkte i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--c-creme) 70%, transparent);
}
.prohinweis__punkte i:nth-child(1) { background: #4b6b3a; }
.prohinweis__punkte i:nth-child(2) { background: #1d5fd0; }
.prohinweis__punkte i:nth-child(3) { background: #0f6b57; }
.prohinweis__punkte i:nth-child(4) { background: #6a4c93; }
.prohinweis__punkte i:nth-child(5) { background: #9c3a63; }
.prohinweis__punkte i:nth-child(6) { background: #9a5423; }
.prohinweis__punkte i:nth-child(7) { background: #2c3e50; }
html.anim .prohinweis__punkte i { animation: ab-pop 380ms cubic-bezier(0.34, 1.6, 0.64, 1) backwards; animation-play-state: var(--ps); }
html.anim .prohinweis__punkte i:nth-child(2) { animation-delay: 70ms; }
html.anim .prohinweis__punkte i:nth-child(3) { animation-delay: 140ms; }
html.anim .prohinweis__punkte i:nth-child(4) { animation-delay: 210ms; }
html.anim .prohinweis__punkte i:nth-child(5) { animation-delay: 280ms; }
html.anim .prohinweis__punkte i:nth-child(6) { animation-delay: 350ms; }
html.anim .prohinweis__punkte i:nth-child(7) { animation-delay: 420ms; }

/* ═══════════════════════════════════════════════════════════════
   /PRO
   ═══════════════════════════════════════════════════════════════ */
.p-held {
  background: var(--c-band);
  border-block: 1px solid var(--c-line);
}
.p-held__innen {
  display: grid;
  gap: 40px;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(32px, 7vw, 64px) 20px;
}
@media (min-width: 800px) {
  .p-held__innen {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 64px;
  }
}
.p-held h1 {
  max-width: 12ch;
  margin-bottom: 14px;
  font-size: clamp(2.5rem, 9vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.p-held__vorspann {
  max-width: 34ch;
  color: var(--c-muted);
  text-wrap: pretty;
}
.p-aktion {
  margin-top: 28px;
}
.p-preiszeile {
  margin-top: 8px;
  font-size: var(--fs-small);
  color: var(--c-muted);
}
.p-held__buehne {
  display: grid;
  justify-items: center;
  gap: 12px;
}
.p-held__buehne .app {
  width: min(280px, 72vw);
}
.p-held__unter {
  font-size: var(--fs-small);
  color: var(--c-muted);
  text-align: center;
}
.p-seite {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px clamp(56px, 10vw, 96px);
}
.p-band {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 40px;
  padding: 24px;
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.p-band h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
}
.p-band p {
  color: var(--c-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}
.p-band p + p {
  margin-top: 8px;
}
.p-band strong {
  color: var(--c-text);
}
.p-titel {
  margin: 56px 0 24px;
  max-width: 20ch;
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}
.p-karten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .p-karten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-karten > li:last-child {
    grid-column: 1 / -1;
  }
}
.p-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 28px 22px 26px;
  border-radius: 28px;
  text-align: center;
}
.p-karte--hell {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text);
}
.p-bild {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  min-height: 118px;
}
.p-karte h3 {
  margin-top: 22px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.p-karte .satz {
  margin-top: 6px;
  font-size: 15px;
  color: color-mix(in srgb, var(--c-creme) 80%, transparent);
}
.p-karte .mehr {
  margin-top: 10px;
  max-width: 34ch;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--c-creme) 70%, transparent);
  text-wrap: pretty;
}
.p-karte--hell .satz {
  color: var(--c-muted);
}
.p-karte--hell .mehr {
  color: var(--c-muted);
}

/* Die Bilder aus dem Pro-Blatt der App. Creme auf der tiefen Fläche. */
.pq {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--c-creme) 16%, transparent);
  color: var(--c-creme);
}
.pq svg {
  width: 27px;
  height: 27px;
}
.pq--w {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}
.pq--w svg {
  width: 18px;
  height: 18px;
}
.pt-zeile {
  display: flex;
  align-items: center;
  gap: 7px;
}
.app__ph--text {
  color: var(--c-text);
}
.app__senden--da {
  opacity: 1;
}
.pt-erinnerung {
  display: flex;
  align-items: center;
  gap: 22px;
}
.pt-wecker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--c-creme);
}
.pt-wecker > svg {
  width: 28px;
  height: 28px;
}
.pt-fenster {
  display: inline-block;
  height: 34px;
  overflow: hidden;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 34px;
  color: var(--c-creme);
}
.problatt-uhr {
  display: block;
  transform: translateY(-68px);
}
.problatt-uhr > span {
  display: block;
}
.problatt-welle {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 22px;
  margin-top: -11px;
  border: 2px solid transparent;
  border-radius: 50%;
  opacity: 0;
}
.problatt-welle-links {
  --richtung: -1;
  left: -10px;
  border-left-color: var(--c-creme);
}
.problatt-welle-rechts {
  --richtung: 1;
  right: -10px;
  border-right-color: var(--c-creme);
}
.mitteilung {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--c-mitteilung);
  color: var(--c-mitteilung-text);
  text-align: left;
}
.mitteilung__t {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #4b6b3a;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}
.mitteilung__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.mitteilung__text b {
  font-size: 15px;
}
.mitteilung__text span {
  overflow: hidden;
  font-size: 13px;
  opacity: 0.8;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mitteilung__jetzt {
  align-self: flex-start;
  margin-left: auto;
  font-size: 12px;
  opacity: 0.65;
}
.problatt-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--c-creme) 16%, transparent);
  color: var(--c-creme);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.problatt-chip.i0 { --problatt-i: 0; }
.problatt-chip.i1 { --problatt-i: 1; }
.pt-ic {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
}
.pt-ic svg {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
}
.problatt-pfeil {
  opacity: 0;
}
.problatt-balken {
  position: absolute;
  right: 10px;
  bottom: 6px;
  left: 10px;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--c-creme) 20%, transparent);
  opacity: 0;
}
.problatt-fuellung {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: var(--c-creme);
  transform-origin: left;
}
.pt-sperre {
  position: relative;
  width: 50px;
  height: 50px;
  clip-path: inset(0 -24px -34px -24px);
}
.problatt-vorhang {
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background: color-mix(in srgb, var(--c-creme) 34%, transparent);
  transform-origin: top;
}
.problatt-unscharf {
  filter: blur(2px);
}
.problatt-schloss {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-creme);
}
.pt-schloss-zeichen {
  position: relative;
  width: 24px;
  height: 24px;
}
.pt-schloss-zeichen svg {
  position: absolute;
  inset: 0;
  width: 24px;
  height: 24px;
}
.problatt-sperre-offen {
  opacity: 0;
}
.pt-punkte {
  display: flex;
  gap: 12px;
}
.problatt-punkt {
  width: 13px;
  height: 13px;
  border: 2px solid var(--c-creme);
  border-radius: 50%;
  background: var(--c-creme);
}
.problatt-punkt.i0 { --problatt-i: 0; }
.problatt-punkt.i1 { --problatt-i: 1; }
.problatt-punkt.i2 { --problatt-i: 2; }
.problatt-punkt.i3 { --problatt-i: 3; }
.problatt-listen {
  --problatt-n: 5;
  --problatt-plus: calc(var(--problatt-start) + var(--problatt-n) * 70ms + 60ms);
  --problatt-weg: calc(var(--problatt-plus) + 500ms);
  --problatt-neue: calc(var(--problatt-weg) + 1450ms);
  display: flex;
  gap: 8px;
  color: var(--c-creme);
}
.problatt-kachel.i0 { --problatt-i: 0; }
.problatt-kachel.i1 { --problatt-i: 1; }
.problatt-kachel.i2 { --problatt-i: 2; }
.problatt-kachel.i3 { --problatt-i: 3; }
.problatt-kachel.i4 { --problatt-i: 4; }
.problatt-plus {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1px dashed transparent;
  border-radius: 11px;
}
.pt-ebene {
  position: absolute;
  inset: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-ebene svg {
  width: 18px;
  height: 18px;
}
.problatt-plus-zeichen,
.problatt-aufschliessen {
  opacity: 0;
}
.problatt-wackeln {
  position: relative;
  width: 18px;
  height: 18px;
}
.problatt-wackeln svg {
  position: absolute;
  inset: 0;
}
.problatt-liste-offen {
  opacity: 0;
}
.problatt-neu {
  border-radius: 11px;
  background: color-mix(in srgb, var(--c-creme) 16%, transparent);
}
.problatt-lichtring-1,
.problatt-lichtring-2 {
  position: absolute;
  inset: -1px;
  border: 2px solid var(--c-creme);
  border-radius: 11px;
  opacity: 0;
  pointer-events: none;
}

@keyframes problatt-einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes problatt-ausblenden { from { opacity: 1; } to { opacity: 0; } }
@keyframes problatt-uhr-rollt {
  0% { transform: translateY(0); }
  40%, 55% { transform: translateY(-34px); }
  100% { transform: translateY(-68px); }
}
@keyframes problatt-wecker-rattert {
  0% { transform: translateY(0) rotate(0deg); }
  7.1429% { transform: translateY(-4px) rotate(10.31deg); }
  14.2857% { transform: translateY(0) rotate(-9.63deg); }
  21.4286% { transform: translateY(-4px) rotate(8.94deg); }
  28.5714% { transform: translateY(0) rotate(-8.25deg); }
  35.7143% { transform: translateY(-4px) rotate(7.56deg); }
  42.8571% { transform: translateY(0) rotate(-6.88deg); }
  50% { transform: translateY(-4px) rotate(6.19deg); }
  57.1429% { transform: translateY(0) rotate(-5.5deg); }
  64.2857% { transform: translateY(-4px) rotate(4.81deg); }
  71.4286% { transform: translateY(0) rotate(-4.13deg); }
  78.5714% { transform: translateY(-4px) rotate(3.44deg); }
  85.7143% { transform: translateY(0) rotate(-2.75deg); }
  92.8571% { transform: translateY(-4px) rotate(2.06deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes problatt-welle-innen {
  from { opacity: 0.9; transform: translateX(0) scale(0.7); }
  to { opacity: 0; transform: translateX(calc(var(--richtung) * 6px)) scale(1.15); }
}
@keyframes problatt-welle-aussen {
  from { opacity: 0.6; transform: translateX(calc(var(--richtung) * 4px)) scale(0.9); }
  to { opacity: 0; transform: translateX(calc(var(--richtung) * 10px)) scale(1.3); }
}
@keyframes problatt-mitteilung-plumpst {
  from { opacity: 0; transform: translateY(-26px) scale(0.92); }
  65% { opacity: 1; transform: translateY(5px) scale(1.01); }
  to { opacity: 1; transform: none; }
}
@keyframes problatt-zurueckdrehen {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
@keyframes problatt-chip-rein {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes problatt-fuellen {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes problatt-pfeil-weg {
  0% { opacity: 1; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(3px); }
  100% { opacity: 0; transform: translateY(9px); }
}
@keyframes problatt-haken-auf {
  from { opacity: 0; transform: scale(0.3) rotate(-30deg); }
  60% { opacity: 1; transform: scale(1.35) rotate(8deg); }
  to { opacity: 1; transform: none; }
}
@keyframes problatt-punkt-fuellt {
  0% { background-color: color-mix(in srgb, var(--c-creme) 0%, transparent); transform: translateY(0) scale(1); }
  45% { background-color: var(--c-creme); transform: translateY(-5px) scale(1.4); }
  100% { background-color: var(--c-creme); transform: none; }
}
@keyframes problatt-vorhang-faellt {
  from { transform: scaleY(0); }
  75% { transform: scaleY(1.06); }
  to { transform: scaleY(1); }
}
@keyframes problatt-unscharf-wird {
  from { filter: blur(0); }
  to { filter: blur(2px); }
}
@keyframes problatt-schloss-plumpst {
  from { opacity: 0; transform: translateY(-30px) rotate(-12deg); }
  70% { opacity: 1; transform: translateY(3px) rotate(4deg) scale(1.08, 0.92); }
  to { opacity: 1; transform: none; }
}
@keyframes problatt-schloss-klickt {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(2px) scale(1.12, 0.9); }
  100% { transform: none; }
}
@keyframes problatt-kachel-rein {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: none; }
}
@keyframes problatt-plus-rein {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}
@keyframes problatt-rand-weg {
  from { border-color: color-mix(in srgb, var(--c-creme) 55%, transparent); }
  to { border-color: transparent; }
}
@keyframes problatt-plus-weg {
  from { opacity: 1; transform: rotate(0deg) scale(1); }
  to { opacity: 0; transform: rotate(90deg) scale(0.4); }
}
@keyframes problatt-schloss-rein {
  from { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.15); }
  to { opacity: 1; transform: none; }
}
@keyframes problatt-schloss-raus {
  from { opacity: 1; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px) scale(1.1); }
  to { opacity: 0; transform: scale(0.3); }
}
@keyframes problatt-wackeln {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-10deg); }
  80% { transform: rotate(8deg); }
}
@keyframes finale-lichtring-1 {
  0% { transform: scale(0.8); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes finale-lichtring-2 {
  0% { transform: scale(0.8); opacity: 0.4; }
  100% { transform: scale(2.3); opacity: 0; }
}
@keyframes finale-stern {
  0% { transform: scale(0) rotate(-200deg); }
  60% { transform: scale(1.35) rotate(15deg); }
  100% { transform: scale(1) rotate(0deg); }
}

html.anim .problatt-uhr { animation: problatt-uhr-rollt 820ms var(--ease-out) var(--problatt-start) both; }
html.anim .problatt-wecker { animation: problatt-wecker-rattert 900ms linear calc(var(--problatt-start) + 800ms); }
html.anim .problatt-welle-innen {
  animation:
    problatt-welle-innen 420ms var(--ease-out) calc(var(--problatt-start) + 820ms),
    problatt-welle-innen 420ms var(--ease-out) calc(var(--problatt-start) + 1080ms),
    problatt-welle-innen 420ms var(--ease-out) calc(var(--problatt-start) + 1340ms);
}
html.anim .problatt-welle-aussen {
  animation:
    problatt-welle-aussen 480ms var(--ease-out) calc(var(--problatt-start) + 910ms),
    problatt-welle-aussen 480ms var(--ease-out) calc(var(--problatt-start) + 1170ms),
    problatt-welle-aussen 480ms var(--ease-out) calc(var(--problatt-start) + 1430ms);
}
html.anim .problatt-mitteilung { animation: problatt-mitteilung-plumpst 520ms var(--ease-out) calc(var(--problatt-start) + 1650ms) both; }
html.anim .problatt-zurueck { animation: problatt-zurueckdrehen 700ms var(--ease-in-out) var(--problatt-start); }
html.anim .problatt-chip { animation: problatt-chip-rein 360ms var(--ease-out) calc(var(--problatt-start) + 380ms + var(--problatt-i) * 140ms) both; }
html.anim .problatt-balken {
  animation:
    problatt-einblenden 160ms linear calc(var(--problatt-start) + 800ms + var(--problatt-i) * 140ms) both,
    problatt-ausblenden 240ms linear calc(var(--problatt-start) + 1800ms + var(--problatt-i) * 300ms) forwards;
}
html.anim .problatt-fuellung { animation: problatt-fuellen calc(760ms + var(--problatt-i) * 160ms) var(--ease-in-out) calc(var(--problatt-start) + 880ms + var(--problatt-i) * 140ms) both; }
html.anim .problatt-pfeil { animation: problatt-pfeil-weg 420ms var(--problatt-ease-in) calc(var(--problatt-start) + 1420ms + var(--problatt-i) * 300ms) both; }
html.anim .problatt-haken { animation: problatt-haken-auf 420ms var(--ease-out) calc(var(--problatt-start) + 1700ms + var(--problatt-i) * 300ms) both; }
html.anim .problatt-punkt { animation: problatt-punkt-fuellt 260ms var(--ease-out) calc(var(--problatt-start) + var(--problatt-i) * 170ms) both; }
html.anim .problatt-vorhang { animation: problatt-vorhang-faellt 460ms var(--ease-in-out) calc(var(--problatt-start) + 820ms) both; }
html.anim .problatt-unscharf { animation: problatt-unscharf-wird 400ms linear calc(var(--problatt-start) + 920ms) both; }
html.anim .problatt-schloss { animation: problatt-schloss-plumpst 440ms var(--problatt-ease-in) calc(var(--problatt-start) + 1260ms) both; }
html.anim .problatt-sperre-offen { animation: problatt-ausblenden 1ms linear calc(var(--problatt-start) + 1820ms) both; opacity: 1; }
html.anim .problatt-sperre-zu {
  animation:
    problatt-einblenden 1ms linear calc(var(--problatt-start) + 1820ms) both,
    problatt-schloss-klickt 180ms var(--ease-out) calc(var(--problatt-start) + 1820ms) both;
}
html.anim .problatt-kachel { animation: problatt-kachel-rein 260ms var(--ease-out) calc(var(--problatt-start) + var(--problatt-i) * 70ms) both; }
html.anim .problatt-plus {
  animation:
    problatt-plus-rein 320ms var(--ease-out) var(--problatt-plus) both,
    problatt-rand-weg 300ms var(--ease-out) var(--problatt-neue) both;
}
html.anim .problatt-plus-zeichen { animation: problatt-plus-weg 280ms var(--ease-in-out) var(--problatt-weg) both; opacity: 1; }
html.anim .problatt-aufschliessen {
  animation:
    problatt-schloss-rein 320ms var(--ease-out) calc(var(--problatt-weg) + 220ms) forwards,
    problatt-schloss-raus 420ms var(--ease-out) calc(var(--problatt-weg) + 1140ms) forwards;
}
html.anim .problatt-wackeln { animation: problatt-wackeln 520ms ease-in-out calc(var(--problatt-weg) + 600ms); }
html.anim .problatt-liste-offen { animation: problatt-einblenden 1ms linear calc(var(--problatt-weg) + 1140ms) both; }
html.anim .problatt-liste-zu { animation: problatt-ausblenden 1ms linear calc(var(--problatt-weg) + 1140ms) both; }
html.anim .problatt-neu { animation: finale-stern 820ms var(--ease-out) var(--problatt-neue) both; }
html.anim .problatt-lichtring-1 { animation: finale-lichtring-1 900ms var(--ease-out) calc(var(--problatt-neue) + 60ms) forwards; }
html.anim .problatt-lichtring-2 { animation: finale-lichtring-2 1000ms var(--ease-out) calc(var(--problatt-neue) + 280ms) forwards; }
/* Alle Animationen der Pro-Bilder stehen vor dem Einblenden still. */
html.anim .problatt-uhr, html.anim .problatt-wecker, html.anim .problatt-welle-innen, html.anim .problatt-welle-aussen,
html.anim .problatt-mitteilung, html.anim .problatt-zurueck, html.anim .problatt-chip, html.anim .problatt-balken,
html.anim .problatt-fuellung, html.anim .problatt-pfeil, html.anim .problatt-haken, html.anim .problatt-punkt,
html.anim .problatt-vorhang, html.anim .problatt-unscharf, html.anim .problatt-schloss, html.anim .problatt-sperre-offen,
html.anim .problatt-sperre-zu, html.anim .problatt-kachel, html.anim .problatt-plus, html.anim .problatt-plus-zeichen,
html.anim .problatt-aufschliessen, html.anim .problatt-wackeln, html.anim .problatt-liste-offen, html.anim .problatt-liste-zu,
html.anim .problatt-neu, html.anim .problatt-lichtring-1, html.anim .problatt-lichtring-2 {
  animation-play-state: var(--ps);
}

/* Die Farbwahl der Darstellung (web/src/Darstellung.tsx). */
.pf {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  text-align: left;
}
.pf__label {
  padding-left: 4px;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.pf__box {
  padding: 16px 12px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.pf__reihe {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 32px);
  gap: 16px;
  justify-content: center;
}
.pf__k {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--c-accent-fg);
}
.pf__k svg {
  width: 16px;
  height: 16px;
  stroke-width: 3;
}
.pf__k:nth-child(1) { background: var(--f0); }
.pf__k:nth-child(2) { background: var(--f1); }
.pf__k:nth-child(3) { background: var(--f2); }
.pf__k:nth-child(4) { background: var(--f3); }
.pf__k:nth-child(5) { background: var(--f4); }
.pf__k:nth-child(6) { background: var(--f5); }
.pf__k:nth-child(7) { background: var(--f6); }
.pf__k--aus svg {
  opacity: 0;
}
.pf__ring {
  position: absolute;
  top: -4px;
  left: calc(50% - 164px + 192px);
  width: 40px;
  height: 40px;
  border: 2px solid var(--c-text);
  border-radius: 50%;
  pointer-events: none;
}
.pf__name {
  display: grid;
  justify-items: center;
  margin-top: 8px;
  font-size: var(--fs-body);
  color: var(--c-muted);
}
.pf__name span {
  grid-area: 1 / 1;
}
.pf__name .n1 {
  opacity: 0;
}
.pf__hinweis {
  padding-left: 4px;
  font-size: var(--fs-small);
  color: var(--c-muted);
}
@keyframes pf-pop { from { opacity: 0; transform: scale(0.4); } }
@keyframes pf-ring { from { transform: translateX(-192px); } }
@keyframes pf-name1 { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes pf-name2 { 0%, 55% { opacity: 0; } 56%, 100% { opacity: 1; } }
@keyframes pf-haken-weg { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes pf-haken-da { 0%, 55% { opacity: 0; } 56%, 100% { opacity: 1; } }
html.anim .pf__k { animation: pf-pop 420ms cubic-bezier(0.34, 1.5, 0.64, 1) backwards; animation-play-state: var(--ps); }
html.anim .pf__k:nth-child(2) { animation-delay: 60ms; }
html.anim .pf__k:nth-child(3) { animation-delay: 120ms; }
html.anim .pf__k:nth-child(4) { animation-delay: 180ms; }
html.anim .pf__k:nth-child(5) { animation-delay: 240ms; }
html.anim .pf__k:nth-child(6) { animation-delay: 300ms; }
html.anim .pf__k:nth-child(7) { animation-delay: 360ms; }
html.anim .pf__ring { animation: pf-ring 760ms cubic-bezier(0.34, 1.2, 0.64, 1) 700ms backwards; animation-play-state: var(--ps); }

/* Telefone (bis 479 px): sieben Kreise zu 32 px mit 16 px Abstand brauchen 344 px samt Rand
   und liefen über die Karte. Hier 28 px mit 6 px Abstand (232 px); Ring und
   Ringweg rechnen mit denselben Maßen (fünfter Kreis = Beere). */
@keyframes pf-ring-schmal { from { transform: translateX(-136px); } }
@media (max-width: 479px) {
  .pf__reihe { grid-template-columns: repeat(7, 28px); gap: 6px; }
  .pf__k { width: 28px; height: 28px; }
  .pf__k svg { width: 14px; height: 14px; }
  .pf__ring { left: calc(50% + 16px); width: 36px; height: 36px; }
  html.anim .pf__ring { animation-name: pf-ring-schmal; }
}

/* Sehr schmale Telefone (unter 360 px): Die Karte hat innen nur noch rund 236 px. 26 px
   Kreise mit 4 px Abstand (206 px) und weniger Rand in der Box. */
@keyframes pf-ring-eng { from { transform: translateX(-120px); } }
@media (max-width: 359px) {
  .pf__box { padding-inline: 8px; }
  .pf__reihe { grid-template-columns: repeat(7, 26px); gap: 4px; }
  .pf__k { width: 26px; height: 26px; }
  .pf__k svg { width: 13px; height: 13px; }
  .pf__ring { left: calc(50% + 13px); width: 34px; height: 34px; }
  html.anim .pf__ring { animation-name: pf-ring-eng; }
}
html.anim .pf__name .n1 { animation: pf-name1 1500ms linear backwards; animation-play-state: var(--ps); }
html.anim .pf__name .n2 { animation: pf-name2 1500ms linear backwards; animation-play-state: var(--ps); }
html.anim .pf__k--an svg { animation: pf-haken-da 1500ms linear backwards; animation-play-state: var(--ps); }
html.anim .pf__k--aus svg { animation: pf-haken-weg 1500ms linear backwards; animation-play-state: var(--ps); }

/* Mit und ohne Pro. Text statt Kreuzen: Die Spalte „ohne" ist kein Mangel. */
.vgl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  font-size: var(--fs-small);
}
.vgl th,
.vgl td {
  padding: 12px;
  border-top: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.35;
}
.vgl thead th {
  border-top: 0;
  background: var(--c-band);
  font-weight: 700;
}
.vgl tbody th {
  width: 30%;
  font-weight: 700;
}
.vgl td {
  color: var(--c-muted);
}
.vgl .mit {
  background: var(--c-tint);
  color: var(--c-text);
  font-weight: 600;
}
.vgl thead .mit {
  color: var(--c-accent);
  box-shadow: inset 0 -2px 0 var(--c-accent);
}
.vgl .alle td {
  background: var(--c-band);
  color: var(--c-text);
  font-weight: 400;
  line-height: 1.45;
}
@media (min-width: 640px) {
  .vgl th,
  .vgl td {
    padding: 14px 18px;
    font-size: var(--fs-body);
  }
}

/* Preis und Pflichtangaben: wie die Bestellübersicht der App (ProSeite.tsx). */
.p-preis {
  margin-top: 56px;
  padding: 24px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.p-preis h2 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.p-preis__satz {
  margin-top: 10px;
  color: var(--c-muted);
  text-wrap: pretty;
}
.p-wahl {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.p-wahl__karte {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: var(--c-surface);
}
.p-wahl__karte--an {
  border-color: var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface));
}
.p-wahl__karte .a {
  font-size: var(--fs-tiny);
  font-weight: 600;
  color: var(--c-muted);
}
.p-wahl__karte .b {
  font-size: var(--fs-small);
  font-weight: 700;
}
.p-wahl__karte .c {
  font-size: var(--fs-tiny);
  color: var(--c-muted);
  line-height: 1.4;
}
@keyframes p-wahl-an {
  from { border-color: var(--c-line); background: var(--c-surface); }
}
@keyframes p-wahl-aus {
  from { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface)); }
}
html.anim .p-wahl__karte--an { animation: p-wahl-an 400ms var(--ease-out) 400ms backwards; animation-play-state: var(--ps); }
html.anim .p-wahl__karte:not(.p-wahl__karte--an) { animation: p-wahl-aus 400ms var(--ease-out) 400ms backwards; animation-play-state: var(--ps); }
.p-preis__knopf {
  margin-top: 20px;
}
.p-kuendbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: center;
}
.p-kuendbar svg {
  width: 16px;
  height: 16px;
  color: var(--c-accent);
}
.p-zahlweg {
  margin-top: 6px;
  font-size: var(--fs-tiny);
  color: var(--c-muted);
  text-align: center;
}
.p-pflicht {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-tiny);
  color: var(--c-muted);
}
.p-pflicht dt {
  font-weight: 700;
  color: var(--c-text);
}
.p-pflicht dd {
  margin: 2px 0 0;
  line-height: 1.5;
  text-wrap: pretty;
}
.p-pflicht a,
.p-recht a {
  color: var(--c-accent);
  text-underline-offset: 3px;
}
.p-recht {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin-top: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--c-line);
}
.p-recht a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 600;
}
.p-recht span {
  color: var(--c-muted);
}
.p-abschluss {
  margin-top: 56px;
}
.p-abschluss h2 {
  margin-bottom: 6px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
}
.p-abschluss p {
  color: var(--c-muted);
  max-width: var(--measure);
}
.p-abschluss .p-aktion {
  margin-top: 24px;
}
.p-weiter {
  display: grid;
  gap: 8px;
  margin-top: 40px;
}
.p-weiter .weiter {
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

/* ═══════════════════════════════════════════════════════════════
   STARTSEITE: Hero und Beweis (vorher inline in landing.html)
   ═══════════════════════════════════════════════════════════════ */
.hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(44px, 10vw, 96px) 20px clamp(40px, 8vw, 80px);
}
.hero__innen {
  max-width: 640px;
}
.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
  margin-bottom: 18px;
}
/* Die eine kleine Zeile der Seite. Sie trägt den Haken, damit die H1 den Suchbegriff
   tragen kann. Bewusst keine Versalien und keine gesperrte Schrift. */
.hero__zeile {
  color: var(--c-accent);
  font-weight: 600;
  margin-bottom: 10px;
}
.hero__vorspann {
  color: var(--c-muted);
  max-width: 40ch;
  text-wrap: pretty;
  margin-bottom: 30px;
}
.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
.hero .hero__blick-titel {
  margin-top: 40px;
}
.hero .hero__blick {
  max-width: 34rem;
}
.nb-tipp {
  color: var(--c-text);
}
.nb-edit {
  align-self: center;
  margin-right: 4px;
}
.beweis-c {
  background: var(--c-band);
  border-block: 1px solid var(--c-line);
}
.beweis-c__innen {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 8vw, 72px) 20px;
}

/* „Neu in Teilit": die Karten der Einstellungen und der Eingabezeile, wie in der App. */
.nb-karte {
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.nb-ziel {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  border-top: 1px solid var(--c-line);
  font-size: 17px;
}
.nb-ziel:first-child {
  border-top: 0;
}
.nb-ziel svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--c-accent);
}
@keyframes nb-ziel-blitz {
  from { background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface)); }
}
html.anim .nb-ziel--an { animation: nb-ziel-blitz 900ms var(--ease-out) 1000ms backwards; animation-play-state: var(--ps); }
.nb-vorschlag {
  justify-self: start;
}

/* ═══════════════════════════════════════════════════════════════
   /FUNKTIONEN: die Kapitel der Neuheiten (ab Live)

   Die Bildschirme sind die der App, mit denselben Bausteinen wie das Telefon
   oben (`.app`, Maße in `--u`): Zeile 57, Kreis 26, Titel 26, Eingabezeile 48.
   Dazu das Blatt von unten (`BlattVonUnten.tsx`: Griff, Kopf mit 44-px-Knöpfen,
   Vorgänge wie in `EintragsVerlauf.tsx`), die Segmente von „Kopieren oder
   verschieben" und die Vorschläge der Eingabezeile (`Eingabezeile.tsx`).
   Alles steht unter `.funktionen` (so heißt das <main> der Seite), nichts ändert
   einen bestehenden Selektor. Die Bewegung nutzt die Mechanik oben (`.sc`, `--ps`)
   und die Keyframes von „Neu in Teilit" (`nb-sheet`, `nb-klapp`, `nb-ziel-blitz`).
   Ohne die Abdunklung hinter dem Blatt (die App dunkelt ab): Sonst wären „von
   Jonas" und „abgehakt von Jonas" kaum noch zu lesen.
   ═══════════════════════════════════════════════════════════════ */

/* Streifen „Neu in Teilit" und Marke an den Kapiteln */
.funktionen .uebersicht__titel {
  margin: 0 0 12px;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--c-muted);
}
.funktionen .uebersicht--neu {
  margin-bottom: 40px;
}
.funktionen .uebersicht--neu .uebersicht__titel {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--c-text);
}
@media (min-width: 720px) {
  .funktionen .uebersicht--neu ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.funktionen .neu-pille {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-accent) 12%, var(--c-bg));
  color: var(--c-accent);
  font-size: var(--fs-tiny);
  font-weight: 700;
  line-height: 1.5;
  vertical-align: 1px;
}
/* `.mitteilung` oben gilt für die Mitteilung im Pro-Bild; auf der Sperrfläche von
   /funktionen bleibt sie, wie die Seite sie schon zeichnet (Symbol oben links). */
.funktionen .buehne--sperrbildschirm .mitteilung {
  align-items: flex-start;
}

/* Bühne mit App-Bildschirmen */
.funktionen .buehne--app {
  align-content: center;
  padding-inline: clamp(8px, 3vw, 48px);
}
.funktionen .fphone,
.funktionen .f-schritt {
  width: 100%;
  max-width: 22rem;
}
.funktionen .f-schritt + .f-schritt {
  margin-top: 16px;
}
.funktionen .app--teil {
  border-radius: 18px;
}

/* Die Zeile im Bearbeiten: schwarzer Rand, ⓘ in der Akzentfarbe, Zurück-Pfeil */
.funktionen .f-edit {
  flex: 1;
  min-width: 0;
  align-self: center;
  display: flex;
  align-items: center;
  min-height: calc(48 * var(--u));
  margin-right: calc(4 * var(--u));
  padding: 0 calc(14 * var(--u));
  border: max(1.5px, calc(2 * var(--u))) solid var(--c-text);
  border-radius: calc(12 * var(--u));
  background: var(--c-surface);
  font-size: calc(17 * var(--u));
  line-height: 1.4;
}
.funktionen .f-info {
  color: var(--c-accent);
}
.funktionen .f-info svg,
.funktionen .f-ico20 svg {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.funktionen .f-ico20 svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}

/* Das Blatt von unten */
.funktionen .f-blatt {
  margin-top: calc(24 * var(--u));
  border-top: 1px solid var(--c-line);
  border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0;
  background: var(--c-surface);
  box-shadow: 0 -6px 24px -14px #00000059;
  padding-bottom: calc(22 * var(--u));
}
.funktionen .f-blatt--frei {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-bottom: calc(10 * var(--u));
}
.funktionen .f-blatt__griff {
  display: flex;
  justify-content: center;
  padding-top: calc(10 * var(--u));
}
.funktionen .f-blatt__griff i {
  display: block;
  width: calc(40 * var(--u));
  height: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--c-line);
}
.funktionen .f-blatt__kopf {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u)) calc(4 * var(--u));
}
.funktionen .f-blatt__titel {
  flex: 1;
  min-width: 0;
}
.funktionen .f-blatt__titel strong {
  display: block;
  overflow: hidden;
  font-size: calc(18 * var(--u));
  font-weight: 700;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.funktionen .f-blatt__titel span {
  display: block;
  font-size: calc(14 * var(--u));
  line-height: 1.4;
  color: var(--c-muted);
}
.funktionen .f-blatt__aktionen {
  display: flex;
  flex: none;
  gap: calc(8 * var(--u));
}
.funktionen .f-knopf {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border: 1px solid var(--c-line);
  border-radius: calc(12 * var(--u));
  color: var(--c-accent);
}
.funktionen .f-knopf svg {
  width: calc(21 * var(--u));
  height: calc(21 * var(--u));
}
.funktionen .f-knopf--zu {
  color: var(--c-text);
}
.funktionen .f-knopf--zu svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
}
.funktionen .f-tag {
  padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(4 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-muted);
}
.funktionen .f-vorgang {
  display: flex;
  align-items: flex-start;
  gap: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(20 * var(--u));
  border-top: 1px solid var(--c-line);
}
.funktionen .f-vorgang__av {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  margin-top: calc(1 * var(--u));
  border-radius: 50%;
  background: var(--c-muted);
  color: var(--c-surface);
  font-size: calc(13 * var(--u));
  font-weight: 700;
}
.funktionen .f-vorgang__av--du {
  background: var(--c-accent);
  color: var(--c-accent-fg);
}
.funktionen .f-vorgang p {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: calc(17 * var(--u));
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.funktionen .f-vorgang p b {
  font-weight: 600;
}
.funktionen .f-vorgang p span {
  display: block;
  font-size: calc(12 * var(--u));
  color: var(--c-muted);
}

/* Eingabezeile: Vorschläge, „steht schon drauf", Rückgängig-Streifen */
.funktionen .f-vorschlaege {
  display: flex;
  gap: calc(8 * var(--u));
  margin-bottom: calc(10 * var(--u));
  overflow: hidden;
}
.funktionen .f-vorschlag {
  display: inline-flex;
  align-items: center;
  min-height: calc(36 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-text) 8%, var(--c-bg));
  font-size: calc(15 * var(--u));
  font-weight: 500;
  white-space: nowrap;
}
.funktionen .f-vorschlag b {
  font-weight: 700;
}
.funktionen .f-getippt {
  display: flex;
  align-items: center;
  color: var(--c-text);
}
.funktionen .f-schon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  margin: calc(-4 * var(--u)) 0 calc(2 * var(--u));
  font-size: calc(15 * var(--u));
}
.funktionen .f-schon span {
  min-width: 0;
  overflow: hidden;
  color: var(--c-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.funktionen .f-schon b {
  flex: none;
  padding: calc(12 * var(--u)) calc(4 * var(--u));
  font-weight: 700;
  color: var(--c-accent);
}
.funktionen .f-streifen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
  min-height: calc(52 * var(--u));
  margin: calc(14 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(16 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--c-text);
  color: var(--c-bg);
  font-size: calc(14 * var(--u));
  line-height: 1.35;
}
.funktionen .f-streifen b {
  flex: none;
  padding: calc(12 * var(--u));
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: calc(4 * var(--u));
}

/* Kopieren oder verschieben: Segmente und Zielzeilen */
.funktionen .f-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: calc(8 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u));
  padding: calc(3 * var(--u));
  border-radius: calc(12 * var(--u));
  background: color-mix(in srgb, var(--c-text) 7%, var(--c-bg));
}
.funktionen .f-seg span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(40 * var(--u));
  border-radius: calc(10 * var(--u));
  font-size: calc(14 * var(--u));
  font-weight: 600;
  color: var(--c-muted);
}
.funktionen .f-seg .an {
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: 0 1px 3px #0000001f;
}
.funktionen .f-wohin {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-height: calc(56 * var(--u));
  padding: 0 calc(20 * var(--u));
  border-top: 1px solid var(--c-line);
  font-size: calc(17 * var(--u));
}
.funktionen .f-wohin svg {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  color: var(--c-accent);
}

/* Als Text teilen: die Kachel der Einstellungen und der Text im Chat */
.funktionen .f-einst {
  padding: calc(16 * var(--u));
}
.funktionen .f-kachel {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  min-height: calc(64 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  border: 1px solid var(--c-line);
  border-radius: calc(18 * var(--u));
  background: var(--c-surface);
}
.funktionen .f-kachel__sym {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  border-radius: calc(10 * var(--u));
  background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface));
  color: var(--c-accent);
}
.funktionen .f-kachel__sym svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}
.funktionen .f-kachel b {
  display: block;
  font-size: calc(17 * var(--u));
  font-weight: 700;
  line-height: 1.3;
}
.funktionen .f-kachel small {
  display: block;
  font-size: calc(15 * var(--u));
  line-height: 1.3;
  color: var(--c-muted);
}
.funktionen .f-pfeil {
  display: flex;
  justify-content: center;
  padding-top: 10px;
  color: var(--c-muted);
}
.funktionen .f-pfeil svg {
  width: 22px;
  height: 22px;
}
.funktionen .f-blase {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--c-line);
  border-radius: 18px 18px 18px 6px;
  background: var(--c-surface);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Listensymbol: „Deine Listen" und die Wahl im Blatt */
.funktionen .f-dl__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)) calc(20 * var(--u));
  font-size: calc(22 * var(--u));
  font-weight: 700;
  letter-spacing: -0.015em;
  background: var(--c-surface);
}
.funktionen .f-dl__aktionen {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.funktionen .f-dl__plus {
  display: grid;
  place-items: center;
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
  border: 1px solid var(--c-line);
  border-radius: calc(12 * var(--u));
  color: var(--c-text);
}
.funktionen .f-dl__plus svg,
.funktionen .f-dl__zu svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
}
.funktionen .f-dl__zu {
  display: grid;
  place-items: center;
  width: calc(32 * var(--u));
  height: calc(44 * var(--u));
  color: var(--c-muted);
}
.funktionen .f-sym {
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  margin: calc(18 * var(--u)) calc(8 * var(--u)) 0 calc(2 * var(--u));
  color: var(--c-accent);
}
.funktionen .f-name {
  display: block;
}
.funktionen .app__zeile--erl .f-name {
  font-weight: 700;
}
.funktionen .f-pick {
  padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(4 * var(--u));
}
.funktionen .f-pick__auto {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-height: calc(44 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border: max(1.5px, calc(2 * var(--u))) solid var(--c-accent);
  border-radius: calc(14 * var(--u));
  background: color-mix(in srgb, var(--c-accent) 10%, var(--c-surface));
}
.funktionen .f-pick__kachel {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
  border-radius: calc(10 * var(--u));
  background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface));
  color: var(--c-accent);
}
.funktionen .f-pick__kachel svg {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
}
.funktionen .f-pick__auto b {
  display: block;
  font-size: calc(17 * var(--u));
  font-weight: 700;
  line-height: 1.3;
}
.funktionen .f-pick__auto small {
  display: block;
  font-size: calc(13 * var(--u));
  line-height: 1.3;
  color: var(--c-muted);
}
.funktionen .f-pick__gruppe {
  margin: calc(16 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u));
  font-size: calc(13 * var(--u));
  font-weight: 700;
  color: var(--c-muted);
}
.funktionen .f-pick__raster {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(8 * var(--u));
  padding-bottom: calc(12 * var(--u));
}
.funktionen .f-pick__raster span {
  display: grid;
  place-items: center;
  height: calc(48 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--c-bg);
}
.funktionen .f-pick__raster svg {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}

/* Teilit Pro: ruhige Karte, kein Preis, keine Marke */
.funktionen .f-pro {
  width: 100%;
  max-width: 25rem;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow:
    0 1px 2px #0000000d,
    0 12px 32px -18px #00000029;
}
.funktionen .f-pro__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
}
.funktionen .f-pro__kopf b {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.funktionen .f-pro__kopf span {
  font-size: var(--fs-tiny);
  color: var(--c-muted);
}
.funktionen .f-pro__zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--c-line);
}
.funktionen .f-pro__sym {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface));
  color: var(--c-accent);
}
.funktionen .f-pro__sym svg {
  width: 22px;
  height: 22px;
}
.funktionen .f-pro__zeile b {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}
.funktionen .f-pro__zeile small {
  display: block;
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--c-muted);
}
.funktionen .f-pro__punkte {
  display: grid;
  grid-template-columns: repeat(2, 10px);
  gap: 4px;
}
.funktionen .f-pro__punkte i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.funktionen .f-pro__punkte i:nth-child(1) { background: var(--f1); }
.funktionen .f-pro__punkte i:nth-child(2) { background: var(--f4); }
.funktionen .f-pro__punkte i:nth-child(3) { background: var(--f2); }
.funktionen .f-pro__punkte i:nth-child(4) { background: var(--f5); }

/* Bewegung: einmal, wenn die Bühne ins Bild kommt (`.sc`, siehe oben). */
html.anim .funktionen .f-blatt--rein {
  animation: nb-sheet 560ms cubic-bezier(0.22, 1.2, 0.36, 1) 750ms backwards;
  animation-play-state: var(--ps);
}
html.anim .funktionen .f-vorschlag {
  animation: nb-klapp 420ms var(--ease-out) 500ms backwards;
  animation-play-state: var(--ps);
}
html.anim .funktionen .f-vorschlag:nth-child(2) { animation-delay: 610ms; }
html.anim .funktionen .f-vorschlag:nth-child(3) { animation-delay: 720ms; }
html.anim .funktionen .f-streifen--rein {
  animation: nb-klapp 420ms var(--ease-out) 900ms backwards;
  animation-play-state: var(--ps);
}
html.anim .funktionen .f-wohin--an {
  animation: nb-ziel-blitz 900ms var(--ease-out) 1000ms backwards;
  animation-play-state: var(--ps);
}
html.anim .funktionen .f-blase {
  animation: nb-klapp 420ms var(--ease-out) 500ms backwards;
  animation-play-state: var(--ps);
}