/*
 * Bootstrap-5-Kompatibilität für das bestehende Bootstrap-3-Template
 * N!-Region 5 G, 27.08.2026
 */

.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12 {
  flex: 0 0 auto;
}

.col-xs-1 {
  width: 8.33333333%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-12 {
  width: 100%;
}

/* Eine spätere col-xs-Regel darf responsive Bootstrap-5-Spalten nicht überstimmen. */
@media (min-width: 576px) {
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-12 {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .col-md-1 {
    width: 8.33333333%;
  }
  .col-md-2 {
    width: 16.66666667%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-12 {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .col-lg-1 {
    width: 8.33333333%;
  }
  .col-lg-2 {
    width: 16.66666667%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-8 {
    width: 66.66666667%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

.container,
.row {
  --bs-gutter-x: 30px;
}

.row > [class^="col-"],
.row > [class*=" col-"] {
  position: relative;
  min-height: 1px;
}

header .nav.menu,
footer .nav.menu,
footer .nav {
  display: block;
  flex-wrap: initial;
}

/* Bootstrap 3-Grundgeometrie für Joomla-Menülinks. */
.nav > li > a {
  position: relative;
  display: block;
}

.navbar-toggle {
  position: relative;
  display: none;
  float: right;
  padding: 9px 10px;
  border: 1px solid transparent;
}

.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background-color: #fff;
}

.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}

@media (max-width: 1024px) {
  .navbar-toggle {
    display: block;
  }
}

@media (min-width: 1025px) {
  #mainMenue.collapse {
    display: block !important;
    visibility: visible;
  }

  /* Bootstrap 3-Geometrie: Der Pfeil darf die Elternzeile nicht erhöhen. */
  header .menu > li.parent > .fa {
    line-height: 1;
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #111 !important;
  outline-offset: 3px;
}

.navbar-toggle:focus-visible,
.readmore:focus-visible,
.btn:focus-visible,
.visBtnCon input:focus-visible,
footer a:focus-visible {
  box-shadow:
    0 0 0 3px #fff,
    0 0 0 6px #111;
  outline: 0 !important;
}

img[src$="/n-region-karte.jpg"] {
  aspect-ratio: 97 / 66;
  height: auto;
}

img[src$="/n-region-5-g-verbund.jpg"] {
  aspect-ratio: 485 / 271;
  height: auto;
}

img[src$="/helden-gesucht-teaser.jpg"] {
  aspect-ratio: 485 / 430;
  height: auto;
}

.com-content-article__body h2,
.com-content-article__body h3 {
  overflow-wrap: anywhere;
  hyphens: auto;
}