/* Die Produktseite von zeigr.
 *
 * Dieselben Farbwerte wie die Rechtsseiten und die App — wer von hier ins
 * Impressum oder in die Streckenplanung klickt, soll nicht die Welt wechseln.
 *
 * ⚠️ **Kein Webfont, keine Fremdressource.** Dieselbe Begründung wie in
 * `legal.css`: Ein nachgeladener Font überträgt die IP des Lesers an einen
 * Dritten, und die Datenschutzerklärung müsste es erklären. Eine Seite ohne
 * Fremdaufrufe braucht dazu gar nichts zu sagen.
 *
 * ⚠️ **Ein Akzent, nicht sechs.** Die App hat sechs Akzentfarben; sechs auf
 * einer Seite sind keiner. Sie kommen in den Screenshots vor und erzählen dort
 * von selbst, dass es sie gibt. Orange bleibt dem Warnton vorbehalten —
 * dieselbe Bedeutung wie in der App.
 */

:root {
    color-scheme: dark;
    --grund: #0b0d0e;
    --karte: #141719;
    --linie: #262b2d;
    --text: #f1f3f3;
    --leise: #99a1a4;
    --akzent: #3ddc84;
    --warn: #ff8a3d;
}

* { box-sizing: border-box; }

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

.breite { max-width: 62rem; margin: 0 auto; padding: 0 22px; }
.schmal { max-width: 44rem; }

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

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

.kopf .breite { display: flex; align-items: center; gap: 16px; }

.wortmarke {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    text-decoration: none;
}
.wortmarke span { color: var(--akzent); }

.kopf nav { margin-left: auto; display: flex; gap: 20px; }
.kopf nav a {
    color: var(--leise);
    text-decoration: none;
    font-size: 15px;
}
.kopf nav a:hover { color: var(--text); }

/* ---- Hero ---------------------------------------------------------- */

.hero { padding: 72px 0 56px; }

h1 {
    font-size: clamp(30px, 5.2vw, 50px);
    line-height: 1.1;
    letter-spacing: -.028em;
    margin: 0 0 20px;
    font-weight: 700;
}

.hero p.gross {
    font-size: clamp(17px, 2.2vw, 20px);
    color: var(--leise);
    max-width: 34rem;
    margin: 0 0 14px;
}

/* ⚠️ Die Ehrlichkeitszeile steht direkt unter dem Versprechen, nicht im
 * Kleingedruckten. Wer erst unten erfährt, dass es kein App Store ist, fühlt
 * sich geködert. */
.hinweis {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--linie);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 14px;
    color: var(--leise);
}

/* ---- Abschnitte ---------------------------------------------------- */

section { padding: 56px 0; border-top: 1px solid var(--linie); }

.kicker {
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: 12px;
    font-weight: 700;
    color: var(--akzent);
    margin: 0 0 10px;
}

h2 {
    font-size: clamp(23px, 3.4vw, 31px);
    letter-spacing: -.02em;
    margin: 0 0 18px;
    font-weight: 700;
}

h3 { font-size: 19px; margin: 0 0 8px; font-weight: 700; }

p { margin: 0 0 15px; }
p.leise { color: var(--leise); }

/* ---- Funktionsblöcke ----------------------------------------------- */

.block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 40px;
    align-items: center;
    margin-bottom: 52px;
}

/* ⚠️ Die Spalten müssen mit dem Bild wandern, nicht nur die Reihenfolge.
 * `order: -1` allein schiebt das Bild in die *erste* Spalte — und die ist die
 * breite. Ergebnis: In jedem zweiten Block war das Bild 606 statt 298 Punkte
 * breit und der Text in die schmale Spalte gequetscht. Deshalb wird die
 * Spaltenfolge mitgedreht. */
.block:nth-child(even) {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
}
.block:nth-child(even) > .bild { order: -1; }
.block:last-child { margin-bottom: 0; }

@media (max-width: 760px) {
    .block,
    .block:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .block:nth-child(even) > .bild { order: 0; }
}

/* ⚠️ Ein schlichter Rahmen, kein fotorealistischer Gerätebezel. Ein
 * gezeichnetes iPhone altert schlecht und lenkt vom Inhalt ab; der ist dunkel
 * genug, um selbst zu wirken. */
.rahmen {
    border: 1px solid var(--linie);
    border-radius: 22px;
    overflow: hidden;
    background: var(--karte);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.rahmen img { display: block; width: 100%; height: auto; }

.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---- Zahlen als Gestaltungselement --------------------------------- */

.messwerte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--linie);
    border: 1px solid var(--linie);
    border-radius: 14px;
    overflow: hidden;
    margin: 26px 0;
}
.messwert { background: var(--karte); padding: 18px 20px; }
.messwert .zahl {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.messwert .was { font-size: 13px; color: var(--leise); margin-top: 3px; }

/* ---- Karten -------------------------------------------------------- */

.karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.karte {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: 14px;
    padding: 22px;
}

/* ---- Grenzen ------------------------------------------------------- */

.grenze {
    border-left: 3px solid var(--warn);
    padding: 2px 0 2px 16px;
    margin: 0 0 18px;
}
.grenze strong { display: block; margin-bottom: 3px; }
.grenze span { color: var(--leise); }

/* ---- Cockpit-Streifen ---------------------------------------------- */

.streifen {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
}
.streifen .rahmen { flex: 0 0 160px; border-radius: 16px; }

/* ---- Beta ---------------------------------------------------------- */

.schritte { counter-reset: schritt; list-style: none; padding: 0; margin: 0 0 26px; }
.schritte li {
    counter-increment: schritt;
    position: relative;
    padding-left: 42px;
    margin-bottom: 16px;
}
.schritte li::before {
    content: counter(schritt);
    position: absolute;
    left: 0;
    top: -1px;
    width: 27px;
    height: 27px;
    border: 1px solid var(--akzent);
    border-radius: 50%;
    color: var(--akzent);
    font-size: 14px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.knopf {
    display: inline-block;
    background: var(--akzent);
    color: #06251a;
    font-weight: 700;
    text-decoration: none;
    padding: 13px 24px;
    border-radius: 11px;
}
.knopf:hover { filter: brightness(1.08); }

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

footer {
    border-top: 1px solid var(--linie);
    padding: 34px 0 46px;
    color: var(--leise);
    font-size: 14px;
}
footer a { color: var(--leise); }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
footer p { margin: 0 0 8px; }


/* ---- Klassen statt inline-Styles ------------------------------------ */
/* ⚠️ Diese fuenf Regeln standen als style="…" im HTML und wurden live von
 * der eigenen Content-Security-Policy blockiert (`style-src 'self'` erlaubt
 * keine Attribut-Styles). Lokal fiel es nicht auf: Der Vorschau-Server
 * schickt keine CSP, der ausliefernde Caddy schon. Die Seite sah deshalb im
 * Browser anders aus als in jeder Pruefung davor — Hero mit Trennlinie,
 * Heldbild ueber die volle Breite, drei fehlende Abstaende.
 * Die Regeln hierher zu holen ist die richtige Antwort; 'unsafe-inline' in
 * die CSP zu schreiben waere die bequeme. */

.hero { border-top: none; }

.heldbild {
    max-width: 300px;
    margin-top: 34px;
}

.abstand-oben { margin-top: 28px; }
.abstand-oben-klein { margin-top: 20px; }


/* ---- Am Telefon gelesen -------------------------------------------- */
/* Gemessen am 02.09.2026 auf 390×844 (iPhone 16): Die Seite war **14,8
 * Bildschirme** lang, und jeder der sieben Screenshots nahm mit 748 Punkten
 * fast einen ganzen davon ein. Wer die Seite ueberfliegen will, wischt dann an
 * sieben Vollbildern vorbei — und sieht Bild und zugehoerigen Text nie
 * gleichzeitig, weil beide zusammen zweimal den Bildschirm fuellen.
 *
 * ⚠️ Die Bilder werden deshalb *kleiner* statt breiter. Der Reflex am Telefon
 * ist, Inhalte auf die volle Breite zu ziehen; bei einem hochkanten
 * Telefon-Screenshot kauft man sich damit Hoehe ein, die man nicht hat. */

/* ⚠️ Der Kopf klebt oben — dann muss jeder Ankersprung um seine Hoehe
 * versetzt werden, sonst verschwindet die angesprungene Ueberschrift genau
 * darunter. Gilt auf jeder Breite, nicht nur am Telefon. */
section { scroll-margin-top: 78px; }

@media (max-width: 600px) {
    section { padding: 40px 0; }
    .hero { padding: 40px 0 36px; }

    /* Ein Screenshot von 552×1200 wird bei 250 Punkten Breite 543 hoch statt
     * 748 — knapp zwei Drittel Bildschirm. Damit steht die Ueberschrift des
     * Abschnitts noch mit im Bild. */
    .bild .rahmen,
    .heldbild { max-width: 250px; margin-left: auto; margin-right: auto; }

    /* ⚠️ 24 Punkte hohe Navigationslinks trifft am Telefon niemand
     * zuverlaessig; Apple nennt 44 als Mindestmass. Die Hoehe kommt ueber
     * Innenabstand, damit sich am Aussehen nichts aendert — der negative
     * Aussenabstand haelt die Zeile so hoch wie vorher. */
    .kopf nav { gap: 6px; }
    .kopf nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 9px;
        margin: -10px 0;
    }

    footer nav { gap: 4px; }
    footer nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 8px;
        margin: -11px -8px;
    }

    /* 12 Punkte sind auf Armlaenge zu wenig fuer ein Label ueber der
     * Ueberschrift. */
    .kicker { font-size: 13px; }
}


/* ---- Das Z vor dem Schriftzug -------------------------------------- */
/* ⚠️ Kein `gap` hier: Die Wortmarke ist `zeig<span>r</span>` — zwei
 * Flex-Kinder. Ein gap haette den Abstand auch zwischen „zeig" und „r"
 * gesetzt, und die Marke las sich als „zeig r". Der Abstand gehoert an das
 * Bild, nicht zwischen alle Kinder. */
.wortmarke { display: inline-flex; align-items: center; }
.marke-z { width: 26px; height: auto; display: block; margin-right: 9px; }
@media (max-width: 600px) { .marke-z { width: 23px; } }


/* ---- Hervorgehobener Hinweis im Fließtext -------------------------- */
/* Fuer die eine Sache, die man vor dem Kauf eines Adapters wissen muss.
 * Kein Warnton: Es ist Kaufberatung, keine Einschraenkung. */
.hinweis-block {
    border-left: 2px solid var(--akzent);
    padding: 2px 0 2px 15px;
    margin: 22px 0;
}