/* =====================================================================
   Maria Augusta Fölsener — Ganzheitskosmetik Berlin
   Implementation of the "Salon Maria copy" Claude Design prototype.
   Palette: "Salbei & Orchidee"  ·  Plant density: "Natürlich"
   ===================================================================== */

:root {
  --accent:       #587332;   /* sage green CTA — WCAG AA vs. white/paper (5.4:1) */
  --accent-text:  #5a7634;   /* readable accent text */
  --leaf:         #7d9a4e;   /* botanical leaf */
  --bloom:        #e3a9b6;   /* orchid bloom */
  --bud:          #ecc3cd;   /* orchid bud */
  --gold:         #946d14;   /* star / orchid lip — WCAG AA vs. white (4.7:1) */

  --ink:          #45522f;   /* headlines */
  --ink-soft:     #5e6748;   /* body green */
  --ink-muted:    #6a7158;   /* muted body */
  --tan:          #8a6d4d;   /* eyebrow / accents — WCAG AA vs. bg/paper (4.6:1+) */

  --bg:           #fbfaf6;   /* page background */
  --paper:        #fff;
  --line:         #ebe7da;   /* hairlines */

  --sand:         #f4f1e8;   /* warm section block */
  --sage-block:   #eaf0df;   /* pastel green block */
  --icon-bg:      #eef1e4;   /* round icon backdrop */

  --footer-bg:    #3c4a2a;
  --footer-fg:    #cdd5bd;
  --footer-mute:  #adb69d;   /* WCAG AA vs. --footer-bg (4.5:1) */
  --footer-label: #afb7a5;   /* WCAG AA vs. --footer-bg (4.6:1) */
  --footer-line:  #4d5b39;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* ----- reset / base ------------------------------------------------- */
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--sans);
  color: #3f472f;
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: inherit; }
::selection { background: #d6e3c2; color: #3c4a2a; }

/* ----- keyboard accessibility ---------------------------------------- */
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: top .2s ease;
}
.skip-link:focus-visible {
  top: 12px;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-whatsapp:focus-visible,
.map-consent__btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.nav__toggle:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: 8px;
}

@keyframes sway      { 0%,100% { transform: rotate(0deg); }                  50% { transform: rotate(4deg); } }
@keyframes swayslow  { 0%,100% { transform: rotate(0deg) translateY(0); }    50% { transform: rotate(-3deg) translateY(6px); } }
@keyframes floaty    { 0%,100% { transform: translateY(0); }                 50% { transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
  .deco { animation: none !important; }
}

/* ----- shared bits -------------------------------------------------- */
.eyebrow {
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--tan);
}
.h-display {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
}

/* botanical decorations (absolute, non-interactive) */
.deco { position: absolute; pointer-events: none; display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.frond-90  { width: 90px;    height: 135px; opacity: .61; }
.frond-130 { width: 130px;   height: 195px; opacity: .61; }
.frond-140 { width: 140px;   height: 210px; opacity: .50; }
.orchid-78 { width: 132.6px; height: 78px;  opacity: .748; }
.orchid-120{ width: 204px;   height: 120px; opacity: .55; }
.orchid-170{ width: 289px;   height: 170px; opacity: .598; }
.orchid-180{ width: 306px;   height: 180px; opacity: .50; }

.divider-svg { width: 150px; height: 20px; display: block; }

/* buttons */
.btn-primary {
  display: inline-block;
  text-decoration: none;
  background: var(--accent);
  color: #fff;
  letter-spacing: .5px;
  border-radius: 100px;
  transition: filter .2s ease;
}
.btn-primary:hover { filter: brightness(.92); }

.btn-outline {
  display: inline-block;
  text-decoration: none;
  border: 1.5px solid var(--accent);
  color: var(--accent-text);
  letter-spacing: .5px;
  border-radius: 100px;
  transition: background .2s ease;
}
.btn-outline:hover { background: #f1f4ec; }

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 48px;
  background: rgba(251, 250, 246, .88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav__brand img { height: 50px; width: 50px; object-fit: contain; }
.nav__name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.nav__name b {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .5px;
  color: #4a5733;
}
.nav__name small {
  font-size: 9px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--tan);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__links a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14px;
  letter-spacing: .3px;
}
.nav__links a.is-active { color: var(--accent); font-weight: 500; }
.nav__links a.nav__cta {
  padding: 10px 22px;
  font-size: 13px;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: .6px;
}

/* burger toggle (hidden on desktop) */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .28s ease, opacity .2s ease;
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   HERO (clean / imageless / centered)
   ===================================================================== */
.hero {
  position: relative;
  padding: 104px 56px 96px;
  text-align: center;
  overflow: hidden;
  background: var(--bg);
}
.hero__inner { max-width: 720px; margin: 0 auto; position: relative; z-index: 2; }
.hero__divider { display: flex; justify-content: center; margin-bottom: 26px; }
.hero .eyebrow { letter-spacing: 5px; color: var(--tan); }
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 76px;
  line-height: 1.04;
  letter-spacing: -.5px;
  margin: 20px 0 24px;
  color: var(--ink);
}
.hero__sub {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 460px;
  margin: 0 auto 38px;
  font-weight: 300;
}
.hero__actions {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.hero__actions .btn-primary { padding: 15px 36px; font-size: 15px; color: #fff; font-weight: 500; }
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--accent-text);
  font-size: 15px;
  letter-spacing: .3px;
  border-bottom: 1px solid rgba(90, 118, 52, .4);
  padding-bottom: 3px;
  transition: border-color .2s ease;
}
.hero__link:hover { border-color: var(--accent); }

/* =====================================================================
   ÜBER MICH
   ===================================================================== */
.about {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 76px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 116px 56px;
  overflow: visible;
}
.about__media { position: relative; }
.about__frame {
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(70, 82, 47, .5);
}
.about__frame img { width: 100%; height: 100%; object-fit: cover; }
.about__deco { top: -28px; left: -34px; transform-origin: bottom; animation: sway 8s ease-in-out infinite; }
.about h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 47px;
  line-height: 1.08;
  margin: 16px 0 26px;
  color: var(--ink);
}
.about__text {
  font-size: 16.5px;
  color: #585f47;
  max-width: 520px;
  margin: 0;
  font-weight: 300;
}
.about__stats { display: flex; gap: 36px; margin-top: 38px; }
.about__stats .num {
  font-family: var(--serif);
  font-size: 38px;
  color: var(--accent);
  line-height: 1;
}
.about__stats .lbl {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #737864;
  margin-top: 4px;
}
.about__rule { margin-top: 36px; }

/* =====================================================================
   LEISTUNGEN PREVIEW
   ===================================================================== */
.services {
  position: relative;
  text-align: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 56px 110px;
  overflow: visible;
}
.services__deco { top: 0; right: 12px; transform-origin: top right; animation: swayslow 10s ease-in-out infinite; }
.services h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 47px;
  margin: 16px 0 56px;
  color: var(--ink);
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.card-svc {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 46px 32px;
  text-align: center;
  transition: box-shadow .3s ease, transform .3s ease;
}
.card-svc:hover {
  box-shadow: 0 22px 46px -24px rgba(70, 82, 47, .42);
  transform: translateY(-5px);
}
.card-svc__icon { display: flex; justify-content: center; margin-bottom: 22px; }
.card-svc h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  margin: 0 0 12px;
  color: var(--ink);
}
.card-svc p { font-size: 15px; color: var(--ink-muted); margin: 0; font-weight: 300; }
.services__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 52px;
  flex-wrap: wrap;
}
.services__actions .btn-outline { font-size: 14px; padding: 13px 28px; }
.services__actions .btn-primary { font-size: 14px; padding: 14.5px 28px; }

/* =====================================================================
   PRODUKTPARTNER
   ===================================================================== */
.partners { background: var(--sand); padding: 80px 56px; }
.partners__inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.partners h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 38px;
  margin: 14px 0 10px;
  color: var(--ink);
}
.partners__lead {
  font-size: 15.5px;
  color: var(--ink-muted);
  max-width: 480px;
  margin: 0 auto 46px;
  font-weight: 300;
}
.partners__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.partners__logo {
  background: var(--paper);
  border-radius: 8px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  box-shadow: 0 8px 24px -18px rgba(70, 82, 47, .5);
  transition: transform .3s ease;
}
.partners__logo:hover { transform: translateY(-4px); }
.partners__logo img { width: 100%; max-width: 150px; max-height: 46px; object-fit: contain; }

/* =====================================================================
   KUNDENSTIMMEN
   ===================================================================== */
.reviews {
  position: relative;
  background: var(--sage-block);
  padding: 104px 56px;
  overflow: hidden;
}
.reviews__deco--orchid { top: -20px; right: -16px; transform-origin: top right; animation: sway 9s ease-in-out infinite; }
.reviews__deco--frond  { bottom: -30px; left: -20px; transform-origin: bottom left; animation: swayslow 11s ease-in-out infinite; }
.reviews__inner { max-width: 1180px; margin: 0 auto; text-align: center; position: relative; }
.reviews .eyebrow { color: #636e55; } /* WCAG AA vs. --sage-block (4.6:1) */
.reviews h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 47px;
  margin: 16px 0 8px;
  color: var(--ink);
}
.reviews__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper);
  border-radius: 100px;
  padding: 7px 16px;
  margin-bottom: 52px;
  box-shadow: 0 4px 18px -10px rgba(70, 82, 47, .4);
}
.reviews__badge .stars { color: var(--gold); font-size: 13px; letter-spacing: 1px; }
.reviews__badge span:last-child { font-size: 12px; color: var(--ink-soft); letter-spacing: .5px; }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.card-review {
  background: var(--paper);
  border-radius: 8px;
  padding: 38px 32px;
  text-align: left;
  box-shadow: 0 14px 36px -26px rgba(70, 82, 47, .5);
}
.card-review .stars { color: var(--gold); font-size: 15px; letter-spacing: 2px; margin-bottom: 18px; }
.card-review blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.42;
  color: #47502f;
  margin: 0 0 22px;
}
.card-review cite {
  font-style: normal;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tan);
}

/* =====================================================================
   EINBLICKE / GALERIE
   ===================================================================== */
.gallery {
  max-width: 1280px;
  margin: 0 auto;
  padding: 110px 56px 96px;
  text-align: center;
}
.gallery h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 47px;
  margin: 16px 0 48px;
  color: var(--ink);
}
/* masonry: shows portrait & landscape shots at their natural ratio */
.gallery__grid {
  column-count: 3;
  column-gap: 16px;
}
.gallery__grid figure {
  margin: 0 0 16px;
  break-inside: avoid;
  overflow: hidden;
  border-radius: 8px;
}
.gallery__grid img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s ease;
}
.gallery__grid figure:hover img { transform: scale(1.05); }

/* =====================================================================
   KONTAKT
   ===================================================================== */
.contact {
  position: relative;
  background: var(--sand);
  padding: 104px 56px;
  overflow: hidden;
}
.contact__deco--frond  { top: 40px; left: -10px; transform-origin: top left; animation: sway 8s ease-in-out infinite; }
.contact__deco--orchid { bottom: -10px; right: 30px; animation: floaty 7s ease-in-out infinite; }
.contact__inner { max-width: 1120px; margin: 0 auto; position: relative; }
.contact__head { text-align: center; margin-bottom: 56px; }
.contact__head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 46px;
  margin: 16px 0 14px;
  color: var(--ink);
}
.contact__head p {
  font-size: 16.5px;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 auto;
  font-weight: 300;
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 28px;
  align-items: stretch;
}
.contact__col { display: flex; flex-direction: column; gap: 18px; }
.contact-card {
  background: var(--paper);
  border-radius: 10px;
  padding: 28px 30px;
  box-shadow: 0 12px 32px -24px rgba(70, 82, 47, .5);
}
.contact-card__label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 16px;
}
.contact-line {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  margin-bottom: 14px;
}
.contact-line:last-of-type { margin-bottom: 18px; }
.icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--icon-bg);
  flex: none;
}
.contact-line .k {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #737864;
}
.contact-line .v {
  font-size: 18px;
  font-family: var(--serif);
  font-weight: 600;
}
.contact-line .v--mail { font-size: 15.5px; font-family: var(--sans); font-weight: 500; }
.btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  background: #488354; /* WCAG AA vs. white text (4.5:1) */
  color: #fff;
  padding: 14px;
  border-radius: 100px;
  font-size: 15px;
  letter-spacing: .3px;
  transition: filter .2s ease;
}
.btn-whatsapp:hover { filter: brightness(.94); }

.hours-card .contact-card__label { margin-bottom: 14px; }
.hours-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid #f0ece1;
  font-size: 14.5px;
}
.hours-row .day { color: var(--ink-soft); }
.hours-row .time { color: var(--ink); font-weight: 500; }
.hours-note { font-size: 13px; color: #737864; margin: 14px 0 0; font-weight: 300; }

.addr-card .contact-card__label { margin-bottom: 12px; }
.addr-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.addr-row span:last-child { font-size: 15.5px; color: var(--ink); line-height: 1.5; }
.addr-social {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #f0ece1;
}
.addr-social .lbl {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tan);
}
.addr-social a {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 13.5px;
  transition: color .2s ease;
}
.addr-social a:hover { color: var(--accent); }

.contact__map {
  border-radius: 10px;
  overflow: hidden;
  min-height: 460px;
  box-shadow: 0 12px 32px -24px rgba(70, 82, 47, .5);
}
.contact__map iframe { width: 100%; height: 100%; min-height: 460px; border: 0; display: block; }
.map-consent {
  width: 100%; height: 100%; min-height: 460px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 32px;
  background: var(--sage-block); color: var(--ink-soft);
}
.map-consent svg { color: var(--accent); }
.map-consent p { max-width: 340px; font-size: 14px; line-height: 1.55; margin: 0; }
.map-consent__btn {
  font-family: var(--sans); font-size: 14px; letter-spacing: .03em;
  padding: 11px 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff;
  transition: background .2s ease, transform .2s ease;
}
.map-consent__btn:hover { background: var(--accent-text); transform: translateY(-1px); }
.map-consent__link { font-size: 13px; color: var(--ink-muted); text-decoration: underline; }
.map-consent__link:hover { color: var(--accent-text); }

/* =====================================================================
   LEGAL PAGES (Impressum / Datenschutz)
   ===================================================================== */
.legal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 28px 72px;
}
.legal-page h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 8px;
}
.legal-page .legal-sub {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tan);
  margin: 0 0 40px;
}
.legal-page h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  color: var(--accent-text);
  margin: 40px 0 12px;
}
.legal-page h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  margin: 24px 0 6px;
}
.legal-page p,
.legal-page li {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.legal-page p { margin: 0 0 14px; }
.legal-page ul { margin: 0 0 14px; padding-left: 20px; }
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--accent-text); text-decoration: underline; }
.legal-page a:hover { color: var(--accent); }
.legal-page .legal-note {
  background: var(--sand);
  border-left: 3px solid var(--bloom);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 14px;
}
.legal-page .legal-note strong { color: var(--accent-text); }
@media (max-width: 560px) {
  .legal-page { padding: 56px 22px 56px; }
  .legal-page h1 { font-size: 36px; }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: 64px 56px 40px;
}
.footer__cols {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
}
.footer__brand { max-width: 360px; }
.footer__brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer__brand-row img {
  height: 46px; width: 46px; object-fit: contain;
  background: #fff; border-radius: 50%;
}
.footer__brand-row .name { font-family: var(--serif); font-size: 24px; font-weight: 600; color: #f3f6ea; }
.footer__brand p { font-size: 14px; color: var(--footer-mute); margin: 0 0 18px; font-weight: 300; }
.footer__social { display: flex; gap: 10px; }
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--footer-line);
  color: var(--footer-fg);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.footer__social a:hover { background: var(--footer-line); color: #fff; }
.footer__social--text { display: flex; gap: 18px; font-size: 13.5px; }
.footer__social--text a { width: auto; height: auto; border: 0; border-radius: 0; text-decoration: none; color: var(--footer-fg); }
.footer__social--text a:hover { background: none; color: #fff; }
.footer__label {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--footer-label);
  margin-bottom: 16px;
}
.footer__menu { display: flex; flex-direction: column; gap: 11px; }
.footer__menu a { text-decoration: none; color: var(--footer-fg); font-size: 14px; transition: color .2s ease; }
.footer__menu a:hover { color: #fff; }
.footer__contact { display: flex; flex-direction: column; gap: 11px; font-size: 14px; color: var(--footer-fg); }
.footer__contact a { text-decoration: none; color: var(--footer-fg); transition: color .2s ease; }
.footer__contact a:hover { color: #fff; }
.footer__contact span { color: var(--footer-mute); line-height: 1.5; }
.footer__bar {
  max-width: 1180px;
  margin: 44px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--footer-line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--footer-label);
}
.footer__bar .legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__bar a { text-decoration: none; color: var(--footer-label); transition: color .2s ease; }
.footer__bar a:hover { color: #fff; }

/* =====================================================================
   LEISTUNGEN PAGE
   ===================================================================== */
.lp-header {
  position: relative;
  text-align: center;
  padding: 92px 56px 60px;
  overflow: hidden;
}
.lp-header__deco--orchid { top: 30px; left: 40px; transform-origin: bottom left; animation: sway 8s ease-in-out infinite; }
.lp-header__deco--frond  { bottom: -10px; right: 50px; transform-origin: top right; animation: swayslow 10s ease-in-out infinite; }
.lp-back {
  display: inline-block;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--tan);
  margin-bottom: 20px;
  position: relative;
}
.lp-header h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 60px;
  line-height: 1.05;
  margin: 0 0 18px;
  color: var(--ink);
  position: relative;
}
.lp-header p {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto;
  font-weight: 300;
  position: relative;
}

.lp-prices { max-width: 1080px; margin: 0 auto; padding: 24px 56px 40px; }
.price-group { margin-bottom: 64px; }
.price-group__head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.price-group__head .icon { flex: none; display: flex; }
.price-group__head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 32px;
  margin: 0;
  color: var(--ink);
}
.price-group__head p { font-size: 14.5px; color: #737864; margin: 2px 0 0; font-weight: 300; }
.price-table {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 40px -30px rgba(70, 82, 47, .5);
}
.price-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 28px;
  border-bottom: 1px solid #f1ede2;
}
.price-row__main { flex: 1; }
.price-row__name { font-size: 17px; font-weight: 500; color: var(--ink); }
.price-row__desc { font-size: 14px; color: #727962; font-weight: 300; margin-top: 2px; }
.price-row__dur {
  flex: none;
  font-size: 13px;
  color: var(--tan);
  letter-spacing: .5px;
  min-width: 64px;
  text-align: right;
}
.price-row__price {
  flex: none;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  color: var(--accent);
  min-width: 78px;
  text-align: right;
}

.lp-cta {
  position: relative;
  background: var(--sage-block);
  padding: 88px 56px;
  text-align: center;
  overflow: hidden;
}
.lp-cta__deco--orchid { top: -16px; right: -10px; transform-origin: top right; animation: sway 9s ease-in-out infinite; }
.lp-cta__deco--frond  { bottom: -20px; left: -10px; transform-origin: bottom left; animation: swayslow 11s ease-in-out infinite; }
.lp-cta__inner { position: relative; }
.lp-cta h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 40px;
  margin: 0 0 14px;
  color: var(--ink);
}
.lp-cta p {
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 460px;
  margin: 0 auto 32px;
  font-weight: 300;
}
.lp-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.lp-cta__actions .btn-primary { font-size: 15px; padding: 15px 32px; }
.lp-cta__actions .btn-outline { font-size: 15px; padding: 13.5px 30px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1040px) {
  .hero h1 { font-size: 62px; }
  .about { gap: 48px; }
  .partners__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .nav { padding: 12px 24px; gap: 16px; }
  .nav__links { gap: 18px; }

  .hero { padding: 84px 28px 76px; }
  .hero h1 { font-size: 50px; }

  .about {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 84px 28px;
  }
  .about__media { max-width: 420px; margin: 0 auto; width: 100%; }

  .services { padding: 24px 28px 84px; }
  .services__grid { grid-template-columns: 1fr; gap: 20px; }

  .partners { padding: 64px 28px; }

  .reviews { padding: 80px 28px; }
  .reviews__grid { grid-template-columns: 1fr; }

  .gallery { padding: 80px 28px 72px; }
  .gallery__grid { column-count: 2; }

  .contact { padding: 80px 28px; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__map { min-height: 360px; }
  .contact__map iframe, .map-consent { min-height: 360px; }

  .footer { padding: 56px 28px 36px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer__brand { grid-column: 1 / -1; max-width: none; }

  .lp-header { padding: 72px 28px 48px; }
  .lp-header h1 { font-size: 46px; }
  .lp-prices { padding: 24px 28px 32px; }
  .lp-cta { padding: 72px 28px; }
}

/* ----- burger navigation: logo only, links behind toggle ----------- */
@media (max-width: 760px) {
  .nav {
    position: sticky;
    padding: 10px 20px;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .nav__name { display: none; }          /* mobile: logo only, no name */
  .nav__brand img { height: 44px; width: 44px; }
  .nav__toggle { display: flex; }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 10px 20px 18px;
    background: rgba(251, 250, 246, .98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 32px -24px rgba(70, 82, 47, .5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav.is-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__links a {
    padding: 12px 6px;
    font-size: 16px;
    border-bottom: 1px solid var(--line);
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__cta {
    text-align: center;
    padding: 14px 22px;
    margin-top: 10px;
    font-size: 14px;
  }
}

@media (max-width: 560px) {
  .hero { padding: 68px 22px 64px; }
  .hero h1 { font-size: 40px; margin: 16px 0 20px; }
  .hero__sub { font-size: 16.5px; margin-bottom: 32px; }
  .hero__actions { gap: 18px; }
  .hero__divider { margin-bottom: 20px; }

  .about { padding: 64px 22px; gap: 34px; }
  .about h2 { font-size: 38px; margin: 12px 0 20px; }
  .about__text { font-size: 16px; }
  .about__stats { gap: 24px; margin-top: 30px; }
  .about__stats .num { font-size: 32px; }

  .services { padding: 16px 22px 68px; }
  .services h2 { font-size: 38px; margin: 12px 0 36px; }

  .partners { padding: 56px 22px; }
  .partners__grid { grid-template-columns: 1fr 1fr; gap: 16px; }

  .reviews { padding: 64px 22px; }
  .reviews h2 { font-size: 38px; }

  .gallery { padding: 64px 0 56px; }
  .gallery h2 { font-size: 38px; margin: 12px 0 28px; padding: 0 22px; }
  .gallery .eyebrow { padding: 0 22px; }

  /* mobile: swipeable strip instead of a long single column */
  .gallery__grid {
    column-count: unset;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 22px;
    padding: 4px 22px 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .gallery__grid::-webkit-scrollbar { display: none; }
  .gallery__grid figure {
    flex: 0 0 74%;
    scroll-snap-align: center;
    margin: 0;
  }
  .gallery__grid img {
    aspect-ratio: 4 / 5;
    height: 100%;
    object-fit: cover;
  }

  .contact { padding: 64px 22px; }
  .contact__head { margin-bottom: 40px; }
  .contact__head h2 { font-size: 36px; }
  .contact-card { padding: 24px 22px; }

  .price-row { flex-wrap: wrap; }
  .price-row__main { flex-basis: 100%; }
  .price-row__dur { min-width: 0; text-align: left; }
  .price-row__price { margin-left: auto; }

  .footer { padding: 48px 22px 32px; }
  .footer__cols { grid-template-columns: 1fr; }
  .footer__bar { justify-content: center; text-align: center; }
}