/* Lokal gehostete Schriften (Variable Fonts) — keine Anfragen an Google,
   damit keine Besucher-IPs an Dritte übertragen werden (Datenschutz/nDSG) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/jost.woff2') format('woff2');
}

:root {
  --cream: #FBF6EF;
  --cream-soft: #F5EDE1;
  --beige: #E4D5C0;
  --brown: #6B4A34;
  --brown-dark: #3E2C1E;
  /* Farbe der drei dunklen Bänder (Pausenband, Zitatband, Fusszeile).
     Burgund, am 31.08.2026 von Marius gewählt und von Cris bestätigt — nicht ohne
     Rücksprache ändern.
     Bewusst eine eigene Farbe statt --brown-dark: dieses Braun ist an 19 Stellen
     als SCHRIFTFARBE im Einsatz, die davon unberührt bleiben soll. */
  --band: #5E2233;
  --turquoise: #3FA9A0;
  --turquoise-dark: #2E827A;
  --white: #FFFFFF;
  --ink: #362718;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Jost', 'Segoe UI', sans-serif;

  --header-h: 84px;
  --radius: 22px;
  --shadow-soft: 0 18px 50px rgba(107, 74, 52, 0.12);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.02rem;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.75;
  overflow-x: hidden;
}

/* ── Decorative background orbs (transparency layer) ── */
.bg-decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}

.orb-1 {
  width: 520px; height: 520px;
  background: var(--beige);
  top: -140px; right: -120px;
}

.orb-2 {
  width: 420px; height: 420px;
  background: rgba(63, 169, 160, 0.35);
  top: 42%; left: -180px;
}

.orb-3 {
  width: 480px; height: 480px;
  background: rgba(228, 213, 192, 0.9);
  bottom: -160px; right: 8%;
}

/* ── Typography ── */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--brown-dark);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  letter-spacing: 0.01em;
}

h1 em {
  font-style: italic;
  color: var(--brown);
}

h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.45rem; }

p { margin: 0 0 1em; }

a { color: var(--turquoise-dark); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--turquoise-dark);
  margin-bottom: 1.6em;
}

.lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--brown);
}

.lead-center {
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.08rem;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
}

.narrow { max-width: 780px; }

/* ── Glass effect ── */
.glass {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

/* ── Buttons ── */
.btn {
  display: inline-block;
  padding: 0.9em 2.1em;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  transition: all 0.25s ease;
}

.btn-solid {
  background: var(--turquoise);
  color: var(--white);
  border: 1px solid var(--turquoise);
}

.btn-solid:hover {
  background: var(--turquoise-dark);
  border-color: var(--turquoise-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(63, 169, 160, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--brown-dark);
  border: 1px solid rgba(107, 74, 52, 0.4);
}

.btn-outline:hover {
  border-color: var(--brown-dark);
  transform: translateY(-2px);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(107, 74, 52, 0.25);
  color: var(--brown-dark);
}

.btn-glass:hover {
  background: var(--turquoise);
  border-color: var(--turquoise);
  color: var(--white);
}

/* ── Header ── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  transition: background 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}

.site-header.scrolled {
  height: 68px;
  background: rgba(251, 246, 239, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(107, 74, 52, 0.1);
}

.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-logo { height: 44px; width: auto; }

.brand-name {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--brown-dark);
  letter-spacing: 0.04em;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.main-nav a {
  color: var(--brown-dark);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  position: relative;
}

.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%;
  height: 1px;
  background: var(--turquoise);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.main-nav a:not(.btn):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px; height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--brown-dark);
  transition: transform 0.3s ease;
}

.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* ── Hero ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  padding: calc(var(--header-h) + 40px) 28px 80px;
  background: linear-gradient(168deg, var(--cream-soft) 0%, var(--cream) 55%, rgba(63, 169, 160, 0.07) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.hero-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--brown);
  margin: 1.6em 0 2.4em;
}

.hero-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-lineart {
  position: absolute;
  right: 1%;
  top: 52%;
  transform: translateY(-50%);
  height: min(66vh, 500px);
  width: auto;
  opacity: 0.06;
  z-index: 1;
  pointer-events: none;
}

.scroll-hint {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 44px;
  border: 1.5px solid rgba(107, 74, 52, 0.4);
  border-radius: 999px;
  z-index: 2;
}

.scroll-hint span {
  position: absolute;
  top: 8px; left: 50%;
  width: 3px; height: 8px;
  margin-left: -1.5px;
  background: var(--brown);
  border-radius: 2px;
  animation: scrollDot 1.8s ease-in-out infinite;
}

@keyframes scrollDot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(14px); opacity: 0; }
}

/* ── Sections ── */
.section { padding: 140px 0; }

/* ── Pausenband (ruhige Zäsur zwischen den Sektionen) ──
   Löst das frühere ganzflächige Foto ab. Gleicher brauner Ton wie Zitatband und
   Fusszeile, damit die Seite einen wiederkehrenden Rhythmus bekommt. Bewusst
   kompakter als das Fotoband, damit der Blick zügig zu den Leistungen weiterwandert. */
.pause-band {
  background: var(--band);
  /* Bewusst schlank gehalten: die dunkle Fläche soll eine Zäsur setzen, nicht dominieren.
     Wächst mit der Fensterbreite mit, damit der Balken auf dem Handy nicht klobig wirkt. */
  padding: clamp(46px, 6.5vw, 64px) 0;
  text-align: center;
}

.pause-band p {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 1.35;
  color: var(--cream);
  margin: 0;
}

.pause-band em {
  font-style: italic;
  opacity: 0.88;
}

/* ── About / Qui suis-je ── */
.split {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-portrait {
  position: relative;
  justify-self: center;
  /* Platz für die versetzte Zierlinie, damit nichts über den Rand hinausragt */
  padding: 0 26px 26px 0;
}

.portrait-frame {
  width: min(340px, 78vw);
  aspect-ratio: 3 / 4;
  border-radius: 170px 170px var(--radius) var(--radius);
  overflow: hidden;
  position: relative;
  z-index: 2;
  background: linear-gradient(160deg, var(--beige), var(--cream-soft));
  box-shadow: var(--shadow-soft);
}

.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.portrait-frame:hover img { transform: scale(1.045); }

.portrait-accent {
  position: absolute;
  inset: 26px 0 0 26px;
  border: 1px solid rgba(63, 169, 160, 0.45);
  border-radius: 170px 170px var(--radius) var(--radius);
  z-index: 1;
}

.signature {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--turquoise-dark);
  margin-top: 1.6em;
}

/* ── Philosophy ── */
.philosophy {
  background: linear-gradient(180deg, rgba(228, 213, 192, 0.35), rgba(228, 213, 192, 0.65));
}

.philosophy-head {
  text-align: center;
  margin-bottom: 70px;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.pillar {
  padding: 40px 34px;
  text-align: center;
}

.pillar h3 {
  position: relative;
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.pillar h3::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 34px; height: 1.5px;
  background: var(--turquoise);
}

.pillar p {
  margin: 0;
  font-size: 0.95rem;
}

/* ── Services ── */
.services-head {
  text-align: center;
  margin-bottom: 80px;
}

.service {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  margin-bottom: 110px;
}

.service:last-child { margin-bottom: 0; }

.service--reverse .service-visual { order: 2; }
.service--reverse .service-content { order: 1; }

.service-visual {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 3;
  position: relative;
}

.service-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.service-visual:hover img { transform: scale(1.045); }

.service-visual--warm::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(228, 180, 120, 0.28), rgba(107, 74, 52, 0.12));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.service-visual--art {
  background:
    radial-gradient(circle at 30% 25%, rgba(63, 169, 160, 0.14), transparent 55%),
    linear-gradient(155deg, var(--cream-soft), var(--beige));
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-art {
  height: 82% !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 16px 30px rgba(107, 74, 52, 0.18));
}

/* Bronzage: Logo auf zartem Rosé-Verlauf.
   Die Farben sind bewusst durchscheinend (Alpha < 1), damit das Creme der Seite
   durchkommt und der Bereich sich ruhig einfügt statt als greller Farbblock zu wirken. */
.service-visual--bronzage {
  background:
    radial-gradient(circle at 58% 42%, rgba(255, 198, 130, 0.32), transparent 58%),
    linear-gradient(155deg, rgba(224, 116, 104, 0.80), rgba(176, 60, 130, 0.86));
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-visual--bronzage .service-art {
  height: 80% !important;
  filter: drop-shadow(0 14px 26px rgba(90, 30, 60, 0.22));
}

/* Épilation: Logo auf zartem Sand-Verlauf.
   Bewusst sehr hell gehalten, weil die Schrift im Logo schwarz ist und Kontrast braucht;
   die Terrakotta- und Puderflächen des Logos nehmen den Ton des Verlaufs auf. */
.service-visual--epilation {
  background:
    radial-gradient(circle at 62% 36%, rgba(224, 168, 140, 0.28), transparent 60%),
    linear-gradient(155deg, var(--cream-soft), var(--beige));
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--turquoise-dark);
  display: block;
  margin-bottom: 0.6em;
}

.service-benefits {
  list-style: none;
  margin: 1.2em 0 0;
  padding: 0;
}

.service-benefits li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.service-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--turquoise);
  font-weight: 500;
}

.service-price-note {
  font-size: 0.92rem;
  color: var(--brown);
  margin-top: 1.4em;
}

.todo-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(63, 169, 160, 0.14);
  color: var(--turquoise-dark);
  border: 1px solid rgba(63, 169, 160, 0.4);
  padding: 2px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}

/* Price panel (details/summary) */
.price-panel {
  margin-top: 1.6em;
  overflow: hidden;
}

.price-panel summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 26px;
  font-weight: 400;
  letter-spacing: 0.06em;
  font-size: 0.92rem;
  color: var(--brown-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price-panel summary::-webkit-details-marker { display: none; }

.price-panel summary::after {
  content: "+";
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--turquoise-dark);
  transition: transform 0.3s ease;
}

.price-panel[open] summary::after { transform: rotate(45deg); }

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.price-table td {
  padding: 9px 26px;
  border-top: 1px solid rgba(107, 74, 52, 0.12);
}

.price-table td:last-child {
  text-align: right;
  font-weight: 400;
  color: var(--brown);
  white-space: nowrap;
}

/* ── Certifications ── */
.certs {
  background: linear-gradient(180deg, rgba(228, 213, 192, 0.25), rgba(63, 169, 160, 0.07));
}

.certs-head {
  text-align: center;
  margin-bottom: 60px;
}

.certs-highlight {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: 44px;
  padding: 44px;
  align-items: center;
  margin-bottom: 60px;
}

.certs-highlight img {
  width: 100%;
  height: auto;
  display: block;
  /* dezenter, gerader Passepartout-Rahmen — ersetzt den schrägen Holzrahmen aus dem Foto */
  border: 12px solid #fdfcf8;
  border-radius: 3px;
  box-shadow: 0 12px 34px rgba(62, 44, 30, 0.22), 0 0 0 1px rgba(107, 74, 52, 0.16);
}

.certs-highlight h3 { margin-bottom: 0.6em; }

.certs-highlight p {
  margin: 0;
  font-size: 0.96rem;
}

.certs-list-wrap {
  max-width: 760px;
  margin: 0 auto;
}

.certs-list-intro {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 1.8em;
}

.certs-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.certs-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 28px;
  padding: 15px 4px;
  border-bottom: 1px solid rgba(107, 74, 52, 0.16);
}

.certs-list li:first-child {
  border-top: 1px solid rgba(107, 74, 52, 0.16);
}

.certs-list strong {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--brown-dark);
  white-space: nowrap;
}

.certs-list span {
  font-size: 0.85rem;
  color: var(--brown);
  letter-spacing: 0.03em;
  text-align: right;
}

.trust-badge a {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--turquoise-dark);
  text-decoration: none;
  border: 1px solid rgba(63, 169, 160, 0.4);
  background: rgba(63, 169, 160, 0.08);
  padding: 6px 16px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.trust-badge a:hover {
  background: var(--turquoise);
  color: var(--white);
}

/* ── Témoignages ── */
.testimonials { text-align: center; }

.testimonials-head { margin-bottom: 50px; }

/* Alle Stimmen liegen in derselben Rasterzelle übereinander. So richtet sich die Höhe
   automatisch nach der LÄNGSTEN Stimme – nichts ragt heraus, nichts springt beim Blättern.
   (Früher: feste Mindesthöhe + absolute Positionierung, das passte nur für kurze Texte.) */
.testimonial-slider {
  display: grid;
}

.testimonial {
  margin: 0;
  padding: 0 12px;
  grid-area: 1 / 1;
}

.testimonial.slide { /* wird vom Slider gesetzt, sobald mehrere Stimmen vorhanden sind */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.testimonial.slide.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s ease, visibility 0s;
}

/* Dekoratives Anführungszeichen statt Sternen – es wurde keine Sternebewertung abgegeben */
.quote-mark {
  display: block;
  font-family: var(--font-serif);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--turquoise);
  opacity: 0.55;
  margin-bottom: 0.2em;
}

.testimonial p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.7;
  color: var(--brown-dark);
}

.testimonial footer {
  margin-top: 1.4em;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brown);
}

/* Leistung unter dem Namen, aus dem Text der Person abgeleitet */
.testimonial-service {
  display: block;
  margin-top: 0.45em;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.75;
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
}

.slider-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(107, 74, 52, 0.25);
  transition: background 0.25s ease, transform 0.25s ease;
}

.slider-dots button.active {
  background: var(--turquoise);
  transform: scale(1.25);
}

/* ── FAQ ── */
.faq-head {
  text-align: center;
  margin-bottom: 50px;
}

.faq-item {
  border-bottom: 1px solid rgba(107, 74, 52, 0.16);
}

.faq-item:first-child {
  border-top: 1px solid rgba(107, 74, 52, 0.16);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 44px 22px 4px;
  position: relative;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--brown-dark);
  transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover { color: var(--turquoise-dark); }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-size: 1.7rem;
  color: var(--turquoise-dark);
  transition: transform 0.3s ease;
  line-height: 1;
}

.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq-answer {
  padding: 0 4px 24px;
}

.faq-answer p {
  margin: 0;
  color: var(--brown);
  font-size: 1rem;
  line-height: 1.75;
}

/* ── Quote band ── */
.quote-band {
  background: var(--band);
  /* Schlanker als früher (110px fix), damit die dunkle Fläche die Seite nicht beschwert.
     Die Fusszeile bleibt davon unberührt. */
  padding: clamp(54px, 7.5vw, 78px) 0;
  text-align: center;
}

.quote-band p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: 1.85;
  letter-spacing: 0.01em;
  color: var(--cream);
  margin: 0;
}

/* ── Contact ── */
.contact {
  background: linear-gradient(200deg, rgba(228, 213, 192, 0.5), rgba(63, 169, 160, 0.1));
}

.contact-card {
  display: grid;
  grid-template-columns: 0.8fr 1.15fr 0.85fr;
  gap: 50px;
  padding: 56px;
  align-items: center;
}

.contact-photo {
  border-radius: 140px 140px 18px 18px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 3 / 4.4;
}

.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.contact-photo:hover img { transform: scale(1.045); }

.contact-details h2 { margin-bottom: 0.8em; }

address {
  font-style: normal;
  font-family: var(--font-serif);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--brown-dark);
  margin-bottom: 1.2em;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 2em;
}

.contact-links a {
  color: var(--brown);
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid rgba(107, 74, 52, 0.25);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.contact-links a:hover {
  color: var(--turquoise-dark);
  border-color: var(--turquoise-dark);
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Schwebender WhatsApp-Button — erscheint erst nach dem Hero */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--turquoise);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(63, 169, 160, 0.45);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}

.wa-float.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.wa-float:hover {
  background: var(--turquoise-dark);
}

.booking-note {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--brown);
  margin-top: 1.4em;
  margin-bottom: 0;
}

.contact-hours h3 {
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(107, 74, 52, 0.2);
}

.contact-hours dl { margin: 0; }

.contact-hours dl div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(107, 74, 52, 0.15);
}

.contact-hours dt {
  font-weight: 400;
  color: var(--brown-dark);
}

.contact-hours dd {
  margin: 0;
  color: var(--brown);
  text-align: right;
}

/* ── Terminanfrage-Formular (öffnet WhatsApp) ── */
.booking-card {
  margin-top: 34px;
  padding: 48px 56px 44px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.booking-intro {
  text-align: center;
  margin-bottom: 34px;
}

.booking-intro h3 {
  margin-bottom: 0.4em;
}

.booking-intro p {
  margin: 0 auto;
  max-width: 520px;
  color: var(--brown);
  font-size: 0.98rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 26px;
  margin-bottom: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-field label {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brown);
}

.form-field .optional {
  text-transform: none;
  letter-spacing: 0.02em;
  font-style: italic;
  opacity: 0.75;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(107, 74, 52, 0.22);
  border-radius: 10px;
  padding: 12px 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  width: 100%;
}

.form-field textarea {
  resize: vertical;
  min-height: 88px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--turquoise);
  box-shadow: 0 0 0 3px rgba(63, 169, 160, 0.15);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(107, 74, 52, 0.45);
}

/* Fehlermarkierung, wenn ein Pflichtfeld leer ist */
.form-field.invalid input {
  border-color: #c0705a;
  background: rgba(192, 112, 90, 0.06);
}

.form-error {
  font-size: 0.8rem;
  color: #a85942;
  margin: 0;
}

.booking-form > .btn {
  display: block;
  width: 100%;
  margin-top: 26px;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
}

.form-note {
  margin: 16px 0 0;
  text-align: center;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--brown);
}

@media (max-width: 760px) {
  .booking-card { padding: 34px 24px 30px; }
  .form-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Footer ── */
.site-footer {
  background: var(--band);
  border-top: 1px solid rgba(251, 246, 239, 0.12);
  padding: 44px 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.footer-logo {
  height: 42px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.footer-inner p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(251, 246, 239, 0.75);
}

.footer-imprint {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-imprint strong {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.03em;
}

.footer-imprint a {
  color: rgba(251, 246, 239, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(251, 246, 239, 0.3);
}

.footer-imprint a:hover {
  color: var(--cream);
  border-color: var(--cream);
}

.footer-copyright {
  font-size: 0.78rem !important;
  color: rgba(251, 246, 239, 0.5) !important;
  margin-top: 6px !important;
}

.footer-inner a {
  color: var(--cream);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

/* ── Preisseite ── */
.tarifs-main {
  padding: calc(var(--header-h) + 60px) 0 100px;
}

.tarifs-head {
  text-align: center;
  margin-bottom: 56px;
}

.tarifs-head h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 0.4em;
}

.tarif-block {
  padding: 44px 48px;
  margin-bottom: 28px;
}

.tarif-block h2 {
  font-size: 1.7rem;
  text-align: center;
  margin-bottom: 0.8em;
}

.tarif-block h3 {
  font-size: 1.15rem;
  color: var(--brown);
  margin: 1.6em 0 0.5em;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(107, 74, 52, 0.18);
}

.tarif-block h3:first-of-type { margin-top: 0.6em; }

.tarif-note {
  text-align: center;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--brown);
  max-width: 560px;
  margin: -0.4em auto 1.6em;
}

.tarif-table {
  width: 100%;
  border-collapse: collapse;
}

.tarif-table td {
  padding: 11px 2px;
  border-bottom: 1px dashed rgba(107, 74, 52, 0.16);
  font-size: 0.98rem;
}

.tarif-table tr:last-child td { border-bottom: none; }

.tarif-table td:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: 400;
  color: var(--brown-dark);
  padding-left: 18px;
}

.tarif-table td:last-child::before {
  content: "Fr. ";
  color: var(--brown);
  font-size: 0.85em;
}

.tarif-placeholder {
  text-align: center;
  color: var(--brown);
  margin: 0;
}

/* Hinweissatz unter einer Preistabelle, wenn der Preis individuell festgelegt wird
   (Lissage brésilien, Bronzage mit eigenem Bikini) — bewusster Text, kein Platzhalter */
.tarif-individuel {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.8;
}

.tarif-individuel a {
  color: var(--turquoise-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 169, 160, 0.4);
  transition: border-color 0.2s ease;
}

.tarif-individuel a:hover {
  border-color: var(--turquoise-dark);
}

.tarifs-footnote {
  max-width: 720px;
  margin: 36px auto 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--brown);
  line-height: 1.7;
}

.tarifs-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 44px;
}

.main-nav a.active {
  color: var(--turquoise-dark);
}

@media (max-width: 760px) {
  .tarif-block { padding: 30px 22px; }
  .tarif-table td { font-size: 0.94rem; padding: 10px 0; }
  .tarifs-main { padding-top: calc(var(--header-h) + 30px); }
}

/* ── Rechtliche Seiten (Impressum / Datenschutz) ── */
.legal-main {
  padding: calc(var(--header-h) + 50px) 0 90px;
}

.legal-main h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1em;
}

.legal-main h2 {
  font-size: 1.3rem;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.legal-main a {
  color: var(--turquoise-dark);
}

.legal-updated {
  margin-top: 3.5em;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--brown);
}

.legal-nav a {
  color: var(--brown-dark);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

.footer-legal {
  display: flex;
  gap: 22px;
}

.footer-legal a,
.social-links a {
  color: var(--cream);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}

/* ── Reveal animation ── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 56px; }
  .about-text { text-align: center; }
  .pillars { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .service,
  .service--reverse {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-bottom: 80px;
  }
  .service--reverse .service-visual { order: 0; }
  .service--reverse .service-content { order: 1; }
  .contact-card { grid-template-columns: 1fr; padding: 44px 34px; gap: 44px; }
  .contact-photo { max-width: 320px; margin: 0 auto; }
  .certs-highlight { grid-template-columns: 1fr; padding: 30px; gap: 26px; }
  .certs-highlight img { max-width: 340px; margin: 0 auto; }
}

/* Burger-Menü früh genug aktivieren, damit die Navigation nie gequetscht umbricht.
   Grenze am 20.09.2026 von 940 auf 1040 px angehoben: dazwischen brachen
   „À propos" und der Termin-Knopf auf zwei Zeilen um (bei der Live-Prüfung gemessen). */
@media (max-width: 1040px) {
  .main-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 84vw);
    background: rgba(251, 246, 239, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 44px;
    gap: 26px;
    box-shadow: -20px 0 60px rgba(107, 74, 52, 0.15);
    transform: translateX(100%);
    transition: transform 0.35s ease;
    z-index: 90;
  }

  .main-nav.open { transform: translateX(0); }

  .main-nav a { font-size: 1.05rem; }

  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 95;
  }
}

@media (max-width: 760px) {
  .brand-name { display: none; }

  .hero { padding-top: calc(var(--header-h) + 10px); }

  .hero-lineart { display: none; }

  .section { padding: 80px 0; }

  .contact-card { padding: 36px 24px; }
  .certs-list li { flex-direction: column; align-items: flex-start; gap: 3px; }
  .certs-list span { text-align: left; }
  .certs-list strong { white-space: normal; }

  .about-portrait { padding: 0 16px 16px 0; }
  .portrait-accent { inset: 18px 0 0 18px; }
}

/* ── Barrierefreiheit: sichtbarer Fokusrahmen bei Tastatur-Bedienung ── */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--turquoise-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Maus-Klicks bekommen keinen Rahmen (nur Tastatur) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ── Druckansicht (z. B. für Impressum, Kontakt, Preise) ── */
@media print {
  .bg-decor,
  .site-header,
  .nav-toggle,
  .scroll-hint,
  .hero-lineart,
  .wa-float,
  .pause-band,
  .quote-band,
  .slider-dots,
  .hero-actions,
  .contact-actions {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
  }

  .section,
  .hero {
    padding: 18px 0;
    min-height: 0;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  /* Links im Druck mit ausgeschriebener Adresse */
  .contact-links a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
  }

  .glass,
  .service-visual,
  .price-panel {
    box-shadow: none !important;
    border: 1px solid #ccc;
  }

  .price-panel[open] summary::after { content: ""; }
  .price-panel summary { pointer-events: none; }

  img { max-width: 100% !important; }
}