/* =====================================================================
   JAHN BARBERSHOP — finale Anpassungen (laedt NACH styles.css)
   ===================================================================== */

/* Seite zentriert, kein horizontales Verschieben (auch mobil) */
html, body { overflow-x: hidden; max-width: 100%; }
.final { max-width: 100vw; }
img, svg, canvas { max-width: 100%; }

/* ---------- Hexagon-J-Logo (einziges Logo) ---------- */
.logo-hex { display: inline-grid; place-content: center; width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(212,175,55,0.4)); }
.logo-hex svg { width: 100%; height: 100%; }
.brand .logo-hex { margin-right: 0.15rem; }
.logo-hex--sm { width: 30px; height: 30px; }
.logo-hex--load { width: 80px; height: 80px; margin-bottom: 1rem; animation: hexPulse 1.7s ease-in-out infinite; }
@keyframes hexPulse { 0%, 100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.08); opacity: 1; } }

/* ---------- Hero: BEIDE Zeilen Gold + gleiche Shimmer-Animation ---------- */
.hero__title .gold-shimmer {
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  background-size: 200% auto; animation: shimmer 6s linear infinite;
}
.hero__title .line--sub { font-size: 0.62em; letter-spacing: 0.22em; }

/* ---------- Hexagon-LED-Decke klarer (weniger Nebel), Animation bleibt ---------- */
.hero__honeycomb {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
}
.hex-tube {
  stroke-width: 2.6;
  filter: drop-shadow(0 0 3px var(--led-glow)) drop-shadow(0 0 9px rgba(160,210,255,0.55));
  animation: ledFlickerCrisp 9s linear infinite;
}
/* Klar/hell, langsames Neon-Flackern: nur ein kurzer Flacker-Stoss pro Zyklus */
@keyframes ledFlickerCrisp {
  0%, 70% { opacity: 1; }
  71% { opacity: 0.4; }
  72% { opacity: 1; }
  73% { opacity: 0.72; }
  74% { opacity: 1; }
  100% { opacity: 1; }
}
.hero__glow { opacity: 0.5; }

/* ---------- Rating-Pill im Hero ---------- */
.rating-pill { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.4rem; padding: 0.45rem 1.05rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); font-size: 0.85rem; color: var(--text); transition: 0.3s; }
.rating-pill:hover { border-color: var(--gold); color: var(--gold-light); }
.rating-pill__stars { color: var(--gold); letter-spacing: 0.08em; }
.rating-pill b { color: var(--gold-light); }

/* ---------- Kleine schneidende Schere (laeuft von links nach rechts) ---------- */
.cut-divider { position: relative; height: 2px; margin: 0 auto; width: min(100% - 2.6rem, 1180px); background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px); overflow: visible; }
.cut-divider__scissor { position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: 1.4rem; color: var(--gold); animation: cutAcross 7s linear infinite; }
@keyframes cutAcross { 0% { left: -2%; } 100% { left: 102%; } }

/* ---------- Bewertungen ---------- */
.reviews__wrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 5vw, 3.2rem); align-items: center; max-width: 920px; margin: 0 auto; }
.reviews__overall { text-align: center; padding: 1.6rem 2rem; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(160deg, var(--panel), #0c0c10); min-width: 200px; }
.reviews__score { display: block; font-family: "Cinzel", serif; font-size: 3.4rem; font-weight: 800; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.reviews__stars { color: var(--gold); letter-spacing: 0.14em; font-size: 1.2rem; margin: 0.35rem 0; }
.reviews__count { display: block; color: var(--muted); font-size: 0.82rem; }
.reviews__count:hover { color: var(--gold-light); }
.reviews__live { display: inline-block; margin-top: 0.45rem; font-size: 0.7rem; color: #43c47a; letter-spacing: 0.1em; }
.reviews__slider { position: relative; }
.reviews__card { border: 1px solid var(--line); border-radius: var(--r); padding: 1.6rem 1.8rem; background: rgba(255,255,255,0.02); transition: opacity 0.4s var(--ease); min-height: 130px; }
.reviews__card.fade { opacity: 0; }
.reviews__card .rc-stars { color: var(--gold); letter-spacing: 0.12em; margin-bottom: 0.6rem; }
.reviews__card .rc-text { font-family: "Cinzel", serif; font-size: 1.05rem; line-height: 1.5; margin-bottom: 0.6rem; }
.reviews__card .rc-name { color: var(--muted); font-size: 0.85rem; }
.reviews__dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.reviews__dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: var(--line); cursor: pointer; transition: 0.3s; padding: 0; }
.reviews__dots button.active { background: var(--gold); width: 22px; border-radius: 5px; }
@media (max-width: 760px) { .reviews__wrap { grid-template-columns: 1fr; } }

/* ---------- Leere Service-Kacheln (zum spaeter Ausfuellen) ---------- */
.svc--empty { opacity: 0.85; }
.svc--empty .svc__price { color: var(--muted); }
.svc__placeholder { color: var(--muted); opacity: 0.6; font-size: 0.92rem; border: 1px dashed var(--line); border-radius: 10px; padding: 0.7rem 0.6rem; text-align: center; }
.svc--empty h3 { color: var(--muted); }

/* ---------- 360°-Teaser ---------- */
.tour__teaser { max-width: 640px; margin: 0 auto; text-align: center; border: 1px solid var(--line); border-radius: var(--r); padding: 2.4rem 2rem; background: radial-gradient(120% 120% at 50% 0%, rgba(47,93,73,0.16), transparent 60%), #0d0d10; display: grid; gap: 1rem; justify-items: center; }
.tour__ring { width: 84px; height: 84px; border-radius: 50%; border: 2px dashed rgba(212,175,55,0.5); display: grid; place-content: center; font-size: 1.9rem; color: var(--gold); animation: spin360 12s linear infinite; }
@keyframes spin360 { to { transform: rotate(360deg); } }
.tour__teaser p { color: var(--muted); }
.tour__teaser code { background: rgba(212,175,55,0.1); color: var(--gold-light); padding: 0.1rem 0.4rem; border-radius: 5px; font-family: monospace; font-size: 0.85em; }

/* ---------- Karte: fuellt jetzt zuverlaessig die GANZE Box ---------- */
.visit__map .map { height: clamp(320px, 42vh, 460px); min-height: 0; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__consent { position: absolute; inset: 0; }

/* ---------- Laufband-Gruppen (lueckenlos) ---------- */
.marquee__group { flex: none; white-space: nowrap; }

/* ---------- Leistungs-Icons (SVG) ---------- */
.svc__icon svg { width: 27px; height: 27px; display: block; }
.svc__icon-glyph { font-size: 1.7rem; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .cut-divider__scissor, .tour__ring, .logo-hex--load, .hero__title .gold-shimmer { animation: none !important; }
}