:root{
  --bordeaux:#6d0f1f;
  --bg:#0f0f12;
  --card:#16161b;
  --card2:#1d1d24;
  --text:#f2f2f2;
  --muted:#b9b9c2;
  --border:rgba(255,255,255,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --max: 1100px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(109,15,31,.35), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(255,255,255,.06), transparent 60%),
    var(--bg);
  line-height:1.5;
}

.site-header{
  background: var(--bordeaux);
  padding: 34px 16px;
  text-align:center;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.header-inner{ max-width: 1400px; margin: 0 auto; }
.custom-logo{
  max-width: 480px;
  width:100%;
  height:auto;
  display:block;
  margin: 0 auto;
}
@media (max-width:768px){
  .site-header{ position: sticky; top:0; z-index:50; padding: 22px 14px; }
  .custom-logo{ max-width: 200px; }
}

.wrap{ max-width: var(--max); margin: 0 auto; padding: 26px 18px 70px; }

.hero-scroll{ text-align:center; padding: 26px 0 10px; }
.hero-tagline{ margin: 0; font-weight: 800; letter-spacing:.2px; }
.hero-welcome{ margin: 6px 0 0; font-size: 1.35rem; letter-spacing:.2px; }

.section{ margin: 0 0 50px; }
.section-title{ margin: 28px 0 10px; font-size: 1.55rem; }
.section-title.small{ font-size: 1.2rem; margin-top: 18px; }
.section-sub{ margin: 0 0 14px; color: var(--muted); max-width: 80ch; }
.hintline{ margin-bottom: 18px; }

.cards{ display:flex; flex-direction:column; gap: 18px; margin-top: 14px; }
.card{
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card-btn{
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  padding: 18px 18px 14px;
  cursor: pointer;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.card-head{ flex:1 1 auto; }
.card-title{ font-size: 1.05rem; font-weight: 800; }
.card-teaser{ margin-top: 6px; color: var(--muted); }
.chev{ margin-left:auto; opacity:.85; user-select:none; transition: transform .18s ease; }

.card-content{ border-top: 1px solid rgba(255,255,255,.06); padding: 0 18px; }
.card-content-inner{ padding: 14px 0 18px; color: rgba(255,255,255,.92); }

@media (min-width: 769px){
  .card-content{ display:block; }
  .chev{ display:none; }
  .card-btn{ cursor: default; }
}

@media (max-width: 768px){
  .card-content{ display:none; }
  .card.is-open .card-content{ display:block; } /* KEY FIX */
  .card.is-open .chev{ transform: rotate(180deg); }
}

.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.placeholder{
  padding:14px;
  border:1px dashed rgba(255,255,255,.25);
  border-radius:14px;
  color:var(--muted);
}
.map{ width:100%; height:360px; border:0; border-radius: var(--radius); }

.social-float{
  position: fixed;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index: 999;
}
.social-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
  color: #fff;
  text-decoration:none;
  font-weight: 800;
}
@media (max-width: 640px){
  .social-float{
    left:auto; right:12px; top:auto; bottom:12px; transform:none; flex-direction:row;
  }
}

/* =========================
   FOOTER
   ========================= */

.site-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
  color: var(--muted);
}

.footer-inner{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.site-footer a{
  color: var(--muted);
  text-decoration:none;
  border-bottom: 1px dotted rgba(255,255,255,.2);
}
.site-footer a:hover{ color: var(--text); }

/* ====== FINAL FIX: genau dein Menü-Markup ======
   <nav class="footer-links">
     <ul id="menu-footer" class="footer-links">
       <li>...</li>
     </ul>
   </nav>
*/
footer.site-footer nav.footer-links ul#menu-footer,
footer.site-footer nav.footer-links ul.footer-links{
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

footer.site-footer nav.footer-links ul#menu-footer > li,
footer.site-footer nav.footer-links ul.footer-links > li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}

/* Aktiver Menüpunkt */
footer.site-footer .current-menu-item > a,
footer.site-footer .current_page_item > a{
  color: var(--text) !important;
  border-bottom-color: rgba(255,255,255,.45) !important;
}