/* Bootstrap 5 compatibility patch for the bootsnav sidebar navbar.
   Bootsnav (and this site's own navbar CSS) was built against Bootstrap 3's
   navbar, which is block/float based and auto-shows .navbar-collapse on
   desktop. Bootstrap 5's .navbar defaults to flex and never auto-shows the
   collapse without an explicit .navbar-expand-* class. These rules restore
   the old block-based layout and desktop-visible collapse behavior. */

nav.navbar.bootsnav,
nav.navbar.bootsnav .container,
nav.navbar.bootsnav .container-fluid {
  display: block;
}

/* Bootstrap 3's core CSS had a bare-tag rule
   ".nav>li>a{position:relative;display:block;padding:10px 15px}" that made
   any plain <a> inside .nav > li a full block (no .nav-link class needed).
   Bootstrap 5 replaced that pattern with a `.nav-link` class requirement;
   this site's nav links never got that class, so they now fall back to the
   browser default (inline). An inline link only applies its left padding to
   the first line, so multi-line labels like "Ergotherapie für Kinder" wrap
   with the second line flush left instead of aligned under the first.
   Restore the old block behavior. */
.nav > li > a {
  position: relative;
  display: block;
}

/* The sidebar's single grid column is marked col-lg-3 (bumped up from the
   original col-md-3, see the breakpoint-shift fix below). At >=992px
   Bootstrap 5's real grid math kicks in and sizes it to 25% of its row
   (~72px, since the row lives inside the already-narrow 260px sidebar) -
   it's the only column in that row and was always meant to be full width;
   under Bootstrap 3 the identical col-md-3 was masked by float/overflow
   quirks that no longer apply now that the clearfix below correctly
   contains the nav's floated menu. Force it back to full width. */
nav.bootsnav.navbar-sidebar .col-lg-3 {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

/* bootsnav.css floats its `ul.nav.navbar-nav` (old-school pre-flexbox navbar
   layout). Bootstrap 3's own core CSS silently contained that float via
   ".navbar-collapse:before/:after { content:''; display:table }
   .navbar-collapse:after { clear:both }" (a standard clearfix baked into the
   navbar component). Bootstrap 5 has no such rule since its navbar never
   floats anything. Without it, .navbar-collapse collapses to 0 height and
   the nested <nav> (which also got display:block above) shrinks to its own
   min-height, leaving a small stray white/shadowed box sitting behind the
   still-visible (but now unconstrained) floated menu. Restore the clearfix. */
.navbar-collapse::before,
.navbar-collapse::after {
  content: "";
  display: table;
}
.navbar-collapse::after {
  clear: both;
}

/* Same missing-clearfix problem as .navbar-collapse above, but for
   .navbar-header: Bootstrap 3 grouped both selectors in one shared clearfix
   rule (".navbar-header:before/:after, .navbar-collapse:before/:after
   { content:''; display:table } .navbar-header:after, .navbar-collapse:after
   { clear:both }"). At mobile widths bootsnav.css floats the hamburger
   button ("nav.navbar.bootsnav .navbar-toggle { float:right }"); without a
   clearfix on its container, that float is never contained. Any later
   element that establishes its own block formatting context (like
   .title-hero-bg, which has overflow:hidden) then shrinks itself to avoid
   overlapping the still-active float instead of ignoring it - which is what
   was leaving a white gap on the right edge of the mobile hero background,
   and pushed the toggle icon's own box out of its intended vertical spot. */
.navbar-header::before,
.navbar-header::after {
  content: "";
  display: table;
}
.navbar-header::after {
  clear: both;
}

/* Bootstrap 3 auto-showed .navbar-collapse on screens >= 768px regardless of
   the .in/.show toggle state; Bootstrap 5 has no such default. Restore it
   above this site's own mobile-menu breakpoint (max-width:991px). */
@media (min-width: 992px) {
  nav.bootsnav .navbar-collapse.collapse {
    display: block !important;
  }
}

/* bootsnav.css itself carries a hardcoded
   "nav.navbar.bootsnav .navbar-collapse.collapse { display: none !important; }"
   at max-width:992px, written for Bootstrap 3 (which fought back with its own
   !important rule for the toggled-open .in state). Bootstrap 5's Collapse
   component only adds a .show class without !important, so it loses to
   bootsnav's blanket !important hide. Restore the toggled-open state with a
   more specific !important rule of our own. */
@media (max-width: 992px) {
  nav.navbar.bootsnav .navbar-collapse.collapse.show {
    display: block !important;
  }
}

/* nav.navbar.bootsnav .navbar-toggle carries a "top:5px" relative nudge
   (unconditional, meant to baseline-align it against a logo) plus a
   "margin-top:10px" from the same mobile float rule that needed the
   .navbar-header clearfix above. This site's sidebar header has no logo to
   align against, so both offsets just push the icon down with nothing to
   balance them - 15px combined, which read as "too low". Neutralizing both
   centers it exactly in .navbar-header's now-correctly-sized box. */
@media (max-width: 992px) {
  nav.navbar.bootsnav .navbar-toggle {
    top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Bootstrap 5 added ".row > * { width:100%; max-width:100% }" - a catch-all
   grid-child default that Bootstrap 3 never had (BS3's row/col grid was
   float-based and only ever touched actual .col-* children). This site puts
   a few plain, non-grid .infobox divs directly inside a .row (no .col-*
   wrapper). Under BS5 .row is also display:flex, so .infobox is a flex
   item; the width:100% from that catch-all rule is actually what keeps it
   sized sanely (stripping it lets the item fall back to content-based
   flex-basis sizing instead, blowing up to its unwrapped text width - far
   worse). The real conflict is .infobox's own "margin:15px": combined with
   a border-box that's already 100% of the row's content width, the
   horizontal margin has nowhere to go but past the edge, overflowing the
   viewport on mobile. Drop just the horizontal margin so the 100%-wide
   border-box fits exactly; keep the vertical margin for spacing between
   stacked boxes. */
.row > .infobox {
  margin-left: 0;
  margin-right: 0;
}

/* Bootstrap 3's core CSS had
   "input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}" -
   a reset specifically for checkboxes/radios, separate from and overriding
   master.css's own generic "input,textarea,select{padding:8px 15px}" (meant
   for text fields). Bootstrap 5 has no equivalent bare-attribute-selector
   reset (its checkbox styling only applies via the .form-check-input class,
   and never zeroes padding for checkboxes in general). Without it, the
   contact form's checkbox - which sets an explicit inline "width:16px;
   height:16px" - inherits that 15px/8px text-field padding too. With
   box-sizing:border-box, padding that's larger than the explicit width
   doesn't clip; the browser expands the box to fit it instead, ballooning
   the checkbox to ~32x18px and crowding the label text next to it. Restore
   Bootstrap 3's checkbox/radio padding reset. */
input[type="checkbox"],
input[type="radio"] {
  padding: 0;
}

/* Bootstrap 5's reboot sets `:root { scroll-behavior: smooth }` (new in 5.2+;
   Bootstrap 3 never touched this). It fights master.js's own JS-driven
   "back to top" animation ($('body,html').animate({scrollTop:0})): each
   incremental write from jQuery's animation loop retriggers a competing
   native smooth-scroll, and the two stall each other out so the page never
   actually reaches the top. Restore the old instant-scrollTop behavior so
   jQuery's animation is the only thing driving the scroll. */
:root {
  scroll-behavior: auto !important;
}