/* ─────────────────────────────────────────────────────────────
   The Chiropractor Wien — design system
   One set of classes used on every page. Change here, not inline.
   ───────────────────────────────────────────────────────────── */

/* Themes — RGB triplets so Tailwind opacity modifiers (bg-paper/95) keep working.
   Default (no data-theme): Sand (#D3D1C5 / #F9F8F2 / #71726D).
   data-theme="sky": Blau (#00A6F4 / #E5E7EB / #FFFFFF). data-theme="rose": Rosé (#FF2056 / #E4E4E7 / #FFFFFF).
   Roles: paper = page, sand = panels, blush = one tinted section, line = rules,
   ink/muted = text, accent = small accent text (darker for contrast),
   brand = colour bands, on-brand = text on bands, brand-soft = secondary text on bands,
   btn = primary buttons, on-btn = button text. */
:root[data-theme="sky"] {
  --c-paper: 255 255 255; --c-sand: 243 244 246; --c-blush: 238 248 254; --c-line: 229 231 235;
  --c-ink: 17 24 39; --c-muted: 75 85 99;
  --c-accent: 3 105 161; --c-accent-deep: 7 89 133; --c-accent-soft: 224 242 254;
  --c-brand: 0 166 244; --c-brand-line: 92 198 248; --c-brand-soft: 224 242 254; --c-on-brand: 255 255 255;
  --c-btn: 0 166 244; --c-btn-deep: 0 150 222; --c-on-btn: 255 255 255;
}
:root[data-theme="rose"] {
  --c-paper: 255 255 255; --c-sand: 244 244 245; --c-blush: 255 241 243; --c-line: 228 228 231;
  --c-ink: 24 24 27; --c-muted: 82 82 91;
  --c-accent: 199 0 54; --c-accent-deep: 165 0 54; --c-accent-soft: 255 228 230;
  --c-brand: 255 32 86; --c-brand-line: 255 122 151; --c-brand-soft: 255 228 230; --c-on-brand: 255 255 255;
  --c-btn: 255 32 86; --c-btn-deep: 230 0 74; --c-on-btn: 255 255 255;
}
/* Sand: the beige band is too light for white text, so bands carry dark text
   and buttons use the warm grey (#71726D, 4.6:1 with white text). */
:root {
  --c-paper: 249 248 242; --c-sand: 240 238 230; --c-blush: 236 234 224; --c-line: 211 209 197;
  --c-ink: 42 42 38; --c-muted: 98 99 94;
  --c-accent: 88 89 84; --c-accent-deep: 62 63 59; --c-accent-soft: 236 234 224;
  --c-brand: 211 209 197; --c-brand-line: 176 174 161; --c-brand-soft: 88 89 84; --c-on-brand: 42 42 38;
  --c-btn: 113 114 109; --c-btn-deep: 88 89 84; --c-on-btn: 255 255 255;
}
:root {
  color-scheme: light;
  --paper: rgb(var(--c-paper)); --sand: rgb(var(--c-sand)); --blush: rgb(var(--c-blush)); --line: rgb(var(--c-line));
  --ink: rgb(var(--c-ink)); --muted: rgb(var(--c-muted));
  --bronze: rgb(var(--c-accent)); --bronze-deep: rgb(var(--c-accent-deep));
  --lemon: rgb(var(--c-btn)); --lemon-deep: rgb(var(--c-btn-deep)); --on-btn: rgb(var(--c-on-btn));
  --band: rgb(var(--c-brand)); --band-soft: rgb(var(--c-brand-soft)); --on-band: rgb(var(--c-on-brand));
  --ease: cubic-bezier(.2,.7,.2,1);
  --hdr-h: 5.75rem;
  /* the house photo grade: every photo gets the same clean, neutral tone, so stock shots read as one series */
  --grade: saturate(.82) contrast(1.02) brightness(1.02);
}
@media (min-width: 1024px) { :root { --hdr-h: 7rem; } }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 1rem); }
body { background: var(--paper); color: var(--ink); font-family: Archivo, system-ui, sans-serif; font-size: 17px; line-height: 1.6; font-variation-settings: "wdth" 100; -webkit-font-smoothing: antialiased; }
body:not(.has-hero) main { padding-top: var(--hdr-h); }
::selection { background: var(--lemon); color: var(--on-btn); }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

/* Layout */
.wrap { max-width: 80rem; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 640px) { .wrap { padding-inline: 32px; } }
.sec { padding-block: 5.5rem; }
@media (min-width: 1024px) { .sec { padding-block: 8.5rem; } }
.sec-sand { background: var(--sand); }
.sec-blush { background: var(--blush); }
.sec-night { background: var(--band); color: var(--on-band); }

/* Type scale (1.25 minor third, expanded Archivo for display) */
.t-hero { font-variation-settings: "wdth" 115; font-weight: 500; font-size: clamp(2.35rem, 5.2vw, 4.9rem); line-height: 1.02; letter-spacing: -0.025em; text-wrap: balance; }
.t-h1 { font-variation-settings: "wdth" 115; font-weight: 500; font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.04; letter-spacing: -0.022em; text-wrap: balance; }
.t-h2 { font-variation-settings: "wdth" 112; font-weight: 500; font-size: clamp(1.85rem, 3vw, 2.85rem); line-height: 1.1; letter-spacing: -0.018em; text-wrap: balance; }
.t-h3 { font-variation-settings: "wdth" 108; font-weight: 600; font-size: 1.28rem; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.t-lead { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.t-body { font-size: 1.04rem; line-height: 1.8; color: var(--muted); max-width: 64ch; text-wrap: pretty; }
.t-small { font-size: .95rem; line-height: 1.7; color: var(--muted); }
.t-name { font-size: 1rem; font-weight: 600; color: var(--bronze); }
.t-quote { font-family: Newsreader, Georgia, serif; font-style: italic; font-weight: 300; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.sec-night .t-body, .sec-night .t-small { color: rgb(var(--c-on-brand) / .88); }
.sec-night .t-lead { color: var(--on-band); }
.sec-night .t-name { color: var(--on-band); }
.num { font-variant-numeric: lining-nums tabular-nums; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; height: 3.3rem; padding: 0 1.7rem; border-radius: 3px; font-weight: 600; font-size: .97rem; letter-spacing: .005em; transition: background-color .35s var(--ease), color .35s, border-color .35s; white-space: nowrap; }
.btn svg { transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { background: var(--lemon); color: var(--on-btn); }
.btn-primary:hover { background: var(--lemon-deep); }
.btn-outline { border: 1px solid var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }
.btn-light { background: #FFFFFF; color: var(--ink); }
.btn-light:hover { background: #fff; }
.btn-ghost-light { border: 1px solid rgba(255,255,255,.45); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.link { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: .3rem; transition: border-color .35s, gap .35s var(--ease); }
.link:hover { border-color: var(--ink); gap: .85rem; }
.sec-night .link { color: var(--on-band); border-color: rgb(var(--c-on-brand) / .5); }
.sec-night .link:hover { border-color: var(--on-band); }

/* FAQ accordion (native <details>, the + turns into − when open) */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.6rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 1.1rem; height: 1.1rem; background:
  linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
  linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform .35s var(--ease), background-size .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(180deg); background-size: 100% 1.5px, 1.5px 0; }
.faq summary:hover .t-h3 { color: var(--bronze); }
.faq-body { display: grid; gap: 1rem; padding-bottom: 2rem; max-width: 64ch; color: var(--muted); line-height: 1.8; }
.faq strong, .bio strong { color: var(--ink); font-weight: 600; }

/* Cookie consent (bottom-right card; full width on phones) */
.consent { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(27rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--paper); color: var(--ink); border-radius: 6px; padding: 1.5rem; box-shadow: 0 30px 70px -20px rgba(0,0,0,.4), 0 0 0 1px var(--line); opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.consent.is-open { opacity: 1; transform: none; }
.consent-msg { font-size: .9rem; line-height: 1.6; color: var(--muted); }
.consent-cat { border-top: 1px solid var(--line); }
.consent-cat:last-child { border-bottom: 1px solid var(--line); }
.consent-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.1rem; }
.consent-more { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .95rem; }
.consent-more::after { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.consent-more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.consent-always { font-size: .82rem; font-weight: 600; color: var(--bronze); }
.consent-desc { font-size: .85rem; line-height: 1.6; color: var(--muted); padding-bottom: 1rem; }
.consent-switch { position: relative; flex: none; width: 2.6rem; height: 1.5rem; }
.consent-switch input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.consent-switch span[aria-hidden] { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background-color .25s; }
.consent-switch span[aria-hidden]::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s var(--ease); }
.consent-switch input:checked + span { background: var(--lemon); }
.consent-switch input:checked + span::after { transform: translateX(1.1rem); }
.consent-switch input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
@media (max-width: 480px) {
  .consent { right: 0; bottom: 0; width: 100%; border-radius: 10px 10px 0 0; padding: 1rem 16px calc(.9rem + env(safe-area-inset-bottom, 0px)); }
  /* compact on phones so the hero stays visible behind the bar */
  .consent .t-h3 { font-size: 1.05rem; }
  .consent-msg { margin-top: .4rem; font-size: .8rem; line-height: 1.5; }
  .consent > .grid { margin-top: .85rem; }
  .consent .btn { height: 2.5rem !important; font-size: .92rem; }
  .consent > ul { margin-top: .6rem; }
}

/* Photos */
.photo { position: relative; overflow: hidden; border-radius: 4px; background: var(--line); }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--grade); transition: transform 1.6s var(--ease); }
.group:hover .photo img { transform: scale(1.03); }
.graded { filter: var(--grade); }

/* Hero — full-bleed photo, text bottom-left */
.hero { position: relative; display: flex; align-items: flex-end; min-height: 88vh; min-height: 88svh; color: #fff; overflow: hidden; background: var(--ink); }
.hero-sub { min-height: 62vh; min-height: 62svh; }
picture { display: contents; } /* build.py wraps photos in <picture> for AVIF */
.hero > img, .hero > picture > img { position: absolute; inset: 0; width: 100%; height: 115%; top: -7.5%; object-fit: cover; filter: var(--grade) brightness(.92); will-change: transform; }
.hero::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(17,24,39,.5) 0%, rgba(17,24,39,0) 26%),
  linear-gradient(0deg, rgba(17,24,39,.78) 0%, rgba(17,24,39,.32) 42%, rgba(17,24,39,0) 70%); }
.hero-inner { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(3rem, 7vh, 5.5rem); padding-top: calc(var(--hdr-h) + 3rem); }

/* Hero carousel — photos crossfade with a slow settle, quotes fade up.
   site.js drives the timer and sets --p (0…1) on the active dot's bar. */
.hc-media { position: absolute; inset: 0; will-change: transform; }
.hc-media img { position: absolute; left: 0; width: 100%; height: 115%; top: -7.5%; object-fit: cover; filter: var(--grade) brightness(.92); opacity: 0; transform: scale(1.06); transition: opacity 1.4s var(--ease), transform 9s cubic-bezier(.25,.6,.3,1); }
.hc-media img.is-on { opacity: 1; transform: none; }
.hc-slides { display: grid; }
.hc-slide { grid-area: 1 / 1; align-self: end; opacity: 0; transform: translateY(18px); visibility: hidden; transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s linear .7s; }
.hc-slide.is-on { opacity: 1; transform: none; visibility: visible; transition: opacity .9s var(--ease) .25s, transform .9s var(--ease) .25s, visibility 0s; }
.t-hero-long { font-size: clamp(1.9rem, 3.5vw, 3.35rem); line-height: 1.08; }
.hc-dot { position: relative; width: 3rem; height: 2rem; }
.hc-dot::before, .hc-fill { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; }
.hc-dot::before { background: rgba(255,255,255,.32); transition: background-color .3s; }
.hc-dot:hover::before { background: rgba(255,255,255,.6); }
.hc-fill { background: #fff; transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .12s linear; }
.hc-toggle { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); transition: box-shadow .3s, background-color .3s; }
.hc-toggle:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px #fff; }
.hero-carousel :focus-visible { outline-color: #fff; }
.hero .t-body { color: rgba(255,255,255,.78); }

/* Page header without photo (legal pages) */
.pagehead { background: var(--sand); padding-block: 4.5rem 3.5rem; }

/* Header */
#hdr { position: fixed; inset-inline: 0; top: 0; z-index: 40; padding-top: env(safe-area-inset-top, 0px); transition: background-color .45s var(--ease), box-shadow .45s, color .45s; }
#hdr .logo { transition: filter .45s; }
.hdr-bar { height: var(--hdr-h); }
#hdr.scrolled, body:not(.has-hero) #hdr { background: rgb(var(--c-paper) / .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); color: var(--ink); }
body.has-hero #hdr:not(.scrolled):not(.menu-open) { color: #fff; }
body.has-hero #hdr:not(.scrolled):not(.menu-open) .logo { filter: brightness(0) invert(1); }
#hdr.menu-open { background: var(--paper); color: var(--ink); }
.navlink { position: relative; padding-block: .5rem; font-variation-settings: "wdth" 106; letter-spacing: -.005em; }
.navlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.navlink:hover::after, .navlink[aria-current="page"]::after { transform: scaleX(1); }
.has-sub .sub { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s, transform .25s, visibility .25s; }
.has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: none; }

/* Theme picker */
.theme-dot { transition: box-shadow .25s, transform .25s; }
.theme-dot:hover { transform: scale(1.08); }
.theme-dot[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ink); }

/* Mobile menu */
#mobileNav { position: fixed; inset: 0; top: 0; z-index: 35; background: var(--paper); padding-top: calc(env(safe-area-inset-top, 0px) + var(--hdr-h)); overflow-y: auto; }

/* Scroll reveal: only elements below the fold get .pre (set in site.js) */
.rv { transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.rv.pre { opacity: 0; transform: translateY(24px); }

/* Words fill as you scroll */
.fill-text .w { transition: color .3s; }
.sec-night .fill-text .w { color: rgb(var(--c-on-brand) / .38); }
.sec-night .fill-text .w.on { color: var(--on-band); }
.sec-night .fill-text .muted .w.on { color: var(--band-soft); }

/* Line icons draw in */
.ico path, .ico circle { stroke-dasharray: 120; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease); }
.icons-pre .ico path, .icons-pre .ico circle { stroke-dashoffset: 120; }

/* Timeline */
.tl-fill { transform-origin: top; transform: scaleY(var(--p, 1)); }
.tl-node { transition: background-color .4s, color .4s, border-color .4s; }
.tl-node.on { background: var(--on-band); color: var(--band); border-color: var(--on-band); }

/* Section nav (Chiropraktik) */
.secnav a { white-space: nowrap; color: var(--muted); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.secnav a:hover { color: var(--ink); }
.secnav a.active { color: var(--ink); border-color: var(--ink); }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
#progress { transform-origin: left; transform: scaleX(var(--p, 0)); }

/* Long-form legal text */
.legal { max-width: 70ch; color: #374151; line-height: 1.8; }
.legal h2, .legal h5 { font-variation-settings: "wdth" 110; font-weight: 500; color: var(--ink); font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.012em; margin: 3.2rem 0 1rem; }
.legal h2:first-child, .legal h5:first-child { margin-top: 0; }
.legal p { margin: 0 0 1rem; }
.legal p > strong:only-child, .legal p > b:only-child { display: block; color: var(--ink); margin-top: 1.6rem; }
.legal strong, .legal b { color: var(--ink); font-weight: 600; }
.legal ul { list-style: disc; padding-left: 1.3rem; margin: 0 0 1rem; }
.legal a { color: var(--bronze-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; word-break: break-word; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rv.pre { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero > img, .hero > picture > img, .hc-media, .parallax { transform: none !important; }
  .hc-media img, .hc-slide { transition-duration: .01s !important; transform: none !important; }
  .consent { transition: none; }
  .sec-night .fill-text .w { color: var(--on-band) !important; }
  .sec-night .fill-text .muted .w { color: var(--band-soft) !important; }
  .ico path, .ico circle { stroke-dashoffset: 0 !important; transition: none !important; }
  .tl-fill { transform: none !important; }
  .photo img { transition: none; }
}