@font-face {
  font-family: 'Cicle';
  src: url('../fonts/Cicle_Semi.woff2') format('woff2'),
  	url('../fonts/Cicle_Semi.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cicle';
  src: url('../fonts/Cicle_Gordita.woff2') format('woff2'),
  	url('../fonts/Cicle_Gordita.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --pink:     #dd0079;
  --darkpink: #5d002f;
  --gold:     #f8aa00;
  --black:    #242836;
  
  --bg-tagline: #ffb5d9;
  --bg-tcm:     #ff7b94;
  --bg-ibp:     #ff886e;
  --bg-narm:    #ff9056;
  --bg-kreise:  #ff9a3e;
  --bg-ueber:   #ffa323;
  --bg-infos:   #f8aa00;
  --ff:  'Cicle', 'Trebuchet MS', Arial, sans-serif;
  --max: 970px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff);
  color: var(--black);
  background: #fff;
  font-size: 18px;
  line-height: 1.7;
}
a       { color: var(--pink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ══ HERO ══ */
.hero {
  position: relative;
  /*background-image: url('/uploads/wasser-edit10.webp'); WASSER BKG*/
  background: var(--pink);
  width: 100%;
  height: 100svh;
  overflow: hidden;
  clip-path: inset(0);
}






.hero-titlebar {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--pink);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1.8rem 1.5rem 1.6rem;
  text-align: center;
}
.hero-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--gold);
  letter-spacing: .1em;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.hero-sub {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--darkpink);
  letter-spacing: .12em;
  margin-top: .2rem;
  line-height: 1;
}
.hero-ball {
  position: absolute;
  z-index: 2;
  width: clamp(260px, 28vw, 360px);
  height: clamp(260px, 28vw, 360px);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background-image: url('/uploads/Logo_Punkt-alpha.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.2));
}

/* ══ NAV ══ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  height: 58px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.nav-inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.nav-inner > nav{
  margin-left:auto;
}
.nav-logo {
  display: flex; align-items: center; gap: .6rem;
  color: var(--gold);
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: .08em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 3rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.nav-logo img { width: 34px; height: 34px; object-fit: contain; }

.tel{ font-size:1.2rem;}
.tel a{  color:var(--darkpink);}
.tel a:hover{  color:var(--gold)}

.nav-links {
  display: flex; list-style: none;
}
.nav-links li:last-child a { padding-right: 0; }
.nav-links a {
  color: var(--darkpink);
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: .05em;
  padding: .4rem 1rem;
  transition: color .15s;
}
.nav-links a:hover { color: var(--gold); text-decoration: underline; }
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  padding: 4px;
}
.burger span { display: block; width: 24px; height: 2px; background: var(--darkpink); }

/* ══ SEKTIONEN ══ */
.section { padding: 4.5rem 2rem; }
.section-inner { max-width: var(--max); margin: 0 auto; hyphens:auto; }

.section-tagline { background: var(--bg-tagline); }
.section-tcm     { background: var(--bg-tcm); }
.section-ibp     { background: var(--bg-ibp); }
.section-kreise  { background: var(--bg-kreise); }
.section-ueber   { background: var(--bg-ueber); }
.section-infos   { background: var(--bg-infos); }

.tagline-title {
  font-size: clamp(1.2rem, 5vw, 2.8rem);
  font-weight: bold;
  color: var(--gold);
  line-height: 1.2;
  margin-bottom: 1.8rem;
  letter-spacing: .02em;
}

.tagline{
  display:flex;
  min-height:100vh;
  align-items:center;
  justify-content:flex-end;
  flex-direction:column;
  padding-bottom:5vh;
}

.sec-title {
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 1.8rem;
  letter-spacing: .02em;
  color: var(--black);
  max-width: 550px; 		 /*h2 max-width*/
}
.sub-title {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: .7rem;
  margin-top: 2.2rem;
  letter-spacing: .01em;
  color: var(--black);
}
.mt-0 {margin-top: 0;} /*h3 direkt unter h2*/
.section p {
  font-size: 1.2rem;
  line-height: 1.55;
  margin-bottom: .5rem;
  color: var(--black);
}
.section p:last-child { margin-bottom: 0; }

.section p strong { font-weight: bold; }
.section .intro-p { margin-bottom: 2rem; }

/* Text auf farbigen Sektionen */
.section-tcm p, .section-tcm h2, .section-tcm h3,
.section-ibp p, .section-ibp h2, .section-ibp h3,
.section-kreise p, .section-kreise h2, .section-kreise h3,
.section-ueber p, .section-ueber h2, .section-ueber h3,
.section-infos p, .section-infos h2, .section-infos h3 { color: var(--black); }






/* ══ BANNER ══ */
.section-banner {
  width: 100%; height: 67vh;
  object-fit: cover; object-position: center 40%;
  display: block;
}

/* ══ FOOTER ══ */
.footer {
  background: var(--pink);
  padding: 2.5rem 2rem;
  text-align: center;
  font-size: .9rem;
  font-weight: bold;
  color: var(--darkpink);
  letter-spacing: .06em;
}

/* ══ RESPONSIVE ══ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--pink);
    padding: .6rem 1.4rem 1rem;  
  }
  .tel{display:none;}
  .tel-symbol{display:flex;}
  .burger { display: flex; }
  .hero-ball { width: 220px; height: 220px; }
  .tagline { padding-bottom:10vh; }
  .section-banner { height: 40vh; }
  .section { padding: 3rem 14px; }
}

/* ══ ANIMATIONEN ══ */
.slide-left,
.slide-right {
  opacity: 0;
  display: inline-block;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fromLeft {
  from { transform: translateX(-300px); }
  to   { transform: none; }
}
@keyframes fromRight {
  from { transform: translateX(300px); }
  to   { transform: none; }
}
.slide-left.run {
  animation:
    fadeIn   2s ease .2s both,
    fromLeft 3s cubic-bezier(.25,1,.5,1) .2s both;
}
.slide-right.run {
  animation:
    fadeIn    2s ease .5s both,
    fromRight 3s cubic-bezier(.25,1,.5,1) .5s both;
  margin-left:10vw;
}
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.reveal.visible { opacity: 1; transform: none; }