@import url("/assets/fonts/fontawesome/css/all.min.css");

/* playball-regular - latin */
@font-face {
  font-family: "Playball";
  font-style: normal;
  font-weight: 400;
  src: url("/assets/fonts/google/playball-v16-latin-regular.eot"); /* IE9 Compat Modes */
  src:
    local(""),
    url("/assets/fonts/google/playball-v16-latin-regular.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("/assets/fonts/google/playball-v16-latin-regular.woff2") format("woff2"),
    /* Super Modern Browsers */ url("/assets/fonts/google/playball-v16-latin-regular.woff") format("woff"),
    /* Modern Browsers */ url("/assets/fonts/google/playball-v16-latin-regular.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("/assets/fonts/google/playball-v16-latin-regular.svg#Playball") format("svg"); /* Legacy iOS */
}

:root {
  --rot: #a10000;
  /* --rosa: #edb6ba;*/
  --rosa: #f9d1d3;
  --rosa2: #d9879a;
  --braun: #592b2c;
  --braun2: #b21717;
  --gold: #f6dbd2;
  --weiss: #ffffff;
  --schwarz: #555;
  --ocker: #a08383;

  --fs: 1rem;
}

/* CSS reset */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #fff;
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  font-family: Arial, sans-serif;
  font-size: var(--fs);
}

.flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.flex i {
  font-size: 2rem;
}

.even-columns {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  max-width: 100%;
  margin: 0 auto;
  grid-gap: 1.5rem;
  gap: 1.5rem;
}

.card {
  position: relative;
  font-size: 1rem;
  color: #fff;
}
.card p {
  padding: 0.25rem 0 !important;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs);
  color: var(--schwarz);
}
.card p a {
  color: white;
}
.card img,
.card iframe {
  max-width: 100%;
  height: auto;
  min-height: 100%;
}
.card .youtube-gdpr-hint {
  background-color: var(--rot) !important;
}
.video-container {
  position: relative;
  /* 16:9 */
  /* padding-bottom: 56.25%; 
    height: 0; */
  /* min-height: 185px; */
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  /* height: 185px; */
  /* min-height: 185px; */
}

/* Main Styles */
img {
  max-width: 100%;
  height: auto;
}

nav {
  border-top: 1px solid var(--rosa2);
  border-bottom: 1px solid var(--rosa2);
}

#menu {
  box-sizing: border-box;
  background: var(--rosa);
  /* height: 86px; */
  width: 100%;
}

#logo {
  box-sizing: border-box;
  clear: both;
  margin: 0 auto;
  text-align: center;
  width: 250px;
  max-width: 100%;
  padding: 1rem 0;
}
#logo img {
  max-width: 100%;
}

.icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
}

.social {
  margin: 1rem auto 0 auto;
  padding-bottom: 1rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}
.social > div {
  font-size: 1.9rem;
}
.social > div > a {
  color: var(--braun);
  transition: 0.25s;
}
.social > div > a:hover {
  color: var(--rosa2);
}

.grid-subnavi {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  /* background-color: red; */
}
.grid-subnavi > .grid-navi {
  white-space: nowrap;
}
.grid-subnavi > .grid-text {
  /* outline: 1px solid var(--line); */
}
.grid-subnavi a {
  text-decoration: none;
  color: #555;
}
.grid-subnavi a:hover {
  text-decoration: none;
  /* color: var(--rosa); */
}
.grid-subnavi hr {
  border: 0;
  height: 1px;
  background: transparent;
  margin: 7px 0;
}

.team-grid {
  display: grid;
  grid-template-columns: 240px 1fr; /* Links 240px, rechts nimmt den restlichen Platz ein */
  gap: 1rem;
  margin-bottom: 2rem;
  align-items: baseline;
}

/* Das Bild auf der linken Seite soll die komplette Breite der 240px einnehmen */
.team-grid > *:first-child img {
  width: 100%;
  height: auto; /* Beibehaltung des Seitenverhältnisses */
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

/* Restliche Abstände für Überschriften beibehalten */
.team-grid > * > h2 {
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

@media (max-width: 500px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

#container {
  box-sizing: border-box;
  clear: both;
  margin: 0 auto;
  padding: 2vw;
  width: 100%;
  max-width: 1024px;
  display: flex;
  text-align: left;
  /* outline: 1px solid red; */
  display: flex;
}

#infos {
  box-sizing: border-box;
  /* background: green; */
  font:
    normal 11.5pt Arial,
    sans-serif;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}
#content {
  box-sizing: border-box;
  /* background:blue; */
  flex: 1;
  float: left;
  /* font: normal 1rem Arial, sans-serif; */
  color: #555;
}

#footer {
  box-sizing: border-box;
  background: var(--rosa);
  /* height: 140px; */
  width: 100%;
  text-align: center;
  font:
    normal 10.5pt Arial,
    sans-serif;
  color: var(--braun);
  padding: 0 2vw 2vw 2vw;
}
#footer img {
  max-width: 100%;
}

#fader {
  box-sizing: border-box;
  width: 100%;
  height: 0;
  padding-bottom: 55.4%;
  margin-bottom: 12px;
  background: transparent;
  z-index: 1000;
}
#fader img {
  border: 1px solid #aaa;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Infobox */

.termin-button,
.social-button {
  background-color: var(--rosa);
  color: var(--braun) !important;
  display: block;
  padding: 0.5rem;
  text-align: center;
  margin: top 1px;
  margin-bottom: 1rem;
  border: 1px solid #dddddd;
}
.termin-button:hover {
  color: var(--braun2) !important;
  background-color: var(--rosa);
}

.termin-button {
  font-weight: bold;
}

.social-button {
  margin-top: 1rem;
}

#infobox p {
  line-height: 15pt;
  border-bottom: 1px solid var(--rosa2);
  padding: 10px 0;
}
#infobox p:first-child {
  border-top: 1px solid var(--rosa2);
}

#infobox div.telefon {
  line-height: 15pt;
  padding: 10px 0;
}
#infobox h1 {
  font:
    bold 15pt Arial,
    sans-serif;
  color: var(--braun);
  background: var(--rosa);
  text-align: center;
  padding: 5px 10px;
  border-top: 2px solid #000;
}
#infobox h2 {
  font:
    normal 12pt Arial,
    sans-serif;
  color: #000;
  text-align: center;
  text-decoration: underline;
  padding: 20px 0 0 0;
}
#infobox a {
  text-decoration: none;
  color: #555;
}
#infobox a:hover {
  text-decoration: none;
  /* color: var(--rosa); */
}
#infobox hr {
  border: 0;
  height: 1px;
  background: transparent;
  margin: 7px 0;
}
#infobox th {
  display: none;
}
#infobox td:first-child {
  padding-right: 5px;
  line-height: 15pt;
}
#googlemap {
  box-sizing: border-box;
  border: 1px solid #aaa;
  width: 100%;
  height: 300px;
}

/* Content */

#content p,
#content ul,
#content ol {
  line-height: 15pt;
  padding: 0 0 12px 0;
}
#content h1 {
  font-size: calc(var(--fs) + 50%);
  font-weight: normal;
  margin-top: -3px;
  padding: 0 0 12px 0;
  color: var(--rosa2);
}
#content h2 {
  font-size: calc(var(--fs) + 20%);
  font-weight: normal;
  margin-top: -3px;
  padding: 0 0 10px 0;
  color: var(--rosa2);
}
#content h3 {
  font:
    400 24px "Playball",
    cursive;
  margin-bottom: 5px;
  color: var(--rosa2);
}
#content h4 {
  font:
    normal 11.5pt Arial,
    sans-serif;
  padding: 0 0 0 15px;
  color: var(--rosa2);
}
#content .linie {
  clear: both !important;
  float: none !important;
  border: none;
  height: 1px;
  border-bottom: 3px solid var(--rosa2);
  padding: 0;
  margin: 20px 0 2rem 0;
}
#content img {
  /* border-radius: 11px; */
  margin-bottom: 10px;
}
#content table {
  width: 100%;
  line-height: 15pt;
  margin: 0 0 25px 0;
  font-size: 1rem;
}
#content td {
  padding: 7px;
  border: 1px solid #ddd;
  text-align: left;
  /* min-width: 125px; */
}
#content th {
  background: var(--rosa2);
  color: #fff;
  padding: 7px 13px;
  font-weight: normal;
}
#content tr:nth-child(1n + 2) {
  background-color: #f9f9f9;
}
#content tr:nth-child(2n + 3) {
  background-color: #f2e8e8;
}
#content tr:hover {
  background-color: #e2e3e5;
}
#content td.team {
  padding: 0;
  border: 0px solid #ddd;
  text-align: left;
}
#content td.team img {
  margin: 0;
}
#content tr.team:hover {
  background-color: transparent;
}

/* Footer */

.footer-table {
  width: 100%;
}
#footer a {
  text-decoration: underline;
  color: var(--braun);
}
#footer a:hover {
  color: var(--braun2);
}

/* Allgemein */

div.txt-img {
  clear: both;
}

a {
  text-decoration: underline;
  color: #555;
}
a:hover {
  color: var(--braun2);
}
a:active,
a:focus {
  outline: none;
}

#on-off {
  display: none;
}

#content ul,
#content ol {
  margin-left: 18px;
}

img.bild_l {
  border: 0px solid #606060;
  float: left;
  margin-bottom: 5px;
  margin-right: 15px;
  margin-top: 3px;
}
img.bild_lb {
  border: 1px solid #5f5f5f;
  float: left;
  margin-bottom: 15px;
  margin-right: 15px;
  margin-top: 3px;
  padding: 3px;
}
img.bild_r {
  border: 0px solid #606060;
  float: right;
  margin-bottom: 5px;
  margin-left: 15px;
  margin-top: 3px;
}
img.bild_rb {
  border: 1px solid #5f5f5f;
  float: right;
  margin-bottom: 5px;
  margin-left: 15px;
  margin-top: 3px;
  padding: 3px;
}
img.bd {
  border: 1px solid #aaa;
  padding: 0;
}

img.link {
  border: none;
  float: left;
  margin-bottom: 0;
  margin-right: 7px;
  margin-top: 1px;
  border-radius: none;
}

.link_icon {
  padding-left: 25px;
  background-repeat: no-repeat;
}
.ico_gif,
.tif {
  background-image: url(/media/fico_pic.gif);
}
.ico_def {
  background-image: url(/media/fico_def.gif);
}
.ico_doc {
  background-image: url(/media/fico_doc.gif);
}
.ico_jpg,
.ico_jpeg {
  background-image: url(/media/fico_jpg.gif);
}
.ico_pdf {
  background-image: url(/media/fico_pdf.gif);
}
.ico_xls {
  background-image: url(/media/fico_xls.gif);
}
.ico_zip {
  background-image: url(/media/fico_zip.gif);
}
.ico_imp {
  background-image: url(/media/fico_imp.gif);
}

.clr {
  clear: both;
}
.floatRight {
  float: right;
  margin: 0 0 10px 15px;
}
.floatLeft {
  float: left;
  margin: 0 15px 10px 0;
}
.floatCenter {
  text-align: center;
  margin: 0;
  padding: 0;
}

.nix {
  display: none;
  margin: 5px;
}

a.unsichtbar {
  display: none;
}

@media only screen and (max-width: 700px) {
  .grid-subnavi {
    gap: 2rem;
    flex-direction: column;
  }
  .grid-subnavi > * {
    flex: 1;
    width: 100%;
  }
  .even-columns {
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    grid-gap: 1rem;
    gap: 1rem;
  }
}

@media only screen and (max-width: 500px) {
  body,
  .card p {
    font-size: calc(var(--fs) - 10%);
  }
  .grid-subnavi > .grid-navi {
    white-space: wrap;
  }
  .team-flex {
    flex-direction: column;
  }
  .team-flex > * {
    flex: 1;
    width: 100%;
  }
  .icons {
    flex-direction: column;
    gap: 0;
  }
  .even-columns {
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    grid-gap: 1rem;
    gap: 1rem;
  }
  #content img {
    min-width: 100%;
    height: auto;
    display: block;
  }
}