/**
 * Ladereihenfolge
 * =======================================
 * - Typo3-Styles
 * - Bootstrap 4.5.2
 * - rte.css
 * - page.css
 */

/**
 * Konstanten
 * =======================================
 */

:root {
  /* page size */
  --page-max-width: 90rem; /* TODO: 90rem */

  /* background colors */
  --color-bg-boxes: #f0f0f0;
  --color-bg-footer: #f0f0f0;
  --color-bg-page: #ffffff;
  --color-bg-background: #f7f7f7;
  --color-bg-mainnav-active: #f0f0f0;

  /* container size */
  --container-x-padding: 4rem;
  --container-x-padding-sm: 1rem; /* small displays */

  /* CTA */
  --color-cta: #0065bd;
  --cta-padding-bottom: 6rem; /* damit genug Platz für den Button ist */

  /* font colors */
  --color-font-dark: #282828;
  --color-font-middle: #737373;
  --color-font-highlight: #0065bd;
  --color-font-light: #b4b4b4;

  /* box padding and distances */
  --box-padding: 1rem;
  --box-margin-bottom: 1rem;
}

/**
    Font
 */
body {
  font-family: "Source Sans Pro", sans-serif;
}

/**
 * Grobstruktur der Seite
 * =======================================
 */

body {
  background-color: var(--color-bg-background);
  font-size: 1.3rem;
}

#pagewrap {
  /* erstes element im body */
  max-width: var(--page-max-width);
  background-color: var(--color-bg-page);
  margin: 0 auto;
}

.container {
  padding-left: var(--container-x-padding);
  padding-right: var(--container-x-padding);
  margin: 0;
}
.container {
  max-width: unset !important;
}

.container .container {
  /* verschachtelte container */
  padding-left: 0;
  padding-right: 0;
}

#footer {
  background-color: var(--color-bg-footer);
}

/**
 * Header
 * =======================================
 */

#header .h1 {
  margin: 0;
}

#header .h1 a {
  font-size: 2rem;
  font-weight: normal;
  color: var(--color-font-dark);
  text-decoration: none;
}

#header .h2 {
  margin: 0;
  font-size: 1.4rem;
}

#header .h2 a {
  font-size: 1.4rem;
  font-weight: normal;
  color: var(--color-font-dark);
  text-decoration: none;
}

.navbar {
  padding: 0;
}

#metanavi .nav-link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-font-middle);
}

#mainnavi .nav-link {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-font-dark);
  line-height: 2.1;
}

#mainnavi .nav-item.active .nav-link {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-font-highlight);
  background-color: var(--color-bg-mainnav-active);
}

.breadcrumb {
  padding: 1.2rem 0; /*xxx*/
  /*padding: 0.75rem 0;*/
  font-size: 1.1rem;
  font-weight: normal;
  font-style: italic;
  color: var(--color-font-highlight);
}

#navtitle {
  font-size: 2rem;
  font-weight: normal;
  color: var(--color-font-dark);
  padding: 2rem 0 4.6rem 0;
  margin: 0;
}

/**
 * Footer
 * =======================================
 */

#footer,
#footer a {
  font-size: 1.1rem;
  font-weight: normal;
}

#footer .footer_logo {
  background: #fff;
  padding: 1rem;
}

#footer h4 {
  font-size: 1.1rem;
  font-weight: 600;
}

/**
 * Frames um Inhaltselemente
 * =======================================
 */

.frame-default {
  /* default = Grau mit Rand */
  background: var(--color-bg-boxes);
  margin-bottom: var(--box-margin-bottom);
  padding: var(--box-padding);
}

.frame-gray {
  /* gray   = Grau ohne Rand */
  background: var(--color-bg-boxes);
  margin-bottom: var(--box-margin-bottom);
}

.frame-border {
  /* border = Weiß mit Rand */
  background-color: transparent;
  margin-bottom: var(--box-margin-bottom);
  padding: var(--box-padding);
}

.frame-white {
  /* white  = Weiß ohne Rand */
  background-color: transparent;
  margin-bottom: var(--box-margin-bottom);
}

.card-body {
  /* bootstrap Card-Body */
  padding: var(--box-padding);
}

.frame-default .row,
.frame-gray .row,
.frame-border .row,
.frame-white .row {
  margin-left: 0;
  margin-right: 0;
}

/**
 * Typo3-spezifisches
 * =======================================
 */

.extbase-debugger {
  margin: 0;
  border-radius: 0;
  border-bottom: 3px solid #f00;
  position: relative;
  z-index: 1;
  width: 100%;
}

/* when something has "frame: none", it renders an <a> before itself... */
#main ._content > a {
  display: none !important;
}

/**
 * Pfeile
 * =======================================
 */

._arrow_right::after {
  display: inline-block;
  content: "";
  background: url(bootstrap-icons-1.0.0/chevron-right.svg);
  width: 2rem;
  height: 1rem;
  background-size: contain;
  background-position: bottom right;
  position: relative;
  bottom: -0.15rem;
  background-repeat: no-repeat;
}

/**
 * Contentelement "CTA"
 * =======================================
 */

.cta {
  background: var(--color-cta);
  padding-bottom: var(--cta-padding-bottom) !important;
  padding: var(--box-padding);
}

.cta ._title {
  margin: 0;
  padding: 0;
  color: white;

  font-size: 2rem;
  font-weight: normal;
}

.cta ._button {
  position: absolute;
  bottom: var(--box-padding);
  right: 0;
  width: 100%;
  text-align: right;
  padding: 0 var(--box-padding);
}

/**
 * Contentelement "Teaser"
 * ==========================================
 */

.card-title {
  margin: 0;
}

/**
 * Contentelement "Slider"
 * ==========================================
 */

#header .carousel {
  margin-bottom: 0;
}

#header .carousel-caption {
  bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/**
 * Contentelement "Text"
 * ==========================================
 */

.frame-type-text > h2,
.frame-type-text > h3 {
  margin: 0;
}

/**
 * Contentelement "Bild Link"
 * ==========================================
 */

.bild-link {
  position: relative;
}

.bild-link-a {
  text-decoration: none;
}

.bild-link-a .text-color-light {
  color: #f7f7f7;
  text-shadow: 0.07em 0 6px rgba(40, 40, 40, 0.4),
    0 0.07em 6px rgba(40, 40, 40, 0.4), -0.07em 0 6px rgba(40, 40, 40, 0.4),
    0 -0.07em 6px rgba(40, 40, 40, 0.4);
}

.bild-link-a:hover .text-color-light {
  color: #f7f7f7;
}

.bild-link-a .text-color-dark {
  color: var(--color-font-dark);
  text-shadow: 0.07em 0 6px rgba(247, 247, 247, 0.4),
    0 0.07em 6px rgba(247, 247, 247, 0.4),
    -0.07em 0 6px rgba(247, 247, 247, 0.4),
    0 -0.07em 6px rgba(247, 247, 247, 0.4);
}

.bild-link-a:hover .text-color-dark {
  color: var(--color-font-dark);
}

.bild-link > h2 {
  position: absolute;
  text-align: center;
  padding: 2rem;
  height: 100%;
  font-weight: 600;
}

/**
 * Contentelement "Kontakt"
 * ==========================================
 */

.contact {
  margin-bottom: 2rem;
}

.contact .wrapper {
  width: 50%;
  padding: 1rem;

}

.contact .title {
  margin: 1rem 0;
}

.contact  p {
  margin: 0;
  padding-bottom: 0.2rem;
}

.contact figure {
  margin: 0;
}

.contact .contact-img {
  border-radius: 50%;
  max-height: 250px;
  height: auto;
  max-width: 250px;
  width: 100%;
}

/**
 * Contentelement "Bild Schlagzeile"
 * =======================================
 */

 .bild-headline {
  position: relative;
}

.bild-headline .overlay-text {
  display: flex !important;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  width: 100%;
  padding-left: calc(1rem + 10vw);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.bild-headline .overlay-text .overlay-title {
  font-size: clamp(1rem, 3vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.1rem;
  color: white;
  padding: 0 1.5rem;
  background-color: rgb(140, 182, 95, 0.5);
  border-radius: 6px;
  animation: title 2s forwards ease;
  opacity: 0;
}

.bild-headline .overlay-text .overlay-subtitle {
  font-size: clamp(0.75rem, 1.5vw, 1.5rem);
  color: rgb(255, 255, 255, 0.8);
  padding: 0 1rem;
  margin-left: 2rem;
  background-color: rgb(0, 0, 0, 0.5);
  border-radius: 6px;
  animation: sub 2s forwards ease;
  opacity: 0;
}

@keyframes title {
  0% {
    transform: translate(100px) scale(0.7);
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes sub {
  0% {
    transform: translate(-100px, 30px) scale(0.7);
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/**
 * Contentelement "Text Link"
 * =======================================
 */
.text-link {
  margin-bottom: 16px;
  border-radius: 5px;
}

.text-link-a .bg-transparent {
  background-color: transparent;
}

.text-link-a .bg-colored {
  background: var(--color-cta);
  color: yellow;
}

.text-link-a:hover.bg-colored {
  color: yellow;
}


/**
 * Contentelement "Kalender"
 * =======================================
 */

.kspkalender {
  font-size: 1rem;
  font-weight: normal;
}

.kspkalender h4 {
  color: var(--color-font-highlight);
  width: 100%;
  font-size: 1.4rem;
  font-weight: 600;
}

.kspkalender ._large {
  font-size: 2.4rem;
  font-weight: 600;
}

.kspkalender._teaser .frame-default {
  padding: 0.5rem 1rem;
  margin-bottom: 0.25rem;
}

.kspkalender._teaser tr {
  border-bottom: 3px solid #ffffff;
}

.kspkalender._teaser td {
  padding: 0.5rem 1rem;
}

.kspkalender._teaser td._left {
  padding-right: 1.5rem;
  width: 80px;
}

.ksp-user-feedback {
  color: var(--color-font-highlight);
}

#kspideenboerse_ideenboerse label {
  margin-bottom: 0;
}

.tx-ksp-modules select,
.tx-ksp-modules option {
  font-family: "Source Sans Pro", Arial;
  font-size: 0.875rem;
}

.tx-ksp-modules option {
  font-family: "Source Sans Pro", Arial;
  font-size: 0.78rem;
}

/**
 * Etwas responsive...
 * =======================================
 */
@media (max-width: 576px) {
  /* entspricht var(--breakpoint-sm) */
  #metanavi .nav-link {
    font-size: 1.1rem;
  }

  .container {
    padding-left: var(--container-x-padding-sm);
    padding-right: var(--container-x-padding-sm);
  }

  .container .container {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Form tabbing */
.form-check input:focus + span,
.form-group .radio input:focus + span,
.form-group input[type="file"]:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

h6,
.h6 {
  font-size: 1.1rem;
  font-style: italic;
}

h2,
.h2 {
  font-size: 2rem;
}

.tx-ksp-modules .icon-link-ext-alt::before {
  color: var(--color-font-highlight);
}

#map {
  border: solid 1px var(--color-font-light);
}

a {
  color: var(--color-font-highlight);
}

.tx-ksp-modules .text-primary {
  color: var(--color-font-highlight) !important;
}

.tx-ksp-modules .text-muted {
  color: var(--color-font-middle) !important;
}

.btn-primary {
  background-color: var(--color-font-highlight);
  border-color: var(--color-font-highlight);
}

.tx-ksp-modules .table-th-underline th {
  text-decoration: underline;
  font-weight: normal;
}

.frame-type-textmedia .card {
  border-radius: 0;
  background-color: transparent;
  border: none;
}

.card figure,
.card-img-top figure {
  margin: 0;
  position: relative;
}

.card figcaption,
.card-img-top figcaption {
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.modal-body figcaption {
  text-align: center;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  width: 100%;
}

.card .video figcaption {
  position: initial;
  background-color: transparent;
}

/**
Video (Typo3 Extension gpdr_social
 */

.social-gdpr-youtube-video,
.social-gdpr-vimeo-video,
.social-gdpr-google-maps,
.social-gdpr-osm-map,
.video-embed-item,
iframe.video-embed-item {
  width: 100%;
  border: none;
  height: auto;
  min-width: unset;
  min-height: 250px;
}
.col-lg-8 .social-gdpr-youtube-video,
.col-lg-8 .social-gdpr-vimeo-video,
.col-lg-8 .social-gdpr-google-maps,
.col-lg-8 .social-gdpr-osm-map,
.col-lg-8 .video-embed-item,
.col-lg-8 iframe.video-embed-item {
  min-height: 500px;
}

.social-gdpr-youtube-iframe-notice,
.social-gdpr-vimeo-iframe-notice {
  font-size: 14px;
  bottom: unset;
}

.social-gdpr-youtube-iframe-notice a,
.social-gdpr-vimeo-iframe-notice a {
  color: white;
  text-decoration: underline;
}

.social-gdpr-vimeo-video,
.social-gdpr-youtube-video,
.social-gdpr-vimeo-video {
  background-size: cover;
}

.social-gdpr-vimeo-video img.videostub,
.social-gdpr-youtube-video img.videostub {
  top: 50%;
}

.legendLabel.text-truncate {
  text-overflow: inherit;
}
@media print {
  .social-gdpr-youtube-iframe-notice,
  .social-gdpr-vimeo-iframe-notice {
    display: none;
  }
}