/* Die Beta-Anleitung auf docs.zeigr.io
 *
 * Dieselbe Farbwelt wie die Produktseite, aber ruhiger: Das hier wird
 * gelesen, während jemand mit dem Telefon in der Hand vor seinem Motorrad
 * steht — nicht überflogen, während er sich für etwas entscheidet.
 *
 * ⚠️ Kein JavaScript, keine Fremdressource. Auf der Produktseite ist die
 * JS-Regel am 14.09.2026 gefallen; hier gibt es keinen Grund dafür. Eine
 * Anleitung, die ohne Skript nicht funktioniert, versagt genau dort, wo man
 * sie braucht.
 *
 * ⚠️ Die Schrift liegt als Kopie hier, nicht als Verweis auf zeigr.io. Ein
 * Zugriff über die Domaingrenze wäre unter der CSP (`font-src 'self'`) ein
 * Fremdabruf — und genau die soll es nicht geben.
 */

@font-face {
    font-family: "Outfit";
    src: url("fonts/outfit-variable.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --grund: #0b0e10;
    --karte: #14191d;
    --linie: #232b31;
    --text: #eef2f3;
    --leise: #9aa6ac;
    --akzent: #26de81;
    --warn: #ff8a3d;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font: 17px/1.7 "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* ---- Kopf -------------------------------------------------------------- */

.kopf {
    border-bottom: 1px solid var(--linie);
    background: rgba(11,14,16,.9);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.kopf-innen {
    max-width: 62rem;
    margin: 0 auto;
    padding: 12px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.marke { display: flex; line-height: 0; text-decoration: none; }
.marke img { height: 21px; width: auto; }

.was {
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--akzent);
    border-left: 1px solid var(--linie);
    padding-left: 14px;
}

.zurueck {
    margin-left: auto;
    font-size: .9rem;
    color: var(--leise);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.zurueck:hover { color: var(--text); }

/* ---- Aufbau ------------------------------------------------------------ */

.huelle {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 22px 72px;
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 44px;
    align-items: start;
}

nav.seiten {
    position: sticky;
    top: 74px;
    padding-top: 40px;
}

nav.seiten ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
    counter-reset: s;
}

nav.seiten a {
    counter-increment: s;
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 10px 12px;
    border-radius: 9px;
    color: var(--leise);
    text-decoration: none;
    font-size: .95rem;
    min-height: 44px;
}

nav.seiten a::before {
    content: counter(s, decimal-leading-zero);
    font-family: var(--mono);
    font-size: .78rem;
    color: #5f6a70;
}

nav.seiten a:hover { background: var(--karte); color: var(--text); }

nav.seiten a[aria-current="page"] {
    background: var(--karte);
    color: var(--text);
    box-shadow: inset 2px 0 0 var(--akzent);
}
nav.seiten a[aria-current="page"]::before { color: var(--akzent); }

main { padding-top: 40px; min-width: 0; max-width: 40rem; }

/* ---- Text -------------------------------------------------------------- */

h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 .3em;
    text-wrap: balance;
}

.stand {
    font-family: var(--mono);
    font-size: .76rem;
    color: var(--leise);
    margin: 0 0 2.2em;
}

h2 {
    font-size: 1.25rem;
    margin: 2.4em 0 .6em;
    padding-top: 1.4em;
    border-top: 1px solid var(--linie);
    letter-spacing: -.015em;
}
h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.6em; }

h3 { font-size: 1.02rem; margin: 1.8em 0 .4em; }

p { margin: 0 0 1.1em; }
strong { color: #fff; font-weight: 600; }

a { color: var(--akzent); text-underline-offset: 3px; }

ul, ol.schritte { padding-left: 0; margin: 0 0 1.3em; }

/* Die Schrittfolge: nummeriert, weil die Reihenfolge hier wirklich zählt. */
ol.schritte {
    list-style: none;
    counter-reset: schritt;
    display: grid;
    gap: 10px;
}

ol.schritte li {
    counter-increment: schritt;
    position: relative;
    padding: 14px 16px 14px 54px;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: 11px;
}

ol.schritte li::before {
    content: counter(schritt, decimal-leading-zero);
    position: absolute;
    left: 17px;
    top: 13px;
    font-family: var(--mono);
    font-weight: 600;
    color: var(--akzent);
    font-size: .92rem;
}

ul.punkte { list-style: none; display: grid; gap: 8px; }
ul.punkte li { padding-left: 20px; position: relative; }
ul.punkte li::before {
    content: "";
    position: absolute;
    left: 2px; top: .62em;
    width: 6px; height: 6px;
    background: var(--akzent);
    transform: rotate(45deg);
}

/* ---- Der Menüpfad ------------------------------------------------------ */

/* Ein Pfad durch die App ist eine Anweisung, kein Fließtext — er bekommt
 * deshalb Mono und eigene Auszeichnung. Wer die Seite überfliegt, soll ihn
 * finden, ohne zu lesen. */
.pfad {
    font-family: var(--mono);
    font-size: .88rem;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-left: 3px solid var(--akzent);
    border-radius: 8px;
    padding: 11px 14px;
    display: block;
    margin: 0 0 1.3em;
    overflow-x: auto;
    white-space: nowrap;
}

code {
    font-family: var(--mono);
    font-size: .88em;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: 5px;
    padding: 1px 6px;
}

/* ---- Kästen ------------------------------------------------------------ */

.achtung, .merke {
    border-radius: 11px;
    padding: 15px 17px;
    margin: 0 0 1.4em;
    font-size: .97rem;
}

/* Orange heißt hier dasselbe wie in der App und auf der Produktseite:
 * aufpassen. Nicht „Tipp", nicht Dekoration. */
.achtung {
    border: 1px solid rgba(255,138,61,.3);
    border-left: 3px solid var(--warn);
    background: linear-gradient(90deg, rgba(255,138,61,.09), transparent 65%);
}
.achtung b { color: var(--warn); }

.merke {
    border: 1px solid var(--linie);
    border-left: 3px solid var(--akzent);
    background: var(--karte);
}

/* ---- Tabelle ----------------------------------------------------------- */

.tabelle { overflow-x: auto; margin: 0 0 1.4em; }

table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); font-weight: 500; }
td.ja { color: var(--akzent); font-weight: 600; }
td.nein { color: #8d979d; }

/* ---- Fuß --------------------------------------------------------------- */

footer {
    border-top: 1px solid var(--linie);
    margin-top: 56px;
    padding-top: 22px;
    font-size: .86rem;
    color: #78838a;
}
footer a { color: var(--leise); }

.weiter {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 1.6em;
    padding: 13px 20px;
    border-radius: 10px;
    background: var(--karte);
    border: 1px solid var(--linie);
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}
.weiter:hover { border-color: var(--akzent); }
.weiter::after { content: "→"; font-family: var(--mono); color: var(--akzent); }

@media (max-width: 820px) {
    .huelle { grid-template-columns: 1fr; gap: 0; }
    nav.seiten { position: static; padding-top: 28px; }
    nav.seiten ol {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
        padding-bottom: 6px;
    }
    nav.seiten a { white-space: nowrap; }
    main { padding-top: 26px; }
    .was { display: none; }
}