/*
 * Full-width slider on the homepage (rootPid 31817).
 *
 * Background: in bootstrap_package <= 11.0.x the slick slider on the home page
 * rendered each slide with `frame-layout-0` (no Bootstrap container wrap).
 * bootstrap_package 14.0.7 (used after the 10.4 -> 11.5 upgrade on 2026-05-22)
 * now wraps every `slickcontent` slide in
 *   <div class="frame-container frame-container-default">
 * which forces the Bootstrap-container max-width (~956px on md/lg). The slide
 * images end up centred and capped instead of spanning the viewport.
 *
 * Scoped to `#p31817 .slickdefault` so it only affects the homepage slider.
 *
 * IMPORTANT: do NOT touch `.slick-list`, `.slick-track`, `.slick-slide` —
 * slick.js sets explicit pixel widths on these during init; overriding them
 * makes the track collapse to single-slide width and only the first slide is
 * visible. Only the frame-* wrappers and image/picture nodes _inside_ each
 * slide need to be widened.
 */
#p31817 .slickdefault .frame-container,
#p31817 .slickdefault .frame-container-default,
#p31817 .slickdefault .frame-group-container,
#p31817 .slickdefault .frame-group-inner,
#p31817 .slickdefault .frame-inner {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

#p31817 .slickdefault .textpic-item,
#p31817 .slickdefault .textpic-gallery,
#p31817 .slickdefault .gallery-row,
#p31817 .slickdefault .gallery-item,
#p31817 .slickdefault figure.image,
#p31817 .slickdefault picture {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

#p31817 .slickdefault picture > img,
#p31817 .slickdefault figure.image > picture > img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

/*
 * Header logo size — site-wide.
 *
 * bootstrap_package 14.0.7 constrains `.navbar-brand-image img` with
 *     max-height: calc(var(--mainnavigation-nav-height) - 30px);
 *     max-height: calc(var(--mainnavigation-nav-height) * .65);
 * `--mainnavigation-nav-height` is defined locally on `.navbar-mainnavigation`,
 * NOT on `:root`, with per-breakpoint values (70 / 100 / 110 px) inside media
 * queries — a `:root` override therefore has no effect, the local definition
 * always wins. The 180×100-px BK-Beckum logo ends up at ~46–71 px.
 *
 * bootstrap_package 11.0.x had fixed `.navbar-brand { height: 100px/130px }`
 * with no `max-height` on the logo image — the PNG kept its native 100 px.
 *
 * Restore that behaviour: lift the nav-height variable on the actual carrier
 * element (`.navbar-mainnavigation`) for each breakpoint, and force the img
 * max-height with sufficient specificity to beat the theme rule.
 */
.navbar-mainnavigation {
    --mainnavigation-nav-height: 150px;
    --mainnavigation-link-font-size: 1.125rem;
}
@media (min-width: 768px)  { .navbar-mainnavigation { --mainnavigation-nav-height: 150px; } }
@media (min-width: 992px)  { .navbar-mainnavigation { --mainnavigation-nav-height: 150px; } }
@media (min-width: 1200px) { .navbar-mainnavigation { --mainnavigation-nav-height: 150px; } }
@media (min-width: 1400px) { .navbar-mainnavigation { --mainnavigation-nav-height: 150px; } }

/*
 * bootstrap_package 16 koppelt die Navbar-Höhe an `--mainnavigation-link-height`
 * (Padding * 2 + line-height * font-size der Menü-Links, ~30-50 px), NICHT an
 * `--mainnavigation-nav-height` (das nur die max-height des Logo-Bildes setzt).
 * Folge: das Logo (100 px hoch) ragt mit dem theme-eigenen
 *     position: relative; top: 50%; transform: translate(0,-50%)
 * aus dem winzigen .navbar-brand-Container heraus, kollidiert mit dem Header-
 * Oberrand und wird vom Inhalt darunter überlappt.
 *
 * Fix: Navbar UND .navbar-brand bekommen explizite min-height vom Logo + Puffer,
 * und das Image wird im Flow gehalten (kein -50% transform mehr).
 */
.navbar-mainnavigation,
#page-header.navbar-mainnavigation,
.navbar-mainnavigation .container {
    min-height: var(--mainnavigation-nav-height);
}
.navbar-mainnavigation .navbar-brand,
.navbar-mainnavigation .navbar-brand-image {
    height: auto;
    min-height: var(--mainnavigation-nav-height);
    display: flex;
    align-items: center;
    justify-content: center;
}
#page-header .navbar-brand-image img,
.navbar-mainnavigation .navbar-brand-image img {
    position: static;
    top: auto;
    transform: none;
    max-height: 100px;
}

/*
 * Dropdown menu fixes — restore v11.0.x behaviour that bootstrap_package 14.0.7
 * dropped wholesale.
 *
 * 1) Hover-trigger for dropdowns: 11.0.x shipped a jQuery-based handler
 *    (`bootstrap.navbar.js`) that opened the submenu on mouseenter for any
 *    `<li class="dropdown-hover">`. 14.0.7 ships a vanilla-JS navbar.js
 *    without that block; Bootstrap 5 only supports click-trigger. Re-add
 *    pure-CSS hover trigger for the >=992 px breakpoint (desktop).
 *
 * 2) Dropdown-toggle arrows: 11.0.x suppressed `.dropdown-toggle::after`
 *    inside `.navbar-mainnavigation` (was visible only on mobile burger).
 *    14.0.7 lost that suppression — arrows now appear on every link.
 *
 * 3) Menu centring: 11.0.x had no explicit justify-content, but the layout
 *    (flex-direction:row + the larger logo container) made the menu read as
 *    centred. With the heavier 150-px logo here, force `justify-content:
 *    center` on the link bar so it sits visually balanced.
 */
@media (min-width: 992px) {
    .navbar-mainnavigation .nav-item.dropdown.dropdown-hover:hover > .dropdown-menu {
        display: block;
    }
    .navbar-mainnavigation .navbar-nav {
        justify-content: center;
    }
}

.navbar-mainnavigation .dropdown-toggle::after,
.navbar-mainnavigation .nav-link.dropdown-toggle::after {
    display: none;
}
/* keep arrow on the mobile burger if/when navbar collapses */
@media (max-width: 991.98px) {
    .navbar-mainnavigation .nav-link.dropdown-toggle::after {
        display: inline-block;
    }
}

/*
 * Link underlines: Bootstrap 4 (production) defaulted to
 *     a { text-decoration: none } / a:hover { text-decoration: underline }
 * Bootstrap 5 (bootstrap_package 16+ on TYPO3 13) reverses this:
 *     a { text-decoration: underline }
 * Restore the v11/v12 hover-only behaviour for body content.
 * Scoped to #page-content so it doesn't accidentally re-style buttons in nav
 * or skiplinks which legitimately have underlines.
 */
#page-content a,
#page-content a:link,
#page-content a:visited {
    text-decoration: none;
}
#page-content a:hover,
#page-content a:focus {
    text-decoration: underline;
}

/*
 * Headings: Bootstrap 5 (bootstrap_package 16) uses fluid responsive sizes
 *     h1 { font-size: calc(1.325rem + 0.9vw); }
 *     h2 { font-size: calc(1.3rem + 0.6vw); }
 *     h3 { font-size: calc(1.275rem + 0.3vw); }
 * Bootstrap 4 (production) had a PROGRESSIVE size ladder via Media Queries
 * (`$enable-responsive-font-sizes: true` plus `font-size-base` Multiplier):
 *     default      h1 2rem    h2 1.75rem   h3 1.5rem
 *     >= 768px     h1 2.2rem  h2 1.925rem  h3 1.65rem
 *     >= 992px     h1 2.4rem  h2 2.1rem    h3 1.8rem
 *     >= 1200px    h1 2.6rem  h2 2.275rem  h3 1.95rem
 * Reproduce the production ladder so frame headlines wie "Aktuelles" sich
 * progressiv mit dem Viewport vergrößern statt fluid zu schrumpfen.
 * h4-h6 sind in BS5 schon fixed, kein Override nötig.
 */
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.5rem; }
@media (min-width: 768px) {
    h1, .h1 { font-size: 2.2rem; }
    h2, .h2 { font-size: 1.925rem; }
    h3, .h3 { font-size: 1.65rem; }
}
@media (min-width: 992px) {
    h1, .h1 { font-size: 2.4rem; }
    h2, .h2 { font-size: 2.1rem; }
    h3, .h3 { font-size: 1.8rem; }
}
@media (min-width: 1200px) {
    h1, .h1 { font-size: 2.6rem; }
    h2, .h2 { font-size: 2.275rem; }
    h3, .h3 { font-size: 1.95rem; }
}

/*
 * Navbar dropdown breite: BS4 hatte `dropdown-menu { min-width: 10rem }` +
 * `dropdown-item { white-space: nowrap }` — Dropdown wuchs passend zum längsten
 * Item-Text und blieb einzeilig. BS5 / bootstrap_package 16 setzt im Default
 * `navbar-mainnavigation .dropdown-menu { width: 100% }` (also Top-Level-Nav-
 * Container-Breite ~12em) und nimmt `nowrap` aus `dropdown-item` weg → längere
 * Texte wie "Dualer Studiengang Maschinenbau (FH Münster)" oder "Weiterbildung,
 * Bachelor Professional" ragen weit über den Hintergrund hinaus.
 *
 * Die Site hat keine `nav-style-simple` Klasse (die im BS5-Theme `width: auto`
 * setzen würde) → wir zwingen das Verhalten per Override zurück.
 */
.navbar-mainnavigation .dropdown-menu {
    width: auto;
    min-width: 10rem;
}
.navbar-mainnavigation .dropdown-item {
    white-space: nowrap;
}

/*
 * Language menu — soll im Header NICHT sichtbar sein (steht nur im Footer).
 * `all.css` hat `.footer-language { display: none }`, das wird in BS5/bp16
 * vom Theme (bzw. einer anderen Regel) überschrieben oder ignoriert — auf
 * Unterseiten wie /interessen/abschluesse erscheint dann der "Deutsch"-Link
 * zwischen Logo und Menü. Hartes Verstecken nur innerhalb des Headers, das
 * Footer-Pendant bleibt sichtbar.
 */
#page-header .footer-language {
    display: none !important;
}

/*
 * Slider auf voller Breite — gilt für jede Seite, nicht nur die Home-Page.
 * Die Site sammelt den Slider via `lib.rightcontent.slide=-1` und zeigt ihn
 * auf jeder Unterseite. `#p31817 .slickdefault`-Scoping aus dem ursprünglichen
 * v11-Patch greift nur auf der Startseite — auf Unterseiten (z.B. id=31954)
 * fällt der Slider zurück in den Bootstrap-Container und wird damit kleiner.
 * Globaler `.slickdefault`-Scope statt page-spezifischer ID.
 */
.slickdefault .frame-container,
.slickdefault .frame-container-default,
.slickdefault .frame-group-container,
.slickdefault .frame-group-inner,
.slickdefault .frame-inner {
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}
.slickdefault .textpic-item,
.slickdefault .textpic-gallery,
.slickdefault .gallery-row,
.slickdefault .gallery-item,
.slickdefault figure.image,
.slickdefault picture {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.slickdefault picture > img,
.slickdefault figure.image > picture > img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

/*
 * Slider Höhe begrenzen — auf der Produktionsseite (BS4/bp <= 11.0.x) caps:
 *     .slickdefault         { max-height: 500px; overflow: hidden; }
 *     #p31817 .slickdefault { max-height: 70vh;  overflow: hidden; }
 * Ohne diese caps zieht der Slider die native Image-Höhe (2560x1201 →
 * ~900 px bei viewport ~1920 px breit), was deutlich höher als gewünscht ist.
 * Ich übernehme beide Regeln 1:1 — global 500 px cap, Homepage 70vh (responsiv,
 * passt sich kleinen Browser-Höhen an).
 */
.slickdefault {
    max-height: 500px;
    overflow: hidden;
}
#p31817 .slickdefault {
    max-height: 70vh;
    overflow: hidden;
}

/*
 * Shrink-on-scroll for the sticky header.
 *
 * bootstrap_package ships `bootstrap.stickyheader.min.js` (both 11.0.x and
 * 14.0.7) that toggles a `.navbar-transition` class on `.navbar-fixed-top`
 * after the user scrolls past ~120-150 px. In 11.0.x the theme paired that
 * with explicit shrink rules:
 *     .navbar-transition .navbar-brand { height: 70px }
 *     .navbar-transition .navbar-brand-image img { max-height: 40px }
 * In 14.0.7 those rules are gone — `.navbar-transition` is now color-only.
 * Re-add the height/logo shrink so the header collapses on scroll like
 * production does.
 */
.navbar-mainnavigation.navbar-transition,
#page-header.navbar-transition.navbar-mainnavigation {
    --mainnavigation-nav-height: 80px;
}
#page-header.navbar-transition .navbar-brand-image img,
.navbar-mainnavigation.navbar-transition .navbar-brand-image img {
    max-height: 40px;
}

/* Smooth shrink animation. The transition lives on the carrier element and
 * on the logo image — the CSS-variable change alone wouldn't animate. */
#page-header.navbar-mainnavigation,
.navbar-mainnavigation .navbar-brand-image img {
    transition: padding 0.3s ease, max-height 0.3s ease, height 0.3s ease;
}

/*
 * News-Pagination: Custom-Partial unter
 * fileadmin/bkbeckum-2021/template/news/Partials/List/Pagination.html liefert
 * jetzt BS5-konformes Markup (.pagination .page-item .page-link). Hier nur ein
 * paar feine Anpassungen: Abstand zur Liste, leicht abgerundete Ecken und
 * Suppress des #page-content a {text-decoration:none}-Hover-Overrides der
 * unsere Pagination ebenfalls treffen würde.
 */
.news-pagination {
    margin: 2rem 0 1rem;
}
.news-pagination .pagination {
    gap: 0.25rem;
    margin-bottom: 0;
}
.news-pagination .page-link {
    border-radius: 0.375rem;
    min-width: 2.5rem;
    text-align: center;
    color: #495057;
    border-color: #dee2e6;
}
.news-pagination .page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}
.news-pagination .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}
#page-content .news-pagination a.page-link:hover,
#page-content .news-pagination a.page-link:focus {
    text-decoration: none;
    background-color: #e9ecef;
    color: #0a58ca;
}