/* ═══════════════════════════════════════════════════════════════
   performance.css — Chrome/Windows Performance-Optimierungen
   v3.0.0 — Hintergrundbild, Blobs, Blur-Reduktion
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. EINGABE-LATENZ: Tippen ohne Verzögerung ──────────────────
   touch-action:manipulation deaktiviert den 300ms Tap-Delay auf
   Windows Touch-Displays und mobilen Browsern.                   */
* {
    -webkit-tap-highlight-color: transparent;
}
input, textarea, button, select, a {
    touch-action: manipulation;
}

/* ── 2. TEXT-RENDERING: Schrift ohne Delay ───────────────────────
   optimizeLegibility ist schön, aber teuer: kerning + ligatures
   werden synchron berechnet. optimizeSpeed = sofort sichtbar.   */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── 3. HINTERGRUND: kein Parallax-Repaint ───────────────────────
   background-attachment:fixed zwingt Chrome auf Windows zu einem
   vollständigen Layer-Repaint bei JEDEM Scroll-Frame.
   scroll = GPU-composited, kein Repaint beim Scrollen.           */
body {
    background-attachment: scroll !important;
}

/* ── 4. HINTERGRUNDBILD: eigener GPU-Layer ───────────────────────
   Ein Pseudo-Element übernimmt das Hintergrundbild und wird auf
   einen eigenen Compositing-Layer promoted. Damit wird das Bild
   einmal gerendert und nicht bei jedem Frame neu berechnet.
   Das behebt das verzögerte Laden und das Ruckeln in Chrome.     */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--bg-image-url);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    will-change: transform;          /* Eigener Compositing-Layer  */
    transform: translateZ(0);        /* GPU-Promotion erzwingen    */
    -webkit-transform: translateZ(0);
    /* Fallback-Farbe sichtbar während das Bild lädt              */
    background-color: var(--bg-fallback-color, #6b4c5e);
}

/* In White/Dark Mode kein Hintergrundbild */
[data-theme="white"] body::before,
[data-theme="dark"]  body::before {
    display: none;
}

/* ── 5. GLASSMORPHISM: Blur reduzieren ───────────────────────────
   backdrop-filter:blur() auf vielen gleichzeitigen Elementen ist
   die #1 Ursache für Chrome-Ruckeln auf Windows mit iGPU.
   Nur Header, Gantt-Container und Modals bekommen Blur.
   Alle anderen glass-cards: kein Blur nötig, da sie auf dem
   Hintergrundbild liegen und eine eigene Opazität haben.         */
.glass-card {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Header und Gantt: etwas mehr Blur für die wichtigsten Elemente */
header.glass-card,
.gantt-container.glass-card {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* White/Dark Mode: kein Blur — dort gibt es opake Hintergründe  */
[data-theme="white"] .glass-card,
[data-theme="dark"]  .glass-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── 6. DEMO-TILT: GPU-Compositing für interaktiven Tilt ─────────
   Die Gantt-Demo bekommt einen eigenen GPU-Layer, damit der
   Maus-Tilt ohne Main-Thread-Layout-Arbeit läuft.
   Blobs bleiben auf will-change, Ringe/Dots nicht mehr nötig.   */
.landing-gantt-demo {
    will-change: transform, box-shadow;
}
.blob,
.blob-1, .blob-2, .blob-3, .blob-4, .blob-glow {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ── 7. TRANSITIONS: Nur compositable Properties animieren ───────
   Animationen auf width/height/top/left/margin/padding lösen
   Layout-Reflows aus. Nur transform + opacity sind GPU-sicher.   */
.landing-feature-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.landing-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

/* ── 8. GANTT SCROLL: Hardware-beschleunigt ──────────────────────
   Momentum-Scrolling + GPU-compositing auf allen Plattformen.    */
.gantt-body {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
}

/* ── 9. MODALS: Kein blur auf Overlays ──────────────────────────
   Overlay-blur muss den gesamten Seiteninhalt neu rendern.
   Opakes overlay ist deutlich schneller.                          */
.editor-modal-overlay,
.export-modal-overlay,
.ai-modal-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.55) !important;
}

/* ── 10. COMPLETED-ROWS: Repaint begrenzen ───────────────────────
   filter:grayscale ohne contain: zieht alle Geschwister in den
   Repaint. contain:paint begrenzt das auf dieses Element.        */
.gantt-row.is-completed {
    contain: layout style paint;
}

/* ── 11. FONT: Fallback-Stack für sofortige Darstellung ──────────
   Verhindert FOIT (Flash of Invisible Text) falls Google Fonts
   langsam lädt. Sieht mit System-Font sehr ähnlich aus.         */
body, input, button, select, textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', system-ui, sans-serif;
}

/* ── 12. BILDER: Kein Layout-Shift beim Laden ────────────────────*/
img {
    content-visibility: auto;
}