/* La Perla Coiffeur, Fassung 4.
   Aufbau nach Naderehs eigenem Entwurf, Farben aus ihrem Laden:
   Blau vom Ladenschild (#0A86E6 gemessen), Tuerkis von den Wänden
   (#54C4C4 gemessen), Champagner von den Spiegelrahmen. */

@font-face{font-family:'Cormorant';src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant';src:url(../fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant';src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cormorant';src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Jost';src:url(../fonts/jost-latin-300-normal.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Jost';src:url(../fonts/jost-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url(../fonts/jost-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Pinyon';src:url(../fonts/pinyon-script-latin.woff2) format('woff2');font-weight:400;font-display:swap}

:root{
  --grund:#FAF7F2; --sand:#F1E9DE; --weiss:#fff;
  --tinte:#0D0D0D; --tinte-weich:#2A241E;
  --grau:#6A5F55;
  --gold-tief:#6B4E24;   /* Verweise und Hover auf hell */
    --gold:#7D5C2C;        /* Spiegelrahmen, für Schrift abgedunkelt */
  --gold-hell:#C9B36A;   /* aus dem Logo gemessen, für dunklen Grund */
  --kante:#E4DACB;
  --rund:14px;
  --breit:min(1180px,calc(100% - 2.5rem));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--tinte-weich);
  font-family:'Jost',system-ui,sans-serif;font-weight:300;font-size:1.02rem;line-height:1.75;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold-tief)}
h1,h2,h3{font-family:'Cormorant',Georgia,serif;font-weight:500;color:var(--tinte);
  line-height:1.14;margin:0;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,6.4vw,4.4rem)}
h2{font-size:clamp(2rem,4.4vw,3.1rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem)}
p{margin:0 0 1.05em}
.bahn{width:var(--breit);margin-inline:auto}
.eng{max-width:64ch;margin-inline:auto}
section{padding-block:clamp(3.6rem,7.5vw,6.4rem)}

/* Vorzeile über der Überschrift, wie im Entwurf */
.vorzeile{font-family:'Jost';font-weight:500;font-size:.74rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .7rem}
.mitte{text-align:center}
.strich{width:76px;height:2px;background:var(--gold-hell);border:0;margin:1.4rem auto 0}
.lead{font-size:1.12rem;color:var(--grau);max-width:60ch}
/* Auch wenn .mitte AUF dem Absatz sitzt und nicht auf dem Elternknoten.
   Vorher hiess die Regel nur .mitte .lead und traf diesen Fall nicht,
   der Block klebte deshalb links statt mittig zu stehen. */
.mitte .lead,.lead.mitte{margin-inline:auto}

/* ── Statusleiste ──────────────────────────────────────── */
.status{background:var(--gold-hell);color:#1B1408;font-size:.82rem;letter-spacing:.03em}
.status .bahn{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding-block:.62rem}
.status a{color:#1B1408;text-decoration:none;font-weight:400}
.status a:hover{text-decoration:underline}
.punkt{width:8px;height:8px;border-radius:50%;background:#14532D;display:inline-block;margin-right:.5rem}
.punkt.zu{background:#9B3A28}
.sterne{color:var(--gold-hell)}
.status .sterne{color:#1B1408}

/* ── Kopf ──────────────────────────────────────────────── */
.kopf{position:relative;isolation:isolate;text-align:center;color:#E3DCD1;
  background:#000;
  padding-top:clamp(2.2rem,4.5vw,3.6rem);padding-bottom:clamp(3rem,6vw,5rem)}

.kopf .lead{color:#C8C0B4}
.kopf .pille{background:rgba(255,255,255,.07);border-color:rgba(201,179,106,.34);color:#E3DCD1}
.kopf .merkmale{border-top-color:rgba(255,255,255,.15);color:#C8C0B4}
.kopf .merkmale span::before{color:var(--gold-hell)}
.kopf .claim{color:var(--gold-hell)}
.kopf .knopf--rand{background:transparent;color:#FAF7F2;border-color:rgba(201,179,106,.45)}
.kopf .knopf--rand:hover{border-color:var(--gold-hell);color:var(--gold-hell)}
.kopf .knopf--voll{background:var(--gold-hell);color:#1B1408}
.kopf .knopf--voll:hover{background:#DCC688}
/* Das Bild sitzt auf der Kante zwischen dunkel und hell. */
.kopf .buehne{margin-bottom:calc(-1 * clamp(3rem,6vw,5rem) - 3.5rem)}
.logo{display:block;margin:0 auto;width:min(300px,64vw);height:auto}
.pille{display:inline-flex;align-items:center;gap:.6rem;background:var(--weiss);
  border:1px solid var(--kante);border-radius:999px;padding:.5rem 1.1rem;
  font-size:.85rem;color:var(--grau);box-shadow:0 1px 3px rgba(80,60,40,.05)}
.marke-gross{font-family:'Cormorant',serif;font-weight:500;
  font-size:clamp(2.7rem,7vw,4.6rem);line-height:1.06;color:var(--tinte);margin:1.5rem 0 0}
.marke-gross em{display:block;font-family:'Pinyon',cursive;font-style:normal;
  color:var(--gold-hell);font-size:.76em;line-height:1.3;margin-top:.1em}
.claim{font-family:'Cormorant',serif;font-style:italic;font-size:clamp(1.15rem,2.3vw,1.5rem);
  color:var(--gold);letter-spacing:.06em;margin:.9rem 0 1.2rem}
.knopfreihe{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.knopf{display:inline-flex;align-items:center;gap:.55rem;border-radius:999px;
  padding:.92rem 1.7rem;font-family:'Jost';font-weight:500;font-size:.84rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;transition:background .18s,color .18s,border-color .18s}
.knopf--voll{background:var(--tinte);color:#FAF7F2}
.knopf--voll:hover{background:var(--gold-tief)}
.knopf--rand{background:var(--weiss);color:var(--tinte);border-color:var(--kante)}
.knopf--rand:hover{border-color:var(--gold);color:var(--gold-tief)}
.merkmale{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;
  margin-top:2.4rem;padding-top:1.7rem;border-top:1px solid var(--kante);
  font-size:.92rem;color:var(--grau)}
.merkmale span::before{content:"✓";color:var(--gold);font-weight:500;margin-right:.5rem}

/* ── Bild mit Adresskarte ──────────────────────────────── */
.buehne{position:relative;margin-top:clamp(2.2rem,5vw,3.6rem)}
.buehne img{border-radius:var(--rund);aspect-ratio:16/9;object-fit:cover;width:100%;object-position:center 85%}
.karte{position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(1.1rem,3.2vw,2.2rem);
  background:var(--weiss);
  border:1px solid rgba(228,218,203,.9);border-radius:16px;
  padding:.85rem 1.25rem;display:flex;align-items:center;gap:.95rem;
  max-width:calc(100% - 2.4rem);box-shadow:0 10px 30px rgba(42,32,24,.22)}
.karte__zeichen{flex:none;display:grid;place-items:center;width:42px;height:42px;
  border-radius:50%;background:var(--tinte);color:var(--gold-hell);
  font-family:'Cormorant',Georgia,serif;font-size:1.35rem;line-height:1;
  padding-bottom:.1em}
.karte__text{min-width:0}
.karte__text b{display:block;font-family:'Jost';font-weight:500;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.karte__text span{display:block;font-size:.95rem;color:var(--tinte)}
.karte__parken{display:block;font-size:.78rem;line-height:1.35;color:var(--grau);margin-top:.12rem}
.karte__weg{margin-left:auto;padding-left:1rem;white-space:nowrap;text-decoration:none;
  font-size:.88rem;font-weight:400;color:var(--gold-tief)}
.karte__weg:hover{text-decoration:underline}

/* ── Flächen ──────────────────────────────────────────── */
.band-sand{background:var(--sand)}
#ueber{padding-top:calc(clamp(3.6rem,7.5vw,6.4rem) + 3.5rem)}
.band-dunkel{background:var(--tinte);color:#E7E0D6}
.band-dunkel h2,.band-dunkel h3{color:#FAF7F2}
.band-dunkel .vorzeile{color:var(--gold-hell)}
.band-dunkel .lead{color:#C9C0B4}

/* ── Säulen ───────────────────────────────────────────── */
.saeulen{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin-top:2.4rem}
.saeule{background:var(--weiss);border:1px solid var(--kante);border-radius:var(--rund);padding:1.5rem 1.4rem}
.saeule h3{font-size:1.12rem;margin-bottom:.45rem}
.saeule p{margin:0;font-size:.95rem;color:var(--grau)}

/* ── Über uns ─────────────────────────────────────────── */
.zweispalt{display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));margin-top:2.6rem}
.zweispalt img{border-radius:var(--rund);aspect-ratio:4/5;object-fit:cover;width:100%}

/* ── Leistungen ────────────────────────────────────────── */
.leistungen{display:grid;gap:1.1rem;margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.dienst{position:relative;background:var(--weiss);border:1px solid var(--kante);
  border-radius:var(--rund);padding:1.5rem 1.5rem 1.3rem;display:flex;flex-direction:column}
.dienst h3{padding-right:5.5rem}
.dienst .dauer{font-size:.85rem;color:var(--grau);margin:.35rem 0 .8rem}
.dienst .dauer::before{content:"◷";margin-right:.45rem;color:var(--gold)}
.dienst p{font-size:.95rem;color:var(--grau);flex:1}
.dienst .fuss{display:flex;align-items:baseline;gap:.6rem;
  border-top:1px solid var(--kante);padding-top:.95rem;margin-top:.6rem}
.dienst .fuss b{font-family:'Jost';font-weight:500;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold)}
.dienst .preis{font-family:'Cormorant',serif;font-size:1.5rem;color:var(--tinte);margin-left:auto}
.dienst .preis small{font-size:.62em;letter-spacing:.06em;color:var(--gold);margin-left:.25em}
.tipp{position:absolute;top:1.1rem;right:1.1rem;background:var(--gold-hell);
  color:#1B1408;font-family:'Jost';font-weight:500;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.28rem .62rem;border-radius:999px}

/* ── Preisliste ────────────────────────────────────────── */
.liste{background:var(--weiss);border:1px solid var(--kante);border-radius:var(--rund);
  overflow:hidden;margin-top:2.4rem}
.liste__kopf{background:var(--tinte);color:#FAF7F2;padding:1.4rem 1.6rem}
.liste__kopf h3{color:#FAF7F2;font-size:1.5rem}
.liste__kopf p{margin:.2rem 0 0;font-size:.85rem;color:#B9B0A4}
.zeile{display:flex;gap:1.4rem;align-items:flex-start;padding:1.15rem 1.6rem;
  border-top:1px solid var(--kante);flex-wrap:wrap}
.zeile:first-of-type{border-top:0}
.zeile__was{flex:1 1 min(340px,100%);min-width:0}
.zeile__was strong{font-family:'Cormorant',serif;font-weight:500;font-size:1.18rem;color:var(--tinte)}
.zeile__was p{margin:.2rem 0 0;font-size:.9rem;color:var(--grau)}
.zeile__preis{text-align:right;margin-left:auto}
.zeile__preis b{display:block;font-family:'Jost';font-weight:500;font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.zeile__preis span{font-family:'Cormorant',serif;font-size:1.3rem;color:var(--tinte);white-space:nowrap}
.hinweise{list-style:none;padding:0;margin:0}
.hinweise li{position:relative;padding-left:1.7rem;margin-bottom:.6rem;font-size:.95rem;color:var(--grau)}
.hinweise li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:500}

/* ── Galerie ───────────────────────────────────────────── */
.mosaik{display:grid;gap:.5rem;margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.mosaik img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:8px}

/* ── Kontakt ───────────────────────────────────────────── */
.kontakt{display:grid;gap:1.4rem;margin-top:2.6rem;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.tafel{background:var(--tinte);color:#E7E0D6;border-radius:var(--rund);padding:1.8rem}
.tafel h3{color:#FAF7F2;margin-bottom:1rem}
.tafel .feld{background:rgba(255,255,255,.06);border-radius:10px;padding:.95rem 1.1rem;margin-bottom:.8rem}
.tafel .feld b{display:block;font-family:'Jost';font-weight:500;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hell);margin-bottom:.15rem}
.tafel .feld span,.tafel .feld a{font-size:1.06rem;color:#FAF7F2;text-decoration:none}
.tafel .knopf{width:100%;justify-content:center;background:var(--gold-hell);color:#221A0C;margin-top:.4rem}
.tafel .knopf:hover{background:#DCBC80}
.zeiten{background:var(--weiss);border:1px solid var(--kante);border-radius:var(--rund);padding:1.8rem}
.zeiten dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:.1rem .9rem}
.zeiten dt,.zeiten dd{margin:0;padding:.62rem 0;border-top:1px solid var(--kante);font-size:.96rem}
.zeiten dt:first-of-type,.zeiten dl>dd:first-of-type{border-top:0}
.zeiten dd{text-align:right;color:var(--grau)}
.zeiten .zu{color:#B4553F}
.zeiten dt.heute,.zeiten dd.heute{color:var(--gold-tief);font-weight:500}

/* ── Fuss ──────────────────────────────────────────────── */
footer{background:var(--tinte);color:#B9B0A4;padding-block:clamp(2.8rem,5vw,4rem);
  border-top:3px solid var(--gold);}
footer .marke{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
footer .marke img{width:52px;height:auto}
footer .marke img{width:210px;height:auto}
footer h3{color:#FAF7F2;font-size:1.05rem;margin-bottom:.7rem}
footer a{color:#D6CEC2;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.fussgitter{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.fussgitter ul{list-style:none;padding:0;margin:0}
.fussgitter li{margin-bottom:.42rem;font-size:.95rem}
.fussunten{border-top:1px solid rgba(255,255,255,.12);margin-top:2.2rem;padding-top:1.3rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.86rem}

@media (max-width:640px){
  .karte{position:static;transform:none;margin-top:.8rem;max-width:100%}
  .status .bahn{justify-content:center;text-align:center}
}

/* ── Ergänzungen für Naderehs Aufbau ──────────────────── */
.unterzeile{font-size:clamp(1.35rem,2.6vw,1.85rem);margin-bottom:.8rem}

/* Gemessen: Text 371 px, Bild ursprünglich 704 px. Auf Texthöhe (300 px Breite)
   wirkte es gequetscht, deshalb die Mitte: 420 px Breite, rund 525 px hoch. */
.portraet{margin:0;position:relative;width:min(420px,100%);justify-self:center}
.portraet img{border-radius:var(--rund);aspect-ratio:4/5;object-fit:cover;width:100%}
.portraet figcaption{position:absolute;left:.9rem;right:.9rem;bottom:.9rem;
  background:var(--weiss);border:1px solid var(--kante);
  border-radius:10px;padding:.7rem .95rem}
.portraet figcaption strong{display:block;font-family:'Cormorant',serif;font-weight:500;
  font-size:1.15rem;color:var(--tinte)}
.portraet figcaption span{font-family:'Jost';font-weight:500;font-size:.64rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

.empf{display:inline-block;margin-left:.6rem;vertical-align:.12em;background:var(--weiss);
  border:1px solid var(--kante);border-radius:999px;padding:.16rem .6rem;
  font-family:'Jost';font-weight:500;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}

.saeule--dunkel{background:var(--tinte);border-color:var(--tinte)}
.saeule--dunkel h3{color:#FAF7F2}
.saeule--dunkel p{color:#C2BAAE}
.saeule--dunkel a{color:var(--gold-hell)}

/* ── Bewertungen ───────────────────────────────────────── */
.schnittkarte{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;
  background:var(--weiss);border:1px solid var(--kante);border-radius:var(--rund);
  padding:1.5rem 1.7rem;margin-top:2.4rem}
.schnittkarte .note{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--tinte);color:#FAF7F2;border-radius:10px;width:86px;height:86px;
  font-family:'Cormorant',serif;font-size:2rem;line-height:1}
.schnittkarte .note small{font-family:'Jost';font-weight:500;font-size:.56rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hell);margin-top:.3rem}
.schnittkarte strong{display:block;font-family:'Cormorant',serif;font-weight:500;
  font-size:1.3rem;color:var(--tinte);margin-top:.2rem}
.sterne.gross{font-size:1.15rem;letter-spacing:.14em}
.sterne .leer{color:var(--kante)}
.wann{display:block;font-size:.85rem;color:var(--grau)}

.rezensionen{display:grid;gap:1.1rem;margin-top:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}
.rezension{background:var(--weiss);border:1px solid var(--kante);border-radius:var(--rund);
  padding:1.4rem 1.5rem}
.rezension__kopf{display:flex;align-items:center;gap:.85rem;margin-bottom:.9rem}
.rezension__kopf > div{flex:1;min-width:0}
.rezension__kopf strong{font-family:'Cormorant',serif;font-weight:500;font-size:1.15rem;color:var(--tinte)}
.initial{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--weiss);border:1px solid var(--kante);color:var(--gold);font-family:'Cormorant',serif;font-size:1.2rem;flex:none}
.zitat{font-style:italic;color:var(--grau);font-size:.96rem;margin-bottom:0}
.antwort{margin-top:1rem;background:var(--weiss);border:1px solid var(--kante);
  border-left:3px solid var(--gold-hell);border-radius:0 10px 10px 0;
  padding:.85rem 1.05rem}
.antwort b{display:block;font-family:'Jost';font-weight:500;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.antwort p{margin:0;font-size:.92rem;color:var(--grau)}

.knopf--gold{background:var(--gold-hell);color:#1B1408;margin-top:1rem;
  width:100%;justify-content:center}
.knopf--gold:hover{background:#DCC688}
.fussnote{font-size:.9rem;margin-top:.8rem}
.fussnote .sterne{color:var(--gold-hell)}
.status .sterne{color:#1B1408}

/* Gruppentitel in der Preisliste (Damen, Herren, Kinder …). */
.liste .gruppe{
  background:var(--sand);border-top:1px solid var(--kante);
  padding:.85rem 1.6rem .8rem;
}
.liste .gruppe:first-of-type{border-top:0}
.liste .gruppe h4{
  margin:0;font-family:'Jost';font-weight:500;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.liste .gruppe + .zeile{border-top:0}
/* Ohne Beschreibung sitzt der Name allein, die Zeilen dürfen enger stehen. */
.liste .zeile{padding-block:.85rem}
.dienst .fuss b{white-space:nowrap}
.dienst .preis{font-size:1.25rem}

/* ── Schiene für die Arbeiten ──────────────────────────────
   Eigener Bildlauf mit Einrastpunkten, ohne Fremdbibliothek.
   Ohne JavaScript bleibt sie bedienbar, dann eben durch Wischen. */
.schiene{position:relative;margin-top:2.6rem}
.schiene__bahn{
  display:flex;gap:1rem;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;padding-bottom:.6rem;
  scrollbar-width:thin;scrollbar-color:var(--kante) transparent;
}
.schiene__bahn::-webkit-scrollbar{height:6px}
.schiene__bahn::-webkit-scrollbar-thumb{background:var(--kante);border-radius:3px}
.arbeit{
  flex:0 0 clamp(230px,26vw,300px);margin:0;scroll-snap-align:start;
  background:var(--weiss);border:1px solid var(--kante);border-radius:var(--rund);
  overflow:hidden;
}
.arbeit img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.arbeit figcaption{
  padding:.8rem 1rem;font-size:.88rem;line-height:1.5;color:var(--grau);
}
.schiene__knopf{
  position:absolute;top:calc(50% - 2rem);transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--kante);
  background:var(--weiss);color:var(--tinte);font-size:1.5rem;line-height:1;
  cursor:pointer;box-shadow:0 4px 14px rgba(42,32,24,.14);
  display:grid;place-items:center;padding-bottom:.15em;
}
.schiene__knopf:hover{border-color:var(--gold);color:var(--gold-tief)}
.schiene__knopf--zurueck{left:-14px}
.schiene__knopf--vor{right:-14px}
@media (max-width:820px){
  .schiene__knopf{display:none}   /* dort wird gewischt */
  .arbeit{flex-basis:78vw}
}

/* Instagram-Zeichen vor dem Namen. Es erbt die Schriftfarbe, damit es in der
   goldenen Statusleiste dunkel und im schwarzen Fuss hell erscheint. */
.mit-ig{display:inline-flex;align-items:center;gap:.4em}
.mit-ig .ig{flex:none;display:block}