/* ============================================================
   ENTENMAFIA — "Die Akte" design system
   A duck-mafia case-file aesthetic: dark charcoal shell,
   aged-paper document panels, gold leaf + wax-seal red trim.
   ============================================================ */

:root{
  --bg:        #0c0b0a;
  --bg-alt:    #17130f;
  --bg-alt-2:  #1f1a14;
  --paper:     #ece3cd;
  --paper-dim: #ddd2b6;
  --ink:       #241d13;
  --ink-soft:  #4a3f2d;
  --cream:     #ece4d1;
  --muted:     #a89c85;
  --gold:      #c9a24d;
  --gold-hi:   #e8c876;
  --blood:     #7c2222;
  --blood-hi:  #a52e2e;
  --duck:      #f2c230;

  --display: 'Cinzel', serif;
  --type:    'Special Elite', 'Courier New', monospace;
  --body:    'Crimson Pro', 'Georgia', serif;

  --radius: 2px;
  --shadow-deep: 0 25px 60px -20px rgba(0,0,0,.7);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

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

body{
  margin:0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 1000;
  opacity:.05;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, #fff 0, transparent 1px),
    repeating-radial-gradient(circle at 70% 80%, #fff 0, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  mix-blend-mode: overlay;
}

a{ color: inherit; }
img{ max-width:100%; display:block; }

.eyebrow{
  font-family: var(--type);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--gold);
}

h1,h2,h3{
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--cream);
  margin: 0 0 .5em;
}

h1{ font-size: clamp(2.6rem, 7vw, 5.2rem); letter-spacing:.06em; }
h2{ font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--gold-hi); }
h3{ font-size: 1.25rem; color: var(--gold); }

p{ margin: 0 0 1em; }

.container{
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3rem);
}

/* ---------------- Folder-tab navigation ---------------- */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: linear-gradient(180deg, var(--bg) 60%, rgba(12,11,10,.94));
  border-bottom: 1px solid rgba(201,162,77,.25);
  backdrop-filter: blur(6px);
}
.nav-wrap{
  display:flex; align-items:flex-end; justify-content:space-between;
  max-width: 1080px; margin:0 auto; padding: .9rem clamp(1.25rem,5vw,3rem) 0;
  gap: 1rem;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none;
  padding-bottom: .9rem;
}
.brand-mark{ width:34px; height:34px; flex:none; }
.brand-word{
  font-family: var(--display); font-size:1.05rem; letter-spacing:.12em;
  color: var(--cream); text-transform:uppercase;
}

.tabs{ display:flex; gap:.35rem; list-style:none; margin:0; padding:0; flex-wrap: wrap; }
.tabs a{
  display:block;
  font-family: var(--type);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration:none;
  color: var(--muted);
  background: var(--bg-alt);
  padding: .65rem 1rem .55rem;
  border: 1px solid rgba(201,162,77,.18);
  border-bottom: none;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0% 100%);
  transition: color .2s ease, background .2s ease, transform .15s ease;
}
.tabs a:hover{ color: var(--gold-hi); transform: translateY(-2px); }
.tabs a[aria-current="page"]{
  color: var(--gold-hi);
  background: var(--bg);
  border-color: rgba(201,162,77,.5);
  position: relative;
  z-index: 2;
}

.nav-toggle{ display:none; }

@media (max-width: 640px){
  .nav-wrap{ flex-direction:column; align-items:flex-start; }
  .tabs{ width:100%; }
  .tabs a{ flex:1; text-align:center; padding:.55rem .4rem; font-size:.65rem; }
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  padding: clamp(3.5rem,10vw,7rem) 0 clamp(3rem,8vw,5rem);
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(201,162,77,.14), transparent 60%),
    var(--bg);
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px);
  pointer-events:none;
}
.seal{
  width: clamp(120px,22vw,170px);
  margin: 0 auto 1.6rem;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
  animation: stamp-in .7s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes stamp-in{
  0%{ opacity:0; transform: scale(2.4) rotate(-18deg); }
  60%{ opacity:1; }
  100%{ opacity:1; transform: scale(1) rotate(-6deg); }
}
.hero .eyebrow{ display:block; margin-bottom: 1rem; }
.hero h1{ margin-bottom:.4rem; }
.hero .lede{
  max-width: 46ch; margin: 1rem auto 2rem;
  color: var(--muted); font-size: 1.15rem;
}
.hero .lede em{ color: var(--gold-hi); font-style: normal; }

.cta-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.btn{
  font-family: var(--type);
  font-size: .82rem; letter-spacing:.05em; text-transform:uppercase;
  text-decoration:none;
  padding: .85rem 1.6rem;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  color: var(--bg);
  background: var(--gold);
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.btn:hover{ background: var(--gold-hi); transform: translateY(-2px); }
.btn.ghost{ background: transparent; color: var(--gold-hi); }
.btn.ghost:hover{ background: rgba(201,162,77,.12); }

/* ---------------- Sections on dark shell ---------------- */
section{ padding: clamp(3rem,8vw,5rem) 0; }
.section-head{ max-width: 60ch; margin-bottom: 2.5rem; }
.section-head .eyebrow{ margin-bottom:.6rem; display:block; }

.divider{
  height:1px; border:0;
  background: linear-gradient(90deg, transparent, rgba(201,162,77,.4), transparent);
  margin: 0;
}

/* Dossier cards */
.grid{ display:grid; gap: 1.25rem; }
.grid.cols-2{ grid-template-columns: repeat(2,1fr); }
@media (max-width: 720px){ .grid.cols-2{ grid-template-columns: 1fr; } }

.card{
  position:relative;
  background: var(--bg-alt);
  border: 1px solid rgba(201,162,77,.22);
  padding: 1.6rem 1.6rem 1.4rem;
  border-radius: var(--radius);
}
.card .num{
  font-family: var(--type); color: var(--blood-hi);
  font-size:.75rem; letter-spacing:.1em; display:block; margin-bottom:.5rem;
}
.card .stamp{
  position:absolute; top:1rem; right:1.1rem;
  font-family: var(--type); font-size:.62rem; letter-spacing:.12em;
  color: var(--blood-hi); border: 1.5px solid var(--blood-hi);
  padding: .15rem .45rem; border-radius: 2px;
  transform: rotate(8deg);
  opacity:.85;
}

/* Stat row — fingerprint-card style */
.statline{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem;
  border-top: 1px solid rgba(201,162,77,.25);
  border-bottom: 1px solid rgba(201,162,77,.25);
  padding: 1.6rem 0;
}
@media (max-width: 640px){ .statline{ grid-template-columns: 1fr 1fr; } }
.statline .stat b{
  display:block; font-family: var(--display); font-size: 1.8rem; color: var(--gold-hi);
}
.statline .stat span{
  font-family: var(--type); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--muted);
}

/* Telegram / join-note block */
.telegram{
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius);
  padding: 2rem clamp(1.4rem,5vw,2.6rem);
  box-shadow: var(--shadow-deep);
  position: relative;
}
.telegram::before{
  content: "PER EXPRESS · VERTRAULICH";
  font-family: var(--type); font-size:.62rem; letter-spacing:.16em;
  color: var(--blood);
  display:block; margin-bottom: 1rem;
}
.telegram h2{ color: var(--ink); }
.telegram code{
  font-family: var(--type);
  background: var(--ink); color: var(--gold-hi);
  padding: .5rem .8rem; border-radius: 3px;
  display:inline-block; margin: .4rem 0 1rem; font-size:1.05rem;
}
.telegram ol{ padding-left: 1.2rem; }
.telegram li{ margin-bottom:.5rem; }

/* ---------------- Footer ---------------- */
.site-footer{
  border-top: 1px solid rgba(201,162,77,.2);
  padding: 2.2rem 0 2.6rem;
  color: var(--muted);
  font-size:.9rem;
}
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-links{ display:flex; gap:1.2rem; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
.footer-links a{ text-decoration:none; color: var(--muted); font-family: var(--type); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }
.footer-links a:hover{ color: var(--gold-hi); }

/* ============================================================
   Document pages (Impressum / Datenschutz / AGB)
   ============================================================ */
.doc-hero{
  padding: 3rem 0 1.5rem;
  text-align:left;
  background: var(--bg);
}
.doc-hero .eyebrow{ display:block; margin-bottom:.6rem; }

.doc-sheet{
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(1.6rem,5vw,3rem);
  margin: 0 0 4rem;
  box-shadow: var(--shadow-deep);
}
.doc-sheet h2{
  color: var(--ink);
  font-size: 1.3rem;
  border-bottom: 1px solid var(--ink-soft);
  padding-bottom: .5rem;
  margin-top: 2.2rem;
}
.doc-sheet h2:first-child{ margin-top:0; }
.doc-sheet h3{ color: var(--ink-soft); font-size: 1.05rem; }
.doc-sheet p, .doc-sheet li{ color: var(--ink); }
.doc-sheet a{ color: var(--blood); }
.doc-sheet ul, .doc-sheet ol{ padding-left: 1.3rem; }
.doc-sheet .placeholder{
  background: rgba(124,34,34,.12);
  color: var(--blood);
  padding: .05rem .35rem;
  border-radius: 2px;
  font-family: var(--type);
  font-size: .92em;
}
.doc-note{
  font-family: var(--type);
  font-size: .8rem;
  color: var(--muted);
  border: 1px dashed rgba(201,162,77,.4);
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  margin-bottom: 2.5rem;
}
.doc-note b{ color: var(--gold-hi); }

.stamp-final{
  font-family: var(--type); font-size:.68rem; letter-spacing:.1em; color: var(--muted);
  margin-top: 1rem;
}

/* ---------------- Command ledger (mc5 bot page) ---------------- */
.command-list{
  list-style:none; margin:0; padding:0;
  border-top: 1px solid rgba(201,162,77,.25);
}
.command-list li{
  display:flex; align-items:baseline; gap: 1.4rem;
  padding: 1rem 0;
  border-bottom: 1px dashed rgba(201,162,77,.25);
}
.command-list code{
  flex: none;
  font-family: var(--type); font-size: .82rem;
  color: var(--gold-hi); background: var(--bg-alt);
  border: 1px solid rgba(201,162,77,.3);
  padding: .3rem .6rem; border-radius: 3px;
  white-space: nowrap;
}
.command-list span{ color: var(--muted); }
@media (max-width: 640px){
  .command-list li{ flex-direction:column; gap:.35rem; }
}

.bot-hero{
  padding: clamp(3rem,8vw,4.5rem) 0 clamp(1.5rem,4vw,2rem);
  background: radial-gradient(ellipse at 50% -10%, rgba(201,162,77,.12), transparent 60%), var(--bg);
}
.bot-hero .brand-mark-lg{ width: 34px; height:34px; margin-bottom: 1.2rem; filter: drop-shadow(0 10px 20px rgba(0,0,0,.5)); }
.bot-hero .lede{ max-width: 56ch; color: var(--muted); font-size: 1.1rem; }