/* =================================================================
   Socmon v2 — Government-Tech, moderne SaaS-Ästhetik
   Inspiriert von gov.uk Präzision + Palantir Foundry Ruhe
   ================================================================= */

/* Schriften lokal aus fonts/inter.css (im HTML eingebunden) — keine externen Requests */

:root {
    /* Base palette */
    --bg:              #FAFAF7;
    --bg-sand:         #F2EBD9;
    --bg-sand-soft:    #F7F1E2;
    --bg-dark:         #0B1220;
    --bg-dark-soft:    #111B2E;

    --ink:             #0B1220;
    --ink-soft:        #2A3344;
    --ink-muted:       #5E6878;
    --ink-faint:       #8B94A3;
    --line:            #E2DFD5;
    --line-strong:     #C9C4B2;

    /* Signal — Institutional Blue */
    --accent:          #1D4ED8;
    --accent-dark:     #1E3A8A;
    --accent-soft:     #DBE7FE;
    --accent-tint:     #EFF4FF;

    /* Secondary */
    --warn:            #B45309;
    --info:            #1D4ED8;

    --radius:          4px;
    --radius-lg:       8px;
    --max-w:           1200px;
    --gutter:          clamp(20px, 4vw, 40px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'ss01', 'cv11', 'cv02';
}

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

h1, h2, h3, h4, h5 {
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0;
}

p { margin: 0 0 1em 0; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-feature-settings: 'zero';
}

::selection { background: var(--ink); color: var(--bg); }

.wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--gutter);
    position: relative;
}

/* Section backgrounds — alternating */
.bg-white { background: #ffffff; }
.bg-base  { background: var(--bg); }
.bg-sand  { background: var(--bg-sand-soft); }
.bg-dark  { background: var(--bg-dark); color: rgba(255,255,255,0.78); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: #ffffff; }

section { padding: 110px 0; position: relative; }

@media (max-width: 800px) {
    section { padding: 72px 0; }
}

/* ---- Meta-Label (government-style eyebrow) ---------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}
.eyebrow::before {
    content: '';
    width: 14px;
    height: 2px;
    background: var(--accent);
}
.bg-dark .eyebrow { color: #7FC5A4; }
.bg-dark .eyebrow::before { background: #7FC5A4; }

/* ---- TOP BAR ---------------------------------------------- */
.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: rgba(250, 250, 247, 0.9);
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid var(--line);
}
.topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 14px;
}
.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: var(--ink) !important;
}
.wordmark-glyph {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--accent-soft);
    border: 1.5px solid var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}
.wordmark-glyph::before {
    content: '';
    position: absolute;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow:
        0 0 0 4px color-mix(in oklch, var(--accent) 18%, transparent),
        0 0 0 9px color-mix(in oklch, var(--accent) 8%, transparent);
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(0.85); opacity: 0.75; }
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    padding: 8px 14px;
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
}
.nav-links a:hover { color: var(--ink); background: var(--bg-sand-soft); }
.nav-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
    padding-left: 16px;
    border-left: 1px solid var(--line);
}
.lang-switch {
    display: inline-flex;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.lang-switch button {
    background: transparent;
    border: 0;
    padding: 5px 9px;
    color: var(--ink-muted);
    cursor: pointer;
    text-transform: uppercase;
}
.lang-switch button.active { background: var(--ink); color: #fff; }

.nav-toggle { display: none; }

@media (max-width: 960px) {
    .nav-links { display: none; }
    .nav-toggle {
        display: inline-flex; align-items: center; gap: 6px;
        background: var(--ink); color: #fff;
        border: 0; padding: 8px 14px; border-radius: var(--radius);
        font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer;
    }
    .topbar.open .nav-links {
        display: flex; flex-direction: column; align-items: stretch;
        position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--line);
        padding: 12px var(--gutter); gap: 0;
    }
    .topbar.open .nav-links a { padding: 14px 4px; border-bottom: 1px solid var(--line); }
    .topbar.open .nav-links a:last-child { border: 0; }
    .nav-cta { margin: 0; padding: 0; border: 0; }
}

/* ---- BUTTONS ---------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.005em;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}
.btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}
.btn-accent {
    background: var(--accent);
    border-color: var(--accent);
}
.btn-accent:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #fff;
}
.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}
.btn-ghost:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.bg-dark .btn-ghost {
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}
.bg-dark .btn-ghost:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
}
.btn .arrow { font-weight: 500; transition: transform 0.15s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---- HERO ------------------------------------------------- */
.hero {
    padding: 130px 0 0;
    background:
        linear-gradient(180deg, #FFFFFF 0%, var(--bg) 60%, var(--bg) 100%);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.hero .wrap { text-align: center; }
.hero .badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 32px;
}
.hero .badge .pill {
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
}
.hero-title {
    font-size: clamp(40px, 6.5vw, 80px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0 auto 24px;
    max-width: 14ch;
    color: var(--ink);
}
.hero-title .hl {
    background: linear-gradient(180deg, transparent 65%, var(--accent-soft) 65%, var(--accent-soft) 92%, transparent 92%);
    padding: 0 6px;
    color: var(--accent-dark);
}
.hero-lead {
    font-size: clamp(17px, 1.6vw, 20px);
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0 auto 36px;
    line-height: 1.55;
}
.hero-ctas {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 60px;
}
.hero-trust {
    display: inline-flex;
    gap: 28px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 13px;
    color: var(--ink-muted);
    padding-top: 20px;
    border-top: 1px dashed var(--line-strong);
    max-width: 720px;
    margin: 0 auto 60px;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }

/* Hero screenshot — "aircraft view" */
.hero-screen {
    margin: 0 auto;
    max-width: 1080px;
    padding: 0 var(--gutter);
    perspective: 1800px;
    transform-style: preserve-3d;
}
.hero-screen .frame {
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 30px 60px -20px rgba(11, 18, 32, 0.22),
                0 10px 20px -12px rgba(11, 18, 32, 0.15);
    overflow: hidden;
    transform: rotateX(4deg);
    transform-origin: bottom center;
    position: relative;
}
.hero-screen .chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #F4F2EC;
    border-bottom: 1px solid var(--line);
}
.hero-screen .chrome .dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--line-strong);
}
.hero-screen .chrome .bar {
    flex: 1;
    margin-left: 10px;
    height: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--ink-muted);
    padding: 3px 10px;
    display: flex; align-items: center;
}
.hero-screen .shot {
    aspect-ratio: 16 / 9.6;
    overflow: hidden;
    position: relative;
    background: var(--bg);
}
.hero-screen .shot img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
}
.hero-screen .shot::after {
    content:'';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 100%, transparent 30%, rgba(250, 250, 247, 0.9) 85%),
        linear-gradient(180deg, transparent 60%, rgba(250,250,247,0.8) 100%);
    pointer-events: none;
}
/* fading bottom edge */
.hero-screen .frame::after {
    content:'';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 50%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(250,250,247,0.95) 100%);
}

@media (max-width: 700px) {
    .hero { padding-top: 100px; }
    .hero-screen .chrome .bar { display: none; }
}

/* ---- TECH BAR (platforms) --------------------------------- */
.techbar {
    padding: 40px 0;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
}
.techbar .wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 40px;
}
.techbar .title {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    max-width: 14ch;
}
.techbar .platforms {
    display: flex;
    gap: 24px 36px;
    flex-wrap: wrap;
}
.techbar .plat {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
}
.techbar .plat .g {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--accent);
    background: var(--accent-tint);
}
.techbar .plat .g svg { width: 16px; height: 16px; }

@media (max-width: 700px) {
    .techbar .wrap { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- FEATURE ROWS (alternating) --------------------------- */
.feature-row {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 72px;
    align-items: center;
}
.feature-row + .feature-row { margin-top: 120px; }
.feature-row.reverse .col-text { order: 2; }
.feature-row.reverse .col-media { order: 1; }

.feature-row h2 {
    font-size: clamp(28px, 3.2vw, 40px);
    margin-bottom: 20px;
    letter-spacing: -0.025em;
}
.feature-row p.lead {
    font-size: 17px;
    color: var(--ink-soft);
    max-width: 48ch;
    margin-bottom: 24px;
}
.feature-row ul.bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
}
.feature-row ul.bullets li {
    position: relative;
    padding: 10px 0 10px 32px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    color: var(--ink-soft);
}
.feature-row ul.bullets li:last-child { border-bottom: 1px solid var(--line); }
.feature-row ul.bullets li::before {
    content: '';
    position: absolute;
    left: 0; top: 17px;
    width: 18px; height: 18px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    background:
        radial-gradient(circle at center, var(--accent) 0 3px, transparent 3px);
}

/* Media column — blurred shot + callout */
.col-media {
    position: relative;
}
.shot-card {
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 18px 40px -20px rgba(11,18,32,0.18);
    position: relative;
}
.shot-card .meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: #F7F5EE;
    border-bottom: 1px solid var(--line);
}
.shot-card .meta-row .redact {
    color: var(--accent);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.shot-card .meta-row .redact::before {
    content:''; width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
}
.shot-card .pic {
    aspect-ratio: 16 / 11;
    overflow: hidden;
    position: relative;
    background: var(--bg);
}
.shot-card .pic img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top left;
}
.shot-card .pic::after {
    content:'';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.35) 100%);
}

/* callout chip overlaying the shot */
.callout {
    position: absolute;
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius);
    padding: 14px 18px;
    max-width: 260px;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 12px 30px -10px rgba(11,18,32,0.35);
}
.callout .kicker {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7FC5A4;
    margin-bottom: 6px;
    display: block;
}
.callout.tl { top: 20px; left: -32px; }
.callout.br { bottom: -24px; right: -24px; }
.callout.tr { top: 20px; right: -32px; }
.callout.bl { bottom: -24px; left: -24px; }

@media (max-width: 900px) {
    .feature-row { grid-template-columns: 1fr; gap: 40px; }
    .feature-row + .feature-row { margin-top: 80px; }
    .feature-row.reverse .col-text { order: 1; }
    .feature-row.reverse .col-media { order: 2; }
    .callout { position: static; max-width: none; margin-top: 16px; }
}

/* ---- Section header (centered) ---------------------------- */
.sec-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 64px;
}
.sec-head h2 {
    font-size: clamp(30px, 3.6vw, 44px);
    letter-spacing: -0.025em;
    margin-bottom: 14px;
}
.sec-head p {
    font-size: 17px;
    color: var(--ink-muted);
}
.bg-dark .sec-head p { color: rgba(255,255,255,0.6); }

/* ---- USECASES (cards on sand) ----------------------------- */
.usecases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.uc-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.uc-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 18px 40px -20px rgba(31,107,78,0.25);
}
.uc-card .num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}
.uc-card h3 {
    font-size: 21px;
    margin-bottom: 12px;
}
.uc-card p {
    font-size: 15px;
    color: var(--ink-soft);
    margin-bottom: 20px;
    flex: 1;
}
.uc-card .examples {
    list-style: none;
    padding: 16px 0 0 0;
    margin: 0;
    border-top: 1px solid var(--line);
}
.uc-card .examples li {
    font-size: 13px;
    color: var(--ink-muted);
    padding: 5px 0;
    padding-left: 18px;
    position: relative;
}
.uc-card .examples li::before {
    content:'';
    position: absolute;
    left: 0; top: 11px;
    width: 8px; height: 1px;
    background: var(--accent);
}

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

/* ---- SECURITY STATS (dark) -------------------------------- */
.sec-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-dark-soft);
}
.sec-stats .cell {
    padding: 32px 28px;
    border-right: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sec-stats .cell:nth-child(4n) { border-right: 0; }
.sec-stats .cell:nth-last-child(-n+4) { border-bottom: 0; }
.sec-stats .big {
    font-family: 'Inter', sans-serif;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}
.sec-stats .big .unit { color: #7FC5A4; font-weight: 600; font-size: 28px; }
.sec-stats .lbl {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}
.sec-stats .note {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7FC5A4;
    margin-top: 14px;
    display: block;
}

@media (max-width: 900px) {
    .sec-stats { grid-template-columns: repeat(2, 1fr); }
    .sec-stats .cell:nth-child(4n) { border-right: 1px solid rgba(255,255,255,0.08); }
    .sec-stats .cell:nth-child(2n) { border-right: 0; }
    .sec-stats .cell:nth-last-child(-n+2) { border-bottom: 0; }
}

.sec-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
}
.sec-details .item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    padding: 20px;
}
.sec-details h4 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 8px;
}
.sec-details p {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 1100px) { .sec-details { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .sec-details { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px)  { .sec-details { grid-template-columns: 1fr; } }

/* ---- PROCESS (horizontal band) ---------------------------- */
.process {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
}
.process .p-step {
    padding: 28px 24px;
    border-right: 1px solid var(--line);
    position: relative;
}
.process .p-step:last-child { border-right: 0; }
.process .p-step .num {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.1em;
}
.process .p-step h4 {
    font-size: 17px;
    margin: 8px 0 8px;
}
.process .p-step p {
    font-size: 13px;
    color: var(--ink-muted);
    line-height: 1.5;
    margin-bottom: 10px;
}
.process .p-step .dur {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
@media (max-width: 900px) {
    .process { grid-template-columns: 1fr 1fr; }
    .process .p-step:nth-child(2n) { border-right: 0; }
    .process .p-step:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 500px) {
    .process { grid-template-columns: 1fr; }
    .process .p-step { border-right: 0; border-bottom: 1px solid var(--line); }
    .process .p-step:last-child { border-bottom: 0; }
}

/* ---- PRICING ---------------------------------------------- */
.pricing {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.price {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px 24px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border 0.2s, box-shadow 0.2s, transform 0.2s;
}
.price:hover {
    border-color: var(--accent);
    box-shadow: 0 18px 40px -20px rgba(31,107,78,0.25);
    transform: translateY(-3px);
}
.price.highlight {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 18px 40px -20px rgba(31,107,78,0.25);
}
.price.highlight::before {
    content:'';
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-lg);
    padding: 1px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--ink) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
.price .tier {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}
.price .name {
    font-size: 26px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}
.price .for {
    font-size: 13px;
    color: var(--ink-muted);
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    min-height: 56px;
}
.price ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    flex: 1;
}
.price li {
    font-size: 13.5px;
    padding: 7px 0 7px 22px;
    color: var(--ink-soft);
    position: relative;
}
.price li::before {
    content:'✓';
    position: absolute;
    left: 0; top: 7px;
    color: var(--accent);
    font-weight: 600;
    font-size: 12px;
}
.price li.base::before { content:'—'; color: var(--ink-faint); }
.price .badge-pop {
    position: absolute;
    top: -10px; left: 24px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}

@media (max-width: 1000px) { .pricing { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .pricing { grid-template-columns: 1fr; } }

.pricing-note {
    text-align: center;
    font-size: 13px;
    color: var(--ink-muted);
    margin-top: 32px;
}

/* ---- FAQ -------------------------------------------------- */
.faq {
    max-width: 880px;
    margin: 0 auto;
}
.faq details {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    transition: border 0.15s;
}
.faq details[open] { border-color: var(--ink); }
.faq summary {
    list-style: none;
    padding: 20px 24px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-dark); }
.faq summary .toggle {
    width: 28px; height: 28px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: var(--ink);
    font-weight: 300;
    transition: all 0.15s;
}
.faq details[open] .toggle { background: var(--ink); color: #fff; border-color: var(--ink); }
.faq details[open] .toggle::before { content:'−'; }
.faq details:not([open]) .toggle::before { content:'+'; }
.faq .answer {
    padding: 0 24px 24px;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.65;
    max-width: 72ch;
}

/* ---- CONTACT ---------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: start;
}
.contact-grid .lhs h2 {
    font-size: clamp(30px, 3.6vw, 44px);
    margin-bottom: 16px;
    letter-spacing: -0.025em;
}
.contact-grid .lhs p {
    color: var(--ink-soft);
    font-size: 16px;
    margin-bottom: 24px;
}
.contact-grid .lhs .info {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    font-size: 14px;
}
.contact-grid .lhs .info strong { color: var(--ink); font-weight: 600; }
.contact-grid .lhs .info .row { display: flex; justify-content: space-between; padding: 6px 0; }
.contact-grid .lhs .info .row + .row { border-top: 1px solid var(--line); }
.contact-grid .lhs .info .k { color: var(--ink-muted); font-size: 13px; }

.form-status {
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
    display: grid;
    gap: 4px;
}
.form-status strong { color: inherit; font-weight: 600; }
.form-status a { color: inherit; text-decoration: underline; }
.form-status-success {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
}
.form-status-warn {
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    color: #92400E;
}
.form-status-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}

.cform {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: grid;
    gap: 16px;
}
.cform .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cform label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 6px;
}
.cform label .req { color: var(--accent); }
.cform input, .cform textarea {
    width: 100%;
    padding: 11px 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    color: var(--ink);
    transition: border 0.15s, background 0.15s;
}
.cform input:focus, .cform textarea:focus {
    outline: 0;
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.cform textarea { min-height: 110px; resize: vertical; }
.cform button { justify-self: start; margin-top: 4px; }
.cform .legal {
    font-size: 12px;
    color: var(--ink-muted);
    margin: 0;
}
.cform .legal a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }

@media (max-width: 860px) {
    .contact-grid { grid-template-columns: 1fr; gap: 32px; }
    .cform .row { grid-template-columns: 1fr; }
    .cform { padding: 24px; }
}

/* ---- FOOTER ----------------------------------------------- */
footer {
    background: var(--bg-dark);
    color: rgba(255,255,255,0.6);
    padding: 56px 0 28px;
}
footer .wrap.top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 24px;
}
footer .wordmark { color: #fff !important; }
footer .brand p {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin-top: 16px;
    max-width: 32ch;
    line-height: 1.6;
}
footer h5 {
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { padding: 5px 0; }
footer a { color: rgba(255,255,255,0.7); font-size: 14px; }
footer a:hover { color: #fff; }
footer .legal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.05em;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 780px) {
    footer .wrap.top { grid-template-columns: 1fr 1fr; gap: 32px; }
    footer .legal-row { flex-direction: column; text-align: center; }
}

/* ================================================================
   RESPONSIVE MOBILE FIXES — website2
   Alle Änderungen in @media-Blöcken gekapselt.
   Desktop-Layout bleibt vollständig erhalten.
   ================================================================ */

/* ---- TABLET (601px–900px) ---- */
@media (max-width: 900px) {
    /* Scroll-Padding für Mobile-Topbar anpassen */
    html { scroll-padding-top: 80px; }

    /* Mobile-CTA im Menü auf Tablet anzeigen */
    .mobile-cta { display: none; }
}

/* ---- GROSSES SMARTPHONE / TABLET HOCHFORMAT (480px–640px) ---- */
@media (max-width: 640px) {
    /* Mobile-CTA im Menü anzeigen */
    .mobile-cta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
        padding: 12px 4px;
        border-top: 1px solid var(--line);
        font-weight: 500;
        color: var(--accent) !important;
    }
    .mobile-cta .arrow { transition: transform 0.15s; }
    .mobile-cta:active .arrow { transform: translateX(3px); }
}

/* ---- GROSSES SMARTPHONE / TABLET HOCHFORMAT (480px–640px) ---- */
@media (max-width: 640px) {
    /* Topbar: Language-Switch im Desktop-Header ausblenden */
    .nav-cta .lang-switch { display: none; }

    /* Topbar: CTA-Button im Desktop-Header ausblenden */
    .nav-cta .btn-accent { display: none; }

    /* Hero: 3D-Effekt deaktivieren, Padding reduzieren */
    .hero-screen {
        perspective: none;
        transform: none;
        padding: 0 16px;
    }
    .hero-screen .frame {
        transform: none;
        box-shadow: 0 20px 40px -15px rgba(11, 18, 32, 0.18);
    }
    .hero-screen .chrome .bar { display: none; }

    /* Hero-Titel: Mehrzeiligen Highlight sauberer */
    .hero-title {
        max-width: none;
        font-size: clamp(32px, 9vw, 44px);
    }
    .hero-title .hl {
        padding: 0 4px;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    /* Hero-Trust Badges: kompakter */
    .hero-trust {
        gap: 12px 16px;
        font-size: 12px;
        padding-top: 16px;
        margin-bottom: 40px;
    }

    /* Techbar: kompaktere Plattform-Darstellung */
    .techbar .platforms {
        gap: 12px 20px;
    }
    .techbar .plat {
        font-size: 13px;
    }

    /* Feature-Row Bullets: Bullet-Position anpassen */
    .feature-row ul.bullets li::before {
        top: 14px;
    }

    /* FAQ: kompakteres Padding */
    .faq summary {
        padding: 16px 18px;
        gap: 12px;
        font-size: 15px;
    }
    .faq .answer {
        padding: 0 18px 20px;
        font-size: 14px;
    }

    /* iOS Touch-Callout für FAQ deaktivieren */
    .faq summary {
        -webkit-touch-callout: none;
    }
}

/* ---- STANDARD-SMARTPHONE (360px–479px) ---- */
@media (max-width: 480px) {
    /* Scroll-Padding weiter reduzieren */
    html { scroll-padding-top: 72px; }

    /* Hero: weniger Padding oben */
    .hero { padding-top: 90px; }

    /* Hero-Titel noch kompakter */
    .hero-title {
        font-size: clamp(30px, 9vw, 40px);
        margin-bottom: 18px;
    }

    /* Hero-Badge etwas kleiner */
    .hero .badge {
        font-size: 12px;
        padding: 5px 12px 5px 8px;
        margin-bottom: 24px;
    }

    /* CTA-Buttons im Hero untereinander */
    .hero-ctas {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 36px;
    }
    .hero-ctas .btn {
        justify-content: center;
    }

    /* Techbar: mehr vertikaler Abstand */
    .techbar .platforms {
        gap: 16px 20px;
    }
    .techbar .title {
        font-size: 10px;
    }

    /* Section-Padding reduzieren */
    section { padding: 72px 0; }

    /* Feature-Row Headlines etwas kleiner */
    .feature-row h2 {
        font-size: clamp(24px, 5vw, 34px);
    }

    /* Security Stats: Schrift kleiner */
    .sec-stats .big {
        font-size: 28px;
        word-break: break-word;
    }
    .sec-stats .cell {
        padding: 24px 16px;
    }

    /* Process: vertikale Abstände */
    .process .p-step {
        padding: 20px 18px;
    }

    /* Kontakt-Formular Inputs: Touch-optimiert (16px verhindert iOS-Zoom) */
    .cform input, .cform textarea {
        font-size: 16px;
        padding: 13px;
    }
    .cform textarea {
        min-height: 100px;
    }
    .cform {
        padding: 24px 18px;
    }

    /* FAQ Toggle etwas kleiner */
    .faq summary .toggle {
        width: 26px;
        height: 26px;
        font-size: 16px;
    }

    /* Footer Touch-Targets vergrößern */
    footer a {
        font-size: 15px;
        padding: 6px 0;
        display: inline-block;
    }
    footer .wrap.top {
        gap: 24px;
    }
}

/* ---- KLEINE GERÄTE (unter 360px) ---- */
@media (max-width: 360px) {
    /* Notfall-Justierung für sehr kleine Geräte */
    .hero-title {
        font-size: clamp(26px, 9vw, 34px);
    }
    .hero-lead {
        font-size: 15px;
    }
    .techbar .plat {
        font-size: 12px;
    }
    .sec-stats .big {
        font-size: 24px;
    }
    .sec-stats .lbl {
        font-size: 12px;
    }
    .price .name {
        font-size: 22px;
    }
}

/* ---- TOUCH-GERÄTE: HOVER-STATES DEAKTIVIEREN ---- */
@media (hover: none) and (pointer: coarse) {
    /* Hover-Effekte kostenlos deaktivieren auf Touch-Geräten */
    .uc-card:hover,
    .price:hover {
        transform: none;
        box-shadow: none;
        border-color: var(--line);
    }
    .uc-card:hover {
        border-color: var(--line);
    }
    .price:hover {
        border-color: var(--line);
    }
    .btn:hover {
        transform: none;
    }
    .faq summary:hover {
        color: var(--ink);
    }
    a:hover {
        color: var(--accent);
    }
}

/* ---- iOS SAFE-AREA für mobile Topbar ---- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .topbar {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* ---- Language toggle -------------------------------------- */
.lang-en { display: none !important; }
[data-lang="en"] .lang-de { display: none !important; }
[data-lang="en"] .lang-en { display: inline !important; }