/* Local IGDH color proposal: existing content and section settings are preserved. */
:root {
    --igdh-blue: #003d7c;
    --igdh-hover: #155b99;
    --igdh-selection: #e4eef8;
    --igdh-surface: #f3f6fa;
    --igdh-text: #252c34;
    --igdh-border: #bdcbd9;
}

body {
    color: var(--igdh-text);
    background: #fff;
    caret-color: var(--igdh-blue);
}
::selection { color: var(--igdh-blue); background: var(--igdh-selection); }
body a { color: var(--igdh-blue); text-underline-offset: .2em; }
body a:hover { color: var(--igdh-hover); background-color: transparent; }
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible {
    outline: 3px solid var(--igdh-hover);
    outline-offset: 3px;
}
body .section,
body .sidebar,
body .section-logo,
body .logo-item { background-color: #fff; }
body .section-logo .logo-item img { filter: none; }
body .sidebar h3,
body h1, body h2, body h3, body h4 { color: var(--igdh-blue); }
body .footer.footer-s1,
body .footer-2.footer-bg-dark {
    background: var(--igdh-surface);
    color: var(--igdh-text);
}
body .footer.footer-s1 .bg-image { display: none; }
/* Das Theme legt über den Footer einen blauen Farbschleier (::after).
   Der kollidiert mit der hellen Vereinsfläche darunter. */
body .footer.footer-s1::after { background: transparent; }
body .footer.footer-s1,
body .footer.footer-s1 p,
body .footer.footer-s1 li,
body .footer.footer-s1 label,
body .footer.footer-s1.tc-light { color: var(--igdh-text); }
body .footer.footer-s1 h3,
body .footer-2.footer-bg-dark a { color: var(--igdh-blue); }
body .footer-2.footer-bg-dark a:hover { color: var(--igdh-hover); background: transparent; }
body input:not([type=submit]):not([type=checkbox]):not([type=radio]),
body select,
body textarea { color: var(--igdh-text); background-color: #fff; border-color: var(--igdh-border); }
body input::placeholder,
body textarea::placeholder { color: #596675; opacity: 1; }
body button[type=submit],
body input[type=submit],
body .btn:not(.search),
body .wp-block-search__button {
    color: #fff;
    background: var(--igdh-blue);
    border-color: var(--igdh-blue);
}
body button[type=submit]:hover,
body input[type=submit]:hover,
body .btn:not(.search):hover,
body .wp-block-search__button:hover { color: #fff; background: var(--igdh-hover); }
/* ------------------------------------------------------------------ *
 * Kopfbereich
 *
 * Das Theme legt .header-wrap selbst als Flex-Zeile mit
 * space-between an. Wir halten uns daran: Banner links, Menü rechts,
 * beides auf einer optischen Linie. Abstände folgen einer 4er-Stufung
 * (4, 8, 12, 16, 24, 32, 48).
 * ------------------------------------------------------------------ */

#header.header-s1 .header-main {
    background: #fff;
    box-shadow: 0 1px 0 var(--igdh-border);
}
#header.has-fixed .header-main {
    box-shadow: 0 1px 0 var(--igdh-border), 0 8px 24px -16px rgba(0, 61, 124, .45);
}

#header .igdh-banner-wrap { width: clamp(200px, 24vw, 320px); }
#header .igdh-banner-link { display: block; }
#header .igdh-banner-link:hover { background: transparent; }
#header .igdh-banner { width: 100%; height: auto; }
#header .header-navbar::before { background: transparent; }

/* Untermenüs: weiße Karte mit echter Tiefe statt farbigem Schein. */
#header #site-navigation .sub-menu {
    border: 1px solid var(--igdh-border);
    border-radius: 6px;
    box-shadow: 0 12px 28px -18px rgba(0, 61, 124, .55);
    overflow: hidden;
}
#header #site-navigation .sub-menu,
#header #site-navigation .sub-menu li,
#header #site-navigation .sub-menu li a {
    color: var(--igdh-blue);
    background: #fff;
}
#header #site-navigation .sub-menu li > a {
    padding: 10px 16px;
    border-bottom: 1px solid var(--igdh-selection);
}
#header #site-navigation .sub-menu li:last-child > a { border-bottom: 0; }
#header #site-navigation .sub-menu li > a:hover,
#header #site-navigation .sub-menu li > a:focus-visible,
#header #site-navigation .sub-menu .current-menu-item > a {
    color: var(--igdh-blue);
    background: var(--igdh-selection);
}

@media (min-width: 993px) {
    #header.header-s1 .header-main { padding: 12px 40px; }

    /* Flex-Zeile des Themes beibehalten, nur mittig ausrichten. */
    #header .header-wrap {
        align-items: center;
        gap: 32px;
        flex-wrap: nowrap;
    }
    #header .igdh-banner-wrap { flex: 0 0 auto; margin: 0; }

    #header .header-navbar {
        position: relative;
        left: auto;
        width: auto;
        margin: 0 0 0 auto;
        padding: 0;
        background: transparent;
    }
    #header #site-navigation { align-items: center; }
    #header #site-navigation #primary-menu {
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
    }
    #header #site-navigation #primary-menu > li { padding: 0; }

    /* Menüpunkt: Text in Vereinsblau, aktive Lage als gezeichnete
       Unterkante. Keine gefüllten Blöcke - die würden neben dem
       Banner um die Aufmerksamkeit streiten. */
    #header #site-navigation #primary-menu > li > a {
        position: relative;
        display: block;
        padding: 12px 14px;
        color: var(--igdh-blue);
        background: transparent;
        font-weight: 600;
        letter-spacing: .06em;
    }
    #header #site-navigation #primary-menu > li > a::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 6px;
        height: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .28s cubic-bezier(.22, 1, .36, 1);
    }
    #header #site-navigation #primary-menu > li > a:hover { color: var(--igdh-hover); }
    #header #site-navigation #primary-menu > li > a:hover::after,
    #header #site-navigation #primary-menu > .current-menu-item > a::after,
    #header #site-navigation #primary-menu > .current-menu-ancestor > a::after {
        transform: scaleX(1);
    }
    #header #site-navigation #primary-menu > li > a:focus-visible {
        outline-color: var(--igdh-hover);
        outline-offset: -3px;
    }

    /* Suche als ruhige Schaltfläche am Zeilenende. */
    #header .menu-btns { margin-left: 8px; }
    #header .menu-btns .btn.search {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        color: var(--igdh-blue);
        background: transparent;
        border-radius: 6px;
    }
    #header .menu-btns .btn.search:hover {
        color: var(--igdh-hover);
        background: var(--igdh-selection);
    }
}

@media (prefers-reduced-motion: reduce) {
    #header #site-navigation #primary-menu > li > a::after { transition: none; }
}

@media (max-width: 992px) {
    #header.header-s1 .header-main { padding: 10px 16px; }
    #header .header-navbar { position: static; width: auto; }
    #header .igdh-banner-wrap { width: clamp(180px, 56vw, 260px); }

    #header #site-navigation .menu-toggle {
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        margin: 0;
        min-width: 44px;
        min-height: 44px;
        color: var(--igdh-blue);
        background: #fff;
        border-radius: 6px;
    }
    #header #site-navigation .menu-toggle:hover { background: var(--igdh-selection); }
    #header #site-navigation.open-nav.toggled #primary-menu {
        position: absolute;
        left: 0;
        top: 100%;
        width: 100%;
        max-height: 65vh;
        overflow-y: auto;
        margin: 12px 0 0;
        padding: 8px 0;
        background: #fff;
        border: 1px solid var(--igdh-border);
        border-radius: 6px;
        box-shadow: 0 16px 32px -20px rgba(0, 61, 124, .55);
    }
    #header #site-navigation.open-nav.toggled #primary-menu *,
    #header #site-navigation.open-nav.toggled #primary-menu a:link {
        color: var(--igdh-blue);
        background-color: #fff;
    }
    #header #site-navigation #primary-menu a {
        padding: 14px 16px;
        min-height: 44px;
        font-weight: 600;
    }
    #header #site-navigation.open-nav.toggled #primary-menu a:hover,
    #header #site-navigation.open-nav.toggled #primary-menu a:focus-visible,
    #header #site-navigation.open-nav.toggled #primary-menu .current-menu-item > a {
        color: var(--igdh-blue);
        background: var(--igdh-selection);
    }
}

/* ------------------------------------------------------------------ *
 * Partnerwand
 *
 * Einziger Inhaltsbereich der Startseite. Gleich große Zellen, die
 * Logos optisch auf eine Höhe gebracht - sonst bestimmt das Seiten-
 * verhältnis der Bilddatei, wie wichtig ein Partner wirkt.
 * ------------------------------------------------------------------ */

body .section.section-logo {
    padding: 48px 0 56px;
    border-top: 1px solid var(--igdh-selection);
}

/* Eigenes Raster statt der Spaltenklassen: das Bootstrap des Themes
   kennt col-5 ohne Breakpoint nicht, dadurch stand auf dem Handy je
   ein Logo pro Zeile - 17 Zeilen und 2279 px Scrollstrecke. */
body .section-logo .row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 0;
}
body .section-logo .row > [class*="col-"] {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
}
body .section-logo .logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 12px;
    background: #fff;
    border-radius: 6px;
}
body .section-logo .logo-item img {
    max-height: 56px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: none;
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
body .section-logo a:hover { background: transparent; }
body .section-logo a:hover .logo-item img,
body .section-logo a:focus-visible .logo-item img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
    body .section-logo .logo-item img { transition: none; }
    body .section-logo a:hover .logo-item img { transform: none; }
}

/* ------------------------------------------------------------------ *
 * Cookie-Hinweis
 *
 * Am unteren Rand bleiben Logo und Navigation erreichbar. Die gezielten
 * !important-Regeln ersetzen ausschließlich die Inline-Farben des Plugins.
 * ------------------------------------------------------------------ */

body #cookie-notice {
    top: auto;
    bottom: 0;
    background-color: var(--igdh-surface) !important;
    border-top: 1px solid var(--igdh-border);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
    max-height: 80vh;
    overflow-y: auto;
}
body #cookie-notice .cookie-notice-container {
    color: var(--igdh-text) !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 64px 20px 24px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    text-align: left;
}
body #cookie-notice.cookie-notice-visible .cookie-notice-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
}
body #cookie-notice #cn-notice-text {
    flex: 1 1 340px;
    max-width: 65ch;
    margin: 0;
}
body #cookie-notice #cn-notice-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}
body #cookie-notice .cn-button:not(.cn-button-custom) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 64px;
    margin: 0;
    padding: 10px 18px;
    border: 1px solid var(--igdh-blue);
    border-radius: 6px;
    background-color: var(--igdh-blue) !important;
    color: #fff;
    font: inherit;
    font-weight: 600;
    letter-spacing: normal;
}
body #cookie-notice #cn-more-info {
    background-color: #fff !important;
    color: var(--igdh-blue);
}
body #cookie-notice .cn-button:hover {
    background-color: var(--igdh-hover) !important;
    border-color: var(--igdh-hover);
}
body #cookie-notice #cn-more-info:hover {
    background-color: var(--igdh-selection) !important;
}
body #cookie-notice .cn-close-icon {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    opacity: 1;
    color: var(--igdh-blue);
}
body #cookie-notice .cn-close-icon::before,
body #cookie-notice .cn-close-icon::after {
    top: 13px;
    left: 21px;
    height: 18px;
    background-color: currentColor;
}
body #cookie-notice .cn-close-icon:hover { background: var(--igdh-selection); }
body #cookie-notice .cn-button:focus-visible,
body #cookie-notice .cn-close-icon:focus-visible,
body #cookie-notice a:focus-visible {
    /* Bootstrap resets focused buttons with !important. */
    outline: 3px solid var(--igdh-hover) !important;
    outline-offset: 3px;
}
@media (max-width: 600px) {
    body #cookie-notice .cookie-notice-container {
        padding: 20px 56px 20px 20px;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    body #cookie-notice .cn-close-icon { top: 8px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    body #cookie-notice.cn-animated { animation-duration: 1ms !important; }
}

/* ------------------------------------------------------------------ *
 * Titelzeile der Unterseiten
 *
 * Das Theme legt unter den Kopfbereich einen .banner-block mit einem
 * mitgelieferten Foto (assets/images/header-bg.jpg) und weißer Schrift
 * darauf. Das Foto gehört nicht zum Verein und trägt nichts bei; die
 * Zeile wird eine ruhige Fläche mit dem Seitentitel in Vereinsblau.
 * ------------------------------------------------------------------ */

body .banner-block .bg-image { display: none; }
/* Auf Unterseiten schwebt der Kopfbereich über dem Banner - das Theme
   hat ihn dort aus dem Fluss genommen (#header ist 0 Pixel hoch) und das
   Foto als Hintergrund darunter gelegt. Ohne Foto muss die Titelzeile die
   Höhe des Kopfbereichs selbst freihalten, sonst steht die Überschrift
   hinter dem Menü. */
:root { --igdh-headeroverlay: 140px; }
@media (max-width: 992px) { :root { --igdh-headeroverlay: 92px; } }

body .banner-block,
body .banner-block.has-bg-image {
    min-height: 0;
    padding: calc(var(--igdh-headeroverlay) + 20px) 0 24px;
    background: var(--igdh-surface);
    border-bottom: 1px solid var(--igdh-border);
}
body .banner-block .banner-content { padding: 0; }
body .banner-block .banner-heading,
body .banner-block.tc-light .banner-heading {
    margin: 0;
    color: var(--igdh-blue);
}

/* ------------------------------------------------------------------ *
 * Unterstützerspalte und Downloads
 * ------------------------------------------------------------------ */

/* Die Logos bekommen wie auf der Startseite eine weiße Karte, damit
   sie unabhängig von ihrem eigenen Hintergrund gleich ruhig wirken. */
body .sidebar .wp-block-image,
body .sidebar figure.wp-block-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    margin: 0 0 10px;
    padding: 10px;
    background: #fff;
    border-radius: 6px;
}
body .sidebar .wp-block-image img { max-height: 52px; width: auto; object-fit: contain; }
body .sidebar h3 { letter-spacing: .06em; }

/* Download-Verweis auf PDFs: als Schaltfläche erkennbar, mit Dateiart
   und Größe im Text, damit niemand blind klickt. */
body a.igdh-download {
    display: inline-block;
    padding: 12px 18px;
    color: #fff;
    background: var(--igdh-blue);
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
}
body a.igdh-download:hover,
body a.igdh-download:focus-visible { color: #fff; background: var(--igdh-hover); }

/* Unterstützerspalte: schmales Band, nur Logos, jedes auf eigener
   weißer Karte. Speist sich aus denselben Customizer-Einträgen wie die
   Startseite, damit die Liste nur an einer Stelle gepflegt wird. */
body .igdh-unterstuetzer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
body .igdh-unterstuetzer li { margin: 0; }
body .igdh-unterstuetzer a,
body .igdh-unterstuetzer li > img {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 10px;
    background: #fff;
    border-radius: 6px;
}
body .igdh-unterstuetzer img { max-height: 48px; width: auto; max-width: 100%; object-fit: contain; }
body .igdh-unterstuetzer a:hover,
body .igdh-unterstuetzer a:focus-visible { background: #fff; outline-offset: 2px; }

/* Kompakte Suche am rechten Ende der Kopfzeile. */
#header .header-wrap { position: relative; }
#header .header-search,
#header .header-search * { box-sizing: border-box; }
#header .header-search {
    position: absolute;
    inset: 100% 0 auto auto;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(26rem, 100%);
    height: auto;
    padding: 12px;
    text-align: left;
    background: #fff;
    color: var(--igdh-text);
    border: 1px solid var(--igdh-border);
    border-radius: 6px;
    box-shadow: 0 12px 28px -18px rgba(0, 61, 124, .55);
    opacity: 1;
    visibility: visible;
    cursor: auto;
    transition: none;
}
#header .header-search[hidden] { display: none; }
#header .header-search .search-form {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    width: auto;
    margin: 0;
    transform: none;
}
#header .header-search .search-field {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--igdh-border);
    font-size: 16px;
    line-height: 1.5;
}
#header .header-search .search-submit,
#header .igdh-search-close,
#header .menu-btns .search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    font-size: 18px;
    cursor: pointer;
}
#header .igdh-search-close,
#header .menu-btns .search-trigger { color: var(--igdh-blue); background: transparent; }
#header .header-search .search-submit { color: #fff; background: var(--igdh-blue); }
#header .header-search .search-submit:hover { background: var(--igdh-hover); }
#header .igdh-search-close:hover,
#header .menu-btns .search-trigger:hover { background: var(--igdh-selection); }
@media (max-width: 992px) {
    #header .menu-btns {
        display: flex;
        position: absolute;
        top: 50%;
        right: 48px;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
    }
    #header .menu-btns::before { display: none; }
    #header .igdh-banner-wrap { width: min(56vw, calc(100% - 96px)); }
}