:root{
      --bg:#ffffff;
      --blue-main:#0077B6;
      --aqua:#0077B6;
      --title:#EAFBFF;
      --text:#000;
      --line:#ececec;
      --chip:#f8f8f8;
      --radius:14px;
      --shadow:0 6px 24px rgba(0,0,0,.06);
      --max:1100px;
    }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;line-height:1.5
}
a{color:var(--aqua);text-decoration:none}
/*a:hover{text-decoration:underline}*/
img{max-width:100%;height:auto;border-radius:12px}
header{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);z-index:30
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
.banner{position:relative;width:100%;/*.social-links {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  margin-top: 1.5rem;
}

/* runder Button mit Verlauf */
.instagram-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 107%,
    #feda75 0%, #fa7e1e 30%, #d62976 60%, #962fbf 80%, #4f5bd5 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
  text-decoration: none;
}

/* Hover-Effekt */
.instagram-link:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/* Das eigentliche Instagram-Icon */
.instagram-icon {
  width: 22px;
  height: 22px;
  fill: white;
}

/* Responsive: verkleinert leicht bei kleinen Displays */
@media (max-width: 600px) {
  .instagram-link {
    width: 40px;
    height: 40px;
  }
  .instagram-icon {
    width: 20px;
    height: 20px;
  }
}
 flach & responsive: nicht zu hoch, passt sich Viewport an */
min-height:160px;height:clamp(160px, 32vh, 360px);border-radius:0px;overflow:hidden;
/* Bild + dezente Verlaufsüberlagerung (unten dunkler für Textlesbarkeit) */
background-image:
  linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.35)),
  image-set(
    url("/public/files/img/cover.webp") type("image/webp")
  );
background-size:cover;background-position:center 45%;background-repeat:no-repeat;
}
.banner-title{
  position:absolute;left:clamp(12px, 3vw, 28px);bottom:clamp(12px, 3vw, 28px);
  margin:0;font-size:clamp(1.15rem, 4vw, 2.1rem);font-weight:800;line-height:1.1;
  letter-spacing:.2px;color:var(--title);text-shadow:0 2px 16px rgba(0,0,0,.35);
  white-space:nowrap;/* verhindert Umbruch des Titels */
}
.main-link{display:flex;gap:1rem;margin-top:1.5rem;justify-content:flex-start;
  flex-wrap:nowrap; /* bleibt immer nebeneinander */;
  overflow-x:auto;  /* falls Bildschirm ganz schmal ist -> horizontales Scrollen */
  display:inline-block;text-decoration:none;font-weight:500;padding:0.45rem 1rem;
  border-radius:0.1rem;border:1px solid var(--aqua);background-color:transparent;
  color:var(--aqua);font-size:0.95rem;letter-spacing:0.3px;transition:all 0.25s ease;
}
.main-link:hover{background-color:var(--aqua);color:#ffffff;transform: translateY(-1px);}
.main-link:focus,.main-link:active {outline:none;background-color:#2563EB;color:#ffffff;}
.hero{padding:4rem 0 2rem}
.hero h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:.25rem 0;}
.hero h2{font-size:22px;margin:0 0 8px;}
.hero h3{font-size:16px;margin:16px 0 6px;}
.inside{color:var(--accent);}
.dates{}
.bb{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.sb{flex:1 1 calc(33.333% - 16px); /* drei gleich breite Spalten minus Abstand */
  background-color:#E0F7FA;justify-content:center;align-content:center;text-align:center;padding:0.6rem 0.8rem;border-radius:6px;font-weight:500;
}
.social-links{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:1.5rem;}
.instagram-link{
  display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  background:radial-gradient(circle at 30% 107%,
    #feda75 0%, #fa7e1e 30%, #d62976 60%, #962fbf 80%, #4f5bd5 100%);
  box-shadow:0 2px 8px rgba(0,0,0,0.25);transition:all 0.3s ease;text-decoration:none;
}
.instagram-link:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,0.35);}
.instagram-icon{width:22px;height:22px;fill:white;}