/*
 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 */
}

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

/* 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: 1.0em; 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 ===== */