/* ═══════════════════════════════════════════════════════════════
   WAMB'S Consulting — Stylesheet für Unterseiten
   (Impressum, Datenschutz, 404) im Design der Startseite:
   Variante B „Editorial Light". Die Startseite bringt ihr CSS inline mit.
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Fraunces';
  src:url('assets/fonts/fraunces-var.woff2') format('woff2');
  font-weight:300 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('assets/fonts/archivo-var.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}

:root{
  --paper:#F7F4EE;--paper-2:#FFFFFF;--ink:#1A1F2E;--ink-soft:#4A5164;
  --navy:#1B2A4A;--gold:#A8853B;--gold-soft:#A8853B;--line:#E2DCCE;
  --ink-dim:#4A5164;               /* Kompatibilität mit den Inline-Styles */
  --display:'Fraunces',Georgia,serif;--body:'Archivo',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.7}
::selection{background:var(--gold);color:#fff}
em{font-style:normal;color:var(--gold)}
h1,h2,h3{font-family:var(--display);font-weight:400;color:var(--navy)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Auf der hellen Variante nicht sichtbar — Element bleibt der Kompatibilität halber wirkungslos */
.grain{display:none}

/* ───────── Kopfzeile ───────── */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:1rem clamp(1.2rem,5vw,4rem);
  background:rgba(247,244,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink)}
.nav__logo{height:40px;width:auto}
.nav__name{font-family:var(--display);font-size:1.15rem}

/* ───────── Buttons ───────── */
.btn{display:inline-block;text-decoration:none;font-size:.9rem;letter-spacing:.04em;
  padding:.75rem 1.5rem;border-radius:2px;transition:all .25s}
.btn--ghost{border:1px solid var(--navy);color:var(--navy)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--gold{background:var(--navy);color:#fff;font-weight:600}
.btn--gold:hover{background:var(--gold);transform:translateY(-1px)}
.gold{color:var(--gold)}

/* ───────── Fußzeile ───────── */
.footer{border-top:1px solid var(--line);background:var(--paper-2);
  padding:2.5rem clamp(1.2rem,5vw,4rem);margin-top:3rem}
.footer__copy{max-width:72rem;margin:0 auto;color:#8B90A0;font-size:.75rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}