/* ==========================================================================
   Beauty E&C — Skin Expert
   Design system v2 — editorial, asymmetric, rose × anthracite
   Fonts loaded via <link> in <head>, not @import (avoids the extra
   render-blocking round-trip @import causes).
   ========================================================================== */

:root{
  /* --- color: 6 named values, fixed brand world ------------------------ */
  --ink:            #17161a;   /* anthracite / near-black — primary dark */
  --anthracite:     #2a282e;   /* secondary dark surface */
  --rose-deep:      #9c5761;   /* accent — CTAs, links, emphasis */
  --rose:           #c98d96;   /* mid rose — dividers, secondary accents */
  --rose-blush:     #f1d9dd;   /* light rose surface */
  --linen:          #f9f2f0;   /* base paper background */
  --white:          #fffdfc;

  --ink-72:         rgba(23,22,26,.72);
  --ink-50:         rgba(23,22,26,.5);
  --ink-24:         rgba(23,22,26,.24);
  --ink-12:         rgba(23,22,26,.12);
  --linen-80:       rgba(249,242,240,.8);
  --linen-56:       rgba(249,242,240,.56);
  --linen-24:       rgba(249,242,240,.24);
  --linen-12:       rgba(249,242,240,.12);

  /* --- type --------------------------------------------------------- */
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-display: clamp(2.6rem, 3.2vw + 1.7rem, 6.4rem);
  --fs-h1:      clamp(2.1rem, 1.4vw + 1.6rem, 3.4rem);
  --fs-h2:      clamp(1.6rem, .9vw + 1.3rem, 2.35rem);
  --fs-h3:      clamp(1.2rem, .3vw + 1.1rem, 1.4rem);
  --fs-lead:    clamp(1.1rem, .4vw + 1rem, 1.4rem);
  --fs-body:    1.0625rem;
  --fs-small:   .875rem;
  --fs-micro:   .75rem;

  /* --- rhythm --------------------------------------------------------- */
  --edge: clamp(1.5rem, 5vw, 4.5rem);
  --section-y: clamp(5rem, 10vw, 9rem);
  --radius: 2px;

  /* --- motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 160ms;
  --dur-med: 260ms;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*, *::before, *::after{ box-sizing: border-box; }
html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}
html, body{ overflow-x: hidden; max-width: 100%; }
body{
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea{ font: inherit; }

button, a, [role="button"]{
  touch-action: manipulation;
}
.btn, .nav__toggle, .nav__links a, .link, .compare__grip{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Grain — one quiet texture layer, reused on dark sections
   ========================================================================== */

.grain{ position:relative; isolation:isolate; }
.grain::before{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5;
  pointer-events:none;
  z-index:1;
}
.grain > *{ position:relative; z-index:2; }

/* ==========================================================================
   Type utility
   ========================================================================== */

.display{
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: .98;
  letter-spacing: -0.01em;
}
.display em{ font-style: normal; color: var(--rose-deep); }
.on-dark .display em, .on-anthracite .display em{ color: var(--rose); }

h1{ font-family: var(--serif); font-weight:400; font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.005em; }
h2{ font-family: var(--serif); font-weight:400; font-size: var(--fs-h2); line-height: 1.1; }
h3{ font-family: var(--sans); font-weight:600; font-size: var(--fs-h3); line-height: 1.3; }

.lead{ font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.45; font-style: normal; color: var(--ink-72); }
.on-dark .lead, .on-anthracite .lead{ color: var(--linen-80); }

p{ max-width: min(62ch, 88vw); color: var(--ink-72); }
.on-dark p, .on-anthracite p{ color: var(--linen-80); }

.label{
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: .02em;
  color: var(--rose-deep);
}
.on-dark .label, .on-anthracite .label{ color: var(--rose); }

/* ==========================================================================
   Layout shell
   ========================================================================== */

.wrap{ padding-inline: var(--edge); }
main{ overflow-x: clip; }

section{ padding-block: var(--section-y); position: relative; }
.on-dark{ background: var(--ink); color: var(--linen); }
.on-blush{ background: var(--rose-blush); }
.on-anthracite{ background: var(--anthracite); color: var(--linen); }

.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, var(--ink-12) 20%, var(--ink-12) 80%, transparent);
}
.on-dark .divider, .on-anthracite .divider{ background: linear-gradient(90deg, transparent, var(--linen-12) 20%, var(--linen-12) 80%, transparent); }

/* ==========================================================================
   Buttons & links
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding: .95em 1.9em;
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-small); letter-spacing: .02em;
  border-radius: 5px;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
  white-space: nowrap;
}
.btn--solid{
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(23,22,26,.06), 0 10px 26px -10px rgba(23,22,26,.4);
}
.btn:active{ transform: scale(.97); box-shadow: 0 1px 1px rgba(23,22,26,.08); }

.btn--solid{ background: var(--ink); color: var(--linen); }
.on-dark .btn--solid, .on-anthracite .btn--solid{ background: var(--rose); color: var(--ink); box-shadow: 0 1px 2px rgba(23,22,26,.1), 0 10px 26px -10px rgba(201,141,150,.55); }

.btn--ghost{
  border: 1px solid var(--ink-24);
  color: var(--ink);
  box-shadow: 0 0 0 0 rgba(156,87,97,0);
}
.on-dark .btn--ghost, .on-anthracite .btn--ghost{ border-color: var(--linen-24); color: var(--linen); box-shadow: 0 0 0 0 rgba(241,217,221,0); }

.link{
  position: relative;
  padding-bottom: .15em;
  background-image: linear-gradient(var(--rose-deep), var(--rose-deep));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--dur-med) var(--ease-out);
}
.on-dark .link, .on-anthracite .link{ background-image: linear-gradient(var(--rose), var(--rose)); }

@media (hover: hover) and (pointer: fine){
  .btn--solid:hover{ background: var(--rose-deep); box-shadow: 0 1px 2px rgba(23,22,26,.08), 0 14px 30px -10px rgba(156,87,97,.5); }
  .on-dark .btn--solid:hover, .on-anthracite .btn--solid:hover{ background: var(--linen); box-shadow: 0 1px 2px rgba(23,22,26,.1), 0 14px 30px -10px rgba(241,217,221,.6); }
  .btn--ghost:hover{ border-color: var(--rose-deep); color: var(--rose-deep); box-shadow: 0 0 0 5px rgba(156,87,97,.1); }
  .on-dark .btn--ghost:hover, .on-anthracite .btn--ghost:hover{ border-color: var(--rose); color: var(--rose); box-shadow: 0 0 0 5px rgba(201,141,150,.16); }
  .link:hover{ background-size: 100% 1px; }
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav{
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  padding: calc(1.6rem + env(safe-area-inset-top, 0px)) var(--edge) 1.6rem;
  display:flex; align-items:center; justify-content:space-between;
  background: transparent;
  transition: background var(--dur-med) var(--ease-out), backdrop-filter var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  border-bottom: 1px solid transparent;
  box-shadow: 0 20px 40px -30px rgba(13,12,15,0);
}
.nav[data-scrolled="true"]{
  padding-block: calc(.95rem + env(safe-area-inset-top, 0px)) .95rem;
  background: rgba(249,242,240,.74);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  border-bottom-color: var(--ink-12);
  box-shadow: 0 20px 40px -28px rgba(13,12,15,.28);
}
.nav__mark{
  display:inline-block;
  font-family: var(--sans); font-weight: 800; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(.66rem, 1.5vw, .82rem); line-height:1; letter-spacing: .04em;
  color: var(--linen);
  padding-bottom: .3em;
  background-image: linear-gradient(var(--rose), var(--rose));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--dur-med) var(--ease-out), background-size var(--dur-med) var(--ease-out);
}
.nav__mark span{ color: var(--rose); font-style: normal; }
@media (hover: hover) and (pointer: fine){
  .nav__mark:hover{ background-size: 100% 1px; }
}
.nav__links{ display:flex; align-items:center; gap: 2.8rem; }
.nav__links a{
  position:relative;
  padding-bottom: .3em;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: .02em;
  color: var(--linen);
  background-image: linear-gradient(var(--rose), var(--rose));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color var(--dur-med) var(--ease-out), background-size var(--dur-med) var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
  .nav__links a:hover{ background-size: 100% 1px; }
}
.nav__cta{ display:none; }
@media (min-width: 780px){ .nav__cta{ display:inline-flex; } }
.nav__cta.btn--solid{ background: var(--rose); color: var(--ink); box-shadow: 0 1px 2px rgba(23,22,26,.1), 0 10px 26px -10px rgba(201,141,150,.55); }
@media (hover: hover) and (pointer: fine){
  .nav__cta.btn--solid:hover{ background: var(--linen); box-shadow: 0 1px 2px rgba(23,22,26,.1), 0 14px 30px -10px rgba(241,217,221,.6); }
  .nav[data-scrolled="true"] .nav__cta.btn--solid:hover{ background: var(--rose-deep); color: var(--linen); box-shadow: 0 1px 2px rgba(23,22,26,.08), 0 14px 30px -10px rgba(156,87,97,.5); }
}

.nav__toggle{
  display:flex; flex-direction:column; gap:5px; width:26px;
}
.nav__toggle span{ height:1px; background: var(--linen); width:100%; transition: transform var(--dur-med) var(--ease-in-out), opacity var(--dur-fast), background var(--dur-med) var(--ease-out); }

.nav[data-scrolled="true"] .nav__mark,
.nav[data-scrolled="true"] .nav__links a{ color: var(--ink); }
.nav[data-scrolled="true"] .nav__mark span{ color: var(--rose-deep); }
.nav[data-scrolled="true"] .nav__mark,
.nav[data-scrolled="true"] .nav__links a{ background-image: linear-gradient(var(--rose-deep), var(--rose-deep)); }
.nav[data-scrolled="true"] .nav__toggle span{ background: var(--ink); }
@media (min-width: 780px){ .nav__toggle{ display:none; } }
@media (max-width: 779px){ .nav__links{ display:none; } }

.nav__sheet{
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink); color: var(--linen);
  display:flex; flex-direction:column; justify-content:center;
  padding: calc(var(--edge) + env(safe-area-inset-top, 0px)) var(--edge) calc(var(--edge) + env(safe-area-inset-bottom, 0px));
  clip-path: inset(0 0 100% 0);
  transition: clip-path 420ms var(--ease-in-out);
  overscroll-behavior: contain;
}
.nav__sheet[data-open="true"]{ clip-path: inset(0 0 0% 0); }
.nav__sheet a{ font-family: var(--serif); font-size: 2.4rem; font-style: normal; display:block; padding: .35em 0; }
.nav__sheet .btn{ margin-top: 1.5rem; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top: 7rem;
  background: var(--ink);
  color: var(--linen);
  position: relative;
}
@media (max-width: 600px){
  .hero__image{ object-position: 50% 15% !important; }
}
.hero__field{
  position:absolute; inset:0; overflow:hidden;
}
.hero__image{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position: 50% 20%;
  transform: scale(1.06);
  animation: kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{ transform: scale(1.06) translate3d(0,0,0); }
  to{ transform: scale(1.14) translate3d(-1.2%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce){ .hero__image{ animation:none; transform:scale(1.03); } }

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(13,12,15,.96) 0%, rgba(13,12,15,.88) 26%, rgba(13,12,15,.5) 52%, rgba(13,12,15,.16) 74%, rgba(13,12,15,.04) 100%),
    linear-gradient(0deg, rgba(13,12,15,.78) 0%, transparent 34%);
}

.hero__content{
  position:relative; z-index:2;
  padding: 0 var(--edge) clamp(3.5rem, 8vw, 6.5rem);
  max-width: min(44rem, 92vw);
}

.hero__headline .line{
  display:block;
  overflow:hidden;
}
.hero__headline .line span{
  display:block;
  transform: translateY(100%);
  animation: reveal-up 900ms var(--ease-out) forwards;
}
.hero__headline .line:nth-child(1) span{ animation-delay: 80ms; }
.hero__headline .line:nth-child(2) span{ animation-delay: 200ms; }
.hero__headline .line:nth-child(3) span{ animation-delay: 320ms; }

@keyframes reveal-up{ to{ transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero__headline .line span{ animation: none; transform:none; }
}

.hero__content .hero__lead{
  margin-top: clamp(1.3rem, 2.6vw, 1.7rem);
  max-width: 52ch;
  opacity:0;
  animation: fade-in 900ms var(--ease-out) forwards;
  animation-delay: 460ms;
}
.hero__content .hero__actions{
  margin-top: clamp(1.7rem, 3vw, 2.1rem);
  opacity:0;
  animation: fade-in 900ms var(--ease-out) forwards;
  animation-delay: 620ms;
}
@media (prefers-reduced-motion: reduce){
  .hero__content .hero__lead, .hero__content .hero__actions{ opacity:1; animation:none; }
}
@keyframes fade-in{ to{ opacity:1; } }

.hero__actions{ display:flex; flex-wrap:wrap; gap: .85rem; }

.hero__scroll{
  position:absolute; left: var(--edge); bottom: 1.6rem; z-index:2;
  display:flex; align-items:center; gap:.6rem;
  font-size: var(--fs-micro); color: var(--linen-56);
}
.hero__scroll .stem{
  width:1px; height:34px;
  background: linear-gradient(to bottom, var(--rose), var(--linen-24));
}
@media (max-width: 620px){ .hero__scroll{ display:none; } }

/* ==========================================================================
   Editorial intro
   ========================================================================== */

.intro{
  display:grid; gap: 2rem 4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px){
  .intro{ grid-template-columns: .8fr 1.2fr; }
}
.intro__eyebrow{ font-family: var(--serif); font-style: normal; font-size: 1.15rem; color: var(--rose-deep); }

/* ==========================================================================
   Philosophy band
   ========================================================================== */

.philosophy{
  display:grid; gap: 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 980px){
  .philosophy{ grid-template-columns: 1.1fr .9fr; align-items:start; }
}
.philosophy__quote{ font-size: clamp(1.6rem, 2.4vw, 2.5rem); }
.philosophy__list{ display:flex; flex-direction:column; }
.philosophy__list li{
  padding: 1.5rem 0;
  border-top: 1px solid var(--linen-12);
  display:grid; grid-template-columns: 2.5rem 1fr; gap: 1.2rem;
}
.philosophy__list li:last-child{ border-bottom: 1px solid var(--linen-12); }
.philosophy__list .num{ font-family: var(--sans); font-weight: 700; font-style: normal; color: var(--rose); font-size:.85rem; letter-spacing:.03em; }

/* ==========================================================================
   Results gallery (Vorher/Nachher)
   ========================================================================== */

.results-grid{ display:grid; gap: 2.4rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 700px){
  .results-grid{ grid-template-columns: 1fr 1fr; }
}
.results-card img{ width:100%; height:auto; display:block; border-radius:4px; }
.results-card figcaption{ margin-top:.9rem; font-size: var(--fs-small); font-weight:600; color: var(--ink-72); }

/* ==========================================================================
   Treatment rows (editorial list, not cards)
   ========================================================================== */

.tx-list{ display:flex; flex-direction:column; }
.tx-row{
  display:grid;
  grid-template-columns: 1fr;
  gap: .6rem 2rem;
  padding: 2rem 0;
  border-top: 1px solid var(--ink-12);
  transition: padding-left var(--dur-med) var(--ease-out);
}
.tx-list > .tx-row:last-child{ border-bottom: 1px solid var(--ink-12); }
@media (min-width: 760px){
  .tx-row{ grid-template-columns: 1.5fr 2.2fr auto; align-items:baseline; gap: 2rem; }
}
@media (hover:hover) and (pointer:fine){
  .tx-row:hover{ padding-left: .6rem; }
}
.tx-row__name{ font-family: var(--serif); font-size: clamp(1.35rem, 1.6vw, 1.9rem); }
.on-dark .tx-row__name, .on-anthracite .tx-row__name{ color: var(--rose); }
.tx-row__desc{ font-size: var(--fs-small); color: var(--ink-50); max-width: min(46ch, 88vw); }
.on-dark .tx-row__desc, .on-anthracite .tx-row__desc{ color: var(--linen-56); }
.tx-row__meta{ text-align:left; white-space:nowrap; font-size: var(--fs-small); }
@media (min-width: 760px){ .tx-row__meta{ text-align:right; } }
.tx-row__price{ font-weight:700; }
.tx-row__time{ color: var(--ink-50); display:block; }
.on-dark .tx-row__time, .on-anthracite .tx-row__time{ color: var(--linen-56); }
.on-dark .tx-row, .on-anthracite .tx-row{ border-color: var(--linen-12); }
.on-dark .tx-list > .tx-row:last-child, .on-anthracite .tx-list > .tx-row:last-child{ border-color: var(--linen-12); }

.tx-group + .tx-group{ margin-top: clamp(3rem, 6vw, 5rem); }
.tx-group__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom: 1rem; flex-wrap:wrap; }

/* ==========================================================================
   Visual panel — abstract macro-light composition (no stock imagery)
   ========================================================================== */

.panel{
  position:relative;
  aspect-ratio: 4 / 5;
  overflow:hidden;
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--rose-blush), var(--linen) 60%);
}
.panel::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 55% at 24% 20%, rgba(156,87,97,.55), transparent 70%),
    radial-gradient(55% 50% at 82% 70%, rgba(23,22,26,.5), transparent 65%),
    radial-gradient(40% 40% at 60% 15%, rgba(255,255,255,.7), transparent 70%);
  mix-blend-mode: normal;
}
.panel::after{
  content:"";
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.6;
}
.panel--dark{ background: linear-gradient(160deg, var(--anthracite), var(--ink) 65%); }
.panel--dark::before{
  background:
    radial-gradient(55% 50% at 20% 25%, rgba(201,141,150,.4), transparent 70%),
    radial-gradient(60% 55% at 85% 80%, rgba(241,217,221,.18), transparent 70%);
}
.panel__caption{
  position:absolute; left: 1.4rem; bottom: 1.4rem; right:1.4rem; z-index:2;
  font-size: var(--fs-micro); color: var(--ink-50);
  display:flex; justify-content:space-between; gap: 1rem;
}
.panel--dark .panel__caption{ color: var(--linen-56); }

.panel--photo{ background: var(--anthracite); }
.panel--photo::before{ content:none; }
.panel--photo::after{
  background-image:none;
  background: linear-gradient(190deg, transparent 38%, rgba(13,12,15,.82) 100%);
  opacity:1; z-index:1;
}
.panel--photo img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform 900ms var(--ease-out);
}
.panel--photo .panel__caption{ color: rgba(249,242,240,.94); }
.panel--photo .panel__caption span:last-child{ color: rgba(249,242,240,.68); }
@media (hover:hover) and (pointer:fine){
  .panel--photo:hover img{ transform: scale(1.045); }
}

/* ==========================================================================
   Team
   ========================================================================== */

.team{ display:grid; gap: clamp(3rem, 6vw, 5rem); grid-template-columns: 1fr; }
@media (min-width: 860px){ .team{ grid-template-columns: 1fr 1fr; } }
.team__member{ display:grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 560px){ .team__member{ grid-template-columns: .8fr 1.2fr; align-items:start; } }
.team__role{ font-size: var(--fs-small); color: var(--rose-deep); font-weight:600; }

/* ==========================================================================
   Result (before/after + copy)
   ========================================================================== */

.result{ display:grid; gap: clamp(2.4rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 760px){ .result{ grid-template-columns: minmax(280px, 25rem) 1fr; align-items:center; } }

/* ==========================================================================
   Stats strip
   ========================================================================== */

.stats{ display:grid; grid-template-columns: repeat(2,1fr); gap: 2rem 1.5rem; }
@media (min-width: 760px){ .stats{ grid-template-columns: repeat(4,1fr); } }
.stat{ padding-top: 1.1rem; border-top: 1px solid var(--linen-24); }
.stat b{ display:block; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3rem); font-weight:400; line-height:1; }
.stat span{ display:block; margin-top:.55rem; font-size: var(--fs-small); color: var(--linen-80); line-height:1.4; max-width: 16ch; }
.on-blush .stat{ border-color: var(--ink-12); }
.on-blush .stat span{ color: var(--ink-72); }

/* ==========================================================================
   Footer
   ========================================================================== */

footer{ background: var(--ink); color: var(--linen); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }
.footer__grid{ display:grid; gap: 2.6rem; grid-template-columns: 1fr; margin-bottom: 3rem; }
@media (min-width: 760px){ .footer__grid{ grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer__grid h3{ color: var(--rose); font-size: var(--fs-small); margin-bottom: 1rem; font-weight:700; }
.footer__grid ul{ display:flex; flex-direction:column; gap: .6rem; }
.footer__grid a, .footer__grid p{ color: var(--linen-56); font-size: var(--fs-small); }
.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top: 1.6rem; border-top:1px solid var(--linen-12);
  font-size: var(--fs-micro); color: var(--linen-56);
}

/* ==========================================================================
   Utility
   ========================================================================== */

.container{ max-width: 84rem; margin-inline:auto; }
.container--narrow{ max-width: 46rem; }
.flex-between{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.mt-lg{ margin-top: clamp(3rem, 6vw, 5rem); }
.small-note{ font-size: var(--fs-micro); color: var(--ink-50); }
.on-dark .small-note, .on-anthracite .small-note{ color: var(--linen-56); }

/* Page hero (subpages) */
.page-hero{
  padding-top: clamp(7rem, 10vw, 9rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  background: var(--ink); color: var(--linen);
}
.page-hero--photo{
  position:relative; overflow:hidden;
  min-height: clamp(30rem, 58vw, 46rem);
  padding-bottom: clamp(6.5rem, 13vw, 10rem);
  display:flex; align-items:flex-end;
}
@media (max-width: 600px){
  .page-hero--photo{ min-height: 100svh; }
}
.page-hero--photo .page-hero__image{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position: 50% 22%;
}
.page-hero--kontakt .page-hero__image{ transition: transform 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine){
  .page-hero--kontakt:hover .page-hero__image{ transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce){
  .page-hero--kontakt .page-hero__image{ transition:none; }
}
.page-hero--photo .page-hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(13,12,15,.95) 0%, rgba(13,12,15,.84) 24%, rgba(13,12,15,.44) 50%, rgba(13,12,15,.14) 72%, rgba(13,12,15,.04) 100%),
    linear-gradient(0deg, rgba(13,12,15,.65) 0%, transparent 30%);
}
.page-hero--photo .page-hero__fade{
  position:absolute; left:0; right:0; bottom:0;
  height: 46%;
  background: linear-gradient(to bottom, transparent 0%, transparent 26%, rgba(23,22,26,.5) 62%, var(--ink) 100%);
  pointer-events:none;
}
.page-hero--photo .wrap{ position:relative; z-index:2; width:100%; }

/* Simple responsive table for opening hours */
.hours{ display:flex; flex-direction:column; gap:.5rem; }
.hours div{ display:flex; justify-content:space-between; gap:1rem; max-width: min(22rem, 88vw); padding: .4rem 0; border-bottom:1px solid var(--ink-12); font-size: var(--fs-small); }
.on-dark .hours div, .on-anthracite .hours div{ border-color: var(--linen-12); }

/* Skip link */
.skip-link{
  position:absolute; left:1rem; top:-3rem; z-index:200;
  background: var(--ink); color: var(--linen); padding:.7em 1.2em; border-radius:6px;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top: 1rem; }

:focus-visible{ outline: 2px solid var(--rose-deep); outline-offset: 3px; }

/* ==========================================================================
   Before / After comparison slider
   ========================================================================== */

.compare__frame{
  position:relative;
  width:100%; max-width: 25rem;
  aspect-ratio: 332 / 656;
  overflow:hidden;
  border-radius: var(--radius);
  background: var(--anthracite);
  cursor: ew-resize;
  touch-action: pan-y;
}
.compare__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  display:block; pointer-events:none;
  -webkit-user-drag:none; user-select:none;
}
.compare__img--before{ clip-path: inset(0 50% 0 0); }

.compare__tag{
  position:absolute; top: 1rem; z-index:2; pointer-events:none;
  font-family: var(--sans); font-size: var(--fs-micro); font-weight:700; letter-spacing:.02em;
  color: var(--linen); background: rgba(13,12,15,.45); backdrop-filter: blur(6px);
  padding: .4em .85em; border-radius: 999px;
}
.compare__tag--before{ left: 1rem; }
.compare__tag--after{ right: 1rem; }

.compare__divider{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background: var(--linen);
  transform: translateX(-50%);
  z-index:2; pointer-events:none;
  box-shadow: 0 0 0 1px rgba(13,12,15,.2);
}
.compare__grip{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 2.6rem; height: 2.6rem; border-radius:50%;
  background: var(--linen);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px rgba(13,12,15,.4);
}
.compare__grip::before, .compare__grip::after{
  content:""; width:0; height:0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.compare__grip::before{ border-right: 7px solid var(--ink); margin-right: 5px; }
.compare__grip::after{ border-left: 7px solid var(--ink); margin-left: 5px; }

.compare__range{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; z-index:3; cursor: ew-resize;
  -webkit-appearance:none; appearance:none; background:none;
}
.compare__range::-webkit-slider-thumb{ -webkit-appearance:none; width:100%; height:100%; }
.compare__range::-moz-range-thumb{ width:100%; height:100%; opacity:0; border:0; }
.compare__range::-moz-range-track{ opacity:0; }
.compare__range:focus-visible ~ .compare__grip{ outline: 2px solid var(--rose-deep); outline-offset: 3px; }

@keyframes grip-hint{
  0%, 100%{ transform: translate(-50%,-50%) scale(1); }
  50%{ transform: translate(-50%,-50%) scale(1.12); }
}
.compare__grip{ animation: grip-hint 1.8s ease-in-out 1.2s 2; }
@media (prefers-reduced-motion: reduce){ .compare__grip{ animation:none; } }

/* ==========================================================================
   Scroll reveal — curtain: content is masked by clip-path and lifts into
   view, rather than merely fading up. One signature move, reused everywhere
   (text, photos, list rows) instead of scattered ad-hoc effects.
   ========================================================================== */

[data-reveal]{
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transform: translateY(10px);
  transition: clip-path 950ms var(--ease-out), opacity 700ms var(--ease-out), transform 950ms var(--ease-out);
}
[data-reveal="true"]{
  clip-path: inset(0 0 0% 0);
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; clip-path:none !important; transform:none !important; transition:none !important; }
}

[data-reveal]:nth-of-type(1){ transition-delay: 0ms; }
[data-reveal]:nth-of-type(2){ transition-delay: 90ms; }
[data-reveal]:nth-of-type(3){ transition-delay: 180ms; }
[data-reveal]:nth-of-type(4){ transition-delay: 270ms; }
[data-reveal]:nth-of-type(5){ transition-delay: 360ms; }
[data-reveal]:nth-of-type(6){ transition-delay: 450ms; }

/* Photos get a slower, more deliberate wipe — the curtain itself is the moment */
img[data-reveal], .panel[data-reveal]{
  transition: clip-path 1200ms var(--ease-in-out), opacity 900ms var(--ease-out);
}