/* custom-safe.css */

/* ===== RESPONSIVE HEADINGS ===== */

.page-section-heading {
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
}

h1 {
    font-size: clamp(2rem, 8vw, 3.5rem) !important;
}

h2 {
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
}

h3 {
    font-size: clamp(1.25rem, 4vw, 2rem) !important;
}

h4 {
    font-size: clamp(1rem, 3vw, 1.5rem) !important;
}

/* ===== RESPONSIVE DIVIDER (VERBESSERT) ===== */

.divider-custom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(0.25rem, 2vw, 1.5rem) !important;
    margin: clamp(1.5rem, 3vw, 2.5rem) 0 !important;
}

/* Linien neben dem Icon */
.divider-custom-line {
    flex: 1 !important;
    height: 3px !important;
    background-color: currentColor !important;
    max-width: clamp(15px, 15vw, 100px) !important;
    opacity: 0.8 !important;
}

/* Icon in der Mitte */
.divider-custom-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
    min-width: clamp(40px, 8vw, 60px) !important;
    color: inherit !important;
    flex-shrink: 0 !important;
}

.divider-custom-icon i {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
    color: inherit !important;
}

/* ===== RESPONSIVE IMAGES ===== */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.responsive-img:hover {
    transform: scale(1.05);
}

/* Wenn Bild in <p> ist */
p img.responsive-img {
    display: block !important;
    margin: 0 auto 1rem auto !important;
}

/* ===== BILD-CIRCLE (falls vorhanden) ===== */
.bild-circle {
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1;
}

/* ===== 2. AUDIO-PLAYER ===== */

audio {
    width: 100% !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    display: block !important;
}

/* Page-Sections */
.page-section {
    padding: clamp(1.5rem, 5vw, 3rem) clamp(0.5rem, 3vw, 1rem) !important;
}

/* ===== RESPONSIVE BUTTONS ===== */

/* Standard Button */
.btn {
    font-size: clamp(0.875rem, 2vw, 1rem) !important;
    padding: clamp(0.375rem, 1vw, 0.75rem) clamp(0.75rem, 2vw, 1.5rem) !important;
    white-space: normal !important;
}

/* Button XL (Desktop) */
.btn-xl {
    font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
    padding: clamp(0.5rem, 1.5vw, 1rem) clamp(1rem, 3vw, 2rem) !important;
}

/* ===== SOCIAL BUTTONS RESPONSIVE ===== */

.btn-social {
    width: clamp(45px, 10vw, 60px) !important;
    height: clamp(45px, 10vw, 60px) !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
    margin: 0 0.5rem !important;
    transition: all 0.3s ease !important;
}

.btn-social:hover {
    transform: scale(1.15) !important;
}

/* Social Icons Spacer */
.social-spacer {
    display: block !important;
    height: 1rem !important;
    margin-top: 0.5rem !important;
}

/* Mobile */
@media (max-width: 575.98px) {
    .social-spacer {
        height: 0.75rem !important;
        margin-top: 0.5rem !important;
    }
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
    .social-spacer {
        height: 0.875rem !important;
        margin-top: 0.5rem !important;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .social-spacer {
        height: 1rem !important;
        margin-top: 0.75rem !important;
    }
}


/* ===== MOBILE (< 576px) ===== */

@media (max-width: 575.98px) {
    
    /* Headings */
    .page-section-heading {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    h1 {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    h4 {
        font-size: 1rem !important;
    }
     /* Paragraphen kompakter */
    p.lead {
        margin-bottom: 0.25rem !important;
    }
    
    /* <br /> Abstände reduzieren */
    br {
        line-height: 0.5 !important;
        display: block !important;
        height: 0.25rem !important;
        content: "" !important;
    }
    
   

    /* Divider */
    .divider-custom {
        gap: 0.25rem !important;
        margin: 1rem 0 !important;
    }
    
    .divider-custom-line {
        max-width: 15px !important;
        height: 2px !important;
    }
    
    .divider-custom-icon {
        font-size: 1.5rem !important;
        min-width: 40px !important;
    }
    
    .divider-custom-icon i {
        font-size: 1.5rem !important;
    }
    
    /* Page Section */
    .page-section {
        padding: 2rem 1rem !important;
    }
    
    /* Images */
    .responsive-img {
        max-width: 80%;
        max-height: 180px;
        margin: 0 auto;
        object-fit: contain;
    }
    
    .bild-circle {
        max-height: 180px;
        width: 150px;
    }
    
    .lead {
        font-size: 1rem;
    }
    
    /* Spacing */
    .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }
    
    .row > [class*='col-'] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Margin-Auto entfernen */
    .col-lg-2.me-auto,
    .col-lg-4.me-auto,
    .col-lg-4.ms-auto,
    .col-lg-2.me-auto {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    br:not(:first-child) {
        content: "";
        display: block;
        height: 0.25rem;
    }
    
    /* Buttons - AUSSER Social Icons */
    .btn:not(.btn-social) {
        font-size: 0.875rem !important;
        padding: 0.375rem 0.75rem !important;
        display: block !important;
        width: 100% !important;
        margin: 0.5rem 0 !important;
    }
    
    .btn-xl:not(.btn-social) {
        font-size: 1rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* Icon auf Mobile unter Text - NUR für normale Buttons */
    .btn:not(.btn-social) i {
        display: block !important;
        margin-top: 0.25rem !important;
        margin-right: 0 !important;
    }
    
    /* Social Buttons */
    .btn-social {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.1rem !important;
        margin: 0 0.25rem !important;
    }
   
}


/* ===== TABLET (576px - 991px) ===== */

@media (min-width: 576px) and (max-width: 991.98px) {
    
    /* Headings */
    .page-section-heading {
        font-size: 1.8rem !important;
    }
    
    /* Divider */
    .divider-custom {
        gap: 0.75rem !important;
        margin: 1.5rem 0 !important;
    }
    
    .divider-custom-line {
        max-width: 50px !important;
        height: 2.5px !important;
    }
    
    .divider-custom-icon {
        font-size: 2rem !important;
        min-width: 50px !important;
    }
    
    .divider-custom-icon i {
        font-size: 2rem !important;
    }
    
    /* Images */
    .responsive-img {
        max-width: 90%;
        max-height: 250px;
    }
    
    .bild-circle {
        max-height: 250px;
        width: 250px;
    }
    
    /* Spacing */
    .row > [class*='col-'] {
        margin-bottom: 1.5rem;
    }
    
    /* Buttons */
    .btn {
        font-size: 0.95rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    .btn-xl {
        font-size: 1.1rem !important;
        padding: 0.75rem 1.5rem !important;
    }
    
    /* Social Buttons */
    .btn-social {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
        margin: 0 0.4rem !important;
    }
}

/* ===== DESKTOP (992px+) ===== */

@media (min-width: 992px) {
    
    /* Headings */
    .page-section-heading {
        font-size: 2.5rem !important;
    }
    
    /* Divider */
    .divider-custom {
        gap: 1.5rem !important;
        margin: 2.5rem 0 !important;
    }
    
    .divider-custom-line {
        max-width: 100px !important;
        height: 3px !important;
    }
    
    .divider-custom-icon {
        font-size: 2.5rem !important;
        min-width: 60px !important;
    }
    
    .divider-custom-icon i {
        font-size: 2.5rem !important;
    }
    
    /* Images */
    .responsive-img {
        max-width: 100%;
        max-height: 100%;
    }
    
    .bild-circle {
        max-height: 100%;
    }
    
    /* Spacing */
    .row > [class*='col-'] {
        margin-bottom: 0;
    }
    
    /* Buttons */
    .btn {
        font-size: 1rem !important;
        padding: 0.75rem 1.5rem !important;
    }
    
    .btn-xl {
        font-size: 1.25rem !important;
        padding: 1rem 2rem !important;
    }
    
    /* Social Buttons */
    .btn-social {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
        margin: 0 0.5rem !important;
    }
}