/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ================================================== */
/* == Allgemeine Elemente                          == */
/* ================================================== */

/* Farbdefinitionen */
.grey {
    color: var(--contrast-2);
}

.lightgrey {
    color: var(--contrast-3);
}

/* Menubutton mobil ohne Hintergrund */
.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus,
.has-inline-mobile-toggle #site-navigation.toggled {
    background-color: rgba(0, 0, 0, 0);
}

/* Bild mit abgerundeten Ecken */
img {
    border-radius: 3px;
    -webkit-border-radius: 4px; /* Für ältere Webkit-Browser (Safari, Chrome) */
    -moz-border-radius: 4px; /* Für ältere Firefox-Browser */
    overflow: hidden; /* Verhindert, dass Inhalte über die abgerundeten Ecken hinausragen */
    border: 1px solid var(--contrast);
}

.site-header .site-logo img {
    border: none;
}

/* Ausnahme: Titelbild immer eckig */
.site-header .header-image {
    border-radius: 0px;
}

/* Featured Image auf Seiten/Beiträgen: max. 16:9 */
.featured-image.page-header-image {
    overflow: hidden;
}

.featured-image.page-header-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Kein Hamburger-Menu in mobiler Ansicht */

@media (max-width: 768px) {
    /* Ersetze 768px ggf. durch deinen Breakpoint */

    /* Erzwinge die Sichtbarkeit der UL mit der ID 'menu-footer' */
    ul#menu-footer {
        display: flex !important; /* Flexbox für horizontale Anordnung */
        flex-wrap: wrap !important; /* Umbruch erlauben */
        justify-content: center !important; /* Zentrierung (optional anpassen) */
        list-style: none !important; /* Listenpunkte entfernen */
        padding-left: 0 !important; /* Standard-Padding entfernen */
        margin: 0 auto !important; /* Zentriert die UL, falls sie Breite hat */
        visibility: visible !important; /* Erzwingt Sichtbarkeit */
        height: auto !important; /* Stellt sicher, dass Höhe nicht 0 ist */
        opacity: 1 !important; /* Stellt sicher, dass es nicht transparent ist */
        position: static !important; /* Verhindert evtl. absolute Positionierung zum Verstecken */
        overflow: visible !important; /* Verhindert evtl. overflow: hidden */
    }

    /* Stelle sicher, dass die Listenelemente angezeigt werden */
    ul#menu-footer > li {
        display: inline-block !important; /* Oder 'block' wenn sie untereinander sollen */
        margin: 5px 10px !important; /* Abstand anpassen */
        visibility: visible !important; /* Erzwingt Sichtbarkeit */
        opacity: 1 !important; /* Stellt sicher, dass sie nicht transparent sind */
    }

    /* Blende den zugehörigen Toggle-Button aus */
    /* !! Wichtig: Überprüfe ggf. nochmal genau den Selektor des Buttons mit dem Inspektor !! */
    .secondary-navigation .menu-toggle,
    .secondary-navigation .secondary-menu-toggle {
        display: none !important;
    }

    /* Verstecke mögliche Dropdown-Pfeile in diesem Menü */
    ul#menu-footer .dropdown-menu-toggle {
        display: none !important;
    }
}

/* ================================================== */
/* == CSS für Copyright-Hinweis                    == */
/* ================================================== */

/* Wrapper für das Bild und das Copyright-Overlay */
.image-copyright-wrapper {
    position: relative; /* Notwendig, damit das absolute Overlay darin positioniert werden kann */
    /* display: inline-block; */ /* Lässt den Wrapper sich wie ein Bild verhalten */
    line-height: 0; /* Verhindert extra Leerraum unter Inline-Bildern */
    max-width: 100%; /* Verhindert, dass der Wrapper breiter als sein Container wird */
    height: auto;
    width: 100%; /* Sorgt dafür, dass das Bild den Wrapper ausfüllt */
}

/* Das eigentliche Copyright-Overlay */
.image-copyright-overlay {
    position: absolute; /* Positioniert das Overlay relativ zum Wrapper */
    bottom: 4px; /* Abstand vom unteren Rand (anpassen nach Bedarf) */
    right: 4px; /* Abstand vom rechten Rand (anpassen nach Bedarf) */
    background-color: rgba(
        0,
        0,
        0,
        0.6
    ); /* Schwarzer Hintergrund, 60% transparent (anpassen) */
    color: #ffffff; /* Weiße Textfarbe */
    padding: 2px 6px; /* Innenabstand (oben/unten, links/rechts) */
    font-size: 9px; /* Kleine Schriftgröße (anpassen nach Bedarf) */
    line-height: 1.2; /* Zeilenhöhe für kleine Schrift */
    border-radius: 3px; /* Leicht abgerundete Ecken (optional) */
    z-index: 10; /* Stellt sicher, dass das Overlay über dem Bild liegt */
    pointer-events: none; /* Verhindert, dass das Overlay Klicks auf das Bild blockiert (optional) */
    /* Verhindert Textauswahl, falls störend */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Standardmäßig anzeigen (wichtig, falls Container Queries nicht unterstützt werden) */
    display: block;
}

/* Wenn der '.image-copyright-wrapper' Container weniger als 150px breit ist... */
@container (max-width: 149px) {
    /* ...dann blende das Overlay darin aus */
    .image-copyright-wrapper .image-copyright-overlay {
        display: none;
    }
}

/* ================================================== */
/* == CSS für "Meine Ausstellungen" Plugin V8.4    == */
/* ================================================== */

/* --- Generelle Hilfsklasse --- */
.grey {
    color: var(--contrast-3, #666);
}

/* --- Styling für Shortcode [aktuelle_top_ausstellung] & /aktuell Archiv --- */
section.aktuelle-ausstellung-shortcode-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4em;
    background-color: transparent;
    border: none;
    overflow: hidden;
}
.aktuelle-ausstellung-shortcode-item .ausstellung-image-column,
.aktuelle-ausstellung-shortcode-item .ausstellung-text-column {
    flex: 1 1 50%;
    min-width: 300px;
    box-sizing: border-box;
}
.aktuelle-ausstellung-shortcode-item .ausstellung-image-column {
    line-height: 0;
}
.aktuelle-ausstellung-shortcode-item .ausstellung-image-column a {
    display: block;
    line-height: 0;
}
.aktuelle-ausstellung-shortcode-item .ausstellung-image-column img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}
.aktuelle-ausstellung-shortcode-item .image-placeholder {
    background-color: #eee;
    height: 300px;
    width: 100%;
}
.aktuelle-ausstellung-shortcode-item .ausstellung-text-column {
    padding: 20px 30px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.aktuelle-ausstellung-shortcode-item .text-inner-wrapper {
    /* OK */
}
.aktuelle-ausstellung-shortcode-item.layout-image-right
    .ausstellung-image-column {
    order: 2;
}
.aktuelle-ausstellung-shortcode-item.layout-image-right
    .ausstellung-text-column {
    order: 1;
    text-align: right;
}
.aktuelle-ausstellung-shortcode-item.layout-image-left
    .ausstellung-text-column {
    text-align: left;
}
/* Text-Styling */
.aktuelle-ausstellung-shortcode-item .ausstellung-vorschau-badge {
    display: inline-block;
    background-color: var(--contrast-2, #555);
    color: #ffffff;
    font-size: 0.8em;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    margin-bottom: 0.6em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
}
.aktuelle-ausstellung-shortcode-item .exhibition-title {
    margin-top: 0;
    margin-bottom: 0.2em;
    color: var(--contrast, #111);
} /* Theme H2 + Farbe */
.aktuelle-ausstellung-shortcode-item .exhibition-title a {
    color: inherit;
    text-decoration: none;
}
.aktuelle-ausstellung-shortcode-item .exhibition-title a:hover,
/* .mein-teaser-title a:hover, */ /* Entfernt */
.kuenstlerinnen-liste a:hover,
.ausstellungen-archiv-textlink-section a:hover {
    text-decoration: underline;
}
.aktuelle-ausstellung-shortcode-item .exhibition-subtitle {
    font-style: normal;
    color: var(--contrast-2, #555);
    margin-top: 0;
    margin-bottom: 0.5em;
} /* Theme H4 + Farbe */
.aktuelle-ausstellung-shortcode-item .exhibition-dates {
    color: var(--contrast-2, #555);
    margin-top: 0;
    margin-bottom: 0;
}

/* --- Styling für "mein_teaser" Layout --- */
/* ENTFERNT, da extern definiert */

/* --- Styling für Listeneinträge (Archivseiten / Vorschau / Archiv) --- */
/* Klasse .ausstellung-list-item wird von compact und alternating (Fallback) verwendet */
/* Diese Styles sind jetzt wahrscheinlich überflüssig, da die Teaser-Klassen genutzt werden */
/* Lassen wir sie vorerst als Fallback drin, falls Teaser nicht greift */
.ausstellung-list-item {
    margin-bottom: 3em;
    padding-bottom: 2em;
    overflow: hidden;
    border-bottom: none; /* Linie entfernt */
}
.ausstellung-list-item:last-child {
    margin-bottom: 0;
}
/* Bild im Standard-Listeneintrag */
.ausstellung-list-item:not(.compact-item) .ausstellung-list-image {
    margin-bottom: 1.5em;
    line-height: 0;
}
.ausstellung-list-item:not(.compact-item) .ausstellung-list-image img {
    max-width: 100%;
    height: auto;
    display: block;
}
/* Bild im Kompakt-Layout - Styles entfernt, da Teaser extern */
/* .ausstellung-list-item.compact-item .ausstellung-list-image { ... } */
/* .ausstellung-list-item.compact-item .ausstellung-list-image img { ... } */
/* Text-Container im Listeneintrag */
.ausstellung-list-item .ausstellung-list-text {
    margin-top: 0;
}
/* .ausstellung-list-item.compact-item .ausstellung-list-text { ... } */
/* Titel im Standard-Listeneintrag (H2) */
.ausstellung-list-item:not(.compact-item) .list-item-title {
    margin-top: 0;
    margin-bottom: 0.2em;
} /* Theme H2 */
/* Titel im Kompakt-Listeneintrag (H4) */
.ausstellung-list-item.compact-item .list-item-title {
    margin-top: 0;
    margin-bottom: 0.2em;
} /* Theme H4 */
.ausstellung-list-item .list-item-title a {
    /* Theme Link */
}
.ausstellung-list-item .list-item-title a:hover {
    text-decoration: underline;
}
/* Untertitel im Standard-Listeneintrag */
.ausstellung-list-item:not(.compact-item) .list-item-subtitle {
    font-style: italic;
    color: #555;
    margin-top: 0;
    margin-bottom: 0.6em;
} /* Theme P */
/* Untertitel im Kompakt-Listeneintrag (H6) */
.ausstellung-list-item.compact-item .list-item-subtitle {
    font-style: normal;
    color: var(--contrast-2, #555);
    margin-top: 0;
    margin-bottom: 0.5em;
} /* Theme H6 + Farbe */
/* Datum im Listeneintrag */
.ausstellung-list-item .list-item-dates {
    font-size: 1em;
    color: #777;
    margin-top: 0.3em;
    display: block;
}
.ausstellung-list-item .list-item-dates .date-separator {
    margin: 0 0.4em;
}

/* --- Styling für Archivseiten (/aktuell, /vorschau, /archiv, /kuenstlerinnen) --- */
.post-type-archive-ausstellung .page-header .page-title {
    /* Theme H1 */
}
.post-type-archive-ausstellung .archive-header .archive-subtitle {
    color: #555;
    margin-top: 0.5em;
    margin-bottom: 1.5em;
    font-weight: normal;
    border-bottom: none;
    padding-bottom: 0; /* Kein Strich */
} /* Theme H2? */
.post-type-archive-ausstellung .navigation.pagination {
    margin-top: 2em;
    border-top: none; /* Kein Strich */
    padding-top: 2em;
    clear: both;
}
/* Künstlerinnen Liste */
.kuenstlerinnen-liste .kuenstler-gruppe {
    margin-bottom: 1.5em;
}
.kuenstlerinnen-liste .kuenstler-name {
    margin-bottom: 0.5em; /* Theme H3 */
}
.kuenstlerinnen-liste ul {
    margin-left: 20px;
    list-style: disc;
}
.kuenstlerinnen-liste li {
    margin-bottom: 0.3em;
}
.kuenstlerinnen-liste a {
    /* Theme Link */
}
/* Hover oben definiert */
/* Section Titel auf Basis-Archivseite /ausstellungen/ */
.post-type-archive-ausstellung .ausstellungen-archive-section .section-title {
    margin-top: 1.5em;
    margin-bottom: 1em;
    border-bottom: none;
    padding-bottom: 0; /* Theme H2, Kein Strich */
}
.post-type-archive-ausstellung
    .ausstellungen-archive-section:first-of-type
    .section-title {
    margin-top: 0;
}
/* Archiv Link Sektion auf /ausstellungen/ */
.ausstellungen-archiv-textlink-section {
    margin-top: 2em;
    text-align: left;
    border-top: none;
}
.ausstellungen-archiv-textlink-section .section-title {
    text-align: left;
    border-bottom: none;
    margin-bottom: 0.5em; /* Theme H2 */
}
.ausstellungen-archiv-textlink-section p {
    text-align: left;
    margin-top: 0;
}
.ausstellungen-archiv-textlink-section a {
    /* Theme Link */
}
/* Hover oben definiert */

/* --- Styling für Einzelansicht der Ausstellungen (single-ausstellung.php) --- */
.single-ausstellung .ausstellung-content-gallery-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.single-ausstellung .ausstellung-main-content-col {
    flex: 1;
    min-width: 0;
    width: 65%;
}
.single-ausstellung .no-gallery .ausstellung-main-content-col {
    width: 100%;
    flex-basis: 100%;
}
.single-ausstellung .ausstellung-gallery-sidebar-col {
    flex: 0 0 280px;
    width: 280px;
}
.single-ausstellung .no-gallery .ausstellung-gallery-sidebar-col {
    display: none;
}
.single-ausstellung .entry-header {
    margin-bottom: 1.5em;
}
.single-ausstellung .entry-title {
    margin-bottom: 0.1em !important; /* Theme H1 */
}
.single-ausstellung .ausstellung-untertitel.entry-subtitle.grey {
    font-style: normal;
    margin-top: 0.2em;
    margin-bottom: 0.6em;
    line-height: 1.4;
    font-weight: normal; /* Theme H3 + .grey Farbe */
}
.single-ausstellung .ausstellung-dauer-meta {
    font-size: 1.1em;
    color: #777;
    margin-top: 0.5em;
    display: inline-block;
    line-height: 1.6;
}
.single-ausstellung .ausstellung-dauer-meta .date-separator {
    margin: 0 0.4em;
}
/* Das MANUELL eingefügte Beitragsbild (über dem Header) */
.single-ausstellung .featured-image-above-header {
    margin-bottom: 0.5em;
    line-height: 0;
}
.single-ausstellung .featured-image-above-header img {
    max-width: 100%;
    height: auto;
    display: block;
    width: 100%;
}
.single-ausstellung .featured-image-above-header a {
    display: block;
    line-height: 0;
    cursor: zoom-in;
}
/* Beschreibung für das Beitragsbild (NUR Padding Bottom) */
.single-ausstellung .featured-image-description {
    padding-bottom: 2em; /* Andere Styles entfernt */
}
/* Galerie-Sidebar */
.single-ausstellung .ausstellung-gallery-sidebar-col {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.single-ausstellung .gallery-items-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.single-ausstellung .gallery-item {
    margin-bottom: 0;
}
.single-ausstellung .gallery-item-image {
    margin-bottom: 0.5em;
    line-height: 0;
}
.single-ausstellung .gallery-item-image img {
    max-width: 100%;
    height: auto;
    display: block;
    border: none;
}
.single-ausstellung .gallery-item-image a {
    display: block;
    line-height: 0;
    cursor: zoom-in;
}
/* Copyright entfernt */
.single-ausstellung .gallery-item-description {
    font-size: 0.9em;
    color: #444;
    margin-top: 0.6em;
    line-height: 1.5;
    text-align: left;
}
.single-ausstellung .gallery-item-description p {
    margin-bottom: 0.5em;
}
.single-ausstellung .gallery-item-description p:last-child {
    margin-bottom: 0;
}
/* Zugehörige Veranstaltungen */
.single-ausstellung .va-related-events {
    margin-top: 3em;
    padding-top: 2em;
    border-top: none; /* Kein Strich */
    clear: both;
}
.single-ausstellung .related-events-title {
    margin-top: 0;
    margin-bottom: 1.5em; /* Theme H2 */
}
/* Klassen für va-next-events-grid sind extern definiert */

/* --- Responsive Anpassungen --- */
@media (max-width: 768px) {
    /* Top Shortcode: Stapeln */
    section.aktuelle-ausstellung-shortcode-item {
        flex-direction: column;
        align-items: stretch;
    }
    .aktuelle-ausstellung-shortcode-item .ausstellung-image-column {
        order: 1 !important;
        min-width: 100%;
        flex-basis: auto;
        margin-bottom: 1.5em;
    }
    .aktuelle-ausstellung-shortcode-item .ausstellung-text-column {
        order: 2 !important;
        min-width: 100%;
        flex-basis: auto;
        justify-content: flex-start;
        text-align: left !important;
        padding: 20px;
    }

    /* Teaser Bild - Regeln entfernt */

    /* Single Page Sidebar: Stapeln */
    .single-ausstellung .ausstellung-content-gallery-wrapper {
        flex-direction: column;
    }
    .single-ausstellung .ausstellung-main-content-col,
    .single-ausstellung .ausstellung-gallery-sidebar-col {
        flex: 1 1 100%;
        min-width: 100%;
        width: 100%;
    }
    .ausstellung-gallery-sidebar-col {
        margin-top: 2em;
        border-top: none; /* Kein Strich */
        padding-top: 1.5em;
    }
    .single-ausstellung .gallery-items-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    /* Zugehörige Veranstaltungen Grid */
    .single-ausstellung .va-next-events-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
    }
}
@media (max-width: 480px) {
    .single-ausstellung .va-next-events-grid {
        grid-template-columns: 1fr;
    }
    /* Teaser - Regeln entfernt */
}

/* --- CSS zum Ausblenden von Standard GP Bildern NUR auf Einzelseiten --- */

/* Blendet das Bild aus, das GP oft im Seitenkopfbereich einfügt */
.single-ausstellung .page-header-image-single {
    display: none !important;
}

/* ===== Navigationsmenü Anpassungen v3 ===== */

/* 1. Vorbereitung: Menüpunkte relativ positionieren */
/* (Keine Änderung zum vorherigen Code nötig, aber zur Vollständigkeit hier) */
.main-navigation .main-nav > ul > li > a {
    position: relative;
    overflow: hidden;
    /* display: inline-block; */ /* Könnte helfen, ist aber mit left/right evtl. nicht nötig */
}

/* 2. Die Linie (Pseudo-Element ::before) initial stylen */
.main-navigation .main-nav > ul > li > a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%; /* Startet mittig */
    width: 0; /* Startet mit Breite 0 */
    height: 3px; /* Dicke der Linie - Anpassen */
    /* NEUE HOVER FARBE: --accent */
    background-color: var(--accent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    pointer-events: none;
}

/* 3. Hover-Effekt: Linie animieren (Breite über left/right gesteuert) */
.main-navigation .main-nav > ul > li:hover > a::before {
    /* Statt width: 100% nutzen wir left & right für den Abstand */
    left: 15px; /* Abstand vom linken Rand - Anpassen nach Geschmack */
    right: 15px; /* Abstand vom rechten Rand - Anpassen nach Geschmack */
    width: auto; /* Breite ergibt sich automatisch aus left/right */
    transform: translateX(0%); /* Korrigiert die Zentrierung für left/right */
}

/* 4. Aktuellen Menüpunkt hervorheben (Breite über left/right gesteuert) */
.main-navigation .main-nav > ul > li.current-menu-item > a::before,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::before {
    /* Breite wie beim Hover anpassen */
    left: 15px; /* Abstand vom linken Rand - Anpassen nach Geschmack */
    right: 15px; /* Abstand vom rechten Rand - Anpassen nach Geschmack */
    width: auto; /* Breite ergibt sich automatisch */
    transform: translateX(0%);
    /* NEUE AKTIV FARBE: --contrast */
    background-color: var(--contrast);
}

/* 5. Untermenü bündig ausrichten */
.main-navigation ul ul.sub-menu {
    /* Entfernt Standard-Einrückung */
    padding-left: 0 !important;
    /* Stellt sicher, dass es direkt unter dem Elternelement beginnt */
    /* GeneratePress positioniert Submenüs oft korrekt, aber 'left: 0' kann helfen */
    left: 0 !important; /* Erzwingt linke Bündigkeit zum Parent LI */
}

/* 6. Schatten und Ränder von Untermenüs entfernen (wie vorher) */
.main-navigation ul ul.sub-menu {
    box-shadow: none !important;
    border: none !important;
}
.main-navigation .sub-menu li {
    border: none !important;
}
.main-navigation .sub-menu li a {
    border: none !important;
}

/* 7. Untermenü Einblend-Animation */
.main-navigation ul ul.sub-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px); /* Startet 5px tiefer */
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease; /* Etwas sanftere Animation */
    pointer-events: none;
    /* Sicherstellen, dass die left: 0 Regel von oben nicht die Animation stört */
    /* Die Positionierung für die Animation erfolgt meist über transform */
}

/* Zustand, wenn das Untermenü sichtbar wird */
.main-navigation .main-nav ul li:hover > ul.sub-menu,
.main-navigation .main-nav ul li:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Bewegt sich an die finale Position */
    pointer-events: auto;
}

/* ===== Ende Navigationsmenü Anpassungen v3 ===== */

/* ===== Custom Footer Styling (via Hook - v4 Full Width Copyright) ===== */

/* Haupt-Container des oberen Footer-Bereichs (Widgets) */
.custom-footer-via-hook {
    background-color: var(
        --base-3
    ); /* Hintergrund der Widget-Area - Anpassen! */
    color: var(--contrast); /* Textfarbe der Widget-Area - Anpassen! */
    /* Kein Padding unten mehr hier, wird durch Copyright-Leiste geregelt */
    /* padding-top: 50px; */
}

/* Innerer Container, der die Widgets auf Inhaltsbreite beschränkt */
.custom-footer-via-hook .inside-custom-footer {
    max-width: 1200px; /* Maximale Breite - anpassen an deine Seitenbreite! */
    margin-left: auto;
    margin-right: auto;
}

.custom-footer-via-hook a {
    color: var(--accent);
}
.custom-footer-via-hook a:hover {
    color: var(--contrast);
}

/* Container für die Widget-Spalten */
.custom-footer-via-hook .footer-widgets-container .footer-columns-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 20px; /* Abstand zur Copyright-Leiste */
}

/* Styling der einzelnen Spalten (Widgets) */
.custom-footer-via-hook .footer-widget {
    flex-grow: 1;
    flex-basis: calc(50% - 20px); /* Basisbreite für 2 Spalten */
    min-width: 250px;
}

.custom-footer-via-hook .footer-widget h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.1em;
    color: var(--contrast); /* Farbe der Widget-Überschriften */
}

.custom-footer-via-hook .footer-widget p {
    margin-bottom: 10px;
    /* line-height: 1.6; */
    font-size: 0.9em;
}

/* Styling für Social Icons Bereich */
.custom-footer-via-hook .footer-social-icons {
    margin-top: 30px;
}

.custom-footer-via-hook .footer-social-icons h4 {
    /* Ggf. spezifisches Styling */
}

.custom-footer-via-hook .footer-social-icons a {
    display: inline-block;
    margin-right: 15px;
    line-height: 1;
    color: var(--contrast); /* Farbe der Icons */
    transition:
        color 0.2s ease-in-out,
        opacity 0.2s ease-in-out;
}

.custom-footer-via-hook .footer-social-icons a:hover {
    color: var(--accent);
    opacity: 0.8;
}

.custom-footer-via-hook .footer-social-icons svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* ----- NEUES STYLING FÜR COPYRIGHT-LEISTE ----- */

/* Äußere Copyright-Leiste: Volle Breite, weißer Hintergrund */
.custom-footer-via-hook .custom-copyright-bar {
    background-color: #fff; /* Weißer Hintergrund */
    color: var(--contrast-2); /* Textfarbe für Copyright - Anpassen! */
    font-size: 0.8em;
}

/* Innerer Container der Copyright-Leiste: Begrenzte Breite + Flexbox */
.custom-footer-via-hook .inside-copyright-bar {
    max-width: 1200px; /* Maximale Breite - MUSS ZU .inside-custom-footer PASSEN! */
    margin-left: auto;
    margin-right: auto;

    /* Flexbox für links/rechts Layout HIER anwenden */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Copyright-Text (linke Seite) */
.custom-footer-via-hook .copyright-text {
    margin-right: 20px; /* Abstand zur Navigation */
}

/* Sekundäre Navigation (rechte Seite) */
.custom-copyright-bar .secondary-navigation {
    margin: 0;
}

.custom-copyright-bar .secondary-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.custom-copyright-bar .secondary-navigation li {
    display: inline-block;
    margin: 0 0 0 15px;
    padding: 0;
}
.custom-copyright-bar .secondary-navigation li:first-child {
    margin-left: 0;
}

.custom-copyright-bar .secondary-navigation a {
    color: inherit; /* Farbe von Copyright-Bar erben (var(--contrast-2)) */
    text-decoration: none;
    padding: 5px 0;
    transition:
        color 0.2s ease-in-out,
        text-decoration 0.2s ease-in-out;
}

.custom-copyright-bar .secondary-navigation a:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* ----- Responsive Anpassungen ----- */

/* Widgets auf kleineren Bildschirmen */
@media (max-width: 768px) {
    .custom-footer-via-hook .footer-widget {
        /* Ggf. Basis anpassen */
    }
}
@media (max-width: 480px) {
    .custom-footer-via-hook .footer-widget {
        flex-basis: 100%; /* Widgets untereinander */
    }
}

/* Copyright-Bar auf kleineren Bildschirmen */
@media (max-width: 768px) {
    /* Breakpoint ggf. anpassen */
    .custom-footer-via-hook .inside-copyright-bar {
        justify-content: center; /* Zentrieren, wenn untereinander */
        text-align: center;
    }
    .custom-footer-via-hook .copyright-text {
        margin-right: 0;
        margin-bottom: 10px; /* Abstand nach unten, wenn gestapelt */
        width: 100%;
    }
    .custom-copyright-bar .secondary-navigation ul {
        text-align: center; /* Menüpunkte zentrieren */
    }
    .custom-copyright-bar .secondary-navigation li {
        margin: 0 7px; /* Kleinere Abstände im gestapelten Menü */
    }
}

/* ===== Ende Custom Footer Styling ===== */

/* Grundstyling für die Infobox (Mobil & Desktop) */
.mm_infobox {
    margin-bottom: 1.5em; /* Abstand nach unten */
    border-radius: 4px; /* Optional: leicht abgerundete Ecken */
}

/* Spezifisches Styling für Desktop-Ansicht (ab 768px Bildschirmbreite) */
@media (min-width: 768px) {
    .mm_infobox {
        float: right; /* Rechts ausrichten, Text fließt links vorbei */
        width: 35%; /* Breite der Infobox (anpassbar) */
        margin-left: 2em; /* Abstand zum Text auf der linken Seite */
    }
}

.mm_infobox p:last-child,
.mm_infobox .wp-block-group__inner-container > :last-child {
    margin-bottom: 0;
}

/* Padding entfernen, wenn KEINE Hintergrundfarbe gesetzt ist */
.mm_infobox:not(.has-background) .wp-block-group__inner-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Den oberen Abstand des ersten Elements in der Box (z. B. <h3>) entfernen,
   damit die Infobox optisch bündig mit dem Text daneben auf einer Linie startet */
.mm_infobox:not(.has-background) > :first-child,
.mm_infobox:not(.has-background)
    .wp-block-group__inner-container
    > :first-child {
    margin-top: 0 !important;
}