/* ======================================================
   GALERIE SCHOLZ - MASTER CSS 2026
   HERO, GRIDS, MOBILE, FOOTER
   Stand: 23.04.2026 | 16:15 Uhr
   ====================================================== */

/* --- 00. GLOBAL BASIS & RESET --- */
html, body, #page, .site, .site-content, #content {
    background: #ffffff !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
}
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Hind', sans-serif; color: #4a4a4a; min-width: 320px; }
a { transition: all 0.3s ease-in-out; text-decoration: none; }

.uk-container, .workstage, .gs-hero-container, .kacheln-8er, .kacheln-28er, footer > * {
    width: 100% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ======================================================
   GS-01-01 HERO SECTION & VALIDATOR FIX
   ====================================================== */
.gs-hero-section {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    background-color: #ffffff;
    overflow: hidden;
}

/* FIX: Falls ein Plugin contain-intrinsic-size falsch injiziert, 
   überschreiben wir es hier mit der validen HTML5 Syntax */
.gs-hero-img { 
    width: 100%; 
    height: auto; 
    display: block;
    contain-intrinsic-width: 3000px;
    contain-intrinsic-height: 1500px;
}

.gs-hero-card {
    position: absolute; top: 40%; left: 40%;
    transform: translate(-50%, -50%); z-index: 10;
    background: rgba(30, 25, 15, 0.55);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    padding: 35px 45px; border-radius: 12px;
    border: 1px solid rgba(176, 141, 47, 0.3);
    min-width: 520px; text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

.gs-hero-title { 
    color: #b08d2f !important; 
    font-family: serif; 
    font-size: 2.4rem; 
    letter-spacing: 4px; 
    line-height: 1.1; 
    margin-bottom: 12px; 
}

.gs-hero-text { 
    color: #ffffff; 
    font-size: 1rem; 
    font-weight: 300; 
    margin-bottom: 28px; 
    display: block; 
    line-height: 1.5; 
}

/* Buttons & Grids bleiben in ihrer Logik erhalten */
.gs-hero-buttons { display: flex; gap: 15px; justify-content: center; }
.gs-btn { padding: 13px 20px; font-weight: 600; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; }
.gs-btn-primary { background-color: #ffffff; color: #000000 !important; }
.gs-btn-secondary { background-color: transparent; color: #b08d2f !important; border: 2px solid #b08d2f; }

/* ... Rest der Animationen und Grid-Logik folgt im nächsten Block ... */