/* Verhindert horizontales Scrollen auf Seitenebene */
html { overflow-x: clip; }

.intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 85vh;
  overflow: hidden;
}
.intro-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(4rem,8vw,7rem) var(--px) clamp(4rem,8vw,7rem) clamp(3rem,8vw,7rem);
  background: var(--light);
}
.intro-text .eyebrow { color: var(--mid); margin-bottom: 1.6rem; }
.intro-text h2 {
  font-family: var(--serif);
  font-size: clamp(2.6rem,5vw,4.5rem);
  font-weight: 300; line-height: 1.08;
  color: var(--dark); margin-bottom: 1.75rem;
}
.intro-text h2 em { font-style: italic; color: var(--mid); }
.intro-text p {
  font-size: .88rem; font-weight: 300;
  color: rgba(30,4,4,.72); line-height: 1.9;
  max-width: 400px; margin-bottom: 2.75rem;
}
.intro-img { position: relative; overflow: hidden; }
.intro-img img {
  width: 100%; height: 115%;
  object-fit: cover; object-position: center top;
}

.mood {
  position: relative;
  height: clamp(320px,52vw,680px);
  overflow: hidden;
}
.mood img {
  width: 100%; height: 120%;
  object-fit: cover; object-position: center;
  will-change: transform;
}
.mood-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(170deg, rgba(30,4,4,.08) 0%, rgba(30,4,4,.42) 100%);
}
.mood-caption {
  position: absolute;
  bottom: clamp(2rem,5vw,4rem);
  left: var(--px);
  color: var(--light);
}
.mood-caption-text {
  font-family: var(--serif);
  font-size: clamp(2rem,5.5vw,4.5rem);
  font-weight: 300; line-height: 1.1;
  font-style: italic; letter-spacing: -.01em;
}

.svc {
  padding-block: var(--py);
  background: var(--light);
}
.svc-wrap {
  max-width: var(--mw); margin-inline: auto; padding-inline: var(--px);
  display: grid;
  grid-template-columns: 1fr clamp(260px,30vw,360px);
  gap: clamp(3rem,6vw,7rem);
  align-items: start;
}
.svc-hd { margin-bottom: clamp(2.5rem,5vw,4rem); }
.svc-hd .eyebrow { color: var(--mid); margin-bottom: 1rem; }
.svc-hd h2 {
  font-family: var(--serif);
  font-size: clamp(2.8rem,5.5vw,4.5rem);
  font-weight: 300; line-height: 1.06;
  color: var(--dark);
}
.svc-list { border-top: 1px solid rgba(30,4,4,.09); }
.svc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem 2rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid rgba(30,4,4,.09);
  transition: padding-left .4s var(--ease);
  cursor: default;
}
.svc-row:hover { padding-left: .6rem; }
.svc-info { display: flex; flex-direction: column; gap: .3rem; }
.svc-cat {
  font-size: .6rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(30,4,4,.64);
}
.svc-name { font-family: var(--serif); font-size: 1.4rem; font-weight: 400; color: var(--dark); }
.svc-desc { font-size: .78rem; font-weight: 300; color: rgba(30,4,4,.65); line-height: 1.75; max-width: 380px; }
.svc-dur { font-size: .68rem; color: rgba(30,4,4,.64); margin-top: .1rem; }
.svc-price { text-align: right; flex-shrink: 0; }
.svc-price-num {
  font-family: var(--serif);
  font-size: 2rem; font-weight: 400;
  color: var(--dark); line-height: 1;
  white-space: nowrap;
}
.svc-price-num sup { font-size: .55em; vertical-align: super; margin-right: .06em; font-weight: 300; }
.svc-price-ask { font-family: var(--serif); font-size: .95rem; font-style: italic; color: rgba(30,4,4,.64); }
.svc-notice {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(30,4,4,.06);
  font-size: .75rem; font-weight: 300;
  color: rgba(30,4,4,.64); line-height: 1.8;
}
.svc-side {
  position: sticky;
  top: calc(68px + 2.5rem);
}
.svc-side-frame {
  overflow: hidden;
  aspect-ratio: 2/3;
}
.svc-side-frame img {
  width: 100%; height: 110%;
  object-fit: cover; object-position: center top;
  transition: transform 7s var(--ease);
}
.svc-side-frame:hover img { transform: scale(1.04) translateY(-2%); }

.cluster {
  padding-block: var(--py);
  background: var(--warm);
  overflow: hidden;
}
.cluster-wrap {
  max-width: var(--mw); margin-inline: auto; padding-inline: var(--px);
}
.cluster-hd {
  display: flex; align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(3rem,6vw,5rem);
}
.cluster-hd-left .eyebrow { color: var(--mid); margin-bottom: .7rem; }
.cluster-hd-left p {
  font-family: var(--serif);
  font-size: clamp(1.6rem,3vw,2.4rem);
  font-weight: 300; font-style: italic;
  color: var(--dark); line-height: 1.25;
}
.cluster-comp {
  position: relative;
  height: clamp(380px,58vw,680px);
}
.ci-img {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(30,4,4,.12);
}
.ci-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.ci-img:hover img { transform: scale(1.05); }
.ci-a { left: 0; top: 8%; width: 36%; height: 84%; }
.ci-b { left: 33%; top: 0; width: 27%; height: 58%; z-index: 2; }
.ci-c { right: 0; top: 6%; width: 31%; height: 80%; }
.ci-d { left: 38%; bottom: 0; width: 22%; height: 42%; z-index: 3; box-shadow: 0 16px 50px rgba(30,4,4,.18); }

.facial {
  padding-block: var(--py);
  background: var(--dark);
  overflow: hidden;
}
.facial-wrap {
  max-width: var(--mw); margin-inline: auto; padding-inline: var(--px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem,6vw,7rem);
  align-items: start;
}
.facial-text .eyebrow { color: var(--muted); margin-bottom: 1.2rem; }
.facial-text h2 {
  font-family: var(--serif);
  font-size: clamp(2.2rem,4.5vw,3.8rem);
  font-weight: 300; line-height: 1.1;
  color: var(--light); margin-bottom: 1rem;
}
.facial-text h2 em { font-style: italic; color: var(--muted); }
.facial-intro {
  font-size: .85rem; font-weight: 300;
  color: rgba(247,245,241,.65);
  line-height: 1.9; margin-bottom: 2.5rem;
}
.facial-steps { border-top: 1px solid rgba(247,245,241,.07); }
.f-step {
  display: grid; grid-template-columns: 2.5rem 1fr;
  gap: .5rem; align-items: baseline;
  padding-block: 1.35rem;
  border-bottom: 1px solid rgba(247,245,241,.07);
}
.f-step-n {
  font-family: var(--serif); font-size: .72rem;
  color: rgba(247,245,241,.35);
  padding-top: .18rem;
}
.f-step h3 {
  font-family: var(--serif); font-size: 1.1rem;
  font-weight: 400; color: var(--light);
  line-height: 1.3; margin-bottom: .25rem;
}
.f-step p {
  font-size: .76rem; font-weight: 300;
  color: rgba(247,245,241,.60); line-height: 1.75;
}
.facial-note {
  margin-top: 1.75rem; padding: 1.2rem 1.5rem;
  border: 1px solid rgba(139,42,42,.3);
  background: rgba(139,42,42,.08);
  font-size: .78rem; font-weight: 300;
  color: rgba(247,245,241,.68); line-height: 1.8;
}
.facial-extras {
  margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid rgba(247,245,241,.08);
}
.facial-extras-title {
  font-family: var(--serif); font-size: 1rem;
  color: rgba(247,245,241,.55); font-weight: 300;
  font-style: italic; margin-bottom: 1.2rem;
}
.extra-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: .8rem; border-bottom: 1px solid rgba(247,245,241,.06);
}
.extra-row:first-of-type { border-top: 1px solid rgba(247,245,241,.06); }
.extra-name { font-family: var(--serif); font-size: 1rem; color: var(--light); }
.extra-price { font-family: var(--serif); font-size: 1rem; color: var(--muted); }
.facial-img-sticky {
  position: sticky; top: calc(68px + 2.5rem);
  overflow: hidden; aspect-ratio: 2/3;
}
.facial-img-sticky img {
  width: 100%; height: 112%;
  object-fit: cover; object-position: center top;
}

.quality {
  padding-block: var(--py);
  background: var(--dark);
  overflow: hidden;
}
.quality-wrap {
  max-width: var(--mw); margin-inline: auto; padding-inline: var(--px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(3rem,6vw,7rem);
  align-items: center;
}
.quality-img {
  overflow: hidden; aspect-ratio: 3/4;
}
.quality-img img {
  width: 100%; height: 112%;
  object-fit: cover; object-position: center;
}
.quality-text .eyebrow { color: var(--muted); margin-bottom: 1.2rem; }
.quality-text h2 {
  font-family: var(--serif);
  font-size: clamp(2.2rem,4.5vw,3.8rem);
  font-weight: 300; line-height: 1.1;
  color: var(--light); margin-bottom: 1.5rem;
}
.quality-text h2 em { font-style: italic; color: var(--muted); }
.quality-text p {
  font-size: .85rem; font-weight: 300;
  color: rgba(247,245,241,.65);
  line-height: 1.9; margin-bottom: .85rem;
}
.quality-pillars { margin-top: 2.75rem; border-top: 1px solid rgba(247,245,241,.07); }
.q-row {
  display: flex; gap: 1.25rem; align-items: flex-start;
  padding-block: 1.1rem;
  border-bottom: 1px solid rgba(247,245,241,.07);
}
.q-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--muted); flex-shrink: 0; margin-top: .65rem;
}
.q-row strong {
  display: block; font-family: var(--serif);
  font-size: 1rem; font-weight: 400; color: var(--light);
}
.q-row span { font-size: .74rem; color: rgba(247,245,241,.55); line-height: 1.65; }

.mood2 {
  position: relative;
  height: clamp(380px,60vw,760px);
  overflow: hidden;
}
.mood2 img {
  width: 100%; height: 120%;
  object-fit: cover; object-position: center 30%;
  will-change: transform;
}
.mood2-overlay {
  position: absolute; inset: 0;
  background: rgba(30,4,4,.3);
}
.mood2-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding-inline: var(--px);
}
.mood2-text h2 {
  font-family: var(--serif);
  font-size: clamp(3rem,8vw,7rem);
  font-weight: 300; line-height: 1;
  color: var(--light); letter-spacing: -.02em;
}
.mood2-text h2 em { display: block; font-style: italic; color: var(--muted); }
.mood2-text p {
  font-size: .85rem; color: rgba(247,245,241,.65);
  margin-top: 1.5rem; max-width: 340px; line-height: 1.85;
}

.voucher {
  padding-block: var(--py);
  background: var(--warm);
  border-top: 1px solid rgba(30,4,4,.07);
}
.voucher-wrap {
  max-width: var(--mw); margin-inline: auto; padding-inline: var(--px);
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(3rem,6vw,7rem);
  align-items: center;
}
.voucher-text .eyebrow { color: var(--mid); margin-bottom: 1.2rem; }
.voucher-text h2 {
  font-family: var(--serif);
  font-size: clamp(2.2rem,4.5vw,3.8rem);
  font-weight: 300; font-style: italic;
  color: var(--dark); line-height: 1.1;
  margin-bottom: 1.1rem;
}
.voucher-text p {
  font-size: .87rem; font-weight: 300;
  color: rgba(30,4,4,.68); line-height: 1.9;
  margin-bottom: 2.25rem;
}
.voucher-img {
  overflow: hidden; aspect-ratio: 16/10;
}
.voucher-img img {
  width: 100%; height: 110%;
  object-fit: cover; object-position: center;
}

.contact {
  padding-block: var(--py);
  background: var(--light);
}
.contact-wrap {
  max-width: var(--mw); margin-inline: auto; padding-inline: var(--px);
}
.contact-hd { margin-bottom: clamp(3rem,6vw,5rem); }
.contact-hd .eyebrow { color: var(--mid); margin-bottom: .9rem; }
.contact-hd h2 {
  font-family: var(--serif);
  font-size: clamp(2.2rem,4.5vw,3.8rem);
  font-weight: 300; line-height: 1.1;
  color: var(--dark);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(3rem,6vw,5rem);
  align-items: start;
}
.ci-list { display: flex; flex-direction: column; gap: 1.75rem; }
.ci { display: flex; flex-direction: column; gap: .22rem; }
.ci-lbl {
  font-size: .6rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(30,4,4,.64);
}
.ci-val {
  font-family: var(--serif); font-size: 1.1rem;
  font-weight: 400; color: var(--dark);
  text-decoration: none; line-height: 1.45;
}
.ci-val-sm { font-size: .9rem; color: rgba(30,4,4,.72); }
a.ci-val:hover { color: var(--mid); }

.cf-panel {
  background: var(--dark);
  padding: clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem);
}
.cf-panel h3 {
  font-family: var(--serif); font-size: 1.55rem;
  font-weight: 300; color: var(--light); margin-bottom: .4rem;
}
.cf-panel > p {
  font-size: .82rem; font-weight: 300;
  color: rgba(247,245,241,.60); line-height: 1.7; margin-bottom: 1.75rem;
}
.fg { margin-bottom: 1.1rem; }
.fg label {
  display: block; font-size: .62rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(247,245,241,.55); margin-bottom: .4rem;
}
.fg input, .fg textarea, .fg select {
  width: 100%; background: rgba(247,245,241,.055);
  border: 1px solid rgba(247,245,241,.1); padding: .8rem 1rem;
  font-family: var(--sans); font-size: .87rem; font-weight: 300;
  color: var(--light); border-radius: 1px;
  transition: border-color var(--t) var(--ease);
  outline: none; appearance: none; -webkit-appearance: none;
}
.fg input::placeholder, .fg textarea::placeholder { color: rgba(247,245,241,.22); }
.fg select option { background: var(--dark); color: var(--light); }
.fg input:focus, .fg textarea:focus, .fg select:focus { border-color: rgba(247,245,241,.32); }
.fg textarea { min-height: 90px; resize: vertical; }
.cf-submit {
  width: 100%; margin-top: .5rem;
  background: var(--light); color: var(--dark); border: none;
  border-radius: 100px; padding: .95rem 2rem;
  font-family: var(--sans); font-size: .75rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.cf-submit:hover { background: var(--warm); transform: translateY(-1px); }

footer {
  background: rgba(30,4,4,.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(247,245,241,.10);
  padding-block: 2.5rem;
}
.footer-inner {
  max-width: var(--mw); margin-inline: auto; padding-inline: var(--px);
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 1.5rem;
}
.f-logo { display: flex; align-items: center; }
.f-logo img { height: 68px; width: auto; display: block; }
.f-copy { font-size: .7rem; font-weight: 300; color: rgba(247,245,241,.65); text-align: center; }
.f-legal { display: flex; gap: 1.5rem; list-style: none; }
.f-legal a {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: rgba(247,245,241,.65);
  transition: color var(--t) var(--ease);
}
.f-legal a:hover { color: rgba(247,245,241,.85); }

@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .rv-l { opacity: 0; transform: translateX(-28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .rv-r { opacity: 0; transform: translateX(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .rv.in, .rv-l.in, .rv-r.in { opacity: 1; transform: none; }
  .d1 { transition-delay: .1s; }
  .d2 { transition-delay: .2s; }
  .d3 { transition-delay: .3s; }
  .d4 { transition-delay: .4s; }
  .d5 { transition-delay: .5s; }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-l, .rv-r { opacity: 1; transform: none; }
}

/* Einspaltig bis 960px wie im Inline-<style> von index.html – dort wirkt die Regel nicht,
   weil diese Datei danach geladen wird und die Basis-Grids oben sie überschreiben */
@media (max-width: 960px) {
  .svc-wrap, .facial-wrap, .quality-wrap, .voucher-wrap, .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cluster-comp { height: 300px; }
  .ci-d { display: none; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: .85rem; }
  .f-copy { text-align: left; }
  .f-logo img { height: 52px; }
  footer { padding-block: 1.75rem; }
}
@media (max-width: 480px) {
  .cluster-comp { height: 240px; }
  .ci-b { display: none; }
  .ci-a { width: 48%; }
  .ci-c { width: 48%; left: 52%; }
}
@media (max-width: 768px) {
  .mood img, .mood2 img { will-change: auto; }

  /* ── Responsive Grid-Fix: alle 2-Spalten-Layouts einspaltig ── */
  /* Intro (Über mich Abschnitt) */
  .intro {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .intro-img { min-height: 62vw; }

  /* Leistungen / Services */
  .svc-wrap { grid-template-columns: 1fr; }
  .svc-side { position: static; margin-top: 3rem; }
  .svc-side-frame { aspect-ratio: 4/3; max-height: 280px; }

  /* Gesichtsbehandlung */
  .facial-wrap { grid-template-columns: 1fr; }
  .facial-img-sticky {
    position: static;
    aspect-ratio: 4/3;
    max-height: 280px;
    margin-top: 3rem;
  }

  /* Qualität */
  .quality-wrap { grid-template-columns: 1fr; }
  .quality-img { aspect-ratio: 4/3; max-height: 280px; }

  /* Gutschein */
  .voucher-wrap { grid-template-columns: 1fr; }
  .voucher-img { order: -1; aspect-ratio: 16/9; }

  /* Kontakt */
  .contact-grid { grid-template-columns: 1fr; }
}


/* Cookie-Banner */
.cookie-notice {
  display: none; position: fixed; bottom: 1.5rem; left: 1.5rem;
  max-width: 420px; background: var(--light);
  border: 1px solid rgba(30,4,4,.12); padding: 1.25rem 1.5rem;
  z-index: 500; box-shadow: 0 8px 32px rgba(0,0,0,.13);
}
.cookie-notice.show { display: block; }
.cookie-notice-title {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 400;
  color: var(--dark); margin-bottom: .45rem;
}
.cookie-notice-text {
  font-size: .78rem; font-weight: 300; color: rgba(30,4,4,.68);
  line-height: 1.75; margin-bottom: 1rem;
}
.cookie-notice-text a { color: var(--mid); text-decoration: underline; }
.cookie-notice-btns { display: flex; gap: .65rem; flex-wrap: wrap; }
@media (max-width: 480px) {
  .cookie-notice { left: 1rem; right: 1rem; max-width: none; bottom: 1rem; }
}

/* Formular: Pflichtfeld-Hinweise (wie pages.css) */
.fg[data-err] input, .fg[data-err] textarea, .fg[data-err] select { border-color: rgba(220,80,80,.55); }
.fg[data-err]::after { content: attr(data-err); display: block; font-size: .6rem; color: rgba(220,80,80,.75); margin-top: .3rem; font-weight: 400; letter-spacing: .06em; }
.cf-hint { font-size: .62rem; color: rgba(247,245,241,.56); text-align: center; margin-top: .65rem; line-height: 1.6; }
#cf-status:empty { margin: 0; }

/* ===== COMPUTERANSICHT (Regel computer_ansicht 1.1) - nur ab 1200 px, Handy/Tablet unveraendert ===== */
@media (min-width: 1200px) {
  :root { --mw: 1480px; --px: 3rem; }
}