/* ============================================
   Tanzbar Gerard — Stylesheet
   ============================================ */

:root{
  --wine-deep:#2c0e14;
  --black-warm:#171210;
  --brass:#b3894f;
  --brass-light:#d9b880;
  --cream:#f1e6d3;
  --line: rgba(179,137,79,0.35);
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background:var(--black-warm);
  color:var(--cream);
  font-family:'Manrope', sans-serif;
  font-weight:300;
  line-height:1.65;
}

h1, h2{ font-family:'Fraunces', serif; font-weight:500; }

a{ color:inherit; }

/* ---------- Header ---------- */
header{
  text-align:center;
  padding:3.5rem 1.5rem 2.5rem;
  border-bottom:1px solid var(--line);
}
header h1{ font-size:clamp(2.2rem,6vw,3.2rem); margin:0; }
header h1 img{
  max-width: 320px;
  width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}
header p{
  font-family:'Fraunces', serif;
  font-style:italic;
  color:var(--brass-light);
  margin-top:0.6rem;
  font-size:1.1rem;
}

/* ---------- Layout ---------- */
main{ max-width:880px; margin:0 auto; padding:2.8rem 1.5rem; }
section{ margin-bottom:3.2rem; }

.intro p{
  /*max-width:62ch;*/
  color:rgba(241,230,211,0.85);
  margin-bottom:1rem;
}

.ausstattung{
  /*max-width:62ch;*/
  margin: 1.4rem 0 1.8rem;
  padding: 0;
  list-style: none;
}
.ausstattung li{
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
  color: rgba(241,230,211,0.85);
  font-size: 0.95rem;
}
.ausstattung li::before{
  content: "—";
  position: absolute;
  left: 0;
  color: var(--brass);
}

/* ---------- Fotos ---------- */
.fotos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-top:1.6rem;
}
.fotos img{
  width:100%;
  height:260px;
  object-fit:cover;
  border:1px solid var(--line);
  border-radius:2px;
}
@media (max-width:600px){
  .fotos{ grid-template-columns:1fr; }
}

/* ---------- Info-Box ---------- */
.info-box{
  border:1px solid var(--line);
  padding:1.6rem 1.8rem;
  margin-top:1.6rem;
  font-size:0.95rem;
}
.info-box div{ margin-bottom:0.6rem; }
.info-box div:last-child{ margin-bottom:0; }
.info-box strong{ color:var(--brass-light); font-weight:600; }

h2{ font-size:1.7rem; margin-bottom:1.1rem; }

/* ---------- Heller Container für das eingebettete HubSpot-Formular ---------- */
.kontakt-form-card{
  background:var(--cream);
  border:1px solid var(--brass);
  border-radius:4px;
  padding:1.8rem 2rem;
  /*max-width:520px;*/
}

/* ---------- Formular ---------- */
form{ /*max-width:520px;*/ }
.field{ margin-bottom:1.1rem; }
.field label{
  display:block;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:rgba(241,230,211,0.65);
  margin-bottom:0.35rem;
}
.field input, .field textarea{
  width:100%;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--cream);
  font-family:'Manrope', sans-serif;
  font-size:0.95rem;
  padding:0.6rem 0.7rem;
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:var(--brass-light);
}
button{
  background:var(--brass);
  color:var(--black-warm);
  border:none;
  padding:0.8rem 1.8rem;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  border-radius:2px;
  cursor:pointer;
  font-weight:600;
}
button:hover{ background:var(--brass-light); }

.hinweis{
  display:none;
  margin-top:1rem;
  padding:0.9rem 1.1rem;
  border:1px solid var(--brass);
  border-radius:2px;
  font-size:0.9rem;
}

/* Honeypot-Feld: für Menschen unsichtbar, für Bots vorhanden */
.hp-feld{ position:absolute; left:-9999px; }

/* ---------- Footer ---------- */
footer{
  text-align:center;
  padding:2rem 1.5rem;
  border-top:1px solid var(--line);
  font-size:0.85rem;
  color:rgba(241,230,211,0.6);
}
.social-links{
  margin-top: 0.7rem;
  display: flex;
  justify-content: center;
  gap: 1.4rem;
}
.social-links a{
  color: var(--brass-light);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.social-links a:hover{
  text-decoration: underline;
}