:root {
     --text: #000;
     --white: #fff;
     --grey: #333;
     --lightgrey: #eee;
     --blue: #1e76c8;
     --lightblue: #a5c9eb;
     --green: #4ca928;
     --lightgreen: #edf6e9;
     --orange: #f5a200;
     --lightorange: #fef6e5;
     --yellow: #ffe000;
     --lightyellow: #fffce5;
     --red: #e2001a;
     --lightred: #fce5c8;
     --sidecolor: #d4f4c6;
}
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-size: 18px;
}
body {
     font-size: 1em;
     font-weight: 300;
     font-family: 'IBM Plex Sans', sans-serif;
     background: var(--sidecolor);
}
iframe {
     max-width: 100% !important;
     border: 1px black solid !important;
}
[aria-current="page"] {
 background: var(--blue);
}
/* ------------------------------CookiePopUp */
p.iwcc-text {
     font-size: 0.8rem;
}
.iwcc-headline {
     font-weight: bold;
     font-size: 1em !important;
}
.iwcc_replace_wrapper {
     margin-bottom: 80px;
}
/* ------------------------------PopUp-Fenster */
.overlay {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.7);
     transition: opacity 500ms;
     visibility: hidden;
     opacity: 0;
}
.overlay:target {
     visibility: visible;
     opacity: 1;
}
.popup {
     margin: 200px auto 0 auto;
     padding: 20px;
     background: #fff;
     border-radius: 5px;
     width: 50%;
     position: relative;
     transition: all 5s ease-in-out;
     font-size: 0.9rem;
     line-height: 1.3rem;
}
.popup h2 {
     margin-top: 0;
     color: #333;
}
.popup .close {
     position: absolute;
     top: 20px;
     right: 30px;
     transition: all 200ms;
     font-size: 30px;
     font-weight: bold;
     text-decoration: none;
     color: #333;
}
.popup .close:hover {
     color: #06D85F;
}
.popup .content {
     max-height: 30%;
     overflow: auto;
}
@media screen and (max-width: 700px) {
     .popup {
          width: 80%;
     }
}
/* Skip-Link sichtbar machen, wenn er den Fokus bekommt */
a.skip-link:focus {
     outline: 2px solid #07b;
     background: white;
     display: block;
     position: static;
     clip: auto;
     clip-path: none;
     overflow: visible;
     white-space: inherit;
     width: auto;
     height: auto;
     padding: 0.5rem;
     border: none;
     margin: 0;
}
.visually-hidden {
     position: absolute;
     clip: rect(0, 0, 0, 0);
     clip-path: inset(50%);
     overflow: hidden;
     white-space: nowrap;
     width: 1px;
     height: 1px;
     padding: 0;
     border: 0;
     margin: -1px;
}
/* ------------------------------Basiseinstellungen */
header {
     margin: 60px auto 0 auto;
     width: 100%;
}
section {
     margin: 0 auto;
     width: 100%;
     max-width: 1500px;
     background-color: var(--white);
}
.inner-space {
     padding: 60px 80px 0 80px;
}
img {
     max-width: 100%;
}
h1 {
     font-size: 1.9rem;
     font-weight: 300;
     color: var(--green);
     text-align: left;
     margin-bottom: 18px;
     line-height: 1.5rem;
     letter-spacing: 0.12px;
     word-spacing: 0.16em;
}
h2 {
     font-size: 1.2rem;
     font-weight: 300;
     color: var(--blue);
     text-align: left;
     margin-bottom: 8px;
     line-height: 1.5rem;
     letter-spacing: 0.12px;
     word-spacing: 0.16em;
}
h3 {
     font-size: 1rem;
     font-weight: 500;
     color: var(--red);
     margin-bottom: 8px;
     line-height: 1.2rem;
     padding-top: 0.5rem;
     line-height: 1.5rem;
     letter-spacing: 0.12px;
     word-spacing: 0.16em;
}
p, p b {
     -moz-hyphens: auto;
     -o-hyphens: auto;
     -webkit-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;
     font-size: 1rem;
     margin-bottom: 2em;
     line-height: 1.5rem;
     letter-spacing: 0.12px;
     word-spacing: 0.16em;
}
p a, p a:hover {
     text-decoration: none;
     font-size: 1rem;
     color: var(--text);
     font-weight: 500;
}
@media(max-width: 1000px) {
     .inner-space {
          padding: 30px 30px 0 30px;
     }
     h1 {
          font-size: 1.6rem;
     }
     h2 {
          font-size: 1.3rem;
     }
     h3 {
          font-size: 1.1rem;
     }
}
@media(max-width: 600px) {
     .inner-space {
          padding: 40px 15px 0 15px;
     }
     h1 {
          font-size: 1.4rem;
     }
     h2 {
          font-size: 1.1rem;
     }
     h3 {
          font-size: 0.9rem;
     }
     p, p b {
          font-size: 0.9rem;
          line-height: 1.2rem;
     }
     p a, p a:hover {
          font-size: 0.9rem;
     }
}
.spalten {
     margin: 20px auto 0 auto;
     -webkit-column-count: 2;
     -webkit-column-gap: 50px;
     -moz-column-count: 2;
     -moz-column-gap: 50px;
     column-count: 2;
     column-gap: 50px;
}
@media (max-width: 680px) {
     .spalten {
          margin: 20px auto 0 auto;
          -webkit-column-count: 1;
          -webkit-column-gap: 50px;
          -moz-column-count: 1;
          -moz-column-gap: 50px;
          column-count: 1;
          column-gap: 50px;
     }
}
.paddingbottom {
     padding-bottom: 60px;
}
.marginbottom {
     margin-bottom: 60px;
}
.margintop {
     margin-top: 60px;
}
.margintop30 {
     margin-top: 30px;
}
.margintop20 {
     margin-top: 20px;
}
.white {
 color: var(--white);
}
/* ------------------------------HeaderImage */
section .titel-image {
     margin: 0 auto;
     width: 100%;
     display: flex;
}
section img.titel-image.desktop {
     width: 100%;
     max-width: 1500px;
     margin-bottom: 10px;
     display: block;
}
section img.titel-image.mobil {
     display: none;
}
@media(max-width: 480px) {
     section img.titel-image.desktop {
          display: none;
     }
     section img.titel-image.mobil {
          width: 100%;
          max-width: 1500px;
          display: block;
     }
}
/* ------------------------------Home */
section#section-home .inner-space .hinweis {
     background-color: var(--red);
     width: 100%;
     padding: 50px;
     border-radius: 20px;
}
section#section-home .inner-space .hinweis .headline {
     color: var(--white);
     font-size: 1.8rem;
     font-weight: 300;
}
section#section-home .inner-space .hinweis .subheadline {
     color: var(--yellow);
     margin-top: 20px;
     font-size: 1.3rem;
     font-weight: 500;
}
section#section-home .inner-space .hinweis p {
     color: var(--white);
     margin-top: 20px;
}
section#section-home .inner-space .speiseplan {
     background-color: var(--lightblue);
     width: 100%;
     padding: 50px;
     border-radius: 20px;
}
section#section-home .inner-space .speiseplan .headline {
     color: var(--text);
     font-size: 1.8rem;
     font-weight: 300;
}
section#section-home .inner-space .speiseplan .subheadline {
     color: var(--blue);
     margin-top: 20px;
     font-size: 1.3rem;
     font-weight: 500;
}
@media(max-width: 600px) {
     section#section-home .inner-space .hinweis {
          padding: 20px;
     }
     section#section-home .inner-space .hinweis .headline {
          font-size: 1.3rem;
     }
     section#section-home .inner-space .hinweis .subheadline {
          margin-top: 20px;
          font-size: 1rem;
     }
     section#section-home .inner-space .hinweis p {
          color: var(--white);
          margin-top: 20px;
     }
 section#section-home .inner-space .speiseplan {
          padding: 20px;
     }
 section#section-home .inner-space .speiseplan .headline {
          font-size: 1.3rem;
     }
 section#section-home .inner-space .speiseplan .subheadline {
          margin-top: 20px;
          font-size: 1rem;
     }
}
/* ------------------------------Home-Teaser */
section#section-home .inner-space .teaser-box {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     flex-wrap: wrap;
     align-items: center;
     width: 100%;
     gap: 30px;
}
@media(max-width: 825px) {
     section#section-home .inner-space .teaser-box {
          gap: 20px;
     }
}
section#section-home .inner-space .teaser-box .teaser {
     width: 30%;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
}
@media(max-width: 825px) {
     section#section-home .inner-space .teaser-box .teaser {
          width: 48%;
     }
}
@media(max-width: 560px) {
     section#section-home .inner-space .teaser-box .teaser {
          width: 47.5%;
     }
}
@media(max-width: 460px) {
     section#section-home .inner-space .teaser-box .teaser {
          width: 100%;
     }
}
section#section-home .inner-space .teaser-box .teaser img {
     max-width: 100%;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     display: block;
}
section#section-home .inner-space .teaser-box .teaser .teaser-text {
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
     background-color: var(--orange);
     height: 75px;
     width: 100%;
     text-align: center;
     padding-top: 14px;
}
section#section-home .inner-space .teaser-box .teaser .teaser-text .tt-head a {
     font-size: 1.4rem;
     font-weight: 700;
     text-decoration: none;
     color: var(--white);
     line-height: 1.6rem;
}
section#section-home .inner-space .teaser-box .teaser .teaser-text .tt-sub a {
     font-size: 1.0rem;
     font-weight: 500;
     text-decoration: none;
     color: var(--white);
}
@media(max-width: 1340px) {
     section#section-home .inner-space .teaser-box .teaser .teaser-text .tt-head a {
          font-size: 1.2rem;
     }
     section#section-home .inner-space .teaser-box .teaser .teaser-text .tt-sub a {
          font-size: 0.9rem;
     }
}
@media(max-width: 1170px) {
     section#section-home .inner-space .teaser-box .teaser .teaser-text .tt-head a {
          font-size: 1.0rem;
          line-height: 1.4rem;
     }
     section#section-home .inner-space .teaser-box .teaser .teaser-text .tt-sub a {
          font-size: 0.8rem;
     }
}
@media(max-width: 825px) {
     section#section-home .inner-space .teaser-box .teaser .teaser-text .tt-head a {
          font-size: 1.1rem;
          line-height: 1.4rem;
     }
     section#section-home .inner-space .teaser-box .teaser .teaser-text .tt-sub a {
          font-size: 0.8rem;
     }
}
@media(max-width: 610px) {
     section#section-home .inner-space .teaser-box .teaser .teaser-text .tt-head a {
          font-size: 0.8rem;
          line-height: 1.3rem;
     }
     section#section-home .inner-space .teaser-box .teaser .teaser-text .tt-sub a {
          font-size: 0.7rem;
     }
}
@media(max-width: 460px) {
     section#section-home .inner-space .teaser-box .teaser .teaser-text .tt-head a {
          font-size: 1.2rem;
          line-height: 1.6rem;
     }
     section#section-home .inner-space .teaser-box .teaser .teaser-text .tt-sub a {
          font-size: 1rem;
     }
}
/* ------------------------------Home-Kalender */
.kalender .apps {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     gap: 20px;
     margin-top: 20px;
}
.kalender .apps img {
     border-radius: 10px;
     max-width: 120px;
}
/* ------------------------------Background Farben */
section .fullsize-blank {
     background-color: var(--white);
}
section .fullsize-yellow {
     background-color: var(--lightyellow);
}
section .fullsize-red {
     background-color: var(--lightred);
}
section .fullsize-green {
     background-color: var(--lightgreen);
}
section .fullsize-orange {
     background-color: var(--lightorange);
}
section .fullsize-grey {
     background-color: var(--lightgrey);
}
section .fullsize-blue {
     background-color: var(--lightblue);
}
/* ------------------------------Home-Berichte */
.margin20 {
     margin: 20px 0;
}
.berichte-box {
     padding: 60px 80px 60px 80px;
}
.berichte-content {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
     padding-top: 10px;
}
.berichte-text {
     width: 42%;
     padding-top: 0;
}
.berichte-img {
     width: 54%;
}
.berichte-img img {
     max-width: 100%;
     border-radius: 20px;
}
.berichte-text .read-more-red {
     display: inline-block; /* Voraussetzung, damit margin und padding funktionieren */
     background-color: var(--red);
     color: #fff;
     font-size: 0.9rem;
     font-weight: 500;
     border-radius: 12px;
     padding: .5em 1.25em; /* em: Xx so groß, wie die Fontgröße im Element */
     margin-top: 20px;
     transition: 200ms ease;
     cursor: pointer;
}
.berichte-text .read-more-black {
     display: inline-block; /* Voraussetzung, damit margin und padding funktionieren */
     background-color: var(--text);
     color: #fff;
     font-size: 0.9rem;
     font-weight: 500;
     border-radius: 12px;
     padding: .5em 1.25em; /* em: Xx so groß, wie die Fontgröße im Element */
     margin-top: 20px;
     transition: 200ms ease;
     cursor: pointer;
}
.berichte-text a.read-more-red, .berichte-text a.read-more-black {
     text-decoration: none;
}
.berichte-text a.read-more-red:hover, .berichte-text a.read-more-black:hover {
     background-color: var(--green);
}
@media(max-width: 1000px) {
     .berichte-box {
          padding: 40px 30px 40px 30px;
     }
     .berichte-content {
          display: flex;
          flex-direction: column-reverse;
     }
     .berichte-text {
          width: 100%;
          padding-top: 20px;
     }
     .berichte-img {
          width: 100%;
     }
}
@media(max-width: 600px) {
     .berichte-box {
          padding: 40px 15px 40px 15px;
     }
}
/* ------------------------------Home-Referenzen */
.referenzen-box {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
}
.referenzen-box img {
     width: 50%;
}
.referenzen-inner-box-row {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     max-width: 50%;
}
.referenzen-inner-box-column {
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     max-width: 50%;
}
.referenzen-inner-box-column img {
     width: 100%;
}
@media(max-width: 600px) {
     .referenzen-box img {
          width: 100%;
     }
     .referenzen-inner-box-row {
          flex-direction: column;
          max-width: 100%;
     }
     .referenzen-inner-box-column {
          max-width: 100%;
     }
}
/* ------------------------------Schulteam */
.schulteam-box {
     padding: 60px 80px 60px 80px;
}
.schulteam-content {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     flex-wrap: wrap;
     align-items: center;
     gap: 30px;
}
.schulteam-content .person {
     display: flex;
     flex-direction: column;
     width: 31.8%;
     justify-content: flex-start;
}
@media(max-width: 1499px) {
     .schulteam-content .person {
          width: 31.2%;
     }
}
@media(max-width: 1300px) {
     .schulteam-content .person {
          width: 48.5%;
     }
}
@media(max-width: 1175px) {
     .schulteam-content .person {
          width: 48%;
     }
}
@media(max-width: 930px) {
     .schulteam-content .person {
          width: 100%;
          flex-direction: column;
     }
     .schulteam-box {
          padding: 40px 15px 40px 15px;
     }
}
.schulteam-content .person img {
     max-width: 100%;
     border-top-left-radius: 20px;
     border-top-right-radius: 20px;
     display: block;
}
.team-text {
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
     height: 75px;
     width: 100%;
     text-align: center;
     padding-top: 7px;
}
.team-text.green {
     background-color: var(--green);
}
.team-text.orange {
     background-color: var(--orange);
}
.team-text.red {
     background-color: var(--red);
}
.team-text.yellow {
     background-color: var(--yellow);
}
.team-text.grey {
     background-color: var(--grey);
}
.team-text.blue {
     background-color: var(--blue);
}
.team-text .name {
     font-size: 1.2rem;
     font-weight: 700;
     text-decoration: none;
     color: var(--white);
     line-height: 2rem;
}
.team-text .name.dark {
     color: var(--text);
}
.schulteam-content .person .team-text .mail a {
     font-size: 0.8rem;
     font-weight: 500;
     text-decoration: none;
     color: var(--white);
}
.schulteam-content .person .team-text .mail.dark a {
     color: var(--text);
}
/* ------------------------------Content */
.box-content {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     flex-wrap: wrap;
     align-items: stretch;
}
.left-box, .right-box {
     display: flex;
     width: 50%;
     justify-content: flex-start;
}
.left-box-content, .right-box-content {
     padding: 60px 80px 60px 80px;
}
.full-box {
     padding: 60px 80px 60px 80px;
     width: 100%;
     justify-content: flex-start;
}
@media(max-width: 1100px) {
     .left-box, .right-box {
          width: 100%;
     }
     .left-box-content, .right-box-content {
          padding: 60px 80px 60px 80px;
     }
}
@media(max-width: 600px) {
     .left-box, .right-box {
          width: 100%;
     }
     .left-box-content, .right-box-content {
          padding: 30px 20px 30px 20px;
     }
     .full-box {
          padding: 30px 20px 30px 20px;
     }
}
.left-box.red, .right-box.red, .full-box.red {
     background-color: var(--lightred);
}
.left-box.green, .right-box.green, .full-box.green {
     background-color: var(--lightgreen);
}
.left-box.yellow, .right-box.yellow, .full-box.yellow {
     background-color: var(--lightyellow);
}
.left-box.orange, .right-box.orange, .full-box.orange {
     background-color: var(--lightorange);
}
.left-box.blue, .right-box.blue, .full-box.blue {
     background-color: var(--lightblue);
}
img.liquid {
     object-fit: cover;
}
.img-box-2 {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     flex-wrap: wrap;
}
.img-box-2-left {
     flex-wrap: wrap;
     width: 50%;
}
.img-box-2-right {
     flex-wrap: wrap;
     width: 50%;
}
@media(max-width: 600px) {
     .img-box-2-left {
          width: 100%;
     }
     .img-box-2-right {
          width: 100%;
     }
}
.img-box-3 {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     flex-wrap: wrap;
}
.img-box-3-left {
     flex-wrap: wrap;
     width: 33.3%;
}
.img-box-3-middle {
     flex-wrap: wrap;
     width: 33.3%;
}
.img-box-3-right {
     flex-wrap: wrap;
     width: 33.3%;
}
@media(max-width: 600px) {
     .img-box-3-left {
          width: 100%;
     }
     .img-box-3-middle {
          width: 100%;
     }
     .img-box-3-right {
          width: 100%;
     }
}
.img-logobox {
     display: flex;
     flex-direction: row;
     max-width: 70%;
     margin-top: 20px;
}
.sportlogo1 {
     width: 30%;
     padding-right: 20px;
}
.sportlogo2 {
     width: 70%;
}
img.berichte {
     margin: 20px 0;
}
.float-right {
     float: right;
     padding: 0 0 1rem 2rem;
     width: 200px;
}
@media(max-width: 600px) {
     .float-right {
          padding: 0 0 0.5rem 1rem;
          width: 150px;
     }
}
/* ------------------------------Footer */
footer {
     text-align: center;
     display: flex;
     flex-direction: column;
     margin-top: 2px;
}
.logos-box {
     background-color: #eee;
     padding: 50px 0 50px 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
     margin-bottom: 30px;
}
.logos-box img {
     max-width: 140px;
     border-radius: 5px;
     padding: 6px 8px;
     border: 1px solid #ddd;
}
@media(max-width: 600px) {
     .logos-box img {
          max-width: 120px;
     }
}
footer .submenu {
     margin-bottom: 30px;
}
footer .submenu ul {
     list-style: none;
}
footer .submenu ul li {
     font-size: 0.7rem;
     height: 25px;
}
footer .submenu a {
     text-decoration: none;
     font-size: 0.7rem;
     color: var(--text);
}
footer .submenu a:hover {
     font-weight: 700;
     color: var(--text);
}
/* ------------------------------CookiePopUp */
p.iwcc-text {
     font-size: 0.8rem;
}
.iwcc-headline {
     font-weight: bold;
     font-size: 1em !important;
}
.iwcc_replace_wrapper {
     margin-bottom: 80px;
}
/* --------------------------------Sidebutton */
#sidebutton {
     position: fixed;
     top: 100px;
     right: 0;
     z-index: 1;
}
#sidebutton a {
     background-color: #CE0B0E;
     color: var(--white);
     padding: 10px 20px 8px 20px;
     font-size: 1.1rem;
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
     text-decoration: none;
}
#sidebutton a:hover {
     background-color: #333232;
}
@media(max-width: 600px) {
     #sidebutton {
          top: 80px;
     }
     #sidebutton a {
          font-size: 0.8rem;
     }
}
/* ------------------------------PopUp-Fenster */
.overlay {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.7);
     transition: opacity 500ms;
     visibility: hidden;
     opacity: 0;
}
.overlay:target {
     visibility: visible;
     opacity: 1;
}
.popup {
     margin: 200px auto 0 auto;
     padding: 20px;
     background: #fff;
     border-radius: 5px;
     width: 50%;
     position: relative;
     transition: all 5s ease-in-out;
     font-size: 0.9rem;
     line-height: 1.3rem;
}
.popup h2 {
     margin-top: 0;
     color: #333;
}
.popup .close {
     position: absolute;
     top: 20px;
     right: 30px;
     transition: all 200ms;
     font-size: 30px;
     font-weight: bold;
     text-decoration: none;
     color: #333;
}
.popup .close:hover {
     color: #06D85F;
}
.popup .content {
     max-height: 30%;
     overflow: auto;
}
@media screen and (max-width: 700px) {
     .popup {
          width: 80%;
     }
}