/* Villagers: Repurposed — Dorftafel-Look (gleicher Stil wie die übrigen cvluis-Projektseiten).
   Eichenholz, Pergament, Smaragd-Blöcke, Laternenlicht. Bewusst nur dunkel. */
/* Seitenfarben */
:root { --w1:#946b3a; --w2:#7a5731; --w3:#5f4326; --pb:#c9801a; --pb-d:#7a4a08; --pb-l:#ffd08a; --pb-h:#dd9328; --pb-e:#4a2a02; --accent:#ffd56a; --glow:rgba(255,179,71,.22); }
:root {
  color-scheme: dark;
  --night: #16110d; --spruce: #2a1c11; --spruce-2: #34241a; --oak: var(--w2); --oak-d: #4a3320; --edge: #1d130a;
  --parch: #ecdcae; --parch-ink: #3a2a14; --parch-mut: #6b5a38;
  --em: #2fd870; --em-d: #12803f; --em-l: #8bffb4; --red: #d9483a; --lan: #ffb347; --gold: #ffd56a; --stone: #7f7f84;
  --ink: #f3e7c9; --muted: #e0cfa4; --dim: #b9a57b; --line: #5a3f22;
  --px: "Pixelify Sans", "Courier New", monospace;
  --sans: "Nunito", "Segoe UI", system-ui, sans-serif;
  font-family: var(--sans); font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--night); }
body {
  margin: 0; color: var(--ink); font: 600 16px/1.65 var(--sans);
  background:
    radial-gradient(560px 280px at 8% 0, var(--glow), transparent 70%),
    radial-gradient(560px 280px at 92% 0, var(--glow), transparent 70%),
    repeating-conic-gradient(#1b1510 0 25%, #171210 0 50%) 0 0 / 28px 28px;
  background-attachment: fixed;
}
::selection { background: var(--lan); color: #2a1a0c; }
a { color: inherit; text-underline-offset: 5px; }
a:hover { color: var(--gold); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--lan); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--px); font-weight: 700; margin: 0; color: #fff4d4; text-shadow: 3px 3px 0 #2a1a0c; letter-spacing: 0; }
.skip-link { position: absolute; z-index: 30; left: 12px; top: -60px; padding: 9px 13px; background: var(--lan); color: #2a1a0c; font: 700 14px var(--px); }
.skip-link:focus { top: 12px; }

/* Seitenleiste */
.project-rail {
  position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; width: 240px; padding: 22px 18px 26px; overflow-y: auto;
  border-right: 5px solid var(--edge);
  background: repeating-linear-gradient(0deg, transparent 0 46px, rgba(0,0,0,.2) 46px 49px), linear-gradient(90deg, var(--w1), var(--w3) 40%, var(--w3));
  box-shadow: inset -3px 0 0 rgba(0,0,0,.25), inset 3px 0 0 rgba(255,255,255,.14), 6px 0 0 rgba(0,0,0,.35);
}
.wordmark { display: block; padding-bottom: 18px; border-bottom: 3px solid var(--edge); font: 700 20px/1.2 var(--px); letter-spacing: .08em; text-decoration: none; white-space: nowrap; color: #fff4d4; text-shadow: 2px 2px 0 #2a1a0c; }
.wordmark span { padding-inline: 3px; color: var(--gold); }
.rail-intro { margin: 22px 0 18px; color: #ffe9a8; font: 600 14px/1.5 var(--px); text-shadow: 1px 1px 0 #2a1a0c; }
.project-nav { display: grid; gap: 10px; }
.project-link {
  position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; padding: 9px 10px; text-decoration: none;
  background: var(--spruce); border: 3px solid var(--edge); box-shadow: inset 0 0 0 2px var(--oak-d), 3px 3px 0 rgba(0,0,0,.4);
}
.project-link strong { display: block; font: 600 15px/1.2 var(--px); color: #fff4d4; }
.project-link small { display: block; color: var(--dim); font: 600 12px/1.3 var(--sans); }
.project-number { font: 700 13px var(--px); color: var(--dim); }
.project-link:hover { background: var(--spruce-2); }
.project-link:hover strong { color: var(--gold); }
.project-link[aria-current="page"] { background: var(--pb); border-color: var(--pb-e); box-shadow: inset -3px -3px 0 var(--pb-d), inset 3px 3px 0 var(--pb-l), 3px 3px 0 rgba(0,0,0,.4); }
.project-link[aria-current="page"] strong { color: #fff; text-shadow: 2px 2px 0 var(--pb-d); }
.project-link[aria-current="page"] small, .project-link[aria-current="page"] .project-number { color: #d6ffe4; }
.rail-footer { display: grid; gap: 8px; margin-top: auto; padding-top: 34px; color: #ffe9a8; font: 600 13px/1.5 var(--sans); }
.rail-footer p { margin: 0 0 6px; padding-top: 14px; border-top: 3px solid var(--edge); }
.rail-footer strong { font-family: var(--px); color: #fff4d4; }
.rail-footer a { text-decoration: none; font-family: var(--px); }

/* Inhalt */
.site-body { min-height: 100vh; margin-left: 240px; }
.topbar {
  position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 62px; padding: 10px clamp(22px, 4vw, 58px);
  border-bottom: 5px solid var(--edge);
  background: repeating-linear-gradient(90deg, transparent 0 140px, rgba(0,0,0,.26) 140px 143px), linear-gradient(var(--w1), var(--w2) 45%, var(--w3));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.18), 0 5px 0 rgba(0,0,0,.35);
}
.breadcrumb, .topbar nav { font: 600 14px/1.5 var(--px); }
.breadcrumb { color: #ffeec2; text-shadow: 2px 2px 0 #2a1a0c; }
.breadcrumb span { padding-inline: 8px; color: var(--gold); }
.topbar nav { display: flex; align-items: center; gap: 22px; }
.topbar nav a { color: #ffeec2; text-decoration: none; text-shadow: 2px 2px 0 #2a1a0c; }
.topbar nav a:hover { color: var(--gold); }

main { width: min(1100px, 100%); margin: 0 auto; padding: 0 clamp(22px, 4vw, 58px) 70px; }
.section-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 0; }
.section-nav a { padding: 5px 13px; text-decoration: none; font: 600 14px var(--px); color: #fff; background: var(--stone); border: 3px solid #111; text-shadow: 2px 2px 0 #3c3c40; box-shadow: inset -3px -3px 0 #4a4a50, inset 3px 3px 0 #b8b8bf; }
.section-nav a:hover { background: #8c8c96; color: #fff; }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font: 600 13px var(--px); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); text-shadow: 2px 2px 0 #2a1a0c; }
.eyebrow::before { content: ""; width: 9px; height: 9px; background: var(--pb); box-shadow: inset -2px -2px 0 var(--pb-d), inset 2px 2px 0 var(--pb-l); }
.page-intro { padding: 54px 0 34px; }
.page-intro h1 { font-size: clamp(40px, 6.4vw, 84px); line-height: 1.02; max-width: 12ch; color: var(--gold); }
.lead { max-width: 56ch; margin: 22px 0 0; color: var(--muted); font-size: clamp(17px, 1.6vw, 20px); }
.release-status { display: inline-flex; align-items: center; gap: 10px; margin: 26px 0 0; padding: 6px 14px; font: 600 13px var(--px); letter-spacing: .1em; text-transform: uppercase; color: var(--parch-ink); background: var(--parch); border: 3px solid var(--edge); box-shadow: 4px 4px 0 rgba(0,0,0,.45); }
.release-status span { width: 10px; height: 10px; background: var(--lan); box-shadow: inset -2px -2px 0 #b9741a, inset 2px 2px 0 #ffd89a; animation: flick 3s steps(4) infinite; }
@keyframes flick { 50% { opacity: .45; } }

.product-lead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 34px; align-items: center; padding: 20px 0 56px; }
.hero-shot { margin: 0; padding: 8px; border: 5px solid var(--oak-d); background: var(--spruce); box-shadow: inset 0 0 0 2px var(--edge), 7px 7px 0 rgba(0,0,0,.45); }
.hero-shot img { aspect-ratio: 1664 / 1024; object-fit: cover; width: 100%; }
.hero-shot figcaption { margin-top: 8px; color: var(--dim); font: 600 13px var(--sans); }
.product-brief h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; margin: 0 0 14px; }
.product-brief p { color: var(--muted); }
.capabilities { display: grid; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.capabilities li { display: flex; gap: 12px; padding: 9px 12px; background: var(--spruce); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px var(--edge); color: var(--muted); }
.capabilities li::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 7px; background: var(--pb); box-shadow: inset -2px -2px 0 var(--pb-d), inset 2px 2px 0 var(--pb-l); }
.stack-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; }
.button { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; text-decoration: none; font: 600 16px var(--px); color: #fff; background: var(--stone); border: 3px solid #111; text-shadow: 2px 2px 0 #3c3c40; box-shadow: inset -4px -4px 0 #4a4a50, inset 4px 4px 0 #b8b8bf; }
.button:hover { color: #fff; background: #8c8c96; }
.button.primary { background: var(--pb); border-color: var(--pb-e); text-shadow: 2px 2px 0 var(--pb-d); box-shadow: inset -4px -4px 0 var(--pb-d), inset 4px 4px 0 var(--pb-l); }
.button.primary:hover { background: var(--pb-h); }
.text-link { font: 600 15px var(--px); color: var(--gold); text-decoration: none; border-bottom: 3px dashed currentColor; }
.text-link:hover { color: #fff4d4; }

.section-heading { display: grid; gap: 4px; margin-bottom: 26px; }
.section-heading h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.08; }
.feature-section { padding: 40px 0 56px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feature-card { display: flex; flex-direction: column; gap: 10px; min-height: 220px; padding: 24px; background: repeating-linear-gradient(0deg, transparent 0 46px, rgba(0,0,0,.18) 46px 49px), linear-gradient(#3b2a1b, #2f2014); border: 4px solid var(--oak); box-shadow: inset 0 0 0 2px var(--edge), 6px 6px 0 rgba(0,0,0,.45); transition: transform .15s; }
.feature-card:hover { transform: translateY(-3px); }
.feature-card h3 { font-size: 24px; line-height: 1.1; }
.feature-card p { margin: 0; color: var(--muted); }
.feature-index { align-self: flex-start; font: 600 12px var(--px); letter-spacing: .1em; color: var(--parch-ink); background: var(--parch); border: 3px solid var(--edge); padding: 2px 9px; box-shadow: 3px 3px 0 rgba(0,0,0,.4); }

.compat-section { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 30px; align-items: start; padding: 26px 0 56px; }
.compat-section h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; margin-bottom: 14px; }
.compat-section p { color: var(--muted); max-width: 56ch; }
.compat-list { margin: 0; padding: 20px; display: grid; gap: 10px; background: repeating-linear-gradient(0deg, transparent 0 26px, rgba(120,90,40,.1) 26px 27px), var(--parch); color: var(--parch-ink); border: 3px solid var(--edge); box-shadow: 6px 6px 0 rgba(0,0,0,.45); }
.compat-list div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding-bottom: 8px; border-bottom: 2px dashed rgba(58,42,20,.35); }
.compat-list div:last-child { border: 0; padding: 0; }
.compat-list dt { font: 600 13px var(--px); letter-spacing: .1em; text-transform: uppercase; color: var(--parch-mut); }
.compat-list dd { margin: 0; font-weight: 800; }

.closing { display: grid; justify-items: start; gap: 14px; padding: 34px; background: linear-gradient(var(--spruce-2), var(--spruce)); border: 4px solid var(--line); box-shadow: inset 0 0 0 2px var(--edge), 6px 6px 0 rgba(0,0,0,.45); }
.closing h2 { font-size: clamp(30px, 4vw, 48px); }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 30px; padding: 26px clamp(22px, 4vw, 58px); border-top: 5px solid var(--oak-d); background: linear-gradient(180deg, transparent, rgba(0,0,0,.45)); color: var(--dim); font: 600 13px var(--sans); }
.site-footer p { margin: 0; }
.site-footer a { text-decoration: none; font-family: var(--px); color: var(--muted); }
.footer-name { font-size: 16px; color: #fff4d4 !important; }

@media (max-width: 920px) {
  .project-rail { position: relative; width: 100%; padding: 14px 16px 16px; border-right: 0; border-bottom: 5px solid var(--edge); overflow: visible; }
  .wordmark { width: fit-content; padding-bottom: 10px; }
  .rail-intro, .rail-footer { display: none; }
  .project-nav { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 6px; }
  .project-link { flex: 1 0 170px; }
  .site-body { margin-left: 0; }
  .topbar { position: relative; }
  .product-lead, .compat-section { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .topbar { align-items: flex-start; flex-wrap: wrap; padding: 12px 20px; }
  .topbar nav { gap: 14px; flex-wrap: wrap; }
  .topbar nav a:first-child { display: none; }
  main { padding-inline: 20px; }
  .page-intro { padding-top: 34px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 0; }
  .compat-list div { grid-template-columns: 1fr; gap: 2px; }
  .site-footer p { width: 100%; order: 1; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* ===== Dorftafel: Banner, Graphen, Feinschliff ===== */
.dt-banner { margin: 18px 0 0; height: clamp(110px, 16vw, 190px); overflow: hidden; border: 5px solid var(--oak-d, #4a3320); box-shadow: inset 0 0 0 2px var(--edge, #1d130a), 6px 6px 0 rgba(0,0,0,.45); background: linear-gradient(180deg, #0c0a14 0%, #1b1530 55%, var(--glow, rgba(255,179,71,.22)) 100%), #120d08; position: relative; }
.dt-banner svg { display: block; width: 100%; height: 100%; }
.dt-star { animation: dt-tw 3.4s steps(2) infinite; }
.dt-s1 { animation-delay: -1.1s; } .dt-s2 { animation-delay: -2.2s; }
.dt-win { animation: dt-fl 5s steps(3) infinite; }
@keyframes dt-tw { 50% { opacity: .25; } }
@keyframes dt-fl { 0%, 100% { opacity: 1; } 55% { opacity: .75; } 60% { opacity: 1; } }

.dt-section { border-top: 5px solid var(--oak-d, #4a3320); padding: 44px 0 56px; }
.dt-section .section-heading { margin-bottom: 26px; }
.dt-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.dt-stats > div { min-width: 120px; padding: 10px 16px; background: var(--parch, #ecdcae); color: var(--parch-ink, #3a2a14); border: 3px solid var(--edge, #1d130a); box-shadow: 4px 4px 0 rgba(0,0,0,.45); }
.dt-stats b { display: block; font: 700 26px/1.1 var(--mono, var(--px)); }
.dt-stats span { font: 600 12px var(--mono, var(--px)); letter-spacing: .08em; text-transform: uppercase; color: var(--parch-mut, #6b5a38); }
.dt-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.dt-tools input { flex: 1 1 200px; min-width: 0; padding: 7px 12px; font: 600 14px var(--sans, Nunito, sans-serif); color: var(--parch-ink, #3a2a14); background: #f1e5bd; border: 3px solid #111; box-shadow: inset 3px 3px 0 rgba(0,0,0,.25); }
.dt-seg { display: inline-flex; }
.dt-seg button, .dt-nav button, .dt-go, .dt-rels button { font: 600 13px var(--mono, var(--px)); color: #fff; background: var(--stone, #7f7f84); border: 3px solid #111; padding: 5px 12px; cursor: pointer; text-shadow: 2px 2px 0 #3c3c40; box-shadow: inset -3px -3px 0 #4a4a50, inset 3px 3px 0 #b8b8bf; }
.dt-seg button + button { margin-left: -3px; }
.dt-seg button:hover, .dt-nav button:hover, .dt-go:hover, .dt-rels button:hover { background: #8c8c96; }
.dt-seg button[aria-pressed="true"] { background: var(--pb); border-color: var(--pb-e); text-shadow: 2px 2px 0 var(--pb-d); box-shadow: inset -3px -3px 0 var(--pb-d), inset 3px 3px 0 var(--pb-l); }
.dt-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 22px; align-items: start; }
.dt-chart, .dt-blocks, .dt-list { min-width: 0; background: var(--surface, #2a1c11); border: 5px solid var(--oak-d, #4a3320); box-shadow: inset 0 0 0 2px var(--edge, #1d130a), 6px 6px 0 rgba(0,0,0,.45); padding: 14px; }
.dt-chart svg { display: block; width: 100%; height: auto; max-height: 640px; }
.dt-lbl { font: 600 10px var(--mono, var(--px)); fill: var(--muted, #e0cfa4); }
.dt-lane { font: 700 13px var(--mono, var(--px)); fill: #fff4d4; }
.dt-note { margin: 10px 0 0; font: 600 12.5px var(--sans, sans-serif); color: var(--dim, #b9a57b); }
.dt-col, .dt-node, .dt-nd { cursor: pointer; }
.dt-col rect:not(:first-child) { transition: transform .12s; }
.dt-col:hover rect:not(:first-child) { filter: brightness(1.25); }
.dt-col.sel rect:not(:first-child), .dt-node.sel rect:nth-child(2) { filter: drop-shadow(0 0 0 var(--accent)) brightness(1.3); }
.dt-col.sel .dt-lbl { fill: var(--accent); font-size: 12px; }
.dt-node .ring { opacity: 0; } .dt-node:hover .ring, .dt-node.sel .ring, .dt-node:focus-visible .ring { opacity: 1; }
.dt-detail { position: sticky; top: 14px; padding: 22px 20px; background: repeating-linear-gradient(0deg, transparent 0 26px, rgba(120,90,40,.1) 26px 27px), var(--parch, #ecdcae); color: var(--parch-ink, #3a2a14); border: 3px solid var(--edge, #1d130a); box-shadow: 6px 6px 0 rgba(0,0,0,.45); }
.dt-detail::before { content: ""; position: absolute; left: 50%; top: -8px; width: 14px; height: 14px; margin-left: -7px; background: var(--red, #d9483a); border: 3px solid #6a1f17; box-shadow: inset 3px 3px 0 #ff8c7d; }
.dt-detail h3 { margin: 2px 0 8px; font: 700 22px/1.15 var(--mono, var(--px)); color: var(--parch-ink, #3a2a14); text-shadow: none; }
.dt-detail p { margin: 8px 0; font: 600 14.5px/1.5 var(--sans, sans-serif); color: var(--parch-ink, #3a2a14); }
.dt-detail ul { margin: 8px 0; padding-left: 18px; font: 600 13.5px/1.45 var(--sans, sans-serif); }
.dt-detail .k { font: 600 12px var(--mono, var(--px)); letter-spacing: .1em; text-transform: uppercase; color: var(--parch-mut, #6b5a38); margin: 0 0 4px; }
.dt-open b { color: #8a3d12; }
.dt-tag { display: inline-block; padding: 2px 9px; font: 600 12px var(--mono, var(--px)); border: 3px solid var(--edge, #1d130a); }
.dt-tag.d { background: var(--pb); color: #fff; text-shadow: 2px 2px 0 var(--pb-d); }
.dt-tag.w { background: var(--w2); color: #fff4d4; }
.dt-rels { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-rels button { font-size: 11.5px; padding: 3px 8px; }
.dt-nav { display: flex; gap: 8px; }
.dt-vtop { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 20px; }
.dt-ring svg { width: 100%; height: auto; display: block; }
.dt-big { font: 700 22px var(--mono, var(--px)); fill: #fff4d4; }
.dt-sm { font: 600 7px var(--mono, var(--px)); fill: var(--muted, #e0cfa4); letter-spacing: .1em; }
.dt-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.dt-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; text-align: left; padding: 8px 10px; color: #fff4d4; background: var(--surface, #2a1c11); border: 3px solid var(--line, #5a3f22); box-shadow: inset 0 0 0 2px var(--edge, #1d130a), 3px 3px 0 rgba(0,0,0,.4); cursor: pointer; font: 600 13px var(--mono, var(--px)); }
.dt-bar:hover { background: var(--spruce-2, #34241a); }
.dt-bar[aria-pressed="true"] { border-color: var(--accent); }
.dt-bar .c { color: var(--accent); }
.dt-bar .m { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 2px; }
.dt-bar .m i { width: 9px; height: 9px; border: 1px solid #1d130a; }
.dt-bar .m i.d { background: var(--pb); box-shadow: inset 2px 2px 0 var(--pb-l), inset -2px -2px 0 var(--pb-d); }
.dt-bar .m i.w { background: var(--w2); box-shadow: inset 2px 2px 0 var(--w1), inset -2px -2px 0 var(--w3); }
.dt-nl { font: 600 10px var(--mono, var(--px)); fill: var(--muted, #e0cfa4); pointer-events: none; }
.dt-dist { font: 700 14px var(--mono, var(--px)); fill: var(--accent); letter-spacing: .1em; }
.dt-thread { fill: none; stroke: #c9a46b; stroke-width: 1.6; opacity: 0; }
.dt-thread.on { opacity: 1; stroke: var(--red, #d9483a); stroke-width: 3; }
.dt-nd .halo { opacity: 0; } .dt-nd:hover .halo, .dt-nd.sel .halo, .dt-nd:focus-visible .halo { opacity: 1; }
.dt-nd.sel .halo { stroke: var(--red, #d9483a); }
.dt-nd, .dt-li { transition: opacity .2s; } .faded { opacity: .14; } .dt-nd.dim, .dt-li.dim { opacity: .6; }
.dt-cid { font: 700 18px var(--mono, var(--px)); fill: var(--accent); } .dt-cnm { font: 700 16px var(--mono, var(--px)); fill: #fff4d4; }
.dt-cbg { font: 700 44px var(--mono, var(--px)); fill: #fff4d4; } .dt-csb { font: 600 12px var(--mono, var(--px)); fill: var(--muted, #e0cfa4); letter-spacing: .08em; }
.dt-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 18px; }
.dt-lcol h4 { margin: 0 0 6px; font: 700 14px var(--mono, var(--px)); color: var(--accent); }
.dt-li, .dt-blk { all: unset; box-sizing: border-box; display: flex; gap: 8px; width: 100%; padding: 4px 6px; cursor: pointer; font: 600 13.5px/1.3 var(--sans, sans-serif); color: #fff4d4; }
.dt-li:hover, .dt-blk:hover, .dt-li.sel, .dt-blk.sel { background: rgba(255,179,71,.18); }
.dt-li i, .dt-blk i { flex: none; width: 11px; height: 11px; margin-top: 3px; border: 1px solid #1d130a; }
.dt-li.d i, .dt-blk.d i, .dt-blk.f i { background: var(--pb); box-shadow: inset 2px 2px 0 var(--pb-l), inset -2px -2px 0 var(--pb-d); }
.dt-li.w i, .dt-blk.w i { background: var(--w2); box-shadow: inset 2px 2px 0 var(--w1), inset -2px -2px 0 var(--w3); }
.dt-li b { font: 600 11px var(--mono, var(--px)); color: var(--dim, #b9a57b); min-width: 30px; padding-top: 2px; }
.dt-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; align-content: start; }
.dt-h3 { margin: 0 0 14px; font: 700 24px var(--mono, var(--px)); }
.dt-expl { margin-top: 46px; }
.dt-flash { animation: dt-flash 1.6s steps(4); }
@keyframes dt-flash { 0%, 50% { outline: 4px solid var(--accent); outline-offset: 4px; } 100% { outline: 4px solid transparent; } }
@media (max-width: 900px) { .dt-grid, .dt-vtop { grid-template-columns: 1fr; } .dt-ring { max-width: 220px; } .dt-detail { position: relative; top: 0; } }
@media (prefers-reduced-motion: reduce) { .dt-star, .dt-win, .dt-flash { animation: none !important; } }

/* Feinschliff Gesamtdesign */
html body .project-image img, html body .hero-shot img, html body .screenshot img { transition: transform .25s steps(6); }
html body .project-image:hover img, html body .hero-shot:hover img, html body .screenshot:hover img { transform: scale(1.025); }
html body .feature-row, html body .status-columns > div, html body .doc-links a, html body .theme-list > div, html body .capabilities li { transition: transform .12s steps(3); }
html body .feature-row:hover, html body .doc-links a:hover, html body .theme-list > div:hover { transform: translate(-2px, -2px); }
html body .section-heading h2::after { content: ""; display: block; width: 84px; height: 8px; margin-top: 14px; background: repeating-linear-gradient(90deg, var(--pb) 0 12px, var(--pb-d) 12px 14px); box-shadow: 3px 3px 0 rgba(0,0,0,.4); }
html body h1 { text-shadow: 4px 4px 0 #2a1a0c, 0 0 28px var(--glow); }

.dt-section { --ok: #3fd47a; --ok-d: #1a7a40; --ok-l: #a6ffc8; }
.dt-bar .m i.d { background: var(--ok); box-shadow: inset 2px 2px 0 var(--ok-l), inset -2px -2px 0 var(--ok-d); }
.dt-li.d i, .dt-blk.d i { background: var(--ok); box-shadow: inset 2px 2px 0 var(--ok-l), inset -2px -2px 0 var(--ok-d); }
.dt-tag.d { background: var(--ok); color: #06280f; text-shadow: none; }
.dt-nl { opacity: 0; transition: opacity .12s; } .dt-nd:hover .dt-nl, .dt-nd.sel .dt-nl, .dt-nd:focus-visible .dt-nl { opacity: 1; font-size: 13px; fill: #fff4d4; stroke: #120d08; stroke-width: 4px; paint-order: stroke; }
.dt-nd .dt-nl { font-size: 11px; }

.faded { opacity: .2; }

.dt-detail .text-link { color: #8a3d12; border-bottom-color: #8a3d12; }
.dt-detail .text-link:hover { color: #25190a; }

/* ===== Animationen ===== */
.dt-progress { position: fixed; left: 0; top: 0; right: 0; height: 5px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: repeating-linear-gradient(90deg, var(--accent) 0 12px, var(--pb) 12px 24px); box-shadow: 0 2px 0 rgba(0,0,0,.5); }
.dt-fireflies { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dt-fireflies i { position: absolute; width: 5px; height: 5px; background: var(--accent); box-shadow: 0 0 10px 3px var(--glow, rgba(255,179,71,.4)), 0 0 0 1px rgba(255,255,255,.25); animation: dt-drift 14s linear infinite, dt-blink 3s steps(3) infinite; opacity: .8; }
@keyframes dt-drift { 0% { transform: translate(0,0); } 25% { transform: translate(40px,-60px); } 50% { transform: translate(-30px,-130px); } 75% { transform: translate(50px,-210px); } 100% { transform: translate(0,-300px); } }
@keyframes dt-blink { 0%,100% { opacity: .9; } 50% { opacity: .15; } }
.site-body { position: relative; z-index: 1; }
.dt-spark { position: fixed; width: 6px; height: 6px; z-index: 80; pointer-events: none; background: var(--accent); animation: dt-spark .6s steps(6) forwards; }
@keyframes dt-spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.dt-anim .dt-rev { opacity: 0; transform: translateY(26px); transition: opacity .55s steps(6) var(--rd, 0ms), transform .55s steps(6) var(--rd, 0ms); }
.dt-anim .dt-rev.dt-shown { opacity: 1; transform: none; }
.dt-in { animation: dt-pop .5s steps(5) backwards; transform-box: fill-box; transform-origin: center; }
@keyframes dt-pop { from { opacity: 0; transform: scale(.1) rotate(-30deg); } }
.dt-nd:not(.faded) rect[fill="var(--ok)"] { animation: dt-pulse 3.2s steps(4) infinite; }
@keyframes dt-pulse { 50% { filter: brightness(1.35); } }
.dt-nd:hover { filter: brightness(1.25); }
@keyframes dt-wob { 25% { transform: translateY(-3px); } 75% { transform: translateY(2px); } }
.dt-ring svg { overflow: visible; }
.dt-stats > div { animation: dt-bob 5s ease-in-out infinite; }
.dt-stats > div:nth-child(2) { animation-delay: -1.2s; } .dt-stats > div:nth-child(3) { animation-delay: -2.4s; } .dt-stats > div:nth-child(4) { animation-delay: -3.6s; }
@keyframes dt-bob { 50% { transform: translateY(-4px); } }
.dt-banner svg { transition: transform .15s linear; transform: scale(1.06); }
.dt-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.1) 50%, transparent 60%); transform: translateX(-120%); animation: dt-shine 7s steps(24) infinite; }
@keyframes dt-shine { 60%, 100% { transform: translateX(120%); } }
html body h1 { animation: dt-title .9s steps(8) backwards; }
@keyframes dt-title { from { opacity: 0; transform: translateY(-18px); letter-spacing: .12em; } }
html body .eyebrow::before { animation: dt-blink 2.4s steps(2) infinite; }
html body .project-link { transition: transform .12s steps(3), background .12s; }
html body .project-link:hover { transform: translateX(4px); }
html body .button, html body .chip, html body .dt-seg button { transition: transform .1s steps(2); }
html body .button:hover, html body .dt-seg button:hover { transform: translateY(-2px); }
html body .button:active, html body .dt-seg button:active { transform: translateY(2px); }
html body .button.primary { animation: dt-glow 3s steps(6) infinite; }
@keyframes dt-glow { 50% { box-shadow: inset -4px -4px 0 var(--pb-d), inset 4px 4px 0 var(--pb-l), 0 0 22px var(--glow, rgba(255,179,71,.4)); } }
html body .section-heading h2::after { transform-origin: 0 50%; animation: dt-grow 1.1s steps(10) backwards; }
@keyframes dt-grow { from { transform: scaleX(0); } }
html body .dt-bar .m i.d { animation: dt-pop .4s steps(4) backwards; }
html body .hero-shot img, html body .project-image img { animation: dt-ken 18s ease-in-out infinite alternate; }
@keyframes dt-ken { to { transform: scale(1.05); } }
.dt-detail { animation: dt-card .35s steps(5); }
@keyframes dt-card { from { opacity: 0; transform: translateY(10px) rotate(-1deg); } }
.dt-sub { margin: 36px 0 14px; }
@media (prefers-reduced-motion: reduce) { .dt-fireflies, .dt-progress, .dt-banner::after { display: none; } * { animation: none !important; } .dt-anim .dt-rev { opacity: 1; transform: none; } }

html body .wordmark { font-family: var(--sans) !important; font-weight: 800; letter-spacing: .06em; font-size: 20px; }

/* ===== Launch-Animation ===== */
html.dt-pre::before { content: ""; position: fixed; inset: 0; z-index: 999; background: #120d08; }
html.dt-launch { overflow: hidden; }
html.dt-launch * { animation-play-state: paused; }
html.dt-launch #dt-launch, html.dt-launch #dt-launch * { animation-play-state: running; }
#dt-launch { position: fixed; inset: 0; z-index: 1000; overflow: hidden; font-family: var(--mono, var(--px, monospace)); }
#dt-launch.go { pointer-events: none; }
.dl-half { position: absolute; top: 0; bottom: 0; width: 50.2%; z-index: 1; transition: transform .85s steps(11) .2s;
  background: radial-gradient(70% 60% at 50% 100%, var(--glow, rgba(255,179,71,.25)), transparent 70%) var(--gp) 0 / 200% 100% no-repeat,
    linear-gradient(180deg, #0c0a14, #1b1530 70%, #120d08) var(--gp) 0 / 200% 100% no-repeat,
    repeating-conic-gradient(#1b1510 0 25%, #171210 0 50%) var(--cp) 0 / 28px 28px; }
.dl-half.l { left: 0; --gp: 0; --cp: 0; }
.dl-half.r { right: 0; --gp: 100%; --cp: -50vw; }
.dl-half::after { content: ""; position: absolute; top: 0; bottom: 0; width: 10px; border: 3px solid #1d130a;
  background: repeating-linear-gradient(0deg, var(--w2, #7a5731) 0 30px, var(--w3, #5f4326) 30px 33px); }
.dl-half.l::after { right: 0; } .dl-half.r::after { left: 0; }
#dt-launch.go .dl-half.l { transform: translateX(-101%); }
#dt-launch.go .dl-half.r { transform: translateX(101%); }
.dl-stage { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; transition: opacity .35s steps(4), transform .35s steps(4); }
#dt-launch.go .dl-stage { opacity: 0; transform: scale(1.12); }
.dl-sky { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; z-index: -1; animation: dl-rise 1.1s steps(11) backwards; }
@keyframes dl-rise { from { transform: translateY(70%); } }
.dl-star { animation: dt-tw 3s steps(2) infinite; }
.dl-w { animation: dl-lit .3s steps(3) backwards; }
@keyframes dl-lit { from { opacity: 0; } 60% { opacity: .5; } }
.dl-block { position: relative; width: 88px; height: 88px; background: var(--pb); border: 6px solid #1d130a; margin-bottom: 6px;
  box-shadow: inset 0 14px 0 var(--pb-l), inset -14px 0 0 var(--pb-d), inset 0 -14px 0 var(--pb-d), 8px 8px 0 rgba(0,0,0,.5);
  animation: dl-drop 1s linear backwards; }
.dl-block::before { content: ""; position: absolute; left: 24px; top: 28px; width: 12px; height: 12px; background: #1d130a;
  box-shadow: 28px 0 0 #1d130a, 6px 22px 0 #1d130a, 16px 22px 0 #1d130a, 26px 22px 0 #1d130a; }
@keyframes dl-drop { 0% { transform: translateY(-70vh); } 55% { transform: translateY(0); } 68% { transform: translateY(-26px); } 80% { transform: translateY(0); } 90% { transform: translateY(-7px); } 100% { transform: translateY(0); } }
.dl-dust { position: absolute; left: 50%; bottom: -8px; width: 10px; height: 10px; margin-left: -5px; background: #d9bb82; opacity: 0; animation: dl-dust .7s steps(7) .55s backwards; }
@keyframes dl-dust { 0% { opacity: .9; transform: translate(0,0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
.dl-title { display: flex; flex-wrap: wrap; justify-content: center; font: 700 clamp(32px, 7vw, 74px)/1.05 var(--mono, var(--px, monospace)); color: #fff4d4; text-shadow: 4px 4px 0 #2a1a0c, 0 0 26px var(--glow, rgba(255,179,71,.4)); }
.dl-title span { display: inline-block; animation: dl-let .4s steps(4) backwards; }
@keyframes dl-let { from { opacity: 0; transform: translateY(26px) scale(.6); } }
.dl-sub { font: 600 14px var(--mono, var(--px, monospace)); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); text-shadow: 2px 2px 0 #2a1a0c; animation: dl-fade .6s steps(6) 1.4s backwards; max-width: 90vw; }
@keyframes dl-fade { from { opacity: 0; } }
.dl-bar { display: flex; gap: 4px; margin-top: 10px; animation: dl-fade .4s steps(4) .7s backwards; }
.dl-bar i { width: 16px; height: 16px; background: #2a1c11; border: 2px solid #1d130a; }
.dl-bar i.on { background: var(--pb); box-shadow: inset 3px 3px 0 var(--pb-l), inset -3px -3px 0 var(--pb-d); animation: dt-pop .25s steps(3); }
.dl-stat { min-height: 1.4em; font: 600 13px var(--mono, var(--px, monospace)); letter-spacing: .14em; color: #e0cfa4; }
.dl-skip { position: absolute; right: 18px; bottom: 18px; z-index: 3; font: 600 13px var(--mono, var(--px, monospace)); color: #fff; background: var(--stone, #7f7f84); border: 3px solid #111; padding: 6px 14px; cursor: pointer; text-shadow: 2px 2px 0 #3c3c40; box-shadow: inset -3px -3px 0 #4a4a50, inset 3px 3px 0 #b8b8bf; animation: dl-fade .5s steps(5) 1s backwards; }
.dl-skip:hover { background: #8c8c96; }
#dt-launch.go::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--accent) 75%, transparent), transparent 62%); animation: dl-flash .7s steps(7) forwards; }
@keyframes dl-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 640px) { .dl-block { width: 68px; height: 68px; } .dl-bar i { width: 13px; height: 13px; } .dl-skip { right: 10px; bottom: 10px; } }
#dt-launch.go .dl-skip { opacity: 0; transition: opacity .15s; }
.dl-title.sans { font-family: var(--sans, Nunito, sans-serif); font-weight: 800; letter-spacing: .04em; }

/* ===== Sprachschalter ===== */
.dt-lang { display: inline-flex; margin-left: 6px; }
.dt-lang button { font: 600 12px var(--mono, var(--px, monospace)); color: #fff; background: var(--stone, #7f7f84); border: 3px solid #111; padding: 2px 8px; cursor: pointer; text-shadow: 2px 2px 0 #3c3c40; box-shadow: inset -3px -3px 0 #4a4a50, inset 3px 3px 0 #b8b8bf; }
.dt-lang button + button { margin-left: -3px; }
.dt-lang button:hover { background: #8c8c96; }
.dt-lang button[aria-pressed="true"] { background: var(--pb); border-color: var(--pb-e, #0b3d1e); text-shadow: 2px 2px 0 var(--pb-d); box-shadow: inset -3px -3px 0 var(--pb-d), inset 3px 3px 0 var(--pb-l); }