: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%); }


.card-yellow-dark .card-header{ background:linear-gradient(180deg, #ffcc33 0%, #fff1bd 100%); }

.card-teal-dark .card-header{ background:linear-gradient(180deg, #00a6a6 0%, #e3f5f5 100%); }

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

.section-title-index{
  font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:.3px;
  margin:-10px 0 12px; color:#1f2937; text-align: right;
}
.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);
  color:#2F353C;
  font-weight:800;
}
.sx-navbar-dark .nav-link.active:hover{
  background:#ffd659;
  color:#1c2126;
}
.navbar-dark .navbar-toggler{ border-color:rgba(255,255,255,.35); }
.navbar-dark .navbar-toggler:focus{ box-shadow:none; }

.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; }
}
@media (max-width: 991.98px){
  .sx-navbar-dark{ position:sticky; top:0; z-index:1031; }
  .sx-navbar-dark .navbar-collapse{
    position:static;
    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 =================== */
.sx-hero-banner{ position:relative; background:#111; overflow:hidden; }
.sx-hero-banner .hero-inner{ }
.sx-hero-banner .hero-image{ height:480px; } /* fix 480px */
.sx-hero-banner .hero-image img{
  display:block; width:100%; height:100%;
  object-fit: cover; object-position:center;
}

/* Helleres Overlay + Farb-Stripe */
.sx-hero-banner::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.sx-hero-banner.hero--stripe::before{ content:""; position:absolute; inset:0; pointer-events:none; }
.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; }

/* Mobile quer */
@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;
  }
}

/* =================== Accordion =================== */
.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); }
.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 =================== */
.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; }


/* Card über dem Accordion auf Smartphones (Hoch- & Querformat) ausblenden */
@media (max-width: 991.98px) {
  .card-above-accordion {
    display: none !important;
  }
}