:root{
  /* aus dem Barbershop-Foto: Rohbeton, Sichtziegel, Stahlrohr, Ledersessel, Glühfaden */
  --raw:#1C1B19;
  --pipe:#2B2A28;
  --concrete:#B4AEA6;
  --brick:#8C6152;
  --leather:#8A5A3C;
  --bulb:#F2C879;
  --bone:#E8E4DD;

  --m--1:.82rem;
  --m-0:clamp(1rem,.97rem + .14vw,1.07rem);
  --m-1:clamp(1.1rem,1.02rem + .35vw,1.3rem);
  --m-2:clamp(1.5rem,1.15rem + 1.5vw,2.5rem);
  --m-3:clamp(2.2rem,1.35rem + 3.6vw,4.4rem);
  --space:clamp(1.35rem,1.1rem + 1.5vw,2.5rem);
  --edge:clamp(1.15rem,.65rem + 2.5vw,3rem);
}
*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,p,ul,ol,li,figure,dl,dt,dd{margin:0;padding:0;}
body{
  font-family:'Barlow',system-ui,sans-serif;
  font-size:var(--m-0);line-height:1.66;
  color:var(--bone);background:var(--raw);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--bulb);outline-offset:3px;}
[id]{scroll-margin-top:4.5rem;}

.x-display{
  font-family:'Bricolage Grotesque',Impact,sans-serif;
  font-variation-settings:'wdth' 82;
  font-weight:800;line-height:.96;letter-spacing:-.02em;text-transform:uppercase;
}
.x-mono{font-family:'Azeret Mono',ui-monospace,monospace;}
.x-wrap{width:min(70rem,100%);margin-inline:auto;padding-inline:var(--edge);}
.x-tag{
  font-family:'Azeret Mono',monospace;font-size:var(--m--1);
  letter-spacing:.16em;text-transform:uppercase;color:var(--bulb);
}

/* ---------- Rohrleitung als Trennelement ---------- */
.pipe-rule{
  height:6px;background:var(--pipe);position:relative;
  border-block:1px solid rgba(232,228,221,.14);
}
.pipe-rule::before,.pipe-rule::after{
  content:"";position:absolute;top:-4px;width:14px;height:14px;
  background:var(--pipe);border:1px solid rgba(232,228,221,.2);
}
.pipe-rule::before{left:8%;}
.pipe-rule::after{right:8%;}

/* ---------- Präsenzo-Leiste ---------- */
.pz{background:var(--pipe);font-size:var(--m--1);}
.pz__in{
  width:min(70rem,100%);margin-inline:auto;padding:.65rem var(--edge);
  display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;justify-content:center;text-align:center;
  color:var(--concrete);
}
.pz__cta{color:var(--bulb);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}

/* ---------- Kopf ---------- */
.head__in{
  width:min(70rem,100%);margin-inline:auto;padding:1.1rem var(--edge);
  display:flex;align-items:center;gap:var(--space);flex-wrap:wrap;
}
.shop{
  font-family:'Bricolage Grotesque',sans-serif;font-variation-settings:'wdth' 80;
  font-weight:800;font-size:var(--m-1);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
}
.shop span{color:var(--bulb);}
.menu{margin-inline-start:auto;display:flex;gap:1.4rem;flex-wrap:wrap;font-family:'Azeret Mono',monospace;font-size:var(--m--1);letter-spacing:.06em;text-transform:uppercase;}
.menu a{text-decoration:none;color:var(--concrete);padding-bottom:.2rem;border-bottom:1px solid transparent;}
.menu a:hover,.menu a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--bulb);}
.walkin{
  background:var(--bulb);color:var(--raw);text-decoration:none;
  font-family:'Azeret Mono',monospace;font-weight:700;font-size:var(--m--1);
  letter-spacing:.06em;text-transform:uppercase;padding:.6rem 1.1rem;white-space:nowrap;
}
.walkin:hover{background:var(--bone);}

/* ---------- Hero ---------- */
.top{position:relative;}
.top__figure img{width:100%;height:clamp(20rem,50vh,31rem);object-fit:cover;filter:brightness(.78);}
.top__over{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  /* Verlauf, damit Text auf dem hellen Fensterbereich lesbar bleibt */
  background:linear-gradient(to top,
    rgba(28,27,25,.94) 0%,
    rgba(28,27,25,.78) 42%,
    rgba(28,27,25,.34) 78%,
    rgba(28,27,25,.10) 100%);
}
.top__inner{width:min(70rem,100%);margin-inline:auto;padding:var(--space) var(--edge);}
.top h1{font-size:var(--m-3);max-width:19ch;margin-top:.7rem;}
.top__lede{
  max-width:44ch;margin-top:1.1rem;font-size:var(--m-1);line-height:1.45;color:var(--bone);
}
.top__row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem;}
.b-bulb{
  background:var(--bulb);color:var(--raw);text-decoration:none;
  font-family:'Azeret Mono',monospace;font-weight:700;font-size:var(--m--1);
  letter-spacing:.08em;text-transform:uppercase;padding:.85rem 1.5rem;
}
.b-bulb:hover{background:var(--bone);}
.b-wire{
  border:1px solid var(--bone);color:var(--bone);text-decoration:none;
  font-family:'Azeret Mono',monospace;font-weight:700;font-size:var(--m--1);
  letter-spacing:.08em;text-transform:uppercase;padding:.85rem 1.5rem;
}
.b-wire:hover{background:var(--bone);color:var(--raw);}

/* ---------- Abschnitte ---------- */
.slab{padding-block:clamp(2.75rem,2rem + 4vw,5rem);}
.slab--brick{background:linear-gradient(rgba(28,27,25,.9),rgba(28,27,25,.9)),var(--brick);}
.slab__head h2{font-size:var(--m-2);margin-top:.6rem;max-width:24ch;}
.slab__head p{margin-top:.8rem;max-width:50ch;color:var(--concrete);}

/* ---------- Signatur: Auslastungstafel ---------- */
.board{
  margin-top:clamp(1.75rem,1.25rem + 2vw,2.75rem);
  border:1px solid rgba(232,228,221,.18);background:var(--pipe);
  padding:clamp(1.1rem,.8rem + 1.2vw,1.85rem);
}
.board__legend{
  display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;
  font-family:'Azeret Mono',monospace;font-size:var(--m--1);color:var(--concrete);
  margin-bottom:1.4rem;letter-spacing:.04em;
}
.board__grid{
  display:grid;grid-template-columns:repeat(9,1fr);gap:.4rem;
  align-items:stretch;height:clamp(9rem,7rem + 6vw,12rem);
}
.slot{display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem;min-height:0;}
.slot__bar{
  display:block;background:var(--bulb);width:100%;flex:0 0 auto;
  border-top:2px solid var(--bone);min-height:3px;
}
.slot--busy .slot__bar{background:var(--leather);}
.slot__hour{
  font-family:'Azeret Mono',monospace;font-size:.7rem;color:var(--concrete);
  text-align:center;letter-spacing:0;
}
.slot__wait{
  font-family:'Azeret Mono',monospace;font-size:.7rem;font-weight:700;
  text-align:center;color:var(--bone);
}
.board__note{
  margin-top:1.25rem;font-size:var(--m--1);color:var(--concrete);max-width:52ch;
}

/* ---------- Schnittkarte ---------- */
.menu-list{margin-top:clamp(1.75rem,1.25rem + 2vw,2.75rem);border-top:1px solid rgba(232,228,221,.22);}
.cut{
  display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:baseline;
  padding-block:1.15rem;border-bottom:1px solid rgba(232,228,221,.12);
}
.cut__name{font-family:'Bricolage Grotesque',sans-serif;font-variation-settings:'wdth' 85;font-weight:700;font-size:var(--m-1);text-transform:uppercase;}
.cut__note{flex:1 1 17rem;font-size:var(--m--1);color:var(--concrete);}
.cut__meta{margin-inline-start:auto;font-family:'Azeret Mono',monospace;font-size:var(--m--1);font-weight:700;white-space:nowrap;color:var(--bulb);}
@media (max-width:40rem){
  .cut__name{flex:1 1 100%;}
  .cut__note{flex:1 1 100%;order:3;}
  .cut__meta{margin-inline-start:0;order:2;}
}

/* ---------- Regeln ---------- */
.crew{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(1.75rem,1.25rem + 2vw,2.75rem);}
@media (min-width:44rem){.crew{grid-template-columns:1fr 1fr;}}
@media (min-width:66rem){.crew{grid-template-columns:repeat(3,1fr);}}
.card{border:1px solid rgba(232,228,221,.18);padding:1.4rem;background:rgba(43,42,40,.55);}
.card h3{font-family:'Bricolage Grotesque',sans-serif;font-variation-settings:'wdth' 85;font-weight:700;font-size:var(--m-1);text-transform:uppercase;}
.card p{margin-top:.5rem;font-size:var(--m--1);color:var(--concrete);}
.card__tag{margin-top:1rem;font-family:'Azeret Mono',monospace;font-size:var(--m--1);color:var(--bulb);}

/* ---------- Kontakt ---------- */
.duo{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(1.75rem,1.25rem + 2vw,2.75rem);}
@media (min-width:44rem){.duo{grid-template-columns:1fr 1fr;}}
.duo__col h3{font-family:'Azeret Mono',monospace;font-size:var(--m--1);letter-spacing:.14em;text-transform:uppercase;color:var(--bulb);margin-bottom:.9rem;}
.duo__line{display:flex;justify-content:space-between;gap:1rem;padding-block:.45rem;border-bottom:1px solid rgba(232,228,221,.12);font-size:var(--m--1);}
.duo__line span:last-child{font-family:'Azeret Mono',monospace;}

/* ---------- Unterseiten ---------- */
.pghead{padding-block:clamp(2.25rem,1.75rem + 3vw,4rem) 0;}
.pghead h1{font-size:var(--m-2);max-width:22ch;margin-top:.7rem;}
.pghead p{margin-top:.9rem;max-width:50ch;color:var(--concrete);font-size:var(--m-1);line-height:1.5;}

.foot{border-top:1px solid rgba(232,228,221,.15);padding-block:2.5rem;font-size:var(--m--1);color:var(--concrete);}
.foot a{color:var(--bulb);}
.foot p + p{margin-top:.6rem;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* Schmale Bildschirme: Text unter das Bild, sonst wird die obere Zeile beschnitten */
@media (max-width:52rem){
  .top__over{position:static;background:none;}
  .top__figure img{filter:none;height:clamp(11rem,34vh,16rem);}
  .top__inner{padding-top:1.4rem;}
}

/* Pflichtangabe nach PAngV: Endpreise fuer Verbraucher */
.tax-note{margin-top:1.1rem;font-size:var(--m--1);color:var(--concrete);opacity:1;}