/* Basis */
body{margin:0;font:16px/1.5 system-ui,Arial,sans-serif;color:#fff;background:#0b0d12}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

/* Header & Navi */
.site-header{background:#111;border-bottom:1px solid #222}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.brand{font-weight:700}
.nav a{color:#aaa;margin-right:16px;text-decoration:none}

/* Buttons (auch <a class="btn">) */
.btn,.nav a.btn{
  display:inline-block;background:#222;color:#fff;border:1px solid #333;
  border-radius:6px;padding:8px 12px;cursor:pointer;text-decoration:none
}
.btn.primary,.nav a.btn.primary{background:#3b82f6;border-color:#2e6de0;color:#fff}
.btn.lg{padding:12px 18px;font-size:18px}

/* Hero & Sektionen */
.hero{background:#10131a;padding:72px 0;text-align:center}
.hero h1{font-size:36px;margin:0 0 12px}
.section{padding:48px 0}
.section.alt{background:#14171f}

/* Karten & Grids */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.card{background:#1c1f28;border:1px solid #2a2e38;border-radius:8px;padding:16px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}

/* Footer */
.site-footer{border-top:1px solid #222;padding:24px 0;color:#999;text-align:center}

/* Modal (Buchungs-Widget) */
.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center}
.modal.hidden{display:none}
.modal-panel{background:#111;padding:20px;border-radius:10px;width:90%;max-width:600px;color:#fff}
.modal-close{float:right;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
.bk-row{margin:10px 0}
.bk-row input,.bk-row select{width:100%;padding:10px;border-radius:6px;border:1px solid #333;background:#222;color:#fff}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{padding:8px 10px;border:1px solid #2a3240;border-radius:6px;background:#1a2030;cursor:pointer}
.slot:hover{background:#20283a}
.msg{margin-top:8px;color:#7fffd4}

/* --- Registrierung & Formulare --- */
.form{max-width:560px;margin:0 auto;background:#111;padding:16px;border:1px solid #222;border-radius:12px}
.form .row{display:flex;gap:10px;flex-wrap:wrap}
.form label{display:block;margin:8px 0 4px;color:#c9d1d9}
.form input{width:100%;padding:10px;border-radius:8px;border:1px solid #333;background:#1a1f2a;color:#fff}
.form button{padding:10px 14px;border-radius:8px;border:1px solid #2e6de0;background:#3b82f6;color:#fff;cursor:pointer}
.form small.muted{color:#9aa3b2}

/* Hinweisboxen */
.alert{margin-top:10px;padding:10px;border-radius:8px}
.alert.ok{background:#0f5132;color:#bce0cf;border:1px solid #1b6b47}
.alert.err{background:#5c2d31;color:#f2b8b8;border:1px solid #7b3b41}

/* Utilities */
.muted{color:#9aa3b2}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Responsive Tweaks */
@media (max-width:720px){
  .hero{padding:56px 0}
  .hero h1{font-size:28px}
}