/* TAGMA Messenger — same tokens as the landing page (web/index.html). */
:root {
  --ground: #f2f6f4; --panel: #ffffff; --panel-2: #eef3f1;
  --ink: #0c1a18; --muted: #4f6b65; --faint: #8aa39d;
  --line: #d9e3e0; --line-strong: #c3d2ce;
  --signal: #0f9e88; --signal-ink: #0b7d6c; --on-signal: #ffffff;
  --spark: #e0663a; --danger: #c2412d;
  --mine: #d7efe9; --mine-line: #b9e1d7;
  --backdrop: rgba(5, 14, 13, .45);
  --shadow: 0 1px 2px rgba(12,26,24,.06), 0 12px 30px rgba(12,26,24,.10);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0b1417; --panel: #101e20; --panel-2: #0e1a1c;
    --ink: #e9f2ef; --muted: #93aca6; --faint: #5f7973;
    --line: #1c2e30; --line-strong: #274042;
    --signal: #38e0c4; --signal-ink: #7ff0dd; --on-signal: #04201b;
    --spark: #ff9d6c; --danger: #ff7a66;
    --mine: #123a36; --mine-line: #1d504a;
    --backdrop: rgba(0, 0, 0, .68);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0b1417; --panel: #101e20; --panel-2: #0e1a1c;
  --ink: #e9f2ef; --muted: #93aca6; --faint: #5f7973;
  --line: #1c2e30; --line-strong: #274042;
  --signal: #38e0c4; --signal-ink: #7ff0dd; --on-signal: #04201b;
  --spark: #ff9d6c; --danger: #ff7a66;
  --mine: #123a36; --mine-line: #1d504a;
  --backdrop: rgba(0, 0, 0, .68);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--ground); color: var(--ink);
  font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { text-wrap: balance; margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.muted { color: var(--muted); }

/* ---- logo -------------------------------------------------------------- */
.mark .hex, .mark-lg .hex { stroke: var(--signal); fill: color-mix(in srgb, var(--signal) 15%, transparent); stroke-width: 1.6; stroke-linejoin: round; }
.mark .pent, .mark-lg .pent { stroke: var(--spark); fill: color-mix(in srgb, var(--spark) 15%, transparent); stroke-width: 1.6; stroke-linejoin: round; }
.mark .core, .mark-lg .core { fill: var(--signal); }
.mark { width: 34px; height: 22px; flex: none; }
.mark-lg svg { width: 112px; height: 72px; }
.brand, .brand-lg { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; letter-spacing: .04em; }
.brand-lg { font-size: 20px; justify-content: center; }
.brand-lg .mark { width: 46px; height: 30px; }
.dot { color: var(--faint); }

/* ---- buttons & fields -------------------------------------------------- */
.btn {
  min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; background: none;
  transition: background-color .15s, border-color .15s;
}
.btn.small { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn.wide { width: 100%; }
.btn.primary { background: var(--signal); color: var(--on-signal); }
.btn.primary:hover { background: var(--signal-ink); }
:root[data-theme="dark"] .btn.primary:hover { background: var(--signal-ink); }
.btn.ghost { border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--panel-2); }
.btn.danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn:disabled { opacity: .5; cursor: default; }

.field { display: grid; gap: 6px; margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--muted); }
.field input, .field textarea, .composer textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--panel); padding: 11px 12px; font-size: 16px; font-weight: 400; color: var(--ink);
}
.field textarea { font-family: var(--mono); font-size: 14px; resize: vertical; word-break: break-all; }
.field input:focus, .field textarea:focus, .composer textarea:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 22%, transparent); }
.hint { margin: -4px 0 12px; font-size: 13px; color: var(--faint); }
.label { margin: 0 0 4px; font-size: 12px; font-family: var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.error { color: var(--danger); font-size: 14px; margin: 8px 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }

.icon-btn {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: none;
  display: inline-grid; place-items: center; cursor: pointer; color: var(--muted);
}
.icon-btn:hover { background: var(--panel-2); color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.file-btn input, .attach input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-btn, .attach { position: relative; }
.file-btn:focus-within, .attach:focus-within { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ---- start screens ----------------------------------------------------- */
.screen.center { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; text-align: center; }
.mark-lg { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; transform: scale(.96); } }
.welcome { width: min(26rem, 100%); text-align: left; display: grid; gap: 4px; }
.welcome h1 { font-size: 26px; line-height: 1.2; margin: 28px 0 8px; }
.welcome > p.muted { margin: 0 0 24px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 13px; margin: 14px 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* ---- shell ------------------------------------------------------------- */
.shell { height: 100dvh; display: grid; grid-template-columns: 320px 1fr; }
.bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; min-height: 60px; border-bottom: 1px solid var(--line); background: var(--panel); }
.rooms { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
.rooms .bar { justify-content: space-between; padding-top: max(10px, env(safe-area-inset-top)); }
.avatar-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); cursor: pointer;
  background: color-mix(in srgb, var(--signal) 16%, var(--panel)); font-family: var(--mono); font-weight: 700; color: var(--signal-ink);
}
.room-list { list-style: none; margin: 0; padding: 6px; flex: 1; overflow-y: auto; }
.room-item {
  width: 100%; display: grid; grid-template-columns: 40px 1fr auto; gap: 2px 12px; align-items: center;
  padding: 10px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer;
}
.room-item:hover { background: var(--panel-2); }
.room-item[aria-current="true"] { background: color-mix(in srgb, var(--signal) 12%, var(--panel)); }
.room-badge {
  grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: 15px; text-transform: uppercase;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
}
.room-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-time { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.room-prev { grid-column: 2 / 4; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-prev.wait { color: var(--spark); }
.empty { padding: 20px; color: var(--muted); font-size: 15px; text-align: center; }
.room-list:empty { display: none; }
.room-list:empty + .empty { flex: 1; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
.empty h3 { color: var(--ink); }
.rooms-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }

/* ---- conversation ------------------------------------------------------ */
.conv { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.conv-bar { padding-top: max(10px, env(safe-area-inset-top)); }
.conv-title { flex: 1; min-width: 0; }
.conv-title h2 { font-size: 17px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub { margin: 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back { display: none; margin-left: -8px; }
.sync { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.sync[data-state="ok"] { background: var(--signal); }
.sync[data-state="busy"] { background: var(--signal); animation: blink 1s ease-in-out infinite; }
.sync[data-state="off"] { background: var(--spark); }
@keyframes blink { 50% { opacity: .3; } }
.conv-empty { flex: 1; display: grid; place-items: center; color: var(--faint); padding: 24px; }

.timeline { flex: 1; overflow-y: auto; padding: 16px clamp(12px, 3vw, 32px) 8px; display: flex; flex-direction: column; gap: 3px; overscroll-behavior: contain; }
.day { align-self: center; margin: 14px 0 8px; padding: 2px 10px; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); }
.sys { align-self: center; text-align: center; font-size: 13px; color: var(--muted); margin: 6px 0; max-width: 32rem; }
.nick { font-size: 13px; font-weight: 600; color: var(--signal-ink); margin: 10px 0 1px 12px; }
.msg {
  max-width: min(36rem, 84%); padding: 7px 12px 5px; border-radius: 16px; background: var(--panel);
  border: 1px solid var(--line); align-self: flex-start; overflow-wrap: anywhere; white-space: pre-wrap;
}
.msg.mine { align-self: flex-end; background: var(--mine); border-color: var(--mine-line); }
.msg.mine + .msg.mine, .nick + .msg { margin-top: 0; }
.msg.cont:not(.mine) { border-top-left-radius: 6px; }
.msg.mine.cont { border-top-right-radius: 6px; }
.msg.mine.gap { margin-top: 10px; }
.msg a { color: var(--signal-ink); }
.msg.sealed, .msg.broken { font-style: italic; color: var(--muted); }
.msg.broken { color: var(--danger); }
.time { display: block; text-align: right; font-size: 11px; color: var(--faint); margin-top: 1px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.file { display: grid; grid-template-columns: 40px 1fr; gap: 4px 10px; align-items: center; white-space: normal; min-width: min(17rem, 70vw); }
.file-ico { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--signal) 14%, transparent); color: var(--signal-ink); }
.file-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.file .btn { grid-column: 1 / 3; margin-top: 6px; }
.warn { grid-column: 1 / 3; font-size: 12px; font-weight: 600; color: var(--spark); border: 1px solid color-mix(in srgb, var(--spark) 40%, transparent); border-radius: 8px; padding: 4px 8px; margin-top: 4px; }

.waiting { flex: 1; overflow-y: auto; padding: 32px 20px; max-width: 34rem; margin: 0 auto; width: 100%; }
.waiting h3 { font-size: 20px; margin-bottom: 8px; }
.waiting p { color: var(--muted); margin: 0 0 16px; }
.card-box { background: var(--panel-2); border: 1px dashed var(--line-strong); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.card-code { font: 13px/1.5 var(--mono); word-break: break-all; user-select: all; color: var(--ink); }

.composer {
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 6px;
  padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--panel);
}
.composer textarea { resize: none; max-height: 40vh; border-radius: 22px; padding: 10px 16px; line-height: 1.4; min-height: 44px; }
.send { background: var(--signal); color: var(--on-signal); }
.send:hover { background: var(--signal-ink); color: var(--on-signal); }
.send svg { stroke: currentColor; fill: currentColor; width: 20px; height: 20px; }
.progress { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--panel); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 0; background: var(--signal); transition: width .2s; }

/* ---- dialogs & toast --------------------------------------------------- */
.dlg {
  width: min(30rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
  border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px 18px;
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
}
.dlg::backdrop { background: var(--backdrop); }
.dlg h3 { font-size: 19px; margin-bottom: 14px; }
.dlg-lead { margin: -6px 0 14px; color: var(--ink); font-size: 16px; }
.dlg hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0 14px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 12px; z-index: 10;
  background: var(--ink); color: var(--ground); font-size: 14px; box-shadow: var(--shadow);
}

/* ---- the eye's anchors: who, arrived, new ------------------------------- */
.lead { color: var(--muted); margin: 0 0 22px; font-size: 17px; }
.note { background: color-mix(in srgb, var(--spark) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--spark) 35%, transparent); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 16px; }
.btn.quiet { color: var(--muted); font-weight: 500; margin-top: 6px; }
.btn.quiet:hover { color: var(--ink); background: var(--panel-2); }
.center-row { justify-content: center; }

/* QR codes stay dark-on-white in both themes: cameras need the contrast */
.qr { width: min(232px, 64vw); margin: 4px auto 12px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.qr svg { display: block; width: 100%; height: auto; }
.check-line { text-align: center; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.check { display: block; font: 600 19px/1.4 var(--mono); letter-spacing: .06em; color: var(--ink); word-spacing: .2em; font-variant-numeric: tabular-nums; }
.check-box { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 2px; margin: 0 0 12px; }
.check-box .hint { margin: 0 0 10px; text-align: center; }

.empty h3 { font-size: 18px; margin: 4px 0 6px; }
.empty p { margin: 0 0 12px; }
.waiting { text-align: center; }
.waiting p { max-width: 26rem; margin-left: auto; margin-right: auto; }

.who {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 0; border: 0; background: none;
  font-size: 13px; color: var(--muted); cursor: pointer; text-align: left;
}
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--signal-ink); stroke-width: 2.2; stroke-linecap: round; }
.who:hover span { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.who.warn-state svg { stroke: var(--spark); }
.who-kind { font-size: 14px; color: var(--ink); background: color-mix(in srgb, var(--signal) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.who-kind.old { background: color-mix(in srgb, var(--spark) 10%, var(--panel)); border-color: color-mix(in srgb, var(--spark) 35%, transparent); }
.who-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px; }
.who-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.who-list .who-name { font-weight: 600; }
.who-list .who-tag { font-size: 12px; color: var(--muted); align-self: center; }
.who-list .check { grid-column: 1 / 3; font-size: 15px; font-weight: 500; color: var(--muted); }

.tick { display: inline-block; width: 13px; height: 13px; margin-left: 4px; vertical-align: -2px; fill: none; stroke: var(--faint); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tick.ok { stroke: var(--signal-ink); }
.newline { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--spark); }
.newline::before, .newline::after { content: ""; flex: 1; border-top: 1px solid color-mix(in srgb, var(--spark) 50%, transparent); }
.unread { grid-row: 2; grid-column: 3; justify-self: end; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--signal); color: var(--on-signal); font: 700 12px/22px var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
.room-item.has-unread .room-name { font-weight: 700; }
.room-item.has-unread .room-prev { color: var(--ink); grid-column: 2; }

.field select { width: 100%; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); padding: 0 10px; font-size: 16px; font-weight: 400; color: var(--ink); }
.entry-actions { margin: -4px 0 12px; }
.scan { position: relative; border-radius: 14px; overflow: hidden; background: #000; margin: 0 0 12px; aspect-ratio: 1; max-height: 50vh; }
.scan video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.85); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.25); }

/* ---- phone: one pane at a time ---------------------------------------- */
@media (max-width: 819px) {
  .shell { grid-template-columns: 1fr; }
  body[data-view="rooms"] .conv { display: none; }
  body[data-view="room"] .rooms { display: none; }
  .back { display: inline-grid; }
  .rooms { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ======================================================================
   Farbthemen (data-skin auf <html>). Jedes Thema setzt nur die Tokens neu;
   wenige bekommen eine eigene Note. Ohne data-skin gilt TAGMA (oben).
   ====================================================================== */

/* Natur — eine Landschaft in Pastell: unten Erde, darüber Wiese und Waldhügel,
   oben Himmelblau mit weißen Wolken; abends Dämmerung. Pastell ist Fläche,
   nie Schrift: Texte und Links nehmen kräftigere Töne derselben Familie. */
:root[data-skin="natur"] {
  --ground: #eef1ea; --panel: #fbfaf6; --panel-2: #f2f0e8;
  --ink: #2c3a33; --muted: #627169; --faint: #97a39b;
  --line: #e4e2d8; --line-strong: #d4d3c5;
  --signal: #8fc4a2; --signal-ink: #3d6a4e; --on-signal: #1d3326;
  --spark: #c9805f; --danger: #c0533d;
  --mine: #dcecdf; --mine-line: #c4dfcc; --backdrop: rgba(60, 70, 60, .35);
  --nat-bg:
    radial-gradient(ellipse 20% 6% at 17% 11%, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 13% 5.5% at 26% 9%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 11% 4% at 9% 13%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 24% 7% at 71% 19%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 14% 5.5% at 82% 16%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 16% 4% at 48% 31%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 75% 17% at 18% 73%, #a8caa6 0 60%, rgba(168, 202, 166, 0) 63%),
    radial-gradient(ellipse 65% 15% at 86% 75%, #9bc19d 0 60%, rgba(155, 193, 157, 0) 63%),
    radial-gradient(ellipse 95% 15% at 55% 85%, #cde4b2 0 60%, rgba(205, 228, 178, 0) 63%),
    linear-gradient(180deg, #b9daf2 0%, #d6eaf7 36%, #eaf3ef 60%, #cfe3bf 76%, #dccaa9 89%, #ccb391 100%);
  --nat-glass: rgba(255, 255, 255, .62);
  --nat-msg: rgba(255, 255, 255, .8); --nat-msg-line: #e4ddef;
  --nat-mine: linear-gradient(135deg, #cbe6d3 0%, #e5edc6 100%);
  --nat-btn: linear-gradient(135deg, #a9d4b8 0%, #cfe2ae 100%);
  --nat-pill: #ece5f6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="natur"] {
    --ground: #26242f; --panel: #2b2937; --panel-2: #262430;
    --ink: #ece7f2; --muted: #b3aec4; --faint: #7f7a92;
    --line: #37344a; --line-strong: #47435d;
    --signal: #a8d5ba; --signal-ink: #bfe3cc; --on-signal: #1b2a21;
    --spark: #f2c4a8; --danger: #ff9c8a;
    --mine: #31403a; --mine-line: #4a6352; --backdrop: rgba(10, 8, 20, .6);
    --nat-bg:
    radial-gradient(1px 1px at 22% 9%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 64% 6%, #f4eaff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 84% 15%, #fff 50%, transparent 54%),
    radial-gradient(ellipse 22% 5% at 30% 22%, rgba(214, 190, 235, .16), rgba(214, 190, 235, 0) 72%),
    radial-gradient(ellipse 26% 6% at 74% 28%, rgba(240, 190, 200, .14), rgba(240, 190, 200, 0) 72%),
    radial-gradient(ellipse 75% 17% at 18% 73%, #2f4038 0 60%, rgba(47, 64, 56, 0) 63%),
    radial-gradient(ellipse 65% 15% at 86% 75%, #2a3a33 0 60%, rgba(42, 58, 51, 0) 63%),
    radial-gradient(ellipse 95% 15% at 55% 85%, #3a4c3c 0 60%, rgba(58, 76, 60, 0) 63%),
    linear-gradient(180deg, #1c2140 0%, #302d50 34%, #5b4157 56%, #3c4a3e 72%, #2f3b31 84%, #3a2e24 92%, #2d231b 100%);
    --nat-glass: rgba(40, 38, 52, .72);
    --nat-msg: rgba(255, 255, 255, .055); --nat-msg-line: #4a4463;
    --nat-mine: linear-gradient(135deg, #2f453b 0%, #3c4334 100%);
    --nat-btn: linear-gradient(135deg, #a8d5ba 0%, #d9e3ad 100%);
    --nat-pill: #3a3550;
    color-scheme: dark;
  }
}
/* Natur folgt dem echten Tag bis in die Oberfläche: nachts Dämmerungsfarben */
:root[data-skin="natur"][data-daypart="nacht"] {
    --ground: #26242f; --panel: #2b2937; --panel-2: #262430;
    --ink: #ece7f2; --muted: #b3aec4; --faint: #7f7a92;
    --line: #37344a; --line-strong: #47435d;
    --signal: #a8d5ba; --signal-ink: #bfe3cc; --on-signal: #1b2a21;
    --spark: #f2c4a8; --danger: #ff9c8a;
    --mine: #31403a; --mine-line: #4a6352; --backdrop: rgba(10, 8, 20, .6);
    --nat-bg:
    radial-gradient(1px 1px at 22% 9%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 64% 6%, #f4eaff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 84% 15%, #fff 50%, transparent 54%),
    radial-gradient(ellipse 22% 5% at 30% 22%, rgba(214, 190, 235, .16), rgba(214, 190, 235, 0) 72%),
    radial-gradient(ellipse 26% 6% at 74% 28%, rgba(240, 190, 200, .14), rgba(240, 190, 200, 0) 72%),
    radial-gradient(ellipse 75% 17% at 18% 73%, #2f4038 0 60%, rgba(47, 64, 56, 0) 63%),
    radial-gradient(ellipse 65% 15% at 86% 75%, #2a3a33 0 60%, rgba(42, 58, 51, 0) 63%),
    radial-gradient(ellipse 95% 15% at 55% 85%, #3a4c3c 0 60%, rgba(58, 76, 60, 0) 63%),
    linear-gradient(180deg, #1c2140 0%, #302d50 34%, #5b4157 56%, #3c4a3e 72%, #2f3b31 84%, #3a2e24 92%, #2d231b 100%);
    --nat-glass: rgba(40, 38, 52, .72);
    --nat-msg: rgba(255, 255, 255, .055); --nat-msg-line: #4a4463;
    --nat-mine: linear-gradient(135deg, #2f453b 0%, #3c4334 100%);
    --nat-btn: linear-gradient(135deg, #a8d5ba 0%, #d9e3ad 100%);
    --nat-pill: #3a3550;
    color-scheme: dark;
}

:root[data-skin="natur"] body { background: var(--nat-bg); background-color: var(--ground); }
:root[data-skin="natur"] .rooms, :root[data-skin="natur"] .bar, :root[data-skin="natur"] .composer,
:root[data-skin="natur"] .progress { background: var(--nat-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-skin="natur"] .msg { background: var(--nat-msg); border-color: var(--nat-msg-line); }
:root[data-skin="natur"] .msg.mine { background: var(--nat-mine); border-color: var(--mine-line); }
:root[data-skin="natur"] .btn.primary, :root[data-skin="natur"] .send,
:root[data-skin="natur"] .unread { background: var(--nat-btn); color: var(--on-signal); }
:root[data-skin="natur"] .btn.primary:hover, :root[data-skin="natur"] .send:hover { background: var(--nat-btn); filter: saturate(1.25) brightness(.97); color: var(--on-signal); }
:root[data-skin="natur"] .day { background: var(--nat-pill); border-color: transparent; }
:root[data-skin="natur"] .room-item[aria-current="true"] { background: color-mix(in srgb, var(--signal) 26%, transparent); }
:root[data-skin="natur"] .room-badge { background: var(--nat-pill); border-color: transparent; }
:root[data-skin="natur"] .composer textarea, :root[data-skin="natur"] .field input,
:root[data-skin="natur"] .field textarea { background: var(--nat-msg); }
:root[data-skin="natur"] .newline { color: var(--spark); }

/* Weltraum — Nebel, Sternenfeld, LCARS-Konsole, Lichtschwert. Kanten leuchten
   wie kantenbeleuchtetes Acryl (Edge-Glow). */
:root[data-skin="weltraum"] {
  --ground: #070818; --panel: #0d1030; --panel-2: #0b0d26;
  --ink: #eef0ff; --muted: #aab1e2; --faint: #6f76ab;
  --line: #222864; --line-strong: #353d88;
  --signal: #ff9c3f; --signal-ink: #ffc27a; --on-signal: #1a0f00;
  --spark: #5fd0ff; --danger: #ff4f6e;
  --mine: #3a2585; --mine-line: #b59cff; --backdrop: rgba(3, 4, 18, .8);
  --lc1: #ff9c3f; --lc2: #cc99ff; --lc3: #ffcc99; --lc4: #9999ff; --saber: #5fd0ff;
  --glow-v: 0 0 0 1px rgba(190, 160, 255, .55), 0 0 12px rgba(160, 120, 255, .45), 0 0 28px rgba(120, 80, 255, .22);
  --glow-c: 0 0 0 1px rgba(95, 208, 255, .45), 0 0 10px rgba(95, 208, 255, .35);
  --glow-o: 0 0 0 1px rgba(255, 156, 63, .7), 0 0 14px rgba(255, 156, 63, .45);
  --shadow: var(--glow-v), 0 20px 50px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
:root[data-skin="weltraum"] body {
  background-color: #070818;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 35% 70%, #dfe6ff 50%, transparent 52%),
    radial-gradient(1px 1px at 62% 12%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 80% 48%, #c9d6ff 50%, transparent 52%),
    radial-gradient(1px 1px at 22% 88%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 92% 82%, #ffe9d0 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 15% 40%, #fff 50%, transparent 55%),
    radial-gradient(1.6px 1.6px at 70% 30%, #e6ecff 50%, transparent 55%),
    radial-gradient(2px 2px at 45% 85%, #fff 45%, transparent 60%),
    radial-gradient(5px 5px at 45% 85%, rgba(170, 200, 255, .35), transparent 70%),
    radial-gradient(ellipse 65% 45% at 88% 8%, rgba(200, 70, 220, .42), transparent 70%),
    radial-gradient(ellipse 60% 42% at 6% 92%, rgba(30, 170, 230, .34), transparent 70%),
    radial-gradient(ellipse 45% 35% at 55% 55%, rgba(90, 60, 210, .22), transparent 70%),
    linear-gradient(180deg, #070818 0%, #0b0a26 60%, #140a28 100%);
  background-size: 210px 210px, 210px 210px, 210px 210px, 210px 210px, 210px 210px, 210px 210px,
                   380px 380px, 380px 380px, 380px 380px, 380px 380px,
                   100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat,
                     no-repeat, no-repeat, no-repeat, no-repeat;
}
:root[data-skin="weltraum"] .shell::before {          /* a few stars twinkle */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(2px 2px at 28% 33%, #fff 40%, transparent 65%),
    radial-gradient(2px 2px at 74% 18%, #fff 40%, transparent 65%),
    radial-gradient(2px 2px at 58% 76%, #fff 40%, transparent 65%);
  background-size: 520px 520px;
  animation: twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .15; } to { opacity: 1; } }
:root[data-skin="weltraum"] .shell { position: relative; }
:root[data-skin="weltraum"] .rooms, :root[data-skin="weltraum"] .conv { position: relative; z-index: 1; }
:root[data-skin="weltraum"] .timeline, :root[data-skin="weltraum"] .waiting { background: transparent; }

/* LCARS-Konsole: Kopfzeilen mit Endkappe und Farbsegmenten */
:root[data-skin="weltraum"] .rooms, :root[data-skin="weltraum"] .bar,
:root[data-skin="weltraum"] .composer { background: rgba(9, 11, 38, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-skin="weltraum"] .bar { border-bottom: 0; position: relative; }
:root[data-skin="weltraum"] .bar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--lc1) 0 32%, transparent 32% 33%, var(--lc2) 33% 57%,
              transparent 57% 58%, var(--lc3) 58% 74%, transparent 74% 75%, var(--lc4) 75% 100%);
  box-shadow: 0 0 10px rgba(255, 156, 63, .35);
}
:root[data-skin="weltraum"] .conv-bar { box-shadow: inset 16px 0 0 var(--lc1); padding-left: 28px; }
:root[data-skin="weltraum"] .conv-title h2 { color: #ffe81f; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 10px rgba(255, 232, 31, .45); }
:root[data-skin="weltraum"] .brand { color: var(--lc3); }
:root[data-skin="weltraum"] .rooms { border-right: 0; box-shadow: 1px 0 0 rgba(153, 153, 255, .35), 6px 0 18px rgba(80, 60, 200, .18); }
:root[data-skin="weltraum"] .rooms-actions, :root[data-skin="weltraum"] .composer { border-top: 0; box-shadow: 0 -1px 0 rgba(153, 153, 255, .4), 0 -6px 18px rgba(80, 60, 200, .15); }

/* Edge-Glow: Blasen, Felder, Knöpfe leuchten an den Kanten */
:root[data-skin="weltraum"] .msg { background: rgba(14, 18, 56, .72); border-color: transparent; box-shadow: var(--glow-c); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-skin="weltraum"] .msg.mine { background: linear-gradient(135deg, rgba(86, 46, 176, .92) 0%, rgba(40, 58, 170, .92) 100%); box-shadow: var(--glow-v); border-radius: 18px 6px 18px 18px; }
:root[data-skin="weltraum"] .file-ico { background: rgba(255, 156, 63, .16); color: var(--lc1); box-shadow: inset 0 0 0 1px rgba(255, 156, 63, .5); }
:root[data-skin="weltraum"] .btn.primary { background: var(--lc1); color: #1a0f00; border-radius: 999px; box-shadow: var(--glow-o); }
:root[data-skin="weltraum"] .btn.primary:hover { background: var(--lc3); }
:root[data-skin="weltraum"] .btn.ghost { border-radius: 999px; border-color: transparent; box-shadow: 0 0 0 1px rgba(153, 153, 255, .7), 0 0 10px rgba(153, 153, 255, .25); }
:root[data-skin="weltraum"] .send {                 /* Lichtschwert */
  background: radial-gradient(circle at 42% 38%, #f2fbff 0 14%, var(--saber) 48%, #1677b8 100%);
  color: #021220; box-shadow: 0 0 0 1px rgba(95, 208, 255, .9), 0 0 16px rgba(95, 208, 255, .85), 0 0 34px rgba(95, 208, 255, .4);
}
:root[data-skin="weltraum"] .send:hover { color: #021220; background: radial-gradient(circle at 42% 38%, #fff 0 18%, #8fe0ff 50%, #1d8ad0 100%); }
:root[data-skin="weltraum"] .composer textarea { background: rgba(18, 22, 64, .85); border-color: transparent; border-radius: 999px; box-shadow: 0 0 0 1px rgba(153, 153, 255, .75), 0 0 12px rgba(153, 153, 255, .25); }
:root[data-skin="weltraum"] .composer textarea:focus { box-shadow: var(--glow-c), 0 0 22px rgba(95, 208, 255, .35); }
:root[data-skin="weltraum"] .room-item[aria-current="true"] { background: linear-gradient(90deg, rgba(255, 156, 63, .26), rgba(204, 153, 255, .1)); box-shadow: inset 6px 0 0 var(--lc1); }
:root[data-skin="weltraum"] .room-badge { background: var(--lc2); color: #1a0f2e; border-color: transparent; border-radius: 999px 8px 8px 999px; box-shadow: 0 0 10px rgba(204, 153, 255, .45); }
:root[data-skin="weltraum"] .avatar-btn { background: var(--lc4); color: #0d0b2a; border-color: transparent; box-shadow: 0 0 12px rgba(153, 153, 255, .55); }
:root[data-skin="weltraum"] .day { background: var(--lc2); color: #160c2c; border-color: transparent; border-radius: 999px 6px 6px 999px; box-shadow: 0 0 10px rgba(204, 153, 255, .4); }
:root[data-skin="weltraum"] .day, :root[data-skin="weltraum"] .label, :root[data-skin="weltraum"] .nick { text-transform: uppercase; letter-spacing: .14em; }
:root[data-skin="weltraum"] .nick { color: var(--lc3); }
:root[data-skin="weltraum"] .sys { color: var(--lc4); }
:root[data-skin="weltraum"] .unread { background: var(--lc1); box-shadow: 0 0 10px rgba(255, 156, 63, .6); }
:root[data-skin="weltraum"] .sync[data-state="ok"] { background: var(--saber); box-shadow: 0 0 8px var(--saber); }
:root[data-skin="weltraum"] .dlg { background: rgba(11, 13, 42, .97); border-color: transparent; }
:root[data-skin="weltraum"] .qr { box-shadow: var(--glow-v); }
:root[data-skin="weltraum"] :focus-visible { outline-color: var(--saber); box-shadow: 0 0 0 2px var(--saber), 0 0 16px 3px rgba(95, 208, 255, .7); }

/* Hochkontrast — Signalgelb und Schwarz wie gute Verkehrsschilder: so deutlich
   wie möglich, und trotzdem schön. Hell wie dunkel dieselbe Handschrift. */
:root[data-skin="kontrast"] {
  --ground: #fffdf2; --panel: #ffffff; --panel-2: #f6f2df;
  --ink: #000000; --muted: #1c1c1c; --faint: #3a3a3a;
  --line: #000000; --line-strong: #000000;
  --signal: #000000; --signal-ink: #002fa7; --on-signal: #ffd43b;
  --spark: #b3261e; --danger: #b3261e;
  --mine: #ffd43b; --mine-line: #000000; --backdrop: rgba(0, 0, 0, .7);
  --yellow: #ffd43b;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="kontrast"] {
    --ground: #000000; --panel: #0b0b0b; --panel-2: #161616;
    --ink: #ffffff; --muted: #f2f2f2; --faint: #d0d0d0;
    --line: #ffffff; --line-strong: #ffffff;
    --signal: #ffd43b; --signal-ink: #ffe27a; --on-signal: #000000;
    --spark: #ffa14a; --danger: #ff7b7b;
    --mine: #ffd43b; --mine-line: #ffd43b; --backdrop: rgba(0, 0, 0, .82);
    color-scheme: dark;
  }
}
:root[data-skin="kontrast"] body { font-weight: 500; }
:root[data-skin="kontrast"] .msg { border-width: 2px; border-radius: 10px; }
:root[data-skin="kontrast"] .msg.mine { --ink: #000; --muted: #111; --faint: #222; --signal-ink: #002fa7; color: #000; border-color: #000; }
:root[data-skin="kontrast"] .msg.mine .tick, :root[data-skin="kontrast"] .msg.mine .exp { stroke: #000; }
:root[data-skin="kontrast"] .btn, :root[data-skin="kontrast"] .composer textarea, :root[data-skin="kontrast"] .field input,
:root[data-skin="kontrast"] .field textarea, :root[data-skin="kontrast"] .field select { border-width: 2px; border-radius: 8px; }
:root[data-skin="kontrast"] .btn.ghost { border-color: var(--ink); }
:root[data-skin="kontrast"] .bar { border-bottom: 3px solid var(--yellow, #ffd43b); }
:root[data-skin="kontrast"] .composer, :root[data-skin="kontrast"] .rooms-actions { border-top: 3px solid #ffd43b; }
:root[data-skin="kontrast"] .rooms { border-right: 3px solid #ffd43b; }
:root[data-skin="kontrast"] .room-item[aria-current="true"] { background: #ffd43b; color: #000; }
:root[data-skin="kontrast"] .room-item[aria-current="true"] .room-prev, :root[data-skin="kontrast"] .room-item[aria-current="true"] .room-time { color: #000; }
:root[data-skin="kontrast"] .room-badge { background: #000; color: #ffd43b; border: 2px solid #ffd43b; border-radius: 8px; }
:root[data-skin="kontrast"] .day { background: #000; color: #ffd43b; border: 2px solid #000; border-radius: 6px; }
:root[data-skin="kontrast"] .nick { color: var(--ink); text-decoration: underline; text-decoration-color: #ffd43b; text-decoration-thickness: 3px; text-underline-offset: 4px; }
:root[data-skin="kontrast"] .msg a { text-decoration-thickness: 2px; }
:root[data-skin="kontrast"] :focus-visible { outline: 3px solid #ffd43b; outline-offset: 2px; box-shadow: 0 0 0 6px #000; }
:root[data-skin="kontrast"] .time, :root[data-skin="kontrast"] .hint { color: var(--muted); }

/* Nachtlicht — Kerzenschein: warmes Glühen von unten, ganz ohne Blau */
:root[data-skin="nachtlicht"] {
  --ground: #140d06; --panel: #1d140a; --panel-2: #181108;
  --ink: #ffd9a8; --muted: #c9a273; --faint: #8a6a45;
  --line: #2e2110; --line-strong: #3e2c16;
  --signal: #ff9f2e; --signal-ink: #ffbf6a; --on-signal: #1a0d00;
  --spark: #ff6f3c; --danger: #ff6b4a;
  --mine: #3a240c; --mine-line: #6a4316; --backdrop: rgba(0, 0, 0, .7);
  --shadow: 0 18px 44px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
:root[data-skin="nachtlicht"] body {
  background:
    radial-gradient(ellipse 120% 60% at 50% 115%, rgba(255, 140, 40, .26), transparent 62%),
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(255, 90, 30, .09), transparent 60%),
    #120b05;
}
:root[data-skin="nachtlicht"] .rooms, :root[data-skin="nachtlicht"] .bar,
:root[data-skin="nachtlicht"] .composer { background: rgba(28, 19, 9, .82); }
:root[data-skin="nachtlicht"] .msg { background: rgba(42, 28, 13, .78); border-color: #3b2a14; }
:root[data-skin="nachtlicht"] .msg.mine { background: linear-gradient(135deg, #4d2f10 0%, #3a230c 100%); border-color: #7a4d1a; }
:root[data-skin="nachtlicht"] .send, :root[data-skin="nachtlicht"] .btn.primary {
  background: radial-gradient(circle at 42% 35%, #ffe0ad 0 10%, #ffa23a 55%, #d8701a 100%); color: #1a0d00;
  box-shadow: 0 0 18px rgba(255, 159, 46, .45);
}
:root[data-skin="nachtlicht"] .day { background: #2a1c0c; border-color: #4a3216; color: var(--signal-ink); }
:root[data-skin="nachtlicht"] .qr { filter: sepia(.35); }

/* Terminal — grüner Phosphor auf der Röhre: Abdunklung zum Rand, Rasterlinien,
   blinkender Cursor; Knöpfe als leuchtende Umrisse */
:root[data-skin="terminal"] {
  --ground: #020a04; --panel: #031108; --panel-2: #020d06;
  --ink: #6dff8a; --muted: #3fbf5c; --faint: #2a7a3c;
  --line: #0b3016; --line-strong: #12471f;
  --signal: #39ff6a; --signal-ink: #8dffa6; --on-signal: #001a07;
  --spark: #d6ff3a; --danger: #ff5555;
  --mine: #06301a; --mine-line: #1d7a3a; --backdrop: rgba(0, 0, 0, .75);
  --sans: var(--mono);
  color-scheme: dark;
}
:root[data-skin="terminal"] body { text-shadow: 0 0 6px rgba(57, 255, 106, .35); background: radial-gradient(ellipse 85% 75% at 50% 45%, #04170a 0%, #020a04 70%, #000 100%); }
:root[data-skin="terminal"] .timeline { background-image: repeating-linear-gradient(to bottom, rgba(57, 255, 106, .04) 0 1px, transparent 1px 3px); }
:root[data-skin="terminal"] .rooms, :root[data-skin="terminal"] .bar, :root[data-skin="terminal"] .composer { background: rgba(2, 14, 6, .9); }
:root[data-skin="terminal"] .msg, :root[data-skin="terminal"] .btn, :root[data-skin="terminal"] .composer textarea { border-radius: 3px; }
:root[data-skin="terminal"] .msg { background: rgba(3, 20, 9, .7); }
:root[data-skin="terminal"] .msg.mine { background: rgba(8, 48, 24, .7); }
:root[data-skin="terminal"] .btn.primary, :root[data-skin="terminal"] .send { background: transparent; color: var(--signal); box-shadow: 0 0 0 1px var(--signal), 0 0 10px rgba(57, 255, 106, .4); }
:root[data-skin="terminal"] .btn.primary:hover, :root[data-skin="terminal"] .send:hover { background: rgba(57, 255, 106, .14); color: var(--signal-ink); }
:root[data-skin="terminal"] .conv-title h2::before { content: "> "; color: var(--muted); }
:root[data-skin="terminal"] .conv-title h2::after { content: "_"; animation: cursor 1.1s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
:root[data-skin="terminal"] .room-badge { border-radius: 3px; background: transparent; color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
:root[data-skin="terminal"] .day { border-radius: 3px; background: transparent; color: var(--muted); }

/* Schriftgröße */
/* Groß = +25 %, Sehr groß = +50 % — für alles, was man liest, nicht nur den Fließtext */
:root[data-size="gross"] { --fs: 1.25; }
:root[data-size="sehr"] { --fs: 1.5; }
:root[data-size] body, :root[data-size] .msg, :root[data-size] .composer textarea,
:root[data-size] .field input, :root[data-size] .field select, :root[data-size] .field textarea,
:root[data-size] .file-name, :root[data-size] .room-name, :root[data-size] .switch { font-size: calc(16px * var(--fs)); }
:root[data-size] .nick, :root[data-size] .sys, :root[data-size] .who, :root[data-size] .sub,
:root[data-size] .hint, :root[data-size] .file-size, :root[data-size] .theme-note, :root[data-size] .switch small { font-size: calc(13.5px * var(--fs)); }
:root[data-size] .room-prev, :root[data-size] .btn.small, :root[data-size] .field { font-size: calc(14px * var(--fs)); }
:root[data-size] .btn { font-size: calc(15px * var(--fs)); min-height: calc(44px * var(--fs)); }
:root[data-size] .time, :root[data-size] .day, :root[data-size] .label, :root[data-size] .warn,
:root[data-size] .room-time, :root[data-size] .newline { font-size: calc(11.5px * var(--fs)); }
:root[data-size] .conv-title h2, :root[data-size] .lead { font-size: calc(17px * var(--fs)); }
:root[data-size] .dlg h3, :root[data-size] .check { font-size: calc(19px * var(--fs)); }
:root[data-size] .welcome h1 { font-size: calc(26px * var(--fs)); }
:root[data-size] .unread { font-size: calc(12px * var(--fs)); height: calc(22px * var(--fs)); line-height: calc(22px * var(--fs)); min-width: calc(22px * var(--fs)); border-radius: 999px; }
:root[data-size] .composer textarea { min-height: calc(44px * var(--fs)); }
:root[data-size] .icon-btn { width: calc(44px * var(--fs)); height: calc(44px * var(--fs)); }
:root[data-size] .icon-btn svg { width: calc(22px * var(--fs)); height: calc(22px * var(--fs)); }
:root[data-size] .tick, :root[data-size] .exp { width: calc(13px * var(--fs)); height: calc(13px * var(--fs)); }
:root[data-size="sehr"] .msg { max-width: min(40rem, 92%); }
:root[data-size="sehr"] .skins { grid-template-columns: repeat(2, 1fr); }

/* ---- Einstellungen ------------------------------------------------------ */
.skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.skin {
  display: grid; justify-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 600;
}
.skin[aria-checked="true"] { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
.swatch { width: 44px; height: 28px; border-radius: 8px; border: 1px solid rgba(127, 127, 127, .35); position: relative; overflow: hidden; }
.swatch::before, .swatch::after { content: ""; position: absolute; top: 7px; width: 12px; height: 12px; border-radius: 50%; }
.swatch::before { left: 8px; background: var(--a); }
.swatch::after { right: 8px; background: var(--b); }
.seg { margin: 0 0 14px; }
.seg .btn[aria-pressed="true"] { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
.timer-box { margin: 0 0 12px; }

/* ---- Bilder im Gespräch, Ablage per Ziehen ------------------------------- */
.file .preview { grid-column: 1 / 3; }
.preview { display: block; margin: 2px 0 4px; border-radius: 10px; overflow: hidden; background: var(--panel-2); cursor: zoom-in; border: 0; padding: 0; max-width: min(320px, 70vw); }
.preview img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
.preview.loading { width: min(280px, 64vw); aspect-ratio: 4 / 3; animation: blink 1.4s ease-in-out infinite; }
.lightbox { padding: 0; background: transparent; border: 0; max-width: 96vw; max-height: 96dvh; }
.lightbox::backdrop { background: rgba(0, 0, 0, .86); }
.lightbox img { display: block; max-width: 96vw; max-height: 86dvh; border-radius: 10px; }
.lightbox .row { justify-content: center; margin-top: 10px; }
.conv.drop { outline: 3px dashed var(--signal); outline-offset: -10px; }
.exp { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; fill: none; stroke: var(--spark); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ======================================================================
   Augenschonend (data-eye) — für jedes Thema: weniger Blau, keine harten
   Spitzen (kein reines Weiß auf reinem Schwarz), keine Leucht-, Flimmer-
   oder Bewegungseffekte. Die Farbwelt des Themas bleibt erkennbar.
   ====================================================================== */
:root[data-eye] body { text-shadow: none !important; }
:root[data-eye] .timeline { background-image: none !important; }
:root[data-eye] *, :root[data-eye] *::before, :root[data-eye] *::after { animation: none !important; transition: none !important; }
:root[data-eye] :focus-visible { box-shadow: none !important; }
:root[data-eye] .shell::after {             /* sanfter Warmton über der Oberfläche: weniger Blau */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: rgba(255, 150, 40, .07); mix-blend-mode: multiply;
}
:root[data-eye] .shell { position: relative; }

:root[data-eye]:not([data-skin]) { --ground: #f1f0e9; --panel: #fbfaf5; --ink: #22302d; --muted: #4f625d; }
@media (prefers-color-scheme: dark) {
  :root[data-eye]:not([data-skin]):not([data-theme="light"]) { --ground: #0e1719; --panel: #13201f; --ink: #d6e0dc; --muted: #8fa49f; --signal: #4cc9b2; }
}
:root[data-eye][data-skin="natur"] { --ink: #33413a; }
@media (prefers-color-scheme: dark) {
  :root[data-eye][data-skin="natur"] { --ink: #e2dcea; }
}
:root[data-eye][data-skin="weltraum"] { --ink: #d6d9f2; --muted: #979cc6; --mine-line: #7f74c4; --signal: #f2a35a; --spark: #73b6d9; }
:root[data-eye][data-skin="weltraum"] body { background-image: linear-gradient(180deg, #0a0b20 0%, #100c26 100%); background-size: auto; }
:root[data-eye][data-skin="weltraum"] .shell::before { display: none; }
:root[data-eye][data-skin="weltraum"] .conv-title h2 { color: #e6d36a; text-shadow: none; }
:root[data-eye] .msg, :root[data-eye] .msg.mine, :root[data-eye] .send, :root[data-eye] .btn,
:root[data-eye] .room-badge, :root[data-eye] .day, :root[data-eye] .avatar-btn, :root[data-eye] .unread,
:root[data-eye] .composer textarea, :root[data-eye] .bar::after { box-shadow: none !important; }
:root[data-eye][data-skin="weltraum"] .msg { box-shadow: 0 0 0 1px rgba(120, 140, 220, .35) !important; }
:root[data-eye][data-skin="weltraum"] .msg.mine { box-shadow: 0 0 0 1px rgba(170, 150, 230, .5) !important; }
:root[data-eye][data-skin="terminal"] .conv-title h2::after { content: ""; }
:root[data-eye][data-skin="nachtlicht"] body { background: #120b05; }
:root[data-eye][data-skin="kontrast"] { --ground: #fbf8ec; --ink: #111111; --mine: #f5d76e; }
@media (prefers-color-scheme: dark) {
  :root[data-eye][data-skin="kontrast"] { --ground: #070707; --ink: #ededed; --signal: #f0cc38; --mine: #f0cc38; }
}
:root[data-eye][data-skin="nachtlicht"] { --ink: #f0c995; --signal: #f39a35; }
:root[data-eye][data-skin="nachtlicht"] .shell::after { background: none; }
:root[data-eye][data-skin="terminal"] { --ink: #5fd97a; --muted: #3aa955; --signal: #4fe07a; --signal-ink: #8fe8a4; }

.theme-note { margin: -4px 0 12px; font-size: 14px; color: var(--muted); min-height: 3.2em; }
.switch { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 4px; cursor: pointer; font-size: 15px; font-weight: 600; }
.switch input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--signal); flex: none; }
.switch small { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ======================================================================
   Szenen — jedes Thema erzählt mit einem eigenen Bild, was es bedeutet.
   Selbst gezeichnete SVGs (keine fremden Bilder), hinter den Nachrichten.
   ====================================================================== */
.conv { position: relative; overflow: hidden; }
.conv > * { position: relative; z-index: 1; }
.conv::before, .conv::after { content: none; position: absolute; pointer-events: none; z-index: 0; background-repeat: no-repeat; background-size: contain; }

/* TAGMA — das Netz selbst: Waben aus Sechsecken, ein Sternbild verbundener Knoten */
:root:not([data-skin]) body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cpath d='M17.32 0V10L0 20V40L17.32 50V60M17.32 10L34.64 20V40L17.32 50' fill='none' stroke='%230f9e88' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 34.64px 60px, var(--ground); }
:root:not([data-skin]) .conv::before { content: ""; right: -40px; bottom: 76px; width: 400px; height: 324px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 340'%3E%3Cpath d='M60 300L150 240L250 270L330 180L260 110L150 140L60 300M150 140L150 240M250 270L260 110M330 180L380 300L250 270M90 170L150 140M90 170L60 300M210 40L260 110M210 40L150 140' fill='none' stroke='%230f9e88' stroke-opacity='0.22' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='300' r='7' fill='%230f9e88' fill-opacity='0.40'/%3E%3Ccircle cx='150' cy='240' r='5' fill='%230f9e88' fill-opacity='0.40'/%3E%3Ccircle cx='250' cy='270' r='5' fill='%230f9e88' fill-opacity='0.40'/%3E%3Ccircle cx='330' cy='180' r='7' fill='%230f9e88' fill-opacity='0.40'/%3E%3Ccircle cx='150' cy='140' r='5' fill='%230f9e88' fill-opacity='0.40'/%3E%3Ccircle cx='380' cy='300' r='7' fill='%230f9e88' fill-opacity='0.40'/%3E%3Ccircle cx='90' cy='170' r='5' fill='%230f9e88' fill-opacity='0.40'/%3E%3Ccircle cx='210' cy='40' r='5' fill='%230f9e88' fill-opacity='0.40'/%3E%3Ccircle cx='260' cy='110' r='16' fill='%23e0663a' fill-opacity='0.18'/%3E%3Ccircle cx='260' cy='110' r='8' fill='%23e0663a' fill-opacity='0.53'/%3E%3Cg transform='translate(330 60) scale(1.6)' fill='none' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpolygon points='0,5 -8.66,10 -17.32,5 -17.32,-5 -8.66,-10 0,-5' stroke='%230f9e88' stroke-opacity='0.44'/%3E%3Cpolygon points='0,5 9.51,8.09 15.39,0 9.51,-8.09 0,-5' stroke='%23e0663a' stroke-opacity='0.44'/%3E%3C/g%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-skin]):not([data-theme="light"]) body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60' viewBox='0 0 34.64 60'%3E%3Cpath d='M17.32 0V10L0 20V40L17.32 50V60M17.32 10L34.64 20V40L17.32 50' fill='none' stroke='%2338e0c4' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 34.64px 60px, var(--ground); }
  :root:not([data-skin]):not([data-theme="light"]) .conv::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 340'%3E%3Cpath d='M60 300L150 240L250 270L330 180L260 110L150 140L60 300M150 140L150 240M250 270L260 110M330 180L380 300L250 270M90 170L150 140M90 170L60 300M210 40L260 110M210 40L150 140' fill='none' stroke='%2338e0c4' stroke-opacity='0.2' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='300' r='7' fill='%2338e0c4' fill-opacity='0.36'/%3E%3Ccircle cx='150' cy='240' r='5' fill='%2338e0c4' fill-opacity='0.36'/%3E%3Ccircle cx='250' cy='270' r='5' fill='%2338e0c4' fill-opacity='0.36'/%3E%3Ccircle cx='330' cy='180' r='7' fill='%2338e0c4' fill-opacity='0.36'/%3E%3Ccircle cx='150' cy='140' r='5' fill='%2338e0c4' fill-opacity='0.36'/%3E%3Ccircle cx='380' cy='300' r='7' fill='%2338e0c4' fill-opacity='0.36'/%3E%3Ccircle cx='90' cy='170' r='5' fill='%2338e0c4' fill-opacity='0.36'/%3E%3Ccircle cx='210' cy='40' r='5' fill='%2338e0c4' fill-opacity='0.36'/%3E%3Ccircle cx='260' cy='110' r='16' fill='%23ff9d6c' fill-opacity='0.16'/%3E%3Ccircle cx='260' cy='110' r='8' fill='%23ff9d6c' fill-opacity='0.48'/%3E%3Cg transform='translate(330 60) scale(1.6)' fill='none' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpolygon points='0,5 -8.66,10 -17.32,5 -17.32,-5 -8.66,-10 0,-5' stroke='%2338e0c4' stroke-opacity='0.40'/%3E%3Cpolygon points='0,5 9.51,8.09 15.39,0 9.51,-8.09 0,-5' stroke='%23ff9d6c' stroke-opacity='0.40'/%3E%3C/g%3E%3C/svg%3E"); }
}
:root:not([data-skin]) .timeline { background: transparent; }

/* Weltraum — ein Ringplanet mit Mond schwebt über Nebel und Sternen */
:root[data-skin="weltraum"] .conv::before { content: ""; right: -120px; bottom: 60px; width: 380px; height: 380px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E %3CradialGradient id='g' cx='36%25' cy='30%25' r='72%25'%3E%3Cstop offset='0' stop-color='%23ffe6c9'/%3E%3Cstop offset='.33' stop-color='%23f291ad'/%3E%3Cstop offset='.68' stop-color='%236b40ba'/%3E%3Cstop offset='1' stop-color='%231a0e3a'/%3E%3C/radialGradient%3E %3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%239fd8ff' stop-opacity='0'/%3E%3Cstop offset='.22' stop-color='%23cfe9ff' stop-opacity='.75'/%3E%3Cstop offset='.5' stop-color='%23ffd6a8' stop-opacity='.95'/%3E%3Cstop offset='.78' stop-color='%23cfe9ff' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%239fd8ff' stop-opacity='0'/%3E%3C/linearGradient%3E %3CradialGradient id='h' r='50%25'%3E%3Cstop offset='.62' stop-color='%23b38cff' stop-opacity='.4'/%3E%3Cstop offset='1' stop-color='%23b38cff' stop-opacity='0'/%3E%3C/radialGradient%3E %3CclipPath id='f'%3E%3Crect x='0' y='200' width='400' height='200'/%3E%3C/clipPath%3E %3ClinearGradient id='band' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.42' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23fff' stop-opacity='.13'/%3E%3Cstop offset='.58' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E %3C/defs%3E %3Ccircle cx='200' cy='200' r='160' fill='url(%23h)'/%3E %3Cg transform='rotate(-16 200 200)'%3E%3Cellipse cx='200' cy='200' rx='188' ry='40' fill='none' stroke='url(%23r)' stroke-width='9'/%3E%3Cellipse cx='200' cy='200' rx='170' ry='34' fill='none' stroke='url(%23r)' stroke-width='3' opacity='.7'/%3E%3C/g%3E %3Ccircle cx='200' cy='200' r='106' fill='url(%23g)'/%3E%3Ccircle cx='200' cy='200' r='106' fill='url(%23band)' transform='rotate(-16 200 200)'/%3E %3Cg transform='rotate(-16 200 200)' clip-path='url(%23f)'%3E%3Cellipse cx='200' cy='200' rx='188' ry='40' fill='none' stroke='url(%23r)' stroke-width='9'/%3E%3Cellipse cx='200' cy='200' rx='170' ry='34' fill='none' stroke='url(%23r)' stroke-width='3' opacity='.7'/%3E%3C/g%3E %3Ccircle cx='352' cy='62' r='15' fill='%23d7dcff'/%3E%3Ccircle cx='358' cy='57' r='15' fill='%23141236' opacity='.55'/%3E %3C/svg%3E"); }

/* Hochkontrast — Bauhaus: Kreis, Halbkreis, Balken in Signalgelb und Schwarz */
:root[data-skin="kontrast"] .conv::before { content: ""; right: -132px; top: 46%; width: 250px; height: 250px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E %3Ccircle cx='250' cy='170' r='140' fill='%23ffd43b'/%3E %3Cpath d='M70 400A150 150 0 0 1 370 400Z' fill='%23000000'/%3E %3Crect x='-20' y='236' width='440' height='28' fill='%23000000' transform='rotate(-22 200 250)'/%3E %3Ccircle cx='96' cy='120' r='30' fill='none' stroke='%23000000' stroke-width='10'/%3E %3Crect x='300' y='300' width='58' height='58' fill='%23ffd43b' stroke='%23000000' stroke-width='8'/%3E %3Ccircle cx='250' cy='170' r='34' fill='%23fffdf2'/%3E %3C/svg%3E"); }
@media (prefers-color-scheme: dark) {
  :root[data-skin="kontrast"] .conv::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E %3Ccircle cx='250' cy='170' r='140' fill='%23ffd43b'/%3E %3Cpath d='M70 400A150 150 0 0 1 370 400Z' fill='%232b2b2b'/%3E %3Crect x='-20' y='236' width='440' height='28' fill='%232b2b2b' transform='rotate(-22 200 250)'/%3E %3Ccircle cx='96' cy='120' r='30' fill='none' stroke='%232b2b2b' stroke-width='10'/%3E %3Crect x='300' y='300' width='58' height='58' fill='%23ffd43b' stroke='%232b2b2b' stroke-width='8'/%3E %3Ccircle cx='250' cy='170' r='34' fill='%23000000'/%3E %3C/svg%3E"); }
}

/* Nachtlicht — drei Kerzen mit Lichthöfen, oben die Mondsichel */
:root[data-skin="nachtlicht"] .conv::before { content: ""; left: -30px; bottom: 60px; width: 300px; height: 280px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 300'%3E%3Cdefs%3E %3CradialGradient id='gl' r='50%25'%3E%3Cstop offset='0' stop-color='%23ffb347' stop-opacity='.55'/%3E%3Cstop offset='.45' stop-color='%23ff8a2a' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%23ff8a2a' stop-opacity='0'/%3E%3C/radialGradient%3E %3ClinearGradient id='wax' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236b4319'/%3E%3Cstop offset='.45' stop-color='%239a6427'/%3E%3Cstop offset='1' stop-color='%234e300f'/%3E%3C/linearGradient%3E %3ClinearGradient id='fl' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23ff9a2e'/%3E%3Cstop offset='.55' stop-color='%23ffd27a'/%3E%3Cstop offset='1' stop-color='%23fff4d6'/%3E%3C/linearGradient%3E %3C/defs%3E %3Ccircle cx='105' cy='126' r='90' fill='url(%23gl)'/%3E%3Ccircle cx='165' cy='86' r='110' fill='url(%23gl)'/%3E%3Ccircle cx='222' cy='146' r='80' fill='url(%23gl)'/%3E %3Cellipse cx='165' cy='284' rx='150' ry='14' fill='%232a1806'/%3E %3Crect x='86' y='150' width='38' height='130' rx='5' fill='url(%23wax)'/%3E%3Crect x='142' y='110' width='46' height='170' rx='5' fill='url(%23wax)'/%3E%3Crect x='205' y='170' width='34' height='110' rx='5' fill='url(%23wax)'/%3E %3Cpath d='M142 118q6 14 0 26' stroke='%23b57a35' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M124 160q-5 12 0 22' stroke='%23b57a35' stroke-width='4' fill='none' stroke-linecap='round'/%3E %3Cpath d='M105 150V144M165 110V104M222 170V164' stroke='%232a1806' stroke-width='2'/%3E %3C/svg%3E"); opacity: .92; }
:root[data-skin="nachtlicht"] .conv::after { content: ""; right: 18px; top: 74px; width: 120px; height: 120px; background-image: var(--moon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3CradialGradient id='m' r='50%25'%3E%3Cstop offset='.45' stop-color='%23ffcf8a' stop-opacity='.35'/%3E%3Cstop offset='1' stop-color='%23ffcf8a' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='c'%3E%3Crect width='120' height='120' fill='%23fff'/%3E%3Ccircle cx='72' cy='50' r='26' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='60' cy='60' r='58' fill='url(%23m)'/%3E%3Ccircle cx='60' cy='60' r='28' fill='%23ffd9a0' mask='url(%23c)'/%3E%3C/svg%3E")); }

/* Terminal — Leiterbahnen und der Prozessor: der CPU-Kern, aus dem alles wuchs */
:root[data-skin="terminal"] .timeline { background-image: repeating-linear-gradient(to bottom, rgba(57, 255, 106, .04) 0 1px, transparent 1px 3px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E %3Cg fill='none' stroke='%2339ff6a' stroke-opacity='.11' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M0 30H60L80 50H140L160 30H200'/%3E%3Cpath d='M30 0V70L50 90V200'/%3E%3Cpath d='M110 200V150L130 130H200'/%3E %3Cpath d='M0 170H40L60 150H90'/%3E%3Cpath d='M170 0V60L150 80V110'/%3E%3Cpath d='M80 50V100H120'/%3E%3C/g%3E %3Cg fill='%2339ff6a' fill-opacity='.16'%3E%3Ccircle cx='90' cy='150' r='4'/%3E%3Ccircle cx='150' cy='110' r='4'/%3E%3Ccircle cx='120' cy='100' r='4'/%3E%3Ccircle cx='60' cy='30' r='3'/%3E%3Ccircle cx='130' cy='130' r='3'/%3E%3C/g%3E %3C/svg%3E"); background-size: auto, 200px 200px; }
:root[data-skin="terminal"] .conv::before { content: ""; right: -70px; bottom: 70px; width: 280px; height: 280px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E %3Cg fill='%2339ff6a' fill-opacity='.22'%3E%3Crect x='70' y='34' width='8' height='22' rx='2'/%3E%3Crect x='70' y='244' width='8' height='22' rx='2'/%3E%3Crect x='34' y='70' width='22' height='8' rx='2'/%3E%3Crect x='244' y='70' width='22' height='8' rx='2'/%3E%3Crect x='92' y='34' width='8' height='22' rx='2'/%3E%3Crect x='92' y='244' width='8' height='22' rx='2'/%3E%3Crect x='34' y='92' width='22' height='8' rx='2'/%3E%3Crect x='244' y='92' width='22' height='8' rx='2'/%3E%3Crect x='114' y='34' width='8' height='22' rx='2'/%3E%3Crect x='114' y='244' width='8' height='22' rx='2'/%3E%3Crect x='34' y='114' width='22' height='8' rx='2'/%3E%3Crect x='244' y='114' width='22' height='8' rx='2'/%3E%3Crect x='136' y='34' width='8' height='22' rx='2'/%3E%3Crect x='136' y='244' width='8' height='22' rx='2'/%3E%3Crect x='34' y='136' width='22' height='8' rx='2'/%3E%3Crect x='244' y='136' width='22' height='8' rx='2'/%3E%3Crect x='158' y='34' width='8' height='22' rx='2'/%3E%3Crect x='158' y='244' width='8' height='22' rx='2'/%3E%3Crect x='34' y='158' width='22' height='8' rx='2'/%3E%3Crect x='244' y='158' width='22' height='8' rx='2'/%3E%3Crect x='180' y='34' width='8' height='22' rx='2'/%3E%3Crect x='180' y='244' width='8' height='22' rx='2'/%3E%3Crect x='34' y='180' width='22' height='8' rx='2'/%3E%3Crect x='244' y='180' width='22' height='8' rx='2'/%3E%3Crect x='202' y='34' width='8' height='22' rx='2'/%3E%3Crect x='202' y='244' width='8' height='22' rx='2'/%3E%3Crect x='34' y='202' width='22' height='8' rx='2'/%3E%3Crect x='244' y='202' width='22' height='8' rx='2'/%3E%3Crect x='224' y='34' width='8' height='22' rx='2'/%3E%3Crect x='224' y='244' width='8' height='22' rx='2'/%3E%3Crect x='34' y='224' width='22' height='8' rx='2'/%3E%3Crect x='244' y='224' width='22' height='8' rx='2'/%3E%3C/g%3E %3Crect x='56' y='56' width='188' height='188' rx='14' fill='%23031a0b' stroke='%2339ff6a' stroke-opacity='.45' stroke-width='2'/%3E %3Crect x='96' y='96' width='108' height='108' rx='6' fill='none' stroke='%2339ff6a' stroke-opacity='.35' stroke-width='1.5'/%3E %3Cg fill='none' stroke='%2339ff6a' stroke-opacity='.25'%3E%3Cpath d='M96 120H70M96 150H70M96 180H70M204 120H230M204 150H230M204 180H230'/%3E%3C/g%3E %3Ctext x='150' y='146' text-anchor='middle' font-family='monospace' font-size='15' fill='%2339ff6a' fill-opacity='.6'%3ETAGMA%3C/text%3E %3Ctext x='150' y='166' text-anchor='middle' font-family='monospace' font-size='10' fill='%2339ff6a' fill-opacity='.45'%3ECPU-KERN%3C/text%3E %3Ccircle cx='76' cy='76' r='5' fill='%2339ff6a' fill-opacity='.35'/%3E %3C/svg%3E"); opacity: .85; }

/* Augenschonend: die Bilder bleiben, aber leiser */
:root[data-eye] .conv::before, :root[data-eye] .conv::after { opacity: .45; }
:root[data-eye][data-skin="terminal"] .timeline { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E %3Cg fill='none' stroke='%2339ff6a' stroke-opacity='.11' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E %3Cpath d='M0 30H60L80 50H140L160 30H200'/%3E%3Cpath d='M30 0V70L50 90V200'/%3E%3Cpath d='M110 200V150L130 130H200'/%3E %3Cpath d='M0 170H40L60 150H90'/%3E%3Cpath d='M170 0V60L150 80V110'/%3E%3Cpath d='M80 50V100H120'/%3E%3C/g%3E %3Cg fill='%2339ff6a' fill-opacity='.16'%3E%3Ccircle cx='90' cy='150' r='4'/%3E%3Ccircle cx='150' cy='110' r='4'/%3E%3Ccircle cx='120' cy='100' r='4'/%3E%3Ccircle cx='60' cy='30' r='3'/%3E%3Ccircle cx='130' cy='130' r='3'/%3E%3C/g%3E %3C/svg%3E") !important; background-size: 200px 200px !important; }

/* ======================================================================
   Bewegte Bilder — leise, langsam, gelegentlich. Aus bei „Augenschonend“,
   „Bewegte Bilder“ aus oder Systemeinstellung „Bewegung reduzieren“.
   ====================================================================== */
.conv > .scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.scene i { position: absolute; display: none; background: no-repeat center / contain; will-change: transform, opacity; }
:root[data-still] .scene i, :root[data-still] .scene i::before, :root[data-still] .scene i::after { animation: none !important; }
:root[data-eye] .scene i, :root[data-eye] .scene i::before, :root[data-eye] .scene i::after { animation: none !important; }

/* --- TAGMA: die Nachrichten der Generäle wandern durchs Netz ------------- */
:root:not([data-skin]) .scene i:nth-child(-n+3) { display: block; right: -40px; bottom: 76px; width: 400px; height: 324px; }
:root:not([data-skin]) .scene i:nth-child(1)::before { content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #0f9e88; box-shadow: 0 0 8px #0f9e88, 0 0 16px #0f9e88; offset-path: path('M 57.1 285.6 L 142.8 228.5 L 238.0 257.0 L 314.2 171.4'); offset-rotate: 0deg; opacity: 0; animation: tg-packet 7s linear 0s infinite; }
:root:not([data-skin]) .scene i:nth-child(1)::after { content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #e0663a; box-shadow: 0 0 8px #e0663a, 0 0 16px #e0663a; offset-path: path('M 199.9 38.1 L 247.5 104.7 L 142.8 133.3 L 57.1 285.6'); offset-rotate: 0deg; opacity: 0; animation: tg-packet 8s linear 2.5s infinite; }
:root:not([data-skin]) .scene i:nth-child(2)::before { content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #0f9e88; box-shadow: 0 0 8px #0f9e88, 0 0 16px #0f9e88; offset-path: path('M 361.8 285.6 L 314.2 171.4 L 247.5 104.7'); offset-rotate: 0deg; opacity: 0; animation: tg-packet 6s linear 4s infinite; }
:root:not([data-skin]) .scene i:nth-child(2)::after { content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #0f9e88; box-shadow: 0 0 8px #0f9e88, 0 0 16px #0f9e88; offset-path: path('M 85.7 161.8 L 142.8 133.3 L 142.8 228.5 L 238.0 257.0'); offset-rotate: 0deg; opacity: 0; animation: tg-packet 7.5s linear 1.2s infinite; }
:root:not([data-skin]) .scene i:nth-child(3)::before { content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #0f9e88; box-shadow: 0 0 8px #0f9e88, 0 0 16px #0f9e88; offset-path: path('M 57.1 285.6 L 85.7 161.8 L 142.8 133.3 L 247.5 104.7'); offset-rotate: 0deg; opacity: 0; animation: tg-packet 9s linear 5.5s infinite; }
:root:not([data-skin]) .scene i:nth-child(3)::after { content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #e0663a; box-shadow: 0 0 8px #e0663a, 0 0 16px #e0663a; offset-path: path('M 238.0 257.0 L 247.5 104.7 L 199.9 38.1'); offset-rotate: 0deg; opacity: 0; animation: tg-packet 6.5s linear 3.4s infinite; }

:root:not([data-skin]) .scene i:nth-child(4) { display: block; right: 92px; bottom: 275px; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 102, 58, .5), rgba(224, 102, 58, 0) 70%); opacity: 0; animation: tg-pulse 3.2s ease-in-out infinite; }
@keyframes tg-packet { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes tg-pulse { 0%, 100% { transform: scale(.6); opacity: 0; } 50% { transform: scale(1.3); opacity: 1; } }

/* --- Weltraum: der Planet dreht sich; UFO, Kreuzer, Frachter ziehen vorbei */
:root[data-skin="weltraum"] .scene i:nth-child(1) { display: block; right: -30.7px; bottom: 149.3px; width: 201.4px; height: 201.4px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255, 230, 210, 0) 38%, rgba(26, 14, 58, .55) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='402' height='201' viewBox='0 0 402 201'%3E %3Cpath d='M0 46C60 38 120 56 201 46S340 36 402 46V64C330 70 270 58 201 66S70 74 0 64Z' fill='%23ffd2b8' fill-opacity='.55'/%3E %3Cpath d='M0 96C80 88 150 108 201 98S330 86 402 96V112C320 118 250 104 201 114S90 122 0 112Z' fill='%23c26fa6' fill-opacity='.55'/%3E %3Cpath d='M0 140C70 134 140 150 201 142S340 132 402 140V152C330 158 260 148 201 156S60 160 0 152Z' fill='%23ffe0c8' fill-opacity='.45'/%3E %3Cellipse cx='120' cy='122' rx='26' ry='11' fill='%23e8587e' fill-opacity='.75'/%3E%3Cellipse cx='120' cy='122' rx='14' ry='5' fill='%23ffd0d8' fill-opacity='.6'/%3E %3Cellipse cx='300' cy='72' rx='16' ry='6' fill='%23fff1e4' fill-opacity='.55'/%3E %3C/svg%3E") 0 0 / 402px 201px repeat-x;
  opacity: .8; animation: ws-spin 70s linear infinite; }
:root[data-skin="weltraum"] .scene i:nth-child(2) { display: block; right: -120px; bottom: 60px; width: 380px; height: 380px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E %3ClinearGradient id='r' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%239fd8ff' stop-opacity='0'/%3E%3Cstop offset='.22' stop-color='%23cfe9ff' stop-opacity='.75'/%3E%3Cstop offset='.5' stop-color='%23ffd6a8' stop-opacity='.95'/%3E%3Cstop offset='.78' stop-color='%23cfe9ff' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%239fd8ff' stop-opacity='0'/%3E%3C/linearGradient%3E %3CclipPath id='f'%3E%3Crect x='0' y='200' width='400' height='200'/%3E%3C/clipPath%3E%3C/defs%3E %3Cg transform='rotate(-16 200 200)' clip-path='url(%23f)'%3E%3Cellipse cx='200' cy='200' rx='188' ry='40' fill='none' stroke='url(%23r)' stroke-width='9'/%3E%3Cellipse cx='200' cy='200' rx='170' ry='34' fill='none' stroke='url(%23r)' stroke-width='3' opacity='.7'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-skin="weltraum"] .scene i:nth-child(3) { display: block; left: -90px; top: 16%; width: 66px; height: 33px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cdefs%3E %3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e9eefc'/%3E%3Cstop offset='1' stop-color='%237d86a8'/%3E%3C/linearGradient%3E %3CradialGradient id='d' cx='40%25' cy='30%25'%3E%3Cstop offset='0' stop-color='%23e8fdff'/%3E%3Cstop offset='1' stop-color='%2341b8e0'/%3E%3C/radialGradient%3E%3C/defs%3E %3Cellipse cx='40' cy='17' rx='14' ry='11' fill='url(%23d)' opacity='.9'/%3E %3Cellipse cx='40' cy='24' rx='38' ry='9' fill='url(%23s)'/%3E%3Cellipse cx='40' cy='22' rx='30' ry='4' fill='%23fff' fill-opacity='.35'/%3E %3Cg fill='%237dfcff'%3E%3Ccircle cx='14' cy='26' r='2'%3E%3Canimate attributeName='opacity' values='1%3B.2%3B1' dur='1.2s' begin='0.0s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='27' cy='26' r='2'%3E%3Canimate attributeName='opacity' values='1%3B.2%3B1' dur='1.2s' begin='0.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='40' cy='26' r='2'%3E%3Canimate attributeName='opacity' values='1%3B.2%3B1' dur='1.2s' begin='0.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='53' cy='26' r='2'%3E%3Canimate attributeName='opacity' values='1%3B.2%3B1' dur='1.2s' begin='0.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='66' cy='26' r='2'%3E%3Canimate attributeName='opacity' values='1%3B.2%3B1' dur='1.2s' begin='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E %3Cellipse cx='40' cy='36' rx='16' ry='3' fill='%237dfcff' fill-opacity='.25'/%3E%3C/svg%3E"); opacity: 0; --pmin: 12; --pmax: 50; --ry: 9; --rs: .3; --flip: 1; animation: ws-ufo 7s linear 6s 1; }
:root[data-skin="weltraum"] .scene i:nth-child(4) { display: block; left: -190px; bottom: 30%; width: 150px; height: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 50'%3E%3Cdefs%3E %3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f1f4ff'/%3E%3Cstop offset='1' stop-color='%238590b8'/%3E%3C/linearGradient%3E %3ClinearGradient id='t' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%237fd9ff' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%237fd9ff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E %3Crect x='0' y='12' width='46' height='5' rx='2.5' fill='url(%23t)'/%3E%3Crect x='0' y='33' width='46' height='5' rx='2.5' fill='url(%23t)'/%3E %3Cpath d='M44 10H86L96 22H70Z' fill='url(%23h)'/%3E%3Cpath d='M44 40H86L96 28H70Z' fill='url(%23h)'/%3E %3Crect x='44' y='9' width='34' height='9' rx='4.5' fill='url(%23h)'/%3E%3Crect x='44' y='32' width='34' height='9' rx='4.5' fill='url(%23h)'/%3E %3Ccircle cx='46' cy='13.5' r='3.4' fill='%239fe6ff'/%3E%3Ccircle cx='46' cy='36.5' r='3.4' fill='%239fe6ff'/%3E %3Cpath d='M70 19H150L168 25L150 31H70Z' fill='url(%23h)'/%3E %3Cpath d='M118 21H146L152 25L146 29H118Z' fill='%235a6690' fill-opacity='.6'/%3E %3Cg fill='%23ffe9a8'%3E%3Ccircle cx='130' cy='25' r='1.2'/%3E%3Ccircle cx='136' cy='25' r='1.2'/%3E%3Ccircle cx='142' cy='25' r='1.2'/%3E%3C/g%3E %3Ccircle cx='160' cy='25' r='1.6' fill='%23ff5a6e'%3E%3Canimate attributeName='opacity' values='1%3B.1%3B1' dur='1.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E"); opacity: 0; --pmin: 25; --pmax: 70; --ry: 10; --rs: .25; animation: ws-cruiser 7.5s ease-in 20s 1; }
:root[data-skin="weltraum"] .scene i:nth-child(5) { display: block; left: calc(100% + 20px); top: 34%; width: 104px; height: 51px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 64'%3E%3Cdefs%3E %3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d9d3c6'/%3E%3Cstop offset='1' stop-color='%237d7466'/%3E%3C/linearGradient%3E %3ClinearGradient id='e' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ffb04a' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23ff7a2a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E %3Crect x='100' y='18' width='30' height='8' rx='4' fill='url(%23e)'/%3E%3Crect x='100' y='38' width='30' height='8' rx='4' fill='url(%23e)'/%3E %3Cpath d='M8 32L30 14H96V50H30Z' fill='url(%23b)'/%3E %3Cg fill='%23b84b2c' fill-opacity='.85'%3E%3Crect x='44' y='18' width='14' height='12' rx='1'/%3E%3Crect x='62' y='18' width='14' height='12' rx='1'/%3E%3Crect x='44' y='34' width='14' height='12' rx='1'/%3E%3C/g%3E %3Cg fill='%233f6e8c' fill-opacity='.85'%3E%3Crect x='62' y='34' width='14' height='12' rx='1'/%3E%3Crect x='80' y='18' width='12' height='28' rx='1'/%3E%3C/g%3E %3Cpath d='M14 30L28 20H36V30Z' fill='%238fd4ff' fill-opacity='.85'/%3E %3Ccircle cx='96' cy='22' r='2' fill='%23ffd36b'/%3E%3Ccircle cx='96' cy='42' r='2' fill='%23ffd36b'/%3E%3C/svg%3E"); opacity: 0; --pmin: 30; --pmax: 90; --ry: 14; --rs: .25; animation: ws-freighter 12s linear 38s 1; }
:root[data-skin="weltraum"] .scene i:nth-child(6) { display: block; left: 62%; top: 10%; width: 150px; height: 6px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 6'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='160' height='3' y='1.5' rx='1.5' fill='url(%23g)'/%3E%3Ccircle cx='157' cy='3' r='3' fill='%23fff'/%3E%3C/svg%3E"); opacity: 0; transform: rotate(152deg); --pmin: 6; --pmax: 30; --ry: 8; --rs: .4; animation: ws-star .8s ease-out 3s 1; }
@keyframes ws-spin { from { background-position: 0 0, 0 0; } to { background-position: 0 0, -402px 0; } }
@keyframes ws-ufo { 0% { transform: translate(0, 0); opacity: 1; } 25% { transform: translate(25vw, -14px); } 50% { transform: translate(50vw, 10px); }
  75% { transform: translate(75vw, -8px); } 100% { transform: translate(calc(100vw + 180px), 6px); opacity: 1; } }
@keyframes ws-cruiser { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(calc(100vw + 260px), -36vh) scale(.55); opacity: 1; } }
@keyframes ws-freighter { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(calc(-100vw - 240px), 9vh); opacity: 1; } }
@keyframes ws-star { 0% { opacity: 0; transform: rotate(152deg) translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(152deg) translateX(-320px); } }

/* --- Natur: Adler und Falke am Himmel, ein Schwarm dazwischen, Spatzen am Boden */
:root[data-skin="natur"] .scene i:nth-child(1) { display: block; left: -150px; top: 7%; width: 120px; height: 43px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 50'%3E%3Cg fill='%234b3a2a' fill-opacity='.88'%3E %3Cpath d='M70 20C58 14 40 8 22 10L8 8L14 12L6 13L14 15L8 18C26 19 46 22 64 28Z'/%3E %3Cpath d='M70 20C82 14 100 8 118 10L132 8L126 12L134 13L126 15L132 18C114 19 94 22 76 28Z'/%3E %3Cellipse cx='70' cy='26' rx='7' ry='11'/%3E%3Cpath d='M64 34L70 44L76 34Z'/%3E %3Ccircle cx='70' cy='15' r='4.2' fill='%23f2ede2'/%3E%3Cpath d='M70 11L74 13L70 15Z' fill='%23e0a43a'/%3E%3C/g%3E%3C/svg%3E"); opacity: 0; --pmin: 8; --pmax: 40; --ry: 5; --rs: .25; --flip: 1; animation: nt-eagle 46s ease-in-out 2s 1; }
:root[data-skin="natur"] .scene i:nth-child(2) { display: block; left: calc(100% + 20px); top: 22%; width: 62px; height: 31px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cg fill='%233e3a40' fill-opacity='.9'%3E%3Cpath d='M10 8C24 12 34 18 40 22C46 18 56 12 70 8C58 16 50 22 46 26L40 30L34 26C30 22 22 16 10 8Z'%3E%3Canimate attributeName='d' dur='.32s' begin='0s' repeatCount='indefinite' values='M10 8C24 12 34 18 40 22C46 18 56 12 70 8C58 16 50 22 46 26L40 30L34 26C30 22 22 16 10 8Z%3BM12 30C24 26 34 24 40 22C46 24 56 26 68 30C58 30 50 30 46 28L40 30L34 28C30 30 22 30 12 30Z%3BM10 8C24 12 34 18 40 22C46 18 56 12 70 8C58 16 50 22 46 26L40 30L34 26C30 22 22 16 10 8Z'/%3E%3C/path%3E %3Cellipse cx='40' cy='24' rx='4.5' ry='7'/%3E%3Cpath d='M37 30L40 38L43 30Z'/%3E%3C/g%3E%3C/svg%3E"); opacity: 0; --pmin: 15; --pmax: 55; --ry: 10; --rs: .3; --flip: 1; animation: nt-falcon 3.2s linear 9s 1; }
:root[data-skin="natur"] .scene i:nth-child(3) { display: block; left: calc(100% + 20px); top: 38%; width: 150px; height: 62px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 70'%3E%3Cpath d='M11 35.95Q15.95 34.6 20 40Q24.05 34.6 29 35.95' fill='none' stroke='%235a5f66' stroke-width='1.8' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='.5s' begin='0s' repeatCount='indefinite' values='M11 35.95Q15.95 34.6 20 40Q24.05 34.6 29 35.95%3BM11 43.15Q15.95 39.55 20 40Q24.05 39.55 29 43.15%3BM11 35.95Q15.95 34.6 20 40Q24.05 34.6 29 35.95'/%3E%3C/path%3E%3Cpath d='M40 24.4Q44.4 23.2 48 28Q51.6 23.2 56 24.4' fill='none' stroke='%235a5f66' stroke-width='1.6' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='.46s' begin='.12s' repeatCount='indefinite' values='M40 24.4Q44.4 23.2 48 28Q51.6 23.2 56 24.4%3BM40 30.8Q44.4 27.6 48 28Q51.6 27.6 56 30.8%3BM40 24.4Q44.4 23.2 48 28Q51.6 23.2 56 24.4'/%3E%3C/path%3E%3Cpath d='M64 39.5Q69.5 38.0 74 44Q78.5 38.0 84 39.5' fill='none' stroke='%235a5f66' stroke-width='2.0' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='.52s' begin='.2s' repeatCount='indefinite' values='M64 39.5Q69.5 38.0 74 44Q78.5 38.0 84 39.5%3BM64 47.5Q69.5 43.5 74 44Q78.5 43.5 84 47.5%3BM64 39.5Q69.5 38.0 74 44Q78.5 38.0 84 39.5'/%3E%3C/path%3E%3Cpath d='M97 18.85Q100.85 17.8 104 22Q107.15 17.8 111 18.85' fill='none' stroke='%235a5f66' stroke-width='1.6' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='.44s' begin='.06s' repeatCount='indefinite' values='M97 18.85Q100.85 17.8 104 22Q107.15 17.8 111 18.85%3BM97 24.45Q100.85 21.65 104 22Q107.15 21.65 111 24.45%3BM97 18.85Q100.85 17.8 104 22Q107.15 17.8 111 18.85'/%3E%3C/path%3E%3Cpath d='M119 33.95Q123.95 32.6 128 38Q132.05 32.6 137 33.95' fill='none' stroke='%235a5f66' stroke-width='1.8' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='.5s' begin='.3s' repeatCount='indefinite' values='M119 33.95Q123.95 32.6 128 38Q132.05 32.6 137 33.95%3BM119 41.15Q123.95 37.55 128 38Q132.05 37.55 137 41.15%3BM119 33.95Q123.95 32.6 128 38Q132.05 32.6 137 33.95'/%3E%3C/path%3E%3Cpath d='M146 26.4Q150.4 25.2 154 30Q157.6 25.2 162 26.4' fill='none' stroke='%235a5f66' stroke-width='1.6' stroke-linecap='round'%3E%3Canimate attributeName='d' dur='.48s' begin='.18s' repeatCount='indefinite' values='M146 26.4Q150.4 25.2 154 30Q157.6 25.2 162 26.4%3BM146 32.8Q150.4 29.6 154 30Q157.6 29.6 162 32.8%3BM146 26.4Q150.4 25.2 154 30Q157.6 25.2 162 26.4'/%3E%3C/path%3E%3C/svg%3E"); opacity: 0; --pmin: 8; --pmax: 35; --ry: 12; --rs: .35; --flip: 1; animation: nt-flock 16s linear 4s 1; }
:root[data-skin="natur"] .scene i:nth-child(4) { display: block; left: 14%; bottom: 74px; width: 40px; height: 31px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E %3Cpath d='M4 18L14 15L13 22Z' fill='%236a4a32'/%3E %3Cellipse cx='22' cy='20' rx='12' ry='8.5' fill='%23a3784f'/%3E%3Cellipse cx='24' cy='23' rx='9' ry='5' fill='%23e7d6bb'/%3E %3Cpath d='M14 16C18 13 26 13 28 17L22 22Z' fill='%236e4b2e'/%3E%3Cpath d='M16 18L26 18M17 20L25 20' stroke='%233e2a19' stroke-width='.9'/%3E %3Ccircle cx='32' cy='12' r='7' fill='%238a5a36'/%3E%3Cpath d='M27 10C30 6 36 6 38 10Z' fill='%237a7f86'/%3E %3Ccircle cx='34' cy='13' r='3.4' fill='%23f1ece2'/%3E%3Ccircle cx='34.5' cy='11' r='1.3' fill='%231d1410'/%3E %3Cpath d='M38.5 12L43 13.5L38.5 15Z' fill='%233a2a1c'/%3E %3Cpath d='M20 28V33M25 28V33' stroke='%237a5a3a' stroke-width='1.3'/%3E%3C/svg%3E"); transform-origin: 50% 100%; --pmin: .5; --pmax: 6; --rs: .1; animation: nt-hop 7s ease-in-out 1; }
:root[data-skin="natur"] .scene i:nth-child(5) { display: block; left: 58%; bottom: 70px; width: 36px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E %3Cpath d='M4 18L14 15L13 22Z' fill='%236a4a32'/%3E %3Cellipse cx='22' cy='20' rx='12' ry='8.5' fill='%23a3784f'/%3E%3Cellipse cx='24' cy='23' rx='9' ry='5' fill='%23e7d6bb'/%3E %3Cpath d='M14 16C18 13 26 13 28 17L22 22Z' fill='%236e4b2e'/%3E%3Cpath d='M16 18L26 18M17 20L25 20' stroke='%233e2a19' stroke-width='.9'/%3E %3Ccircle cx='32' cy='12' r='7' fill='%238a5a36'/%3E%3Cpath d='M27 10C30 6 36 6 38 10Z' fill='%237a7f86'/%3E %3Ccircle cx='34' cy='13' r='3.4' fill='%23f1ece2'/%3E%3Ccircle cx='34.5' cy='11' r='1.3' fill='%231d1410'/%3E %3Cpath d='M38.5 12L43 13.5L38.5 15Z' fill='%233a2a1c'/%3E %3Cpath d='M20 28V33M25 28V33' stroke='%237a5a3a' stroke-width='1.3'/%3E%3C/svg%3E"); transform-origin: 50% 100%; --pmin: .5; --pmax: 7; --rs: .1; animation: nt-hop2 9s ease-in-out 1.5s 1; }
:root[data-skin="natur"] .scene i:nth-child(6) { display: block; left: -240px; top: 4%; width: 200px; height: 73px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 80'%3E%3Cg fill='%23fff' fill-opacity='.92'%3E%3Cellipse cx='70' cy='50' rx='52' ry='20'/%3E%3Cellipse cx='108' cy='38' rx='40' ry='26'/%3E%3Cellipse cx='150' cy='50' rx='46' ry='19'/%3E%3Cellipse cx='90' cy='58' rx='70' ry='14'/%3E%3C/g%3E%3C/svg%3E"); opacity: 0; --pmin: 0; --pmax: 25; --ry: 4; --rs: .35; --flip: 1; animation: nt-cloud 150s linear 1; }
@keyframes nt-eagle { 0% { transform: translate(0, 0) rotate(2deg); opacity: 1; } 25% { transform: translate(35vw, 4vh) rotate(-3deg); }
  50% { transform: translate(60vw, -1vh) rotate(4deg); } 75% { transform: translate(82vw, 5vh) rotate(-2deg); }
  100% { transform: translate(calc(100vw + 300px), 0) rotate(2deg); opacity: 1; } }
@keyframes nt-falcon { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(calc(-100vw - 120px), 6vh); opacity: 1; } }
@keyframes nt-flock { 0% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(-50vw, -3vh); } 100% { transform: translate(calc(-100vw - 200px), 2vh); opacity: 1; } }
@keyframes nt-cloud { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(calc(100vw + 480px)); opacity: 1; } }
@keyframes nt-hop { 0%, 18%, 100% { transform: translate(0, 0) rotate(0); } 6% { transform: translate(6px, -10px); } 12% { transform: translate(12px, 0); }
  30% { transform: translate(12px, 0) rotate(16deg); } 34% { transform: translate(12px, 0) rotate(0); } 38% { transform: translate(12px, 0) rotate(16deg); } 42%, 60% { transform: translate(12px, 0) rotate(0); }
  66% { transform: translate(4px, -9px); } 72%, 96% { transform: translate(0, 0); } }
@keyframes nt-hop2 { 0%, 100% { transform: scaleX(-1) translate(0, 0); } 10% { transform: scaleX(-1) translate(8px, -9px); } 18% { transform: scaleX(-1) translate(16px, 0); }
  28% { transform: scaleX(-1) translate(16px, 0) rotate(18deg); } 32% { transform: scaleX(-1) translate(16px, 0); } 55% { transform: scaleX(-1) translate(16px, 0); }
  62% { transform: scaleX(-1) translate(8px, -8px); } 70% { transform: scaleX(-1) translate(0, 0); } }
/* Nachts — nach der echten Uhrzeit: Fledermäuse und Glühwürmchen statt Vögeln */
 display: none; }
  :root[data-skin="natur"][data-daypart="nacht"] .scene i:nth-child(2) { width: 46px; height: 25px; top: 16%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 34'%3E%3Cpath d='M10 14C16 6 24 8 28 14C30 10 33 10 34 14C38 8 46 6 52 14C46 14 42 18 40 22C36 18 34 20 31 24C28 20 26 18 22 22C20 18 16 14 10 14Z' fill='%231d1a26' fill-opacity='.85'%3E%3Canimate attributeName='d' dur='.22s' begin='0s' repeatCount='indefinite' values='M10 14C16 6 24 8 28 14C30 10 33 10 34 14C38 8 46 6 52 14C46 14 42 18 40 22C36 18 34 20 31 24C28 20 26 18 22 22C20 18 16 14 10 14Z%3BM12 24C16 20 24 18 28 18C30 16 33 16 34 18C38 18 46 20 50 24C44 24 40 24 38 26C35 24 34 25 31 27C28 25 27 24 24 26C22 24 18 24 12 24Z%3BM10 14C16 6 24 8 28 14C30 10 33 10 34 14C38 8 46 6 52 14C46 14 42 18 40 22C36 18 34 20 31 24C28 20 26 18 22 22C20 18 16 14 10 14Z'/%3E%3C/path%3E%3C/svg%3E"); --pmin: 5; --pmax: 30; --ry: 12; --rs: .3; --flip: 1; animation: nt-bat 5s ease-in-out 3s 1; }
  :root[data-skin="natur"][data-daypart="nacht"] .scene i:nth-child(4) { left: 6%; bottom: 96px; width: 130px; height: 70px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cdefs%3E%3CradialGradient id='f'%3E%3Cstop offset='0' stop-color='%23f6ff9a'/%3E%3Cstop offset='.35' stop-color='%23d8ff5a' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23d8ff5a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='14' cy='30' r='6' fill='url(%23f)'%3E%3Canimate attributeName='opacity' values='0%3B1%3B.2%3B0' dur='2.4s' begin='0.00s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='40' cy='12' r='6' fill='url(%23f)'%3E%3Canimate attributeName='opacity' values='0%3B1%3B.2%3B0' dur='3.1s' begin='1.75s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='64' cy='38' r='6' fill='url(%23f)'%3E%3Canimate attributeName='opacity' values='0%3B1%3B.2%3B0' dur='3.8s' begin='1.00s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='88' cy='20' r='6' fill='url(%23f)'%3E%3Canimate attributeName='opacity' values='0%3B1%3B.2%3B0' dur='4.5s' begin='0.25s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='108' cy='44' r='6' fill='url(%23f)'%3E%3Canimate attributeName='opacity' values='0%3B1%3B.2%3B0' dur='2.4s' begin='2.00s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='30' cy='52' r='6' fill='url(%23f)'%3E%3Canimate attributeName='opacity' values='0%3B1%3B.2%3B0' dur='3.1s' begin='1.25s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E"); animation: nt-drift 18s ease-in-out infinite alternate; transform-origin: 50% 50%; }
  :root[data-skin="natur"][data-daypart="nacht"] .scene i:nth-child(5) { left: 52%; bottom: 120px; width: 120px; height: 64px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cdefs%3E%3CradialGradient id='f'%3E%3Cstop offset='0' stop-color='%23f6ff9a'/%3E%3Cstop offset='.35' stop-color='%23d8ff5a' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%23d8ff5a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='14' cy='30' r='6' fill='url(%23f)'%3E%3Canimate attributeName='opacity' values='0%3B1%3B.2%3B0' dur='4.5s' begin='0.75s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='40' cy='12' r='6' fill='url(%23f)'%3E%3Canimate attributeName='opacity' values='0%3B1%3B.2%3B0' dur='2.4s' begin='0.00s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='64' cy='38' r='6' fill='url(%23f)'%3E%3Canimate attributeName='opacity' values='0%3B1%3B.2%3B0' dur='3.1s' begin='1.75s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='88' cy='20' r='6' fill='url(%23f)'%3E%3Canimate attributeName='opacity' values='0%3B1%3B.2%3B0' dur='3.8s' begin='1.00s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='108' cy='44' r='6' fill='url(%23f)'%3E%3Canimate attributeName='opacity' values='0%3B1%3B.2%3B0' dur='4.5s' begin='0.25s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='30' cy='52' r='6' fill='url(%23f)'%3E%3Canimate attributeName='opacity' values='0%3B1%3B.2%3B0' dur='2.4s' begin='2.00s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E"); animation: nt-drift 23s ease-in-out infinite alternate-reverse; }

@keyframes nt-bat { 0% { transform: translate(0, 0); opacity: 1; } 25% { transform: translate(-22vw, 5vh); } 46% { transform: translate(-40vw, -3vh); }
  71% { transform: translate(-62vw, 6vh); } 100% { transform: translate(calc(-100vw - 80px), 0); opacity: 1; } }
/* Der echte Tag: app.js setzt --night, --glow, Sonnen- und Mondstand aus Uhrzeit,
   Jahreszeit und Mondphase. Ähnlich, aber nie gleich. */
:root[data-skin="natur"] body { background:
    radial-gradient(1px 1px at 12% 8%, rgba(255, 255, 255, calc(var(--night, 0) * .95)) 50%, transparent 52%),
    radial-gradient(1px 1px at 33% 15%, rgba(255, 255, 255, calc(var(--night, 0) * .8)) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 57% 6%, rgba(255, 255, 255, calc(var(--night, 0) * .95)) 50%, transparent 54%),
    radial-gradient(1px 1px at 71% 22%, rgba(255, 255, 255, calc(var(--night, 0) * .75)) 50%, transparent 52%),
    radial-gradient(1px 1px at 88% 11%, rgba(255, 255, 255, calc(var(--night, 0) * .9)) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 22% 28%, rgba(255, 255, 255, calc(var(--night, 0) * .7)) 50%, transparent 54%),
    radial-gradient(1px 1px at 46% 33%, rgba(255, 255, 255, calc(var(--night, 0) * .6)) 50%, transparent 52%),
    radial-gradient(1px 1px at 93% 30%, rgba(255, 255, 255, calc(var(--night, 0) * .7)) 50%, transparent 52%),
    linear-gradient(180deg, rgba(10, 14, 42, calc(var(--night, 0) * .88)) 0%, rgba(30, 30, 70, calc(var(--night, 0) * .74)) 58%, rgba(12, 12, 28, calc(var(--night, 0) * .66)) 100%),
    radial-gradient(ellipse 140% 42% at 50% 64%, rgba(255, 138, 92, calc(var(--glow, 0) * .62)), rgba(255, 138, 92, 0) 72%),
    var(--nat-bg);
  background-color: var(--ground); }
:root[data-skin="natur"] .scene i:nth-child(7) { display: block; left: calc(var(--sun-x, 50%) - 36px); top: var(--sun-y, 12%); width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle, #fffbe8 0 26%, color-mix(in srgb, #ffcf5a, #ff7a3c calc(var(--sun-warm, 0) * 100%)) 40%, rgba(255, 190, 90, 0) 70%); }
:root[data-skin="natur"] .scene i:nth-child(8) { display: block; left: calc(var(--moon-x, 70%) - 30px); top: var(--moon-y, 10%); width: 60px; height: 60px; background-image: var(--moon); opacity: var(--moon-o, 1); }
:root[data-skin="natur"]:not([data-sun="up"]) .scene i:nth-child(7), :root[data-skin="natur"]:not([data-moon="up"]) .scene i:nth-child(8) { display: none; }

@keyframes nt-drift { from { transform: translate(0, 0); } to { transform: translate(28px, -16px); } }

/* --- Nachtlicht: Flammen flackern, eine Motte kreist, Rauch kräuselt ----- */
:root[data-skin="nachtlicht"] .scene i:nth-child(-n+3) { display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 52'%3E%3Cdefs%3E %3ClinearGradient id='fl' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23ff9a2e'/%3E%3Cstop offset='.55' stop-color='%23ffd27a'/%3E%3Cstop offset='1' stop-color='%23fff4d6'/%3E%3C/linearGradient%3E %3CradialGradient id='g' cx='50%25' cy='70%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23ffcf7a' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ffcf7a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E %3Cellipse cx='12' cy='34' rx='12' ry='18' fill='url(%23g)'/%3E %3Cpath d='M12 50C3 38 6 24 12 4C18 24 21 38 12 50Z' fill='url(%23fl)'/%3E%3Cpath d='M12 48C8 42 9 36 12 28C15 36 16 42 12 48Z' fill='%23fffaf0' fill-opacity='.8'/%3E%3C/svg%3E"); transform-origin: 50% 100%; }
:root[data-skin="nachtlicht"] .scene i:nth-child(1) { left: 59.6px; bottom: 201.9px; width: 18px; height: 39px; animation: nl-flicker 1.3s ease-in-out infinite alternate; }
:root[data-skin="nachtlicht"] .scene i:nth-child(2) { left: 115.6px; bottom: 239.2px; width: 20px; height: 45px; animation: nl-flicker 1.7s ease-in-out .3s infinite alternate; }
:root[data-skin="nachtlicht"] .scene i:nth-child(3) { left: 168.8px; bottom: 183.2px; width: 17px; height: 36px; animation: nl-flicker 1.1s ease-in-out .6s infinite alternate; }
:root[data-skin="nachtlicht"] .scene i:nth-child(4) { display: block; left: 60px; bottom: 228px; width: 140px; height: 90px; }
:root[data-skin="nachtlicht"] .scene i:nth-child(4)::before { content: ''; position: absolute; width: 16px; height: 11px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M10 7C6 1 1 1 1 5C1 9 6 10 10 7Z' fill='%23d8c1a0' fill-opacity='.85'%3E%3Canimate attributeName='d' dur='.18s' repeatCount='indefinite' values='M10 7C6 1 1 1 1 5C1 9 6 10 10 7Z%3BM10 7C8 4 5 4 5 6C5 8 8 9 10 7Z%3BM10 7C6 1 1 1 1 5C1 9 6 10 10 7Z'/%3E%3C/path%3E%3Cpath d='M10 7C14 1 19 1 19 5C19 9 14 10 10 7Z' fill='%23d8c1a0' fill-opacity='.85'%3E%3Canimate attributeName='d' dur='.18s' repeatCount='indefinite' values='M10 7C14 1 19 1 19 5C19 9 14 10 10 7Z%3BM10 7C12 4 15 4 15 6C15 8 12 9 10 7Z%3BM10 7C14 1 19 1 19 5C19 9 14 10 10 7Z'/%3E%3C/path%3E%3Cellipse cx='10' cy='7.5' rx='1.4' ry='4' fill='%237a6248'/%3E%3C/svg%3E") no-repeat center / contain;
  offset-path: path('M70 55C110 55 132 40 120 22C108 4 70 6 44 18C18 30 14 52 40 58C52 61 62 57 70 55Z'); offset-rotate: auto; opacity: 0; animation: nl-moth 11s linear 2s infinite; }
:root[data-skin="nachtlicht"] .scene i:nth-child(5) { display: block; left: 170px; bottom: 222px; width: 18px; height: 60px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 90'%3E%3Cpath d='M15 88C8 74 22 66 14 52C6 38 22 30 15 14C12 8 16 4 15 1' fill='none' stroke='%23c9b8a2' stroke-opacity='.35' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E"); opacity: 0; --pmin: 3; --pmax: 18; --rs: .3; animation: nl-smoke 9s ease-out 4s 1; }
@keyframes nl-flicker { 0% { transform: scale(1, 1) skewX(0); opacity: .95; } 40% { transform: scale(.94, 1.06) skewX(-3deg); opacity: 1; }
  70% { transform: scale(1.04, .95) skewX(2deg); opacity: .9; } 100% { transform: scale(.97, 1.04) skewX(-1deg); opacity: 1; } }
@keyframes nl-moth { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: .9; } 94% { opacity: .9; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes nl-smoke { 0% { transform: translateY(0) scale(.8); opacity: 0; } 15% { opacity: .6; } 60% { opacity: .3; } 100% { transform: translateY(-70px) scale(1.4); opacity: 0; } }

/* --- Terminal: Signale laufen in den Chip, die LED blinkt, Bits rieseln --- */
:root[data-skin="terminal"] .scene i:nth-child(-n+2) { display: block; right: -70px; bottom: 70px; width: 280px; height: 280px; }
:root[data-skin="terminal"] .scene i:nth-child(1)::before, :root[data-skin="terminal"] .scene i:nth-child(1)::after,
:root[data-skin="terminal"] .scene i:nth-child(2)::before, :root[data-skin="terminal"] .scene i:nth-child(2)::after {
  content: ''; position: absolute; width: 16px; height: 3px; border-radius: 2px; background: #b6ffc8; box-shadow: 0 0 6px #39ff6a, 0 0 12px #39ff6a;
  offset-rotate: auto; opacity: 0; animation: tm-signal 5s linear infinite; }
:root[data-skin="terminal"] .scene i:nth-child(1)::before { offset-path: path('M-150 82H40'); }
:root[data-skin="terminal"] .scene i:nth-child(1)::after { offset-path: path('M-150 144H40'); animation-delay: 1.7s; }
:root[data-skin="terminal"] .scene i:nth-child(2)::before { offset-path: path('M88 420V240'); animation-delay: .9s; animation-duration: 4.2s; }
:root[data-skin="terminal"] .scene i:nth-child(2)::after { offset-path: path('M-150 205H40'); animation-delay: 3.1s; }
:root[data-skin="terminal"] .scene i:nth-child(3) { display: block; right: 135.1px; bottom: 275.1px; width: 8px; height: 8px; border-radius: 50%; background: #8dffa6; box-shadow: 0 0 8px #39ff6a; animation: tm-led 2.4s steps(1) infinite; }
:root[data-skin="terminal"] .scene i:nth-child(4) { display: block; left: 7%; top: -250px; width: 14px; height: 240px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 240'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2339ff6a' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%238dffa6' stop-opacity='.9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='7' y='0' fill='url(%23g)' font-family='monospace' font-size='13' text-anchor='middle'%3E%3Ctspan x='7' dy='22'%3E1%3C/tspan%3E%3Ctspan x='7' dy='22'%3E0%3C/tspan%3E%3Ctspan x='7' dy='22'%3E1%3C/tspan%3E%3Ctspan x='7' dy='22'%3E1%3C/tspan%3E%3Ctspan x='7' dy='22'%3E0%3C/tspan%3E%3Ctspan x='7' dy='22'%3E0%3C/tspan%3E%3Ctspan x='7' dy='22'%3E1%3C/tspan%3E%3Ctspan x='7' dy='22'%3E0%3C/tspan%3E%3Ctspan x='7' dy='22'%3E1%3C/tspan%3E%3Ctspan x='7' dy='22'%3E1%3C/tspan%3E%3C/text%3E%3C/svg%3E"); opacity: 0; --pmin: 0; --pmax: 12; --rs: .2; animation: tm-rain 14s linear 1; }
:root[data-skin="terminal"] .scene i:nth-child(5) { display: block; left: 31%; top: -250px; width: 14px; height: 240px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 240'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2339ff6a' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%238dffa6' stop-opacity='.9'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ctext x='7' y='0' fill='url(%23g)' font-family='monospace' font-size='13' text-anchor='middle'%3E%3Ctspan x='7' dy='22'%3E1%3C/tspan%3E%3Ctspan x='7' dy='22'%3E0%3C/tspan%3E%3Ctspan x='7' dy='22'%3E1%3C/tspan%3E%3Ctspan x='7' dy='22'%3E1%3C/tspan%3E%3Ctspan x='7' dy='22'%3E0%3C/tspan%3E%3Ctspan x='7' dy='22'%3E0%3C/tspan%3E%3Ctspan x='7' dy='22'%3E1%3C/tspan%3E%3Ctspan x='7' dy='22'%3E0%3C/tspan%3E%3Ctspan x='7' dy='22'%3E1%3C/tspan%3E%3Ctspan x='7' dy='22'%3E1%3C/tspan%3E%3C/text%3E%3C/svg%3E"); opacity: 0; --pmin: 2; --pmax: 16; --rs: .2; animation: tm-rain 19s linear 6s 1; }
@keyframes tm-signal { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes tm-led { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }
@keyframes tm-rain { 0% { transform: translateY(0); opacity: .45; } 100% { transform: translateY(calc(100vh + 260px)); opacity: .45; } }

/* --- Hochkontrast: nur ein Punkt kreist ums Emblem — dieses Thema ist für Klarheit da */
:root[data-skin="kontrast"] .scene i:nth-child(1) { display: block; right: -132px; top: 46%; width: 250px; height: 250px; }
:root[data-skin="kontrast"] .scene i:nth-child(1)::before { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #000; border: 3px solid #ffd43b;
  offset-path: path('M60 106A96 96 0 1 0 252 106A96 96 0 1 0 60 106Z'); opacity: 0; animation: hk-orbit 40s linear infinite; }
@media (prefers-color-scheme: dark) { :root[data-skin="kontrast"] .scene i:nth-child(1)::before { background: #ffd43b; border-color: #000; } }
@keyframes hk-orbit { 0% { offset-distance: 0%; opacity: 1; } 100% { offset-distance: 100%; opacity: 1; } }