/* ═══════════════════════════════════════════════════════════════════════
   Effora · Neu gedacht (Demo vom 04.10.2026)

   Gestaltungslesart: Startseite einer App-Familie für Menschen, die meist
   am Handy ankommen. Dunkle Glas-Sprache in den Effora-Farben, ruhig und
   produktnah: echte Bildschirme statt nachgebauter Oberflächen.

   Regler: Abweichung 7 · Bewegung 7 · Dichte 3.

   Formregel (eine für die ganze Seite):
     Flächen 24 px · Kacheln in Flächen 16 px · Knöpfe und Chips voll rund ·
     Geräte nach ihren echten Maßen.
   Farbregel: Koralle ist der einzige Akzent. Der Marken-Verlauf Koralle bis
   Lila erscheint nur im Zeichen, im Licht und in genau einer Bento-Zelle.
   ═══════════════════════════════════════════════════════════════════════ */

@property --farbe { syntax: '<color>'; inherits: true; initial-value: #3aa65a; }
@property --spreiz { syntax: '<number>'; inherits: true; initial-value: 1; }

:root {
  --koralle: #F2704A; --lila: #A259B5; --lila-tief: #7C3F87;
  --radius: 24px; --radius-klein: 16px;
  --feder: cubic-bezier(.22, 1, .36, 1);
  --feder-weich: cubic-bezier(.34, 1.3, .64, 1);
  --kopf-h: 70px;
  --breite: 1240px;
  --rand: clamp(16px, 4vw, 40px);
  --vvu: 0px;
}
:root, [data-thema="nacht"] {
  --grund: #0A0A0C; --grund-2: #0E0E12; --flaeche: #131317; --karte: #16161B; --karte-hoch: #1C1C22;
  --linie: #26262E; --linie-stark: #34343E;
  --text: #F5F5F7; --leise: #A1A1AB; --sehr-leise: #74747F;
  --akzent: #F2704A; --akzent-text: #F2704A; --auf-akzent: #140A06;
  --glas: rgba(20, 20, 26, .62); --glas-rand: rgba(255, 255, 255, .09); --glanz: rgba(255, 255, 255, .07);
  --pillen-grund: rgba(255, 255, 255, .09);
  --schatten-gross: 0 40px 90px -40px rgba(0, 0, 0, .85);
  --geraet-schatten: rgba(0, 0, 0, .7);
  color-scheme: dark;
}
[data-thema="tag"] {
  --grund: #F4F4F7; --grund-2: #ECECF1; --flaeche: #FFFFFF; --karte: #FFFFFF; --karte-hoch: #FAFAFC;
  --linie: #E1E1E8; --linie-stark: #CFCFD9;
  --text: #111116; --leise: #55555F; --sehr-leise: #85858F;
  --akzent: #F2704A; --akzent-text: #B8431E; --auf-akzent: #140A06;
  --glas: rgba(255, 255, 255, .72); --glas-rand: rgba(10, 10, 25, .08); --glanz: rgba(255, 255, 255, .9);
  --pillen-grund: rgba(10, 10, 25, .06);
  --schatten-gross: 0 40px 80px -42px rgba(40, 28, 70, .4);
  --geraet-schatten: rgba(40, 28, 70, .35);
  color-scheme: light;
}

/* ─────────────────────────── Grundlagen ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 17px/1.6 "Geist", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; transition: background-color .5s ease, color .5s ease;
}
h1, h2, h3 { font-family: "Outfit", ui-sans-serif, sans-serif; font-weight: 500; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 10px; }
.innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.akzent { color: var(--akzent-text); }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-marke { width: 20px; height: 20px; fill: currentColor; flex: none; }
.sprung { position: fixed; left: 16px; top: -60px; z-index: 90; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--grund); text-decoration: none; font-weight: 600; transition: top .3s var(--feder); }
.sprung:focus { top: 16px; }
.auge { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent-text); margin-bottom: 14px; }

/* Körnung: EIN fester Layer über allem, nie auf scrollenden Flächen. */
.koernung {
  position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-thema="tag"] .koernung {
  opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ───────────────────────────── Knöpfe ───────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px;
  border-radius: 999px; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap;
  transition: transform .45s var(--feder), background-color .3s, box-shadow .3s, color .3s;
}
.knopf:active { transform: scale(.97); }
.knopf-haupt {
  background: var(--akzent); color: var(--auf-akzent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 34px -14px rgba(242, 112, 74, .75);
}
.knopf-haupt .ic { transition: transform .45s var(--feder); }
.knopf-haupt:hover .ic { transform: translateX(4px); }
.knopf-leise { color: var(--text); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.knopf-leise:hover { background: var(--pillen-grund); }

.store {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px 0 15px; border-radius: 999px;
  background: var(--text); color: var(--grund); text-decoration: none; white-space: nowrap;
  transition: transform .45s var(--feder), box-shadow .3s;
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, .7);
}
.store:hover { transform: translateY(-2px); }
.store:active { transform: scale(.97); }
.store > span { display: flex; flex-direction: column; font-weight: 600; font-size: 16px; line-height: 1.1; letter-spacing: -.01em; }
.store small { font-size: 10.5px; font-weight: 500; opacity: .7; letter-spacing: .01em; }
.store.klein { height: 42px; padding: 0 16px 0 12px; gap: 8px; }
.store.klein > span { font-size: 14px; }
.store.klein .ic-marke { width: 17px; height: 17px; }
.qr-knopf {
  display: none; width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer; place-items: center;
  background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--linie-stark);
  transition: background-color .3s, transform .45s var(--feder);
}
.qr-knopf:hover { background: var(--pillen-grund); transform: translateY(-2px); }
.laden-zeile .qr-knopf { width: 42px; height: 42px; }
@media (hover: hover) and (pointer: fine) { .qr-knopf { display: grid; } }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--akzent-text); font-weight: 600; text-decoration: none; padding: 8px 4px; }
.text-link .ic { width: 18px; height: 18px; transition: transform .4s var(--feder); }
.text-link:hover .ic { transform: translate(2px, -2px); }
.store-fehlt, .store-bald {
  display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px; border-radius: 999px;
  color: var(--leise); box-shadow: inset 0 0 0 1px var(--linie); font-size: 15px; font-weight: 500;
}
.store-bald.klein { height: 42px; font-size: 14px; }
.store-bald .ic { width: 18px; height: 18px; color: var(--lila); }
.nur-android { display: none; }
[data-plattform="android"] .nur-android { display: inline-flex; }
/* Beide Stores stehen immer da. Der Store des eigenen Geräts ist gefüllt
   und steht vorn, der andere bleibt als Umriss daneben: Wer am iPhone
   die Seite für jemanden mit Android öffnet, findet den Link trotzdem. */
[data-plattform="ios"] .store.store-android, [data-plattform="android"] .store.store-ios {
  background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--linie-stark);
}
[data-plattform="android"] .store.store-android { order: -1; }
.store-fehlt { height: auto; padding: 0 6px; box-shadow: none; font-size: 14px; color: var(--sehr-leise); }
.laden-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.status { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--leise); box-shadow: inset 0 0 0 1px var(--linie); }
.status + .status { margin-left: 4px; }
.status.nur-deutsch { color: var(--sehr-leise); }
.status.sprache-da { color: var(--text); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.status.bald { color: var(--text); background: color-mix(in srgb, var(--lila) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lila) 45%, transparent); }

/* ────────────────────────────── Kopf ────────────────────────────── */
.kopf { position: fixed; top: 12px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; pointer-events: none; }
.kopf-innen {
  pointer-events: auto; display: flex; align-items: center; gap: 6px;
  width: min(1000px, calc(100% - 24px)); height: 58px; padding: 0 8px 0 18px; border-radius: 999px;
  background: var(--glas); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--glas-rand), inset 0 1px 0 var(--glanz), 0 16px 40px -24px rgba(0, 0, 0, .7);
  transition: width .6s var(--feder), height .6s var(--feder), background-color .4s;
}
.kopf.eng .kopf-innen { width: min(760px, calc(100% - 24px)); height: 52px; }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font: 600 20px/1 "Outfit", sans-serif; letter-spacing: -.02em; }
.kopf .marke { margin-right: auto; }
.kopf .marke img { transition: transform .8s var(--feder); }
.kopf .marke:hover img { transform: rotate(90deg); }
.kopf-links { position: relative; display: flex; align-items: center; }
.kopf-links a { position: relative; z-index: 1; padding: 9px 16px; border-radius: 999px; color: var(--leise); text-decoration: none; font-size: 15px; font-weight: 500; transition: color .3s; }
.kopf-links a:hover, .kopf-links a.aktiv { color: var(--text); }
.kopf-pille {
  position: absolute; left: 0; top: 50%; height: 38px; width: var(--pw, 0px); border-radius: 999px;
  translate: var(--px, 0px) -50%; background: var(--pillen-grund); opacity: var(--po, 0);
  transition: translate .6s var(--feder), width .6s var(--feder), opacity .35s;
}
.thema-knopf { width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--text); transition: background-color .3s, transform .6s var(--feder); }
.thema-knopf:hover { background: var(--pillen-grund); }
.thema-knopf:active { transform: rotate(-30deg) scale(.92); }
.thema-knopf .ic { grid-area: 1 / 1; }
[data-thema="nacht"] .ic-mond, [data-thema="tag"] .ic-sonne { display: none; }
/* Sprachwahl DE · EN (Kopf und Fuß): leise, die aktuelle Sprache steht hell. */
.sprache { display: inline-flex; align-items: center; flex: none; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.sprache a { padding: 7px 6px; border-radius: 999px; color: var(--sehr-leise); text-decoration: none; transition: color .25s; }
.sprache a:hover, .sprache a[aria-current] { color: var(--text); }
.sprache span { color: var(--sehr-leise); }
.kopf .sprache { margin: 0 2px 0 4px; }
@media (max-width: 420px) {
  /* Am schmalen Handy nur die andere Sprache zeigen */
  .kopf .sprache a[aria-current], .kopf .sprache span { display: none; }
  .kopf .sprache { margin: 0; }
  .kopf-links a { padding: 8px 9px; }
}
@media (max-width: 360px) {
  .kopf-innen { padding: 0 4px 0 12px; gap: 2px; }
  .kopf .marke { gap: 7px; font-size: 18px; }
  .kopf .marke img { width: 23px; height: 23px; }
  .kopf-links a { padding: 8px 6px; }
  .kopf .sprache a { padding: 7px 5px; }
  .thema-knopf { width: 38px; height: 38px; }
}
@media (max-width: 720px) {
  .nur-breit { display: none; }
  .kopf-innen { height: 54px; padding-left: 14px; }
  .kopf.eng .kopf-innen { width: calc(100% - 24px); height: 54px; }
  .kopf-links a { padding: 8px 12px; }
}

/* ─────────────────────── Das Gerät (iPhone 17) ───────────────────────
   Alles hängt an EINER Größe: --b, die Gerätebreite. Prozent im padding
   messen am Elternteil, nicht am Gerät; deshalb steht hier nichts in
   Prozent, was von der Gerätebreite abhängen muss.
   Blende 1,7 % (1,2 mm von 71,5 mm), Außenradius 12,35 %,
   Dynamic Island 30 % breit, 3,4 % unter der Oberkante.             */
.iphone {
  --b: 240px;
  --m1: #6f6f75; --m2: #e9e9ee; --m3: #c6c6cc; --m4: #93939a; --m5: #d8d8de;
  position: relative; width: var(--b); height: calc(var(--b) * 2.0923);
  padding: calc(var(--b) * .017); border-radius: calc(var(--b) * .1235);
  background: linear-gradient(100deg, var(--m1) 0%, var(--m2) 5%, var(--m3) 11%, var(--m4) 20%, var(--m5) 47%, var(--m4) 68%, var(--m2) 86%, var(--m1) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .25),
    0 2px 6px rgba(6, 8, 15, .18), 0 calc(var(--b) * .16) calc(var(--b) * .3) calc(var(--b) * -.12) var(--geraet-schatten);
}
.iphone-schirm {
  position: relative; width: 100%; height: 100%; overflow: hidden; background: #050506;
  border-radius: calc(var(--b) * .1065);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06);
}
.iphone-schirm > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.iphone-insel { position: absolute; z-index: 2; left: 50%; top: calc(var(--b) * .044); width: calc(var(--b) * .29); height: calc(var(--b) * .085); translate: -50% 0; border-radius: 999px; background: #000; }
.iphone-glanz { position: absolute; z-index: 3; inset: calc(var(--b) * .017); border-radius: calc(var(--b) * .1065); pointer-events: none; background: linear-gradient(104deg, transparent 30%, rgba(255, 255, 255, .09) 44%, transparent 58%); }
.taste { position: absolute; z-index: 1; width: calc(var(--b) * .012); border-radius: 2px; background: linear-gradient(180deg, var(--m3), var(--m4) 35%, var(--m4) 65%, var(--m2)); }
.t-aktion, .t-laut, .t-leise { left: calc(var(--b) * -.0095); box-shadow: 1px 0 2px rgba(0, 0, 0, .35), inset 1px 0 0 rgba(255, 255, 255, .35); }
.t-seite, .t-kamera { right: calc(var(--b) * -.0095); box-shadow: -1px 0 2px rgba(0, 0, 0, .35), inset -1px 0 0 rgba(255, 255, 255, .35); }
.t-aktion { top: 15.5%; height: 3.6%; } .t-laut { top: 21.8%; height: 6.4%; } .t-leise { top: 29.6%; height: 6.4%; }
.t-seite { top: 23.5%; height: 9.2%; } .t-kamera { top: 41%; height: 4.4%; }

/* ───────────────────────────── Auftakt ───────────────────────────── */
.auftakt { position: relative; isolation: isolate; overflow: clip; min-height: 100dvh; display: grid; align-items: center; padding: calc(var(--kopf-h) + 32px) 0 48px; }
.licht { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease;
  -webkit-mask-image: radial-gradient(80% 75% at 70% 42%, #000 35%, transparent 80%); mask-image: radial-gradient(80% 75% at 70% 42%, #000 35%, transparent 80%); }
.licht.ohne-gl { background: radial-gradient(60% 50% at 72% 40%, rgba(124, 63, 135, .5), transparent 70%), radial-gradient(40% 35% at 78% 55%, rgba(242, 112, 74, .3), transparent 70%); }
.licht.an { opacity: .78; }
.licht.ohne-gl { opacity: 1; }
[data-thema="tag"] .licht.an, [data-thema="tag"] .licht.ohne-gl { opacity: 0; }
.auftakt::before { content: ""; position: absolute; inset: 0; z-index: -3; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(55% 50% at 74% 40%, rgba(242, 112, 74, .2), transparent 70%), radial-gradient(50% 50% at 88% 72%, rgba(162, 89, 181, .2), transparent 70%), radial-gradient(40% 40% at 10% 10%, rgba(162, 89, 181, .08), transparent 70%); }
[data-thema="tag"] .auftakt::before { opacity: 1; }
.auftakt::after { content: ""; position: absolute; inset: auto 0 0 0; height: 22%; z-index: -1; background: linear-gradient(transparent, var(--grund)); pointer-events: none; }
.auftakt-innen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.auftakt h1 { font-size: clamp(46px, 5.5vw, 88px); line-height: .98; letter-spacing: -.045em; padding-bottom: .06em; }
.auftakt h1 .zeile { display: block; overflow: hidden; padding-bottom: .04em; }
.auftakt h1 .zeile > span { display: inline-block; }
.auftakt-satz { margin-top: 26px; max-width: 30ch; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; color: var(--leise); }
.auftakt-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.von-hinweis { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 8px 8px 8px 14px; border-radius: 999px; font-size: 14px; color: var(--text); background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-rand); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.von-hinweis[hidden] { display: none; }
.von-hinweis a { padding: 6px 12px; border-radius: 999px; background: var(--akzent); color: var(--auf-akzent); text-decoration: none; font-weight: 600; }

/* Eintritt: Zeilen steigen aus ihrer Maske, Geräte fächern sich auf. */
.js .auftakt h1 .zeile > span { transform: translateY(105%); transition: transform 1.1s var(--feder); transition-delay: calc(var(--z, 0) * 90ms + 80ms); }
.js .auftakt h1 .zeile:nth-child(2) > span { --z: 1; } .js .auftakt h1 .zeile:nth-child(3) > span { --z: 2; }
.js .auftakt-satz, .js .auftakt-knoepfe { transform: translateY(16px); transition: transform 1.1s var(--feder); }
.js .auftakt-satz { transition-delay: .38s; } .js .auftakt-knoepfe { transition-delay: .5s; }
/* Der Text wartet auf nichts: Er ist das größte Element im ersten Bild (LCP). */
.text-bereit .auftakt h1 .zeile > span { transform: none; }
.text-bereit .auftakt-satz, .text-bereit .auftakt-knoepfe { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .auftakt { align-items: start; padding: calc(var(--kopf-h) + 30px) 0 0; }
  .auftakt-innen { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .auftakt h1 { font-size: clamp(40px, 10.6vw, 64px); }
  .auftakt-satz { margin-top: 18px; font-size: 17px; max-width: 34ch; }
  .auftakt-knoepfe { margin-top: 24px; gap: 10px; }
  .auftakt-knoepfe { flex-wrap: nowrap; }
  .auftakt-knoepfe .knopf { height: 50px; padding: 0 18px; font-size: 15px; gap: 8px; }
  .licht { -webkit-mask-image: radial-gradient(90% 60% at 55% 78%, #000 30%, transparent 80%); mask-image: radial-gradient(90% 60% at 55% 78%, #000 30%, transparent 80%); }
}

/* Die Aufstellung: fünf Geräte als gefächerte Hand. */
.aufstellung {
  --hoehe: clamp(460px, 74vh, 660px);
  /* Breite des Films: 94 % der rechten Rasterspalte, aus denselben Maßen wie das Raster */
  --film-b: calc((min(100vw - 2 * var(--rand), var(--breite)) - clamp(24px, 4vw, 64px)) * 1.05 / 2.05 * .94);
  /* Geräte so groß wie möglich, aber ihre Oberkante (93 % minus Gerätehöhe)
     bleibt unter dem schwebenden Zeichen (68 % der Filmhöhe). Auf niedrigen
     Laptop-Bildschirmen werden sie dafür kleiner. */
  --b: max(104px, min(clamp(130px, 12vw, 180px), calc((var(--hoehe) * .93 - var(--film-b) * .3825 - 10px) / 2.0923)));
  --abstand: calc(var(--b) * .47); --mehr: 1;
  position: relative; height: var(--hoehe);
  transform: perspective(1800px) rotateX(var(--kx, 0deg)) rotateY(var(--ky, 0deg));
}
.aufstellung-boden { position: absolute; left: 6%; right: 6%; bottom: 2%; height: 22%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(242, 112, 74, .32), rgba(124, 63, 135, .18) 45%, transparent 72%); filter: blur(18px); pointer-events: none; }
[data-thema="tag"] .aufstellung-boden { background: radial-gradient(50% 50% at 50% 50%, rgba(124, 63, 135, .18), transparent 70%); }
.fach {
  position: absolute; left: 50%; bottom: 7%; width: var(--b); margin-left: calc(var(--b) / -2);
  display: block; text-decoration: none; color: inherit; z-index: calc(10 - var(--a));
  transform-origin: 50% 100%;
  transform:
    translate3d(calc(var(--i) * var(--abstand) * var(--spreiz) * var(--mehr)), calc(var(--a) * var(--a) * 10px + var(--a) * 10px - var(--heb, 0px)), 0)
    rotate(calc(var(--i) * 6.5deg * var(--spreiz) * var(--mehr)))
    scale(calc((1 - var(--a) * .075) * var(--gross, 1)));
  transition: transform 1.05s var(--feder);
  -webkit-tap-highlight-color: transparent;
}
.fach .iphone { --b: inherit; width: 100%; }
/* Der Film der bisherigen Startseite als Fenster HINTER den Geräten: oben
   schwebt das Effora-Zeichen frei, unten stehen die fünf Geräte davor, und
   das Bild läuft nach unten in den Grund aus (Maske statt Kante). Die Geräte
   sind dafür etwas kleiner als vorher, damit ihre Oberkante unter dem
   Zeichen bleibt. Simon am 05.10.: „mit in den Kopf ganz oben einbauen“. */
.held-film {
  position: absolute; left: 3%; right: 3%; top: 0; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--radius) * 1.15); background: #e8e3df;
  /* Oben eine klare Kante, nach unten läuft das Bild hinter den Geräten aus.
     Rundum weich (getestet) wirkte es verwaschen. */
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 97%); mask-image: linear-gradient(180deg, #000 50%, transparent 97%);
}
.held-film img, .held-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.held-film video { opacity: 0; transition: opacity 1s ease; }
.held-film video.laeuft { opacity: 1; }
/* Eintritt nur über die Lage, nie über Deckkraft: Das Standbild ist groß und
   zählt sonst als spätes größtes Element (LCP). */
.js:not(.bereit) .held-film { transform: translate3d(0, 28px, 0) scale(.96); }
.js .held-film { transition: transform 1.2s var(--feder) .05s; }
.fach-name {
  position: absolute; left: 50%; bottom: calc(100% + 14px); translate: -50% 6px; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 8px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap;
  background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-rand); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .3s, translate .45s var(--feder); pointer-events: none;
}
.fach-name img { border-radius: 6px; }
@media (max-width: 900px) {
  /* Höhe so, dass die Oberkante der Geräte (88 % minus Gerätehöhe) unter dem
     schwebenden Zeichen bleibt (68 % der Filmhöhe, Film 16:9): für jede Breite. */
  .aufstellung { --b: min(34vw, 176px); --abstand: calc(var(--b) * .52); margin-inline: calc(-1 * var(--rand));
    height: calc((min(94vw, 520px) * .3825 + min(34vw, 176px) * 2.0923) / .88 + 12px); }
  .held-film { left: 50%; right: auto; width: min(94%, 520px); translate: -50% 0; }
  .fach { bottom: 12%; }
}
@media (hover: hover) and (pointer: fine) {
  .aufstellung:has(.fach:hover) { --mehr: 1.1; }
  .fach:hover { --heb: 28px; --gross: 1.05; z-index: 20; }
  .fach:hover .fach-name { opacity: 1; translate: -50% 0; }
}
.fach:focus-visible { z-index: 20; --heb: 20px; outline: none; }
.fach:focus-visible .iphone { outline: 2px solid var(--akzent); outline-offset: 6px; }
/* vor dem Eintritt: alle Geräte gesammelt unten in der Mitte */
.js:not(.bereit) .aufstellung .fach { transform: translate3d(0, 90px, 0) rotate(calc(var(--i) * 1.5deg)) scale(.9); }
.js .aufstellung .fach { transition: transform 1.15s var(--feder); transition-delay: calc(var(--a) * 90ms + 120ms); }
.js .aufstellung.gelandet .fach { transition-delay: 0ms; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .aufstellung { animation: zusammen linear both; animation-timeline: view(); animation-range: exit 5% exit 95%; }
    @keyframes zusammen { to { --spreiz: .5; opacity: .25; translate: 0 70px; } }
  }
}

/* ────────────────────────── Abschnittsköpfe ────────────────────────── */
section { position: relative; }
.apps, .warum, .laden { padding-block: clamp(80px, 11vw, 150px); }
.apps { padding-top: clamp(60px, 8vw, 110px); }
.abschnitt-kopf { max-width: 720px; }
.abschnitt-kopf h2 { font-size: clamp(36px, 4.3vw, 64px); line-height: 1.02; letter-spacing: -.04em; }
.abschnitt-kopf p { margin-top: 18px; font-size: clamp(17px, 1.4vw, 20px); color: var(--leise); max-width: 46ch; }
.abschnitt-kopf p.sprach-hinweis { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--sehr-leise); max-width: 60ch; }

/* ─────────────────────────── App-Kapitel ─────────────────────────── */
.kapitel-kopf { display: flex; align-items: center; gap: 16px; }
.app-zeichen { width: 56px; height: 56px; border-radius: 14px; flex: none; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
.kapitel-kopf h3 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 6px; }
.kapitel-satz { margin-top: 28px; font-family: "Outfit", sans-serif; font-weight: 500; font-size: clamp(32px, 3.4vw, 54px); line-height: 1.03; letter-spacing: -.038em; text-wrap: balance; }
.kapitel-text { margin-top: 18px; max-width: 44ch; font-size: clamp(16px, 1.3vw, 19px); color: var(--leise); }
.faehigkeiten { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 16px; max-width: 520px; }
.faehigkeiten li { display: flex; gap: 14px; align-items: flex-start; }
.faehigkeiten b { display: block; font-weight: 600; font-size: 16px; letter-spacing: -.005em; }
.faehigkeiten li span:not(.f-zeichen) { display: block; color: var(--leise); font-size: 15px; line-height: 1.5; }
.f-zeichen { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--akzent-text); background: color-mix(in srgb, var(--akzent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 26%, transparent); }
.f-zeichen .ic { width: 19px; height: 19px; }
.zahlen { display: flex; gap: clamp(28px, 4vw, 56px); margin: 30px 0 0; }
.zahlen dt { font-family: "Outfit", sans-serif; font-weight: 500; font-size: clamp(34px, 3vw, 46px); letter-spacing: -.04em; line-height: 1; }
.zahlen dd { margin: 6px 0 0; font-size: 14px; color: var(--leise); max-width: 18ch; line-height: 1.4; }
.kapitel .laden-reihe { margin-top: 32px; }
.kapitel-geraet { display: none; }
.mini-laden, .verweilen { display: none; }

/* Rechner: Kapitel links, EIN Gerät klebt rechts */
@media (min-width: 1024px) {
  .kapitel-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 110px); margin-top: 24px; }
  .kapitel { min-height: 100svh; display: flex; align-items: center; padding-block: 8vh; }
  .js .kapitel-innen { opacity: .28; transform: translateY(18px) scale(.985); transform-origin: 0 50%; transition: opacity .7s ease, transform .9s var(--feder); }
  .js .kapitel.aktiv .kapitel-innen { opacity: 1; transform: none; }
  .buehne-kleben { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; padding-top: 40px; }
  .buehne-licht { position: absolute; inset: 12% 0 18%; z-index: -1; border-radius: 50%; filter: blur(40px); opacity: .9; transition: background .8s ease;
    background: radial-gradient(40% 46% at var(--lx, 50%) var(--ly, 45%), rgba(242, 112, 74, .3), transparent 70%), radial-gradient(50% 55% at 50% 60%, rgba(124, 63, 135, .32), transparent 72%); }
  [data-thema="tag"] .buehne-licht { opacity: .55; }
  .iphone.gross { --b: min(330px, 23vw, calc((100svh - 200px) * .478)); }
  .rolle { will-change: transform; }
  .rolle img { display: block; width: 100%; height: auto; background: #050506; }
  .app-leiste { display: none !important; }
}

/* Dock: fünf Zeichen unter dem Gerät, die Nachbarn wachsen mit (wie am Mac) */
.dock { display: flex; align-items: flex-end; gap: 10px; padding: 10px 12px; border-radius: 22px; background: var(--glas); box-shadow: inset 0 0 0 1px var(--glas-rand), inset 0 1px 0 var(--glanz); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.dock a { position: relative; display: block; width: 44px; height: 44px; transform-origin: 50% 100%; transition: scale .4s var(--feder-weich); }
.dock img { width: 44px; height: 44px; border-radius: 11px; display: block; }
.dock a::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; border-radius: 50%; translate: -50% 0; background: var(--text); opacity: 0; transition: opacity .3s; }
.dock a[aria-current="true"]::after { opacity: .9; }
@media (hover: hover) and (pointer: fine) {
  .dock a:hover { scale: 1.32; }
  .dock a:hover + a, .dock a:has(+ a:hover) { scale: 1.14; }
}

/* Handy und Tablet: jede App eine Karte, die Karten stapeln sich */
@media (max-width: 1023px) {
  .buehne-spalte { display: none; }
  .kapitel-liste { margin-top: 36px; }
  /* VERWEILEN: Hinter jeder Karte liegt ein leerer Platzhalter. Solange man
     ihn durchscrollt, steht die Karte allein oben: Erst hebt sich das Gerät,
     dann läuft die App darin durch, danach schiebt sich die nächste Karte
     darüber. Simon am 04.10.: „man sieht nur einen kleinen Bildschirm der App,
     dann kommt schon die nächste.“ Ein Platzhalter und KEIN margin-bottom:
     Eine klebende Karte muss mit ihrem Außenabstand in die Liste passen. Mit
     95svh Außenabstand konnte die letzte Karte (Debita) gar nicht kleben und
     riss alle anderen mit nach oben (Simon am 05.10.: „bei Debita buggt es“). */
  .verweilen { display: block; height: var(--verweilen, 95svh); }
  .verweilen.kurz { height: calc(var(--verweilen, 95svh) * .4); }
  .kapitel {
    position: sticky; top: calc(var(--kopf-h) + 8px); height: calc(100svh - var(--kopf-h) - 20px); max-height: 900px;
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--radius); background: var(--karte); padding: 22px 20px 0;
    box-shadow: inset 0 0 0 1px var(--linie), inset 0 1px 0 var(--glanz), 0 -20px 40px -30px rgba(0, 0, 0, .55);
    transform-origin: 50% 0; transition: transform .6s var(--feder);
  }
  /* Heben und Zurücktreten sind ZUSTÄNDE mit Übergang, keine Werte, die das
     Skript je Bild setzt: So rechnet die Grafikkarte die Bewegung, und nichts
     ruckelt, wenn der Finger ungleichmäßig scrollt (Simon am 05.10.). */
  .kapitel.zurueck { transform: translateY(-10px) scale(.94); }
  .kapitel::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(70% 45% at 85% 100%, rgba(124, 63, 135, .3), transparent 70%), radial-gradient(60% 40% at 10% 100%, rgba(242, 112, 74, .16), transparent 70%); }
  .kapitel::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: #000; opacity: 0; transition: opacity .6s ease; }
  .kapitel.zurueck::after { opacity: .5; }
  [data-thema="tag"] .kapitel::after { background: #3a3550; }
  [data-thema="tag"] .kapitel.zurueck::after { opacity: .22; }
  .kapitel-innen { flex: none; }
  /* Beim Heben treten Satz, Text und Knöpfe zurück, der Kopf mit Name und
     kleinem Laden-Knopf bleibt. */
  .kapitel-innen > :not(.kapitel-kopf) { transition: opacity .4s ease .05s, transform .6s var(--feder); }
  .kapitel.gehoben .kapitel-innen > :not(.kapitel-kopf) { opacity: 0; transform: translateY(-16px); pointer-events: none; transition: opacity .25s ease, transform .5s var(--feder); }
  .mini-laden { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; height: 36px; padding: 0 14px 0 11px; border-radius: 999px;
    background: var(--text); color: var(--grund); font-weight: 600; font-size: 14px; text-decoration: none; flex: none;
    opacity: 0; transform: scale(.9); pointer-events: none; transition: opacity .3s ease, transform .45s var(--feder-weich); }
  .mini-laden .ic-marke { width: 16px; height: 16px; }
  .kapitel.gehoben .mini-laden { opacity: 1; transform: none; pointer-events: auto; transition-delay: .15s; }
  .mini-android { display: none; }
  [data-plattform="android"] .mini-android { display: inline-flex; }
  [data-plattform="android"] .mini-ios { display: none; }
  .app-zeichen { width: 46px; height: 46px; border-radius: 12px; }
  .kapitel-kopf { gap: 12px; }
  .kapitel-kopf h3 { font-size: 19px; margin-bottom: 4px; }
  .kapitel-satz { margin-top: 18px; font-size: clamp(28px, 7.4vw, 40px); }
  .kapitel-text { margin-top: 10px; font-size: 15.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .faehigkeiten { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; }
  .faehigkeiten::-webkit-scrollbar { display: none; }
  .faehigkeiten li { flex: none; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie); }
  .faehigkeiten li span:not(.f-zeichen) { display: none; }
  .faehigkeiten b { font-size: 14px; white-space: nowrap; }
  .f-zeichen { width: 30px; height: 30px; border-radius: 50%; }
  .f-zeichen .ic { width: 16px; height: 16px; }
  .zahlen { display: none; }
  .kapitel .laden-reihe { margin-top: 18px; }
  .kapitel .text-link { display: none; }
  .kapitel-geraet { display: block; position: relative; z-index: 1; flex: 1; min-height: 0; margin-top: 18px; }
  .kapitel-geraet .iphone { --b: min(64vw, 280px); margin: 0 auto; transform-origin: 50% 0; transition: transform .8s var(--feder); }
  .kapitel.gehoben .kapitel-geraet .iphone { transform: translateY(calc(var(--hub, 0px) * -1)) scale(1.03); }
  .kapitel-geraet .iphone-schirm { --S: calc(var(--b) * 2.058); }
  .kapitel-geraet .mini-rolle { height: auto; object-fit: initial; will-change: transform; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .kapitel { padding: 32px 36px 0; }
  .kapitel-geraet .iphone { --b: min(44vw, 300px); }
}

/* App-Leiste am Daumen (nur unter 1024 px) */
.app-leiste {
  position: fixed; left: 50%; z-index: 45; bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--vvu));
  display: flex; gap: 4px; padding: 6px; border-radius: 999px;
  background: var(--glas); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--glas-rand), inset 0 1px 0 var(--glanz), 0 18px 40px -20px rgba(0, 0, 0, .7);
  transform: translate(-50%, 160%); transition: transform .3s var(--feder); pointer-events: none;
}
.app-leiste.da { transform: translate(-50%, 0); pointer-events: auto; }
.app-leiste a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; position: relative; -webkit-tap-highlight-color: transparent; }
.app-leiste img { width: 34px; height: 34px; border-radius: 9px; transition: transform .4s var(--feder-weich); }
.app-leiste a[aria-current="true"] img { transform: scale(1.14); }
.app-leiste a::after { content: ""; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--text); opacity: 0; transition: opacity .3s; }
.app-leiste a[aria-current="true"]::after { opacity: .85; }

/* ───────────────────────────── Warum ───────────────────────────── */
.leitsatz { font-size: clamp(38px, 5.6vw, 92px); line-height: 1.0; letter-spacing: -.048em; max-width: 15ch; }
.leitsatz .wort { display: inline-block; transition: opacity .7s ease, filter .7s ease, transform .9s var(--feder); transition-delay: calc(var(--n) * 90ms + 120ms); }
.js .leitsatz:not(.sichtbar) .wort { opacity: .14; filter: blur(8px); transform: translateY(.12em); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(48px, 7vw, 96px); }
.zelle {
  position: relative; overflow: hidden; isolation: isolate; min-height: 290px; border-radius: var(--radius);
  padding: clamp(24px, 2.8vw, 36px); background: var(--karte); display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  box-shadow: inset 0 0 0 1px var(--linie), inset 0 1px 0 var(--glanz);
}
.zelle h3 { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.035em; line-height: 1.05; }
.zelle p { color: var(--leise); max-width: 40ch; }
.z-zeichen { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: auto; background: var(--pillen-grund); box-shadow: inset 0 0 0 1px var(--glas-rand); }
.z-zeichen .ic { width: 22px; height: 22px; }
.z-konto { grid-column: span 2; }
.z-wirbel { position: absolute; z-index: -1; right: -6%; top: -30%; width: 62%; opacity: .07; transform: rotate(-14deg); pointer-events: none; }
[data-thema="tag"] .z-wirbel { filter: invert(1); opacity: .05; }
.z-tracking { background: linear-gradient(140deg, #C9482A, #6E3477 85%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); color: #fff; }
.z-tracking p { color: rgba(255, 255, 255, .86); }
.z-tracking .z-zeichen { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.z-erinnert { padding-top: 0; justify-content: flex-start; }
.z-bild { height: 210px; margin: 0 calc(-1 * clamp(24px, 2.8vw, 36px)) 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 50%, transparent 98%); mask-image: linear-gradient(#000 50%, transparent 98%); }
.z-bild img { display: block; width: 100%; height: auto; transform: translateY(-2%); }
.z-aufgabe { grid-column: span 2; }
.aufgaben { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.aufgaben li { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; font-weight: 600; font-size: 15px; background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie); }
.aufgaben img { border-radius: 10px; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .z-konto, .z-aufgabe { grid-column: auto; }
  .zelle { min-height: 0; }
  .z-konto, .z-tracking { min-height: 240px; }
}

/* ───────────────────────────── Laden ───────────────────────────── */
.laden-liste { list-style: none; padding: 0; margin: clamp(36px, 5vw, 56px) 0 0; border-radius: var(--radius); background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie), inset 0 1px 0 var(--glanz); overflow: clip; }
.laden-zeile { display: grid; grid-template-columns: 56px minmax(0, 1.3fr) minmax(0, .7fr) auto; align-items: center; gap: 20px; padding: 18px 22px; transition: background-color .3s; }
.laden-zeile + .laden-zeile { box-shadow: inset 0 1px 0 var(--linie); }
.laden-zeile:hover { background: var(--karte-hoch); }
.laden-zeile > img { width: 56px; height: 56px; border-radius: 14px; }
.lz-text b { display: block; font: 600 19px/1.2 "Outfit", sans-serif; letter-spacing: -.015em; }
.lz-text span { color: var(--leise); font-size: 15px; }
.lz-wo { color: var(--leise); font-size: 14px; }
.laden-zeile.hast-du { opacity: .55; }
.hast-du-marke { display: inline-flex; align-items: center; height: 24px; margin-left: 8px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; vertical-align: 2px; color: var(--text); background: var(--pillen-grund); }
@media (max-width: 760px) {
  .laden-zeile { grid-template-columns: 48px minmax(0, 1fr); gap: 12px 14px; padding: 16px; }
  .laden-zeile > img { width: 48px; height: 48px; border-radius: 12px; }
  .lz-wo { display: none; }
  .laden-zeile .laden-reihe { grid-column: 1 / -1; }
}

/* ────────────────────────────── Fuß ────────────────────────────── */
.fuss { padding: clamp(56px, 8vw, 96px) 0 calc(36px + env(safe-area-inset-bottom)); box-shadow: inset 0 1px 0 var(--linie); }
.fuss-innen { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.fuss-marke p { margin-top: 14px; color: var(--leise); max-width: 30ch; }
.fuss-sozial { display: flex; gap: 10px; margin-top: 22px; }
.fuss-sozial a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--linie-stark); transition: background-color .3s; }
.fuss-sozial a:hover { background: var(--pillen-grund); }
.fuss-sozial .ic-marke { width: 18px; height: 18px; }
.fuss-spalte { display: flex; flex-direction: column; gap: 10px; }
.fuss-spalte h2 { font: 600 14px/1.4 "Geist", sans-serif; color: var(--sehr-leise); letter-spacing: 0; margin-bottom: 4px; }
.fuss-spalte a { color: var(--leise); text-decoration: none; font-size: 15px; width: fit-content; transition: color .25s; }
.fuss-spalte a:hover { color: var(--text); }
.fuss-unten { margin-top: 48px; color: var(--sehr-leise); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fuss-unten .sprache { margin-right: -6px; }
@media (max-width: 760px) {
  .fuss-innen { grid-template-columns: 1fr 1fr; }
  .fuss-marke { grid-column: 1 / -1; }
}

/* ─────────────────────────── QR-Blatt ─────────────────────────── */
.qr-dialog {
  border: 0; padding: 30px 28px 26px; width: min(380px, calc(100% - 32px)); border-radius: var(--radius); text-align: center;
  background: var(--karte); color: var(--text); box-shadow: inset 0 0 0 1px var(--linie), 0 50px 120px -40px rgba(0, 0, 0, .9);
}
.qr-dialog[open] { animation: blatt-auf .45s var(--feder); }
@keyframes blatt-auf { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.qr-dialog::backdrop { background: rgba(5, 5, 8, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qr-zu-form { position: absolute; top: 12px; right: 12px; margin: 0; }
.qr-zu { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--pillen-grund); }
.qr-app { width: 64px; height: 64px; border-radius: 16px; }
.qr-dialog h2 { margin-top: 12px; font-size: 24px; letter-spacing: -.025em; }
.qr-reiter { display: inline-flex; gap: 4px; margin-top: 16px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linie); }
.qr-reiter button { border: 0; height: 34px; padding: 0 16px; border-radius: 999px; background: transparent; color: var(--leise); font-weight: 600; font-size: 14px; cursor: pointer; }
.qr-reiter button[aria-selected="true"] { background: var(--text); color: var(--grund); }
.qr-reiter button[hidden] { display: none; }
.qr-feld { width: 252px; margin: 18px auto 0; padding: 16px; border-radius: var(--radius-klein); background: #fff; }
.qr-feld img { display: block; width: 220px; height: 220px; }
.qr-satz { margin-top: 16px; color: var(--leise); font-size: 14px; }

/* ──────────────── Erscheinen beim Scrollen (zweigleisig) ────────────────
   Wo der Browser Scroll-Zeitleisten kann, macht CSS das allein. Sonst setzt
   das Skript `.sichtbar` per IntersectionObserver. Ohne Skript bleibt alles
   sichtbar: Die Ausgangslage hängt an `.js`.                             */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .erscheinen { animation: erscheinen linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes erscheinen { from { opacity: 0; transform: translateY(36px); } }
  }
  @supports not (animation-timeline: view()) {
    .js .erscheinen { opacity: 0; transform: translateY(36px); transition: opacity .9s ease, transform 1s var(--feder); }
    .js .erscheinen.sichtbar { opacity: 1; transform: none; }
  }
}

/* Thema-Wechsel als Kreis aus dem Knopf (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* Weniger Bewegung: alles steht, nichts treibt */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js .auftakt h1 .zeile > span, .js .auftakt-satz, .js .auftakt-knoepfe { transform: none; opacity: 1; }
  .js:not(.bereit) .aufstellung .fach { opacity: 1; }
  .verweilen { --verweilen: 0px; }
}