@import url('fonts/schriften.css');

/* Screenshot-Slots: bis die echte Datei in img/ liegt, rendert security.js
   fehlende Bilder als gestylte Platzhalter-Kachel mit Beschreibung. */
.screenshot-pending {
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: rgba(196,162,97, 0.03);
    border: 2px dashed var(--color-border-hover);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
}
.screenshot-pending .sp-label,
.produkt-video.pv-pending .sp-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 42ch;
}
.screenshot-pending .sp-note,
.produkt-video.pv-pending .sp-note {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.browser-mockup-body .screenshot-pending {
    border: none;
    border-radius: 0;
}

/* Space Mono — lokal gehostet (DSGVO), nur woff2 */
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/space-mono-v17-latin-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/space-mono-v17-latin-700.woff2') format('woff2');
}

/* ==========================================================================
   MATIS LABS - Modern Enterprise AI Design System
   Bold Color Surfaces · Dark Sections · Dynamic Motion
   ========================================================================== */

:root {
    /* === Light Surface === */
    --bg-dark: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f4f4f8;
    --bg-section: #f8f8fb;

    /* === Deep Dark Surfaces (for feature sections) === */
    --bg-deep: #05060f;
    --bg-deep-2: #080a1a;
    --bg-deep-card: rgba(255,255,255,0.04);
    --bg-deep-card-hover: rgba(255,255,255,0.07);

    /* === Text === */
    --text-primary: #09090e;
    --text-secondary: #3c3c48;
    --text-muted: #6b6b7a;
    --text-on-dark: #f0f0ff;
    --text-on-dark-muted: rgba(220,220,255,0.55);

    /* === Brand Accents (Redesign 30.07.2026: Navy + Gold, streng) ===
       Gold ist der EINZIGE Markenakzent. Die frueheren Akzente Indigo/
       Violett/Cyan/Emerald sind abgeschafft; ihre Variablen zeigen als
       Uebergangs-Alias auf Gold bzw. semantische Rollen, bis die letzten
       Verwendungen ersetzt sind — dann loeschen. Produktkennfarben laufen
       ausschliesslich ueber --pc an den Produktkacheln. */
    --color-accent: #c4a261;         /* Premium Warm Gold (Flaechen, Kanten) */
    --color-gold: #c4a261;
    --color-gold-bright: #d9b878;    /* Gold fuer Hover/Fokus auf dunkel */
    --color-gold-text: #8a6d33;      /* Gold als TEXT auf hellem Grund (4.6:1) —
                                        das helle Gold traegt auf Weiss nur 2.2:1 */
    --color-danger: #dc2626;
    --color-success: #2f9e63;        /* nur fuer echte Erfolgsmeldungen */
    --color-indigo: var(--color-gold);   /* Alias, Abbau laeuft */
    --color-violet: var(--color-gold);   /* Alias, Abbau laeuft */
    --color-teal: var(--color-gold);     /* Alias, Abbau laeuft */
    --color-cyan: var(--color-gold);     /* Alias, Abbau laeuft */
    --color-emerald: var(--color-success); /* Alias, Abbau laeuft */

    /* === Large Color Surfaces === */
    --surface-dark-gradient: linear-gradient(160deg, #05060f 0%, #0a0c1c 50%, #05060f 100%);
    --surface-indigo: var(--surface-dark-gradient);  /* Alias, Abbau laeuft */
    --surface-ai: var(--surface-dark-gradient);      /* Alias, Abbau laeuft */
    --surface-gold-dark: linear-gradient(135deg, #1a1205 0%, #2d1f08 50%, #1a1205 100%);

    /* === Form- und Bewegungsskala (Redesign) ===
       Genau vier Radien, drei Schatten, zwei Dauern, zwei Kurven —
       alles andere ist Einzelfall und soll auf diese Token zurueck. */
    --radius-sharp: 2px;    /* Buttons, technische Kanten */
    --radius-card: 12px;    /* Karten, Panels, Bilder */
    --radius-pill: 999px;   /* Pills, Badges, Tags */
    --dauer-micro: 0.2s;
    --dauer-block: 0.4s;
    --kurve-rein: cubic-bezier(0.16, 1, 0.3, 1);
    --kurve-raus: cubic-bezier(0.7, 0, 0.84, 0);

    /* === Borders === */
    --color-border: #e2e2eb;
    --color-border-hover: #a1a1b5;
    --color-border-dark: rgba(255,255,255,0.10);
    --border-color: var(--color-border);
    --border-hover: var(--color-border-hover);

    /* === Typography (Redesign: Space Grotesk als Headline-Stimme) === */
    --font-heading: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* === Fluide Typo-Skala === */
    --fs--1: 0.85rem;
    --fs-0: 0.95rem;
    --fs-1: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
    --fs-2: clamp(1.3rem, 1.15rem + 0.8vw, 1.7rem);
    --fs-3: clamp(1.8rem, 1.5rem + 1.5vw, 2.25rem);
    --fs-4: clamp(2.5rem, 1.8rem + 3vw, 4rem);
    --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* === Transitions === */
    --transition-smooth: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.15s ease;

    /* === Shadows (3 Stufen) === */
    --shadow-card: 0 2px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
    --shadow-card-hover: 0 10px 32px rgba(9,9,14,0.10), 0 2px 8px rgba(0,0,0,0.06);
    --shadow-dark-card: 0 4px 20px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
    --shadow-glow-gold: 0 0 40px rgba(196,162,97,0.20);
    --shadow-glow-indigo: var(--shadow-glow-gold); /* Alias, Abbau laeuft */
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: var(--bg-dark);
}

body {
    background-color: var(--bg-dark);
    color: var(--text-secondary);
    font-family: var(--font-body);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Hell-Editorial 30.07.2026: Das Tech-Raster ist abgeschafft — die
   Konzern-Designsprache (IBM/SAP/Stripe) arbeitet mit Weissraum statt
   Entwickler-Grid. Das div bleibt im Markup, rendert nichts mehr. */
.grid-bg {
    display: none;
}

/* Redesign 30.07.2026: Noise-Overlay abgeschafft — bei opacity 0.01 war es
   praktisch unsichtbar, kostete aber eine Fullscreen-Blend-Ebene pro Frame.
   Das div bleibt im Markup (27 Seiten), rendert aber nichts mehr. */
.noise-overlay {
    display: none;
}

/* Global Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2.5rem;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.04em;
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: clamp(1.8rem, 3vw, 2.25rem);
    line-height: 1.15;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

p {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-secondary);
}

.gradient-text-color {
    background: linear-gradient(135deg, #09090e 0%, #0b0d1e 50%, #c4a261 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--text-primary);
}

.accent-text-teal {
    color: var(--color-teal);
}

.accent-text-gold {
    color: var(--color-gold);
}

/* Premium Floating Header Navigation */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition-smooth);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 72px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.logo-icon {
    width: 28px;
    height: 28px;
    /* Das Schild bleibt IMMER im Original — goldener Rahmen, blauer Grund,
       eigene Binnenzeichnung. Frühere brightness-Filter (0.08 hell / 5 dunkel)
       machten daraus je nach Zustand einen schwarzen bzw. weißen Klecks.
       Der drop-shadow färbt nichts um: Er legt nur einen atmenden Goldschein
       HINTER das unveränderte Logo. */
    animation: logoGlow 4.5s ease-in-out infinite;
}

@keyframes logoGlow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(196, 162, 97, 0.30)); }
    50%      { filter: drop-shadow(0 0 8px rgba(196, 162, 97, 0.65)); }
}

@media (prefers-reduced-motion: reduce) {
    .logo-icon { animation: none; filter: drop-shadow(0 0 3px rgba(196, 162, 97, 0.35)); }
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    list-style: none;
}

.nav-link {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.825rem;
    transition: var(--transition-fast);
    white-space: nowrap;
    position: relative;
    padding-bottom: 2px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover {
    color: var(--text-primary);
}

.nav-link:hover::after {
    transform: scaleX(0.4);
    opacity: 0.4;
}

.nav-link.active {
    color: var(--text-primary);
}

.nav-link.active::after {
    transform: scaleX(1);
    opacity: 1;
}

/* Call to Action Buttons - Solid & Muted Outline (OpenAI Style) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.25rem;
    border-radius: 2px;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
}

.btn-primary {
    background: #0e0e11;
    color: #ffffff;
}

.btn-primary:hover {
    background: #27272a;
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--text-primary);
}

.btn-gold {
    background: rgba(196, 162, 97, 0.08);
    color: var(--text-primary);
    border-color: rgba(196, 162, 97, 0.35);
    white-space: nowrap;
}

.btn-gold:hover {
    background: rgba(196, 162, 97, 0.16);
    border-color: var(--color-gold);
    color: var(--color-gold);
    box-shadow: 0 0 16px rgba(196, 162, 97, 0.12);
}

/* Hero Section - Deep Dark with Vibrant Accents */
/* Hell-Editorial 30.07.2026: Der Hero ist HELL — grosse dunkle Typografie
   auf warmem Weiss, wie die Konzern-Designsprache (IBM/SAP/Stripe). Der
   dunkle „KI-Startup-Hero" ist abgeschafft. */
.hero {
    padding-top: 160px;
    padding-bottom: 100px;
    position: relative;
    background: linear-gradient(165deg, #ffffff 0%, #f7f5ef 55%, #f8f8fb 100%);
    overflow: hidden;
}

.hero h1 {
    color: var(--text-primary);
    font-size: clamp(2.75rem, 2rem + 3.5vw, 4.75rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.hero .hero-description {
    color: var(--text-secondary);
    font-size: 1.2rem;
}

.hero .hero-stat-value {
    color: var(--text-primary);
}

.hero .hero-stat-label {
    color: var(--text-muted);
}

.hero .hero-stats {
    border-top-color: var(--color-border);
}

.hero .hero-badge {
    background: rgba(196,162,97, 0.10);
    border-color: rgba(196,162,97, 0.40);
    color: var(--color-gold-text);
}

.hero .gradient-text-color {
    background: linear-gradient(135deg, #09090e 0%, #6b5427 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero .accent-text-teal {
    color: var(--color-gold-text);
}

.hero .accent-text-gold {
    color: var(--color-gold-text);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}

/* Redesign 30.07.2026: Badge als ruhiges Gold-Label. Der fruehere gruen
   pulsierende Punkt suggerierte einen Live-Status, den es nicht gab
   (Belegregel) — der Punkt ist jetzt ein statischer Gold-Marker. */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(196, 162, 97, 0.08);
    border: 1px solid rgba(196, 162, 97, 0.25);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--color-gold);
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}

.hero-badge .pulse {
    width: 6px;
    height: 6px;
    background-color: var(--color-gold);
    border-radius: 50%;
}

/* Redesign: Der Dauer-Shimmer ist abgeschafft — die H1 steht in ruhigem
   Weiss mit warmem Goldauslauf. Der Klassenname bleibt (22 Seiten nutzen
   ihn), nur das Verhalten aendert sich. */
/* Hell-Editorial: dunkle Headline mit warmem Goldauslauf statt
   Hell-auf-Dunkel-Shimmer. */
.gradient-text-animated {
    background: linear-gradient(115deg, #09090e 0%, #2c2417 60%, #8a6d33 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 550px;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

/* Hero Stats Strip */
.hero-stats {
    display: flex;
    gap: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.hero-stat {
    display: flex;
    flex-direction: column;
}

.hero-stat-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-primary);
    letter-spacing: -0.04em;
    line-height: 1.2;
}

.hero-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 2px;
}

/* Hell-Editorial-Feinschliff (30.07.2026): mehr Buehne fuer Schild +
   Knoten-Explorer — hoeher, mittig, mit Luft fuer die Aussenlabels. */
.hero-graphic-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 480px;
}

#hero-ai-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 500px;
    z-index: 0;
    pointer-events: auto;
}

.hero-shield-image {
    position: relative;
    z-index: 1;
    width: clamp(220px, 22vw, 330px);
    pointer-events: none;
}

/* Trust Bar / Logos - Dark Transition */
.trust-bar {
    border-top: none;
    border-bottom: none;
    padding: 2.5rem 0;
    background: linear-gradient(180deg, #080a1a 0%, #0c0d1f 100%);
}

.trust-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(180,180,255,0.45);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1.75rem;
}

.trust-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    opacity: 0.85;
}

.trust-item {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    color: rgba(220,220,255,0.80);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.01em;
}

.trust-item svg {
    color: rgba(129,140,248,0.70);
}

/* Section Header */
.section-header {
    text-align: left; /* Left align like OpenAI/Vercel sections */
    margin-bottom: 4rem;
    border-top: 1px solid var(--color-border);
    padding-top: 3rem;
}

.section-label {
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: block;
}

/* Service Matrix / Focus Areas */
.section-padding {
    padding: 100px 0;
}

.matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}


/* Modern Cards with Premium Depth */
.card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2.5rem 2rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    transform: translateY(0);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-indigo), var(--color-violet), var(--color-gold));
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Redesign 30.07.2026: -2px statt -8px — der grosse Sprung las sich als
   Template-Geste; die Goldkante traegt die Rueckmeldung. */
.card:hover {
    border-color: rgba(196,162,97, 0.55);
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

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

/* Card mouse-tracking glow overlay */
.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.card:hover .card-glow {
    opacity: 1;
}

.card > *:not(.card-glow) {
    position: relative;
    z-index: 1;
}

.card-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 1.5rem;
    color: var(--color-indigo);
    background: rgba(67, 56, 202, 0.06);
    border-radius: 12px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.card-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.card-list {
    list-style: none;
    margin-top: 1rem;
}

.card-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.card-list li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-indigo);
    margin-top: 0.55rem;
    flex-shrink: 0;
}

/* Definition-style list items (containing strong) */
.card-list li:has(strong) {
    display: block;
    margin-bottom: 1.25rem;
    line-height: 1.6;
    padding-left: 1.25rem;
    position: relative;
}

.card-list li:has(strong)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-indigo);
}

.card-list li strong {
    display: block; /* Stack title and description */
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.card-list li:has(strong)::after {
    content: none;
}

/* Highlight style */
/* Redesign 30.07.2026: Die Gold-Karte bricht die Raster-Uniformitaet —
   staerkere Kante, warmer Grundton, feine Goldlinie oben. */
.card.highlight-gold {
    border-color: rgba(196, 162, 97, 0.5);
    background: linear-gradient(180deg, rgba(196, 162, 97, 0.06) 0%, #ffffff 45%);
    box-shadow: 0 2px 8px rgba(196, 162, 97, 0.08), var(--shadow-card);
}

.card.highlight-gold::before {
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.card.highlight-gold .card-list li::before {
    background: var(--color-gold);
}

/* Animated Metrics Counter Section - Deep Dark Bold */
.metrics-banner {
    padding: 6rem 0;
    background: linear-gradient(135deg, #0a0c1c 0%, #10132a 30%, #0a0c1c 65%, #0a0a1e 100%);
    border-top: none;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

.metrics-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse 600px 300px at 20% 50%, rgba(196,162,97,0.30) 0%, transparent 60%),
        radial-gradient(ellipse 500px 300px at 80% 50%, rgba(196,162,97,0.20) 0%, transparent 60%);
    pointer-events: none;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

@media (max-width: 768px) {
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.metric-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.metric-counter-value {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.8rem, 4.5vw, 4rem);
    letter-spacing: -0.04em;
    color: #ffffff;
    line-height: 1;
}

.metric-counter-value .counter-suffix {
    font-size: 0.65em;
    color: #d9b878;
    font-weight: 700;
}

/* Product Section Details */
.product-showcase {
    background: transparent;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: left;
        gap: 2rem;
    }
    .hero-actions {
        justify-content: flex-start;
    }
}

.product-card {
    display: flex;
    flex-direction: column;
}

.product-tech-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* Profile / Authority Node */
.profile-section {
    position: relative;
}

.profile-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

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

.profile-image-container {
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    aspect-ratio: 1;
    border: none;
    border-bottom: 2px solid var(--color-border);
    background: var(--bg-card);
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-avatar {
    width: 80%;
    height: 80%;
    object-fit: contain;
    filter: grayscale(0.5);
    opacity: 0.85;
    transition: var(--transition-smooth);
}

.profile-image-container:hover .profile-avatar {
    filter: grayscale(0);
    opacity: 1;
}

.profile-title {
    font-size: 1rem;
    font-family: var(--font-mono);
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.profile-credential-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
}

.credential-item {
    display: flex;
    flex-direction: column;
}

.credential-val {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--text-primary);
}

.credential-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* CTA Callout / Discovery Workshop Banner - Bold Dark Gold */
.cta-banner {
    background: linear-gradient(135deg, #100e00 0%, #1e1800 40%, #150f02 70%, #0d0a00 100%);
    border: 1px solid rgba(196, 162, 97, 0.25);
    border-radius: 12px;
    padding: 5rem 4rem;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.cta-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196,162,97,0.8), rgba(196,162,97,0.4), transparent);
}

.cta-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 500px 300px at 20% 50%, rgba(196,162,97,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 400px 400px at 85% 30%, rgba(196,162,97,0.07) 0%, transparent 60%);
    pointer-events: none;
}

.cta-banner h2.cta-banner-title {
    color: #ffffff;
    margin-bottom: 1rem;
}

.cta-banner-desc {
    max-width: 650px;
    margin: 0 0 2.5rem 0;
    font-size: 1.05rem;
    color: rgba(230,215,180,0.75);
    position: relative;
    z-index: 1;
}

.cta-banner .section-label {
    color: rgba(196,162,97,0.80);
    position: relative;
    z-index: 1;
}

.cta-banner .btn-gold {
    background: rgba(196, 162, 97, 0.15);
    color: #e8c87a;
    border: 1px solid rgba(196, 162, 97, 0.50);
    position: relative;
    z-index: 2;
}

.cta-banner .btn-gold:hover {
    background: rgba(196, 162, 97, 0.28);
    border-color: rgba(196, 162, 97, 0.80);
    color: #f5d98a;
    box-shadow: 0 0 25px rgba(196,162,97,0.20);
}

/* CTA Banner button z-index fix */
.cta-banner > * {
    position: relative;
    z-index: 2;
}


footer {
    border-top: 1px solid var(--color-border);
    background: var(--bg-section);
    padding: 4rem 0 2.5rem 0;
    font-size: 0.875rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

@media (max-width: 1024px) and (min-width: 769px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

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

.footer-desc {
    color: var(--text-muted);
    margin-top: 1rem;
    max-width: 280px;
    font-size: 0.825rem;
}

.footer-column-title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-fast);
}

.footer-links a:hover {
    color: var(--text-primary);
}

.footer-bottom {
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.footer-bottom-links {
    display: flex;
    gap: 1.25rem;
}

.footer-bottom-links a {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition-fast);
}

.footer-bottom-links a:hover {
    color: var(--text-primary);
}

/* Security Notification badge */
.security-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 2px;
}

.security-status-indicator .dot {
    width: 5px;
    height: 5px;
    background-color: var(--text-secondary);
    border-radius: 50%;
}

/* Burger Menu Mobile Navigation */
.burger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    z-index: 105;
}

.burger-btn span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--text-primary);
    transition: var(--transition-smooth);
}

/* Intermediate breakpoint: tighten spacing before burger kicks in */
@media (max-width: 1400px) and (min-width: 1281px) {
    .nav-menu {
        gap: 0.7rem;
    }
    .nav-link {
        font-size: 0.78rem;
    }
    .nav-menu .btn {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 1280px) {
    .burger-btn {
        display: flex;
    }
    
    /* Mobilmenue als gegliederte Liste statt zentrierter Wortwolke
       (Ueberarbeitung 26.07.2026): oben beginnend und scrollbar, weil die
       Navigation mit beiden Untermenues 17 Eintraege hat und mittig
       zentriert unten aus dem Bild lief. */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #ffffff;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 0;
        transition: var(--transition-smooth);
        z-index: 102;
        padding: 5.25rem 1.5rem 2.5rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Trennlinien gliedern die Gruppen; die letzten beiden Eintraege
       (Sprachwahl, CTA) bilden einen abgesetzten Fussbereich. */
    .nav-menu > li {
        width: 100%;
        border-bottom: 1px solid var(--color-border);
    }

    .nav-menu > li.lang-selector-container,
    .nav-menu > li:last-child {
        border-bottom: none;
    }

    .nav-menu > li > .nav-link {
        display: block;
        width: 100%;
        text-align: left;
        white-space: normal;
        font-size: 1.02rem;
        font-weight: 600;
        padding: 0.95rem 0.15rem;
    }

    /* Der Unterstrich-Effekt der Desktop-Navigation ergibt in der Liste
       keinen Sinn und erzeugte nur einen Strich unter jedem Eintrag. */
    .nav-menu > li > .nav-link::after {
        display: none;
    }

    /* Das Caret zeigt ein Aufklapp-Menue an — mobil sind die Unterpunkte
       ohnehin ausgeklappt. */
    .nav-menu .nav-caret {
        display: none;
    }

    .nav-menu > li.lang-selector-container {
        margin-top: 1.75rem;
        display: flex;
        justify-content: flex-start;
    }

    .nav-menu > li:last-child {
        margin-top: 1rem;
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    /* Stagger animation for menu items */
    .nav-menu.active li:nth-child(1) { transition-delay: 0.04s; }
    .nav-menu.active li:nth-child(2) { transition-delay: 0.08s; }
    .nav-menu.active li:nth-child(3) { transition-delay: 0.12s; }
    .nav-menu.active li:nth-child(4) { transition-delay: 0.16s; }
    .nav-menu.active li:nth-child(5) { transition-delay: 0.20s; }
    .nav-menu.active li:nth-child(6) { transition-delay: 0.24s; }
    .nav-menu.active li:nth-child(7) { transition-delay: 0.28s; }
    .nav-menu.active li:nth-child(8) { transition-delay: 0.32s; }
    .nav-menu.active li:nth-child(9) { transition-delay: 0.36s; }
    
    .nav-menu li {
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    .nav-menu.active li {
        opacity: 1;
        transform: translateX(0);
    }
    
    /* Mobile CTA full-width gold fill */
    .nav-menu .btn-gold {
        width: 100%;
        text-align: center;
        justify-content: center;
        background: rgba(196, 162, 97, 0.10);
        border-color: rgba(196, 162, 97, 0.40);
        padding: 1rem;
    }

    /* --------------------------------------------------------------------
       Lesbarkeit im geoeffneten Mobilmenue (Korrektur 26.07.2026)
       --------------------------------------------------------------------
       .nav-menu ist mobil eine WEISSE Vollflaeche (background: #ffffff oben).
       Die Header-Farben sind aber fuer den DUNKLEN Hero gemacht
       (header.is-hero-top .nav-link = rgba(210,210,255,0.75), im
       Hover/Aktiv-Zustand sogar #ffffff). Ergebnis war weisse Schrift auf
       weissem Grund — gemessener Kontrast 1.0, also voellig unsichtbar.

       Fuer die Burger-Striche gibt es diese Korrektur weiter unten schon
       ("...but dark again once the white fullscreen menu is open") — fuer
       die Links, den Caret, die Sprachwahl und den CTA fehlte sie.

       Die Selektoren tragen bewusst das header.is-hero-top-Praefix: nur so
       schlagen sie die spaeter in der Datei stehenden Hero-Regeln. */
    .nav-menu .nav-link,
    header.is-hero-top .nav-menu .nav-link {
        color: var(--text-primary);
    }

    .nav-menu .nav-submenu .nav-link,
    header.is-hero-top .nav-menu .nav-submenu .nav-link {
        color: var(--text-secondary);
    }

    /* Nicht var(--color-gold): das Marken-Gold #c4a261 erreicht auf weissem
       Grund nur 2,4:1 und faellt damit unter die Lesbarkeitsschwelle (4,5:1).
       Dieser abgedunkelte Goldton bleibt als Markenfarbe erkennbar und kommt
       auf ~5:1. Auf dunklen Flaechen bleibt es beim Original-Gold. */
    .nav-menu .nav-link:hover,
    .nav-menu .nav-link.active,
    header.is-hero-top .nav-menu .nav-link:hover,
    header.is-hero-top .nav-menu .nav-link.active {
        color: #8a6a2e;
    }

    .nav-menu .nav-caret,
    header.is-hero-top .nav-menu .nav-caret {
        color: var(--text-muted);
    }

    /* Sprachumschalter: Umrandung und Schrift auf Weiss sichtbar halten */
    .nav-menu .lang-switcher,
    header.is-hero-top .nav-menu .lang-switcher {
        background: transparent;
        border-color: var(--color-border);
    }

    .nav-menu .lang-btn,
    header.is-hero-top .nav-menu .lang-btn {
        color: var(--text-secondary);
    }

    .nav-menu .lang-btn:hover,
    header.is-hero-top .nav-menu .lang-btn:hover {
        color: var(--text-primary);
    }

    .nav-menu .lang-btn.active,
    header.is-hero-top .nav-menu .lang-btn.active {
        background: var(--color-gold);
        color: #12100a;
    }

    /* CTA gefuellt statt 10 % Gold auf Weiss (war praktisch unsichtbar) */
    .nav-menu .btn-gold,
    header.is-hero-top .nav-menu .btn-gold {
        background: var(--color-gold);
        border-color: var(--color-gold);
        color: #12100a;
        font-weight: 600;
    }

    .nav-menu .btn-gold:hover,
    header.is-hero-top .nav-menu .btn-gold:hover {
        background: #d8b877;
        border-color: #d8b877;
        color: #12100a;
    }

    .burger-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 5px);
    }
    
    .burger-btn.active span:nth-child(2) {
        opacity: 0;
    }
    
    .burger-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -5px);
    }
}

/* ==========================================================================
   Premium Animations & Simulators
   ========================================================================== */

/* Reveal Animations - Apple-style Elastic Fluid Dynamics */
/* Redesign 30.07.2026: kuerzer und dezenter (12px statt 24px, 0.5s statt
   0.85s, ohne Scale) — Bewegung als Bestaetigung, nicht als Show. */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--kurve-rein), transform 0.5s var(--kurve-rein);
    will-change: transform, opacity;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Karten-Raster treten mit 50ms-Versatz auf, ohne dass das Markup
   .reveal-stagger braucht — reine CSS-Staffelung je Rasterposition. */
.matrix-grid > .reveal:nth-child(2) { transition-delay: 0.05s; }
.matrix-grid > .reveal:nth-child(3) { transition-delay: 0.1s; }
.matrix-grid > .reveal:nth-child(4) { transition-delay: 0.15s; }
.matrix-grid > .reveal:nth-child(5) { transition-delay: 0.2s; }
.matrix-grid > .reveal:nth-child(6) { transition-delay: 0.25s; }

/* FIX: When .reveal is combined with .reveal-stagger, the parent
   should not hide itself — only the children should animate. */
.reveal.reveal-stagger {
    opacity: 1;
    transform: none;
}

/* Technical Terminal Console Styles */
.terminal-window {
    background: #050507;
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 360px;
    width: 100%;
    margin-top: 1.5rem;
}

.terminal-header {
    background: #0c0c0e;
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.terminal-dot-group {
    display: flex;
    gap: 0.35rem;
}

.terminal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border);
}

.terminal-title {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.terminal-status {
    color: #4ade80;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.terminal-body {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.terminal-body::-webkit-scrollbar {
    width: 4px;
}
.terminal-body::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 2px;
}

.terminal-logs {
    flex-grow: 1;
    overflow-y: auto;
    font-family: var(--font-mono);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-all;
    text-align: left;
}

.terminal-log-line {
    margin-bottom: 0.25rem;
}

.terminal-log-line.info { color: var(--text-secondary); }
.terminal-log-line.success { color: #ffffff; }
.terminal-log-line.warning { color: #a1a1aa; font-style: italic; }
.terminal-log-line.system { color: #71717a; }

/* Sector Grid for MSLS */
.sector-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    max-width: 140px;
    margin: 0 auto;
}

.sector-block {
    aspect-ratio: 1;
    background: #18181b;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sector-block.wiping {
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.sector-block.wiped {
    background: #27272a;
    border-color: #3f3f46;
}

.sector-block.verified {
    background: #a1a1aa;
    border-color: #ffffff;
}

/* Formatted JSON output inside terminal */
.terminal-json {
    color: #e4e4e7;
    background: #09090b;
    padding: 0.5rem;
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 2px;
    font-size: 0.75rem;
    white-space: pre-wrap;
    margin-top: 0.5rem;
    text-align: left;
}

/* Pulsing terminal badge */
@keyframes blink-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* Simulated display panels */
.sim-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: #09090b;
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 2px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.sim-controls {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
}

.sim-stats {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ==========================================================================
   Support & Diagnostics Components
   ========================================================================== */

/* OS Selector Tabs */
.tabs-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(9, 9, 14, 0.04);
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 2px;
    padding: 0.25rem;
    margin-bottom: 2rem;
    position: relative;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.tab-indicator {
    position: absolute;
    bottom: 4px;
    left: 4px;
    height: calc(100% - 8px);
    background: var(--bg-card);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
}

.tab-btn {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 500;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-secondary);
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    transition: color var(--transition-fast);
    position: relative;
    z-index: 1;
    border-radius: 2px;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--text-primary);
    font-weight: 600;
}

.tab-pane {
    display: none;
    animation: tab-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-pane.active {
    display: block;
}

@keyframes tab-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* OS Guide Lists */
.support-split {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 850px) {
    .support-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.guide-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.guide-lead {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.step-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.step-item {
    display: flex;
    gap: 1rem;
}

.step-num {
    width: 28px;
    height: 28px;
    background: rgba(9, 9, 14, 0.04);
    color: var(--text-primary);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}

.step-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.step-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Keyboard Shortcut Box */
.shortcut-box {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(9, 9, 14, 0.03);
    border: none;
    border-bottom: 2px solid var(--color-border);
    padding: 0.5rem 1rem;
    border-radius: 2px;
    margin-top: 0.75rem;
    cursor: pointer;
    user-select: none;
    transition: var(--transition-fast);
}

.shortcut-box:hover {
    border-bottom-color: var(--text-primary);
    background: var(--bg-card-hover);
}

.key-cap {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-primary);
}

.key-plus {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.copy-badge {
    margin-left: 0.5rem;
    font-size: 0.65rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-primary);
    border: 1px solid var(--color-border);
    padding: 1px 6px;
    border-radius: 2px;
}

/* Downloads and alternative tools */
.support-downloads {
    border-left: 1px solid var(--color-border);
    padding-left: 3rem;
}

@media (max-width: 850px) {
    .support-downloads {
        border-left: none;
        padding-left: 0;
        margin-top: 1rem;
        border-top: 1px solid var(--color-border);
        padding-top: 2rem;
    }
}

.download-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.support-downloads > p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.download-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.download-card {
    display: flex;
    align-items: center;
    border: none;
    border-bottom: 2px solid var(--color-border);
    background: var(--bg-card);
    padding: 1rem 1.25rem;
    border-radius: 2px;
    text-decoration: none;
    transition: var(--transition-smooth);
}

.download-card:hover {
    border-bottom-color: var(--text-primary);
    background: var(--bg-card-hover);
    transform: translateY(-2px);
}

.card-icon-wrapper {
    width: 36px;
    height: 36px;
    background: rgba(9, 9, 14, 0.04);
    border: none;
    border-bottom: 2px solid var(--color-border);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
}

.download-card:hover .card-icon-wrapper {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--text-primary);
}

.card-meta {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.app-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.app-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.app-code-arrow {
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: var(--transition-fast);
}

.download-card:hover .app-code-arrow {
    transform: translateX(4px);
    color: var(--text-primary);
}

/* FAQ Section */
.faq-section {
    padding: 80px 0;
}

.search-wrapper {
    max-width: 480px;
    margin: 0 auto 3rem;
}

.search-bar input {
    width: 100%;
    background: var(--bg-card);
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 2px;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.75rem 1.25rem;
    transition: var(--transition-fast);
}

.search-bar input:focus {
    border-bottom-color: var(--text-primary);
    background: var(--bg-card-hover);
}

.faq-list {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    background: var(--bg-card);
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 2px;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.faq-item:hover {
    border-bottom-color: var(--text-primary);
}

.faq-trigger {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1rem;
    color: var(--text-primary);
    transition: color var(--transition-fast);
}

.faq-trigger:hover {
    color: var(--text-primary);
}

.faq-symbol {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 700;
    transition: transform var(--transition-fast);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer-inner {
    padding: 0 1.5rem 1.25rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}

.faq-item.hidden {
    display: none;
}

/* Bento-style Contact Grid */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 850px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    .contact-card.featured {
        grid-column: span 1 !important;
    }
}

.contact-card {
    background: var(--bg-card);
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 2px;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: var(--transition-smooth);
}

.contact-card:hover {
    border-bottom-color: var(--text-primary);
    background: var(--bg-card-hover);
    transform: translateY(-2px);
}

.contact-card.featured {
    grid-column: span 2;
}

.contact-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.contact-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    flex-grow: 1;
}

.contact-card .btn {
    width: 100%;
}

/* Diagnostics Dashboard */
.diag-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (max-width: 1024px) {
    .diag-dashboard {
        grid-template-columns: 1fr;
    }
}

/* System-Diagnose Grid */
.diag-grid {
    background: rgba(9, 9, 14, 0.03);
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 2px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.diag-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.diag-val {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-primary);
}

/* Service Status list */
.service-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.service-status-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 2px;
    border: none;
    border-bottom: 2px solid var(--color-border);
    background: rgba(9, 9, 14, 0.03);
    transition: var(--transition-fast);
}

.service-status-item:hover {
    border-bottom-color: var(--text-primary);
    background: var(--bg-card-hover);
}

.service-icon-initials {
    width: 28px;
    height: 28px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.service-icon-initials.m365 { background: rgba(0, 120, 212, 0.08); color: #0078d4; }
.service-icon-initials.google { background: rgba(66, 133, 244, 0.08); color: #4285f4; }
.service-icon-initials.icloud { background: rgba(0, 153, 255, 0.08); color: #0099ff; }
.service-icon-initials.github { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.service-icon-initials.aws { background: rgba(255, 153, 0, 0.08); color: #ff9900; }
.service-icon-initials.matis { background: rgba(255, 255, 255, 0.08); color: var(--text-primary); }

.service-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.service-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.service-domain {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.status-pill-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

/* Speedtest circular gauge */
.speedtest-gauge-container {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0.5rem auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.speedtest-gauge {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gauge-bg {
    stroke: var(--color-border);
}

.gauge-progress {
    stroke: var(--color-indigo);
    transition: stroke-dashoffset 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    stroke-linecap: round;
}

.gauge-value-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gauge-val-num {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.gauge-val-unit {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* Speedtest Metrics */
.speedtest-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 1rem;
    background: rgba(9, 9, 14, 0.03);
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 2px;
    padding: 0.75rem;
}

.metric-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-right: 1px solid var(--color-border);
}

.metric-box:last-child {
    border-right: none;
}

.metric-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.metric-value {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.1;
}

.metric-unit {
    font-size: 0.55rem;
    color: var(--text-muted);
}

/* Trigger Box custom adjustments for Support */
.trigger-box {
    background: var(--bg-card);
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 2px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    text-align: left;
    margin-bottom: 3rem;
    transition: var(--transition-smooth);
}

.trigger-box:hover {
    border-bottom-color: var(--text-primary);
    background: var(--bg-card-hover);
}

.trigger-status-icon {
    width: 48px;
    height: 48px;
    border-radius: 2px;
    background: rgba(196,162,97, 0.08);
    color: var(--color-indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.trigger-message {
    flex-grow: 1;
}

.trigger-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.trigger-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.trigger-box.non-windows .trigger-status-icon {
    background: rgba(9, 9, 14, 0.04);
    color: var(--text-muted);
}

.trigger-box .btn-primary {
    background: linear-gradient(135deg, var(--color-indigo) 0%, var(--color-violet) 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 12px rgba(196,162,97, 0.20);
}

.trigger-box .btn-primary:hover {
    background: linear-gradient(135deg, #6b61f0 0%, #9d6eff 100%);
    box-shadow: 0 6px 16px rgba(196,162,97, 0.35);
    transform: translateY(-1px);
}

/* ==========================================================================
   Browser Mockup Enclosures (SaaSpo-inspired)
   ========================================================================== */
.browser-mockup {
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: #09090b;
    box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.15), 0 4px 16px -4px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.browser-mockup-header {
    background: #0c0c0f;
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.browser-mockup-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.browser-mockup-dot.red { background-color: #f87171; }
.browser-mockup-dot.yellow { background-color: #fbbf24; }
.browser-mockup-dot.green { background-color: #34d399; }

.browser-mockup-address {
    flex-grow: 1;
    max-width: 230px;
    margin: 0 auto;
    background: #050507;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    height: 14px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Lange Pfade dürfen die 14px-Pille nicht sprengen. */
    overflow: hidden;
}

.browser-mockup-address-text {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
    line-height: 1;
    /* Eine Zeile, Rest mit Auslassungspunkten — der Monospace-Pfad brach
       sonst um und lief sichtbar aus der Adressleiste heraus. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.browser-mockup-body {
    position: relative;
    line-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #07070a;
}

.browser-mockup-body img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
    filter: brightness(0.95) contrast(1.05);
}

/* Video im Rahmen: Bis 06.08.2026 stand diese Regel als Inline-<style> auf den
   Seiten mit Lightbox. Sie gehoert hierher, damit die Inline-Bloecke ersatzlos
   verschwinden koennen. `contain` statt `cover`, weil Bildschirmaufnahmen sonst
   beschnitten werden — bei Fotos waere es umgekehrt. */
.browser-mockup-body video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #07070a;
}

/* Redesign 30.07.2026: Die animierten „Aurora"-Blobs sind abgeschafft —
   das dekorative Farbwolken-Treiben war das staerkste „AI-Template"-Signal.
   Die Container bleiben im Markup (22 Seiten), rendern aber nichts mehr. */
.glow-blob-container,
.glow-blob {
    display: none;
}

/* Ein einziges, STATISCHES Gold-Gluehen ersetzt das animierte 4-Ellipsen-
   Mesh: Der Hero hat damit genau zwei Hintergrundebenen (Verlauf + Gluehen). */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 900px 560px at 22% 30%, rgba(196, 162, 97, 0.10) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   Cookie Consent Banner
   ========================================================================== */
@media (max-width: 600px) {
    .cookie-banner {
        bottom: 1rem;
        width: calc(100% - 2rem);
        padding: 1.25rem;
    }
    .cookie-banner-buttons {
        justify-content: stretch;
    }
    .cookie-banner-buttons .btn {
        flex-grow: 1;
    }
}

/* ==========================================================================
   AI Adaptation Flow Graphic
   ========================================================================== */
.ai-flow-container {
    width: 100%;
    background: #050507;
    border: none;
    border-bottom: 2px solid var(--color-border);
    border-radius: 2px;
    padding: 2.5rem 2rem;
    margin-top: 1.5rem;
    position: relative;
    overflow: hidden;
}

.ai-flow-svg {
    width: 100%;
    height: auto;
    max-height: 240px;
    display: block;
}

.flow-node {
    fill: #09090b;
    stroke: var(--color-border);
    stroke-width: 1.5;
    transition: stroke-color 0.3s ease;
}

.flow-node:hover {
    stroke: var(--text-primary);
}

.flow-path {
    stroke: var(--color-border);
    stroke-width: 1.5;
    stroke-dasharray: 6 6;
    animation: flow-dash 15s linear infinite;
}

.flow-path.active {
    stroke: #ffffff;
    stroke-width: 2;
    animation: flow-dash 8s linear infinite;
}

@keyframes flow-dash {
    to {
        stroke-dashoffset: -100;
    }
}

.flow-pulse {
    fill: #ffffff;
    animation: flow-pulse-animation 2s infinite alternate ease-in-out;
}

@keyframes flow-pulse-animation {
    0% {
        r: 3px;
        opacity: 0.3;
    }
    100% {
        r: 6px;
        opacity: 0.95;
    }
}

.flow-pulse-color {
    fill: #c4a261;
    animation: flow-pulse-color-animation 2.5s infinite alternate ease-in-out;
}

@keyframes flow-pulse-color-animation {
    0% {
        r: 3px;
        opacity: 0.4;
        filter: drop-shadow(0 0 2px #c4a261);
    }
    100% {
        r: 7px;
        opacity: 0.9;
        filter: drop-shadow(0 0 8px #a855f7);
    }
}

/* ==========================================================================
   Product Screenshot Gallery
   ========================================================================== */
.screenshot-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

/* Die Bildunterschrift traegt IMMER eine dunkle Flaeche — sie gehoert optisch
   zum Browser-Rahmen, nicht zur Seite. Ihre Schriftfarbe stand aber auf
   `--text-secondary`, dem Dunkelgrau fuer HELLE Flaechen: gemessene 1,8:1.
   In dunklen Sektionen fiel es nicht auf, weil `.sektion-tief` sie mit
   umfaerbte — auf hellen Sektionen (z. B. dem Neu-Abschnitt) war die
   Unterschrift praktisch unsichtbar. Die Farbe gehoert deshalb an die
   Basisregel, nicht in eine Ausnahme (07.08.2026). */
.screenshot-caption {
    padding: 0.85rem 1.25rem;
    background: #0c0c0f;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: rgba(206, 206, 228, 0.82);
    text-align: left;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .screenshot-gallery {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
}

/* ==========================================================================
   Staggered Reveals & Custom Section Background Overrides
   ========================================================================== */

/* Redesign 30.07.2026: Die Attribut-Matcher auf Inline-Backgrounds sind
   abgeloest — die Sektionen tragen jetzt die Klasse .sektion-tief. */

/* Scroll reveal left/right custom modifiers */
/* Staggered animation triggers */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-stagger.active > * {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.active > *:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger.active > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger.active > *:nth-child(3) { transition-delay: 0.3s; }
.reveal-stagger.active > *:nth-child(4) { transition-delay: 0.4s; }
.reveal-stagger.active > *:nth-child(5) { transition-delay: 0.5s; }
.reveal-stagger.active > *:nth-child(6) { transition-delay: 0.6s; }

/* ==========================================================================
   PREMIUM DARK SECTION STYLES
   Large Color Surfaces · Enterprise AI Visual Language
   ========================================================================== */

/* === Dark Section Base === */
.section-dark {
    background: linear-gradient(160deg, #050610 0%, #0c0d24 50%, #050610 100%);
    position: relative;
    overflow: hidden;
}

.section-dark-indigo {
    background: linear-gradient(135deg, #09092e 0%, #13104a 40%, #0a0e2e 70%, #07061e 100%);
    position: relative;
    overflow: hidden;
}

.section-dark-teal {
    background: linear-gradient(135deg, #00131a 0%, #00252f 40%, #001821 100%);
    position: relative;
    overflow: hidden;
}

/* Dark section text overrides */
.section-dark h2, .section-dark h3,
.section-dark-indigo h2, .section-dark-indigo h3 {
    color: #f0f0ff;
}

.section-dark p, .section-dark-indigo p {
    color: rgba(200,200,255,0.70);
}

.section-dark .section-label,
.section-dark-indigo .section-label {
    color: rgba(129,140,248,0.70);
}

.section-dark .section-header,
.section-dark-indigo .section-header {
    border-top-color: rgba(255,255,255,0.08);
}

/* === Dark Cards (for use inside dark sections) === */
/* === Testimonial Section Dark Override === */
.section-testimonials {
    background: linear-gradient(135deg, #05060f 0%, #0a0c1c 40%, #080a16 70%, #060110 100%) !important;
    border-top: none !important;
    border-bottom: none !important;
    position: relative;
    overflow: hidden;
}

.section-testimonials::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 700px 400px at 10% 50%, rgba(196,162,97,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 500px 500px at 90% 30%, rgba(196,162,97,0.12) 0%, transparent 60%);
    pointer-events: none;
}

.section-testimonials h2,
.section-testimonials .section-header h2 {
    color: #f0f0ff !important;
}

.section-testimonials .section-label {
    color: rgba(196,162,97,0.75) !important;
}

.section-testimonials p {
    color: rgba(200,200,255,0.70) !important;
}

/* Testimonial cards in dark bg */
.section-testimonials .card {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.09) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4) !important;
}

.section-testimonials .card:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(196,162,97,0.30) !important;
    transform: translateY(-6px) !important;
}

.section-testimonials .card p[style*="italic"] {
    color: rgba(230,225,255,0.90) !important;
}

.section-testimonials .card strong {
    color: #f0f0ff !important;
}

.section-testimonials .card span[style*="color: var(--text-muted)"] {
    color: rgba(170,155,220,0.65) !important;
}

.section-testimonials .card div[style*="border-top"] {
    border-top-color: rgba(255,255,255,0.10) !important;
}

/* === Industries / Fokus-Branchen Dark Background === */
.section-industries {
    background: linear-gradient(160deg, #f8f8fd 0%, #f2f2ff 50%, #f8f8fd 100%) !important;
    border-top: 1px solid rgba(196,162,97,0.08) !important;
    border-bottom: 1px solid rgba(196,162,97,0.08) !important;
}

/* === Product Showcase Enhanced === */
.section-products {
    background: #ffffff;
}

/* === Buttons for dark surfaces === */
/* Redesign 30.07.2026: EINE Button-Sprache. Der fruehere Indigo→Violett-
   Gradient mit Farbglow war das Template-Idiom schlechthin — jetzt eine
   solide Goldflaeche mit dunkler Schrift (Kontrast ~8:1) und derselben
   scharfen 2px-Kante wie alle anderen Buttons. */
.btn-hero-primary {
    background: var(--color-gold);
    color: #0a0a14;
    border: 1px solid var(--color-gold);
    box-shadow: none;
    font-weight: 600;
}

.btn-hero-primary:hover {
    background: var(--color-gold-bright);
    border-color: var(--color-gold-bright);
    box-shadow: var(--shadow-glow-gold);
    transform: translateY(-2px);
}

/* Hell-Editorial: Zweitknopf dunkel-auf-hell. */
.btn-hero-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--color-border-hover);
}

.btn-hero-secondary:hover {
    background: rgba(9, 9, 14, 0.05);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* === Card icon upgrades with accent colors === */
.card-icon-teal {
    background: rgba(196,162,97, 0.08);
    color: var(--color-teal);
}

.card-icon-violet {
    background: rgba(196,162,97, 0.08);
    color: var(--color-violet);
}

.card-icon-cyan {
    background: rgba(196,162,97, 0.08);
    color: var(--color-cyan);
}

.card-icon-gold {
    background: rgba(196, 162, 97, 0.08);
    color: var(--color-gold);
}

/* === Footer Dark Upgrade === */
footer {
    background: linear-gradient(180deg, #05060f 0%, #080a1a 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

footer .logo {
    color: #f0f0ff !important;
}

/* Kein Logo-Filter im Footer: Das Schild bleibt Original, der Glow kommt aus .logo-icon. */

footer .footer-desc {
    color: rgba(180,180,220,0.55) !important;
}

footer .footer-column-title {
    color: rgba(200,200,255,0.80) !important;
}

footer .footer-links a {
    color: rgba(160,160,210,0.60) !important;
}

footer .footer-links a:hover {
    color: rgba(200,200,255,0.90) !important;
}

footer .footer-bottom {
    border-top-color: rgba(255,255,255,0.06) !important;
    color: rgba(140,140,180,0.50) !important;
}

footer .footer-bottom-links a {
    color: rgba(140,140,180,0.50) !important;
}

footer .footer-bottom-links a:hover {
    color: rgba(200,200,255,0.80) !important;
}

footer .security-status-indicator {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(160,160,210,0.60) !important;
}

footer .security-status-indicator .dot {
    background-color: rgba(74, 222, 128, 0.8) !important;
    animation: blink-pulse 2s infinite;
}

/* Hell-Editorial 30.07.2026: Der Hero ist hell — der fruehere
   Dunkel-Zustand des Headers ueber dem Hero entfaellt komplett. Die Klasse
   wird vom per-Seite-Skript weiter gesetzt, macht die Flaeche aber nur
   noch transparenter; alle Schrift- und Knopf-Farben bleiben beim hellen
   Standard. */
header.is-hero-top {
    background: rgba(255, 255, 255, 0.65) !important;
    border-bottom-color: transparent !important;
}

header.is-hero-top .nav-link.active::after {
    background: var(--color-gold);
}

/* === Header scroll transition === */
header {
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

header.scrolled {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom-color: var(--color-border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
}

.nav-container {
    transition: height 0.3s ease;
}

header.scrolled .nav-container {
    height: 64px;
}

header.scrolled .logo {
    color: var(--text-primary) !important;
}

/* Kein Logo-Filter im Scroll-Zustand: Das Schild bleibt Original (siehe .logo-icon). */

header.scrolled .nav-link {
    color: var(--text-secondary) !important;
}

header.scrolled .nav-link:hover,
header.scrolled .nav-link.active {
    color: var(--text-primary) !important;
}

header.scrolled .btn-gold {
    border-color: var(--color-border) !important;
    color: var(--text-primary) !important;
}

/* === Hero AI canvas z-index fix for dark bg === */
.hero-graphic-container {
    z-index: 1;
}

/* Auf hellem Grund traegt ein weicher dunkler Bodenschatten die Trennung,
   der Gold-Schein bleibt als Markenglanz. */
.hero-shield-image {
    filter: drop-shadow(0 20px 30px rgba(9, 9, 14, 0.28)) drop-shadow(0 0 26px rgba(196, 162, 97, 0.35)) !important;
}

/* === Dunkle Sektionen (Redesign 30.07.2026) ===
   Ersetzt die frueheren section[style*="rgba(5,8,20"]-Attribut-Matcher
   (die auf den TEXT von Inline-Styles matchten — fragil und in vier
   Schreibvarianten je Regel). Die betroffenen Sektionen tragen jetzt die
   Klasse .sektion-tief; der Klassentausch lief per Skript. Die !important
   auf den Kindregeln bleiben vorerst, weil einzelne Kinder Inline-Farben
   fuer den ALTEN Zustand tragen — Abbau folgt mit der Inline-Bereinigung. */
.sektion-tief {
    background: linear-gradient(150deg, #05060f 0%, #0a0c1c 45%, #05060f 100%) !important;
    border-top: none !important;
    border-bottom: none !important;
}

.sektion-tief h2,
.sektion-tief h3,
.sektion-tief .card-title {
    color: #f0f0ff !important;
}

.sektion-tief .section-label {
    color: rgba(196,162,97,0.85) !important;
}

.sektion-tief p {
    color: rgba(206,206,228,0.72) !important;
}

/* Listen und Bildunterschriften waren beim Farbwechsel uebersehen worden
   (06.08.2026). Die Umfaerbung deckte h2/h3/.card-title/.section-label/p ab —
   `li` und `.screenshot-caption` behielten `--text-secondary`, also das
   Dunkelgrau fuer HELLE Flaechen. Auf der dunklen Sektion ergab das 1,4:1
   statt der geforderten 4,5:1: lesbar nur, wer weiss, was dort steht.
   Etwas kraeftiger als der Fliesstext (0.82 statt 0.72), weil Aufzaehlungen
   die tragenden Aussagen der Wechselbloecke sind. */
/* Nur noch die Listen: Die Bildunterschrift hat ihre helle Farbe seit dem
   07.08.2026 in der Basisregel, weil ihre Flaeche ohnehin immer dunkel ist.
   Die Ausnahme hier haette den Fehler auf hellen Sektionen weiter verdeckt. */
.sektion-tief li {
    color: rgba(206,206,228,0.82) !important;
}

/* Knoepfe in dunklen Sektionen (06.08.2026).

   Dieselbe Luecke wie bei den Listen, nur folgenschwerer: `.btn-secondary`
   und `.btn-gold` tragen `color: var(--text-primary)` — auf hellen Flaechen
   ein Fast-Schwarz. In der dunklen Sektion ergab das gemessene 1,13:1 bzw.
   1,28:1; die Knoepfe waren praktisch unsichtbar. Betroffen waren 11 Knoepfe
   auf fuenf Seiten, darunter die Preis-Editionen.

   Der Gold-Knopf wird hier zur gefuellten Flaeche statt zur Tonung: Er ist in
   diesen Sektionen der primaere Handlungsaufruf, und eine Fuellung traegt
   sowohl den Kontrast als auch die Rangordnung. */
.sektion-tief .btn-secondary {
    color: rgba(232, 232, 245, 0.95) !important;
    border-color: rgba(206, 206, 228, 0.4) !important;
}
.sektion-tief .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(232, 232, 245, 0.85) !important;
}
.sektion-tief .btn-gold {
    background: var(--color-gold) !important;
    color: #14100a !important;
    border-color: #a5813f !important;
}
.sektion-tief .btn-gold:hover {
    background: #d4b270 !important;
    color: #14100a !important;
    box-shadow: 0 8px 24px rgba(196, 162, 97, 0.28) !important;
}
.sektion-tief .btn:focus-visible {
    outline: 2px solid var(--color-gold) !important;
    outline-offset: 3px;
}

.sektion-tief .card {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.09) !important;
}

.sektion-tief .card:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(196,162,97,0.35) !important;
}

.sektion-tief .card p,
.sektion-tief .card .card-list li {
    color: rgba(228,227,240,0.85) !important;
}

.sektion-tief .card strong {
    color: #f0f0ff !important;
}

.sektion-tief .card div {
    border-top-color: rgba(255,255,255,0.10) !important;
}

.sektion-tief .card span {
    color: rgba(216,209,230,0.65) !important;
}

/* === AI Flow Container dark upgrade === */
.ai-flow-container {
    background: linear-gradient(135deg, #050510 0%, #0a0c1c 100%) !important;
    border: 1px solid rgba(196,162,97,0.20) !important;
    border-radius: 12px !important;
}

/* === Grid Background upgrade === */
.grid-bg {
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(196,162,97, 0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(196,162,97, 0.025) 1px, transparent 1px);
}

/* === Product tech tag upgrade === */
.product-tech-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    color: var(--color-gold-text);
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* === Card icon uniform update === */
.card-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    background: rgba(196,162,97, 0.07);
    color: var(--color-indigo);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

/* === Matrix Grid (3-column service grid for dark sections) === */
.matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

/* Variante für vierteilige Abfolgen (Analyse → Einrichtung → Anpassung →
   Betrieb). Im Dreierraster ergäben vier Karten 3 + 1, und die einzelne Karte
   in der zweiten Reihe liest sich wie ein Nachtrag statt wie der vierte
   Schritt.
   Diese Regel MUSS hinter der .matrix-grid-Regel oben stehen: Beide haben
   dieselbe Spezifität, es entscheidet die Reihenfolge. Weiter oben im
   Stylesheet — bei der ersten .matrix-grid-Definition — wäre sie wirkungslos.
   Die Medienabfragen darunter greifen weiterhin und klappen auch dieses
   Raster auf zwei und eine Spalte. */
.matrix-grid-vier {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
    .matrix-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* Card sub-elements */
.card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.card-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    flex-grow: 1;
}

.card-list {
    list-style: none;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.card-list li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-left: 1rem;
    position: relative;
}

.card-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-indigo);
    font-size: 0.75rem;
}

/* Hero stats row */
.hero-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}

.hero-stat {
    display: flex;
    flex-direction: column;
}

.hero-stat-value {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.hero-stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Hero actions */
.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Carousel track wrapper for produkte.html */
.carousel-track-wrapper {
    overflow: hidden;
    width: 100%;
}

.carousel-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-slide {
    min-width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.carousel-counter {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-muted);
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.90);
    border: 1px solid var(--color-border);
    color: var(--text-primary);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition-fast);
    backdrop-filter: blur(8px);
}

.carousel-btn:hover {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
}

.carousel-btn.prev { left: 10px; }
.carousel-btn.next { right: 10px; }

.carousel-dots-bar {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 0.5rem;
    background: #0c0c0f;
    border-top: 1px solid var(--color-border);
}

.product-carousel-wrap {
    position: relative;
}

/* ==========================================================================
   Case Study Spotlight - White Background Card Theme
   ========================================================================== */
.case-study-showcase {
    background: #ffffff !important;
    color: var(--text-secondary) !important;
    border: 1px solid rgba(196, 162, 97, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), var(--shadow-card) !important;
    padding: 2.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.case-study-showcase h3,
.case-study-showcase h4 {
    color: var(--text-primary) !important;
}

.case-study-showcase p {
    color: var(--text-secondary) !important;
}

.case-study-lead {
    color: #8b6b2f !important; /* Premium Dark Gold/Bronze with high contrast */
    font-weight: 600 !important;
}

.case-study-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
    border-bottom: 1px solid #e2e2eb !important;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

.case-study-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.case-study-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.case-study-metric-card {
    background: #f8f8fb !important;
    border: 1px solid #e2e2eb !important;
    padding: 1.5rem;
    border-radius: 12px;
    transition: var(--transition-fast);
}

.case-study-metric-card:hover {
    background: #f0f0f5 !important;
    border-color: rgba(196, 162, 97, 0.5) !important;
}

.case-study-metric-value {
    font-family: var(--font-mono);
    font-size: 2.2rem;
    color: #0f766e !important; /* Dark teal with high contrast */
    font-weight: bold;
    line-height: 1;
}

.case-study-metric-label {
    font-size: 0.85rem;
    color: var(--text-muted) !important;
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.case-study-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    border-top: 1px solid #e2e2eb !important;
    padding-top: 1.5rem;
    margin-top: 2rem;
}

.case-study-footer-text {
    color: var(--text-muted) !important;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.case-study-footer-text svg {
    stroke: #8b6b2f !important; /* High contrast gold/bronze for the lock/shield icon */
}

@media (max-width: 850px) {
    .case-study-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .case-study-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .case-study-header > div:last-child {
        text-align: left !important;
    }
    
    .case-study-header > div:last-child > div {
        justify-content: flex-start !important;
    }
    
    .case-study-footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .case-study-footer > a {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ==========================================================================
   Language Switcher Styles
   ========================================================================== */
/* Visual separator before language switcher group */
.lang-selector-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem 0 0.75rem;
    position: relative;
}

.lang-selector-container::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: var(--color-border);
    opacity: 0.6;
}

/* Language Switcher Pill Container */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.15rem 0.25rem;
}

.lang-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.45rem;
    transition: var(--transition-fast);
    border-radius: 12px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lang-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.05);
}

.lang-btn.active {
    color: var(--color-gold);
    font-weight: 700;
    background: rgba(196, 162, 97, 0.10);
    pointer-events: none;
}

/* Hell-Editorial 30.07.2026: Der Header ist ueber dem hellen Hero nicht
   mehr dunkel — der Sprachumschalter behaelt in jedem Zustand die hellen
   Standardfarben. */
header.is-hero-top .lang-selector-container::before {
    background: rgba(9, 9, 14, 0.12);
}

header.is-hero-top .lang-btn.active {
    color: var(--color-gold-text);
    background: rgba(196, 162, 97, 0.15);
}

/* Mobile responsive navigation placement */
@media (max-width: 1280px) {
    .lang-selector-container {
        padding: 0.75rem 0;
        width: 100%;
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }
    
    .lang-selector-container::before {
        display: none;
    }
    
    .lang-switcher {
        padding: 0.25rem 0.4rem;
    }
    
    .lang-btn {
        font-size: 0.85rem;
        padding: 0.35rem 0.7rem;
    }
}

/* ==========================================================================
   Testimonial Premium Avatars & Utility Classes
   ========================================================================== */
.testimonial-author {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: auto; /* Push to bottom of card if height varies */
}

.avatar-initials {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(196, 162, 97, 0.08);
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    font-family: var(--font-mono);
    border: 1px solid rgba(196, 162, 97, 0.25);
    flex-shrink: 0;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
}

.author-role {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 1px;
}

/* Dark mode testimonials overrides */
.section-testimonials .card .testimonial-author {
    border-top-color: rgba(255, 255, 255, 0.10) !important;
}

.section-testimonials .card .avatar-initials {
    background: rgba(196, 162, 97, 0.15) !important;
    border-color: rgba(196, 162, 97, 0.35) !important;
    color: #e8c87a !important;
}

.section-testimonials .card .author-name {
    color: #f0f0ff !important;
}

.section-testimonials .card .author-role {
    color: rgba(170, 155, 220, 0.65) !important;
}

/* Trust Tagline (Urgency) beneath Proton Calendars */
.booking-trust-tagline {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 0.75rem;
    font-weight: 500;
    display: block;
}

.cta-banner .booking-trust-tagline {
    color: rgba(230, 215, 180, 0.60);
    margin-top: 0.85rem;
}





/* ─── Product dropdown navigation ─────────────────────────────── */
.nav-item-dropdown { position: relative; }
.nav-caret { font-size: 0.7em; opacity: 0.65; margin-left: 3px; }
.nav-submenu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 235px;
    /* Redesign 30.07.2026: helles Panel unter hellem Header — der harte
       Dunkel-Kasten war ein Fremdkoerper. Oeffnet mit 8px-Versatz. */
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.5rem;
    margin: 0.85rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dauer-micro) var(--kurve-rein), transform var(--dauer-micro) var(--kurve-rein), visibility var(--dauer-micro);
    z-index: 110;
    box-shadow: 0 18px 44px -18px rgba(9, 9, 14, 0.28);
}
.nav-item-dropdown:hover > .nav-submenu,
.nav-item-dropdown:focus-within > .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-submenu li { width: 100%; opacity: 1 !important; transform: none !important; }
.nav-submenu .nav-link {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    width: 100%;
}
.nav-submenu .nav-link::after { display: none; }
.nav-submenu .nav-link:hover { background: rgba(9, 9, 14, 0.05); }

@media (max-width: 1280px) {
    /* Untermenues sind mobil dauerhaft ausgeklappt (kein Hover vorhanden).
       Frueher standen sie zentriert und ohne Einzug — dadurch war nicht zu
       erkennen, was Hauptpunkt und was Unterpunkt ist. Jetzt linksbuendig
       mit Einzug und durchgehender Hierarchielinie. */
    .nav-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        border-left: 2px solid var(--color-border);
        border-radius: 0;
        box-shadow: none;
        min-width: 0;
        padding: 0.15rem 0 0.35rem;
        margin: 0 0 0.85rem 0.2rem;
        gap: 0;
        align-items: stretch;
    }
    .nav-submenu .nav-link {
        text-align: left;
        white-space: normal;
        font-size: 0.9rem;
        font-weight: 500;
        opacity: 1;
        padding: 0.5rem 0 0.5rem 0.9rem;
        border-radius: 0;
    }
    /* Der dunkle Hover-Hintergrund stammt vom Desktop-Dropdown (#0a0a1e)
       und waere auf der weissen Flaeche ein schwarzer Balken. */
    .nav-submenu .nav-link:hover {
        background: transparent;
        color: #8a6a2e;
    }
}

/* ── Mobil-Umbruch für die starren Inline-Raster ──────────────────────────
   35 Sektionen quer über die Seite setzen "grid-template-columns: 1fr 1fr"
   als Inline-Stil ohne eigenen Umbruchpunkt — auf dem Handy quetschten sich
   dort zwei Karten nebeneinander. Der Attribut-Selektor (Hausmuster, siehe
   section[style*=…] weiter oben) biegt sie unterhalb von 760px auf eine
   Spalte um; !important ist nötig, weil Inline-Stile sonst immer gewinnen. */
@media (max-width: 760px) {
    main div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* ── Flyer-Formular (Lead-Magnet, postet zur Academy) ───────────────────── */

.flyer-formular { display: grid; gap: 1rem; text-align: left; max-width: 30rem; }
.flyer-formular label { display: grid; gap: 0.35rem; }
.flyer-formular label > span:first-child {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.flyer-formular input[type="text"],
.flyer-formular input[type="email"],
.flyer-formular select {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font: inherit;
    background: #ffffff;
    color: #111118;
}
.flyer-formular input:focus,
.flyer-formular select:focus { outline: 2px solid var(--color-gold); outline-offset: 1px; }
/* Die Einwilligung ist der rechtliche Kern: Kästchen und Text nebeneinander,
   klein, aber vollständig lesbar — und niemals vorangekreuzt. */
.flyer-einwilligung { display: flex; gap: 0.6rem; align-items: flex-start; }
.flyer-einwilligung input { margin-top: 0.25rem; flex-shrink: 0; }
.flyer-einwilligung span { font-size: 0.8rem; line-height: 1.55; color: var(--text-secondary); }

/* ── Blog ─────────────────────────────────────────────────────────────────
   Übersicht (blog.html) und Artikelseiten (blog/*.html). Die Artikelseiten
   erzeugt tools/blog-build.js aus JSON-Inhalten — das Aussehen steckt
   ausschliesslich hier, damit alle Beiträge gleich aussehen und eine
   Designänderung nicht in jeden Artikel nachgezogen werden muss. */

/* Kategoriefilter */
.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    justify-content: center;
}
.blog-pill {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.blog-pill:hover { border-color: var(--color-gold); color: var(--text-primary); }
.blog-pill.aktiv {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: #12100a;
    font-weight: 600;
}

/* Beitragsliste */
.blog-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}
.blog-karte {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
}
.blog-karte:hover {
    transform: translateY(-3px);
    border-color: var(--color-gold);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.10);
}
/* Der Kategoriefilter setzt das hidden-Attribut. Ohne diese Regel bliebe die
   Karte sichtbar: hidden wirkt nur ueber das Standard-Stylesheet des Browsers
   (display: none) und wird von jeder eigenen display-Angabe geschlagen —
   hier vom display: flex der Karte. */
.blog-karte[hidden] { display: none; }
.blog-karte-bild {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    display: block;
    background: linear-gradient(140deg, #0b0c22 0%, #1a1b3d 100%);
}
/* Ohne Bild ein ruhiger Farbverlauf statt einer leeren Fläche */
.blog-karte-platzhalter {
    aspect-ratio: 16 / 9;
    background: linear-gradient(140deg, #0b0c22 0%, #1a1b3d 60%, #2a2350 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(200, 200, 255, 0.35);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
}
.blog-karte-kopf { padding: 1.4rem 1.5rem 0; }
.blog-karte-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.blog-karte-kategorie { color: var(--color-gold); }
.blog-karte h3 {
    font-size: 1.08rem;
    line-height: 1.4;
    margin: 0.6rem 0 0.5rem;
}
.blog-karte p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
    padding: 0 1.5rem;
    flex: 1;
}
.blog-karte-fuss {
    padding: 1.1rem 1.5rem 1.4rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-gold);
}
.blog-leer {
    text-align: center;
    color: var(--text-secondary);
    padding: 3rem 1rem;
}

/* ── Artikelseite ─────────────────────────────────────────────────────── */
.artikel-kopf { max-width: 760px; margin: 0 auto; text-align: center; }
.artikel-kopf h1 { margin: 1rem 0 0; }
.artikel-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(200, 200, 255, 0.55);
}
.artikel-meta .trenner { opacity: 0.4; }

/* Titelbild sitzt zwischen dunklem Kopf und hellem Text */
.artikel-bild {
    display: block;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.artikel-inhalt {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--text-secondary);
}
.artikel-einleitung {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text-primary);
    margin: 0 0 2.5rem;
}
.artikel-inhalt h2 {
    font-size: 1.35rem;
    color: var(--text-primary);
    margin: 2.75rem 0 1rem;
}
.artikel-inhalt p { margin: 0 0 1.25rem; }
.artikel-inhalt a { color: #8a6a2e; }
.artikel-inhalt ul {
    margin: 0 0 1.5rem;
    padding-left: 1.1rem;
    list-style: none;
}
.artikel-inhalt ul li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.6rem;
}
.artikel-inhalt ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-gold);
}

/* Hinweiskasten — dasselbe Motiv wie die Gold-Karten der übrigen Seiten */
.artikel-hinweis {
    background: rgba(196, 162, 97, 0.07);
    border-left: 3px solid var(--color-gold);
    border-radius: 0 12px 12px 0;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.75rem;
}
.artikel-hinweis h3 {
    font-size: 0.98rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}
.artikel-hinweis p:last-child { margin-bottom: 0; }

.artikel-zitat {
    margin: 0 0 1.75rem;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 2px solid var(--color-border);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--text-primary);
}
.artikel-zitat cite {
    display: block;
    margin-top: 0.5rem;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.artikel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 2.5rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.artikel-tags span {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--text-secondary);
}

.artikel-zurueck {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 2rem;
    font-size: 0.9rem;
}

/* ── Sprachfassung: Abspieler mit Wellenform ──────────────────────────────
   Sitzt im dunklen Kopfbereich der Artikelseite, direkt unter der Meta-Zeile.
   Die Wellenform wird beim Bauen aus der Audiodatei berechnet und als SVG
   eingebettet — kein Nachladen, keine Fremdbibliothek. */
.artikel-audio {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 620px;
    margin: 2rem auto 0;
    padding: 0.85rem 1.1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(196, 162, 97, 0.28);
    border-radius: 999px;
}
.artikel-audio-knopf {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--color-gold);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.artikel-audio-knopf:hover { transform: scale(1.06); filter: brightness(1.08); }
.artikel-audio-knopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Dreieck als Abspielzeichen, im laufenden Zustand zwei Balken. */
.audio-symbol {
    width: 0;
    height: 0;
    margin-left: 3px;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #12100a;
}
.artikel-audio.spielt .audio-symbol {
    margin-left: 0;
    width: 12px;
    height: 14px;
    border: none;
    background: linear-gradient(to right, #12100a 0 4px, transparent 4px 8px, #12100a 8px 12px);
}
.artikel-audio-spur {
    flex: 1;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.artikel-audio-spur:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; border-radius: 2px; }
.audio-welle { width: 100%; height: 40px; display: block; }
.audio-welle-basis { fill: rgba(200, 200, 255, 0.32); }
.audio-welle-gespielt { fill: var(--color-gold); }
/* Ersatzdarstellung, wenn beim Bauen kein ffmpeg zur Verfügung stand. */
.audio-balken {
    width: 100%;
    height: 6px;
    border-radius: 2px;
    background: rgba(200, 200, 255, 0.25);
    overflow: hidden;
}
.audio-balken-gespielt { display: block; height: 100%; width: 0; background: var(--color-gold); }
.artikel-audio-zeit {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(200, 200, 255, 0.75);
}

/* ── Abo-Aufruf im Blog-Hero ──────────────────────────────────────────────
   Eigene Klassen statt .btn-secondary: dessen Schriftfarbe ist --text-primary
   und damit für den dunklen Hero gedacht wie ein Scheinwerfer für den Keller. */
.hero-abo {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}
.hero-abo-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    background: var(--color-gold);
    color: #12100a;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.hero-abo-knopf:hover { filter: brightness(1.08); transform: translateY(-1px); }
/* Das übliche Rundfunk-Zeichen: Punkt mit zwei Bögen. */
.hero-abo-knopf::before {
    content: "";
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: #12100a;
    -webkit-mask: radial-gradient(circle 2.4px at 2px 12px, #000 99%, transparent 100%),
        radial-gradient(circle 7px at 2px 12px, transparent 60%, #000 61% 74%, transparent 75%),
        radial-gradient(circle 12px at 2px 12px, transparent 60%, #000 61% 74%, transparent 75%);
    mask: radial-gradient(circle 2.4px at 2px 12px, #000 99%, transparent 100%),
        radial-gradient(circle 7px at 2px 12px, transparent 60%, #000 61% 74%, transparent 75%),
        radial-gradient(circle 12px at 2px 12px, transparent 60%, #000 61% 74%, transparent 75%);
}
.hero-abo-mehr {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: rgba(200, 200, 255, 0.8);
    text-underline-offset: 4px;
}
.hero-abo-mehr:hover { color: #fff; }

/* Verfasserin ─────────────────────────────────────────────────────────────
   Grosses rundes Porträt rechts auf der Kante zwischen dunklem Kopfbereich und
   hellem Text. Die Zone ist null Pixel hoch und das Bild um die halbe Höhe
   angehoben — so sitzt es genau auf der Naht, ohne den Textfluss zu verschieben. */
.artikel-autor { display: inline-flex; align-items: center; gap: 0.45rem; }
.artikel-autor-rolle { opacity: 0.7; }

.artikel-portrait-zone {
    position: relative;
    height: 0;
    z-index: 3;
}
.artikel-portrait-zone .container {
    display: flex;
    justify-content: flex-end;
}
.artikel-portrait {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
    transform: translateY(-50%);
    border: 3px solid var(--color-gold);
    box-shadow: 0 14px 34px rgba(5, 6, 15, 0.45);
    background: #12121a;
}

.artikel-autorbox {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    margin-top: 2.5rem;
    padding: 1.25rem 1.5rem;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
.artikel-autorbox-bild {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-gold);
}
.artikel-autorbox-name {
    margin: 0 0 0.35rem;
    font-weight: 600;
    color: var(--text-primary);
}
/* Der Zusatz „AI Agent" bleibt sichtbar — Transparenz ist hier der Punkt. */
.artikel-autorbox-name span {
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(196, 162, 97, 0.45);
    background: rgba(196, 162, 97, 0.08);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a6a2e;
    vertical-align: middle;
}
.artikel-autorbox-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text-secondary);
}
.artikel-autorbox-text a { color: #8a6a2e; }

@media (max-width: 900px) {
    /* Auf schmalen Schirmen kleiner, sonst drängt es den Abspieler ein. */
    .artikel-portrait { width: 104px; height: 104px; border-width: 2px; }
}

@media (max-width: 560px) {
    .artikel-autorbox { flex-direction: column; gap: 0.9rem; }
    .artikel-portrait { width: 84px; height: 84px; }
}

/* Abo-Hinweis am Ende eines Beitrags */
.artikel-abo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.artikel-abo strong { color: var(--text-primary); font-weight: 600; }
.artikel-abo a { color: #8a6a2e; white-space: nowrap; }

/* ── Newsfeeds abonnieren ─────────────────────────────────────────────── */
.blog-abo {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
}
.blog-abo a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.blog-abo a:hover { border-color: var(--color-gold); color: var(--text-primary); }
.blog-abo a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-gold);
}

@media (max-width: 760px) {
    .blog-liste { grid-template-columns: 1fr; }
    .artikel-inhalt { font-size: 0.98rem; }
    .artikel-audio { gap: 0.75rem; padding: 0.7rem 0.8rem; }
    .artikel-audio-zeit { display: none; }
}

/* ── Entwurfsband auf nicht veröffentlichten Beiträgen ────────────────────
   Bewusst laut: Wer den Vorschaulink geschickt bekommt, soll auf den ersten
   Blick sehen, dass hier nichts freigegeben ist. Ein noindex im Kopf sieht
   niemand. */
.entwurf-band {
    position: relative;
    z-index: 60;
    padding: 0.9rem 1.5rem;
    background: #7a2e2e;
    color: #ffffff;
    font-size: 0.92rem;
    line-height: 1.5;
    text-align: center;
}

.entwurf-band strong { color: #ffffff; }

.entwurf-band code {
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.85em;
}

/* ── Anmelde-Assistent ────────────────────────────────────────────────────
   Mehrstufiges Formular fuer Beratungsanfragen (drei Schritte) und
   Testinstanzen (sechs Schritte). Die Schritte sind <fieldset>-Bloecke;
   assistent.js blendet sie nacheinander ein.

   Warum die Schritte per [hidden] verschwinden und nicht per display:none in
   einer Klasse: [hidden] nimmt den Block auch fuer Screenreader und fuer die
   Tabulatorreihenfolge heraus. Eine Klasse allein wuerde die Felder unsichtbar,
   aber weiterhin anspringbar lassen — der Nutzer landete beim Tabben in einem
   Schritt, den er nicht sieht. */

.assistent { display: grid; gap: 1.5rem; text-align: left; }
.assistent[hidden] { display: none; }

/* Solange assistent.js nicht gelaufen ist, stehen alle Schritte untereinander.
   Das ist Absicht: Wer die Seite mit langsamer Verbindung oeffnet, sieht
   Inhalt statt eines leeren Kastens. */
.assistent.ist-bereit .assistent-schritt[hidden] { display: none; }

/* Fortschritt mit Beschriftung statt anonymer Punkte.
   Punkte allein sagen „du bist bei 2 von 5" — sie sagen nicht, was noch
   kommt. Wer weiss, dass nach „Team" nur noch „Kontakt" folgt, bricht
   seltener ab. Die Beschriftungen stehen im Markup und werden deshalb von
   i18n.js mituebersetzt; erzeugter Text bliebe deutsch. */
.assistent-fortschritt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    margin: 0;
    padding: 0 0 0.25rem;
    list-style: none;
    border-bottom: 1px solid var(--color-border);
}
.assistent-marke {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.assistent-marke::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--color-border);
    flex-shrink: 0;
}
.assistent-marke.ist-erledigt { color: var(--text-secondary); }
.assistent-marke.ist-erledigt::before { background: var(--color-emerald); }
.assistent-marke.ist-aktiv {
    color: var(--text-primary);
    font-weight: 600;
}
.assistent-marke.ist-aktiv::before {
    background: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(196, 162, 97, 0.22);
}
.assistent-stand {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.assistent-schritt {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
    max-width: 34rem;
    align-content: start;
}
.assistent-schritt:focus { outline: none; }

/* Kein Hereinfahren mehr.
   Der Schritt wurde vorher um 0.75rem seitlich eingeblendet — waehrend der
   Bewegung wandert jedes Eingabefeld unter dem Mauszeiger weg, und wer beim
   Wechsel direkt klicken will, trifft daneben. Ein reines Aufblenden ohne
   Ortsveraenderung hat denselben Zweck (der Wechsel ist sichtbar) ohne den
   Preis (bewegliche Ziele). Zusaetzlich haelt assistent.js alle Schritte auf
   gleicher Hoehe, damit der Kasten beim Blaettern nicht springt. */
.assistent-schritt.ist-aktiv { animation: assistent-ein 0.14s ease-out both; }
@keyframes assistent-ein {
    from { opacity: 0.25; }
    to   { opacity: 1; }
}

.assistent-schritt > legend {
    padding: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
}
.assistent-hinweis {
    margin: -0.35rem 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.assistent label { display: grid; gap: 0.35rem; }
.assistent label > span:first-child {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.assistent input[type="text"],
.assistent input[type="email"],
.assistent input[type="tel"],
.assistent select,
.assistent textarea {
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    font: inherit;
    background: #ffffff;
    color: #111118;
}
.assistent textarea { min-height: 7rem; resize: vertical; }
.assistent input:focus,
.assistent select:focus,
.assistent textarea:focus { outline: 2px solid var(--color-gold); outline-offset: 1px; }

/* Bestaetigung beim Ausfuellen.
   Ein Formular, das erst beim Weiterklicken sagt, ob etwas stimmt, laesst den
   Ausfuellenden im Ungewissen. Ein Haken direkt an der Beschriftung und ein
   gruener Rand bestaetigen sofort — und zwar nur, wenn das Feld auch wirklich
   gueltig ist, nicht schon beim ersten Zeichen einer E-Mail-Adresse. */
.assistent label.ist-gut > span:first-child::after {
    content: " ✓";
    color: var(--color-emerald);
    font-weight: 700;
}
.assistent label.ist-gut input,
.assistent label.ist-gut select,
.assistent label.ist-gut textarea {
    border-color: var(--color-emerald);
    background-color: rgba(47,158,99, 0.04);
}

/* Auswahl als Karten: Bei „SaaS oder On-Premises" ist die Entscheidung wichtig
   genug, um Platz zu bekommen — ein Aufklappmenue versteckt sie. */
.assistent-wahl { display: grid; gap: 0.75rem; }
.assistent-wahl label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.8rem;
    align-items: start;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.assistent-wahl label:hover { border-color: var(--color-border-hover); background: var(--bg-card-hover); }
.assistent-wahl input { grid-row: span 2; margin-top: 0.2rem; }
.assistent-wahl label > span:first-of-type {
    font-family: inherit;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
}
.assistent-wahl .assistent-wahl-erklaerung {
    grid-column: 2;
    font-size: 0.83rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.assistent-wahl input:checked ~ span { color: var(--text-primary); }
.assistent-wahl label:has(input:checked) {
    border-color: var(--color-gold);
    background: rgba(196, 162, 97, 0.07);
}

/* Der Honigtopf. Nicht display:none — manche Roboter fuellen gezielt nur
   Felder, die sichtbar berechnet sind. Hier steht er ausserhalb des Bildes,
   ist aber technisch vorhanden. Fuer Menschen unerreichbar: kein Tabstopp,
   keine Ansage. */
.assistent-honigtopf {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.assistent-zusammenfassung {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 1.1rem 1.25rem;
    border-radius: 12px;
    background: var(--bg-section);
    font-size: 0.9rem;
}
.assistent-zusammenfassung dt {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.assistent-zusammenfassung dd { margin: 0; color: var(--text-primary); }

/* Weiterkommen ist die Hauptsache, Zurueckgehen die Ausnahme.
   Vorher standen beide als gleich grosse Knoepfe nebeneinander — das laesst
   offen, was gemeint ist. Jetzt: ein breiter Knopf direkt unter den Feldern,
   also dort, wo die Hand nach der letzten Eingabe ohnehin ist. „Zurueck"
   darunter als schlichter Textknopf. */
.assistent-navigation {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    max-width: 34rem;
}
.assistent-navigation .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}
.assistent-navigation .btn.laedt { opacity: 0.6; pointer-events: none; }
.assistent-zurueck {
    padding: 0.25rem 0.5rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.assistent-zurueck:hover { color: var(--text-primary); }
.assistent-zurueck:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

.assistent-fehler {
    margin: 0;
    padding: 0.85rem 1rem;
    border-left: 3px solid #b3261e;
    border-radius: 2px;
    background: rgba(179, 38, 30, 0.07);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-primary);
}
.assistent-fehler:focus { outline: 2px solid #b3261e; outline-offset: 2px; }

.assistent-danke {
    padding: 1.75rem;
    border-radius: 12px;
    border: 1px solid var(--color-gold);
    background: rgba(196, 162, 97, 0.07);
}
.assistent-danke h3 { margin-top: 0; }
.assistent-danke :last-child { margin-bottom: 0; }

/* Ersatzweg: erscheint ohne JavaScript und solange der siteKey fehlt. Kein
   Trostpflaster, sondern ein gleichwertiger Weg — Termin, Telefon, Anschrift. */
.assistent-ersatz {
    display: grid;
    gap: 0.9rem;
    padding: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--bg-section);
}
.assistent-ersatz p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--text-secondary); }

@media (max-width: 560px) {
    .assistent-zusammenfassung { grid-template-columns: 1fr; gap: 0.15rem 0; }
    .assistent-zusammenfassung dd { margin-bottom: 0.6rem; }
    .assistent-navigation .btn { flex: 1 1 100%; justify-content: center; }
}

/* Wer Bewegung abbestellt hat, bekommt den Wechsel ohne Animation — der
   Schritt springt einfach um. */
@media (prefers-reduced-motion: reduce) {
    .assistent-schritt.ist-aktiv { animation: none; }
    .assistent-marke { transition: none; }
}

/* ── Startseite: Wege, Preise, Fragen ─────────────────────────────────────
   Bausteine des Umbaus vom 27.07.2026. Die Startseite fuehrte vorher 16
   gleichwertige CTAs und rund 31 Karten in einem einzigen gleichfoermigen
   Raster. Hier steht, was die drei Wege optisch ungleich macht — denn genau
   das war der Punkt: gleich grosse Kacheln behaupten gleiche Wichtigkeit. */

/* Der zweite Weg im Hero ist bewusst nur Text. Ein zweiter Knopf gleicher
   Staerke hebt den ersten auf. */
.hero-nebenweg {
    margin: 1rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.hero-nebenweg a { color: var(--text-secondary); }

/* Beratung nimmt die volle Breite, Software und Ausbildung teilen sich die
   zweite Zeile. Die Flaeche ist die Aussage. */
.wege-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.wege-grid .weg-haupt { grid-column: 1 / -1; }
.wege-grid .card { display: flex; flex-direction: column; }
.wege-grid .card h3 { margin: 0.6rem 0 0.9rem; font-size: 1.25rem; }
.wege-grid .card > div:last-child { margin-top: auto; }

/* Preise gehoeren auf die Startseite, nicht hinter ein Verkaufsgespraech.
   Wer 29 Euro ausgeben will, ruft dafuer niemanden an. */
.preis-liste {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.1rem;
}
.preis-liste li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.92rem;
}
.preis-liste li:last-child { border-bottom: 0; }
.preis-liste span {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Der ehrliche Zwischenstand. Wer eine Zulassung nur beantragt hat, schreibt
   das hin — sonst verspricht die Seite eine Urkunde, die es nicht gibt. */
.hinweis-band {
    margin: 1.25rem 0 0;
    padding: 0.9rem 1rem;
    border-left: 3px solid var(--color-gold);
    border-radius: 2px;
    background: rgba(196, 162, 97, 0.08);
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Fragen und Antworten. Eine Spalte, keine Aufklapper: Antwortmaschinen
   loesen einen Absatz unter einer Frage-Ueberschrift zuverlaessiger heraus
   als den Inhalt eines geschlossenen <details>. */
.faq-liste { display: grid; gap: 0; }
.faq-eintrag {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border);
}
.faq-eintrag:first-child { padding-top: 0; }
.faq-eintrag:last-child { border-bottom: 0; padding-bottom: 0; }
.faq-eintrag h3 {
    margin: 0 0 0.6rem;
    font-size: 1.08rem;
    line-height: 1.45;
    color: var(--text-primary);
}
.faq-eintrag p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.75;
    max-width: 62ch;
}

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

/* Der Kopf der Seite klebt oben. Ohne Abstand schoebe er beim Sprung zum
   Assistenten genau die erste Zeile des Formulars unter sich. */
.assistent-abschnitt,
section:has(> .container .assistent) { scroll-margin-top: 96px; }
.assistent-abschnitt .card:has(.assistent),
.card:has(> .assistent) { scroll-margin-top: 96px; }

/* Vorschauband des Assistenten. Erscheint nur mit ?vorschau in der Adresse
   und nur, solange kein siteKey gesetzt ist. Bewusst auffaellig: Ein Formular,
   das echt aussieht und nichts sendet, darf niemand versehentlich fuer scharf
   halten. */
.assistent-vorschauband {
    margin: 0;
    padding: 0.8rem 1rem;
    border-left: 4px solid #7a2e2e;
    border-radius: 2px;
    background: rgba(122, 46, 46, 0.08);
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-primary);
}

/* ── Untermenue: Lesbarkeit auf dem dunklen Ausklapp-Panel ────────────────
   Das Desktop-Dropdown hat eine eigene, dauerhaft dunkle Flaeche (#0a0a1e) —
   unabhaengig davon, ob der Kopf gerade hell (gescrollt) oder dunkel (ueber
   dem Hero) ist. Die Eintraege erbten aber die Farbe der Hauptnavigation und
   standen damit als #3c3c48 auf #0a0a1e: gemessene 1,8:1, WCAG verlangt 4,5:1.
   Auf dem hellen Kopf war der Text praktisch unsichtbar.

   Die Farbe wird deshalb am Panel festgemacht, nicht am Kopfzustand. Der
   Selektor traegt header + .nav-menu, um die Zustandsregel
   header.is-hero-top .nav-link zu uebertreffen; die mobile Variante bleibt
   unberuehrt, weil dort das Panel transparent auf weissem Grund liegt. */
/* Redesign 30.07.2026: Das Panel ist jetzt hell — die Linkfarben folgen
   dem hellen Grund (vorher hell-auf-dunkel fuer den alten Dunkel-Kasten). */
@media (min-width: 1281px) {
    header .nav-menu .nav-submenu .nav-link {
        color: var(--text-secondary);
    }
    header .nav-menu .nav-submenu .nav-link:hover,
    header .nav-menu .nav-submenu .nav-link:focus-visible,
    header .nav-menu .nav-submenu .nav-link.active {
        color: var(--text-primary);
    }
}

/* ── Produktseiten: Wechselstrecke (Odoo-Muster, 28.07.2026) ─────────────
   Abwechselnd Bild links / Text rechts. Ein Block = eine Funktionsaussage
   mit einem echten Screenshot; die Tiefe (Kartenlisten der frueheren
   Einzelsektionen) steckt in einem <details> darunter — sichtbar kompakt,
   fuer Crawler und Interessierte vollstaendig. */
.wechselblock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 3rem 0;
}
.wechselblock + .wechselblock { border-top: 1px solid var(--color-border); }
/* Jeder zweite Block tauscht die Seiten — das Auge bekommt einen Rhythmus,
   statt eine Kartenwand zu scannen. */
.wechselblock:nth-of-type(even) .wechselblock-bild { order: 2; }
.wechselblock-bild img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    box-shadow: 0 24px 48px -24px rgba(9, 9, 20, 0.35);
}
.wechselblock-text h2 { margin: 0.5rem 0 1rem; font-size: 1.6rem; }
.wechselblock-text > p { color: var(--text-secondary); line-height: 1.75; margin: 0 0 1rem; }

.wechselblock-details {
    margin-top: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--bg-section);
}
.wechselblock-details summary {
    cursor: pointer;
    padding: 0.75rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    list-style: none;
}
.wechselblock-details summary::-webkit-details-marker { display: none; }
.wechselblock-details summary::before { content: "+ "; color: var(--color-gold); }
.wechselblock-details[open] summary::before { content: "− "; }
.wechselblock-details summary:hover { color: var(--text-primary); }
.wechselblock-details > div { padding: 0 1.25rem 1.25rem; }
.wechselblock-details h3 {
    font-size: 0.95rem;
    margin: 1.1rem 0 0.35rem;
    color: var(--text-primary);
}
.wechselblock-details p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; margin: 0 0 0.5rem; }
.wechselblock-details ul { margin: 0.35rem 0 0.75rem 1.1rem; padding: 0; }
.wechselblock-details li { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.3rem; }

@media (max-width: 900px) {
    .wechselblock { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.25rem 0; }
    /* Bild immer ueber dem Text — auf dem Telefon gibt es kein links/rechts. */
    .wechselblock:nth-of-type(even) .wechselblock-bild { order: 0; }
}

/* Wechselblock mit Browser-Mockup als Bildseite (Ausrollung 28.07.2026).
   Die Produktseiten zeigen ihre Screenshots in Browser-Rahmen mit Adresszeile —
   die bleibt erhalten, weil die Adresse Teil der Erzaehlung ist. Nur die
   Bildunterschrift entfaellt: ihr Text steht im Wechselblock rechts. */
.wechselblock-bild .browser-mockup { width: 100%; margin: 0; }
.wechselblock-bild .browser-mockup .screenshot-caption { display: none; }

/* Restgalerie unterhalb einer Wechselstrecke: kompaktere Kacheln, zwei je
   Zeile — die grosse Buehne gehoert den Wechselbloecken darueber. */
.wechsel-restgalerie {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.wechsel-restgalerie .browser-mockup { margin: 0; }
.wechsel-restgalerie .screenshot-caption { font-size: 0.8rem; }
@media (max-width: 900px) {
    .wechsel-restgalerie { grid-template-columns: 1fr; }
}

/* ── Produktbox im Hero (28.07.2026, freigestellt 30.07.2026) ─────────────
   Die Boxen liegen als freigestellte WebP mit Alphakanal vor
   (img/productboxes/<slug>-frei.webp) und schweben direkt auf dem dunklen
   Hero. Der beim Freistellen entfallene gerenderte Schatten wird durch
   einen drop-shadow ersetzt — der wirkt auf die Alphakontur, nicht auf den
   Bildrahmen. */
.produktbox-hero {
    max-width: 360px;
    margin: 0 auto;
}
.produktbox-hero img {
    width: 100%;
    height: auto;
    display: block;
    /* Hell-Editorial: weicherer Schatten auf hellem Hero. */
    filter: drop-shadow(0 22px 28px rgba(9, 9, 14, 0.22))
            drop-shadow(0 5px 9px rgba(9, 9, 14, 0.12))
            drop-shadow(0 0 14px rgba(196, 162, 97, 0));
    transition: filter 0.45s ease;
}
/* Beim Ueberfahren legt sich ein dezenter goldener Schein um die
   Alphakontur — dritter drop-shadow, im Ruhezustand mit Alpha 0
   vorgehalten, damit die Filterliste gleich lang bleibt und der
   Uebergang weich animiert statt zu springen. Gold = --color-gold. */
.produktbox-hero:hover img {
    filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.55))
            drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35))
            drop-shadow(0 0 14px rgba(196, 162, 97, 0.45));
}
@media (prefers-reduced-motion: reduce) {
    .produktbox-hero img { transition: none; }
}
@media (max-width: 900px) {
    .produktbox-hero { max-width: 260px; margin-top: 1.5rem; }
}

/* ── Produktvideo (30.07.2026) ────────────────────────────────────────────
   16:9-Slot zwischen Hero und Wechselstrecke. Lokales MP4 (video/<slug>.mp4),
   KEIN externer Dienst. Fehlt die Datei, kippt security.js den Slot in den
   "Video folgt"-Zustand (.pv-pending) — Spans stehen im Markup und werden
   von i18n.js uebersetzt. */
.produkt-video {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 960px;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(196,162,97, 0.14) 0%, transparent 55%),
        linear-gradient(160deg, #0b0e1d 0%, #05060f 100%);
}
.produkt-video video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    background: #05060f;
}
/* Platzhalter-Spans sind unsichtbar, solange der Player lebt. */
.produkt-video .sp-label,
.produkt-video .sp-note { display: none; }
.produkt-video.pv-pending {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.6rem; padding: 1.5rem; text-align: center;
}
.produkt-video.pv-pending .sp-label,
.produkt-video.pv-pending .sp-note { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   Redesign 30.07.2026 — Bewegung als System
   ══════════════════════════════════════════════════════════════════════════ */

/* Seitenwechsel als sanfte Blende (natives Cross-Document-Feature).
   Browser ohne Unterstuetzung navigieren einfach normal. */
@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation-duration: 0.15s;
}
::view-transition-new(root) {
    animation-duration: 0.25s;
}

/* Vollstaendiger reduced-motion-Pfad: JEDE Animation und Transition faellt
   auf quasi-sofort, Reveals sind sofort sichtbar, der Hero-Canvas haelt
   zusaetzlich in security.js an. Das schliesst die groesste
   Barrierefreiheits-Luecke des alten Bewegungssystems. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Produkt-Schaufenster auf der Startseite (30.07.2026) ─────────────────
   Nach dem adasma-Muster: die Produkte als klickbare Kacheln direkt auf
   der Startseite — Boxbild, Name, Nutzenzeile, Preis, Mehr-erfahren.
   Hell-editorial, nutzt die freigestellten Boxen und die bereits
   uebersetzten Katalog-Texte. */
.schaufenster {
    padding: 90px 0 100px;
    background: var(--bg-section);
    border-top: 1px solid var(--color-border);
}
.schaufenster-kopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}
.schaufenster-kopf h2 {
    margin: 0;
    font-size: var(--fs-3);
    letter-spacing: -0.02em;
}
.schaufenster-alle {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--color-gold-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(138, 109, 51, 0.35);
    padding-bottom: 2px;
    white-space: nowrap;
    transition: border-color var(--dauer-micro) var(--kurve-rein);
}
.schaufenster-alle:hover { border-color: var(--color-gold-text); }
.schaufenster-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.sf-kachel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem 1.75rem 1.6rem;
    text-decoration: none;
    color: inherit;
    transition: transform var(--dauer-micro) var(--kurve-rein),
                border-color var(--dauer-micro) var(--kurve-rein),
                box-shadow var(--dauer-micro) var(--kurve-rein);
}
.sf-kachel:hover {
    transform: translateY(-2px);
    border-color: rgba(196, 162, 97, 0.55);
    box-shadow: var(--shadow-card-hover);
}
.sf-bild {
    height: 168px;
    align-self: center;
    margin-bottom: 1.4rem;
}
.sf-bild img {
    height: 100%;
    width: auto;
    display: block;
    filter: drop-shadow(0 14px 18px rgba(9, 9, 14, 0.16));
    transition: transform var(--dauer-micro) var(--kurve-rein);
}
.sf-kachel:hover .sf-bild img { transform: translateY(-3px); }
.sf-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}
.sf-zeile {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 1rem;
    min-height: 2.8em;
}
.sf-fuss {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin-top: auto;
    border-top: 1px solid var(--color-border);
    padding-top: 0.85rem;
}
.sf-preis {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--color-gold-text);
}
.sf-mehr {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}
.sf-kachel:hover .sf-mehr { color: var(--color-gold-text); }
@media (max-width: 1024px) {
    .schaufenster-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .schaufenster-grid { grid-template-columns: 1fr; }
    .sf-bild { height: 140px; }
}

/* ── Branchen-Wegweiser auf der Startseite (30.07.2026) ───────────────────
   Unter dem Produkt-Schaufenster: Branchen-Kacheln, Klick zeigt den
   Showcase, welche Produkte dort wie helfen. Inspiriert vom
   adasma-Branchenraster, aber als Wegweiser mit Produkt-Zuordnung. */
.branchen {
    padding: 90px 0 100px;
    background: #ffffff;
}
.branchen-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 2rem;
}
.br-knopf {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-section);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dauer-micro) var(--kurve-rein),
                color var(--dauer-micro) var(--kurve-rein),
                background var(--dauer-micro) var(--kurve-rein);
}
.br-knopf:hover {
    border-color: rgba(196, 162, 97, 0.55);
    color: var(--text-primary);
}
.br-knopf[aria-expanded="true"] {
    background: #ffffff;
    border-color: var(--color-gold);
    color: var(--text-primary);
    box-shadow: inset 0 -3px 0 var(--color-gold);
}
.br-panel {
    background: var(--bg-section);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2.25rem 2.25rem 1.75rem;
}
.br-panel[hidden] { display: none; }
.br-panel h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}
.br-intro {
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 720px;
    margin-bottom: 1.5rem;
}
.br-produkte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}
.br-produkt {
    display: block;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dauer-micro) var(--kurve-rein),
                transform var(--dauer-micro) var(--kurve-rein);
}
.br-produkt:hover {
    border-color: rgba(196, 162, 97, 0.55);
    transform: translateY(-2px);
}
.br-produkt strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--color-gold-text);
    margin-bottom: 0.3rem;
}
.br-produkt span {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
@media (max-width: 1024px) {
    .branchen-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .branchen-grid { grid-template-columns: 1fr; gap: 0.5rem; }
    .br-panel { padding: 1.5rem 1.25rem 1.25rem; }
}

/* ── Branchen-Einsatzberichte (30.07.2026) ────────────────────────────────
   Seiten unter branchen/: als Szenario gekennzeichnete, ausfuehrliche
   Verkaufsgeschichten je Branche. Bild-Slot nutzt den vorhandenen
   Platzhalter-Mechanismus (data-screenshot in security.js). */
.bericht-bild {
    max-width: 960px;
    margin: 2.5rem auto 0;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--bg-section);
}
.bericht-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bericht-bild .screenshot-pending { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; border: 0; }
.bericht-inhalt { max-width: 800px; }
.bericht-inhalt h2 {
    font-size: var(--fs-2);
    margin: 2.5rem 0 1rem;
    letter-spacing: -0.02em;
}
.bericht-inhalt p {
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 1.1rem;
}
.bericht-inhalt p strong { color: var(--text-primary); }
.bericht-szenario {
    font-size: 0.88rem;
    color: var(--text-muted);
    border-left: 3px solid var(--color-gold);
    padding: 0.6rem 0 0.6rem 1rem;
    margin: 2.5rem 0;
}
.bericht-cta {
    background: var(--bg-section);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem 2rem 2.25rem;
    margin-top: 1rem;
}
.br-bericht-link {
    display: inline-block;
    margin-top: 1.25rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--color-gold-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(138, 109, 51, 0.35);
    padding-bottom: 2px;
}
.br-bericht-link:hover { border-color: var(--color-gold-text); }

/* KI-Kennzeichnung fuer generierte Branchen-Symbolbilder (Art. 50 KI-VO,
   hauseigene Transparenz-Linie — 30.07.2026). */
.bericht-bild-hinweis {
    max-width: 960px;
    margin: 0.5rem auto 0;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Beta-Menue: Gruppentitel und Leerhinweis im Dropdown (30.07.2026). */
.nav-submenu-gruppe {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.55rem 0.75rem 0.2rem;
}
.nav-submenu-gruppe:first-child { padding-top: 0.3rem; }
.nav-submenu-leer {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0.2rem 0.75rem 0.5rem;
}

/* ML-EVP-Beta-Seite: Telefon-Screenshot-Reihe (30.07.2026). */
.mlevp-schau {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 2.5rem;
}
.mlevp-schau img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}
@media (max-width: 900px) {
    .mlevp-schau { grid-template-columns: repeat(2, 1fr); }
}

/* ML-EVP: TikTok-Demo als ausgehende Link-Karte (kein Embed — CSP und
   Cookie-Freiheit bleiben unangetastet, 30.07.2026). */
.mlevp-tiktok {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    max-width: 640px;
    background: var(--bg-section);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    margin: 0 0 3rem;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dauer-micro) var(--kurve-rein), transform var(--dauer-micro) var(--kurve-rein);
}
.mlevp-tiktok:hover { border-color: rgba(196, 162, 97, 0.55); transform: translateY(-2px); }
.mlevp-tiktok-play {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #09090e;
    position: relative;
}
.mlevp-tiktok-play::before {
    content: "";
    position: absolute; top: 50%; left: 55%;
    transform: translate(-50%, -50%);
    border-style: solid; border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #ffffff;
}
.mlevp-tiktok strong { display: block; font-family: var(--font-heading); font-size: 1rem; color: var(--text-primary); }
.mlevp-tiktok-sub { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.mlevp-tiktok-pfeil { margin-left: auto; font-weight: 700; color: var(--color-gold-text); }

/* MLVibeScan: Vorstellungsvideo im Hero statt einer Produktbox (05.08.2026).
   Hochformat aus dem Social-Schnitt, deshalb 9:16 und eine feste Hoehe statt
   voller Spaltenbreite. */
.mlvibescan-demo {
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: #05060f;
    box-shadow: var(--shadow-card);
}
.mlvibescan-demo video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #05060f;
}
@media (max-width: 900px) {
    .mlvibescan-demo { max-width: 280px; }
}

/* ML-EVP: Karte mit dem Play-Store-Beta-Link (05.08.2026) — der einzige
   Teilnahmeweg, deshalb bewusst als goldene Haupt-CTA-Flaeche gestaltet. */
.mlevp-betalink {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    max-width: 640px;
    background: linear-gradient(135deg, #cfae6e 0%, var(--color-gold) 55%, #b08c4d 100%);
    border: 1px solid #a5813f;
    border-radius: 12px;
    padding: 1.4rem 1.6rem;
    margin: 1.5rem 0 2rem;
    text-decoration: none;
    color: #1c1710;
    box-shadow: 0 10px 28px rgba(176, 140, 77, 0.35);
    transition: transform var(--dauer-micro) var(--kurve-rein), box-shadow var(--dauer-micro) var(--kurve-rein);
}
.mlevp-betalink:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(176, 140, 77, 0.5);
}
.mlevp-betalink:focus-visible { outline: 2px solid var(--color-gold-text); outline-offset: 3px; }
.mlevp-betalink-play {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #14100a;
    position: relative;
}
.mlevp-betalink-play::before {
    content: "";
    position: absolute; top: 50%; left: 56%;
    transform: translate(-50%, -50%);
    border-style: solid; border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent var(--color-gold);
}
.mlevp-betalink strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: #14100a;
    margin-bottom: 0.2rem;
}
.mlevp-betalink-sub { font-size: 0.88rem; color: rgba(28, 23, 16, 0.8); line-height: 1.5; overflow-wrap: anywhere; }
.mlevp-betalink-pfeil {
    margin-left: auto;
    font-weight: 700;
    font-size: 1.4rem;
    color: #14100a;
    transition: transform var(--dauer-micro) var(--kurve-rein);
}
.mlevp-betalink:hover .mlevp-betalink-pfeil { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
    .mlevp-betalink, .mlevp-betalink-pfeil { transition: none; }
    .mlevp-betalink:hover { transform: none; }
    .mlevp-betalink:hover .mlevp-betalink-pfeil { transform: none; }
}

/* ML-EVP: Hochformat-Demo-Video im Telefonrahmen (05.08.2026). */
.mlevp-demo {
    max-width: 340px;
    margin: 1.5rem 0 2.5rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: #05060f;
    box-shadow: var(--shadow-card);
}
.mlevp-demo video {
    display: block;
    width: 100%;
    height: auto;
}

/* ML-EVP: Video links neben dem Einfuehrungstext (05.08.2026). Bleibt beim
   Scrollen im Blick (sticky), auf Mobil stapelt es ueber dem Text. */
.mlevp-intro {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2.25rem;
    align-items: start;
    margin-bottom: 1rem;
}
.mlevp-intro .mlevp-demo {
    margin: 0;
    position: sticky;
    top: 100px;
}
.mlevp-demo-hinweis {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    color: rgba(220, 220, 240, 0.7);
    padding: 0.5rem 0.75rem 0.6rem;
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 760px) {
    .mlevp-intro { grid-template-columns: 1fr; }
    .mlevp-intro .mlevp-demo { position: static; max-width: 280px; margin: 0 auto; }
}

/* Preiskarten: die Zeile mit den enthaltenen Nutzern (06.08.2026).

   Sie steht auf der dunklen Sektion und braucht deshalb das HELLE Gold —
   `--color-gold-text` (#8a6d33) ist fuer helle Flaechen gedacht und kaeme hier
   auf rund 2:1. Das `!important` ist noetig, weil `.sektion-tief p` seinerseits
   mit `!important` faerbt; ohne das hier bliebe die Zeile grau wie der Rest
   und der Preis verloere seinen wichtigsten Zusatz. */
#preise .mlo-preis-nutzer {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    color: rgba(212, 178, 112, 0.95) !important;
}

/* OpsFlow: Video neben dem Text statt schwebend (07.08.2026).
   Es ist eine Hochformat-Aufnahme, deshalb schmale Spalte links und der
   erklaerende Text rechts — dieselbe Aufteilung wie beim ML-EVP-Demo. */
.ops-reel {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    margin-bottom: 3.5rem;
}
.ops-reel-rahmen {
    aspect-ratio: 9 / 16;
    max-width: 300px;
    margin: 0;
}
.ops-reel-hinweis {
    position: absolute;
    bottom: 8px; right: 8px;
    z-index: 5;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.75);
    pointer-events: none;
}
/* Rechts vom Video sechs Ansichten, drei in der Breite. Sie ersetzen den
   Fliesstext, der die Sektionseinleitung nur wiederholt hat. */
.ops-raster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-content: start;
}
.ops-kachel { margin: 0; }
.ops-kachel .browser-mockup { margin: 0; }
.ops-kachel figcaption {
    padding-top: 0.55rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(206, 206, 228, 0.82);
}
.ops-kachel .mlo-schlagwort { display: block; margin-bottom: 0.15rem; color: rgba(212, 178, 112, 0.95); }
@media (max-width: 1100px) {
    .ops-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .ops-reel { grid-template-columns: 1fr; gap: 2rem; }
    .ops-reel-rahmen { max-width: 280px; margin: 0 auto; }
}
@media (max-width: 560px) {
    .ops-raster { grid-template-columns: 1fr; }
}

/* Sprungleiste unter dem Hero (06.08.2026).
   Die Produktseite bleibt lang genug, dass ein Kaeufer gezielt springen
   koennen soll. Bewusst schlicht: Textlinks in einer Zeile, kein zweites
   Navigationsmuster neben dem Kopfmenue. */
.mlo-sprung {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.mlo-sprung a {
    color: var(--color-gold-text);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color var(--dauer-micro) var(--kurve-rein);
}
.mlo-sprung a:hover { border-bottom-color: var(--color-gold-text); }
.mlo-sprung a:focus-visible { outline: 2px solid var(--color-gold-text); outline-offset: 3px; }
/* Der Kopf ist rund 80 px hoch — ohne diesen Abstand landet die Ueberschrift
   des Sprungziels darunter. */
#screenshots, #neu, #funktionen, #preise, #fragen { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { .mlo-sprung a { transition: none; } }

/* Bild-Lupe (06.08.2026) — Gegenstueck zu initMedienLupe() in security.js.

   Loest die drei Inline-Fassungen auf den Produktseiten ab. Farben und Masse
   sind aus der msls-Fassung uebernommen, damit sich fuer Bestandsseiten nichts
   sichtbar aendert; neu sind Fokusring und der reduced-motion-Fall. */
.ist-vergroesserbar { cursor: zoom-in; }

.medien-lupe {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3, 4, 12, 0.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dauer-block) var(--kurve-rein);
}
.medien-lupe.ist-offen { opacity: 1; pointer-events: auto; }
.medien-lupe figure {
    margin: 0;
    max-width: min(92vw, 1500px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.medien-lupe img,
.medien-lupe video {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid rgba(196, 162, 97, 0.35);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.medien-lupe figcaption {
    max-width: 60ch;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(210, 210, 240, 0.85);
}
.medien-lupe .ml-zaehler {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: rgba(180, 185, 220, 0.7);
}
.medien-lupe button {
    position: absolute;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: #e8e8ff;
    background: rgba(15, 18, 40, 0.85);
    border: 1px solid rgba(196, 162, 97, 0.4);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--dauer-micro) var(--kurve-rein), transform var(--dauer-micro) var(--kurve-rein);
}
.medien-lupe button:hover { background: rgba(60, 55, 30, 0.9); transform: scale(1.06); }
.medien-lupe button:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.medien-lupe .ml-zu { top: 1.25rem; right: 1.25rem; }
.medien-lupe .ml-vor { right: 1.25rem; top: 50%; transform: translateY(-50%); }
.medien-lupe .ml-zurueck { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.medien-lupe .ml-vor:hover,
.medien-lupe .ml-zurueck:hover { transform: translateY(-50%) scale(1.06); }
@media (max-width: 760px) {
    .medien-lupe .ml-vor,
    .medien-lupe .ml-zurueck { width: 40px; height: 40px; }
    .medien-lupe figcaption { font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
    .medien-lupe, .medien-lupe button { transition: none; }
    .medien-lupe button:hover { transform: none; }
    .medien-lupe .ml-vor:hover,
    .medien-lupe .ml-zurueck:hover { transform: translateY(-50%); }
}

/* Galerie „Weitere Ansichten" (06.08.2026): Miniaturen statt Textwaende.
   Die sieben Aufnahmen, die vorher je einen eigenen Wechselblock trugen,
   stehen hier als Raster — sichtbar bleibt alles, gelesen werden muss nichts. */
.mlo-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}
.mlo-galerie figure {
    margin: 0;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform var(--dauer-micro) var(--kurve-rein), border-color var(--dauer-micro) var(--kurve-rein), box-shadow var(--dauer-micro) var(--kurve-rein);
}
.mlo-galerie figure:hover {
    transform: translateY(-3px);
    border-color: var(--color-gold);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.mlo-galerie img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid var(--color-border);
}
.mlo-galerie figcaption {
    padding: 0.8rem 1rem 0.9rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
/* Schlagwort vor der Bildunterschrift: benennt die abgebildete Ansicht, damit
   man nicht erst das Bild deuten muss. Versalien und Sperrung wie bei den
   Bereichs-Labels, damit es als Kennzeichnung liest und nicht als Satzanfang. */
.mlo-schlagwort {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-gold-text);
    margin-right: 0.15rem;
}
@media (prefers-reduced-motion: reduce) {
    .mlo-galerie figure { transition: none; }
    .mlo-galerie figure:hover { transform: none; }
}

/* Ergebnisband ueber der Einwandbehandlung (07.08.2026).
   Sechs Aussagen darueber, was sich im Alltag aendert — bewusst als Raster mit
   goldenem Kopfstrich wie die Funktionskacheln, damit die Seite nicht ein
   drittes Kartenmuster bekommt. */
.mlo-ergebnisse {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.1rem;
}
.mlo-ergebnis {
    position: relative;
    padding: 1.35rem 1.4rem 1.25rem;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
.mlo-ergebnis::before {
    content: "";
    position: absolute; top: 0; left: 1.4rem;
    width: 26px; height: 3px;
    background: var(--color-gold);
    border-radius: 0 0 3px 3px;
}
.mlo-ergebnis h3 {
    font-size: 0.98rem;
    line-height: 1.35;
    margin: 0.35rem 0 0.5rem;
}
.mlo-ergebnis p {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

/* Einwandbehandlung als aufklappbare Fragen (06.08.2026).

   Bewusst <details>/<summary> und kein eigenes Skript: Die Fragen sind auch
   ohne JavaScript bedienbar, die Antworten stehen fuer Suchmaschinen und
   Antwortmaschinen vollstaendig im Quelltext, und die Tastaturbedienung
   bringt der Browser mit. Kein Zustand, den irgendjemand pflegen muss. */
.mlo-frage {
    border-bottom: 1px solid var(--color-border);
    padding: 0.15rem 0;
}
.mlo-frage summary {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 1.05rem 2.5rem 1.05rem 0;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--text-primary);
    transition: color var(--dauer-micro) var(--kurve-rein);
}
.mlo-frage summary::-webkit-details-marker { display: none; }
.mlo-frage summary:hover { color: var(--color-gold-text); }
.mlo-frage summary:focus-visible { outline: 2px solid var(--color-gold-text); outline-offset: 3px; }
/* Winkel rechts, gedreht statt ausgetauscht — ein Zeichen weniger im Markup. */
.mlo-frage summary::after {
    content: "";
    position: absolute;
    top: 1.45rem; right: 0.5rem;
    width: 8px; height: 8px;
    border-right: 2px solid var(--color-gold-text);
    border-bottom: 2px solid var(--color-gold-text);
    transform: rotate(45deg);
    transition: transform var(--dauer-block) var(--kurve-rein);
}
.mlo-frage[open] summary::after { transform: rotate(-135deg); }
.mlo-frage[open] summary { color: var(--color-gold-text); }
.mlo-frage p {
    margin: 0 0 1.2rem;
    padding-right: 2.5rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
@media (prefers-reduced-motion: reduce) {
    .mlo-frage summary, .mlo-frage summary::after { transition: none; }
}

/* Startseite: Das Schild mit dem Netz sitzt oben statt mittig (06.08.2026).

   Der Hero-Raster zentriert seine Spalten senkrecht. Beim langen Fliesstext
   links rutschte das Schild dadurch weit nach unten — es stand auf Hoehe des
   Absatzes statt auf Hoehe der Ueberschrift, und der obere Bereich blieb leer.
   Nur die Startseite betroffen, deshalb eine eigene Klasse statt einer
   Aenderung an `.hero-graphic-container`, die alle Produktseiten traefe. */
.hero-grafik-oben { align-self: start; margin-top: 0.5rem; }
@media (max-width: 900px) {
    /* Gestapelt gibt es kein Oben und Unten mehr — die Regel wuerde nur eine
       Luecke zwischen Text und Grafik erzeugen. */
    .hero-grafik-oben { align-self: auto; margin-top: 0; }
}

/* MLOffice: Funktions-Explorer (06.08.2026).

   Warum ueberhaupt: 27 gleichrangige Kacheln waren eine Wand — man liest sie
   nicht, man ueberfliegt sie und behaelt nichts. Acht Bereiche mit Anzahl
   beantworten "was deckt das ab?" in einem Blick; die Einzelheiten holt sich,
   wer sie will.

   Die Mechanik: Die Bereichsknoepfe liegen in einem Raster, die Aufklapp-
   Flaeche gehoert per `grid-column: 1 / -1` ueber die ganze Breite. Damit sie
   unter der ZEILE des geklickten Knopfes erscheint und nicht mitten in ihr,
   verschiebt das Skript sie mit `order` — reine Anzeigereihenfolge, die
   Vorlesereihenfolge im Markup bleibt Knopf → zugehoerige Flaeche. */
.mlo-explorer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 4rem;
}
.mlo-kat {
    position: relative;
    display: block;
    text-align: left;
    padding: 1.35rem 1.4rem 1.15rem;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: transform var(--dauer-micro) var(--kurve-rein), border-color var(--dauer-micro) var(--kurve-rein), box-shadow var(--dauer-micro) var(--kurve-rein);
}
.mlo-kat::before {
    content: "";
    position: absolute; top: 0; left: 1.4rem;
    width: 26px; height: 3px;
    background: var(--color-gold);
    border-radius: 0 0 3px 3px;
    transition: width var(--dauer-block) var(--kurve-rein);
}
.mlo-kat:hover { transform: translateY(-3px); border-color: var(--color-gold); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10); }
.mlo-kat:focus-visible { outline: 2px solid var(--color-gold-text); outline-offset: 3px; }
.mlo-kat[aria-expanded="true"] {
    border-color: var(--color-gold);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}
/* Der Goldstrich waechst auf die volle Kartenbreite — das eine Signal, das
   den offenen Bereich auch ohne Farbe vom Rest unterscheidet. */
.mlo-kat[aria-expanded="true"]::before { width: calc(100% - 2.8rem); }
.mlo-kat-zahl {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 26px; height: 26px;
    margin-bottom: 0.5rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(196, 162, 97, 0.16);
    color: var(--color-gold-text);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}
.mlo-kat-titel {
    display: block;
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 0.3rem;
}
.mlo-kat-teaser {
    display: block;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
/* Die Aufforderung zum Klicken steht ausgeschrieben da.
   Der erste Entwurf hatte nur einen kleinen Winkel in der Ecke — daran hat
   niemand erkannt, dass sich die Karte oeffnen laesst. Ein Wort ist hier
   mehr wert als ein Zeichen. */
.mlo-kat-mehr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold-text);
}
/* Der Winkel sitzt in einem Kreis — dieselbe Bauform wie ein Schaltknopf,
   damit die Zeile nicht als blosse Beschriftung gelesen wird. */
.mlo-kat-pfeil {
    flex: 0 0 auto;
    position: relative;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(196, 162, 97, 0.45);
    background: rgba(196, 162, 97, 0.12);
    transition: background var(--dauer-micro) var(--kurve-rein);
}
.mlo-kat-pfeil::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    border-right: 2px solid var(--color-gold-text);
    border-bottom: 2px solid var(--color-gold-text);
    transform: translate(-50%, -70%) rotate(45deg);
    transition: transform var(--dauer-block) var(--kurve-rein);
}
.mlo-kat:hover .mlo-kat-pfeil { background: rgba(196, 162, 97, 0.28); }
.mlo-kat[aria-expanded="true"] .mlo-kat-pfeil::before { transform: translate(-50%, -30%) rotate(-135deg); }
/* Die Beschriftung sagt, was der naechste Klick tut — nicht, was der letzte
   getan hat. Beide Worte stehen im Markup, damit die Sprachumschaltung sie
   findet; sichtbar ist immer nur eines. */
.mlo-kat-mehr-zu { display: none; }
.mlo-kat[aria-expanded="true"] .mlo-kat-mehr-text { display: none; }
.mlo-kat[aria-expanded="true"] .mlo-kat-mehr-zu { display: inline; }

/* Die Sichtbarkeit haengt am `hidden`-Attribut, NICHT an einer Hoehen-
   Animation. Der erste Entwurf blendete `grid-template-rows` von 0fr auf 1fr
   auf — schoen, aber gefaehrlich: Laeuft die Bewegung nicht (Hintergrundtab,
   Browser ohne animierbare Rasterzeilen), bleibt die Flaeche auf 0 und der
   Inhalt ist unsichtbar, obwohl der Bereich als offen gilt. Jetzt ist offen
   schlicht offen; die Bewegung machen die einzelnen Posten und darf ausfallen. */
.mlo-panel { grid-column: 1 / -1; }
.mlo-panel-innen { min-height: 0; }
.mlo-panel-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    padding: 1rem 0 0.35rem;
}
/* Die Einzelnen laufen versetzt ein — 45 ms Abstand, gedeckelt, damit der
   letzte Posten eines grossen Bereichs nicht spuerbar hinterherhinkt. */
.mlo-panel.ist-offen .mlo-feature {
    animation: mlo-posten-ein var(--dauer-block) var(--kurve-rein) backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes mlo-posten-ein {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .mlo-kat, .mlo-kat::before, .mlo-kat-pfeil { transition: none; }
    .mlo-kat:hover { transform: none; }
    .mlo-panel.ist-offen .mlo-feature { animation: none; }
}

/* MLOffice: Etikett an der Produktbox (06.08.2026).
   Sitzt oben rechts auf der Box, leicht gekippt wie ein aufgeklebter Aufkleber.
   Bewusst KEIN Puls und kein Schimmern — die Neuigkeit traegt sich selbst. */
.mlo-box-mcp { position: relative; }
.mlo-etikett {
    position: absolute;
    bottom: 6%;
    right: -2%;
    z-index: 3;
    display: block;
    max-width: 210px;
    padding: 0.7rem 0.95rem 0.75rem;
    background: linear-gradient(135deg, #cfae6e 0%, var(--color-gold) 55%, #b08c4d 100%);
    border: 1px solid #a5813f;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(120, 92, 40, 0.35);
    text-decoration: none;
    color: #14100a;
    transform: rotate(3deg);
    transition: transform var(--dauer-micro) var(--kurve-rein), box-shadow var(--dauer-micro) var(--kurve-rein);
}
.mlo-etikett:hover { transform: rotate(0deg) translateY(-2px); box-shadow: 0 16px 38px rgba(120, 92, 40, 0.45); }
.mlo-etikett:focus-visible { outline: 2px solid #14100a; outline-offset: 3px; }
.mlo-etikett-neu {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    padding: 0.1rem 0.4rem;
    margin-bottom: 0.35rem;
    border: 1px solid rgba(20, 16, 10, 0.45);
    border-radius: 999px;
}
.mlo-etikett-text {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    line-height: 1.25;
}
.mlo-etikett-sub {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(20, 16, 10, 0.78);
}
@media (max-width: 900px) {
    .mlo-etikett { bottom: 3%; right: 0; max-width: 180px; padding: 0.55rem 0.75rem 0.6rem; }
    .mlo-etikett-text { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
    .mlo-etikett { transition: none; }
    .mlo-etikett:hover { transform: rotate(3deg); }
}

/* ML-EVP: grosses App-Icon als rechte Hero-Spalte (05.08.2026). */
.mlevp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    max-width: 1160px;
}
.mlevp-icon {
    width: clamp(220px, 27vw, 400px);
    height: auto;
    border-radius: 24px;
    box-shadow: var(--shadow-card), 0 0 0 1px var(--color-border);
}
@media (max-width: 860px) {
    .mlevp-hero { grid-template-columns: 1fr; }
    .mlevp-icon { width: min(220px, 60vw); justify-self: center; order: -1; }
}

/* ML-EVP-Intro auf voller Containerbreite (05.08.2026): groesseres Video,
   Lesespalte fuer den Text — Kanten fluchten mit dem Hero darueber. */
.container > .mlevp-intro {
    grid-template-columns: 340px minmax(0, 760px);
    justify-content: space-between;
    gap: 3.5rem;
    margin-bottom: 2rem;
}
@media (max-width: 900px) {
    .container > .mlevp-intro { grid-template-columns: 1fr; gap: 2rem; }
    .container > .mlevp-intro .mlevp-demo { position: static; max-width: 300px; margin: 0 auto; }
}

/* ══ Rundgang: Bildstrecke als Stationen statt Bild-für-Bild ══════════════
   Die Screenshots sind Aufnahmen einer Windows-Anwendung, keine Webseiten.
   Deshalb kein Browser-Rahmen mit drei Punkten und vor allem kein
   object-fit: cover — eine beschnittene Oberflaeche laesst das Produkt
   billig aussehen. Die Buehne hat ein festes Feld (16/10), das Bild liegt
   mit contain darin und behaelt sein Seitenverhaeltnis.
   Bewegung nur auf opacity/transform, <= 200 ms, reduced-motion respektiert. */
.ml-rundgang { margin-top: 2.5rem; }

/* Reiterleiste */
.rg-reiter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(206, 206, 228, 0.14);
    padding-bottom: 0.9rem;
    margin-bottom: 2rem;
}
.rg-reiter-knopf {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.6rem 1.05rem;
    background: transparent;
    border: 1px solid rgba(206, 206, 228, 0.18);
    border-radius: 999px;
    color: rgba(206, 206, 228, 0.72);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color var(--dauer-micro) ease-out, border-color var(--dauer-micro) ease-out, background-color var(--dauer-micro) ease-out;
}
.rg-reiter-knopf:hover { color: rgba(240, 240, 250, 0.95); border-color: rgba(196, 162, 97, 0.45); }
.rg-reiter-knopf:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.rg-reiter-knopf .rg-nr { font-size: 0.68rem; color: rgba(196, 162, 97, 0.75); }
.rg-reiter-knopf.ist-aktiv {
    background: rgba(196, 162, 97, 0.12);
    border-color: var(--color-gold);
    color: #f2f0e8;
}
.rg-reiter-knopf.ist-aktiv .rg-nr { color: var(--color-gold); }

/* Station: Buehne links, Text rechts */
.rg-station { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.rg-station[hidden] { display: none; }

.rg-rahmen {
    border: 1px solid rgba(206, 206, 228, 0.16);
    border-radius: 12px;
    overflow: hidden;
    background: #07070a;
}
.rg-titelleiste {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    border-bottom: 1px solid rgba(206, 206, 228, 0.12);
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: rgba(206, 206, 228, 0.78);
}
.rg-titelleiste::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-gold);
    flex: none;
}
.rg-buehne {
    position: relative;
    aspect-ratio: var(--rg-verhaeltnis, 16 / 9);
    display: grid;
    grid-template: 1fr / 1fr;
    place-items: center;
    background: #07070a;
}
/* Blatt fuellt die Buehne absolut aus, das Bild liegt mit contain darin:
   kein Beschnitt, und die Buehnenhoehe springt beim Wechsel nicht. Ein
   prozentuales max-height greift hier nicht zuverlaessig, weil die Hoehe der
   Buehne aus aspect-ratio stammt und damit unbestimmt sein kann. */
.rg-blatt { margin: 0; position: absolute; inset: 0; }
.rg-blatt[hidden] { display: none; }
.rg-buehne img,
.rg-buehne video {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
    opacity: 0;
    animation: rg-ein var(--dauer-micro) ease-out forwards;
}
@keyframes rg-ein { from { opacity: 0; } to { opacity: 1; } }
/* Die Bildunterschrift steht sichtbar in der Textspalte; im Rahmen bleibt
   sie nur fuer die Lupe stehen, die sie von dort liest. */
.rg-blatt figcaption {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Textspalte */
.rg-text h3 { font-size: 1.35rem; margin: 0 0 0.75rem; }
.rg-text > p { color: rgba(206, 206, 228, 0.82); line-height: 1.75; margin: 0 0 1.5rem; }

.rg-mini { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.rg-mini-knopf {
    padding: 0;
    width: 82px;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(206, 206, 228, 0.2);
    border-radius: 6px;
    overflow: hidden;
    background: #07070a;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity var(--dauer-micro) ease-out, border-color var(--dauer-micro) ease-out, transform var(--dauer-micro) ease-out;
}
.rg-mini-knopf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-mini-knopf:hover { opacity: 0.9; transform: translateY(-2px); }
.rg-mini-knopf:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.rg-mini-knopf.ist-aktiv { opacity: 1; border-color: var(--color-gold); }

.rg-unterschrift {
    color: rgba(206, 206, 228, 0.82);
    font-size: 0.88rem;
    line-height: 1.65;
    margin: 0;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(206, 206, 228, 0.12);
    min-height: 5.2em;
}
.rg-zaehler {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(206, 206, 228, 0.7);
    margin-top: 0.75rem;
}

@media (max-width: 900px) {
    .rg-station { grid-template-columns: 1fr; gap: 1.5rem; }
    .rg-reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.75rem; }
    .rg-reiter::-webkit-scrollbar { display: none; }
    .rg-reiter-knopf { flex: none; }
    .rg-unterschrift { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .rg-buehne img, .rg-buehne video { animation: none; opacity: 1; }
    .rg-mini-knopf:hover { transform: none; }
}

/* ══ Fotostrecke: eine Abfolge in Schritten ═══════════════════════════════
   Variante des Rundgangs fuer Bilder, die eine REIHENFOLGE haben (etwa die
   Einrichtung eines Checks ueber sechs Reiter). Der Unterschied zur
   Station ist nur die Beschriftung: nummerierte Schritte auf einer Linie
   statt gleichrangiger Reiter, plus Zurueck/Weiter unter der Buehne. */
.rg-folge .rg-reiter {
    position: relative;
    gap: 0;
    justify-content: space-between;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1.75rem;
}
/* Die Linie, auf der die Schritte sitzen. */
.rg-folge .rg-reiter::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 18px;
    height: 1px;
    background: rgba(206, 206, 228, 0.16);
}
.rg-folge .rg-reiter-knopf {
    position: relative;
    z-index: 1;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    text-align: center;
}
.rg-folge .rg-reiter-knopf .rg-nr {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(206, 206, 228, 0.22);
    background: #0b0d1a;
    color: rgba(206, 206, 228, 0.72);
    font-size: 0.75rem;
    transition: border-color var(--dauer-micro) ease-out, background-color var(--dauer-micro) ease-out, color var(--dauer-micro) ease-out;
}
.rg-folge .rg-reiter-knopf.ist-aktiv { background: transparent; border: none; }
.rg-folge .rg-reiter-knopf.ist-aktiv .rg-nr {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: #14100a;
}
.rg-folge .rg-reiter-knopf:hover .rg-nr { border-color: rgba(196, 162, 97, 0.6); }

/* Zurueck/Weiter */
.rg-blaettern { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.rg-blaettern button {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid rgba(206, 206, 228, 0.22);
    border-radius: 2px;
    color: rgba(232, 232, 245, 0.92);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    cursor: pointer;
    transition: border-color var(--dauer-micro) ease-out, color var(--dauer-micro) ease-out;
}
.rg-blaettern button:hover:not([disabled]) { border-color: var(--color-gold); }
.rg-blaettern button[disabled] { opacity: 0.35; cursor: default; }
.rg-blaettern button:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

@media (max-width: 640px) {
    .rg-folge .rg-reiter-knopf span:not(.rg-nr) { display: none; }
    .rg-folge .rg-reiter { justify-content: space-around; }
}

/* Das Reel steht jetzt allein — die zweite Spalte trug den Textblock, der
   dem Rundgang gewichen ist. Hochformat-Video zentriert, nicht gestreckt. */
.ops-reel-solo { grid-template-columns: 1fr; justify-items: center; margin-bottom: 2.5rem; }
.ops-reel-solo .ops-reel-rahmen { width: 280px; max-width: 100%; }

/* ══ Funktionsraster: Inventar als Kacheln statt als Liste ════════════════
   Vierzehn Listenpunkte in einer Karte ergaben einen 1.331 px hohen Block
   Fliesstext neben einer zweiten Textspalte — zwei Waende nebeneinander.
   Als Raster mit Haarlinien liest es sich wie ein Datenblatt: ein Begriff,
   eine Zeile, in einer Sekunde ueberflogen. */
.fk-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}
.fk-kachel {
    /* Feste Flaeche, damit die Haarlinien des Rasters tragen — ein
       --color-bg gibt es in diesem Tokensatz nicht. */
    background: #ffffff;
    padding: 1.25rem 1.35rem;
    transition: background-color var(--dauer-micro) ease-out;
}
.fk-kachel:hover { background: rgba(196, 162, 97, 0.06); }
.fk-kachel dt {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}
.fk-kachel dd {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
@media (prefers-reduced-motion: reduce) { .fk-kachel { transition: none; } }