/* Dorftafel — Overlay für die cvluis-Projektseiten (nach site.css laden).
   Eichenholz, Pergament, Smaragd-Blöcke, Laternenlicht. Bewusst nur dunkel. */
:root {
  --bg: #16110d; --surface: #2a1c11; --ink: #f3e7c9; --muted: #e0cfa4; --dim: #b9a57b; --line: #5a3f22;
  --accent: #ffd56a;
  --mono: "Pixelify Sans", "Courier New", monospace;
  --sans: "Nunito", "Segoe UI", system-ui, sans-serif;
  --edge: #1d130a; --oak: var(--w2); --oak-d: #4a3320; --spruce-2: #34241a;
  --parch: #ecdcae; --parch-ink: #3a2a14; --parch-mut: #6b5a38;
  --em: #2fd870; --em-d: #12803f; --em-l: #8bffb4; --red: #d9483a; --lan: #ffb347; --stone: #7f7f84;
  font-family: var(--sans);
}
html body {
  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; font-weight: 600;
}
html body a:focus-visible, html body button:focus-visible, html body canvas:focus-visible, html body video:focus-visible { outline: 3px solid var(--lan); outline-offset: 3px; }
html body ::selection { background: var(--lan); color: #2a1a0c; }
html body img { background: #120d08; }
html body h1, html body h2, html body h3 { font-family: var(--mono); letter-spacing: 0; text-shadow: 3px 3px 0 #2a1a0c; color: #fff4d4; text-wrap: balance; }
html body h1 { font-weight: 700; line-height: 1.04; color: var(--accent); }
html body h2 { font-weight: 700; line-height: 1.1; }
html body h3 { font-weight: 600; }
html body .home-page h1, html body h1 { letter-spacing: 0; }
html body .lead, html body .section-intro, html body .feature-row p, html body .project-description p, html body .download-main > p, html body .source-panel > p:not(.eyebrow) { font-family: var(--sans); font-weight: 600; color: var(--muted); }
html body .project-description p { font-size: 14px; }
html body code { padding: 1px 6px; background: rgba(0,0,0,.4); border: 2px solid var(--edge); color: var(--accent); font-family: ui-monospace, Consolas, monospace; }
html body .eyebrow { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .16em; color: var(--accent); text-shadow: 2px 2px 0 #2a1a0c; }

/* Seitenleiste: Eichenholz */
html body .project-rail {
  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);
}
html body .wordmark { border-bottom: 3px solid var(--edge); color: #fff4d4; text-shadow: 2px 2px 0 #2a1a0c; font-weight: 700; letter-spacing: .08em; font-size: 18px; }
html body .wordmark span { color: var(--accent); }
html body .rail-intro, html body .rail-footer, html body .rail-note { color: #ffe9a8; text-shadow: 1px 1px 0 #2a1a0c; font-family: var(--mono); font-size: 13px; }
html body .rail-footer p { border-top: 3px solid var(--edge); }
html body .rail-footer strong { color: #fff4d4; }
html body .rail-footer a { color: #ffeec2; }
html body .project-nav { margin-inline: 0; gap: 10px; }
html body .project-link {
  margin: 0; padding: 9px 10px; background: var(--surface); border: 3px solid var(--edge); border-left-width: 3px;
  box-shadow: inset 0 0 0 2px var(--oak-d), 3px 3px 0 rgba(0,0,0,.4);
}
html body .project-link strong { font-family: var(--mono); color: #fff4d4; }
html body .project-link small, html body .project-number { color: var(--dim); font-family: var(--sans); }
html body .project-link:hover { background: var(--spruce-2); border-color: var(--edge); }
html body .project-link[aria-current="page"], html body .home-page .project-nav .project-link:first-child {
  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);
}
html body .project-link[aria-current="page"] strong, html body .home-page .project-nav .project-link:first-child strong { color: #fff; text-shadow: 2px 2px 0 var(--pb-d); }
html body .project-link[aria-current="page"] small, html body .project-link[aria-current="page"] .project-number,
html body .home-page .project-nav .project-link:first-child small, html body .home-page .project-nav .project-link:first-child .project-number { color: #d6ffe4; }

/* Kopfleiste: Balken */
html body .topbar {
  border-bottom: 5px solid var(--edge); padding-inline: 20px; margin-inline: -28px; font-family: var(--mono);
  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);
}
html body .breadcrumb { color: #ffeec2; text-shadow: 2px 2px 0 #2a1a0c; }
html body .topbar a { color: #ffeec2; text-shadow: 2px 2px 0 #2a1a0c; }
html body .topbar a:hover { color: var(--accent); }
html body .topbar a:first-child { border-bottom: 0; padding-block: 0; }
html body .section-nav { border-bottom: 0; gap: 8px; flex-wrap: wrap; padding: 18px 0 6px; font-family: var(--mono); font-size: 14px; }
html body .section-nav a { padding: 5px 13px; 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; }
html body .section-nav a:hover, html body .section-nav a[aria-current="location"] { background: var(--pb); color: #fff; border-color: var(--pb-e); box-shadow: inset -3px -3px 0 var(--pb-d), inset 3px 3px 0 var(--pb-l); }

/* Knöpfe */
html body .button {
  min-height: 46px; border: 3px solid #111; border-radius: 0; font-family: var(--mono); font-weight: 600; font-size: 15px; color: #fff; background: var(--stone);
  text-shadow: 2px 2px 0 #3c3c40; box-shadow: inset -4px -4px 0 #4a4a50, inset 4px 4px 0 #b8b8bf;
}
html body .button:hover { color: #fff; background: #8c8c96; border-color: #111; }
html body .button.primary { background: var(--pb); border-color: var(--pb-e); color: #fff; text-shadow: 2px 2px 0 var(--pb-d); box-shadow: inset -4px -4px 0 var(--pb-d), inset 4px 4px 0 var(--pb-l); }
html body .button.primary:hover { background: var(--pb-h); border-color: var(--pb-e); color: #fff; }
html body .text-link { font-family: var(--mono); font-size: 13px; color: var(--accent); border-bottom: 3px dashed currentColor; width: fit-content; }
html body .text-link:hover { color: #fff4d4; }

/* Bilder, Rahmen */
html body .project-image, html body .hero-shot img, html body .screenshot img, html body .demo-video video {
  border: 5px solid var(--oak-d); border-radius: 0; box-shadow: inset 0 0 0 2px var(--edge), 6px 6px 0 rgba(0,0,0,.45);
}
html body .project-image img { border: 0; }
html body .hero-shot figcaption, html body .screenshot figcaption, html body .demo-video figcaption, html body .canvas-caption { font-family: var(--sans); font-size: 13px; color: var(--dim); }

/* Listen */
html body .project-entry, html body .product-lead, html body .content-section, html body .about-note { border-top: 5px solid var(--oak-d); }
html body .project-entry-heading h2 { font-family: var(--mono); font-size: 17px; color: #fff4d4; }
html body .project-entry-heading h2 span { color: var(--accent); }
html body .project-entry-heading > span { color: var(--dim); font-family: var(--mono); }
html body .capabilities li { font-family: var(--sans); font-size: 13px; padding: 6px 10px 6px 30px; background: var(--surface); border: 3px solid var(--line); box-shadow: inset 0 0 0 2px var(--edge); color: var(--muted); }
html body .capabilities li::before { content: ""; left: 10px; top: 13px; width: 10px; height: 10px; background: var(--pb); box-shadow: inset -2px -2px 0 var(--pb-d), inset 2px 2px 0 var(--pb-l); }
html body .feature-list { border-top: 0; display: grid; gap: 14px; }
html body .feature-row {
  padding: 20px 22px; border: 4px solid var(--oak); box-shadow: inset 0 0 0 2px var(--edge), 5px 5px 0 rgba(0,0,0,.45);
  background: repeating-linear-gradient(0deg, transparent 0 46px, rgba(0,0,0,.18) 46px 49px), linear-gradient(#3b2a1b, #2f2014);
}
html body .row-number { font-family: var(--mono); color: var(--parch-ink); background: var(--parch); border: 3px solid var(--edge); height: fit-content; text-align: center; padding: 1px 0; font-size: 12px; }
html body .product-facts { font-family: var(--mono); border-top: 3px solid var(--edge); color: var(--muted); }
html body .product-facts dt { color: var(--dim); }
html body .theme-list > div { border: 3px solid var(--edge); background: var(--surface); padding: 12px 14px; box-shadow: inset 0 0 0 2px var(--oak-d), 3px 3px 0 rgba(0,0,0,.4); }
html body .theme-list strong { font-family: var(--mono); color: #fff4d4; font-size: 14px; }
html body .theme-list span { color: var(--muted); font-size: 13px; }
html body .status-columns > div, html body .shared-world, html body .source-panel { border-top: 0; }
html body .status-columns > div { padding: 20px 22px; background: var(--surface); border: 4px solid var(--line); box-shadow: inset 0 0 0 2px var(--edge), 5px 5px 0 rgba(0,0,0,.45); }
html body .status-columns li::marker, html body .shared-world li::marker { color: var(--pb); font-family: var(--mono); }
html body .release-spec { font-family: var(--sans); gap: 10px; }
html body .release-spec > div { padding: 10px 12px; background: var(--parch); color: var(--parch-ink); border: 3px solid var(--edge); box-shadow: 3px 3px 0 rgba(0,0,0,.4); }
html body .release-spec dt { font-family: var(--mono); color: var(--parch-mut); }
html body .release-spec dd { font-weight: 800; }
html body .release-title h3 span { color: var(--accent); }
html body .platform, html body .release-note { font-family: var(--mono); color: var(--dim) !important; }
html body .source-panel { border-left: 0; padding: 20px 22px; background: var(--surface); border: 4px solid var(--line); box-shadow: inset 0 0 0 2px var(--edge), 5px 5px 0 rgba(0,0,0,.45); }
html body .source-panel pre { background: #120d08; border: 3px solid var(--edge); padding: 14px 16px; font-family: ui-monospace, Consolas, monospace; }
html body .doc-links a { padding: 16px 18px; margin-bottom: 10px; border: 4px solid var(--line); background: var(--surface); box-shadow: inset 0 0 0 2px var(--edge), 4px 4px 0 rgba(0,0,0,.4); }
html body .doc-links a:hover { background: var(--spruce-2); }
html body .doc-links strong { font-family: var(--mono); color: #fff4d4; }
html body .legal-note, html body .about-note p:not(.eyebrow) { color: var(--dim); }
html body .about-note p:not(.eyebrow) { color: var(--muted); }

/* Mod-Studio-Spielwiese */
html body .texture-demo canvas { border: 5px solid var(--oak-d); box-shadow: inset 0 0 0 2px var(--edge), 5px 5px 0 rgba(0,0,0,.45); }
html body .palette button { border: 3px solid var(--edge); }
html body .palette button[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Fuß */
html body .site-footer { border-top: 5px solid var(--oak-d); }
html body .footer-name, html body .footer-links { font-family: var(--mono); }
html body .footer-links a:hover { color: var(--accent); }
html body .site-footer p { font-family: var(--sans); font-size: 12px; }

/* Seitenfarben */
:root, html body { --w1:#b8705a; --w2:#8c4f43; --w3:#6a3a33; --pb:#3fa857; --pb-d:#1c6a2f; --pb-l:#a6f5b3; --pb-h:#4cc068; --pb-e:#0f4a1f; --accent:#8ff09f; --glow:rgba(255,150,170,.2); }

/* ===== 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); }