/* Massage Essence · Entwurf von Seetalwebsites */
:root {
  --nacht: #0F1029;
  --nacht-2: #181A3B;
  --creme: #F3E9DA;
  --gold: #D9B466;
  --magenta: #8A1C5C;
  --kupfer: #9A3A22;
  --tinte: #1A1430;
  --expo: cubic-bezier(.19, 1, .22, 1);
  --rand: 20px;
  --luft: 72px;
  --titel: 'Forum', 'Times New Roman', serif;
  --text: 'Albert Sans', system-ui, sans-serif;
}
@media (min-width: 900px) { :root { --rand: 40px; --luft: 120px; } }

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--nacht);
  color: var(--creme);
  font: 400 17px/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-weight: 400; }
ul, ol { list-style: none; padding: 0; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.rand { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--rand); }
.klein { font-size: 14px; opacity: .62; margin-top: 24px; max-width: 60ch; }
.gross {
  font-family: var(--titel);
  font-size: clamp(36px, 6.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -.015em;
  max-width: 18ch;
}

/* Flächen */
section { padding: var(--luft) 0; position: relative; }
.flaeche-nacht { background: var(--nacht); color: var(--creme); }
.flaeche-magenta { background: var(--magenta); color: var(--creme); }
.flaeche-kupfer { background: var(--kupfer); color: var(--creme); }
.flaeche-creme { background: var(--creme); color: var(--tinte); }
.flaeche-gold { background: var(--gold); color: var(--tinte); }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border-radius: 999px; border: 1px solid var(--gold);
  background: var(--gold); color: var(--tinte);
  font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out, transform .15s ease-out;
}
.knopf:hover { background: var(--creme); border-color: var(--creme); }
.knopf:active { transform: scale(.97); }
.knopf-klein { min-height: 40px; padding: 0 18px; font-size: 14px; }
.knopf-creme { background: var(--creme); border-color: var(--creme); }
.knopf-creme:hover { background: var(--gold); border-color: var(--gold); }
.knopf-nacht { background: var(--tinte); border-color: var(--tinte); color: var(--creme); }
.knopf-nacht:hover { background: var(--magenta); border-color: var(--magenta); color: var(--creme); }
.knopf-rand { background: transparent; color: var(--creme); }
.knopf-rand:hover { background: var(--gold); border-color: var(--gold); color: var(--tinte); }
.textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.textlink.dunkel { color: var(--tinte); }

/* Balken und Kopf */
.balken {
  background: var(--gold); color: var(--tinte);
  text-align: center; font-size: 13px; font-weight: 500; letter-spacing: .04em;
  padding: 8px var(--rand); position: relative; z-index: 30;
}
.kopf {
  position: absolute; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px var(--rand);
}
.kopf-name {
  font-family: var(--titel); font-size: 20px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 0;
  text-decoration: none;
}
.kopf-nav { display: none; gap: 24px; font-size: 15px; }
.kopf-nav a { text-decoration: none; opacity: .85; transition: opacity .15s ease-out; }
.kopf-nav a:hover { opacity: 1; }
@media (min-width: 900px) { .kopf-nav { display: flex; } }

/* Einstieg */
.einstieg {
  height: calc(100svh - 35px); min-height: 620px; padding: 0;
  display: flex; align-items: flex-end; overflow: hidden;
  background: var(--nacht);
}
.einstieg-bild { position: absolute; inset: 0; }
.einstieg-bild img {
  width: 100%; height: 112%; object-fit: cover; object-position: 13% 0;
  will-change: transform;
}
.einstieg-bild::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(15,16,41,.55) 0, rgba(15,16,41,0) 16%),
    linear-gradient(to top, rgba(15,16,41,.96) 0, rgba(15,16,41,.82) 34%, rgba(15,16,41,0) 66%);
}
.einstieg-text { position: relative; z-index: 2; padding-bottom: 24px; }
.titel {
  font-family: var(--titel); text-transform: uppercase;
  font-size: 19.5vw; line-height: .9; letter-spacing: -.01em;
  color: var(--creme);
}
.maske { display: block; overflow: hidden; padding: .06em .04em 0 0; flex: none; }
.zeile { display: inline-block; white-space: nowrap; transform-origin: left bottom; }
.einstieg-unten { margin-top: 16px; }
.einstieg-satz { max-width: 34ch; font-size: 17px; }
.einstieg-tun { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 16px; }
.einstieg-fakten { margin-top: 16px; font-size: 13px; letter-spacing: .04em; opacity: .7; }

@media (min-width: 900px) {
  .einstieg-bild img { object-position: 50% 30%; }
  .einstieg-bild::after {
    background:
      linear-gradient(to bottom, rgba(15,16,41,.5) 0, rgba(15,16,41,0) 18%),
      linear-gradient(to top, rgba(15,16,41,.94) 0, rgba(15,16,41,.6) 38%, rgba(15,16,41,0) 70%);
  }
  .titel { font-size: 9.6vw; display: flex; gap: .24em; white-space: nowrap; }
  .einstieg-text { padding-bottom: 40px; }
  .einstieg-unten { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; margin-top: 24px; }
  .einstieg-satz { font-size: 19px; grid-row: 1 / 3; }
  .einstieg-tun { margin: 0; justify-content: flex-end; }
  .einstieg-fakten { margin: 0; text-align: right; }
}

/* Praxis */
.praxis { overflow: hidden; }
.steigmond {
  position: absolute; right: -22vw; top: 8%;
  width: 70vw; max-width: 760px; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; opacity: .34;
  mix-blend-mode: screen; will-change: transform;
}
.steigmond img { width: 100%; height: 100%; object-fit: cover; }
.praxis .rand { position: relative; }
.praxis .gross { max-width: 20ch; }
.drei { display: grid; gap: 40px; margin-top: 64px; }
.drei h3 {
  font-family: var(--titel); font-size: 26px; line-height: 1.1;
  padding-top: 16px; border-top: 1px solid rgba(243,233,218,.4); margin-bottom: 8px;
}
.drei p { opacity: .88; max-width: 44ch; }
@media (min-width: 900px) { .drei { grid-template-columns: repeat(3, 1fr); margin-top: 104px; } }

/* Massagen mit Mond-Regler */
.massagen { background: var(--nacht) radial-gradient(1px 1px at 12% 18%, rgba(243,233,218,.7) 50%, transparent 51%), var(--nacht); }
.massagen::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 8% 12%, var(--creme) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 64%, var(--creme) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 28%, var(--gold) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 82%, var(--creme) 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 9%, var(--creme) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 47%, var(--gold) 50%, transparent 51%),
    radial-gradient(1px 1px at 95% 91%, var(--creme) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 93%, var(--creme) 50%, transparent 51%);
  background-size: 520px 640px;
}
.massagen-raster { position: relative; display: grid; gap: 40px; }
.regler h2 { font-family: var(--titel); font-size: clamp(36px, 6.2vw, 84px); line-height: 1.02; letter-spacing: -.015em; }
.regler-frage { margin-top: 8px; opacity: .8; }
.mond {
  position: relative; width: min(64vw, 280px); aspect-ratio: 1; margin: 40px auto 24px;
  border-radius: 50%; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 80px rgba(217,180,102,.28);
}
.mond img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) brightness(1.08); }
.mond-schatten {
  position: absolute; inset: -1px; border-radius: 50%;
  background: var(--nacht);
  transform: translateX(var(--phase, 40%));
  transition: transform .8s var(--expo);
  box-shadow: 0 0 24px 8px var(--nacht);
}
.regler-zeit { font-family: var(--titel); font-size: 44px; line-height: 1; text-align: center; color: var(--gold); }
.schieber {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin-top: 16px;
  background: transparent; cursor: pointer; touch-action: pan-y;
}
.schieber::-webkit-slider-runnable-track { height: 2px; background: rgba(243,233,218,.35); }
.schieber::-moz-range-track { height: 2px; background: rgba(243,233,218,.35); }
.schieber::-webkit-slider-thumb {
  -webkit-appearance: none; width: 32px; height: 32px; margin-top: -15px;
  border-radius: 50%; background: var(--gold); border: 0;
  box-shadow: 0 0 0 6px rgba(217,180,102,.22);
}
.schieber::-moz-range-thumb {
  width: 32px; height: 32px; border-radius: 50%; background: var(--gold); border: 0;
  box-shadow: 0 0 0 6px rgba(217,180,102,.22);
}
.schieber-skala { display: flex; justify-content: space-between; font-size: 13px; opacity: .6; }
.regler-treffer { margin-top: 16px; text-align: center; font-size: 15px; opacity: .85; min-height: 1.5em; }

.liste { border-top: 1px solid rgba(243,233,218,.22); }
.liste li { border-bottom: 1px solid rgba(243,233,218,.22); transition: opacity .4s ease-out; }
.liste li.fern { opacity: .42; }
.liste li.fern.offen { opacity: 1; }
.eintrag {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: baseline;
  padding: 16px 0; background: none; border: 0; text-align: left; cursor: pointer;
}
.eintrag-name { font-family: var(--titel); font-size: 26px; line-height: 1.1; transition: color .15s ease-out; }
.eintrag:hover .eintrag-name, li.offen .eintrag-name { color: var(--gold); }
.eintrag-preis { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eintrag-dauer { grid-column: 1 / -1; font-size: 14px; opacity: .66; }
.fach { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--expo); }
li.offen .fach { grid-template-rows: 1fr; }
.fach-innen { overflow: hidden; }
.fach-inhalt { display: grid; gap: 16px; padding-bottom: 24px; }
.fach-inhalt img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.fach-inhalt p { opacity: .86; max-width: 56ch; }
.fach-tun { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }

@media (min-width: 900px) {
  .massagen-raster { grid-template-columns: 5fr 7fr; gap: 104px; align-items: start; }
  .regler { position: sticky; top: 40px; }
  .mond { width: min(24vw, 320px); margin-left: 0; }
  .regler-zeit, .regler-treffer { text-align: left; }
  .eintrag-name { font-size: 34px; }
  .eintrag { grid-template-columns: 1fr 180px auto; padding: 24px 0; }
  .eintrag-dauer { grid-column: auto; grid-row: 1; grid-column-start: 2; }
  .fach-inhalt { grid-template-columns: 240px 1fr; gap: 24px; }
}

/* Ritual */
.ritual-raster { display: grid; gap: 40px; }
.ritual-bild { border-radius: 999px 999px 4px 4px; overflow: hidden; max-width: 420px; }
.ritual-bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.ritual-ueber { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; margin-bottom: 16px; }
.ritual-preis { margin-top: 16px; font-size: 19px; font-weight: 500; color: #F6D99A; }
.schritte { margin-top: 40px; counter-reset: s; border-top: 1px solid rgba(243,233,218,.3); }
.schritte li {
  display: grid; grid-template-columns: 110px 1fr; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid rgba(243,233,218,.3);
}
.schritte span { font-family: var(--titel); font-size: 22px; line-height: 1.2; }
.ritual-zusatz { margin-top: 16px; opacity: .8; }
.ritual-zweites { margin: 40px 0; padding: 24px; background: rgba(15,16,41,.24); border-radius: 4px; }
.ritual-zweites h3 { font-family: var(--titel); font-size: 26px; margin-bottom: 8px; }
@media (min-width: 900px) {
  .ritual-raster { grid-template-columns: 5fr 7fr; gap: 104px; align-items: center; }
  .ritual-bild { max-width: none; }
}

/* Räume, Adriana, Stimmen */
.galerie { display: grid; gap: 24px; margin-top: 40px; }
.galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.galerie figcaption { font-size: 14px; opacity: .7; margin-top: 8px; }
@media (min-width: 900px) {
  .galerie { grid-template-columns: repeat(12, 1fr); gap: 40px 24px; margin-top: 64px; }
  .g1 { grid-column: 1 / 9; }
  .g2 { grid-column: 9 / 13; align-self: end; }
  .g3 { grid-column: 2 / 6; }
  .g4 { grid-column: 6 / 13; }
}
.adriana { display: grid; gap: 24px; margin-top: var(--luft); }
.adriana-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.adriana-text p { margin-top: 16px; max-width: 52ch; opacity: .88; }
@media (min-width: 900px) {
  .adriana { grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
}
.stimmen { margin-top: var(--luft); }
.stimmen-reihe { display: grid; gap: 24px; margin-top: 40px; }
.stimmen blockquote {
  font-family: var(--titel); font-size: 22px; line-height: 1.3;
  padding-top: 16px; border-top: 1px solid rgba(26,20,48,.3);
}
@media (min-width: 900px) { .stimmen-reihe { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* Abos, Gutschein, Treue, Produkte */
.mehr-raster { display: grid; gap: 40px; margin-top: 40px; }
.mehr-block { padding-top: 16px; border-top: 1px solid rgba(26,20,48,.4); }
.mehr h3 { font-family: var(--titel); font-size: 30px; line-height: 1.1; }
.mehr-notiz { margin: 8px 0 16px; opacity: .8; max-width: 44ch; }
.tabelle { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.tabelle td { padding: 8px 0; border-bottom: 1px solid rgba(26,20,48,.18); vertical-align: top; }
.tabelle td:last-child { text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; padding-left: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip {
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(26,20,48,.5); background: transparent; color: var(--tinte);
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.chip.an { background: var(--tinte); color: var(--creme); border-color: var(--tinte); }
.herzen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.herzen i {
  width: 24px; height: 22px; background: var(--magenta);
  clip-path: path('M12 21 C4 15 0 11 0 6.5 C0 3 2.8 0 6.2 0 C8.6 0 10.8 1.4 12 3.6 C13.2 1.4 15.4 0 17.8 0 C21.2 0 24 3 24 6.5 C24 11 20 15 12 21 Z');
}
.produkte { display: grid; gap: 24px; margin-top: var(--luft); }
.produkte-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.produkt-liste > div { padding: 8px 0; border-bottom: 1px solid rgba(26,20,48,.18); }
.produkt-liste dt { font-weight: 600; }
.produkt-liste dd { margin: 0; opacity: .8; font-size: 15px; }
@media (min-width: 900px) {
  .mehr-raster { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; }
  .produkte { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .produkt-liste { columns: 2; column-gap: 40px; }
  .produkt-liste > div { break-inside: avoid; }
}

/* Kontakt */
.kontakt { padding-bottom: 0; }
.kontakt-raster { display: grid; gap: 40px; }
.kontakt .knopf { margin-top: 24px; }
.kontakt-liste { margin-top: 40px; border-top: 1px solid rgba(243,233,218,.22); }
.kontakt-liste > div { display: grid; grid-template-columns: 100px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(243,233,218,.22); }
.kontakt-liste dt { font-size: 14px; opacity: .6; padding-top: 2px; }
.kontakt-liste dd { margin: 0; }
.kontakt-liste a { text-underline-offset: 4px; text-decoration-thickness: 1px; display: inline-block; padding: 8px 0; }
.formular { display: grid; gap: 16px; align-content: start; padding: 24px; background: var(--nacht-2); border-radius: 4px; }
.formular h3 { font-family: var(--titel); font-size: 30px; }
.formular label { display: grid; gap: 8px; font-size: 14px; opacity: .9; }
.formular input, .formular textarea {
  width: 100%; padding: 12px 14px; font-size: 17px;
  background: transparent; border: 1px solid rgba(243,233,218,.35); border-radius: 4px;
}
.formular input:focus, .formular textarea:focus { border-color: var(--gold); outline: none; }
.formular .knopf { margin-top: 8px; justify-self: start; }
.formular .klein { margin-top: 0; }
.kontakt-bild { margin-top: var(--luft); height: 46vh; min-height: 260px; overflow: hidden; }
.kontakt-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
@media (min-width: 900px) {
  .kontakt-raster { grid-template-columns: 7fr 5fr; gap: 104px; }
  .formular { padding: 40px; }
}

.fuss { background: var(--nacht); padding: 24px 0; font-size: 14px; }
.fuss-reihe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.fuss p { opacity: .7; }
.fuss a { display: inline-block; padding: 8px 0; }

/* Bewegung: nur mit JS und ohne «weniger Bewegung» */
.js .zeile { transform: translateY(108%); }
.js .geladen .zeile { transform: none; transition: transform 1.1s var(--expo); }
.js .geladen .maske:nth-child(2) .zeile { transition-delay: .09s; }
.js .einstieg-unten { opacity: 0; transform: translateY(16px); }
.js .geladen .einstieg-unten { opacity: 1; transform: none; transition: opacity .8s ease-out .35s, transform 1s var(--expo) .35s; }
.js .auf { clip-path: circle(0% at 50% 55%); }
.js .auf img { transform: scale(1.18); }
.js .auf.da { clip-path: circle(75% at 50% 50%); transition: clip-path 1.4s var(--expo); }
.js .auf.da img { transform: none; transition: transform 1.6s var(--expo); }
.js .ritual-bild.auf { clip-path: circle(0% at 50% 40%); }
.js .ritual-bild.auf.da { clip-path: circle(90% at 50% 50%); }

@media (prefers-reduced-motion: reduce) {
  .js .zeile, .js .einstieg-unten, .js .auf img { transform: none !important; opacity: 1 !important; transition: none !important; }
  .js .auf, .js .ritual-bild.auf { clip-path: none !important; }
  .mond-schatten, .fach, .liste li { transition: none; }
  html { scroll-behavior: auto; }
}