/* Swiss QC Guru – Installationsseite. Grundlage guru.css (Produktseite, Stil der App: Anthrazit, 1-px-Linien,
   2-px-Ecken, keine Verläufe/Schatten, IBM Plex); hier nur, was es nur auf dieser Seite gibt. */
[hidden] { display: none !important; }
code { font: .92em var(--mono); color: var(--white); background: var(--raised); border: 1px solid var(--line); border-radius: 2px; padding: 1px 5px; }
.hero h1 { max-width: 18em; }
.hero .shot { margin-top: 8px; }
section h2 + p { max-width: 52em; color: var(--muted); }

/* Plattform wählen: Reiter wie in der App (Text grau, der offene weiss mit Linie darunter) */
.os-tabs { display: flex; gap: 0; margin: 24px 0 0; border-bottom: 1px solid var(--line-strong); flex-wrap: wrap; }
.os-tabs button { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin-bottom: -1px; padding: 0 16px; font: 600 15px var(--sans);
  color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer; }
.os-tabs button:hover { color: var(--white); }
.os-tabs button[aria-selected="true"] { color: var(--white); border-bottom-color: var(--go); }
.os-tabs button:focus-visible, .copy:focus-visible, summary:focus-visible { outline: 1px solid var(--go); outline-offset: 2px; }
.os-icon { width: 16px; height: 16px; fill: currentColor; }

/* Drei Schritte als Raster mit Nummer in Mono */
.how { counter-reset: how; list-style: none; margin: 24px 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.how li { counter-increment: how; padding: 16px 18px; background: var(--panel); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 15px; line-height: 1.5; }
.how li::before { content: "0" counter(how); display: block; margin-bottom: 6px; color: var(--faint); font: 600 12px var(--mono); letter-spacing: .08em; }
.how b { color: var(--white); }

/* Die Zeile im Fenster, wie man es auf dem Rechner sieht */
.term { border: 1px solid var(--line-strong); border-radius: 2px; overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px; font: 13px var(--sans); }
.term-body { display: flex; align-items: center; gap: 12px; padding: 18px 16px; }
.term-body .prompt { font: 15px/1.5 var(--mono); white-space: nowrap; user-select: none; }
.term-body code { flex: 1; min-width: 0; font: 15px/1.5 var(--mono); background: none; border: 0; padding: 0; white-space: normal; overflow-wrap: anywhere; cursor: text; }
.term-win .term-bar { justify-content: space-between; background: #f3f3f3; color: #1b1b1b; }
.term-win .term-ctl { display: flex; gap: 18px; }
.term-win .term-ctl i { width: 10px; height: 10px; border: 0 solid #555; border-bottom-width: 1.5px; }
.term-win .term-ctl i:nth-child(2) { border-width: 1.5px; }
.term-win .term-ctl i:nth-child(3) { border-width: 0; background: linear-gradient(45deg, transparent 45%, #555 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #555 45% 55%, transparent 55%); }
.term-win .term-body { background: #012456; }
.term-win .prompt { color: #eeedf0; }
.term-win code { color: #ffff00; }
.term-mac .term-bar { position: relative; justify-content: center; background: #303032; color: #c8c8cc; border-bottom: 1px solid #000; }
.term-mac .lights { position: absolute; left: 12px; display: flex; gap: 8px; }
.term-mac .lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.term-mac .lights i:nth-child(2) { background: #febc2e; }
.term-mac .lights i:nth-child(3) { background: #28c840; }
.term-mac .term-body { background: #1e1e1e; }
.term-mac .prompt { color: #8ce99a; }
.term-mac code { color: #f2f2f2; }

/* Kopieren: wie die Knöpfe der App */
.copy { flex: none; height: 32px; padding: 0 14px; font: 600 14px var(--sans); color: #fff; background: var(--go); border: 1px solid #000; border-radius: 2px; cursor: pointer; }
.copy:hover { background: var(--go-hover); }
.copy.done { background: #2a8a45; }
.copyable.small { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 8px 8px 8px 14px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 2px; }
.copyable.small code { flex: 1; min-width: 0; font-size: 13px; background: none; border: 0; padding: 0; overflow-x: auto; white-space: nowrap; cursor: text; }

.hint { margin: 10px 0 0; color: var(--faint); font-size: 14px; }
.after { margin: 20px 0 0; max-width: 52em; color: var(--muted); }
details { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 14px; }
summary { color: var(--muted); cursor: pointer; }
summary:hover { color: var(--white); }
details p { color: var(--muted); }

/* Neu / Voraussetzungen: Zeilen mit Linien wie die Listen der Produktseite */
.news, .req { margin: 0 0 24px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.news li, .req li { padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.news b { color: var(--white); }
.req li { color: var(--text); }

@media (max-width: 760px) {
  .how { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .term-body { flex-wrap: wrap; }
  .term-body code { flex-basis: 100%; order: 2; font-size: 13px; }
  .term-body .copy { order: 1; margin-left: auto; }
}