/* ==========================================================================
   Digital Domination — main.css
   Dark-first, system-font, GEO-friendly. No webfonts. No external deps.
   ========================================================================== */

/* --- Design tokens --- */
:root {
    --bg-0: #0A0E1A;
    --bg-1: #0F1524;
    --bg-2: #141B2E;
    --bg-3: #1B2340;

    --fg-0: #EAEEF7;
    --fg-1: #B8C1D6;
    --fg-2: #7C869E;     /* 5.00:1 on bg-1 — WCAG AA */
    --fg-3: #8892A7;     /* 5.82:1 on bg-1 — WCAG AA (was #4A5268, 2.34:1 FAIL) */

    --accent: #22D3EE;
    --accent-strong: #06B6D4;
    --accent-glow: rgba(34, 211, 238, 0.16);
    --accent-line: rgba(34, 211, 238, 0.35);

    --success: #4ADE80;
    --danger:  #F87171;
    --warning: #FBBF24;

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;

    --shadow-card: 0 1px 2px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.35);
    --shadow-glow: 0 0 0 1px var(--accent-line), 0 8px 40px var(--accent-glow);

    --fs-xs:   0.8125rem;   /* 13 */
    --fs-sm:   0.9375rem;   /* 15 */
    --fs-base: 1rem;        /* 16 */
    --fs-md:   1.125rem;    /* 18 */
    --fs-lg:   1.375rem;    /* 22 */
    --fs-xl:   1.75rem;     /* 28 */
    --fs-2xl:  2.5rem;      /* 40 */
    --fs-3xl:  3.5rem;      /* 56 */

    --line-tight: 1.15;
    --line-normal: 1.55;
    --line-loose: 1.7;

    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --container: 1180px;
    --gutter: clamp(1rem, 4vw, 2rem);

    --t-fast: 0.12s cubic-bezier(0.2, 0, 0, 1);
    --t-med:  0.24s cubic-bezier(0.2, 0, 0, 1);
    --t-slow: 0.6s  cubic-bezier(0.2, 0, 0, 1);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }
body {
    margin: 0;
    background: var(--bg-0);
    color: var(--fg-0);
    font: 400 var(--fs-base)/var(--line-normal) var(--font-sans);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
a { color: var(--fg-0); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }

/* --- Background atmosphere --- */
body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(1000px 600px at 15% -10%, rgba(34, 211, 238, 0.08), transparent 60%),
        radial-gradient(900px 500px at 100% 10%, rgba(99, 102, 241, 0.06), transparent 60%),
        radial-gradient(1200px 700px at 50% 120%, rgba(34, 211, 238, 0.04), transparent 70%);
}
body > * { position: relative; z-index: 1; }

/* --- Typography --- */
h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: var(--line-tight); letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: var(--fs-3xl); letter-spacing: -0.035em; font-weight: 800; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.03em; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { margin: 0 0 1em; color: var(--fg-1); }
.lead { font-size: var(--fs-md); color: var(--fg-1); line-height: var(--line-loose); max-width: 60ch; }
.eyebrow { display: inline-block; font-size: var(--fs-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); padding: 0.35em 0.7em; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); background: var(--accent-glow); margin-bottom: 1rem; }
.accent { color: var(--accent); }
code, kbd { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-2); padding: 0.12em 0.4em; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* --- Layout --- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.main { padding-block: 0 clamp(3rem, 8vw, 6rem); min-height: 60vh; }
.section { padding-block: clamp(3rem, 8vw, 6rem); }
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section__head { max-width: 780px; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.section__head h2 { margin-bottom: 0.75rem; }
.section__head .lead { color: var(--fg-1); }
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* --- Skip link --- */
.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 1000; padding: 0.75em 1em; background: var(--accent); color: var(--bg-0); font-weight: 600; border-radius: var(--radius-md); transition: top var(--t-med); }
.skip-link:focus { top: 1rem; color: var(--bg-0); }

/* --- Header --- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(10, 14, 26, 0.82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
.logo { display: inline-flex; align-items: center; color: var(--fg-0); }
.logo:hover { color: var(--fg-0); }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; }
.site-nav a { color: var(--fg-1); font-size: var(--fs-sm); font-weight: 500; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--fg-0); }
.site-nav a[aria-current="page"] { position: relative; }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); border-radius: 2px; }
.site-header__right { display: flex; align-items: center; gap: 0.75rem; }
.lang-switch { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; color: var(--fg-1); padding: 0.45em 0.75em; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--t-fast), color var(--t-fast); }
.lang-switch:hover { color: var(--accent); border-color: var(--accent-line); }

@media (max-width: 740px) {
    .site-nav { display: none; }
    .site-header__inner { gap: 0.75rem; }
}

/* --- Burger (mobile nav trigger) --- */
.burger { display: none; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.7rem; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.burger:hover { border-color: var(--accent-line); background: var(--accent-glow); }
.burger__line { display: block; width: 20px; height: 2px; background: var(--fg-0); margin: 4px 0; border-radius: 1px; transition: transform 0.24s, opacity 0.24s; }
.burger__line:first-child { margin-top: 0; }
.burger__line:last-child { margin-bottom: 0; }
body.nav-open .burger__line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger__line:nth-child(2) { opacity: 0; }
body.nav-open .burger__line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 740px) {
    .burger { display: block; }
    /* Compact the header: hide the CTA on mobile (it moves into the drawer). */
    .site-header__cta { display: none; }
}

/* --- Mobile drawer (hidden entirely on desktop, animated in on mobile) --- */
.mobile-drawer { display: none; }
@media (max-width: 740px) {
    .mobile-drawer { display: block; position: fixed; left: 0; right: 0; top: 64px; bottom: 0; z-index: 45; background: rgba(10, 14, 26, 0.97); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); padding: 1.5rem var(--gutter) 2.5rem; overflow-y: auto; transform: translateY(-8px); opacity: 0; transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med); visibility: hidden; }
    body.nav-open .mobile-drawer { opacity: 1; transform: translateY(0); visibility: visible; }
    body.nav-open { overflow: hidden; }
}
.mobile-drawer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mobile-drawer__nav a { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0.25rem; font-size: var(--fs-lg); font-weight: 600; color: var(--fg-0); border-bottom: 1px solid var(--border); }
.mobile-drawer__nav a::after { content: "→"; color: var(--fg-3); font-family: var(--font-mono); font-weight: 400; transition: transform var(--t-fast), color var(--t-fast); }
.mobile-drawer__nav a:hover::after,
.mobile-drawer__nav a[aria-current="page"]::after { color: var(--accent); transform: translateX(4px); }
.mobile-drawer__nav a[aria-current="page"] { color: var(--accent); }
.mobile-drawer__footer { margin-top: 2rem; display: grid; gap: 1rem; justify-items: stretch; }

/* --- Pulsating tech-stack dots (footer) --- */
.tech-stack-live { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.9em 1.1em; margin-left: 0.5em; }
.tech-item { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-mono); color: var(--fg-2); }
.pulse-dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--success); position: relative; vertical-align: middle; }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--success); animation: pulse-dot 2.2s ease-in-out infinite; pointer-events: none; }
.pulse-dot--inline { width: 0.45em; height: 0.45em; margin-right: 0.5em; }

/* --- Page meta (visible "last updated" signal for AI recency) --- */
.page-meta { margin: 0.75rem 0 0; color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; }
.page-meta--pricing { color: var(--fg-2); margin-top: 1rem; }
.tech-item:nth-child(1) .pulse-dot { animation-delay: 0s; }
.tech-item:nth-child(2) .pulse-dot { animation-delay: 0.5s; }
.tech-item:nth-child(3) .pulse-dot { animation-delay: 1s; }
.tech-item:nth-child(4) .pulse-dot { animation-delay: 1.5s; }
/* Compositor-only animation: transform + opacity are GPU-painted, so
   this doesn't trigger per-frame layout/paint (fixes PSI "Avoid
   non-composited animations" — the old box-shadow pulse was CPU-bound). */
@keyframes pulse-dot {
    0%, 100% { transform: scale(1);   opacity: 0.6; }
    50%      { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pulse-dot::after { animation: none; }
}

/* --- Buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.75em 1.35em; font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.01em; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); text-decoration: none; white-space: nowrap; }
.btn--sm { padding: 0.55em 1em; font-size: var(--fs-xs); }
.btn--lg { padding: 0.95em 1.75em; font-size: var(--fs-base); }
.btn--primary { background: var(--accent); color: var(--bg-0); }
.btn--primary:hover { background: var(--accent-strong); color: var(--bg-0); }
.btn--primary:active { transform: translateY(1px); }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--fg-0); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
/* Secondary: filled neutral, used for low-emphasis actions like the
   onboarding "Back" button. Was rendering as a bare gold square because
   the class was used in templates but never had a rule. */
.btn--secondary { background: var(--bg-2); border-color: var(--border-strong); color: var(--fg-0); }
.btn--secondary:hover { background: var(--bg-3); border-color: var(--accent); color: var(--accent); }
.btn--secondary:active { transform: translateY(1px); }

/* --- Hero --- */
.hero { padding-block: clamp(3rem, 10vw, 7rem) clamp(3rem, 6vw, 4.5rem); }
@media (max-width: 540px) { .hero { padding-bottom: 5rem; } }
.hero__inner { max-width: 960px; }
.hero .eyebrow { margin-bottom: 1.5rem; }
.hero h1 { font-size: clamp(1.75rem, 6vw, 3.5rem); margin-bottom: 1.25rem; }
.hero h1 .accent { background: linear-gradient(110deg, var(--accent) 30%, #A5F3FC 60%, var(--accent) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__subtitle { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--fg-1); max-width: 62ch; line-height: var(--line-loose); margin-bottom: 2rem; }
@media (min-width: 541px) { .hero__subtitle-geo { display: block; } }
@media (max-width: 540px) { .hero__subtitle { margin-bottom: 3.5rem; } .hero__cta { margin-bottom: 1.5rem; } .hero__meta { padding-bottom: env(safe-area-inset-bottom, 0); } }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; margin-bottom: 2.5rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 1rem 2rem; font-size: var(--fs-sm); color: var(--fg-2); font-family: var(--font-mono); }
.hero__meta a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
.hero__meta a:hover, .hero__meta a:focus-visible { color: var(--accent); }
.hero__meta-arrow { color: var(--accent); }
.hero__meta > span { display: inline-flex; align-items: center; gap: 0.55em; position: relative; }
/* Static dot (no animation — the pulse is painted by ::after below). */
.hero__meta > span::before {
    content: "";
    width: 0.55em; height: 0.55em;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
/* Expanding ring — shares @keyframes pulse-dot (transform + opacity only,
   GPU-composited, no paint/layout per frame). */
.hero__meta > span::after {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 0.55em; height: 0.55em;
    margin-top: -0.275em;
    border-radius: 50%;
    background: var(--success);
    animation: pulse-dot 2.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.hero__meta > span:nth-child(1)::after { animation-delay: 0s; }
.hero__meta > span:nth-child(2)::after { animation-delay: 0.55s; }
.hero__meta > span:nth-child(3)::after { animation-delay: 1.1s; }
.hero__meta > span:nth-child(4)::after { animation-delay: 1.65s; }
@media (prefers-reduced-motion: reduce) {
    .hero__meta > span::after { animation: none; }
}

/* --- Service cards --- */
.service-card { background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; position: relative; overflow: hidden; transition: border-color var(--t-med), transform var(--t-med), box-shadow var(--t-med); display: flex; flex-direction: column; height: 100%; }
.service-card__list { flex: 1; }
.service-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-line), transparent); opacity: 0; transition: opacity var(--t-med); }
.service-card:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow-card), var(--shadow-glow); }
.service-card:hover::before { opacity: 1; }
.service-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.service-card__icon { font-family: var(--font-mono); font-size: 1.5rem; color: var(--accent); margin-bottom: 0; width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-glow); border: 1px solid var(--accent-line); border-radius: var(--radius-md); flex-shrink: 0; }
.service-card__audience { display: inline-block; padding: 0.3em 0.65em; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); background: var(--accent-glow); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* --- Compare bars (Vorher/Nachher inside service cards) --- */
.compare-bars { margin: 0 0 1.25rem; padding: 0.9rem 1rem 0.95rem; background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-md); }
.compare-bars__metric { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-2); margin-bottom: 0.7rem; }
.compare-bars__row { display: grid; grid-template-columns: minmax(5.5em, auto) 1fr minmax(3.5em, auto); align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.compare-bars__row:last-of-type { margin-bottom: 0; }
.compare-bars__label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-2); }
.compare-bars__track { height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; }
.compare-bars__fill { height: 100%; width: 0; border-radius: 3px; transition: width 1.4s cubic-bezier(0.2, 0, 0, 1); }
.compare-bars__fill--before { background: var(--fg-3); }
.compare-bars__fill--after { background: linear-gradient(90deg, var(--accent-strong), var(--accent)); box-shadow: 0 0 12px var(--accent-glow); }
.compare-bars[data-visible] .compare-bars__fill { width: var(--fill); }
.compare-bars__value { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-1); text-align: right; font-weight: 600; }
.compare-bars__badge { display: inline-block; margin-top: 0.7rem; padding: 0.25em 0.7em; background: var(--accent-glow); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); font-weight: 700; letter-spacing: 0.02em; }

@media (prefers-reduced-motion: reduce) {
    .compare-bars__fill { transition: none; width: var(--fill); }
}
.service-card__title { margin-bottom: 0.5rem; font-size: var(--fs-lg); }
.service-card__description { color: var(--fg-1); margin-bottom: 1rem; font-size: var(--fs-sm); line-height: var(--line-loose); }
.service-card__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.35rem; }
.service-card__list li { padding-left: 1.5em; position: relative; font-size: var(--fs-sm); color: var(--fg-1); }
.service-card__list li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-family: var(--font-mono); }
.service-card__price { display: flex; align-items: baseline; gap: 0.4em; padding-top: 1rem; border-top: 1px dashed var(--border); margin-top: auto; }
.service-card__price-label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.08em; }
.service-card__price-value { font-size: var(--fs-xl); font-weight: 700; color: var(--fg-0); letter-spacing: -0.02em; }
.service-card__price-unit { font-size: var(--fs-xs); color: var(--fg-2); }

/* --- Featured service-card variant (homepage "Am häufigsten gebucht") --- */
.service-card--featured { display: flex; flex-direction: column; }
.service-card--featured .service-card__description { min-height: 5.1em; }
.service-card--featured .compare-bars { width: 100%; max-width: 22rem; margin-left: auto; margin-right: auto; box-sizing: border-box; }
.service-card--featured .compare-bars__metric { text-align: center; }
.service-card--featured .compare-bars__badge { display: block; width: fit-content; margin: 0.7rem auto 0; }
.service-card--featured .service-card__price { justify-content: center; margin-top: auto; }

/* --- SVG icons inside icon containers (USPs + process steps) --- */
.feature__icon svg, .process-step__icon svg { width: 1.4em; height: 1.4em; display: block; }
.service-card__icon svg { width: 1.5em; height: 1.5em; display: block; }

/* --- Package-tier cycle toggle (Pflege monthly/annual switcher) --- */
.pflege-pkg { display: flex; flex-direction: column; gap: 0.85rem; }
.pflege-pkg__toggle {
    display: inline-flex;
    align-self: center;
    padding: 4px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 999px;
    gap: 2px;
    margin-top: 1rem;
}
.pflege-pkg__toggle-btn {
    appearance: none; -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    cursor: pointer;
    transition: all var(--t-fast);
}
.pflege-pkg__toggle-btn:hover { color: var(--fg-1); }
.pflege-pkg__toggle-btn.is-active { background: var(--accent); color: #06251A; font-weight: 600; }
.pflege-pkg__billing-note {
    margin: 0 auto;
    text-align: center;
    color: var(--fg-2);
    font-size: var(--fs-xs);
    font-style: italic;
    max-width: 56ch;
}

/* --- Package tiers --- */
.packages { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); margin-top: 2rem; }
.packages--single { max-width: 460px; }

/* --- Build landing-page pricing block --- */
.build-pricing__starting {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
    gap: 0.6rem 1rem;
    margin: 1.5rem auto 0;
    padding: 1.6rem 1.8rem;
    background: var(--bg-1);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-lg);
    max-width: 720px;
    text-align: center;
}
.build-pricing__starting-label {
    font-family: var(--font-mono); font-size: var(--fs-xs);
    color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.1em;
}
.build-pricing__starting-amount {
    font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.03em;
    color: var(--fg-0);
}
.build-pricing__starting-unit {
    font-size: var(--fs-sm); color: var(--fg-2);
    margin-right: 0.4rem;
}
.build-pricing__starting .btn { margin-left: auto; }
.build-pricing__note {
    margin: 1.5rem auto 0;
    max-width: 720px;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--fg-1);
    line-height: 1.55;
}
.build-pricing__note--accent {
    color: var(--accent);
    font-weight: 600;
}
.package--addon { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%); border-color: var(--accent-line); }
.package--addon .package__tier { color: var(--accent); }
.package { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 1.75rem; display: flex; flex-direction: column; position: relative; }
.package--featured { border-color: var(--accent-line); box-shadow: var(--shadow-glow); background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%); }
.package--featured::before { content: attr(data-label); position: absolute; top: -1px; right: 1.5rem; transform: translateY(-50%); background: var(--accent); color: var(--bg-0); font-size: var(--fs-xs); font-weight: 700; padding: 0.25em 0.75em; border-radius: var(--radius-sm); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.package__tier { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-2); margin-bottom: 0.5rem; }
.package__tier-row { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.package__tier-row .package__tier { margin-bottom: 0; }
.package__audience { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); padding: 0.25em 0.6em; background: var(--accent-glow); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); white-space: nowrap; line-height: 1.3; }
.package__name { font-size: var(--fs-xl); margin-bottom: 0.5rem; }
.package__price { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.25rem; }
.package__price-from { font-size: var(--fs-sm); color: var(--fg-2); font-weight: 500; margin-right: 0.3em; }
.package__unit { display: block; font-size: var(--fs-xs); color: var(--fg-2); margin-bottom: 1.25rem; font-family: var(--font-mono); }
.package__features { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.5rem; flex: 1; }
.package__features li { padding-left: 1.75em; position: relative; font-size: var(--fs-sm); color: var(--fg-1); }
.package__features li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; }
.package__features li.muted { color: var(--fg-3); }
.package__features li.muted::before { content: "—"; color: var(--fg-3); }
.package__cta { margin-top: auto; }

/* --- Testimonials --- */
.testimonial { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem; margin: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.testimonial__quote p { color: var(--fg-0); font-size: var(--fs-md); line-height: var(--line-loose); margin: 0; }
.testimonial__quote p::before { content: "\201C"; color: var(--accent); font-size: 1.8em; line-height: 0; vertical-align: -0.25em; margin-right: 0.05em; }
.testimonial__caption { display: flex; flex-direction: column; gap: 0.15rem; font-size: var(--fs-sm); margin-top: auto; }
.testimonial__author { color: var(--fg-0); font-weight: 600; }
.testimonial__role, .testimonial__company { color: var(--fg-2); }
.testimonial__company a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
.testimonial__company a:hover, .testimonial__company a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }

/* --- PageSpeed Insights badge strip (rendered between hero and USP on /start) --- */
.psi-strip { padding-block: 1.25rem; }
.psi-strip__inner {
    display: grid;
    gap: 0.85rem 1.5rem;
    grid-template-columns: 1fr;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.psi-strip__head {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.25rem;
}
.psi-strip__eyebrow {
    font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-2);
}
.psi-strip__chunk { display: inline; }
.psi-strip__chunk::after { content: " · "; color: var(--fg-3); }
.psi-strip__chunk--last::after { content: ""; }
@media (max-width: 540px) {
    .psi-strip__chunk { display: block; }
}
.psi-strip__eyebrow strong { color: var(--fg-1); font-weight: 600; }
.psi-strip__verify {
    font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3);
    text-decoration: none;
    transition: color var(--t-fast);
}
.psi-strip__verify-cta { color: var(--accent); font-weight: 600; transition: text-decoration var(--t-fast); }
.psi-strip__verify:hover .psi-strip__verify-cta,
.psi-strip__verify:focus-visible .psi-strip__verify-cta { text-decoration: underline; text-underline-offset: 0.2em; }
.psi-strip__scores {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 0.6rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.psi-score {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.2rem;
    padding: 0.65rem 0.6rem;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.psi-score__num {
    font-family: var(--font-mono);
    font-size: var(--fs-2xl);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}
.psi-score--good .psi-score__num { color: var(--accent); }
.psi-score--avg  .psi-score__num { color: var(--warning); }
.psi-score--bad  .psi-score__num { color: var(--danger); }
.psi-score__cat {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-2);
    text-align: center;
}
/* CTA row → contact page: separated by a top border, accent-coloured action */
.psi-strip__cta {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem 1.25rem;
    padding-top: 0.85rem;
    margin-top: 0.15rem;
    border-top: 1px dashed var(--border);
    text-decoration: none;
    transition: border-color var(--t-fast);
}
.psi-strip__cta:hover, .psi-strip__cta:focus-visible { border-top-color: var(--accent-line); }
.psi-strip__cta-prompt { color: var(--fg-1); font-size: var(--fs-sm); font-weight: 500; }
.psi-strip__cta-action { color: var(--accent); font-weight: 700; font-size: var(--fs-sm); transition: text-decoration var(--t-fast); }
.psi-strip__cta:hover .psi-strip__cta-action,
.psi-strip__cta:focus-visible .psi-strip__cta-action { text-decoration: underline; text-underline-offset: 0.2em; }
/* Security-Headers grade tile — a letter grade instead of a number, and
   the only clickable score (links through to securityheaders.com so the
   claim is verifiable, same pattern as the 'Check the report' PSI link).  */
.psi-score__link {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.2rem;
    width: 100%; height: 100%;
    color: inherit; text-decoration: none;
    transition: color var(--t-fast);
}
.psi-score--grade { padding: 0; }  /* link absorbs the tile padding */
.psi-score--grade .psi-score__link { padding: 0.65rem 0.6rem; }
.psi-score--grade .psi-score__num { letter-spacing: -0.02em; }  /* A+ needs less negative tracking than 100 */
.psi-score--grade:hover, .psi-score--grade:focus-within { border-color: var(--accent-line); }

@media (max-width: 540px) {
    .psi-strip__scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 5 items on a 2-col grid leaves the security tile stranded on its own
       row — give it the full width so it reads as a summary capstone
       rather than an orphan. */
    .psi-score--grade { grid-column: 1 / -1; }
}

/* --- CTA block --- */
.cta-block { padding-block: clamp(3rem, 7vw, 5rem); position: relative; border-top: 1px solid var(--border); margin-top: 4rem; }
.cta-block::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 0%, var(--accent-glow), transparent 70%); pointer-events: none; }
.cta-block__inner { position: relative; text-align: center; }
.cta-block__title { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 0.75rem; }
.cta-block__subtitle { color: var(--fg-1); max-width: 52ch; margin: 0 auto 2rem; font-size: var(--fs-md); }
.cta-block__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* --- Features list (used on start/leistungen) --- */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.feature { padding: 1.25rem 1.25rem 1.25rem 1.25rem; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md); }
.feature h3 { font-size: var(--fs-md); margin-bottom: 0.35rem; }
.feature p { font-size: var(--fs-sm); margin: 0; color: var(--fg-1); }

/* --- Centered feature pillboxes (homepage USP) --- */
.features--centered .feature { text-align: center; padding: 1.75rem 1.25rem 1.5rem; }
.features--centered .feature h3 { min-height: 3.5em; }
.features--centered .feature__icon {
    width: 2.75rem; height: 2.75rem;
    margin: 0 auto 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-glow);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 1.4rem;
    color: var(--accent);
}

/* --- Process steps (numbered workflow with icons) --- */
.process-steps {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    counter-reset: steps;
}
.process-step {
    position: relative;
    padding: 1.75rem 1.25rem 1.5rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    border-top: 2px solid var(--accent-line);
    transition: border-color var(--t-fast);
}
.process-step:hover { border-top-color: var(--accent); }
.process-step__icon {
    width: 3rem; height: 3rem;
    margin-bottom: 0.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-glow);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 1.5rem;
    color: var(--accent);
}
.process-step__number {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-3);
    letter-spacing: 0.12em;
    margin-bottom: 0.35rem;
}
.process-step__title {
    font-size: var(--fs-md);
    margin: 0 0 0.4rem;
}
.process-step__body {
    font-size: var(--fs-sm);
    color: var(--fg-1);
    margin: 0;
    line-height: var(--line-normal);
}

/* --- AI teaser block (cross-link on /leistungen → /ki) --- */
.ai-teaser {
    display: block;
    background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
    border: 1px solid var(--accent-line);
    border-left-width: 3px;
    border-radius: var(--radius-lg);
    padding: 1.75rem 2rem;
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med);
}
.ai-teaser:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
    color: var(--fg-0);
}
.ai-teaser::before {
    content: "";
    position: absolute; top: 0; right: 0; width: 280px; height: 100%;
    background: radial-gradient(ellipse at right, var(--accent-glow), transparent 60%);
    pointer-events: none;
}
.ai-teaser__inner { position: relative; z-index: 1; max-width: 820px; }
.ai-teaser__title { font-size: var(--fs-xl); margin-bottom: 0.6rem; letter-spacing: -0.02em; }
.ai-teaser__body { color: var(--fg-1); font-size: var(--fs-sm); line-height: var(--line-loose); margin: 0; max-width: 70ch; }
/* Split variant: 2/3 text + 1/3 service chips */
.ai-teaser--split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 2rem; align-items: center; }
.ai-teaser--split .ai-teaser__content { position: relative; z-index: 1; }
.ai-teaser--split .ai-teaser__body { max-width: none; }
.ai-teaser__chips { position: relative; z-index: 1; display: grid; gap: 0.5rem; align-content: center; }
.ai-teaser__chip { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.65rem 0.85rem; background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--fs-sm); transition: border-color var(--t-fast), background var(--t-fast); }
.ai-teaser:hover .ai-teaser__chip { border-color: var(--accent-line); background: var(--bg-1); }
.ai-teaser__chip-name { color: var(--fg-1); }
.ai-teaser__chip-price { color: var(--accent); font-weight: 700; letter-spacing: -0.01em; }
@media (max-width: 720px) {
    .ai-teaser--split { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* --- Comparison table (on /ki) --- */
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.compare-table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.compare-table th, .compare-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
}
.compare-table thead th { background: var(--bg-2); color: var(--fg-0); font-weight: 600; border-bottom: 1px solid var(--border-strong); font-size: var(--fs-sm); }
.compare-table tbody th[scope="row"] { background: var(--bg-0); color: var(--fg-1); font-weight: 500; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }
.compare-table th:first-child, .compare-table td:first-child { border-top-left-radius: var(--radius-md); }
.compare-table thead th:last-child { border-top-right-radius: var(--radius-md); }
.compare-table tbody tr:last-child th:first-child { border-bottom-left-radius: var(--radius-md); }
.compare-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-md); }

.compare-table__col--featured { background: var(--bg-3) !important; position: relative; }
.compare-table__cell--featured { background: var(--bg-2) !important; border-left: 1px solid var(--accent-line); border-right: 1px solid var(--accent-line); }
.compare-table tbody tr:last-child .compare-table__cell--featured { border-bottom: 1px solid var(--accent-line); }
.compare-table thead .compare-table__col--featured { border-top: 2px solid var(--accent); border-left: 1px solid var(--accent-line); border-right: 1px solid var(--accent-line); }
.compare-table__tag { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.35rem; }
.compare-table__col-label { display: block; }
.compare-table__note { margin-top: 0.75rem; font-size: var(--fs-xs); color: var(--fg-3); font-style: italic; }
@media (max-width: 540px) {
    .compare-table-wrap { overflow-x: visible; margin-inline: 0; padding-inline: 0; }
    .compare-table { min-width: 0; display: block; width: 100%; font-size: var(--fs-sm); }
    .compare-table thead { display: none; }
    .compare-table tbody { display: block; }
    .compare-table tr { display: block; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
    .compare-table tr:last-child { margin-bottom: 0; }
    .compare-table th[scope="row"] { display: block; text-align: left; padding: 0.75rem 1rem; background: var(--bg-2); border-radius: 0 !important; white-space: normal; border-bottom: 1px solid var(--border); font-size: var(--fs-xs); }
    .compare-table td { display: block; padding: 0.75rem 1rem; background: var(--bg-1); border-radius: 0 !important; border-bottom: 1px solid var(--border); border-left: 0 !important; border-right: 0 !important; }
    .compare-table tr td:last-child { border-bottom: 0; }
    .compare-table td::before { content: attr(data-col-label); display: block; font-size: var(--fs-xs); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; font-family: var(--font-mono); }
    .compare-table__cell--featured { background: var(--bg-2) !important; box-shadow: inset 3px 0 0 var(--accent) !important; }
}

/* --- Founder note (on /ki) --- */
.founder-note {
    max-width: 780px;
    padding: 2rem 2.25rem;
    background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.founder-note::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 240px; height: 100%;
    background: radial-gradient(ellipse at right, var(--accent-glow), transparent 65%);
    pointer-events: none;
}
.founder-note > * { position: relative; z-index: 1; }
.founder-note p { color: var(--fg-1); line-height: var(--line-loose); margin: 0 0 1rem; }
.founder-note p:last-of-type { margin-bottom: 1.25rem; }
.founder-note__problems { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; gap: 0.5rem; }
.founder-note__problems li { padding-left: 1.75em; position: relative; color: var(--fg-1); font-size: var(--fs-sm); line-height: var(--line-normal); }
.founder-note__problems li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-family: var(--font-mono); font-weight: 700; }
.founder-note__signature { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--border); }
.founder-note__avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-glow); border: 1px solid var(--accent-line); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 700; font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.02em; }
.founder-note__photo { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--accent-line); background: var(--accent-glow); }
.founder-note__name { font-weight: 600; color: var(--fg-0); font-size: var(--fs-sm); }
.founder-note__role { color: var(--fg-2); font-size: var(--fs-xs); font-family: var(--font-mono); }

/* --- Tech stack grid (on /ki) --- */
.tech-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.tech-stack__item { padding: 1.15rem 1.25rem; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md); border-left: 3px solid var(--accent-line); transition: border-color var(--t-fast), background var(--t-fast); }
.tech-stack__item:hover { border-left-color: var(--accent); background: var(--bg-2); }
.tech-stack__name { font-weight: 700; font-size: var(--fs-md); color: var(--fg-0); margin-bottom: 0.3rem; letter-spacing: -0.01em; }
.tech-stack__desc { font-size: var(--fs-sm); color: var(--fg-2); line-height: var(--line-normal); }

/* --- FAQ (accordion-ish without JS) --- */
.faq { display: grid; gap: 0.75rem; }
.faq__item { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-1); overflow: hidden; }
.faq__item[open] { border-color: var(--accent-line); }
.faq__item summary { padding: 1rem 1.25rem; cursor: pointer; font-weight: 600; font-size: var(--fs-md); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--accent); font-family: var(--font-mono); font-size: 1.25em; transition: transform var(--t-fast); }
.faq__item[open] summary::after { content: "–"; }
.faq__item[open] summary { border-bottom: 1px solid var(--border); }
.faq__body { padding: 1rem 1.25rem; color: var(--fg-1); line-height: var(--line-loose); font-size: var(--fs-sm); }
.faq__body p:last-child { margin-bottom: 0; }
.faq__body ul { margin: 0.6rem 0 0; padding-left: 1.25rem; }
.faq__body li { margin-bottom: 0.5rem; }
.faq__body li:last-child { margin-bottom: 0; }

/* --- Contact form --- */
.form { display: grid; gap: 1rem; max-width: 640px; }
.form__row { display: grid; gap: 0.375rem; }
.form__row label { font-size: var(--fs-sm); color: var(--fg-1); font-weight: 500; }
.form__row label .required { color: var(--accent); }
.form__row input,
.form__row textarea { font: inherit; font-size: var(--fs-base); color: var(--fg-0); background: var(--bg-1); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.75em 1em; transition: border-color var(--t-fast), background var(--t-fast); }
.form__row input:focus,
.form__row textarea:focus { outline: none; border-color: var(--accent); background: var(--bg-2); }
.form__row textarea { min-height: 160px; resize: vertical; font-family: var(--font-sans); line-height: var(--line-normal); }
.form__row--error input,
.form__row--error textarea { border-color: var(--danger); }
.form__error { color: var(--danger); font-size: var(--fs-xs); }
.form__checkbox { display: flex; align-items: flex-start; gap: 0.6em; font-size: var(--fs-sm); color: var(--fg-1); line-height: var(--line-normal); cursor: pointer; }
.form__checkbox input { width: 1.15em; height: 1.15em; accent-color: var(--accent); margin-top: 0.15em; }
.form__honeypot { position: absolute; left: -10000px; top: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__success { padding: 1rem 1.25rem; border: 1px solid var(--success); border-left: 3px solid var(--success); background: rgba(74, 222, 128, 0.08); border-radius: var(--radius-md); color: var(--fg-0); }
.form__general-error { padding: 1rem 1.25rem; border: 1px solid var(--danger); background: rgba(248, 113, 113, 0.08); border-radius: var(--radius-md); color: var(--fg-0); }
.form__submit { justify-self: start; }

/* --- Contact layout --- */
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 740px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: grid; gap: 1.25rem; }
.contact-info__item { padding: 1.25rem; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md); }
.contact-info__label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-2); margin-bottom: 0.35rem; }
.contact-info__value { font-size: var(--fs-md); font-weight: 500; }
.contact-info__value a { color: var(--fg-0); }
.contact-info__value a:hover { color: var(--accent); }

/* --- Booking (TidyCal) on /kontakt --- */
.booking { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.booking__intro { max-width: 860px; }
.booking__intro-head { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-2); margin: 0 0 0.85rem; }
.booking__bullets { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.55rem 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.booking__bullets li { padding-left: 1.75em; position: relative; color: var(--fg-1); font-size: var(--fs-sm); line-height: var(--line-normal); }
.booking__bullets li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-family: var(--font-mono); font-weight: 700; }
.booking__closing { color: var(--fg-2); font-size: var(--fs-sm); line-height: var(--line-normal); margin: 0; font-style: italic; }
.booking__embed { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(0.75rem, 1.5vw, 1.25rem); min-height: 560px; position: relative; }
.booking__embed .tidycal-embed { min-height: 520px; border-radius: var(--radius-md); overflow: hidden; }
.booking__consent { min-height: 520px; display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%); border-radius: var(--radius-md); position: relative; overflow: hidden; }
.booking__consent[hidden] { display: none; }
.booking__consent::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center bottom, var(--accent-glow), transparent 60%); pointer-events: none; }
.booking__consent-inner { max-width: 440px; position: relative; z-index: 1; }
.booking__consent-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); padding: 0.35em 0.7em; border: 1px solid var(--accent-line); border-radius: var(--radius-sm); background: var(--accent-glow); margin: 0 0 1.25rem; }
.booking__consent-body { color: var(--fg-1); font-size: var(--fs-sm); line-height: var(--line-loose); margin: 0 0 1.5rem; }
.booking__consent-note { color: var(--fg-2); font-size: var(--fs-xs); line-height: var(--line-normal); margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--border); }
.booking__divider { display: flex; align-items: center; gap: 1rem; margin: clamp(2rem, 5vw, 3rem) auto 1rem; max-width: 480px; color: var(--fg-2); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; }
.booking__divider::before, .booking__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.booking__divider span { opacity: 0.8; }
.booking__fallback { text-align: center; color: var(--fg-2); font-size: var(--fs-sm); max-width: 640px; margin: 0 auto; }
.booking__fallback a { color: var(--accent); font-weight: 600; }

/* --- Legal pages (Impressum/Datenschutz) --- */
.legal { max-width: 780px; }
.legal h2 { font-size: var(--fs-xl); margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.legal h3 { font-size: var(--fs-md); margin-top: 1.75rem; color: var(--fg-0); }
.legal p, .legal ul, .legal address { color: var(--fg-1); line-height: var(--line-loose); font-size: var(--fs-sm); }
.legal address { font-style: normal; }
.legal ul { padding-left: 1.25rem; }
.legal ul li { margin-bottom: 0.5rem; }
.legal dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; font-size: var(--fs-sm); }
.legal dt { color: var(--fg-2); font-family: var(--font-mono); }
.legal dd { margin: 0; color: var(--fg-1); }

/* --- Footer --- */
.site-footer { border-top: 1px solid var(--border); padding-block: 3rem 2rem; margin-top: 4rem; background: var(--bg-0); }
.site-footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 2.5rem; align-items: start; }
.site-footer__logo { font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.02em; margin-bottom: 0.5rem; color: var(--fg-0); }
.site-footer__tagline { color: var(--fg-2); font-size: var(--fs-sm); max-width: 40ch; margin-bottom: 1rem; }
.site-footer__status-badge { display: block; line-height: 0; }
.site-footer__status-badge iframe { display: block; max-width: 100%; }
.site-footer__phone-tag { display: inline-flex; align-items: center; gap: 0.35em; margin-right: 0.5em; padding: 0.1em 0.5em; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--accent); background: var(--accent-glow); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); vertical-align: -0.15em; flex-shrink: 0; }
.site-footer__phone-tag svg { width: 0.95em; height: 0.95em; flex-shrink: 0; }
.site-footer__col li:has(a[href^="tel:"]) { display: flex; flex-wrap: wrap; align-items: center; row-gap: 0.1em; }
.site-footer__col a[href^="tel:"] { white-space: nowrap; }
.site-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.site-footer__col h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); color: var(--fg-2); margin-bottom: 0.75rem; font-weight: 600; }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.site-footer__col a { color: var(--fg-1); font-size: var(--fs-sm); }
.site-footer__col a:hover { color: var(--accent); }
.site-footer__meta { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1rem; margin-top: -2.5rem; /* fully cancel site-footer__inner's 2.5rem grid row-gap; vertical breathing room between chip line and copyright text comes symmetrically from .site-footer__values padding-bottom (1rem) + this padding-top (1rem) */ border-top: 1px solid var(--border); color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.site-footer__meta .dot { color: var(--fg-3); margin-inline: 0.35em; }
.site-footer__meta .accent { color: var(--fg-2); }
@media (max-width: 740px) {
    .site-footer__inner { grid-template-columns: 1fr; }
    .site-footer__nav { grid-template-columns: repeat(2, 1fr); }
}

/* --- 404 --- */
.page-404 { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.page-404__code { font-family: var(--font-mono); color: var(--accent); font-size: clamp(3.5rem, 10vw, 6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }

/* --- Responsive typography --- */
@media (max-width: 740px) {
    :root {
        --fs-3xl: 2.25rem;
        --fs-2xl: 1.75rem;
        --fs-xl: 1.375rem;
    }
    .site-header__inner { padding-block: 0.75rem; }
    .logo svg { width: 148px; height: auto; }
}

/* ==========================================================================
   Light theme tokens — applied when <html data-theme="light">
   ========================================================================== */
:root[data-theme="light"] {
    --bg-0: #FFFFFF;
    --bg-1: #F7F9FC;
    --bg-2: #EEF2F8;
    --bg-3: #E1E7F0;

    --fg-0: #0B1020;
    --fg-1: #3A4560;
    --fg-2: #5E6880;     /* 5.57:1 on bg-0, 5.28:1 on bg-1 — WCAG AA */
    --fg-3: #636B80;     /* 5.32:1 on bg-0, 4.74:1 on bg-2 — WCAG AA (was #A5ADC2, 2.24:1 FAIL) */

    --accent: #0891B2;
    --accent-strong: #0E7490;
    --accent-glow: rgba(8, 145, 178, 0.08);
    --accent-line: rgba(8, 145, 178, 0.28);

    --border: rgba(11, 16, 32, 0.08);
    --border-strong: rgba(11, 16, 32, 0.14);

    --shadow-card: 0 1px 2px rgba(11, 16, 32, 0.04), 0 8px 24px rgba(11, 16, 32, 0.06);
    --shadow-glow: 0 0 0 1px var(--accent-line), 0 8px 28px var(--accent-glow);
}

:root[data-theme="light"] body::before {
    background:
        radial-gradient(1000px 600px at 15% -10%, rgba(8, 145, 178, 0.05), transparent 60%),
        radial-gradient(900px 500px at 100% 10%, rgba(99, 102, 241, 0.04), transparent 60%),
        radial-gradient(1200px 700px at 50% 120%, rgba(8, 145, 178, 0.03), transparent 70%);
}

:root[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.82);
}

:root[data-theme="light"] .hero h1 .accent {
    background: linear-gradient(110deg, var(--accent) 30%, #164E63 60%, var(--accent) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Reduce box-shadow atmospheric glow in light mode so it doesn't look dirty */
:root[data-theme="light"] .cta-block::before {
    background: radial-gradient(600px 300px at 50% 0%, var(--accent-glow), transparent 70%);
}

/* ==========================================================================
   Digital-rain canvas (Matrix-vibe background)
   ========================================================================== */
.bg-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .bg-canvas { display: none; }
}

/* ==========================================================================
   Theme toggle button
   ========================================================================== */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-1);
    width: 36px;
    height: 32px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.theme-toggle:hover {
    color: var(--accent);
    border-color: var(--accent-line);
    background: var(--accent-glow);
}
.theme-toggle__icon { display: none; }
:root[data-theme="dark"]  .theme-toggle__icon--sun  { display: block; }
:root[data-theme="light"] .theme-toggle__icon--moon { display: block; }
/* Fallback: if no data-theme is set yet (pre-JS), show sun (since dark is default) */
:root:not([data-theme="light"]) .theme-toggle__icon--sun { display: block; }

/* ========================================================================
   /geo · /en/geo — landing page for GEO & AI Visibility audits
   ======================================================================== */

/* --- Audit category grid (the 8 scored bereiche) ---
   Each card leads with a weight chip (e.g. '25%') above the title, matching
   the "Gesamtbewertung im Detail" table in the actual audit PDFs. */
.audit-categories {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.audit-category {
    padding: 1.1rem 1.2rem;
    background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--t-fast), transform var(--t-fast);
}
.audit-category:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.audit-category__head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.55rem; }
.audit-category__weight {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    color: var(--accent);
    background: var(--accent-glow);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.audit-category__title { margin: 0; font-size: var(--fs-md); line-height: 1.25; color: var(--fg-0); }
.audit-category__body { margin: 0; color: var(--fg-1); font-size: var(--fs-sm); line-height: 1.55; }

/* --- Audit sample cards (anonymized findings as social proof) ---
   Big score on the left (danger color, matching the PDF red bars), sector
   label + finding text on the right. Mobile: score stacks above text. */
.audit-samples {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1rem;
    grid-template-columns: 1fr;
}
.audit-sample {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 1.3rem 1.4rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-left: 3px solid var(--danger);
    border-radius: var(--radius-lg);
}
.audit-sample__score {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.1rem;
    padding: 0.5rem 0;
    border-right: 1px solid var(--border);
}
.audit-sample__num {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: 800;
    color: var(--danger);
    line-height: 1;
    letter-spacing: -0.04em;
}
.audit-sample__denom {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-3);
    letter-spacing: 0.08em;
}
.audit-sample__body { min-width: 0; }
.audit-sample__sector {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-2);
    margin-bottom: 0.5rem;
}
.audit-sample__finding { margin: 0; color: var(--fg-1); font-size: var(--fs-sm); line-height: 1.6; }
.audit-samples__note {
    margin-top: 1.25rem;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    font-style: italic;
    padding: 0.8rem 1rem;
    background: var(--bg-2);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-line);
}
@media (max-width: 540px) {
    .audit-sample {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .audit-sample__score {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.4rem;
        padding: 0;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-bottom: 0.8rem;
    }
    .audit-sample__num { font-size: 2.25rem; }
}

/* --- Mid-page CTA (between samples and founder note) ---
   Lightweight conversion checkpoint. Intentionally slimmer than the
   tier-hero and the final cta-block — a horizontal strip with a subtle
   accent-glow wash that escalates to the button. */
.mid-cta-wrap { margin-block: 0; }
.mid-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
    background:
        radial-gradient(500px 200px at 100% 50%, var(--accent-glow), transparent 70%),
        var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}
.mid-cta__text {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--fg-0);
    line-height: 1.35;
    flex: 1;
    min-width: 14ch;
}
@media (max-width: 540px) {
    .mid-cta { padding: 1.25rem; gap: 1rem; }
    .mid-cta__text { font-size: var(--fs-md); }
    .mid-cta .btn { width: 100%; }
}

/* --- Tier hero (the single fixed-price anchor card) ---
   Prominent treatment: accent-glow background gradient, bigger padding,
   price and CTA bottom-anchored. This is the 99€ audit — the page's
   primary conversion target. */
.tier-hero {
    padding: 1.75rem 1.75rem 1.5rem;
    background:
        radial-gradient(700px 400px at 20% 0%, var(--accent-glow), transparent 60%),
        linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-lg);
    margin-bottom: 2.5rem;
}
.tier-hero__label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 0.4rem;
}
.tier-hero__title {
    margin: 0 0 0.75rem;
    font-size: var(--fs-xl);
    line-height: 1.2;
    color: var(--fg-0);
}
.tier-hero__body { margin: 0 0 1.25rem; color: var(--fg-1); font-size: var(--fs-md); line-height: 1.55; }
.tier-hero__inclusions {
    list-style: none; margin: 0 0 1.5rem; padding: 0;
    display: grid; gap: 0.5rem;
}
.tier-hero__inclusions li {
    padding-left: 1.4rem;
    position: relative;
    color: var(--fg-1);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.tier-hero__inclusions li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}
.tier-hero__footer {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--border);
}
.tier-hero__price { display: flex; align-items: baseline; gap: 0.4rem; }
.tier-hero__price-num {
    font-family: var(--font-mono);
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--fg-0);
    letter-spacing: -0.04em;
    line-height: 1;
}
.tier-hero__price-unit { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-2); letter-spacing: 0.04em; }

/* --- Single-line price note for wide full-width cards (vegan/gift framing).
   The three-span price block stacks badly on wide cards; this variant is
   one prose line that sits quietly next to the CTA and lets the headline
   carry the value signal. --- */
.tier-hero__price-note {
    margin: 0;
    max-width: 60ch;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--fg-2);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

/* --- Follow-up tiers (no fixed prices — quote set after audit) ---
   Deliberately less prominent than the anchor; these are described
   scopes, not sold packages. Each carries a price-note line that says
   "Flat quote after audit" so no-one expects a sticker price here. */
.tier-followups {
    padding: 1.5rem 1.75rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.tier-followups__head {
    margin: 0 0 0.4rem;
    font-size: var(--fs-lg);
    color: var(--fg-0);
}
.tier-followups__lead { margin: 0 0 1.5rem; color: var(--fg-1); font-size: var(--fs-sm); line-height: 1.55; }
.tier-followups__list {
    list-style: none; margin: 0 0 1.5rem; padding: 0;
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tier-followup {
    padding: 1.1rem 1.2rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex; flex-direction: column; gap: 0.6rem;
}
.tier-followup__title { margin: 0; font-size: var(--fs-md); color: var(--fg-0); line-height: 1.25; }
.tier-followup__body { margin: 0; color: var(--fg-1); font-size: var(--fs-sm); line-height: 1.55; flex: 1; }
.tier-followup__price-note {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--accent);
    letter-spacing: 0.02em;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
}
.tier-followups__diy {
    margin: 0;
    padding: 0.9rem 1.1rem;
    background: var(--bg-2);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent);
    color: var(--fg-1);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* --- Timeline (week-by-week process) ---
   Vertical rail with a dot per step, when-label on the left, step title
   + description on the right. Matches the Umsetzungsplan structure in
   the audit PDFs. */
.timeline {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1.5rem;
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    left: calc(120px + 0.85rem);   /* align with dot center */
    top: 0.45rem;
    bottom: 0.45rem;
    width: 1px;
    background: var(--border);
}
.timeline__step {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.75rem;
    position: relative;
    align-items: start;
}
.timeline__step::before {
    content: "";
    position: absolute;
    left: 120px;
    top: 0.55rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--bg-0), 0 0 14px var(--accent-glow);
    z-index: 1;
}
.timeline__when {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-align: right;
    padding-right: 0.5rem;
    padding-top: 0.15rem;
}
.timeline__body { padding-left: 0.5rem; }
.timeline__title { margin: 0 0 0.4rem; font-size: var(--fs-md); color: var(--fg-0); line-height: 1.25; }
.timeline__desc { margin: 0; color: var(--fg-1); font-size: var(--fs-sm); line-height: 1.55; }

@media (max-width: 540px) {
    .timeline::before { display: none; }
    .timeline__step {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .timeline__step::before { display: none; }
    .timeline__when { text-align: left; padding: 0; }
    .timeline__body { padding: 0; }
}

/* --- GEO hero: icon chips (override the default hero__meta treatment) ---
   Four 1×1 chips with icon + label, laid out as a single row on desktop
   and wrapping on mobile. Each icon is a 14-16px SVG inheriting the
   accent color so it reads as a type-4 metadata badge, not an adornment. */
.hero__chips {
    display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem;
    margin-top: 1.25rem;
}
.hero-chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-2);
    white-space: nowrap;
}
.hero-chip__icon { flex-shrink: 0; color: var(--accent); }

/* --- Audit category weight: bigger, more prominent ---
   The scorecard context comes from the real audit PDFs where weights
   are a structural part of the report. Bumping the size so they read
   as the primary hierarchy cue (title second, bullets third). */
.audit-category__weight {
    font-size: var(--fs-lg);            /* was --fs-xs */
    font-weight: 800;
    padding: 0.15rem 0.6rem;
    letter-spacing: 0;
    line-height: 1.1;
}
.audit-category__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

/* --- Audit category bullets (replaced the body paragraph) ---
   Tight three-item lists per category — easier to scan than prose,
   and hides implementation specifics (no JSON-LD / llms.txt etc.)
   so LLM-curious prospects can't just ask ChatGPT to generate it. */
.audit-category__bullets {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 0.4rem;
}
.audit-category__bullets li {
    padding-left: 1.1rem;
    position: relative;
    color: var(--fg-1);
    font-size: var(--fs-sm);
    line-height: 1.45;
}
.audit-category__bullets li::before {
    content: "→";
    position: absolute; left: 0;
    color: var(--accent);
    font-weight: 700;
}

/* ========================================================================
   /danke · /en/thanks — post-purchase thank-you page
   ======================================================================== */

/* Numbered action list: three step cards with a big accent numeral,
   wrapping a pre-filled mailto button and a soft hint beneath. */
.thanks-action {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.75rem 1.75rem 1.5rem;
    background:
        radial-gradient(700px 400px at 80% 0%, var(--accent-glow), transparent 60%),
        linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-lg);
}
.thanks-action__list {
    list-style: none; margin: 0 0 1.5rem; padding: 0;
    display: grid; gap: 1.25rem;
}
.thanks-action__item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 1.1rem;
    align-items: start;
}
.thanks-action__num {
    font-family: var(--font-mono);
    font-size: var(--fs-xl);
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    padding-top: 0.1em;
    letter-spacing: -0.03em;
}
.thanks-action__title { margin: 0 0 0.3rem; font-size: var(--fs-md); color: var(--fg-0); line-height: 1.3; }
.thanks-action__desc { margin: 0; color: var(--fg-1); font-size: var(--fs-sm); line-height: 1.55; }
.thanks-action__cta {
    display: block; width: 100%; text-align: center; margin-top: 0.75rem;
}
.thanks-action__hint {
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--border);
    color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.5;
    text-align: center;
}

/* Support row: two buttons (email + phone) side by side, stacking on mobile */
.thanks-support {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    justify-content: center;
}
.thanks-support .btn { flex: 1 1 200px; max-width: 360px; }

@media (max-width: 540px) {
    .thanks-action {
        padding: 1.25rem 1.1rem 1.1rem;
    }
    .thanks-action__item {
        grid-template-columns: 36px 1fr;
        gap: 0.8rem;
    }
    .thanks-action__num { font-size: var(--fs-lg); }
}

/* ========================================================================
   Footer values strip — climate / renewable / remote / vegan
   ======================================================================== */

/* Row of small chip-like signals above the copyright line. Icons inherit
   --accent so they tie to the wordmark dot and hero accent without
   shouting. Individual chips stay unobtrusive — these are values, not
   sales claims. */
.site-footer__values {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
    justify-content: space-between;
    padding: 1rem 0;
    margin-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.values-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-2);
    line-height: 1.4;
}
.values-chip svg { color: var(--accent); flex-shrink: 0; }
.values-chip a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted var(--fg-3);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.values-chip a:hover, .values-chip a:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Climate note beneath the audit anchor CTA. Reads as soft reassurance,
   not a sales claim — accent leaf icon + de-emphasized mono text. */
.tier-hero__climate {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-2);
    line-height: 1.5;
}
.tier-hero__climate svg { color: var(--accent); flex-shrink: 0; }
.tier-hero__climate a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent-line);
    transition: border-color var(--t-fast);
}
.tier-hero__climate a:hover, .tier-hero__climate a:focus-visible {
    border-bottom-color: var(--accent);
}

/* ---- WordPress hosting comparison page (/wordpress-hosting-vergleich) ---- */

.provider-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.provider-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.provider-card__name {
    font-size: var(--fs-xl);
    margin: 0;
    color: var(--accent);
}

.provider-card__verdict {
    font-size: var(--fs-md);
    margin: 0;
    color: var(--fg-0);
}

.provider-card__body {
    color: var(--fg-1);
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.55;
}

.provider-card__meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.75rem;
    margin: 0.25rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
}

.provider-card__meta dt {
    font-weight: 600;
    color: var(--fg-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
}

.provider-card__meta dd {
    margin: 0;
    color: var(--fg-0);
}

.match-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.match-item {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    display: grid;
    gap: 0.5rem;
}

.match-item__case {
    margin: 0;
    color: var(--fg-1);
    font-size: var(--fs-sm);
    font-style: italic;
}

.match-item__rec {
    margin: 0;
    color: var(--fg-0);
}

.match-item__rec strong {
    color: var(--accent);
    margin-right: 0.35em;
}

/* ==========================================================================
   Onboarding form — design-forward conditional wizard
   Used on /onboarding/<service> and /en/onboarding/<service>
   Single-task focused layout (no main nav distractions); brand-consistent.
   ========================================================================== */

/* --- Page chrome (minimal layout) --- */
.onboarding-page { background: var(--bg-0); }
.onboarding-topbar {
    border-bottom: 1px solid var(--border);
    background: rgba(15, 21, 36, 0.85);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    position: sticky; top: 0; z-index: 50;
}
.onboarding-topbar__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0.85rem var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.onboarding-topbar__brand {
    display: inline-flex; align-items: center; gap: 0.6rem;
    color: var(--fg-0); font-weight: 700; letter-spacing: -0.01em;
}
.onboarding-topbar__brand:hover { color: var(--accent); }
.onboarding-topbar__brand-mark {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #00131A; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 800;
    box-shadow: 0 0 0 1px var(--accent-line), 0 4px 14px var(--accent-glow);
}
.onboarding-topbar__brand-text { font-size: var(--fs-md); }
.onboarding-topbar__meta { display: flex; align-items: center; gap: 1rem; }
.onboarding-topbar__service-tag {
    color: var(--fg-2); font-size: var(--fs-xs); font-family: var(--font-mono); letter-spacing: 0.04em;
}
.onboarding-topbar__lang {
    font-size: var(--fs-xs); font-family: var(--font-mono);
    border: 1px solid var(--border-strong); padding: 0.3rem 0.55rem; border-radius: var(--radius-sm);
    color: var(--fg-1); transition: all var(--t-fast);
}
.onboarding-topbar__lang:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-glow); }

.onboarding-main { min-height: 60vh; padding-block: clamp(2rem, 6vw, 4rem); }

.onboarding-footer {
    border-top: 1px solid var(--border);
    margin-top: clamp(2rem, 6vw, 4rem);
    padding-block: 1.5rem;
}
.onboarding-footer__inner { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); text-align: center; color: var(--fg-2); font-size: var(--fs-xs); }
.onboarding-footer a { color: var(--fg-2); }
.onboarding-footer a:hover { color: var(--accent); }

/* --- Onboarding hero --- */
.onboarding__hero { max-width: 720px; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.onboarding__eyebrow { margin-bottom: 0.75rem; }
.onboarding__title { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 0.5rem; }
.onboarding__lead { color: var(--fg-1); font-size: var(--fs-md); line-height: var(--line-loose); }

/* --- Two-column layout: stepper sidebar + form --- */
.onboarding__layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

/* --- Stepper (vertical on desktop, horizontal on mobile) --- */
/* Sidebar default — declared BEFORE the mobile @media so the override below
   actually overrides at narrow viewports. (Earlier ordering had this rule
   AFTER the @media, so the desktop sticky won at every viewport.) */
.onboarding__sidebar { position: sticky; top: 80px; }
@media (max-width: 820px) {
    .onboarding__layout {
        grid-template-columns: 1fr;
        /* Children manage their own vertical spacing via margin/padding on
           mobile — gap on a single-column grid would double up the existing
           margin-bottom on .onb-quote / .onb-stepper / .onb-form. */
        gap: 0;
    }
    /* `display: contents` lifts the sidebar's children — .onb-quote and
       .onb-stepper — to be direct grid children of .onboarding__layout.
       Why: a `position: sticky` element only sticks within its containing
       block. With the quote nested inside the sidebar, sticky-pinning ended
       at the sidebar's bottom edge (just below the stepper), so the pill
       disappeared as soon as the form scrolled past. With display:contents,
       the quote's containing block becomes .onboarding__layout, which
       includes the form — so the pill sticks through the whole flow. */
    .onboarding__sidebar { display: contents; }
}
.onb-stepper { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.4rem; }

/* Phased stepper variant: groups steps into 4-ish phases with progress dots
   inside each. Sidebar reads as 4 rows instead of 14, customer scans current
   phase + sub-step at a glance. */
.onb-stepper--phased { gap: 0.55rem; }
.onb-stepper__phase {
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: all var(--t-med);
}
.onb-stepper__phase--current {
    background: linear-gradient(135deg, var(--accent-glow), transparent);
    border-color: var(--accent-line);
}
.onb-stepper__phase--done { opacity: 0.85; }
.onb-stepper__phase-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    line-height: 1.2;
}
.onb-stepper__phase-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--fg-1);
}
.onb-stepper__phase--current .onb-stepper__phase-label { color: var(--fg-0); }
.onb-stepper__phase--done    .onb-stepper__phase-label { color: var(--fg-2); }
.onb-stepper__phase-now {
    font-size: var(--fs-xs);
    color: var(--accent);
    font-weight: 500;
    text-align: right;
    /* Truncate long sub-step names instead of wrapping the whole row */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 60%;
}
.onb-stepper__dots {
    list-style: none; padding: 0; margin: 0;
    display: flex; gap: 6px; align-items: center;
}
/* Inside the phased stepper, each .onb-stepper__item is rendered as a small
   dot. Hides the regular row chrome — the per-step name moves to the phase
   header's "now:" line for the active step. */
.onb-stepper--phased .onb-stepper__item {
    width: 8px; height: 8px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 999px;
    font-size: 0; /* hides the empty .onb-stepper__num content */
    cursor: default;
}
.onb-stepper--phased .onb-stepper__num {
    width: 8px; height: 8px; padding: 0;
    border-radius: 999px;
    background: var(--border-strong);
    border: none;
    transform: none;
}
.onb-stepper--phased .onb-stepper__item--current .onb-stepper__num {
    background: var(--accent);
    transform: scale(1.4);
    box-shadow: 0 0 0 4px var(--accent-glow);
}
.onb-stepper--phased .onb-stepper__item--done .onb-stepper__num {
    background: var(--success);
    font-size: 0; /* override flat-stepper checkmark behaviour */
}
.onb-stepper--phased .onb-stepper__item--done .onb-stepper__num::after { content: none; }
.onb-stepper--phased .onb-stepper__label { /* sr-only; kept for a11y */ }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.onb-stepper__item {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm); color: var(--fg-2);
    cursor: default;
    border: 1px solid transparent;
    transition: all var(--t-med);
}
.onb-stepper__item--current {
    color: var(--fg-0);
    background: linear-gradient(135deg, var(--accent-glow), transparent);
    border-color: var(--accent-line);
    box-shadow: 0 0 0 1px var(--accent-line);
}
.onb-stepper__item--done {
    color: var(--fg-1);
    cursor: pointer;
}
.onb-stepper__item--done:hover { color: var(--accent); background: var(--bg-2); }
.onb-stepper__num {
    display: inline-grid; place-items: center;
    width: 24px; height: 24px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-family: var(--font-mono); font-size: var(--fs-xs);
    background: var(--bg-1); color: inherit;
    flex-shrink: 0;
    transition: all var(--t-med);
}
.onb-stepper__item--current .onb-stepper__num {
    background: var(--accent); color: #00131A; border-color: var(--accent);
    transform: scale(1.05);
}
/* Done state: solid green background with a centered, bold checkmark.
   The number stays hidden via font-size: 0 on the parent; the ::after
   pseudo brings its own font sizing and uses an SVG-style stroke shape
   for a thick, properly centred check. The transition on the parent
   animates the colour swap; the ::after fades in for a soft state
   change as the user advances through the wizard. */
.onb-stepper__num { transition: background var(--t-med), border-color var(--t-med), color var(--t-med); }
.onb-stepper__item--done .onb-stepper__num {
    background: var(--success);
    border-color: var(--success);
    color: #06251A;
    font-size: 0;
    position: relative;
}
.onb-stepper__item--done .onb-stepper__num::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306251A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60% 60%;
    animation: onb-stepper-pop var(--t-med) ease-out;
}
@keyframes onb-stepper-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
.onb-stepper__label { line-height: 1.3; }

/* Mobile rule for the SIMPLE stepper only — pills in a horizontal scroll-row
   with labels collapsed except for the current step. The PHASED stepper has
   its own internal phase-row structure that doesn't translate to a horizontal
   pill row, so it stays at its desktop vertical-stack layout on mobile. */
@media (max-width: 820px) {
    .onb-stepper:not(.onb-stepper--phased) { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; gap: 0.35rem; }
    .onb-stepper:not(.onb-stepper--phased) .onb-stepper__item { flex-shrink: 0; padding: 0.45rem 0.6rem; }
    .onb-stepper:not(.onb-stepper--phased) .onb-stepper__label { display: none; }
    .onb-stepper:not(.onb-stepper--phased) .onb-stepper__item--current .onb-stepper__label { display: inline; }
}

/* --- Progress bar --- */
.onb-progress {
    height: 4px;
    background: var(--bg-2);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.onb-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    border-radius: 999px;
    transition: width var(--t-slow);
    box-shadow: 0 0 12px var(--accent-glow);
}

/* --- Saved toast --- */
.onb-saved {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--success);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--t-med), transform var(--t-med);
    display: flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-mono);
}
.onb-saved::before { content: "●"; color: var(--success); animation: onb-pulse 1.6s ease-in-out infinite; }
.onb-saved--visible { opacity: 1; transform: translateY(0); }
@keyframes onb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* --- Form scaffold --- */
.onb-form {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: var(--shadow-card);
}
.onb-form .form__honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden !important;
}

.onb-general-error {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: var(--danger);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    font-size: var(--fs-sm);
}

/* --- Steps (slide+fade) --- */
.onb-step {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
    display: none;
    animation: onb-step-in var(--t-slow) both;
}
.onb-step--current { display: block; }
.onb-step[data-step-skipped="1"] { display: none !important; }
@keyframes onb-step-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .onb-step { animation: none; }
}
.onb-step__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--fg-0);
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
    padding: 0;
}
.onb-step__intro { color: var(--fg-1); margin-bottom: 1.25rem; max-width: 60ch; }
.onb-step__fields { display: flex; flex-direction: column; gap: 1.1rem; }

/* --- Field wrapper --- */
.onb-field {
    display: flex; flex-direction: column; gap: 0.4rem;
    animation: onb-field-in var(--t-med) both;
}
@keyframes onb-field-in {
    from { opacity: 0; transform: translateY(-4px); max-height: 0; }
    to   { opacity: 1; transform: translateY(0); max-height: 800px; }
}
.onb-field--hidden, .onb-field[hidden] { display: none !important; }
.onb-field--error .onb-input,
.onb-field--error .onb-select,
.onb-field--error .onb-radio-group,
.onb-field--error .onb-multi {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}
.onb-field--error .onb-input { animation: onb-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes onb-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}

/* --- Labels & help text --- */
.onb-label {
    color: var(--fg-0);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.onb-required { color: var(--accent); margin-left: 0.2em; font-weight: 400; }
.onb-help { color: var(--fg-2); font-size: var(--fs-xs); margin: 0; line-height: var(--line-normal); }
.onb-error {
    color: var(--danger);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    animation: onb-error-in var(--t-med) both;
}
@keyframes onb-error-in {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Inputs (text, email, etc.) --- */
.onb-input {
    width: 100%;
    background: var(--bg-2);
    color: var(--fg-0);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-size: var(--fs-base);
    transition: all var(--t-fast);
}
.onb-input::placeholder { color: var(--fg-3); }
.onb-input:hover { border-color: rgba(255, 255, 255, 0.24); }
.onb-input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--bg-1);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.onb-input--area { resize: vertical; min-height: 4.5rem; line-height: var(--line-normal); font-family: var(--font-sans); }

/* --- Select --- */
.onb-select-wrap { position: relative; }
.onb-select-wrap::after {
    content: "▾";
    position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%);
    color: var(--fg-2); pointer-events: none; font-size: var(--fs-sm);
    transition: color var(--t-fast);
}
.onb-select-wrap:focus-within::after { color: var(--accent); }
.onb-select {
    appearance: none; -webkit-appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
}
.onb-select option { background: var(--bg-2); color: var(--fg-0); }

/* --- Abnahme (project acceptance page) --------------------------------------- */
.abnahme {
    max-width: 1100px;
    margin: 4rem auto;
    padding: 0 var(--gutter, 1.25rem);
}
.abnahme__hero {
    text-align: center;
    margin-bottom: 2.5rem;
}
.abnahme__lead {
    max-width: 60ch;
    margin: 0.8rem auto 0;
    color: var(--fg-1);
    font-size: var(--fs-md);
    line-height: var(--line-normal);
}
.abnahme__layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 800px) {
    .abnahme__layout { grid-template-columns: 1fr; }
}
.abnahme__summary {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.5rem;
    position: sticky;
    top: 1.5rem;
}
.abnahme__summary-title {
    font-size: var(--fs-md);
    margin: 0 0 1rem;
    color: var(--fg-0);
}
.abnahme__dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.45rem 1rem;
    margin: 0;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
.abnahme__dl dt { color: var(--fg-2); }
.abnahme__dl dd { color: var(--fg-0); margin: 0; text-align: right; }
.abnahme__dl-paid { color: var(--success); }
.abnahme__dl-remainder {
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--accent);
}

.abnahme__main {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem 2.2rem;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.5);
}
.abnahme__form-title {
    font-size: var(--fs-lg);
    margin: 0 0 1.2rem;
}
.abnahme__check {
    display: flex; gap: 0.7rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    background: var(--bg-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-bottom: 1.4rem;
    transition: all var(--t-fast);
}
.abnahme__check:hover { border-color: var(--accent-line); }
.abnahme__check input { position: absolute; opacity: 0; pointer-events: none; }
.abnahme__check-box {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border: 2px solid var(--border-strong);
    border-radius: 5px;
    background: var(--bg-2);
    transition: all var(--t-fast);
    margin-top: 0.15rem;
    position: relative;
}
.abnahme__check input:checked + .abnahme__check-box {
    background: var(--accent);
    border-color: var(--accent);
}
.abnahme__check input:checked + .abnahme__check-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306251A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65% 65%;
}
.abnahme__check-label {
    color: var(--fg-1);
    font-size: var(--fs-sm);
    line-height: var(--line-normal);
}
.abnahme__check-label strong { color: var(--fg-0); font-variant-numeric: tabular-nums; }
.abnahme__submit { width: 100%; }
.abnahme__legal {
    margin-top: 1.2rem;
    color: var(--fg-2);
    font-size: var(--fs-xs);
    line-height: 1.5;
}
.abnahme__panel {
    padding: 1.3rem 1.5rem;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent);
    background: linear-gradient(135deg, var(--accent-glow), transparent);
}
.abnahme__panel--ok    { border-color: var(--success); background: linear-gradient(135deg, rgba(74,222,128,0.10), transparent); }
.abnahme__panel--warn  { border-color: #FACC15;       background: linear-gradient(135deg, rgba(250,204,21,0.10), transparent); }
.abnahme__panel--err   { border-color: var(--danger); background: linear-gradient(135deg, rgba(248,113,113,0.10), transparent); }
.abnahme__panel h2 { margin: 0 0 0.5rem; font-size: var(--fs-md); }
.abnahme__panel p  { margin: 0; color: var(--fg-1); line-height: var(--line-normal); }
.abnahme__panel-detail { margin-top: 0.8rem; font-size: var(--fs-xs); }

/* --- Contract step (new-build sign flow) ------------------------------------ */
.onb-contract { display: flex; flex-direction: column; gap: 1rem; }

/* --- Leistungsverzeichnis (institutional scope) ---------------------------- */
.onb-leistungs {
    background: var(--accent-glow);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.2rem;
}
.onb-leistungs__title {
    font-size: var(--fs-md);
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: var(--accent);
    letter-spacing: 0.01em;
}
.onb-leistungs__lead {
    font-size: var(--fs-sm);
    color: var(--fg-1);
    margin: 0 0 0.9rem;
    line-height: 1.55;
}
.onb-leistungs__list {
    list-style: none;
    margin: 0 0 0.8rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.onb-leistungs__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(34, 211, 238, 0.12);
    font-size: var(--fs-sm);
}
.onb-leistungs__row:last-child { border-bottom: 0; }
.onb-leistungs__desc { color: var(--fg-0); flex: 1; }
.onb-leistungs__price {
    font-family: var(--font-mono);
    color: var(--fg-0);
    white-space: nowrap;
    font-weight: 600;
}
.onb-leistungs__price small {
    margin-left: 0.4rem;
    font-size: var(--fs-xs);
    font-weight: 400;
    color: var(--fg-2);
}
.onb-leistungs__totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--accent-line);
    font-size: var(--fs-sm);
    color: var(--fg-1);
}

.onb-contract__juris {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
    padding: 0.7rem 0.95rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
}
.onb-contract__juris-label {
    color: var(--fg-2);
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: 0.4rem;
}
.onb-contract__juris-radio {
    display: inline-flex; align-items: center; gap: 0.4rem;
    cursor: pointer;
    color: var(--fg-1);
    transition: color var(--t-fast);
}
.onb-contract__juris-radio:hover { color: var(--accent); }
.onb-contract__juris-radio input { accent-color: var(--accent); }

.onb-contract__embed {
    max-height: 60vh;
    overflow-y: auto;
    padding: 1.4rem 1.6rem;
    background: var(--bg-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--fg-1);
    font-size: var(--fs-sm);
    line-height: 1.65;
    scroll-behavior: smooth;
    /* Subtle inset shadow at top + bottom signals scrollability */
    box-shadow: inset 0 12px 18px -16px rgba(0, 0, 0, 0.55),
                inset 0 -12px 18px -16px rgba(0, 0, 0, 0.55);
}
.onb-contract__embed:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Multi-doc card stack — one card per agreement (build, AVV, maintenance). */
.onb-contract__docs { display: flex; flex-direction: column; gap: 1.1rem; }
.onb-contract__card {
    display: flex; flex-direction: column; gap: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.85rem 0.85rem 0.95rem;
    background: var(--bg-0);
    transition: border-color var(--t-fast);
}
.onb-contract__card--read { border-color: var(--accent-line); }
.onb-contract__card--read .onb-contract__card-num::after {
    content: ' ✓'; color: var(--accent); font-weight: 700;
}
.onb-contract__card-head {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0 0.4rem;
    font-size: var(--fs-xs);
}
.onb-contract__card-num {
    font-family: var(--font-mono);
    color: var(--fg-2);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.onb-contract__card-label {
    flex: 1;
    color: var(--fg-1);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: 0.01em;
}
.onb-contract__card-version {
    font-family: var(--font-mono);
    color: var(--fg-3);
}
.onb-contract__card .onb-contract__embed { max-height: 50vh; }

.onb-contract__loading {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 3rem 1rem;
    color: var(--fg-2);
}
.onb-contract__spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 999px;
    animation: onb-spin 0.8s linear infinite;
}
.onb-contract__error {
    color: var(--danger);
    padding: 1rem;
    background: rgba(248, 113, 113, 0.08);
    border-radius: var(--radius-sm);
}

.onb-contract__scroll-hint {
    margin: 0.4rem 0 -0.4rem;
    font-size: var(--fs-xs);
    color: var(--accent);
    letter-spacing: 0.02em;
}

/* Gated acknowledgment: until the customer scrolls the contract embed to the
   end, the ack checkbox is visually muted + cursor-blocked. JS removes the
   --gated modifier and the disabled attribute when the scroll hits bottom. */
.onb-check--gated {
    opacity: 0.5;
    cursor: not-allowed;
    transition: opacity var(--t-fast);
}
.onb-check--gated input { cursor: not-allowed; }

/* Contract document typography */
.contract { color: var(--fg-1); }
.contract__header h2 { font-size: var(--fs-lg); margin: 0 0 0.3rem; color: var(--fg-0); }
.contract__meta { color: var(--fg-3); font-size: var(--fs-xs); margin: 0 0 1.4rem; letter-spacing: 0.04em; text-transform: uppercase; }
.contract__section { margin-bottom: 1.2rem; }
.contract__section h3 { font-size: var(--fs-base); margin: 0 0 0.45rem; color: var(--fg-0); }
.contract__section p { margin: 0 0 0.5rem; }
.contract__section ul { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.contract__section li { margin: 0 0 0.2rem; }
.contract__footer { margin-top: 1.4rem; padding-top: 0.9rem; border-top: 1px dashed var(--border); }
.contract__draft-mark { color: var(--fg-3); font-size: var(--fs-xs); margin: 0; }

/* --- Features step: bigger touch targets — scoped to the features field
   only so other multi-checkboxes (site_languages etc.) stay as compact pills. */
.onb-field[data-field-id="features"] .onb-multi {
    display: grid; gap: 0.5rem;
}
.onb-field[data-field-id="features"] .onb-multi label {
    padding: 0.85rem 1rem;
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    cursor: pointer;
    transition: all var(--t-fast);
    min-height: 44px;
    display: flex; align-items: center; gap: 0.7rem;
}
.onb-field[data-field-id="features"] .onb-multi label:hover {
    border-color: var(--accent-line);
    background: var(--bg-3);
}
.onb-field[data-field-id="features"] .onb-multi label:has(input:checked) {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--accent-glow), var(--bg-2));
}

/* --- Repeater pattern (competitor + inspiration URLs)
   Initial state shows only field _1; clicking "+ Add another" reveals _2,
   then _3, then the button hides. JS drives the visibility (.is-collapsed
   on the wrapping field). Keeps the form short on first paint. */
.onb-field.is-collapsed { display: none; }
.onb-repeater__add {
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: transparent;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.95rem;
    cursor: pointer;
    color: var(--accent);
    font: inherit;
    font-size: var(--fs-sm);
    margin: 0.4rem 0 1rem;
    transition: all var(--t-fast);
}
.onb-repeater__add:hover {
    border-color: var(--accent);
    background: var(--accent-glow);
}

/* --- Pricing cards (maintenance plan picker) -------------------------------- */
.onb-pcards { display: flex; flex-direction: column; gap: 1rem; }

.onb-pcards__toggle {
    display: inline-flex;
    align-self: center;
    padding: 4px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 999px;
    gap: 2px;
}
.onb-pcards__toggle-btn {
    appearance: none; -webkit-appearance: none;
    background: transparent;
    border: 0;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--fg-2);
    cursor: pointer;
    transition: all var(--t-fast);
}
.onb-pcards__toggle-btn:hover { color: var(--fg-1); }
.onb-pcards__toggle-btn.is-active {
    background: var(--accent);
    color: #06251A;
    font-weight: 600;
}

.onb-pcards__billing-note {
    margin: -0.4rem 0 0;
    padding: 0;
    text-align: center;
    color: var(--fg-2);
    font-size: var(--fs-xs);
    font-style: italic;
}

.onb-pcards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
}
@media (max-width: 800px) {
    .onb-pcards__grid { grid-template-columns: 1fr; }
}

.onb-pcards__card {
    position: relative;
    display: flex; flex-direction: column;
    padding: 1.4rem 1.3rem 1.5rem;
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--t-fast);
}
.onb-pcards__card:hover {
    border-color: var(--accent-line);
    transform: translateY(-2px);
}
.onb-pcards__card.is-selected {
    border-color: var(--accent);
    background: linear-gradient(180deg, rgba(34,211,238,0.08), var(--bg-2) 60%);
    box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -22px rgba(34,211,238,0.4);
}
.onb-pcards__card--featured {
    border-color: var(--accent-line);
}
.onb-pcards__card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.onb-pcards__featured-pill {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 10px;
    background: var(--accent);
    color: #06251A;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.onb-pcards__name {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--fg-0);
    margin-bottom: 0.2rem;
}
.onb-pcards__tagline {
    font-size: var(--fs-xs);
    color: var(--fg-3);
    margin-bottom: 0.9rem;
    /* Reserve space for two lines so taglines of different length keep the
       price + bullets vertically aligned across all three cards. */
    min-height: 2.6em;
    line-height: 1.3;
}
.onb-pcards__price {
    display: baseline;
    margin-bottom: 0.4rem;
}
.onb-pcards__amount {
    display: inline-block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--fg-0);
    font-variant-numeric: tabular-nums;
}
.onb-pcards__unit {
    display: inline-block;
    color: var(--fg-2);
    font-size: var(--fs-sm);
    margin-left: 0.25rem;
}
.onb-pcards__extra {
    color: var(--accent);
    font-size: var(--fs-xs);
    font-weight: 600;
    margin-bottom: 1rem;
    min-height: 1em;
}
.onb-pcards__includes {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex; flex-direction: column;
    gap: 0.35rem;
    font-size: var(--fs-sm);
    color: var(--fg-1);
    line-height: 1.45;
}
.onb-pcards__includes li {
    position: relative;
    padding-left: 1.4rem;
}
.onb-pcards__includes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322D3EE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 8'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
}

/* --- Bullets list (welcome step "principles") -------------------------------- */
.onb-bullets {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}
.onb-bullets__item {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0.4rem 0.7rem;
    padding: 0.85rem 1rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: var(--line-normal);
}
.onb-bullets__item::before {
    content: "→";
    color: var(--accent);
    font-weight: 700;
    grid-row: 1;
    align-self: start;
    line-height: 1.4;
}
.onb-bullets__heading {
    color: var(--fg-0);
    font-weight: 700;
    grid-column: 2;
}
.onb-bullets__body {
    color: var(--fg-1);
    grid-column: 2;
}

/* --- Live price quote (new-build calculator) ---------------------------------
   Sticky pill that hovers above the wizard and shows the current flat price
   plus deposit/remainder split. Click to expand a breakdown of which choices
   contributed what. JS mirror of PriceCalculator keeps the figures in sync
   with whatever the customer changes. */
.onb-quote {
    /* Sits at the top of the sidebar (which itself is position:sticky), so the
       quote stays in view while the customer scrolls long form steps. */
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, var(--bg-2) 60%, var(--bg-1));
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.55);
    color: var(--fg-0);
}
.onb-quote__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}
.onb-quote__eyebrow {
    display: block;
    font-size: 0.68rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}
.onb-quote__total {
    font-size: var(--fs-lg);
    font-weight: 800;
    line-height: 1.1;
    color: var(--fg-0);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.onb-quote__toggle {
    appearance: none; -webkit-appearance: none;
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.4rem 0;
    background: transparent;
    border: 0;
    border-top: 1px dashed var(--border);
    cursor: pointer;
    color: var(--fg-2);
    font: inherit;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color var(--t-fast);
}
.onb-quote__toggle:hover { color: var(--accent); }
.onb-quote__toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.onb-quote__caret {
    display: inline-block;
    font-size: 0.85rem;
    line-height: 1;
    transition: transform var(--t-fast);
}
.onb-quote--expanded .onb-quote__caret { transform: rotate(180deg); }

.onb-quote__split {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
}
.onb-quote__split-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.6rem;
    font-variant-numeric: tabular-nums;
}
.onb-quote__split-row--muted { color: var(--fg-2); }

.onb-quote__breakdown {
    display: flex; flex-direction: column; gap: 0.2rem;
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
    font-size: var(--fs-xs);
    color: var(--fg-1);
    animation: onb-field-in var(--t-med) both;
}
.onb-quote__bd-row {
    display: flex; justify-content: space-between; gap: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.onb-quote__bd-label {
    color: var(--fg-2);
}
.onb-quote__bd-amount {
    color: var(--fg-1);
    font-feature-settings: 'tnum';
}

/* Mobile: pin the live quote just below the sticky topbar so the price stays
   visible while customers scroll long form steps. Compact pad/font tweaks
   trim the height from ~360px (desktop, expanded) to ~115px (mobile, default
   collapsed via JS) so the form keeps as much vertical space as possible.
   Topbar is z-index 50 sticky-top:0; quote is z-index 30 sticky-top:60 so
   the topbar visually wins where they share a y-band (it doesn't, since they
   pin to different y-positions, but the explicit z-order is defensive). */
@media (max-width: 820px) {
    .onb-quote {
        position: sticky;
        /* Sit just below the sticky topbar. The topbar measures ~58px at
           short service names (audit) and ~68px at longer ones where the
           service tag wraps (new-build, managed-hosting). 68 picks the
           taller case so the quote never overlaps; on shorter topbars
           there's a 10px gap that reads as breathing room, not a bug. */
        top: 68px;
        z-index: 30;
        padding: 0.7rem 0.85rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.55);
    }
    .onb-quote__head { margin-bottom: 0.4rem; }
    .onb-quote__total { font-size: var(--fs-md); }
    /* Two side-by-side columns instead of two stacked rows — fits within ~340px */
    .onb-quote__split {
        flex-direction: row;
        justify-content: space-between;
        gap: 0.75rem;
        padding-top: 0.4rem;
    }
    .onb-quote__split-row {
        flex: 1 1 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.05rem;
    }
    .onb-quote__split-row > span:first-child {
        font-size: 0.62rem;
        line-height: 1.2;
        color: var(--fg-2);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .onb-quote__split-row > span:last-child {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        color: var(--fg-0);
    }
    .onb-quote__split-row--muted > span:last-child { color: var(--fg-1); }
    .onb-quote__toggle {
        margin-top: 0.4rem;
        padding: 0.25rem 0;
    }
    .onb-quote__breakdown {
        margin-top: 0.5rem;
        padding-top: 0.45rem;
    }

    /* Sentinel sits 1px above the quote in the DOM. JS observes it with
       IntersectionObserver(rootMargin: '-68px 0px 0px 0px'); when the
       sentinel scrolls past the sticky line, the quote gets `--pinned`. */
    .onb-quote-sentinel {
        height: 1px;
        margin-bottom: -1px;
        pointer-events: none;
    }

    /* Smooth-collapse the inner sections when the pill pins to top.
       Animating max-height + opacity + padding/margin together makes the
       block feel like it's being squeezed by the content scrolling up
       behind it. ~280ms feels responsive without flickering. */
    .onb-quote__split,
    .onb-quote__breakdown,
    .onb-quote__toggle {
        overflow: hidden;
        transition:
            max-height  280ms cubic-bezier(0.2, 0, 0, 1),
            opacity     180ms ease,
            margin      280ms cubic-bezier(0.2, 0, 0, 1),
            padding     280ms cubic-bezier(0.2, 0, 0, 1),
            border-top-width 280ms cubic-bezier(0.2, 0, 0, 1);
        max-height: 200px;
    }
    /* Outer container also animates so the box itself shrinks fluidly. */
    .onb-quote {
        transition:
            padding-top    280ms cubic-bezier(0.2, 0, 0, 1),
            padding-bottom 280ms cubic-bezier(0.2, 0, 0, 1),
            box-shadow     200ms ease;
    }

    .onb-quote--pinned {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
        box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.65);
    }
    .onb-quote--pinned .onb-quote__head { margin-bottom: 0; }
    .onb-quote--pinned .onb-quote__split,
    .onb-quote--pinned .onb-quote__breakdown,
    .onb-quote--pinned .onb-quote__toggle {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-top-width: 0;
    }
}

/* --- Date input polish (managed-hosting migration weekends) ------------------
   The native picker chrome is browser-controlled; we polish AROUND it: a
   custom calendar icon, a quick-pick chip row above grouped date inputs,
   and a per-input confirmation/nudge line that appears after a date is
   chosen (or not the right weekday). */
.onb-input[type="date"] {
    color-scheme: dark;
    cursor: text;
    /* Date inputs don't need to fill the whole column — they show DD/MM/YYYY
       and a small icon. Constraining keeps the form composed. */
    max-width: 240px;
}
:root[data-theme="light"] .onb-input[type="date"] { color-scheme: light; }
/* Calendar icon — let the browser pick the right contrast based on
   color-scheme; just bump opacity so it reads clearly. The earlier
   filter:invert(1) fought the color-scheme value and made the icon
   nearly invisible in dark mode. */
.onb-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--t-fast);
}
.onb-input[type="date"]:hover::-webkit-calendar-picker-indicator,
.onb-input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 1; }

.onb-datepick {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    background: linear-gradient(135deg, var(--accent-glow), transparent);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-md);
}
.onb-datepick__label {
    font-size: var(--fs-xs);
    color: var(--fg-2);
    letter-spacing: 0.02em;
    margin-right: 0.2rem;
}
.onb-datepick__chip {
    appearance: none; -webkit-appearance: none;
    font: inherit;
    font-size: var(--fs-xs);
    background: var(--bg-2);
    color: var(--fg-1);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    transition: all var(--t-fast);
    white-space: nowrap;
}
.onb-datepick__chip:hover {
    background: var(--accent);
    color: #06251A;
    border-color: var(--accent);
    transform: translateY(-1px);
}
.onb-datepick__chip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.onb-datepick__chip--inline { margin-left: 0.4rem; }

.onb-date-feedback {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    margin: 0.35rem 0 0;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    line-height: 1.4;
    animation: onb-field-in var(--t-fast) both;
}
.onb-date-feedback--ok {
    background: rgba(74, 222, 128, 0.10);
    color: var(--success);
    border-left: 3px solid var(--success);
}
.onb-date-feedback--ok::before {
    content: "✓";
    margin-right: 0.15rem;
    font-weight: 700;
}
.onb-date-feedback--nudge {
    background: rgba(250, 204, 21, 0.10);
    color: var(--fg-1);
    border-left: 3px solid #FACC15;
}
.onb-date-feedback__msg { color: var(--fg-1); }

/* --- International phone picker (type: tel) ---------------------------------
   A country select welded to the number input via shared border + matched
   chrome. Country select is fixed-width and shows the dial code first
   (`+49 Germany`); ellipsis kicks in if the country name overflows. The
   right edge of the select sits flush against the left edge of the number
   input. Mobile: stack vertically when the form is narrow. */
.onb-phone {
    display: flex;
    width: 100%;
    align-items: stretch;
    gap: 0;
}
.onb-phone__country {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 9.5rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-color: transparent;
    padding-right: 1.8rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%),
                      linear-gradient(135deg, var(--fg-2) 50%, transparent 50%);
    background-position: calc(100% - 1rem) center, calc(100% - 0.7rem) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.onb-phone__country option { background: var(--bg-2); color: var(--fg-0); }
.onb-phone__number {
    flex: 1 1 auto;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.onb-phone__country:focus,
.onb-phone__number:focus {
    /* Lift the focused side above so its accent border isn't clipped by the
       neighbour's border. */
    position: relative;
    z-index: 1;
}
@media (max-width: 480px) {
    .onb-phone { flex-direction: column; gap: 0.5rem; }
    .onb-phone__country {
        flex: none;
        border-radius: var(--radius-md);
        border-right-color: var(--border-strong);
    }
    .onb-phone__number {
        border-radius: var(--radius-md);
    }
}

/* --- Radio --- */
.onb-radio-group {
    display: flex; flex-direction: column; gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    transition: all var(--t-fast);
}
.onb-radio {
    display: inline-flex; align-items: center; gap: 0.7rem;
    padding: 0.65rem 0.9rem;
    background: var(--bg-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--t-fast);
    user-select: none;
}
.onb-radio:hover { border-color: var(--accent-line); background: var(--bg-3); }
.onb-radio input { position: absolute; opacity: 0; pointer-events: none; }
.onb-radio__dot {
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid var(--border-strong);
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
    transition: all var(--t-fast);
}
.onb-radio:has(input:checked) {
    background: linear-gradient(135deg, var(--accent-glow), transparent);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 4px 16px var(--accent-glow);
}
.onb-radio:has(input:checked) .onb-radio__dot {
    border-color: var(--accent);
    background: var(--accent);
}
.onb-radio:has(input:checked) .onb-radio__dot::after {
    content: ""; position: absolute; inset: 3px;
    background: #00131A; border-radius: 999px;
    animation: onb-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes onb-pop { from { transform: scale(0); } to { transform: scale(1); } }
.onb-radio__label { color: var(--fg-0); font-size: var(--fs-sm); }

/* --- Checkbox & multi-checkbox --- */
.onb-check {
    display: inline-flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.55rem 0;
    cursor: pointer;
    user-select: none;
}
.onb-check--inline { padding: 0.55rem 0.8rem; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); transition: all var(--t-fast); }
.onb-check--inline:hover { border-color: var(--accent-line); background: var(--bg-3); }
.onb-check input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.onb-check__box {
    display: inline-grid; place-items: center;
    width: 20px; height: 20px;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-2);
    flex-shrink: 0;
    transition: all var(--t-fast);
    position: relative;
    margin-top: 0.1rem;
}
.onb-check__box::after {
    content: "";
    width: 6px; height: 11px;
    border: solid #00131A;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--t-med) cubic-bezier(0.34, 1.56, 0.64, 1);
    margin-top: -2px;
}
.onb-check:has(input:checked) .onb-check__box {
    background: var(--accent);
    border-color: var(--accent);
}
.onb-check:has(input:checked) .onb-check__box::after { transform: rotate(45deg) scale(1); }
.onb-check--inline:has(input:checked) {
    background: linear-gradient(135deg, var(--accent-glow), transparent);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.onb-check__label { color: var(--fg-0); font-size: var(--fs-sm); line-height: var(--line-normal); }
.onb-check__label a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.onb-multi { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* --- File upload --- */
.onb-file { position: relative; }
.onb-file__input {
    position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
}
.onb-file__drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 1.5rem 1rem;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-2);
    text-align: center;
    transition: all var(--t-med);
}
.onb-file__drop--hover {
    border-color: var(--accent);
    background: var(--accent-glow);
    transform: scale(1.01);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.onb-file__icon {
    display: inline-grid; place-items: center;
    width: 36px; height: 36px;
    border-radius: 999px;
    background: var(--bg-3);
    color: var(--accent);
    font-size: 1.2rem;
}
.onb-file__primary { color: var(--fg-0); font-size: var(--fs-sm); }
.onb-file__browse {
    background: none; border: 0; padding: 0; margin: 0;
    color: var(--accent); cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
    font: inherit;
}
.onb-file__browse:hover { color: var(--accent-strong); }
.onb-file__hint { color: var(--fg-2); font-size: var(--fs-xs); font-family: var(--font-mono); }
.onb-file__preview {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--accent-line);
    background: var(--accent-glow);
    border-radius: var(--radius-md);
    animation: onb-field-in var(--t-med) both;
}
.onb-file__check { color: var(--accent); font-weight: 700; }
.onb-file__name { flex: 1; color: var(--fg-0); font-size: var(--fs-sm); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-file__clear {
    background: transparent; border: 0; color: var(--fg-2); cursor: pointer;
    width: 28px; height: 28px; border-radius: 999px;
    display: grid; place-items: center;
    font-size: 1.1rem; line-height: 1;
    transition: all var(--t-fast);
}
.onb-file__clear:hover { background: var(--bg-3); color: var(--danger); }

/* --- Turnstile slot --- */
.onb-turnstile { margin-top: 1.25rem; display: flex; justify-content: flex-start; }
/* Force [hidden] to win against custom display values used elsewhere. The
   browser default `[hidden] { display: none }` loses against any explicit
   display rule (e.g., `.btn { display: inline-flex }`, `.onb-turnstile
   { display: flex }`). Without this, the onboarding Back/Next/Submit
   buttons and the Turnstile slot all stay visible on every step. */
[hidden] { display: none !important; }

/* --- Navigation buttons --- */
.onb-nav {
    display: flex; align-items: center; gap: 0.75rem;
    margin-top: 1.5rem; padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.onb-nav__spacer { flex: 1; }
.onb-nav__prev,
.onb-nav__next,
.onb-nav__submit {
    transition: all var(--t-med);
}
.onb-nav__submit {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.5rem;
    overflow: hidden;
}
.onb-nav__submit-spinner {
    width: 16px; height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 999px;
    display: none;
    animation: onb-spin 0.8s linear infinite;
}
.onb-nav__submit--loading .onb-nav__submit-text { opacity: 0.5; }
.onb-nav__submit--loading .onb-nav__submit-spinner { display: inline-block; }
.onb-nav__submit--loading { cursor: wait; }
@keyframes onb-spin { to { transform: rotate(360deg); } }

@media (max-width: 540px) {
    .onb-nav { position: sticky; bottom: 0; background: linear-gradient(0deg, var(--bg-1) 60%, transparent); padding-block: 1rem; margin-inline: calc(var(--gutter) * -0.5); padding-inline: calc(var(--gutter) * 0.5); }
    .onb-nav__next, .onb-nav__submit { flex: 1; justify-content: center; }
}

/* --- Thanks page --- */
.onboarding-thanks {
    display: grid; place-items: center;
    padding-block: clamp(2rem, 8vw, 5rem);
}
.onboarding-thanks__card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: clamp(2rem, 5vw, 3rem);
    text-align: center;
    max-width: 560px;
}
.onboarding-thanks__check {
    color: var(--accent);
    margin-bottom: 1rem;
    display: inline-block;
}
.onboarding-thanks__circle { stroke-dasharray: 188; stroke-dashoffset: 188; animation: onb-draw-circle 0.6s ease-out forwards; }
.onboarding-thanks__tick   { stroke-dasharray: 50;  stroke-dashoffset: 50;  animation: onb-draw-tick   0.4s 0.5s ease-out forwards; }
@keyframes onb-draw-circle { to { stroke-dashoffset: 0; } }
@keyframes onb-draw-tick   { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .onboarding-thanks__circle, .onboarding-thanks__tick { animation: none; stroke-dashoffset: 0; }
}
.onboarding-thanks__lead { color: var(--fg-1); font-size: var(--fs-md); margin-block: 1rem; }
.onboarding-thanks__meta { color: var(--fg-2); font-size: var(--fs-sm); margin-bottom: 1.5rem; }
.onboarding-thanks__cta { display: flex; justify-content: center; gap: 0.75rem; }

/* --- Skip link surface for onboarding pages --- */
.onboarding-page .skip-link {
    position: absolute; left: -10000px;
    background: var(--accent); color: #00131A;
    padding: 0.5rem 0.75rem; border-radius: var(--radius-md);
    font-weight: 600;
}
.onboarding-page .skip-link:focus { left: 1rem; top: 1rem; z-index: 100; }

/* --- Form-level Turnstile (kontakt page retrofit) --- */
.form__turnstile { margin: 1rem 0; }

/* --- Embedded Stripe Checkout (onboarding stripe_checkout step) -------------
   The Stripe iframe owns its own surface (theme + chrome controlled by
   Stripe Dashboard branding). To avoid the "raw iframe dropped on the page"
   look, we frame it: a small trust strip on top with a lock + "Secure
   payment via Stripe", then the iframe edge-to-edge with rounded clipped
   corners and a soft outer shadow so it reads as a dedicated payment
   surface rather than a square embed. */
.onb-step--checkout .onb-step__title { margin-bottom: 0.4rem; }

.onb-checkout {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    min-height: 540px;
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.6);
}

/* Refund banner (rare now — most flows fold the refund line into intro_*) */
.onb-checkout__refund {
    background: linear-gradient(135deg, var(--accent-glow), transparent);
    border-left: 3px solid var(--accent);
    color: var(--fg-1);
    font-size: var(--fs-sm);
    line-height: var(--line-normal);
    padding: 0.85rem 1rem;
    margin: 0 0 0.5rem;
    border-radius: var(--radius-sm);
}

/* Trust strip above the iframe — tiny, framed, reads as a Stripe-secured
   payment surface rather than a raw iframe. */
.onb-checkout__trust {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.8rem;
    padding: 0.6rem 0.95rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
    font-size: var(--fs-xs);
    color: var(--fg-2);
}
.onb-checkout__trust-left {
    display: inline-flex; align-items: center; gap: 0.45rem;
}
.onb-checkout__trust-lock {
    width: 13px; height: 13px;
    color: var(--success);
    flex-shrink: 0;
}
.onb-checkout__trust-stripe {
    font-weight: 600;
    color: var(--fg-1);
    letter-spacing: 0.01em;
}

.onb-checkout__loading {
    display: flex; align-items: center; justify-content: center; gap: 0.7rem;
    padding: 4rem 1rem;
    color: var(--fg-2);
    font-size: var(--fs-sm);
    flex: 1;
}
.onb-checkout__spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 999px;
    animation: onb-spin 0.8s linear infinite;
}

.onb-checkout__error {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.4);
    color: var(--danger);
    margin: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    line-height: var(--line-normal);
}

.onb-checkout__widget {
    width: 100%;
    flex: 1;
    /* Breathing room above the Stripe iframe so the product name has air
       between it and the trust strip's bottom border. */
    padding-top: 0.65rem;
}

.onb-checkout__success {
    display: flex; align-items: flex-start; gap: 0.75rem;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.12), transparent);
    border: 1px solid rgba(74, 222, 128, 0.4);
    border-radius: var(--radius-md);
    margin: 0.75rem;
    padding: 1rem 1.1rem;
    color: var(--fg-0);
    animation: onb-field-in var(--t-med) both;
}
.onb-checkout__check {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px;
    background: var(--success);
    color: #00131A;
    font-weight: 800;
    border-radius: 999px;
    flex-shrink: 0;
}
.onb-checkout__success p {
    margin: 0.2rem 0 0;
    color: var(--fg-1);
    font-size: var(--fs-sm);
}


/* --- Institutional onboarding banner ------------------------------------------ */
.onb-institutional-banner {
    display: flex; align-items: flex-start; gap: 0.7rem;
    background: linear-gradient(135deg, var(--accent-glow), transparent);
    border-left: 3px solid var(--accent);
    color: var(--fg-0);
    padding: 0.85rem 1rem;
    margin: 0 0 1rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    line-height: var(--line-normal);
}
.onb-institutional-banner > span:first-child {
    color: var(--accent);
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ---------- Blog article: long-form spacing + E-E-A-T author line ---------- */
/* Separate the header (ends with the author line) from the body. Was: meta line
   butted against the first paragraph (page-meta has no bottom margin). */
.blog-article__header { margin-bottom: 2.5rem; }
.blog-article__hero { margin: 0 0 2.5rem; }

/* Headings need clear air ABOVE them so a paragraph never crowds the next
   heading. Base h2/h3 carry no top margin; long-form needs it. */
.blog-article__body > :first-child { margin-top: 0; }
.blog-article__body h2 { margin-top: 2.75rem; margin-bottom: 0.6rem; }
.blog-article__body h3 { margin-top: 2rem; margin-bottom: 0.4rem; }
.blog-article__body h4 { margin-top: 1.5rem; margin-bottom: 0.35rem; }
.blog-article__body ul,
.blog-article__body ol { margin: 0 0 1em; padding-left: 1.4em; }
.blog-article__body li { margin-bottom: 0.4em; }

/* Author line: portrait + linked byline + verifiable profile links (E-E-A-T). */
.blog-article__meta { display: flex; align-items: center; gap: 0.8rem; margin: 1.25rem 0 0; }
.blog-article__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--border); }
.blog-article__byline-block { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.blog-article__byline { color: var(--fg-1); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; }
.blog-article__byline a { color: var(--fg-1); text-decoration: underline; text-underline-offset: 2px; }
.blog-article__byline-sub { color: var(--fg-3); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.blog-article__byline-sub a { color: var(--fg-3); text-decoration: none; }
.blog-article__byline a:hover, .blog-article__byline-sub a:hover { color: var(--accent); }

/* Profile icons in the blog byline (LinkedIn / GitHub) — recognizable marks. */
.blog-article__icon { width: 0.95em; height: 0.95em; fill: currentColor; vertical-align: -0.15em; }
.blog-article__author-link { display: inline-flex; align-items: center; gap: 0.3em; }
.blog-article__author-link .blog-article__icon { opacity: 0.55; }
.blog-article__author-link:hover .blog-article__icon { opacity: 1; color: var(--accent); }
.blog-article__profiles { display: inline-flex; align-items: center; gap: 0.55em; }
.blog-article__profiles a { display: inline-flex; color: var(--fg-3); }
.blog-article__profiles a:hover { color: var(--accent); }