/* ==========================================================================
   31415.me — gemeinsames Seiten-Chrome
   --------------------------------------------------------------------------
   Einzige Quelle für Farbtokens, Grundlayout, Header, Seitenkopf, Footer,
   Toast und die Scroll-Einblendung. Jede Seite bindet diese Datei ein und
   ergänzt darunter im eigenen <style> ausschließlich seitenspezifische
   Bausteine — nichts, was hier schon steht.

   Regeln (siehe README.md → "Architektur"):
   • Farben und Radien immer über die Tokens unten, nie als Literal.
   • Layout-Breite über .wrap bzw. .container (Aliasse, gleiches Verhalten).
   • Interaktive Karten bekommen eine der Klassen aus der Spotlight-Liste in
     assets/chrome.js — dann setzt das Skript --mx/--my von allein.
   ========================================================================== */


/* ---------- Tokens: Dark (Default) ---------- */
:root{
  --ink:#0a0e14; --ink-soft:#111722; --panel:#141b27; --line:rgba(214,201,170,0.12);
  --paper:#f4efe2; --paper-dim:#b9b2a1; --paper-faint:#6f6c63;
  --gold:#d8b46a; --gold-bright:#f0cd84;
  --field-base:rgba(10,14,20,0.12);
  --header-a:rgba(10,14,20,0.85); --header-b:rgba(10,14,20,0);
  --header-a2:rgba(10,14,20,0.95); --header-b2:rgba(10,14,20,0.6);
  --shadow:rgba(216,180,106,.55); --r:14px;
}
/* ---------- Tokens: Light ---------- */
html[data-theme="light"]{
  --ink:#f6f3ea; --ink-soft:#fffefb; --panel:#fffefb; --line:rgba(60,52,33,0.14);
  --paper:#1d2329; --paper-dim:#5a564c; --paper-faint:#8f8a7d;
  --gold:#a9802e; --gold-bright:#8c6618;
  --field-base:rgba(246,243,234,0.14);
  --header-a:rgba(246,243,234,0.88); --header-b:rgba(246,243,234,0);
  --header-a2:rgba(246,243,234,0.96); --header-b2:rgba(246,243,234,0.7);
  --shadow:rgba(169,128,46,.32);
}

/* ---------- Grundlayout ---------- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:400;
  line-height:1.6;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .4s ease, color .4s ease;
}
::selection{background:var(--gold);color:var(--ink);}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}

/* Einheitlicher Tastaturfokus — Seiten-CSS darf ihn verfeinern, nicht entfernen. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}

/* Inhaltsbreite. .wrap und .container sind Aliasse; historisch gewachsen,
   damit beide Schreibweisen in den Seiten weiter funktionieren. Wer nur
   Inhalte über die Hintergrundschichten heben will, nimmt .layer — sonst
   käme die Polsterung ein zweites Mal obendrauf. */
.wrap,.container{max-width:1180px;margin:0 auto;padding:0 28px;}
@media(max-width:640px){.wrap,.container{padding:0 20px;}}
.layer{position:relative;z-index:2;}

/* Sprungmarke zum Inhalt — erste fokussierbare Stelle jeder Seite. */
.skip-link{
  position:fixed;top:12px;left:12px;z-index:200;
  transform:translateY(-160%);
  background:var(--gold);color:var(--ink);
  font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  padding:11px 18px;border-radius:100px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.skip-link:focus-visible{transform:translateY(0);outline-offset:3px;}

#digit-field{position:fixed;inset:0;z-index:0;opacity:.5;pointer-events:none;}

.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="light"] .grain{opacity:.02;}

/* ---------- Header ---------- */
/* Die Leiste selbst legt weder Höhe noch Flow fest — so trägt sie sowohl das
   .header-inner der Werkzeugseiten als auch die .bar der Startseite. */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(to bottom, var(--header-a), var(--header-b));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background .4s ease;
}
.header-inner,.bar{
  max-width:1180px;margin:0 auto;width:100%;height:72px;
  padding:0 28px;display:flex;align-items:center;justify-content:space-between;
}
@media(max-width:640px){.header-inner,.bar{padding:0 20px;}}

.brand{display:flex;align-items:baseline;gap:.32em;font-size:1rem;}
.brand .pi{font-family:'Fraunces',serif;font-size:1.5rem;color:var(--gold);line-height:1;}
.brand .num{font-family:'Space Mono',monospace;font-weight:700;color:var(--paper);letter-spacing:.02em;}
.brand .me{font-family:'Space Mono',monospace;color:var(--paper-faint);}

.header-right{display:flex;align-items:center;gap:18px;}
.back-link{
  font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper-dim);display:flex;align-items:center;gap:6px;
  transition:color .3s cubic-bezier(.2,.8,.2,1);
  border-radius:4px;
}
.back-link:hover{color:var(--gold);}
.back-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.back-link svg{width:13px;height:13px;transition:transform .3s cubic-bezier(.2,.8,.2,1);}
.back-link:hover svg{transform:translateX(-5px);}
@media(max-width:359px){.back-link span{display:none;}}

.theme-toggle{
  width:40px;height:40px;border-radius:100px;border:1px solid var(--line);
  background:transparent;color:var(--paper-dim);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .3s cubic-bezier(.2,.8,.2,1), color .3s cubic-bezier(.2,.8,.2,1);
}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold);}
.theme-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.theme-toggle svg{width:17px;height:17px;}
.icon-sun{display:none;}
html[data-theme="light"] .icon-moon{display:none;}
html[data-theme="light"] .icon-sun{display:block;}

/* ---------- Seitenkopf ---------- */
.app-head{max-width:1180px;margin:0 auto;padding:150px 28px 56px;position:relative;z-index:2;}
@media(max-width:640px){.app-head{padding:120px 20px 40px;}}
.app-head .eyebrow{
  font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);display:block;margin:0 0 18px;
}
.app-head .eyebrow::before{content:none;}
.app-head h1{
  font-family:'Fraunces',serif;font-weight:300;font-size:clamp(2.2rem,6vw,3.6rem);
  letter-spacing:-.02em;line-height:.98;margin:0 0 16px;color:var(--paper);
}
.app-head h1 em{font-style:italic;color:var(--gold-bright);font-weight:400;}
.app-head .lede{font-size:1.05rem;color:var(--paper-dim);max-width:580px;margin:0;}

/* ---------- Footer ---------- */
footer{padding:50px 0 70px;border-top:1px solid var(--line);margin-top:0;position:relative;z-index:2;}
.footer-inner{
  max-width:1180px;margin:0 auto;padding:0 28px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
}
@media(max-width:640px){.footer-inner{padding:0 20px;}}
footer p{margin:0;font-family:'Space Mono',monospace;font-size:.74rem;color:var(--paper-faint);letter-spacing:.05em;}
footer a{color:var(--paper-faint);transition:color .3s cubic-bezier(.2,.8,.2,1);}
footer a:hover{color:var(--gold);}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:28px;left:50%;
  background:var(--gold);color:var(--ink);font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:.88rem;padding:13px 24px;border-radius:100px;
  box-shadow:0 16px 32px -8px var(--shadow);opacity:0;pointer-events:none;z-index:100;
  transform:translate(-50%, 20px);
  transition:opacity .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1);
}
.toast.show{transform:translate(-50%, 0);opacity:1;}

/* ---------- Einblenden beim Scrollen ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.in{opacity:1;transform:translateY(0);}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important; animation:none !important;}
  .reveal{opacity:1; transform:none;}
  #digit-field{display:none;}
}