/* ===== Laubinger Theme (stable, centered, mobile-safe) ===== */
:root{--bg:#000;--bg2:#0a0a0a;--card:rgba(255,255,255,.05);--border:rgba(255,255,255,.10);--text:#fff;--muted:#cfcfd6;--accent:#E5007E;--shadow:0 10px 30px rgba(0,0,0,.45)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:17px/1.65 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
header .top{max-width:1200px;margin:0 auto;padding:.9rem 1rem;display:flex;align-items:center;justify-content:flex-end;gap:1rem}
nav a{color:var(--text);text-decoration:none;margin-left:1.2rem;font-weight:600;letter-spacing:.2px;transition:opacity .15s ease}
nav a:hover{opacity:.8}
main{max-width:1200px;margin:0 auto;padding:2rem 1rem 3rem}
.hero{padding:2.6rem 1rem 2rem;text-align:center;background:radial-gradient(60% 60% at 50% 0%, rgba(229,0,126,.18), transparent 60%),linear-gradient(180deg, rgba(255,255,255,.05), transparent);border-bottom:1px solid var(--border)}
.brandmark{height:300px;width:auto;display:block;margin:0 auto 1rem;filter:drop-shadow(0 6px 24px rgba(229,0,126,.35))}
.hero p.lead{color:var(--muted);font-size:20px;margin:.4rem 0 0;text-align:center}
section.card{margin:1.25rem 0 0;background:var(--card);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:1.25rem 1.25rem 1rem;text-align:center}
h2{font-size:28px;margin:.25rem 0 1rem;color:var(--accent);font-weight:800}
p{margin:.35rem 0 1rem}
ul{margin:.25rem 0 1rem; padding:0; list-style-position:inside}
li{margin:.25rem 0}
a{color:var(--accent)}
/* Contact form */
form.contact{display:grid;grid-template-columns:1fr 1fr;gap:12px;justify-items:center}
form.contact .full{grid-column:1/-1}
label{display:block;margin:0 0 .35rem;color:#ddd;font-size:.95rem;text-align:left}
input, textarea{width:100%;max-width:640px;padding:.9rem 1rem;border-radius:14px;border:1px solid var(--border);background:#0c0c0c;color:var(--text)}
button.cta{background:var(--accent);color:#fff;border:none;padding:.9rem 1.2rem;border-radius:14px;font-weight:700;cursor:pointer}
button.cta:hover{opacity:.9}
/* Anchors offset for sticky header */
section.card, h2[id]{ scroll-margin-top: 96px; }
footer{background:var(--bg2);border-top:1px solid var(--border);padding:1rem}
footer p{margin:0;text-align:center;color:var(--muted)}
/* Mobile */
@media (max-width:680px){
  .brandmark{height:200px}
  form.contact{grid-template-columns:1fr}
  label{text-align:center}
}


/* Contact form comfort */
.contact-form textarea, form textarea { min-height: 200px; }







/* =========================
   Form styles (scoped)
   ========================= */

/* Kontaktformular (Startseite) – Contentbreite, Nachricht über volle Breite */
.contact-form{
  width:100%;
  max-width: 900px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:start;
}
.contact-form label{
  display:block;
  margin-bottom: 8px;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  max-width: 100%;
}
.contact-form textarea{
  grid-column: 1 / -1;
  min-height: 260px;
  resize: vertical;
}
.contact-form .btn,
.contact-form button{
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 220px;
}




/* =========================
   Shop Anfrage (Drawer) – kompakt
   ========================= */
.drawer .form input,
.drawer .form select{
  height: 42px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: .95rem;
}
.drawer .form textarea{
  min-height: 96px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: .95rem;
  resize: vertical;
}
.drawer .form label{
  margin-bottom: 6px;
}
.drawer .form input[type="checkbox"]{
  width: auto;
  height: auto;
  padding: 0;
  transform: none;
  accent-color: var(--accent);
}

/* Pflichtfeld-Stern */
.req{color:var(--accent);font-weight:800;font-size:.7em;vertical-align:top}


/* Kontaktformular – Mobile Optimierung */
@media (max-width: 720px){
  .contact-form{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .contact-form textarea{
    grid-column: 1 / -1;
    min-height: 220px;
  }
  .contact-form .btn,
  .contact-form button{
    width: 100%;
    max-width: 560px;
  }
}

/* Warenkorb / Drawer – Mobile Scrolling & Sichtbarkeit */
.drawer{ height: 100vh; max-height: 100vh; }
.drawer .panel{
  display:flex;
  flex-direction:column;
  max-height: 100vh;
}
.drawer .content{
  flex:1;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 110px; /* Platz für Footer-Actions */
}
#cartList{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  min-height: 80px;
}
.drawer .actions{
  position: sticky;
  bottom: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  padding: 12px 0;
}




/* Formular im Drawer: scrollt, aber Aktionen bleiben sichtbar */
#requestForm.form{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#requestForm .form-actions{
  position: static;
  background: none;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
}




/* Shop Drawer – Split View (Warenkorb-Fenster + Formular-Fenster) */
#drawer.drawer{
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Warenkorb-Liste als eigenes Fenster */
#cartList{
  flex: 0 0 auto;
  max-height: 34vh;
  min-height: 140px;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* Anfrageformular als eigenes Fenster (scrollbar) */
#requestForm.form{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}