/* Frank Joy · Sensual Moments
   Gestaltung: hell und ruhig. Eine Hintergrundwelt (Papier), Anthrazit für Schrift und Aktionen
   (Markenfarbe), Farbe kommt nur aus den Fotos. Newsreader für Überschriften in moderaten Größen,
   Manrope für alles andere. Ein Eckenradius (8px), ein Abschnittsabstand, ein Inhaltsrahmen,
   Fotos immer im selben Format (3:2, in Listen 1:1). */

/* ---------- Schriften ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("schriften/newsreader-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Manrope";
  src: url("schriften/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: block;
}

/* ---------- Grundwerte ---------- */
:root {
  --papier: #fcfbf9;   /* Seitengrund (heller als die Abschnittsflächen) */
  --weiss: #ffffff;    /* Eingabefelder, Schrift auf dem Foto */
  --tinte: #2b2725;    /* Schrift und Knöpfe (Anthrazit der Marke) */
  --grau: #625b57;     /* Nebentexte, 6:1 auf Papier */
  --feld: #8f8781;     /* Rahmen der Eingabefelder, 3,5:1 auf Weiß */
  --haar: #e3ded9;     /* Trennlinie über dem Fuß */
  --flaeche-a: #f2ede8; /* Abschnittsflächen: dezent, warm, abwechselnd */
  --flaeche-b: #ece8e4;
  --flaeche-k: #efe8e1; /* Kontakt */

  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --radius: 8px;
  --max: 1120px;
  --rand: clamp(20px, 5vw, 48px);
  --abschnitt: clamp(64px, 8vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.2; }
h3 { font-size: 1.125rem; line-height: 1.35; font-weight: 600; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

.huelle { max-width: var(--max); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt + .abschnitt { padding-top: 0; }
.abschnitt h2 { margin-bottom: 32px; }
.lead { font-family: var(--serif); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.4rem); line-height: 1.45; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 16px; top: -64px; z-index: 30; padding: 12px 16px; border-radius: var(--radius); background: var(--tinte); color: var(--weiss); }
.sprung:focus { top: 16px; }
.bild { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }

/* ---------- Knöpfe ---------- */
.aktion {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius);
  background: var(--tinte); color: var(--weiss);
  font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer;
}
.aktion:hover { background: var(--grau); }
.textlink { font-weight: 600; }

/* ---------- Kopf ----------
   Auf allen Seiten gleich: Navigation als dunkle Fläche, daneben der helle Knopf. Der Kopf bleibt
   beim Scrollen oben. Startseite: liegt frei auf dem Foto (Wasserzeichen ersetzt dort das Logo);
   übrige Seiten: helle, leicht durchscheinende Leiste mit Logo. */
html { scroll-padding-top: 96px; }
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(252, 251, 249, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.marke img { height: 34px; width: auto; }
.nav-liste { display: none; }
.nav-liste a, .menue-feld a { text-decoration: none; font-weight: 500; }
.nav-liste a[aria-current="page"], .menue-feld a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.3em; }
.nav-liste ul { color: var(--weiss); }
.nav-liste .aktion, .kopf .aktion { background: var(--weiss); color: var(--tinte); box-shadow: 0 1px 2px rgba(27, 24, 23, 0.12), 0 0 0 1px rgba(27, 24, 23, 0.08); }
.nav-liste .aktion:hover { background: var(--papier); }
.menue summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: var(--radius); font-weight: 600;
  background: rgba(27, 24, 23, 0.82); color: var(--weiss);
}
.menue summary::-webkit-details-marker { display: none; }
.menue-feld {
  position: absolute; top: 100%; left: var(--rand); right: var(--rand);
  padding: 16px 24px 24px; border-radius: var(--radius);
  background: var(--weiss); color: var(--tinte); border: 1px solid var(--haar);
}
.menue-feld li a { display: block; padding: 10px 0; font-size: 1.125rem; }
.menue-feld .aktion { margin-top: 16px; width: 100%; background: var(--tinte); color: var(--weiss); box-shadow: none; }
@media (min-width: 1000px) {
  .menue { display: none; }
  .nav-liste { display: flex; align-items: center; gap: 16px; }
  .nav-liste ul { display: flex; gap: 28px; font-size: 0.975rem; padding: 12px 22px; border-radius: var(--radius); background: rgba(27, 24, 23, 0.82); }
  .nav-liste .aktion { min-height: 44px; padding: 0 18px; }
}

/* Startseite: Kopf liegt fest oben über dem Foto, ohne Leiste; Wasserzeichen ersetzt das Logo. */
.kopf-ueber-foto { position: fixed; top: 0; left: 0; right: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.kopf-ueber-foto .huelle { justify-content: flex-end; }
.kopf-ueber-foto .nav-liste, .kopf-ueber-foto .menue { pointer-events: auto; }
.kopf-ueber-foto .marke { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Beim Scrollen blendet sich die helle Leiste ein (Browser ohne Scroll-Animation: Navigation bleibt frei) */
@supports (animation-timeline: scroll()) {
  .kopf-ueber-foto { animation: kopf-leiste linear both; animation-timeline: scroll(root); animation-range: 0 320px; }
  @keyframes kopf-leiste {
    from { background: rgba(252, 251, 249, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
    to { background: rgba(252, 251, 249, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  }
}

/* ---------- Startseite: Auftakt ---------- */
.auftakt {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: min(100svh, 900px); padding-top: 80px;
  background: var(--tinte); color: var(--weiss);
}
.auftakt-bild { position: absolute; inset: 0; z-index: -2; }
.auftakt-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 0%; }
.auftakt::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(27, 24, 23, 0.94) 0%, rgba(27, 24, 23, 0.88) 50%, rgba(27, 24, 23, 0) 78%);
}
.auftakt > .huelle { width: 100%; }
.auftakt-text { max-width: 620px; padding-block: 40px 56px; }
.auftakt h1 { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); line-height: 1.05; }
.unterzeile { margin-top: 16px; max-width: 42ch; font-size: 1.125rem; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 32px; }
.aktionen .aktion { background: var(--weiss); color: var(--tinte); }
.aktionen .aktion:hover { background: var(--papier); }
.aktionen .tel { display: inline-flex; align-items: center; min-height: 44px; font-variant-numeric: tabular-nums; }
@media (min-width: 960px) {
  .auftakt-text { padding-block: 64px 88px; }
  .auftakt h1 .zeile { display: block; }
  .auftakt::after { background: linear-gradient(to top, rgba(27, 24, 23, 0.92) 0%, rgba(27, 24, 23, 0.84) 46%, rgba(27, 24, 23, 0) 72%); }
}

/* ---------- Startseite: Einleitung ---------- */
.lesespalte { max-width: 66ch; }
.orte { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 32px 0 8px; font-family: var(--serif); font-size: 1.4rem; line-height: 1.35; }
@media (min-width: 900px) {
  .einleitung .huelle { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .einleitung h2 { margin-bottom: 0; }
}

/* ---------- Startseite: Massagen ---------- */
.massagen { display: grid; gap: 32px 48px; }
.massage { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: start; }
.massage .bild { aspect-ratio: 1 / 1; }
.massage h3 { margin-bottom: 4px; }
.massage h3 a { text-decoration: none; }
.massage h3 a:hover { text-decoration: underline; }
.massage p { color: var(--grau); font-size: 0.975rem; }
@media (min-width: 760px) {
  .massagen { grid-template-columns: 1fr 1fr; }
  .massage { grid-template-columns: 152px 1fr; gap: 24px; }
}

/* ---------- Mitgliedschaft BesD ---------- */
.besd { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.besd img { width: 56px; height: auto; flex: none; }
.besd p { color: var(--grau); font-size: 0.9375rem; }

/* ---------- Massage-Seiten ---------- */
.seitenkopf .huelle { display: grid; gap: 40px; }
.seitenkopf h1 { margin-bottom: 24px; }
.einleitung-seite p { color: var(--grau); }
.einleitung-seite p:first-child { color: var(--tinte); }
.seitenkopf .aktion { margin-top: 32px; }
@media (min-width: 900px) {
  .seitenkopf .huelle { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
}
.kapitel-liste { display: grid; gap: 48px 64px; }
.kapitel-liste h2 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.6rem); margin-bottom: 12px; }
@media (min-width: 900px) { .kapitel-liste { grid-template-columns: 1fr 1fr; } }
.bildpaar { display: grid; gap: 16px; }
@media (min-width: 640px) { .bildpaar { grid-template-columns: 1fr 1fr; gap: 24px; } }
.weitere { display: flex; flex-wrap: wrap; gap: 0 32px; }
.weitere a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- Lesespalte: Über mich, Blogbeitrag, Rechtstexte, Danke ---------- */
.lesen .huelle > * { max-width: 42rem; margin-inline: auto; }
.lesen h1 { margin-bottom: 32px; }
.lesen .huelle > .lesebild { margin-block: 8px 40px; }
/* Über mich: Text in voller Inhaltsbreite (wie der Fuß), Foto in Originalgröße */
.lesen-breit .huelle > * { max-width: none; }
.lesen-breit .huelle > .lesebild { max-width: 720px; margin-inline: 0; }
.lesen-breit .huelle > blockquote { max-width: 32ch; margin-inline: 0; }
.fliesstext h2 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.6rem); margin: 48px 0 12px; }
.fliesstext h3 { margin: 32px 0 8px; }
.fliesstext h4 { font-size: 1rem; font-weight: 600; margin: 24px 0 8px; }
.fliesstext ul, .fliesstext ol { list-style: disc; padding-left: 1.2em; margin: 0 0 16px; }
.fliesstext li { margin-bottom: 8px; }
.fliesstext a { overflow-wrap: anywhere; }
.fliesstext .lead { margin-bottom: 24px; }
.fliesstext blockquote { margin: 40px 0; padding-left: 24px; font-family: var(--serif); font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.6rem); line-height: 1.35; }
.gruss { margin-top: 40px; }
.gruss img { margin-top: 8px; }
.anschrift { margin-bottom: 32px; }
.zurueck { margin-top: 48px; }

/* ---------- Blog-Übersicht ---------- */
.blogkopf { margin-bottom: 48px; }
.blogkopf h1 { margin-bottom: 12px; }
.blogkopf p { color: var(--grau); max-width: 56ch; }
.beitraege { display: grid; gap: 40px 24px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.beitraege a { display: block; text-decoration: none; }
.beitraege .bild { margin-bottom: 14px; }
.beitraege h2 { margin: 2px 0 0; font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.beitraege a:hover h2 { text-decoration: underline; }

/* ---------- Kontakt ---------- */
.kontakt-raster { display: grid; gap: 56px; }
.kontakt h1, .kontakt-info h2 { margin-bottom: 24px; }
.kontakt-einleitung { max-width: 52ch; }
.telefonzeile { margin-top: 16px; }
.telefonzeile a { font-variant-numeric: tabular-nums; }
.wege { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }
.wege a { display: inline-flex; align-items: center; min-height: 44px; }
.diskret { margin-top: 24px; color: var(--grau); font-size: 0.9375rem; }
@media (min-width: 960px) {
  .kontakt-raster { grid-template-columns: 5fr 6fr; gap: 80px; align-items: start; }
}

/* ---------- Kontaktformular ---------- */
.formular { display: grid; gap: 20px; }
.formular-titel { font-family: var(--sans); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; margin: 0; }
.feld { display: grid; gap: 6px; }
.feld label { font-weight: 600; font-size: 0.975rem; }
.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; color: var(--tinte); background: var(--weiss);
  border: 1px solid var(--feld); border-radius: var(--radius);
}
.feld textarea { min-height: 160px; resize: vertical; }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 2px solid var(--tinte); outline-offset: 2px; }
.feld [aria-invalid="true"] { border: 2px solid var(--tinte); }
.feld-paar { display: grid; gap: 20px; }
.feld-hilfe { margin: -8px 0 0; color: var(--grau); font-size: 0.9375rem; }
@media (min-width: 640px) { .feld-paar { grid-template-columns: 1fr 1fr; } .feld-hilfe { grid-column: 1 / -1; } }
.feld-check { grid-template-columns: 28px 1fr; align-items: start; column-gap: 12px; }
.feld-check input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--tinte); }
.feld-check label { font-weight: 400; color: var(--grau); }
.feld-check .feld-fehler { grid-column: 1 / -1; }
.feld-fehler { margin: 0; font-weight: 600; font-size: 0.9375rem; }
.formular-meldung { padding: 16px 20px; border: 1px solid var(--tinte); border-radius: var(--radius); background: var(--weiss); }
.formular-meldung ul { list-style: disc; margin: 8px 0 0; padding-left: 1.2em; }
.feld-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular .aktion { justify-self: start; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--haar); padding-block: 32px; font-size: 0.9375rem; }
.fuss .huelle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 40px; }
.fuss-marke img { height: 28px; width: auto; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.fuss-links a:hover { text-decoration: underline; }
.fuss-recht { margin: 0; color: var(--grau); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Abschnitte als abgesetzte Flächen ----------
   Jeder Inhaltsabschnitt liegt als Fläche mit dezentem, warmem Grund im Inhaltsrahmen
   (Rand links und rechts, Abstand untereinander); Töne wechseln sich ab, Kontakt eigener Ton. */
.abschnitt {
  width: min(var(--max), 100% - 2 * var(--rand));
  margin: clamp(16px, 2.5vw, 28px) auto;
  padding-block: clamp(40px, 6vw, 72px);
  border-radius: var(--radius);
  background: var(--flaeche-a);
}
.abschnitt + .abschnitt { padding-top: clamp(40px, 6vw, 72px); }
main > .abschnitt:nth-child(even) { background: var(--flaeche-b); }
.abschnitt.kontakt { background: var(--flaeche-k); }
.abschnitt > .huelle, .abschnitt.huelle { max-width: none; padding-inline: clamp(20px, 4.5vw, 56px); }
.abschnitt:last-of-type { margin-bottom: clamp(32px, 5vw, 56px); }