/* ============================================================
   rfl.gd — gemeinsame Basis (Fonts, Tokens, Nav, Footer)
   Wird von Unterseiten (Impressum, Datenschutz, …) genutzt.
   Hinweis: index.html trägt diese Foundation derzeit noch inline;
   bei Token-Änderungen beide Quellen pflegen (TODO: index angleichen).
   ============================================================ */

/* ---------- Fonts (self-hosted, kein CDN) ---------- */
@font-face { font-family:'Red Hat Display'; src:url('../fonts/redhatdisplay.woff2') format('woff2'); font-weight:300 900; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/inter.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/jetbrainsmono.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root[data-theme="dark"]{
  --bg:#0E0D12; --bg2:#17131A; --bg3:#221A16; --bg-espresso:#2C1E14;
  --fg:#F0EDE8; --fg2:#9A9088; --fg3:#6A6058;
  --primary:#B09A6A; --primary-on:#1A1008;
  --primary-dim:rgba(176,154,106,0.12); --primary-glow:rgba(176,154,106,0.30);
  --border:rgba(176,154,106,0.12); --border-hover:rgba(176,154,106,0.28);
  --card:rgba(255,255,255,0.018); --card-shadow:0 4px 30px rgba(0,0,0,0.45);
}
:root[data-theme="light"]{
  --bg:#FAF8F5; --bg2:#FFFFFF; --bg3:#F2EDE8; --bg-espresso:#2C1E14;
  --fg:#2C1E14; --fg2:#6A5A4A; --fg3:#9A8A7A;
  --primary:#7A6A44; --primary-on:#FAF8F5;
  --primary-dim:rgba(122,106,68,0.10); --primary-glow:rgba(122,106,68,0.20);
  --border:rgba(44,30,20,0.10); --border-hover:rgba(44,30,20,0.22);
  --card:rgba(44,30,20,0.012); --card-shadow:0 4px 24px rgba(0,0,0,0.06);
}
:root{
  --dur-fast:300ms; --dur-normal:600ms; --dur-slow:900ms;
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-out-quart:cubic-bezier(0.25,1,0.5,1);
  --ease-smooth:cubic-bezier(0.45,0,0.55,1);
  --maxw:1200px; --gut:clamp(1.25rem,5vw,4rem);
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--fg); line-height:1.6; font-size:1rem; letter-spacing:-0.002em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
  transition:background var(--dur-slow) var(--ease-smooth), color var(--dur-slow) var(--ease-smooth);
}
h1,h2,h3,h4{font-family:'Red Hat Display',sans-serif; font-weight:700; line-height:1.1; letter-spacing:-0.025em}
a{color:inherit; text-decoration:none}
button:not(:disabled),[role="button"]:not([aria-disabled="true"]),a[href],label[for],summary{cursor:pointer}
img,svg{display:block; max-width:100%}
::selection{background:var(--primary-glow); color:var(--fg)}
.mono{font-family:'JetBrains Mono',monospace; letter-spacing:0.04em}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.eyebrow{font-family:'JetBrains Mono',monospace; font-size:0.66rem; font-weight:500; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--primary); display:inline-flex; align-items:center; gap:0.7rem}
.eyebrow::before{content:""; width:1.6rem; height:1px; background:var(--primary); opacity:0.6}

/* ---------- Grain ---------- */
.grain{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:0.5; mix-blend-mode:overlay}
:root[data-theme="light"] .grain{opacity:0.6; mix-blend-mode:multiply}

/* ---------- Nav (Pille) ---------- */
header.nav{
  position:fixed; top:0.9rem; left:50%; transform:translateX(-50%); z-index:50;
  display:flex; align-items:center; width:calc(100% - 2*var(--gut)); max-width:var(--maxw);
  padding:0.5rem 0.65rem 0.5rem 1.5rem; border-radius:999px; border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg2) 82%, transparent);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 8px 30px rgba(0,0,0,0.18);
  transition:transform var(--dur-normal) var(--ease-out-expo), opacity var(--dur-fast) var(--ease-smooth), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
:root[data-theme="dark"] header.nav{background:color-mix(in srgb, #211B26 88%, transparent); border-color:rgba(176,154,106,0.24); box-shadow:0 10px 34px rgba(0,0,0,0.45)}
:root[data-theme="light"] header.nav{box-shadow:0 8px 26px rgba(0,0,0,0.07)}
header.nav.scrolled{border-color:var(--border-hover)}
header.nav.nav-hidden{transform:translateX(-50%) translateY(-185%); opacity:0; pointer-events:none}
.brand{display:flex; align-items:center; gap:0.6rem}
.brand svg{width:30px; height:28px; overflow:visible}
.brand-word{font-family:'Red Hat Display',sans-serif; font-weight:700; font-size:1.28rem; letter-spacing:-0.03em}
.brand-word .dot{color:var(--primary)}
.nav-links{display:flex; align-items:center; gap:1.9rem; margin:0 auto}
.nav-links a{font-size:0.84rem; color:color-mix(in srgb, var(--fg) 74%, transparent); display:inline-block; transition:color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-out-expo); position:relative}
.nav-links a::after{content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--primary); transition:width var(--dur-normal) var(--ease-out-expo)}
.nav-links a:hover{color:var(--fg); transform:translateY(-1px) scale(1.06)} .nav-links a:hover::after{width:100%}
.nav-right{display:flex; align-items:center; gap:1.25rem}
.lang{display:flex; align-items:center; gap:0.4rem; font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.1em}
.lang-opt{font-family:inherit; font-size:inherit; letter-spacing:inherit; border:none; background:none; padding:0; color:var(--fg3); transition:color var(--dur-fast)}
.lang-opt.active{color:var(--fg)}
.lang-opt:not(.active):hover{color:var(--primary)}
.lang-sep{color:var(--fg3); opacity:0.4}
.theme-toggle{border:none; background:none; padding:0; width:auto; height:auto; color:var(--fg3); display:grid; place-items:center; transition:color var(--dur-fast)}
.theme-toggle:hover{color:var(--primary)}
.theme-toggle svg{width:17px; height:17px}
:root[data-theme="dark"] .icon-moon{display:none} :root[data-theme="light"] .icon-sun{display:none}
.btn-nav{display:inline-flex; align-items:center; font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:600;
  padding:0.5rem 1.25rem; border-radius:999px; background:transparent; border:1px solid var(--border-hover); color:var(--fg);
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out-expo)}
.btn-nav:hover{border-color:var(--primary); color:var(--primary); background:var(--primary-dim); transform:translateY(-1px) scale(1.04)}
.menu-btn{display:none; width:33px; height:33px; border:1px solid var(--border); border-radius:50%; background:transparent; color:var(--fg); place-items:center}

/* Zurück-Button (Rechtsseiten) */
.btn-back{display:inline-flex; align-items:center; gap:0.55rem; margin-top:3rem; font-family:'Inter',sans-serif; font-size:0.88rem; font-weight:600;
  padding:0.6rem 1.4rem; border-radius:999px; background:transparent; border:1px solid var(--border-hover); color:var(--fg);
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out-expo)}
.btn-back:hover{border-color:var(--primary); color:var(--primary); background:var(--primary-dim); transform:translateY(-1px) scale(1.02)}
.btn-back svg{width:15px; height:15px; transition:transform var(--dur-fast) var(--ease-out-expo)}
.btn-back:hover svg{transform:translateX(-3px)}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--border); padding-block:3.5rem 2.5rem; position:relative; z-index:1; margin-top:5rem}
.footer-top{display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-start}
.footer-brand{max-width:30ch}
.footer-brand .brand{margin-bottom:1rem}
.footer-brand p{color:color-mix(in srgb, var(--fg) 72%, transparent); font-size:0.88rem}
.footer-cols{display:flex; gap:4rem; flex-wrap:wrap}
.footer-col h3{font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:color-mix(in srgb, var(--fg) 56%, transparent); margin-bottom:1rem; font-weight:500}
.footer-col a{display:block; color:color-mix(in srgb, var(--fg) 72%, transparent); font-size:0.88rem; padding:0.3rem 0; transition:color var(--dur-fast)}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:3rem; padding-top:1.8rem; border-top:1px solid var(--border); color:color-mix(in srgb, var(--fg) 60%, transparent); font-size:0.78rem; font-family:'JetBrains Mono',monospace; letter-spacing:0.04em}

/* ---------- Kontakt-Modal ---------- */
.modal-overlay{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1.5rem;
  background:color-mix(in srgb, #000 55%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; animation:mOverlay var(--dur-fast) var(--ease-out-quart) forwards}
.modal-overlay[hidden]{display:none}
.modal{position:relative; width:100%; max-width:460px; background:var(--bg2); border:1px solid var(--border-hover);
  border-radius:20px; padding:2.6rem; box-shadow:0 30px 80px rgba(0,0,0,0.5); transform:translateY(14px) scale(.98); animation:mIn var(--dur-normal) var(--ease-out-expo) forwards}
@keyframes mOverlay{to{opacity:1}} @keyframes mIn{to{transform:none}}
.modal .eyebrow{justify-content:flex-start}
.modal h2{font-size:1.7rem; letter-spacing:-0.03em; margin-top:1rem}
.modal p{color:var(--fg2); margin-top:0.9rem; font-size:0.95rem; line-height:1.6}
.modal-mail{display:inline-block; margin-top:1.6rem; font-family:'Red Hat Display',sans-serif; font-weight:700; font-size:1.35rem; color:var(--primary); letter-spacing:-0.02em; border-bottom:1px solid transparent; transition:border-color var(--dur-fast)}
.modal-mail:hover{border-color:var(--primary)}
.modal-note{font-size:0.8rem; color:var(--fg3); margin-top:1.2rem}
.modal-close{position:absolute; top:1.05rem; right:1.15rem; width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--fg2); font-size:1.25rem; line-height:1; display:grid; place-items:center; transition:color var(--dur-fast), border-color var(--dur-fast)}
.modal-close:hover{color:var(--primary); border-color:var(--border-hover)}

@media (max-width:900px){
  .nav-links{display:none}
  .menu-btn{display:grid}
  .btn-nav{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms!important; transition-duration:0.001ms!important; scroll-behavior:auto!important}
}