/* Gemeinsame Tokens, Reset, Nav, Footer und Animationen für alle Seiten.
   Seiten-spezifisches CSS steht in {% block styles %} der jeweiligen Templates.
   Farb-Tokens werden je nach [data-theme] in themes.css überschrieben. */

:root{
  --bg:      #100C09;
  --bg-2:    #17120D;
  --line:    #2C241C;
  --line-2:  #3A2F24;
  --ink:     #F1EADF;
  --ink-2:   #B6A793;
  --ink-3:   #7E7160;
  --amber:   #E6A85C;
  --copper:  #C2703A;
  --amber-soft: rgba(230,168,92,.14);

  --display: "Fraunces", Georgia, serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "Space Mono", ui-monospace, monospace;

  --wrap: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* Warmes Lampenlicht + feines Korn als Atmosphäre */
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(760px 520px at 50% -8%, var(--glow-1, rgba(230,168,92,.16)), transparent 62%),
    radial-gradient(600px 600px at 88% 12%, var(--glow-2, rgba(194,112,58,.10)), transparent 60%);
  pointer-events:none; z-index:0;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.035; mix-blend-mode:screen;
  pointer-events:none; z-index:0;
}

.wrap{ width:min(100% - 48px, var(--wrap)); margin-inline:auto; position:relative; z-index:1; }

a{ color:inherit; text-decoration:none; }
::selection{ background:var(--amber-soft); color:var(--ink); }

:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:2px; }

/* ---------- Nav ---------- */
.nav{ padding-top:28px; display:flex; align-items:baseline; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.brand{ font-family:var(--display); font-weight:600; font-size:1.35rem; letter-spacing:-.01em; }
.brand .dot{ color:var(--amber); }
.nav-links{ display:flex; align-items:baseline; gap:24px; font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2); flex-wrap:wrap; }
.nav-links a{ position:relative; padding-bottom:4px; transition:color .25s; background:none; border:none; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--amber); transition:width .28s ease; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--ink); }
.nav-links form{ margin:0; }

/* ---------- XP-Leiste (Nav) ---------- */
.xp-badge{ display:inline-flex; align-items:center; gap:8px; }
.xp-level{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--amber); white-space:nowrap; }
.xp-track{ display:block; width:56px; height:6px; border-radius:100px; background:var(--bg-2); overflow:hidden; border:1px solid var(--line-2); }
.xp-fill{ display:block; height:100%; background:var(--amber); border-radius:100px; }

/* ---------- Flash-Meldungen ---------- */
.flashes{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; position:relative; z-index:1; }
.flash{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.02em;
  padding:12px 18px; border-radius:8px; border:1px solid var(--line-2);
  background:var(--bg-2); color:var(--ink-2);
}
.flash.success{ border-color:var(--amber); color:var(--ink); }
.flash.error{ border-color:var(--copper); color:var(--ink); }

/* ---------- Footer ---------- */
.foot{ margin-top:clamp(48px,7vh,90px); border-top:1px solid var(--line); }
.foot-inner{ padding:56px 0 48px; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:32px; }
.signoff{ font-family:var(--display); font-style:italic; font-size:1.5rem; color:var(--ink); max-width:24ch; line-height:1.3; }
.signoff span{ color:var(--amber); }
.foot-links{ display:flex; gap:26px; font-family:var(--mono); font-size:.76rem; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-2); }
.foot-links a{ transition:color .25s; }
.foot-links a:hover{ color:var(--amber); }
.copy{ padding-bottom:36px; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:var(--ink-3); }

/* ---------- Einblenden ---------- */
.rise{ opacity:0; transform:translateY(20px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.d1{ animation-delay:.05s } .d2{ animation-delay:.16s } .d3{ animation-delay:.27s }
.d4{ animation-delay:.38s } .d5{ animation-delay:.49s }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------- Seitenkopf (Zurück-Link + Eyebrow-Label), auf fast jeder Unterseite ---------- */
.back{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2); display:inline-flex; align-items:center; gap:9px; margin-bottom:34px; transition:color .25s,gap .25s; }
.back:hover{ color:var(--amber); gap:14px; }
.eyebrow{ font-family:var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.22em; color:var(--amber); display:inline-flex; align-items:center; gap:12px; margin-bottom:26px; }
.eyebrow::before{ content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--copper),var(--amber)); }

/* ---------- Blog-Karten (Startseite, /blog, DnD/Spieleentwicklung/Reisen) ---------- */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-bottom:12px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.sec-head h2{ font-family:var(--display); font-weight:500; font-size:clamp(1.7rem,3.2vw,2.3rem); letter-spacing:-.02em; margin:0; }
.sec-head .all{ font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-2); transition:color .25s; white-space:nowrap; }
.sec-head .all:hover{ color:var(--amber); }

.post{
  display:grid; grid-template-columns:190px 1fr; gap:32px; align-items:start;
  padding:34px 24px 34px 22px; margin:0 -24px; border-bottom:1px solid var(--line);
  border-left:2px solid transparent; border-radius:6px;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.post:hover{ background:var(--bg-2); border-left-color:var(--amber); transform:translateX(4px); }
.post-meta{ font-family:var(--mono); font-size:.76rem; color:var(--ink-3); letter-spacing:.04em; padding-top:.5rem; }
.post-meta .read{ display:block; margin-top:8px; color:var(--copper); }
.post-body h3{ font-family:var(--display); font-weight:500; font-size:1.5rem; line-height:1.25; letter-spacing:-.01em; margin:0 0 10px; transition:color .25s; }
.post:hover .post-body h3{ color:var(--amber); }
.post-body p{ margin:0; color:var(--ink-2); font-size:1.06rem; max-width:60ch; }
.post-tags{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
.tag{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3); border:1px solid var(--line-2); padding:4px 11px; border-radius:100px; }

@media (max-width:720px){
  .post{ grid-template-columns:1fr; gap:12px; }
  .post-meta{ padding-top:0; }
  .post-meta .read{ display:inline; margin:0 0 0 12px; }
}

/* ---------- Hochzählende Zahlen (Hobbies, Life-Stats, DnD, Spieleentwicklung) ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:clamp(24px,4vw,40px); }
.stat-value{ font-family:var(--display); font-weight:600; font-size:clamp(2rem,4.2vw,2.8rem); color:var(--amber); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.stat-label{ margin-top:10px; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2); }

/* ---------- Generische Buttons/Formulare (Login, Reviews, Admin, ...) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:.76rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--bg); background:var(--amber); border:1px solid var(--amber);
  padding:12px 22px; border-radius:100px; cursor:pointer; transition:transform .25s, background .25s;
}
.btn:hover{ transform:translateY(-2px); background:var(--copper); border-color:var(--copper); }
.btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn.ghost:hover{ border-color:var(--amber); background:var(--amber-soft); color:var(--ink); }

.field{ margin-bottom:22px; }
.field label{ display:block; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2); margin-bottom:10px; }
.field input, .field textarea, .field select{
  width:100%; background:var(--bg-2); border:1px solid var(--line-2); border-radius:8px;
  color:var(--ink); font-family:var(--body); font-size:1rem; padding:12px 14px;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--amber); }
.field-hint{ margin-top:8px; font-size:.82rem; color:var(--ink-3); }

.tag-grid{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.tag-option{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.76rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:100px; padding:9px 16px; cursor:pointer;
  transition:border-color .25s, color .25s;
}
.tag-option:has(input:checked){ border-color:var(--amber); color:var(--ink); background:var(--amber-soft); }
.tag-option input{ accent-color:var(--amber); }

.form-card{
  max-width:520px; margin:0 auto; padding:clamp(28px,4vw,44px);
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
}

@media (max-width:720px){
  body{ font-size:17px; }
  .nav-links{ gap:16px; }
  .foot-inner{ flex-direction:column; align-items:flex-start; }
}

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