/* ==========================================================================
   ÜBER MICH PAGE (Exklusiv für ueber-mich.php)
   ========================================================================== */

/* Hero Intro */
.about-hero { 
    padding: 60px 0 30px; 
    border-bottom: 1px solid var(--border-color); 
    background: radial-gradient(circle at 80% 20%, rgba(212, 0, 98, 0.12), transparent 60%); 
}

.about-hero h1 { 
    font-size: 2.8rem; 
    font-weight: 900; 
    line-height: 1.1; 
    margin-bottom: 15px; 
}

.about-hero h1 span { 
    color: var(--primary-pink); 
}

.about-hero p.intro-text { 
    font-size: 1.15rem; 
    color: var(--text-muted); 
    max-width: 700px; 
}

/* 2-Spalten Layout (Profil-Bild & Bio) */
.about-grid { 
    display: grid; 
    grid-template-columns: 0.8fr 1.2fr; 
    gap: 50px; 
    padding: 60px 0; 
    align-items: start; 
}

/* Bild-Container mit Zitat-Badge */
.profile-image-container { 
    position: relative; 
    background: var(--bg-card); 
    border-radius: 6px; 
    overflow: hidden; 
    border: 1px solid var(--border-color); 
}

.profile-image-container img { 
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover; 
}

.profile-quote-badge { 
    background: var(--primary-pink); 
    color: #fff; 
    padding: 20px; 
    font-weight: 700; 
    font-size: 1rem; 
    line-height: 1.4; 
}

/* Inhaltsbereich */
.about-content h2 { 
    font-size: 1.6rem; 
    font-weight: 800; 
    margin-bottom: 20px; 
    border-left: 4px solid var(--primary-pink); 
    padding-left: 12px; 
}

.about-content p { 
    color: var(--text-muted); 
    margin-bottom: 20px; 
    font-size: 1rem; 
}

/* Fakten Grid */
.facts-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 15px; 
    margin: 30px 0; 
}

.fact-card { 
    background: var(--bg-card); 
    border: 1px solid var(--border-color); 
    padding: 18px; 
    border-radius: 6px; 
}

.fact-number { 
    font-size: 1.6rem; 
    font-weight: 900; 
    color: var(--primary-pink); 
    line-height: 1.1; 
    margin-bottom: 5px; 
}

.fact-label { 
    font-size: 0.8rem; 
    color: var(--text-muted); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 600; 
}

/* Prinzipien-Liste */
.principles-list { 
    list-style: none; 
    margin-top: 20px; 
}

.principles-list li { 
    background: var(--bg-card); 
    border: 1px solid var(--border-color); 
    padding: 15px 20px; 
    border-radius: 6px; 
    margin-bottom: 12px; 
    display: flex; 
    gap: 15px; 
    align-items: center; 
}

.principles-list .icon { 
    color: var(--primary-pink); 
    font-weight: 900; 
    font-size: 1.2rem; 
}

/* Mobile-Anpassungen */
@media (max-width: 900px) {
    .about-grid { 
        grid-template-columns: 1fr; 
        gap: 30px; 
    }
    .about-hero h1 { 
        font-size: 2.2rem; 
    }
}