/* info.css – Website /info/ (S208, #184 B)
   Eigene Datei statt base.css der App: die Seite soll nicht an App-Klassen und
   App-Resets hängen. Farben und Abstände sind aus src/ui/base.css übernommen
   (Stand S208) — ändert sich dort die Palette, hier nachziehen.
   Dunkel wie in der App: ohne data-theme entscheidet prefers-color-scheme, ein
   gesetztes data-theme gewinnt in beide Richtungen. */

:root {
  --color-primary:      #2d6a4f;
  --color-primary-dark: #1b4332;
  --color-primary-bg:   #eef6f1;
  --color-surface:      #ffffff;
  --color-surface-alt:  #f5f7f6;
  --color-border:       #d5e5dc;
  --color-text:         #1a2e25;
  --color-text-muted:   #5a7868;
  --color-on-fill:      #ffffff;
  --color-header:       var(--color-primary);
  --color-on-header:    #ffffff;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;
  /* Gerät der Bühne „So sieht Soaria aus“ (S211). Die Statusleiste trägt die
     Kopffarbe der App, damit sie an die Bilder anschließt. */
  --dev-bezel:      #1f2724;
  --dev-edge:       #1f2724;
  --dev-key:        #2c3632;
  --dev-island:     #050807;
  --dev-homebar:    rgba(20, 32, 26, 0.42);
  --dev-shade:      rgba(16, 30, 22, 0.28);
  --dev-scrim:      rgba(10, 18, 14, 0.78);
  --dev-tap:        rgba(45, 106, 79, 0.28);
  --dev-tap-ring:   rgba(45, 106, 79, 0.9);
  --dev-statusbar:  #2d6a4f;
  --dev-on-status:  #ffffff;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary:      #6dbb92;
    --color-primary-dark: #8fd0ad;
    --color-primary-bg:   #1a2e24;
    --color-surface:      #1a2420;
    --color-surface-alt:  #111915;
    --color-border:       #2e3f37;
    --color-text:         #e2ebe6;
    --color-text-muted:   #9ab1a5;
    --color-on-fill:      #0f1a14;
    --color-header:       #16241d;
    --color-on-header:    #e2ebe6;
    --dev-bezel:      #2b3833;
    --dev-edge:       #4a5c54;
    --dev-key:        #3d4c46;
    --dev-homebar:    rgba(226, 235, 230, 0.5);
    --dev-shade:      rgba(0, 0, 0, 0.5);
    --dev-scrim:      rgba(0, 0, 0, 0.84);
    --dev-tap:        rgba(109, 187, 146, 0.3);
    --dev-tap-ring:   rgba(143, 208, 173, 0.95);
    --dev-statusbar:  #16241d;
    --dev-on-status:  #e2ebe6;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-primary:      #6dbb92;
  --color-primary-dark: #8fd0ad;
  --color-primary-bg:   #1a2e24;
  --color-surface:      #1a2420;
  --color-surface-alt:  #111915;
  --color-border:       #2e3f37;
  --color-text:         #e2ebe6;
  --color-text-muted:   #9ab1a5;
  --color-on-fill:      #0f1a14;
  --color-header:       #16241d;
  --color-on-header:    #e2ebe6;
  --dev-bezel:      #2b3833;
  --dev-edge:       #4a5c54;
  --dev-key:        #3d4c46;
  --dev-homebar:    rgba(226, 235, 230, 0.5);
  --dev-shade:      rgba(0, 0, 0, 0.5);
  --dev-scrim:      rgba(0, 0, 0, 0.84);
  --dev-tap:        rgba(109, 187, 146, 0.3);
  --dev-tap-ring:   rgba(143, 208, 173, 0.95);
  --dev-statusbar:  #16241d;
  --dev-on-status:  #e2ebe6;
  color-scheme: dark;
}

/* ─── Sprache ─────────────────────────────────────────────────────────────────
   Jeder Text steht zweimal im Markup; gezeigt wird der zu data-lang passende.
   Ohne JavaScript (kein data-lang="en") bleibt es bei Deutsch. */
html:not([data-lang="en"]) body [lang="en"],
html[data-lang="en"] body [lang="de"] {
  display: none !important;
}

/* ─── Grundlage ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.skip {
  position: absolute;
  left: var(--space-sm);
  top: -100px;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  z-index: 10;
}
.skip:focus { top: var(--space-sm); }

/* ─── Kopf ────────────────────────────────────────────────────────────────── */
/* Seit S209 (Artefakt-Runden 1–3): Marke ohne Kachel, zwei Knöpfe von 32 px
   Höhe auf der Mittellinie der Marke, Navigation als eigene Leiste darunter.
   Bis S208 standen hier zwei Segment-Schalter; bei 320 px brachen sie in eigene
   Zeilen, der Kopf wuchs von 154 auf 252 px (S208 gemessen) — mit den kleinen
   Knöpfen passt alles in eine Zeile. */
.site-header {
  background: var(--color-header);
  color: var(--color-on-header);
  padding: var(--space-sm) var(--space-md);
}

.site-header__row,
.page,
.site-footer > * {
  max-width: 720px;
  margin-inline: auto;
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 52px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.brand:hover { color: inherit; }
/* Wie .app-header__mark in der App: die Maske spart das Blatt aus, durch die
   Lücke scheint die Kopffarbe — hell wie dunkel ohne eigene Farbe. 36 px statt
   der 24 in der App (Heikos Wahl, Runde 1). */
.brand__mark {
  width: 36px;
  height: 36px;
  display: block;
  flex-shrink: 0;
  fill: currentColor;
}

/* 12 px Abstand: beide Trefferflächen ragen je 6 px über den Knopf hinaus,
   bei weniger überlappten sie. */
.controls {
  --ctrl: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* 44-px-Trefferfläche um einen 32-px-Knopf: das Pseudo-Element ragt hinaus,
   der Knopf selbst bleibt so klein, wie er aussieht. */
.lang-switch::after,
.theme-switch::after {
  content: '';
  position: absolute;
  inset: calc((var(--ctrl) - 44px) / 2);
  border-radius: var(--radius-pill);
}

.lang-switch,
.theme-switch {
  position: relative;
  height: var(--ctrl);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-on-header) 14%, transparent);
  color: var(--color-on-header);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lang-switch:hover,
.theme-switch:hover { background: color-mix(in srgb, var(--color-on-header) 22%, transparent); }
.lang-switch:focus-visible,
.theme-switch:focus-visible { outline-color: var(--color-on-header); }

/* Schiebeschalter: der helle Daumen sitzt unter der geltenden Sprache. */
.lang-switch {
  display: flex;
  width: calc(var(--ctrl) * 2);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}
.lang-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(var(--ctrl) - 6px);
  height: calc(var(--ctrl) - 6px);
  border-radius: var(--radius-pill);
  background: var(--color-on-header);
  transition: transform 260ms cubic-bezier(.65, 0, .35, 1);
}
.lang-switch[data-on="en"] .lang-switch__thumb { transform: translateX(var(--ctrl)); }
.lang-switch__label {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 260ms ease;
}
.lang-switch[data-on="de"] .lang-switch__label[data-l="de"],
.lang-switch[data-on="en"] .lang-switch__label[data-l="en"] { color: var(--color-header); }
/* Mitte gemessen (Runde 2): ohne Laufweite und mit auf Versalhöhe beschnittenem
   Textkasten sitzt die Tinte auf der Mitte des Daumens; im Zeilenkasten saß
   sie 0,8 px zu hoch. Browser ohne text-box behalten line-height 1. */
.lang-switch__label > span {
  display: block;
  line-height: 1;
  text-box: trim-both cap alphabetic;
}

/* Sonne/Mond: der Knopf zeigt den jetzigen Zustand. Der Himmel darin schneidet
   die Bewegung ab (info.js), das Pseudo-Element für die Trefferfläche liegt am
   Knopf und wird davon nicht beschnitten. */
.theme-switch { width: var(--ctrl); }
.theme-switch__sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
}
.theme-switch__sky span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-switch__sky svg { display: block; }

/* Navigation wie die Leiste der App (.app-nav): hell, Reiter mit Unterstrich,
   klebt oben. info.js markiert den Abschnitt, in dem man gerade liest. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: safe center;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;   /* „FAQ" und „Why" maßen 28–31 px (S208) */
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--color-primary); }
.site-nav a[aria-current="location"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-switch__thumb,
  .lang-switch__label { transition: none; }
}

/* ─── Inhalt ──────────────────────────────────────────────────────────────── */
.page { padding: var(--space-lg) var(--space-md) var(--space-xl); }

.hero h1 {
  margin: 0 0 var(--space-sm);
  font-size: 28px;
  line-height: 1.2;
}
.hero__lead { margin: 0 0 var(--space-lg); font-size: 17px; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-lg);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-fill);
}
.btn--primary:hover { background: var(--color-primary-dark); color: var(--color-on-fill); }
.btn--ghost {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
}

/* scroll-margin seit S209 um die klebende Leiste (44 px + Rand) größer. */
.block {
  margin-top: var(--space-xl);
  scroll-margin-top: calc(45px + var(--space-md));
}
.block h2 {
  margin: 0 0 var(--space-md);
  font-size: 22px;
  line-height: 1.3;
}
.block h3 {
  margin: var(--space-lg) 0 var(--space-xs);
  font-size: 17px;
}
.block p { margin: 0 0 var(--space-md); }
.block ol,
.block ul { margin: 0 0 var(--space-md); padding-left: var(--space-lg); }
.block li + li { margin-top: var(--space-xs); }

.block .howto { margin: 0 0 var(--space-sm); }
.steps__note { color: var(--color-text-muted); font-size: 15px; }

/* Zeichen im Fließtext des Schnellstarts: auf die Mitte der x-Höhe gesetzt. */
.ico {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  color: var(--color-primary);
}

.faq {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  scroll-margin-top: calc(45px + var(--space-md));
}
.faq + .faq { margin-top: var(--space-sm); }
.faq summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
}
.faq[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq > div { padding: 0 var(--space-md) var(--space-xs); }

/* ─── Schnellstart je Gerät (S211) ────────────────────────────────────────── */
/* Wie die FAQ zum Aufklappen; bilder.js öffnet das erkannte Gerät und hängt
   „Dein Gerät“ an. */
.qs-group {
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.block .qs-lead { margin: 0 0 var(--space-sm); color: var(--color-text-muted); font-size: 15px; }
.block .qs-end { margin-top: var(--space-md); }
.qs {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.qs + .qs { margin-top: var(--space-sm); }
.qs summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
}
.qs[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.qs__mine {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.qs__body { padding: 0 var(--space-md) var(--space-xs); }
.qs__body p { margin: 0 0 var(--space-sm); }

/* ─── Beweggründe: Kopfzeile mit Illustration (S211) ──────────────────────── */
.why-head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0 0 var(--space-md);
}
.block .why-head h2 { margin: 0 0 2px; }
.block .why-head__by { margin: 0; font-size: 14px; color: var(--color-text-muted); }
/* Ring wie der grüne Rand der Gestaltungsrunde: 3 px Grundfarbe, 2 px Grün.
   scale(1.04): der gezeichnete Kreis füllt das Quadrat nicht ganz (S211). */
.why-head__ava {
  flex: none;
  display: block;
  width: 72px;
  height: 72px;
  margin: 5px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-primary-bg);
  box-shadow: 0 0 0 3px var(--color-surface-alt), 0 0 0 5px var(--color-primary);
  cursor: zoom-in;
}
.why-head__ava img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }

/* ─── So sieht Soaria aus (S211) ──────────────────────────────────────────── */
/* Ohne JavaScript: einfache Liste, Bild links, Text rechts. */
.shots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.block .shots { padding-left: 0; }
.shot { display: grid; grid-template-columns: minmax(0, 40%) 1fr; gap: var(--space-md); align-items: start; }
.shot img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.shot > div { min-width: 0; }
.block .shot h3 { margin: 0 0 var(--space-xs); }
.block .shot p { margin: 0; color: var(--color-text-muted); }
.block li + li.shot { margin-top: 0; }

/* Bühne: die Laufbahn gibt die Scrollstrecke, die Bühne klebt darin unter der
   Leiste. --navh setzt bilder.js aus der echten Leistenhöhe, --stagetop
   (seit S212) die Lage mittig zwischen Leiste und „Weiter“/„Nach oben“. */
.tour__run { position: relative; }
/* --dvshift (S213): fährt Safaris Leiste ein, wird die sichtbare Höhe (dvh)
   größer als die kleine (svh), aus der bilder.js die Mitte rechnet; „Weiter“
   und „Nach oben“ wandern mit nach unten. Die Bühne rückt um die Hälfte nach,
   damit sie mittig bleibt (Heiko am iPhone: unten 55 px frei, oben 12). Die
   Größe des Handys bleibt an svh und springt nicht. Wo dvh = svh, ist es 0. */
.tour { --dvshift: 0px; }
@supports (height: 100dvh) { .tour { --dvshift: calc((100dvh - 100svh) / 2); } }
.tour__stage { position: sticky; top: calc(var(--stagetop, calc(var(--navh, 45px) + var(--space-sm))) + var(--dvshift)); display: grid; gap: 12px; }
/* Rastpunkte je Punkt (S212): bilder.js setzt top, scroll-margin-top folgt
   seit S213 hier der Bühne samt --dvshift. */
html.tour-snap { scroll-snap-type: y proximity; }
.tour__mark { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; scroll-margin-top: calc(var(--stagetop, 0px) + var(--dvshift)); pointer-events: none; }
.tour__main { display: grid; gap: 12px; align-items: center; justify-items: center; }
.tour[data-lay="neben"] .tour__main { grid-template-columns: auto 1fr; justify-items: stretch; gap: var(--space-md); }
/* margin-bottom: das runde Zeichen ragt 10 px unter das Handy, so bleibt Luft
   zur Linie (Heiko, Gestaltungsrunde 5). */
.tour__phone { position: relative; width: var(--phw, 200px); justify-self: center; margin-bottom: 12px; }
.tour__lines { position: relative; width: 100%; justify-self: stretch; min-width: 0; }
.tour__lines::before,
.tour__lines::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--color-border); z-index: 1; }
.tour__lines::before { top: 0; }
.tour__lines::after { bottom: 0; }
.tour__text {
  position: relative;
  width: 100%;
  height: var(--winh, 140px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.tour__track { position: absolute; inset: 0 0 auto 0; will-change: transform; }
.tour__item { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; justify-content: center; padding: 6px 2px; }
.tour[data-lay="unter"] .tour__item { text-align: center; align-items: center; }
.block .tour__item h3 { display: inline; margin: 0; }
.tour__ttl { margin-bottom: var(--space-xs); }
.block .tour__item p { margin: 0; color: var(--color-text-muted); font-size: 15px; line-height: 1.45; max-width: 34em; }
.replay {
  position: relative;
  width: 28px;
  height: 28px;
  margin-left: 6px;
  padding: 0;
  vertical-align: 1px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.replay::after { content: ''; position: absolute; inset: -8px; }

.tour__ctrl { display: grid; grid-template-columns: 44px 1fr 44px; gap: 10px; align-items: center; }
.tour-nav {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
}
.tour-nav:disabled { opacity: .35; cursor: default; }
.tour-nav svg { width: 22px; height: 22px; display: block; }
.tour-segs { display: flex; gap: 4px; min-width: 0; }
.tour-segs button { flex: 1; min-width: 0; height: 28px; padding: 12px 0; border: 0; background: none; cursor: pointer; }
.tour-segs i { display: block; height: 4px; border-radius: 2px; background: var(--color-border); overflow: hidden; }
.tour-segs i::after { content: ''; display: block; width: 100%; height: 100%; background: var(--color-primary); transform-origin: left; transform: scaleX(var(--f, 0)); }
.tour__label { grid-column: 1 / -1; margin-top: -6px; text-align: center; font-size: 13px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour__label b { color: var(--color-text); font-weight: 600; }
.tour__label .how { color: var(--color-primary); font-weight: 600; }
/* Rundes Zeichen an der Ecke des Handys: Antippen öffnet die Großansicht. */
.phone-chip {
  position: absolute;
  z-index: 4;
  right: -10px;
  bottom: -10px;
  width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-fill);
  box-shadow: 0 0 0 3px var(--color-surface-alt), 0 3px 8px rgba(0, 0, 0, 0.25);
  cursor: zoom-in;
}
.phone-chip::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.phone-chip svg { width: 18px; height: 18px; display: block; }
.phone-btn { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 15.9% / 7.1%; color: inherit; cursor: zoom-in; }
.tour-nav:focus-visible,
.tour-segs button:focus-visible,
.replay:focus-visible,
.phone-btn:focus-visible,
.phone-chip:focus-visible,
.tour-hs:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Gerät nach iPhone-Maßen (Bildschirm 393 pt, Eckradius 55 pt ≈ 14 % der
   Breite, Rand ≈ 2,6 %): Dynamic Island flacher als beim iPhone (Heiko,
   Runde 4), Statusleiste mit der Uhrzeit des Betrachters, Empfang, WLAN, Akku,
   Aktions-, Lautstärke- und Seitentaste, Home-Strich. Außenradius = Bildschirm-
   radius + Rand. Verhältnis Höhe/Breite außen: 2,104 (RATIO in bilder.js;
   bis S212 2,235 mit Bildern 390 × 844 unter der Statusleiste). */
.dev { position: relative; padding: 2.6%; border-radius: 15.9% / 7.1%; background: var(--dev-bezel); box-shadow: 0 0 0 1px var(--dev-edge), 0 14px 28px -16px var(--dev-shade); }
.dev__key { position: absolute; width: 1.1%; background: var(--dev-key); border-radius: 2px; }
.dev__key--power { right: -1%; top: 25%; height: 10.5%; }
.dev__key--act { left: -1%; top: 17%; height: 3.6%; }
.dev__key--vol1 { left: -1%; top: 23.5%; height: 6.4%; }
.dev__key--vol2 { left: -1%; top: 31.5%; height: 6.4%; }
.scr { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 14% / 6.08%; background: var(--color-surface); container-type: inline-size; }
/* Die Großansicht kann die Bilder anders darstellen als die Seite. */
.scr[data-t="hell"] { --dev-statusbar: #2d6a4f; --dev-on-status: #ffffff; --dev-homebar: rgba(20, 32, 26, 0.42); --dev-tap: rgba(45, 106, 79, 0.28); --dev-tap-ring: rgba(45, 106, 79, 0.9); }
.scr[data-t="dunkel"] { --dev-statusbar: #16241d; --dev-on-status: #e2ebe6; --dev-homebar: rgba(226, 235, 230, 0.5); --dev-tap: rgba(109, 187, 146, 0.3); --dev-tap-ring: rgba(143, 208, 173, 0.95); }
.scr__status { position: relative; flex: none; aspect-ratio: 390 / 54; display: grid; grid-template-columns: 1fr 30cqw 1fr; align-items: center; background: var(--dev-statusbar); color: var(--dev-on-status); font-size: 4.3cqw; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.scr__time { justify-self: center; }
.scr__island { justify-self: center; width: 30cqw; height: 7.6cqw; border-radius: var(--radius-pill); background: var(--dev-island); }
.scr__icons { justify-self: center; display: flex; gap: 1.5cqw; align-items: center; }
.scr__icons svg { height: 3.3cqw; width: auto; display: block; }
.scr__view { position: relative; flex: none; aspect-ratio: 390 / 790; overflow: hidden; }
.scr__home { position: absolute; z-index: 3; bottom: 1.1%; left: 33%; right: 33%; height: 0.55%; min-height: 3px; border-radius: 3px; background: var(--dev-homebar); pointer-events: none; }
.lay { position: absolute; inset: 0; opacity: 0; transition: opacity 380ms ease; pointer-events: none; }
.lay.on { opacity: 1; pointer-events: auto; }
.lay > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 380ms ease; }
.lay > img.off { opacity: 0; }
/* Ganze Seite im Handy: die klebende Leiste der App ist ein Ausschnitt
   derselben Aufnahme, der per position: sticky oben stehen bleibt. */
.scroller { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; container-type: inline-size; scrollbar-width: none; opacity: 0; transition: opacity 200ms ease; }
.scroller::-webkit-scrollbar { display: none; }
.scroller.ready { opacity: 1; }
.scroller img { display: block; width: 100%; height: auto; }
.scroller__pin { position: sticky; top: 0; z-index: 1; background-repeat: no-repeat; background-size: 100% auto; }
/* Fingertipp auf „Noch feucht“ (Mitte gemessen: 77,4 % DE, 79,2 % EN; Höhe
   seit S212 45,9 % des Bildes 390 × 790, „Rückgängig“ 95,1 %). */
.tap { position: absolute; z-index: 2; left: var(--tx, 77.4%); top: 45.9%; width: 15%; aspect-ratio: 1; margin: -7.5% 0 0 -7.5%; border-radius: 50%; background: var(--dev-tap); box-shadow: 0 0 0 2px var(--dev-tap-ring); opacity: 0; transform: scale(.4); pointer-events: none; }
.tap.go { animation: tour-tap 560ms ease-out; }
@keyframes tour-tap {
  0% { opacity: 0; transform: scale(.4); }
  35% { opacity: 1; transform: scale(.85); }
  100% { opacity: 0; transform: scale(1.25); }
}
.tour-hs { position: absolute; z-index: 3; transform: translate(-50%, -50%); border: 0; padding: 0; background: transparent; border-radius: var(--radius-pill); cursor: pointer; }
.tour-hs--moist { left: var(--tx, 77.4%); top: 45.9%; width: 30%; height: 5.9%; box-shadow: 0 0 0 2px var(--dev-tap-ring); animation: tour-pulse 1.6s ease-in-out infinite; }
.tour-hs--undo { left: 50%; top: 95.1%; width: 44%; height: 5.3%; }
@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--dev-tap-ring); }
  50% { box-shadow: 0 0 0 6px var(--dev-tap); }
}

/* Großansicht des Handys */
dialog.tour-zoom,
dialog.ava-zoom { border: 0; padding: 0; background: transparent; color: var(--color-text); max-width: 96vw; max-height: 96vh; overflow: visible; }
dialog.tour-zoom::backdrop,
dialog.ava-zoom::backdrop { background: var(--dev-scrim); }
.tour-zoom__in { display: grid; gap: 10px; justify-items: center; }
.tour-zoom__phone { width: var(--zw, 300px); }
.tour-zoom__phone:focus { outline: none; }
.tour-zoom__bar { display: flex; gap: var(--space-sm); align-items: center; width: min(92vw, 440px); }
.tour-zoom__title { flex: 1; min-width: 0; text-align: center; font-size: 13px; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sonne/Mond und X gleich groß, damit der Titel mittig steht; Verhalten des
   Sonne/Mond-Knopfs wie im Kopf der Seite (zeigt den jetzigen Zustand,
   „Bahn über den Himmel“), Aussehen wie das X (Heiko, Runde 6). */
.tour-zoom__bar button,
.tour-zoom__go {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary);
  cursor: pointer;
}
.tour-zoom__bar button:focus-visible,
.tour-zoom__go:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tour-zoom__x svg,
.tour-zoom__go svg { width: 26px; height: 26px; display: block; }
/* Pfeile unten neben dem Hinweis (S213, Heiko: Weg A), am Rand wie
   Sonne/Mond und X darüber; am ersten und letzten Punkt blass. */
.tour-zoom__nav { display: flex; gap: var(--space-sm); align-items: center; width: min(92vw, 440px); }
.tour-zoom__go:disabled { opacity: 0.35; cursor: default; }
.tour-sky { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; }
.tour-sky span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.tour-sky svg { display: block; width: 20px; height: 20px; }
/* pre-line (S213): zweizeilige Hinweise brechen an der Stelle aus bilder.js
   (nach dem Komma), nicht dort, wo die Breite endet (Heiko). */
.tour-zoom__hint { flex: 1; min-width: 0; min-height: 1.4em; font-size: 14px; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); text-align: center; white-space: pre-line; }
/* Bei 320 px bleiben zwischen den Pfeilen 190 px — mit 14 px brach
   „um die ganze Seite zu sehen.“ in eine dritte Zeile (S213 gemessen). */
@media (max-width: 359px) { .tour-zoom__hint { font-size: 13px; } }

/* Großansicht der Illustration nach dem Muster der App-Lightbox (lightbox.js,
   base.css): Rand in der Flächenfarbe, X an der Ecke, Tipp daneben schließt.
   Rund statt eckig; das X sitzt seit S212 bündig in der Ecke oben rechts des
   Quadrats um den Kreis (Heiko, Fassung B) — bis dahin am 45°-Punkt des
   Kreises (14,64 % vom Eck), dort ragte es 8 px ins Bild. */
.ava-zoom__in { display: grid; justify-items: center; gap: 12px; }
.ava-zoom__frame { position: relative; display: block; width: min(84vw, 70vh, 440px); aspect-ratio: 1; }
.ava-zoom__frame img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid var(--color-surface); box-shadow: 0 0 0 2px var(--color-primary); background: var(--color-surface); }
.ava-zoom__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.ava-zoom__close svg { width: 26px; height: 26px; display: block; }
.ava-zoom__close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.ava-zoom__cap { margin: 0; font-size: 13px; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }

@media (prefers-reduced-motion: reduce) {
  .lay, .lay > img, .scroller, .tour-segs i::after { transition: none; }
  .tap.go, .tour-hs--moist { animation: none; }
}

/* ─── Rechtstexte (Markup aus src/ui/legal-ui.js) ─────────────────────────── */
.legal-view__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.legal-view__title { margin: 0; font-size: 22px; line-height: 1.3; }
.legal-view__title:focus { outline: none; }
.legal-view__back {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.legal-view__back::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
.legal-view__body h3 { margin: var(--space-lg) 0 var(--space-xs); font-size: 17px; }
.legal-view__body p { margin: 0 0 var(--space-sm); overflow-wrap: anywhere; }
.legal-view__lead { color: var(--color-text-muted); }
.legal-view__contact { font-style: normal; margin: 0 0 var(--space-sm); overflow-wrap: anywhere; }
.legal-view__list { margin: 0 0 var(--space-sm) var(--space-lg); padding: 0; }
.legal__failed {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* ─── Fuß ─────────────────────────────────────────────────────────────────── */
/* Unten Platz für den Nach-oben-Knopf (S209): 44 px plus seine 16 px Abstand,
   sonst läge er am Seitenende auf den Links. */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-md) calc(44px + var(--space-md) * 2);
  color: var(--color-text-muted);
  font-size: 14px;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
}
.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer__note { margin: var(--space-sm) auto 0; }

/* ─── Weiter und nach oben (S209) ─────────────────────────────────────────── */
.info-next,
.info-up {
  position: fixed;
  bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.info-next {
  left: max(var(--space-md), env(safe-area-inset-left, 0px));
  gap: 6px;
  padding: 0 12px 0 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.info-next:hover { color: var(--color-primary-dark); }
.info-next__icon { width: 18px; height: 18px; display: block; }
/* Wie .list-top in der App: 44 px, Pfeil 26 px aus dem Zeichensatz. */
.info-up {
  right: max(var(--space-md), env(safe-area-inset-right, 0px));
  width: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-fill);
  cursor: pointer;
}
.info-up svg { display: block; }