/* Mr. Barber – Webseite. Schriften lokal (SIL Open Font License), keine Verbindung zu Google beim Laden. */
@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/bebas-neue-latin-400-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:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/bebas-neue-latin-ext-400-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:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/barlow-latin-400-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:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/barlow-latin-ext-400-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:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(schriften/barlow-latin-500-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:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(schriften/barlow-latin-ext-500-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:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(schriften/barlow-latin-600-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:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(schriften/barlow-latin-ext-600-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:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(schriften/barlow-latin-700-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:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(schriften/barlow-latin-ext-700-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:"Oswald";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/oswald-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Oswald";font-style:normal;font-weight:400;font-display:swap;src:url(schriften/oswald-cyrillic-ext-500-normal.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:400 600;font-display:swap;src:url(schriften/vazirmatn-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Vazirmatn";font-style:normal;font-weight:700 900;font-display:swap;src:url(schriften/vazirmatn-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* ===== Grundlage: Muster-Design 3 Barbershop (basis.css) ===== */
/* ---------- Grundlagen (für alle Muster gleich) ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.breite{width:100%;max-width:var(--max,1200px);margin:0 auto;padding:0 clamp(16px,4vw,32px)}
section[id],[id="start"]{scroll-margin-top:var(--kopf-h,72px)}
.icon{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}
.leer{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.8em 1.6em;text-decoration:none;cursor:pointer;border:1.5px solid var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:600;line-height:1.1;text-align:center;transition:background .2s,color .2s,border-color .2s,transform .2s}
.knopf:hover{transform:translateY(-1px)}
.knopf.zweit{background:transparent;color:var(--accent)}
.knopf.klein{min-height:40px;padding:.55em 1.1em;font-size:.92em}

/* Kopfzeile & Menü */
.kopf{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,box-shadow .3s,color .3s}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--kopf-h,72px)}
.logo{display:flex;flex-direction:column;justify-content:center;text-decoration:none;min-width:0;line-height:1.05}
.logo img{max-height:calc(var(--kopf-h,72px) - 22px);width:auto}
.logo-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navigation{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.navigation a:not(.knopf){text-decoration:none}
.menue-knopf{display:none;width:46px;height:46px;border:0;background:transparent;cursor:pointer;padding:11px;flex:none}
.menue-knopf span{display:block;height:2px;background:currentColor;margin:5px 0;transition:transform .25s,opacity .25s}
body.menue-offen .menue-knopf span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menue-offen .menue-knopf span:nth-child(2){opacity:0}
body.menue-offen .menue-knopf span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:960px){
  .menue-knopf{display:block}
  .navigation{display:none;position:fixed;top:var(--kopf-h,72px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px clamp(16px,4vw,32px) 22px;background:var(--bg);color:var(--text);box-shadow:0 18px 30px rgba(0,0,0,.18);max-height:calc(100dvh - var(--kopf-h,72px));overflow:auto}
  body.menue-offen .navigation{display:flex}
  .navigation a:not(.knopf){padding:14px 4px;border-bottom:1px solid var(--line);font-size:1.08rem}
  .navigation .knopf{margin-top:16px}
}

/* Status „Jetzt geöffnet“ */
[data-status]{display:inline-flex;align-items:center;gap:.55em;font-size:.9rem}
[data-status] .punkt{width:9px;height:9px;border-radius:50%;background:#9a9a9a;flex:none}
[data-status].ist-offen .punkt{background:#2fb36d;box-shadow:0 0 0 4px rgba(47,179,109,.22)}
[data-status].ist-zu .punkt{background:#d9534f}

/* Preisliste */
.preisliste{list-style:none;margin:0;padding:0}
.leistung{display:flex;align-items:baseline;gap:12px;text-decoration:none;padding:12px 0}
.l-name{min-width:0;flex:0 1 auto}
.l-name small{display:block;color:var(--muted);font-size:.84em;margin-top:2px;font-weight:400}
.l-linie{flex:1 1 20px;min-width:16px}
.l-preis{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.preis-hinweis{color:var(--muted);font-size:.88rem;margin-top:22px}
.reiter{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;margin-bottom:18px;-webkit-overflow-scrolling:touch}
.reiter::-webkit-scrollbar{display:none}
.reiter button{flex:none;cursor:pointer;white-space:nowrap}

/* Team */
.person .p-bild{overflow:hidden;aspect-ratio:4/5;background:var(--line)}
.person .p-bild img{width:100%;height:100%;object-fit:cover}
.p-initial{display:grid;place-items:center}
.p-initial span{font-size:clamp(48px,8vw,84px);line-height:1;color:var(--accent)}
.person h3{margin:0}
.person p{margin:0}

/* Galerie */
.g-bild{display:block;width:100%;padding:0;border:0;background:var(--line);cursor:zoom-in;overflow:hidden;aspect-ratio:1}
.g-bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.g-bild:hover img{transform:scale(1.05)}

/* Großansicht der Fotos */
.grossbild{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;margin:0;padding:0;border:0;background:rgba(8,8,8,.94);color:#fff}
.grossbild::backdrop{background:rgba(0,0,0,.6)}
.grossbild figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 12px 24px}
.grossbild img{max-width:min(1100px,100%);max-height:calc(100% - 40px);object-fit:contain}
.grossbild figcaption{font-size:.9rem;opacity:.85;text-align:center}
.lb-zu,.lb-pfeil{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.lb-zu:hover,.lb-pfeil:hover{background:rgba(255,255,255,.25)}
.lb-zu{top:12px;right:12px}
.lb-pfeil{top:50%;transform:translateY(-50%)}
.lb-zurueck{left:12px}.lb-vor{right:12px}
.lb-zu .icon,.lb-pfeil .icon{width:24px;height:24px}

/* Hinweis-Fenster „Termin buchen“ (Muster) */
.hinweis-dialog{border:0;padding:0;max-width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;width:100%;background:var(--surface);color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.hinweis-dialog::backdrop{background:rgba(0,0,0,.55)}
.hd-innen{padding:30px 26px 24px;display:grid;gap:12px;text-align:center}
.hd-innen h3{margin:0;font-size:1.4rem}
.hd-innen p{margin:0;line-height:1.55}
.hd-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 4px;border-radius:50%;background:var(--accent);color:var(--accent-ink)}
.hd-icon .icon{width:28px;height:28px}
.hd-klein{font-size:.85rem;color:var(--muted)}

/* Öffnungszeiten */
.zeiten{width:100%;border-collapse:collapse}
.zeiten th,.zeiten td{padding:11px 0;text-align:left;font-weight:400;border-bottom:1px solid var(--zeilen-linie,var(--line))}
.zeiten td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.zeiten tr.heute th,.zeiten tr.heute td{font-weight:700}
.zeiten td.zu{opacity:.6}
.heute-mark{display:inline-block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;margin-left:6px;vertical-align:2px;background:var(--accent);color:var(--accent-ink);font-weight:600}

/* Kontakt */
.kontakt-liste{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.kontakt-liste li{display:flex;gap:14px;align-items:flex-start}
.kontakt-liste li>.icon{width:22px;height:22px;margin-top:3px;color:var(--accent)}
.kontakt-liste b{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:2px}
.kontakt-liste a{text-decoration:none;overflow-wrap:anywhere}
.kontakt-liste a:hover{text-decoration:underline}
.sozial{display:flex;gap:10px;flex-wrap:wrap}
.sozial a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;opacity:.85;text-decoration:none}
.sozial a:hover{opacity:1}

/* Karte (wird erst nach Klick geladen – DSGVO) */
#karte{position:relative;overflow:hidden;min-height:300px}
#karte iframe{display:block;width:100%;height:100%;min-height:340px;border:0}
.karte-platz{position:relative;height:100%;min-height:300px;display:grid;place-items:center;padding:24px}
.karte-muster{position:absolute;inset:0;opacity:.5;background:
  linear-gradient(90deg,transparent 47%,var(--karte-strasse,rgba(127,127,127,.35)) 47% 53%,transparent 53%) 0 0/140px 140px,
  linear-gradient(0deg,transparent 47%,var(--karte-strasse,rgba(127,127,127,.35)) 47% 53%,transparent 53%) 0 0/140px 140px,
  linear-gradient(35deg,transparent 49%,var(--karte-strasse,rgba(127,127,127,.25)) 49% 51%,transparent 51%) 0 0/260px 260px}
.karte-info{position:relative;display:grid;justify-items:center;gap:8px;text-align:center;max-width:340px;padding:22px;background:var(--karte-box,var(--surface));color:var(--karte-box-text,var(--text));box-shadow:0 12px 34px rgba(0,0,0,.18)}
.karte-info>.icon{width:30px;height:30px;color:var(--accent)}
.karte-info small{font-size:.76rem;opacity:.75;line-height:1.4}
.karte-extern{font-size:.86rem;display:inline-flex;align-items:center;gap:6px}

/* Untere Leiste am Handy */
.handy-leiste{display:none}
@media (max-width:760px){
  .handy-leiste{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--leiste-bg,var(--bg));box-shadow:0 -6px 24px rgba(0,0,0,.14);transform:translateY(110%);transition:transform .3s}
  body.gescrollt .handy-leiste{transform:none}
  body.menue-offen .handy-leiste{transform:translateY(110%)}
  .handy-leiste .knopf{flex:1;min-height:48px;padding:.7em .8em}
  .handy-leiste .knopf.tel{flex:0 0 auto}
  footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))!important}
}

/* Einblenden beim Scrollen */
.einblenden{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.einblenden.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.einblenden{opacity:1;transform:none;transition:none}}

/* Impressum / Datenschutz */
.recht{padding:calc(var(--kopf-h,72px) + 40px) 0 70px}
#rechtstext{max-width:780px;line-height:1.65;overflow-wrap:anywhere}
#rechtstext h1{margin:0 0 26px;hyphens:auto;-webkit-hyphens:auto}
#rechtstext h2{font-size:1.12rem;margin:30px 0 8px}
#rechtstext p{margin:0 0 12px}
#rechtstext .stand{margin-top:30px;color:var(--muted)}
.zurueck{display:inline-flex;align-items:center;gap:8px;margin-top:34px}
.zurueck .icon{transform:rotate(180deg)}

/* ---------- Ergänzungen für alle 10 Designs ---------- */
:root{--accent-text:var(--accent);--accent-hell:color-mix(in srgb,var(--accent) 55%,#fff)}
html[data-ton="dunkel"]{color-scheme:dark}
html[data-ton="hell"]{color-scheme:light}
#seite{display:contents}
noscript p{padding:40px 20px;text-align:center;font:16px/1.5 system-ui,sans-serif}
/* Preise als Aufklapp-Liste */
details.kategorie>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}
details.kategorie>summary::-webkit-details-marker{display:none}
details.kategorie>summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-3px,-3px);transition:transform .25s}
details.kategorie[open]>summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
details.kategorie>summary span{flex:1}
.kat-anzahl{font-size:.8rem;opacity:.7;font-weight:400;white-space:nowrap}
.kat-bild{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
/* Blättern-Knöpfe (Galerie als Karussell) */
[data-blaettern]{cursor:pointer}
/* Auf dunklen Fußzeilen hellere Akzentfarbe für Schrift */
.fuss{--accent-text:var(--accent-hell)}
/* Original-Akzentschrift merken (für helle Fußzeilen) */
:root{--accent-text-orig:var(--accent-text)}

@media (max-height:700px),(max-width:380px){.hd-innen{padding:22px 18px 18px;gap:10px}.hd-innen h3{font-size:1.2rem}.hd-icon{width:46px;height:46px}.hd-innen p{font-size:.95rem;line-height:1.45}}

/* ===== Muster-Design 3 Barbershop (barbershop.css) ===== */
/* =====================================================================
   MUSTER 3 – BARBERSHOP (dunkel, kräftig)
   Farben werden in salon-einstellungen.js geändert (nicht hier).
   ===================================================================== */

:root{
  --bg:#0e0e0e;--surface:#171717;--text:#f3f1ec;--muted:#a6a29a;--line:#2a2a2a;
  --accent:#f0b429;--accent-ink:#111111;--dark:#000000;--dark-text:#f3f1ec;
  --kopf-h:76px;--max:1240px;
  --display:"Bebas Neue",Impact,"Arial Narrow Bold","Franklin Gothic Medium",sans-serif;
}
body{font:400 17px/1.6 "Barlow","Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.02em;line-height:.92;text-transform:uppercase}
.knopf{border-radius:2px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.92rem;border-width:2px}
.knopf:hover{background:var(--text);border-color:var(--text);color:var(--bg)}
.knopf.zweit{border-color:var(--text);color:var(--text)}
.knopf.zweit:hover{background:var(--text);color:var(--bg)}

/* Kopfzeile */
.kopf{color:#f3f1ec}
body.gescrollt .kopf,body.menue-offen .kopf,body.fest .kopf{color:var(--text);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.logo-name{font-family:var(--display);font-size:2.1rem;letter-spacing:.04em;line-height:1}
.logo-name::before{content:"";display:inline-block;width:10px;height:26px;margin-right:12px;vertical-align:-2px;background:repeating-linear-gradient(135deg,var(--accent) 0 5px,var(--text) 5px 10px)}
.navigation a:not(.knopf){font-weight:600;font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;transition:color .2s}
.navigation a:not(.knopf):hover{color:var(--accent-text)}

/* Start */
.start{color:#f3f1ec;position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:calc(var(--kopf-h) + 40px) 0 clamp(60px,9vh,110px)}
.start-bild{position:absolute;inset:0;background-size:cover;background-position:center}
.start-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.65) 45%,rgba(10,10,10,.25) 100%),linear-gradient(0deg,rgba(10,10,10,.9) 0%,transparent 35%)}
.start-inhalt{position:relative}
.vorzeile{display:inline-flex;align-items:center;gap:12px;margin:0 0 16px;font-weight:700;font-size:.85rem;letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 70%,#fff)}
.vorzeile::before{content:"";width:34px;height:3px;background:currentColor}
.start h1{font-size:clamp(64px,13vw,168px);margin:0;max-width:9.5ch}
.start-text{max-width:520px;margin:22px 0 32px;font-size:clamp(17px,1.8vw,19px);color:rgba(243,241,236,.86)}
.start .knopf.zweit{border-color:#f3f1ec;color:#f3f1ec}
.start .knopf.zweit:hover{background:#f3f1ec;color:#111}
.start-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.start-status{margin:24px 0 0}
.angebot{margin-top:18px;display:grid;gap:8px;max-width:560px}
.angebot>div{border-left:4px solid var(--accent);background:rgba(0,0,0,.55);padding:10px 16px;font-size:.98rem}
.angebot b{color:color-mix(in srgb,var(--accent) 70%,#fff);text-transform:uppercase;letter-spacing:.05em;font-size:.9rem}

/* Laufband */
.laufband-rahmen{overflow:hidden;position:relative;z-index:2;margin:-40px 0 -26px;padding:26px 0}
.laufband{background:var(--accent);color:var(--accent-ink);overflow:hidden;padding:14px 0;transform:rotate(-1.2deg);margin:0 -20px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.laufband[hidden]{display:none}
.lb-spur{display:flex;align-items:center;gap:28px;width:max-content;animation:laufen 38s linear infinite}
.lb-spur span{font-family:var(--display);font-size:clamp(26px,3.4vw,40px);line-height:1;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.lb-spur i{width:12px;height:12px;background:var(--accent-ink);transform:rotate(45deg);flex:none}
@keyframes laufen{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.lb-spur{animation:none}}

/* Abschnitte */
section.ueber,section.leistungen,section.team,section.galerie,section.kontakt{padding:clamp(76px,11vw,130px) 0}
.unterzeile{display:inline-flex;align-items:center;gap:12px;margin:0 0 12px;font-weight:700;font-size:.82rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-text)}
.unterzeile::before{content:"";width:28px;height:3px;background:var(--accent)}
h2{font-size:clamp(56px,8.5vw,104px);margin:0}
.kopfzeile{max-width:720px;margin:0 0 clamp(36px,5vw,56px)}
.einleitung{color:var(--muted);margin:16px 0 0;font-size:1.08rem;max-width:560px}
.mitte{margin-top:44px}

/* Über uns */
.ueber-raster{display:grid;gap:clamp(36px,6vw,80px);align-items:center}
@media (min-width:860px){.ueber-raster{grid-template-columns:.9fr 1.1fr}}
.ueber-bild{position:relative}
.ueber-bild::after{content:"";position:absolute;left:-12px;bottom:-12px;width:46%;height:46%;border-left:4px solid var(--accent);border-bottom:4px solid var(--accent);pointer-events:none}
.ueber-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.35) contrast(1.05)}
.ueber-text h2{margin-bottom:22px}
.fliess p{margin:0 0 16px;color:color-mix(in srgb,var(--text) 78%,transparent);font-size:1.08rem}
.ueber-text .knopf{margin-top:12px}

/* Leistungen */
.leistungen{background:var(--surface);background-image:repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,255,255,.018) 22px 44px)}
.kategorien{display:grid;gap:46px clamp(40px,6vw,90px)}
@media (min-width:860px){.kategorien{grid-template-columns:1fr 1fr}}
.kat-titel{font-size:clamp(38px,4.6vw,52px);margin:0 0 8px;display:flex;align-items:center;gap:16px;color:var(--text)}
.kat-titel::before{content:"";width:14px;height:34px;flex:none;background:repeating-linear-gradient(135deg,var(--accent) 0 6px,var(--text) 6px 12px)}
.kat-text{color:var(--muted);margin:0 0 6px}
.preisliste li{border-bottom:1px solid var(--line)}
.leistung{padding:15px 0;transition:color .2s,padding .2s}
.leistung:hover{color:var(--accent-text);padding-left:8px}
.l-name{font-weight:600;font-size:1.08rem;text-transform:uppercase;letter-spacing:.04em}
.l-name small{text-transform:none;letter-spacing:0;font-weight:400}
.l-linie{border-bottom:2px dotted var(--line);transform:translateY(-6px)}
.l-preis{font-family:var(--display);font-size:2rem;line-height:1;color:var(--accent-text);letter-spacing:.02em}

/* Team */
.team-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,2vw,20px)}
@media (min-width:900px){.team-raster{grid-template-columns:repeat(4,minmax(0,1fr))}}
.person{position:relative;overflow:hidden;background:var(--surface)}
.person .p-bild img{filter:grayscale(1) contrast(1.1);transition:filter .5s,transform .6s}
.person:hover .p-bild img{filter:none;transform:scale(1.04)}
.p-initial{background:var(--surface)}
.p-initial span{font-family:var(--display)}
.p-text{color:#f3f1ec;position:absolute;left:0;right:0;bottom:0;padding:44px 16px 16px;background:linear-gradient(0deg,rgba(0,0,0,.92) 20%,transparent)}
.person h3{font-size:clamp(30px,3vw,40px);line-height:1}
.p-rolle{color:color-mix(in srgb,var(--accent) 70%,#fff);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-top:2px!important}
.p-info{color:rgba(243,241,236,.8);font-size:.9rem;margin-top:4px!important;line-height:1.4}
@media (max-width:520px){.p-text{padding:34px 10px 10px}.p-info{display:none}.p-rolle{font-size:.66rem;letter-spacing:.08em}}

/* Galerie */
.galerie-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media (min-width:760px){.galerie-raster{grid-template-columns:repeat(4,minmax(0,1fr))}}
.g-bild{border-radius:0}
.g-bild img{filter:grayscale(.85) contrast(1.05);transition:filter .4s,transform .5s}
.g-bild:hover img{filter:none}

/* Kontakt */
.kontakt{background:var(--surface)}
.kontakt-raster{display:grid;gap:16px}
@media (min-width:860px){.kontakt-raster{grid-template-columns:1fr 1fr}}
.kasten{background:var(--bg);border-top:4px solid var(--accent);padding:clamp(24px,4vw,40px);display:grid;gap:18px;align-content:start}
.kasten h3{font-size:2.6rem;margin:0}
.kasten-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.zeiten tr.heute th,.zeiten tr.heute td{color:var(--accent-text)}
.karte{margin-top:16px;background:var(--bg);--karte-strasse:color-mix(in srgb,var(--text) 14%,transparent)}
.karte-info{border-top:4px solid var(--accent)}
.karte-info a{color:var(--text)}

/* Fußzeile */
.fuss{background:var(--dark);color:var(--dark-text);padding:54px 0 40px;border-top:1px solid var(--line)}
.fuss-innen{display:grid;gap:18px;justify-items:center;text-align:center}
.fuss-adresse{margin:0;opacity:.7}
.fuss-links{display:flex;gap:24px;font-weight:600;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
.fuss-links a{text-decoration:none;opacity:.85}.fuss-links a:hover{opacity:1;color:var(--accent-text)}
.fuss-copy{margin:0;font-size:.85rem;opacity:.5}

/* Handy */
.handy-leiste{--leiste-bg:var(--bg)}
.handy-leiste .knopf.zweit{border-color:var(--line)}
@media (max-width:520px){
  :root{--kopf-h:66px}
  .logo-name{font-size:1.8rem}
  .start-knoepfe .knopf{flex:1 1 100%}
  .l-preis{font-size:1.7rem}
  .kasten h3{font-size:2.2rem}
}

/* Impressum / Datenschutz */
.recht #rechtstext h1{font-size:clamp(36px,10.5vw,90px)}
.recht #rechtstext h2{font-family:"Barlow",sans-serif;font-weight:700;text-transform:none;letter-spacing:0;line-height:1.3}
.recht a{color:var(--accent-text)}
@media (max-width:760px){.start-bild::after{background:linear-gradient(0deg,var(--bg) 0%,rgba(10,10,10,.82) 40%,rgba(10,10,10,.55) 100%)}}
/* =====================================================================
   MR. BARBER – Ergänzungen (Gold-Variante, Logo, Leiste, 14 Sprachen)
   ===================================================================== */
:root{
  --bg:#0e0e0e;--surface:#171717;--text:#f3f1ec;--muted:#a6a29a;--line:#2a2a2a;
  --accent:#f0b429;--accent-ink:#111111;--accent-text:#f0b429;--dark:#000000;--dark-text:#f3f1ec;
  --gold-hell:#f7d27a;--leiste-h:64px;
  --display:"Bebas Neue","Oswald",Impact,"Arial Narrow Bold","Franklin Gothic Medium",sans-serif;
  --fliesstext:"Barlow","Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans",sans-serif;
  color-scheme:dark;
}
html{background:var(--bg)}
body{font:400 17px/1.6 var(--fliesstext);background:var(--bg);color:var(--text);padding-bottom:calc(var(--leiste-h) + env(safe-area-inset-bottom))}
.fuss{--accent-text:var(--accent)}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---------- Logo in der Kopfzeile ---------- */
.logo{flex-direction:row;align-items:center;gap:10px;color:inherit}
.logo-zeichen{width:12px;height:30px;flex:none;background:repeating-linear-gradient(135deg,var(--accent) 0 5px,var(--text) 5px 10px)}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-name{font-family:"Bebas Neue",Impact,sans-serif;font-size:2rem;letter-spacing:.05em;line-height:1;white-space:nowrap}
.logo-name::before{display:none}
.logo-est{font-family:"Barlow",sans-serif;font-weight:700;font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-top:2px;white-space:nowrap}

/* ---------- Sprachauswahl ---------- */
.kopf-rechts{display:flex;align-items:center;gap:6px}
.sprachwahl{position:relative;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px;border:1.5px solid currentColor;border-radius:2px;font-weight:700;font-size:.82rem;letter-spacing:.1em;opacity:.92;white-space:nowrap}
.sprachwahl:hover,.sprachwahl:focus-within{opacity:1;color:var(--accent)}
.sprachwahl .icon{width:18px;height:18px}
.sprachwahl select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0;-webkit-appearance:none;appearance:none}
.sprachwahl:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.navigation .nav-termin{white-space:nowrap}
@media (max-width:960px){.navigation .nav-termin{margin-top:16px}}

/* ---------- Startbereich mit Logo ---------- */
.start h1.marke{font-family:"Bebas Neue",Impact,sans-serif;font-size:clamp(72px,15vw,190px);max-width:none;letter-spacing:.03em;line-height:.88;margin:0;text-transform:uppercase;white-space:nowrap}
.marke-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:14px 0 0;font-family:"Barlow",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(.78rem,1.6vw,1rem);color:var(--gold-hell)}
.marke-zeile i{width:7px;height:7px;background:var(--accent);transform:rotate(45deg);flex:none}
.marke-est{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--accent);padding:5px 12px;color:var(--accent);letter-spacing:.3em}
.start-text{margin-top:24px}

/* ---------- Leistungen: VIP-Hinweis, Preise ---------- */
.l-name small{color:var(--muted)}
.leistung{cursor:default}
a.leistung{cursor:pointer}
.l-ab{font-family:"Barlow","Vazirmatn",sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-inline-end:6px;color:var(--muted);vertical-align:.35em}

/* ---------- Team: Platzhalter ---------- */
.p-initial{position:relative;background:linear-gradient(160deg,#1d1d1d 0%,#121212 100%)}
.p-initial span{color:var(--accent);font-family:"Bebas Neue",Impact,sans-serif}
.p-initial::after{content:"";position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);pointer-events:none}
.p-initial .foto-folgt{position:absolute;top:22px;inset-inline-start:22px;inset-inline-end:22px;font-family:"Barlow","Vazirmatn",sans-serif;font-size:.66rem;line-height:1.3;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);overflow-wrap:anywhere}
.team-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.team-raster{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.team-raster{grid-template-columns:repeat(4,minmax(0,1fr))}}
.person h3{overflow-wrap:anywhere}
@media (max-width:520px){.person h3{font-size:clamp(22px,7vw,30px)}.p-initial .foto-folgt{top:20px;inset-inline-start:20px;inset-inline-end:20px;font-size:.58rem;letter-spacing:.08em}}

/* ---------- Kontakt & Zahlung ---------- */
.kontakt-raster{grid-template-columns:1fr}
@media (min-width:860px){.kontakt-raster{grid-template-columns:1fr 1fr}}
.zahlung-kasten{grid-column:1/-1}
.zahlung-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.zahlung-zeile b{font-size:1.15rem}
.zahl-marken{display:flex;flex-wrap:wrap;gap:8px}
.zahl-marken span{display:inline-flex;align-items:center;min-height:34px;padding:4px 12px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:.9rem;letter-spacing:.04em}
.adresse-folgt{color:var(--muted);font-style:italic}
.zeiten th{text-align:start}
.zeiten td{text-align:end}

/* ---------- Untere Leiste (Termin · Anrufen · WhatsApp · Route) ---------- */
.handy-leiste{display:none!important}
.leiste{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(10,10,10,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 26px rgba(0,0,0,.45);padding-bottom:env(safe-area-inset-bottom)}
.leiste-innen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:760px;margin:0 auto;height:var(--leiste-h)}
.leiste a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:6px 4px;text-decoration:none;color:var(--text);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.1;text-align:center;transition:color .2s,background .2s}
.leiste a span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leiste a .icon{width:22px;height:22px}
.leiste a:hover{color:var(--accent)}
.leiste a.haupt{background:var(--accent);color:var(--accent-ink)}
.leiste a.haupt:hover{background:var(--gold-hell);color:var(--accent-ink)}
.leiste a.wa .icon{color:#25d366}
body.menue-offen .leiste{display:none}
.fuss{padding-bottom:54px!important}

/* ---------- Fenster (Termin / Route) ---------- */
.hinweis-dialog{border-top:4px solid var(--accent)}
.hd-innen h3{font-family:var(--display);font-weight:400;font-size:2.4rem;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.hd-knoepfe{display:grid;gap:10px;margin-top:6px}
.hd-knoepfe .knopf{width:100%}
.hd-knoepfe .knopf.wa{background:#25d366;border-color:#25d366;color:#0b2414}
.hd-knoepfe .knopf.wa:hover{background:#1fb457;border-color:#1fb457;color:#fff}
.knopf .ltr{letter-spacing:.04em}

/* ---------- Rechtliche Seiten ---------- */
.recht-hinweis{border-inline-start:4px solid var(--accent);background:var(--surface);padding:10px 16px;margin:0 0 26px;max-width:780px}
#rechtstext{direction:ltr;text-align:left}

/* ---------- Schriften je Sprache ---------- */
/* Kyrillisch (Russisch, Ukrainisch, Bulgarisch): Oswald für Überschriften, etwas kleiner */
html[data-schrift="kyr"] h2{font-size:clamp(42px,7.4vw,92px);line-height:1}
html[data-schrift="kyr"] .kat-titel{font-size:clamp(32px,4vw,46px)}
html[data-schrift="kyr"] .kasten h3{font-size:2.2rem}
html[data-schrift="kyr"] .lb-spur span{font-size:clamp(22px,3vw,34px)}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}

/* Arabische Schrift (Persisch, Arabisch): Vazirmatn, keine Sperrung (sonst brechen die Buchstaben) */
html[dir="rtl"]{--fliesstext:"Vazirmatn",Tahoma,"Segoe UI",system-ui,sans-serif}
html[dir="rtl"] body{font-family:var(--fliesstext);line-height:1.8}
html[dir="rtl"] *:not(.ltr):not(.marke):not(.l-preis):not(.logo-name):not(.logo-est):not(.marke-zeile):not(.marke-zeile *):not(.person h3){letter-spacing:0!important}
html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] .lb-spur span,html[dir="rtl"] .hd-innen h3{font-family:"Vazirmatn",Tahoma,sans-serif;font-weight:700;text-transform:none;line-height:1.3}
html[dir="rtl"] h2{font-size:clamp(34px,5.4vw,62px)}
html[dir="rtl"] .kat-titel{font-size:clamp(26px,3.4vw,38px)}
html[dir="rtl"] .kasten h3{font-size:1.8rem}
html[dir="rtl"] .person h3{font-size:clamp(20px,2.4vw,30px);line-height:1.2}
html[dir="rtl"] .lb-spur span{font-size:clamp(20px,2.6vw,30px)}
html[dir="rtl"] .hd-innen h3{font-size:1.7rem}
html[dir="rtl"] .navigation a:not(.knopf),html[dir="rtl"] .knopf,html[dir="rtl"] .leiste a,html[dir="rtl"] .unterzeile,html[dir="rtl"] .vorzeile,html[dir="rtl"] .p-rolle,html[dir="rtl"] .fuss-links{text-transform:none;font-family:"Vazirmatn",Tahoma,sans-serif}
html[dir="rtl"] .leiste a{font-size:.8rem}
html[dir="rtl"] .l-name{text-transform:none;font-family:"Vazirmatn",Tahoma,sans-serif}
html[dir="rtl"] .ueber-bild::after{left:auto;right:-12px;border-left:0;border-right:4px solid var(--accent)}
html[dir="rtl"] .leistung:hover{padding-left:0;padding-right:8px}
html[dir="rtl"] .start-bild::after{background:linear-gradient(270deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.65) 45%,rgba(10,10,10,.25) 100%),linear-gradient(0deg,rgba(10,10,10,.9) 0%,transparent 35%)}
html[dir="rtl"] .lb-spur{animation-name:laufen-rtl}
@keyframes laufen-rtl{to{transform:translateX(50%)}}
html[dir="rtl"] .zurueck .icon{transform:none}
html[dir="rtl"] .marke-zeile{direction:ltr;justify-content:flex-end}
html[dir="rtl"] .logo{direction:ltr}
@media (max-width:760px){html[dir="rtl"] .start-bild::after{background:linear-gradient(0deg,var(--bg) 0%,rgba(10,10,10,.82) 40%,rgba(10,10,10,.55) 100%)}}

/* ---------- Handy ---------- */
@media (max-width:520px){
  :root{--leiste-h:62px}
  .logo-name{font-size:1.65rem}
  .logo-zeichen{height:26px;width:10px}
  .sprachwahl{height:40px;padding:0 9px;font-size:.76rem}
  .kopf-innen{gap:8px}
  .start h1.marke{font-size:clamp(64px,19vw,96px)}
  .marke-zeile{letter-spacing:.14em;gap:6px 10px}
  .leiste a{font-size:.64rem;letter-spacing:.03em}
  .zahl-marken span{font-size:.82rem}
}
@media (max-width:360px){
  .logo-est{display:none}
  .leiste a{font-size:.58rem}
}
@media (min-width:961px){.leiste-innen{max-width:640px}}
@media (max-width:380px){
  .kopf-innen{gap:6px}
  .logo{gap:7px}
  .logo-name{font-size:1.45rem}
  .logo-zeichen{width:8px;height:22px}
  .sprachwahl{padding:0 8px;gap:4px}
  .sprachwahl .icon{display:none}
  .menue-knopf{width:42px;height:42px;padding:10px}
}
.kategorien>*,.kontakt-raster>*,.ueber-raster>*{min-width:0}
.l-name{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
h1,h2,h3{max-width:100%}
.fuss-links{flex-wrap:wrap;justify-content:center;gap:10px 24px;max-width:100%}
.fuss-links a{overflow-wrap:anywhere}
@media (min-width:860px){.kategorien{align-items:start}.kategorien>.kategorie:first-child{grid-row:span var(--kat-rest,2)}}
.fuss .logo-text{align-items:center}
.ueber-bild img{height:auto}
html[dir="rtl"] .person h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1;font-size:clamp(30px,3vw,40px)}
@media (max-width:520px){html[dir="rtl"] .person h3{font-size:clamp(22px,7vw,30px)}}
html[dir="rtl"] .marke-zeile,html[dir="rtl"] .logo-est{font-family:"Barlow",sans-serif}

/* ===== Nacht 28./29.10.: Verbindung zur App – Logo, Fotos der Leistungen, Team-Fotos, Galerie ===== */
.logo-bild{width:46px;height:46px;border-radius:50%;overflow:hidden;background:#fff;flex:none;border:2px solid var(--accent);display:block}
.logo-bild img,.start-logo img{width:100%;height:100%;object-fit:contain;display:block}
.logo-bild.fuellen img,.start-logo.fuellen img{object-fit:cover}
.logo.mit-bild .logo-zeichen{display:none}
.start-logo{width:clamp(104px,15vw,150px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fff;border:3px solid var(--accent);margin:0 0 20px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.leistung{align-items:center}
.l-linie{transform:none;align-self:center}
.l-foto{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;border:2px solid color-mix(in srgb,var(--accent) 70%,transparent);background:#111}
.l-name{flex:0 1 auto}
@media (max-width:520px){.l-foto{width:46px;height:46px}.leistung{gap:10px}}
.person .p-bild{position:relative}
.person .p-bild.mit-foto>span{display:none}
.person .p-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-bild img{width:100%;height:100%;object-fit:cover}
.galerie{padding:clamp(76px,11vw,130px) 0}
.angebot>div span{color:rgba(243,241,236,.92)}
@media (max-width:520px){.logo-bild{width:40px;height:40px}}
@media (max-width:380px){.logo-bild{width:34px;height:34px}}