/* Dark KB – Styles (Brand: #000000 / #FFD60A) – v1.5 */
:root {
  --bg:#000000; --bg-elev:#0a0a0a; --card:#0f0f0f; --border:#1a1a1a;
  --text:#eaeaea; --muted:#b3b3b3; --accent:#FFD60A; --accent-20:rgba(255,214,10,.2);
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.5);
}

html { color-scheme:dark }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.55;
}
a { color:var(--text); text-decoration:none }
* { box-sizing:border-box }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:8px }
.skip { position:absolute; left:-9999px }
.skip:focus { left:8px; top:8px; z-index:999 }

/* Layout */
.dk-app {
  display:block;
}
@media(min-width:961px){
  .dk-app {
	display: grid;
	grid-template-columns: 210px minmax(0,1400px);
	justify-content: center;
	min-height: 100dvh;
	margin-top: 30px;
	background: #0E1115;
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 5px;  }
}

.dk-sidebar {
  padding:20px;
  background:linear-gradient(180deg,#070707,#0a0a0a);
  border-bottom:1px solid var(--border);
}
@media(min-width:961px){
  .dk-sidebar {
    border-right:1px solid var(--border);
    border-bottom:none;
    height:100dvh;
    position:sticky;
    top:0;
    align-self:start;
  }
}

/* Navigation kompakt */
.dk-nav {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.dk-nav a {
  display:block;
  padding:6px 10px;
  font-size:14px;
  line-height:1.4;
  border-radius:6px;
  color:var(--text);
  transition:background .15s ease, border-color .15s ease;
}
.dk-nav a:hover { background:#0d0d0d }
.dk-nav a.active {
  background:var(--accent-20);
  border:1px solid var(--accent);
  color:#fff;
}
.dk-nav i { margin-right:6px }

/* Header */
.dk-header {
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.6));
  border-bottom:1px solid var(--border);
}
.dk-header-inner {
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  padding:14px 22px;
}
@media(max-width:640px){
  .dk-header-inner { grid-template-columns:1fr; gap:12px }
}

/* Buttons */
.dk-actions { display:flex; gap:10px }
.dk-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  transition:background .2s ease, transform .08s ease, border-color .2s ease;
}
.dk-btn:hover { background:#141414; transform:translateY(-1px) }
.dk-btn.primary { background:var(--accent); color:#000; border-color:transparent }
.dk-btn.primary:hover { filter:brightness(.95) }

/* Content */
.dk-main { padding:26px 22px 60px }
.dk-hero { display:grid; gap:6px; margin:6px 0 18px }
.dk-eyebrow {
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  color:var(--muted);
}
.dk-h1 { font-size:clamp(24px,3.2vw,36px); margin:0; letter-spacing:.2px }
.dk-lead { color:var(--muted) }

/* Grid */
.dk-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}
@media(max-width:1100px){ .dk-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:640px){ .dk-grid { grid-template-columns:1fr } }

/* Karten */
.dk-card {
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease;
  display:block;
}
.dk-card:hover {
  transform:translateY(-2px);
  border-color:var(--accent);
  box-shadow:0 16px 40px rgba(255,214,10,.12);
}
.dk-iconwrap {
  width:40px; height:40px;
  border-radius:12px;
  background:var(--accent-20);
  display:grid;
  place-items:center;
  margin-bottom:12px;
  font-size:18px;
  color:var(--accent);
}
.dk-card h3 { margin:0 0 6px; font-size:18px }
.dk-card p { margin:0; color:var(--muted); font-size:14px }
.dk-badge {
  position:absolute;
  top:14px; right:14px;
  background:#111;
  border:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
}

/* Artikel */
.dk-section { margin-top:28px }
.dk-section h2 { font-size:20px; margin:0 0 12px }
.dk-articles { display:grid; gap:10px }
.dk-article {
  display:grid;
  gap:10px;
  grid-template-columns:1fr auto;
  align-items:center;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#0c0c0c;
}
.dk-article:hover { border-color:var(--accent) }
.dk-article i { margin-right:6px }
.dk-meta { display:flex; gap:10px; color:var(--muted); font-size:13px }

/* Breadcrumb */
.dk-breadcrumb {
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
  margin:10px 0 6px;
  flex-wrap:wrap;
}
.dk-breadcrumb a { color:var(--muted) }

/* Artikel Content */
.dk-article-wrap { display:block }
.dk-prose {
  padding:18px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.dk-prose h1,.dk-prose h2,.dk-prose h3 { margin:.2em 0 .4em }
.dk-prose p { color:var(--text) }
.dk-prose code {
  background:#0b0b0b;
  padding:2px 6px;
  border-radius:6px;
  border:1px solid var(--border);
}
pre {
  background:#0b0b0b;
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px;
  overflow:auto;
}

/* Footer */
.dk-footer {
  padding:24px;
  color:var(--muted);
  border-top:1px solid var(--border);
  text-align:center;
}