/* ============================================================
   ALTSTADT COIFFEUR — styles.css
   Palette and typography derived from the brand crest:
   black / gold-foil gradient / ivory · Cinzel + Jost
   ============================================================ */

:root{
  --black:#0B0A08; --panel:#16130E; --panel-2:#1E1913;
  --gold:#C9A24B; --gold-light:#E9D6A0; --gold-deep:#8C6A24;
  --ivory:#F3EDE1; --grey:#948B79; --wood:#2A1F16;
  --au:linear-gradient(110deg,#8C6A24 0%,#C9A24B 28%,#F0E0AE 50%,#C9A24B 72%,#8C6A24 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;background:var(--black);color:var(--ivory);line-height:1.7;font-weight:300}
h1,h2,h3,.cinzel{font-family:'Cinzel',serif;font-weight:600;line-height:1.15;letter-spacing:.06em}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
::selection{background:var(--gold);color:var(--black)}

.gold-text{background:var(--au);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
.hairline{height:1px;background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold-light) 50%,var(--gold) 82%,transparent)}
.note{font-size:.82rem;opacity:.7}

/* ---------- Header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(11,10,8,.92);backdrop-filter:blur(10px)}
header .hairline{position:absolute;bottom:0;left:0;right:0}
.nav{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.5rem;gap:1rem}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand svg{height:44px;width:auto}
.brand .word{line-height:1.1}
.brand .word b{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.16em;font-size:1rem;display:block;color:var(--ivory)}
.brand .word small{font-family:'Cinzel',serif;font-weight:400;letter-spacing:.42em;font-size:.55rem;color:var(--gold);display:block}
nav ul{display:flex;gap:1.9rem;list-style:none}
nav a{text-decoration:none;font-size:.76rem;letter-spacing:.26em;text-transform:uppercase;color:var(--grey);transition:color .25s}
nav a:hover{color:var(--gold-light)}
.menu-toggle{display:none;background:none;border:1px solid var(--gold-deep);color:var(--gold-light);padding:.45rem .9rem;cursor:pointer;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-family:'Jost',sans-serif}

.btn{display:inline-block;background:var(--au);background-size:200% auto;color:var(--black);border:none;cursor:pointer;
  font-family:'Jost',sans-serif;font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-size:.74rem;
  padding:1rem 2.2rem;text-decoration:none;transition:background-position .5s, box-shadow .3s}
.btn:hover{background-position:100% center;box-shadow:0 0 26px rgba(201,162,75,.35)}
.btn.line{background:transparent;border:1px solid var(--gold-deep);color:var(--gold-light)}
.btn.line:hover{border-color:var(--gold-light);box-shadow:0 0 18px rgba(201,162,75,.2)}
.btn:disabled{background:var(--panel-2);color:var(--grey);cursor:not-allowed;box-shadow:none}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:grid;place-items:center;text-align:center;padding:7.5rem 1.5rem 4rem;position:relative;
  background:radial-gradient(ellipse 65% 55% at 50% 40%,#221B10 0%,var(--black) 72%)}
.hero .frame{position:absolute;inset:20px;border:1px solid rgba(201,162,75,.22);pointer-events:none}
.crest{width:min(240px,55vw);margin:0 auto 1.6rem;filter:drop-shadow(0 0 34px rgba(201,162,75,.25));animation:up 1.1s ease .1s both}
.hero .wordmark{animation:up 1.1s ease .3s both}
.hero .wordmark b{font-family:'Cinzel',serif;font-weight:600;font-size:clamp(2.1rem,6.5vw,3.6rem);letter-spacing:.18em;display:block}
.hero .wordmark small{font-family:'Cinzel',serif;font-weight:400;font-size:clamp(.85rem,2.5vw,1.15rem);letter-spacing:.62em;color:var(--gold);display:block;margin-top:.3rem;padding-left:.62em}
.hero .divider{width:130px;margin:1.7rem auto;animation:up 1.1s ease .45s both}
.hero p.lead{max-width:540px;margin:0 auto 2.3rem;color:var(--grey);animation:up 1.1s ease .55s both}
.hero .actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:up 1.1s ease .7s both}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- Sections ---------- */
section{padding:6.5rem 1.5rem;position:relative}
.wrap{max-width:1200px;margin:auto}
.eyebrow{font-size:.7rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold)}
.sec-head{text-align:center;max-width:620px;margin:0 auto 3.5rem}
.sec-head h2{font-size:clamp(1.9rem,4.5vw,3rem);margin-top:.9rem}
.sec-head .divider{width:90px;margin:1.4rem auto 0}

/* Leistungen */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:rgba(201,162,75,.25);border:1px solid rgba(201,162,75,.25)}
.svc{background:var(--panel);padding:2.6rem 2rem;text-align:center;position:relative;overflow:hidden;transition:background .35s}
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--au);background-size:200% auto;transform:scaleX(0);transition:transform .45s ease}
.svc:hover{background:var(--panel-2)}
.svc:hover::before{transform:none}
.svc .num{font-family:'Cinzel',serif;color:var(--gold-deep);font-size:.85rem;letter-spacing:.3em}
.svc h3{font-size:1.25rem;margin:.7rem 0 .3rem}
.svc .price{font-family:'Cinzel',serif;font-size:1.2rem;color:var(--gold-light);margin-bottom:.8rem}
.svc p{font-size:.87rem;color:var(--grey)}
.svc .dur{display:inline-block;margin-top:1.1rem;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-deep);padding:.35rem .95rem}

/* Produkte */
#produkte{background:linear-gradient(180deg,var(--panel) 0%,var(--wood) 100%)}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.3rem}
.prod{background:rgba(11,10,8,.5);border:1px solid rgba(201,162,75,.3);padding:2rem 1.3rem;text-align:center;transition:transform .3s, border-color .3s, box-shadow .3s}
.prod:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.prod .tin{width:74px;height:74px;border-radius:50%;margin:0 auto 1.1rem;border:1px solid var(--gold);display:grid;place-items:center;
  background:radial-gradient(circle at 32% 30%,#3A2E1A,#171208 70%)}
.prod .tin svg{width:38px;height:38px}
.prod h3{font-size:.95rem;letter-spacing:.12em}
.prod .sub{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:.3rem 0 .6rem}
.prod .price{font-family:'Cinzel',serif;color:var(--gold-light)}
.prod-note{text-align:center;margin-top:2rem;font-size:.85rem;color:var(--grey);font-style:italic}

/* Upload */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.split h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:.9rem 0 1.2rem}
.split p{color:var(--grey);margin-bottom:1rem}
.drop{border:1px solid var(--gold-deep);background:var(--panel);padding:3rem 1.5rem;text-align:center;cursor:pointer;position:relative;transition:box-shadow .3s, border-color .3s}
.drop::after{content:"";position:absolute;inset:8px;border:1px dashed rgba(201,162,75,.4);pointer-events:none}
.drop:hover,.drop.dragover{border-color:var(--gold-light);box-shadow:0 0 30px rgba(201,162,75,.18)}
.drop b{display:block;font-family:'Cinzel',serif;font-weight:500;font-size:1.2rem;margin-bottom:.45rem;letter-spacing:.08em}
.drop span{font-size:.82rem;color:var(--grey)}
.previews{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:.7rem;margin-top:1rem}
.previews figure{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--gold-deep)}
.previews img{width:100%;height:100%;object-fit:cover}
.previews button{position:absolute;top:5px;right:5px;background:var(--black);color:var(--gold-light);border:1px solid var(--gold-deep);width:22px;height:22px;cursor:pointer;line-height:1;z-index:1}

/* Booking */
#termin{background:var(--panel)}
.booking{max-width:780px;margin:auto;background:var(--black);border:1px solid var(--gold-deep);padding:2.6rem;position:relative}
.booking::before{content:"";position:absolute;inset:7px;border:1px solid rgba(201,162,75,.2);pointer-events:none}
.steps{display:flex;justify-content:center;gap:1.5rem;margin-bottom:2.4rem}
.dot{width:36px;height:36px;border:1px solid var(--gold-deep);transform:rotate(45deg);display:grid;place-items:center;transition:background .3s,border-color .3s}
.dot i{font-style:normal;font-family:'Cinzel',serif;transform:rotate(-45deg);font-size:.85rem;color:var(--grey);transition:color .3s}
.dot.active{background:var(--gold);border-color:var(--gold)}
.dot.active i{color:var(--black)}
.pane{display:none;animation:fadein .4s ease;position:relative}
.pane.active{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pane h3{text-align:center;font-size:1.25rem;margin-bottom:1.5rem;letter-spacing:.1em}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem}
.choice{background:transparent;border:1px solid rgba(201,162,75,.35);color:var(--ivory);padding:1.1rem .9rem;cursor:pointer;text-align:center;
  font-family:'Jost',sans-serif;font-weight:400;font-size:.9rem;transition:border-color .25s, background .25s, color .25s}
.choice small{display:block;font-family:'Cinzel',serif;color:var(--gold-light);font-size:.85rem;margin-top:.3rem}
.choice:hover:not(:disabled){border-color:var(--gold-light)}
.choice.selected{background:var(--gold);border-color:var(--gold);color:var(--black)}
.choice.selected small{color:var(--black)}
.choice:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.booking label{display:block;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);margin:1.3rem 0 .45rem}
.booking input{width:100%;background:var(--panel-2);border:1px solid rgba(201,162,75,.35);color:var(--ivory);padding:.9rem 1rem;font-family:'Jost',sans-serif;font-weight:300}
.booking input:focus{border-color:var(--gold-light);outline:none}
.booking input.invalid{border-color:#B3564A}
.error{color:#D98A7E;font-size:.8rem;margin-top:.35rem}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:.55rem;margin-top:.4rem}
.slot-hint{font-size:.82rem;color:var(--grey);font-style:italic;margin-top:.2rem}
.slots.loading{opacity:.4;pointer-events:none}
.nav-row{display:flex;justify-content:space-between;margin-top:2.3rem}
.confirm{text-align:center;padding:1.6rem 0}
.confirm .cinzel{font-size:1.9rem}
.confirm p{color:var(--grey);margin-top:.9rem}
.confirm .ref{font-family:'Cinzel',serif;color:var(--gold-light);letter-spacing:.2em}

/* Kontakt */
.visit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.5rem;text-align:center;max-width:900px;margin:auto}
.visit-grid h3{font-size:1rem;letter-spacing:.2em;color:var(--gold-light);margin-bottom:.9rem}
.visit-grid p,.hours{font-size:.95rem;color:var(--grey)}
.hours{list-style:none}
.hours li{display:flex;justify-content:space-between;max-width:230px;margin:0 auto;padding:.15rem 0}
.hours .closed{color:var(--gold)}

footer{text-align:center;padding:3.5rem 1.5rem 2.5rem;color:var(--grey);font-size:.82rem}
footer svg{height:64px;width:auto;margin-bottom:1rem;opacity:.9}
footer .cinzel{letter-spacing:.3em;font-size:1.05rem;color:var(--ivory)}
footer .sub{font-family:'Cinzel',serif;letter-spacing:.5em;font-size:.6rem;color:var(--gold);margin-bottom:1rem}
footer .copyright{opacity:.55}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:880px){
  .split{grid-template-columns:1fr}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--black);flex-direction:column;padding:1.3rem;gap:1.1rem;border-bottom:1px solid var(--gold-deep)}
  nav ul.open{display:flex}
  .menu-toggle{display:block}
  .nav .btn{display:none}
  .steps{gap:1.1rem}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   SCREENSHOT-INSPIRED VISUAL UPDATE
   Clean editorial hero, text-only brand and refined animations
   ============================================================ */

:root{
  --header-height:92px;
  --ease-luxury:cubic-bezier(.22,1,.36,1);
}

/* Header */
header{
  min-height:var(--header-height);
  display:flex;
  align-items:center;
  transition:min-height .35s var(--ease-luxury),
  background-color .35s ease,
  box-shadow .35s ease;
}

header.scrolled{
  min-height:74px;
  background:rgba(11,10,8,.97);
  box-shadow:0 12px 34px rgba(0,0,0,.24);
}

.nav{
  width:100%;
  max-width:1460px;
  padding:1rem 2.8rem;
}

.brand{
  gap:.55rem;
  font-family:'Cinzel',serif;
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.18em;
  white-space:nowrap;
}

.brand svg,
.brand .word{
  display:none;
}

.brand-altstadt{color:var(--gold)}
.brand-coiffeur{color:var(--ivory)}

nav ul{gap:2.6rem}

nav a{
  position:relative;
  font-size:.86rem;
  letter-spacing:0;
  text-transform:none;
  font-weight:500;
  color:#b6b1aa;
}

nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.55rem;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s var(--ease-luxury);
}

nav a:hover::after,
nav a.active::after{
  transform:scaleX(1);
  transform-origin:left;
}

nav a.active{color:var(--ivory)}

.nav > .btn{
  padding:.82rem 1.55rem;
  letter-spacing:.04em;
  text-transform:none;
  font-size:.82rem;
  font-weight:500;
}

/* Hero */
.hero{
  min-height:100svh;
  padding:calc(var(--header-height) + 5rem) 1.5rem 5rem;
  background:
          radial-gradient(circle at 50% 68%,rgba(201,162,75,.055),transparent 30%),
          var(--black);
  overflow:hidden;
}

.hero .frame,
.hero .crest,
.hero .wordmark,
.hero .divider{
  display:none;
}

.hero::before{
  content:"";
  position:absolute;
  top:var(--header-height);
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.15),transparent);
}

.hero-inner{
  width:min(900px,100%);
  margin-top:4rem;
}

.hero-eyebrow{
  margin-bottom:2.2rem;
  color:var(--gold);
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.36em;
  text-transform:uppercase;
}

.hero-title{
  margin:0;
  font-family:'Cinzel',serif;
  font-weight:400;
  line-height:.93;
  letter-spacing:-.045em;
}

.hero-title span{display:block}

.hero-title-gold{
  color:var(--gold-light);
  font-size:clamp(4.2rem,8.8vw,7.4rem);
}

.hero-title-ivory{
  margin-top:1.3rem;
  color:var(--ivory);
  font-size:clamp(3.8rem,8vw,6.8rem);
}

.hero p.lead{
  max-width:650px;
  margin:3rem auto 0;
  color:#b8b3ac;
  font-size:clamp(1.05rem,1.45vw,1.32rem);
  line-height:1.55;
  animation:none;
}

.hero .actions{
  margin-top:2.7rem;
  animation:none;
}

.hero .actions .btn{
  min-width:180px;
  padding:.95rem 1.8rem;
  letter-spacing:.04em;
  text-transform:none;
  font-size:.84rem;
  font-weight:500;
}

.btn{
  transition:transform .25s var(--ease-luxury),
  background-position .5s,
  box-shadow .3s,
  border-color .3s,
  color .3s;
}

.btn:hover{transform:translateY(-2px)}

.btn.line{
  border-color:rgba(255,255,255,.28);
  color:#dfdbd4;
}

/* Hero entrance */
.hero-load{
  opacity:0;
  transform:translateY(24px);
}

body.ready .hero-eyebrow{
  animation:heroRise .75s .12s var(--ease-luxury) forwards;
}

body.ready .hero-title{
  animation:heroRise .85s .24s var(--ease-luxury) forwards;
}

body.ready .hero .lead{
  animation:heroRise .75s .42s var(--ease-luxury) forwards;
}

body.ready .hero .actions{
  animation:heroRise .75s .56s var(--ease-luxury) forwards;
}

@keyframes heroRise{
  to{
    opacity:1;
    transform:none;
  }
}

/* Refined reveal motion */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:
          opacity .75s var(--ease-luxury),
          transform .75s var(--ease-luxury);
  transition-delay:var(--reveal-delay,0ms);
}

.reveal.in{
  opacity:1;
  transform:none;
}

/* Upload feedback */
.drop{
  transition:
          transform .3s var(--ease-luxury),
          box-shadow .3s,
          border-color .3s,
          background-color .3s;
}

.drop:hover,
.drop.dragover{
  transform:translateY(-3px);
  background:rgba(201,162,75,.04);
}

.previews figure{
  opacity:0;
  transform:scale(.94);
}

.previews figure.preview-in{
  animation:previewIn .35s var(--ease-luxury) forwards;
}

.previews figure.preview-out{
  animation:previewOut .22s ease forwards;
}

@keyframes previewIn{
  to{opacity:1;transform:scale(1)}
}

@keyframes previewOut{
  to{opacity:0;transform:scale(.92)}
}

/* Service and product cards */
.svc,
.prod{
  transition:
          transform .35s var(--ease-luxury),
          background .35s,
          border-color .3s,
          box-shadow .3s;
}

.svc:hover{transform:translateY(-4px)}

/* Responsive */
@media (max-width:880px){
  header{min-height:76px}

  .nav{
    padding:.85rem 1.25rem;
  }

  .brand{
    font-size:.85rem;
    letter-spacing:.12em;
  }

  .hero{
    padding-top:9rem;
  }

  .hero-inner{
    margin-top:1rem;
  }

  .hero-title-ivory{
    margin-top:.8rem;
  }

  nav ul{
    top:calc(100% + 1px);
  }
}

@media (max-width:560px){
  .brand{
    display:block;
    line-height:1.25;
  }

  .brand span{
    display:block;
  }

  .hero-title-gold{
    font-size:clamp(3.35rem,18vw,4.6rem);
  }

  .hero-title-ivory{
    font-size:clamp(3rem,16vw,4.2rem);
  }

  .hero-eyebrow{
    font-size:.65rem;
    letter-spacing:.28em;
  }

  .hero .actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hero .actions .btn{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-load,
  .reveal,
  .previews figure{
    opacity:1;
    transform:none;
  }
}