/* HairHirsch Friseursalon, Esens. Gestaltung: Der Schnitt / Schaufenster / Klinker. */

@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/jost-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/jost-italic-latin.woff2') format('woff2'); }
@font-face { font-family: 'Gloock'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/gloock-normal-latin.woff2') format('woff2'); }

:root {
  --putz: #f1ece3;
  --putz-2: #e7e0d4;
  --kohle: #161513;
  --kohle-2: #23211e;
  --rauch: #6f6a62;
  --linie: rgba(22, 21, 19, .16);
  --klinker: #9b3d2c;
  --klinker-hell: #c4614c;
  --silber: #d9d5ce;

  --serif: 'Gloock', 'Times New Roman', serif;
  --sans: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

  --rand: clamp(16px, 4vw, 64px);
  --kopf-h: 72px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--kopf-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--putz); color: var(--kohle);
  font-family: var(--sans); font-weight: 400; font-size: clamp(16px, 1.05vw, 19px); line-height: 1.5;
  overflow-x: clip;
}
img, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--klinker); color: var(--putz); }
:focus-visible { outline: 2px solid var(--klinker); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Typografie */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.etikett { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--rauch); }
.etikett--hell { color: rgba(241, 236, 227, .62); }
.gross { font-family: var(--serif); font-size: clamp(2.6rem, 7.2vw, 7.4rem); line-height: .96; letter-spacing: -.02em; }
.mittel { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.015em; }
.lauf { max-width: 36em; font-weight: 300; font-size: clamp(1.05rem, 1.25vw, 1.25rem); line-height: 1.55; }
.lauf strong { font-weight: 500; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: .7em; padding: .95em 1.5em; border-radius: 2px;
  background: var(--kohle); color: var(--putz); font-weight: 500; font-size: .95rem; letter-spacing: .03em;
  position: relative; overflow: hidden; isolation: isolate; cursor: pointer; transition: color .35s var(--ease-out);
}
.knopf::before { content: ''; position: absolute; inset: 0; background: var(--klinker); transform: translateY(101%); transition: transform .5s var(--ease-out); z-index: -1; }
.knopf:hover::before, .knopf:focus-visible::before { transform: translateY(0); }
.knopf svg { width: 1em; height: 1em; transition: transform .4s var(--ease-out); }
.knopf:hover svg { transform: translateX(.25em); }
.knopf--hell { background: var(--putz); color: var(--kohle); }
.knopf--hell:hover { color: var(--putz); }
.textlink { display: inline-flex; align-items: center; gap: .5em; font-weight: 500; font-size: .95rem; letter-spacing: .03em; position: relative; }
.textlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.2em; height: 1px; background: currentColor; transform: scaleX(.35); transform-origin: left; transition: transform .5s var(--ease-out); }
.textlink:hover::after { transform: scaleX(1); }

/* Kopfzeile */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--kopf-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--rand);
  color: var(--putz); transition: color .4s, background-color .5s, box-shadow .5s;
}
.kopf::before { content: ''; position: absolute; inset: 0; background: var(--putz); opacity: 0; transition: opacity .5s; z-index: -1; }
.kopf.ist-fest { color: var(--kohle); }
.kopf.ist-fest::before { opacity: .97; }
.kopf.ist-fest { box-shadow: 0 1px 0 var(--linie); }
.kopf.ist-dunkel { color: var(--putz); }
.kopf.ist-dunkel::before { background: var(--kohle); }
.kopf.ist-dunkel.ist-fest { box-shadow: 0 1px 0 rgba(241, 236, 227, .12); }
.marke { display: inline-flex; flex-direction: column; line-height: 1; justify-self: start; }
/* Das Originallogo (freigestellt, schwarz und grau). Auf dunklem Grund invertiert: weiß und hellgrau. */
.marke__bild { display: block; height: 42px; width: auto; transition: filter .45s; }
.marke picture { display: block; }
.kopf:not(.ist-fest) .marke__bild, .kopf.ist-dunkel .marke__bild, .fuss .marke__bild, .marke--ende .marke__bild { filter: invert(1) brightness(.95); }
.fuss .marke__bild { height: 40px; }
.marke--ende .marke__bild { height: clamp(44px, min(4.8vw, 8vh), 68px); filter: invert(1) drop-shadow(0 2px 18px rgba(0, 0, 0, .5)); }
@media (max-width: 63.99em) { .marke__bild { height: 36px; } .marke--ende .marke__bild { height: clamp(48px, 15vw, 64px); } }
/* Marke nach dem Original: leichte Schrift, HAIR in voller Farbe, Hirsch und Unterzeile grau (auf Hell: Schwarz und Grau) */
.marke__wort { font-weight: 300; font-size: 1.6rem; letter-spacing: 0; line-height: 1; }
.marke__wort b { font-weight: 300; letter-spacing: .01em; }
.marke__wort i { font-style: normal; opacity: .62; }
.marke__unter { font-size: .6rem; letter-spacing: .36em; text-transform: uppercase; margin-top: .3em; opacity: .62; font-weight: 400; padding-left: .04em; }
/* Die Schere als A: skaliert mit der Schriftgröße, die Ringe ragen wie im Original über die Versalhöhe */
.schere { display: inline-block; height: 1.225em; width: .644em; vertical-align: baseline; margin: 0 .01em; overflow: visible; }
.marke--ende { margin-bottom: .8rem; }
.marke--ende .marke__wort { font-size: clamp(2.4rem, 4.4vw, 4rem); }
.marke--ende .marke__unter { font-size: clamp(.66rem, .95vw, .85rem); letter-spacing: .42em; margin-top: .3em; }
.kopf__nav { display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); font-size: .9rem; letter-spacing: .04em; font-weight: 500; }
.kopf__nav a { position: relative; padding: .4em 0; }
.kopf__nav a::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.kopf__nav a:hover::after, .kopf__nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.kopf__cta { justify-self: end; display: flex; align-items: center; gap: 1rem; }
.kopf .knopf { padding: .7em 1.2em; font-size: .85rem; }
.kopf:not(.ist-fest):not(.ist-dunkel) .knopf { background: var(--putz); color: var(--kohle); }
.kopf:not(.ist-fest):not(.ist-dunkel) .knopf:hover { color: var(--putz); }
.menue-knopf { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.menue-knopf span { display: block; width: 24px; height: 1.5px; background: currentColor; position: relative; transition: transform .4s var(--ease-out), background .2s; }
.menue-knopf span::before, .menue-knopf span::after { content: ''; position: absolute; left: 0; width: 24px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease-out), top .3s; }
.menue-knopf span::before { top: -7px; } .menue-knopf span::after { top: 7px; }
body.menue-offen .menue-knopf span { background: transparent; }
body.menue-offen .menue-knopf span::before { top: 0; transform: rotate(45deg); }
body.menue-offen .menue-knopf span::after { top: 0; transform: rotate(-45deg); }

/* Mobiles Menü */
.menue {
  position: fixed; inset: 0; z-index: 40; background: var(--kohle); color: var(--putz);
  padding: calc(var(--kopf-h) + 2rem) var(--rand) 2rem; display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-inout); visibility: hidden;
}
body.menue-offen .menue { clip-path: inset(0 0 0 0); visibility: visible; }
.menue__liste a { display: block; font-family: var(--serif); font-size: clamp(2.4rem, 9vw, 3.6rem); line-height: 1.15; padding: .12em 0; border-bottom: 1px solid rgba(241, 236, 227, .12); transform: translateY(30px); opacity: 0; transition: transform .6s var(--ease-out), opacity .6s; }
body.menue-offen .menue__liste a { transform: none; opacity: 1; }
body.menue-offen .menue__liste a:nth-child(2) { transition-delay: .06s; }
body.menue-offen .menue__liste a:nth-child(3) { transition-delay: .12s; }
body.menue-offen .menue__liste a:nth-child(4) { transition-delay: .18s; }
body.menue-offen .menue__liste a:nth-child(5) { transition-delay: .24s; }
.menue__fuss { display: grid; gap: 1.2rem; font-size: .95rem; font-weight: 300; }
.menue__fuss strong { font-weight: 500; }

/* Der Schnitt: Titelsequenz aus dem Namen. Zwei Kopien des Wortes, per clip-path an einer Linie geteilt. */
.schnitt { position: relative; height: 230svh; background: var(--kohle); color: var(--putz); }
.schnitt__innen { position: sticky; top: 0; height: 100svh; overflow: hidden; touch-action: pan-y; }
.schnitt__innen::before { content: ''; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 40%, #1f1d1a 0%, var(--kohle) 70%); }
.wort {
  --dxa: 0px; --dya: 0px; --dxb: 0px; --dyb: 0px;
  position: absolute; left: var(--rand); top: 50%; transform: translateY(-52%);
  font-family: var(--sans); font-weight: 400; font-size: clamp(6rem, min(21vw, calc(50vh - 190px)), 21rem); line-height: .82; letter-spacing: -.02em;
  text-transform: uppercase; user-select: none; opacity: 0;
}
.schnitt.ist-an .wort { opacity: 1; }
.wort__ebene { position: relative; display: flex; flex-direction: column; will-change: transform, clip-path; }
.wort__ebene span { display: block; white-space: nowrap; }
.wort__ebene .schere { height: 1.225em; width: .644em; margin: 0 .01em; vertical-align: 0; }
.wort__ebene span:nth-child(2) { padding-left: .06em; }
.wort__ebene:not(:first-child) { position: absolute; inset: 0; }
.wort__ebene[data-teil="a"] { transform: translate(var(--dxa), var(--dya)); }
.wort__ebene[data-teil="b"] { transform: translate(var(--dxb), var(--dyb)); }
.wort__ebene span:nth-child(2) { transition: clip-path .55s var(--ease-out); }
.wort .noch-nicht { clip-path: inset(50% -1em 50% -1em); }
.klinge {
  position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--putz);
  transform-origin: 0 50%; box-shadow: 0 0 12px rgba(241, 236, 227, .6), 0 0 2px rgba(241, 236, 227, .9); opacity: 0; pointer-events: none;
}
/* Die Öffnung: beim Scrollen geht der Schnitt auf, dahinter der Laden am Herdetor */
.oeffnung { position: absolute; inset: 0; clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
.oeffnung picture, .oeffnung img { width: 100%; height: 100%; }
.oeffnung img { object-fit: cover; object-position: 50% 45%; transform: scale(1.12); will-change: transform; filter: saturate(1.05); }
.oeffnung::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(22, 21, 19, .72), rgba(22, 21, 19, .35) 38%, rgba(22, 21, 19, 0) 62%), linear-gradient(to top, rgba(22, 21, 19, .6), rgba(22, 21, 19, .08) 45%, rgba(22, 21, 19, .2)); }
@media (max-width: 63.99em) { .oeffnung::after { background: linear-gradient(to top, rgba(22, 21, 19, .78), rgba(22, 21, 19, .45) 45%, rgba(22, 21, 19, .15) 75%); } }
.oeffnung__kante { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--klinker-hell); transform-origin: 0 50%; box-shadow: 0 0 10px rgba(196, 97, 76, .5); opacity: 0; }
.schnitt__ende { position: absolute; left: var(--rand); right: var(--rand); top: 0; max-width: 32em; opacity: 0; transform: translateY(16px); pointer-events: none; }
.schnitt__ende.ist-da { pointer-events: auto; }
.schnitt__ende-ort { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.schnitt__ende-satz { font-family: var(--serif); font-size: clamp(1.3rem, min(2.2vw, 3.3vh), 2.3rem); line-height: 1.08; letter-spacing: -.015em; margin: .7rem 0 1.2rem; text-shadow: 0 2px 30px rgba(0, 0, 0, .45); }
.schnitt__ende .schnitt__aktion { margin-top: 0; }
.schnitt__ui { position: absolute; inset: 0; padding: calc(var(--kopf-h) + 1.2rem) var(--rand) clamp(1.6rem, 5vh, 3.5rem); display: grid; grid-template-rows: auto 1fr auto; pointer-events: none; }
.schnitt__ui > * { pointer-events: auto; }
.schnitt__ort { display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; opacity: 0; transition: opacity 1s; }
.schnitt.ist-ui .schnitt__ort { opacity: 1; }
.schnitt__ort span { position: relative; }
.schnitt__ort span + span::before { content: ''; position: absolute; left: -1.4rem; top: 50%; width: .6rem; height: 1px; background: currentColor; opacity: .7; }
.schnitt__unten { grid-row: 3; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem 3rem; }
.schnitt__unten > * { opacity: 0; transform: translateY(10px); transition: opacity .9s, transform 1s var(--ease-out); }
.schnitt.ist-ui .schnitt__unten > * { opacity: 1; transform: none; }
.schnitt.ist-ui .schnitt__unten > *:nth-child(2) { transition-delay: .5s; }
.schnitt__zeile { max-width: 26em; font-weight: 300; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.5; }
.schnitt__aktion { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-top: 1.4rem; }
@media (max-width: 63.99em) {
  /* Handy und Tablet: dieselbe Komposition wie am Desktop, HAIR und HIRSCH gestapelt, nichts gedreht */
  .schnitt { height: 210svh; }
  .wort { left: var(--rand); top: 44%; transform: translateY(-50%); font-size: clamp(3.2rem, min(25.2vw, 23vh), 9rem); line-height: .84; letter-spacing: -.035em; }
  .schnitt__ui { padding-top: calc(var(--kopf-h) + .4rem); }
  .schnitt__ort { gap: .4rem 1.6rem; font-size: .7rem; }
  .schnitt__unten { grid-template-columns: 1fr; gap: 1rem; }
  .schnitt__zeile { font-size: .95rem; max-width: 22em; }
  .schnitt__ende { max-width: 22em; }
  .schnitt__ende-satz { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .schnitt__aktion { gap: .9rem 1.4rem; margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .schnitt { height: 100svh; }
  .wort { opacity: 1 !important; }
  .wort .noch-nicht { clip-path: none; }
  .wort__ebene span:nth-child(2) { transition: none; }
  .klinge { display: none; }
  .schnitt__ende { opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .schnitt__ort { opacity: 1 !important; }
  .schnitt__unten { display: none; }
}

/* Abschnitte allgemein */
.abschnitt { padding: clamp(5rem, 12vw, 11rem) var(--rand); position: relative; }
.abschnitt__kopf { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.abschnitt__kopf .etikett { display: flex; align-items: center; gap: 1rem; }
.abschnitt__kopf .etikett::before { content: ''; width: 2.4rem; height: 1px; background: currentColor; }
.zeile { width: 100%; height: 1px; background: var(--linie); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out); }
.ist-sichtbar .zeile, .zeile.ist-sichtbar { transform: scaleX(1); }

/* Enthüllungen (keine reinen Einblendungen) */
[data-enthuellen] { --d: 0ms; }
[data-enthuellen="klipp"] { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--d) var(--ease-out); }
[data-enthuellen="klipp"].ist-sichtbar { clip-path: inset(0 0 0 0); }
[data-enthuellen="wisch"] { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--d) var(--ease-out); }
[data-enthuellen="wisch"].ist-sichtbar { clip-path: inset(0 0 0 0); }
[data-enthuellen="bild"] { overflow: hidden; }
[data-enthuellen="bild"] > img, [data-enthuellen="bild"] > picture img { transform: scale(1.12); transition: transform 1.6s var(--d) var(--ease-out); }
[data-enthuellen="bild"]::after { content: ''; position: absolute; inset: 0; background: var(--putz); transform: scaleY(1); transform-origin: bottom; transition: transform 1.1s var(--d) var(--ease-inout); }
[data-enthuellen="bild"].ist-sichtbar::after { transform: scaleY(0); }
[data-enthuellen="bild"].ist-sichtbar > img, [data-enthuellen="bild"].ist-sichtbar > picture img { transform: none; }
.dunkel [data-enthuellen="bild"]::after { background: var(--kohle); }
[data-enthuellen="zeilen"] .z { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
[data-enthuellen="zeilen"] .z > span { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
[data-enthuellen="zeilen"].ist-sichtbar .z > span { transform: none; }
[data-enthuellen="zeilen"].ist-sichtbar .z:nth-child(2) > span { transition-delay: .09s; }
[data-enthuellen="zeilen"].ist-sichtbar .z:nth-child(3) > span { transition-delay: .18s; }
[data-enthuellen="zeilen"].ist-sichtbar .z:nth-child(4) > span { transition-delay: .27s; }
[data-enthuellen="ziffer"] { transition: opacity .1s; }

/* Der Laden */
.laden { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.laden__satz { font-family: var(--serif); font-size: clamp(1.7rem, 3.1vw, 3.2rem); line-height: 1.16; letter-spacing: -.012em; max-width: 22em; }
.laden__satz em { font-style: normal; color: var(--klinker); }
.laden__fakten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; margin-top: 3rem; max-width: 40rem; }
.fakt { border-top: 1px solid var(--linie); padding-top: 1rem; }
.fakt__zahl { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.8rem); line-height: 1; letter-spacing: -.02em; }
.fakt__zahl small { font-family: var(--sans); font-size: .5em; font-weight: 300; letter-spacing: 0; margin-left: .15em; }
.fakt__text { font-size: .85rem; color: var(--rauch); margin-top: .5rem; letter-spacing: .02em; }
.laden__bild { margin: 0; position: relative; aspect-ratio: 4 / 3; background: var(--putz-2); }
.laden__bild picture, .laden__bild img { width: 100%; height: 100%; }
.laden__bild img { object-fit: cover; object-position: 50% 60%; }
.laden__bild figcaption { position: absolute; left: 0; bottom: -1.8rem; font-size: .78rem; color: var(--rauch); letter-spacing: .04em; }


/* Die Karte (Leistungen) */
.karte { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.karte__bild { display: none; }
.karte__gruppe { padding: 2.2rem 0 1rem; border-top: 1px solid var(--linie); scroll-margin-top: calc(var(--kopf-h) + 1rem); }
.karte__gruppe:first-child { border-top: 0; padding-top: 0; }
.karte__titel { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: 1.4rem; }
.karte__titel .nr { font-size: .74rem; letter-spacing: .2em; color: var(--rauch); font-weight: 500; }
.karte__titel h3 { font-family: var(--serif); font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1; letter-spacing: -.015em; }
.karte__hinweis { font-size: .9rem; font-weight: 300; color: var(--rauch); margin: -.6rem 0 1.2rem; max-width: 34em; }
.karte__mobilbild { aspect-ratio: 3/2; overflow: hidden; margin-bottom: 1.4rem; position: relative; }
.karte__mobilbild img { width: 100%; height: 100%; object-fit: cover; }
.posten { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.5rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px solid var(--linie); }
.posten:last-child { border-bottom: 0; }
.posten__name { font-weight: 400; }
.posten__dauer { font-size: .78rem; color: var(--rauch); letter-spacing: .04em; margin-left: .8em; white-space: nowrap; }
.posten__preis { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.posten__preis small { font-weight: 300; font-size: .8em; margin-right: .3em; color: var(--rauch); }
.karte__fuss { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; justify-content: space-between; font-size: .85rem; color: var(--rauch); font-weight: 300; }

/* Von hinten (Arbeiten): fünf echte Fotos, gleiches Format, ruhige Reihe */
.reihe { display: flex; gap: clamp(.8rem, 2vw, 1.4rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--rand)); padding: 0 var(--rand); }
.reihe::-webkit-scrollbar { display: none; }
.werk { flex: 0 0 auto; width: min(70vw, 300px); scroll-snap-align: start; margin: 0; position: relative; }
.werk picture, .werk img { width: 100%; }
.werk img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; display: block; background: var(--putz-2); }
.werk figcaption { display: flex; justify-content: space-between; gap: 1rem; font-size: .76rem; letter-spacing: .04em; color: var(--rauch); margin-top: .7rem; }
.arbeiten__fuss { margin-top: 2.2rem; display: flex; justify-content: space-between; gap: 1rem 2rem; font-size: .85rem; color: var(--rauch); font-weight: 300; flex-wrap: wrap; }
.arbeiten__fuss a { color: var(--kohle); }

/* Team: zwei Porträts, gleiches Format, daneben der Satz */
.team { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.person { position: relative; text-align: center; }
.person__bild { aspect-ratio: 4 / 5; overflow: hidden; position: relative; background: var(--putz-2); }
.person__bild picture, .person__bild img { width: 100%; height: 100%; }
.person__bild img { object-fit: cover; object-position: 50% 30%; }
.person__name { font-family: var(--serif); font-size: clamp(1.9rem, 2.4vw, 2.4rem); line-height: 1.05; margin-top: 1.2rem; letter-spacing: -.015em; }
.person__rolle { font-size: .85rem; letter-spacing: .06em; color: var(--klinker); margin-top: .4rem; font-weight: 500; }
.person__text { font-weight: 300; margin-top: .8rem; max-width: 26em; font-size: .98rem; margin-inline: auto; }
.team__satz { display: grid; gap: 1.6rem; justify-items: center; text-align: center; margin-top: .5rem; }
.team__satz .lauf { max-width: 30em; }


/* Stimmen */
.stimmen { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.note { position: relative; }
.note__zahl { font-family: var(--serif); font-size: clamp(6rem, 18vw, 15rem); line-height: .85; letter-spacing: -.04em; display: flex; align-items: flex-end; gap: .1em; }
.note__zahl small { font-family: var(--sans); font-size: .16em; font-weight: 300; letter-spacing: .04em; padding-bottom: .5em; color: var(--rauch); }
.sterne { display: flex; gap: .3rem; margin: 1.2rem 0 .6rem; }
.sterne svg { width: 22px; height: 22px; }
.sterne .voll { fill: var(--kohle); }
.sterne .teil { fill: url(#sternteil); }
.note__quelle { font-size: .85rem; color: var(--rauch); font-weight: 300; line-height: 1.6; }
.note__quelle strong { font-weight: 500; color: var(--kohle); }
.zitate { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.zitat { max-width: 30em; margin: 0; position: relative; }
.zitat:nth-child(even) { justify-self: end; text-align: right; }
.zitat p { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 2.3rem); line-height: 1.2; letter-spacing: -.01em; }
.zitat p::before { content: '„'; } .zitat p::after { content: '“'; }
.zitat--kurz p { font-size: clamp(1.9rem, 3.4vw, 3.4rem); }
.zitat footer { margin-top: .9rem; font-size: .8rem; letter-spacing: .08em; color: var(--rauch); display: flex; gap: 1rem; align-items: center; }
.zitat:nth-child(even) footer { justify-content: flex-end; }
.zitat footer::before { content: ''; width: 1.6rem; height: 1px; background: var(--klinker); }
.stimmen__fuss { margin-top: 1rem; font-size: .85rem; color: var(--rauch); font-weight: 300; }

/* Herdetor 36 (Kontakt) */
.dunkel { background: var(--kohle); color: var(--putz); }
.dunkel .etikett { color: rgba(241, 236, 227, .6); }
.dunkel .zeile { background: rgba(241, 236, 227, .14); }
.herdetor__titel { font-family: var(--serif); font-size: clamp(3.2rem, 10vw, 10.5rem); line-height: .9; letter-spacing: -.03em; }
.herdetor__titel small { display: block; font-family: var(--sans); font-size: clamp(1rem, 1.4vw, 1.3rem); font-weight: 300; letter-spacing: .02em; margin-top: 1rem; opacity: .75; }
.herdetor { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-top: clamp(3rem, 6vw, 5rem); }
.block h3 { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; opacity: .6; margin-bottom: 1.2rem; }
.status { display: inline-flex; align-items: center; gap: .6rem; font-size: .95rem; margin-bottom: 1.4rem; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--klinker-hell); box-shadow: 0 0 0 0 rgba(196, 97, 76, .6); animation: puls 2.4s infinite; }
.status.ist-offen::before { background: #7fb57a; box-shadow: 0 0 0 0 rgba(127, 181, 122, .6); }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(196, 97, 76, .5); } 70% { box-shadow: 0 0 0 10px rgba(196, 97, 76, 0); } 100% { box-shadow: 0 0 0 0 rgba(196, 97, 76, 0); } }
.zeiten { margin: 0; display: grid; gap: 0; max-width: 26rem; }
.zeiten__zeile { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; gap: 1rem; padding: .85rem 0; border-top: 1px solid rgba(241, 236, 227, .14); font-variant-numeric: tabular-nums; }
.zeiten__zeile:last-child { border-bottom: 1px solid rgba(241, 236, 227, .14); }
.zeiten__zeile dt { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; font-weight: 500; }
.zeiten__zeile dd { margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 300; }
.zeiten__zeile--zu dd { opacity: .55; }
.zeiten__zeile.ist-heute dt { opacity: 1; color: var(--klinker-hell); }
.zeiten__zeile.ist-heute dd::after { content: 'heute'; margin-left: .8rem; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--klinker-hell); vertical-align: middle; }
.zeiten__hinweis { margin-top: 1rem; font-size: .85rem; opacity: .65; font-weight: 300; }
.kontaktliste { display: grid; gap: 1.1rem; }
.kontaktliste a { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 300; padding-bottom: 1rem; border-bottom: 1px solid rgba(241, 236, 227, .14); position: relative; }
.kontaktliste a::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--putz); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.kontaktliste a:hover::after { transform: scaleX(1); }
.kontaktliste small { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: .55; width: 5.5rem; }
.termin { display: grid; gap: 1.2rem; align-content: start; }
.termin p { font-weight: 300; max-width: 26em; opacity: .85; }
.termin .knopf { justify-self: start; font-size: 1.05rem; padding: 1.1em 1.8em; }
.route { display: grid; gap: .8rem; margin-top: 1rem; }
.route address { font-style: normal; font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 300; line-height: 1.3; }

/* Fußzeile: Schlusssatz, Seitenlinks, Marke und Rechtliches. Adresse, Zeiten, Telefon stehen im Abschnitt darüber. */
.fuss { background: var(--kohle-2); color: var(--putz); padding: clamp(3rem, 6vw, 5rem) var(--rand) calc(1.6rem + env(safe-area-inset-bottom)); display: grid; gap: clamp(2rem, 4vw, 3rem); border-top: 1px solid rgba(241, 236, 227, .1); }
.fuss__schluss { display: grid; grid-template-columns: 1fr; gap: 1.8rem; align-items: end; padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid rgba(241, 236, 227, .14); }
.fuss__schluss h2 { font-family: var(--serif); font-size: clamp(2.2rem, 4.6vw, 4.4rem); line-height: 1; letter-spacing: -.02em; }
.fuss__links { display: flex; flex-wrap: wrap; gap: .7rem 1.8rem; font-size: .92rem; font-weight: 500; letter-spacing: .04em; }
.fuss__links a { position: relative; padding: .2em 0; }
.fuss__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.fuss__links a:hover::after { transform: scaleX(1); }
.fuss__unten { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: center; font-size: .8rem; }
.fuss__rechtlich { display: flex; gap: 1.6rem; font-weight: 500; letter-spacing: .04em; }
.fuss__copy { opacity: .55; font-weight: 300; }
@media (min-width: 48em) {
  .fuss__schluss { grid-template-columns: 1fr auto; }
  .fuss__links { justify-content: flex-end; max-width: 30rem; }
  .fuss__unten { grid-template-columns: auto auto 1fr; gap: 2.5rem; }
  .fuss__copy { text-align: right; }
}

/* Mobile Leiste */
.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr auto; gap: 1px; background: rgba(22, 21, 19, .96); backdrop-filter: blur(8px); color: var(--putz); transform: translateY(110%); transition: transform .5s var(--ease-out); padding-bottom: env(safe-area-inset-bottom); }
.leiste.ist-da { transform: none; }
.leiste a { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem; font-weight: 500; font-size: .95rem; letter-spacing: .04em; }
.leiste a + a { border-left: 1px solid rgba(241, 236, 227, .14); padding: 1rem 1.3rem; }
.leiste svg { width: 1.1em; height: 1.1em; }

/* Ab Tablet */
@media (min-width: 48em) {
  .laden { grid-template-columns: 1fr 1fr; align-items: start; }
  .laden__bild { position: sticky; top: calc(var(--kopf-h) + 2rem); }
  .team { grid-template-columns: repeat(2, minmax(0, 24rem)); justify-content: center; gap: clamp(2rem, 4vw, 4rem); }
  .team__satz { grid-column: 1 / -1; }
  .werk { width: min(38vw, 320px); }
  .abschnitt__kopf { grid-template-columns: 1fr 1fr; align-items: end; }
  .stimmen { grid-template-columns: 1fr 2fr; gap: 4rem; }
  .note { position: sticky; top: calc(var(--kopf-h) + 2rem); align-self: start; }
  .herdetor { grid-template-columns: 1fr 1fr; }
  .herdetor .block--termin { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
}

/* Desktop */
@media (min-width: 64em) {
  :root { --kopf-h: 84px; }
  .reihe { overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; }
  .werk { width: calc((100% - 4 * clamp(.8rem, 2vw, 1.4rem)) / 5); }
  .karte { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 6vw, 7rem); align-items: start; }
  .karte__bild { display: block; position: sticky; top: calc(var(--kopf-h) + 1.5rem); aspect-ratio: 4/5; overflow: hidden; background: var(--putz-2); }
  .karte__bild picture { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease-inout); }
  .karte__bild picture img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s var(--ease-out); }
  .karte__bild picture.ist-aktiv { clip-path: inset(0 0 0 0); z-index: 1; }
  .karte__bild picture.ist-aktiv img { transform: none; }
  .karte__bild picture.war-aktiv { clip-path: inset(0 0 0 0); z-index: 0; transition: none; }
  .karte__bild figcaption { position: absolute; left: 1.2rem; bottom: 1rem; z-index: 2; color: var(--putz); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
  .karte__mobilbild { display: none; }
  .herdetor { grid-template-columns: 1.15fr 1fr 1fr; }
  .herdetor .block--termin { grid-column: auto; grid-template-columns: 1fr; }
}
@media (max-width: 63.99em) {
  .kopf__nav { display: none; }
  .kopf { grid-template-columns: 1fr auto; }
  .kopf__cta .knopf { display: none; }
  .menue-knopf { display: inline-flex; }
}
@media (max-width: 47.99em) {
  /* Zeilenweise Enthüllung ergibt am Handy harte Umbrüche: dort fließt der Text, der Block wird aufgedeckt */
  [data-enthuellen="zeilen"] { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out); }
  [data-enthuellen="zeilen"].ist-sichtbar { clip-path: inset(0 0 0 0); }
  [data-enthuellen="zeilen"] .z, [data-enthuellen="zeilen"] .z > span { display: inline; overflow: visible; transform: none; transition: none; }
  [data-enthuellen="zeilen"] .z::after { content: ' '; }
  .laden__satz { font-size: clamp(1.5rem, 6.4vw, 1.9rem); }
  .zitat:nth-child(even) { justify-self: start; text-align: left; }
  .zitat:nth-child(even) footer { justify-content: flex-start; }
  .fuss { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-enthuellen], .zeile, .woche .balken i { transition: none !important; clip-path: none !important; transform: none !important; opacity: 1 !important; }
  [data-enthuellen="bild"]::after { display: none; }
  .status::before { animation: none; }
}

/* Jobs (Recruiting): kommt serverseitig direkt unter den Hero, nur wenn im Admin aktiv */
.jobs { background: var(--kohle); color: var(--putz); padding: clamp(4rem, 9vw, 8rem) var(--rand); position: relative; overflow: hidden; }
.jobs::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(241, 236, 227, .1); }
.jobs__innen { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); grid-template-areas: 'kopf' 'bild' 'stellen' 'kontakt'; }
.jobs__kopf { grid-area: kopf; }
.jobs__titel { font-family: var(--serif); font-size: clamp(3.2rem, 10vw, 9.5rem); line-height: .92; letter-spacing: -.03em; margin-top: 1.2rem; }
.jobs__einleitung { max-width: 30em; font-weight: 300; font-size: clamp(1.05rem, 1.25vw, 1.25rem); line-height: 1.55; margin-top: 1.6rem; opacity: .85; }
.jobs__bild { grid-area: bild; margin: 0; width: min(100%, 20rem); justify-self: end; transform: rotate(-2deg); }
.jobs__bild img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; display: block; background: var(--kohle-2); }
.jobs__bild figcaption { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin-top: .9rem; }
.jobs__stellen { grid-area: stellen; display: grid; gap: 1.5rem; align-content: start; }
.stelle { border: 1px solid rgba(241, 236, 227, .16); padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; gap: 1.7rem; background: var(--kohle-2); }
.stelle__kopf { display: flex; gap: 1.2rem; align-items: baseline; }
.stelle__nr { font-family: var(--serif); font-size: 1.5rem; color: var(--klinker-hell); flex: none; }
.stelle h3 { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.05; letter-spacing: -.015em; }
.stelle__modell { font-size: .85rem; letter-spacing: .06em; color: rgba(241, 236, 227, .62); margin-top: .5rem; }
.stelle__modell i { font-style: normal; opacity: .5; padding: 0 .2em; }
.stelle__spalten { display: grid; gap: 1.5rem; }
.stelle h4 { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; opacity: .6; margin-bottom: .9rem; }
.stelle ul { list-style: none; display: grid; gap: .5rem; font-weight: 300; line-height: 1.45; }
.stelle li { padding-left: 1.3rem; position: relative; }
.stelle li::before { content: ''; position: absolute; left: 0; top: .75em; width: .65rem; height: 1px; background: var(--klinker-hell); }
.stelle .knopf { justify-self: start; }
.jobs__kontakt { grid-area: kontakt; font-size: .95rem; font-weight: 300; opacity: .75; max-width: 34em; }
.kopf__jobs::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--klinker-hell); margin-right: .5em; vertical-align: .1em; }
@media (min-width: 48em) {
  .jobs__innen { grid-template-columns: 1.2fr .8fr; grid-template-areas: 'kopf bild' 'stellen stellen' 'kontakt kontakt'; align-items: end; }
  .stelle__spalten { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
  .jobs__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); column-gap: clamp(3rem, 7vw, 8rem); grid-template-areas: 'kopf bild' 'stellen bild' 'kontakt bild'; align-items: start; }
  .jobs__bild { position: sticky; top: calc(var(--kopf-h) + 2.5rem); width: 100%; margin-top: 3rem; }
}

/* Bewerbung: kurzer Dialog, zwei Pflichtangaben */
.bewerbung { border: 0; padding: 0; width: min(100% - 1.5rem, 38rem); max-height: min(100svh - 1.5rem, 56rem); background: var(--putz); color: var(--kohle); margin: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); border-radius: 2px; overflow: auto; overscroll-behavior: contain; }
.bewerbung::backdrop { background: rgba(22, 21, 19, .72); backdrop-filter: blur(4px); }
.bewerbung__form, .bewerbung__danke { padding: clamp(1.4rem, 4vw, 2.6rem); display: grid; gap: 1.1rem; position: relative; }
.bewerbung h3 { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.05; letter-spacing: -.015em; }
.bewerbung__hinweis, .bewerbung__danke p:not(.etikett) { font-weight: 300; line-height: 1.5; max-width: 30em; }
.bewerbung__zu { position: absolute; right: .8rem; top: .8rem; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; background: none; border: 0; }
.bewerbung__zu span { position: relative; width: 18px; height: 18px; display: block; }
.bewerbung__zu span::before, .bewerbung__zu span::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: var(--kohle); transform: rotate(45deg); }
.bewerbung__zu span::after { transform: rotate(-45deg); }
.bewerbung__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.feld { display: grid; gap: .45rem; }
.feld > span, .feld label > span, .feld legend { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--rauch); }
.feld small { text-transform: none; letter-spacing: 0; font-weight: 300; font-size: .9em; }
.feld--halb { grid-template-columns: 1fr; gap: 1.1rem; }
.feld--halb label { display: grid; gap: .45rem; }
.feld legend { margin-bottom: .55rem; }
.feld input:not([type=checkbox]):not([type=file]), .feld select, .feld textarea { width: 100%; padding: .85em .95em; border: 1px solid rgba(22, 21, 19, .24); background: #fff; color: var(--kohle); font: inherit; font-size: 1rem; border-radius: 2px; transition: border-color .25s; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 0; border-color: var(--kohle); }
.feld textarea { resize: vertical; min-height: 5.5em; }
.feld--wahl { border: 0; padding: 0; margin: 0; min-width: 0; }
.feld--wahl div { display: flex; flex-wrap: wrap; gap: .6rem; }
.wahl { position: relative; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl span { display: inline-block; padding: .6em 1.1em; border: 1px solid rgba(22, 21, 19, .24); border-radius: 2px; font-size: .92rem; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.wahl input:checked + span { background: var(--kohle); color: var(--putz); border-color: var(--kohle); }
.wahl input:focus-visible + span { outline: 2px solid var(--klinker); outline-offset: 3px; }
.datei input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.datei em { display: block; font-style: normal; padding: .85em .95em; border: 1px dashed rgba(22, 21, 19, .4); border-radius: 2px; cursor: pointer; font-size: .92rem; overflow-wrap: anywhere; }
.datei input:focus-visible + em { outline: 2px solid var(--klinker); outline-offset: 3px; }
.haken { display: flex; gap: .8rem; align-items: flex-start; font-size: .86rem; font-weight: 300; line-height: 1.5; cursor: pointer; }
.haken input { margin-top: .3em; width: 1.1rem; height: 1.1rem; accent-color: var(--klinker); flex: none; }
.haken a { text-decoration: underline; text-underline-offset: .15em; }
.bewerbung__meldung { color: var(--klinker); font-size: .92rem; font-weight: 500; }
.bewerbung__meldung:empty { display: none; }
.bewerbung__aktion { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-top: .4rem; }
.bewerbung__aktion .knopf[disabled] { opacity: .6; cursor: wait; }
.bewerbung__danke .knopf { justify-self: start; }
@media (min-width: 34em) { .feld--halb { grid-template-columns: 1fr 1fr; } }