@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&family=Balsamiq+Sans:wght@400;700&display=swap');

:root{
  --ink: #035a72;     /* dunkles Blaugrün (Buttons/Headlines) */
  --sky: #90c8cc;     /* helles Blau */
  --peach:#e98546;
  --ice:#cde6e8;
  --coolice:#e9f4f3;
  --blassrosa:#f1e9d1;
  --rosa:#efbc9c;
  --white:#ffffff;
  --topbar-h: 34px; /* grob, wird per JS dynamisch überschrieben */
  --wave-h: 28px;
}
html, body{
  margin: 0;
  padding: 0;
}
body{
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #20333b;
  background: #fff;
}

h1, h2, h3, .hero-title, .hero-kicker, .section-title, .btn-peach, .btn-ink{
  font-family: 'Balsamiq Sans', 'Roboto', sans-serif;
  font-weight: 700;
}
a {
    color: var(--sky);
}
.topbar{
  height: 38px;
  max-height: 38px;
  padding: 0 !important;
  border: 0;
  outline: 0;
  box-shadow: none;
  line-height: 1;
  font-size: 0.75rem;
  background: linear-gradient( 90deg, #ffffff 30%, #cfe7ee 100%);
  color: #2c4b57;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: transform .2s ease, opacity .2s ease;
}
.topbar .container{
  height: 38px;
  display: flex;
  align-items: center;
}

.topbar .btn-lang{
  height: 100%;
  min-height: 38px;
  padding: 0 0.75rem;        /* nur horizontal */
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  border: 0px solid rgba(15,77,105,.25);
  border-radius: 0;
  font-size: 0.75rem;
  line-height: 1;
  color: #1f3f4c;
}
.translate-select select{
  font-size: 0.75rem;
  padding: .2rem .5rem;
  border-radius: .4rem;
  min-width: 180px;
}
.translate-select select:hover{
  border-color: #0d6efd;
}

.site-header{
  position: relative;
  background: #fff;
  z-index: 10;
}

.site-header{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1030; /* über Inhalt, unter Offcanvas ok */
  transition: padding .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Die Welle sitzt am unteren Rand des Headers und bleibt beim Scrollen sichtbar */
.site-header::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--wave-h) * -1); /* hängt „unter“ dem Header */
  height: var(--wave-h);
  background-image: url("../Images/wave_top.png");
  background-repeat: repeat-x;
  background-position: center bottom;
  pointer-events: none;
}


.brand{
  position: relative;
  z-index: 1040; /* über Header + Welle */
  height: 85px;
}
.brand-logo{
  height: 105px;
  width: auto;
  position: relative;
  top: -20px;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), top .45s cubic-bezier(.22,.61,.36,1);
  transform-origin: left center;
}

/* Shrink beim Scroll (50%) */
.site-header.is-shrink .brand-logo{
  transform: scale(.5);
  top: -6px;
}
.site-header.is-shrink .brand{
  height: 65px;
}
.site-header.is-shrink::after{
  bottom: -20px;
}


/* Container-Padding im Header (wenn du statt py-3 lieber CSS steuern willst) */
.site-header .container{
  transition: padding .2s ease;
}

/* Header wird etwas kompakter beim Shrink */
.site-header.is-shrink .container{
  padding-top: .45rem !important;
  padding-bottom: 0rem !important;
}

/* Topbar hide animation */
.topbar{
  transition: transform .2s ease, opacity .2s ease;
  will-change: transform;
  color: #000;
}
.topbar.is-hidden{
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.topbar a{
  color: #035a72;
  text-decoration: none;
}

.menu-label{
  font-size: .9rem;
  letter-spacing: .08em;
  color: #000;
}
/* Menü-Button */
.btn-menu{
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #000;
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: none !important;
}

/* MENU Text */
.btn-menu .menu-label{
  font-weight: 400;
  line-height: 1;
  font-family: 'Balsamiq Sans', 'Roboto', sans-serif;
  padding-top: 4px;
}

/* Hamburger */
.hamburger{
  width: 22px;
  height: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Linien */
.hamburger span{
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* mittlere Linie kürzer */
.hamburger span:nth-child(2){
  width: 14px;
}
.btn-close {
  --bs-btn-close-opacity: 1;
}

.offcanvas-body {
    padding: 2rem;
}
.offcanvas-nav .nav-item-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.offcanvas-nav .nav-parent{
  flex: 1 1 auto;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.6rem 0;
}

.offcanvas-nav .nav-toggle{
  flex: 0 0 auto;
  border:0;
  background:transparent;
  padding:.6rem .2rem;
  line-height:1;
  display:flex;
  align-items:center;
}

.nav-chevron{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .25s ease;
}

.nav-chevron::before{
  content:"";
  width:24px;
  height:24px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}
.nav-parent[aria-expanded="true"] .nav-chevron{
  transform: rotate(90deg);
}


/* Children block */
.offcanvas-nav .nav-children-inner{
  padding-left:18px;
  padding-bottom:6px;
}

.offcanvas-nav .nav-child{
  padding:.35rem 0;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.95;
}
.nav-logo{
  padding: 1rem;
  margin-top: 2rem;
}
.nav-logo img{
  width: 100%;
  height: auto;
}
.nav-link {
    color: #000;
    font-family: 'Balsamiq Sans', 'Roboto', sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 700;
}
.nav-link.active {
    color: var(--sky);
}
.nav-link:hover {
    color: var(--sky);
}

/* HERO */
.hero{
  position: relative;
  overflow: hidden;
  min-height: 740px;
  padding-top: var(--wave-h);
}

.hero-bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.02);
}

.hero-content{
  position: relative;
  z-index: 2;
  padding-top: 5.25rem;
  padding-bottom: 0px;
  min-height: 740px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero-badge{
  width: 805px;
  height: 520px;
  background-image: url("../Images/kreis.png");
  background-repeat: no-repeat;
  background-position: center center;
  padding-top: 6rem;
}

.bird{
  width: 120px;
  height: 98px;
}

.hero-kicker{
  color: var(--sky);
  font-weight: 500;
  font-size: 36px;
}

.hero-title{
  color: var(--ink);
  font-weight: 500;
  font-size: 48px;
}

.btn{
  border: 0;
  padding: .65rem 1.45rem .5rem;
  border-radius: 6px;
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
}
.btn-peach{
  background: var(--peach);
  color: #fff;
}
.btn-peach:hover{ filter: brightness(.98); color:var(--peach); }

.btn-ink{
  background: var(--ink);
  color: #fff;
}
.btn-ink:hover{ filter: brightness(.98); color:var(--ink); }

.wave{
  position: absolute;
  left: 0;
  width: 100%;
  height: 29px;
  background-repeat: repeat-x;
  background-position: center;
  pointer-events: none;
  z-index: 3;
}

/* weiße „Papier“-Welle */
.wave-top{
  top: 0;
  background-image: url("../Images/wave_top.png");
}

.wave-bottom{
  bottom:-1px;
  background-image: url("../Images/wave_bottom.png");
  border-bottom: solid 1px white;
}

/* soft (hellblau) Wellen für Sektionen */
.wave.soft.wave-top{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 110'%3E%3Cpath fill='%23cfe7ee' d='M0 60c70 0 90-30 160-30s90 30 160 30 90-30 160-30 90 30 160 30 90-30 160-30V110H0z'/%3E%3C/svg%3E");
}
.wave.soft.wave-bottom{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 110'%3E%3Cpath fill='%23cfe7ee' d='M0 60c70 0 90-30 160-30s90 30 160 30 90-30 160-30 90 30 160 30 90-30 160-30V110H0z'/%3E%3C/svg%3E");
}


/* Subpage Hero */
.hero--subpage{
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: auto;
}
.hero--subpage .hero-bg--solid{
  position:absolute;
  inset:0;
  background: var(--ice);
  z-index: 0;
}
.hero--subpage .hero-content{
  position: relative;
  z-index: 2;
  height: 220px;
  display: flex;
  align-items: center;
  padding: 0;  
  min-height: auto;
}
.wave-area{
  position: absolute; 
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  overflow: hidden;
  z-index: 1;
}
.wave.wave-bottom{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
}
.bird-parallax{
  position: absolute;
  right: 5rem;
  bottom: -35px;
  width: clamp(110px, 16vw, 140px);
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.bird-parallax img { 
  transform: scale(1);
  transform-origin: 50% 100%; 
}
.bird-inner{
  transition: opacity .6s ease, transform .9s cubic-bezier(.2,.9,.2,1);  
  transform: translateY(250px);
  animation: birdEnter 2000ms cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: 850ms;
}
.hero--subpage .wave-area.is-anim .bird-inner{
  opacity: 1;
  transform: translateY(0);
}
.bird-parallax img{
  width:100%;
  height:auto;
  display:block;
}
@keyframes birdEnter{
  0%   { opacity: 0; transform: translateY(130px); }

  /* ultraschneller Impact */
  15%  { opacity: 1; transform: translateY(-26px); }

  /* sofortiges starkes Zurückfedern */
  25%  { transform: translateY(20px); }
  35%  { transform: translateY(-18px); }
  45%  { transform: translateY(14px); }
  55%  { transform: translateY(-10px); }
  65%  { transform: translateY(7px); }
  75%  { transform: translateY(-5px); }
  85%  { transform: translateY(3px); }
  92%  { transform: translateY(-2px); }

  100% { transform: translateY(0); }
}
.hero--subpage .wave-area .bird-parallax img{
  width: 100% !important;
  height: auto !important;
  display: block;
}


/* Sections */
.section{
  padding: 4.5rem 0;
}

main h2{
  color: var(--ink);
  font-weight: 500;
  font-size: 48px;
  margin-bottom: 20px;
}

.sec {
    position: relative;
    overflow: hidden;
}
.sec--div-top-elements {
    overflow: visible;
    margin-top: 80px;
}
.sec > .container{
    z-index: 2;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.sec--bg-white {
    background-color: #ffffff;
    color: #222;
}

.sec--bg-blue {
    background-color: #cde6e8;
    color: #ffffff;
}

.divider{
  width: 100%;
  height: 169px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 5;
}
.sec--div-top-elements .divider{
    position: absolute;
    height: 79px;
    top: -79px;
}

.divider--top{
  top: 0;
}
/* Form 1 */
.sec--div-top-landscape.sec--bg-white .divider--top{
  background-image:url("../Images/divider_landscape_blue.png");
}
.sec--div-top-landscape.sec--bg-blue .divider--top{
  background-image:url("../Images/divider_landscape_white.png");
}

/* Form 2 */
.sec--div-top-elements.sec--bg-white .divider--top{
  background-image:url("../Images/divider_elements_white.png");
  background-size: auto;
}
.sec--div-top-elements.sec--bg-blue .divider--top{
  background-image:url("../Images/divider_elements_blue.png");
  background-size: auto;
}

/* Form 3 */
.sec--div-top-wave.sec--bg-white .divider--top{
  background-image:url("../Images/divider_wave_white.png");
}
.sec--div-top-wave.sec--bg-blue .divider--top{
  background-image:url("../Images/divider_wave_blue.png");
}

/* News cards */
.news-card{
  display:block;
  text-decoration:none;
  color: inherit;
}

.news-img{
  width: 100%;
  height: 290px;
  border-radius: 22px;
  background-size: cover;
  background-position: center;
}

.news-body{
  padding: 1.5rem .25rem 0 .25rem;
}

.news-meta{
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  letter-spacing: .12em;
  color: var(--peach);
}

.news-title{
  font-size: 30px;
  line-height: 36px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 1rem;
  font-family: 'Balsamiq Sans', 'Roboto', sans-serif;
}

.btn-round{
  border-radius: 999px;
  padding: .55rem 1.05rem;
}

/* Dates section */
.date-card{
  background:#fff;
  border-radius: 10px;
  padding: 1.2rem 1.1rem;
  border: 1px solid rgba(15,77,105,.12);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  min-height: 140px;
}

.date-dow{
  font-size: 18px;
  color: #000;
  font-weight: 500;
  font-family: 'Balsamiq Sans', 'Roboto', sans-serif;
}

.date-date{
  font-size: 24px;
  color: var(--ink);
  font-weight: 500;
  font-family: 'Balsamiq Sans', 'Roboto', sans-serif;
}

.date-time{
  font-size: 18px;
  color: var(--peach);
  font-weight: 500;
  margin-bottom: .35rem;
  font-family: 'Balsamiq Sans', 'Roboto', sans-serif;
  padding-bottom: 10px;
}

.date-text{
  font-size: 14px;
  color: #000;
  position: relative;
  padding-top: 30px;
}
.date-text::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12px;
  background-image: url("../Images/welle.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 12px;
}

/* Quicklinks */
.quicklink{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: var(--ink);
  font-size: 30px;
  font-weight: 500;
  font-family: 'Balsamiq Sans', 'Roboto', sans-serif;
  border-radius: 18px;
  padding: 1.35rem 1rem;
  min-height: 190px;
  transition: transform .12s ease, box-shadow .12s ease;
}

.quicklink:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0,0,0,.10);
  color: var(--ink);
}

.ql-peach{ background: var(--peach); }
.ql-sky{  background: var(--sky); }
.ql-ice{   background: var(--ice); }
.ql-coolice{   background: var(--coolice); }
.ql-rosa{  background: var(--rosa); }
.ql-blassrosa{  background: var(--blassrosa); }

frame-type-image img,
.ce-gallery img,
.ce-textpic img,
.ce-image img,
.news-img-wrap img {
  border-radius: 16px;   /* Größe nach Geschmack */
  overflow: hidden;
}
.ce-column {
    margin-right: 30px;
}



/* Footer */
.site-footer{
  position: relative;
  background: var(--sky2);
  overflow:hidden;
  background-image:url("../Images/bg_footer.jpg");
  background-position: center;
  background-repeat: no-repeat;

}
.footer-top{
    min-height: 200px;
}
.footer-head{
  font-weight: 800;
  color: #24424e;
  margin-bottom: .5rem;
  font-family: 'Balsamiq Sans', 'Roboto', sans-serif;
}

.site-footer a{
  text-decoration:none;
  color:#087fa5;
}
a.footer-link{
  display:block;
  text-decoration:none;
  color:#087fa5;
  padding: .15rem 0;
  font-weight: 500;
  font-size: 15px;
}

.footer-link:hover{ color: var(--ink); }

.footer-contact{
  color:#000;
  font-family: 'Balsamiq Sans', 'Roboto', sans-serif;
}

.footer-bottom{
  padding-top: 1rem;
  color:#000;
  font-size: 12px;
}
.footer-bottom a{
  color:#000;
  text-decoration: none;
  font-size: 12px;
}
.footer-nav--cols{
  column-count: 2;
  column-gap: 3rem;
  max-width: 350px;
}

.footer-nav--cols .footer-link{
  display:block;
  padding: .2rem 0;
  break-inside: avoid;
}


.news-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
}


.news-card{ background:transparent; }

.news-card__link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.news-card__media{
  height:220px;
  border-radius:18px;
  overflow:hidden;
}

.news-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.news-card__placeholder{
  width:100%;
  height:100%;
  background:#e9eef3;
}

.news-card__body{
  padding-top:18px;
}

.news-card__kicker{
  display:inline-block;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--peach);
  margin-bottom:10px;
}

.news-card__title{
    margin: 0;
    font-size: 28px;
    line-height: 1.12;
    color: var(--ink);
    font-weight: 500;
}

.news-card__link:hover .news-card__title{
  text-decoration:underline;
}


.news ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0; 
  align-items: center;
  padding-left: 0rem;
    margin-bottom: 20px;
}

.news li{
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: baseline;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--peach);
}

.news li + li::before{
  content: "|";
  margin: 0 .7em;
  color: var(--peach);
  opacity: .7;
}

/* Link übernimmt Kicker-Farbe */
.news li a{
  color: inherit;
  text-decoration: none;
}

/* Hover */
.news li a:hover{
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Active Zustand */
.news li a.active{
  font-weight: 600;
  opacity: 1;
}

.news-count{
  letter-spacing: normal;
  margin-left: .4em;
  opacity: .6;
}


.event-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
}
.event-card{
  background:#fff;
  border-radius:12px;
  padding:34px 26px;
  text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
}

.event-card__weekday{
  font-weight:500;
  font-family: 'Balsamiq Sans', 'Roboto', sans-serif;
  margin-bottom:6px;
  color: #000;
}

.event-card__date{
  font-size:28px;
  font-weight:500;
  font-family: 'Balsamiq Sans', 'Roboto', sans-serif;
  line-height:1.15;
  color: var(--ink);
  margin-bottom:6px;
}

.event-card__time{
  color: var(--peach);
  font-family: 'Balsamiq Sans', 'Roboto', sans-serif;
  font-weight:500;
  margin-bottom:14px;
}

.event-card__divider{
  color:rgba(0,0,0,.35);
  display:flex;
  justify-content:center;
  margin:6px 0 18px;
}

.event-card__text,
.event-card__text a{
  font-size:14px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#111;
  text-decoration:none;
}

.event-card__text a:hover{
  text-decoration:underline;
}

.quicklink{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 16px;
  border-radius:15px;
  text-decoration:none;
  font-weight:500;
  color:#0b3a44;
  transition:transform .12s ease, box-shadow .12s ease;
  margin-bottom:45px;
  margin-bottom:20px;
}
.row > .col-md-4:last-child .quicklink {
  margin-right: 0;
}

.quicklink:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.quicklink--peach{ background:var(--peach) }
.quicklink--blassrosa{ background:var(--blassrosa) }
.quicklink--sky  { background:var(--sky) }
.quicklink--ice  { background:var(--ice) }
.quicklink--ink  { background:var(--ink) }


/* Container fürs Parallax-Objekt */
.kf-parallax{
  position: absolute;
  top: 0px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 3;
}
.kf-parallax.right{
  left: auto;
  right: 0;
}
.secdivider .kf-parallax{
  top: 130px;
}
.kf-parallax__img{
  width: 755px;
  height: auto;
  display: block;
  transform: translate3d(-120px, 0, 0);
  will-change: transform;
}
.kf-parallax.right img{
  transform: scaleX(-1);
}


.news-single .footer {
    border-top: 0px solid #eee;
}

.news-single .article .news-img-wrap {
    float: none;
    clear: both;
    width: 100%;
    margin: 30px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.news-single .article .news-img-wrap .outer {
    width: calc(25% - 12px);
    margin: 0;
}

.news-single .article .news-img-wrap img,
.news .article .news-img-wrap img {
    float: none;
    display: block;
    width: 100%;
    height: auto;
}
.article .frame-type-textpic{
  margin-top: 30px;
}