/* ============================================================================
   M&M BARBERSHOP — site.css  ·  Design-System „LINIENWERK / CLEAN LINES"
   Leder · Bone · Messing  —  editorial, urban, maskulin, hochwertig
   Single Source of Truth: CSS-Variablen (Light + Dark) + Komponenten + Motion.
   Tailwind-CDN liefert Utilities; Marken-Tokens werden in tailwind.config auf
   diese Variablen gemappt -> Theme-Wechsel über [data-theme] greift überall.
   ============================================================================ */

/* ---------- TOKENS ---------- */
:root{
  --bg:#F4EEE3; --surface:#FBF7EF; --surface-2:#ECE3D4;
  --fg:#1A1410; --brass:#B07D2B; --brass-strong:#9A6B1E;
  --oxblood:#6E2A2A; --muted:#8A7E6E; --border:#D9CDB8;
  --grain-opacity:.06; --sweep:rgba(176,125,43,.16);

  --radius-sm:.4rem; --radius:.85rem; --radius-lg:1.4rem; --radius-full:999px;
  --shadow-sm:0 1px 2px rgb(26 20 16/.06);
  --shadow:0 18px 50px -22px rgb(26 20 16/.40);
  --shadow-lg:0 40px 90px -40px rgb(26 20 16/.55);

  --space-sec:clamp(4rem,9vw,7rem);
  --dur:.45s; --ease:cubic-bezier(.16,1,.3,1);

  --maxw:78rem; --gut:clamp(1.25rem,4vw,2.75rem);
  --hdr-h:74px;

  color-scheme: light;
}
:root[data-theme="dark"]{
  --bg:#16120E; --surface:#221B14; --surface-2:#2C2319;
  --fg:#EDE6D8; --brass:#D4A24A; --brass-strong:#E0B463;
  --oxblood:#9A4A40; --muted:#A89A86; --border:#332921;
  --grain-opacity:.07; --sweep:rgba(212,162,74,.14);
  --shadow:0 22px 60px -24px rgb(0 0 0/.65);
  --shadow-lg:0 44px 100px -42px rgb(0 0 0/.75);
  color-scheme: dark;
}

/* ---------- BASE ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(1rem,.55vw + .9rem,1.075rem); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; transition:background .5s var(--ease), color .5s var(--ease);
}
h1,h2,h3,h4,.display{ font-family:"Bricolage Grotesque","Inter",sans-serif; font-weight:700; line-height:1.02; letter-spacing:-.01em; margin:0; text-wrap:balance; }
p{ margin:0 0 1rem; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
::selection{ background:var(--brass); color:#fff; }

/* fluide Headline-Skala mit Mobil-Boden + Deckel */
.h-hero{ font-size:clamp(2.5rem,8.2vw,6.2rem); font-weight:800; letter-spacing:-.025em; }
.h1{ font-size:clamp(2.1rem,6vw,4rem); font-weight:800; letter-spacing:-.02em; }
.h2{ font-size:clamp(1.6rem,4vw,2.6rem); font-weight:700; }
.h3{ font-size:clamp(1.2rem,2.4vw,1.6rem); font-weight:700; }
.lead{ font-size:clamp(1.075rem,1.4vw,1.3rem); color:var(--muted); line-height:1.6; }
.prose-w{ max-width:62ch; }

/* Eyebrow / Index-Label (Editorial, getrackt) */
.eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-size:.74rem; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--brass-strong); }
.eyebrow::before{ content:""; width:1.9rem; height:1px; background:var(--brass); display:inline-block; }
.idx{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; color:var(--brass);
  font-variant-numeric:tabular-nums; font-size:.95rem; letter-spacing:.05em; }

/* ---------- LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--space-sec); position:relative; }
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); border:0; margin:0; }

/* ---------- GRAIN + LICHTSWEEP (permanentes Hintergrund-Leben) ---------- */
.grain{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply; }
:root[data-theme="dark"] .grain{ mix-blend-mode:screen; }
.sweep{ position:fixed; z-index:0; pointer-events:none; inset:-20%; opacity:.9;
  background:radial-gradient(40% 38% at 22% 18%, var(--sweep), transparent 70%),
             radial-gradient(36% 34% at 82% 82%, var(--sweep), transparent 72%);
  animation:drift 18s ease-in-out infinite; will-change:transform; }
@keyframes drift{ 0%{transform:translate3d(0,0,0)} 50%{transform:translate3d(2.2%,-3%,0)} 100%{transform:translate3d(0,0,0)} }
@media (prefers-reduced-motion: reduce){ .sweep{ animation:none; } }
.bg-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }
main, .site-footer{ position:relative; z-index:1; }

/* ---------- HEADER ---------- */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:60; height:var(--hdr-h);
  display:flex; align-items:center; color:var(--header-fg,#F4EEE3);
  background:transparent; transition:background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s; }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.site-header.scrolled{ background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2);
  color:var(--fg); box-shadow:0 1px 0 var(--border), var(--shadow-sm); }
/* Default-Header über dunklem Hero = helle Schrift; Light-Seiten ohne dunklen Hero -> dunkel */
.site-header[data-onlight="1"]:not(.scrolled){ color:var(--fg); }
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800; letter-spacing:-.02em; font-size:1.18rem; }
.brand svg{ height:30px; width:auto; display:block; }
.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{ position:relative; padding:.55rem .85rem; font-weight:500; font-size:.95rem; border-radius:var(--radius-sm); }
.nav a::after{ content:""; position:absolute; left:.85rem; right:.85rem; bottom:.4rem; height:2px;
  background:var(--brass); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--brass-strong); }

.icon-btn{ display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-sm);
  background:transparent; color:inherit; border:1px solid color-mix(in srgb,currentColor 22%,transparent); cursor:pointer; }
.icon-btn:hover{ border-color:var(--brass); color:var(--brass-strong); }
.icon-btn svg{ width:20px; height:20px; }
.theme-toggle .moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .moon{ display:block; }

.burger{ display:none; }

/* ---------- BUTTONS ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; cursor:pointer;
  font-weight:600; font-size:.98rem; line-height:1; padding:.95rem 1.5rem; border-radius:var(--radius-full);
  border:1px solid transparent; transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s, box-shadow .3s;
  will-change:transform; }
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:var(--brass); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--brass-strong); box-shadow:var(--shadow); }
.btn-ghost{ background:transparent; color:inherit; border-color:color-mix(in srgb,currentColor 28%,transparent); }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass-strong); }
.btn-dark{ background:var(--fg); color:var(--bg); }
.btn-dark:hover{ background:var(--oxblood); color:#fff; }
.btn:focus-visible, a:focus-visible, button:focus-visible, .nav a:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--brass); outline-offset:3px; border-radius:var(--radius-sm); }

/* ---------- CARDS ---------- */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
  display:flex; flex-direction:column; height:100%; overflow:hidden; }
.card:hover{ box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--brass) 50%, var(--border)); }
.card-pad{ padding:clamp(1.3rem,2.4vw,1.9rem); display:flex; flex-direction:column; height:100%; }

/* ---------- FOTOS: Duotone-Frame + Fallback ---------- */
.photo-frame{ position:relative; overflow:hidden; background:var(--surface-2); border-radius:inherit; isolation:isolate; }
.photo-frame.ar-1\/1{ aspect-ratio:1/1; } .photo-frame.ar-4\/5{ aspect-ratio:4/5; }
.photo-frame.ar-3\/4{ aspect-ratio:3/4; } .photo-frame.ar-16\/10{ aspect-ratio:16/10; }
.photo-frame.ar-3\/2{ aspect-ratio:3/2; } .photo-frame.ar-5\/6{ aspect-ratio:5/6; }
.photo{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.18) contrast(1.06) saturate(.92); transform:scale(1.001);
  transition:transform 1.1s var(--ease), filter .5s var(--ease); }
.photo-frame::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, rgba(110,42,42,.10), rgba(26,20,16,.46));
  mix-blend-mode:multiply; }
.photo-frame::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(120% 90% at 20% 0%, rgba(176,125,43,.16), transparent 60%); mix-blend-mode:soft-light; }
.photo-frame:hover .photo{ transform:scale(1.06); filter:grayscale(0) contrast(1.05) saturate(1); }
/* Marken-Poster-Fallback (kein kaputtes Bild) */
.photo-frame.is-broken .photo{ opacity:0; }
.photo-frame.is-broken{ background:
  linear-gradient(140deg, var(--oxblood), var(--fg) 70%); }
.photo-fallback{ position:absolute; inset:0; z-index:4; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:.7rem; color:#EDE6D8; text-align:center; padding:1rem; }
.photo-frame.is-broken .photo-fallback{ display:flex; }
.photo-fallback svg{ width:46px; height:46px; opacity:.85; }
.photo-fallback span{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; opacity:.8; }
.photo-cap{ position:absolute; left:0; bottom:0; z-index:5; padding:1rem 1.1rem; color:#F4EEE3;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; }

/* generische Seitenverhältnis-Utilities (für .visual / .avatar / .photo-frame) */
.ar-1\/1{ aspect-ratio:1/1; } .ar-4\/5{ aspect-ratio:4/5; } .ar-3\/4{ aspect-ratio:3/4; }
.ar-16\/10{ aspect-ratio:16/10; } .ar-3\/2{ aspect-ratio:3/2; } .ar-5\/6{ aspect-ratio:5/6; }

/* ---------- VISUALS: eigene Duotone-Lineart statt unsicherer Stock-Fotos ----------
   Edle, garantiert ladende Marken-Bilder (Ink-Verlauf + Messing-Lineart + Grain).
   Jede Kachel ein anderes Barber-Motiv -> kein „alles gleich"-Look. */
.visual{ position:relative; overflow:hidden; border-radius:inherit; isolation:isolate;
  background:linear-gradient(155deg,#261c13,#15110E 62%,#1F1610);
  display:grid; place-items:center; }
.visual::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 100% at 25% 0%, rgba(176,125,43,.22), transparent 58%),
             radial-gradient(80% 70% at 100% 100%, rgba(110,42,42,.30), transparent 60%); }
.visual::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.visual .motif{ position:relative; z-index:2; width:58%; height:58%; color:#D8A24A;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.5)); transition:transform .9s var(--ease); }
.visual:hover .motif{ transform:scale(1.05) rotate(-1deg); }
.visual .v-cap{ position:absolute; left:0; bottom:0; z-index:3; padding:.9rem 1.05rem; color:#F4EEE3;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; }
.visual .v-cap::before{ content:""; display:inline-block; width:1.4rem; height:1px; background:var(--brass); margin-right:.55rem; vertical-align:middle; }

/* Monogramm-Avatar fürs Team (klar gewollt, nie „kaputtes Foto") */
.avatar{ position:relative; overflow:hidden; border-radius:inherit; display:grid; place-items:center;
  background:linear-gradient(155deg,#261c13,#15110E 70%); isolation:isolate; }
.avatar::before{ content:""; position:absolute; inset:0; background:radial-gradient(70% 60% at 50% 30%, rgba(176,125,43,.22), transparent 62%); }
.avatar .ring{ position:relative; z-index:2; width:46%; aspect-ratio:1; border-radius:50%; border:2px solid var(--brass);
  display:grid; place-items:center; }
.avatar .mono{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:clamp(2rem,7vw,3rem); color:#F4EEE3; line-height:1; }
.avatar .role-ic{ position:absolute; z-index:2; bottom:12%; color:var(--brass); width:26px; height:26px; }

/* ---------- GUIDE-LINE (Signatur) ---------- */
.guideline{ position:absolute; left:max(1.1rem,calc((100vw - var(--maxw))/2)); top:0; bottom:0; width:2px; z-index:0; pointer-events:none; }
.guideline svg{ height:100%; width:2px; overflow:visible; }
@media (max-width:900px){ .guideline{ display:none; } }

/* ---------- SVG-Animations-Helfer ---------- */
[data-spin],[data-grow],[data-blade]{ transform-box:fill-box; transform-origin:50% 50%; }
.draw path,.draw line,.draw circle,.draw rect,.draw polyline{ }

/* ---------- PREZ: Reveals starten sichtbar (CDN-fail-sicher) ---------- */
.no-anim [data-reveal]>*, .no-anim [data-split], .no-anim [data-depth],
.no-anim [data-fade], .no-anim [data-clip]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
[data-split]{ display:inline-block; }
[data-tilt]{ transform-style:preserve-3d; }

/* ---------- PRELOADER ---------- */
#preloader{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:var(--bg);
  color:var(--fg); transition:opacity .5s ease; }
#preloader .pl-inner{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
#preloader svg{ width:min(60vw,260px); height:auto; overflow:visible; }
#preloader .pl-tag{ font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); }
.no-anim #preloader{ display:none; }

/* ---------- INFOGRAFIK: Fade-Längen-Diagramm ---------- */
.fade-chart{ display:grid; grid-template-columns:repeat(28,1fr); align-items:end; gap:clamp(2px,.5vw,5px);
  height:clamp(180px,32vw,300px); }
.fade-chart .bar{ background:linear-gradient(180deg,var(--brass),var(--oxblood)); border-radius:2px 2px 0 0;
  transform-origin:bottom; transform:scaleY(.04); will-change:transform; }

/* ---------- PROZESS-Schritte ---------- */
.steps{ counter-reset:step; display:grid; gap:clamp(1.2rem,3vw,2.2rem); }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; align-items:start; }
.step .dot{ width:48px; height:48px; border-radius:var(--radius-full); border:1px solid var(--brass);
  display:grid; place-items:center; font-family:"Bricolage Grotesque"; font-weight:800; color:var(--brass);
  background:var(--surface); position:relative; z-index:1; }

/* ---------- PREISLISTE ---------- */
.price-row{ display:flex; align-items:baseline; gap:.9rem; padding:.95rem 0; border-bottom:1px dashed var(--border); }
.price-row .pr-name{ font-weight:600; }
.price-row .pr-dots{ flex:1; border-bottom:1px dotted color-mix(in srgb,var(--muted) 60%,transparent); transform:translateY(-.25rem); }
.price-row .pr-price{ font-family:"Bricolage Grotesque"; font-weight:700; color:var(--brass-strong); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ---------- VORHER/NACHHER-SLIDER ---------- */
.ba{ position:relative; overflow:hidden; border-radius:var(--radius); aspect-ratio:3/2; cursor:ew-resize; user-select:none; touch-action:none; }
.ba .ba-after{ position:absolute; inset:0; clip-path:inset(0 0 0 50%); z-index:2; }
.ba .ba-handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--brass); z-index:3; }
.ba .ba-handle::after{ content:""; position:absolute; top:50%; left:50%; width:42px; height:42px; transform:translate(-50%,-50%);
  border-radius:var(--radius-full); background:var(--brass); box-shadow:var(--shadow); }
.ba .ba-handle::before{ content:"‹ ›"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; color:#fff; font-size:.8rem; letter-spacing:.05em; }
.ba .ba-tag{ position:absolute; bottom:.8rem; z-index:4; padding:.3rem .7rem; border-radius:var(--radius-full);
  background:rgba(26,20,16,.6); color:#F4EEE3; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; }
.ba .ba-tag.l{ left:.8rem; } .ba .ba-tag.r{ right:.8rem; }

/* ---------- FOOTER ---------- */
.site-footer{ background:var(--surface-2); border-top:1px solid var(--border); padding-block:clamp(3rem,6vw,5rem) 2rem; }
.site-footer a:hover{ color:var(--brass-strong); }
.foot-links a{ color:var(--muted); }
.hours-grid{ display:grid; grid-template-columns:1fr auto; gap:.4rem 1.4rem; }
.hours-grid .closed{ color:var(--muted); }

/* ---------- MOBILE-MENÜ ---------- */
.mobile-menu{ position:fixed; inset:0; z-index:80; background:var(--bg); color:var(--fg);
  display:flex; flex-direction:column; padding:calc(var(--hdr-h) + 1rem) var(--gut) 2rem;
  transform:translateY(-100%); transition:transform .5s var(--ease); overflow-y:auto; }
.mobile-menu.open{ transform:translateY(0); }
.mobile-menu a{ font-family:"Bricolage Grotesque"; font-weight:700; font-size:clamp(1.8rem,9vw,2.6rem);
  padding:.5rem 0; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.mobile-menu a .idx{ font-size:.9rem; }
.mm-close{ position:absolute; top:14px; right:var(--gut); }

/* ---------- TAGS / META ---------- */
.tag{ display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--border); border-radius:var(--radius-full); padding:.35rem .75rem; }
.dot-open{ width:8px; height:8px; border-radius:50%; background:#3FA66A; box-shadow:0 0 0 3px color-mix(in srgb,#3FA66A 30%,transparent); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .nav, .header-cta{ display:none; }
  .burger{ display:inline-grid; }
  :root{ --hdr-h:64px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .photo-frame:hover .photo{ transform:none; }
}

/* ---------- UTILITIES ---------- */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--fg); color:var(--bg); padding:.7rem 1rem; border-radius:0 0 var(--radius-sm) 0; }
.skip-link:focus{ left:0; }
.text-brass{ color:var(--brass-strong); }
.bleistung-num{ font-family:"Bricolage Grotesque"; font-weight:800; font-size:clamp(2.4rem,6vw,4rem); color:color-mix(in srgb,var(--brass) 28%, transparent); line-height:1; }
.line-link{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--brass-strong); }
.line-link svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
.line-link:hover svg{ transform:translateX(5px); }