/* ═══════════════════════════════════════════════════════════════════════════
   VitoScore-Siegel (/siegel)
   Premium Enterprise UI · eigenständiges, cachebares Seiten-CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design-Tokens ──────────────────────────────────────────────────────── */
.sg-page {
    --sg-ease: cubic-bezier(.32, .72, 0, 1);
    --sg-ink: #0b1526;
    --sg-muted: #5b6b82;
    --sg-line: #e1e8f1;
    --sg-line-strong: #c7d3e3;
    --sg-canvas: #f4f7fb;
    --sg-panel: #ffffff;
    --sg-panel-soft: #f8fafc;
    --sg-blue: #2563eb;
    --sg-indigo: #4f46e5;
    --sg-sky: #38bdf8;
    position: relative;
    flex: 1 0 auto;
    background: var(--sg-canvas);
    color: var(--sg-ink);
    overflow-x: clip;
}
.dark .sg-page {
    --sg-ink: #e8eef9;
    --sg-muted: #98a8bf;
    --sg-line: #1b2a3f;
    --sg-line-strong: #2b3e59;
    --sg-canvas: #040a15;
    --sg-panel: #0a1424;
    --sg-panel-soft: #0d192b;
    --sg-blue: #60a5fa;
    --sg-indigo: #818cf8;
    --sg-sky: #7dd3fc;
}

.sg-page *,
.sg-page *::before,
.sg-page *::after { box-sizing: border-box; }
.sg-page a { text-decoration: none; }
.sg-page button { font: inherit; }
.sg-page :focus-visible { outline: 2px solid #6366f1; outline-offset: 3px; }
.sg-hero :focus-visible,
.sg-final :focus-visible,
.sg-tab.is-active { outline-color: #7dd3fc; }

.sg-shell { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.sg-block { display: block; }

/* ── Typografie-Bausteine ───────────────────────────────────────────────── */
.sg-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #52627a;
}
.dark .sg-kicker { color: #94a3b8; }
.sg-kicker-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--sg-sky);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .12), 0 0 10px rgba(56, 189, 248, .65);
    flex: none;
}
.sg-section-title {
    margin: .7rem 0 0;
    font-size: clamp(1.8rem, 3.1vw, 2.5rem);
    line-height: 1.06;
    letter-spacing: -.045em;
    font-weight: 900;
    color: var(--sg-ink);
    text-wrap: balance;
}
.sg-section-lede {
    margin: 0;
    max-width: 36rem;
    font-size: .92rem;
    line-height: 1.75;
    color: var(--sg-muted);
}
.sg-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr);
    align-items: end;
    gap: 2.4rem;
    margin-bottom: 2.3rem;
}
.sg-section-head .sg-section-lede { justify-self: end; }
.sg-center { max-width: 700px; margin-inline: auto; text-align: center; }
.sg-center .sg-section-lede { margin: 1rem auto 0; justify-self: center; }
.sg-section { padding-block: clamp(3.4rem, 6vw, 5.2rem); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.sg-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 46px;
    padding: 0 1.15rem;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: .82rem;
    font-weight: 750;
    letter-spacing: -.01em;
    line-height: 1;
    cursor: pointer;
    transition: transform .3s var(--sg-ease), box-shadow .3s var(--sg-ease),
                background-color .3s var(--sg-ease), border-color .3s var(--sg-ease),
                color .3s var(--sg-ease), filter .3s var(--sg-ease);
}
.sg-btn svg { flex: none; }
.sg-btn-primary {
    overflow: hidden;
    color: #fff;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 58%, #1d4ed8 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
                0 12px 26px -14px rgba(37, 99, 235, .85);
}
.sg-btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -55%;
    width: 34%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .24), transparent);
    animation: sgShine 5.5s ease-in-out infinite;
    pointer-events: none;
}
.sg-btn-primary:hover {
    filter: saturate(1.08) brightness(1.04);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32),
                0 18px 34px -14px rgba(37, 99, 235, .95);
}
.sg-btn-primary:active { transform: translateY(0) scale(.985); }
.sg-btn-ghost {
    color: #e2e8f0;
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    backdrop-filter: blur(8px);
}
.sg-btn-ghost:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .24);
    transform: translateY(-1px);
}
.sg-btn-soft {
    color: var(--sg-ink);
    background: var(--sg-panel);
    border-color: var(--sg-line-strong);
}
.sg-btn-soft:hover {
    border-color: color-mix(in srgb, var(--sg-indigo) 45%, var(--sg-line-strong));
    transform: translateY(-1px);
}
.sg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.9rem; }

/* ═══ HERO ══════════════════════════════════════════════════════════════════ */
.sg-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #eef4ff;
    background:
        radial-gradient(ellipse 52% 72% at 86% 12%, rgba(56, 189, 248, .14), transparent 62%),
        radial-gradient(ellipse 56% 78% at 8% 104%, rgba(99, 102, 241, .2), transparent 66%),
        linear-gradient(150deg, #060c1a 0%, #0b1730 47%, #091326 100%);
    border-bottom: 1px solid rgba(148, 163, 184, .13);
}
.sg-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(148, 163, 184, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .055) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(ellipse 78% 86% at 58% 28%, #000 18%, transparent 76%);
    mask-image: radial-gradient(ellipse 78% 86% at 58% 28%, #000 18%, transparent 76%);
}
.sg-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    padding-block: clamp(3.4rem, 6.5vw, 5.6rem);
}
.sg-hero-title {
    margin: 1rem 0 0;
    font-size: clamp(2.3rem, 4.6vw, 3.55rem);
    line-height: 1.03;
    letter-spacing: -.05em;
    font-weight: 900;
    color: #f4f8ff;
    text-wrap: balance;
}
.sg-hero-title em {
    font-style: normal;
    background: linear-gradient(92deg, #7dd3fc 8%, #a5b4fc 55%, #e0f2fe 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sg-hero-lede {
    margin: 1.15rem 0 0;
    max-width: 33rem;
    font-size: .95rem;
    line-height: 1.78;
    color: #9db1cf;
}
.sg-hero-note {
    margin: 1rem 0 0;
    max-width: 33rem;
    font-size: .78rem;
    line-height: 1.7;
    color: #6f84a3;
}
.sg-hero-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: 1.15rem;
    font-size: .74rem;
    font-weight: 700;
    color: #93a9c6;
    transition: color .3s var(--sg-ease), gap .3s var(--sg-ease);
}
.sg-hero-link:hover { color: #e2e8f0; gap: .55rem; }

/* Telemetrie-Leiste unter dem Hero */
.sg-telemetry {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(148, 163, 184, .14);
}
.sg-telemetry-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.05rem 1.2rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .68rem;
    letter-spacing: .06em;
    color: #8fa5c4;
}
.sg-telemetry-item + .sg-telemetry-item { border-left: 1px solid rgba(148, 163, 184, .12); }
.sg-telemetry-item strong {
    display: block;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #e6eefb;
    font-family: inherit;
}
.sg-telemetry-bolt { color: var(--sg-sky); animation: sgPulse 2.6s ease-in-out infinite; }

/* Animiertes Siegel-Emblem rechts im Hero */
.sg-seal-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
}
.sg-seal { width: min(420px, 92%); height: auto; display: block; }
.sg-seal-halo {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, .22), rgba(99, 102, 241, .1) 55%, transparent 72%);
    filter: blur(14px);
    animation: sgBreathe 6s ease-in-out infinite;
    pointer-events: none;
}
.sg-seal-spin { animation: sgRot 64s linear infinite; transform-origin: 200px 200px; }
.sg-seal-spin-rev { animation: sgRotRev 42s linear infinite; transform-origin: 200px 200px; }
.sg-seal-orbit { animation: sgRot 16s linear infinite; transform-origin: 200px 200px; }
.sg-seal-orbit-2 { animation: sgRotRev 26s linear infinite; transform-origin: 200px 200px; }
.sg-seal-ring-fill {
    stroke-dasharray: 879.6;
    stroke-dashoffset: 132;
    animation: sgFill 2.1s var(--sg-ease) .35s both;
}
.sg-seal-check {
    stroke-dasharray: 62;
    stroke-dashoffset: 0;
    animation: sgDraw 1s var(--sg-ease) 1.5s both;
}
.sg-seal-shield { animation: sgBreathe 5s ease-in-out 1s infinite; transform-origin: 200px 205px; }
.sg-seal-spark { animation: sgSparkle 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.sg-seal-spark-2 { animation-delay: .9s; }
.sg-seal-spark-3 { animation-delay: 1.9s; }
.sg-seal-tick { animation: sgPulse 3.4s ease-in-out infinite; }
.sg-seal-live {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: rgba(8, 15, 28, .78);
    backdrop-filter: blur(8px);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #a7c0e0;
}
.sg-seal-live svg { animation: sgPulse 2.2s ease-in-out infinite; }

/* ═══ Panels / Karten ═══════════════════════════════════════════════════════ */
.sg-panel {
    background: var(--sg-panel);
    border: 1px solid var(--sg-line);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 32, 60, .04), 0 18px 40px -28px rgba(15, 32, 60, .18);
}
.dark .sg-panel { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 22px 44px -30px rgba(0, 0, 0, .6); }

/* Vorschau im Browser-Mock */
.sg-preview-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.4rem; align-items: stretch; }
.sg-browser { overflow: hidden; display: flex; flex-direction: column; }
.sg-browser-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1rem;
    border-bottom: 1px solid var(--sg-line);
    background: var(--sg-panel-soft);
}
.sg-browser-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.dark .sg-browser-dot { background: #334155; }
.sg-browser-url {
    flex: 1;
    margin-inline: .5rem;
    padding: .3rem .8rem;
    border-radius: 8px;
    border: 1px solid var(--sg-line);
    background: var(--sg-panel);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .66rem;
    color: var(--sg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sg-browser-body { padding: clamp(1.3rem, 3vw, 2rem); flex: 1; display: flex; flex-direction: column; gap: 1.15rem; }
.sg-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.sg-badge-slot {
    display: inline-flex;
    padding: .5rem .7rem;
    border-radius: 12px;
    border: 1px dashed var(--sg-line-strong);
    background: var(--sg-panel-soft);
    transition: transform .3s var(--sg-ease), border-color .3s var(--sg-ease), box-shadow .3s var(--sg-ease);
}
.sg-badge-slot:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--sg-blue) 55%, var(--sg-line-strong));
    box-shadow: 0 12px 24px -18px rgba(37, 99, 235, .5);
}
.sg-badge-slot img { display: block; }
.sg-badge-caption {
    margin: 0;
    font-size: .72rem;
    line-height: 1.7;
    color: var(--sg-muted);
}
.sg-preview-aside { padding: clamp(1.4rem, 3vw, 1.9rem); display: flex; flex-direction: column; }
.sg-spec-list { margin: 1.15rem 0 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.sg-spec-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .62rem .2rem;
    font-size: .78rem;
    color: var(--sg-muted);
    border-bottom: 1px solid var(--sg-line);
}
.sg-spec-list li:last-child { border-bottom: 0; }
.sg-spec-item b {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--sg-ink);
    text-align: right;
}

/* Embed-Panel mit Tabs */
.sg-embed-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1.4rem; align-items: stretch; }
.sg-code-panel { padding: clamp(1.4rem, 3vw, 1.9rem); display: flex; flex-direction: column; min-width: 0; }
.sg-tabs { display: inline-flex; gap: .3rem; padding: .28rem; border-radius: 12px; border: 1px solid var(--sg-line); background: var(--sg-panel-soft); width: max-content; }
.sg-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .48rem .85rem;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-size: .74rem;
    font-weight: 750;
    letter-spacing: -.01em;
    color: var(--sg-muted);
    cursor: pointer;
    transition: color .25s var(--sg-ease), background-color .25s var(--sg-ease), box-shadow .25s var(--sg-ease);
}
.sg-tab:hover { color: var(--sg-ink); }
.sg-tab.is-active {
    color: #fff;
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    box-shadow: 0 8px 18px -10px rgba(37, 99, 235, .8);
}
.dark .sg-tab.is-active { color: #06101f; background: linear-gradient(180deg, #7dd3fc, #60a5fa); }
.sg-code-shell { position: relative; margin-top: 1.1rem; flex: 1; }
.sg-code {
    margin: 0;
    height: 100%;
    min-height: 168px;
    padding: 1.1rem 1.15rem;
    border-radius: 14px;
    overflow: auto;
    background:
        radial-gradient(ellipse 90% 70% at 20% 0%, rgba(56, 189, 248, .07), transparent 60%),
        #070d1c;
    border: 1px solid #16233c;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .74rem;
    line-height: 1.75;
    color: #c7d6ee;
    tab-size: 2;
}
.sg-code .t-tag { color: #7dd3fc; }
.sg-code .t-attr { color: #a5b4fc; }
.sg-code .t-val { color: #86efac; }
.sg-code-actions { display: flex; align-items: center; gap: .7rem; margin-top: .95rem; flex-wrap: wrap; }
.sg-copy-state {
    font-size: .72rem;
    font-weight: 700;
    color: #10b981;
    opacity: 0;
    transform: translateY(3px);
    transition: opacity .3s var(--sg-ease), transform .3s var(--sg-ease);
}
.sg-copy-state.is-on { opacity: 1; transform: none; }
.sg-embed-side { padding: clamp(1.4rem, 3vw, 1.9rem); display: flex; flex-direction: column; gap: 1rem; }
.sg-mini-step { display: flex; gap: .85rem; align-items: flex-start; }
.sg-mini-step + .sg-mini-step { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--sg-line); }
.sg-mini-icon {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid var(--sg-line);
    background: var(--sg-panel-soft);
    color: var(--sg-blue);
}
.sg-mini-step h3 { margin: .12rem 0 .2rem; font-size: .8rem; font-weight: 800; letter-spacing: -.01em; color: var(--sg-ink); }
.sg-mini-step p { margin: 0; font-size: .76rem; line-height: 1.65; color: var(--sg-muted); }
.sg-inline-code {
    padding: .1rem .35rem;
    border-radius: 6px;
    border: 1px solid var(--sg-line);
    background: var(--sg-panel-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    color: var(--sg-ink);
}

/* ── Timeline „So funktioniert's“ ───────────────────────────────────────── */
.sg-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.sg-steps-line {
    position: absolute;
    top: 33px;
    left: 4%;
    width: 92%;
    height: 2px;
    overflow: visible;
    pointer-events: none;
}
.sg-steps-line path {
    stroke: var(--sg-line-strong);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 6 10;
    animation: sgFlow 6s linear infinite;
}
.dark .sg-steps-line path { stroke: #2b3e59; }
.sg-step { position: relative; z-index: 1; padding: 1.35rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .8rem; transition: transform .35s var(--sg-ease), box-shadow .35s var(--sg-ease), border-color .35s var(--sg-ease); }
.sg-step:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--sg-blue) 40%, var(--sg-line));
    box-shadow: 0 26px 46px -30px rgba(37, 99, 235, .45);
}
.sg-step-top { display: flex; align-items: center; justify-content: space-between; }
.sg-step-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--sg-blue);
    background: linear-gradient(160deg, rgba(59, 130, 246, .13), rgba(99, 102, 241, .07));
    border: 1px solid color-mix(in srgb, var(--sg-blue) 26%, var(--sg-line));
}
.dark .sg-step-icon { background: linear-gradient(160deg, rgba(56, 189, 248, .14), rgba(99, 102, 241, .1)); }
.sg-step-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--sg-muted);
}
.sg-step h3 { margin: 0; font-size: .95rem; font-weight: 850; letter-spacing: -.02em; color: var(--sg-ink); }
.sg-step p { margin: 0; font-size: .8rem; line-height: 1.68; color: var(--sg-muted); }

/* ── Feature-Grid ───────────────────────────────────────────────────────── */
.sg-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.sg-feature {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1.5rem 1.6rem;
    transition: transform .35s var(--sg-ease), box-shadow .35s var(--sg-ease), border-color .35s var(--sg-ease);
}
.sg-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 90% at 85% -10%, rgba(56, 189, 248, .1), transparent 60%);
    opacity: 0;
    transition: opacity .4s var(--sg-ease);
    pointer-events: none;
}
.sg-feature:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--sg-blue) 40%, var(--sg-line));
    box-shadow: 0 26px 50px -30px rgba(37, 99, 235, .45);
}
.sg-feature:hover::before { opacity: 1; }
.sg-feature-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--sg-blue);
    background: linear-gradient(160deg, rgba(59, 130, 246, .14), rgba(99, 102, 241, .08));
    border: 1px solid color-mix(in srgb, var(--sg-blue) 28%, var(--sg-line));
    transition: transform .45s var(--sg-ease);
}
.sg-feature:hover .sg-feature-icon { transform: scale(1.06) rotate(-3deg); }
.dark .sg-feature-icon { background: linear-gradient(160deg, rgba(56, 189, 248, .14), rgba(99, 102, 241, .1)); }
.sg-feature h3 { margin: 1.05rem 0 .35rem; font-size: .95rem; font-weight: 850; letter-spacing: -.02em; color: var(--sg-ink); }
.sg-feature p { margin: 0; font-size: .82rem; line-height: 1.7; color: var(--sg-muted); }

/* ── Zeigt / Zeigt nicht ────────────────────────────────────────────────── */
.sg-truth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
.sg-truth-card { padding: 1.6rem 1.6rem 1.7rem; }
.sg-truth-card.is-yes { border-color: color-mix(in srgb, #10b981 32%, var(--sg-line)); }
.sg-truth-head { display: flex; align-items: center; gap: .7rem; }
.sg-truth-badge {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    flex: none;
}
.sg-truth-card.is-yes .sg-truth-badge { color: #059669; background: rgba(16, 185, 129, .12); border: 1px solid rgba(16, 185, 129, .3); }
.dark .sg-truth-card.is-yes .sg-truth-badge { color: #34d399; background: rgba(16, 185, 129, .14); }
.sg-truth-card.is-no .sg-truth-badge { color: #64748b; background: rgba(100, 116, 139, .12); border: 1px solid rgba(100, 116, 139, .28); }
.dark .sg-truth-card.is-no .sg-truth-badge { color: #94a3b8; }
.sg-truth-card h3 { margin: 0; font-size: .92rem; font-weight: 850; letter-spacing: -.01em; color: var(--sg-ink); }
.sg-truth-list { margin: 1.1rem 0 0; padding: 0; list-style: none; display: grid; gap: .78rem; }
.sg-truth-list li { display: flex; gap: .65rem; align-items: flex-start; font-size: .83rem; line-height: 1.65; color: var(--sg-muted); }
.sg-truth-list svg { flex: none; margin-top: .18rem; }
.sg-truth-card.is-yes li svg { color: #10b981; }
.sg-truth-card.is-no li svg { color: #7c8ba1; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.sg-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.sg-faq-list { display: grid; gap: .7rem; }
.sg-faq {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--sg-line);
    background: var(--sg-panel);
    transition: border-color .3s var(--sg-ease), box-shadow .3s var(--sg-ease);
}
.sg-faq:hover { border-color: var(--sg-line-strong); }
.sg-faq[open] { border-color: color-mix(in srgb, var(--sg-blue) 38%, var(--sg-line)); box-shadow: 0 18px 38px -30px rgba(37, 99, 235, .5); }
.sg-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--sg-ink);
}
.sg-faq summary::-webkit-details-marker { display: none; }
.sg-faq-chev {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid var(--sg-line);
    background: var(--sg-panel-soft);
    color: var(--sg-muted);
    transition: transform .35s var(--sg-ease), color .3s var(--sg-ease), border-color .3s var(--sg-ease);
}
.sg-faq[open] .sg-faq-chev { transform: rotate(180deg); color: var(--sg-blue); border-color: color-mix(in srgb, var(--sg-blue) 40%, var(--sg-line)); }
.sg-faq-body { padding: 0 1.25rem 1.15rem; }
.sg-faq-body p { margin: 0; font-size: .84rem; line-height: 1.75; color: var(--sg-muted); }
.sg-faq-aside { padding: 1.7rem 1.7rem 1.8rem; position: sticky; top: 96px; }
.sg-faq-aside h3 { margin: 1rem 0 .45rem; font-size: 1.05rem; font-weight: 900; letter-spacing: -.025em; color: var(--sg-ink); }
.sg-faq-aside p { margin: 0; font-size: .82rem; line-height: 1.72; color: var(--sg-muted); }
.sg-faq-aside-list { margin: 1.15rem 0 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.sg-faq-aside-list li { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--sg-muted); }
.sg-faq-aside-list svg { flex: none; color: var(--sg-sky); }

/* ── Abschluss-CTA ──────────────────────────────────────────────────────── */
.sg-final {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: clamp(3rem, 6vw, 5rem);
    border-radius: 24px;
    padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.6rem, 4vw, 3.2rem);
    color: #eef4ff;
    background:
        radial-gradient(ellipse 60% 90% at 90% 10%, rgba(56, 189, 248, .18), transparent 60%),
        radial-gradient(ellipse 55% 85% at 6% 100%, rgba(99, 102, 241, .24), transparent 62%),
        linear-gradient(150deg, #060c1a, #0b1730 55%, #091326);
    border: 1px solid rgba(148, 163, 184, .16);
}
.sg-final::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(148, 163, 184, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 0%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 90% at 50% 0%, #000 20%, transparent 75%);
}
.sg-final-title { margin: .8rem 0 0; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; letter-spacing: -.045em; line-height: 1.1; color: #f2f7ff; text-wrap: balance; }
.sg-final-lede { margin: .85rem 0 0; max-width: 34rem; font-size: .88rem; line-height: 1.75; color: #9db1cf; }
.sg-final .sg-kicker { color: #7dd3fc; }
.sg-final-note { margin: 1.1rem 0 0; font-size: .74rem; color: #6f84a3; }
.sg-final-deco { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 340px; opacity: .5; pointer-events: none; }
.sg-final-deco .sg-seal-spin { animation-duration: 80s; }

/* ── Scroll-Reveal ──────────────────────────────────────────────────────── */
/* Verstecken nur, wenn siegel.js aktiv ist – ohne JS bleibt der Inhalt sichtbar. */
.sg-js .sg-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--sg-ease), transform .7s var(--sg-ease); }
.sg-js .sg-reveal.is-in { opacity: 1; transform: none; }
.sg-js .sg-reveal-d1 { transition-delay: .08s; }
.sg-js .sg-reveal-d2 { transition-delay: .16s; }
.sg-js .sg-reveal-d3 { transition-delay: .24s; }

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes sgShine { 0%, 55% { left: -55%; } 85%, 100% { left: 130%; } }
@keyframes sgRot { to { transform: rotate(360deg); } }
@keyframes sgRotRev { to { transform: rotate(-360deg); } }
@keyframes sgPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sgBreathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.035); opacity: .82; } }
@keyframes sgFill { from { stroke-dashoffset: 879.6; } }
@keyframes sgDraw { from { stroke-dashoffset: 62; } }
@keyframes sgFlow { to { stroke-dashoffset: -160; } }
@keyframes sgSparkle {
    0%, 100% { opacity: 0; transform: scale(.4); }
    45% { opacity: 1; transform: scale(1); }
    60% { opacity: .6; transform: scale(.8); }
}

/* ── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sg-page *,
    .sg-page *::before,
    .sg-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .sg-reveal { opacity: 1; transform: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
    .sg-hero-grid { grid-template-columns: 1fr; }
    .sg-seal-stage { min-height: 0; margin-top: .5rem; }
    .sg-seal { width: min(340px, 80%); }
    .sg-preview-grid, .sg-embed-grid, .sg-faq-grid { grid-template-columns: 1fr; }
    .sg-faq-aside { position: static; }
    .sg-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sg-steps-line { display: none; }
    .sg-final-deco { display: none; }
}
@media (max-width: 680px) {
    .sg-shell { width: min(1180px, calc(100% - 2rem)); }
    .sg-section-head { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
    .sg-section-head .sg-section-lede { justify-self: start; }
    .sg-telemetry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sg-telemetry-item:nth-child(3) { border-left: 0; }
    .sg-telemetry-item:nth-child(n + 3) { border-top: 1px solid rgba(148, 163, 184, .12); }
    .sg-features, .sg-truth, .sg-steps { grid-template-columns: 1fr; }
    .sg-actions .sg-btn { flex: 1; }
}