*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0b0c;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.14);
  --text:#fff;
  --muted:rgba(255,255,255,.72);
  --shadow:0 18px 55px rgba(0,0,0,.55);
  --r:18px;
}

html,body{height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  overflow-x:hidden;
}

.wrap{width:min(1100px,92vw);margin:0 auto}

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,12,.55);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
}
.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0; gap:18px;
}
.logo{height:44px;width:auto;display:block}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{
  color:var(--muted);
  text-decoration:none;
  font-size:14px;
  letter-spacing:.2px;
}
.nav a:hover{color:var(--text)}

/* Hero */
.hero{
  position:relative;
  min-height:72vh;
  display:grid;
  align-items:center;
  padding:70px 0;
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(120deg, rgba(0,0,0,.80), rgba(0,0,0,.35)),
    radial-gradient(800px 420px at 15% 15%, rgba(255,0,140,.18), transparent 60%),
    url("hero.jpg");
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.05);
  z-index:-2;
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.55));
  z-index:-1;
}

.hero-inner{max-width:720px}
.hero h1{
  font-size:clamp(36px,4.4vw,60px);
  letter-spacing:-.6px;
  line-height:1.06;
  margin-bottom:12px;
}
.hero p{
  color:var(--muted);
  font-size:18px;
  margin-bottom:18px;
}

.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:var(--text);
  text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .12s ease, background .12s ease;
}
.btn:hover{background:rgba(255,255,255,.16); transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(135deg, rgba(255,0,140,.45), rgba(255,255,255,.10));
  border-color:rgba(255,0,140,.35);
}

/* Sections */
.section{padding:64px 0}
.section.alt{
  background:linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.section h2{
  font-size:28px;
  letter-spacing:-.2px;
  margin-bottom:18px;
}
.section .sub{color:var(--muted);margin:-6px 0 18px}

/* Grids + Cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:18px;
  box-shadow:var(--shadow);
}
.card h3{font-size:18px;margin-bottom:6px}
.card p, .card li{color:var(--muted)}
.card ul{padding-left:18px;margin-top:10px}

/* Kontakt */
.contact-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.pill{
  padding:10px 12px;border-radius:999px;
  background:var(--panel2);
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
}
.pill:hover{background:rgba(255,255,255,.08)}

.form{
  margin-top:16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:18px;
}
label{display:block;font-size:14px;color:rgba(255,255,255,.86)}
input,textarea{
  width:100%;
  margin-top:8px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:var(--text);
  outline:none;
}
input:focus,textarea:focus{border-color:rgba(255,0,140,.35)}
.form .btn{margin-top:12px}

/* Footer */
.footer{
  padding:26px 0;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.08);
}

/* Responsive */
@media (max-width: 860px){
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .top{flex-direction:column;align-items:flex-start}
}
.impressum-section{
  display:flex;
  justify-content:center;
  padding:60px 20px;
}

.impressum-card{
  max-width:520px;
  background:#1a1a1a;
  border-radius:18px;
  padding:32px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  text-align:center;
  line-height:1.6;
}

.impressum-card h2{
  margin-bottom:20px;
  font-size:28px;
}

.impressum-card a{
  color:#ff4da6;
  text-decoration:none;
}

.impressum-card a:hover{
  text-decoration:underline;
}
/* Menü-Karten: Text zentrieren + Akzentbild */
.menu-card{
  position:relative;
  overflow:hidden;
  text-align:center;
}

.menu-card h3{
  position:relative;
  z-index:2;
  text-align:center;
}

.menu-card ul{
  position:relative;
  z-index:2;
  list-style-position:inside; /* bullets bleiben sauber mittig */
  padding-left:0;
  margin:0;
  text-align:center;
}

.menu-card li{
  text-align:center;
}
/* Akzentbild (klein, verschwommen) */
.menu-card::before{
  content:"";
  position:absolute;
  right:-40px;
  bottom:-40px;
  width:220px;
  height:220px;
  background:url("img2.jpg") center/cover no-repeat; /* Akzentbild */
  filter:blur(14px) saturate(1.1);
  opacity:.28;
  transform:rotate(-8deg);
  border-radius:28px;
  z-index:1;
}

/* optional: leichtes Glow drüber */
.menu-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(300px 220px at 85% 85%, rgba(255,0,140,.10), transparent 60%);
  z-index:1;
}

/* Wenn du zwei verschiedene Akzentbilder willst */
.menu-card.accent-a::before{ background-image:url("img2.jpg"); }
.menu-card.accent-b::before{ background-image:url("img3.jpg"); }
/* obere Leistungs-Karten */
.card{
  position:relative;
  overflow:hidden;
}

/* gemeinsamer Glow */
.card::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  z-index:1;
  pointer-events:none;
}

/* Karte 1 – warm gold */
.card:nth-child(1)::after{
  background:radial-gradient(260px 200px at 85% 80%, rgba(255,190,90,.45), transparent 70%);
}

/* Karte 2 – rosé / wine */
.card:nth-child(2)::after{
  background:radial-gradient(260px 200px at 85% 80%, rgba(255,90,140,.45), transparent 70%);
}

/* Karte 3 – teal luxury */
.card:nth-child(3)::after{
  background:radial-gradient(260px 200px at 85% 80%, rgba(60,200,190,.45), transparent 70%);
}

/* Text über Glow legen */
.card > *{
  position:relative;
  z-index:2;
}