/* === Variablen === */
:root{
  /* Holz-Textur optional aktivieren: url("img/wood.jpg") | oder auf none lassen */
  --wood-img: none;

  --ink: #2a2a2a;
  --cream: #f7f1e3;
  --gold: #c8a85a;
  --deep: #111;

  /* Hero-Fokuspunkt & Feinschliff */
  --hero-x: 50%;   /* 0% = links, 50% = Mitte, 100% = rechts */
  --hero-y: 35%;   /* 0% = oben,  50% = Mitte, 100% = unten  */
  --hero-contrast: 1.06;
  --hero-sat: 1.05;
  --hero-bright: 1.02;
}

/* === Basis === */
*{ box-sizing: border-box; }
html, body { height: 100%; margin:0; padding:0; }
body{
  font-family: 'Poppins', Arial, sans-serif;
  color: var(--cream);
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(0,0,0,0.55), rgba(0,0,0,0.9)),
    linear-gradient(rgba(35,22,10,0.35), rgba(35,22,10,0.35)),
    var(--wood-img);
  background-size: cover;
  background-attachment: fixed;
  line-height: 1.6;
}

/* === Container & Typo === */
.container{
  max-width: 980px;
  margin: 40px auto;
  background: rgba(17,17,17,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  border-radius: 16px;
  padding: 40px 28px 50px;
  text-align: center; /* zentrale Grundausrichtung */
}
h1, h2, h3{
  margin: 0.6em 0 0.35em;
  line-height: 1.2;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
h1{
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: 1px;
}
h2{ font-size: clamp(22px, 3.6vw, 30px); color: #f5e8c8; }
h3{ font-size: clamp(18px, 2.8vw, 22px); color: #e9dcc3; }
p{ font-size: 18px; margin: 0.5em 0 1em; }

/* === Hero (Bild) – Schärfer & präziser Ausschnitt === */
.hero{
  width: 100%;
  height: 380px;                     /* ≈ 10 cm */
  object-fit: cover;
  object-position: var(--hero-x) var(--hero-y);
  display: block;
  margin: 20px auto 25px;

  /* leichte Klarheit */
  filter: contrast(var(--hero-contrast)) saturate(var(--hero-sat)) brightness(var(--hero-bright));

  /* Rahmen & Tiefe */
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.15);
  outline: 6px solid rgba(200,168,90,0.15);
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
/* Alternative Fokus-Klassen bei Bedarf */
.hero--left   { object-position: 20%  var(--hero-y); }
.hero--right  { object-position: 80%  var(--hero-y); }
.hero--top    { object-position: var(--hero-x) 15%; }
.hero--bottom { object-position: var(--hero-x) 85%; }

/* === Social Buttons === */
.social-links{
  margin: 20px 0 40px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.btn{
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  min-width: 140px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover{ transform: translateY(-2px); }
.btn.instagram{
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.btn.tiktok{
  background: linear-gradient(45deg, #25F4EE, #000000, #FE2C55);
}

/* === Karten & Grid === */
.card{
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  text-align: left;   /* bessere Lesbarkeit im Fließtext */
  margin-bottom: 20px;
}
.bottom-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* links: Salon, rechts: Leistungen */
  gap: 20px;
  margin-bottom: 30px;
}

/* Leistungen-Liste schlicht */
.grid-cards{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
}
.grid-cards li{ padding-left: 0; }
.grid-cards li::before{ content: none; }

/* Kontakt unten zentriert */
.contact-bottom{
  text-align: center;
}

/* === Responsive === */
@media (max-width: 860px){
  .container{ padding: 30px 18px 38px; }
  .hero{ height: 280px; }
  .bottom-grid{ grid-template-columns: 1fr; }
  .card{ text-align: center; }
}