/* src/css/subpage.css */

#subpage-root {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.seo-static-content {
    width: 90%;
    max-width: 900px;
    padding: 70px 8%;
    box-sizing: border-box;
    text-align: center; /* Macht die Hero-Elemente schön zentriert */
}

/* =========================================
   🔴 DYNAMISCHES CMS TYPOGRAFIE SYSTEM
   ========================================= */
.cms-headline { 
    color: var(--color-brand-primary); 
    font-size: 3.2rem; 
    margin-top: 0; 
    margin-bottom: 15px; 
    letter-spacing: -1.5px; 
    font-weight: 900; 
    line-height: 1.1;
    font-family: var(--font-heading);
}

.cms-subtext {
    font-size: 1.35rem;
    color: var(--color-text-main);
    font-weight: 700;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 40px;
    font-family: var(--font-body);
}

.cms-main-content {
    text-align: left; /* Fließtext bleibt für gute Lesbarkeit linksbündig */
    color: var(--color-text-muted); 
    font-size: 1.1rem; 
    line-height: 1.8; 
    margin-bottom: 40px; 
    padding-top: 40px;
    border-top: 1px solid var(--border-card);
    font-family: var(--font-body);
}

/* Verwandelt normale Enter-Tasten (br) aus dem Admin-Panel in schöne Absätze */
.cms-main-content br {
    display: block;
    margin-top: 15px;
    content: "";
}

.cms-action-wrapper {
    display: flex;
    justify-content: center;
}

/* Der neue primäre Call-to-Action Button */
.btn-primary {
    display: inline-flex;
    align-items: center;
    background: var(--color-brand-primary);
    color: var(--color-text-inverse);
    padding: 16px 32px;
    border-radius: 12px;
    
    /* 🔴 SICHERHEITS-SCHLOSS FÜR DEN UNTERSTRICH */
    text-decoration: none !important;
    border-bottom: none !important;
    
    font-weight: 700;
    font-size: 1.1rem;
    font-family: var(--font-heading);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-brand-primary) 30%, transparent);
    cursor: pointer;
    border: none;
}

.btn-primary:hover {
    background: var(--color-brand-hover);
    transform: translateY(-3px);
    color: var(--color-text-inverse);
    box-shadow: 0 8px 25px color-mix(in srgb, var(--color-brand-primary) 40%, transparent);
    
    /* 🔴 AUCH BEIM HOVER BLOCKIEREN */
    text-decoration: none !important; 
    border-bottom: none !important;
}

/* Fallback für deine allerersten statischen Tags */
.seo-static-content h1 { color: var(--color-brand-primary); font-size: 2.8rem; margin-top: 0; margin-bottom: 30px; letter-spacing: -1px; font-weight: 800; }
.seo-static-content h2 { color: var(--color-text-main); font-size: 1.8rem; margin-top: 40px; margin-bottom: 20px; font-weight: 700; }
.seo-static-content h3 { color: var(--color-text-main); font-size: 1.3rem; margin-top: 30px; margin-bottom: 15px; font-weight: 600; }
.seo-static-content p { color: var(--color-text-muted); font-size: 1.1rem; line-height: 1.8; margin-bottom: 20px; }