/* ==========================================================
   Runtime · getruntime.de
   Mobile first · Breakpoints 640 / 960 · keine Inline-Styles
   ========================================================== */

/* ---------- Schrift (selbst gehostet) ---------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/Inter-Regular.woff2") format("woff2")
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/Inter-Medium.woff2") format("woff2")
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2")
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/fonts/Inter-Bold.woff2") format("woff2")
}

/* ---------- Tokens ---------- */
:root {
    color-scheme: light dark;
    /* Action: the one colour for the main step */
    --action: #167239;
    --on-action: #FFFFFF;
    --action-pressed: #297D49;
    /* Petrol: data, routes, charts */
    --secondary: #186E86;
    --on-secondary: #FFFFFF;
    --secondary-track: rgba(24, 110, 134, 0.30);
    /* Neutral frame */
    --surface: #FFFFFF;
    --surface-raised: #F3F4F3;
    --feed-grey: #E4E7E6;
    --card: #FFFFFF;
    --text: #111412;
    --text-secondary: #5C635F;
    --border: #E3E5E3;
    /* Honey: celebrations only */
    --reward: #EAB532;
    --on-reward: #412805;
    --reward-tint: #FDEFCB;
    --on-reward-tint: #6C4302;
    --error: #B6322D;
    /* Pace colours on a route: slow to fastest */
    --pace-slow: #D63F33;
    --pace-medium: #A9520E;
    --pace-fast: #17603F;
    --pace-fastest: #0A3F2A;
    /* Calm map style (illustrations) */
    --map-bg: #F8FBF8;
    --map-green: #E1F0E4;
    --map-wood: #D3E8D8;
    --map-water: #E4F5FB;
    --map-water-line: #D3ECF5;
    --map-building: #F0F4F1;
    --map-road: #FFFFFF;
    --map-road-casing: #E8EEE9;
    --map-path: #D9E2DB;
    --map-route: #186E86;
    /* Card shadow in the tone of the text */
    --shadow-card: 0 6px 18px rgba(17, 20, 18, 0.08), 0 1px 3px rgba(17, 20, 18, 0.06);

    /* Seite */
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
    --gutter: 16px;
    --section: 64px;
    /* Telefon-Mockups: Skalierung der 402-px-App-Ansicht */
    --s: 0.716;
    --frame: #111412;
    --phone-shadow: 0 24px 60px rgba(17, 20, 18, 0.14);
    --phone-outline: transparent;
    --scrim: rgba(17, 20, 18, 0.35);
    /* Avatare */
    --av-a-bg: #FCE3EC;
    --av-a-fg: #8A2050;
    --av-b-bg: #ECE5FD;
    --av-b-fg: #4A2E8C;
    /* App-Icon (inline im Hero) */
    --i-bg: #F8FBF8;
    --i-block: #DCEEDF;
    --i-water: #D6ECF4;
    --i-minor: #FFFFFF;
    --i-casing: #E6ECE7;
    --i-road: #FFFFFF;
    --i-route: #186E86;
    --i-ring: #FFFFFF;
    --i-dot: #EAB532;
}

@media (prefers-color-scheme: dark) {
    :root {
        --action: #5CCB85;
        --on-action: #0B2011;
        --action-pressed: #56BD7C;
        --secondary: #82CAE3;
        --on-secondary: #011E28;
        --secondary-track: rgba(130, 202, 227, 0.25);
        --surface: #0B0C0B;
        --surface-raised: #1A1C1A;
        --feed-grey: #0B0C0B;
        --card: #1A1C1A;
        --text: #F1F3F1;
        --text-secondary: #A3AAA5;
        --border: #2A2D2A;
        --reward: #F3C443;
        --on-reward: #3B2301;
        --reward-tint: #432F07;
        --on-reward-tint: #F1D589;
        --error: #F47B74;
        --pace-slow: #E0574A;
        --pace-medium: #E48A3A;
        --pace-fast: #5FCB8E;
        --pace-fastest: #9BE6B8;
        --map-bg: #0E120F;
        --map-green: #13221A;
        --map-wood: #16281D;
        --map-water: #0C222B;
        --map-water-line: #0C222B;
        --map-building: #151A16;
        --map-road: #242B26;
        --map-road-casing: transparent;
        --map-path: #28302A;
        --map-route: #82CAE3;
        /* Dark mode lifts with surfaces, not shadows */
        --shadow-card: none;

        --frame: #2A2D2A;
        --phone-shadow: none;
        --phone-outline: var(--border);
        --av-a-bg: #431829;
        --av-a-fg: #F6BDD1;
        --av-b-bg: #271D48;
        --av-b-fg: #D3C6FB;
        --i-bg: #0E120F;
        --i-block: #13221A;
        --i-water: #0C222B;
        --i-minor: #1D231F;
        --i-casing: transparent;
        --i-road: #242B26;
        --i-route: #82CAE3;
        --i-ring: #0E120F;
        --i-dot: #F3C443;
    }
}

@media (min-width: 640px) {
    :root {
        --gutter: 24px;
        --s: 0.796;
    }
}

@media (min-width: 960px) {
    :root {
        --gutter: 32px;
        --section: 96px;
        --s: 0.8955;
    }
}

/* ---------- Basis ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 64px;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: clip;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: -0.013em;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 640px) {
    body {
        font-size: 17px;
        line-height: 26px;
    }
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: 2px;
}

::selection {
    background: var(--secondary-track);
}

.text a,
.faq-list a,
.legal a {
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.text a:hover,
.faq-list a:hover,
.legal a:hover {
    text-decoration-thickness: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: 8px;
    z-index: 100;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-card);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus-visible {
    transform: none;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ic {
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ic-24 {
    width: 24px;
    height: 24px;
}

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: calc(1120px + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: var(--section);
}

.section-top-0 {
    padding-top: 0;
}

.section-raised {
    background: var(--surface-raised);
}

.center {
    text-align: center;
}

.center .text {
    margin-inline: auto;
}

/* ---------- Typografie ---------- */
.display {
    font-size: clamp(40px, 7vw, 64px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.022em;
}

.h2 {
    font-size: clamp(28px, 4.2vw, 40px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.022em;
}

.h3 {
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    letter-spacing: -0.017em;
}

.lead {
    font-size: clamp(17px, 2vw, 20px);
    line-height: 1.45;
    letter-spacing: -0.013em;
    color: var(--text-secondary);
}

.eyebrow {
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--text-secondary);
}

.eyebrow+.h2 {
    margin-top: 8px;
}

.h2+.text {
    margin-top: 12px;
}

.text {
    max-width: 60ch;
}

.text+.text {
    margin-top: 16px;
}

.small-text {
    font-size: 13px;
    line-height: 18px;
    letter-spacing: -0.003em;
    color: var(--text-secondary);
}

/* ---------- Buttons & Chips ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    font-family: var(--font);
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: -0.011em;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms var(--ease-spring), background-color 120ms linear;
}

.btn:active {
    transform: scale(0.96);
    transition-duration: 120ms;
}

.btn-primary {
    height: 50px;
    padding: 0 24px;
    background: var(--action);
    color: var(--on-action);
}

.btn-primary:active {
    background: var(--action-pressed);
}

@media (hover: hover) {
    .btn-primary:hover {
        background: var(--action-pressed);
    }
}

.btn-sm {
    height: 44px;
    padding: 0 16px;
}

.btn-secondary {
    height: 44px;
    padding: 0 24px;
    background: var(--surface-raised);
    color: var(--text);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text);
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: -0.003em;
    white-space: nowrap;
}

.chip-reward {
    background: var(--reward-tint);
    color: var(--on-reward-tint);
}

.check-reward {
    color: var(--reward);
    stroke-width: 2.25;
}

/* ---------- Karten ---------- */
.card {
    background: var(--card);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
}

@media (prefers-color-scheme: dark) {
    .card {
        background: var(--surface-raised);
    }

    .section-raised .card {
        background: var(--surface);
    }
}

.card-grid {
    margin-top: 48px;
    display: grid;
    gap: 16px;
}

.card-grid-flush {
    margin-top: 0;
}

@media (min-width: 640px) {
    .card-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .card-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }

    .card-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 24px;
    }
}

.info-card {
    padding: 24px;
}

.info-card .h3 {
    margin-top: 16px;
}

.info-card p {
    margin-top: 8px;
    color: var(--text-secondary);
}

/* ---------- App-Icon & Marke ---------- */
.app-icon {
    display: block;
    flex: none;
    border-radius: 22.37%;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.app-icon img,
.app-icon svg {
    width: 100%;
    height: 100%;
}

.app-icon-24 {
    width: 24px;
    height: 24px;
}

.app-icon-32 {
    width: 32px;
    height: 32px;
}

.app-icon-64 {
    width: 64px;
    height: 64px;
}

.wordmark {
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 64px;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid transparent;
    transition: border-color 200ms linear;
}

.site-header.is-scrolled {
    border-bottom-color: var(--border);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 100%;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--text);
    text-decoration: none;
}

.site-nav {
    display: none;
}

@media (min-width: 960px) {
    .site-nav {
        display: block;
        margin-left: auto;
    }

    .site-nav ul {
        display: flex;
        gap: 8px;
    }

    .site-nav a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 12px;
        color: var(--text);
        text-decoration: none;
        font-size: 15px;
        line-height: 20px;
        font-weight: 500;
        text-underline-offset: 3px;
    }

    .site-nav a:hover {
        text-decoration: underline;
    }
}

/* ---------- Hero ---------- */
.hero {
    padding-block: 48px 64px;
}

@media (min-width: 960px) {
    .hero {
        padding-block: 96px;
    }
}

.hero-grid {
    display: grid;
    gap: 48px;
    align-items: center;
}

@media (min-width: 960px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 64px;
    }
}

.hero-text .display {
    margin-top: 24px;
}

.hero-text .lead {
    margin-top: 16px;
    max-width: 32ch;
}

.hero-text .actions {
    margin-top: 32px;
}

.facts {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-secondary);
}

.facts li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-visual {
    position: relative;
    width: calc(402px * var(--s));
    margin-inline: auto;
    padding-top: 48px;
}

.hero-icon {
    position: absolute;
    top: 0;
    left: -16px;
    z-index: 0;
    width: 96px;
    height: 96px;
}

.hero-visual .phone-wrap {
    z-index: 1;
}

@media (min-width: 960px) {
    .hero-icon {
        left: -64px;
        width: 120px;
        height: 120px;
    }
}

/* Inline-App-Icon */
.ia-bg {
    fill: var(--i-bg);
}

.ia-block {
    fill: var(--i-block);
}

.ia-water {
    stroke: var(--i-water);
}

.ia-minor {
    stroke: var(--i-minor);
}

.ia-casing {
    stroke: var(--i-casing);
}

.ia-road {
    stroke: var(--i-road);
}

.ia-route {
    stroke: var(--i-route);
    stroke-dasharray: 1 2;
    stroke-dashoffset: 0;
    animation: draw-r 560ms var(--ease-calm) 160ms both;
}

.ia-ring {
    fill: var(--i-ring);
}

.ia-dot {
    fill: var(--i-dot);
}

@keyframes draw-r {
    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* Park-und-Kanal-Band */
.band {
    height: 56px;
    overflow: hidden;
}

.band svg {
    width: 100%;
    height: 56px;
    max-width: none;
}

/* ---------- Karten-Illustrationen ---------- */
.map {
    width: 100%;
    height: 100%;
}

.m-bg {
    fill: var(--map-bg);
}

.m-green {
    fill: var(--map-green);
}

.m-wood {
    fill: var(--map-wood);
}

.m-bld {
    fill: var(--map-building);
}

.m-water {
    fill: none;
    stroke: var(--map-water);
    stroke-linecap: round;
}

.m-casing {
    fill: none;
    stroke: var(--map-road-casing);
    stroke-linecap: round;
}

.m-road {
    fill: none;
    stroke: var(--map-road);
    stroke-linecap: round;
}

.m-path {
    fill: none;
    stroke: var(--map-path);
    stroke-linecap: round;
}

.m-route {
    fill: none;
    stroke: var(--map-route);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.m-ring {
    fill: var(--map-bg);
}

.m-start {
    fill: var(--reward);
}

/* ---------- Split-Abschnitte ---------- */
.split {
    display: grid;
    gap: 48px;
    align-items: center;
}

.split-media {
    display: flex;
    justify-content: center;
    min-width: 0;
}

@media (min-width: 960px) {
    .split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 64px;
    }

    .split-media-first .split-media {
        order: -1;
    }
}

.feature-list {
    margin-top: 32px;
    display: grid;
    gap: 24px;
}

.feature-list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
}

.feature-list .ic {
    grid-row: span 2;
    width: 24px;
    height: 24px;
    color: var(--text);
}

.f-title {
    font-weight: 600;
}

.f-text {
    color: var(--text-secondary);
}

/* ---------- Telefon-Mockups ---------- */
.phone-wrap {
    position: relative;
    flex: none;
    width: calc(402px * var(--s));
    height: calc(874px * var(--s));
    margin-inline: auto;
}

.phone {
    position: absolute;
    top: 0;
    left: 0;
    width: 402px;
    height: 874px;
    transform: scale(var(--s));
    transform-origin: 0 0;
    border: 10px solid var(--frame);
    border-radius: 56px;
    overflow: hidden;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--phone-shadow);
    outline: 1px solid var(--phone-outline);
    font-family: var(--font);
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.013em;
    text-align: left;
}

.island {
    position: absolute;
    top: 12px;
    left: 50%;
    z-index: 6;
    width: 124px;
    height: 36px;
    margin-left: -62px;
    border-radius: 999px;
    background: #000;
}

.screen {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.statusbar {
    position: relative;
    z-index: 5;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
}

.statusbar-on-scrim {
    color: #FFFFFF;
}

.sb {
    width: 66px;
    height: 12px;
}

/* 8.1 Lauf-Screen */
.run-screen {
    display: flex;
    flex-direction: column;
    background: var(--surface);
}

.run-map {
    position: absolute;
    inset: 0;
    opacity: 0.4;
}

.run-top {
    position: relative;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    height: 44px;
    padding: 0 16px;
}

.run-title {
    text-align: center;
    font-size: 16px;
    line-height: 21px;
    font-weight: 600;
}

.run-body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gps-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--action);
}

.run-dist {
    margin-top: 16px;
    font-size: 96px;
    line-height: 96px;
    font-weight: 700;
    letter-spacing: -0.022em;
}

.run-unit {
    margin-top: 4px;
    color: var(--text-secondary);
}

.run-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
    margin-top: 48px;
    padding: 0 32px;
    text-align: center;
}

.run-cols b {
    display: block;
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.022em;
}

.run-cols span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-secondary);
}

.run-foot {
    position: relative;
    display: flex;
    justify-content: center;
    padding-bottom: 64px;
}

.pause-btn {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--action);
    color: var(--on-action);
}

.pause-ic {
    width: 32px;
    height: 32px;
}

/* 8.2 Feed */
.feed-screen {
    background: var(--feed-grey);
}

.feed-head {
    padding: 0 16px;
}

.feed-tools {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    height: 44px;
}

.bell {
    position: relative;
}

.bell::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--error);
}

.feed-title {
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    letter-spacing: -0.022em;
}

.feed-list {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.post {
    background: var(--card);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    padding: 16px;
    text-align: left;
    letter-spacing: -0.013em;
}

.post-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
}

.av-a {
    background: var(--av-a-bg);
    color: var(--av-a-fg);
}

.av-b {
    background: var(--av-b-bg);
    color: var(--av-b-fg);
}

.post-name {
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
}

.post-time,
.post-meta {
    font-size: 13px;
    line-height: 18px;
    color: var(--text-secondary);
}

.post-dist {
    margin-top: 16px;
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 40px;
    line-height: 44px;
    font-weight: 700;
    letter-spacing: -0.022em;
}

.post-unit {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -0.017em;
}

.post-title {
    margin-top: 4px;
    font-size: 17px;
    line-height: 22px;
    font-weight: 600;
}

.post-title+.post-meta {
    margin-top: 4px;
}

.post-map {
    margin-top: 12px;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    overflow: hidden;
}

.post-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    line-height: 20px;
    color: var(--text-secondary);
}

.ic-liked {
    fill: var(--action);
    stroke: var(--action);
}

.tabbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    height: 83px;
    padding-bottom: 34px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
}

.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    line-height: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.tab-ic {
    display: grid;
    place-items: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 999px;
}

.tab-active {
    color: var(--text);
}

.tab-active .tab-ic {
    background: var(--surface-raised);
}

/* Feed-Karten ohne Telefon */
.feed-stack {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    padding: 24px 16px;
    display: grid;
    gap: 16px;
    background: var(--feed-grey);
    border-radius: 16px;
}

@media (min-width: 640px) {
    .feed-stack {
        padding: 32px;
    }
}

@media (prefers-color-scheme: dark) {
    .feed-stack {
        background: var(--surface-raised);
    }

    .feed-stack .post {
        background: var(--surface);
    }
}

/* 8.3 Sichtbarkeit */
.vis-screen {
    background: var(--surface);
}

.vis-bg {
    position: absolute;
    inset: 0;
}

.scrim {
    position: absolute;
    inset: 0;
    background: var(--scrim);
}

.sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px 48px;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
}

.grip {
    width: 36px;
    height: 5px;
    border-radius: 999px;
    background: var(--border);
}

.sheet-icon {
    display: grid;
    place-items: center;
    margin-top: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--surface-raised);
}

.sheet-title {
    margin-top: 16px;
    max-width: 280px;
    text-align: center;
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    letter-spacing: -0.017em;
}

.group {
    margin-top: 24px;
    width: 100%;
    background: var(--surface-raised);
    border-radius: 12px;
    overflow: hidden;
}

.vis-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 8px 16px;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font-size: 15px;
    line-height: 20px;
    -webkit-tap-highlight-color: transparent;
}

.vis-row+.vis-row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 0;
    height: 1px;
    background: var(--border);
}

.vis-row:focus-visible {
    outline-offset: -2px;
    border-radius: 12px;
}

.vis-label small {
    display: block;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-secondary);
}

.switch {
    position: relative;
    flex: none;
    width: 51px;
    height: 31px;
    border-radius: 999px;
    background: var(--border);
    transition: background-color 200ms var(--ease-calm);
}

.switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(17, 20, 18, 0.2);
    transition: transform 200ms var(--ease-calm);
}

.vis-row[aria-pressed="true"] .switch {
    background: var(--action);
}

.vis-row[aria-pressed="true"] .switch::after {
    transform: translateX(20px);
}

.sheet-note {
    align-self: stretch;
    margin-top: 8px;
    padding: 0 16px;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary);
}

.sheet-btn {
    display: grid;
    place-items: center;
    width: 100%;
    height: 50px;
    margin-top: 24px;
    border-radius: 999px;
    background: var(--action);
    color: var(--on-action);
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: -0.011em;
}

/* 8.4 Wochenziel */
.goal-wrap {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    display: grid;
    gap: 16px;
}

.goal-card {
    padding: 24px;
}

.goal-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.goal-ring-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ring {
    position: relative;
    width: 160px;
    height: 160px;
}

.ring svg {
    width: 160px;
    height: 160px;
}

.ring circle {
    fill: none;
    stroke-width: 12;
    stroke-dasharray: 84 360;
}

.ring-track circle {
    stroke: var(--secondary-track);
}

.ring-fill circle {
    stroke: var(--secondary);
}

.js .ring-fill circle {
    stroke-dasharray: 0 360;
}

.js .ring.is-filled .ring-fill circle {
    stroke-dasharray: 84 360;
    transition: stroke-dasharray 320ms var(--ease-calm);
}

.js .ring.is-filled .ring-fill circle:nth-child(2) {
    transition-delay: 40ms;
}

.js .ring.is-filled .ring-fill circle:nth-child(3) {
    transition-delay: 80ms;
}

.ring-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ring-num {
    font-size: 56px;
    line-height: 60px;
    font-weight: 700;
    letter-spacing: -0.022em;
}

.ring-of {
    font-size: 13px;
    line-height: 18px;
    color: var(--text-secondary);
}

.goal-caption {
    margin-top: 12px;
    font-size: 15px;
    line-height: 20px;
}

.week {
    display: grid;
    grid-template-columns: repeat(7, 24px);
    gap: 8px;
}

.week li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--text-secondary);
}

.day-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border);
}

.day-dot.is-run {
    background: var(--secondary);
}

.goal-done {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.goal-done-note {
    font-size: 13px;
    line-height: 18px;
    color: var(--text-secondary);
}

/* 8.5 Teilen */
.share-row {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    gap: 24px;
}

.share-card,
.sticker {
    position: relative;
    flex: none;
    width: 216px;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    text-align: left;
}

.share-card {
    background: var(--card);
    box-shadow: var(--shadow-card);
}

.share-inner,
.sticker-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.share-map {
    flex: 1;
    min-height: 0;
}

.share-info {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 16px;
}

.share-dist {
    font-size: 32px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: -0.022em;
}

.share-meta {
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    color: var(--text-secondary);
}

.share-mark {
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sticker {
    display: none;
    background-color: var(--surface);
    background-image: conic-gradient(var(--surface-raised) 25%, transparent 0 50%, var(--surface-raised) 0 75%, transparent 0);
    background-size: 16px 16px;
}

.sticker-route {
    flex: 1;
    min-height: 0;
    width: 100%;
}

@media (min-width: 640px) {
    .sticker {
        display: block;
    }
}

@media (prefers-color-scheme: dark) {
    .share-card {
        background: var(--surface-raised);
    }
}

/* ---------- Berlin ---------- */
.berlin-map {
    width: 100%;
    aspect-ratio: 8 / 5;
    border-radius: 16px;
    overflow: hidden;
}

/* ---------- Fragen ---------- */
.faq {
    max-width: calc(720px + 2 * var(--gutter));
}

.faq-list {
    margin-top: 32px;
    border-top: 1px solid var(--border);
}

.faq-list details {
    border-bottom: 1px solid var(--border);
}

.faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding-block: 16px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary .ic {
    color: var(--text-secondary);
    transition: transform 200ms var(--ease-calm);
}

.faq-list details[open] summary .ic {
    transform: rotate(45deg);
}

.faq-list details p {
    max-width: 60ch;
    padding-bottom: 24px;
    color: var(--text-secondary);
}

/* ---------- Abschluss ---------- */
.beta-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
}

@media (min-width: 640px) {
    .beta-card {
        padding: 64px 48px;
    }
}

.beta-card .h2 {
    margin-top: 24px;
}

.beta-card .text {
    margin-top: 12px;
}

.beta-card .btn {
    margin-top: 32px;
}

/* ---------- Kontaktformular ---------- */
.contact-form,
.form-done {
    width: 100%;
    max-width: 480px;
    margin-top: 32px;
    text-align: left;
}

/* Spam protection needs JS, so the form only appears with it */
html:not(.js) .contact-form {
    display: none;
}

.no-js-note {
    margin-top: 24px;
}

.segments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.segments label {
    position: relative;
}

.segments input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.segments span {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text);
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: -0.009em;
    white-space: nowrap;
    transition: background-color 120ms linear, color 120ms linear;
}

@media (prefers-color-scheme: dark) {
    .segments span {
        background: var(--surface);
    }
}

.segments input:checked+span {
    background: var(--text);
    color: var(--surface);
}

.segments input:focus-visible+span {
    outline: 2px solid var(--action);
    outline-offset: 2px;
}

.field {
    margin-top: 20px;
}

.field label {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
}

.optional {
    font-weight: 400;
    color: var(--text-secondary);
}

.field input,
.field textarea {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    line-height: 24px;
    transition: border-color 120ms linear;
}

.field textarea {
    min-height: 120px;
    resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
    border-color: var(--action);
    outline: 1px solid var(--action);
    outline-offset: 0;
}

.field [aria-invalid="true"] {
    border-color: var(--error);
}

.field-error {
    margin-top: 6px;
    font-size: 13px;
    line-height: 18px;
    color: var(--error);
}

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form .btn {
    width: 100%;
    margin-top: 24px;
}

.contact-form .btn[aria-busy="true"] {
    opacity: 0.6;
    pointer-events: none;
}

.form-status:not(:empty) {
    margin-top: 12px;
    font-size: 15px;
    line-height: 20px;
    color: var(--error);
}

.form-note {
    margin-top: 16px;
}

.form-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.form-done {
    padding: 20px;
    border-radius: 12px;
    background: var(--surface-raised);
    font-weight: 600;
    text-align: center;
}

/* Focus only moves here so screen readers announce the result */
.form-done:focus {
    outline: none;
}

@media (prefers-color-scheme: dark) {
    .form-done {
        background: var(--surface);
    }
}

/* ---------- Footer ---------- */
.site-footer {
    padding-block: 48px;
    background: var(--surface-raised);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 18px;
    letter-spacing: -0.003em;
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
}

.footer-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.footer-wordmark {
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.footer-links a:hover {
    text-decoration-thickness: 2px;
}

.footer-copy {
    margin-top: 16px;
}

/* ---------- Rechtliche Seiten ---------- */
.legal {
    max-width: 680px;
    margin-inline: auto;
    padding-block: 64px;
}

.legal h2 {
    margin-top: 48px;
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    letter-spacing: -0.017em;
}

.legal p {
    margin-top: 12px;
    max-width: 60ch;
}

.legal-list {
    margin-top: 12px;
    padding-left: 24px;
    list-style: disc;
}

.legal-list li+li {
    margin-top: 4px;
}

.legal-stand {
    color: var(--text-secondary);
}

.legal p.legal-stand {
    margin-top: 48px;
}

/* ---------- Erscheinen beim Scrollen (nur mit JS) ---------- */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(8px);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: opacity 320ms var(--ease-calm), transform 320ms var(--ease-calm);
}

.js [data-reveal].d1 {
    transition-delay: 40ms;
}

.js [data-reveal].d2 {
    transition-delay: 80ms;
}

.js [data-reveal].d3 {
    transition-delay: 120ms;
}

.js [data-reveal].d4 {
    transition-delay: 160ms;
}

.js [data-reveal].d5 {
    transition-delay: 200ms;
}

/* ---------- Reduzierte Bewegung: alles steht, nur Blenden ---------- */
@media (prefers-reduced-motion: reduce) {
    .ia-route {
        animation: none;
        stroke-dashoffset: 0;
    }

    .js [data-reveal],
    .js [data-reveal].is-visible {
        transform: none;
    }

    .js .ring-fill circle,
    .js .ring.is-filled .ring-fill circle {
        stroke-dasharray: 84 360;
        transition: none;
    }

    .btn,
    .btn:active {
        transform: none;
        transition: background-color 120ms linear;
    }

    .switch,
    .switch::after,
    .faq-list summary .ic {
        transition: none;
    }
}