/**
 * @license
 * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: Nordeco Complete Family by Leksen Design
 * URL: https://www.myfonts.com/products/nordeco-complete-family-package-34166
 * Copyright: Copyright © 2023 Monotype Imaging Inc. All rights reserved.
 * 
 * © 2023 MyFonts Inc. */
  
@font-face {
  font-family: "NordecoSemibold";
  src: url('../fonts/NordecoSemibold/font.woff2') format('woff2'), url('../fonts/NordecoSemibold/font.woff') format('woff');
}
@font-face {
  font-family: "NordecoBold";
  src: url('../fonts/NordecoBold/font.woff2') format('woff2'), url('../fonts/NordecoBold/font.woff') format('woff');
}
@font-face {
  font-family: "NordecoRegular";
  src: url('../fonts/NordecoRegular/font.woff2') format('woff2'), url('../fonts/NordecoRegular/font.woff') format('woff');
}
@font-face {
  font-family: "NordecoLight";
  src: url('../fonts/NordecoLight/font.woff2') format('woff2'), url('../fonts/NordecoLight/font.woff') format('woff');
}



*, :after, :before{
  -moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}
:root{
  --bs-gradient: none;
}
a,
a:focus,
a:hover {
  color: #0064A0;
  text-decoration: none;
  transition: all .3s ease-in-out;
}
a:hover{
  color: #fa4b00;
}
.bg-orange a.highlighted{
  font-family: "NordecoRegular" !important;
  color: #FAB900 !important; 
  transition: all .3s ease-in-out;
}
.bg-orange a.highlighted:hover,
.bg-orange a:hover{
  color: #FA4D00 !important; 
}

.kursstart a,
.kursstart a:focus,
.kursstart a:hover {
  color: inherit;
  margin-bottom: 3rem;
}

html,
body {
  font-size: 16px;
}

body{
  font-family: "NordecoRegular";
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: .075rem;
  color: #001920;
}

.display{
  font-family: "NordecoBold";
  font-size: 3.247rem;
  line-height: 1.25;
  letter-spacing: .144rem;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 767px) {
  .display{
    font-family: "NordecoBold";
    font-size: 1.424rem;
    line-height: 1.25;
    letter-spacing: .144rem;
  }  
}
h1, .h1{
  font-family: "NordecoSemibold";
  font-size: 2.887rem;
  line-height: 1.25;
  letter-spacing: .144rem;
  margin-bottom: 1.5rem;
}
h2, .h2{
  font-family: "NordecoSemibold";
  font-size: 2.281rem;
  line-height: 1.25;
  letter-spacing: .072rem;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 767px) {
  h2, .h2{
    font-size: 1.424rem;
    line-height: 1.25;
  }  
}
h2 + h3{
  margin-top: -1.25rem;
  font-family: "NordecoRegular";
}
h3, .h3{
  font-family: "NordecoSemibold";
  font-size: 1.424rem;
  line-height: 1.25;
  letter-spacing: .072rem;
  margin-bottom: 1.5rem;
}
h3 + ul.card-list{
  margin-top: -.5rem;
}
.kursstart h3{
  margin-top: 2.25rem;
  margin-bottom: 1rem;
}
.kursstart h3.card-title{
  margin-top: 0;
  margin-bottom: 1rem;
}
h4, .h4{
  font-family: "NordecoRegular";
  font-size: 1.266rem;
  line-height: 1.5;
  letter-spacing: .216rem;
  margin-bottom: 1.5rem;
}
.card h4.small{
  margin-bottom: .5rem;
}
.kursstart h4.small{
  margin-bottom: 0;
}
.kursstart h4.small +
h5, .h5,
.lead, 
.tagline{
  font-family: "NordecoRegular";
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: .036rem;
  margin-bottom: 1.5rem;
}
.tagline{ 
  color: #fa5d00; 
  letter-spacing: .072rem;
  margin-bottom: .5rem;
  font-size: 1.125rem;
  font-family: "NordecoSemibold";
}
.bg-primary .tagline{
  color: #fa5d00; 
}
.lead{
  font-family: "NordecoRegular";
  font-size: 1.125rem;
  line-height: 1.5;
  letter-spacing: .036rem;
  margin-bottom: 1.5rem;
  margin-bottom: 2.25rem;
}
h6, .h6,
.small{
  font-family: "NordecoSemibold";
  font-size: .89rem;
  line-height: 1.25;
  letter-spacing: .075rem;
  margin-bottom: 1rem;
}
p{
  font-family: "NordecoRegular";
  font-size: 1rem;
  line-height: 1.375;
  letter-spacing: .075rem;
  margin-bottom: 1.5rem;
}

.highlighted-light{
  font-family: "Nordecobold";
  color: #FAB900 !important;
}

.highlighted{
  font-family: "NordecoSemibold";
  color: #FA4D00 !important;
}
.text-orange{
  font-family: "NordecoBold" !important;
  color: #FA4D00;
}
.text-primary{
  font-family: "NordecoBold" !important;
  color: #0064A0;
}
.text-light{
  font-family: "NordecoSemibold" !important;
  color: #FAB900 !important;
}

section{
  position: relative;
  padding: 120px 0;
}
footer{
  position: relative;
  padding: 4.5rem 0 1.5rem;
  background-color: #001920 !important;
  color: #99A3A5 !important;
}
footer a{
  margin-right: 1.5rem;
}
footer a:last-child{
  margin-right: 0rem;
}
.footer-top{
  padding-bottom: 2.5rem;
  margin-bottom: 1.125rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-brand{
  display: flex;
  align-items: center;
  gap: .85rem;
  font-family: "NordecoSemibold";
  font-size: 1.25rem;
  letter-spacing: .15rem;
  color: #fff !important;
  margin-bottom: .75rem;
  margin-right: 0;
  margin-top: -.4rem;
}
.footer-brand:hover{
  color: #FA4D00 !important;
}
.footer-brand img{
  width: 48px;
  height: auto;
  flex: none;
  margin-bottom: .25rem;
}
.footer-claim{
  font-family: "NordecoRegular";
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: .036rem;
  color: #99A3A5;
  max-width: 320px;
  margin-bottom: 0;
}
.footer-heading{
  font-family: "NordecoSemibold";
  font-size: 1rem;
  letter-spacing: .1rem;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li{
  margin-bottom: .75rem;
}
.footer-links li:last-child{
  margin-bottom: 0;
}
.footer-links a{
  margin-right: 0;
  font-family: "NordecoRegular";
  font-size: 1rem;
  line-height: 1.5;
  color: #B2B9BB !important;
}
.footer-links a:hover{
  color: #FA4D00 !important;
}
.footer-links-p{
  font-family: "NordecoRegular";
  color: #B2B9BB;
  margin-bottom: 1.5rem;
}
.footer-bottom{
  font-family: "NordecoRegular";
  font-size: .89rem;
  letter-spacing: .036rem;
  color: #B2B9BB;
}
.footer-bottom a{
  color: #0064A0 !important;
}
.footer-bottom a:hover{
  color: #FA4D00 !important;
}
@media screen and (max-width: 767px) {
  footer{
    padding: 3.5rem 0 1.5rem;
  }
  .footer-bottom .col-md-6:first-child{
    margin-bottom: .75rem;
  }
}

section.schwimmbad{
  height: 100vh;
  display: flex;
  align-items: center;
  background: #f2f2f3 url('../img/schwimmbad-eckenheim.jpg') center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
@media screen and (max-width: 1199px) {
  section.schwimmbad{
    height: auto;
    padding: 60px 0 150px;
    display: flex;
    align-items: center;
    background: #f2f2f3 url(../img/schwimmbad-eckenheim.jpg) center bottom no-repeat;
    background-attachment: inherit;
    background-size: contain;
  }
}

.navbar{
  padding: .75rem 0 0 0;
}
.navbar-light{
  background: #fff;
}
.navbar-light .navbar-brand,
.navbar-light .navbar-brand:focus{
  display: block;
  padding: 12px 24px 12px 30px;
  margin: 2px 0 0 0;
  font-family: "NordecoSemibold";
  font-size: 1.6rem;
  line-height: 1.25;
  letter-spacing: .216rem;
  color: #0064A0;
}
,
.navbar-light .navbar-brand:hover {
    color: #FAB900 !important;
}
@media screen and (max-width: 1524px) {
  .navbar-light .navbar-brand{
    font-size: 1.33rem;
    line-height: 1.9;
  }
}
@media screen and (max-width: 1476px) {
  .navbar-light .navbar-brand{
    letter-spacing: 0;
    font-size: 0rem;
    line-height: 1.9;
  }
}
@media screen and (max-width: 991px) {
  .navbar-light .navbar-brand{
    letter-spacing: 0;
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: .216rem;
  }
}
.navbar-light .navbar-brand img{
  width: 85px;
  height: 45px;
  position: relative;
  top: -8px;
}

.navbar-light .navbar-nav{
  margin-right: 18px;
}
@media screen and (max-width: 991px) {
  .navbar-light .navbar-nav{
    margin-bottom: 2rem;
  }
}
.navbar-light .navbar-toggler {
    color: #0064A0;
    border: none;
    font-size: 1.25rem;
    margin-right: 15px;
    border-radius: 0;
    margin-bottom: 12px;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0;
}
.navbar-light .navbar-toggler-icon {
  background-image: url('../img/burger-icon.svg') !important;
}
.navbar-light .navbar-nav .nav-link {
  display: block;
  padding: 0;
  margin: 0 12px;
  font-family: "NordecoSemibold";
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: .075rem;
  color: #0064A0;
}
@media screen and (max-width: 1164px) {
  .navbar-light .navbar-nav .nav-link {
    margin: 0 9px;
    font-size: 1.1rem;
    letter-spacing: .05rem;
  }
}
@media screen and (max-width: 1072px) {
  .navbar-light .navbar-nav .nav-link {
    font-size: 1rem;
  }
}
@media screen and (max-width: 1006px) {
  .navbar-light .navbar-nav .nav-link {
    margin: 0 8px;
    font-size: 1rem;
    letter-spacing: 0.025rem;
  }
}
@media screen and (max-width: 991px) {
  .navbar-light .navbar-nav .nav-link {
    margin: 1vh 0;
    font-size: 1.5rem;
    padding: 1rem 0 1rem 4rem;
  }
}
@media screen and (max-width: 767px) {
  .navbar{
    padding: .5rem 0 0 0;
  }
  .navbar-light .navbar-brand {
    padding: 12px 12px 6px 15px;
  }
  .navbar-light .navbar-brand{
    letter-spacing: 0;
    font-size: 0rem;
    line-height: 1.9;
  }
  .navbar-light .navbar-nav .nav-link {
    margin: 1vh 0;
    font-size: 1.5rem;
    padding: .5rem 0 0.5rem 2rem;
  }
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-brand:hover{
  color: #FA4D00 !important;
}

.navbar-light .navbar-nav .btn-primary {
  color: #fff;
  background-color: #FA4D00;
  border-color: #FA4D00;
  padding: 8px 16px;
  line-height: 1.4;
}
.navbar-light .navbar-nav .btn-primary:hover {
  color: #FA4D00;
  background-color: #fff;
  border-color: #FA4D00;
}
@media (max-width: 991px) {
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    background: #fff;
    position: relative;
    z-index: 1050;
    box-shadow: 0 8px 16px rgba(0, 25, 32, 0.36);
    padding-bottom: 1rem;
  }
}

@media screen and (max-width: 991px) {
  .navbar-nav .nav-item:last-child {
    padding-left: 2rem;  
    margin-top: 0.75rem;
  }
}

header{
  position: relative;
  height: calc(75vh + 83px);
  display: flex;
  align-items: center;
  background: #0064A0 url('../img/schwimmschule-roberto-header.jpg') center no-repeat;
  background-size: cover;
  color: #fff;
}
header .overlay{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right:0;
  background: linear-gradient(8deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0.6) 36%, rgba(0,0,0,0) 100%);
  
  background: linear-gradient(
    24deg,
    rgba(0, 25, 32, 0.75) 0%,
    rgba(0, 25, 32, 0.75) 42%,
    rgba(0, 25, 32, 0) 90%
  );
}
header .container-fluid{
  z-index: 10;
}
header .display{
  margin-bottom: 0;
}

header .stoerer{
  display: block;
  position: absolute;
  z-index: 1000;
  top: 16vh;
  right: 9vw;
  width: 220px;
  height: 220px;
  background: #fa5d00;
  border-radius: 50%;
  transform: rotate(12deg);
  padding: 26px;
  box-shadow: 0px 0px 1rem #000000;
}
header .stoerer:hover{
  transform: scale(1.2);
}

header .stoerer p{
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.25;
  padding-top: 30px;
  letter-spacing: 0.0375rem;
  text-shadow: none;
  color: #fff;
  font-family: "NordecoBold";
}

.trust-bar-section {
  margin-top: 0;
}
.trust-bar-list {
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}
.trust-bar-list li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.trust-bar-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(250, 77, 0, 0.078);
  border: 1px solid rgba(250, 77, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FA4D00;
}
.trust-bar-icon svg {
  width: 24px;
  height: 24px;
}
.trust-bar-text {
  display: flex;
  flex-direction: column;
}
.trust-bar-label {
  font-family: "NordecoRegular";
  font-size: 0.89rem;
  letter-spacing: 0.125rem;
  color: #0064a0;
}
.trust-bar-value {
  font-family: "NordecoRegular";
  font-size: 1.125rem;
  letter-spacing: 0.036rem;
  color: #001920;
}

@media screen and (max-width: 767px) {
  .trust-bar-list {
    flex-direction: column;
    gap: 1.25rem;
  }
}

.header-cta-row {
  margin-top: 2rem;
}
.header-cta-row .btn {
  margin-right: 1rem;
  margin-bottom: 0.75rem;
}
.header-cta-row .btn-light {
  color: #fff;
  background-color: rgba(255, 255, 255, .3);
}
.header-cta-row .btn-light:hover {
  color: #0064A0;
  background-color: rgba(255, 255, 255, 1);
}
.header-cta-row .btn:last-child {
  margin-right: 0;
}


img.border-round{
  border-radius: 2rem;
}

ul.list{
  padding-left: 3rem;
  list-style: none;
  position: relative;
  margin-bottom: 2.5rem;
}
@media screen and (max-width: 1199px) {
  ul.list{
    margin-bottom: 0rem;
  }
}
ul.list li{
  margin-bottom: 1rem;
}
ul.list li:before{
  content: '✔︎';
  color: #ED5618;
  font-family: "NordecoSemibold";
  font-size: 1.802rem;
  line-height: 1.25;
  letter-spacing: .144rem;
  position: absolute;
  left: .5rem; 
  margin-top: -.432rem;
}

ul.list.plus-list{
  font-family: "NordecoRegular";
  font-size: .89rem;
  line-height: 1.25;
  letter-spacing: .075rem;
  margin-bottom: 0rem;
  padding-left: 2rem;
  margin-bottom: 1rem;
}
ul.list.plus-list li{
  margin-bottom: .5rem;
}
ul.list.plus-list li:before{
  content: '+';
  font-family: "NordecoRegular";
  font-size: 1.802rem;
  line-height: 1;
  letter-spacing: .144rem;
  position: absolute;
  left: .25rem; 
  margin-top: -.55rem;
}


.btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 2px solid transparent;
    padding: 12px 16px;
    line-height: 1.4;
    font-family: "NordecoSemibold";
    font-size: 1.125rem;
    border-radius: 0.75rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
    color: #fff;
    background-color: #FA4D00;
    border-color: #FA4D00;
}
.btn-primary:hover {
    color: #FA4D00;
    background-color: #fff;
    border-color: #FA4D00;
}
.btn-primary-outline {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}
.btn-primary-outline:hover {
    color: #fff;
    background-color: #FA4D00;
    border-color: #FA4D00;
}
.btn-secondary {
    color: #fff;
    background-color: #0064A0;
    border-color: #0064A0;
}
.btn-secondary:hover {
    color: #0064A0;
    background-color: #fff;
    border-color: #fff;
}

.bg-primary{
  background-color: #0064A0 !important;
}
.bg-secondary{
  background-color: #FAB900 !important;
}
.bg-highlight{
  background-color: #fa5d00 !important;
}
.bg-dark{
  background-color: #001920 !important;
}
.bg-light{
  background-color: #FFF8E5 !important;
}
.bg-orange{
  background-color: #001920 !important;
  color: #fff !important;
}
.bg-grey{
  background-color: #f2f2f3 !important;
}

.kursstart {
  background: #f2f2f3;
}

.card{
  margin-bottom: 2rem;
}
.kursstart .card{
  margin-bottom: 0rem;
  border: none;
  border: 2px solid #f2f2f3;
  background: #fff;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  padding-bottom: 2rem;
}
@media (hover: hover) {
  .kursstart .card{
    padding-bottom: 3rem;
  }
  .kursstart .card li{
    position: absolute;
  }
  .kursstart .card li:last-child{
    transition: all .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    opacity: 0;
  }
  .kursstart  a:hover .card{
    border: 2px solid #FA4D00;
  }
  .kursstart  a.silber:hover .card{
    border: 2px solid #B2B9BB;
  }
  .kursstart  a.gold:hover .card{
    border: 2px solid #FAB900;
  }
  .kursstart  a.hai:hover .card{
    border: 2px solid #0064A0;
  }
  .kursstart a:hover .card li:first-child{
    transition: all .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    opacity: 0;
  }
  .kursstart a:hover .card li:last-child{
    display: block;
    opacity: 1;
  }
}

@media (max-width: 576px) {
  .kursstart .card li.button{
    transition: all .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    display: none;
  }
  .kursstart a{
    display: block;
    margin-bottom: 36px;
  }
}
.kursstart .card-list{
  margin-bottom: 2.25rem;
}

.card,
.img-card {
  padding: 1.5rem;
  border: none;
  border-radius: 1rem;
  border-top: .144rem solid #FA4D00;
  border-bottom: .288rem solid #FA4D00;
}
.img-card {
  border-color: #FA4D00;
  background: #fff;
  background-color: rgba(255,255,255, .96);
}
.card-title{
  text-align: center;
  margin-bottom: 0.5rem;
}
.kursstart .card-title{
  margin-bottom: 0;
}
.card-body {
  padding: 0;
}
.card-footer{
  background: none;
  margin: 0 -2rem -2rem -2rem;
  padding: 0 2rem 1.5rem 2rem;
  border: none;
}
.icon-schwimmkurs{
  width: 72%;
  max-width: 264px;
  margin: 0 auto;
  opacity: 1;
}
.img-100{
  max-width: 100%;
  width: auto;
}
.img-portrait{
  max-width: 340px;
  width: 100%;
}
.img-group {
  display: flex;
  padding: 0 1rem;
}
.img-group .icon-schwimmabzeichen {
    width: 60px;
    position: relative;
    background: #fff;
    border-radius: 50%;
    border: 4px solid #fff;
    left: 50%;
    top: -.5rem;
    margin: 0;
    padding: 0;
    margin-bottom: -2.5rem;
    transform: translate(-150%,-50%);
}
.img-group .icon-schwimmabzeichen-leistung {
    width: 60px;
    position: relative;
    background: #fff;
    border-radius: 50%;
    border: 4px solid #fff;
    left: 50%;
    top: -.5rem;
    margin: 0;
    padding: 0;
    margin-bottom: -2.5rem;
    transform: translate(-50%,-50%);
}
.icon-schwimmabzeichen{
  width: 84px;
  position: relative;
  left: 50%;
  transform: translate(-50%,-50%);
  margin-bottom: -3rem;
  background: #fff;
  border-radius: 50%;
  border: 6px solid #fff;
}
.kursstart .icon-schwimmabzeichen {
  margin-bottom: -2.5rem;
}
.icon-sommerfun {
width: 180px;
position: relative;
left: 50%;
transform: translate(-50%, -80%);
margin-bottom: -4.75rem;
}
.card-text:last-child {
    margin: 1rem 0 -.5rem;
}
.card-list,
.card-list-border-top{
  padding-left: 0;
  margin-bottom: 0;
}
.card-list-border-top{
  margin-top: 0rem;
  padding-top: 1rem;
  border-top: 1px dashed #FA4D00;
}
.card-list li,
.card-list-border-top li{
  display: inline-block;
  list-style-type: none;
  font-family: "NordecoSemibold";
  font-size: .89rem;
  margin-right: 1rem;
  letter-spacing: 0.0375rem;
  line-height: 1.5rem;
}
.card-list-space li{
  letter-spacing: 0.075rem;
  min-width: 132px;
  font-size: 1rem;
}
@media screen and (max-width: 991px) {
  .card-list-space li{
    letter-spacing: 0.075rem;
    min-width: 100%;
    font-size: 1rem;
  }
}
.card-list li span,
.card-list-border-top li span{
  font-family: "NordecoBold";
  color: #FA4D00;
}

blockquote{
  font-family: "NordecoRegular";
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: . 72rem;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  border-left: .445rem solid #FA4D00;
  border-right: .445rem solid #FA4D00;
  color: #0064A0;
  padding: 4rem 7.5%;
  background: #F2F3F3;
  border-radius: 2rem;
}
blockquote:before, blockquote:after {
  font-family: "NordecoRegular";
  font-style: normal;
  color: #0064A0;
  font-size: 2rem;
  line-height: 1;
}
blockquote:before {content: '\201e'}
blockquote:after {content: '\201c';}

.text-right{
  margin-top: 1rem;
}
@media screen and (min-width: 769px) {
  .text-right{
    text-align: right;
    margin-top: 0;
  } 
}
@media screen and (max-width: 767px) {
  .img-portrait {
      max-width: 100%;
  }
  section{
    padding: 60px 0;
  }
  header{
    height: 100vh;
    margin-bottom: -60px;
    align-items: end;
  }
  header .container-fluid{
    margin-bottom: 20vh;
  }
  section#ueber-uns{
    padding-top: 0;
  }
  img.border-round{
    border-radius: 0;
  }
  blockquote {
      font-family: "NordecoRegular";
      font-size: 1.15rem;
      font-style: italic;
      line-height: 1.5;
      letter-spacing: . 72rem;
      margin-top: 2.5rem;
      margin-bottom: 2.5rem;
      border-left: 0.445rem solid #ED5618;
      border-right: 0.445rem solid #ED5618;
      color: #0064A0;
      padding: 2rem 7.5%;
      background: #F2F3F3;
      border-radius: 2rem;
  }
  blockquote:before, blockquote:after {
      font-size: 1.5rem;
      line-height: 1;
  }
}

.fuer-wen-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1.75rem;
  height: 100%;
}
.fuer-wen-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #0064A0;
  color: #fff;
  margin-bottom: .75rem;
}
.fuer-wen-card h4 {
  margin-bottom: .5rem;
}
.fuer-wen-card p {
  margin-bottom: 0;
}


.stufen-stepper{
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.stufen-stepper .stufen-step{
  display: flex;
  align-items: center;
  gap: .625rem;
  font-family: "NordecoSemibold";
  font-size: 1.125rem;
  letter-spacing: .036rem;
  white-space: nowrap;
}
.stufen-stepper .stufen-step:first-child{
  margin-left: .25%;
}
.stufen-stepper .stufen-step:last-child{
  margin-right: 2.5%;
}
.stufen-stepper .stufen-badge{
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(0, 25, 32, .08);
}
.stufen-stepper .stufen-dot{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 4px rgba(178, 185, 187, .25);
}
.stufen-dot-bronze{ background: #FA4D00; }
.stufen-dot-silber{ background: #B2B9BB; }
.stufen-dot-gold{ background: #FAB900; }
.stufen-stepper .stufen-line{
  flex: 1 1 auto;
  height: 2px;
  min-width: 32px;
  margin: 0 1.25rem;
  border-radius: 2px;
}
.stufen-line-bronze-silber{
  background: linear-gradient(90deg, #FA4D00, #B2B9BB);
}
.stufen-line-silber-gold{
  background: linear-gradient(90deg, #B2B9BB, #FAB900);
}
@media screen and (max-width: 767px) {
  .stufen-stepper{
    flex-wrap: wrap;
    gap: .85rem 0;
  }
  .stufen-stepper .stufen-step{
    flex: 0 0 100%;
    font-size: 1rem;
  }
  .stufen-stepper .stufen-line{
    display: none;
  }
}

.faq-accordion .accordion-item{
  background: #F2F2F3;
  border: none;
  border-radius: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
}
.faq-accordion .accordion-item:last-child{
  margin-bottom: 0;
}
.faq-accordion .accordion-header{
  margin-bottom: 0;
}
.faq-accordion .accordion-button{
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.5rem;
  background: #F2F2F3;
  border: none;
  text-align: left;
  font-family: "NordecoSemibold";
  font-size: 1.125rem;
  line-height: 1.375;
  letter-spacing: .036rem;
  box-shadow: none;
}
.faq-accordion .accordion-button:focus{
  box-shadow: none;
  outline: none;
}
.faq-accordion .accordion-button::after{
  display: none;
}
.faq-accordion .faq-number{
  font-family: "NordecoBold";
  color: #FA4D00;
  font-size: .89rem;
  letter-spacing: .075rem;
  flex: none;
}
.faq-accordion .faq-toggle-icon{
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F2F2F3;
  flex: none;
  margin-left: auto;
  transition: background-color .2s ease-in-out;
}
.faq-accordion .faq-toggle-icon:before,
.faq-accordion .faq-toggle-icon:after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: #001920;
  border-radius: 2px;
  transition: background-color .2s ease-in-out, opacity .2s ease-in-out;
}
.faq-accordion .faq-toggle-icon:before{
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.faq-accordion .faq-toggle-icon:after{
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
}
.faq-accordion .accordion-button:not(.collapsed) .faq-toggle-icon{
  background: #FA4D00;
}
.faq-accordion .accordion-button:not(.collapsed) .faq-toggle-icon:before,
.faq-accordion .accordion-button:not(.collapsed) .faq-toggle-icon:after{
  background: #fff;
}
.faq-accordion .accordion-button:not(.collapsed) .faq-toggle-icon:after{
  opacity: 0;
}
.faq-accordion .accordion-body{
  padding: 0 1.5rem 1.5rem 3rem;
  font-family: "NordecoRegular";
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: .036rem;
  color: #4a5559;
}
@media screen and (max-width: 767px) {
  .faq-accordion .accordion-button{
    padding: 1.25rem;
    font-size: 1rem;
    gap: .75rem;
  }
  .faq-accordion .accordion-body{
    padding: 0 1.25rem 1.25rem 1.25rem;
  }
}
 
 
 .buchen-cta{
 }
 .buchen-cta .lead{
   color: #B2B9BB;
 }
 .buchen-cta .tagline{
   color: #FA4D00;
 }
 .buchen-note{
   display: flex;
   align-items: center;
   gap: .6rem;
   font-family: "NordecoRegular";
   font-size: .89rem;
   line-height: 1.375;
   color: #B2B9BB;
   margin-bottom: 0;
 }
 .buchen-note svg{
   flex: none;
   width: 20px;
   height: 20px;
   color: #FA4D00;
 }
 .buchen-tile{
   display: flex;
   align-items: center;
   gap: 1rem;
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 1rem;
   padding: 1.125rem 1.25rem;
   margin-bottom: 1.125rem;
 }
 .buchen-tile:last-child{
   margin-bottom: 0;
 }
 .buchen-tile-icon{
   flex: none;
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: rgba(250, 77, 0, .12);
   border: 1px solid rgba(250, 77, 0, .2);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #FA4D00;
 }
 .buchen-tile-icon svg{
   width: 24px;
   height: 24px;
 }
 .buchen-tile-label{
   font-family: "NordecoRegular";
   font-size: .89rem;
   letter-spacing: .125rem;
   color: #B2B9BB;
   margin-bottom: .15rem;
 }
 .buchen-tile-value{
   font-family: "NordecoSemibold";
   font-size: 1.125rem;
   letter-spacing: .036rem;
   color: #fff;
   margin-bottom: 0;
 }
 
// ===== Butler App ===== //

.modal-dialog{
  border-radius: 12px !important;
}
/* Butlerapp-Kursliste: heller Kasten in der dunklen Buchen-Sektion */
.butlerapp-kursliste {
    border-radius: 12rem;
    overflow-x: auto; /* Tabelle bleibt auf Mobilgeräten scrollbar */
}
.butlerapp-kursliste table { width: 100%; }
#kursliste { scroll-margin-top: 90px; } /* Anker landet nicht unter der fixen Navbar */

/* Buchungs-Overlay: Formular füllt das Modal */
#buchenModal .modal-body { height: 80vh; }
#buchenModalFrame { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 767px) {
    #buchenModal .modal-dialog { margin: 0; max-width: 100%; height: 100%; }
    #buchenModal .modal-content { height: 100%; border-radius: 0; }
    #buchenModal .modal-body { height: auto; flex: 1 1 auto; }
}

@media screen and (max-width: 991px) {}

@media screen and (max-width: 576px) {}


/* ============================================================
   ERGÄNZUNGEN OKT 2026 (vorher Inline-CSS in der index.html)
   Bewusst am Dateiende, damit sie wie vorher alles davor überschreiben.
   ============================================================ */

/* Butlerapp-Kursliste (aktuell auskommentiert, für später) */
.butlerapp-kursliste {
    border-radius: 1rem;
    overflow-x: auto; /* Tabelle bleibt auf Mobilgeräten scrollbar */
}
.butlerapp-kursliste table { width: 100%; }

/* Vierte Stufe im Stepper */
.stufen-line-gold-hai { background: linear-gradient(90deg, #FAB900, #0064A0); }

/* Kurstermine (Auflistung wie RS, schlanker) */
.kursstart .kurs-zeitraum { margin-bottom: 1.5rem; }
/* Zeitraum, Einzeltermine und freie Tage untereinander */
.kursstart .kurs-zeitraum li { display: block; margin-right: 0; margin-bottom: .25rem; }

/* Kurs-Umschalter Winterkurs / Kurs 1 */
.kurs-umschalter { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.kurs-umschalter button { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; font-family: "NordecoSemibold"; font-size: 1.125rem; line-height: 1.25; letter-spacing: .036rem; color: #0064A0; background: #fff; border: 2px solid #fff; border-radius: .75rem; padding: 10px 18px; cursor: pointer; transition: all .15s ease-in-out; }
.kurs-umschalter button small { font-family: "NordecoRegular"; font-size: .89rem; color: #4a5559; }
.kurs-umschalter button:hover { border-color: #FA4D00; }
.kurs-umschalter button.aktiv { background: #FA4D00; border-color: #FA4D00; color: #fff; }
.kurs-umschalter button.aktiv small { color: #fff; }
.kurs-umschalter button:focus-visible { outline: 3px solid #0064A0; outline-offset: 2px; }
#kurstermine[data-aktiv="winter"] .blk-k1,
#kurstermine[data-aktiv="k1"] .blk-winter { display: none; }
@media (max-width: 576px) {
    .kurs-umschalter button { flex: 1 1 100%; }
}
.kursstart .card p.kurs-zeit { text-align: center; margin-bottom: .5rem; }
.kursstart .card { transition: transform .15s ease-in-out, box-shadow .15s ease-in-out, border-color .15s ease-in-out; }

/* Icons: etwas verspielter – rund und zweifarbig */
.trust-bar-icon { width: 50px; height: 50px; border-radius: 50%; background: rgba(250, 77, 0, .08); border: 2px solid rgba(250, 77, 0, .22); }
.trust-bar-icon svg { width: 28px; height: 28px; }
.fuer-wen-icon, .buchen-tile-icon { border-radius: 50%; font-family: "NordecoBold"; font-size: 1.125rem; }

/* Einzeltraining: ganze Karte klickbar, dezenter Anfrage-Hinweis */
#einzeltraining .card { transition: border-color .15s ease-in-out, transform .15s ease-in-out, box-shadow .15s ease-in-out; cursor: pointer; }
.btn-anfragen { display: inline-block; font-family: "NordecoSemibold"; font-size: .95rem; color: #FA4D00; border: 2px solid #FA4D00; border-radius: .75rem; padding: 6px 14px; transition: all .15s ease-in-out; }

/* Hover nur auf Geräten mit Maus: Karten heben sich an */
@media (hover: hover) {
    #einzeltraining .card:hover,
    .kursstart a:hover .card { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0, 25, 32, .08); }
    #einzeltraining .card:hover .btn-anfragen { background: #FA4D00; color: #fff; }
}

/* Touch-Geräte: Anmelde-Hinweis direkt sichtbar statt erst beim Hovern */
@media (hover: none) {
    .kursstart .card li:first-child { display: none; }
    .kursstart .card li.button { display: inline-block !important; }
    .kursstart .card li.button span { display: inline-block; color: #fff; background: #FA4D00; border-radius: .75rem; padding: 4px 12px; }
    .kursstart .card-footer { text-align: center; }
}

/* Mobil: Kurskarten kompakter, damit die Terminliste nicht endlos wird */
@media (max-width: 576px) {
    .kursstart .card { padding: 1rem .75rem 1.25rem; }
    .kursstart .icon-schwimmabzeichen { width: 64px; border-width: 4px; margin-bottom: -2rem; }
    .kursstart h3.card-title { font-size: 1.15rem; margin-bottom: .5rem; }
    .kursstart a { margin-bottom: 24px; }
    .kursstart .card-footer { margin: 0 -1rem -1rem; padding: 0 1rem 1rem; }
    .kursstart h3 { margin-top: 1.5rem; }
}

/* Anker landen nicht unter der fixen Navigation */
section[id] { scroll-margin-top: 30px; }

/* Mobil (nur Startseite): Header-Höhe, Abstände, Stufen-Leiste ausblenden */
@media (max-width: 767px) {
    .startseite .trust-bar-section { padding-top: 3rem !important; }
    .startseite #kurse .stufen-stepper { display: none; }
    .startseite header { height: 67vh; margin-bottom: 0; }
    .startseite header .container-fluid { margin-bottom: 5vh; }
    .startseite section#ueber-uns { padding-top: 3rem; }
    /* Logo bleibt beim Antippen exakt gleich (alle Seiten) */
    .navbar-light .navbar-brand:focus,
    .navbar-light .navbar-brand:active { font-size: 0; letter-spacing: 0; line-height: 1.9; padding: 12px 12px 6px 15px; outline: none; }
}
@media (min-width: 992px) and (max-width: 1476px) {
    .navbar-light .navbar-brand:focus { font-size: 0; letter-spacing: 0; line-height: 1.9; }
}

/* Abstand "Kurse entdecken" zu den Icons – je Breakpoint */
@media (min-width: 768px) and (max-width: 1199px) {
    .startseite .trust-bar-section { padding-top: 3.5rem !important; }
}
@media (min-width: 1200px) {
    .startseite .trust-bar-section { padding-top: 4.5rem !important; }
}

/* Lange Mailadresse im Footer bricht um */
.footer-links a { overflow-wrap: anywhere; }

/* Absatz auf Absatz: einheitlich 1.5rem Abstand (auch bei .lead) */
p:has(+ p),
p.lead:has(+ p) { margin-bottom: 1.5rem; }