:root{
  --sx-yellow:#FFCC33;
  --sx-teal:#00a6a6;
  --sx-rust:#b35000;
  --sx-slate:#4A545e;
  --sx-bg:#f5f7f9;
  --sx-text:#20262d;
  --sx-muted:#6b7280;
  --radius:14px;

  /* Sticky-Offsets */
  --sx-sticky-h-desktop: 64px;  /* ungefähre Navbar-Höhe Desktop */
  --sx-sticky-h-mobile: 56px;   /* ungefähre Navbar-Höhe Mobil */
  --sx-yellowbar-h: 15px;
}

/* =================== Base =================== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; font-family: Verdana, Arial, Helvetica, sans-serif;
  background: linear-gradient(90deg,#f6f7f9 0%, #eceff1 100%);
  color:var(--sx-text);
}
.container-max{ max-width:1200px; margin:0 auto; padding:0 16px; }

/* nur den Inhalt nach unten schieben */
.sx-offset-content{
  padding-top: calc(var(--sx-sticky-h-desktop) + var(--sx-yellowbar-h));
}
@media (max-width: 991.98px){
  .sx-offset-content{
    padding-top: calc(var(--sx-sticky-h-mobile) + var(--sx-yellowbar-h));
  }
}


/* =================== Links, Buttons, Utilities =================== */
a{ color:#0f766e; font-weight:700; text-decoration:none }
a:hover{ text-decoration:underline; color:#111 }

.mt-24{margin-top:24px}
.mb-24{margin-bottom:24px}

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
@media (max-width: 900px){ .grid-2{ grid-template-columns:1fr } }

.btn-primary{ background:var(--sx-teal); border-color:var(--sx-teal) }
.btn-primary:hover{ background:#0e8792; border-color:#0e8792 }
.btn-warning{ background:var(--sx-yellow); border-color:var(--sx-yellow); color:#111; font-weight:800 }
.btn-warning:hover{ filter:brightness(.95) }

/* =================== Cards / Panels =================== */
.card{
  background:#fff; border:1px solid #eef2f7; border-radius:var(--radius);
  box-shadow: 0 2px 10px rgba(16,24,40,.04);
}
.card-header{
  background:#f9fafb; border-bottom:1px solid #eef2f7; padding:12px 16px;
  border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);
  font-weight:700;
}
.card-body{ padding:16px; }
.card-yellow{ border-color:#ffe49b; }
.card-yellow .card-header{ background:linear-gradient(180deg, #fff7db 0%, #fff1bd 100%); }
.card-teal{ border-color:#bae8e8; }
.card-teal .card-header{ background:linear-gradient(180deg, #f1fbfb 0%, #e3f5f5 100%); }

/* =================== Section Titles =================== */
.section-title{
  font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:.3px;
  margin:24px 0 12px; color:#1f2937;
}
.section-title .em{ color:var(--sx-teal); }

/* Adaptiertes Altdesign */
.seitenheadline{
  font-family:'Poppins',sans-serif;
  background-color:#f3f4f6;
  font-size:20px; color:#374151; font-weight:700; text-align:center;
  padding:14px 0; border-radius:12px;
}
.anmeldung-button{
  display:inline-block; padding:12px 16px; border-radius:12px;
  background:var(--sx-teal); color:#fff; font-weight:800;
  box-shadow:0 6px 18px rgba(0,166,166,.25);
}
.anmeldung-button:hover{ background:#0e8792; color:#fff; text-decoration:none }

/* =================== Footer =================== */
footer{ border-top:1px solid #e5e7eb; background:#fff; padding:18px 0; margin-top:24px }

/* =================== Navbar (Dark) + Gelber Balken =================== */
.sx-navbar-wrapper{
  position: sticky; top:0; z-index:1031; /* über Inhalt */
}
.sx-yellowbar{ height:15px; background:var(--sx-yellow); width:100%; }

.sx-navbar-dark{
  background:#2F353C;
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.sx-navbar-dark .sx-logo{ height:36px; display:block; }
.sx-navbar-dark .nav-link{
  color:#E8EDF2; font-weight:700; padding:10px 14px; border-radius:10px;
  transition: background .2s ease, color .2s ease, transform .1s ease;
}
.sx-navbar-dark .nav-link:hover{ color:#fff; background:rgba(255,255,255,.08); }
/* Aktiver Link = Gelb */
.sx-navbar-dark .nav-link.active{
  background: var(--sx-yellow);  /* #FFCC33 */
  color:#2F353C;                 /* dunkles Grau für Kontrast */
  font-weight:800;
}
.sx-navbar-dark .nav-link.active:hover{
  background:#ffd659;            /* etwas helleres Gelb beim Hover */
  color:#1c2126;
}



.navbar-dark .navbar-toggler{ border-color:rgba(255,255,255,.35); }
.navbar-dark .navbar-toggler:focus{ box-shadow:none; }

/* Menü mittig (Logo bleibt links) */
.navbar-nav{ text-align:center; }
.navbar-nav .nav-item{ margin:0 6px; }
@media (min-width:992px){
  .navbar .navbar-collapse.justify-content-center{ justify-content:center !important; }
}

/* Mobile-Collapse im Dokumentenfluss (überdeckt nichts) */
@media (max-width: 991.98px){
  .sx-navbar-dark{ position:sticky; top:0; z-index:1031; }
  .sx-navbar-dark .navbar-collapse{
    position:static;                 /* WICHTIG: nicht absolute */
    background:#2F353C;
    padding:8px 16px 12px;
    border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 10px 24px rgba(0,0,0,.12);
  }
  .sx-navbar-dark .nav-link{
    display:block; margin:3px 0; padding:10px 14px; border-radius:10px;
  }
}

/* =================== Hero Banner (responsive, rotationssicher) =================== */
.sx-hero-banner{ position:relative; background:#111; overflow:hidden; }
.sx-hero-banner .hero-inner{ }
.sx-hero-banner .hero-image{ height:auto; }           /* Standard: natürliche Höhe */
.sx-hero-banner .hero-image img{
  display:block; width:100%; height:auto;             /* Portrait: kein Beschnitt */
  object-fit: contain;
  filter: none;
}

/* Helleres Overlay + Farb-Stripe */
.sx-hero-banner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,166,166,.10) 0%, rgba(0,166,166,.08) 35%, rgba(255,255,255,0) 85%),
    linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.08) 40%, rgba(0,0,0,0) 100%);
}
.sx-hero-banner.hero--stripe::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(135deg, rgba(255,204,51,.22) 0%, rgba(0,166,166,.18) 55%, rgba(0,0,0,0) 70%);
}
.sx-hero-banner .hero-caption{
  position:absolute; left:0; right:0; bottom:18px; color:#fff; text-align:center; padding:0 16px;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}
.sx-hero-banner .hero-caption h1{ margin:0; font-weight:800; font-size:clamp(22px,3.2vw,34px); }
.sx-hero-banner .hero-caption p{ margin:6px 0 0; opacity:.95; }

/* Ab Tablet: definierte Bühnenhöhe mit cover */
@media (min-width:768px){
  .sx-hero-banner .hero-image{ height:360px; }
  .sx-hero-banner .hero-image img{
    height:100%; object-fit:cover; object-position:center;
  }
}

/* Phones Landscape: flacher + Fokus links */
@media (orientation: landscape) and (max-height:500px){
  .sx-hero-banner .hero-image{ height:220px; }
  .sx-hero-banner .hero-image img{
    height:100%; object-fit:cover; object-position:left center !important;
    -webkit-transform: translateZ(0);
  }
}

/* =================== Accordion (ScoreX2-Theme) =================== */
.sx-acc .accordion-item{
  border:1px solid #eef2f7; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 10px rgba(16,24,40,.04); margin-bottom:12px;
}
.sx-acc .accordion-button{
  font-weight:700; color:#1f2937; background:#f9fbfc; padding:14px 16px;
}
.sx-acc .accordion-button:focus{ box-shadow:0 0 0 .2rem rgba(0,166,166,.20); }
.sx-acc .accordion-button.collapsed:hover{ background:rgba(255,204,51,.10); }

/* geöffnet: sanfter Verlauf + Teal-Akzent links */
.sx-acc .accordion-button:not(.collapsed){
  background: linear-gradient(180deg, #fff7db 0%, #fef0c2 100%);
  border-bottom:1px solid #eef2f7; position:relative;
}
.sx-acc .accordion-button:not(.collapsed)::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--sx-teal);
}
.sx-acc .accordion-button::after{ filter:saturate(0) brightness(0.35); }

/* „NEU“-Badge */
.sx-badge-new{
  margin-left:10px; display:inline-block; padding:2px 8px; font-size:.72rem; font-weight:800;
  border-radius:999px; background:var(--sx-yellow); color:#111;
  box-shadow:0 2px 6px rgba(255,204,51,.45);
}
.sx-acc .accordion-item.is-new{ border-color:#ffe49b; }
.sx-acc .accordion-item.is-new .accordion-button{
  background: linear-gradient(180deg, #fff8df 0%, #fff1bd 100%);
}

/* =================== Legacy / Nicht genutzte Klassen (optional) =================== */
/* Falls an anderen Stellen verwendet – stören nicht, aber übersteuern nichts Kritisches */
.sx-hero{ background:#fff; }
.carousel-item{ height:320px }
@media (max-width:700px){ .carousel-item{ height:200px } }
.carousel-item>img{ object-fit:cover; width:100%; height:100% }
.carousel-caption{ bottom:24px; background:rgba(0,0,0,.35); padding:8px 14px; border-radius:10px; }

/* --- Hero bündig unter gelbem Balken, ohne dunklen Streifen --- */

/* Hero-Hintergrund nicht dunkel einfärben */
.sx-hero-banner{
  background: transparent;     /* statt #111 */
}

/* Auf kleinen/mittleren Screens: Overlays komplett aus */
@media (max-width: 1199.98px){
  .sx-hero-banner::after,
  .sx-hero-banner.hero--stripe::before{
    content: none !important;
    display: none !important;
  }
}

/* Sicherheitsgurt: kein Margin zwischen Gelb und Hero */
.sx-navbar-wrapper + .sx-hero-banner{ margin-top: 0 !important; }

/* Bild bündig; keine ungewollte „Luft“ oben */
.sx-hero-banner .hero-image{ margin: 0 !important; }
.sx-hero-banner .hero-image img{
  display:block; width:100%;
  height:auto;                    /* Portrait: keine Stufe */
}

/* Ab Tablet: definierte Höhe + cover (wirkt „glatt“) */
@media (min-width: 768px){
  .sx-hero-banner .hero-image{ height: 360px; }
  .sx-hero-banner .hero-image img{
    height:100%; object-fit:cover; object-position:center;
  }
}

/* Phone quer: flacher, aber ohne Kante */
@media (orientation: landscape) and (max-height: 500px){
  .sx-hero-banner .hero-image{ height: 220px; }
  .sx-hero-banner .hero-image img{
    height:100%; object-fit:cover; object-position:left center;
  }
}
/* --- Abstand zwischen gelbem Balken und Hero komplett entfernen --- */
.sx-navbar-wrapper { margin-bottom: 0 !important; }
.sx-yellowbar { display:block; height:15px; line-height:0; }

/* Hero direkt bündig unter Gelb */
.sx-navbar-wrapper + .sx-hero-banner,
.sx-yellowbar + .sx-hero-banner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.sx-hero-banner .hero-image { margin-top: 0 !important; }

/* Overlays komplett aus (sonst wirkt der Verlauf wie Abstand) */
.sx-hero-banner::after,
.sx-hero-banner.hero--stripe::before {
  content: none !important;
  display: none !important;
}

/* Sicherheit: keine Kante an der Navbar-Unterseite */
.sx-navbar-dark { border-bottom: none !important; }

/* Mobile-Collapse im Flow lassen (überdeckt nichts) */
@media (max-width: 991.98px){
  .sx-navbar-dark .navbar-collapse { position: static !important; }
}
/* ===== Hero zuverlässig groß auf Tablet/Desk ===== */

/* Basis: responsive Höhe – nie winzig, nie zu groß */
.sx-hero-banner .hero-image{
  height: clamp(260px, 38vh, 480px);  /* min, bevorzugt, max */
}

/* Wenn aspect-ratio verfügbar ist: sauberes 21:9-Fenster */
@supports (aspect-ratio: 1) {
  .sx-hero-banner .hero-image{
    height: auto;
    aspect-ratio: 21 / 9;            /* passt sich der Breite an */
    max-height: 520px;
  }
}

/* Tablet & iPad-optimiert (Portrait/Landscape) */
@media (min-width: 768px){
  .sx-hero-banner .hero-image{ height: 420px; }  /* fallback, falls aspect-ratio ignoriert wird */
}
@media (min-width: 820px){                         /* iPad Portrait/Landscape */
  .sx-hero-banner .hero-image{ height: 440px; }
}

/* Bild füllt die Bühne */
.sx-hero-banner .hero-image img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;                 /* kein „Briefkastenrand“ mehr */
  object-position: center;
}

/* Kein zusätzlicher Abstand oben */
.sx-navbar-wrapper + .sx-hero-banner{ margin-top:0 !important; padding-top:0 !important; }
.sx-hero-banner .hero-image{ margin:0 !important; }

/* Hamburger-Icon sichtbar machen bei .sx-navbar-dark */
.sx-navbar-dark .navbar-toggler {
  border-color: rgba(255,255,255,.35);
}
.sx-navbar-dark .navbar-toggler-icon{
  /* weißes Bootstrap-Hamburger-Icon als Inline-SVG */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* --- Desktop-Shift Fix: alles bündig und zentriert --- */

/* Sicherheit: keine Außenabstände am Dokument/Header */
html, body { margin:0; padding:0; }
.sx-navbar-wrapper { margin:0 !important; }
.sx-yellowbar { margin:0 !important; }

/* Hero: volle Breite, keine Ränder/Lücken */
.sx-hero-banner{ margin:0 !important; padding:0 !important; width:100%; }
.sx-hero-banner .hero-inner{ margin:0 auto; width:100%; }
.sx-hero-banner .hero-image{
  margin:0 !important; padding:0 !important;
  width:100%;
  display:flex;                 /* Inhalt sauber mittig */
  align-items:center;
  justify-content:center;
}

/* Bild wirklich bühnenfüllend (kein Einzug links/rechts) */
.sx-hero-banner .hero-image picture,
.sx-hero-banner .hero-image img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;               /* verhindert „zu schmal“ */
  object-fit:cover;             /* füllt die Bühne */
  object-position:center;       /* mittig ausrichten */
}

/* Größe der Bühne am Desktop */
@supports (aspect-ratio: 21 / 9){
  .sx-hero-banner .hero-image{ aspect-ratio:21/9; max-height:520px; }
}
@media (min-width: 992px){
  .sx-hero-banner .hero-image{ height: 420px; } /* Fallback */
}

/* Falls noch ein Overlay aktiv ist, das wie eine Kante wirkt: aus */
.sx-hero-banner::after,
.sx-hero-banner.hero--stripe::before{
  content:none !important; display:none !important;
}
/* --- Abstand unter dem Hero straffen + Höhe verkleinern --- */

/* Hero unten kaum Abstand */
.sx-hero-banner{
  margin-bottom: 8px !important;   /* vorher evtl. 24px+ */
  padding-bottom: 0 !important;
}

/* Caption erzeugt keinen zusätzlichen Abstand */
.sx-hero-banner .hero-caption{ margin:0 !important; padding-bottom: 6px; }
.sx-hero-banner .hero-caption hr{ display:none; margin:0; }

/* Bühne kleiner halten (Tablet/Desktop) */
.sx-hero-banner .hero-image{
  /* kleinere, verlässlichere Bühne */
  height: clamp(220px, 28vh, 360px) !important;
}

/* iPad / Tablets etwas größer, aber nicht wuchtig */
@media (min-width: 768px){
  .sx-hero-banner .hero-image{ height: 340px !important; }
}
@media (min-width: 992px){
  .sx-hero-banner .hero-image{ height: 360px !important; }
}

/* Bild füllt die Bühne ohne Extra-Luft */
.sx-hero-banner .hero-image img{
  width:100%; height:100%;
  object-fit: cover; object-position: center;
  display:block;
}

/* Sicherheit: nächster Abschnitt (main) kein zusätzlicher Top-Abstand */
.sx-hero-banner + main{
  margin-top: 8px !important;
  padding-top: 0 !important;
}