/* Schriften: selbst gehostet, Grundzeichen (latin) und Erweiterung (latin-ext, u. a. Türkisch ğ ş İ).
   Die Erweiterung lädt der Browser nur, wenn eine Seite solche Zeichen enthält. Lizenz: SIL Open Font License 1.1 */
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 500 900; font-stretch: 100% 125%; font-display: swap; src: url("../fonts/mona-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mona Sans"; font-style: normal; font-weight: 500 900; font-stretch: 100% 125%; font-display: swap; src: url("../fonts/mona-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/martian-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/martian-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Layout: eine lange Pflaumen-Nacht wie der Hintergrund der App. Inhalte in einer 1200er-Spalte,
   echte Screenshots in iPhone-Rahmen als Fixpunkte, unten schwebt die Glas-Leiste aus der App. */
:root {
  color-scheme: dark;
  /* Farbe: die Darstellung „Schwarz“ der App (fast schwarz, kühles Nachtblau in den Flächen) mit Pink aus dem Logo als Akzent.
     Bernstein wie in der App nur für Zahlen und kleine Marken, damit es nicht bunt wird. */
  --nacht: #07080B;
  --pflaume: #0F1118;
  --flaeche: #161A24;
  --flaeche-hoch: #222735;
  --rosa: #FF7FB4;
  --rosa-tief: #2B0F20;
  --pfirsich: #FFB08A;
  --flieder: #8C9BFF;
  --bernstein: #F2B544;
  --text: #F4F5F7;
  --leise: #A3AABB;
  --schwach: #6A7186;
  --glas: rgba(255, 255, 255, 0.045);
  --glas-hoch: rgba(255, 255, 255, 0.08);
  --rand: rgba(255, 255, 255, 0.09);
  --rand-hell: rgba(255, 255, 255, 0.16);
  --gefahr: #FF6B6B;
  /* Symbolfarben wie in den Einstellungen der App */
  --c-blau: #3B7BF6;
  --c-gruen: #2FBF71;
  --c-grau: #7D7F8C;
  --c-violett: #8C6BEB;
  --c-rot: #E8504F;
  --c-tuerkis: #1FB5C9;
  --c-pink: #E5487F;
  --c-orange: #D9822B;
  /* Schrift: Mona Sans in normaler Breite, enger gesetzt, ohne Verläufe. Wirkt ruhig und hochwertig. */
  --f-display: "Mona Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-display-breite: 100%;
  --f-display-mass: 1;
  --f-text: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-ios: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  --t-hero: clamp(2.9rem, 1.2rem + 6vw, 6.4rem);
  --t-h2: clamp(2.1rem, 1.2rem + 3.4vw, 4rem);
  --t-h3: 1.22rem;
  --t-lead: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  --t-klein: 0.9rem;
  --t-mono: 0.7rem;
  /* Maße: breitere Spalte, mehr Luft zwischen den Abschnitten, weniger Rundung */
  --spalte: 1200px;
  --seite: clamp(16px, 4vw, 40px);
  --abstand: clamp(96px, 13vw, 180px);
  --rund: 22px;
  --weich: cubic-bezier(0.2, 0.8, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html:not(.ruhig) { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--nacht);
  color: var(--text);
  font-family: var(--f-text);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rosa-tief); outline-color: var(--rosa); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--f-display); font-stretch: var(--f-display-breite); text-wrap: balance; }
h3, .marke, .tarif strong, .fakt strong, .frage summary, .ab-titel { font-stretch: var(--f-display-breite); }
h1 {
  font-size: calc(var(--t-hero) * var(--f-display-mass));
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
h2 {
  font-size: calc(var(--t-h2) * var(--f-display-mass));
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
p { text-wrap: pretty; }
/* Hervorgehobene Wörter (*Sternchen* im Admin): kein Farbverlauf mehr, nur leiser als der Rest. Die Überschrift bleibt ruhig. */
h1 em, h2 em, .verlauf { font-style: normal; color: var(--leise); }
.augenbraue {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--schwach);
}
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--leise); max-width: 60ch; }
.klein { font-size: var(--t-klein); color: var(--schwach); }
.spalte { max-width: var(--spalte); margin-inline: auto; padding-inline: var(--seite); }
.abschnitt { position: relative; padding-block: var(--abstand); scroll-margin-top: calc(28px - var(--abstand)); }
/* Sprung zum Anfang (Logo, Leiste „Start“, Link von Unterseiten): ganz nach oben, die Kopfzeile bleibt sichtbar.
   Ohne das landete die Seite mit dem Abschnitt „Start“ am oberen Rand und die Kopfzeile darüber war weggescrollt. */
#start { scroll-margin-top: 200px; }
.abschnitt-kopf { display: grid; gap: 18px; max-width: 820px; margin-bottom: clamp(44px, 6vw, 80px); }
/* Kapitelzeile: kleine Zeile mit kurzer Linie davor, wie eine Kapitelnummer in einem Handbuch */
.abschnitt-kopf .augenbraue, .chat-text > .augenbraue, .geschichte-text > .augenbraue, .de-text > .augenbraue, .darstellungen .augenbraue, .schluss .augenbraue { display: flex; align-items: center; gap: 12px; }
.abschnitt-kopf .augenbraue::before, .chat-text > .augenbraue::before, .geschichte-text > .augenbraue::before, .de-text > .augenbraue::before, .darstellungen .augenbraue::before { content: ""; width: 22px; height: 1px; background: var(--schwach); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Himmel: fast schwarz, oben ein leiser Nachtblau-Schimmer wie in der App; nichts, das beim Scrollen wandert ---------- */
.himmel { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(90% 55% at 50% -10%, rgba(74, 92, 149, 0.34) 0%, transparent 70%), var(--nacht); }
.fleck { display: none; }

/* ---------- Kopf ---------- */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--rand); max-width: none; padding-inline: clamp(16px, 4vw, 56px); }
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; }
.marke svg { width: 26px; height: 26px; }
.bald { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--rand); background: var(--glas);
  font-size: 0.82rem; color: var(--leise); }
.bald::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-gruen); }
@media (max-width: 480px) { .bald .lang { display: none; } }
.kopf-rechts { display: flex; align-items: center; gap: 22px; }
.kopf-nav { display: flex; gap: 28px; }
.kopf-nav a, .kopf-panel a { color: var(--leise); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
/* Links im Kopf als Knöpfe: Glas-Fläche mit Rand, die aktuelle Seite mit rosa Rand */
.kopf-nav a { padding: 6px 0; color: var(--leise); font-size: 0.86rem; font-weight: 500; transition: color 0.2s ease; }
.kopf-nav a:hover { color: var(--text); }
.kopf-nav a[aria-current="page"] { color: var(--text); }
/* Große Knöpfe zu den Unterseiten über „Gut zu wissen“ */
.unterseiten { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; margin-bottom: clamp(48px, 7vw, 80px); padding-bottom: 28px; border-bottom: 1px solid var(--rand); }
.unterseiten .knopf--gross { padding: 8px 0; min-width: 0; justify-content: center; gap: 10px; font-size: 0.98rem; font-weight: 600; text-decoration: none; color: var(--leise); background: none; border: 0; border-radius: 0; }
.unterseiten .knopf--gross:hover { background: none; color: var(--text); }
.knopf--gross svg { width: 22px; height: 22px; }
.knopf--gross svg:last-child { width: 18px; height: 18px; color: var(--schwach); margin-left: 4px; }
.knopf--gross .flagge { flex: none; }
@media (max-width: 480px) { .unterseiten .knopf--gross { width: 100%; justify-content: center; } }
/* Menü-Knopf mit Glas-Fläche: nur auf schmalen Bildschirmen, dort verschwinden die Links neben dem Logo */
.kopf-menue { position: relative; display: none; }
.kopf-menue summary { list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--rand); background: var(--glas); }
.kopf-menue summary::-webkit-details-marker { display: none; }
.kopf-menue summary .i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kopf-menue[open] summary { background: var(--glas-hoch); }
.kopf-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 230px; display: grid; padding: 6px;
  border-radius: 20px; border: 1px solid var(--rand); background: rgba(18, 20, 28, 0.97); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.7); }
.kopf-panel a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-radius: 14px; color: var(--text); font-size: 1rem; }
.kopf-panel a:hover, .kopf-panel a[aria-current="page"] { background: var(--glas-hoch); }
.kopf-panel .i { width: 18px; height: 18px; color: var(--schwach); }
/* Sprachumschalter: Weltkugel mit Kürzel, darunter die sechs Sprachen */
.sprach-wahl { position: relative; }
.sprach-wahl summary { list-style: none; cursor: pointer; height: 40px; padding: 0 12px 0 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--rand); background: var(--glas); color: var(--text); font: 700 0.78rem/1 var(--f-mono); letter-spacing: 0.08em; }
.sprach-wahl summary::-webkit-details-marker { display: none; }
.sprach-wahl summary .i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sprach-wahl summary:hover, .sprach-wahl[open] summary { background: var(--glas-hoch); }
.sprach-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 31; min-width: 200px; display: grid; padding: 6px;
  border-radius: 20px; border: 1px solid var(--rand); background: rgba(18, 20, 28, 0.97); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.7); }
.sprach-panel a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; color: var(--text); text-decoration: none; font-size: 1rem; }
.sprach-panel a b { width: 26px; font: 700 0.72rem/1 var(--f-mono); letter-spacing: 0.08em; color: var(--schwach); }
.sprach-panel a:hover, .sprach-panel a[aria-current="true"] { background: var(--glas-hoch); }
.sprach-panel a[aria-current="true"] b { color: var(--rosa); }
@media (max-width: 880px) {
  .kopf-rechts { gap: 10px; }
  .kopf-nav { display: none; }
  .kopf-menue { display: block; }
}
/* Schmale Handys: Sprachknopf nur als Weltkugel; ganz schmal entfällt der Hinweis „Erscheint bald“ (steht auch an den Store-Knöpfen) */
@media (max-width: 480px) {
  .sprach-wahl summary { width: 40px; padding: 0; justify-content: center; }
  .sprach-wahl summary span { display: none; }
}
@media (max-width: 420px) { .kopf .bald { display: none; } }
/* Mittlere Breiten mit Seiten-Links im Kopf: Hinweis „Erscheint bald“ weglassen, sonst ragt der Sprachknopf über den Rand */
@media (min-width: 881px) and (max-width: 1260px) { .kopf .bald { display: none; } }

/* ---------- iPhone-Rahmen ---------- */
.telefon {
  --b: var(--breite, 300px);
  position: relative;
  width: var(--b);
  max-width: 100%;
  padding: calc(var(--b) * 0.03);
  border-radius: calc(var(--b) * 0.168);
  background: linear-gradient(150deg, #3a3d46 0%, #15171c 34%, #08090c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 0 0 calc(var(--b) * 0.009) #050507,
    0 50px 90px -34px rgba(0, 0, 0, 0.85),
    0 24px 50px -26px rgba(74, 92, 149, 0.35);
}
.telefon::before, .telefon::after { content: ""; position: absolute; width: calc(var(--b) * 0.011); border-radius: 3px; background: #2a2d35; }
.telefon::before { right: calc(var(--b) * -0.009); top: 25%; height: 10%; }
.telefon::after { left: calc(var(--b) * -0.009); top: 19%; height: 7%; }
.schirm {
  position: relative;
  aspect-ratio: 1206 / 2622;
  border-radius: calc(var(--b) * 0.14);
  overflow: hidden;
  background: #0b0c10;
  container-type: inline-size;
  isolation: isolate;
}
.schirm > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.unterschrift { margin-top: 16px; text-align: center; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--schwach); }

/* Gemeinsame Teile der nachgebauten Bildschirme (in cqw, damit sie mit dem Rahmen wachsen) */
.ios-zeit { position: absolute; top: 5.4cqw; left: 12.4cqw; z-index: 3; font: 600 4.5cqw/1 var(--f-ios); color: #fff; letter-spacing: 0.01em; }
.ios-insel { position: absolute; top: 3.5cqw; left: 34.5cqw; width: 31cqw; height: 9cqw; border-radius: 5cqw; background: #000; z-index: 3; }
.app-grund {
  background:
    radial-gradient(85cqw 85cqw at 92% 3%, rgba(255, 127, 180, 0.55), transparent 70%),
    radial-gradient(75cqw 75cqw at 0% 52%, rgba(200, 138, 240, 0.4), transparent 70%),
    radial-gradient(85cqw 85cqw at 92% 100%, rgba(255, 170, 128, 0.38), transparent 70%),
    linear-gradient(170deg, #4E2149, #6A2D60 55%, #7A3552);
}

/* Sperrbildschirm */
.sperre { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: 26cqw; color: #F4F5F7; font-family: var(--f-ios); }
.sperre-schloss { width: 15cqw; height: 15cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.15); display: grid; place-items: center; }
.sperre-schloss svg { width: 7.4cqw; height: 7.4cqw; stroke-width: 2; }
.sperre-titel { margin-top: 4.6cqw; font-size: 6.4cqw; font-weight: 700; line-height: 1.1; }
.sperre-text { margin-top: 1.8cqw; font-size: 3.8cqw; color: #F2D4E8; min-height: 5cqw; text-align: center; padding-inline: 6cqw; line-height: 1.3; }
.punkte { display: flex; gap: 4.4cqw; margin-top: 7.4cqw; }
.punkte i { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; border: 0.5cqw solid rgba(255, 255, 255, 0.78); transition: background 0.12s; }
.punkte i.voll { background: #fff; }
.tasten { display: grid; grid-template-columns: repeat(3, 19cqw); gap: 4cqw 6.6cqw; margin-top: 10cqw; }
.taste { width: 19cqw; height: 19cqw; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, 0.14); color: #fff;
  font: 400 8.4cqw/1 var(--f-ios); display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.taste svg { width: 8cqw; height: 8cqw; stroke-width: 1.7; }
.taste--still { background: transparent; }
.sperre-link { margin-top: auto; margin-bottom: 9cqw; font-size: 3.8cqw; font-weight: 500; color: var(--rosa); }

/* ---------- Hero: mittig, Text oben, darunter das Handy in einer angedeuteten Tresortür (zwei feine Ringe) ---------- */
.hero { position: relative; overflow-x: clip; padding-block: clamp(56px, 8vw, 110px) clamp(60px, 8vw, 110px); }
.hero-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(44px, 6vw, 72px); justify-items: center; }
.hero-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: center; text-align: center; width: 100%; max-width: 820px; min-width: 0; }
.hero-text > * { max-width: 100%; }
.hero-text h1 { max-width: 14ch; }
.hero-text .lead { max-width: 60ch; font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem); }
.hero-text > .augenbraue { display: none; }
.laden { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.store { display: inline-flex; align-items: center; gap: 11px; padding: 12px 22px 12px 16px; border-radius: 999px; line-height: 1.15;
  font-weight: 600; font-size: 0.98rem; cursor: default; user-select: none; transition: background 0.2s, border-color 0.2s; }
.store small { display: block; font-size: 0.7rem; font-weight: 500; opacity: 0.7; }
a.store { text-decoration: none; cursor: pointer; }
.store--voll { background: var(--text); color: #0b0c10; }
.store--voll:hover { background: #fff; }
.store--glas { background: transparent; border: 1px solid var(--rand-hell); color: var(--text); }
a.store--glas:hover { background: var(--glas); }
/* Drei Fakten als Zahl plus Zeile, mit feinen Linien dazwischen */
.fakten { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 0; font-size: var(--t-klein); color: var(--leise); }
.fakten li { display: inline-flex; align-items: center; gap: 9px; padding: 0 26px; border-left: 1px solid var(--rand); }
.fakten li:first-child { border-left: 0; }
.fakten svg { width: 17px; height: 17px; color: var(--schwach); }

.hero-buehne { --breite: clamp(230px, 22vw, 280px); position: relative; display: grid; place-items: center; width: min(100%, 640px); max-width: 100%; aspect-ratio: 1; }
/* Die Tresortür: ein weicher Metallring (Kegelverlauf) mit einer feinen pinken Linie innen, wie der Lichtkranz des App-Symbols */
.hero-glut { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--pflaume) 0 51.5%, transparent 51.8%), conic-gradient(from 0deg, #262a33, #101218, #262a33, #101218, #262a33); }
.hero-glut::before { content: ""; position: absolute; inset: 3%; border-radius: 50%; border: 1px solid var(--rand); }
.hero-glut::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; border: 1px solid var(--rosa); opacity: 0.5; }
.hero-foto { display: none; }
.telefon--hero { z-index: 1; transform: perspective(1400px) rotateX(calc(var(--hp, 0) * 10deg)) scale(calc(1 - var(--hp, 0) * 0.06)); transform-origin: 50% 0; }
.chip { display: none; }
.hero-thema { position: absolute; left: 50%; bottom: 7%; translate: -50% 0; z-index: 2; display: flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--rand);
  background: rgba(18, 20, 28, 0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: chip-rein 0.7s var(--weich) 2.9s both; }
.hero-thema button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border: 0; border-radius: 999px; background: transparent;
  color: var(--leise); font: inherit; font-size: 0.82rem; cursor: pointer; transition: background 0.48s var(--weich), color 0.48s var(--weich); }
.hero-thema button i { width: 18px; height: 18px; border-radius: 50%; background: var(--fl); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.hero-thema button[aria-pressed="true"] { background: var(--glas-hoch); color: var(--text); font-weight: 600; }
.hero-thema button:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
@media (max-width: 679px) {
  .hero-buehne { --breite: clamp(190px, 56vw, 240px); width: min(100%, 360px); }
  .hero-text h1 { max-width: 100%; }
  .kopf .bald { display: none; }
  .fakten li { padding: 0 14px; }
}

/* Ladefolge: PIN wird getippt, der Tresor öffnet sich */
.hero-sperre .punkte i { animation: punkt-an 0.01s linear both; animation-delay: calc(0.7s + var(--n) * 0.2s); }
.hero-sperre .taste[style] { animation: taste-druck 0.32s ease-out both; animation-delay: calc(0.68s + var(--n) * 0.2s); }
.hero-sperre { animation: aufschliessen 0.75s cubic-bezier(0.7, 0, 0.2, 1) 2.05s both; }
.telefon--hero .schirm > img { animation: dahinter 0.9s var(--weich) 2.1s both; }
/* Zweites Farbthema (Schwarz): Klasse „an“ setzt js/tresory.js, alle 8 s oder per Schalter; weich im Takt von 480 ms */
.telefon--hero .schirm > img.hero-wechsel { opacity: 0; transition: opacity 0.48s var(--weich); }
.telefon--hero .schirm > img.hero-wechsel.an { opacity: 1; }
.hero-thema button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border: 0; border-radius: 999px; background: transparent;
  color: var(--leise); font: inherit; font-size: 0.86rem; cursor: pointer; transition: background 0.48s var(--weich), color 0.48s var(--weich); }
.hero-thema button i { width: 20px; height: 20px; border-radius: 50%; background: var(--fl); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.hero-thema button[aria-pressed="true"] { background: var(--glas-hoch); color: var(--text); font-weight: 700; }
.hero-thema button:focus-visible { outline: 2px solid var(--rosa-tief); outline-color: var(--rosa); outline-offset: 2px; }
.chip { animation: chip-rein 0.7s var(--weich) both; animation-delay: calc(2.5s + var(--n) * 0.14s); }
.chip > span { animation: schweben 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -1.7s); }
.hero-text > * { animation: hoch 0.9s var(--weich) both; animation-delay: calc(0.1s + var(--n) * 0.09s); }
@keyframes punkt-an { to { background: #fff; } }
@keyframes taste-druck { 0% { background: rgba(255, 255, 255, 0.14); } 25% { background: rgba(255, 255, 255, 0.5); } 100% { background: rgba(255, 255, 255, 0.14); } }
@keyframes aufschliessen { to { transform: translateY(-104%); } }
@keyframes dahinter { from { transform: scale(1.08); filter: brightness(0.6); } to { transform: none; filter: none; } }
@keyframes chip-rein { from { opacity: 0; transform: translateY(14px) scale(0.9); } }
@keyframes schweben { to { transform: translateY(-9px); } }
@keyframes hoch { from { transform: translateY(22px); } }

/* ---------- Geschichte: Fotos fliegen in den Tresor ---------- */
.geschichte { position: relative; }
.js:not(.ruhig) .geschichte { height: 290vh; }
.geschichte-klebt { padding-block: var(--abstand); }
.js:not(.ruhig) .geschichte-klebt { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; padding-block: 20px; }
.geschichte-raster { display: grid; gap: clamp(22px, 4vw, 64px); align-items: center; }
@media (min-width: 960px) { .geschichte-raster { grid-template-columns: 0.82fr 1.18fr; } }
.geschichte-text { display: grid; gap: 16px; }
.schritte { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 20px; }
.schritt { display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start; transition: opacity 0.35s; }
.schritt .nr { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rand); display: grid; place-items: center;
  font: 500 0.78rem/1 var(--f-mono); transition: background 0.35s, color 0.35s, border-color 0.35s; }
.schritt h3 { margin-top: 5px; }
.schritt p { margin-top: 4px; color: var(--leise); max-width: 46ch; }
.js:not(.ruhig) .schritt { opacity: 0.38; }
.js:not(.ruhig) .schritt.aktiv { opacity: 1; }
.schritt.aktiv .nr { background: var(--text); color: #0b0c10; border-color: transparent; }
@media (max-width: 959px) {
  .js:not(.ruhig) .schritt:not(.aktiv) { display: none; }
  .js:not(.ruhig) .schritte { min-height: 7.5em; margin-top: 4px; }
  .geschichte-text h2 { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.6rem); }
}

.buehne { position: relative; display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(14px, 3vw, 44px); align-items: center; }
.galerie { background: #F6F3F8; color: #1A1620; border-radius: clamp(14px, 2vw, 24px); padding: clamp(8px, 1.2vw, 14px);
  box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.8); position: relative; font-family: var(--f-ios); }
.galerie-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 4px clamp(6px, 1vw, 12px); }
.galerie-kopf b { font-size: clamp(0.9rem, 0.7rem + 0.8vw, 1.25rem); letter-spacing: -0.01em; }
.galerie-kopf span { font-size: clamp(0.66rem, 0.6rem + 0.3vw, 0.85rem); color: #0A6CFF; font-weight: 600; font-variant-numeric: tabular-nums; }
.galerie-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; border-radius: 8px; overflow: hidden; }
.zelle { aspect-ratio: 1; background: #E3DEE8; overflow: hidden; }
.zelle img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s, transform 0.5s var(--weich); }
.geschichte.fertig .zelle[data-mover] img { opacity: 0; transform: scale(0.55); }
.galerie-hinweis { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; width: max-content; max-width: calc(100% - 20px);
  padding: 8px 14px; border-radius: 14px; background: rgba(28, 22, 32, 0.92); color: #fff; font-size: clamp(0.62rem, 0.55rem + 0.3vw, 0.8rem); line-height: 1.35;
  text-align: center; opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.4s var(--weich); }
.geschichte.fertig .galerie-hinweis, .ruhig .galerie-hinweis, html:not(.js) .galerie-hinweis { opacity: 1; transform: none; }
.telefon--tresor { --breite: clamp(112px, min(21vw, 31vh), 246px); justify-self: center; z-index: 1; }
.mini-app { position: absolute; inset: 0; font-family: var(--f-ios); color: #F4F5F7; }
.mini-kopf { position: absolute; top: 19cqw; left: 4.5cqw; right: 4.5cqw; display: flex; align-items: center; gap: 3cqw; }
.mini-kopf .rund { width: 9.5cqw; height: 9.5cqw; border-radius: 50%; background: rgba(40, 10, 34, 0.55); display: grid; place-items: center; }
.mini-kopf .rund svg { width: 5cqw; height: 5cqw; stroke-width: 2.4; }
.mini-kopf b { flex: 1; min-width: 0; font-size: 6.4cqw; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-kopf .rund svg { width: 4.6cqw; height: 4.6cqw; }
.mini-mehr { font-size: 2.6cqw; letter-spacing: 0.1em; }
.mini-raster { position: absolute; top: 33cqw; left: 1.6cqw; right: 1.6cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.mini-raster > * { aspect-ratio: 1; overflow: hidden; border-radius: 3cqw; }
.mini-raster img { width: 100%; height: 100%; object-fit: cover; }
.mini-kamera { background: rgba(255, 255, 255, 0.13); display: grid; place-content: center; justify-items: center; gap: 1.5cqw; font-size: 3.6cqw; font-weight: 600; }
.mini-kamera svg { width: 10cqw; height: 10cqw; stroke-width: 1.6; }
.slot { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 0.4cqw rgba(255, 255, 255, 0.08); }
.js:not(.ruhig) .slot--ziel img { visibility: hidden; }
.mini-fuss { position: absolute; bottom: 30cqw; left: 6cqw; right: 6cqw; text-align: center; font-size: 3.2cqw; line-height: 1.4; color: #F2D4E8; }
.flagge { display: inline-block; width: 1.5em; height: 1em; vertical-align: -0.12em; margin-right: 0.3em; border-radius: 2px;
  background: linear-gradient(#000 0 33.3%, #DD0000 33.3% 66.6%, #FFCE00 66.6%); }
.flieger { display: none; }
.js:not(.ruhig) .flieger { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5; pointer-events: none; will-change: transform; }
.flieger img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.flieger.fliegt img { box-shadow: 0 18px 30px -10px rgba(0, 0, 0, 0.6); border-radius: 6px; }
.haken { position: absolute; right: 7%; bottom: 7%; width: max(14px, 30%); max-width: 22px; aspect-ratio: 1; border-radius: 50%;
  background: #0A6CFF; border: 1.5px solid #fff; display: grid; place-items: center; color: #fff;
  opacity: var(--sel, 0); transform: scale(calc(0.4 + var(--sel, 0) * 0.6)); }
.haken svg { width: 70%; height: 70%; stroke-width: 3; }

/* ---------- Karten ---------- */
.karte { position: relative; border-radius: var(--rund); padding: clamp(22px, 2.6vw, 34px);
  background: var(--flaeche); border: 1px solid var(--rand); }
.karte h3 + p { margin-top: 8px; color: var(--leise); }
.symbol { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--farbe); color: #fff; margin-bottom: 18px; }
.symbol svg { width: 24px; height: 24px; stroke-width: 1.9; }
.marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.marken span { font: 500 0.66rem/1 var(--f-mono); letter-spacing: 0.04em; padding: 7px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: var(--leise); white-space: nowrap; }
.marken .pfeil { background: none; padding-inline: 0; color: var(--schwach); }
/* Handy: Info-Kacheln kompakt, Symbol klein links neben dem Titel statt darüber (kürzer zu scrollen) */
@media (max-width: 679px) {
  .karte--info { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: center; padding: 16px 18px; border-radius: 22px; }
  .karte--info .symbol { width: 36px; height: 36px; border-radius: 10px; margin: 0; }
  .karte--info .symbol svg { width: 20px; height: 20px; }
  .karte--info h3 { font-size: 1.05rem; }
  .karte--info > p, .karte--info > .marken { grid-column: 1 / -1; }
  .karte--info h3 + p { margin-top: 10px; font-size: 0.93rem; line-height: 1.5; }
  .karte--info .marken { margin-top: 12px; }
  .sicher-raster { gap: 12px; }
}

/* Auftauchen beim Scrollen: startet sichtbar, nur leicht versetzt */
.js:not(.ruhig) .auf { opacity: 0.32; transform: translateY(34px) scale(0.985); transition: opacity 0.9s var(--weich), transform 0.9s var(--weich); transition-delay: var(--verz, 0s); }
.js:not(.ruhig) .auf.da { opacity: 1; transform: none; }

/* ---------- Sicherheit ---------- */
.sicher-raster { display: grid; gap: 16px; }
@media (min-width: 680px) { .sicher-raster { grid-template-columns: 1fr 1fr; } .karte--pin, .karte--symbol { grid-column: 1 / -1; } }
@media (min-width: 1040px) {
  .sicher-raster { grid-template-columns: 1.1fr 1fr; gap: 0 clamp(28px, 5vw, 72px); align-items: start; }
  .karte--pin { grid-column: 1; grid-row: 1 / span 4; }
  .karte--symbol { grid-column: 1 / -1; margin-top: 18px; }
}
/* Die Info-Karten der Sicherheit: keine Kästen, sondern Zeilen mit feiner Linie (Symbol links, wie in den Einstellungen der App) */
.sicher-raster .karte--info { background: none; border: 0; border-bottom: 1px solid var(--rand); border-radius: 0; padding: 22px 0; display: grid; grid-template-columns: 40px 1fr; column-gap: 18px; }
.sicher-raster .karte--info .symbol { margin: 0; }
.sicher-raster .karte--info > p, .sicher-raster .karte--info > .marken { grid-column: 2; }
.sicher-raster .karte--info h3 + p { margin-top: 6px; }
@media (max-width: 1039px) { .sicher-raster .karte--info:nth-last-child(2) { border-bottom: 0; } }
.karte--pin { display: grid; gap: 26px; align-content: start; }
@media (min-width: 680px) and (max-width: 1039px) { .karte--pin { grid-template-columns: auto 1fr; align-items: center; } }
.pin-telefon { --breite: clamp(230px, 62vw, 280px); justify-self: center; }
.pin-text { display: grid; gap: 14px; }
.pin-text h3 { font-size: 1.5rem; }
.pin-hinweise { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.pin-hinweise li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 0.92rem; }
.pin-hinweise code { font: 500 0.82rem/1.5 var(--f-mono); letter-spacing: 0.12em; color: var(--rosa); }
.pin-status { min-height: 1.6em; font-size: 0.92rem; color: var(--leise); }
.pin-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopf { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--rand); background: var(--glas-hoch);
  font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 0.2s, transform 0.2s; }
.knopf:hover { background: rgba(255, 255, 255, 0.18); }
.knopf:active { transform: scale(0.97); }
.knopf--rosa { background: var(--text); color: #0b0c10; border-color: transparent; }
.knopf--rosa:hover { background: #fff; }
.knopf svg { width: 18px; height: 18px; }

.sperre--demo { transition: transform 0.55s cubic-bezier(0.65, 0, 0.25, 1); }
.sperre--demo.offen { transform: translateY(-104%); }
.sperre--demo .taste { cursor: pointer; transition: background 0.12s; }
.sperre--demo .taste:active { background: rgba(255, 255, 255, 0.45); }
.sperre--demo .taste:disabled { opacity: 0.4; cursor: default; }
.sperre--demo .taste--still:active { background: rgba(255, 255, 255, 0.15); }
.wackeln .punkte { animation: wackeln 0.38s; }
@keyframes wackeln { 20% { transform: translateX(-3cqw); } 40% { transform: translateX(3cqw); } 60% { transform: translateX(-2cqw); } 80% { transform: translateX(1.5cqw); } }
.inhalt { position: absolute; inset: 0; }
.inhalt--tarn { display: none; }
.schirm[data-inhalt="tarn"] .inhalt--tarn { display: block; }
.schirm[data-inhalt="tarn"] .inhalt--echt { display: none; }
/* Home im Tarn-Tresor: gleicher Aufbau und gleiche Abstände wie der echte Home-Bildschirm der App (in cqw gemessen) */
.th { position: absolute; inset: 0; padding: 18.6cqw 4.4cqw 0; display: flex; flex-direction: column; color: #fff; font-family: var(--f-ios); }
.th-knoepfe { position: absolute; top: 16.6cqw; right: 4cqw; display: flex; gap: 2.2cqw; }
.th-knoepfe i { width: 9.6cqw; height: 9.6cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center;
  font-style: normal; font-size: 6.4cqw; line-height: 1; }
.th-knoepfe svg { width: 4.6cqw; height: 4.6cqw; stroke-width: 1.8; }
.th-label { display: flex; align-items: center; gap: 1.4cqw; font-size: 3.4cqw; font-weight: 700; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); }
.th-label svg { width: 4cqw; height: 4cqw; }
.th-home { margin-top: 1.2cqw; font-size: 8.4cqw; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.th-karte { margin-top: 4.2cqw; display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw 3cqw; border-radius: 5cqw;
  background: rgba(255, 255, 255, 0.13); border: 0.25cqw solid rgba(255, 255, 255, 0.16); }
.th-karte + .th-karte { margin-top: 3.2cqw; }
.th-stapel { display: flex; flex: none; }
.th-stapel img { width: 12.4cqw; aspect-ratio: 1; object-fit: cover; border-radius: 2.6cqw; border: 0.4cqw solid rgba(255, 255, 255, 0.35); }
.th-stapel img + img { margin-left: -3.4cqw; }
.th-kamera { width: 12.4cqw; aspect-ratio: 1; flex: none; border-radius: 3.4cqw; display: grid; place-items: center;
  background: linear-gradient(135deg, #FFE9B8, #FFC9DC); color: #3A2A55; }
.th-kamera svg { width: 5.6cqw; height: 5.6cqw; stroke-width: 2; }
.th-zeilen { flex: 1; min-width: 0; display: grid; gap: 0.6cqw; }
.th-zeilen b { font-size: 4.1cqw; }
.th-zeilen small { font-size: 3.1cqw; color: rgba(255, 255, 255, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-pfeil { font-size: 6cqw; line-height: 1; color: rgba(255, 255, 255, 0.7); }
.th-fav { padding-block: 2.8cqw; }
.th-herz svg { width: 5cqw; height: 5cqw; color: var(--rosa); fill: var(--rosa); }
.th-zahl { font-size: 3.8cqw; color: rgba(255, 255, 255, 0.85); }
.th-paar { margin-top: 3.2cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 3.2cqw; }
.th-kachel { display: grid; align-content: start; gap: 0.8cqw; padding: 3cqw; border-radius: 5cqw; min-height: 30cqw;
  background: rgba(255, 255, 255, 0.12); border: 0.25cqw solid rgba(255, 255, 255, 0.16); }
.th-kachel .th-kamera { margin-bottom: 2.6cqw; }
.th-kachel b { font-size: 3.9cqw; }
.th-kachel small { font-size: 2.9cqw; line-height: 1.3; color: rgba(255, 255, 255, 0.75); }
.th-sicher { background: #FF9CC4; color: #2B0F20; }
.th-titel { margin-top: 6.6cqw; font-size: 5.2cqw; font-weight: 800; }
.th-titel span { margin-left: 1.6cqw; font-weight: 400; color: rgba(255, 255, 255, 0.7); }
.th-alben { margin-top: 3cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.8cqw; padding: 2.8cqw; border-radius: 5cqw;
  background: rgba(255, 255, 255, 0.1); border: 0.25cqw solid rgba(255, 255, 255, 0.14); }
.th-alben figure { margin: 0; }
.th-alben img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3.2cqw; }
.th-alben figcaption { margin-top: 1.4cqw; display: grid; font-size: 3.2cqw; font-weight: 600; }
.th-alben small { font-size: 2.8cqw; font-weight: 400; color: rgba(255, 255, 255, 0.7); }
.blitz { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
.blitz.an { animation: blitz 0.6s ease-out; }
@keyframes blitz { 0% { opacity: 0.9; } 100% { opacity: 0; } }
.einbruch { position: absolute; z-index: 7; top: 17cqw; left: 6cqw; right: 6cqw; display: flex; align-items: center; gap: 3cqw; padding: 3cqw 4cqw; border-radius: 6cqw;
  background: rgba(24, 8, 22, 0.88); font: 600 3.6cqw/1.3 var(--f-ios); color: #fff; opacity: 0; transform: translateY(-4cqw); transition: opacity 0.3s, transform 0.3s var(--weich); pointer-events: none; }
.einbruch.zeigen { opacity: 1; transform: none; }
.einbruch i { width: 8cqw; height: 8cqw; border-radius: 2.4cqw; background: var(--c-rot); display: grid; place-items: center; flex: none; }
.einbruch svg { width: 5cqw; height: 5cqw; stroke-width: 2; }

.karte--symbol { display: grid; gap: 28px; align-items: center; overflow: hidden; }
@media (min-width: 820px) { .karte--symbol { grid-template-columns: 1fr auto; } }
.symbol-buehne { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); flex-wrap: wrap; }
.homescreen { display: grid; justify-items: center; gap: 8px; padding: 18px 26px 14px; border-radius: 26px; background: linear-gradient(160deg, #2b4f8f, #6a4aa0 60%, #b0608f); }
.app-stapel { position: relative; width: 88px; height: 88px; }
.app-stapel img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 22%; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); animation: wechsel 10s infinite both; animation-delay: var(--v); }
.homescreen span { font: 500 0.78rem var(--f-ios); color: #fff; }
@keyframes wechsel { 0%, 17% { opacity: 1; transform: none; } 21%, 96% { opacity: 0; transform: scale(0.82); } 100% { opacity: 1; transform: none; } }
.ruhig .app-stapel img:not(:first-child) { display: none; }
.symbol-reihe { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; }
.symbol-reihe li { display: grid; justify-items: center; gap: 6px; font-size: 0.74rem; color: var(--leise); }
.symbol-reihe img { width: 52px; height: 52px; border-radius: 12px; }

/* ---------- Funktionen ---------- */
.telefon-reihe { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px var(--seite) 30px; margin-inline: calc(var(--seite) * -1);
  scrollbar-width: none; }
.telefon-reihe::-webkit-scrollbar { display: none; }
.telefon-reihe figure { margin: 0; scroll-snap-align: center; flex: none; }
.telefon-reihe .telefon { --breite: min(250px, 66vw); }
@media (min-width: 820px) {
  .telefon-reihe { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; justify-items: center; align-items: start; }
  .telefon-reihe .telefon { --breite: clamp(220px, 24vw, 290px); }
  .telefon-reihe figure:nth-child(2) { margin-top: -40px; }
  .telefon-reihe figure:nth-child(1), .telefon-reihe figure:nth-child(3) { margin-top: 50px; }
}
/* Merkmale: zwei Spalten mit feinen Linien, nie mehr als zwei nebeneinander (keine Dreierkarten) */
.merkmal-raster { display: grid; gap: 0 clamp(28px, 5vw, 80px); margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--rand); }
@media (min-width: 760px) { .merkmal-raster { grid-template-columns: 1fr 1fr; } }
.merkmal { display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--rand); }
.merkmal .symbol { margin: 0; }
.merkmal p { margin-top: 6px; color: var(--leise); font-size: 0.97rem; }


/* ---------- Bearbeiten ---------- */
/* Zwei Handys (Basis und Pro) nebeneinander, das rechte leicht versetzt */
.editor-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 5vw, 64px); max-width: 720px; margin: clamp(30px, 5vw, 60px) auto 0; align-items: start; }
.editor-karte { margin: 0; display: grid; justify-items: center; gap: clamp(14px, 2vw, 22px); text-align: center; min-width: 0; }
.editor-karte .telefon { --breite: min(262px, 100%); }
.editor-karte:nth-child(2) { margin-top: clamp(28px, 6vw, 72px); }
.editor-karte figcaption { display: grid; gap: 8px; justify-items: center; }
.editor-titel { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; font-family: var(--f-display); font-stretch: var(--f-display-breite); font-weight: 800; font-size: clamp(1.02rem, 0.9rem + 0.8vw, 1.4rem); }
.editor-pille { padding: 5px 10px; border-radius: 999px; background: var(--glas-hoch); font-family: var(--f-mono); font-size: 0.62rem; font-weight: 500; font-stretch: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--leise); white-space: nowrap; }
.editor-pille--pro { background: linear-gradient(100deg, var(--rosa), var(--pfirsich)); color: var(--rosa-tief); }
.editor-werkzeuge { margin: 0; max-width: 32ch; color: var(--leise); font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem); }
.editor-hinweis { margin-top: 28px; color: var(--schwach); }

.editor { display: grid; gap: 22px; padding: clamp(14px, 2vw, 22px); }
.editor > * { min-width: 0; }
.editor-bild { position: relative; border-radius: 20px; overflow: hidden; background: #000; aspect-ratio: 3 / 2; touch-action: manipulation; cursor: pointer; user-select: none; -webkit-user-select: none; }
.editor-bild img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.25s; }
@media (min-width: 900px) {
  .editor { grid-template-columns: 1.45fr 1fr; align-items: stretch; }
  .editor-bild { aspect-ratio: auto; min-height: 420px; }
  .editor-bild img { position: absolute; inset: 0; }
}
.editor-marke { position: absolute; left: 12px; bottom: 12px; padding: 6px 11px; border-radius: 999px; background: rgba(15, 8, 15, 0.66); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 500 0.66rem/1.4 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.editor-seite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: clamp(4px, 1vw, 10px); }
.editor-seite > * { min-width: 0; }
.filter-reihe { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.filter { flex: none; display: grid; gap: 6px; justify-items: center; background: none; border: 0; padding: 0; cursor: pointer; font-size: 0.78rem; color: var(--leise); }
.filter img { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; border: 2.5px solid transparent; transition: border-color 0.2s; }
.filter[aria-pressed="true"] { color: var(--rosa); }
.filter[aria-pressed="true"] img { border-color: var(--rosa); }
.regler { display: grid; gap: 14px; }
.regler label { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-weight: 600; font-size: 0.95rem; }
.regler output { font-variant-numeric: tabular-nums; color: var(--leise); font-weight: 500; }
.regler input { grid-column: 1 / -1; width: 100%; accent-color: #fff; }
input[type="range"] { -webkit-appearance: none; appearance: none; height: 26px; background: transparent; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.22); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); }
.werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; }
.werkzeuge span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 0.84rem; color: var(--leise); }
.werkzeuge svg { width: 16px; height: 16px; color: var(--rosa); }

/* ---------- Teilen ---------- */
.teilen-raster { display: grid; gap: clamp(30px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .teilen-raster { grid-template-columns: auto 1fr; } }
.teilen-telefon { --breite: clamp(230px, 24vw, 290px); justify-self: center; }
.teilen-rechts { display: grid; gap: 18px; }
.chat { padding: 18px; display: grid; gap: 10px; max-width: 460px; }
.chat-kopf { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rand); margin-bottom: 4px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--flieder), var(--rosa)); color: var(--rosa-tief); font-weight: 750; font-size: 0.85rem; }
.chat-kopf b { font-size: 0.98rem; }
.chat-kopf small { display: block; font-size: 0.74rem; color: var(--schwach); font-weight: 400; }
.blase { max-width: 78%; padding: 9px 14px; border-radius: 18px; font-size: 0.93rem; line-height: 1.4; }
.blase--sie { background: rgba(255, 255, 255, 0.1); border-bottom-left-radius: 6px; justify-self: start; }
.blase--ich { background: var(--rosa); color: var(--rosa-tief); border-bottom-right-radius: 6px; justify-self: end; }
.einmal { justify-self: end; display: grid; gap: 6px; justify-items: end; }
.einmal-foto { position: relative; width: 150px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; border-bottom-right-radius: 6px; }
.einmal-foto img { width: 100%; height: 100%; object-fit: cover; filter: blur(9px) saturate(1.2); transform: scale(1.15); }
.einmal-foto span { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; color: #fff; font-size: 0.8rem; font-weight: 650; background: rgba(43, 15, 32, 0.35); }
.einmal-foto svg { width: 26px; height: 26px; }
.einmal-status { position: relative; font-size: 0.76rem; color: var(--schwach); height: 1.3em; min-width: 160px; text-align: right; }
.einmal-status span { position: absolute; right: 0; transition: opacity 0.4s, transform 0.4s var(--weich); white-space: nowrap; }
.einmal-status .s2 { opacity: 0; transform: translateY(6px); color: var(--rosa); }
.chat.geoeffnet .s1 { opacity: 0; transform: translateY(-6px); }
.chat.geoeffnet .s2 { opacity: 1; transform: none; }
.chat .blase--spaet { opacity: 0; transform: translateY(8px); transition: opacity 0.5s 0.5s, transform 0.5s 0.5s var(--weich); }
.chat.geoeffnet .blase--spaet, html:not(.js) .chat .blase--spaet, .ruhig .chat .blase--spaet { opacity: 1; transform: none; }
.teilen-liste { display: grid; gap: 22px; margin-top: 10px; }
@media (min-width: 640px) { .teilen-liste { grid-template-columns: 1fr 1fr; } }

/* ---------- Darstellungen ---------- */
.darstellungen { overflow: hidden; isolation: isolate; color: var(--d-text); transition: color 0.6s;
  --d-text: var(--text); --d-leise: var(--leise); --d-akzent: var(--rosa); }
.darstellungen[data-darstellung="blau"], .darstellungen[data-darstellung="schwarz"] { --d-akzent: #F2B544; }
.darstellungen[data-darstellung="hell"] { --d-akzent: #FFC56B; }
.d-grund { position: absolute; inset: 8% 0; z-index: -1; opacity: 0.35; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.d-grund i { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s; }
.darstellungen[data-darstellung="blau"] [data-g="blau"], .darstellungen[data-darstellung="rosa"] [data-g="rosa"],
.darstellungen[data-darstellung="schwarz"] [data-g="schwarz"], .darstellungen[data-darstellung="hell"] [data-g="hell"] { opacity: 1; }
[data-g="blau"] { background: radial-gradient(60% 60% at 12% 18%, rgba(79, 124, 247, 0.42), transparent 70%), radial-gradient(50% 60% at 95% 55%, rgba(155, 107, 217, 0.3), transparent 70%), radial-gradient(60% 60% at 12% 95%, rgba(43, 181, 201, 0.24), transparent 70%), linear-gradient(170deg, #0F1730, #17244B 55%, #241F4A); }
[data-g="rosa"] { background: radial-gradient(60% 60% at 88% 16%, rgba(255, 127, 180, 0.5), transparent 70%), radial-gradient(50% 60% at 4% 55%, rgba(200, 138, 240, 0.36), transparent 70%), radial-gradient(60% 60% at 88% 95%, rgba(255, 170, 128, 0.32), transparent 70%), linear-gradient(170deg, #4E2149, #6A2D60 55%, #7A3552); }
[data-g="schwarz"] { background: radial-gradient(55% 55% at 12% 18%, rgba(74, 92, 149, 0.3), transparent 70%), radial-gradient(50% 55% at 95% 62%, rgba(91, 74, 133, 0.2), transparent 70%), linear-gradient(170deg, #050608, #0B0D12 55%, #12151D); }
[data-g="hell"] { background: radial-gradient(60% 60% at 12% 18%, rgba(157, 184, 255, 0.62), transparent 70%), radial-gradient(50% 60% at 95% 52%, rgba(255, 183, 208, 0.5), transparent 70%), radial-gradient(60% 60% at 18% 95%, rgba(255, 217, 168, 0.45), transparent 70%), linear-gradient(170deg, #EAF1FF, #F3EEFB 55%, #FFEEE4); }
.d-raster { display: grid; gap: clamp(36px, 6vw, 72px); align-items: center; }
@media (min-width: 900px) { .d-raster { grid-template-columns: 1fr auto; } }
.darstellungen .augenbraue { color: var(--d-akzent); transition: color 0.6s; }
.darstellungen .lead { color: var(--d-leise); transition: color 0.6s; }
.farbfelder { display: flex; gap: clamp(14px, 3vw, 26px); margin-top: 30px; flex-wrap: wrap; }
.farbfeld { display: grid; justify-items: center; gap: 9px; background: none; border: 0; padding: 0; cursor: pointer; font-size: 0.88rem; color: var(--d-leise); transition: color 0.6s; }
.farbfeld i { width: clamp(52px, 12vw, 66px); aspect-ratio: 1; border-radius: 50%; background: var(--fl); box-shadow: 0 0 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 0.25); transition: box-shadow 0.3s, transform 0.3s var(--weich); }
.farbfeld[aria-pressed="true"] { color: var(--d-text); font-weight: 700; }
.farbfeld[aria-pressed="true"] i { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.001), 0 0 0 3px var(--d-akzent), inset 0 0 0 4px rgba(0, 0, 0, 0.25); transform: scale(1.06); }
.d-beschreibung { margin-top: 22px; min-height: 3.2em; color: var(--d-leise); transition: color 0.6s; }
.d-beschreibung b { color: var(--d-text); }
.d-telefon { --breite: clamp(240px, 26vw, 310px); justify-self: center; }
.d-bild { opacity: 0; transition: opacity 0.6s; }
.darstellungen[data-darstellung="blau"] [data-b="blau"], .darstellungen[data-darstellung="rosa"] [data-b="rosa"],
.darstellungen[data-darstellung="schwarz"] [data-b="schwarz"], .darstellungen[data-darstellung="hell"] [data-b="hell"] { opacity: 1; }

/* ---------- Cloud ---------- */
.cloud-raster { display: grid; gap: 18px; }
@media (min-width: 940px) { .cloud-raster { grid-template-columns: 1.15fr 1fr; align-items: stretch; } }
.cloud-bild { margin: 0; display: grid; gap: 14px; align-content: center; }
.sync { width: 100%; height: auto; }
.sync text { font-family: var(--f-text); }
.s-text { fill: var(--leise); font-size: 15px; font-weight: 600; }
.s-mini { fill: var(--rosa); font-size: 11px; font-weight: 600; font-family: var(--f-mono) !important; letter-spacing: 0.08em; }
.s-ort { fill: var(--text); font-size: 12px; font-weight: 650; }
.g-rahmen { fill: #15171c; stroke: rgba(255, 255, 255, 0.2); }
.g-schirm { fill: #222735; }
.kachel { fill: var(--rosa); }
.server { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.22); }
.s-fach { fill: rgba(255, 255, 255, 0.1); }
.s-licht { fill: #5BD69A; }
.leitung { fill: none; stroke: rgba(255, 255, 255, 0.24); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; }
.pille { fill: rgba(255, 127, 180, 0.1); stroke: rgba(255, 127, 180, 0.4); }
.paket { fill: url(#g-paket); }
.cloud-bild figcaption { font-size: var(--t-klein); color: var(--schwach); text-align: center; }
.merkmale { list-style: none; margin: 0; padding: clamp(22px, 2.6vw, 34px); display: grid; gap: 0; align-content: center; }
.merkmale li { padding: 16px 0; border-bottom: 1px solid var(--rand); }
.merkmale li:last-child { border-bottom: 0; }
.merkmale li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.merkmale .symbol { width: 40px; height: 40px; border-radius: 11px; margin: 0; }
.merkmale .symbol svg { width: 22px; height: 22px; }
.merkmale p { color: var(--leise); font-size: 0.96rem; margin-top: 2px; }
/* Tarife als vier Fächer, die von links nach rechts höher werden; Basic ist das kleinste, hervorgehoben durch die pinke Marke */
.tarife { display: grid; gap: 14px; margin-top: 18px; grid-template-columns: 1fr 1fr; align-items: end; }
@media (min-width: 940px) { .tarife { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.tarif { padding: clamp(18px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; background: var(--flaeche); border-radius: var(--rund); }
@media (min-width: 940px) {
  .tarif:nth-child(1) { min-height: 250px; } .tarif:nth-child(2) { min-height: 300px; } .tarif:nth-child(3) { min-height: 350px; } .tarif:nth-child(4) { min-height: 400px; }
}
.tarif .augenbraue { color: var(--schwach); order: -1; margin-bottom: auto; }
.tarif strong { font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tarif p { color: var(--leise); font-size: 0.9rem; }
.tarif small { margin-top: 8px; font-size: 0.78rem; color: var(--schwach); }
.tarif .preis { padding-top: 12px; color: var(--text); font-weight: 600; font-size: 0.95rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tarif .preis + small { margin-top: 2px; }
.tarife-hinweis { margin-top: 16px; max-width: 70ch; font-size: 0.82rem; line-height: 1.5; color: var(--schwach); }
.tarif--gratis { border-color: rgba(255, 127, 180, 0.35); }
.tarif--gratis .augenbraue { color: var(--rosa); }
@media (max-width: 400px) { .tarif--gratis strong { font-size: 1.75rem; } }
.tarif .tarif-zusatz { margin-top: -2px; color: var(--text); font-weight: 600; font-size: 0.86rem; }

/* ---------- Fragen: eine Liste mit feinen Linien, kein Kasten ---------- */
.fragen { max-width: 860px; display: grid; gap: 0; border-top: 1px solid var(--rand); margin-top: 8px; }
.frage { border-bottom: 1px solid var(--rand); }
.frage summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 0;
  font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.015em; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--rand-hell);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F5F7' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform 0.3s var(--weich); }
.frage[open] summary::after { transform: rotate(45deg); }
.frage p { padding: 0 0 22px; color: var(--leise); max-width: 68ch; }

/* ---------- Schluss: ruhig, ohne Rad ---------- */
.schluss { overflow: hidden; text-align: center; padding-block: clamp(110px, 16vw, 210px); border-top: 1px solid var(--rand); }

.schluss-inhalt { display: grid; gap: 22px; justify-items: center; }
.schluss h2 { font-size: clamp(2.5rem, 1.3rem + 5vw, 5.2rem); max-width: 14ch; }
.schluss .laden { justify-content: center; }

/* ---------- Unterseiten und Teaser ---------- */
.abschnitt--eng { padding-block: clamp(34px, 5vw, 64px); }
.seiten-kopf { padding-block: clamp(28px, 5vw, 56px) clamp(20px, 3vw, 36px); }
.seiten-kopf h1 { font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.4rem); max-width: 18ch; }
.zurueck { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 26px; font-size: 0.92rem; color: var(--leise); text-decoration: none; }
.zurueck:hover { color: var(--text); }
.zurueck svg { width: 18px; height: 18px; }
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: schritt; }
@media (min-width: 760px) { .ablauf { grid-template-columns: repeat(3, 1fr); } }
.ablauf li { display: grid; gap: 8px; align-content: start; }
.ablauf .nr { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: #0b0c10; font: 600 0.82rem/1 var(--f-mono); margin-bottom: 6px; }
.ablauf p { color: var(--leise); }
.hinweisbox { max-width: 860px; display: grid; gap: 10px; border-left: 2px solid var(--rosa); border-radius: 0 var(--rund) var(--rund) 0; }
.hinweisbox p:last-child { color: var(--leise); }
.hinweisbox a, .merkmal a, .lead a { color: var(--rosa); }
.schluss-klein { padding-block: clamp(60px, 9vw, 120px); text-align: center; }
.teaser-raster { display: grid; gap: 16px; }
@media (min-width: 760px) { .teaser-raster { grid-template-columns: 1fr 1fr; } }
a.teaser { display: grid; gap: 8px; align-content: start; text-decoration: none; color: inherit; transition: transform 0.35s var(--weich), border-color 0.35s; }
a.teaser:hover, a.teaser:focus-visible { transform: translateY(-4px); border-color: var(--rand-hell); }
a.teaser h3 { font-size: 1.4rem; }
a.teaser p { color: var(--leise); }
a.teaser .mehr { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--rosa); font-weight: 650; }
a.teaser .mehr svg { width: 20px; height: 20px; transition: transform 0.3s var(--weich); }
a.teaser:hover .mehr svg { transform: translateX(4px); }

/* ---------- Made-in-Germany-Abschnitt ---------- */
.de-raster { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 960px) { .de-raster { grid-template-columns: 1fr 1.1fr; } }
.de-text { display: grid; gap: 18px; justify-items: start; }
.de-text h2 { max-width: 16ch; }
.de-streifen { display: inline-flex; flex-direction: column; width: 54px; height: 33px; border-radius: 6px; overflow: hidden; margin-bottom: 6px; box-shadow: 0 6px 18px -8px rgba(0,0,0,.6); }
.de-streifen i { flex: 1; }
.de-streifen i:nth-child(1) { background: #111; }
.de-streifen i:nth-child(2) { background: #DD0000; }
.de-streifen i:nth-child(3) { background: #FFCE00; }
.de-fakten { display: grid; gap: 0 clamp(24px, 4vw, 48px); grid-template-columns: 1fr; border-top: 1px solid var(--rand); }
@media (min-width: 560px) { .de-fakten { grid-template-columns: 1fr 1fr; } }
.fakt { display: grid; gap: 4px; align-content: start; background: none; border: 0; border-bottom: 1px solid var(--rand); border-radius: 0; padding: 24px 0; }
.fakt .symbol { margin-bottom: 10px; }
.fakt .augenbraue { color: var(--schwach); }
.fakt strong { overflow-wrap: break-word; hyphens: manual; font: 760 clamp(1.25rem, 0.95rem + 0.95vw, 1.7rem)/1.12 var(--f-display); letter-spacing: -0.03em; }
.fakt p:last-child { color: var(--leise); font-size: 0.93rem; margin-top: 4px; }
a.teaser:only-child { grid-column: 1 / -1; }

/* ---------- Einfache Textseiten (Impressum, Datenschutz, Fehler) ---------- */
.textseite h1 { font-size: clamp(1.75rem, 0.9rem + 3.6vw, 3.4rem); hyphens: auto; overflow-wrap: break-word; }
.text-inhalt { max-width: 70ch; color: var(--leise); display: grid; gap: 14px; }
.text-inhalt h2 { font-size: 1.6rem; color: var(--text); margin-top: 18px; }
.text-inhalt a, .lead a { color: var(--rosa); }
.text-inhalt h2:first-child { margin-top: 0; }
.text-inhalt p, .text-inhalt li { margin: 0; }
.text-inhalt ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.text-inhalt em { color: var(--schwach); }
.text-inhalt strong { color: var(--text); }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--rand); padding-block: 40px 130px; font-size: 0.9rem; }
.fuss-raster { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: center; }
.fuss nav { display: flex; gap: 22px; flex-wrap: wrap; }
.fuss nav a { text-decoration: none; color: var(--leise); }
.fuss nav a:hover { color: var(--text); }
.fuss .klein { flex-basis: 100%; }

/* ---------- Glas-Leiste unten (wie in der App) ---------- */
.leiste { position: fixed; z-index: 50; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
  --voll: min(470px, calc(100vw - 32px)); --h: 62px; }
.leiste-glas { position: relative; width: var(--voll); height: var(--h); border-radius: 999px; overflow: hidden;
  background: rgba(22, 26, 36, 0.62); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: width 0.26s var(--weich), transform 0.26s var(--weich); }
.leiste.kompakt .leiste-glas { width: var(--h); transform: translateX(calc((var(--voll) - var(--h)) / 2)); }
.leiste-tabs { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--voll); translate: -50% 0; display: grid; grid-template-columns: repeat(var(--anzahl, 5), 1fr); padding: 5px; transition: opacity 0.18s; }
.leiste.kompakt .leiste-tabs { opacity: 0; pointer-events: none; }
.leiste-markierung { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / var(--anzahl, 5)); border-radius: 999px; background: rgba(255, 255, 255, 0.1);
  transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 0.38s var(--weich); }
.leiste-tabs a { position: relative; display: grid; place-content: center; justify-items: center; gap: 2px; text-decoration: none; font-size: 0.68rem; font-weight: 600; color: #F4F5F7; border-radius: 999px; }
.leiste-tabs a svg { width: 22px; height: 22px; }
.leiste-tabs a[aria-current="true"] { color: var(--bernstein); }
.leiste-knopf { position: absolute; inset: 0; border: 0; background: none; display: grid; place-items: center; color: var(--bernstein); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.18s; }
.leiste.kompakt .leiste-knopf { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
}

/* ---------- Abgleich: Handy → Frankfurt → Tablet (Maße in cqw, die Bühne ist 100 × 61) ---------- */
.ab-karte { padding: clamp(14px, 3vw, 36px); margin: 0; }
.ab-buehne { position: relative; container-type: inline-size; aspect-ratio: 100 / 61; }
.ab-buehne > * { position: absolute; }
.ab-leitungen { inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-weg { fill: none; stroke: var(--rosa); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke;
  opacity: 0.55; animation: ab-fluss 1.2s linear infinite; }
.ab-weg--r { animation-delay: -0.6s; }
@keyframes ab-fluss { to { stroke-dashoffset: -14; } }
.ab-pille { top: 3.2cqw; padding: 0.4cqw 1.2cqw; border-radius: 99px; border: 1px solid var(--rand); background: rgba(18, 20, 28, 0.9);
  font: 700 max(9px, 1.5cqw) / 1.2 var(--f-mono, monospace); letter-spacing: 0.08em; color: var(--rosa); }
.ab-pille--l { left: 28.6cqw; }
.ab-pille--r { left: 46.8cqw; }
.ab-pille--m { left: 41cqw; top: 1.2cqw; transform: translateX(-50%); white-space: nowrap; }

.ab-handy, .ab-tablet { border: 0.55cqw solid #120812; background: linear-gradient(180deg, #4E2149, #6A2D60 55%, #7A3552);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 3cqw 6cqw -2cqw rgba(0, 0, 0, 0.7); overflow: hidden; }
.ab-handy { left: 6cqw; top: 6cqw; width: 22cqw; height: 45cqw; border-radius: 3.6cqw; }
.ab-tablet { left: 54cqw; top: 3cqw; width: 40cqw; height: 52cqw; border-radius: 3cqw; }
.ab-schirm { position: absolute; inset: 0; }
.ab-insel { position: absolute; top: 1.1cqw; left: 50%; width: 6cqw; height: 1.6cqw; margin-left: -3cqw; border-radius: 1cqw; background: #000; }
.ab-titel { position: absolute; top: 4cqw; left: 1.8cqw; font: 760 2.2cqw/1 var(--f-display); color: #fff; }
.ab-tablet .ab-titel { top: 3cqw; left: 2.4cqw; font-size: 2.6cqw; }
.ab-raster { position: absolute; display: grid; }
.ab-raster img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.ab-raster--handy { left: 1.6cqw; right: 1.6cqw; top: 8cqw; grid-template-columns: repeat(3, 1fr); gap: 0.5cqw; }
.ab-raster--handy img { border-radius: 0.6cqw; }
.ab-raster--tablet { left: 2.4cqw; right: 2.4cqw; top: 7.4cqw; grid-template-columns: repeat(4, 1fr); gap: 0.7cqw; }
.ab-raster--tablet img { border-radius: 0.8cqw; }
.ab-leiste { position: absolute; left: 50%; bottom: 1.8cqw; transform: translateX(-50%); display: flex; gap: 0.5cqw; padding: 0.5cqw; border-radius: 99px;
  background: rgba(40, 10, 36, 0.6); border: 1px solid rgba(255, 255, 255, 0.14); }
.ab-leiste i { width: 3cqw; height: 2.2cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.28); }
.ab-leiste i.an { background: var(--rosa); }
.ab-tablet .ab-leiste i { width: 4.4cqw; height: 2.6cqw; }
.ab-fertig { position: absolute; left: 50%; bottom: 6.4cqw; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.6cqw;
  padding: 0.7cqw 1.6cqw; border-radius: 99px; background: var(--rosa); color: var(--rosa-tief); font: 700 max(10px, 1.7cqw)/1 var(--f-text);
  white-space: nowrap; opacity: 0; }
.ab-fertig svg { width: max(11px, 1.9cqw); height: max(11px, 1.9cqw); stroke-width: 2.6; }

.ab-server { left: 36.5cqw; top: 5cqw; width: 9cqw; height: 9cqw; border-radius: 2cqw; display: grid; align-content: center; gap: 0.9cqw; padding: 0 1.3cqw;
  background: linear-gradient(160deg, #2b3144, #171a24); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 2cqw 4cqw -1.5cqw rgba(0, 0, 0, 0.7); }
.ab-fach { display: block; height: 2cqw; border-radius: 0.6cqw; background: rgba(255, 255, 255, 0.12); position: relative; }
.ab-fach i { position: absolute; left: 0.7cqw; top: 50%; width: 0.8cqw; height: 0.8cqw; margin-top: -0.4cqw; border-radius: 50%; background: #2FBF71;
  box-shadow: 0 0 0.8cqw #2FBF71; }
.ab-fach + .ab-fach i { animation-delay: -0.4s; }
.ab-ort { position: absolute; left: 50%; top: 10.4cqw; transform: translateX(-50%); display: inline-flex; align-items: center; white-space: nowrap;
  font: 650 max(10px, 1.8cqw)/1 var(--f-text); color: var(--leise); }
.ab-ort .flagge { width: 1.5em; height: 1em; }

.ab-flieger { left: 0; top: 0; width: 5.6cqw; aspect-ratio: 1; transform-origin: 0 0; opacity: 0; }
.ab-flieger img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.8cqw; display: block; box-shadow: 0 0 0 0.3cqw #fff, 0 1.4cqw 3cqw -0.6cqw rgba(0, 0, 0, 0.7); }
.ab-flieger i { position: absolute; right: -1.2cqw; top: -1.2cqw; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--rosa); display: grid; place-items: center; }
.ab-flieger i svg { width: 1.6cqw; height: 1.6cqw; color: var(--rosa-tief); stroke-width: 2.4; }

.ab-name { font: 650 max(11px, 1.8cqw)/1 var(--f-text); color: var(--leise); transform: translateX(-50%); white-space: nowrap; }
.ab-name--handy { left: 17cqw; top: 53cqw; }
.ab-name--tablet { left: 74cqw; top: 57cqw; }

@media (max-width: 520px) {
  .ab-pille { display: none; }
  .ab-ort { font-size: 2.8cqw; }
  .ab-name { font-size: 3cqw; }
}
/* Ablauf in einer Schleife von 7 Sekunden: Foto erscheint auf dem Handy, fliegt über Frankfurt, landet auf dem Tablet */
.ab-handy .ab-neu { animation: ab-neu-handy 7s var(--weich) infinite; }
.ab-tablet .ab-neu { animation: ab-neu-tablet 7s var(--weich) infinite; }
.ab-flieger { animation: ab-flug 7s ease-in-out infinite; }
.ab-fertig { animation: ab-fertig 7s ease infinite; }
.ab-fach i { animation: ab-licht 7s steps(1) infinite; }
@keyframes ab-neu-handy { 0% { transform: scale(0); opacity: 0; } 6% { transform: scale(1.15); opacity: 1; } 9%, 94% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes ab-neu-tablet { 0%, 79% { transform: scale(0.6); opacity: 0; } 84% { transform: scale(1.08); opacity: 1; } 88%, 94% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes ab-flug {
  0%, 9% { opacity: 0; transform: translate(8.1cqw, 14.5cqw) scale(1); }
  12% { opacity: 1; transform: translate(8.1cqw, 14.5cqw) scale(1); }
  26% { transform: translate(26cqw, 9cqw) scale(0.8); }
  40% { opacity: 1; transform: translate(39.3cqw, 7.8cqw) scale(0.6); }
  46% { opacity: 0; transform: translate(39.7cqw, 8.2cqw) scale(0.45); }
  52% { opacity: 1; transform: translate(39.3cqw, 7.8cqw) scale(0.6); }
  66% { transform: translate(49cqw, 6.5cqw) scale(1.05); }
  80% { opacity: 1; transform: translate(57cqw, 11cqw) scale(1.43); }
  84%, 100% { opacity: 0; transform: translate(57cqw, 11cqw) scale(1.43); }
}
@keyframes ab-fertig { 0%, 82% { opacity: 0; transform: translate(-50%, 1cqw); } 86%, 94% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%); } }
@keyframes ab-licht { 0%, 40% { background: #2FBF71; } 42%, 44%, 48%, 52% { background: var(--rosa); box-shadow: 0 0 1.2cqw var(--rosa); } 43%, 46%, 50%, 54%, 100% { background: #2FBF71; } }
/* Erst losgehen, wenn der Abschnitt im Bild ist */
.js .ab-karte:not(.da) .ab-buehne * { animation-play-state: paused; }
/* Bewegung reduziert: gleich das Ergebnis zeigen */
.ruhig .ab-buehne * { animation: none !important; }
.ruhig .ab-flieger { opacity: 0; }
.ruhig .ab-neu, .ruhig .ab-fertig { opacity: 1; }

/* ---------- Einladung (tresory.app/f/<name>) ---------- */
.freund .spalte { max-width: 720px; }
.freund-marke svg { width: 84px; height: 84px; margin-bottom: 18px; }
.freund h1 { overflow-wrap: anywhere; }
.freund .laden { margin-top: 26px; }
.freund-hinweis { margin: 28px 0 22px; padding: 18px 20px; color: var(--leise); }
.freund .zurueck svg { order: 2; }

/* ---------- Leichtbau für Touch-Geräte: weniger Ebenen, kein Weichzeichner, keine mitlaufenden Effekte.
   Safari auf dem iPhone beendet Seiten mit zu vielen großen Ebenen (Meldung „wiederholt ein Problem aufgetreten“). ---------- */
@media (hover: none), (max-width: 760px) {
  .fleck { will-change: auto; transform: none !important; width: 56vmax; height: 56vmax; }
  .himmel { position: absolute; height: 100%; }
  .karte, .bald, .chip > span, .editor-marke, .leiste-glas {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .karte { background: var(--flaeche); }
  .bald { background: rgba(18, 20, 28, 0.9); }
  .leiste-glas { background: rgba(22, 26, 36, 0.95); }
  .telefon { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 18px 36px -18px rgba(0, 0, 0, 0.7); }
  .telefon--hero { transform: none !important; }
  .rad { transform: none !important; }
  .rad .r1 { display: none; }
  .d-grund { -webkit-mask-image: none; mask-image: none; }
  .hero-foto { box-shadow: none; }
  .chip > span { animation: none; }
}

/* ---------- Sperren: Schütteln und Umdrehen ---------- */
.sperren-raster { display: grid; gap: 18px; }
@media (min-width: 900px) { .sperren-raster { grid-template-columns: 1fr 1fr; } }
.sperr-karte { display: grid; gap: 22px; align-content: start; overflow: hidden; }
.szene { --sz-b: min(176px, 44vw); display: grid; justify-items: center; gap: 14px; padding-top: 8px; }
.szene-buehne { position: relative; display: grid; place-items: center; width: 100%; min-height: calc(var(--sz-b) * 2.26 + 36px); perspective: 1300px; }
.szene-telefon { --breite: var(--sz-b); }
.sperr-text .symbol { margin-bottom: 14px; }
.sperr-text p { color: var(--leise); }
.anlaesse { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.anlaesse li { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--rand); background: var(--glas); font-size: 0.85rem; color: var(--leise); }
.szene-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.szene-knoepfe .knopf { cursor: pointer; }
.umschalter { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--glas); border: 1px solid var(--rand); }
.umschalter button { padding: 8px 15px; border: 0; border-radius: 999px; background: transparent; color: var(--leise); cursor: pointer;
  font: 600 0.9rem/1 var(--f-text); transition: background 0.2s, color 0.2s; }
.umschalter button:hover { color: var(--text); }
.umschalter button[aria-pressed="true"] { background: var(--text); color: #0b0c10; }
.szene-hinweis { margin: -6px 0 0; color: var(--schwach); }
.sperr-karte:has(.szene[data-modus="sperren"]) [data-hinweis="tarn"],
.sperr-karte:has(.szene[data-modus="tarn"]) [data-hinweis="sperren"] { display: none; }
html:not(.js) .szene-knoepfe, html:not(.js) .szene-hinweis[data-hinweis="tarn"] { display: none; }

/* Zustandsschilder unter dem Telefon: drei Texte übereinander, die nacheinander erscheinen */
.szene-chip { display: grid; place-items: center; min-height: 40px; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.szene-chip span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--rand); background: var(--glas-hoch); opacity: 0; }
.szene-chip svg { width: 14px; height: 14px; stroke-width: 2; }
.szene-chip .c1 { opacity: 1; }
.szene-chip .c3 { background: var(--text); color: #0b0c10; border-color: transparent; font-weight: 700; }
.szene[data-modus="tarn"] .c3--sperren, .szene:not([data-modus="tarn"]) .c3--tarn { display: none; }

/* Ausgangs- und Ruhezustand: App sichtbar; ohne Bewegung (oder ohne Skript) gleich der gesperrte Zustand */
.sperre--zyklus, .sperre--flip, .tarn-ueber { opacity: 0; }
.tarn-ueber { position: absolute; inset: 0; z-index: 2; display: none; }
.szene[data-modus="tarn"] .tarn-ueber { display: block; }
.szene[data-modus="tarn"] .sperre--zyklus { display: none; }
.ruhig .sperre--zyklus, .ruhig .sperre--flip, .ruhig .tarn-ueber, html:not(.js) .sperre--zyklus, html:not(.js) .sperre--flip, html:not(.js) .tarn-ueber { opacity: 1; }
.ruhig .szene-chip .c1, html:not(.js) .szene-chip .c1 { opacity: 0; }
.ruhig .szene-chip .c3, html:not(.js) .szene-chip .c3 { opacity: 1; }
.ruhig [data-nochmal] { display: none; }

/* Weggerissen: das Telefon wird ruckartig zur Seite gezogen, dann springt die Sperre ein; am Ende kehrt es zurück (6 s, Schleife) */
.schuettel-huelle { position: relative; transform-origin: 50% 62%; }
.szene.laeuft .schuettel-huelle { animation: schuetteln 6s infinite; }
@keyframes schuetteln {
  0%, 17% { transform: none; }
  19% { transform: translate(-6%, 1%) rotate(-5deg); }
  22% { transform: translate(24%, -6%) rotate(15deg); }
  25% { transform: translate(14%, 2%) rotate(-8deg); }
  28% { transform: translate(21%, -2%) rotate(7deg); }
  31% { transform: translate(17%, 0) rotate(2deg); }
  34%, 88% { transform: translate(17%, 0) rotate(2deg); }
  96%, 100% { transform: none; }
}
.szene.laeuft .sperre--zyklus, .szene.laeuft .tarn-ueber { animation: ueberblenden 6s infinite; }
@keyframes ueberblenden { 0%, 31% { opacity: 0; transform: scale(1.05); } 35%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }
.wisch { position: absolute; top: 24%; width: 15%; height: 40%; border: 3px solid transparent; border-radius: 50%; opacity: 0; pointer-events: none; }
.wisch--l { right: 100%; margin-right: 6%; border-left-color: var(--rosa); }
.wisch--r { left: 100%; margin-left: 6%; border-right-color: var(--rosa); }
.szene.laeuft .wisch { animation: wisch 6s infinite; }
.szene.laeuft .wisch--r { animation-delay: 0.08s; }
@keyframes wisch { 0%, 18% { opacity: 0; transform: scaleY(0.7); } 21%, 29% { opacity: 0.95; transform: scaleY(1); } 33%, 100% { opacity: 0; transform: scaleY(0.7); } }
.welle { position: absolute; left: 50%; top: 50%; width: calc(var(--sz-b) * 1.2); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--rosa); opacity: 0; translate: -50% -50%; pointer-events: none; }
.szene--schuetteln.laeuft .welle { animation: welle 6s infinite; }
.szene--schuetteln.laeuft .welle--2 { animation-delay: 0.28s; }
@keyframes welle { 0%, 31% { opacity: 0; scale: 0.5; } 33% { opacity: 0.75; } 50% { opacity: 0; scale: 2.1; } 100% { opacity: 0; scale: 2.1; } }
.szene--schuetteln.laeuft .c1 { animation: chip-a 6s infinite; }
.szene--schuetteln.laeuft .c2 { animation: chip-b 6s infinite; }
.szene--schuetteln.laeuft .c3 { animation: chip-c 6s infinite; }
@keyframes chip-a { 0%, 17% { opacity: 1; } 20%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes chip-b { 0%, 18% { opacity: 0; transform: translateY(6px); } 21%, 30% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } }
@keyframes chip-c { 0%, 33% { opacity: 0; transform: translateY(6px) scale(0.9); } 36%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }

/* Umdrehen: das Telefon dreht sich um seine Längsachse auf den Rücken (wie am Tisch), bleibt kurz liegen und dreht sich gesperrt zurück (8 s, Schleife) */
/* Vorder- und Rückseite schaltet die Animation selbst um (genau bei 90° und 270°, wenn nur die Kante zu sehen ist).
   Nicht über backface-visibility: Das flackerte vor allem in Safari, weil die Vorderseite gleichzeitig überblendet. */
.flip { position: relative; width: var(--sz-b); transform-style: preserve-3d; will-change: transform; }
.telefon-hinten { position: absolute; inset: 0; transform: rotateY(180deg); opacity: 0;
  border-radius: calc(var(--sz-b) * 0.168); background: linear-gradient(155deg, #3a3d46 0%, #1b1d24 46%, #0c0d11 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 0 0 calc(var(--sz-b) * 0.009) #060306; }
.kamera-modul { position: absolute; top: 4.2%; left: 8%; width: 40%; aspect-ratio: 1; border-radius: 24%; display: grid; place-items: center; padding: 8%;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(255, 255, 255, 0.16); }
.kamera-modul i { width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #5d5a78 0%, #17141f 55%, #05040a 100%); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); }
.kamera-modul i:nth-child(3) { grid-column: 1; }
.hinten-logo { position: absolute; left: 50%; top: 58%; width: 36%; translate: -50% -50%; opacity: 0.78; fill: var(--rosa); }
.flip-schatten { position: absolute; left: 14%; right: 14%; bottom: 14px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); filter: blur(14px); opacity: 0.55; z-index: -1; }
.szene--umdrehen.laeuft .flip { animation: umdrehen 8s infinite; }
@keyframes umdrehen {
  0%, 10% { transform: rotateY(0deg) translateY(0) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  22% { transform: rotateY(90deg) translateY(-6%) scale(1.05); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  34%, 56% { transform: rotateY(180deg) translateY(0) scale(1); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  68% { transform: rotateY(270deg) translateY(-6%) scale(1.05); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
  80%, 100% { transform: rotateY(360deg) translateY(0) scale(1); }
}
.szene--umdrehen.laeuft .flip .telefon { animation: flip-vorne 8s infinite; }
.szene--umdrehen.laeuft .telefon-hinten { animation: flip-hinten 8s infinite; }
@keyframes flip-vorne { 0%, 21.9% { opacity: 1; } 22%, 67.9% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes flip-hinten { 0%, 21.9% { opacity: 0; } 22%, 67.9% { opacity: 1; } 68%, 100% { opacity: 0; } }
.szene--umdrehen.laeuft .sperre--flip { animation: ueber-flip 8s infinite; }
@keyframes ueber-flip { 0%, 36% { opacity: 0; } 40%, 94% { opacity: 1; } 100% { opacity: 0; } }
.szene--umdrehen.laeuft .flip-schatten { animation: schatten 8s infinite; }
@keyframes schatten { 0%, 10% { opacity: 0.55; transform: none; } 22% { opacity: 0.3; transform: scaleX(0.8); } 34%, 56% { opacity: 0.6; transform: none; } 68% { opacity: 0.3; transform: scaleX(0.8); } 80%, 100% { opacity: 0.55; transform: none; } }
.szene--umdrehen.laeuft .c1 { animation: flip-a 8s infinite; }
.szene--umdrehen.laeuft .c2 { animation: flip-b 8s infinite; }
.szene--umdrehen.laeuft .c3 { animation: flip-c 8s infinite; }
@keyframes flip-a { 0%, 10% { opacity: 1; } 13%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes flip-b { 0%, 32% { opacity: 0; transform: translateY(6px); } 36%, 49% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; } }
@keyframes flip-c { 0%, 50% { opacity: 0; transform: translateY(6px) scale(0.9); } 54%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

/* ---------- Chat: Nachrichten, Sprachnachricht, Reaktion und verschwindende Nachricht folgen dem Scrollen ---------- */
.chat-s { position: relative; }
.js:not(.ruhig) .chat-s { height: 420vh; }
.chat-klebt { padding-block: var(--abstand) 20px; }
.js:not(.ruhig) .chat-klebt { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-content: center; padding-block: 20px; }
.chat-raster { display: grid; gap: clamp(14px, 4vw, 64px); align-items: center; }
@media (min-width: 960px) { .chat-raster { grid-template-columns: 1.05fr 0.95fr; } }
.chat-text { display: grid; gap: 16px; }
.chat-schritte { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 20px; }
.chat-schritt { display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start; transition: opacity 0.35s; }
.chat-schritt .nr { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rand); display: grid; place-items: center;
  font: 500 0.78rem/1 var(--f-mono); transition: background 0.35s, color 0.35s, border-color 0.35s; }
.chat-schritt h3 { margin-top: 5px; }
.chat-schritt p { margin-top: 4px; color: var(--leise); max-width: 46ch; }
.js:not(.ruhig) .chat-schritt { opacity: 0.38; }
.js:not(.ruhig) .chat-schritt.aktiv { opacity: 1; }
.chat-schritt.aktiv .nr { background: var(--text); color: #0b0c10; border-color: transparent; }
@media (max-width: 959px) {
  .js:not(.ruhig) .chat-schritt:not(.aktiv), .js:not(.ruhig) .chat-lead { display: none; }
  .js:not(.ruhig) .chat-schritte { min-height: 7.5em; margin-top: 4px; }
  .chat-text h2 { font-size: clamp(1.8rem, 1.2rem + 3vw, 2.6rem); }
}
.chat-bild { position: relative; display: grid; justify-items: center; }
.chat-bild::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 126, 178, 0.32), transparent); filter: blur(24px); }
.chat-telefon { --breite: clamp(190px, 60vw, 280px); position: relative; }
.js:not(.ruhig) .chat-telefon { --breite: clamp(150px, 24svh, 280px); }
@media (min-width: 960px) { .js:not(.ruhig) .chat-telefon { --breite: clamp(220px, 40svh, 310px); } }
.chat-details { padding-top: 0; }

/* Nachgebaute Chat-Ansicht (cqw: wächst mit dem Telefon) */
.cm { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 15cqw 5cqw 5cqw; font-family: var(--f-ios); color: #fff; }
.cm-kopf { position: relative; display: grid; justify-items: center; padding: 1cqw 0 3cqw; text-align: center; }
.cm-zurueck { position: absolute; left: 0; top: 0.6cqw; width: 9.6cqw; height: 9.6cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; }
.cm-zurueck svg { width: 4.6cqw; height: 4.6cqw; stroke-width: 2.4; }
.cm-kopf b { display: block; font-size: 4cqw; line-height: 1.2; }
.cm-kopf small { display: inline-block; margin-top: 1cqw; padding: 0.5cqw 2cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 2.6cqw; color: #F2D4E8; }
.cm-banner { margin: 3cqw auto 0; display: flex; align-items: center; gap: 1.4cqw; padding: 1.6cqw 3.2cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 3cqw; color: #F6DCEB; }
.cm-banner svg { width: 3.4cqw; height: 3.4cqw; }
.cm-verlauf { margin-top: auto; display: flex; flex-direction: column; }
.cm-zeile { position: relative; display: flex; padding-bottom: 2.6cqw; }
.cm-zeile--ich { justify-content: flex-end; }
.cm-zeile--reag { padding-bottom: 6cqw; }
.cm-b { position: relative; max-width: 74%; padding: 2.4cqw 3.6cqw; border-radius: 4.6cqw; font-size: 3.6cqw; line-height: 1.35; }
.cm-b--sie { background: rgba(255, 255, 255, 0.16); border-bottom-left-radius: 1.4cqw; }
.cm-b--ich { background: #C2477F; color: #FCEFF5; border-bottom-right-radius: 1.4cqw; }
.cm-sprache { display: flex; align-items: center; gap: 2.4cqw; width: 66cqw; max-width: 80%; padding: 2.2cqw 3.4cqw; }
.cm-play { flex: none; width: 7.4cqw; height: 7.4cqw; border-radius: 50%; background: #fff; position: relative; }
.cm-play::before { content: ""; position: absolute; left: 53%; top: 50%; translate: -50% -50%; border-style: solid; border-width: 1.7cqw 0 1.7cqw 2.8cqw; border-color: transparent transparent transparent #4E2149; }
.cm-welle { position: relative; flex: 1; display: flex; align-items: center; gap: 0.6cqw; height: 7cqw; transition: height 0.45s var(--weich); }
.cm-welle i { flex: 1; max-width: 0.9cqw; height: var(--h); border-radius: 1cqw; background: rgba(255, 255, 255, 0.4); }
html:not(.js) .cm-welle i:nth-child(-n+12), .ruhig .cm-welle i:nth-child(-n+12) { background: #fff; }
.cm-dauer { font-size: 3cqw; color: #F2D4E8; font-variant-numeric: tabular-nums; }
.cm-badge { position: absolute; left: 3cqw; bottom: -4.6cqw; padding: 0.6cqw 1.8cqw; border-radius: 999px; background: rgba(18, 20, 28, 0.97); border: 0.3cqw solid rgba(255, 255, 255, 0.2); font-size: 3.6cqw; line-height: 1.3; }
.cm-reaktionen { position: absolute; left: 0; bottom: calc(100% + 0.5cqw); display: none; gap: 1.2cqw; padding: 1.8cqw 2.6cqw; border-radius: 999px; z-index: 2;
  background: rgba(46, 16, 42, 0.94); border: 0.3cqw solid rgba(255, 255, 255, 0.2); box-shadow: 0 3cqw 6cqw -2cqw rgba(0, 0, 0, 0.6); font-size: 5.2cqw; line-height: 1; }
.cm-reaktionen .on { transform-origin: 50% 80%; animation: cm-puls 1.1s 0.5s both; }
.cm-eingabe { margin-top: 2cqw; display: flex; align-items: center; gap: 2cqw; padding-bottom: 2.6cqw; }
.cm-feld { flex: 1; padding: 2.6cqw 4cqw; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 3.4cqw; color: #E3C6D8; }
.cm-mic { width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; }
.cm-rund { flex: none; width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; font-size: 5.6cqw; font-weight: 300; line-height: 1; }
.cm-zeit { display: block; margin-top: 0.6cqw; text-align: right; font-size: 2.4cqw; opacity: 0.62; }
.cm-zeit i { font-style: normal; color: #7CC4FF; letter-spacing: -0.2em; opacity: 1; }
.cm-mic svg { width: 4.6cqw; height: 4.6cqw; }
.cm-foto { position: relative; width: 38cqw; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; }
.cm-foto img { width: 100%; height: 100%; object-fit: cover; filter: blur(2.2cqw) saturate(1.2); transform: scale(1.2); }
.cm-foto span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(43, 15, 32, 0.35); }
.cm-foto svg { width: 8cqw; height: 8cqw; }
.cm-alt { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.7s var(--weich), opacity 0.5s; }
.cm-alt > .cm-zeile { min-height: 0; overflow: hidden; }
@keyframes cm-puls { 0% { transform: scale(1); } 35% { transform: scale(1.7); } 100% { transform: scale(1.25); } }
@keyframes cm-ton { to { background: #fff; } }

/* Ablauf je Schritt (nur mit Bewegung): 0 Nachrichten, 1 Sprachnachricht, 2 Reaktion, 3 verschwindet */
.js:not(.ruhig) .chat-s [data-ab] { opacity: 0; transform: translateY(3cqw) scale(0.96); transition: opacity 0.45s, transform 0.55s var(--weich); pointer-events: none; }
.js:not(.ruhig) .chat-s .cm-badge[data-ab] { transform: scale(0.2); }
.js:not(.ruhig) .chat-s .cm-reaktionen { display: flex; }
.js:not(.ruhig) .chat-s:is([data-schritt="1"], [data-schritt="2"], [data-schritt="3"], [data-schritt="4"]) [data-ab="1"],
.js:not(.ruhig) .chat-s:is([data-schritt="3"], [data-schritt="4"]) [data-ab="2"],
.js:not(.ruhig) .chat-s[data-schritt="3"] [data-ab="bar"],
.js:not(.ruhig) .chat-s[data-schritt="4"] [data-ab="3"],
.js:not(.ruhig) .chat-s[data-schritt="2"] [data-ab="spulen"] { opacity: 1; transform: none; }
/* Schritt 1: Sprachnachricht spielt von selbst; ab Schritt 2 färbt das Skript die Balken nach dem Finger (Klasse „gespielt“) */
.js:not(.ruhig) .chat-s[data-schritt="1"] .cm-welle i { animation: cm-ton 1.8s linear forwards; animation-delay: calc(var(--i) * 55ms + 0.5s); }
.js:not(.ruhig) .chat-s:is([data-schritt="2"], [data-schritt="3"], [data-schritt="4"]) .cm-welle i { animation: none; transition: background 0.12s; }
.js:not(.ruhig) .chat-s .cm-welle i.gespielt { background: #fff; }
.js:not(.ruhig) .chat-s[data-schritt="2"] .cm-welle { height: 13cqw; }
.js:not(.ruhig) .chat-s[data-schritt="2"] .cm-welle i { box-shadow: 0 0 1.2cqw rgba(255, 255, 255, 0.35); }
.js:not(.ruhig) .chat-s[data-schritt="4"] .cm-alt { grid-template-rows: 0fr; opacity: 0; }
/* Finger beim Spulen: Kreis auf der Wellenform mit Zeitmarke darüber; Stelle kommt vom Skript (--fx 0 bis 1) */
.cm-finger { position: absolute; top: 50%; left: calc(var(--fx, 0.15) * 100%); width: 8.4cqw; height: 8.4cqw; margin: -4.2cqw 0 0 -4.2cqw; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, 0.26); border: 0.4cqw solid rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 1.6cqw rgba(255, 255, 255, 0.1); }
.cm-finger u { position: absolute; bottom: calc(100% + 1.4cqw); left: 50%; translate: -50% 0; padding: 0.8cqw 2cqw; border-radius: 999px; text-decoration: none; white-space: nowrap;
  background: #fff; color: #4E2149; font: 700 3cqw/1.2 var(--f-ios); font-variant-numeric: tabular-nums; }
html:not(.js) .cm-finger, .ruhig .cm-finger { display: none; }

/* Handy: Merkmal-Zeilen (alle Abschnitte) kleiner, damit man weniger scrollen muss */
@media (max-width: 679px) {
  .merkmal, .merkmale li { grid-template-columns: 36px 1fr; gap: 12px; }
  .merkmal .symbol, .merkmale .symbol { width: 36px; height: 36px; border-radius: 10px; }
  .merkmal .symbol svg, .merkmale .symbol svg { width: 20px; height: 20px; }
  .merkmal h3, .merkmale h3 { font-size: 1.02rem; }
  .merkmal p, .merkmale p { font-size: 0.9rem; line-height: 1.5; margin-top: 2px; }
  .merkmal-raster { gap: 22px; }
  .teilen-liste { gap: 18px; }
}

@media (max-width: 679px) {
  .hero-text { gap: 18px; }
  .fakten { font-size: 0.8rem; }
  .fakten li { gap: 7px; }
  .fakten svg { width: 15px; height: 15px; }
}

/* ---------- Kontaktseite: Formular (Grav-Formular, eigene Gestaltung, da built_in_css aus) ---------- */
.kontakt-raster { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .kontakt-raster { grid-template-columns: 1.25fr 0.75fr; } }
.kontakt-titel { font-size: 1.4rem; margin-bottom: 18px; }
.kontakt-seite { display: grid; gap: 26px; }
.kontakt-form form { display: grid; gap: 18px; }
.kontakt-form .form-field { display: grid; gap: 7px; }
.kontakt-form .form-label label, .kontakt-form .form-label { font-weight: 650; font-size: 0.95rem; color: var(--text); }
.kontakt-form .required { color: var(--rosa); margin-left: 2px; }
.kontakt-form input[type="text"], .kontakt-form input[type="email"], .kontakt-form select, .kontakt-form textarea {
  width: 100%; box-sizing: border-box; font: inherit; color: var(--text); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--rand); border-radius: 14px; padding: 13px 15px; transition: border-color 0.2s, background 0.2s; }
.kontakt-form textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
.kontakt-form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--schwach) 50%), linear-gradient(135deg, var(--schwach) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.kontakt-form select option { color: #1F0C1D; }
.kontakt-form input:focus, .kontakt-form select:focus, .kontakt-form textarea:focus { outline: none; border-color: var(--rosa); background: rgba(255, 255, 255, 0.09); }
.kontakt-form input::placeholder, .kontakt-form textarea::placeholder { color: var(--schwach); }
.kontakt-form .form-input-wrapper, .kontakt-form .form-select-wrapper, .kontakt-form .form-textarea-wrapper { width: 100%; }
.kontakt-form .checkboxes, .kontakt-form .form-field--checkbox .form-data { display: flex; gap: 10px; align-items: flex-start; }
.kontakt-form input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--rosa); flex: none; }
.kontakt-form .checkboxes label, .kontakt-form .form-field input[type="checkbox"] + label { font-size: 0.9rem; color: var(--leise); line-height: 1.5; }
.kontakt-form a { color: var(--rosa); }
.kontakt-form .form-extra-wrapper, .kontakt-form .form-description { font-size: 0.82rem; color: var(--schwach); }
.kontakt-form .buttons { margin-top: 4px; }
.kontakt-form .button, .kontakt-form button[type="submit"] { font: inherit; font-weight: 700; font-size: 1.02rem; cursor: pointer; border: 0;
  padding: 14px 26px; border-radius: 999px; color: #0b0c10; background: var(--text); }
.kontakt-form .button:hover, .kontakt-form button[type="submit"]:hover { filter: brightness(1.05); }
.kontakt-form .notices { border-radius: 14px; padding: 14px 16px; font-size: 0.95rem; margin-bottom: 16px; }
.kontakt-form .notices.green, .kontakt-form .notices.success { background: rgba(47, 191, 113, 0.14); border: 1px solid rgba(47, 191, 113, 0.4); color: #CFF5DE; }
.kontakt-form .notices.red, .kontakt-form .notices.error { background: rgba(232, 80, 79, 0.14); border: 1px solid rgba(232, 80, 79, 0.45); color: #FFD7D6; }
.kontakt-form .form-errors, .kontakt-form .form-error { color: #FFB4B3; font-size: 0.85rem; }
.kontakt-form [data-grav-field="honeypot"], .kontakt-form .form-honeybear { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

/* Unter den Fragen: Weg zum Kontaktformular */
.fragen-mehr { max-width: 860px; margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 22px; padding: 6px 0; }
.fragen-mehr p { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; color: var(--text); }
@media (max-width: 520px) { .fragen-mehr { padding: 18px; } .fragen-mehr .knopf--gross { width: 100%; justify-content: center; } }

/* Vier und fünf Telefone in der Reihe (Ordnung): schmaler, abwechselnd höher und tiefer; dazwischen wischen wie auf dem Handy */
@media (min-width: 1180px) {
  .telefon-reihe:has(figure:nth-child(4)) { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .telefon-reihe:has(figure:nth-child(5)) { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .telefon-reihe:has(figure:nth-child(4)) .telefon { --breite: clamp(190px, 19vw, 240px); }
  .telefon-reihe:has(figure:nth-child(5)) .telefon { --breite: clamp(160px, 15vw, 205px); }
  .telefon-reihe:has(figure:nth-child(4)) figure:nth-child(odd) { margin-top: 50px; }
  .telefon-reihe:has(figure:nth-child(4)) figure:nth-child(even) { margin-top: -30px; }
}
@media (min-width: 820px) and (max-width: 1179px) {
  .telefon-reihe:has(figure:nth-child(4)) { display: flex; overflow-x: auto; margin-inline: calc(var(--seite) * -1); padding-inline: var(--seite); justify-content: flex-start; gap: 18px; }
  .telefon-reihe:has(figure:nth-child(4)) .telefon { --breite: 230px; }
  .telefon-reihe:has(figure:nth-child(4)) figure { margin-top: 0 !important; }
}

/* ---------- Downloads (Presse-Seite) ---------- */
.downloads { display: grid; gap: 16px; }
@media (min-width: 760px) { .downloads { grid-template-columns: repeat(3, 1fr); } }
.download { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; padding: 20px; color: inherit; text-decoration: none; transition: transform 0.48s var(--weich), background 0.48s var(--weich); }
.download:hover, .download:focus-visible { transform: translateY(-3px); background: var(--glas-hoch); }
.download .symbol { margin: 0; }
.download h3 { margin: 0; }
.download p { margin: 4px 0 0; color: var(--leise); font-size: 0.93rem; }

/* ---------- Ratgeber (Übersicht und Artikel) ---------- */
.ratgeber-liste { display: grid; gap: 18px; }
@media (min-width: 700px) { .ratgeber-liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .ratgeber-liste { grid-template-columns: repeat(3, 1fr); } }
.ratgeber-karte { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform 0.48s var(--weich), background 0.48s var(--weich); }
.ratgeber-karte:hover, .ratgeber-karte:focus-visible { transform: translateY(-3px); background: var(--glas-hoch); }
.ratgeber-karte h3 { font-size: 1.3rem; line-height: 1.25; margin-top: 6px; }
.ratgeber-meta, .artikel-meta { font: 500 var(--t-mono)/1.4 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--schwach); }
.ratgeber-weiter { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 18px; color: var(--rosa); font-weight: 650; }
.ratgeber-weiter svg { width: 18px; height: 18px; transition: transform 0.48s var(--weich); }
.ratgeber-karte:hover .ratgeber-weiter svg { transform: translateX(3px); }
.artikel-kopf h1 { max-width: 22ch; font-size: clamp(2rem, 1.1rem + 3.6vw, 3.8rem); hyphens: auto; overflow-wrap: break-word; }
.artikel-meta { margin-top: 18px; }
.artikel-kopf + .artikel { padding-top: clamp(8px, 2vw, 24px); }
.artikel-kurz { max-width: 70ch; margin-bottom: clamp(30px, 4vw, 48px); }
.artikel-kurz ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--leise); }
.artikel-kurz li::marker { color: var(--rosa); }
.artikel-text { gap: 16px; font-size: 1.06rem; line-height: 1.7; }
.artikel-text h2 { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem); line-height: 1.2; margin-top: 30px; }
.artikel-text h3 { font-size: 1.18rem; color: var(--text); margin-top: 12px; }
.artikel-text li::marker { color: var(--rosa); }
.artikel-text ol { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.artikel-text blockquote { margin: 6px 0; padding: 18px 22px; border-radius: 20px; background: var(--glas); border: 1px solid var(--rand); color: var(--text); }
.artikel-text blockquote p { margin: 0; }

/* =====================================================================================================================
   Apple-Stil (Marc, 3. November 2026, nach dem Entwurf „Stahltür edel, dunkel“): reines Schwarz, Systemschrift von Apple,
   einfarbige Überschriften, Nummern statt bunter Symbolkacheln, Pink als einzige Akzentfarbe, Nachtblau nur als Schimmer.
   Steht absichtlich am Ende: überschreibt die Regeln darüber, ohne die Demos (PIN, Chat, Schütteln …) anzufassen.
   ===================================================================================================================== */
:root {
  --nacht: #000;
  --pflaume: #0a0a0c;
  --flaeche: #111113;
  --flaeche-hoch: #1c1c1f;
  --text: #f5f5f7;
  --leise: #a1a1a6;
  --schwach: #6e6e73;
  --rand: rgba(255, 255, 255, 0.1);
  --rand-hell: rgba(255, 255, 255, 0.2);
  --rosa: #FF7FB4;
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --f-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-display-breite: 100%;
  --t-hero: clamp(2.8rem, 1.4rem + 5.6vw, 6rem);
  --t-h2: clamp(2.1rem, 1.3rem + 3vw, 3.9rem);
  --t-lead: clamp(1.08rem, 1rem + 0.5vw, 1.4rem);
  --rund: 20px;
}
body { font-size: 1.0625rem; line-height: 1.47; letter-spacing: -0.012em; }
.himmel { background: radial-gradient(70% 40% at 50% -6%, rgba(40, 52, 96, 0.38) 0%, transparent 70%), #000; }

/* Überschriften: eine Farbe, halbfett, eng gesetzt; *Wort* wird nicht mehr hervorgehoben */
h1, h2, h3 { font-family: var(--f-display); font-stretch: normal; }
h1 { font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; }
h2 { font-weight: 600; letter-spacing: -0.028em; line-height: 1.06; }
h3 { font-weight: 600; letter-spacing: -0.015em; }
h1 em, h2 em, .verlauf { color: inherit; }
.lead { color: var(--leise); letter-spacing: -0.01em; }

/* Keine Kapitelzeilen über den Überschriften */
main .augenbraue:not(.tarif .augenbraue) { display: none; }

/* Kopf: schmal wie bei Apple, Schrift klein und grau */
.kopf { padding-block: 12px; background: rgba(0, 0, 0, 0.72); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); }
.marke { font-family: var(--f-display); font-weight: 600; font-size: 1.12rem; letter-spacing: -0.02em; }
.marke svg { width: 22px; height: 22px; }
.kopf-nav { gap: 30px; }
.kopf-nav a { font-size: 0.8rem; font-weight: 400; color: #d2d2d7; letter-spacing: 0; }
.sprach-wahl summary, .kopf-menue summary { background: transparent; border-color: transparent; }

/* Hero wie im Entwurf: kurze Zeile, grauer Text, weißer Knopf, Pink-Link, große Tresortür */
.hero { padding-block: clamp(64px, 9vw, 120px) clamp(40px, 6vw, 80px); }
.hero-text { gap: 20px; }
.hero-text h1 { max-width: 18ch; }
.hero-text .lead { max-width: 52ch; color: var(--leise); font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.3rem); line-height: 1.42; }
.store { border-radius: 999px; font-weight: 500; font-size: 0.95rem; padding: 11px 22px 11px 16px; }
.store--voll { background: var(--text); color: #000; }
.store--glas { border: 0; background: transparent; color: var(--rosa); padding-inline: 8px; }
.store--glas small { color: var(--rosa); opacity: 0.8; }
.store svg.i { width: 20px; height: 20px; }
.hero-buehne { width: min(100%, 720px); }
.hero-glut { background: radial-gradient(circle, #050506 0 51.5%, transparent 51.8%), conic-gradient(from 10deg, #2a2a2e, #121214, #2c2c31, #0f0f11, #2a2a2e); }
.hero-glut::before { inset: 2.6%; border-color: rgba(255, 255, 255, 0.08); }
.hero-glut::after { inset: 19.5%; border-color: var(--rosa); opacity: 0.55; }
.telefon { background: linear-gradient(150deg, #3a3a3e 0%, #161618 34%, #060607 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 0 0 calc(var(--b) * 0.009) #000, 0 50px 90px -34px rgba(0,0,0,.9); }
/* Fakten unter der Tür: drei kurze Angaben nebeneinander, Text in Weiß, ohne Symbole */
.fakten { order: 9; margin-top: 4px; gap: 10px 0; font-size: 0.86rem; color: var(--leise); }
.fakten li { padding: 0 22px; }
.fakten svg { display: none; }
.fakten .flagge { display: none; }

/* Abschnitte: viel Luft, Titel links, Text grau */
.abschnitt-kopf { gap: 16px; }
.abschnitt-kopf h2 { max-width: 20ch; }

/* Bunte Symbolkacheln weg: stattdessen laufende Nummern in Pink (wie „01“ im Entwurf) */
.merkmal-raster, .teilen-liste, .merkmale, .sicher-raster, .de-fakten, .ablauf { counter-reset: nr; }
.merkmal, .merkmale li, .karte--info, .fakt { counter-increment: nr; }
.merkmal .symbol, .merkmale .symbol, .karte--info .symbol, .fakt .symbol, .sperr-text .symbol, .karte--symbol .symbol { display: none; }
.merkmal, .merkmale li, .sicher-raster .karte--info { grid-template-columns: 48px 1fr; }
.merkmal::before, .merkmale li::before, .sicher-raster .karte--info::before, .fakt::before {
  content: counter(nr, decimal-leading-zero); font: 500 0.78rem/1.9 var(--f-mono); color: var(--rosa); letter-spacing: 0.04em; }
.sicher-raster .karte--info::before { grid-row: 1 / span 2; }
.fakt::before { display: block; margin-bottom: 6px; }
.merkmal h3, .merkmale h3, .karte--info h3 { font-size: 1.3rem; }
.merkmal p, .merkmale p, .karte--info p { color: var(--leise); }

/* Karten (PIN-Demo, Sperren, Chat, Cloud): ruhige dunkle Fläche, Apple-Rundung */
.karte { background: var(--flaeche); border: 1px solid rgba(255, 255, 255, 0.06); }
.anlaesse li, .szene-chip span, .umschalter, .marken span { background: transparent; border-color: var(--rand); }

/* Schritte (So funktioniert es, Chat): Nummer klein in Pink statt Kreis */
.schritt .nr, .chat-schritt .nr { border: 0; background: none; color: var(--schwach); font-family: var(--f-mono); }
.schritt.aktiv .nr, .chat-schritt.aktiv .nr { background: none; color: var(--rosa); }

/* Tarife: Fächer wie im Entwurf, Größe oben rechts, Preis unten */
.tarif { border: 1px solid var(--rand); background: var(--flaeche); }
.tarif .augenbraue { display: block; color: var(--rosa); font-family: var(--f-mono); }
.tarif strong { font-family: var(--f-display); font-weight: 600; }
.tarif--gratis { border-color: rgba(255, 127, 180, 0.45); }

/* Fragen: unverändert als Liste, nur Apple-Schrift */
.frage summary { font-family: var(--f-display); font-weight: 500; font-size: 1.15rem; }
.frage summary::after { border-color: var(--rand); }

/* Made in Germany: kleine Flagge bleibt als einzige Farbe neben Pink */
.de-streifen { width: 36px; height: 22px; border-radius: 3px; }

/* Leiste unten bleibt (Marcs Lieblingseffekt), nur neutral und mit Pink */
.leiste-glas { background: rgba(28, 28, 30, 0.7); border-color: rgba(255, 255, 255, 0.1); }
.leiste-tabs a[aria-current="true"], .leiste-knopf { color: var(--rosa); }

/* Fuß */
.fuss { font-size: 0.78rem; color: var(--schwach); }
.fuss nav a { color: #d2d2d7; }
.de-fakten .fakt { background: none; border: 0; border-bottom: 1px solid var(--rand); border-radius: 0; padding: 22px 0; }
.sicher-raster .karte--info { background: none; border: 0; border-bottom: 1px solid var(--rand); border-radius: 0; }

/* Tresor-Animation am Seitenende (Rad), wie bisher; Farben Pink wie das Logo (Marc: darf bleiben) */
.rad { position: absolute; left: 50%; top: 50%; width: min(980px, 150vw); aspect-ratio: 1; translate: -50% -50%; z-index: -1; pointer-events: none;
  transform: rotate(calc(var(--dreh, 0) * 1turn)); }
.rad i { position: absolute; inset: 0; border-radius: 50%; }
.rad .r1 { background: repeating-conic-gradient(rgba(255, 210, 228, 0.32) 0 0.7deg, transparent 0.7deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 64.4%, #000 69%, transparent 69.4%); mask: radial-gradient(circle, transparent 64%, #000 64.4%, #000 69%, transparent 69.4%); }
.rad .r2 { inset: 22%; border: 1px solid rgba(255, 210, 228, 0.18); background: radial-gradient(circle, rgba(255, 127, 180, 0.16), transparent 70%); }
.rad .r3 { inset: 8%; border: 1px dashed rgba(255, 210, 228, 0.12); }
.rad .r4 { inset: 0; background: conic-gradient(from -4deg, var(--rosa) 0 8deg, transparent 8deg);
  -webkit-mask: radial-gradient(circle, transparent 70.6%, #000 71%, #000 73%, transparent 73.4%); mask: radial-gradient(circle, transparent 70.6%, #000 71%, #000 73%, transparent 73.4%); }

/* =====================================================================================================================
   Pink als Lichtschein (Marc, 3. November 2026): Grund bleibt reines Schwarz wie im Entwurf, ohne Farbverlauf über die Seite.
   Pink erscheint nur dort, wo Licht herkommen würde: aus dem Inneren der Tresortür hinter dem Handy, als feine Linie im
   Türring, bei den Nummern und Links, am Gratis-Fach und im Rad am Seitenende.
   ===================================================================================================================== */
.himmel { background: #000; }
.kopf { background: rgba(0, 0, 0, 0.72); }
/* Licht aus dem Tresor: ein kleiner, weicher Schein direkt hinter dem Handy, nicht größer als der innere Ring */
.hero-buehne::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 127, 180, 0.34), rgba(255, 127, 180, 0.10) 55%, transparent 100%); filter: blur(18px); }
.hero-glut::after { border-color: var(--rosa); opacity: 0.75; box-shadow: 0 0 24px rgba(255, 127, 180, 0.35), inset 0 0 24px rgba(255, 127, 180, 0.2); }
.telefon--hero { position: relative; z-index: 1; }
/* Gratis-Fach: ein Hauch Licht am Rand */
.tarif--gratis { box-shadow: 0 0 0 1px rgba(255, 127, 180, 0.35), 0 18px 50px -24px rgba(255, 127, 180, 0.45); }
@media (hover: none), (max-width: 760px) { .hero-buehne::after { filter: none; } }
/* Vier Stimmungen: kein Verlauf über die ganze Breite; nur ein kleiner Schein hinter dem Handy in der Farbe der gewählten Stimmung */
.darstellungen .d-grund { inset: auto; right: 6%; top: 50%; width: min(520px, 70vw); aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; opacity: 0.55;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); filter: blur(10px); }
@media (max-width: 899px) { .darstellungen .d-grund { right: 50%; translate: 50% 10%; } }
/* Handy: die Tür bleibt rund; sie ist breiter als der Bildschirm und wird an den Seiten angeschnitten (.hero schneidet ab) */
@media (max-width: 679px) {
  .hero-buehne { --breite: clamp(200px, 56vw, 240px); width: calc(var(--breite) * 2.55); max-width: none; aspect-ratio: 1; }
}
@media (max-width: 679px) { .fakten { flex-direction: column; align-items: center; gap: 6px; } .fakten li { border-left: 0; padding: 0; } }
/* Tiefe im Hintergrund (Marc, 3. November 2026): Grund bleibt Schwarz; zwei sehr leise, dunkle Pink-Lichtschein-Flächen, wie Licht, das von oben
   und aus einer Ecke in einen dunklen Raum fällt. Fest am Fenster, kein Verlauf über die Seite, kein Blau/Lila. */
.himmel { background:
  radial-gradient(70% 38% at 50% -8%, rgba(150, 30, 90, 0.34), transparent 72%),
  radial-gradient(46% 40% at 100% 62%, rgba(120, 24, 76, 0.20), transparent 70%),
  radial-gradient(42% 36% at 0% 100%, rgba(120, 24, 76, 0.14), transparent 70%),
  #000; }

/* =====================================================================================================================
   Pop für private Nutzer (Marc, 3. November 2026): ruhiger schwarzer Rahmen bleibt; darin die bunten Dinge aus der App.
   1) farbige Symbolkacheln wie in den Einstellungen der App  2) die selbst gezeichneten Sticker der App  3) Stimmung der ganzen Seite
   ===================================================================================================================== */

/* 1) Kacheln zurück, keine Nummern */
.merkmal::before, .merkmale li::before, .sicher-raster .karte--info::before, .fakt::before { content: none; display: none; }
.merkmal .symbol, .merkmale .symbol, .karte--info .symbol, .fakt .symbol, .sperr-text .symbol {
  display: grid; place-items: center; width: 40px; height: 40px; margin: 0; border-radius: 11px; background: var(--farbe); color: #fff; }
.merkmal .symbol svg, .merkmale .symbol svg, .karte--info .symbol svg, .fakt .symbol svg, .sperr-text .symbol svg { width: 22px; height: 22px; stroke-width: 1.9; }
.fakt .symbol { margin-bottom: 12px; }
.sperr-text .symbol { margin-bottom: 14px; }
.merkmal, .merkmale li, .sicher-raster .karte--info { grid-template-columns: 52px 1fr; }

/* 2) Sticker: wie Aufkleber, leicht schief, schweben ganz sacht */
.sticker { position: absolute; z-index: 3; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); animation: sticker-schweben 6s ease-in-out infinite alternate; }
.sticker img { display: block; width: 100%; height: auto; }
.sticker { --g: 96px; width: var(--g); rotate: var(--r, 0deg); }
.ruhig .sticker { animation: none; }
@keyframes sticker-schweben { to { transform: translateY(-9px); } }
.st-1 { --g: clamp(70px, 9vw, 110px); --r: -14deg; left: max(2%, calc(50% - var(--breite) * 1.5)); top: 14%; animation-delay: -1s; }
.st-2 { --g: clamp(84px, 11vw, 132px); --r: 10deg; right: max(0%, calc(50% - var(--breite) * 1.6)); top: 20%; animation-delay: -3s; }
.st-3 { --g: clamp(70px, 9vw, 108px); --r: -8deg; left: max(4%, calc(50% - var(--breite) * 1.45)); bottom: 12%; animation-delay: -2s; }
.chat-bild { position: relative; }
.st-c1 { --g: clamp(70px, 9vw, 112px); --r: -10deg; left: -4%; top: 12%; animation-delay: -1.5s; }
.st-c2 { --g: clamp(56px, 7vw, 92px); --r: 12deg; right: -2%; top: 24%; animation-delay: -4s; }
.st-c3 { --g: clamp(56px, 7vw, 92px); --r: -6deg; left: -2%; bottom: 20%; animation-delay: -2.5s; }
.st-c4 { --g: clamp(52px, 6vw, 84px); --r: 9deg; right: 2%; bottom: 14%; animation-delay: -5s; }
@media (max-width: 679px) { .st-3, .st-c3, .st-c4 { display: none; } .st-1 { left: 0; top: 8%; } .st-2 { right: 0; top: 14%; } .st-c1 { left: 0; } .st-c2 { right: 0; } }

/* 3) Stimmungs-Umschalter im Kopf: drei kleine Farbkreise */
.stimmung { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; border: 1px solid var(--rand); }
.stimmung button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; }
.stimmung i { width: 18px; height: 18px; border-radius: 50%; background: var(--fl); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); transition: transform 0.48s var(--weich), box-shadow 0.48s var(--weich); }
.stimmung button[aria-pressed="true"] i { transform: scale(1.12); box-shadow: 0 0 0 2px var(--text), inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.stimmung button:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; border-radius: 50%; }
@media (max-width: 420px) { .stimmung { padding: 3px; gap: 2px; } }

/* Himmel in drei Lagen (die alten Lichtflecken-Elemente): Schwarz mit Pink-Schein, Rosa, Blau; sie blenden weich ineinander über (480 ms) */
.himmel { background: #000; }
.himmel .fleck { display: block; position: absolute; inset: 0; width: auto !important; height: auto !important; left: 0; top: 0; right: 0; bottom: 0; border-radius: 0;
  transform: none !important; opacity: 0; transition: opacity 0.48s var(--weich); will-change: auto; }
.himmel .f1 { opacity: 1; background:
  radial-gradient(70% 38% at 50% -8%, rgba(150, 30, 90, 0.34), transparent 72%),
  radial-gradient(46% 40% at 100% 62%, rgba(120, 24, 76, 0.20), transparent 70%),
  radial-gradient(42% 36% at 0% 100%, rgba(120, 24, 76, 0.14), transparent 70%); }
.himmel .f2 { background:
  radial-gradient(80% 55% at 92% 0%, rgba(255, 127, 180, 0.50), transparent 70%),
  radial-gradient(70% 55% at 0% 50%, rgba(200, 138, 240, 0.34), transparent 70%),
  radial-gradient(80% 55% at 92% 100%, rgba(255, 170, 128, 0.32), transparent 70%),
  linear-gradient(170deg, #3A1738, #2A1229 55%, #331628); }
.himmel .f3 { background:
  radial-gradient(75% 50% at 8% 2%, rgba(79, 124, 247, 0.40), transparent 70%),
  radial-gradient(65% 50% at 100% 48%, rgba(155, 107, 217, 0.26), transparent 70%),
  radial-gradient(70% 50% at 8% 100%, rgba(43, 181, 201, 0.22), transparent 70%),
  linear-gradient(170deg, #0F1730, #151B2D 60%, #17244B); }
:root[data-stimmung="rosa"] .himmel .f1, :root[data-stimmung="blau"] .himmel .f1 { opacity: 0; }
:root[data-stimmung="rosa"] .himmel .f2 { opacity: 1; }
:root[data-stimmung="blau"] .himmel .f3 { opacity: 1; }

/* Farben der Stimmungen; alles andere folgt über die Variablen */
:root[data-stimmung="rosa"] {
  --flaeche: rgba(255, 255, 255, 0.09); --flaeche-hoch: rgba(255, 255, 255, 0.14);
  --text: #FBF0F6; --leise: #E8CCDD; --schwach: #CBA2BD; --rand: rgba(255, 220, 240, 0.20); --rand-hell: rgba(255, 220, 240, 0.32);
  --rosa: #FF9CC4; --rosa-tief: #2B0F20; }
:root[data-stimmung="blau"] {
  --flaeche: rgba(255, 255, 255, 0.07); --flaeche-hoch: rgba(255, 255, 255, 0.12);
  --text: #F2F5FF; --leise: #B7C2E2; --schwach: #8592B8; --rand: rgba(190, 210, 255, 0.16); --rand-hell: rgba(190, 210, 255, 0.28);
  --rosa: #F2B544; --rosa-tief: #1A1405; }
:root[data-stimmung="rosa"] .kopf { background: rgba(58, 23, 56, 0.55); }
:root[data-stimmung="blau"] .kopf { background: rgba(15, 23, 48, 0.6); }
:root[data-stimmung="rosa"] .karte, :root[data-stimmung="rosa"] .tarif { background: rgba(255, 255, 255, 0.08); border-color: var(--rand); }
:root[data-stimmung="blau"] .karte, :root[data-stimmung="blau"] .tarif { background: rgba(255, 255, 255, 0.06); border-color: var(--rand); }
:root[data-stimmung="rosa"] .hero-glut { background: radial-gradient(circle, #3A1738 0 51.5%, transparent 51.8%), conic-gradient(from 10deg, #6B3563, #3A1738, #7A4170, #331430, #6B3563); }
:root[data-stimmung="blau"] .hero-glut { background: radial-gradient(circle, #111A38 0 51.5%, transparent 51.8%), conic-gradient(from 10deg, #2D3A66, #151D3C, #36457A, #121A36, #2D3A66); }
:root[data-stimmung="rosa"] .hero-buehne::after { background: radial-gradient(closest-side, rgba(255, 156, 196, 0.5), rgba(255, 156, 196, 0.14) 55%, transparent 100%); }
:root[data-stimmung="blau"] .hero-buehne::after { background: radial-gradient(closest-side, rgba(242, 181, 68, 0.34), rgba(79, 124, 247, 0.12) 55%, transparent 100%); }
:root[data-stimmung="blau"] .hero-glut::after { box-shadow: 0 0 24px rgba(242, 181, 68, 0.35), inset 0 0 24px rgba(242, 181, 68, 0.2); }
:root[data-stimmung="blau"] .tarif--gratis { box-shadow: 0 0 0 1px rgba(242, 181, 68, 0.4), 0 18px 50px -24px rgba(242, 181, 68, 0.45); }
:root[data-stimmung="rosa"] .store--voll { color: #2B0F20; }
:root[data-stimmung="blau"] .store--voll { color: #0F1730; }
/* Farbwechsel weich im Takt von 480 ms */
body, .kopf, .karte, .tarif, .hero-glut, .hero-buehne::after, .store, .frage, .leiste-glas { transition: background-color 0.48s var(--weich), border-color 0.48s var(--weich), color 0.48s var(--weich), box-shadow 0.48s var(--weich); }
/* Marc: Sticker nur im Chat; Info-Zeilen der Sicherheit in jeder Stimmung ohne Kasten; Überschriften kräftiger, selbstbewusst */
:root .sicher-raster .karte--info, :root[data-stimmung] .sicher-raster .karte--info { background: none; border: 0; border-bottom: 1px solid var(--rand); border-radius: 0; box-shadow: none; }
:root[data-stimmung] .de-fakten .fakt { background: none; border: 0; border-bottom: 1px solid var(--rand); border-radius: 0; box-shadow: none; }
h1 { font-weight: 800; letter-spacing: -0.035em; }
h2 { font-weight: 750; letter-spacing: -0.032em; }
h3 { font-weight: 650; }
.tarif strong { font-weight: 750; }
/* Fakten unter den Store-Knöpfen: wieder mit Flagge und kleinen Symbolen (Marc) */
.fakten svg { display: inline-block; width: 16px; height: 16px; color: var(--leise); }
.fakten .flagge { display: inline-block; width: 1.4em; height: 0.95em; margin-right: 0; }
@media (min-width: 900px) { .fakten { flex-wrap: nowrap; white-space: nowrap; } }
/* Unterseiten: keine Dreier-Karten. „So tauschst du aus“ als Schritte mit Linie; Ratgeber höchstens zwei nebeneinander */
.ablauf { gap: 0; border-top: 1px solid var(--rand); }
@media (min-width: 760px) { .ablauf { grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 4vw, 56px); } }
.ablauf li.karte, :root[data-stimmung] .ablauf li.karte { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 24px 0; border-bottom: 1px solid var(--rand); }
@media (min-width: 760px) { .ablauf li.karte, :root[data-stimmung] .ablauf li.karte { border-bottom: 0; } }
.ablauf .nr { width: auto; height: auto; background: none; color: var(--rosa); font: 750 1.6rem/1 var(--f-display); justify-content: start; }
@media (min-width: 1040px) { .ratgeber-liste { grid-template-columns: repeat(2, 1fr); gap: 22px; } }

/* =====================================================================================================================
   Abgrenzung (Marc, 3. November 2026, nach Vergleich mit einer anderen App-Seite):
   - Titel in unserer Titelschrift Mona Sans, breit gestellt wie im Logo (kräftig, aber eigene Form)
   - kein Pink-Licht von oben; das Licht fällt aus der geöffneten Tresortür (Lichtkegel mit feinen Strahlen)
   - Pink für Logo, Sticker und Tür; Bernstein (wie in der App) für Zahlen und kleine Marken
   ===================================================================================================================== */
:root { --f-display: "Mona Sans", "Avenir Next", "Helvetica Neue", Arial, sans-serif; --bernstein: #F2B544; }
h1, h2 { font-family: var(--f-display); font-stretch: 118%; }
h1 { font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; }
h2 { font-weight: 780; letter-spacing: -0.028em; line-height: 1.02; }
h3, .tarif strong, .marke { font-family: var(--f-display); font-stretch: 110%; }
h3 { font-weight: 680; letter-spacing: -0.015em; }
.hero-text h1 { font-size: clamp(2.4rem, 1.2rem + 4.9vw, 5.3rem); max-width: 16ch; }
.abschnitt-kopf h2 { font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.5rem); }

/* Schwarz ohne Licht von oben */
.himmel .f1 { background: none; }

/* Licht aus dem Tresor: weicher Kegel und feine Strahlen um die Tür herum, nur im Hero */
.hero { isolation: isolate; }
.hero-buehne::before { content: ""; position: absolute; inset: -38%; z-index: -1; pointer-events: none; border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(255, 127, 180, 0.20), rgba(150, 30, 90, 0.10) 45%, transparent 75%),
    repeating-conic-gradient(from 0deg, rgba(255, 127, 180, 0.07) 0 2deg, transparent 2deg 11deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); }
:root[data-stimmung="blau"] .hero-buehne::before { background:
    radial-gradient(closest-side, rgba(242, 181, 68, 0.16), rgba(79, 124, 247, 0.08) 45%, transparent 75%),
    repeating-conic-gradient(from 0deg, rgba(242, 181, 68, 0.06) 0 2deg, transparent 2deg 11deg); }

/* Bernstein für Zahlen und kleine Marken */
.tarif .augenbraue, .schritt.aktiv .nr, .chat-schritt.aktiv .nr, .ablauf .nr, .ratgeber-meta, .artikel-meta { color: var(--bernstein); }
.leiste-tabs a[aria-current="true"], .leiste-knopf { color: var(--bernstein); }
.tarif--gratis { border-color: rgba(242, 181, 68, 0.45); box-shadow: 0 0 0 1px rgba(242, 181, 68, 0.3), 0 18px 50px -24px rgba(242, 181, 68, 0.35); }
.bald::before { background: var(--bernstein); }

/* „So tauschst du aus“: Zeitleiste mit Linie und Punkten statt Nummern in Kästen */
.ablauf { position: relative; border-top: 0; counter-reset: none; }
.ablauf .nr { font-size: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--bernstein); box-shadow: 0 0 0 5px rgba(242, 181, 68, 0.18); margin-bottom: 10px; }
@media (min-width: 760px) {
  .ablauf::before { content: ""; position: absolute; left: 7px; right: 0; top: 31px; height: 1px; background: linear-gradient(90deg, var(--bernstein), rgba(242, 181, 68, 0.1)); }
  .ablauf li.karte { padding-top: 24px; }
}
@media (max-width: 759px) {
  .ablauf::before { content: ""; position: absolute; left: 6px; top: 30px; bottom: 30px; width: 1px; background: rgba(242, 181, 68, 0.4); }
  .ablauf li.karte, :root[data-stimmung] .ablauf li.karte { padding-left: 32px; border-bottom: 0; position: relative; }
  .ablauf .nr { position: absolute; left: 0; top: 28px; }
}

/* Handy geht an (Marc, 3. November 2026): Bildschirm erst schwarz; beim Scrollen erscheint der Sperrbildschirm, die PIN-Punkte füllen sich,
   dann gleitet die Sperre nach oben und Tresory ist offen. --an (0 bis 1) setzt js/tresory.js (heroAn); ohne Skript oder bei „weniger Bewegung“: gleich offen. */
.hero-buehne { --an: 0; }
html:not(.js) .hero-buehne, .ruhig .hero-buehne { --an: 1; }
.telefon--hero .schirm::after { content: ""; position: absolute; inset: 0; z-index: 5; background: #000; pointer-events: none;
  opacity: clamp(0, calc(1 - var(--an) * 3), 1); }
/* die alte Lade-Animation (PIN tippt sich nach 0,7 s selbst) ersetzen */
.hero-sperre, .hero-sperre .punkte i, .hero-sperre .taste[style], .telefon--hero .schirm > img { animation: none !important; }
.hero-sperre { transform: translateY(calc(-104% * clamp(0, calc((var(--an) - 0.62) * 3.2), 1))); }
.hero-sperre .punkte i { background: rgb(255 255 255 / clamp(0, calc((var(--an) - 0.3 - var(--n) * 0.045) * 30), 1)); }
.telefon--hero .schirm > img { filter: brightness(calc(0.55 + 0.45 * clamp(0, calc((var(--an) - 0.62) * 3.2), 1))); }
/* Licht aus der Tür wächst mit */
.hero-buehne::after { opacity: clamp(0.25, var(--an), 1); }
.hero-buehne::before { opacity: clamp(0.15, var(--an), 1); }
/* Ausgeschaltetes Display mit Glanz (Marc): feine weiße Kante rundum wie Licht auf dem Glasrand, oben heller,
   dazu ein ganz leiser schräger Spiegel. Verschwindet mit dem Schwarz, sobald der Bildschirm angeht. */
.telefon--hero .schirm::after {
  background:
    linear-gradient(118deg, transparent 0 38%, rgba(255, 255, 255, 0.05) 46%, transparent 58%),
    #000;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.55),
    inset 0 2px 0 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 4px rgba(0, 0, 0, 0.9),
    inset 0 0 0 5px rgba(255, 255, 255, 0.10);
  border-radius: inherit;
}
/* Glanz wie im Entwurf (Marc): kein Rahmen, sondern Licht auf den geraden Glaskanten mit unterschiedlicher Deckkraft:
   oben hell, rechts mittel, links leise; die runden Ecken bleiben dunkel. Ersetzt die weiße Kante darüber. */
.telefon--hero .schirm::after {
  box-shadow: none;
  background:
    linear-gradient(90deg, transparent 13%, rgba(255, 255, 255, 0.85) 16%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.75) 84%, transparent 87%) top / 100% 1.5px no-repeat,
    linear-gradient(180deg, transparent 6%, rgba(255, 255, 255, 0.55) 10%, rgba(255, 255, 255, 0.35) 60%, rgba(255, 255, 255, 0.5) 100%) right / 1.2px 100% no-repeat,
    linear-gradient(180deg, transparent 6%, rgba(255, 255, 255, 0.12) 12%, rgba(255, 255, 255, 0.22) 70%, rgba(255, 255, 255, 0.3) 100%) left / 1px 100% no-repeat,
    #000;
}
/* Sicherheit (Marc): alle fünf Info-Zeilen rechts dicht untereinander, keine Lücken, keine einzelne Zeile links unter der PIN-Karte.
   Die ersten vier Zeilen nehmen nur ihre Höhe; der restliche Platz der hohen PIN-Karte geht in die letzte Zeile. */
@media (min-width: 1040px) {
  .sicher-raster { grid-template-rows: repeat(4, min-content) 1fr; align-items: start; }
  .sicher-raster .karte--pin { grid-column: 1; grid-row: 1 / span 5; }
  .sicher-raster .karte--info { grid-column: 2; }
  .sicher-raster .karte--info:last-of-type { border-bottom: 0; }
  .sicher-raster .karte--symbol { grid-column: 1 / -1; grid-row: 6; }
}
/* Abschnitts-Überschriften mittig (Marc): Titel und Text darunter zentriert; Abschnitte mit Handy daneben (Chat, So geht's, Made in Germany) bleiben zweispaltig */
.abschnitt-kopf { margin-inline: auto; text-align: center; justify-items: center; }
.abschnitt-kopf h2 { max-width: 22ch; }
.abschnitt-kopf .lead { margin-inline: auto; max-width: 62ch; }
.seiten-kopf .abschnitt-kopf { margin-inline: 0; text-align: left; justify-items: start; }
.fragen, .fragen-mehr { margin-inline: auto; }
.tarife-hinweis { margin-inline: auto; text-align: center; }
/* Preis-Fächer (Marc): Inhalt direkt unter dem Namen, Preis unten; die höheren Fächer heben so ihre Zahl an */
.tarif { justify-content: flex-start; }
.tarif .augenbraue { margin-bottom: 14px; }
.tarif .preis { margin-top: auto; }
.tarife-anfrage { margin: 22px auto 0; text-align: center; }
.tarife-anfrage a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; text-decoration: none; }
.tarife-anfrage a:hover { color: var(--bernstein); }
.tarife-anfrage svg { width: 18px; height: 18px; color: var(--bernstein); }
/* Preis-Fächer, Fassung A (Marc, 3. November 2026): alle gleich hoch und bündig; die Treppe entsteht nur durch die Größe der Zahl.
   Ersetzt die unterschiedlich hohen Fächer darüber. */
.tarife { align-items: stretch; grid-auto-rows: 1fr; }
@media (min-width: 940px) {
  .tarif:nth-child(1), .tarif:nth-child(2), .tarif:nth-child(3), .tarif:nth-child(4) { min-height: 0; }
}
.tarif strong { font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.5rem); }
.tarif:nth-child(2) strong { font-size: clamp(2.1rem, 1.6rem + 1.7vw, 3rem); }
.tarif:nth-child(3) strong { font-size: clamp(2.3rem, 1.7rem + 2.1vw, 3.5rem); }
.tarif:nth-child(4) strong { font-size: clamp(2.5rem, 1.8rem + 2.6vw, 4.1rem); }
@media (max-width: 400px) { .tarif--gratis strong { font-size: 1.75rem; } }
/* Schlüsselwörter in den Titeln hervorheben (Marc, 3. November 2026): *Sternchen* im Admin färbt das Wort kräftig rot.
   Gilt für alle Titel auf Start- und Unterseiten; in der Stimmung Blau passt ein warmes Bernstein besser. */
:root { --hervor: #FF4D6A; }
:root[data-stimmung="rosa"] { --hervor: #FF5C7A; }
:root[data-stimmung="blau"] { --hervor: #F2B544; }
h1 em, h2 em, h3 em, .verlauf { color: var(--hervor); font-style: normal; }

/* =====================================================================================================================
   Bewegung mit Bedeutung (Marc, 3. November 2026): entsperrende Titel, Drehrad an der Tür, Filmkorn
   ===================================================================================================================== */
/* Schlüsselwörter: erst verpixelt und leicht gedimmt, dann scharf; ein kurzes rotes Glimmen, wenn sie aufgehen */
h1 em, h2 em { transition: text-shadow 0.6s var(--weich), opacity 0.3s; }
h1 em.wird-entsperrt, h2 em.wird-entsperrt { opacity: 0.85; }
h1 em.entsperrt, h2 em.entsperrt { animation: entsperrt-glimmen 1.2s var(--weich); }
@keyframes entsperrt-glimmen { 0% { text-shadow: 0 0 22px rgba(255, 77, 106, 0.85); } 100% { text-shadow: 0 0 0 rgba(255, 77, 106, 0); } }

/* Drehrad: feine Teilstriche im äußeren Ring der Tür, alle 30° ein längerer; dreht sich beim Scrollen (--dreh aus js) */
.tuer-rad { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 0;
  transform: rotate(var(--dreh, 0deg)); will-change: transform;
  background:
    repeating-conic-gradient(from -0.4deg, rgba(255, 255, 255, 0.55) 0 0.8deg, transparent 0.8deg 30deg),
    repeating-conic-gradient(from -0.25deg, rgba(255, 255, 255, 0.22) 0 0.5deg, transparent 0.5deg 6deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 86%, #000 86.4%, #000 93%, transparent 93.4%);
  mask-image: radial-gradient(closest-side, transparent 86%, #000 86.4%, #000 93%, transparent 93.4%); }
/* Marke oben: kleiner roter Zeiger, leuchtet bei jedem Einrasten */
.tuer-marke { position: absolute; left: 50%; top: 1.2%; z-index: 2; width: 12px; height: 16px; translate: -50% 0;
  background: var(--hervor); clip-path: polygon(50% 100%, 0 0, 100% 0); filter: drop-shadow(0 0 0 rgba(255, 77, 106, 0)); }
.hero-buehne.klick .tuer-marke { animation: marke-klick 0.5s ease-out; }
.hero-buehne.klick .hero-glut::after { animation: ring-klick 0.5s ease-out; }
@keyframes marke-klick { 0% { filter: drop-shadow(0 0 10px rgba(255, 77, 106, 1)); scale: 1.35; } 100% { filter: drop-shadow(0 0 0 rgba(255, 77, 106, 0)); scale: 1; } }
@keyframes ring-klick { 0% { opacity: 1; box-shadow: 0 0 40px rgba(255, 127, 180, 0.7), inset 0 0 30px rgba(255, 127, 180, 0.4); } }
@media (max-width: 679px) { .tuer-marke { top: 0.6%; width: 10px; height: 13px; } }

/* Filmkorn: kaum sichtbar, damit das Schwarz wertig wirkt statt digital glatt */
body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E"); }
@media (hover: none), (max-width: 760px) { body::after { opacity: 0.04; } }
/* Zensieren-Balken statt Pixelfilter: das Wort liegt unter einem roten Balken, der nach rechts wegschrumpft; das Wort wird dabei von unscharf zu scharf */
h1 em, h2 em {
  background: linear-gradient(var(--hervor), var(--hervor)) no-repeat right 58% / 0% 0.84em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 0.6s cubic-bezier(0.7, 0, 0.2, 1), color 0.3s 0.28s, filter 0.5s 0.28s var(--weich); }
h1 em.verdeckt, h2 em.verdeckt { background-size: 100% 0.84em; color: transparent; filter: blur(6px); transition: none; }

/* ---------- Chat als kräftige Pink-Fläche (Farbblock für Rhythmus), dunkle Schrift; Sticker lassen sich verschieben ---------- */
.chat-s { --text: #2B0F20; --leise: rgba(43, 15, 32, 0.78); --schwach: rgba(43, 15, 32, 0.55); --rand: rgba(43, 15, 32, 0.18); --hervor: #FFFFFF;
  background: #FF7FB4; color: var(--text); }
:root[data-stimmung="rosa"] .chat-s { background: #FFE1EE; --hervor: #E0245E; }
:root[data-stimmung="blau"] .chat-s { background: #F2B544; --text: #1A1405; --hervor: #FFFFFF; }
.chat-s h2 { color: var(--text); }
.chat-s .chat-schritt .nr { color: var(--schwach); }
.chat-s .chat-schritt.aktiv .nr { color: var(--text); }
.chat-bild::before { display: none; }
.chat-bild .sticker { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.chat-bild .sticker img { pointer-events: none; -webkit-user-drag: none; }
.chat-bild .sticker.zieht { cursor: grabbing; animation-play-state: paused; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.35)); z-index: 5; }

/* ---------- Einmal-Foto zum Ausprobieren ---------- */
button.einmal-foto { border: 0; padding: 0; cursor: pointer; background: #000; display: block; }
.einmal-foto span small { display: block; font-size: 0.68rem; font-weight: 500; opacity: 0.8; }
.einmal-foto img { transition: filter 0.45s var(--weich), transform 0.45s var(--weich), opacity 0.6s; }
.einmal-foto:not(.zeigt):not(.weg) span svg { animation: einmal-puls 1.8s ease-in-out infinite; }
@keyframes einmal-puls { 50% { transform: scale(1.18); } }
.einmal-foto.zeigt img { filter: none; transform: none; }
.einmal-foto.zeigt span { opacity: 0; }
.einmal-foto.weg img { filter: blur(14px) saturate(0.2); opacity: 0; transform: scale(1.25); }
.einmal-foto.weg { cursor: default; background: rgba(255, 255, 255, 0.06); }
.einmal-foto.weg span { opacity: 0; }
.einmal-foto span { transition: opacity 0.3s; }
/* Zeitring: läuft in 3 Sekunden ab */
.einmal-uhr { position: absolute; right: 8px; top: 8px; width: 22px; height: 22px; border-radius: 50%; opacity: 0;
  background: conic-gradient(#fff calc(var(--rest, 1) * 360deg), rgba(255, 255, 255, 0.25) 0); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%); mask: radial-gradient(circle, transparent 52%, #000 54%); }
@property --rest { syntax: '<number>'; inherits: false; initial-value: 1; }
.einmal-foto.zeigt .einmal-uhr { opacity: 1; animation: einmal-uhr 3s linear forwards; }
@keyframes einmal-uhr { from { --rest: 1; } to { --rest: 0; } }
.ruhig .einmal-foto.zeigt .einmal-uhr { animation-duration: 1.5s; }

/* ---------- Taschenlampe ---------- */
.lampe { --lx: 50%; --ly: 50%; --r: clamp(90px, 13vw, 170px); position: relative; border-radius: 26px; overflow: hidden; background: #000;
  border: 1px solid var(--rand); cursor: none; }
.lampe-raster { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.lampe-raster img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.lampe-dunkel { filter: blur(14px) brightness(0.32) saturate(0.6); transform: scale(1.04); }
.lampe-hell { position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 45%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--lx) var(--ly), #000 45%, rgba(0, 0, 0, 0.55) 70%, transparent 100%); }
.lampe::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle calc(var(--r) * 1.15) at var(--lx) var(--ly), transparent 60%, rgba(255, 220, 160, 0.10) 75%, transparent 100%); }
@media (max-width: 679px) { .lampe-raster { grid-template-columns: repeat(4, 1fr); } .lampe-raster img:nth-child(n + 13) { display: none; } .lampe { --r: 100px; } }
.ruhig .lampe, html:not(.js) .lampe { --lx: 50%; --ly: 50%; }

/* Balken legt sich ohne Animation wieder über das Wort (wenn es das Bild verlassen hat) */
h1 em.verdeckt, h2 em.verdeckt { transition: none; }

/* Chat-Fläche dezenter (Marc): dunkles Beerenrot statt grellem Pink, helle Schrift; Pink bleibt in den Hervorhebungen */
.chat-s { --text: #FBEFF5; --leise: rgba(251, 239, 245, 0.78); --schwach: rgba(251, 239, 245, 0.5); --rand: rgba(255, 220, 240, 0.16); --hervor: #FF8DBD;
  background: radial-gradient(70% 60% at 85% 40%, rgba(255, 127, 180, 0.16), transparent 70%), linear-gradient(160deg, #4A1638 0%, #2E0E26 100%); }
:root[data-stimmung="rosa"] .chat-s { background: linear-gradient(160deg, #6B2558 0%, #45163C 100%); --hervor: #FFB3D3; }
:root[data-stimmung="blau"] .chat-s { background: linear-gradient(160deg, #1D2A55 0%, #121A38 100%); --text: #F2F5FF; --hervor: #F2B544; }

/* Fragen: ab der sechsten ausgeblendet, „Weitere Fragen“ blendet sie weich ein */
.fragen.gekuerzt:not(.alle) .frage--mehr { display: none; }
.fragen.alle .frage--mehr { animation: frage-rein 0.48s var(--weich) both; }
@keyframes frage-rein { from { opacity: 0; transform: translateY(8px); } }
.fragen-knopf { display: flex; align-items: center; gap: 8px; margin: 22px auto 0; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--rand-hell);
  background: transparent; color: var(--text); font: 600 0.95rem/1 var(--f-text); cursor: pointer; transition: background 0.3s, border-color 0.3s; }
.fragen-knopf:hover { background: var(--glas); }
.fragen-knopf svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform 0.48s var(--weich); }
.fragen-knopf[aria-expanded="true"] svg { transform: rotate(-90deg); }

/* Marc, 3. November 2026: in Schwarz wieder ein leiser dunkelpinker Lichtschein von oben; Tresortür zurückhaltender, damit das Handy führt;
   Chat-Titel startet mit mehr Luft zur Farbkante */
.himmel .f1 { background: radial-gradient(85% 55% at 50% -12%, rgba(170, 36, 104, 0.55), rgba(120, 22, 76, 0.20) 45%, transparent 75%); }
:root:not([data-stimmung]) .hero-glut { background: radial-gradient(circle, #030304 0 51.5%, transparent 51.8%), conic-gradient(from 10deg, #19191c, #0b0b0d, #1b1b1f, #09090a, #19191c); }
:root:not([data-stimmung]) .hero-glut::before { border-color: rgba(255, 255, 255, 0.05); }
:root:not([data-stimmung]) .hero-glut::after { opacity: 0.38; box-shadow: 0 0 18px rgba(255, 127, 180, 0.16), inset 0 0 18px rgba(255, 127, 180, 0.08); }
:root:not([data-stimmung]) .tuer-rad { opacity: 0.35; }
:root:not([data-stimmung]) .hero-buehne::before { opacity: clamp(0.1, calc(var(--an) * 0.6), 0.6); }
.js:not(.ruhig) .chat-s { padding-top: clamp(56px, 12vh, 140px); }
:root:not([data-stimmung]) .hero-buehne::after { opacity: clamp(0.2, calc(var(--an) * 0.75), 0.75); }

/* Marc, 3. November 2026: „ohne Werbung“ gilt für die ganze App, nicht nur für Einmal-Fotos: eigene Zeile über den Speicherstufen */
.werbefrei { display: flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; max-width: 100%; margin: 30px auto 38px; padding: 12px 22px; border: 1px solid color-mix(in srgb, var(--c-gruen) 50%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--c-gruen) 10%, transparent); font-size: 18px; line-height: 1.35; text-align: left; }
.werbefrei svg.i { width: 24px; height: 24px; color: var(--c-gruen); stroke-width: 2; }
.werbefrei strong { font-weight: 700; color: var(--text); }
.werbefrei span span { color: var(--leise); }
@media (max-width: 679px) { .werbefrei { border-radius: 18px; padding: 12px 16px; font-size: 16px; gap: 10px; } .werbefrei span span { display: block; } }