/* VAULT-REDESIGN-V1 */
/* =========================================================================
   dontkyc.me — "Vault" Visual Layer
   -------------------------------------------------------------------------
   Additive re-skin for Profil (profile.php), Einstellungen (settings.php)
   and den Footer (includes/footer.php). Wird NUR innerhalb von .vault-shell
   angewendet (siehe Wrapper in den drei Dateien) -- greift also nicht in
   Verzeichnis/Diensteinzelansicht/Forum ein und kollidiert nicht mit den
   bestehenden Tailwind-/mk-card-Klassen dort.

   Wiederverwendet bewusst die bereits vorhandenen echten Tokens der Seite
   (--accent, Space Grotesk/Inter aus style.css) statt sie zu ueberschreiben,
   damit Marke/Farbwelt unveraendert bleiben. Neue Tokens sind mit "--vlt-"
   praefixiert, um mit nichts Bestehendem zu kollidieren.
   ========================================================================= */

.vault-shell{
  --vlt-surface: #121715;
  --vlt-surface-2: #171d1a;
  --vlt-surface-3: #1d2521;
  --vlt-border: #262f2b;
  --vlt-border-soft: #1b211e;
  --vlt-fg: #eef2ee;
  --vlt-fg-dim: #a3ada2;
  --vlt-fg-faint: #687066;
  --vlt-accent: var(--accent, #10b981);
  --vlt-accent-soft: rgba(16,185,129,0.12);
  --vlt-accent-dim: #0d9c6e;
  --vlt-gold: #f0c35e;
  --vlt-gold-soft: rgba(240,195,94,0.12);
  --vlt-gold-dim: #caa03f;
  --vlt-red: #ff7a72;
  --vlt-red-soft: rgba(255,122,114,0.12);
  --vlt-red-dim: #e2564e;
  --vlt-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -14px rgba(0,0,0,.55);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
[data-theme="light"] .vault-shell{
  --vlt-surface: #ffffff;
  --vlt-surface-2: #eef1ea;
  --vlt-surface-3: #e4e9de;
  --vlt-border: #dce2d5;
  --vlt-border-soft: #e9ece3;
  --vlt-fg: #12160f;
  --vlt-fg-dim: #4d5649;
  --vlt-fg-faint: #818a78;
  --vlt-accent-soft: #e2f2e9;
  --vlt-gold-soft: #f8eed6;
  --vlt-red-soft: #fbecea;
  --vlt-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 26px -16px rgba(20,30,20,.18);
}

.vault-shell h1, .vault-shell h2, .vault-shell h3, .vault-shell h4{
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -.01em;
}

/* ---- Panel: ersetzt/erweitert .mk-card innerhalb des Vault-Bereichs ---- */
.vault-shell .vlt-panel{
  background: var(--vlt-surface);
  border: 1px solid var(--vlt-border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--vlt-shadow);
  margin-bottom: 20px;
  color: var(--vlt-fg);
}
.vault-shell .vlt-panel h2{
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: var(--vlt-fg);
}
.vault-shell .vlt-ic-wrap{
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--vlt-accent-soft); color: var(--vlt-accent);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.vault-shell .vlt-ic-wrap svg{ width:16px; height:16px; }
.vault-shell .vlt-hint{ font-size: 12.5px; color: var(--vlt-fg-faint); margin: -8px 0 14px; }

/* ---- Stat-Tiles (ersetzt grid.mk-card-Zahlenkacheln) ---- */
.vault-shell .vlt-stat-tile{
  background: var(--vlt-surface); border: 1px solid var(--vlt-border);
  border-radius: 16px; padding: 16px 18px; box-shadow: var(--vlt-shadow);
}
.vault-shell .vlt-stat-tile b{ display:block; font-family:'Space Grotesk',sans-serif; font-size:24px; color:var(--vlt-fg); }
.vault-shell .vlt-stat-tile span{ font-size:12px; color:var(--vlt-fg-faint); }

/* ---- Hero (Profil-Kopf) ---- */
.vault-shell .vlt-hero{ display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; padding-bottom:20px; }
.vault-shell .vlt-avatar{
  width:88px; height:88px; border-radius:22px; background:var(--vlt-accent-soft); color:var(--vlt-accent);
  display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:30px; flex:none; overflow:hidden;
}
.vault-shell .vlt-avatar img{ width:100%; height:100%; object-fit:cover; }
.vault-shell .vlt-hero h1{ font-size:26px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; color:var(--vlt-fg); margin:0; }
.vault-shell .vlt-v-tick{ width:19px; height:19px; color:var(--vlt-gold); flex:none; }
.vault-shell .vlt-meta-line{ display:flex; gap:9px; align-items:center; margin-top:6px; flex-wrap:wrap; font-size:13px; color:var(--vlt-fg-faint); }
.vault-shell .vlt-rep-ring{ position:relative; width:72px; height:72px; border-radius:50%; flex:none; }
.vault-shell .vlt-rep-ring::after{ content:''; position:absolute; inset:8px; background:var(--vlt-surface); border-radius:50%; }
.vault-shell .vlt-rep-ring span{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; }
.vault-shell .vlt-rep-ring span b{ font-family:'Space Grotesk',sans-serif; font-size:18px; line-height:1; color:var(--vlt-fg); }
.vault-shell .vlt-rep-ring span small{ font-size:9px; color:var(--vlt-fg-faint); }

/* ---- Badges-Grid ---- */
.vault-shell .vlt-badges-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:14px; }
.vault-shell .vlt-badge-tile{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.vault-shell .vlt-badge-tile .vlt-b-ic{ width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; flex:none; }
.vault-shell .vlt-badge-tile .vlt-b-ic.accent{ background:var(--vlt-accent-soft); color:var(--vlt-accent); }
.vault-shell .vlt-badge-tile .vlt-b-ic.gold{ background:var(--vlt-gold-soft); color:var(--vlt-gold); }
.vault-shell .vlt-badge-tile .vlt-b-ic svg{ width:24px; height:24px; }
.vault-shell .vlt-badge-tile b{ font-size:11.5px; font-weight:700; color:var(--vlt-fg); }
.vault-shell .vlt-badge-tile span{ font-size:10px; color:var(--vlt-fg-faint); }
.vault-shell .vlt-badge-tile.locked .vlt-b-ic{ background:var(--vlt-surface-2); color:var(--vlt-fg-faint); opacity:.5; }
.vault-shell .vlt-badge-tile.locked b, .vault-shell .vlt-badge-tile.locked span{ opacity:.45; }

/* ---- Akkordeon-Panels (bestehendes <details>, nur Vault-Optik) ---- */
.vault-shell details.vlt-accordion{
  background: var(--vlt-surface); border:1px solid var(--vlt-border); border-radius:18px;
  margin-bottom:16px; box-shadow:var(--vlt-shadow); overflow:hidden;
}
.vault-shell details.vlt-accordion > summary{
  list-style:none; cursor:pointer; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.vault-shell details.vlt-accordion > summary::-webkit-details-marker{ display:none; }
.vault-shell details.vlt-accordion > summary h2{ margin:0; font-size:15.5px; }
.vault-shell details.vlt-accordion .vlt-chevron{ transition:transform .15s; color:var(--vlt-fg-faint); }
.vault-shell details.vlt-accordion[open] .vlt-chevron{ transform:rotate(180deg); }
.vault-shell details.vlt-accordion > div{ padding:0 22px 22px; }

/* ---- Settings: Sidebar-Nav + Switch-Rows ---- */
.vault-shell .vlt-set-nav a{
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px;
  font-size:13.5px; font-weight:600; color:var(--vlt-fg-faint); text-decoration:none; margin-bottom:2px;
}
.vault-shell .vlt-set-nav a svg{ flex:none; }
.vault-shell .vlt-set-nav a:hover{ background:var(--vlt-surface-2); color:var(--vlt-fg); }
.vault-shell .vlt-set-nav a.active{ background:var(--vlt-accent-soft); color:var(--vlt-accent); }
.vault-shell .vlt-set-nav a.danger{ color:var(--vlt-red-dim); }
.vault-shell .vlt-set-nav a.danger.active, .vault-shell .vlt-set-nav a.danger:hover{ background:var(--vlt-red-soft); color:var(--vlt-red); }
.vault-shell .vlt-switch-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:14px; border-top:1px solid var(--vlt-border-soft); }
.vault-shell .vlt-switch-row:first-of-type{ border-top:0; padding-top:0; }
.vault-shell .vlt-switch-row .vlt-txt b{ display:block; font-size:13.5px; font-weight:600; color:var(--vlt-fg); }
.vault-shell .vlt-switch-row .vlt-txt span{ font-size:12px; color:var(--vlt-fg-faint); }

/* ---- Comments / Kommentare ---- */
.vault-shell .vlt-comment{ display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--vlt-border-soft); }
.vault-shell .vlt-comment:last-child{ border-bottom:0; }
.vault-shell .vlt-comment .vlt-cav{ width:36px; height:36px; border-radius:10px; background:var(--vlt-surface-2); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; flex:none; color:var(--vlt-fg); }
.vault-shell .vlt-comment .vlt-cbody{ flex:1; min-width:0; }
.vault-shell .vlt-comment .vlt-chead{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:12.5px; }
.vault-shell .vlt-comment .vlt-chead b{ font-size:13.5px; color:var(--vlt-fg); }
.vault-shell .vlt-comment .vlt-chead .vlt-time{ color:var(--vlt-fg-faint); font-size:11.5px; }
.vault-shell .vlt-comment .vlt-ctext{ margin-top:5px; font-size:13.5px; color:var(--vlt-fg-dim); }

/* ---- Footer (Vault-Optik) ---- */
footer.vault-shell{ border-top:1px solid var(--vlt-border-soft); background:var(--vlt-surface-3); }
footer.vault-shell .vlt-foot-top{ max-width:1180px; margin:0 auto; padding:40px 24px; display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:28px; }
@media (max-width:980px){ footer.vault-shell .vlt-foot-top{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:640px){ footer.vault-shell .vlt-foot-top{ grid-template-columns:1fr 1fr; } }
footer.vault-shell .vlt-foot-colh{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--vlt-fg-faint); margin-bottom:12px; }
footer.vault-shell .vlt-foot-col a{ display:flex; align-items:center; gap:6px; padding:4px 0; font-size:13px; color:var(--vlt-fg-dim); text-decoration:none; }
footer.vault-shell .vlt-foot-col a:hover{ color:var(--vlt-fg); }
footer.vault-shell .vlt-foot-col a svg{ width:13px; height:13px; flex:none; color:var(--vlt-accent); }
footer.vault-shell .vlt-foot-bottom{ max-width:1180px; margin:0 auto; padding:18px 24px; border-top:1px solid var(--vlt-border-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--vlt-fg-faint); }

/* ---- Sanktions-Radar (sanktionsradar.php) ----
   Rein additive Retusche der BESTEHENDEN .sr-* Klassen/IDs aus style.css --
   keine davon wird umbenannt oder entfernt (sanktionsradar.js greift per
   getElementById('sr-map'/'sr-panel') und .sr-active/.sr-compare-btn darauf
   zu; renderPanel() setzt panel.className = 'sr-panel' bei jedem Klick neu,
   darum wirkt die Vault-Optik hier ueber den Selector .vault-shell .sr-panel
   und nicht ueber eine zusaetzliche Klasse direkt am Element, die sonst beim
   ersten Klick verloren ginge). */
.vault-shell .vlt-sr-stats{ display:flex; gap:14px; flex-wrap:wrap; margin:0 0 18px; }
.vault-shell .vlt-sr-stats .vlt-stat-tile{
  background: var(--vlt-surface);
  border: 1px solid var(--vlt-border);
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: var(--vlt-shadow);
  min-width: 140px;
}
.vault-shell .sr-legend{ color: var(--vlt-fg-faint); }
.vault-shell .sr-legend .sr-sw{ border-color: var(--vlt-border); }
.vault-shell .mk-card.sr-mapbox,
.vault-shell .mk-card.sr-panel,
.vault-shell .mk-card.sr-compare-card{
  background: var(--vlt-surface);
  border: 1px solid var(--vlt-border);
  border-radius: 18px;
  box-shadow: var(--vlt-shadow);
  color: var(--vlt-fg);
}
.vault-shell .sr-panel h2{ color: var(--vlt-fg); }
.vault-shell .sr-panel.sr-empty{ color: var(--vlt-fg-faint); }
.vault-shell .sr-maphint{ background: var(--vlt-surface-3); border-color: var(--vlt-border); color: var(--vlt-fg-faint); }
.vault-shell .sr-svc{ border-color: var(--vlt-border-soft); }
.vault-shell .sr-svc-name{ color: var(--vlt-fg); }
.vault-shell .sr-svc-cat, .vault-shell .sr-svc-date{ color: var(--vlt-fg-faint); }
.vault-shell .sr-svc-note{ color: var(--vlt-fg-dim); }
.vault-shell .sr-svc-score, .vault-shell .sr-svc-link{ color: var(--vlt-accent); }
.vault-shell .sr-badge-demo{ background: var(--vlt-accent-soft); border-color: var(--vlt-accent-dim); color: var(--vlt-accent); }
.vault-shell .sr-badge-demo i{ background: var(--vlt-accent); }
.vault-shell .sr-compare-btn{ background: var(--vlt-surface-2); border-color: var(--vlt-border); color: var(--vlt-fg-dim); border-radius: 999px; }
.vault-shell .sr-compare-btn:hover{ border-color: var(--vlt-border); color: var(--vlt-fg); }
.vault-shell .sr-compare-btn.active{ background: var(--vlt-accent-soft); border-color: var(--vlt-accent-dim); color: var(--vlt-accent); }
.vault-shell .sr-compare-label{ color: var(--vlt-fg-faint); }
.vault-shell .sr-compare-mapbox{ border: 1px solid var(--vlt-border); }

/* ---- Verzeichnis (verzeichnis.php) ----
   Rein additive Retusche der Seiten-Chrome (Kopf, Seitenleiste, Filter,
   Ansichts-/Sortierleiste, Modals). Die Service-Karten selbst
   (render_service_card() / buildCardHTML()) bleiben unangetastet, da beide
   synchron bleiben muessen -- kein Risiko einer optischen Abweichung nach
   AJAX-Filterung. Alles hier haengt an den BESTEHENDEN dk-*/cat-*/mk-card-
   Klassen, es wurde keine Klasse umbenannt. */
.vault-shell .dk-dir-title{ color: var(--vlt-fg); font-family:'Space Grotesk','Inter',sans-serif; }
.vault-shell .dk-dir-sub{ color: var(--vlt-fg-faint); }
.vault-shell .dk-dir-stats{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:12.5px; color: var(--vlt-fg-faint); align-items:center; }
.vault-shell .dk-dir-stats b{ color: var(--vlt-fg); font-family:'Space Grotesk',sans-serif; }
.vault-shell .dk-dir-stats .dot{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:2px; }
.vault-shell .dk-dir-stats .dot.ok{ background: var(--vlt-accent); }
.vault-shell .dk-dir-stats .dot.bad{ background: var(--vlt-red); }
.vault-shell .dk-dir-stats .dot.kyc{ background: var(--vlt-gold); }

.vault-shell .dk-side-block{ background: var(--vlt-surface); border:1px solid var(--vlt-border); border-radius:16px; padding:16px; box-shadow: var(--vlt-shadow); margin-bottom:14px; }
.vault-shell .dk-side-title{ color: var(--vlt-fg); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; list-style:none; }
.vault-shell .dk-side-title::-webkit-details-marker{ display:none; }
.vault-shell #search, .vault-shell #sort{ background: var(--vlt-surface-2) !important; border-color: var(--vlt-border) !important; color: var(--vlt-fg); }
.vault-shell #search:focus, .vault-shell #sort:focus{ border-color: var(--vlt-accent) !important; }
.vault-shell .dk-cat-list{ display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.vault-shell .cat-tile{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; color: var(--vlt-fg-dim); text-decoration:none; font-size:13px; }
.vault-shell .cat-tile:hover{ background: var(--vlt-surface-2); color: var(--vlt-fg); }
.vault-shell .cat-tile.active{ background: var(--vlt-accent-soft); color: var(--vlt-accent); font-weight:600; }
.vault-shell .cat-tile .cat-tile-label{ flex:1; }
.vault-shell .cat-tile .cat-tile-count{ color: var(--vlt-fg-faint); font-size:11.5px; }
.vault-shell .dk-feature-list{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.vault-shell .cat-chip{ display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border-radius:999px; background: var(--vlt-surface-2); border:1px solid var(--vlt-border); color: var(--vlt-fg-dim); font-size:12px; cursor:pointer; }
.vault-shell .cat-chip.active{ background: var(--vlt-accent-soft); border-color: var(--vlt-accent-dim); color: var(--vlt-accent); }

.vault-shell .dk-viewbar{ margin-bottom:10px; }
.vault-shell .dk-vt button{ background: var(--vlt-surface); border:1px solid var(--vlt-border); color: var(--vlt-fg-faint); }
.vault-shell .dk-vt button[aria-pressed="true"]{ background: var(--vlt-accent-soft); border-color: var(--vlt-accent-dim); color: var(--vlt-accent); }
.vault-shell .dk-list-head{ color: var(--vlt-fg-faint); border-color: var(--vlt-border-soft); }
.vault-shell .dk-list-head [data-sort].on{ color: var(--vlt-accent); }
.vault-shell .load-more-btn{ background: var(--vlt-surface-2) !important; border-color: var(--vlt-border) !important; color: var(--vlt-fg); }
.vault-shell .load-more-btn:hover{ background: var(--vlt-accent) !important; color: #06281d !important; border-color: var(--vlt-accent) !important; }
.vault-shell #paginationNav a{ background: var(--vlt-surface-2); color: var(--vlt-fg-faint); }
.vault-shell #paginationNav a[class*="bg-emerald"]{ background: var(--vlt-accent) !important; color: #06281d; }

.vault-shell#suggestModal .mk-card,
.vault-shell#reportModal .mk-card{ background: var(--vlt-surface); border:1px solid var(--vlt-border); color: var(--vlt-fg); box-shadow: var(--vlt-shadow); }
.vault-shell#suggestModal input, .vault-shell#suggestModal select, .vault-shell#suggestModal textarea,
.vault-shell#reportModal input, .vault-shell#reportModal select, .vault-shell#reportModal textarea{
  background: var(--vlt-surface-2) !important; border-color: var(--vlt-border) !important; color: var(--vlt-fg);
}

/* --- Diensteinzelansicht (service.php): additive Haertung, kein neues
   Farbschema noetig (die Seite nutzt bereits dieselben mk-card/
   svc-glass-card-Verlaeufe wie Footer/Profil/Einstellungen). Fixt nur,
   dass lange, nicht umbrechbare Strings (z.B. eine volle .onion-Adresse
   ohne Schema in tor_url) auf schmalen Bildschirmen die Seite horizontal
   aufreissen koennen. */
.vault-shell .svc-box{ min-width:0; }
.vault-shell .svc-box span{ overflow-wrap:anywhere; word-break:break-word; min-width:0; }
.vault-shell .mk-similar-item,
.vault-shell .mk-timeline-row{ min-width:0; }

/* --- Icon-Sprite (aus dem Vault-Mockup uebernommen): .vlt-ic referenziert
   per <use href="#ic-..."> die Symbole, die header.php direkt nach <body>
   einbindet (site-weit verfuegbar, da header.php ueberall eingebunden
   wird). currentColor erbt automatisch die Textfarbe des umgebenden
   Elements, daher kein eigenes Farb-Styling hier noetig. */
.vlt-ic{ width:1em; height:1em; display:inline-block; vertical-align:-0.125em; flex:none; }

/* Feature-Badge-Chip: Icon + Label, wie im Mockup unter den Score-Ringen
   (Tor-erreichbar / PGP-Schluessel / Open Source / Keine Registrierung /
   Verifizierter Anbieter). Ersetzt die bisherigen reinen Text-Spans mit
   Icon+Text, Darstellung bleibt ein einzeiliger Chip. */
.vault-shell .vlt-feature-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px;
  background: var(--vlt-surface-2); border:1px solid var(--vlt-border);
  color: var(--vlt-fg-dim); font-size:12.5px; line-height:1;
}
.vault-shell .vlt-feature-chip.is-yes{ color: var(--vlt-accent); border-color: var(--vlt-accent-dim); background: var(--vlt-accent-soft); }
.vault-shell .vlt-feature-chip.is-no{ color: var(--vlt-fg-faint); opacity:.65; }
.vault-shell .vlt-feature-chip .vlt-ic{ color:inherit; }

/* Badge-Reihe (mehrere Chips nebeneinander, umbrechend) */
.vault-shell .vlt-badge-row{ display:flex; flex-wrap:wrap; gap:7px; }

/* ===================== BATCH 2: public pages + forum + blog ===================== */

/* VAULT-REDESIGN-V1 — Forum (forum/index.php, forum/category.php, forum/thread.php,
   forum/new-thread.php, forum/search.php, forum/tag.php, forum/notifications.php)
   -------------------------------------------------------------------------
   Rein additive Retusche der BESTEHENDEN Forum-Klassen aus style.css
   (.mk-card, .dk-cat-row, .forum-cat-card, .dk-unread-dot, .forum-vote-pill/
   -btn/-score, .forum-post-content, .editor-btn, .blog-wysiwyg,
   .forum-author-card). Keine dieser Klassen wird umbenannt oder in ihrer
   Struktur veraendert - nur Farben/Schatten werden innerhalb von
   .vault-shell auf die --vlt-*-Tokens umgestellt, Layout/Abstand/Border-
   Radius bleiben wie im bestehenden style.css definiert. Die Vote-Buttons
   (voteThread()/voteComment() in forum/thread.php) greifen ausschliesslich
   per classList.add/remove('upvoted'/'downvoted') zu, nie per className=
   -Literal, daher ist die reine CSS-Retusche hier gefahrlos. */

/* ---- Generische Karten (Sortier-Leiste, Thread-/Kommentar-Karten,
   Antwortformular, Melden-/Bewerten-/Disput-Modals, neuer-Beitrag-Formular) ---- */
.vault-shell .mk-card{
  background: var(--vlt-surface);
  border: 1px solid var(--vlt-border);
  box-shadow: var(--vlt-shadow);
  color: var(--vlt-fg);
}
.vault-shell .mk-card.mk-card-hoverable:hover{ border-color: var(--vlt-accent-dim); }

/* ---- Kategorie-Listenzeilen (forum/index.php) ---- */
.vault-shell .dk-cat-row{ border-bottom-color: var(--vlt-border-soft); }
.vault-shell .dk-cat-row:hover{ background: var(--vlt-surface-2); }

/* ---- Thread-/Suchergebnis-Karten (forum/index.php, category.php,
   search.php, tag.php) ---- */
.vault-shell .forum-cat-card:hover{
  border-color: var(--vlt-accent-dim);
  box-shadow: 0 12px 30px -12px var(--vlt-accent-soft);
}

/* ---- "Neu seit letztem Besuch"-Punkt ---- */
.vault-shell .dk-unread-dot{
  background: var(--vlt-accent);
  box-shadow: 0 0 0 3px var(--vlt-accent-soft);
}

/* ---- Autoren-Karte neben Thread/Kommentaren (forum_render_author_card()) ---- */
.vault-shell a.forum-author-card:hover{ background: var(--vlt-surface-2); }

/* ---- +/- Bewertungs-Pille (Thread + Kommentare, forum/thread.php) ---- */
.vault-shell .forum-vote-pill{ background: var(--vlt-surface-2); }
.vault-shell .forum-vote-btn{ color: var(--vlt-fg-faint); }
.vault-shell .forum-vote-btn:hover:not(:disabled){ background: var(--vlt-surface-3); color: var(--vlt-fg); }
.vault-shell .forum-vote-btn.upvoted{ background: var(--vlt-accent-soft); color: var(--vlt-accent); }
.vault-shell .forum-vote-btn.downvoted{ background: var(--vlt-red-soft); color: var(--vlt-red); }
.vault-shell .forum-vote-score{ color: var(--vlt-fg-faint); }
.vault-shell .forum-vote-score.positive{ color: var(--vlt-accent); }
.vault-shell .forum-vote-score.negative{ color: var(--vlt-red); }

/* ---- Beitragstext-Typografie (Thread-Inhalt + Kommentare) ---- */
.vault-shell .forum-post-content blockquote{ border-left-color: var(--vlt-accent-dim); color: var(--vlt-fg-dim); }
.vault-shell .forum-post-content a{ color: var(--vlt-accent); }
.vault-shell .forum-post-content code,
.vault-shell .forum-post-content pre{ background: var(--vlt-surface-2); color: var(--vlt-fg-dim); }

/* ---- Rich-Text-Editor-Toolbar (neuer Beitrag + Antwortformular) ---- */
.vault-shell .editor-btn{ color: var(--vlt-fg-dim); }
.vault-shell .editor-btn:hover{ background: var(--vlt-surface-3); }
.vault-shell .blog-wysiwyg{ color: var(--vlt-fg); }
.vault-shell .blog-wysiwyg:empty::before{ color: var(--vlt-fg-faint); }
.vault-shell .blog-wysiwyg h2, .vault-shell .blog-wysiwyg h3{ color: var(--vlt-fg); }
.vault-shell .blog-wysiwyg blockquote{ border-left-color: var(--vlt-accent-dim); color: var(--vlt-fg-dim); }
.vault-shell .blog-wysiwyg pre{ background: var(--vlt-surface-2); }
.vault-shell .blog-wysiwyg a{ color: var(--vlt-accent); }

/* VAULT-REDESIGN-V1 */
/* =========================================================================
   dontkyc.me — "Vault" Visual Layer
   -------------------------------------------------------------------------
   Additive re-skin for the Forum-Marktplatz sub-area (forum/marktplatz.php,
   forum/marketplace-dashboard.php, forum/marketplace-new.php,
   forum/redeem-invite.php), the Blog (blog/index.php, blog/post.php,
   blog/serie.php) and three shared partials (includes/guest-cta.php,
   includes/forum-announcement-banner.php, includes/registration-popup.php
   — the latter has no markup of its own, pure gating logic, nothing to
   restyle there).

   Technique: all of this is applied via DESCENDANT SELECTORS scoped under
   .vault-shell, targeting the pages' own existing .mk-*/.dk-*/.blog-*/
   .featured-*/.author-avatar classes — none of those classes were renamed
   or removed in the markup, so no JS selector (there is none referencing
   them anyway, verified) can ever be affected. The two exceptions are
   .vlt-stat-tile, added directly+additively alongside .mk-card on the four
   genuine labelled-number tiles in marketplace-dashboard.php (a verbatim
   natural fit for that existing reusable component class), and
   .vlt-announce-bar, added directly+additively to the forum announcement
   banner's outer wrapper (it has no existing custom class to hook a
   descendant selector onto, and nothing in JS references that div).

   guest-cta.php and forum-announcement-banner.php are PARTIALS with no
   page shell of their own — they only render correctly once this CSS is
   loaded on a page that itself carries the .vault-shell wrapper (every
   page in this batch does; other already-shipped Vault pages that include
   guest-cta.php, e.g. verzeichnis.php, do too).
   ========================================================================= */

/* ---------------------------------------------------------------------
   Generic card (.mk-card) — used throughout the marketplace sub-area and
   the blog (comment cards, prev/next-article cards, "more from this
   series" cards, blog grid cards via .blog-card.mk-card, etc.). Already
   has its own radius/margin from style.css; we only flip the surface,
   border and shadow onto the Vault token palette.
   --------------------------------------------------------------------- */
.vault-shell .mk-card{
  background: var(--vlt-surface);
  border-color: var(--vlt-border);
  box-shadow: var(--vlt-shadow);
  color: var(--vlt-fg);
}

/* Stat tiles (marketplace-dashboard.php) — .vlt-stat-tile is added directly
   in the markup alongside .mk-card; this just lets its own background/
   border/shadow win over the plain .mk-card rule above for those four
   tiles specifically (same specificity, declared later = wins). */
.vault-shell .vlt-stat-tile{
  background: var(--vlt-surface);
  border: 1px solid var(--vlt-border);
  box-shadow: var(--vlt-shadow);
}

/* ---------------------------------------------------------------------
   Marktplatz browse page (forum/marktplatz.php): category pills, the
   "Angebot einstellen" button, the listing grid cards.
   --------------------------------------------------------------------- */
.vault-shell .mk-cat-pill{
  background: var(--vlt-surface-2);
  border-color: var(--vlt-border);
  color: var(--vlt-fg-dim);
}
.vault-shell .mk-cat-pill.active{
  background: var(--vlt-accent);
  border-color: var(--vlt-accent);
  color: #06281d;
}
.vault-shell .mk-nav-btn{
  background: var(--vlt-accent);
  color: #06281d;
}
.vault-shell .mk-nav-btn.secondary{
  background: transparent;
  border-color: var(--vlt-border);
  color: var(--vlt-fg-dim);
}
.vault-shell .mk-svc-card{
  background: var(--vlt-surface);
  border-color: var(--vlt-border);
  box-shadow: var(--vlt-shadow);
}
.vault-shell .mk-svc-card:hover{
  border-color: var(--vlt-accent-dim);
}
.vault-shell .mk-svc-name{ color: var(--vlt-fg); }
.vault-shell .mk-svc-cat{
  background: var(--vlt-surface-2);
  color: var(--vlt-fg-dim);
}

/* ---------------------------------------------------------------------
   includes/guest-cta.php — hero accordion, "Verdienen" teaser accordion,
   tier cards, registration modal and dismissible bottom bar. Reuses the
   existing .mk-accordion skeleton plus its own .dk-hero-*/.dk-earn-*/
   .dk-tier-*/.dk-modal-*/.dk-regbar-* classes.
   --------------------------------------------------------------------- */
.vault-shell .mk-accordion{
  background: var(--vlt-surface);
  border-color: var(--vlt-border);
  box-shadow: var(--vlt-shadow);
}
.vault-shell .mk-accordion-title{ color: var(--vlt-fg); }
.vault-shell .mk-accordion-chevron{ color: var(--vlt-fg-faint); }
.vault-shell .mk-accordion-body{ border-top-color: var(--vlt-border-soft); }
.vault-shell .mk-section-link{ color: var(--vlt-accent); }

.vault-shell .dk-hero{
  background: linear-gradient(160deg, var(--vlt-surface) 0%, var(--vlt-surface-3) 100%);
  border-color: var(--vlt-accent-dim);
}
.vault-shell .dk-hero-eyebrow{
  color: var(--vlt-accent);
  background: var(--vlt-accent-soft);
  border-color: var(--vlt-accent-dim);
}
.vault-shell .dk-hero-title{ color: var(--vlt-fg); }
.vault-shell .dk-hero-text{ color: var(--vlt-fg-dim); }
.vault-shell .dk-hero-stats{ color: var(--vlt-fg-dim); border-top-color: var(--vlt-border-soft); }
.vault-shell .dk-btn-primary{ background: var(--vlt-accent); color: #06281d; }
.vault-shell .dk-btn-ghost{ border-color: var(--vlt-border); color: var(--vlt-fg-dim); }
.vault-shell .dk-badge-new{ background: var(--vlt-gold-soft); color: var(--vlt-gold); }

.vault-shell .dk-tier{
  background: var(--vlt-surface-2);
  border: 1px solid var(--vlt-border);
  border-radius: 14px;
  padding: 14px 16px;
}
.vault-shell .dk-tier-top{ border-color: var(--vlt-accent-dim); }
.vault-shell .dk-tier-name{ color: var(--vlt-fg); }
.vault-shell .dk-tier-amount{ color: var(--vlt-accent); }
.vault-shell .dk-tier-line, .vault-shell .dk-tier-sub{ color: var(--vlt-fg-faint); }
.vault-shell .dk-earn-sub{ color: var(--vlt-fg-dim); }

.vault-shell .dk-modal-card{
  background: var(--vlt-surface);
  border: 1px solid var(--vlt-border);
  box-shadow: var(--vlt-shadow);
  color: var(--vlt-fg);
}
.vault-shell .dk-modal-title{ color: var(--vlt-fg); }
.vault-shell .dk-modal-text, .vault-shell .dk-modal-list{ color: var(--vlt-fg-dim); }
.vault-shell .dk-modal-login{ color: var(--vlt-fg-faint); }
.vault-shell .dk-modal-x{ color: var(--vlt-fg-faint); }

.vault-shell .dk-regbar{
  background: var(--vlt-surface-3);
  border-top: 1px solid var(--vlt-border);
  color: var(--vlt-fg);
}
.vault-shell .dk-regbar-x{ color: var(--vlt-fg-faint); }

/* ---------------------------------------------------------------------
   includes/forum-announcement-banner.php — wrapper gets the additive
   .vlt-announce-bar class (no existing custom class to hook onto).
   --------------------------------------------------------------------- */
.vault-shell .vlt-announce-bar{
  background: var(--vlt-accent-soft);
  border-bottom: 1px solid var(--vlt-accent-dim);
}
.vault-shell .vlt-announce-bar,
.vault-shell .vlt-announce-bar *{ color: var(--vlt-accent); }

/* ---------------------------------------------------------------------
   Blog (blog/index.php, blog/post.php, blog/serie.php): featured post,
   grid cards, author avatar, share/feedback controls, numbered checklist
   cards inside article bodies.
   --------------------------------------------------------------------- */
.vault-shell .featured-post-card{
  background: var(--vlt-surface);
  border: 1px solid var(--vlt-border);
  box-shadow: var(--vlt-shadow);
}
.vault-shell .featured-post-media{ background: var(--vlt-surface-2); }
.vault-shell .featured-post-media-fallback{ color: var(--vlt-fg-faint); }
.vault-shell .featured-eyebrow{ color: var(--vlt-accent); }
.vault-shell .featured-post-title{ color: var(--vlt-fg); }
.vault-shell .featured-post-card:hover .featured-post-title{ color: var(--vlt-accent); }
.vault-shell .featured-post-excerpt{ color: var(--vlt-fg-dim); }
.vault-shell .featured-badge{ background: var(--vlt-gold); color: #241a04; }

.vault-shell .blog-card{
  background: var(--vlt-surface);
  border-color: var(--vlt-border);
  box-shadow: var(--vlt-shadow);
}
.vault-shell .blog-card-new-badge{ background: var(--vlt-gold); color: #241a04; }

.vault-shell .author-avatar{
  background: var(--vlt-accent-soft);
  color: var(--vlt-accent);
}
.vault-shell .meta-dot{ color: var(--vlt-fg-faint); }

.vault-shell .dk-share-btn{
  background: var(--vlt-surface-2);
  border-color: var(--vlt-border);
  color: var(--vlt-fg-dim);
}
.vault-shell .dk-share-btn:hover{ border-color: var(--vlt-border); color: var(--vlt-fg); }

.vault-shell .dk-feedback-btn{
  background: var(--vlt-surface-2);
  border-color: var(--vlt-border);
  color: var(--vlt-fg);
}
.vault-shell .dk-feedback-btn:hover{ border-color: var(--vlt-accent-dim); color: var(--vlt-accent); }
.vault-shell .dk-feedback-thanks{ color: var(--vlt-accent); }

.vault-shell .dk-check-item{
  background: var(--vlt-surface-2);
  border-color: var(--vlt-border);
}
.vault-shell .dk-check-num{
  background: var(--vlt-accent-soft);
  color: var(--vlt-accent);
}
.vault-shell .dk-check-body strong{ color: var(--vlt-fg); }

/* VAULT-REDESIGN-V1: Startseite (index.php) -- additive Retusche der
   bestehenden mk-*/dk-*-Klassen aus assets/css/style.css ueber das
   .vault-shell-Scoping. Keine Klasse umbenannt, keine Struktur geaendert.
   .mk-accordion / .cat-tile selbst sind bereits generisch in vault.css
   gestylt (ueber vlt-accordion- bzw. die bestehenden .cat-tile-Regeln) und
   werden hier bewusst NICHT dupliziert. Der Gast-Hero/Verdienen-Teaser aus
   includes/guest-cta.php (.dk-hero*/.dk-earn*/.dk-btn*) gehoert zu einer
   anderen Datei dieses Batches und wird hier ebenfalls nicht angefasst. */

/* ---- "Entdecke neue Dienste": Discover-Karten (mk-dc-*) ---- */
.vault-shell .mk-discover-card{
  background: var(--vlt-surface);
  border: 1px solid var(--vlt-border);
  box-shadow: var(--vlt-shadow);
}
.vault-shell .mk-discover-card:hover{ border-color: var(--vlt-accent-dim); }
.vault-shell .mk-dc-logo{ background: var(--vlt-surface-2); }
.vault-shell .mk-dc-score{ color: var(--vlt-accent); }
.vault-shell .mk-dc-name{ color: var(--vlt-fg); }
.vault-shell .mk-dc-check{ color: var(--vlt-accent); }
.vault-shell .mk-dc-cat{ color: var(--vlt-fg-faint); }
.vault-shell .mk-dc-desc{ color: var(--vlt-fg-dim); }
.vault-shell .mk-dc-tag{ background: var(--vlt-accent-soft); color: var(--vlt-accent); }
.vault-shell .mk-dc-tag.neutral{ background: var(--vlt-surface-2); color: var(--vlt-fg-faint); }

/* ---- "Dienste" + Marktplatz-Teaser: Service-Karten (mk-svc-*) ---- */
.vault-shell .mk-svc-card{
  background: var(--vlt-surface);
  border: 1px solid var(--vlt-border);
  box-shadow: var(--vlt-shadow);
}
.vault-shell .mk-svc-card:hover{ border-color: var(--vlt-accent-dim); }
.vault-shell .mk-svc-logo{ background: var(--vlt-surface-2); }
.vault-shell .mk-svc-name{ color: var(--vlt-fg); }
.vault-shell .mk-svc-cat{ background: var(--vlt-surface-2); color: var(--vlt-fg-faint); }
.vault-shell .mk-svc-score{ color: var(--vlt-accent); }
.vault-shell .mk-svc-desc{ color: var(--vlt-fg-dim); }
.vault-shell .mk-svc-fact{ background: var(--vlt-surface-2); border-color: var(--vlt-border); }
.vault-shell .mk-svc-fact-lbl{ color: var(--vlt-fg-faint); }
.vault-shell .mk-svc-fact-val{ color: var(--vlt-fg-faint); }
.vault-shell .mk-svc-fact-val.yes{ color: var(--vlt-accent); }
.vault-shell .mk-svc-fact.highlight{ border-color: var(--vlt-accent-dim); }

/* ---- Neu/Geändert-Umschalter (mk-cat-pill) ---- */
.vault-shell .mk-cat-pill{ background: var(--vlt-surface-2); border: 1px solid var(--vlt-border); color: var(--vlt-fg-dim); }
.vault-shell .mk-cat-pill.active{ background: var(--vlt-accent); color: #06281d; border-color: var(--vlt-accent); }

/* ---- "Aus dem Blog" Teaser-Liste ---- */
.vault-shell .blog-list-row{ border-bottom-color: var(--vlt-border-soft); }
.vault-shell .blog-list-date{ color: var(--vlt-fg-faint); }
.vault-shell .blog-list-title{ color: var(--vlt-fg); }
.vault-shell a.blog-list-row:hover .blog-list-title{ color: var(--vlt-accent); }

/* ---- "Letzte Änderungen"-Zeitleiste (changes-*) ---- */
.vault-shell .changes-list::before{ background: var(--vlt-border); }
.vault-shell .changes-row::before{ background: var(--vlt-surface); border-color: var(--vlt-fg-faint); }
.vault-shell .changes-row.is-incident::before{ border-color: var(--vlt-red); background: var(--vlt-red); }
.vault-shell .changes-date{ color: var(--vlt-fg-faint); }
.vault-shell .changes-text{ color: var(--vlt-fg-dim); }
.vault-shell .changes-text b{ color: var(--vlt-fg); }
.vault-shell .changes-row:hover .changes-text,
.vault-shell .changes-row:hover .changes-text b{ color: var(--vlt-accent); }

/* ---- Community-Highlight (Featured-Bewertung) ---- */
.vault-shell .mk-review-quote{ color: var(--vlt-fg-dim); }
.vault-shell .mk-review-quote::before{ background: var(--vlt-accent); }
.vault-shell .mk-review-author{ color: var(--vlt-fg-faint); }

/* VAULT-REDESIGN-V1 — suche.php
   Rein additive Retusche der Seiten-Chrome von suche.php (Suchfeld oben,
   Ergebnis-Karten fuer Verzeichnis/Blog/Forum). suche.php nutzt KEINE
   geteilte render_service_card()/service-card-render.php-Markup (eigene,
   einfache Inline-Karten) - daher kein Konfliktrisiko mit verzeichnis.php.
   Es wurde keine Klasse im Markup umbenannt; die bestehenden Tailwind-
   Klassen (bg-zinc-900/border-zinc-700/800 etc.) bleiben unverändert, hier
   wird nur ueber den .vault-shell-Scope + Attribut-Selektoren (href-Praefix)
   zusaetzlich auf die Vault-Tokens umgefaerbt. */
.vault-shell form[action="/suche.php"]{
  background: var(--vlt-surface-2);
  border-color: var(--vlt-border);
}
.vault-shell form[action="/suche.php"]:focus-within{
  border-color: var(--vlt-accent);
}
.vault-shell a[href^="/service/"],
.vault-shell a[href^="/blog/"],
.vault-shell a[href^="/forum/thread/"]{
  background: var(--vlt-surface);
  border-color: var(--vlt-border);
}
.vault-shell a[href^="/service/"]:hover,
.vault-shell a[href^="/blog/"]:hover,
.vault-shell a[href^="/forum/thread/"]:hover{
  border-color: var(--vlt-accent-dim);
}