/*
Theme Name: Massagestübchen Andrea Sperlich Theme
Theme URI: http://www.massage-dill.de/
Auhtor: Patrick Sperlich Webdesign
Author URI: 
Description: Massage
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: massage-dill
Tags: block-patterns, full-site-editing, Physiotherapie
*/

/* =======================================================
   NAVIGATION – Hover-Effekte
======================================================= */

.wp-block-navigation .wp-block-navigation-item a {
    position: relative;
    color: var(--wp--preset--color--text);
    transition: color 0.3s ease, transform 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-item a:hover {
    color: #bbafa0;
    transform: scale(1.05);
}

.wp-block-navigation .wp-block-navigation-item a:hover::after {
    width: 100%;
}

/* =======================================================
   TESTIMONIALS SECTION – Kundenmeinungen
======================================================= */

.karma-testimonials-section {
    padding: 80px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.karma-testimonials-section .section-title {
    font-size: 2rem;
    margin-bottom: 40px;
}

.testimonials-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.testimonial {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    max-width: 300px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.testimonial .quote {
    font-style: italic;
    margin-bottom: 15px;
}

.testimonial .author {
    font-weight: bold;
    color: #555;
}

/* =======================================================
   ANIMATIONEN
======================================================= */

.cta-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.cta-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.cta-animate-pulse,
.cta-animate-slide,
.cta-animate-glow {
    opacity: 0;
}

.cta-animate-pulse.visible {
    animation: pulse 1.5s infinite;
    opacity: 1;
}

.cta-animate-slide.visible {
    animation: slideIn 1s ease-out forwards;
}

.cta-animate-glow.visible {
    animation: glow 2s ease-in-out infinite;
    opacity: 1;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.animate-pulse {
    animation: pulse 1s ease-in-out infinite;
}

@keyframes slideUp {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.animate-slide {
    animation: slideUp 0.8s ease-out forwards;
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 0px rgba(255, 200, 0, 0); }
    50% { box-shadow: 0 0 20px rgba(255, 200, 0, 0.8); }
}

.animate-glow {
    animation: glow 1.5s ease-in-out infinite;
}


/* =======================================================
   H1 – ZENTRIERT AUF ALLEN GERÄTEN
======================================================= */

/* Standard: Immer zentriert (auch Desktop) */
.custom-h1-center {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ===== TABLETS (769px – 1024px) – sicherheitshalber ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .custom-h1-center {
        text-align: center !important;
        font-size: 2.6rem !important;   /* ← optional: etwas größer auf Tablets */
        line-height: 1.3 !important;
        padding: 0 1rem !important;
    }
}

/* ===== MOBILE (unter 769px) ===== */
@media (max-width: 768px) {
    .custom-h1-center {
        text-align: center !important;
        font-size: 2.2rem !important;
        line-height: 1.3 !important;
        padding: 0 1rem !important;
    }
}

/* ===== KLEINE SMARTPHONES (unter 480px) ===== */
@media (max-width: 480px) {
    .custom-h1-center {
        font-size: 1.8rem !important;
        text-align: center !important;
        line-height: 1.3 !important;
        padding: 0 0.5rem !important;
    }
}

/* =======================================================
   ABOUT – BILD ZENTRIEREN (Tablet & Mobile)
======================================================= */

@media (max-width: 1024px) {
    /* Bild-Container zentrieren */
    .about-flex .wp-block-image {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;     /* ← Horizontal zentrieren */
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
    }

    /* Bild selbst zentrieren & Größe anpassen */
    .about-flex .wp-block-image img {
        display: block !important;
        max-width: 80% !important;
        height: auto !important;
        width: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;              /* ← Zentriert das Bild */
        border-top-left-radius: 120px !important;
        border-top-right-radius: 120px !important;
        border-bottom-left-radius: 16px !important;
        border-bottom-right-radius: 16px !important;
        float: none !important;                 /* ← Verhindert Float-Effekte */
        clear: both !important;
    }
}

/* =======================================================
   KLEINE SMARTPHONES (unter 480px)
======================================================= */

@media (max-width: 480px) {
    .about-flex .wp-block-image img {
        max-width: 100% !important;
        border-top-left-radius: 80px !important;
        border-top-right-radius: 80px !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }
}

.about-flex .wp-block-image figure {
    margin: 0 auto !important;
    text-align: center !important;
}

/* =======================================================
   H2 – RESPONSIVE
======================================================= */

.custom-h2 {
    font-size: 95px !important;
    line-height: 1.2 !important;
}

 .custom-headline-h2-master{}

@media (min-width: 769px) and (max-width: 1024px) {
    .custom-h2 {
        font-size: 3rem !important;
        line-height: 1.0 !important;
    }
}

@media (max-width: 768px) {
    .custom-h2 {
        font-size: 2.5rem !important;
        line-height: 1.0 !important;
    }
}

/* =======================================================
   H2 – MOBILE: UMBRUCHEN & ZENTRIERT
======================================================= */

/* =======================================================
   H2 – MOBILE: SAUBER UMBRUCHEN & ZENTRIERT
======================================================= */

@media (max-width: 768px) {
    /* Alle H2-Überschriften auf Mobile optimieren */
    h2, .wp-block-heading {
        word-break: break-word !important;      /* ← Erzwingt Umbruch bei langen Wörtern */
        hyphens: auto !important;               /* ← Fügt Trennstrich ein (z.B. Schwangerschafts-massage) */
        overflow-wrap: break-word !important;   /* ← Verhindert Überlauf */
        text-align: center !important;          /* ← Zentriert */
        max-width: 100% !important;
        padding: 0 0.5rem !important;
        line-height: 1.3 !important;
    }
}

/* =======================================================
   WORDPRESS GALLERY – MOBILE BILDER VERGRÖSSERN
======================================================= */

@media (max-width: 768px) {
    .wp-block-gallery {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: center !important;
    }

    .wp-block-gallery .wp-block-image {
        width: 100% !important;
        max-width: 500px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .wp-block-gallery .wp-block-image img {
        width: 100% !important;
        height: auto !important;
        border-radius: 16px !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    .wp-block-gallery .wp-block-image {
        max-width: 100% !important;
        padding: 0 0.5rem !important;
    }
}

/* =======================================================
   ZENTRIERTES BILD – FÜR ALLE GERÄTE (perfekt zentriert)
======================================================= */

.centered-image {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;           /* ← Verhindert Float-Verschiebungen */
    clear: both !important;
}

/* Zusätzlich: Den übergeordneten Container zentrieren */
.centered-image {
    margin: 0 auto !important;
}

/* Falls das Bild in einem Figure-Element steckt */
figure.centered-image {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Falls das Bild in einer Spalte oder Gruppe steckt */
.wp-block-column .centered-image,
.wp-block-group .centered-image {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* ===== DESKTOP ===== */
@media (min-width: 1025px) {
    .centered-image {
        max-width: 700px !important;
        margin: 0 auto !important;
    }
}

/* ===== TABLET ===== */
@media (min-width: 768px) and (max-width: 1024px) {
    .centered-image {
        max-width: 500px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
    .centered-image {
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 1rem !important;
        display: block !important;
        text-align: center !important;
    }
}

/* =======================================================
   MOBILE: ÜBERSCHRIFT – PERFEKT IN SZENE GESETZT
======================================================= */

@media (max-width: 480px) {
    .custom-headline {
        font-size: 2.2rem !important;
        text-align: center !important;
        line-height: 1.3 !important;
        padding: 0 1rem 0.75rem 1rem !important;
        max-width: 90% !important;
        margin: 0 auto 1.5rem auto !important;
        position: relative !important;
    }
}

/* =======================================================
   MEIN RÄUMCHEN – IPHONE 14 OPTIMIERUNG
======================================================= */

@media (max-width: 430px) {
    .custom-headline,
    .elegant-headline,
    .wp-block-heading {
        font-size: 2.1rem !important;   /* ← kleiner für iPhone 14 */

        text-align: center !important;
    }

 .custom-headline-h2-master{
        font-size: 2.1rem !important; 
        }

}

/* =======================================================
   H1 – MOBILE VERKLEINERN (damit "Mein Räumchen" nicht abbricht)
======================================================= */

/* Standard (Desktop) – normale Größe */
.custom-h1-mobile {
    font-size: 3rem !important;        /* ← Deine Desktop-Größe */
    line-height: 1.2 !important;
    word-break: keep-all !important;   /* ← Verhindert unnötige Trennungen */
}

/* Tablet (744px – 1024px) – etwas kleiner */
@media (min-width: 744px) and (max-width: 1024px) {
    .custom-h1-mobile {
        font-size: 2.6rem !important;  /* ← Tablet-Größe */
        text-align: center !important;  /* ← zentriert (optional) */
    }
}

/* Mobile (unter 744px) – noch kleiner, damit es nicht abbricht */
@media (max-width: 743px) {
    .custom-h1-mobile {
        font-size: 2.2rem !important;  /* ← Mobile-Größe */
        text-align: center !important;
        word-break: keep-all !important;
        padding: 0 0.5rem !important;  /* ← Etwas Abstand zum Rand */
    }
}

/* Kleine Smartphones (unter 480px) – noch kleiner */
@media (max-width: 480px) {
    .custom-h1-mobile {
        font-size: 1.8rem !important;  /* ← Sehr kleine Smartphones */
        padding: 0 0.5rem !important;
    }
}

/* =======================================================
   LANGE WÖRTER SAUBER UMBRUCHEN (ohne Größenänderung)
======================================================= */

.long-word-wrap {
    word-break: break-word !important;      /* ← Erzwingt Umbruch bei langen Wörtern */
    hyphens: auto !important;               /* ← Fügt Trennstriche ein (wo möglich) */
    overflow-wrap: break-word !important;   /* ← Verhindert Überlauf */
    max-width: 100% !important;
    display: inline-block !important;       /* ← Passt sich der Breite an */
}

/* =======================================================
   TITEL & TEXT BREITER MACHEN (NUR MOBILE)
======================================================= */

@media (max-width: 768px) {
    .wider-section {
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
        max-width: 100% !important;
    }

    .wider-section .wp-block-heading {
        max-width: 100% !important;
        padding: 0 0.2rem !important;
        font-size: 1.7rem !important; /* Optional: etwas kleiner */
    }

    .wider-section .wp-block-paragraph {
        max-width: 100% !important;
        padding: 0 0.2rem !important;
        font-size: 1.1rem !important;
    }
}


/* =======================================================
   LANGE WÖRTER – NUR AUF MOBILE UMBRUCHEN
======================================================= */

@media (max-width: 768px) {
    .long-word-wrap {
        word-break: break-word !important;
        hyphens: auto !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
        display: inline-block !important;
    }
}

/* =======================================================
   ÜBERSCHRIFT – RESPONSIVE Alternative
======================================================= */


@media (max-width: 480px) {
    .responsive-head{
        font-size: 1.5rem !important;
    }
}


/* =======================================================
   MASSAGEÜBERSICHT – H4 RESPONSIVE (ALLE MOBILEN GERÄTE)
======================================================= */

/* Standard (Desktop & Tablet) – keine Änderung */
.massage-headline {
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 1.75rem !important;
    font-weight: 600 !important;
}

/* ===== GROSSE SMARTPHONES (z.B. iPhone 12/13/14, Huawei Mate 10 Pro) ===== */
@media (min-width: 400px) and (max-width: 500px) {
    .massage-headline {
        margin-top: 1.2rem !important;
        margin-bottom: 0.3rem !important;
        font-size: 1.75rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        text-align: center !important;
    }
}

/* ===== MITTELGROSSE SMARTPHONES (z.B. iPhone 8, Galaxy S8) ===== */
@media (min-width: 350px) and (max-width: 399px) {
    .massage-headline {
        margin-top: 1rem !important;
        margin-bottom: 0.3rem !important;
        font-size: 1.75rem !important;
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
        text-align: center !important;
    }
}

/* ===== KLEINE SMARTPHONES (z.B. iPhone SE, iPhone 5) ===== */
@media (max-width: 349px) {
    .massage-headline {
        margin-top: 0.9rem !important;
        margin-bottom: 0.2rem !important;
        font-size: 1.75rem !important;
        padding-left: 0.2rem !important;
        padding-right: 0.2rem !important;
        text-align: center !important;
    }
}

/* ===== EXTRA GROSSE SMARTPHONES & KLEINE TABLETS (z.B. Galaxy Fold) ===== */
@media (min-width: 501px) and (max-width: 600px) {
    .massage-headline {
        margin-top: 1.3rem !important;
        margin-bottom: 0.4rem !important;
        font-size: 1.75rem !important;
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
        text-align: center !important;
    }
}

/* =======================================================
   ABOUT SECTION – DESKTOP & RESPONSIVE
======================================================= */

.about-flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
}

.about-flex .wp-block-heading,
.about-flex .wp-block-image,
.about-flex .wp-block-paragraph {
    width: 100% !important;
    max-width: 100% !important;
}

/* ===== DESKTOP (ab 1025px) ===== */
@media (min-width: 1025px) {
    .about-flex {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 2rem 4rem !important;
        align-items: center !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 2rem !important;
    }

    .about-flex .wp-block-heading {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        text-align: left !important;
    }

    .about-flex .wp-block-paragraph {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 3 !important;
        text-align: left !important;
    }

    .about-flex .wp-block-image {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 3 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .about-flex .wp-block-image img {
        border-top-left-radius: 200px !important;
        border-top-right-radius: 200px !important;
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
        object-fit: cover !important;
        height: 100% !important;
        width: 100% !important;
    }
}

/* =======================================================
   TABLETS & MOBILE (unter 1025px) – REIHENFOLGE KORREKT
======================================================= */

@media (max-width: 1024px) {
    /* Die gesamte About-Section als Flex-Container */
    .about-flex {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1.5rem !important;
        padding: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* 1. Überschrift – ZUERST */
    .about-flex .wp-block-heading {
        order: 1 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 0.5rem !important;
    }

    /* 2. Bild – DANACH */
    .about-flex .wp-block-image {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .about-flex .wp-block-image img {
        display: block !important;
        max-width: 80% !important;
        height: auto !important;
        width: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        border-top-left-radius: 120px !important;
        border-top-right-radius: 120px !important;
        border-bottom-left-radius: 16px !important;
        border-bottom-right-radius: 16px !important;
        float: none !important;
        clear: both !important;
    }

    /* 3. Text-Gruppe (alle Absätze) – DANACH */
    .about-flex .about-text-group {
        order: 3 !important;
        width: 100% !important;
        max-width: 90% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        text-align: left !important;
    }

    /* Alle Absätze in der Text-Gruppe */
    .about-flex .about-text-group .wp-block-paragraph {
        text-align: left !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 1.2rem !important;
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }

    /* Falls einzelne Absätze außerhalb der Gruppe existieren */
    .about-flex .wp-block-paragraph {
        order: 3 !important;
        text-align: left !important;
        width: 100% !important;
        max-width: 90% !important;
        margin: 0 auto !important;
        padding: 0 0.5rem !important;
        font-size: 1rem !important;
        line-height: 1.7 !important;
    }
}

/* =======================================================
   KLEINE SMARTPHONES (unter 480px)
======================================================= */

@media (max-width: 480px) {
    .about-flex {
        gap: 1rem !important;
        padding: 0.5rem !important;
    }

    .about-flex .wp-block-heading {
        font-size: 1.8rem !important;
        padding: 0 0.3rem !important;
    }

    .about-flex .wp-block-image img {
        max-width: 100% !important;
        border-top-left-radius: 80px !important;
        border-top-right-radius: 80px !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    .about-flex .about-text-group {
        max-width: 100% !important;
        padding: 0 0.3rem !important;
    }

    .about-flex .about-text-group .wp-block-paragraph {
        font-size: 1.2rem !important;
        margin-bottom: 1rem !important;
    }

    .about-flex .wp-block-paragraph {
        max-width: 100% !important;
        font-size: 0.95rem !important;
        padding: 0 0.3rem !important;
    }
}

/* =======================================================
   RESPONSIVE TEXT – GRÖSSER AUF MOBILEN GERÄTEN
======================================================= */

/* Standard (Desktop) – normale Größe */
.responsive-text {
    font-size: 2rem !important;
    line-height: 1.4 !important;
}

/* ===== GROSSE SMARTPHONES (400–500px) ===== */
@media (min-width: 400px) and (max-width: 500px) {
    .responsive-text {
        font-size: 1.2em !important;   /* ← Größer auf großen Smartphones */
        line-height: 1.4 !important;
        padding: 0 0.9rem !important;
    }
}

/* ===== MITTELGROSSE SMARTPHONES (350–399px) ===== */
@media (min-width: 350px) and (max-width: 399px) {
    .responsive-text {
        font-size: 1.9rem !important;    /* ← Gut lesbar auf mittleren Geräten */
        line-height: 1.6 !important;
        padding: 0 0.9rem !important;
    }
}

/* ===== KLEINE SMARTPHONES (unter 349px) ===== */
@media (max-width: 349px) {
    .responsive-text {
        font-size: 1.9rem !important;      /* ← Etwas kleiner, aber immer noch gut lesbar */
        line-height: 1.4 !important;
        padding: 0 0.2rem !important;
    }
}

/* ===== EXTRA GROSSE SMARTPHONES (501–600px) ===== */
@media (min-width: 501px) and (max-width: 600px) {
    .responsive-text {
        font-size: 1.3rem !important;    /* ← Extra groß für große Smartphones */
        line-height: 1.9 !important;
        padding: 0 0.8rem !important;
    }
}

/* ===== HUAWEI MATE 10 PRO (BLA-L29) & ähnliche Geräte ===== */
@media (min-width: 411px) and (max-width: 413px) and (min-height: 800px) and (max-height: 850px) {
    .responsive-text {
        font-size: 1.15rem !important;
        line-height: 1.8 !important;
        padding: 0 0.5rem !important;
    }
}

/* ===== HUAWEI MATE 10 PRO (BLA-L29) & ähnliche Geräte ===== */
@media (width: 371px){
    .button-termin-anfragen {
        font-size: 15px !important;
    }
}
 

/* =======================================================
   ÜBER MICH – TEXT-GRUPPE (alle Absätze zusammen)
======================================================= */

.about-text-group {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0.5rem !important;
    margin: 1rem 0 !important;
}

.about-text-group .wp-block-paragraph {
    margin-bottom: 1.5rem !important;
    line-height: 1.8 !important;
    font-size: 1.2rem !important;
    text-align: left !important;
    padding: 0 !important;
}

.about-text-group .wp-block-paragraph:last-of-type {
    margin-bottom: 0 !important;
}

/* ===== TABLETS & MOBILE ===== */
@media (max-width: 1024px) {
    .about-text-group {
        padding: 0 0.3rem !important;
    }

    .about-text-group .wp-block-paragraph {
        font-size: 1.2rem !important;
        margin-bottom: 1.2rem !important;
        line-height: 1.7 !important;
    }
}

/* ===== KLEINE SMARTPHONES ===== */
@media (max-width: 480px) {
    .about-text-group .wp-block-paragraph {
        font-size: 0.95rem !important;
        margin-bottom: 1rem !important;
    }
}

/* =======================================================
   TABELLE – MOBILE OPTIMIERT (Preise)
======================================================= */

@media (max-width: 768px) {
    .price-table td,
    .price-table th {
        font-size: 1.2rem !important;
        white-space: nowrap !important;
        padding: 0.3rem 0.3rem !important;
    }
}

/* =======================================================
   TABELLE – IPHONE SE OPTIMIERUNG
======================================================= */

@media (max-width: 400px) {
    /* Alle Tabellen-Zellen kleiner machen */
    .wp-block-table td,
    .wp-block-table th {
        font-size: 1.3rem !important;      /* ← Kleine Schrift */
        padding: 0.2rem 0.3rem !important;
        white-space: nowrap !important;    /* ← Alles in einer Zeile */
        word-break: keep-all !important;   /* ← Verhindert Umbruch */
    }

    /* Falls die Tabelle zu breit wird – Scrollbar */
    .wp-block-table {
        overflow-x: auto !important;
    }
}

/* =======================================================
   TABELLE – LEERE ZELLEN AUF MOBILE ERZWINGEN
======================================================= */

@media (max-width: 768px) {
    .wp-block-table td,
    .wp-block-table th {
        display: table-cell !important;
    }

    /* Alle leeren Zellen bekommen eine Mindesthöhe */
    .wp-block-table td:empty,
    .wp-block-table th:empty {
        min-height: 2rem !important;
        min-width: 2rem !important;
        padding: 0.5rem !important;
        background: transparent !important;
        border: none !important;
    }
}


/* =======================================================
   INDIVIDUELLE H2 – RESPONSIVE FÜR ALLE GERÄTE
======================================================= */

/* Standard (Desktop) – normale Größe */
.custom-h2-responsive {
    font-size: 3.5rem !important;    /* ← Deine Wunschgröße für Desktop */
    line-height: 1.3 !important;
    text-align: center !important;
}

/* ===== TABLETS (769px – 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .custom-h2-responsive {
        font-size: 3rem !important;
        line-height: 1.3 !important;
        padding: 0 1rem !important;
    }
}

/* ===== GROSSE SMARTPHONES (400–500px) ===== */
@media (min-width: 400px) and (max-width: 500px) {
    .custom-h2-responsive {
        font-size: 2.5rem !important;
        line-height: 1.3 !important;
        padding: 0 0.8rem !important;
    }
}

/* ===== MITTELGROSSE SMARTPHONES (350–399px) ===== */
@media (min-width: 350px) and (max-width: 399px) {
    .custom-h2-responsive {
        font-size: 3rem !important;
        line-height: 1.3 !important;
        padding: 0 0.5rem !important;
    }
}

/* ===== KLEINE SMARTPHONES (unter 349px) ===== */
@media (max-width: 349px) {
    .custom-h2-responsive {
        font-size: 1.9rem !important;
        line-height: 1.3 !important;
        padding: 0 0.3rem !important;
    }
}

/* ===== EXTRA GROSSE SMARTPHONES (501–600px) ===== */
@media (min-width: 501px) and (max-width: 600px) {
    .custom-h2-responsive {
        font-size: 2rem !important;
        line-height: 1.3 !important;
        padding: 0 1rem !important;
    }
}

/* ===== HUAWEI MATE 10 PRO (BLA-L29) & ähnliche Geräte ===== */
@media (min-width: 411px) and (max-width: 413px) and (min-height: 800px) and (max-height: 850px) {
    .custom-h2-responsive {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        padding: 0 0.5rem !important;
    }
}