/* Coiffure Zick Zack – Entwurf
   Farben aus dem Salon: Tapete, Holztisch, Espresso-Stuhl, blaue Aussentreppe */
:root {
  --tapete: #ECE8D2;
  --holz: #E4D2B2;
  --espresso: #2B211C;
  --blau: #2C4DB0;
  --blau-hell: #9DB0F2;
  --schild: #F7F5EC;

  --text: rgba(43, 33, 28, 0.92);
  --text-2: rgba(43, 33, 28, 0.70);
  --text-3: rgba(43, 33, 28, 0.50);
  --linie: rgba(43, 33, 28, 0.18);

  --display: "Imbue", "Times New Roman", serif;
  --sans: "Gantari", system-ui, sans-serif;

  --rand: 20px;
  --luft: 80px;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
}
@media (min-width: 900px) {
  :root { --rand: 40px; --luft: 120px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--tapete);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 18px; } }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }

.rahmen { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--rand); }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 999px;
  background: var(--blau); color: var(--schild);
  font: 600 17px/1 var(--sans);
  text-decoration: none; cursor: pointer;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.knopf:hover { background: #233F94; }
.knopf:active { transform: scale(0.98); }
.knopf--klein { min-height: 40px; padding: 0 16px; font-size: 15px; }
.textlink { display: inline-block; padding: 8px 0; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.textlink:hover { text-decoration-thickness: 2px; }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 10;
  background: var(--tapete);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.kopf__marke {
  font-family: var(--display); font-variation-settings: "opsz" 100;
  padding: 8px 0; font-size: 30px; line-height: 1; letter-spacing: -0.01em; text-decoration: none; color: var(--espresso);
}
.kopf__nav { display: none; }
@media (min-width: 900px) {
  .kopf__nav { display: flex; gap: 40px; margin-left: auto; }
  .kopf__nav a { padding: 8px 0; text-decoration: none; color: var(--text-2); font-size: 16px; transition: color 150ms ease-out; }
  .kopf__nav a:hover { color: var(--espresso); }
}

/* Einstieg */
.einstieg { padding: 24px 0 var(--luft); }
.einstieg__raster { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .einstieg { padding-top: 64px; }
  .einstieg__raster { grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: end; }
  .einstieg__text { grid-column: 1 / 8; padding-bottom: 8px; }
  .einstieg__bild { grid-column: 8 / 13; }
}

/* Das Schild: «Coiffeur Zick Zack» mit Stufenlinie wie am Eingang */
.schild {
  --s: clamp(76px, 23vw, 168px);
  position: relative;
  width: min(100%, calc(var(--s) * 3.7));
  height: calc(var(--s) * 2.05);
  margin-bottom: 24px;
  color: var(--espresso);
}
.schild__beruf {
  position: absolute; top: 0; left: 2px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.32em; color: var(--text-2);
}
.schild__wort {
  position: absolute;
  font-family: var(--display); font-variation-settings: "opsz" 100;
  font-weight: 400; font-size: var(--s); line-height: 0.85; letter-spacing: -0.02em;
}
.schild__wort--zick { top: calc(var(--s) * 0.2); left: 0; }
.schild__wort--zack { bottom: 0; right: 0; }
.schild__linie {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
.schild__linie path {
  fill: none; stroke: var(--blau); stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linejoin: miter;
}

.einstieg__titel {
  margin: 0 0 16px;
  font-family: var(--display); font-variation-settings: "opsz" 60;
  font-weight: 400; font-size: clamp(40px, 11vw, 80px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--espresso);
  hyphens: manual;
}
.zeile { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.zeile > span { display: inline-block; }
.einstieg__satz { margin: 0 0 24px; max-width: 34em; color: var(--text-2); font-size: 18px; }
@media (min-width: 900px) { .einstieg__satz { font-size: 20px; } }
.einstieg__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.sterne { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; color: var(--text-2); text-decoration: none; }
.sterne:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.einstieg__kontakt { margin: 16px 0 0; font-size: 16px; color: var(--text-2); }
.einstieg__kontakt a { display: inline-block; padding: 8px 0; color: var(--espresso); text-underline-offset: 4px; }
.sterne__zeichen { color: var(--blau); letter-spacing: 0.08em; font-size: 14px; }

.einstieg__bild {
  margin: 0; padding: 8px;
  border: 1px solid var(--linie); border-radius: 6px;
}
.einstieg__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; border-radius: 2px; }
@media (min-width: 900px) { .einstieg__bild img { aspect-ratio: 3 / 4; } }

/* Abschnitte */
.abschnitt { padding: var(--luft) 0; }
.abschnitt--holz { background: var(--holz); }
.abschnitt--linie { border-top: 1px solid var(--linie); }
.titel {
  margin: 0 0 24px;
  font-family: var(--display); font-variation-settings: "opsz" 60;
  font-weight: 400; font-size: clamp(40px, 9vw, 64px); line-height: 1; letter-spacing: -0.02em;
  color: var(--espresso);
}
.hinweis, .platzhalter {
  margin: 0 0 40px; max-width: 40em; padding: 16px;
  border: 1px dashed rgba(43, 33, 28, 0.35); border-radius: 6px;
  font-size: 15px; color: var(--text-2);
}

/* Angebot */
.angebot { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .angebot { grid-template-columns: 1fr 1fr 0.8fr; gap: 64px; align-items: start; }
}
.liste__titel {
  margin: 0 0 8px;
  font-family: var(--display); font-variation-settings: "opsz" 40;
  font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--espresso);
}
.liste dl { margin: 0; }
.liste dl > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid rgba(43, 33, 28, 0.22);
}
.liste dt { color: var(--text); }
.liste dd { margin: 0; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

.regal { margin: 0; display: grid; grid-template-columns: 40% 1fr; gap: 16px; align-items: end; }
.regal img { width: 100%; aspect-ratio: 2 / 5; object-fit: cover; border-radius: 4px; }
.regal figcaption { font-size: 15px; color: var(--text-2); }
@media (min-width: 900px) {
  .regal { grid-template-columns: 1fr; }
  .regal img { aspect-ratio: 3 / 5; }
}

/* Salon */
.salon { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .salon { grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
  .salon__bild { grid-column: 1 / 6; }
  .salon__text { grid-column: 7 / 13; }
}
.salon__bild { margin: 0; }
.salon__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.gross { margin: 0 0 24px; font-size: 21px; line-height: 1.45; color: var(--text); max-width: 30em; }
@media (min-width: 900px) { .gross { font-size: 24px; } }
.stimmen { display: grid; gap: 24px; padding-top: 24px; border-top: 1px solid var(--linie); }
@media (min-width: 600px) { .stimmen { grid-template-columns: 1fr 1fr; } }
.stimmen blockquote { margin: 0; }
.stimmen p {
  margin: 0 0 8px;
  font-family: var(--display); font-variation-settings: "opsz" 40;
  font-size: 28px; line-height: 1.1; color: var(--espresso);
}
.stimmen footer { font-size: 14px; color: var(--text-3); }

/* Öffnungszeiten */
.zeiten { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .zeiten { grid-template-columns: repeat(12, 1fr); }
  .zeiten > .titel { grid-column: 1 / 6; }
  .zeiten > div { grid-column: 7 / 13; }
}
.zeiten__tabelle { width: 100%; border-collapse: collapse; }
.zeiten__tabelle th, .zeiten__tabelle td { padding: 16px 0; border-bottom: 1px solid var(--linie); text-align: left; font-weight: 400; }
.zeiten__tabelle td { text-align: right; color: var(--text-3); font-style: italic; }
.zeiten__notiz { margin: 24px 0 0; color: var(--text-2); max-width: 32em; }

/* Kontakt: dunkel wie der Stuhl */
.abschnitt--kontakt {
  --text: rgba(247, 245, 236, 0.92);
  --text-2: rgba(247, 245, 236, 0.70);
  --text-3: rgba(247, 245, 236, 0.50);
  --linie: rgba(247, 245, 236, 0.20);
  background: var(--espresso); color: var(--text);
}
.abschnitt--kontakt .titel { color: var(--schild); }
.kontakt { display: grid; gap: 64px; }
@media (min-width: 900px) {
  .kontakt { grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .kontakt__info { grid-column: 1 / 7; }
  .anfrage { grid-column: 8 / 13; align-self: start; }
}
.kontakt__mail {
  display: inline-block; margin: 0 0 24px;
  font-family: var(--display); font-variation-settings: "opsz" 100;
  font-size: clamp(34px, 9.4vw, 64px); line-height: 1.05; letter-spacing: -0.01em;
  color: var(--schild); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px;
  text-decoration-color: var(--blau-hell);
  transition: color 150ms ease-out;
}
.kontakt__mail:hover { color: var(--blau-hell); }
.kontakt__adresse { font-style: normal; margin: 0 0 16px; color: var(--text); }
.kontakt__info .textlink { color: var(--schild); }

.eingang { position: relative; margin: 40px 0 16px; max-width: 460px; }
.eingang img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 70%; border-radius: 4px; }
.eingang__schild {
  position: absolute; left: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 8px;
  background: var(--schild); border-radius: 2px;
  color: var(--blau); font-size: 13px; font-weight: 600; letter-spacing: 0.24em;
}
.eingang__pfeil { width: 48px; height: 30px; overflow: visible; }
.eingang__pfeil path { fill: none; stroke: var(--blau); stroke-width: 4; stroke-linejoin: miter; }
.eingang__text { margin: 0; max-width: 30em; color: var(--text-2); font-size: 16px; }

/* Anfrage */
.anfrage {
  padding: 24px; border: 1px solid var(--linie); border-radius: 6px;
}
@media (min-width: 900px) { .anfrage { padding: 40px; } }
.anfrage__titel {
  margin: 0 0 8px;
  font-family: var(--display); font-variation-settings: "opsz" 40;
  font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--schild);
}
.anfrage__info { margin: 0 0 24px; font-size: 15px; color: var(--text-2); }
.wahl { display: flex; gap: 8px; margin: 0 0 24px; padding: 0; border: 0; }
.wahl legend { margin-bottom: 8px; font-size: 15px; color: var(--text-2); padding: 0; }
.wahl label {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 24px;
  border: 1px solid var(--linie); border-radius: 999px; cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.wahl input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.wahl label:has(input:checked) { background: var(--schild); color: var(--espresso); border-color: var(--schild); }
.wahl label:has(input:focus-visible) { outline: 2px solid var(--blau-hell); outline-offset: 3px; }
.feld { display: block; margin: 0 0 16px; }
.feld span { display: block; margin-bottom: 8px; font-size: 15px; color: var(--text-2); }
.feld input {
  width: 100%; min-height: 48px; padding: 0 16px;
  background: rgba(247, 245, 236, 0.06); color: var(--schild);
  border: 1px solid var(--linie); border-radius: 6px;
  font: 400 17px/1.2 var(--sans);
}
.feld input::placeholder { color: rgba(247, 245, 236, 0.40); }
.feld input:focus-visible { outline: 2px solid var(--blau-hell); outline-offset: 1px; }
.anfrage .knopf { margin-top: 8px; width: 100%; }
@media (min-width: 600px) { .anfrage .knopf { width: auto; } }

/* Fuss */
.fuss {
  background: var(--espresso); color: rgba(247, 245, 236, 0.70);
  border-top: 1px solid rgba(247, 245, 236, 0.20);
  padding: 64px 0 40px; font-size: 15px;
}
.fuss__innen { display: grid; gap: 16px; }
.fuss p { margin: 0; }
.fuss a { display: inline-block; padding: 8px 0; color: rgba(247, 245, 236, 0.92); }
.fuss__marke {
  font-family: var(--display); font-variation-settings: "opsz" 100;
  font-size: 48px; line-height: 1; color: var(--schild);
}
.fuss__klein { color: rgba(247, 245, 236, 0.50); font-size: 14px; }
.fuss__entwurf { padding-top: 16px; border-top: 1px solid rgba(247, 245, 236, 0.20); }

/* Bewegung: nur mit JS und ohne reduzierte Bewegung */
@media (prefers-reduced-motion: no-preference) {
  .js .schild__linie { clip-path: inset(-10% 100% -10% 0); transition: clip-path 1200ms var(--expo) 350ms; }
  .js.geladen .schild__linie { clip-path: inset(-10% 0 -10% 0); }

  .js .zeile > span { transform: translateY(105%); transition: transform 900ms var(--expo); }
  .js .zeile:nth-child(2) > span { transition-delay: 90ms; }
  .js.geladen .zeile > span { transform: none; }

  .js .bild-auf { clip-path: inset(100% 0 0 0); transition: clip-path 1000ms var(--expo); }
  .js .bild-auf img { transform: scale(1.15); transition: transform 1400ms var(--expo); }
  .js .bild-auf.ist-da { clip-path: inset(0 0 0 0); }
  .js .bild-auf.ist-da img { transform: none; }
  .js .eingang.bild-auf { clip-path: none; }
  .js .eingang__schild { opacity: 0; transform: translateX(-16px); transition: opacity 600ms var(--expo) 700ms, transform 900ms var(--expo) 700ms; }
  .js .eingang.ist-da .eingang__schild { opacity: 1; transform: none; }
}