/* ==========================================================================
   Slender-Life Bewegungsstudio & Sonnenstudio — Eisenberg (Pfalz)
   Stylesheet  |  Homeco Computersysteme

   Gestaltungsleitlinie: Die meisten Gäste sind 50 Jahre und älter.
   Deshalb gilt überall:
   - große Grundschrift (19–20 px) und gut unterscheidbare Buchstaben
     (Atkinson Hyperlegible, entwickelt für Menschen mit Sehschwäche)
   - kräftige Kontraste, keine hellgraue Schrift auf hellem Grund
   - große, klar beschriftete Knöpfe (mind. 56 px hoch)
   - Links sind immer unterstrichen und damit als Link erkennbar
   - keine Großbuchstaben-Zeilen, kein Text in Kursiv
   - ruhige Bewegungen, nichts dreht oder springt
   ========================================================================== */

/* --- Self-hosted Fonts (DSGVO-konform, keine Google-Server) --------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../fonts/atkinson-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../fonts/atkinson-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Outfit wird von den Seiten noch vorgeladen und bleibt als Ausweichschrift. */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Design Tokens ------------------------------------------------------- */
:root {
  /* Marke (aus dem Logo), für Schrift auf Weiß etwas abgedunkelt */
  --pink:        #CF005E;
  --pink-deep:   #9C0045;
  --pink-soft:   #FCE6EF;
  --sun:         #F89600;
  --sun-deep:    #9A5600;
  --sun-soft:    #FFEFD8;

  --ink:         #2B2226;   /* Überschriften */
  --ink-mid:     #3F3539;   /* Fließtext – bewusst dunkel */
  --ink-soft:    #62575C;   /* Nebentext, noch gut lesbar */

  --cream:       #FFFBF6;
  --peach:       #FFF3E6;
  --rose:        #FCF1F4;
  --line:        #EEDFD5;
  --line-strong: #D8C2B5;
  --white:       #FFFFFF;
  --plum:        #3A1D2E;
  --plum-deep:   #2C1522;

  --shadow-sm:   0 1px 3px rgba(58, 29, 46, .06);
  --shadow-md:   0 6px 20px rgba(58, 29, 46, .08);
  --shadow-lg:   0 14px 40px rgba(58, 29, 46, .10);

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Wiederkehrende Strukturen der Seite (Startbereich, Seitenköpfe, dunkle
     und pinke Flächen):
     --tex-korn         feine Papierkörnung (SVG-Rauschen, sehr schwach)
     --tex-wolken       weiche Farbwolken in Rosé, Apricot und Pink – wie
                        Aquarell; mehrere große, weich auslaufende Flächen
     --tex-wolken-hell  dieselben Wolken für dunkle und pinke Flächen */
  --tex-korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .18 0 0 0 0 .22 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --tex-wolken:
    radial-gradient(36% 48% at 14% 82%, rgba(255, 158, 186, .34) 0%, rgba(255, 158, 186, 0) 70%),
    radial-gradient(30% 42% at 46% 96%, rgba(255, 190, 130, .34) 0%, rgba(255, 190, 130, 0) 70%),
    radial-gradient(34% 46% at 90% 74%, rgba(232, 84, 127, .15) 0%, rgba(232, 84, 127, 0) 70%),
    radial-gradient(28% 36% at 68% 20%, rgba(255, 210, 165, .38) 0%, rgba(255, 210, 165, 0) 70%),
    radial-gradient(24% 30% at 30% 30%, rgba(255, 220, 228, .45) 0%, rgba(255, 220, 228, 0) 70%);
  --tex-wolken-hell:
    radial-gradient(40% 55% at 12% 88%, rgba(255, 130, 175, .24) 0%, rgba(255, 130, 175, 0) 70%),
    radial-gradient(34% 46% at 82% 92%, rgba(255, 185, 110, .2) 0%, rgba(255, 185, 110, 0) 70%),
    radial-gradient(30% 40% at 58% 8%, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, 0) 70%);
  --wrap: 1280px;
  --gap: clamp(1.25rem, 3vw, 2rem);
  --sect: clamp(4rem, 8vw, 6.5rem);

  --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-body: 'Atkinson Hyperlegible', 'Outfit', Verdana, 'Segoe UI', sans-serif;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 1.1875rem;            /* 19 px auf dem Handy */
  line-height: 1.65;
  color: var(--ink-mid);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 700px) { body { font-size: 1.25rem; } }   /* 20 px */

img, svg, video { max-width: 100%; height: auto; display: block; }
a {
  color: var(--pink-deep);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
a:hover { color: var(--pink); text-decoration-thickness: 3px; }
ul, ol { padding-left: 1.2em; }
button { font: inherit; }
strong, b { font-weight: 700; color: var(--ink); }

/* Icons, die direkt in einem Textlink stehen, bleiben zeilenhoch */
a > svg { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; }

/* Gut sichtbarer Tastatur-Fokus */
:focus-visible {
  outline: 4px solid var(--sun);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --- Typografie ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 .55em;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variation-settings: 'wght' 600;
}
h1 { font-size: clamp(2.25rem, 5.4vw, 3.7rem); line-height: 1.1; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.6rem); }
h4 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(1.2rem, 2vw, 1.35rem); color: var(--ink-mid); line-height: 1.6; }

/* Rubrik über Überschriften: normaler Satz, fett, in Pink – ohne Zeichen davor. */
.eyebrow {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 1.05rem; font-weight: 700;
  color: var(--pink-deep);
  margin-bottom: .9rem;
}
.eyebrow--sun { color: var(--sun-deep); }
.eyebrow--light { color: #FFD08A; }

.text-pink { color: var(--pink); }
.text-sun  { color: var(--sun-deep); }

/* --- Layout -------------------------------------------------------------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 700px) { .wrap { width: min(100% - 4rem, var(--wrap)); } }

.section { padding-block: var(--sect); position: relative; }
/* Farbige Abschnitte laufen oben und unten weich in den Grundton (--cream)
   aus – so entstehen beim Scrollen keine harten Kanten zwischen Flächen.
   Der rosa Abschnitt beginnt in genau dem Ton, in dem der Startbereich endet. */
.section--blush { background: linear-gradient(180deg, var(--rose) 0%, var(--rose) 55%, var(--cream) 100%); }
.section--sand  { background: linear-gradient(180deg, var(--cream) 0%, var(--peach) 22%, var(--peach) 78%, var(--cream) 100%); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-head { max-width: 48rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--plum); color: #fff; padding: 1rem 1.4rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 3.5rem;
  padding: .85rem 1.6rem;
  border-radius: var(--r-sm);
  font-weight: 700; font-size: 1.1rem; line-height: 1.25;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn--primary { background: var(--pink); color: #fff; box-shadow: 0 8px 18px -10px rgba(207, 0, 94, .7); }
.btn--primary:hover { background: var(--pink-deep); color: #fff; }
.btn--sun { background: var(--sun); color: #2A1800; box-shadow: 0 8px 18px -10px rgba(184, 110, 0, .7); }
.btn--sun:hover { background: #FFA826; color: #2A1800; }
.btn--ghost { background: var(--white); color: var(--pink-deep); border-color: var(--pink-deep); }
.btn--ghost:hover { background: var(--pink-soft); color: var(--pink-deep); }
.btn--light { background: #fff; color: var(--pink-deep); }
.btn--light:hover { background: var(--pink-soft); color: var(--pink-deep); }
.btn--wide { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* --- Topbar -------------------------------------------------------------- */
.topbar { background: var(--plum); color: #F3E8EC; font-size: .95rem; letter-spacing: .01em; }
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .35rem 1.5rem; padding-block: .5rem;
}
.topbar a { color: #fff; font-weight: 700; text-decoration-thickness: 1px; }
.topbar a:hover { color: #FFD08A; }
.topbar__item { display: inline-flex; align-items: center; gap: .5rem; }
.topbar__item svg { width: 1.1em; height: 1.1em; color: #FFC24D; flex: none; }
/* Rechte Gruppe (Ort und Telefon) – jeder Teil im Panel einzeln abschaltbar */
.topbar__right { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.5rem; }
@media (max-width: 560px) { .topbar__right { justify-content: center; } }
@media (max-width: 560px) { .topbar__inner { justify-content: center; text-align: center; } }

/* --- Header / Navigation ------------------------------------------------- */
/* Kopfzeile ohne eigene Fläche und Trennlinie: Sie hat denselben Ton wie der
   obere Rand des Startbereichs und geht dadurch nahtlos in ihn über. Erst
   beim Scrollen (is-stuck, gesetzt von main.js) wird sie leicht milchig und
   bekommt einen zarten Schatten, damit der Inhalt darunter nicht stört. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 251, 246, .96);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header.is-stuck {
    background: rgba(255, 251, 246, .82);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
  }
}
.site-header.is-stuck {
  border-bottom-color: rgba(216, 194, 181, .45);
  box-shadow: 0 10px 30px -22px rgba(58, 29, 46, .45);
}

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .6rem;
}
.brand { display: flex; align-items: center; text-decoration: none; }
/* --logo-h wird pro Seite im <head> gesetzt (Panel → Website-Einstellungen).
   Auf schmalen Bildschirmen bei 58px gedeckelt, sonst wird der Kopfbereich
   auf dem Handy zu hoch. Der Fallback greift, falls die Variable fehlt. */
.brand img { height: min(var(--logo-h, 70px), 58px); width: auto; }
@media (min-width: 900px) { .brand img { height: var(--logo-h, 70px); } }

.nav { display: none; }
@media (min-width: 1080px) {
  .nav { display: flex; align-items: center; gap: .25rem; }
}
/* :not(.btn) ist wichtig: Der Anruf-Knopf steht mit im Menü, ist aber kein
   Menüpunkt und darf die Menü-Optik nicht erben. */
/* Menüpunkte: normale Schriftstärke, die aktuelle Seite pink mit einer
   feinen Linie darunter. Die Linie wächst beim Überfahren von der Mitte aus. */
.nav a:not(.btn) {
  position: relative;
  padding: .6rem .85rem;
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
  font-size: 1rem;
  transition: color .2s ease;
}
.nav a:not(.btn)::after {
  content: ''; position: absolute; left: .85rem; right: .85rem; bottom: .3rem;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--pink), var(--sun));
  transform: scaleX(0); transition: transform .25s ease;
}
.nav a:not(.btn):hover { color: var(--pink-deep); }
.nav a:not(.btn):hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--pink-deep); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .nav a:not(.btn)::after { transition: none; } }

.header-cta { display: none; }
@media (min-width: 1280px) {
  .header-cta {
    display: inline-flex; margin-left: 1rem;
    min-height: 3rem; padding: .6rem 1.25rem; font-size: 1rem;
    border-radius: 999px;
  }
}

/* Menüknopf mit sichtbarer Beschriftung „Menü“ – drei Striche allein
   werden von vielen Besuchern nicht als Menü erkannt. */
.burger {
  display: inline-grid;
  grid-template-columns: 24px auto;
  grid-template-rows: repeat(3, 2.5px);
  row-gap: 5px; column-gap: .6rem;
  align-content: center; align-items: center;
  min-height: 52px; padding: 0 1rem;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--line-strong); border-radius: var(--r-sm);
  cursor: pointer;
  font-weight: 700; font-size: 1.05rem;
}
.burger::after {
  content: 'Menü';
  content: 'Menü' / '';
  grid-column: 2; grid-row: 1 / 4;
}
@media (min-width: 1080px) { .burger { display: none; } }
.burger span:not(.visually-hidden) {
  grid-column: 1;
  display: block; height: 2.5px; border-radius: 2px; background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--white);
  padding: .75rem 0 1.5rem;
}
.mobile-nav.is-open { display: block; }
@media (min-width: 1080px) { .mobile-nav { display: none !important; } }
.mobile-nav a:not(.btn) {
  display: block; padding: 1rem .5rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink); font-weight: 700; font-size: 1.2rem; text-decoration: none;
}
.mobile-nav a[aria-current="page"] { color: var(--pink-deep); background: var(--pink-soft); border-radius: var(--r-sm); }
.mobile-nav .btn { margin-top: 1.25rem; }

/* --- Hero ---------------------------------------------------------------- */
/* Hintergrund des Startbereichs:
   - weiches Rosé-Pfirsich-Licht hinter der Bildcollage
   - ein Hauch Pink unten links
   - Grundverlauf: oben exakt der Ton der Kopfzeile (--cream), unten exakt der
     Ton des nächsten Abschnitts (--rose) – keine sichtbare Kante, die Seite
     fließt durch.
   Darüber liegen in ::before die Farbwolken und in ::after die Körnung,
   beide nach oben ausgeblendet, damit unter der Kopfzeile nichts absetzt.
   --licht-x/-y legt fest, wo das Licht sitzt. */
.hero {
  --licht-x: 76%;
  --licht-y: 52%;
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(1.5rem, 4vw, 3.25rem) clamp(4rem, 8vw, 6.5rem);
  background:
    radial-gradient(40% 46% at var(--licht-x) var(--licht-y), rgba(255, 188, 160, .5) 0%, rgba(255, 188, 160, 0) 70%),
    radial-gradient(40% 45% at 0% 85%, rgba(207, 0, 94, .07) 0%, rgba(207, 0, 94, 0) 70%),
    linear-gradient(180deg, var(--cream) 0%, #FFF4E8 40%, #FDEFEA 75%, var(--rose) 100%);
}
@media (max-width: 959px) { .hero { --licht-x: 50%; --licht-y: 74%; } }

/* Weiche Farbwolken, zusätzlich weichgezeichnet, damit sie wie Aquarell
   ineinanderfließen. Der Rand von -60px fängt das Ausfransen des
   Weichzeichners an den Kanten ab. Oben ausgeblendet, damit unter der
   Kopfzeile nichts absetzt. */
.hero::before {
  content: ''; position: absolute; inset: -60px; z-index: -1;
  background: var(--tex-wolken);
  filter: blur(28px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 32%);
  mask-image: linear-gradient(to bottom, transparent 4%, #000 32%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tex-korn);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.15fr .85fr; } }

.hero h1 {
  font-size: clamp(2.1rem, 4.8vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  margin-bottom: .55em;
}
/* Zweite Zeile: pink, mit einem gemalten Pinselstrich in Sonnengelb darunter.
   Der Zeilenumbruch kommt aus ::before, damit die Zeile „inline“ bleiben kann –
   nur so liegt der Strich genau unter dem Text statt unter der ganzen Breite. */
.hero h1 .script {
  color: var(--pink);
  padding-bottom: .08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='p'%3E%3Cstop offset='0' stop-color='%23F89600'/%3E%3Cstop offset='1' stop-color='%23E8547F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 11C60 5 150 3 297 8' fill='none' stroke='url(%23p)' stroke-width='6' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E")
    left bottom / 100% .26em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero h1 .script::before { content: '\A'; white-space: pre; }

/* Einleitung mit Sonnen-Linie links – ruhig, wie in einem Magazin */
.hero__text .lead {
  max-width: 40rem;
  font-size: clamp(1.2rem, 1.7vw, 1.32rem);
  padding-left: 1.25rem;
  border-left: 3px solid var(--sun);
  border-image: linear-gradient(180deg, var(--pink), var(--sun)) 1;
}
.hero .btn-row { margin-top: 2.2rem; }
/* Zweiter Knopf ruhiger, mit Pfeil */
.hero .btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.hero .btn--ghost:hover { border-color: var(--ink); background: var(--white); color: var(--ink); }
.hero .btn--ghost::after { content: '→'; font-weight: 400; transition: transform .2s ease; }
.hero .btn--ghost:hover::after { transform: translateX(3px); }

/* Rechte Seite: Collage aus drei Fotos ohne Kasten – ein großes Bild in
   Bogenform (oben halbrund wie ein Fenster), ein schmales Oval und ein
   rundes Bild, das unten überlappt. Dazu ein feiner Halbkreis als ruhige
   Zierform.
   Alle drei Fotos sind im Panel unter „Bilder → Startseite“ austauschbar.
   Alle Maße in Prozent der Collage, so bleibt das Bild auf jedem
   Bildschirm gleich aufgebaut. */
.hero__media { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.hero-collage { position: relative; aspect-ratio: 1 / 1.05; }

/* Halbkreis-Linie unten rechts, hinter dem Bogen */
.hero-collage::after {
  content: ''; position: absolute; z-index: 0;
  right: -4%; bottom: 0;
  width: 48%; aspect-ratio: 2 / 1;
  border: 3px solid var(--pink); border-bottom: 0;
  border-radius: 999px 999px 0 0;
  opacity: .3;
}

.hero-foto, .hero-oval, .hero-rund {
  position: absolute; z-index: 1;
  overflow: hidden;
  background: var(--peach);
}
.hero-foto img, .hero-oval img, .hero-rund img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-foto {
  right: 0; top: 0; width: 62%; height: 84%;
  border-radius: 999px 999px var(--r-lg) var(--r-lg);
  border: 8px solid #fff;
  box-shadow: 0 18px 40px -14px rgba(120, 30, 60, .35);
}
.hero-foto img { object-position: 62% 50%; }
.hero-oval {
  left: 5%; top: 14%; width: 28%; height: 36%;
  border-radius: 999px;
}
.hero-rund {
  left: 3%; bottom: 1%; width: 50%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 8px solid #fff;
  box-shadow: 0 14px 34px -12px rgba(120, 30, 60, .35);
  z-index: 2;
}
/* „Ganzes Bild zeigen“ passt nicht in runde Formen – hier immer füllen.
   Bildunterschriften stehen in der Collage nicht, die Formen liegen
   übereinander. */
.hero-collage [class*="--ganz"] img { object-fit: cover; }
.hero-collage .bild-figur { display: contents; }
.hero-collage .bild-caption { display: none; }
.hero-collage .photo-slot { padding: 1rem; font-size: .85rem; }
.hero-collage .photo-slot svg { width: 28px; height: 28px; }

/* Lebendige Variante – im Panel unter „Startseite – Begrüßung“ schaltbar.
   Ausgeschaltet gilt nur das oben, die klassische Ansicht bleibt unberührt.
   Farbrahmen über zwei Hintergründe: die Füllung bis zur Polsterkante, der
   Verlauf darunter scheint durch den transparenten Rand. */
.hero-collage--lebendig::before {
  content: ''; position: absolute; z-index: 0;
  inset: -8% -10% -4% -8%;
  background:
    radial-gradient(38% 34% at 70% 36%, rgba(207, 0, 94, .22) 0%, rgba(207, 0, 94, 0) 70%),
    radial-gradient(30% 28% at 22% 74%, rgba(248, 150, 0, .24) 0%, rgba(248, 150, 0, 0) 70%),
    radial-gradient(22% 20% at 18% 22%, rgba(255, 122, 176, .22) 0%, rgba(255, 122, 176, 0) 70%);
  pointer-events: none;
}
.hero-collage--lebendig::after { border-color: var(--sun); opacity: .45; }
.hero-collage--lebendig .hero-foto {
  border-color: transparent;
  background:
    linear-gradient(var(--peach), var(--peach)) padding-box,
    linear-gradient(160deg, #FF8DBA 0%, var(--pink) 45%, var(--sun) 100%) border-box;
  box-shadow: 0 26px 50px -18px rgba(207, 0, 94, .45);
}
.hero-collage--lebendig .hero-rund {
  border-color: transparent;
  background:
    linear-gradient(var(--peach), var(--peach)) padding-box,
    linear-gradient(200deg, var(--sun) 0%, #FF8DBA 55%, var(--pink) 100%) border-box;
  box-shadow: 0 20px 40px -14px rgba(156, 0, 69, .45);
}
.hero-collage--lebendig .hero-oval {
  border: 6px solid #fff;
  box-shadow: 0 14px 30px -12px rgba(120, 30, 60, .35);
}
.hero-collage--lebendig .hero-foto { animation: hero-schweben 7s ease-in-out infinite; }
.hero-collage--lebendig .hero-oval { animation: hero-schweben 6s ease-in-out -2s infinite; }
.hero-collage--lebendig .hero-rund { animation: hero-schweben 8s ease-in-out -4s infinite; }
@keyframes hero-schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-collage--lebendig .hero-foto,
  .hero-collage--lebendig .hero-oval,
  .hero-collage--lebendig .hero-rund { animation: none; }
}

/* Zwei Fakten unter der Collage – schlicht, ohne Kästen */
.hero-facts {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem 2rem;
  margin-top: 1.5rem;
}
/* Auf dem Handy keine Collage: nach dem Text kommen die Fakten, direkt danach
   die Leistungen („Vier Wege …“). Grenze wie bei der Anrufleiste. */
@media (max-width: 779px) {
  .hero-collage { display: none; }
  .hero__media { max-width: none; }
  .hero-facts { margin-top: 0; justify-content: flex-start; }
}
.sun-badge {
  display: flex; align-items: center; gap: .8rem;
  font-size: 1.1rem; line-height: 1.3; font-weight: 700; color: var(--ink);
}
.sun-badge small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .95rem; margin-top: .1rem; }
.sun-badge__icon {
  width: 48px; height: 48px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pink-soft); color: var(--pink-deep);
}
.sun-badge__icon svg { width: 24px; height: 24px; }
.sun-badge--br .sun-badge__icon { background: var(--sun-soft); color: var(--sun-deep); }

/* Vertrauenspunkte unter den Knöpfen: zweispaltige Liste unter einer feinen
   Linie, Häkchen in kleinen runden Feldern – ohne Kästen drumherum. */
.chips {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .8rem 2rem;
  max-width: 38rem;
  margin-top: 2.2rem; padding: 1.4rem 0 0; list-style: none;
  border-top: 1px solid var(--line-strong);
}
.chips li {
  display: flex; align-items: center; gap: .7rem;
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
}
.chips svg {
  width: 30px; height: 30px; flex: none;
  padding: 6px; border-radius: 50%;
  background: var(--pink-soft); color: var(--pink-deep);
}

/* --- Karten -------------------------------------------------------------- */
.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* Karten: helle Fläche mit feiner, warmer Kante und weichem Schatten –
   leicht statt kastig. Beim Überfahren hebt sich eine klickbare Karte
   ein kleines Stück und die Kante wird rosé. */
.card {
  background: var(--white);
  border: 1px solid rgba(216, 194, 181, .55);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  box-shadow: 0 1px 2px rgba(58, 29, 46, .04), 0 12px 32px -20px rgba(120, 40, 70, .28);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  height: 100%;
}
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }
/* Ganze Karte ist klickbar – große Trefferfläche */
a.card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink-mid); }
a.card:hover, .card--hover:hover {
  border-color: rgba(207, 0, 94, .35);
  box-shadow: 0 1px 2px rgba(58, 29, 46, .04), 0 22px 44px -22px rgba(160, 20, 80, .38);
  transform: translateY(-3px);
}
a.card:hover h3 { color: var(--pink-deep); }
@media (prefers-reduced-motion: reduce) { a.card:hover, .card--hover:hover { transform: none; } }

/* Foto oben in einer Karte, im Panel je Karte austauschbar. Liegt innerhalb
   der Kartenpolsterung statt randlos, damit der Abstand überall gleich bleibt. */
.card__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--peach);
  display: grid; place-items: center;
  margin-bottom: 1.15rem;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
/* „Ganzes Bild zeigen“: kein Zuschnitt, Rahmen bleibt rechteckig. */
.card__media--ganz img { object-fit: contain; }
.card__media .photo-slot { padding: 1rem .75rem; font-size: .95rem; gap: .4rem; }
.card__media .photo-slot svg { width: 30px; height: 30px; }

.card__icon {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #FFF0F5 0%, var(--pink-soft) 100%);
  box-shadow: inset 0 0 0 1px rgba(207, 0, 94, .1);
  color: var(--pink-deep);
  margin-bottom: 1.1rem; flex: none;
}
.card__icon svg { width: 30px; height: 30px; }
.card__icon--sun {
  background: linear-gradient(145deg, #FFF7EA 0%, var(--sun-soft) 100%);
  box-shadow: inset 0 0 0 1px rgba(248, 150, 0, .15);
  color: var(--sun-deep);
}
.card__more {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: auto; padding-top: 1.1rem;
  font-weight: 700; color: var(--pink-deep); font-size: 1.05rem;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.card__more svg { width: 18px; height: 18px; transition: transform .2s ease; }
a.card:hover .card__more svg { transform: translateX(3px); }

/* Leistungs-Detailkarte mit Preiszeile */
.card__price {
  margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-weight: 700; color: var(--ink); font-size: 1.05rem;
}
.card__price span { color: var(--pink-deep); }
/* Preiszeile oben unter der Überschrift: als zarte Plakette statt mit Linie
   darüber – eine Trennlinie direkt unter einer Überschrift wirkt verloren. */
.card__price--oben {
  display: inline-block;
  margin: 0 0 1.25rem; padding: .55rem 1.1rem;
  border-top: 0; border-radius: var(--r-md);
  background: var(--pink-soft);
}

/* --- Angebots-Band ------------------------------------------------------- */
/* Angebotsband: Pink-Verlauf mit hellen Farbwolken und Körnung */
.offer {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl);
  background:
    var(--tex-korn),
    var(--tex-wolken-hell),
    radial-gradient(60% 80% at 100% 0%, rgba(248, 150, 0, .28) 0%, rgba(248, 150, 0, 0) 70%),
    linear-gradient(135deg, #D2005F 0%, #B0004F 55%, #8E0043 100%);
  color: #fff;
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: 0 24px 50px -30px rgba(140, 0, 65, .6);
}
.offer__grid { position: relative; z-index: 1; display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 860px) { .offer__grid { grid-template-columns: 1.15fr .85fr; } }
.offer h2 { color: #fff; }
.offer .eyebrow { color: #FFD08A; }
.offer ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.offer li { display: flex; gap: .75rem; align-items: flex-start; padding: .35rem 0; }
.offer li svg { width: 24px; height: 24px; flex: none; margin-top: .25rem; color: #FFD08A; }
/* Auswahlliste im Angebot: eine Anwendung pro Besuch – „oder“ zwischen den Punkten. */
.offer__choices li { position: relative; }
.offer__choices li + li { margin-top: 1.35rem; }
.offer__choices li + li::before {
  content: "oder"; position: absolute; top: -1.05rem; left: 2.25rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #FFD08A;
}
.offer__note { font-size: 1rem; color: #FBE3EC; margin-top: 1.25rem; }

.pricetag {
  background: #fff; color: var(--ink);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.25rem);
  text-align: center;
  box-shadow: 0 20px 40px -24px rgba(60, 0, 30, .55);
}
.pricetag__label { font-size: 1.05rem; font-weight: 700; color: var(--ink-soft); }
.pricetag__old { text-decoration: line-through; color: var(--ink-soft); font-size: 1.25rem; }
.pricetag__value {
  font-family: var(--ff-display); font-variation-settings: 'wght' 700;
  font-size: clamp(3rem, 8vw, 4.4rem); line-height: 1; color: var(--pink-deep);
  margin: .15em 0;
}
.pricetag__sub { font-size: 1.05rem; color: var(--ink-mid); }
.pricetag .btn { margin-top: 1.4rem; }

/* --- Split (Bild/Text) --------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split--rev .split__media { order: -1; }
@media (max-width: 899px) { .split--rev .split__media { order: 0; } }

/* Bildrahmen in Bogenform wie das große Foto im Startbereich: oben halbrund,
   unten weich gerundet (Klassenname historisch). Der große Radius oben wird
   vom Browser auf die halbe Breite begrenzt – so entsteht immer ein sauberer
   Halbkreis, egal wie breit das Bild ist. */
.media-blob {
  border-radius: 999px 999px var(--r-xl) var(--r-xl);
  overflow: hidden;
  background: linear-gradient(160deg, var(--peach), var(--rose));
  aspect-ratio: 4 / 4;
  box-shadow: 0 24px 50px -30px rgba(120, 40, 70, .45);
  display: grid; place-items: center;
}
.media-blob .photo-slot { padding-top: 22%; }
.media-blob img { width: 100%; height: 100%; object-fit: cover; }

/* Zweite Darstellung, im Panel je Bild wählbar: das ganze Bild statt eines
   Ausschnitts (z. B. das im Kreis angeordnete Tisch-Arrangement).
   Ohne Beschnitt, ohne Fläche und Schatten – ein vollständig gezeigtes Bild
   füllt den Rahmen nie ganz aus, eine Fläche dahinter sähe wie ein Kasten aus.
   Gilt nur mit Foto; der Platzhalter bleibt im normalen Rahmen. */
.media-blob--ganz {
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border-radius: var(--r-xl);
  aspect-ratio: auto;
}
.media-blob--ganz img { object-fit: contain; }

/* Text oben, darunter ein breites Raumfoto über die ganze Breite (die
   Slender-Life-Tische). Auf großen Bildschirmen steht die Überschrift links
   neben den Absätzen. Der Bogen oben ist hier flach gewölbt statt halbrund –
   ein Halbkreis über die volle Breite würde das halbe Foto verdecken. */
.panorama { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.panorama__text p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .panorama__text {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
  }
  .panorama__text h2 { margin-bottom: 0; }
}
.panorama__media .media-blob {
  aspect-ratio: 19 / 10;
  border-radius: 50% 50% var(--r-xl) var(--r-xl) / 22% 22% var(--r-xl) var(--r-xl);
}
.panorama__media .media-blob--ganz { aspect-ratio: auto; border-radius: var(--r-xl); }

/* Dasselbe Raumfoto im Bogen neben dem Text: bei Raumaufnahmen liegt oben
   meist nur Decke – der Ausschnitt sitzt deshalb weit unten. */
.split__media--raum .media-blob img { object-position: 50% 85%; }
@media (max-width: 599px) {
  .panorama__media .media-blob {
    aspect-ratio: 4 / 3;
    border-radius: 50% 50% var(--r-lg) var(--r-lg) / 18% 18% var(--r-lg) var(--r-lg);
  }
}
.media-round { border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 24px 50px -30px rgba(120, 40, 70, .45); background: var(--peach); }

/* Platzhalter, solange keine Studiofotos hinterlegt sind */
.photo-slot {
  display: grid; place-items: center; gap: .6rem;
  padding: 2.5rem 1.5rem; text-align: center;
  color: var(--ink-soft); background: var(--peach);
  width: 100%; height: 100%;
  font-size: 1rem; font-weight: 700;
}
.photo-slot svg { width: 42px; height: 42px; opacity: .55; }

/* Sichtbare Bildunterschrift, im Panel je Bild optional. */
.bild-figur { margin: 0; }
.bild-caption {
  margin-top: .8rem; text-align: center;
  font-size: 1rem; line-height: 1.5; color: var(--ink-soft);
}

/* --- Listen -------------------------------------------------------------- */
.ticklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.ticklist li { display: flex; gap: .75rem; align-items: flex-start; }
.ticklist svg { width: 24px; height: 24px; flex: none; margin-top: .2rem; color: var(--pink); }
.ticklist--sun svg { color: var(--sun-deep); }
.ticklist--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .75rem 2rem; }

/* --- Preistabelle -------------------------------------------------------- */
.pricebox {
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm); height: 100%;
}
.pricebox h3 { display: flex; align-items: center; gap: .75rem; }
.pricebox h3 svg { width: 28px; height: 28px; color: var(--pink); flex: none; }
.pricelist { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.pricelist li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--line-strong);
}
.pricelist li:last-child { border-bottom: 0; }
.pricelist .label { color: var(--ink); }
.pricelist .label small { display: block; color: var(--ink-soft); font-size: .95rem; font-weight: 400; }
.pricelist .value {
  font-weight: 700; color: var(--pink-deep); white-space: nowrap; font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.pricelist .value.is-deal::after {
  content: 'Aktion'; display: inline-block; margin-left: .5rem;
  background: var(--sun); color: #2A1800;
  font-size: .8rem; font-weight: 700;
  padding: .15rem .55rem; border-radius: 6px; vertical-align: middle;
}

/* --- Öffnungszeiten ------------------------------------------------------ */
.hours { list-style: none; margin: 0; padding: 0; font-size: 1.1rem; }
.hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .9rem 0; border-bottom: 1px solid var(--line-strong);
}
.hours li:last-child { border-bottom: 0; }
.hours dt, .hours .day { font-weight: 700; color: var(--ink); }
.hours .time { color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.hours li.is-closed .time { color: var(--ink-soft); }
.hours li.is-today {
  background: var(--sun-soft); border-radius: var(--r-sm);
  padding-inline: 1rem; margin-inline: -1rem; border-bottom-color: transparent;
}
.hours li.is-today .time { color: var(--ink); font-weight: 700; }
.hours li.is-today .day::after {
  content: 'heute'; margin-left: .6rem; font-size: .8rem;
  background: var(--pink-deep); color: #fff; font-weight: 700;
  padding: .1rem .5rem; border-radius: 6px; vertical-align: middle;
}

/* --- Dunkler Sonnenstudio-Block ------------------------------------------ */
/* Als großes, abgerundetes Feld mit etwas Rand rundherum statt als harte
   dunkle Bahn über die volle Breite – so fügt es sich weich zwischen die
   hellen Abschnitte. Beerenton im Verlauf, warmes Licht oben rechts,
   helle Farbwolken und dieselbe Körnung wie im Startbereich. */
.sunsection {
  margin-inline: clamp(.6rem, 2vw, 1.5rem);
  border-radius: clamp(24px, 4vw, 44px);
  background:
    var(--tex-korn),
    var(--tex-wolken-hell),
    radial-gradient(50% 60% at 95% 0%, rgba(232, 84, 127, .35) 0%, rgba(232, 84, 127, 0) 70%),
    radial-gradient(45% 55% at 0% 100%, rgba(248, 150, 0, .16) 0%, rgba(248, 150, 0, 0) 70%),
    linear-gradient(160deg, #44203A 0%, var(--plum) 45%, var(--plum-deep) 100%);
  color: #F3E8EC;
  position: relative; overflow: hidden;
}
.sunsection h2, .sunsection h3 { color: #fff; }
.sunsection .card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: #F3E8EC;
  box-shadow: none;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.sunsection .card h3 { color: #fff; }
.sunsection .card__icon { background: rgba(248,150,0,.2); color: #FFC24D; }
.sunsection .card__price { border-top-color: rgba(255,255,255,.2); color: #fff; }
.sunsection .card__price span { color: #FFC24D; }
.sunsection a { color: #FFC24D; }
.sunsection a:hover { color: #FFD98F; }

/* --- CTA-Band ------------------------------------------------------------ */
/* Endet wieder im Grundton – der steht dann auch hinter den runden oberen
   Ecken des Fußbereichs. */
.cta-band { background: linear-gradient(180deg, var(--cream) 0%, var(--peach) 50%, var(--cream) 100%); }
.cta-band__inner {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 1.75rem; align-items: center;
  background:
    var(--tex-wolken),
    linear-gradient(120deg, var(--white) 0%, #FFF8F3 60%, #FFF0F4 100%);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 3.25rem);
  border: 1px solid rgba(216, 194, 181, .55);
  box-shadow: 0 24px 50px -32px rgba(120, 40, 70, .4);
}
@media (min-width: 880px) { .cta-band__inner { grid-template-columns: 1.4fr auto; } }
.cta-band h2 { margin-bottom: .35em; }

/* --- Formular ------------------------------------------------------------ */
.form { display: grid; gap: 1.3rem; }
.form__row { display: grid; gap: 1.3rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; }
.field label { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.field .hint { font-size: .95rem; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1.1rem;
  min-height: 3.5rem;
  padding: .85rem 1rem;
  border: 2px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--white); color: var(--ink);
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--pink); box-shadow: 0 0 0 4px var(--pink-soft);
}
.field textarea { min-height: 170px; resize: vertical; }
.check { display: flex; gap: .8rem; align-items: flex-start; font-size: 1rem; }
.check input { width: 1.5rem; height: 1.5rem; margin-top: .15rem; flex: none; accent-color: var(--pink); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.form-note { font-size: .95rem; color: var(--ink-soft); }
.alert { padding: 1.1rem 1.3rem; border-radius: var(--r-sm); font-size: 1.05rem; font-weight: 700; }
.alert--ok { background: #E6F6EC; color: #145A30; border: 2px solid #A9DCBC; }
.alert--err { background: var(--pink-soft); color: var(--pink-deep); border: 2px solid #F0B3CB; }

/* --- Karten-Einbettung mit Einwilligung ---------------------------------- */
.map-consent {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--peach);
  border: 2px solid var(--line);
  min-height: 340px; display: grid; place-items: center; text-align: center;
  padding: 2rem;
}
.map-consent > div > svg { width: 48px; height: 48px; margin: 0 auto 1rem; color: var(--pink); }
.map-consent p { max-width: 34rem; margin-inline: auto; font-size: 1.05rem; }
.map-consent iframe { width: 100%; height: 420px; border: 0; display: block; }

/* --- Footer -------------------------------------------------------------- */
/* Fußbereich: oben weich gerundet, damit er wie ein Abschluss unter die
   helle Seite gleitet; Beerenton im Verlauf mit Körnung. */
.site-footer {
  border-radius: clamp(24px, 4vw, 44px) clamp(24px, 4vw, 44px) 0 0;
  background:
    var(--tex-korn),
    radial-gradient(50% 70% at 100% 0%, rgba(232, 84, 127, .22) 0%, rgba(232, 84, 127, 0) 70%),
    linear-gradient(170deg, var(--plum) 0%, var(--plum-deep) 60%);
  color: #EADDE4;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}.site-footer h4 { color: #fff; font-size: 1.3rem; margin-bottom: 1rem; }
.site-footer a { color: #fff; text-decoration-thickness: 1px; }
.site-footer a:hover { color: #FFD08A; }
.footer-grid { display: grid; gap: 2.5rem; }
/* Logo, Kontakt, Öffnungszeiten und Seiten nebeneinander – auf dem Tablet
   erst zwei mal zwei, ab Desktopbreite alle vier in einer Reihe. Dort wird
   die Schrift etwas kleiner, damit die Spalten nicht zu eng umbrechen. */
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .footer-grid { grid-template-columns: 1.15fr 1.1fr 1.15fr .8fr; gap: 1.75rem; }
  .footer-grid { font-size: .94rem; }
  .site-footer h4 { font-size: 1.15rem; }
  .footer-brand img { height: auto; max-height: var(--logo-h-footer, 96px); max-width: 100%; }
}
.footer-list a { overflow-wrap: anywhere; }
.footer-brand img { height: var(--logo-h-footer, 96px); width: auto; background: #fff; border-radius: var(--r-md); padding: .7rem 1rem; }

/* Social-Media-Icons im Fußbereich. Erscheinen nur, wenn im Panel eine
   Adresse hinterlegt ist. 48px Zielfläche für die Bedienung mit dem Finger. */
.social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.social a {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  transition: background .18s ease, color .18s ease;
}
.social a:hover, .social a:focus-visible { background: #fff; color: var(--pink, #CF005E); }
.social svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .social a { transition: none; } }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }

/* Listen mit vorangestelltem Symbol. Das <span> hält den Text in einer eigenen
   Spalte, damit mehrzeilige Einträge (die Anschrift) sauber einrücken. */
.footer-list--icons li { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: start; }
.footer-list--icons svg { width: 20px; height: 20px; margin-top: .2em; color: #FFC24D; }
.footer-list--icons li.is-closed { color: #C9B6C0; }
.footer-bottom {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: 1rem;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* Datenschutz-Hinweis unten am Rand – nur ein Hinweis, keine Einwilligung.
   Liegt über der Klick-Leiste, bis er bestätigt ist. */
.privacy-note {
  position: fixed; z-index: 100;
  left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 1100px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  background: var(--white); color: var(--ink-mid);
  border: 1px solid rgba(216, 194, 181, .55);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 18px 50px -12px rgba(58, 29, 46, .35);
  font-size: .95rem;
}
.privacy-note[hidden] { display: none; }
.privacy-note p { flex: 1 1 420px; margin: 0; }
.privacy-note strong { color: var(--ink); }
.privacy-note .btn { flex: 0 0 auto; }
@media (max-width: 600px) { .privacy-note .btn { width: 100%; } }
@media print { .privacy-note { display: none !important; } }

/* Klick-Leiste auf dem Handy: groß und eindeutig */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--white); border-top: 2px solid var(--line);
  box-shadow: 0 -4px 20px rgba(58,29,46,.1);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 64px; padding: .5rem; font-weight: 700; text-decoration: none; font-size: 1.15rem;
}
.callbar a svg { width: 22px; height: 22px; }
.callbar a:first-child { color: var(--pink-deep); }
.callbar a:last-child { background: var(--pink); color: #fff; }
@media (min-width: 780px) { .callbar { display: none; } }
@media (max-width: 779px) { body { padding-bottom: 64px; } }

/* --- Zurück zum Seitenanfang --------------------------------------------- */
/* Wird von main.js per [hidden] ein- und ausgeblendet. Ohne JavaScript bleibt
   der Knopf verborgen – er hätte dort ohnehin keine Funktion. */
.to-top {
  position: fixed; right: 1.1rem; bottom: 1.4rem; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0;
  border: 2px solid #fff; border-radius: 50%; cursor: pointer;
  background: var(--plum); color: #fff;
  box-shadow: var(--shadow-md);
  transition: background .18s ease;
}
/* Muss sein: display:flex oben ist spezifischer als das display:none des
   hidden-Attributs. Ohne diese Zeile stünde der Knopf dauerhaft da. */
.to-top[hidden] { display: none; }
.to-top:hover { background: var(--pink-deep); }
.to-top svg { width: 24px; height: 24px; }
/* Auf schmalen Bildschirmen sitzt unten die Anrufleiste – der Knopf muss
   darüber bleiben, sonst verdeckt er „Anfahrt“ und „Anrufen“. */
@media (max-width: 779px) { .to-top { bottom: calc(64px + 1rem); } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* --- Seitenkopf für Unterseiten ------------------------------------------ */
/* Seitenkopf der Unterseiten in derselben Bildsprache wie der Startbereich:
   Verlauf aus dem Ton der Kopfzeile heraus, warmes Licht rechts, Farb-
   wolken, Körnung – und unten weich in den Grundton auslaufend. */
.pagehead {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 4.5rem);
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(40% 70% at 85% 45%, rgba(255, 188, 160, .45) 0%, rgba(255, 188, 160, 0) 70%),
    linear-gradient(180deg, var(--cream) 0%, #FFF3E8 45%, #FDF0EC 80%, var(--cream) 100%);
}
.pagehead::before {
  content: ''; position: absolute; inset: -60px; z-index: -1;
  background: var(--tex-wolken);
  filter: blur(28px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 35%, #000 78%, transparent 96%);
  mask-image: linear-gradient(to bottom, transparent 6%, #000 35%, #000 78%, transparent 96%);
  pointer-events: none;
}
.pagehead::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--tex-korn);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 75%, transparent 100%);
  pointer-events: none;
}
/* Der Container ist zugleich .wrap – er behält deshalb die volle Seitenbreite,
   damit Überschrift und Logo auf einer Linie stehen. Nur der Text selbst wird
   für angenehme Zeilenlängen begrenzt. */
.pagehead__inner { position: relative; z-index: 1; }
.pagehead__inner > * { max-width: 48rem; }
.pagehead h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.06; letter-spacing: -.02em; }
/* Derselbe gemalte Pinselstrich wie unter der Überschrift der Startseite */
.pagehead h1::after {
  content: ''; display: block;
  width: min(5em, 100%); height: .2em; margin-top: .18em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 16' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='p'%3E%3Cstop offset='0' stop-color='%23F89600'/%3E%3Cstop offset='1' stop-color='%23E8547F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 11C60 5 150 3 297 8' fill='none' stroke='url(%23p)' stroke-width='6' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E")
    left center / 100% 100% no-repeat;
}
.pagehead p { font-size: clamp(1.15rem, 2vw, 1.3rem); }

.breadcrumb { font-size: 1rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.breadcrumb li::after { content: '›'; margin-left: .5rem; color: var(--ink-soft); }
.breadcrumb li:last-child::after { content: ''; }
.breadcrumb a { color: var(--ink-mid); }
.breadcrumb a:hover { color: var(--pink-deep); }

/* --- Anker-Offset unter dem Sticky-Header -------------------------------- */
[id] { scroll-margin-top: 120px; }

/* --- Scroll-Reveal -------------------------------------------------------
   Nur aktiv, wenn JavaScript läuft. Ohne JS bleibt alles sichtbar.        */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Hilfsklassen -------------------------------------------------------- */
.center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.small { font-size: 1rem; }
.muted { color: var(--ink-soft); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.prose { max-width: 48rem; }
.prose h2 { margin-top: 2.25em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.75em; }
.prose ul { display: grid; gap: .5rem; margin-bottom: 1.25em; }

/* --- Druckansicht ---------------------------------------------------------
   Vor allem für die Preisliste gedacht, die im Studio ausgehängt wird.     */
@media print {
  .topbar, .site-header, .callbar, .to-top, .site-footer, .cta-band,
  .mobile-nav, .breadcrumb, .btn, .map-consent, .sun-stage, .hero__media,
  .photo-slot, .media-blob, .card__media { display: none !important; }

  body {
    background: #fff; color: #000;
    font-size: 11pt; line-height: 1.45;
    padding-bottom: 0;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }

  .section, .section--blush, .section--sand, .pagehead {
    background: #fff !important;
    padding-block: .8rem !important;
    break-inside: avoid;
  }
  .pagehead::after { display: none; }
  .sunsection { background: #fff !important; color: #000 !important; }
  .sunsection h2, .sunsection h3, .sunsection .card h3 { color: #000 !important; }
  .sunsection .card { background: #fff !important; color: #000 !important; }

  .wrap { width: 100% !important; }
  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; margin-top: .6rem; }
  h3 { font-size: 12pt; }

  .card, .pricebox {
    border: 1px solid #999 !important;
    box-shadow: none !important;
    break-inside: avoid;
    padding: .7rem 1rem !important;
  }
  .grid { gap: .6rem !important; }
  .pricelist .value { color: #000 !important; }
  .pricelist .value.is-deal::after { border: 1px solid #666; background: #fff; }
  .offer { background: #fff !important; color: #000 !important; border: 2px solid #000; }
  .offer h2, .offer .eyebrow { color: #000 !important; }
  .pricetag { border: 1px solid #999; }
  .pricetag__value { color: #000 !important; }
  .eyebrow { color: #000 !important; }

  .prose a::after, .pricebox a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  a[href^="tel:"]::after, a[href^="#"]::after { content: ""; }

  /* Adresszeile unter jedem Ausdruck */
  main::after {
    content: "Bewegungsstudio Slender-Life & Sonnenstudio  ·  Kerzenheimer Straße 11  ·  67304 Eisenberg (Pfalz)  ·  Telefon 06351 122021  ·  Mo–Fr 9–19 Uhr, Sa & So 9–14 Uhr";
    display: block;
    margin-top: 1.2rem;
    padding-top: .6rem;
    border-top: 1px solid #999;
    font-size: 9.5pt;
    text-align: center;
  }
}