/* ============================================================================
   Song in the Air — Dokumentseiten (guide.html, anleitung.html)
   ----------------------------------------------------------------------------
   Ergaenzt style.css, ersetzt es nicht. Farben, Schriften, Kopfzeile, Fuss,
   Sprachumschalter und der Fokusring kommen von dort und werden hier nicht
   noch einmal angefasst.

   Leitgedanke: Das ist eine Lesestrecke, keine Bildbuehne. Die Startseite
   ueberzeugt mit Aufnahmen — hier muss jemand sechs Schritte durchhalten,
   waehrend neben ihm eine halb beschriebene Speicherkarte liegt. Also schmale
   Spalte, viel Zeilenabstand, und eine Hierarchie, die auf einen Blick trennt:
   Schritt, Hinweis, Stolperstein.
   ========================================================================= */

/* Das Skript blendet drei verschiedene Dinge ueber das hidden-Attribut aus:
   die Tafeln, die Betriebssystem-Kaesten und die Blaetterpfeile. Jede
   display-Regel weiter unten wuerde das aushebeln, weil display staerker ist
   als der Browser-Standard fuer hidden. Deshalb der Riegel — und deshalb mit
   !important, denn '.blaettern a' waere sonst gleich spezifisch und wuerde
   allein durch die Reihenfolge gewinnen. */
/* Der Riegel fuers Laden. Alle Tafeln stehen ohne hidden im Markup, damit
   Antwortmaschinen ohne JavaScript den vollstaendigen Text sehen. Fuer den
   Menschen mit JavaScript wuerden dadurch beim Laden kurz alle zwoelf
   aufblitzen — js-init verhindert das, bis das Skript die richtige gesetzt
   und die Klasse wieder entfernt hat. Wer kein JavaScript hat, bekommt die
   Klasse nie und liest die Seite am Stueck. */
.js-init .doc-body .panel { display: none; }

.doc [hidden] { display: none !important; }

/* ── Blatt ───────────────────────────────────────────────────────────────── */
.doc {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.4rem) clamp(1.1rem, 4vw, 2.5rem) clamp(4rem, 8vw, 6rem);
}

/* ── Kopf der Seite ──────────────────────────────────────────────────────── */
.doc-head { margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.doc-head h1 {
  font-size: clamp(2.05rem, 5.5vw, 3.2rem);
  max-width: 16ch;
}

/* Kein Hinweisstreifen, sondern eine Einordnung: das Geraet ist Zubehoer, die
   App laeuft auch ohne. Bewusst leiser als .eyebrow — das hier relativiert,
   es kuendigt nichts an. */
.zubehoer {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.28rem 0.75rem;
  border: 1px solid var(--hairline-soft);
  border-radius: 99px;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rain);
}

/* style.css deckelt die Vorzeile auf 34ch. Das passt zum Sechs-Wort-Satz der
   Startseite; hier traegt sie den ganzen Aufhaenger und braeche sonst zu einer
   sehr hohen, sehr schmalen Saeule. */
.doc-head .lede {
  max-width: 46ch;
  font-size: clamp(1.04rem, 2.2vw, 1.2rem);
}

/* ── Kennzahlen, Warnung und Download ────────────────────────────────────── */
.doc-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 2.8rem);
  align-items: start;
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--hairline-soft);
}

.facts {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.1rem 1.5rem;
}
.facts li { margin: 0; }
.facts b {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--neon);
}
.facts span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--mist);
}

/* Die eine Warnung, die vor dem Kauf kommt und nicht danach: das Netzteil.
   Farbige Kante statt farbiger Flaeche — sie steht direkt neben dem
   Download-Knopf und darf ihn nicht ueberschreien. */
.warnbar {
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--neon);
  border-radius: 0.7rem;
  background: rgba(255, 160, 96, 0.05);
  padding: 0.95rem 1.15rem;
}
.warnbar p {
  margin: 0;
  font-size: 0.89rem;
  line-height: 1.65;
  color: var(--mist);
}
.warnbar strong { color: var(--pearl); font-weight: 600; }

.dl {
  border: 1px solid var(--hairline);
  border-radius: 1rem;
  background: linear-gradient(165deg, rgba(27, 17, 54, 0.55), rgba(18, 10, 34, 0.28));
  padding: clamp(1.15rem, 3vw, 1.55rem);
}
/* 'main h2' aus style.css kommt mit 2.5rem und 3rem Abstand darunter — das
   sprengt eine Karte von rund 20rem Breite. */
.dl h2 {
  font-size: 1.14rem;
  max-width: none;
  margin: 0 0 0.95rem;
}

.dl-btn {
  display: inline-block;
  padding: 0.72rem 1.25rem;
  border-radius: 99px;
  background: var(--electric);
  color: var(--ink);
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: background .2s ease, transform .18s ease;
}
.dl-btn:hover { background: var(--neon); transform: translateY(-1px); }

.dl-meta {
  margin: 1rem 0 0;
  font-size: 0.79rem;
  line-height: 1.75;
  color: var(--rain);
}
/* Die Pruefsumme ist 64 Zeichen am Stueck und hat keine Stelle, an der ein
   Browser von sich aus umbrechen wuerde. Ohne das hier schiebt sie auf dem
   Telefon die halbe Seite nach rechts. */
.dl-meta code {
  color: var(--mist);
  overflow-wrap: anywhere;
}

.dl-note {
  margin: 0.9rem 0 0;
  font-size: 0.81rem;
  line-height: 1.6;
  color: var(--rain);
}
.dl-note strong { color: var(--neon); font-weight: 600; }

/* ── Rumpf: Tafeln links, Wegweiser rechts ───────────────────────────────── */
.doc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14rem;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

/* Die Lesespalte. Alles andere auf dieser Seite darf breiter werden, der
   Fliesstext nicht — ab etwa 40rem verliert man beim Ruecksprung die Zeile. */
.panel { max-width: 38rem; }
.panel > :first-child { margin-top: 0; }

.eyebrow {
  margin: 0 0 0.55rem;
  line-height: 1.4;
  font-size: 0.71rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--neon);
}

/* 'main h2' setzt 3rem Abstand nach unten — sinnvoll zwischen den Sektionen
   der Startseite, hier reisst es die Ueberschrift von ihrer Vorzeile weg. */
.panel h2 {
  font-size: clamp(1.5rem, 3.6vw, 2.05rem);
  max-width: 22ch;
  margin: 0 0 1.15rem;
}
.panel h3 {
  font-size: 1.1rem;
  margin: 2.3rem 0 0.6rem;
  color: var(--pearl);
}
/* Nur der schmucklose Fliesstext. Klassenlose Absaetze bekommen die Leseform,
   alles mit eigener Klasse (.eyebrow, .los-hint) bringt seine eigene mit —
   ohne dieses :not() waere '.panel p' spezifischer als '.eyebrow' und wuerde
   die Vorzeile still in Fliesstextfarbe umfaerben. */
.panel p:not([class]) {
  margin: 0 0 1.1rem;
  line-height: 1.75;
  color: var(--mist);
}
.panel strong { color: var(--pearl); font-weight: 600; }
.panel em { color: var(--pearl); }

/* Nur die schmucklosen Listen. .kit und .tun bringen ihre eigene Form mit und
   duerfen die Einrueckung hier nicht erben. */
.panel ul:not([class]),
.panel ol:not([class]) {
  margin: 0 0 1.3rem;
  padding-left: 1.25rem;
  color: var(--mist);
}
.panel ul:not([class]) li,
.panel ol:not([class]) li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

/* Der Standard gibt figure 40px Aussenabstand links und rechts — mitten im
   Fliesstext sieht das aus wie ein verrutschtes Bild. */
.panel figure { margin: 1.5rem 0; }

/* Merkmal- und Materialliste: fetter Kopf, darunter der Satz dazu. Kein
   Aufzaehlungspunkt, denn der Kopf ist bereits die Marke. */
.kit { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.kit li {
  margin: 0 0 1.1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--hairline-soft);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--mist);
}
.kit b {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--pearl);
}

.los {
  display: inline-block;
  margin: 0.3rem 0 0.55rem;
  padding: 0.75rem 1.4rem;
  border-radius: 99px;
  background: var(--electric);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, transform .18s ease;
}
.los:hover { background: var(--neon); transform: translateY(-1px); }
.los-hint {
  margin: 0 0 1.8rem;
  font-size: 0.83rem;
  color: var(--rain);
}

/* ── Umschaltleiste Betriebssystem ───────────────────────────────────────── */
/* Ohne Skript setzt niemand aria-selected. Dann liegen die drei Knoepfe
   gleichwertig nebeneinander und der macOS-Kasten steht offen, weil im HTML
   nur win und lin ein hidden tragen. Das ist ein brauchbarer Zustand, kein
   kaputter — deshalb bekommt der Ruhezustand eine eigene, vollstaendige Form
   und nicht bloss das Negativ des ausgewaehlten. */
.ostabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 1.2rem;
  padding: 0.3rem;
  border: 1px solid var(--hairline-soft);
  border-radius: 99px;
}
.ostabs button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0.45rem 1rem;
  border-radius: 99px;
  font-family: var(--font-body);
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--mist);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.ostabs button:hover { background: rgba(237, 230, 218, 0.06); color: var(--pearl); }
.ostabs button[aria-selected="true"] {
  background: rgba(255, 160, 96, 0.14);
  color: var(--neon);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.osbox { margin: 0 0 1.2rem; }

/* Nummerierte Handgriffe. Eigene Zaehlung, weil die Ziffer hier zur Anleitung
   gehoert und nicht Listenschmuck ist — man springt zurueck und muss die
   Stelle wiederfinden. */
.tun {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tun;
}
.tun li {
  counter-increment: tun;
  position: relative;
  margin-bottom: 0.85rem;
  padding-left: 2.2rem;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--mist);
}
.tun li::before {
  content: counter(tun);
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  font-size: 0.74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--neon);
}

/* ── Stolperstein ────────────────────────────────────────────────────────── */
/* Das, woran man haengenbleibt, wenn man es nicht vorher liest. Abgesetzt
   durch Grund und Kante, nicht durch Farbe: in einer Tafel stehen bis zu drei
   davon, und drei Signalfarben nacheinander liest niemand mehr. */
.snag {
  margin: 1.3rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--hairline-soft);
  border-radius: 0.65rem;
  background: rgba(237, 230, 218, 0.035);
}
/* Gleiche Spezifitaet wie die Fliesstextregel oben und weiter hinten im
   Blatt — deshalb gewinnt sie hier drinnen. */
.snag p:not([class]) {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--mist);
}
.snag b,
.snag strong { color: var(--pearl); font-weight: 600; }

/* ── Befehle ─────────────────────────────────────────────────────────────── */
.doc code {
  font-size: 0.86em;
  padding: 0.12em 0.4em;
  border-radius: 4px;
  background: rgba(255, 160, 96, 0.10);
  color: var(--neon);
  overflow-wrap: anywhere;
}
/* Die laengste Befehlszeile hat rund 60 Zeichen und passt auf einem Telefon
   nicht in die Breite. Sie darf scrollen — aber nur sie, nicht die Seite. */
.doc pre {
  margin: 0 0 1.3rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hairline-soft);
  border-radius: 0.6rem;
  background: rgba(5, 2, 8, 0.55);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.doc pre code {
  display: block;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--pearl);
  font-size: 0.83rem;
  line-height: 1.7;
  white-space: pre;
  overflow-wrap: normal;
}

/* ── Blaettern ───────────────────────────────────────────────────────────── */
/* Auf der ersten und der letzten Tafel blendet das Skript je einen Pfeil aus.
   Der Weiter-Link haelt sich deshalb per auto-Abstand selbst nach rechts,
   statt sich auf space-between zu verlassen — sonst rutscht er nach links,
   sobald der Zurueck-Link verschwindet. */
.blaettern {
  display: flex;
  gap: 1rem;
  max-width: 38rem;
  margin-top: clamp(2.4rem, 5vw, 3.2rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline-soft);
}
.blaettern a {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--hairline-soft);
  border-radius: 99px;
  font-size: 0.89rem;
  color: var(--mist);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}
.blaettern a:hover { color: var(--neon); border-color: var(--hairline); }
.blaettern a[rel="next"] { margin-left: auto; }

/* ── Wegweiser ───────────────────────────────────────────────────────────── */
.doc-nav {
  position: sticky;
  top: 4.6rem;              /* die Kopfzeile klebt selbst und ist rund 3.6rem hoch */
  align-self: start;
  padding-left: 1.3rem;
  border-left: 1px solid var(--hairline-soft);
  font-size: 0.87rem;
}
/* 'main h2' waere hier 2.5rem gross — in einer 14rem schmalen Spalte absurd. */
.doc-nav h2 {
  margin: 0 0 0.7rem;
  max-width: none;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rain);
}
.doc-nav h2 ~ h2 { margin-top: 1.8rem; }
.doc-nav ol,
.doc-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.doc-nav ol { counter-reset: weg; }
.doc-nav li { margin-bottom: 0.1rem; counter-increment: weg; }
.doc-nav a {
  display: block;
  padding: 0.32rem 0.4rem 0.32rem 0;
  border-radius: 4px;
  line-height: 1.4;
  color: var(--mist);
  text-decoration: none;
}
.doc-nav ol a::before {
  content: counter(weg) ".";
  display: inline-block;
  width: 1.3rem;
  color: var(--rain);
  font-variant-numeric: tabular-nums;
}
.doc-nav a:hover { color: var(--pearl); }
.doc-nav a[aria-current="true"] { color: var(--neon); font-weight: 600; }
.doc-nav ol a[aria-current="true"]::before { color: var(--neon); }

/* ── Fokus ───────────────────────────────────────────────────────────────── */
/* Der Ring aus style.css ist neonfarben. Auf den gefuellten Knoepfen liegt er
   damit fast auf der eigenen Farbe und verschwindet — dort muss er hell sein. */
.dl-btn:focus-visible,
.los:focus-visible { outline-color: var(--pearl); }

/* ── Schmale Schirme ─────────────────────────────────────────────────────── */
@media (max-width: 58rem) {
  .doc-body { grid-template-columns: 1fr; }
  /* Ohne zweite Spalte gibt es nichts, woran der Wegweiser kleben koennte —
     er wird zum Verzeichnis am Fuss der Tafel. */
  .doc-nav {
    position: static;
    padding: 1.7rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--hairline-soft);
  }
}

@media (max-width: 46rem) {
  .doc-top { grid-template-columns: 1fr; }
}

@media (max-width: 26rem) {
  /* Bei 375px bleibt nach den Innenabstaenden knapp 21rem Textbreite. Die
     Knoepfe duerfen dann die volle Breite nehmen statt die Seite zu
     verbreitern. */
  .dl-btn,
  .los { display: block; text-align: center; }
  .blaettern { flex-wrap: wrap; }
  /* Die Einordnung passt hier nicht mehr in eine Zeile, und ein Pillenrand um
     zwei Zeilen sieht aus wie ein Fehler, nicht wie eine Auszeichnung. Also
     faellt der Rand weg und die Zeile bleibt, was sie ist: eine Randnotiz. */
  .zubehoer {
    display: block;
    padding: 0;
    border: 0;
    letter-spacing: 0.07em;
  }
}

/* style.css bremst Uebergaenge bereits global aus. Wiederholt, damit dieses
   Blatt fuer sich allein stimmt und nicht von der Ladereihenfolge abhaengt. */
@media (prefers-reduced-motion: reduce) {
  .dl-btn,
  .los,
  .ostabs button,
  .blaettern a { transition: none; }
  .dl-btn:hover,
  .los:hover { transform: none; }
}