:root {
     /*Colors*/
     --black: #080914;
     --darkgrey: #3B3A37;
     --white: #ffffff;
     --red: #E3212C;
     --bluedark: rgb(49, 56, 71);
     --bluedark-alpha: rgba(49, 56, 71, 0.8)
         /* --focusBlue: #0056b3; */
 }

 /* Font weights: */
 /* 
 100: Thin
 200: Extra Light
 300: Light
 400: Regular
 500: Medium
 600: Semi Bold
 700: Bold
 800: Extra Bold
 900: Black
 */

 /* Reset und Grundlagen */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     padding-top: 12rem;
     scroll-behavior: smooth;
     height: 100%;
 }

 @media (max-width: 1200px) {
     html {
         padding-top: 5rem;
     }
 }

 body {
     font-family: "Open Sans", sans-serif;
     font-weight: 400;
     font-size: 18px;
     line-height: 140%;
     color: var(--black);
     background-color: var(--white);
     height: 100%;
     /* Erst wenn Wort breiter als gesamte Box, bricht Browser mitten im Buchstaben um, damit Text nicht rechts über den Rand hinausläuft. */
     /* Hilfreich für Datenschutz */
     overflow-wrap: break-word;
     /* position: relative; */
 }

 /* Headings */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: "Afacad Flux", sans-serif;
     font-weight: 400;
     font-size: 24px;
     color: var(--bluedark);
 }

 h1,
 h2 {
     font-size: 3.25rem;
     line-height: 150%;
 }

 h2 {
     font-size: 2.25rem;
     margin-bottom: 1rem;
 }

 h2.headline-red {
     color: var(--red);
     font-size: 2.25rem;
     font-weight: 600;
     line-height: 3rem;
 }

 h3 {
     font-family: "Afacad Flux", sans-serif;
     font-weight: 600;
     font-style: normal;
     line-height: 140%;
     margin-bottom: 1rem;
 }

 h4 {
     font-family: "Afacad Flux", sans-serif;
     font-weight: 600;
     font-style: normal;
     line-height: 120%;
     margin-bottom: .5rem;
     font-size: 20px;
 }

 .like-h1 {
     font-size: 3.25rem;
     line-height: 150%;
 }

 /* Headings - Mobile */
 @media (max-width: 768px) {

     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
         font-size: 28px;
     }

     h1 {
         font-size: 40px;
         line-height: 150%;
     }

     h2 {
         font-size: 32px;
         line-height: 150%;
     }

     .like-h1 {
         font-size: 32px;
         line-height: 150%;
     }
 }

 /* Buttons, Links die wie Buttons aussehen */
 button {
     border: none;
     font-family: "Open Sans", sans-serif;
 }

 .btn {
     text-align: center;
     cursor: pointer;
     transition: background 0.3s ease;
 }

 .btn-cta,
 .btn-cta-icon {
     color: var(--black);
     background-color: var(--white);
     border: 2px solid var(--red);
     padding: 16px 24px;
     border-radius: 16px;
     text-decoration: none;
     font-weight: 400;
     font-size: 24px;
     font-family: 'Afacad Flux';
 }

 .btn-cta:hover,
 .btn-cta:active,
 .btn-cta:focus,
 .btn-cta-icon:hover,
 .btn-cta-icon:active,
 .btn-cta-icon:focus {
     color: var(--white);
     background-color: var(--red);
 }

 .btn-cta-icon {
     display: flex;
     align-items: center;
 }

 .btn-cta-icon::before {
     content: "";
     width: 24px;
     height: 24px;
     display: inline-block;
     background-image: url(img/contacts/phone_white.svg);
     background-position: bottom 0 right 0;
     background-repeat: no-repeat;
     margin-right: .5rem;
 }

 .btn-cta-icon:hover::before,
 .btn-cta-icon:active::before,
 .btn-cta-icon:focus::before {
     background-image: url(img/contacts/phone_black.svg);
 }

 .btn-basic {
     color: var(--white);
     background-color: var(--red);
     padding: 8px 16px;
     text-decoration: none;
     font-family: 'Afacad Flux';
     font-weight: 600;
     font-size: 20px;
     border: 1px solid var(--red);
     border-radius: 12px;
 }

 .btn-basic:hover,
 .btn-basic:active,
 .btn-basic:focus {
     color: var(--red);
     background-color: var(--white);
 }

 .btn-secondary {
     color: var(--white);
     background-color: var(--bluedark);
     border: 1px solid var(--bluedark);
 }

 .btn-secondary:hover,
 .btn-secondary:active,
 .btn-secondary:focus {
     color: var(--bluedark);
     background-color: var(--white);
 }

 /* Buttons - Mobile */
 @media (max-width: 768px) {

     .btn-cta,
     .btn-cta-icon {
         font-size: 20px;
         padding: 8px 16px;
     }
 }

 /* Links */
 a {
     color: var(--black);
 }

 /* Forms */
 label {
     font-family: "Afacad Flux", sans-serif;
     font-weight: 600;
     font-size: 24px;
     color: var(--bluedark);
     margin-bottom: .5rem;
 }

 label a {
     text-decoration: underline;
     font-weight: 400;
 }

 input,
 select,
 select option,
 textArea {
     font-family: "Open Sans", sans-serif;
     font-weight: 400;
     font-size: 18px;
     padding: 8px 16px;
     border: 1px solid var(--black);
     border-radius: 24px;
     background-color: var(--white);
 }

 input::placeholder,
 select::placeholder,
 textArea::placeholder {
     color: var(--darkgrey);
     font-weight: 300;
 }

 select {
     padding-right: 36px;
     appearance: none;
     -moz-appearance: none !important;
     background: transparent url('img/chevron_black.svg') right center no-repeat !important;
     background-position: calc(100% - 5px) center !important;
     min-height: 42px;
 }

 textArea {
     min-height: 12rem;
 }

 /* ✅ Custom Checkbox ✅ START*/

 /* The container */
 label.checkbox-custom {
     display: block;
     position: relative;
     top: unset;
     left: unset;
     padding-left: 50px;
     margin-right: 1rem;
     margin-bottom: 12px;
     cursor: pointer;
     font-size: 20px;
     font-weight: 600;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 /* Hide the browser's default checkbox behind the custom one - Needs to be behind it to get focus border, which is why opacity is set to 1 */
 label.checkbox-custom input {
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     cursor: pointer;
     height: 32px;
     width: 32px;
 }

 /* Create a custom checkbox */
 .checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 32px;
     width: 32px;
     background-color: var(--white);
     border: 2px solid var(--red);
     border-radius: 12px;
 }

 /* On mouse-over, add a parchment background color */
 label.checkbox-custom:hover input~.checkmark {
     background-color: var(--white);
 }

 /* add this class if checkbox is selected via tab key to highlight the checkbox - Accessibilty*/
 .checkmark.active,
 .checkmark.focus {
     background-color: var(--darkgrey);
 }

 /* When the checkbox is checked, add a blue background */
 label.checkbox-custom input:checked~.checkmark {
     background-color: var(--white);
     border: 2px solid var(--red);
     border-radius: 12px;
 }

 /* Create the checkmark/indicator (hidden when not checked) */
 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }

 /* Show the checkmark when checked */
 label.checkbox-custom input:checked~.checkmark:after {
     display: block;
 }

 /* Style the checkmark/indicator */
 label.checkbox-custom .checkmark:after {
     left: 10px;
     top: 5px;
     width: 8px;
     height: 16px;
     border: solid var(--black);
     border-width: 0 1px 1px 0;
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
 }

 /* ✅ Custom Checkbox ✅ END*/

 /* 🔘 Custom Radiobox 🔘 START*/
 /* The container */
 label.radio-custom {
     display: block;
     position: relative;
     top: unset;
     left: unset;
     padding-left: 40px;
     margin-right: 1rem;
     margin-bottom: 12px;
     cursor: pointer;
     font-size: 1rem;
     font-weight: 500;
     color: var(--grey-darkest);
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 /* Hide the browser's default radio button */
 label.radio-custom input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
 }

 /* Create a custom radio button */
 .radiomark {
     position: absolute;
     top: 0;
     left: 0;
     height: 32px;
     width: 32px;
     background-color: var(--grey-light);
     border: 2px solid var(--red-mid);
     border-radius: 45px;
 }

 /* On mouse-over, add a grey background color */
 label.radio-custom:hover input~.radiomark {
     background-color: var(--parchment-light);
 }

 /* add this class if checkbox is selected via tab key to highlight the checkbox - Accessibilty*/
 .radiomark.active {
     background-color: var(--parchment-light);
 }

 /* When the radio button is checked, add a blue background */
 label.radio-custom input:checked~.radiomark {
     background-color: var(--grey-light);
     border: 2px solid var(--red-mid);
 }

 /* Create the indicator (the dot/circle - hidden when not checked) */
 .radiomark:after {
     content: "";
     position: absolute;
     display: none;
 }

 /* Show the indicator (dot/circle) when checked */
 label.radio-custom input:checked~.radiomark:after {
     display: block;
 }

 /* Style the indicator (dot/circle) */
 label.radio-custom .radiomark:after {
     left: 6px;
     top: 6px;
     width: 16px;
     height: 16px;
     border-radius: 20px;
     background-color: var(--red-mid);
 }

 /* 🔘 Custom Radiobox 🔘 END */

 .form-group {
     display: flex;
     flex-direction: column;
 }

 .form-group,
 .checkbox-group {
     margin-bottom: 2rem;
 }


 /* Helferklassen - Styling*/
 .text-center {
     text-align: center;
 }

 .text-center-max-lg {
     text-align: left;
 }

 @media (max-width: 1200px) {
     .text-center-max-lg {
         text-align: center;
     }
 }

 .text-light {
     font-weight: 300;
 }

 .text-regular {
     font-weight: 400;
 }

 .text-medium {
     font-weight: 500;
 }

 .text-semibold {
     font-weight: 600 !important;
 }

 .text-bold {
     font-weight: 700 !important;
 }

 .text-extrabold {
     font-weight: 800;
 }

 .text-black {
     font-weight: 900;
 }

 .text-italic {
     font-style: italic;
 }

 .font-size-24 {
     font-size: 24px !important;
 }

 .word-break-all {
     word-break: break-all;
 }

 .m-auto {
     margin-left: auto;
     margin-right: auto;
 }

 .mt-1 {
     margin-top: 1rem !important;
 }

 .mt-2 {
     margin-top: 2rem !important;
 }

 .mt-3 {
     margin-top: 3rem !important;
 }

 .mt-4 {
     margin-top: 4rem !important;
 }

 .mt-5 {
     margin-top: 5rem !important;
 }

 .mb-0 {
     margin-bottom: 0 !important;
 }

 .mb-1 {
     margin-bottom: 1rem !important;
 }

 .mb-2 {
     margin-bottom: 2rem !important;
 }

 .mb-3 {
     margin-bottom: 3rem !important;
 }

 .mb-4 {
     margin-bottom: 4rem !important;
 }

 .mb-5 {
     margin-bottom: 5rem !important;
 }

 .me-1 {
     margin-right: 1rem !important;
 }

 .me-2 {
     margin-right: 2rem !important;
 }

 .pt-1 {
     padding-top: 1rem !important;
 }

 .pt-2 {
     padding-top: 2rem !important;
 }

 .pt-3 {
     padding-top: 3rem !important;
 }

 .pt-4 {
     padding-top: 4rem !important;
 }

 .pt-5 {
     padding-top: 5rem !important;
 }

 .pb-1 {
     padding-bottom: 1rem !important;
 }

 .display-none {
     display: none !important;
 }

 .position-relative {
     position: relative;
 }

 .w-100 {
     width: 100%;
 }

 .h-100 {
     height: 100%;
 }

 .seperator-line {
     height: 8px;
     width: 216px;
     background-color: var(--red);
     display: block;
     margin: 1rem auto 2rem auto;
 }

 /* Helferklassen - Layout */
 /* Flex */
 .display-flex {
     display: flex;
 }

 .flex-direction-row,
 .flex-direction-row-max-sm,
 .flex-direction-row-max-md {
     flex-direction: row;
 }


 .flex-direction-col {
     flex-direction: column;
 }

 .justify-content-start {
     justify-content: start;
 }

 .justify-content-center {
     justify-content: center;
 }

 .justify-content-between {
     justify-content: space-between;
 }

 .align-items-start {
     align-items: start;
 }

 .align-items-center {
     align-items: center;
 }

 .gap-24 {
     gap: 24px;
 }

 .gap-48 {
     gap: 48px;
 }

 .gap-96 {
     gap: 96px;
 }

 /* Helferklassen - Layout */
 /* Flex - Mobile  */
 @media (max-width: 768px) {
     .flex-direction-row-max-md {
         flex-direction: column;
     }
 }

 @media (max-width: 576px) {
     .flex-direction-row-max-sm {
         flex-direction: column;
     }
 }

 /* Helferklassen - Layout */
 /* Grid */
 .display-grid {
     display: grid;
 }

 .grid-col-2 {
     grid-template-columns: 1fr 1fr;
 }

 .grid-col-3 {
     grid-template-columns: 1fr 1fr 1fr;
 }

 .grid-col-4 {
     grid-template-columns: 1fr 1fr 1fr 1fr;
 }

 .justify-items-center {
     justify-items: center;
 }

 .justify-items-stretch {
     justify-items: stretch;
 }

 /* Helferklassen - Layout */
 /* Grid - Mobile  */
 @media (max-width: 1200px) {
     .grid-col-2 {
         grid-template-columns: 1fr;
     }

     .grid-col-3 {
         grid-template-columns: 1fr 1fr;
     }

     .grid-col-4 {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (max-width: 992px) {

     .grid-col-3 {
         grid-template-columns: 1fr;
     }

     .grid-col-4 {
         grid-template-columns: 1fr;
     }
 }


 /* Skip-Link für Screenreader */
 .skip-link {
     position: absolute;
     top: -45px;
     left: 6px;
     background: var(--black);
     color: var(--white);
     padding: 8px;
     text-decoration: none;
     z-index: 100;
     border-radius: 0 0 4px 4px;
 }

 .skip-link:focus {
     top: 0;
 }

 /* Header */
 header {
     background-color: var(--white);
     padding: 2rem 0 0 0;
     position: fixed;
     width: 100%;
     top: 0;
     z-index: 999;
 }

 .header-container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 @media (max-width: 1200px) {
     header {
         padding: 2rem 0 .5rem 0;
     }

     .header-container {
         align-items: flex-start;
     }
 }

 /* Mobile header-container*/
 @media (max-width: 1200px) {
     .header-container {
         position: relative;
         flex-direction: column;
     }
 }

 .logo {
     font-family: "Afacad Flux", sans-serif;
     font-weight: 500;
     font-size: 1.5rem;
     color: var(--black);
     text-decoration: none;
     margin-bottom: 0.1rem;
     z-index: 999;
     transition: margin 0.3s ease;
 }

 .logo:hover,
 .logo:focus {
     /* color: var(--focusBlue); */
     /* outline: 2px solid var(--focusBlue); */
     /* outline-offset: 2px; */
 }

 .logo img {
     max-width: 100%;
     transition: max-width 0.3s ease;
 }

 @media (max-width: 576px) {
     .logo img {
         width: 88px;
     }
 }

 /* Versteckter Checkbox Input */
 .menu-toggle {
     display: none;
 }

 /* Hamburger Button */
 .hamburger {
     width: 48px;
     height: 48px;
     cursor: pointer;
     display: none;
     background-image: url(img/hamburger.svg);
 }

 /* Navigation */
 nav.main-navigation {
     display: block;
 }

 .nav-menu {
     list-style: none;
     align-items: center;
     display: flex;
     flex-direction: row;
 }

 .menu-toggle:checked~nav.main-navigation {
     /* das Menü öffnet beim Betätigen des Checkbox-Burgermenü */
     display: block;
 }

 .nav-item {
     position: relative;
 }

 .nav-link {
     display: block;
     font-family: "Afacad Flux", sans-serif;
     font-weight: 400;
     font-size: 1.4rem;
     color: var(--black);
     text-decoration: none;
     padding: 1rem .8rem;
     transition: color 0.3s ease;
 }


 .nav-link.active {
     font-weight: 800;
 }

 .nav-link:hover,
 .nav-link:focus {
     color: var(--red);
     outline: none;
 }

 .nav-link.home-btn {
     padding-top: 0;
     padding-bottom: 0;
 }

 .nav-link.home-btn::after {
     content: "";
     width: 46px;
     height: 46px;
     display: inline-block;
     background-image: url(img/home_bold.svg);
     background-position: bottom 4px right 4px;
     background-repeat: no-repeat;
     transition: background-image 0.3s ease;
 }

 .nav-link:hover.home-btn::after,
 .nav-link:active.home-btn::after,
 .nav-link:focus.home-btn::after {
     background-image: url(img/home_bold_states.svg) !important;
 }

 .nav-link.active.home-btn::after {
     background-image: url(img/home_bold.svg);
     background-position: bottom 4px right 4px;
 }

 /* Dropdown Styling */
 .dropdown {
     position: relative;
 }

 .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     background: var(--white);
     min-width: 200px;
     list-style: none;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     transition: all 0.3s ease;
     z-index: 1000;
     border: 1px solid var(--black);
 }

 .dropdown:hover .dropdown-menu,
 .dropdown:focus-within .dropdown-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .dropdown-menu .nav-link {
     color: var(--black);
     border-bottom: 1px solid var(--black);
 }

 .dropdown-menu .nav-link:hover,
 .dropdown-menu .nav-link:focus {
     background-color: var(--black);
     color: var(--white);
 }

 .dropdown-menu .nav-item:last-child .nav-link {
     border-bottom: none;
 }

 /* Pfeil-Indikatoren */
 .has-dropdown {
     position: relative;
     padding-right: 1.5rem;
 }

 .has-dropdown::after {
     content: "";
     transition: transform 0.3s ease;
     background-image: url(img/chevron_black.svg);
     width: 24px;
     height: 24px;
     position: absolute;
     top: 1rem;
     right: 0;
 }

 .dropdown:hover .has-dropdown::after,
 .dropdown:active .has-dropdown::after,
 .dropdown:focus .has-dropdown::after,
 .dropdown:focus-within .has-dropdown::after {
     /* transform: rotate(180deg); */
     /* Muss noch herausfinden wie ich den schwarz werden lassen, wenn man im Dropdown hovert, aber nicht mehr im Obermenüpunkt - Lasse es vorerst immer schwarz*/
     background-image: url(img/chevron_black.svg);
 }

 /* Mobile Navigation */
 @media (max-width: 1200px) {

     /* Hamburger Button */
     .hamburger {
         position: absolute;
         top: 0;
         right: 20px;
         z-index: 999;
         display: block;
     }

     nav.main-navigation {
         /* das Menü standartnmäßig verstecken */
         display: none;
         width: 100%;
         padding-top: 3.5rem;
     }

     .nav-menu {
         list-style: none;
         align-items: center;
         flex-direction: column;
     }

     .nav-item {
         width: 100%;
         color: var(--black);
         border-bottom: 1px solid var(--black);
         padding-left: 0;
     }

     .nav-item:last-child {
         border-bottom: none;
     }

     /* Menü-Dropdown im Mobilen scrollbar machen */
     .menu-toggle:checked~nav.main-navigation {
         max-height: 80vh;
         /* Aktiviert das Scrollen */
         overflow-y: auto;
         /* Blendat den Scrollbalken in Firefox aus */
         scrollbar-width: none;
         /* Blendat den Scrollbalken in IE und Edge aus */
         -ms-overflow-style: none;
     }

     /* Blendet den Scrollbalken in Chrome, Safari und Opera aus */
     .menu-toggle:checked~nav.main-navigation::-webkit-scrollbar {
         display: none;
     }

     /* Dropdown Styling */
     .dropdown {
         position: static;
     }

     .dropdown-menu {
         position: static;
         display: block;
         list-style: none;
         opacity: 1;
         visibility: visible;
         transform: none;
         transition: none;
         z-index: 1000;
         border: none;
     }

     .has-dropdown {
         border-bottom: 1px solid var(--black);
     }

     /* .dropdown:hover .dropdown-menu,
     .dropdown:focus-within .dropdown-menu {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
     } */

     .dropdown-menu .nav-link {
         color: var(--black);
         border-bottom: none;
         padding-left: 2rem;
     }

     .dropdown-menu .nav-link::before {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         width: 18px;
         height: 58px;
         background: var(--black);
     }

     /* .dropdown-menu .nav-link:hover, */
     .dropdown-menu .nav-link:focus {
         background-color: var(--black);
         color: var(--white);
     }

     .dropdown-menu .nav-item:last-child .nav-link {
         border-bottom: none;
     }
 }

 /* Main Menü Header wenn scrolled */
 header.scrolled {
     padding: 1rem 0 0 0;
     box-shadow: 2px 2px 10px rgba(0, 0, 0, 75%);
 }

 header.scrolled .logo {
     margin-bottom: unset;
     margin-top: -1rem;
 }

 header.scrolled .logo img {
     max-width: 60%;
 }

 @media (max-width: 1200px) {
     header {
         padding: 1rem 0 0 0;
         box-shadow: 2px 2px 10px rgba(0, 0, 0, 75%);
     }

     header .logo {
         margin-bottom: unset;
         margin-top: -1rem;
     }

     header .logo img {
         max-width: 60%;
     }
 }


 /* Navigation Breadcrumb */
 nav.nav-breadcrumb {
     margin-bottom: 3rem;
 }

 .breadcrumb {
     display: flex;
     list-style: none;
     font-size: 14px;
     font-weight: 500;
 }

 .breadcrumb>li>a,
 .breadcrumb>li>span {
     text-decoration: none;
     position: relative;
     padding-right: 1.5rem;
 }

 .breadcrumb>li>a::after,
 .breadcrumb>li>span::after {
     content: "";
     background-image: url(img/chevron_black.svg);
     background-repeat: no-repeat;
     position: absolute;
     top: -2px;
     right: 0;
     width: 24px;
     height: 24px;
     transform: rotate(-90deg);
 }

 .breadcrumb>li>span.current-page::after {
     background-image: none;
 }

 .breadcrumb>li>a:hover,
 .breadcrumb>li>a:active,
 .breadcrumb>li>a:focus {
     text-decoration: underline;
 }

 .breadcrumb>li>span {
     color: var(--darkgrey);
 }

 /* Main Content */
 main {
     margin: 0 auto;
     width: 100%;
     min-height: 100%;
 }

 .content-section {
     margin-top: 3rem;
     padding-bottom: 4rem;
 }

 .content-section ul {
     padding-left: 1.5rem;
     margin-bottom: 1rem;
 }

 .content-section-inner-md {
     max-width: 1200px;
     padding-left: 1rem;
     padding-right: 1rem;
     margin-left: auto;
     margin-right: auto;
 }

 .content-section-inner-sm {
     max-width: 750px;
     padding-left: 1rem;
     padding-right: 1rem;
     margin-left: auto;
     margin-right: auto;
 }

 main .content-section:last-child {
     border-bottom: none;
 }

 .content-section-bg-img {
     background-image: url(img/headerimage.webp);
     background-color: var(--bluedark-alpha);
     background-blend-mode: multiply;
     background-repeat: no-repeat;
     background-size: cover;
     background-position-y: 50%;
 }

 .content-section-bg-img h2.content-title {
     color: var(--white);
     font-size: 5rem;
     font-weight: 300;
     margin-bottom: 1rem;
 }

 .content-section-bg-img h3.content-title {
     color: var(--white);
     font-size: 2.5rem;
     font-weight: 300;
     margin-bottom: 1rem;
 }

 .content-section-bg-img .content-text {
     color: var(--white);
 }

 @media (max-width: 768px) {
     .content-section-bg-img h2.content-title {
         font-size: 3rem;
         margin-bottom: 1rem;
     }

     .content-section-bg-img h3.content-title {
         font-size: 2rem;
         margin-bottom: 1rem;
     }
 }

 /* Main Content */
 /* Mobile */
 @media (max-width: 1200px) {
     .content-section-inner-md {
         max-width: 750px;
     }
 }

 @media (max-width: 768px) {
     .content-section {
         margin-top: 5rem;
     }
 }

 .content-title {
     position: relative;
     margin-bottom: 2rem;
     color: var(--bluedark);
 }

 .content-text p {
     margin-bottom: 1.2rem;
 }

 .content-text-lg {
     font-size: 24px;
     line-height: 140%;
 }

 .content-text-lg p {
     font-size: 24px;
     line-height: 140%;
     margin-bottom: 2rem;
 }

 /* Links im Content */
 .content a {
     color: var(--black);
     text-decoration: underline;
 }

 .content a:hover,
 .content a:focus {
     color: var(--black);
     outline: 2px solid var(--black);
     outline-offset: 2px;
 }

 /* Footer */
 footer {
     background-color: var(--bluedark);
     color: var(--white);
 }

 .footer-container {
     padding: 2rem 0 1rem 0;
 }

 .footer-content {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 2rem;
     margin-bottom: 2rem;
 }

 .footer-section {
     display: flex;
     align-items: row;
     justify-content: space-between;
 }

 .footer-contact-info {
     font-size: 20px;
     line-height: 30px;
     padding-left: 1rem;
     padding-right: 1rem;
 }

 .footer-contact-label {
     font-weight: bold;
     display: inline-block;
     width: 5.5rem;
 }

 .footer-section ul {
     list-style: none;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: flex-start;
     padding-left: 0;
     padding-right: 0;
 }

 .footer-section ul>ul {
     padding-left: 0;
     padding-right: 0;
 }

 .footer-section li {
     margin-bottom: 0.5rem;
     margin-right: 2rem;
 }

 .footer-section ul>ul li {
     margin-right: 1rem;
 }

 .footer-section ul>ul li:last-child {
     margin-right: 0;
 }

 .footer-section a {
     font-family: Afacad Flux;
     color: var(--white);
     text-decoration: none;
     font-size: 24px;
     font-weight: 400;
 }

 .footer-section a:hover,
 .footer-section a:focus {
     color: var(--white);
     text-decoration: underline;
 }

 .footer-section .footer-brand {
     width: 200px;
 }

 .footer-brand-container {
     min-width: 300px;
     max-width: 500px;
 }

 @media (max-width: 992px) {
     .footer-section .footer-brand {
         width: 120px;
     }

     .footer-brand-container {
         min-width: 100%;
         max-width: 100%;
     }
 }

 .footer-bottom {
     max-width: 1200px;
     margin: 0 auto;
     font-size: 16px;
     padding-top: 1rem;
     padding-left: 1rem;
     padding-right: 1rem;
     text-align: center;
     display: flex;
     justify-content: space-between;
 }

 @media (max-width: 992px) {
     .footer-bottom {
         flex-direction: column;
     }
 }

 .footer-bottom ul {
     display: flex;
     list-style: none;
 }

 .footer-bottom ul li {
     margin-right: 2rem;
 }

 .footer-bottom ul li:last-child {
     margin-right: 0;
 }

 @media (max-width: 992px) {
     .footer-bottom ul {
         flex-direction: column;
         margin-top: 1rem;
     }

     .footer-bottom ul li {
         margin-right: 0;
     }
 }

 .footer-bottom a {
     color: var(--white);
     text-decoration: none;
     font-weight: 600;
 }

 .footer-bottom a:hover,
 .footer-bottom a:active,
 .footer-bottom a:focus {
     text-decoration: underline;
 }

 footer hr {
     height: 1px;
     border: none;
     background-color: var(--white);
 }


 @media (max-width: 992px) {
     .footer-section {
         flex-direction: column;
     }

     .footer-contact-info {
         text-align: center;
         margin-bottom: 2rem;
     }

     .footer-contact-label {
         font-weight: 300;
         display: inline-block;
         width: unset;
     }

     .footer-section ul {
         list-style: none;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
         padding-left: 1rem;
         padding-right: 1rem;
     }

     .footer-section li {
         margin-right: unset;
     }

     .footer-section ul>ul {
         margin-top: 1rem;
         flex-direction: row;
         margin-right: 0;
     }

     .footer-section ul>ul li {
         margin-right: .5rem;
         margin-left: .5rem;
     }
 }

 /* Focus-Indikatoren für bessere Accessibility */
 *:focus {
     /* outline: 2px solid var(--focusBlue); */
     /* outline-offset: 2px; */
 }

 /* Hoher Kontrast für alle Texte (WCAG AAA) */
 .high-contrast {
     background-color: #000000;
     color: #ffffff;
 }

 /* Components */
 /* Boxes - Service */
 .box-service {
     width: 267px;
     border-radius: 24px;
     background-color: var(--bluedark);
     padding: 1rem;
 }

 .box-service .icon-container {
     width: 100%;
     height: 74px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .box-service h3 {
     color: var(--white);
     font-size: 20px;
     font-weight: 400;
 }

 /* FAQ */
 /* Den Default-Pfeil verstecken, geht weil es ein ::marker ist, also ein Pseudoelement eines Listenelements */
 details {
     font-size: 18px;
     padding: 1rem 3rem 1rem 1rem;
     border: 1px solid var(--black);
     margin-bottom: 1rem;
 }

 details summary h2,
 details summary h3 {
     font-size: 18px;
     margin-bottom: 0;
 }

 details summary {
     list-style: none;
     position: relative;
     font-weight: 600;
     cursor: pointer;
 }

 details summary::after {
     content: "";
     width: 24px;
     height: 24px;
     background-image: url(img/chevron_black.svg);
     background-repeat: no-repeat;
     background-size: 32px;
     background-position: top -4px right -4px;
     position: absolute;
     top: 0;
     right: -2rem;
 }

 details[open] summary::after {
     transform: rotate(-180deg);
 }

 details ul {
     margin-left: 0;
 }

 /* Boxes - People */
 .box-people {
     width: 267px;
 }

 .box-people img {
     border: 1px solid var(--black);
     margin-bottom: 1rem;
 }

 /* Alles Inklusive-Schild */
 /* Content Title anpassen */
 .content-title.with-flag {
     position: static;
 }

 .content-title.with-flag::after {
     display: none;
 }

 /* Slider single image */
 .slider-single-image .content-title {
     font-size: 48px;
     text-align: center;
     margin-bottom: 1rem;
 }

 .slider-single-image .content-title::after {
     display: none;
 }

 .slider-single-image .content-text {
     font-family: Afacad Flux;
     font-size: 28px;
     line-height: 32px;
 }

 .slider-single-image .slide {
     min-width: 100%;
     box-sizing: border-box;
     margin: 0;
     /* border: none; */
 }

 .slider-single-image .slide img {
     border-radius: 16px;
     box-shadow: 0 0 14px 4px rgba(0, 0, 0, 0.5);
     max-width: 100%;
 }

 .slider-single-image .prev,
 .slider-single-image .next {
     /* Controls absolut zum Container der Controls setzen */
     position: static;
     top: unset;
     background-size: 28px;
     width: 32px;
     height: 32px;
 }

 .slider-single-image .prev {
     left: unset;
     margin-right: .7rem;
     transform: rotate(-180deg);
 }

 .slider-single-image .next {
     right: unset;
     margin-left: .7rem;
 }

 /* Slider single image - mobile */
 /* code here - not needed */

 /* Slider header */
 .header-slider {
     background: var(--bluedark);
     background-image: url(img/headerimage.webp);
     background-repeat: no-repeat;
     background-size: cover;
     background-position-y: 50%;
     height: 256px;
     min-height: 256px;
     width: 100%;
     max-width: 100%;
     position: relative;
 }

 .header-slider .red-border {
     height: 8px;
     width: 100%;
     position: absolute;
     bottom: -4px;
     left: 0;
 }

 .header-slider .red-border::after {
     content: '';
     height: 8px;
     width: 216px;
     background-color: var(--red);
     display: block;
     margin: 0 auto;
 }

 .header-slider h1 {
     font-size: 1.8rem;
     font-weight: 500;
     line-height: 120%;
     margin-bottom: .7rem;
     color: var(--white);
     text-shadow: 2px 2px 3px rgba(0, 0, 0, .75);
 }

 .header-slider h2 {
     font-size: 3rem;
     font-weight: 800;
     line-height: 120%;
     margin-bottom: .7rem;
     color: var(--white);
     text-shadow: 2px 2px 3px rgba(0, 0, 0, .75);
 }

 .header-slider p {
     font-size: 36px;
     font-weight: 400;
     line-height: 120%;
 }

 .header-slider .header-slides {
     height: 100%;
     width: 100%;
     display: flex;
     transition: transform 0.5s ease-in-out;
 }

 .header-slider .header-slide {
     display: flex;
     justify-content: center;
     align-items: center;
     min-width: 100%;
     box-sizing: border-box;
     padding: 1rem;
 }

 .header-slider .header-slide .header-slide-inner {
     background-color: transparent;
     text-align: center;
     box-sizing: border-box;
     padding: 1rem;
 }

 /* button-backtotop für Header-Slider */
 .button-backtotop-container {
     display: flex;
     justify-content: flex-end;
     position: fixed;
     bottom: 2rem;
     right: 2rem;
     width: 100%;
 }

 .button-backtotop {
     background-image: url(img/controls/scroll_down.svg);
     background-repeat: no-repeat;
     width: 48px;
     height: 48px;
     transform: rotate(180deg);
 }

 @media (max-width: 1200px) {}

 @media (max-width: 992px) {}

 @media (max-width: 768px) {}

 /* Slider header - mobile */
 @media (max-width: 768px) {
     .header-slider .header-slide {
         align-items: flex-start;
         padding-top: 3.7rem;
     }

     .header-slider h1 {
         font-size: 24px;
     }

     .header-slider h2 {
         font-size: 32px;
     }

     .header-slider p {
         font-size: 20px;
     }

     .header-dots {
         bottom: 4rem;
     }

     .header-slider .prev,
     .header-slider .next {
         background-size: 30px;
         width: 30px;
         height: 34px;
     }

     .button-backtotop-container {
         bottom: .5rem;
     }

     .button-backtotop {
         background-size: 40px 40px;
         width: 40px;
         height: 40px;
     }
 }

 @media (max-width: 576px) {
     .header-slider {
         height: auto;
     }

     .header-slider .header-slide {
         padding-top: 2.5rem;
     }

     .header-slider .header-slide .header-slide-inner {
         padding: .5rem;
     }
 }

 /* Non-Slider Lightbox Tiles - References Images*/
 .references-container {
     grid-template-columns: 1fr 1fr 1fr;
 }

 .references-container img {
     width: 100%;
     height: 100%;
     aspect-ratio: 1 / 1;
     /* quadratisch */
     object-fit: cover;
     /* immer das Quadrat füllen */
     cursor: pointer;
     border: 1px solid var(--black);
 }

 /* Non-Slider Lightbox Tiles - References Images - mobile*/
 @media (max-width: 1200px) {

     .references-container {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (max-width: 576px) {

     .references-container {
         grid-template-columns: 1fr;
     }
 }