@font-face {
    font-family: 'Comfortaa';
    src: url('/assets/fonts/comfortaa-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comfortaa';
    src: url('/assets/fonts/comfortaa-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comfortaa';
    src: url('/assets/fonts/comfortaa-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comfortaa';
    src: url('/assets/fonts/comfortaa-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comfortaa';
    src: url('/assets/fonts/comfortaa-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



/* ==========================================
   COSYMATION MASTER STYLE.CSS (VOLLSTÄNDIG)
========================================== */

/* 1. RESET & FARBPALETTE */
:root {
    --cosymation-green: #50C878;
    --accent-orange: #FD8830;
    --accent-purple: #A378C1;
    --accent-blue: #486CD2;

    --bg-white: #FFFFFF;
    --bg-light: #F7F9FB;
    --bg-card: #FFFFFF;
    --border-color: #E2E8F0;

    --text-main: #2D3748;
    --text-muted: #718096;

    --font-main: "Comfortaa", sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: var(--font-main);
    color: var(--text-main);
    background: var(--bg-white);
    display: flex;
    flex-direction: column;
}

a, a:visited, a:hover, a:active {
    color: inherit;
    text-decoration: none;
}

p a, .contact-link {
    color: var(--cosymation-green);
    border-bottom: 1px solid var(--cosymation-green);
    transition: color 0.2s ease, border-color 0.2s ease;
}

p a:hover, .contact-link:hover {
    color: var(--accent-purple);
    border-color: var(--accent-purple);
}

/* 2. HEADER & NAVIGATION */
.app-header {
    width: 100%;
    height: 82px;
    padding: 0 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.96);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
}

.logo {
    color: var(--cosymation-green);
    font-size: 1.35rem;
    font-weight: 600;
}

.app-navigation {
    display: flex;
    gap: 20px;
    margin-left: auto;
    margin-right: 30px;
}

.app-navigation a {
    color: var(--text-main);
    font-size: 0.75rem;
    transition: color 0.2s ease;
}

.app-navigation a:hover,
.app-navigation a.active {
    color: var(--cosymation-green);
    font-weight: 600;
}

.logout-link {
    color: var(--text-main);
    font-size: 0.75rem;
    font-family: var(--font-main);
    background: transparent;
    cursor: pointer;
    padding: 8px 18px;
    border: 1px solid var(--border-color);
    border-radius: 100px;
    transition: all 0.2s ease;
}

.logout-link:hover {
    color: var(--bg-white);
    background: var(--cosymation-green);
    border-color: var(--cosymation-green);
}

/* 3. HERO-SEKTIONEN (UNIVERSELL) */
.app-hero,
.product-hero,
.determinism-hero,
.security-hero,
.platform-hero,
.actions-hero,
.orchestration-hero,
.enterprise-hero,
.contact-hero,
.pricing-hero,
.legal-hero,
.overview-hero {
    min-height: 48vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 100px 8vw 60px 8vw;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    width: 100%;
}

.eyebrow,
.section-label {
    color: var(--accent-purple);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

h1 {
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text-main);
}

h1 span, h2 span {
    color: var(--cosymation-green);
}

h2 {
    font-size: clamp(2.2rem, 4vw, 4.2rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.product-hero p,
.platform-hero p,
.actions-hero p,
.orchestration-hero p,
.enterprise-hero p,
.contact-hero p,
.pricing-hero > p,
.overview-hero p,
.determinism-hero > p,
.security-hero p {
    max-width: 620px;
    margin-top: 24px;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
}

/* 4. LAYOUT & SEKTIONEN-WECHSEL */
section {
    width: 100%;
    box-sizing: border-box;
}

.content-section,
.automation-intro,
.system-levels,
.ui-section,
.zero-impact,
.product-closing,
.determinism-statement,
.run-section,
.contrast-section,
.audit-section,
.sovereignty-section,
.determinism-closing,
.platform-map-section,
.component-detail,
.pipeline-section,
.platform-closing,
.action-section,
.actions-closing,
.deployment-section,
.status-section,
.heartbeat-section,
.runbook-section,
.trigger-section,
.version-section,
.rollback-section,
.orchestration-closing,
.security-onprem,
.security-architecture,
.credential-section,
.vault-section,
.tenant-section,
.security-closing,
.heritage-section,
.migration-section,
.investment-section,
.benefits-section,
.enterprise-closing,
.pricing-section,
.support-section,
.pricing-principle,
.pricing-cta,
.contact-section,
.contact-direct,
.contact-location,
.contact-cta,
.overview-intro,
.overview-modules,
.overview-positioning,
.overview-cta {
    padding: 100px 8vw;
    background: var(--bg-white);
}

/* Getönte Abschnitte */
.system-levels,
.zero-impact,
.run-section,
.sovereignty-section,
.platform-map-section,
.pipeline-section,
.status-section,
.trigger-section,
.security-architecture,
.vault-section,
.migration-section,
.benefits-section,
.support-section,
.contact-direct,
.overview-modules,
.overview-cta,
.product-closing,
.determinism-closing,
.platform-closing,
.actions-closing,
.orchestration-closing,
.security-closing,
.enterprise-closing,
.pricing-cta,
.contact-cta {
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.large-copy {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-main);
    margin-bottom: 16px;
}

p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.8;
}

/* 5. ÜBERSICHTSSEITE (EXPLORE) */
.overview-intro-grid,
.automation-intro-grid,
.ui-section,
.zero-heading,
.contrast-grid,
.sovereignty-grid,
.detail-grid,
.security-grid,
.credential-grid,
.tenant-grid,
.heritage-grid,
.migration-header,
.investment-grid,
.contact-direct-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 6vw;
    align-items: center;
    width: 100%;
}

.overview-module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 48px;
    width: 100%;
}

.overview-module {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    width: 100%;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.overview-module:hover {
    border-color: var(--cosymation-green);
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(80, 200, 120, 0.12);
}

.overview-module-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.overview-module-number {
    color: var(--accent-purple);
    font-size: 0.75rem;
    font-weight: 600;
}

.overview-module h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 12px 0 8px 0;
}

.overview-module-arrow {
    color: var(--cosymation-green);
    font-size: 1.25rem;
    font-weight: 700;
    align-self: flex-end;
    margin-top: 24px;
}

/* 6. AUTOMATION PAGE */
.system-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 48px;
    width: 100%;
}

.system-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.system-card:hover {
    border-color: var(--cosymation-green);
    transform: translateY(-4px);
}

.interaction-visual {
    width: 100%;
    display: flex;
    justify-content: center;
}

.window-frame {
    width: 100%;
    max-width: 520px;
    height: 320px;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.window-bar {
    height: 36px;
    background: #EDF2F7;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 8px;
}

.window-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.window-bar span:nth-child(1) { background: #FEB2B2; }
.window-bar span:nth-child(2) { background: #FEEBC8; }
.window-bar span:nth-child(3) { background: #C6F6D5; }

.window-content {
    flex: 1;
    display: flex;
    background: #FAFAFA;
}

.fake-sidebar {
    width: 25%;
    background: #EDF2F7;
    border-right: 1px solid var(--border-color);
}

.fake-main {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fake-line {
    height: 10px;
    background: #E2E8F0;
    border-radius: 4px;
}
.fake-line.long { width: 85%; }
.fake-line.medium { width: 55%; }

.fake-input {
    height: 38px;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.fake-button {
    width: 100px;
    height: 36px;
    background: var(--cosymation-green);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    align-self: flex-end;
}

.cursor-indicator {
    position: absolute;
    bottom: 50px;
    right: 65px;
    color: var(--accent-purple);
    font-size: 1.4rem;
    animation: cursorPulse 2s infinite ease-in-out;
}

@keyframes cursorPulse {
    0%, 100% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.3) translate(-10px, -10px); }
}

.comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: center;
    margin-top: 50px;
    width: 100%;
}

.comparison-column {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 36px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.comparison-column.old { background: #F7FAFC; }
.comparison-column.new {
    border-color: var(--cosymation-green);
    box-shadow: 0 10px 30px rgba(80, 200, 120, 0.12);
}

.comparison-title {
    font-size: 1.1rem;
    font-weight: 600;
}
.comparison-column.old .comparison-title { color: var(--text-muted); }
.comparison-column.new .comparison-title { color: var(--cosymation-green); }

.comparison-item {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 500;
}

.comparison-column.old .comparison-item { background: #EDF2F7; color: #718096; }
.comparison-column.new .comparison-item { background: rgba(80, 200, 120, 0.08); color: var(--text-main); }
.comparison-divider { font-size: 1.8rem; color: var(--cosymation-green); font-weight: 700; text-align: center; }

/* 7. DETERMINISMUS PAGE */
.determinism-statement {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 40px;
    align-items: flex-start;
}

.statement-number {
    font-size: 4.5rem;
    font-weight: 700;
    color: rgba(163, 120, 193, 0.25);
    line-height: 1;
}

.run-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.run-visual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    margin: 40px auto 30px auto;
    position: relative;
}

.run-line {
    position: absolute;
    top: 25px;
    left: 20px;
    right: 20px;
    height: 2px;
    background: var(--border-color);
    z-index: 1;
}

.run-node {
    position: relative;
    z-index: 2;
    background: var(--bg-white);
    border: 2px solid var(--border-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.run-node strong { font-size: 0.85rem; color: var(--text-main); }
.run-node span { position: absolute; top: 58px; font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.run-node.active { border-color: var(--cosymation-green); background: var(--cosymation-green); }
.run-node.active strong { color: #FFFFFF; }
.run-node.active span { color: var(--cosymation-green); font-weight: 600; }

.audit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
    width: 100%;
}

.audit-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.audit-card:hover { border-color: var(--cosymation-green); transform: translateY(-4px); }
.audit-card span { color: var(--accent-purple); font-size: 0.75rem; font-weight: 600; }
.audit-card h3 { font-size: 1.15rem; font-weight: 600; color: var(--text-main); margin: 12px 0 8px 0; }
.audit-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin: 0; }

.sovereignty-list {
    display: flex;
    gap: 40px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--border-color);
}

.sovereignty-list div { display: flex; flex-direction: column; }
.sovereignty-list strong { font-size: 2.2rem; color: var(--cosymation-green); font-weight: 600; line-height: 1; }
.sovereignty-list span { font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; }

/* 8. PLATTFORM PAGE */
.platform-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
    width: 100%;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.platform-component {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.component-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.component-top span:first-child { color: var(--accent-purple); font-size: 0.75rem; font-weight: 600; }
.component-top span:last-child { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; color: #718096; background: #EDF2F7; padding: 4px 10px; border-radius: 100px; }

.component-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(80, 200, 120, 0.12);
    color: var(--cosymation-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
}

.platform-component h2 { font-size: 1.5rem; font-weight: 600; color: var(--text-main); margin: 4px 0 0 0; }
.platform-component p { font-size: 0.9rem; color: var(--text-muted); margin: 0; line-height: 1.6; }

.component-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.component-tags span { padding: 6px 14px; border-radius: 100px; background: #F3E8FF; color: var(--accent-purple); font-size: 0.7rem; font-weight: 600; }
.platform-connection { font-size: 1.5rem; color: var(--cosymation-green); font-weight: 700; text-align: center; }

.component-detail { display: grid; grid-template-columns: 80px 1fr; gap: 30px; align-items: flex-start; }
.detail-number { font-size: 3.5rem; font-weight: 700; color: rgba(163, 120, 193, 0.3); line-height: 1; }

.feature-list { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color); }
.feature-list div { display: flex; flex-direction: column; }
.feature-list strong { font-size: 0.95rem; color: var(--text-main); font-weight: 600; }
.feature-list span { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; }

.pipeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.pipeline-step {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.pipeline-step span { color: var(--accent-purple); font-size: 0.75rem; font-weight: 600; }
.pipeline-step strong { font-size: 1.1rem; color: var(--text-main); margin-top: 8px; }
.pipeline-step small { font-size: 0.75rem; color: var(--cosymation-green); font-weight: 600; margin-top: 4px; }
.pipeline-arrow { font-size: 1.4rem; color: var(--cosymation-green); font-weight: 700; }

/* 9. ACTIONS PAGE */
.action-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 8vw;
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 82px;
    z-index: 90;
    backdrop-filter: blur(10px);
    width: 100%;
}

.action-navigation a {
    padding: 8px 16px;
    border-radius: 100px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 0.75rem;
    font-weight: 600;
}

.action-navigation a:hover { background: var(--cosymation-green); color: #FFFFFF; border-color: var(--cosymation-green); }

.action-section { display: flex; flex-direction: column; gap: 32px; }
.action-section-header { max-width: 700px; }
.action-section-header h2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; margin-top: 12px; margin-bottom: 16px; }

.action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    width: 100%;
}

.action-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.action-card:hover { border-color: var(--cosymation-green); transform: translateY(-4px); }
.action-card.featured { border-color: var(--cosymation-green); box-shadow: 0 6px 20px rgba(80, 200, 120, 0.12); }

.action-index { color: var(--accent-purple); font-size: 0.75rem; font-weight: 600; }
.action-symbol { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 6px; background: rgba(80, 200, 120, 0.12); color: var(--cosymation-green); font-size: 0.7rem; font-weight: 700; margin-top: 8px; }
.action-card h3 { font-size: 1.15rem; font-weight: 600; color: var(--text-main); margin: 12px 0 6px 0; }
.action-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin: 0; }
.action-type { display: inline-block; align-self: flex-start; margin-top: 16px; padding: 4px 10px; border-radius: 100px; background: #F3E8FF; color: var(--accent-purple); font-size: 0.65rem; font-weight: 700; }

.integration-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
}

.integration-list div {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.integration-list span { color: var(--accent-purple); font-size: 0.75rem; font-weight: 600; }
.integration-list strong { font-size: 1.05rem; color: var(--text-main); margin-top: 6px; }
.integration-list small { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

.resilience-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.resilience-flow > div:not(.resilience-arrow) {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.resilience-flow span { color: var(--accent-purple); font-size: 0.75rem; font-weight: 600; }
.resilience-flow strong { font-size: 1.05rem; color: var(--text-main); margin-top: 6px; }
.resilience-flow small { font-size: 0.75rem; color: var(--cosymation-green); font-weight: 600; margin-top: 4px; }
.resilience-arrow { font-size: 1.3rem; color: var(--cosymation-green); font-weight: 700; }

/* 10. ORCHESTRIERUNG PAGE */
.architecture-map { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 48px; width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; }
.architecture-center { width: 100%; background: #FFFFFF; border: 1px solid var(--border-color); border-radius: 16px; padding: 28px; text-align: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); display: flex; flex-direction: column; align-items: center; }
.architecture-center .architecture-label { color: var(--accent-purple); font-size: 0.75rem; font-weight: 600; }
.architecture-center strong { font-size: 1.4rem; color: var(--text-main); margin-top: 6px; }
.architecture-center small { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }

.architecture-connections { display: flex; justify-content: space-around; width: 80%; height: 24px; }
.connection-line { width: 2px; height: 100%; background: var(--cosymation-green); opacity: 0.6; }

.runner { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02); }
.runner span { color: var(--accent-purple); font-size: 0.7rem; font-weight: 600; }
.runner strong { font-size: 1.05rem; color: var(--text-main); margin-top: 6px; }
.runner small { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.runner b { color: var(--cosymation-green); font-size: 0.8rem; margin-top: 8px; }

.status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; width: 100%; }
.status-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02); }
.status-number { font-size: 2.2rem; font-weight: 700; color: var(--accent-purple); line-height: 1; }
.status-number.green { color: var(--cosymation-green); }

.heartbeat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; }
.heartbeat-indicator { display: flex; align-items: center; gap: 16px; background: #FFFFFF; border: 1px solid var(--border-color); border-radius: 12px; padding: 18px 22px; margin-top: 24px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02); }
.heartbeat-indicator .pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--cosymation-green); animation: pulseGlow 2s infinite; }
@keyframes pulseGlow { 0% { box-shadow: 0 0 0 0 rgba(80, 200, 120, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(80, 200, 120, 0); } 100% { box-shadow: 0 0 0 0 rgba(80, 200, 120, 0); } }

.heartbeat-indicator div { display: flex; flex-direction: column; }
.heartbeat-indicator strong { font-size: 0.9rem; color: var(--text-main); }
.heartbeat-indicator span { font-size: 0.75rem; color: var(--text-muted); }
.heartbeat-indicator time { margin-left: auto; font-size: 0.75rem; font-weight: 600; color: var(--cosymation-green); background: rgba(80, 200, 120, 0.1); padding: 4px 10px; border-radius: 6px; }

.runbook-flow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; width: 100%; max-width: 900px; }
.runbook-node { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: 14px; padding: 20px; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02); }
.runbook-node.active { border-color: var(--cosymation-green); box-shadow: 0 6px 20px rgba(80, 200, 120, 0.15); }
.runbook-node span { color: var(--accent-purple); font-size: 0.75rem; font-weight: 600; }
.runbook-node strong { font-size: 1.05rem; color: var(--text-main); margin-top: 6px; }
.runbook-node small { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
.runbook-arrow { font-size: 1.3rem; color: var(--cosymation-green); font-weight: 700; }

.trigger-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; width: 100%; }
.trigger-card { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02); }
.trigger-card span { color: var(--accent-purple); font-size: 0.75rem; font-weight: 600; }
.trigger-card strong { font-size: 1.2rem; color: var(--text-main); margin-top: 10px; }
.trigger-card p { font-size: 0.85rem; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.trigger-card code { align-self: flex-start; margin-top: 18px; font-family: monospace; font-size: 0.75rem; background: #EDF2F7; color: var(--accent-purple); padding: 6px 12px; border-radius: 6px; font-weight: 600; }

.version-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; align-items: flex-start; }
.version-alert { display: flex; align-items: flex-start; gap: 14px; background: #FFF5F5; border: 1px solid #FEB2B2; border-radius: 12px; padding: 16px 20px; margin-top: 24px; }
.version-alert > span { width: 24px; height: 24px; border-radius: 50%; background: #E53E3E; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; }
.version-alert strong { font-size: 0.9rem; color: #9B2C2C; }
.version-alert small { display: block; font-size: 0.8rem; color: #742A2A; margin-top: 2px; }

.rollback-visual { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; width: 100%; }
.rollback-visual > div:not(.rollback-arrow) { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: 14px; padding: 20px 28px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02); }
.rollback-visual .rollback-active { border-color: var(--cosymation-green); box-shadow: 0 6px 20px rgba(80, 200, 120, 0.15); }
.rollback-visual span { color: var(--accent-purple); font-size: 0.75rem; font-weight: 600; }
.rollback-visual strong { font-size: 1.1rem; color: var(--text-main); margin-top: 6px; }
.rollback-arrow { font-size: 1.4rem; color: var(--cosymation-green); font-weight: 700; }

/* 11. SECURITY PAGE */
.architecture-diagram {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
    width: 100%;
}

.architecture-zone {
    border: 2px dashed var(--cosymation-green);
    border-radius: 16px;
    padding: 32px;
    background: rgba(80, 200, 120, 0.03);
}

.zone-label {
    color: var(--cosymation-green);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.architecture-nodes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.architecture-node {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.architecture-node.central { border-color: var(--cosymation-green); }
.architecture-node strong { font-size: 1.1rem; color: var(--text-main); }
.architecture-node span { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.architecture-caption { font-size: 0.85rem; color: var(--text-muted); text-align: center; margin-top: 10px; }

.credential-points { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.credential-points > div { display: flex; gap: 16px; align-items: flex-start; }
.point-number { color: var(--accent-purple); font-size: 0.8rem; font-weight: 700; background: #F3E8FF; padding: 4px 10px; border-radius: 6px; }
.credential-points strong { font-size: 1.05rem; color: var(--text-main); }
.credential-points p { font-size: 0.85rem; color: var(--text-muted); margin-top: 4px; }

.vault-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
    width: 100%;
}

.vault-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.vault-card span { color: var(--accent-purple); font-size: 0.7rem; font-weight: 700; }
.vault-card strong { font-size: 1.2rem; color: var(--text-main); margin-top: 8px; }

/* 12. ENTERPRISE PAGE */
.migration-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
    width: 100%;
}

.migration-step {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.migration-step.active { border-color: var(--cosymation-green); box-shadow: 0 6px 20px rgba(80, 200, 120, 0.15); }
.migration-step span { color: var(--accent-purple); font-size: 0.75rem; font-weight: 600; }
.migration-step strong { font-size: 1.1rem; color: var(--text-main); margin-top: 8px; }
.migration-step small { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
.migration-arrow { font-size: 1.4rem; color: var(--cosymation-green); font-weight: 700; }

.investment-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.investment-points div { background: #FFFFFF; border: 1px solid var(--border-color); border-radius: 12px; padding: 18px; display: flex; align-items: center; gap: 12px; }
.investment-points span { color: var(--accent-purple); font-weight: 700; font-size: 0.8rem; }
.investment-points strong { font-size: 0.95rem; color: var(--text-main); }

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
    width: 100%;
}

.benefit-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.benefit-card span { color: var(--accent-purple); font-size: 0.75rem; font-weight: 600; }
.benefit-card h3 { font-size: 1.2rem; font-weight: 600; color: var(--text-main); margin: 12px 0 8px 0; }
.benefit-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* 13. PRICING PAGE */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
    width: 100%;
}

.pricing-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.pricing-card:hover { border-color: var(--cosymation-green); transform: translateY(-4px); }
.pricing-card-featured { border-color: var(--cosymation-green); box-shadow: 0 10px 30px rgba(80, 200, 120, 0.15); }

.pricing-card-top { display: flex; justify-content: space-between; align-items: center; }
.pricing-index { color: var(--accent-purple); font-size: 0.75rem; font-weight: 600; }
.pricing-tag { padding: 4px 10px; border-radius: 100px; background: #F3E8FF; color: var(--accent-purple); font-size: 0.65rem; font-weight: 700; }

.pricing-card-main h2 { font-size: 1.5rem; font-weight: 600; margin-top: 16px; }
.pricing-description { font-size: 0.85rem; color: var(--text-muted); margin-top: 8px; min-height: 40px; }
.pricing-price { margin-top: 20px; display: flex; align-items: baseline; gap: 6px; }
.price-value { font-size: 2rem; font-weight: 700; color: var(--cosymation-green); }
.price-period { font-size: 0.8rem; color: var(--text-muted); }

.pricing-capacity { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; }
.pricing-capacity strong { font-size: 1.3rem; color: var(--text-main); }
.pricing-capacity span { font-size: 0.85rem; color: var(--text-muted); }

.pricing-card-bottom { margin-top: 24px; }
.pricing-unit { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 12px; }

.pricing-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-radius: 8px;
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s ease;
border: none;                  /* entfernt den grauen Browser-Rahmen */
    outline: none;                 /* entfernt Fokusränder */
    font-family: inherit;          /* übernimmt die Schriftart der Seite */
    cursor: pointer;               /* zeigt den Hand-Cursor beim Drüberfahren */
    appearance: none;
    -webkit-appearance: none;
}

.pricing-button:hover { background: var(--cosymation-green); color: #FFFFFF; border-color: var(--cosymation-green); }

.support-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 40px;
    width: 100%;
}

.support-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    gap: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.support-card-accent { border-color: var(--cosymation-green); }
.support-number { color: var(--accent-purple); font-size: 0.8rem; font-weight: 700; }
.support-card h3 { font-size: 1.2rem; font-weight: 600; color: var(--text-main); margin-bottom: 8px; }
.support-response { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; }
.support-response strong { font-size: 1.4rem; color: var(--cosymation-green); }
.support-response span { font-size: 0.8rem; color: var(--text-muted); }
.support-addon { display: inline-block; padding: 4px 10px; border-radius: 100px; background: rgba(80, 200, 120, 0.12); color: var(--cosymation-green); font-size: 0.7rem; font-weight: 700; margin-bottom: 8px; }

/* 14. CONTACT PAGE */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

.contact-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.contact-card-highlight { border-color: var(--cosymation-green); box-shadow: 0 10px 30px rgba(80, 200, 120, 0.12); }
.contact-label { color: var(--accent-purple); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; }
.contact-card h2 { font-size: 1.6rem; font-weight: 600; color: var(--text-main); margin-top: 12px; }
.contact-card p { font-size: 0.9rem; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }

.contact-button,
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 100px;
    background: var(--cosymation-green);
    color: #FFFFFF;
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 24px;
    transition: all 0.2s ease;
border: none;                  /* entfernt den grauen Browser-Rahmen */
    outline: none;                 /* entfernt Fokusränder */
    font-family: inherit;          /* übernimmt die Schriftart der Seite */
    cursor: pointer;               /* zeigt den Hand-Cursor beim Drüberfahren */
    appearance: none;
    -webkit-appearance: none;
}

.contact-button:hover,
.cta-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(80, 200, 120, 0.3); }

/* 15. FOOTER */
.app-footer {
    padding: 24px 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    background: var(--bg-white);
    width: 100%;
}

.footer-links { display: flex; gap: 20px; }
.footer-links a:hover { color: var(--cosymation-green); }

/* 16. RESPONSIVE DESIGN */
@media (max-width: 1024px) {
    .system-grid,
    .audit-grid,
    .overview-module-grid,
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .architecture-nodes,
    .vault-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .app-navigation { display: none; }

    .overview-intro-grid,
    .automation-intro-grid,
    .ui-section,
    .zero-heading,
    .contrast-grid,
    .sovereignty-grid,
    .detail-grid,
    .security-grid,
    .credential-grid,
    .tenant-grid,
    .heritage-grid,
    .migration-header,
    .investment-grid,
    .contact-direct-grid,
    .heartbeat-grid,
    .version-grid,
    .component-detail,
    .determinism-statement {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .system-grid,
    .audit-grid,
    .overview-module-grid,
    .pricing-grid,
    .support-grid,
    .contact-grid,
    .benefits-grid,
    .architecture-nodes,
    .vault-cards,
    .investment-points {
        grid-template-columns: 1fr;
    }

    .comparison,
    .pipeline,
    .migration-flow,
    .runbook-flow,
    .rollback-visual,
    .resilience-flow {
        flex-direction: column;
    }

    .comparison-divider,
    .pipeline-arrow,
    .migration-arrow,
    .runbook-arrow,
    .rollback-arrow,
    .resilience-arrow {
        transform: rotate(90deg);
    }
}

/* ==========================================
   PUBLIC LANDING PAGE (UNAUTHENTICATED)
========================================== */

body.public-page {
    min-height: 100vh;
    background: var(--bg-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.public-home {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Public Header */
.public-header {
    width: 100%;
    height: 82px;
    padding: 0 8vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    box-sizing: border-box;
}

.public-logo {
    color: var(--accent-purple);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #F3E8FF;
    padding: 6px 14px;
    border-radius: 100px;
}

.public-login {
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 8px 22px;
    border: 1px solid var(--border-color);
    border-radius: 100px;
    transition: all 0.2s ease;
}

.public-login:hover {
    background: var(--cosymation-green);
    color: #FFFFFF;
    border-color: var(--cosymation-green);
}

/* Public Hero */
.public-hero {
    flex: 1;
    padding: 100px 8vw;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 6vw;
    align-items: center;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
}

.public-hero-content h1 {
    font-size: clamp(3.2rem, 6vw, 5.5rem);
    margin: 12px 0 20px 0;
}

.public-hero-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-muted);
    max-width: 580px;
    margin-bottom: 36px;
}

.public-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    border-radius: 100px;
    background: var(--cosymation-green);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(80, 200, 120, 0.25);
}

.public-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(80, 200, 120, 0.35);
}

.public-cta span {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.public-cta:hover span {
    transform: translateX(4px);
}

/* Decorative CM Ring Mark */
.public-mark {
    display: flex;
    align-items: center;
    justify-content: center;
}

.public-mark-circle {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
    position: relative;
}

.public-mark-circle::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 2px dashed rgba(80, 200, 120, 0.4);
    animation: rotateMark 25s linear infinite;
}

@keyframes rotateMark {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.public-mark-circle span {
    font-size: 3rem;
    font-weight: 700;
    color: var(--cosymation-green);
    letter-spacing: -0.05em;
}

/* Bottom Divider Section */
.public-message {
    padding: 40px 8vw;
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-white);
    box-sizing: border-box;
}

.public-message-line {
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.public-message p {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Public Footer */
.public-footer {
    padding: 24px 8vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    background: var(--bg-white);
    box-sizing: border-box;
}

.public-footer-links {
    display: flex;
    gap: 20px;
}

.public-footer-links a:hover {
    color: var(--cosymation-green);
}

@media (max-width: 900px) {
    .public-hero {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .public-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }
    .public-mark-circle {
        width: 160px;
        height: 160px;
    }
    .public-mark-circle span {
        font-size: 2.2rem;
    }
}

/* ==========================================
   LOGIN PAGE (ENTERPRISE ACCESS)
========================================== */

body.login-page {
    min-height: 100vh;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.login-container {
    width: 100%;
    max-width: 460px;
}

.login-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 48px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
}

.login-brand {
    margin-bottom: 32px;
}

.login-heading h1 {
    font-size: 2.4rem;
    margin: 12px 0 16px 0;
}

.login-heading p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 32px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-button {
    width: 100%;
    padding: 16px;
    border-radius: 100px;
    background: var(--cosymation-green);
    color: #FFFFFF;
    font-family: var(--font-main);
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(80, 200, 120, 0.25);
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(80, 200, 120, 0.35);
}

.login-footer {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.login-footer span {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ==========================================
   LEGAL PAGES (IMPRESSUM & DATENSCHUTZ)
========================================== */

.legal-hero {
    padding: 100px 8vw 60px 8vw;
    background: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
}

.legal-hero h1 {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    margin-top: 12px;
}

.legal-section {
    padding: 80px 8vw;
    background: var(--bg-white);
}

.legal-content {
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.legal-block {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 20px;
    align-items: flex-start;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-color);
}

.legal-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.legal-number {
    color: var(--accent-purple);
    font-size: 0.75rem;
    font-weight: 700;
    background: #F3E8FF;
    padding: 6px 10px;
    border-radius: 8px;
    text-align: center;
}

.legal-block h2 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 14px;
    grid-column: 2;
}

.legal-text {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.legal-text p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.legal-text strong {
    color: var(--text-main);
}

.legal-contact {
    padding: 80px 8vw;
    background: var(--bg-light);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.legal-contact h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 12px 0 24px 0;
}

@media (max-width: 768px) {
    .legal-block {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .legal-number, .legal-block h2, .legal-text {
        grid-column: 1;
    }
    .legal-number {
        align-self: flex-start;
    }
}

/* ==========================================
   NAVIGATION & DROPDOWNS (DESKTOP)
========================================== */

.app-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 4vw;
    background: #ffffff;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    z-index: 1000;
}

.app-navigation {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav-link, 
.dropdown-toggle {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main, #111827);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

.nav-link:hover, 
.dropdown-toggle:hover {
    background: var(--bg-light, #f9fafb);
    color: var(--accent-purple, #7c3aed);
}

/* Dropdown Container */
.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 1010;
}

/* Hover-Öffnung Desktop */
@media (min-width: 1025px) {
    .nav-dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(4px);
    }
}

.dropdown-menu a {
    padding: 10px 14px;
    font-size: 0.88rem;
    color: var(--text-muted, #4b5563);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.dropdown-menu a:hover {
    background: var(--bg-light, #f3f4f6);
    color: var(--text-main, #111827);
}

/* Hamburger Button Icon */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1020;
}

.mobile-menu-toggle span {
    width: 100%;
    height: 3px;
    background-color: var(--text-main, #111827);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* ==========================================
   RESPONSIVE (MOBILE & TABLET)
========================================== */

@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .app-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        flex-direction: column;
        align-items: stretch;
        padding: 24px;
        gap: 16px;
        border-bottom: 1px solid var(--border-color, #e5e7eb);
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
        display: none; /* Standby versteckt */
    }

    .app-navigation.is-open {
        display: flex;
    }

    .nav-dropdown {
        width: 100%;
    }

    .dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 12px 16px;
        background: var(--bg-light, #f9fafb);
        border-radius: 10px;
    }

    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 8px 0 0 16px;
        display: none; /* Einklappbar auf Mobil */
    }

    .nav-dropdown.is-active .dropdown-menu {
        display: flex;
    }

    .logout-link {
        width: 100%;
        margin-top: 8px;
        text-align: center;
        justify-content: center;
    }

    /* Animated Hamburger Icon to X */
    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }
    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

/* ==========================================
   EQUAL-SIZE FOUNDERS GRID (WIDE DESKTOP LAYOUT)
========================================== */

/* Erlaubt dem Gründer-Container auf Desktop mehr Breite als normalen Textblöcken */
.legal-text.founders-wrapper {
    max-width: 1100px !important;
    width: 100%;
}

.founders-grid-equal {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px; /* Etwas mehr Freiraum zwischen den Kacheln */
    width: 100%;
    margin-top: 16px;
}

.founder-card {
    background: #ffffff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    min-width: 0;
}

.founder-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(124, 58, 237, 0.12);
    border-color: rgba(124, 58, 237, 0.3);
}

.founder-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Exakt quadratisch 1:1 */
    background: var(--bg-light, #f3f4f6);
    overflow: hidden;
}

.founder-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.founder-info {
    padding: 22px; /* Leicht vergrößerter Innenabstand */
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
    background: #ffffff;
}

.founder-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main, #111827);
}

.founder-role {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-purple, #7c3aed);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #F3E8FF;
    align-self: flex-start;
    padding: 5px 10px;
    border-radius: 6px;
}

/* Macht die Regel spezifischer, um Überschreibungen zu verhindern */
.about-card-block .founder-card .founder-bio {
    font-size: 0.75rem !important; /* testweise mit !important erzwingen */
    line-height: 1.5;
    color: var(--text-muted, #4b5563);
}

/* Desktop (ab 993px): Breites 3er-Raster (2 oben zentriert, 3 unten) */
@media (min-width: 993px) {
    .founder-card:nth-child(1) { grid-column: 2 / span 2; }
    .founder-card:nth-child(2) { grid-column: 4 / span 2; }
    .founder-card:nth-child(3) { grid-column: 1 / span 2; }
    .founder-card:nth-child(4) { grid-column: 3 / span 2; }
    .founder-card:nth-child(5) { grid-column: 5 / span 2; }
}

/* Tablet (769px - 992px): 2 Spalten */
@media (min-width: 769px) and (max-width: 992px) {
    .founders-grid-equal {
        grid-template-columns: repeat(2, 1fr);
    }
    .founder-card {
        grid-column: auto !important;
    }
}

/* Mobile (< 768px): 1 Spalte */
@media (max-width: 768px) {
    .founders-grid-equal {
        grid-template-columns: 1fr;
    }
    .founder-card {
        grid-column: auto !important;
    }
}

/* ==========================================
   SPACIOUS ABOUT PAGE LAYOUT (1200PX MAX-WIDTH)
 ========================================== */

.about-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 4vw 80px 4vw;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Große, luftige Abschnitte */
.about-card-block {
    background: #ffffff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-card-block .block-badge {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-purple, #7c3aed);
    background: #F3E8FF;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.about-card-block h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main, #111827);
    margin: 0;
}

.about-card-block p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-muted, #4b5563);
    margin: 0;
}

/* Gründer-Grid im breiten 1200px Container */
.founders-grid-spacious {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
    width: 100%;
    margin-top: 12px;
}

/* Desktop: 2 oben zentriert (je 3 Spalten), 3 unten (je 2 Spalten) = breite, gleich große Kacheln */
@media (min-width: 993px) {
    .founders-grid-spacious .founder-card:nth-child(1) { grid-column: 2 / span 2; }
    .founders-grid-spacious .founder-card:nth-child(2) { grid-column: 4 / span 2; }
    .founders-grid-spacious .founder-card:nth-child(3) { grid-column: 1 / span 2; }
    .founders-grid-spacious .founder-card:nth-child(4) { grid-column: 3 / span 2; }
    .founders-grid-spacious .founder-card:nth-child(5) { grid-column: 5 / span 2; }
}

@media (min-width: 769px) and (max-width: 992px) {
    .founders-grid-spacious {
        grid-template-columns: repeat(2, 1fr);
    }
    .founders-grid-spacious .founder-card {
        grid-column: auto !important;
    }
}

@media (max-width: 768px) {
    .founders-grid-spacious {
        grid-template-columns: 1fr;
    }
    .founders-grid-spacious .founder-card {
        grid-column: auto !important;
    }
    .about-card-block {
        padding: 24px;
    }
}

/* ==========================================
   EXAKTE TYPOGRAFIE-HARMONISIERUNG NAVIGATION
========================================== */

/* Erzwingt exakt dieselbe Schriftgröße & Formatierung für Links und Dropdown-Buttons */
.app-navigation .nav-link,
.app-navigation .dropdown-toggle,
.app-navigation a.nav-link,
.app-navigation button.dropdown-toggle {
    font-family: 'Comfortaa', system-ui, -apple-system, sans-serif !important;
    font-size: 0.95rem !important; /* Exakt 0.95rem für Links und Buttons */
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--text-main, #111827) !important;
    
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    vertical-align: middle !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

/* Identischer Hover-Zustand */
.app-navigation .nav-link:hover,
.app-navigation .dropdown-toggle:hover {
    background: var(--bg-light, #f9fafb) !important;
    color: var(--accent-purple, #7c3aed) !important;
}

/* Kleine Ausrichtungskorrektur für den Pfeil in Dropdowns */
.app-navigation .dropdown-toggle .arrow {
    font-size: 0.75rem !important;
    line-height: 1 !important;
    display: inline-block !important;
    margin-top: 1px !important;
}

/* ==========================================
   PERFEKTE ANGLEICHUNG: LINKS & BUTTONS
========================================== */

/* Setzt Links (Übersicht/Pricing) und Dropdown-Buttons auf exakt dieselben Werte */
.app-navigation > a,
.app-navigation > .nav-dropdown > button,
.app-navigation .nav-link,
.app-navigation .dropdown-toggle {
    /* Typografie erzwingen */
    font-family: 'Comfortaa', system-ui, -apple-system, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: var(--text-main, #111827) !important;
    line-height: 1 !important;
    
    /* Feste Ausrichtung & identische Höhe */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    
    /* Browser-Resets für <button> */
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Font Rendering angleichen */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

/* Hover-Zustand */
.app-navigation > a:hover,
.app-navigation > .nav-dropdown > button:hover,
.app-navigation .nav-link:hover,
.app-navigation .dropdown-toggle:hover {
    background: var(--bg-light, #f9fafb) !important;
    color: var(--accent-purple, #7c3aed) !important;
}

/* Pfeil im Dropdown neutralisieren (damit er die Höhe nicht verändert) */
.app-navigation .dropdown-toggle .arrow {
    font-size: 11px !important;
    margin-left: 5px !important;
    display: inline-block !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

/* ==========================================
   MEGA MENU & BACKDROP BLUR
========================================== */

.app-header {
    position: relative;
    z-index: 1000;
}

/* 1. BACKDROP BLUR (Hintergrund-Unschärfe auf Desktop) */
@media (min-width: 1025px) {
    .app-header::after {
        content: '';
        position: fixed;
        top: 73px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(15, 23, 42, 0.35);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 990;
    }

    .app-header:has(.mega-dropdown:hover)::after {
        opacity: 1;
    }
}

/* 2. FULL-WIDTH CONTAINER & SAGE 2-SPALTEN GRID */
@media (min-width: 1025px) {
    .nav-dropdown.mega-dropdown {
        position: static;
    }

    .nav-dropdown.mega-dropdown .dropdown-menu.mega-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100vw;
        background: #ffffff;
        border-top: 1px solid var(--border-color, #f3f4f6);
        border-bottom: 1px solid var(--border-color, #e5e7eb);
        border-left: none;
        border-right: none;
        border-radius: 0;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        padding: 36px 0;
        z-index: 1000;
    }

    .mega-menu-inner.sage-layout {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 4vw;
        display: grid;
        grid-template-columns: 320px 1fr;
        gap: 48px;
        box-sizing: border-box;
    }
}

/* 3. LINKE SPALTE: SAGE NAV-ITEMS */
.mega-sidebar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid var(--border-color, #f3f4f6);
    padding-right: 24px;
}

.mega-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-muted, #4b5563);
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s ease;
    background: transparent;
}

.mega-nav-item .nav-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f3f4f6;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mega-nav-item .nav-arrow {
    margin-left: auto;
    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.2s ease;
    color: var(--accent-purple, #7c3aed);
}

/* Active / Hover Zustand der linken Navigationspunkte */
.mega-nav-item:hover,
.mega-nav-item.is-active {
    background: #F3E8FF !important;
    color: var(--accent-purple, #7c3aed) !important;
}

.mega-nav-item:hover .nav-item-icon,
.mega-nav-item.is-active .nav-item-icon {
    background: var(--accent-purple, #7c3aed);
    color: #ffffff;
}

.mega-nav-item:hover .nav-arrow,
.mega-nav-item.is-active .nav-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* 4. RECHTE SPALTE: DYNAMISCHES DETAIL PANEL */
.mega-detail-container {
    position: relative;
    display: flex;
    align-items: center;
}

.mega-detail-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    animation: fadeInSage 0.25s ease forwards;
}

.mega-detail-panel.is-active {
    display: flex;
}

@keyframes fadeInSage {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.panel-badge {
    align-self: flex-start;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-purple, #7c3aed);
    background: #F3E8FF;
    padding: 4px 10px;
    border-radius: 6px;
}

.mega-detail-panel h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main, #111827);
    margin: 0;
}

.mega-detail-panel p {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-muted, #4b5563);
    margin: 0;
    max-width: 600px;
}

.panel-highlights {
    list-style: none;
    padding: 0;
    margin: 8px 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.panel-highlights li {
    font-size: 0.88rem;
    color: var(--text-main, #111827);
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-highlights li::before {
    content: '✓';
    color: #10B981; /* Emerald Grün */
    font-weight: bold;
}

.panel-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-purple, #7c3aed);
    text-decoration: none;
    margin-top: 4px;
    transition: gap 0.2s ease;
}

.panel-cta:hover {
    text-decoration: underline;
}

/* ==========================================
   MOBILE NAVIGATION - PERFEKTE HARMONISIERUNG
========================================== */

@media (max-width: 1024px) {

    /* 1. Haupt-Navigationscontainer streckt alle Elemente auf 100% Breite */
    .app-navigation {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Zwingt alle Kinder auf 100% Breite */
        width: 100% !important;
        padding: 20px 16px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        text-align: left !important;
    }

    /* Container für Dropdowns auf 100% Breite */
    .app-navigation .nav-dropdown {
        width: 100% !important;
        margin: 0 !important;
    }

    /* 2. EXAKTE GLEICHBEHANDLUNG ALLER MENÜPUNKTE (Übersicht, Pricing, Dropdowns) */
    .app-navigation > a,
    .app-navigation .nav-link,
    .app-navigation .dropdown-toggle,
    .app-navigation .nav-dropdown > button {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important; /* Text links, Pfeil rechts */
        width: 100% !important;
        height: 46px !important; /* Einheitliche Button-Höhe */
        padding: 0 16px !important;
        margin: 0 !important;
        
        background: #f8fafc !important; /* Einheitlicher grauer Kachel-Hintergrund */
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        
        font-family: 'Comfortaa', system-ui, -apple-system, sans-serif !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: var(--text-main, #111827) !important;
        text-align: left !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    /* Hover / Touch-Zustand */
    .app-navigation > a:hover,
    .app-navigation .nav-link:hover,
    .app-navigation .dropdown-toggle:hover {
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
        color: var(--accent-purple, #7c3aed) !important;
    }

    /* Pfeile bei den Dropdowns ganz nach rechts rücken */
    .app-navigation .dropdown-toggle .arrow {
        font-size: 0.8rem !important;
        color: #6b7280 !important;
        margin-left: auto !important;
    }

    /* 3. Ausgeklappte Untermenüs sauber nach rechts einrücken */
    .nav-dropdown .dropdown-menu,
    .nav-dropdown.mega-dropdown .dropdown-menu.mega-menu {
        position: static !important;
        width: 100% !important;
        padding: 8px 0 4px 12px !important;
        margin: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .mega-sidebar {
        border-right: none !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .mega-nav-item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        border: 1px solid #f1f5f9 !important;
        font-size: 0.9rem !important;
        box-sizing: border-box !important;
    }

    /* 4. Logout-Button am Ende */
    .logout-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 46px !important;
        margin-top: 8px !important;
        padding: 0 16px !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: var(--text-muted, #4b5563) !important;
        box-sizing: border-box !important;
    }
}
/* ==========================================
   HAUPTSEITE BLUR BEI GEÖFFNETEM MEGA MENU
========================================== */

/* Weicher Übergang für den Hauptinhalt */
main {
    transition: filter 0.25s ease, opacity 0.25s ease;
}

/* Blurt und dunkelt <main> ab, sobald ein Mega-Dropdown im Header gehovert/aktiv ist */
body:has(.mega-dropdown:hover) main,
body:has(.mega-dropdown.is-active) main {
    filter: blur(6px);
    opacity: 0.5;
    pointer-events: none; /* Verhindert Klicks auf die Hauptseite, solange das Menü offen ist */
}

/* ==========================================
   UNSICHTBARE HOVER-BRÜCKE FÜR MEGA MENU
========================================== */

/* Baut eine transparente Trefferfläche über der grauen Trennlinie auf */
.nav-dropdown.mega-dropdown .dropdown-menu.mega-menu::before {
    content: '';
    position: absolute;
    top: -20px; /* Reicht 20px nach oben über die Trennlinie in den Header hinein */
    left: 0;
    right: 0;
    height: 20px;
    background: transparent; /* Unsichtbar für den Anwender */
    z-index: 1001;
}

/* ==========================================
   MOBILE MENÜ FIX (KACHELN & DETAIL-PANEL HIDE)
========================================== */

@media (max-width: 1024px) {

    /* 1. Rechter Desktop-Erklärungsbereich auf Mobilgeräten komplett ausblenden */
    .mega-detail-container,
    .app-navigation .mega-detail-container {
        display: none !important;
    }

    /* 2. Hauptcontainer richtet alle Menüpunkte linksbündig untereinander aus */
    .app-navigation {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        padding: 20px 16px !important;
        gap: 10px !important;
        box-sizing: border-box !important;
    }

    /* 3. Alle Hauptmenüpunkte (Übersicht, Pricing, Technologie, Solutions, Unternehmen) als Kacheln */
    .app-navigation > a,
    .app-navigation > .nav-link,
    .app-navigation .dropdown-toggle,
    .app-navigation .nav-dropdown > button {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 46px !important;
        padding: 0 16px !important;
        margin: 0 !important;
        
        background: #f8fafc !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        
        font-family: 'Comfortaa', system-ui, -apple-system, sans-serif !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: var(--text-main, #111827) !important;
        text-align: left !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    /* 4. Ausgeklappte Unterpunkte (Enterprise, Security, etc.) */
    .mega-menu-inner.sage-layout {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .mega-sidebar {
        border-right: none !important;
        padding: 6px 0 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .mega-nav-item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        border: 1px solid #f1f5f9 !important;
        font-size: 0.9rem !important;
        box-sizing: border-box !important;
    }

    /* 5. Logout Button Kachel */
    .logout-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 46px !important;
        margin-top: 6px !important;
        padding: 0 16px !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: var(--text-muted, #4b5563) !important;
        box-sizing: border-box !important;
    }
}
/* ==========================================
   MOBILE MENÜ FIX (SCHLIESS-LOGIK & KACHELN)
========================================== */

@media (max-width: 1024px) {

    /* 1. Rechter Desktop-Erklärungsbereich auf Mobilgeräten ausblenden */
    .mega-detail-container,
    .app-navigation .mega-detail-container {
        display: none !important;
    }

    /* 2. Menü standardmäßig ausblenden */
    .app-navigation {
        display: none !important;
    }

    /* 3. Menü nur einblenden, wenn die Klasse .is-open aktiv ist */
    .app-navigation.is-open {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        padding: 24px 28px !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    /* 4. Alle Hauptmenüpunkte bündig als Kacheln */
    .app-navigation > a,
    .app-navigation .nav-link,
    .app-navigation a.nav-link,
    .app-navigation .dropdown-toggle,
    .app-navigation .nav-dropdown > button {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        height: 46px !important;
        padding: 0 16px !important;
        margin: 0 !important;
        
        background: #f8fafc !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        
        font-family: 'Comfortaa', system-ui, -apple-system, sans-serif !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: var(--text-main, #2D3748) !important;
        text-align: left !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    .app-navigation > a:hover,
    .app-navigation .nav-link:hover,
    .app-navigation .dropdown-toggle:hover {
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
        color: var(--accent-purple, #A378C1) !important;
    }

    /* 5. Ausgeklappte Untermenüs */
    .mega-menu-inner.sage-layout {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    .mega-sidebar {
        border-right: none !important;
        padding: 6px 0 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .mega-nav-item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        border: 1px solid #f1f5f9 !important;
        font-size: 0.9rem !important;
        box-sizing: border-box !important;
    }

    /* 6. Logout-Button in Cosy-Grün */
    .app-navigation .logout-link,
    button.logout-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 46px !important;
        margin-top: 8px !important;
        padding: 0 16px !important;
        
        background: var(--cosymation-green, #50C878) !important;
        color: #ffffff !important;
        border: 1px solid var(--cosymation-green, #50C878) !important;
        border-radius: 10px !important;
        
        font-family: 'Comfortaa', system-ui, -apple-system, sans-serif !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        transition: opacity 0.2s ease, transform 0.2s ease !important;
    }

    .app-navigation .logout-link:hover {
        opacity: 0.92 !important;
        transform: translateY(-1px) !important;
    }
}
/* ==========================================
   MEGA MENU SIDEBAR LAYOUT SHIFT FIX
========================================== */

/* 1. Einheitliche Maße und Schrifteigenschaften für den Normalzustand */
.mega-nav-item {
    box-sizing: border-box !important;
    font-weight: 500 !important; /* Gleiche Schriftstärke in allen Zuständen */
    border: 1px solid transparent !important; /* Transparentes Border als Platzhalter */
    padding: 10px 14px !important;
    margin: 0 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

/* 2. Zustände :hover und .is-active verändern KEINE Maße mehr */
.mega-nav-item:hover,
.mega-nav-item.is-active {
    font-weight: 500 !important; /* Verhindert Textbreiten-Spannungen durch Fetschrift */
    padding: 10px 14px !important;
    margin: 0 !important;
    border-color: rgba(163, 120, 193, 0.2) !important; /* Nur Farbe ändern, keine Rahmenbreite */
}

/* 3. Icons und Pfeile in fixer Größe fixieren */
.mega-nav-item .nav-item-icon {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mega-nav-item .nav-arrow {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* ==========================================
   MEGA MENU LAYOUT SHIFT PERMANENT FIX
========================================== */

@media (min-width: 1025px) {

    /* 1. Haupt-Grid mit starr fixierter Sidebar-Spalte (260px) */
    .mega-menu-inner.sage-layout {
        display: grid !important;
        grid-template-columns: 260px 1fr !important;
        align-items: start !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2. Linke Sidebar auf exakt 260px Breite sperren */
    .mega-sidebar {
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        flex: 0 0 260px !important;
        box-sizing: border-box !important;
    }

    /* 3. Rechter Detail-Container mit fester Mindesthöhe gegen Höhen-Sprünge */
    .mega-detail-container {
        min-height: 280px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. Menüpunkte auf feste Höhe fixieren */
    .mega-nav-item {
        width: 100% !important;
        height: 44px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    /* 5. Verhindert Breite-Neuberechnungen durch Panels */
    .mega-detail-panel {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================
   MEGA MENU DETAIL-PANEL VISIBILITY & ALIGNMENT
========================================== */

/* 1. Alle Detail-Panels standardmäßig ausblenden */
.mega-detail-panel {
    display: none !important;
}

/* 2. Nur das aktive Panel einblenden und oben ausrichten */
.mega-detail-panel.is-active {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Vertikal oben verankert */
    align-items: flex-start !important;     /* Horizontal links ausgerichtet */
    text-align: left !important;
    margin-top: 0 !important;
}

/* 3. Detail-Container oben ausrichten */
.mega-detail-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* ==========================================
   MOBILE DROPDOWN & AKKORDEON LOGIK
========================================== */

@media (max-width: 1024px) {

    /* 1. Untermenüs auf Mobilgeräten standardmäßig einklappen */
    .app-navigation .dropdown-menu {
        display: none !important;
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        background: transparent !important;
        border: none !important;
        padding: 6px 0 4px 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. Untermenü einblenden, wenn die Hauptkachel angetippt wurde (.is-open) */
    .app-navigation .nav-dropdown.is-open > .dropdown-menu {
        display: block !important;
    }

    /* 3. Pfeil-Icon beim Öffnen drehen */
    .app-navigation .dropdown-toggle .arrow {
        transition: transform 0.2s ease !important;
        display: inline-block !important;
    }

    .app-navigation .nav-dropdown.is-open .dropdown-toggle .arrow {
        transform: rotate(180deg) !important;
    }

    /* 4. Unterpunkte im Mobil-Layout sauber kacheln */
    .app-navigation .mega-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .app-navigation .mega-nav-item {
        width: 100% !important;
        height: 42px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        padding: 0 12px !important;
    }
}

/* ==========================================================================
   OPTION B: ENTERPRISE DRAWER & 4 LOOK & FEEL ELEMENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   ELEMENT 2: Frosted Glass Header Layout
   -------------------------------------------------------------------------- */
#mainHeader.app-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 64px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(16px) -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 24px !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
}

.header-left, .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* --------------------------------------------------------------------------
   ELEMENT 1: Live Status Indicator (Pulsating Dot)
   -------------------------------------------------------------------------- */
.live-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(80, 200, 120, 0.08);
    border: 1px solid rgba(80, 200, 120, 0.25);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2E7D32;
}

.status-dot {
    width: 7px;
    height: 7px;
    background-color: #50C878;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(80, 200, 120, 0.7);
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(80, 200, 120, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(80, 200, 120, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(80, 200, 120, 0);
    }
}

/* --------------------------------------------------------------------------
   ELEMENT 4: Breadcrumbs
   -------------------------------------------------------------------------- */
.header-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #718096;
    margin-left: 8px;
    padding-left: 16px;
    border-left: 1px solid #E2E8F0;
}

.crumb-root {
    color: #4A5568;
    text-decoration: none;
    font-weight: 500;
}

.crumb-separator {
    color: #A0AEC0;
}

.crumb-item.is-active {
    color: #2D3748;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   ELEMENT 3: Enterprise Spec Badges
   -------------------------------------------------------------------------- */
.enterprise-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F7FAFC;
    border: 1px solid #E2E8F0;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4A5568;
}

/* --------------------------------------------------------------------------
   OPTION B: Drawer Toggle Button
   -------------------------------------------------------------------------- */
.drawer-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1A202C;
    color: #FFFFFF;
    border: none;
    padding: 8px 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.drawer-toggle-btn:hover {
    background: #2D3748;
    transform: translateY(-1px);
}

.toggle-icon {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 14px;
}

.toggle-icon span {
    display: block;
    height: 2px;
    background: #FFFFFF;
    border-radius: 2px;
}

.logout-btn-header {
    background: transparent;
    border: 1px solid #E2E8F0;
    color: #718096;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-btn-header:hover {
    background: #FFF5F5;
    color: #E53E3E;
    border-color: #FEB2B2;
}

/* --------------------------------------------------------------------------
   OPTION B: Slide-Over Drawer Overlay & Panel
   -------------------------------------------------------------------------- */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10000;
}

.drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.app-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 85vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    z-index: 10001;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-drawer.is-open {
    transform: translateX(0);
}

.drawer-header {
    padding: 20px 24px;
    border-bottom: 1px solid #EDF2F7;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drawer-subtitle {
    display: block;
    font-size: 0.75rem;
    color: #A0AEC0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.drawer-close-btn {
    background: #F7FAFC;
    border: 1px solid #E2E8F0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.9rem;
    cursor: pointer;
    color: #4A5568;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.drawer-close-btn:hover {
    background: #EDF2F7;
    color: #1A202C;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.drawer-group-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #A0AEC0;
    margin-bottom: 8px;
}

.drawer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s ease;
    margin-bottom: 2px;
}

.drawer-link:hover {
    background: rgba(80, 200, 120, 0.08);
}

.drawer-icon {
    width: 34px;
    height: 34px;
    background: #F7FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2D3748;
    flex-shrink: 0;
}

.drawer-link:hover .drawer-icon {
    background: #50C878;
    color: #FFFFFF;
    border-color: #50C878;
}

.link-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #2D3748;
}

.link-desc {
    display: block;
    font-size: 0.75rem;
    color: #718096;
}

.drawer-footer {
    padding: 20px 24px;
    border-top: 1px solid #EDF2F7;
    background: #F8FAFC;
}

.drawer-meta-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.mini-tag {
    font-size: 0.7rem;
    font-weight: 600;
    color: #718096;
    background: #EDF2F7;
    padding: 3px 8px;
    border-radius: 6px;
}

.drawer-logout-btn {
    width: 100%;
    height: 40px;
    background: #FFF5F5;
    color: #E53E3E;
    border: 1px solid #FEB2B2;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.drawer-logout-btn:hover {
    background: #FED7D7;
}

/* Responsive Feinschliff für Smartphones */
@media (max-width: 768px) {
    .header-breadcrumbs, .desktop-only {
        display: none !important;
    }
    .live-status-badge .status-text {
        display: none;
    }
    .live-status-badge {
        padding: 6px;
    }
}

/* ==========================================================================
   OPTION A: COMPACT DROPDOWN CARDS & 4 ENTERPRISE LOOK & FEEL ELEMENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   ELEMENT 2: Frosted Glass Header Layout
   -------------------------------------------------------------------------- */
#mainHeader.app-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 64px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 24px !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
}

.header-left, .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* --------------------------------------------------------------------------
   ELEMENT 1: Live Status Indicator (Pulsating Green Dot)
   -------------------------------------------------------------------------- */
.live-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(80, 200, 120, 0.08);
    border: 1px solid rgba(80, 200, 120, 0.25);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2E7D32;
}

.status-dot {
    width: 7px;
    height: 7px;
    background-color: #50C878;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(80, 200, 120, 0.7);
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(80, 200, 120, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(80, 200, 120, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(80, 200, 120, 0);
    }
}

/* --------------------------------------------------------------------------
   ELEMENT 4: Breadcrumbs Path Navigation
   -------------------------------------------------------------------------- */
.header-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #718096;
    margin-left: 8px;
    padding-left: 16px;
    border-left: 1px solid #E2E8F0;
}

.crumb-root {
    color: #4A5568;
    text-decoration: none;
    font-weight: 500;
}

.crumb-separator {
    color: #A0AEC0;
}

.crumb-item.is-active {
    color: #2D3748;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   ELEMENT 3: Enterprise Spec Badges
   -------------------------------------------------------------------------- */
.enterprise-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F7FAFC;
    border: 1px solid #E2E8F0;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4A5568;
}

/* --------------------------------------------------------------------------
   OPTION A: Navigation & Compact Floating Cards (Desktop)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    .app-navigation {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .nav-link, .dropdown-toggle {
        background: transparent;
        border: none;
        color: #4A5568;
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 600;
        padding: 8px 14px;
        border-radius: 8px;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.15s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .nav-link:hover, .dropdown-toggle:hover {
        background: #F7FAFC;
        color: #1A202C;
    }

    .nav-dropdown {
        position: relative !important;
    }

    /* Das eigentliche schwebende Dropdown-Card (Vercel/Stripe Style) */
    .compact-dropdown-card {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        width: 320px !important;
        background: rgba(255, 255, 255, 0.94) !important;
        backdrop-filter: blur(20px) -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.04) !important;
        padding: 8px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(6px) !important;
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
        z-index: 2000 !important;
        box-sizing: border-box !important;
    }

    .compact-dropdown-card.width-narrow {
        width: 280px !important;
    }

    /* Einblenden beim Hover über den Menüpunkt */
    .nav-dropdown:hover .compact-dropdown-card {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* Brücke gegen unbeabsichtigtes Schließen der Maus */
    .nav-dropdown::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 12px;
    }

    .dropdown-card-header {
        padding: 6px 10px 8px 10px;
        border-bottom: 1px solid #EDF2F7;
        margin-bottom: 6px;
    }

    .card-tag {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #A0AEC0;
    }

    .dropdown-card-links {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .card-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 10px;
        border-radius: 10px;
        text-decoration: none;
        transition: background 0.15s ease;
    }

    .card-link:hover {
        background: rgba(80, 200, 120, 0.08);
    }

    .card-icon {
        width: 30px;
        height: 30px;
        background: #F7FAFC;
        border: 1px solid #E2E8F0;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2D3748;
        flex-shrink: 0;
        transition: all 0.15s ease;
    }

    .card-link:hover .card-icon {
        background: #50C878;
        color: #FFFFFF;
        border-color: #50C878;
    }

    .link-title {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: #2D3748;
        line-height: 1.2;
    }

    .link-desc {
        display: block;
        font-size: 0.72rem;
        color: #718096;
        line-height: 1.2;
    }
}

.logout-btn-header {
    background: transparent;
    border: 1px solid #E2E8F0;
    color: #718096;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.logout-btn-header:hover {
    background: #FFF5F5;
    color: #E53E3E;
    border-color: #FEB2B2;
}

/* ==========================================================================
   HEADER & REFINED MOBILE MENU FIX
   ========================================================================== */

#mainHeader.app-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 64px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(16px) -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 24px !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
}

.header-left, .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* Status Indikator */
.live-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(80, 200, 120, 0.08);
    border: 1px solid rgba(80, 200, 120, 0.25);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2E7D32;
}

.status-dot {
    width: 7px;
    height: 7px;
    background-color: #50C878;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(80, 200, 120, 0.7);
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(80, 200, 120, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(80, 200, 120, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(80, 200, 120, 0); }
}

.enterprise-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #F7FAFC;
    border: 1px solid #E2E8F0;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4A5568;
}

/* DESKTOP STYLES (>= 1025px) */
@media (min-width: 1025px) {
    .app-navigation {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .nav-link, .dropdown-toggle {
        background: transparent;
        border: none;
        color: #4A5568;
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 600;
        padding: 8px 14px;
        border-radius: 8px;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.15s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .nav-link:hover, .dropdown-toggle:hover {
        background: #F7FAFC;
        color: #1A202C;
    }

    .nav-dropdown {
        position: relative !important;
    }

    .compact-dropdown-card {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        width: 320px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.12) !important;
        padding: 10px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(6px) !important;
        transition: all 0.2s ease !important;
        z-index: 2000 !important;
    }

    .compact-dropdown-card.width-narrow {
        width: 280px !important;
    }

    .nav-dropdown:hover .compact-dropdown-card {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    .nav-dropdown::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 12px;
    }

    .dropdown-card-header {
        padding: 4px 8px 8px 8px;
        border-bottom: 1px solid #EDF2F7;
        margin-bottom: 6px;
    }

    .card-tag {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #A0AEC0;
    }

    .dropdown-card-links {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .card-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        transition: background 0.15s ease !important;
    }

    .card-link:hover {
        background: rgba(80, 200, 120, 0.08) !important;
    }

    .card-icon {
        width: 32px !important;
        height: 32px !important;
        background: #F7FAFC !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #2D3748 !important;
        flex-shrink: 0 !important;
    }

    .card-link:hover .card-icon {
        background: #50C878 !important;
        color: #FFFFFF !important;
        border-color: #50C878 !important;
    }

    .link-title {
        display: block;
        font-size: 0.88rem;
        font-weight: 600;
        color: #2D3748;
    }

    .link-desc {
        display: block;
        font-size: 0.74rem;
        color: #718096;
    }

    .mobile-logout-btn {
        display: none !important;
    }
}

.logout-btn-header {
    background: transparent;
    border: 1px solid #E2E8F0;
    color: #718096;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

/* MOBILE ACCORDION REFINEMENT (<= 1024px) */
@media (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }

    .live-status-badge .status-text {
        display: none;
    }

    .app-navigation {
        display: none !important;
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 64px) !important;
        background: #FFFFFF !important;
        padding: 16px 20px 40px 20px !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
    }

    .app-navigation.is-open {
        display: flex !important;
    }

    .nav-link, .dropdown-toggle {
        width: 100% !important;
        height: 48px !important;
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 10px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-family: inherit !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: #1A202C !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    .dropdown-toggle .arrow {
        transition: transform 0.2s ease;
    }

    .nav-dropdown.is-open > .dropdown-toggle .arrow {
        transform: rotate(180deg);
    }

    /* Aufgeklappter Unterbereich */
    .compact-dropdown-card {
        display: none !important;
        padding: 8px 0 4px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .nav-dropdown.is-open .compact-dropdown-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .dropdown-card-header {
        display: none !important;
    }

    .dropdown-card-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .card-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 14px !important;
        background: #FFFFFF !important;
        border: 1px solid #EDF2F7 !important;
        border-radius: 10px !important;
        text-decoration: none !important;
    }

    .card-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        background: #F1F5F9 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #334155 !important;
    }

    .card-icon svg {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
    }

    .card-text {
        display: flex !important;
        flex-direction: column !important;
    }

    .link-title {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: #1E293B !important;
    }

    .link-desc {
        font-size: 0.78rem !important;
        color: #64748B !important;
    }

    .mobile-logout-btn {
        width: 100% !important;
        height: 44px !important;
        margin-top: 12px !important;
        background: #FFF5F5 !important;
        color: #E53E3E !important;
        border: 1px solid #FEB2B2 !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
    }
}

/* ==========================================================================
   CLEAN HEADER & NAVIGATION
   ========================================================================== */

#mainHeader.app-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 64px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(16px) -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 24px !important;
    z-index: 1000 !important;
    box-sizing: border-box !important;
}

.header-left, .header-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

/* DESKTOP STYLES (>= 1025px) */
@media (min-width: 1025px) {
    .app-navigation {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .nav-link, .dropdown-toggle {
        background: transparent;
        border: none;
        color: #4A5568;
        font-family: inherit;
        font-size: 0.88rem;
        font-weight: 600;
        padding: 8px 14px;
        border-radius: 8px;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.15s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap !important;
    }

    .nav-link:hover, .dropdown-toggle:hover {
        background: #F7FAFC;
        color: #1A202C;
    }

    .nav-dropdown {
        position: relative !important;
    }

    .compact-dropdown-card {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        width: 320px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(226, 232, 240, 0.9) !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.12) !important;
        padding: 10px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(6px) !important;
        transition: all 0.2s ease !important;
        z-index: 2000 !important;
    }

    .compact-dropdown-card.width-narrow {
        width: 280px !important;
    }

    .nav-dropdown:hover .compact-dropdown-card {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    .nav-dropdown::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 12px;
    }

    .dropdown-card-header {
        padding: 4px 8px 8px 8px;
        border-bottom: 1px solid #EDF2F7;
        margin-bottom: 6px;
    }

    .card-tag {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #A0AEC0;
    }

    .dropdown-card-links {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .card-link {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 8px 10px !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        transition: background 0.15s ease !important;
    }

    .card-link:hover {
        background: rgba(80, 200, 120, 0.08) !important;
    }

    .card-icon {
        width: 32px !important;
        height: 32px !important;
        background: #F7FAFC !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #2D3748 !important;
        flex-shrink: 0 !important;
    }

    .card-link:hover .card-icon {
        background: #50C878 !important;
        color: #FFFFFF !important;
        border-color: #50C878 !important;
    }

    .link-title {
        display: block;
        font-size: 0.88rem;
        font-weight: 600;
        color: #2D3748;
    }

    .link-desc {
        display: block;
        font-size: 0.74rem;
        color: #718096;
    }

    .mobile-logout-btn {
        display: none !important;
    }
}

.logout-btn-header {
    background: transparent;
    border: 1px solid #E2E8F0;
    color: #718096;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap !important;
}

/* MOBILE ACCORDION (<= 1024px) */
@media (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }

    .app-navigation {
        display: none !important;
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 64px) !important;
        background: #FFFFFF !important;
        padding: 16px 20px 40px 20px !important;
        overflow-y: auto !important;
        flex-direction: column !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
    }

    .app-navigation.is-open {
        display: flex !important;
    }

    .nav-link, .dropdown-toggle {
        width: 100% !important;
        height: 48px !important;
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 10px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-family: inherit !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        color: #1A202C !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    .dropdown-toggle .arrow {
        transition: transform 0.2s ease;
    }

    .nav-dropdown.is-open > .dropdown-toggle .arrow {
        transform: rotate(180deg);
    }

    .compact-dropdown-card {
        display: none !important;
        padding: 8px 0 4px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .nav-dropdown.is-open .compact-dropdown-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .dropdown-card-header {
        display: none !important;
    }

    .dropdown-card-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .card-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 10px 14px !important;
        background: #FFFFFF !important;
        border: 1px solid #EDF2F7 !important;
        border-radius: 10px !important;
        text-decoration: none !important;
    }

    .card-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        background: #F1F5F9 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #334155 !important;
    }

    .card-icon svg {
        width: 18px !important;
        height: 18px !important;
        display: block !important;
    }

    .card-text {
        display: flex !important;
        flex-direction: column !important;
    }

    .link-title {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: #1E293B !important;
    }

    .link-desc {
        font-size: 0.78rem !important;
        color: #64748B !important;
    }

    .mobile-logout-btn {
        width: 100% !important;
        height: 44px !important;
        margin-top: 12px !important;
        background: #FFF5F5 !important;
        color: #E53E3E !important;
        border: 1px solid #FEB2B2 !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
    }
}

/* ==========================================================================
   ACTIONS PAGE: SYSTEM-GRID FIX & ALTERNATING SECTION BACKGROUNDS
   ========================================================================== */

/* 1. System Grid Overlap Fix (FILE / File Handling) */
.system-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 20px !important;
    margin-top: 24px !important;
}

.system-grid > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 20px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    position: static !important;
}

.system-grid > div > span {
    position: static !important; /* Verhindert absolute Überlagerung */
    display: inline-block !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    color: #50C878 !important; /* Cosymation Grün */
    text-transform: uppercase !important;
    margin-bottom: 8px !important; /* Trennt Tag sauber von der Überschrift */
    line-height: 1 !important;
}

.system-grid > div > strong {
    display: block !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #1A202C !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
}

.system-grid > div > p {
    font-size: 0.88rem !important;
    color: #718096 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}


/* ==========================================================================
   GLOBAL ALTERNATING BACKGROUNDS (1. BLOCK DUNKEL, 2. HELL, 3. DUNKEL...)
   ========================================================================== */

/* Standard-Padding & Box-Sizing für alle Sektionen */
main > section,
.app-section {
    padding: 60px 24px !important;
    box-sizing: border-box !important;
}

/* 1., 3., 5., ... Block: Dunklerer Farbton (#F8FAFC) */
main > section:nth-of-type(odd),
.app-section:nth-of-type(odd) {
    background-color: #F8FAFC !important;
    border-top: 1px solid #EDF2F7 !important;
    border-bottom: 1px solid #EDF2F7 !important;
}

/* 2., 4., 6., ... Block: Hellerer Farbton (#FFFFFF) */
main > section:nth-of-type(even),
.app-section:nth-of-type(even) {
    background-color: #FFFFFF !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Inhaltskarten in dunklen Abschnitten auf Weiß setzen für optimalen Kontrast */
main > section:nth-of-type(odd) .action-card,
main > section:nth-of-type(odd) .feature-card,
main > section:nth-of-type(odd) .system-grid > div,
main > section:nth-of-type(odd) .integration-list > div {
    background-color: #FFFFFF !important;
}

/* ==========================================================================
   GLOBAL FONT OVERRIDE: COMFORTAA
   ========================================================================== */


/* Erzwingt Comfortaa auf ALLEN Elementen & Formularfeldern */
*,
*::before,
*::after,
html,
body,
input,
button,
select,
textarea,
h1, h2, h3, h4, h5, h6,
p, span, a, div, li, strong, small {
    font-family: 'Comfortaa', cursive, sans-serif !important;
}


/* ==========================================================================
   MINI-PFAD / EYEBROW BADGE FÜR SEITEN-ORIENTATION
   ========================================================================== */

/* 1. Aktiver Status im Header-Menü */
.dropdown-toggle.is-active-page,
.nav-link.is-active-page {
    color: #2E7D32 !important;
    background: rgba(80, 200, 120, 0.12) !important;
    border-radius: 8px !important;
}

.card-link.is-active-link {
    background: rgba(80, 200, 120, 0.1) !important;
    border-left: 3px solid #50C878 !important;
}

/* 2. Mini-Pfad Tag über der Hauptüberschrift (Eyebrow) */
.mini-path-badge,
.section-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
}

.mini-path-badge span.separator {
    color: #94A3B8 !important;
}

/* ==========================================================================
   GARANTIERTER FESTERS ABSTAND NACH LINKS (64px)
   ========================================================================== */

/* Für ALLE Sektionen der Website */
main > section {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding-left: 128px !important; /* <--- Drückt den gesamten Inhalt sauber 64px nach rechts */
    box-sizing: border-box !important;
}

/* Entfernt störende Gegen-Margins von inneren Elementen */
main > section > *,
.overview-cta > * {
    margin-left: 0 !important;
}



/* ==========================================================================
   GLOBAL HERO 2-COLUMN LAYOUT & GLASSMORPHIC CARDS WITH GREEN GLOW
   ========================================================================== */

/* 1. Hero-Bereiche flexibel auf 2 Spalten aufteilen */
main > section[class*="-hero"],
.actions-hero,
.overview-hero,
.platform-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Linke Inhaltsspalte */
.hero-content {
    flex: 1 1 55% !important;
}

/* Rechte Spalte für die Glassmorphic Card */
.hero-card-wrapper {
    flex: 0 0 380px !important;
    display: flex !important;
    justify-content: center !important;
}

/* 2. Glassmorphic Card mit grünem Schein (Green Glow) */
.hero-glass-card {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(80, 200, 120, 0.3) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 16px 36px rgba(80, 200, 120, 0.12), 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.hero-glass-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 22px 45px rgba(80, 200, 120, 0.22), 0 8px 24px rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(80, 200, 120, 0.6) !important;
}

/* Element-Styling innerhalb der Kacheln */
.glass-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #EDF2F7 !important;
}

.glass-card-title {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    color: #4A5568 !important;
    text-transform: uppercase !important;
}

.glass-card-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #2E7D32 !important;
    background: rgba(80, 200, 120, 0.12) !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
}

.glass-card-status::before {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    background-color: #50C878 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #50C878 !important;
}

.glass-node-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.glass-node-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
}

.glass-node-item strong {
    color: #1A202C !important;
}

.glass-node-item small {
    color: #718096 !important;
}

/* Responsive Verhalten */
@media (max-width: 992px) {
    main > section[class*="-hero"],
    .actions-hero,
    .overview-hero,
    .platform-hero {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .hero-card-wrapper {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}


/* ==========================================================================
   HERO 2-COLUMN FIX: NEBENEINANDER-LAYOUT ERZWINGEN
   ========================================================================== */

/* Spaltenansicht (Side-by-Side) für alle Hero-Sektionen aktivieren */
main > section[class*="-hero"],
.platform-hero,
.overview-hero,
.actions-hero,
.determinism-hero,
.orchestration-hero {
    display: flex !important;
    flex-direction: row !important; /* Richtet Text & Kachel nebeneinander aus */
    justify-content: space-between !important;
    align-items: center !important;
    gap: 48px !important;
}

/* Linke Text-Spalte auf maximale Lesebreite begrenzen */
.hero-content {
    flex: 1 1 auto !important;
    max-width: 620px !important;
}

/* Rechte Kachel-Spalte mit fester Breite rechts fixieren */
.hero-card-wrapper {
    flex: 0 0 380px !important;
    margin: 0 !important;
}

/* Nur auf Smartphones/Tablets untereinander stapeln */
@media (max-width: 992px) {
    main > section[class*="-hero"],
    .platform-hero,
    .overview-hero,
    .actions-hero,
    .determinism-hero,
    .orchestration-hero {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .hero-card-wrapper {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}


/* ==========================================================================
   ANIMATED HIGH-TECH HERO GRAPHICS (PULSE, FLOW & SCANNER)
   ========================================================================== */

/* 1. Pulsierender Live-Radar-Punkt */
.glass-card-status::before {
    content: '' !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #50C878 !important;
    border-radius: 50% !important;
    position: relative !important;
    animation: radarPulse 1.8s infinite ease-out !important;
}

@keyframes radarPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(80, 200, 120, 0.8);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(80, 200, 120, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(80, 200, 120, 0);
    }
}

/* 2. Vertikale Verbindungslinie mit fließendem Signal-Partikel */
.animated-pipeline {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding-left: 12px !important;
}

.animated-pipeline::before {
    content: '' !important;
    position: absolute !important;
    left: 27px !important;
    top: 20px !important;
    bottom: 20px !important;
    width: 2px !important;
    background: linear-gradient(180deg, #E2E8F0 0%, #50C878 50%, #E2E8F0 100%) !important;
    z-index: 1 !important;
}

/* Der fließende grüne Lichtpunkt entlang der Kette */
.animated-pipeline::after {
    content: '' !important;
    position: absolute !important;
    left: 25px !important;
    top: 15px !important;
    width: 6px !important;
    height: 12px !important;
    background: #50C878 !important;
    border-radius: 3px !important;
    box-shadow: 0 0 10px #50C878 !important;
    z-index: 2 !important;
    animation: dataFlow 2.8s infinite cubic-bezier(0.4, 0, 0.6, 1) !important;
}

@keyframes dataFlow {
    0% {
        top: 15px;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        top: calc(100% - 25px);
        opacity: 0;
    }
}

/* 3. Animierte Pipeline-Karten */
.pipeline-node {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    padding: 12px 16px 12px 14px !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.pipeline-node-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    border: 2px solid #CBD5E1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
    color: #64748B !important;
    margin-right: 12px !important;
    transition: all 0.3s ease !important;
}

/* Aktiver Schritt leuchtet auf */
.pipeline-node.is-active {
    border-color: rgba(80, 200, 120, 0.5) !important;
    box-shadow: 0 4px 12px rgba(80, 200, 120, 0.15) !important;
}

.pipeline-node.is-active .pipeline-node-icon {
    background: #50C878 !important;
    border-color: #50C878 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(80, 200, 120, 0.5) !important;
}

/* 4. Subtiler Laser-Scanline Effekt über die gesamte Kachel */
.hero-glass-card {
    position: relative !important;
    overflow: hidden !important;
}

.hero-glass-card::after {
    content: '' !important;
    position: absolute !important;
    top: -100% !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, transparent 0%, rgba(80, 200, 120, 0.05) 50%, transparent 100%) !important;
    animation: scanSweep 6s infinite linear !important;
    pointer-events: none !important;
}

@keyframes scanSweep {
    0% {
        top: -100%;
    }
    100% {
        top: 200%;
    }
}


/* ==========================================================================
   STARTSEITEN HERO GRAFIK: ANIMIERTE CORE-ARCHITEKTUR
   ========================================================================== */

.overview-live-graphic {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    padding: 8px 0 !important;
}

/* Knotenpunkte (CosyCenter, Station, Runner) */
.live-node {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
    z-index: 2 !important;
    transition: all 0.3s ease !important;
}

.live-node:hover {
    border-color: rgba(80, 200, 120, 0.6) !important;
    transform: translateX(4px) !important;
}

.live-node-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.node-num {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: #50C878 !important;
    background: rgba(80, 200, 120, 0.1) !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
}

.live-node strong {
    display: block !important;
    font-size: 0.85rem !important;
    color: #1E293B !important;
    line-height: 1.2 !important;
}

.live-node small {
    font-size: 0.7rem !important;
    color: #64748B !important;
}

/* Pulsierendes Signal-Licht pro Kachel */
.live-signal-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: #50C878 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #50C878 !important;
    animation: dotPulse 2s infinite ease-in-out !important;
}

@keyframes dotPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 12px #50C878; }
}

/* Verbindungslinien zwischen den Knoten */
.node-connector-line {
    height: 18px !important;
    width: 2px !important;
    background: #E2E8F0 !important;
    margin: 0 0 0 24px !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

/* Fließendes Lichtsignal auf der Verbindungslinie */
.connector-pulse {
    width: 100% !important;
    height: 8px !important;
    background: linear-gradient(180deg, transparent, #50C878, transparent) !important;
    position: absolute !important;
    top: -8px !important;
    animation: flowDown 1.8s infinite linear !important;
}

.connector-pulse.delay-1 {
    animation-delay: 0.9s !important;
}

@keyframes flowDown {
    0% { top: -8px; }
    100% { top: 100%; }
}

/* Metriken unterhalb der Grafik */
.hero-graphic-metrics {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    margin-top: 16px !important;
    padding-top: 12px !important;
    border-top: 1px dashed #E2E8F0 !important;
    background: rgba(248, 250, 252, 0.6) !important;
    border-radius: 10px !important;
    padding: 8px !important;
}

.metric-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.metric-label {
    font-size: 0.65rem !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.metric-value {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: #2E7D32 !important;
}

.metric-divider {
    width: 1px !important;
    height: 20px !important;
    background: #E2E8F0 !important;
}


/* ==========================================================================
   STARTSEITE: ANIMIERTER ICON-HUB (CONTROL / BUILD / EXECUTE)
   ========================================================================== */

.hero-icon-hub {
    position: relative !important;
    width: 340px !important;
    height: 340px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* SVG Verbindungsring */
.hub-svg-lines {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
}

.hub-svg-pulse {
    stroke-dasharray: 80 400 !important;
    animation: rotateHub 6s linear infinite !important;
    transform-origin: center !important;
}

@keyframes rotateHub {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Zentrale Glassmorphism-Kugel */
.hub-center-core {
    position: relative !important;
    z-index: 3 !important;
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border: 2px solid rgba(80, 200, 120, 0.4) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 30px rgba(80, 200, 120, 0.25) !important;
}

.core-glow-effect {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    background: #50C878 !important;
    opacity: 0.15 !important;
    filter: blur(12px) !important;
    animation: pulseCore 3s infinite ease-in-out !important;
}

@keyframes pulseCore {
    0%, 100% { transform: scale(1); opacity: 0.15; }
    50% { transform: scale(1.3); opacity: 0.3; }
}

.core-tag {
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    color: #2E7D32 !important;
    margin-top: 4px !important;
}

/* Schwebende Icon-Knoten */
.hub-node {
    position: absolute !important;
    z-index: 4 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    transition: transform 0.3s ease !important;
}

.hub-node:hover {
    transform: scale(1.1) !important;
}

/* Positionierung im Dreieck um das Zentrum */
.node-top { top: 0px; }
.node-right { bottom: 25px; right: 15px; }
.node-left { bottom: 25px; left: 15px; }

/* Gläserner Icon-Kreis */
.node-glass-circle {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06), 0 0 12px rgba(80, 200, 120, 0.15) !important;
    animation: floatNode 4s ease-in-out infinite !important;
}

.node-right .node-glass-circle { animation-delay: -1.3s !important; }
.node-left .node-glass-circle { animation-delay: -2.6s !important; }

@keyframes floatNode {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

/* Beschriftung unter den Icons */
.node-label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    letter-spacing: 0.5px !important;
    background: #FFFFFF !important;
    padding: 2px 10px !important;
    border-radius: 12px !important;
    border: 1px solid #F1F5F9 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

/* ==========================================================================
   GLOBAL HERO GRAPHICS STYLES FOR ALL PAGES
   ========================================================================== */

/* Basis Container für alle Seiten-Kacheln */
.hero-graphic-card {
    position: relative !important;
    width: 340px !important;
    height: 280px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(80, 200, 120, 0.3) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 16px 36px rgba(80, 200, 120, 0.12) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

/* 1. DETERMINISMUS: Parallel-Verification Check */
.determinism-verify-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.hash-match-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
}

/* 2. ORCHESTRIERUNG: Branching Tree Flow */
.tree-flow-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}
.tree-node-main {
    background: #50C878 !important;
    color: #FFF !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: bold !important;
}
.tree-branches {
    display: flex !important;
    gap: 16px !important;
    width: 100% !important;
    justify-content: center !important;
}
.tree-node-sub {
    background: #FFF !important;
    border: 1px solid #E2E8F0 !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 0.72rem !important;
    text-align: center !important;
    flex: 1 !important;
}

/* 3. SECURITY: Vault Perimeter */
.security-vault-circle {
    width: 120px !important;
    height: 120px !important;
    margin: 0 auto !important;
    border-radius: 50% !important;
    border: 2px stroke #50C878 !important;
    background: rgba(80, 200, 120, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 0 20px rgba(80, 200, 120, 0.2) !important;
}

/* 4. AUTOMATION: Loop Ring */
.automation-loop-icon {
    margin: auto !important;
    animation: rotateLoop 8s linear infinite !important;
}
@keyframes rotateLoop {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   HERO BREITEN-OPTIMIERUNG (MEHR PLATZ FÜR ÜBERSCHRIFTEN & TEXT)
   ========================================================================== */

/* 1. Hero-Sektionen Layout & Abstände neu ausrichten */
main > section[class*="-hero"],
.platform-hero,
.overview-hero,
.actions-hero,
.determinism-hero,
.orchestration-hero,
.pricing-hero,
.security-hero,
.about-hero,
.automation-hero,
.contact-hero,
.enterprise-hero,
.impressum-hero,
.datenschutz-hero {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 32px !important;
}

/* 2. Linke Textspalte deutlich weiter nach rechts ausdehnen */
.hero-content {
    flex: 1 1 auto !important;
    max-width: 850px !important; /* Gibt der Überschrift viel Platz zum Atmen */
}

/* 3. Rechte Grafiksäule auf kompakte 300px begrenzen */
.hero-card-wrapper {
    flex: 0 0 300px !important;
    width: 300px !important;
    margin-left: auto !important;
}

/* 4. Breiten aller Grafikkarten auf max. 300px anpassen */
.hero-graphic-card,
.hero-glass-card,
.actions-visual-card,
.actions-cascade-container {
    width: 300px !important;
    max-width: 300px !important;
}

.hero-icon-hub {
    width: 280px !important;
    height: 280px !important;
}

/* Optional: HTML-Zeilenumbrüche (<br>) in großen Überschriften auf Desktop auflösen */
@media (min-width: 993px) {
    .hero-content h1 br {
        display: none !important; /* Lässt den Text flüssig ohne harten Bruch durchlaufen */
    }
}
/* ZEILENUMBRÜCHE IN HERO-ÜBERSCHRIFTEN REAKTIVIEREN */
.hero-content h1 {
    display: block !important;
}

.hero-content h1 br {
    display: inline !important;
}

.hero-content h1 span {
    display: inline !important;
}

/* ==========================================================================
   HIGH-IMPACT ACTIONS HERO COMMAND CARD
   ========================================================================== */

.actions-command-card {
    width: 320px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(80, 200, 120, 0.4) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    box-shadow: 0 20px 45px rgba(80, 200, 120, 0.18), 0 4px 18px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

/* Header mit Status-Puls */
.command-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #EDF2F7 !important;
}

.command-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    color: #1E293B !important;
}

.cmd-pulse-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: #50C878 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px #50C878 !important;
    animation: cmdGlow 1.8s infinite ease-in-out !important;
}

@keyframes cmdGlow {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 14px #50C878; }
}

.cmd-badge {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    color: #2E7D32 !important;
    background: rgba(80, 200, 120, 0.12) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
}

/* 2x2 Grid der Action-Kacheln */
.action-core-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.action-tile {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 10px !important;
    transition: all 0.3s ease !important;
}

.action-tile.is-active {
    border-color: #50C878 !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%) !important;
    box-shadow: 0 4px 12px rgba(80, 200, 120, 0.15) !important;
}

.tile-head {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
}

.tile-tag {
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
}

.tile-body {
    font-size: 0.65rem !important;
    color: #64748B !important;
    line-height: 1.2 !important;
}

/* Live Terminal Output */
.action-console-box {
    background: #0F172A !important;
    border-radius: 12px !important;
    padding: 12px !important;
    font-family: 'Courier New', Courier, monospace !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.console-header {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.58rem !important;
    color: #64748B !important;
    font-weight: bold !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid #1E293B !important;
    padding-bottom: 4px !important;
}

.console-ms {
    color: #50C878 !important;
}

.console-line {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.68rem !important;
    margin-bottom: 4px !important;
    color: #94A3B8 !important;
}

.console-line.active-line {
    color: #F8FAFC !important;
}

.cmd-time {
    color: #64748B !important;
    font-size: 0.62rem !important;
}

.cmd-act {
    font-weight: bold !important;
}

.cmd-status.ok {
    color: #50C878 !important;
    font-weight: bold !important;
}

.cmd-status.running {
    color: #38BDF8 !important;
    font-weight: bold !important;
    animation: blinkText 1s infinite alternate !important;
}

@keyframes blinkText {
    from { opacity: 0.4; }
    to { opacity: 1; }
}

/* ==========================================================================
   EINHEITLICHER OBERER ABSTAND FÜR ALLE HERO-BEREICHE (STOPS PAGE JUMPING)
   ========================================================================== */

/* 1. Exakt gleicher Innenabstand nach oben für jede Unterseite */
main > section:first-of-type,
main > section[class*="-hero"],
.overview-hero,
.platform-hero,
.actions-hero,
.determinism-hero,
.orchestration-hero,
.pricing-hero,
.security-hero,
.about-hero,
.automation-hero,
.contact-hero,
.enterprise-hero,
.impressum-hero,
.datenschutz-hero {
    padding-top: 48px !important;     /* Fixer Abstand nach oben (exakt wie bei Über uns) */
    padding-bottom: 40px !important;
    margin-top: 0 !important;
    align-items: flex-start !important; /* Richtet Text & Kachel strikt an der gleichen Oberkante aus */
}

/* 2. Abweichende Abstände der inneren Container aufheben */
.hero-content,
.hero-card-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   HEADER LOGO STYLING
   ========================================================================== */

.brand-logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    padding: 0 !important;
}

.header-logo-img {
    height: 28px !important; /* Optimale Höhe für die Menüleiste */
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: opacity 0.2s ease !important;
}

.brand-logo:hover .header-logo-img {
    opacity: 0.85 !important;
}

.logo {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    cursor: default !important;
    user-select: none !important;
    text-decoration: none !important;
}

/* ==========================================================================
   PUBLIC LANDING PAGE HERO ALIGNMENT
   ========================================================================== */

.public-landing-hero {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 32px !important;
    padding-top: 48px !important;
    padding-bottom: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* FIX FÜR RIESEN-GRAFIK UND COSYMATION HUB CONTAINMENT */
.public-landing-hero {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 32px !important;
    padding-top: 48px !important;
    padding-bottom: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.hero-icon-hub {
    position: relative !important;
    width: 280px !important;
    height: 280px !important;
    max-width: 280px !important;
    max-height: 280px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.hub-svg-lines {
    position: absolute !important;
    width: 280px !important;
    height: 280px !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
}

.public-mark-circle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   AUTOMATION HERO CARD OPTIMIERUNG
   ========================================================================== */

.card-icon-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 0 !important;
}

.smooth-loop-icon {
    animation: smoothRotate 12s linear infinite !important;
    transform-origin: center !important;
}

@keyframes smoothRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   PLATFORM STACK ANIMATION (SCHWEBENDE ARCHITEKTUR-EBENEN)
   ========================================================================== */

.animated-stack-icon .stack-top {
    animation: stackFloatTop 3.5s ease-in-out infinite alternate !important;
}

.animated-stack-icon .stack-mid {
    animation: stackFloatMid 3.5s ease-in-out infinite alternate 0.3s !important;
}

.animated-stack-icon .stack-bot {
    animation: stackFloatBot 3.5s ease-in-out infinite alternate 0.6s !important;
}

@keyframes stackFloatTop {
    0% {
        transform: translateY(0);
        opacity: 0.75;
    }
    100% {
        transform: translateY(-3px);
        opacity: 1;
        stroke: #66BB6A;
    }
}

@keyframes stackFloatMid {
    0% {
        transform: translateY(0);
        opacity: 0.85;
    }
    100% {
        transform: translateY(-1.5px);
        opacity: 1;
    }
}

@keyframes stackFloatBot {
    0% {
        transform: translateY(0);
        opacity: 0.95;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* ==========================================================================
   DETERMINISM TARGET ANIMATION (PRECISION LOCK)
   ========================================================================== */

.animated-target-icon .target-outer {
    animation: targetRotate 12s linear infinite !important;
    transform-origin: center !important;
    stroke-dasharray: 40 4 !important;
}

.animated-target-icon .target-cross {
    animation: targetCrosshair 2.5s ease-in-out infinite alternate !important;
    transform-origin: center !important;
}

.animated-target-icon .target-core {
    animation: targetCoreLock 2s ease-in-out infinite alternate !important;
    transform-origin: center !important;
}

@keyframes targetRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes targetCrosshair {
    0% {
        opacity: 0.6;
        transform: scale(0.92);
    }
    100% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes targetCoreLock {
    0% {
        transform: scale(0.85);
        fill: rgba(80, 200, 120, 0);
    }
    100% {
        transform: scale(1.15);
        fill: rgba(80, 200, 120, 0.25);
    }
}

/* ==========================================================================
   ACTIONS ENGINE ANIMATION (POWER PULSE & GLOW)
   ========================================================================== */

.animated-action-icon .action-bolt {
    animation: actionPulse 2.2s ease-in-out infinite alternate !important;
    transform-origin: center !important;
}

@keyframes actionPulse {
    0% {
        transform: scale(0.94);
        opacity: 0.75;
        filter: drop-shadow(0 0 0px rgba(80, 200, 120, 0));
    }
    50% {
        transform: scale(1.06);
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(80, 200, 120, 0.7));
    }
    100% {
        transform: scale(0.98);
        opacity: 0.85;
        filter: drop-shadow(0 0 2px rgba(80, 200, 120, 0.3));
    }
}

/* ==========================================================================
   ORCHESTRATION RUNBOOK ANIMATION (SEQUENTIAL NODE FLOW)
   ========================================================================== */

.animated-orchestration-icon .orch-node {
    transform-origin: center !important;
}

.animated-orchestration-icon .node-1 {
    animation: nodePulse 3s ease-in-out infinite 0s !important;
}

.animated-orchestration-icon .node-2 {
    animation: nodePulse 3s ease-in-out infinite 1s !important;
}

.animated-orchestration-icon .node-3 {
    animation: nodePulse 3s ease-in-out infinite 2s !important;
}

.animated-orchestration-icon .orch-path {
    stroke-dasharray: 12 4 !important;
    animation: pathDashFlow 4s linear infinite !important;
}

@keyframes nodePulse {
    0%, 100% {
        transform: scale(1);
        fill: rgba(80, 200, 120, 0);
    }
    33% {
        transform: scale(1.3);
        fill: rgba(80, 200, 120, 0.4);
    }
}

@keyframes pathDashFlow {
    from {
        stroke-dashoffset: 32;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* ==========================================================================
   ENTERPRISE SECURITY ANIMATION (ZERO-TRUST SHIELD GLOW)
   ========================================================================== */

.animated-security-icon .shield-wall {
    animation: shieldProtect 3s ease-in-out infinite alternate !important;
    transform-origin: center !important;
}

.animated-security-icon .shield-core {
    animation: shieldCorePulse 2.5s ease-in-out infinite alternate !important;
    transform-origin: center !important;
}

@keyframes shieldProtect {
    0% {
        filter: drop-shadow(0 0 0px rgba(80, 200, 120, 0));
        fill: rgba(80, 200, 120, 0);
    }
    50% {
        filter: drop-shadow(0 0 8px rgba(80, 200, 120, 0.5));
        fill: rgba(80, 200, 120, 0.08);
    }
    100% {
        filter: drop-shadow(0 0 2px rgba(80, 200, 120, 0.2));
        fill: rgba(80, 200, 120, 0.02);
    }
}

@keyframes shieldCorePulse {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }
    100% {
        transform: scale(1.1);
        opacity: 1;
    }
}

/* ==========================================================================
   LOCK / COMPLIANCE ANIMATION (SECURE LOCK & KEYHOLE GLOW)
   ========================================================================== */

.animated-lock-icon .lock-shackle {
    animation: lockSnap 3.5s ease-in-out infinite alternate !important;
    transform-origin: center bottom !important;
}

.animated-lock-icon .lock-body {
    animation: lockBodyGlow 3.5s ease-in-out infinite alternate !important;
}

.animated-lock-icon .lock-keyhole {
    animation: keyholePulse 2s ease-in-out infinite alternate !important;
    transform-origin: center !important;
}

@keyframes lockSnap {
    0%, 25% {
        transform: translateY(0);
    }
    60%, 100% {
        transform: translateY(-2px);
    }
}

@keyframes lockBodyGlow {
    0% {
        fill: rgba(80, 200, 120, 0);
        filter: drop-shadow(0 0 0px rgba(80, 200, 120, 0));
    }
    100% {
        fill: rgba(80, 200, 120, 0.08);
        filter: drop-shadow(0 0 6px rgba(80, 200, 120, 0.4));
    }
}

@keyframes keyholePulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.6);
        opacity: 1;
    }
}

/* ==========================================================================
   PRICING / LICENSING ANIMATION (SWINGING TAG & HOLE GLOW)
   ========================================================================== */

.animated-pricing-icon .tag-body {
    animation: tagSwing 3.5s ease-in-out infinite alternate !important;
    transform-origin: 7px 7px !important;
}

.animated-pricing-icon .tag-hole {
    animation: holePulse 2s ease-in-out infinite alternate !important;
    transform-origin: 7px 7px !important;
}

@keyframes tagSwing {
    0% {
        transform: rotate(0deg);
        filter: drop-shadow(0 0 0px rgba(80, 200, 120, 0));
    }
    50% {
        transform: rotate(-4deg);
        filter: drop-shadow(0 0 6px rgba(80, 200, 120, 0.4));
    }
    100% {
        transform: rotate(3deg);
        filter: drop-shadow(0 0 2px rgba(80, 200, 120, 0.2));
    }
}

@keyframes holePulse {
    0% {
        opacity: 0.6;
        stroke-width: 2.5px;
    }
    100% {
        opacity: 1;
        stroke-width: 4px;
        stroke: #66BB6A;
    }
}

/* ==========================================================================
   ABOUT / ENTERPRISE ANIMATION (BUILDING LIGHTS & STRUCTURE GLOW)
   ========================================================================== */

.animated-about-icon .building-main,
.animated-about-icon .building-wing {
    animation: buildingGlow 3.5s ease-in-out infinite alternate !important;
}

.animated-about-icon .building-windows {
    animation: windowLights 2.5s ease-in-out infinite alternate !important;
}

@keyframes buildingGlow {
    0% {
        fill: rgba(80, 200, 120, 0);
        filter: drop-shadow(0 0 0px rgba(80, 200, 120, 0));
    }
    100% {
        fill: rgba(80, 200, 120, 0.08);
        filter: drop-shadow(0 0 6px rgba(80, 200, 120, 0.35));
    }
}

@keyframes windowLights {
    0% {
        opacity: 0.3;
        stroke: #50C878;
    }
    50% {
        opacity: 1;
        stroke: #81C784;
        filter: drop-shadow(0 0 4px rgba(80, 200, 120, 0.8));
    }
    100% {
        opacity: 0.5;
        stroke: #50C878;
    }
}


/* ==========================================================================
   CONTACT / MAIL ANIMATION (ENVELOPE FLOAT & SIGNAL GLOW)
   ========================================================================== */

.animated-contact-icon .mail-envelope {
    animation: mailFloat 3s ease-in-out infinite alternate !important;
    transform-origin: center !important;
}

.animated-contact-icon .mail-flap {
    animation: flapGlow 2.5s ease-in-out infinite alternate !important;
    transform-origin: center !important;
}

@keyframes mailFloat {
    0% {
        transform: translateY(0);
        fill: rgba(80, 200, 120, 0);
        filter: drop-shadow(0 0 0px rgba(80, 200, 120, 0));
    }
    100% {
        transform: translateY(-3px);
        fill: rgba(80, 200, 120, 0.08);
        filter: drop-shadow(0 0 6px rgba(80, 200, 120, 0.4));
    }
}

@keyframes flapGlow {
    0% {
        stroke: #50C878;
        opacity: 0.8;
    }
    100% {
        stroke: #81C784;
        opacity: 1;
        filter: drop-shadow(0 0 4px rgba(80, 200, 120, 0.7));
    }
}

/* ==========================================================================
   LEGAL / IMPRESSUM ANIMATION (DOCUMENT SCAN & GLOW)
   ========================================================================== */

.animated-legal-icon .doc-body {
    animation: docGlow 3.5s ease-in-out infinite alternate !important;
    transform-origin: center !important;
}

.animated-legal-icon .doc-corner {
    animation: cornerPulse 3s ease-in-out infinite alternate !important;
}

.animated-legal-icon .doc-lines {
    animation: linesScan 2.5s ease-in-out infinite alternate !important;
}

@keyframes docGlow {
    0% {
        fill: rgba(80, 200, 120, 0);
        filter: drop-shadow(0 0 0px rgba(80, 200, 120, 0));
    }
    100% {
        fill: rgba(80, 200, 120, 0.08);
        filter: drop-shadow(0 0 6px rgba(80, 200, 120, 0.4));
    }
}

@keyframes cornerPulse {
    0% {
        opacity: 0.7;
        stroke: #50C878;
    }
    100% {
        opacity: 1;
        stroke: #81C784;
        filter: drop-shadow(0 0 4px rgba(80, 200, 120, 0.6));
    }
}

@keyframes linesScan {
    0% {
        opacity: 0.5;
        stroke: #50C878;
    }
    100% {
        opacity: 1;
        stroke: #81C784;
        filter: drop-shadow(0 0 3px rgba(80, 200, 120, 0.7));
    }
}

/* ==========================================================================
   PRIVACY / DATENSCHUTZ ANIMATION (SHIELD PROTECTION & CHECK GLOW)
   ========================================================================== */

.animated-privacy-icon .shield-wall {
    animation: privacyShieldGlow 3s ease-in-out infinite alternate !important;
    transform-origin: center !important;
}

.animated-privacy-icon .shield-check {
    animation: checkmarkPulse 2.5s ease-in-out infinite alternate !important;
    transform-origin: center !important;
}

@keyframes privacyShieldGlow {
    0% {
        fill: rgba(80, 200, 120, 0);
        filter: drop-shadow(0 0 0px rgba(80, 200, 120, 0));
    }
    100% {
        fill: rgba(80, 200, 120, 0.08);
        filter: drop-shadow(0 0 6px rgba(80, 200, 120, 0.4));
    }
}

@keyframes checkmarkPulse {
    0% {
        transform: scale(0.92);
        opacity: 0.7;
        stroke: #50C878;
    }
    100% {
        transform: scale(1.08);
        opacity: 1;
        stroke: #81C784;
        filter: drop-shadow(0 0 4px rgba(80, 200, 120, 0.8));
    }
}

/* ==========================================================================
   HERO QUOTE CARD (OVERVIEW HERO)
   ========================================================================== */

.quote-glass-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
}

.quote-glass-card::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(80, 200, 120, 0.18) 0%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.quote-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.25rem 0;
}

.quote-icon {
    filter: drop-shadow(0 0 8px rgba(80, 200, 120, 0.4));
    animation: quotePulse 3s ease-in-out infinite alternate;
}

.quote-content blockquote {
    margin: 0;
    font-family: 'Comfortaa', system-ui, -apple-system, sans-serif;
    font-size: 1.05rem;
    line-height: 1.65;
    font-weight: 400;
    color: #97999c;
    letter-spacing: -0.01em;
}

.quote-content blockquote span {
    color: #50C878;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(80, 200, 120, 0.35);
}

@keyframes quotePulse {
    0% {
        opacity: 0.7;
        transform: scale(0.96);
        filter: drop-shadow(0 0 4px rgba(80, 200, 120, 0.3));
    }
    100% {
        opacity: 1;
        transform: scale(1.04);
        filter: drop-shadow(0 0 12px rgba(80, 200, 120, 0.7));
    }
}

/* ==========================================================================
   FEATURE GLASS BOXES (MID-SECTION BREAK)
   ========================================================================== */

.feature-intro-grid {
    align-items: center;
    gap: 3rem;
}

.feature-glass-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.feature-glass-box:hover {
    border-color: rgba(80, 200, 120, 0.3);
    transform: translateY(-2px);
}

.feature-box-header {
    margin-bottom: 1.5rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.box-tag {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #50C878;
    background: rgba(80, 200, 120, 0.1);
    border: 1px solid rgba(80, 200, 120, 0.25);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
padding-top: 0.75rem; /* Schiebt den ersten Bulletpoint weiter nach unten */
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.feature-list li svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    filter: drop-shadow(0 0 4px rgba(80, 200, 120, 0.4));
}

.feature-list li div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.feature-list li strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: #6D8196;
}

.feature-list li span {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}

@media (max-width: 900px) {
    .feature-intro-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ==========================================================================
   PRICING LIGHT BACKGROUND TEXT FIX (BANNER & TABLE)
   ========================================================================== */

/* 1. Infrastructure Banner Text */
.pricing-infrastructure-banner,
.pricing-infrastructure-banner p,
.pricing-infrastructure-banner span {
    color: #1E293B !important; /* Dunkelgrau / Anthrazit */
}

.pricing-infrastructure-banner strong {
    color: #0F172A !important; /* Kräftigeres Dunkelgrau für Hervorhebungen */
}

/* 2. Vergleichstabelle - Spalten-Texte & Merkmale */
.pricing-comparison-table td,
.pricing-comparison-table th,
.table-feature-title,
.table-cell-text {
    color: #1E293B !important;
}

/* Dezentere Hilfstexte / Einheiten in der Tabelle (z. B. "1 Station / Runner inkl.") */
.pricing-comparison-table small,
.pricing-comparison-table .text-muted {
    color: #64748B !important;
}

/* Kategorie-Überschriften in der Tabelle (z. B. KAPAZITÄT & AUSFÜHRUNG) */
.pricing-comparison-table .category-row td,
.table-category-title {
    color: #2E7D32 !important; /* Dunkleres Grün für bessere Lesbarkeit */
    font-weight: 700;
}

/* ==========================================================================
   PRICING PAGE - FINE TUNING (BANNER, TABLE HEADERS & ALIGNMENT)
   ========================================================================== */

/* 1. Basis-Infrastruktur Banner Text lesbar machen */
.pricing-infrastructure-banner,
.pricing-infrastructure-banner p,
.pricing-infrastructure-banner span,
.pricing-infrastructure-banner div {
    color: #1E293B !important;
}

.pricing-infrastructure-banner strong {
    color: #0F172A !important;
}


/* 2. Spaltentitel der Tabelle auf Weiß setzen (für dunkle Header-Zellen) */
.pricing-comparison-table thead th {
    color: #FFFFFF !important;
}

/* Spezialfall: Hervorgehobene Spalte (Cosymation M) mit hellem Hintergrund */
.pricing-comparison-table thead th.featured-col,
.pricing-comparison-table thead th:nth-child(3) {
    color: #1E293B !important;
}


/* 3. Überschrift & COMPARE-Pille linksbündig zur Tabelle ausrichten */
.pricing-comparison-section .section-label,
.pricing-comparison-section .card-badge,
.pricing-comparison-header .section-label {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.pricing-comparison-section,
.pricing-comparison-header {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.pricing-comparison-section h2 {
    text-align: left !important;
}

/* ==========================================================================
   PRICING TABLE SECTION (ALIGNMENT, CONTRAST & TYPOGRAPHY)
   ========================================================================== */

/* 1. Sektions-Container & Linksbündiger Header */
.pricing-table-section {
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pricing-table-header {
    text-align: left;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.pricing-table-header .section-label {
    margin-left: 0;
    margin-right: auto;
    margin-bottom: 0.75rem;
}

.pricing-table-header h2 {
    text-align: left;
    margin: 0;
}

/* 2. Tabellen-Wrapper & Glas-Optik */
.pricing-table-wrapper {
    width: 100%;
    overflow-x: auto;
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.pricing-comparison-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-family: system-ui, -apple-system, sans-serif;
}

/* 3. Tabellenkopf (Spaltentitel durchgehend WEISS) */
.pricing-comparison-table thead tr {
    background-color: #2D3748;
}

.pricing-comparison-table thead th {
    padding: 1.25rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #FFFFFF !important; /* Spaltentitel immer weiß */
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.pricing-comparison-table thead th.feature-col {
    text-align: left;
    padding-left: 1.5rem;
    width: 35%;
}

.pricing-comparison-table thead th.highlight-col {
    background-color: #1E293B; /* Abgehobener dunkler Ton für M */
    color: #FFFFFF !important;
    border-top: 3px solid #50C878;
}

/* 4. Tabelleninhalt & Lesbare Farben */
.pricing-comparison-table tbody tr {
    border-bottom: 1px solid #E2E8F0;
    transition: background-color 0.2s ease;
}

.pricing-comparison-table tbody tr:hover {
    background-color: #F8FAFC;
}

.pricing-comparison-table tbody td {
    padding: 1rem;
    font-size: 0.9rem;
    color: #334155 !important; /* Gut lesbares Dunkelgrau */
    vertical-align: middle;
}

.pricing-comparison-table td.feature-title {
    text-align: left;
    padding-left: 1.5rem;
    font-weight: 500;
    color: #0F172A !important; /* Kräftiges Dunkelgrau für Features */
}

/* 5. Kategorie-Zeilen (KAPAZITÄT, PLATTFORM, VERTRAG) */
.pricing-comparison-table tr.category-row td {
    background-color: rgba(80, 200, 120, 0.08);
    color: #2E7D32 !important; /* Dunkles Grün für Barrierefreiheit */
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    padding: 0.85rem 1.5rem;
    border-top: 1px solid rgba(80, 200, 120, 0.2);
    border-bottom: 1px solid rgba(80, 200, 120, 0.2);
}

/* 6. Icons & Badges in der Tabelle */
.pricing-comparison-table .check-icon {
    color: #2E7D32 !important;
    font-weight: bold;
    font-size: 1.1rem;
}

.pricing-comparison-table .dash-icon {
    color: #94A3B8 !important;
    font-size: 1.1rem;
}

.pricing-comparison-table .badge-included {
    display: inline-block;
    background-color: rgba(80, 200, 120, 0.15);
    color: #2E7D32 !important;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(80, 200, 120, 0.3);
}

/* Hervorgehobene Spalte (Cosymation M Body) */
.pricing-comparison-table td.highlight-col,
.pricing-comparison-table tbody td:nth-child(3) {
    background-color: rgba(80, 200, 120, 0.02);
}

/* ==========================================================================
   PRICING TEXT FARBANPASSUNGEN (COSY-GRÜN & LESBARKEIT)
   ========================================================================== */

/* 1. "Hinweis zur Mehrbenutzer-Infrastruktur:" im Cosy-Grün */
.pricing-infrastructure-note strong,
.infrastructure-notice-title,
.rds-note-title,
.pricing-note h4,
.pricing-note strong {
    color: #2E7D32 !important; /* Cosy-Grün (dunklerer Ton für optimale Lesbarkeit auf hellem Grund) */
    font-weight: 700;
}

/* Falls die Note auf dunklem Grund liegt, alternativ das leuchtende Emerald-Grün: */
/* color: #50C878 !important; */

/* 2. Banner-Text für das zentrale CosyCenter im Cosy-Grün */
.pricing-infrastructure-banner,
.pricing-infrastructure-banner p,
.pricing-infrastructure-banner span {
    color: #2E7D32 !important; /* Cosy-Grün */
    font-weight: 500;
}

.pricing-infrastructure-banner strong {
    color: #1b5e20 !important; /* Etwas kräftigeres Grün für die Zahlen/Hervorhebungen */
    font-weight: 700;
}

/* ==========================================================================
   COSY-GRÜN TEXT UTILITY
   ========================================================================== */

/* Für dunkles, sehr gut lesbares Grün */
.text-cosy-green {
    color: #2E7D32 !important;
}

/* Für leuchtendes Smaragd-Grün (falls dunkler Hintergrund) */
.text-cosy-emerald {
    color: #50C878 !important;
}

/* ==========================================================================
   BASIS INFRASTRUKTUR BANNER (GLASS CARD WITH LILA PILL)
   ========================================================================== */

.pricing-infrastructure-section {
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto 3rem auto;
    padding: 0 1.5rem;
}

.pricing-infrastructure-banner {
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-left: 4px solid #7E22CE; /* Akzentlinie in Lila */
    border-radius: 16px;
    padding: 1.25rem 1.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Lila Pill (Passend zu den Pricing-Cards) */
.purple-pill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background: #F3E8FF;
    color: #7E22CE;
    border: 1px solid #E9D5FF;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    flex-shrink: 0;
}

/* Banner Text Style */
.banner-text {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #334155 !important; /* Dunkelgrau für optimale Lesbarkeit */
}

.banner-text strong {
    color: #0F172A !important;
    font-weight: 700;
}

.banner-text em {
    font-style: normal;
    color: #7E22CE !important;
    font-weight: 600;
}

/* Responsive Anpassung für Mobilgeräte */
@media (max-width: 768px) {
    .pricing-infrastructure-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
        padding: 1.25rem;
    }
}

.pricing-infrastructure-banner {
    width: 100%;
    max-width: 1200px;
    margin: 2.5rem auto 0 auto;
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-left: 4px solid #7E22CE;
    border-radius: 16px;
    padding: 1.25rem 1.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    box-sizing: border-box;
}

/* ==========================================================================
   CALCULATOR MODAL & UI FIX (HIGH SPECIFICITY)
   ========================================================================== */

/* 1. Modal Overlay & Container */
#calculatorModal.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

#calculatorModal.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

#calculatorModal .modal-container {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 2rem 2.25rem;
    max-width: 880px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
}

#calculatorModal .modal-close-btn {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: #F1F5F9;
    border: none;
    color: #64748B;
    font-size: 1.25rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}

#calculatorModal .modal-close-btn:hover {
    background: #E2E8F0;
    color: #0F172A;
}

/* 2. Header Bereich */
#calculatorModal .calculator-header {
    text-align: left;
    margin-bottom: 1.75rem;
    padding-right: 2rem;
}

#calculatorModal .calculator-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0.5rem 0 0.35rem 0;
    line-height: 1.25;
}

#calculatorModal .calculator-header p {
    color: #64748B;
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.5;
}

/* 3. Zweispaltiges Layout */
#calculatorModal .calculator-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    align-items: stretch;
    box-sizing: border-box;
}

/* 4. Linke Spalte (Eingaben) */
#calculatorModal .calculator-inputs {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

#calculatorModal .input-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

#calculatorModal .input-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.15rem;
}

#calculatorModal .input-group label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #1E293B;
    margin: 0;
}

#calculatorModal .input-value-badge {
    background: #E8F5E9;
    color: #2E7D32;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
}

/* Custom Styled Range Sliders */
#calculatorModal .calc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    outline: none;
    margin: 0.4rem 0 0.2rem 0;
    box-shadow: none;
    border: none;
}

#calculatorModal .calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2E7D32;
    cursor: pointer;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease;
}

#calculatorModal .calc-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

#calculatorModal .slider-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #94A3B8;
    margin-top: 0.1rem;
}

/* Custom Dropdown Select */
#calculatorModal .calc-select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #CBD5E1;
    background: #F8FAFC;
    color: #0F172A;
    font-size: 0.85rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
}

#calculatorModal .calc-select:focus {
    border-color: #2E7D32;
}

#calculatorModal .calc-note-text {
    font-size: 0.72rem;
    color: #64748B;
    margin-top: 0.25rem;
    line-height: 1.35;
    display: block;
}

/* 5. Rechte Spalte (Ergebnis-Karte) */
#calculatorModal .calculator-result-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

#calculatorModal .result-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #2E7D32;
    margin-bottom: 0.25rem;
}

#calculatorModal .recommended-setup-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

#calculatorModal .recommended-setup-desc {
    font-size: 0.8rem;
    color: #64748B;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

#calculatorModal .result-divider {
    border: 0;
    border-top: 1px solid #E2E8F0;
    margin: 0 0 1rem 0;
}

#calculatorModal .metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

#calculatorModal .metric-item {
    display: flex;
    flex-direction: column;
}

#calculatorModal .metric-label {
    font-size: 0.7rem;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#calculatorModal .metric-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1E293B;
    margin-top: 0.1rem;
}

#calculatorModal .price-summary-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 0.85rem;
    text-align: center;
    margin-bottom: 1rem;
}

#calculatorModal .total-price-label {
    font-size: 0.75rem;
    color: #64748B;
}

#calculatorModal .total-price-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0.1rem 0;
}

#calculatorModal .unit-cost-badge {
    display: inline-block;
    background: #E8F5E9;
    color: #2E7D32;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin-top: 0.25rem;
}

#calculatorModal .calculator-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #2E7D32;
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 0.88rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.15s ease;
    box-sizing: border-box;
    border: none;
    cursor: pointer;
}

#calculatorModal .calculator-cta-button:hover {
    background: #1b5e20;
    transform: translateY(-1px);
}

/* Responsive Collapse für schmale Bildschirme */
@media (max-width: 768px) {
    #calculatorModal .calculator-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    #calculatorModal .modal-container {
        padding: 1.25rem;
    }
}

/* ==========================================================================
   CALCULATOR TRIGGER BUTTON FIX
   ========================================================================== */

.calc-trigger-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 2rem auto 1.5rem auto !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
}

button.calc-open-button,
.calc-open-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    background: #FFFFFF !important;
    color: #2E7D32 !important;
    border: 2px solid #2E7D32 !important;
    padding: 0.85rem 1.85rem !important;
    border-radius: 999px !important;
    font-family: 'Comfortaa', system-ui, -apple-system, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.12) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

button.calc-open-button:hover,
.calc-open-button:hover {
    background: #2E7D32 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(46, 125, 50, 0.25) !important;
}

.calc-btn-icon {
    font-size: 1.1rem !important;
}

.calc-btn-arrow {
    display: inline-block !important;
    transition: transform 0.2s ease !important;
}

button.calc-open-button:hover .calc-btn-arrow,
.calc-open-button:hover .calc-btn-arrow {
    transform: translateX(4px) !important;
}


/* ==========================================================================
   BANNER INTEGRATION & NOTES CARD FIX
   ========================================================================== */

/* 1. Basis-Infrastruktur Banner mit integriertem Button */
.pricing-infrastructure-banner {
    width: 100%;
    max-width: 1200px;
    margin: 2.5rem auto 0 auto;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-left: 4px solid #7E22CE;
    border-radius: 16px;
    padding: 1.25rem 1.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    box-sizing: border-box;
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
}

.banner-action {
    flex-shrink: 0;
}

/* Kompakter Trigger Button im Banner */
button.calc-open-button,
.calc-open-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    background: #2E7D32 !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 0.75rem 1.35rem !important;
    border-radius: 10px !important;
    font-family: 'Comfortaa', system-ui, -apple-system, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.2) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

button.calc-open-button:hover,
.calc-open-button:hover {
    background: #1b5e20 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(46, 125, 50, 0.3) !important;
}

.calc-btn-arrow {
    display: inline-block !important;
    transition: transform 0.2s ease !important;
}

button.calc-open-button:hover .calc-btn-arrow {
    transform: translateX(3px) !important;
}

/* 2. Formatierte Hinweise & Fußnoten Karte */
.pricing-notes-card {
    width: 100%;
    max-width: 1200px;
    margin: 1.75rem auto 0 auto;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: left;
}

.pricing-infrastructure-note {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #475569;
}

.pricing-infrastructure-note strong {
    color: #2E7D32;
    font-weight: 700;
    display: inline;
    margin-right: 0.35rem;
}

.pricing-tax-note {
    font-size: 0.78rem;
    color: #94A3B8;
    border-top: 1px solid #E2E8F0;
    padding-top: 0.6rem;
}

/* Responsive Umbruch für Banner */
@media (max-width: 900px) {
    .pricing-infrastructure-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }
    .banner-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .banner-action {
        width: 100%;
    }
    button.calc-open-button,
    .calc-open-button {
        width: 100% !important;
    }
}

/* ==========================================================================
   GREEN GLASS TRIGGER BUTTON WITH ! ICON
   ========================================================================== */

button.calc-open-button,
.calc-open-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    
    /* Green Glassmorphism Hintergrund & Rahmen */
    background: rgba(46, 125, 50, 0.06) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1.5px solid rgba(46, 125, 50, 0.35) !important;
    border-radius: 999px !important;
    
    padding: 0.65rem 1.35rem !important;
    color: #2E7D32 !important;
    font-family: 'Comfortaa', system-ui, -apple-system, sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(46, 125, 50, 0.08) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
    outline: none !important;
    margin: 0 !important;
}

/* Hover State */
button.calc-open-button:hover,
.calc-open-button:hover {
    background: rgba(46, 125, 50, 0.12) !important;
    border-color: #2E7D32 !important;
    color: #1B5E20 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.18) !important;
}

/* Grünes Ausrufezeichen Badge */
.calc-btn-icon-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: rgba(46, 125, 50, 0.15) !important;
    color: #2E7D32 !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    transition: background 0.2s ease !important;
}

button.calc-open-button:hover .calc-btn-icon-badge {
    background: rgba(46, 125, 50, 0.25) !important;
}

/* Erzwingt grüne Schriftfarbe auf allen inneren Spans */
button.calc-open-button span,
.calc-open-button span {
    color: #2E7D32 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

button.calc-open-button:hover span,
.calc-open-button:hover span {
    color: #1B5E20 !important;
}

.calc-btn-arrow {
    transition: transform 0.2s ease !important;
}

button.calc-open-button:hover .calc-btn-arrow {
    transform: translateX(3px) !important;
}


/* ==========================================================================
   PERFEKTE HERO-AUSRICHTUNG (BÜNDIG MIT 8vw SEITENRASTER)
   ========================================================================== */

/* 1. TEXT-BEREICH: Badge, H1 und P IMMER strikt untereinander anordnen */
.hero-content,
.hero-left,
.hero-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !start;
    text-align: left !important;
    width: 100% !important;
    max-width: 680px !important;
}

.hero-content > *,
.hero-left > *,
.hero-text > * {
    margin-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
}

/* 2. DESKTOP (Ab 1025px): Exakt 8vw Seitenabstand – 100% bündig mit allen Folge-Abschnitten */
@media (min-width: 1025px) {
    main > section[class*="hero"],
    section[class*="hero"],
    .overview-hero,
    .automation-hero,
    .pricing-hero,
    .technology-hero,
    .platform-hero,
    .solutions-hero,
    .actions-hero,
    .hero-section {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 48px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 80px 8vw 60px 8vw !important; /* Exakt dasselbe 8vw-Raster wie der Rest der Seite */
        box-sizing: border-box !important;
    }

    .hero-content,
    .hero-left {
        flex: 1 1 55% !important;
    }

    .hero-card-wrapper,
    .hero-right {
        flex: 0 0 380px !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    .hero-glass-card,
    .quote-glass-card {
        width: 100% !important;
        max-width: 380px !important;
    }
}

/* 3. TABLET & MOBILE (Bis 1024px: Synchron mit Hamburger-Menü untereinander stapeln) */
@media (max-width: 1024px) {
    main > section[class*="hero"],
    section[class*="hero"],
    .overview-hero,
    .automation-hero,
    .pricing-hero,
    .technology-hero,
    .platform-hero,
    .solutions-hero,
    .actions-hero,
    .hero-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 30px !important;
        padding: 60px 8vw !important;
        box-sizing: border-box !important;
    }

    .hero-content,
    .hero-card-wrapper,
    .hero-left,
    .hero-right {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-card-wrapper,
    .hero-right {
        display: flex !important;
        justify-content: center !important;
    }

    .hero-glass-card,
    .quote-glass-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   LANGUAGE SWITCHER (FROSTED GLASS LOOK)
   ========================================================================== */

.lang-switch {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(247, 250, 252, 0.85) !important;
    border: 1px solid #E2E8F0 !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
}

.lang-btn {
    color: #718096 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    cursor: pointer !important;
}

.lang-btn.active {
    color: #2E7D32 !important; /* Cosy-Grün */
    cursor: default !important;
}

.lang-btn:not(.active):hover {
    color: #A378C1 !important; /* Accent Purple */
}

.lang-divider {
    color: #CBD5E1 !important;
    font-size: 0.75rem !important;
}

#mainHeader {
    min-height: 70px; /* Nimmt sofort den Platz des Headers ein */
    display: flex;
    align-items: center;
}
footer,
.app-footer {
    width: 100%;
    background-color: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    padding: 24px 0;
    text-align: left !important; /* Hebt alte Zentrierungen auf */
    box-sizing: border-box;
}

.footer-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100%;
    max-width: 1400px; /* Passt die maximale Breite an deinen Seiten-Header an */
    margin: 0 auto;
    padding: 0 40px; /* Bündige Einrückung zu den äußeren Seitenrändern */
    box-sizing: border-box;
    font-size: 1.05rem; /* Gut lesbare, größere Schrift */
}

.footer-brand {
    font-weight: 600;
    font-size: 1.15rem;
    color: #2D3748;
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-right a {
    color: #4A5568;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-right a:hover {
    color: #50C878;
}

.footer-separator {
    color: #A0AEC0;
    font-weight: 300;
    user-select: none;
}
/* Erzwingt die Ausrichtung auch in Überschriften und im Footer */
h1 sup,
h2 sup,
.footer-brand sup,
sup {
    display: inline-block !important;
    vertical-align: baseline !important; /* Hebt die Browser-Sperre auf */
    position: relative !important;
    top: -0.7em !important;              /* Schiebt das Symbol nach OBEN */
    font-size: 0.45em !important;         /* Macht das Zeichen deutlich kleiner */
    line-height: 0 !important;
    margin-left: 2px !important;
}


/* =========================================================
   PRICING MODEL
   ========================================================= */

.pricing-model-section {
    width: 100%;
}

.pricing-model-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
    margin-top: 32px;
}

.pricing-model-heading h2 {
    margin: 0;
}

.pricing-model-copy {
    max-width: 680px;
}

.pricing-model-copy .large-copy {
    margin-top: 0;
}


/* =========================================================
   FACT CARDS
   ========================================================= */

.pricing-fact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;

    margin-top: 52px;
}

.pricing-fact-card {
    position: relative;

    box-sizing: border-box;
    min-width: 0;

    padding: 22px 20px 20px;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid rgba(80, 200, 120, 0.28);
    border-radius: 14px;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease;
}


/* ---------------------------------------------------------
   ACCENT CARD
   --------------------------------------------------------- */

.pricing-fact-card-accent {
    border-color: rgba(80, 200, 120, 0.55);
    background: rgba(80, 200, 120, 0.035);
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.pricing-fact-card:hover {
    transform: translateY(-2px);

    border-color: rgba(80, 200, 120, 0.60);
    background: rgba(80, 200, 120, 0.04);
}


/* ---------------------------------------------------------
   NUMBER
   --------------------------------------------------------- */

.pricing-fact-number {
    display: block;

    margin-bottom: 22px;

    color: #50C878;

    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.12em;
}


/* ---------------------------------------------------------
   HEADING
   --------------------------------------------------------- */

.pricing-fact-card h3 {
    margin: 0 0 14px;

    color: #2D3748;

    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}


/* ---------------------------------------------------------
   TEXT
   --------------------------------------------------------- */

.pricing-fact-card p {
    margin: 0;

    color: rgba(45, 55, 72, 0.78);

    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.55;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .pricing-model-grid {
        gap: 50px;
    }

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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .pricing-model-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 24px;
    }

    .pricing-model-copy {
        max-width: none;
    }

    .pricing-fact-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 32px;
    }

    .pricing-fact-card {
        padding: 18px 18px 17px;
        border-radius: 12px;
    }

    .pricing-fact-number {
        margin-bottom: 16px;
        font-size: 0.64rem;
    }

    .pricing-fact-card h3 {
        margin-bottom: 10px;
        font-size: 0.94rem;
    }

    .pricing-fact-card p {
        font-size: 0.77rem;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .pricing-fact-grid {
        gap: 8px;
    }

    .pricing-fact-card {
        padding: 16px 17px;
    }

}
/* =========================================================
   CUSTOMER PORTAL LINK
   ========================================================= */

.customer-portal-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-left: 18px;

    color: #50C878;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.customer-portal-link span {
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.customer-portal-link:hover {
    color: #6ee29a;
}

.customer-portal-link:hover span {
    transform: translateX(3px);
}

@media (max-width: 1024px) {

    .customer-portal-link {
        display: flex;
        align-items: center;

        width: 100%;

        margin: 18px 0 0;
        padding: 14px 0;

        border-top: 1px solid rgba(80, 200, 120, 0.18);
        border-bottom: 1px solid rgba(80, 200, 120, 0.18);

        font-size: 15px;
    }

    .customer-portal-link span {
        margin-left: auto;
    }

}

/* Rechter Header-Bereich: Flexibles Layout mit klaren Abständen */
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Trennzeichen zwischen Sprache und Portalen */
.header-divider {
    color: rgba(255, 255, 255, 0.2);
    font-weight: 300;
}

/* Container für die Portal-Badges */
.header-portals {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Dezente Badges für Kunde & MA */
.portal-badge {
    font-family: 'Comfortaa', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: #e0e0e0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.portal-badge:hover {
    background: rgba(68, 169, 114, 0.15);
    border-color: #44A972;
    color: #44A972;
}

/* Optional: Das MA-Portal dezent farblich absetzen (z.B. mit unserem Cosylila) */
.portal-badge.portal-ma:hover {
    background: rgba(165, 117, 255, 0.15);
    border-color: #A575FF;
    color: #A575FF;
}

/* Lässt das Service-Dropdown am rechten Bildschirmrand nach links aufklappen */
.portal-dropdown {
    position: relative; /* Wichtig, damit sich das absolute Dropdown hieran orientiert */
}

.portal-dropdown .compact-dropdown-card {
    left: auto !important;
    right: 0 !important;
}

/* Standardmäßig ist der mobile Footer auf dem Desktop unsichtbar */
.mobile-drawer-footer {
    display: none !important;
}

/* Regeln für mobile Geräte (Bildschirme bis 1024px) */
@media (max-width: 1024px) {
    /* Rechter Desktop-Bereich im Header komplett ausblenden */
    .header-right {
        display: none !important;
    }

    /* Mobilen Footer im aufgeklappten Drawer aktivieren */
    .mobile-drawer-footer {
        display: flex !important;
        flex-direction: column;
        gap: 16px;
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-lang-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #a0a0a0;
        font-size: 0.9rem;
        padding: 0 4px;
    }

    .mobile-service-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-service-link {
        display: block;
        padding: 10px 14px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        color: #ffffff;
        text-decoration: none;
        font-family: 'Comfortaa', sans-serif;
        font-weight: 700;
        font-size: 0.9rem;
    }

    .mobile-logout-btn {
        width: 100%;
        padding: 10px 14px;
        background: rgba(255, 107, 107, 0.15);
        border: 1px solid rgba(255, 107, 107, 0.3);
        border-radius: 8px;
        color: #ff6b6b;
        font-family: 'Comfortaa', sans-serif;
        font-weight: 700;
        font-size: 0.9rem;
        cursor: pointer;
        text-align: center;
    }
}

/* Standardmäßig ausblenden auf Desktop */
.mobile-drawer-footer {
    display: none !important;
}

/* Nur in der mobilen Ansicht (bis 1024px) */
@media (max-width: 1024px) {
    .mobile-drawer-footer {
        display: flex !important;
        flex-direction: column;
        gap: 16px;
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Sprachwahl-Zeile als schicke Box */
    .mobile-lang-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255, 255, 255, 0.03);
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        color: #b0b0b0;
        font-family: 'Comfortaa', sans-serif;
        font-size: 0.9rem;
    }

    .mobile-service-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Portal-Links als professionelle Kacheln */
    .mobile-service-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 12px;
        color: #ffffff;
        text-decoration: none;
        font-family: 'Comfortaa', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        border: 1px solid rgba(255, 255, 255, 0.06);
        transition: all 0.2s ease;
    }

    .mobile-service-link:active {
        background: rgba(68, 169, 114, 0.15);
        border-color: #44A972;
        color: #44A972;
    }

    .mobile-arrow {
        color: rgba(255, 255, 255, 0.4);
        font-size: 1.2rem;
        font-weight: 400;
    }

    /* Logout-Button im gleichen modernen Stil */
    .mobile-logout-btn {
        width: 100%;
        padding: 14px 16px;
        background: rgba(255, 107, 107, 0.08);
        border: 1px solid rgba(255, 107, 107, 0.2);
        border-radius: 12px;
        color: #ff6b6b;
        font-family: 'Comfortaa', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        text-align: center;
        transition: all 0.2s ease;
        margin-top: 4px;
    }

    .mobile-logout-btn:active {
        background: rgba(255, 107, 107, 0.2);
        border-color: #ff6b6b;
    }
}

/* =================================================================aya
   MOBILER DRAWER (FÜR SMARTPHONES & TABLETS <= 1024px)
   ============================================================== */
@media (max-width: 1024px) {
    /* Desktop-Elemente komplett ausblenden */
    .header-right {
        display: none !important;
    }

    /* Mobilen Footer-Bereich im Drawer anzeigen */
    .mobile-drawer-footer {
        display: flex !important;
        flex-direction: column;
        gap: 16px;
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Sprachwahl-Zeile als schicke Box */
    .mobile-lang-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255, 255, 255, 0.03);
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        color: #b0b0b0;
        font-family: 'Comfortaa', sans-serif;
        font-size: 0.9rem;
    }

    .mobile-service-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Portal-Links als professionelle Kacheln */
    .mobile-service-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 12px;
        color: #ffffff;
        text-decoration: none;
        font-family: 'Comfortaa', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        border: 1px solid rgba(255, 255, 255, 0.06);
        transition: all 0.2s ease;
    }

    .mobile-service-link:active {
        background: rgba(68, 169, 114, 0.15);
        border-color: #44A972;
        color: #44A972;
    }

    .mobile-arrow {
        color: rgba(255, 255, 255, 0.4);
        font-size: 1.2rem;
        font-weight: 400;
    }

    /* Logout-Button im gleichen modernen Stil */
    .mobile-logout-btn {
        width: 100%;
        padding: 14px 16px;
        background: rgba(255, 107, 107, 0.08);
        border: 1px solid rgba(255, 107, 107, 0.2);
        border-radius: 12px;
        color: #ff6b6b;
        font-family: 'Comfortaa', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        text-align: center;
        transition: all 0.2s ease;
        margin-top: 4px;
    }

    .mobile-logout-btn:active {
        background: rgba(255, 107, 107, 0.2);
        border-color: #ff6b6b;
    }
}

/* Auf Desktop-Bildschirmen wird der mobile Drawer-Fuß immer versteckt */
@media (min-width: 1025px) {
    .mobile-drawer-footer {
        display: none !important;
    }
}

/* Standardmäßig ausblenden (nur im mobilen Drawer aktiv) */
.mobile-drawer-section {
    display: none !important;
}

/* Regeln für Smartphones & Tablets (bis 1024px) */
@media (max-width: 1024px) {
    /* Rechten Desktop-Header-Bereich ausblenden */
    .header-right {
        display: none !important;
    }

    /* Mobilen Drawer-Bereich anzeigen */
    .mobile-drawer-section {
        display: flex !important;
        flex-direction: column;
        gap: 16px;
        margin-top: 28px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-lang-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255, 255, 255, 0.03);
        padding: 14px 16px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        color: #b0b0b0;
        font-family: 'Comfortaa', sans-serif;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .mobile-drawer-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-drawer-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 12px;
        color: #ffffff;
        text-decoration: none;
        font-family: 'Comfortaa', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        border: 1px solid rgba(255, 255, 255, 0.06);
        transition: all 0.2s ease;
    }

    .mobile-arrow {
        color: rgba(255, 255, 255, 0.4);
        font-size: 1.2rem;
    }

    .mobile-drawer-logout {
        width: 100%;
        padding: 14px 16px;
        background: rgba(255, 107, 107, 0.08);
        border: 1px solid rgba(255, 107, 107, 0.2);
        border-radius: 12px;
        color: #ff6b6b;
        font-family: 'Comfortaa', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        text-align: center;
        margin-top: 4px;
        transition: all 0.2s ease;
    }
}

/* Standardmäßig ausblenden */
.mobile-drawer-section {
    display: none !important;
}

/* Auf Mobilgeräten (bis 1024px) anzeigen und formatieren */
@media (max-width: 1024px) {
    .header-right {
        display: none !important;
    }

    .mobile-drawer-section {
        display: flex !important;
        flex-direction: column;
        gap: 14px;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-lang-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(255, 255, 255, 0.03);
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        color: #b0b0b0;
        font-family: 'Comfortaa', sans-serif;
        font-size: 0.9rem;
        font-weight: 700;
    }

    .mobile-drawer-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-drawer-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 12px;
        color: #ffffff;
        text-decoration: none;
        font-family: 'Comfortaa', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        border: 1px solid rgba(255, 255, 255, 0.06);
        transition: all 0.2s ease;
    }

    .mobile-arrow {
        color: rgba(255, 255, 255, 0.4);
        font-size: 1.2rem;
    }

    .mobile-drawer-logout {
        width: 100%;
        padding: 14px 16px;
        background: rgba(255, 107, 107, 0.08);
        border: 1px solid rgba(255, 107, 107, 0.2);
        border-radius: 12px;
        color: #ff6b6b;
        font-family: 'Comfortaa', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        text-align: center;
        margin-top: 4px;
        transition: all 0.2s ease;
    }
}

/* ==========================================
   17. SCHMALE BILDSCHIRME: NICHTS RAGT SEITLICH HERAUS
   Lange Wörter (z. B. „Ausführungsumgebung.“) und feste Spalten
   machten Seiten unter 800 px breiter als den Bildschirm.
========================================== */
@media (max-width: 800px) {
    h1, h2, h3 {
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    h2 { font-size: clamp(1.6rem, 7vw, 2.2rem); }

    /* Raster- und Spaltenkinder dürfen schmaler werden als ihr längstes Wort */
    main [class*="grid"] > *,
    main [class*="-copy"],
    .comparison > *,
    .pricing-card { min-width: 0; }

    .comparison { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
    .comparison-divider { justify-self: center; }
    .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pricing-card { padding: 24px; }
    .footer-right { flex-wrap: wrap; row-gap: 6px; }

    /* Der feste linke Abstand von 128 px (Abschnitt „Garantierter Abstand“) gilt nur für breite Bildschirme */
    main > section { padding-left: 24px !important; }
    .sovereignty-list { flex-wrap: wrap; gap: 24px 32px; }
    .trigger-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}