/**
 * Bootstrap 3 compatibility layer.
 *
 * Page content stored in the database (node bodies) and klingtgut.css were
 * written for Bootstrap 3. This file re-creates the few Bootstrap 3 rules
 * they depend on, on top of Bootstrap 5.
 *
 * Bootstrap 3 breakpoints: xs < 768px, sm >= 768px, md >= 992px, lg >= 1200px.
 */

/* Base typography and links, as in Bootstrap 3. */
body {
  line-height: 1.42857143;
}
a {
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.1;
}
h1, h2, h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
h4, h5, h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
p {
  margin: 0 0 10px;
}
.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
}

/* Container widths of Bootstrap 3. */
@media (min-width: 768px) {
  .container { max-width: 750px; }
}
@media (min-width: 992px) {
  .container { max-width: 970px; }
}
@media (min-width: 1200px) {
  .container { max-width: 1170px; }
}

/* Bootstrap 3 grid for page content.
   Stored content uses Bootstrap 3 columns, partly without a .row wrapper
   (e.g. the front page). Bootstrap 3 columns are floats and work without a
   row; Bootstrap 5 columns only line up inside a flex .row and use different
   breakpoints (Bootstrap 5 md = 768px, Bootstrap 3 md = 992px). Inside
   .content, the Bootstrap 3 behaviour is restored. */
.content [class*="col-xs-"],
.content [class*="col-sm-"],
.content [class*="col-md-"],
.content [class*="col-lg-"] {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}
.content .row {
  margin-right: -15px;
  margin-left: -15px;
}
.content .row::after,
.content .front-content::after {
  display: table;
  clear: both;
  content: "";
}

.content [class*="col-xs-"] { float: left; }
.content .col-xs-1 { width: 8.33333%; }
.content .col-xs-2 { width: 16.6667%; }
.content .col-xs-3 { width: 25%; }
.content .col-xs-4 { width: 33.3333%; }
.content .col-xs-5 { width: 41.6667%; }
.content .col-xs-6 { width: 50%; }
.content .col-xs-7 { width: 58.3333%; }
.content .col-xs-8 { width: 66.6667%; }
.content .col-xs-9 { width: 75%; }
.content .col-xs-10 { width: 83.3333%; }
.content .col-xs-11 { width: 91.6667%; }
.content .col-xs-12 { width: 100%; }

@media (min-width: 768px) {
  .content [class*="col-sm-"] { float: left; }
  .content .col-sm-1 { width: 8.33333%; }
  .content .col-sm-2 { width: 16.6667%; }
  .content .col-sm-3 { width: 25%; }
  .content .col-sm-4 { width: 33.3333%; }
  .content .col-sm-5 { width: 41.6667%; }
  .content .col-sm-6 { width: 50%; }
  .content .col-sm-7 { width: 58.3333%; }
  .content .col-sm-8 { width: 66.6667%; }
  .content .col-sm-9 { width: 75%; }
  .content .col-sm-10 { width: 83.3333%; }
  .content .col-sm-11 { width: 91.6667%; }
  .content .col-sm-12 { width: 100%; }
}

@media (min-width: 992px) {
  .content [class*="col-md-"] { float: left; }
  .content .col-md-1 { width: 8.33333%; }
  .content .col-md-2 { width: 16.6667%; }
  .content .col-md-3 { width: 25%; }
  .content .col-md-4 { width: 33.3333%; }
  .content .col-md-5 { width: 41.6667%; }
  .content .col-md-6 { width: 50%; }
  .content .col-md-7 { width: 58.3333%; }
  .content .col-md-8 { width: 66.6667%; }
  .content .col-md-9 { width: 75%; }
  .content .col-md-10 { width: 83.3333%; }
  .content .col-md-11 { width: 91.6667%; }
  .content .col-md-12 { width: 100%; }
}

@media (min-width: 1200px) {
  .content [class*="col-lg-"] { float: left; }
  .content .col-lg-1 { width: 8.33333%; }
  .content .col-lg-2 { width: 16.6667%; }
  .content .col-lg-3 { width: 25%; }
  .content .col-lg-4 { width: 33.3333%; }
  .content .col-lg-5 { width: 41.6667%; }
  .content .col-lg-6 { width: 50%; }
  .content .col-lg-7 { width: 58.3333%; }
  .content .col-lg-8 { width: 66.6667%; }
  .content .col-lg-9 { width: 75%; }
  .content .col-lg-10 { width: 83.3333%; }
  .content .col-lg-11 { width: 91.6667%; }
  .content .col-lg-12 { width: 100%; }
}

/* Responsive visibility helpers. */
.hidden {
  display: none !important;
}
@media (max-width: 767.98px) {
  .visible-xs { display: block !important; }
  .hidden-xs { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .visible-sm { display: block !important; }
  .hidden-sm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .visible-md { display: block !important; }
  .hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
  .visible-lg { display: block !important; }
  .hidden-lg { display: none !important; }
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

/* Navbar: Bootstrap 3 float-based layout, which klingtgut.css builds on. */
#navbar.navbar {
  display: block;
  min-height: 50px;
  margin-bottom: 20px;
  padding: 0 15px;
}
#navbar .navbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#navbar .navbar-toggler {
  margin: 8px 0;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.navbar-nav {
  margin: 7.5px -15px;
}
.navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
@media (min-width: 768px) {
  #navbar .navbar-header {
    float: left;
    display: block;
  }
  #navbar .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  #navbar .navbar-nav {
    display: block;
    float: left;
    margin: 0;
  }
  #navbar .navbar-nav > li {
    float: left;
  }
  #navbar .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #navbar .navbar-right {
    float: right !important;
    margin-right: -15px;
  }
  #navbar::after {
    display: table;
    clear: both;
    content: "";
  }
}