/* ============================================================================
   App-Landingpages, Gestaltung "Schweizer Werkstatt"
   ----------------------------------------------------------------------------
   Papier, Tinte, ein Akzent. Strenges Raster, Haarlinien, keine Karten,
   keine Verlaeufe, keine Schatten, keine runden Ecken.

   Ersetzt shared/app-landing.css 1:1 - dasselbe Klassen-Vokabular, nur eine
   andere Welt. Kein Markup der sechs App-Seiten wurde angefasst. Zurueck geht
   es, indem man den <link> in den sechs index.html wieder auf
   /shared/app-landing.css zeigen laesst.

   Die Akzentfarbe kommt weiterhin pro Seite aus dem inline <style> :root
   (--accent / --accent-2). Die Form ist bei allen sechs identisch, die Farbe
   bleibt die der jeweiligen App - Pendlerblick blau, Dozmal violett usw.
   ============================================================================ */

:root { --accent: #E23C1B; --accent-2: #ff7a3d; --tint-deep: #14120F; }

/* ---------- Papier-Welt: faerbt auch die Nav aus theme.js um ----------
   html[data-theme] ist hoeher spezifiziert als das [data-theme] aus theme.js
   und gewinnt darum unabhaengig von der Ladereihenfolge. */
html[data-theme] {
    --sw-paper:   #F4F1EA;
    --sw-paper-2: #EEEAE0;
    --sw-ink:     #14120F;
    --sw-ink-2:   #57534B;
    --sw-ink-3:   #8B867D;
    --sw-rule:    rgba(20,18,15,0.18);
    --sw-rule-2:  rgba(20,18,15,0.42);
    --sw-on-ink:  #F7F5F0;
    color-scheme: light;

    /* Satzspiegel der Leiste oben - gleiche Werte wie .wrap, damit die
       Marke oben genau ueber der Textspalte steht. */
    --nav-measure: 1180px;
    --nav-gutter:  clamp(20px, 5vw, 56px);

    /* Leiste volldeckend und ohne Milchglas. Durchscheinend wirkte sie ueber
       dem Papierkorn heller als die Seite - und Weichzeichner gehoert nicht
       in diese Welt. */
    --nav-tint: 100%;
    --nav-blur: none;

    --bg-primary:     var(--sw-paper);
    --bg-secondary:   var(--sw-paper-2);
    --bg-card:        var(--sw-paper);
    --text-primary:   var(--sw-ink);
    --text-secondary: var(--sw-ink-2);
    --text-muted:     var(--sw-ink-3);
    --border-color:   var(--sw-rule);
    --border-hover:   var(--sw-rule-2);
}

html[data-theme="apple-dark"],
html[data-theme="dark"] {
    --sw-paper:   #131210;
    --sw-paper-2: #1B1916;
    --sw-ink:     #F2EEE5;
    --sw-ink-2:   #A9A49A;
    --sw-ink-3:   #7B766D;
    --sw-rule:    rgba(242,238,229,0.20);
    --sw-rule-2:  rgba(242,238,229,0.44);
    --sw-on-ink:  #131210;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    html[data-theme="apple"] {
        --sw-paper:   #131210;
        --sw-paper-2: #1B1916;
        --sw-ink:     #F2EEE5;
        --sw-ink-2:   #A9A49A;
        --sw-ink-3:   #7B766D;
        --sw-rule:    rgba(242,238,229,0.20);
        --sw-rule-2:  rgba(242,238,229,0.44);
        --sw-on-ink:  #131210;
        color-scheme: dark;
    }
}

/* theme.js legt Farbverlaufs-Orbs und einen zweiten Footer an. Beides
   gehoert nicht in diese Welt. */
.theme-bg-glow { display: none !important; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    /* Helvetica Neue ist auf macOS/iOS der echte Schweizer Grotesk und kostet
       nichts - kein Webfont, kein externer Aufruf. */
    font-family: "Helvetica Neue", Helvetica, Inter, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: var(--sw-ink);
    background-color: var(--sw-paper);
    line-height: 1.55;
    overflow-x: hidden;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

/* Papierkorn als data-URI, kein externer Aufruf. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="apple-dark"] body::before,
html[data-theme="dark"] body::before { opacity: 0.05; }
@media (prefers-color-scheme: dark) {
    html[data-theme="apple"] body::before { opacity: 0.05; }
}

body > * { position: relative; z-index: 1; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
section { position: relative; }

.mono, .hero-meta b, .step .num, .mode .tagn {
    font-variant-numeric: tabular-nums;
}

/* ============================ HERO ============================
   Kein zentrierter Farbverlauf mehr, sondern linksbuendig auf Papier -
   Haarlinie oben, Icon klein, Zeile fuer Zeile nach unten. */
.hero {
    background: none;
    color: var(--sw-ink);
    text-align: left;
    padding: clamp(46px, 7vw, 88px) 0 0;
    overflow: visible;
}
.hero .wrap { border-top: 1px solid var(--sw-rule-2); padding-top: clamp(34px, 5vw, 64px); }

.hero picture { display: block; }
.hero picture .hero-icon, .hero .hero-icon {
    display: block;
    margin-left: 0;
    margin-right: 0;
}
.hero-icon {
    width: clamp(56px, 7vw, 76px);
    height: clamp(56px, 7vw, 76px);
    /* Das App-Icon ist das Werkstueck selbst - es behaelt seine iOS-Rundung. */
    border-radius: 22%;
    box-shadow: none;
    margin-bottom: clamp(24px, 3.5vw, 38px);
}

.hero h1 {
    font-size: clamp(44px, 8.6vw, 112px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.95;
    max-width: 12ch;
    text-wrap: balance;
}
.hero .tag {
    margin-top: clamp(16px, 2.4vw, 26px);
    font-size: clamp(17px, 2.1vw, 24px);
    font-weight: 500;
    color: var(--sw-ink);
    max-width: 26ch;
    text-wrap: balance;
}
.hero .lede {
    max-width: 56ch;
    margin: 16px 0 0;
    color: var(--sw-ink-2);
    font-size: clamp(15px, 1.6vw, 17px);
}

/* ---------- Aktionen ---------- */
.cta-row {
    margin-top: clamp(26px, 3.6vw, 40px);
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.btn-appstore { display: inline-flex; line-height: 0; }
.btn-appstore img { height: 48px; width: auto; display: block; }

/* Eigener Store-Knopf: rechteckig, Tinte auf Papier, Hover wird Akzent. */
.btn-store {
    display: inline-flex; align-items: center; gap: 11px;
    background: var(--sw-ink); color: var(--sw-paper);
    text-decoration: none;
    padding: 14px 22px;
    border: 1px solid var(--sw-ink);
    border-radius: 0;
    font-weight: 600; font-size: 15px;
    box-shadow: none;
    transition: background-color .18s, border-color .18s, color .18s;
}
.btn-store:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-store.soon {
    cursor: default;
    background: none; color: var(--sw-ink-3);
    border: 1px dashed var(--sw-rule-2);
}
.btn-store.soon:hover { background: none; color: var(--sw-ink-3); border-color: var(--sw-rule-2); }
.btn-store svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn-store small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; line-height: 1; }
.btn-store b { display: block; font-size: 15px; line-height: 1.15; margin-top: 3px; }

.btn-ghost {
    display: inline-flex; align-items: center;
    color: var(--sw-ink); text-decoration: none;
    padding: 14px 22px;
    border: 1px solid var(--sw-rule-2);
    border-radius: 0;
    font-weight: 600; font-size: 15px;
    transition: border-color .18s, color .18s;
}
.btn-ghost:hover { background: none; border-color: var(--accent); color: var(--accent); }
/* Einige Seiten setzen "Bald im App Store" als <span class="btn-ghost"> -
   also nicht klickbar. Das muss man sehen, sonst klickt man ins Leere. */
span.btn-ghost {
    border-style: dashed;
    color: var(--sw-ink-3);
    cursor: default;
}
span.btn-ghost:hover { border-color: var(--sw-rule-2); color: var(--sw-ink-3); }

/* ---------- Kennzahlenzeile: wie auf der Startseite ---------- */
/* Der Inhalt ist je nach App mal ein Wertepaar ("Daten ab 1940"), mal
   Fliesstext ("Echtzeit & Verspaetungen"). Darum linksbuendig und ohne
   Versalien - space-between wuerde ganze Saetze auseinanderreissen. */
.hero-meta {
    margin-top: clamp(38px, 6vw, 72px);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    justify-content: stretch;
    border-top: 1px solid var(--sw-rule);
    color: var(--sw-ink-3);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.hero-meta span {
    display: block;
    padding: 16px 22px 16px 0;
    border-right: 1px solid var(--sw-rule);
}
.hero-meta span:last-child { border-right: 0; }
.hero-meta span:not(:first-child) { padding-left: 22px; }
.hero-meta b {
    color: var(--sw-ink);
    font-weight: 600;
}

/* ==================== ABSCHNITTS-KOEPFE ==================== */
.sec { padding: clamp(60px, 8.5vw, 120px) 0; }

/* Kleine Versalien-Marke mit Haarlinie bis zum Rand. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-size: 11px;
}
.eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--sw-rule-2);
}
.sec h2 {
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.04;
    margin: clamp(26px, 4vw, 44px) 0 0;
    max-width: 20ch;
    text-wrap: balance;
}
.sec h2 + p {
    color: var(--sw-ink-3);
    max-width: 52ch;
    margin-top: 14px;
    font-size: clamp(15px, 1.6vw, 17px);
}
/* Schweizer Satz ist linksbuendig - auch dort, wo das Markup .center sagt. */
.center { text-align: left; }
.center h2 + p { margin-left: 0; margin-right: 0; }

/* ==================== RASTER: FEATURES / MODI / SCHRITTE ====================
   Fugenlos, nur Haarlinien. Hover fuellt die ganze Zelle mit dem Akzent. */
.grid, .modes, .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: clamp(38px, 5vw, 64px);
    border-top: 1px solid var(--sw-rule-2);
    border-left: 1px solid var(--sw-rule-2);
    text-align: left;
}
.feat, .mode, .step {
    position: relative;
    background: none;
    border: 0;
    border-right: 1px solid var(--sw-rule-2);
    border-bottom: 1px solid var(--sw-rule-2);
    border-radius: 0;
    padding: clamp(22px, 2.6vw, 30px);
    backdrop-filter: none;
    transition: background-color .18s, color .18s;
}
.feat:hover, .mode:hover, .step:hover {
    transform: none;
    background: var(--accent);
    color: #fff;
}
.feat:hover p, .mode:hover p, .step:hover p,
.feat:hover h3, .mode:hover h3, .step:hover h3,
.mode:hover .tagn { color: #fff; }

.feat .ic {
    width: 30px; height: 30px;
    border-radius: 0;
    display: grid; place-items: center;
    background: none;
    margin-bottom: clamp(30px, 4vw, 48px);
    color: var(--sw-ink);
}
/* Die Icon-SVGs im Markup setzen nur stroke-width, kein fill. Ohne
   fill:none laufen sie als schwarze Flaechen zu - auf den bunten Chips
   von frueher fiel das kaum auf, auf Papier sofort. */
.feat .ic svg { width: 26px; height: 26px; stroke: currentColor; fill: none; }
.feat:hover .ic { color: #fff; }

.feat h3, .step h3 {
    font-size: clamp(17px, 1.9vw, 21px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.mode h3 {
    font-size: clamp(18px, 2.1vw, 23px);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.feat p, .mode p, .step p {
    color: var(--sw-ink-2);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 9px;
}

.mode .tagn {
    display: block;
    font-size: 11px; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: clamp(26px, 3.4vw, 40px);
}
.mode.hl { border-color: var(--sw-rule-2); box-shadow: none; }
.mode.hl::after {
    content: "Empfohlen";
    position: absolute; top: clamp(22px, 2.6vw, 30px); right: clamp(22px, 2.6vw, 30px);
    font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--sw-paper); background: var(--sw-ink);
    padding: 4px 8px; border-radius: 0;
}
.mode.hl:hover::after { background: #fff; color: var(--accent); }

.step .num {
    width: auto; height: auto;
    border-radius: 0;
    display: block;
    font-size: 13px; font-weight: 400;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    color: var(--sw-ink-3);
    background: none;
    margin-bottom: clamp(26px, 3.4vw, 40px);
}
.step:hover .num { color: #fff; }

/* ==================== GALERIE ====================
   Bildschirmfotos bleiben scrollbar, aber ohne Schatten und ohne
   Rundung - jedes sitzt in einem duennen Rahmen wie ein Abzug. */
.gallery {
    display: flex;
    /* Fuge zwischen den Aufnahmen - vorher stiessen sie stumpf aneinander. */
    gap: clamp(12px, 1.6vw, 22px);
    overflow-x: auto;
    /* "safe center": Passt die Reihe ins Fenster, steht sie mittig. Passt sie
       nicht, faellt es auf linksbuendig zurueck - sonst waeren die ersten
       Bilder aus dem Scrollbereich hinausgeschoben und nicht erreichbar. */
    justify-content: safe center;
    /* Seitlicher Abstand wie im Satzspiegel, damit die Reihe beim Wischen
       nicht an der Fensterkante klebt. */
    padding: clamp(38px, 5vw, 64px) clamp(20px, 5vw, 56px) 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--sw-rule-2);
    margin-top: clamp(38px, 5vw, 64px);
    /* Luft zur naechsten Ueberschrift. Als Aussenabstand, damit die
       Bildlaufleiste direkt unter den Bildern bleibt und nicht darunter. */
    margin-bottom: clamp(56px, 7.5vw, 100px);
}
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-thumb { background: var(--sw-rule-2); border-radius: 0; }
.gallery img {
    flex: 0 0 auto;
    width: clamp(190px, 21vw, 244px);
    border-radius: 0;
    scroll-snap-align: center;
    box-shadow: none;
    border: 1px solid var(--sw-rule);
}

/* ==================== SPOTLIGHT ====================
   Bewusst asymmetrisch: schmale Bildspalte, breite Textspalte. */
.spot {
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: clamp(30px, 5vw, 72px);
    align-items: center;
    padding: clamp(46px, 6vw, 88px) 0;
    border-top: 1px solid var(--sw-rule);
}
.spot.rev .spot-txt { order: 2; }
.spot-img { display: flex; justify-content: flex-start; }
.spot.rev .spot-img { justify-content: flex-end; }
.spot-img img {
    width: clamp(200px, 24vw, 268px);
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--sw-rule);
}
.spot-txt h2 {
    font-size: clamp(24px, 3.6vw, 40px);
    font-weight: 700;
    letter-spacing: -0.028em;
    line-height: 1.06;
    text-wrap: balance;
}
.spot-txt p { color: var(--sw-ink-2); margin-top: 14px; font-size: clamp(15px, 1.6vw, 17px); }
.ticks { margin-top: 22px; display: grid; gap: 0; border-top: 1px solid var(--sw-rule); }
.ticks li {
    list-style: none;
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 15px;
    padding: 12px 0;
    border-bottom: 1px solid var(--sw-rule);
}
.ticks svg { flex: 0 0 auto; width: 17px; height: 17px; stroke: var(--accent); fill: none; margin-top: 3px; }

/* ==================== BAND ====================
   Volles Tintenfeld, rechteckig - die ruhige Zaesur im Scrollen. */
.band {
    background: var(--sw-ink);
    color: var(--sw-on-ink);
    border: 0;
    border-radius: 0;
    padding: clamp(44px, 6vw, 78px) clamp(24px, 4vw, 56px);
    text-align: left;
}
.band h2 {
    font-size: clamp(22px, 3.4vw, 38px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.08;
    max-width: 20ch;
    text-wrap: balance;
}
.band p {
    color: color-mix(in srgb, var(--sw-on-ink) 62%, transparent);
    max-width: 54ch;
    margin: 14px 0 0;
    font-size: clamp(15px, 1.6vw, 17px);
}

/* ==================== FAQ ==================== */
.faq { max-width: 820px; margin: clamp(38px, 5vw, 60px) 0 0; border-top: 1px solid var(--sw-rule-2); }
details {
    border: 0;
    border-bottom: 1px solid var(--sw-rule);
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    background: none;
}
details[open] { border-color: var(--sw-rule); }
summary {
    cursor: pointer;
    font-weight: 600;
    font-size: clamp(15px, 1.7vw, 18px);
    padding: 18px 0;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
    content: "+";
    color: var(--accent);
    font-size: 22px; font-weight: 400; line-height: 1;
    transition: transform .2s;
}
details[open] summary { color: var(--accent); }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--sw-ink-2); padding-bottom: 20px; font-size: 15px; max-width: 62ch; }

/* ==================== SCHLUSS-AUFRUF ====================
   Volles Akzentfeld, Text ausgespart - der lauteste Moment der Seite,
   und der einzige. */
.final {
    text-align: left;
    background: var(--accent);
    color: #fff;
    border-radius: 0;
    padding: clamp(52px, 7vw, 96px) clamp(24px, 4vw, 56px);
    margin-bottom: 0;
}
.final h2 {
    font-size: clamp(28px, 4.6vw, 56px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
    max-width: 16ch;
    text-wrap: balance;
}
.final p {
    color: rgba(255,255,255,.78);
    margin: 16px 0 clamp(26px, 3.4vw, 36px);
    max-width: 50ch;
    font-size: clamp(15px, 1.6vw, 17px);
}
.final .cta-row { justify-content: flex-start; }
.final .btn-store { background: #fff; color: var(--sw-ink); border-color: #fff; }
.final .btn-store:hover { background: var(--sw-ink); border-color: var(--sw-ink); color: #fff; }
.final .btn-store.soon { background: none; color: rgba(255,255,255,.85); border: 1px dashed rgba(255,255,255,.5); }
.final .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.final .btn-ghost:hover { border-color: #fff; color: #fff; }

/* ==================== FUSSNAVIGATION ==================== */
.subnav {
    text-align: left;
    padding: clamp(26px, 3.4vw, 40px) 0 clamp(52px, 7vw, 90px);
    border-top: 1px solid var(--sw-rule);
    margin-top: clamp(38px, 5vw, 64px);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
}
.subnav a {
    color: var(--sw-ink-3);
    text-decoration: none;
    margin: 0;
    font-size: 13px;
    border-bottom: 1px solid transparent;
}
.subnav a:hover { color: var(--accent); border-bottom-color: currentColor; }

/* ==================== SPEZIFITAETS-KORREKTUR ====================
   dark-override.css faerbt unter [data-theme^="apple"] pauschal body, h1/h2/h3,
   p und a ein - Spezifitaet (0,1,1) bzw. (0,2,0). Zwei Folgen:

   1. Eine schlichte Klasse wie .btn-ghost (0,1,0) verliert dagegen, egal wie
      spaet sie geladen wird.
   2. Eine EXPLIZITE Farbregel auf h2/p schlaegt immer die Vererbung - deshalb
      blieb die Schrift im Akzentfeld dunkel statt ausgespart.

   Darum werden hier alle Grundfarben mit html[data-theme] (0,1,1 / 0,2,1)
   noch einmal gesetzt. Ohne diesen Block ist die Seite kuehl statt warm und
   der Schluss-Aufruf unleserlich. */

html[data-theme] body {
    background-color: var(--sw-paper);
    color: var(--sw-ink);
}
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3 { color: var(--sw-ink); }
html[data-theme] p { color: var(--sw-ink-2); }

html[data-theme] .hero .tag { color: var(--sw-ink); }
html[data-theme] .hero .lede { color: var(--sw-ink-2); }
html[data-theme] .sec h2 + p { color: var(--sw-ink-3); }
html[data-theme] .hero-meta b { color: var(--sw-ink); }

html[data-theme] .feat h3,
html[data-theme] .mode h3,
html[data-theme] .step h3,
html[data-theme] .spot-txt h2 { color: var(--sw-ink); }
html[data-theme] .feat p,
html[data-theme] .mode p,
html[data-theme] .step p,
html[data-theme] .spot-txt p,
html[data-theme] details p { color: var(--sw-ink-2); }

/* Hover faerbt die ganze Zelle - dann muss auch die Schrift mit. */
html[data-theme] .feat:hover h3, html[data-theme] .feat:hover p,
html[data-theme] .mode:hover h3, html[data-theme] .mode:hover p,
html[data-theme] .step:hover h3, html[data-theme] .step:hover p { color: #fff; }

/* Tintenfeld und Akzentfeld: Schrift ausgespart.
   Der Nachbarschafts-Selektor .sec h2 + p (0,2,2) trifft auch die Absaetze in
   den farbigen Feldern und ist spezifischer als .final p (0,2,1) - darum hier
   dieselbe Form nachziehen. */
html[data-theme] .band h2 { color: var(--sw-on-ink); }
html[data-theme] .band p,
html[data-theme] .band h2 + p { color: color-mix(in srgb, var(--sw-on-ink) 62%, transparent); }
html[data-theme] .final h2 { color: #fff; }
html[data-theme] .final p,
html[data-theme] .final h2 + p { color: rgba(255,255,255,.78); }

html[data-theme] .btn-ghost { color: var(--sw-ink); }
html[data-theme] .btn-ghost:hover { color: var(--accent); }
html[data-theme] span.btn-ghost,
html[data-theme] span.btn-ghost:hover { color: var(--sw-ink-3); }

html[data-theme] .btn-store { color: var(--sw-paper); }
html[data-theme] .btn-store:hover { color: #fff; }
html[data-theme] .btn-store.soon,
html[data-theme] .btn-store.soon:hover { color: var(--sw-ink-3); }

html[data-theme] .subnav a { color: var(--sw-ink-3); }
html[data-theme] .subnav a:hover { color: var(--accent); }

html[data-theme] .final .btn-store { color: var(--sw-ink); }
html[data-theme] .final .btn-store:hover { color: #fff; }
html[data-theme] .final .btn-ghost,
html[data-theme] .final .btn-ghost:hover { color: #fff; }

/* Fliesstext-Links innerhalb der Abschnitte duerfen den Akzent behalten,
   sollen aber als Link erkennbar sein statt nur farbig. */
html[data-theme] .sec p a:not([class]) { color: var(--accent); border-bottom: 1px solid currentColor; text-decoration: none; }

/* ... nur nicht auf den farbigen Feldern. Dort IST der Akzent der Hintergrund,
   ein Akzent-Link verschwaende sich darin - auf dem Wetterrad war "im Browser
   oeffnen" blau auf blau und nur beim Markieren zu sehen. Also dieselbe
   ausgesparte Schrift wie der Absatz, und der Strich darunter macht den Link
   kenntlich. */
html[data-theme] .final p a:not([class]) {
    color: #fff;
    border-bottom-color: rgba(255,255,255,.5);
}
html[data-theme] .final p a:not([class]):hover { border-bottom-color: #fff; }
html[data-theme] .band p a:not([class]) {
    color: var(--sw-on-ink);
    border-bottom-color: color-mix(in srgb, var(--sw-on-ink) 50%, transparent);
}
html[data-theme] .band p a:not([class]):hover { border-bottom-color: var(--sw-on-ink); }

/* ==================== FOKUS ==================== */
a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .feat, .mode, .step, .btn-store, .btn-ghost, summary::after { transition: none; }
}

/* ==================== SCHMALERE FENSTER ==================== */
@media (max-width: 900px) {
    .grid, .modes, .steps { grid-template-columns: repeat(2, 1fr); }
    .spot { grid-template-columns: 1fr; gap: 28px; }
    .spot.rev .spot-txt { order: 0; }
    .spot.rev .spot-img { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .grid, .modes, .steps { grid-template-columns: 1fr; }
    .hero-meta { grid-auto-flow: row; }
    .hero-meta span {
        border-right: 0;
        border-bottom: 1px solid var(--sw-rule);
        padding-left: 0 !important;
    }
    .hero-meta span:last-child { border-bottom: 0; }
    .sec { padding: 54px 0; }
    .band, .final { padding-left: 22px; padding-right: 22px; }
}