/* ═══════════════════════════════════════════════════════════
   body & soul — Kosmetik Hamburg-Niendorf
   Farbwelt und Schrift aus dem gedruckten Flyer abgeleitet:
   salbeigrünes Papier, dünne geometrische Grotesk, viel Luft.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Papier und Salbei, direkt vom Flyer */
  --papier:        #EFF0EA;
  --papier-tief:   #E4E7DD;
  --salbei:        #9FAE99;
  --salbei-hell:   #C3CEBD;
  --salbei-tief:   #5F6E59;
  --tinte:         #262A23;
  --tinte-weich:   #5A6055;
  --hinweis:       #F5EAD0;
  --hinweis-linie: #B8912F;

  --schrift:  "Jost", "Avenir Next", "Century Gothic", "Futura", "Trebuchet MS", sans-serif;
  --serife:   "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --rand:   clamp(1.5rem, 6vw, 7rem);
  --spur:   0.18em;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* Kein overflow-x: hidden am body — das schaltet position:sticky ab.
     Das übergrosse Claim-Band wird von #statement selbst beschnitten. */
}

h1, h2, h3, h4 { font-weight: 300; margin: 0; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; }

/* ── Kleine Etiketten über jedem Abschnitt ── */
.label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  color: var(--salbei-tief);
  margin-bottom: 1.25rem;
}

.abschnitt-kopf { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.abschnitt-kopf h2 {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  letter-spacing: -0.015em;
}

/* ═══ HERO ═══ */
/* Spalte statt fester Polster: der Inhalt zentriert sich ueber
   margin-block:auto, der Scroll-Hinweis sitzt am Ende der Spalte.
   Vorher lag der Hinweis absolut am unteren Rand und schob sich in den
   Buchen-Knopf, sobald der Hero kuerzer wurde. So kann das nicht mehr
   passieren, egal wie hoch das Fenster ist. */
#hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: clamp(2.5rem, 7vh, 4.5rem) var(--rand);
  background: var(--papier-tief);
  overflow: hidden;
}

/* Weicher Lichtschein statt Foto — Atmosphäre ohne Stockmaterial.
   Sitzt mittig hinter der Wortmarke, seit die Komposition zentriert
   ist. Oben rechts wirkte er wie ein Fleck neben dem Inhalt. */
#hero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 80vw; height: 80vw;
  max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(159,174,153,.38) 0%, rgba(159,174,153,0) 68%);
  pointer-events: none;
}

/* Zentriert, in derselben Sprache wie die Behandlungsliste.
   46rem ist bewusst dasselbe Mass wie #behandlungen-liste. */
.hero-inner {
  position: relative;
  max-width: 46rem;
  /* auto oben UND unten: verteilt den freien Platz gleichmaessig und
     zentriert den Block, ohne den Scroll-Hinweis zu verdraengen. */
  margin: auto;
  text-align: center;
}

.ort {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  color: var(--salbei-tief);
  margin-bottom: clamp(3rem, 10vh, 5rem);
}

/* Wortmarke mit der Trennlinie vom Flyer */
.logo { display: inline-block; }
.logo-zeile {
  display: block;
  font-size: clamp(3.4rem, 15vw, 7.5rem);
  font-weight: 200;
  letter-spacing: 0.02em;
  line-height: 0.92;
}
.logo-strich {
  display: block;
  height: 1px;
  background: var(--tinte);
  margin: 0.35em 0 0.3em;
  /* Waechst aus der Mitte, seit die Wortmarke zentriert steht.
     Von links wachsend zog er den Blick aus der Achse. */
  transform-origin: center;
  animation: strich-wachsen 1.4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes strich-wachsen { from { transform: scaleX(0); } }

.claim {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: var(--salbei-tief);
  margin-top: 1.6rem;
}

.hero-satz {
  max-width: 32rem;
  margin: clamp(2.5rem, 7vh, 3.5rem) auto 2.75rem;
  color: var(--tinte-weich);
  font-size: 1.0625rem;
  text-wrap: balance;   /* verhindert eine einzelne Restzeile unter dem Block */
}

.hero-rand {
  position: absolute;
  left: var(--rand); right: var(--rand); bottom: 0;
  height: 1px;
  background: var(--salbei-hell);
}

/* Flache Fenster (Laptop 1280x720, halbierte Fenster): der Hero brauchte
   dort mehr Hoehe als das Bild und schob den Scroll-Hinweis unter die
   Kante. Ein Hinweis, den man nicht sieht, ist keiner. Die Wortmarke
   richtet sich hier nach der Hoehe statt nach der Breite. */
@media (max-height: 820px) {
  .logo-zeile { font-size: clamp(2.6rem, 11vh, 5.5rem); }
  .ort { margin-bottom: clamp(1.25rem, 4vh, 2.5rem); }
  .claim { margin-top: 1.1rem; }
  .hero-satz { margin-block: clamp(1.25rem, 4vh, 2.25rem) 1.75rem; }
  .scroll-strich { height: 2rem; }
}

/* Sehr flach (halbiertes Fenster, alte Netbooks): der Ort verschwindet,
   die Adresse steht ohnehin im Hero-Satz und im Kontakt. */
@media (max-height: 660px) and (min-width: 42rem) {
  .ort { display: none; }
  .logo-zeile { font-size: clamp(2.4rem, 9.5vh, 4.5rem); }
  .hero-satz { margin-block: 1.25rem 1.25rem; font-size: 1rem; }
  .scroll-strich { height: 1.5rem; }
  .scroll-hinweis { gap: 0.5rem; }
}

/* ── Knopf: nur eine Linie, kein Block ── */
.knopf-linie {
  display: inline-block;
  border: 0;
  background: none;
  padding: 0 0 0.45rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  text-decoration: none;
  color: var(--tinte);
  cursor: pointer;
  border-bottom: 1px solid var(--tinte);
  transition: color .3s, border-color .3s, letter-spacing .3s;
}
.knopf-linie:hover { color: var(--salbei-tief); border-color: var(--salbei); letter-spacing: 0.24em; }
.knopf-linie--klein { font-size: 0.72rem; padding-bottom: 0.3rem; }

/* ═══ ZWEI EINSTIEGE ═══ */
#bereiche {
  display: grid;
  background: var(--papier);
  border-top: 1px solid var(--salbei-hell);
  border-bottom: 1px solid var(--salbei-hell);
}
@media (min-width: 48rem) {
  #bereiche { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .bereich:first-child { border-right: 1px solid var(--salbei-hell); border-bottom: 0; }
}

.bereich {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--salbei-hell);
  background: var(--papier);
  text-align: left;
  font-family: inherit;
  color: inherit;
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--rand);
  cursor: pointer;
  position: relative;
  transition: background .4s;
}
.bereich:last-child { border-bottom: 0; }
.bereich:hover { background: var(--papier-tief); }
.bereich-nr {
  font-family: var(--serife);
  font-size: 0.95rem;
  color: var(--salbei);
  display: block;
  margin-bottom: 1.5rem;
}
.bereich h2 {
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  margin-bottom: 0.9rem;
}
.bereich p {
  color: var(--tinte-weich);
  max-width: 24rem;
  font-size: 0.98rem;
}
.bereich-pfeil {
  display: block;
  margin-top: 2rem;
  color: var(--salbei-tief);
  transition: transform .35s;
}
.bereich:hover .bereich-pfeil { transform: translateX(0.6rem); }

/* ═══ BEHANDLUNGEN ═══ */
#behandlungen { padding: clamp(4.5rem, 12vh, 8rem) var(--rand); }

.filter { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.25rem; }
.filter button {
  border: 0; background: none; padding: 0 0 0.35rem;
  font-family: inherit;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  color: var(--tinte-weich);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.filter button:hover { color: var(--tinte); }
.filter .filter-aktiv { color: var(--tinte); border-bottom-color: var(--tinte); }

/* Kategorien und Leistungszeilen stehen gesammelt weiter unten
   unter "BEHANDLUNGSLISTE". Vorher lagen sie auf drei Blöcke
   verteilt, die sich gegenseitig überschrieben. */

/* ═══ ÜBER UNS ═══ */
#ueber-uns {
  padding: clamp(4rem, 10vh, 7rem) var(--rand);
  background: var(--papier-tief);
}

/* ═══ KONTAKT ═══ */
#kontakt { padding: clamp(4rem, 10vh, 7rem) var(--rand) 3rem; }

.kontakt-raster {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--salbei-hell);
}
@media (min-width: 42rem) {
  .kontakt-raster { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}
.kontakt-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  color: var(--salbei-tief);
  margin-bottom: 0.75rem;
}
.kontakt-wert { font-size: 1.05rem; line-height: 1.6; }
.kontakt-wert a { text-decoration: none; border-bottom: 1px solid var(--salbei); }

.fusszeile {
  margin-top: 2.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  color: var(--salbei);
}

/* ═══ PLATZHALTER — im Gespräch bewusst sichtbar ═══ */
.platzhalter {
  background: var(--hinweis);
  border-left: 3px solid var(--hinweis-linie);
  padding: 0.85rem 1.1rem;
  font-style: italic;
  font-size: 0.92rem;
  color: #6B5714;
  max-width: 42rem;
}
.platzhalter--klein { font-size: 0.85rem; padding: 0.6rem 0.85rem; }

/* ═══ Bewegung nur, wenn erwünscht ═══ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ═══ BUCHUNG (Dialog) ═══ */
#buchung {
  border: 0;
  padding: 0;
  background: var(--papier);
  color: var(--tinte);
  max-width: 34rem;
  width: calc(100% - 2rem);
  box-shadow: 0 2rem 5rem rgba(38,42,35,.18);
}
#buchung::backdrop { background: rgba(38,42,35,.45); backdrop-filter: blur(2px); }

#buchung form,
#buchung-bestaetigung { padding: clamp(1.75rem, 5vw, 2.75rem); }

#buchung h3 { font-size: 1.75rem; margin-bottom: 0.3rem; }
.buchung-preis {
  font-family: var(--serife);
  font-size: 1.15rem;
  color: var(--salbei-tief);
  margin-bottom: 2rem;
}

#buchung-slots { border: 0; padding: 0; margin: 0 0 1.75rem; }
#buchung-slots legend {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  color: var(--salbei-tief);
  padding: 0;
  margin-bottom: 1rem;
}
.slot-tag { margin-bottom: 1.25rem; }
.slot-datum {
  font-size: 0.88rem;
  color: var(--tinte-weich);
  margin-bottom: 0.5rem;
}
.slot-reihe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot span {
  display: block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--salbei-hell);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.slot:hover span { border-color: var(--salbei); }
.slot input:checked + span {
  background: var(--tinte);
  border-color: var(--tinte);
  color: var(--papier);
}
.slot input:focus-visible + span { outline: 2px solid var(--salbei-tief); outline-offset: 2px; }

.buchung-felder { display: grid; gap: 1rem; margin-bottom: 1.25rem; }

/* Datenschutz-Hinweis direkt am Formular, in beiden Formularen gleich */
.formular-hinweis {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--tinte-weich);
  margin: 0 0 1.75rem;
}
.formular-hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#kontakt-form .formular-hinweis { margin: 0; }
#kontakt .formular-hinweis { color: var(--salbei); }
@media (min-width: 34rem) { .buchung-felder { grid-template-columns: 1fr 1fr; } }
.buchung-felder label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  color: var(--salbei-tief);
}
.buchung-felder input {
  display: block;
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--salbei);
  background: none;
  font-family: inherit;
  font-size: 1rem;
  color: var(--tinte);
}
.buchung-felder input:focus { outline: 0; border-bottom-color: var(--tinte); }

#buchung menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.knopf-still {
  border: 0; background: none; padding: 0;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--tinte-weich);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.knopf-still:hover { color: var(--tinte); }

#buchung-bestaetigung { text-align: center; }
.haken {
  font-size: 2rem;
  color: var(--salbei-tief);
  margin-bottom: 0.75rem;
}
#buchung-bestaetigung h3 { margin-bottom: 0.75rem; }
#buchung-bestaetigung-text { color: var(--tinte-weich); margin-bottom: 2rem; }

/* ═══ CHAT-WIDGET ═══ */
#chat { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; }

/* Leise Linie statt schwarzem Block: der gefuellte Kasten war das
   lauteste Element auf einer sonst sehr zurueckhaltenden Seite. */
#chat-oeffnen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.9rem;
  min-height: 2.9rem;
  border: 1px solid var(--tinte);
  background: var(--papier);
  color: var(--tinte);
  font-family: inherit;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  padding: 0.85rem 1.4rem;
  cursor: pointer;
  box-shadow: 0 0.5rem 1.5rem rgba(38,42,35,.09);
  transition: padding .45s cubic-bezier(.22,.7,.25,1),
              border-radius .45s cubic-bezier(.22,.7,.25,1),
              background .3s, color .3s;
}
#chat-oeffnen:hover { background: var(--tinte); color: var(--papier); }

/* Das Wort klappt ueber die Breite ein, nicht ueber display:none:
   nur so laesst sich der Uebergang ueberhaupt animieren. */
.chat-wort {
  max-width: 6rem;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width .45s cubic-bezier(.22,.7,.25,1), opacity .3s ease;
}
.chat-zeichen { display: inline-block; }

#chat.chat-klein #chat-oeffnen {
  padding: 0.85rem;
  border-radius: 50%;
}
#chat.chat-klein .chat-wort {
  max-width: 0;
  opacity: 0;
}

/* Bei Bewegungsempfindlichkeit bleibt der Knopf, wie er ist. Ein
   Element, das beim Scrollen seine Groesse aendert, ist genau die Art
   Bewegung, die hier stoert. */
@media (prefers-reduced-motion: reduce) {
  #chat-oeffnen, .chat-wort { transition: none; }
  #chat.chat-klein #chat-oeffnen { padding: 0.85rem 1.4rem; border-radius: 0; }
  #chat.chat-klein .chat-wort { max-width: 6rem; opacity: 1; }
}

#chat-fenster {
  position: absolute;
  right: 0; bottom: 0;
  width: min(23rem, calc(100vw - 2.5rem));
  height: min(30rem, calc(100vh - 3rem));
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--salbei-hell);
  box-shadow: 0 1.5rem 4rem rgba(38,42,35,.2);
}
#chat-fenster[hidden] { display: none; }

#chat-fenster header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--salbei-hell);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  color: var(--salbei-tief);
}
/* Der Name gross, die Rolle klein daneben: der Pflichthinweis nach Art. 50
   AI Act muss lesbar sein, darf den Kopf aber nicht dominieren. */
.chat-titel b {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinte-weich);
}
.chat-titel b::before {
  content: "·";
  margin: 0 0.4em;
}
#chat-schliessen {
  border: 0; background: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
  color: var(--tinte-weich); padding: 0;
}

#chat-verlauf {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.chat-blase {
  max-width: 85%;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.chat-assistant { background: var(--papier-tief); align-self: flex-start; }
.chat-user { background: var(--tinte); color: var(--papier); align-self: flex-end; }
.chat-wartet { opacity: .5; animation: pulsieren 1.2s ease-in-out infinite; }
@keyframes pulsieren { 50% { opacity: .2; } }

#chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem 1.1rem;
  border-top: 1px solid var(--salbei-hell);
}
#chat-eingabe {
  flex: 1;
  border: 0;
  border-bottom: 1px solid var(--salbei);
  background: none;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--tinte);
  padding: 0.35rem 0;
}
#chat-eingabe:focus { outline: 0; border-bottom-color: var(--tinte); }
#chat-form button {
  border: 0; background: none; cursor: pointer;
  font-size: 1.1rem; color: var(--tinte); padding: 0 0.3rem;
}

/* ═══════════════════════════════════════════════════════════
   FARBZONEN, KORN UND BEWEGUNG
   Rhythmus statt Gleichförmigkeit: hell · hell · DUNKEL ·
   hell · mittel · DUNKEL
   ═══════════════════════════════════════════════════════════ */

:root {
  --dunkel:       #22281F;
  --dunkel-tief:  #1A1F18;
  --auf-dunkel:   #E8EBE2;
  --mittel:       #D6DDCE;
}

/* ── Feines Korn über allem: nimmt den Flächen das Digitale ── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Bewusst OHNE mix-blend-mode: eine bildschirmfüllende, fixierte
     Blend-Ebene zwingt den Browser bei jedem Scroll-Bild zum Neu-
     Zusammensetzen der ganzen Seite. Auf einem älteren Laptop ruckelt
     das sichtbar — und genau darauf läuft die Präsentation. */
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.42'/%3E%3C/svg%3E");
}
#chat, #buchung { z-index: 60; }

/* ── Reveal-Choreografie ── */
.js [data-reveal-kind] {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity .85s cubic-bezier(.22,.7,.25,1),
              transform .85s cubic-bezier(.22,.7,.25,1);
}
.js .ist-sichtbar [data-reveal-kind] { opacity: 1; transform: none; }

/* Bereichskarten wachsen leicht heran statt von unten zu kommen */
.js #bereiche [data-reveal-kind] { transform: translateY(0) scale(.985); }
.js #bereiche.ist-sichtbar [data-reveal-kind] { transform: none; }

/* Über-uns rechts kommt von rechts herein */
.js .ueber-rechts [data-reveal-kind] { transform: translateX(1.5rem); }
.js .ueber-rechts.ist-sichtbar [data-reveal-kind] { transform: none; }

/* ── HERO: grösser, mit Tiefe ── */
#hero {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 15% 0%, #F3F4EE 0%, rgba(243,244,238,0) 55%),
    linear-gradient(170deg, var(--papier-tief) 0%, #DCE2D4 100%);
}
.logo-zeile { font-size: clamp(3.8rem, 17vw, 9rem); }

/* ── GROSSER MOMENT: dunkle Zone mit wanderndem Claim ── */
#statement {
  position: relative;
  background: var(--dunkel);
  color: var(--auf-dunkel);
  padding: clamp(5rem, 16vh, 10rem) 0;
  overflow: hidden;
}
#statement::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 70%;
  background: radial-gradient(ellipse at 50% 100%, rgba(159,174,153,.30) 0%, rgba(159,174,153,0) 70%);
  pointer-events: none;
}

.statement-band {
  display: flex;
  gap: 4vw;
  white-space: nowrap;
  will-change: transform;
  margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
}
.statement-band span {
  font-size: clamp(3.5rem, 13vw, 11rem);
  font-weight: 200;
  letter-spacing: 0.02em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(232,235,226,.42);
  text-stroke: 1px rgba(232,235,226,.42);
}
.statement-band span:first-child {
  color: var(--auf-dunkel);
  -webkit-text-stroke: 0;
  text-stroke: 0;
}
/* Handy: 3.5rem Mindestgroesse war breiter als der Bildschirm, das Band
   lief beim Scrollen ab, bevor man "Your time to glow" lesen konnte
   (Rueckmeldung Studio 13.10.2026, Samsung). Desktop bleibt unveraendert. */
@media (max-width: 42rem) {
  .statement-band { padding-left: var(--rand); }
  .statement-band span { font-size: 10.5vw; }
}

.statement-text {
  position: relative;
  padding: 0 var(--rand);
  max-width: 46rem;
}
.label--hell { color: var(--salbei); }
.statement-satz {
  font-family: var(--serife);
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.35;
  font-weight: 300;
}

/* ── ÜBER UNS: geteiltes Raster auf mittlerem Ton ── */
#ueber-uns { background: var(--mittel); }
.ueber-raster { display: grid; gap: 2.5rem; }
@media (min-width: 48rem) {
  .ueber-raster { grid-template-columns: 1fr 1.15fr; gap: 4rem; align-items: start; }
}
.ueber-links h2 {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.ueber-text {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.65;
  color: var(--tinte);
  margin-bottom: 1.75rem;
}

/* ── KURS: Babymassage, heller Ton zwischen Liste und Über uns ── */
#kurs {
  padding: clamp(4rem, 10vh, 7rem) var(--rand);
  background: var(--papier-tief);
  border-top: 1px solid var(--salbei-hell);
}
.kurs-punkte {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: grid;
  gap: 0.6rem;
  font-weight: 300;
}
.kurs-punkte li::before {
  content: "—";
  color: var(--salbei);
  margin-right: 0.7rem;
}
.kurs-termin {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--salbei-tief);
  margin-bottom: 1rem;
}

/* ── STELLEN: hellster Ton vor dem dunklen Abschluss ──
   Rhythmus: Kurs (papier-tief) · Über uns (mittel) · Stellen (papier,
   mit Salbei-Schimmer) · Kontakt (dunkel). Die Stellen sind Zeilen wie
   in der Preisliste: Nummer, grosser Serifen-Titel, Linie zieht sich auf. */
#stellen {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 12vh, 8rem) var(--rand);
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(159,174,153,.22) 0%, rgba(159,174,153,0) 60%),
    radial-gradient(60% 70% at 0% 100%, rgba(195,206,189,.30) 0%, rgba(195,206,189,0) 65%),
    var(--papier);
  border-top: 1px solid var(--salbei-hell);
}
.stellen-raster {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 6vw, 3.5rem);
  max-width: 72rem;
}
/* iPad quer und PC: zwei Spalten. iPad hoch (768px) bleibt einspaltig,
   sonst wird der Serifen-Titel neben dem Text zu eng. */
@media (min-width: 60rem) {
  .stellen-raster { grid-template-columns: 1fr 1.1fr; gap: 5rem; align-items: end; }
}

.stellen-kopf h2 {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin-bottom: 1.75rem;
}
.stellen-kopf h2 em {
  font-family: var(--serife);
  font-style: italic;
  font-weight: 300;
  color: var(--salbei-tief);
  letter-spacing: 0;
}
.stellen-text {
  font-size: clamp(1.02rem, 2vw, 1.15rem);
  line-height: 1.7;
  font-weight: 300;
  color: var(--tinte-weich);
  max-width: 30rem;
}

.stellen-liste ul { list-style: none; margin: 0 0 2.5rem; padding: 0; }
.stelle {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0 clamp(1rem, 3vw, 1.75rem);
  padding: clamp(1.25rem, 3vw, 1.75rem) 0;
}
/* Linie unter jeder Zeile: zieht sich beim Einblenden von links auf */
.stelle::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--salbei);
  opacity: .55;
  transform-origin: left center;
}
.stelle:first-child::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--salbei);
  opacity: .55;
  transform-origin: left center;
}
.stelle-nummer {
  font-family: var(--serife);
  font-size: 0.95rem;
  letter-spacing: 0.24em;
  color: var(--salbei-tief);
  /* Cormorant setzt sonst Mediaevalziffern, "01" liest sich dann wie "o1" */
  font-variant-numeric: lining-nums tabular-nums;
}
.stelle-titel {
  font-family: var(--serife);
  font-weight: 300;
  /* Skaliert auch unter 375px mit: "Fachkosmetikerin" ist ein langes Wort
     und drückte die Spalte bei 320px sonst über das Raster hinaus. */
  font-size: clamp(1.5rem, 7.5vw, 2.6rem);
  line-height: 1.1;
  color: var(--tinte);
  transition: transform .5s cubic-bezier(.22,.7,.25,1);
  hyphens: auto;
}
.stelle-zusatz {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  color: var(--salbei-tief);
  white-space: nowrap;
}
@media (hover: hover) {
  .stelle:hover .stelle-titel { transform: translateX(0.5rem); }
}

.stellen-aktion { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.9rem 1.75rem; }
.stellen-hinweis {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--tinte-weich);
  overflow-wrap: anywhere;
}

/* Einblenden: Kopf von unten (Grundregel), Zeilen gleiten von rechts,
   die Linien ziehen sich mit derselben Verzoegerung auf wie ihre Zeile. */
.js .stellen-liste .stelle { transform: translateX(1.25rem); }
.js .stellen-liste .stelle::after,
.js .stellen-liste .stelle::before {
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(.22,.7,.25,1);
  transition-delay: inherit;
}
.js .stellen-liste.ist-sichtbar .stelle { transform: none; }
.js .stellen-liste.ist-sichtbar .stelle::after,
.js .stellen-liste.ist-sichtbar .stelle::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .js .stellen-liste .stelle,
  .js .stellen-liste .stelle::after,
  .js .stellen-liste .stelle::before { transform: none; transition: none; }
  .stelle-titel { transition: none; }
}

/* ── KONTAKT: dunkler Abschluss ── */
#kontakt { background: var(--dunkel-tief); color: var(--auf-dunkel); }
#kontakt .label,
#kontakt .kontakt-label { color: var(--salbei); }
#kontakt .kontakt-wert a { border-bottom-color: var(--salbei-tief); }
.kontakt-raster { border-bottom-color: rgba(159,174,153,.28); }
.fusszeile { color: var(--salbei-tief); }

/* Platzhalter bleibt auch auf Dunkel lesbar */
#kontakt .platzhalter { background: rgba(245,234,208,.92); }

/* ── Behandlungsliste behält den hellen Ton ── */
#behandlungen { background: var(--papier); position: relative; }

/* ═══════════════════════════════════════════════════════════
   NAVIGATION, FOKUS, DRUCK
   ═══════════════════════════════════════════════════════════ */

/* ── Sprunglink für Tastatur ── */
.sprunglink {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--tinte);
  color: var(--papier);
  padding: 0.85rem 1.35rem;
  font-size: 0.8rem;
  text-decoration: none;
}
.sprunglink:focus { left: 1rem; top: 1rem; }

/* ── Sticky-Kopf ── */
#kopfleiste {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--rand);
  background: rgba(239, 240, 234, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--salbei-hell);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,.7,.25,1);
}
#kopfleiste[hidden] { display: none; }
#kopfleiste.kopf-da { opacity: 1; transform: none; }

.kopf-marke {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--tinte);
}
.kopf-strich { width: 1.4rem; height: 1px; background: var(--tinte); }
.kopf-cta { white-space: nowrap; }

/* ── Scroll-Hinweis im Hero ── */
/* Mittig unter der Komposition. Der Strich steht jetzt senkrecht und
   wandert nach unten: waagerecht zeigte er zur Seite, obwohl er zum
   Weiterscrollen auffordert. */
.scroll-hinweis {
  position: relative;   /* liegt in der Hero-Spalte, nicht mehr darueber */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  /* Mindestabstand zum Buchen-Knopf. Ohne ihn klebt der Hinweis am
     Knopf, sobald der Hero wenig freie Hoehe hat. */
  margin-top: clamp(2rem, 5vh, 3.5rem);
}

/* svh nur dort, wo es etwas bringt: auf dem Handy verhindert es den
   Sprung beim Ein- und Ausblenden der Browserleiste. Auf dem Desktop
   loeste es je nach Browser kleiner auf als vh und stauchte den Hero. */
@media (max-width: 42rem) {
  #hero { min-height: 100svh; }
}
.scroll-wort {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--salbei-tief);
}
.scroll-strich {
  display: block;
  width: 1px;
  height: 3rem;
  background: var(--salbei);
  transform-origin: top;
  animation: strich-wandern 2.4s ease-in-out infinite;
}
@keyframes strich-wandern {
  0%, 100% { transform: scaleY(.3); opacity: .45; }
  50%      { transform: scaleY(1);  opacity: 1; }
}

/* Eine sich endlos wiederholende Bewegung ist genau das, was bei
   Bewegungsempfindlichkeit stoert. Der Hinweis bleibt, er steht nur still. */
@media (prefers-reduced-motion: reduce) {
  .scroll-strich { animation: none; }
  .logo-strich { animation: none; }
}

/* ── Filterleiste klebt beim Durchscrollen der 24 Behandlungen ── */
.filter {
  position: sticky;
  /* Muss UNTER der fixierten Kopfleiste andocken, sonst verschwindet
     die Leiste dahinter. Wert entspricht der Kopfhoehe. */
  top: 3.4rem;
  z-index: 20;
  margin-top: 2.25rem;
  padding: 1rem 0;
  background: linear-gradient(var(--papier) 72%, rgba(239,240,234,0));
}

/* ── Sichtbarer Fokus überall ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--salbei-tief);
  outline-offset: 3px;
  border-radius: 1px;
}
#kontakt a:focus-visible,
#statement a:focus-visible { outline-color: var(--salbei); }

/* Die Druckansicht steht am Ende der Datei. Sie muss alles ueberschreiben
   koennen, was vorher kommt, und CSS entscheidet bei gleicher Spezifitaet
   nach Reihenfolge. Hier stand sie frueher mittendrin: der getoente
   Hintergrund und die Listenbreite gewannen deshalb gegen den Druck. */

/* ── Chat-Vorschläge ── */
.chat-vorschlaege {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.2rem;
}
.chat-chip {
  border: 1px solid var(--salbei);
  background: none;
  color: var(--tinte);
  font-family: inherit;
  font-size: 0.82rem;
  text-align: left;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.chat-chip:hover { background: var(--papier-tief); border-color: var(--salbei-tief); }

/* ── Bestätigungs-Knöpfe im Buchungsdialog ── */
.bestaetigung-knoepfe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   HINTERGRUND DER PREISLISTE
   Der längste Abschnitt der Seite war die flachste Fläche.
   Tiefe über weiche Lichtschichten und ein Schattenwort je
   Kategorie — nie über Kontrast, der das Lesen stört.
   ═══════════════════════════════════════════════════════════ */

#behandlungen {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg,
      #F4F5EF 0%,
      var(--papier) 22%,
      #EAECE3 62%,
      #E3E7DB 100%);
}

/* Zwei weiche Lichter, versetzt: erzeugt Bewegung beim Scrollen,
   ohne dass irgendwo eine harte Kante entsteht. */
#behandlungen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46rem 34rem at 88% 12%, rgba(159,174,153,.26) 0%, rgba(159,174,153,0) 62%),
    radial-gradient(38rem 30rem at 4% 58%, rgba(195,206,189,.34) 0%, rgba(195,206,189,0) 60%),
    radial-gradient(30rem 24rem at 78% 92%, rgba(159,174,153,.20) 0%, rgba(159,174,153,0) 65%);
}

/* ═══════════════════════════════════════════════════════════
   BEHANDLUNGSLISTE
   Eine schmale, zentrierte Speisekarte statt einer Tabelle über
   die volle Breite. Name und Preis stehen auf einer Grundlinie,
   verbunden durch eine Punktlinie: das Auge muss nicht wandern.
   Farbe erscheint nur noch punktuell im Kategoriekopf, nicht
   mehr als getönte Fläche.
   ═══════════════════════════════════════════════════════════ */

#behandlungen-liste {
  max-width: 46rem;
  margin-inline: auto;
}

.kategorie {
  margin-top: clamp(4rem, 10vw, 7rem);
  scroll-margin-top: 6rem;
}
.kategorie:first-child { margin-top: clamp(2rem, 5vw, 3rem); }

/* ── Kopf: Strich, Nummer, Name. Zentriert, der einzige Farbort ── */
.kat-kopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
  text-align: center;
}
.kat-kopf::before {
  content: "";
  width: 3.5rem;
  height: 1px;
  margin-bottom: 1.5rem;
  background: var(--tinte);
  opacity: .35;
}
.kat-nummer {
  font-family: var(--serife);
  font-size: 0.95rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em;      /* gleicht die Sperrung rechts aus, sonst sitzt es links */
  color: var(--tinte-weich);
}
.kat-kopf h3 {
  font-family: var(--serife);
  font-style: italic;
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  line-height: 1.1;
  color: var(--tinte);
}

/* ── Eine Zeile ── */
.leistung {
  position: relative;
  padding: 1.35rem 0;
}
.leistung + .leistung {
  border-top: 1px solid rgba(95, 110, 89, .14);
}

/* Name · Punktlinie · Preis auf einer Grundlinie */
.leistung-kopf {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.leistung h4 {
  font-size: 1.12rem;
  line-height: 1.3;
  /* Darf umbrechen, ohne die Punktlinie wegzudrücken */
  flex: 0 1 auto;
  transition: transform .45s cubic-bezier(.22,.7,.25,1);
}
.fuellung {
  position: relative;
  flex: 1 1 1.5rem;
  min-width: 1.25rem;
  /* Sitzt auf der Grundlinie, nicht auf der Oberkante */
  transform: translateY(-0.32em);
  border-bottom: 1px dotted rgba(38, 42, 35, .3);
}
/* Beim Überfahren zieht sich eine durchgezogene Linie von links nach
   rechts über die gepunktete. Ohne Farbe braucht die Zeile ein anderes
   Signal, dass sie gemeint ist. */
.fuellung::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 1px solid var(--tinte);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.22,.7,.25,1);
}
.preis {
  flex: 0 0 auto;
  font-family: var(--serife);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--tinte);
  font-variant-numeric: lining-nums tabular-nums;
  transition: transform .45s cubic-bezier(.22,.7,.25,1);
}
.preis .euro {
  font-size: 0.85rem;
  color: var(--tinte-weich);
}

.beschreibung {
  margin-top: 0.5rem;
  max-width: 34rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--tinte-weich);
}

/* ── Fuss: Termin-Hinweis ──
   Seit 13.10.2026 ohne Behandlungsdauer (Wunsch des Studios). Vorher
   wechselte die Dauer beim Überfahren gegen diesen Hinweis. Ohne Dauer
   bliebe die Zeile bis zum Überfahren leer, darum steht er immer da. */
.leistung-fuss {
  display: flex;
  margin-top: 0.55rem;
  min-height: 1.1rem;
}

.leistung-cta {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.1;
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  color: var(--salbei-tief);
  cursor: pointer;
  transition: color .28s ease;
}
/* Unsichtbare Fläche über der ganzen Zeile: überall klickbar,
   der Fokus bleibt trotzdem auf dem echten Knopf. */
.leistung-cta::after {
  content: "";
  position: absolute;
  inset: 0;
}

.leistung:hover .leistung-cta,
.leistung:focus-within .leistung-cta { color: var(--tinte); }

/* Name und Preis ruecken minimal aufeinander zu: die Zeile zieht sich
   zusammen statt nur die Farbe zu wechseln. */
.leistung:hover h4,
.leistung:focus-within h4 { transform: translateX(0.4rem); }
.leistung:hover .preis,
.leistung:focus-within .preis { transform: translateX(-0.3rem); }
.leistung:hover .fuellung::after,
.leistung:focus-within .fuellung::after { transform: scaleX(1); }

.leistung-cta:focus-visible {
  outline: 2px solid var(--tinte);
  outline-offset: 4px;
}

/* ── Einblenden beim Scrollen ──
   Nur wenn JS laeuft. Ohne die .js-Bedingung bliebe die halbe Preisliste
   bei einem Skriptfehler unsichtbar, und das ist die Sektion, auf die es
   ankommt. Der Kategoriekopf zieht seinen Strich auf, die Zeilen steigen
   nacheinander an. */
.js .kategorie .kat-kopf::before {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .8s cubic-bezier(.22,.7,.25,1);
}
.js .kategorie .kat-nummer,
.js .kategorie .kat-kopf h3 {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.7,.25,1);
}
.js .kategorie .kat-kopf h3 { transition-delay: .1s; }

.js .leistung {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.7,.25,1);
}

.js .kategorie.ist-da .kat-kopf::before { transform: scaleX(1); }
.js .kategorie.ist-da .kat-nummer,
.js .kategorie.ist-da .kat-kopf h3 { opacity: 1; transform: none; }
.js .leistung.ist-da { opacity: 1; transform: none; }

/* Bei reduzierter Bewegung steht alles sofort und ruhig da. */
@media (prefers-reduced-motion: reduce) {
  .js .kategorie .kat-kopf::before,
  .js .kategorie .kat-nummer,
  .js .kategorie .kat-kopf h3,
  .js .leistung {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .leistung h4,
  .preis,
  .fuellung::after { transition: none; }
}

/* ── Platzhalter neu: gestrichelter Rahmen statt gelbem Kasten.
   Der gelbe Kasten las sich wie eine Fehlermeldung aus einem
   Formular und zog die ganze Seite ins Billige. ── */
.platzhalter {
  background: none;
  border: 1px dashed var(--salbei);
  border-left: 1px dashed var(--salbei);
  color: var(--tinte-weich);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  padding: 0.9rem 1.1rem;
  position: relative;
}
.platzhalter::before {
  content: "Offen";
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--salbei-tief);
  margin-bottom: 0.35rem;
}
#kontakt .platzhalter {
  background: none;
  border-color: rgba(159,174,153,.5);
  color: var(--salbei-hell);
}
#kontakt .platzhalter::before { color: var(--salbei); }

/* Die farbigen Kategoriefelder sind entfallen. Sie lagen als getoente
   Flaechen unter der ganzen Liste und lasen sich wie Textmarker. Die
   fuenf Farben stehen jetzt punktuell im Kategoriekopf: Strich, Nummer,
   Name, dazu der Preis beim Ueberfahren. Siehe "BEHANDLUNGSLISTE". */

/* Der weiche Verlauf des Abschnitts traegt die Tiefe jetzt allein,
   darum darf er wieder voll wirken. */
#behandlungen::before { opacity: .5; }

/* ═══════════════════════════════════════════════════════════
   DRUCKANSICHT
   Das Studio druckt die Preisliste aus. Dieser Block steht
   bewusst als letzter in der Datei: er muss gegen alles
   gewinnen, was oben steht.
   ═══════════════════════════════════════════════════════════ */
@media print {
  @page { margin: 16mm; }

  body { background: #fff; color: #000; font-size: 10.5pt; }
  body::after { display: none; }

  #hero, #bereiche, #statement, #ueber-uns, #kurs, #stellen,
  #chat, #kopfleiste, .filter, .scroll-hinweis,
  .sprunglink, .js-buchen, .platzhalter { display: none !important; }

  #behandlungen { padding: 0; background: #fff; }

  /* Nichts darf wegen einer nicht ausgeloesten Animation fehlen: auf
     Papier gibt es kein Scrollen, das den Beobachter noch ausloesen
     wuerde. Eine halb gedruckte Preisliste faellt erst am Kopierer auf. */
  .js [data-reveal-kind],
  .js .kategorie .kat-nummer,
  .js .kategorie .kat-kopf h3,
  .js .leistung {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .kategorie .kat-kopf::before { transform: none !important; }

  /* Kopfzeile fuer das Ausdruck-Blatt. Das position:absolute aus der
     Bildschirmfassung muss zurueckgesetzt werden, sonst liegt die Zeile
     als Vollflaeche hinter dem Text statt darueber. */
  #behandlungen::before {
    content: "body & soul · Your time to glow · Garstedter Weg 29, 22453 Hamburg-Niendorf · 040 585373";
    position: static;
    display: block;
    background: none;
    opacity: 1;
    font-size: 9pt;
    letter-spacing: 0.04em;
    padding-bottom: 6mm;
    margin-bottom: 6mm;
    border-bottom: 0.4pt solid #000;
  }

  .abschnitt-kopf h2 { font-size: 16pt; }

  /* Auf Papier zaehlt Dichte, nicht Luft: die Liste laeuft ueber die
     volle Blattbreite, der Kategoriekopf steht wieder linksbuendig. */
  #behandlungen-liste { max-width: none; margin-inline: 0; }
  .kategorie { margin-top: 7mm; break-inside: avoid; }
  .kategorie:first-child { margin-top: 0; }
  .kat-kopf {
    align-items: flex-start;
    text-align: left;
    gap: 0;
    margin-bottom: 2.5mm;
  }
  .kat-kopf::before { display: none; }
  .kat-nummer { font-size: 8pt; letter-spacing: 0.2em; color: #444; }
  .kat-kopf h3 { font-size: 12pt; color: #000; }

  .leistung { padding: 2.2mm 0; break-inside: avoid; }
  .leistung + .leistung { border-top: 0.3pt solid #999; }
  .fuellung { border-bottom-color: #bbb; }
  .beschreibung { margin-top: 1mm; color: #333; font-size: 9pt; max-width: none; }
  .preis { font-size: 13pt; color: #000; }
  .preis .euro { color: #333; }
  .leistung-fuss { display: block; min-height: 0; margin-top: 0.8mm; }
  .leistung-cta { display: none; }

  #kontakt { background: #fff; color: #000; padding: 8mm 0 0; }
  #kontakt .label, #kontakt .kontakt-label { color: #000; }
}

/* ═══════════════════════════════════════════════════════════
   ZUGANG ZUM MITARBEITERBEREICH (Fusszeile der Startseite)
   Der Bereich selbst steht seit 23.09.2026 in css/team.css.
   ═══════════════════════════════════════════════════════════ */

/* ── Zugang in der Fusszeile ── */
.fusszeile-team {
  margin-left: 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(159,174,153,.4);
  transition: border-color .25s, color .25s;
}
.fusszeile-team:hover { color: var(--papier); border-bottom-color: var(--salbei); }

/* ── Fehlermeldung im Buchungsdialog ── */
.buchung-fehler {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid #8A2F2F;
  background: rgba(138, 47, 47, .06);
  font-size: 0.92rem;
  color: #6B2424;
}

/* ═══════════════════════════════════════════════════════════
   KARTE, KONTAKTFORMULAR, RECHTSSEITEN
   ═══════════════════════════════════════════════════════════ */

/* ── Karte (Zwei-Klick) ── */
.karte { margin-top: clamp(3rem, 7vw, 4.5rem); }
.karte-platzhalter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: clamp(2rem, 5vw, 3rem);
  border: 1px solid rgba(159,174,153,.35);
  background: rgba(159,174,153,.06);
}
.karte-adresse { font-size: 1.05rem; }
.karte-hinweis {
  font-size: 0.75rem;
  color: var(--salbei);
}
.karte-route {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  text-decoration: none;
  border-bottom: 1px solid var(--salbei);
}
.karte-rahmen {
  width: 100%;
  height: clamp(16rem, 40vh, 24rem);
  border: 1px solid rgba(159,174,153,.35);
  display: block;
}

/* ── Kontaktformular ── */
.kontaktform { margin-top: clamp(3rem, 7vw, 4.5rem); max-width: 40rem; }
.kontaktform h3 {
  font-family: var(--serife);
  font-style: italic;
  font-size: clamp(1.5rem, 3.5vw, 2rem);
}
.kontaktform-satz {
  margin-top: 0.6rem;
  margin-bottom: 2rem;
  color: var(--tinte-weich);
  font-size: 0.98rem;
}
#kontakt-form { display: flex; flex-direction: column; gap: 1.4rem; }
.kontaktform-felder { display: grid; gap: 1.4rem; }
@media (min-width: 34rem) { .kontaktform-felder { grid-template-columns: 1fr 1fr; } }
#kontakt-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: var(--spur);
  color: var(--salbei-tief);
}
#kontakt-form input,
#kontakt-form textarea {
  border: 0;
  border-bottom: 1px solid var(--salbei);
  background: none;
  padding: 0.5rem 0;
  font-family: inherit;
  font-size: 1rem;
  color: var(--tinte);
  text-transform: none;
  letter-spacing: normal;
  resize: vertical;
}
#kontakt-form input:focus,
#kontakt-form textarea:focus { outline: 0; border-bottom-color: var(--tinte); }
#kontakt-form button { align-self: flex-start; }

/* Honigtopf: fuer Menschen unsichtbar, fuer Bots ein normales Feld.
   Bewusst NICHT display:none - manche Bots ueberspringen versteckte Felder. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.kontaktform-status { font-size: 0.92rem; color: var(--salbei-tief); }
.kontaktform-status.ist-fehler { color: #8A2F2F; }
.kontaktform-status[hidden] { display: none; }

/* ── Fusszeile mit Rechtslinks ── */
.fusszeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
}
.fusszeile-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fusszeile-links a {
  text-decoration: none;
  border-bottom: 1px solid rgba(159,174,153,.4);
  transition: color .25s, border-color .25s;
}
.fusszeile-links a:hover { color: var(--papier); border-bottom-color: var(--salbei); }
.fusszeile-team { margin-left: 0; }

/* ── Impressum und Datenschutz ── */
.rechts-seite { background: var(--papier); }
.rechts-inhalt {
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(3rem, 10vh, 6rem) var(--rand);
}
.rechts-inhalt h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 2.5rem;
  hyphens: auto;
}
.rechts-inhalt h2 {
  font-family: var(--serife);
  font-style: italic;
  font-size: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 0.9rem;
}
.rechts-inhalt h3 {
  font-size: 1.05rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.rechts-inhalt p { margin-bottom: 0.9rem; color: var(--tinte-weich); }
.rechts-inhalt p strong { color: var(--tinte); }
.rechts-quelle {
  font-size: 0.82rem;
  color: var(--salbei-tief);
}
.rechts-warnung {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--hinweis-linie);
  background: var(--hinweis);
  color: #6B5714 !important;
  font-size: 0.94rem;
}
.rechts-warnung strong { color: #6B5714 !important; }
.rechts-fuss {
  display: flex;
  gap: 2rem;
  max-width: 44rem;
  margin-inline: auto;
  padding: 0 var(--rand) 4rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--spur);
}
.rechts-fuss a { text-decoration: none; border-bottom: 1px solid var(--salbei); }

@media print {
  .karte, .kontaktform, .fusszeile-links { display: none !important; }
}

/* ── Karte und Kontaktformular liegen im DUNKLEN Kontaktbereich ──
   Ohne diese Umstellung sind die Knoepfe dunkel auf dunkel und damit
   praktisch unsichtbar. Faellt in keinem Testwert auf, nur im Bild. */
#kontakt .knopf-linie {
  color: var(--auf-dunkel);
  border-bottom-color: var(--auf-dunkel);
}
#kontakt .knopf-linie:hover {
  color: var(--salbei);
  border-bottom-color: var(--salbei);
}

#kontakt .karte-platzhalter {
  border-color: rgba(159,174,153,.28);
  background: rgba(255,255,255,.03);
}
#kontakt .karte-hinweis { color: var(--salbei-tief); }
#kontakt .karte-route { border-bottom-color: var(--salbei-tief); }
#kontakt .karte-route:hover { color: var(--salbei); }
#kontakt .karte-rahmen { border-color: rgba(159,174,153,.28); }

#kontakt .kontaktform-satz { color: var(--salbei); }
#kontakt #kontakt-form label { color: var(--salbei); }
#kontakt #kontakt-form input,
#kontakt #kontakt-form textarea {
  color: var(--auf-dunkel);
  border-bottom-color: var(--salbei-tief);
}
#kontakt #kontakt-form input:focus,
#kontakt #kontakt-form textarea:focus { border-bottom-color: var(--salbei); }
#kontakt .kontaktform-status { color: var(--salbei); }
/* Rot auf dunklem Grund waere kaum lesbar, deshalb ein helles Warmrot. */
#kontakt .kontaktform-status.ist-fehler { color: #E8A0A0; }