/* ===========================================================
   studio hautnah – Neuaufbau „Editorial Luxus" (24.07.2026)
   Eigenständiges Design-System NUR für die Startseite (Preview).
   Kein Baukasten: Papyrus-Fond, große ruhige Serif, Haarlinien,
   eckige dezente Buttons, sparsame langsame Animationen.
   Referenz: kosmetik-isabelle.at (Ruhe, Weißraum, Serif) + CI #780040.
   =========================================================== */

/* ---------- Schriften (lokal, DSGVO-konform) ---------- */
@font-face {
  font-family: 'Literata';
  src: url('fonts/literata.woff2') format('woff2');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito.woff2') format('woff2');
  font-weight: 200 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/caveat.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------- Töne ---------- */
:root {
  --papier:      #F6F1E8;   /* warmer Papyrus-Grund */
  --papier-tief: #EFE8DB;   /* eine Stufe tiefer */
  --tinte:       #2B2126;   /* warmes Schwarzbraun für Text */
  --tinte-sanft: #5C4F55;
  --berry:       #780040;   /* DIE Logo-Farbe – sparsam als Akzent */
  --berry-tief:  #4E0029;
  /* Sand = zweite Leitfarbe (Wunsch Susanne 25.07., angelehnt an die
     neuen REVIDERM-Aktionen). Ersetzt das Eukalyptusgrün fast überall. */
  --sand:        #C0A176;   /* warm, dekorativ (Zweige, Linien, Flächen) */
  --sand-tief:   #6F5937;   /* dunkel genug für kleinen Text: 4,9:1 auch auf Sandflächen */
  --sand-hauch:  #E8DCC6;   /* zarte Sandfläche */
  --salbei:      #6F8B7D;   /* Eukalyptusgrün – nur noch als winziger Akzent */
  --creme:       #F9F5EE;
  --haar:        rgba(43, 33, 38, 0.16);   /* Haarlinien */
  --haar-hell:   rgba(249, 245, 238, 0.28);
  --serif: 'Literata', Georgia, serif;
  --ui:    'Nunito', 'Segoe UI', sans-serif;
  --hand:  'Caveat', cursive;
  --breite: 1200px;
  --gang: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--serif);
  font-weight: 380;
  color: var(--tinte);
  background: var(--papier);
  font-size: clamp(16px, 1rem + 0.1vw, 18px);
  line-height: 1.75;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Papyrus-Struktur: feines Korn über der ganzen Seite */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23k)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.055;
  mix-blend-mode: multiply;
}

/* ---------- Eröffnungs-Vorhang (beim ersten Aufruf, ~1 s) ---------- */
#vorhang {
  position: fixed; inset: 0; z-index: 100;
  background: var(--papier);
  display: grid; place-items: center;
  transition: opacity 0.7s ease, visibility 0.7s;
}
#vorhang.weg { opacity: 0; visibility: hidden; }
.vorhang__innen { text-align: center; }
.vorhang__wort {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  letter-spacing: 0.04em; color: var(--tinte);
  display: inline-flex;
}
.vorhang__wort span {
  opacity: 0; transform: translateY(0.5em);
  animation: vorhang-buchstabe 0.55s var(--gang) forwards;
}
@keyframes vorhang-buchstabe { to { opacity: 1; transform: none; } }
.vorhang__linie {
  display: block; width: 0; height: 1px;
  background: var(--berry); margin: 1.1rem auto 0;
  animation: vorhang-linie 0.8s 0.35s var(--gang) forwards;
}
@keyframes vorhang-linie { to { width: 150px; } }

.zeile { width: min(100% - 3rem, var(--breite)); margin-inline: auto; }
.abschnitt { padding: clamp(5rem, 4rem + 6vw, 10rem) 0; position: relative; }

/* ---------- Typografie ---------- */
.vorzeile {
  font-family: var(--ui);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--berry);
  display: block; margin-bottom: 1.4rem;
}
.vorzeile--sand { color: var(--sand-tief); }
h1, h2, h3 { font-weight: 300; line-height: 1.08; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.8rem, 1.8rem + 3.2vw, 4.9rem); }
h2 { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem); margin-bottom: 1.2rem; }
h3 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); }
h2 em, h1 em { font-style: italic; font-weight: 300; color: var(--berry); }
.still { color: var(--tinte-sanft); max-width: 58ch; }
.gross { font-size: clamp(1.06rem, 1rem + 0.3vw, 1.25rem); }

/* ---------- Buttons: eckig, ruhig, mit Füll-Animation ---------- */
.knopf {
  position: relative; display: inline-block; overflow: hidden;
  font-family: var(--ui); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  padding: 1.15em 2.4em;
  border: 1px solid var(--tinte); color: var(--tinte);
  background: transparent; cursor: pointer;
  transition: color 0.45s var(--gang), border-color 0.45s var(--gang);
}
.knopf::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--tinte);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--gang);
}
.knopf:hover { color: var(--papier); }
.knopf:hover::after { transform: scaleX(1); }
.knopf--berry { border-color: var(--berry); color: var(--berry); }
.knopf--berry::after { background: var(--berry); }
.knopf--berry:hover { color: var(--creme); }
.knopf--hell { border-color: var(--creme); color: var(--creme); }
.knopf--hell::after { background: var(--creme); }
.knopf--hell:hover { color: var(--berry-tief); }

.textlink {
  font-family: var(--ui); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--berry);
  display: inline-flex; align-items: center; gap: 0.7em;
  padding-bottom: 0.4em; position: relative;
}
.textlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--berry); transform-origin: right; transition: transform 0.5s var(--gang);
}
.textlink:hover::after { transform: scaleX(0.25); }

/* ---------- Kopf ---------- */
.kopfleiste {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--haar);
  /* ⚠️ Reihenfolge ist Absicht (25.07.2026, Safari am MacBook):
     Zuerst die DECKENDE Fläche als Rückfall. Kennt ein Browser
     color-mix() nicht (Safari < 16.2), verwirft er nur die Zeile im
     @supports darunter – der Kopf bleibt dann deckend statt durchsichtig.
     Vorher stand hier NUR color-mix(): fiel das aus, hatte der Kopf gar
     keinen Hintergrund und der Text lief beim Scrollen sichtbar durch. */
  background: var(--papier);
  -webkit-backdrop-filter: blur(12px);   /* Safari braucht das Präfix */
  backdrop-filter: blur(12px);
  transition: box-shadow 0.4s ease;
}
/* Milchglas nur dort, wo der Weichzeichner wirklich greift. Ohne diese
   Prüfung wäre der Kopf in älteren Browsern bloss 88 % deckend – also
   halbdurchsichtig ohne Unschärfe, und genau dann liest man den
   durchlaufenden Text mit. */
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  .kopfleiste { background: color-mix(in srgb, var(--papier) 88%, transparent); }
}
.kopfleiste.getaucht { box-shadow: 0 14px 40px rgba(43, 33, 38, 0.07); }
.kopfleiste__zeile {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 132px; gap: 2rem;
  transition: min-height 0.55s var(--gang);
}
.kopfleiste.getaucht .kopfleiste__zeile { min-height: 74px; }

/* Marke: Signet (die Logo-Illustration) + Schriftzug in echter Schrift.
   Der Text im Logo selbst wäre in Header-Größe unleserlich – deshalb
   trägt das Signet nur das Bild, die Wortmarke die Typografie.
   Beim Scrollen schrumpft das Signet weg, der Schriftzug bleibt. */
.marke { display: flex; align-items: center; gap: 1rem; }
.marke__signet {
  height: 88px; width: auto; flex: none;
  transform-origin: left center;
  transition: height 0.55s var(--gang), opacity 0.4s var(--gang), margin 0.55s var(--gang);
}
.marke__wort {
  font-family: var(--serif); font-weight: 400; font-size: 1.5rem;
  letter-spacing: 0.02em; white-space: nowrap;
}
.kopfleiste.getaucht .marke__signet { height: 44px; opacity: 0.9; }
.hauptnav { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); }
.hauptnav a {
  font-family: var(--ui); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--tinte-sanft);
  padding: 0.4em 0; position: relative; transition: color 0.3s ease;
}
.hauptnav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--berry); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--gang);
}
.hauptnav a:hover, .hauptnav a.aktiv { color: var(--berry); }
.hauptnav a:hover::after, .hauptnav a.aktiv::after { transform: scaleX(1); }
.hauptnav .knopf { padding: 0.95em 1.8em; }
.hauptnav .knopf::after { z-index: 0; }
.hauptnav .knopf span { position: relative; z-index: 1; }

.menue-knopf {
  display: none; background: none; border: none; cursor: pointer;
  font-family: var(--ui); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--tinte);
  padding: 0.6em 0;
}
@media (max-width: 880px) {
  /* ⚠️ Der Kopf darf hier KEINEN backdrop-filter haben: Ein Element mit
     backdrop-filter wird zum Bezugsrahmen für position:fixed-Kinder – das
     Menü wäre dann nur so gross wie der Kopf statt bildschirmfüllend
     (fehlender Hintergrund, abgeschnittene Eintraege). Deshalb hier
     deckende Fläche statt Milchglas. */
  .kopfleiste { background: var(--papier); backdrop-filter: none; }

  /* Kopf mobil kompakter – 132 px fressen sonst ein Drittel des Schirms */
  .kopfleiste__zeile { min-height: 88px; gap: 1rem; }
  .kopfleiste.getaucht .kopfleiste__zeile { min-height: 66px; }
  .marke { gap: 0.7rem; }
  .marke__signet { height: 58px; }
  .kopfleiste.getaucht .marke__signet { height: 38px; }
  .marke__wort { font-size: 1.2rem; }

  .hauptnav {
    position: fixed; inset: 0; z-index: 50;
    flex-direction: column; justify-content: center; gap: 1.8rem;
    background: var(--papier);
    padding: 6.5rem 1.5rem 3.5rem;   /* Platz für den Schliessen-Knopf oben */
    overflow-y: auto;                 /* falls die Höhe knapp wird */
    opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
  }
  .hauptnav a { font-size: 1.15rem; }
  .hauptnav .knopf { margin-top: 0.6rem; }
  body.menue-offen .hauptnav { opacity: 1; pointer-events: auto; }
  body.menue-offen { overflow: hidden; }
  /* Kopf über alles legen, solange das Menü offen ist, und den
     WhatsApp-Knopf (z-index 45) so lange wegblenden */
  body.menue-offen .kopfleiste { z-index: 100; }
  body.menue-offen .wa-still { opacity: 0; pointer-events: none; }
  .wa-still { transition: opacity 0.3s ease, transform 0.35s var(--gang); }
  .menue-knopf { display: block; position: relative; z-index: 60; }
}

/* ---------- Hero ---------- */
.buehne {
  min-height: min(calc(100vh - 82px), 820px);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center; gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(3rem, 5vh, 5rem) 0 clamp(4rem, 7vh, 6rem);
  position: relative;
}
.buehne__text { position: relative; z-index: 2; }
.buehne__text .knoepfe { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.8rem; align-items: center; }
/* Termin-Block: EINE ruhige Einheit statt vieler Einzelstile.
   Hierarchie bewusst nur dreistufig – Aussage / Erklärung / Aktion. */
.buehne__hinweis {
  margin-top: 2.8rem; padding-top: 1.8rem; border-top: 1px solid var(--haar);
  max-width: 46ch;
  font-size: 1.05rem; color: var(--berry); letter-spacing: 0.005em;
}
.buehne__hinweis b { font-weight: 400; }

/* großes Bogenbild mit doppelter Rahmenlinie */
.bogenbild {
  position: relative; justify-self: end;
  width: min(460px, 88vw); aspect-ratio: 4 / 5.4;
}
.bogenbild__rahmen {
  position: absolute; inset: 0;
  border-radius: 999px 999px 0 0; overflow: hidden;
  box-shadow: 0 40px 90px rgba(43, 33, 38, 0.16);
}
.bogenbild__rahmen img, .bogenbild__rahmen video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
}
.bogenbild::before {
  content: ""; position: absolute; inset: -16px -16px 0;
  border: 1px solid var(--berry); border-bottom: none;
  border-radius: 999px 999px 0 0; opacity: 0.5; pointer-events: none;
}
.bogenbild::after {
  content: ""; position: absolute; left: -16px; right: -16px; bottom: 0; height: 1px;
  background: var(--berry); opacity: 0.5;
}

/* riesiger, blasser Bogen + Zweig-Linienzeichnung im Hintergrund */
.deko-bogen {
  position: absolute; z-index: 0; pointer-events: none;
  border: 1px solid var(--haar); border-radius: 999px 999px 0 0;
  width: min(640px, 60vw); aspect-ratio: 3 / 4; bottom: 0; left: -8%;
  opacity: 0.7;
}
.zweig { position: absolute; pointer-events: none; color: var(--sand); opacity: 0.75; }
.zweig svg { width: 100%; height: auto; display: block; }
.zweig--hero { width: clamp(150px, 16vw, 230px); top: 6%; right: -2%; transform: rotate(24deg); }

.scrollwink {
  position: absolute; bottom: 2.2rem; left: 0;
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--ui); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.4em; text-transform: uppercase; color: var(--tinte-sanft);
}
.scrollwink::after { content: ""; width: 72px; height: 1px; background: var(--tinte-sanft); animation: wink 2.6s var(--gang) infinite; transform-origin: left; }
@keyframes wink { 0% { transform: scaleX(0); } 55% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* ---------- Zwischenzeile (großes Statement) ---------- */
.statement { text-align: center; }
.statement p {
  font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.7rem);
  font-weight: 300; line-height: 1.4; font-style: italic;
  max-width: 26em; margin-inline: auto; color: var(--tinte);
}
.statement p b { color: var(--berry); font-weight: 400; font-style: normal; }

/* Zierlinie mit Blatt-Ornament */
.ornament { display: flex; align-items: center; gap: 1.2rem; justify-content: center; margin: 0 auto; max-width: 420px; }
.ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: var(--haar); }
.ornament svg { width: 22px; height: 22px; color: var(--salbei); flex: none; }

/* ---------- Leistungen: Galerie zum Durchblättern ---------- */
.galerie-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.galerie-pfeile { display: flex; gap: 0.8rem; align-items: center; }
.pfeil {
  width: 58px; height: 58px; border: 1px solid var(--tinte); border-radius: 999px;
  background: transparent; cursor: pointer; display: grid; place-items: center;
  color: var(--tinte); transition: background 0.35s ease, color 0.35s ease, opacity 0.3s;
}
.pfeil:hover { background: var(--tinte); color: var(--papier); }
.pfeil:disabled { opacity: 0.3; cursor: default; }
.pfeil:disabled:hover { background: transparent; color: var(--tinte); }
.pfeil svg { width: 22px; height: 22px; }
.galerie-stand { font-family: var(--ui); font-size: 0.74rem; letter-spacing: 0.3em; color: var(--tinte-sanft); margin-left: 0.8rem; }

.galerie {
  display: flex; gap: clamp(1.5rem, 3vw, 3rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 0.5rem;
  margin-right: calc(50% - 50vw);  /* rechts aus dem Raster laufen lassen */
  padding-right: max(1.5rem, calc(50vw - var(--breite) / 2));
}
.galerie::-webkit-scrollbar { display: none; }
.blatt-karte {
  flex: 0 0 min(88vw, 780px);
  scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.6rem, 3vw, 3rem); align-items: center;
  border-top: 1px solid var(--haar);
  padding-top: 2.4rem;
}
.blatt-karte__nr {
  font-family: var(--serif); font-weight: 200;
  font-size: clamp(3rem, 2.4rem + 2vw, 4.6rem);
  color: var(--berry); line-height: 1; opacity: 0.85;
}
.blatt-karte h3 { margin: 0.6rem 0 1rem; }
.blatt-karte p { color: var(--tinte-sanft); font-size: 1rem; max-width: 44ch; }
.blatt-karte .textlink { margin-top: 1.6rem; }
.blatt-karte__bild {
  aspect-ratio: 4 / 5; border-radius: 999px 999px 0 0; overflow: hidden;
  position: relative;
  background: linear-gradient(165deg, var(--sand-hauch), #DDCDAE 55%, var(--sand-hauch));
  border: 1px solid var(--haar);
  display: grid; place-items: center;
}
.blatt-karte__bild .zweig { position: static; width: 44%; opacity: 0.55; }
/* Fotoflächen: Bild füllt den Bogen, ohne Zuschnitt (Motive sind 4:5 wie der Rahmen) */
.blatt-karte__bild--foto { background: none; border-color: transparent; }
.blatt-karte__bild--foto img { width: 100%; height: 100%; object-fit: cover; }
.blatt-karte__bild figcaption {
  position: absolute; bottom: 1.1rem;
  font-family: var(--ui); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--tinte-sanft);
}

/* ---------- Über Susanne ---------- */
.ueber { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: center; }
.ueber .bogenbild { justify-self: start; width: min(400px, 84vw); }
.unterschrift {
  font-family: var(--hand); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem);
  color: var(--berry); display: inline-block;
  margin-top: 1.8rem;
}
.platzhalter-innen { text-align: center; color: var(--tinte-sanft); padding: 2rem; }
.platzhalter-innen .zweig { position: static; width: 80px; margin: 0 auto 1rem; }
.platzhalter-innen span { font-family: var(--ui); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; display: block; }

/* ---------- Produkte & Gutscheine: Editorial-Liste ---------- */
.abschnitt--tief { background: var(--papier-tief); }
/* wärmere Sandfläche – trägt Susannes Sandton in die Seite */
.abschnitt--sand { background: linear-gradient(170deg, var(--sand-hauch), var(--papier-tief) 70%); }
.produkt-spalten { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
.produkt-liste { border-top: 1px solid var(--haar); }
.produkt-punkt {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.6rem; align-items: baseline;
  padding: 1.8rem 0; border-bottom: 1px solid var(--haar);
  transition: padding-left 0.4s var(--gang);
}
.produkt-punkt:hover { padding-left: 0.8rem; }
.produkt-punkt__nr { font-family: var(--serif); font-weight: 200; font-size: 1.15rem; color: var(--berry); }
.produkt-punkt h3 { font-size: 1.25rem; margin-bottom: 0.3rem; }
.produkt-punkt p { color: var(--tinte-sanft); font-size: 0.96rem; max-width: 52ch; }
.produkt-punkt__pfeil { color: var(--berry); font-size: 1.3rem; font-weight: 300; }
.produkt-spalten .knoepfe { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 2.4rem; }
.produkt-bild {
  margin-top: 2.8rem; aspect-ratio: 4 / 5; max-width: 340px;
  border-radius: 999px 999px 0 0; overflow: hidden;
  box-shadow: 0 30px 70px rgba(43, 33, 38, 0.14);
}
.produkt-bild img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Werte: stille Reihe mit Haarlinien ---------- */
.werte-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--haar); }
.wert-feld { border-right: 1px solid var(--haar); padding: 0.4rem 2rem; }
.wert-feld__nr {
  font-family: var(--ui); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.32em; color: var(--sand-tief); display: block; margin-bottom: 1rem;
}
.wert-feld h3 { font-size: 1.2rem; font-style: italic; margin-bottom: 0.5rem; }
.wert-feld p { font-size: 0.92rem; color: var(--tinte-sanft); }

/* ---------- Einladung (Berry-Fläche) ---------- */
.einladung { background: linear-gradient(170deg, var(--berry) 0%, var(--berry-tief) 100%); color: var(--creme); position: relative; overflow: hidden; }
.einladung .vorzeile { color: color-mix(in srgb, var(--creme) 70%, var(--berry)); }
.einladung h2 { color: var(--creme); }
.einladung h2 em, .einladung h1 em { color: #EFC3D9; }
.einladung .still { color: color-mix(in srgb, var(--creme) 82%, var(--berry)); margin-inline: auto; }
.einladung__innen { text-align: center; max-width: 760px; margin-inline: auto; position: relative; z-index: 1; }
.einladung .knoepfe { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; margin-top: 2.8rem; }
.einladung__hinweis {
  margin: 2.8rem auto 0; padding-top: 1.8rem; max-width: 46ch;
  border-top: 1px solid var(--haar-hell);
  font-size: 1.05rem; color: var(--creme);
}
.einladung__hinweis b { font-weight: 400; }
.einladung .deko-bogen { border-color: var(--haar-hell); left: auto; right: -10%; bottom: -30%; opacity: 1; }
.einladung .zweig { color: var(--creme); opacity: 0.14; width: clamp(200px, 24vw, 340px); top: -6%; left: -4%; transform: rotate(-150deg); }

/* ---------- Fußzeile ---------- */
.fussbereich {
  background: #241A1F; color: rgba(249, 245, 238, 0.75);
  padding: 4.5rem 0 2.5rem;
  position: relative; overflow: hidden;
}
/* Die Logo-Illustration als stiller Abschluss – groß, aber sehr zurückgenommen,
   damit sie den Text nicht stört. Auf schmalen Schirmen ausgeblendet. */
.fuss-illu {
  position: absolute; right: -4%; bottom: 12%;
  width: min(420px, 36vw); height: auto;
  opacity: 0.13; pointer-events: none; user-select: none;
}
.fussbereich .zeile { position: relative; z-index: 1; }
@media (max-width: 980px) { .fuss-illu { display: none; } }
.fussbereich a { transition: color 0.3s; }
.fussbereich a:hover { color: var(--creme); }
.fuss-spalten { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; padding-bottom: 3rem; }
.fuss-spalten h4 {
  font-family: var(--ui); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--creme); margin-bottom: 1.2rem;
}
.fuss-spalten ul { display: grid; gap: 0.55rem; font-size: 0.95rem; }
.fuss-marke { font-family: var(--serif); font-size: 1.6rem; font-weight: 300; color: var(--creme); margin-bottom: 1rem; }
.fuss-spalten p { font-size: 0.95rem; }
.fuss-unten {
  border-top: 1px solid rgba(249, 245, 238, 0.14); padding-top: 1.6rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
  font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.06em;
  color: rgba(249, 245, 238, 0.5);
}

/* ---------- Mail-Liste (Platzhalter – Anbindung an Mail-Dienst folgt) ----------
   Alles im Fließtext bleibt in der Serif und in EINER Größe (0.98rem);
   Sans-Kapitälchen sind ausschließlich der „Systemsprache" vorbehalten
   (Buttons, Labels). Das beruhigt den Block spürbar. */
.mailliste { margin-top: 1.1rem; max-width: 46ch; }
.mailliste__intro { font-size: 0.98rem; color: var(--tinte-sanft); margin: 0; }
.mailliste__reihe { display: flex; align-items: center; border-bottom: 1px solid var(--tinte); margin-top: 1.4rem; transition: border-color 0.3s; }
.mailliste__reihe:focus-within { border-color: var(--berry); }
.mailliste input[type="email"] {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  font-family: var(--serif); font-size: 0.98rem; color: var(--tinte); padding: 0.85em 0;
}
.mailliste input[type="email"]::placeholder { color: var(--tinte-sanft); opacity: 0.6; }
.mailliste__senden {
  background: none; border: none; cursor: pointer;
  font-family: var(--ui); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--berry); padding: 0.6em 0 0.6em 1.2em; white-space: nowrap;
  transition: opacity 0.3s;
}
.mailliste__senden:hover { opacity: 0.65; }
.mailliste__zustimmung {
  display: flex; gap: 0.65rem; align-items: flex-start; margin-top: 0.9rem;
  font-size: 0.82rem; line-height: 1.55;
  color: var(--tinte-sanft); opacity: 0.85; cursor: pointer; text-align: left;
}
.mailliste__zustimmung input { margin-top: 0.3em; accent-color: var(--berry); flex: none; }
.mailliste__zustimmung a { text-decoration: underline; text-underline-offset: 2px; }
.mailliste__danke { display: none; font-size: 0.98rem; color: var(--berry); margin-top: 1rem; }

/* Überleitung zum Shop – leise, gleiche Größe wie der übrige Fließtext */
.ueberleitung {
  margin: 2.2rem 0 1.2rem; padding-top: 1.8rem; border-top: 1px solid var(--haar);
  font-size: 0.98rem; color: var(--tinte-sanft); max-width: 46ch;
}
.einladung .ueberleitung {
  color: color-mix(in srgb, var(--creme) 78%, var(--berry));
  border-top-color: var(--haar-hell); margin-inline: auto;
}
.mailliste.gesendet form { display: none; }
.mailliste.gesendet .mailliste__danke { display: block; }
/* helle Variante auf der Berry-Fläche */
.mailliste--hell { margin-inline: auto; }
.mailliste--hell .mailliste__intro { color: color-mix(in srgb, var(--creme) 80%, var(--berry)); }
.mailliste--hell .mailliste__reihe { border-bottom-color: var(--creme); }
.mailliste--hell .mailliste__reihe:focus-within { border-color: #EFC3D9; }
.mailliste--hell input[type="email"] { color: var(--creme); }
.mailliste--hell input[type="email"]::placeholder { color: color-mix(in srgb, var(--creme) 65%, var(--berry)); opacity: 1; }
.mailliste--hell .mailliste__senden { color: var(--creme); }
.mailliste--hell .mailliste__zustimmung { color: color-mix(in srgb, var(--creme) 75%, var(--berry)); }
.mailliste--hell .mailliste__zustimmung input { accent-color: var(--creme); }
.mailliste--hell .mailliste__danke { color: var(--creme); }

/* ---------- WhatsApp, ruhig ---------- */
.wa-still {
  position: fixed; right: clamp(1.2rem, 2.4vw, 2.4rem); bottom: clamp(1.2rem, 2.4vw, 2.4rem);
  z-index: 45; width: 58px; height: 58px; border-radius: 999px;
  background: #25D366; display: grid; place-items: center;
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.35);
  transition: transform 0.35s var(--gang);
}
.wa-still:hover { transform: translateY(-4px); }
.wa-still svg { width: 30px; height: 30px; fill: #fff; }

/* ==========================================================
   Bausteine für die Unterseiten (Leistungen, Preise, Kontakt,
   Rechtstexte). Bewusst dieselbe Sprache wie die Startseite:
   Haarlinien statt Karten, Serif im Fließtext, Sans nur für
   Labels und Buttons.
   ========================================================== */

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(2rem, 1.5rem + 2vw, 3.5rem); position: relative; }
.seitenkopf__innen { max-width: 62ch; }
.seitenkopf h1 { font-size: clamp(2.4rem, 1.8rem + 2.6vw, 4rem); margin-bottom: 1.4rem; }
.seitenkopf .still { font-size: 1.06rem; }
.seitenkopf .zweig { width: clamp(120px, 13vw, 190px); top: 12%; right: 2%; transform: rotate(18deg); }

/* ---------- Leistungs-Kategorien ---------- */
.kategorie { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.kategorie:first-of-type { margin-top: 0; }
.kategorie__kopf {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: baseline;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--haar); margin-bottom: 2rem;
}
.kategorie__nr {
  font-family: var(--serif); font-weight: 200;
  font-size: clamp(2.4rem, 2rem + 1.6vw, 3.6rem); color: var(--berry);
  line-height: 1; opacity: 0.85;
}
.kategorie__kopf h2 { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.kategorie__kopf .beisatz {
  font-family: var(--ui); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--sand-tief);
  display: block; margin-top: 0.5rem;
}
.kategorie__vorspann { color: var(--tinte-sanft); max-width: 62ch; margin-bottom: 2rem; }

.behandlung { padding: 1.6rem 0; border-bottom: 1px solid var(--haar); }
.behandlung:last-child { border-bottom: none; }
.behandlung h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.behandlung p { color: var(--tinte-sanft); font-size: 0.98rem; max-width: 66ch; margin: 0; }

/* Schlagworte – als feine Linienreihe, nicht als bunte Pillen */
.schlagworte { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin-bottom: 2rem; }
.schlagworte span {
  font-family: var(--ui); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand-tief);
  padding-bottom: 0.3em; border-bottom: 1px solid var(--sand);
}

/* ---------- Preisliste ---------- */
.preisgruppe { margin-top: clamp(2.6rem, 2rem + 2vw, 4rem); }
.preisgruppe:first-of-type { margin-top: 0; }
.preisgruppe h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); margin-bottom: 0.4rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--haar);
}
.preisgruppe__beisatz {
  font-family: var(--ui); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--sand-tief);
  display: block; margin: -0.2rem 0 1.4rem;
}
.preiszeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--haar);
  transition: padding-left 0.4s var(--gang);
}
.preiszeile:hover { padding-left: 0.6rem; }
.preiszeile:last-child { border-bottom: none; }
.preiszeile__name { color: var(--tinte); }
.preiszeile__name small { display: block; font-size: 0.86rem; color: var(--tinte-sanft); margin-top: 0.15rem; }
.preiszeile__preis { font-size: 1.15rem; color: var(--berry); white-space: nowrap; }
.preishinweis {
  margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--haar);
  font-size: 0.92rem; color: var(--tinte-sanft);
}

/* ---------- Kontaktangaben ---------- */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 5rem); align-items: start; }
.angaben { border-top: 1px solid var(--haar); }
.angabe {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: baseline;
  padding: 1.3rem 0; border-bottom: 1px solid var(--haar);
}
.angabe__marke {
  font-family: var(--ui); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--sand-tief);
  min-width: 7.5em;
}
.angabe a { border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.angabe a:hover { border-bottom-color: var(--berry); color: var(--berry); }
.hinweiskasten {
  margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--haar);
  font-size: 0.95rem; color: var(--tinte-sanft); max-width: 60ch;
}
.hinweiskasten b { color: var(--berry); font-weight: 400; }

/* ---------- Fakten (nur belegte Angaben!) ---------- */
.fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--haar); }
.fakt { border-right: 1px solid var(--haar); padding: 0.4rem 2rem; }
.fakt__wert { font-family: var(--serif); font-weight: 200; font-size: clamp(2rem, 1.6rem + 1.4vw, 3rem); color: var(--berry); line-height: 1.1; }
.fakt__text { font-size: 0.95rem; color: var(--tinte-sanft); margin-top: 0.5rem; }

/* ---------- Stimmen (echte Google-Rezensionen) ---------- */
.bewertung {
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  flex-wrap: wrap; margin-bottom: 3.2rem;
}
.bewertung__wert { font-family: var(--serif); font-weight: 300; font-size: 2.4rem; color: var(--berry); line-height: 1; }
.bewertung__sterne { color: var(--sand); font-size: 1.1rem; letter-spacing: 0.16em; }
.bewertung__quelle {
  font-family: var(--ui); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinte-sanft);
}
.stimmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--haar); }
.stimme { border-right: 1px solid var(--haar); padding: 0.4rem 2rem; }
.stimme__text {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem); font-style: italic;
  color: var(--tinte); line-height: 1.65;
}
.stimme__name {
  font-family: var(--ui); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--sand-tief);
  margin-top: 1.2rem; display: block;
}
@media (max-width: 860px) {
  .stimmen { grid-template-columns: 1fr; border-left: none; border-top: 1px solid var(--haar); }
  .stimme { border-right: none; border-bottom: 1px solid var(--haar); padding: 1.6rem 0; }
}

/* ---------- Newsletter / „Aus dem Studio" ---------- */
.beitrag { max-width: 62ch; }
.beitrag p { margin-bottom: 1.3rem; font-size: 1.06rem; line-height: 1.8; color: var(--tinte); }
.beitrag h2 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2rem); margin: 3rem 0 1.4rem; }
.beitrag h3 { font-size: 1.25rem; margin: 2.2rem 0 0.9rem; }
.beitrag ul { margin: 0 0 1.4rem; }
.beitrag li { position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem; color: var(--tinte); }
.beitrag li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1px; background: var(--sand); }
.beitrag a { color: var(--berry); text-decoration: underline; text-underline-offset: 3px; }
.beitrag hr { border: none; border-top: 1px solid var(--haar); margin: 2.6rem 0; }
.beitrag b { font-weight: 600; }

/* Übersicht der Ausgaben – Zeilen mit Haarlinien, keine Kacheln */
.ausgaben { border-top: 1px solid var(--haar); }
.ausgabe {
  display: block; padding: 1.9rem 0; border-bottom: 1px solid var(--haar);
  transition: padding-left 0.4s var(--gang);
}
.ausgabe:hover { padding-left: 0.8rem; }
.ausgabe__datum {
  display: block; font-family: var(--ui); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--sand-tief);
  margin-bottom: 0.6rem;
}
.ausgabe__titel {
  display: block; font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.8rem);
  font-weight: 300; line-height: 1.2; color: var(--tinte);
  transition: color 0.3s;
}
.ausgabe:hover .ausgabe__titel { color: var(--berry); }
.ausgabe__vorschau { display: block; margin-top: 0.6rem; color: var(--tinte-sanft); font-size: 0.98rem; max-width: 62ch; }

/* ---------- Rechtstexte ---------- */
.rechtstext { max-width: 68ch; }
.rechtstext h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  margin: 3rem 0 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--haar);
}
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext h3 { font-size: 1.1rem; margin: 2rem 0 0.6rem; }
.rechtstext p, .rechtstext li { color: var(--tinte-sanft); font-size: 0.98rem; }
.rechtstext p { margin-bottom: 1rem; }
.rechtstext ul { margin: 0 0 1rem 1.2rem; list-style: none; }
.rechtstext li { position: relative; padding-left: 1rem; margin-bottom: 0.4rem; }
.rechtstext li::before { content: "–"; position: absolute; left: 0; color: var(--sand); }
.rechtstext a { color: var(--berry); text-decoration: underline; text-underline-offset: 2px; }
.rechtstext b, .rechtstext strong { color: var(--tinte); font-weight: 600; }

@media (max-width: 700px) {
  /* Zweig nicht in die Überschrift laufen lassen */
  .seitenkopf .zweig { width: 92px; top: 1%; right: 3%; opacity: 0.5; }
}
@media (max-width: 860px) {
  .kontakt-raster { grid-template-columns: 1fr; }
  .fakten { grid-template-columns: 1fr; border-left: none; border-top: 1px solid var(--haar); }
  .fakt { border-right: none; border-bottom: 1px solid var(--haar); padding: 1.4rem 0; }
  .angabe { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* ---------- Erscheinen beim Scrollen ---------- */
.zeigen { opacity: 0; transform: translateY(34px); transition: opacity 1s ease, transform 1s var(--gang); }
.zeigen.da { opacity: 1; transform: none; }
.zeigen[data-spaeter="1"] { transition-delay: 0.12s; }
.zeigen[data-spaeter="2"] { transition-delay: 0.24s; }
.zeigen[data-spaeter="3"] { transition-delay: 0.36s; }

/* ---------- Responsiv ---------- */
@media (max-width: 980px) {
  .buehne { grid-template-columns: 1fr; gap: 3rem; padding-top: 2rem; min-height: 0; }
  .bogenbild { justify-self: center; }
  .buehne__text { text-align: center; }
  .buehne__text .knoepfe { justify-content: center; }
  .buehne__hinweis { margin-inline: auto; }
  .scrollwink { display: none; }
  .ueber { grid-template-columns: 1fr; }
  .ueber .bogenbild { justify-self: center; }
  .produkt-spalten { grid-template-columns: 1fr; }
  .werte-reihe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--haar); }
  .wert-feld { padding: 1.6rem 1.4rem; border-bottom: 1px solid var(--haar); }
  .blatt-karte { grid-template-columns: 1fr; }
  .blatt-karte__bild { order: -1; max-width: 380px; }
  .galerie-kopf { flex-direction: column; align-items: flex-start; }
  .fuss-spalten { grid-template-columns: 1fr; }
}
/* ===========================================================
   Beitragsseiten „Aus dem Studio" (29.07.2026)
   Eine echte Lesespalte: mittig statt links angeklebt, viel Luft,
   Haarlinien als Taktgeber. Greift NUR über `--beitrag`, damit die
   übrigen Seiten (die dieselbe .seitenkopf-Klasse nutzen) unberührt
   bleiben.
   =========================================================== */

.seitenkopf--beitrag .seitenkopf__innen { margin-inline: auto; }
.seitenkopf--beitrag h1 { margin-bottom: 1.1rem; }
.seitenkopf--beitrag .vorzeile { margin-bottom: 1.4rem; }
/* Der Vorschautext ist der Anreißer, nicht Fließtext – kursiv und ruhiger */
.seitenkopf--beitrag .still {
  font-size: 1.14rem; font-style: italic; color: var(--tinte-sanft);
  max-width: 52ch;
}

.beitrag { max-width: 62ch; margin-inline: auto; }

/* Der erste Absatz trägt den Einstieg und darf größer sein */
.beitrag > p:first-child {
  font-size: 1.2rem; line-height: 1.75;
  margin-bottom: 1.9rem;
}

/* Zwischenüberschriften: kurzer Sandstrich statt Kastenlinie */
.beitrag h2, .beitrag h3 { margin-top: 3.6rem; }
.beitrag h2::before, .beitrag h3::before {
  content: ""; display: block; width: 44px;
  border-top: 1px solid var(--sand);
  margin-bottom: 1.3rem;
}
.beitrag h2:first-child, .beitrag h3:first-child { margin-top: 0; }

/* Das Beitragsbild darf über die Textspalte hinausragen – das gibt der
   Seite Rhythmus und füllt den Weißraum, der sonst rechts leer bliebe. */
.beitrag-bild { max-width: 80ch; margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem); }
.beitrag-bild img { width: 100%; height: auto; display: block; }
.beitrag-bild figcaption {
  font-family: var(--ui); font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--tinte-sanft); margin-top: 0.7rem; text-align: right;
}

/* Fuß des Beitrags: feine Linie, dann der Rückweg */
.beitrag-fuss {
  max-width: 62ch; margin: clamp(3rem, 2.5rem + 2vw, 4.5rem) auto 0;
  padding-top: 1.6rem; border-top: 1px solid var(--haar);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .zeigen { opacity: 1; transform: none; }
}