/* ============================================================================
   BLC Vermögensstrategien - Nebenseiten
   Gemeinsames Stylesheet für Impressum, Datenschutz, Erstinformation und 404.
   Bewusst schlank: dieselben Marken-Token und dieselbe Typografie wie die
   Startseite, aber ohne Canvas, Preloader und Scroll-Choreografie. Diese
   Seiten werden gelesen, nicht erlebt.
   ========================================================================= */

@font-face{
  font-family:'Bodoni Moda';
  src:url('../fonts/BodoniModa-latin.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bodoni Moda';
  src:url('../fonts/BodoniModa-latin-ext.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Geist';
  src:url('../fonts/Geist-Variable.woff2') format('woff2-variations'),
      url('../fonts/Geist-Variable.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url('../fonts/GeistMono-subset.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* Ein einziger Modus: Obsidian. Kein Light Mode, identisch zur Startseite. */
:root{
  --bg:#0D0B08;
  --bg-deep:#080706;
  --surface:#151310;
  --text:#F2EEE4;
  --text-2:#CEC8BA;
  --muted:#9A9384;
  --line:rgba(242,238,228,.12);
  --line-soft:rgba(242,238,228,.06);
  --accent:#C9B98A;
  --accent-deep:#C9B98A;
  --accent-text:#D6C89F;
  --accent-wash:rgba(201,185,138,.10);
  --btn-bg-base:#C9B98A;
  --btn-fg-base:#0D0B08;
  --btn-bg-hover:#DACCA2;
  --grain:.05;

  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --px-base:clamp(20px, 5vw, 56px);
  --px:max(var(--px-base), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --maxw:1280px;
  --r:3px;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-h:68px;
  --nav-total:calc(var(--nav-h) + var(--sat));

  --display:'Bodoni Moda','Times New Roman',Times,serif;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-total) + 16px)}
html,body{overscroll-behavior-y:contain}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:1.02rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background-color .5s var(--ease), color .5s var(--ease);
}
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
*{-webkit-tap-highlight-color:transparent}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:var(--r)}
::selection{background:var(--accent-deep);color:var(--bg)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--btn-bg-base);color:var(--btn-fg-base);padding:12px 20px;border-radius:var(--r)}
.skip:focus{left:var(--px);top:12px}

/* ---------- Kopf ---------- */
.nav{
  position:sticky;top:0;z-index:80;
  height:calc(var(--nav-h) + var(--sat));padding-top:var(--sat);
  display:flex;align-items:center;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav__inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--px);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:baseline;gap:.5em;text-decoration:none;touch-action:manipulation}
.brand__mark{font-family:var(--display);font-variation-settings:'opsz' 18;font-size:1.14rem;font-weight:500}
.brand__sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
@media (max-width:640px){ .brand__sub{display:none} }
.nav__back{
  margin-left:auto;font-size:.9rem;color:var(--muted);text-decoration:none;
  white-space:nowrap;touch-action:manipulation;
  display:flex;align-items:center;min-height:44px;
}
@media (hover: hover) and (pointer: fine){ .nav__back:hover{color:var(--text)} }

/* ---------- Satzspiegel ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--px)}
.page{padding-block:clamp(56px,8vw,112px) clamp(72px,10vw,140px)}
.prose{max-width:68ch}

h1{
  font-family:var(--display);font-variation-settings:'opsz' 72;
  font-size:clamp(1.9rem,1.1rem + 3vw,2.9rem);font-weight:500;
  line-height:1.08;letter-spacing:-.01em;margin:0 0 clamp(24px,3vw,40px);
  max-width:18em;
}
h2{
  font-family:var(--display);font-variation-settings:'opsz' 36;
  font-size:clamp(1.2rem,1rem + .9vw,1.6rem);font-weight:500;
  line-height:1.2;letter-spacing:-.006em;
  margin:clamp(40px,5vw,64px) 0 .7em;padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--line-soft);
}
h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;margin:2em 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1.15em;color:var(--text-2);text-wrap:pretty}
.lead{font-size:clamp(1.08rem,1rem + .5vw,1.3rem);line-height:1.5;color:var(--text-2);letter-spacing:-.012em;max-width:44ch;margin-bottom:2em}
ul,ol{margin:0 0 1.4em;padding-left:1.3em;color:var(--text-2)}
li{margin-bottom:.5em}
address{font-style:normal;color:var(--text-2)}
a.tlink{color:var(--accent-text);font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;touch-action:manipulation}
strong,b{font-weight:600;color:var(--text)}
.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- Entwurfs-Hinweis ---------- */
/* Diese Seiten gehen bewusst NICHT fertig online. Der Hinweis steht sichtbar
   oben, dazu robots=noindex im Kopf der jeweiligen Datei. */
.draft{
  border:1px solid var(--accent-deep);border-radius:var(--r);
  background:var(--accent-wash);
  padding:clamp(18px,2.4vw,26px);margin-bottom:clamp(32px,4vw,52px);
  max-width:68ch;
}
.draft p{margin:0;color:var(--text);font-size:.95rem}
.draft p + p{margin-top:.6em;color:var(--text-2)}
.draft strong{display:block;margin-bottom:.5em;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
/* Auszufüllende Stelle. Fällt im Text sofort auf. */
.fill{
  background:var(--accent-wash);border-bottom:1px dashed var(--accent-deep);
  padding:.05em .35em;border-radius:2px;color:var(--accent-text);
  font-family:var(--mono);font-size:.85em;
}

/* ---------- Knopf ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;min-height:44px;
  padding:.9em 1.6em;border-radius:var(--r);
  background:var(--btn-bg-base);color:var(--btn-fg-base);
  font-size:.95rem;font-weight:500;text-decoration:none;letter-spacing:-.008em;
  white-space:nowrap;touch-action:manipulation;user-select:none;
  transition:background-color .35s var(--ease), transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine){ .btn:hover{background:var(--btn-bg-hover)} }
.btn:active{transform:scale(.98)}
.btn--ghost{background:transparent;color:var(--text);border:1px solid var(--accent-deep)}
@media (hover: hover) and (pointer: fine){ .btn--ghost:hover{background:var(--accent-wash)} }

/* ---------- 404 ---------- */
.notfound{min-height:calc(100dvh - var(--nav-total));display:flex;align-items:center;padding-block:clamp(56px,10vh,120px)}
.notfound__code{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text);margin-bottom:1.6em;display:block}
.notfound h1{margin-bottom:.6em}
.notfound p{max-width:40ch}
.notfound__links{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vw,40px)}

/* ---------- Fuß ---------- */
.foot{border-top:1px solid var(--line-soft);padding-block:clamp(40px,5vw,64px) max(28px, calc(var(--sab) + 16px));background:var(--bg-deep)}
.foot__grid{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:baseline;justify-content:space-between}
.foot p{margin:0;font-size:.88rem;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot nav a{font-size:.88rem;color:var(--text-2);text-decoration:none;display:flex;align-items:center;min-height:44px;touch-action:manipulation}
@media (hover: hover) and (pointer: fine){ .foot nav a:hover{color:var(--accent-text)} }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
}