/* Haar- und Nagelstudio Anita Freund, Tillmitsch
   Apfelgrün ihrer Salonwand, Anthrazit, helle Seite. Systemschriften, eine Datei.
   Signatur „Strähne und Lack“: Strähnen unter dem Haar-Wort, Lackstrich hinter dem Nagel-Wort. */

:root {
  --gruen: #7fbf2a;       /* Salonwand: Kopfband, Rufband, Lack */
  --gruen-tief: #3a6b10;  /* dasselbe Grün, abgedunkelt für Links */
  --tinte: #1b2114;
  --grau: #575d50;
  --grau-hell: #8b9082;
  --linie: #d3d6ca;
  --flaeche: #e9eae3;
  --seite: #f7f7f3;
  --weiss: #fff;

  --titel: "Avenir Next", "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Stufung 1,333 */
  --s1: 1.333rem;
  --s2: 1.777rem;
  --s3: 2.369rem;
  --s6: 5.61rem;

  --rand: 20px;
  --luft: 48px;
}
@media (min-width: 768px)  { :root { --rand: 32px; } }
@media (min-width: 1024px) { :root { --luft: 80px; } }
@media (min-width: 1120px) { :root { --rand: 48px; } }
@media (min-width: 1440px) { :root { --rand: 64px; } }
@media (min-width: 1920px) { :root { --rand: 96px; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 106.25%; /* 17px */
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 16px;
}
@media (min-width: 768px) { html { font-size: 112.5%; } } /* 18px */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--seite);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--titel);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}
p, figure, ul, table { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--gruen-tief); outline-offset: 3px; }

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

.sprung {
  position: absolute;
  left: 8px; top: -96px;
  z-index: 5;
  padding: 12px 16px;
  background: var(--tinte);
  color: var(--weiss);
}
.sprung:focus { top: 8px; }

/* ---------- Links: gerader Strich, beim Überfahren eine Welle (Dauerwelle) ---------- */
.link {
  color: var(--gruen-tief);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.24em;
  overflow-wrap: anywhere;
}
@media (hover: hover) {
  .link:hover { text-decoration-style: wavy; color: var(--tinte); }
}
.link:focus-visible { text-decoration-style: wavy; color: var(--tinte); }

/* ---------- Rufknöpfe: bewegen sich nie, nur die Farbe wechselt sofort ---------- */
.ruf {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 8px 16px;
  border-radius: 4px;
  background: var(--tinte);
  color: var(--weiss);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.ruf__wort { font-weight: 400; }
@media (hover: hover) {
  .ruf:hover { background: var(--gruen-tief); }
  .ruf--band:hover { background: var(--weiss); color: var(--tinte); }
}
.ruf:focus-visible { background: var(--gruen-tief); }
.ruf--band:focus-visible { background: var(--weiss); color: var(--tinte); outline-color: var(--tinte); }

/* ---------- Kopf ---------- */
.kopf__band {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px var(--rand);
  background: var(--gruen);
  color: var(--tinte);
}
.marke {
  display: flex;
  flex-direction: column;
  margin-right: auto;
  padding: 4px 0;
  line-height: 1.15;
  text-decoration: none;
}
.marke:focus-visible { outline-color: var(--tinte); }
.marke__art { font-size: 14px; font-weight: 600; white-space: nowrap; }
.marke__name { font-family: var(--titel); font-size: var(--s1); font-weight: 600; }

.wege { display: none; }
@media (min-width: 900px) {
  .wege { display: flex; gap: 32px; margin-right: 8px; }
  .wege a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 0.09em;
    text-underline-offset: 0.3em;
  }
  .wege a:focus-visible { outline-color: var(--tinte); text-decoration-color: currentColor; text-decoration-style: wavy; }
}
@media (min-width: 900px) and (hover: hover) {
  .wege a:hover { text-decoration-color: currentColor; text-decoration-style: wavy; }
}

@media (min-width: 600px) { .kopf__band { gap: 24px; } }
.ruf--kopf { padding: 8px 12px; }
.ruf--kopf .ruf__nr { display: none; }
@media (min-width: 360px) {
  .ruf--kopf .ruf__wort { display: none; }
  .ruf--kopf .ruf__nr { display: inline; }
}
@media (min-width: 600px) {
  .ruf--kopf { padding: 8px 16px; }
  .ruf--kopf .ruf__wort { display: inline; }
}

.eckdaten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 32px;
  padding: 12px var(--rand);
  border-bottom: 1px solid var(--linie);
  line-height: 1.45;
}

/* ---------- Signatur: Lack ---------- */
.lack {
  position: relative;
  z-index: 0;
  display: inline-block;
  margin: 0 -0.06em;
  padding: 0 0.22em;
  white-space: nowrap;
}
.lack::before { /* der aufgepinselte Strich */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0.08em 0 0.02em 0;
  background: var(--gruen);
  border-radius: 0.5em 0.18em 0.45em 0.22em / 0.6em 0.2em 0.55em 0.26em;
}
.lack::after { /* der Glanz: ein weicher heller Bogen oben im Lack, wie Licht auf Gel-Lack */
  content: "";
  position: absolute;
  z-index: -1;
  left: 0.28em;
  right: 0.28em;
  top: 0.15em;
  height: 0.24em;
  border-radius: 0.24em 0.24em 50% 50% / 0.2em 0.2em 100% 100%;
  background: var(--weiss);
  opacity: 0.3;
}

/* ---------- Signatur: Strähne ---------- */
.straehne {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.straehne::before,
.straehne::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 0 solid var(--tinte);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.straehne::before {
  left: -0.05em; right: -0.04em; bottom: -0.1em;
  height: 0.3em;
  border-bottom-width: max(2px, 0.07em);
  transform: rotate(-1.5deg);
}
.straehne::after {
  left: 0.24em; right: -0.42em; bottom: -0.17em;
  height: 0.26em;
  border-bottom-width: max(1.5px, 0.04em);
  border-color: var(--gruen-tief);
  transform: rotate(1.2deg);
}

/* ---------- Auftakt ---------- */
.auftakt {
  display: grid;
  gap: 16px;
  padding: 24px var(--rand) 32px;
}
.auftakt__h {
  font-size: clamp(1.85rem, 0.6rem + 5vw, var(--s6));
  line-height: 1.2;
  letter-spacing: -0.015em;
  padding-bottom: 0.1em;
}
.auftakt__text {
  display: grid;
  gap: 16px;
  align-content: start;
}
.auftakt__satz { max-width: 30ch; line-height: 1.45; }
.auftakt__ruf { display: grid; gap: 8px; justify-items: start; }
.auftakt__foto { width: 100%; margin-top: 8px; }
.auftakt__foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 56%;
  border-radius: 2px;
  background: var(--flaeche);
}
figcaption { margin-top: 8px; color: var(--grau); }
.auftakt__foto figcaption { display: none; }

@media (min-width: 600px) {
  .auftakt { gap: 24px; padding-top: 32px; padding-bottom: var(--luft); }
  .auftakt__satz { font-size: var(--s1); line-height: 1.4; }
  .auftakt__foto { margin-top: 0; }
  .auftakt__foto figcaption { display: block; }
}
@media (min-width: 900px) {
  .auftakt {
    grid-template-columns: minmax(18rem, 2fr) minmax(0, 3fr);
    gap: 48px;
    padding-top: 64px;
  }
  .auftakt__h { grid-column: 1 / -1; line-height: 1.15; }
  /* Satz oben, Rufknopf unten auf der Linie der Foto-Unterkante */
  .auftakt__text { align-content: space-between; padding-bottom: calc(1.6rem + 8px); }
  .auftakt__foto { justify-self: end; max-width: 46rem; }
}
@media (min-width: 1280px) {
  .auftakt__satz { max-width: 24ch; font-size: var(--s2); line-height: 1.3; }
}
@media (min-width: 1600px) {
  /* breite Fenster: der Satz nutzt die Spalte, Knopf und Nagel-Nummer stehen in einer Zeile */
  .auftakt__satz { max-width: 34ch; }
  .auftakt__ruf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; }
}

/* ---------- Abschnitte ---------- */
.leistungen,
.naegel,
.zeiten {
  padding: var(--luft) var(--rand);
  border-top: 1px solid var(--linie);
}
h2 {
  font-size: clamp(var(--s2), 1rem + 2.2vw, var(--s3));
  letter-spacing: -0.01em;
  padding-bottom: 0.12em;
}
.vorzeile {
  margin-bottom: 12px;
  color: var(--grau);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.einleitung { max-width: 68ch; margin-top: 16px; font-size: var(--s1); line-height: 1.4; }

/* ---------- Fotoband: wischen, scroll-snap, Pfeile aus band.js ---------- */
.schau { margin-top: 32px; }
.schau__band {
  display: flex;
  gap: 16px;
  margin: 0 calc(-1 * var(--rand));
  padding: 4px var(--rand) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--rand);
  scrollbar-width: thin;
  scrollbar-color: var(--grau-hell) transparent;
}
.schau__band:focus-visible { outline-offset: -3px; }
.dia {
  flex: 0 0 auto;
  width: clamp(15rem, 23vw, 22rem);
  scroll-snap-align: start;
}
.dia img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 2px;
  background: var(--flaeche);
}
.dia figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 12px;
  color: var(--tinte);
}
.dia .lack { font-family: var(--titel); font-size: var(--s1); font-weight: 600; line-height: 1.35; }
.hinweis { color: var(--grau); font-size: 14px; letter-spacing: 0.04em; }

.schau__nav { display: flex; gap: 8px; margin-top: 8px; }
.schau__nav[hidden] { display: none; }
.schau__nav button {
  min-width: 48px;
  min-height: 48px;
  padding: 8px 16px;
  border: 2px solid var(--tinte);
  border-radius: 4px;
  background: transparent;
  color: var(--tinte);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
@media (hover: hover) {
  .schau__nav button:hover { background: var(--tinte); color: var(--weiss); }
}
.schau__nav button:focus-visible { background: var(--tinte); color: var(--weiss); }

/* ---------- Nails by Arnold ---------- */
.naegel { display: grid; gap: 8px; }
.naegel__ruf { margin-top: 16px; }
.naegel .schau { min-width: 0; }
.schau__band--naegel { --hoehe: clamp(10.5rem, 20vw, 15rem); }
.dia--quer { width: calc(var(--hoehe) * 1.509); }
.dia--hoch { width: calc(var(--hoehe) * 0.6656); }
.dia--quer img { aspect-ratio: 400 / 265; }
.dia--hoch img { aspect-ratio: 400 / 601; }
.schau__band--naegel figcaption { margin-top: 8px; color: var(--grau); }

.muster {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 24px 32px;
  margin-top: 24px;
}
.muster li { display: grid; gap: 8px; font-weight: 600; }
.nagel { /* ein Mustertip, Spitze oben */
  position: relative;
  display: block;
  overflow: hidden;
  width: 2.5rem;
  height: 3.5rem;
  border: 2px solid var(--tinte);
  border-radius: 50% 50% 0.3rem 0.3rem / 36% 36% 0.3rem 0.3rem;
  background: var(--flaeche);
}
.nagel::before { /* der Lack */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gruen);
}
.nagel::after { /* der Glanz */
  content: "";
  position: absolute;
  left: 20%; top: 18%;
  width: 12%; height: 50%;
  border-radius: 50%;
  background: var(--weiss);
  opacity: 0.6;
}
.nagel--bunt::before { background: linear-gradient(118deg, var(--gruen) 0 36%, var(--gruen-tief) 36% 68%, var(--tinte) 68% 100%); }
.nagel--french { background: var(--linie); }
.nagel--french::before { background: radial-gradient(130% 76% at 50% 100%, transparent 0 99%, var(--weiss) 100%); }
.nagel--natur::before { opacity: 0.25; }

@media (min-width: 480px) {
  .muster { grid-template-columns: repeat(4, max-content); }
}
@media (min-width: 900px) {
  .naegel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 48px;
    align-items: start;
  }
  .naegel .schau { margin-top: 0; }
  .naegel .schau__band { margin-left: 0; padding-left: 0; scroll-padding-left: 0; }
}

/* ---------- Zeiten und Kontakt ---------- */
.zeiten__raster { display: grid; gap: 32px; margin-top: 32px; }
.woche { width: 100%; max-width: 34rem; border-collapse: collapse; }
.woche th,
.woche td {
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: baseline;
}
.woche tr:first-child th,
.woche tr:first-child td { border-top: 1px solid var(--linie); }
.woche th { padding-right: 12px; font-weight: 600; }
.woche td { text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; }
.woche .zu th,
.woche .zu td { color: var(--grau); font-weight: 400; }
.heute {
  margin-left: 8px;
  color: var(--tinte);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}

.stelle h3 { margin-bottom: 8px; font-size: var(--s1); }
/* Tippziele: Nummern und Adressen, die allein stehen, sind mindestens 44 px hoch */
.stelle .link,
.auftakt__ruf .link,
.naegel__ruf .link { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 768px) {
  .zeiten__raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 48px; }
  .woche { grid-row: span 3; }
}
@media (min-width: 1024px) {
  /* Tabelle links über zwei Zeilen; rechts oben die zwei Studios, darunter die Adresse */
  .zeiten__raster { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); row-gap: 48px; }
  .woche { grid-row: span 2; }
}

/* ---------- Rufband ---------- */
.rufband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: 48px var(--rand);
  background: var(--gruen);
  color: var(--tinte);
}
.rufband h2 { margin-bottom: 4px; }
.rufband__text p { max-width: 68ch; }
.rufband__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Fuß ---------- */
.fuss { padding: 48px var(--rand) 32px; }
.fuss__spalten { display: grid; gap: 32px 48px; }
.fuss__marke { margin-bottom: 12px; font-family: var(--titel); font-size: var(--s1); font-weight: 600; line-height: 1.2; }
.fuss__titel {
  margin-bottom: 8px;
  color: var(--grau);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fuss__spalte p { white-space: nowrap; }
.fuss__spalte .link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 400; }
.fuss__recht {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
  color: var(--grau);
  font-size: 14px;
}
.fuss__recht .link { font-weight: 400; }
@media (min-width: 600px) {
  .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fuss__spalten { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Bewegung: nur ohne „Bewegung reduzieren“, sonst steht der Endzustand ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Ladeablauf im Auftakt, zusammen 1,6 s: Strähnen ziehen, Lack aufpinseln, Glanz */
  .auftakt__h .straehne::before { animation: ziehen 650ms cubic-bezier(0.3, 0.6, 0.3, 1) 150ms both; }
  .auftakt__h .straehne::after  { animation: ziehen 700ms cubic-bezier(0.3, 0.6, 0.3, 1) 350ms both; }
  .auftakt__h .lack::before     { animation: lackieren 700ms cubic-bezier(0.45, 0.05, 0.2, 1) 450ms both; }
  .auftakt__h .lack::after      { animation: glanz 450ms ease-out 1150ms both; }

  /* Tastatur-Zwilling: Fokus auf dem Fotoband lackiert die Etiketten der Reihe nach neu */
  .schau__band:focus-visible .lack::before { animation: lackieren 600ms cubic-bezier(0.45, 0.05, 0.2, 1) both; }
  .schau__band:focus-visible .lack::after  { animation: glanz 400ms ease-out 500ms both; }
  .schau__band:focus-visible .dia:nth-child(2) .lack::before { animation-delay: 90ms; }
  .schau__band:focus-visible .dia:nth-child(3) .lack::before { animation-delay: 180ms; }
  .schau__band:focus-visible .dia:nth-child(4) .lack::before { animation-delay: 270ms; }
  .schau__band:focus-visible .dia:nth-child(5) .lack::before { animation-delay: 360ms; }
  .schau__band:focus-visible .dia:nth-child(6) .lack::before { animation-delay: 450ms; }

  /* Tastatur-Zwilling: Fokus im Nagel-Text lackiert die vier Musternägel */
  .naegel__text:focus-within .nagel::before { animation: auftragen 520ms cubic-bezier(0.4, 0.1, 0.2, 1) both; }
  .naegel__text:focus-within .nagel::after  { animation: glanz-nagel 300ms ease-out 900ms both; }
  .naegel__text:focus-within li:nth-child(2) .nagel::before { animation-delay: 140ms; }
  .naegel__text:focus-within li:nth-child(3) .nagel::before { animation-delay: 280ms; }
  .naegel__text:focus-within li:nth-child(4) .nagel::before { animation-delay: 420ms; }

  @keyframes ziehen {
    from { clip-path: inset(-60% 100% -60% 0); }
    to   { clip-path: inset(-60% 0 -60% 0); }
  }
  @keyframes lackieren {
    from { clip-path: inset(0 100% 0 0 round 0 0.5em 0.5em 0); }
    to   { clip-path: inset(0 0 0 0 round 0 0 0 0); }
  }
  @keyframes glanz {
    from { opacity: 0; transform: translateX(-0.4em); }
    to   { opacity: 0.3; transform: translateX(0); }
  }
  @keyframes auftragen {
    from { clip-path: inset(100% 0 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
  @keyframes glanz-nagel {
    from { opacity: 0; }
    to   { opacity: 0.6; }
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Foto überfahren: der Lack des Etiketts darunter wird neu aufgetragen. Nichts liegt auf dem Foto. */
  .dia:hover .lack::before { animation: lackieren 600ms cubic-bezier(0.45, 0.05, 0.2, 1) both; }
  .dia:hover .lack::after  { animation: glanz 400ms ease-out 500ms both; }

  /* Nagel-Text überfahren: die vier Musternägel werden nacheinander lackiert */
  .naegel__text:hover .nagel::before { animation: auftragen 520ms cubic-bezier(0.4, 0.1, 0.2, 1) both; }
  .naegel__text:hover .nagel::after  { animation: glanz-nagel 300ms ease-out 900ms both; }
  .naegel__text:hover li:nth-child(2) .nagel::before { animation-delay: 140ms; }
  .naegel__text:hover li:nth-child(3) .nagel::before { animation-delay: 280ms; }
  .naegel__text:hover li:nth-child(4) .nagel::before { animation-delay: 420ms; }
}