/* src/css/content.css */

.content-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: var(--layer-z-content); overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth;
    /* FIX: Flexbox und Transform wurden restlos entfernt! */
}

/* 🔴 UPDATE: Der Spacer ist jetzt die echte "Bühne" für die Post-its! */
.scroll-spacer {
    position: relative; /* 🔴 WICHTIG: Daran klammern sich jetzt die Post-its fest! */
    width: 100%; 
    height: 70vh; /* Etwas mehr Himmel (70vh), drückt den Content sanft nach unten */
    pointer-events: none; /* Klicks gehen durch auf das Bild */
    z-index: 5; /* Bleibt sicher unter den weißen Content-Blobs */
}

/* =========================================
   SCHWEBENDE BLOBS (Basis-Klasse)
   ========================================= */
.content-blob {
    position: relative; z-index: 10; /* Die Blobs liegen über dem Spacer */
    width: 90%; max-width: 1400px;
    
    /* FIX: Zentriert die Blobs automatisch im Block-Layout */
    margin: 0 auto 40px auto; 
    
    background: var(--color-bg-card); 
    border-radius: 40px; box-shadow: var(--shadow-hover);
    border: 1px solid var(--border-card);
    box-sizing: border-box;
}

/* =========================================
   1. Header Blob
   ========================================= */
.header-blob {
    max-width: 1000px; padding: 70px 5%; text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.header-blob:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(0,0,0,0.15); }
.header-blob h2 { font-size: 3rem; color: var(--color-text-main); margin: 0 0 25px 0; font-weight: 800; letter-spacing: -1px; }
.header-blob h2 span { color: var(--color-brand-primary); }
.header-blob p { font-size: 1.15rem; color: var(--color-text-muted); line-height: 1.8; margin: 0; }

/* =========================================
   2. Grid Container (für Bento)
   ========================================= */
.blob-grid-container {
    position: relative; z-index: 10;
    width: 90%; max-width: 1400px;
    /* FIX: Ebenfalls zentriert! */
    margin: 0 auto 40px auto; 
}