/* THE FACE — V0.1 · "Die Patina" (Variante B)
   Recreated from the design handoff; the design HTML is the source of truth for all values. */

/* ---------- Fonts (self-hosted, OFL — see fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200 500;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Height of the pinned topbar. One value per breakpoint, used by the bar itself, by the
   padding that gives the hero its space back, and by the anchor offset below. */
:root { --topbar-h: 75px; }
html, .car__track { scroll-behavior: smooth; }
/* The pinned bar covers the top of whatever an in-page link jumps to, so every jump
   target stops one bar-height lower. */
#home, #behandlungen, #termine, #faq, #anfahrt, #kontakt { scroll-margin-top: var(--topbar-h); }
@media (prefers-reduced-motion: reduce) {
  html, .car__track { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: #EFE1D3;
  font-family: 'Jost', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, figcaption { margin: 0; }
[hidden] { display: none !important; }
a { color: #26201B; text-decoration: none; }
a:hover { color: #8A6B4F; }
img { display: block; }
button {
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
}

/* Responsive <br> / separator helpers: .br-d + .sep-d desktop-only, .br-m mobile-only */
.br-m { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: #26201B;
  color: #EFE1D3;
  padding: 17px 46px;
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
  transition: opacity .2s ease;
}
.btn:hover { color: #EFE1D3; opacity: .9; }

/* ---------- Section scaffold ---------- */
.section { border-top: 1px solid rgba(38,32,27,.12); }
.section__content { position: relative; z-index: 1; max-width: 1248px; margin: 0 auto; }
.section-head { display: flex; align-items: center; gap: 28px; }
.section-head__label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .44em;
  text-transform: uppercase;
  color: #26201B;
}
.section-head__line { flex: 1; height: 1px; background: rgba(38,32,27,.18); }
.section-head__sub {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #A18D77;
}
/* BEHANDLUNGEN section head, 2026-09-22: the Botox note moved up here out of the
   Signature group heading. Desktop keeps it at the right end of the row, where
   "Vier Saetze" sat. It keeps the type treatment it had as .beh-group__note -
   normal case, so the parentheses read as written. */
.section-head--noted { flex-wrap: wrap; row-gap: 6px; }
.section-head__sub--plain {
  text-transform: none;
  letter-spacing: .01em;
  font-size: 12.5px; font-weight: 300;
  color: #5E5245;
}

/* ---------- Credo lines (Cinzel) ---------- */
.credo { display: flex; align-items: center; justify-content: center; gap: 18px; }
.credo__rule { width: 44px; height: 1px; background: rgba(185,142,104,.5); }
.credo__text {
  font-family: 'Cinzel', serif;
  letter-spacing: .5em;
  padding-left: .5em;
  color: #B98E68;
}

/* ====================== HERO ====================== */
.hero { position: relative; height: 880px; background: #EFE1D3; overflow: hidden; }
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  filter: sepia(.5) saturate(.5) brightness(1.14) contrast(.8);
}
.hero__flat { position: absolute; inset: 0; background: rgba(239,225,211,.55); }
.hero__radial {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 58% 46% at 50% 26%, rgba(239,225,211,.5) 0%, rgba(239,225,211,.86) 58%, rgba(239,225,211,.99) 100%);
}
.hero__fade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(239,225,211,.9) 0%, rgba(239,225,211,0) 22%);
}
.hero__circle, .hero__arc {
  position: absolute; left: 50%; top: 336px;
  transform: translate(-50%,-50%);
  border-radius: 50%; pointer-events: none;
}
.hero__circle--1 { width: 470px;  height: 470px;  border: 1px solid rgba(38,32,27,.11); }
.hero__circle--2 { width: 650px;  height: 650px;  border: 1px solid rgba(38,32,27,.085); }
.hero__circle--3 { width: 910px;  height: 910px;  border: 1px solid rgba(38,32,27,.06); }
.hero__circle--4 { width: 1250px; height: 1250px; border: 1px solid rgba(38,32,27,.045); }
.hero__arc { border: 1px solid transparent; }
.hero__arc--1 { width: 388px; height: 388px; transform: translate(-50%,-50%) rotate(-34deg); border-top: 1px solid rgba(185,142,104,.85); }
.hero__arc--2 { width: 560px; height: 560px; transform: translate(-50%,-50%) rotate(142deg); border-top: 1px solid rgba(185,142,104,.38); }
.hero__content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column;
                 padding-top: var(--topbar-h); }

/* Topbar — pinned to the window (2026-09-21).
   It is no longer inside <header class="hero">: .hero carries overflow: hidden, which makes
   it the scroll box, so a sticky bar would still leave with the hero. As a direct child of
   <body> with position: fixed the window holds it. The 28px/20px vertical padding became an
   explicit height so the bar and the hero's compensating padding can never drift apart.
   z-index 50: above .section__content (1), below the burger overlay .menu (100). */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--topbar-h);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 52px;
  background: transparent;
  transition: background-color .25s ease;
}
/* Clear over the hero, sand once the page has moved. */
.topbar.is-pinned { background: #EFE1D3; }
.topbar__address {
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #A18D77;
}
.topbar__wordmark {
  display: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .4em;
  padding-left: .4em;
  color: #26201B;
}
.topbar__nav { display: flex; align-items: center; gap: 28px; }
.topbar__nav > a { font-size: 13.5px; color: #5E5245; }
.topbar__nav > a:hover { color: #8A6B4F; }
.lang-toggle {
  font-size: 12px;
  letter-spacing: .12em;
  color: #A18D77;
  padding-left: 16px;
  border-left: 1px solid rgba(38,32,27,.25);
}
.lang-toggle__btn { font-size: inherit; letter-spacing: inherit; color: #A18D77; }
.lang-toggle__btn.is-active { color: #26201B; font-weight: 500; }
.topbar__burger { display: none; }

/* Hero center */
.hero__center {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: 26px;
}
.seal {
  width: 300px; height: 300px;
  border: 1px solid #A88E74; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(circle, rgba(239,225,211,.55) 0%, rgba(239,225,211,0) 72%);
}
.seal span {
  display: inline-block;
  font-size: 43px; font-weight: 500;
  letter-spacing: .5em; padding-left: .5em;
  color: #26201B; line-height: 1;
}
.hero__tagline {
  margin-top: 25px;
  font-size: 31px; font-weight: 300;
  letter-spacing: .42em; padding-left: .42em;
  color: #5E5245;
}
.hero__para {
  margin-top: 42px;
  /* 920, not the original 640: at 640 the middle sentence of the 2026-09-21 copy
     wraps and leaves a one-word orphan line. 920 puts each of the three sentences
     on exactly one line. A phone is unaffected — there the viewport is the limit. */
  max-width: 920px; text-align: center;
  font-size: 17.5px; font-weight: 300; line-height: 1.72;
  color: #5E5245;
}
.hero__para em { font-style: italic; color: #26201B; }
.hero .btn { margin-top: 34px; }
.credo--hero { margin-top: 32px; }
.credo--hero .credo__text { font-size: 13px; }

/* ====================== BEHANDLUNGEN ====================== */
.behandlungen { padding: 96px 96px 84px; position: relative; overflow: hidden; }
.behandlungen__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 78%;
  filter: sepia(.5) saturate(.5) brightness(1.14) contrast(.8);
}
.behandlungen__flat { position: absolute; inset: 0; background: rgba(239,225,211,.86); }
.behandlungen__grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(239,225,211,.2) 0%, rgba(239,225,211,.9) 55%, #EFE1D3 100%);
}
.behandlungen__cols { display: flex; gap: 96px; margin-top: 26px; align-items: flex-start; }
.behandlungen__list { flex: 1; }
.treatment {
  display: flex; align-items: baseline; gap: 40px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(38,32,27,.16);
}
.treatment--last { border-bottom: none; }
.treatment__name {
  width: 230px; flex: none;
  font-size: 16.5px; letter-spacing: .26em;
  color: #26201B;
}
.treatment__text { flex: 1; font-size: 15.5px; font-weight: 300; color: #5E5245; }
.behandlungen__botox { margin-top: 40px; font-size: 15px; font-weight: 300; color: #5E5245; }
.behandlungen__photos { flex: none; display: flex; flex-direction: column; gap: 22px; }
.photo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.photo img {
  width: 340px; height: 210px;
  object-fit: cover;
  filter: sepia(.28) saturate(.7) brightness(1.04);
}
.photo--device img { object-position: 50% 38%; }
.photo__caption {
  font-size: 10.5px; letter-spacing: .3em;
  text-transform: uppercase; color: #A18D77;
}
.credo--behandlungen { margin-top: 56px; }
.credo--behandlungen .credo__text { font-size: 12px; }

/* ====================== QUOTE BAND ====================== */
.quote {
  padding: 110px 96px;
  border-top: 1px solid rgba(38,32,27,.12);
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.quote__text {
  font-size: 38px; font-weight: 300; letter-spacing: .04em;
  color: #26201B; text-align: center;
}
.quote__rule { width: 44px; height: 1px; background: rgba(185,142,104,.5); }

/* ====================== TERMINE ====================== */
.termine { padding: 96px 96px 90px; position: relative; overflow: hidden; }
.termine__img {
  position: absolute; left: 0; right: 0; bottom: -60px;
  width: 100%; height: 340px;
  object-fit: cover; object-position: 50% 68%; /* founder 2026-08-19: cheeks/chin instead of hairline (design had 50% 10%) */
  filter: sepia(.5) saturate(.5) brightness(1.14) contrast(.8);
}
.termine__grad {
  position: absolute; left: 0; right: 0; bottom: -60px; height: 340px;
  background: linear-gradient(180deg, #EFE1D3 0%, rgba(239,225,211,.82) 60%, rgba(239,225,211,.7) 100%);
}
.termine__content { display: flex; flex-direction: column; align-items: center; }
.termine .section-head { width: 100%; }
.termine__inner { width: 760px; max-width: 100%; margin-top: 48px; }
.termine__heading {
  text-align: center;
  font-size: 27px; font-weight: 300; line-height: 1.5;
  color: #26201B;
}
.termine__launch {
  margin-top: 22px; text-align: center;
  font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; color: #A18D77;
}
.form { margin-top: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 46px; }
.form__field--full { grid-column: 1 / -1; }
.form__label {
  display: block;
  font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: #A18D77;
}
.form__input {
  display: block; width: 100%;
  margin-top: 14px; height: 30px;
  padding: 0; border: none; border-radius: 0;
  border-bottom: 1px solid rgba(38,32,27,.3);
  background: transparent;
  font-family: inherit; font-size: 16px; font-weight: 300; color: #26201B;
}
.form__input:focus { outline: none; border-bottom-color: #26201B; }
.form__textarea { height: 78px; resize: none; }
.form__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__actions {
  margin-top: 6px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.form__actions .btn { border: none; cursor: pointer; }
.form__privacy {
  font-size: 12.5px; font-weight: 300; line-height: 1.7;
  color: #A18D77; text-align: center; max-width: 560px;
}
.form__privacy a { color: #8A6B4F; text-decoration: underline; }
.form__note {
  margin-top: 34px; text-align: center;
  font-size: 15.5px; font-weight: 300; line-height: 1.78;
  color: #5E5245;
}
.form__note a { color: #8A6B4F; }

/* ====================== FAQ ====================== */
.faq { padding: 96px 96px 90px; }
.faq .section__content { display: flex; flex-direction: column; align-items: center; }
.faq .section-head { width: 100%; }
.faq__list { width: 860px; max-width: 100%; margin-top: 34px; }
.faq__item { padding: 40px 0; border-bottom: 1px solid rgba(38,32,27,.16); }
.faq__item--last { border-bottom: none; }
.faq__q { font-size: 19px; font-weight: 400; color: #26201B; }
.faq__a {
  margin-top: 18px;
  font-size: 15.5px; font-weight: 300; line-height: 1.78;
  color: #5E5245; text-wrap: pretty;
}

/* ====================== ANFAHRT ====================== */
.anfahrt { padding: 96px 96px 90px; }
.anfahrt__cols { display: flex; gap: 96px; margin-top: 54px; align-items: flex-start; }
.anfahrt__left { width: 360px; flex: none; }
.anfahrt__address { font-size: 27px; font-weight: 300; line-height: 1.5; color: #26201B; }
.anfahrt__note { margin-top: 30px; font-size: 14.5px; font-weight: 300; line-height: 2; color: #5E5245; }
.anfahrt__anamnese { margin-top: 30px; }
.anfahrt__anamnese a { font-size: 15px; font-weight: 300; }
.anfahrt__map { flex: 1; }
.map-consent {
  height: 340px;
  border: 1px solid rgba(38,32,27,.2);
  background: rgba(38,32,27,.045);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  text-align: center; padding: 0 50px;
}
.map-consent__label {
  font-size: 10.5px; letter-spacing: .3em;
  text-transform: uppercase; color: #A18D77;
}
.map-consent__text {
  font-size: 14.5px; font-weight: 300; line-height: 1.75;
  color: #5E5245; max-width: 380px;
}
.map-consent__text a { color: #8A6B4F; text-decoration: underline; }
.map-consent__btn {
  border: 1px solid #26201B; color: #26201B;
  padding: 13px 34px;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  background: transparent;
  transition: opacity .2s ease;
}
.map-consent__btn:hover { opacity: .7; }
.map-frame iframe {
  width: 100%; height: 400px;
  border: 1px solid rgba(38,32,27,.2);
  filter: sepia(.3) saturate(.65);
  display: block;
}
.map-frame__caption {
  margin-top: 12px;
  font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: #A18D77;
}

/* ====================== KONTAKT ====================== */
.kontakt { padding: 96px 96px 84px; }
.kontakt__cols { margin-top: 50px; display: flex; justify-content: center; gap: 110px; }
.kontakt__block { text-align: center; }
.kontakt__label {
  font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: #A18D77;
}
.kontakt__value {
  display: inline-block; margin-top: 14px;
  font-size: 18px; font-weight: 300; color: #26201B;
}

/* ====================== FOOTER ====================== */
.footer {
  background: #26201B;
  padding: 54px 96px 46px;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.footer__brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.footer__wordmark {
  font-size: 17px; font-weight: 500;
  letter-spacing: .5em; padding-left: .5em;
  color: #EDE6DA;
}
.footer__tagline {
  font-size: 12.5px; font-weight: 300;
  letter-spacing: .4em; padding-left: .4em;
  color: #948673;
}
.footer__links { display: flex; align-items: center; gap: 34px; margin-top: 8px; }
.footer__links a {
  font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: #CDC4B4;
}
.footer__links a:hover { color: #8A6B4F; }
.footer__sep { width: 1px; height: 12px; background: rgba(237,230,218,.25); }
.footer__address {
  font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: #948673;
}

/* ====================== MOBILE MENU OVERLAY ====================== */
.menu {
  position: fixed; inset: 0; z-index: 100;
  background: #EFE1D3;
  display: flex; flex-direction: column;
}
.menu[hidden] { display: none; }
.menu__topbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; }
.menu__topbar .topbar__wordmark { display: inline-block; }
.menu__close {
  position: relative; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.menu__close span {
  position: absolute; left: 11px; top: 21px;
  width: 22px; height: 1.5px; background: #26201B;
}
.menu__close span:first-child { transform: rotate(45deg); }
.menu__close span:last-child { transform: rotate(-45deg); }
.menu__nav {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: 0 40px 40px;
}
.menu__nav > a {
  font-size: 21px; font-weight: 300; letter-spacing: .1em;
  color: #26201B; padding: 10px 0;
}
.menu__lang {
  margin-top: 8px; padding-top: 26px;
  border-top: 1px solid rgba(38,32,27,.16);
  display: flex; align-items: center; gap: 14px;
}
.menu__lang .lang-toggle__btn {
  font-size: 13px; letter-spacing: .12em; color: #A18D77;
  padding: 10px 0; min-width: 24px;
}
.menu__lang .lang-toggle__btn.is-active { color: #26201B; font-weight: 500; }
.menu__lang-sep { width: 1px; height: 13px; background: rgba(38,32,27,.25); }
.menu__cta-wrap { padding: 0 40px 34px; }
.menu__cta {
  display: block; width: 100%; text-align: center;
  padding: 16px 0;
  font-size: 12.5px; letter-spacing: .26em;
}

/* ============================================================
   MOBILE (390 design) — single breakpoint
   ============================================================ */
@media (max-width: 980px) {
  .br-m { display: inline; }
  .br-d, .sep-d { display: none; }

  /* Hero */
  .hero { height: 720px; }
  .hero__img { object-position: 50% 18%; }
  .hero__flat { background: rgba(239,225,211,.6); }
  .hero__radial {
    background: radial-gradient(ellipse 90% 42% at 50% 30%, rgba(239,225,211,.45) 0%, rgba(239,225,211,.88) 60%, rgba(239,225,211,.99) 100%);
  }
  .hero__fade { display: none; }
  .hero__circle, .hero__arc { top: 300px; }
  .hero__circle--1 { width: 300px; height: 300px; border-color: rgba(38,32,27,.11); }
  .hero__circle--2 { width: 420px; height: 420px; border-color: rgba(38,32,27,.08); }
  .hero__circle--3, .hero__circle--4, .hero__arc--2 { display: none; }
  .hero__arc--1 { width: 250px; height: 250px; border-color: transparent; border-top-color: rgba(185,142,104,.85); }

  :root { --topbar-h: 84px; }
  .topbar { padding: 0 22px; }
  .topbar__address, .topbar__nav { display: none; }
  .topbar__wordmark { display: inline-block; }
  .topbar__burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    min-width: 44px; min-height: 44px; align-items: flex-end;
    padding: 12px 4px;
  }
  .topbar__burger span { width: 22px; height: 1.5px; background: #26201B; }

  .hero__center { padding: 0 26px 30px; }
  .seal { width: 210px; height: 210px; gap: 13px; }
  .seal span { font-size: 30px; }
  .hero__tagline {
    margin-top: 20px;
    font-size: 19px; letter-spacing: .34em; padding-left: .34em;
    white-space: nowrap;
  }
  .hero__para { margin-top: 30px; font-size: 16px; line-height: 1.7; }
  .hero .btn { margin-top: 28px; padding: 16px 38px; font-size: 12.5px; letter-spacing: .26em; }
  .credo--hero { margin-top: 24px; }
  .credo--hero .credo__rule { display: none; }
  .credo--hero .credo__text { font-size: 10.5px; letter-spacing: .42em; padding-left: .42em; white-space: nowrap; }

  /* Section scaffold */
  .section-head { gap: 16px; }
  .section-head__label { font-size: 12px; letter-spacing: .38em; }
  .section-head__sub { display: none; }
  /* the BEHANDLUNGEN note stays on the phone, on a row of its own ABOVE the rule */
  .section-head--noted { row-gap: 8px; }
  .section-head--noted .section-head__label { flex: 1 0 100%; order: 1; }
  .section-head--noted .section-head__sub--plain { display: block; flex: 1 0 100%; order: 2; text-align: right; }
  .section-head--noted .section-head__line { flex: 1 0 100%; order: 3; }

  /* Behandlungen */
  .behandlungen { padding: 60px 26px 54px; }
  .behandlungen__flat { background: rgba(239,225,211,.88); }
  .behandlungen__grad {
    background: linear-gradient(180deg, rgba(239,225,211,.25) 0%, rgba(239,225,211,.92) 40%, #EFE1D3 65%);
  }
  .behandlungen__cols { display: block; margin-top: 12px; }
  .treatment { display: block; padding: 24px 0; }
  .treatment__name { width: auto; font-size: 15.5px; letter-spacing: .24em; display: block; }
  .treatment__text { display: block; margin-top: 8px; font-size: 15px; }
  .behandlungen__botox { margin-top: 30px; }
  .behandlungen__photos { margin-top: 34px; gap: 18px; }
  .photo { gap: 10px; }
  .photo img { width: 100%; height: 200px; }
  .photo__caption { font-size: 10px; letter-spacing: .28em; }
  .credo--behandlungen { margin-top: 38px; }
  .credo--behandlungen .credo__rule { display: none; }
  .credo--behandlungen .credo__text { font-size: 10.5px; letter-spacing: .34em; padding-left: 0; }

  /* Quote */
  .quote { padding: 72px 26px; gap: 22px; }
  .quote__text { font-size: 24px; line-height: 1.45; letter-spacing: normal; }

  /* Termine */
  .termine { padding: 60px 26px 56px; }
  .termine__img, .termine__grad { bottom: -40px; height: 240px; }
  .termine__img { object-position: 50% 76%; }
  .termine__inner { width: 100%; margin-top: 34px; }
  .termine__heading { font-size: 20px; line-height: 1.55; }
  .termine__launch { margin-top: 16px; font-size: 11px; letter-spacing: .14em; line-height: 1.9; }
  .form { margin-top: 40px; display: flex; flex-direction: column; gap: 32px; }
  .form__input { margin-top: 12px; }
  .form__textarea { height: 66px; }
  .form__actions { margin-top: 8px; gap: 16px; }
  .form__actions .btn { padding: 16px 40px; font-size: 12.5px; letter-spacing: .26em; }
  .form__privacy { font-size: 12px; }

  /* FAQ */
  .faq { padding: 60px 26px 52px; }
  .faq__list { width: 100%; margin-top: 10px; }
  .faq__item { padding: 26px 0; }
  .faq__q { font-size: 16.5px; line-height: 1.45; }
  .faq__a { margin-top: 14px; font-size: 15px; line-height: 1.75; }

  /* Anfahrt */
  .anfahrt { padding: 60px 26px 54px; }
  .anfahrt__cols { display: block; margin-top: 0; }
  .anfahrt__left { width: auto; }
  .anfahrt__address { margin-top: 32px; font-size: 21px; }
  .anfahrt__note { margin-top: 18px; line-height: 1.9; }
  .anfahrt__anamnese { margin-top: 16px; }
  .anfahrt__anamnese a { display: inline-block; padding: 12px 0; }
  .anfahrt__map { margin-top: 28px; }
  .map-consent { height: 260px; padding: 0 30px; }
  .map-frame iframe { height: 260px; }
  .map-frame__caption { margin-top: 10px; font-size: 9.5px; letter-spacing: .22em; }

  /* Kontakt */
  .kontakt { padding: 60px 26px 56px; }
  .kontakt__cols { margin-top: 36px; flex-direction: column; align-items: center; gap: 26px; }
  .kontakt__label { font-size: 10.5px; letter-spacing: .28em; }
  .kontakt__value { margin-top: 10px; font-size: 17px; }

  /* Footer */
  .footer { padding: 44px 26px 40px; gap: 16px; }
  .footer__brand { gap: 10px; }
  .footer__wordmark { font-size: 15px; }
  .footer__tagline { font-size: 11.5px; letter-spacing: .34em; padding-left: .34em; }
  .footer__links { gap: 24px; margin-top: 6px; }
  .footer__links a { font-size: 11px; padding: 10px 0; }
  .footer__sep { height: 11px; }
  .footer__address { font-size: 9.5px; letter-spacing: .2em; text-align: center; }
}

/* Between the two designed widths, cap the desktop content so columns stay intact */
@media (min-width: 981px) and (max-width: 1240px) {
  .behandlungen__cols, .anfahrt__cols { gap: 64px; }
}

/* Stacked-layout range (≤980px, where the treatment photos wrap below the
   list): the section gets very tall, so a full-height cover image flips to
   height-driven scaling and only the hair region remains in the visible top
   zone (founder bug reports 2026-08-22, parts 2+3). Pinning the image to a
   fixed top band keeps the face in frame at every width — including phones,
   which previously had the same hairline-only look (founder-directed change
   vs. the original 390 design). */
@media (max-width: 980px) {
  .behandlungen__img {
    height: 640px;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  }
}

/* Wide viewports: cap the photo layers so the face stops growing with the
   window. Full-bleed cover scales with viewport width — beyond ~1700px only
   hair remained visible (founder bug report 2026-08-22). A centered fixed
   image box pins the crop; the side mask fades the image edges into the
   patina washes. Cap 1280px = the founder's "a notch smaller" calibration
   (2026-08-22, ~11% below the 1440 design composition). */
@media (min-width: 1281px) {
  .hero__img, .behandlungen__img, .termine__img {
    width: 1280px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
}

/* Hero treatment "E460" — founder decision 2026-08-29. Supersedes the portrait-plate block of
   2026-08-25 (ladder rung B320). Four changes, all confined to the hero:
   1. Concentric rings and bronze arcs removed. They were the reticle cue; without them the
      crosshair reading has nothing to build on.
   2. The seal (circle + THE FACE wordmark) removed, founder's decision. The hero column
      therefore re-centres upward — that collapse is intended, not a side effect.
   3. Hero veil lowered to the level measured in the BEHANDLUNGEN section: that section lets
      through 9.62 grey levels of photo where the original hero let through 26.87, at identical
      image scale (coverScale 0.9892 in both). Only the opacity stops move; each breakpoint
      keeps its own ellipse geometry, so the phone veil is not given the desktop's shape.
   4. Hero photo becomes a centred portrait plate, positioned FROM THE EYE LINE (46.79% of the
      source image height) so the eyes land in the gap between the tagline and the paragraph —
      386px on desktop (gap 365..407), 312px on phone (gap 297..327, identical at 375/390/393).
   Photo asset swapped to hero_placeholder01_nopadtext.jpg: the "FACE" printed on the treatment
   pads is removed (ink pixels only, column-interpolated; the teal graphics are untouched),
   because it ghosted directly under the wordmark and read as a doubled logo. */
.hero__circle, .hero__arc { display: none !important; }
.seal { display: none !important; }
@media (min-width: 981px) {
  .hero__radial { background: radial-gradient(ellipse 58% 46% at 50% 26%, rgba(239,225,211,.70) 0%, rgba(239,225,211,.915) 58%, rgba(239,225,211,.995) 100%) !important; }
  .hero__img {
    inset: auto; left: 50%; top: 96px;
    width: 460px; height: 619px;
    transform: translateX(-50%); object-position: 50% 50%;
    -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 46%, #000 46%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(ellipse 60% 58% at 50% 46%, #000 46%, rgba(0,0,0,0) 100%);
  }
}
@media (max-width: 980px) {
  .hero__radial { background: radial-gradient(ellipse 90% 42% at 50% 30%, rgba(239,225,211,.665) 0%, rgba(239,225,211,.927) 60%, rgba(239,225,211,.996) 100%) !important; }
  .hero__img {
    inset: auto; left: 50%; top: 75px;
    width: 376px; height: 506px;
    transform: translateX(-50%); object-position: 50% 50%;
    -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 46%, #000 46%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(ellipse 60% 58% at 50% 46%, #000 46%, rgba(0,0,0,0) 100%);
  }
}

/* ============================================================
   LEGAL PAGES (Impressum / Datenschutz — TURN 3a/3b + template 2a/2b)
   ============================================================ */
.legal-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 52px;
  border-bottom: 1px solid rgba(38,32,27,.12);
}
.legal-topbar__wordmark {
  font-size: 13px; font-weight: 500;
  letter-spacing: .4em; padding-left: .4em;
  color: #26201B;
}
.legal-topbar__back { font-size: 13.5px; color: #5E5245; }
.legal-topbar__back:hover { color: #8A6B4F; }
.back-short { display: none; }

.legal-main { padding: 90px 96px 110px; display: flex; justify-content: center; }
.legal-col { width: 720px; max-width: 100%; }
.legal-kicker {
  font-size: 11px; letter-spacing: .3em;
  text-transform: uppercase; color: #A18D77;
}
.legal-title { margin-top: 18px; font-size: 38px; font-weight: 300; color: #26201B; }
.legal-rule { margin-top: 16px; width: 44px; height: 1px; background: rgba(185,142,104,.5); }

.legal-h2 {
  margin-top: 60px; padding-top: 34px;
  border-top: 1px solid rgba(38,32,27,.14);
  font-size: 22px; font-weight: 300; color: #26201B;
}
.legal-h3 { margin-top: 30px; font-size: 16px; font-weight: 500; color: #26201B; }
.legal-h4 { margin-top: 22px; font-size: 15px; font-weight: 400; color: #26201B; }
.legal-h3 + .legal-h4 { margin-top: 18px; }

.ds-p {
  margin-top: 14px;
  font-size: 15px; font-weight: 300; line-height: 1.78;
  color: #5E5245; text-wrap: pretty;
}
.legal-h4 + .ds-p { margin-top: 10px; }
.mt52 { margin-top: 52px; }
.mt24 { margin-top: 24px; }
.ds-p a, .link-bronze { color: #8A6B4F; }
.link-url { word-break: break-all; }
.ds-list {
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 15px; font-weight: 300; line-height: 1.6;
  color: #5E5245;
}
.ds-address {
  margin-top: 18px;
  font-size: 15px; font-weight: 300; line-height: 2;
  color: #26201B;
}
.ds-address a { color: #26201B; }
.ds-address a.link-bronze { color: #8A6B4F; }
.ds-stand {
  margin-top: 44px;
  font-size: 12.5px; letter-spacing: .2em;
  text-transform: uppercase; color: #A18D77;
}

.imp-address { margin-top: 52px; font-size: 17.5px; font-weight: 300; line-height: 1.9; color: #26201B; }
.imp-contact { margin-top: 26px; font-size: 15.5px; font-weight: 300; line-height: 2; color: #5E5245; }
.imp-contact a.link-tel { color: #5E5245; }
.imp-owner { margin-top: 26px; font-size: 15.5px; font-weight: 400; color: #26201B; }
.imp-copyright {
  margin-top: 44px;
  font-size: 15px; font-weight: 300; line-height: 1.78;
  color: #5E5245; text-wrap: pretty;
}
.imp-register {
  margin-top: 44px; padding-top: 30px;
  border-top: 1px solid rgba(38,32,27,.14);
  font-size: 15px; font-weight: 300; line-height: 2.1;
  color: #5E5245;
}

.legal-footer {
  background: #26201B;
  padding: 38px 96px 34px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.legal-footer__wordmark {
  font-size: 14px; font-weight: 500;
  letter-spacing: .5em; padding-left: .5em;
  color: #EDE6DA;
}
.legal-footer__address {
  font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: #948673;
}

@media (max-width: 980px) {
  .legal-topbar { padding: 20px 22px; }
  .legal-topbar__back { font-size: 13px; }
  .back-full { display: none; }
  .back-short { display: inline; }
  .legal-main { padding: 56px 26px 70px; }
  .legal-kicker { font-size: 10.5px; letter-spacing: .28em; }
  .legal-title { margin-top: 14px; font-size: 27px; }
  .legal-rule { margin-top: 14px; }
  .legal-h2 { margin-top: 48px; padding-top: 28px; font-size: 20px; }
  .legal-footer { padding: 34px 26px 30px; gap: 10px; }
  .legal-footer__wordmark { font-size: 13px; }
  .legal-footer__address { font-size: 9.5px; letter-spacing: .2em; text-align: center; }
}

/* Brand mark + page heading — founder decision 2026-08-29, items 1 and 2.
   The seal used to be both the visible wordmark AND the page's only <h1>; removing it for the
   E460 hero left the desktop with no brand name above the fold (the top-left slot held the
   street address) and the page with no rendered heading at all.
   Fix: the topbar wordmark becomes the <h1> and occupies the TOP-LEFT slot at every width.
     - phone  (<=980px): it already sat top-left; it is now the h1 rather than a span.
     - desktop (>=981px): the street address is retired from the topbar and the wordmark takes
       its place. The address is unchanged and still appears in full in the ANFAHRT section.
   margin:0 is required because browsers give <h1> a default vertical margin that would
   otherwise change the topbar's height. Only the topbar instance is an h1: the copy inside the
   mobile menu overlay stays a <span>, and the now-hidden seal was demoted from <h1> to
   <div> in the same change — so the document carries exactly one h1. */
.topbar__wordmark { margin: 0; }
@media (min-width: 981px) {
  .topbar__address  { display: none; }
  .topbar__wordmark { display: inline-block; }
}

/* Continuation photos quietened — founder decision 2026-08-29, item 3.
   BEHANDLUNGEN and TERMINE carry the same photograph as the hero, full-bleed and unchanged, so
   after the hero veil was lowered to wash B they out-shouted the hero directly above them.
   Both washes are deepened to roughly half their previous transmission so the hero leads again.
   Geometry, crops and assets are untouched — opacity stops only. */
.behandlungen__flat { background: rgba(239,225,211,.93); }
.termine__grad {
  background: linear-gradient(180deg, #EFE1D3 0%, rgba(239,225,211,.945) 60%, rgba(239,225,211,.91) 100%);
}


/* ====================== v10 — copy update 2026-09-04 ======================
   FAQ groups + accordion, the priced treatment menu, and the wordmark home link.
   Merged in from the build's variants.css so the site ships one stylesheet. */
/* THE FACE — SAMPLE-ONLY additions for the 2026-08-30 copy update.
   Written in the existing "Die Patina" language: same palette, same Jost weights,
   same hairline rules. Nothing here is deployed. */


/* main.css resets h1/h2/h3 but not h4; the FAQ questions become h4 once group
   headings take h3, so the reset has to be extended. */
h4 { margin: 0; }

/* ---------- shared group heading (FAQ + Behandlungen) ---------- */
.faq__group-title,
.beh-group__title {
  font-size: 11px; font-weight: 400;
  letter-spacing: .3em; text-transform: uppercase;
  color: #A18D77;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(185,142,104,.45);
}

/* ---------- FAQ, grouped ---------- */
.faq__group + .faq__group { margin-top: 62px; }
.faq__group .faq__item { padding: 30px 0; border-bottom: 1px solid rgba(38,32,27,.16); }
.faq__group .faq__item:last-of-type { border-bottom: none; padding-bottom: 4px; }
.faq__q { font-size: 18px; font-weight: 400; color: #26201B; }
.faq__disclaimer {
  margin-top: 58px; padding-top: 26px;
  border-top: 1px solid rgba(38,32,27,.12);
  font-size: 13px; font-weight: 300; line-height: 1.8; color: #A18D77;
}

/* ---------- FAQ variant B: native <details> accordion ---------- */
.faq__item--fold { padding: 0 !important; }
.faq__summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 25px 0;
}
.faq__summary::-webkit-details-marker { display: none; }
.faq__summary:hover .faq__q { color: #8A6B4F; }
.faq__marker { position: relative; flex: none; width: 12px; height: 12px; }
.faq__marker::before, .faq__marker::after {
  content: ''; position: absolute; background: #A18D77;
  transition: transform .25s ease, opacity .25s ease;
}
.faq__marker::before { left: 0; top: 5.5px; width: 12px; height: 1px; }
.faq__marker::after  { left: 5.5px; top: 0; width: 1px; height: 12px; }
.faq__item--fold[open] .faq__marker::after { transform: scaleY(0); opacity: 0; }
.faq__item--fold .faq__a { margin-top: 0; padding-bottom: 30px; max-width: 780px; }
.faq__item--fold .faq__q { font-size: 17px; }

/* ---------- Behandlungen variant A: stacked rows in the existing left column ---------- */
.behandlungen__list .beh-group__title { margin-top: 44px; }
.behandlungen__list .beh-group__title:first-child { margin-top: 8px; }
.treatment--stacked { display: block; padding: 26px 0; }
.treatment--stacked .treatment__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
}
.treatment--stacked .treatment__name { width: auto; flex: 0 1 auto; }
.treatment__meta {
  flex: none; font-size: 13px; letter-spacing: .16em; color: #8A6B4F; white-space: nowrap;
}
.treatment__body {
  margin-top: 15px; font-size: 15px; font-weight: 300; line-height: 1.75; color: #5E5245;
  text-wrap: pretty;
}
.treatment__card { margin-top: 13px; font-size: 12.5px; letter-spacing: .12em; color: #A18D77; }

/* ---------- Behandlungen variant B: full-width priced menu ---------- */
.behandlungen__menu { margin-top: 34px; }
.behandlungen__menu .beh-group + .beh-group { margin-top: 58px; }
.menu-row { padding: 28px 0; border-bottom: 1px solid rgba(38,32,27,.16); }
.beh-group .menu-row:last-child { border-bottom: none; }
.menu-row__line { display: flex; align-items: baseline; gap: 20px; }
.menu-row__name { flex: none; font-size: 18px; letter-spacing: .26em; color: #26201B; }
.menu-row__lead { flex: 1; height: 1px; background: rgba(38,32,27,.18); transform: translateY(-4px); }
.menu-row__price { flex: none; font-size: 15px; letter-spacing: .14em; color: #26201B; white-space: nowrap; }
.menu-row__dur { color: #A18D77; }
.menu-row__body {
  margin-top: 16px; max-width: 780px;
  font-size: 15.5px; font-weight: 300; line-height: 1.78; color: #5E5245; text-wrap: pretty;
}
.menu-row__card { margin-top: 13px; font-size: 12.5px; letter-spacing: .12em; color: #A18D77; }
.behandlungen__photoband { display: flex; gap: 22px; justify-content: center; margin-top: 58px; }

@media (max-width: 980px) {

  .faq__group + .faq__group { margin-top: 44px; }
  .faq__group .faq__item { padding: 24px 0; }
  .faq__q { font-size: 16.5px; line-height: 1.45; }
  .faq__summary { padding: 21px 0; gap: 18px; }
  .faq__item--fold .faq__q { font-size: 16px; }
  .faq__item--fold .faq__a { padding-bottom: 24px; }
  .faq__disclaimer { margin-top: 40px; padding-top: 22px; font-size: 12.5px; }

  .behandlungen__list .beh-group__title { margin-top: 34px; }
  .treatment--stacked { padding: 22px 0; }
  .treatment--stacked .treatment__head { display: block; }
  .treatment__meta { display: block; margin-top: 8px; }
  .treatment__body { font-size: 14.5px; }

  .behandlungen__menu { margin-top: 20px; }
  .behandlungen__menu .beh-group + .beh-group { margin-top: 42px; }
  .menu-row { padding: 22px 0; }
  .menu-row__line { display: block; }
  .menu-row__name { font-size: 16.5px; }
  .menu-row__lead { display: none; }
  .menu-row__price { display: block; margin-top: 8px; font-size: 14px; }
  .menu-row__body { margin-top: 12px; font-size: 14.5px; }
  .behandlungen__photoband { flex-direction: column; align-items: center; margin-top: 38px; }
}

/* The no-needles credo now sits INSIDE the Signature group rather than under the whole
   section, so its placement and its wording agree about what it covers. */
.credo--signature { margin-top: 32px; }
.beh-group .credo--signature + * { margin-top: 0; }

/* The wordmark is a home link in all three places. Colour inherits so nothing shifts;
   the hover tint is the only thing telling a visitor it is clickable. */
.topbar__wordmark a, .footer__wordmark a { color: inherit; }
.topbar__wordmark a:hover, .footer__wordmark a:hover { color: #8A6B4F; }

/* The Botox compatibility line now sits with the Signature pair it actually describes,
   directly under their credo — so it reads as a statement about them, not about REFINE. */
.beh-group .behandlungen__botox {
  margin-top: 16px; text-align: center;
  font-size: 14.5px; font-weight: 300; color: #5E5245;
}

.anfahrt__anamnese + .anfahrt__anamnese { margin-top: 10px; }

/* ---- Signature group heading carries its qualifier on the same row, right-aligned ----
   Replaces the credo band + the standalone Botox line that used to close the group.
   Wraps to its own right-aligned row on the phone, where the pair cannot share a line. */
.beh-group__title--noted {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: 26px; row-gap: 6px;
}
.beh-group__label { flex: none; }
.beh-group__note {
  flex: 0 1 auto; max-width: 100%;
  margin-left: auto;      /* right-aligned on whichever row it lands */
  text-align: right;      /* and still right-aligned if the copy ever grows to 2 lines */
  text-transform: none;
  letter-spacing: .01em;
  font-size: 12.5px; font-weight: 300;
  color: #5E5245;
}

/* ====================== BEHANDLUNGEN CAROUSEL ======================
   Added for v12. Four faces and the treatment scene, edge to edge, the next
   picture peeking in. Native CSS scroll-snap - no JavaScript library.
   Decided 2026-09-19: format F3 full-bleed, filter G2.
   The figure margin reset lives at the top of this file, so .car__item needs none. */
.car { margin-top: 58px; }
.car__track {
  display: flex; gap: 22px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 4px;
}
.car__track::-webkit-scrollbar { display: none; }
.car__item { flex: none; scroll-snap-align: center; }
.car__item img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(.10) saturate(.88) brightness(1.02);
}
.car--bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.car--bleed .car__track { gap: 16px; padding-left: 7vw; padding-right: 7vw; }
.car--bleed .car__item { width: 34vw; height: 42.5vw; }

/* the two arrows under the band - the only control a mouse has, since the
   scrollbar is hidden. On a phone the swipe is native; they stay for both. */
.car__nav { display: flex; gap: 16px; justify-content: center; margin-top: 22px; }
.car__arrow {
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(161,141,119,.45); border-radius: 50%;
  color: #A18D77; cursor: pointer;
  transition: color .18s ease, border-color .18s ease, opacity .18s ease;
}
.car__arrow svg { width: 9px; height: 15px; display: block; }
.car__arrow:hover { color: #26201B; border-color: rgba(38,32,27,.42); }
.car__arrow:focus-visible { outline: 1px solid #A18D77; outline-offset: 3px; }
.car__arrow[disabled] { opacity: .28; cursor: default; }

@media (max-width: 980px) {
  .car { margin-top: 38px; }
  .car__nav { margin-top: 18px; }
  .car--bleed .car__item  { width: 78vw; height: 97.5vw; }
  .car--bleed .car__track { padding-left: 8vw; padding-right: 8vw; }
}