/* David Odenthal — site.css
 * Shared base: tokens, typography, nav, footer, switch, theme overrides,
 * buttons, links, marquee, scroll-reveal, atmospheric backgrounds.
 * Inputs: any HTML page can import this; templates add their own page-XYZ.css.
 */

:root{
  --paper:#F8F4E8;
  --paper-2:#F0EBDB;
  --paper-3:#E8E2CE;
  --ink:#15130E;
  --ink-soft:#3A352A;
  --muted:rgba(21,19,14,.58);
  --faint:rgba(21,19,14,.40);
  --rule:rgba(21,19,14,.10);
  --rule-strong:rgba(21,19,14,.22);

  /* multi-accent palette */
  --c-sand:#B89766;
  --c-sage:#6E7A5E;
  --c-umber:#8B6A3D;
  --c-clay:#A05D3F;
  --c-slate:#5D7280;
  --c-rust:#9C4A2F;
  --c-cream:#DDCDA6;
  --c-moss:#5F7159;
  --accent:var(--c-sand);
  --accent-soft:rgba(184,151,102,.16);
}
[data-accent="sand"]{--accent:var(--c-sand);--accent-soft:rgba(184,151,102,.16)}
[data-accent="sage"]{--accent:var(--c-sage);--accent-soft:rgba(110,122,94,.16)}
[data-accent="umber"]{--accent:var(--c-umber);--accent-soft:rgba(139,106,61,.16)}
[data-accent="clay"]{--accent:var(--c-clay);--accent-soft:rgba(160,93,63,.16)}
[data-accent="slate"]{--accent:var(--c-slate);--accent-soft:rgba(93,114,128,.16)}
[data-accent="rust"]{--accent:var(--c-rust);--accent-soft:rgba(156,74,47,.16)}
[data-accent="moss"]{--accent:var(--c-moss);--accent-soft:rgba(95,113,89,.16)}

*{box-sizing:border-box;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:'Inter',ui-sans-serif,system-ui,sans-serif;font-feature-settings:"ss01","cv11";font-variant-ligatures:contextual}
body{overflow-x:hidden;font-weight:400;font-size:17px;line-height:1.65;letter-spacing:-.005em}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}
img{max-width:100%;display:block}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.wrap-mid{max-width:880px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:680px;margin:0 auto;padding:0 24px}
@media(max-width:720px){.wrap{padding:0 24px}}

/* ---------- TOPBAR ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px 0;backdrop-filter:saturate(160%) blur(14px);background:color-mix(in srgb, var(--paper) 84%, transparent);border-bottom:1px solid var(--rule);transition:padding .3s, background .3s, border-color .3s}
.topbar.is-dark{background:color-mix(in srgb, #0A0907 80%, transparent);border-bottom-color:rgba(255,255,255,.08)}
.topbar.is-dark .brand img{filter:invert(1)}
.topbar.is-dark nav a{color:rgba(255,255,255,.7)}
.topbar.is-dark nav a:hover{color:#fff}
.topbar.is-dark nav a.is-here{color:#fff}
.topbar.is-dark .theme-switch{border-color:rgba(255,255,255,.18)}
.topbar.is-dark .theme-switch:hover{border-color:rgba(255,255,255,.45)}
.topbar.is-dark .ts-label{color:rgba(255,255,255,.5)}
.topbar.is-dark .theme-switch[data-mode="resilienz"] .ts-label.right{color:#fff}
.topbar.is-dark .theme-switch[data-mode="manipulation"] .ts-label.left{color:#fff}
.tb-inner{max-width:1240px;margin:0 auto;padding:0 40px;display:flex;align-items:center;gap:32px}
.brand{flex:0 0 auto;display:inline-flex;align-items:center;text-decoration:none}
.brand img{height:112px;width:auto;display:block;object-fit:contain;object-position:left center;clip-path:inset(8% 0 22% 0);margin:-16px 0 -24px}
@media(max-width:540px){.brand img{height:76px;margin:-10px 0 -18px}}
.tb-inner nav{flex:1;display:flex;gap:28px;font-size:14px;color:var(--muted);justify-content:center}
.tb-inner nav a{text-decoration:none;color:var(--muted);transition:color .15s;font-weight:400;position:relative}
.tb-inner nav a:hover{color:var(--ink)}
.tb-inner nav a.is-here{color:var(--ink);font-weight:500}
.tb-inner nav a.is-here::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--c-umber)}
@media(max-width:820px){.tb-inner{padding:0 24px;gap:16px}.tb-inner nav{display:none}}

/* ---------- THEME SWITCH ---------- */
.theme-switch{border:1px solid var(--rule-strong);background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:12px;font-family:inherit;padding:8px 14px;border-radius:999px;transition:border-color .25s, background .25s;flex:0 0 auto}
.theme-switch:hover{border-color:var(--ink)}
.ts-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .3s;font-weight:500;user-select:none;line-height:1}
.theme-switch[data-mode="resilienz"] .ts-label.right{color:var(--c-moss)}
.theme-switch[data-mode="manipulation"] .ts-label.left{color:var(--c-rust)}
.ts-track{width:36px;height:18px;border-radius:999px;background:var(--rule-strong);position:relative;transition:background .35s;flex:0 0 auto}
.ts-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--c-moss);transition:transform .4s cubic-bezier(.5,1.6,.5,1), background .35s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.theme-switch[data-mode="manipulation"] .ts-track{background:rgba(156,74,47,.25)}
.theme-switch[data-mode="manipulation"] .ts-thumb{transform:translateX(18px);background:var(--c-rust)}
.theme-switch[data-mode="resilienz"] .ts-track{background:rgba(95,113,89,.22)}
.topbar.is-dark .theme-switch[data-mode="resilienz"] .ts-track{background:rgba(95,113,89,.3)}
.topbar.is-dark .theme-switch[data-mode="manipulation"] .ts-track{background:rgba(216,93,56,.3)}
@media(max-width:540px){.ts-label{font-size:10px;letter-spacing:.1em}.theme-switch{padding:6px 10px;gap:8px}.ts-track{width:30px;height:16px}.ts-thumb{width:12px;height:12px}.theme-switch[data-mode="manipulation"] .ts-thumb{transform:translateX(14px)}}

/* ---------- MANIPULATION THEME ---------- */
html[data-theme="manipulation"]{
  --paper:#0C0B08;
  --paper-2:#13110B;
  --paper-3:#1A1710;
  --ink:#F4EDD8;
  --ink-soft:#CDC4AB;
  --muted:rgba(244,237,216,.52);
  --faint:rgba(244,237,216,.32);
  --rule:rgba(244,237,216,.10);
  --rule-strong:rgba(244,237,216,.20);
  --c-sand:#D4B274;
  --c-sage:#9AA77E;
  --c-umber:#D49562;
  --c-clay:#E08560;
  --c-slate:#8DA1B4;
  --c-rust:#E66042;
  --c-cream:#E8D9B4;
  --c-moss:#94AB87;
}
html[data-theme="manipulation"] body{background:var(--paper);color:var(--ink)}
html[data-theme="manipulation"] .topbar{background:color-mix(in srgb, var(--paper) 84%, transparent)}
html[data-theme="manipulation"] .topbar .brand img{filter:invert(1)}
html[data-theme="manipulation"] .topbar.is-dark{background:color-mix(in srgb, #050402 84%, transparent)}
html[data-theme="manipulation"] .topbar.is-dark .brand img{filter:invert(1)}
html[data-theme="manipulation"] footer{background:var(--paper)}
html[data-theme="manipulation"] .foot .ident img{filter:invert(1)}

/* ---------- LINKS / BUTTONS ---------- */
.link{color:inherit;text-decoration:none;border-bottom:1px solid var(--accent);transition:background-color .2s;padding-bottom:1px}
.link:hover{background:var(--accent-soft)}
.link-q{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule-strong);transition:border-color .15s,color .15s;padding-bottom:1px}
.link-q:hover{color:var(--ink);border-bottom-color:var(--ink)}
.btn-solid{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);text-decoration:none;font-size:14px;font-weight:500;padding:16px 24px;transition:all .2s;border:none;cursor:pointer;font-family:inherit}
.btn-solid:hover{background:#000;transform:translateY(-1px)}
.btn-solid .arr{transition:transform .2s;display:inline-block}
.btn-solid:hover .arr{transform:translateX(4px)}
html[data-theme="manipulation"] .btn-solid{background:var(--ink);color:var(--paper)}
html[data-theme="manipulation"] .btn-solid:hover{background:#fff}
.btn-text{font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-strong);padding-bottom:3px;transition:border-color .15s,color .15s}
.btn-text:hover{border-bottom-color:var(--ink)}

/* dark-context buttons (e.g. on video hero) */
.on-dark .btn-solid{background:#FFF8E8;color:var(--ink)}
.on-dark .btn-solid:hover{background:#fff}
.on-dark .btn-text{color:rgba(255,248,232,.85);border-bottom-color:rgba(255,248,232,.32)}
.on-dark .btn-text:hover{color:#FFF8E8;border-bottom-color:rgba(255,248,232,.7)}

/* ---------- EYEBROW ---------- */
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:14px;margin-bottom:32px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--rule-strong)}

/* ---------- SUB-HERO (compact header for subpages, no animation) ---------- */
.sub-hero{padding:160px 40px 70px;border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.sub-hero-inner{max-width:1240px;margin:0 auto;position:relative;z-index:2}
.sub-hero .crumbs{font-size:12px;letter-spacing:.04em;color:var(--muted);margin-bottom:20px;display:flex;gap:8px;flex-wrap:wrap}
.sub-hero .crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.sub-hero .crumbs a:hover{border-bottom-color:var(--muted)}
.sub-hero .crumbs .sep{color:var(--faint)}
.sub-hero .eyebrow{margin-bottom:24px}
.sub-hero h1{font-family:'Inter',sans-serif;font-weight:500;font-size:clamp(34px,4.6vw,64px);line-height:1.02;letter-spacing:-.03em;margin:0 0 20px;max-width:22ch;color:var(--ink)}
.sub-hero h1 .soft{color:var(--muted);font-weight:400}
.sub-hero-lead{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--ink-soft);max-width:58ch;margin:0 0 32px;letter-spacing:-.005em}
.sub-hero-actions{display:flex;gap:24px;align-items:baseline;flex-wrap:wrap}
@media(max-width:720px){.sub-hero{padding:120px 24px 50px}}

/* sub-hero variant with background image */
.sub-hero.with-img{color:#FFF8E8;background:#15130E;border-bottom-color:rgba(255,255,255,.08)}
.sub-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;opacity:.55;filter:grayscale(.2)}
html[data-theme="manipulation"] .sub-hero-img{opacity:.45;filter:grayscale(.4) brightness(.85)}
.sub-hero.with-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,12,.35) 0%,rgba(20,18,12,.78) 100%);z-index:1}
html[data-theme="manipulation"] .sub-hero.with-img::after{background:linear-gradient(180deg,rgba(6,4,2,.4) 0%,rgba(6,4,2,.88) 100%)}
.sub-hero.with-img h1{color:#FFF8E8}
.sub-hero.with-img h1 .soft{color:rgba(255,248,232,.6)}
.sub-hero.with-img .eyebrow{color:rgba(255,248,232,.7)}
.sub-hero.with-img .eyebrow::before{background:rgba(255,248,232,.35)}
.sub-hero.with-img .sub-hero-lead{color:rgba(255,248,232,.82)}
.sub-hero.with-img .crumbs{color:rgba(255,248,232,.6)}
.sub-hero.with-img .crumbs a{color:rgba(255,248,232,.6)}
.sub-hero.with-img .crumbs a:hover{border-bottom-color:rgba(255,248,232,.55)}
.sub-hero.with-img .crumbs .sep{color:rgba(255,248,232,.35)}
.sub-hero.with-img .sub-hero-actions .btn-solid{background:#FFF8E8;color:var(--ink)}
.sub-hero.with-img .sub-hero-actions .btn-solid:hover{background:#fff}
.sub-hero.with-img .sub-hero-actions .btn-text{color:rgba(255,248,232,.85);border-bottom-color:rgba(255,248,232,.32)}
.sub-hero.with-img .sub-hero-actions .btn-text:hover{color:#FFF8E8;border-bottom-color:rgba(255,248,232,.7)}

/* ---------- MARQUEE ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:20px 0;background:var(--paper-2);position:relative}
.marquee-track{display:flex;gap:64px;width:max-content;animation:scroll-left 60s linear infinite;font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.marquee-item{display:flex;align-items:center;gap:32px;white-space:nowrap}
.marquee-item::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-umber);flex:0 0 auto}
@keyframes scroll-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ---------- SCROLL-REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d-1{transition-delay:.08s}
.reveal.d-2{transition-delay:.16s}
.reveal.d-3{transition-delay:.24s}
.reveal.d-4{transition-delay:.32s}

/* ---------- ATMOSPHERIC BG (every-other section) ---------- */
section.s.has-bg{position:relative;overflow:hidden}
section.s.has-bg::before{content:"";position:absolute;inset:0;background-image:var(--bg-img,none);background-size:cover;background-position:center;opacity:.16;z-index:0;filter:grayscale(.35) contrast(.95);pointer-events:none}
section.s.has-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, var(--paper) 0%, color-mix(in srgb, var(--paper) 65%, transparent) 30%, color-mix(in srgb, var(--paper) 65%, transparent) 70%, var(--paper) 100%);z-index:0;pointer-events:none}
section.s.has-bg > *{position:relative;z-index:1}
html[data-theme="manipulation"] section.s.has-bg::before{opacity:.20;filter:grayscale(.5) contrast(1.1) brightness(.7)}

/* ---------- FOOTER ---------- */
footer{padding:80px 40px 40px;background:var(--paper)}
.foot{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.foot h5{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 18px}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot a{text-decoration:none;color:var(--muted);transition:color .15s}
.foot a:hover{color:var(--ink)}
.foot .ident{font-size:14px;color:var(--ink-soft);line-height:1.6;max-width:32ch}
.foot .ident img{height:120px;width:auto;clip-path:inset(8% 0 22% 0);margin:0 0 -24px -12px;display:block}
.legal{max-width:1240px;margin:64px auto 0;padding-top:24px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;font-size:12px;color:var(--faint);flex-wrap:wrap;gap:12px}
.legal a{color:var(--faint);text-decoration:none;border-bottom:1px solid transparent}
.legal a:hover{color:var(--ink);border-bottom-color:var(--rule-strong)}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr;gap:32px}footer{padding:60px 24px 24px}}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.1s!important}
  .marquee-track{animation:none}
}