/* Installieren – Gestaltung.

   Arbeitet ausschliesslich mit den Gestaltungswerten aus styles.css; auch die
   Pixelwerte sind solche, die dort bereits vorkommen – eine weitere Variante
   von "ein bisschen Abstand" hilft niemandem. Die tragenden Klassen (.btn,
   .lp-cta, .steps, .badge-on, .muted, .sec, .toast) stammen ebenfalls von
   dort; diese Datei ordnet nur an, was das Installieren-Element selbst
   braucht. Geladen wird sie in index.html direkt nach styles.css. */

/* Ein Element, zwei Auftritte: Auf der Startseite steht es mittig unter der
   Abschnittsueberschrift ("Auf jedem Gerät"), in den Einstellungen buendig
   im Kartentext. Der Unterschied ist reine Ausrichtung, kein zweiter Bau. */
.inst { display: flex; flex-direction: column; gap: 14px; }
.inst-landing { align-items: center; text-align: center; }
/* Nummerierte Schritte und die Geraete-Spalten bleiben auch im mittigen
   Auftritt linksbuendig: Anleitungen mit Flatterrand links liest niemand
   gern, und die Nummern verloeren ihre gemeinsame Kante. */
.inst-landing .steps, .inst-landing .inst-grid { text-align: left; }

.inst-haupt { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.inst-landing .inst-haupt { align-items: center; }

/* Begleitsaetze: schmal gehalten, damit die Zeile nicht ueber die ganze
   Kartenbreite laeuft – 46ch ist dieselbe Lesebreite wie .lp-lead. */
.inst-text { margin: 0; font-size: var(--fs-md); line-height: 1.55; max-width: 46ch; }

/* Zusatz im Download-Knopf (Dateiname · Groesse): gleiche Machart wie
   .lp-cta small in styles.css, hier auch fuer den kompakten .btn der
   Einstellungen-Karte. */
.inst .btn small { display: block; font-weight: 400; font-size: var(--fs-xs); opacity: .8; }

/* Das "oder" zwischen zwei gleichwertigen Wegen (aus dem Browser
   installieren / Windows-Programm laden) – bewusst leise, damit daraus
   keine dritte Knopfgroesse wird. */
.inst-oder {
  font-size: var(--fs-sm); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}

/* Platz fuer die Erklaerfiguren aus figuren.js. Solange ein Platzhalter leer
   ist, nimmt er keinen Raum ein: Die Anleitung sieht ohne Figuren fertig
   aus, nicht kaputt. */
.inst-figur { display: block; margin: 6px 0 4px; }
.inst-figur:empty { display: none; }

/* Die Wege fuer die anderen Geraete: zusammengeklappt, damit auf DIESEM
   Geraet genau ein Weg im Vordergrund steht. <details> bringt Auf/Zu,
   Tastatur und Vorlesbarkeit von Haus aus mit – hier nur die Optik, nach
   dem Muster von .disclose. Der eigene Pfeil ersetzt die Browser-Marke,
   die je nach Browser anders aussieht und sich nicht einfaerben laesst. */
.inst-andere summary {
  display: inline-block; cursor: pointer; list-style: none;
  color: var(--text-secondary); font-size: var(--fs-md); font-weight: 600;
  padding: 3px 7px; border-radius: 7px;
}
.inst-andere summary::-webkit-details-marker { display: none; }
.inst-andere summary::before { content: "▸ "; color: var(--text-muted); }
.inst-andere[open] summary::before { content: "▾ "; }
.inst-andere summary:hover { background: var(--surface-sunken); color: var(--text-primary); }
.inst-andere summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.inst-andere[open] summary { margin-bottom: 8px; }
/* Mittig auf der Startseite sonst so breit wie die ganze Sektion –
   720px ist dieselbe Grenze wie .lp-sec-head. */
.inst-landing .inst-andere { max-width: 720px; }

/* Geraete-Spalten im aufgeklappten Teil: gleiche Bauart wie .lp-steps,
   nur eine Stufe kompakter (215px ist das Raster der Preiskarten). */
.inst-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}
.inst-grid b { display: block; margin-bottom: 5px; }
.inst-grid p { margin: 0; font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.55; }