/* Aerolaunch – öffentliche Seiten (Startseite, Funktionen, Rechtstexte), ab 0.19.
   Gestaltungsidee: Nacht über dem Flugplatz (Höhenblau mit Kartenlinien) für die Versprechen,
   helles Vorfeld für das Lesen, Signalorange nur für die eine Hauptaktion je Abschnitt.
   Das Produkt zeigt sich selbst: Startliste, Telefon und Bücher sind echtes HTML, keine Bilder. */

@font-face { font-family: "Barlow C"; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow C"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }

:root {
  --night: #0A2238;
  --night-2: #0E3A5C;
  --night-3: #154A73;
  --night-ink: #DCE7F2;
  --night-muted: #93A9C2;
  --paper: #F6F8FB;
  --haze: #EAF1F7;
  --ink: #0F1E33;
  --ink-2: #33455E;
  --muted: #56687F;
  --line: #D6DFE9;
  --sock: #FF5B14;
  --sock-ink: #0B1B2B;
  --sky: #2F78C4;
  --go: #1F8A4C;
  --amber: #F0A202;
  --cond: "Barlow C", "Arial Narrow", system-ui, sans-serif;
  --r: 22px;
  --e1: 0 1px 2px rgba(15, 30, 51, .05), 0 1px 0 rgba(15, 30, 51, .03);
  --e2: 0 1px 2px rgba(15, 30, 51, .05), 0 18px 40px -22px rgba(15, 30, 51, .32);
  --e3: 0 40px 90px -30px rgba(3, 12, 24, .7), 0 2px 8px rgba(3, 12, 24, .2);
  --chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.06' stroke-width='1.2'%3E%3Cpath d='M-60 700c120-50 210-12 300-80s170-190 310-176 230 110 370 54'/%3E%3Cpath d='M-60 750c130-50 230-8 330-76s180-200 330-184 240 120 300 84'/%3E%3Cpath d='M-60 800c150-46 260 0 380-70s190-214 360-196 220 128 240 96'/%3E%3Cpath d='M-60 850c160-40 290 8 420-64s200-226 380-206 200 134 180 110'/%3E%3Cpath d='M160 -40c-26 96 40 164 136 190s150 110 122 206'/%3E%3Cpath d='M230 -40c-22 88 46 148 134 172s142 106 112 220'/%3E%3Cpath d='M300 -40c-16 80 54 132 132 154s134 102 102 232'/%3E%3Ccircle cx='650' cy='260' r='52'/%3E%3Ccircle cx='650' cy='260' r='96'/%3E%3Ccircle cx='650' cy='260' r='144'/%3E%3Ccircle cx='650' cy='260' r='196'/%3E%3C/g%3E%3C/svg%3E");
}

body.st [hidden] { display: none !important; }
body.st { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.st ::selection { background: rgba(255, 91, 20, .25); }
.st-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 600px) { .st-wrap { padding: 0 18px; } }
.st em { font-style: normal; }

/* ---------- Knöpfe ---------- */
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 24px; border-radius: 14px; border: 0; cursor: pointer;
  font: 700 17px/1 var(--wide); font-stretch: 108%; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: transform .12s, box-shadow .15s, background .15s, color .15s, filter .15s; }
.st-btn span[aria-hidden] { transition: transform .15s; }
.st-btn:hover span[aria-hidden] { transform: translateX(3px); }
.st-btn:active { transform: translateY(1px); }
.st-btn-go { background: linear-gradient(180deg, #FF7433, var(--sock) 55%, #F25210); color: var(--sock-ink);
  box-shadow: inset 0 0 0 2px rgba(11, 27, 43, .9), inset 0 3px 0 rgba(255, 255, 255, .32), 0 14px 30px -12px rgba(255, 91, 20, .85); }
.st-btn-go:hover { filter: saturate(1.08) brightness(1.03); box-shadow: inset 0 0 0 2px rgba(11, 27, 43, .9), inset 0 3px 0 rgba(255, 255, 255, .32), 0 18px 36px -12px rgba(255, 91, 20, .95); }
.st-btn-go[disabled] { background: #E6ECF2; color: #8A9AAE; cursor: not-allowed; box-shadow: inset 0 0 0 1.5px #D3DCE6; filter: none; }
.st-btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(15, 30, 51, .25); }
.st-btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(15, 30, 51, .6); background: rgba(15, 30, 51, .03); }
.st-hero .st-btn-ghost, .st-page-hero .st-btn-ghost, .st-night .st-btn-ghost, .st-end .st-btn-ghost, .st-top.dark .st-btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.st-hero .st-btn-ghost:hover, .st-page-hero .st-btn-ghost:hover, .st-end .st-btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .05); }
.st-btn-dark { background: linear-gradient(180deg, #1F3858, var(--ink)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 24px -12px rgba(15, 30, 51, .8); }
.st-btn-dark[disabled] { opacity: .45; cursor: not-allowed; }
.st-btn-text { background: none; color: var(--sky); height: auto; padding: 10px 4px; font-family: var(--body); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.st-btn.small { height: 42px; padding: 0 18px; font-size: 15px; border-radius: 12px; }
.st-btn.big { height: 64px; padding: 0 32px; font-size: 19px; border-radius: 16px; }
.st-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.st-actions.center { justify-content: center; }

/* ---------- Kopfzeile ---------- */
.st-top { position: sticky; top: 0; z-index: 50; transition: background .25s, box-shadow .25s; background: rgba(246, 248, 251, .82);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 1px 0 rgba(15, 30, 51, .07); }
.st-top.dark { position: fixed; left: 0; right: 0; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }
.st-top.dark.scrolled { background: rgba(10, 34, 56, .82); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.st-top-in { display: flex; align-items: center; gap: 28px; height: 72px; }
.st-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--night-2); flex: none; }
.st-top.dark .st-brand { color: #fff; }
.st-brand .brand-mark { width: 32px; height: 32px; }
.st-brand .sock-w { fill: #fff; }
.st-brand span { font: 800 23px/1 var(--wide); font-stretch: 125%; letter-spacing: -.012em; }
.st-nav { display: flex; gap: 4px; margin-left: 12px; }
.st-nav a { padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: 15.5px; text-decoration: none; color: var(--ink-2); transition: background .15s, color .15s; }
.st-nav a:hover, .st-nav a[aria-current] { background: rgba(15, 30, 51, .06); color: var(--ink); }
.st-top.dark .st-nav a { color: rgba(255, 255, 255, .82); }
.st-top.dark .st-nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.st-top-act { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.st-login { font-weight: 700; font-size: 15.5px; text-decoration: none; padding: 8px 12px; border-radius: 10px; }
.st-login:hover { background: rgba(15, 30, 51, .06); }
.st-top.dark .st-login:hover { background: rgba(255, 255, 255, .1); }
.st-menu { display: none; margin-left: auto; }
.st-menu > summary { list-style: none; cursor: pointer; display: grid; gap: 5px; place-content: center; width: 44px; height: 44px; border-radius: 12px; }
.st-menu > summary::-webkit-details-marker { display: none; }
.st-menu > summary span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
.st-menu[open] > summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.st-menu[open] > summary span:nth-child(2) { opacity: 0; }
.st-menu[open] > summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.st-menu nav { position: absolute; left: 12px; right: 12px; top: 68px; display: grid; gap: 2px; padding: 10px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: var(--e3); }
.st-menu nav a { padding: 12px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.st-menu nav a:hover { background: var(--haze); }
.st-menu nav .st-btn { margin-top: 6px; }
@media (max-width: 940px) { .st-nav, .st-top-act { display: none; } .st-menu { display: block; } }

/* ---------- Kopfbereich ---------- */
.st-hero { position: relative; color: #fff; padding: 132px 0 56px; overflow: hidden;
  background: var(--chart) right -180px top -120px / 1100px no-repeat,
    radial-gradient(900px 520px at 88% 108%, rgba(255, 91, 20, .22), transparent 62%),
    radial-gradient(760px 520px at 8% -10%, rgba(47, 120, 196, .42), transparent 64%),
    linear-gradient(180deg, #0B2A45 0%, var(--night) 72%); }
.st-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent); }
.st-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.st-kicker { margin: 0 0 22px; }
.st-kicker a { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: 14.5px; font-weight: 700; text-decoration: none; color: var(--night-ink);
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: background .15s; }
.st-kicker a:hover { background: rgba(255, 255, 255, .12); }
.st-dot { width: 9px; height: 9px; border-radius: 50%; background: #3FD27F; box-shadow: 0 0 0 4px rgba(63, 210, 127, .18); }
.st-hero h1 { font-size: clamp(44px, 5.3vw, 78px); line-height: .97; letter-spacing: -.035em; font-stretch: 114%; color: #fff; max-width: 11ch; }
.st-hero h1 em { display: block; color: var(--sock); }
.st-lead { font-size: clamp(18px, 1.5vw, 20.5px); line-height: 1.6; color: var(--night-ink); max-width: 52ch; margin-top: 24px; }
.st-assure { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; color: var(--night-muted); font-weight: 700; }
.st-assure li { display: inline-flex; align-items: center; gap: 7px; }
.st-assure svg { width: 18px; height: 18px; color: #3FD27F; }

/* Die Bühne: Tablet mit Startliste, Telefon mit Meldung */
.st-stage { position: relative; margin: 0; padding: 0 0 96px; perspective: 1600px; }
.st-tablet { position: relative; border-radius: 28px; padding: 14px; background: linear-gradient(160deg, #1D3550, #0B1726); box-shadow: var(--e3), 0 0 0 1px rgba(255, 255, 255, .08) inset;
  transform: rotateY(-9deg) rotateX(5deg) rotateZ(.4deg); transform-origin: 60% 50%; }
.st-tablet > * { position: relative; }
.st-tablet-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px 12px; border-radius: 16px 16px 0 0; background: #F4F7FA; color: var(--ink); font-size: 13.5px; }
.st-tl-day b { font: 800 17px/1 var(--wide); font-stretch: 112%; margin-right: 4px; }
.st-tl-day { color: var(--muted); font-weight: 700; margin-right: 6px; }
.st-tl-count { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-weight: 700; color: var(--ink-2); }
.st-tl-count i { font: 700 15px/1 var(--cond); font-style: normal; color: var(--ink); }
.st-tl-count i.air { color: #8A5A00; }
.st-tl-sync { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--go); font-weight: 700; }
.st-tl-sync svg { width: 14px; height: 14px; }
.st-strips { list-style: none; margin: 0; padding: 4px 12px 12px; display: grid; gap: 8px; background: #F4F7FA; }
.st-strip { display: grid; grid-template-columns: 6px 1fr auto auto; align-items: center; gap: 0 14px; padding: 11px 12px 11px 0; border-radius: 12px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 1px #E1E7EE, 0 1px 2px rgba(15, 30, 51, .05); overflow: hidden; font-size: 13.5px; line-height: 1.35; transition: box-shadow .4s, background .4s; }
.st-strip .lamp { align-self: stretch; background: #CBD5E1; }
.st-strip.air { box-shadow: 0 0 0 1px rgba(240, 162, 2, .55), 0 10px 22px -14px rgba(240, 162, 2, .9); }
.st-strip.air .lamp { background: linear-gradient(180deg, #FFC23D, var(--amber)); box-shadow: 0 0 12px rgba(240, 162, 2, .8); }
.st-strip.done .lamp { background: linear-gradient(180deg, #3FBF76, var(--go)); }
.st-strip .reg { font: 800 16.5px/1 var(--wide); font-stretch: 112%; letter-spacing: -.01em; }
.st-strip .typ { color: var(--muted); font-size: 12.5px; }
.st-strip .who { font-weight: 700; }
.st-strip .who small { color: var(--muted); font-weight: 400; }
.st-strip .tm { text-align: right; font: 600 15px/1.25 var(--cond); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-strip .tm em { font-size: 17px; color: var(--ink); }
.st-strip.air .tm em { background: #FDF1D8; color: #8A5A00; padding: 0 6px; border-radius: 4px; }
.st-strip .act { font: 700 12.5px/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; padding: 10px 12px; border-radius: 9px;
  background: linear-gradient(180deg, #FF7433, var(--sock)); color: var(--sock-ink); box-shadow: inset 0 0 0 1.5px rgba(11, 27, 43, .85); }
.st-strip .ok { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: #E3F3EA; color: var(--go); }
.st-strip .ok svg { width: 18px; height: 18px; }
.st-strip.just { background: #F1FAF4; }
.st-tablet-new { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 13px; border-radius: 0 0 16px 16px; background: #F4F7FA; color: var(--sock-ink);
  font: 800 16px/1 var(--wide); font-stretch: 112%; }
.st-tablet-new svg { width: 18px; height: 18px; }
.st-tablet-new { background: linear-gradient(180deg, #FF7433, var(--sock)); box-shadow: inset 0 0 0 2px rgba(11, 27, 43, .85); margin: 0 12px 12px; border-radius: 12px; }
.st-tablet::before { content: ""; position: absolute; left: 14px; right: 14px; bottom: 14px; top: 14px; border-radius: 16px; background: #F4F7FA; }
.st-phone { position: absolute; right: -22px; bottom: 0; width: 226px; padding: 12px 10px 14px; border-radius: 36px; background: linear-gradient(170deg, #142B47, #060F1C 70%);
  box-shadow: var(--e3), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 6px #0B1726; transform: rotate(-4deg); }
.st-phone-notch { width: 82px; height: 22px; margin: 0 auto 10px; border-radius: 12px; background: #000; }
.st-note { display: grid; gap: 2px; padding: 12px 13px; border-radius: 18px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 12.5px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.st-note-app { display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 700; font-size: 11.5px; }
.st-note-app svg { width: 16px; height: 16px; }
.st-note-app small { margin-left: auto; font-weight: 400; }
.st-note b { font-size: 14px; margin-top: 3px; }
.st-note-cta { color: var(--sky); font-weight: 700; margin-top: 3px; }
.st-phone-rec { display: grid; grid-template-columns: 12px 1fr auto; gap: 7px 8px; align-items: center; margin-top: 10px; padding: 12px 13px; border-radius: 18px; background: rgba(255, 255, 255, .07); color: var(--night-ink); font-size: 12.5px; }
.st-phone-rec small { grid-column: 1 / -1; color: var(--night-muted); font-weight: 700; }
.st-phone-rec em { font: 700 12px/1 var(--body); color: var(--night-muted); }
.lmp { width: 10px; height: 10px; border-radius: 50%; }
.lmp.g { background: #3FD27F; box-shadow: 0 0 10px #3FD27F; }
.lmp.a { background: #FFC23D; box-shadow: 0 0 10px #FFC23D; }
.st-stage-cap { position: absolute; left: 0; bottom: 18px; font-size: 13px; color: var(--night-muted); max-width: 300px; }
.js .st-phone.pending { opacity: 0; transform: rotate(-4deg) translateY(18px); }
.st-phone { transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1); }

/* Vertrauensleiste */
.st-trust { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.st-trust li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.st-trust svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(255, 91, 20, .14); color: #FF8A57; }
.st-trust b { display: block; font: 700 15px/1.25 var(--wide); font-stretch: 105%; color: #fff; }
.st-trust span span, .st-trust li > span { font-size: 13.5px; line-height: 1.35; color: var(--night-muted); }
.st-proof { margin: 22px 0 0; color: var(--night-ink); font-weight: 700; }

/* ---------- Abschnitte ---------- */
.st-sec { padding: clamp(80px, 10vw, 128px) 0; }
.st-tint { background: var(--haze); }
.st-night { color: var(--night-ink); background: var(--chart) left -260px bottom -300px / 1100px no-repeat, radial-gradient(800px 500px at 100% 0, rgba(47, 120, 196, .3), transparent 60%), var(--night); }
.st-head { margin-bottom: 48px; }
.st-head h2 { font-size: clamp(32px, 3.9vw, 52px); line-height: 1.04; letter-spacing: -.03em; font-stretch: 112%; max-width: 22ch; }
.st-head p { font-size: 19.5px; color: var(--muted); margin-top: 18px; max-width: 58ch; }
.st-night .st-head h2 { color: #fff; }
.st-night .st-head p { color: var(--night-ink); opacity: .85; }
.st-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.st-split .st-head { margin: 0; }
.st-more { display: inline-block; margin-top: 22px; font-weight: 700; color: var(--sky); text-underline-offset: 4px; }

/* Interaktive Vorführung */
.st-demo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.st-demo-strip { position: sticky; top: 96px; padding: 26px; border-radius: var(--r); background: linear-gradient(180deg, #fff, #F7F9FC); box-shadow: 0 0 0 1px var(--line), var(--e2); }
.st-demo-label { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: var(--muted); }
.st-strip.big { font-size: 15px; padding: 16px 16px 16px 0; grid-template-columns: 8px 1fr auto; }
.st-strip.big .reg { font-size: 22px; }
.st-strip.big .tm { font-size: 18px; }
.st-strip.big .tm em { font-size: 24px; }
.st-demo-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.st-demo-btns .st-btn { height: 58px; font-size: 18px; text-transform: none; }
.st-demo-btns .st-btn-text { grid-column: 1 / -1; justify-self: center; }
.st-demo-hint { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.st-demo[data-state="air"] #dm-strip { box-shadow: 0 0 0 1px rgba(240, 162, 2, .55), 0 14px 28px -16px rgba(240, 162, 2, .95); }
.st-demo[data-state="air"] #dm-strip .lamp { background: linear-gradient(180deg, #FFC23D, var(--amber)); box-shadow: 0 0 14px rgba(240, 162, 2, .8); }
.st-demo[data-state="done"] #dm-strip .lamp { background: linear-gradient(180deg, #3FBF76, var(--go)); }
.st-books { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: none; }
.st-books li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 16px 18px; border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1px var(--line), var(--e1); transition: box-shadow .35s, transform .35s, background .35s; }
.st-books .bk-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--haze); color: var(--night-2); transition: background .35s, color .35s; }
.st-books .bk-ico svg { width: 22px; height: 22px; }
.st-books b { display: block; font: 750 16.5px/1.25 var(--wide); font-stretch: 106%; }
.st-books div > span { display: none; font-size: 15px; color: var(--muted); margin-top: 2px; }
.st-demo[data-state="ready"] .st-books span[data-s="ready"], .st-demo[data-state="air"] .st-books span[data-s="air"], .st-demo[data-state="done"] .st-books span[data-s="done"] { display: block; }
.st-demo[data-state="air"] .st-books li:nth-child(-n+3) .bk-ico { background: #FDF1D8; color: #8A5A00; }
.st-demo[data-state="done"] .st-books li { box-shadow: 0 0 0 1px rgba(31, 138, 76, .35), 0 16px 32px -22px rgba(31, 138, 76, .8); }
.st-demo[data-state="done"] .st-books .bk-ico { background: linear-gradient(180deg, #3FBF76, var(--go)); color: #fff; }
.st-demo[data-state="done"] .st-books span[data-s="done"] { color: var(--ink); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .st-demo.lit .st-books li { animation: st-pop .55s cubic-bezier(.2, 1.3, .4, 1) both; }
  .st-demo.lit .st-books li:nth-child(2) { animation-delay: .12s; }
  .st-demo.lit .st-books li:nth-child(3) { animation-delay: .24s; }
  .st-demo.lit .st-books li:nth-child(4) { animation-delay: .36s; }
  .st-demo.lit .st-books li:nth-child(5) { animation-delay: .48s; }
  @keyframes st-pop { 0% { transform: translateX(-10px); opacity: .4; } 100% { transform: none; opacity: 1; } }
}

html:not(.js) .st-demo-btns, html:not(.js) .st-demo-hint { display: none; }

/* Vorher / Nachher */
.st-vs { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; align-items: stretch; }
.st-vs-col { border-radius: var(--r); padding: 30px 32px; }
.st-vs-col h3 { font: 800 22px/1.1 var(--wide); font-stretch: 112%; margin: 0 0 18px; }
.st-vs-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.st-vs-col li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 17px; }
.st-vs-col.was { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); }
.st-vs-col.was li::before { content: ""; width: 10px; height: 2px; margin: 12px 0 0 6px; background: #AAB8C8; }
.st-vs-col.neu { background: #fff; box-shadow: var(--e2), 0 0 0 1px var(--line); position: relative; overflow: hidden; }
.st-vs-col.neu::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--sock), #FFA16E); }
.st-vs-col.neu li svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #E3F3EA; color: var(--go); margin-top: 2px; }

/* Funktionsraster */
.st-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.st-card { position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--e1); transition: box-shadow .2s, transform .2s; }
.st-card:hover { box-shadow: 0 0 0 1px #C3CFDC, var(--e2); transform: translateY(-2px); }
.st-card.span2 { grid-column: span 2; }
.st-card.plain:hover { transform: none; box-shadow: 0 0 0 1px var(--line), var(--e1); }
.st-card h3 { font: 800 21px/1.15 var(--wide); font-stretch: 110%; letter-spacing: -.012em; margin: 0; }
.st-card h3 a { text-decoration: none; }
.st-card h3 a::after { content: " →"; color: var(--sock); opacity: 0; transition: opacity .15s; }
.st-card:hover h3 a::after { opacity: 1; }
.st-card h3 a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.st-card p { font-size: 16.5px; color: var(--muted); margin-top: 10px; }
.st-card > div, .st-card > ul.vg-lamps { margin-top: auto; padding-top: 22px; }
.vg-balance { display: grid !important; grid-template-columns: 1fr auto; gap: 18px; align-items: end; }
.vg-balance > div { position: relative; padding: 16px 18px 16px 24px; border-radius: 16px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.vg-balance > div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, #FFC23D, var(--amber)); }
.vg-balance small { display: block; color: var(--muted); font-weight: 700; font-size: 13px; }
.vg-balance b { display: block; font: 700 34px/1.05 var(--cond); color: #8A5A00; margin: 4px 0; }
.vg-balance span { font-size: 13.5px; color: var(--ink-2); }
.vg-balance ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vg-balance li { font: 700 13px/1 var(--cond); letter-spacing: .04em; padding: 7px 11px; border-radius: 8px; background: var(--haze); color: var(--night-2); text-align: center; }
.vg-counters { display: flex !important; flex-wrap: wrap; gap: 6px; }
.vg-counters span { font: 600 15px/1 var(--cond); padding: 8px 12px; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); }
.vg-counters span.air { background: var(--amber); color: #000; box-shadow: 0 0 16px -2px rgba(240, 162, 2, .7); }
.vg-lamps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vg-lamps li { display: grid; grid-template-columns: 12px auto 1fr; gap: 10px; align-items: center; font: 700 15px/1 var(--wide); font-stretch: 108%; }
.vg-lamps li span { font: 400 14px/1 var(--body); color: var(--muted); text-align: right; }
.vg-lamps i { width: 11px; height: 11px; border-radius: 50%; }
.vg-lamps i.g { background: #3FBF76; box-shadow: 0 0 9px rgba(63, 191, 118, .9); }
.vg-lamps i.a { background: #FFC23D; box-shadow: 0 0 9px rgba(255, 194, 61, .9); }
.vg-lamps i.r { background: #E5524C; box-shadow: 0 0 9px rgba(229, 82, 76, .9); }
.vg-week { position: relative; height: 92px; border-radius: 14px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 7 - 1px), var(--line) calc(100% / 7 - 1px) calc(100% / 7)), var(--paper); box-shadow: 0 0 0 1px var(--line); margin-top: auto; padding: 0 !important; }
.vg-week span { position: absolute; height: 18px; border-radius: 6px; }
.vg-week .b1 { left: 4%; width: 26%; top: 14px; background: linear-gradient(90deg, #2F78C4, #5A97D6); }
.vg-week .b2 { left: 32%; width: 34%; top: 38px; background: linear-gradient(90deg, #1F8A4C, #3FBF76); }
.vg-week .b3 { left: 60%; width: 30%; top: 62px; background: repeating-linear-gradient(135deg, #FFC23D 0 6px, #FFD877 6px 12px); }
.vg-bars { display: grid !important; gap: 10px; }
.vg-bars span { display: block; height: 10px; border-radius: 6px; background: var(--haze); overflow: hidden; }
.vg-bars i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--night-2), var(--sky)); }
.vg-bars i.w80 { width: 80%; } .vg-bars i.w55 { width: 55%; } .vg-bars i.w30 { width: 30%; }
.vg-vote { display: grid !important; gap: 8px; }
.vg-vote span { position: relative; display: block; padding: 8px 12px; border-radius: 10px; background: var(--paper); font: 700 15px/1 var(--cond); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.vg-vote i { position: absolute; left: 0; top: 0; bottom: 0; }
.vg-vote .y i { width: 84%; background: rgba(31, 138, 76, .16); }
.vg-vote .n i { width: 8%; background: rgba(196, 48, 43, .16); }
.st-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.st-chips li { padding: 9px 14px; border-radius: 999px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); font-weight: 700; font-size: 15px; color: var(--ink-2); }
.st-card.wide-text { background: linear-gradient(135deg, #fff, var(--paper)); }

/* Ein Samstag am Platz */
.st-day { list-style: none; margin: 0; padding: 0; position: relative; }
.st-day::before { content: ""; position: absolute; left: 92px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)); }
.st-day li { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 34px; padding: 14px 0; }
.st-day li::before { content: ""; position: absolute; left: 86px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.st-day li.auto::before { background: var(--sock); box-shadow: 0 0 0 4px rgba(255, 91, 20, .2), 0 0 16px rgba(255, 91, 20, .8); }
.st-day time { font: 700 24px/1 var(--cond); color: #fff; text-align: right; padding-top: 2px; font-variant-numeric: tabular-nums; }
.st-day b { display: block; font: 750 18px/1.3 var(--wide); font-stretch: 106%; color: #fff; }
.st-day span { display: block; color: var(--night-ink); opacity: .8; font-size: 16px; margin-top: 3px; }
.st-day li.auto b::after { content: "automatisch"; margin-left: 10px; font: 700 11.5px/1 var(--body); padding: 4px 8px; border-radius: 999px; background: rgba(255, 91, 20, .16); color: #FF9A6B; vertical-align: 3px; }
html[lang="en"] .st-day li.auto b::after { content: "automatic"; }
.st-night .st-head .st-btn { margin-top: 30px; }

/* Piloten */
.st-split-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.st-ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.st-ticks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 16.5px; color: var(--ink-2); }
.st-ticks svg { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: #E3F3EA; color: var(--go); margin-top: 2px; }
.st-board { display: grid; gap: 12px; padding: 22px; border-radius: 28px; background: var(--chart) right -300px top -280px / 900px no-repeat, linear-gradient(170deg, var(--night-2), var(--night)); box-shadow: var(--e3); }
.st-board-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: #fff; }
.st-board-row .lamp { width: 16px; height: 16px; border-radius: 50%; background: #3FD27F; box-shadow: 0 0 14px #3FD27F; }
.st-board-row[data-state="amber"] .lamp { background: #FFC23D; box-shadow: 0 0 14px #FFC23D; }
.st-board-row b { display: block; font: 750 18px/1.2 var(--wide); font-stretch: 108%; }
.st-board-row span { font-size: 14.5px; color: var(--night-ink); opacity: .8; }
.st-board-row em { font-weight: 700; font-size: 14px; color: var(--night-muted); }
.st-note-s { margin: 4px 4px 0; font-size: 13px; color: var(--night-muted); }

/* Vertrauen */
.st-chain { display: grid; gap: 16px; }
.st-link { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 2px 16px; align-items: baseline; padding: 18px 22px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--e1); }
.st-link + .st-link::before { content: ""; position: absolute; left: 40px; top: -17px; height: 16px; width: 2px; background: var(--line); }
.st-link b { grid-row: span 2; font: 800 20px var(--wide); font-stretch: 110%; }
.st-link code { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
.st-link.struck span { text-decoration: line-through; color: var(--muted); }
.st-link.fix { box-shadow: 0 0 0 1.5px var(--amber), 0 14px 30px -20px rgba(240, 162, 2, .9); }
.st-promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.st-promises > div { padding: 26px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.st-promises h3 { font: 800 19px/1.2 var(--wide); font-stretch: 110%; margin: 0 0 12px; }
.st-promises p { margin: 0; font-size: 16px; color: var(--muted); }
.st-nots, .st-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 16px; }
.st-nots li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink-2); }
.st-nots svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #FBE4E2; color: #C4302B; margin-top: 2px; }
.st-links a { font-weight: 700; color: var(--sky); text-underline-offset: 4px; }

/* Umzug: echte Reihenfolge */
.st-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: stp; }
.st-steps li { counter-increment: stp; position: relative; padding: 28px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--e1); }
.st-steps li::before { content: counter(stp); display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 12px; background: linear-gradient(180deg, var(--night-3), var(--night-2)); color: #fff; font: 800 18px/1 var(--wide); }
.st-steps li:not(:last-child)::after { content: ""; position: absolute; top: 49px; right: -18px; width: 18px; height: 2px; background: var(--line); }
.st-steps b { display: block; font: 800 21px/1.2 var(--wide); font-stretch: 110%; }
.st-steps span { display: block; color: var(--muted); margin-top: 8px; font-size: 16.5px; }

/* Verbindungen */
.st-integr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
.st-integr div { padding: 22px 0; border-top: 1px solid var(--line); }
.st-integr dt { font: 800 18px/1.2 var(--wide); font-stretch: 108%; }
.st-integr dd { margin: 6px 0 0; color: var(--muted); font-size: 16px; }

/* Rechner */
.st-calc { display: grid; gap: 26px; padding: 32px; border-radius: 26px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--e2); }
.st-calc label { display: grid; grid-template-columns: 1fr auto; gap: 12px 16px; align-items: baseline; font-weight: 700; color: var(--ink-2); }
.st-calc output { font: 700 28px/1 var(--cond); color: var(--ink); font-variant-numeric: tabular-nums; }
.st-calc input[type=range] { grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.st-calc input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 6px; background: var(--haze); box-shadow: inset 0 0 0 1px var(--line); }
.st-calc input[type=range]::-moz-range-track { height: 8px; border-radius: 6px; background: var(--haze); box-shadow: inset 0 0 0 1px var(--line); }
.st-calc input[type=range]::-moz-range-progress { height: 8px; border-radius: 6px; background: var(--sock); }
.st-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--sock), 0 6px 14px -4px rgba(255, 91, 20, .7); }
.st-calc input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--sock), 0 6px 14px -4px rgba(255, 91, 20, .7); }
.st-calc input[type=range]:focus-visible { outline: 0; }
.st-calc input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--sock), 0 0 0 7px rgba(255, 91, 20, .25); }
.st-result { margin: 0; padding: 22px 24px; border-radius: 18px; background: linear-gradient(135deg, var(--night-2), var(--night)); color: #fff; }
.st-result b { font: 700 64px/1 var(--cond); color: #FF8A57; font-variant-numeric: tabular-nums; }
.st-result span { font: 750 20px/1.2 var(--wide); font-stretch: 108%; }
.st-result small { display: block; margin-top: 8px; color: var(--night-ink); opacity: .85; font-size: 15.5px; }

/* Preise (Teil aus der App) */
.st .plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 0; }
.st .plan { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--e1); border: 0; }
.st .plan-main { box-shadow: 0 0 0 2px var(--night-2), 0 24px 50px -26px rgba(14, 58, 92, .7); position: relative; }
.st .plan h3 { font: 800 24px/1.1 var(--wide); font-stretch: 112%; margin: 0; }
.st .plan-price b { font: 700 44px/1 var(--cond); }
.st .plan ul { padding-left: 1.2em; }
.st .plan-btn { display: block; text-align: center; margin-top: 18px; padding: 13px; border-radius: 12px; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); border: 0; }
.st .plan-btn.primary { background: linear-gradient(180deg, #FF7433, var(--sock)); color: var(--sock-ink); box-shadow: inset 0 0 0 2px rgba(11, 27, 43, .9); }

/* Fragen */
.st-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.st-faq-grid .st-head { position: sticky; top: 100px; margin: 0; }
.st-faq details { margin: 0; border-bottom: 1px solid var(--line); }
.st-faq details:first-child { border-top: 1px solid var(--line); }
.st-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center; padding: 22px 0; font: 750 19px/1.3 var(--wide); font-stretch: 104%; color: var(--ink); }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::after { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--haze) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%230E3A5C' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .2s; }
.st-faq details[open] summary::after { transform: rotate(45deg); }
.st-faq details p { margin: -6px 0 22px; color: var(--muted); font-size: 17px; max-width: 62ch; }

/* Abschluss */
.st-end { position: relative; padding: clamp(96px, 12vw, 150px) 0; text-align: center; color: #fff; overflow: hidden;
  background: var(--chart) center bottom -360px / 1300px no-repeat, radial-gradient(700px 420px at 50% 120%, rgba(255, 91, 20, .28), transparent 65%), linear-gradient(180deg, var(--night), #071A2C); }
.st-sock { width: 92px; height: 92px; margin: 0 auto 26px; filter: drop-shadow(0 12px 24px rgba(255, 91, 20, .45)); }
.st-end h2 { font-size: clamp(36px, 5vw, 66px); letter-spacing: -.03em; font-stretch: 116%; max-width: 16ch; margin: 0 auto; color: #fff; }
.st-end p { margin: 20px auto 0; color: var(--night-ink); opacity: .85; font-size: 19px; max-width: 54ch; }

/* Fußzeile */
.st-foot { padding: 64px 0 28px; background: #061626; }
.st-foot-grid { display: grid !important; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px; align-items: start !important; }
.st-foot-about p { margin: 14px 0 10px; font-size: 15px; color: #9FB3C8; max-width: 34ch; }
.st-foot-about small { color: #6F86A0; }
.st-foot nav { display: grid; gap: 9px; align-content: start; }
.st-foot nav h2 { font: 700 13px/1 var(--body); color: #6F86A0; margin: 0 0 6px; letter-spacing: .02em; max-width: none; }
.st-foot nav a { color: #DCE7F2; text-decoration: none; font-size: 15px; }
.st-foot nav a:hover, .st-foot nav a[aria-current] { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.st-foot-base { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 44px !important; padding-top: 22px !important; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14px; color: #6F86A0; }
.st-foot-base form { margin: 0; }
.lp-legal { display: grid; }

/* ---------- Funktionsseiten ---------- */
.st-page-hero { padding: 128px 0 80px; background: var(--chart) right -260px top -260px / 1000px no-repeat, radial-gradient(700px 420px at 10% 0, rgba(47, 120, 196, .35), transparent 64%), linear-gradient(180deg, #0B2A45, var(--night)); color: #fff; }
.st-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 14px; color: var(--night-muted); }
.st-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.st-crumbs a { color: var(--night-ink); text-decoration: none; }
.st-crumbs a:hover { text-decoration: underline; }
.st-page-hero h1 { font-size: clamp(38px, 5vw, 70px); letter-spacing: -.032em; font-stretch: 116%; line-height: 1; max-width: 17ch; color: #fff; }
.st-page-hero .st-lead { max-width: 60ch; }
.st-page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: end; }
.st-page-hero .st-facts { grid-template-columns: 1fr; margin: 0; gap: 12px; }
.st-page-hero .st-facts li { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); color: var(--night-ink); backdrop-filter: blur(6px); padding: 18px 20px 18px 56px; position: relative; }
.st-page-hero .st-facts li::before { content: ""; position: absolute; left: 20px; top: 20px; width: 22px; height: 22px; border-radius: 50%; background: var(--go, #FF5B14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.st-page-hero .st-facts b { color: #fff; }
.st-page-body { padding: 72px 0 24px; }
.st-prose { max-width: 760px; font-size: 18px; line-height: 1.7; }
.st-prose h2 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -.02em; font-stretch: 112%; margin: 56px 0 0; max-width: 24ch; }
.st-prose h2:first-child { margin-top: 0; }
.st-prose h3 { font: 800 20px/1.3 var(--wide); font-stretch: 106%; margin: 30px 0 0; }
.st-prose ul { margin: 16px 0 0; padding-left: 1.2em; }
.st-prose li { margin: 8px 0; }
.st-prose a { color: var(--sky); text-underline-offset: 4px; }
.st-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.st-aside { position: sticky; top: 100px; display: grid; gap: 16px; }
.st-aside-card { padding: 24px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--e2); }
.st-aside-card h2 { font: 800 20px/1.2 var(--wide); font-stretch: 110%; margin: 0; max-width: none; }
.st-aside-card p { font-size: 15.5px; color: var(--muted); margin-top: 8px; }
.st-aside-card .st-btn { width: 100%; margin-top: 16px; }
.st-aside-card ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.st-aside-card ul a { font-weight: 700; color: var(--sky); text-decoration: none; }
.st-aside-card ul a:hover { text-decoration: underline; }
.st-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 36px 0 0; padding: 0; list-style: none; }
.st-facts li { padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 15px; color: var(--muted); }
.st-facts b { display: block; font: 800 18px/1.2 var(--wide); font-stretch: 108%; color: var(--ink); margin-bottom: 4px; }
.st-hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.st-hub .st-card p { margin-bottom: 0; }

/* ---------- Rechtstexte im neuen Rahmen ---------- */
.lg .lg-main { padding-top: 40px; }

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 1080px) {
  .st-hero-grid, .st-split, .st-split-r, .st-faq-grid, .st-page-grid, .st-page-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .st-faq-grid .st-head, .st-aside { position: static; }
  .st-stage { max-width: 640px; }
  .st-demo { grid-template-columns: 1fr; }
  .st-demo-strip { position: static; }
  .st-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .st-hero { padding: 104px 0 40px; }
  .st-tablet, .st-phone { transform: none; }
  .st-stage { padding: 0 0 40px; }
  .st-phone { position: relative; left: auto; bottom: auto; width: auto; max-width: 300px; margin: -36px 0 0 auto; }
  .st-stage-cap { position: static; text-align: left; margin-top: 14px; max-width: none; }
  .st-strip { grid-template-columns: 6px 1fr auto; font-size: 13px; }
  .st-strip .act, .st-strip .ok { display: none; }
  .st-vs, .st-steps, .st-promises, .st-integr, .st-facts, .st-hub, .st-bento { grid-template-columns: 1fr; }
  .st-card.span2 { grid-column: auto; }
  .vg-balance { grid-template-columns: 1fr; }
  .vg-balance ul { grid-template-columns: repeat(4, auto); justify-content: start; }
  .st-steps li:not(:last-child)::after { display: none; }
  .st-day::before { left: 70px; }
  .st-day li { grid-template-columns: 56px 1fr; gap: 30px; }
  .st-day li::before { left: 64px; }
  .st-day time { font-size: 20px; }
  .st-day li.auto b::after { display: inline-block; margin: 6px 0 0; }
  .st-foot-grid { grid-template-columns: 1fr; }
  .st-head { margin-bottom: 34px; }
  .st-result b { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) { .st-btn, .st-card, .st-phone, .st-books li { transition: none !important; animation: none !important; } }

/* ---------- Preise (ab 0.20): Staffel, Rechner, Pilotentarife, Versprechen ---------- */
.st-pill { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 6px 12px; border-radius: 999px; font: 700 14px/1 var(--body); letter-spacing: 0; background: #FFE7DA; color: #9A3204; }
.st-tabs { display: none; gap: 6px; padding: 5px; margin: -18px 0 28px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); width: max-content; max-width: 100%; }
.js .st-tabs { display: inline-flex; }
.st-tabs button { height: 44px; padding: 0 20px; border: 0; border-radius: 12px; background: none; font: 750 16px/1 var(--wide); font-stretch: 106%; color: var(--muted); cursor: pointer; }
.st-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.st-tabs button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.js .st-tabpanel[hidden] { display: none; }
.st-tab-h { font: 800 22px/1.2 var(--wide); font-stretch: 110%; margin: 0 0 18px; }
.js .st-price-club .st-tab-h, .js .st-price-pilot .st-tab-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.st-price-pilot { margin-top: 56px; }
.js .st-price-pilot { margin-top: 0; }
.st-price-club { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.st-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.st-ladder li { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "who amt" "bar unit"; gap: 4px 16px; align-items: baseline; padding: 16px 20px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.st-ladder .who { grid-area: who; font-weight: 700; color: var(--ink-2); }
.st-ladder b { grid-area: amt; font: 700 34px/1 var(--cond); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.st-ladder small { grid-area: unit; text-align: right; color: var(--muted); font-size: 13.5px; }
.st-ladder .bar { grid-area: bar; align-self: center; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--sock), #FF9A6B); }
.st-ladder .bar.w0 { width: 4%; } .st-ladder .bar.w1 { width: 25%; } .st-ladder .bar.w2 { width: 50%; } .st-ladder .bar.w3 { width: 75%; } .st-ladder .bar.w4 { width: 100%; }
.st-ladder li.base { background: linear-gradient(135deg, var(--night-2), var(--night)); box-shadow: none; }
.st-ladder li.base .who, .st-ladder li.base small { color: var(--night-ink); }
.st-ladder li.base b { color: #fff; }
.st-ladder li.cap { box-shadow: 0 0 0 2px var(--sock); }
.st-ladder li.cap b { color: #C2410C; }
.st-fine { margin: 14px 2px 0; font-size: 14px; color: var(--muted); max-width: 64ch; }
.st-fine a { color: var(--sky); font-weight: 700; }
.st-examples { width: 100%; margin-top: 26px; border-collapse: collapse; font-size: 16px; }
.st-examples caption { text-align: left; font: 750 16px/1.2 var(--wide); font-stretch: 106%; padding-bottom: 8px; }
.st-examples th { text-align: left; font-size: 13.5px; font-weight: 700; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--line); }
.st-examples td { padding: 10px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.st-examples td:first-child { font-weight: 700; }
.st-zero { margin: 18px 0 0; padding: 14px 18px; border-radius: 14px; background: #E3F3EA; color: #14532D; font-size: 15.5px; }
.st-zero b { font: 700 22px/1 var(--cond); margin-right: 6px; }
.st-pcalc label { grid-template-columns: 1fr 96px; align-items: center; }
.st-pcalc input[type=number] { width: 96px; height: 48px; padding: 0 12px; border-radius: 12px; border: 0; box-shadow: inset 0 0 0 1.5px var(--line); font: 700 26px/1 var(--cond); text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.st-pcalc input[type=number]:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; }
.st-pcalc .st-result b { font-size: 56px; }
.st-copytext { width: 100%; resize: vertical; padding: 12px 14px; border-radius: 12px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper); font: 14px/1.5 var(--body); color: var(--ink-2); }
.st-pcalc-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.st-pcalc-act .st-more { margin-top: 0; }
.st-pcalc .st-ticks { margin-top: 0; }
.st-pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.st-pcard { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--e1); }
.st-pcard.main { box-shadow: 0 0 0 2px var(--night-2), 0 24px 50px -26px rgba(14, 58, 92, .7); }
.st-pcard h4 { margin: 0; font: 800 23px/1.1 var(--wide); font-stretch: 112%; display: flex; align-items: center; gap: 10px; }
.st-pcard .amt { margin: 4px 0 0; } .st-pcard .amt b { font: 700 46px/1 var(--cond); } .st-pcard .amt span { color: var(--muted); font-weight: 700; }
.st-pcard .sub { margin: 0; color: var(--muted); font-size: 15px; font-weight: 700; }
.st-pcard p { margin: 0; color: var(--ink-2); font-size: 16px; }
.st-pcard .st-btn { margin-top: auto; }
.st-btn-ghost.dark { color: var(--ink); }
.plan-flag { display: inline-block; padding: 4px 9px; border-radius: 999px; background: var(--sock); color: var(--sock-ink); font: 700 12.5px/1 var(--body); letter-spacing: 0; vertical-align: 3px; }
.st-fair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 56px; }
.st-fair > div { padding: 28px; border-radius: var(--r); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.st-fair h3 { margin: 0; font: 800 21px/1.2 var(--wide); font-stretch: 110%; }
.st-fair .st-ticks { margin-top: 16px; }
.st-fair p { margin: 14px 0 0; color: var(--ink-2); font-size: 16.5px; }
.st-fair p.st-fine { font-size: 14px; color: var(--muted); }
.st-bridge { margin: 20px 0 0; padding: 16px 18px; border-radius: 14px; background: var(--haze); font-size: 16px; color: var(--ink-2); }
.st-bridge a { font-weight: 700; color: var(--sky); text-underline-offset: 4px; }
.st-move-note { margin: 22px 0 0; max-width: 72ch; font-size: 16.5px; color: var(--ink-2); }
@media (max-width: 1080px) { .st-price-club, .st-fair { grid-template-columns: minmax(0, 1fr); } }
.st-split > *, .st-price-club > *, .st-sheet > * { min-width: 0; }
@media (max-width: 760px) { .st-pcards { grid-template-columns: minmax(0, 1fr); } .st-pcalc { padding: 22px; } .st-ladder b { font-size: 28px; } .st-pcalc .st-result b { font-size: 46px; } .st-tabs { margin-top: -24px; } .st-pill { margin: 8px 0 0; display: table; } }
/* Unterlagen für den Vorstand */
.st-jump { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; }
.st-jump a { display: inline-block; padding: 9px 14px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.st-jump a:hover { background: rgba(255, 255, 255, .13); }
.st-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.st-sheet .st-examples { margin-top: 0; }
.st-examples tr.cap td { font-weight: 700; color: #C2410C; }
.st-copytext.tall { min-height: 420px; }
.st-doclist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.st-doclist li { display: grid; gap: 4px; padding: 20px 22px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.st-doclist a { font: 750 17px/1.25 var(--wide); font-stretch: 106%; color: var(--ink); text-underline-offset: 4px; }
.st-doclist span { font-size: 14.5px; color: var(--muted); }
.st-noprint { margin-top: 20px; }
@media (max-width: 1080px) { .st-sheet { grid-template-columns: minmax(0, 1fr); } }
@media print {
  .st-top, .st-foot, .st-end, .st-noprint, .st-jump, .skip, #haushalt, #beschluss, #datenschutz, #verband { display: none !important; }
  .st-page-hero { padding: 0 0 12px; background: none; color: #000; }
  .st-page-hero h1, .st-crumbs a, .st-crumbs { color: #000; }
  .st-page-hero .st-lead { color: #333; }
  .st-sec { padding: 12px 0; }
  .st-pill { border: 1px solid #000; }
}
.st-fine-inline { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }