/* =============================================================
   Deadmans-Echo — Prototyp Stylesheet
   Basiert auf dem verifizierten Style-Guide (style-guide.md).
   Alle Werte aus dem gerenderten DOM von /guides/ extrahiert.
   ============================================================= */

/* ---- 1. Design Tokens -------------------------------------- */
:root {
  /* Surfaces */
  --dme-bg:           #0F161B;
  --dme-surface:      #0B0E13;
  --dme-surface-2:    #131A20;
  --dme-border:       #22292F;
  --dme-border-hi:    #3A4248;
  --dme-stamp-bg:     rgba(15, 22, 27, .7);

  /* Text */
  --dme-text:         #ADB0BC;
  --dme-text-strong:  #FFFFFF;
  --dme-text-dim:     #6E7681;

  /* Signals */
  --dme-green:        #45F882;
  --dme-red:          #DA0000;
  --dme-yellow:       #FFBE18;

  /* Fonts */
  --font-display:     "Barlow", system-ui, sans-serif;
  --font-body:        "Poppins", system-ui, sans-serif;
  --font-mono:        ui-monospace, "Menlo", monospace;

  /* Layout */
  --container:        1200px;
  --grid-gap:         14px;
}

/* ---- 2. Reset / Base --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--dme-bg);
  color: var(--dme-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--dme-text-strong); }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dme-text-strong);
  margin: 0;
}
h1 { font-size: 42px; line-height: 1.0; letter-spacing: 1px; }
h2 { font-size: 47px; line-height: 1.2; letter-spacing: -1px; color: var(--dme-red); }
h3 { font-size: 28px; line-height: 1.1; letter-spacing: .5px; }
h4 { font-size: 16px; line-height: 1.2; letter-spacing: .5px; font-weight: 600; }

p { margin: 0 0 1em; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---- 3. Site Header (Nav) ---------------------------------- */
.dme-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 22, 27, .85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--dme-border);
}
.dme-site-header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.dme-logo {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 22px;
  color: var(--dme-text-strong);
}
.dme-logo small { font-size: 9px; letter-spacing: 3px; display: block; color: var(--dme-text-dim); margin-top: 2px; }
.dme-nav { display: flex; gap: 22px; align-items: center; }
.dme-nav a {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--dme-text);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .15s, color .15s;
}
.dme-nav a:hover,
.dme-nav a[aria-current="page"] {
  color: var(--dme-red);
  border-bottom-color: var(--dme-red);
}

/* === Dropdown im Nav (z.B. Tools -> Guides, Map) === */
.dme-nav-dropdown { position: relative; display: inline-block; }
.dme-nav-dropdown > .dme-nav-trigger {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.dme-nav-dropdown > .dme-nav-trigger .dme-nav-caret {
  font-size: 10px; opacity: .6; transition: transform .15s;
}
.dme-nav-dropdown:hover > .dme-nav-trigger .dme-nav-caret,
.dme-nav-dropdown:focus-within > .dme-nav-trigger .dme-nav-caret {
  transform: rotate(180deg);
}
.dme-nav-menu {
  position: absolute; top: 100%; left: -8px; z-index: 200;
  background: var(--dme-bg);
  border: 1px solid var(--dme-border);
  min-width: 180px; padding: 4px 0;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 0 1px rgba(69,248,130,.08);
}
.dme-nav-dropdown:hover .dme-nav-menu,
.dme-nav-dropdown:focus-within .dme-nav-menu {
  display: block;
}
.dme-nav-menu a {
  display: block; padding: 10px 16px;
  border-bottom: 1px solid transparent;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--dme-text); text-decoration: none;
}
.dme-nav-menu a:hover {
  color: var(--dme-green);
  background: rgba(69,248,130,.08);
  border-bottom-color: transparent;
}
/* Hover-Brücke: kein Flackern wenn Maus von trigger zu Menu wandert */
.dme-nav-dropdown::after {
  content: ""; position: absolute; top: 100%; left: 0;
  width: 100%; height: 8px; background: transparent;
}

/* ---- 4. Hero Banner (Seitenkopf mit Panorama) -------------- */
.dme-page-hero {
  position: relative;
  background: var(--dme-bg) center/cover no-repeat;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 4px solid var(--dme-red);
}
.dme-page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(15,22,27,.85) 100%);
  pointer-events: none;
}
.dme-page-hero__title {
  position: relative;
  font-size: 88px;
  letter-spacing: 4px;
  z-index: 1;
}

/* ---- 5. Section-Header (DME//ARCHIVE block) ---------------- */
.dme-section-header {
  padding: 60px 0 28px;
}
.dme-section-header__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 14px;
}
.dme-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--dme-green);
}
.dme-eyebrow::before {
  content: "●";
  margin: 0 6px 0 8px;
  color: var(--dme-green);
}
.dme-h1 { /* alias for h1 in sections */ font-size: 42px; }
.dme-trapeze-wrap {
  height: 4px;
  width: 60px;
  background: var(--dme-green);
  margin: 12px 0 10px;
}
.dme-kapitel {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--dme-text);
}
.dme-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--dme-text);
  text-align: right;
  line-height: 1.6;
  white-space: pre-line;
}
.dme-meta strong { color: var(--dme-green); font-weight: 400; }
.dme-lead {
  max-width: 720px;
  margin: 0 0 28px;
  color: var(--dme-text);
}

/* ---- 6. Card Grid ------------------------------------------ */
.dme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
}
.dme-grid--with-hero .dme-card.dme-hero { grid-column: 1 / -1; }

@media (max-width: 1024px) { .dme-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .dme-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .dme-grid { grid-template-columns: 1fr; } }

/* ---- 7. Card Component ------------------------------------- */
.dme-card {
  position: relative;
  background: var(--dme-surface);
  border: 1px solid var(--dme-border);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 261px;
  transition: border-color .2s, transform .2s;
}
.dme-card:hover {
  border-color: var(--dme-green);
  transform: translateY(-2px);
}
.dme-card:hover .dme-cta { text-decoration: underline; }

.dme-thumb {
  position: relative;
  flex: 1 1 auto;
  min-height: 200px;
  background: var(--dme-bg) 50% 50% / cover no-repeat;
}
.dme-thumb::after {
  /* subtle bottom gradient so label/title stay legible */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.75) 100%);
  pointer-events: none;
}

.dme-stamp {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--dme-stamp-bg);
  color: var(--dme-yellow);
  border: 1px solid var(--dme-yellow);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 7px;
  z-index: 2;
}

.dme-cat {
  position: absolute;
  left: 14px;
  bottom: 42px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--dme-green);
  z-index: 2;
}

.dme-title {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--dme-text-strong);
  z-index: 2;
  margin: 0;
}

.dme-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--dme-surface);
  border-top: 1px solid var(--dme-border);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--dme-text);
}
.dme-cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dme-green);
  white-space: nowrap;
}

/* ---- 8. Hero Card (4-col span, two-column layout) ---------- */
.dme-card.dme-hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  min-height: 240px;
}
.dme-hero-img {
  position: relative;
  background: var(--dme-bg) 50% 50% / cover no-repeat;
  min-height: 240px;
}
.dme-hero-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.7) 100%);
}
.dme-hero-img .dme-title {
  font-size: 30px;
  bottom: 20px; left: 20px; right: 20px;
}
.dme-hero-img .dme-cat {
  bottom: 56px; left: 20px;
}
.dme-hero-img .dme-stamp {
  top: 16px; right: auto; left: 20px;
}

.dme-hero-side {
  background: var(--dme-surface);
  padding: 22px 22px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid var(--dme-border);
}
.dme-hero-side__head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--dme-red);
  margin-bottom: 12px;
}
.dme-hero-side__body {
  color: var(--dme-text);
  font-size: 14px;
}
.dme-hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--dme-border);
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--dme-text);
}

@media (max-width: 768px) {
  .dme-card.dme-hero { grid-template-columns: 1fr; }
  .dme-hero-side { border-left: none; border-top: 1px solid var(--dme-border); }
}

/* ---- 9. Two-column content (About-style) ------------------- */
.dme-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 24px 0;
}
@media (max-width: 768px) { .dme-two-col { grid-template-columns: 1fr; } }

/* ---- 10. Table (Leaderboard) ------------------------------- */
.dme-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--dme-surface);
  border: 1px solid var(--dme-border);
}
.dme-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dme-green);
  padding: 12px 16px;
  border-bottom: 1px solid var(--dme-border);
  background: var(--dme-surface-2);
}
.dme-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--dme-border);
  color: var(--dme-text);
}
.dme-table tbody tr:last-child td { border-bottom: none; }
.dme-table tbody tr:hover td { background: rgba(69, 248, 130, .04); }
.dme-table .rank { font-family: var(--font-mono); color: var(--dme-yellow); width: 60px; }
.dme-table .player { color: var(--dme-text-strong); font-weight: 600; }

/* ---- 11. Status pills -------------------------------------- */
.dme-pill {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid var(--dme-green);
  color: var(--dme-green);
  background: rgba(69, 248, 130, .08);
}
.dme-pill--red { border-color: var(--dme-red); color: var(--dme-red); background: rgba(218, 0, 0, .08); }
.dme-pill--yellow { border-color: var(--dme-yellow); color: var(--dme-yellow); background: rgba(255, 190, 24, .08); }

/* ---- 12. Buttons ------------------------------------------- */
.dme-btn {
  display: inline-block;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--dme-green);
  color: var(--dme-green);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.dme-btn:hover { background: var(--dme-green); color: var(--dme-bg); }
.dme-btn--red { border-color: var(--dme-red); color: var(--dme-red); }
.dme-btn--red:hover { background: var(--dme-red); color: var(--dme-text-strong); }

/* ============================================================
   v2 — Spectacular Mode
   Aktiviert durch <body class="dme-v2">.
   ============================================================ */

/* ---- v2.1 — Grain overlay (animiert) ------------------------ */
body.dme-v2::before {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 100;
  opacity: .06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: dme-grain 3s steps(8) infinite;
  mix-blend-mode: overlay;
}
@keyframes dme-grain {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-5%, -3%); }
  50%  { transform: translate(3%, -7%); }
  75%  { transform: translate(-7%, 4%); }
  100% { transform: translate(0,0); }
}

/* ---- v2.2 — Scanlines overlay ------------------------------ */
body.dme-v2::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  opacity: .12;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0) 0px,
    rgba(255,255,255,0) 2px,
    rgba(0,0,0,.35) 3px,
    rgba(0,0,0,.35) 4px
  );
}

/* ---- v2.3 — Glow auf Signal-Farben ------------------------- */
.dme-v2 .dme-cta {
  text-shadow: 0 0 6px rgba(69, 248, 130, .55), 0 0 14px rgba(69, 248, 130, .25);
}
.dme-v2 .dme-eyebrow {
  text-shadow: 0 0 6px rgba(69, 248, 130, .45);
}
.dme-v2 .dme-hero-side__head {
  text-shadow: 0 0 8px rgba(218, 0, 0, .6);
}

/* ---- v3.0 — Rotating glowing SIGNAL triangle -------------- */
/* Ersetzt die alten pulsierenden Punkte.
   5 Umdrehungen pro Loop, ease-in-ease-out, glüht in der Signal-Farbe. */
.dme-signal-dot {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--dme-green);
  clip-path: polygon(50% 4%, 4% 96%, 96% 96%);
  margin-right: 8px;
  filter:
    drop-shadow(0 0 3px var(--dme-green))
    drop-shadow(0 0 6px rgba(69, 248, 130, .6));
  animation: dme-tri-spin 4s ease-in-out infinite;
  transform-origin: 50% 60%;  /* etwas nach unten, damit Rotation um optisches Zentrum geht */
}
@keyframes dme-tri-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(1800deg); }  /* 5 × 360° pro Loop */
}
.dme-signal-dot--red {
  background: var(--dme-red);
  filter:
    drop-shadow(0 0 3px var(--dme-red))
    drop-shadow(0 0 6px rgba(218, 0, 0, .6));
}
.dme-signal-dot--yellow {
  background: var(--dme-yellow);
  filter:
    drop-shadow(0 0 3px var(--dme-yellow))
    drop-shadow(0 0 6px rgba(255, 190, 24, .6));
}

/* ---- v2.5 — HUD corner brackets auf Karten ---------------- */
/* Jede Karte bekommt 4 Eckklammern als Targeting-Reticle.
   4 SVG-Backgrounds, jeweils ein L-Form, in den 4 Ecken positioniert. */
.dme-v2 .dme-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  z-index: 3;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M1,12 L1,1 L12,1' fill='none' stroke='%2345F882' stroke-width='2'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M6,1 L17,1 L17,12' fill='none' stroke='%2345F882' stroke-width='2'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M1,6 L1,17 L12,17' fill='none' stroke='%2345F882' stroke-width='2'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M17,6 L17,17 L6,17' fill='none' stroke='%2345F882' stroke-width='2'/></svg>");
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  opacity: .55;
  transition: opacity .2s, inset .2s;
}
.dme-v2 .dme-card:hover::before {
  opacity: 1;
  inset: 2px;
}

/* ---- v2.6 — Hover-Scan (Linie wandert von oben nach unten) -- */
.dme-v2 .dme-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--dme-green) 50%, transparent 100%);
  box-shadow: 0 0 12px var(--dme-green);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  transition: top .9s ease-in-out, opacity .2s;
}
.dme-v2 .dme-card:hover::after {
  opacity: 1;
  top: calc(100% - 2px);
}

/* ---- v2.7 — Live-Activity-Ticker --------------------------- */
.dme-ticker {
  position: sticky;
  top: 60px; /* below sticky header */
  z-index: 40;
  background: var(--dme-surface);
  border-bottom: 1px solid var(--dme-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--dme-text);
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 0;
}
.dme-ticker__label {
  display: inline-block;
  padding: 0 14px;
  color: var(--dme-bg);
  background: var(--dme-green);
  margin-right: 18px;
  font-weight: 700;
  letter-spacing: 2px;
}
.dme-ticker__inner {
  display: inline-flex;
  gap: 36px;
  animation: dme-ticker 80s linear infinite;
}
.dme-ticker__inner:hover { animation-play-state: paused; }
.dme-ticker__inner span { color: var(--dme-text); }
.dme-ticker__inner b { color: var(--dme-text-strong); font-weight: 600; }
.dme-ticker__inner em { color: var(--dme-green); font-style: normal; }
.dme-ticker__inner i  { color: var(--dme-red); font-style: normal; }
@keyframes dme-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- v2.8 — Diagonal Section Divider ----------------------- */
.dme-divider-diag {
  position: relative;
  height: 80px;
  margin: 0 -50vw; /* allow breakout */
  padding: 0 50vw;
  background: var(--dme-red);
  clip-path: polygon(0 0, 100% 35px, 100% calc(100% - 5px), 0 100%);
}
.dme-divider-diag::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dme-bg);
  clip-path: polygon(0 8px, 100% 43px, 100% 100%, 0 100%);
}

/* ---- v2.9 — Full-bleed Hero mit diagonalem Cut ------------- */
.dme-hero-cinematic {
  position: relative;
  min-height: 80vh;
  background: var(--dme-bg) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: -1px;
}
.dme-hero-cinematic::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 20%, rgba(15,22,27,.65) 70%, rgba(15,22,27,.95) 100%),
    linear-gradient(180deg, rgba(15,22,27,.4) 0%, rgba(15,22,27,0) 30%, rgba(15,22,27,0) 70%, rgba(15,22,27,.85) 100%);
  z-index: 1;
}
.dme-hero-cinematic::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 60px;
  background: var(--dme-bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 2;
}
.dme-hero-cinematic__inner {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 24px;
  max-width: 1000px;
}

/* Glitch title */
.dme-glitch {
  position: relative;
  display: inline-block;
  color: var(--dme-text-strong);
}
.dme-glitch::before,
.dme-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  overflow: hidden;
}
.dme-glitch::before {
  color: var(--dme-red);
  animation: dme-glitch-1 3s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  transform: translateX(-2px);
}
.dme-glitch::after {
  color: var(--dme-green);
  animation: dme-glitch-2 2.4s infinite linear alternate-reverse;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  transform: translateX(2px);
}
@keyframes dme-glitch-1 {
  0%, 92%, 100% { transform: translateX(-2px); }
  93% { transform: translateX(-6px); }
  95% { transform: translateX(4px); }
  97% { transform: translateX(-3px); }
}
@keyframes dme-glitch-2 {
  0%, 91%, 100% { transform: translateX(2px); }
  93% { transform: translateX(6px); }
  95% { transform: translateX(-4px); }
  97% { transform: translateX(3px); }
}

/* ---- v2.10 — Asymmetric Featured Grid ---------------------- */
.dme-feature-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: var(--grid-gap);
}
.dme-feature-grid > .dme-card:nth-child(1) {
  grid-row: span 2;
}
.dme-feature-grid > .dme-card:nth-child(1) .dme-title { font-size: 38px; }
@media (max-width: 768px) {
  .dme-feature-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .dme-feature-grid > .dme-card:nth-child(1) { grid-row: auto; grid-column: 1 / -1; }
}

/* ---- v2.11 — Stat Card mit Counter ------------------------- */
.dme-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  margin: 28px 0;
}
@media (max-width: 768px) { .dme-stat-row { grid-template-columns: repeat(2, 1fr); } }
.dme-stat {
  background: var(--dme-surface);
  border: 1px solid var(--dme-border);
  padding: 18px 20px;
  position: relative;
}
.dme-stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 42px;
  line-height: 1;
  color: var(--dme-text-strong);
  letter-spacing: 1px;
}
.dme-v2 .dme-stat__num { text-shadow: 0 0 12px rgba(69, 248, 130, .25); }
.dme-stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--dme-text);
  margin-top: 8px;
}
.dme-stat__bar {
  height: 2px;
  background: var(--dme-green);
  margin-top: 12px;
  width: 30%;
}

/* ---- v2.11b — Reveal-on-scroll ----------------------------- */
.dme-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.dme-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- v2.12 — Subtile Scan-Animation auf SIGNAL-Pillen ----- */
.dme-v2 .dme-pill {
  position: relative;
  overflow: hidden;
}
.dme-v2 .dme-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform: translateX(-100%);
  animation: dme-shimmer 3.5s infinite;
}
@keyframes dme-shimmer {
  0%, 60% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

/* ---- 13. Footer -------------------------------------------- */
.dme-site-footer {
  margin-top: 80px;
  padding: 40px 0 24px;
  background: var(--dme-surface);
  border-top: 1px solid var(--dme-border);
  font-size: 13px;
  color: var(--dme-text);
}
.dme-site-footer .container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 768px) { .dme-site-footer .container { grid-template-columns: 1fr; } }
.dme-site-footer h4 {
  color: var(--dme-text-strong);
  font-size: 13px;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}
.dme-site-footer ul { list-style: none; padding: 0; margin: 0; }
.dme-site-footer li { margin-bottom: 6px; }
.dme-site-footer__bottom {
  max-width: var(--container);
  margin: 32px auto 0;
  padding: 14px 24px 0;
  border-top: 1px solid var(--dme-border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--dme-text-dim);
}