@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&family=JetBrains+Mono:wght@500;700&family=Chakra+Petch:wght@500;600;700&display=swap');

/* ================= ACORIGIA TOKENS =================
   Acht Markenfarben. Tiefe aus Tannengrün und Schiefer, Wärme aus Bronze und Gold,
   Leben aus Moos, Licht aus Mint (sparsam, „futuristisch“) und Elfenbein für Schrift.
   Bronze trägt Rahmen und Ornamente, Gold das Logo, Licht, Konturen und Technik. */
:root {
  /* Markenfarben */
  --night: #071c15;     /* Tiefes Tannengrün – Haupthintergrund, Tiefe, Atmosphäre */
  --fir: #173d2c;       /* Waldgrün – Natur, Blätter, organische Elemente */
  --moss: #637342;      /* Moosgrün – Vegetation, natürliche Highlights */
  --bronze: #b67b42;    /* Bronze/Kupfer – Metall, Rahmen, Verzierungen */
  --gold: #f0ba65;      /* Leuchtendes Gold – Logo, Licht, Konturen, Technik */
  --slate: #202521;     /* Anthrazit/Schiefer – neutrale Flächen, Kontrast */
  --mint: #d5e9d5;      /* Helles Mintgrün – kleine futuristische Lichtakzente */
  --ivory: #f2e9d6;     /* Warmes Elfenbein – Typografie, helle Kontraste */
  /* Abgeleitete Stufen */
  --abyss: #030d09;     /* tiefster Schatten */
  --forest: #0c271c;    /* Flächen zwischen Tief und Wald */
  --fir-2: #24543d;     /* helleres Waldgrün – Linien */
  --moss-2: #9aa868;    /* helles Moos – Follower, Wachstum */
  --bronze-2: #7a4b22;  /* dunkle Bronze – Schattenkante */
  --gold-2: #fbdda3;    /* Glanz */
  --gold-3: var(--bronze);
  --lichen: #a9b5a0;    /* Sekundärtext: Elfenbein im Waldschatten */
  --birch: var(--ivory);
  --amber: #d39150;     /* helles Kupfer – Resubs, Morgenlicht */
  --sage: #b9c7b2; --mist: var(--mint); --leaf: var(--moss); --deep: #0a1f18; --petrol: #2f4a3e; --bark: #3d2a1a; --berry: #d39150;
  --metal: linear-gradient(180deg, #ffe6b0 0%, #f0ba65 30%, #c88a48 50%, #b67b42 56%, #e7ae60 68%, #f6cf88 86%, #c58a4a 100%);

  --line: rgba(242, 233, 214, .1);
  --line-2: rgba(242, 233, 214, .18);
  --line-gold: rgba(240, 186, 101, .3);
  --panel: rgba(12, 36, 27, .86);
  /* Material: dunkles Rauchglas (Waldgrün über Schiefer), Licht von oben links, Kante von Gold über Bronze zu Moos */
  --glass: linear-gradient(165deg, rgba(36, 84, 61, .5) 0%, rgba(14, 38, 28, .9) 36%, rgba(24, 30, 26, .94) 100%);
  --edge: linear-gradient(150deg, rgba(251, 221, 163, .7), rgba(182, 123, 66, .45) 30%, rgba(99, 115, 66, .2) 62%, rgba(240, 186, 101, .45));
  --shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 18px 34px rgba(0, 0, 0, .38), 0 40px 90px rgba(2, 10, 8, .55);

  --f-display: 'Jost', 'Segoe UI', sans-serif;
  --f-ui: 'Manrope', 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', Consolas, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { color: var(--birch); font-family: var(--f-ui); -webkit-font-smoothing: antialiased; }
body.ov { width: 1920px; height: 1080px; overflow: hidden; background: transparent; }
[hidden] { display: none !important; }

/* ================= LOGO ================= */
.mark { display: block; color: var(--gold); }
.mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Wortmarke ist ein SVG; ihre Größe folgt font-size (Versalhöhe = 1em) */
.wm { display: inline-block; line-height: 0; vertical-align: middle; }
.wm svg { display: block; height: 1.36em; width: auto; overflow: visible; }

/* ================= TYPO ================= */
.label {
  font-family: var(--f-mono); font-weight: 700; font-size: 18px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--lichen);
}
.label.gold { color: var(--gold); }
.label.mint { color: var(--mint); }
.display { font-family: var(--f-display); font-weight: 600; letter-spacing: -.005em; line-height: .98; text-wrap: balance; }
.metal, .display em { font-style: normal; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ================= SZENEN-HINTERGRUND ================= */
/* Himmel: oben fast schwarzes Tannengrün, am Horizont hinter dem Logo Gold und Bronze (Neuanfang) */
.scene { position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 26% 14% at var(--gx, 72%) 68%, rgba(255, 232, 180, .6), transparent 72%),
    radial-gradient(ellipse 48% 28% at var(--gx, 72%) 68%, rgba(240, 186, 101, .34), transparent 72%),
    radial-gradient(ellipse 90% 45% at var(--gx, 72%) 72%, rgba(182, 123, 66, .22), transparent 70%),
    radial-gradient(ellipse 55% 70% at var(--gx, 72%) var(--gy, 48%), rgba(36, 84, 61, .45), transparent 70%),
    linear-gradient(180deg, #040d0a 0%, #071a13 28%, #0d281d 56%, #0a2018 78%, var(--night) 100%); }
.scene .grade { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(180deg, rgba(32, 37, 33, .6) 0%, transparent 45%, rgba(182, 123, 66, .28) 70%, rgba(61, 42, 26, .4) 100%); }
canvas.branches { filter: blur(3.5px); transform-origin: var(--ox, 0) 0; animation: sway var(--sd, 9s) ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-.8deg); } to { transform: rotate(.9deg); } }
.scene canvas { position: absolute; inset: 0; }
.scene canvas.topo { animation: breathe 24s ease-in-out infinite alternate; transform-origin: var(--gx, 72%) var(--gy, 48%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 80%); }
/* Bergkämme in Liniengrafik, Myzel, filigraner Rahmen */
.scene canvas.ridges { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35), #000 40%); }
.scene svg.roots { position: absolute; inset: 0; width: 1920px; height: 1080px; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 30%, #000 60%); }
.roots .pulse { stroke-dasharray: 26 974; stroke-dashoffset: 1000; animation: pulse 7s linear infinite; filter: drop-shadow(0 0 4px rgba(240, 186, 101, .9)); }
@keyframes pulse { to { stroke-dashoffset: 0; } }
.scene svg.ornframe { position: absolute; inset: 0; width: 1920px; height: 1080px; z-index: 6; pointer-events: none; }
svg.astro { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
svg.astro g { transform-origin: 0 0; }
.astro .a-out { animation: spin 600s linear infinite; }
.astro .a-arc { animation: spin 160s linear infinite reverse; }
.astro .a-mid { animation: spin 240s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
svg.orn { position: absolute; pointer-events: none; z-index: 3; overflow: visible; }
/* ?lite=1 – Sparmodus: Bewegung nur noch bei Glühwürmchen und Echo-Wellen, keine Lichtimpulse im Myzel */
.lite .roots .pulse { display: none; }
.lite .astro g, .lite canvas.branches, .lite .scene canvas.forest, .lite .scene canvas.topo, .lite .scene .mist,
.lite .scene .godrays i, .lite .frame::after { animation: none !important; }
.scene canvas.forest { left: -40px; width: 2000px; height: 1080px; animation: drift var(--dur, 40s) ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(calc(var(--amp, 10px) * -1)); } to { transform: translateX(var(--amp, 10px)); } }
.scene .mist { position: absolute; left: -10%; right: -10%; bottom: 0; height: 46%;
  background: radial-gradient(ellipse 40% 60% at 20% 70%, rgba(120, 150, 125, .14), transparent 70%), radial-gradient(ellipse 35% 50% at 75% 80%, rgba(90, 130, 100, .14), transparent 70%);
  animation: mist 30s ease-in-out infinite alternate; }
@keyframes mist { to { transform: translateX(6%); } }
.scene .scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 16, 11, .78) 0, rgba(4, 16, 11, .45) 34%, transparent 58%); }
.scene .godrays { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.scene .godrays i { position: absolute; top: -30%; width: 160px; height: 150%; transform-origin: top center;
  background: linear-gradient(180deg, rgba(251, 221, 163, .22), rgba(240, 186, 101, .08) 45%, rgba(213, 233, 213, 0) 75%); filter: blur(18px); animation: ray 12s ease-in-out infinite alternate; }
.scene .godrays i:nth-child(1) { left: calc(var(--gx) - 2%); transform: rotate(18deg); }
.scene .godrays i:nth-child(2) { left: calc(var(--gx) + 6%); width: 90px; transform: rotate(22deg); animation-delay: -4s; }
.scene .godrays i:nth-child(3) { left: calc(var(--gx) - 12%); width: 220px; transform: rotate(14deg); animation-delay: -8s; opacity: .6; }
@keyframes ray { from { opacity: .35; } to { opacity: 1; } }

/* ================= HUD (Karten-Details) ================= */
.corners i { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(242, 233, 214, .32); z-index: 6; }
.corners i:nth-child(1) { top: 22px; left: 22px; border-top-width: 2px; border-left-width: 2px; }
.corners i:nth-child(2) { top: 22px; right: 22px; border-top-width: 2px; border-right-width: 2px; }
.corners i:nth-child(3) { bottom: 22px; left: 22px; border-bottom-width: 2px; border-left-width: 2px; }
.corners i:nth-child(4) { bottom: 22px; right: 22px; border-bottom-width: 2px; border-right-width: 2px; }
.coord { position: absolute; z-index: 6; padding: 4px 10px; margin: -4px -10px; border-radius: 6px; background: rgba(7, 24, 18, .55); font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--lichen); line-height: 1.7; }
.coord b { color: var(--birch); font-weight: 700; }
.coord::before { content: ''; position: absolute; left: -54px; top: 16px; width: 52px; height: 1px; background: rgba(242, 233, 214, .35); }
.coord::after { content: ''; position: absolute; left: -60px; top: 13px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--gold); }
.scalebar { position: absolute; z-index: 6; display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .14em; color: var(--lichen); }
.scalebar .bar { width: 150px; height: 8px; border: 1px solid rgba(242, 233, 214, .45); background: linear-gradient(90deg, rgba(242, 233, 214, .45) 0 25%, transparent 25% 50%, rgba(242, 233, 214, .45) 50% 75%, transparent 75%); }
.scalebar .north { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(242, 233, 214, .35); color: var(--birch); font-size: 11px; position: relative; }
.scalebar .north::before { content: ''; position: absolute; top: -9px; left: 50%; margin-left: -4px; border: 4px solid transparent; border-bottom: 7px solid var(--gold); }

/* ================= ECHO-TYPO =================
   Titel werfen zwei Kontur-Echos – das "Echo" der Marke als Schrift. */
.echo-type { position: relative; }
.echo-type::before, .echo-type::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; z-index: -1; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1.5px rgba(242, 233, 214, .2); animation: echo 7s var(--ease) infinite; }
.echo-type::after { -webkit-text-stroke-color: rgba(213, 233, 213, .14); animation-delay: .35s; }
@keyframes echo { 0%, 40% { transform: translate(0, 0); opacity: 0; } 55% { opacity: 1; } 100% { transform: translate(.09em, .07em); opacity: 0; } }
.scene .grain { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.scene .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 80% at 50% 45%, transparent 50%, rgba(0, 0, 0, .6)), linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 18%); }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.045) rotate(.6deg); } }

/* Echo-Wellen, die vom Kern ausgehen */
.echo-waves { position: absolute; pointer-events: none; }
.echo-waves i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--birch); opacity: 0; animation: wave 6s var(--ease) infinite; }
.echo-waves i:nth-child(2) { animation-delay: 2s; }
.echo-waves i:nth-child(3) { animation-delay: 4s; }
@keyframes wave { 0% { transform: scale(.55); opacity: .35; } 100% { transform: scale(1.9); opacity: 0; } }

/* ================= INTRO ================= */
.rv { opacity: 0; }
.ready .rv { animation: rvIn .9s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes rvIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; } .ready .rv { animation: none; } }
/* ?still=1 – Standbild ohne Einblendung (für Vorschaubilder) */
.still .rv, .still.ready .rv { opacity: 1; animation: none; }

/* ================= BAUSTEINE ================= */
.pill {
  display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(36, 84, 61, .55), rgba(12, 39, 28, .92) 55%, rgba(7, 24, 18, .95));
  box-shadow: inset 0 1px 0 rgba(251, 221, 163, .18), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 10px 24px rgba(0, 0, 0, .35);
  font-family: var(--f-mono); font-weight: 700; font-size: 17px; letter-spacing: .18em; text-transform: uppercase;
}
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(213, 233, 213, .18); animation: blink 1.6s ease-in-out infinite; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(240, 186, 101, .2); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

.socials { display: flex; flex-wrap: wrap; gap: 30px; }
.social { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 21px; color: var(--birch); white-space: nowrap; }
.social svg { width: 22px; height: 22px; color: var(--gold); flex: none; }

.rotator { position: relative; height: 30px; overflow: hidden; }
.rotator > span {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-weight: 600; font-size: 21px; color: var(--lichen);
  opacity: 0; transform: translateY(100%); transition: opacity .6s ease, transform .6s var(--ease);
}
.rotator > span svg { width: 20px; height: 20px; color: var(--gold); }
.rotator > span.on { opacity: 1; transform: none; }
.rotator > span.off { opacity: 0; transform: translateY(-100%); }

/* Kamera-/Inhaltsrahmen: schlicht, abgerundet, mit Kennzeichnung */
.frame { position: absolute; border-radius: var(--r); }
.frame::before { content: ''; position: absolute; inset: -8px; border-radius: calc(var(--r) + 8px); border: 2px solid var(--line-2); pointer-events: none; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 200deg; }
.frame::after { content: ''; position: absolute; inset: -8px; border-radius: calc(var(--r) + 8px); pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 64%, rgba(240, 186, 101, 0) 66%, var(--gold) 74%, #fff4cf 75%, transparent 82%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  border: 2px solid transparent; animation: orbit 9s linear infinite; filter: drop-shadow(0 0 6px rgba(240, 186, 101, .7)); }
@keyframes orbit { to { --ang: 560deg; } }
.frame { box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 30px 80px rgba(0, 0, 0, .45); }
.frame .scale { position: absolute; right: 30px; top: -24px; width: 160px; height: 8px;
  background: repeating-linear-gradient(90deg, rgba(242, 233, 214, .45) 0 1px, transparent 1px 10px); -webkit-mask: linear-gradient(90deg, transparent, #000 30%); }
.frame .cap { position: absolute; right: 0; bottom: -34px; font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .22em; color: var(--lichen); }
.frame .tick { position: absolute; width: 18px; height: 18px; border: 0 solid var(--gold); }
.frame .tick.tl { top: -14px; left: -14px; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 8px; }
.frame .tick.br { bottom: -14px; right: -14px; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 8px; }
.guide { position: absolute; inset: 0; border-radius: var(--r); display: grid; place-items: center; text-align: center;
  font-family: var(--f-mono); font-size: 20px; letter-spacing: .2em; color: rgba(242, 233, 214, .55);
  background: repeating-linear-gradient(45deg, rgba(36, 84, 61, .25) 0 14px, rgba(15, 36, 25, .25) 14px 28px); }

.tab {
  position: absolute; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 20px 0 10px;
  border-radius: 14px; border: 1px solid var(--line-2);
  background: var(--glass); box-shadow: inset 0 1px 0 rgba(251, 221, 163, .2), var(--shadow);
}
.tab .mark { width: 32px; height: 32px; }
.tab .wm { font-size: 18px; }
.tab .sep { width: 1px; height: 22px; background: var(--line-2); }

/* Panels: getöntes Glas, Kante von Gold über Moos zu Petrol, feine Körnung, Schatten in drei Ebenen */
.panel { position: absolute; border-radius: var(--r); background: var(--glass); box-shadow: inset 0 1px 0 rgba(251, 221, 163, .16), var(--shadow); }
.panel::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.panel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.panel-head { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.panel-head .grow { flex: 1; }

/* ================= CHAT ================= */
.chat { position: absolute; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 16px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); }
.msg { position: relative; flex: none; padding: 12px 16px 13px 20px; border-radius: 16px; border: 1px solid rgba(242, 233, 214, .07); animation: msgIn .5s var(--ease);
  background: linear-gradient(100deg, color-mix(in srgb, var(--uc) 14%, rgba(12, 39, 28, .94)), rgba(7, 24, 18, .9) 62%);
  box-shadow: inset 0 1px 0 rgba(251, 221, 163, .08), 0 8px 18px rgba(0, 0, 0, .3); }
.msg::before { content: ''; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--uc); box-shadow: 0 0 10px var(--uc); opacity: .9; }
.msg.mention { border-color: rgba(211, 145, 80, .65); background: linear-gradient(100deg, rgba(90, 52, 22, .75), rgba(30, 20, 10, .9) 70%); }
.msg.host { border-color: rgba(240, 186, 101, .4); }
.msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.msg .plattform { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(242, 233, 214, .1); color: var(--birch); }
.msg .plattform svg { width: 14px; height: 14px; }
.msg .who { font-weight: 800; font-size: 19px; color: var(--uc); }
.msg .role { font-style: normal; font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .12em; padding: 2px 7px; border-radius: 6px; color: var(--night); background: var(--lichen); }
.msg .role.host { background: var(--gold); }
.msg .role.mod { background: #d5e9d5; }
.msg .role.vip { background: #d39150; }
.msg .role.sub { background: var(--birch); }
.msg-text { font-weight: 600; font-size: 22px; line-height: 1.38; color: var(--birch); word-wrap: break-word; }
.msg-text.action { font-style: italic; color: var(--uc); }
.msg img.emote { height: 30px; vertical-align: -8px; }
.msg.out { animation: msgOut .5s forwards; }
@keyframes msgIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes msgOut { to { opacity: 0; transform: translateX(-20px); } }

/* =====================================================================
   KERN-SYSTEM · CYBER-WELT  (?theme=cyber)
   Dieselbe Marke als Zukunftsbild: der Wald, wie eine KI ihn sieht.
   Themes überschreiben nur semantische Tokens; Logo-Geometrie, Raster und Inhalte bleiben gleich.
   Signal (abgeleitet aus Helles Mintgrün) ist das Licht der Maschine, Gold bleibt der Kern.
   ===================================================================== */
:root[data-theme="cyber"] {
  --signal: #9df5c9;    /* Signal-Mint – Leuchtlinien, Daten, Fokus (aus Mint abgeleitet) */
  --signal-2: #4fd6a0;  /* tiefes Signal – Verläufe */
  --line: rgba(157, 245, 201, .13);
  --line-2: rgba(157, 245, 201, .26);
  --lichen: #a3bdb1;
  --f-display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --metal: linear-gradient(180deg, #f4fff9 0%, #c9f9e1 30%, #9df5c9 55%, #4fd6a0 78%, #d5e9d5 100%);
  --glass: linear-gradient(165deg, rgba(157, 245, 201, .09) 0%, rgba(5, 22, 16, .9) 28%, rgba(3, 12, 9, .94) 100%);
  --edge: linear-gradient(150deg, rgba(157, 245, 201, .8), rgba(157, 245, 201, .14) 38%, rgba(240, 186, 101, .5));
  --r: 10px;
}
.cyber-only { display: none !important; }
[data-theme="cyber"] .cyber-only { display: revert !important; }
[data-theme="cyber"] .wald-only { display: none !important; }
[data-theme="cyber"] .display { letter-spacing: .01em; line-height: .96; }
[data-theme="cyber"] .display em { filter: drop-shadow(0 0 18px rgba(157, 245, 201, .35)); }
[data-theme="cyber"] .label.gold { color: var(--signal); }
[data-theme="cyber"] .mark svg { filter: drop-shadow(0 0 14px rgba(157, 245, 201, .35)); }
[data-theme="cyber"] .wm svg { filter: drop-shadow(0 0 8px rgba(157, 245, 201, .3)); }

/* Szene */
[data-theme="cyber"] .scene { background:
    radial-gradient(ellipse 22% 16% at var(--gx, 72%) var(--gy, 50%), rgba(240, 186, 101, .16), transparent 70%),
    radial-gradient(ellipse 50% 46% at var(--gx, 72%) var(--gy, 50%), rgba(30, 110, 80, .3), transparent 70%),
    radial-gradient(ellipse 80% 30% at var(--gx, 72%) 70%, rgba(157, 245, 201, .08), transparent 70%),
    linear-gradient(180deg, #010604 0%, #03100b 40%, #04140e 66%, #020a07 100%); }
[data-theme="cyber"] .scene .hexgrid { position: absolute; inset: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 L56 16 V48 L28 64 L0 48 V16 Z M28 64 V97' fill='none' stroke='%239df5c9' stroke-opacity='.07'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at var(--gx, 72%) 45%, #000 0, transparent 75%); }
[data-theme="cyber"] .scene canvas.traces { -webkit-mask-image: radial-gradient(ellipse 60% 70% at var(--gx, 72%) var(--gy, 50%), #000 20%, transparent 80%); }
[data-theme="cyber"] .scene canvas.rain { -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .6) 40%, transparent 62%); }
[data-theme="cyber"] .scene canvas.forest { animation: none; }
[data-theme="cyber"] .scene canvas.scanpts { left: -40px; width: 2000px; height: 1080px; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46%, #000 54%, transparent 100%); -webkit-mask-size: 18% 100%; -webkit-mask-repeat: no-repeat;
  animation: lidar 9s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes lidar { from { -webkit-mask-position: -20% 0; } to { -webkit-mask-position: 120% 0; } }
[data-theme="cyber"] .scene .beam { position: absolute; width: 150px; margin-left: -75px; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(0deg, rgba(157, 245, 201, .28), rgba(157, 245, 201, .05) 70%, transparent);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); animation: beam 4s ease-in-out infinite alternate; }
@keyframes beam { from { opacity: .55; } to { opacity: 1; } }
[data-theme="cyber"] .scene .mist { background: radial-gradient(ellipse 40% 60% at 25% 75%, rgba(20, 90, 64, .18), transparent 70%), radial-gradient(ellipse 35% 50% at 75% 85%, rgba(20, 80, 60, .16), transparent 70%); }
[data-theme="cyber"] .scene .scrim { background: linear-gradient(90deg, rgba(1, 6, 4, .86) 0, rgba(1, 6, 4, .55) 34%, transparent 58%); }
[data-theme="cyber"] .scene .scanlines { position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px); }
[data-theme="cyber"] .scene .vignette { background: radial-gradient(ellipse 80% 80% at 50% 45%, transparent 48%, rgba(0, 0, 0, .7)), linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 18%); }
[data-theme="cyber"] .roots .pulse { filter: drop-shadow(0 0 5px rgba(157, 245, 201, .95)); }
.lite .scene canvas.scanpts, .lite .scene .beam { animation: none !important; }

/* Bausteine: Fasen statt Rundungen, Leuchtkante, Signal statt Bronze */
[data-theme="cyber"] .pill, [data-theme="cyber"] .tab { border-radius: 4px; border-color: rgba(157, 245, 201, .3);
  background: linear-gradient(180deg, rgba(157, 245, 201, .1), rgba(3, 14, 10, .94) 60%); box-shadow: inset 0 1px 0 rgba(157, 245, 201, .25), 0 10px 24px rgba(0, 0, 0, .45); }
[data-theme="cyber"] .live-dot { background: var(--signal); box-shadow: 0 0 0 4px rgba(157, 245, 201, .2), 0 0 12px var(--signal); border-radius: 1px; }
[data-theme="cyber"] .panel { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
[data-theme="cyber"] .panel::after { opacity: .5; mix-blend-mode: normal; background-image: repeating-linear-gradient(0deg, rgba(157, 245, 201, .035) 0 1px, transparent 1px 4px); }
[data-theme="cyber"] .panel-head { border-bottom-color: rgba(157, 245, 201, .18); }
[data-theme="cyber"] .msg { border-radius: 4px; border-color: rgba(157, 245, 201, .08);
  background: linear-gradient(100deg, color-mix(in srgb, var(--uc) 12%, rgba(3, 16, 11, .95)), rgba(2, 10, 7, .92) 62%); }
[data-theme="cyber"] .msg::before { border-radius: 0; width: 2px; }
[data-theme="cyber"] .msg .who { font-family: var(--f-mono); font-size: 16px; letter-spacing: .06em; }
[data-theme="cyber"] .msg .role { border-radius: 2px; }
[data-theme="cyber"] .frame { --r: 6px; }
[data-theme="cyber"] .frame::before { border-color: rgba(157, 245, 201, .28); }
[data-theme="cyber"] .frame::after { background: conic-gradient(from var(--ang), transparent 0 64%, rgba(157, 245, 201, 0) 66%, var(--signal) 74%, #f2fff8 75%, transparent 82%) border-box; filter: drop-shadow(0 0 6px rgba(157, 245, 201, .8)); }
[data-theme="cyber"] .frame .tick { border-color: var(--signal); border-radius: 0 !important; }
[data-theme="cyber"] .guide { background: repeating-linear-gradient(45deg, rgba(157, 245, 201, .06) 0 14px, rgba(2, 10, 7, .4) 14px 28px); color: rgba(157, 245, 201, .6); }
[data-theme="cyber"] .coord { background: rgba(1, 8, 5, .7); border-left: 2px solid var(--signal); border-radius: 0; color: var(--lichen); }
[data-theme="cyber"] .coord::after { border-color: var(--signal); border-radius: 0; }
[data-theme="cyber"] .scalebar .bar { border-color: rgba(157, 245, 201, .5); background: linear-gradient(90deg, rgba(157, 245, 201, .5) 0 25%, transparent 25% 50%, rgba(157, 245, 201, .5) 50% 75%, transparent 75%); }
[data-theme="cyber"] .scalebar .north { border-radius: 2px; border-color: rgba(157, 245, 201, .45); }
[data-theme="cyber"] .echo-type::after { -webkit-text-stroke-color: rgba(157, 245, 201, .25); }

/* Boot-Protokoll und Echo-Meter (nur Cyber) */
.bootlog { position: absolute; z-index: 6; font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--lichen); line-height: 1.9; }
.bootlog div { opacity: 0; animation: boot .01s calc(.6s + var(--i) * .55s) forwards; white-space: nowrap; }
.bootlog span { color: var(--signal); margin-right: 6px; }
.bootlog em { font-style: normal; color: var(--signal); margin-left: 8px; }
.bootlog div:last-child em { color: var(--gold); animation: blink 1.2s steps(2) infinite; }
@keyframes boot { to { opacity: 1; } }
.still .bootlog div { opacity: 1; animation: none; }
.echo-meter { position: absolute; z-index: 6; display: flex; align-items: flex-end; gap: 14px; }
.echo-meter .em-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.echo-meter .em-bars i { width: 4px; height: 100%; background: linear-gradient(0deg, var(--signal-2, #4fd6a0), var(--signal, #9df5c9)); transform-origin: bottom; transform: scaleY(.05); transition: transform .25s linear; box-shadow: 0 0 6px rgba(157, 245, 201, .5); }
.echo-meter .em-read { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-mono); font-weight: 700; font-size: 12px; letter-spacing: .16em; color: var(--lichen); }
.echo-meter .em-read b { font-size: 24px; color: var(--signal); letter-spacing: 0; }
svg.blueprint { display: block; width: 100%; height: auto; overflow: visible; }