/* Upp – Verkaufsseite (/, /beispiel, /danke auf useupp.com und demo.useupp.com). Design-System „Upp“ (10/2026): dieselben
   Tokens, Schriften und Bausteine wie die App – Instrument Sans, Kobalt für das, was Sie tun, die Strecke als Motiv.
   Kräftig über große Schrift und eine kräftige Strecke auf dem Papier, nicht über große Farbflächen; Kästen nur, wo man
   handelt; Etiketten in Satzschreibung; Zahlen in Tabellenziffern. Nachgebaute App-Ausschnitte (.frame) sind HTML/CSS in
   Lesegröße, keine Bilder. */

/* Schriften selbst ausgeliefert – kein Aufruf zu Google (Lizenz: fonts/LIZENZ.txt). unicode-range wie bei Google Fonts.
   Sie liegen unter /static/verkauf/, weil useupp.com nur diesen Pfad an die Demo-Instanz weiterreicht. */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Tokens wie in der App (static/app.css) – Text immer in *-ink auf *-tint, Text auf Kobalt immer --text-on-accent */
:root {
  --upp-ink: #15171A; --upp-blue: #2A45F5; --upp-blue-strong: #1A30C8; --upp-blue-ink: #2336C9; --upp-blue-tint: #E8ECFF;
  --bg: #F7F6F2; --surface: #FFFFFF; --surface-sunk: #FAF9F6; --line: #E3E1DB; --line-strong: #D2CFC7; --line-field: #8E8B83;
  --sel: #EEF1FF; --track: #FAF9F6; --stn: #8E8B83; --stn-dots: #C9C6BE;
  --text: #15171A; --text-2: #5A5852; --text-3: #6A6760; --text-on-accent: #FFFFFF;
  --ok: #0E9F6E;   --ok-ink: #0A6E4C;   --ok-tint: #E2F4EC;
  --wait: #E3A008; --wait-ink: #865700; --wait-tint: #FCF1D6; --on-wait: #2B1D00;
  --bad: #E0452E;  --bad-ink: #AE301D;  --bad-tint: #FCE6E1;
  --run: var(--upp-blue); --run-ink: var(--upp-blue-ink); --run-tint: var(--upp-blue-tint); --run-hatch: #B9C5F5;
  --plan: #8A94A3; --plan-ink: #5A5852; --plan-tint: #EEF0F3;
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-text);
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --r-bar: 4px; --r-s: 6px; --r-control: 8px; --r-m: 10px; --r-l: 14px; --r-pill: 999px;
  --focus: 0 0 0 3px #FFFFFF, 0 0 0 5px #2A45F5;
  --shadow-lift: 0 24px 48px -28px rgba(21, 23, 26, .35);
  --tap: 44px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111214; --surface: #1A1B1F; --surface-sunk: #151619; --line: #2A2C31; --line-strong: #3A3C42; --line-field: #6E6C66;
    --sel: #1E2450; --track: #151619; --stn: #6E6C66; --stn-dots: #3A3C42;
    --text: #F1F0EC; --text-2: #B9B7B0; --text-3: #9C9A93; --text-on-accent: #111214; /* Weiß auf hellem Kobalt: zu wenig */
    --upp-blue: #7088FF; --upp-blue-strong: #93A5FF; --upp-blue-ink: #A9B7FF; --upp-blue-tint: #1E2450;
    --ok-ink: #4FD3A6; --ok-tint: #0F3328; --wait-ink: #F2B84B; --wait-tint: #3A2B0C;
    --bad-ink: #FF8A7A; --bad-tint: #3D1A16; --run-hatch: #33408F;
    --plan-ink: #B9B7B0; --plan-tint: #232428;
    --focus: 0 0 0 3px #1A1B1F, 0 0 0 5px #7088FF;
    --shadow-lift: 0 24px 48px -28px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.55 var(--font-text); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; }
img, svg, figure, pre, table { max-width: 100%; }
a { color: var(--upp-blue); text-underline-offset: 3px; }
a:hover { color: var(--upp-blue-strong); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-s); }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: clamp(52px, 8vw, 96px); line-height: .94; letter-spacing: -.045em; hyphens: manual; }
h2 { font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -.035em; }
h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
p { margin: 0 0 12px; }
ul, ol { margin: 0; }
.small { font-size: 15px; }
.muted { color: var(--text-2); }
.eyebrow, .k { font: 700 14px/1.35 var(--font-text); color: var(--text-2); }
.mono { font: 13px/1.45 var(--font-mono); overflow-wrap: anywhere; }
.sr { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--surface); padding: 10px 14px; border-radius: var(--r-control); }
.skip:focus { top: 12px; }
.grow { flex: 1; }

/* Knöpfe: .primary ist die eine Hauptaktion, .btn die ruhige Nebenaktion */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 10px 16px;
  font: 700 15px/1.15 var(--font-text); color: var(--text); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-control); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--text); color: var(--text); }
.btn.primary { background: var(--upp-blue); border-color: var(--upp-blue); color: var(--text-on-accent); }
.btn.primary:hover { background: var(--upp-blue-strong); border-color: var(--upp-blue-strong); color: var(--text-on-accent); }
.btn.big { min-height: 52px; padding: 14px 22px; font-size: 17px; border-radius: var(--r-m); }
.btn .kurz { display: none; }

/* Navigation: breit Links und „Anmelden“, schmal ein Menü (nichts verschwindet ohne Ersatz) */
.nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.logo:hover { color: var(--text); }
.logo svg { width: 32px; height: 32px; flex: none; }
.logo span { font: 700 28px/1 var(--font-display); letter-spacing: -.03em; }
.links { display: flex; gap: 24px; }
.links a { color: var(--text-2); text-decoration: none; font-weight: 700; font-size: 15px; }
.links a:hover { color: var(--text); }
.nav-acts { display: flex; gap: 8px; align-items: center; }
.nav details { position: relative; }
.nav summary { list-style: none; }
.nav summary::-webkit-details-marker { display: none; }
.drop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; display: grid; min-width: 260px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-lift); }
.drop a { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 6px 12px; border-radius: var(--r-control);
  color: var(--text); text-decoration: none; font-weight: 700; }
.drop a:hover { background: var(--surface-sunk); }
.drop a span { font-weight: 400; font-size: 13px; color: var(--text-2); }
.drop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
details.menu { display: none; position: static; }
@media (max-width: 860px) {
  .links, details.login { display: none; }
  details.menu { display: block; }
  details.menu .drop { position: absolute; left: 0; right: 0; top: 100%; border-radius: 0 0 var(--r-l) var(--r-l); border-inline: 0; padding: 8px 16px 16px; }
}
@media (max-width: 400px) {
  .nav-in { gap: 10px; }
  .logo span { font-size: 24px; }
  .btn-demo .lang { display: none; }
  .btn-demo .kurz { display: inline; }
}

/* Abschnitte: Papier oder abgesetzt (.alt) – keine Farbflächen */
section { padding-block: 96px; }
.alt { background: var(--surface); border-block: 1px solid var(--line); }
.head { max-width: 760px; margin-bottom: 40px; display: grid; gap: 16px; }
.head p { color: var(--text-2); font-size: 20px; line-height: 1.45; margin: 0; }
.head .eyebrow { margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.split.links-bild { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.split .head { margin-bottom: 28px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.three > * { min-width: 0; }
.three h3 { margin-bottom: 8px; }
.three p { color: var(--text-2); margin: 0; }
.mehr { font-weight: 700; text-decoration: none; }
.mehr:hover { text-decoration: underline; }
.weiter { margin: 32px 0 0; }
.nachsatz { margin: 32px 0 0; font-size: 17px; max-width: 70ch; color: var(--text-2); }
.nachsatz b { color: var(--text); }

/* Einstieg: Versprechen links, Projektübersicht in Lesegröße rechts */
.hero { padding-block: 72px 96px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.hero h1 { margin: 20px 0 24px; }
.upp-name { font-size: 16px; color: var(--text); }
.upp-name b { color: var(--upp-blue); font-weight: 700; }
.lead { font-size: 20px; line-height: 1.45; color: var(--text-2); max-width: 32em; }
.lead b { color: var(--text); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.fine { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--text-2); }
.fine li { display: inline-flex; align-items: center; gap: 8px; }
.fine li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.bild-notiz { margin: 12px 0 0; font-size: 14px; color: var(--text-2); }
@media (max-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* Produktbild: ein Ausschnitt der App in einem Rahmen */
.fig { margin: 0; min-width: 0; }
.frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-lift);
  overflow: hidden; min-width: 0; font-size: 16px; line-height: 1.5; }
.frame-top { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; padding: 12px 18px; background: var(--surface-sunk);
  border-bottom: 1px solid var(--line); }
.frame-top .ref { font: 13px var(--font-mono); color: var(--text-3); }
.frame-top .titel { font: 700 16px/1.25 var(--font-display); letter-spacing: -.01em; margin: 0; }
.frame-top .demo-tag { margin-left: auto; font: 600 13px/1 var(--font-text); color: var(--text-3);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 5px 10px; white-space: nowrap; }
.frame-body { padding: 22px; display: grid; gap: 18px; min-width: 0; }
.frame .titel-gross { font: 700 26px/1.12 var(--font-display); letter-spacing: -.02em; margin: 0; }
.alt .frame { background: var(--bg); }
.alt .frame-top { background: var(--surface); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; border-radius: var(--r-pill);
  font: 700 13px/1.4 var(--font-text); white-space: nowrap; background: none; color: var(--plan-ink); }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--plan); flex: none; }
.pill.t-ok { color: var(--ok-ink); } .pill.t-ok::before { background: var(--ok); }
.pill.t-wait { padding: 3px 10px 3px 8px; background: var(--wait-tint); color: var(--wait-ink); } .pill.t-wait::before { background: var(--wait); }
.pill.t-bad { padding: 3px 10px 3px 8px; background: var(--bad-tint); color: var(--bad-ink); } .pill.t-bad::before { background: var(--bad); }
.pill.t-run { color: var(--run-ink); } .pill.t-run::before { background: var(--run); }
.pill.plain { padding: 3px 10px; background: var(--plan-tint); }
.pill.plain::before { display: none; }
.fake-btn { display: inline-flex; align-items: center; pointer-events: none; min-height: 34px; padding: 6px 12px; border-radius: var(--r-s);
  font: 700 14px/1.15 var(--font-text); background: var(--upp-blue); color: var(--text-on-accent); border: 1px solid var(--upp-blue); white-space: nowrap; }
.fake-btn.ghost { background: var(--surface); color: var(--text); border-color: var(--line-strong); }
.fake-btn.textlink { background: none; border-color: transparent; color: var(--upp-blue); padding-inline: 4px; }
.knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Alle Projekte (Einstieg) */
.projekte { list-style: none; margin: 0; padding: 0; }
.projekte li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 2px 14px; padding: 14px 18px; border-top: 1px solid var(--line); align-items: start; }
.projekte li:first-child { border-top: 0; background: var(--sel); }
.projekte .k { padding-top: 4px; }
.projekte b { font-weight: 700; font-size: 17px; min-width: 0; }
.projekte .satz { grid-column: 2 / -1; color: var(--text-2); font-size: 15px; }
.braucht { border-top: 1px solid var(--line); padding: 14px 18px 16px; display: grid; gap: 10px; }
.braucht-kopf { display: flex; align-items: baseline; gap: 10px; font: 700 20px/1.1 var(--font-display); letter-spacing: -.02em; }
.braucht-kopf span { color: var(--upp-blue); }
.braucht-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.braucht-zeile > span:first-child { min-width: 0; font-weight: 700; }
@media (max-width: 480px) {
  .projekte li { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 14px; }
  .projekte .k { grid-column: 1 / -1; padding: 0; }
  .projekte .satz { grid-column: 1 / -1; }
  .braucht-zeile { flex-wrap: wrap; }
}

/* Strecke: erledigt grün, jetzt ein Kobalt-Ring mit Hof, wartet gelb, offen grauer Ring, das Ziel eckig */
.route { list-style: none; margin: 4px 0; padding: 0; display: flex; }
.route li { flex: 1; position: relative; min-width: 0; padding-top: 32px; text-align: center; font: 400 13px/1.3 var(--font-text);
  color: var(--text-2); overflow-wrap: anywhere; }
.route li > i { position: absolute; top: 0; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: var(--surface); border: 4px solid var(--stn); z-index: 1; }
.route li:last-child > i { border-radius: var(--r-bar); }
.route li::after { content: ""; position: absolute; top: 9px; left: calc(50% + 15px); width: calc(100% - 30px); height: 4px;
  background: repeating-linear-gradient(90deg, var(--stn-dots) 0 4px, transparent 4px 8px); }
.route li:last-child::after { display: none; }
.route li.done > i { background: var(--ok); border-color: var(--ok); }
.route li.done::after { background: var(--ok); }
.route li.now > i { border: 5px solid var(--upp-blue); box-shadow: 0 0 0 5px var(--upp-blue-tint); }
.route li.wait > i { border: 5px solid var(--wait); box-shadow: 0 0 0 5px var(--wait-tint); }
.route li.now, .route li.wait { color: var(--text); font-weight: 700; }
.route li b { font-weight: inherit; }
.route-pos { display: none; }
.route.v { flex-direction: column; margin: 0; }
.route.v li { padding: 0 0 22px 36px; text-align: left; font-size: 16px; }
.route.v li > i { top: 0; left: 0; margin-left: 0; }
.route.v li::after { top: 26px; bottom: 2px; left: 9px; width: 4px; height: auto;
  background: repeating-linear-gradient(180deg, var(--stn-dots) 0 4px, transparent 4px 8px); }
.route.v li.done::after { background: var(--ok); }
.route li > i, .route li::after { transition: background-color .3s, border-color .3s, box-shadow .3s; }
.alt .route li > i, .frame .route li > i { background: var(--surface); }
@media (max-width: 400px) {
  .route:not(.v) li b { display: none; }
  .route:not(.v) li:not(.now) small { display: none; }  /* nur der Zusatz der aktuellen Station („läuft“) */
  .route-pos { display: block; margin: 6px 0 0; }
}

/* #ablauf – Name und Strecke auf dem Papier: U · P · P groß in Kobalt-Schrift, die sechs Schritte und das Ziel als kräftige
   Kobalt-Linie. Kein Farbfeld (Julian, 24.10.2026: „zuviel“) – kräftig über Schrift und Linie. */
.upp3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0 0 72px; }
.upp3 > div { min-width: 0; border-top: 2px solid var(--text); padding-top: 18px; }
.upp3 dt { font: 700 26px/1.1 var(--font-display); letter-spacing: -.02em; }
.upp3 .ini { display: block; font: 700 96px/.85 var(--font-display); letter-spacing: -.05em; margin-bottom: 12px; color: var(--upp-blue); }
.upp3 dd { margin: 10px 0 0; color: var(--text-2); }
.ablauf-strecke { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ablauf-strecke li { position: relative; padding: 48px 18px 0 0; min-width: 0; }
.ablauf-strecke li::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 6px; border-radius: 3px; background: var(--upp-blue); }
.ablauf-strecke li:last-child::before { display: none; }
.ablauf-strecke li::after { content: ""; position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg); border: 6px solid var(--upp-blue); box-sizing: border-box; }
.alt .ablauf-strecke li::after { background: var(--surface); }
.ablauf-strecke li:last-child::after { border-radius: var(--r-bar); background: var(--upp-blue); }
.ablauf-strecke .n { font: 700 14px/1 var(--font-text); font-variant-numeric: tabular-nums; color: var(--upp-blue-ink); }
.ablauf-strecke h3 { margin: 10px 0 6px; }
.ablauf-strecke p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); }

/* #so-gehts: jeder Schritt im Detail – aufklappbar, die Strecke bleibt oben */
.schritte details { border-top: 1px solid var(--line-strong); }
.schritte details:last-child { border-bottom: 1px solid var(--line-strong); }
.schritte summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 12px;
  align-items: center; padding: 18px 0; }
.schritte summary::-webkit-details-marker { display: none; }
.schritte summary::after { content: "+"; font: 400 28px/1 var(--font-text); color: var(--upp-blue); text-align: right; }
.schritte details[open] summary::after { content: "–"; }
.schritte .n { font: 700 14px/1 var(--font-text); font-variant-numeric: tabular-nums; color: var(--text-3); }
.schritte details p { margin: 0 0 22px 56px; color: var(--text-2); max-width: 64ch; }
.sticky-head { position: sticky; top: 112px; }

/* #branchen: fünf Projektarten, alle gleich groß, Bau zuletzt */
.uses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--text); }
.uses > div { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 4px; border-left: 1px solid var(--line-strong); }
.uses > div:first-child { padding-left: 0; border-left: 0; }
.uses > div::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 4px solid var(--upp-blue); margin-bottom: 6px; }
.uses > div[data-bau]::before { border-radius: var(--r-bar); }
.uses h3 { font-size: 20px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; }
.uses p { color: var(--text-2); font-size: 15px; margin: 0; hyphens: auto; -webkit-hyphens: auto; }
.uses .mehr { margin-top: auto; padding-top: 8px; font-size: 15px; }
@media (max-width: 1100px) {
  .uses { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .uses > div:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}

/* Häkchen und Grenzen */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { padding-left: 32px; position: relative; font-weight: 700; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok); }
.checks li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 5px; height: 9px; border: solid #FFFFFF;
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.checks li span { display: block; font-weight: 400; color: var(--text-2); font-size: 15px; }
.limits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.limits li { padding-left: 26px; position: relative; }
.limits li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 12px; height: 2px; border-radius: 1px; background: var(--text-2); }

/* Mail und Entwurf */
.mail-kopf { display: grid; gap: 2px; }
.mail-kopf .mono { color: var(--text-2); }
.mail-text { white-space: pre-wrap; font: 15px/1.6 var(--font-text); margin: 0; overflow-wrap: anywhere; }
.feld { border: 1px solid var(--line-field); border-radius: var(--r-control); padding: 12px 14px; background: var(--surface); }

/* #projektleitung: was Upp macht, was bei Ihnen bleibt */
.tabelle { margin: 4px 0 22px; border-top: 2px solid var(--text); font-size: 15px; }
.tabelle .row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, 1.2fr); gap: 24px; padding: 16px 0;
  border-bottom: 1px solid var(--line); align-items: start; }
.tabelle .row > b { font-size: 17px; }
.tabelle .row > span { color: var(--text-2); }
.tabelle .row > span:last-child { color: var(--text); }
.tabelle .head-row { font: 700 14px/1.35 var(--font-text); color: var(--text-2); padding-block: 14px; }
.tabelle .head-row > span:nth-child(2)::before, .tabelle .head-row > span:nth-child(3)::before { content: ""; display: inline-block;
  width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; vertical-align: 0; background: var(--upp-blue); }
.tabelle .head-row > span:nth-child(3)::before { background: var(--wait); }
.tabelle .head-row > span:last-child { color: var(--text-2); }
.nur-mobil { display: none; }

/* #ueberblick: der Überblick als Cockpit – Stand, Leitsatz, Strecke mit Daten, vier Kästen mit Ampel, wer dran ist und
   was in den nächsten vier Wochen kommt (wie ansicht.cockpit in der App) */
.cp { display: flex; flex-direction: column; gap: 18px; }
.cp-stand { margin: 0; }
.leitsatz { font: 700 26px/1.12 var(--font-display); letter-spacing: -.02em; margin: 0; }
.route li small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--text-2); }
.route li.now small { color: var(--run-ink); font-weight: 700; }
.cp-lage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--text);
  border-bottom: 1px solid var(--line-strong); }
.cp-k { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px 16px; }
.cp-k + .cp-k { box-shadow: inset 1px 0 0 var(--line-strong); }
.cp-k:first-child { padding-left: 0; }
.cp-k-kopf { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.cp-k-kopf i { width: 10px; height: 10px; border-radius: 50%; background: var(--plan); flex: none; }
.cp-k > b { font: 700 20px/1.15 var(--font-display); letter-spacing: -.015em; }
.cp-k > span:last-child { font-size: 15px; color: var(--text-2); }
.cp-k.t-ok i { background: var(--ok); } .cp-k.t-ok > b { color: var(--ok-ink); }
.cp-k.t-wait i { background: var(--wait); }
.cp-k.t-bad i { background: var(--bad); } .cp-k.t-bad > b { color: var(--bad-ink); }
.cp-zwei { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cp-dran { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border: 1px solid var(--line);
  border-radius: var(--r-m); background: var(--surface); }
.alt .cp-dran { background: var(--surface); }
.cp-next { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 0 0; }
.cp-titel { margin: 0; font: 700 18px/1.2 var(--font-display); letter-spacing: -.01em; }
.cp-zeile-kopf { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--text); }
.cp-zahl, .zahl { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--plan-tint); color: var(--text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.cp-zahl.sie { background: var(--upp-blue); color: var(--text-on-accent); }
.cp-auf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0;
  border-top: 1px solid var(--line); }
.cp-auf > span:first-child, .cp-n > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; font-size: 15px; }
.cp-auf small, .cp-n small { font-size: 13px; color: var(--text-2); }
.cp-leise { margin: 0; font-size: 14px; color: var(--text-2); }
.cp-n { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 10px 0;
  border-top: 1px solid var(--line-strong); }
.cp-n-tag { display: flex; flex-direction: column; font: 700 18px/1.1 var(--font-text); font-variant-numeric: tabular-nums; }
.cp-n-tag small { margin-top: 2px; font: 400 13px/1.3 var(--font-text); }
.cp-n .pill { justify-self: end; }
/* #branchen: „Auch fürs Kleine“ – nach den großen Projektarten, ein Absatz mit Link */
.klein { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 32px; margin-top: 36px;
  padding-top: 22px; border-top: 1px solid var(--line-strong); }
.klein h3 { font-size: 20px; margin-bottom: 8px; }
.klein p { margin: 0; max-width: 72ch; color: var(--text-2); font-size: 16px; }
.klein .mehr { font-size: 15px; white-space: nowrap; }
.needs { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.needs-kopf { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 6px; font: 700 20px/1.1 var(--font-display); letter-spacing: -.02em; }
.needs-kopf .zahl { color: var(--upp-blue); }
.needs-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 15px; }
.needs-kopf + .needs-zeile { border-top: 0; }
.needs-zeile > span { min-width: 0; }

/* Zeitplan: geplant gestrichelt, Briefing gestreift/gefüllt (gelb), beauftragt dunkel, läuft Kobalt bis heute, fertig grün */
.zp { --label: 132px; position: relative; display: grid; gap: 8px; margin-top: 20px; padding-bottom: 28px; font-size: 14px; }
.zp-row { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); align-items: center; min-height: 34px; }
.zp-row > b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; }
.zp-row > b small { display: block; font-weight: 400; color: var(--text-2); font-size: 13px; }
.spur { position: relative; height: 20px; background: var(--track); border-radius: var(--r-bar); }
.bar { position: absolute; top: 0; bottom: 0; border-radius: var(--r-bar); left: var(--von); width: var(--dauer); }
.bar.run { background: var(--text); }
.bar.done { background: var(--ok-ink); }
.bar.plan { background: transparent; border: 1.5px dashed var(--text-3); }
.bar.fenster { background: repeating-linear-gradient(135deg, var(--run-hatch) 0 3px, transparent 3px 8px), var(--run-tint); border: 1px solid var(--run); }
.bar.prep { background: repeating-linear-gradient(135deg, var(--wait-tint) 0 4px, var(--wait) 4px 6px, var(--wait-tint) 6px 9px); box-shadow: inset 0 0 0 1.5px var(--wait); }
.bar.prep-fertig { background: var(--wait); }
.bar.laeuft { background: linear-gradient(90deg, var(--run) 0 var(--fill, 0%), var(--run-tint) var(--fill, 0%) 100%); box-shadow: inset 0 0 0 1.5px var(--run); }
.zp-monate { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); font: 600 13px var(--font-text); font-variant-numeric: tabular-nums; color: var(--text-2); }
.zp-monate .quartal { display: none; }
.heute { position: absolute; top: 20px; bottom: 0; width: 2px; background: var(--bad); z-index: 1;
  left: calc(var(--label) + (100% - var(--label)) * var(--x)); }
.heute span { position: absolute; bottom: 0; left: -2px; padding: 1px 6px; border-radius: var(--r-bar); background: var(--bad-ink);
  color: var(--text-on-accent); font: 700 12px/1.4 var(--font-text); }
.herkunft { position: relative; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.legende { display: flex; gap: 6px 16px; flex-wrap: wrap; margin: 10px 0 0; font-size: 13px; color: var(--text-2); }
.legende span::before { content: ""; display: inline-block; width: 16px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; box-sizing: border-box; }
.legende .l-run::before { background: var(--text); }
.legende .l-done::before { background: var(--ok-ink); }
.legende .l-plan::before { border: 1.5px dashed var(--text-3); }
.legende .l-fenster::before { background: repeating-linear-gradient(135deg, var(--run-hatch) 0 2px, transparent 2px 5px), var(--run-tint); border: 1px solid var(--run); }
.legende .l-prep::before { background: repeating-linear-gradient(135deg, var(--wait-tint) 0 2px, var(--wait) 2px 4px); border: 1px solid var(--wait); }
.legende .l-prep-fertig::before { background: var(--wait); }
.legende .l-laeuft::before { background: linear-gradient(90deg, var(--run) 0 55%, var(--run-tint) 55% 100%); border: 1px solid var(--run); }
.zp.breit { --label: 172px; }
.zp.breit .spur { height: 24px; }
@media (max-width: 480px) {
  .zp { --label: 96px; }
  .zp.breit { --label: 124px; }
  .zp-row.extra { display: none; }
  .zp-monate .monat { display: none !important; }
  .zp-monate .quartal { display: grid; }
  .zp.mini { display: none; }
}

/* #firmen: die Statusseite auf dem Handy */
.phone { max-width: 320px; margin: 0 auto; border: 10px solid var(--upp-ink); border-radius: 36px; overflow: hidden; background: var(--bg); box-shadow: var(--shadow-lift); }
.phone-in { padding: 18px 14px 22px; display: grid; gap: 12px; font-size: 14px; }
.phone .titel { font: 700 20px/1.15 var(--font-display); letter-spacing: -.02em; margin: 0; }
.phone .karte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px; }
.phone .karte.dran { border: 2px solid var(--wait); }
.phone .karte b { display: block; margin-bottom: 2px; }
.phone .route li b { display: none; }
.phone .route-pos { display: block; margin: 4px 0 0; }
.upload { border: 2px dashed var(--line-field); border-radius: var(--r-m); padding: 12px; text-align: center; color: var(--text-2); }
.frage { border: 1px solid var(--line-field); border-radius: var(--r-pill); padding: 9px 14px; color: var(--text-2); background: var(--surface); }

/* #geld */
.geld { display: grid; gap: 16px; }
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.offer { border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; display: grid; gap: 6px; align-content: start; background: var(--surface); }
.offer .betrag { font: 700 26px/1.15 var(--font-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.findings li { position: relative; padding-left: 22px; }
.findings li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--wait); }
.findings li.warnung::before { background: var(--bad); }
.findings li.ok::before { background: var(--ok); }
.punkte3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.punkte3 h3 { margin-bottom: 4px; }
.punkte3 p { margin: 0; color: var(--text-2); }

/* Bis zur Abnahme (auf /beispiel) */
.woche { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 28px; padding-top: 18px; border-top: 1px solid var(--line); align-items: start; }
.woche .titel { font-weight: 700; margin-bottom: 10px; }
.pk-weg { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; padding: 0; font: 600 14px/1.3 var(--font-text); color: var(--text-2); }
.pk-weg li { display: flex; align-items: center; gap: 6px; }
.pk-weg li + li::before { content: "→"; margin-right: 8px; color: var(--text-3); }
.pk-weg b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; background: var(--line); color: var(--text-2); }
.pk-weg li.jetzt { color: var(--text); font-weight: 700; } .pk-weg li.jetzt b { background: var(--upp-blue); color: var(--text-on-accent); }
.pk-liste { list-style: none; margin: 0; padding: 0; }
.pk-liste li, .ab-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.pk-liste li:first-child { border-top: 0; }
.pk-liste li.ueber { background: var(--bad-tint); border-radius: var(--r-control); padding-inline: 10px; border-top-color: transparent; }
.pk-liste li.ueber + li { border-top-color: transparent; }
.pk-liste .nr, .ab-zeile .nr { font: 600 13px var(--font-text); font-variant-numeric: tabular-nums; color: var(--text-2); min-width: 22px; }
.pk-liste .txt, .ab-zeile .txt { min-width: 0; font-weight: 700; }
.pk-liste small, .ab-zeile small { display: block; font-weight: 400; color: var(--text-2); font-size: 13px; margin-top: 2px; }
.pk-liste li.ueber small b { color: var(--bad-ink); }
.pk-liste .pill { padding: 2px 8px; font-size: 13px; margin-right: 4px; }
.ab-teil { padding: 8px 0 4px; }
.ab-teil > .k { display: block; margin-bottom: 4px; color: var(--text); }
.ab-teil p { margin: 0; }
.ab-zeile { grid-template-columns: auto minmax(0, 1fr) auto auto; padding: 8px 0; }
.ab-zeile .txt { font-weight: 400; }
.ab-teil > .ab-zeile:nth-child(2) { border-top: 0; }
/* Foto zum Mangel bzw. Eintrag – nachgebaut, kein Bild: Himmel und Boden als Fläche */
.foto { width: 36px; height: 36px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: linear-gradient(170deg, color-mix(in srgb, var(--upp-blue) 35%, var(--surface)) 0 52%, color-mix(in srgb, var(--plan) 70%, var(--surface)) 52% 100%); }

/* /beispiel: Ablauf mit mitlaufender Strecke */
.ablauf { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.ablauf .route.v { position: sticky; top: 112px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 24px; min-width: 0; display: grid; gap: 8px; }
.alt .steps > li { background: var(--bg); }
.steps .n { font: 700 14px/1 var(--font-text); font-variant-numeric: tabular-nums; color: var(--upp-blue-ink); }
.steps h3 { font-size: 26px; }
.steps p { color: var(--text-2); margin: 0; }
.steps .frame { margin-top: 10px; box-shadow: none; }
.genehmigung dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.genehmigung dt { color: var(--text-2); }
.genehmigung dd { margin: 0; }
.punkte { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.punkte li { background: var(--surface-sunk); border-radius: var(--r-control); padding: 8px 12px; }
@media (max-width: 900px) {
  .ablauf { grid-template-columns: minmax(0, 1fr); }
  .ablauf .route.v { display: none; }
}

/* #demo und #pilot */
.demo-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(24px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: start; }
.demo-box .head { margin-bottom: 24px; }
.demo-box h3 { font-size: 18px; margin: 24px 0 12px; }
.demo-box .limits { font-size: 15px; color: var(--text-2); }
.form { display: grid; gap: 6px; min-width: 0; }
.pilot-form { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(20px, 3vw, 32px); }
.alt .pilot-form { background: var(--bg); }
.form label, .form legend { font: 700 14px/1.3 var(--font-text); color: var(--text-2); margin-top: 12px; }
.form .opt { font-weight: 400; }
.form input:not([type=radio]), .form select, .form textarea { font: 400 16px/1.4 var(--font-text); width: 100%; min-height: var(--tap);
  padding: 11px 12px; border: 1px solid var(--line-field); border-radius: var(--r-control); background: var(--surface); color: var(--text); }
.form input:not([type=radio]):hover, .form select:hover, .form textarea:hover { border-color: var(--text-2); }
.form textarea { line-height: 1.5; }
.form fieldset { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
.form legend { margin-top: 0; padding: 0; }
.wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.wahl label { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 8px 14px; border: 1px solid var(--line-field);
  border-radius: var(--r-m); background: var(--surface); font: 700 15px/1.2 var(--font-text); color: var(--text); cursor: pointer; }
.wahl label:has(input:checked) { border-color: var(--upp-blue); box-shadow: inset 0 0 0 1px var(--upp-blue); background: var(--run-tint); }
.wahl input { accent-color: var(--upp-blue); width: 18px; height: 18px; margin: 0; flex: none; }
.form button { margin-top: 20px; justify-self: start; }
.form .small { margin: 12px 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.angemeldet { background: var(--ok-tint); color: var(--text); border-radius: var(--r-m); padding: 14px 16px; margin-bottom: 16px; }
.wer { display: flex; align-items: center; gap: 14px; margin: 24px 0; }
.wer .avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--upp-blue); color: var(--text-on-accent);
  display: grid; place-items: center; font: 700 17px/1 var(--font-text); }
.wer b { display: block; }

/* Fragen */
.faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.faq details { border-top: 1px solid var(--line-strong); }
.faq details:last-of-type { border-bottom: 1px solid var(--line-strong); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 20px 0; font: 700 20px/1.3 var(--font-display); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 28px/1 var(--font-text); color: var(--upp-blue); flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details > p, .faq details > ul, .faq details > .vs { margin: 0 0 22px; color: var(--text-2); max-width: 68ch; }
.faq details > ul { display: grid; gap: 8px; }
.vs { display: grid; border-top: 1px solid var(--line); font-size: 15px; }
.vs .row { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.vs .row > b { color: var(--text); }
.vs .row > span:last-child { color: var(--text); font-weight: 700; background: var(--run-tint); border-radius: var(--r-s); padding: 2px 8px; }
.vs .head-row { font: 700 14px/1.35 var(--font-text); }
.vs .head-row > span:last-child { color: var(--run-ink); }

/* Danke */
.danke { max-width: 760px; padding-block: 72px 96px; }
.danke h1 { font-size: clamp(40px, 7vw, 64px); margin: 16px 0 20px; }
.danke h2 { font-size: 30px; margin: 40px 0 16px; }
.danke .steps > li { display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.danke .steps .n { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--upp-blue); color: var(--text-on-accent); font: 700 16px/1 var(--font-text); letter-spacing: 0; }
.danke .steps h3 { margin: 0; font-size: 20px; }
.danke .btn { margin-top: 8px; white-space: normal; text-align: center; }

/* Fuß */
.foot { border-top: 1px solid var(--line); }
.foot .wrap { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; padding-block: 32px 48px; font-size: 15px; }
.foot .logo svg { width: 22px; height: 22px; }
.foot .logo span { font-size: 20px; }
.foot a:not(.logo) { color: var(--text-2); text-decoration: none; }
.foot a:not(.logo):hover { color: var(--text); text-decoration: underline; }

/* Unter 900 px: zwei Spalten werden eine; die Strecke im Ablauf läuft senkrecht */
@media (max-width: 900px) {
  .split, .split.links-bild, .faq-grid, .demo-box { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sticky-head { position: static; }
  .cp-lage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-k:nth-child(odd) { padding-left: 0; box-shadow: none; }
  .cp-k:nth-child(even) { box-shadow: inset 1px 0 0 var(--line-strong); }
  .cp-k:nth-child(n+3) { border-top: 1px solid var(--line-strong); }
  .ablauf-strecke { grid-template-columns: minmax(0, 1fr); }
  .ablauf-strecke li { padding: 0 0 28px 50px; }
  .ablauf-strecke li::before { top: 26px; bottom: -2px; left: 11px; right: auto; width: 6px; height: auto; }
  .upp3 .ini { font-size: 64px; }
}

/* Unter 720 px: alle Raster einspaltig, nichts breiter als der Bildschirm */
@media (max-width: 720px) {
  section { padding-block: 64px; }
  .two, .three, .uses, .upp3, .offers, .woche, .cp-lage, .cp-zwei, .klein, .wahl { grid-template-columns: minmax(0, 1fr); }
  .cp-k, .cp-k:nth-child(even) { padding-left: 0; box-shadow: none; }
  .cp-k + .cp-k { border-top: 1px solid var(--line-strong); }
  .uses > div, .uses > div:nth-child(3n+1) { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line-strong); }
  .uses > div:first-child { border-top: 0; }
  .leitsatz { font-size: 22px; }
  .tabelle .row, .vs .row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .head-row { display: none !important; }
  .nur-mobil { display: block; margin-bottom: 2px; font-style: normal; }
  .lead, .head p { font-size: 18px; }
  .needs-zeile, .braucht-zeile { flex-wrap: wrap; }
  .schritte details p { margin-left: 0; }
  .upp3 { margin-bottom: 48px; gap: 20px; }
  .upp3 .ini { display: inline-block; font-size: 44px; margin: 0 12px 0 0; vertical-align: -3px; }
}
@media (max-width: 480px) {
  .pk-liste li { grid-template-columns: auto minmax(0, 1fr); }
  .pk-liste .fake-btn { grid-column: 2; justify-self: start; }
  .ab-zeile { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ab-zeile .fake-btn { grid-column: 2 / -1; justify-self: start; }
}

/* Bewegung: nur der Wechsel der Strecke beim Scrollen – bei reduzierter Bewegung gar keine */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}