@charset "UTF-8";
:root {
  --dark-blue: #023047;
  --gray: #f6f6f6;
  --dark-gray: #707070;
  --mid-blue: #219ebc;
  --light-blue: #8ecae6;
  --orange: #D67300;
  --light-orange: #F8B202;
  --white: #fff;
}

@font-face {
  font-family: "Figtree";
  font-weight: 300 900;
  font-style: normal;
  src: url("/assets/fonts/figtree.woff2") format("woff2");
}
body {
  font-family: "Figtree", sans-serif;
  color: var(--dark-blue);
}

h1, h2 {
  font-size: 2.3125rem;
  font-weight: 700;
  color: var(--dark-blue);
}

p, a, li.text {
  font-size: 0.875rem;
  color: #000;
  font-weight: 400;
  letter-spacing: 2%;
  line-height: 1.6;
}

p, a, li.text, ul.text, h1, h2 {
  margin-bottom: 1.4375rem;
}

h3, h4, h5 {
  margin-bottom: 0.625rem;
}

ul.text {
  margin-left: 2.5rem;
}
ul.text li.text {
  margin-bottom: 0;
}

a.link_button {
  font-size: 0.75rem;
  padding: 1.25rem 2.5rem;
  background: var(--dark-blue);
  border-radius: 0.625rem;
  font-weight: 600;
  letter-spacing: 1%;
  color: #fff;
  line-height: 3.375rem;
}

.has_line {
  position: relative;
}
.has_line:after {
  content: "";
  width: 6.25rem;
  height: 0.125rem;
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  background-color: var(--light-blue);
}
.has_line.line_centered:after {
  left: 50%;
  transform: translate(-50%);
  background-color: var(--dark-blue);
}

/* meta-Infos für Texte, z. B. Ort und Datum */
.meta {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 2%;
  color: var(--dark-gray);
  margin-bottom: 0.625rem;
  /* kleines blaues Viereck */
}
.meta:before {
  content: "";
  display: inline-block;
  position: relative;
  border-radius: 0.125rem;
  background-color: var(--light-blue);
  width: 0.5625rem;
  height: 0.5625rem;
  margin-right: 0.625rem;
}

.category {
  color: #fff;
  background-color: var(--orange);
  border-radius: 0.1875rem;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
}

.socials {
  display: block;
  /*  width: f.rem(73); */
  padding: 1.875rem 0 3.75rem 0;
  text-align: center;
}
.socials a {
  display: inline !important;
}
.socials a i {
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
}
.socials a:first-of-type {
  margin-right: 0.9375rem;
}

@media screen and (min-width: 61.875rem) {
  h1, h2 {
    font-size: 3rem;
  }
}
:root {
  --padd-mobile-side: 15px;
  --padd-mobile-bottom: 30px;
  --padd-desktop-bottom: 40px;
  --padd-desktop-side: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body * {
  max-width: 120rem;
}
body a {
  text-decoration: none;
}
body img {
  max-inline-size: 100%;
  display: block;
}
body .content {
  padding: var(--padd-mobile-bottom) var(--padd-mobile-side);
  margin: 0 auto;
  width: 100%;
}
@media screen and (min-width: 33.75rem) {
  body .content {
    max-width: 37.5rem;
  }
}
@media screen and (min-width: 48rem) {
  body .content {
    max-width: 45rem;
  }
}
@media screen and (min-width: 61.875rem) {
  body .content {
    max-width: 60rem;
    padding: var(--padd-desktop-bottom) var(--padd-desktop-side);
  }
  body .extra_padd {
    padding-top: 3.75rem !important;
  }
}
@media screen and (min-width: 75rem) {
  body .content {
    max-width: 64.375rem;
  }
}
@media screen and (min-width: 87.5rem) {
  body .content {
    max-width: 75rem;
  }
}

.banner {
  position: relative;
}
.banner:has(+ section.text_img_article) {
  display: none;
}
.banner picture {
  /* &.banner_startseite img {
      height: f.rem(500);
      object-position: right bottom;
  } */
}
.banner picture img {
  height: 25rem;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.banner picture.mobile_small img {
  height: 15.625rem;
}
.banner .arrow_down {
  display: none;
}
@media screen and (min-width: 61.875rem) {
  .banner:has(+ section.text_img_article) {
    display: block;
  }
  .banner picture.mobile_small img {
    height: 25rem;
  }
  .banner picture.banner_startseite img {
    -o-object-position: initial;
       object-position: initial;
  }
  .banner .arrow_down {
    display: block;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: 1.875rem;
    width: 2.5rem;
  }
}

.message_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(var(--dark-blue), var(--mid-blue));
}
.message_wrapper * {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
}
.message_wrapper img {
  width: 200px;
}
.message_wrapper h1 {
  text-transform: uppercase;
  font-size: 50px;
  margin: 20px;
  font-weight: 800;
}

header {
  width: 100vw;
  position: fixed;
  z-index: 1000;
}
header .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 40px padding von .content überschreiben */
  padding-top: 0.9375rem;
  padding-bottom: 0rem;
  /* Achtung: das ist natürlich erstmal die mobile navi */
}
header .navbar nav {
  width: 70%;
  height: 100lvh;
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--gray);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
header .navbar nav ul {
  list-style: none;
  /* Logo mit blauem Hintergrund */
}
header .navbar nav ul li:first-of-type {
  width: 5rem;
  border-radius: 50%;
  margin: 5rem auto 3.125rem auto;
  background-color: var(--dark-blue);
}
header .navbar nav ul a {
  display: block;
  color: var(--dark-blue);
  padding: 1.25rem;
  border-bottom: 1px #ccc solid;
  font-weight: 700;
  font-size: 1.25rem;
  width: 85%;
  margin: 0 auto;
}
header .navbar nav ul a:active, header .navbar nav ul a:hover, header .navbar nav ul a:focus {
  font-weight: 900;
}
header .navbar nav ul .socials a {
  padding: 3.125rem 0;
  border-bottom: none;
}
header .navbar nav ul .socials a i {
  color: var(--dark-blue);
}
header .navbar .logo_wrap {
  position: relative;
  margin-bottom: 0; /* margin von span aus typography.scss überschreiben */
  /* Kreis hinter dem Logo */
}
header .navbar .logo_wrap img {
  width: 4.375rem;
  position: relative;
  top: 0.1875rem;
  left: 0.8125rem;
}
header .navbar .logo_wrap:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
  width: 4.375rem;
  height: 4.375rem;
  background: rgba(2, 48, 71, 0.8705882353); /* dark-blue mit weniger Deckkraft */
  border-radius: 50%;
  z-index: -1;
}
header .navbar .hamburger {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.625rem;
  height: 2.5rem;
  width: 2.5rem;
  z-index: 10;
  transition: transform 0.6s ease;
  /* die mittlere Linie */
}
header .navbar .hamburger .dot {
  height: 2.5rem;
  width: 2.5rem;
  background-color: #fff;
  border-radius: 50%;
  border: 1px var(--dark-gray) solid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
header .navbar .hamburger .hamburger_line {
  background: var(--dark-gray);
  display: block;
  position: relative;
  width: 1.5rem;
  height: 0.0625rem;
  /* die obere und untere Linie */
}
header .navbar .hamburger .hamburger_line::before, header .navbar .hamburger .hamburger_line::after {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  background: var(--dark-gray);
  content: "";
  z-index: 10;
}
header .navbar .hamburger .hamburger_line::before {
  top: 0.3125rem;
  transition: transform 0.4s ease;
}
header .navbar .hamburger .hamburger_line::after {
  top: -0.3125rem;
  transition: transform 0.4s ease;
}
header .navbar .side_menu_toggle {
  /* checkbox-Kästchen verbergen */
  display: none;
  /* Steuerung Ein-/Ausblenden der mobile navi */
  /* Strich-Animation bei Klick auf Hamburger */
}
header .navbar .side_menu_toggle:checked ~ nav {
  transform: translateX(0);
}
header .navbar .side_menu_toggle:checked ~ .hamburger .hamburger_line {
  background: transparent;
}
header .navbar .side_menu_toggle:checked ~ .hamburger .hamburger_line::before {
  transform: translateY(-5px) rotate(45deg);
  background: var(--dark-blue);
}
header .navbar .side_menu_toggle:checked ~ .hamburger .hamburger_line::after {
  transform: translateY(5px) rotate(-45deg);
  background: var(--dark-blue);
}
@media screen and (min-width: 61.875rem) {
  header {
    background-color: rgba(70, 48, 36, 0.6588235294);
    border-bottom: 1px #463024 solid;
  }
  header .navbar {
    padding-top: 0;
  }
  header .navbar .hamburger, header .navbar ul li:first-child, header .navbar ul li:last-child {
    display: none;
  }
  header .navbar nav {
    transform: none;
    position: static;
    background-color: transparent;
    width: auto;
    height: auto;
  }
  header .navbar nav ul {
    display: flex;
    justify-content: space-between;
  }
  header .navbar nav ul a {
    border: none;
    width: auto;
    text-transform: uppercase;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #fff;
    padding: 0.1875rem 0.625rem;
    margin: 0.3125rem;
    text-shadow: 0.1875rem 0.1875rem 0.1875rem rgba(0, 0, 0, 0.2);
    letter-spacing: 0.05rem;
    transition: color 0.2s ease;
  }
  header .navbar nav ul a:active, header .navbar nav ul a:hover {
    color: var(--light-orange);
    font-weight: 500;
  }
  header .navbar .logo_wrap img {
    width: 5.3125rem;
    top: 0;
    left: 0;
  }
  header .navbar .logo_wrap:after {
    opacity: 0;
  }
}

.text_img {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  /* 30px row gap (auf mobile Text und Bild untereinander) 
      und 20px column gap (auf Desktop nebeneinander) */
  gap: 1.875rem 1.25rem;
}
.text_img .text_img_text {
  /* Herzlich Willkommen */
}
.text_img .text_img_text h1, .text_img .text_img_text h2 {
  font-size: 2.0625rem;
  letter-spacing: 2%;
  font-weight: 600;
  line-height: 1.2;
}
.text_img .text_img_text .subheading {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--dark-blue);
  margin: 0;
}
.text_img .text_img_text .subheading:after {
  background-color: transparent;
}
.text_img .text_img_img {
  /* für Bild auf Startseite */
}
.text_img .text_img_img.mannschaft_auf_balken img {
  -o-object-position: 0 -3.125rem;
     object-position: 0 -3.125rem;
}
.text_img .text_img_img img {
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.625rem;
  width: 100%;
}
@media screen and (min-width: 61.875rem) {
  .text_img {
    /* Reihenfolge tauschen: Bild links, Text rechts */
  }
  .text_img .text_img_img, .text_img .text_img_text {
    /* Breite von Text und Bild: 50% - column gap */
    flex: 0 0 calc(50% - 0.625rem);
    padding: 0 0.625rem;
  }
  .text_img .text_img_text {
    /* für Startseite: Wird auf Desktop wie h1 dargestellt */
  }
  .text_img .text_img_text .subheading {
    font-size: 2.0625rem;
    margin-bottom: 1.4375rem;
    font-weight: 600;
    line-height: 1.2;
  }
  .text_img .text_img_text .subheading:after {
    background-color: var(--light-blue);
  }
  .text_img .text_img_text h1.on_bannerimg {
    position: absolute;
    /* top: f.rem(275); */
    top: 12.5rem;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    color: white;
    text-transform: uppercase;
    text-shadow: 0.1875rem 0.1875rem 0.125rem rgba(0, 0, 0, 0.2);
    border: none;
    letter-spacing: 9%;
    font-size: 1.25rem;
  }
  .text_img .text_img_text h1.on_bannerimg:after {
    background-color: transparent;
  }
  .text_img .text_img_text h1.on_bannerimg span {
    font-size: 3.75rem;
  }
  .text_img.img_left .text_img_text {
    order: 1;
  }
  .text_img.img_left .text_img_img {
    order: 0;
  }
}

/* .text_img_article {
    background: var(--gray);
    width: 100%;

    .text_img {
        .text_img_text {
            h1 {
                font-size: f.rem(48);
                font-weight: 700;
                margin-bottom: f.rem(50);
            }


        }

        .text_img_img {
            img {
                border-radius: 0;
                aspect-ratio: 9 / 16;
            }

        }

        @media screen and (min-width: f.rem(990)){

            .text_img_img {
                padding: 0;
                    flex: 0 0 33.333333%;

            }

            .text_img_text {
                flex: 0 0 58%;
            }
        }
    }


} */
.slogan {
  position: relative;
}
.slogan .slogan_container {
  margin-bottom: 5rem;
  /* Kreis links oben */
  /* Kreis rechts unten */
}
.slogan .slogan_container.gruppen_voll {
  /* Kreis oben links */
  /* Kreis unten rechts */
}
.slogan .slogan_container.gruppen_voll p.slogan_heading {
  right: 2.5rem;
  left: auto !important;
  top: 15%;
  text-align: right;
  line-height: 1.2;
}
.slogan .slogan_container.gruppen_voll:before {
  left: var(--padd-mobile-side);
}
.slogan .slogan_container.gruppen_voll:after {
  bottom: 4.375rem;
}
.slogan .slogan_container.gruppen_voll .slogan_img {
  /* Viereck mit Verlauf */
}
.slogan .slogan_container.gruppen_voll .slogan_img .img_wrap {
  top: 1.25rem;
  left: 20%;
}
.slogan .slogan_container.gruppen_voll .slogan_img .img_wrap .slogan_info {
  background: var(--gray);
  width: 100%;
  position: relative;
  top: -0.25rem;
  border-radius: 0 0 1.25rem 1.25rem;
  padding: 1.875rem 1.25rem;
}
.slogan .slogan_container.gruppen_voll .slogan_img .img_wrap img {
  border-radius: 1.25rem 1.25rem 0 0;
  width: 100%;
  height: 17.5rem;
}
.slogan .slogan_container.gruppen_voll .slogan_img:before {
  width: 50%;
  height: 110%;
  left: 10%;
}
@media screen and (min-width: 61.875rem) {
  .slogan .slogan_container.gruppen_voll {
    /* Viereck mit Verlauf */
  }
  .slogan .slogan_container.gruppen_voll p.slogan_heading {
    right: 18%;
    top: 23%;
  }
  .slogan .slogan_container.gruppen_voll .slogan_img .img_wrap .slogan_info {
    border-radius: 0 0 1.25rem 0;
    padding: 1.875rem 3.125rem;
  }
}
.slogan .slogan_container.wir_suchen {
  margin-bottom: 0;
  /* Kreis rechts unten */
}
.slogan .slogan_container.wir_suchen:after {
  width: 3.75rem;
  height: 3.75rem;
  right: 5%;
  bottom: 12.5rem;
}
.slogan .slogan_container.wir_suchen p.slogan_heading {
  /* top: 30%; */
  /* zweite Zeile orange */
}
.slogan .slogan_container.wir_suchen p.slogan_heading span:nth-of-type(2) {
  color: var(--orange);
}
.slogan .slogan_container.wir_suchen .slogan_info {
  background: var(--orange);
  width: 100%;
  position: relative;
  padding: 1.5625rem;
  font-weight: 500;
  top: 0;
  z-index: -1;
}
.slogan .slogan_container.wir_suchen .slogan_info p {
  color: #fff;
  font-weight: 500;
  margin: 0;
}
@media screen and (min-width: 61.875rem) {
  .slogan .slogan_container.wir_suchen {
    /* Kreis rechts unten */
  }
  .slogan .slogan_container.wir_suchen:after {
    bottom: 6.875rem !important;
  }
  .slogan .slogan_container.wir_suchen .slogan_info {
    width: 50%;
    transform: translateX(81%);
    top: 0.625rem;
  }
  .slogan .slogan_container.wir_suchen .slogan_info p {
    max-width: 85%;
  }
}
.slogan .slogan_container:before {
  content: "";
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: var(--light-orange);
  position: absolute;
  top: 0;
  left: 13%;
  display: block;
  z-index: -1;
}
.slogan .slogan_container:after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--orange);
  position: absolute;
  bottom: 5.625rem;
  right: 7%;
  z-index: -1;
}
.slogan .slogan_container p.slogan_heading {
  position: absolute;
  top: 40%;
  left: var(--padd-mobile-side);
  line-height: 1;
  color: var(--light-orange);
  max-width: 18.75rem;
  font-size: 2.1875rem;
  font-weight: 800;
}
.slogan .slogan_container p.slogan_heading span {
  display: inline-block;
  background-color: #fff;
  padding: 0.125rem 0.5rem;
  margin-bottom: 0.3125rem;
}
.slogan .slogan_container p.slogan_heading span:last-of-type {
  color: var(--orange);
}
.slogan .slogan_container .slogan_img {
  position: relative;
  /* Viereck mit Verlauf */
}
.slogan .slogan_container .slogan_img .img_wrap {
  position: relative;
  top: 0.9375rem;
  left: 27%;
  width: 75%;
}
.slogan .slogan_container .slogan_img .img_wrap img {
  height: 21.875rem;
  width: 87%;
  border-radius: 1.25rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.slogan .slogan_container .slogan_img:before {
  content: "";
  display: block;
  height: 18.75rem;
  width: 60%;
  background: linear-gradient(to bottom right, var(--light-orange), var(--orange));
  border-radius: 1.25rem;
  position: absolute;
  left: 20%;
  top: 0;
}
@media screen and (min-width: 61.875rem) {
  .slogan .slogan_container,
  .slogan .slogan_container.gruppen_voll,
  .slogan .slogan_container.wir_suchen {
    /* Kreis links oben */
    /* Kreis rechts unten */
  }
  .slogan .slogan_container p.slogan_heading,
  .slogan .slogan_container.gruppen_voll p.slogan_heading,
  .slogan .slogan_container.wir_suchen p.slogan_heading {
    left: 15%;
  }
  .slogan .slogan_container:before,
  .slogan .slogan_container.gruppen_voll:before,
  .slogan .slogan_container.wir_suchen:before {
    left: 0;
  }
  .slogan .slogan_container:after,
  .slogan .slogan_container.gruppen_voll:after,
  .slogan .slogan_container.wir_suchen:after {
    right: 0;
    bottom: 2.5rem;
    width: 11.875rem;
    height: 11.875rem;
  }
  .slogan .slogan_container .slogan_img,
  .slogan .slogan_container.gruppen_voll .slogan_img,
  .slogan .slogan_container.wir_suchen .slogan_img {
    /* Viereck mit Verlauf */
  }
  .slogan .slogan_container .slogan_img:before,
  .slogan .slogan_container.gruppen_voll .slogan_img:before,
  .slogan .slogan_container.wir_suchen .slogan_img:before {
    width: 87%;
    left: 4%;
  }
  .slogan .slogan_container .slogan_img .img_wrap,
  .slogan .slogan_container.gruppen_voll .slogan_img .img_wrap,
  .slogan .slogan_container.wir_suchen .slogan_img .img_wrap {
    top: 1.25rem;
    left: 6.25rem;
    width: 87%;
  }
  .slogan .slogan_container .slogan_img .img_wrap img,
  .slogan .slogan_container.gruppen_voll .slogan_img .img_wrap img,
  .slogan .slogan_container.wir_suchen .slogan_img .img_wrap img {
    height: 17.5rem;
    width: 100%;
    border-radius: 1.25rem 1.25rem 1.25rem 0;
  }
  .slogan .slogan_container .slogan_img .img_wrap .slogan_info,
  .slogan .slogan_container.gruppen_voll .slogan_img .img_wrap .slogan_info,
  .slogan .slogan_container.wir_suchen .slogan_img .img_wrap .slogan_info {
    width: 85%;
  }
}

.text_img_article {
  background: var(--gray);
  position: relative;
  margin-bottom: 2.5rem;
}
.text_img_article .content {
  display: flex;
  flex-flow: row wrap;
  -moz-column-gap: 5rem;
       column-gap: 5rem;
  /* für zweiten Text auf über uns - Seite */
}
.text_img_article .content .img_wrap {
  max-width: 100%;
}
.text_img_article .content .img_wrap img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  height: 21.875rem;
  -o-object-position: top;
     object-position: top;
  opacity: 50%;
}
.text_img_article .content .text_wrap {
  max-width: 100%;
  z-index: 1;
  /* ul {
      list-style: disc inside;
      margin-bottom: f.rem(20);

      li {
          font-size: f.rem(14);
          color: #000;
          font-weight: 400;
          letter-spacing: 2%;
          line-height: 1.6;
      }
  } */
}
.text_img_article .content .text_wrap h1, .text_img_article .content .text_wrap h2 {
  position: relative;
  top: 12.5rem;
  height: 19.375rem;
  margin: 1rem 0;
  max-width: 24.375rem;
}
.text_img_article .content .text_wrap h4 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--dark-blue);
  margin: 1.875rem 0 1rem 0;
}
.text_img_article .content .text_wrap .has_line:after {
  background-color: transparent;
}
.text_img_article .content .text_wrap .news_article_preview:not(:first-of-type) {
  display: none;
}
.text_img_article .content .text_wrap .link_wrap {
  text-align: center;
}
.text_img_article .content.second_text {
  padding-top: 0;
}
.text_img_article .content.second_text .img_wrap {
  display: none;
}
.text_img_article .content.first_text {
  padding-bottom: 0;
}
.text_img_article .content.first_text p:last-of-type {
  margin-bottom: 0;
}
@media screen and (min-width: 35.75rem) {
  .text_img_article .content .text_wrap {
    top: 20.625rem;
  }
}
@media screen and (min-width: 61.875rem) {
  .text_img_article .content {
    padding: 5rem var(--padd-desktop-side);
    /* Reihenfolge tauschen: Bild links, Text rechts */
  }
  .text_img_article .content .img_wrap {
    flex: 0 0 33%;
  }
  .text_img_article .content .img_wrap img {
    width: 100%;
    height: 100%;
    position: static;
    opacity: 100%;
  }
  .text_img_article .content .text_wrap {
    flex: 1;
    position: static;
    max-width: 37.5rem;
  }
  .text_img_article .content .text_wrap h1, .text_img_article .content .text_wrap h2 {
    margin-bottom: 1.4375rem;
    top: 0;
    height: auto;
  }
  .text_img_article .content .text_wrap h4:first-of-type {
    padding-top: 1.25rem;
  }
  .text_img_article .content .text_wrap .has_line:after {
    background-color: var(--light-blue);
  }
  .text_img_article .content .text_wrap .news_article_preview:not(:first-of-type) {
    display: flex;
  }
  .text_img_article .content .text_wrap .news_article_preview .news_preview_img_wrap {
    /* immer 215px width in der flexbox */
    flex: 0 0 13.4375rem;
    margin-right: 1.75rem;
    width: initial;
  }
  .text_img_article .content .text_wrap .link_wrap {
    text-align: left;
  }
  .text_img_article .content.img_right .text_wrap {
    order: 0;
  }
  .text_img_article .content.img_right .img_wrap {
    order: 1;
  }
  .text_img_article .content.second_text {
    padding: 2.5rem 0;
  }
  .text_img_article .content.second_text .img_wrap {
    display: block;
  }
}

.cards h2 {
  text-align: center;
}
.cards .cards_container {
  display: flex;
  flex-flow: row wrap;
  align-items: start;
  justify-content: center;
  gap: 1.25rem;
}
.cards .cards_container .card {
  background: var(--gray);
  padding: 1.875rem;
  max-width: 20rem;
}
.cards .cards_container .card .img_wrap {
  width: 100%;
  aspect-ratio: 4/3;
  margin-bottom: 1.25rem;
}
.cards .cards_container .card .img_wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.cards .cards_container .card .text_wrap h3 {
  font-size: 1.4375rem;
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.sponsors {
  width: 100vw;
  background: var(--dark-blue);
  text-align: center;
  padding: 3.125rem 1.25rem;
}
.sponsors h2 {
  color: #fff;
}
.sponsors .sponsors_logos {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.sponsors .sponsors_logos img {
  width: 30%;
  max-width: 5.625rem;
}

/* Für die Gallerie müssen die Bilder die richtigen Pixelmaße haben. 
    Alternativ später: Zusätzliche Wrapper-Divs um jedes Bild im HTML und 
    damit (und object-fit cover) die Größe bestimmen. */
.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: end;
}
.gallery .gallery_column {
  /* Text und zwei Spalte 1 und 2 */
  /* Spalte 3: breite Spalte */
  /* Spalte 4: schmale Spalte */
}
.gallery .gallery_column:first-of-type {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: end;
  /* zwei Spalten, damit es insgesamt 4 gleichmäßige sind */
  /* Alternative zu gallery_column_50: zwei Bilder in der ersten Zeile, eins in der zweiten */
}
.gallery .gallery_column:first-of-type .gallery_column_50 {
  flex: 0 0 calc(50% - 0.625rem);
  max-width: 50%;
}
.gallery .gallery_column:first-of-type .gallery_column_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.25rem 1.25rem;
  grid-template-areas: "small1 small2" "large large";
  padding-bottom: 0.25rem;
  width: 100%;
}
.gallery .gallery_column:first-of-type .gallery_column_grid img:first-of-type {
  grid-area: small1;
}
.gallery .gallery_column:first-of-type .gallery_column_grid img:nth-of-type(2) {
  grid-area: small2;
}
.gallery .gallery_column:first-of-type .gallery_column_grid img:last-child {
  grid-area: large;
  /* max-width von 325px überschreiben */
  max-width: 43.125rem;
}
.gallery .gallery_column:nth-of-type(2) {
  flex: 0 0 calc(65% - 0.625rem);
  max-width: 65%;
  align-self: start;
}
.gallery .gallery_column:nth-of-type(2) img {
  max-width: 24.75rem;
}
.gallery .gallery_column:nth-of-type(3) {
  flex: 0 0 calc(35% - 0.625rem);
  max-width: 35%;
}
.gallery .gallery_column img {
  width: 100%;
  height: auto;
  max-width: 20.3125rem;
  border-radius: 0.625rem;
  margin: 0.5rem 0;
}
.gallery .gallery_column .text_wrap {
  margin-top: 1.25rem;
}
.gallery .gallery_column .text_wrap p {
  margin-bottom: 1.75rem;
}
@media screen and (min-width: 48rem) {
  .gallery .gallery_column:first-of-type .gallery_column_grid {
    gap: 0.25rem 3.125rem;
  }
}
@media screen and (min-width: 61.875rem) {
  .gallery .gallery_column {
    padding: 1.25rem;
    /* Text und Spalte 1 und 2 */
    /* Spalte 3: breite Spalte */
    /* Spalte 4: schmale Spalte */
  }
  .gallery .gallery_column:first-of-type {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .gallery .gallery_column:first-of-type .text_wrap {
    /* Reihenfolge umdrehen: Text - Bilder - Bilder auf mobile */
    order: 0;
    max-width: 35.625rem;
    margin-top: 0;
  }
  .gallery .gallery_column:first-of-type .gallery_column_50 {
    flex: 0 0 calc(50% - 1.25rem);
  }
  .gallery .gallery_column:first-of-type .gallery_column_grid {
    gap: 0.25rem 2.5rem;
  }
  .gallery .gallery_column:first-of-type .gallery_column_50:nth-child(1), .gallery .gallery_column:first-of-type .gallery_column_grid:nth-child(1) {
    /* Reihenfolge umdrehen: Text - Bilder - Bilder auf Desktop */
    order: 1;
  }
  .gallery .gallery_column:first-of-type .gallery_column_50:nth-child(2), .gallery .gallery_column:first-of-type .gallery_column_grid:nth-child(2) {
    order: 2;
  }
  .gallery .gallery_column:nth-of-type(2) {
    flex: 0 0 33%;
    max-width: 33%;
    align-self: end;
  }
  .gallery .gallery_column:nth-of-type(3) {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
  }
}

footer {
  width: 100vw;
  background: var(--dark-blue);
  padding: 1.875rem var(--padd-mobile-side);
  /* Webdev by */
}
footer .footer_container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  max-width: 90rem;
}
footer .footer_container p, footer .footer_container a {
  display: block;
  color: #fff;
  font-weight: 500;
  line-height: 1.7;
  margin-bottom: 0.625rem;
}
footer .footer_container img {
  max-width: 5rem;
}
footer > p {
  font-size: 0.6875rem;
  color: var(--gray);
  max-width: 13.375rem;
  text-align: center;
  margin: 0 auto;
}
@media screen and (min-width: 61.875rem) {
  footer {
    /* Webdev by */
  }
  footer .footer_container {
    justify-content: space-evenly;
    align-items: start;
    margin: 0 auto 3.125rem auto;
    flex-flow: row nowrap;
  }
  footer .footer_container img {
    flex-basis: 10%;
  }
  footer > p {
    max-width: 100vw;
  }
}

.membership {
  background: linear-gradient(to bottom right, var(--light-orange), var(--orange));
}
.membership .content {
  /* 40px padding von .content überschreiben */
  padding-top: 3.75rem;
  padding-bottom: 3.75rem;
  /* Überschrift Mitgliedschaft und Satz drunter */
}
.membership .content > h2, .membership .content > p {
  text-align: center;
}
.membership .content .beitrag_overview {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: start;
  margin: auto;
  max-width: 20.625rem;
}
.membership .content .beitrag_overview .jahresbeitrag, .membership .content .beitrag_overview .monatsbeitrag {
  max-width: 28.125rem;
}
.membership .content .beitrag_overview .jahresbeitrag table, .membership .content .beitrag_overview .monatsbeitrag table {
  margin-bottom: 1.25rem;
  width: 100%;
  border-collapse: collapse;
}
.membership .content .beitrag_overview .jahresbeitrag table td, .membership .content .beitrag_overview .jahresbeitrag table th, .membership .content .beitrag_overview .monatsbeitrag table td, .membership .content .beitrag_overview .monatsbeitrag table th {
  padding: 1.25rem;
  background-color: #fff;
}
.membership .content .beitrag_overview .jahresbeitrag table thead tr, .membership .content .beitrag_overview .monatsbeitrag table thead tr {
  font-weight: 500;
}
.membership .content .beitrag_overview .jahresbeitrag table thead tr th, .membership .content .beitrag_overview .monatsbeitrag table thead tr th {
  background-color: var(--dark-blue);
  text-align: center;
  color: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
}
.membership .content .beitrag_overview .jahresbeitrag table tbody, .membership .content .beitrag_overview .monatsbeitrag table tbody {
  /* erste Spalte mit "Erwachsene" usw. breiter als der Preis */
}
.membership .content .beitrag_overview .jahresbeitrag table tbody td:first-child, .membership .content .beitrag_overview .monatsbeitrag table tbody td:first-child {
  width: 65%;
}
.membership .content .beitrag_overview .jahresbeitrag table tbody tr:nth-of-type(even) td, .membership .content .beitrag_overview .monatsbeitrag table tbody tr:nth-of-type(even) td {
  background-color: var(--gray);
}
.membership .content .beitrag_overview .jahresbeitrag table tbody tr:last-child td:first-child, .membership .content .beitrag_overview .monatsbeitrag table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 1.25rem;
}
.membership .content .beitrag_overview .jahresbeitrag table tbody tr:last-child td:last-child, .membership .content .beitrag_overview .monatsbeitrag table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 1.25rem;
}
.membership .content .link_wrap {
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 61.875rem) {
  .membership .content .beitrag_overview {
    max-width: none;
  }
  .membership .content .beitrag_overview .jahresbeitrag, .membership .content .beitrag_overview .monatsbeitrag {
    flex: 0 0 50%;
    padding: 1.875rem;
  }
}

.contact_infos {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 100%;
}
.contact_infos .info_block {
  padding: 1.25rem;
  width: 18.75rem;
  text-align: center;
}
.contact_infos .info_block .contact_headline {
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 0.625rem;
}
.contact_infos .info_block div {
  display: flex;
  flex-flow: row nowrap;
  /* justify-content: center; */
  gap: 1rem;
}
.contact_infos .info_block div p {
  text-align: left;
}
.contact_infos .info_block div i {
  color: #fff;
  font-size: 1.25rem;
  line-height: 1.1;
}
.contact_infos .info_block table td {
  vertical-align: top;
  padding-left: 10px;
}
@media screen and (min-width: 61.875rem) {
  .contact_infos {
    flex-flow: row nowrap;
    justify-content: center;
    align-items: start;
    width: auto;
  }
  .contact_infos .info_block {
    text-align: left;
    position: relative;
    padding: 1.25rem 1.875rem;
    width: 16.875rem;
    /* Linien */
  }
  .contact_infos .info_block:not(:first-of-type):after {
    content: "";
    display: block;
    width: 0.0625rem;
    height: 12.5rem;
    background-color: var(--dark-gray);
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media screen and (min-width: 67rem) {
  .contact_infos .info_block {
    width: 18.75rem;
  }
}

.contactbox {
  background: linear-gradient(to bottom right, var(--dark-blue), var(--mid-blue));
  position: relative;
  border-radius: 0.625rem;
  width: calc(100% - 0.625rem);
  padding: 2.5rem;
  /* Schatten */
  /* Adresse und Kontaktdaten */
  /* info_blocks sollen in der Kontaktbox nicht zentriert sein */
}
.contactbox:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--light-blue);
  border-radius: 0.625rem;
  position: absolute;
  left: 0.625rem;
  top: 1.25rem;
  z-index: -1;
}
.contactbox h2, .contactbox p, .contactbox span, .contactbox a {
  color: #fff;
}
.contactbox h2 {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.875rem;
}
.contactbox > p {
  margin-bottom: 0;
}
.contactbox .contact_infos {
  align-items: start;
  padding: 1.875rem 0;
  /* falls nicht 3 Spalten, so wie bei kunstturnen.html */
}
.contactbox .contact_infos .info_block {
  text-align: left;
  max-width: 18.75rem;
  /* Linien */
  /* damit der dritte Infoblock breit genug ist, dass 
  e.V. nicht umbricht */
  /* großen Abstand zwischen Email und Ansprechpartner korrigieren */
}
.contactbox .contact_infos .info_block .contact_headline {
  text-align: left;
  /* damit der 3. Block breit genug ist */
  letter-spacing: 1%;
}
.contactbox .contact_infos .info_block:not(:first-of-type):after {
  background-color: #fff;
  height: 11.25rem;
}
.contactbox .contact_infos .info_block:nth-of-type(2) {
  flex: 0 0 30%;
}
.contactbox .contact_infos .info_block:first-of-type a {
  margin-bottom: 0.625rem;
}
.contactbox .contact_infos.two_columns .info_block {
  max-width: 31.25rem;
}
.contactbox .contact_infos.two_columns .info_block:nth-of-type(2) {
  flex: 0 1 auto;
}

.staff {
  background: var(--gray);
  width: 100%;
}
.staff .content {
  text-align: center;
}
.staff .content .profiles_wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: start;
  max-width: 50rem;
  margin: 0 auto;
  gap: 1.25rem;
}
.staff .content .profiles_wrap .profile {
  background: #fff;
  width: 15.625rem;
  border-radius: 1.25rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 1.875rem 0.625rem;
}
.staff .content .profiles_wrap .profile .name {
  font-weight: 500;
  font-size: 1.375rem;
  color: var(--dark-blue);
  margin-bottom: 0;
}
.staff .content .profiles_wrap .profile .description {
  color: var(--dark-gray);
  letter-spacing: 0;
}
.staff .content .profiles_wrap .profile .picture {
  width: 10rem;
  height: 10rem;
  background: var(--gray);
  border-radius: 50%;
  margin-bottom: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.staff .content .profiles_wrap .profile .picture i {
  color: #ccc;
  font-size: 5rem;
}
.staff .content .profiles_wrap .profile .contact i {
  color: var(--mid-blue);
  margin-right: 0.3125rem;
}

.news_overview {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "latest_news" "calendar" "other_news" "archive";
  gap: 2.5rem;
  /* soll nicht 1030px breit sein wie sonst der content, sondern etwas breiter */
}
.news_overview h1, .news_overview h2 {
  font-size: 0.9375rem;
  letter-spacing: 8%;
  text-transform: uppercase;
}
.news_overview h1.has_line:after, .news_overview h2.has_line:after {
  width: 100%;
  background-color: var(--light-orange);
}
.news_overview .calendar {
  width: 100%;
  grid-area: calendar;
}
.news_overview .calendar .event {
  display: grid;
  grid-template-areas: "event_date event_text";
  grid-template-columns: 3.125rem 1fr;
  justify-content: start;
  align-items: start;
  gap: 0.9375rem;
  margin: 2.5rem 0;
}
.news_overview .calendar .event .event_date {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-area: event_date;
  /* Grauer Kreis um die Monatszahl */
  /* Monatszahl mitten im Kreis */
}
.news_overview .calendar .event .event_date:after {
  content: "";
  display: block;
  width: 3.125rem;
  height: 3.125rem;
  background-color: var(--gray);
  border-radius: 50%;
}
.news_overview .calendar .event .event_date span {
  color: var(--dark-gray);
  font-size: 1.0625rem;
  position: absolute;
}
.news_overview .calendar .event .event_text {
  grid-area: event_text;
}
.news_overview .calendar .event .event_text.has_line::after {
  width: 100%;
  bottom: -1.25rem;
  background-color: var(--gray);
}
.news_overview .calendar .event .event_text .meta {
  margin-bottom: 0.3125rem;
  /* blaues Viereck */
}
.news_overview .calendar .event .event_text .meta:before {
  display: none;
}
.news_overview .calendar .event .event_text .name {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--dark-blue);
  margin-bottom: 0.3125rem;
}
.news_overview .calendar .event .event_text .location {
  color: var(--dark-gray);
  font-size: 0.75rem;
  margin-bottom: 0;
}
.news_overview .latest_news {
  grid-area: latest_news;
}
.news_overview .latest_news .news_article_preview, .news_overview .archive .news_article_preview {
  margin-bottom: 0;
}
.news_overview .other_news {
  grid-area: other_news;
  /* .side_column_article {
      background-color: var(--gray);
      padding: f.rem(20) f.rem(15);

      h4 {
          margin-bottom: f.rem(20);
      }
  } */
}
.news_overview .other_news .socials_wrap, .news_overview .other_news .img_wrap, .news_overview .other_news .side_column_article {
  margin-bottom: 2.5rem;
}
.news_overview .other_news .socials_wrap {
  background-color: var(--orange);
  padding: 1.875rem;
  text-align: center;
}
.news_overview .other_news .socials_wrap p {
  color: #fff;
  font-weight: 700;
}
.news_overview .other_news .socials_wrap .socials {
  padding: 1.25rem 0;
}
.news_overview .other_news .img_wrap {
  display: none;
}
.news_overview .archive {
  grid-area: archive;
}
@media screen and (min-width: 61.875rem) {
  .news_overview {
    grid-template-areas: "calendar latest_news other_news" "calendar archive archive";
    grid-template-columns: 1fr 50% 1fr;
    justify-content: space-between;
  }
  .news_overview .calendar {
    width: auto;
  }
  .news_overview .other_news .img_wrap {
    display: block;
  }
  .news_overview .other_news .socials_wrap, .news_overview .other_news .socials_wrap.socials {
    text-align: left !important;
  }
}
@media screen and (min-width: 75rem) {
  .news_overview {
    max-width: 71.25rem !important;
  }
}

.news_article_preview {
  display: flex;
  flex-flow: row wrap;
  row-gap: 23px;
  padding: 1.25rem 0;
  margin-bottom: 1.25rem;
}
.news_article_preview .news_preview_img_wrap {
  width: 13.4375rem;
  height: 10.9375rem;
}
.news_article_preview .news_preview_img_wrap img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.news_article_preview .news_preview_text_wrap {
  /* nimm den restlichen verfügbaren Platz ein (höchstens 500px) */
  flex: 1 1 auto;
  max-width: 31.25rem;
}
.news_article_preview .news_preview_text_wrap h3, .news_article_preview .news_preview_text_wrap h4 {
  font-size: 1.4375rem;
  font-weight: 600;
  color: var(--dark-blue);
  margin-bottom: 0.1875rem;
}
.news_article_preview .news_preview_text_wrap p {
  margin-bottom: 0.9375rem;
}
.news_article_preview .news_preview_text_wrap a.readmore {
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: underline;
  font-size: 0.6875rem;
  margin-bottom: 1.25rem;
}
@media screen and (min-width: 61.875rem) {
  .news_article_preview {
    flex-flow: row nowrap;
  }
  .news_article_preview .news_preview_img_wrap {
    /* immer 215px width in der flexbox */
    flex: 0 0 13.4375rem;
    margin-right: 1.75rem;
    width: initial;
  }
}

.content.news_article_full {
  max-width: 43.75rem;
}
.content.news_article_full * {
  margin-bottom: 1.25rem;
}
.content.news_article_full h2 {
  font-size: 1.25rem;
  font-weight: 600;
}
.content.news_article_full .img_caption {
  font-size: 0.625rem;
  font-style: italic;
}