/* =========================================================================
   Webshop-Radar Website – main.css
   Design-Tokens und Komponenten fuer den Prototyp.
   Farben laut Feinkonzept Kap. 12.
   ========================================================================= */

:root {
    --color-primary:        #1a1f2e;
    --color-primary-soft:   #232a3d;
    --color-primary-hover:  #262f47;
    --color-secondary:      #78C6D8;
    --color-secondary-dark: #4fa7bb;
    --color-accent:         #4E8CFF;   /* Logo-Blau, Brand-Akzent */
    --color-accent-soft:    rgba(78, 140, 255, 0.18);
    --color-white:          #ffffff;
    --color-bg:             #ffffff;
    --color-bg-muted:       #f4f6fa;
    --color-bg-dark:        #0f1320;
    --color-border:         #e2e6ee;
    --color-text:           #1a1f2e;
    --color-text-soft:      #5b6477;
    --color-text-inverse:   #ffffff;

    --color-success:        #1fa37e;
    --color-warning:        #f2b54a;
    --color-error:          #e25555;

    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  24px;
    --radius-pill: 999px;

    --shadow-sm: 0 2px 8px rgba(26, 31, 46, 0.06);
    --shadow-md: 0 10px 30px rgba(26, 31, 46, 0.08);
    --shadow-lg: 0 30px 60px rgba(26, 31, 46, 0.12);

    --container-max: 1200px;
    --container-pad: 20px;

    --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --fs-xxl: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
    --fs-xl:  clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
    --fs-l:   clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    --fs-m:   1rem;
    --fs-s:   0.9rem;
    --fs-xs:  0.8rem;

    --lh-tight: 1.15;
    --lh-snug:  1.3;
    --lh-base:  1.55;

    --section-pad-y: clamp(60px, 8vw, 110px);

    --transition: 200ms ease;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-m);
    line-height: var(--lh-base);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    padding-top: 84px;
}
@media (max-width: 720px) {
    body { padding-top: 76px; }
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-secondary-dark); }

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: var(--lh-tight); color: var(--color-text); font-weight: 700; }
h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-l); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }

.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}
.container--narrow { max-width: 760px; }

/* ========== Buttons ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 12px 26px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--fs-m);
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
    text-align: center;
    white-space: nowrap;
}
.btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}
.btn--primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.btn--ghost {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-border);
}
.btn--ghost:hover {
    background: var(--color-bg-muted);
    color: var(--color-primary);
}
.btn--large { padding: 15px 32px; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }
.btn--small { padding: 8px 18px; font-size: 0.92rem; }

/* ========== Eyebrow / Utility ========== */
.eyebrow {
    display: inline-block;
    padding: 6px 14px;
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-secondary-dark);
    background: rgba(120, 198, 216, 0.18);
    border-radius: var(--radius-pill);
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.section { padding: var(--section-pad-y) 0; }
.section__head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.section__subtitle { color: var(--color-text-soft); font-size: 1.0625rem; }
.section__cta { text-align: center; margin-top: 2.5rem; }

/* ========== Header ========== */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--color-border);
    transition: transform var(--transition);
}
.site-header.is-hidden { transform: translateY(-110%); }
.site-header__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 16px var(--container-pad);
    min-height: 68px;
}
.site-header__brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.05rem;
}
.site-header__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: var(--color-text-inverse);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}
.site-header__nav {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 2rem;
}
.site-header__nav-list {
    display: flex;
    gap: 0.25rem;
    list-style: none;
    margin: 0 auto 0 0;
    padding: 0;
}
.site-header__nav-list a {
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-weight: 500;
}
.site-header__nav-list a:hover {
    background: var(--color-bg-muted);
}
.site-header__right {
    display: flex;
    align-items: center;
    gap: 1rem;
}
/* Sekundaerer Login-Einstieg neben dem Registrieren-CTA */
.site-header__login {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-soft);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.site-header__login:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-muted);
    color: var(--color-primary);
}
.site-header__login svg { flex-shrink: 0; }

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--color-text-soft);
}
.lang-switch__link {
    color: var(--color-text-soft);
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.lang-switch__link.is-active { color: var(--color-primary); background: var(--color-bg-muted); }
.lang-switch__sep { opacity: 0.4; }

.site-header__burger {
    display: none;
    background: transparent;
    border: none;
    width: 40px; height: 40px;
    padding: 0;
    cursor: pointer;
}

/* Mobile-Quick-Actions im Header (Phone/Mail/DE-EN/Register) */
.site-header__quick {
    display: none;       /* nur auf Mobile sichtbar */
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    margin-right: 0.4rem;
}
.quick-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-bg-muted);
    color: var(--color-primary);
    transition: background var(--transition), color var(--transition), transform var(--transition);
    text-decoration: none;
    flex-shrink: 0;
}
.quick-action:hover {
    background: rgba(78, 140, 255, 0.18);
    color: var(--color-accent);
    transform: translateY(-1px);
}
.quick-action--primary {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    box-shadow: 0 4px 14px rgba(78, 140, 255, 0.4);
}
.quick-action--primary:hover {
    background: #6aa0ff;
    color: var(--color-text-inverse);
}
.lang-switch-mini {
    display: inline-flex;
    align-items: center;
    background: var(--color-bg-muted);
    border-radius: var(--radius-pill);
    padding: 6px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    height: 36px;
    line-height: 1;
}
.lang-switch-mini__link {
    color: var(--color-text-soft);
    padding: 0 6px;
    text-decoration: none;
    transition: color var(--transition);
}
.lang-switch-mini__link.is-active { color: var(--color-primary); }
.lang-switch-mini__sep { color: var(--color-border); }
.site-header__burger span {
    display: block;
    height: 2px;
    background: var(--color-primary);
    margin: 6px auto;
    width: 22px;
    transition: transform var(--transition), opacity var(--transition);
}

/* ========== Hero (Mesh-Gradient Platzhalter) ========== */
.section--hero {
    position: relative;
    overflow: hidden;
    padding-top: clamp(40px, 5vw, 70px);
    padding-bottom: clamp(60px, 7vw, 110px);
    color: var(--color-text-inverse);
    background: #0a0d18;
    isolation: isolate;
}
/* Mesh-Gradient: Logo-Blau dominiert, Tuerkis als Akzent, kein Magenta/Lila */
.section--hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 60% 50% at 82% 18%, rgba(78, 140, 255, 0.55), transparent 60%),
        radial-gradient(ellipse 50% 60% at 18% 35%, rgba(120, 198, 216, 0.42), transparent 60%),
        radial-gradient(ellipse 55% 55% at 75% 85%, rgba(78, 140, 255, 0.34), transparent 60%),
        radial-gradient(ellipse 40% 45% at 25% 95%, rgba(34, 211, 238, 0.26), transparent 60%),
        linear-gradient(135deg, #0a0f1f 0%, #0e1832 50%, #0a0f1f 100%);
    animation: hero-bg-drift 18s ease-in-out infinite alternate;
}
/* Feiner Grid-Overlay fuer Tech-Look, subtle */
.section--hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px, 56px 56px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 0%, transparent 80%);
}
/* Pulsierender Glow oben rechts in Logo-Blau */
.section--hero::after {
    content: "";
    position: absolute;
    top: -160px; right: -140px;
    width: 520px; height: 520px;
    z-index: 0;
    background: radial-gradient(circle, rgba(78, 140, 255, 0.36), transparent 70%);
    filter: blur(24px);
    pointer-events: none;
    animation: hero-glow 9s ease-in-out infinite;
}
.section--hero > .container {
    position: relative;
    z-index: 1;
    max-width: 1340px;
}
.section--hero__content {
    max-width: 760px;
}
.section--hero__headline {
    margin-top: 0.5rem;
    color: var(--color-text-inverse);
    font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.section--hero .eyebrow {
    background: rgba(78, 140, 255, 0.18);
    color: #b6cfff;
    border: 1px solid rgba(78, 140, 255, 0.35);
}
.section--hero__bullets {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1.5rem;
    max-width: 680px;
}
.section--hero__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.92);
}
.section--hero__bullets li svg {
    color: #4ee3a9;          /* sattes Hellgrün, gut sichtbar auf dunklem BG */
    flex-shrink: 0;
    margin-top: 2px;
    filter: drop-shadow(0 0 6px rgba(78, 227, 169, 0.35));
}
.section--hero__bullets li svg polyline {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
}
/* Bei ungerader Anzahl spannt das letzte Bullet beide Spalten */
.section--hero__bullets li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
@media (max-width: 720px) {
    .section--hero__bullets { grid-template-columns: 1fr; gap: 0.45rem; }
}

.section--hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.section--hero__ctas .btn--primary {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
    box-shadow: 0 12px 32px rgba(78, 140, 255, 0.42);
}
.section--hero__ctas .btn--primary:hover {
    background: #6aa0ff;
    color: var(--color-text-inverse);
    border-color: #6aa0ff;
    transform: translateY(-1px);
}
.section--hero__ctas .btn--ghost {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.section--hero__ctas .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-text-inverse);
}

.section--hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-s);
}
.section--hero__trust li { display: flex; align-items: center; gap: 0.5rem; }
.section--hero__trust .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-secondary);
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(120, 198, 216, 0.6);
    animation: hero-dot-pulse 3s ease-in-out infinite;
}
.section--hero__trust li:nth-child(2) .dot { animation-delay: 0.4s; }
.section--hero__trust li:nth-child(3) .dot { animation-delay: 0.8s; }

/* ---- Initial-Load-Animation (Stagger) ---- */
.section--hero .eyebrow,
.section--hero__headline,
.section--hero__bullets li,
.section--hero__ctas,
.section--hero__trust {
    animation: hero-fade-up 0.7s ease-out backwards;
}
.section--hero .eyebrow              { animation-delay: 0.05s; }
.section--hero__headline             { animation-delay: 0.15s; }
.section--hero__bullets li:nth-child(1) { animation-delay: 0.42s; }
.section--hero__bullets li:nth-child(2) { animation-delay: 0.50s; }
.section--hero__bullets li:nth-child(3) { animation-delay: 0.58s; }
.section--hero__bullets li:nth-child(4) { animation-delay: 0.66s; }
.section--hero__bullets li:nth-child(5) { animation-delay: 0.74s; }
.section--hero__bullets li:nth-child(6) { animation-delay: 0.82s; }
.section--hero__bullets li:nth-child(7) { animation-delay: 0.90s; }
.section--hero__bullets li:nth-child(8) { animation-delay: 0.98s; }
.section--hero__bullets li:nth-child(9) { animation-delay: 1.06s; }
.section--hero__ctas                 { animation-delay: 1.19s; }
.section--hero__trust                { animation-delay: 1.29s; }

/* Checkmark zeichnet sich mit Verzoegerung passend zum Bullet */
.section--hero__bullets li svg polyline {
    animation: hero-draw-check 0.55s ease-out 0.2s forwards;
}
.section--hero__bullets li:nth-child(1) svg polyline { animation-delay: 0.62s; }
.section--hero__bullets li:nth-child(2) svg polyline { animation-delay: 0.70s; }
.section--hero__bullets li:nth-child(3) svg polyline { animation-delay: 0.78s; }
.section--hero__bullets li:nth-child(4) svg polyline { animation-delay: 0.86s; }
.section--hero__bullets li:nth-child(5) svg polyline { animation-delay: 0.94s; }
.section--hero__bullets li:nth-child(6) svg polyline { animation-delay: 1.02s; }
.section--hero__bullets li:nth-child(7) svg polyline { animation-delay: 1.10s; }
.section--hero__bullets li:nth-child(8) svg polyline { animation-delay: 1.18s; }
.section--hero__bullets li:nth-child(9) svg polyline { animation-delay: 1.26s; }

@keyframes hero-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-bg-drift {
    from { transform: scale(1.05) translate(0, 0); }
    to   { transform: scale(1.08) translate(-1.5%, -1%); }
}
@keyframes hero-glow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.06); }
}
@keyframes hero-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(120, 198, 216, 0.6); }
    50%      { box-shadow: 0 0 0 6px rgba(120, 198, 216, 0); }
}
@keyframes hero-draw-check {
    to { stroke-dashoffset: 0; }
}

.promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: rgba(120, 198, 216, 0.15);
    border: 1px solid rgba(120, 198, 216, 0.35);
    font-size: var(--fs-s);
}
.promo-badge__pct {
    font-weight: 700;
    color: var(--color-secondary-dark);
}
.promo-badge__label {
    color: var(--color-text-soft);
}
.promo-badge__countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--color-primary);
}

/* ========== Screenshot-Frame ========== */
.screenshot-frame {
    background: transparent;
    border: 1px solid rgba(26, 31, 46, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(10, 13, 24, 0.18);
    overflow: hidden;
    position: relative;
    padding: 0;
}
.screenshot-frame img { border-radius: var(--radius-lg); display: block; width: 100%; }

/* ========== Pains ========== */
.section--pains { background: var(--color-bg-muted); }
.pains-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
}
.pain-card {
    background: var(--color-white);
    padding: 1.75rem 1.5rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.pain-card h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.pain-card p { font-size: var(--fs-s); color: var(--color-text-soft); margin: 0; }
.pain-card__icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(226, 85, 85, 0.08);
    color: var(--color-error);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

/* ========== Benefits ========== */
.benefits-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.benefit-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2rem;
    transition: transform var(--transition), box-shadow var(--transition);
}
.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.benefit-card__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(120, 198, 216, 0.18);
    color: var(--color-secondary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.benefit-card h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.benefit-card p { color: var(--color-text-soft); margin: 0; }

/* ========== Features ========== */
.features-split { margin-bottom: 4rem; }
.features-split__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3.5rem;
}
.features-split__row--reverse { direction: rtl; }
.features-split__row--reverse > * { direction: ltr; }
.features-split__text h3 { font-size: 1.4rem; }
.features-split__text p { color: var(--color-text-soft); font-size: 1.0625rem; }

.features-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.feature-card {
    padding: 1.5rem;
    border-radius: var(--radius-md);
    background: var(--color-bg-muted);
    border: 1px solid transparent;
    transition: border-color var(--transition);
}
.feature-card:hover { border-color: var(--color-secondary); }
.feature-card__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(31, 163, 126, 0.1);
    color: var(--color-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.feature-card h4 { margin-bottom: 0.35rem; }
.feature-card p { color: var(--color-text-soft); font-size: var(--fs-s); margin: 0; }

/* ========== Screenshots ========== */
.section--screenshots {
    background: linear-gradient(180deg, var(--color-bg-muted) 0%, var(--color-white) 100%);
}
.screenshots-hero {
    margin: 0 auto 2.5rem;
    max-width: 980px;
    text-align: center;
}
.screenshots-hero figcaption {
    text-align: center;
    color: var(--color-text-soft);
    font-size: var(--fs-s);
    margin-top: 1rem;
}
.screenshots-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 1080px;
    margin: 0 auto;
}
.screenshot-card { margin: 0; }
.screenshot-card figcaption {
    text-align: center;
    color: var(--color-text-soft);
    font-size: var(--fs-s);
    margin-top: 0.75rem;
}
.screenshot-frame--small {
    padding: 6px;
    border-radius: var(--radius-md);
}
.screenshot-frame--small img {
    border-radius: calc(var(--radius-md) - 6px);
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
}

/* ========== How it works ========== */
.how-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.how-step {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2rem;
    text-align: center;
}
.how-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.how-step p { color: var(--color-text-soft); margin: 0; }

/* ========== Promo Band ========== */
.section--promo { padding: calc(var(--section-pad-y) / 2) 0; }
.promo-band {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    align-items: center;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: 2.5rem 3rem;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.promo-band::before {
    content: "";
    position: absolute;
    right: -60px; top: -60px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120, 198, 216, 0.35), transparent 70%);
    pointer-events: none;
}
.promo-band h2 { color: var(--color-text-inverse); margin-bottom: 0.5rem; }
.promo-band p { color: rgba(255, 255, 255, 0.85); margin: 0 0 0.5rem; }
.promo-band small { color: rgba(255, 255, 255, 0.6); font-size: var(--fs-xs); }
.promo-band__text { display: flex; align-items: flex-start; gap: 1.5rem; }
.promo-band__text .promo-badge__pct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}
.promo-band__countdown { text-align: right; }
.promo-band__countdown-label {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}
.promo-band__countdown-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-secondary);
    margin-bottom: 1rem;
}
.promo-band__countdown .btn { background: var(--color-secondary); color: var(--color-primary); border-color: var(--color-secondary); }
.promo-band__countdown .btn:hover { background: #8cd7e6; color: var(--color-primary); }

/* ========== Pricing ========== */
.pricing-toggle {
    display: inline-flex;
    background: var(--color-bg-muted);
    border-radius: var(--radius-pill);
    padding: 6px;
    margin: 0 auto 2.5rem;
    gap: 4px;
    justify-content: center;
}
.pricing-toggle-wrap { text-align: center; }
.pricing-toggle__btn {
    border: none;
    background: transparent;
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    color: var(--color-text-soft);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.pricing-toggle__btn.is-active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.pricing-toggle__badge {
    background: var(--color-secondary);
    color: var(--color-primary);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
}

.section--pricing .section__head { margin-bottom: 2rem; }
.section--pricing .section__head + .pricing-toggle { display: flex; }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}
.pricing-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition), box-shadow var(--transition);
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pricing-card--featured {
    border-color: var(--color-secondary);
    box-shadow: 0 20px 40px rgba(120, 198, 216, 0.18);
}
.pricing-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-secondary);
    color: var(--color-primary);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pricing-card__name { font-size: 1.1rem; margin-bottom: 0.3rem; }
.pricing-card__limit { color: var(--color-text-soft); font-size: var(--fs-s); margin-bottom: 1.25rem; }
.pricing-card__price { margin-bottom: 1.5rem; }
.pricing-card__amount { font-size: 1.9rem; font-weight: 700; color: var(--color-primary); }
.pricing-card__suffix { font-size: var(--fs-s); color: var(--color-text-soft); }
.pricing-card .btn { margin-top: auto; }
.pricing-card__extra {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.75rem;
    background: rgba(78, 227, 169, 0.1);
    border: 1px solid rgba(78, 227, 169, 0.28);
    border-radius: var(--radius-sm);
    color: var(--color-success);
    font-size: 0.85rem;
    font-weight: 600;
}
.pricing-footnote { text-align: center; color: var(--color-text-soft); font-size: var(--fs-s); margin-top: 2rem; }

/* ========== Trust ========== */
.section--trust { background: var(--color-bg-muted); }
.trust-band {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}
.trust-band__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 12px 24px;
    color: var(--color-primary);
}

/* ========== FAQ ========== */
.faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 820px;
    margin-inline: auto;
}
.faq-item {
    border-bottom: 1px solid var(--color-border);
}
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-item details { padding: 1.25rem 0; }
.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.0625rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-size: 1.5rem;
    color: var(--color-text-soft);
    transition: transform var(--transition);
}
.faq-item details[open] summary::after { content: "–"; }
.faq-item__body {
    margin-top: 0.75rem;
    color: var(--color-text-soft);
}

/* ========== Final CTA ========== */
.section--cta-final { background: var(--color-bg-dark); color: var(--color-text-inverse); }
.section--cta-final h2 { color: var(--color-text-inverse); }
.cta-final { text-align: center; max-width: 620px; margin: 0 auto; }
.cta-final p { color: rgba(255, 255, 255, 0.7); font-size: 1.0625rem; margin-bottom: 2rem; }
.section--cta-final .btn--primary {
    background: var(--color-secondary);
    color: var(--color-primary);
    border-color: var(--color-secondary);
}
.section--cta-final .btn--primary:hover { background: #8cd7e6; color: var(--color-primary); }

/* ========== Footer ========== */
.site-footer {
    position: relative;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.72);
    background:
        radial-gradient(ellipse 90% 60% at 85% -10%, rgba(120, 198, 216, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 10% 110%, rgba(99, 102, 241, 0.22) 0%, transparent 60%),
        linear-gradient(135deg, #2a2f55 0%, #1a1f2e 42%, #0c1020 100%);
    isolation: isolate;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -160px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(120, 198, 216, 0.16) 0%, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}
.site-footer::after {
    content: "";
    position: absolute;
    bottom: -160px;
    left: -120px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 70%);
    filter: blur(18px);
    pointer-events: none;
    z-index: 0;
}
.site-footer > * {
    position: relative;
    z-index: 1;
}
.site-footer__inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 2rem;
    padding: 4.5rem var(--container-pad) 3.25rem;
}
.site-footer .site-header__brand-mark {
    box-shadow: 0 8px 24px rgba(120, 198, 216, 0.35);
}
.site-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-text-inverse);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1rem;
}
.site-footer__tagline { color: rgba(255, 255, 255, 0.6); max-width: 320px; font-size: var(--fs-s); }
.site-footer__nav ul,
.site-footer__legal ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.site-footer__nav a,
.site-footer__legal a {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-s);
}
.site-footer__nav a:hover,
.site-footer__legal a:hover { color: var(--color-secondary); }
.site-footer__legal .lang-switch { margin-top: 0.5rem; }
.site-footer__legal .lang-switch__link { color: rgba(255, 255, 255, 0.7); }
.site-footer__legal .lang-switch__link.is-active { color: var(--color-text-inverse); background: rgba(255, 255, 255, 0.08); }
.site-footer__bottom {
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent 0%, rgba(120, 198, 216, 0.25) 50%, transparent 100%) 1;
    padding: 1.25rem 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--fs-xs);
}

/* ========== Legal Pages ========== */
.section--legal { padding-top: calc(var(--section-pad-y) + 30px); }
.section--legal h1 { margin-bottom: 1.25rem; }
.section--legal .container--narrow { max-width: 820px; }

.legal-body {
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.7;
}
.legal-body p {
    margin: 0 0 1em;
    color: var(--color-text);
}
.legal-body p.legal-intro {
    font-size: 1.0625rem;
    color: var(--color-text-soft);
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-muted);
    border-left: 3px solid var(--color-secondary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 0 0 2.5rem;
}
.legal-body h2 {
    font-size: 1.4rem;
    margin: 2.75rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    line-height: 1.3;
}
.legal-body h2:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.legal-body h3 {
    font-size: 1.1rem;
    margin: 1.75rem 0 0.75rem;
    color: var(--color-primary);
}
.legal-body ul {
    padding-left: 1.4rem;
    margin: 0 0 1.25em;
}
.legal-body ul li {
    margin: 0 0 0.4em;
    color: var(--color-text);
}
.legal-body ul li::marker {
    color: var(--color-secondary-dark);
}
.legal-body strong {
    color: var(--color-primary);
    font-weight: 600;
}
.legal-body a {
    color: var(--color-secondary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    word-break: break-word;
}
.legal-body a:hover {
    color: var(--color-primary);
}
.legal-body code {
    background: var(--color-bg-muted);
    color: var(--color-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.92em;
    padding: 0.1em 0.4em;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}
.legal-body ol {
    padding-left: 1.4rem;
    margin: 0 0 1.25em;
}
.legal-body ol li {
    margin: 0 0 0.4em;
}
.legal-body ul ul {
    margin: 0.4em 0 0.5em;
}
.legal-body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: rgba(120, 198, 216, 0.12);
    border-left: 3px solid var(--color-secondary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.legal-body blockquote p {
    margin: 0;
    font-size: 1.05rem;
    color: var(--color-primary);
}
.legal-body .legal-callout {
    margin: 2.5rem 0 0;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-muted);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.legal-body .legal-callout p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: var(--fs-s);
}
.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5em;
    font-size: var(--fs-s);
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.legal-table th,
.legal-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}
.legal-table th {
    background: var(--color-bg-muted);
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.legal-table tr:last-child td {
    border-bottom: none;
}
.legal-table code {
    white-space: nowrap;
}
.legal-subhead {
    color: var(--color-text-soft);
    font-size: 1.0625rem;
    margin: -0.5rem 0 2rem;
}

/* ========== Responsive ========== */
@media (max-width: 1100px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .pains-grid { grid-template-columns: repeat(3, 1fr); }
    .benefits-grid,
    .features-grid,
    .how-steps,
    .screenshots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .site-header__burger { display: block; order: 3; margin-left: 0; }
    .site-header__quick  { display: inline-flex; order: 2; }
    .site-header__nav {
        position: fixed;
        left: 0;
        right: 0;
        top: 76px;
        background: var(--color-white);
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 260ms ease;
        border-bottom: 0;
        box-shadow: none;
    }
    .site-header__nav.is-open {
        max-height: calc(100vh - 76px);
        padding: 1rem var(--container-pad) 1.25rem;
        gap: 0.75rem;
        overflow: auto;
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 8px 24px rgba(10, 13, 24, 0.08);
    }
    .site-header__nav-list { flex-direction: column; margin: 0; gap: 0.15rem; }
    .site-header__nav-list a { padding: 12px 14px; font-size: 1.05rem; }
    .site-header__right { flex-direction: column; align-items: stretch; gap: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--color-border); }
    .site-header__right .btn { padding: 12px 22px; text-align: center; }
    .site-header__login { justify-content: center; padding: 12px 22px; }
    .lang-switch { justify-content: center; }
    .section--hero__grid { grid-template-columns: 1fr; }
    .features-split__row { grid-template-columns: 1fr; gap: 1.5rem; }
    .features-split__row--reverse { direction: ltr; }
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    .pricing-grid .pricing-card { padding: 1.25rem 1rem; }
    .pricing-grid .pricing-card__amount { font-size: 1.5rem; }
    .pricing-grid .btn { padding: 10px 16px; font-size: 0.92rem; }
    .promo-band { grid-template-columns: 1fr; padding: 2rem; text-align: left; }
    .promo-band__countdown { text-align: left; }
    .promo-band__text { flex-direction: column; gap: 1rem; }
    .site-footer__inner { grid-template-columns: 1fr; }
    /* Screenshots: 2 Spalten auf Mobile statt 1 */
    .screenshots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
    .screenshots-grid figcaption { font-size: 0.78rem; }
    /* Benefits/Features/How: 1 Spalte (lange Texte) */
    .pains-grid,
    .benefits-grid,
    .features-grid,
    .how-steps { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-grid .pricing-card__amount { font-size: 1.9rem; }
    /* Eng: Lang-Switch, Login- und Register-Icon weglassen (sind im Burger).
       Sonst passen Logo + 4 Icons + Burger nicht mehr in 375px Breite. */
    .site-header__quick .lang-switch-mini,
    .site-header__quick .quick-action--login,
    .site-header__quick .quick-action--primary { display: none; }
    .site-header__logo { height: 48px; }
    .site-header__inner { min-height: 68px; }
    body { padding-top: 68px; }
    .site-header__nav { top: 68px; }
    .site-header__nav.is-open { max-height: calc(100vh - 68px); }
    .quick-action { width: 32px; height: 32px; }
    .quick-action svg { width: 16px; height: 16px; }
}

/* ========== Reveal Animation ========== */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(.2,.7,.3,1);
    will-change: opacity, transform;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ========== Comparison ========== */
.section--compare {
    background: linear-gradient(180deg, var(--color-bg) 0%, #f9fbfe 100%);
}
.compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.25rem;
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}
.compare__col {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}
.compare__col--without {
    background: #fdf6f6;
    border-color: rgba(226, 85, 85, 0.2);
}
.compare__col--with {
    background: linear-gradient(180deg, #f1faf6 0%, #ffffff 100%);
    border-color: rgba(31, 163, 126, 0.25);
    box-shadow: var(--shadow-md);
}
.compare__col--with:hover { transform: translateY(-2px); }

.compare__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.compare__col--without .compare__header { border-bottom-color: rgba(226, 85, 85, 0.2); }
.compare__col--with .compare__header    { border-bottom-color: rgba(31, 163, 126, 0.2); }
.compare__header h3 { margin: 0; font-size: 1.125rem; }

.compare__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}
.compare__chip--neg { background: rgba(226, 85, 85, 0.12); color: var(--color-error); }
.compare__chip--pos { background: rgba(31, 163, 126, 0.15); color: var(--color-success); }

.compare__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.compare__item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.45;
}
.compare__item--neg { color: var(--color-text-soft); }
.compare__item--neg span:last-child { text-decoration: line-through; text-decoration-color: rgba(226, 85, 85, 0.4); text-decoration-thickness: 1px; }
.compare__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    margin-top: 1px;
}
.compare__item--neg .compare__icon { background: rgba(226, 85, 85, 0.12); color: var(--color-error); }
.compare__item--pos .compare__icon { background: rgba(31, 163, 126, 0.15); color: var(--color-success); }

.compare__divider {
    align-self: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(120, 198, 216, 0.45);
}

/* ========== Feature Checklist ========== */
.feature-checklist {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 1140px;
    counter-reset: featurecount;
}
.feature-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.4rem 1.15rem 1.15rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    position: relative;
    transition:
        transform 350ms cubic-bezier(.2,.7,.3,1),
        box-shadow 350ms ease,
        border-color 350ms ease;
}
.feature-checklist__item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(120,198,216,0.0) 0%, rgba(120,198,216,0.0) 100%);
    transition: background 350ms ease;
}
.feature-checklist__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(26, 31, 46, 0.08);
    border-color: rgba(120, 198, 216, 0.55);
}
.feature-checklist__item:hover::before {
    background: linear-gradient(135deg, rgba(120,198,216,0.06) 0%, rgba(120,198,216,0) 70%);
}
.feature-checklist__item:hover .feature-checklist__check { transform: scale(1.06); }

.feature-checklist__check {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: transform 250ms cubic-bezier(.5, 1.5, .5, 1);
}
.feature-checklist__check svg {
    overflow: visible;
}
.feature-checklist__check-bg {
    fill: rgba(31, 163, 126, 0.14);
    stroke: rgba(31, 163, 126, 0.55);
    stroke-width: 1.5;
    transform-origin: 16px 16px;
    transform: scale(0);
    transition:
        transform 420ms cubic-bezier(.34, 1.56, .64, 1) 60ms,
        fill 250ms ease,
        stroke 250ms ease;
}
.feature-checklist__check-mark {
    fill: none;
    stroke: var(--color-success);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    transition: stroke-dashoffset 520ms cubic-bezier(.55, .1, .25, 1) 280ms;
}
.feature-checklist__item.is-visible .feature-checklist__check-bg {
    transform: scale(1);
}
.feature-checklist__item.is-visible .feature-checklist__check-mark {
    stroke-dashoffset: 0;
}
.feature-checklist__item:hover .feature-checklist__check-bg {
    fill: rgba(31, 163, 126, 0.22);
    stroke: rgba(31, 163, 126, 0.8);
}

/* Override base [data-reveal] -> sanfter Slide statt translateY */
.feature-checklist__item[data-reveal] {
    transform: translate3d(-14px, 8px, 0);
    transition:
        opacity 520ms ease,
        transform 520ms cubic-bezier(.2,.7,.3,1),
        box-shadow 350ms ease,
        border-color 350ms ease;
}
.feature-checklist__item[data-reveal].is-visible {
    transform: translate3d(0, 0, 0);
}

.feature-checklist__body { flex: 1; min-width: 0; }
.feature-checklist__title {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.feature-checklist__text {
    margin: 0;
    color: var(--color-text-soft);
    font-size: var(--fs-s);
    line-height: 1.5;
}

.feature-checklist__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
}
.feature-checklist__badge::before {
    content: "*";
    font-size: 0.85rem;
    line-height: 1;
}
.feature-checklist__badge--add-on {
    background: rgba(120, 198, 216, 0.18);
    color: var(--color-secondary-dark);
}
.feature-checklist__badge--api-key {
    background: rgba(242, 181, 74, 0.2);
    color: #b87a18;
}

.feature-checklist__footnote {
    text-align: center;
    color: var(--color-text-soft);
    font-size: var(--fs-s);
    margin: 2.5rem auto 0;
    max-width: 720px;
}

.eyebrow--small { padding: 4px 10px; font-size: 0.7rem; margin-bottom: 0.75rem; }

/* ========== Modal ========== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal[hidden] { display: none; }
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 19, 32, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 220ms ease;
}
.modal__panel {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 40px 80px rgba(15, 19, 32, 0.35);
    max-width: 460px;
    width: 100%;
    padding: 2.25rem;
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    transition: opacity 220ms ease, transform 240ms cubic-bezier(.2,.7,.3,1);
}
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__panel { opacity: 1; transform: translateY(0) scale(1); }

.modal__close {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    border: none;
    background: var(--color-bg-muted);
    color: var(--color-text);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}
.modal__close:hover { background: var(--color-border); }

.modal__badge {
    display: inline-block;
    background: var(--color-secondary);
    color: var(--color-primary);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.modal__panel h2 {
    font-size: 1.4rem;
    margin: 0 0 0.5rem;
    line-height: 1.25;
}
.modal__lead {
    color: var(--color-text-soft);
    margin-bottom: 1.25rem;
}
.modal__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 0;
}
.modal__bullets li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
}
.modal__bullets li svg {
    color: var(--color-success);
    flex-shrink: 0;
}
.modal__small {
    margin-top: 0.75rem;
    font-size: var(--fs-xs);
    color: var(--color-text-soft);
    text-align: center;
}

body.modal-open { overflow: hidden; }

@media (max-width: 1100px) {
    .compare { grid-template-columns: 1fr; gap: 1rem; }
    .compare__divider { transform: rotate(90deg); justify-self: center; }
    .feature-checklist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 760px;
    }
    /* Letztes Item bei 9 Items in 2 Spalten allein -> volle Breite */
    .feature-checklist__item:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .feature-checklist {
        grid-template-columns: 1fr;
        max-width: 560px;
    }
    .feature-checklist__item:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

/* ========== Logo (Spec Juni 2026) ========== */
.site-header__logo {
    height: 42px;
    width: auto;
    display: block;
}
@media (max-width: 720px) {
    .site-header__logo { height: 56px; }
    .site-header__inner { min-height: 76px; padding-top: 10px; padding-bottom: 10px; }
}
.site-footer__logo img {
    height: 36px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

/* ========== Feature-Badge: Core-Variante ========== */
.feature-checklist__badge--core,
.feature-checklist__badge--im-core-enthalten,
.feature-checklist__badge--included-in-core {
    background: rgba(31, 163, 126, 0.12);
    color: var(--color-success);
    border: 1px solid rgba(31, 163, 126, 0.28);
}

/* ========== Add-on-Pricing-Sektion ========== */
.pricing-addons {
    margin-top: 3.5rem;
    padding: 2.5rem 2rem;
    background: linear-gradient(180deg, var(--color-bg-muted) 0%, #eef2fb 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.pricing-addons::before {
    content: "";
    position: absolute;
    top: -120px; right: -100px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(78, 140, 255, 0.12), transparent 70%);
    pointer-events: none;
}
.pricing-addons::after {
    content: "";
    position: absolute;
    bottom: -120px; left: -100px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(120, 198, 216, 0.10), transparent 70%);
    pointer-events: none;
}
.pricing-addons > * { position: relative; }

.pricing-addons__head {
    text-align: center;
    margin-bottom: 2rem;
}
.pricing-addons__eyebrow {
    display: inline-block;
    padding: 4px 12px;
    font-size: var(--fs-xs);
    font-weight: 700;
    background: rgba(78, 140, 255, 0.13);
    color: var(--color-accent);
    border: 1px solid rgba(78, 140, 255, 0.25);
    border-radius: var(--radius-pill);
    margin-bottom: 0.85rem;
    letter-spacing: 0.02em;
}
.pricing-addons__head h3 {
    font-size: 1.5rem;
    margin: 0 0 0.6rem;
    color: var(--color-primary);
}
.pricing-addons__head p {
    color: var(--color-text-soft);
    max-width: 640px;
    margin: 0 auto;
    font-size: 0.96rem;
}
.pricing-addons__list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.pricing-addons__item {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.4rem 1.25rem;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
}
.pricing-addons__item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 360ms ease;
}
.pricing-addons__item:hover {
    transform: translateY(-4px);
    border-color: rgba(78, 140, 255, 0.45);
    box-shadow: 0 16px 32px rgba(78, 140, 255, 0.14);
}
.pricing-addons__item:hover::before { transform: scaleX(1); }

.pricing-addons__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(78, 140, 255, 0.13);
    color: var(--color-accent);
    margin-bottom: 0.4rem;
    transition: background var(--transition), transform var(--transition);
}
.pricing-addons__item:hover .pricing-addons__icon {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    transform: rotate(-6deg) scale(1.05);
}
.pricing-addons__item h4 {
    font-size: 1.08rem;
    margin: 0;
    color: var(--color-primary);
}
.pricing-addons__item p {
    color: var(--color-text-soft);
    font-size: var(--fs-s);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}
.pricing-addons__chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 4px 10px;
    background: var(--color-bg-muted);
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    margin-top: 0.5rem;
    border: 1px dashed var(--color-border);
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pricing-addons__item:hover .pricing-addons__chip {
    background: rgba(78, 140, 255, 0.12);
    color: var(--color-accent);
    border-color: rgba(78, 140, 255, 0.3);
    border-style: solid;
}
.pricing-addons__price {
    text-align: center;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border);
}
.pricing-addons__price-main {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 0.75rem 1.75rem;
    box-shadow: 0 6px 16px rgba(78, 140, 255, 0.12);
    margin-bottom: 0.75rem;
}
.pricing-addons__price {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}
.pricing-addons__price strong {
    display: block;
    font-size: 1.3rem;
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}
.pricing-addons__price span {
    display: block;
    color: var(--color-text-soft);
    font-size: 0.95rem;
}
.pricing-addons__price small {
    display: block;
    margin-top: 0.5rem;
    color: var(--color-text-soft);
    font-size: var(--fs-xs);
}

@media (max-width: 1100px) {
    .pricing-addons__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .pricing-addons__list { grid-template-columns: 1fr; }
    .site-header__logo { height: 36px; }
}

/* ========== Highlights / Auf einen Blick ========== */
.section--highlights {
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
}
.highlights-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin-inline: auto;
}
.highlights-list li {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.5rem 1.5rem 1.5rem 2.5rem;
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.highlights-list li:hover {
    transform: translateY(-3px);
    border-color: rgba(120, 198, 216, 0.55);
    box-shadow: var(--shadow-md);
}
.highlights-list li::before {
    content: "";
    position: absolute;
    left: 1.25rem;
    top: 1.85rem;
    width: 10px; height: 10px;
    border-radius: 3px;
    background: var(--color-secondary);
    box-shadow: 0 0 0 4px rgba(120, 198, 216, 0.2);
}
.highlights-list strong {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1.02rem;
}
.highlights-list span {
    color: var(--color-text-soft);
    font-size: 0.92rem;
    line-height: 1.55;
}

@media (max-width: 1024px) {
    .highlights-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .highlights-list { grid-template-columns: 1fr; }
}

/* ========== Help-Center ========== */

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: var(--fs-s);
    color: var(--color-text-soft);
    margin-bottom: 1.25rem;
}
.breadcrumb a {
    color: var(--color-text-soft);
    text-decoration: none;
}
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb__sep {
    color: var(--color-border);
    user-select: none;
}
.breadcrumb [aria-current="page"] {
    color: var(--color-primary);
    font-weight: 500;
}

/* Hero-Block der Help-Index-Seite */
.section--help-hero {
    padding-top: calc(var(--section-pad-y) - 30px);
    padding-bottom: calc(var(--section-pad-y) / 2);
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
}
.section--help-hero .section__head {
    margin-bottom: 0;
}
.section--help-hero h1 {
    font-size: var(--fs-xxl);
    margin-bottom: 1rem;
}

/* Card-Grid */
.section--help-index {
    padding-top: calc(var(--section-pad-y) / 2);
}
.help-grid {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.help-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.help-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(120, 198, 216, 0.45);
}
.help-card a {
    display: block;
    padding: 1.75rem 1.5rem 1.5rem;
    color: inherit;
    text-decoration: none;
    position: relative;
}
.help-card__num {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-bg-muted);
    color: var(--color-secondary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs-s);
}
.help-card h2 {
    font-size: 1.1rem;
    margin: 0 0 0.45rem;
    padding-right: 2.5rem;
    color: var(--color-primary);
}
.help-card p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: var(--fs-s);
    line-height: 1.5;
}

/* „Antwort nicht gefunden"-Block */
.help-contact {
    text-align: center;
    background: var(--color-bg-muted);
    border-radius: var(--radius-lg);
    padding: 2.25rem 2rem;
    margin-top: 1rem;
}
.help-contact h3 {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
}
.help-contact p {
    color: var(--color-text-soft);
    margin: 0 0 1.25rem;
}
.help-contact a {
    color: var(--color-secondary-dark);
    font-weight: 600;
}
.help-contact a:hover { color: var(--color-primary); }

/* Detail-Seiten — 2-Spalten-Layout */
.help-main {
    padding-top: 0;
}
.help-main > .container {
    padding-top: 2rem;
}
.help-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
    padding-bottom: 5rem;
}

/* Sidebar */
.help-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}
.help-sidebar__title {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-soft);
    margin: 0 0 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}
.help-sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: helpitem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.help-sidebar__list li {
    counter-increment: helpitem;
}
.help-sidebar__list a {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-soft);
    text-decoration: none;
    font-size: 0.92rem;
    transition: background var(--transition), color var(--transition);
}
.help-sidebar__list a::before {
    content: counter(helpitem) ". ";
    color: var(--color-border);
    font-weight: 600;
    margin-right: 0.3rem;
}
.help-sidebar__list a:hover {
    background: var(--color-bg-muted);
    color: var(--color-primary);
}
.help-sidebar__list a.is-active {
    background: rgba(120, 198, 216, 0.18);
    color: var(--color-primary);
    font-weight: 600;
}
.help-sidebar__list a.is-active::before {
    color: var(--color-secondary-dark);
}

/* Article */
.help-article {
    max-width: 760px;
    color: var(--color-text);
    line-height: 1.7;
    font-size: 1rem;
}
.help-article__head {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}
.help-article__eyebrow {
    display: inline-block;
    padding: 4px 10px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-secondary-dark);
    background: rgba(120, 198, 216, 0.18);
    border-radius: var(--radius-pill);
    font-weight: 600;
    margin-bottom: 1rem;
}
.help-article__head h1 {
    font-size: clamp(1.85rem, 1.5rem + 1.4vw, 2.4rem);
    margin: 0 0 0.75rem;
    line-height: 1.2;
}
.help-article__lead {
    font-size: 1.0625rem;
    color: var(--color-text-soft);
    margin: 0;
}

.help-article h2 {
    font-size: 1.45rem;
    margin: 2.5rem 0 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    line-height: 1.3;
}
.help-article h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.help-article h3 {
    font-size: 1.1rem;
    color: var(--color-primary);
    margin: 1.75rem 0 0.75rem;
}
.help-article p { margin: 0 0 1em; }
.help-article ul,
.help-article ol {
    padding-left: 1.4rem;
    margin: 0 0 1.25em;
}
.help-article li { margin: 0 0 0.4em; }
.help-article ul li::marker { color: var(--color-secondary-dark); }
.help-article strong { color: var(--color-primary); font-weight: 600; }
.help-article a {
    color: var(--color-secondary-dark);
    text-underline-offset: 2px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}
.help-article a:hover { color: var(--color-primary); }
.help-article code {
    background: var(--color-bg-muted);
    color: var(--color-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.92em;
    padding: 0.1em 0.4em;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}
.help-article pre {
    background: #0f1320;
    color: #d6e1ee;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0 0 1.25em;
}
.help-article pre code {
    background: transparent;
    border: none;
    color: inherit;
    padding: 0;
}

/* Note / Callout */
.help-note {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: rgba(242, 181, 74, 0.1);
    border-left: 3px solid var(--color-warning);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text);
}
.help-note p:last-child { margin-bottom: 0; }
.help-note strong { color: var(--color-primary); }

.help-callout {
    margin: 2rem 0 0;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-muted);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.help-callout h3 {
    margin: 0 0 0.5rem;
    font-size: 0.98rem;
    color: var(--color-primary);
}
.help-callout p { margin: 0 0 0.4em; }
.help-callout p:last-child { margin: 0; }

/* Tabelle */
.help-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5em;
    font-size: var(--fs-s);
    background: var(--color-white);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.help-table th,
.help-table td {
    padding: 0.7rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}
.help-table th {
    background: var(--color-bg-muted);
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.help-table tr:last-child td { border-bottom: none; }
.help-table code { white-space: nowrap; }

/* Pager (Vorheriges / Naechstes) */
.help-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--color-border);
}
.help-pager__prev,
.help-pager__next {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-white);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.help-pager__next { text-align: right; align-items: flex-end; }
.help-pager__prev:hover,
.help-pager__next:hover {
    transform: translateY(-1px);
    border-color: rgba(120, 198, 216, 0.6);
    box-shadow: var(--shadow-sm);
}
.help-pager small {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-soft);
}
.help-pager strong {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.95rem;
}
.help-pager__prev--disabled,
.help-pager__next--disabled {
    background: var(--color-bg-muted);
    color: var(--color-text-soft);
    pointer-events: none;
    opacity: 0.55;
    border-style: dashed;
}
.help-pager__prev--disabled strong,
.help-pager__next--disabled strong { color: var(--color-text-soft); }

/* Responsive */
@media (max-width: 1024px) {
    .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .help-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .help-sidebar { position: static; }
    .help-sidebar__list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .help-sidebar__list a { padding: 0.4rem 0.75rem; }
}
@media (max-width: 720px) {
    .help-grid { grid-template-columns: 1fr; }
    .help-pager { grid-template-columns: 1fr; }
    .help-pager__next { text-align: left; align-items: flex-start; }
}

/* ========== Statement / Testimonial ========== */
.section--statement {
    background: var(--color-bg-muted);
    padding: clamp(60px, 7vw, 100px) 0;
}
.statement {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 2.75rem;
    align-items: center;
    max-width: 980px;
    margin: 0 auto;
}
.statement__media {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-white);
    box-shadow: 0 18px 40px rgba(78, 140, 255, 0.18);
    border: 4px solid var(--color-white);
}
.statement__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.statement__body {
    position: relative;
    padding-left: 1rem;
}
.statement__quote-mark {
    color: var(--color-accent-soft);
    position: absolute;
    top: -18px;
    left: -12px;
    z-index: 0;
    pointer-events: none;
}
.statement__quote {
    font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.65rem);
    line-height: 1.4;
    color: var(--color-primary);
    margin: 0 0 1.5rem;
    font-weight: 500;
    position: relative;
    z-index: 1;
}
.statement__author strong {
    display: block;
    color: var(--color-primary);
    font-size: 1.02rem;
    margin-bottom: 0.15rem;
}
.statement__author span {
    display: block;
    color: var(--color-text-soft);
    font-size: 0.93rem;
}
@media (max-width: 720px) {
    .statement { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
    .statement__media { width: 180px; margin: 0 auto; }
    .statement__body { padding-left: 0; }
    .statement__quote-mark { left: 50%; transform: translateX(-50%); }
}

/* ---------- Statement-Slider ---------- */
.statement-slider {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    overflow: hidden;
}
.statement-slider__track {
    display: flex;
    transition: transform 480ms cubic-bezier(.25,.8,.3,1);
    will-change: transform;
}
.statement--slide {
    flex: 0 0 100%;
    margin: 0;
}
.statement-slider__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 0;
}
.statement-slider__dot {
    width: 32px;
    height: 8px;
    border: none;
    background: rgba(78, 140, 255, 0.18);
    border-radius: var(--radius-pill);
    cursor: pointer;
    padding: 0;
    transition: background var(--transition), width var(--transition);
}
.statement-slider__dot:hover {
    background: rgba(78, 140, 255, 0.35);
}
.statement-slider__dot.is-active {
    background: var(--color-accent);
    width: 48px;
}
.statement-slider__dot:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* Statement: dezenter Hintergrund-Drift + Bild-Float + Quote-Mark-Drift */
.section--statement {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.section--statement::before {
    content: "";
    position: absolute;
    inset: -40% -20%;
    z-index: 0;
    background:
        radial-gradient(circle at 25% 35%, rgba(78, 140, 255, 0.10), transparent 55%),
        radial-gradient(circle at 75% 75%, rgba(120, 198, 216, 0.12), transparent 55%);
    pointer-events: none;
    animation: statement-bg-drift 18s ease-in-out infinite alternate;
}
.section--statement > .container { position: relative; z-index: 1; }

.statement__media {
    animation: statement-float 7s ease-in-out infinite;
    will-change: transform;
}
.statement__quote-mark {
    animation: statement-quote-drift 9s ease-in-out infinite;
}

/* Reveal-Stagger — nur fuer den aktiven (ersten) Slide beim Initial-Reveal */
.section--statement [data-reveal].is-visible .statement--slide:first-child .statement__media   { animation: statement-pop  0.7s 0.05s cubic-bezier(.2,.7,.3,1) backwards, statement-float 7s 1s ease-in-out infinite; }
.section--statement [data-reveal].is-visible .statement--slide:first-child .statement__body    { animation: statement-fade 0.7s 0.25s ease-out backwards; }
.section--statement [data-reveal].is-visible .statement--slide:first-child .statement__quote-mark { animation: statement-mark-in 0.9s 0.4s ease-out backwards, statement-quote-drift 9s 1.3s ease-in-out infinite; }

@keyframes statement-bg-drift {
    from { transform: translate(0, 0); }
    to   { transform: translate(2%, -2%); }
}
@keyframes statement-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes statement-quote-drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(4px, -3px) rotate(-2deg); }
}
@keyframes statement-pop {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes statement-fade {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes statement-mark-in {
    from { opacity: 0; transform: scale(0.5) rotate(-12deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ---------- CTA-Mid: animierter Mesh-Verlauf ---------- */
.cta-mid {
    background:
        radial-gradient(circle at 18% 25%, rgba(78, 140, 255, 0.55), transparent 45%),
        radial-gradient(circle at 82% 75%, rgba(120, 198, 216, 0.42), transparent 45%),
        radial-gradient(circle at 60% 10%, rgba(78, 140, 255, 0.30), transparent 50%),
        linear-gradient(135deg, #1a1f2e 0%, #2a3457 60%, #1a1f2e 100%);
    background-size: 220% 220%, 220% 220%, 220% 220%, 100% 100%;
    background-position: 0% 0%, 100% 100%, 50% 50%, 0% 0%;
    animation: cta-mid-shift 14s ease-in-out infinite alternate;
}
@keyframes cta-mid-shift {
    0%   { background-position: 0% 0%,   100% 100%, 50% 50%, 0% 0%; }
    50%  { background-position: 80% 30%, 20% 70%,  20% 80%, 0% 0%; }
    100% { background-position: 100% 100%, 0% 0%,   80% 20%, 0% 0%; }
}

/* ---------- Lightbox ---------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: rgba(10, 13, 24, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    padding: 0;
}
.lightbox__close,
.lightbox__nav {
    position: absolute;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), transform var(--transition), border-color var(--transition);
    z-index: 2;
}
.lightbox__close:hover,
.lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
    transform: scale(1.05);
}
.lightbox__close { top: 22px; right: 22px; }
.lightbox__nav--prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__nav--next:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__content {
    position: relative;
    z-index: 1;
    max-width: min(1280px, 92vw);
    max-height: 88vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}
.lightbox__image {
    max-width: 100%;
    max-height: 76vh;
    width: auto;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
    background: #0a0d18;
}
.lightbox__caption {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    text-align: center;
    max-width: 720px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.lightbox__counter {
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.lightbox-open { overflow: hidden; }

/* Galerie: Cursor-Hint, dass klickbar */
.section--screenshots .screenshots-hero,
.section--screenshots .screenshot-card { cursor: zoom-in; }
.section--screenshots .screenshots-hero:focus-visible,
.section--screenshots .screenshot-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-md);
}

@media (max-width: 720px) {
    .lightbox__nav--prev { left: 12px; }
    .lightbox__nav--next { right: 12px; }
    .lightbox__close { top: 14px; right: 14px; }
}

/* ---------- Cookiebar ---------- */
.cookiebar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 950;
    max-width: 1000px;
    margin: 0 auto;
    background: linear-gradient(135deg, #1a1f2e 0%, #232a3d 100%);
    color: var(--color-text-inverse);
    padding: 1.1rem 1.4rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(78, 140, 255, 0.25);
    box-shadow: 0 18px 50px rgba(10, 13, 24, 0.45);
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
    transform: translateY(140%);
    transition: transform 320ms cubic-bezier(.2,.7,.3,1);
}
.cookiebar[hidden] { display: none; }
.cookiebar.is-visible { transform: translateY(0); }
.cookiebar__icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(78, 140, 255, 0.18);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cookiebar__body {
    flex: 1;
    min-width: 280px;
}
.cookiebar__body strong {
    display: block;
    font-size: 0.98rem;
    margin-bottom: 0.25rem;
}
.cookiebar__body p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    line-height: 1.5;
}
.cookiebar__body a {
    color: var(--color-accent);
    text-underline-offset: 2px;
}
.cookiebar__body a:hover { color: #6aa0ff; }
.cookiebar__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}
.cookiebar__actions .btn--primary {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
}
.cookiebar__actions .btn--primary:hover {
    background: #6aa0ff;
    border-color: #6aa0ff;
    color: var(--color-text-inverse);
}
.cookiebar__actions .btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.3);
}
.cookiebar__actions .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-text-inverse);
}

@media (max-width: 720px) {
    .cookiebar { left: 8px; right: 8px; bottom: 8px; padding: 1rem; }
    .cookiebar__actions { width: 100%; }
    .cookiebar__actions .btn { flex: 1; }
}

/* ============================================================ */
/* ========== Add-on Detail Section (Spec 23.06.2026) ========== */
/* ============================================================ */

.section--addons-detail {
    background:
        radial-gradient(ellipse 60% 50% at 90% 10%, rgba(78, 140, 255, 0.07), transparent 60%),
        radial-gradient(ellipse 50% 50% at 5% 80%, rgba(120, 198, 216, 0.08), transparent 60%),
        var(--color-white);
}

/* --- Block-Layout (alternating) --- */
.addon-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
    align-items: center;
    padding: 3.5rem 0;
    border-bottom: 1px solid var(--color-border);
}
.addon-block:last-child { border-bottom: none; }
.addon-block--reverse .addon-block__media { order: 2; }

.addon-block__eyebrow {
    display: inline-block;
    padding: 5px 12px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(78, 140, 255, 0.13);
    color: var(--color-accent);
    border: 1px solid rgba(78, 140, 255, 0.25);
    border-radius: var(--radius-pill);
    font-weight: 600;
    margin-bottom: 1rem;
}
.addon-block__title {
    font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
    margin: 0 0 0.85rem;
    line-height: 1.2;
}
.addon-block__lead {
    font-size: 1.05rem;
    color: var(--color-text-soft);
    margin: 0 0 1.5rem;
    max-width: 480px;
}
.addon-block__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.addon-block__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.96rem;
    color: var(--color-text);
}
.addon-block__bullets li svg { color: var(--color-success); flex-shrink: 0; margin-top: 2px; }
.addon-block__note {
    font-size: 0.85rem;
    color: var(--color-text-soft);
    font-style: italic;
    margin: 0;
}

.addon-block__media {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 380px;
}

/* ============================================================ */
/* PageSpeed-Card                                                */
/* ============================================================ */
.ps-card {
    background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: 0 30px 60px rgba(78, 140, 255, 0.12);
    width: 100%;
    max-width: 480px;
    position: relative;
    overflow: hidden;
}
.ps-card::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(78, 140, 255, 0.15), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.ps-card > * { position: relative; z-index: 1; }

.ps-card__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.ps-card__head strong { display: block; color: var(--color-primary); font-size: 1rem; }
.ps-card__head small  { color: var(--color-text-soft); font-size: 0.8rem; }

.ps-card__score-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.ps-gauge {
    position: relative;
    width: 160px; height: 160px;
    flex-shrink: 0;
}
.ps-gauge__track {
    stroke: rgba(78, 140, 255, 0.12);
    stroke-width: 12;
}
.ps-gauge__progress {
    stroke: var(--color-accent);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 326.7;
    stroke-dashoffset: 326.7;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 8px rgba(78, 140, 255, 0.45));
}
.ps-gauge__value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
}
.ps-gauge__num {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.ps-gauge__unit { color: var(--color-text-soft); font-size: 0.8rem; }
.ps-gauge__label {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-text-soft);
    font-size: var(--fs-xs);
    white-space: nowrap;
}

.ps-vitals {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.ps-vital {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}
.ps-vital__label { color: var(--color-text-soft); font-weight: 600; letter-spacing: 0.05em; }
.ps-vital__value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-primary); }
.ps-vital--good { border-left: 3px solid var(--color-success); }
.ps-vital--good .ps-vital__value { color: var(--color-success); }

.ps-card__history {
    border-top: 1px dashed var(--color-border);
    padding-top: 1rem;
}
.ps-history__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.4rem;
}
.ps-history__head span:first-child { color: var(--color-text-soft); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.ps-history__delta {
    color: var(--color-success);
    font-weight: 700;
    font-size: 0.95rem;
}
.ps-sparkline {
    width: 100%;
    height: 80px;
    display: block;
}
.ps-sparkline__line {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
}
.addon-block.is-visible .ps-sparkline__line {
    animation: ps-draw 1.6s 0.4s ease-out forwards;
}
.addon-block.is-visible .ps-gauge__progress {
    animation: ps-gauge-fill 1.8s 0.2s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes ps-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes ps-gauge-fill {
    to { stroke-dashoffset: 6.5; }  /* 326.7 * (1 - 0.98) */
}

/* ============================================================ */
/* Uptime-Card                                                    */
/* ============================================================ */
.up-card {
    background: linear-gradient(180deg, #0f1626 0%, #1a223a 100%);
    color: var(--color-text-inverse);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    box-shadow: 0 30px 60px rgba(10, 20, 50, 0.4);
    width: 100%;
    max-width: 480px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(78, 140, 255, 0.18);
}

.up-card__head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.up-card__head strong { display: block; font-size: 1rem; color: var(--color-text-inverse); }
.up-card__head small { color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; }

.up-card__radar {
    position: relative;
    width: 42px; height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.up-card__radar-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 12px rgba(78, 140, 255, 0.7);
}
.up-card__radar-ring,
.up-card__radar-ring--2 {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(78, 140, 255, 0.55);
    animation: up-ring 2.4s ease-out infinite;
}
.up-card__radar-ring--2 { animation-delay: 1.2s; }
@keyframes up-ring {
    0%   { transform: scale(0.35); opacity: 1; }
    100% { transform: scale(1.6);  opacity: 0; }
}

.up-list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.up-list__row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 0.75rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem;
}
.up-status { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.8rem; }
.up-status__dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    display: inline-block;
}
.up-status--ok   { color: #4ee3a9; }
.up-status--ok   .up-status__dot { background: #4ee3a9; box-shadow: 0 0 0 0 rgba(78, 227, 169, 0.6); animation: hero-dot-pulse 2.4s ease-in-out infinite; }
.up-status--slow { color: #f7c468; }
.up-status--slow .up-status__dot { background: #f7c468; box-shadow: 0 0 0 0 rgba(247, 196, 104, 0.6); animation: hero-dot-pulse 2.4s 0.4s ease-in-out infinite; }
.up-status--down { color: #ff7676; }
.up-status--down .up-status__dot { background: #ff7676; box-shadow: 0 0 0 0 rgba(255, 118, 118, 0.6); animation: hero-dot-pulse 1.6s ease-in-out infinite; }
.up-host { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: rgba(255, 255, 255, 0.85); }
.up-latency { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.65); font-size: 0.82rem; }

.up-poll {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}
.up-poll__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.55); }
.up-poll__bar { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-pill); overflow: hidden; }
.up-poll__bar-fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--color-accent), #6aa0ff);
    animation: up-poll 5s linear infinite;
}
@keyframes up-poll {
    0%   { width: 0; }
    100% { width: 100%; }
}
.up-poll__value { font-weight: 600; font-variant-numeric: tabular-nums; }

.up-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 118, 118, 0.13);
    border: 1px solid rgba(255, 118, 118, 0.3);
    color: #ffd0d0;
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.85rem;
    font-size: 0.85rem;
}

/* ============================================================ */
/* Mail-Card                                                      */
/* ============================================================ */
.mail-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 30px 60px rgba(26, 31, 46, 0.12);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    transform-origin: top center;
}
.mail-card__chrome {
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem;
    background: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
}
.mail-card__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.mail-card__dot--r { background: #ff7676; }
.mail-card__dot--y { background: #f7c468; }
.mail-card__dot--g { background: #4ee3a9; }

.mail-card__head {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 1rem 1.1rem 0.6rem;
}
.mail-card__avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent), #6aa0ff);
    color: var(--color-text-inverse);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}
.mail-card__head strong { display: block; color: var(--color-primary); font-size: 0.92rem; }
.mail-card__head small { color: var(--color-text-soft); font-size: 0.8rem; }
.mail-card__time { font-size: var(--fs-xs); color: var(--color-text-soft); align-self: start; }

.mail-card__subject {
    margin: 0;
    padding: 0 1.1rem 0.4rem;
    font-size: 1.05rem;
    color: var(--color-primary);
}
.mail-card__body {
    padding: 0 1.1rem 0.6rem;
    color: var(--color-text-soft);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}
.mail-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0 1.1rem 0.9rem;
}
.mail-card__chip {
    background: rgba(78, 140, 255, 0.12);
    color: var(--color-accent);
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.mail-card__send {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.1rem;
    background: rgba(78, 227, 169, 0.1);
    border-top: 1px solid var(--color-border);
    color: var(--color-success);
    font-size: 0.85rem;
    font-weight: 600;
}
.mail-card__send-icon {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--color-success);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Reveal: Stagger fuer Bullets innerhalb der Bloecke */
.addon-block.is-visible .addon-block__bullets li {
    animation: hero-fade-up 0.55s ease-out backwards;
}
.addon-block.is-visible .addon-block__bullets li:nth-child(1) { animation-delay: 0.35s; }
.addon-block.is-visible .addon-block__bullets li:nth-child(2) { animation-delay: 0.45s; }
.addon-block.is-visible .addon-block__bullets li:nth-child(3) { animation-delay: 0.55s; }
.addon-block.is-visible .addon-block__bullets li:nth-child(4) { animation-delay: 0.65s; }

.addon-block.is-visible .addon-block__media {
    animation: addon-media-in 0.85s 0.05s cubic-bezier(.2,.7,.3,1) backwards;
}
@keyframes addon-media-in {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Responsive */
@media (max-width: 960px) {
    .addon-block {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2.5rem 0;
    }
    .addon-block--reverse .addon-block__media { order: 0; }
    .addon-block__media { min-height: auto; }
    .ps-card__score-row { flex-direction: column; align-items: stretch; }
    .ps-vitals { flex-direction: row; flex-wrap: wrap; }
    .ps-vital { flex: 1 1 calc(33% - 0.5rem); }
}

/* ========== CTA-Mid (Mitte der Seite, Conversion-Booster) ========== */
.section--cta-mid {
    padding: clamp(50px, 6vw, 80px) 0;
}
.cta-mid {
    position: relative;
    text-align: center;
    background: linear-gradient(135deg, #1a1f2e 0%, #2a3457 60%, #1a1f2e 100%);
    color: var(--color-text-inverse);
    padding: clamp(45px, 6vw, 75px) clamp(28px, 5vw, 60px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-width: 1080px;
    margin: 0 auto;
    box-shadow: 0 24px 60px rgba(26, 31, 46, 0.25);
    isolation: isolate;
}
.cta-mid__glow {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(78, 140, 255, 0.5), transparent 70%);
    filter: blur(28px);
    z-index: 0;
    pointer-events: none;
    animation: hero-glow 7s ease-in-out infinite;
}
.cta-mid > *:not(.cta-mid__glow) {
    position: relative;
    z-index: 1;
}
.cta-mid__eyebrow {
    display: inline-block;
    padding: 6px 16px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b6cfff;
    background: rgba(78, 140, 255, 0.2);
    border: 1px solid rgba(78, 140, 255, 0.4);
    border-radius: var(--radius-pill);
    font-weight: 600;
    margin-bottom: 1.25rem;
}
.cta-mid__title {
    color: var(--color-text-inverse);
    font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
    line-height: 1.2;
    margin: 0 0 1rem;
    text-wrap: balance;
    max-width: 760px;
    margin-inline: auto;
}
.cta-mid__text {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.05rem;
    max-width: 620px;
    margin: 0 auto 2rem;
}
.cta-mid__buttons {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.cta-mid__buttons .btn--primary {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
    box-shadow: 0 12px 32px rgba(78, 140, 255, 0.45);
}
.cta-mid__buttons .btn--primary:hover {
    background: #6aa0ff;
    border-color: #6aa0ff;
    transform: translateY(-1px);
}
.cta-mid__buttons .btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-inverse);
    border-color: rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.cta-mid__buttons .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-text-inverse);
}

/* ============================================================ */
/* ========== Mobile-Optimierungen (Spec 23.06.2026) =========== */
/* ============================================================ */

/* Hero-Headline kleiner auf Mobile (war zu gross) */
@media (max-width: 720px) {
    .section--hero { padding-top: clamp(28px, 4vw, 50px); padding-bottom: clamp(40px, 7vw, 70px); }
    .section--hero__content { max-width: 100%; }
    .section--hero__headline {
        font-size: clamp(1.7rem, 1.2rem + 3vw, 2.2rem);
        line-height: 1.15;
    }
    .section--hero__bullets { font-size: 0.88rem; gap: 0.4rem; }
    .section--hero__bullets li { font-size: 0.88rem; }
    .section--hero__ctas .btn { padding: 12px 22px; font-size: 1rem; flex: 1 1 100%; text-align: center; }
}

/* Benefit-Cards kompakter: Icon neben H3 statt drueber, spart Hoehe */
@media (max-width: 720px) {
    .benefit-card {
        padding: 1.25rem 1.25rem 1.1rem;
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 0.9rem;
        align-items: start;
    }
    .benefit-card__icon { margin-bottom: 0; width: 40px; height: 40px; grid-row: span 2; }
    .benefit-card h3 { font-size: 1rem; margin-bottom: 0.25rem; grid-column: 2; }
    .benefit-card p { grid-column: 2; font-size: 0.88rem; line-height: 1.5; }
}

/* Pricing-Karten auf Tablet 2-spaltig statt 4-spaltig — bereits oben */
/* Galerie 2-spaltig statt 1-spaltig — bereits oben */

/* ========== Scroll-to-top Button ========== */
.scroll-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 800;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(10, 13, 24, 0.25);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition), background var(--transition);
}
.scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.scroll-top:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
}
@media (max-width: 720px) {
    .scroll-top { bottom: 16px; right: 16px; width: 42px; height: 42px; }
}

/* ========== Link-Button (z. B. Cookie-Einstellungen im Footer) ========== */
.link-button {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: color var(--transition);
}
.site-footer__legal .link-button {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-s);
}
.site-footer__legal .link-button:hover { color: var(--color-secondary); }

/* Help-Layout: bei Detail-Seiten Sidebar oben auf Mobile */
@media (max-width: 720px) {
    .help-sidebar__list { gap: 0.25rem; }
    .help-sidebar__list a { font-size: 0.85rem; padding: 0.35rem 0.6rem; }
}

/* Addon-Detail kompakter auf Mobile */
@media (max-width: 720px) {
    .addon-block { padding: 2rem 0; gap: 1.75rem; }
    .ps-card, .up-card, .mail-card { max-width: 100%; }
    .ps-card__score-row { gap: 1rem; }
    .ps-gauge { width: 140px; height: 140px; }
    .ps-gauge svg { width: 140px; height: 140px; }
}

/* Pricing-Add-on-Cards kompakter Mobile: Icon links neben Title */
@media (max-width: 720px) {
    .pricing-addons { padding: 1.5rem 1rem; }
    .pricing-addons__list { grid-template-columns: 1fr; gap: 0.75rem; }
    .pricing-addons__item {
        padding: 1.1rem 1.1rem;
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 0.85rem;
        align-items: start;
    }
    .pricing-addons__icon { margin-bottom: 0; width: 40px; height: 40px; grid-row: span 3; }
    .pricing-addons__item h4 { grid-column: 2; margin: 0; }
    .pricing-addons__item p  { grid-column: 2; }
    .pricing-addons__chip    { grid-column: 2; margin-top: 0.3rem; }
}

/* Cookiebar auf Mobile gestaltet */
@media (max-width: 720px) {
    .cookiebar__body { font-size: 0.85rem; }
    .cookiebar__icon { display: none; }
}

/* ============================================================ */
/* ========== Showcase: Dashboard Big-Picture ================= */
/* ============================================================ */
.section--showcase {
    padding-top: clamp(50px, 6vw, 90px);
    padding-bottom: clamp(50px, 6vw, 90px);
    background:
        radial-gradient(ellipse 50% 50% at 95% 50%, rgba(78, 140, 255, 0.10), transparent 60%),
        var(--color-white);
    overflow: hidden;
}
/* Container begrenzt, Bild in Browser-Window-Mock */
.section--showcase > .container { max-width: 1280px; }
.showcase {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 3rem;
    align-items: center;
}
.showcase__media { max-width: 720px; margin-left: auto; }

/* Browser-Frame Mock */
.showcase__frame {
    background: #0f1626;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(10, 13, 24, 0.22), 0 0 0 1px rgba(78, 140, 255, 0.10);
    transition: transform 600ms cubic-bezier(.2,.7,.3,1), box-shadow var(--transition);
}
.showcase__frame:hover {
    box-shadow: 0 30px 60px rgba(10, 13, 24, 0.28), 0 0 0 1px rgba(78, 140, 255, 0.22);
}
.showcase__eyebrow {
    display: inline-block;
    padding: 5px 12px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(78, 140, 255, 0.13);
    color: var(--color-accent);
    border: 1px solid rgba(78, 140, 255, 0.25);
    border-radius: var(--radius-pill);
    font-weight: 600;
    margin-bottom: 1rem;
}
.showcase__title {
    font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.1rem);
    line-height: 1.18;
    margin: 0 0 0.85rem;
    color: var(--color-primary);
    text-wrap: balance;
}
.showcase__lead {
    color: var(--color-text-soft);
    font-size: 1.02rem;
    margin: 0 0 1.5rem;
    max-width: 480px;
}
.showcase__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1.5rem;
    max-width: 540px;
}
.showcase__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.92rem;
    color: var(--color-text);
    line-height: 1.4;
}
.showcase__list li svg { color: var(--color-success); flex-shrink: 0; margin-top: 2px; }

/* Browser-Frame-Style steht weiter unten (Definitions-Block) */
.showcase__chrome {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(180deg, #161e36 0%, #0f1626 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.showcase__chrome-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}
.showcase__chrome-dot--r { background: #ff7676; }
.showcase__chrome-dot--y { background: #f7c468; }
.showcase__chrome-dot--g { background: #4ee3a9; }
.showcase__url {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.74rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    margin-left: 0.4rem;
    max-width: 320px;
}
.showcase__frame img { display: block; width: 100%; height: auto; }
.showcase__caption {
    margin: 0.85rem 0 0;
    color: var(--color-text-soft);
    font-size: var(--fs-s);
    text-align: center;
}

.showcase__media[data-reveal].is-visible .showcase__frame {
    animation: showcase-frame-in 0.95s 0.1s cubic-bezier(.2,.7,.3,1) backwards;
}
@keyframes showcase-frame-in {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 960px) {
    .showcase { grid-template-columns: 1fr; gap: 2rem; }
    .showcase__list { grid-template-columns: 1fr; }
    .showcase__media { max-width: 100%; margin-left: 0; }
}
@media (max-width: 720px) {
    .showcase__list { grid-template-columns: 1fr; gap: 0.4rem; }
    .showcase__chrome { padding: 0.45rem 0.65rem; }
    .showcase__chrome-dot { width: 9px; height: 9px; }
    .showcase__url { font-size: 0.68rem; padding: 3px 8px; }
}

/* ============================================================ */
/* ========== Killer-Feature-Spotlight (kompakt, mit Stats) === */
/* ============================================================ */
.section--killer {
    padding-top: clamp(50px, 6vw, 80px);
    padding-bottom: clamp(50px, 6vw, 80px);
    background:
        radial-gradient(ellipse 50% 40% at 80% 0%, rgba(78, 140, 255, 0.10), transparent 60%),
        radial-gradient(ellipse 50% 40% at 20% 100%, rgba(120, 198, 216, 0.10), transparent 60%),
        var(--color-white);
}
.killer-spotlight {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
}
.killer-spotlight__head {
    margin-bottom: 1.5rem;
}
.killer__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 5px 14px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
    color: var(--color-text-inverse);
    border-radius: var(--radius-pill);
    font-weight: 700;
    margin-bottom: 1rem;
    box-shadow: 0 8px 22px rgba(78, 140, 255, 0.32);
}
.killer__eyebrow::before { content: "°5"; font-size: 0.9rem; }
.killer-spotlight__title {
    font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.2rem);
    line-height: 1.18;
    margin: 0 0 0.85rem;
    color: var(--color-primary);
    text-wrap: balance;
    max-width: 760px;
    margin-inline: auto;
}
.killer-spotlight__lead {
    color: var(--color-text-soft);
    font-size: 1.02rem;
    margin: 0 auto;
    max-width: 640px;
}

.killer-spotlight__bullets {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 2rem;
    max-width: 720px;
    margin-inline: auto;
    text-align: left;
}
.killer-spotlight__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.95rem;
    color: var(--color-text);
}
.killer-spotlight__bullets li svg { color: var(--color-success); flex-shrink: 0; margin-top: 2px; }

/* Video-Demo statt Stats — zeigt eine Bulk-Update-Sequence */
.killer-video {
    margin: 1.75rem auto 1.5rem;
    max-width: 820px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.killer-video__frame {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #0f1626;
    box-shadow: 0 24px 50px rgba(10, 13, 24, 0.24), 0 0 0 1px rgba(78, 140, 255, 0.14);
    position: relative;
}
.killer-video__frame video {
    display: block;
    width: 100%;
    height: auto;
}
.killer-video__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-soft);
    font-size: 0.78rem;
    font-style: italic;
    opacity: 0.85;
}
.killer-video__hint svg { opacity: 0.65; }

.killer-spotlight__cta { margin-top: 0.5rem; }

@media (max-width: 720px) {
    .killer-spotlight__bullets { grid-template-columns: 1fr; gap: 0.4rem; }
    .killer-video { margin: 1.25rem auto; }
}

/* ============================================================ */
/* ========== Suche: Header-Button + Overlay-Panel ============ */
/* ============================================================ */
.site-header__search {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 7px 10px 7px 12px;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-soft);
    font-size: 0.88rem;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.site-header__search:hover {
    background: var(--color-white);
    border-color: rgba(78, 140, 255, 0.45);
    color: var(--color-primary);
}
.site-header__search-label { line-height: 1; }
.site-header__search-kbd {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 2px 6px;
    color: var(--color-text-soft);
    line-height: 1;
}
@media (max-width: 1024px) {
    .site-header__search-label,
    .site-header__search-kbd { display: none; }
    .site-header__search { padding: 8px; border-radius: 50%; }
}
@media (max-width: 860px) {
    /* Auf Mobile uebernimmt die Lupe in den Quick-Actions */
    .site-header__search { display: none; }
}

/* Overlay */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(60px, 12vh, 140px) 20px 20px;
    opacity: 0;
    transition: opacity 200ms ease;
}
.search-overlay[hidden] { display: none; }
.search-overlay.is-open { opacity: 1; }
.search-overlay__backdrop {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    background: rgba(10, 13, 24, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}
.search-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 620px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px rgba(10, 13, 24, 0.35);
    overflow: hidden;
    transform: translateY(-12px) scale(0.98);
    transition: transform 220ms cubic-bezier(.2,.7,.3,1);
    display: flex;
    flex-direction: column;
    max-height: min(70vh, 640px);
}
.search-overlay.is-open .search-panel { transform: translateY(0) scale(1); }

.search-panel__input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.search-panel__icon { color: var(--color-accent); flex-shrink: 0; }
.search-panel__input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1.05rem;
    color: var(--color-primary);
    min-width: 0;
}
.search-panel__input::placeholder { color: var(--color-text-soft); }
.search-panel__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-panel__spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(78, 140, 255, 0.25);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: search-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes search-spin { to { transform: rotate(360deg); } }
.search-panel__close {
    width: 30px; height: 30px;
    border: none;
    background: var(--color-bg-muted);
    color: var(--color-text-soft);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition);
}
.search-panel__close:hover { background: var(--color-border); color: var(--color-primary); }

.search-panel__results {
    overflow-y: auto;
    padding: 0.5rem;
    flex: 1;
}
.search-panel__hint,
.search-panel__empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--color-text-soft);
    font-size: var(--fs-s);
    margin: 0;
}
.search-panel__empty strong {
    display: block;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
    font-size: 0.98rem;
}
.search-panel__empty span { display: block; font-size: 0.85rem; }

.search-hit {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background var(--transition);
}
.search-hit:hover,
.search-hit.is-active {
    background: rgba(78, 140, 255, 0.09);
}
.search-hit.is-active { outline: 1px solid rgba(78, 140, 255, 0.3); }
.search-hit__cat {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--color-accent);
    background: rgba(78, 140, 255, 0.11);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    align-self: start;
    margin-top: 2px;
}
.search-hit__body { min-width: 0; }
.search-hit__body strong {
    display: block;
    color: var(--color-primary);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.15rem;
}
.search-hit__body small {
    display: block;
    color: var(--color-text-soft);
    font-size: 0.8rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.search-hit mark {
    background: rgba(78, 140, 255, 0.22);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
    font-weight: 700;
}
.search-hit__arrow { color: var(--color-border); flex-shrink: 0; }
.search-hit:hover .search-hit__arrow,
.search-hit.is-active .search-hit__arrow { color: var(--color-accent); }

.search-panel__footer {
    display: flex;
    gap: 1.25rem;
    padding: 0.6rem 1.1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-muted);
    font-size: 0.72rem;
    color: var(--color-text-soft);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.search-panel__footer kbd {
    font-family: inherit;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 5px;
    margin-right: 3px;
    font-size: 0.7rem;
}
body.search-open { overflow: hidden; }

@media (max-width: 720px) {
    .search-overlay { padding: 12px; align-items: stretch; }
    .search-panel { max-width: 100%; max-height: 100%; border-radius: var(--radius-md); }
    .search-panel__footer { display: none; }
}

/* ============================================================ */
/* ========== Kontaktseite + Formular ========================= */
/* ============================================================ */
.section--contact {
    padding-top: calc(var(--section-pad-y) + 20px);
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 220px);
}
.section--contact .section__head {
    text-align: left;
    max-width: 720px;
    margin-left: 0;
    margin-bottom: 2.5rem;
}
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 2.5rem;
    align-items: start;
    max-width: 1080px;
}
.contact-layout__heading {
    font-size: 1.2rem;
    margin: 0 0 1.25rem;
    color: var(--color-primary);
}

/* --- Formularfelder --- */
.contact-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.form-field { margin-bottom: 1rem; }
.form-field label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.35rem;
}
.form-field__req { color: var(--color-error); font-weight: 400; }
.form-field__opt {
    font-weight: 400;
    color: var(--color-text-soft);
    font-size: 0.8rem;
    margin-left: 0.3rem;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    font-family: inherit;
    font-size: 0.96rem;
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(78, 140, 255, 0.15);
}
.form-field textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.form-field.has-error input,
.form-field.has-error textarea { border-color: var(--color-error); }
.form-field.has-error input:focus,
.form-field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(226, 85, 85, 0.15); }
.form-field__hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: var(--color-text-soft);
}
.form-field--captcha input { max-width: 140px; }

/* Honeypot: fuer Menschen unsichtbar, aber nicht display:none
   (manche Bots ignorieren display:none-Felder gezielt) */
.contact-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- Checkbox --- */
.form-check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
    margin: 1.25rem 0;
    padding: 0.9rem 1rem;
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.form-check input[type="checkbox"] {
    width: 18px; height: 18px;
    margin-top: 2px;
    accent-color: var(--color-accent);
    cursor: pointer;
}
.form-check label {
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--color-text);
    cursor: pointer;
}
.form-check label a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.form-check.has-error {
    border-color: var(--color-error);
    background: rgba(226, 85, 85, 0.06);
}

.contact-form__footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.contact-form__req-note { color: var(--color-text-soft); font-size: 0.78rem; }

/* --- Meldungen --- */
.form-alert {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1.1rem 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}
.form-alert strong { display: block; margin-bottom: 0.25rem; }
.form-alert span { font-size: 0.9rem; line-height: 1.5; }
.form-alert svg { flex-shrink: 0; margin-top: 1px; }
.form-alert ul {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.88rem;
    line-height: 1.55;
}
.form-alert--success {
    background: rgba(31, 163, 126, 0.10);
    border: 1px solid rgba(31, 163, 126, 0.30);
    color: var(--color-success);
}
.form-alert--success strong { color: var(--color-success); }
.form-alert--success span { color: var(--color-text); }
.form-alert--error {
    background: rgba(226, 85, 85, 0.08);
    border: 1px solid rgba(226, 85, 85, 0.28);
    color: var(--color-error);
}
.form-alert--error li { color: var(--color-text); }

/* --- Direktkontakt-Karte --- */
.contact-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 10px 26px rgba(78, 140, 255, 0.08);
    position: sticky;
    top: 100px;
}
.contact-card h3 {
    font-size: 1.05rem;
    margin: 0 0 1.1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-primary);
}
.contact-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contact-card__list li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.75rem;
    align-items: start;
}
.contact-card__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(78, 140, 255, 0.12);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.contact-card__list small {
    display: block;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-soft);
    margin-bottom: 0.15rem;
}
.contact-card__list a {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.94rem;
    word-break: break-word;
}
.contact-card__list a:hover { color: var(--color-accent); }
.contact-card__list em {
    display: block;
    font-style: normal;
    font-size: 0.78rem;
    color: var(--color-text-soft);
    margin-top: 0.15rem;
}
.contact-card__note {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-soft);
}

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
    .contact-card { position: static; }
}
@media (max-width: 560px) {
    .contact-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================ */
/* ========== Capabilities: kompakte Uebersicht oben ========== */
/* ============================================================ */
.section--caps {
    padding-top: clamp(45px, 5vw, 70px);
    padding-bottom: clamp(45px, 5vw, 70px);
    background: var(--color-bg-muted);
}
.section--caps .section__head { margin-bottom: 2rem; }

.caps-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 1080px;
    margin: 0 auto;
}
.caps-group {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.25rem 1.1rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.caps-group:hover {
    border-color: rgba(78, 140, 255, 0.4);
    box-shadow: 0 10px 24px rgba(78, 140, 255, 0.10);
}
.caps-group__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--color-border);
}
.caps-group__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: rgba(78, 140, 255, 0.12);
    color: var(--color-accent);
    flex-shrink: 0;
}
.caps-group__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.caps-group__list li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.855rem;
    line-height: 1.4;
    color: var(--color-text);
}
.caps-group__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.48em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-success);
}

.caps-addons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    max-width: 1080px;
    margin: 1.25rem auto 0;
    padding: 1rem 1.25rem;
    background: var(--color-white);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}
.caps-addons__label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--color-text-soft);
}
.caps-addons__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.caps-addons__list li {
    background: rgba(78, 140, 255, 0.10);
    color: var(--color-accent);
    border: 1px solid rgba(78, 140, 255, 0.24);
    border-radius: var(--radius-pill);
    padding: 3px 11px;
    font-size: 0.8rem;
    font-weight: 600;
}
.caps-addons__note {
    font-size: 0.78rem;
    color: var(--color-text-soft);
    font-style: italic;
}
.caps-cta {
    text-align: center;
    margin: 1.25rem 0 0;
}

@media (max-width: 1024px) {
    .caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .caps-grid { grid-template-columns: 1fr; }
    .caps-addons { flex-direction: column; align-items: flex-start; }
}

/* ============================================================ */
/* ========== Feature-Matrix (Core vs Add-ons pro Plan) ======= */
/* ============================================================ */
.section--matrix {
    padding-top: clamp(50px, 6vw, 80px);
    padding-bottom: clamp(50px, 6vw, 80px);
    background: linear-gradient(180deg, var(--color-bg-muted) 0%, #eef2fb 100%);
}
.matrix-wrap {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(78, 140, 255, 0.10);
}
.matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}
.matrix-table thead th {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    text-align: center;
    padding: 0.85rem 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    font-size: 0.88rem;
    text-transform: uppercase;
}
.matrix-table th.matrix-table__feature { text-align: left; padding-left: 1.25rem; }
.matrix-table__plan--ultimate {
    background: linear-gradient(135deg, var(--color-accent), #6aa0ff) !important;
    position: relative;
}
.matrix-table__plan--pro { background: rgba(78, 140, 255, 0.28) !important; }

.matrix-table__group th {
    background: var(--color-bg-muted);
    color: var(--color-primary);
    text-align: left;
    padding: 0.75rem 1.25rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.matrix-table__group--addons th {
    background: rgba(78, 140, 255, 0.08);
    color: var(--color-accent);
}

.matrix-table tbody td {
    padding: 0.75rem 0.75rem;
    text-align: center;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
}
.matrix-table__feature {
    text-align: left !important;
    padding-left: 1.25rem !important;
    font-weight: 500;
    color: var(--color-primary);
}
.matrix-table__cell--yes { color: var(--color-success); }
.matrix-table__cell--yes svg { display: inline-block; vertical-align: middle; }

.matrix-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.matrix-badge--incl {
    background: rgba(78, 227, 169, 0.16);
    color: var(--color-success);
    border: 1px solid rgba(78, 227, 169, 0.35);
}
.matrix-badge--addon {
    background: rgba(78, 140, 255, 0.10);
    color: var(--color-accent);
    border: 1px solid rgba(78, 140, 255, 0.28);
}

/* Ultimate-Spalte optisch hervorheben in Rows */
.matrix-table tbody td:last-child {
    background: rgba(78, 140, 255, 0.05);
}
.matrix-table tbody tr:hover td { background: rgba(78, 140, 255, 0.04); }
.matrix-table tbody tr:hover td:last-child { background: rgba(78, 140, 255, 0.10); }

.matrix-footnote {
    text-align: center;
    color: var(--color-text-soft);
    font-size: var(--fs-s);
    margin: 1.25rem 0 0;
    padding: 1rem 1.25rem;
    background: var(--color-bg-muted);
    border-top: 1px solid var(--color-border);
}

@media (max-width: 720px) {
    .matrix-wrap { overflow-x: auto; }
    .matrix-table { min-width: 600px; }
    .matrix-table thead th, .matrix-table tbody td { padding: 0.6rem 0.5rem; font-size: 0.85rem; }
}

/* ============================================================ */
/* ========== Security-Spotlight (Auto-Patch + Plugin-Toggle) = */
/* ============================================================ */
.section--secspot {
    padding-top: clamp(50px, 6vw, 80px);
    padding-bottom: clamp(50px, 6vw, 80px);
    background:
        radial-gradient(ellipse 55% 45% at 15% 20%, rgba(78, 227, 169, 0.10), transparent 60%),
        radial-gradient(ellipse 55% 45% at 85% 90%, rgba(78, 140, 255, 0.10), transparent 60%),
        var(--color-white);
}
.section--secspot .section__head { max-width: 780px; }
.secspot__eyebrow {
    display: inline-block;
    padding: 5px 14px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, #1fa37e, #4ee3a9);
    color: var(--color-text-inverse);
    border-radius: var(--radius-pill);
    font-weight: 700;
    margin-bottom: 1rem;
    box-shadow: 0 6px 18px rgba(31, 163, 126, 0.32);
}

.secspot-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
.secspot-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.secspot-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 380ms ease;
}
.secspot-card--security::before { background: linear-gradient(90deg, #1fa37e, #4ee3a9); }
.secspot-card:hover {
    transform: translateY(-4px);
    border-color: rgba(78, 140, 255, 0.45);
    box-shadow: 0 20px 40px rgba(78, 140, 255, 0.16);
}
.secspot-card--security:hover {
    border-color: rgba(31, 163, 126, 0.4);
    box-shadow: 0 20px 40px rgba(31, 163, 126, 0.18);
}
.secspot-card:hover::before { transform: scaleX(1); }

.secspot-card__icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(78, 140, 255, 0.14);
    color: var(--color-accent);
}
.secspot-card--security .secspot-card__icon {
    background: rgba(31, 163, 126, 0.14);
    color: var(--color-success);
}
.secspot-card__eyebrow {
    display: inline-block;
    padding: 3px 10px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-bg-muted);
    color: var(--color-text-soft);
    border-radius: var(--radius-pill);
    font-weight: 600;
    align-self: flex-start;
}
.secspot-card--security .secspot-card__eyebrow {
    background: rgba(31, 163, 126, 0.12);
    color: var(--color-success);
}
.secspot-card--toggle .secspot-card__eyebrow {
    background: rgba(78, 140, 255, 0.13);
    color: var(--color-accent);
}
.secspot-card__title {
    font-size: 1.2rem;
    margin: 0 0 0.25rem;
    color: var(--color-primary);
    line-height: 1.25;
    text-wrap: balance;
}
.secspot-card__text {
    color: var(--color-text-soft);
    margin: 0 0 0.75rem;
    line-height: 1.55;
    font-size: 0.96rem;
}
.secspot-card__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}
.secspot-card__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--color-text);
}
.secspot-card__bullets svg { color: var(--color-success); flex-shrink: 0; margin-top: 2px; }

@media (max-width: 960px) {
    .secspot-grid { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* ========== App-Section (iPod-Style, Passkey, Push) ========= */
/* ============================================================ */
.section--app {
    padding-top: clamp(60px, 7vw, 100px);
    padding-bottom: clamp(60px, 7vw, 100px);
    background:
        radial-gradient(ellipse 60% 50% at 15% 20%, rgba(78, 140, 255, 0.14), transparent 60%),
        radial-gradient(ellipse 50% 50% at 90% 90%, rgba(120, 198, 216, 0.14), transparent 60%),
        linear-gradient(180deg, #0a0f1f 0%, #0f1830 100%);
    color: var(--color-text-inverse);
    overflow: hidden;
    isolation: isolate;
}
.section--app > .container { max-width: 1280px; }
.app-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
}
.app-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    font-weight: 800;
    margin-bottom: 1.25rem;
    box-shadow: 0 6px 18px rgba(78, 140, 255, 0.35);
}
.app-hero__title {
    font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
    line-height: 1.1;
    margin: 0 0 1rem;
    color: var(--color-text-inverse);
    letter-spacing: -0.01em;
    text-wrap: balance;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.app-hero__lead {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.06rem;
    margin: 0 0 1.75rem;
    max-width: 540px;
}
.app-hero__features {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
    max-width: 640px;
}
.app-hero__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.app-hero__feature-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(78, 140, 255, 0.18);
    color: var(--color-accent);
    flex-shrink: 0;
}
.app-hero__features strong {
    display: block;
    color: var(--color-text-inverse);
    font-size: 0.98rem;
    margin-bottom: 0.15rem;
}
.app-hero__features span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.86rem;
    line-height: 1.5;
}
.app-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 500;
}
.app-hero__pwa-note {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    font-style: italic;
    margin: -1rem 0 1.5rem;
}
.app-hero__cta .btn--primary {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border-color: var(--color-accent);
    box-shadow: 0 12px 32px rgba(78, 140, 255, 0.42);
}
.app-hero__cta .btn--primary:hover {
    background: #6aa0ff;
    border-color: #6aa0ff;
    transform: translateY(-1px);
}

/* Smartphone-Mockup */
.app-hero__media {
    display: flex;
    justify-content: center;
    position: relative;
}
.phone-mock {
    position: relative;
    width: 300px;
    aspect-ratio: 9 / 19.5;
    background: #0a0d18;
    border-radius: 44px;
    padding: 12px;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(255, 255, 255, 0.06),
        inset 0 0 0 3px rgba(255, 255, 255, 0.04);
    animation: phone-float 6s ease-in-out infinite;
    will-change: transform;
}
.phone-mock__notch {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 26px;
    background: #0a0d18;
    border-radius: 100px;
    z-index: 2;
}
.phone-mock__screen {
    background: linear-gradient(180deg, #1a2340 0%, #0f1626 100%);
    border-radius: 32px;
    height: 100%;
    padding: 46px 16px 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--color-text-inverse);
}
.phone-mock__status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    padding: 0 12px;
    font-weight: 600;
    margin-top: -18px;
    margin-bottom: 4px;
}
.phone-mock__status-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
}
.phone-mock__header strong {
    display: block;
    color: var(--color-text-inverse);
    font-size: 0.98rem;
    font-weight: 700;
}
.phone-mock__header small {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    margin-top: 2px;
}
.phone-mock__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.phone-mock__stat {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 8px;
    text-align: center;
}
.phone-mock__stat span {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
}
.phone-mock__stat small {
    display: block;
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}
.phone-mock__stat--ok span   { color: #4ee3a9; }
.phone-mock__stat--warn span { color: #f7c468; }
.phone-mock__stat--err span  { color: #ff7676; }

.phone-mock__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    overflow: hidden;
}
.phone-mock__list li {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 8px;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 8px 10px;
}
.phone-mock__list li > div strong {
    display: block;
    color: var(--color-text-inverse);
    font-size: 0.72rem;
    font-weight: 600;
}
.phone-mock__list li > div small {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.62rem;
    margin-top: 2px;
}
.phone-mock__dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.phone-mock__dot--ok   { background: #4ee3a9; box-shadow: 0 0 8px rgba(78, 227, 169, 0.5); }
.phone-mock__dot--warn { background: #f7c468; box-shadow: 0 0 8px rgba(247, 196, 104, 0.5); }
.phone-mock__dot--err  { background: #ff7676; box-shadow: 0 0 8px rgba(255, 118, 118, 0.5); }

/* Push-Benachrichtigung als schwebende Bubble */
.phone-mock__push {
    position: absolute;
    top: 18px;
    right: -60px;
    background: rgba(28, 34, 62, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    max-width: 260px;
    z-index: 3;
    animation: phone-push-in 0.7s 2s cubic-bezier(.2,.7,.3,1) backwards, phone-push-float 5s 2.7s ease-in-out infinite;
}
.phone-mock__push-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #4ee3a9;
    color: #0a0d18;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.phone-mock__push strong {
    display: block;
    color: var(--color-text-inverse);
    font-size: 0.78rem;
    font-weight: 600;
}
.phone-mock__push small {
    display: block;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.68rem;
    margin-top: 2px;
}

@keyframes phone-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-8px) rotate(-1deg); }
}
@keyframes phone-push-in {
    from { opacity: 0; transform: translateX(20px) scale(0.9); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes phone-push-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@media (max-width: 960px) {
    .app-hero { grid-template-columns: 1fr; gap: 2.5rem; }
    .app-hero__media { order: -1; }
    .phone-mock { transform: rotate(0deg); animation-name: phone-float-flat; }
}
@keyframes phone-float-flat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@media (max-width: 720px) {
    .app-hero__features { grid-template-columns: 1fr; gap: 0.85rem; max-width: 100%; }
    .phone-mock { width: 260px; }
    .phone-mock__push { right: -20px; top: 10px; max-width: 200px; }
    .phone-mock__push strong { font-size: 0.72rem; }
    .phone-mock__push small { font-size: 0.62rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
    [data-reveal] { opacity: 1; transform: none; }
    .section--hero__bullets li svg polyline {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }
    .phone-mock__push { opacity: 1; transform: none; }
}