/* VAF OS · Themes „Ich poste mehr“
   Liegen als data-look über dem VAF-Design (data-skin='vaf'). Nur Optik: gleiches Markup, gleiche Funktionen.
   Wahl unter Einstellungen → Design. Das GHL-Design wird hier nie angefasst. */

/* Schriften kommen lokal aus /fonts.css (in index.html eingebunden). */

/* ── Gemeinsam für alle Themes ───────────────────────────── */

/* Hell/Dunkel-Schalter gehört zum klassischen VAF-Design; Themes bringen ihre Helligkeit mit. */
:root[data-skin='vaf'][data-look]:not([data-look='']) #theme { display: none; }

/* Diagramm-Farben: die Dashboard-Grafiken setzen GHL-Blau inline, Themes färben über --c1 … --c9, --c-ok, --c-bad, --c-track um.
   Jedes Theme muss alle Werte setzen. */
:root[data-look]:not([data-look='']) circle[stroke='#6ea8fe'] { stroke: var(--c1); }
:root[data-look]:not([data-look='']) circle[stroke='#2e90fa'] { stroke: var(--c2); }
:root[data-look]:not([data-look='']) circle[stroke='#53b1fd'] { stroke: var(--c3); }
:root[data-look]:not([data-look='']) circle[stroke='#84caff'] { stroke: var(--c4); }
:root[data-look]:not([data-look='']) circle[stroke='#1570ef'] { stroke: var(--c5); }
:root[data-look]:not([data-look='']) circle[stroke='#175cd3'] { stroke: var(--c6); }
:root[data-look]:not([data-look='']) circle[stroke='#b2ddff'] { stroke: var(--c7); }
:root[data-look]:not([data-look='']) circle[stroke='#0b4a9f'] { stroke: var(--c8); }
:root[data-look]:not([data-look='']) circle[stroke='#d1e9ff'] { stroke: var(--c9); }
:root[data-look]:not([data-look='']) circle[stroke='#32d583'] { stroke: var(--c-ok); }
:root[data-look]:not([data-look='']) circle[stroke='#f97066'] { stroke: var(--c-bad); }
:root[data-look]:not([data-look='']) circle[stroke='#eaecf0'],
:root[data-look]:not([data-look='']) circle[stroke='#e0eaff'] { stroke: var(--c-track); }
:root[data-look]:not([data-look='']) [style*='background:#6ea8fe'] { background: var(--c1) !important; }
:root[data-look]:not([data-look='']) [style*='background:#2e90fa'] { background: var(--c2) !important; }
:root[data-look]:not([data-look='']) [style*='background:#53b1fd'] { background: var(--c3) !important; }
:root[data-look]:not([data-look='']) [style*='background:#84caff'] { background: var(--c4) !important; }
:root[data-look]:not([data-look='']) [style*='background:#1570ef'] { background: var(--c5) !important; }
:root[data-look]:not([data-look='']) [style*='background:#175cd3'] { background: var(--c6) !important; }
:root[data-look]:not([data-look='']) [style*='background:#b2ddff'] { background: var(--c7) !important; }
:root[data-look]:not([data-look='']) [style*='background:#0b4a9f'] { background: var(--c8) !important; }
:root[data-look]:not([data-look='']) [style*='background:#d1e9ff'] { background: var(--c9) !important; }
:root[data-look]:not([data-look='']) [style*='background:#32d583'] { background: var(--c-ok) !important; }
:root[data-look]:not([data-look='']) [style*='background:#f97066'] { background: var(--c-bad) !important; }
:root[data-look]:not([data-look='']) [style*='height:26px'][style*='color:#fff'] { color: var(--c-text, #fff) !important; }
:root[data-look]:not([data-look='']) .chart-legend { color: var(--ink); }
:root[data-look]:not([data-look='']) .card [style*='color:#667085'],
:root[data-look]:not([data-look='']) .ghl-card [style*='color:#667085'] { color: var(--ink-soft) !important; }

/* ── Scribble-Notizen (scribble.js) ──────────────────────── */

.scr-blau { --scr: var(--scr-blau, #1f3fae); --scr-bg: #cfe0ff; }
.scr-rot { --scr: var(--scr-rot, #d7263d); --scr-bg: #ffd0d0; }
.scr-orange { --scr: var(--scr-orange, #ff6b00); --scr-bg: #ffd9ae; }
.scr-gruen { --scr: var(--scr-gruen, #1f8f4a); --scr-bg: #ccf1c9; }
.scr-schwarz { --scr: var(--scr-schwarz, #161616); --scr-bg: #fff27a; }
.scr-weiss { --scr: var(--scr-weiss, #fff); --scr-bg: #fffdf5; }

.scrib-layer { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 30; pointer-events: none; }
.scrib-layer svg { position: absolute; left: 0; top: 0; overflow: visible; }
.scrib-layer path { fill: none; stroke: var(--scr); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; filter: url(#rough); }
.scrib-tag {
  position: absolute; transform: translate(-6px, calc(-100% - 4px)); font: 700 15px/1 'Caveat', cursive; color: var(--scr); white-space: nowrap;
  opacity: .8; pointer-events: auto; text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper);
}
.scrib-tag:hover { opacity: 1; }
.scrib-note {
  position: absolute; width: 200px; min-height: 90px; padding: 14px 14px 10px; background: var(--scr-bg); color: #1b1b1b;
  font: 600 20px/1.15 'Caveat', cursive; box-shadow: 2px 5px 12px rgba(0, 0, 0, .22); transform: rotate(-1.6deg);
  pointer-events: auto; white-space: pre-wrap; word-break: break-word; border: 0;
}
.scrib-note:nth-of-type(2n) { transform: rotate(1.2deg); }
.scrib-note::before { content: ''; position: absolute; left: 50%; top: -9px; width: 70px; height: 18px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 255, 255, .55); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.scrib-note.scr-schwarz { color: #1b1b1b; }
.scrib-note small { display: block; font-size: 15px; opacity: .7; margin-top: 8px; }
.scrib-note button, .scrib-tag button {
  position: absolute; right: -9px; top: -9px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #d7263d; color: #fff;
  font: 700 13px/20px system-ui; cursor: pointer; padding: 0;
}
.scrib-tag button { position: static; display: inline-block; margin-left: 6px; vertical-align: middle; }
textarea.scrib-edit { resize: none; height: 120px; outline: 2px dashed var(--scr); font: 600 20px/1.15 'Caveat', cursive; }
.scrib-drawing { cursor: crosshair; }
.scrib-noting { cursor: copy; }
.scrib-drawing > :not(.scrib-layer), .scrib-noting > :not(.scrib-layer) { pointer-events: none; user-select: none; }
.scrib-bar {
  position: fixed; bottom: 18px; left: calc(50% + 118px); transform: translateX(-50%); z-index: 55;
  display: flex; gap: 6px; align-items: center; padding: 8px 12px; white-space: nowrap;
}
.scrib-bar > button { border: 2px solid var(--line-soft); background: var(--card); border-radius: 9px; padding: 5px 11px; font-weight: 700; cursor: pointer; }
.scrib-bar > button.on, .scrib-bar > button.done { background: var(--orange); border-color: var(--orange); color: #000; }
.scrib-bar small { color: var(--ink-soft); margin-left: 4px; }
.scrib-colors { display: inline-flex; gap: 5px; padding: 0 6px; }
.scrib-colors .sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-soft); background: var(--scr); cursor: pointer; padding: 0; }
.scrib-colors .sw.on { outline: 3px solid var(--orange); outline-offset: 1px; }
.round.scrib-btn svg { width: 18px; height: 18px; }
.round.scrib-btn.on { background: var(--orange); border-color: var(--orange); color: #000; }

/* ══════════════════════════════════════════════════════════
   1 · VAF-Notizblock: liniertes Papier, Kuli-Blau, Textmarker, Spiralbindung.
   ══════════════════════════════════════════════════════════ */
:root[data-look='notizblock'] {
  --paper: #fdfbf3;
  --paper-2: #f6f1e2;
  --card: #fffef9;
  --side: #d9c7a3;
  --ink: #1f3fae;
  --ink-strong: #0d2273;
  --ink-soft: #4f5f9c;
  --line: #1f3fae;
  --line-soft: rgba(31, 63, 174, .2);
  --orange: #ff6b00;
  --orange-soft: rgba(255, 107, 0, .13);
  --marker-y: #ffe94d;
  --rule: rgba(84, 140, 214, .30);
  --margin: rgba(226, 61, 77, .55);
  --shadow: 2px 3px 0 rgba(13, 34, 115, .13);
  --hand: 'Caveat', cursive;
  --c1: #1f3fae; --c2: #ff6b00; --c3: #2f9e5a; --c4: #c2185b; --c5: #6d3fd1; --c6: #b07800; --c7: #0e7c8a; --c8: #8c4a1e; --c9: #4f5f9c;
  --c-ok: #2f9e5a; --c-bad: #d7263d; --c-track: rgba(31, 63, 174, .12);
}
/* Linien laufen über die ganze Seite, rote Randlinie links im Inhalt */
:root[data-look='notizblock'] .main {
  background:
    linear-gradient(90deg, transparent 54px, var(--margin) 54px, var(--margin) 56px, transparent 56px),
    repeating-linear-gradient(180deg, transparent 0 29px, var(--rule) 29px 30px),
    var(--paper);
  background-attachment: local;
}
:root[data-look='notizblock'] .content { padding-left: 74px; }
:root[data-look='notizblock'] .page-head { padding-left: 74px; border-bottom: 0; }
:root[data-look='notizblock'] .page-head h1 { font-family: 'Kalam', var(--marker); font-weight: 700; font-size: 34px; }
:root[data-look='notizblock'] .subhead { padding-left: 74px; }

/* Seitenleiste = Pappdeckel mit Spiralbindung */
:root[data-look='notizblock'] .side { position: relative; overflow: visible; border-right: 0; box-shadow: inset -10px 0 14px -10px rgba(0, 0, 0, .35); }
:root[data-look='notizblock'] .side::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: -13px; width: 26px; z-index: 6; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30'%3E%3Cellipse cx='19' cy='15' rx='4' ry='4' fill='%23fdfbf3' stroke='%23b9ab8c'/%3E%3Cpath d='M3 9 C 12 3, 24 6, 21 15' fill='none' stroke='%23555' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M3 9 C 12 3, 24 6, 21 15' fill='none' stroke='%23ddd' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") repeat-y 0 8px / 26px 30px;
}
:root[data-look='notizblock'] .nav { overflow-x: hidden; }
:root[data-look='notizblock'] .nav a { font-family: 'Kalam', var(--font); font-size: 15.5px; font-weight: 400; }
:root[data-look='notizblock'] .nav a.active {
  background: linear-gradient(100deg, transparent 2%, var(--marker-y) 4%, var(--marker-y) 94%, transparent 97%);
  box-shadow: none; font-weight: 700; color: var(--ink-strong);
}
:root[data-look='notizblock'] .nav a.active::after { display: none; }
:root[data-look='notizblock'] .nav a:hover { background: rgba(255, 233, 77, .45); }
:root[data-look='notizblock'] .chip { background: transparent; border: 1.5px solid var(--orange); font-family: 'Gochi Hand', var(--font); font-weight: 400; font-size: 12px; transform: rotate(-3deg); }
:root[data-look='notizblock'] .switcher { background: var(--card); transform: rotate(-.6deg); }

/* Karten = eingeklebte Zettel mit Tesastreifen */
:root[data-look='notizblock'] .ghl-card { position: relative; border: 1.5px solid rgba(13, 34, 115, .25); border-radius: 3px; box-shadow: 3px 5px 0 rgba(13, 34, 115, .09), 0 10px 22px -14px rgba(0, 0, 0, .35); }
:root[data-look='notizblock'] .ghl-card::after {
  content: ''; position: absolute; top: -10px; left: 50%; width: 92px; height: 22px; transform: translateX(-50%) rotate(-2.5deg);
  background: rgba(255, 246, 196, .78); border-left: 1px dashed rgba(0, 0, 0, .08); border-right: 1px dashed rgba(0, 0, 0, .08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1); pointer-events: none;
}
:root[data-look='notizblock'] .grid > .ghl-card:nth-child(3n + 1) { transform: rotate(-.35deg); }
:root[data-look='notizblock'] .grid > .ghl-card:nth-child(3n + 2) { transform: rotate(.3deg); }
:root[data-look='notizblock'] .grid > .ghl-card:nth-child(3n + 2)::after { left: 22%; transform: rotate(4deg); }
:root[data-look='notizblock'] .ghl-card .hd { border-bottom: 2px solid var(--margin); }
:root[data-look='notizblock'] .ghl-card .hd h3 { font-family: 'Kalam', var(--marker); font-weight: 700; font-size: 21px; }
:root[data-look='notizblock'] .sketch { border-radius: 3px; }
:root[data-look='notizblock'] .sketch::before { border-width: 1.5px; }

/* Kuli-Bausteine */
:root[data-look='notizblock'] .btn { border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; border-width: 2px; }
:root[data-look='notizblock'] .btn-primary { background: var(--orange); box-shadow: 2px 3px 0 var(--ink-strong); }
:root[data-look='notizblock'] .seg { border-radius: 12px 4px 12px 4px; }
:root[data-look='notizblock'] .input, :root[data-look='notizblock'] select.input { background: var(--card); border-radius: 4px; border-width: 0 0 2px; border-color: var(--line); }
:root[data-look='notizblock'] .tbl th { font-family: 'Kalam', var(--font); text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--ink-strong); border-bottom: 2px solid var(--margin); }
:root[data-look='notizblock'] .tbl td { border-bottom: 1px solid var(--rule); }
:root[data-look='notizblock'] .tbl tr.click:hover td { background: rgba(255, 233, 77, .35); }
:root[data-look='notizblock'] .tag { border: 0; background: var(--marker-y); color: #1b1b1b; border-radius: 2px; transform: rotate(-1deg); }
:root[data-look='notizblock'] .pill { border-radius: 4px; border: 1.5px solid currentColor; background: transparent; }
:root[data-look='notizblock'] .count { background: var(--marker-y); color: #1b1b1b; }
:root[data-look='notizblock'] .day { background: var(--card); border-radius: 2px; }
:root[data-look='notizblock'] .day.today { border: 2px solid var(--orange); box-shadow: 0 0 0 4px rgba(255, 233, 77, .6); }
:root[data-look='notizblock'] .day .n, :root[data-look='notizblock'] .kpi { font-family: 'Kalam', var(--marker); font-weight: 700; }
:root[data-look='notizblock'] .avatar { background: var(--ink); font-family: 'Kalam', var(--font); }
:root[data-look='notizblock'] .round { border-radius: 50% 46% 52% 48%; }
:root[data-look='notizblock'] .modal h2, :root[data-look='notizblock'] .soon h2 { font-family: 'Kalam', var(--marker); font-weight: 700; }
:root[data-look='notizblock'] .col { background: rgba(246, 241, 226, .85); border-radius: 3px; }
:root[data-look='notizblock'] .opp { border-radius: 2px; }
:root[data-look='notizblock'] .opp:nth-child(odd) { transform: rotate(-.4deg); }
:root[data-look='notizblock'] .flow-canvas { background: transparent; border: 2px dashed var(--line-soft); }
:root[data-look='notizblock'] .skin-pick .prev[data-look-prev='notizblock'] > div:last-child { background: repeating-linear-gradient(180deg, #fdfbf3 0 11px, rgba(84, 140, 214, .35) 11px 12px) !important; }

/* Tafel-Hinweis: im Notizblock lädt der leere Seitenkopf zum Kritzeln ein */
:root[data-look='notizblock'] .topbar { background: transparent; }
:root[data-look='notizblock'] .topbar .spacer::before {
  content: 'Kritzel drauf – das ganze Team sieht’s ↗'; display: block; font: 400 19px/1 'Gochi Hand', cursive; color: var(--ink-soft);
  opacity: .55; padding-left: 52px; transform: rotate(-1.5deg);
}

/* ══════════════════════════════════════════════════════════
   2 · VAF-Assets: Plakatwand. Die echten freigestellten VAF-Sticker (assets/themes/, GPT-Image-2-Set „Ich poste mehr“),
   Papier #F5F0E4, Tinte, Kobalt, Orange, harte Plakat-Schatten. Deko liegt nur auf Pseudo-Elementen, nie über Bedienelementen.
   ══════════════════════════════════════════════════════════ */
:root[data-look='assets'] {
  --paper: #f5f0e4;
  --paper-2: #ece4d2;
  --card: #fffdf7;
  --side: #141210;
  --ink: #1a1714;
  --ink-strong: #000;
  --ink-soft: #5b544b;
  --line: #1a1714;
  --line-soft: rgba(26, 23, 20, .16);
  --orange: #f47c00;
  --orange-soft: rgba(244, 124, 0, .15);
  --cobalt: #0055cc;
  --pink: #fc6ca4;
  --shadow: 5px 5px 0 #1a1714;
  --r: 4px;
  --c1: #0055cc; --c2: #1a1714; --c3: #c2410c; --c4: #b8326e; --c5: #385410; --c6: #5b3fc4; --c7: #0f766e; --c8: #8a3d00; --c9: #4b4540;
  --c-ok: #2f7d32; --c-bad: #dc4f4f; --c-track: rgba(26, 23, 20, .1); --c-text: #fff;
  --scr-blau: #0055cc;
}
:root[data-look='assets'] .main {
  background: url('/assets/themes/graffiti-asterisk.webp') no-repeat right -60px bottom -70px / 300px, url('/assets/themes/pink-arrow.webp') no-repeat left 30px bottom 26px / 190px, var(--paper) var(--grain);
}
:root[data-look='assets'] .sketch::before { display: none; }
:root[data-look='assets'] .sketch { border: 2.5px solid var(--line); border-radius: 4px; }

/* Seitenleiste schwarz wie die Sticker-Konturen, Megafon unten */
:root[data-look='assets'] .side { color: #f5f0e4; border-right: 0; position: relative; background: var(--side); }
:root[data-look='assets'] .side::after { content: ''; position: absolute; right: -6px; bottom: 54px; width: 116px; height: 104px; background: url('/assets/themes/megaphone.webp') no-repeat center / contain; transform: rotate(-8deg); pointer-events: none; }
:root[data-look='assets'] .nav { padding-bottom: 120px; }
:root[data-look='assets'] .nav a { color: #f5f0e4; font-family: 'Archivo Narrow', var(--font); font-weight: 600; font-size: 15.5px; text-transform: uppercase; letter-spacing: .02em; }
:root[data-look='assets'] .nav a:hover { background: rgba(244, 124, 0, .2); }
:root[data-look='assets'] .nav a.active { background: transparent; box-shadow: none; color: #fff; font-weight: 700; }
:root[data-look='assets'] .nav a.active::after { left: 34px; right: 30px; bottom: -3px; height: 12px; background: url('/assets/themes/orange-underline.webp') no-repeat / 100% 100%; }
:root[data-look='assets'] .nav hr, :root[data-look='assets'] .nav-bottom { border-color: rgba(245, 240, 228, .2); }
:root[data-look='assets'] .chip { background: var(--orange); color: #000; }
:root[data-look='assets'] .switcher { background: #fffdf7; color: var(--ink); box-shadow: 4px 4px 0 var(--orange); border: 0; }
:root[data-look='assets'] .search input { background: #2a2622; border-color: #3a352f; color: #f5f0e4; }
:root[data-look='assets'] .search > svg { color: #f5f0e4; }

/* Kopf: „MACHEN.“-Stempel, Titel als Plakat-Headline mit Auge */
:root[data-look='assets'] .topbar .spacer::before { content: ''; display: block; width: 150px; height: 44px; background: url('/assets/themes/machen.webp') no-repeat left center / contain; transform: rotate(-3deg); }
:root[data-look='assets'] .page-head { border-bottom: 2.5px solid var(--line); }
:root[data-look='assets'] .page-head h1 { font-family: 'Archivo Narrow', var(--font); font-weight: 700; font-size: 38px; text-transform: uppercase; letter-spacing: -.01em; position: relative; padding-right: 64px; }
:root[data-look='assets'] .page-head h1::after { content: ''; position: absolute; right: 0; top: -4px; width: 56px; height: 44px; background: url('/assets/themes/eye.webp') no-repeat center / contain; transform: rotate(8deg); }
:root[data-look='assets'] .tabs a.active { border-bottom-width: 4px; }

/* Karten = Plakate mit pinkem Tape */
:root[data-look='assets'] .ghl-card { border: 2.5px solid var(--line); border-radius: 4px; box-shadow: var(--shadow); position: relative; }
:root[data-look='assets'] .grid > .ghl-card::after {
  content: ''; position: absolute; top: -16px; right: 26px; width: 96px; height: 34px; pointer-events: none;
  background: url('/assets/themes/graffiti-tape.webp') no-repeat center / contain; transform: rotate(6deg);
}
:root[data-look='assets'] .grid > .ghl-card:nth-child(2n)::after { right: auto; left: 30px; transform: rotate(-8deg); }
:root[data-look='assets'] .ghl-card .hd { border-bottom: 2px solid var(--line); }
:root[data-look='assets'] .ghl-card .hd h3 { font-family: 'Archivo Narrow', var(--font); font-weight: 700; font-size: 20px; text-transform: uppercase; }
:root[data-look='assets'] .btn { border: 2.5px solid var(--line); border-radius: 4px; box-shadow: 3px 3px 0 var(--line); text-transform: uppercase; font-family: 'Archivo Narrow', var(--font); letter-spacing: .02em; }
:root[data-look='assets'] .btn-primary { background: var(--orange); color: #000; border-color: var(--line); }
:root[data-look='assets'] .seg { border: 2.5px solid var(--line); border-radius: 4px; box-shadow: 3px 3px 0 var(--line); }
:root[data-look='assets'] .seg > .on { background: var(--cobalt); color: #fff; }
:root[data-look='assets'] .input, :root[data-look='assets'] select.input { border: 2px solid var(--line); border-radius: 4px; }
:root[data-look='assets'] .tbl th { border-bottom: 2.5px solid var(--line); color: var(--ink); font-family: 'Archivo Narrow', var(--font); font-size: 14px; }
:root[data-look='assets'] .tbl td { border-bottom: 1.5px solid var(--line-soft); }
:root[data-look='assets'] .tag { border: 0; background: var(--pink); color: #1a1714; border-radius: 2px; font-weight: 700; }
:root[data-look='assets'] .pill.info, :root[data-look='assets'] .count { background: var(--cobalt); color: #fff; }
:root[data-look='assets'] .chip, :root[data-look='assets'] .hand { color: #000; }
:root[data-look='assets'] .hand { color: var(--cobalt); }
:root[data-look='assets'] .avatar { background: var(--cobalt); color: #fff; }
:root[data-look='assets'] .round { border-width: 2.5px; box-shadow: 2px 2px 0 var(--line); }
:root[data-look='assets'] .col { background: rgba(236, 228, 210, .9); border: 2.5px dashed var(--line); border-radius: 4px; }
:root[data-look='assets'] .day.today { border: 3px solid var(--orange); }
:root[data-look='assets'] .cal-post { border-left-color: var(--cobalt); }
:root[data-look='assets'] .empty::before { content: ''; display: block; width: 210px; height: 150px; margin: 0 auto 14px; background: url('/assets/themes/overthinking.webp') no-repeat center / contain; transform: rotate(-4deg); }
:root[data-look='assets'] .login-wrap { background: url('/assets/themes/post.webp') no-repeat right 6% top 8% / 240px, url('/assets/themes/knot.webp') no-repeat left 6% bottom 8% / 220px; }
:root[data-look='assets'] .skin-pick .prev[data-look-prev='assets'] > div:last-child { background: url('/assets/themes/eye.webp') no-repeat right 8px bottom 8px / 48px, #f5f0e4 !important; }

/* ══════════════════════════════════════════════════════════
   3 · Black Metal VAF: Maschinenraum-Material (Brandbook v1.5). Graphit-Panels mit Lichtkante,
   Titan nur für den Primärknopf, Manrope, Status-LEDs, Caveat-Randnotiz. Keine Neigung, kein Hover-Lift.
   ══════════════════════════════════════════════════════════ */
:root[data-look='blackmetal'] {
  --paper: #0b0d0f;
  --paper-2: #121518;
  --card: #15181b;
  --side: #080a0b;
  --ink: #f3f4f5;
  --ink-strong: #fff;
  --ink-soft: #a5acb2;
  --line: rgba(255, 255, 255, .22);
  --line-soft: rgba(255, 255, 255, .08);
  --orange: #f47c00;
  --orange-soft: rgba(244, 124, 0, .14);
  --blue-ink: #79abff;
  --ok: #6ee9a6; --warn: #ffa24a; --bad: #ff595e;
  --finish-top: #383833; --finish-mid: #22221e; --finish-base: #141411; --finish-edge: #aaa99d; --finish-glow: #cccbbc26;
  --shadow: inset 0 1px #ffffff10, 0 2px 4px #0006, 0 22px 32px -17px #000e;
  --grain: none;
  --font: 'Manrope', system-ui, sans-serif;
  --marker: 'Manrope', system-ui, sans-serif;
  --r: 18px;
  --c1: #79abff; --c2: #f47c00; --c3: #b5bec6; --c4: #6ee9a6; --c5: #ffa24a; --c6: #86b3ff; --c7: #c9b8ff; --c8: #dde2e4; --c9: #9fb0bd;
  --c-ok: #6ee9a6; --c-bad: #ff595e; --c-track: rgba(255, 255, 255, .08); --c-text: #080a0b;
  --scr-blau: #86b3ff; --scr-schwarz: #dde2e4; --scr-rot: #ff7a7e;
  color-scheme: dark;
}
:root[data-look='blackmetal'] body { background: #080a0b; }
:root[data-look='blackmetal'] .main {
  background: radial-gradient(ellipse 60% 35% at 68% -8%, #39424a65, transparent 80%), radial-gradient(circle, #ffffff07 .6px, transparent .9px) 0 0 / 7px 7px, #0b0d0f;
}
:root[data-look='blackmetal'] .sketch::before { display: none; }
:root[data-look='blackmetal'] .marker { font-weight: 800; letter-spacing: -.03em; }

/* Seitenleiste */
:root[data-look='blackmetal'] .side { background: var(--side); border-right: 1px solid #ffffff0d; }
:root[data-look='blackmetal'] .logo-img { filter: grayscale(1) brightness(2.2) contrast(1.1); }
:root[data-look='blackmetal'] .nav a { color: #c7ccd1; font-weight: 500; border-radius: 9px; }
:root[data-look='blackmetal'] .nav a svg { color: #8b939a; }
:root[data-look='blackmetal'] .nav a:hover { background: #ffffff0a; }
:root[data-look='blackmetal'] .nav a.active { color: #fff; font-weight: 700; background: linear-gradient(137deg, var(--finish-top), var(--finish-mid) 40%, var(--finish-base)); box-shadow: inset 0 1px #ffffff2d, 0 2px 4px #0009; }
:root[data-look='blackmetal'] .nav a.active::after { left: -8px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; background: var(--orange); border-radius: 2px; }
:root[data-look='blackmetal'] .nav a.active svg { color: var(--orange); }
:root[data-look='blackmetal'] .nav hr, :root[data-look='blackmetal'] .nav-bottom { border-color: #ffffff12; border-style: solid; border-width: 1px 0 0; }
:root[data-look='blackmetal'] .chip { background: transparent; color: #8b939a; border: 1px solid #ffffff1c; font-size: 9.5px; letter-spacing: .11em; }
:root[data-look='blackmetal'] .switcher, :root[data-look='blackmetal'] .search input { background: #15181b; border: 1px solid #ffffff1a; box-shadow: inset 0 1px #ffffff0d; border-radius: 9px; }
:root[data-look='blackmetal'] .switcher .av { background: linear-gradient(121deg, #dde2e4, #b5bec6 46%, #788793 78%, #c5cdd3); color: #171b20; font-family: var(--font); font-weight: 800; }

/* Kopf: großer Titel mit Punkt, Caveat-Randnotiz */
:root[data-look='blackmetal'] .topbar { border-bottom: 1px solid #ffffff0d; }
:root[data-look='blackmetal'] .topbar .spacer::before { content: 'alles im Blick'; display: inline-block; font: 400 25px/1 'Caveat', cursive; color: var(--orange); transform: rotate(-4deg); padding: 0 6px 6px; background: url('/assets/themes/orange-underline.webp') no-repeat center bottom / 100% 9px; }
:root[data-look='blackmetal'] .page-head { border-bottom: 1px solid #ffffff12; }
:root[data-look='blackmetal'] .page-head h1 { font-family: var(--font); font-weight: 800; font-size: 40px; letter-spacing: -.06em; line-height: 1.05; }
:root[data-look='blackmetal'] .page-head h1::after { content: '.'; color: var(--orange); }
:root[data-look='blackmetal'] .tabs a { color: var(--ink-soft); font-weight: 600; }
:root[data-look='blackmetal'] .tabs a.active { color: #fff; }
:root[data-look='blackmetal'] .round { background: #15181b; border: 1px solid #ffffff22; color: #dde2e4; box-shadow: inset 0 1px #ffffff12; }
:root[data-look='blackmetal'] .round.orange { background: radial-gradient(circle at 35% 25%, #ffc48a, #f47c00 50%, #b85a00); border: 0; }
:root[data-look='blackmetal'] .avatar { background: linear-gradient(121deg, #dde2e4, #b5bec6 46%, #788793 78%, #c5cdd3); color: #171b20; }

/* Graphit-Panels */
:root[data-look='blackmetal'] .ghl-card, :root[data-look='blackmetal'] .sketch, :root[data-look='blackmetal'] .paper-card {
  border: 1px solid #ffffff20; border-top-color: #ffffff4a; border-radius: 18px;
  background: radial-gradient(ellipse at 0% -20%, var(--finish-glow), transparent 65%), linear-gradient(137deg, var(--finish-top), var(--finish-mid) 34%, var(--finish-base));
  box-shadow: inset 0 1px #ffffff10, 0 2px 4px #0006, 0 22px 32px -17px #000e, 0 42px 65px -35px #000c;
}
:root[data-look='blackmetal'] .ghl-card .hd { border-bottom: 1px solid #ffffff12; }
:root[data-look='blackmetal'] .ghl-card .hd h3 { font-family: var(--font); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em; color: #dde2e4; }
:root[data-look='blackmetal'] .kpi { font-family: var(--font); font-weight: 500; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
:root[data-look='blackmetal'] .btn { background: #15181b; border: 1px solid #ffffff22; border-radius: 9px; box-shadow: inset 0 1px #ffffff12, 0 2px 4px #0008; color: #f3f4f5; font-weight: 600; }
:root[data-look='blackmetal'] .btn:hover { transform: none; border-color: #ffffff40; }
:root[data-look='blackmetal'] .btn-primary {
  color: #171b20; border: 1px solid #dde2e4; border-bottom-color: #788793; background-color: #b5bec6;
  background-image: radial-gradient(ellipse at 23% -30%, #ffffff40, transparent 68%), repeating-linear-gradient(0deg, #ffffff10 0 1px, #00000006 1px 3px), linear-gradient(121deg, #dde2e4, #b5bec6 46%, #8d9aa5 78%, #c5cdd3);
  box-shadow: inset 0 1px #ffffff9b, 0 2px 4px #0009, 0 12px 20px -10px #000d;
}
:root[data-look='blackmetal'] .seg, :root[data-look='blackmetal'] .seg > * { background: #15181b; border-color: #ffffff1c; color: #dde2e4; }
:root[data-look='blackmetal'] .seg { border-radius: 9px; }
:root[data-look='blackmetal'] .seg > .on { background: #2a2f35; color: #fff; box-shadow: inset 0 1px #ffffff1a; }
:root[data-look='blackmetal'] .input, :root[data-look='blackmetal'] select.input { background: #0f1214; border: 1px solid #ffffff1f; border-radius: 9px; box-shadow: inset 0 1px 3px #0008; color: #f3f4f5; }
:root[data-look='blackmetal'] .input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px #f47c0026; }
:root[data-look='blackmetal'] .tbl th { color: #8b939a; font-size: 11px; letter-spacing: .12em; border-bottom: 1px solid #ffffff1c; }
:root[data-look='blackmetal'] .tbl td { border-bottom: 1px solid #ffffff0b; }
:root[data-look='blackmetal'] .tbl tr.click:hover td { background: #ffffff07; }
:root[data-look='blackmetal'] .tag { border: 1px solid #f47c0055; background: #201b16; color: #ffa24a; border-radius: 5px; }
:root[data-look='blackmetal'] .pill { background: #ffffff08; border: 1px solid #ffffff1c; color: #dde2e4; font-weight: 600; }
:root[data-look='blackmetal'] .pill.ok::before, :root[data-look='blackmetal'] .pill.bad::before, :root[data-look='blackmetal'] .pill.warn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; }
:root[data-look='blackmetal'] .pill.ok::before { background: radial-gradient(circle at 35% 25%, #daffdf, #7ae9a6 42%, #28a76a); box-shadow: 0 0 0 3px #58ef9710, 0 0 9px #49dc7888; }
:root[data-look='blackmetal'] .pill.bad::before { background: radial-gradient(circle at 35% 25%, #ffd8d9, #ff6369 42%, #c52b38); box-shadow: 0 0 0 3px #ff586110, 0 0 9px #ff455588; }
:root[data-look='blackmetal'] .pill.warn::before { background: radial-gradient(circle at 35% 25%, #ffe9cf, #ffa24a 42%, #c46a12); box-shadow: 0 0 9px #ffa24a77; }
:root[data-look='blackmetal'] .count, :root[data-look='blackmetal'] .pill.info { background: #201b16; color: #ffa24a; border: 1px solid #f47c0033; }
:root[data-look='blackmetal'] .col { background: #ffffff05; border: 1px solid #ffffff10; border-radius: 18px; }
:root[data-look='blackmetal'] .opp { border-radius: 12px; }
:root[data-look='blackmetal'] .day { background: #121518; border: 1px solid #ffffff10; border-radius: 12px; }
:root[data-look='blackmetal'] .day.today { border-color: var(--orange); }
:root[data-look='blackmetal'] .cal-post { background: #1d2126; border-left-color: var(--blue-ink); }
:root[data-look='blackmetal'] .flow-canvas { background: #0f1214 radial-gradient(#ffffff10 1px, transparent 1px) 0 0 / 18px 18px; border: 1px solid #ffffff12; }
:root[data-look='blackmetal'] .flow-node { background: #15181b; border: 1px solid #ffffff22; }
:root[data-look='blackmetal'] .hand { font-family: 'Caveat', cursive; color: var(--blue-ink); }
:root[data-look='blackmetal'] .ini { filter: saturate(.6) brightness(.95); }
:root[data-look='blackmetal'] .overlay { background: rgba(0, 0, 0, .65); backdrop-filter: blur(6px); }
:root[data-look='blackmetal'] .scrib-bar > button { background: #15181b; color: #f3f4f5; }
:root[data-look='blackmetal'] .skin-pick .prev[data-look-prev='blackmetal'] > div:last-child { background: linear-gradient(137deg, #383833, #22221e 34%, #141411) !important; }

/* ══════════════════════════════════════════════════════════
   4 · Nima: aus @offiziell.nimand (Musiker-Feed). Nacht, Filmkorn, warme Haut- und Sandtöne,
   Himmelblau als Akzent, Pixel-Untertitel (Silkscreen), gestreifter Schriftzug wie sein „nimand“-Logo.
   ══════════════════════════════════════════════════════════ */
:root[data-look='nima'] {
  --paper: #0d0c0c;
  --paper-2: #171413;
  --card: #1b1716;
  --side: #0a0a0b;
  --ink: #ece6dc;
  --ink-strong: #fff8ee;
  --ink-soft: #c2ab98;
  --line: rgba(236, 230, 220, .3);
  --line-soft: rgba(236, 230, 220, .1);
  --orange: #54b4fc;
  --orange-soft: rgba(84, 180, 252, .14);
  --sand: #d1ae93;
  --olive: #8aa63a;
  --ok: #9cc24a; --warn: #e7b06e; --bad: #ff7a6b;
  --shadow: 0 18px 40px -20px #000, inset 0 1px rgba(255, 240, 220, .06);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .78 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --font: 'Manrope', system-ui, sans-serif;
  --marker: 'Silkscreen', monospace;
  --r: 10px;
  --c1: #54b4fc; --c2: #d1ae93; --c3: #8aa63a; --c4: #9f7963; --c5: #e7b06e; --c6: #a8d4ff; --c7: #dcdfda; --c8: #c98f6b; --c9: #7fa1b8;
  --c-ok: #9cc24a; --c-bad: #ff7a6b; --c-track: rgba(236, 230, 220, .08); --c-text: #0d0c0c;
  --scr-blau: #54b4fc; --scr-schwarz: #dcdfda;
  color-scheme: dark;
}
:root[data-look='nima'] body { background: #0a0a0b; }
:root[data-look='nima'] .main {
  background: radial-gradient(ellipse 50% 40% at 92% -6%, rgba(231, 160, 90, .22), transparent 70%), radial-gradient(ellipse 70% 60% at 50% 120%, rgba(84, 180, 252, .08), transparent 70%),
    var(--grain), #0d0c0c;
}
:root[data-look='nima'] .sketch::before { display: none; }
:root[data-look='nima'] .sketch, :root[data-look='nima'] .ghl-card { border: 1px solid rgba(255, 240, 220, .1); border-radius: 10px; background: linear-gradient(160deg, #221d1b, #171413 60%); box-shadow: var(--shadow); }
:root[data-look='nima'] .side { background: #0a0a0b var(--grain); border-right: 1px solid rgba(255, 240, 220, .07); }
:root[data-look='nima'] .logo-img { filter: sepia(.5) saturate(.8) brightness(1.15); }
:root[data-look='nima'] .nav a { color: #d8cfc3; font-weight: 500; border-radius: 6px; }
:root[data-look='nima'] .nav a svg { color: #9f7963; }
:root[data-look='nima'] .nav a:hover { background: rgba(209, 174, 147, .08); }
:root[data-look='nima'] .nav a.active { background: rgba(84, 180, 252, .1); box-shadow: inset 2px 0 0 #54b4fc; color: #fff; font-weight: 700; }
:root[data-look='nima'] .nav a.active svg { color: #54b4fc; }
:root[data-look='nima'] .nav a.active::after { display: none; }
:root[data-look='nima'] .chip { background: transparent; color: var(--sand); font-family: 'Silkscreen', monospace; font-weight: 400; font-size: 9px; letter-spacing: .02em; border: 1px solid rgba(209, 174, 147, .3); border-radius: 2px; }
:root[data-look='nima'] .switcher, :root[data-look='nima'] .search input { background: #171413; border: 1px solid rgba(255, 240, 220, .1); box-shadow: none; }
:root[data-look='nima'] .switcher .av { background: var(--sand); color: #0d0c0c; }

/* Pixel-Untertitel und Streifen-Schriftzug */
:root[data-look='nima'] .page-head { border-bottom: 1px solid rgba(255, 240, 220, .08); }
:root[data-look='nima'] .page-head h1 {
  font-family: 'Fraunces', serif; font-weight: 900; font-size: 40px; letter-spacing: -.01em; text-transform: lowercase; color: #fff8ee;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 7px); mask-image: repeating-linear-gradient(180deg, #000 0 5px, transparent 5px 7px);
}
:root[data-look='nima'] .ghl-card .hd h3, :root[data-look='nima'] .modal h2, :root[data-look='nima'] .soon h2 { font-family: 'Silkscreen', monospace; font-weight: 400; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; color: #fff8ee; text-shadow: 0 0 1px #000, 1px 1px 0 #000; }
:root[data-look='nima'] .ghl-card .hd { border-bottom: 1px solid rgba(255, 240, 220, .08); }
:root[data-look='nima'] .topbar .spacer::before { content: 'BEI UNS LÄUFT’S.'; font: 400 14px/1 'Silkscreen', monospace; color: #fff8ee; letter-spacing: .06em; text-shadow: 1px 1px 0 #000; opacity: .75; }
:root[data-look='nima'] .kpi, :root[data-look='nima'] .day .n { font-family: 'Fraunces', serif; font-weight: 900; }
:root[data-look='nima'] .hand { font-family: 'Silkscreen', monospace; font-size: .9em; color: var(--sand); }
:root[data-look='nima'] .tabs a { color: #b9a796; }
:root[data-look='nima'] .tabs a.active { color: #fff8ee; border-bottom-color: #54b4fc; }

:root[data-look='nima'] .btn { background: #1b1716; border: 1px solid rgba(255, 240, 220, .16); border-radius: 8px; box-shadow: none; color: #ece6dc; font-weight: 600; }
:root[data-look='nima'] .btn:hover { transform: none; border-color: var(--sand); }
:root[data-look='nima'] .btn-primary { background: var(--sand); border-color: var(--sand); color: #1a1210; }
:root[data-look='nima'] .seg, :root[data-look='nima'] .seg > * { background: #1b1716; border-color: rgba(255, 240, 220, .14); color: #ece6dc; }
:root[data-look='nima'] .seg > .on { background: #54b4fc; color: #0d0c0c; }
:root[data-look='nima'] .input, :root[data-look='nima'] select.input { background: #120f0e; border: 1px solid rgba(255, 240, 220, .14); color: #ece6dc; }
:root[data-look='nima'] .tbl th { color: var(--sand); font-family: 'Silkscreen', monospace; font-weight: 400; font-size: 11px; letter-spacing: .02em; border-bottom: 1px solid rgba(255, 240, 220, .14); }
:root[data-look='nima'] .tbl td { border-bottom: 1px solid rgba(255, 240, 220, .06); }
:root[data-look='nima'] .tbl tr.click:hover td { background: rgba(209, 174, 147, .06); }
:root[data-look='nima'] .tag { border: 1px solid rgba(138, 166, 58, .5); background: rgba(108, 132, 36, .18); color: #c7dd8a; border-radius: 3px; }
:root[data-look='nima'] .count, :root[data-look='nima'] .pill.info { background: rgba(84, 180, 252, .14); color: #a8d4ff; }
:root[data-look='nima'] .pill.plain { color: #ece6dc; }
:root[data-look='nima'] .avatar { background: var(--sand); color: #1a1210; }
:root[data-look='nima'] .round { background: #1b1716; border: 1px solid rgba(255, 240, 220, .16); color: #ece6dc; }
:root[data-look='nima'] .round.orange { background: #e7a05a; color: #1a1210; border: 0; }
:root[data-look='nima'] .col { background: rgba(255, 240, 220, .03); border: 1px dashed rgba(255, 240, 220, .12); }
:root[data-look='nima'] .day { background: #171413; border: 1px solid rgba(255, 240, 220, .08); }
:root[data-look='nima'] .day.today { border-color: #54b4fc; }
:root[data-look='nima'] .cal-post { background: #221d1b; }
:root[data-look='nima'] .flow-canvas { background: #120f0e radial-gradient(rgba(255, 240, 220, .08) 1px, transparent 1px) 0 0 / 18px 18px; border: 1px solid rgba(255, 240, 220, .08); }
:root[data-look='nima'] .flow-node { background: #1b1716; border: 1px solid rgba(255, 240, 220, .16); }
:root[data-look='nima'] .ini { filter: sepia(.35) saturate(.8); }
:root[data-look='nima'] .scrib-bar > button { background: #1b1716; color: #ece6dc; }
:root[data-look='nima'] .skin-pick .prev[data-look-prev='nima'] > div:last-child { background: radial-gradient(ellipse at 90% 0%, rgba(231, 160, 90, .4), transparent 60%), #0d0c0c !important; }

/* ══════════════════════════════════════════════════════════
   5 · Anton exklusiv: wie go.visibleasf.com / @einfach.antoha. Schwarz mit Kritzelmuster gegen helles Grau,
   Archivo Black in Versalien, orange Marker-Wörter, schräge gelbe Knöpfe, Häkchen-Pillen.
   ══════════════════════════════════════════════════════════ */
:root[data-look='anton'] {
  --paper: #f0f3f7;
  --paper-2: #e5e9ef;
  --card: #fff;
  --side: #000;
  --ink: #0b0b0b;
  --ink-strong: #000;
  --ink-soft: #545b66;
  --line: #0b0b0b;
  --line-soft: rgba(11, 11, 11, .12);
  --orange: #f57c00;
  --orange-soft: rgba(245, 124, 0, .13);
  --yellow: #edbd02;
  --ok: #0b7a2f; --bad: #c62828;
  --shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 14px 30px -18px rgba(0, 0, 0, .35);
  --grain: none;
  --font: 'Archivo', system-ui, sans-serif;
  --marker: 'Archivo Black', 'Archivo', sans-serif;
  --r: 12px;
  --doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23331a00' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 30l14 14M34 30L20 44M27 26v22M16 37h22'/%3E%3Cpath d='M110 20c20-6 40 4 30 16s-34 4-20-8'/%3E%3Cpath d='M70 90h40m-10-9l10 9-10 9'/%3E%3Cpath d='M140 120c-8 10 6 22 14 12s-6-20-14-12z'/%3E%3Cpath d='M30 140q10-14 20 0t20 0'/%3E%3Cpath d='M95 150l6 12 6-12 6 12'/%3E%3C/svg%3E");
  --c1: #f57c00; --c2: #0b0b0b; --c3: #b85d00; --c4: #0b7a2f; --c5: #3d3d3d; --c6: #c62828; --c7: #8a5a00; --c8: #5b3fc4; --c9: #545b66;
  --c-ok: #0b7a2f; --c-bad: #c62828; --c-track: rgba(11, 11, 11, .08); --c-text: #fff;
  --scr-blau: #1747c9;
  color-scheme: light;
}
:root[data-look='anton'] .sketch::before { display: none; }
:root[data-look='anton'] .sketch { border: 1px solid var(--line-soft); border-radius: 12px; }
:root[data-look='anton'] .main { background: var(--paper); }
:root[data-look='anton'] .side { background: var(--doodle) 0 0 / 180px, #000; border-right: 0; }
:root[data-look='anton'] .nav a { color: #f2f2f2; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .03em; }
:root[data-look='anton'] .nav a svg { color: #f57c00; }
:root[data-look='anton'] .nav a:hover { background: rgba(245, 124, 0, .16); }
:root[data-look='anton'] .nav a.active { background: var(--yellow); color: #000; box-shadow: 3px 3px 0 #f57c00; transform: rotate(-1.2deg); border-radius: 8px; }
:root[data-look='anton'] .nav a.active svg { color: #000; }
:root[data-look='anton'] .nav a.active::after { display: none; }
:root[data-look='anton'] .nav hr, :root[data-look='anton'] .nav-bottom { border-color: rgba(255, 255, 255, .15); }
:root[data-look='anton'] .chip { background: transparent; border: 1px solid #f57c00; color: #f57c00; }
:root[data-look='anton'] .nav a.active .chip { border-color: #000; color: #000; }
:root[data-look='anton'] .switcher { background: #161616; color: #fff; border: 1px solid #2c2c2c; box-shadow: none; }
:root[data-look='anton'] .switcher .t small { color: #b5b5b5; }
:root[data-look='anton'] .search input { background: #161616; border: 1px solid #2c2c2c; color: #fff; }
:root[data-look='anton'] .search > svg { color: #b5b5b5; }

/* Kopf: schwarzer Balken wie die Website-Sektionen, Headline in Versalien, Marker-Unterzeile */
:root[data-look='anton'] .topbar { background: var(--doodle) 0 0 / 180px, #000; }
:root[data-look='anton'] .topbar .spacer::before { content: 'ICH POSTE MEHR.'; font: 400 22px/1 'Permanent Marker', cursive; color: #f57c00; letter-spacing: .02em; }
:root[data-look='anton'] .round { background: #161616; border-color: #333; color: #fff; }
:root[data-look='anton'] .round.orange { background: #f57c00; color: #000; }
:root[data-look='anton'] .avatar { background: var(--yellow); color: #000; }
:root[data-look='anton'] .page-head { background: #fff; border-bottom: 3px solid #000; }
:root[data-look='anton'] .page-head h1 { font-family: 'Archivo Black', var(--font); font-weight: 400; text-transform: uppercase; font-size: 32px; letter-spacing: -.01em; }
:root[data-look='anton'] .page-head h1::after { content: ' ✱'; font-family: 'Permanent Marker', cursive; color: #f57c00; }
:root[data-look='anton'] .tabs a { white-space: nowrap; color: #3a3f47; font-weight: 700; text-transform: uppercase; font-size: 13px; }
:root[data-look='anton'] .tabs a.active { color: #000; border-bottom-color: #f57c00; }
:root[data-look='anton'] .subhead { background: #fff; }

:root[data-look='anton'] .ghl-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: var(--shadow); }
:root[data-look='anton'] .ghl-card .hd { border-bottom: 1px solid var(--line-soft); }
:root[data-look='anton'] .ghl-card .hd h3 { font-family: 'Archivo Black', var(--font); font-weight: 400; font-size: 17px; text-transform: uppercase; }
:root[data-look='anton'] .ghl-card .hd h3::first-letter { color: #f57c00; }
:root[data-look='anton'] .btn { white-space: nowrap; border: 2px solid #000; border-radius: 99px; background: #fff; box-shadow: none; font-weight: 800; text-transform: uppercase; font-size: 12.5px; letter-spacing: .02em; }
:root[data-look='anton'] .btn:hover { transform: rotate(-1deg); }
:root[data-look='anton'] .btn-primary { background: var(--yellow); border-color: var(--yellow); color: #000; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 #000; }
:root[data-look='anton'] .seg { border: 2px solid #000; border-radius: 99px; }
:root[data-look='anton'] .seg > * { border-color: #000; font-weight: 800; }
:root[data-look='anton'] .seg > .on { background: #000; color: var(--yellow); }
:root[data-look='anton'] .input, :root[data-look='anton'] select.input { border: 1.5px solid #c9cfd8; border-radius: 10px; background: #fff; }
:root[data-look='anton'] .input:focus { border-color: #f57c00; }
:root[data-look='anton'] .tbl th { color: #000; font-weight: 800; border-bottom: 2px solid #000; }
:root[data-look='anton'] .tbl td { border-bottom: 1px solid var(--line-soft); }
:root[data-look='anton'] .tbl tr.click:hover td { background: #fff7e0; }
:root[data-look='anton'] .tag { border: 0; background: #000; color: #fff; border-radius: 99px; font-weight: 700; }
:root[data-look='anton'] .pill { border-radius: 99px; font-weight: 800; }
:root[data-look='anton'] .pill.ok { background: #e6f6ea; color: #0b7a2f; border: 1px solid #0b7a2f; }
:root[data-look='anton'] .pill.ok::before { content: '✓'; }
:root[data-look='anton'] .pill.bad { background: #fdeaea; color: #c62828; border: 1px solid #c62828; }
:root[data-look='anton'] .pill.bad::before { content: '✕'; }
:root[data-look='anton'] .pill.info, :root[data-look='anton'] .count { background: #000; color: var(--yellow); }
:root[data-look='anton'] .hand { font-family: 'Permanent Marker', cursive; color: #b85d00; font-size: 1.05em; }
:root[data-look='anton'] .kpi, :root[data-look='anton'] .day .n { font-family: 'Archivo Black', var(--font); font-weight: 400; }
:root[data-look='anton'] .col { background: #e5e9ef; border: 0; border-radius: 12px; }
:root[data-look='anton'] .col-head b { text-transform: uppercase; font-weight: 800; }
:root[data-look='anton'] .day.today { border: 2px solid #f57c00; }
:root[data-look='anton'] .modal h2, :root[data-look='anton'] .soon h2 { font-family: 'Archivo Black', var(--font); font-weight: 400; text-transform: uppercase; }
:root[data-look='anton'] .switch.on { background: #f57c00; }
:root[data-look='anton'] .skin-pick .prev[data-look-prev='anton'] > div:first-child { background: var(--doodle) 0 0 / 90px, #000 !important; }
:root[data-look='anton'] .skin-pick .prev[data-look-prev='anton'] > div:last-child i:last-child { background: #edbd02 !important; transform: rotate(-3deg); }

/* ── VAF · Live: Assets-Look + fliegende Sticker (public/fly.js) ─────────────────── */
.fly-layer { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.fly { position: absolute; height: auto; transform: translate(-50%, -50%) rotate(var(--rot)); filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, .18));
  animation: fly-in .9s cubic-bezier(.2, 1.4, .4, 1) var(--d) both, fly-float var(--t) ease-in-out calc(var(--d) + .9s) infinite alternate; }
@keyframes fly-in {
  from { opacity: 0; transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) rotate(calc(var(--rot) - 90deg)) scale(.4); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot)) scale(1); }
}
@keyframes fly-float {
  from { transform: translate(-50%, -50%) rotate(var(--rot)); }
  to { transform: translate(calc(-50% + 10px), calc(-50% - 14px)) rotate(calc(var(--rot) + 6deg)); }
}
@media (prefers-reduced-motion: reduce) { .fly { animation: none; } }
/* Einfache Ansicht (Geschäft-Tab in „ich poste mehr.“) bekommt den Assets-Look mit */
:root[data-fly='1'] .e-app { background: url('/assets/themes/graffiti-asterisk.webp') no-repeat right -70px bottom -80px / 260px, #f5f0e4; min-height: 100vh; }
:root[data-fly='1'] .e-top { background: #141210; color: #f5f0e4; border-bottom: 3px solid #f47c00; }
:root[data-fly='1'] .e-top .e-btn { color: #f5f0e4; border-color: rgba(245, 240, 228, .35); }
/* Im App-Modus kein „Abmelden“-Gewackel neben dem Tab-Balken der iOS-App: Logo kleiner, Kopf kompakt */
:root[data-app='ipm'] .e-top { padding-top: max(8px, env(safe-area-inset-top)); }
:root .skin-pick .prev[data-look-prev='live'] > div:last-child { background: url('/assets/themes/orange-star.webp') no-repeat right 6px top 6px / 30px, url('/assets/themes/pink-arrow.webp') no-repeat left 6px bottom 6px / 54px, #f5f0e4 !important; }

/* VAF · Live in Schwarz (Lars 03.11. ~11:30: „nicht in so 'nem braun, sondern … Schwarz“): Seitenleiste + Fläche schwarz, Karten hell */
:root[data-fly='1'] { --side: #000; }
:root[data-fly='1'] .side { background: #000; }
:root[data-fly='1'] .main { background: url('/assets/themes/graffiti-asterisk.webp') no-repeat right -60px bottom -70px / 300px, #000; color: #f5f0e4; }
:root[data-fly='1'] .page-head { border-bottom-color: #f47c00; }
:root[data-fly='1'] .page-head h1, :root[data-fly='1'] .main > h2, :root[data-fly='1'] .main h3.group, :root[data-fly='1'] .topbar { color: #f5f0e4; }
:root[data-fly='1'] .ghl-card, :root[data-fly='1'] .card, :root[data-fly='1'] .sketch, :root[data-fly='1'] table, :root[data-fly='1'] .modal { color: var(--ink); }
:root[data-fly='1'] .e-app { background: url('/assets/themes/graffiti-asterisk.webp') no-repeat right -70px bottom -80px / 260px, #000; }
:root[data-fly='1'] .e-top { background: #000; }
:root[data-fly='1'] .e-main > h1, :root[data-fly='1'] .e-main > h2, :root[data-fly='1'] .e-hello { color: #f5f0e4; }
:root[data-fly='1'] .e-h1, :root[data-fly='1'] .e-lead { color: #f5f0e4; }
:root[data-fly='1'] .main button, :root[data-fly='1'] .main .btn, :root[data-fly='1'] .main select, :root[data-fly='1'] .main input, :root[data-fly='1'] .main textarea, :root[data-fly='1'] .topbar button { color: var(--ink); }
:root[data-fly='1'] .main .btn.primary, :root[data-fly='1'] .main button.primary { color: #000; }
:root[data-fly='1'] { --shadow: 5px 5px 0 #f47c00; }
:root[data-fly='1'] .e-card, :root[data-fly='1'] .e-tile { box-shadow: 6px 6px 0 #f47c00; }