:root {
     --black: #000000;
     --white: #ffffff;
     --blue: #1d3a8f;
     --yellow: #fecc00;
     --grey: #a8a8a7;
     --lightgrey: #f0f0f0;
     --red: #cd1076;
}
* {
     margin: 0;
     padding: 0;
     font-size: 16px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     *behavior: js/boxsizing.htc);
}
html {
     scroll-behavior: smooth; /* verlangsamt das Link-Scrollen */
}
body {
     font-size: 1em;
     font-weight: 300;
     font-family: 'IBM Plex Sans', sans-serif;
     background: var(--lightgrey);
     max-width: 1300px;
     margin: 0 auto;
}
/* ------------------------------Basiseinstellungen */
header {
     margin: 28px auto 0 auto;
     width: 100%;
}
section {
     margin: 0 auto;
     width: 100%;
     max-width: 1300px;
     background-color: var(--white);
}
img {
     max-width: 100%;
     height: 100%;
}
.wave {
     margin-bottom: -4px;
     margin-top: -4px;
}
h1 {
     font-size: 2.2em;
     font-weight: 300;
     text-align: center;
     margin: 30px 0;
     display: block;
}
h2 {
     font-size: 1.6em;
     font-weight: 300;
     text-align: center;
     margin: 50px 0 10px 0;
     display: block;
}
h3 {
     font-size: 1.2em;
     font-weight: 500;
     text-align: left;
     margin: 25px 0 10px 0;
     display: block;
}
p, p b {
     font-size: 1.1em;
     line-height: 1.3em;
}
@media(max-width: 600px) {
     h1 {
          font-size: 1.5em;
          margin: 10px 0 15px 0;
     }
     h2 {
          font-size: 1.1em;
          margin: 20px 0 0 0;
     }
     p, p b {
          font-size: 1em;
     }
}
/* ------------------------------section-home */
.headerinfo {
     display: flex;
     flex-direction: column;
     padding: 50px 50px 35px 50px;
     justify-content: center;
     align-items: center;
     gap: 40px;
}
.claim {
     font-size: 2.2em;
     text-align: center;
}
.phone {
     background: var(--lightgrey);
     font-size: 1.3em;
     letter-spacing: 0.05em;
     color: var(--black);
     padding: 10px 20px;
     border-radius: 8px;
     border: 2px solid var(--white);
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.phone a {
     text-decoration: none;
     color: var(--black);
}
@media(max-width: 600px) {
     .headerinfo {
          padding: 30px 50px 25px 50px;
          gap: 20px;
     }
     .claim {
          font-size: 1.8em;
     }
     .phone {
          font-size: 1em;
     }
}
/* ------------------------------section-unternehmen */
#section-unternehmen {
     background: var(--yellow);
     display: flex;
     flex-direction: column;
}
.content-unternehmen {
     display: flex;
     flex-direction: column;
     padding: 30px 90px 50px 90px;
}
@media(max-width: 600px) {
     .content-unternehmen {
          padding: 20px 30px 30px 30px;
     }
}
.content-unternehmen-box {
     display: flex;
     flex-direction: row;
     gap: 60px;
}
@media(max-width: 600px) {
     .content-unternehmen-box {
          gap: 20px;
     }
}
.content-unternehmen-box p {
     max-width: 50%;
}
.content-unternehmen-box img {
     max-width: 50%;
     border: 8px solid var(--white);
}
@media(max-width: 900px) {
     .content-unternehmen-box {
          flex-direction: column-reverse;
     }
     .content-unternehmen-box p {
          max-width: 100%;
     }
     .content-unternehmen-box img {
          max-width: 100%;
     }
}
/* ------------------------------section-reiseangebote */
.content-reiseangebote {
     background: var(--white);
     display: flex;
     flex-direction: column;
     padding: 30px 90px;
}
/* tabs-reiseangebote */
.tab {
     overflow: hidden;
     background-color: var(--lightgrey);
}
/* Style the buttons that are used to open the tab content */
.tab button {
     background-color: var(--white);
     float: left;
     outline: none;
     cursor: pointer;
     padding: 14px 16px;
     transition: 0.3s;
     border: 1px solid var(--grey);
     width: 180px;
}
@media(max-width: 600px) {
     .tab button {
          padding: 8px 16px;
          width: 100%;
     }
}
/* Change background color of buttons on hover */
.tab button:hover {
     background-color: var(--grey);
}
/* Create an active/current tablink class */
.tab button.active {
     background-color: var(--blue);
     color: var(--white);
     border: 1px solid var(--blue);
}
/* Style the tab content */
.tabcontent {
     display: none;
     padding: 6px 12px;
     padding: 50px 60px;
     background: var(--lightgrey);
}
.tabcontent {
     animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
.tabcontent h3 {
     line-height: 1.4em;
     font-size: 1.2em;
     font-weight: 400;
     text-transform: uppercase;
     letter-spacing: 0.05em;
}
.tabcontent p {
     line-height: 1.4em;
     font-size: 1.1em;
}
.tabcontent p b {
     line-height: 1.4em;
     font-size: 1em;
}
@media(max-width: 600px) {
     .content-reiseangebote {
          padding: 30px 30px;
     }
     .tabcontent {
          padding: 20px 20px;
     }
     .tabcontent h3 {
          line-height: 1.3em;
          font-size: 1.1em;
     }
     .tabcontent p {
          line-height: 1.3em;
          font-size: 1em;
     }
     .tabcontent p b {
          line-height: 1.3em;
          font-size: 0.9em;
     }
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
     from {
          opacity: 0;
     }
     to {
          opacity: 1;
     }
}
/* ------------------------------section-tradition */
.content-tradition {
     background: var(--white);
     display: flex;
     flex-direction: column;
     padding: 30px 90px;
}
@media(max-width: 600px) {
     .content-tradition {
          padding: 30px 30px;
     }
}
/* Hauptcontainer */
.grid-container {
     margin: 0 auto 30px auto;
     width: 1300px;
     max-width: 100%; /* Automatische Einpassung in den Viewport, läuft sonst darüber hinaus */
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr; /* Anzahl (4) und Breite (fr=fraction) der Spalten wird so festgelegt */
     grid-template-rows: auto auto auto auto; /* 4 Reihen mit der jeweilge Höhe von 300px */
     gap: 10px; /* Abstand zwischen den Grid-Containern */
     grid-template-areas:
          "item1 item1 item2 item3"
          "item1 item1 item4 item5"
          "item6 item6 item8 item8"
          "item7 item7 item8 item8";
}
@media(max-width: 600px) {
     .grid-container {
          grid-template-columns: 1fr 1fr;
          grid-template-rows: auto auto auto auto auto auto auto auto;
          grid-template-areas:
               "item1 item1"
               "item1 item1"
               "item2 item3"
               "item4 item5"
               "item6 item6"
               "item7 item7"
               "item8 item8"
               "item8 item8";
     }
}
.grid_item {
     display: flex;
     justify-content: center;
     align-items: center;
}
.grid_item img {
     object-fit: cover;
}
#item1 {
     grid-area: item1;
}
#item2 {
     grid-area: item2;
}
#item3 {
     grid-area: item3;
}
#item4 {
     grid-area: item4;
}
#item5 {
     grid-area: item5;
}
#item6 {
     grid-area: item6;
}
#item7 {
     grid-area: item7;
}
#item8 {
     grid-area: item8;
}
/* ------------------------------section-kontakt */
.content-kontakt {
     background: var(--blue);
     display: flex;
     flex-direction: column;
     padding: 30px 90px;
     color: var(--white);
}
@media(max-width: 600px) {
     .content-kontakt {
          padding: 30px 30px;
     }
}
.content-kontakt-box {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     gap: 60px;
}
@media(max-width: 600px) {
     .content-kontakt-box {
          gap: 20px;
     }
}
.content-kontakt-box .text {
     display: flex;
     flex-direction: column;
     color: var(--white);
     max-width: 400px;
}
.content-kontakt-box .text p {
     margin-bottom: 20px;
}
.content-kontakt-box .text p a {
     color: var(--white);
     text-decoration: none;
     font-size: 1em;
}
.content-kontakt-box .maps {
     max-width: 600px;
     max-height: 600px;
     border: solid 4px var(--white);
     overflow: hidden;
}
@media(max-width: 600px) {
     .content-kontakt-box .maps {
          max-height: 500px;
     }
}
span.headline {
     color: var(--yellow);
     font-size: 1.1em;
     font-weight: 500;
}
table {
     width: 300px;
     margin-top: -20px;
}
td {
 font-size: 1.1em;
}
/* ------------------------------section-datenschutz */
.content-datenschutz {
     background: var(--yellow);
     display: flex;
     flex-direction: column;
     padding: 30px 90px;
     color: var(--black);
}
@media(max-width: 600px) {
     .content-datenschutz {
          padding: 20px 30px 30px 30px;
     }
}
.content-datenschutz p {
     font-size: 0.8em;
}
.content-datenschutz p strong {
     font-size: 0.9em;
}
.content-datenschutz p a {
     font-size: 0.9em;
}
.content-datenschutz ul li {
     font-size: 0.8em;
     list-style: none;
     line-height: 1.2em;
}
/* ------------------------------footer */
footer {
     background: var(--lightgrey);
     padding: 60px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 20px;
}
@media(max-width: 600px) {
     footer {
          padding: 50px 60px 100px 60px;
     }
}
footer img {
     max-width: 200px;
     height: auto;
}
footer p {
     font-size: 0.7em;
     text-align: center;
}
footer a {
     font-size: 0.9em;
     text-decoration: none;
     color: var(--black);
}