/* ==========================================================================
   boovis Designsystem v2 (Relaunch Herbst 2026)
   Mobile first, ohne Build-Schritt, ohne externe Ressourcen.
   Zwei Welten: Lokale Sichtbarkeit (Gruen) und Software & KI (Ink/Orange).
   ========================================================================== */

/* ---------- Schrift (lokal gehostet, keine Verbindung zu Google) ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/inter-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: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

/* ---------- Tokens ---------- */
:root {
    --green-950: #031f16;
    --green-900: #05301f;
    --green-800: #064a31;
    --green-700: #005634;
    --green-600: #007849;   /* Markenfarbe */
    --green-500: #0a9a5f;
    --green-100: #d3ebe0;
    --green-50:  #ecf6f1;

    --orange-500: #FFA300;  /* Akzent, nur als Flaeche mit dunkler Schrift */
    --orange-400: #ffb52e;
    --orange-100: #fff1d6;
    --orange-800: #8a5000;  /* Akzent als Schrift auf Weiss (Kontrast 6,1:1) */

    --ink-950: #070b14;
    --ink-900: #0b1220;
    --ink-800: #111a2e;
    --ink-700: #1e293b;     /* Fliesstext */
    --ink-600: #334155;
    --ink-500: #475569;     /* gedaempfter Text (7,6:1 auf Weiss) */
    --ink-400: #64748b;
    --ink-200: #cbd5e1;
    --ink-100: #e2e8f0;
    --ink-50:  #f5f7fa;

    --white: #ffffff;
    --surface: #f5f8f6;
    --line: #e2e8f0;

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --pill: 999px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow: 0 6px 20px -8px rgba(15, 23, 42, .18);
    --shadow-lg: 0 24px 50px -20px rgba(15, 23, 42, .35);
    --shadow-glow: 0 0 0 1px rgba(255, 163, 0, .35), 0 18px 45px -18px rgba(255, 163, 0, .55);

    --container: 1200px;
    --container-narrow: 820px;
    --header-h: 72px;

    --fs-xs: .875rem;
    --fs-sm: 1rem;
    --fs-base: 1.125rem;
    --fs-lg: 1.3125rem;
    --fs-h3: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem);
    --fs-h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
    --fs-h1: clamp(2.125rem, 1.4rem + 3vw, 3.75rem);

    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--fs-base);
    line-height: 1.65;
    color: var(--ink-700);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--green-600); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--green-700); }
p, li { text-wrap: pretty; }
h1, h2, h3, h4 { color: var(--ink-900); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; font-weight: 800; }
h1 { font-size: var(--fs-h1); letter-spacing: -.035em; }
h2 { font-size: var(--fs-h2); letter-spacing: -.03em; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
strong { font-weight: 700; color: inherit; }
ul, ol { padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* ---------- Barrierefreiheit ---------- */
.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 1000;
    background: var(--ink-900); color: var(--white); padding: .75rem 1.25rem; border-radius: var(--radius-sm);
    font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1rem; color: var(--white); }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--orange-500); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.container--narrow { max-width: var(--container-narrow); }
@media (min-width: 768px) { .container { padding-inline: 2rem; } }

.section { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section--muted { background: var(--surface); }
.section--green { background: var(--green-50); }
.section--dark { background: var(--ink-900); color: var(--ink-200); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--forest { background: var(--green-950); color: #cfe3da; }
.section--forest h2, .section--forest h3 { color: var(--white); }
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head p { font-size: var(--fs-lg); color: var(--ink-500); margin-top: 1rem; }
.section--dark .section-head p, .section--forest .section-head p { color: var(--ink-200); }

.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--green-600); margin-bottom: .875rem;
}
.eyebrow::before { content: ''; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow--orange { color: var(--orange-800); }
.section--dark .eyebrow, .section--forest .eyebrow { color: var(--orange-400); }
.section--dark p a:not(.btn), .section--forest p a:not(.btn), .hero p a:not(.btn), .world--dev p a:not(.btn), .card--dark p a:not(.btn) { color: var(--orange-400); }

.lead { font-size: var(--fs-lg); color: var(--ink-500); }
.muted { color: var(--ink-500); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.5rem; }

.grid { display: grid; gap: 1.25rem; }
@media (min-width: 700px) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .grid { gap: 1.5rem; }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid--split { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 4rem; }
    .grid--split-rev { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 4rem; }
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 48px; padding: .8rem 1.4rem; border-radius: var(--pill);
    font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; text-align: center;
    border: 2px solid transparent; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--green-600); color: var(--white); box-shadow: 0 10px 24px -12px rgba(0, 120, 73, .8); }
.btn--primary:hover { background: var(--green-700); color: var(--white); }
.btn--accent { background: var(--orange-500); color: var(--ink-950); box-shadow: var(--shadow-glow); }
.btn--accent:hover { background: var(--orange-400); color: var(--ink-950); }
.btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--ink-200); }
.btn--ghost:hover { border-color: var(--ink-900); color: var(--ink-900); }
.btn--light { background: var(--white); color: var(--ink-900); }
.btn--light:hover { color: var(--green-700); }
.btn--outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .35); }
.btn--outline-light:hover { border-color: var(--white); color: var(--white); }
.btn--lg { min-height: 56px; padding: 1rem 1.75rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }
.link-arrow { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.link-arrow::after { content: '→'; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Chips, Badges, Siegel ---------- */
.chip {
    display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: var(--pill);
    background: var(--green-50); color: var(--green-700); font-size: var(--fs-xs); font-weight: 700; line-height: 1.3;
}
.chip svg { width: 14px; height: 14px; }
.chip--orange { background: var(--orange-100); color: var(--orange-800); }
.chip--ink { background: var(--ink-800); color: var(--ink-100); }
.chip--glass { background: rgba(255, 255, 255, .08); color: #e6f2ec; border: 1px solid rgba(255, 255, 255, .14); }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.badge-kuendbar {
    display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem; border-radius: var(--pill);
    background: var(--orange-500); color: var(--ink-950); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .01em;
}
.badge-kuendbar svg { width: 16px; height: 16px; }

.seal {
    --size: 118px;
    width: var(--size); height: var(--size); border-radius: 50%; flex: none;
    display: grid; place-content: center; text-align: center; gap: .1rem;
    background: radial-gradient(circle at 30% 25%, #ffc24d, var(--orange-500) 60%, #e08e00);
    color: var(--ink-950); box-shadow: 0 0 0 6px rgba(255, 163, 0, .18), 0 14px 30px -12px rgba(224, 142, 0, .8);
    transform: rotate(-8deg);
}
.seal strong { font-size: 1.6rem; line-height: 1; letter-spacing: -.03em; }
.seal span { font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100; height: var(--header-h);
    background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled { border-color: var(--line); box-shadow: var(--shadow-sm); }
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink-900); font-weight: 800; font-size: 1.375rem; letter-spacing: -.04em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand span { color: var(--green-600); }
.nav { display: none; }
.nav ul { list-style: none; padding: 0; display: flex; align-items: center; gap: .25rem; }
.nav a { display: block; padding: .55rem .8rem; border-radius: var(--pill); color: var(--ink-700); font-weight: 600; font-size: var(--fs-sm); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--green-50); color: var(--green-700); }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.header-phone { display: none; font-weight: 700; font-size: var(--fs-sm); color: var(--ink-900); text-decoration: none; padding: .5rem .75rem; }
.header-cta { display: none; min-height: 42px; padding: .55rem 1.1rem; font-size: var(--fs-sm); }
.menu-toggle {
    width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--white);
    display: inline-grid; place-content: center; gap: 5px;
}
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--ink-900); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; background: var(--white); overflow-y: auto;
    padding: 1.5rem 1.25rem 6rem; display: none;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; padding: 0; }
.mobile-nav li { border-bottom: 1px solid var(--line); }
.mobile-nav a { display: flex; justify-content: space-between; padding: 1rem .25rem; font-weight: 700; font-size: 1.125rem; color: var(--ink-900); text-decoration: none; }
.mobile-nav .mobile-nav-group { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); font-weight: 700; padding: 1.25rem .25rem .25rem; border: 0; }
.mobile-nav .btn { margin-top: 1.5rem; }
body.nav-open { overflow: hidden; }
@media (min-width: 640px) { .header-cta { display: inline-flex; } }
@media (min-width: 1120px) {
    .nav { display: block; }
    .menu-toggle { display: none; }
    .header-phone { display: inline-block; }
    .mobile-nav { display: none !important; }
}

/* Dropdown in der Hauptnavigation */
.nav .has-sub { position: relative; }
.nav .sub-toggle { display: inline-flex; align-items: center; gap: .3rem; padding: .55rem .8rem; border-radius: var(--pill); border: 0; background: none; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-700); }
.nav .sub-toggle:hover, .nav .has-sub.is-open .sub-toggle { background: var(--green-50); color: var(--green-700); }
.nav .sub-toggle svg { width: 12px; height: 12px; transition: transform .2s; }
.nav .has-sub.is-open .sub-toggle svg { transform: rotate(180deg); }
.nav .sub {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    width: 620px; display: none; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .75rem;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.nav .has-sub.is-open .sub { display: grid; }
/* Unsichtbare Brücke über die Lücke zwischen Button und Panel, sonst schließt das Menü beim Runterfahren */
.nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav .sub-col-title { grid-column: span 1; font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); padding: .5rem .75rem 0; }
.nav .sub a { padding: .7rem .75rem; border-radius: var(--radius); }
.nav .sub a strong { display: block; color: var(--ink-900); font-size: var(--fs-sm); }
.nav .sub a small { display: block; color: var(--ink-500); font-weight: 500; font-size: var(--fs-xs); line-height: 1.4; margin-top: .15rem; }
.nav .sub a:hover { background: var(--surface); }
.nav .sub-list { list-style: none; padding: 0; display: block; }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--green-950); color: #d5e7df;
    padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(3rem, 2rem + 4vw, 5.5rem);
}
.hero::before { /* Raster als technischer Hintergrund */
    content: ''; position: absolute; inset: 0; z-index: -2;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 30%, transparent 75%);
}
.hero::after { /* Lichtkegel */
    content: ''; position: absolute; z-index: -1; width: 900px; height: 900px; right: -300px; top: -380px;
    background: radial-gradient(circle, rgba(10, 154, 95, .45), transparent 60%);
    filter: blur(20px);
}
.hero h1 { color: var(--white); }
.hero h1 .hl { color: var(--orange-500); }
.hero .lead { color: #bcd6ca; max-width: 640px; margin-top: 1.25rem; }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.3fr .8fr; gap: 3.5rem; } }
.hero h1 { font-size: clamp(2.125rem, 1.3rem + 2.9vw, 3.4rem); }
.hero .eyebrow { color: var(--orange-400); }
.hero-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.75rem; font-size: var(--fs-sm); color: #a9c7ba; list-style: none; padding: 0; }
.hero-trust li { display: inline-flex; align-items: center; gap: .45rem; }
.hero-trust svg { width: 16px; height: 16px; color: var(--orange-500); flex: none; }
.hero--sub { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.hero--sub h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }

/* Frage-Einstieg im Hero */
.quiz-card {
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius-xl);
    padding: 1.5rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
@media (min-width: 768px) { .quiz-card { padding: 2rem; } }
.quiz-card h2 { color: var(--white); font-size: 1.3125rem; letter-spacing: -.02em; }
.quiz-card p { color: #a9c7ba; font-size: var(--fs-sm); margin-top: .35rem; }
.quiz-options { display: grid; gap: .625rem; margin-top: 1.25rem; list-style: none; padding: 0; }
.quiz-options a {
    display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; border-radius: var(--radius);
    background: rgba(255, 255, 255, .95); color: var(--ink-900); text-decoration: none; font-weight: 700; font-size: var(--fs-sm);
    transition: transform .2s var(--ease), box-shadow .2s;
}
.quiz-options a:hover { transform: translateX(4px); box-shadow: 0 0 0 3px var(--orange-500); color: var(--ink-900); }
.quiz-options .qi { width: 38px; height: 38px; border-radius: 10px; display: grid; place-content: center; background: var(--green-50); color: var(--green-600); flex: none; }
.quiz-options .qi svg { width: 20px; height: 20px; }
.quiz-options small { display: block; font-weight: 500; color: var(--ink-500); font-size: var(--fs-xs); }
.quiz-options .qa { margin-left: auto; color: var(--ink-400); }
.quiz-foot { margin-top: 1rem; font-size: var(--fs-xs); color: #93b5a6; }
.quiz-foot a { color: var(--white); }

/* Kennzahlen */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: 1.25rem; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.stat strong { display: block; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); letter-spacing: -.04em; color: var(--green-600); line-height: 1.1; }
.stat span { display: block; font-size: var(--fs-sm); color: var(--ink-500); margin-top: .35rem; line-height: 1.45; }
.stats-source { font-size: var(--fs-xs); color: var(--ink-400); margin-top: .875rem; }

/* ---------- Karten ---------- */
.card {
    position: relative; display: flex; flex-direction: column; gap: .75rem;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.625rem;
    box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card p { color: var(--ink-500); font-size: var(--fs-sm); }
a.card { text-decoration: none; color: inherit; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--green-100); }
.card-icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-content: center; background: var(--green-50); color: var(--green-600); }
.card-icon svg { width: 24px; height: 24px; }
.card-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.price-tag { font-weight: 800; color: var(--ink-900); font-size: var(--fs-sm); }
.price-tag small { font-weight: 600; color: var(--ink-400); }
.card--dark { background: var(--ink-800); border-color: rgba(255, 255, 255, .08); color: var(--ink-200); }
.card--dark h3 { color: var(--white); }
.card--dark p { color: var(--ink-200); }
.card--dark .card-icon { background: rgba(255, 163, 0, .12); color: var(--orange-500); }
.card--dark .card-foot { border-color: rgba(255, 255, 255, .1); }
.card--dark .price-tag { color: var(--white); }
a.card--dark:hover { border-color: rgba(255, 163, 0, .45); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }
.card-kicker { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--green-600); }
.card--dark .card-kicker { color: var(--orange-400); }

/* ---------- Zwei Welten ---------- */
.worlds { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .worlds { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.world { border-radius: var(--radius-xl); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); display: flex; flex-direction: column; gap: 1.25rem; }
.world--local { background: var(--green-50); border: 1px solid var(--green-100); }
.world--dev { background: var(--ink-900); color: var(--ink-200); position: relative; overflow: hidden; }
.world--dev::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 18px 18px;
    mask-image: linear-gradient(160deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%);
}
.world > * { position: relative; }
.world--dev h3, .world--dev h2 { color: var(--white); }
.world-head p { margin-top: .5rem; color: var(--ink-500); }
.world--dev .world-head p { color: var(--ink-200); }
.world-list { list-style: none; padding: 0; display: grid; gap: .625rem; }
.world-list a {
    display: flex; align-items: center; gap: .875rem; padding: .9rem 1rem; border-radius: var(--radius);
    background: var(--white); text-decoration: none; color: var(--ink-900); border: 1px solid transparent; transition: border-color .2s, transform .2s var(--ease);
}
.world-list a:hover { border-color: var(--green-600); transform: translateX(3px); }
.world--dev .world-list a { background: var(--ink-800); color: var(--white); border-color: rgba(255, 255, 255, .06); }
.world--dev .world-list a:hover { border-color: var(--orange-500); }
.world-list .wl-text { flex: 1; min-width: 0; }
@media (max-width: 520px) {
    .world-list a { flex-wrap: wrap; row-gap: .5rem; }
    .world-list .wl-text { flex-basis: calc(100% - 48px - .875rem); }
    .world-list .wl-price { margin-left: calc(48px + .875rem); }
}
.world-list strong { display: block; font-size: var(--fs-sm); }
.world-list small { display: block; color: var(--ink-500); font-size: var(--fs-xs); line-height: 1.45; }
.world--dev .world-list small { color: var(--ink-200); }
.world-list .wl-price { font-weight: 800; font-size: var(--fs-xs); white-space: nowrap; color: var(--green-700); background: var(--green-50); padding: .3rem .6rem; border-radius: var(--pill); }
.world--dev .world-list .wl-price { color: var(--orange-400); background: rgba(255, 163, 0, .1); }
.code-line { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-xs); color: #8fb3a3; }
.world--dev .code-line { color: var(--orange-400); }

/* ---------- Autopilot-Karte ---------- */
.autopilot {
    position: relative; display: grid; gap: 0; overflow: hidden;
    border-radius: var(--radius-xl); background: var(--white); border: 2px solid var(--green-600);
    box-shadow: 0 30px 60px -30px rgba(0, 86, 52, .45);
}
@media (min-width: 960px) { .autopilot { grid-template-columns: 1.15fr .85fr; } }
.autopilot-main { padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); }
.autopilot-side { padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); background: var(--green-950); color: #cfe3da; display: flex; flex-direction: column; gap: 1.25rem; }
.autopilot-side h3 { color: var(--white); font-size: 1.125rem; }
.autopilot-top { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; justify-content: space-between; }
.autopilot h3.ap-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -.03em; margin-top: 1rem; }
.ap-sub { color: var(--ink-500); margin-top: .5rem; }
.ap-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem .75rem; margin-top: 1.5rem; }
.ap-price .amount { font-size: clamp(2.75rem, 2rem + 2.5vw, 3.75rem); font-weight: 800; letter-spacing: -.05em; color: var(--ink-900); line-height: 1; }
.ap-price .per { font-weight: 700; color: var(--ink-500); }
.ap-note { font-size: var(--fs-xs); color: var(--ink-500); margin-top: .5rem; }
.checklist { list-style: none; padding: 0; display: grid; gap: .8rem; }
.checklist li { display: grid; grid-template-columns: 24px 1fr; gap: .75rem; align-items: start; }
.checklist li::before {
    content: ''; width: 24px; height: 24px; border-radius: 50%; margin-top: .1rem;
    background: var(--green-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.checklist--compact { gap: .55rem; font-size: var(--fs-sm); }
.checklist--orange li::before { background-color: var(--orange-500); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23070b14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.checklist strong { color: var(--ink-900); }
.autopilot-side .checklist strong { color: var(--white); }
.ap-cta { margin-top: 1.75rem; display: grid; gap: .75rem; }
@media (min-width: 560px) { .ap-cta { grid-template-columns: auto auto; justify-content: start; } }
.objection { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1rem; }
.objection:first-of-type { border-top: 0; padding-top: 0; }
.objection h4 { color: var(--white); font-size: var(--fs-sm); font-weight: 700; letter-spacing: -.01em; }
.objection p { font-size: var(--fs-sm); color: #b4cfc3; margin-top: .3rem; }

/* ---------- Preisvergleich einmalig vs. laufend ---------- */
.plans { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .plans { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.plan { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; background: var(--white); display: flex; flex-direction: column; gap: 1rem; }
.plan--featured { border: 2px solid var(--green-600); box-shadow: var(--shadow); }
.plan-price { font-size: 2rem; font-weight: 800; color: var(--ink-900); letter-spacing: -.04em; line-height: 1.1; }
.plan-price small { font-size: var(--fs-sm); color: var(--ink-500); font-weight: 600; letter-spacing: 0; }
.plan .btn { margin-top: auto; }

/* ---------- Lead-Magnet 147 € ---------- */
.magnet {
    position: relative; overflow: hidden; border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--green-800), var(--green-950) 65%);
    color: #d5e7df; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
    display: grid; gap: 2rem; align-items: center;
}
.magnet::after { content: ''; position: absolute; width: 520px; height: 520px; right: -180px; bottom: -260px; background: radial-gradient(circle, rgba(255, 163, 0, .28), transparent 65%); pointer-events: none; }
@media (min-width: 960px) { .magnet { grid-template-columns: 1.2fr .8fr; gap: 3rem; } }
.magnet h2 { color: var(--white); }
.magnet .eyebrow { color: var(--orange-400); }
.magnet .lead { color: #bcd6ca; margin-top: 1rem; }
.magnet .checklist { margin-top: 1.5rem; }
.magnet .checklist strong { color: var(--white); }
.magnet-box { position: relative; z-index: 1; background: var(--white); color: var(--ink-700); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-lg); }
.magnet-box .seal { position: absolute; top: -34px; right: -10px; --size: 104px; }
@media (min-width: 960px) { .magnet-box .seal { top: -46px; right: -30px; --size: 118px; } }
.magnet-price { display: flex; align-items: baseline; gap: .5rem; }
.magnet-price .amount { font-size: 3.5rem; font-weight: 800; letter-spacing: -.05em; color: var(--ink-900); line-height: 1; }
.magnet-price .strike { color: var(--ink-400); font-weight: 600; }
.magnet-box .fine { font-size: var(--fs-xs); color: var(--ink-500); margin-top: .75rem; }
.magnet-steps { list-style: none; padding: 0; display: grid; gap: .5rem; margin-top: 1.25rem; font-size: var(--fs-sm); counter-reset: ms; }
.magnet-steps li { display: flex; gap: .65rem; align-items: center; counter-increment: ms; }
.magnet-steps li::before { content: counter(ms); width: 24px; height: 24px; border-radius: 50%; display: grid; place-content: center; background: var(--green-50); color: var(--green-700); font-weight: 800; font-size: .75rem; flex: none; }
.guarantee { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--radius); background: var(--surface); font-size: var(--fs-sm); margin-top: 1rem; }
.guarantee svg { width: 22px; height: 22px; color: var(--green-600); flex: none; margin-top: .1rem; }

/* ---------- Tools als Beweis ---------- */
.tool-card {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .75rem; text-decoration: none;
    border-radius: var(--radius-lg); padding: 1.75rem; color: var(--ink-200);
    background: linear-gradient(160deg, var(--ink-800), var(--ink-900)); border: 1px solid rgba(255, 255, 255, .08);
    transition: transform .25s var(--ease), border-color .25s;
}
.tool-card:hover { transform: translateY(-4px); border-color: rgba(255, 163, 0, .5); color: var(--ink-200); }
.tool-card h3 { color: var(--white); }
.tool-card p { font-size: var(--fs-sm); }
.tool-card .tool-meta { display: flex; gap: .5rem; flex-wrap: wrap; }
.tool-card .link-arrow { color: var(--orange-400); margin-top: auto; }
.tool-card .tool-visual { height: 120px; border-radius: var(--radius); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); display: grid; place-content: center; }
.tool-card .tool-visual svg { width: 100%; height: 110px; }

/* ---------- Vergleich ---------- */
.compare { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-col { border-radius: var(--radius-lg); padding: 1.75rem; }
.compare-col--them { background: var(--ink-50); border: 1px solid var(--line); }
.compare-col--us { background: var(--white); border: 2px solid var(--green-600); box-shadow: var(--shadow); }
.compare-col h3 { margin-bottom: 1rem; }
.x-list { list-style: none; padding: 0; display: grid; gap: .7rem; color: var(--ink-500); }
.x-list li { display: grid; grid-template-columns: 22px 1fr; gap: .65rem; }
.x-list li::before { content: '×'; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-100); color: var(--ink-500); display: grid; place-content: center; font-weight: 800; line-height: 1; }

/* ---------- Schritte ---------- */
.steps { display: grid; gap: 1.25rem; counter-reset: step; list-style: none; padding: 0; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } .steps--4 { grid-template-columns: repeat(4, 1fr); } }
.steps > li { counter-increment: step; position: relative; padding: 1.75rem 1.5rem 1.5rem; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); }
.steps > li::before {
    content: counter(step, decimal-leading-zero); display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700; font-size: var(--fs-sm); color: var(--green-600); margin-bottom: .75rem;
}
.steps h3 { margin-bottom: .4rem; }
.steps p { color: var(--ink-500); font-size: var(--fs-sm); }

/* ---------- Fazit / Kurzantwort (GEO) ---------- */
.answer-box {
    border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; background: var(--white);
    border: 1px solid var(--line); border-left: 5px solid var(--green-600); box-shadow: var(--shadow-sm);
}
.answer-box h2 { font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: .75rem; }
.answer-box ul { display: grid; gap: .45rem; margin-top: .25rem; }
.answer-box li::marker { color: var(--green-600); }

/* ---------- Testimonials ---------- */
.quote { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.quote blockquote { font-size: var(--fs-lg); color: var(--ink-900); font-weight: 600; line-height: 1.5; }
.quote figcaption { font-size: var(--fs-sm); color: var(--ink-500); }
.quote figcaption strong { color: var(--ink-900); display: block; }
.stars { color: var(--orange-500); letter-spacing: .1em; font-size: 1.05rem; }

/* ---------- Referenzen ---------- */
.ref-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--white); border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s; }
.ref-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: inherit; }
.ref-card img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; width: 100%; background: var(--surface); border-bottom: 1px solid var(--line); }
.ref-card .ref-body { padding: 1.25rem 1.375rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.ref-card p { font-size: var(--fs-sm); color: var(--ink-500); }
.ref-card .ref-url { margin-top: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--green-600); }

/* ---------- Zwei-Klick-Einbettung (Video, Podcast) ---------- */
.embed-consent {
    position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-900); color: var(--ink-200);
    aspect-ratio: 16 / 9; display: grid; place-content: center; text-align: center; padding: 1.5rem; gap: .75rem;
}
.embed-consent--audio { aspect-ratio: auto; min-height: 220px; }
.embed-consent img.embed-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.embed-consent > *:not(img) { position: relative; }
.embed-consent > svg { width: 44px; height: 44px; justify-self: center; color: var(--orange-500); }
.embed-consent p { font-size: var(--fs-xs); max-width: 420px; margin-inline: auto; color: var(--ink-200); }
.embed-consent p a { color: var(--white); }
.embed-consent .btn { justify-self: center; }
.embed-frame { border-radius: var(--radius-lg); overflow: hidden; }
.embed-frame iframe { width: 100%; border: 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .75rem; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: var(--green-100); box-shadow: var(--shadow-sm); }
.faq summary {
    list-style: none; cursor: pointer; padding: 1.1rem 3.25rem 1.1rem 1.25rem; position: relative;
    font-weight: 700; color: var(--ink-900); line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ''; position: absolute; right: 1.1rem; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
    background: var(--green-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007849' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
    transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 1.25rem 1.25rem; color: var(--ink-600); }
.faq .faq-a > * + * { margin-top: .75rem; }

/* ---------- CTA-Band ---------- */
.cta-band {
    border-radius: var(--radius-xl); padding: clamp(2rem, 1.25rem + 3vw, 3.5rem);
    background: var(--green-600); color: #e3f3eb; display: grid; gap: 1.5rem; align-items: center;
    position: relative; overflow: hidden;
}
.cta-band::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(90deg, transparent, #000); -webkit-mask-image: linear-gradient(90deg, transparent, #000); }
.cta-band > * { position: relative; }
@media (min-width: 960px) { .cta-band { grid-template-columns: 1.3fr auto; } }
.cta-band h2 { color: var(--white); font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); }
.cta-band p { margin-top: .6rem; color: #d2ecdf; }
.cta-band .cta-alt { font-size: var(--fs-sm); margin-top: .75rem; color: #d2ecdf; }
.cta-band .cta-alt a { color: var(--white); font-weight: 700; }

/* ---------- Unterseiten-Elemente ---------- */
.breadcrumb { font-size: var(--fs-xs); margin-bottom: 1.25rem; }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; color: #93b5a6; }
.breadcrumb li + li::before { content: '/'; margin-right: .35rem; opacity: .6; }
.breadcrumb a { color: #cfe3da; text-decoration: none; }
.breadcrumb a:hover { color: var(--white); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--white); }
.meta-line { font-size: var(--fs-xs); color: var(--ink-400); display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.hero .meta-line { color: #93b5a6; margin-top: 1.5rem; }

.split-media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.feature-list { display: grid; gap: 1.25rem; }
.feature { display: grid; grid-template-columns: 44px 1fr; gap: 1rem; }
.feature .card-icon { width: 44px; height: 44px; }
.feature h3 { font-size: 1.0625rem; }
.feature p { color: var(--ink-500); font-size: var(--fs-sm); margin-top: .25rem; }

.notice { border-radius: var(--radius); padding: 1rem 1.25rem; background: var(--orange-100); color: var(--ink-900); font-size: var(--fs-sm); border: 1px solid #ffd98a; }
.notice--green { background: var(--green-50); border-color: var(--green-100); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 560px; }
.table th, .table td { padding: .875rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { background: var(--surface); color: var(--ink-900); font-weight: 700; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .yes { color: var(--green-700); font-weight: 700; }

/* Fliesstext (Recht, Blog) */
.prose { max-width: 760px; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); margin-top: 2.2em; }
.prose h3 { font-size: 1.1875rem; margin-top: 1.8em; }
.prose h4 { font-size: 1.0625rem; margin-top: 1.5em; }
.prose ul, .prose ol { display: grid; gap: .4em; }
.prose blockquote { border-left: 4px solid var(--green-600); padding: .25rem 0 .25rem 1.25rem; color: var(--ink-600); font-style: italic; }
.prose img { border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { border: 1px solid var(--line); padding: .6rem .75rem; text-align: left; vertical-align: top; }
.prose th { background: var(--surface); }
.prose .fazit-box, .prose .answer-box { margin-top: 2em; }

/* Blog-Uebersicht */
.post-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--white); text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: inherit; }
.post-card img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.post-card .post-body { padding: 1.25rem 1.375rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.post-card h3 { font-size: 1.125rem; }
.post-card p { font-size: var(--fs-sm); color: var(--ink-500); }
.post-card time { font-size: var(--fs-xs); color: var(--ink-400); }

/* Autorbox */
.author { display: flex; gap: 1rem; align-items: center; padding: 1.25rem; border-radius: var(--radius-lg); background: var(--surface); }
.author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.author strong { color: var(--ink-900); }
.author p { font-size: var(--fs-sm); color: var(--ink-500); }

/* ---------- Formular (Mehrschritt-Anfrage) ---------- */
.form-shell { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden; }
.form-progress { height: 6px; background: var(--ink-100); }
.form-progress span { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--green-600), var(--green-500)); transition: width .35s var(--ease); }
.form-body { padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
.form-step-label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-400); text-transform: uppercase; letter-spacing: .08em; }
fieldset { border: 0; padding: 0; min-width: 0; }
fieldset + fieldset { margin-top: 2.25rem; }
legend:focus { outline: none; }
legend { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 800; color: var(--ink-900); letter-spacing: -.02em; line-height: 1.25; margin-bottom: .35rem; padding: 0; }
.legend-hint { color: var(--ink-500); font-size: var(--fs-sm); margin-bottom: 1.25rem; }
.options { display: grid; gap: .625rem; }
@media (min-width: 640px) { .options--2 { grid-template-columns: 1fr 1fr; } }
.option { position: relative; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option label {
    display: grid; grid-template-columns: 22px 1fr; column-gap: .875rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--radius);
    border: 2px solid var(--line); background: var(--white); cursor: pointer; font-weight: 600; color: var(--ink-900); line-height: 1.35;
    transition: border-color .15s, background-color .15s, box-shadow .15s; min-height: 60px;
}
.option label small { grid-column: 2; display: block; font-weight: 500; color: var(--ink-500); font-size: var(--fs-xs); margin-top: .15rem; }
.option label::before {
    content: ''; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink-200); flex: none; background: var(--white); grid-row: 1 / span 2;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.option input[type="checkbox"] + label::before { border-radius: 6px; }
.option input:checked + label { border-color: var(--green-600); background: var(--green-50); }
.option input:checked + label::before { border-color: var(--green-600); background: var(--green-600); box-shadow: inset 0 0 0 4px var(--white); }
.option input[type="checkbox"]:checked + label::before { box-shadow: none; background: var(--green-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.option input:focus-visible + label { outline: 3px solid var(--orange-500); outline-offset: 2px; }
.field { display: grid; gap: .4rem; }
.field + .field { margin-top: 1rem; }
.field-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } .field-row .field + .field { margin-top: 0; } }
.field-row + .field, .field + .field-row, .field-row + .field-row { margin-top: 1rem; }
.field label, .field .label { font-weight: 700; color: var(--ink-900); font-size: var(--fs-sm); }
.field .opt { font-weight: 500; color: var(--ink-400); }
.input, .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field textarea, .field select {
    width: 100%; min-height: 52px; padding: .8rem 1rem; border-radius: 12px; border: 2px solid var(--ink-100); background: var(--white);
    transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 4px rgba(0, 120, 73, .14); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b42318; }
.field-error { color: #b42318; font-size: var(--fs-xs); font-weight: 600; }
.consent-check { display: grid; grid-template-columns: 22px 1fr; gap: .75rem; font-size: var(--fs-sm); color: var(--ink-600); align-items: start; margin-top: 1.25rem; }
.consent-check input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--green-600); }
.form-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.form-nav .btn-back { white-space: nowrap; background: none; border: 0; font-weight: 700; color: var(--ink-500); padding: .75rem .25rem; }
.form-nav .btn-back:hover { color: var(--ink-900); }
.form-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--fs-xs); color: var(--ink-500); margin-top: 1rem; list-style: none; padding: 0; }
.form-trust li { display: inline-flex; gap: .4rem; align-items: center; }
.form-trust svg { width: 14px; height: 14px; color: var(--green-600); }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.js .form-step[hidden] { display: none; }
.form-alert { border-radius: var(--radius); padding: 1rem 1.25rem; background: #fef3f2; color: #7a271a; border: 1px solid #fecdca; font-size: var(--fs-sm); margin-bottom: 1.25rem; }
.form-summary { font-size: var(--fs-sm); background: var(--surface); border-radius: var(--radius); padding: 1rem 1.25rem; color: var(--ink-600); }
.form-summary dt { font-weight: 700; color: var(--ink-900); }
.form-summary dd { margin: 0 0 .5rem; }

/* Tool-Oberflaeche (PLZ, Einzugsgebiet) */
.tool-shell { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
.tool-controls { display: grid; gap: 1rem; align-items: end; }
@media (min-width: 800px) { .tool-controls { grid-template-columns: 2fr 1fr auto; } }
.tool-map { height: 480px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface); margin-top: 1.25rem; }
@media (max-width: 640px) { .tool-map { height: 360px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-950); color: var(--ink-200); padding-top: clamp(3rem, 2rem + 3vw, 5rem); font-size: var(--fs-sm); }
.site-footer a { color: var(--ink-200); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 2.5rem; } }
.footer-brand .brand { color: var(--white); display: inline-block; font-size: 1.75rem; }
.footer-brand p { margin-top: 1rem; color: var(--ink-400); max-width: 320px; }
.footer-title { color: var(--white); font-weight: 700; font-size: var(--fs-sm); margin-bottom: .9rem; }
.footer-list { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer-contact { font-style: normal; display: grid; gap: .55rem; }
.footer-bottom { margin-top: 3rem; padding-block: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; color: var(--ink-400); font-size: var(--fs-xs); }
.footer-bottom ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer-bottom button { background: none; border: 0; padding: 0; color: var(--ink-200); font-size: inherit; text-decoration: underline; }

/* Mobile Sticky-CTA */
.sticky-cta {
    position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 90;
    display: grid; grid-template-columns: auto 1fr; gap: .5rem; padding: .5rem;
    background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: var(--pill); box-shadow: var(--shadow-lg);
    transform: translateY(140%); transition: transform .3s var(--ease);
}
.sticky-cta.is-visible { transform: none; }
.sticky-cta a { min-height: 46px; }
.sticky-cta .sc-call { width: 46px; padding: 0; border-radius: 50%; background: var(--green-50); color: var(--green-700); display: grid; place-content: center; }
.sticky-cta .sc-call svg { width: 20px; height: 20px; }
@media (min-width: 900px) { .sticky-cta { display: none; } }
body.has-sticky { padding-bottom: 5rem; }
@media (min-width: 900px) { body.has-sticky { padding-bottom: 0; } }

/* Einblenden beim Scrollen (nur mit JS, sonst sofort sichtbar) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Druck */
@media print {
    .site-header, .site-footer, .sticky-cta, .mobile-nav, .cta-band, .quiz-card { display: none !important; }
    .hero { background: none; color: #000; padding: 1rem 0; }
    .hero h1 { color: #000; }
    body { font-size: 11pt; }
}

/* Abstaende zwischen aufeinanderfolgenden Bloecken */
.grid + .grid, .grid + .btn-row, .grid + .worlds, .compare + .btn-row, .plans + .btn-row, .steps + .btn-row, .grid + .notice { margin-top: 2rem; }

/* Drei Pakete */
@media (min-width: 1000px) { .plans--3 { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan { position: relative; }
.plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--orange-500); color: var(--ink-950); font-size: var(--fs-xs); font-weight: 800; padding: .35rem .85rem; border-radius: var(--pill); }
.plan--featured { box-shadow: 0 30px 60px -30px rgba(0, 86, 52, .45); }
.plan-terms { display: grid; gap: .75rem; margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-lg); background: var(--white); border: 1px solid var(--line); font-size: var(--fs-sm); }
@media (min-width: 900px) { .plan-terms { grid-template-columns: repeat(3, 1fr); } }
.plan-terms p { display: grid; grid-template-columns: 22px 1fr; gap: .6rem; color: var(--ink-600); }
.plan-terms svg { width: 20px; height: 20px; color: var(--green-600); margin-top: .1rem; }

/* ===================== Ads-Landingpage & Nutzen-Module (06.11.2026) ===================== */
/* Header/Footer im Layout "landing" */
.site-header--landing .container { justify-content: space-between; }
.header-phone--always { display: inline-flex !important; align-items: center; gap: .4rem; }
.header-phone--always svg { width: 18px; height: 18px; }
@media (max-width: 639px) { .header-phone--always span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.header-cta--always { display: inline-flex !important; }
@media (max-width: 639px) { .header-cta--always { padding: .6rem .9rem; font-size: var(--fs-xs); } }
.site-footer--landing { padding-top: 0; }
.site-footer--landing .footer-bottom { margin-top: 0; border-top: 0; }
.site-footer--landing a { color: var(--ink-200); }

/* Video-Platz: Platzhalter bis zur Lieferung, danach <video> */
.video-slot {
    position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-xl); overflow: hidden;
    background: radial-gradient(120% 120% at 30% 20%, var(--green-700), var(--green-950) 70%);
    border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
    display: grid; place-content: center; text-align: center; color: #d5e7df; padding: 1.5rem;
}
.video-slot > svg { width: 64px; height: 64px; margin: 0 auto .75rem; color: var(--ink-950); background: var(--orange-500); border-radius: 50%; padding: 18px; }
.video-slot strong { display: block; color: var(--white); font-size: 1.125rem; }
.video-slot span { display: block; font-size: var(--fs-sm); color: #a9c7ba; margin-top: .3rem; }
.video-slot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.video-slot--vertical { aspect-ratio: 9 / 16; max-width: 360px; margin-inline: auto; }
.video-caption { font-size: var(--fs-xs); color: var(--ink-400); margin-top: .6rem; text-align: center; }
.hero .video-caption { color: #a9c7ba; }

/* Kette: Suche -> Profil -> Website -> Anfrage */
.chain { list-style: none; padding: 0; display: grid; gap: 1rem; counter-reset: chain; }
@media (min-width: 900px) { .chain { grid-template-columns: repeat(4, 1fr); } }
.chain li { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem 1.25rem 1.4rem; }
.chain li::before { counter-increment: chain; content: counter(chain); position: absolute; top: -12px; left: 1.25rem; width: 28px; height: 28px; border-radius: 50%; background: var(--green-600); color: #fff; font-weight: 800; font-size: var(--fs-xs); display: grid; place-content: center; }
@media (min-width: 900px) { .chain li:not(:last-child)::after { content: "→"; position: absolute; right: -.95rem; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--green-600); font-size: 1.25rem; z-index: 1; } }
.chain h3 { font-size: 1.0625rem; margin-top: .5rem; }
.chain p { font-size: var(--fs-sm); color: var(--ink-500); margin-top: .4rem; }
.chain .chain-loss { display: block; margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed var(--line); font-size: var(--fs-xs); color: var(--orange-800); font-weight: 700; }

/* Drei Wege nach dem Video */
.ways { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(3, 1fr); } }
.way { border-radius: var(--radius-lg); padding: 1.5rem; background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .6rem; }
.way h3 { font-size: 1.125rem; }
.way p { font-size: var(--fs-sm); color: var(--ink-500); }
.way--us { background: var(--green-950); border-color: var(--green-800); color: #d5e7df; box-shadow: 0 30px 60px -30px rgba(0, 86, 52, .6); }
.way--us h3 { color: var(--white); }
.way--us p { color: #bcd6ca; }
.way .way-note { margin-top: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--green-700); }
.way--us .way-note { color: var(--orange-400); }

/* Garantie */
.guarantee-box { display: grid; gap: 1.25rem; align-items: center; border-radius: var(--radius-xl); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--orange-100); border: 2px solid var(--orange-500); }
@media (min-width: 800px) { .guarantee-box { grid-template-columns: auto 1fr; gap: 2rem; } }
.guarantee-box > svg { width: 72px; height: 72px; color: var(--orange-800); }
.guarantee-box h2, .guarantee-box h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); }
.guarantee-box p { margin-top: .5rem; color: var(--ink-700); }
.guarantee-box .fine { font-size: var(--fs-xs); color: var(--ink-500); }

/* Screenshot im Browserrahmen */
.shot-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-lg); }
.shot-frame::before { content: ""; display: block; height: 26px; background: var(--surface) radial-gradient(circle at 14px 13px, #f87171 4px, transparent 5px), radial-gradient(circle at 30px 13px, #fbbf24 4px, transparent 5px); background-repeat: no-repeat; border-bottom: 1px solid var(--line); }
.shot-frame img { display: block; width: 100%; height: auto; border-radius: 0; }
.shot-placeholder { aspect-ratio: 16 / 10; display: grid; place-content: center; text-align: center; padding: 1rem; background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 12px, var(--white) 12px, var(--white) 24px); color: var(--ink-500); font-size: var(--fs-sm); }
.shot-placeholder strong { color: var(--ink-800); display: block; }

/* Produkte aus der Werkstatt */
.products { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .products { grid-template-columns: repeat(3, 1fr); } }
.product { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink-800); border: 1px solid rgba(255, 255, 255, .08); color: var(--ink-200); text-decoration: none; transition: transform .25s var(--ease), border-color .25s; }
a.product:hover { transform: translateY(-3px); border-color: var(--orange-500); color: var(--ink-200); }
.product img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 0; }
.product .product-visual { aspect-ratio: 16 / 10; display: grid; place-content: center; background: linear-gradient(160deg, var(--ink-700, #2a3441), var(--ink-900)); }
.product .product-visual svg { width: 56px; height: 56px; color: var(--orange-500); }
.product-body { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.product-body h3 { color: var(--white); font-size: 1.125rem; }
.product-body p { font-size: var(--fs-sm); color: var(--ink-200); }
.product-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.product .link-arrow { margin-top: auto; color: var(--orange-400); }

/* Person */
.person { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 800px) { .person { grid-template-columns: 140px 1fr; } }
.person img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 4px solid var(--white); box-shadow: var(--shadow-lg); }
.chain--solution .chain-loss { color: var(--green-700); }
.video-slot--demo { aspect-ratio: 1600 / 710; padding: 0; }
.shot-frame figcaption { padding: .7rem 1rem .85rem; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-700); border-top: 1px solid var(--line); }

/* Kundenstimmen mit Video (Ads-Seite) */
.voice { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.voice video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 35%; background: var(--surface); }
.voice blockquote { margin: 0; padding: 1.1rem 1.25rem .5rem; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-700); font-weight: 500; }
.voice figcaption { padding: 0 1.25rem 1.25rem; margin-top: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--green-700); }
@media (max-width: 699px) { .grid--4 > .voice { max-width: 420px; } }
/* Punkte unter dem Demo-Video */
.demo-points { display: grid; gap: .75rem 2.5rem; }
@media (min-width: 800px) { .demo-points { grid-template-columns: 1fr 1fr; } }
.demo-points + .grid { margin-top: 2.5rem; }

/* ---------- Sponsoring ---------- */
.sponsor-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .sponsor-grid { grid-template-columns: repeat(3, 1fr); } }
.sponsor-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 2rem 1.5rem 1.75rem; border-radius: var(--radius-lg); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none; transition: transform .2s, background .2s, border-color .2s; }
.sponsor-tile:hover { transform: translateY(-3px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.28); }
.sponsor-logo { height: 150px; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.sponsor-logo img { max-height: 150px; max-width: 100%; width: auto; height: auto; border-radius: 0; }
.sponsor-kicker { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-500); }
.sponsor-tile strong { font-size: var(--fs-lg); line-height: 1.25; }
.sponsor-text { color: rgba(255,255,255,.72); font-size: var(--fs-sm); }
.footer-sponsors { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; padding: 1.5rem 0; margin-top: 2rem; border-top: 1px solid rgba(255,255,255,.12); }
.footer-sponsors p { margin: 0; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.footer-sponsors a { display: inline-flex; opacity: .9; transition: opacity .2s; }
.footer-sponsors a:hover { opacity: 1; }
.footer-sponsors img { height: 52px; width: auto; border-radius: 0; }

/* =====================================================================
   Barrierefreiheit: Bedienfeld (assets/js/a11y.js) setzt Klassen auf <html>
   a11y-fs-1..3  Schrift größer · a11y-dark  Dunkler Modus · a11y-contrast  Hoher Kontrast
   a11y-links  Links hervorheben · a11y-read  Lesefreundlich · a11y-motion  Animationen aus
   a11y-cursor  Großer Mauszeiger
   ===================================================================== */
html.a11y-fs-1 { font-size: 112.5%; }
html.a11y-fs-2 { font-size: 125%; }
html.a11y-fs-3 { font-size: 143.75%; }

/* Dunkler Modus: helle Flächen werden dunkel, Text hell */
html.a11y-dark {
    color-scheme: dark;
    --white: #0d141d; --surface: #121b26; --line: #26344a;
    --ink-950: #ffffff; --ink-900: #f3f6fa; --ink-800: #e7edf4; --ink-700: #d9e1ea; --ink-600: #c5d0dc; --ink-500: #aebbca; --ink-400: #97a6b8;
    --ink-200: #2d3b50; --ink-100: #1d2838; --ink-50: #141e2b;
    --green-50: #0d2a1f; --green-100: #134031; --green-600: #17a56c; --green-700: #3fcf8e;
    --orange-100: #33260b; --orange-800: #ffbd4a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow: 0 6px 20px -8px rgba(0,0,0,.7); --shadow-lg: 0 24px 50px -20px rgba(0,0,0,.85);
}
/* Bereiche, die schon dunkel sind, behalten ihre Originalfarben */
html.a11y-dark :is(.section--dark, .section--forest, .hero, .card--dark, .world--dev, .autopilot-side, .magnet, .tool-card, .embed-consent, .site-footer, .video-slot, .way--us, .product, .chip--ink, .cta-band, .a11y-panel) {
    --white: #ffffff; --surface: #f5f8f6; --line: #e2e8f0;
    --ink-950: #070b14; --ink-900: #0b1220; --ink-800: #111a2e; --ink-700: #1e293b; --ink-600: #334155; --ink-500: #475569; --ink-400: #64748b;
    --ink-200: #cbd5e1; --ink-100: #e2e8f0; --ink-50: #f5f7fa;
    --green-50: #ecf6f1; --green-100: #d3ebe0; --green-600: #007849; --green-700: #005634;
    --orange-100: #fff1d6; --orange-800: #8a5000;
}
html.a11y-dark body { background: #0d141d; }
html.a11y-dark .site-header { background: rgba(13, 20, 29, .94); }
html.a11y-dark .site-header.is-scrolled { border-color: #26344a; }
html.a11y-dark .brand img { background: #fff; padding: 4px 8px; border-radius: 8px !important; box-sizing: content-box; }
html.a11y-dark .sticky-cta { background: rgba(13, 20, 29, .96); }
html.a11y-dark .btn--primary { background: #0b8050; color: #fff; }
html.a11y-dark .btn--primary:hover { background: #096b43; color: #fff; }
html.a11y-dark .menu-toggle span { background: #f3f6fa; }

/* Hoher Kontrast */
html.a11y-contrast { --ink-700: #000; --ink-600: #000; --ink-500: #111; --ink-400: #222; --line: #444; --green-600: #00512f; --green-700: #003d23; --orange-800: #5c3500; }
html.a11y-contrast :is(.section--dark, .section--forest, .hero, .card--dark, .world--dev, .autopilot-side, .magnet, .tool-card, .site-footer, .way--us, .product, .cta-band) { --ink-200: #fff; --ink-100: #fff; color: #fff; }
html.a11y-contrast :is(.section--dark, .section--forest, .hero, .magnet, .site-footer, .way--us, .cta-band, .autopilot-side) :is(p, li, small, span:not(.chip):not(.amount)) { color: #fff; }
html.a11y-contrast.a11y-dark { --ink-950: #fff; --ink-900: #fff; --ink-800: #fff; --ink-700: #fff; --ink-600: #fff; --ink-500: #f1f1f1; --ink-400: #e5e5e5; --line: #8a9bb0; --white: #000; --surface: #0a0a0a; --green-600: #23c07e; --green-700: #5fe3a6; --orange-800: #ffc966; }
html.a11y-contrast.a11y-dark body { background: #000; }
html.a11y-contrast :focus-visible { outline-width: 4px; }

/* Links hervorheben */
html.a11y-links a:not(.btn):not(.brand):not(.sponsor-tile):not(.ref-card):not(.product):not(.post-card) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px; font-weight: 700; }
html.a11y-links :is(.btn, .sponsor-tile, .ref-card, .product, .post-card) { outline: 2px dashed var(--orange-500); outline-offset: 3px; }

/* Lesefreundlich: mehr Abstand zwischen Buchstaben, Wörtern und Zeilen */
html.a11y-read body { letter-spacing: .03em; word-spacing: .12em; }
html.a11y-read :is(p, li, dd, td, blockquote) { line-height: 1.95 !important; }
html.a11y-read :is(h1, h2, h3) { letter-spacing: .01em; line-height: 1.3; }

/* Animationen stoppen */
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-motion.js .reveal { opacity: 1; transform: none; }

/* Großer Mauszeiger */
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l30 27-13 1 8 15-6 3-8-15-10 9z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; }
html.a11y-cursor :is(a, button, [role=button], label, summary, select), html.a11y-cursor :is(a, button, label, summary) * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 3l30 27-13 1 8 15-6 3-8-15-10 9z' fill='%23FFA300' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, pointer !important; }

/* Bedienfeld */
.a11y-fab {
    position: fixed; left: 1rem; bottom: 1rem; z-index: 96; width: 54px; height: 54px; border-radius: 50%;
    display: grid; place-items: center; border: 3px solid #fff; background: #0057b8; color: #fff; cursor: pointer;
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .5); transition: transform .2s;
}
.a11y-fab:hover { transform: scale(1.07); }
.a11y-fab svg { width: 30px; height: 30px; }
@media (max-width: 899px) { body.has-sticky .a11y-fab { bottom: 5.6rem; left: .9rem; width: 48px; height: 48px; } body.has-sticky .a11y-fab svg { width: 26px; height: 26px; } }
.a11y-panel {
    position: fixed; left: 1rem; bottom: 5.25rem; z-index: 97; width: min(380px, calc(100vw - 2rem)); max-height: min(78vh, 640px); overflow-y: auto;
    background: #fff; color: #1e293b; border: 1px solid #cbd5e1; border-radius: 22px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55);
    padding: 1.25rem; font-size: 1rem; line-height: 1.5;
}
@media (max-width: 899px) { body.has-sticky .a11y-panel { bottom: 9.5rem; max-height: calc(100vh - 11rem - var(--header-h)); } }
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.a11y-head h2 { font-size: 1.25rem; margin: 0; color: #0b1220; }
.a11y-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #cbd5e1; background: #f5f7fa; color: #0b1220; display: grid; place-items: center; cursor: pointer; flex: none; }
.a11y-x svg { width: 18px; height: 18px; }
.a11y-size { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: .75rem; border-radius: 14px; background: #f5f7fa; margin-bottom: .75rem; }
.a11y-size p { margin: 0; text-align: center; font-weight: 700; color: #0b1220; }
.a11y-size p small { display: block; font-weight: 500; color: #475569; font-size: .875rem; }
.a11y-size button { width: 48px; height: 48px; border-radius: 12px; border: 2px solid #0057b8; background: #fff; color: #0057b8; font-weight: 800; font-size: 1.125rem; cursor: pointer; }
.a11y-size button:disabled { opacity: .35; cursor: not-allowed; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.a11y-opt {
    display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; min-height: 92px; padding: .8rem; text-align: left;
    border-radius: 14px; border: 2px solid #e2e8f0; background: #fff; color: #0b1220; font-weight: 700; font-size: .95rem; line-height: 1.25; cursor: pointer;
}
.a11y-opt svg { width: 24px; height: 24px; color: #0057b8; }
.a11y-opt:hover { border-color: #0057b8; }
.a11y-opt[aria-pressed="true"] { background: #0057b8; border-color: #0057b8; color: #fff; }
.a11y-opt[aria-pressed="true"] svg { color: #fff; }
.a11y-reset { margin-top: .75rem; width: 100%; min-height: 48px; border-radius: 999px; border: 2px solid #0b1220; background: #fff; color: #0b1220; font-weight: 700; cursor: pointer; }
.a11y-note { margin: .75rem 0 0; font-size: .875rem; color: #475569; }
html.a11y-dark .a11y-panel { background: #121b26; color: #e7edf4; border-color: #26344a; }
html.a11y-dark .a11y-panel :is(h2, .a11y-size p) { color: #fff; }
html.a11y-dark .a11y-size, html.a11y-dark .a11y-x { background: #0d141d; border-color: #26344a; color: #fff; }
html.a11y-dark .a11y-size p small, html.a11y-dark .a11y-note { color: #aebbca; }
html.a11y-dark .a11y-opt, html.a11y-dark .a11y-size button, html.a11y-dark .a11y-reset { background: #0d141d; color: #fff; border-color: #34465f; }
html.a11y-dark .a11y-opt svg, html.a11y-dark .a11y-size button { color: #7db8ff; }
html.a11y-dark .a11y-opt[aria-pressed="true"] { background: #0057b8; border-color: #7db8ff; color: #fff; }
html.a11y-dark .a11y-opt[aria-pressed="true"] svg { color: #fff; }
@media print { .a11y-fab, .a11y-panel { display: none !important; } }
/* Größere Schrift: lange Wörter trennen statt seitlich überlaufen */
html[class*="a11y-fs-"] body * { min-width: 0; }
html[class*="a11y-fs-"] :is(h1, h2, h3, h4, p, li, dt, dd, th, td, label, legend, .eyebrow, .lead, strong, small, .chip, .btn) { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
html[class*="a11y-fs-"] table { table-layout: fixed; width: 100%; }
@media (max-width: 600px) { html.a11y-fs-3 { font-size: 131.25%; } }

/* ===================================================================== */
/* StarPitch-spezifisch (06.11.2026)                                      */
/* ===================================================================== */
.sp-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: var(--ink-700); text-decoration: none; }
.sp-brand b { color: var(--green-600); font-weight: 800; }
.sp-brand--hell, .sp-brand--hell b { color: #fff; }
.sp-brand--hell b { color: var(--orange-500); }
.sp-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: var(--green-600); color: #fff; }
.sp-mark svg { width: 1.2rem; height: 1.2rem; }
.sp-login { font-weight: 600; }

/* Medienrahmen: Browser-/Programmfenster-Optik */
.sp-frame { position: relative; border-radius: 14px; overflow: hidden; background: #0c0f10; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.08); }
.sp-frame::before { content: ""; display: block; height: 28px; background: #1b2022 radial-gradient(circle at 16px 14px, #ff5f57 5px, transparent 6px), #1b2022; background-image: radial-gradient(circle at 16px 14px, #ff5f57 5px, transparent 6px), radial-gradient(circle at 34px 14px, #febc2e 5px, transparent 6px), radial-gradient(circle at 52px 14px, #28c840 5px, transparent 6px); }
.sp-frame img, .sp-frame video { display: block; width: 100%; height: auto; }
.sp-frame--hell { background: #fff; border-color: var(--line); }
.sp-frame--hell::before { background-color: #eef1f4; }
.sp-phone { position: relative; border-radius: 34px; padding: 10px; background: #0b1220; box-shadow: var(--shadow-lg); max-width: 300px; margin-inline: auto; }
.sp-phone img, .sp-phone video { display: block; width: 100%; height: auto; border-radius: 26px; }
.sp-shot { border-radius: 12px; box-shadow: var(--shadow); border: 1px solid var(--line); display: block; width: 100%; height: auto; background: #fff; }

/* Hero mit Video */
.sp-hero-media { position: relative; }
.sp-hero-media .sp-badge { position: absolute; left: -12px; bottom: 18px; background: #fff; color: var(--ink-700); border-radius: 14px; padding: .7rem .9rem; box-shadow: var(--shadow-lg); display: flex; gap: .6rem; align-items: center; font-size: .9rem; max-width: 280px; }
.sp-hero-media .sp-badge strong { display: block; color: var(--ink-900); }
.sp-badge .sp-ping { width: 12px; height: 12px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 0 rgba(10,154,95,.6); animation: sp-ping 1.8s infinite; flex-shrink: 0; }
@keyframes sp-ping { 0% { box-shadow: 0 0 0 0 rgba(10,154,95,.55); } 80%, 100% { box-shadow: 0 0 0 14px rgba(10,154,95,0); } }
@media (prefers-reduced-motion: reduce) { .sp-badge .sp-ping { animation: none; } }
@media (max-width: 720px) { .sp-hero-media .sp-badge { position: static; margin-top: .8rem; max-width: none; } }

/* Schritte mit Medien */
.sp-step { display: grid; gap: 2rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sp-step { grid-template-columns: 5fr 7fr; } .sp-step--rev { grid-template-columns: 7fr 5fr; } .sp-step--rev > :first-child { order: 2; } }
.sp-step + .sp-step { margin-top: 4.5rem; }
.sp-step-nr { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--green-600); color: #fff; font-weight: 800; margin-bottom: .8rem; }
.sp-duo { display: grid; grid-template-columns: 3fr 1fr; gap: 1.2rem; align-items: end; }
@media (max-width: 600px) { .sp-duo { grid-template-columns: 1fr; } .sp-duo .sp-phone { max-width: 220px; } }

/* Einsatzbeispiele */
.sp-usecase { display: flex; flex-direction: column; gap: .5rem; }
.sp-usecase .card-kicker { margin: 0; }
.sp-usecase .link-arrow { margin-top: auto; }

/* Video-Steuerung, wenn Bewegung reduziert ist */
video[data-autoplay] { background: #0c0f10; }
.sp-video-hinweis { font-size: .85rem; color: var(--ink-500); margin-top: .5rem; }
/* Rechtstexte aus boovis.com (AVV) */
.sp-legal .legal-meta { color: var(--ink-500); font-size: .9rem; }
.sp-legal .avv-hinweis { background: var(--green-50); border-left: 4px solid var(--green-600); padding: 1rem 1.2rem; border-radius: 8px; }
.sp-legal .avv-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1rem 0; display: block; overflow-x: auto; }
.sp-legal .avv-table th, .sp-legal .avv-table td { border: 1px solid var(--line); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.sp-legal .avv-table th { background: var(--ink-50); }
/* Passwort-Schranke */
.sp-zugang { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, var(--green-950), var(--green-800)); padding: 1rem; }
.sp-zugang-box { background: #fff; border-radius: 20px; padding: 2rem; max-width: 420px; width: 100%; box-shadow: var(--shadow-lg); }
.sp-zugang-box h1 { font-size: 1.5rem; margin: 1rem 0 .5rem; }
.sp-zugang-form { display: grid; gap: .6rem; margin: 1.2rem 0; }
.sp-zugang-form input { font: inherit; padding: .8rem 1rem; border: 1px solid var(--ink-200); border-radius: 10px; }
.sp-zugang-form input:focus-visible { outline: 3px solid var(--orange-500); outline-offset: 1px; }
.sp-zugang-fehler { color: #b42318; font-weight: 600; margin: 0; }
.sp-zugang-kunde { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; display: grid; gap: .5rem; }
.sp-shot--dunkel { border: 0; background: #0b1220; box-shadow: var(--shadow-lg); }
/* Startseite: Video im Hero größer, Hinweis darunter statt über dem Gesicht */
@media (min-width: 1024px) { .hero-grid--sp { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.sp-hero-media .sp-badge { left: auto; right: -10px; bottom: -34px; }
.sp-step h3 { margin-bottom: .6rem; }
.sp-mark-img { width: 2rem; height: 2rem; border-radius: 0 !important; }
.site-footer .sp-brand, .site-footer .sp-brand span { color: #fff; }
.site-footer .sp-brand b { color: var(--orange-500); }
.sp-cta .lead { color: rgba(255,255,255,.85); }
@media (min-width: 900px) { #funktionen .feature-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.section--dark .center.mt-6 { margin-top: 3rem; }