/* ════════════════════════════════════════════════════════════
   BUILD4WARD — alt_web/home  |  style.css
   Design system: dark, clean, Inter
════════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted, no Google Fonts) ── */
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ── Variables ── */
:root {
    --bg:        #ffffff;
    --bg-2:      #f5f5f7;
    --surface:   rgba(0,0,0,0.04);
    --surface-2: rgba(0,0,0,0.07);
    --border:    rgba(0,0,0,0.10);
    --border-2:  rgba(0,0,0,0.18);
    --accent:    #13378f;          /* interactive blue */
    --accent-dk: #091a30;          /* dark navy — brand, headings */
    --accent-2:  #13378f;          /* alias — no more purple */
    --accent-3:  #13378f;          /* alias — no more pink */
    --text-1:    #0a0a0a;
    --text-2:    #404040;
    --text-3:    #888888;
    --nav-h:     64px;
    --slant:     64px;  /* diagonal section cuts */
    --font:      'Inter', system-ui, -apple-system, sans-serif;
    --ease:      cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:17px; scrollbar-color: rgba(0,0,0,0.15) transparent; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text-1);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }

/* ════════════════════════════════════════════════════════════
   NAV
════════════════════════════════════════════════════════════ */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--nav-h);
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 16px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s var(--ease);
}
.nav.scrolled {
    box-shadow: 0 2px 28px rgba(0,0,0,0.10);
}
.nav-inner {
    max-width: 1160px;
    margin: 0 auto;
    height: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 32px;
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}
.logo-mark {
    width: 32px; height: 32px;
    border-radius: 3px;
    background: var(--accent-dk);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    flex-shrink: 0;
    box-shadow: none;
}
.logo-mark--img {
    background: none;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
}

/* ════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════ */
.site-footer {
    background: var(--accent-dk);
    color: rgba(255,255,255,0.65);
    font-size: 14px;
}
.sf-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 32px 0;
}

/* Top grid */
.sf-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
@media (max-width: 900px) {
    .sf-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .sf-top { grid-template-columns: 1fr; }
    .sf-inner { padding: 48px 20px 0; }
}

/* Brand column */
.sf-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}
.sf-logo img { border-radius: 4px; }
.sf-logo strong { color: var(--accent); }
.sf-tagline {
    color: rgba(255,255,255,0.50);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.sf-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sf-contact a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}
.sf-contact a:hover { color: #fff; }

/* Link columns */
.sf-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 16px;
}
.sf-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sf-links a {
    color: rgba(255,255,255,0.60);
    text-decoration: none;
    transition: color 0.2s;
}
.sf-links a:hover { color: #fff; }

/* Address */
.sf-address {
    font-style: normal;
    line-height: 1.8;
    color: rgba(255,255,255,0.60);
}

/* Bottom bar */
.sf-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    flex-wrap: wrap;
}
.sf-copy {
    color: rgba(255,255,255,0.35);
    font-size: 13px;
}
.sf-legal {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.sf-legal a {
    color: rgba(255,255,255,0.40);
    text-decoration: none;
    font-size: 12px;
    transition: color 0.2s;
}
.sf-legal a:hover { color: rgba(255,255,255,0.80); }
.logo-text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-1);
}
.logo-ward { color: var(--accent); }

/* Nav links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
}
.nav-link {
    padding: 6px 14px;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-2);
    transition: color 0.2s, background 0.2s;
}
.nav-link:hover { color: var(--text-1); background: var(--surface); }

/* Nav Dropdown */
.nav-has-dropdown { position: relative; }
.nav-link--dropdown { display: flex; align-items: center; gap: 4px; }
.nav-link--dropdown .bi-chevron-down { font-size: 11px; transition: transform 0.2s; }
.nav-has-dropdown:hover .bi-chevron-down { transform: rotate(180deg); }
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 292px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    /* padding-top creates visual offset without a hover gap */
    padding: 8px;
    margin-top: 6px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0s 0.2s, transform 0.2s;
    z-index: 200;
}
/* Invisible bridge fills the gap so moving the mouse down keeps hover alive */
.nav-has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: -20px;
    right: -20px;
    height: 12px;
}
.nav-has-dropdown:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.2s, transform 0.2s;
}
.nav-dropdown-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 7px;
    transition: background 0.15s;
}
.nav-dropdown-item:hover { background: var(--bg-2); }
.nav-dropdown-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(26,74,173,0.10);
    border-radius: 8px;
    color: var(--accent);
    font-size: 17px;
}
.nav-dropdown-item strong {
    display: block;
    font-size: 13px; font-weight: 600;
    color: var(--text-1);
    line-height: 1.3;
}
.nav-dropdown-item span {
    display: block;
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
}
.nav-dropdown-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.nav-dropdown-row { display: flex; gap: 4px; padding: 4px; }
.nav-dropdown-sub {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 12px; font-weight: 500;
    color: var(--text-2);
    padding: 8px 6px;
    border-radius: 6px;
    background: var(--surface);
    transition: background 0.15s, color 0.15s;
}
.nav-dropdown-sub:hover { background: rgba(26,74,173,0.09); color: var(--accent); }
.nav-dropdown-sub i { font-size: 13px; }

/* Mega menu */
.nav-dropdown--mega {
    min-width: 580px;
    display: flex;
    flex-direction: row;
    gap: 0;
    padding: 12px;
    left: 0;
    transform: translateX(0) translateY(4px);
}
.nav-has-dropdown:hover .nav-dropdown--mega {
    transform: translateX(0) translateY(0);
}
.nav-mega-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-mega-heading {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 4px 12px 8px;
}
.nav-mega-divider {
    width: 1px;
    background: var(--border);
    margin: 4px 10px;
    flex-shrink: 0;
}
/* Mobile sub-links */
.mob-link--sub {
    padding-left: 32px !important;
    font-size: 14px !important;
    color: var(--text-2) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Nav right */
.nav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.nav-cta {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 18px;
    border-radius: 3px;
    font-size: 14px; font-weight: 600;
    color: var(--text-1);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.nav-cta:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
    transform: translateY(-1px);
}
.nav-cta i { font-size: 13px; transition: transform 0.2s; }
.nav-cta:hover i { transform: translateX(3px); }

/* Burger */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px; height: 36px;
    padding: 8px;
    border-radius: 3px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: background 0.2s;
}
.nav-burger:hover { background: var(--surface-2); }
.nav-burger span {
    display: block;
    height: 1.5px;
    background: var(--text-1);
    border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.2s;
    transform-origin: center;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.mob-menu {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    z-index: 99;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    padding: 12px 24px 20px;
    gap: 4px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.mob-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.mob-link {
    padding: 12px 4px;
    font-size: 16px; font-weight: 500;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    transition: color 0.15s;
}
.mob-link:hover { color: var(--text-1); }
.mob-cta {
    display: flex; align-items: center; gap: 8px;
    margin-top: 12px;
    padding: 13px 20px;
    border-radius: 4px;
    background: var(--accent);
    font-size: 15px; font-weight: 600;
    color: #fff;
    justify-content: center;
}
.mob-backdrop {
    display: none;
    position: fixed; inset: 0;
    z-index: 98;
    background: rgba(0,0,0,0.4);
}
.mob-backdrop.open { display: block; }

/* ════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 100vh;
    background: #0a0f1e;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
}

/* ── Minimal hero: fullscreen video ── */
.hero--minimal {
    min-height: 100vh;
    padding: 0;
}
.hero-vid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    transition: opacity 1s ease;
}
.hero-vid--2 { opacity: 0; }  /* start hidden, JS crossfades */
.hero-vid--3 { opacity: 0; }

.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.60);
    z-index: 1;
    pointer-events: none;
}
.hero-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}
.hero-minimal-inner {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    padding: calc(var(--nav-h) + 24px) 24px 48px;
}
.hero-minimal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
    max-width: 860px;
    margin-top: 14vh;
}
/* Thin eyebrow — the word Gebäudeautomation */
.hero-minimal-eyebrow {
    font-size: clamp(13px, 1.4vw, 17px);
    font-weight: 300;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.65);
    margin: 0;
}
/* Main claim — thin/light weight, huge */
.hero-minimal-claim {
    font-size: clamp(30px, 5.5vw, 76px);
    font-weight: 300;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
    line-height: 1.06;
    text-shadow: 0 4px 48px rgba(0,0,0,0.35);
}
/* Topic tags */
.hero-minimal-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.hero-minimal-tags span {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.9);
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.08);
    border-radius: 100px;
    padding: 6px 16px;
    backdrop-filter: blur(6px);
}
/* Tech / protocol strip */
.hero-minimal-tech {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.hero-minimal-tech span {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255,255,255,0.50);
    display: flex;
    align-items: center;
    gap: 6px;
}
.hero-minimal-tech span i {
    font-size: 13px;
    color: rgba(255,255,255,0.35);
}

/* ── Hero content section (below minimal hero) ── */
.hero-content-section {
    background: #fff;
    padding: 80px 24px 80px;
}
.hero-content-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
}

/* ── Old video-bg kept for fallback ── */
.hero-video-bg { display: none; }
.hero-glow { display: none; }

.hero-inner {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 64px;
}

/* Left column */
.hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 32px;
    padding-top: 16px;
    min-width: 0;
    width: 100%;
}
body.contact-panel-open .hero-left {
    align-items: flex-start;
    text-align: left;
}

/* Right column — Lottie carousel */
.hero-right {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.hero-lottie-wrap {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
/* Obere transparente Card — Animation */
.hero-lottie-anim {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 32px;
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(0,0,0,0.09);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
/* Untere Tab-Card — Titel */
.hero-lottie-title {
    margin: 0;
    padding: 12px 20px;
    background: #111;
    border-radius: 0 0 10px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
}

/* Service tags */
.hero-services {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.hero-services span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-2);
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(0,0,0,0.10);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.hero-services span i {
    font-size: 13px;
    color: var(--accent);
}

/* Trust bar */
.hero-trust {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.hero-trust-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.hero-trust-item strong {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--text-1);
    line-height: 1;
}
.hero-trust-item span {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-3);
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.hero-trust-sep {
    width: 1px;
    height: 28px;
    background: var(--border-2);
    flex-shrink: 0;
}

/* Eyebrow */
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.70);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    letter-spacing: 0.04em;
}
.eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: none;
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: none; }
    50%       { opacity: 0.6; box-shadow: none; }
}

/* Title */
.hero-title {
    font-size: clamp(38px, 7vw, 72px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-1);
}
.hero-title-gradient {
    color: var(--accent-dk);
}

/* Sub */
.hero-sub {
    font-size: clamp(17px, 2.2vw, 20px);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-2);
}

/* ════════════════════════════════════════════════════════════
   SEARCH BAR
════════════════════════════════════════════════════════════ */
.search-wrap {
    width: 100%;
    max-width: 100%;
    position: relative;
}
.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 14px;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.search-bar:focus-within {
    border-color: rgba(0,0,0,0.20);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05),
                0 8px 32px rgba(0,0,0,0.05);
}
.search-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--accent-dk);
    border: 1px solid var(--accent-dk);
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.08em;
    flex-shrink: 0;
    white-space: nowrap;
}
.search-ai-badge i { font-size: 11px; }
.search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 400;
    color: var(--text-1);
    min-width: 0;
}
.search-input::placeholder { color: var(--text-3); }
.search-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    height: 38px;
    border-radius: 3px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}
.search-btn:hover { background: var(--accent-dk); transform: scale(1.02); }
.search-btn-text { display: inline; }
@media (max-width: 380px) { .search-btn-text { display: none; } }

/* Dropdown */
.search-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    z-index: 50;
    animation: dropIn 0.18s var(--ease);
}
@keyframes dropIn {
    from { opacity:0; transform:translateY(-6px); }
    to   { opacity:1; transform:translateY(0); }
}
.search-dropdown[hidden] { display: none; }
.search-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.search-suggestion:last-child { border-bottom: none; }
.search-suggestion:hover, .search-suggestion.focused {
    background: rgba(0,0,0,0.04);
    color: var(--text-1);
}
.search-suggestion i {
    color: var(--accent);
    font-size: 14px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

/* Answer card */
.search-answer {
    margin-top: 8px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 4px;
    padding: 16px 18px;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.04);
    animation: dropIn 0.2s var(--ease);
}
.search-answer[hidden] { display: none; }
.answer-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}
.answer-header i { font-size: 14px; }
.answer-header span { flex: 1; }
.answer-close {
    width: 24px; height: 24px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    color: var(--text-3);
    transition: color 0.15s, background 0.15s;
}
.answer-close:hover { color: var(--text-1); background: var(--surface-2); }
.answer-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-2);
    margin-bottom: 12px;
}
.answer-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    transition: gap 0.2s;
}
.answer-cta:hover { gap: 9px; }

.answer-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.5;
}
.answer-disclaimer i { font-size: 12px; flex-shrink: 0; margin-top: 1px; }

.hcc-consent {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.55;
    margin-top: 8px;
}
.hcc-consent i { font-size: 12px; flex-shrink: 0; margin-top: 1px; color: var(--accent); opacity: 0.5; }
.hcc-consent--dark { color: rgba(255,255,255,0.3); }
.hcc-consent--dark i { color: rgba(255,255,255,0.6); opacity: 1; }

.search-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-3);
    margin-top: 6px;
    padding-left: 2px;
}
.search-hint i { font-size: 11px; color: var(--accent); opacity: 0.6; }

/* Search spinner (button loading state) */
.search-spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Three-dot loading inside answer card */
.answer-loading {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 0;
}
.answer-loading span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.3;
    animation: dotPulse 1.2s ease-in-out infinite;
}
.answer-loading span:nth-child(2) { animation-delay: 0.2s; }
.answer-loading span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.85); }
    50%       { opacity: 1;   transform: scale(1.1);  }
}

/* ════════════════════════════════════════════════════════════
   QUICK ACCESS CAROUSEL
════════════════════════════════════════════════════════════ */
.carousel-section {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.carousel-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
}
.carousel-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}
.carousel-viewport {
    flex: 1;
    overflow: hidden;
    border-radius: 4px;
}
.carousel-track {
    display: flex;
    gap: 10px;
    /* transition applied by JS during slide */
}

/* Individual cards */
.car-card {
    flex: 0 0 calc(33.333% - 7px);
    min-height: 110px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 4px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
    will-change: transform;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.car-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(0,0,0,0.03) 0%,
        transparent 60%);
    opacity: 0;
    transition: opacity 0.2s;
}
.car-card:hover {
    background: #fafafa;
    border-color: rgba(0,0,0,0.10);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.05),
                0 2px 8px rgba(0,0,0,0.06);
}
.car-card:hover::before { opacity: 1; }

/* Card content - injected by JS */
.car-icon {
    width: 34px; height: 34px;
    border-radius: 3px;
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.10);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: var(--accent);
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}
.car-card:hover .car-icon {
    background: rgba(0,0,0,0.10);
    border-color: rgba(0,0,0,0.20);
}
.car-body { display: flex; flex-direction: column; gap: 3px; }
.car-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.3;
}
.car-desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-3);
    line-height: 1.5;
}
.car-arrow {
    position: absolute;
    bottom: 12px; right: 12px;
    font-size: 12px;
    color: var(--text-3);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s, transform 0.2s, color 0.2s;
}
.car-card:hover .car-arrow { opacity: 1; transform: translateX(0); color: var(--accent); }

/* Animation states */
.car-card.exit-left {
    animation: carExitLeft 0.28s var(--ease) forwards;
}
.car-card.enter-right {
    animation: carEnterRight 0.32s var(--ease) forwards;
}
.car-card.exit-right {
    animation: carExitRight 0.28s var(--ease) forwards;
}
.car-card.enter-left {
    animation: carEnterLeft 0.32s var(--ease) forwards;
}
@keyframes carExitLeft  { to { opacity:0; transform:translateX(-28px); } }
@keyframes carExitRight { to { opacity:0; transform:translateX(28px);  } }
@keyframes carEnterRight{ from { opacity:0; transform:translateX(32px);  } to { opacity:1; transform:translateX(0); } }
@keyframes carEnterLeft { from { opacity:0; transform:translateX(-32px); } to { opacity:1; transform:translateX(0); } }

/* Nav arrows */
.carousel-arrow {
    width: 36px; height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    color: var(--text-2);
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.carousel-arrow:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
    color: var(--text-1);
    transform: scale(1.08);
}

/* Dots */
.carousel-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}
.car-dot {
    height: 6px;
    border-radius: 3px;
    background: var(--text-3);
    transition: width 0.3s var(--ease), background 0.3s;
    cursor: pointer;
    border: none;
}
.car-dot.active {
    width: 20px;
    background: var(--accent);
}
.car-dot:not(.active) { width: 6px; }
.car-dot:hover:not(.active) { background: var(--text-2); }

/* ════════════════════════════════════════════════════════════
   EXAMPLE PILL CAROUSEL (marquee)
════════════════════════════════════════════════════════════ */
.ex-carousel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    /* fade edges */
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    margin-top: 14px;
}
.ex-carousel:hover .ex-track { animation-play-state: paused; }
.ex-track {
    display: flex;
    gap: 8px;
    width: max-content;
    animation: exMarquee 65s linear infinite;
}
@keyframes exMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ex-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.08);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.ex-pill i {
    font-size: 13px;
    color: var(--accent);
    flex-shrink: 0;
}
.ex-pill:hover {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.15);
    color: var(--text-1);
    transform: translateY(-2px);
}
.ex-pill:active { transform: scale(0.97); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .section-about { padding-top: 160px; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-burger { display: flex; }
    .nav-cta   { display: none; }

    .hero-title { letter-spacing: -0.02em; }

    /* Hero: stack columns on mobile */
    .hero-inner,
    .hero-content-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .hero-right {
        display: none;
    }
    .hero-minimal-claim {
        font-size: clamp(30px, 10vw, 58px);
    }
    .hero-minimal-tags span,
    .hero-minimal-tech span {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .search-ai-badge { display: none; }
    .section-about { padding-top: 120px; }
}

/* ════════════════════════════════════════════════════════════
   HERO CTA BUTTON
════════════════════════════════════════════════════════════ */
.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 4px;
    background: var(--text-1);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(15,23,42,0.18);
}
.hero-cta-btn:hover {
    background: #1e293b;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(15,23,42,0.22);
}
.hero-cta-btn i { font-size: 14px; transition: transform 0.2s; }
.hero-cta-btn:hover i { transform: translateX(4px); }

/* ════════════════════════════════════════════════════════════
   HERO CONTACT CARD
════════════════════════════════════════════════════════════ */
.hero-contact-card {
    position: relative;
    z-index: 20;
    margin-top: 60px;
    margin-bottom: -280px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    padding: 32px;
    box-shadow:
        0 4px 6px rgba(0,0,0,0.04),
        0 20px 60px rgba(0,0,0,0.10),
        0 0 0 1px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 400px;
    width: 100%;
    align-self: flex-start;
}

/* Card header */
.hcc-header {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}
.hcc-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-dk);
    box-shadow: none;
    animation: pulse 2s ease-in-out infinite;
}
.hcc-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-1);
    line-height: 1.25;
    margin: -4px 0 0;
}
.hcc-sub {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.6;
    margin-top: -8px;
}

/* Quick-contact options — removed in favour of full form */

/* Form groups (chips etc.) */
.hcc-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hcc-group-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
    padding-left: 2px;
}
.hcc-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.hcc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
    user-select: none;
}
.hcc-chip i { font-size: 13px; }
.hcc-chip:hover {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
    color: var(--text-1);
}
.hcc-chip--active {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.18);
    color: var(--accent);
    font-weight: 600;
}

/* Divider — kept for potential future use */
.hcc-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-3);
    letter-spacing: 0.04em;
}
.hcc-divider::before, .hcc-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

/* Mini form */
.hcc-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hcc-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color 0.2s, background 0.2s;
}
.hcc-field:focus-within {
    border-color: rgba(0,0,0,0.20);
    background: #fff;
}
.hcc-field > i {
    font-size: 15px;
    color: var(--text-3);
    margin-top: 2px;
    flex-shrink: 0;
    transition: color 0.2s;
}
.hcc-field:focus-within > i { color: var(--accent); }
.hcc-field input,
.hcc-field textarea,
.hcc-field input[type="date"] {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: var(--font);
    font-size: 14px;
    color: var(--text-1);
    resize: none;
    min-width: 0;
    line-height: 1.5;
}
.hcc-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
}
.hcc-field input::placeholder,
.hcc-field textarea::placeholder { color: var(--text-3); }
.hcc-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.hcc-submit:hover {
    background: var(--accent-dk);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.20);
}
.hcc-submit i { font-size: 14px; transition: transform 0.2s; }
.hcc-submit:hover i { transform: translateX(4px); }

/* Form success state */
.hcc-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 8px;
}
.hcc-success i {
    font-size: 32px;
    color: #22c55e;
    margin-bottom: 4px;
}
.hcc-success strong {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-1);
}
.hcc-success span {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
}
.hcc-success-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    transition: gap 0.2s;
}
.hcc-success-link:hover { gap: 8px; }

/* ════════════════════════════════════════════════════════════
   SECTIONS — BASE
════════════════════════════════════════════════════════════ */
.section {
    padding: 112px 32px;
}
.container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Label + Title utilities */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 4px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.09);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 20px;
}
.section-label-center {
    display: block;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}
.section-title {
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-1);
    margin-bottom: 20px;
}
.section-title--center { text-align: center; }
.section-header-center { text-align: center; max-width: 580px; margin: 0 auto 56px; }
.section-sub {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-2);
    margin-top: 14px;
}
.section-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-2);
    margin-bottom: 18px;
}
.gradient-text {
    color: var(--accent-dk);
}

/* ════════════════════════════════════════════════════════════
   ÜBER UNS
════════════════════════════════════════════════════════════ */
.section-about {
    background: var(--bg-2);
    padding-top: 330px;
}
/* Two-column layout */
.au-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.au-title { margin-bottom: 20px; }
/* Tech strip */
.au-tech-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 32px;
}
.au-tech-strip span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 2px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text-2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
/* Capabilities list */
.au-capabilities {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}
.au-cap-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
    cursor: default;
    transition: padding-left 0.25s;
}
.au-cap-item:first-child { border-top: 1px solid var(--border); }
.au-cap-item:hover { padding-left: 6px; }
.au-cap-num {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--text-3);
    flex-shrink: 0;
    width: 26px;
    padding-top: 4px;
    transition: color 0.2s;
}
.au-cap-body { flex: 1; }
.au-cap-body h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.015em;
    margin-bottom: 5px;
}
.au-cap-body p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-2);
}
.au-cap-icon {
    font-size: 17px;
    color: var(--border-2);
    flex-shrink: 0;
    padding-top: 3px;
    transition: color 0.2s;
}
.au-cap-item:hover .au-cap-num  { color: var(--accent); }
.au-cap-item:hover .au-cap-icon { color: var(--accent); }

/* ════════════════════════════════════════════════════════════
   SKYNODE ECOSYSTEM
════════════════════════════════════════════════════════════ */
.section-skynode {
    background: var(--accent-dk);
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}
.sn-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}
/* Header */
.section-skynode .section-title { color: #fff; margin-bottom: 12px; }
.sn-section-label {
    color: rgba(255,255,255,0.45) !important;
    border-color: rgba(255,255,255,0.12) !important;
    background: rgba(255,255,255,0.06) !important;
}
.sn-brand {
    font-style: italic;
    font-weight: 300;
    color: rgba(255,255,255,0.5);
}
.sn-section-sub {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255,255,255,0.5);
    text-align: center;
    max-width: 500px;
    margin: 0 auto 56px;
}
/* Diagram */
.sn-diagram {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-bottom: 32px;
}
/* Nodes */
.sn-node {
    flex: 1;
    position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 6px;
    padding: 40px 28px 32px;
    overflow: hidden;
    transition: background 0.3s, border-color 0.3s, transform 0.35s;
}
.sn-node:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-6px);
}
/* Engine — center featured node */
.sn-node--engine {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-16px);
    z-index: 1;
}
.sn-node--engine:hover { transform: translateY(-22px); }
/* Orbit rings */
.sn-node-orbit {
    position: absolute;
    width: 130%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.05);
    top: -40%;
    left: -15%;
    pointer-events: none;
}
.sn-orbit--a {
    width: 150%;
    left: -25%;
    border-style: dashed;
    border-color: rgba(255,255,255,0.05);
    animation: snOrbitSpin 22s linear infinite;
}
.sn-orbit--b {
    width: 170%;
    left: -35%;
    animation: snOrbitSpin 35s linear infinite reverse;
}
@keyframes snOrbitSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* Engine center glow pulse */
.sn-engine-pulse {
    position: absolute;
    width: 200%;
    aspect-ratio: 1;
    border-radius: 50%;
    top: -50%;
    left: -50%;
    background: radial-gradient(ellipse at center,
        rgba(255,255,255,0.04) 0%,
        transparent 60%);
    animation: snEnginePulse 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes snEnginePulse {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    50%       { opacity: 1;   transform: scale(1.1); }
}
/* Node body */
.sn-node-body { position: relative; z-index: 1; }
.sn-node-layer {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.3);
    margin-bottom: 20px;
}
.sn-node--engine .sn-node-layer { color: rgba(255,255,255,0.5); }
.sn-node-icon-wrap {
    width: 52px; height: 52px;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 22px;
    transition: background 0.2s;
}
.sn-icon-engine {
    background: rgba(255,255,255,0.14) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: #fff !important;
}
.sn-icon-engine i { animation: snGearSpin 10s linear infinite; }
@keyframes snGearSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.sn-node-title {
    font-size: 19px;
    font-weight: 300;
    color: rgba(255,255,255,0.65);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    line-height: 1.2;
}
.sn-node-title strong { font-weight: 800; color: #fff; }
.sn-node-type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 16px;
}
.sn-node--engine .sn-node-type { color: rgba(255,255,255,0.5); }
.sn-node-desc {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255,255,255,0.5);
    margin-bottom: 20px;
}
.sn-node--engine .sn-node-desc { color: rgba(255,255,255,0.68); }
.sn-node-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.sn-node-tags span {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 2px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sn-node--engine .sn-node-tags span {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.65);
}
/* Connectors */
.sn-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    flex-shrink: 0;
    gap: 10px;
}
.sn-conn-line {
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.1);
    position: relative;
    overflow: hidden;
    border-radius: 1px;
}
.sn-conn-dot {
    position: absolute;
    top: -2px;
    left: -8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
    animation: snDotFlow 2.2s linear infinite;
}
.sn-conn-dot--d2 { animation-delay: -0.74s; }
.sn-conn-dot--d3 { animation-delay: -1.48s; }
.sn-conn-dot--rev {
    animation: snDotFlowRev 2.2s linear infinite;
}
.sn-conn-dot--rev.sn-conn-dot--d2 { animation-delay: -0.74s; }
.sn-conn-dot--rev.sn-conn-dot--d3 { animation-delay: -1.48s; }
@keyframes snDotFlow {
    0%   { left: -8px;   opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 105%;   opacity: 0; }
}
@keyframes snDotFlowRev {
    0%   { left: 105%;   opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: -8px;   opacity: 0; }
}
.sn-conn-labels {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.sn-conn-labels span {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.2);
    white-space: nowrap;
}
/* Integration bar */
.sn-integration-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 4px;
    padding: 18px 40px;
    gap: 0;
}
.sn-int-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 28px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.01em;
}
.sn-int-item i {
    font-size: 15px;
    color: rgba(255,255,255,0.25);
}
.sn-int-sep {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.1);
    flex-shrink: 0;
}

/* SkyNode detail page CTA */
.sn-more-cta {
    display: flex;
    justify-content: center;
    padding-top: 40px;
}
.sn-more-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600;
    color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.16);
    padding: 11px 24px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sn-more-cta-btn:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-color: rgba(255,255,255,0.28);
}
.sn-more-cta-btn i { font-size: 12px; transition: transform 0.2s; }
.sn-more-cta-btn:hover i { transform: translateX(4px); }

/* ════════════════════════════════════════════════════════════
   ZIELGRUPPEN
════════════════════════════════════════════════════════════ */
/* ── Lösungen Intro section header ── */
.ls-intro-section {
    background: var(--bg-2);
    padding-bottom: 0;
}
/* ── Alternating split sections ── */
.ls-section {
    background: #fff;
    padding: 100px 0;
}
.ls-section--alt {
    background: var(--bg-2);
}
.ls-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
}
.ls-split--flip .ls-split-text { order: 2; }
.ls-split--flip .ls-split-visual { order: 1; }
/* Number */
.ls-split-num {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--text-3);
    margin-bottom: 12px;
}
/* Type tag */
.ls-split-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(26,74,173,0.07);
    border: 1px solid rgba(26,74,173,0.12);
    border-radius: 2px;
    padding: 4px 10px;
    margin-bottom: 20px;
}
.ls-split-tag i { font-size: 13px; }
/* Title */
.ls-split-title {
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-1);
    margin-bottom: 20px;
}
/* Intro */
.ls-split-intro {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-2);
    margin-bottom: 28px;
}
/* List */
.ls-split-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
}
.ls-split-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-2);
}
.ls-split-list li i {
    color: var(--accent);
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 1px;
}
/* CTA button */
.ls-split-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 24px;
    background: var(--accent-dk);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 3px;
    transition: background 0.2s, transform 0.15s;
}
.ls-split-cta:hover {
    background: #163d92;
    transform: translateY(-2px);
}
.ls-split-cta i { font-size: 13px; transition: transform 0.2s; }
.ls-split-cta:hover i { transform: translateX(4px); }
/* Visual block */
.ls-split-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Highlight Panel (new rich visual) ── */
.ls-highlight-panel {
    width: 100%;
    max-width: 480px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 44px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.07);
}
.ls-highlight-panel--dark {
    background: var(--accent-dk);
    border-color: var(--accent-dk);
    box-shadow: 0 8px 40px rgba(12,35,64,0.25);
}
.ls-hp-icon {
    width: 56px; height: 56px;
    border-radius: 8px;
    background: rgba(26,74,173,0.10);
    border: 1px solid rgba(26,74,173,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    color: var(--accent);
}
.ls-highlight-panel--dark .ls-hp-icon {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.15);
    color: #fff;
}
.ls-hp-headline {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-1);
    line-height: 1.3;
}
.ls-highlight-panel--dark .ls-hp-headline { color: #fff; }
.ls-hp-items {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ls-hp-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.ls-hp-item-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 6px;
}
.ls-hp-item--inv .ls-hp-item-dot {
    background: rgba(255,255,255,0.55);
}
.ls-hp-item > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ls-hp-item strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.4;
}
.ls-hp-item--inv strong { color: #fff; }
.ls-hp-item span {
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.55;
}
.ls-hp-item--inv span { color: rgba(255,255,255,0.50); }
.ls-hp-stat-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.ls-hp-stat-strip--inv { border-color: rgba(255,255,255,0.12); }
.ls-hp-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.ls-hp-stat strong {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text-1);
    line-height: 1;
}
.ls-hp-stat-strip--inv .ls-hp-stat strong { color: #fff; }
.ls-hp-stat span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-3);
}
.ls-hp-stat-strip--inv .ls-hp-stat span { color: rgba(255,255,255,0.40); }
.ls-hp-stat-sep {
    width: 1px; height: 32px;
    background: var(--border);
    flex-shrink: 0;
}
.ls-hp-stat-strip--inv .ls-hp-stat-sep { background: rgba(255,255,255,0.12); }
.ls-visual-block {
    width: 100%;
    max-width: 400px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ls-visual-block--dark {
    background: var(--accent-dk);
    border-color: var(--accent-dk);
}
.ls-vis-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ls-vis-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 2px;
    background: #fff;
    border: 1px solid var(--border-2);
    color: var(--text-2);
}
.ls-vis-tag--inv {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.7);
}
.ls-vis-stat-row {
    display: flex;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}
.ls-visual-block--dark .ls-vis-stat-row {
    border-color: rgba(255,255,255,0.12);
}
.ls-vis-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ls-vis-stat-num {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text-1);
    line-height: 1;
}
.ls-vis-stat-label {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.ls-vis-stat--inv .ls-vis-stat-num { color: #fff; }
.ls-vis-stat--inv .ls-vis-stat-label { color: rgba(255,255,255,0.45); }
/* Szenarien section */
.section-zielgruppen {
    background: var(--bg-2);
}
.ls-szenarien-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 36px;
}
.ls-szenarien-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}
.ls-szenarien-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-1);
    margin: 0;
}
.szenarien-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.szenario-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 24px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.szenario-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.10);
}
.szenario-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.szenario-tag--elektriker { background: rgba(0,0,0,0.05); color: var(--accent); }
.szenario-tag--tga        { background: rgba(0,0,0,0.04); color: var(--text-2); }
.szenario-tag--unternehmen{ background: rgba(0,0,0,0.05); color: var(--text-2); }
.szenario-tag--bestand    { background: rgba(0,0,0,0.05); color: var(--text-2); }
.szenario-card h4 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-1);
    margin-bottom: 8px;
}
.szenario-card p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-2);
}

/* ════════════════════════════════════════════════════════════
   VISION
════════════════════════════════════════════════════════════ */
.section-vision {
    background: var(--bg);
}
.vision-intro {
    max-width: 700px;
    margin: 0 auto 64px;
    text-align: center;
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-2);
}
.vision-pillars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.vision-pillar {
    text-align: center;
    padding: 32px 20px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
}
.vision-pillar:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.09);
}
.vision-pillar-icon {
    width: 52px; height: 52px;
    margin: 0 auto 16px;
    border-radius: 4px;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.07);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    color: var(--accent);
}
.vision-pillar h4 {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-1);
    margin-bottom: 6px;
    line-height: 1.3;
}
.vision-pillar span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-3);
}

/* ════════════════════════════════════════════════════════════
   KONTAKT CTA
════════════════════════════════════════════════════════════ */
.section-kontakt {
    background: var(--bg-2);
    padding-top: 80px;
    padding-bottom: 80px;
}
.kontakt-card {
    position: relative;
}
/* glow deaktiviert (war für dunkle Card) */
.kontakt-glow { display: none; }
.kontakt-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 56px;
    align-items: start;
}

/* Form side */
.kontakt-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}
.kontakt-form-title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 4px;
}
.kontakt-form-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}

/* Dark-variant form fields */
.hcc-field--dark {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.12);
}
.hcc-field--dark:focus-within {
    background: rgba(255,255,255,0.11);
    border-color: rgba(0,0,0,0.25);
}
.hcc-field--dark > i { color: rgba(255,255,255,0.35); }
.hcc-field--dark:focus-within > i { color: rgba(255,255,255,0.6); }
.hcc-field--dark input,
.hcc-field--dark input[type="date"],
.hcc-field--dark textarea { color: #fff; }
.hcc-field--dark input::placeholder,
.hcc-field--dark textarea::placeholder { color: rgba(255,255,255,0.3); }
.hcc-field--dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.35; }

.hcc-group-label--dark { color: rgba(255,255,255,0.35); }

.hcc-chip--dark {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.6);
}
.hcc-chip--dark:hover {
    background: rgba(0,0,0,0.10);
    border-color: rgba(0,0,0,0.20);
    color: #fff;
}
.hcc-chip--dark.hcc-chip--active {
    background: rgba(0,0,0,0.12);
    border-color: rgba(0,0,0,0.25);
    color: rgba(147,197,253,1);
}

/* Two-col row inside form */
.kf-row {
    display: flex;
    gap: 10px;
}
.kf-row > .hcc-field { flex: 1; }

/* Direct contact side */
.kontakt-direct {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 8px;
}
.kontakt-direct-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
.kontakt-direct-title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #fff;
    margin-top: -4px;
}
.kontakt-direct-sub {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    line-height: 1.65;
    margin-top: -4px;
}
.kontakt-direct-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.kd-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 4px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    text-decoration: none;
}
.kd-option:hover {
    background: rgba(0,0,0,0.10);
    border-color: rgba(0,0,0,0.18);
    transform: translateX(3px);
}
.kd-option-icon {
    width: 42px; height: 42px;
    border-radius: 4px;
    background: rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    color: rgba(255,255,255,0.6);
    flex-shrink: 0;
}
.kd-option-icon--email {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7);
}
.kd-option-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.kd-option-text strong {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.kd-option-text span {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kd-arrow {
    font-size: 13px;
    color: rgba(255,255,255,0.25);
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
}
.kd-option:hover .kd-arrow {
    transform: translateX(3px);
    color: rgba(255,255,255,0.6);
}
.kontakt-direct-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.25);
    line-height: 1.55;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding-top: 16px;
    margin-top: 4px;
}
.kontakt-direct-note i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ════════════════════════════════════════════════════════════
   NEW SECTIONS RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .au-layout          { grid-template-columns: 1fr; gap: 48px; }
    .sn-diagram         { flex-direction: column; gap: 0; }
    .sn-connector       { width: 100%; height: 52px; flex-direction: row; justify-content: center; }
    .sn-conn-line       { width: 80px; height: 2px; }
    .sn-node--engine    { transform: none; }
    .sn-node--engine:hover { transform: translateY(-6px); }
    .sn-integration-bar { flex-wrap: wrap; padding: 20px; gap: 12px; }
    .sn-int-sep         { display: none; }
    .sn-int-item        { padding: 4px 12px; }
    .vision-pillars     { grid-template-columns: repeat(2, 1fr); }
    .ls-split           { grid-template-columns: 1fr; gap: 40px; }
    .ls-split--flip .ls-split-text,
    .ls-split--flip .ls-split-visual { order: unset; }
    .ls-szenarien-header { flex-direction: column; gap: 6px; }
    .kontakt-card       { padding: 36px 24px; }
    .kontakt-inner      { grid-template-columns: 1fr; gap: 40px; }
    .kf-row             { flex-direction: column; }
}
@media (max-width: 600px) {
    .section            { padding: 64px 20px; }
    .szenarien-grid     { grid-template-columns: 1fr; }
    .vision-pillars     { grid-template-columns: 1fr 1fr; }
    .section-title      { font-size: 26px; }
}

/* ════════════════════════════════════════════════════════════
   KI SEARCH SECTION
════════════════════════════════════════════════════════════ */
.section-ki {
    background: var(--bg);
    padding: 80px 32px;
}
.ki-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 72px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}
.ki-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
}
.ki-label i { font-size: 13px; }
.ki-title {
    font-size: clamp(22px, 2.8vw, 32px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text-1);
    margin-bottom: 14px;
}
.ki-sub {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-2);
}
.ki-search-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Quick pills (static) */
.ki-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.ki-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ki-pill i { font-size: 12px; color: var(--accent); }
.ki-pill:hover {
    background: var(--surface-2);
    border-color: var(--border-2);
    color: var(--text-1);
}
.ki-disclaimer {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-3);
}
.ki-disclaimer i { font-size: 12px; color: var(--accent); opacity: 0.5; }
@media (max-width: 900px) {
    .ki-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ════════════════════════════════════════════════════════════
   SECTION ANGLES
   Each section slides under the previous with a diagonal
   clip at its top edge. Alternates left/right for rhythm.
════════════════════════════════════════════════════════════ */

/* ── Z-index stacking (each section paints over previous) ── */
.hero                { position: relative; z-index: 1; }
.section-ki          { position: relative; z-index: 2; }
.section-about       { position: relative; z-index: 3; }
.section-skynode     { z-index: 4; }  /* already has position:relative */
.ls-intro-section    { position: relative; z-index: 5; }
.ls-section          { position: relative; z-index: 6; }
.ls-section--alt     { z-index: 7; }
.ls-section--alt + .ls-section { z-index: 8; }
.section-zielgruppen { position: relative; z-index: 9; }
.section-vision      { position: relative; z-index: 10; }
.section-kontakt     { position: relative; z-index: 11; }

/* ── Über Uns (bg-2) — kommt nach ki-section (weiß) ──
   Links oben flach, rechts oben höher */
.section-about {
    clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
    margin-top: calc(-1 * var(--slant));
    padding-top: calc(80px + var(--slant));
}

/* ── SkyNode (dunkel) — kommt nach about (bg-2) ──
   Links oben höher, rechts oben flach */
.section-skynode {
    clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%);
    margin-top: calc(-1 * var(--slant));
    padding-top: calc(100px + var(--slant));
}

/* ── Lösungen Intro (bg-2) — kommt nach SkyNode (dunkel) ── */
.ls-intro-section {
    clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
    margin-top: calc(-1 * var(--slant));
    padding-top: var(--slant);
    padding-bottom: var(--slant);
}

/* ── Lösung 01 & 03 (weiß) — kommt nach bg-2 ── */
.ls-section {
    clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%);
    margin-top: calc(-1 * var(--slant));
    padding-top: calc(80px + var(--slant));
}

/* ── Lösung 02 (bg-2) — kommt nach weiß ── */
.ls-section--alt {
    clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
}

/* ── Szenarien (bg-2) — kommt nach ls-section (weiß) ── */
.section-zielgruppen {
    clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%);
    margin-top: calc(-1 * var(--slant));
    padding-top: calc(112px + var(--slant));
}

/* ── Vision (weiß) — kommt nach szenarien (bg-2) ── */
.section-vision {
    clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
    margin-top: calc(-1 * var(--slant));
    padding-top: calc(112px + var(--slant));
}

/* ── Kontakt (bg-2) — kommt nach vision (weiß) ── */
.section-kontakt {
    clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%);
    margin-top: calc(-1 * var(--slant));
    padding-top: calc(80px + var(--slant));
    padding-bottom: calc(80px + var(--slant));
}

/* ── Angles deaktivieren auf Mobilgeräten (zu steil bei schmalen Viewports) ── */
@media (max-width: 700px) {
    .section-about,
    .section-skynode,
    .ls-intro-section,
    .ls-section,
    .ls-section--alt,
    .section-zielgruppen,
    .section-vision,
    .section-kontakt {
        clip-path: none;
        margin-top: 0;
    }
    .section-about       { padding-top: 80px; }
    .section-skynode     { padding-top: 100px; }
    .ls-intro-section    { padding-top: 0; padding-bottom: 0; }
    .ls-section          { padding-top: 80px; }
    .section-zielgruppen { padding-top: 112px; }
    .section-vision      { padding-top: 112px; }
    .section-kontakt     { padding-top: 80px; padding-bottom: 80px; }
}

/* ════════════════════════════════════════════════════════════
   FLOATING CONTACT FAB
════════════════════════════════════════════════════════════ */
.contact-fab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    background: var(--accent-dk);
    color: #fff;
    border: none;
    border-radius: 6px 0 0 6px;
    padding: 14px 12px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: -3px 0 20px rgba(0,0,0,0.18);
    transition: background 0.2s, box-shadow 0.2s, right 0.2s;
    outline: none;
}
.contact-fab:hover {
    background: var(--accent);
    box-shadow: -4px 0 28px rgba(0,0,0,0.26);
}
.contact-fab i {
    font-size: 20px;
    line-height: 1;
}
.contact-fab-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.contact-fab-badge {
    display: block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 2px var(--accent-dk);
    flex-shrink: 0;
}

/* Page-load attention animation */
@keyframes fabAttention {
    0%   { transform: translateY(-50%) scale(1)    translateX(0); }
    15%  { transform: translateY(-50%) scale(1.12) translateX(-6px); }
    30%  { transform: translateY(-50%) scale(0.96) translateX(0); }
    50%  { transform: translateY(-50%) scale(1.08) translateX(-4px); }
    70%  { transform: translateY(-50%) scale(0.98) translateX(0); }
    100% { transform: translateY(-50%) scale(1)    translateX(0); }
}
.contact-fab.attention {
    animation: fabAttention 0.9s cubic-bezier(.4,0,.2,1) both;
}

/* ════════════════════════════════════════════════════════════
   SLIDING CONTACT PANEL
════════════════════════════════════════════════════════════ */
.contact-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: 420px;
    max-width: 100vw;
    background: #fff;
    z-index: 201;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: -4px 0 40px rgba(0,0,0,0.16);
    display: flex;
    flex-direction: column;
}
.contact-panel.open {
    transform: translateX(0);
}

.contact-panel-inner {
    padding: 32px 28px 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

/* Close button */
.contact-panel-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
}
.contact-panel-close:hover {
    background: var(--surface-2);
    color: var(--text-1);
}

/* Backdrop */
.contact-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0,0,0,0.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.contact-panel-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* Hide original FAB when panel is open */
body.contact-panel-open .contact-fab {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

@media (max-width: 480px) {
    .contact-panel { width: 100vw; }
    .contact-fab-label { display: none; }
    .contact-fab { padding: 12px 10px; gap: 6px; }
}

/* ════════════════════════════════════════════════════════════
   KI CHAT — Termin-Konversation
════════════════════════════════════════════════════════════ */

/* Termin pill — highlighted */
.ki-pill--termin {
    background: var(--accent-dk);
    color: #fff;
    border-color: var(--accent-dk);
    font-weight: 700;
}
.ki-pill--termin:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Chat container */
.ki-chat {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    max-width: 560px;
    width: 100%;
    margin-top: 4px;
}

/* Header */
.ki-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--accent-dk);
    color: #fff;
}
.ki-chat-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.ki-chat-header-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.ki-chat-header-text strong {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}
.ki-chat-sub {
    font-size: 11px;
    opacity: 0.75;
}
.ki-chat-exit {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s;
    flex-shrink: 0;
}
.ki-chat-exit:hover { background: rgba(255,255,255,0.28); }

/* Messages */
.ki-chat-messages {
    flex: 1;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-height: 180px;
    max-height: 380px;
    background: #f8fafc;
}
.ki-msg {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    animation: msgIn 0.2s ease both;
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ki-msg--bot {
    align-self: flex-start;
    background: #ffffff;
    color: var(--text-1);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.ki-msg--user {
    align-self: flex-end;
    background: var(--accent-dk);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Typing indicator */
.ki-msg--typing {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 12px 16px;
    min-width: 52px;
}
.ki-msg--typing span {
    display: block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text-3);
    animation: typingBounce 1.2s ease-in-out infinite;
}
.ki-msg--typing span:nth-child(2) { animation-delay: 0.2s; }
.ki-msg--typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* Input row */
.ki-chat-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: #fff;
    flex-wrap: wrap;
}
.ki-chat-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-2);
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--text-1);
    outline: none;
    transition: border-color 0.15s;
}
.ki-chat-input:focus { border-color: var(--accent); }
.ki-chat-send {
    width: 36px; height: 36px;
    border-radius: 6px;
    border: none;
    background: var(--accent-dk);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 15px;
    flex-shrink: 0;
    transition: background 0.15s;
}
.ki-chat-send:hover { background: var(--accent); }

/* Chips inside chat input */
.ki-chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    width: 100%;
    padding: 4px 0 2px;
}
/* Suggestion chips (initial state) */
.ki-chat-chips--suggestions {
    gap: 8px;
    padding-bottom: 4px;
}
.ki-chat-chip {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border-2);
    background: #fff;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ki-chat-chip:hover {
    background: var(--accent-dk);
    border-color: var(--accent-dk);
    color: #fff;
}
/* Appointment chip — stands out */
.ki-chat-chip--appt {
    background: var(--accent-dk);
    border-color: var(--accent-dk);
    color: #fff;
    font-weight: 700;
}
.ki-chat-chip--appt:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* Date picker row */
.ki-chat-date-row {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}
.ki-chat-date-input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border-2);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-1);
    outline: none;
    background: #fff;
    transition: border-color 0.15s;
}
.ki-chat-date-input:focus { border-color: var(--accent); }
.ki-chat-skip {
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-2);
    background: transparent;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.ki-chat-skip:hover {
    background: var(--surface-2);
    border-color: var(--text-3);
}

/* Action buttons (final step) */
.ki-chat-action-btn {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    background: var(--accent-dk);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.15s;
    white-space: nowrap;
}
.ki-chat-action-btn:hover { background: var(--accent); }
.ki-chat-action-btn--ghost {
    background: transparent;
    color: var(--text-3);
    border: 1px solid var(--border-2);
    font-weight: 600;
}
.ki-chat-action-btn--ghost:hover { background: var(--surface-2); color: var(--text-2); }


/* ════════════════════════════════════════════════════════════
   HS FABs — Kontakt & Meeting
════════════════════════════════════════════════════════════ */
.hs-fab {
    position: fixed;
    right: 0;
    z-index: 200;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px 0 0 6px;
    padding: 14px 12px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: -3px 0 20px rgba(0,0,0,0.18);
    transition: background 0.2s, box-shadow 0.2s, opacity 0.2s;
    outline: none;
}
#hsFab      { top: 50%; transform: translateY(-100%) translateY(-2px); }
#meetingFab { top: 50%; transform: translateY(2px); }
.hs-fab:hover { background: var(--accent-dk); box-shadow: -4px 0 28px rgba(0,0,0,0.26); }
.hs-fab--meeting { background: #1a6b4a; }
.hs-fab--meeting:hover { background: #145939; }
.hs-fab i { font-size: 20px; line-height: 1; }
.hs-fab-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Hide all FABs when any panel is open */
body.contact-panel-open .hs-fab,
body.hs-panel-open .contact-fab,
body.hs-panel-open .hs-fab,
body.meeting-panel-open .contact-fab,
body.meeting-panel-open .hs-fab {
    opacity: 0;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   HS Sliding Panels
════════════════════════════════════════════════════════════ */
.hs-panel {
    position: fixed;
    top: 0; right: 0;
    height: 100dvh;
    width: 50vw;
    min-width: 400px;
    max-width: 100vw;
    background: #fff;
    z-index: 201;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: -4px 0 40px rgba(0,0,0,0.16);
}
.hs-panel--meeting { width: 50vw; min-width: 400px; }
.hs-panel.open { transform: translateX(0); }

.hs-panel-inner {
    padding: 28px 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}
.hs-panel-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 16px;
    transition: background 0.15s, color 0.15s;
    z-index: 2;
}
.hs-panel-close:hover { background: var(--surface-2); color: var(--text-1); }
.hs-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-top: 8px;
}
.hs-panel-header > i { font-size: 26px; color: var(--accent-dk); flex-shrink: 0; margin-top: 2px; }
.hs-panel--meeting .hs-panel-header > i { color: #1a6b4a; }
.hs-panel-header strong { display: block; font-size: 18px; font-weight: 700; color: var(--text-1); }
.hs-panel-header span   { font-size: 13px; color: var(--text-3); }

/* Direct contact strip inside panel */
.hs-panel-direct {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--surface-1);
    border-radius: 8px;
    border: 1px solid var(--border);
}
.hs-panel-direct-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-3);
}
.hs-panel-direct-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hs-panel-direct-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.hs-panel-direct-link i {
    font-size: 14px;
    color: var(--accent);
    flex-shrink: 0;
}
.hs-panel-direct-link:hover {
    background: rgba(26,74,173,0.07);
    color: var(--accent);
}
.hs-panel .hs-form-frame,
#hsPanelFormContainer { width: 100%; flex: 1; min-height: 300px; }
.hs-panel .meetings-iframe-container { width: 100%; flex: 1; min-height: 500px; }
.hs-panel .meetings-iframe-container iframe { width: 100% !important; border: none; }

/* ════════════════════════════════════════════════════════════
   Kontakt section — HubSpot inline tabs
════════════════════════════════════════════════════════════ */
.kontakt-hs-section {
    margin-top: 28px;
    background: #fff;
    border-radius: 10px;
    padding: 28px 32px 32px;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.kontakt-hs-section-header {
    margin-bottom: 20px;
}
.kontakt-hs-title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    color: var(--text-1);
    margin: 0 0 6px;
}
.kontakt-hs-sub {
    font-size: 15px;
    color: var(--text-2);
    margin: 0;
}
.kontakt-hs-tabs-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

/* Spacer pushes direct links to the right */
.kontakt-hs-tabs-spacer { flex: 1; }

/* Direct-contact links in tab bar */
.kontakt-tab-direct-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 6px;
    border: 1px solid var(--border-2);
    background: transparent;
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.kontakt-tab-direct-link i { font-size: 14px; color: var(--accent); }
.kontakt-tab-direct-link:hover {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--text-1);
}
.kontakt-hs-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid var(--border-2);
    background: #fff;
    color: var(--text-2);
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kontakt-hs-tab-btn:hover {
    background: var(--surface-2);
    color: var(--text-1);
    border-color: var(--accent);
}
.kontakt-hs-tab-btn--active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
/* Direct contact buttons inside kontakt tabs */
.kontakt-direct-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.kontakt-direct-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.20);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.kontakt-direct-btn i { font-size: 15px; }
.kontakt-direct-btn:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.40);
    color: #fff;
}

.kontakt-hs-content { min-height: 300px; }
.kontakt-hs-content--hidden { display: none; }
.kontakt-hs-content .meetings-iframe-container,
.kontakt-hs-content .hs-form-frame { width: 100%; }
.kontakt-hs-content .meetings-iframe-container iframe { width: 100% !important; border-radius: 8px; border: none; }

@media (max-width: 480px) {
    .hs-fab-label { display: none; }
    .hs-fab { padding: 12px 10px; gap: 6px; }
    .hs-panel--meeting { width: 100vw; }
}

/* ════════════════════════════════════════════════════════════
   Kontakt — Direct-contact strip (replaces old kontakt-inner)
════════════════════════════════════════════════════════════ */
.kontakt-direct-strip {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.kontakt-direct-strip-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0;
    white-space: nowrap;
}
.kontakt-direct-strip-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.kds-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-1);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-2);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.kds-link:hover {
    background: var(--surface-2);
    color: var(--accent);
    border-color: var(--accent);
}

/* ════════════════════════════════════════════════════════════
   ANIMATIONS — Hero entrance + Scroll reveal
════════════════════════════════════════════════════════════ */

/* reduced motion: disable everything */
@media (prefers-reduced-motion: reduce) {
    .hero-left > *, .hero-right,
    .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── Hero page-load entrance ── */
@keyframes heroIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes heroSlideRight {
    from { opacity: 0; transform: translateX(44px); }
    to   { opacity: 1; transform: translateX(0);    }
}

.hero-right {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Scroll reveal base state ── */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: none; /* animation handles it */
}

/* ── Keyframes ── */
@keyframes revealUp {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealLeft {
    from { opacity: 0; transform: translateX(-48px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes revealRight {
    from { opacity: 0; transform: translateX(48px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes revealFade {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Triggered by JS (.is-visible) ── */
.reveal.is-visible              { animation: revealUp    0.65s var(--ease) both; }
.reveal.reveal--left.is-visible  { animation: revealLeft  0.65s var(--ease) both; }
.reveal.reveal--right.is-visible { animation: revealRight 0.65s var(--ease) both; }
.reveal.reveal--fade.is-visible  { animation: revealFade  0.60s var(--ease) both; }

/* ── Stagger via data-delay ── */
.reveal[data-delay="1"].is-visible { animation-delay: 0.10s; }
.reveal[data-delay="2"].is-visible { animation-delay: 0.20s; }
.reveal[data-delay="3"].is-visible { animation-delay: 0.32s; }
.reveal[data-delay="4"].is-visible { animation-delay: 0.44s; }
.reveal[data-delay="5"].is-visible { animation-delay: 0.56s; }

/* ════════════════════════════════════════════════
   SPA — page visibility
════════════════════════════════════════════════ */
.spa-page { display: none; }
.spa-page.spa-active { display: block; }

/* Optional fade-in when a page becomes active */
@keyframes spaFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.spa-page.spa-active { animation: spaFadeIn 0.35s var(--ease) both; }

/* ════════════════════════════════════════════════
   SkyNode sub-nav (shown at top of SkyNode state)
════════════════════════════════════════════════ */
.sn-subnav {
    position: sticky;
    top: 64px; /* below main nav */
    z-index: 80;
    background: rgba(0, 18, 62, 0.97);
    backdrop-filter: blur(12px) saturate(1.4);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sn-subnav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.sn-subnav-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
    font-family: var(--font);
}
.sn-subnav-back:hover { color: #fff; background: rgba(255,255,255,0.08); }
.sn-subnav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.sn-subnav-links a {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    padding: 4px 12px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}
.sn-subnav-links a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.sn-subnav-cta {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    transition: background 0.2s;
    white-space: nowrap;
}
.sn-subnav-cta:hover { background: var(--accent-dk, #1338a0); }
@media (max-width: 640px) {
    .sn-subnav-links { display: none; }
    .sn-subnav-cta { display: none; }
}

/* ════════════════════════════════════════════════
   Legal pages (Impressum, Datenschutz, AGB)
════════════════════════════════════════════════ */
.legal-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 64px 24px 80px;
}
.legal-page-hero {
    text-align: center;
    padding: 60px 0 48px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 48px;
}
.legal-page-hero h1 {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 8px;
    letter-spacing: -0.03em;
}
.legal-page-hero p {
    font-size: 17px;
    color: var(--text-3);
    margin: 0;
}
.legal-blk {
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
}
.legal-blk:last-of-type { border-bottom: none; }
.legal-blk h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0 0 12px;
}
.legal-blk h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1);
    margin: 16px 0 8px;
}
.legal-blk p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-2);
    margin: 0 0 10px;
}
.legal-blk ul {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-2);
    padding-left: 20px;
    margin: 0 0 10px;
}
.legal-blk a { color: var(--accent); text-decoration: none; }
.legal-blk a:hover { text-decoration: underline; }
.legal-stand {
    font-size: 13px;
    color: var(--text-3);
    margin-top: 32px;
    text-align: right;
}

/* ════════════════════════════════════════════════
   Override: force nav always-white regardless of
   skynode.css loading order
════════════════════════════════════════════════ */
.nav {
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(20px) saturate(1.8) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 16px rgba(0,0,0,0.06) !important;
}
/* Nav link text — always dark (skynode.css defaults them white for dark hero background) */
.logo-text { color: var(--accent-dk) !important; }
.logo-ward { color: var(--accent) !important; }
.nav-link { color: var(--text-2) !important; }
.nav-link:hover { color: var(--text-1) !important; background: var(--surface) !important; }
.nav-link.active { color: var(--accent) !important; }
.nav-cta {
    background: var(--accent) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.nav-cta:hover { background: #143d94 !important; }
.nav-burger span { background: var(--text-1) !important; }
/* Logo favicon — always show in full color (skynode.css inverts it to white for dark hero) */
.logo-mark--img { filter: none !important; opacity: 1 !important; }

/* ════════════════════════════════════════════════
   Termin page
════════════════════════════════════════════════ */
.termin-page { padding-bottom: 80px; }

.termin-hero {
    background: linear-gradient(135deg, var(--accent-dk, #0c2340) 0%, #1a4aad 100%);
    padding: 90px 24px 60px;
    text-align: center;
    color: #fff;
}
.termin-hero-inner { max-width: 640px; margin: 0 auto; }
.termin-hero-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 16px;
}
.termin-hero-eyebrow i { margin-right: 6px; }
.termin-hero-title {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 12px;
}
.termin-hero-sub {
    font-size: 17px;
    color: rgba(255,255,255,0.65);
    margin: 0;
    line-height: 1.6;
}

/* Pull card up to overlap hero */
#page-termin .kontakt-card {
    margin-top: -32px;
    position: relative;
    z-index: 2;
}

/* Mobile secondary CTA */
.mob-cta--secondary {
    background: rgba(26,74,173,0.12) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(26,74,173,0.25);
    margin-top: 8px;
}

/* ════════════════════════════════════════════════
   BLOG — Liste + Artikel
════════════════════════════════════════════════ */
.blog-hero {
    background: linear-gradient(135deg, var(--accent-dk, #091a30) 0%, #13378f 100%);
    padding: 100px 24px 56px;
    text-align: center;
    color: #fff;
}
.blog-hero-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 14px;
}
.blog-hero-title {
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 12px;
}
.blog-hero-sub {
    font-size: 16px;
    color: rgba(255,255,255,0.65);
    margin: 0;
}

/* Blog — Artikel-Karten */
.blog-list {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 24px 80px;
    display: grid;
    gap: 24px;
}
.blog-card {
    background: #fff;
    border: 1px solid var(--border, #e8ecf2);
    border-radius: 14px;
    padding: 28px 32px;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: box-shadow 0.2s, transform 0.2s;
}
.blog-card:hover {
    box-shadow: 0 8px 32px rgba(19,55,143,0.12);
    transform: translateY(-2px);
}
.blog-card-meta {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent, #13378f);
    margin-bottom: 10px;
}
.blog-card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-1, #0d1b2e);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.blog-card-desc {
    font-size: 15px;
    color: var(--text-2, #4a5568);
    line-height: 1.6;
    margin: 0 0 16px;
}
.blog-card-arrow {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #13378f);
}

/* Blog — Einzelartikel */
.blog-article-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 56px 24px 96px;
}
.blog-article-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent, #13378f);
    text-decoration: none;
    margin-bottom: 32px;
}
.blog-article-back:hover { text-decoration: underline; }
.blog-article-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent, #13378f);
    margin-bottom: 12px;
}
.blog-article-title {
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-1, #0d1b2e);
    margin-bottom: 8px;
    line-height: 1.2;
}
.blog-article-subtitle {
    font-size: 17px;
    color: var(--text-2, #4a5568);
    line-height: 1.6;
    margin-bottom: 32px;
}
.blog-article-divider {
    border: none;
    border-top: 1px solid var(--border, #e8ecf2);
    margin-bottom: 40px;
}

/* Artikel-Inhalt Typografie */
.blog-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-1, #0d1b2e);
    margin: 40px 0 14px;
    letter-spacing: -0.02em;
}
.blog-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-1, #0d1b2e);
    margin: 28px 0 10px;
}
.blog-content p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-2, #4a5568);
    margin-bottom: 18px;
}
.blog-content strong { color: var(--text-1, #0d1b2e); }
.blog-content ul, .blog-content ol {
    padding-left: 24px;
    margin-bottom: 18px;
}
.blog-content li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-2, #4a5568);
    margin-bottom: 6px;
}
.blog-content hr {
    border: none;
    border-top: 1px solid var(--border, #e8ecf2);
    margin: 36px 0;
}
.blog-content blockquote {
    border-left: 4px solid var(--accent, #13378f);
    padding: 12px 20px;
    margin: 24px 0;
    background: rgba(19,55,143,0.04);
    border-radius: 0 8px 8px 0;
}
.blog-content blockquote p {
    font-style: italic;
    color: var(--text-1, #0d1b2e);
    margin: 0;
}
.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    font-size: 15px;
}
.blog-content th {
    background: var(--accent-dk, #091a30);
    color: #fff;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
}
.blog-content td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border, #e8ecf2);
    color: var(--text-2, #4a5568);
}
.blog-content tr:last-child td { border-bottom: none; }
.blog-content tr:nth-child(even) td { background: rgba(19,55,143,0.03); }

/* CTA-Box am Artikelende */
.blog-cta-box {
    background: linear-gradient(135deg, var(--accent-dk, #091a30) 0%, #13378f 100%);
    border-radius: 16px;
    padding: 36px 32px;
    text-align: center;
    color: #fff;
    margin-top: 56px;
}
.blog-cta-box h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}
.blog-cta-box p {
    font-size: 15px;
    color: rgba(255,255,255,0.72);
    margin-bottom: 20px;
}
.blog-cta-box a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--accent-dk, #091a30);
    font-weight: 700;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    transition: opacity 0.2s;
}
.blog-cta-box a:hover { opacity: 0.85; }

/* ════════════════════════════════════════════════
   SKYNODE PAGE — vollständiges CSS
════════════════════════════════════════════════ */

/* Gemeinsame Helpers */
.section-title--inv { color: #fff !important; }
.product-name { color: #6ca0f5; }

.btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent, #13378f); color: #fff;
    font-size: 15px; font-weight: 600; padding: 13px 26px;
    border-radius: 8px; text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: #0f2a70; transform: translateY(-1px); }

.btn-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: #fff;
    font-size: 15px; font-weight: 600; padding: 12px 24px;
    border: 1.5px solid rgba(255,255,255,0.35); border-radius: 8px;
    text-decoration: none; transition: background 0.2s, border-color 0.2s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); }

.btn-primary--dark {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent-dk, #091a30); color: #fff;
    font-size: 15px; font-weight: 600; padding: 13px 26px;
    border-radius: 8px; text-decoration: none; border: none; cursor: pointer;
    transition: opacity 0.2s;
}
.btn-primary--dark:hover { opacity: 0.85; }

/* ── SkyNode Hero ─────────────────────────────── */
.sn-hero {
    position: relative;
    background: var(--accent-dk, #091a30);
    padding: 100px 24px 80px;
    overflow: hidden;
}
.sn-hero-overlay {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 70% 40%, rgba(108,160,245,0.12) 0%, transparent 65%);
    pointer-events: none;
}
.sn-hero-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.sn-hero-glow {
    position: absolute; border-radius: 50%; pointer-events: none;
    filter: blur(80px); opacity: 0.25;
}
.sn-hero-glow-1 {
    width: 600px; height: 600px;
    background: #13378f;
    top: -200px; right: -100px;
}
.sn-hero-glow-2 {
    width: 400px; height: 400px;
    background: #6ca0f5;
    bottom: -100px; left: 5%;
}
.sn-hero-inner {
    position: relative; z-index: 1;
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.sn-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(255,255,255,0.5);
    margin-bottom: 20px;
}
.sn-hero-title {
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800; letter-spacing: -0.04em;
    color: #fff; line-height: 1.1; margin-bottom: 18px;
}
.sn-hero-title .brand { color: #6ca0f5; }
.sn-hero-sub {
    font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.65);
    margin-bottom: 32px;
}
.sn-hero-layers {
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px;
}
.sn-hero-layer-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px; color: rgba(255,255,255,0.8);
}
.sn-hero-ctas {
    display: flex; flex-wrap: wrap; gap: 14px;
}
.sn-hero-video-wrap {
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    background: #000;
}
.sn-hero-vid { display: block; width: 100%; border-radius: 16px; }

/* ── SkyNode Sections ─────────────────────────── */
.sn-section {
    padding: 80px 24px;
}
.sn-section--dark {
    background: var(--accent-dk, #091a30);
}
.sn-section--deep {
    background: #04101f;
}

/* ── Ökosystem Übersicht ──────────────────────── */
.sn-overview {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
.sn-overview-text .section-label { margin-bottom: 10px; }
.sn-overview-features { margin-top: 28px; display: flex; flex-direction: column; gap: 18px; }
.sn-ov-feature {
    display: flex; gap: 14px; align-items: flex-start;
}
.sn-ov-feature-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    background: rgba(108,160,245,0.12);
    border: 1px solid rgba(108,160,245,0.2);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #6ca0f5; font-size: 16px;
}
.sn-ov-feature-body strong {
    display: block; font-size: 14px; font-weight: 600;
    color: #fff; margin-bottom: 3px;
}
.sn-ov-feature-body span { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.5; }

.sn-overview-visual { position: relative; }
.sn-overview-img { width: 100%; border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
.sn-overview-layer-strip {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.sn-layer-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; font-size: 11px; font-weight: 600;
    border-radius: 20px;
}
.sn-layer-chip--1 { background: rgba(108,160,245,0.15); color: #6ca0f5; }
.sn-layer-chip--2 { background: rgba(98,196,132,0.15); color: #62c484; }
.sn-layer-chip--3 { background: rgba(255,185,80,0.15); color: #ffb950; }

/* ── Integration Bar ─────────────────────────── */
.sn-integration {
    padding: 18px 24px;
}
.sn-integration-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 0;
}
.sn-int-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 20px;
    font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.75);
}
.sn-int-item i { color: #6ca0f5; font-size: 16px; }
.sn-int-sep {
    width: 1px; height: 24px;
    background: rgba(255,255,255,0.12);
}

/* ── Produkt-Layouts ──────────────────────────── */
.sn-product {
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
.sn-product--flip .sn-product-visual { order: -1; }

.sn-product-meta { display: flex; gap: 8px; margin-bottom: 14px; }
.sn-product-layer, .sn-product-type {
    padding: 4px 10px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    border-radius: 4px;
}
.sn-product-layer--inv {
    background: rgba(108,160,245,0.15); color: #6ca0f5;
}
.sn-product-type--inv {
    background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6);
}
.sn-product-title {
    font-size: clamp(24px, 3.5vw, 36px); font-weight: 800;
    letter-spacing: -0.03em; color: #fff; margin-bottom: 16px; line-height: 1.2;
}
.sn-product-desc {
    font-size: 16px; line-height: 1.7;
    color: rgba(255,255,255,0.65); margin-bottom: 28px;
}
.sn-product-features { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.sn-product-feature {
    display: flex; gap: 12px; align-items: flex-start;
}
.sn-product-feature > i {
    font-size: 18px; color: #62c484; margin-top: 2px; flex-shrink: 0;
}
.feat-body strong {
    display: block; font-size: 14px; font-weight: 600;
    color: #fff; margin-bottom: 2px;
}
.feat-body span { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.5; }

.sn-tech-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sn-tech-badge {
    padding: 5px 12px; font-size: 11px; font-weight: 600;
    background: rgba(108,160,245,0.1);
    border: 1px solid rgba(108,160,245,0.2);
    border-radius: 20px; color: #6ca0f5;
}
.sn-product-stat-row {
    display: flex; gap: 32px;
}
.sn-product-stat { display: flex; flex-direction: column; }
.sn-product-stat strong {
    font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.03em;
}
.sn-product-stat span { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 2px; }

/* Bild-Grid */
.sn-product-img-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.sn-product-img-grid .main-img {
    grid-column: 1 / -1;
}
.sn-product-img-grid img { width: 100%; display: block; }

/* Tabs */
.sn-tabs {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; overflow: hidden;
}
.sn-tabs-bar {
    display: flex; gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 4px;
}
.sn-tab-btn {
    padding: 12px 16px; font-size: 13px; font-weight: 600;
    color: rgba(255,255,255,0.45);
    background: none; border: none; cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.sn-tab-btn.active { color: #fff; border-bottom-color: #6ca0f5; }
.sn-tab-btn:hover:not(.active) { color: rgba(255,255,255,0.75); }
.sn-tab-pane { display: none; padding: 16px; }
.sn-tab-pane.active { display: block; }
.sn-tab-pane img { width: 100%; border-radius: 8px; display: block; }

/* Beispiel-Banner */
.sn-example-banner {
    margin-top: 48px; border-radius: 14px; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}
.sn-example-banner img { width: 100%; display: block; }
.sn-example-caption {
    padding: 14px 20px; font-size: 13px;
    color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.03);
    text-align: center;
}

/* ── SkyNode CTA-Sektion ──────────────────────── */
.sn-cta-section {
    padding: 80px 24px;
    background: #f5f7fc;
}
.sn-cta-layout {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
.sn-cta-title {
    font-size: clamp(22px, 3.5vw, 32px); font-weight: 800;
    letter-spacing: -0.03em; color: var(--text-1, #0d1b2e);
    margin-bottom: 14px; line-height: 1.2;
}
.sn-cta-sub {
    font-size: 16px; line-height: 1.7;
    color: var(--text-2, #4a5568); margin-bottom: 28px;
}
.sn-cta-direct {
    display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px;
}
.sn-cta-link {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    background: #fff; border: 1px solid var(--border, #e8ecf2);
    border-radius: 10px; text-decoration: none;
    transition: box-shadow 0.2s, transform 0.15s;
}
.sn-cta-link:hover { box-shadow: 0 4px 16px rgba(19,55,143,0.1); transform: translateY(-1px); }
.sn-cta-link > i {
    width: 38px; height: 38px; flex-shrink: 0;
    background: rgba(19,55,143,0.08); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent, #13378f); font-size: 16px;
}
.sn-cta-meeting {
    background: #fff; border: 1px solid var(--border, #e8ecf2);
    border-radius: 14px; overflow: hidden;
}
.sn-cta-meeting-header {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 24px;
    background: var(--accent-dk, #091a30); color: #fff;
}
.sn-cta-meeting-header > i { font-size: 22px; color: #6ca0f5; }
.sn-cta-meeting-header strong { display: block; font-size: 15px; margin-bottom: 2px; }
.sn-cta-meeting-header span { font-size: 12px; color: rgba(255,255,255,0.55); }

/* ── Responsive: SkyNode ─────────────────────── */
@media (max-width: 900px) {
    .sn-hero-inner       { grid-template-columns: 1fr; gap: 40px; }
    .sn-hero-video-wrap  { order: -1; }
    .sn-overview         { grid-template-columns: 1fr; gap: 32px; }
    .sn-product          { grid-template-columns: 1fr; gap: 32px; }
    .sn-product--flip .sn-product-visual { order: 0; }
    .sn-cta-layout       { grid-template-columns: 1fr; gap: 32px; }
    .sn-integration-inner { flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
    .sn-int-sep          { display: none; }
}
@media (max-width: 600px) {
    .sn-hero             { padding: 80px 18px 56px; }
    .sn-section          { padding: 56px 18px; }
    .sn-product-stat-row { gap: 20px; }
    .sn-tabs-bar         { overflow-x: auto; }
    .sn-product-img-grid { grid-template-columns: 1fr; }
}

/* Text-Overrides für dunkle SkyNode-Sektionen */
.sn-section--dark .section-label,
.sn-section--deep .section-label {
    color: rgba(108,160,245,0.85);
}
.sn-section--dark .section-title,
.sn-section--deep .section-title {
    color: #fff;
}
.sn-section--dark .section-intro,
.sn-section--deep .section-intro {
    color: rgba(255,255,255,0.6);
}

/* SkyNode — Bild-Platzhalter (bis echte Screenshots hochgeladen sind) */
.sn-img-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 48px 24px;
    background: rgba(108,160,245,0.06);
    border: 1px dashed rgba(108,160,245,0.25);
    border-radius: 10px; text-align: center;
    min-height: 200px;
}
.sn-img-placeholder i { font-size: 40px; color: rgba(108,160,245,0.5); }
.sn-img-placeholder span { font-size: 13px; color: rgba(255,255,255,0.3); font-weight: 500; }
.sn-img-placeholder--sm { min-height: 120px; padding: 24px 16px; }
.sn-img-placeholder--sm i { font-size: 28px; }

/* SkyNode — Lottie-Animationen IoT-Sektion */
.sn-lottie-main-wrap {
    background: rgba(108,160,245,0.05);
    border: 1px solid rgba(108,160,245,0.12);
    border-radius: 14px; overflow: hidden;
    padding: 12px;
}
.sn-lottie-main { width: 100%; height: 280px; }

.sn-lottie-sm-wrap {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(108,160,245,0.05);
    border: 1px solid rgba(108,160,245,0.12);
    border-radius: 12px; padding: 12px 8px 10px;
    gap: 6px;
}
.sn-lottie-sm { width: 100%; height: 110px; }
.sn-lottie-label {
    font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,0.4);
    text-align: center;
}