/* ==========================================================================
   Barbershop Schicko Bello – Stylesheet (Baukasten „Kante“, erste Fassung)
   Schwarz-Weiß wie Laden und Schild, Barber-Rot als kleiner Akzent.
   Kontraste auf #121212: Text 17:1, leise 7,6:1, Rot 5:1.
   ========================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License) ---------- */
@font-face { font-family: "Anton"; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("../fonts/pinyon-script-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

/* ---------- Marke ---------- */
:root {
  --grund: #121212;
  --grund-2: #1A1A1A;
  --grund-3: #222;
  --text: #F2F2F0;
  --text-leise: #A3A3A0;
  --linie: #2E2E2E;
  --rot: #E05A52;
  --blau: #4F86D6;
  --logo-sonne: #E07A3A;
  --logo-grund: var(--grund);

  --anzeige: "Anton", Impact, "Arial Narrow", sans-serif;
  --schrift: "Pinyon Script", "Snell Roundhand", cursive;
  --text-font: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rahmen: 72rem;
  --rand: 1rem;
  --ziel: 2.75rem;
  --radius: 4px;
  --kurve: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
@media (min-width: 48em) { :root { --rand: 2rem; } }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 1.0625rem/1.6 var(--text-font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.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; }
.rahmen { width: 100%; max-width: var(--rahmen); margin-inline: auto; padding-inline: var(--rand); }

.sprung { position: absolute; left: var(--rand); top: -4rem; z-index: 100; background: var(--text); color: var(--grund); padding: .75rem 1rem; text-decoration: none; }
.sprung:focus { top: .5rem; }

.logo-schrift { font-family: var(--schrift); fill: currentColor; }

/* ---------- Intro: Kopf erscheint, verblasst ---------- */
.intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--grund); color: var(--text); pointer-events: none;
  animation: intro-weg .7s var(--kurve) 1.1s forwards;
}
.intro__kopf { width: min(46vw, 13rem); height: min(46vw, 13rem); animation: intro-kopf 1.8s var(--kurve) both; }
@keyframes intro-kopf {
  0%   { opacity: 0; transform: scale(.86); }
  30%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.08); }
}
@keyframes intro-weg { to { opacity: 0; visibility: hidden; } }
.intro-gesehen .intro { display: none; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---------- Barber-Streifen (läuft wie eine Barber-Säule) ---------- */
.barberstreifen {
  position: relative; overflow: hidden;
  width: 7.5rem; height: .5rem; border-radius: 999px; margin: 1.25rem 0;
  background: var(--text);
}
.barberstreifen span {
  position: absolute; inset: 0 auto 0 0; width: calc(100% + 4.5rem);
  background: repeating-linear-gradient(-45deg,
    var(--rot) 0 .75rem, var(--text) .75rem 1.5rem, var(--blau) 1.5rem 2.25rem, var(--text) 2.25rem 3rem);
  animation: barber 1.6s linear infinite;
}
@keyframes barber { to { transform: translateX(-4.2426rem); } }
.barberstreifen--breit { width: 100%; height: .375rem; border-radius: 0; margin: 0; }
@media (prefers-reduced-motion: reduce) { .barberstreifen span { animation: none; } }

/* ---------- Bausteine ---------- */
.etikett {
  display: block; font: 500 .75rem/1.4 var(--text-font);
  letter-spacing: .16em; text-transform: uppercase; color: var(--rot);
}
h2 { font: 400 clamp(2.25rem, 7vw, 3.5rem)/1 var(--anzeige); letter-spacing: .01em; text-transform: uppercase; margin-top: .4rem; }
h3 { font: 500 .8125rem/1.4 var(--text-font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); margin: 1.5rem 0 .25rem; }

.btn-gruppe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .75rem 1.4rem; border-radius: var(--radius);
  font: 500 1rem/1.2 var(--text-font); text-decoration: none; cursor: pointer;
  border: 1px solid var(--text); transition: background .2s, color .2s;
}
.btn svg { width: 1.15rem; height: 1.15rem; flex: none; }
.btn--hell { background: var(--text); color: var(--grund); }
.btn--hell:hover { background: #fff; }
.btn--linie { background: transparent; color: var(--text); }
.btn--linie:hover { background: var(--text); color: var(--grund); }

.textlink {
  display: inline-flex; align-items: center; gap: .5rem; min-height: var(--ziel);
  color: var(--text); text-decoration: underline; text-decoration-color: var(--rot);
  text-decoration-thickness: 2px; text-underline-offset: .35em;
}
.textlink svg { width: 1.2rem; height: 1.2rem; }

/* Foto-Platzhalter */
.foto {
  position: relative; display: grid; place-items: center; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.025) 14px 15px),
    var(--grund-2);
  border: 1px solid var(--linie); border-radius: var(--radius);
}
.foto--hoch { aspect-ratio: 4 / 5; }
.foto--quadrat { aspect-ratio: 1; }
.foto figcaption {
  position: absolute; left: .75rem; right: .75rem; bottom: .75rem;
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .8125rem; line-height: 1.4; color: var(--text-leise);
}
.foto figcaption svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .05rem; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18, 18, 18, .92); border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
@supports (backdrop-filter: blur(8px)) { .kopf { backdrop-filter: blur(8px); } }
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; min-height: 4.25rem; gap: 1rem; }
.kopf__logo { display: block; color: var(--text); }
.kopf .logo { width: 8.5rem; height: 4.5rem; }

.nav-schalter {
  display: grid; place-content: center; gap: 5px; width: var(--ziel); height: var(--ziel);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.nav-schalter span { display: block; width: 1.5rem; height: 2px; background: var(--text); transition: transform .25s, opacity .25s; }
.nav-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav { display: none; }
.nav a:not(.btn) { display: flex; align-items: center; min-height: var(--ziel); text-decoration: none; font-weight: 500; }
.nav a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--rot); text-underline-offset: .4em; }
.nav.ist-offen {
  display: block; position: absolute; top: 100%; left: 0; right: 0; overflow-y: auto;
  background: var(--grund); border-bottom: 1px solid var(--linie); padding: .5rem var(--rand) 1.5rem;
}
.nav.ist-offen li { border-bottom: 1px solid var(--linie); }
.nav.ist-offen a:not(.btn) { min-height: 3.25rem; font: 400 1.5rem/1 var(--anzeige); text-transform: uppercase; letter-spacing: .02em; }
.nav.ist-offen .nav__buchen { width: 100%; margin-top: 1.25rem; }
html:not(.js) .nav { display: block; }
html:not(.js) .nav-schalter { display: none; }

@media (min-width: 64em) {
  .nav-schalter { display: none; }
  .nav, .nav.ist-offen { display: flex; position: static; align-items: center; gap: 2rem; padding: 0; border: 0; background: none; }
  .nav ul { display: flex; gap: 1.75rem; }
  .nav.ist-offen li { border: 0; }
  .nav.ist-offen a:not(.btn) { min-height: var(--ziel); font: 500 1rem/1.6 var(--text-font); text-transform: none; letter-spacing: 0; }
  .nav.ist-offen .nav__buchen { width: auto; margin: 0; }
  .nav__buchen { min-height: 2.75rem; padding-block: .5rem; }
}

/* ---------- Hero ---------- */
.hero { display: grid; gap: 2rem; padding-top: 1.5rem; padding-bottom: 3.5rem; }
.hero h1 { font-weight: 400; }
.hero__claim {
  display: block; margin-top: .75rem;
  font: 400 clamp(3rem, 14vw, 6.25rem)/.95 var(--anzeige); letter-spacing: .005em; text-transform: uppercase;
}
.bewertung { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; color: var(--text-leise); }
.bewertung__note { color: var(--text); font-weight: 600; font-size: 1.125rem; }
.bewertung__sterne { color: var(--text); letter-spacing: .1em; }
.bewertung__quelle { flex-basis: 100%; font-size: .75rem; }
.hero__hinweis { margin-top: 1rem; color: var(--text-leise); font-size: .9375rem; }
.hero__foto { width: 100%; }
.foto__logo { width: 82%; height: auto; aspect-ratio: 320 / 170; color: var(--text); opacity: .9; }
.js .hero__text > * { animation: hoch .7s var(--kurve) both; animation-delay: 1.2s; }
.js.intro-gesehen .hero__text > * { animation-delay: 0s; }
@keyframes hoch { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .js .hero__text > * { animation: none; } }

@media (min-width: 64em) {
  .hero { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 4rem; padding-top: 3rem; padding-bottom: 5rem; min-height: min(calc(100svh - 4.25rem), 52rem); }
  .kopf .logo { width: 10.5rem; height: 5.5rem; }
  .hero__foto { max-height: 78vh; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: 3.5rem; border-top: 1px solid var(--linie); }
.abschnitt__intro { margin-top: 1rem; color: var(--text-leise); max-width: 32rem; }
.abschnitt__mehr { margin-top: 1.5rem; }
@media (min-width: 64em) { .abschnitt { padding-block: 6rem; } }
.zweispalter { display: grid; gap: 2rem; }
@media (min-width: 48em) { .zweispalter { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } }

/* Leistungen */
.leistungen { display: grid; gap: 1rem 4rem; margin-top: 1rem; }
@media (min-width: 48em) { .leistungen { grid-template-columns: 1fr 1fr; } .paket { grid-column: 1 / -1; } }
.liste li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--linie); }
.preis { color: var(--text-leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.preis.ist-gesetzt { color: var(--text); font-weight: 500; }
.paket {
  margin-top: 1.5rem; padding: 1.25rem 1.25rem 1.4rem; border: 1px solid var(--text); border-radius: var(--radius);
  display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; align-items: baseline;
}
.paket__name { font: 400 2.25rem/1.1 var(--schrift); }
.paket__inhalt { grid-column: 1 / -1; grid-row: 2; color: var(--text-leise); font-size: .9375rem; }
.paket .preis { grid-column: 2; grid-row: 1; }
.paket .konzept-marker { grid-column: 1 / -1; }

/* Galerie */
.galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1.75rem; }
@media (min-width: 48em) { .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }

/* Öffnungszeiten */
.zeiten > div { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem .75rem; border-bottom: 1px solid var(--linie); }
.zeiten dd { font-variant-numeric: tabular-nums; }
.zeiten > div[data-tag="7"] dd { color: var(--text-leise); }
.zeiten > div.ist-heute { background: var(--grund-2); box-shadow: inset 3px 0 0 var(--rot); }
.zeiten > div.ist-heute dt::after { content: " · heute"; color: var(--rot); font-size: .875rem; }

/* Anfahrt */
.adresse { font-style: normal; font-size: 1.25rem; line-height: 1.5; margin-top: 1.25rem; }
.kartenbox {
  position: relative; display: grid; place-items: center; text-align: center;
  min-height: 15rem; padding: 2rem 1.25rem; background: var(--grund-2);
  border: 1px solid var(--linie); border-radius: var(--radius);
}
.kartenbox p { color: var(--text-leise); font-size: .9375rem; max-width: 24rem; margin: 0 auto 1.25rem; }
.kartenbox.hat-karte { aspect-ratio: 4 / 3; padding: 0; }
.kartenbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .3s; }
.kartenbox.ist-geladen iframe { opacity: 1; }
.kartenbox__status { margin: 0; color: var(--text-leise); }
.kartenbox__schliessen {
  position: absolute; top: .5rem; right: .5rem; z-index: 2; min-height: var(--ziel); padding: 0 1rem;
  background: var(--grund); color: var(--text); border: 1px solid var(--text); border-radius: var(--radius); cursor: pointer; font: 500 .875rem var(--text-font);
}

/* Kontakt */
.kontakt { display: grid; gap: .75rem; margin-top: 1.5rem; }
@media (min-width: 48em) { .kontakt { grid-template-columns: repeat(2, minmax(0, 22rem)); } }
.kontakt__eintrag {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; min-height: 4.5rem;
  border: 1px solid var(--linie); border-radius: var(--radius); text-decoration: none; transition: border-color .2s;
}
.kontakt__eintrag:hover { border-color: var(--text); }
.kontakt__eintrag svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--rot); }
.kontakt__art { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); }

/* ---------- Fußzeile ---------- */
.fuss { border-top: 1px solid var(--linie); padding-bottom: 5rem; color: var(--text-leise); font-size: .9375rem; }
.fuss__innen { display: grid; justify-items: center; text-align: center; gap: .75rem; padding-block: 2.5rem; }
.fuss__logo { width: 11rem; height: auto; aspect-ratio: 320 / 170; color: var(--text); }
.fuss a { color: var(--text); }
.fuss__links { display: flex; gap: 1.5rem; }
.fuss__links a { display: inline-flex; align-items: center; min-height: var(--ziel); }
@media (min-width: 64em) { .fuss { padding-bottom: 0; } }

/* ---------- Aktionsleiste Handy ---------- */
.aktionsleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr 1.2fr;
  background: var(--grund-2); border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.aktionsleiste a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  min-height: 3.75rem; font-size: .8125rem; font-weight: 500; text-decoration: none;
}
.aktionsleiste a:last-child { background: var(--text); color: var(--grund); }
.aktionsleiste svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 64em) { .aktionsleiste { display: none; } }

/* ---------- Konzept-Marker (nur für uns: ?konzept=1 oder Schalter) ---------- */
.konzept-marker { display: none; }
.konzept .konzept-marker {
  display: inline-flex; align-items: center; gap: .35em; margin: .5rem 0; padding: .2em .6em;
  font: 600 .75rem/1.4 system-ui, sans-serif; letter-spacing: 0; text-transform: none;
  border: 1.5px solid; border-radius: 4px;
}
.konzept .konzept-marker::before { font-weight: 800; }
.konzept .konzept-marker--neu { background: #EEF3FF; color: #1D4ED8; border-color: #2563EB; }
.konzept .konzept-marker--neu::before { content: "NEU"; }
.konzept .konzept-marker--klaeren { background: #FFF4E6; color: #9A3412; border-color: #EA580C; }
.konzept .konzept-marker--klaeren::before { content: "KLÄREN"; }
.konzept-schalter {
  position: fixed; left: .75rem; bottom: calc(3.75rem + .75rem + env(safe-area-inset-bottom)); z-index: 70;
  min-height: var(--ziel); padding: 0 1rem; font: 600 .75rem/1 system-ui, sans-serif;
  background: #fff; color: #1D4ED8; border: 1.5px solid #2563EB; border-radius: 999px; cursor: pointer;
}
@media (min-width: 64em) { .konzept-schalter { bottom: .75rem; } }

@media print {
  .intro, .kopf, .aktionsleiste, .konzept-schalter, .kartenbox { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.kopf--recht { position: static; }
.recht-name { font: 400 1.75rem/1.2 var(--schrift); color: var(--text); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--ziel); }
.recht { max-width: 46rem; border-top: 0; }
.recht__titel { font: 400 clamp(2.5rem, 9vw, 4rem)/1 var(--anzeige); letter-spacing: .01em; text-transform: uppercase; margin-top: .4rem; }
.recht h2 { font-size: clamp(1.5rem, 4.5vw, 2rem); margin-top: 2.5rem; }
.recht p, .recht address, .recht dl { margin-top: .75rem; font-style: normal; max-width: 40rem; }
.recht a { text-underline-offset: .25em; }
.recht__hinweis { padding: 1rem 1.1rem; border: 1px solid var(--rot); border-left-width: 4px; border-radius: var(--radius); background: var(--grund-2); margin-top: 1.5rem; }
.recht__liste { display: grid; grid-template-columns: 1fr; gap: .15rem; }
.recht__liste dt { font: 500 .8125rem/1.4 var(--text-font); letter-spacing: .14em; text-transform: uppercase; color: var(--text-leise); margin-top: .6rem; }
.recht__liste dd { margin: 0; }
@media (min-width: 40em) {
  .recht__liste { grid-template-columns: 9rem 1fr; gap: .5rem 1.5rem; }
  .recht__liste dt { margin-top: 0; padding-top: .2em; }
}
.platzhalter { color: var(--text); background: var(--grund-3); padding: .05em .4em; border-radius: 3px; }
.fuss--recht { padding-bottom: 0; }
.recht-adresse { font-style: normal; }

/* Rechtsseiten: Aufzählungen und Stand (Datenschutz-Entwurf) */
.recht__aufzaehlung { margin-top: .75rem; padding-left: 1.25rem; list-style: disc; max-width: 40rem; }
.recht__aufzaehlung li { margin-top: .35rem; }
.recht__aufzaehlung li::marker { color: var(--rot); }
.recht__stand { margin-top: 3rem; color: var(--text-leise); }

/* ---------- Pflege-Seite (/pflege) ---------- */
.pflege fieldset { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem 1.25rem; margin: 1.5rem 0 0; }
.pflege legend { font: 400 1.5rem/1 var(--anzeige); text-transform: uppercase; letter-spacing: .02em; padding: 0 .4rem; }
.pflege__tipp { color: var(--text-leise); font-size: .9375rem; }
.pflege__zeile { display: grid; gap: .35rem; margin-top: .9rem; }
@media (min-width: 40em) { .pflege__zeile { grid-template-columns: 14rem minmax(0, 12rem); align-items: center; gap: 1rem; } .pflege__zeile--breit { grid-template-columns: 14rem minmax(0, 1fr); } }
.pflege label { font-weight: 500; }
.pflege input {
  width: 100%; min-height: var(--ziel); padding: .55rem .75rem; border-radius: var(--radius);
  border: 1px solid #5F5E5A; background: var(--grund-2); color: var(--text); font: 400 1rem var(--text-font);
}
.pflege input::placeholder { color: #8A8A87; }
.pflege input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-color: var(--text); }
.pflege .btn { margin-top: 1.25rem; }
.pflege .btn:disabled { opacity: .6; cursor: progress; }
.pflege__meldung { margin-top: 1.25rem; }
.pflege__meldung:empty { display: none; }
.pflege__meldung p { margin: 0; }
.pflege__meldung--ok { padding: .85rem 1rem; border-left: 4px solid #5FBF77; background: var(--grund-2); }
.pflege__meldung--fehler { padding: .85rem 1rem; border-left: 4px solid var(--rot); background: var(--grund-2); }
.pflege__stand { color: var(--text-leise); font-size: .875rem; }