/* Erzeugt von _werkzeuge/css-buendeln.js – nicht von Hand ändern.
   Quelle: css/style.css und die davon eingebundenen Module.
   Nach jeder Stiländerung neu bauen. */

/* ===== style.css ===== */

/* ===== modules\bewegung.css ===== */
/* ===================================================================
   AERONA SPACE – BEWEGUNG

   Eine Grundlage für alles, was sich bewegt. Vorher gab es acht
   verschiedene Dauern (0,2 s bis 1,5 s) ohne erkennbares System und
   siebenundachtzig Übergänge auf `all`.

   ## Warum `all` schadet

   `transition: all` heißt: Der Browser beobachtet **jede**
   Eigenschaft. Ändert sich beim Überfahren die Breite, wird auch die
   mitbewegt – und Breite lässt sich nicht auf der Grafikkarte
   berechnen. Der Browser muss das ganze Seitengerüst neu vermessen,
   und zwar in jedem einzelnen Bild. Das ist der Unterschied zwischen
   flüssig und zäh.

   Deshalb: **Nur `transform` und `opacity` bewegen.** Beide laufen auf
   der Grafikkarte und lösen keine Neuberechnung aus. Farben sind
   ebenfalls harmlos genug.

   ## Die vier Dauern

   Mehr braucht es nicht. Wer eine fünfte anlegt, sollte begründen
   können, warum keine der vier passt.
   =================================================================== */

:root {
    /* --- Dauern --------------------------------------------------- */

    /* Sofortige Rückmeldung: Knöpfe, Verweise, kleine Zeichen.
       Unter 100 ms wirkt es wie ein Sprung, über 200 ms wie Verzögerung. */
    --bew-schnell: 140ms;

    /* Der Normalfall: Karten, Klappmenüs, Hervorhebungen. */
    --bew-normal: 240ms;

    /* Große Flächen und Einblendungen beim Scrollen. Was viel Fläche
       bewegt, darf länger brauchen – sonst wirkt es hektisch. */
    --bew-ruhig: 420ms;

    /* Nur für Dauerbewegungen, die von selbst laufen. */
    --bew-endlos: 2400ms;

    /* --- Kurven --------------------------------------------------- */

    /* Etwas kommt herein: schnell starten, sanft ankommen. */
    --bew-rein: cubic-bezier(.16, .84, .44, 1);

    /* Etwas geht hinaus: sanft lösen, zügig verschwinden. */
    --bew-raus: cubic-bezier(.5, 0, .84, .16);

    /* Hin und zurück, etwa beim Überfahren. */
    --bew-beides: cubic-bezier(.4, 0, .2, 1);

    /* Ein Hauch Überschwingen für Elemente, die „einrasten". Sparsam –
       auf großen Flächen wirkt es unruhig. */
    --bew-feder: cubic-bezier(.34, 1.56, .64, 1);

    /* --- Fertige Bündel ------------------------------------------- */

    /* Das, was `transition: all` eigentlich meinte: alles Übliche,
       nichts, was das Gerüst neu vermisst. */
    --bew-standard:
        transform var(--bew-normal) var(--bew-beides),
        opacity var(--bew-normal) var(--bew-beides),
        color var(--bew-schnell) var(--bew-beides),
        background-color var(--bew-normal) var(--bew-beides),
        border-color var(--bew-normal) var(--bew-beides),
        box-shadow var(--bew-normal) var(--bew-beides);

    /* Für Knöpfe und Verweise: knapper. */
    --bew-knopf:
        transform var(--bew-schnell) var(--bew-beides),
        background-color var(--bew-schnell) var(--bew-beides),
        color var(--bew-schnell) var(--bew-beides),
        border-color var(--bew-schnell) var(--bew-beides);
}

/* ===================================================================
   Wenn jemand keine Bewegung will

   Im Betriebssystem lässt sich einstellen, dass Animationen reduziert
   werden. Menschen tun das, weil ihnen davon schwindelig oder übel
   wird – bei vestibulären Störungen ist das keine Vorliebe, sondern
   eine Notwendigkeit.

   Bewegung wird deshalb nicht abgeschaltet, sondern auf einen Wimpern-
   schlag verkürzt: Zustandswechsel bleiben nachvollziehbar, aber
   nichts fliegt mehr über den Bildschirm. Endlosbewegungen laufen
   genau einmal und halten dann an.
   =================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    /* Was nur zum Schmuck schwebt, steht still. */
    .schwebt,
    [class*="float"],
    [class*="pulse"] {
        animation: none !important;
    }
}

/* ===================================================================
   Berührung statt Zeigegerät

   Auf einem Fingergerät gibt es kein Überfahren. Der Browser tut
   trotzdem so: Er löst den Hover-Zustand beim Antippen aus und lässt
   ihn stehen, bis woanders getippt wird. Das sieht aus wie ein Fehler.

   Deshalb bekommen Hover-Wirkungen nur Geräte mit echtem Zeigegerät.
   Fingergeräte bekommen stattdessen eine kurze Rückmeldung beim
   Drücken – das fühlt sich unmittelbarer an als jede Animation.
   =================================================================== */

@media (hover: none) and (pointer: coarse) {

    /* Beim Drücken leicht nachgeben. Mehr braucht es nicht: Auf einem
       Handy zählt, dass die Antwort sofort kommt. */
    a:active,
    button:active,
    .knopf:active,
    [role="button"]:active {
        transform: scale(.97);
        transition: transform 60ms var(--bew-raus);
    }
}


/* ===== modules\main.css ===== */
/* Main CSS Aggregator */

/* ===== modules\reset.css ===== */
/* RESET & BASICS */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Zugeklappte Aufklapp-Blöcke wirklich zuklappen.

   Früher schrieben Browser den Inhalt eines geschlossenen `<details>`
   auf `display: none`. Seit Chrome 148 läuft das über ein eigenes
   Pseudo-Element mit `content-visibility` – und das greift hier nicht
   durch: Der Inhalt blieb im Layout stehen und legte sich über alles,
   was darunter kam. Sichtbar wurde es erst, als eine Versionsgruppe im
   Changelog nach dem Zuklappen weiterhin ihre fünfzehn Einträge zeigte.

   Betroffen waren alle Aufklapp-Blöcke der Seite, auch die Artikel im
   Changelog und die Fragen auf der Hilfeseite. Die Regel unten stellt
   das alte, verlässliche Verhalten wieder her; beim Öffnen greift sie
   nicht. */
details:not([open])>*:not(summary) {
    display: none;
}

html {
    /* Erzwinge einen einzigen Scrollbalken auf der Hauptseite */
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    height: auto !important;
    background-color: #020617;
    -webkit-font-smoothing: antialiased;
    scrollbar-gutter: stable;
}

:root {
    --primary-color: #3b82f6;
    --hero-theme-color: #3b82f6;
    --text-muted: #94a3b8;
    --bg-dark: #020617;
    --accent-glow: rgba(59, 130, 246, 0.3);
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    background-image:
        radial-gradient(at 0% 0%, hsla(217, 100%, 10%, 1) 0, transparent 50%),
        radial-gradient(at 100% 100%, hsla(270, 100%, 5%, 1) 0, transparent 50%);
    /* background-attachment: scroll statt fixed – auf Mobilgeräten ist fixed sehr teuer */
    background-attachment: scroll;
    color: white;
    line-height: 1.5;
    position: relative;

    /* Body darf nicht selbst scrollen */
    width: 100%;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
}

/* SCROLL PERFORMANCE HACK */
body.is-scrolling,
body.is-scrolling * {
    pointer-events: none !important;
}

/* GPU-Layer-Hints für animierte Elemente */
.btn,
.btn-primary,
.btn-secondary,
.primary-glow,
.bento-card,
.glass-panel,
.platform-card,
.feature-card,
.dashboard-mockup,
.hero-image-container,
#aerona-scroll-progress,
#cursor-glow {
    will-change: transform;
}

/* Der Balken wird über `transform` gestaucht, nicht über die Breite –
   `will-change` muss dasselbe nennen, sonst legt der Browser die Ebene
   für die falsche Eigenschaft an. */
#aerona-scroll-progress {
    will-change: transform;
}

/* Auch das Maus-Leuchten wird verschoben, nicht positioniert. */
#cursor-glow {
    will-change: transform;
}

/* Reveal-Animationen: GPU-optimiert */
.reveal-init {
    will-change: opacity, transform;
}

/* Nach der Animation will-change entfernen (spart GPU-Memory) */
.revealed {
    will-change: auto;
}

/* NOISE & STARS (FIXED TO VIEWPORT) */
body::before,
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

body::before {
    background-image:
        radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 40px),
        radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 30px);
    background-size: 550px 550px, 350px 350px;
    opacity: 0.05;
    z-index: 1;
}

body::after {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02;
    z-index: 9999;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ===================================================================
   SCHUTZ: INHALTE DÜRFEN NIE UNSICHTBAR HÄNGENBLEIBEN

   Fast alles auf der Seite startet mit opacity 0 und wird erst durch eine
   Animation sichtbar. Wer Bewegungen im Betriebssystem abgeschaltet hat,
   soll die Inhalte deshalb sofort und ohne Animation sehen – sonst hinge
   die Lesbarkeit an einer Animation, die gar nicht laufen soll.

   Das JavaScript-Gegenstück steht in js/ui-effects.js
   (aeronaSichtbarkeitRetten / initSichtbarkeitsWaechter).
   =================================================================== */

/* Seite wurde in einem Hintergrund-Tab geladen – die Klasse setzt
   js/languages.js noch vor dem ersten Bild. Dann gar nicht animieren:
   ohne animation gilt die normale Deckkraft (h1 = 1, Absatz = 0.9). */
.aerona-ohne-animation .hero h1,
.aerona-ohne-animation .hero p,
.aerona-ohne-animation .hero-version-badge {
    animation: none !important;
}

/* Dasselbe für die Abschnitte weiter unten. Die hingen bisher am
   Beobachter, der in einem Hintergrund-Tab nie auslöst – der Hero war
   dann hell und alles darunter blieb dunkel. */
.aerona-ohne-animation .reveal-init {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ---------- Der Notausgang ----------

   Alles oben hängt daran, dass JavaScript rechtzeitig kommt und der
   Beobachter auslöst. Auf dem eigenen Rechner ist beides sofort da; über
   eine echte Leitung kann es stocken, und dann blieb die Seite dunkel –
   genau der Fehler, der lokal nie auftrat und veröffentlicht immer.

   Diese Regel braucht kein JavaScript. Was nach dreieinhalb Sekunden
   noch nicht eingeblendet ist, blendet sich selbst ein. Läuft das
   Einblenden normal, greift `:not(.revealed)` schon vorher nicht mehr –
   im Regelfall passiert hier also nichts.

   Die Verzögerung ist mit Bedacht gewählt: lang genug, dass eine
   gewollte Einblendung beim Scrollen nicht vorweggenommen wird, kurz
   genug, dass niemand vor einer dunklen Seite sitzt und geht. */
@keyframes aerona-notausgang {
    to {
        opacity: 1;
        transform: none;
    }
}

.reveal-init:not(.revealed) {
    animation: aerona-notausgang var(--bew-ruhig, 420ms) var(--bew-rein, ease-out) 3.5s forwards;
}

/* Der Hero hat keine `.reveal-init`-Klasse, sondern eigene Keyframes.
   Friert eine davon ein, hilft nur derselbe Notausgang. */
.hero h1,
.hero p,
.hero-version-badge {
    animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {

    /* Einblendungen des Hero-Bereichs abschalten */
    .hero h1,
    .hero p,
    .hero-version-badge {
        animation: none !important;
    }

    /* Scroll-Einblendungen sofort zeigen */
    .reveal-init,
    .reveal-init.revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* ===== modules\ui.css ===== */
/* UI ELEMENTS - MODULARIZED */

/* ===== modules\ui-base.css ===== */
/* UI BASE - ESSENTIALS & SCROLLBAR */
::selection {
    background: rgba(59, 130, 246, 0.3);
    color: white;
}

/* CUSTOM SCROLLBAR - EXCLUSIVELY FOR HTML */
html::-webkit-scrollbar {
    width: 10px;
}

html::-webkit-scrollbar-track {
    background: #020617;
}

html::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    border: 2px solid #020617;
}

html::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.4);
}

/* PROGRESS BAR

   Der Balken liegt in voller Breite da und wird über `scaleX`
   zusammengestaucht – vorher wurde bei **jedem Scroll-Bild** die
   Breite gesetzt. Breite zu ändern zwingt den Browser zum Neuvermessen;
   eine Skalierung läuft auf der Grafikkarte.

   Die Umrechnung steht in `js/ui-effects.js`: aus 42 % wird
   `scaleX(.42)`. Der Ursprung links, damit er von links wächst. */
#aerona-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    z-index: 10000;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .1s ease-out;
}

/* SCROLL TO TOP */
#scrollToTopBtn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 56px;
    height: 56px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--bew-standard);
    z-index: 9990;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

#scrollToTopBtn.visible {
    opacity: 1;
    visibility: visible;
}

#scrollToTopBtn:hover {
    background: #3b82f6;
    transform: translateY(-8px) rotate(360deg);
    border-radius: 50%;
    border-color: white;
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.6);
}

/* SECTION SEPARATORS */
.section-separator {
    position: relative;
    width: 100%;
    line-height: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

.section-separator svg {
    display: block;
    width: 100%;
    height: 80px;
    fill: #020617;
}

.separator-top {
    margin-top: -80px;
    transform: rotate(180deg);
}

.separator-bottom {
    margin-bottom: -1px;
}

.highlight-blue {
    color: #3b82f6;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}


/* ===== modules\ui-main.css ===== */
/* UI ELEMENTS (Buttons, Badges, etc) */

/* CUSTOM SELECTION COLOR */
::selection {
    background: rgba(59, 130, 246, 0.3);
    color: white;
}

/* BUTTONS */
.btn-primary,
.btn-secondary {
    padding: 1rem 2.2rem;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--bew-standard);
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    letter-spacing: -0.2px;
}

/* PRIMARY BUTTON ENHANCED */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow:
        0 10px 25px rgba(37, 99, 235, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 15px 35px rgba(37, 99, 235, 0.5),
        0 0 25px rgba(59, 130, 246, 0.3);
    filter: brightness(1.1);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    color: white;
    margin-left: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.full-width {
    width: 100%;
    margin-top: 1rem;
}

/* BADGES */
.badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* ===== modules\ui-details.css ===== */
/* THEME PREVIEW ENHANCED */
.theme-preview-wrapper {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.theme-label {
    font-size: 0.8rem;
    color: #94a3b8;
    letter-spacing: 3px;
    font-weight: 800;
    text-transform: uppercase;
    opacity: 0.6;
}

.themes-container {
    display: flex;
    gap: 18px;
    background: rgba(15, 20, 35, 0.4);
    padding: 14px 20px;
    border-radius: 60px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(30px) saturate(150%);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3),
        inset 0 2px 10px rgba(255, 255, 255, 0.05);
    transition: var(--bew-standard);
}

.themes-container:hover {
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.5),
        inset 0 2px 15px rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.theme-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.4);
    transition: var(--bew-standard);
    position: relative;
    outline: none;
}

.theme-btn:hover {
    transform: scale(1.2) translateY(-4px);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6), inset 0 2px 5px rgba(255, 255, 255, 0.6);
    z-index: 5;
}

.theme-btn.active {
    border-color: white;
    transform: scale(1.25);
    box-shadow: 0 0 25px var(--btn-color), inset 0 2px 5px rgba(255, 255, 255, 0.8);
    z-index: 2;
}

.theme-btn.active::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid var(--btn-color);
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    opacity: 0.8;
}

@keyframes ping {

    75%,
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* WOW: SCROLL REVEAL */
.reveal-init {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: var(--bew-standard);
    transition-property: transform, opacity;
}

.reveal-init.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* WOW: CURSOR GLOW */
#cursor-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
    mix-blend-mode: plus-lighter;
}

/* WOW: MAGNETIC TRANSITION */
.btn,
.btn-primary,
.btn-secondary,
.primary-glow,
.platform-card,
.lang-selector-trigger,
.icon-btn-micro {
    transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1), background 0.3s, border 0.3s, box-shadow 0.3s !important;
}

/* HOME FAQ SECTION */
.home-faq {
    max-width: 950px;
    margin: 8rem auto;
    padding: 0 2rem;
}

.faq-item {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.7));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 2px 10px rgba(255, 255, 255, 0.02);
    transition: var(--bew-standard);
    position: relative;
}

.faq-item:hover {
    transform: translateY(-5px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 20px rgba(59, 130, 246, 0.15);
}

.faq-question {
    padding: 1.8rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 800;
    color: white;
    font-size: 1.2rem;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transition: color 0.3s ease;
}

.faq-item:hover .faq-question {
    color: #60a5fa;
}

.faq-question i {
    color: #3b82f6;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: rgba(59, 130, 246, 0.1);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.faq-answer {
    padding: 0 2.5rem;
    max-height: 0;
    overflow: hidden;
    transition: var(--bew-standard);
    color: #94a3b8;
    line-height: 1.8;
    font-size: 1.05rem;
    font-weight: 500;
}

.faq-item.active {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9));
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(59, 130, 246, 0.2);
}

.faq-item.active .faq-answer {
    padding-bottom: 2rem;
    max-height: 300px;
}

.faq-item.active .faq-question {
    color: #60a5fa;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    background: #3b82f6;
    color: white;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}


/* ===== modules\ui-components.css ===== */
/* UI COMPONENTS - Buttons, Cards, FAQ */
.btn-primary,
.btn-secondary {
    padding: 1rem 2.2rem;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--bew-standard);
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    letter-spacing: -0.2px;
}

.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-primary:active {
    transform: scale(0.98);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.03);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

/* THEME PREVIEW */
.themes-container {
    display: flex;
    gap: 15px;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 60px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.theme-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: var(--bew-standard);
}

/* EFFECTS & ANIMATIONS */
.primary-glow {
    position: relative;
}

.primary-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #3b82f6, #60a5fa, #3b82f6);
    background-size: 200% 200%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0.4;
    filter: blur(8px);
    animation: glowMove 3s linear infinite;
}

.primary-glow.disabled::after {
    display: none;
}

@keyframes glowMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

/* Einblenden beim Scrollen.

   Drei Änderungen gegenüber vorher, alle aus demselben Grund: Es soll
   auffallen, dass etwas ankommt, nicht dass etwas animiert wird.

   1. **Länger** – 420 ms statt 240. Was beim Scrollen erscheint, darf
      nachlaufen; zu schnell wirkt es wie ein Zucken.
   2. **Kürzerer Weg** – 18 px statt 30, und 0.98 statt 0.95. Ein Element,
      das weit fliegt, zieht den Blick von dem ab, was darin steht.
   3. **Sanftes Ankommen** – die Kurve bremst zum Schluss stark ab, statt
      gleichmäßig zu laufen.

   Bewegt werden weiterhin nur `opacity` und `transform`; beide laufen
   auf der Grafikkarte. */
.reveal-init {
    opacity: 0;
    transform: translateY(18px) scale(.98);
    transition:
        opacity var(--bew-ruhig) var(--bew-rein),
        transform var(--bew-ruhig) var(--bew-rein);
}

.reveal-init.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#cursor-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    /* Der Kreis sitzt links oben und wird per `transform` an die Maus
       geschoben. Vorher wurden `left` und `top` gesetzt – bei jeder
       Mausbewegung, für eine Fläche von 400 × 400 Pixeln. Die
       Verschiebung um die halbe Größe steckt jetzt im Skript mit drin,
       damit hier keine zweite Verschiebung gegenrechnet. */
    left: 0;
    top: 0;
    transform: translate3d(-50%, -50%, 0);
    mix-blend-mode: plus-lighter;
}

/* FAQ */



/* ===== modules\header.css ===== */
/* HEADER - MODULARIZED */

/* ===== modules\header-base.css ===== */
/* HEADER - ULTRA PREMIUM DYNAMIC GLASS */
.site-header {
    height: 72px;
    padding: 0 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1400px;
    border-radius: 100px;
    z-index: 2000;
    transition: var(--bew-standard);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: visible;
}

/* HIDE MOBILE ELEMENTS ON DESKTOP */
.mobile-nav-header,
.mobile-close-btn,
.mobile-extras-container,
.mobile-toggle,
.mobile-close-btn-alt {
    display: none !important;
}

/* HEADER BACKGROUND & CLIPPING WRAPPER */
.header-bg {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 30, 0.5);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-radius: 100px;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* THE WOW BEAM */
.header-bg::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: conic-gradient(from 180deg,
            transparent 0%,
            rgba(59, 130, 246, 0.8) 25%,
            transparent 50%,
            rgba(59, 130, 246, 0.8) 75%,
            transparent 100%);
    animation: headerBeam 6s linear infinite;
}

/* Inner mask for the beam */
.header-bg::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: rgba(10, 15, 30, 0.6);
    backdrop-filter: blur(25px);
    border-radius: 100px;
    z-index: 1;
}

@keyframes headerBeam {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* BRAND */
.brand-container {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.logo {
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    letter-spacing: -1px;
}

.logo span {
    color: #3b82f6;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.powered-by-header {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #3b82f6;
    font-weight: 700;
}


/* ===== modules\header-nav.css ===== */
/* NAVIGATION */
nav.main-nav {
    display: none;
    flex: 1;
    justify-content: center;
    position: relative;
    z-index: 2;
}

@media (min-width: 1100px) {
    nav.main-nav {
        display: flex;
        gap: 0.5rem;
    }

    nav.main-nav a {
        color: #94a3b8;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 700;
        padding: 8px 18px;
        border-radius: 100px;
        transition: var(--bew-standard);
        white-space: nowrap;
    }

    nav.main-nav a:hover {
        color: white;
        background: rgba(255, 255, 255, 0.08);
        transform: translateY(-1px);
    }

    nav.main-nav a.active {
        color: white;
        background: #1d4ed8;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.2),
            0 8px 16px rgba(29, 78, 216, 0.3);
        padding: 8px 22px;
    }

    /* DROPDOWN NAVIGATION */
    .nav-dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-trigger {
        color: #94a3b8;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 700;
        padding: 8px 18px;
        border-radius: 100px;
        transition: var(--bew-standard);
        cursor: pointer;
        background: transparent;
        border: none;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .nav-dropdown:hover .dropdown-trigger {
        color: white;
        background: rgba(255, 255, 255, 0.05);
    }

    .dropdown-trigger.active {
        color: white;
        background: #1d4ed8;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.2),
            0 8px 16px rgba(29, 78, 216, 0.3);
    }

    .dropdown-content {
        position: absolute;
        /* Direkt am Menüpunkt, nicht 20 % darunter. Der Zwischenraum
           gehörte weder zum einen noch zum anderen: Die Maus verlor dort
           den Kontakt, und das Menü klappte einem vor der Nase zu.
           Der optische Abstand entsteht jetzt durch die eigene Polsterung
           und den Rahmen. */
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        /* Blickdicht statt durchscheinend: Bei 85 % schien die Seite
           dahinter durch und der Menütext war schwer lesbar. */
        background: #0c1220;
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-top: 2px solid rgba(59, 130, 246, 0.5);
        /* Glowing Top Border */
        border-radius: 24px;
        min-width: 220px;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), 0 0 20px rgba(59, 130, 246, 0.1);
        opacity: 0;
        visibility: hidden;
        padding: 12px;
        z-index: 2100;

        /* Öffnen sofort, Schließen mit Bedenkzeit.

           Wer vom Menüpunkt zum Inhalt fährt, streift dabei den Rand des
           Menüs oder rutscht kurz daneben. Ohne die Verzögerung klappt es
           in dem Moment zu – man jagt dem Menü hinterher. Die 260 ms sind
           lang genug für einen Ausrutscher und kurz genug, dass ein
           bewusstes Wegfahren sofort wirkt. */
        transition:
            opacity var(--bew-normal) var(--bew-beides) 260ms,
            visibility 0s linear 260ms,
            transform var(--bew-normal) var(--bew-beides) 260ms;
    }

    /* Hier stand einmal ein unsichtbares Feld, das die Lücke zwischen
       Menüpunkt und Menü überbrücken sollte. Es lag über dem Menüpunkt
       und machte ihn unanklickbar, sobald das Menü offen war – geprüft
       mit `elementFromPoint`. Seit `top: 100 %` gibt es keine Lücke
       mehr, also braucht es die Brücke auch nicht. */

    .nav-dropdown:hover .dropdown-content {
        /* Beim Aufklappen nicht warten. */
        transition:
            opacity var(--bew-schnell) var(--bew-rein),
            visibility 0s,
            transform var(--bew-schnell) var(--bew-rein);
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .dropdown-content a {
        display: block !important;
        padding: 10px 16px !important;
        color: #94a3b8 !important;
        font-size: 0.85rem !important;
        border-radius: 12px !important;
        transition: var(--bew-standard);
        background: transparent !important;
        box-shadow: none !important;
    }

    .dropdown-content a:hover {
        color: white !important;
        background: rgba(59, 130, 246, 0.15) !important;
        padding-left: 20px !important;
    }

    .dropdown-content a.active {
        color: #3b82f6 !important;
        font-weight: 800 !important;
    }

    /* Highlight specifically the Demo link */
    .dropdown-content a[href="showcase.html"] {
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .dropdown-content a[href="showcase.html"]:hover {
        background: rgba(59, 130, 246, 0.25) !important;
        color: #60a5fa !important;
    }
}

/* ===================================================================


/* ===== modules\header-nav-badges.css ===== */
/* ===================================================================
   AERONA SPACE – NAVIGATION: Abzeichen an einzelnen Menue-Eintraegen
   Ausgelagert aus header-nav-extras.css (300-Zeilen-Regel).
   =================================================================== */

/* ===================================================================
   AERONA SPACE – NAVIGATION: hervorgehobene Eintraege & Mega-Menue
   Ausgelagert aus header-nav.css (300-Zeilen-Regel).
   =================================================================== */

/* ===================================================================
   ENTDECKEN-MENÜ: Eintrag "Nie erschienen"
   Ersetzt das früher pro Seite inline wiederholte Stil-Muster.
   Die .seen-Klasse setzt js/ui-navigation.js (initNavBadges).
   =================================================================== */

.dropdown-content a.lost-nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.75rem;
    color: #a78bfa !important;
    font-weight: 700 !important;
    background: rgba(139, 92, 246, 0.1) !important;
    border: 1px solid rgba(139, 92, 246, 0.22);
}

.dropdown-content a.lost-nav-link:hover {
    background: rgba(139, 92, 246, 0.25) !important;
    color: white !important;
}

.dropdown-content a.lost-nav-link::after {
    content: "NEU";
    background: #8b5cf6;
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

/* Nach dem ersten Klick: schlichter Link wie Guide/Support */
.dropdown-content a.lost-nav-link.seen {
    display: block !important;
    color: #94a3b8 !important;
    background: transparent !important;
    border: none !important;
    font-weight: inherit !important;
}

.dropdown-content a.lost-nav-link.seen:hover {
    color: white !important;
    background: rgba(59, 130, 246, 0.15) !important;
}

.dropdown-content a.lost-nav-link.seen.active {
    color: #60a5fa !important;
}

.dropdown-content a.lost-nav-link.seen::after {
    display: none !important;
}

/* ===================================================================
   ENTDECKEN-MENÜ: Eintrag "Neu in Aerona"
   Kein NEU-Abzeichen (davon gibt es schon zwei), sondern ein
   pulsierender Punkt – Signal für "wird laufend aktualisiert".
   =================================================================== */

.dropdown-content a.neu-nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.75rem;
}

.dropdown-content a.neu-nav-link::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: navLivePuls 2.4s ease-out infinite;
}

@keyframes navLivePuls {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .dropdown-content a.neu-nav-link::after {
        animation: none;
    }
}


/* ===== modules\header-nav-extras.css ===== */
/* ===================================================================
   AERONA SPACE – NAVIGATION: Mega-Menue (mehrspaltige Dropdowns)
   Zugehoerige Abzeichen-Stile stehen in header-nav-badges.css.
   =================================================================== */

/* ===================================================================
   UPDATES-MENÜ: mehrspaltig und gruppiert

   Vorher standen hier 16 Einträge untereinander – das Menü reichte fast
   über den ganzen Bildschirm. Jetzt vier Spalten mit Überschriften.
   Die Stile für die hervorgehobenen Einträge (Web Changelog, Forschung)
   standen bisher als inline-<style> in JEDER Seite; sie stehen jetzt
   einmal hier. Die .seen-Logik übernimmt js/ui-navigation.js.
   =================================================================== */

.dropdown-content.dd-mega {
    display: grid;
    grid-template-columns: repeat(4, minmax(165px, 1fr));
    gap: 0.3rem 0.6rem;
    align-items: start;
}

.dd-col {
    display: flex;
    flex-direction: column;
}

.dd-title {
    padding: 6px 16px 4px;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Hervorgehobener Eintrag "Web Changelog" */
.dropdown-content a.web-nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem;
    color: #f97316 !important;
    font-weight: 700 !important;
    background: rgba(249, 115, 22, 0.1) !important;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.dropdown-content a.web-nav-link:hover {
    background: rgba(249, 115, 22, 0.25) !important;
    color: white !important;
}

.dropdown-content a.web-nav-link::after {
    content: "NEU";
    background: #f97316;
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
}

.dropdown-content a.web-nav-link.seen {
    display: block !important;
    color: #94a3b8 !important;
    background: transparent !important;
    border: none !important;
    font-weight: inherit !important;
}

.dropdown-content a.web-nav-link.seen:hover {
    color: white !important;
    background: rgba(59, 130, 246, 0.15) !important;
}

.dropdown-content a.web-nav-link.seen.active {
    color: #60a5fa !important;
}

.dropdown-content a.web-nav-link.seen::after {
    display: none !important;
}

/* Einträge, die noch Grundlagenforschung sind */
.dropdown-content a.research-nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem;
    color: #a855f7 !important;
    font-weight: 700 !important;
    background: rgba(168, 85, 247, 0.1) !important;
    border: 1px solid rgba(168, 85, 247, 0.2);
    margin-bottom: 4px;
}

.dropdown-content a.research-nav-link:hover {
    background: rgba(168, 85, 247, 0.25) !important;
    color: white !important;
}

.dropdown-content a.research-nav-link::after {
    content: "FORSCHUNG";
    background: #a855f7;
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

.dropdown-content a.research-nav-link.active {
    color: #d8b4fe !important;
    background: rgba(168, 85, 247, 0.2) !important;
    border: 1px solid rgba(168, 85, 247, 0.4);
}

/* Entdecken-Menü: längere Beschriftungen ("Über den Erfinder",
   "Aerona Ökosystem"), deshalb etwas breitere Spalten. */
.dropdown-content.dd-mega--3 {
    grid-template-columns: repeat(4, minmax(185px, 1fr));
}

/* Schmalere Fenster: weniger Spalten, auf dem Handy eine */
@media (max-width: 1150px) {
    .dropdown-content.dd-mega,
    .dropdown-content.dd-mega--3 {
        grid-template-columns: repeat(2, minmax(165px, 1fr));
    }
}

/* Handy: Das Mobil-Skript setzt display:flex per Inline-Stil, deshalb hier
   zusätzlich die Flex-Richtung absichern und die Spalten voll ausfüllen.
   Grenze bewusst 1099px – die Desktop-Navigation beginnt bei min-width: 1100px,
   bei exakt 1100px würden sonst beide Regeln greifen. */
@media (max-width: 1099px) {
    .dropdown-content.dd-mega,
    .dropdown-content.dd-mega--3 {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .dd-col {
        width: 100%;
    }

    .dd-title {
        padding-top: 10px;
    }
}

/* ===================================================================
   ÜBERLAUF-KORREKTUR FÜR HERVORGEHOBENE EINTRÄGE

   Die Einträge mit Abzeichen (NEU, FORSCHUNG, KEVIN WAGNER) waren
   breiter als ihre Spalte und ragten in die Nachbarspalte hinein.
   Ursache: Rasterfelder und Flex-Elemente lassen sich standardmäßig
   nicht unter ihre Inhaltsbreite verkleinern (min-width: auto).

   Mit flex-wrap allein rutschte das Abzeichen zufällig in die zweite
   Zeile, und bei "Aerona Grammar Checker" wurde der Text abgeschnitten:
   der Textknoten ist ein namenloses Flex-Element und lässt sich nicht
   einzeln ansprechen. Deshalb steht das Abzeichen jetzt bewusst unter
   dem Namen – bei allen Einträgen gleich, statt je nach Textlänge anders.
   =================================================================== */

.dd-col {
    min-width: 0;
}

.dropdown-content a.web-nav-link,
.dropdown-content a.research-nav-link,
.dropdown-content a.about-nav-link,
.dropdown-content a.inventor-nav-link,
.dropdown-content a.neu-nav-link {
    min-width: 0;
    flex-direction: column;
    /* stretch, damit der Name die volle Spaltenbreite bekommt und umbricht
       statt abgeschnitten zu werden – das Abzeichen bleibt per align-self
       trotzdem linksbündig. */
    align-items: stretch !important;
    justify-content: center !important;
    row-gap: 5px;
    font-size: 0.82rem;
    line-height: 1.35;
    /* Die Grundregel für Menülinks setzt nowrap – hier muss der Name
       umbrechen dürfen, sonst wird "Aerona Grammar Checker" abgeschnitten. */
    white-space: normal;
    overflow-wrap: anywhere;
}

.dropdown-content a.web-nav-link::after,
.dropdown-content a.research-nav-link::after,
.dropdown-content a.about-nav-link::after,
.dropdown-content a.inventor-nav-link::after {
    flex-shrink: 0;
    white-space: nowrap;
    align-self: flex-start;
}

/* ===================================================================
   ENTDECKEN-MENÜ: hervorgehobene Einträge
   Standen bisher als inline-<style> in jeder Seite.
   =================================================================== */

.dropdown-content a.about-nav-link,
.dropdown-content a.inventor-nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem;
    color: #f97316 !important;
    font-weight: 700 !important;
    background: rgba(249, 115, 22, 0.1) !important;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.dropdown-content a.about-nav-link:hover,
.dropdown-content a.inventor-nav-link:hover {
    background: rgba(249, 115, 22, 0.25) !important;
    color: white !important;
}

.dropdown-content a.about-nav-link::after {
    content: "NEU";
}

.dropdown-content a.inventor-nav-link::after {
    content: "KEVIN WAGNER";
}

.dropdown-content a.about-nav-link::after,
.dropdown-content a.inventor-nav-link::after {
    background: #f97316;
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
}

/* Nach dem ersten Klick: schlichter Link */
.dropdown-content a.about-nav-link.seen,
.dropdown-content a.inventor-nav-link.seen {
    display: block !important;
    color: #94a3b8 !important;
    background: transparent !important;
    border: none !important;
    font-weight: inherit !important;
}

.dropdown-content a.about-nav-link.seen:hover,
.dropdown-content a.inventor-nav-link.seen:hover {
    color: white !important;
    background: rgba(59, 130, 246, 0.15) !important;
}

.dropdown-content a.about-nav-link.seen.active,
.dropdown-content a.inventor-nav-link.seen.active {
    color: #60a5fa !important;
}

.dropdown-content a.about-nav-link.seen::after,
.dropdown-content a.inventor-nav-link.seen::after {
    display: none !important;
}


/* ===== modules\header-nav-ruhig.css ===== */
/* ===================================================================
   AERONA SPACE – RUHIGE AUSKLAPPMENÜS

   Vorher bekamen hervorgehobene Einträge (FORSCHUNG, NEU, KEVIN WAGNER)
   einen eigenen Kasten mit Hintergrund, Rahmen und einem Abzeichen, das
   in eine zweite Zeile rutschte. Dadurch sprangen die Zeilenhöhen
   zwischen 40, 62 und 81 Pixeln, und mitten in der Liste standen
   Kästen, die den Blick zerrissen.

   Jetzt ist jede Zeile gleich hoch. Die Auszeichnung steckt in der
   Textfarbe und einem kleinen Punkt am rechten Rand – erkennbar,
   aber ohne die Liste zu zerlegen.

   Diese Datei wird nach header-nav-extras.css geladen und muss deren
   !important-Regeln überstimmen.
   =================================================================== */

/* ---------- Alle Einträge auf eine Linie ---------- */
.dropdown-content a.web-nav-link,
.dropdown-content a.research-nav-link,
.dropdown-content a.about-nav-link,
.dropdown-content a.inventor-nav-link,
.dropdown-content a.neu-nav-link,
.dropdown-content a.lost-nav-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem;

    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    margin-bottom: 0 !important;

    font-size: 0.86rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* ---------- Der Punkt statt des Abzeichens ---------- */
.dropdown-content a.research-nav-link::after,
.dropdown-content a.about-nav-link::after,
.dropdown-content a.inventor-nav-link::after,
.dropdown-content a.web-nav-link::after,
.dropdown-content a.neu-nav-link::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    background: #94a3b8;
    padding: 0;
    box-shadow: none;
    letter-spacing: normal;
    font-size: 0;
}

/* ---------- Farbe steckt im Punkt, nicht im Text ----------

   Zuerst war auch der Text farbig. Das führte in eine Sackgasse: Eine
   Gegenregel für gelesene Einträge liess sich nicht durchsetzen, egal
   wie spezifisch sie war. Jetzt bleibt der Text überall gleich – nur
   der Punkt zeigt die Art des Eintrags. Verschwindet er, ist die Zeile
   von den anderen nicht mehr zu unterscheiden, und genau das ist gewollt.
   =================================================================== */

.dropdown-content a.research-nav-link::after {
    background: #a855f7;
}

.dropdown-content a.about-nav-link::after,
.dropdown-content a.inventor-nav-link::after {
    background: #f97316;
}

.dropdown-content a.neu-nav-link::after,
.dropdown-content a.web-nav-link::after {
    background: #22c55e;
}

/* Gelesen: der Punkt verschwindet, die Zeile ist wieder eine wie jede
   andere. Die Klasse setzt initNavBadges() in js/ui-navigation.js. */
.dropdown-content a.neu-nav-link.seen::after,
.dropdown-content a.web-nav-link.seen::after,
.dropdown-content a.lost-nav-link.seen::after {
    display: none;
}

/* Die aktuell geöffnete Forschungsseite bleibt erkennbar. */
.dropdown-content a.research-nav-link.active {
    background: rgba(168, 85, 247, 0.16) !important;
}

/* ---------- Legende unter dem Menü ---------- */
.dd-legende {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 0.6rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(148, 163, 184, 0.12);
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 600;
}

.dd-legende span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dd-legende span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dd-legende .lg-forschung::before {
    background: #c4b5fd;
}

.dd-legende .lg-neu::before {
    background: #86efac;
}

.dd-legende .lg-ueber::before {
    background: #fdba74;
}

/* ---------- Spaltenbreite ---------- */
/* Bei 165px brachen "Aerona Grammar Checker" und "Aerona Code Aero" um
   und waren dadurch 57px hoch statt 39. Mit 200px passt auch der
   längste Name in eine Zeile, und alle Einträge sind gleich hoch. */
.dropdown-content.dd-mega {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
}

.dropdown-content.dd-mega--3 {
    grid-template-columns: repeat(4, minmax(200px, 1fr));
}

@media (max-width: 1250px) {
    .dropdown-content.dd-mega,
    .dropdown-content.dd-mega--3 {
        grid-template-columns: repeat(3, minmax(190px, 1fr));
    }
}

@media (max-width: 1150px) {
    .dropdown-content.dd-mega,
    .dropdown-content.dd-mega--3 {
        grid-template-columns: repeat(2, minmax(170px, 1fr));
    }
}

/* Der längste Name im Menü ist "Aerona Grammar Checker". Bei 0,86rem
   passte er knapp nicht in die Spalte und brach um – die Zeile war
   dann 57 statt 39 Pixel hoch. Eine Spur kleiner, und alle Einträge
   stehen wieder auf einer Linie. */
.dropdown-content a {
    font-size: 0.83rem;
}

.dropdown-content a.web-nav-link,
.dropdown-content a.research-nav-link,
.dropdown-content a.about-nav-link,
.dropdown-content a.inventor-nav-link,
.dropdown-content a.neu-nav-link,
.dropdown-content a.lost-nav-link {
    font-size: 0.83rem !important;
}

/* Gelesene Einträge zuletzt: Diese Regel muss nach den Grundfarben
   weiter oben stehen, sonst bleibt die grüne Auszeichnung sichtbar,
   obwohl der Punkt schon verschwunden ist. */
.dropdown-content a.neu-nav-link.seen,
.dropdown-content a.web-nav-link.seen,
.dropdown-content a.lost-nav-link.seen {
    color: #94a3b8 !important;
}

.dropdown-content a.neu-nav-link.seen:hover,
.dropdown-content a.web-nav-link.seen:hover,
.dropdown-content a.lost-nav-link.seen:hover {
    background: rgba(148, 163, 184, 0.1) !important;
    color: #e2e8f0 !important;
}


/* ===== modules\header-actions.css ===== */
/* ===================================================================
   HEADER-ACTIONS - Stil-Ladeliste

   Der Stil liegt in header-actions-1.css bis header-actions-3.css,
   damit keine Datei ueber 300 Zeilen kommt (03_Zerlegen_300_Zeilen.md).
   Die Reihenfolge ist die Kaskade - nicht vertauschen.

   ACHTUNG: Ueber file:// blockiert der Browser @import. Wird diese
   Datei in einer Electron-App geladen, stattdessen die Teile einzeln
   verlinken (16_Deployment_und_Electron.md).
   =================================================================== */

/* ===== modules\header-actions-1.css ===== */
/* ACTIONS (RIGHT SIDE RENDERING FIX) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: 100%;
    position: relative;
    z-index: 2;
}

.language-switcher {
    display: flex;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.lang-opt {
    color: #64748b;
    cursor: pointer;
    transition: color 0.3s;
}

.lang-opt.active,
.lang-opt:hover {
    color: white;
}

/* LANGUAGE MENU MODAL */
.lang-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    /* Dunkler und stärker verwischt – passend zu den anderen Fenstern,
       damit die Seite dahinter nicht mehr durchscheint. */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(2, 6, 16, 0.86);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.lang-modal.active {
    display: flex;
    opacity: 1;
}

.lang-modal-content {
    background: #0d1526;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    width: 100%;
    max-width: 960px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.95) translateY(20px);
    transition: var(--bew-standard);
}

.lang-modal.active .lang-modal-content {
    transform: scale(1) translateY(0);
}

.lang-modal-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lang-modal-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lang-modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: white;
}

.lang-count-badge {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(59, 130, 246, 0.25);
    white-space: nowrap;
}

/* Suchfeld im Sprach-Modal */
.lang-search-wrapper {
    position: relative;
    padding: 0.75rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.lang-search-icon {
    position: absolute;
    left: 2.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 0.85rem;
    pointer-events: none;
}

.lang-search-input {
    width: 100%;
    padding: 10px 16px 10px 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: white;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: var(--bew-standard);
}

.lang-search-input::placeholder {
    color: #64748b;
}

.lang-search-input:focus {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.05);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Keine Ergebnisse */
.lang-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    gap: 1rem;
    color: #64748b;
}

.lang-no-results i {
    font-size: 2.5rem;
    opacity: 0.3;
}

.lang-no-results p {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Sprach-Grid */
.lang-grid {
    padding: 1.25rem 2rem 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    overflow-y: auto;
    flex: 1;
    /* Firefox Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.25) rgba(255, 255, 255, 0.03);
}

/* Custom Scrollbar für das Sprach-Grid (WebKit) */
.lang-grid::-webkit-scrollbar {
    width: 8px;
}

.lang-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
}

.lang-grid::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.25);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.lang-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.45);
    background-clip: content-box;
}

/* Sprach-Karte (überarbeitet) */
.lang-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: var(--bew-standard);
    text-align: left;
    overflow: hidden;
    position: relative;
    min-height: 72px;
}

.lang-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 28px;
    cursor: pointer;
    min-height: 44px;
}

.lang-card-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.lang-card.enabled:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.lang-card.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

/* Checkmark */
.lang-card.active .lang-card-main::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 40px;
    color: #3b82f6;
    font-weight: 800;
    font-size: 1.1rem;
    z-index: 1;
}

.lang-card.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

.lang-flag {
    flex-shrink: 0;
    width: 36px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flaggen als echte Bilder */
.lang-flag-img {
    width: 32px;
    height: 22px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}



/* ===== modules\header-actions-2.css ===== */
/* Fallback-Globus wenn keine Flagge verfügbar */
.lang-flag-fallback {
    font-size: 1.5rem;
    line-height: 1;
}

.lang-card .lang-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.lang-card .lang-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lang-card .lang-native {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fortschrittsbalken pro Sprache */
.lang-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.lang-progress-bar-bg {
    flex: 1;
    height: 5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.lang-progress-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 2px;
}

.lang-progress-pct {
    font-size: 0.7rem;
    font-weight: 800;
    min-width: 32px;
    text-align: right;
    line-height: 1;
}

/* Info-Button pro Sprache - oben rechts positioniert */
.lang-info-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #64748b;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--bew-standard);
    font-size: 0.7rem;
    z-index: 5;
}

.lang-info-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    color: #3b82f6;
    transform: scale(1.1);
}

/* ======================== */
/* SPRACH-INFO MODAL        */
/* ======================== */
.lang-info-modal {
    position: fixed;
    inset: 0;
    z-index: 3100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.lang-info-modal.active {
    display: flex;
    opacity: 1;
}

.lang-info-modal-content {
    background: rgba(15, 23, 42, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    transform: scale(0.9) translateY(20px);
    transition: var(--bew-standard);
}

.lang-info-modal.active .lang-info-modal-content {
    transform: scale(1) translateY(0);
}

.lang-info-modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lang-info-modal-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lang-info-modal-header h3 .lang-flag-img {
    width: 28px;
    height: 20px;
}

.lang-info-modal-body {
    padding: 1.5rem;
}

.lang-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.lang-info-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
}

.lang-info-stat.full-width {
    grid-column: 1 / -1;
}

.lang-info-stat-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.lang-info-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
}

.lang-info-progress {
    margin-top: 8px;
}

.lang-info-progress-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.lang-info-progress-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-info-progress-detail {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 10px;
}

.lang-info-keys {
    font-size: 0.8rem;
    color: #94a3b8;
}

.lang-info-use-btn {
    margin-top: 1.25rem;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: var(--bew-standard);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

.lang-info-use-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.5);
    filter: brightness(1.1);
}

/* Responsive Anpassungen für Sprach-Modal */
@media (max-width: 768px) {
    .lang-modal-content {
        max-height: 90vh;
        border-radius: 20px;
        margin: 0.5rem;
    }

    .lang-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        padding: 1rem;
        gap: 10px;
    }

    .lang-search-wrapper {
        padding: 0.5rem 1rem;
    }

    .lang-modal-header {
        padding: 1rem 1.25rem;
    }

    .lang-modal-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .lang-info-grid {
        grid-template-columns: 1fr;
    }

    .lang-info-modal-content {
        max-width: 95vw;
    }
}




/* ===== modules\header-actions-3.css ===== */
/* LANG SELECTOR BUTTON IN HEADER */
.lang-selector-trigger {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 14px;
    border-radius: 50px;
    color: white;
    font-weight: 800;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--bew-standard);
}

.lang-selector-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.lang-selector-trigger i {
    font-size: 0.7rem;
    opacity: 0.5;
}

/* INFO BUTTON ENHANCED */
.icon-btn-micro {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--bew-standard);
}

/* Hover-Effekt passend zum Sprachumschalter-Stil */
.icon-btn-micro:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* CTA BUTTON INTEGRATED */
.btn-micro {
    height: 44px;
    /* Fixed height for better alignment in header */
    padding: 0 1.5rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 800;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: var(--bew-standard);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.btn-micro:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.6);
    filter: brightness(1.1);
}


/* ===== modules\header-mobile.css ===== */
/* MOBILE HEADER - DESIGN PRESERVATION & FUNCTIONALITY */
@media (max-width: 1100px) {

    /* HAMBURGER ICON STYLING */
    .hamburger-icon {
        width: 24px;
        height: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        pointer-events: none;
        /* Click goes to button */
    }

    .hamburger-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: white;
        border-radius: 2px;
        transition: var(--bew-standard);
    }

    /* Burger to X Animation */
    .site-header.mobile-open .hamburger-icon span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .site-header.mobile-open .hamburger-icon span:nth-child(2) {
        opacity: 0;
        transform: scale(0);
    }

    .site-header.mobile-open .hamburger-icon span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


    /* 1. Header selbst (Pillen-Design) */
    /* 1. Header selbst (Full Width, No Rounding) */
    .site-header {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 54px !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(10, 15, 30, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        justify-content: space-between !important;
        position: fixed !important;
        z-index: 10000 !important;
    }

    .header-bg {
        display: none !important;
        /* Background logic simplified */
    }

    .header-bg::after {
        display: none !important;
    }

    .brand-container {
        flex: 1;
        min-width: 0;
        /* allows text truncation */
    }

    .logo {
        font-size: 1.15rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    .powered-by-header {
        display: none !important;
    }

    /* SHOW BUT SCALE DESKTOP ELEMENTS */
    .header-actions {
        gap: 4px !important;
        flex-shrink: 0;
    }

    .header-actions .language-switcher-wrapper {
        display: block !important;
    }

    .header-actions .language-switcher-wrapper button {
        padding: 0 8px !important;
        height: 32px !important;
        font-size: 11px !important;
        min-height: 0 !important;
    }

    .header-actions .icon-btn-micro {
        display: none !important;
        /* Hide to save space on mobile */
    }

    /* Optimize 2027 Button - only show on larger tablets */
    .header-actions .btn-micro.primary-glow {
        display: none !important;
        /* Es wird ohnehin im Hamburger-Menu auf dem Handy angezeigt. */
    }

    /* 2. Mobile Elemente SICHTBAR machen (die wir global versteckt haben) */
    .mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px !important;
        min-width: 36px !important;
        /* Prevent shrinking */
        height: 36px !important;
        flex-shrink: 0 !important;
        background: transparent;
        border: none;
        color: white !important;
        font-size: 1.4rem;
        margin-left: 4px !important;
    }

    .mobile-nav-header {
        display: none !important;
        /* Redundant with fixed real header */
    }

    .mobile-close-btn {
        display: flex !important;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: white;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-nav.mobile-open {
        position: fixed !important;
        top: 54px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100dvh - 54px) !important;
        background: radial-gradient(circle at top, #0f172a 0%, #020617 100%) !important;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 3rem 1.5rem !important;
        z-index: 9999 !important;
        overflow-y: auto;
        backdrop-filter: blur(20px);
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .main-nav.mobile-open::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    /* Links Styling */
    .main-nav.mobile-open a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        font-size: 1.4rem !important;
        font-weight: 800 !important;
        color: white !important;
        text-decoration: none !important;
        padding: 1.2rem !important;
        text-transform: uppercase;
        letter-spacing: 2px;
        opacity: 0.9;
        transition: var(--bew-standard);
    }

    .main-nav.mobile-open a.active {
        color: #3b82f6 !important;
        text-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
    }

    /* Dropdown / Entdecken Button */
    .main-nav.mobile-open .dropdown-trigger {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px;
        font-size: 1.2rem !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: white !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 1.2rem !important;
        border-radius: 20px !important;
        margin-top: 1rem;
        cursor: pointer;
    }

    .main-nav.mobile-open .dropdown-trigger i {
        color: #3b82f6;
        transition: transform 0.3s ease;
    }

    /* Bottom Extras (Sprache, Info, CTA) */
    .mobile-extras-container {
        margin-top: auto !important;
        padding-top: 3rem !important;
        width: 100%;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .mobile-icons-row {
        display: flex;
        gap: 1.5rem;
        align-items: center;
    }

    /* Mobile CTA Button "Sommer 2027" */
    .mobile-download-cta {
        width: 100% !important;
        max-width: 300px;
        height: 54px !important;
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
        color: white !important;
        border: none !important;
        border-radius: 50px !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        box-shadow: 0 10px 25px rgba(29, 78, 216, 0.4) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Accordion Fix */
    .main-nav.mobile-open .dropdown-content {
        width: 100% !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border-radius: 20px;
        margin-top: 0.5rem;
        display: none;
        /* Controlled by JS */
        flex-direction: column;
        padding: 0.5rem !important;
    }

    .main-nav.mobile-open .dropdown-content a {
        font-size: 1rem !important;
        padding: 0.8rem !important;
        opacity: 0.7;
    }
}

/* FIX ANDROID / SMALL SCREENS OVERLAP */
@media (max-width: 800px) {

    .site-header .header-actions .btn-micro.primary-glow,
    .site-header .header-actions .btn-primary {
        display: none !important;
        /* Hide long Sommer 2027 button, it's in the mobile menu anyway */
    }

    .site-header .header-actions .icon-btn-micro {
        display: none !important;
        /* Hide info button on very thin screens */
    }
}



/* ===== modules\hero.css ===== */
/* HERO SECTION - MODULARIZED */

/* ===== modules\hero-base.css ===== */
/* HERO SECTION */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 140px;
    padding-bottom: 80px;
    background:
        radial-gradient(circle at 50% -20%, var(--hero-theme-color, rgba(59, 130, 246, 0.25)), transparent 70%),
        radial-gradient(circle at 100% 10%, rgba(139, 92, 246, 0.15), transparent 50%),
        radial-gradient(circle at 0% 80%, var(--hero-theme-color, rgba(59, 130, 246, 0.08)), transparent 50%);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.hero h1 {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    line-height: 1;
    letter-spacing: -3px;
    font-weight: 900;
    color: white;
    text-shadow: 0 0 80px rgba(59, 130, 246, 0.3);
    animation: fadeInDown 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.highlight {
    background: linear-gradient(135deg, #60a5fa 10%, #a855f7 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 40px rgba(59, 130, 246, 0.5));
    animation: glowPulse 4s infinite alternate ease-in-out;
    display: inline-block;
}

@keyframes glowPulse {
    from {
        filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.3));
        transform: scale(1);
    }

    to {
        filter: drop-shadow(0 0 50px rgba(59, 130, 246, 0.7));
        transform: scale(1.02);
    }
}

.hero p {
    color: #94a3b8;
    font-size: 1.35rem;
    margin-bottom: 3.5rem;
    max-width: 750px;
    line-height: 1.6;
    font-weight: 500;
    opacity: 0.9;
    animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

/* Version Badge for Hero */
.hero-version-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    padding: 6px 16px;
    border-radius: 50px;
    color: #60a5fa;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
    animation: fadeInDown 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ===== modules\hero-mockup.css ===== */
/* ===================================================================
   HERO-MOCKUP - Stil-Ladeliste

   Der Stil liegt in hero-mockup-1.css bis hero-mockup-2.css,
   damit keine Datei ueber 300 Zeilen kommt (03_Zerlegen_300_Zeilen.md).
   Die Reihenfolge ist die Kaskade - nicht vertauschen.

   ACHTUNG: Ueber file:// blockiert der Browser @import. Wird diese
   Datei in einer Electron-App geladen, stattdessen die Teile einzeln
   verlinken (16_Deployment_und_Electron.md).
   =================================================================== */

/* ===== modules\hero-mockup-1.css ===== */
/* DASHBOARD MOCKUP ENHANCED - PREMIUM REDESIGN */
.hero-image-container {
    perspective: 2500px;
    margin-top: 4rem;
    padding: 3rem;
    position: relative;
    z-index: 10;
    animation: dashboard-float 8s ease-in-out infinite;
}

@keyframes dashboard-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }
}

.hero-image-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 60%);
    z-index: -1;
    filter: blur(120px);
    opacity: 0.8;
    transition: opacity 0.8s ease, background 0.8s ease, filter 0.8s ease;
}

.hero-image-container:hover::before {
    opacity: 1;
    filter: blur(150px);
    background: radial-gradient(circle, rgba(59, 130, 246, 0.6) 0%, transparent 70%);
}

.dashboard-mockup {
    width: 900px;
    height: 550px;
    background: rgba(15, 20, 35, 0.65);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.6),
        0 15px 35px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    display: flex;
    overflow: hidden;
    position: relative;
    transform: rotateX(12deg) rotateY(-6deg) rotateZ(1deg);
    transition: var(--bew-standard);
    backdrop-filter: blur(50px) saturate(150%);
}

.hero-image-container:hover .dashboard-mockup {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.05) translateY(-10px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 80px 150px rgba(0, 0, 0, 0.8),
        0 20px 40px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
}

/* Glass Reflection Animation */
.dashboard-mockup::after {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: linear-gradient(45deg,
            transparent 45%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.04) 55%,
            transparent 60%);
    z-index: 5;
    animation: shine 12s infinite cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

@keyframes shine {
    0% {
        transform: translateX(-40%) translateY(-40%);
    }

    20%,
    100% {
        transform: translateX(40%) translateY(40%);
    }
}

.mockup-sidebar {
    width: 85px;
    background: rgba(10, 15, 30, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
    gap: 28px;
    backdrop-filter: blur(20px);
}

.sidebar-item {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    transition: var(--bew-standard);
    cursor: pointer;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.05);
}

.sidebar-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px) scale(1.08);
}

.sidebar-item.active {
    background: #3b82f6;
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.7), inset 0 2px 6px rgba(255, 255, 255, 0.4);
    transform: scale(1.15);
    animation: pulse-sidebar 3s infinite alternate ease-in-out;
}

@keyframes pulse-sidebar {
    from {
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.5), inset 0 2px 6px rgba(255, 255, 255, 0.4);
    }

    to {
        box-shadow: 0 0 40px rgba(59, 130, 246, 0.9), inset 0 2px 6px rgba(255, 255, 255, 0.4);
        transform: scale(1.18);
    }
}

.mockup-main {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 50%);
}

.mockup-header {
    height: 48px;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 15px;
}

.mockup-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: white;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.mockup-grid {
    display: grid;
    grid-template-columns: 2.2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 30px;
    height: 100%;
}

.mockup-card {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--bew-standard);
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
}

.mockup-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 60%);
    pointer-events: none;
}

.mockup-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    background: rgba(30, 41, 59, 0.75);
    border-color: rgba(255, 255, 255, 0.3);
}

.mockup-card.large {
    grid-row: span 2;
    background: linear-gradient(145deg, rgba(20, 25, 45, 0.8), rgba(10, 15, 30, 0.95));
}

.mockup-card.large:hover {
    background: linear-gradient(145deg, rgba(25, 30, 55, 0.85), rgba(15, 20, 40, 0.98));
}

/* MOCKUP CONTENT POLISH */
.mock-weather-title {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.mock-large-temp {
    font-size: 4.5rem;
    font-weight: 900;
    background: linear-gradient(to bottom right, #ffffff, #94a3b8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: auto;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
    line-height: 1.1;
}

.mock-weather-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 25px;
}

.mock-detail-item {
    font-size: 0.9rem;
    color: #cbd5e1;
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mock-detail-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mock-detail-item span {
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

.card-content-mock {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 2;
}

.mock-time {
    font-size: 2.3rem;
    font-weight: 900;
    color: #3b82f6;
    text-shadow: 0 0 25px rgba(59, 130, 246, 0.6);
    margin-bottom: 8px;
    letter-spacing: 1px;
}



/* ===== modules\hero-mockup-2.css ===== */
.mock-date {
    font-size: 0.85rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
}

.mock-mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 55px;
    margin-top: auto;
    position: relative;
    z-index: 2;
}

.chart-bar {
    flex: 1;
    background: linear-gradient(to top, rgba(59, 130, 246, 0.4), rgba(59, 130, 246, 0.9));
    border-radius: 6px 6px 3px 3px;
    height: 100%;
    transform-origin: bottom;
    transform: scaleY(.45);
    animation: chartBounce 2.5s infinite alternate ease-in-out;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

.chart-bar:nth-child(2) {
    animation-delay: -0.8s;
    background: linear-gradient(to top, rgba(147, 51, 234, 0.4), rgba(147, 51, 234, 0.9));
    box-shadow: 0 0 12px rgba(147, 51, 234, 0.4);
}

.chart-bar:nth-child(3) {
    animation-delay: -1.5s;
    background: linear-gradient(to top, rgba(16, 185, 129, 0.4), rgba(16, 185, 129, 0.9));
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

/* Wächst über `scaleY` statt über `height`. Höhe zu bewegen zwingt den
   Browser, in **jedem Bild** das Seitengerüst neu zu vermessen; eine
   Skalierung läuft auf der Grafikkarte und kostet nichts.

   Der Preis: Die abgerundeten Ecken werden mitgestaucht. Bei 3 px und
   diesen Balkenhöhen ist das nicht zu sehen – bei größeren Radien
   müsste man den Balken in einen Behälter mit `overflow: hidden`
   setzen und nur den Inhalt skalieren. */
@keyframes chartBounce {
    30% {
        transform: scaleY(.35);
    }

    60% {
        transform: scaleY(.85);
    }

    100% {
        transform: scaleY(.45);
    }
}

/* Enhancing CPU Text on top of the chart */
.card-content-mock[data-i18n="home.hero.mock.cpu"] {
    font-weight: 800;
    font-size: 1rem;
    color: white;
    letter-spacing: 1px;
}



/* ===== modules\hero-extra.css ===== */
/* BACKGROUND BLOBS */
.bg-blobs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    opacity: 0.5;
    /* Leicht reduziert für Performance */
}

.blob {
    position: absolute;
    border-radius: 50%;
    /* Reduzierter Blur-Radius spart GPU-Zyklen */
    filter: blur(60px);
    /* Expliziter Hint für Browser: GPU nutzen! */
    will-change: transform;
    /* translate3d erzwingt Hardware-Beschleunigung */
    animation: blobMove 20s infinite alternate ease-in-out;
}

.blob-1 {
    width: 600px;
    height: 600px;
    background: var(--hero-theme-color, rgba(59, 130, 246, 0.15));
    top: -10%;
    left: -10%;
}

.blob-2 {
    width: 500px;
    height: 500px;
    background: rgba(139, 92, 246, 0.1);
    bottom: -10%;
    right: -5%;
    animation-delay: -5s;
}

.blob-3 {
    width: 400px;
    height: 400px;
    background: rgba(16, 185, 129, 0.08);
    top: 40%;
    left: 45%;
    animation-delay: -10s;
}

@keyframes blobMove {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    33% {
        transform: translate3d(100px, 50px, 0) scale(1.1);
    }

    66% {
        transform: translate3d(-50px, 120px, 0) scale(0.9);
    }

    100% {
        transform: translate3d(20px, -80px, 0) scale(1);
    }
}

/* TECH STACK SECTION ENHANCED - PREMIUM REDESIGN */
.tech-stack-section {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to right, rgba(2, 6, 23, 0.9), rgba(15, 23, 42, 0.6), rgba(2, 6, 23, 0.9));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3rem 0;
    backdrop-filter: blur(30px);
    margin-bottom: 8rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.tech-stack-section::before,
.tech-stack-section::after {
    content: '';
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.tech-stack-section::before {
    left: 0;
    background: linear-gradient(to right, #020617 10%, transparent 100%);
}

.tech-stack-section::after {
    right: 0;
    background: linear-gradient(to left, #020617 10%, transparent 100%);
}

.tech-marquee {
    display: flex;
    white-space: nowrap;
    animation: marquee-premium 60s linear infinite;
    gap: 8rem;
    width: max-content;
}

.tech-item {
    color: #94a3b8;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    transition: var(--bew-standard);
    opacity: 0.6;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: default;
}

.tech-item i {
    font-size: 1.5rem;
    color: #3b82f6;
    transition: var(--bew-standard);
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.3));
}

.tech-item:hover {
    color: white;
    opacity: 1;
    transform: scale(1.05);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

.tech-item:hover i {
    color: #60a5fa;
    transform: rotate(10deg);
    filter: drop-shadow(0 0 15px rgba(96, 165, 250, 0.8));
}

@keyframes marquee-premium {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .hero h1 {
        font-size: 3.5rem;
        letter-spacing: -2px;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .dashboard-mockup {
        width: 100%;
        height: auto;
        aspect-ratio: 16/10;
        transform: none !important;
        border-radius: 20px;
    }

    .hero-image-container::before {
        display: none;
    }
}



/* ===== modules\bento.css ===== */
/* BENTO GRID - MODULARIZED */

/* ===== modules\bento-main.css ===== */
/* BENTO GRID */
.bento-section {
    padding: 8rem 2rem;
    background: #020617;
    position: relative;
    overflow: hidden;
}

/* Sublte grain background for bento section */
.bento-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.02) 1px, transparent 0);
    background-size: 40px 40px;
    pointer-events: none;
}

.section-title {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: white;
    letter-spacing: -1px;
    font-weight: 800;
}

.section-subtitle {
    text-align: center;
    color: #94a3b8;
    max-width: 600px;
    margin: 0 auto 5rem auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    max-width: 1300px;
    margin: 0 auto;
}

.bento-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    height: 480px;
    /* Increased slightly to fit mockups */
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    transition: var(--bew-standard);
}

/* Border Beam Effect */
.bento-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 0deg, transparent, #3b82f6, transparent, #8b5cf6, transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-clip: padding-box;
    mask-border: none;
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    padding: 2px;
}

.bento-card:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 40px rgba(59, 130, 246, 0.25);
    background: rgba(30, 41, 59, 0.6);
}

.bento-card:hover::after {
    opacity: 1;
    animation: rotateBeam 4s linear infinite;
}

@keyframes rotateBeam {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.bento-card.large {
    grid-column: span 2;
}

.card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card-header-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.card-icon {
    font-size: 2rem;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.bento-card h3 {
    font-size: 1.5rem;
    color: white;
    font-weight: 700;
}

.bento-card p {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.feature-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 50px;
    margin-left: auto;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.feature-badge.future {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.3);
}

.feature-badge.beta {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

.feature-badge.planung {
    background: rgba(236, 72, 153, 0.15);
    color: #f472b6;
    border-color: rgba(236, 72, 153, 0.3);
}


/* ===== modules\bento-details.css ===== */
/* ===================================================================
   BENTO-DETAILS - Stil-Ladeliste

   Der Stil liegt in bento-details-1.css bis bento-details-2.css,
   damit keine Datei ueber 300 Zeilen kommt (03_Zerlegen_300_Zeilen.md).
   Die Reihenfolge ist die Kaskade - nicht vertauschen.

   ACHTUNG: Ueber file:// blockiert der Browser @import. Wird diese
   Datei in einer Electron-App geladen, stattdessen die Teile einzeln
   verlinken (16_Deployment_und_Electron.md).
   =================================================================== */

/* ===== modules\bento-details-1.css ===== */
/* Card Mockups (Internal) */
.card-mockup {
    flex: 1;
    background: rgba(2, 6, 23, 0.5);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.5);
    min-height: 120px;
}

/* Specific Mockup Layouts */
.launcher-mockup {
    gap: 16px;
    padding-bottom: 5px;
}

.app-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), inset 0 2px 6px rgba(255, 255, 255, 0.3);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.app-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 15px currentColor;
    opacity: 0;
    transition: opacity 0.4s;
}

.bento-card:hover .app-icon {
    transform: translateY(-8px) scale(1.05);
}

.bento-card:hover .app-icon::after {
    opacity: 0.6;
}

.bento-card:hover .app-icon:nth-child(1) {
    transition-delay: 0.0s;
}

.bento-card:hover .app-icon:nth-child(2) {
    transition-delay: 0.1s;
}

.bento-card:hover .app-icon:nth-child(3) {
    transition-delay: 0.2s;
}

.radio-mockup {
    gap: 8px;
    align-items: flex-end;
    padding-bottom: 25px;
    justify-content: center;
}

.waveform-bar {
    width: 12px;
    background: linear-gradient(to top, #3b82f6, #93c5fd);
    height: 30px;
    border-radius: 6px;
    animation: wave-eq 1.2s infinite ease-in-out alternate;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6), inset 0 2px 5px rgba(255, 255, 255, 0.4);
    transform-origin: bottom;
}

.waveform-bar:nth-child(1) {
    height: 25px;
    animation-delay: 0.0s;
}

.waveform-bar:nth-child(2) {
    height: 50px;
    animation-delay: 0.2s;
    background: linear-gradient(to top, #6366f1, #a5b4fc);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
}

.waveform-bar:nth-child(3) {
    height: 80px;
    animation-delay: 0.4s;
    background: linear-gradient(to top, #8b5cf6, #c4b5fd);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.6);
}

.waveform-bar:nth-child(4) {
    height: 45px;
    animation-delay: 0.6s;
    background: linear-gradient(to top, #6366f1, #a5b4fc);
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
}

.waveform-bar:nth-child(5) {
    height: 20px;
    animation-delay: 0.8s;
}

/* Color Picker Mockup Fix */
.color-picker-mockup {
    gap: 15px;
    flex-direction: row;
}

.color-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5), inset 0 2px 6px rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.8);
    position: relative;
    animation: colorPulse 3s infinite alternate;
}

@keyframes colorPulse {
    from {
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.5), inset 0 2px 6px rgba(255, 255, 255, 0.4);
    }

    to {
        box-shadow: 0 0 30px rgba(59, 130, 246, 1), inset 0 2px 6px rgba(255, 255, 255, 0.4);
    }
}

.color-title {
    font-weight: 800;
    letter-spacing: 2px;
    color: #cbd5e1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 0.85rem;
}

/* Monitor Mockup Fix */
.monitor-mockup {
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    align-items: stretch;
}

.monitor-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mon-label {
    font-size: 0.8rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mon-track {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

.mon-bar {
    height: 100%;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 0 10px currentColor;
    animation: barFill 2s infinite alternate ease-in-out;
}

.monitor-row:nth-child(1) .mon-bar {
    width: 45%;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    animation-delay: 0s;
}

.monitor-row:nth-child(2) .mon-bar {
    width: 70%;
    background: linear-gradient(90deg, #e11d48, #fb7185);
    animation-delay: -1s;
}

@keyframes barFill {
    from {
        filter: brightness(0.8);
    }

    to {
        filter: brightness(1.2);
    }
}

/* Weather Mockup Fix */
.weather-mockup {
    flex-direction: column;
    gap: 8px;
}

.weather-temp {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(to bottom right, #ffffff, #94a3b8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.weather-desc {
    font-size: 1rem;
    color: #cbd5e1;
    font-weight: 600;
    letter-spacing: 1px;
}

/* AI Mockup */
.ai-brain-pulse {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, #c084fc 0%, #7e22ce 50%, transparent 80%);
    border-radius: 50%;
    filter: blur(8px);
    animation: brainPulsePremium 2.5s infinite alternate ease-in-out;
    position: relative;
}

.ai-brain-pulse::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 50%;
    filter: blur(15px);
    opacity: 0.8;
}

@keyframes brainPulsePremium {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
    }

    100% {
        transform: scale(1.3);
        box-shadow: 0 0 80px rgba(168, 85, 247, 0.9), 0 0 20px rgba(255, 255, 255, 0.4);
    }
}

/* Zen Mockup */
.zen-circle {
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1), transparent);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: zenFloat 4s infinite alternate ease-in-out;
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.2), inset 0 0 20px rgba(16, 185, 129, 0.1);
}

.zen-icon {
    font-size: 2.5rem;
    color: #34d399;
    filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.6));
    animation: zenRotatePremium 15s linear infinite;
}



/* ===== modules\bento-details-2.css ===== */
@keyframes zenFloat {
    from {
        transform: translateY(-10px);
    }

    to {
        transform: translateY(10px);
    }
}

@keyframes zenRotatePremium {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Developer Mockup */
.code-line {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-bottom: 10px;
    width: 80%;
    position: relative;
    overflow: hidden;
}

.code-green {
    background: #10b981;
    width: 45%;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.code-blue {
    background: #3b82f6;
    width: 65%;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

.code-purple {
    background: #a855f7;
    width: 55%;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}

.terminal-cursor {
    width: 10px;
    height: 18px;
    background: #3b82f6;
    display: inline-block;
    animation: blinkPremium 1s step-end infinite;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
}

@keyframes blinkPremium {
    50% {
        opacity: 0;
        box-shadow: none;
    }
}

@keyframes wave-eq {
    0% {
        transform: scaleY(0.6);
        filter: brightness(0.8);
    }

    100% {
        transform: scaleY(1.3);
        filter: brightness(1.3);
    }
}

@media (max-width: 1024px) {
    .bento-card.large {
        grid-column: span 1;
    }

    .bento-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 2.2rem;
    }
}




/* ===== modules\features.css ===== */
/* ===================================================================
   FEATURES - Stil-Ladeliste

   Der Stil liegt in features-1.css bis features-2.css,
   damit keine Datei ueber 300 Zeilen kommt (03_Zerlegen_300_Zeilen.md).
   Die Reihenfolge ist die Kaskade - nicht vertauschen.

   ACHTUNG: Ueber file:// blockiert der Browser @import. Wird diese
   Datei in einer Electron-App geladen, stattdessen die Teile einzeln
   verlinken (16_Deployment_und_Electron.md).
   =================================================================== */

/* ===== modules\features-1.css ===== */
/* FEATURES SECTION */
.features-section {
    padding: 10rem 2rem;
    background: transparent;
    /* Let body background show through */
    text-align: center;
    position: relative;
}

.section-subtitle {
    margin-bottom: 5rem;
    color: #94a3b8;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1rem;
    line-height: 1.7;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3rem;
    max-width: 1300px;
    margin: 0 auto;
}

.feature-card {
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 3rem 2.5rem;
    border-radius: 24px;
    text-align: left;
    transition: var(--bew-standard);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-10px);
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 50px rgba(59, 130, 246, 0.2);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 2rem;
    display: inline-block;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
    transition: transform 0.3s;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

.feature-card h3 {
    margin-bottom: 1.25rem;
    font-size: 1.5rem;
    color: white;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.feature-card p {
    color: #94a3b8;
    line-height: 1.7;
    font-size: 1.05rem;
    margin-bottom: 0;
}

/* Updates Page */
.update-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    margin-top: 4rem;
}

.update-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.4), rgba(2, 6, 23, 0.7));
    padding: 3rem;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: left;
    transition: var(--bew-standard);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), inset 0 2px 10px rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

.update-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 70%);
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.update-card.featured {
    background: linear-gradient(145deg, rgba(30, 58, 138, 0.3), rgba(15, 23, 42, 0.6));
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(59, 130, 246, 0.15), inset 0 2px 15px rgba(255, 255, 255, 0.05);
}

.update-card:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: rgba(59, 130, 246, 0.5);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(59, 130, 246, 0.3),
        inset 0 2px 20px rgba(255, 255, 255, 0.08);
    z-index: 5;
}

.update-card.featured:hover {
    background: linear-gradient(145deg, rgba(30, 58, 138, 0.5), rgba(15, 23, 42, 0.8));
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(59, 130, 246, 0.4),
        inset 0 2px 20px rgba(255, 255, 255, 0.1);
}

.update-card h3 {
    color: white;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.update-card p {
    color: #94a3b8;
    line-height: 1.7;
    font-size: 1.05rem;
    font-weight: 500;
}

.update-card .icon {
    font-size: 2rem;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(255, 255, 255, 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), inset 0 2px 10px rgba(255, 255, 255, 0.1);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.update-card:hover .icon {
    transform: scale(1.15) rotate(5deg);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.4), rgba(139, 92, 246, 0.3));
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.5), inset 0 2px 15px rgba(255, 255, 255, 0.2);
}

/* SPOTLIGHTS (Features Detailed) */
.spotlight-section {
    padding: 8rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.spotlight-row {
    display: flex;
    align-items: center;
    gap: 8rem;
    margin-bottom: 12rem;
    position: relative;
    padding: 0 1rem;
}

.spotlight-row.reverse {
    flex-direction: row-reverse;
}

.spotlight-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.spotlight-text h2 {
    font-size: 3.5rem;
    margin-bottom: 2rem;
    color: white;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.1;
    background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.spotlight-text p {
    font-size: 1.25rem;
    color: #94a3b8;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    max-width: 600px;
}

.spotlight-visual {
    flex: 1.2;
    display: flex;
    justify-content: center;
    position: relative;
}

.visual-card {
    width: 100%;
    height: 450px;
    background: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    transition: var(--bew-standard);
}

.visual-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8), 0 0 40px rgba(59, 130, 246, 0.15);
}

/* Specific Spotlight Visuals */
@keyframes bounceBar {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.6);
    }
}

/* BEFORE & AFTER SLIDER */
.comparison-container {
    padding: 8rem 2rem;
    background: #020617;
    text-align: center;
}

.slider-wrapper {
    position: relative;
    max-width: 1100px;
    margin: 4rem auto;
    aspect-ratio: 16/9;
    background: #0f172a;
    border-radius: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.8);
}



/* ===== modules\features-2.css ===== */
.slider-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-img.before {
    z-index: 1;
}

.slider-img.after {
    z-index: 2;
    clip-path: inset(0 0 0 50%);
}

.slider-input {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 10;
    cursor: ew-resize;
    margin: 0;
    top: 0;
    outline: none;
}

.slider-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: white;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
    transform: translateX(-50%);
}

.slider-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    z-index: 6;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #020617;
    font-size: 1.2rem;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

/* WORKFLOW PULSE */
.workflow-section {
    padding: 10rem 2rem;
    background: radial-gradient(circle at center, rgba(37, 99, 235, 0.05), transparent);
}

.workflow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    max-width: 1300px;
    margin: 6rem auto 0;
}

.workflow-step {
    background: rgba(15, 23, 42, 0.3);
    padding: 3rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: left;
    position: relative;
    transition: var(--bew-standard);
}

.workflow-step:hover {
    background: rgba(30, 41, 59, 0.5);
    transform: translateY(-10px);
    border-color: rgba(59, 130, 246, 0.3);
}

.workflow-time {
    font-size: 0.9rem;
    font-weight: 800;
    color: #3b82f6;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    display: block;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

.workflow-pulse-icon {
    width: 12px;
    height: 12px;
    background: #3b82f6;
    border-radius: 50%;
    position: absolute;
    top: 3rem;
    right: 3rem;
}

.workflow-pulse-icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid #3b82f6;
    border-radius: 50%;
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@media (max-width: 768px) {
    .comparison-container {
        padding: 4rem 1rem;
    }

    .slider-wrapper {
        aspect-ratio: 4/3;
        /* Besser für Mobile als 1/1 */
        border-radius: 20px;
        margin: 2rem auto;
    }

    .slider-button {
        width: 44px;
        height: 44px;
        font-size: 1rem;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    }

    .section-subtitle {
        margin-bottom: 2rem;
        font-size: 1rem;
    }
}



/* ===== modules\showcase.css ===== */
/* SHOWCASE SECTION */
.showcase-section {
    padding: 8rem 2rem;
    background: transparent;
    text-align: center;
}

.showcase-teaser .glass-card {
    display: inline-block;
    padding: 4rem 8rem;
    border-radius: 40px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(30px) saturate(150%);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), inset 0 2px 20px rgba(255, 255, 255, 0.03);
    transition: var(--bew-standard);
    position: relative;
    overflow: hidden;
}

.showcase-teaser .glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top, rgba(59, 130, 246, 0.15), transparent 70%);
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.showcase-teaser .glass-card:hover {
    transform: translateY(-15px) scale(1.02);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow:
        0 50px 120px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(59, 130, 246, 0.25),
        inset 0 2px 30px rgba(255, 255, 255, 0.1);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9));
}

/* THEMES GRID */
.showcase-grid-themes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 3rem;
    max-width: 1200px;
    margin: 5rem auto;
}

.theme-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.4), rgba(2, 6, 23, 0.7));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 32px;
    overflow: hidden;
    transition: var(--bew-standard);
    backdrop-filter: blur(20px) saturate(150%);
    text-align: left;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 2px 10px rgba(255, 255, 255, 0.02);
    position: relative;
    display: flex;
    flex-direction: column;
}

.theme-card::after {
    content: '';
    position: absolute;
    inset: -3px;
    background: conic-gradient(from 0deg, transparent, rgba(59, 130, 246, 0.4), transparent, rgba(139, 92, 246, 0.4), transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 34px;
    animation: rotateBeamTheme 4s linear infinite;
}

@keyframes rotateBeamTheme {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.theme-card:hover {
    transform: translateY(-15px) scale(1.03);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(59, 130, 246, 0.3),
        inset 0 2px 20px rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
    z-index: 10;
}

.theme-card:hover::after {
    opacity: 1;
}

.theme-image-container {
    height: 220px;
    background: #000;
    position: relative;
    overflow: hidden;
    padding: 10px;
}

.theme-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--bew-standard);
    opacity: 0.85;
    border-radius: 20px 20px 0 0;
}

.theme-card:hover .theme-image {
    transform: scale(1.1) translateY(-5px);
    opacity: 1;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Overlay gradient for theme image */
.theme-image-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.9), transparent);
}

.theme-content {
    padding: 2.5rem;
    position: relative;
    z-index: 2;
}

.theme-tag {
    font-size: 0.75rem;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 1.5rem;
    display: inline-block;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.tag-cyber {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(255, 255, 255, 0.05));
    color: #f472b6;
    border: 1px solid rgba(236, 72, 153, 0.5);
    text-shadow: 0 0 10px rgba(244, 114, 182, 0.5);
}

.tag-nature {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(255, 255, 255, 0.05));
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.5);
    text-shadow: 0 0 10px rgba(52, 211, 153, 0.5);
}

.tag-dark {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(255, 255, 255, 0.05));
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.5);
    text-shadow: 0 0 10px rgba(226, 232, 240, 0.5);
}

.theme-card h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: white;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.theme-card p {
    color: #94a3b8;
    font-size: 1.05rem;
    line-height: 1.8;
    font-weight: 500;
}

/* ADDITIONAL SHOWCASE POLISH */
.section-title {
    font-size: 3rem;
    color: white;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #94a3b8;
    max-width: 600px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
}

/* TECH STACK FOOTER inside Showcase */
.tech-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.tech-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.tech-tag {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #cbd5e1;
    backdrop-filter: blur(10px);
    transition: var(--bew-standard);
    cursor: default;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.tech-tag:hover {
    transform: translateY(-3px);
    border-color: rgba(59, 130, 246, 0.5);
    color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(59, 130, 246, 0.2);
}

.tech-tag.speed {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.1);
}

.tech-tag.speed:hover {
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(245, 158, 11, 0.3);
}


/* ===== modules\showcase-demo.css ===== */
/* ===================================================================
   SHOWCASE-DEMO - Stil-Ladeliste

   Der Stil liegt in showcase-demo-1.css bis showcase-demo-2.css,
   damit keine Datei ueber 300 Zeilen kommt (03_Zerlegen_300_Zeilen.md).
   Die Reihenfolge ist die Kaskade - nicht vertauschen.

   ACHTUNG: Ueber file:// blockiert der Browser @import. Wird diese
   Datei in einer Electron-App geladen, stattdessen die Teile einzeln
   verlinken (16_Deployment_und_Electron.md).
   =================================================================== */

/* ===== modules\showcase-demo-1.css ===== */
/* INTERACTIVE SHOWCASE WINDOW */
.window-frame {
    background: rgba(10, 15, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(40px);
    transition: var(--bew-standard);
}

.window-header {
    height: 44px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1.5rem;
}

.window-controls {
    display: flex;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot.red {
    background: #ff5f56;
}

.dot.yellow {
    background: #ffbd2e;
}

.dot.green {
    background: #27c93f;
}

.window-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.window-content {
    display: flex;
    height: 500px;
}

/* SIDEBAR REPAIR */
.mockup-sidebar {
    width: 72px;
    background: rgba(255, 255, 255, 0.02);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
    gap: 1.5rem;
}

.mockup-sidebar i {
    font-size: 1.2rem;
    color: #64748b;
    cursor: pointer;
    transition: var(--bew-standard);
}

.mockup-sidebar i:hover,
.mockup-sidebar i.active {
    color: #3b82f6;
    transform: scale(1.1);
}

.mockup-main-area {
    flex: 1;
    padding: 2rem;
}

.mock-tab {
    display: none;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    padding-right: 1rem;
}

/* CUSTOM SCROLLBAR FOR MOCK TABS */
.mock-tab::-webkit-scrollbar {
    width: 8px;
}

.mock-tab::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
}

.mock-tab::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.mock-tab::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.5);
}

/* WIDGET REPAIR */
.widget-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1.25rem;
    width: 100%;
}

@media (max-width: 600px) {
    .widget-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.mock-widget {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 140px;
    transition: var(--bew-standard);
    position: relative;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .mock-widget {
        padding: 0.75rem;
        /* Weniger Padding auf Handy */
        min-height: 100px;
        border-radius: 16px;
    }

    .mock-widget h4 {
        font-size: 0.85rem !important;
        margin-bottom: 0.5rem;
    }

    .mock-widget div,
    .mock-widget span {
        font-size: 0.75rem !important;
    }
}

.mock-widget.wide {
    width: 100%;
    height: auto;
    min-height: 100px;
}

.mock-widget:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2rem;
    background: #3b82f6;
    margin-left: 2px;
    animation: blink 0.7s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.mock-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 60px;
    width: 100%;
}

.mock-bar {
    flex: 1;
    background: linear-gradient(to top, rgba(59, 130, 246, 0.4), rgba(59, 130, 246, 0.1));
    border-radius: 4px 4px 0 0;
    min-height: 10%;
    height: 100%;
    transform-origin: bottom;
    transform: scaleY(.3);
    animation: barPulse 2s infinite ease-in-out;
}

/* Siehe hero-mockup-2.css: Skalierung statt Höhe, damit der Browser
   nicht in jedem Bild neu vermessen muss. */
@keyframes barPulse {

    0%,
    100% {
        transform: scaleY(.3);
    }

    50% {
        transform: scaleY(.8);
    }
}

.ring {
    --p: 0;
    --c: #3b82f6;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--c) calc(var(--p)*1%), rgba(255, 255, 255, 0.05) 0);
    position: relative;
    font-size: 0.75rem;
    font-weight: 800;
    color: white;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.ring::after {
    content: "";
    position: absolute;
    inset: 8px;
    background: #111827;
    border-radius: 50%;
    z-index: 1;
}

.ring span {
    position: relative;
    z-index: 2;
}

.toggle-switch {
    width: 50px;
    height: 26px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
}

.toggle-switch.active {
    background: #3b82f6;
}

.toggle-knob {
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: transform 0.3s;
}

.toggle-switch.active .toggle-knob {
    transform: translateX(24px);
}



/* ===== modules\showcase-demo-2.css ===== */
.mock-notification {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.3);
    padding: 1rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(150%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}

.mock-notification.show {
    transform: translateY(0);
}

.fa-spin-slow {
    animation: fa-spin 8s linear infinite;
}

@keyframes fa-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.glow-effect:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    filter: brightness(1.2);
}

/* COMPARISON TABLE */
.comparison-table {
    margin-top: 2rem;
    overflow-x: auto;
}

.comparison-table span {
    font-size: 0.95rem;
}

@media (max-width: 600px) {
    .comparison-table {
        padding: 1.5rem 1rem !important;
    }

    .comparison-table div[style*="justify-content:space-between"] {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        margin-bottom: 1rem !important;
    }
}

/* NEW SHOWCASE ELEMENTS */
.theme-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--bew-standard);
}

.theme-dot:hover {
    transform: scale(1.2);
}

.theme-dot.active {
    border-color: white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.mock-notif-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem;
    transition: var(--bew-standard);
}

.mock-notif-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

/* PLUGIN & FILE ELEMENTS */
.plugin-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--bew-standard);
}

.plugin-card:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    transform: scale(1.05);
}

.plugin-card i {
    font-size: 1.5rem;
}

.plugin-card span {
    font-size: 0.75rem;
    color: white;
    font-weight: 500;
}

.file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-item {
    background: rgba(255, 255, 255, 0.02);
    padding: 10px 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: #cbd5e1;
    cursor: pointer;
    transition: var(--bew-standard);
}

.file-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(3px);
}



/* ===== modules\pricing.css ===== */
/* PRICING */
.pricing-section {
    padding: 6rem 2rem;
    background: #0f172a;
    text-align: center;
}

.pricing-grid {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.pricing-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 3rem;
    border-radius: 32px;
    width: 380px;
    text-align: center;
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 2px 15px rgba(255, 255, 255, 0.05);
    transition: var(--bew-standard);
    position: relative;
    overflow: hidden;
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, rgba(59, 130, 246, 0.15), transparent);
    pointer-events: none;
}

.pricing-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 40px rgba(59, 130, 246, 0.2);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9));
}

.p-header {
    color: #3b82f6;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.p-price {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.p-features {
    list-style: none;
    text-align: left;
    margin: 2rem 0;
    color: #cbd5e1;
}

.p-features li {
    margin-bottom: 1rem;
    display: flex;
    gap: 10px;
}

.pricing-note {
    color: #94a3b8;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 1rem;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.pricing-note:hover {
    opacity: 1;
}

.pricing-note i {
    color: #3b82f6;
}

@media (max-width: 600px) {
    .pricing-grid {
        flex-direction: column;
        align-items: center;
    }

    .pricing-card {
        width: 100%;
    }
}


/* ===== modules\stats.css ===== */
/* STATS & LIVE MONITOR SECTIONS */

/* LIVE MONITOR SECTION (Projekt Status) */
.live-monitor-section {
    padding: 6rem 2rem;
    text-align: center;
    background: transparent;
    position: relative;
}

.monitor-frame {
    max-width: 1000px;
    margin: 3rem auto;
    background: rgba(15, 20, 35, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 3rem;
    border-radius: 32px;
    backdrop-filter: blur(40px) saturate(150%);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.8),
        inset 0 2px 20px rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.monitor-frame::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 70%);
    pointer-events: none;
}

.monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    text-align: left;
    position: relative;
    z-index: 2;
}

.stat-box {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.7));
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    transition: var(--bew-standard);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
}

.stat-box:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 2px 10px rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(40, 50, 70, 0.6), rgba(20, 30, 50, 0.8));
}

.stat-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.stat-label span:last-child {
    font-weight: 600;
    color: #64748b;
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 900;
    color: white;
    margin: 0.5rem 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: -0.5px;
}

.stat-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.stat-bar-fill {
    height: 100%;
    border-radius: 12px;
    transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.stat-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: bar-shine 2.5s infinite linear;
}

@keyframes bar-shine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* STATS SECTION (Counter) */
.stats-section {
    padding: 6rem 2rem;
    background: #030712;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.5), rgba(2, 6, 23, 0.8));
    padding: 3rem 2.5rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    transition: var(--bew-standard);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 2px 10px rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 70%);
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.stat-card:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(59, 130, 246, 0.3),
        inset 0 2px 20px rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
    z-index: 5;
}

.stat-number {
    font-size: 3.8rem;
    font-weight: 900;
    margin-bottom: 0.8rem;
    line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.gradient-text {
    background: linear-gradient(135deg, #60a5fa, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat-card .stat-label {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.8rem;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.stat-desc {
    font-size: 1rem;
    color: #94a3b8;
    line-height: 1.6;
    font-weight: 500;
}

/* FAQ / INFO SECTION */
.info-section {
    padding: 6rem 2rem;
    background: #020617;
}

.info-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    text-align: left;
    transition: background 0.3s;
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.faq-item h3 {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.faq-item p {
    color: #94a3b8;
    line-height: 1.6;
}


/* ===== modules\testimonials.css ===== */
/* TESTIMONIALS & ABOUT & COMMUNITY */

/* TESTIMONIALS */
.testimonials-section {
    padding: 6rem 2rem;
    background: #030712;
    text-align: center;
}

.vision-card {
    max-width: 850px;
    margin: 0 auto;
    padding: 4rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.8));
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), inset 0 2px 20px rgba(255, 255, 255, 0.03);
    transition: var(--bew-standard);
    position: relative;
    overflow: hidden;
}

.vision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top, rgba(59, 130, 246, 0.1), transparent 60%);
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.vision-card:hover {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 50px 120px rgba(0, 0, 0, 0.7), 0 0 40px rgba(59, 130, 246, 0.15);
}

.quote-icon {
    font-size: 3.5rem;
    margin-bottom: 2rem;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    display: inline-block;
    animation: floatIcon 3s infinite ease-in-out alternate;
}

@keyframes floatIcon {
    from {
        transform: translateY(-5px);
    }

    to {
        transform: translateY(5px);
    }
}

.vision-card h3 {
    font-size: 1.8rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.author strong {
    display: block;
    color: #60a5fa;
    margin-bottom: 0.3rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.author span {
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 500;
}

/* ABOUT */
.about-section {
    padding: 8rem 2rem;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}

.about-text {
    flex: 1;
    min-width: 320px;
}

.about-text h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: white;
    font-weight: 900;
    letter-spacing: -1px;
}

.about-text p {
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.about-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

.rocket-badge {
    width: 220px;
    height: 220px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 2px 15px rgba(255, 255, 255, 0.05);
    transition: var(--bew-standard);
    position: relative;
    overflow: hidden;
}

.rocket-badge::after {
    content: '';
    position: absolute;
    inset: -3px;
    background: conic-gradient(from 0deg, transparent, rgba(59, 130, 246, 0.4), transparent, rgba(236, 72, 153, 0.4), transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 35px;
    animation: rotateBeamRocket 4s linear infinite;
}

@keyframes rotateBeamRocket {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.rocket-badge:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(59, 130, 246, 0.2);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9));
}

.rocket-badge:hover::after {
    opacity: 1;
}

.rocket-badge span {
    font-size: 5rem;
    margin-bottom: 1.2rem;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    transition: transform 0.4s ease;
}

.rocket-badge:hover span {
    transform: scale(1.1) rotate(15deg);
}

.rocket-badge label {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* COMMUNITY */
.community-section {
    padding: 8rem 2rem;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.05), transparent 70%);
    text-align: center;
}

.community-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.comm-card {
    width: 180px;
    height: 140px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.3), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    opacity: 0.8;
    transition: var(--bew-standard);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.comm-card:hover {
    opacity: 1;
    transform: translateY(-8px) scale(1.05);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9));
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(59, 130, 246, 0.15);
}

.comm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 60%);
    pointer-events: none;
}

.comm-card .social-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #94a3b8;
    pointer-events: none;
    transition: var(--bew-standard);
}

.comm-card:hover .social-icon {
    color: white;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    transform: scale(1.1);
}

.comm-card label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.5px;
    transition: color 0.4s ease;
}

.comm-card:hover label {
    color: white;
}

@media (max-width: 600px) {
    .about-section {
        flex-direction: column-reverse;
        padding: 3rem 1rem;
    }
}


/* ===== modules\about.css ===== */
/* ABOUT SECTION - ALIAS TO TESTIMONIALS IF NEEDED OR SEPARATE */
/* Content currently in testimonials.css as grouped */

/* ===== modules\testimonials.css ===== */
/* TESTIMONIALS & ABOUT & COMMUNITY */

/* TESTIMONIALS */
.testimonials-section {
    padding: 6rem 2rem;
    background: #030712;
    text-align: center;
}

.vision-card {
    max-width: 850px;
    margin: 0 auto;
    padding: 4rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.8));
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), inset 0 2px 20px rgba(255, 255, 255, 0.03);
    transition: var(--bew-standard);
    position: relative;
    overflow: hidden;
}

.vision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top, rgba(59, 130, 246, 0.1), transparent 60%);
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.vision-card:hover {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 50px 120px rgba(0, 0, 0, 0.7), 0 0 40px rgba(59, 130, 246, 0.15);
}

.quote-icon {
    font-size: 3.5rem;
    margin-bottom: 2rem;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    display: inline-block;
    animation: floatIcon 3s infinite ease-in-out alternate;
}

@keyframes floatIcon {
    from {
        transform: translateY(-5px);
    }

    to {
        transform: translateY(5px);
    }
}

.vision-card h3 {
    font-size: 1.8rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.author strong {
    display: block;
    color: #60a5fa;
    margin-bottom: 0.3rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.author span {
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 500;
}

/* ABOUT */
.about-section {
    padding: 8rem 2rem;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}

.about-text {
    flex: 1;
    min-width: 320px;
}

.about-text h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: white;
    font-weight: 900;
    letter-spacing: -1px;
}

.about-text p {
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.about-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

.rocket-badge {
    width: 220px;
    height: 220px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 2px 15px rgba(255, 255, 255, 0.05);
    transition: var(--bew-standard);
    position: relative;
    overflow: hidden;
}

.rocket-badge::after {
    content: '';
    position: absolute;
    inset: -3px;
    background: conic-gradient(from 0deg, transparent, rgba(59, 130, 246, 0.4), transparent, rgba(236, 72, 153, 0.4), transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 35px;
    animation: rotateBeamRocket 4s linear infinite;
}

@keyframes rotateBeamRocket {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.rocket-badge:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(59, 130, 246, 0.2);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9));
}

.rocket-badge:hover::after {
    opacity: 1;
}

.rocket-badge span {
    font-size: 5rem;
    margin-bottom: 1.2rem;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    transition: transform 0.4s ease;
}

.rocket-badge:hover span {
    transform: scale(1.1) rotate(15deg);
}

.rocket-badge label {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* COMMUNITY */
.community-section {
    padding: 8rem 2rem;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.05), transparent 70%);
    text-align: center;
}

.community-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.comm-card {
    width: 180px;
    height: 140px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.3), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    opacity: 0.8;
    transition: var(--bew-standard);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.comm-card:hover {
    opacity: 1;
    transform: translateY(-8px) scale(1.05);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9));
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(59, 130, 246, 0.15);
}

.comm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 60%);
    pointer-events: none;
}

.comm-card .social-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #94a3b8;
    pointer-events: none;
    transition: var(--bew-standard);
}

.comm-card:hover .social-icon {
    color: white;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    transform: scale(1.1);
}

.comm-card label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.5px;
    transition: color 0.4s ease;
}

.comm-card:hover label {
    color: white;
}

@media (max-width: 600px) {
    .about-section {
        flex-direction: column-reverse;
        padding: 3rem 1rem;
    }
}



/* ===== modules\community.css ===== */
/* COMMUNITY - ALIAS */
/* Content currently in testimonials.css as grouped */

/* ===== modules\testimonials.css ===== */
/* TESTIMONIALS & ABOUT & COMMUNITY */

/* TESTIMONIALS */
.testimonials-section {
    padding: 6rem 2rem;
    background: #030712;
    text-align: center;
}

.vision-card {
    max-width: 850px;
    margin: 0 auto;
    padding: 4rem;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.8));
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), inset 0 2px 20px rgba(255, 255, 255, 0.03);
    transition: var(--bew-standard);
    position: relative;
    overflow: hidden;
}

.vision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top, rgba(59, 130, 246, 0.1), transparent 60%);
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.vision-card:hover {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 50px 120px rgba(0, 0, 0, 0.7), 0 0 40px rgba(59, 130, 246, 0.15);
}

.quote-icon {
    font-size: 3.5rem;
    margin-bottom: 2rem;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    display: inline-block;
    animation: floatIcon 3s infinite ease-in-out alternate;
}

@keyframes floatIcon {
    from {
        transform: translateY(-5px);
    }

    to {
        transform: translateY(5px);
    }
}

.vision-card h3 {
    font-size: 1.8rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.author strong {
    display: block;
    color: #60a5fa;
    margin-bottom: 0.3rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.author span {
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 500;
}

/* ABOUT */
.about-section {
    padding: 8rem 2rem;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}

.about-text {
    flex: 1;
    min-width: 320px;
}

.about-text h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: white;
    font-weight: 900;
    letter-spacing: -1px;
}

.about-text p {
    color: #cbd5e1;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.about-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

.rocket-badge {
    width: 220px;
    height: 220px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 2px 15px rgba(255, 255, 255, 0.05);
    transition: var(--bew-standard);
    position: relative;
    overflow: hidden;
}

.rocket-badge::after {
    content: '';
    position: absolute;
    inset: -3px;
    background: conic-gradient(from 0deg, transparent, rgba(59, 130, 246, 0.4), transparent, rgba(236, 72, 153, 0.4), transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 35px;
    animation: rotateBeamRocket 4s linear infinite;
}

@keyframes rotateBeamRocket {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.rocket-badge:hover {
    transform: translateY(-10px) scale(1.05);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(59, 130, 246, 0.2);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9));
}

.rocket-badge:hover::after {
    opacity: 1;
}

.rocket-badge span {
    font-size: 5rem;
    margin-bottom: 1.2rem;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
    transition: transform 0.4s ease;
}

.rocket-badge:hover span {
    transform: scale(1.1) rotate(15deg);
}

.rocket-badge label {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* COMMUNITY */
.community-section {
    padding: 8rem 2rem;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.05), transparent 70%);
    text-align: center;
}

.community-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.comm-card {
    width: 180px;
    height: 140px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.3), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    opacity: 0.8;
    transition: var(--bew-standard);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.comm-card:hover {
    opacity: 1;
    transform: translateY(-8px) scale(1.05);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9));
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(59, 130, 246, 0.15);
}

.comm-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 60%);
    pointer-events: none;
}

.comm-card .social-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #94a3b8;
    pointer-events: none;
    transition: var(--bew-standard);
}

.comm-card:hover .social-icon {
    color: white;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    transform: scale(1.1);
}

.comm-card label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.5px;
    transition: color 0.4s ease;
}

.comm-card:hover label {
    color: white;
}

@media (max-width: 600px) {
    .about-section {
        flex-direction: column-reverse;
        padding: 3rem 1rem;
    }
}



/* ===== modules\footer.css ===== */
/* FOOTER - PREMIUM GLASSMORPHISM */
footer {
    background: radial-gradient(circle at 50% 100%, rgba(59, 130, 246, 0.05), transparent 70%), #020617;
    padding: 6rem 2rem 2rem 2rem;
    position: relative;
    margin-top: 10rem;
    overflow: hidden;
}

/* Glowing Top Border */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(59, 130, 246, 0) 20%,
            rgba(59, 130, 246, 0.5) 50%,
            rgba(59, 130, 246, 0) 80%,
            transparent 100%);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 2;
}

.footer-col h4 {
    margin-bottom: 2rem;
    color: white;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.footer-col a {
    display: block;
    color: #94a3b8;
    text-decoration: none;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--bew-standard);
}

.footer-col a:hover {
    color: #3b82f6;
    transform: translateX(8px);
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.footer-col a.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.footer-col a.disabled:hover {
    transform: none;
}

/* BRAND COLUMN */
.brand-col .footer-brand {
    font-size: 1.8rem;
    font-weight: 950;
    color: white;
    letter-spacing: -1.5px;
    margin-bottom: 1rem;
    display: block;
}

.brand-col p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 300px;
}

/* SOCIALS */

/* NEWSLETTER */

/* BOTTOM BAR */
.footer-bottom {
    max-width: 1400px;
    margin: 3rem auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #475569;
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
}

.copyright {
    font-weight: 500;
}

.footer-badges {
    display: flex;
    gap: 1.5rem;
}

.badge-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 16px;
    border-radius: 50px;
    color: #64748b;
    font-weight: 600;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--bew-standard);
}

.badge-pill:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

/* RESPONSIVE */
@media (max-width: 1100px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    .brand-col,
}

@media (max-width: 600px) {
    .footer-content {
        grid-template-columns: 1fr;
    }

    .brand-col,

    .footer-bottom {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
}

/* ===================================================================
   FUSSBEREICH – NEUER AUFBAU
   Newsletter und die vier Sozial-Symbole (drei davon führten ins Leere)
   sind entfallen. Geblieben ist der eine Kanal, den es wirklich gibt.
   =================================================================== */
.footer-insta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.4rem;
    padding: 0.5rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    color: #94a3b8;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.footer-insta i {
    font-size: 1rem;
}

.footer-insta:hover {
    color: #e2e8f0;
    border-color: rgba(168, 85, 247, 0.45);
    background: rgba(168, 85, 247, 0.1);
}

/* Punkt neben "In Entwicklung": bernstein statt grün – es läuft nichts
   im Betrieb, es wird gebaut. */
.system-status {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.7);
    flex-shrink: 0;
}

/* Der Nach-oben-Knopf schwebt unten rechts und lag über der Statuszeile.
   Der Fussbereich bekommt rechts Platz, damit sich beide nicht überdecken. */
.footer-bottom {
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-right: 84px;
}

@media (max-width: 900px) {
    .footer-bottom {
        padding-right: 0;
        padding-bottom: 76px;
    }
}


/* ===== modules\modals.css ===== */
/* MODALS - MODULARIZED */

/* ===== modules\modals-base.css ===== */
/* MODALS - BASE STRUCTURE */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dunkler und stärker verwischt, damit das Fenster klar im Vordergrund
       steht und die Seite dahinter nicht mehr ablenkt. */
    background: rgba(2, 6, 16, 0.86);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 3000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    box-sizing: border-box;
    overflow-y: auto;
    animation: fadeIn 0.3s ease-out;
}

.modal-backdrop.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-content {
    /* Blickdicht statt durchscheinend: Das Fenster soll ganz vorn stehen,
       nicht die Seite dahinter durchlassen. */
    background: #0d1526;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 24px;
    /* Rechts weniger Innenabstand, dafür sitzt der schlanke Balken dort;
       so überdeckt er die runde Ecke nicht mehr. */
    padding: 2.6rem 1.4rem 2.6rem 2.6rem;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
    transform: scale(0.95);
    animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    /* Firefox: schlanker, farblich passender Balken */
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

/* WebKit: schlanker Balken mit Abstand zum Rand, damit er nicht über
   die runde Ecke läuft (das war vorher der klobige helle Streifen). */
.modal-content::-webkit-scrollbar {
    width: 10px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
    margin: 18px 0;
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
    border-radius: 100px;
    border: 3px solid transparent;
    background-clip: content-box;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
    background-clip: content-box;
}

@keyframes popIn {
    to {
        transform: scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}

.modal-header h3 {
    font-size: 1.8rem;
    color: white;
    font-weight: 700;
}

.close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    cursor: pointer;
    transition: var(--bew-standard);
}

.close-btn:hover {
    background: #ef4444;
    border-color: #ef4444;
}

.modal-body {
    color: #cbd5e1;
    line-height: 1.6;
}

/* Die drei Bedingungen, die vor dem Start erfüllt sein müssen.
   Ersetzen die früheren Balken mit erfundenen Prozentzahlen –
   das waren geschätzte Werte, keine gemessenen. */
.modal-gates {
    display: grid;
    gap: 0.6rem;
    margin: 1.8rem 0 0.5rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.modal-gate {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 12px;
    color: #cbd5e1;
    font-size: 0.94rem;
    line-height: 1.5;
}

.modal-gate i {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: rgba(59, 130, 246, 0.13);
    color: #93c5fd;
    font-size: 0.9rem;
}

.modal-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2rem;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: var(--bew-standard);
}

.modal-footer-link:hover {
    color: #60a5fa;
    transform: translateX(5px);
}

/* ===== ANNOUNCEMENT POPUP (V4) ===== */
.updates-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--bew-standard);
}

.updates-popup-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.updates-popup {
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(168, 85, 247, 0.4);
    box-shadow: 0 0 50px rgba(168, 85, 247, 0.3);
    padding: 3rem;
    border-radius: 24px;
    text-align: center;
    max-width: 500px;
    width: 90%;
    transform: scale(0.9);
    transition: var(--bew-standard);
}

.updates-popup-overlay.show .updates-popup {
    transform: scale(1);
}

.updates-popup h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #fff 0%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.updates-popup p {
    color: #cbd5e1;
    line-height: 1.6;
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

.updates-popup-btn {
    background: #a855f7;
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: transform 0.2s;
}

.updates-popup-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(168, 85, 247, 0.5);
}


/* ===== modules\modals-platforms.css ===== */
/* MODALS - PLATFORMS & STATUS */
.modal-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.status-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--bew-standard);
}

.status-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.05);
}

/* Einleitungstext über den Plattformen */
.platform-intro {
    color: #94a3b8;
    font-size: 0.96rem;
    line-height: 1.75;
    margin-bottom: 1.8rem;
}

.platform-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* Drei gleich breite Karten statt fünf halbdurchsichtiger. */
.platform-grid--3 .platform-card {
    flex: 1 1 160px;
    max-width: 200px;
}

.platform-card {
    flex: 0 1 180px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    transition: var(--bew-standard);
    position: relative;
    overflow: hidden;
}

.platform-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top, rgba(255,255,255,0.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

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

.platform-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-6px);
    box-shadow: 0 12px 30px -10px rgba(59, 130, 246, 0.2);
}

/* AetherOS ist das Ziel und hebt sich ab. */
.platform-card--ziel {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.35);
}

.plat-icon {
    font-size: 3.2rem;
    color: #3b82f6;
    transition: var(--bew-standard);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

.platform-card--ziel .plat-icon {
    color: #60a5fa;
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.5));
}

.platform-card:hover .plat-icon {
    transform: scale(1.12) translateY(-3px);
    color: #60a5fa;
}

.plat-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 1;
}

.plat-info h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: #f8fafc;
    letter-spacing: -0.01em;
}

.status-badge {
    font-size: 0.65rem;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.status-badge.soon {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.1);
    animation: badgePulse 3s infinite ease-in-out;
}

.status-badge.future {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4), inset 0 0 10px rgba(59, 130, 246, 0.1); }
    50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0), inset 0 0 15px rgba(59, 130, 246, 0.3); }
}

.thanks-box {
    margin-top: 2rem;
    padding: 1.25rem;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: boxGlow 4s infinite ease-in-out;
}

@keyframes boxGlow {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.05);
    }

    50% {
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.25);
    }
}

.thanks-box i {
    color: #3b82f6;
    animation: heartBeat 2s infinite;
}

@keyframes heartBeat {

    0%,
    50%,
    100% {
        transform: scale(1);
    }

    5%,
    15% {
        transform: scale(1.2);
    }
}


/* @import 'responsive.css'; -- Integrated into modules or separate if needed */

/* ---------- Hinweis: Detailtexte nur Deutsch/Englisch ---------- */
.sprachhinweis {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    max-width: 900px;
    margin: 0 auto 1.6rem;
    padding: 0.9rem 1.2rem;
    background: rgba(59, 130, 246, 0.07);
    border: 1px solid rgba(59, 130, 246, 0.24);
    border-radius: 12px;
    color: #94a3b8;
    font-size: 0.88rem;
    line-height: 1.7;
}

.sprachhinweis i {
    color: #60a5fa;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.sprachhinweis em {
    color: #64748b;
    font-style: normal;
}


/* ===== modules\status-band.css ===== */
/* ===================================================================
   AERONA SPACE – KOPFLEISTE

   Navigation und Bauzustand sitzen in EINEM schwebenden Kasten:
   oben die Zeile mit Marke, Menü und Bedienknöpfen, darunter – nur
   durch eine feine Linie getrennt – der Satz zum Stand des Projekts.
   Vorher waren das zwei Kästen untereinander, was doppelt gerahmt
   und zerrissen wirkte.

   Die Hülle .kopfleiste trägt jetzt Position, Rahmen und Hintergrund;
   .site-header und .status-band liegen darin und sind selbst durchsichtig.
   =================================================================== */
.kopfleiste {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    box-sizing: border-box;

    width: 95%;
    max-width: 1400px;

    border-radius: 32px;
    background: rgba(9, 14, 28, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    /* Die Menüfelder sollen aus dem Kasten herausklappen dürfen. */
    overflow: visible;
}

/* Der Kopfbereich gibt seine eigene Hülle ab – er ist jetzt eine Zeile
   innerhalb der Kopfleiste, kein eigener Kasten mehr. */
.kopfleiste .site-header {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    left: auto;
    top: auto;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.kopfleiste .header-bg {
    display: none;
}
/* ---------- Zweite Zeile: der Bauzustand ---------- */
.status-band {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0.6rem 2.5rem;
    min-height: 42px;

    /* kein eigener Rahmen mehr – nur die Trennlinie nach oben */
    border-top: 1px solid rgba(148, 163, 184, 0.13);
    background: rgba(251, 191, 36, 0.045);
    border-radius: 0 0 31px 31px;

    color: #94a3b8;
    font-size: 0.84rem;
    line-height: 1.5;
}

.status-band i {
    color: #fbbf24;
    font-size: 0.88rem;
    flex-shrink: 0;
}

.status-band__text {
    min-width: 0;
}

.status-band strong {
    color: #e2e8f0;
    font-weight: 700;
}

.status-band__wann {
    color: #fcd34d;
    font-weight: 700;
    white-space: nowrap;
}

.status-band a {
    margin-left: auto;
    flex-shrink: 0;
    color: #fcd34d;
    font-size: 0.79rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.28rem 0.8rem;
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 100px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.status-band a:hover {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.5);
}

/* Der Inhalt beginnt unter der gesamten Leiste, nicht nur unter der
   ersten Zeile: 20px Abstand oben + 72px Menü + rund 42px Bauzustand. */
.kopfleiste + main,
.kopfleiste ~ main {
    /* JS misst die echte Höhe (js/kopfleiste.js); 9,5rem ist der Ersatz. */
    padding-top: calc(var(--kopfleiste-hoehe, 9.5rem) + 1.2rem);
}
/* ===================================================================
   SCHMALE GERÄTE

   Aus dem alten Aufbau stammen zwei Regeln, die den Kopfbereich auf
   schmalen Geräten mit !important aus seiner Hülle reissen und ihn
   selbst am oberen Rand festnageln (header-mobile.css und
   resp-global.css). Diese Rolle übernimmt jetzt die Kopfleiste –
   der Kopfbereich darin muss dafür zurückgesetzt werden, und das
   geht gegen !important nur mit !important.
   =================================================================== */
@media (max-width: 1099px) {
    .kopfleiste {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
        background: rgba(10, 15, 30, 0.95);
    }

    .kopfleiste .site-header {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 54px !important;
        padding: 0.5rem 1rem !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        z-index: auto !important;
    }

    .kopfleiste .brand-container {
        min-width: 0;
        overflow: hidden;
    }

    .kopfleiste .logo {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .kopfleiste .header-actions {
        flex-shrink: 0;
    }

    .status-band {
        padding: 0.55rem 1rem;
        border-radius: 0;
        align-items: flex-start;
        font-size: 0.79rem;
    }

    .status-band i {
        margin-top: 0.2rem;
    }

    .kopfleiste ~ main {
        padding-top: calc(var(--kopfleiste-hoehe, 8.5rem) + 1rem);
    }
}

@media (max-width: 760px) {
    .status-band {
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .status-band a {
        margin-left: 0;
        width: 100%;
        text-align: center;
        padding: 0.4rem 0.8rem;
    }

    .kopfleiste ~ main {
        padding-top: calc(var(--kopfleiste-hoehe, 10.5rem) + 1rem);
    }
}

@media (max-width: 420px) {
    .kopfleiste .powered-by-header {
        display: none;
    }
}


/* ===== modules\bausteine.css ===== */
/* ===================================================================
   AERONA SPACE – BAUSTEINE DES ÖKOSYSTEMS
   Ersetzt das alte Bento-Raster mit den neun Main-App-Modulen.
   Jede Karte führt auf die Seite, die den Baustein ausführlich zeigt.
   =================================================================== */
.bau-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1rem;
    max-width: 1200px;
    margin: 3rem auto 0;
}

.bau-karte {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1.7rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    text-decoration: none;
    min-width: 0;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.bau-karte:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-3px);
}

.bau-karte__kopf {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.bau-karte__kopf i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.13);
    color: #93c5fd;
    font-size: 1.05rem;
    transition: background 0.25s ease, color 0.25s ease;
}

.bau-karte:hover .bau-karte__kopf i {
    background: rgba(59, 130, 246, 0.24);
    color: #bfdbfe;
}

.bau-karte__kopf h3 {
    color: white;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    min-width: 0;
}

.bau-karte p {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.75;
    margin: 0;
    flex-grow: 1;
}

/* Die belegbare Zahl sitzt unten und ist bei allen Karten auf einer Linie. */
.bau-karte__zahl {
    margin-top: 1.1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(148, 163, 184, 0.13);
    color: #93c5fd;
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .bau-grid {
        grid-template-columns: 1fr;
        margin-top: 2.2rem;
    }

    .bau-karte {
        padding: 1.3rem 1.4rem;
    }
}


/* ===== modules\startseite.css ===== */
/* ===================================================================
   AERONA SPACE – STARTSEITE
   Sieben Abschnitte statt zwölf. Jeder Abschnitt hat denselben Aufbau:
   Überschrift, Unterzeile, Inhalt, ein Weg weiter. Die Bausteine-Karten
   liegen in bausteine.css, das Kopfband in status-band.css.
   =================================================================== */

/* ---------- 1. Einstieg ---------- */
.hero {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 1.5rem 5rem;
    text-align: center;
}

.hero h1 {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    font-size: clamp(2.1rem, 6.5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    color: white;
    margin-bottom: 1.8rem;
}

.hero-akzent {
    background: linear-gradient(120deg, #60a5fa 0%, #a855f7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-text {
    max-width: 700px;
    margin: 0 auto 2.2rem;
    color: #94a3b8;
    font-size: clamp(1rem, 2.2vw, 1.12rem);
    line-height: 1.9;
}

.hero-text strong {
    display: block;
    margin-top: 0.9rem;
    color: #e2e8f0;
    font-weight: 700;
}

.hero-wege {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 2rem;
}

.hero-weg {
    padding: 0.85rem 1.7rem;
    border-radius: 100px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: #cbd5e1;
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.hero-weg:hover {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.1);
    color: white;
}

.hero-weg--haupt {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: transparent;
    color: white;
}

.hero-weg--haupt:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    color: white;
}

.hero-ort {
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto;
}

/* ---------- Gemeinsamer Abschnittsaufbau ---------- */
.abs {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem;
}

.abs__titel {
    color: white;
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 0.9rem;
    max-width: 860px;
}

.abs__unter {
    color: #94a3b8;
    font-size: 1.02rem;
    line-height: 1.85;
    max-width: 700px;
    margin-bottom: 2.2rem;
}

.abs__weiter {
    display: inline-block;
    margin-top: 2rem;
    color: #93c5fd;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.abs__weiter::after {
    content: " →";
}

.abs__weiter:hover {
    color: #bfdbfe;
    border-color: #60a5fa;
}

/* ---------- 2. Der Grund ---------- */
.abs__fliess {
    max-width: 680px;
}

.abs__fliess p {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.95;
    margin-bottom: 1.2rem;
}


/* ===== modules\startseite-teile.css ===== */
/* ===================================================================
   AERONA SPACE – STARTSEITE, TEIL 2
   Fortsetzung von startseite.css (300-Zeilen-Regel).
   Zahlenblock, das Misslungene, die Festlegungen und der Schluss.
   =================================================================== */

/* ---------- 4. Die Zahl ---------- */
.gross-zahl {
    text-align: center;
    padding: 2.5rem 1rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 20px;
}

.gross-zahl__wert {
    font-size: clamp(2.4rem, 9vw, 5rem);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gross-zahl__label {
    margin-top: 0.7rem;
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 600;
}

.zahl-teiler {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.8rem;
    margin-top: 0.8rem;
}

.zahl-teil {
    padding: 1.1rem 1rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(148, 163, 184, 0.11);
    border-radius: 14px;
    min-width: 0;
}

.zahl-teil strong {
    display: block;
    color: #cbd5e1;
    font-size: clamp(1rem, 3vw, 1.3rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.3rem;
}

.zahl-teil span {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ---------- 5. Das Misslungene ---------- */
.offen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.offen-karte {
    display: block;
    padding: 1.7rem 1.6rem;
    background: rgba(251, 191, 36, 0.04);
    border: 1px solid rgba(251, 191, 36, 0.18);
    border-radius: 18px;
    text-decoration: none;
    min-width: 0;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.offen-karte:hover {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.4);
    transform: translateY(-3px);
}

.offen-karte__zahl {
    color: #fbbf24;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.6rem;
}

.offen-karte h3 {
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.55rem;
}

.offen-karte p {
    color: #94a3b8;
    font-size: 0.89rem;
    line-height: 1.75;
}

/* ---------- 6. Die Festlegungen ---------- */
.fest-liste {
    display: grid;
    gap: 0.8rem;
}

.fest-punkt {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    padding: 1.5rem 1.6rem;
    background: rgba(34, 197, 94, 0.04);
    border: 1px solid rgba(34, 197, 94, 0.16);
    border-radius: 16px;
}

.fest-punkt i {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    font-size: 1rem;
}

.fest-punkt h3 {
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.4rem;
}

.fest-punkt p {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.75;
}

/* ---------- 7. Schluss ---------- */
.ende-wege {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.8rem;
}

.ende-weg {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.2rem 1.4rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    color: #cbd5e1;
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    min-width: 0;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.ende-weg:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(59, 130, 246, 0.4);
    color: white;
}

.ende-weg i {
    color: #93c5fd;
    flex-shrink: 0;
}

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
    .hero {
        padding: 2.5rem 1.1rem 3.5rem;
    }

    .abs {
        padding: 3rem 1.1rem;
    }

    .hero-weg {
        width: 100%;
        text-align: center;
    }

    .fest-punkt {
        padding: 1.2rem 1.2rem;
        gap: 0.9rem;
    }
}



/* ===== modules\guide.css ===== */
/* ===================================================================
   GUIDE - Stil-Ladeliste

   Der Stil liegt in guide-1.css bis guide-2.css,
   damit keine Datei ueber 300 Zeilen kommt (03_Zerlegen_300_Zeilen.md).
   Die Reihenfolge ist die Kaskade - nicht vertauschen.

   ACHTUNG: Ueber file:// blockiert der Browser @import. Wird diese
   Datei in einer Electron-App geladen, stattdessen die Teile einzeln
   verlinken (16_Deployment_und_Electron.md).
   =================================================================== */

/* ===== modules\guide-1.css ===== */
.page-main-content {
    min-height: 100vh;
    padding-top: 140px;
    padding-bottom: 5rem;
}

.guide-hero {
    text-align: center;
    margin-bottom: 4rem;
}

.hero-title {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: #94a3b8;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

.guide-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 5rem;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.search-wrapper {
    position: relative;
    flex: 1;
}

.search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
}

.guide-search {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem 1.5rem 1rem 3.5rem;
    color: white;
    font-size: 1rem;
    transition: var(--bew-standard);
    backdrop-filter: blur(10px);
}

/* INFO BOXES */
.info-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.req-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
    display: grid;
    gap: 0.5rem;
}

.req-list li {
    color: #94a3b8;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.req-list li::before {
    content: "•";
    color: #3b82f6;
    font-weight: bold;
}

/* PLACEHOLDER ICON */
.placeholder-icon {
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: #3b82f6;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.15), transparent);
    border-radius: 20px;
}

/* LEGAL MOCK CARD */
.legal-mock-card {
    width: 280px;
    height: 180px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

.legal-mock-card i {
    font-size: 3rem;
    color: #3b82f6;
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.5));
}

.legal-mock-card span {
    font-weight: 700;
    color: white;
    font-family: monospace;
}

.legal-mock-card small {
    color: #64748b;
    font-size: 0.7rem;
}

.legal-mock-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #3b82f6;
}

.step {
    display: flex;
    gap: 3rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 3rem;
    margin-bottom: 3rem;
    transition: var(--bew-standard);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(20px);
}

.step:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.step-content {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.step-number {
    font-size: 3rem;
    font-weight: 800;
    color: rgba(59, 130, 246, 0.2);
    font-family: 'Inter', sans-serif;
    line-height: 1;
    margin-bottom: 1rem;
}

.step h2 {
    font-size: 2rem;
    color: white;
    margin-bottom: 1.5rem;
}

.step p {
    color: #94a3b8;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.step-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.step-image img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.try-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.2s;
}

.try-link:hover {
    gap: 12px;
}

/* RESPONSIVE GUIDE */
@media (max-width: 900px) {
    .step {
        flex-direction: column;
        padding: 2rem;
        gap: 2rem;
    }

    .step-number {
        font-size: 2rem;
    }

    .step-image {
        order: -1;
    }
}

/* FAQ & GRID */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.faq-card {
    background: rgba(255, 255, 255, 0.02);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--bew-standard);
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    color: white;
}

.tip-ghost {
    background: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.15);
}

.tip-portable {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.15);
}

.tip-safe {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.15);
}

.tip-pdf {
    background: rgba(139, 92, 246, 0.05);
    border-color: rgba(139, 92, 246, 0.15);
}



/* ===== modules\guide-2.css ===== */
.pro-tips-section,
.trouble-section {
    margin-top: 6rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

code {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-family: 'Consolas', monospace;
    color: #60a5fa;
    font-size: 0.9em;
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
}



/* ===== modules\support.css ===== */
/* ===================================================================
   SUPPORT - Stil-Ladeliste

   Der Stil liegt in support-1.css bis support-2.css,
   damit keine Datei ueber 300 Zeilen kommt (03_Zerlegen_300_Zeilen.md).
   Die Reihenfolge ist die Kaskade - nicht vertauschen.

   ACHTUNG: Ueber file:// blockiert der Browser @import. Wird diese
   Datei in einer Electron-App geladen, stattdessen die Teile einzeln
   verlinken (16_Deployment_und_Electron.md).
   =================================================================== */

/* ===== modules\support-1.css ===== */
/* SUPPORT PAGE STYLES */

.support-hero {
    min-height: 60vh;
    padding: 120px 2rem 60px;
    text-align: center;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.05) 0%, transparent 70%);
}

.support-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(16, 185, 129, 0.1);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 10px 24px;
    border-radius: 100px;
    font-size: 0.95rem;
    margin-bottom: 2.5rem;
    font-weight: 700;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
}

.support-status-dot {
    width: 10px;
    height: 10px;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 15px currentColor;
    animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.support-title {
    font-size: clamp(2.5rem, 8vw, 4rem);
    margin-bottom: 1rem;
    color: white;
}

.support-version {
    font-family: 'Consolas', monospace;
    color: #64748b;
    font-size: 1rem;
    margin-bottom: 3rem;
    opacity: 0.8;
}

.support-search-wrapper {
    max-width: 700px;
    margin: 0 auto 4rem;
    position: relative;
}

.support-search {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 30px;
    border-radius: 20px;
    color: white;
    font-size: 1.1rem;
    transition: var(--bew-standard);
    backdrop-filter: blur(10px);
}

.support-search:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: #3b82f6;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.15);
    outline: none;
}

.quick-actions-grid {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 5rem;
}

.action-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    color: #94a3b8;
    text-decoration: none;
    font-weight: 600;
    transition: var(--bew-standard);
    backdrop-filter: blur(5px);
}

.action-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(59, 130, 246, 0.3);
    color: white;
    transform: translateY(-5px);
}

/* INSTALL STEPS */
.steps-section {
    max-width: 1100px;
    margin: 0 auto 8rem;
    padding: 0 2rem;
}

.step-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 3rem 2.5rem;
    border-radius: 28px;
    position: relative;
    overflow: hidden;
    transition: var(--bew-standard);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    backdrop-filter: blur(10px);
}

.step-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #3b82f6;
    opacity: 0.5;
}

.step-card:nth-child(2)::before {
    background: #10b981;
}

.step-card:nth-child(3)::before {
    background: #8b5cf6;
}

.step-card .step-count {
    font-size: 6rem;
    color: rgba(255, 255, 255, 0.02);
    position: absolute;
    top: -20px;
    right: -10px;
    font-weight: 900;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
}

.step-card:hover .step-count {
    color: rgba(59, 130, 246, 0.05);
    transform: scale(1.1);
}

.step-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: white;
}

/* REQS GRID */
.reqs-section {
    background: rgba(2, 6, 23, 0.4);
    padding: 6rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.req-card {
    text-align: center;
    padding: 3rem 2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    transition: var(--bew-standard);
}

.req-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(16, 185, 129, 0.2);
    transform: scale(1.02);
}

.req-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.1));
}

/* FEATURE GRID */
.support-features {
    max-width: 1200px;
    margin: 8rem auto;
    padding: 0 2rem;
}

.support-feat-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 2rem;
    border-radius: 20px;
    transition: var(--bew-standard);
}

.support-feat-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(59, 130, 246, 0.15);
}

.feat-icon {
    font-size: 2.2rem;
    margin-bottom: 1.2rem;
}

/* PRO TIPS */
.pro-tip-box {
    padding: 2rem;
    border-radius: 18px;
    margin-bottom: 1.5rem;
}

.tip-yellow {
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.tip-blue {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.15);
}

/* POPULAR SEARCHES */
.popular-searches {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: -1.5rem;
    margin-bottom: 3rem;
    opacity: 0.8;
}

.search-chip {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 40px;
    font-size: 0.8rem;
    color: #94a3b8;
    cursor: pointer;
    transition: var(--bew-standard);
}

.search-chip:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: white;
}



/* ===== modules\support-2.css ===== */
/* KEYBOARD SHORTCUTS */
.shortcuts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.shortcut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: var(--bew-standard);
}

.shortcut-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.kbd-group {
    display: flex;
    gap: 5px;
    align-items: center;
}

kbd {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    box-shadow: 0 3px 0 rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    display: inline-block;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 10px;
    white-space: nowrap;
}

.shortcut-desc {
    color: #94a3b8;
    font-size: 0.95rem;
}

/* MODULE STATUS */
.module-status-card {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2.5rem;
    margin-top: 4rem;
    text-align: center;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.status-dot-pulse {
    width: 12px;
    height: 12px;
    background: #10b981;
    border-radius: 50%;
    position: relative;
}

.status-dot-pulse::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #10b981;
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* BACKGROUND BLURS */
.support-bg-blobs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.blob {
    position: absolute;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    filter: blur(60px);
    animation: moveBlob 20s infinite alternate;
}

.blob-1 {
    top: -10%;
    left: -10%;
}

.blob-2 {
    bottom: 10%;
    right: -10%;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.08) 0%, transparent 70%);
}

@keyframes moveBlob {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(100px, 50px) rotate(30deg);
    }
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .support-hero {
        padding: 100px 1rem 40px;
    }

    .support-title {
        font-size: 2.5rem;
    }

    .grid-container {
        gap: 2rem;
    }
}

/* TROUBLESHOOTING */
.ts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.ts-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 2rem;
    transition: var(--bew-standard);
}

.ts-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(239, 68, 68, 0.3);
}

.ts-card h3 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ts-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ts-card li {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    padding-left: 20px;
    position: relative;
}

.ts-card li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #ef4444;
}

/* PRIVACY BOX */
.privacy-highlight-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(5, 150, 105, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.1);
    border-radius: 24px;
    padding: 2.5rem;
    margin-top: 4rem;
    display: flex;
    gap: 2rem;
    align-items: center;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.privacy-icon {
    font-size: 3rem;
    background: rgba(16, 185, 129, 0.1);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    flex-shrink: 0;
}

.privacy-content h3 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.privacy-content p {
    color: #94a3b8;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .privacy-highlight-box {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
    }
}



/* ===== modules\live-hub.css ===== */
/* ===================================================================
   LIVE-HUB - Stil-Ladeliste

   Der Stil liegt in live-hub-1.css bis live-hub-2.css,
   damit keine Datei ueber 300 Zeilen kommt (03_Zerlegen_300_Zeilen.md).
   Die Reihenfolge ist die Kaskade - nicht vertauschen.

   ACHTUNG: Ueber file:// blockiert der Browser @import. Wird diese
   Datei in einer Electron-App geladen, stattdessen die Teile einzeln
   verlinken (16_Deployment_und_Electron.md).
   =================================================================== */

/* ===== modules\live-hub-1.css ===== */
/* Experience Hub - Interactive Desktop Preview */
.experience-hub {
    padding: 8rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.hub-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: center;
}

.hub-content h2 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    color: white;
}

.hub-content p {
    font-size: 1.25rem;
    color: #94a3b8;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.btn-hub-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hub-btn {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.7));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.25rem 2rem;
    border-radius: 20px;
    color: white;
    cursor: pointer;
    transition: var(--bew-standard);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    text-align: left;
    width: 100%;
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 2px 10px rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}

.hub-btn::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 0deg, transparent, rgba(59, 130, 246, 0.5), transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 22px;
    animation: rotateBeamHub 3s linear infinite;
}

@keyframes rotateBeamHub {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.hub-btn:hover {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9));
    transform: translateX(12px) scale(1.02);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 20px rgba(59, 130, 246, 0.2);
}

.hub-btn:hover::after {
    opacity: 1;
}

.hub-btn.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1));
    border-color: #60a5fa;
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.3), inset 0 2px 10px rgba(96, 165, 250, 0.1);
    transform: translateX(12px) scale(1.02);
}

.hub-btn .icon {
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.hub-btn.active .icon {
    background: #3b82f6;
    color: white;
}

.hub-visual {
    position: relative;
    aspect-ratio: 16/10;
    perspective: 2000px;
}

.desktop-stage {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(8, 10, 15, 0.8), rgba(2, 4, 8, 0.95));
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), inset 0 2px 20px rgba(255, 255, 255, 0.02);
    background-image: radial-gradient(circle at top right, rgba(59, 130, 246, 0.15), transparent 60%);
}

.floating-widget {
    position: absolute;
    width: 300px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9));
    backdrop-filter: blur(25px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    padding: 1.8rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 2px 10px rgba(255, 255, 255, 0.05);
    transition: var(--bew-standard);
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    pointer-events: none;
}

.floating-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.05), transparent 70%);
    pointer-events: none;
}

.floating-widget.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

#widget-weather {
    top: 15%;
    right: 10%;
}

#widget-system {
    top: 45%;
    right: 10%;
}

#widget-news {
    top: 15%;
    left: 10%;
    width: 340px;
}

.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.widget-content-preview {
    color: white;
}

.temp-large {
    font-size: 3rem;
    font-weight: 800;
}

/* Mobile Optimierung für den Activity Hub & Widgets */
@media (max-width: 992px) {
    .hub-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hub-content {
        text-align: center;
    }

    .hub-content h2 {
        font-size: 2.2rem;
    }

    .hub-btn {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .hub-visual {
        aspect-ratio: 1/1;
        /* Quadratischer Desktop auf Mobile besser */
        margin-top: 2rem;
    }

    .floating-widget {
        width: 85% !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) scale(0.9) !important;
        opacity: 0;
        pointer-events: none;
    }

    .floating-widget.active {
        opacity: 1 !important;
        transform: translate(-50%, -50%) scale(1) !important;
        pointer-events: auto !important;
    }

    #widget-news {
        width: 85% !important;
    }

    .mock-taskbar {
        padding: 0 10px !important;
        gap: 10px !important;
    }

    .taskbar-time {
        display: none;
        /* Zeit auf sehr kleinen Handys ausblenden */
    }
}

/* Base Taskbar Styles */
.mock-taskbar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 5;
}

.taskbar-icon {
    width: 20px;
    height: 20px;
    background: #3b82f6;
    border-radius: 4px;
    opacity: 0.8;
}

.taskbar-search {
    width: 60px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}



/* ===== modules\live-hub-2.css ===== */
.taskbar-time {
    margin-left: auto;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 480px) {
    .hub-content h2 {
        font-size: 1.8rem;
    }

    .floating-widget {
        padding: 1rem !important;
    }
}



/* ===== modules\home-extras.css ===== */
/* ===================================================================
   HOME-EXTRAS - Stil-Ladeliste

   Der Stil liegt in home-extras-1.css bis home-extras-2.css,
   damit keine Datei ueber 300 Zeilen kommt (03_Zerlegen_300_Zeilen.md).
   Die Reihenfolge ist die Kaskade - nicht vertauschen.

   ACHTUNG: Ueber file:// blockiert der Browser @import. Wird diese
   Datei in einer Electron-App geladen, stattdessen die Teile einzeln
   verlinken (16_Deployment_und_Electron.md).
   =================================================================== */

/* ===== modules\home-extras-1.css ===== */
/* Comparison Slider */
.comparison-section {
    padding: 8rem 2rem;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.05), transparent 70%);
}

.comparison-container {
    max-width: 1000px;
    margin: 4rem auto 0;
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 50px rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: var(--bew-standard);
}

.comparison-container:hover {
    transform: translateY(-8px);
    box-shadow: 0 50px 120px rgba(0, 0, 0, 0.8), 0 0 80px rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
}

.comp-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
}

.comp-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Hier lagen zwei Fotos von einem fremden Bilderdienst (Unsplash). Die
   Klassen werden nirgends mehr verwendet, und jedes fremde Bild würde beim
   Aufruf die Adresse des Besuchers dorthin schicken – genau das soll auf
   dieser Seite nicht passieren. Deshalb entfernt.
   Falls der Vorher/Nachher-Vergleich zurückkommt: eigene Bilder unter
   images/ ablegen und von dort laden. */
.comp-before {
    filter: grayscale(0.5) brightness(0.8);
}

.comp-after {
    clip-path: inset(0 0 0 50%);
}

/* PRIVACY GUARANTEE (Premium Desktop) */
.privacy-guarantee-section {
    padding: 6rem 1rem;
    max-width: 1100px;
    margin: 0 auto;
}

.privacy-card-wide {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 32px;
    padding: 3.5rem 4rem;
    display: flex;
    align-items: center;
    gap: 3.5rem;
    backdrop-filter: blur(25px) saturate(150%);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), inset 0 2px 20px rgba(255, 255, 255, 0.03);
    transition: var(--bew-standard);
    position: relative;
    overflow: hidden;
}

.privacy-card-wide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at left center, rgba(59, 130, 246, 0.1), transparent 70%);
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.privacy-card-wide:hover {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 50px 120px rgba(0, 0, 0, 0.8), 0 0 40px rgba(59, 130, 246, 0.2);
}

.privacy-icon {
    font-size: 4rem;
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.6));
    animation: shieldPulse 3s infinite alternate ease-in-out;
}

@keyframes shieldPulse {
    from {
        transform: scale(0.95);
        filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.4));
    }

    to {
        transform: scale(1.05);
        filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.8));
    }
}

.privacy-content {
    text-align: left;
}

.privacy-content h3 {
    color: white;
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.privacy-content p {
    color: #cbd5e1;
    line-height: 1.8;
    font-size: 1.1rem;
    font-weight: 500;
}

@media (max-width: 768px) {
    .privacy-card-wide {
        flex-direction: column;
        padding: 2.5rem;
        text-align: center;
        gap: 1.5rem;
    }

    .privacy-content {
        text-align: center;
    }

    .privacy-content h3 {
        font-size: 1.5rem;
    }
}

.comp-slider-input {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background: transparent;
    outline: none;
    margin: 0;
    z-index: 10;
    cursor: ew-resize;
}

.comp-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: white;
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 0 20px rgba(59, 130, 246, 1);
}

.comp-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
    pointer-events: none;
}

.comp-handle i {
    color: #3b82f6;
    font-size: 1.2rem;
}

/* Feature Spotlight Row */
.spotlight-row {
    display: flex;
    gap: 2rem;
    margin-top: 4rem;
    overflow-x: auto;
    padding-bottom: 2rem;
}

.spotlight-card {
    min-width: 300px;
    flex: 1;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.8));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 2.5rem 2rem;
    border-radius: 28px;
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 2px 10px rgba(255, 255, 255, 0.02);
    transition: var(--bew-standard);
    position: relative;
    overflow: hidden;
}

.spotlight-card::after {
    content: '';
    position: absolute;
    inset: -3px;
    background: conic-gradient(from 0deg, transparent, rgba(59, 130, 246, 0.3), transparent, rgba(139, 92, 246, 0.3), transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 30px;
    animation: rotateBeamSpotlight 4s linear infinite;
}

@keyframes rotateBeamSpotlight {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spotlight-card:hover {
    transform: translateY(-12px);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(59, 130, 246, 0.15);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.9));
}

.spotlight-card:hover::after {
    opacity: 1;
}

.spotlight-icon {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: #60a5fa;
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.4));
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(255, 255, 255, 0.05));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 2px 5px rgba(255, 255, 255, 0.1);
}

.spotlight-card h4 {
    color: white;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.spotlight-card p {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 500;
}



/* ===== modules\home-extras-2.css ===== */
/* Pulse for Demo Link */
@keyframes demoPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.demo-highlight {
    animation: demoPulse 2s infinite;
}

@media (max-width: 600px) {
    .comparison-section {
        padding: 4rem 1rem !important;
    }

    .comparison-container {
        border-radius: 16px;
        margin-top: 2rem;
    }

    .comp-wrapper {
        aspect-ratio: 4/3;
        /* Kompakter auf dem Handy */
    }

    .comp-handle {
        width: 40px;
        height: 40px;
    }

    .spotlight-row {
        gap: 1rem;
    }

    .spotlight-card {
        min-width: 260px;
        padding: 1.5rem;
    }
}

/* FINAL CTA SECTION */
.final-cta {
    text-align: center;
    padding: 6rem 2rem 8rem 2rem;
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    z-index: 10;
}

.final-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 60%);
    filter: blur(50px);
    z-index: -1;
    pointer-events: none;
}

.final-cta h2 {
    font-size: 3.5rem;
    color: white;
    margin-bottom: 1.5rem;
    font-weight: 900;
    letter-spacing: -1.5px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.final-cta p {
    color: #94a3b8;
    font-size: 1.3rem;
    margin-bottom: 3.5rem;
    line-height: 1.6;
    font-weight: 500;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}



/* ===== modules\von-rechts.css ===== */
/* ===================================================================
   AERONA – Sprachen, die von rechts nach links gelesen werden

   Arabisch, Hebräisch, Persisch, Urdu und Jiddisch laufen andersherum.
   Der Ladevorgang setzt dafür dir="rtl" auf das Dokument; hier stehen
   die Anpassungen, die das Layout dabei braucht.

   Was NICHT gespiegelt wird: Zahlen, Code-Blöcke, Adressen und
   Fortschrittsbalken – die laufen auch im Arabischen von links nach
   rechts.
   =================================================================== */

[dir="rtl"] body {
    text-align: right;
}

/* Aufzählungen: Punkte gehören auf die rechte Seite */
[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-right: 1.5rem;
    padding-left: 0;
}

/* Text, der am Rand klebt, wechselt die Seite */
[dir="rtl"] .hero-text,
[dir="rtl"] .section-subtitle,
[dir="rtl"] .card p,
[dir="rtl"] .card h3 {
    text-align: right;
}

/* Zahlen, Code und Adressen bleiben in Leserichtung von links.
   "2.422.981" darf nicht als "981.422.2" erscheinen. */
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .gross-zahl__wert,
[dir="rtl"] .offen-karte__zahl,
[dir="rtl"] .zahlen-karte__wert,
[dir="rtl"] .stat-number,
[dir="rtl"] .version,
[dir="rtl"] a[href^="mailto"],
[dir="rtl"] a[href^="http"] {
    direction: ltr;
    unicode-bidi: embed;
}

/* Fortschrittsbalken füllen sich weiter von links */
[dir="rtl"] .progress-bar,
[dir="rtl"] .balken,
[dir="rtl"] .fortschritt {
    direction: ltr;
}

/* Pfeile in Knöpfen zeigen in die Leserichtung */
[dir="rtl"] .btn::after,
[dir="rtl"] .cta-link::after {
    transform: scaleX(-1);
    display: inline-block;
}

/* Das Menü läuft mit – bei einer arabischen Seite gehören die
   Menüpunkte nach rechts, so wie der Text. Nur die Sprachkürzel
   im Wähler bleiben mittig, sie sind keine Sätze. */
[dir="rtl"] .lang-switcher *,
[dir="rtl"] .main-nav a {
    text-align: center;
}

/* ===================================================================
   Handy-Ansicht

   `mobile-final.css` wird nach dieser Datei geladen und setzt für
   einzelne Bausteine `text-align: left !important`. Das ist für die
   meisten Sprachen richtig, für Arabisch und Hebräisch aber falsch.

   Die Regeln hier sind spezifischer (Attribut + Klasse schlägt Klasse
   allein), gewinnen also trotz der späteren Ladereihenfolge – ohne
   dass an `mobile-final.css` etwas geändert werden muss.
   =================================================================== */
[dir="rtl"] .mock-widget,
[dir="rtl"] .mock-widget.wide,
[dir="rtl"] .feature-card,
[dir="rtl"] .bento-card {
    text-align: right !important;
}

/* Reihen, die auf dem Handy untereinander stehen, brauchen keine
   Spiegelung – nur der Text darin richtet sich neu aus. */
[dir="rtl"] .spotlight-row {
    text-align: center !important;
}


/* ===== modules\mobile-final.css ===== */
/* FINAL MOBILE FIXES - OVERRIDE EVERYTHING */
@media (max-width: 900px) {

    /* --- 1. DASHBOARD WIDGETS (System Monitor, News, etc) --- */
    .widget-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        /* Untereinander */
        gap: 1rem !important;
        width: 100% !important;
    }

    .mock-widget {
        width: 100% !important;
        min-height: auto !important;
        padding: 1rem !important;
        height: auto !important;
        flex-direction: row !important;
        /* Nebeneinander für Platzersparnis */
        justify-content: flex-start !important;
        gap: 1.5rem !important;
        text-align: left !important;
    }

    /* Ausnahme für Wetter-Widget (bleibt Block) */
    .mock-widget.wide {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .mock-widget i,
    .mock-widget .widget-icon {
        font-size: 1.5rem !important;
        margin-bottom: 0 !important;
    }

    .mock-widget h4 {
        font-size: 1rem !important;
        margin: 0 !important;
    }

    .mock-widget div {
        font-size: 0.85rem !important;
    }

    /* --- 2. VORHER/NACHHER SLIDER --- */
    .comparison-container,
    .slider-wrapper,
    .comp-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 2.5rem 0 !important;
        border-radius: 20px !important;
        aspect-ratio: 3/4 !important;
        /* Hochformat für deutlich mehr Höhe auf Handys */
        height: auto !important;
    }

    .comparison-section {
        padding: 2rem 1rem !important;
    }

    .slider-button,
    .comp-handle {
        width: 48px !important;
        height: 48px !important;
        background: white !important;
        box-shadow: 0 0 15px black !important;
    }

    .slider-input,
    .comp-slider-input {
        pointer-events: auto !important;
        /* Sicherstellen dass es bedienbar ist */
        touch-action: pan-y !important;
    }

    /* --- 3. HERO DASHBOARD MOCKUP (ENLARGED SCALE) --- */
    .hero-image-container {
        padding: 0 !important;
        margin-top: 1rem !important;
        perspective: none !important;
        animation: none !important;
    }

    .dashboard-mockup {
        width: 100% !important;
        height: auto !important;
        min-height: max-content !important;
        transform: none !important;
        flex-direction: row !important;
        border-radius: 16px !important;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6) !important;
    }

    .mockup-sidebar {
        width: 48px !important;
        padding-top: 20px !important;
        gap: 15px !important;
        min-height: 100% !important;
    }

    .sidebar-item {
        width: 26px !important;
        height: 26px !important;
        border-radius: 6px !important;
    }

    .mockup-main {
        padding: 20px !important;
        flex: 1 !important;
        height: auto !important;
        min-height: max-content !important;
    }

    .mockup-header {
        margin-bottom: 20px !important;
        height: auto !important;
    }

    .mockup-title {
        font-size: 1.1rem !important;
        /* Etwas größer */
        white-space: normal !important;
        /* Kein Abschneiden mehr */
        line-height: 1.2 !important;
        max-width: none !important;
    }

    .mockup-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        height: auto !important;
    }

    .mockup-card {
        padding: 15px !important;
        height: auto !important;
        min-height: 80px !important;
    }

    /* WEATHER SCALE - BIGGER */
    .mock-weather-title {
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
    }

    .mock-large-temp {
        font-size: 2.2rem !important;
        margin-bottom: 8px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    .mock-weather-details {
        gap: 4px !important;
    }

    .mock-detail-item {
        font-size: 0.7rem !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    /* CLOCK SCALE - BIGGER */
    .mock-time {
        font-size: 1.8rem !important;
        margin-bottom: 4px !important;
    }

    .mock-date {
        font-size: 0.7rem !important;
    }

    /* --- 4. FEATURE SPOTLIGHTS (Funktionen Seite) --- */
    .spotlight-section {
        padding: 4rem 1.5rem !important;
    }

    .spotlight-row {
        flex-direction: column !important;
        text-align: center !important;
        gap: 3rem !important;
        margin-bottom: 8rem !important;
    }

    .spotlight-row.reverse {
        flex-direction: column !important;
    }

    .spotlight-text {
        align-items: center !important;
        order: 1 !important;
        /* Text oben */
    }

    .spotlight-visual {
        order: 2 !important;
        /* Visual unten */
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .visual-card {
        width: 140px !important;
        /* Pillen-Breite */
        height: 380px !important;
        /* Pillen-Höhe */
        border-radius: 70px !important;
        /* Volle Abrundung */
        margin: 0 auto !important;
        padding: 2rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        background: rgba(15, 23, 42, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
    }

    .visual-card i {
        font-size: 4rem !important;
    }

    .visual-card>div {
        transform: scale(0.8);
        /* Equalizer etwas verkleinern */
    }

    .spotlight-text h2 {
        font-size: 2.2rem !important;
        letter-spacing: -1px !important;
        margin-bottom: 1.5rem !important;
    }

    .spotlight-text p {
        font-size: 1.05rem !important;
        max-width: 100% !important;
        opacity: 0.8 !important;
    }

    .feature-badge {
        margin: 0 auto 1.5rem !important;
        padding: 8px 16px !important;
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
        border-radius: 50px !important;
    }
}

/* MUST BE LAST */