/*
Theme Name: (Mein) CEGEWO Custom Theme
Author: Helena Sophie Kothe
Version: 1.4.0
Description: Ganzheitlich zentriertes Theme mit edlen Trennlinien, Verläufen, Detailpage-Erweiterung, responsivem Grid und ultra-smoothen GPU-Animationen.
*/

/* ==========================================================================
   --- 1. VARIABLES, BASICS & RESET ---
   ========================================================================== */
:root {
    --sidebar-width: 80px;

    --primary-blue: #0E1655;
    --brand-dark-blue: #00061F; /* Dunkles Markenblau */
    --accent-green: #B2C153;
    --accent-green-muted: #596400;
    --white: #ffffff;
    --text-dark: #1A1C1C;
    --text-muted: #45464E;
    --text-decent: #94A3B8;
    --text-blue-muted: #7C86AB;
    --text-blue-light: #A3AED0;
    --bg-light: #F9F9F9;
    --bg-canvas: #F8FAFC;
    --bg-muted: #F1F5F9;
    --border-color: #C6C6CF;
    --border-white-trans: rgba(255, 255, 255, 0.2);
    --border-blue-trans: rgba(14, 22, 85, 0.1);
    --border-blue-semi: rgba(14, 22, 85, 0.6);
    
    /* Global konsistente Schatten-Token */
    --shadow-sm: 0px 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-md: 0px 8px 18px -4px rgba(0, 0, 0, 0.06), 0px 16px 24px -4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0px 16px 32px -8px rgba(0, 0, 0, 0.12), 0px 24px 48px -6px rgba(0, 0, 0, 0.12);
    
    /* Ultra-smoothe Beziers & Timings */
    --radius-sm: 4px;
    --radius-md: 8px;
    --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-transform-bg: height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Work Sans', sans-serif;
    background-color: var(--white);
    color: var(--text-dark);
    overflow-x: hidden;
}

/* Hardware-Beschleunigung für flüssiges Render-Verhalten bei Bildern & Interaktionen */
img, 
.expertise-card, 
.team-card, 
.immo-card, 
.property-card,
.btn-anfragen,
.property-btn,
.immo-btn,
.detail-contact-btn {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Base Link/Interactive Accessibility Focus States */
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 2px;
}

/* ==========================================================================
   --- 2. MASTER LAYOUT & WRAPPER ---
   ========================================================================== */

.cegewo-master-wrapper {
    width: 100%;
    position: relative;
    background-color: var(--bg-light);
}

.cegewo-main-content {
    width: 100%;
    padding: 144px 0px 96px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cegewo-main-content p:empty {
    display: none !important;
}

.cegewo-main-content .wp-block-html,
.cegewo-main-content .entry-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.content-container,
.expertise-hero,
.expertise-grid,
.team-section,
.process-section,
.jobs-container,
.project-grid-inner,
.detail-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

/* Full-Width Hilfsklassen */
.full-width-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: var(--primary-blue);
    padding: 80px 24px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-width-section.grey-bg {
    background-color: var(--bg-light);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.full-width-section.blue-bg {
    background-color: var(--primary-blue);
}
/* ==========================================================================
   --- 3. HEADER, NAVIGATION & SIDEBAR ---
   ========================================================================== */
.cegewo-fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 96px;
    background: var(--white);
    border-bottom: 2px solid var(--primary-blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    z-index: 9999;
}

.logo-box a { display: block; }
.logo-box img { max-width: 146px; height: auto; display: block; }
.logo-box img.custom-logo-img { max-width: 146px; height: auto; max-height: 60px; display: block; object-fit: contain; }

.site-title-fallback { 
    font-family: 'Epilogue', sans-serif; 
    font-weight: 800; 
    color: var(--primary-blue); 
    text-decoration: none; 
    font-size: 20px; 
    text-transform: uppercase; 
}

.cegewo-nav { display: flex; align-items: center; gap: 24px; }
.cegewo-nav ul { display: none; align-items: center; gap: 32px; list-style: none; }
.cegewo-nav ul li a {
    text-decoration: none;
    color: var(--text-decent);
    font-family: 'Epilogue', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1.4px;
    padding-bottom: 4px;
    transition: color var(--transition-base), border-color var(--transition-base);
}

.cegewo-nav ul li a:hover, 
.cegewo-nav ul li.current-menu-item a,
.cegewo-nav ul li.current_page_item a { 
    color: var(--primary-blue);
    border-bottom: 2px solid var(--primary-blue);
}

.btn-anfragen {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid var(--accent-green);
    color: var(--primary-blue);
    text-transform: uppercase;
    font-weight: 400;
    font-size: 15px;
    text-decoration: none;
    transition: var(--transition-base);
    will-change: background-color, color;
}
.btn-anfragen:hover { background-color: var(--accent-green); color: var(--white); }

.nav-toggle { display: none; }
.nav-toggle-label { display: flex; align-items: center; cursor: pointer; height: 100%; padding: 10px; }
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    background: var(--primary-blue);
    height: 2px;
    width: 24px;
    position: relative;
    transition: var(--transition-smooth);
}
.nav-toggle-label span::before { content: ''; top: -8px; left: 0; position: absolute; }
.nav-toggle-label span::after { content: ''; top: 8px; left: 0; position: absolute; }

#nav-toggle:checked ~ .cegewo-nav ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 96px;
    left: 0;
    width: 100%;
    background: var(--white);
    padding: 24px;
    border-bottom: 2px solid var(--primary-blue);
    gap: 16px;
    z-index: 999;
}
#nav-toggle:checked ~ .nav-toggle-label span { background: transparent; }
#nav-toggle:checked ~ .nav-toggle-label span::before { transform: rotate(45deg); top: 0; }
#nav-toggle:checked ~ .nav-toggle-label span::after { transform: rotate(-45deg); top: 0; }

/* Fixed Sidebar */
.cegewo-fixed-sidebar {
    display: none;
    position: fixed;
    left: 0;
    top: 96px;
    width: 80px;
    height: calc(100vh - 96px);
    background-color: var(--accent-green);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 64px 0;
    gap: 64px;
    z-index: 9998;
}
.sidebar-item { opacity: 0.5; display: flex; flex-direction: column; align-items: center; text-decoration: none; transition: opacity var(--transition-base); }
.sidebar-item:hover { opacity: 1; }
.sidebar-text {
    writing-mode: vertical-rl; 
    transform: rotate(180deg); 
    color: var(--primary-blue);
    font-family: 'Epilogue', sans-serif; 
    font-weight: 700; 
    text-transform: uppercase;
    font-size: 13px; 
    letter-spacing: 2.6px; 
    white-space: nowrap; 
    padding: 8px 0;
}

/* ==========================================================================
   --- 4. HERO SECTION ---
   ========================================================================== */
section.cegewo-hero {
    width: 100%; 
    margin-top: -144px;
    background: var(--bg-light);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 180px 24px 128px 24px;
}

section.cegewo-hero .hero-container {
    width: 100%;
    max-width: 1120px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

section.cegewo-hero .hero-title-block {
    display: flex;
    flex-direction: column;
}

section.cegewo-hero .hero-title-block h1.hero-title { 
    margin: 0;
    font-family: 'Epilogue', sans-serif; 
    font-weight: 800; 
    font-size: 44px;
    line-height: 1.0;
    text-transform: uppercase; 
}

section.cegewo-hero .hero-title-block h1.hero-title span.title-line-primary {
    display: block;
    color: var(--primary-blue);
}

section.cegewo-hero .hero-title-block h1.hero-title span.title-line-accent {
    display: block;
    font-family: 'Gugi', cursive; 
    font-weight: 400; 
    color: var(--accent-green);
    text-transform: uppercase;
    margin-top: 2px;
}

section.cegewo-hero .block-desc {
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* ==========================================================================
   --- 5. TYPOGRAPHY & SEPARATORS ---
   ========================================================================== */
.cegewo-divider-line {
    width: 100%;
    max-width: 1120px;
    height: 1px;
    background: linear-gradient(90deg, var(--border-blue-trans) 0%, var(--border-blue-semi) 50%, var(--border-blue-trans) 100%);
    margin: 64px auto;
}
.cegewo-gradient-divider {
    width: 100%;
    max-width: 1120px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-green) 20%, var(--primary-blue) 100%);
    margin: 32px auto;
    display: block;
}

.cegewo-text-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 32px auto;
    width: 100%;          
    text-align: left;
    box-sizing: border-box;
}
.cegewo-text-block .block-title { font-family: 'Epilogue', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.2; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.cegewo-text-block .block-title span { font-family: 'Gugi', cursive; font-weight: 400; color: var(--accent-green); }
.cegewo-text-block .block-desc { font-family: 'Work Sans', sans-serif; font-size: 16px; line-height: 1.6; color: var(--text-muted); margin: 0; }

/* ==========================================================================
   --- 6. EXPERTISE COMPONENT ---
   ========================================================================== */
.expertise-hero { 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
    margin-bottom: 48px; 
    text-align: center; 
    align-items: center; 
}
.expertise-title h1 { 
    font-family: 'Epilogue', sans-serif; 
    font-weight: 800; 
    font-size: 40px; 
    line-height: 0.9; 
    text-transform: uppercase; 
    color: var(--primary-blue); 
    margin: 0; 
}
.expertise-title h1 span { 
    font-family: 'Gugi', cursive; 
    font-weight: 400; 
    color: var(--accent-green); 
}
.expertise-tagline { 
    color: var(--text-decent); 
    font-size: 14px; 
    font-weight: 100; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
}

.expertise-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 24px; 
    margin-bottom: 64px; 
}

.expertise-card { 
    background: var(--white); 
    padding: 32px; 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
    min-height: 280px; 
    text-align: left; 
    position: relative; 
    overflow: hidden; 
    z-index: 1; 
    border: 1px solid transparent;
    transition: var(--transition-smooth); 
    will-change: transform, border-color;
}
.expertise-card::before { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 0; 
    background-color: var(--accent-green); 
    z-index: -1; 
    transition: var(--transition-transform-bg); 
    will-change: height;
}
.card-accent-bar { 
    width: 100%; 
    max-width: 238px; 
    height: 16px; 
    background-color: var(--accent-green); 
}

.card-number { 
    font-size: 14px;
    color: var(--text-muted); 
    transition: color var(--transition-base);
}
.card-content h3 { 
    font-family: 'Epilogue', sans-serif; 
    font-weight: 700; 
    font-size: 26px; 
    text-transform: uppercase; 
    color: var(--text-dark); 
    margin-bottom: 12px; 
    transition: color var(--transition-base);
}
.card-content p { 
    color: var(--text-muted); 
    font-size: 16px; 
    line-height: 1.6; 
    margin: 0;
    transition: color var(--transition-base);
}

@media (hover: hover) {
    .expertise-card:hover { 
        transform: translateY(-6px); 
    }
    .expertise-card:hover::before { 
        height: 100%; 
    }
    .expertise-card:hover .card-content h3,
    .expertise-card:hover .card-content p,
    .expertise-card:hover .card-number { 
        color: var(--white); 
    }
}

/* ==========================================================================
   --- 7. TEAM CARD SYSTEM ---
   ========================================================================== */
.team-card { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    max-width: 458px; 
    position: relative; 
    margin: 20px auto; 
    will-change: transform;
}
.team-card .team-image-wrapper { 
    width: 90%; 
    max-width: 90%; 
    height: 300px; 
    background: var(--brand-dark-blue); 
    overflow: hidden; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    z-index: 1; 
    box-shadow: var(--shadow-sm); 
    transition: var(--transition-smooth);
    will-change: width, max-width, box-shadow;
}
.team-card .team-image-wrapper img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.team-card .team-details { 
    width: 100%; 
    padding: 41px; 
    position: relative; 
    background: var(--white); 
    box-shadow: var(--shadow-sm); 
    outline: 1px solid var(--border-color); 
    outline-offset: -1px; 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    margin-top: -40px; 
    z-index: 2; 
    transition: var(--transition-smooth);
    will-change: transform, box-shadow;
}
.team-card .team-role-badge { 
    position: absolute; 
    left: 0px; 
    top: -50px; 
    background: var(--primary-blue); 
    padding: 11px 21px; 
    color: var(--white); 
    font-family: 'Work Sans', sans-serif; 
    font-size: 16px; 
    font-weight: 400; 
    line-height: 15px; 
    z-index: 10; 
}
.team-card .team-meta-header { display: flex; flex-direction: column; gap: 3px; }
.team-card .team-company { color: var(--text-muted); font-family: 'Work Sans', sans-serif; font-size: 8px; line-height: 15px; text-transform: uppercase; }
.team-card .team-name { color: var(--text-dark); font-family: 'Work Sans', sans-serif; font-size: 24px; font-weight: 600; line-height: 41px; margin: 0; }
.team-card .team-info-rows { display: flex; flex-direction: column; gap: 8px; }
.team-card .team-row { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 8px; border-bottom: 1px solid var(--border-color); gap: 16px; }
.team-card .row-label { font-family: 'Work Sans', sans-serif; font-size: 10px; line-height: 15px; color: var(--text-muted); flex-shrink: 0; }
.team-card .row-value { font-family: 'Work Sans', sans-serif; font-size: 16px; line-height: 24px; color: var(--text-dark); text-align: right; word-break: break-word; }
.team-card .status-row .row-value { color: var(--accent-green-muted); }
.team-card .btn-contact { 
    display: inline-flex; 
    justify-content: center; 
    align-items: center; 
    gap: 15px; 
    width: 100%; 
    height: 41px; 
    padding: 10px; 
    outline: 1px solid var(--accent-green); 
    outline-offset: -1px; 
    background: transparent; 
    color: var(--text-muted); 
    font-family: 'Work Sans', sans-serif; 
    font-size: 12px; 
    line-height: 24px; 
    text-decoration: none; 
    transition: var(--transition-base);
    will-change: background, color;
}
.team-card .btn-arrow { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }

.team-card:hover .team-image-wrapper img { transform: scale(1.04); }
.team-card:hover .team-image-wrapper { width: 95%; max-width: 95%; box-shadow: var(--shadow-md); }
.team-card--job .team-role-badge { background: var(--accent-green); color: var(--primary-blue); font-weight: 700; }
.team-card--job .team-details { border-top: 3px solid var(--accent-green); }
.team-card:hover .team-details { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.team-card .btn-contact:hover { background: var(--accent-green); color: var(--primary-blue); }
.team-card .btn-contact:hover .btn-arrow { transform: translateX(5px); }

/* ==========================================================================
   --- 8. PROCESS SECTION ---
   ========================================================================== */
.process-section { display: flex; flex-direction: column; gap: 0; margin-bottom: 64px; }
.process-row { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 48px 0; border-bottom: 1px solid var(--border-color); align-items: start; text-align: left; }
.process-row:last-child { border-bottom: none; }
.process-number { font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 20px; color: var(--accent-green); line-height: 1.4; }
.process-meta { display: flex; flex-direction: column; gap: 8px; }
.process-indent { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); }
.process-title { font-family: 'Epilogue', sans-serif; font-weight: 700; font-size: clamp(24px, 4.5vw, 32px); text-transform: uppercase; color: var(--primary-blue); line-height: 1.1; }
.process-desc { font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--text-muted); }

/* ==========================================================================
   --- 9. JOBS SECTION ---
   ========================================================================== */
.jobs-container { display: flex; flex-direction: column; gap: 64px; margin-top: 48px; margin-bottom: 64px; }
.job-block { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; justify-items: center; }
.job-text { display: flex; flex-direction: column; gap: 24px; text-align: center; }
.job-text h2 { font-family: 'Epilogue', sans-serif; font-weight: 800; font-size: 44px; line-height: 1.1; text-transform: uppercase; color: var(--primary-blue); }
.job-text h2 span { font-family: 'Gugi', cursive; color: var(--accent-green); }
.job-text p { color: var(--text-muted); font-size: 16px; line-height: 1.6; }

/* ==========================================================================
   --- 10. STATISTICS GRID BLOCKS ---
   ========================================================================== */
.project-grid-inner { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 48px; width: 100%; }
.grid-box { width: 100%; background-color: var(--primary-blue); border: 1px solid var(--border-white-trans); display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; position: relative; min-height: 256px; }
.box-stats { padding: 48px 24px; border: 1px solid var(--white); }
.stats-number { font-family: 'Epilogue', sans-serif; font-weight: 800;  font-size: clamp(32px, 6vw, 48px); color: var(--white); margin-bottom: 8px; }
.stats-label { font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 1.5px; color: var(--white); text-transform: uppercase; text-align: center; }
.box-highlight-img { min-height: 450px; justify-content: flex-end; border: none; }
.box-highlight-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.box-highlight-img:hover img { transform: scale(1.04); }
.image-caption-bar { position: relative; width: 100%; background: var(--white); padding: 24px; border-top: 2px solid var(--primary-blue); z-index: 2; text-align: left; }
.image-caption-bar h3 { font-family: 'Epilogue', sans-serif; font-weight: 700; font-size: 20px; text-transform: uppercase; color: var(--primary-blue); }
.box-preview-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.box-preview-link:hover img { transform: scale(1.04); }
.box-statement { padding: 48px 24px; border: 1px solid var(--white); }
.statement-text { font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 16px; color: var(--white); text-transform: uppercase; text-align: center; max-width: 240px; }

/* ==========================================================================
   --- 11. REGION COMPONENT ---
   ========================================================================== */

/* Layout & Container für beide Sektionen */
section.cegewo-region-section,
.region-header-section {
    width: 100%;
    background-color: var(--primary-blue);
    padding: 80px 24px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.region-header-section {
    color: var(--white);
}

section.cegewo-region-section .region-container,
.region-header-section .region-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    box-sizing: border-box;
}

.region-header-section .region-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

/* Region Section (Standard-Layout) */
.region-image-wrapper {
    position: relative;
    width: 100%;
    max-width: 550px;
    aspect-ratio: 550 / 539;
    overflow: hidden;
}

.region-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.region-image-wrapper:hover img {
    transform: scale(1.04);
}

.region-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 78.39% 78.39% at 50% 50%, rgba(102, 102, 102, 0) 0%, rgba(14, 22, 85, 0.85) 91%);
    pointer-events: none;
    z-index: 2;
}

.region-text-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: left;
}

.region-subtitle {
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--text-blue-muted);
    text-transform: uppercase;
}

.region-title {
    font-family: 'Epilogue', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.1;
    color: var(--white);
    text-transform: uppercase;
    margin: 0;
}

.region-description {
    width: 100%;
    max-width: 480px;
}

.region-description p {
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-blue-light);
    margin: 0;
}

/* Region Header Component Specifics */
.region-header-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.region-header-image {
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.region-header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.region-header-image:hover img {
    transform: scale(1.04);
}

.region-badge {
    font-family: 'Epilogue', sans-serif;
    font-size: 12px;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-decent);
}

.region-header-section .region-title {
    font-family: 'Epilogue', sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--white);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.region-desc {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}

.region-desc p {
    font-family: 'Epilogue', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-decent);
    margin: 0;
}

/* ==========================================================================
   --- 12. PROJECTS SECTION (Wechselseitiges Zickzack-Design) ---
   ========================================================================== */
section.cegewo-projects-section {
    width: 100%;
    background-color: var(--bg-light);
    padding: 80px 24px 120px 24px;
    box-sizing: border-box;
}

.projects-container {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.project-item {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    width: 100%;
    border: none;
    box-shadow: none;
}

.project-image {
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1 / 1;
    background-color: #1E293B;
    
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.project-image:hover img {
    transform: scale(1.04);
}

.project-info {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
}

.project-date {
    font-family: 'Epilogue', sans-serif;
    font-size: 14px;
    color: var(--text-decent);
    margin-bottom: 12px;
}

.project-title {
    font-family: 'Epilogue', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--primary-blue);
    margin: 0 0 20px 0;
}

.project-desc {
    font-family: 'Epilogue', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* ==========================================================================
   --- 13. CEGEWO IMMOBILIEN BLOCK GRID (ANIMIERT) ---
   ========================================================================== */
section.cegewo-properties-section {
    width: 100%;
    padding: 60px 24px 120px 24px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.properties-grid {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 140px; 
    column-gap: 100px; 
    justify-content: center; 
}

@media (min-width: 1024px) {
    .properties-grid { grid-template-columns: repeat(1, 1fr); }
}

.property-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0 auto;
    max-width: 480px;
    animation: mobileFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
    will-change: transform, opacity;
}

@media (min-width: 1024px) {
    .property-card { animation: none; }
}

.property-card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 449 / 445;
    overflow: hidden;
}
.property-card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

@media (min-width: 1024px) {
    .property-card:hover .property-card-image-wrapper img { transform: scale(1.05); }
}

.property-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    background: var(--brand-dark-blue);
    color: var(--white);
    padding: 6px 16px;
    font-family: 'Epilogue', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    z-index: 3;
}

.property-card-content {
    width: 106%; 
    margin: -80px 0 0 5%; 
    position: relative;
    z-index: 5;
    background: var(--white);
    border: 1px solid var(--border-color);
    padding: 40px;
    box-sizing: border-box;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: var(--transition-smooth);
    will-change: transform, box-shadow;
}

@media (min-width: 1024px) {
    .property-card:hover .property-card-content {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
    }
}

.property-card-header {
    width: 100%;
    position: relative;
    padding-top: 0;
}

.property-card-title-price {
    display: flex;
    flex-direction: column;
    gap: 12px; 
    padding-right: 140px; 
}

.property-card-meta {
    font-family: 'Epilogue', sans-serif;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    gap: 4px;
    align-items: center;
    line-height: 1; 
}

.property-meta-separator {
    color: var(--border-color);
}

.property-address {
    font-family: 'Epilogue', sans-serif;
    font-size: 28px; 
    font-weight: 600;
    line-height: 1.2;
    color: var(--brand-dark-blue);
    margin: 0;
}

.property-price {
    position: absolute;
    top: 0; 
    right: 0; 
    font-family: 'Epilogue', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-dark-blue);
    white-space: nowrap;
    text-align: right;
    line-height: 1; 
}

.property-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.property-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.detail-label {
    font-family: 'Epilogue', sans-serif;
    font-size: 12px;
    color: var(--text-muted);
}

.detail-value {
    font-family: 'Epilogue', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--brand-dark-blue);
}

.property-btn {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--text-muted);
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: var(--transition-base);
    box-sizing: border-box;
    will-change: background-color, border-color;
}

.property-btn span {
    font-family: 'Epilogue', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    transition: color var(--transition-base);
}

.property-btn-arrow {
    color: var(--text-muted);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color var(--transition-base);
    will-change: transform;
}

.property-btn:hover {
    background: var(--text-muted);
}
.property-btn:hover span,
.property-btn:hover .property-btn-arrow {
    color: var(--white);
}
.property-btn:hover .property-btn-arrow {
    transform: translateX(5px);
}

@keyframes mobileFadeIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================================================
   --- 14. IMMOBILIEN GRID & CARDS ---
   ========================================================================== */
section.cegewo-immo-section {
    width: 100%;
    background-color: var(--bg-canvas);
    padding: 80px 24px 140px 24px;
    box-sizing: border-box;
}

/* Standard Layout: Smartphone (1-spaltig) */
.immo-grid {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 80px;
    column-gap: 32px;
}

/* Tablet Layout (ab 768px): 2-spaltig */
@media (min-width: 768px) {
    .immo-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 120px;
    }
}

/* Desktop Layout (ab 1200px): 3-spaltig */
@media (min-width: 1200px) {
    .immo-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 140px;
    }
}

.immo-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    will-change: transform;
}

.immo-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 45 / 44;
    overflow: hidden;
}

.immo-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.immo-card:hover .immo-image-wrapper img {
    transform: scale(1.05);
}

.immo-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    background: var(--brand-dark-blue);
    color: var(--white);
    padding: 6px 16px;
    font-family: 'Epilogue', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.immo-content-box {
    width: 90%;
    margin: -100px auto 0 auto;
    position: relative;
    z-index: 5;
    background: var(--white);
    border: 1px solid var(--border-color);
    padding: 32px;
    box-sizing: border-box;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: var(--transition-smooth);
    will-change: transform, box-shadow;
}

.immo-card:hover .immo-content-box {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.immo-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.immo-title-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.immo-type-location {
    font-family: 'Epilogue', sans-serif;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.immo-title {
    font-family: 'Epilogue', sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--brand-dark-blue);
    margin: 0;
    max-width: 100%;
}

.immo-price {
    font-family: 'Epilogue', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-dark-blue);
    white-space: nowrap;
    line-height: 1.4;
}

.immo-specs-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.immo-spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.spec-label {
    font-family: 'Epilogue', sans-serif;
    font-size: 12px;
    color: var(--text-muted);
}

.spec-value {
    font-family: 'Epilogue', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--brand-dark-blue);
}

.immo-btn {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--text-muted);
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: var(--transition-base);
    will-change: background-color, border-color;
}

.immo-btn span {
    font-family: 'Epilogue', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    transition: color var(--transition-base);
}

.immo-btn-arrow {
    color: var(--text-muted);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color var(--transition-base);
    will-change: transform;
}

.immo-btn:hover {
    background: var(--text-muted);
}

.immo-btn:hover span,
.immo-btn:hover .immo-btn-arrow {
    color: var(--white);
}

.immo-btn:hover .immo-btn-arrow {
    transform: translateX(5px);
}

.cegewo-map-section {
    width: 100%;
	flex-shrink: 0;
    max-width: 1120px;
    margin: 48px auto 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
	display: block;
    align-self: stretch;
}

.cegewo-property-map {
    width: 100%;
	min-width: 100%
		flex-shrink: 0;
	display: block;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    z-index: 1; /* verhindert, dass Leaflet-Controls über den fixierten Header ragen */
}

/* Leaflet setzt intern relative Positionierung, das muss stabil bleiben */
.cegewo-property-map .leaflet-container {
    width: 100% !important;
    height: 100% !important;
}

.cegewo-map-infowindow {
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-dark);
}

.cegewo-map-infowindow strong {
    font-family: 'Epilogue', sans-serif;
    font-size: 15px;
    color: var(--primary-blue);
}

.cegewo-map-infowindow a {
    color: var(--accent-green-muted);
    font-weight: 600;
    text-decoration: none;
}

.cegewo-map-infowindow a:hover {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .cegewo-map-section {
        padding: 0 16px;
    }
}
/* ==========================================================================
   --- 15. FOOTER COMPONENT ---
   ========================================================================== */
.cegewo-footer { width: 100%; background-color: var(--primary-blue); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 36px 12px; box-sizing: border-box; position: relative; z-index: 9995; }
.footer-container { width: 100%; max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.footer-logo-block, .footer-address-block, .footer-links-block, .footer-socials-block { display: flex; flex-direction: column; gap: 16px; }
.footer-logo img.custom-logo-img { max-width: 146px; height: auto; display: block; object-fit: contain; filter: brightness(0) invert(1); }
.footer-address { margin-bottom: 12px; font-style: normal; display: flex; flex-direction: column; gap: 2px; font-family: 'Work Sans', sans-serif; font-size: 14px; line-height: 1.1; color: var(--text-decent); }
.footer-phone a { color: var(--accent-green); text-decoration: none; font-weight: 600; transition: color var(--transition-base); }
.footer-phone a:hover { color: var(--white); }
.footer-address .footer-phone {
    display: block;
    margin-top: 16px !important;
}
.footer-links-block { gap: 12px; }
.footer-links-block .menu-footer-container, .footer-links-block ul.footer-menu { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; }
.footer-links-block ul.footer-menu li { list-style: none; padding: 0; margin: 0; }
.footer-links-block > a, .footer-links-block ul.footer-menu li a, .footer-links-block .menu-footer-container ul li a { font-family: 'Epilogue', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 2.4px; text-transform: uppercase; color: var(--text-decent) !important; text-decoration: none; transition: color var(--transition-base); display: inline-block; }
.footer-links-block > a:hover, .footer-links-block ul.footer-menu li a:hover, .footer-links-block .menu-footer-container ul li a:hover { color: var(--white) !important; }
.footer-socials-block { flex-direction: row; gap: 24px; align-items: center; }
.footer-socials-block a { color: var(--text-decent); transition: color var(--transition-base), transform var(--transition-base); display: inline-flex; will-change: transform, color; }
.footer-socials-block a:hover { color: var(--accent-green); transform: translateY(-2px); }

.footer-legal-static {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-legal-static a {
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    color: var(--text-decent);
    text-decoration: none;
    transition: color var(--transition-base), transform var(--transition-base); 
    display: inline-flex;
    will-change: transform, color;
}

.footer-legal-static a:hover {
    color: var(--accent-green); 
    transform: translateY(-2px);
}

/* ==========================================================================
   --- 16. MEDIA QUERIES (RESPONSIVENESS) ---
   ========================================================================== */
@media (max-width: 767px) {
    section.cegewo-hero {
        padding: 140px 16px 64px 16px;
        margin-top: 0;
    }
    section.cegewo-hero .hero-container {
        flex-direction: column;
        gap: 32px;
    }
    section.cegewo-hero .hero-title-block {
        width: 100%;
        border-right: none;
        padding-right: 0;
        border-bottom: 1.5px solid var(--text-muted);
        padding-bottom: 24px;
    }
    section.cegewo-hero .hero-title-block h1.hero-title {
        font-size: 38px;
        line-height: 1.1;
        white-space: normal;
    }
    section.cegewo-hero .desc-wrapper {
        max-width: 100%;
        padding-top: 8px;
    }

    .expertise-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
        margin-bottom: 32px;
    }
    .expertise-title h1 {
        font-size: 32px;
        line-height: 1.1;
    }
    .expertise-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .team-section {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 40px 0;
        text-align: center;
    }
    .portraits-inner-grid {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }
    .team-card:hover .team-image-wrapper {
        width: 90%;
        max-width: 90%;
    }
    .team-card:active .team-image-wrapper {
        width: 95%;
        max-width: 95%;
    }

    .team-card .team-details {
        padding: 24px;
        margin-top: -30px;
        gap: 16px;
    }

    .team-card .team-role-badge {
        top: -42px;
        padding: 8px 16px;
        font-size: 14px;
        line-height: 1.2;
    }

    .team-card .team-name {
        font-size: 20px;
        line-height: 28px;
    }

    .team-card .team-row {
        padding-bottom: 6px;
        gap: 12px;
    }

    .team-card .row-value {
        font-size: 14px;
        line-height: 20px;
    }
    
    section.cegewo-properties-section {
        padding: 40px 16px 80px 16px;
    }
	
	.process-section {
        padding-left: 24px;
        padding-right: 24px;
    }
    
    section.cegewo-immo-section {
        padding: 40px 16px 80px 16px;
    }

    .properties-grid,
    .immo-grid {
        grid-template-columns: 1fr;
        row-gap: 64px;
    }

    .immo-content-box {
        width: 100%;
        margin: -40px auto 0 auto;
        padding: 24px;
        gap: 16px;
    }

    .immo-header-row {
        flex-direction: column;
        gap: 8px;
    }

    .immo-title {
        font-size: 20px;
    }

    .immo-price {
        text-align: left;
    }

    .property-card {
        max-width: 100%;
    }

    .property-card-content {
        width: 100%;
        margin: -40px 0 0 0;
        padding: 24px;
        gap: 16px;
    }

    .property-card-title-price {
        padding-right: 0;
        gap: 8px;
    }

    .property-address {
        font-size: 20px;
    }

    .property-price {
        position: relative;
        top: auto;
        right: auto;
        text-align: left;
        margin-top: 4px;
    }

    .property-detail-row,
    .immo-spec-item {
        padding-bottom: 6px;
    }

    .detail-value,
    .spec-value {
        font-size: 14px;
    }

    .property-btn,
    .immo-btn {
        padding: 14px;
    }

    .process-row {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }
    .job-block {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .job-text h2 {
        font-size: 32px;
        line-height: 1.2;
    }

    .project-grid-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .project-item {
        flex-direction: column !important;
        gap: 24px;
    }
    .project-item .project-image,
    .project-item .project-info {
        order: initial !important;
        text-align: left;
    }

    section.cegewo-region-section .region-container {
        flex-direction: column;
        gap: 32px;
    }
    section.cegewo-region-section .region-image-wrapper {
        max-width: 100%;
    }
    section.cegewo-region-section .region-title {
        font-size: 36px;
        line-height: 1.1;
    }
    .region-header-section {
        padding: 60px 16px;
    }
    .region-header-section .region-container {
        flex-direction: column;
        gap: 24px;
    }
    .region-header-text,
    .region-header-image {
        width: 100%;
    }
    .region-header-section .region-title {
        font-size: 36px;
    }

    section.cegewo-properties-section .properties-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 40px;
    }
    .footer-logo-block,
    .footer-address-block,
    .footer-links-block,
    .footer-socials-block {
        width: 100%;
        max-width: 100%;
        align-items: center !important;
    }
    .footer-address {
        align-items: center !important;
        text-align: center !important;
    }
    .footer-links-block ul.footer-menu {
        align-items: center !important;
    }
    .footer-socials-block {
        justify-content: center !important;
    }
}

@media (min-width: 768px) {
    .nav-toggle-label { display: none; }
    .cegewo-nav ul { display: flex !important; flex-direction: row; }
    #nav-toggle:checked ~ .cegewo-nav ul { position: static; width: auto; padding: 0; border-bottom: none; }
    
    section.cegewo-hero {
        width: 100%;
        margin-top: -144px;
    }
    section.cegewo-hero .hero-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        gap: 48px;
    }
    section.cegewo-hero .hero-title-block {
        flex: 1.6;
        display: flex;
        flex-direction: column;
        justify-content: center; 
        border-right: 1.5px solid var(--primary-blue); 
        padding-right: 48px;
    }
    section.cegewo-hero .hero-title-block h1.hero-title {
        font-size: 72px;
        line-height: 0.9;
        white-space: nowrap; 
    }
    section.cegewo-hero .desc-wrapper {
        flex: 1;
        max-width: 420px;
        padding-top: 0;
        border-top: none;
        display: flex;
        align-items: center;
    }
    
    .expertise-hero { flex-direction: row; justify-content: space-between; align-items: flex-end; text-align: left; }
    .expertise-title h1 { font-size: 64px; }
    .team-section { display: grid; grid-template-columns: repeat(2, 1fr); gap: 64px; align-items: flex-start; width: 100%; padding: 64px 0; text-align: left; }
    .portraits-inner-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .process-row { grid-template-columns: 60px 1fr 1fr; gap: 32px; }
    .job-block { grid-template-columns: 1fr 1fr; gap: 48px; text-align: left; }
    .job-text { text-align: left; }
    .project-grid-inner { grid-template-columns: repeat(2, 1fr); }

    .footer-container { flex-direction: row !important; justify-content: space-between !important; align-items: flex-start !important; gap: 24px; }
    .footer-logo-block { flex: 1; max-width: 180px; }
    .footer-address-block { flex: 1.5; text-align: left; }
    .footer-links-block { flex: 1.5; align-items: flex-start; }
    .footer-links-block ul.footer-menu { flex-direction: column !important; align-items: flex-start; }
    .footer-socials-block { flex: 1; justify-content: flex-end !important; }

    section.cegewo-region-section .region-container {
        flex-direction: row-reverse;
        justify-content: space-between;
        gap: 64px;
    }
    section.cegewo-region-section .region-image-wrapper {
        flex: 1;
        max-width: 500px;
    }
    section.cegewo-region-section .region-text-wrapper {
        flex: 1;
        gap: 24px;
    }
    section.cegewo-region-section .region-title {
        font-size: 72px;
    }

    .region-header-section {
        padding: 100px 48px;
    }
    .region-header-section .region-title {
        font-size: 64px;
    }

    section.cegewo-properties-section .properties-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .project-item {
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 60px;
    }
    
    .project-item .project-image {
        order: 1 !important;
    }
    .project-item .project-info {
        order: 2 !important;
        text-align: left;
    }
    
    .project-item:nth-of-type(even) {
        flex-direction: row !important;
    }
    .project-item:nth-of-type(even) .project-image {
        order: 2 !important;
    }
    .project-item:nth-of-type(even) .project-info {
        order: 1 !important;
        text-align: left;
    }
    .region-header-section .region-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .region-header-text {
        width: 55%;
    }

    .region-header-image {
        width: 40%;
    }
}

@media (min-width: 1200px) {

    .cegewo-main-content {
        padding-left: var(--sidebar-width);
    }
    .cegewo-footer {
        padding-left: calc(var(--sidebar-width) + 48px);
    }
    .cegewo-fixed-sidebar { display: flex; grid-column: 1;} 
    .cegewo-fixed-header { padding-left: 104px; } 
     .cegewo-main-content {
        grid-column: 2;
        padding-top: 144px;
        padding-right: 0px;
        padding-bottom: 96px;
        padding-left: var(--sidebar-width);
        width: 100%;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    
    section.cegewo-hero {
        width: 100%;
        padding: 320px 48px 160px 48px; 
    }
    section.cegewo-hero .hero-container {
        gap: 64px; 
    }
    section.cegewo-hero .hero-title-block {
        flex: 1.8;
        padding-right: 64px;
    }
    section.cegewo-hero .hero-title-block h1.hero-title { 
        font-size: 96px; 
    }
    section.cegewo-hero .desc-wrapper {
        max-width: 460px;
    }

    .expertise-title h1 { font-size: 86px; }
    .expertise-grid { grid-template-columns: repeat(3, 1fr); }
    .process-row { grid-template-columns: 80px 320px 1fr; gap: 48px; }
    
    .job-block.reverse { direction: rtl; }
    .job-block.reverse .job-text, .job-block.reverse .team-card { direction: ltr; }
    .job-text h2 { font-size: 64px; }
    .project-grid-inner { grid-template-columns: repeat(4, 1fr); }
    
    .portraits-inner-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 64px 48px;
        width: 100%;
        max-width: 1120px;
        margin: 64px auto 0 auto;
        justify-items: center;
        align-items: start;
    }

    .cegewo-footer { grid-column: 2; padding-left: 48px; padding-right: 48px; }

    section.cegewo-region-section,
    section.cegewo-projects-section,
    section.cegewo-detail-section {
        grid-column: 2;
    }
    section.cegewo-region-section .region-image-wrapper {
        max-width: 550px;
    }

    section.cegewo-properties-section .properties-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   --- 17. CEGEWO LEGAL PAGES ---
   ========================================================================== */
section.cegewo-legal-section {
    width: 100%;
    background: var(--bg-light);
    padding: 64px 24px;
    box-sizing: border-box;
}

.legal-container {
    max-width: 1072px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.legal-main-title {
    font-family: 'Epilogue', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-blue);
    text-transform: uppercase;
    line-height: 40px;
    margin: 0 0 16px 0;
}

.legal-subtitle {
    font-family: 'Epilogue', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    text-transform: uppercase;
    line-height: 1.4;
    margin: 32px 0 0 0;
}

.legal-notice-title {
    font-family: 'Epilogue', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-blue);
    text-transform: uppercase;
    margin: 16px 0 0 0;
}

.legal-text {
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    color: var(--text-muted);
    margin: 0;
}

.legal-text a {
    color: var(--primary-blue);
    text-decoration: underline;
    transition: opacity var(--transition-base);
}

.legal-text a:hover {
    opacity: 0.8;
}

.legal-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legal-bold-lead {
    font-family: 'Work Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    section.cegewo-legal-section {
        padding: 40px 16px;
    }
    .legal-main-title {
        font-size: 30px;
        line-height: 36px;
    }
    .legal-subtitle {
        font-size: 20px;
    }
    .legal-text, 
    .legal-bold-lead {
        font-size: 16px;
        line-height: 26px;
    }

}/* ==========================================================================
   --- 18. DETAILPAGE (SINGLE PROPERTY & CONTENT) ---
   ========================================================================== */

/* Container für die Detailseite */
.cegewo-detail-container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding-left: clamp(16px, 4vw, 48px);
    padding-right: clamp(16px, 4vw, 48px);
}

/* Back Link / Navigation */
.cegewo-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Epilogue', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 24px;
    transition: color var(--transition-fast);
}

.cegewo-back-link:hover {
    color: var(--primary-blue);
}

/* Header Bereich der Detailseite */
.cegewo-detail-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.cegewo-detail-header .property-type-tag {
    font-family: 'Epilogue', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    color: var(--accent-green-muted);
    text-transform: uppercase;
}

.cegewo-detail-header h1 {
    font-family: 'Epilogue', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: var(--primary-blue);
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0;
}

/* --- 18.1 TOP GRID LAYOUT (Stats, Hauptbild & Grundriss) --- */

.cegewo-top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 48px;
    width: 100%;
}

@media (min-width: 992px) {
    .cegewo-top-grid {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

.cegewo-left-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
}

.cegewo-right-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Base Card Style (Konsistent mit Theme Tokens) */
.cegewo-card {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

/* Key Specs Card */
.cegewo-stats-card {
    padding: 16px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background-color: var(--white);
    border-top: 3px solid var(--accent-green);
}
.cegewo-stat-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* Wichtig, damit Flexbox-Elemente sich verkleinern dürfen */
}

.cegewo-stat-row .label {
    font-family: 'Work Sans', sans-serif;
    font-size: 10px; /* Schön klein auf Smartphones */
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.cegewo-stat-row strong {
    font-family: 'Epilogue', sans-serif;
    font-size: 15px; /* Kompakt genug für mobile, bricht nicht um */
    font-weight: 700;
    color: var(--primary-blue);
    white-space: nowrap;
}
@media (min-width: 576px) {
    .cegewo-stats-card {
        padding: 24px;
        gap: 24px;
    }

    .cegewo-stat-row {
        gap: 4px;
    }

    .cegewo-stat-row .label {
        font-size: 12px;
        letter-spacing: 0.8px;
    }

    .cegewo-stat-row strong {
        font-size: 22px;
    }
}
/* Bild-Karten (Stabilisiert für alle Formate) */
.cegewo-main-image-card,
.cegewo-floorplan-card {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /* Gib der Karte eine feste, elegante Höhe im Desktop-Modus */
    height: 450px; 
    position: relative;
    overflow: hidden;
    background-color: var(--bg-light, #f4f5f7);
}

.cegewo-main-image-card img,
.cegewo-floorplan-card img {
    width: 100%;
    height: 100%;
    /* ÄNDERUNG: 'cover' füllt die Box immer zu 100% aus. 
       Keine schmalen Spalten mehr! Der Grundriss füllt jetzt die volle Breite. */
    object-fit: cover; 
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.cegewo-main-image-card:hover img,
.cegewo-floorplan-card:hover img {
    transform: scale(1.02);
}
/* --- 18.2 DETAILS & BESCHREIBUNG SECTION --- */

.cegewo-details-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.cegewo-details-block h2 {
    font-family: 'Epilogue', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-blue);
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

/* Key-Value Details Grid */
.cegewo-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .cegewo-details-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px 32px;
    }
}

.cegewo-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--bg-light);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.cegewo-detail-row .label {
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    color: var(--text-muted);
}

.cegewo-detail-row .value {
    font-family: 'Work Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
}

/* Beschreibungstext */
.cegewo-description-text,
.cegewo-description-text * {
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-muted);
	max-width: 100% !important;
    width: auto;
    box-sizing: border-box;
}

.cegewo-description-text p {
    margin-bottom: 16px;
}

.cegewo-description-text p:last-child {
    margin-bottom: 0;
}

/* --- 18.3 BILDERGALERIE & KONTAKT CTA --- */
.cegewo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.cegewo-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background-color: var(--bg-muted);
    aspect-ratio: 4 / 3;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cegewo-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.cegewo-gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.cegewo-gallery-item:hover img {
    transform: scale(1.03);
}

@media (max-width: 768px) {
    .cegewo-gallery-grid {
        grid-template-columns: 1fr;
    }
}

.cegewo-cta-card {
    background-color: var(--primary-blue);
    color: var(--white);
    padding: 40px 32px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-top: 24px;
}

.cegewo-cta-card h3 {
    font-family: 'Epilogue', sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
}

.cegewo-cta-card p {
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    color: var(--text-blue-light);
    max-width: 540px;
}

.detail-contact-btn {
    display: inline-block;
    padding: 14px 32px;
    background-color: var(--accent-green);
    color: var(--primary-blue);
    font-family: 'Epilogue', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}

.detail-contact-btn:hover {
    background-color: var(--white);
    color: var(--primary-blue);
    transform: translateY(-2px);
}

/* --- 18.4 MEDIA QUERIES FÜR DESKTOP & ULTRA-WIDE (2000px+) --- */

@media (min-width: 1200px) {

    /* 2. Sidebar in Spalte 1 */
    .cegewo-fixed-sidebar {
        grid-column: 1;
    }

    /* 3. WICHTIG: Statt display:block nutzen wir hier explicit grid-column, 
       lassen aber das Element ansonsten seine normale Block-Struktur behalten */
    .cegewo-main-content {
        grid-column: 2;
        /* Wir erzwingen eine automatische Höhenberechnung basierend auf dem Inhalt */
        height: auto;
		width: 100%;
        min-height: 100vh;
        overflow: visible;
    }
    
}

body #cegewoLightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

body #cegewoLightbox.is-open {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cegewo-lightbox-content {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cegewoLightboxImg {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    background: #000;
    opacity: 1;
    transform: translateX(0);
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease-out;
}

/* --- Richtungs-Animationen --- */
/* Ausgehendes Bild nach links weg */
#cegewoLightboxImg.slide-out-left {
    transform: translateX(-100px);
    opacity: 0;
}

/* Ausgehendes Bild nach rechts weg */
#cegewoLightboxImg.slide-out-right {
    transform: translateX(100px);
    opacity: 0;
}

/* Einfliegendes Bild Startposition: von links */
#cegewoLightboxImg.slide-in-left {
    transform: translateX(100px);
    opacity: 0;
    transition: none; /* Sofort ohne Animation auf die Startposition setzen */
}

/* Einfliegendes Bild Startposition: von rechts */
#cegewoLightboxImg.slide-in-right {
    transform: translateX(-100px);
    opacity: 0;
    transition: none; /* Sofort ohne Animation auf die Startposition setzen */
}

body .cegewo-lightbox-close,
body .cegewo-lightbox-prev,
body .cegewo-lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 4px;
    transition: background 0.1s;
    z-index: 1000000;
}

body .cegewo-lightbox-close:hover,
body .cegewo-lightbox-prev:hover,
body .cegewo-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.3);
}

body .cegewo-lightbox-close {
    top: 20px;
    right: 25px;
    font-size: 2.5rem;
    padding: 0 15px;
}

body .cegewo-lightbox-prev {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

body .cegewo-lightbox-next {
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* ==========================================================================
   --- 19. KONTAKTFORMULAR (Contact Form 7) ---
   ========================================================================== */
section.cegewo-contact-section {
    --error: #B3261E;
    width: 100%;
    background-color: var(--bg-light);
    padding: 40px 24px 120px 24px;
    box-sizing: border-box;
}

.cegewo-contact-inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Überschrift (Primary/Accent-Muster wie Hero) */
.cegewo-contact-title {
    font-family: 'Epilogue', sans-serif;
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    text-transform: uppercase;
    margin: 0;
}
.cegewo-contact-title .title-line-primary { display: block; color: var(--primary-blue); }
.cegewo-contact-title .title-line-accent {
    display: block;
    font-family: 'Gugi',
    font-weight: 400;
    color: var(--accent-green);
    margin-top: 2px;
}
.cegewo-contact-intro {
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* Formular als Karte */
.cegewo-contact-section .wpcf7 { width: 100%; }
.cegewo-contact-section form.wpcf7-form {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--accent-green);
    box-shadow: var(--shadow-md);
    padding: 24px;
    box-sizing: border-box;
}

.cegewo-form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}
.cegewo-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
.cegewo-form-grid .cegewo-form-row { margin-bottom: 0; }

.cegewo-contact-section .cegewo-form-row label {
    font-family: 'Epilogue', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cegewo-contact-section .wpcf7-form-control-wrap { display: block; width: 100%; }

.cegewo-contact-section input[type="text"],
.cegewo-contact-section input[type="email"],
.cegewo-contact-section input[type="tel"],
.cegewo-contact-section textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: 'Work Sans', sans-serif;
    font-size: 16px; /* verhindert iOS-Zoom */
    color: var(--text-dark);
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    transition: var(--transition-base);
}
.cegewo-contact-section textarea { min-height: 160px; resize: vertical; }
.cegewo-contact-section input::placeholder,
.cegewo-contact-section textarea::placeholder { color: var(--text-decent); }

.cegewo-contact-section input[type="text"]:focus,
.cegewo-contact-section input[type="email"]:focus,
.cegewo-contact-section input[type="tel"]:focus,
.cegewo-contact-section textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(178, 193, 83, 0.35);
}

/* Validierung */
.cegewo-contact-section .wpcf7-not-valid { border-color: var(--error) !important; }
.cegewo-contact-section .wpcf7-not-valid-tip {
    font-family: 'Work Sans', sans-serif;
    font-size: 13px;
    color: var(--error);
    margin-top: 6px;
}

/* DSGVO-Checkbox */
.cegewo-form-consent { margin-bottom: 24px; }
.cegewo-form-consent .wpcf7-list-item { display: block; margin: 0; }
.cegewo-form-consent .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    color: var(--text-muted);
}
.cegewo-form-consent input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--primary-blue);
}
.cegewo-form-consent a { color: var(--primary-blue); text-decoration: underline; }

/* Honeypot: visuell und für Screenreader versteckt */
.cegewo-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Submit-Button */
.cegewo-contact-section input.wpcf7-submit {
    width: 100%;
    padding: 16px;
    background: var(--accent-green);
    color: var(--primary-blue);
    border: 1px solid var(--accent-green);
    border-radius: 0;
    font-family: 'Epilogue', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-base);
}
.cegewo-contact-section input.wpcf7-submit:hover {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--white);
}
.cegewo-contact-section .wpcf7-spinner { display: block; margin: 12px auto 0; }

/* Rückmeldung nach dem Absenden */
.cegewo-contact-section .wpcf7 form .wpcf7-response-output {
    margin: 24px 0 0 0;
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-dark);
}
.cegewo-contact-section .wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--accent-green);
    background: rgba(178, 193, 83, 0.12);
}
.cegewo-contact-section .wpcf7 form.invalid .wpcf7-response-output,
.cegewo-contact-section .wpcf7 form.unaccepted .wpcf7-response-output,
.cegewo-contact-section .wpcf7 form.failed .wpcf7-response-output,
.cegewo-contact-section .wpcf7 form.spam .wpcf7-response-output,
.cegewo-contact-section .wpcf7 form.aborted .wpcf7-response-output {
    border-color: var(--error);
}

@media (min-width: 640px) {
    .cegewo-form-grid { grid-template-columns: 1fr 1fr; }
    .cegewo-contact-section form.wpcf7-form { padding: 40px; }
}
@media (min-width: 768px) {
    .cegewo-contact-title { font-size: 64px; }
}
/* ==========================================================================
   --- 19. VERBESSERUNGEN v1.4.1 (RESPONSIVE, LESBARKEIT, KARTEN, EXPERTISE) ---
   EINFÜGEN: ganz am ENDE der style.css (nach Abschnitt 18 / Lightbox).
   Alle bestehenden Selektoren bleiben unverändert; dieser Block überschreibt
   nur die betroffenen Eigenschaften (gleiche Spezifität, steht weiter unten).
   ========================================================================== */

/* --- 19.0 TOKENS & BASICS ------------------------------------------------ */
:root {
    --page-gutter: clamp(16px, 5vw, 48px);   /* seitlicher Abstand, wächst mit dem Screen */
    --text-decent-dark: #64748B;             /* lesbare Variante von --text-decent auf hellem Grund */
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img {
    max-width: 100%;
}

/* --- 19.1 CONTAINER: SEITLICHE PADDINGS -----------------------------------
   Vorher klebten Expertise, Team, Prozess, Jobs & Co. auf Smartphones am
   Bildschirmrand. Max-Breite wird um die Paddings erweitert, damit der
   Inhalt am Desktop weiterhin exakt 1120px breit bleibt. */
.content-container,
.expertise-hero,
.expertise-grid,
.team-section,
.process-section,
.jobs-container,
.project-grid-inner,
.detail-container {
    max-width: calc(1120px + (2 * var(--page-gutter)));
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

/* In Full-Width-Sektionen ist das Padding schon vorhanden -> nicht doppeln */
.full-width-section .content-container,
.full-width-section .project-grid-inner {
    max-width: 1120px;
    padding-left: 0;
    padding-right: 0;
}

/* --- 19.2 HEADER & NAVIGATION -------------------------------------------- */
.cegewo-nav ul li a {
    color: var(--text-decent-dark);          /* Kontrast vorher ca. 2.6:1, jetzt ca. 4.8:1 */
}

/* Burger-Layout: Logo links, [Anfragen] + Burger rechts */
@media (max-width: 991px) {
    .cegewo-fixed-header { gap: 12px; }
    .cegewo-nav { margin-left: auto; }
    .nav-toggle-label { order: 3; flex-shrink: 0; }
	.project-item .project-image {
        margin-left: auto;
        margin-right: auto;
    }

    #nav-toggle:checked ~ .cegewo-nav ul {
        max-height: calc(100vh - 96px);
		max-height: calc(100dvh - 96px);
        overflow-y: auto;
    }
    #nav-toggle:checked ~ .cegewo-nav ul li a {
        display: inline-block;
        padding: 8px 0;                      /* größere Tippfläche */
    }
}

/* Tablet (768-991px): Menü bleibt als Burger, sonst passt die Navigation nicht neben Logo + Button */
@media (min-width: 768px) and (max-width: 991px) {
    .nav-toggle-label { display: flex; }
    .cegewo-nav ul { display: none !important; }
    #nav-toggle:checked ~ .cegewo-nav ul {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: 96px;
        left: 0;
        width: 100%;
        padding: 24px;
        gap: 16px;
        background: var(--white);
        border-bottom: 2px solid var(--primary-blue);
        z-index: 999;
    }
}

/* Kleine Smartphones */
@media (max-width: 480px) {
    .cegewo-fixed-header { padding: 0 16px; }
    .logo-box img,
    .logo-box img.custom-logo-img { max-width: 112px; }
    .cegewo-nav { gap: 12px; }
    .btn-anfragen {
        padding: 9px 14px;
        font-size: 12px;
        letter-spacing: 0.5px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .expertise-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* Seitenleiste erst ab 1360px: darunter würde sie den zentrierten
   1120px-Inhalt überdecken (80px Sidebar + 1120px Inhalt > 1200px) */
@media (min-width: 1200px) and (max-width: 1359px) {
    .cegewo-fixed-sidebar { display: flex; }
    .cegewo-fixed-header { padding-left: 104px; }
}

/* --- 19.3 HERO ------------------------------------------------------------ */
section.cegewo-hero {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

/* Mobil: vorher doppelter Abstand oben (Main-Padding 144px + Hero 140px) */
@media (max-width: 767px) {
    section.cegewo-hero {
        margin-top: -144px;
        padding-top: 136px;
        padding-bottom: 56px;
    }
}

/* Tablet (768-991px): Titel und Text untereinander statt gequetscht nebeneinander */
@media (min-width: 768px) and (max-width: 991px) {
    section.cegewo-hero .hero-container {
        flex-direction: column;
        gap: 32px;
    }
    section.cegewo-hero .hero-title-block {
        flex: 0 0 auto;
        border-right: none;
        padding-right: 0;
        border-bottom: 1.5px solid var(--primary-blue);
        padding-bottom: 24px;
    }
    section.cegewo-hero .desc-wrapper {
        flex: 0 0 auto;
        max-width: 100%;
    }
}

/* Große Screens: weniger Leerraum auf flachen Laptop-Displays */
@media (min-width: 1200px) {
    section.cegewo-hero {
        padding-top: clamp(200px, 24vh, 320px);
    }
}

section.cegewo-hero .hero-title-block {
    min-width: 0;
}

/* Fließende Schriftgröße statt fester Sprünge (38/72/96px) + kein nowrap mehr */
section.cegewo-hero .hero-title-block h1.hero-title {
    font-size: clamp(34px, 6.6vw, 96px);
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* --- 19.4 EXPERTISE: 4 KACHELN (Mieten, Renovieren, Bauen, Verkauf) ------- */
.expertise-title h1 {
    font-size: clamp(32px, 6.4vw, 86px);
    overflow-wrap: break-word;
    hyphens: auto;
}

.expertise-tagline {
    color: var(--text-decent-dark);
    font-weight: 300;
}

/* Smartphone: 1 Spalte (Basis) */
.expertise-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

/* ab 640px: 2 x 2 */
@media (min-width: 640px) {
    .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* ab 1200px: 4 in einer Reihe */
@media (min-width: 1200px) {
    .expertise-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    .expertise-card {
        padding: 28px;
    }
    .card-content h3 {
        font-size: clamp(20px, 1.9vw, 24px);
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* --- 19.5 TEAM ------------------------------------------------------------ */
.team-card .team-company { font-size: 11px; }        /* vorher 8px */
.team-card .row-label    { font-size: 12px; }        /* vorher 10px */

.team-card .team-details {
    padding: clamp(24px, 3.4vw, 41px);
}

/* --- 19.6 REGION & PROJEKTE ---------------------------------------------- */
section.cegewo-region-section {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

section.cegewo-region-section .region-title {
    font-size: clamp(34px, 6vw, 72px);
    overflow-wrap: break-word;
    hyphens: auto;
}

.region-header-section .region-title {
    font-size: clamp(34px, 5.6vw, 64px);
    overflow-wrap: break-word;
    hyphens: auto;
}

.job-text h2 {
    font-size: clamp(30px, 4.6vw, 64px);
    overflow-wrap: break-word;
    hyphens: auto;
}

.project-title { font-size: clamp(26px, 4vw, 36px); }
.project-date  { color: var(--text-decent-dark); }

/* --- 19.7 IMMOBILIEN-KARTEN: KEINE PREISE, KEINE LABELS -------------------
   Gilt für Mieten & Kaufen (immo_grid.php / immo_card.php) und die
   Property-Card-Blöcke. Die Detailseite (Kaltmiete etc.) bleibt unberührt. */
.immo-price,
.property-price {
    display: none;
}

.immo-badge,
.property-badge {
    display: none;
}

/* OPTIONAL: auch die kleine Zeile "Wohnung · CHEMNITZ" über dem Titel ausblenden:
.immo-type-location,
.property-card-meta { display: none; }
*/

.immo-header-row {
    justify-content: flex-start;
}

/* Ohne Preis wird der reservierte Platz rechts nicht mehr gebraucht */
.property-card-title-price {
    padding-right: 0;
}

.immo-title {
    font-size: clamp(21px, 2.4vw, 26px);
    overflow-wrap: break-word;
    hyphens: auto;
}

.property-card-meta { font-size: 11px; }              /* vorher 10px */

.properties-grid {
    column-gap: clamp(40px, 6vw, 100px);
}

/* Einspaltig (Smartphone/kleines Tablet): Karte nicht über die volle Breite aufziehen */
@media (max-width: 767px) {
    .immo-card {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Touch-Geräte: keine "klebenden" Hover-Zustände nach dem Antippen */
@media (hover: none) {
    .immo-card:hover .immo-content-box,
    .property-card:hover .property-card-content,
    .team-card:hover .team-details {
        transform: none;
        box-shadow: var(--shadow-md);
    }
    .immo-card:hover .immo-image-wrapper img,
    .team-card:hover .team-image-wrapper img,
    .property-card:hover .property-card-image-wrapper img {
        transform: none;
    }
}

/* --- 19.8 DETAILSEITE ----------------------------------------------------- */
.cegewo-detail-header h1 {
    font-size: clamp(26px, 5.5vw, 44px);
    overflow-wrap: break-word;
    hyphens: auto;
	text-align: left;
}

.cegewo-detail-row {
    gap: 16px;
}
.cegewo-detail-row .value {
    text-align: right;
    overflow-wrap: anywhere;
}

@media (max-width: 575px) {
    .cegewo-stat-row .label { font-size: 11px; }      /* vorher 10px */

    .cegewo-cta-card { padding: 32px 20px; }
    .cegewo-cta-card h3 { font-size: 22px; }
    .detail-contact-btn { width: 100%; text-align: center; }

    body .cegewo-lightbox-prev,
    body .cegewo-lightbox-next {
        padding: 8px 14px;
        font-size: 1.5rem;
    }
    body .cegewo-lightbox-prev { left: 8px; }
    body .cegewo-lightbox-next { right: 8px; }
}

/* Bildkarten: fixe 450px Höhe nur am Desktop, sonst Seitenverhältnis */
@media (max-width: 991px) {
    .cegewo-main-image-card,
    .cegewo-floorplan-card {
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

/* Galerie: 2 Spalten statt riesiger Einzelbilder */
@media (max-width: 768px) {
    .cegewo-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Karte: Höhe ist im PHP inline gesetzt -> !important nötig */
@media (max-width: 767px) {
    .cegewo-map-container { height: 300px !important; }
}

/* --- 19.9 FOOTER & RECHTLICHES -------------------------------------------- */
.cegewo-footer {
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
}

.footer-address { line-height: 1.4; }                 /* vorher 1.1 */

.footer-links-block ul.footer-menu li a,
.footer-legal-static a {
    padding: 6px 0;                                   /* größere Tippfläche */
}

.legal-text,
.legal-bold-lead {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* --- 19.10 BARRIEREFREIHEIT: REDUZIERTE BEWEGUNG --------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .property-card { animation: none; }
}

/* ==========================================================================
   --- 19.11 GRUPPIERTE IMMOBILIEN-KARTEN (aufklappbare Einheitenliste) ---
   EINFÜGEN: am Ende der style.css, nach Abschnitt 19.
   ========================================================================== */

.immo-units {
    width: 100%;
}

/* Summary sieht aus wie der bestehende .immo-btn */
.immo-units summary {
    list-style: none;
    cursor: pointer;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--text-muted);
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    font-family: 'Epilogue', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    transition: var(--transition-base);
}

.immo-units summary::-webkit-details-marker {
    display: none;
}

.immo-units summary:hover,
.immo-units[open] summary {
    background: var(--text-muted);
    color: var(--white);
}

.immo-units summary:focus-visible {
    outline: 2px solid var(--accent-green);
    outline-offset: 2px;
}

.immo-units summary .immo-btn-arrow {
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.immo-units[open] summary .immo-btn-arrow {
    transform: rotate(180deg);              /* Pfeil zeigt nach oben, wenn offen */
}

/* Liste der Einheiten */
.immo-unit-list {
    list-style: none;
    margin: 0;
    padding: 8px 0 0 0;
    display: flex;
    flex-direction: column;
}

.immo-unit-list li {
    border-bottom: 1px solid var(--border-color);
}

.immo-unit-list li:last-child {
    border-bottom: none;
}

.immo-unit-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    text-decoration: none;
}

.immo-unit-name {
    font-family: 'Epilogue', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-dark-blue);
    transition: color var(--transition-base);
}

.immo-unit-meta {
    margin-left: auto;
    font-family: 'Epilogue', sans-serif;
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
}

.immo-unit-list .immo-btn-arrow {
    color: var(--text-muted);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color var(--transition-base);
}

.immo-unit-list a:hover .immo-unit-name {
    color: var(--accent-green-muted);
}

.immo-unit-list a:hover .immo-btn-arrow {
    color: var(--accent-green-muted);
    transform: translateX(5px);
}

/* Aufgeklappte Karten sollen die Nachbarkarten nicht in die Länge ziehen */
.immo-grid {
    align-items: start;
}
/* ==========================================================================
   LANDING PAGE (ISOLIERT - NULL AUSWIRKUNG AUF ANDERE SEITEN)
   ========================================================================== */

/* 1. Haupt-Padding aufheben, sobald die Landingpage-Sektion vorhanden ist.
   Ab 1200px bleibt trotzdem Platz für die fixierte Sidebar reserviert. */
.cegewo-main-content:has(.cegewo-landing-fullwidth) {
    padding: 0 !important;
    max-width: 100% !important;
}

@media (min-width: 1200px) {
    .cegewo-main-content:has(.cegewo-landing-fullwidth) {
        padding-left: var(--sidebar-width) !important;
    }
}

/* Falls :has() im Editor/Block-Markup nicht greift (z. B. wenn der Block
   nicht direktes Kind von .cegewo-main-content ist), zusätzlich den
   Block-Wrapper selbst nullen: */
.entry-content:has(> .cegewo-landing-fullwidth),
.wp-block-group:has(> .cegewo-landing-fullwidth) {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* 2. Vollbild-Container, füllt die Höhe exakt bis zum Footer
   (dvh statt vh, damit die mobile Adressleiste keinen Weißraum erzeugt). */
.cegewo-landing-fullwidth {
    position: relative;
    width: 100%;
    min-height: calc(100vh);  /* Fallback für ältere Browser */
    min-height: calc(100dvh); /* berücksichtigt ein-/ausblendende Adressleiste */
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin-bottom: 0 !important; /* kein Gutenberg-Blockabstand danach */
}
.cegewo-landing-fullwidth + * {
    margin-top: 0 !important;
}

/* 3. Farbverlauf-Overlay – die einzige "Verdunklung" hinter der Schrift,
   kein zusätzlicher Kasten. */
.cegewo-landing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(14, 22, 85, 0) 0%,
		var(--brand-dark-blue) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* 4. Inhaltsbereich – gleiche Breite/Gutter-Logik wie der Rest der Seite
   (siehe .content-container, Abschnitt 19.1), damit der Titel exakt an
   derselben horizontalen Position wie z. B. der Hero-Titel beginnt. */
.cegewo-landing-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: calc(1120px + (2 * var(--page-gutter)));
    margin: 0 auto;
    padding: var(--page-gutter) var(--page-gutter) 48px var(--page-gutter);
    color: #ffffff;
    box-sizing: border-box;
}

/* 5. Titel & Beschreibung: immer untereinander, immer linksbündig –
   kein Umschalten auf Row-Layout mehr auf größeren Screens. */
.landing-header-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 44vh; /* schiebt den Titel weiter nach unten auf das Bild */
}

.landing-hero-title {
    font-family: 'Epilogue', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 7vw, 80px);
    line-height: 1;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.landing-hero-description {
    font-family: 'Epilogue', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    line-height: 1.4;
    max-width: 400px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82); /* heller als --text-decent, sonst zu blass auf Fotos */
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
	 .landing-header-row {
        padding-top: 44vh; /* auf größeren Displays etwas tiefer */
    }
    .landing-hero-description {
        border-left: 2px solid var(--accent-green); /* Bugfix: fehlte width/style */
        padding-left: 20px;
    }
}
.landing-eyebrow {
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-green);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
.landing-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 14px 28px;
    border: 1px solid var(--accent-green);
    color: #fff;
    text-decoration: none;
    font-family: 'Epilogue', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    transition: var(--transition-base);
}
.landing-cta-btn:hover { background: var(--accent-green); color: var(--primary-blue); }
@keyframes landingFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.landing-header-row,
.landing-cta-btn {
    animation: landingFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.landing-cta-btn { animation-delay: 0.15s; }

/* ==========================================================================
   --- 20. VERBESSERUNGEN v1.4.2 ---
   EINFÜGEN: ganz am ENDE der style.css (nach Abschnitt 19).
   ========================================================================== */

/* --- 20.1 "ÜBER UNS": TEXTE AUF MOBIL ZENTRIEREN --------------------------
   Scope über Body-Klasse .page-ueber-uns, siehe PHP-Snippet unten
   (functions.php), damit nichts auf anderen Seiten mitgezogen wird. */
@media (max-width: 767px) {
    .page-ueber-uns .cegewo-text-block,
    .page-ueber-uns .region-header-text,
    .page-ueber-uns .region-desc {
        text-align: center;
        align-items: center;
    }
    .page-ueber-uns .cegewo-text-block .block-title,
    .page-ueber-uns .cegewo-text-block .block-desc,
    .page-ueber-uns .region-desc p {
        text-align: center;
    }
}

/* --- 20.2 EXPERTISE-GRID: INTERAKTION AUF MOBIL/TOUCH ---------------------
   Bisher passierte beim Antippen einer Kachel auf Touch-Geräten nichts
   (Hover-Effekt war bewusst deaktiviert). Jetzt löst :active denselben
   Farbfüll-Effekt aus wie der Hover am Desktop. */
@media (hover: none) {
    .expertise-card:active {
        transform: translateY(-4px);
    }
    .expertise-card:active::before {
        height: 100%;
    }
    .expertise-card:active .card-content h3,
    .expertise-card:active .card-content p,
    .expertise-card:active .card-number {
        color: var(--white);
    }
}

/* --- 20.3 EINHEITLICHE PFEILSTILE & ANIMATIONEN ---------------------------
   Eine Regel für alle Pfeile im Theme: gleiche Größe, gleiche Kurve,
   gleiche Slide-Distanz. .btn-arrow / .immo-btn-arrow / .property-btn-arrow
   waren schon konsistent (translateX(5px), 0.4s gleiche Kurve) - ergänzt
   werden Back-Link, externer Objekt-Link und der CTA-Button. */
:root {
    --arrow-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.cegewo-back-link,
.detail-secondary-btn,
.detail-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cegewo-arrow {
    display: inline-flex;
    transition: transform 0.4s var(--arrow-ease);
    will-change: transform;
}

/* Back-Link zeigt nach links -> Hover-Slide nach links */
.cegewo-back-link:hover .cegewo-arrow--left {
    transform: translateX(-5px);
}

/* Alle anderen Pfeile zeigen nach rechts -> Hover-Slide nach rechts */
.detail-secondary-btn:hover .cegewo-arrow,
.detail-contact-btn:hover .cegewo-arrow,
.cegewo-cta-card a:hover .cegewo-arrow {
    transform: translateX(5px);
}

.cegewo-back-link,
.detail-secondary-btn,
.detail-contact-btn {
    justify-content: center;
}


/* --- 20.4 FOOTER: DEZENTER & AUFGERÄUMTER ---------------------------------
   Statt hartem Weiß-auf-Dunkelblau: leicht reduzierte Deckkraft, kleine
   Spalten-Labels, feine Trennlinien am Desktop, ruhigere Typografie. */
.cegewo-footer {
    background-color: var(--brand-dark-blue);
    padding-top: 56px;
    padding-bottom: 32px;
}

.footer-container {
    gap: 32px;
}

.footer-column-label {
    font-family: 'Epilogue', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-blue-muted);
    margin-bottom: 4px;
}

.footer-logo img.custom-logo-img {
    opacity: 0.92;
}

.footer-address {
    color: var(--text-blue-light);
    font-size: 13px;
    gap: 4px;
}

.footer-phone a {
    font-weight: 500;
}

.footer-links-block > a,
.footer-links-block ul.footer-menu li a,
.footer-legal-static a {
    font-size: 11px;
    letter-spacing: 1.8px;
    color: var(--text-blue-muted) !important;
    font-weight: 400;
}
.footer-links-block > a:hover,
.footer-links-block ul.footer-menu li a:hover,
.footer-legal-static a:hover {
    color: var(--white) !important;
}

.footer-socials-block a {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-blue-muted);
}
.footer-socials-block a:hover {
    background: rgba(178, 193, 83, 0.15);
    color: var(--accent-green);
    transform: none; /* der Kreis-Hintergrund reicht als Feedback, kein Hüpfen mehr */
}

/* Feine vertikale Trennlinien zwischen den Spalten (nur Desktop) */
@media (min-width: 768px) {
    .footer-address-block,
    .footer-links-block {
        padding-left: 32px;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
    }
}

@media (max-width: 767px) {
    .cegewo-footer { padding-top: 40px; }
    .footer-container { gap: 36px; }
}


/* ==========================================================================
   --- 21. VERBESSERUNGEN v1.4.3 ---
   EINFÜGEN: ganz am ENDE der style.css (nach Abschnitt 20).
   Ersetzt inhaltlich: 20.1 (Mobile-Zentrierung, jetzt site-weit statt nur
   /ueber-uns/), 20.2 (Tipp-Effekt Expertise, jetzt Scroll-Effekt) und den
   Pfeil-Teil von 20.3 (jetzt dicke SVG-Pfeile statt dünner Zeichen-Pfeile).
   Die alten Abschnitte 20.1/20.2 kannst du entfernen, 20.3-Footer/Landing
   bleiben unverändert bestehen.
   ========================================================================== */

/* --- 21.1 EXPERTISE-GRID: SCROLL-EFFEKT STATT TIPP-EFFEKT -----------------
   Ersetzt den :active-Effekt aus 20.2. Die Kachel fährt beim Reinscrollen
   sanft hoch und ein, genau wie es .property-card bei den Immobilien-
   Blöcken schon tut (gleiche Keyframes, gleiche Scroll-Timeline). */
@media (hover: none) {
    .expertise-card {
        animation: mobileFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-timeline: view();
        animation-range: entry 5% cover 30%;
        will-change: transform, opacity;
    }
}

/* --- 21.2 ALLE TEXTE AUF MOBIL ZENTRIEREN (SITE-WEIT) ---------------------
   Ersetzt die auf /ueber-uns/ beschränkte Regel aus 20.1. Die Body-Klasse
   page-ueber-uns kannst du wieder entfernen, wird nicht mehr gebraucht. */
@media (max-width: 767px) {
    .cegewo-text-block,
    .cegewo-text-block .block-title,
    .cegewo-text-block .block-desc,
    .region-text-wrapper,
    .region-description,
    .region-description p,
    .region-header-text,
    .region-desc,
    .region-desc p,
    .project-info,
    .project-title,
    .project-desc,
    .project-date,
    .cegewo-description-text,
    .cegewo-description-text p,
    .legal-text,
    .legal-bold-lead,
    .legal-main-title,
    .legal-subtitle,
    .legal-notice-title,
    .card-content,
    .card-content h3,
    .card-content p,
    .job-text h2,
    .job-text p {
        text-align: center;
    }
	

    .region-text-wrapper,

    .expertise-card,
    .card-content {
        align-items: center;
    }
	    .cegewo-main-content h1,
    .cegewo-main-content h2,
    .cegewo-main-content h3{
        text-align: center;
    }
 
    .cegewo-main-content .team-card,
    .cegewo-main-content .team-meta-header,
    .cegewo-main-content .property-card-title-price,
    .cegewo-main-content .cegewo-cta-card {
        align-items: center;
        text-align: center;
    }
	    /* Ausnahmen: Zeilen-Layouts (Label links, Wert rechts) bleiben so,
       sonst werden Preise/Specs/Adressdaten unleserlich */
    .cegewo-main-content .immo-spec-item,
    .cegewo-main-content .property-detail-row,
    .cegewo-main-content .cegewo-detail-row,
    .cegewo-main-content .cegewo-stat-row,
    .cegewo-main-content .team-row,
    .cegewo-main-content .immo-unit-meta,
    .cegewo-main-content .immo-unit-name,
    .cegewo-main-content .cegewo-form-row label,
    .cegewo-main-content .cegewo-map-address-hint,
	 .immo-title-group,
    .cegewo-main-content p,
    .cegewo-main-content h4   {
        text-align: left;
    }
	.cegewo-main-content .cegewo-detail-title {
    text-align: left;
    justify-content: flex-start;
    width: 100%;
}

	
}

/* --- 21.3 DICKE PFEILE ÜBERALL (STATT DÜNNER ZEICHEN-PFEILE) --------------
   Ersetzt die Unicode-Pfeile (→ ↓ ←) durch dasselbe SVG-Icon,
   das schon bei den Team-/Job-Karten verwendet wird (stroke-width 2, kräftig).
   PHP-Helper cegewo_arrow_svg() unten in functions.php einfügen, dann in
   immo_grid.php, immo_card.php und single_immobilie.php die Markup-Stellen
   ersetzen (siehe separate Datei mit den genauen Code-Stellen). */

.cegewo-arrow-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: currentColor;
    transition: transform 0.4s var(--arrow-ease, cubic-bezier(0.16, 1, 0.3, 1));
    will-change: transform;
}

.cegewo-arrow-icon--left { transform: rotate(180deg); }
.cegewo-arrow-icon--down { transform: rotate(90deg); }
.cegewo-arrow-icon--up   { transform: rotate(-90deg); }

/* Hover-Slide nach rechts (Standard) */
.immo-btn:hover .cegewo-arrow-icon,
.property-btn:hover .cegewo-arrow-icon,
.btn-contact:hover .cegewo-arrow-icon,
.detail-secondary-btn:hover .cegewo-arrow-icon,
.detail-contact-btn:hover .cegewo-arrow-icon,
.immo-unit-list a:hover .cegewo-arrow-icon {
    transform: translateX(5px);
}

/* Back-Link: Icon ist gespiegelt (180°), Slide wirkt dadurch automatisch
   nach links */
.cegewo-back-link:hover .cegewo-arrow-icon--left {
    transform: rotate(180deg) translateX(5px);
}

/* Aufklapp-Pfeil bei gruppierten Immobilien-Karten: runter -> hoch beim
   Öffnen, kein seitlicher Slide */
.immo-units[open] summary .cegewo-arrow-icon--down {
    transform: rotate(-90deg);
}

/* Alte, dünnere Arrow-Klasse aus Abschnitt 20.3 (Text-Pfeile) wird durch
   .cegewo-arrow-icon ersetzt und kann entfernt werden, sobald das Markup
   überall umgestellt ist. Bis dahin schadet sie nicht, da ungenutzte
   Selektoren keine Wirkung mehr haben, wenn kein <span class="cegewo-arrow">
   mehr im HTML steht. */

.expertise-card {
    animation: mobileFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
    will-change: transform, opacity;
}
 
@media (min-width: 768px) {
    .expertise-card {
        animation: none;
    }
}
/* --- 22. ERGÄNZUNG: vorher nur inline gestylte Detailseiten-Elemente --- */
.cegewo-detail-title {
    display: flex;
	text-align: left;
    gap: 12px;
}
.cegewo-detail-title-icon {
    flex-shrink: 0;
}

.detail-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary-blue); /* vorher: var(--primary, #000) — Variable existierte nicht */
    color: var(--white);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-family: 'Epilogue', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition-base);
}
.detail-secondary-btn:hover { background: var(--brand-dark-blue); }
.cegewo-external-link-block { text-align: center; }

.cegewo-map-container {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-muted);
}
.cegewo-map-address-hint {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.cegewo-floorplan-card {
    background-color: var(--white);
}

.cegewo-floorplan-card img {
    object-fit: contain;
    padding: 12px;
    box-sizing: border-box;
}