/* =========================================================================
   NOVA HAIR STUDIO — Beispielkonzept

   Gestalterische Leitidee: das editorialste der fuenf Muster. Es soll sich
   eher wie eine Modestrecke lesen als wie eine Dienstleistungsseite.

   Was das konkret heisst:
     - Grosse Fotografie, wenig Flaeche fuer alles andere.
     - Asymmetrie statt mittiger Bloecke: der Text sitzt in einer schmalen
       Spalte links, das Bild laeuft rechts bis an den Fensterrand.
     - KEINE Karten. Die Leistungen sind eine typografische Preisliste mit
       Haarlinien — so, wie sie auch gedruckt im Salon liegen wuerde.
     - Das Lookbook ist bewusst ein ungleiches Raster. Vier gleich grosse
       Kacheln waeren genau der Baukasten-Eindruck, den wir vermeiden.

   Rundungen: weich, aber nur an Bildern. Flaechen und Linien bleiben gerade
   — die Weichheit kommt aus dem Weissraum, nicht aus Eckenradien.

   UEBERARBEITUNG (zweiter Durchgang):

     Massstab.  Spalte 1240px, H1 bis 68px, H2 bis 48px, Fliesstext bis 18px,
                Knoepfe 52px, Preise bis 30px. Weissraum bleibt, aber die
                Elemente darin sind gross genug, um ihn zu tragen.

     Preisliste. Deutlich hoehere Zeilen, Preise als typografischer Akzent in
                der Serife. Wirkte vorher wie eine Verwaltungstabelle.

     Rhythmus.  Vorher lag fast alles auf demselben Off-White. Jetzt wechseln
                Off-White, Weiss und einmal helles Taupe — dezente Kapitel,
                keine bunten Baender.

     Abgrenzung zu Morgenwerk. Beide sind editorial, aber NOVA bleibt kuehler
                und luftiger: hellere Flaechen, mehr Weissraum, Playfair
                statt Fraunces, Split-Buehne statt vollflaechigem Foto.
   ========================================================================= */

@font-face {
  font-family: "Playfair Display";
  src: url("../schrift/playfair-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../../assets/fonts/nunito-sans-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  --grund:   #f6f2ec;
  --tinte:   #24201d;
  --tinte-2: #5b544d;
  --akzent:  #a37d64;
  --akzent-t:#7c5a44;   /* dunkler fuer Text auf hellem Grund */
  --zweit:   #d9cec3;
  --karte:   #ffffff;
  --linie:   #ddd4c9;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Nunito Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --rand: clamp(1.5rem, 0.8rem + 3vw, 4.5rem);
  --spalte: 1240px;

  --luft-s:  clamp(0.75rem, 0.6rem + 0.6vw, 1.1rem);
  --luft-m:  clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --luft-l:  clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --luft-xl: clamp(3.5rem, 2.3rem + 4.8vw, 6.5rem);
}

body {
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);   /* 17 -> 18 */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.mitte {
  width: 100%; max-width: var(--spalte);
  margin-inline: auto; padding-inline: var(--rand);
}

/* Zeilenabstand ausdruecklich setzen: ohne diese Zeile erben die
   Ueberschriften die 1,75 des Fliesstextes, und eine 48px-Serife stand dann
   mit riesigen Luecken zwischen den Zeilen. */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent-t); }
a:focus-visible, span.knopf:focus-visible {
  outline: 2px solid var(--akzent-t); outline-offset: 3px;
}

/* Der Vorspann jeder Sektion. Versalien, weit gesperrt — das einzige
   wiederkehrende Signal, ansonsten baut jede Sektion anders auf. */
.rubrik {
  font-family: var(--sans);
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--akzent-t);
  margin: 0 0 var(--luft-m);
}

/* ---------- Knoepfe ----------
   Der Hauptknopf ist gefuellt, alles andere ist eine Linie. Auf einer Seite
   mit einem einzigen Ziel — Termin — darf nur eine Sache wie ein Knopf
   aussehen. */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0.85rem 2.1rem;
  background: var(--tinte); color: var(--grund);
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: 0.04em; text-decoration: none; border: 1px solid var(--tinte);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.knopf:hover { background: var(--akzent); border-color: var(--akzent); color: #fff; }

.knopf--linie {
  background: transparent; color: var(--tinte); border-color: var(--linie);
}
.knopf--linie:hover { background: transparent; border-color: var(--tinte); color: var(--tinte); }

/* Telefonnummer und Route sind auf einem Beispielkonzept ohne Funktion.
   Sie sehen deshalb nicht aus wie Knoepfe, sondern wie Text. */
.still {
  display: inline-flex; align-items: center; min-height: 54px;
  font-family: var(--sans); font-size: 1.0625rem; font-weight: 600;
  color: var(--tinte-2); letter-spacing: 0.02em; cursor: default;
}

/* ---------- Kopf ---------- */
.kopf {
  border-bottom: 1px solid var(--linie);
  background: var(--grund);
}
.kopf__innen {
  display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem);
  padding-block: 1.85rem;
}
.kopf__marke { margin-right: auto; text-decoration: none; color: inherit; display: block; }
.kopf__wort {
  font-family: var(--serif); font-size: 2.125rem; font-weight: 600;
  letter-spacing: 0.32em; line-height: 1; display: block;
}
.kopf__unter {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--tinte-2);
  margin-top: 0.5rem; display: block;
}
.kopf__nav { display: none; }
.kopf__nav ul { display: flex; gap: clamp(1.75rem, 3vw, 2.75rem); list-style: none; margin: 0; padding: 0; }
.kopf__nav a {
  color: var(--tinte); text-decoration: none; font-size: 0.9375rem;
  letter-spacing: 0.06em; padding-bottom: 0.25rem;
  border-bottom: 1px solid transparent;
}
.kopf__nav a:hover { border-bottom-color: var(--akzent); }
.kopf__knopf { display: none; }
@media (min-width: 60rem) {
  .kopf__nav { display: block; }
  .kopf__knopf { display: inline-flex; min-height: 48px; padding: 0.6rem 1.6rem; font-size: 1rem; }
}

/* ---------- Buehne ----------
   Asymmetrisch: Text in einer schmalen Spalte links, Bild rechts bis an den
   Fensterrand. Auf schmalen Schirmen kippt es in die natuerliche Reihenfolge
   Bild ueber Text — dort ist Asymmetrie ohnehin nicht sichtbar. */
.buehne { padding-block: 0 0 3.5rem; }
.buehne__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.buehne__text { padding: 2.5rem var(--rand) 0; }
.buehne h1 {
  font-size: clamp(2.25rem, 1.45rem + 3.6vw, 4.25rem);   /* 36 -> 68 */
  line-height: 1.08; letter-spacing: -0.015em;
  margin: 0 0 var(--luft-m);
}
.buehne__lead {
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  color: var(--tinte-2); max-width: 36ch; margin-bottom: var(--luft-m);
}
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.75rem; }
.buehne__info {
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--tinte-2); margin: 0;
}

@media (min-width: 62rem) {
  .buehne {
    display: grid;
    /* Bild laeuft rechts aus dem Satzspiegel heraus bis zur Fensterkante */
    grid-template-columns: minmax(0, 1fr) 56vw;
    align-items: center;
    gap: clamp(2rem, 4vw, 5rem);
    padding-block: 0;
    min-height: 78vh;
  }
  .buehne__text {
    padding: 5rem 0 5rem var(--rand);
    max-width: calc(var(--spalte) * 0.44);
    margin-left: auto;
  }
  .buehne__bild img { aspect-ratio: auto; height: 78vh; min-height: 34rem; }
}

/* ---------- Leistungen: Preisliste, keine Karten ---------- */
.preise { padding-block: clamp(3rem, 2rem + 4vw, 5rem); background: var(--karte); }
.preise__kopf { max-width: 46ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.preise__kopf h2 {
  font-size: clamp(1.875rem, 1.35rem + 2.6vw, 3rem);   /* 30 -> 48 */
  line-height: 1.12; margin-bottom: var(--luft-s);
}
.preise__kopf p { color: var(--tinte-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }

.liste { border-top: 1px solid var(--linie); }
.liste__zeile {
  display: grid; gap: 0.5rem clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
  border-bottom: 1px solid var(--linie);
}
.liste__name {
  font-family: var(--serif); font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  line-height: 1.2;
}
.liste__text { color: var(--tinte-2); margin: 0; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); }
.liste__preis {
  font-family: var(--serif); font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  color: var(--akzent-t); white-space: nowrap;
}
@media (min-width: 48rem) {
  .liste__zeile {
    grid-template-columns: minmax(13rem, 1fr) minmax(0, 1.9fr) auto;
    align-items: baseline;
  }
  .liste__preis { text-align: right; }
}
.preise__fuss {
  margin-top: var(--luft-m); font-size: 1rem; color: var(--tinte-2);
}

/* ---------- Lookbook: bewusst ungleiches Raster ---------- */
.looks { padding-block: var(--luft-xl) var(--luft-xl); background: var(--grund); }
.looks__kopf { max-width: 42ch; margin-bottom: var(--luft-l); }
.looks__kopf h2 { font-size: clamp(1.875rem, 1.35rem + 2.6vw, 3rem); margin-bottom: var(--luft-s); }
.looks__kopf p { color: var(--tinte-2); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }

.raster { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.raster img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.raster figure { margin: 0; }
.raster figure:nth-child(1) { aspect-ratio: 2 / 3; }
.raster figure:nth-child(2) { aspect-ratio: 4 / 3; }
.raster figure:nth-child(3) { aspect-ratio: 1 / 1; }
.raster figure:nth-child(4) { aspect-ratio: 4 / 3; }

@media (min-width: 48rem) {
  /* Vier Kacheln, vier verschiedene Groessen. Die hohe links traegt das
     Raster, die drei rechts sind ihr untergeordnet. */
  .raster {
    grid-template-columns: 1.3fr 1fr 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    height: clamp(34rem, 58vw, 50rem);
  }
  .raster figure { aspect-ratio: auto !important; height: 100%; }
  .raster figure:nth-child(1) { grid-row: span 2; }
  .raster figure:nth-child(2) { grid-column: span 2; }
}

/* ---------- Salon ---------- */
.salon { padding-block: var(--luft-xl); background: var(--karte); }
.salon__innen { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.salon__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.salon__ort {
  font-family: var(--sans); font-size: 0.875rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--akzent-t);
  margin: 0 0 var(--luft-m);
}
.salon h2 {
  font-size: clamp(1.875rem, 1.35rem + 2.6vw, 3rem);
  line-height: 1.15; margin-bottom: var(--luft-m); max-width: 18ch;
}
.salon p { color: var(--tinte-2); max-width: 48ch; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); }
@media (min-width: 56rem) {
  .salon__innen { grid-template-columns: 55fr 45fr; align-items: start; gap: clamp(2.5rem, 5vw, 5rem); }
  /* Der Text sitzt tiefer als das Bild — die Achse laeuft bewusst nicht
     durch die Mitte. */
  .salon__text { padding-top: clamp(2rem, 6vw, 5rem); }
}

/* ---------- Termin ---------- */
/* Warme Taupe-Flaeche statt einer weiteren hellen Sektion: der Abschluss
   war vorher kaum vom Rest zu unterscheiden. */
.termin {
  background: var(--zweit);
  padding-block: clamp(4.5rem, 3.5rem + 5vw, 8.5rem);
  text-align: center;
}
.termin h2 {
  font-size: clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem);
  line-height: 1.1; margin-bottom: var(--luft-m);
}
.termin p {
  color: var(--tinte); max-width: 46ch; margin-inline: auto;
  margin-bottom: var(--luft-l); font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}
.termin__zeile {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem;
  align-items: center; justify-content: center;
}

/* ---------- Standort ---------- */
.standort { padding-block: var(--luft-xl); }
.standort__innen { display: grid; gap: 2.5rem; }
.standort h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); margin-bottom: var(--luft-s);
}
.standort address { font-style: normal; color: var(--tinte-2); font-size: 1.125rem; }
.zeiten { margin: 0; }
.zeiten > div {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding-block: 0.85rem; border-bottom: 1px solid var(--linie);
  font-size: 1.0625rem;
}
.zeiten dt { color: var(--tinte); }
.zeiten dd { margin: 0; color: var(--tinte-2); }
.standort__hinweis { font-size: 1rem; color: var(--tinte-2); margin: var(--luft-s) 0 var(--luft-m); }
@media (min-width: 48rem) {
  .standort__innen { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
}

/* ---------- Fuss des Beispielbetriebs ---------- */
.fuss {
  border-top: 1px solid var(--linie);
  padding-block: var(--luft-m);
  font-size: 1rem; color: var(--tinte-2);
}
.fuss__innen { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; justify-content: space-between; }
.fuss__wort { font-family: var(--serif); letter-spacing: 0.24em; color: var(--tinte); }