/* Barberlounge Ramo · Stilvorlage
   Alle Werte stammen aus projekte/barberlounge-ramo/design-lock.md (Abschnitt Token).
   Farben, Schriftgrößen, Radien und Dauern stehen nur in :root; darunter wird
   ausschließlich mit diesen Variablen gearbeitet. */

@font-face{font-family:"Cormorant";font-style:normal;font-display:swap;font-weight:300 700;src:url("../fonts/cormorant-latin-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant";font-style:normal;font-display:swap;font-weight:300 700;src:url("../fonts/cormorant-latin-ext-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-display:swap;font-weight:100 900;src:url("../fonts/jost-latin-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-display:swap;font-weight:100 900;src:url("../fonts/jost-latin-ext-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Farben (Kontrast zum Grund im design-lock.md) */
  --grund:#121110;
  --grund-alt:#1a1817;
  --flaeche:#211e1c;
  --text:#f4efe9;
  --gedaempft:#a79e94;
  --linie:#332e2b;
  --linie-stark:#74685e;
  --kupfer:#c2794a;
  --kupfer-hover:#d08a5a;
  --kupfer-hell:#e0a878;
  --auf-kupfer:#141110;
  --kupfer-linie:rgba(194,121,74,.72);
  --kopf-grund:rgba(18,17,16,.94);

  /* Schrift */
  --display:"Cormorant",Georgia,serif;
  --body:"Jost",system-ui,sans-serif;
  --gr-label:.8125rem;
  --gr-klein:.9375rem;
  --gr-text:1.0625rem;
  --gr-lead:1.25rem;
  --gr-h3:clamp(1.75rem,2.4vw,2.5rem);
  --gr-h2:clamp(2.25rem,3.8vw,3.5rem);
  --gr-h1:clamp(2.6rem,4.4vw,4.25rem);
  --gr-note:clamp(4.5rem,9vw,7.5rem);
  --gr-marke:1.375rem;
  --gr-preis:1.625rem;
  --gr-zitat:clamp(1.25rem,1.6vw,1.5rem);
  --gr-recht-h2:clamp(1.5rem,2vw,1.875rem);
  --sperrung-versal:.12em;

  /* Raum */
  --kopf-hoehe:72px;
  --leiste-hoehe:56px;
  --rand:clamp(1rem,4vw,3rem);
  --inhalt:76rem;
  --abschnitt:clamp(4.5rem,9vw,8rem);
  --spalt:clamp(1.5rem,3vw,3rem);
  --raster-spalt:10px;
  --zeile:62ch;

  /* Form */
  --radius:2px;
  --rahmen-einzug:14px;

  /* Bewegung */
  --kurve:cubic-bezier(.16,1,.3,1);
  --dauer-kurz:100ms;
  --dauer-hover:200ms;
  --dauer-einblenden:300ms;
  --versatz:50ms;
}

/* ---------------------------------------------------------------- Basis */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--text);font:400 var(--gr-text)/1.65 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:var(--kupfer-hell);text-underline-offset:.2em;text-decoration-thickness:1px;transition:color var(--dauer-hover) ease-out}
a:hover{color:var(--text)}
:focus-visible{outline:2px solid var(--kupfer-hell);outline-offset:3px;border-radius:var(--radius)}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.05;letter-spacing:-.01em;margin:0;text-wrap:balance}
h2{font-size:var(--gr-h2)}
h3{font-size:var(--gr-h3)}
p{margin:0;max-width:var(--zeile);text-wrap:pretty}
[id]{scroll-margin-top:calc(var(--kopf-hoehe) + 16px)}
.wrap{width:100%;max-width:var(--inhalt);margin:0 auto;padding:0 var(--rand)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--rand);top:-100px;z-index:30;background:var(--kupfer);color:var(--auf-kupfer);padding:.6rem 1rem;border-radius:var(--radius);text-decoration:none;font-weight:500}
.skip:focus{top:12px}

/* ---------------------------------------------------------------- Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.6rem;border-radius:var(--radius);border:1px solid transparent;font:500 var(--gr-label)/1 var(--body);letter-spacing:var(--sperrung-versal);text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:background-color var(--dauer-hover) ease-out,border-color var(--dauer-hover) ease-out,color var(--dauer-hover) ease-out,transform var(--dauer-kurz) ease-out}
.knopf:active{transform:scale(.97)}
.knopf-haupt{background:var(--kupfer);color:var(--auf-kupfer)}
.knopf-haupt:hover{background:var(--kupfer-hover);color:var(--auf-kupfer)}
.knopf-ruhig{border-color:var(--linie-stark);color:var(--text)}
.knopf-ruhig:hover{border-color:var(--gedaempft);color:var(--text)}

/* ---------------------------------------------------------------- Kopf */
.kopf{position:sticky;top:0;z-index:20;height:var(--kopf-hoehe);background:var(--kopf-grund);border-bottom:1px solid var(--linie);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.kopf .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.marke{display:flex;align-items:center;gap:.75rem;color:var(--text);text-decoration:none}
.marke img{width:41px;height:40px}
.marke span{font:500 var(--gr-marke)/1 var(--display);letter-spacing:.01em;white-space:nowrap}
.nav ul{display:flex;gap:clamp(1.25rem,2.4vw,2.25rem);list-style:none;margin:0;padding:0}
.nav a{color:var(--gedaempft);text-decoration:none;font-size:var(--gr-label);font-weight:500;letter-spacing:var(--sperrung-versal);text-transform:uppercase;white-space:nowrap}
.nav a:hover{color:var(--text)}
.menue{display:none;position:relative}
.menue summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 .25rem;font-size:var(--gr-label);font-weight:500;letter-spacing:var(--sperrung-versal);text-transform:uppercase;color:var(--text)}
.menue summary::-webkit-details-marker{display:none}
.menue .menue-auf,.menue[open] .menue-zu{display:none}
.menue[open] .menue-auf{display:inline}
.menue ul{position:absolute;right:0;top:calc(100% + 14px);min-width:220px;list-style:none;margin:0;padding:.5rem 0;background:var(--flaeche);border:1px solid var(--linie)}
.menue a{display:block;padding:.85rem 1.25rem;color:var(--text);text-decoration:none}

/* ---------------------------------------------------------------- Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:clamp(560px,calc(100dvh - var(--kopf-hoehe) - var(--leiste-hoehe)),860px)}
.hero-text{display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;padding:clamp(2.5rem,5vw,4rem) var(--spalt) clamp(2.5rem,6vw,4.5rem) max(var(--rand),calc((100vw - var(--inhalt))/2 + var(--rand)))}
.hero-logo{width:clamp(117px,11vw,160px);height:auto}
.hero h1{font-size:var(--gr-h1);line-height:1.02;max-width:16ch}
.hero p{margin-top:1.4rem;font-size:var(--gr-lead);color:var(--gedaempft);max-width:30ch}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem}
.hero-bild{position:relative;min-height:100%}
.hero-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero-bild::after{content:"";position:absolute;inset:var(--rahmen-einzug);border:1px solid var(--kupfer-linie);pointer-events:none}

/* ---------------------------------------------------------------- Status-Leiste */
.leiste{background:var(--grund-alt);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);font-size:var(--gr-klein)}
.leiste .wrap{min-height:var(--leiste-hoehe);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem 2rem;padding-block:.8rem}
.status{display:flex;align-items:center;gap:.6rem}
.status-punkt{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--gedaempft)}
.status.offen .status-punkt{border-color:var(--kupfer)}
.status strong{font-weight:500}
.status span{color:var(--gedaempft)}
.leiste-rechts{display:flex;flex-wrap:wrap;gap:.4rem 2rem;color:var(--gedaempft)}

/* ---------------------------------------------------------------- Abschnitte */
.abschnitt{padding-block:var(--abschnitt)}
.abschnitt-alt{background:var(--grund-alt)}
.kopfzeile{margin-bottom:clamp(2rem,4vw,3.25rem)}
.kopfzeile p{margin-top:1rem;color:var(--gedaempft)}

/* Arbeiten: 5 Spalten, ein Bild 2x2, sechs Bilder 1x1, alle 3:4 */
.arbeiten{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--raster-spalt);margin:0;padding:0;list-style:none}
.arbeiten li{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--flaeche)}
.arbeiten li:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.arbeiten li:first-child img{position:absolute;inset:0}
.arbeiten img{width:100%;height:100%;object-fit:cover}
.arbeiten-fuss{margin-top:1.5rem;color:var(--gedaempft)}

/* Preise */
.preise{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--spalt);align-items:start}
.preis-gruppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spalt)}
.preis-gruppe h3{font-size:var(--gr-h3);padding-bottom:1rem;margin-bottom:.5rem;border-bottom:1px solid var(--linie)}
.preis-liste{list-style:none;margin:0;padding:0}
.preis-liste li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem 1.5rem;padding:1rem 0}
.preis-name{font-weight:500}
.preis-info{grid-column:1;color:var(--gedaempft);font-size:var(--gr-klein);line-height:1.5}
.preis-betrag{grid-column:2;grid-row:1 / span 2;align-self:start;font:500 var(--gr-preis)/1.1 var(--display);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.buchen-box{position:sticky;top:calc(var(--kopf-hoehe) + 24px);background:var(--flaeche);border:1px solid var(--linie);padding:clamp(1.5rem,2.5vw,2.25rem)}
.buchen-box h3{font-size:var(--gr-h3)}
.buchen-box p{margin-top:.9rem;color:var(--gedaempft)}
.buchen-box .knopf{margin-top:1.6rem;width:100%}
.buchen-box .anruf{margin-top:1rem;font-size:var(--gr-klein);color:var(--gedaempft)}
.buchen-box .bar{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--linie);color:var(--text);font-size:var(--gr-klein)}

/* Über uns */
.ueber{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.ueber-bild img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ueber-text > p{margin-top:1.2rem;color:var(--gedaempft)}
.team{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.4rem}
.team li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);align-items:baseline;gap:1rem;padding-bottom:1.4rem;border-bottom:1px solid var(--linie)}
.team li:last-child{border-bottom:0;padding-bottom:0}
.team strong{font:500 var(--gr-h3)/1 var(--display)}
.team span{color:var(--gedaempft)}
.ueber-hinweis{margin-top:2rem}

/* Lounge: Schachbrett 3x2 */
.lounge{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--raster-spalt)}
.lounge > *{aspect-ratio:1/1;margin:0}
.lounge img{width:100%;height:100%;object-fit:cover}
.kachel{position:relative;background:var(--flaeche);display:flex;flex-direction:column;justify-content:center;padding:clamp(1.75rem,3.5vw,3.5rem)}
.kachel::after{content:"";position:absolute;inset:var(--rahmen-einzug);border:1px solid var(--kupfer-linie);pointer-events:none}
.kachel h3{font-size:var(--gr-h3)}
.kachel p{margin-top:.9rem;color:var(--gedaempft)}

/* Bewertungen */
.bewertungen{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.note{font:500 var(--gr-note)/.9 var(--display);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.note-text{margin-top:1rem;color:var(--gedaempft)}
.note-link{display:inline-block;margin-top:1.4rem}
.zitate{list-style:none;margin:0;padding:0}
.zitate li{padding:1.8rem 0;border-top:1px solid var(--linie)}
.zitate li:first-child{border-top:0;padding-top:0}
.zitate figure,.zitate blockquote{margin:0}
.zitate blockquote p{font:400 var(--gr-zitat)/1.35 var(--display);max-width:none}
.zitate figcaption,.zitate .von{margin-top:.8rem;color:var(--gedaempft);font-size:var(--gr-klein)}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spalt)}
.kontakt > div{display:flex;flex-direction:column}
.kontakt h3{font-size:var(--gr-h3);margin-bottom:1.2rem}
.zeiten{margin:0}
.zeiten > div{display:flex;justify-content:space-between;gap:1.5rem;padding:.55rem 0;color:var(--gedaempft)}
.zeiten dt,.zeiten dd{margin:0}
.zeiten dd{font-variant-numeric:lining-nums tabular-nums}
.zeiten .heute{color:var(--text);font-weight:500;box-shadow:inset 0 -1px 0 var(--kupfer)}
.kontakt address{font-style:normal}
.kontakt .hinweis{margin-top:.8rem;color:var(--gedaempft);font-size:var(--gr-klein)}
.kontakt-liste{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.kontakt-knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:auto;padding-top:1.6rem}

/* ---------------------------------------------------------------- Rechtsseiten */
.recht{padding-block:clamp(3.5rem,7vw,6rem)}
.recht .wrap{max-width:52rem}
.recht h1{font-size:var(--gr-h2);margin-bottom:.8rem}
.recht h2{font-size:var(--gr-recht-h2);margin:2.6rem 0 .8rem}
.recht p,.recht dd,.recht dt{color:var(--gedaempft)}
.recht p + p{margin-top:.8rem}
.recht dl{margin:0;display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:.4rem 1.5rem}
.recht dt{color:var(--text)}
.recht dd{margin:0}
.recht .stand{font-size:var(--gr-klein)}
.recht .block{padding:1.2rem 1.4rem;background:var(--flaeche);border:1px solid var(--linie);margin-top:.8rem}
.recht .block p{margin:0;color:var(--text)}

/* ---------------------------------------------------------------- Fuß */
.fuss{border-top:1px solid var(--linie);padding-block:3rem;color:var(--gedaempft);font-size:var(--gr-klein)}
.fuss .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2rem}
.fuss img{width:78px;height:96px}
.fuss ul{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;list-style:none;margin:0;padding:0}
.fuss a{color:var(--gedaempft)}
.fuss a:hover{color:var(--text)}

/* ---------------------------------------------------------------- Mobile Leiste */
.mobil-leiste{display:none}

/* ---------------------------------------------------------------- Einblenden
   Nur aktiv, wenn das Skript läuft und keine reduzierte Bewegung gewünscht ist. */
@media (prefers-reduced-motion:no-preference){
  .bewegt [data-einblenden]{opacity:0;transform:translateY(14px);transition:opacity var(--dauer-einblenden) var(--kurve),transform var(--dauer-einblenden) var(--kurve);transition-delay:calc(var(--i,0) * var(--versatz))}
  .bewegt [data-einblenden].sichtbar{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;animation:none!important}
}

/* ---------------------------------------------------------------- Breiten */
@media (max-width:1100px){
  .nav{display:none}
  .menue{display:block}
  .preise{grid-template-columns:1fr}
  .buchen-box{position:static}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-bild{order:-1;width:100%;height:min(52dvh,125vw)}
  .hero-logo{display:none}
  .hero-text{padding:2.25rem var(--rand) 2.75rem}
  .hero h1{max-width:14ch}
  .ueber,.bewertungen,.kontakt{grid-template-columns:1fr}
  .ueber-bild{max-width:34rem}
  .lounge{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Text steht beim passenden Foto: PS5-Foto, PS5-Text, Sitzecke, Getränke, Maschinen, Kinder */
  .lounge > :nth-child(2){order:4}
  .lounge > :nth-child(3){order:3}
  .lounge > :nth-child(4){order:2}
  .lounge > :nth-child(5){order:5}
  .lounge > :nth-child(6){order:6}
}
@media (min-width:769px) and (max-width:900px){
  /* Zwei Spalten: mittlere Reihe getauscht, damit Foto und Text sich abwechseln */
  .lounge > :nth-child(2){order:3}
  .lounge > :nth-child(3){order:4}
}
@media (max-width:768px){
  :root{--kopf-hoehe:64px;--gr-zitat:1.1875rem}
  .kopf-knopf{display:none}
  /* Die feste Leiste unten übernimmt Anrufen und Termin buchen */
  .hero-knoepfe{display:none}
  .arbeiten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arbeiten li:first-child{grid-column:span 2;grid-row:span 1;aspect-ratio:3/4}
  .preis-gruppen{grid-template-columns:1fr}
  .lounge{grid-template-columns:1fr}
  .lounge > *{aspect-ratio:auto}
  .lounge figure{aspect-ratio:4/3}
  .kachel{padding:2.5rem 2rem}
  .mobil-leiste{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:20;padding:.7rem var(--rand) calc(.7rem + env(safe-area-inset-bottom));background:var(--grund);border-top:1px solid var(--linie)}
  .mobil-leiste .knopf{width:100%;padding:0 .75rem}
  body.hat-leiste{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .team li{grid-template-columns:1fr;gap:.3rem}
  .recht dl{grid-template-columns:1fr;gap:.1rem}
  .recht dd{margin-bottom:.8rem}
}
@media (max-width:374px){
  /* Platz für „Schließen“ neben dem Namen */
  :root{--gr-marke:1.125rem}
}
@media (max-width:340px){
  .marke span{display:none}
}