/* =======================================================================
   lytchie.com — Schaufenster zur App, im Zuschnitt von apple.com.

   Was daran „Apple" ist, in vier Punkten:

     1. Keine Serife. Die Systemschrift (auf iPhone und Mac ist das
        SF Pro) in kraeftigen Schnitten, eng gesetzt, negativ spationiert.
     2. Alles mittig. Ein Strang von Abschnitten untereinander, jeder mit
        Ueberschrift, Unterzeile, Chevron-Links und dann dem Bild — statt
        Text links / Bild rechts.
     3. Grosse Ruhe zwischen den Abschnitten und ein sehr schmaler,
        milchig verwaschener Kopf.
     4. Bewegung nur beim Scrollen: Inhalte steigen leise ein, das
        Aufmacherbild geht dabei auf Groesse.

   Farben bleiben Lytchie: Fast-Schwarz und Gold aus dem Logo, nicht
   Apples Blau. Das Layout ist geliehen, die Marke nicht.
   ======================================================================= */

:root {
  /* Flaechen. Reines Schwarz wie bei Apple im Dunkelmodus, darauf zwei
     Stufen fuer Karten. */
  --bg: #000;
  --bg-2: #0a0a0a;
  --card: #141416;
  --card-2: #1d1d1f;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Text in drei Stufen — die mittlere und die leise sind Apples
     Grauwerte, sie sitzen auf Schwarz genau richtig. */
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --muted: #86868b;

  --gold: #d4af37;
  --gold-2: #f0dca4;
  --ok: #35d07f;
  --danger: #ff453a;

  --radius: 28px;
  --radius-sm: 18px;

  /* Apples Kurve: spaet weich, nie federnd. */
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

  --rand: 22px;
  --luft: clamp(78px, 10vw, 140px);
  --kopf-h: 48px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  /* Die Bilder tragen width/height im HTML, damit der Platz vor dem Laden
     steht. Ohne height:auto gewaenne das Attribut und zoege sie lang. */
  height: auto;
  display: block;
}

a {
  color: inherit;
}

/* ---------- Raster ---------- */

/* Apples Textbreite. Breiter wird nur, was Bild ist. */
.huelle {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 var(--rand);
}

.huelle-breit {
  max-width: 1440px;
}

.abschnitt {
  padding: var(--luft) 0;
}

/* Der mittige Kopf eines Abschnitts: Ueberschrift, Unterzeile, Links. */
.kanzel {
  text-align: center;
  max-width: 780px;
  margin: 0 auto;
}

.kanzel .vorspann,
.kanzel .klein {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Kopfzeile ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--kopf-h);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kopf .huelle {
  max-width: 1024px;
  display: flex;
  align-items: center;
  height: 100%;
  gap: clamp(16px, 3.4vw, 34px);
}

.marke {
  display: flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
}

.marke img {
  height: 19px;
  width: auto;
}

.menue {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3.4vw, 34px);
}

/* 12 px, fast schwarz-weiss, kein Fettdruck — der Kopf soll verschwinden. */
.menue a {
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: 0.86;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}

.menue a:hover {
  opacity: 1;
}

.menue a[aria-current="page"] {
  color: var(--gold-2);
  opacity: 1;
}

.menue a.knopf-gold,
.menue a.knopf-gold:hover {
  color: #14100a;
  opacity: 1;
}

/* ---------- Knoepfe und Chevron-Links ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 23px;
  border-radius: 980px;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease),
    color 0.22s var(--ease), opacity 0.22s var(--ease);
}

.knopf-gold {
  background: var(--gold);
  color: #14100a;
  font-weight: 500;
}

.knopf-gold:hover {
  background: var(--gold-2);
}

.knopf-leer {
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.knopf-leer:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.knopf-klein {
  padding: 7px 15px;
  font-size: 12px;
  font-weight: 500;
}

/* Apples Textlink: Farbe, dann ein Chevron, das beim Zeigen vorruecht. */
.pfeil {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 17px;
  letter-spacing: -0.012em;
  color: var(--gold-2);
  text-decoration: none;
}

.pfeil::after {
  content: "\203A";
  font-size: 1.25em;
  line-height: 0.9;
  transition: transform 0.22s var(--ease);
}

.pfeil:hover::after {
  transform: translateX(3px);
}

/* Zwei bis drei Chevron-Links nebeneinander unter der Ueberschrift. */
.linkzeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  margin-top: 24px;
}

.tasten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

/* ---------- Schrift ---------- */

.aufhaenger {
  display: block;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--gold);
  margin: 0 0 8px;
}

.riesig,
.gross,
.mittel {
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

.riesig {
  font-size: clamp(2.6rem, 7.2vw, 4.9rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
}

.gross {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.07;
  letter-spacing: -0.022em;
}

.mittel {
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
}

.vorspann {
  font-size: clamp(1.06rem, 1.5vw, 1.3rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  max-width: 42ch;
  margin: 18px 0 0;
  text-wrap: pretty;
}

.klein {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
}

.gold {
  color: var(--gold-2);
}

/* ---------- Aufmacher ---------- */

.aufmacher {
  padding: clamp(46px, 7vw, 84px) 0 0;
  text-align: center;
}

.aufmacher .riesig {
  max-width: 19ch;
  margin: 0 auto;
}

.aufmacher .vorspann {
  margin: 20px auto 0;
  max-width: 46ch;
}

/* Das Geraet steht mittig unter dem Text und geht beim Scrollen auf
   Groesse. Der Startwert kommt aus dem Skript, damit ohne JavaScript
   nichts klein bleibt. */
.geraet {
  width: 100%;
  max-width: 460px;
  margin: clamp(34px, 5vw, 56px) auto 0;
  transform-origin: 50% 100%;
  will-change: transform;
}

.geraet img {
  width: 100%;
}

/* ---------- Dreispalter ---------- */

.drei {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.drei > div {
  padding: clamp(30px, 3.4vw, 44px);
  border-radius: var(--radius);
  background: var(--card);
  text-align: center;
}

.zahl {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
  margin-bottom: 14px;
}

.drei h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
}

.drei p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.47;
}

/* ---------- Aussage in der Mitte ---------- */

.aussage {
  text-align: center;
}

.aussage .gross {
  max-width: 18ch;
  margin: 0 auto;
}

.aussage .vorspann {
  margin: 20px auto 0;
  max-width: 46ch;
}

/* ---------- Tresorband ---------- */

/* Das Tresorbild steht auf reinem Schwarz und traegt links eine leere
   Flaeche — genau dort sitzt der Text. Deshalb randlos ueber die ganze
   Breite und ohne Kasten drumherum: die Kante des Bildes ist unsichtbar,
   weil sie dieselbe Farbe hat wie die Seite. */
.tresor {
  padding: var(--luft) 0 0;
  text-align: center;
}

.tresor-text {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 var(--rand);
}

.tresor-text .vorspann {
  margin: 18px auto 0;
  max-width: 46ch;
}

.tresor img {
  width: 100%;
  max-width: 760px;
  margin: clamp(-16px, -1vw, 0px) auto 0;

  /* Der Tresor steht in seiner Datei genau mittig, mit gleich viel
     Schwarz an allen vier Seiten (siehe tresor_mittig in
     werkzeug/bilder-bauen.py). Diese Maske loest die Raender vollends
     auf: das Bild hat dann keine Kante mehr, der Tresor kommt einfach
     aus dem Dunkel — und geht nach oben in den Text ueber. */
  -webkit-mask-image: radial-gradient(
    ellipse 62% 62% at 50% 50%,
    #000 46%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 62% 62% at 50% 50%,
    #000 46%,
    transparent 100%
  );
}

/* ---------- Vorher / Nachher ---------- */

.gegenueber {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: clamp(34px, 4vw, 52px);
}

.bildkarte {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

.bildkarte img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 56%;
  filter: saturate(0.92) brightness(0.86);
  transition: transform 1.1s var(--ease), filter 1.1s var(--ease);
}

.bildkarte:hover img {
  transform: scale(1.035);
  filter: saturate(1) brightness(0.95);
}

.bildkarte .schild {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(24px, 3vw, 36px);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.78) 46%,
    rgba(0, 0, 0, 0.94) 100%
  );
}

.bildkarte .schild b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
  margin-bottom: 8px;
}

.bildkarte .schild p {
  margin: 0;
  font-size: clamp(1.02rem, 1.6vw, 1.24rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.016em;
}

/* ---------- Gesparte Zeit ---------- */

.zeitgewinn {
  margin: clamp(34px, 4vw, 48px) 0 0;
  padding: clamp(34px, 4vw, 52px);
  border-radius: var(--radius);
  background: var(--card);
  text-align: center;
}

.zeitgewinn strong {
  display: block;
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold-2);
  margin-bottom: 14px;
}

.zeitgewinn p {
  margin: 0 auto;
  max-width: 44ch;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

/* ---------- Abschnitt mit grossem Bild ---------- */

.schritt {
  text-align: center;
  padding: clamp(56px, 7vw, 96px) 0;
}

.schritt + .schritt {
  border-top: 1px solid var(--line);
}

.schritt .marke-schritt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.schritt .marke-schritt i {
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.schritt .marke-schritt b {
  color: var(--muted);
  font-weight: 600;
}

.schritt p {
  color: var(--ink-2);
  margin: 16px auto 0;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.45;
}

.schritt .bild {
  width: 100%;
  max-width: 360px;
  margin: clamp(30px, 4vw, 48px) auto 0;
}

/* ---------- Kachelraster ---------- */

.liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: clamp(34px, 4vw, 52px);
}

.liste > div {
  padding: clamp(28px, 3vw, 38px);
  border-radius: var(--radius);
  background: var(--card);
}

.liste h4 {
  font-size: 1.24rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.16;
  margin: 0 0 10px;
}

.liste p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.47;
  color: var(--ink-2);
}

/* ---------- Kundenstimmen ---------- */

.stimmen-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: clamp(28px, 3.4vw, 40px);
}

.stimmen-kopf > div:first-child {
  margin-right: auto;
}

.sterne {
  letter-spacing: 0.14em;
  color: var(--gold);
  font-size: 15px;
}

/* Ueberlappende Portraits statt einer zweiten Sternenreihe. Die Sterne
   stehen schon in jeder Karte darunter; zweimal dasselbe Zeichen nimmt
   ihm die Wirkung. */
.stapel {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.stapel-bilder {
  display: flex;
}

.stapel-bilder img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  /* Der Rand in der Grundfarbe trennt die Kreise voneinander. */
  border: 2px solid var(--bg);
  margin-left: -10px;
}

.stapel-bilder img:first-child {
  margin-left: 0;
}

.stapel b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink-2);
}

.stimmen-nav {
  display: flex;
  gap: 10px;
}

.stimmen-nav button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease), opacity 0.2s var(--ease);
}

.stimmen-nav button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}

.stimmen-nav button:disabled {
  opacity: 0.32;
  cursor: default;
}

.stimmen {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(290px, 360px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Bewusst KEIN scroll-behavior: smooth. Steht es hier, laufen auch die
     Aufrufe aus dem Skript als Animation — und wo die nicht anlaeuft,
     bewegen sich die Blaetterknoepfe gar nicht mehr. */
  padding-bottom: 6px;
  scrollbar-width: none;
}

.stimmen::-webkit-scrollbar {
  display: none;
}

.stimmen article {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 34px);
  border-radius: var(--radius);
  background: var(--card);
}

.stimmen blockquote {
  margin: 16px 0 0;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.016em;
  color: var(--ink);
  text-wrap: pretty;
}

.stimmen .wer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 22px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--muted);
}

/* Rundes Mini-Profilbild. Die Vorlagen sind ganze Szenen; der Ausschnitt
   um den Kopf entsteht beim Bildbau, nicht hier — siehe PORTRAETS in
   werkzeug/bilder-bauen.py. */
.stimmen .avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  /* Ein Hauch Kante, damit dunkle Aufnahmen nicht im Kartengrund
     verschwinden. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.stimmen .wer b {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin-bottom: 1px;
}

/* ---------- Freischaltcode ---------- */

.ma {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 22px;
  margin-top: clamp(30px, 3.6vw, 42px);
  padding: 16px 16px 16px 24px;
  text-align: left;
  border-radius: var(--radius-sm);
  background: var(--card);
}

.ma-nhan {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  margin-bottom: 5px;
}

.ma-so {
  display: block;
  /* Feste Laufweite: eine Zeichenfolge, die man abtippt, liest sich
     leichter, wenn jedes Zeichen gleich breit ist. */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--gold-2);
  user-select: all;
}

.ma-chep {
  flex-shrink: 0;
  padding: 9px 17px;
  border-radius: 980px;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.012em;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.ma-chep:hover {
  background: rgba(255, 255, 255, 0.2);
}

.ma-chep[data-fertig] {
  background: rgba(53, 208, 127, 0.18);
  color: var(--ok);
}

.beruhigung {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: clamp(34px, 4vw, 50px) auto 0;
  text-align: left;
}

/* Auf der Zwischenseite stehen nur zwei Kaesten. */
.beruhigung-zwei {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
}

.beruhigung div {
  padding: clamp(24px, 2.8vw, 32px);
  border-radius: var(--radius);
  background: var(--card);
}

.beruhigung b {
  display: block;
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin-bottom: 8px;
}

.beruhigung p {
  margin: 0;
  font-size: 15px;
  line-height: 1.47;
  color: var(--ink-2);
}

/* Was in welcher Stufe steckt — bewusst ohne Zahlen. */
.plaene {
  max-width: 62ch;
  margin: clamp(30px, 3.6vw, 44px) auto 0;
}

.plaene p {
  margin: 0 0 10px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.plaene p:last-child {
  margin-bottom: 0;
  color: var(--muted);
}

.plaene b {
  color: var(--gold-2);
  font-weight: 600;
}

.warnung {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 16px;
  border-radius: 980px;
  font-size: 13.5px;
  font-weight: 500;
  color: #ff9d95;
  background: rgba(255, 69, 58, 0.14);
}

/* ---------- Rechtlicher Hinweis ---------- */

/* Bewusst rot und als Kasten, nicht als leise Fussnote: dass Lytchie
   keine Registrierkasse ersetzt, muss gelesen werden. Deshalb auch
   14 px statt der 12 px, die sonst fuers Kleingedruckte gelten. */
.fussnote {
  margin: clamp(46px, 6vw, 80px) 0 0;
  padding: clamp(28px, 3.4vw, 40px);
  border: 1px solid rgba(255, 69, 58, 0.32);
  border-radius: var(--radius);
  background: rgba(255, 69, 58, 0.06);
}

.fussnote > b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--danger);
  margin-bottom: 14px;
}

.fussnote p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: -0.008em;
  color: var(--ink-2);
  max-width: 88ch;
}

.fussnote p:last-child {
  margin-bottom: 0;
}

.fussnote strong {
  color: #ff9d95;
  font-weight: 600;
}

/* ---------- Zwischenseite: Homescreen und Video ---------- */

.homescreen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
  margin-top: clamp(30px, 4vw, 46px);
  text-align: left;
}

.homescreen ol:first-child {
  margin-top: 0;
}

.homescreen ol {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.homescreen li {
  counter-increment: schritt;
  position: relative;
  padding-left: 38px;
  margin-bottom: 13px;
  font-size: 15.5px;
  line-height: 1.47;
  color: var(--ink-2);
}

/* Die iOS-Symbole mitten im Satz. Als SVG gezeichnet, nicht als Bild:
   so laufen sie mit der Schriftgroesse mit, nehmen die Textfarbe an und
   bleiben auf jedem Bildschirm scharf. */
.sym {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  margin: 0 0.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--gold-2);
}

.sym .voll {
  fill: currentColor;
  stroke: none;
}

/* Das fertige Symbol auf dem Homescreen — im letzten Schritt mitten im
   Satz, damit man sieht, wonach man sucht. */
.app-symbol {
  display: inline-block;
  width: 1.7em;
  height: 1.7em;
  border-radius: 0.38em;
  vertical-align: -0.52em;
  margin: 0 0.22em;
  /* Das Symbol ist ein schwarzes Quadrat mit goldenem C — auf dem
     schwarzen Grund der Seite bliebe davon nur das C uebrig. Eine helle
     Kante zeichnet das Quadrat nach, der weiche Ring daneben hebt es
     vom Grund ab. Erst damit sieht man, wonach man auf dem Homescreen
     suchen soll. */
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07);
}

.homescreen li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.16);
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

/* Der Merksatz unter der Schrittfolge. Gold statt Rot: es ist kein
   Fehler, den man vermeiden muss, sondern der Punkt, an dem die
   Anleitung in die Registrierung uebergeht. */
.merke {
  margin: clamp(20px, 2.6vw, 28px) 0 0;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: rgba(212, 175, 55, 0.1);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.merke b {
  color: var(--gold-2);
  font-weight: 600;
}

/* Platz fuers Video. Steht schon jetzt hier, damit die Seite sich beim
   Einsetzen nicht mehr verschiebt. */
.video {
  position: relative;
  width: 100%;
  max-width: 290px;
  aspect-ratio: 720 / 1614; /* Format einer iPhone-Aufnahme, nicht 9:16 */
  margin: 0 auto;
  border-radius: var(--radius);
  background: var(--card);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Auf der Videoseite ist das Bild die Hauptsache, nicht die Beigabe. */
.video-gross {
  max-width: 360px;
  margin-top: clamp(28px, 4vw, 44px);
}

/* Kasten mit echter Datei. Ein iPhone ist 9:20, nicht 9:16 — im
   Platzhalterformat wuerde oben die Statusleiste und unten die
   Symbolreihe abgeschnitten. Also gibt hier die Datei die Hoehe vor. */
.video-datei {
  aspect-ratio: auto;
  background: #000;
}

.video-datei video {
  width: 100%;
  height: auto;
  display: block;
}

.video .bald {
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.video .bald span {
  display: block;
  font-size: 28px;
  color: var(--gold);
  margin-bottom: 12px;
}

/* ---------- Fusszeile ---------- */

.fuss {
  padding: 40px 0 52px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}

.fuss .huelle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 30px;
}

.fuss img {
  height: 22px;
  width: auto;
  opacity: 0.8;
}

.fuss nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-left: auto;
}

.fuss a {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.fuss a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.fuss .rechte {
  width: 100%;
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 0;
}

.impressum {
  width: 100%;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  font-style: normal;
}

.impressum b {
  color: var(--ink-2);
  font-weight: 600;
}

.impressum a {
  color: var(--muted);
  text-decoration: none;
}

.impressum a:hover {
  color: var(--gold-2);
  text-decoration: underline;
}

/* ---------- Einblenden beim Scrollen ---------- */

.auf {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.auf.da {
  opacity: 1;
  transform: none;
}

/* ---------- Schmale Fenster ---------- */

@media (max-width: 900px) {
  .drei,
  .liste,
  .gegenueber,
  .beruhigung,
  .beruhigung-zwei,
  .homescreen {
    grid-template-columns: 1fr;
  }

  .stimmen {
    grid-auto-columns: minmax(260px, 82vw);
  }

  .tresor-text .vorspann {
    max-width: none;
  }
}

@media (max-width: 600px) {
  :root {
    --rand: 20px;
  }

  body {
    font-size: 16.5px;
  }

  /* Schmal bricht eine auf Zeichen begrenzte Zeile zu oft um. */
  .aufmacher .riesig,
  .aussage .gross,
  .kanzel .gross {
    max-width: none;
  }

  .knopf {
    width: 100%;
  }

  .tasten {
    flex-direction: column;
    align-items: stretch;
  }

  .linkzeile {
    gap: 10px 24px;
  }

  .fuss nav {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 380px) {
  .menue {
    gap: 13px;
  }

  .menue a {
    font-size: 11.5px;
  }

  .knopf-klein {
    padding: 6px 12px;
    font-size: 11.5px;
  }
}

/* Wer Bewegung ausgeschaltet hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .auf {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .geraet {
    transform: none !important;
  }

  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}