@charset "utf-8";

/* Benutzerdefinierte CSS-Eigenschaften (Variablen) */
:root {
  /* WOB Farben - RGB-Werte */
  --wob-color-weiss-rgb: 255, 255, 255;
  --wob-color-schwarz-rgb: 0, 0, 0;
  --wob-color-grau-rgb: 135, 135, 135;
  --wob-color-blau-rgb: 33, 181, 234;
  --wob-color-gruen-rgb: 200, 212, 0;
  --wob-color-beere-rgb: 215, 37, 67;
  --wob-color-silber-rgb: 181, 182, 183;
  --wob-color-magenta-rgb: 230, 0, 126;
  --wob-color-orange-rgb: 239, 125, 0;
  --wob-color-flieder-rgb: 101, 94, 155;
  --wob-color-sonne-rgb: 255, 207, 46;
  --wob-color-enzian-rgb: 46, 85, 165;
  --wob-color-jade-rgb: 0, 130, 141;
  --wob-color-taupe-rgb: 175, 169, 157;

  /* WOB Farben */
  --wob-color-weiss: rgb(var(--wob-color-weiss-rgb));
  --wob-color-schwarz: rgb(var(--wob-color-schwarz-rgb));
  --wob-color-grau: rgb(var(--wob-color-grau-rgb));
  --wob-color-blau: rgb(var(--wob-color-blau-rgb));
  --wob-color-gruen: rgb(var(--wob-color-gruen-rgb));
  --wob-color-beere: rgb(var(--wob-color-beere-rgb));
  --wob-color-silber: rgb(var(--wob-color-silber-rgb));
  --wob-color-magenta: rgb(var(--wob-color-magenta-rgb));
  --wob-color-orange: rgb(var(--wob-color-orange-rgb));
  --wob-color-flieder: rgb(var(--wob-color-flieder-rgb));
  --wob-color-sonne: rgb(var(--wob-color-sonne-rgb));
  --wob-color-enzian: rgb(var(--wob-color-enzian-rgb));
  --wob-color-jade: rgb(var(--wob-color-jade-rgb));
  --wob-color-taupe: rgb(var(--wob-color-taupe-rgb));

  /* WOB Farben um 20% verdunkelt (100% Farbe + 20% Schwarz) */
  --wob-color-weiss-shade-20: color-mix(in srgb, var(--wob-color-weiss) 100%, black 20%);
  --wob-color-schwarz-shade-20: color-mix(in srgb, var(--wob-color-schwarz) 100%, black 20%);
  --wob-color-grau-shade-20: color-mix(in srgb, var(--wob-color-grau) 100%, black 20%);
  --wob-color-blau-shade-20: color-mix(in srgb, var(--wob-color-blau) 100%, black 20%);
  --wob-color-gruen-shade-20: color-mix(in srgb, var(--wob-color-gruen) 100%, black 20%);
  --wob-color-beere-shade-20: color-mix(in srgb, var(--wob-color-beere) 100%, black 20%);
  --wob-color-silber-shade-20: color-mix(in srgb, var(--wob-color-silber) 100%, black 20%);
  --wob-color-magenta-shade-20: color-mix(in srgb, var(--wob-color-magenta) 100%, black 20%);
  --wob-color-orange-shade-20: color-mix(in srgb, var(--wob-color-orange) 100%, black 20%);
  --wob-color-flieder-shade-20: color-mix(in srgb, var(--wob-color-flieder) 100%, black 20%);
  --wob-color-sonne-shade-20: color-mix(in srgb, var(--wob-color-sonne) 100%, black 20%);
  --wob-color-enzian-shade-20: color-mix(in srgb, var(--wob-color-enzian) 100%, black 20%);
  --wob-color-jade-shade-20: color-mix(in srgb, var(--wob-color-jade) 100%, black 20%);
  --wob-color-taupe-shade-20: color-mix(in srgb, var(--wob-color-taupe) 100%, black 20%);

  /* WOB Farben um 40% verdunkelt (100% Farbe + 40% Schwarz) */
  --wob-color-weiss-shade-40: color-mix(in srgb, var(--wob-color-weiss) 100%, black 40%);
  --wob-color-schwarz-shade-40: color-mix(in srgb, var(--wob-color-schwarz) 100%, black 40%);
  --wob-color-grau-shade-40: color-mix(in srgb, var(--wob-color-grau) 100%, black 40%);
  --wob-color-blau-shade-40: color-mix(in srgb, var(--wob-color-blau) 100%, black 40%);
  --wob-color-gruen-shade-40: color-mix(in srgb, var(--wob-color-gruen) 100%, black 40%);
  --wob-color-beere-shade-40: color-mix(in srgb, var(--wob-color-beere) 100%, black 40%);
  --wob-color-silber-shade-40: color-mix(in srgb, var(--wob-color-silber) 100%, black 40%);
  --wob-color-magenta-shade-40: color-mix(in srgb, var(--wob-color-magenta) 100%, black 40%);
  --wob-color-orange-shade-40: color-mix(in srgb, var(--wob-color-orange) 100%, black 40%);
  --wob-color-flieder-shade-40: color-mix(in srgb, var(--wob-color-flieder) 100%, black 40%);
  --wob-color-sonne-shade-40: color-mix(in srgb, var(--wob-color-sonne) 100%, black 40%);
  --wob-color-enzian-shade-40: color-mix(in srgb, var(--wob-color-enzian) 100%, black 40%);
  --wob-color-jade-shade-40: color-mix(in srgb, var(--wob-color-jade) 100%, black 40%);
  --wob-color-taupe-shade-40: color-mix(in srgb, var(--wob-color-taupe) 100%, black 40%);
}

html {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  overflow-y: auto;
  height: 100%;
  font-family: "Arial Narrow", Arial, sans-serif;
  padding: 0px !important;
  margin: 0px !important;
  font-size: 14px;
  direction: ltr;
  background: transparent;
  background-attachment: fixed;
  color: var(--wob-color-weiss);
  -webkit-overflow-scrolling: touch;
}

body.no-scroll {
  overflow: hidden !important;
}

a {
  color: var(--wob-color-blau);
}

a:hover {
  color: var(--wob-color-blau-shade-20);
  text-decoration: underline;
}

.nav-tabs .nav-link {
  font-weight: bold;
}

/* Seitenabstand */
.wob-page-margin {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Weißer Hintergrund */
.wob-background-white {
  background-color: var(--wob-color-weiss);
}

/* "Blauer" Hintergrund */
.wob-background-blue {
  /* Old browsers */
  background: #0f414b;
  /* FF3.6+ */
  background: -moz-linear-gradient(top, #0f414b 0%, #1e8296 30%, #1e8296 70%, #0f414b 100%);
  /* Chrome, Safari4+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0f414b), color-stop(30%, #1e8296), color-stop(70%, #1e8296), color-stop(100%, #0f414b));
  /* Chrome10+,Safari5.1+ */
  background: -webkit-linear-gradient(top, #0f414b 0%, #1e8296 30%, #1e8296 70%, #0f414b 100%);
  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #0f414b 0%, #1e8296 30%, #1e8296 70%, #0f414b 100%);
  /* IE10+ */
  background: -ms-linear-gradient(top, #0f414b 0%, #1e8296 30%, #1e8296 70%, #0f414b 100%);
  /* W3C */
  background: linear-gradient(to bottom, #0f414b 0%, #1e8296 30%, #1e8296 70%, #0f414b 100%);
  /* IE6-9 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f414b', endColorstr='#0f414b', GradientType=0);
}

/* Hintergrundbild */
.wob-background-image {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-image: url(../img/wallpaper/rathaus.jpg);
}

/* WOB-BLAU */
.wob_blau,
.wob_blau a {
  color: var(--wob-color-blau);
}

.wob_blau a:hover {
  color: var(--wob-color-blau-shade-20);
}

/* WOB-GRÜN */
.wob_gruen,
.wob_gruen a {
  color: var(--wob-color-gruen);
}

.wob_gruen a:hover {
  color: var(--wob-color-gruen-shade-20);
}

/* WOB-Beere */
.wob_beere,
.wob_beere a {
  color: var(--wob-color-beere);
}

.wob_beere a:hover {
  color: var(--wob-color-beere-shade-20);
}

/********************
 * Kopfzeile
 ********************/

/* Kopfzeile: WOLFSBURG und Logo */
.wob-header-wob {
  margin-bottom: 40px;
}

/* Kopfzeile: WOLFSBURG */
.wob-header-wob h6 {
  font-size: 22px;
  margin: 10px 0 0 4px;
}

/* Kopfzeile: Links */
.wob-header-wob a,
.wob-header-wob a:hover,
.wob-header-wob a:focus {
  color: var(--wob-color-weiss);
  text-decoration: none;
}

/* Kopfzeile: Titel */
.wob-header-title {
  padding-left: 40px;
  padding-right: 40px;
  font-weight: bold;
}

/* Kopfzeile: Titel-Links */
.wob-header-title a,
.wob-header-title a:hover,
.wob-header-title a:focus {
  color: var(--wob-color-weiss);
  text-decoration: none;
}

/********************
 * Textinhalt
 ********************/

/* Textinhalt */
.wob-content-text {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;
  color: var(--wob-color-schwarz);
}

/********************
 * Kacheln
 ********************/

/* Vorschaubild */
.wob-thumbnail {
  max-width: 100px;
  min-width: 100px;
  width: 100px;
  height: 100px;
}

/* Spalte (Kachel) */
.wob-col {
  /* Linkeigenschaften (<a>) entfernen */
  text-decoration: none;
  color: var(--wob-color-schwarz);
}

/* Mauszeiger berührt eine Spalte (Kachel) */
.wob-col:hover {
  background-color: #f8f9fa;
  /* Linkeigenschaften (<a>) entfernen */
  text-decoration: none;
  color: black;
}

/* Fokus auf einer Spalte (Kachel), zum Beispiel durch die Tabulatortaste */
.wob-col:focus {
  background-color: #f8f9fa;
  /* Linkeigenschaften (<a>) entfernen */
  text-decoration: none;
  color: black;
}

/* Absätze innerhalb einer Spalte (Kachel) */
.wob-col p {
  margin-bottom: 0;
}

/* Spalte (Kachel) auf ganzer Seitenbreite */
.wob-col-full-width {
  flex-basis: 100% !important;
  max-width: 100% !important;
}

/* Titel der Kategorie */
.wob-category-title {
  width: 100%;
}

/********************
 * Kennzeichnung
 ********************/

.wob-badge {
  position: absolute;
  right: 0px;
  top: 0px;
  overflow: hidden;
  width: 75px;
  height: 75px;
}

.wob-badge span {
  color: var(--wob-color-weiss);
  text-align: center;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background-color: var(--wob-color-blau);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 10px;
  right: -30px;
}

/********************
 * Fußzeile
 ********************/

/* Fußzeile: Links */
.wob-footer a,
.wob-footer a:hover,
.wob-footer a:focus {
  color: white;
}

/* Fußzeile: Mauszeiger berührt einen Link */
.wob-footer a:hover {
  text-decoration: underline;
}

/********************
 * Anpassungen an Bildschirmgröße
 ********************/

/* Bootstrap: Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
  /* Kopfzeile */
  .wob-header-title {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  /* Textinhalt */
  .wob-content-text {
    padding-top: 15px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .wob-content-col {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

/* Bootstrap: Large devices (desktops, less than 1200px) */
@media (max-width: 1200px) {
  .container {
    max-width: 100% !important;
  }
}

/* Bootstrap: Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* Größe einer Spalte (Kachel) minimal verkleinern,
     damit eine Lücke zwischen den Spalte (Kachel) entsteht */
  .wob-col {
    flex-basis: 49% !important;
    max-width: 49% !important;
  }

  /* Spalte (Kachel) auf ganzer Seitenbreite */
  .wob-col-full-width {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* Bootstrap: Large devices (desktops, 992px and up) */
/* und mindesthöhe von 992px */
@media (min-width: 992px) and (min-height: 992px) {
  /* Textinhalt */
  .wob-content-text {
    min-height: 700px !important;
  }
}