/* Salon Ohlbrandt · Runde 2.1 · 29.09.2026
   Kopf in einer Zeile, Foto über die volle Breite mit Band darunter, Leistungen, eine Idee
   (offene Preisliste im Terminbuch-Stil), Team, Anfahrt, Fuß.
   Ein Rahmen (1240 px Inhalt), ein Rand (--rand), zwei Flächen (Puder hell, Puder tiefer), dunkler Fuß.
   Die Variablennamen --papier und --sand stammen aus Runde 2, ihre Werte sind jetzt Puder, kein Beige.
   Radius (R106), genau vier Werte: Fotos 0 · Karten, Buch, Ankreuzfelder, Marken 3 px ·
   Felder und Auswahl 6 px · Knöpfe und Rundes Pille (999 px).
   Kein Milchglas, keine Schmuckverläufe, keine Scroll-Einblendungen. */

@font-face { font-family: "Fraunces"; src: url("schriften/fraunces-variabel.woff2") format("woff2"); font-weight: 300 600; font-style: normal; font-display: optional; }
@font-face { font-family: "Fraunces"; src: url("schriften/fraunces-kursiv-variabel.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: optional; }
@font-face { font-family: "Albert Sans"; src: url("schriften/albert-sans-variabel.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: optional; }

:root {
  --papier: #F7EBED;
  --sand: #EEDBDC;
  --puder: #EDC9C1;
  --puder-hell: #F1D9D4;
  --puder-tief: #C98E93;
  --aubergine: #3B1E33;
  --aubergine-tief: #2A1424;
  --aubergine-mitte: #7A3F66;
  --tinte: #2B2027;
  --grau: #66575F;
  --linie: #E6D2CD;
  --linie-dunkel: #B99A9D;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Albert Sans", "Segoe UI", Arial, sans-serif;
  --rand: clamp(16px, 4vw, 48px);
  --breite: 1240px;
  --kopf-h: 64px;
  --r-karte: 3px;
  --r-feld: 6px;
  --r-knopf: 999px;
}
@media (min-width: 60em) { :root { --kopf-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--aubergine-mitte); text-underline-offset: .18em; }
a:hover { color: var(--aubergine); }
:focus-visible { outline: 2px solid var(--aubergine-mitte); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem); font-variation-settings: "opsz" 144; }
h3 { font-size: 1.4rem; font-variation-settings: "opsz" 36; }
p { margin: 0 0 1em; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--aubergine); color: var(--papier); padding: .8rem 1rem; }
.sprung:focus { left: 8px; top: 8px; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .6rem 1.5rem; border: 0; border-radius: var(--r-knopf);
  background: var(--aubergine); color: var(--papier); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease;
}
.knopf:hover { background: var(--aubergine-mitte); color: var(--papier); }
.knopf:disabled { background: var(--sand); color: var(--grau); cursor: not-allowed; }

/* ---------- Musterleiste (R109, R60), Wortlaut wie auf allen Musterseiten, klebt nicht ---------- */
.nw-musterleiste { position: relative; z-index: 60; background: var(--aubergine-tief); color: #fff; font-size: .875rem; line-height: 1.4; padding: .25rem 0; }
.nw-musterleiste .mitte { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); display: flex; flex-wrap: wrap; gap: .1rem 1.5rem; align-items: center; justify-content: space-between; }
.nw-musterleiste .nw-links { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; }
.nw-musterleiste a { color: #fff; display: inline-flex; align-items: center; min-height: 48px; padding: 0 .7rem; border-radius: var(--r-karte); }
.nw-musterleiste a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.nw-musterleiste a.nw-cta { background: var(--sand); color: var(--aubergine-tief); text-decoration: none; font-weight: 700; }
.nw-musterleiste a.nw-cta:hover { background: var(--puder); }
.nw-musterleiste .nw-ki { color: var(--puder); font-weight: 700; }
.nw-musterleiste .nw-lang { display: none; }
@media (min-width: 80em) { .nw-musterleiste .nw-lang { display: inline; } }
@media (max-width: 59.99em) { .nw-musterleiste .nw-mittel { display: none; } }
@media (max-width: 47.99em) {
  .nw-musterleiste { font-size: .8125rem; }
  .nw-musterleiste .mitte { gap: 0 .4rem; }
  .nw-musterleiste a { padding: 0 .5rem; }
}
@media print { .nw-musterleiste { display: none; } }

/* ---------- Kopf: eine Zeile, klebt ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--papier); border-bottom: 1px solid var(--linie); }
.kopf-innen {
  max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand);
  height: calc(var(--kopf-h) - 1px); display: flex; align-items: center; gap: 1.5rem;
}
.marke { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-right: auto; color: var(--aubergine); text-decoration: none; }
.marke-name { font-family: var(--serif); font-size: 1.6rem; line-height: 1; font-variation-settings: "opsz" 48, "SOFT" 100; }
.marke-zusatz { font-size: .8125rem; color: var(--grau); padding-left: .6rem; border-left: 1px solid var(--linie-dunkel); line-height: 1.2; }
.baendchen { width: 11px; height: 22px; fill: var(--aubergine-mitte); align-self: flex-start; margin-top: -2px; }
.marke:hover { color: var(--aubergine-mitte); }
.menue { display: flex; align-items: center; gap: .25rem; }
.menue a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .75rem; color: var(--tinte); text-decoration: none; font-weight: 500; }
.menue a:hover { color: var(--aubergine-mitte); text-decoration: underline; }
.kopf-tel { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; color: var(--aubergine); font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kopf-tel .icon { width: 18px; height: 18px; fill: currentColor; order: -1; }
.kopf-tel:hover { color: var(--aubergine-mitte); }
.menue-knopf {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem;
  border: 1px solid var(--linie-dunkel); border-radius: var(--r-knopf); background: transparent; color: var(--aubergine); font-weight: 600;
}
.striche, .striche::before, .striche::after { display: block; width: 16px; height: 2px; background: currentColor; }
.striche { position: relative; }
.striche::before, .striche::after { content: ""; position: absolute; left: 0; }
.striche::before { top: -5px; } .striche::after { top: 5px; }

@media (max-width: 59.99em) {
  .kopf-innen { gap: .5rem; }
  .marke-zusatz, .kopf-knopf, .kopf-tel-nummer { display: none; }
  .kopf-tel { width: 44px; justify-content: center; border: 1px solid var(--linie-dunkel); border-radius: var(--r-knopf); }
  .js .menue-knopf[hidden] { display: inline-flex !important; }
  .js .menue {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--rand) 1rem;
    background: var(--papier); border-bottom: 1px solid var(--linie); box-shadow: 0 12px 24px rgba(42, 20, 36, .08);
  }
  .js .menue.offen { display: flex; }
  .js .menue a { min-height: 48px; border-bottom: 1px solid var(--linie); padding: 0; }
  html:not(.js) .kopf-innen { flex-wrap: wrap; height: auto; padding-block: .4rem; }
  html:not(.js) .menue { order: 5; width: 100%; flex-wrap: wrap; }
}
@media (min-width: 60em) and (max-width: 79.99em) {
  .kopf-innen { gap: 1rem; }
  .marke-zusatz, .kopf-tel-nummer { display: none; }
  .menue a { padding: 0 .6rem; }
  .kopf-tel { width: 44px; justify-content: center; border: 1px solid var(--linie-dunkel); border-radius: var(--r-knopf); }
}
@media (max-width: 22em) { .marke-name { font-size: 1.4rem; } }

/* ---------- Erster Bildschirm: Foto über die volle Breite, Band darunter ---------- */
.aufmacher { background: var(--papier); border-bottom: 1px solid var(--linie); }
.aufmacher-bild { margin: 0; position: relative; }
.aufmacher-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.aufmacher-band {
  max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 1.5rem var(--rand) 2rem;
  display: grid; gap: 1.25rem;
}
.aufmacher h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem); line-height: 1.05; font-variation-settings: "opsz" 144, "SOFT" 50; }
.aufmacher h1 span { display: block; }
.aufmacher-wege { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-bottom: 1rem; }
.aufmacher-wege .knopf { min-height: 52px; padding-inline: 1.9rem; font-size: 1.0625rem; }
.tel-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinte); text-decoration: none; }
.tel-link b { color: var(--aubergine); margin-left: .3em; font-variant-numeric: tabular-nums; text-decoration: underline; text-decoration-color: var(--puder-tief); text-underline-offset: .22em; }
.tel-link:hover b { color: var(--aubergine-mitte); }
.aufmacher-fakten { font-size: .9375rem; color: var(--grau); margin: 0; max-width: 62ch; }

@media (min-width: 48em) {
  .aufmacher-bild img { aspect-ratio: 21 / 9; object-position: 50% 30%; }
}
@media (min-width: 60em) {
  .aufmacher-bild img { aspect-ratio: auto; height: clamp(300px, calc(100svh - var(--kopf-h) - 300px), 640px); object-position: 50% 22%; }
  .aufmacher-band { padding-block: 1.75rem 2rem; }
}
@media (min-width: 80em) {
  .aufmacher-band { grid-template-columns: minmax(0, 1fr) 29rem; align-items: end; gap: 3rem; }
  .aufmacher h1 { font-size: clamp(2.6rem, 3.4vw, 3rem); }
  .aufmacher-wege { margin-bottom: .75rem; }
}

/* ---------- Abschnitte, Rahmen, Kopfzeile ---------- */
.abschnitt { padding: 4rem 0; }
.flaeche { background: var(--sand); }
.rahmen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.kopfzeile { display: grid; gap: .5rem 3rem; margin-bottom: 2rem; }
.kopfzeile p { margin: 0; max-width: 62ch; color: var(--grau); font-size: 1.0625rem; }
@media (min-width: 48em) {
  .abschnitt { padding: 4.5rem 0; }
  .kopfzeile { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; margin-bottom: 2.5rem; }
}

/* ---------- Leistungen: Kartenraster ---------- */
.karten { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem 1.75rem; }
.karte { display: flex; flex-direction: column; min-width: 0; }
.karte .ki-bild { margin-bottom: 1rem; }
.karte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.karte h3 { margin-bottom: .4rem; }
.karte p { margin: 0 0 .9rem; color: var(--tinte); max-width: 62ch; }
.karte .karte-fuss > span { display: grid; line-height: 1.35; }
.karte .karte-fuss { margin: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--grau); font-size: .9375rem; }
.karte-fuss b { white-space: nowrap; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; color: var(--aubergine); font-variant-numeric: lining-nums; }
.karte-knopf { min-height: 44px; padding: 0 1rem; border: 1px solid var(--aubergine); border-radius: var(--r-knopf); background: transparent; color: var(--aubergine); font-weight: 600; }
.karte-knopf:hover { background: var(--aubergine); color: var(--papier); }
@media (max-width: 47.99em) {
  /* Wischreihe statt Stapel (Lehre 6c-3) */
  .karten {
    grid-auto-flow: column; grid-auto-columns: 82%; gap: 1rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rand); margin-inline: calc(var(--rand) * -1); padding: 0 var(--rand) .5rem; scrollbar-width: none;
  }
  .karten::-webkit-scrollbar { display: none; }
  .karte { scroll-snap-align: start; }
}
@media (min-width: 48em) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* großer Rechner: vier Spalten, Schneiden und Hochstecken doppelt breit, alle Bilder gleich hoch */
@media (min-width: 72em) {
  .karten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .karte.breit { grid-column: span 2; }
  .karte img { aspect-ratio: auto; height: 210px; }
}

/* ---------- Signatur: Preisliste im Terminbuch-Stil ---------- */
.buch { position: relative; display: grid; background: var(--papier); border-radius: var(--r-karte); box-shadow: 0 1px 0 var(--linie-dunkel), 0 18px 40px -24px rgba(42, 20, 36, .35); }
.buch-band { position: absolute; top: -6px; right: 1.5rem; width: 22px; height: 66px; fill: var(--aubergine); z-index: 2; }
.buch-seite { padding: 1.75rem 1.25rem; min-width: 0; }
.preisliste { position: relative; }
.buch-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: 0 2.5rem 1.25rem 0; padding-bottom: .9rem; border-bottom: 1px solid var(--linie-dunkel); color: var(--grau); font-size: .9375rem; }
.buch-marke { font-family: var(--serif); font-size: 1.6rem; color: var(--aubergine); font-variation-settings: "opsz" 48, "SOFT" 100; }
.gruppen { columns: 1; column-gap: 2.5rem; }
.gruppe { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; break-inside: avoid; }
.gruppe legend { font-size: .9375rem; font-weight: 600; color: var(--aubergine-mitte); padding: 0; margin-bottom: .2rem; }
.posten {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; column-gap: .7rem; align-items: baseline;
  min-height: 44px; padding: .4rem .4rem; border-bottom: 1px dotted var(--linie-dunkel); cursor: pointer;
}
.posten:hover { background: var(--puder-hell); }
.posten input {
  appearance: none; -webkit-appearance: none; margin: 0; width: 1.15rem; height: 1.15rem; align-self: center;
  border: 1.5px solid var(--aubergine); border-radius: var(--r-karte); background: var(--papier); grid-row: 1 / span 2;
}
.posten input:checked { background: var(--aubergine); box-shadow: inset 0 0 0 2.5px var(--papier); }
.posten:has(input:checked) { background: var(--puder-hell); }
.p-name { grid-column: 2; font-weight: 500; line-height: 1.3; overflow-wrap: break-word; } /* Livegang-Prüfung 30.09.2026: Notbremse, damit ein langes Wort nie in den Preis läuft (etwa wenn die Schrift nicht rechtzeitig lädt) */
.p-dauer { grid-column: 2; font-size: .875rem; color: var(--grau); line-height: 1.25; }
.p-preis { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-family: var(--serif); font-size: 1.1875rem; color: var(--aubergine); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.buch-fuss { margin: .75rem 0 0; font-size: .9375rem; color: var(--grau); max-width: 65ch; }

.termin { background: var(--papier); border-top: 1px solid var(--linie-dunkel); }
.termin-titel { font-style: italic; font-size: 1.75rem; color: var(--aubergine); margin: 0 0 1rem; }
.termin-titel:focus { outline: none; }
.start-hinweis { padding: 1rem 1.1rem; background: var(--sand); border-radius: var(--r-karte); margin-bottom: 1.25rem; }
.start-hinweis span { display: block; margin-top: .4rem; color: var(--grau); font-size: .9375rem; }
.zusammen { margin: 0 0 1.25rem; }
.zusammen div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.zusammen dt { color: var(--grau); font-size: .9375rem; }
.zusammen dd { margin: 0; font-weight: 500; overflow-wrap: break-word; }
.zusammen .summe dd { font-family: var(--serif); font-size: 1.1875rem; }
.zusammen .summe b { font-weight: 500; color: var(--aubergine); font-size: 1.375rem; }
.schritte { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.schritte li { display: flex; align-items: center; }
.schritte li + li::before { content: "›"; color: var(--linie-dunkel); margin-right: .25rem; }
.schritte button { min-height: 44px; padding: 0 .5rem; border: 0; background: none; color: var(--aubergine-mitte); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.schritte button[aria-current="step"] { color: var(--aubergine); text-decoration: none; background: var(--puder-hell); border-radius: var(--r-feld); }
.schritte button:disabled { color: var(--grau); text-decoration: none; opacity: .6; cursor: default; }
.schritt { display: none; }
.schritt.aktiv { display: block; }
.schritt-titel { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 .6rem; padding: 0; color: var(--tinte); }
.personen { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .5rem; }
.person {
  display: grid; grid-template-columns: 1.15rem minmax(0, 1fr) auto; column-gap: .7rem; align-items: center;
  min-height: 48px; padding: .45rem .8rem; border: 1px solid var(--linie-dunkel); border-radius: var(--r-feld); cursor: pointer; background: #fff;
}
.person input { appearance: none; -webkit-appearance: none; margin: 0; width: 1.15rem; height: 1.15rem; border: 1.5px solid var(--aubergine); border-radius: var(--r-knopf); grid-row: 1 / span 2; }
.person input:checked { background: var(--aubergine); box-shadow: inset 0 0 0 2.5px #fff; }
.person:has(input:checked) { border-color: var(--aubergine); background: var(--puder-hell); }
.person-name { grid-column: 2; font-weight: 600; }
.person-rolle { grid-column: 2; font-size: .875rem; color: var(--grau); }
.person-tage { grid-column: 3; grid-row: 1 / span 2; font-size: .875rem; color: var(--grau); white-space: nowrap; }
.person.gesperrt { opacity: .5; cursor: not-allowed; background: transparent; }
.person.gesperrt .person-rolle::after { content: " · macht das nicht"; }
.tage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; margin-bottom: 1rem; }
.tage button, .zeiten button, .betraege span {
  min-height: 44px; border: 1px solid var(--linie-dunkel); border-radius: var(--r-feld); background: #fff; color: var(--aubergine); font-weight: 600;
}
.tage button { display: grid; line-height: 1.15; padding: .3rem .1rem; font-weight: 400; font-size: .9375rem; }
.tage button b { font-weight: 700; }
.tage button[aria-pressed="true"], .zeiten button[aria-pressed="true"] { background: var(--aubergine); border-color: var(--aubergine); color: var(--papier); }
.tage button:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.zeiten-gruppe { margin-bottom: .75rem; }
.zeiten-gruppe h4 { margin: 0 0 .35rem; font-weight: 600; font-size: .9375rem; color: var(--aubergine-mitte); }
.zeiten-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: .4rem; }
.zeiten button { font-variant-numeric: tabular-nums; }
.zeiten-leer { padding: .8rem 1rem; background: var(--sand); border-radius: var(--r-karte); }
.feld { margin: 0 0 .9rem; min-width: 0; }
.feld label { display: block; font-weight: 600; margin-bottom: .3rem; }
.feld input, .feld textarea { width: 100%; min-height: 48px; padding: .6rem .8rem; border: 1px solid var(--linie-dunkel); border-radius: var(--r-feld); background: #fff; font-size: 1.0625rem; }
.feld textarea { min-height: 5rem; resize: vertical; }
.feld [aria-invalid="true"] { border: 2px solid #9B2C3C; }
.fehler { color: #8A2233; font-weight: 600; font-size: .9375rem; margin: .3rem 0 0; }
.fehler:empty, .schritt-meldung:empty, .rueckmeldung:empty { display: none; }
.schritt-meldung { margin: .75rem 0 0; padding: .7rem .9rem; background: var(--puder-hell); border-radius: var(--r-karte); color: var(--aubergine); }
.weiter { margin-top: 1rem; width: 100%; }
.rueckmeldung { margin-top: 1rem; padding: 1rem 1.1rem; background: var(--puder-hell); border-radius: var(--r-karte); }
.rueckmeldung strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin-bottom: .3rem; }
.rueckmeldung p { margin: 0 0 .5rem; }
.rueckmeldung .kopie { padding: .7rem .9rem; background: var(--papier); border-radius: var(--r-karte); font-family: var(--serif); }
.rueckmeldung button { margin-top: .25rem; }
.termin-tel { margin: 1rem 0 0; color: var(--grau); font-size: .9375rem; }
.termin-tel a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.ohne-skript { padding: .8rem; background: var(--puder-hell); }

@media (min-width: 48em) {
  .buch-seite { padding: 2.25rem 2.25rem 2rem; }
  .gruppen { columns: 2; }
}
@media (min-width: 64em) {
  .buch { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .preisliste { padding-left: 3rem; }
  /* Randlinie wie im Heft */
  .preisliste::before { content: ""; position: absolute; left: 1.75rem; top: 0; bottom: 0; width: 1px; background: var(--puder-tief); }
  .termin { border-top: 0; border-left: 1px solid var(--linie-dunkel); background: #FBF5F3; border-radius: 0 var(--r-karte) var(--r-karte) 0; }
  .termin-innen { position: sticky; top: calc(var(--kopf-h) + 1rem); }
  .buch-band { right: auto; left: calc(62.96% - 11px); }
}
/* Livegang-Prüfung 30.09.2026: Zwischen 1024 und 1199 px ist die Preisseite nur etwa 470 bis 570 px breit. Zwei Spalten wurden dort zu eng (Namen drei- bis vierzeilig, „Gesichtsbehandlung“ stieß an den Preis), deshalb hier eine Spalte. */
@media (min-width: 64em) and (max-width: 74.99em) { .gruppen { columns: 1; } }

/* Leiste unten (Handy, Tablet) */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: .75rem; padding: .6rem var(--rand) calc(.6rem + env(safe-area-inset-bottom));
  background: var(--aubergine); color: var(--papier); box-shadow: 0 -8px 24px rgba(42, 20, 36, .2);
}
.leiste-text { margin: 0; flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.leiste-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#l-zeile1 { font-weight: 600; }
#l-zeile2 { font-size: .9375rem; color: var(--puder); }
.leiste .knopf { background: var(--papier); color: var(--aubergine); flex: none; }
.leiste .knopf:hover { background: var(--puder); }
.leiste .knopf:disabled, .leiste .knopf:disabled:hover { background: transparent; color: var(--puder); box-shadow: inset 0 0 0 1px rgba(237, 201, 193, .55); cursor: not-allowed; } /* Livegang-Prüfung 30.09.2026: der gesperrte „Weiter“-Knopf in der Leiste sah wie ein aktiver aus, weil .leiste .knopf die Sperrfarbe von .knopf:disabled überdeckte */
@media (min-width: 64em) { .leiste { display: none !important; } }

/* ---------- Über uns ---------- */
.block { display: grid; gap: 2rem; align-items: center; }
.block-bild { margin: 0; position: relative; }
.block-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.block-text > p { max-width: 62ch; }
.block-text h2 { margin-bottom: 1.1rem; }
.unterschrift { font-family: var(--serif); font-style: italic; color: var(--aubergine-mitte); font-size: 1.125rem; }
.team { list-style: none; margin: 1.75rem 0 .75rem; padding: 1.5rem 0 0; border-top: 1px solid var(--linie); display: grid; gap: 1rem; }
.team li { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.team img { width: 88px; height: 110px; object-fit: cover; border-radius: var(--r-karte); flex: none; }
.team p { margin: 0; display: grid; line-height: 1.35; }
.team span { font-size: .9375rem; color: var(--grau); }
.team-hinweis { font-size: .9375rem; color: var(--grau); margin: 0; max-width: 62ch; }
.team-hinweis a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 48em) {
  .block { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; }
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team li { flex-direction: column; align-items: flex-start; }
  .team img { width: 120px; height: 150px; }
}
@media (min-width: 64em) { .block-bild img { max-height: 620px; } }

.stimmen { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.stimmen li { padding-left: 1.1rem; border-left: 2px solid var(--puder-tief); }
.stimmen blockquote { margin: 0; }
.stimmen blockquote p { font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; margin: 0 0 .6rem; font-variation-settings: "opsz" 36; }
.quelle { margin: 0; font-size: .9375rem; color: var(--grau); }
@media (min-width: 48em) { .stimmen { grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.3fr); gap: 2.5rem; align-items: start; } }

/* Gutschein: eine kompakte Karte */
.gutschein { margin-top: 3.5rem; display: grid; gap: 1.5rem; align-items: center; padding: 1.5rem; background: var(--sand); border-radius: var(--r-karte); }
.gut-karte {
  position: relative; display: grid; align-content: space-between; gap: .4rem; aspect-ratio: 16 / 10; max-width: 360px; width: 100%;
  padding: 1.25rem 1.4rem; background: var(--aubergine); color: var(--sand); border-radius: var(--r-karte);
}
.gk-salon { font-size: .875rem; letter-spacing: .04em; }
.gk-art { font-family: var(--serif); font-size: 1.5rem; color: var(--puder); }
.gk-betrag { font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--papier); font-variant-numeric: lining-nums; }
.gut-titel { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-bottom: .5rem; }
.gut-form p { margin-bottom: 1rem; max-width: 62ch; }
.betraege { border: 0; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.betraege label { position: relative; }
.betraege input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.betraege span { display: inline-flex; align-items: center; padding: 0 1.1rem; font-variant-numeric: tabular-nums; }
.betraege input:checked + span { background: var(--aubergine); border-color: var(--aubergine); color: var(--papier); }
.betraege input:focus-visible + span { outline: 2px solid var(--aubergine-mitte); outline-offset: 2px; }
@media (min-width: 48em) { .gutschein { grid-template-columns: 300px minmax(0, 1fr); gap: 2.5rem; padding: 2rem; } }
@media (min-width: 64em) { .gutschein { grid-template-columns: 340px minmax(0, 1fr); } .gut-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: end; } .gut-form > h2, .gut-form > p, .gut-form > .rueckmeldung { grid-column: 1 / -1; } .gut-form .betraege { margin: 0; } }

/* ---------- Kontakt ---------- */
.kontakt { display: grid; gap: 2rem; }
.kontakt-bild { margin: 0; position: relative; }
.kontakt-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
address { font-style: normal; font-family: var(--serif); font-size: 1.3rem; line-height: 1.35; margin-bottom: .75rem; }
.wege { margin-bottom: 1rem; }
.wege a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.zeiten-tabelle { border-collapse: collapse; width: 100%; margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.zeiten-tabelle th, .zeiten-tabelle td { text-align: left; padding: .35rem 0; border-bottom: 1px solid var(--linie-dunkel); font-weight: 400; }
.zeiten-tabelle th { color: var(--grau); padding-right: 1rem; }
.klein { font-size: .9375rem; color: var(--grau); }
.anfrage { padding: 1.5rem; background: var(--papier); border-radius: var(--r-karte); }
.anfrage-titel { font-family: var(--serif); font-size: 1.4rem; margin-bottom: 1rem; }
@media (min-width: 48em) { .kontakt { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kontakt-bild { grid-column: 1 / -1; } }
@media (min-width: 64em) { .kontakt { grid-template-columns: minmax(0, 5fr) minmax(0, 3.4fr) minmax(0, 3.6fr); gap: 2.5rem; } .kontakt-bild { grid-column: auto; } .kontakt-bild img { height: 100%; aspect-ratio: auto; object-position: 45% 50%; } }

/* ---------- KI-Kennzeichen je Bild (R109) ---------- */
.ki-bild { position: relative; }
.ki-zeichen {
  position: absolute; left: .5rem; bottom: .5rem; z-index: 2; margin: 0;
  background: rgba(42, 20, 36, .88); color: #fff; font-size: .75rem; line-height: 1; font-weight: 600;
  padding: .3rem .45rem; border-radius: var(--r-karte); pointer-events: none;
}
.aufmacher-bild .ki-zeichen { left: auto; right: .6rem; top: .6rem; bottom: auto; }

/* ---------- Fuß ---------- */
.fuss { background: var(--aubergine-tief); color: var(--sand); padding: 3rem 0 2.5rem; }
.fuss-innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); display: grid; gap: 1.25rem; }
.fuss p { margin: 0 0 .3rem; }
.fuss-name { font-family: var(--serif); font-size: 1.6rem; color: var(--papier); }
.fuss-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.fuss a { color: var(--puder); display: inline-flex; align-items: center; min-height: 44px; }
.fuss a:hover { color: var(--papier); }
.musterhinweis { font-size: .875rem; max-width: 65ch; border-top: 1px solid rgba(238, 221, 216, .25); padding-top: 1.2rem; }
@media (min-width: 48em) { .fuss-innen { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .musterhinweis { grid-column: 1 / -1; } }

/* ---------- Unterseiten ---------- */
.recht { max-width: 46rem; margin: 0 auto; padding: 3rem var(--rand) 4rem; }
.recht h1 { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); margin-bottom: 1rem; }
.recht h2 { font-size: 1.5rem; margin: 2rem 0 .6rem; }
.recht .erklaerung { color: var(--grau); font-size: .95rem; }
.recht .platzhalter { background: var(--puder-hell); padding: .1rem .35rem; border-radius: var(--r-karte); }
.recht-kopf { background: var(--papier); border-bottom: 1px solid var(--linie); padding: 0 var(--rand); }
.recht-kopf a { display: inline-flex; align-items: center; gap: .5rem; min-height: 64px; color: var(--aubergine); font-family: var(--serif); font-size: 1.3rem; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; scroll-behavior: auto !important; }
}
@media print { .kopf, .leiste { position: static; } }