/* =============================================================================
   Geburtshaus Münster — Mobile Improvements
   ---------------------------------------------------------------------------
   Ziel: Touch-Targets >= 44px, Kursanmeldungsformular auf Mobile benutzbar,
   Sticky-Header schmaler, allgemeine Mobile-Lesbarkeit.

   Aufbau:
   1. Globale Touch-Target-Mindestgrößen (alle Mobile-Viewports)
   2. Kursanmeldungsformular (.kastl, .button, etc.)
   3. Sticky-Menu Mobile-Anpassung
   4. Real Cookie Banner Touch-Targets
   ========================================================================= */


/* =============================================================================
   1. GLOBALE TOUCH-TARGET-MINDESTGRÖSSEN (Mobile: ≤ 768px)
   ========================================================================= */
@media (max-width: 768px) {

    /* Text-Inputs aller Art */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    input[type="password"],
    input[type="url"],
    select,
    textarea {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 16px; /* verhindert Auto-Zoom in iOS Safari */
        box-sizing: border-box;
    }

    textarea {
        min-height: 88px; /* 2 Zeilen */
    }

    /* Buttons aller Art */
    button,
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .button,
    .elementor-button,
    .wp-block-button__link,
    .wpcf7-submit {
        min-height: 44px;
        padding: 12px 18px;
        font-size: 16px;
        box-sizing: border-box;
    }

    /* Radio- und Checkbox-Inputs: größere visuelle Größe, klickbares Label */
    input[type="radio"],
    input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        margin-right: 8px;
        vertical-align: middle;
    }

    /* Wenn Radio/Checkbox in einem Label sitzt, mehr Tap-Area über Padding */
    label:has(input[type="radio"]),
    label:has(input[type="checkbox"]) {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 6px 0;
        cursor: pointer;
    }
}


/* =============================================================================
   2. KURSANMELDUNGSFORMULAR — Mobile-Stacking
   ---------------------------------------------------------------------------
   Das Formular liegt unter #Formular-DieServices-Kursanmeldung und nutzt
   eine <table>-Layoutstruktur mit class-Selektoren wie .kastl, .date, .required.
   Wir brechen die Tabellenstruktur auf Mobile auf und stacken alles.
   ========================================================================= */
@media (max-width: 768px) {

    /* Container darf nicht am Screen-Rand kleben */
    #Formular-DieServices-Kursanmeldung,
    body.page-template-template-kursanmeldung #content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Tabellenstruktur de-facto auflösen */
    #Formular-DieServices-Kursanmeldung table,
    #Formular-DieServices-Kursanmeldung tbody,
    #Formular-DieServices-Kursanmeldung tr,
    #Formular-DieServices-Kursanmeldung td,
    #Formular-DieServices-Kursanmeldung th {
        display: block !important;
        width: 100% !important;
    }

    #Formular-DieServices-Kursanmeldung tr {
        margin-bottom: 16px;
    }

    /* Label-Paragraphen: oberhalb des Inputs, fett, kleiner Margin */
    #Formular-DieServices-Kursanmeldung .bezeichnung-p {
        margin: 0 0 4px 0 !important;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.3;
    }

    /* Inputs: volle Breite, ignorieren das HTML-size-Attribut */
    #Formular-DieServices-Kursanmeldung input[type="text"],
    #Formular-DieServices-Kursanmeldung input.kastl,
    #Formular-DieServices-Kursanmeldung input.date,
    #Formular-DieServices-Kursanmeldung input.required {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    /* Required-Fields visuell markieren */
    #Formular-DieServices-Kursanmeldung input.required {
        border-left: 3px solid #c62828;
    }

    /* Datums-Felder: trotzdem schmaler erlauben, aber min 200px für Lesbarkeit */
    #Formular-DieServices-Kursanmeldung input.date {
        max-width: 200px !important;
    }

    /* Radio-Buttons in einer Zeile mit Gap */
    #Formular-DieServices-Kursanmeldung tr:has(#rbGesetzlich) p:last-of-type,
    #Formular-DieServices-Kursanmeldung p:has(#rbGesetzlich) {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 24px;
        align-items: center;
    }

    /* Error-Message-Feld responsive */
    #Formular-DieServices-Kursanmeldung input[name="message"] {
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        padding: 4px 0 !important;
        min-height: 24px;
        font-weight: 600;
    }

    /* Submit-Button: volle Breite auf Mobile */
    #Formular-DieServices-Kursanmeldung input[name="pbAnmelden"],
    #Formular-DieServices-Kursanmeldung .button {
        display: block;
        width: 100%;
        min-height: 50px;
        padding: 14px 20px;
        font-size: 17px;
        font-weight: 600;
        margin-top: 16px;
    }

    /* AGB-Block: Lesbarkeit auf schmalem Screen */
    #Formular-DieServices-Kursanmeldung tr:last-of-type,
    #Formular-DieServices-Kursanmeldung p:has(input[name="agb"]) {
        font-size: 14px;
        line-height: 1.5;
    }

    #Formular-DieServices-Kursanmeldung input[name="agb"] + br + br + input[name="agb"],
    #Formular-DieServices-Kursanmeldung input[name="agb"] {
        margin-right: 8px;
    }
}


/* =============================================================================
   2b. MOBILE HEADER ANSPRECHENDER GESTALTEN
   ---------------------------------------------------------------------------
   - Leichter Hintergrundton (sage-Tint, passt zum Brand)
   - Logo: max 68 px hoch / 240 px breit (etwas größer als vorher)
   - Edge-Padding links/rechts, damit Logo nicht am Bildrand klebt
   - WICHTIG: identischer Hintergrund + Border auf Initial- UND Sticky-State,
     damit beim Scrollen kein Layout-Sprung passiert.
   ========================================================================= */
@media (max-width: 768px) {

    /* Hintergrund-Farbe für ALLE Header-Zustände/Varianten —
       initial, sticky-on (phantom-sticky), fixed-masthead, mobile-spezifische
       Container (dt-mobile-header, mobile-header-bar) und top-bar-Wrapper.
       Auf Mobile aggressiv überschreiben, damit Layout-Sprung beim Scroll
       verschwindet. */
    body.phantom-sticky .masthead,
    body.sticky-mobile-header .masthead,
    .masthead,
    .masthead.inline-header,
    .masthead.sticky-on,
    .masthead.sticky-mobile-on,
    .masthead.masthead-mobile,
    .masthead.fixed-masthead,
    .masthead-mobile-header,
    .fixed-masthead,
    .dt-mobile-header,
    .mobile-header-bar,
    .masthead .mobile-header-bar,
    .masthead .top-bar,
    .masthead .top-bar-bg,
    .masthead.sticky-on .top-bar,
    .masthead.sticky-on .top-bar-bg,
    .masthead.fixed-masthead .top-bar,
    .masthead.fixed-masthead .top-bar-bg {
        background-color: #f5f7f5 !important;
        background-image: none !important;
    }

    body.phantom-sticky .masthead,
    .masthead,
    .masthead.inline-header,
    .masthead.sticky-on,
    .masthead.masthead-mobile,
    .masthead.fixed-masthead,
    .masthead-mobile-header,
    .fixed-masthead,
    .dt-mobile-header {
        border-bottom: 1px solid rgba(130, 153, 149, 0.18) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }

    /* The7 hat in media.less einen sehr spezifischen Sticky-Background-Override:
       `.sticky-mobile-on.masthead:not(.side-header) { background-color: ... !important }`.
       Wir müssen mit höherer Specificity (4+ Klassen, gleicher :not) gewinnen. */
    body .masthead.sticky-mobile-on.masthead-mobile-header:not(.side-header),
    body .masthead-mobile-header.masthead.sticky-mobile-on:not(.side-header),
    body.sticky-mobile-header .masthead.sticky-mobile-on:not(.side-header),
    body.sticky-mobile-header .masthead-mobile-header.sticky-mobile-on:not(.side-header) {
        background-color: #f5f7f5 !important;
        background-image: none !important;
        border-bottom: 1px solid rgba(130, 153, 149, 0.18) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }

    /* ----- Header-Höhe + Logo-Größe in beiden Sticky-States identisch ----- */

    /* Min-Höhe: identisch für off- und on-State, kein Höhe-Sprung beim Scroll. */
    body .masthead.masthead-mobile-header.sticky-mobile-off,
    body .masthead.masthead-mobile-header.sticky-mobile-on {
        min-height: 84px !important;
        height: auto !important;
    }

    /* The7 versteckt im Sticky-State alle .mobile-branding-Kinder und zeigt
       eine kleinere Switch-Variante. Wir wollen NUR das Haupt-Logo
       (`.mobile-logo`) durchgehend sichtbar — sowohl Switch-Container als
       auch das Mini-Logo bleiben versteckt, damit kein Doppel-Logo entsteht. */
    body .masthead.sticky-mobile-on .mobile-branding > a,
    body .masthead.sticky-mobile-on .mobile-branding > a > img.mobile-logo,
    body .masthead.sticky-mobile-on .mobile-branding img.mobile-logo {
        display: inline-block !important;
        visibility: visible !important;
    }

    /* Beide Logo-Switch-Container ausblenden — wir wollen nur das Haupt-Logo */
    body .masthead.sticky-mobile-on .mobile-branding .sticky-mobile-logo-first-switch,
    body .masthead.sticky-mobile-on .mobile-branding .sticky-mobile-logo-second-switch {
        display: none !important;
    }

    /* Logo-Maße in beiden Zuständen IDENTISCH festschreiben */
    body .masthead .mobile-branding img.mobile-logo,
    body .masthead.sticky-mobile-off .mobile-branding img.mobile-logo,
    body .masthead.sticky-mobile-on .mobile-branding img.mobile-logo {
        max-height: 68px !important;
        max-width: 240px !important;
        width: auto !important;
        height: auto !important;
    }

    /* Logo-Größe und seitlicher Abstand zum Bildrand */
    .masthead .mobile-logo,
    .masthead img.mobile-logo,
    .masthead .branding img.mobile-logo,
    .masthead-mobile-header .mobile-logo,
    .masthead-mobile-header img.mobile-logo {
        max-height: 68px !important;
        width: auto !important;
        max-width: 240px !important;
        height: auto !important;
    }

    /* Container-Padding für seitlichen Atem */
    .masthead .branding,
    .masthead-mobile-header .branding,
    .masthead-mobile-header .mobile-mini-widgets,
    .masthead-mobile-header .dt-mobile-header-icons {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Padding innerhalb des Header-Containers (alle States) */
    .masthead,
    .masthead.inline-header,
    .masthead.sticky-on,
    .masthead.masthead-mobile,
    .masthead-mobile-header {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    /* Header-Gap zur ersten Headline entfernen — nur auf der Home-Seite.
       Auf Content-Seiten (Über uns, Kontakt, etc.) bleibt das 70 px-Padding
       erhalten, damit die Headline genug Atem zum Header hat. */
    body.home #main {
        padding-top: 0 !important;
    }

    /* Vertikaler Abstand zwischen gestackten Buttons (Karriere u. ä.).
       Pattern: <div class="Zusazudownloads"><div><a class="elementor-button">...</a></div><div><a>...</a></div></div>
       Außerdem für Elementor-Button-Wrapper-Ketten allgemein. */
    .Zusazudownloads > div + div,
    .elementor-widget-button + .elementor-widget-button,
    .elementor-button-wrapper + .elementor-button-wrapper {
        margin-top: 12px;
    }

    /* Bei einzelnen .box-button-Ketten direkt nebeneinander (kein Wrapper-Div):
       Geschwister-Buttons bekommen Abstand. */
    a.box-button + a.box-button,
    a.elementor-button + a.elementor-button {
        margin-top: 12px;
    }

    /* Links-Seite (page-id-8973): rohe <table> in Elementor-HTML-Widget wird
       auf Mobile als gestapelte Karten dargestellt — pro Listen-Eintrag
       eine Karte mit Name (fett), Website-Link, E-Mail-Link untereinander. */
    body.page-id-8973 .elementor-widget-html table,
    body.page-id-8973 .elementor-widget-html tbody {
        display: block !important;
        width: 100% !important;
    }
    body.page-id-8973 .elementor-widget-html tr {
        display: block !important;
        width: 100% !important;
        border: 1px solid #e2e6e3;
        border-radius: 8px;
        padding: 12px 14px;
        margin-bottom: 12px;
        background: #fafbfa;
        box-sizing: border-box;
    }
    body.page-id-8973 .elementor-widget-html td {
        display: block !important;
        width: 100% !important;
        padding: 4px 0;
        word-break: break-word;
    }
    /* Erste Zelle (Name) hervorheben */
    body.page-id-8973 .elementor-widget-html tr td:first-child {
        font-size: 16px;
        margin-bottom: 4px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e2e6e3;
    }
    /* Links in den Zellen: kompletter Tap-Area, sage-grün */
    body.page-id-8973 .elementor-widget-html td a {
        display: inline-block;
        word-break: break-all;
        line-height: 1.4;
        padding: 4px 0;
    }
}


/* =============================================================================
   3. STICKY-MENU MOBILE-ANPASSUNG
   ---------------------------------------------------------------------------
   Plugin: sticky-menu-or-anything-on-scroll. Auf Mobile schmaler machen, damit
   der Viewport nicht so stark beschnitten wird. Wir gehen konservativ vor:
   nur Padding/Höhe reduzieren, nicht das Sticky-Verhalten abschalten.
   ========================================================================= */
@media (max-width: 640px) {

    /* The7 Top-Bar (mit Telefon/Adresse) auf Mobile schmaler */
    .top-bar,
    .top-bar-bg,
    #the7-body .top-bar {
        padding-top: 4px;
        padding-bottom: 4px;
        font-size: 13px;
    }

    /* Generic sticky container (vom Plugin via inline-style oder Klasse "stickThis") */
    .stickThis.stuck {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}


/* =============================================================================
   4. REAL COOKIE BANNER — TOUCH-TARGETS
   ---------------------------------------------------------------------------
   Der DSGVO-Banner hat oft enge Buttons. Sicherheitshalber min-height.
   ========================================================================= */
@media (max-width: 768px) {
    .rcb-button,
    [class*="rcb-modal"] button,
    [data-rcb-button-id] button {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 15px;
    }
}


/* =============================================================================
   5. ALLGEMEINE LESBARKEIT
   ========================================================================= */
@media (max-width: 480px) {

    /* HINWEIS: body { font-size: 16px } wurde absichtlich entfernt — würde
       die rem-Basis erhöhen und damit Theme-Headings vergrößern.
       iOS-Auto-Zoom auf Inputs ist bereits über input { font-size: 16px }
       in Block 1 abgedeckt. */

    /* Bilder responsive (sollte Theme machen, defensiv setzen) */
    img {
        max-width: 100%;
        height: auto;
    }
}


/* =============================================================================
   6a. THE7 ISOTOPE / MASONRY-GRID AUF MOBILE STACKEN
   ---------------------------------------------------------------------------
   The7's portfolio-shortcode-Widget (z.B. die Beiträge unten auf der Home)
   nutzt Isotope-Masonry und setzt die Items per absolute-Positioning in
   X Spalten. Auf Mobile wird das viel zu schmal (3 Cards à ~100 px breit
   bei 393 px Viewport — Text bricht zeichenweise um).

   Wir deaktivieren das Absolute-Positioning auf Mobile und stacken die Items
   vertikal mit 100 % Breite.
   ========================================================================= */
@media (max-width: 768px) {

    .iso-container.dt-isotope {
        display: block !important;
        height: auto !important;
        position: relative !important;
    }

    .iso-container.dt-isotope .iso-item,
    .iso-container.dt-isotope .wf-cell {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 24px 0 !important;
    }

    /* Bild-Wrap im Item soll auf Mobile auch full-width sein */
    .iso-container.dt-isotope .iso-item .post-thumbnail-wrap,
    .iso-container.dt-isotope .iso-item .post-thumbnail-rollover {
        width: 100% !important;
    }
}


/* =============================================================================
   6. DEKORATIVES LOGO IM PAGE-CONTENT AUF MOBILE AUSBLENDEN
   ---------------------------------------------------------------------------
   Auf der Home-Seite gibt es im Page-Content nochmal das große GEBURTSHAUS-
   MÜNSTER-Logo als dekoratives Elementor-Image-Widget. Auf Mobile spart das
   ausblenden ~200px Scroll und vermeidet die Logo-Doppelung visuell.

   Die <img>-Tag hat class="wp-image-11675" und liegt in einem
   .elementor-widget-image-Container.
   ========================================================================= */
@media (max-width: 768px) {

    /* Bild selbst ausblenden */
    img.wp-image-11675 {
        display: none !important;
    }

    /* Den Elementor-Image-Widget-Container drumherum auch ausblenden,
       damit keine Whitespace-Lücke bleibt (modernes :has()-Selektor) */
    .elementor-widget-image:has(img.wp-image-11675) {
        display: none !important;
    }
}