@charset "utf-8";
/* CSS Document */

.comic-neue-light {
  font-family: "Comic Neue", cursive;
  font-weight: 300;
  font-style: normal;
}

.comic-neue-regular {
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: normal;
}

.comic-neue-bold {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  font-style: normal;
}

.comic-neue-light-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 300;
  font-style: italic;
}

.comic-neue-regular-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 400;
  font-style: italic;
}

.comic-neue-bold-italic {
  font-family: "Comic Neue", cursive;
  font-weight: 700;
  font-style: italic;
}
body {
  margin:0;
  font-family:  ' Arial, sans-serif;
  background: linear-gradient(120deg,#f9fbe7 0%,#e3f9fd 100%);
  color: #222;
}
header {
  background: linear-gradient(90deg,#ff85a2 0%,#fff200 40%,#5eefff 100%);
  padding: 1.2rem 0 0.9rem 0;
  box-shadow:0 2px 16px #e7e7e7;
  position:sticky;top:0;z-index:10;
}
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
  padding: 0 1rem;
}
.logo {
  width: 92px;
  height: auto;
  margin-right: 1rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 16px #b7eab7;
  border: 4px solid #5eefff;
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  background: linear-gradient(90deg,#ff85a2 50%,#5eefff 100%);
  border-radius: 22px;
  padding: 0.6rem 1.2rem;
  font-size:1.1rem;
  box-shadow:0 0 6px #fccfa2;
  border:2px solid #fff;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
nav a:hover {
  background: linear-gradient(90deg,#fff200 50%,#d291ff 100%);
  color: #ff85a2;
  box-shadow:0 0 12px #5eefff;
}

.hero {
  background: linear-gradient(120deg,#fff200 0%,#ff85a2 80%,#5eefff 100%);
  padding:3.5rem 1rem 2.5rem 1rem;
  box-shadow:0 2px 24px #e7e7e7;
  border-bottom-left-radius:60px;
  border-bottom-right-radius:60px;
}
.hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin:auto;
  gap:2.5rem;
}
.hero-inner div {
  flex:2;
}
.hero-logo {
  flex:1;
  width:180px;
  height:auto;
  margin:auto;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 20px #5eefff;
  border:5px solid #ff85a2;
}
.highlight {
  color: #fff;
  background: linear-gradient(90deg,#ff85a2 50%,#5eefff 100%);
  padding: 0.2rem 0.6rem;
  border-radius: 16px;
  font-family: 'Comic Neue', 'Comic Sans MS', cursive;
  font-size:2.2rem;
  letter-spacing:2px;
}
.cta-btn {
  display: inline-block;
  background: linear-gradient(90deg,#5eefff 0%,#ff85a2 100%);
  color: #fff;
  font-size: 1.4rem;
  border-radius: 32px;
  padding: 1rem 2.3rem;
  margin-top:2rem;
  box-shadow: 0 6px 16px #fccfa2;
  text-decoration: none;
  border:3px solid #fff200;
  font-family: 'Comic Neue', 'Comic Sans MS', cursive;
  animation: bounceCta 2.5s infinite;
  transition:background 0.2s, box-shadow 0.2s;
}
@keyframes bounceCta {
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
.cta-btn:hover {
  background: linear-gradient(90deg,#fff200 0%,#ff85a2 100%);
  color: #ff85a2;
  box-shadow: 0 12px 32px #5eefff;
}

.features {
  max-width:1200px;
  margin:2.5rem auto;
  padding:0 1rem;
}
.features h2 {
  text-align: center;
  margin-bottom:2rem;
  color: #d291ff;
  font-family:'Comic Neue', 'Comic Sans MS', cursive;
  font-size:2.1rem;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 2.4rem;
}
.feature-card {
  background: linear-gradient(120deg,#fff 70%,#ffe7fa 100%);
  border-radius: 30px;
  box-shadow: 0 6px 24px #e7e7e7;
  text-align: center;
  padding: 1.7rem 1.2rem 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.18s, box-shadow 0.18s;
  border:3px solid #ff85a2;
}
.feature-card:hover {
  transform: scale(1.06) rotate(-2deg);
  box-shadow: 0 16px 48px #d291ff;
  border:3px solid #fff200;
}
.feature-card img {
  width:100%;
  max-width:260px;
  height:200px;
  object-fit:cover;
  border-radius: 22px;
  margin-bottom:1rem;
  box-shadow: 0 2px 14px #fccfa2;
  border:4px solid #5eefff;
  background: #fff;
}
.feature-card h3 {
  color: #ff85a2;
  margin-bottom:0.5rem;
  font-family:'Comic Neue', 'Comic Sans MS', cursive;
  font-size:1.35rem;
}
.feature-card p {
  font-size:1.09rem;
  font-weight:500;
}

.zeiten, .preise, .galerie, .kontakt, .recht {
  max-width: 700px;
  margin: 2.5rem auto;
  background: linear-gradient(120deg,#ffe7fa 70%,#e3f9fd 100%);
  border-radius: 30px;
  box-shadow: 0 2px 24px #e7e7e7;
  padding: 2.2rem 1.5rem;
  border:3px solid #5eefff;
}
.zeiten h2, .preise h2, .galerie h2, .kontakt h2, .recht h2 {
  color: #d291ff;
  margin-bottom:1.2rem;
  font-family:'Comic Neue', ;
  font-size:1.6rem;
}
.zeiten ul, .preise ul {
  list-style: none;
  padding:0;
  font-size:1.17rem;
}
.galerie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:2rem;
  margin-top:1.7rem;
}
.galerie-grid img {
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius: 18px;
  box-shadow: 0 8px 32px #fccfa2;
  cursor:pointer;
  border:4px solid #ff85a2;
  background:#fff;
  transition: transform 0.13s, box-shadow 0.13s, border 0.13s;
}
.galerie-grid img:hover {
  transform: scale(1.09) rotate(2deg);
  box-shadow: 0 16px 48px #d291ff;
  border:4px solid #fff200;
}

/* Lightbox Effekt */
.lightbox {
  display: none;
  position: fixed;
  z-index: 2000;
  top:0; left:0; right:0; bottom:0;
  background: rgba(255,170,220,0.95);
  justify-content: center;
  align-items: center;
  animation: lightboxFade 0.5s;
}
@keyframes lightboxFade {
  from{opacity:0;}
  to{opacity:1;}
}
.lightbox img {
  max-width: 92vw;
  max-height: 80vh;
  border-radius:32px;
  box-shadow:0 12px 48px #d291ff;
  background: linear-gradient(120deg,#fff 70%,#ffe7fa 100%);
  border:6px solid #5eefff;
}
.lightbox-close {
  position: absolute;
  top: 30px;
  right: 50px;
  font-size: 3rem;
  color: #fff200;
  cursor: pointer;
  font-weight: bold;
  z-index: 2100;
  background: none;
  border: none;
  text-shadow: 2px 2px 8px #ff85a2;
}
@media (max-width:600px){
  .lightbox-close {
    top: 14px; right: 22px; font-size: 2.1rem;
  }
  .lightbox img {
    max-width: 98vw;
    max-height: 60vh;
  }
}

.kontakt form {
  display: flex;
  flex-direction: column;
  gap:0.9rem;
  margin-top:1.1rem;
}
.kontakt input, .kontakt textarea {
  padding:1.1rem;
  font-size:1.08rem;
  border-radius:16px;
  border:2px solid #ff85a2;
  background: #fff;
  box-shadow: 0 2px 8px #fccfa2;
}
.kontakt button {
  background: linear-gradient(90deg,#ff85a2 0%,#5eefff 100%);
  color: #fff;
  font-size:1.15rem;
  border:none;
  border-radius:22px;
  padding:1rem 2.2rem;
  cursor:pointer;
  margin-top:0.7rem;
  font-family:'Comic Neue', 'Comic Sans MS', cursive;
  box-shadow:0 2px 10px #fccfa2;
  font-weight: bold;
  transition: background 0.2s;
}
.kontakt button:hover {
  background: linear-gradient(90deg,#fff200 0%,#d291ff 100%);
  color:#ff85a2;
}

footer {
  background: linear-gradient(90deg,#5eefff 30%,#fff200 60%,#ff85a2 100%);
  color:#222;
  text-align:center;
  padding:1.2rem 0;
  border-radius: 0 0 30px 30px;
  font-size:1.08rem;
  font-family:'Comic Neue', 'Comic Sans MS', cursive;
  font-weight:500;
  box-shadow:0 -2px 24px #d291ff;
}

/* Bunte Comic-Sprechblase Cookie-Banner mit Keksbild */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 10px;
  right: 10px;
  background: linear-gradient(90deg,#fff200 60%,#ff85a2 100%);
  color: #222;
  box-shadow: 0 8px 32px #d291ff;
  border-radius: 40px;
  border:6px solid #5eefff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:1000;
  font-size:1.18rem;
  gap:1.2rem;
  padding:1.3rem 1.3rem;
  font-family: 'Comic Neue', 'Comic Sans MS', 'Segoe UI', Arial, sans-serif;
  animation: cookiePop 1s;
}
@keyframes cookiePop {
  from {transform: scale(0.7); opacity:0;}
  to {transform: scale(1); opacity:1;}
}
.cookie-banner a { color: #e91e63; font-weight:bold; text-decoration:underline;}
.cookie-banner button {
  background: linear-gradient(90deg,#5eefff 0%,#ff85a2 100%);
  color: #fff;
  border: none;
  border-radius: 26px;
  padding: 0.7rem 2rem;
  font-size:1.2rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow:0 4px 16px #fccfa2;
  font-family: 'Comic Neue', 'Comic Sans MS', cursive;
  border:3px solid #fff200;
  transition: background 0.2s;
}
.cookie-banner button:hover {
  background: linear-gradient(90deg,#fff200 0%,#d291ff 100%);
  color: #ff85a2;
}
.cookie-img {
  width: 42px;
  height: 42px;
  margin-right: 0.8rem;
  vertical-align: middle;
  filter: drop-shadow(0 3px 4px #d291ff);
}

@media (max-width:900px){
  .nav-container {flex-direction: column;}
  nav {justify-content:center; margin-top:0.5rem;}
  .logo {margin-bottom:0.5rem;}
  .hero-inner {flex-direction: column; gap:1rem;}
  .hero-logo {margin-top:2.5rem;}
  .features-grid, .galerie-grid {
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width:600px){
  .zeiten, .preise, .galerie, .kontakt, .recht {
    padding: 1.1rem 0.5rem;
  }
  .feature-card img {max-width:140px; height:90px;}
  .hero-logo {width:110px;}
  .galerie-grid img {height:120px;}
  .cookie-banner {font-size: 0.96rem;}
}
@media (max-width:400px){
  .features-grid, .galerie-grid {grid-template-columns:1fr;}
  .cookie-banner {font-size: 0.9rem;}
}