@media (max-width: 1060px) {
    body.home-page .threat,
    body.home-page .expertise,
    body.home-page .readiness,
    body.home-page .targets,
    body.home-page .final-cta,
    body.home-page #Memberships,
    body.home-page #Seals {
        padding: 4rem 1.5rem;
    }


    body.home-page .services {
        padding: 4rem 3rem
    }

    body.home-page .services {
        margin-top: 0;
    }

    .hero-h2 {
        font-size: clamp(2rem, 4.5vw, 3.2rem);
    }
}

@media (max-width: 600px) {
    body.home-page .threat,
    body.home-page .services,
    body.home-page .expertise,
    body.home-page .readiness,
    body.home-page .targets,
    body.home-page .final-cta,
    body.home-page #Memberships,
    body.home-page #Seals {
        padding: 3rem 1.25rem;
    }
}

:root {
    --ease: cubic-bezier(.4, 0, .2, 1);
}

@font-face {
    font-family: 'LatoThin';
    src: url('../fonts/Lato/Lato-Thin.ttf');
}

@font-face {
    font-family: 'LatoThinItalic';
    src: url('../fonts/Lato/Lato-ThinItalic.ttf');
}

@font-face {
    font-family: 'LatoLight';
    src: url('../fonts/Lato/Lato-Light.ttf');
}

@font-face {
    font-family: 'LatoLightItalic';
    src: url('../fonts/Lato/Lato-LightItalic.ttf');
}

@font-face {
    font-family: 'LatoRegular';
    src: url('../fonts/Lato/Lato-Regular.ttf');
}

@font-face {
    font-family: 'LatoItalic';
    src: url('../fonts/Lato/Lato-Italic.ttf');
}

@font-face {
    font-family: 'LatoBold';
    src: url('../fonts/Lato/Lato-Bold.ttf');
}

@font-face {
    font-family: 'LatoBoldItalic';
    src: url('../fonts/Lato/Lato-BoldItalic.ttf');
}

@font-face {
    font-family: 'LatoBlack';
    src: url('../fonts/Lato/Lato-Black.ttf');
}

@font-face {
    font-family: 'LatoBlackItalic';
    src: url('../fonts/Lato/Lato-BlackItalic.ttf');
}

@font-face {
    font-family: 'Dosisextralight';
    src: url('../fonts/Dosis/static/Dosis-ExtraLight.ttf');
    font-weight: 100;
    font-style: normal;
}

/* Use a single headline font for h1, h2, h3 */
h1, h2, h3 {
    font-family: 'LatoRegular', 'coolveticarg', sans-serif;
}

@font-face {
    font-family: 'Dosislight';
    src: url('../fonts/Dosis/static/Dosis-Light.ttf');
    font-weight: 300;
}

@font-face {
    font-family: 'dosisregular';
    src: url('../fonts/Dosis/static/Dosis-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'dosismedium';
    src: url('../fonts/Dosis/static/Dosis-Medium.ttf');
    font-weight: 500;
}

@font-face {
    font-family: 'dosissemibold';
    src: url('../fonts/Dosis/static/Dosis-SemiBold.ttf');
    font-weight: 700;
}

@font-face {
    font-family: 'coolveticacompressedrg';
    src: url('../fonts/Coolvetica/coolvetica compressed rg.ttf');
}

@font-face {
    font-family: 'coolveticacondensedrg';
    src: url('../fonts/Coolvetica/coolvetica condensed rg.ttf');
}

@font-face {
    font-family: 'coolveticacrammedrg';
    src: url('../fonts/Coolvetica/coolvetica crammed rg.ttf');
}

@font-face {
    font-family: 'coolveticarg';
    src: url('../fonts/Coolvetica/coolvetica rg.ttf');
}

@font-face {
    font-family: 'bebasneueregular';
    src: url('../fonts/bebas_neue/BebasNeue-Regular.ttf');
}

a {
    text-decoration: none;
}

/* ── HERO ── */
.hero {
    position: relative;
    top: 100px;
    z-index: 1;
    min-height: calc(100vh - 67px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 2rem 4rem;
    overflow: hidden;
}

/* Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: calc((1rem) * var(--responsive-font-scale, 1));
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blue-light);
    border: 1px solid rgba(56, 182, 255, 0.3);
    background: rgba(56, 182, 255, 0.07);
    padding: 0.4rem 1rem;
    border-radius: 100px;
    margin-bottom: 2rem;
    animation: fadeUp 0.7s ease both;
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue-glow);
    box-shadow: 0 0 10px var(--blue-glow);
    animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 10px var(--blue-glow);
    }
    50% {
        opacity: 0.4;
        box-shadow: none;
    }
}



/* Headline */
.hero-h1 {
    font-family: var(--ff-qx);
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    margin: 1.5rem 0 3rem 0;
    animation: fadeUp 0.7s 0.1s ease both;
    text-transform: uppercase;
}

.hero-h2 {
    font-family: var(--ff-qx);
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    margin: 1.5rem 0 3rem 0;
    animation: fadeUp 0.7s 0.1s ease both;
}

.hero-h1 .line-plain {
    color: var(--white);
}

/* Sub */
.hero-sub {
    font-size: calc((1.1rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    line-height: 1.75;
    color: var(--muted);
    max-width: 60%;
    margin: 0 0 4rem 0;
    animation: fadeUp 0.7s 0.2s ease both;
}

.hero-sub strong {
    color: var(--blue-light);
    font-weight: 400;
}

/* CTA Buttons */
.hero-actions {
    display: flex;
    width: 100%;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 4rem;
    animation: fadeUp 0.7s 0.3s ease both;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: sans-serif, 'coolveticarg';
    font-size: calc((1rem) * var(--responsive-font-scale, 1));
    font-weight: 500;
    color: var(--white);
    background: linear-gradient(135deg, var(--blue-accent), var(--blue-bright));
    border: none;
    padding: 0.9rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(14, 110, 253, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.25s, box-shadow 0.25s;
}

.btn-primary:hover {
    box-shadow: 0 6px 40px rgba(30, 144, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-pqc {
    position: relative;
    margin: 8rem 2rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: sans-serif, 'coolveticarg';
    font-size: calc((1rem) * var(--responsive-font-scale, 1));
    font-weight: 400;
    color: #34d399;
    background: rgba(52, 211, 153, .08);
    border: 1px solid rgba(52, 211, 153, .22);
    padding: 0.9rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: border-color 0.25s, color 0.25s, transform 0.25s;
}

.btn-pqc:hover {
    border-color: rgba(56, 166, 120, 0.45);
    color: var(--white);
    opacity: 0.9;
    box-shadow: 0 4px 28px rgba(30, 255, 150, 0.2);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: sans-serif, 'coolveticarg';
    font-size: calc((1rem) * var(--responsive-font-scale, 1));
    font-weight: 400;
    color: var(--blue-light);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 0.9rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: border-color 0.25s, color 0.25s, transform 0.25s;
}

.btn-ghost:hover {
    border-color: var(--glass-border-hi);
    color: var(--white);
    opacity: 0.9;
    box-shadow: 0 4px 28px rgba(30, 144, 255, 0.2);
}

.btn-icon {
    transition: transform 0.25s;
}

.btn-primary:hover .btn-icon,
.btn-ghost:hover .btn-icon,
.btn-pqc:hover .btn-icon {
    transform: translateX(4px);
}

/* ── Trust-Leiste ── */
.hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    animation: fadeUp 0.7s 0.4s ease both;
    margin-bottom: 2rem;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: calc((1rem) * var(--responsive-font-scale, 1));
    font-weight: 400;
    color: var(--muted);
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    backdrop-filter: blur(8px);
    transition: border-color 0.25s, color 0.25s;
}

.trust-item:hover, .dp a:hover, .dc a:hover {
    border-color: var(--glass-border);
    color: var(--blue-light);
}

.trust-item a, .dp a, .dc a {
    color: var(--blue-glow);
}

.trust-check {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--blue-glow);
}

/* ── Service-Karten ── */
.services {
    position: relative;
    margin-top: 150px;
    z-index: 1;
    height: auto;
    padding: 200px 3.5rem;
    background: linear-gradient(180deg, transparent 0%, rgba(4, 15, 36, 0.6) 100%);
}

.services-label {
    text-align: center;
    font-size: calc((1rem) * var(--responsive-font-scale, 1));
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    color: var(--blue-light);
}

.services-title {
    text-align: center;
    font-family: var(--ff-qx);
    font-size: clamp(1.6rem,3vw,2.2rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    line-height: 1.25;
}

.services-title .line-glow {
    font-family: var(--ff-qx);
    color: transparent;
    background: linear-gradient(90deg, var(--blue-bright), var(--blue-glow), var(--blue-light));
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 24px rgba(56, 182, 255, 0.4));
}

.services-sub {
    text-align: center;
    font-size: calc((1rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    max-width: 70%;
    margin: 0 auto;
}

.service-card {
    border-top: 1px solid var(--glass-border);
    padding: 1.75rem 1.5rem;
    backdrop-filter: blur(16px);
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    cursor: default;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56, 182, 255, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.service-card:hover {
    border-top-color: var(--glass-border-hi);
    transform: translateY(-4px);
}

.service-card:hover::before {
    opacity: 1;
}

.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(14, 110, 253, 0.25), rgba(56, 182, 255, 0.1));
    border: 1px solid rgba(56, 182, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.1rem;
    color: var(--blue-glow);
}

.card-title {
    font-family: sans-serif, 'coolveticarg';
    font-size: calc((1rem) * var(--responsive-font-scale, 1));
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.5rem;
    line-height: 1.3;
    text-align: center;
}

.card-desc {
    font-size: calc((0.9rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    line-height: 1.6;
    text-align: center;
}

/* ── Threat-Banner ── */
.threat-section {
    position: relative;
    z-index: 1;
    height: auto;
    min-height: auto;
    padding: 200px 3.5rem;
    max-width: 1320px;
    margin: 0 auto;
}

.threat-inner {
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(56, 182, 255, .12);
}

.threat-inner::after {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
}

.threat-title {
    font-family: var(--ff-qx);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 200;
    color: var(--white);
    line-height: 1.25;
    margin-bottom: 1rem;
    text-transform: uppercase;
    text-align: center;
}

.threat-title .accent {
    color: var(--blue-glow);
}

.threat-body {
    font-size: calc((0.95rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    line-height: 1.75;
}

.threat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.threat-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: calc((0.95rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    line-height: 1.5;
}

.threat-item-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(56, 182, 255, 0.1);
    border: 1px solid rgba(56, 182, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: var(--blue-glow);
    font-size: calc((10px) * var(--responsive-font-scale, 1));
}

.threat-item strong {
    color: var(--blue-light);
    font-weight: 400;
}

/* ── Animationen ── */
@keyframes up {
    from {
        opacity: 0;
        transform: translateY(22px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Animationen ── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .hero {
        padding: 4rem 1.5rem 3rem;
    }

    .hero-h2 {
        font-size: calc((clamp(1.6rem, 3.6vw, 2.6rem)) * var(--responsive-font-scale, 1));
    }

    .services {
        padding: 4rem 3rem;
    }

    .threat-section {
        padding: 2rem 1.5rem;
    }

    .threat-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
    }
}/* ── Tokens ── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth; }
.english {
  display: none;
}
#LanguageButton {
  cursor: pointer;
}

/* ── HERO ── */
.hero {
    position: relative; z-index: 1;
    min-height: 88vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 6rem 2rem 5rem;
    overflow: hidden;
}
.scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    top: 0;
    background: linear-gradient(90deg, transparent, var(--glow), transparent);
    animation: scanDown 5s linear forwards; opacity: .35;
}
@keyframes scanDown {
    0%{top:0} 100%{top:100%}
}
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: calc((1rem) * var(--responsive-font-scale, 1));
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--light);
    border: 1px solid rgba(56,182,255,.28);
    background: rgba(56,182,255,.06);
    padding: .38rem .9rem;
    border-radius: 100px;
    margin-bottom: 1.8rem;
    animation: up .7s ease both;
}
.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--glow);
    box-shadow: 0 0 8px var(--glow);
    animation: blink 2s ease-in-out infinite;
}
@keyframes blink {
    0%,100%{opacity:1} 50%{opacity:.3}
}

.hero h1 {
    font-family: var(--ff-qx);
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    max-width: 100%;
    margin-bottom: 1.25rem;
    animation: up .7s .1s ease both;
}
.hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, var(--accent2), var(--glow), var(--light));
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 22px rgba(56,182,255,.35));
}

.hero-sub strong {
    color: var(--light);
    font-weight: 400;
}
.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ff-b);
    font-size: calc((1rem) * var(--responsive-font-scale, 1));
    font-weight: 500;
    color: var(--white);
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none;
    padding: .9rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 28px rgba(14,110,253,.45), inset 0 1px 0 rgba(255,255,255,.1);
    transition: transform .25s, box-shadow .25s;
    animation: up .7s .3s ease both;
}
.hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 36px rgba(30,144,255,.6);
}
.hero-btn svg {
    transition: transform .25s;
}
.hero-btn:hover svg {
    transform: translateX(4px);
}

/* ── SECTION WRAPPER ── */
section {
    position: relative;
    z-index: 1;
    height: auto;
}

.inner {
    max-width: 70%;
    margin: 0 auto;
    padding: 0 2rem;
}

.sec-title {
    font-family: var(--ff-qx);
    font-size: clamp(1.6rem,3vw,2.2rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
    text-align: center;
    margin-bottom: .8rem;
    text-transform: uppercase;
}
.sec-sub {
    font-size: calc((1.1rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    line-height: 1.75;
    text-align: center;
    max-width: 100%;
    margin: 0 auto 3rem;
}

/* ── POST-QUANTUM MIGRATION COUNTDOWN ── */
.deadline-content {
    position: relative;
    isolation: isolate;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    padding: 0 0 2.5rem;
    border: 0;
    text-align: center;
}
.deadline-content::before,
.deadline-content::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: '';
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
    pointer-events: none;
}

.deadline-eyebrow {
    margin-bottom: .5rem;
    color: var(--blue-light);
    font-size: calc((.85rem) * var(--responsive-font-scale, 1));
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.deadline-title {
    margin-bottom: .75rem;
    color: var(--white);
    font-family: var(--ff-qx);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
}
.deadline-description {
    max-width: 80%;
    margin: 0 auto 1.75rem;
    color: var(--muted);
    font-size: calc((.95rem) * var(--responsive-font-scale, 1));
    line-height: 1.7;
}
.deadline-clock {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    max-width: 680px;
    margin: 0 auto;
}
.deadline-unit {
    padding: 1rem .5rem;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: rgba(7,22,48,.55);
}
.deadline-number {
    display: block;
    color: var(--blue-light);
    font-family: var(--ff-qx);
    font-size: calc((clamp(1.8rem, 5vw, 3rem)) * var(--responsive-font-scale, 1));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.deadline-label {
    display: block;
    margin-top: .4rem;
    color: var(--muted);
    font-size: calc((.75rem) * var(--responsive-font-scale, 1));
    letter-spacing: .08em;
    text-transform: uppercase;
}
.deadline-timezone {
    margin-top: 1rem;
    color: var(--muted);
    font-size: calc((.75rem) * var(--responsive-font-scale, 1));
}

/* ── THREAT ── */
.threat {
    position: relative;
    top: 50px;
    height: auto;
    padding: 5rem 2rem;
}
.threat-box {
    max-width: 1320px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(14,110,253,.07), rgba(4,15,36,.85));
    border: 1px solid rgba(56,182,255,.18);
    border-radius: 20px;
    padding: 3.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(18px);
}
.threat-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56,182,255,.4), transparent);
}
.threat-box::after {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    pointer-events: none;
}
.threat-title {
    font-family: var(--ff-qx);
    font-size: clamp(1.5rem,2.8vw,2rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--white);
    margin-bottom: 1rem;
}
.threat-title .hi {
    color: var(--glow);
}
.threat-p {
    font-size: calc((0.95rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    line-height: 1.8;
}
.check-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.check-item {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    font-size: calc((0.95rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    line-height: 1.55;
}
.check-icon {
    width: 22px; height: 22px;
    flex-shrink: 0;
    margin-top: 1px;
    border-radius: 50%;
    border: 1px solid rgba(56,182,255,.35);
    background: rgba(56,182,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--glow);
}
.check-item strong {
    color: var(--light);
    font-weight: 400;
    display: block;
    margin-bottom: .15rem;
}

/* ── SERVICES GRID ── */
.services {
    height: auto;
    padding: 200px 3.5rem;
    background: linear-gradient(180deg, transparent, rgba(7,22,48,.4), transparent);
}
.svc-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.1rem;
}
.svc-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    backdrop-filter: blur(16px);
    text-align: center;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    cursor: default;
    position: relative;
    overflow: hidden;
}
.svc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56,182,255,0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.svc-card:hover {
    border-color: var(--glass-border-hi);
    transform: translateY(-4px);
    box-shadow: 0 8px 40px rgba(14,110,253,0.2);
}
.svc-card:hover::before { opacity: 1; }
.svc-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(14,110,253,0.25), rgba(56,182,255,0.1));
  border: 1px solid rgba(56,182,255,0.2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .9rem;
  color: var(--blue-glow);
}
.svc-name {
    font-family: var(--ff-qx);
    font-size: calc((1.1rem) * var(--responsive-font-scale, 1));
    font-weight: 600;
    color: var(--white);
    margin-bottom: .5rem;
    line-height: 1.3;
}
.svc-desc {
    font-size: calc((.9rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    line-height: 1.6;
}

/* ── EXPERTISE ── */
.expertise {
    height: auto;
    padding: 200px 2rem;
}
.exp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.exp-bullets {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    color: var(--white);
}
.exp-item {
  display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: calc((.95rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    line-height: 1.6;
}
.exp-num {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(56,182,255,.3);
    background: rgba(56,182,255,.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-qx);
    font-size: calc((.9rem) * var(--responsive-font-scale, 1));
    font-weight: 600;
    color: var(--glow);
    margin-top: 1px;
}
.exp-item strong {
    color: var(--light);
    font-weight: 400;
}
.exp-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.stat-card {
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    backdrop-filter: blur(12px);
    transition: border-color .3s;
}
.stat-card:hover {
    border-color: var(--border-hi);
}
.stat-num {
    font-family: var(--ff-qx);
    font-size: calc((2.2rem) * var(--responsive-font-scale, 1));
    font-weight: 800;
    color: var(--glow);
    line-height: 1;
    margin-bottom: .4rem;
}
.stat-label {
    font-size: calc((.95rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    line-height: 1.45;
}

/* ── READINESS CHECK (4 Schritte) ── */
.readiness {
    height: auto;
    padding: 200px 2rem;
}
.readiness-wrap {
    max-width: 1320px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(14,110,253,.06), rgba(4,15,36,.9));
    border: 1px solid rgba(56,182,255,.16);
    border-radius: 22px;
    padding: 4rem 4.5rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
}
.readiness-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56,182,255,.45), transparent);
}
/* Lock-Grafik rechts */
.lock-graphic {
    position: absolute;
    right: 30px;
    top: 40%;
    transform: translateY(-50%);
    width: 320px;
    height: 320px;
    opacity: .15;
}
.readiness-content {
    gap: 4rem;
    align-items: center;
}
.steps {
    display: flex;
    flex-direction: column;
    gap: 0; }
.step {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    border-bottom: 1px solid rgba(56,182,255,.08);
    cursor: pointer;
    transition: background .2s;
    border-radius: 8px;
    padding: 1.25rem 0 1.25rem .5rem;
}
.step:last-child {
    border-bottom: none;
}
.step:hover {
    background: rgba(56,182,255,.04);
}
.step-num {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(56,182,255,.35);
    background: rgba(56,182,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-qx);
    font-size: calc((.95rem) * var(--responsive-font-scale, 1));
    font-weight: 700; color: var(--glow);
    transition: background .3s, border-color .3s, box-shadow .3s;
}
.step.active .step-num, .step:hover .step-num {
    background: rgba(56,182,255,.18);
    border-color: var(--glow);
    box-shadow: 0 0 14px rgba(56,182,255,.3);
}
.step-text {
    flex: 1;
}
.step-title {
    font-family: var(--ff-qx);
    font-size: calc((1.1rem) * var(--responsive-font-scale, 1));
    font-weight: 600;
    color: var(--white);
    margin-bottom: .25rem;
}
.step-desc {
    font-size: calc((1rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    line-height: 1.55;
}
/* Rechte Seite Readiness: Detail-Panel */
.step-detail {
    background: rgba(14,110,253,.06);
    border: 1px solid rgba(56,182,255,.15);
    border-radius: 14px;
    padding: 2rem;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.step-detail-label {
    font-size: calc((.9rem) * var(--responsive-font-scale, 1));
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--glow);
    margin-bottom: .75rem;
}
.step-detail-title {
    font-family: var(--ff-qx);
    font-size: calc((1.2rem) * var(--responsive-font-scale, 1));
    font-weight: 700;
    color: var(--white);
    margin-bottom: .75rem;
}
.step-detail-body {
    font-size: calc((.95rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    line-height: 1.75;
}
.step-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}
.tag {
    font-size: calc((.9rem) * var(--responsive-font-scale, 1));
    font-weight: 400;
    color: var(--light);
    background: rgba(56,182,255,.08);
    border: 1px solid rgba(56,182,255,.2);
    padding: .25rem .7rem;
    border-radius: 100px;
}

/* ── TARGETS (Zielgruppen) ── */
.targets {
    height: auto;
    padding: 200px 2rem;
}
.targets-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.target-card {
    min-width: 0;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    backdrop-filter: blur(12px);
    text-align: center;
    transition: border-color .3s, transform .3s;
}
.target-card:hover {
    border-color: var(--border-hi);
    transform: translateY(-3px);
}
.target-icon {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    margin: 0 auto .9rem;
    background: linear-gradient(135deg,rgba(14,110,253,.22),rgba(56,182,255,.08));
    border: 1px solid rgba(56,182,255,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--glow);
}
.target-name {
    font-family: var(--ff-qx);
    font-size: calc((1rem) * var(--responsive-font-scale, 1));
    font-weight: 600;
    color: var(--white);
    margin-bottom: .35rem;
}
.target-desc {
    font-size: calc((.95rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    line-height: 1.55;
}

/* ── FINAL CTA ── */
.final-cta {
    height: auto;
    padding: 200px 2rem;
    text-align: center;
}
.cta-box {
    max-width: 780px; margin: 0 auto;
    background: linear-gradient(135deg, rgba(14,110,253,.1), rgba(4,15,36,.9));
    border: 1px solid rgba(56,182,255,.22);
    border-radius: 24px;
    padding: 4rem 3rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
}
.cta-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--glow), transparent);
}
.cta-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    filter: blur(80px);
    background: radial-gradient(circle, rgba(14,110,253,.15), transparent 70%);
    pointer-events: none;
}
.cta-box h2 {
    font-family: var(--ff-qx);
    font-size: clamp(1.8rem,3.5vw,2.6rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.15;
    margin-bottom: .5rem;
    position: relative;
    z-index: 1;
}
.cta-box h2 em {
    font-style: normal; color: var(--glow);
    text-shadow: 0 0 30px rgba(56,182,255,.4);
}
.cta-box p {
    font-size: calc((.95rem) * var(--responsive-font-scale, 1));
    font-weight: 300;
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 2.25rem;
    position: relative;
    z-index: 1;
}
.cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.btn-p {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ff-b);
    font-size: calc((.9rem) * var(--responsive-font-scale, 1));
    font-weight: 500;
    color: var(--white);
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    border: none;
    padding: .9rem 1.75rem;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 26px rgba(14,110,253,.4);
    transition: transform .25s, box-shadow .25s;
}
.btn-p:hover {
    box-shadow: 0 6px 36px rgba(30,144,255,.55);
}
.btn-g {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--ff-b);
    font-size: calc((1rem) * var(--responsive-font-scale, 1));
    font-weight: 400;
    color: var(--light);
    background: rgba(7,22,48,.7);
    border: 1px solid var(--border);
    padding: .9rem 1.75rem;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: border-color .25s, color .25s, transform .25s;
}
.btn-g:hover {
    border-color: var(--border-hi);
    color: var(--white);
}
.btn-p svg, .btn-g svg {
    transition: transform .25s;
}
.btn-p:hover svg, .btn-g:hover svg {
    transform: translateX(4px);
}

/* ── Animationen ── */
@keyframes up { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

#Memberships {
  height: auto;
  width: 100%;
  padding: 200px 3%;
  background: linear-gradient(180deg, transparent 0%, white 50%, transparent 100%);
  text-align: center;
}

#Memberships h3, #Seals h3 {
  font-family: var(--ff-qx);
  font-size: clamp(1.3rem,3vw,1.8rem);
  padding: 0 0 18px 0;
  font-weight: 500;
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
}

/* Layout: horizontal blocks (p) aligning logos and text side-by-side */
#Memberships p {
  width: 20%;
  float: left;
  padding: 12px 1.5%;
  color: var( --muted);
  text-align: center;
  margin: 8px 0;
}

#Seals {
  height: auto;
  padding: 200px 2rem;
  background: transparent;
  color: var( --muted);
}

#Seals p {
  color: var( --muted);
  padding: 12px 1.666%;
  width: 33.3%;
  float: left;
  text-align: center;
  margin: 8px 0;
}

/* Logo styling: sit cleanly on the light tiles */
.logoLink {
  display: inline-block;
  background: transparent; /* tile applied at <p> level */
  padding: 6px 8px;
  border-radius: 6px;
}

img.memberLogo {
  max-width: 140px;
  max-height: 80px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

span.seal_text {
  display: block;
  width: 100%;
  margin: 6px 0 8px;
  color: var( --muted);
}

/* Clear floats */
#Memberships::after, #Seals::after {
  content: '';
  display: table;
  clear: both;
}

/* Responsive: keep horizontal on wide screens, two columns medium, stacked small */
@media (max-width: 1500px) {

    .cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.25rem;
        max-width: 80%;
        margin: 0 auto;
    }

    .inner {
        max-width: 80%;
        margin: 0 auto;
        padding: 0 2rem;
    }

}

/* Responsive: keep horizontal on wide screens, two columns medium, stacked small */
@media (max-width: 1080px) {

  .cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: 80%;
    margin: 0 auto;
  }

  .svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .targets-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inner {
    max-width: 80%;
    margin: 0 auto;
    padding: 0 2rem;
  }

  #Memberships p {
      width: 48%;
      float: left;
      padding: 10px 1%;
  }

  #Seals p {
      width: 48%;
      float: left;
      padding: 10px 1%;
  }

  img.memberLogo {
      max-height: 64px;
      max-width: 120px;
  }
}

@media (max-width: 800px) {

  #Memberships p, #Seals p {
      width: 100%;
      float: none;
      padding: 12px 0;
  }

  #Memberships, #Seals {
      padding: 24px 16px;
  }
  img.memberLogo {
      max-height: 56px;
      max-width: 140px;
  }
}

/* Responsive adaptations from original site */
@media (max-width: 1060px) {
  #Memberships {
    left: 0;
    width: 100%;
    padding: 20px 60px 40px 60px;
  }
  #Memberships p {
      width: 100%;
      float: none;
      padding: 10px 0;
  }
  #Seals p {
      width: 100%;
      float: none;
      padding: 10px 0;
  }
  #Memberships img, #Seals img {
      height: 70px;
      width: auto;
  }
}

@media (max-width: 800px) {
  #Memberships, #Seals { padding: 20px 20px; }
}

/* ── Responsive ── */
@media(max-width:960px) {
  nav {
      padding: 1.1rem 1.5rem;
  }
  nav ul {
      display: none;
  }
  .threat-box {
      grid-template-columns: 1fr;
      gap: 2rem;
      padding: 2rem;
  }
  .exp-grid {
      grid-template-columns: 1fr;
  }
  .readiness-content {
      grid-template-columns: 1fr;
  }
  .step-detail {
      display: none;
  }
  .targets-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
    .deadline-clock {
        gap: .4rem;
    }

    .deadline-unit {
        padding: .8rem .25rem;
    }

    .deadline-label {
        font-size: calc((.6rem) * var(--responsive-font-scale, 1));
        letter-spacing: .04em;
    }
  .exp-stats { grid-template-columns: 1fr 1fr; }
}

@media (orientation: landscape) {
  .hero-sub,
  .hero-trust,
  .inner,
  .threat-box,
  .services-sub,
  .readiness-wrap,
  .cta-box {
    width: 70vw;
    max-width: 70vw;
    margin-inline: auto;
  }

  #Memberships,
  #Seals {
    padding-inline: 15vw;
  }
}

@media (max-width: 1080px) {
  .hero,
  .services,
  .threat,
  .expertise,
  .readiness,
  .targets,
  .final-cta {
    padding-right: 0;
    padding-left: 0;
  }

  .hero-h1,
  .hero-sub,
  .hero-actions,
  .hero-trust,
  .services-title,
  .services-sub,
  .inner,
  .threat-box,
  .readiness-wrap,
  .cta-box {
    width: 90%;
    max-width: 90%;
    margin-right: auto;
    margin-left: auto;
  }

  .hero-trust {
    flex-direction: column;
    align-items: center;
  }

  .inner {
    padding-right: 0;
    padding-left: 0;
  }

  .threat-box,
  .readiness-wrap,
  .cta-box {
    padding: 2rem 1.25rem;
  }

  .cards-grid,
  .svc-grid,
  .exp-grid,
  .targets-grid,
  .check-list,
  .exp-bullets {
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .trust-item,
  .services-title,
  .services-sub,
  .card-title,
  .card-desc,
  .sec-title,
  .sec-sub,
  .threat-title,
  .threat-p,
  .check-item,
  .svc-card,
  .exp-item,
  .stat-card,
  .step,
  .step-detail,
  .target-card,
  .cta-box,
  #Memberships,
  #Seals {
    text-align: center;
  }

  .check-item,
  .exp-item,
  .step {
    flex-direction: column;
    align-items: center;
  }

  #Memberships,
  #Seals {
    padding-right: 5%;
    padding-left: 5%;
  }

  #Memberships h3,
  #Seals h3,
  #Memberships p,
  #Seals p {
    width: 100%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  #Memberships p {
       color: #2b2b2e;
  }

  #Memberships img.memberLogo--wide {
    width: min(48vw, 192px);
    max-width: 100%;
    max-height: none;
    height: auto;
  }

  #Seals img.memberLogo {
    width: auto;
    height: 100px;
    max-width: 280px;
    max-height: 112px;
  }
}