:root{
  /* Barbershop Look: Schwarz + warmes Holz + Messing */
  --bg:#0d0f12;
  --bg2:#12161c;
  --card:#181c24;
  --text:#f1f3f7;
  --muted:#aab2c0;
  --accent:#d1a36f;     /* Messing */
  --wood:url('https://images.unsplash.com/photo-1542010589005-d1eacc3918f6?q=80&w=1200&auto=format&fit=crop');
  --shadow:0 10px 25px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),var(--bg2));
  line-height:1.6;
}

/* Layout */
.container{width:min(1100px,90%);margin-inline:auto}

/* Nav & Hero */
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{font-family:Oswald,sans-serif;font-weight:700;font-size:1.25rem}
.brand span{color:var(--accent)}
.menu{list-style:none;display:flex;gap:1.1rem;padding:0;margin:0}
.menu a{color:var(--text);text-decoration:none;opacity:.85}
.menu a:hover{opacity:1}
.btn{
  display:inline-block;border-radius:999px;padding:.6rem 1rem;
  text-decoration:none;font-weight:600;border:1px solid transparent;transition:.2s
}
.btn.primary{background:var(--accent);color:#1b1208;box-shadow:var(--shadow)}
.btn.ghost{border:1px solid var(--accent);color:var(--accent);background:transparent}
.btn.small{font-size:.9rem;padding:.42rem .75rem}
.btn.tel{background:rgba(209,163,111,.25);color:var(--text)}

.hero{position:relative;min-height:70vh;display:flex;flex-direction:column}
.hero-inner{margin-top:5rem;max-width:720px}
.hero h1{font-family:Oswald,sans-serif;font-size:clamp(2.2rem,4vw,3.2rem);margin:.2rem 0 .4rem}
.hero p{color:var(--muted);font-size:1.05rem}
.cta-wrap{display:flex;gap:.8rem;margin-top:1rem;flex-wrap:wrap}
.hero-bg{position:absolute;inset:0;background-image:var(--hero);background-size:cover;background-position:center;filter:brightness(.6);z-index:-2}
.hero-wood{position:absolute;left:0;right:0;bottom:0;height:90px;background-image:var(--wood);background-size:cover;background-position:center;border-top:2px solid rgba(209,163,111,.4);box-shadow:inset 0 -40px 80px rgba(0,0,0,.7);z-index:-1}

/* Sections */
.section{padding:3rem 0}
.section.alt{background:rgba(255,255,255,.02)}
.wood-title{
  font-family:Oswald,sans-serif;font-size:1.8rem;letter-spacing:.5px;margin:0 0 1.1rem;
  border-bottom:2px solid rgba(209,163,111,.4)
}

/* Leistungen */
.grid.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.card{background:var(--card);border-radius:.8rem;overflow:hidden;box-shadow:var(--shadow)}
.card img{width:100%;height:180px;object-fit:cover}
.card-body{padding:.8rem 1rem}
.card h3{font-family:Oswald,sans-serif;font-size:1.2rem;margin:.2rem 0}
.card p{color:var(--muted);font-size:.95rem;margin:.2rem 0 0}

/* Team – zwei Spalten, kompakt */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.barber{background:var(--card);border-radius:.8rem;padding:1rem;text-align:center;box-shadow:var(--shadow)}
.barber img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:.6rem}
.barber h3{margin:.6rem 0 .1rem;font-family:Oswald,sans-serif;font-size:1.2rem}
.barber p{margin:0;color:var(--muted);font-size:.95rem}

/* Öffnungszeiten – extra kompakt */
.hours{list-style:none;padding:0;margin:0;border:1px solid #262d3a;border-radius:.6rem;overflow:hidden}
.hours li{
  display:flex;justify-content:space-between;align-items:center;
  padding:.35rem .8rem;                /* kompakter */
  background:#151920;border-bottom:1px solid #202630;
  font-size:.92rem;line-height:1.2;    /* dichter Text */
}
.hours li:last-child{border-bottom:0}
.hours .closed strong{color:#d97777}
.hint{color:var(--muted);margin-top:.6rem;font-size:.95rem}

/* Rezensionen */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.review{background:var(--card);border-radius:.8rem;padding:.8rem;border:1px solid #2a3242}
.review-cta{text-align:center;margin-top:1rem}
.placeholder{opacity:.65;text-align:center}
.error{color:#ffb3b3}

/* Kontakt & Karte */
.contact-grid{display:grid;grid-template-columns:1fr 2fr;gap:1rem;align-items:start}
.contact{background:var(--card);border-radius:.8rem;padding:1rem}
.badges{display:flex;gap:.5rem;margin:.5rem 0 .8rem;flex-wrap:wrap}
.badge{border:1px solid rgba(209,163,111,.4);border-radius:999px;padding:.2rem .6rem;font-size:.85rem;color:var(--muted)}
.tel-link{color:var(--accent);text-decoration:none}
.map-wrap{height:340px;border-radius:.8rem;overflow:hidden;border:1px solid #2a3242}
.map-wrap iframe{width:100%;height:100%;border:0}

/* Footer */
.footer{padding:1.5rem 0;background:#0a0c10;color:#a0a8b7;border-top:2px solid rgba(209,163,111,.25);text-align:center;font-size:.9rem}

/* Responsive */
@media (max-width:760px){
  .menu{display:none}
  .hero-inner{margin-top:3.5rem}
  .contact-grid{grid-template-columns:1fr}
}

html {
  scroll-behavior: smooth;
}

/* --- Reviews Carousel --- */

.reviews-carousel {
  overflow: hidden;
  position: relative;
  border-radius: .8rem;
}
.reviews-track {
  display: flex;
  gap: 1rem;                          /* JS liest dieses gap */
  transition: transform .6s ease;
  will-change: transform;
}
.review {
  flex: 0 0 auto;                     /* keine Flex-Verteilung */
  width: calc((100% - 2rem) / 3);     /* 3 Karten + 2 Gaps = 2rem */
  background: var(--card);
  border: 1px solid #2a3242;
  border-radius: .8rem;
  padding: .8rem;
  line-height: 1.4;
}
.review footer {
  color: var(--muted);
  margin-top: .4rem;
  font-size: .9rem;
}

.rating-badge {
  display: flex;
  align-items: center;
  gap: 0.8rem;   /* vorher evtl. 0.6rem → jetzt etwas größer */
  margin-bottom: 1rem;
  background: var(--card);
  border: 1px solid #2a3242;
  border-radius: .8rem;
  padding: .6rem .8rem;
}


/* Impressum Box */
.impressum-box {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid #2a3242;
  background: var(--card);
  border-radius: .8rem;
  padding: 1.2rem;
  line-height: 1.6;
  color: var(--muted);
  box-shadow: 0 0 12px rgba(0,0,0,0.2);
}

.impressum-box h3 {
  font-size: 1.3rem;
  margin-bottom: .8rem;
  color: var(--accent);
  font-family: var(--title-font, 'Oswald', sans-serif);
  letter-spacing: 0.5px;
}

.impressum-box a {
  color: var(--accent);
  text-decoration: none;
}

.impressum-box a:hover {
  text-decoration: underline;
}


/* Tablet: 2 sichtbar */
@media (max-width: 900px) {
  .review { width: calc((100% - 1rem) / 2); }   /* 2 Karten + 1 Gap */
}

/* Phone: 1 sichtbar */
@media (max-width: 600px) {
  .review { width: 100%; }
}

/* Instagram Icon im Team-Bereich */


.barber img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:.6rem;
}

.insta-link{ display:inline-block; margin:6px 0; }

.insta-icon{
  width:32px;
  height:32px;
  aspect-ratio:1/1;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin:0 auto;
  transition:transform .2s ease;
}

.barber .insta-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px rgba(209, 163, 111, 0.4); /* sanft goldener Schimmer */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.barber .insta-icon:hover {
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(209, 163, 111, 0.8);
}