/* Yacht Empire — Landingpage: die Installations-Anleitung im Dialog
 *
 * Eine EIGENE Datei aus demselben Grund wie bibliothek.css: styles.css ist die
 * gewachsene Grundlage der ganzen Seite, ein grosser neuer Bereich wuerde sie
 * unlesbar machen. Geladen NACH styles.css — die Tokens aus deren :root gelten
 * hier unveraendert weiter, und es kommt kein einziger neuer Farbwert dazu:
 * alles, was hier nach Farbe aussieht, ist ein Token oder ein color-mix()
 * daraus.
 *
 * Kein Framework, kein Build-Schritt: die Datei wird so ausgeliefert.
 *
 * Mobile first: alle Grundregeln gelten fuer 320 px, groessere Viewports
 * bekommen ausschliesslich additive @media-Bloecke.
 *
 * ⚠️ **Zwei Achsen schalten hier Sichtbarkeit, und sie duerfen sich nicht in
 * die Quere kommen.** Die erste ist die Sprache (`data-lang` am <html>, Regeln
 * in styles.css) — sie greift an Elementen mit `lang`-Attribut. Die zweite ist
 * die Plattform (`data-plattform` am Knopf, `data-zeigt` an der Buehne) — sie
 * greift eine Ebene HOEHER, an Elementen mit `data-fuer`/`data-anleitung`.
 * Deshalb steht jede Sprachvariante als eigenes <span lang> INNERHALB der
 * Plattformvariante: aussen entscheidet die Plattform, innen die Sprache. Wer
 * beides auf dasselbe Element legt, bekommt ein `display: none`, das die
 * andere Achse nicht mehr aufheben kann.
 */

/* ── Nur mit JavaScript ──────────────────────────────────────────────────
 * Ohne Skript (oder ohne <dialog>) bleibt `.install__lager` stehen: die vier
 * Karten sind dann vollstaendig lesbar auf der Seite, und der Knopf ist ein
 * Anker, der zu ihnen springt. Erst wenn anleitung.js sich als arbeitsfaehig
 * erwiesen hat, setzt es diese Klasse — das ist die Reihenfolge, in der die
 * Anleitung nie verschwinden kann.
 */
.hat-anleitung .install__lager {
  display: none;
}

.anleitung-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sichtbarer Fokus — die Bedienung des Dialogs haengt daran. */
.anleitung :focus-visible,
.install :focus-visible {
  outline: 3px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── Der kompakte Abschnitt ──────────────────────────────────────────────
 * Die Kurzantwort auf „Muss ich installieren?" bleibt SICHTBAR. Wer sich
 * fragt, ob er ueberhaupt etwas tun muss, soll die Antwort nicht erst hinter
 * einem Knopf finden — die Schritte dagegen betreffen immer nur ein Geraet.
 */
.install__antwort {
  margin-top: var(--s-xl);
  padding: var(--s-l);
  border-radius: var(--radius-card);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  max-width: var(--reading);
}

.install__antwort h3 {
  margin: 0 0 var(--s-s);
  font-size: 1.05rem;
  color: var(--accent-bright);
}

.install__antwort p {
  margin: 0;
  color: var(--text-dim);
}

.install__aktion {
  margin-top: var(--s-xl);
}

.install__hinweis {
  margin: var(--s-m) 0 0;
  color: var(--text-dim);
  font-size: 0.9rem;
  max-width: var(--reading);
}

.install__lager {
  margin-top: var(--s-xl);
  /* Ohne Skript IST dieses Lager das Sprungziel des Knopfs. Die Kopfleiste
   * ist `sticky` und wuerde die erste Ueberschrift verdecken — der Sprung
   * haelt deshalb ihre Hoehe Abstand. */
  scroll-margin-top: 72px;
}

.install__lager .install__wissen {
  margin-top: var(--s-l);
}

/* ── Die Beschriftung des Knopfs folgt dem erkannten Geraet ──────────────
 * ⚠️ Erkennung ist ein VORSCHLAG. Ohne Skript und immer dann, wenn die Kette
 * in anleitung.js nichts Sicheres findet (`unbekannt`), bleibt der neutrale
 * Text stehen — es wird nie eine Plattform behauptet, die niemand gemessen hat.
 */
.install__knopf [data-fuer] {
  display: none;
}

.install__knopf [data-fuer="allgemein"] {
  display: inline;
}

.install__knopf[data-plattform="iphone"] [data-fuer="allgemein"],
.install__knopf[data-plattform="ipad"] [data-fuer="allgemein"],
.install__knopf[data-plattform="ios"] [data-fuer="allgemein"],
.install__knopf[data-plattform="android"] [data-fuer="allgemein"],
.install__knopf[data-plattform="desktop"] [data-fuer="allgemein"] {
  display: none;
}

.install__knopf[data-plattform="iphone"] [data-fuer="iphone"],
.install__knopf[data-plattform="ipad"] [data-fuer="ipad"],
.install__knopf[data-plattform="ios"] [data-fuer="ios"],
.install__knopf[data-plattform="android"] [data-fuer="android"],
.install__knopf[data-plattform="desktop"] [data-fuer="desktop"] {
  display: inline;
}

/* ── Der Dialog ──────────────────────────────────────────────────────────
 * Machart, Masse und Verhalten sind die der Bibliothek (bibliothek.css
 * §„Der Dialog"): ein natives <dialog>, das das ganze Fenster fuellt und
 * durchsichtig ist — so trifft ein Klick „daneben" tatsaechlich das
 * <dialog>-Element und es braucht keinen zweiten, unsichtbaren Layer.
 */
.anleitung {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  /* ⚠️ Oben KEIN Innenabstand des Dialogs. Der klebende Kopf misst sein
   * `top: 0` an der INHALTSKANTE des Scrollcontainers — mit 16 px Polsterung
   * darueber bliebe ein Streifen frei, durch den die Anleitung sichtbar
   * vorbeifaehrt (bei 320 px gemessen: Kopf stand bei y=16, darueber lief
   * Schritt 1 durch). Der Abstand nach oben kommt deshalb als MARGIN des
   * Rahmens — der scrollt mit weg, statt stehen zu bleiben. */
  padding: 0 var(--s-l) var(--s-l);
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: auto;
  overscroll-behavior: contain;
}

.anleitung::backdrop {
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.anleitung__rahmen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  margin: var(--s-l) auto 0;
  /* Oben KEIN Innenabstand: der Kopf sitzt buendig an der Kante und deckt
   * damit auch beim Scrollen die ganze Breite ab (siehe .anleitung__kopf). */
  padding: 0 var(--s-l) var(--s-l);
  border-radius: var(--radius-card);
  background: var(--glass-hi);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ⚠️ Der Kopf klebt oben mit — und das ist keine Zierde, sondern die
 * Zusage aus dem Auftrag: WELCHE Plattform gerade gezeigt wird, muss
 * jederzeit sichtbar sein, und der Wechsel darf nie mehr als einen Klick
 * kosten. Eine lange Anleitung scrollt die Wahl sonst weg. Scrollcontainer
 * ist das <dialog> selbst, `sticky` misst sich also daran. */
.anleitung__kopf {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 calc(var(--s-l) * -1) var(--s-l);
  padding: var(--s-l);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  /* ⚠️ Undurchsichtig, nicht Glas. Der Rahmen darunter IST schon Glas: ein
   * halbtransparenter Kopf darauf laesst die durchlaufende Anleitung durch
   * seine eigenen Knoepfe hindurch lesbar bleiben (bei 320 px gemessen —
   * Schrittzahlen standen mitten in den Reitern). `backdrop-filter` hilft
   * nicht, es unschaerft nur, was ohnehin nicht dahinter gehoert. Die Farbe
   * ist trotzdem keine neue: ein Mix aus zwei Tokens. */
  background: color-mix(in srgb, var(--surface-hi) 72%, var(--bg));
  border-bottom: 1px solid var(--glass-border);
}

.anleitung__zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--s-m);
}

.anleitung__titel {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
}

.anleitung__zu {
  flex: none;
  width: 44px;
  height: 44px;
  margin-top: -4px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--surface-hi);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.anleitung__zu:hover {
  background: var(--accent);
  color: var(--on-accent);
}

/* Die Geraetewahl: drei Knoepfe, immer alle drei erreichbar. */
.anleitung__wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-s);
  margin-top: var(--s-m);
}

.anleitung__wahl button {
  min-height: 44px;
  padding: 0 var(--s-m);
  border-radius: var(--radius-chip);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.anleitung__wahl button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* Der Satz zur Erkennung. Er steht NUR da, wenn nichts sicher erkannt wurde —
 * dann ist die Wahl oben die Antwort, nicht eine geratene Plattform. */
.anleitung__unklar {
  margin: var(--s-m) 0 0;
  color: var(--text-dim);
  font-size: 0.88rem;
}

.anleitung__rahmen:not([data-plattform="unbekannt"]) .anleitung__unklar {
  display: none;
}

/* Im Dialog traegt der Rahmen schon Karte und Schatten — die Anleitung darin
 * darf sie nicht doppelt haben. */
.anleitung .card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.anleitung__buehne {
  min-width: 0;
}

.anleitung__buehne:focus {
  outline: none;
}

/* Welche Anleitung sichtbar ist. `alle` ist der ehrliche Rueckfall: lieber
 * drei Anleitungen untereinander als eine falsche allein. */
.anleitung__buehne [data-anleitung] {
  display: none;
}

.anleitung__buehne[data-zeigt="ios"] [data-anleitung="ios"],
.anleitung__buehne[data-zeigt="android"] [data-anleitung="android"],
.anleitung__buehne[data-zeigt="desktop"] [data-anleitung="desktop"],
.anleitung__buehne[data-zeigt="alle"] [data-anleitung] {
  display: block;
}

.anleitung__buehne[data-zeigt="alle"] [data-anleitung] + [data-anleitung] {
  margin-top: var(--s-xl);
  padding-top: var(--s-xl);
  border-top: 1px solid var(--glass-border);
}

/* „Gut zu wissen" gilt fuer jedes Geraet und haengt deshalb nicht an der
 * Wahl — es steht unter der Anleitung, immer. */
.anleitung__wissen {
  margin-top: var(--s-xl);
  padding-top: var(--s-l);
  border-top: 1px solid var(--glass-border);
}

.anleitung__wissen .card p {
  color: var(--text-dim);
  font-size: 0.95rem;
}

.anleitung__fuss {
  margin: var(--s-l) 0 0;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-align: center;
}

/* ── Breakpoints (additiv) ───────────────────────────────────────────── */
@media (min-width: 768px) {
  .anleitung {
    padding: 0 var(--s-xl) var(--s-xl);
  }

  .anleitung__rahmen {
    margin-top: var(--s-xl);
    padding: 0 var(--s-xl) var(--s-xl);
  }

  .anleitung__kopf {
    margin: 0 calc(var(--s-xl) * -1) var(--s-l);
    padding: var(--s-xl) var(--s-xl) var(--s-l);
  }
}