/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ELBA AESTHETICS — elba.css v3.0
   Einheitlich. Systemisch. Durchdacht.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESIGN TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  /* Farben — 3 Flächen, 1 Akzent */
  --cream:   #F5F2EC;
  --off:     #EDE9E1;
  --dark:    #2C2420;   /* Warm Dunkelbraun — kein Schwarz */
  --mid:     #6B6560;   /* Lesbarer Sekundärtext */
  --rule:    rgba(44,36,32,.1);
  --red:     #A63245;
  --red-hov: #8E2A3C;
  --section-dark: #1E1A1C;  /* Warm dark — kein reines Schwarz */

  /* Typografie */
  --sans:  'Outfit', system-ui, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;

  /* Letter-spacing — Kalia-Stil */
  --ls-body:    .04em;   /* Fließtext: minimal */
  --ls-label:   .16em;   /* Tags, Preise */
  --ls-section: .28em;   /* Section-Label, Caps-Text */
  --ls-logo:    .38em;   /* Logo */

  /* Headline-Größen — Kalia-Style: groß, tight */
  --h1-hero:    clamp(3.4rem, 6.5vw, 7.2rem);
  --h1-page:    clamp(2.8rem, 5vw, 5.2rem);
  --h2-section: clamp(2rem, 4vw, 3.8rem);

  /* Section-Abstände — Kalia-Stil: großzügig */
  --sec-pad:   112px;
  --sec-pad-m: 72px;
  --sec-pad-s: 52px;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESET
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--sans); background: var(--cream); color: var(--dark); overflow-x: hidden; }
.w { max-width: 1280px; margin: 0 auto; padding: 0 64px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAV
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: 56px; background: var(--cream);
  border-bottom: 1px solid var(--rule);
  transition: transform .4s var(--ease), box-shadow .3s ease;
}
#nav.scrolled { box-shadow: 0 2px 20px rgba(28,28,26,.07); }
#nav.hide     { transform: translateY(-100%); }

.nav-row {
  max-width: 1280px; margin: 0 auto; padding: 0 28px;
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav-logo {
  font-family: var(--serif); font-size: 1.32rem; font-weight: 400;
  letter-spacing: var(--ls-logo); text-transform: uppercase;
  text-decoration: none; color: var(--dark);
  transition: opacity .3s; flex-shrink: 0;
}
.nav-logo:hover { opacity: .65; }
.nav-meta {
  display: flex; align-items: center; gap: 32px;
  font-family: var(--sans); font-size: .7rem; font-weight: 400;
  letter-spacing: var(--ls-section); text-transform: uppercase; color: rgba(44,36,32,.6);
}
.nav-meta a { color: inherit; text-decoration: none; transition: color .25s; white-space: nowrap; }
.nav-meta a:hover { color: var(--red); }
.nav-cta {
  font-family: var(--sans); font-size: .6rem; font-weight: 500;
  letter-spacing: var(--ls-section); text-transform: uppercase;
  text-decoration: none; color: #fff; background: var(--red);
  padding: 10px 20px; white-space: nowrap; flex-shrink: 0; transition: background .25s;
}
.nav-cta:hover { background: var(--red-hov); }
#mobileMenuBtn { display: none; background: none; border: none; cursor: pointer; color: var(--dark); padding: 8px; flex-shrink: 0; }

/* Mobile menu */
#mobileMenu {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 400;
  background: var(--cream); flex-direction: column;
  padding: 80px 32px 40px; overflow-y: auto;
}
#mobileMenu.open { display: flex; }
.mobile-section-label {
  font-family: var(--sans); font-size: .52rem; font-weight: 400;
  letter-spacing: var(--ls-section); text-transform: uppercase;
  color: rgba(28,28,26,.35); margin-bottom: 20px; margin-top: 32px;
}
.mobile-section-label:first-child { margin-top: 0; }
#mobileMenu a {
  font-family: var(--serif); font-size: 1.6rem; font-weight: 300;
  color: var(--dark); text-decoration: none;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
  display: block; transition: color .2s;
}
#mobileMenu a:hover { color: var(--red); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BREADCRUMB — einheitlich überall
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--sans); font-size: .64rem; font-weight: 300;
  letter-spacing: var(--ls-body); margin-bottom: 20px;
  color: rgba(243,241,237,.68);
}
.breadcrumb a { color: inherit; text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: rgba(243,241,237,.75); }
.breadcrumb span { opacity: .35; }
.breadcrumb.on-light { color: rgba(28,28,26,.38); }
.breadcrumb.on-light a:hover { color: var(--dark); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sec       { padding: var(--sec-pad) 0; }
.sec-warm  { background: #FDFBF7; }
.sec-off   { background: var(--off); }
.sec-black { background: var(--section-dark); }

.sl {
  font-family: var(--sans); font-size: .55rem; font-weight: 400;
  letter-spacing: var(--ls-section); text-transform: uppercase;
  color: #4A4745; display: block; margin-bottom: 16px;
}
.sl-inv { color: rgba(243,241,237,.55); }

.sh2 {
  font-family: var(--sans); font-size: var(--h2-section);
  font-weight: 300; line-height: .97; letter-spacing: -.02em;
  color: var(--dark); margin-bottom: 24px;
}
.sh2 i { font-style: italic; font-family: var(--serif); color: rgba(44,36,32,.45); }
.sh2-inv { color: var(--cream); font-family: var(--sans); }
.sh2-inv i { font-style: italic; font-family: var(--serif); color: rgba(243,241,237,.45); }

.sbody { font-family: var(--sans); font-size: .9rem; font-weight: 300; line-height: 1.88; color: #4A4745; }
.sbody-inv { color: rgba(243,241,237,.7); }
.thin-rule { width: 28px; height: 1px; background: var(--rule); margin-bottom: 24px; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE HERO — Unterseiten (dunkel)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-hero {
  background: var(--section-dark); padding: 128px 0 80px;
  position: relative; overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 50% at 20% 100%, rgba(166,50,69,.07) 0%, transparent 60%);
}
.page-hero-label {
  font-family: var(--sans); font-size: .55rem; font-weight: 400;
  letter-spacing: var(--ls-section); text-transform: uppercase;
  color: rgba(243,241,237,.4); display: block; margin-bottom: 16px;
}
.page-hero h1 {
  font-family: var(--sans); font-size: var(--h1-page);
  font-weight: 300; line-height: .93; letter-spacing: -.03em;
  color: var(--cream); margin-bottom: 28px;
}
.page-hero h1 i { font-style: italic; font-family: var(--serif); color: rgba(243,241,237,.48); }
.page-hero-sub {
  font-family: var(--sans); font-size: .88rem; font-weight: 300;
  line-height: 1.88; color: rgba(243,241,237,.72); max-width: 560px;
}
.page-hero-img {
  width: 100%; height: clamp(320px, 55vw, 560px);
  object-fit: cover; object-position: center 15%; display: block;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   INDEX HERO
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#hero {
  background: var(--section-dark); min-height: 100vh; padding-top: 56px;
  display: grid; grid-template-columns: 1.1fr .9fr;
  overflow: hidden; position: relative;
}
.hero-l { display: flex; flex-direction: column; justify-content: center; padding: 60px 56px 60px 80px; position: relative; z-index: 2; }
.hero-r { position: relative; overflow: hidden; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
.hero-r::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(28,28,26,.6) 0%, transparent 55%); }
.hero-loc { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: .62rem; font-weight: 300; letter-spacing: var(--ls-label); color: rgba(243,241,237,.68); margin-bottom: 28px; opacity: 0; animation: heroFade .7s var(--ease) .05s both; }
.hero-loc svg { width: 10px; height: 10px; fill: rgba(243,241,237,.5); }
.hero-h1 { font-family: var(--serif); font-size: var(--h1-hero); font-weight: 300; line-height: .97; letter-spacing: -.01em; color: var(--cream); margin-bottom: 20px; overflow: visible; }
.hero-h1 > span { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero-h1 > span > span { display: block; opacity: 0; animation: heroRise 1s var(--ease) both; }
.hero-h1 > span:nth-child(1) > span { animation-delay: .28s; }
.hero-h1 > span:nth-child(2) > span { animation-delay: .42s; }
.hero-h1 > span:nth-child(3) > span { animation-delay: .56s; font-style: italic; color: rgba(243,241,237,.48); }
.hero-method { font-family: var(--sans); font-size: .7rem; font-weight: 300; letter-spacing: var(--ls-label); color: rgba(243,241,237,.42); margin-bottom: 28px; margin-top: -8px; opacity: 0; animation: heroFade .8s var(--ease) .72s both; }
.hero-facts { display: flex; gap: 0; margin-bottom: 32px; opacity: 0; animation: heroFade .8s var(--ease) .7s both; }
.hfact { padding: 12px 20px 12px 0; margin-right: 20px; border-right: 1px solid rgba(243,241,237,.12); }
.hfact:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hfact-n { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; color: var(--cream); line-height: 1; margin-bottom: 2px; }
.hfact-l { font-family: var(--sans); font-size: .62rem; font-weight: 300; letter-spacing: var(--ls-section); text-transform: uppercase; color: rgba(243,241,237,.6); }

/* Hero form */
.hero-form { border: 1px solid rgba(243,241,237,.12); padding: 28px 32px; opacity: 0; animation: heroFade .9s var(--ease) .85s both; }
.hf-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 300; color: var(--cream); margin-bottom: 4px; }
.hf-sub { font-family: var(--sans); font-size: .62rem; font-weight: 300; letter-spacing: var(--ls-body); color: rgba(243,241,237,.45); margin-bottom: 20px; }
.hf-label { font-family: var(--sans); font-size: .55rem; font-weight: 300; letter-spacing: var(--ls-section); text-transform: uppercase; color: rgba(243,241,237,.45); display: block; margin-bottom: 8px; }
.hf-treats { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 16px; }
.hft { font-family: var(--sans); font-size: .7rem; font-weight: 300; color: rgba(243,241,237,.55); background: transparent; border: 1px solid rgba(243,241,237,.1); padding: 9px 14px; cursor: pointer; display: flex; flex-direction: column; transition: color .25s, border-color .25s, background .25s; }
.hft:hover { border-color: rgba(243,241,237,.28); }
.hft-price { font-family: var(--serif); font-size: .82rem; color: rgba(243,241,237,.58); margin-top: 2px; display: block; }
.hft.on { color: var(--cream); border-color: rgba(243,241,237,.38); background: rgba(243,241,237,.07); }
.hft.on .hft-price { color: var(--cream); }
.hf-dates { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; margin-bottom: 8px; }
.hfd { font-family: var(--sans); font-size: .68rem; font-weight: 300; color: rgba(243,241,237,.68); background: transparent; border: 1px solid rgba(243,241,237,.1); padding: 9px 4px; cursor: pointer; text-align: center; line-height: 1.35; transition: color .22s, border-color .22s, background .22s; }
.hfd span { display: block; font-size: .55rem; letter-spacing: var(--ls-body); opacity: .6; margin-bottom: 1px; }
.hfd.on { color: var(--cream); border-color: rgba(243,241,237,.38); background: rgba(243,241,237,.07); }
.hf-times { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; margin-bottom: 16px; }
.hftm { font-family: var(--sans); font-size: .68rem; font-weight: 300; color: rgba(243,241,237,.68); background: transparent; border: 1px solid rgba(243,241,237,.1); padding: 9px 4px; cursor: pointer; text-align: center; transition: color .22s, border-color .22s, background .22s; }
.hftm.on { color: var(--cream); border-color: rgba(243,241,237,.38); background: rgba(243,241,237,.07); }
.hftm.out { opacity: .2; pointer-events: none; text-decoration: line-through; }
.hf-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.fi { background: rgba(243,241,237,.05); border: 1px solid rgba(243,241,237,.12); color: var(--cream); font-family: var(--sans); font-size: .82rem; font-weight: 300; padding: 11px 14px; outline: none; transition: border-color .3s, background .3s; }
.fi::placeholder { color: rgba(243,241,237,.25); }
.fi:focus { border-color: rgba(243,241,237,.36); background: rgba(243,241,237,.07); }
.hf-returning { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; margin-bottom: 16px; background: rgba(243,241,237,.04); border: 1px solid rgba(243,241,237,.1); cursor: pointer; }
.hf-returning input[type=checkbox] { margin-top: 1px; accent-color: var(--red); }
.hf-ret-t { font-family: var(--sans); font-size: .74rem; font-weight: 400; color: rgba(243,241,237,.75); margin-bottom: 2px; }
.hf-ret-s { font-family: var(--sans); font-size: .62rem; font-weight: 300; color: rgba(243,241,237,.38); }
.submit-btn { width: 100%; background: var(--cream); color: var(--dark); font-family: var(--sans); font-size: .62rem; font-weight: 500; letter-spacing: var(--ls-section); text-transform: uppercase; padding: 15px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: opacity .3s; }
.submit-btn:hover:not(:disabled) { opacity: .82; }
.submit-btn:disabled { opacity: .25; pointer-events: none; }
.hf-disclaimer { font-family: var(--sans); font-size: .62rem; font-weight: 300; color: rgba(243,241,237,.28); margin-top: 10px; line-height: 1.5; }
#confEl { display: none; text-align: center; padding: 32px 0; }
.hfc-ring { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(243,241,237,.18); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.hfc-h { font-family: var(--serif); font-size: 1.4rem; font-weight: 300; color: var(--cream); margin-bottom: 8px; }
.hfc-p { font-family: var(--sans); font-size: .78rem; font-weight: 300; color: rgba(243,241,237,.68); line-height: 1.7; }
.hero-testi { border: 1px solid rgba(243,241,237,.1); padding: 18px 20px; margin-top: 12px; }
.ht-q { font-family: var(--serif); font-size: .92rem; font-style: italic; font-weight: 300; color: rgba(243,241,237,.8); line-height: 1.45; margin-bottom: 8px; }
.ht-who { font-family: var(--sans); font-size: .6rem; font-weight: 300; letter-spacing: var(--ls-body); color: rgba(243,241,237,.4); }
.hero-rating { border: 1px solid rgba(243,241,237,.1); padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
.hr-star { fill: rgba(243,241,237,.65); width: 11px; height: 11px; }
.hr-num { font-family: var(--serif); font-size: 1.1rem; font-weight: 300; color: var(--cream); }
.hr-src { font-family: var(--sans); font-size: .58rem; font-weight: 300; letter-spacing: var(--ls-body); color: rgba(243,241,237,.42); }
.hero-bg-ltr { position: absolute; bottom: -5%; right: 3%; z-index: 0; font-family: var(--serif); font-size: 22vw; font-weight: 300; font-style: italic; color: rgba(243,241,237,.02); line-height: 1; pointer-events: none; user-select: none; }
.hero-doc { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; padding: 14px 18px; border: 1px solid rgba(243,241,237,.1); width: fit-content; opacity: 0; animation: heroFade .7s var(--ease) .15s both; transition: border-color .35s; }
.hero-doc:hover { border-color: rgba(243,241,237,.24); }
.hero-doc-av { width: 40px; height: 40px; border-radius: 50%; background: rgba(243,241,237,.07); border: 1px solid rgba(243,241,237,.12); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: .9rem; color: rgba(243,241,237,.68); flex-shrink: 0; }
.hero-doc-name { font-family: var(--serif); font-size: .92rem; font-weight: 400; color: rgba(243,241,237,.85); margin-bottom: 1px; }
.hero-doc-role { font-family: var(--sans); font-size: .58rem; font-weight: 300; letter-spacing: var(--ls-label); color: rgba(243,241,237,.45); }
.hero-r-bg { position: absolute; inset: 0; z-index: 1; }
.hr-shape { position: absolute; border-radius: 50%; border: 1px solid rgba(243,241,237,.05); }
.hero-photo-caption { position: absolute; bottom: 14px; right: 16px; z-index: 4; font-family: var(--sans); font-size: .55rem; font-weight: 300; letter-spacing: var(--ls-body); color: rgba(243,241,237,.25); pointer-events: none; }

@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn-cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: .58rem; font-weight: 500;
  letter-spacing: var(--ls-section); text-transform: uppercase; text-decoration: none;
  color: #fff; background: var(--red); padding: 15px 32px;
  transition: background .2s, opacity .2s;
}
.btn-cta:hover { background: var(--red-hov); opacity: .9; }

.btn-ink {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: .58rem; font-weight: 400;
  letter-spacing: var(--ls-section); text-transform: uppercase; text-decoration: none;
  color: var(--cream); background: var(--dark); padding: 15px 32px;
  transition: opacity .2s;
}
.btn-ink:hover { opacity: .78; }

.btn-light {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: .58rem; font-weight: 500;
  letter-spacing: var(--ls-section); text-transform: uppercase; text-decoration: none;
  color: var(--dark); background: var(--cream); padding: 15px 32px;
  transition: opacity .2s;
}
.btn-light:hover { opacity: .82; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: .6rem; font-weight: 300;
  letter-spacing: var(--ls-label); text-transform: uppercase; text-decoration: none;
  color: rgba(243,241,237,.58); border: 1px solid rgba(243,241,237,.18); padding: 14px 22px;
  transition: color .25s, border-color .25s;
}
.btn-ghost:hover { color: var(--cream); border-color: rgba(243,241,237,.48); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PILLARS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pillars { display: grid; grid-template-columns: repeat(4,1fr); }
.pill { padding: 40px 32px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background .3s; }
.pill:last-child { border-right: none; }
.pill:hover { background: rgba(44,36,32,.025); }
.pill-ico { width: 20px; height: 20px; stroke: var(--mid); fill: none; stroke-width: 1.5; margin-bottom: 18px; }
.pill-name { font-family: var(--sans); font-size: .9rem; font-weight: 500; color: var(--dark); margin-bottom: 10px; letter-spacing: var(--ls-body); }
.pill-body { font-family: var(--sans); font-size: .84rem; font-weight: 300; line-height: 1.78; color: #4A4745; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NUMBERS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.nums { display: grid; grid-template-columns: repeat(3,1fr); max-width: 960px; margin: 0 auto; padding: 0 64px; }
.nc { padding: 48px 0; text-align: center; border-right: 1px solid rgba(243,241,237,.1); }
.nc:last-child { border-right: none; }
.nc-v { font-family: var(--serif); font-size: 2.6rem; font-weight: 300; color: var(--cream); line-height: 1; margin-bottom: 7px; }
.nc-l { font-family: var(--sans); font-size: .62rem; font-weight: 300; letter-spacing: var(--ls-section); text-transform: uppercase; color: rgba(243,241,237,.42); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DR MAX
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.doc-portrait { height: 520px; position: relative; background: #0E0D0B; overflow: hidden; border: 1px solid rgba(243,241,237,.06); }
.dp-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 40%, rgba(243,241,237,.04) 0%, transparent 65%); }
.dp-initial { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--serif); font-size: 8rem; font-weight: 300; font-style: italic; color: rgba(243,241,237,.06); user-select: none; }
.dp-card { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 28px; border-top: 1px solid rgba(243,241,237,.07); background: rgba(10,9,8,.92); display: flex; gap: 16px; align-items: center; }
.dp-av { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(243,241,237,.14); background: rgba(243,241,237,.06); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: .9rem; color: rgba(243,241,237,.55); flex-shrink: 0; }
.dp-name { font-family: var(--serif); font-size: 1rem; font-weight: 400; color: var(--cream); margin-bottom: 2px; }
.dp-role { font-family: var(--sans); font-size: .64rem; font-weight: 300; letter-spacing: var(--ls-body); text-transform: uppercase; color: rgba(243,241,237,.45); }
.doc-quote { font-family: var(--serif); font-size: 1.4rem; font-weight: 300; font-style: italic; color: rgba(28,28,26,.7); line-height: 1.45; margin-bottom: 26px; padding-left: 22px; border-left: 2px solid var(--red); }
.doc-bio { font-family: var(--sans); font-size: .9rem; font-weight: 300; line-height: 1.88; color: #4A4745; margin-bottom: 26px; }
.doc-ftbl { display: flex; flex-direction: column; gap: 1px; margin-bottom: 28px; }
.dft { display: flex; justify-content: space-between; padding: 12px 18px; background: rgba(44,36,32,.04); border: 1px solid rgba(44,36,32,.06); transition: padding-left .3s; }
.dft:hover { padding-left: 24px; }
.dftk { font-family: var(--sans); font-size: .64rem; font-weight: 300; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--mid); }
.dftv { font-family: var(--serif); font-size: .98rem; font-weight: 300; color: var(--dark); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HOW — STEPS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.how-head { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: end; margin-bottom: 48px; }
.how-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; }
.step { background: var(--cream); padding: 44px 34px; position: relative; overflow: hidden; transition: background .5s var(--ease); }
.step::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background: var(--dark); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.step:hover { background: var(--dark); }
.step:hover::before { transform: scaleX(1); }
.step:hover .sn { color: rgba(243,241,237,.12); }
.step:hover .st { color: var(--cream); }
.step:hover .sb { color: rgba(243,241,237,.7); }
.step:hover .sd { color: rgba(243,241,237,.48); }
.step:hover .sr { background: rgba(243,241,237,.1); }
.sn { font-family: var(--serif); font-size: 3rem; font-weight: 300; color: var(--rule); line-height: 1; margin-bottom: 20px; transition: color .5s; }
.st { font-family: var(--serif); font-size: 1.32rem; font-weight: 400; color: var(--dark); margin-bottom: 10px; transition: color .5s; }
.sb { font-family: var(--sans); font-size: .84rem; font-weight: 300; line-height: 1.78; color: var(--mid); margin-bottom: 18px; transition: color .5s; }
.sr { width: 22px; height: 1px; background: var(--rule); margin-bottom: 10px; transition: background .5s; }
.sd { font-family: var(--sans); font-size: .6rem; font-weight: 300; letter-spacing: var(--ls-section); text-transform: uppercase; color: var(--mid); transition: color .5s; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TESTIMONIALS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.proof-head { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: end; margin-bottom: 48px; }
.proof-visual { position: relative; height: 420px; overflow: hidden; margin-bottom: 1px; }
.proof-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.proof-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,9,8,.82) 0%, rgba(10,9,8,.52) 50%, rgba(10,9,8,.18) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 48px 56px; }
.tcards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; }
.tcard { background: var(--cream); padding: 36px 32px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.tcard:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(28,28,26,.06); }
.tc-q { font-family: var(--serif); font-size: 1.06rem; font-style: italic; font-weight: 300; color: var(--dark); line-height: 1.5; margin-bottom: 20px; }
.tc-bar { width: 18px; height: 1px; background: var(--rule); margin-bottom: 14px; }
.tc-name { font-family: var(--sans); font-size: .74rem; font-weight: 500; letter-spacing: var(--ls-body); color: var(--dark); margin-bottom: 2px; }
.tc-meta { font-family: var(--sans); font-size: .66rem; font-weight: 300; letter-spacing: var(--ls-body); color: var(--mid); }
.tcard-photo { padding: 0 !important; overflow: hidden; }
.tc-portrait { position: relative; height: 240px; overflow: hidden; }
.tc-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .6s var(--ease); }
.tcard-photo:hover .tc-portrait img { transform: scale(1.04); }
.tc-portrait-label { position: absolute; bottom: 12px; left: 16px; font-family: var(--sans); font-size: .58rem; font-weight: 300; letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(243,241,237,.7); background: rgba(10,9,8,.42); padding: 5px 10px; backdrop-filter: blur(4px); }
.tc-body { padding: 28px; }
.tcard:not(.tcard-photo) .tc-body { padding: 36px 32px; }
.rating-row { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.stars { display: flex; gap: 3px; }
.star { width: 13px; height: 13px; fill: var(--dark); }
.rating-n { font-family: var(--serif); font-size: 1.5rem; font-weight: 300; color: var(--dark); }
.rating-s { font-family: var(--sans); font-size: .64rem; font-weight: 300; letter-spacing: var(--ls-body); color: var(--mid); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROCESS / TIMELINE / FACTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.proc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 88px; align-items: start; }
.tl { padding-left: 18px; border-left: 1px solid var(--rule); }
.tli { padding: 0 0 30px 24px; position: relative; }
.tli:last-child { padding-bottom: 0; }
.tli-dot { position: absolute; left: -4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--cream); border: 1px solid var(--dark); transition: background .3s; }
.tli:hover .tli-dot { background: var(--dark); }
.tli-tag { font-family: var(--sans); font-size: .56rem; font-weight: 300; letter-spacing: var(--ls-section); text-transform: uppercase; color: var(--mid); margin-bottom: 4px; }
.tli-t { font-family: var(--serif); font-size: .98rem; font-weight: 400; color: var(--dark); margin-bottom: 5px; }
.tli-b { font-family: var(--sans); font-size: .84rem; font-weight: 300; line-height: 1.72; color: #4A4745; }
.fact-tbl, .fact-table { display: flex; flex-direction: column; gap: 1px; margin-bottom: 28px; }
.ftr, .fact-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; background: var(--cream); transition: padding-left .3s, background .3s; }
.ftr:nth-child(even), .fact-row:nth-child(even) { background: var(--off); }
.ftr:hover, .fact-row:hover { padding-left: 24px; background: rgba(44,36,32,.06) !important; }
.ftk, .fact-k { font-family: var(--sans); font-size: .66rem; font-weight: 300; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--mid); }
.ftv, .fact-v { font-family: var(--sans); font-size: .92rem; font-weight: 300; color: var(--dark); letter-spacing: var(--ls-body); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FAQ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.faq-grid { display: grid; grid-template-columns: 1fr 1.9fr; gap: 88px; }
.faq-l { position: sticky; top: 72px; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:first-child { border-top: 1px solid var(--rule); }
.faq-q { width: 100%; background: none; border: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: left; transition: opacity .25s; }
.faq-q:hover { opacity: .7; }
.faq-qt { font-family: var(--sans); font-size: .9rem; font-weight: 400; color: var(--dark); line-height: 1.4; letter-spacing: var(--ls-body); }
.faq-tog { width: 17px; height: 17px; flex-shrink: 0; border: 1px solid var(--rule); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--mid); transition: all .35s var(--ease); }
.faq-item.open .faq-tog { background: var(--dark); border-color: var(--dark); color: var(--cream); transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.faq-item.open .faq-a { max-height: 280px; }
.faq-ai { padding-bottom: 18px; font-family: var(--sans); font-size: .88rem; font-weight: 300; line-height: 1.88; color: var(--mid); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FINAL CTA
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.final-inner { text-align: center; }
.final-h2 { font-family: var(--sans); font-size: clamp(3.4rem, 7vw, 8rem); font-weight: 200; line-height: .9; letter-spacing: -.04em; color: var(--cream); margin-bottom: 20px; }
.final-h2 i { display: block; font-style: italic; font-family: var(--serif); color: rgba(243,241,237,.45); }
.final-sub { font-family: var(--sans); font-size: .9rem; font-weight: 300; color: rgba(243,241,237,.68); max-width: 400px; margin: 0 auto 40px; line-height: 1.85; }
.final-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.principle-card { padding: 28px; background: rgba(44,36,32,.04); border: 1px solid var(--rule); margin-bottom: 1px; }
.principle-num { font-family: var(--serif); font-size: .82rem; font-weight: 300; color: var(--mid); margin-bottom: 8px; }
.principle-title { font-family: var(--serif); font-size: 1rem; font-weight: 400; color: var(--dark); margin-bottom: 10px; }
.leistungen-overview { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; }
.lo-card { padding: 36px 32px; background: var(--cream); text-decoration: none; color: var(--dark); display: flex; flex-direction: column; border: 1px solid var(--rule); transition: background .3s, border-color .3s; }
.lo-card:hover { background: var(--dark); border-color: var(--dark); }
.lo-card:hover .lo-num { color: rgba(243,241,237,.15); }
.lo-card:hover .lo-name { color: var(--cream); }
.lo-card:hover .lo-desc { color: rgba(243,241,237,.58); }
.lo-card:hover .lo-more { color: rgba(243,241,237,.68); }
.lo-num { font-family: var(--serif); font-size: 2rem; font-weight: 300; color: rgba(28,28,26,.12); margin-bottom: 12px; transition: color .3s; }
.lo-name { font-family: var(--serif); font-size: 1.32rem; font-weight: 400; color: var(--dark); margin-bottom: 12px; transition: color .3s; }
.lo-desc { font-family: var(--sans); font-size: .78rem; font-weight: 300; line-height: 1.72; color: var(--mid); flex: 1; transition: color .3s; }
.lo-more { font-family: var(--sans); font-size: .6rem; font-weight: 400; letter-spacing: var(--ls-body); text-transform: uppercase; color: var(--mid); margin-top: 20px; display: flex; align-items: center; gap: 6px; transition: color .3s; }

/* Price list */
.pl-wrap { padding: 0 0 80px; }
.pl-cluster { padding-top: 40px; }
.pl-job-head { font-family: var(--sans); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 300; letter-spacing: -.01em; color: var(--dark); margin-bottom: 4px; }
.pl-treat-label { font-family: var(--sans); font-size: .58rem; font-weight: 300; letter-spacing: var(--ls-section); text-transform: uppercase; color: var(--mid); margin-bottom: 24px; display: block; }
.pl-row { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--rule); transition: padding-left .3s, background .3s; }
.pl-row:first-of-type { border-top: 1px solid var(--rule); }
.pl-row:hover { padding-left: 24px; background: rgba(44,36,32,.03); }
.pl-name { font-family: var(--sans); font-size: .88rem; font-weight: 300; color: var(--dark); letter-spacing: var(--ls-body); }
.pl-price { font-family: var(--sans); font-size: .78rem; font-weight: 300; color: var(--mid); white-space: nowrap; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LEGAL + FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.legal-note { background: var(--off); border-top: 1px solid var(--rule); padding: 20px 0; }
.legal-note p { font-family: var(--sans); font-size: .72rem; font-weight: 300; line-height: 1.65; color: var(--mid); max-width: 1280px; margin: 0 auto; padding: 0 64px; }
.legal-note a { color: var(--dark); text-decoration: none; }
footer { background: var(--off); border-top: 1px solid var(--rule); padding: 40px 0; }
.foot-row { max-width: 1280px; margin: 0 auto; padding: 0 64px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.f-logo { font-family: var(--serif); font-size: .92rem; font-weight: 400; letter-spacing: var(--ls-logo); text-transform: uppercase; color: rgba(28,28,26,.55); }
.f-info { font-family: var(--sans); font-size: .66rem; font-weight: 300; letter-spacing: var(--ls-body); color: var(--mid); }
.f-info a { color: inherit; text-decoration: none; transition: color .25s; }
.f-info a:hover { color: var(--dark); }
.f-leg { display: flex; gap: 18px; }
.f-leg a, footer a { font-family: var(--sans); font-size: .6rem; font-weight: 300; color: rgba(28,28,26,.38); text-decoration: none; transition: color .25s; }
.f-leg a:hover, footer a:hover { color: var(--dark); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#mbar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--cream); border-top: 1px solid var(--rule); padding: 8px 16px; align-items: stretch; }
.mbar-full { flex: 1; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--red); color: #fff; font-family: var(--sans); font-size: .6rem; font-weight: 500; letter-spacing: var(--ls-section); text-transform: uppercase; text-decoration: none; transition: background .25s; }
.mbar-full:hover { background: var(--red-hov); }
.mbar-b { font-family: var(--sans); font-size: .6rem; font-weight: 400; letter-spacing: var(--ls-section); text-transform: uppercase; text-decoration: none; color: var(--dark); background: var(--cream); padding: 10px 18px; white-space: nowrap; transition: opacity .25s; }
.mbar-b:hover { opacity: .72; }
.mbar-t { font-family: var(--sans); font-size: .62rem; font-weight: 300; color: var(--mid); flex: 1; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DESKTOP CTA BAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#desktop-cta-bar { position: fixed; bottom: 28px; right: 28px; z-index: 200; display: none; align-items: stretch; box-shadow: 0 4px 24px rgba(28,28,26,.16); }
.desktop-book-btn { display: flex; align-items: center; gap: 8px; background: var(--red); color: #fff; text-decoration: none; font-family: var(--sans); font-size: .6rem; font-weight: 500; letter-spacing: var(--ls-section); text-transform: uppercase; padding: 0 22px; height: 48px; white-space: nowrap; border-radius: 2px 0 0 2px; transition: background .25s; }
.desktop-book-btn:hover { background: var(--red-hov); }
#whatsapp-btn.wa-neg { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #fff; border-left: 1px solid rgba(166,50,69,.12); border-radius: 0 2px 2px 0; text-decoration: none; transition: background .25s; }
#whatsapp-btn.wa-neg svg { fill: var(--red); }
#whatsapp-btn.wa-neg:hover { background: var(--cream); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SCROLL ANIMATIONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-r] { opacity: 1; }
body.anim-ready [data-r="up"]   { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
body.anim-ready [data-r="fade"] { opacity: 0; transition: opacity 1s ease; }
body.anim-ready [data-r="left"] { opacity: 0; transform: translateX(-20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-r].v { opacity: 1 !important; transform: none !important; }
[data-d="1"] { transition-delay: .1s !important; }
[data-d="2"] { transition-delay: .2s !important; }
[data-d="3"] { transition-delay: .3s !important; }
[data-d="4"] { transition-delay: .4s !important; }
[data-d="5"] { transition-delay: .5s !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAV DROPDOWN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.nav-dropdown { position: relative; }
.nav-dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 220px; z-index: 400; display: none; flex-direction: column; padding-top: 8px; }
.nav-dropdown-menu.visible { display: flex; }
.nav-dropdown-inner { display: flex; flex-direction: column; background: var(--section-dark); border: 1px solid rgba(243,241,237,.1); box-shadow: 0 8px 32px rgba(0,0,0,.38); }
.nav-dropdown-menu a { display: block; font-family: var(--sans); font-size: .68rem; font-weight: 300; letter-spacing: var(--ls-label); color: rgba(243,241,237,.58); text-decoration: none; padding: 14px 22px; border-bottom: 1px solid rgba(243,241,237,.06); transition: color .22s, padding-left .22s; white-space: nowrap; }
.nav-dropdown-menu a:last-child { border-bottom: none; }
.nav-dropdown-menu a:hover { color: var(--cream); padding-left: 28px; }

/* Cookie */
#cookie-banner { position: fixed; bottom: 72px; left: 16px; right: 16px; z-index: 9000; background: var(--section-dark); color: rgba(243,241,237,.72); padding: 16px 20px; font-family: var(--sans); font-size: .68rem; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .4s; pointer-events: none; border-radius: 2px; }
#cookie-banner.visible { opacity: 1; transform: none; pointer-events: auto; }
#cookie-banner.dismissed { opacity: 0; transform: translateY(12px); }
#cookie-banner a { color: rgba(243,241,237,.68); }
.cookie-btn { font-family: var(--sans); font-size: .6rem; font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; border: none; padding: 8px 14px; cursor: pointer; transition: opacity .2s; border-radius: 1px; }
#cookie-accept { background: var(--red); color: #fff; }
#cookie-decline { background: transparent; color: rgba(243,241,237,.42); }

/* Kontakt */
#dateWrap { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.hf-confirm { display: none; text-align: center; padding: 32px 0; }
.hfc-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(243,241,237,.08); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hfc-call { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: .72rem; font-weight: 300; letter-spacing: var(--ls-label); color: rgba(243,241,237,.62); text-decoration: none; transition: color .3s; }
.hfc-call:hover { color: var(--cream); }
.hfc-note { font-family: var(--sans); font-size: .62rem; font-weight: 300; letter-spacing: var(--ls-body); color: rgba(243,241,237,.26); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1025px) {
  #desktop-cta-bar { display: flex; }
  #mbar { display: none !important; }
  #cookie-banner { left: auto; right: 28px; max-width: 420px; bottom: 88px; }
}

@media (max-width: 1024px) {
  [data-r], [data-r="up"], [data-r="fade"], [data-r="left"] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-h1 > span > span { opacity: 1 !important; transform: none !important; animation: none !important; }
  #hero { grid-template-columns: 1fr; display: flex !important; flex-direction: column; min-height: unset; }
  .hero-r { display: block !important; position: relative !important; inset: unset !important; height: 72vw; min-height: 320px; max-height: 520px; order: -1; }
  .hero-r::after { display: none !important; }
  .hero-l { position: relative !important; z-index: 1; padding: 36px 24px 48px; order: 0; }
  .hero-photo { object-position: center 20%; }
  .page-hero { padding: 96px 0 60px; }
  .w { padding: 0 28px; }
  .two-col-grid, .doc-grid, .how-head, .proof-head, .proc-grid, .faq-grid { grid-template-columns: 1fr; gap: 40px; }
  .how-steps, .tcards { grid-template-columns: 1fr; }
  .leistungen-overview { grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .pill:nth-child(2n) { border-right: none; }
  .pill { border-bottom: 1px solid var(--rule); }
  .nums { grid-template-columns: 1fr 1fr; padding: 0 28px; }
  .nc:nth-child(2) { border-right: none; }
  .faq-l { position: static; }
  .foot-row { padding: 0 28px; flex-direction: column; align-items: flex-start; }
  .legal-note p { padding: 0 28px; }
  .sec { padding: var(--sec-pad-m) 0; }
  #mbar { display: flex !important; }
  body { padding-bottom: 62px; }
  #mobileMenuBtn { display: flex; }
  .nav-meta { display: none; }
  .nav-cta { display: none; }
  .nav-row { padding: 0 20px; }
}

@media (max-width: 640px) {
  .w { padding: 0 20px; }
  .pillars, .leistungen-overview { grid-template-columns: 1fr; }
  .pill { border-right: none; }
  .nums { padding: 0 20px; }
  .hero-l { padding: 32px 20px 40px; }
  .foot-row, .legal-note p { padding-left: 20px; padding-right: 20px; }
  .sec { padding: var(--sec-pad-s) 0; }
  .hf-dates, .hf-times { grid-template-columns: repeat(3,1fr); }
  .hfd, .hftm { padding: 13px 4px; font-size: .72rem; }
  .hft { padding: 12px 14px; font-size: .75rem; }
  .fi { padding: 15px 14px; font-size: .88rem; }
  .hf-contact { grid-template-columns: 1fr; }
  .submit-btn { padding: 18px; font-size: .68rem; }
  .doc-portrait { height: 320px; }
  .pl-row { padding: 10px 8px; flex-wrap: wrap; gap: 4px; }
  .pl-row > div:first-child { flex: 1; }
  .pl-price { font-size: .76rem !important; flex-shrink: 0; }
  .pl-name { font-size: .78rem !important; }
  .pl-job-head { font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important; }
  .pl-cluster { padding-top: 24px !important; }
  .proof-visual { height: 260px; }
  .proof-overlay { padding: 24px 20px; }
  .tc-portrait { height: 200px; }
  .faq-grid { gap: 32px; }
}