/* ==========================================================================
   STUDIO KONTUR – Komponenten der Kapitel 02–07 (progressiv geladen)
   Wird in index.html direkt vor Kapitel 02 eingebunden: Der erste Bildschirm
   rendert schon, während diese Datei lädt; alles darunter wartet auf sie (kein Layoutsprung).
   Reiter + Preistabelle, Galerie, Lightbox, Team, Formular + Buchungs-Assistent,
   Kontakt, Zitate. Zustände: hover, focus-visible, active, disabled, Fehler, leer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reiter (Tabs). Ohne JS: alle Bereiche untereinander, Reiterleiste versteckt.
   -------------------------------------------------------------------------- */
.reiter__leiste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

.reiter__knopf {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-height: 3.25rem;
  padding: var(--s-3) var(--s-4);
  border: var(--rahmen) solid var(--tinte);
  background: var(--papier);
  box-shadow: 4px 4px 0 0 var(--tinte);
  font-family: var(--schrift-display);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: left;
  text-transform: uppercase;
  transition: transform var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz) var(--kurve);
}

.reiter__knopf .mono {
  font-size: var(--fs-mini);
}

.reiter__knopf:hover {
  background: var(--blau);
  color: var(--weiss);
}

.reiter__knopf[aria-selected="true"] {
  background: var(--tinte);
  color: var(--weiss);
  box-shadow: 4px 4px 0 0 var(--blau);
  transform: translate(-2px, -2px);
}

.reiter__knopf:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.reiter__feld + .reiter__feld {
  margin-top: var(--s-8);
}

.reiter--aktiv .reiter__feld + .reiter__feld {
  margin-top: 0;
}

.reiter--aktiv .reiter__titel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.reiter__titel {
  margin-bottom: var(--s-4);
  text-transform: uppercase;
}

.reiter__inhalt {
  display: grid;
  gap: var(--s-6);
}

.reiter__bild {
  max-width: 22rem;
}

@media (min-width: 64rem) {
  .reiter__leiste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .reiter__inhalt {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: var(--s-7);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   Preistabelle – Matrix nach Haarlänge. Unter 34rem Containerbreite stapelt
   sie sich (Rollen im HTML sichern die Tabellen-Semantik).
   -------------------------------------------------------------------------- */
.preise {
  container-type: inline-size;
}

.preistabelle {
  width: 100%;
  border-collapse: collapse;
  border: var(--rahmen) solid var(--tinte);
  background: var(--papier);
  box-shadow: var(--schatten);
  font-variant-numeric: tabular-nums;
}

.preistabelle thead th {
  padding: var(--s-2) var(--s-3);
  background: var(--tinte);
  color: var(--weiss);
  font-family: var(--schrift-mono);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: var(--lw-mono);
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.preistabelle thead th:first-child {
  text-align: left;
}

.preistabelle tbody tr {
  border-top: var(--rahmen-duenn) solid var(--tinte);
  transition: background-color var(--dauer-kurz), color var(--dauer-kurz);
}

.preistabelle tbody th,
.preistabelle td {
  padding: var(--s-3);
  vertical-align: top;
}

.preistabelle tbody th {
  text-align: left;
  font-weight: 400;
}

.preis__name {
  display: block;
  font-weight: 650;
  line-height: 1.3;
}

.preis__info {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-klein);
  line-height: 1.45;
  color: var(--tinte-2);
}

.preistabelle td {
  font-family: var(--schrift-mono);
  font-size: var(--fs-klein);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

.preis__ab {
  font-size: var(--fs-mini);
  font-weight: 400;
}

.preis__leer {
  color: var(--tinte-2);
}

/* Zeilen-Hover mit Farbumkehr – Sekundärtext wechselt mit, Kontrast bleibt ≥ 12 : 1 */
.preistabelle tbody tr:hover {
  background: var(--tinte);
  color: var(--weiss);
}

.preistabelle tbody tr:hover .preis__info,
.preistabelle tbody tr:hover .preis__leer {
  color: var(--papier-matt);
}

@container (max-width: 34rem) {
  .preistabelle,
  .preistabelle tbody,
  .preistabelle tr,
  .preistabelle tbody th,
  .preistabelle td {
    display: block;
  }

  .preistabelle thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .preistabelle tbody tr {
    display: grid;
    grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
    padding-bottom: var(--s-3);
  }

  .preistabelle tbody th {
    grid-column: 1 / -1;
    padding-bottom: var(--s-2);
  }

  .preistabelle td {
    padding: var(--s-1) var(--s-3);
    text-align: left;
    white-space: normal;
  }

  .preistabelle td::before {
    content: attr(data-laenge);
    display: block;
    font-size: var(--fs-mini);
    font-weight: 400;
    letter-spacing: var(--lw-mono);
    text-transform: uppercase;
    color: var(--tinte-2);
  }

  .preistabelle tbody tr:hover td::before {
    color: var(--papier-matt);
  }

  .preistabelle--pauschal tbody tr {
    --spalten: 1;
  }
}

/* Längen-Lineal: drei Balken wie drei Haarlängen */
.laengen {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: var(--rahmen) solid var(--tinte);
  background: var(--papier);
}

.laengen__titel {
  font-family: var(--schrift-mono);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: var(--lw-mono);
  text-transform: uppercase;
}

.laengen__zeile {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-4);
  row-gap: var(--s-1);
}

.laengen__zeile dt {
  font-family: var(--schrift-display);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.laengen__zeile dd {
  grid-column: 2;
  font-size: var(--fs-klein);
  color: var(--tinte-2);
}

.laengen__liste {
  display: grid;
  gap: var(--s-4);
}

/* Balken als Pseudo-Element, damit die Definitionsliste nur dt/dd enthält */
.laengen__zeile::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  height: 1rem;
  width: var(--anteil);
  border: var(--rahmen-duenn) solid var(--tinte);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(0.75rem - 1.5px), var(--tinte) calc(0.75rem - 1.5px) 0.75rem),
    var(--blau);
  background-size: 0.75rem 40%, auto;
  background-repeat: repeat-x, no-repeat;
}

/* --------------------------------------------------------------------------
   Lookbook-Galerie: horizontal, Scroll-Snap, ohne JS einfach wischbar
   -------------------------------------------------------------------------- */
.galerie {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand);
  scrollbar-color: var(--tinte) var(--papier-2);
}

.galerie__liste {
  display: flex;
  gap: clamp(1rem, 0.5rem + 2vw, 2.25rem);
  width: max-content;
  padding: var(--s-4) var(--rand) var(--s-6);
}

.look {
  flex: 0 0 clamp(15rem, 68vw, 23rem);
  scroll-snap-align: start;
}

.look__link {
  position: relative;
  display: block;
  border: var(--rahmen) solid var(--tinte);
  background: var(--tinte);
  box-shadow: var(--schatten);
  transition: transform var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz) var(--kurve);
}

.look__link img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* „Vergrößern“-Marke in der Ecke, invertiert beim Hover */
.look__lupe {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-top: var(--rahmen) solid var(--tinte);
  border-left: var(--rahmen) solid var(--tinte);
  background: var(--papier);
  color: var(--tinte);
  transition: background-color var(--dauer-kurz), color var(--dauer-kurz);
}

.look__link:hover {
  transform: translate(-3px, -3px);
  box-shadow: calc(var(--schatten-v) + 3px) calc(var(--schatten-v) + 3px) 0 0 var(--blau);
}

.look__link:hover .look__lupe {
  background: var(--blau);
  color: var(--weiss);
}

.look__link:active {
  transform: translate(var(--schatten-v), var(--schatten-v));
  box-shadow: none;
}

.look__text {
  display: grid;
  gap: var(--s-1);
  margin-top: var(--s-4);
}

.look__nr {
  font-family: var(--schrift-mono);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: var(--lw-mono);
}

.look__titel {
  font-size: var(--fs-h4);
  text-transform: uppercase;
}

.look__info {
  font-size: var(--fs-klein);
  line-height: 1.45;
  color: var(--tinte-2);
}

.galerie__steuerung {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.galerie__zaehler {
  min-width: 5.5ch;
  font-family: var(--schrift-mono);
  font-size: var(--fs-klein);
  font-weight: 500;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pfeilknopf {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: var(--rahmen) solid var(--tinte);
  background: var(--papier);
  color: var(--tinte);
  box-shadow: 4px 4px 0 0 var(--tinte);
  transition: transform var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz) var(--kurve);
}

.pfeilknopf .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.pfeilknopf:hover {
  background: var(--tinte);
  color: var(--weiss);
  box-shadow: 4px 4px 0 0 var(--blau);
}

.pfeilknopf:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.pfeilknopf:disabled {
  border-style: dashed;
  background: var(--papier-2);
  color: var(--tinte-2);
  box-shadow: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   Lightbox (<dialog>, von lookbook.js erzeugt)
   -------------------------------------------------------------------------- */
.lightbox {
  --fokus-farbe: var(--weiss);
  width: min(100vw - 2rem, 70rem);
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: var(--rahmen) solid var(--papier);
  background: var(--tinte);
  color: var(--weiss);
  box-shadow: var(--schatten-v) var(--schatten-v) 0 0 var(--blau);
}

.lightbox::backdrop {
  background: color-mix(in srgb, var(--tinte) 88%, transparent);
}

.lightbox__innen {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4);
}

.lightbox__bild {
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 12rem);
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--tinte-2);
}

.lightbox__leiste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s-4);
}

.lightbox__nr {
  font-family: var(--schrift-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--lw-mono);
}

.lightbox__titel {
  font-size: var(--fs-h3);
  text-transform: uppercase;
}

.lightbox__info {
  font-size: var(--fs-klein);
  color: var(--papier-matt);
}

.lightbox__knoepfe {
  display: flex;
  gap: var(--s-2);
}

.lightbox .pfeilknopf {
  border-color: var(--papier);
  background: var(--tinte);
  color: var(--weiss);
  box-shadow: 4px 4px 0 0 var(--blau);
}

.lightbox .pfeilknopf:hover {
  background: var(--weiss);
  color: var(--tinte);
  --fokus-farbe: var(--blau);
}

@media (min-width: 48rem) {
  .lightbox__innen {
    grid-template-columns: minmax(0, 1fr) 16rem;
    align-items: end;
  }

  .lightbox__bild {
    max-height: calc(100dvh - 6rem);
  }

  .lightbox__leiste {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Team: Masthead-Zeilen mit Platzhalter-Porträt (Wirbel-Grafik + Initialen)
   -------------------------------------------------------------------------- */
.team__liste {
  border-bottom: var(--rahmen) solid var(--tinte);
}

.person {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: var(--rahmen) solid var(--tinte);
  transition: background-color var(--dauer-kurz), color var(--dauer-kurz);
}

.person__bild {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: var(--rahmen) solid var(--tinte);
  background: var(--blau);
  color: var(--weiss);
  overflow: hidden;
}

.person__wirbel {
  position: absolute;
  inset: -12%;
  width: 124%;
  height: 124%;
  max-width: none;
  color: var(--weiss);
  opacity: 0.55;
  transform: rotate(var(--drehung, 0deg));
}

.person__initialen {
  position: relative;
  padding: 0.1em 0.2em;
  background: var(--tinte);
  color: var(--weiss);
  font-family: var(--schrift-display);
  font-size: clamp(1rem, 0.6rem + 1.4vw, 1.8rem);
  font-weight: 800;
  line-height: 1;
}

/* drei Varianten, damit die Reihe lebendig bleibt */
.person:nth-child(3n + 2) .person__bild {
  background: var(--tinte);
}

.person:nth-child(3n + 2) .person__wirbel {
  color: var(--blau);
  opacity: 1;
}

.person:nth-child(3n + 2) .person__initialen {
  background: var(--blau);
}

.person:nth-child(3n + 3) .person__bild {
  background: var(--papier-2);
}

.person:nth-child(3n + 3) .person__wirbel {
  color: var(--tinte);
  opacity: 0.7;
}

.person__kopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  font-family: var(--schrift-mono);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: var(--lw-mono);
  text-transform: uppercase;
}

.person__rolle {
  padding: 0 var(--s-1);
  background: var(--blau);
  color: var(--weiss);
}

.person__name {
  margin-top: var(--s-2);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem);
  line-height: 0.95;
  text-transform: uppercase;
}

.person__satz {
  margin-top: var(--s-3);
  max-width: 48ch;
  font-size: var(--fs-klein);
}

.person__aktion {
  grid-column: 2;
}

/* Linktext darf umbrechen, der Pfeil bleibt am letzten Wort */
.person__aktion .textlink {
  display: inline;
  hyphens: manual;
  line-height: 1.9;
}

.person__aktion .icon {
  display: inline-block;
  vertical-align: -0.2em;
}

.person:hover {
  background: var(--tinte);
  color: var(--weiss);
  --fokus-farbe: var(--weiss);
}

.person:hover .textlink {
  text-decoration-color: var(--weiss);
}

@media (min-width: 48rem) {
  .person {
    grid-column: a / e;
    grid-template-columns: subgrid;
    gap: 0;
    padding-block: var(--s-5);
  }

  .person > * {
    margin-inline: var(--spalt);
  }

  .person__bild {
    grid-column: a / b;
    width: min(100%, 11rem);
  }

  .person__text {
    grid-column: b / d;
  }

  .person__aktion {
    grid-column: d / e;
    align-self: end;
    justify-self: start;
  }
}

/* --------------------------------------------------------------------------
   Formularfelder
   -------------------------------------------------------------------------- */
.feld {
  display: grid;
  gap: var(--s-2);
}

.feld__label,
.gruppe__label {
  font-family: var(--schrift-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--lw-mono);
  text-transform: uppercase;
}

.feld__hinweis {
  font-size: var(--fs-klein);
  color: var(--tinte-2);
}

.feld__eingabe {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--s-3) var(--s-4);
  border: var(--rahmen) solid var(--tinte);
  border-radius: 0;
  background: var(--weiss);
  color: var(--tinte);
  box-shadow: inset 0 0 0 0 var(--blau);
  transition: box-shadow var(--dauer-kurz);
}

textarea.feld__eingabe {
  min-height: 7rem;
  resize: vertical;
}

.feld__eingabe:hover {
  box-shadow: 4px 4px 0 0 var(--tinte);
}

.feld__eingabe:focus-visible {
  outline: var(--fokus-breite) solid var(--blau);
  outline-offset: 3px;
  box-shadow: 4px 4px 0 0 var(--blau);
}

.feld__eingabe::placeholder {
  color: var(--tinte-2);
  opacity: 1;
}

.feld__eingabe:disabled {
  border-style: dashed;
  background: var(--papier-2);
  color: var(--tinte-2);
}

/* Fehlerzustand: gestrichelter Rahmen, blasses Blau, schwarzes Etikett mit Text */
.feld__eingabe[aria-invalid="true"],
.wahl-gruppe--fehler .wahl {
  border-style: dashed;
  background: var(--fehler-grund);
}

.fehlertext {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--fs-klein);
  font-weight: 600;
  line-height: 1.4;
}

.fehlertext::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 1.4em;
  height: 1.4em;
  background: var(--tinte);
  color: var(--weiss);
  font-family: var(--schrift-mono);
  font-weight: 500;
}

.fehlertext:empty {
  display: none;
}

/* Checkbox im Brutalist-Look (natives Element, nur umgestaltet) */
.haken {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  font-size: var(--fs-klein);
}

.haken input {
  appearance: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  border: var(--rahmen) solid var(--tinte);
  background: var(--weiss);
}

.haken input::after {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: var(--weiss);
}

.haken input:checked {
  background: var(--blau);
}

.haken input:checked::after {
  background: var(--weiss);
}

.haken input:hover {
  box-shadow: 3px 3px 0 0 var(--tinte);
}

.haken input[aria-invalid="true"] {
  border-style: dashed;
  background: var(--fehler-grund);
}

.haken a {
  text-decoration-color: var(--blau);
}

/* --------------------------------------------------------------------------
   Auswahl-Kacheln (Radiobuttons als Karten) – für Leistung, Stylist:in, Datum, Zeit
   -------------------------------------------------------------------------- */
.wahl-gruppe {
  display: grid;
  gap: var(--s-3);
  padding: 0;
  border: 0;
}

.wahl-gruppe--2 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.wahl-gruppe--zeiten {
  grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
}

.wahl {
  position: relative;
  display: grid;
  gap: var(--s-1);
  min-height: 3.25rem;
  padding: var(--s-3) var(--s-4);
  border: var(--rahmen) solid var(--tinte);
  background: var(--papier);
  transition: background-color var(--dauer-kurz), color var(--dauer-kurz), transform var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz) var(--kurve);
}

/* das echte Eingabefeld bleibt bedienbar, liegt aber unsichtbar über der Kachel */
.wahl input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.wahl__titel {
  font-weight: 650;
  line-height: 1.25;
}

.wahl__info {
  font-family: var(--schrift-mono);
  font-size: var(--fs-mini);
  letter-spacing: 0.02em;
  color: var(--tinte-2);
}

.wahl:hover {
  box-shadow: 4px 4px 0 0 var(--tinte);
  transform: translate(-2px, -2px);
}

.wahl:has(input:checked) {
  background: var(--tinte);
  color: var(--weiss);
  box-shadow: 4px 4px 0 0 var(--blau);
  transform: translate(-2px, -2px);
}

.wahl:has(input:checked) .wahl__info {
  color: var(--papier-matt);
}

.wahl:has(input:focus-visible) {
  outline: var(--fokus-breite) solid var(--blau);
  outline-offset: 3px;
}

.wahl:has(input:disabled) {
  border-style: dashed;
  background:
    repeating-linear-gradient(-45deg, transparent 0 6px, var(--papier-2) 6px 12px),
    var(--papier);
  color: var(--tinte-2);
  box-shadow: none;
  transform: none;
}

.wahl:has(input:disabled) .wahl__titel {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* „Spezialgebiet“-Marke an Stylist:innen-Kacheln */
.wahl__marke {
  justify-self: start;
  margin-top: var(--s-1);
  padding: 0 var(--s-1);
  background: var(--blau);
  color: var(--weiss);
  font-family: var(--schrift-mono);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: var(--lw-mono);
  text-transform: uppercase;
}

.wahl--zeit {
  place-items: center;
  padding: var(--s-2);
  font-family: var(--schrift-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.wahl--tag {
  place-items: center;
  text-align: center;
  padding: var(--s-2) var(--s-1);
}

.wahl--tag .wahl__titel {
  font-family: var(--schrift-display);
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: lining-nums;
}

/* --------------------------------------------------------------------------
   Buchungs-Assistent
   -------------------------------------------------------------------------- */
.assistent {
  display: grid;
  gap: var(--s-6);
}

.schritt {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.schritt + .schritt {
  padding-top: var(--s-7);
  border-top: var(--rahmen) solid var(--tinte);
}

.assistent--aktiv .schritt + .schritt {
  padding-top: 0;
  border-top: 0;
}

.schritt__titel {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: 0;
  font-family: var(--schrift-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.schritt__nr {
  font-family: var(--schrift-mono);
  font-size: var(--fs-klein);
  font-weight: 500;
  padding: 0 var(--s-1);
  background: var(--blau);
  color: var(--weiss);
}

.schritt:focus {
  outline: none;
}

.schritt:focus-visible .schritt__titel {
  outline: var(--fokus-breite) solid var(--blau);
  outline-offset: 4px;
}

.unterschritt {
  display: grid;
  gap: var(--s-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.unterschritt legend {
  padding: 0;
  margin-bottom: var(--s-3);
}

.assistent__navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: var(--rahmen) solid var(--tinte);
}

.assistent__navigation .knopf:last-child {
  margin-left: auto;
}

/* Fortschritt: vertikal auf Desktop (wie die Seitenleiste), kompakt auf Mobil */
.fortschritt {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: var(--rahmen) solid var(--tinte);
  counter-reset: schritt;
}

.fortschritt li {
  display: grid;
  gap: 0.1rem;
  padding: var(--s-2);
  border-left: var(--rahmen-duenn) solid var(--tinte);
  font-family: var(--schrift-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.25;
}

.fortschritt li:first-child {
  border-left: 0;
}

.fortschritt__nr {
  font-family: var(--schrift-display);
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}

.fortschritt__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.fortschritt li[data-status="erledigt"] {
  background: var(--papier-2);
}

.fortschritt li[aria-current="step"] {
  background: var(--tinte);
  color: var(--weiss);
  box-shadow: inset 0 -6px 0 0 var(--blau);
}

@media (max-width: 29.99rem) {
  .fortschritt__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .fortschritt li {
    place-items: center;
  }
}

@media (min-width: 64rem) {
  .fortschritt {
    grid-template-columns: 1fr;
  }

  .fortschritt li {
    grid-template-columns: 3rem 1fr;
    align-items: baseline;
    padding: var(--s-3);
    border-left: 0;
    border-top: var(--rahmen-duenn) solid var(--tinte);
    font-size: var(--fs-mini);
  }

  .fortschritt li:first-child {
    border-top: 0;
  }

  .fortschritt li[aria-current="step"] {
    box-shadow: inset 6px 0 0 0 var(--blau);
  }
}

/* Fehlerübersicht oben im Schritt */
.fehlerliste {
  padding: var(--s-4) var(--s-5);
  border: var(--rahmen) solid var(--tinte);
  background: var(--tinte);
  color: var(--weiss);
  box-shadow: var(--schatten-blau);
  --fokus-farbe: var(--weiss);
}

.fehlerliste__titel {
  font-family: var(--schrift-display);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.fehlerliste ul {
  display: grid;
  gap: var(--s-1);
  margin-top: var(--s-2);
}

.fehlerliste a {
  text-decoration-color: var(--blau);
  text-decoration-thickness: 3px;
}

.fehlerliste a:hover {
  background: var(--weiss);
  color: var(--tinte);
}

/* Übersicht / Zusammenfassung */
.uebersicht {
  display: grid;
  border: var(--rahmen) solid var(--tinte);
  background: var(--weiss);
}

.uebersicht__zeile {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-3) var(--s-4);
  border-top: var(--rahmen-duenn) solid var(--tinte);
}

.uebersicht__zeile:first-child {
  border-top: 0;
}

.uebersicht dt {
  font-family: var(--schrift-mono);
  font-size: var(--fs-mini);
  font-weight: 500;
  letter-spacing: var(--lw-mono);
  text-transform: uppercase;
}

.uebersicht dd {
  font-weight: 600;
}

.uebersicht__aendern {
  padding: var(--s-1) var(--s-2);
  border: var(--rahmen-duenn) solid var(--tinte);
  background: var(--papier);
  font-family: var(--schrift-mono);
  font-size: var(--fs-mini);
  text-transform: uppercase;
}

.uebersicht__aendern:hover {
  background: var(--tinte);
  color: var(--weiss);
}

.uebersicht__zeile--summe {
  background: var(--blau);
  color: var(--weiss);
}

/* Demo-Bestätigung */
.bestaetigung {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  border: var(--rahmen) solid var(--tinte);
  box-shadow: var(--schatten-gross);
}

.bestaetigung:focus {
  outline: none;
}

.bestaetigung:focus-visible {
  outline: var(--fokus-breite) solid var(--weiss);
  outline-offset: -8px;
}

.bestaetigung__stempel {
  justify-self: start;
  padding: var(--s-1) var(--s-3);
  border: var(--rahmen) solid var(--weiss);
  font-family: var(--schrift-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--lw-mono);
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.bestaetigung__titel {
  font-size: var(--fs-gross);
  text-transform: uppercase;
  line-height: 0.95;
}

.bestaetigung__code {
  font-family: var(--schrift-mono);
  font-weight: 500;
  font-size: var(--fs-lead);
}

.vormerkung {
  padding: var(--s-2) var(--s-3);
  border-left: var(--rahmen-dick) solid var(--blau);
  background: var(--weiss);
  font-size: var(--fs-klein);
}

/* --------------------------------------------------------------------------
   Kontakt: Status, Öffnungszeiten, Karte, Gutschein
   -------------------------------------------------------------------------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: var(--rahmen) solid var(--tinte);
  font-family: var(--schrift-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--lw-mono);
  text-transform: uppercase;
}

.status::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  background: var(--tinte-2);
}

.status--offen {
  background: var(--blau);
  color: var(--weiss);
}

.status--offen::before {
  background: var(--weiss);
}

.zeiten {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.zeiten th,
.zeiten td {
  padding: var(--s-2) 0;
  border-bottom: var(--rahmen-duenn) solid var(--tinte);
  text-align: left;
  vertical-align: baseline;
}

.zeiten th {
  font-weight: 650;
}

.zeiten td {
  font-family: var(--schrift-mono);
  font-weight: 500;
  text-align: right;
}

.zeiten tr.ist-heute th,
.zeiten tr.ist-heute td {
  box-shadow: inset 0 -4px 0 0 var(--blau);
}

.karte {
  border: var(--rahmen) solid var(--tinte);
  box-shadow: var(--schatten-gross);
  background: var(--papier);
}

.karte svg {
  width: 100%;
  height: auto;
}

/* Schmale Bildschirme: Ausschnitt um den Salon statt winziger Gesamtkarte (preserveAspectRatio="… slice") */
@media (max-width: 39.99rem) {
  .karte svg {
    height: 19rem;
  }
}

.gutschein {
  position: relative;
  display: grid;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-5) var(--s-5);
  border: var(--rahmen) dashed var(--tinte);
  background: var(--weiss);
}

.gutschein__schere {
  position: absolute;
  top: calc(-0.75rem - 1.5px);
  left: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-2);
  background: var(--papier);
  font-family: var(--schrift-mono);
  font-size: var(--fs-mini);
  letter-spacing: var(--lw-mono);
  text-transform: uppercase;
  line-height: 1.5rem;
}

.gutschein__schere .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.gutschein__betrag {
  font-family: var(--schrift-display);
  font-size: var(--fs-gross);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

@media (min-width: 40rem) {
  .gutschein {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    align-items: center;
    padding: var(--s-6);
  }
}

/* --------------------------------------------------------------------------
   Zitate (Kundenstimmen – nur Initialen, kein Foto)
   -------------------------------------------------------------------------- */
.zitat {
  display: grid;
  gap: var(--s-4);
}

.zitat blockquote p {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: var(--fs-zitat);
  line-height: 1.08;
  hyphens: manual;
}

.zitat figcaption {
  font-family: var(--schrift-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--lw-mono);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Scroll-driven Animations der Komponenten (mit Fallback: statisch)
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Bilder werden von oben nach unten „aufgeschnitten“ */
    .abb--schnitt .abb__rahmen {
      animation: aufschneiden linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 35%;
    }

    /* Lookbook: Karten wachsen in der Mitte des Scrollers auf volle Größe */
    .look__link {
      animation: look-skala linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% cover 40%;
    }
  }
}

@keyframes aufschneiden {
  /* negative Ränder, damit der harte Schatten nicht mit abgeschnitten wird */
  from {
    clip-path: inset(-4px -24px 72% -4px);
  }
  to {
    clip-path: inset(-4px -24px -24px -4px);
  }
}

@keyframes look-skala {
  from {
    scale: 0.9;
  }
  to {
    scale: 1;
  }
}