/* ================================================================
   ARES HAIRCLINIC — Global CSS
   1:1 nach OC Hairclinic: Figtree, Warm Off-White, Teal
   ================================================================ */
:root {
  --bg: #F6F2EB;
  --bg-alt: #EFEAE0;
  --bg-warm: #E8DDCA;
  --bg-card: #F4EFE6;
  --white: #FFFFFF;
  --ink: #111111;
  --ink-2: #2A2A2A;
  --ink-3: #5D5D5D;
  --ink-4: #8A8A8A;
  --line: #E6E1D8;
  --line-2: #D7D2C8;
  --teal: #1C8394;
  --teal-2: #2F97A7;
  --teal-3: #4EB8C9;
  --teal-tint: #EAF6F8;
  --dark: #0E0E0E;
  --dark-2: #1A1A1A;
  --dark-3: #2A2A2A;
  --dark-mute: #B7B7B7;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --container: 1200px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: hidden; }
body {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { font-family: 'Figtree', sans-serif; font-weight: 600; letter-spacing: -.015em; line-height: 1.15; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(2.4rem,5vw,4rem); line-height: 1.05; letter-spacing: -.02em; }
h2 { font-size: clamp(2rem,3.6vw,3rem); line-height: 1.1; letter-spacing: -.02em; }
h3 { font-size: clamp(1.25rem,2vw,1.6rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; color: var(--ink-2); line-height: 1.65; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(64px,8vw,120px) 0; }

.eyebrow {
  display: inline-block;
  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 18px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; font-size: .95rem; font-weight: 500;
  border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; transition: all .3s var(--ease); white-space: nowrap; text-decoration: none;
}
.btn-primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-2); border-color: var(--teal-2); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-dark:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-gray-dark { background: #5A5A5A; color: #fff; border-color: #5A5A5A; }
.btn-gray-dark:hover { background: #6D6D6D; border-color: #6D6D6D; }

/* Reveal */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].vis { opacity: 1; transform: translateY(0); }

/* Section heads */
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.sec-head .eyebrow { margin-bottom: 14px; }
.sec-head h2 { margin-bottom: 16px; }
.sec-head p { color: var(--ink-3); font-size: 1.05rem; }

/* Focus */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* ================================================================
   HERO
   ================================================================ */
.hero { position: relative; min-height: 640px; display: flex; align-items: center; padding: 80px 0 100px; color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(14,14,14,.72) 0%,rgba(14,14,14,.55) 50%,rgba(14,14,14,.25) 100%); }
.hero .container { position: relative; z-index: 1; }
.hero-inner { max-width: 640px; }
.hero-eyebrow { color: var(--teal-3); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; display: inline-block; }
.hero h1 { color: #fff; font-size: clamp(2.4rem,5.4vw,4.4rem); line-height: 1.05; letter-spacing: -.025em; font-weight: 600; margin-bottom: 24px; }
.hero-lead { color: rgba(255,255,255,.88); font-size: 1.15rem; line-height: 1.6; margin-bottom: 36px; max-width: 520px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.hero-trust { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; color: rgba(255,255,255,.72); font-size: .9rem; }
.hero-trust strong { color: #fff; font-weight: 600; }
.hero-trust-dot { width: 4px; height: 4px; background: var(--teal-3); border-radius: 50%; }

/* ================================================================
   FEATURES
   ================================================================ */
.features { background: var(--bg); padding: 100px 0; }
.features-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; max-width: 1080px; margin: 0 auto; }
.feat { text-align: center; padding: 8px; }
.feat-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--teal-tint); color: var(--teal); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.feat h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; }
.feat p { font-size: .92rem; color: var(--ink-3); margin: 0; line-height: 1.55; }
@media(max-width:820px) { .features-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; } }
@media(max-width:480px) { .features-grid { grid-template-columns: 1fr; max-width: 340px; } }

/* ================================================================
   VIDEO-ANALYSE SPLIT
   ================================================================ */
.analysis { background: var(--bg-alt); padding: 100px 0; }
.analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.analysis-media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.va-tile { aspect-ratio: 1/1; border-radius: 12px; background: var(--dark); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .4s var(--ease); }
.va-tile:hover { transform: translateY(-3px); }
.va-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.va-tile-highlight { background: var(--teal-tint); color: var(--teal); }
.va-tile .play { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; color: #fff; }
.va-tile-highlight .play { background: rgba(28,131,148,.15); border-color: var(--teal); color: var(--teal); }
.analysis-list { list-style: none; padding: 0; margin: 24px 0 32px; }
.analysis-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.analysis-list li:last-child { border-bottom: none; }
.analysis-list li strong { color: var(--ink); font-weight: 600; }
.analysis-list svg { color: var(--teal); flex-shrink: 0; margin-top: 4px; }
@media(max-width:900px) { .analysis-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ================================================================
   BRIDGE
   ================================================================ */
.bridge { background: var(--bg); padding: 80px 0; text-align: center; }
.bridge-inner { max-width: 760px; margin: 0 auto; }
.bridge h2 { font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 500; line-height: 1.3; }
.bridge h2 em { color: var(--teal); font-style: normal; font-weight: 600; }

/* ================================================================
   CLINIC
   ================================================================ */
.clinic { background: var(--white); padding: 100px 0; }
.clinic-top { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; margin-bottom: 60px; }
.clinic-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-radius: 16px; overflow: hidden; }
.clinic-mosaic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.clinic-cards { background: var(--bg-warm); padding: 48px; border-radius: 16px; }
.clinic-cards-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.clinic-card { background: var(--white); padding: 24px; border-radius: 10px; }
.clinic-card-ico { color: var(--teal); margin-bottom: 14px; }
.clinic-card h4 { font-size: .98rem; margin-bottom: 8px; font-weight: 600; }
.clinic-card p { font-size: .86rem; color: var(--ink-3); margin: 0; }
@media(max-width:900px) { .clinic-top { grid-template-columns: 1fr; } .clinic-cards-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:560px) { .clinic-cards { padding: 28px; } .clinic-cards-grid { grid-template-columns: 1fr; } }

/* ================================================================
   PROCESS
   ================================================================ */
.process { background: var(--bg); padding: 100px 0; }
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; max-width: 1080px; margin: 0 auto 40px; }
.step { text-align: center; }
.step-ico { width: 76px; height: 76px; border-radius: 50%; border: 1.5px solid var(--teal); color: var(--teal); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; background: var(--white); font-weight: 600; font-size: 1.1rem; }
.step-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.step-dur { font-size: .78rem; color: var(--teal); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.step p { font-size: .9rem; color: var(--ink-3); margin: 0; line-height: 1.55; }
.process-cta { text-align: center; margin-top: 40px; }
@media(max-width:820px) { .steps { grid-template-columns: 1fr 1fr; gap: 40px 20px; } }
@media(max-width:460px) { .steps { grid-template-columns: 1fr; max-width: 320px; } }

/* ================================================================
   DARK SECTION
   ================================================================ */
.dark-section { background: var(--dark); color: #fff; padding: 100px 0; }
.dark-section .sec-head h2 { color: #fff; }
.dark-section .sec-head p { color: var(--dark-mute); }
.dark-section .eyebrow { color: var(--teal-3); }
.sorgen { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; max-width: 1080px; margin: 0 auto 40px; }
.sorge-card { background: var(--dark-2); border: 1px solid var(--dark-3); border-radius: 12px; overflow: hidden; transition: transform .4s var(--ease); }
.sorge-card:hover { transform: translateY(-4px); }
.sorge-video { aspect-ratio: 16/10; background: #000; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sorge-video img { width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.sorge-play { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.15); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; color: #fff; }
.sorge-body { padding: 24px; }
.sorge-label { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-3); margin-bottom: 10px; }
.sorge-body h3 { color: #fff; font-size: 1.15rem; margin-bottom: 10px; }
.sorge-body p { color: var(--dark-mute); font-size: .9rem; margin: 0; }
.dark-cta { text-align: center; margin-top: 40px; }
@media(max-width:820px) { .sorgen { grid-template-columns: 1fr; max-width: 480px; } }

/* ================================================================
   STATS
   ================================================================ */
.stats { background: var(--bg); padding: 70px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; max-width: 1080px; margin: 0 auto; text-align: center; }
.stat { padding: 0 20px; position: relative; }
.stat + .stat::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--line-2); }
.stat-n { font-size: clamp(2.2rem,3.6vw,3rem); font-weight: 600; color: var(--ink); letter-spacing: -.02em; line-height: 1; margin-bottom: 8px; }
.stat-l { font-size: .88rem; color: var(--ink-3); }
@media(max-width:640px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 32px 12px; } .stat + .stat::before { display: none; } }

/* ================================================================
   PRICING
   ================================================================ */
.pricing { background: var(--bg); padding: 100px 0; }
.plans { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; max-width: 1080px; margin: 0 auto; }
.plan { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px; position: relative; display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.plan:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.06); }
.plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--teal); color: #fff; padding: 4px 14px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.plan-highlight { border-color: var(--teal); border-width: 1.5px; }
.plan h3 { font-size: 1.2rem; margin-bottom: 6px; }
.plan-grafts { font-size: .85rem; color: var(--ink-4); margin-bottom: 24px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.plan-price-from { font-size: .85rem; color: var(--ink-3); }
.plan-price-num { font-size: 2.4rem; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.plan-price-per { font-size: .85rem; color: var(--ink-3); }
.plan-once { font-size: .88rem; color: var(--ink-3); margin-bottom: 20px; }
.plan-once strong { color: var(--ink); font-weight: 600; }
.plan-desc { font-size: .9rem; color: var(--ink-3); margin-bottom: 24px; flex: 1; }
.plan .btn { width: 100%; }
.pricing-note { text-align: center; margin-top: 40px; font-size: .85rem; color: var(--ink-4); max-width: 640px; margin-left: auto; margin-right: auto; }
@media(max-width:900px) { .plans { grid-template-columns: 1fr; max-width: 420px; } }

/* ================================================================
   FAQ
   ================================================================ */
.faq { background: var(--white); padding: 100px 0; }
.faq-inner { display: grid; grid-template-columns: .9fr 1.4fr; gap: 64px; }
.faq-side p { color: var(--ink-3); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; display: flex; align-items: center; gap: 18px; padding: 22px 0; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-num { font-size: .85rem; color: var(--teal); font-weight: 600; min-width: 24px; }
.faq-q { flex: 1; font-size: 1.05rem; font-weight: 500; color: var(--ink); }
.faq-icon { color: var(--ink-4); transition: transform .3s var(--ease); }
.faq-item[open] .faq-icon { transform: rotate(180deg); color: var(--teal); }
.faq-a { padding: 0 0 24px 42px; }
.faq-a p { margin: 0; color: var(--ink-3); line-height: 1.65; }
@media(max-width:900px) { .faq-inner { grid-template-columns: 1fr; gap: 40px; } .faq-a { padding-left: 0; } }

/* ================================================================
   CTA BAND
   ================================================================ */
.cta-band { background: #5A5A5A; color: #fff; padding: 80px 0; text-align: center; }
.cta-band .eyebrow { color: var(--teal-3); margin-bottom: 14px; }
.cta-band h2 { color: #fff; margin-bottom: 16px; }
.cta-band p { color: rgba(255,255,255,.8); max-width: 560px; margin: 0 auto 32px; font-size: 1.05rem; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.cta-trust { color: rgba(255,255,255,.65); font-size: .88rem; display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ================================================================
   LEGAL PAGES
   ================================================================ */
.legal { padding: 80px 0; }
.legal-content { max-width: 760px; margin: 0 auto; }
.legal-content h1 { font-size: 2rem; margin-bottom: 32px; }
.legal-content h2 { font-size: 1.4rem; margin-top: 40px; margin-bottom: 16px; }
.legal-content p, .legal-content li { color: var(--ink-3); line-height: 1.7; }
.legal-content a { color: var(--teal); text-decoration: underline; }