/* 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-y: 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; unicode-bidi: isolate; }
.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; unicode-bidi: isolate;
}
.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) {     /* unless "Bewegte Bilder" was switched on in the app */
  :root:not([data-motion]) *, :root:not([data-motion]) *::before, :root:not([data-motion]) *::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: url(img/natur-tag.webp) center bottom / cover no-repeat;
  --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: url(img/natur-abend.webp) center bottom / cover no-repeat;
    --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: url(img/natur-abend.webp) center bottom / cover no-repeat;
    --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 {               /* Nebel und Sterne: berechnet, tools/photo_scenes.py */
  background: url(img/weltraum.webp) center / cover no-repeat, #070818;
}
: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, minmax(0, 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 > span:last-child { max-width: 100%; text-align: center; hyphens: manual; }
.skin[aria-checked="true"] { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }
.swatch { width: 100%; aspect-ratio: 16 / 10; border-radius: 9px; border: 1px solid rgba(127, 127, 127, .35); position: relative; overflow: hidden; }
.swatch::before, .swatch::after { content: ""; position: absolute; height: 15%; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.swatch::before { left: 8%; top: 18%; width: 46%; background: var(--b); }          /* a message from someone */
.swatch::after { right: 8%; top: 42%; width: 38%; background: var(--a); }          /* my answer */
.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; }

/* Sternenuhr — Astrolabium wie in Prag und Ulm: dunkler Stein, Gold, Elfenbein */
:root[data-skin="sternenuhr"] {
  --ground: #0d0b08; --panel: #17130d; --panel-2: #120f0a;
  --ink: #f3e6c8; --muted: #c9b48a; --faint: #8a7a5c;
  --line: #2a2318; --line-strong: #3d3220;
  --signal: #d9b45a; --signal-ink: #ecc96e; --on-signal: #1a1206;
  --spark: #6fa6e0; --danger: #e26a4a;
  --mine: #2a2214; --mine-line: #5a4520; --backdrop: rgba(0, 0, 0, .72);
  --shadow: 0 18px 44px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
:root[data-skin="sternenuhr"] body { background: radial-gradient(ellipse 120% 90% at 50% 40%, #1a150e 0%, #0d0b08 70%); }
:root[data-skin="sternenuhr"] .msg { background: rgba(23, 19, 13, .86); }
:root[data-skin="sternenuhr"] .msg.mine { background: rgba(42, 34, 20, .9); }
:root[data-skin="sternenuhr"] .conv-title h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: .02em; }

/* Das Zifferblatt allein, groß */
.dlg-dial { width: min(96vw, 900px); max-width: 96vw; }
.dial-canvas { display: block; width: 100%; height: min(70dvh, 760px); margin: 4px 0 6px; touch-action: none; cursor: grab; }
.dial-when { text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); margin: 0 0 8px; }
#dial-modes { flex-wrap: wrap; justify-content: center; }
#dial-modes .btn[aria-pressed="true"] { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal); }

/* Dein Himmel: Horoskop und große Uhr */
.astro-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.astro-form .astro-city { grid-column: 1 / -1; }
.astro-wheel { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 1; margin: 6px auto 12px; }
.astro-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.astro-list li { display: grid; gap: 2px; font-size: calc(14px * var(--fs, 1)); }
.astro-list li span { color: var(--muted); }

/* Unterwasser — Blaugrün der Tiefe, Sand, Korallenrot; Glas wie eine Taucherbrille */
:root[data-skin="unterwasser"] {
  --ground: #062c40; --panel: rgba(6, 40, 58, .78); --panel-2: rgba(5, 34, 50, .7);
  --ink: #e6f7fa; --muted: #a3cdd8; --faint: #6a9aa8;
  --line: rgba(160, 220, 235, .18); --line-strong: rgba(160, 220, 235, .3);
  --signal: #ff9a6b; --signal-ink: #ffb894; --on-signal: #2a1006;
  --spark: #f2d49b; --danger: #ff7a7a;
  --mine: rgba(255, 154, 107, .22); --mine-line: rgba(255, 170, 130, .5); --backdrop: rgba(2, 18, 28, .7);
  --shadow: 0 18px 44px rgba(0, 10, 20, .5);
  color-scheme: dark;
}
:root[data-skin="unterwasser"] .rooms, :root[data-skin="unterwasser"] .bar, :root[data-skin="unterwasser"] .composer,
:root[data-skin="unterwasser"] .progress { background: var(--panel); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
:root[data-skin="unterwasser"] .timeline { background: transparent; }
:root[data-skin="unterwasser"] .msg { background: rgba(4, 30, 44, .72); border-color: var(--line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
:root[data-skin="unterwasser"] .dlg { background: rgba(6, 36, 52, .97); }

/* ======================================================================
   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="unterwasser"] { --ink: #d9ecef; --muted: #93b9c2; --signal: #f0a07a; }
:root[data-eye][data-skin="unterwasser"] body { background: linear-gradient(180deg, #0e4a5c 0%, #0a3346 60%, #2b3a34 100%); }
: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; }
.diag { margin: 2px 0 12px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.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(img/planet-hinten.webp); }

/* 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(img/kerzen.webp); opacity: .95; }
:root[data-skin="nachtlicht"] .conv::after { content: ""; right: 18px; top: 74px; width: 120px; height: 120px; background: var(--moon, none) center / 100% 100% no-repeat, url(img/mond.webp) center / 73.3% 73.3% no-repeat; }

/* 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(img/chip.webp); opacity: .92; }

/* Vorschau in den Einstellungen: ein kleines Bild jedes Themas */
.swatch[data-k="tagma"] { background: 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.3' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='300' r='7' fill='%230f9e88' fill-opacity='0.54'/%3E%3Ccircle cx='150' cy='240' r='5' fill='%230f9e88' fill-opacity='0.54'/%3E%3Ccircle cx='250' cy='270' r='5' fill='%230f9e88' fill-opacity='0.54'/%3E%3Ccircle cx='330' cy='180' r='7' fill='%230f9e88' fill-opacity='0.54'/%3E%3Ccircle cx='150' cy='140' r='5' fill='%230f9e88' fill-opacity='0.54'/%3E%3Ccircle cx='380' cy='300' r='7' fill='%230f9e88' fill-opacity='0.54'/%3E%3Ccircle cx='90' cy='170' r='5' fill='%230f9e88' fill-opacity='0.54'/%3E%3Ccircle cx='210' cy='40' r='5' fill='%230f9e88' fill-opacity='0.54'/%3E%3Ccircle cx='260' cy='110' r='16' fill='%23e0663a' fill-opacity='0.24'/%3E%3Ccircle cx='260' cy='110' r='8' fill='%23e0663a' fill-opacity='0.72'/%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.60'/%3E%3Cpolygon points='0,5 9.51,8.09 15.39,0 9.51,-8.09 0,-5' stroke='%23e0663a' stroke-opacity='0.60'/%3E%3C/g%3E%3C/svg%3E") right -14px bottom -18px / 78% auto no-repeat, 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.12' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 17.32px 30px, #f2f6f4; }
.swatch[data-k="natur"] { background: url(img/natur-tag.webp) 50% 72% / cover no-repeat, #b9daf2; }
.swatch[data-k="weltraum"] { background: url(img/vorschau-weltraum.webp) center / cover no-repeat, #070818; }
.swatch[data-k="kontrast"] { background: 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") right -34% center / 76% auto no-repeat, #fffdf2; }
.swatch[data-k="nachtlicht"] { background: url(img/kerzen.webp) left -4px bottom -6px / 66% auto no-repeat, radial-gradient(circle at 30% 40%, #3a2108, #140d06 70%); }
.swatch[data-k="sternenuhr"] { background: radial-gradient(circle at 50% 40%, #e8c45a 0 2%, #5f9ad8 2% 20%, #743416 20% 26%, #2a120c 26% 31%, #07070c 31% 40%, #d9b45a 40% 42%, #120e08 42% 47%, #d9b45a 47% 48%, transparent 48%), #0d0b08; }
.swatch[data-k="unterwasser"] { background: url(img/unterwasser.webp) 50% 60% / cover no-repeat, #062c40; }
.swatch[data-k="terminal"] { background: url(img/chip.webp) right -16px bottom -16px / 70% auto no-repeat, radial-gradient(ellipse at 50% 45%, #04170a, #020a04 70%); }

/* 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: url(img/planet-baender.webp) 0 0 / 402px 201.4px repeat-x; transform: rotate(-16deg); animation: ws-spin 90s linear infinite; }
:root[data-skin="weltraum"] .scene i:nth-child(2) { display: block; right: -120px; bottom: 60px; width: 380px; height: 380px; background-image: url(img/planet-vorn.webp); }
:root[data-skin="weltraum"] .scene i:nth-child(3) { display: block; left: calc(50% - 33px); top: calc(50% - 16px); width: 66px; height: 33px; translate: 0 -28vh; opacity: 0; --pmin: 12; --pmax: 50; --rs: .3; --any: 1; animation: ws-ufo 7s linear 6s 1; }
/* the saucer may come from any direction, but it stays level (::before turns back) */
:root[data-skin="weltraum"] .scene i:nth-child(3)::before { content: ''; position: absolute; inset: 0; background: 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") no-repeat center / contain; rotate: calc(var(--a, 0deg) * -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; } to { background-position: -402px 0; } }
@keyframes ws-ufo { 0% { transform: translate(-75vmax, 0); opacity: 1; } 25% { transform: translate(-37vmax, -14px); } 50% { transform: translate(0, 10px); }
  75% { transform: translate(37vmax, -8px); } 100% { transform: translate(75vmax, 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(img/wolke.webp); 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 */
  :root[data-skin="natur"][data-daypart="nacht"] .scene i:nth-child(1), :root[data-skin="natur"][data-daypart="nacht"] .scene i:nth-child(3),
  :root[data-skin="natur"][data-daypart="nacht"] .scene i:nth-child(6) { 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:
    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: var(--moon, none) center / 100% 100% no-repeat, url(img/mond.webp) center / 73.3% 73.3% no-repeat; opacity: var(--moon-o, 1); }
:root[data-skin="natur"][data-sun="up"] .scene i:nth-child(8) { mix-blend-mode: screen; }   /* by day the night side is sky */
: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; }
/* bit streams: the first ones fall, then the director sends them in any direction */
:root[data-skin="terminal"] .scene i:nth-child(4) { display: block; left: calc(50% - 7px); top: calc(50% - 120px); translate: -30vw 0; 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; --any: 1; animation: tm-rain 14s linear 1; }
:root[data-skin="terminal"] .scene i:nth-child(5) { display: block; left: calc(50% - 7px); top: calc(50% - 120px); translate: 4vw 0; 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; --any: 1; 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(-75vmax); opacity: .45; } 100% { transform: translateY(75vmax); opacity: .45; } }

/* --- Der echte Sternenhimmel (sky.js): hinter allem, nur in Natur (nachts) und Weltraum */
canvas.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: none; }
:root[data-skin="natur"] canvas.sky, :root[data-skin="weltraum"]:not([data-eye]) canvas.sky { display: block; }
:root[data-eye][data-skin="natur"] canvas.sky { opacity: .6; }

/* --- Sternenuhr (uhr.js): das Astrolabium und die Mondscheibe hinter den Nachrichten */
canvas.uhr { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: none; }
:root[data-skin="sternenuhr"] .conv > canvas.uhr { display: block; }
:root[data-eye][data-skin="sternenuhr"] canvas.uhr { opacity: .6; }

/* --- Unterwasser: Schwarm, Riffbarsch, Schildkröte, Quallen, Blasen, Manta — der Regisseur würfelt */
:root[data-skin="unterwasser"] body { background: url(img/unterwasser.webp) center bottom / cover no-repeat, #062c40; }
:root[data-skin="unterwasser"] .scene i:nth-child(1) { display: block; left: calc(100% + 20px); top: 30%; width: 200px; height: 82px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90'%3E%3Cdefs%3E%3ClinearGradient id='fb' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233d6f8e'/%3E%3Cstop offset='.5' stop-color='%23b9d8e6'/%3E%3Cstop offset='1' stop-color='%23eef7fb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(4 30) scale(0.9)'%3E%3Cpath d='M27 9L34 3L32.5 9L34 15Z' fill='%235f8fa8'%3E%3Canimate attributeName='d' dur='.5s' begin='0s' repeatCount='indefinite' values='M27 9L34 3L32.5 9L34 15Z%3BM27 9L33 6L32 9L33 12Z%3BM27 9L34 3L32.5 9L34 15Z'/%3E%3C/path%3E%3Cpath d='M2 9C8 2 22 2 28 9C22 16 8 16 2 9Z' fill='url(%23fb)'/%3E%3Cpath d='M10 4C14 1 19 1 21 4Z' fill='%235f8fa8' fill-opacity='.8'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%230a1a24'/%3E%3Ccircle cx='6.6' cy='7.6' r='.45' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(34 14) scale(0.8)'%3E%3Cpath d='M27 9L34 3L32.5 9L34 15Z' fill='%235f8fa8'%3E%3Canimate attributeName='d' dur='.5s' begin='0.12s' repeatCount='indefinite' values='M27 9L34 3L32.5 9L34 15Z%3BM27 9L33 6L32 9L33 12Z%3BM27 9L34 3L32.5 9L34 15Z'/%3E%3C/path%3E%3Cpath d='M2 9C8 2 22 2 28 9C22 16 8 16 2 9Z' fill='url(%23fb)'/%3E%3Cpath d='M10 4C14 1 19 1 21 4Z' fill='%235f8fa8' fill-opacity='.8'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%230a1a24'/%3E%3Ccircle cx='6.6' cy='7.6' r='.45' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(40 46) scale(0.85)'%3E%3Cpath d='M27 9L34 3L32.5 9L34 15Z' fill='%235f8fa8'%3E%3Canimate attributeName='d' dur='.5s' begin='0.3s' repeatCount='indefinite' values='M27 9L34 3L32.5 9L34 15Z%3BM27 9L33 6L32 9L33 12Z%3BM27 9L34 3L32.5 9L34 15Z'/%3E%3C/path%3E%3Cpath d='M2 9C8 2 22 2 28 9C22 16 8 16 2 9Z' fill='url(%23fb)'/%3E%3Cpath d='M10 4C14 1 19 1 21 4Z' fill='%235f8fa8' fill-opacity='.8'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%230a1a24'/%3E%3Ccircle cx='6.6' cy='7.6' r='.45' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(70 28) scale(0.95)'%3E%3Cpath d='M27 9L34 3L32.5 9L34 15Z' fill='%235f8fa8'%3E%3Canimate attributeName='d' dur='.5s' begin='0.2s' repeatCount='indefinite' values='M27 9L34 3L32.5 9L34 15Z%3BM27 9L33 6L32 9L33 12Z%3BM27 9L34 3L32.5 9L34 15Z'/%3E%3C/path%3E%3Cpath d='M2 9C8 2 22 2 28 9C22 16 8 16 2 9Z' fill='url(%23fb)'/%3E%3Cpath d='M10 4C14 1 19 1 21 4Z' fill='%235f8fa8' fill-opacity='.8'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%230a1a24'/%3E%3Ccircle cx='6.6' cy='7.6' r='.45' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(96 8) scale(0.75)'%3E%3Cpath d='M27 9L34 3L32.5 9L34 15Z' fill='%235f8fa8'%3E%3Canimate attributeName='d' dur='.5s' begin='0.05s' repeatCount='indefinite' values='M27 9L34 3L32.5 9L34 15Z%3BM27 9L33 6L32 9L33 12Z%3BM27 9L34 3L32.5 9L34 15Z'/%3E%3C/path%3E%3Cpath d='M2 9C8 2 22 2 28 9C22 16 8 16 2 9Z' fill='url(%23fb)'/%3E%3Cpath d='M10 4C14 1 19 1 21 4Z' fill='%235f8fa8' fill-opacity='.8'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%230a1a24'/%3E%3Ccircle cx='6.6' cy='7.6' r='.45' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(100 54) scale(0.8)'%3E%3Cpath d='M27 9L34 3L32.5 9L34 15Z' fill='%235f8fa8'%3E%3Canimate attributeName='d' dur='.5s' begin='0.4s' repeatCount='indefinite' values='M27 9L34 3L32.5 9L34 15Z%3BM27 9L33 6L32 9L33 12Z%3BM27 9L34 3L32.5 9L34 15Z'/%3E%3C/path%3E%3Cpath d='M2 9C8 2 22 2 28 9C22 16 8 16 2 9Z' fill='url(%23fb)'/%3E%3Cpath d='M10 4C14 1 19 1 21 4Z' fill='%235f8fa8' fill-opacity='.8'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%230a1a24'/%3E%3Ccircle cx='6.6' cy='7.6' r='.45' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(126 32) scale(0.9)'%3E%3Cpath d='M27 9L34 3L32.5 9L34 15Z' fill='%235f8fa8'%3E%3Canimate attributeName='d' dur='.5s' begin='0.15s' repeatCount='indefinite' values='M27 9L34 3L32.5 9L34 15Z%3BM27 9L33 6L32 9L33 12Z%3BM27 9L34 3L32.5 9L34 15Z'/%3E%3C/path%3E%3Cpath d='M2 9C8 2 22 2 28 9C22 16 8 16 2 9Z' fill='url(%23fb)'/%3E%3Cpath d='M10 4C14 1 19 1 21 4Z' fill='%235f8fa8' fill-opacity='.8'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%230a1a24'/%3E%3Ccircle cx='6.6' cy='7.6' r='.45' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(150 16) scale(0.7)'%3E%3Cpath d='M27 9L34 3L32.5 9L34 15Z' fill='%235f8fa8'%3E%3Canimate attributeName='d' dur='.5s' begin='0.35s' repeatCount='indefinite' values='M27 9L34 3L32.5 9L34 15Z%3BM27 9L33 6L32 9L33 12Z%3BM27 9L34 3L32.5 9L34 15Z'/%3E%3C/path%3E%3Cpath d='M2 9C8 2 22 2 28 9C22 16 8 16 2 9Z' fill='url(%23fb)'/%3E%3Cpath d='M10 4C14 1 19 1 21 4Z' fill='%235f8fa8' fill-opacity='.8'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%230a1a24'/%3E%3Ccircle cx='6.6' cy='7.6' r='.45' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(156 50) scale(0.78)'%3E%3Cpath d='M27 9L34 3L32.5 9L34 15Z' fill='%235f8fa8'%3E%3Canimate attributeName='d' dur='.5s' begin='0.25s' repeatCount='indefinite' values='M27 9L34 3L32.5 9L34 15Z%3BM27 9L33 6L32 9L33 12Z%3BM27 9L34 3L32.5 9L34 15Z'/%3E%3C/path%3E%3Cpath d='M2 9C8 2 22 2 28 9C22 16 8 16 2 9Z' fill='url(%23fb)'/%3E%3Cpath d='M10 4C14 1 19 1 21 4Z' fill='%235f8fa8' fill-opacity='.8'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%230a1a24'/%3E%3Ccircle cx='6.6' cy='7.6' r='.45' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(180 34) scale(0.85)'%3E%3Cpath d='M27 9L34 3L32.5 9L34 15Z' fill='%235f8fa8'%3E%3Canimate attributeName='d' dur='.5s' begin='0.1s' repeatCount='indefinite' values='M27 9L34 3L32.5 9L34 15Z%3BM27 9L33 6L32 9L33 12Z%3BM27 9L34 3L32.5 9L34 15Z'/%3E%3C/path%3E%3Cpath d='M2 9C8 2 22 2 28 9C22 16 8 16 2 9Z' fill='url(%23fb)'/%3E%3Cpath d='M10 4C14 1 19 1 21 4Z' fill='%235f8fa8' fill-opacity='.8'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%230a1a24'/%3E%3Ccircle cx='6.6' cy='7.6' r='.45' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(60 66) scale(0.7)'%3E%3Cpath d='M27 9L34 3L32.5 9L34 15Z' fill='%235f8fa8'%3E%3Canimate attributeName='d' dur='.5s' begin='0.45s' repeatCount='indefinite' values='M27 9L34 3L32.5 9L34 15Z%3BM27 9L33 6L32 9L33 12Z%3BM27 9L34 3L32.5 9L34 15Z'/%3E%3C/path%3E%3Cpath d='M2 9C8 2 22 2 28 9C22 16 8 16 2 9Z' fill='url(%23fb)'/%3E%3Cpath d='M10 4C14 1 19 1 21 4Z' fill='%235f8fa8' fill-opacity='.8'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%230a1a24'/%3E%3Ccircle cx='6.6' cy='7.6' r='.45' fill='%23fff'/%3E%3C/g%3E%3Cg transform='translate(130 70) scale(0.65)'%3E%3Cpath d='M27 9L34 3L32.5 9L34 15Z' fill='%235f8fa8'%3E%3Canimate attributeName='d' dur='.5s' begin='0.18s' repeatCount='indefinite' values='M27 9L34 3L32.5 9L34 15Z%3BM27 9L33 6L32 9L33 12Z%3BM27 9L34 3L32.5 9L34 15Z'/%3E%3C/path%3E%3Cpath d='M2 9C8 2 22 2 28 9C22 16 8 16 2 9Z' fill='url(%23fb)'/%3E%3Cpath d='M10 4C14 1 19 1 21 4Z' fill='%235f8fa8' fill-opacity='.8'/%3E%3Ccircle cx='7' cy='8' r='1.3' fill='%230a1a24'/%3E%3Ccircle cx='6.6' cy='7.6' r='.45' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); opacity: 0; --pmin: 4; --pmax: 18; --ry: 14; --rs: .3; --flip: 1; --mirror: 1; animation: uw-left 24s linear 3s 1; }
:root[data-skin="unterwasser"] .scene i:nth-child(2) { display: block; left: -80px; top: 58%; width: 56px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 34'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ff9a3c'/%3E%3Cstop offset='1' stop-color='%23e2561f'/%3E%3C/linearGradient%3E %3CclipPath id='b'%3E%3Cpath d='M3 17C9 4 34 3 46 17C34 31 9 30 3 17Z'/%3E%3C/clipPath%3E%3C/defs%3E %3Cpath d='M45 17L58 7L55 17L58 27Z' fill='%23e2561f' stroke='%231b0d06' stroke-width='.8'%3E%3Canimate attributeName='d' dur='.45s' begin='0s' repeatCount='indefinite' values='M45 17L58 7L55 17L58 27Z%3BM45 17L57 11L55 17L57 23Z%3BM45 17L58 7L55 17L58 27Z'/%3E%3C/path%3E %3Cpath d='M3 17C9 4 34 3 46 17C34 31 9 30 3 17Z' fill='url(%23o)' stroke='%231b0d06' stroke-width='.9'/%3E %3Cg clip-path='url(%23b)' fill='%23fff8f0' stroke='%231b0d06' stroke-width='.9'%3E%3Crect x='11' y='0' width='6' height='34' rx='3'/%3E%3Crect x='26' y='0' width='5' height='34' rx='2.5'/%3E%3C/g%3E %3Cpath d='M18 6C22 1 30 1 33 6Z' fill='%23e2561f' stroke='%231b0d06' stroke-width='.8'/%3E %3Ccircle cx='8' cy='15' r='2' fill='%231b0d06'/%3E%3Ccircle cx='7.4' cy='14.4' r='.6' fill='%23fff'/%3E%3C/svg%3E"); opacity: 0; scale: -1 1; --face: -1; --pmin: 3; --pmax: 14; --ry: 10; --rs: .2; --flip: 1; --mirror: 1; animation: uw-right 14s ease-in-out 8s 1; }
:root[data-skin="unterwasser"] .scene i:nth-child(3) { display: block; left: -160px; top: 40%; width: 130px; height: 76px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 76'%3E%3Cdefs%3E%3CradialGradient id='sh' cx='45%25' cy='35%25' r='70%25'%3E%3Cstop offset='0' stop-color='%239a8a4e'/%3E%3Cstop offset='.6' stop-color='%235d5a2c'/%3E%3Cstop offset='1' stop-color='%233a3a1c'/%3E%3C/radialGradient%3E%3C/defs%3E %3Cpath d='M30 26C18 16 8 20 4 30C14 30 22 30 30 32Z' fill='%236f7a4a'%3E%3Canimate attributeName='d' dur='2.4s' begin='0s' repeatCount='indefinite' values='M30 26C18 16 8 20 4 30C14 30 22 30 30 32Z%3BM30 26C20 28 10 36 6 44C16 40 24 36 30 32Z%3BM30 26C18 16 8 20 4 30C14 30 22 30 30 32Z'/%3E%3C/path%3E %3Cpath d='M86 46C92 52 98 60 98 66C92 62 88 56 82 50Z' fill='%236f7a4a'%3E%3Canimate attributeName='d' dur='2.4s' begin='1.2s' repeatCount='indefinite' values='M86 46C92 52 98 60 98 66C92 62 88 56 82 50Z%3BM86 46C94 48 100 52 104 58C96 58 90 54 82 50Z%3BM86 46C92 52 98 60 98 66C92 62 88 56 82 50Z'/%3E%3C/path%3E %3Cellipse cx='60' cy='38' rx='34' ry='20' fill='url(%23sh)'/%3E %3Cg fill='none' stroke='%232c2a14' stroke-opacity='.55' stroke-width='1.2'%3E%3Cpath d='M48 30L56 24H66L72 30L66 38H56Z'/%3E%3Cpath d='M56 38L52 48M66 38L70 48M48 30L36 32M72 30L84 32M56 24L54 18M66 24L68 18'/%3E%3C/g%3E %3Cellipse cx='98' cy='34' rx='11' ry='8' fill='%237a8656'/%3E%3Ccircle cx='104' cy='31' r='1.6' fill='%23141a0c'/%3E %3Cpath d='M30 44C24 46 20 50 22 54C26 52 30 50 34 48Z' fill='%236f7a4a'/%3E%3C/svg%3E"); opacity: 0; --pmin: 20; --pmax: 70; --ry: 10; --rs: .25; --flip: 1; --mirror: 1; animation: uw-right 46s linear 15s 1; }
:root[data-skin="unterwasser"] .scene i:nth-child(4) { display: block; left: 70%; bottom: -130px; width: 56px; height: 104px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 110'%3E%3Cdefs%3E%3CradialGradient id='j' cx='50%25' cy='40%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23ffe6ff' stop-opacity='.85'/%3E%3Cstop offset='.6' stop-color='%23d99cf0' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%239a6bd8' stop-opacity='.25'/%3E%3C/radialGradient%3E%3C/defs%3E %3Cpath d='M18 34C14 50 22 64 18 80C14 92 21 100 18 108' fill='none' stroke='%23f2c6ff' stroke-opacity='.55' stroke-width='1.3'%3E%3Canimate attributeName='d' dur='3.2s' begin='0s' repeatCount='indefinite' values='M18 34C14 50 22 64 18 80C14 92 21 100 18 108%3BM18 34C22 50 14 64 18 80C22 92 15 100 18 108%3BM18 34C14 50 22 64 18 80C14 92 21 100 18 108'/%3E%3C/path%3E%3Cpath d='M25 34C21 50 29 64 25 80C21 92 28 100 25 108' fill='none' stroke='%23f2c6ff' stroke-opacity='.55' stroke-width='1.3'%3E%3Canimate attributeName='d' dur='3.2s' begin='0.6s' repeatCount='indefinite' values='M25 34C21 50 29 64 25 80C21 92 28 100 25 108%3BM25 34C29 50 21 64 25 80C29 92 22 100 25 108%3BM25 34C21 50 29 64 25 80C21 92 28 100 25 108'/%3E%3C/path%3E%3Cpath d='M30 34C26 50 34 64 30 80C26 92 33 100 30 108' fill='none' stroke='%23f2c6ff' stroke-opacity='.55' stroke-width='1.3'%3E%3Canimate attributeName='d' dur='3.2s' begin='1.1s' repeatCount='indefinite' values='M30 34C26 50 34 64 30 80C26 92 33 100 30 108%3BM30 34C34 50 26 64 30 80C34 92 27 100 30 108%3BM30 34C26 50 34 64 30 80C26 92 33 100 30 108'/%3E%3C/path%3E%3Cpath d='M35 34C31 50 39 64 35 80C31 92 38 100 35 108' fill='none' stroke='%23f2c6ff' stroke-opacity='.55' stroke-width='1.3'%3E%3Canimate attributeName='d' dur='3.2s' begin='0.3s' repeatCount='indefinite' values='M35 34C31 50 39 64 35 80C31 92 38 100 35 108%3BM35 34C39 50 31 64 35 80C39 92 32 100 35 108%3BM35 34C31 50 39 64 35 80C31 92 38 100 35 108'/%3E%3C/path%3E%3Cpath d='M42 34C38 50 46 64 42 80C38 92 45 100 42 108' fill='none' stroke='%23f2c6ff' stroke-opacity='.55' stroke-width='1.3'%3E%3Canimate attributeName='d' dur='3.2s' begin='0.9s' repeatCount='indefinite' values='M42 34C38 50 46 64 42 80C38 92 45 100 42 108%3BM42 34C46 50 38 64 42 80C46 92 39 100 42 108%3BM42 34C38 50 46 64 42 80C38 92 45 100 42 108'/%3E%3C/path%3E %3Cpath d='M8 34C8 14 20 6 30 6C40 6 52 14 52 34C46 32 40 36 30 34C20 36 14 32 8 34Z' fill='url(%23j)' stroke='%23ffd9ff' stroke-opacity='.6'%3E%3Canimate attributeName='d' dur='1.6s' begin='0s' repeatCount='indefinite' values='M8 34C8 14 20 6 30 6C40 6 52 14 52 34C46 32 40 36 30 34C20 36 14 32 8 34Z%3BM12 32C12 16 22 10 30 10C38 10 48 16 48 32C42 30 38 34 30 32C22 34 18 30 12 32Z%3BM8 34C8 14 20 6 30 6C40 6 52 14 52 34C46 32 40 36 30 34C20 36 14 32 8 34Z'/%3E%3C/path%3E %3Cellipse cx='30' cy='22' rx='9' ry='5' fill='%23fff' fill-opacity='.25'/%3E%3C/svg%3E"); opacity: 0; --pmin: 6; --pmax: 30; --rs: .3; animation: uw-up 50s linear 1s 1; }
:root[data-skin="unterwasser"] .scene i:nth-child(5) { display: block; left: 22%; bottom: -100px; width: 40px; height: 74px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 110'%3E%3Cdefs%3E%3CradialGradient id='j' cx='50%25' cy='40%25' r='60%25'%3E%3Cstop offset='0' stop-color='%23ffe6ff' stop-opacity='.85'/%3E%3Cstop offset='.6' stop-color='%23d99cf0' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%239a6bd8' stop-opacity='.25'/%3E%3C/radialGradient%3E%3C/defs%3E %3Cpath d='M18 34C14 50 22 64 18 80C14 92 21 100 18 108' fill='none' stroke='%23f2c6ff' stroke-opacity='.55' stroke-width='1.3'%3E%3Canimate attributeName='d' dur='3.2s' begin='0s' repeatCount='indefinite' values='M18 34C14 50 22 64 18 80C14 92 21 100 18 108%3BM18 34C22 50 14 64 18 80C22 92 15 100 18 108%3BM18 34C14 50 22 64 18 80C14 92 21 100 18 108'/%3E%3C/path%3E%3Cpath d='M25 34C21 50 29 64 25 80C21 92 28 100 25 108' fill='none' stroke='%23f2c6ff' stroke-opacity='.55' stroke-width='1.3'%3E%3Canimate attributeName='d' dur='3.2s' begin='0.6s' repeatCount='indefinite' values='M25 34C21 50 29 64 25 80C21 92 28 100 25 108%3BM25 34C29 50 21 64 25 80C29 92 22 100 25 108%3BM25 34C21 50 29 64 25 80C21 92 28 100 25 108'/%3E%3C/path%3E%3Cpath d='M30 34C26 50 34 64 30 80C26 92 33 100 30 108' fill='none' stroke='%23f2c6ff' stroke-opacity='.55' stroke-width='1.3'%3E%3Canimate attributeName='d' dur='3.2s' begin='1.1s' repeatCount='indefinite' values='M30 34C26 50 34 64 30 80C26 92 33 100 30 108%3BM30 34C34 50 26 64 30 80C34 92 27 100 30 108%3BM30 34C26 50 34 64 30 80C26 92 33 100 30 108'/%3E%3C/path%3E%3Cpath d='M35 34C31 50 39 64 35 80C31 92 38 100 35 108' fill='none' stroke='%23f2c6ff' stroke-opacity='.55' stroke-width='1.3'%3E%3Canimate attributeName='d' dur='3.2s' begin='0.3s' repeatCount='indefinite' values='M35 34C31 50 39 64 35 80C31 92 38 100 35 108%3BM35 34C39 50 31 64 35 80C39 92 32 100 35 108%3BM35 34C31 50 39 64 35 80C31 92 38 100 35 108'/%3E%3C/path%3E%3Cpath d='M42 34C38 50 46 64 42 80C38 92 45 100 42 108' fill='none' stroke='%23f2c6ff' stroke-opacity='.55' stroke-width='1.3'%3E%3Canimate attributeName='d' dur='3.2s' begin='0.9s' repeatCount='indefinite' values='M42 34C38 50 46 64 42 80C38 92 45 100 42 108%3BM42 34C46 50 38 64 42 80C46 92 39 100 42 108%3BM42 34C38 50 46 64 42 80C38 92 45 100 42 108'/%3E%3C/path%3E %3Cpath d='M8 34C8 14 20 6 30 6C40 6 52 14 52 34C46 32 40 36 30 34C20 36 14 32 8 34Z' fill='url(%23j)' stroke='%23ffd9ff' stroke-opacity='.6'%3E%3Canimate attributeName='d' dur='1.6s' begin='0s' repeatCount='indefinite' values='M8 34C8 14 20 6 30 6C40 6 52 14 52 34C46 32 40 36 30 34C20 36 14 32 8 34Z%3BM12 32C12 16 22 10 30 10C38 10 48 16 48 32C42 30 38 34 30 32C22 34 18 30 12 32Z%3BM8 34C8 14 20 6 30 6C40 6 52 14 52 34C46 32 40 36 30 34C20 36 14 32 8 34Z'/%3E%3C/path%3E %3Cellipse cx='30' cy='22' rx='9' ry='5' fill='%23fff' fill-opacity='.25'/%3E%3C/svg%3E"); opacity: 0; --pmin: 10; --pmax: 40; --rs: .3; animation: uw-up 64s linear 24s 1; }
:root[data-skin="unterwasser"] .scene i:nth-child(6) { display: block; left: 12%; bottom: 40px; width: 26px; height: 130px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 170'%3E%3Cg fill='%23e8fbff' fill-opacity='.18' stroke='%23e8fbff' stroke-opacity='.75' stroke-width='1'%3E%3Ccircle cx='17' cy='160' r='5'/%3E%3Ccircle cx='13' cy='138' r='3.5'/%3E%3Ccircle cx='21' cy='120' r='4.5'/%3E%3Ccircle cx='15' cy='98' r='3'/%3E%3Ccircle cx='19' cy='80' r='5.5'/%3E%3Ccircle cx='12' cy='60' r='3'/%3E%3Ccircle cx='20' cy='42' r='4'/%3E%3Ccircle cx='16' cy='22' r='3.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.7'%3E%3Ccircle cx='15.7' cy='158.7' r='1.5'/%3E%3Ccircle cx='19.7' cy='118.7' r='1.3'/%3E%3Ccircle cx='17.7' cy='78.7' r='1.6'/%3E%3Ccircle cx='18.7' cy='40.7' r='1.2'/%3E%3C/g%3E%3C/svg%3E"); opacity: 0; --pmin: 1; --pmax: 8; --rs: .3; animation: uw-bubble 7s ease-in 2s 1; }
:root[data-skin="unterwasser"] .scene i:nth-child(7) { display: block; left: calc(100% + 30px); top: 14%; width: 210px; height: 105px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'%3E%3Cpath d='M100 40C80 20 50 8 6 18C40 26 66 36 86 50L100 52L114 50C134 36 160 26 194 18C150 8 120 20 100 40Z' fill='%2314324a'%3E%3Canimate attributeName='d' dur='3.4s' begin='0s' repeatCount='indefinite' values='M100 40C80 20 50 8 6 18C40 26 66 36 86 50L100 52L114 50C134 36 160 26 194 18C150 8 120 20 100 40Z%3BM100 40C80 40 50 46 8 56C42 52 66 50 86 52L100 52L114 52C134 50 158 52 192 56C150 46 120 40 100 40Z%3BM100 40C80 20 50 8 6 18C40 26 66 36 86 50L100 52L114 50C134 36 160 26 194 18C150 8 120 20 100 40Z'/%3E%3C/path%3E %3Cpath d='M100 52C98 70 99 84 100 98' fill='none' stroke='%2314324a' stroke-width='2'/%3E%3Cpath d='M92 40C94 34 106 34 108 40' fill='%2314324a'/%3E%3C/svg%3E"); opacity: 0; --pmin: 30; --pmax: 90; --ry: 8; --rs: .3; --flip: 1; animation: uw-left-far 70s linear 30s 1; }
:root[data-skin="unterwasser"] .scene i:nth-child(8) { display: block; left: -60px; top: 70%; width: 40px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 26'%3E%3Cdefs%3E%3ClinearGradient id='y' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe066'/%3E%3Cstop offset='1' stop-color='%23f2b705'/%3E%3C/linearGradient%3E%3C/defs%3E %3Cpath d='M32 13L42 5L40 13L42 21Z' fill='%23f2b705'%3E%3Canimate attributeName='d' dur='.35s' begin='0s' repeatCount='indefinite' values='M32 13L42 5L40 13L42 21Z%3BM32 13L41 9L40 13L41 17Z%3BM32 13L42 5L40 13L42 21Z'/%3E%3C/path%3E %3Cpath d='M2 13C6 2 24 1 33 13C24 25 6 24 2 13Z' fill='url(%23y)'/%3E%3Cpath d='M12 3C18 -1 26 1 28 6Z' fill='%23f2b705'/%3E %3Ccircle cx='7' cy='11' r='1.5' fill='%231b1406'/%3E%3Cpath d='M2 13L5 13' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E"); opacity: 0; scale: -1 1; --face: -1; --pmin: 2; --pmax: 12; --ry: 12; --rs: .25; --flip: 1; --mirror: 1; animation: uw-dart 7s ease-in-out 5s 1; }
@keyframes uw-left { 0% { transform: translate(0, 0); opacity: 1; } 30% { transform: translate(-32vw, 3vh); } 60% { transform: translate(-62vw, -2vh); } 100% { transform: translate(calc(-100vw - 260px), 2vh); opacity: 1; } }
@keyframes uw-left-far { 0% { transform: translate(0, 0); opacity: .5; } 50% { transform: translate(-55vw, 4vh); opacity: .5; } 100% { transform: translate(calc(-100vw - 280px), 0); opacity: .5; } }
@keyframes uw-right { 0% { transform: translate(0, 0); opacity: 1; } 25% { transform: translate(25vw, -3vh); } 55% { transform: translate(55vw, 2vh); } 100% { transform: translate(calc(100vw + 220px), -1vh); opacity: 1; } }
@keyframes uw-dart { 0% { transform: translate(0, 0); opacity: 1; } 30% { transform: translate(30vw, -4vh); } 45% { transform: translate(34vw, -4vh); } 100% { transform: translate(calc(100vw + 120px), 3vh); opacity: 1; } }
@keyframes uw-up { 0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: .9; } 50% { transform: translate(5vw, -55vh); } 90% { opacity: .9; } 100% { transform: translate(-3vw, calc(-100vh - 140px)); opacity: 0; } }
@keyframes uw-bubble { 0% { transform: translateY(0) scale(.8); opacity: 0; } 10% { opacity: .85; } 80% { opacity: .6; } 100% { transform: translateY(-75vh) scale(1.2); opacity: 0; } }

/* --- Live-Engine (engine.js): sobald das erste Bild gerechnet ist, tritt das Standbild zur Seite */
.conv > canvas.engine { position: absolute; z-index: 0; pointer-events: none; }
canvas.engine[data-k="saturn"] { right: -210px; bottom: -30px; width: 560px; height: 560px; }
canvas.engine[data-k="meer"], canvas.engine[data-k="wiese"] { inset: 0; width: 100%; height: 100%; }
canvas.engine[data-k="kerzen"] { left: -30px; bottom: 60px; width: 300px; height: 420px; }
:root[data-engine="weltraum"][data-skin="weltraum"] .conv::before { content: none; }
:root[data-engine="weltraum"][data-skin="weltraum"] .scene i:nth-child(-n+2),
:root[data-engine="nachtlicht"][data-skin="nachtlicht"] .scene i:nth-child(-n+3) { display: none; }

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