/* ============================================================
   DEMO / ATELIER NORD - Friseur

   FARBE   Sandstein, Rosenholz, warmes Schwarz. Kein Pink,
           kein Gold: beides ist in dieser Branche so verbraucht,
           dass es nur noch "Salon" sagt und nichts ueber diesen
           einen Salon.
   SCHRIFT Cormorant Garamond. Hoher Strichkontrast, feine
           Serifen - die Typografie der Mode- und Kosmetikwelt.
           Sie traegt grosse Grade und wird klein unlesbar,
           deshalb steht Fliesstext in Inter.
   AUFBAU  Preisliste weit oben, direkt nach dem ersten
           Bildschirm. Sie ist auf Salonseiten die
           meistbesuchte Unterseite, und sie fehlt fast immer.
   ============================================================ */

:root {
  --grund:      #FAF6F1;
  --grund-2:    #F0E8E0;
  --text:       #221C18;
  --text-2:     #6B5D54;
  --akzent:     #9C5A4C;
  --akzent-2:   #7E453A;
  --auf-akzent: #FAF6F1;
  --linie:      #E0D4C8;

  --tit: "Cormorant Garamond", Georgia, serif;
  --txt: "Inter", system-ui, sans-serif;
  --r: 0px;
  --tit-spacing: -0.005em;
  --maxw: 70rem;

  --fuss-grund: #221C18;
  --fuss-text:  #FAF6F1;
}

h1, h2, h3 { font-weight: 600; }
.gross { font-size: clamp(2.1rem, 5.4vw, 3.6rem); }

/* --- Hero: Bild links, Text rechts, viel Luft -------------- */
.hero { padding-block: clamp(2rem, 5vw, 4rem); }
.hero .wrap { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) { .hero .wrap { grid-template-columns: 0.9fr 1.1fr; } }
.hero figure { margin: 0; overflow: hidden; }
.hero figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02; margin-bottom: 1.1rem; }
.hero__lead { font-size: 1.15rem; color: var(--text-2); margin-bottom: 1.85rem; max-width: 28rem; }

/* --- Preisliste ------------------------------------------- */
.preise { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 52rem) { .preise { grid-template-columns: 1fr 1fr; } }
.preise h3 {
  font-size: 1.5rem; margin-bottom: 0.9rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--linie);
}
.leistung {
  display: grid; grid-template-columns: 1fr auto;
  gap: 0.2rem 1rem; align-items: baseline;
  padding: 0.6rem 0; border-bottom: 1px solid var(--linie);
}
.leistung:last-child { border-bottom: 0; }
.leistung b { font-weight: 500; font-size: 1rem; }
.leistung span { font-variant-numeric: tabular-nums; color: var(--akzent); font-weight: 600; }
.leistung small { grid-column: 1 / -1; font-size: 0.875rem; color: var(--text-2); line-height: 1.45; }

/* --- Bildreihe -------------------------------------------- */
.reihe { display: grid; gap: 0.75rem; }
@media (min-width: 46rem) { .reihe { grid-template-columns: repeat(3, 1fr); } }
.reihe img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* --- Zitat ------------------------------------------------- */
.stimme { text-align: center; max-width: 44rem; margin-inline: auto; }
.stimme blockquote {
  margin: 0 0 1rem;
  font-family: var(--tit); font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.28; font-weight: 500;
}
.stimme cite { font-style: normal; font-size: 0.9375rem; color: var(--text-2); }