/* ═══════════════════════════════════════════════════════════════════
LARAMIDIA WEB PANEL — COMMAND CENTER THEME
Comprehensive theme override. Loaded AFTER the inline base.html
styles so we win via cascade order. All Aurora-Glass tokens get
remapped to a tactical dark-terminal palette; targeted component
overrides sharpen corners + swap gradients for flat panels.
Update rule: Edit here, not in base.html — the inline block is
legacy and will be pruned incrementally as pages get migrated.
═══════════════════════════════════════════════════════════════════ */
:root {
/* ─── Command Center palette ─── */
/* Base surfaces (very dark, slight blue-teal tint) */
--cc-bg-0: #060a0e; /* deepest — under all panels */
--cc-bg-1: #0a0f14; /* body bg */
--cc-bg-2: #12181f; /* card / sidebar bg */
--cc-bg-3: #171e26; /* elevated card / hover */
--cc-bg-4: #1e2731; /* input / select bg */
--cc-bg-5: #26313d; /* hover / accent bg */
/* Borders — sparse teal-gray grid tint */
--cc-bd-1: rgba(74, 222, 128, 0.08); /* default hairline */
--cc-bd-2: rgba(74, 222, 128, 0.16); /* stronger */
--cc-bd-3: rgba(74, 222, 128, 0.28); /* emphasis */
--cc-bd-grid: rgba(74, 222, 128, 0.04); /* subtle backdrop grid */
/* Text — mint-tinted greens */
--cc-tx-1: #e2e8f0; /* primary (bright) */
--cc-tx-2: #a6d5c8; /* secondary (mint) */
--cc-tx-3: #7ba398; /* muted */
--cc-tx-4: #4a6b62; /* very muted */
--cc-tx-invert: #060a0e;
/* Accents */
--cc-accent: #4ade80; /* terminal green — primary CTA */
--cc-accent-hi: #86efac; /* hover */
--cc-accent-lo: #22c55e; /* press */
--cc-accent-soft: rgba(74, 222, 128, 0.12);
--cc-accent-glow: rgba(74, 222, 128, 0.35);
--cc-accent-line: rgba(74, 222, 128, 0.55);
/* Amber — kept as warning/highlight accent */
--cc-amber: #fbbf24;
--cc-amber-hi: #fcd34d;
--cc-amber-soft: rgba(251, 191, 36, 0.14);
--cc-amber-line: rgba(251, 191, 36, 0.45);
/* Semantic */
--cc-success: #4ade80;
--cc-warn: #fbbf24;
--cc-danger: #ef4444;
--cc-danger-soft: rgba(239, 68, 68, 0.14);
--cc-info: #22d3ee;
--cc-info-soft: rgba(34, 211, 238, 0.14);
/* ─── Existing aurora vars remapped to Command Center ───
This is the KEY — every page currently uses --brand-1, --sf-bg,
--tx-1 etc. Remapping here cascades to ALL pages at once. */
--brand-1: var(--cc-accent);
--brand-2: var(--cc-accent-lo);
--brand-deep: #16a34a;
--brand-glow: var(--cc-accent-glow);
--grad-brand: var(--cc-accent);
--grad-brand-soft: var(--cc-accent-soft);
--warm-1: var(--cc-amber);
--warm-glow: var(--cc-amber-soft);
--grad-warm: var(--cc-amber);
--grad-amber: var(--cc-amber);
--grad-amber-soft: var(--cc-amber-soft);
--sf-bg: var(--cc-bg-1);
--sf-bg-2: var(--cc-bg-2);
--sf-0: var(--cc-bg-0);
--sf-1: var(--cc-bg-1);
--sf-2: var(--cc-bg-2);
--sf-3: var(--cc-bg-3);
--sf-4: var(--cc-bg-4);
--sf-5: var(--cc-bg-5);
--tx-1: var(--cc-tx-1);
--tx-2: var(--cc-tx-2);
--tx-3: var(--cc-tx-3);
--tx-4: var(--cc-tx-4);
--tx-5: var(--cc-tx-4);
--glass-1: var(--cc-bg-2);
--glass-2: var(--cc-bg-3);
--glass-3: var(--cc-bg-4);
--glass-border: var(--cc-bd-1);
--glass-border-strong: var(--cc-bd-2);
--glass-highlight: rgba(74, 222, 128, 0.06);
--border: var(--cc-bd-1);
--border-strong: var(--cc-bd-2);
/* ─── Page background — subtle green scanline grid instead of aurora ─── */
--grad-bg:
linear-gradient(0deg, var(--cc-bd-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--cc-bd-grid) 1px, transparent 1px),
radial-gradient(70vw 50vh at 50% 0%, rgba(74, 222, 128, 0.03) 0%, transparent 60%),
radial-gradient(50vw 40vh at 80% 100%, rgba(34, 211, 238, 0.02) 0%, transparent 60%),
linear-gradient(180deg, var(--cc-bg-1) 0%, var(--cc-bg-0) 100%);
--grad-sidebar: var(--cc-bg-2);
--grad-card: var(--cc-bg-2);
/* Sharper radii — Command Center prefers rectangles */
/* Radii, 2026-07 refresh: the old 3-10px scale read as dated next to the
already-rounded shell in base.html. Rounder, but deliberately short of
"friendly app" — the tactical character comes from the palette, the mono
labels and the corner brackets, not from sharp corners. */
/* Weicher als das Command-Center-Original (6/9/14/18/24). Die
Referenzseiten leben von runden, schwebenden Flaechen. */
--r-xs: 8px;
--r-sm: 11px;
--r-md: 16px;
--r-lg: 20px;
--r-xl: 26px;
--r-pill: 999px;
/* Shadows — flat, minimal */
--shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.35);
--shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.55);
--shadow-glow: 0 0 0 1px var(--cc-accent-line), 0 0 24px var(--cc-accent-soft);
--shadow-warm: 0 0 0 1px var(--cc-amber-line), 0 0 24px var(--cc-amber-soft);
--shadow-brand: var(--shadow-glow);
/* Typography weights */
--cc-fw-normal: 400;
--cc-fw-medium: 500;
--cc-fw-semibold: 600;
--cc-fw-bold: 700;
}
/* Raster-Hintergrund, Seitenleiste und Markenzeichen: bewusst LEER.
Hier stand je ein Block aus lauter !important, der den OBSIDIAN-Teil
unten ausgehebelt hat:
html -- kachelte den Hintergrund (32px-Raster)
aside#sidebar -- flache Flaeche, Radius 18px statt 22px
aside#sidebar::before -- display:none, also kein Lichtsaum
.brand-mark -- gruen umrandetes Kaestchen statt freies Logo
Gestaltung liegt jetzt ausschliesslich unter OBSIDIAN. */
/* Typografie */
body {
font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-feature-settings: "ss01", "cv11";
}
.font-mono, code, pre, kbd,
.tabular, [class*="stat-"], [class*="metric-"] {
font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
font-variant-numeric: tabular-nums;
}
::selection {
background: var(--cc-accent-soft);
color: var(--cc-accent-hi);
}
/* ===================================================================
Navigation: bewusst LEER.
===================================================================
Hier stand die Command-Center-Navigation, jede Zeile mit !important.
Das hat den OBSIDIAN-Block unten ausgehebelt: der aktive Punkt behielt
die alte Flaeche, und .nav-link.active::before stand auf display:none,
wodurch der Leuchtbalken samt Animation unsichtbar blieb. Genau daher
kam die stillstehende Navigationsleiste.
Die Gestaltung liegt jetzt vollstaendig unter OBSIDIAN. Hier nichts
mehr ergaenzen -- schon gar nichts mit !important.
=================================================================== */
/* ═══════════════════════════════════════════════════════════════════
Karten aus Tailwind-Markup an OBSIDIAN angleichen
═══════════════════════════════════════════════════════════════════
Viele Vorlagen bauen ihre Flaechen aus Tailwind-Klassen statt aus
.cc-panel. Damit die nicht als graue Kaesten danebenstehen, werden sie
hier auf dieselben Token gezogen.
Zwei Dinge sind Absicht:
1. Die eigenen Bauteile sind AUSGENOMMEN (:not(.cc-panel) usw.).
Vorher stand hier ein festes Lila mit !important, das jede eigene
Flaeche uebermalt hat — auch die, die gerade erst gestaltet wurde.
2. !important steht nur noch auf Farbe und Kante, weil dort Tailwind-
Hilfsklassen dagegenhalten. Radius, Schatten und alles Animierte
bleiben ohne, damit sie ueberschreibbar sind.
═══════════════════════════════════════════════════════════════════ */
.card:not(.cc-panel):not(.act-card),
.panel:not(.cc-panel):not(.act-card),
[class*="rounded-2xl"][class*="border"]:not(.cc-panel):not(.act-card):not(.medallion),
[class*="rounded-xl"][class*="border"]:not(.cc-panel):not(.act-card):not(.medallion) {
border-radius: var(--r-lg);
background:
linear-gradient(178deg,
rgba(255, 255, 255, 0.028) 0%,
rgba(255, 255, 255, 0.008) 40%,
transparent 100%),
var(--cc-bg-2) !important;
border-color: var(--cc-bd-1) !important;
box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.9);
}
/* Anklickbare Flaechen heben sich beim Ueberfahren — ruhende nicht,
sonst zappelt eine Tabelle. */
a.card:hover,
a.panel:hover {
border-color: var(--cc-accent-line) !important;
box-shadow: 0 24px 52px -22px rgba(0, 0, 0, 0.95),
0 0 0 1px var(--cc-accent-soft);
transform: translateY(-2px);
}
.card, .panel {
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.rounded-3xl, .rounded-2xl { border-radius: var(--r-lg); }
/* ═══════════════════════════════════════════════════════════════════
Buttons — Glas mit Glimmen statt Terminal-Block
═══════════════════════════════════════════════════════════════════ */
[class*="bg-brand"],
button[class*="bg-brand"] {
background: linear-gradient(135deg,
var(--cc-accent) 0%, var(--cc-accent-lo) 100%) !important;
color: #fff !important;
border-radius: var(--r-pill) !important;
box-shadow: 0 8px 24px -10px var(--cc-accent-glow) !important;
transition: box-shadow .25s, filter .25s;
}
[class*="bg-brand"]:hover,
button[class*="bg-brand"]:hover {
filter: brightness(1.12);
box-shadow: 0 10px 32px -8px var(--cc-accent-glow) !important;
}
[class*="bg-warm"],
button[class*="bg-warm"] {
background: linear-gradient(135deg,
var(--cc-amber-hi) 0%, var(--cc-amber) 100%) !important;
color: #2a1a06 !important;
border-radius: var(--r-pill) !important;
box-shadow: 0 8px 24px -10px rgba(232, 163, 61, 0.5) !important;
}
/* ═══════════════════════════════════════════════════════════════════
Reusable Command Center Component classes (for new markup)
═══════════════════════════════════════════════════════════════════ */
/* ── HUD Panel ── */
.cc-panel {
background: var(--cc-bg-2);
border: 1px solid var(--cc-bd-1);
border-radius: var(--r-md);
/* Was 1rem/1.25rem — cards felt cramped against their own borders. */
padding: 1.35rem 1.5rem;
position: relative;
}
.cc-panel--elevated {
background: var(--cc-bg-3);
box-shadow: var(--shadow-md);
}
.cc-panel--accent {
border-color: var(--cc-accent-line);
}
/* Panel with corner-brackets — tactical feel */
.cc-panel--tactical {
position: relative;
}
.cc-panel--tactical::before,
.cc-panel--tactical::after {
content: "";
position: absolute;
width: 12px;
height: 12px;
border: 2px solid var(--cc-accent);
pointer-events: none;
}
/* Nudged inward: with a 14px radius the brackets would otherwise float off
the rounded corner instead of tracing it. */
.cc-panel--tactical::before {
top: 5px;
left: 5px;
border-right: 0;
border-bottom: 0;
}
.cc-panel--tactical::after {
bottom: 5px;
right: 5px;
border-left: 0;
border-top: 0;
}
/* ── Section header ── */
.cc-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding-bottom: 0.75rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--cc-bd-1);
}
.cc-section-title {
font-size: 0.75rem;
font-weight: var(--cc-fw-semibold);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cc-accent);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* Kein Leuchtpunkt vor Abschnittstiteln. Der Rhythmus kommt jetzt aus der
Haarlinie hinter dem Titel (.cc-section-head::after); beides zusammen
war eine Markierung zu viel. */
.cc-section-hint {
font-size: 0.72rem;
color: var(--cc-tx-4);
font-family: 'JetBrains Mono', monospace;
letter-spacing: 0.05em;
}
/* ── Metric card ── */
.cc-metric {
background: var(--cc-bg-2);
border: 1px solid var(--cc-bd-1);
border-radius: var(--r-sm);
padding: 0.85rem 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.cc-metric-label {
font-size: 0.62rem;
font-weight: var(--cc-fw-semibold);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cc-tx-4);
font-family: 'JetBrains Mono', monospace;
}
.cc-metric-value {
font-family: 'JetBrains Mono', monospace;
font-size: 1.5rem;
font-weight: var(--cc-fw-medium);
color: var(--cc-accent);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.cc-metric-value--tx-1 { color: var(--cc-tx-1); }
.cc-metric-value--amber { color: var(--cc-amber); }
.cc-metric-value--danger { color: var(--cc-danger); }
.cc-metric-hint {
font-size: 0.7rem;
color: var(--cc-tx-4);
}
/* ── Buttons ── */
.cc-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.62rem 1.05rem;
background: var(--cc-bg-3);
color: var(--cc-tx-1);
border: 1px solid var(--cc-bd-2);
border-radius: var(--r-sm);
font-family: inherit;
font-size: 0.82rem;
font-weight: var(--cc-fw-medium);
letter-spacing: 0.02em;
line-height: 1;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
text-decoration: none;
}
.cc-btn:hover:not(:disabled) {
background: var(--cc-bg-4);
border-color: var(--cc-bd-3);
color: var(--cc-tx-1);
}
.cc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cc-btn--primary {
background: var(--cc-accent);
color: var(--cc-tx-invert);
border-color: transparent;
font-weight: var(--cc-fw-semibold);
}
.cc-btn--primary:hover:not(:disabled) {
background: var(--cc-accent-hi);
box-shadow: 0 0 0 2px var(--cc-accent-soft);
color: var(--cc-tx-invert);
}
.cc-btn--tactical {
background: transparent;
color: var(--cc-accent);
border-color: var(--cc-accent);
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 0.72rem;
font-family: 'JetBrains Mono', monospace;
padding: 0.5rem 0.85rem;
}
.cc-btn--tactical:hover:not(:disabled) {
background: var(--cc-accent-soft);
color: var(--cc-accent-hi);
}
.cc-btn--danger {
background: transparent;
color: var(--cc-danger);
border-color: var(--cc-danger);
}
.cc-btn--danger:hover:not(:disabled) {
background: var(--cc-danger-soft);
}
/* ── Status Pills ── */
.cc-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.15rem 0.55rem;
background: var(--cc-bg-3);
border: 1px solid var(--cc-bd-2);
color: var(--cc-tx-2);
border-radius: var(--r-xs);
font-size: 0.68rem;
font-weight: var(--cc-fw-medium);
letter-spacing: 0.05em;
line-height: 1.5;
font-family: 'JetBrains Mono', monospace;
text-transform: uppercase;
white-space: nowrap;
}
.cc-pill--accent {
background: var(--cc-accent-soft);
border-color: var(--cc-accent-line);
color: var(--cc-accent);
}
.cc-pill--amber {
background: var(--cc-amber-soft);
border-color: var(--cc-amber-line);
color: var(--cc-amber);
}
.cc-pill--danger {
background: var(--cc-danger-soft);
border-color: rgba(239, 68, 68, 0.45);
color: var(--cc-danger);
}
.cc-pill--info {
background: var(--cc-info-soft);
border-color: rgba(34, 211, 238, 0.35);
color: var(--cc-info);
}
/* Pulse-dot indicator (online/live/etc.) */
.cc-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cc-accent);
box-shadow: 0 0 8px var(--cc-accent);
display: inline-block;
flex-shrink: 0;
}
.cc-dot--pulse {
animation: cc-pulse 2s infinite;
}
@keyframes cc-pulse {
0%, 100% { box-shadow: 0 0 0 0 var(--cc-accent-glow), 0 0 8px var(--cc-accent); }
50% { box-shadow: 0 0 0 6px transparent, 0 0 12px var(--cc-accent); }
}
.cc-dot--amber { background: var(--cc-amber); box-shadow: 0 0 8px var(--cc-amber); }
.cc-dot--danger { background: var(--cc-danger); box-shadow: 0 0 8px var(--cc-danger); }
/* ── Inputs ── */
.cc-input,
.cc-select {
width: 100%;
padding: 0.55rem 0.75rem;
background: var(--cc-bg-1);
color: var(--cc-tx-1);
border: 1px solid var(--cc-bd-2);
border-radius: var(--r-sm);
font-family: inherit;
font-size: 0.85rem;
transition: border-color 120ms ease, background 120ms ease;
}
.cc-input:focus,
.cc-select:focus {
border-color: var(--cc-accent);
outline: none;
box-shadow: 0 0 0 2px var(--cc-accent-soft);
}
.cc-input::placeholder { color: var(--cc-tx-4); }
/* ── Table (tactical style) ── */
.cc-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.82rem;
font-variant-numeric: tabular-nums;
}
.cc-table thead th {
text-align: left;
padding: 0.62rem 0.9rem;
background: var(--cc-bg-1);
border-bottom: 1px solid var(--cc-bd-2);
font-size: 0.66rem;
font-weight: var(--cc-fw-semibold);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--cc-tx-4);
font-family: 'JetBrains Mono', monospace;
}
.cc-table tbody td {
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--cc-bd-1);
color: var(--cc-tx-2);
}
.cc-table tbody tr:hover td {
background: var(--cc-bg-3);
}
/* ── Scrollbars — subtle terminal aesthetic ── */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--cc-bd-2);
border-radius: var(--r-sm);
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--cc-bd-3);
background-clip: padding-box;
}
/* ═══════════════════════════════════════════════════════════════════
Legacy fixes — tone down Aurora-Glass-era gradients on old markup
═══════════════════════════════════════════════════════════════════ */
/* User pill at sidebar bottom — sharper.
`.user-pill` genau, NICHT `[class*="user-pill"]`: der Teilstring-
Vergleich traf auch `user-pill__id` und `user-pill__actions` und gab
jedem davon Rahmen, Flaeche und Radius — drei Kaesten ineinander. */
.user-pill {
border-radius: var(--r-md) !important;
background: var(--cc-bg-3) !important;
border-color: var(--cc-bd-2) !important;
}
/* Mode-switch banner (Player/Admin toggle) — sharper corners + flat */
aside#sidebar a[href="/admin"][style*="linear-gradient"],
aside#sidebar a[href="/"][style*="linear-gradient"] {
border-radius: var(--r-md) !important;
}
/* ═══════════════════════════════════════════════════════════════════════
OBSIDIAN — Panel-Redesign nach Jaleels Konzeptbild (2026-08-04)
═══════════════════════════════════════════════════════════════════════
Ersetzt saemtliche vorherigen Redesign-Schichten. Die alten Bloecke
(AURORA, Identitaet, Polish 1-8) waren uebereinandergestapelte Flicken,
die sich gegenseitig ausgehebelt haben — daher kamen die stehende
Navigationsanimation und der blau gebliebene Admin-Hintergrund.
Regeln, die aus diesen Fehlern folgen und hier gelten:
1. KEIN !important auf Eigenschaften, die animiert werden. Eine
Animation verliert gegen !important — die Navigationsleiste stand
deshalb still, obwohl die Animation lief.
2. Seitenweite Farbwechsel gehoeren an :root. Der Hintergrund haengt
an ; Token am erreichen ihn nicht.
3. Erst Token, dann Bauteile. Wer eine Farbe direkt in eine Regel
schreibt, baut die naechste Schichttorte.
Zwei Reviere, umgeschaltet ueber die Klasse am :
.app-immersive Spielerseiten — Blaugruen, Atmosphaere, Bewegung
.app-admin Teamseiten — dasselbe Geruest in ruhigem Orange
═══════════════════════════════════════════════════════════════════════ */
:root {
/* ─── Flaechen: fast schwarz mit einem Stich ins Blaugruene ─── */
--cc-bg-0: #030709; /* tiefste Ebene, unter allem */
--cc-bg-1: #05090c; /* Seitenhintergrund */
--cc-bg-2: #0a1114; /* Seitenleiste und Karten */
--cc-bg-3: #0e1619; /* angehoben: Hover, Einsaetze */
--cc-bg-4: #131d21; /* Eingabefelder */
--cc-bg-5: #18252a; /* aktiv gedrueckt */
/* ─── Kanten: nie schwarz, immer ein Hauch der Leitfarbe ─── */
--cc-bd-1: rgba(125, 211, 214, 0.075);
--cc-bd-2: rgba(125, 211, 214, 0.155);
--cc-bd-3: rgba(125, 211, 214, 0.30);
/* ─── Schrift ─── */
--cc-tx-1: #e9f4f2;
--cc-tx-2: #a8c2bf;
--cc-tx-3: #6f8b88;
--cc-tx-4: #47605e;
/* ─── Leitfarbe: Blaugruen ─── */
--cc-accent: #5eead4;
--cc-accent-hi: #99f6e4;
--cc-accent-lo: #2dd4bf;
--cc-accent-soft: rgba(94, 234, 212, 0.10);
--cc-accent-glow: rgba(94, 234, 212, 0.32);
--cc-accent-line: rgba(94, 234, 212, 0.42);
--cc-online: #34d399;
/* Radien: rund, aber nicht verspielt */
--r-xs: 8px; --r-sm: 11px; --r-md: 14px;
--r-lg: 18px; --r-xl: 22px; --r-pill: 999px;
--shell-gap: 0.85rem; /* Abstand der schwebenden Flaechen zum Rand */
}
/* Teamseiten: dasselbe Geruest, nur warm. Der :has()-Zugriff sitzt an
:root, damit der Seitenhintergrund am wirklich mitzieht. */
:root:has(body.app-admin) {
--cc-bd-1: rgba(245, 181, 99, 0.075);
--cc-bd-2: rgba(245, 181, 99, 0.155);
--cc-bd-3: rgba(245, 181, 99, 0.30);
--cc-tx-2: #d8c3a8;
--cc-tx-3: #9a8265;
--cc-tx-4: #6b5942;
--cc-accent: #f5b563;
--cc-accent-hi: #fbd9a8;
--cc-accent-lo: #e8a04a;
--cc-accent-soft: rgba(245, 181, 99, 0.10);
--cc-accent-glow: rgba(245, 181, 99, 0.30);
--cc-accent-line: rgba(245, 181, 99, 0.42);
}
/* ═══ Seitenhintergrund ═════════════════════════════════════════════
Kein Raster mehr. Zwei sehr weite, sehr schwache Lichtkegel geben
Tiefe, ohne dass irgendwo eine Kante sichtbar wird. */
:root {
--grad-bg:
radial-gradient(120vw 80vh at 78% -10%,
var(--cc-accent-soft) 0%, transparent 55%),
radial-gradient(90vw 70vh at 8% 108%,
rgba(45, 212, 191, 0.05) 0%, transparent 60%),
linear-gradient(178deg, var(--cc-bg-1) 0%, var(--cc-bg-0) 100%);
}
html {
background: var(--grad-bg) fixed;
background-color: var(--cc-bg-0);
/* Das alte Raster hat hier background-size/-position gesetzt und mit
!important festgenagelt. Beides muss zurueck auf den Normalwert,
sonst kacheln die Lichtkegel. */
background-size: auto !important;
background-position: 0 0 !important;
background-repeat: no-repeat !important;
}
body { background: transparent; }
/* ═══ Seitenleiste ══════════════════════════════════════════════════
Eigenstaendige, schwebende Karte — nicht buendig an der Kante. */
aside#sidebar {
width: 17.5rem;
background: linear-gradient(178deg, #0b1317 0%, var(--cc-bg-2) 55%, #080e11 100%);
border: 1px solid var(--cc-bd-1);
border-radius: var(--r-xl);
box-shadow:
0 24px 60px -20px rgba(0, 0, 0, 0.85),
inset 0 1px 0 rgba(255, 255, 255, 0.035);
overflow: hidden;
}
@media (min-width: 1024px) {
aside#sidebar {
top: var(--shell-gap);
height: calc(100vh - (2 * var(--shell-gap)));
margin: var(--shell-gap) 0 var(--shell-gap) var(--shell-gap);
}
}
/* Ein schwacher Lichtsaum an der Oberkante — die Flaeche wirkt sonst
wie ein aufgeklebtes Rechteck. */
aside#sidebar::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 180px;
background: radial-gradient(70% 100% at 50% 0%,
var(--cc-accent-soft) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
aside#sidebar > * { position: relative; z-index: 1; }
@media (max-width: 1023px) {
aside#sidebar {
margin: 0;
border-radius: 0;
border-top: 0;
border-bottom: 0;
border-left: 0;
}
}
/* ─── Markenzeile ─── */
aside#sidebar .brand-mark {
width: 2.4rem;
height: 2.4rem;
object-fit: contain;
filter: drop-shadow(0 0 14px var(--cc-accent-glow));
}
aside#sidebar .brand-mark + div > div:first-child {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cc-tx-1);
}
aside#sidebar .brand-mark + div > div:last-child {
font-size: 0.6rem;
letter-spacing: 0.24em;
color: var(--cc-tx-4);
}
/* ─── Revierwechsel (Spieler <-> Team) ───
Im Konzept ist das ein ruhiger, umrandeter Knopf — kein Leuchtbanner.
Die Farbverlaeufe stehen als Inline-Style im Template, deshalb hier
ausnahmsweise !important. Animiert wird daran nichts, das ist also
unbedenklich. */
aside#sidebar a[href="/admin"][style*="linear-gradient"],
aside#sidebar a[href="/"][style*="linear-gradient"] {
background: rgba(255, 255, 255, 0.022) !important;
border: 1px solid var(--cc-bd-2) !important;
border-radius: var(--r-md) !important;
box-shadow: none !important;
color: var(--cc-tx-2) !important;
font-weight: 500 !important;
font-size: 0.8rem !important;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
aside#sidebar a[href="/admin"][style*="linear-gradient"]:hover,
aside#sidebar a[href="/"][style*="linear-gradient"]:hover {
background: var(--cc-accent-soft) !important;
border-color: var(--cc-accent-line) !important;
color: var(--cc-accent-hi) !important;
}
/* ─── Gruppen-Ueberschriften ───
Im Konzept: winzige Versalien mit vorangestelltem Strich und einer
Haarlinie bis zum rechten Rand. */
aside#sidebar .nav-group > summary {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.25rem 0.35rem;
margin-top: 0.65rem;
font-size: 0.575rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--cc-tx-4);
cursor: pointer;
list-style: none;
user-select: none;
}
aside#sidebar .nav-group > summary::-webkit-details-marker { display: none; }
aside#sidebar .nav-group > summary::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--cc-bd-1), transparent);
}
/* Der Winkel ersetzt den Strich aus dem Konzept und zeigt zugleich an,
ob die Gruppe offen ist. */
aside#sidebar .nav-group-chevron {
font-size: 0.5rem;
color: var(--cc-tx-4);
transition: transform 200ms ease;
}
aside#sidebar .nav-group[open] > summary .nav-group-chevron {
transform: rotate(90deg);
}
/* ─── Navigationszeilen ─── */
aside#sidebar .nav-link {
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.5rem 0.7rem;
margin: 0.1rem 0;
border-radius: var(--r-sm);
border: 1px solid transparent;
font-size: 0.83rem;
font-weight: 500;
color: var(--cc-tx-2);
text-decoration: none;
transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
aside#sidebar .nav-link .nav-icon {
font-size: 0.95rem;
opacity: 0.62;
flex-shrink: 0;
transition: opacity 150ms ease;
}
aside#sidebar .nav-link:hover {
background: rgba(255, 255, 255, 0.032);
color: var(--cc-tx-1);
}
aside#sidebar .nav-link:hover .nav-icon { opacity: 0.95; }
aside#sidebar .nav-link.active {
background: linear-gradient(90deg,
var(--cc-accent-soft) 0%, rgba(255, 255, 255, 0.015) 100%);
border-color: var(--cc-bd-2);
color: var(--cc-tx-1);
font-weight: 600;
}
aside#sidebar .nav-link.active .nav-icon { opacity: 1; }
/* Der leuchtende Balken links. Bewusst OHNE !important, damit die
Pulsation nicht wieder ausgehebelt wird. */
aside#sidebar .nav-link.active::before {
content: "";
position: absolute;
left: -1px;
top: 50%;
transform: translateY(-50%);
width: 2.5px;
height: 58%;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg,
var(--cc-accent-hi), var(--cc-accent-lo));
box-shadow: 0 0 10px var(--cc-accent-glow);
animation: obs-rail 3.2s ease-in-out infinite;
}
@keyframes obs-rail {
0%, 100% { opacity: 0.72; box-shadow: 0 0 8px var(--cc-accent-glow); }
50% { opacity: 1; box-shadow: 0 0 16px var(--cc-accent-glow); }
}
/* ─── Fusszeile mit Benutzer ───────────────────────────────────────
Wieder `.user-pill` genau: mit `[class*="user-pill"]` bekamen die
beiden inneren Zeilen denselben Rahmen wie die Pille selbst. */
aside#sidebar .user-pill {
border-radius: var(--r-md) !important;
background: rgba(255, 255, 255, 0.028) !important;
border: 1px solid var(--cc-bd-1) !important;
}
/* ═══ Hauptbereich ══════════════════════════════════════════════════ */
main {
padding: var(--shell-gap) var(--shell-gap) 2.5rem;
}
/* ═══ Flaechen ══════════════════════════════════════════════════════
Karten schweben: weiche Kante, ein Lichtstreifen oben, kein Kasten. */
.cc-panel {
position: relative;
background: linear-gradient(178deg,
rgba(255, 255, 255, 0.028) 0%,
rgba(255, 255, 255, 0.008) 40%,
transparent 100%),
var(--cc-bg-2);
border: 1px solid var(--cc-bd-1);
border-radius: var(--r-lg);
box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.9);
}
/* Die Eckwinkel des alten Command-Center-Looks fallen ersatzlos weg. */
.cc-panel--tactical::before,
.cc-panel--tactical::after { content: none !important; }
.cc-panel--tactical { border-color: var(--cc-bd-2); }
/* ═══ Abschnittskoepfe ══════════════════════════════════════════════ */
.cc-section-head {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 1.9rem 0 0.9rem;
}
.cc-section-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cc-tx-2);
white-space: nowrap;
}
/* Haarlinie zwischen Titel und rechtem Pfad */
.cc-section-head::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--cc-bd-2), transparent 85%);
order: 1;
}
.cc-section-hint {
order: 2;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.63rem;
letter-spacing: 0.08em;
color: var(--cc-tx-4);
white-space: nowrap;
}
/* ═══ Pillen ════════════════════════════════════════════════════════ */
.cc-pill {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.6rem;
border-radius: var(--r-pill);
border: 1px solid var(--cc-bd-2);
background: rgba(255, 255, 255, 0.03);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cc-tx-3);
}
.cc-pill--accent {
border-color: var(--cc-accent-line);
background: var(--cc-accent-soft);
color: var(--cc-accent-hi);
}
/* Der Punkt vor ONLINE. Steht als ::before an der Pille, damit die
Vorlagen nichts zusaetzlich mitbringen muessen. */
.cc-pill--accent::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--cc-online);
box-shadow: 0 0 8px var(--cc-online);
}
/* ═══ Statuspunkt ═══════════════════════════════════════════════════ */
.cc-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--cc-online);
box-shadow: 0 0 10px var(--cc-online);
flex-shrink: 0;
}
.cc-dot--pulse { animation: obs-pulse 2.4s ease-in-out infinite; }
@keyframes obs-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.82); }
}
/* ═══ Schaltflaechen ════════════════════════════════════════════════ */
.cc-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 1rem;
border-radius: var(--r-sm);
border: 1px solid var(--cc-bd-2);
background: rgba(255, 255, 255, 0.03);
color: var(--cc-tx-2);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: background 150ms ease, border-color 150ms ease,
color 150ms ease, transform 150ms ease;
}
.cc-btn:hover {
background: var(--cc-accent-soft);
border-color: var(--cc-accent-line);
color: var(--cc-accent-hi);
transform: translateY(-1px);
}
.cc-btn--primary,
.cc-btn--tactical {
border-color: var(--cc-accent-line);
background: var(--cc-accent-soft);
color: var(--cc-accent-hi);
}
/* ═══ Eingabefelder ═════════════════════════════════════════════════ */
.cc-input {
width: 100%;
padding: 0.55rem 0.8rem;
border-radius: var(--r-sm);
border: 1px solid var(--cc-bd-1);
background: var(--cc-bg-4);
color: var(--cc-tx-1);
font-size: 0.85rem;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.cc-input:focus {
outline: none;
border-color: var(--cc-accent-line);
box-shadow: 0 0 0 3px var(--cc-accent-soft);
}
/* ═══════════════════════════════════════════════════════════════════
SEITENKOPF — die grosse Buehne aus dem Konzept
═══════════════════════════════════════════════════════════════════
Das Artwork liegt als eigene Ebene rechts und wird nach links
ausgeblendet, damit die Schrift lesbar bleibt. Fehlt die Bilddatei,
zeichnet der Browser die Ebene einfach nicht — die Lichtkegel
darunter tragen die Flaeche dann allein. Die Seite ist also in
beiden Faellen fertig, nicht kaputt. */
.pg-hero {
position: relative;
overflow: hidden;
min-height: 23rem;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2.4rem 2.6rem;
}
.pg-hero__art {
position: absolute;
inset: 0 0 0 18%;
background-image: var(--hero-art, none);
background-size: cover;
background-position: center right;
/* Das Artwork ist von Haus aus sehr dunkel — es darf deshalb kraeftig
stehen bleiben, sonst verschwindet es im Hintergrund. */
opacity: 0.92;
pointer-events: none;
z-index: 0;
/* Nur EINE Maske. Zwei Ebenen brauchen mask-composite, und die
Kurzform dafuer heisst bei -webkit- anders als im Standard —
stimmt eines von beiden nicht, faellt die ganze Ebene aus. */
-webkit-mask-image: linear-gradient(100deg,
transparent 12%, rgba(0,0,0,0.55) 38%, #000 68%);
mask-image: linear-gradient(100deg,
transparent 12%, rgba(0,0,0,0.55) 38%, #000 68%);
}
/* Ein dunkler Schleier unter der Schrift, damit sie auf jedem Motiv
lesbar bleibt — auch wenn spaeter ein helleres Bild eingesetzt wird. */
.pg-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(96deg,
var(--cc-bg-2) 4%, rgba(10, 17, 20, 0.82) 34%, transparent 62%);
pointer-events: none;
}
/* WICHTIG: das Artwork ausnehmen. Ohne :not() zieht diese Regel es aus
der absoluten Lage zurueck in den Textfluss — gleiche Spezifitaet,
aber spaeter notiert. Es hatte dann Hoehe 0 und war unsichtbar,
obwohl die Bilddatei sauber geladen wurde. */
.pg-hero > *:not(.pg-hero__art) { position: relative; z-index: 1; }
.pg-hero__eyebrow {
display: flex;
align-items: center;
gap: 0.55rem;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--cc-tx-3);
}
.pg-hero__title {
margin-top: 0.9rem;
font-size: clamp(1.9rem, 4vw, 2.9rem);
font-weight: 800;
line-height: 1.04;
letter-spacing: -0.025em;
color: var(--cc-tx-1);
}
.pg-hero__title .accent { color: var(--cc-accent); }
.pg-hero__sub {
margin-top: 0.8rem;
max-width: 30rem;
font-size: 0.86rem;
line-height: 1.6;
color: var(--cc-tx-3);
}
/* ─── Der Muenzstand: Medaillon links, Zahl gross daneben ─── */
.pg-coins {
display: inline-flex;
align-items: center;
gap: 1.15rem;
margin-top: 1.7rem;
padding: 0.95rem 1.6rem 0.95rem 1rem;
border: 1px solid var(--cc-bd-1);
border-radius: var(--r-lg);
background: linear-gradient(120deg,
rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
backdrop-filter: blur(6px);
}
.pg-coins__label {
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cc-tx-3);
}
.pg-coins__value {
font-size: 2rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--cc-accent);
}
.pg-coins__hint {
font-size: 0.58rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--cc-tx-4);
}
/* ═══════════════════════════════════════════════════════════════════
MEDAILLON — der runde Ring aus dem Konzept
═══════════════════════════════════════════════════════════════════ */
.medallion {
position: relative;
display: grid;
place-items: center;
width: 3.9rem;
height: 3.9rem;
flex-shrink: 0;
border-radius: 50%;
font-size: 1.45rem;
color: var(--cc-accent-hi);
background:
radial-gradient(circle at 50% 35%,
rgba(255, 255, 255, 0.07), transparent 62%),
var(--cc-bg-3);
box-shadow:
inset 0 0 0 1px var(--cc-bd-2),
inset 0 0 22px -6px var(--cc-accent-glow),
0 8px 22px -10px rgba(0, 0, 0, 0.9);
}
/* Der aeussere, duenne Ring — leicht abgesetzt, wie im Konzept. */
.medallion::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid var(--cc-bd-1);
}
.medallion img {
width: 62%;
height: 62%;
object-fit: contain;
filter: drop-shadow(0 0 8px var(--cc-accent-glow));
}
/* Strichzeichnungen statt Emoji. Emoji kommen als fertige Farbbilder aus
der Schriftart — bunt, uneinheitlich im Stil und nicht einfaerbbar.
Genau daran erkennt man den Unterschied zum Entwurf. */
.medallion svg {
width: 46%;
height: 46%;
fill: none;
stroke: var(--cc-accent-hi);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 7px var(--cc-accent-glow));
}
.medallion--lg { width: 4.6rem; height: 4.6rem; font-size: 1.7rem; }
/* ═══════════════════════════════════════════════════════════════════
AKTIONSKARTEN
═══════════════════════════════════════════════════════════════════ */
.act-card {
position: relative;
display: block;
overflow: hidden;
padding: 1.35rem 1.4rem 1.25rem;
text-decoration: none;
border-radius: var(--r-lg);
border: 1px solid var(--cc-bd-1);
background: linear-gradient(178deg,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.007) 45%,
transparent 100%),
var(--cc-bg-2);
box-shadow: 0 18px 44px -24px rgba(0, 0, 0, 0.9);
transition: border-color 200ms ease, transform 200ms ease,
box-shadow 200ms ease;
}
/* Der diagonale Lichtstrich unten rechts. Rein aus Verlaeufen — kein
Bild noetig, skaliert mit jeder Kartengroesse mit. */
.act-card::after {
content: "";
position: absolute;
right: -30%;
bottom: -55%;
width: 88%;
height: 130%;
background:
linear-gradient(58deg, transparent 44%,
var(--cc-accent-glow) 50%, transparent 56%),
linear-gradient(52deg, transparent 60%,
rgba(255, 255, 255, 0.10) 65%, transparent 70%);
opacity: 0.16;
pointer-events: none;
transition: opacity 260ms ease, transform 260ms ease;
}
.act-card:hover {
border-color: var(--cc-accent-line);
transform: translateY(-3px);
box-shadow: 0 26px 54px -22px rgba(0, 0, 0, 0.95),
0 0 0 1px var(--cc-accent-soft);
}
.act-card:hover::after {
opacity: 0.34;
transform: translate(-6%, -6%);
}
.act-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 1.1rem;
}
.act-card__title {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.055em;
text-transform: uppercase;
color: var(--cc-tx-1);
}
.act-card__desc {
margin-top: 0.45rem;
font-size: 0.79rem;
line-height: 1.55;
color: var(--cc-tx-3);
}
.act-card__open {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 1.05rem;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--cc-accent);
}
.act-card__open span:last-child {
transition: transform 200ms ease;
}
.act-card:hover .act-card__open span:last-child {
transform: translateX(4px);
}
/* ═══ Ruhebeduerfnis achten ═════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
OBSIDIAN II — Angleichung an das Konzeptbild (2026-08-04, zweiter Gang)
═══════════════════════════════════════════════════════════════════════
Jaleels Kritik am ersten Gang, Punkt fuer Punkt:
„Der Dino und der Hintergrund werden foermlich eins"
-> Eine einzige lineare Maske blendete nur nach links aus. Oben,
rechts und unten stand eine harte Bildkante. Jetzt eine runde
Maske, die in ALLE Richtungen ausblendet, plus Entsaettigung
und ein Schleier in Flaechenfarbe darueber.
„Die Navigationsleiste sieht komplett anders aus"
-> Emoji sind raus (siehe nav_icon in base.html), die Zeilen
bekommen mehr Luft, die Gruppentitel einen vorangestellten
Strich wie im Entwurf.
„Der aktive Tab hat diese Energiewellen-Animation"
-> Wandernder Verlauf ueber background-position. Bewusst OHNE
!important: eine Animation verliert dagegen.
═══════════════════════════════════════════════════════════════════════ */
/* ─── Sinnbilder der Navigation ─────────────────────────────────────── */
aside#sidebar .nav-icon {
display: grid;
place-items: center;
width: 1.15rem;
height: 1.15rem;
}
aside#sidebar .nav-icon svg {
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
aside#sidebar .nav-link {
padding: 0.55rem 0.75rem;
margin: 0.14rem 0;
color: var(--cc-tx-3);
}
aside#sidebar .nav-link:hover { color: var(--cc-tx-1); }
aside#sidebar .nav-link.active { color: var(--cc-tx-1); }
aside#sidebar .nav-link.active .nav-icon { color: var(--cc-accent-hi); }
/* ─── Gruppentitel: vorangestellter Strich wie im Entwurf ───────────── */
aside#sidebar .nav-group > summary::before {
content: "";
width: 7px;
height: 1px;
background: var(--cc-tx-4);
flex-shrink: 0;
}
aside#sidebar .nav-group-chevron { display: none; }
aside#sidebar .nav-group > summary { margin-top: 1.1rem; }
/* ─── Aktiver Punkt: die Energiewelle ───────────────────────────────
Ein breiter Verlauf wandert langsam durch die Zeile. Dieselbe Idee wie
der Plasma-Hintergrund der Roadmap, nur in einer Zeile statt im Canvas. */
aside#sidebar .nav-link.active {
background-color: transparent;
background-image: linear-gradient(100deg,
transparent 0%,
var(--cc-accent-soft) 22%,
rgba(125, 232, 240, 0.20) 42%,
var(--cc-accent-soft) 62%,
transparent 100%);
background-size: 260% 100%;
background-repeat: no-repeat;
border-color: var(--cc-bd-2);
animation: obs-wave 5.5s linear infinite;
}
@keyframes obs-wave {
from { background-position: 130% 0; }
to { background-position: -30% 0; }
}
/* ─── Schlanke Bildlaufleiste ───────────────────────────────────────── */
aside#sidebar nav { scrollbar-width: thin; scrollbar-color: var(--cc-bd-2) transparent; }
aside#sidebar nav::-webkit-scrollbar { width: 5px; }
aside#sidebar nav::-webkit-scrollbar-track { background: transparent; }
aside#sidebar nav::-webkit-scrollbar-thumb {
background: var(--cc-bd-2);
border-radius: 3px;
}
/* ─── Fusszeile ─────────────────────────────────────────────────────
Die Benutzerzeile ist zweizeilig: oben Bild und Name
(`.user-pill__id`), darunter die Knopfleiste (`.user-pill__actions`).
ACHTUNG BEI AENDERUNGEN AN DER STRUKTUR: Dieser Block hat frueher auf
DIREKTE Kinder der Pille gezielt (`> div:first-child`, `> button`).
Das galt, solange alles in einer Reihe stand. Nach dem Umbau auf zwei
Zeilen traf `> div:first-child` nicht mehr das Bild, sondern die ganze
Namenszeile — und klemmte sie auf 2rem. Der Name hatte dadurch 0px
Breite und war schlicht weg. Die Knoepfe wiederum waren keine direkten
Kinder mehr, ihre Verkleinerung griff nicht, und die Leiste wurde zu
hoch. Deshalb zeigen die Selektoren jetzt auf die beiden Zeilen. */
aside#sidebar .user-pill { gap: 0.4rem; padding: 0.55rem 0.6rem; }
/* Das Bild — nur innerhalb der Namenszeile. */
aside#sidebar .user-pill__id img,
aside#sidebar .user-pill__id > div:first-child {
width: 2rem !important;
height: 2rem !important;
}
/* Die Werkzeug-Zeichen in der unteren Zeile. */
aside#sidebar .user-pill__actions > button,
aside#sidebar .user-pill__actions > a {
padding: 0.25rem !important;
font-size: 0.72rem !important;
width: 1.7rem;
height: 1.7rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Die Glocke sitzt oben in der Namenszeile und darf etwas groesser
sein — sie traegt die Zahl und wird am haeufigsten angesehen. */
aside#sidebar .user-pill__id .bell-btn {
padding: 0.3rem !important;
font-size: 0.82rem !important;
width: 1.9rem;
height: 1.9rem;
}
/* ═══ Der Kopf: Bild und Flaeche verschmelzen ═══════════════════════ */
.pg-hero__art {
inset: 0;
opacity: 1;
/* Eine RUNDE Maske statt einer linearen. Sie blendet nach oben, rechts
und unten genauso aus wie nach links — deshalb ist nirgends mehr
eine Bildkante zu sehen. */
-webkit-mask-image: radial-gradient(78% 108% at 82% 42%,
#000 8%, rgba(0,0,0,0.82) 34%, rgba(0,0,0,0.35) 58%, transparent 82%);
mask-image: radial-gradient(78% 108% at 82% 42%,
#000 8%, rgba(0,0,0,0.82) 34%, rgba(0,0,0,0.35) 58%, transparent 82%);
/* Das Motiv ist von Haus aus kraeftig blau. Entsaettigt und abgedunkelt
liegt es auf derselben Tonlage wie die Flaeche. */
filter: saturate(0.62) brightness(0.72) contrast(1.05);
}
/* Schleier in Flaechenfarbe. Liegt UEBER dem Bild und unter der Schrift und
zieht das Motiv endgueltig in die Flaeche. */
.pg-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(94deg,
var(--cc-bg-2) 2%,
rgba(10, 17, 20, 0.88) 26%,
rgba(10, 17, 20, 0.42) 48%,
transparent 72%),
radial-gradient(120% 80% at 50% 118%,
var(--cc-bg-2) 0%, transparent 58%),
radial-gradient(110% 70% at 50% -18%,
var(--cc-bg-2) 0%, transparent 55%);
}
.pg-hero::before { display: none; }
.pg-hero__title { font-size: clamp(2rem, 4.4vw, 3.1rem); }
/* ═══ Medaillon: sichtbarer Ring wie im Entwurf ═════════════════════ */
.medallion {
background:
radial-gradient(circle at 50% 30%,
rgba(125, 232, 240, 0.10), transparent 60%),
var(--cc-bg-3);
box-shadow:
inset 0 0 0 1px rgba(125, 232, 240, 0.28),
inset 0 0 26px -8px var(--cc-accent-glow),
0 8px 22px -10px rgba(0, 0, 0, 0.9);
}
.medallion::after {
inset: -5px;
border: 1px solid rgba(125, 232, 240, 0.16);
}
/* Ein zweiter, angeschnittener Ring — im Entwurf sitzt aussen ein feiner
Bogen, der den Kreis nicht ganz schliesst. */
.medallion::before {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
border: 1px solid transparent;
border-top-color: var(--cc-accent);
border-right-color: var(--cc-accent-line);
opacity: 0.75;
transform: rotate(-28deg);
}
.act-card:hover .medallion::before {
transition: transform 700ms cubic-bezier(.2,.8,.2,1);
transform: rotate(152deg);
}
/* ═══ Aktionskarten: die Energietextur ══════════════════════════════ */
.act-card::after {
right: -22%;
bottom: -48%;
width: 82%;
height: 125%;
background:
linear-gradient(56deg, transparent 42%,
rgba(125, 232, 240, 0.55) 50%, transparent 58%),
linear-gradient(50deg, transparent 56%,
rgba(160, 245, 255, 0.30) 62%, transparent 68%),
linear-gradient(62deg, transparent 66%,
rgba(94, 234, 212, 0.22) 71%, transparent 76%);
opacity: 0.30;
filter: blur(0.4px);
}
.act-card:hover::after { opacity: 0.62; }
.act-card__open { color: var(--cc-accent-hi); }
/* ═══ Ueberschrift des Abschnitts mit Blitz wie im Entwurf ══════════ */
.cc-section-title::before {
content: "⚡";
font-size: 0.85em;
color: var(--cc-accent);
margin-right: 0.1rem;
}
.cc-section-title--plain::before { content: none; }
/* ═══════════════════════════════════════════════════════════════════════
OBSIDIAN III — nach dem ersten eigenen Blick aufs Ergebnis
═══════════════════════════════════════════════════════════════════════
Ab hier sehe ich die Seite selbst (headless Chrome). Was der Vergleich
mit dem Konzeptbild zeigte:
* Das Blitzzeichen vor „QUICK ACTIONS" war wieder ein Emoji und wurde
orange gezeichnet — genau der Bruch, der vorher schon gestoert hat.
* Die Medaillon-Ringe leuchteten zu kraeftig und zu gruen, das
Sinnbild darin war zu klein. Im Entwurf traegt das Zeichen, nicht
der Ring.
* Der Gesamtton lag zu weit im Gruenen. Das Konzept ist kuehler.
* Dem aktiven Punkt fehlte die helle Kappe am linken Rand.
═══════════════════════════════════════════════════════════════════════ */
:root {
/* Kuehler. Vorher lag die Leitfarbe im Minzgruen, das Konzept ist ein
Blaugruen mit deutlich mehr Blauanteil. */
--cc-accent: #67e8f9;
--cc-accent-hi: #a5f3fc;
--cc-accent-lo: #22d3ee;
--cc-accent-soft: rgba(103, 232, 249, 0.10);
--cc-accent-glow: rgba(103, 232, 249, 0.30);
--cc-accent-line: rgba(103, 232, 249, 0.38);
--cc-bd-1: rgba(125, 211, 230, 0.075);
--cc-bd-2: rgba(125, 211, 230, 0.15);
--cc-bd-3: rgba(125, 211, 230, 0.28);
--cc-tx-1: #eaf4f7;
--cc-tx-2: #a9c2ca;
--cc-tx-3: #718e97;
--cc-tx-4: #4a636b;
}
/* ─── Blitz vor Abschnittstiteln: gezeichnet statt Emoji ───────────── */
.cc-section-title::before {
content: "";
width: 0.72em;
height: 0.95em;
margin-right: 0.15rem;
flex-shrink: 0;
background-color: var(--cc-accent);
/* Als Maske, damit das Zeichen die Leitfarbe annimmt und im Team-
Bereich automatisch orange wird. */
-webkit-mask: no-repeat center / contain
url('data:image/svg+xml;utf8,');
mask: no-repeat center / contain
url('data:image/svg+xml;utf8,');
}
/* ─── Medaillon: Zeichen traegt, Ring tritt zurueck ────────────────── */
.medallion {
width: 3.4rem;
height: 3.4rem;
background:
radial-gradient(circle at 50% 32%,
rgba(125, 211, 230, 0.09), transparent 62%),
rgba(255, 255, 255, 0.028);
box-shadow:
inset 0 0 0 1px rgba(125, 211, 230, 0.14),
inset 0 0 24px -10px var(--cc-accent-glow),
0 6px 18px -10px rgba(0, 0, 0, 0.9);
}
.medallion--lg { width: 4.2rem; height: 4.2rem; }
/* Aussenring deutlich zurueckgenommen */
.medallion::after {
inset: -4px;
border: 1px solid rgba(125, 211, 230, 0.10);
}
.medallion::before {
inset: -4px;
border-top-color: rgba(103, 232, 249, 0.55);
border-right-color: rgba(103, 232, 249, 0.18);
opacity: 1;
}
/* Das Zeichen selbst groesser und heller — es ist der Inhalt. */
.medallion svg {
width: 54%;
height: 54%;
stroke: var(--cc-accent-hi);
stroke-width: 1.5;
filter: drop-shadow(0 0 9px var(--cc-accent-glow));
}
/* ─── Aktiver Punkt: helle Kappe links wie im Entwurf ──────────────── */
aside#sidebar .nav-link.active::before {
left: -1px;
width: 3px;
height: 62%;
border-radius: 0 4px 4px 0;
background: linear-gradient(180deg,
var(--cc-accent-hi), var(--cc-accent-lo));
box-shadow:
0 0 12px var(--cc-accent),
0 0 26px var(--cc-accent-glow);
}
/* Der abgesetzte Punkt links ausserhalb der Zeile. Im Konzept sitzt dort
ein kleiner Leuchtpunkt, der die aktive Zeile ausserhalb markiert. */
aside#sidebar .nav-link.active::after {
content: "";
position: absolute;
left: -0.62rem;
top: 50%;
width: 5px;
height: 5px;
margin-top: -2.5px;
border-radius: 50%;
background: var(--cc-accent-hi);
box-shadow: 0 0 10px var(--cc-accent), 0 0 20px var(--cc-accent-glow);
animation: obs-pulse 2.6s ease-in-out infinite;
}
aside#sidebar .nav-link.active {
border-color: rgba(125, 211, 230, 0.18);
}
/* ─── Kopf: das Motiv darf praesenter stehen ───────────────────────── */
.pg-hero__art {
filter: saturate(0.72) brightness(0.9) contrast(1.06);
-webkit-mask-image: radial-gradient(74% 105% at 84% 40%,
#000 12%, rgba(0,0,0,0.9) 38%, rgba(0,0,0,0.45) 62%, transparent 86%);
mask-image: radial-gradient(74% 105% at 84% 40%,
#000 12%, rgba(0,0,0,0.9) 38%, rgba(0,0,0,0.45) 62%, transparent 86%);
}
.pg-hero::after {
background:
linear-gradient(94deg,
var(--cc-bg-2) 0%,
rgba(10, 17, 20, 0.92) 22%,
rgba(10, 17, 20, 0.48) 44%,
transparent 68%),
radial-gradient(120% 76% at 50% 120%,
var(--cc-bg-2) 0%, transparent 56%),
radial-gradient(110% 64% at 50% -20%,
var(--cc-bg-2) 0%, transparent 52%);
}
/* ─── Pillen: kuehler, weniger Signalgruen ─────────────────────────── */
.cc-pill--accent {
border-color: rgba(125, 211, 230, 0.30);
background: rgba(125, 211, 230, 0.07);
color: var(--cc-accent-hi);
}
.cc-pill--accent::before {
background: var(--cc-online);
box-shadow: 0 0 7px var(--cc-online);
}
/* ─── Kartentextur kuehler ─────────────────────────────────────────── */
.act-card::after {
background:
linear-gradient(56deg, transparent 42%,
rgba(125, 211, 230, 0.50) 50%, transparent 58%),
linear-gradient(50deg, transparent 56%,
rgba(165, 243, 252, 0.26) 62%, transparent 68%),
linear-gradient(62deg, transparent 66%,
rgba(103, 232, 249, 0.20) 71%, transparent 76%);
}
/* ─── Markenzeichen: das Logo traegt die Ecke ──────────────────────── */
aside#sidebar .brand-mark {
width: 2.6rem;
height: 2.6rem;
filter: drop-shadow(0 0 16px var(--cc-accent-glow))
saturate(0.55) brightness(1.15);
}
/* ── Nachbesserung nach dem zweiten Blick ──────────────────────────── */
/* Der Muenzstand stand ueber die volle Breite. `inline-flex` genuegt im
Spalten-Flexlayout nicht — die Streckung kommt von align-items:stretch
des Elternteils, nicht von der Anzeigeart. */
.pg-coins { align-self: flex-start; }
/* Das Blitzzeichen war als Maske zu klein geraten und wurde zum Punkt.
Groesser, und die Maske ohne Kurzform gesetzt, damit Groesse und
Wiederholung nicht von der Kurzform ueberschrieben werden. */
.cc-section-title::before {
width: 0.95em;
height: 1.05em;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-image: url('data:image/svg+xml;utf8,');
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
/* ═══════════════════════════════════════════════════════════════════════
OBSIDIAN IV — Energiefluss statt harter Kanten
═══════════════════════════════════════════════════════════════════════
Jaleels vier Punkte:
1. Der Dino war oben angeschnitten. `cover` skaliert auf die BREITE
der Flaeche; bei 3.9:1 Seitenverhaeltnis gegen 1.8:1 des Bildes
fallen oben und unten je ~210px weg — genau dort ist der Kopf.
Jetzt `auto 100%`: die Hoehe passt sich an, beschnitten wird nur
seitlich, und dort liegt ohnehin die Maske.
2./3./4. Die Baender waren Rechtecke mit harten Enden, auf jeder Karte
gleich. Das Roadmap-Plasma macht es anders: seine Schlieren laufen
an BEIDEN Enden aus (`taper = sin(f * PI)`), ueberlagern sich in
mehreren Geschwindigkeiten und wiederholen sich nie exakt.
Hier nachgebaut mit mehreren Verlaufsebenen, die in einem einzigen
Bildlauf unterschiedlich schnell und teils gegenlaeufig wandern —
background-position ist EINE Eigenschaft, deshalb muessen alle
Ebenen in denselben Schluesselbildern stehen. Getrennte Animationen
wuerden sich gegenseitig ueberschreiben.
═══════════════════════════════════════════════════════════════════════ */
/* ─── 1) Der Kopf bleibt im Bild ───────────────────────────────────── */
.pg-hero__art {
background-size: auto 100%;
background-position: right center;
background-repeat: no-repeat;
}
/* ─── 2) Aktiver Punkt: Schlieren statt Balken ─────────────────────── */
aside#sidebar .nav-link.active {
background-color: rgba(103, 232, 249, 0.045);
background-image:
linear-gradient(96deg, transparent 4%,
rgba(165, 243, 252, 0.24) 30%, rgba(103, 232, 249, 0.08) 46%,
transparent 66%),
linear-gradient(88deg, transparent 14%,
rgba(103, 232, 249, 0.15) 44%, transparent 72%),
linear-gradient(104deg, transparent 26%,
rgba(34, 211, 238, 0.13) 52%, transparent 80%);
background-size: 210% 100%, 320% 100%, 260% 100%;
background-repeat: no-repeat;
animation: obs-flow 9s linear infinite;
}
@keyframes obs-flow {
0% { background-position: 128% 0, -70% 0, 104% 0; }
100% { background-position: -70% 0, 128% 0, -84% 0; }
}
/* Der Leuchtpunkt sass zu weit links und wurde vom Ueberlauf der
Navigationsspalte abgeschnitten. Jetzt vollstaendig innerhalb. */
aside#sidebar .nav-link.active::after {
left: -0.34rem;
width: 4px;
height: 4px;
margin-top: -2px;
}
/* ─── 3) Kartenschimmer: an beiden Enden auslaufend, je Karte anders ─ */
.act-card::after {
/* Vorgaben; die Karten weiter unten weichen davon ab. */
--wa: 56deg; /* Neigung */
--wx: -22%; /* Versatz rechts */
--wy: -48%; /* Versatz unten */
--wo: 0.34; /* Deckkraft */
right: var(--wx);
bottom: var(--wy);
width: 92%;
height: 135%;
opacity: var(--wo);
background:
linear-gradient(var(--wa), transparent 34%,
rgba(125, 211, 230, 0.50) 50%, transparent 66%),
linear-gradient(calc(var(--wa) - 6deg), transparent 48%,
rgba(165, 243, 252, 0.26) 60%, transparent 72%),
linear-gradient(calc(var(--wa) + 7deg), transparent 58%,
rgba(103, 232, 249, 0.20) 69%, transparent 80%);
/* Die harte Oberkante des Kastens verschwindet: die Ebene laeuft nach
oben hin aus, genau wie die Schlieren der Roadmap an ihren Enden. */
-webkit-mask-image: linear-gradient(to top, #000 28%, transparent 86%);
mask-image: linear-gradient(to top, #000 28%, transparent 86%);
filter: blur(0.5px);
}
/* Fuenf Auspraegungen statt drei — bei drei Spalten liegt sonst in jeder
Zeile dieselbe Reihenfolge und das Muster wird wieder sichtbar. */
.act-card:nth-child(5n+2)::after { --wa: 43deg; --wx: -34%; --wy: -40%; --wo: 0.26; }
.act-card:nth-child(5n+3)::after { --wa: 64deg; --wx: -14%; --wy: -56%; --wo: 0.40; }
.act-card:nth-child(5n+4)::after { --wa: 51deg; --wx: -28%; --wy: -34%; --wo: 0.30; }
.act-card:nth-child(5n+5)::after { --wa: 71deg; --wx: -8%; --wy: -50%; --wo: 0.22; }
/* ─── 4) Beim Ueberfahren: der Fluss zieht durch die Karte ─────────── */
.act-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
background:
linear-gradient(100deg, transparent 8%,
rgba(165, 243, 252, 0.16) 34%, rgba(103, 232, 249, 0.06) 50%,
transparent 72%),
linear-gradient(92deg, transparent 22%,
rgba(34, 211, 238, 0.10) 52%, transparent 80%);
background-size: 240% 100%, 330% 100%;
background-repeat: no-repeat;
background-position: 130% 0, -80% 0;
transition: opacity 320ms ease;
}
.act-card:hover::before {
opacity: 1;
animation: obs-card-flow 3.4s linear infinite;
}
@keyframes obs-card-flow {
0% { background-position: 130% 0, -80% 0; }
100% { background-position: -80% 0, 130% 0; }
}
/* Der Inhalt muss ueber den beiden Lichtebenen liegen. Pseudoelemente sind
keine Kinder, die Regel trifft sie also nicht — anders als beim Kopf,
wo genau das den Dino unsichtbar gemacht hat. */
.act-card > * { position: relative; z-index: 1; }
/* ─── Der drehende Ring am Sinnbild entfaellt ──────────────────────── */
.act-card:hover .medallion::before {
transform: rotate(-28deg);
transition: none;
}
/* ── Schimmer wieder auf Sichtbarkeit gezogen ──────────────────────────
Die Maske nach oben plus die abgesenkten Deckkraft-Werte hatten die
Lichtbaender fast getilgt. Sie sollen deutlich stehen — nur eben je
Karte anders und ohne harte Oberkante. Schmalere Baender geben ihnen
ausserdem wieder die Form eines Strahls statt eines Nebelflecks. */
.act-card::after {
--wo: 0.62;
background:
linear-gradient(var(--wa), transparent 40%,
rgba(140, 220, 240, 0.82) 50%, transparent 60%),
linear-gradient(calc(var(--wa) - 7deg), transparent 52%,
rgba(180, 246, 255, 0.42) 60%, transparent 69%),
linear-gradient(calc(var(--wa) + 8deg), transparent 62%,
rgba(103, 232, 249, 0.32) 70%, transparent 78%);
filter: blur(0.3px);
-webkit-mask-image: linear-gradient(to top, #000 34%, transparent 92%);
mask-image: linear-gradient(to top, #000 34%, transparent 92%);
}
.act-card:nth-child(5n+2)::after { --wo: 0.46; }
.act-card:nth-child(5n+3)::after { --wo: 0.70; }
.act-card:nth-child(5n+4)::after { --wo: 0.54; }
.act-card:nth-child(5n+5)::after { --wo: 0.40; }
.act-card:hover::after { opacity: 0.9; }
/* ═══════════════════════════════════════════════════════════════════════
OBSIDIAN V — Kante, Endlosfluss, Hintergrundbewegung
═══════════════════════════════════════════════════════════════════════ */
/* ─── 1) Die harte Bildkante ────────────────────────────────────────
`auto 100%` rettete zwar den Kopf, machte die Ebene aber schmaler als
ihren Kasten: das Bild endete mitten in der Flaeche mit einer senkrechten
Kante, waehrend die Maske viel weiter links erst auslief — sie hatte dort
nichts mehr auszublenden.
Jetzt bekommt die Ebene das Seitenverhaeltnis des Bildes (1400x768).
`cover` fuellt sie damit exakt aus, es gibt keine bildeigene Kante mehr,
und die Maske arbeitet innerhalb des Motivs. Das haelt bei JEDER
Fenstergroesse — vorher hing das Ergebnis an meiner Testaufloesung. */
.pg-hero__art {
top: 0;
bottom: 0;
right: 0;
left: auto;
width: auto;
height: 100%;
aspect-ratio: 1400 / 768;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-mask-image: radial-gradient(86% 116% at 72% 46%,
#000 12%, rgba(0,0,0,0.74) 44%, rgba(0,0,0,0.30) 66%, transparent 86%);
mask-image: radial-gradient(86% 116% at 72% 46%,
#000 12%, rgba(0,0,0,0.74) 44%, rgba(0,0,0,0.30) 66%, transparent 86%);
}
/* ─── 2) Endlosfluss ohne Ruckler ───────────────────────────────────
Vorher lief die Ebene von A nach B und sprang zurueck — das war der
sichtbare Ruck.
Jetzt kacheln die Ebenen (`repeat-x`) und die Bewegung betraegt GENAU
eine Kachelbreite. Rechnung: bei `background-size: 200%` ist die Kachel
doppelt so breit wie das Element. Ein Prozentwert p in
background-position verschiebt um p x (Elementbreite - Kachelbreite),
also p x (W - 2W) = -pW. Fuer p = -200% ergibt das +2W — exakt eine
Kachel. Anfang und Ende sind damit deckungsgleich, der Uebergang ist
nicht wahrnehmbar.
Alle drei Ebenen haben deshalb dieselbe Kachelbreite; unterschiedlich
sind Richtung und Vielfaches, was den Ueberlagerungen ihre unregelmaessige
Wirkung gibt. */
aside#sidebar .nav-link.active {
background-size: 200% 100%, 200% 100%, 200% 100%;
background-repeat: repeat-x;
animation: obs-flow 14s linear infinite;
}
@keyframes obs-flow {
from { background-position: 0% 0, 0% 0, 0% 0; }
to { background-position: -200% 0, 200% 0, -400% 0; }
}
/* ─── 3) Der Hintergrund atmet ──────────────────────────────────────
Sehr langsam und sehr schwach. `alternate` laeuft hin und zurueck,
dadurch gibt es keinen Rueckssprung. Nur verschoben und skaliert wird,
nicht neu gezeichnet — das kostet praktisch keine Rechenzeit. */
body::before {
content: "";
position: fixed;
inset: -25%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(38% 42% at 28% 30%,
rgba(103, 232, 249, 0.055), transparent 68%),
radial-gradient(34% 38% at 76% 66%,
rgba(45, 212, 191, 0.045), transparent 70%),
radial-gradient(30% 30% at 55% 88%,
rgba(56, 189, 248, 0.035), transparent 72%);
animation: obs-breathe 54s ease-in-out infinite alternate;
}
@keyframes obs-breathe {
from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
to { transform: translate3d(3%, 2%, 0) scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
body::before { animation: none; }
}
/* ═══ Hintergrund: spuerbar, aber nicht aufdringlich ═══════════════════
Vorher war die Bewegung so schwach, dass man sie erst beim Suchen fand.
Kraeftigere Lichtkegel, groesserer Weg, kuerzere Runde — bleibt aber
unter der Schwelle, an der es vom Inhalt ablenkt. `alternate` laeuft hin
und zurueck, deshalb gibt es keinen Rueckssprung. */
body::before {
background:
radial-gradient(42% 46% at 26% 28%,
rgba(103, 232, 249, 0.115), transparent 66%),
radial-gradient(38% 42% at 78% 64%,
rgba(45, 212, 191, 0.095), transparent 68%),
radial-gradient(34% 34% at 52% 92%,
rgba(56, 189, 248, 0.075), transparent 70%);
animation: obs-breathe 34s ease-in-out infinite alternate;
}
@keyframes obs-breathe {
from { transform: translate3d(-5%, -3.5%, 0) scale(1); }
to { transform: translate3d(6%, 4%, 0) scale(1.16); }
}
/* ═══ Das Tor zur anderen Seite ════════════════════════════════════════
Der Knopf traegt die Farbe des ZIELS, nicht die der aktuellen Seite:
auf den Spielerseiten fuehrt er ins Team-Panel, also orange; im
Team-Panel zurueck zu den Spielerseiten, also blaugruen. Ein Blick
genuegt, um zu wissen wohin es geht.
Die Farbverlaeufe stehen als Inline-Style in der Vorlage, deshalb hier
!important. Animiert wird daran nichts, das ist also unbedenklich. */
aside#sidebar a[href="/admin"][style*="linear-gradient"] {
background: linear-gradient(100deg,
rgba(245, 181, 99, 0.16), rgba(245, 181, 99, 0.05)) !important;
border: 1px solid rgba(245, 181, 99, 0.42) !important;
color: #fbd9a8 !important;
box-shadow: 0 0 22px -12px rgba(245, 181, 99, 0.7) !important;
}
aside#sidebar a[href="/admin"][style*="linear-gradient"]:hover {
background: linear-gradient(100deg,
rgba(245, 181, 99, 0.26), rgba(245, 181, 99, 0.09)) !important;
border-color: rgba(245, 181, 99, 0.65) !important;
color: #fde6c4 !important;
box-shadow: 0 0 30px -10px rgba(245, 181, 99, 0.85) !important;
}
aside#sidebar a[href="/"][style*="linear-gradient"] {
background: linear-gradient(100deg,
rgba(103, 232, 249, 0.16), rgba(103, 232, 249, 0.05)) !important;
border: 1px solid rgba(103, 232, 249, 0.42) !important;
color: #a5f3fc !important;
box-shadow: 0 0 22px -12px rgba(103, 232, 249, 0.7) !important;
}
aside#sidebar a[href="/"][style*="linear-gradient"]:hover {
background: linear-gradient(100deg,
rgba(103, 232, 249, 0.26), rgba(103, 232, 249, 0.09)) !important;
border-color: rgba(103, 232, 249, 0.65) !important;
color: #cffafe !important;
box-shadow: 0 0 30px -10px rgba(103, 232, 249, 0.85) !important;
}
/* Der Lichtstrahl tritt hinter die Steintextur zurueck — zwei kraeftige
Muster auf derselben Flaeche wuerden sich gegenseitig zerlegen. */
.act-card::after { opacity: 0.22; }
.act-card:nth-child(5n+2)::after { opacity: 0.16; }
.act-card:nth-child(5n+3)::after { opacity: 0.26; }
.act-card:nth-child(5n+4)::after { opacity: 0.19; }
.act-card:nth-child(5n+5)::after { opacity: 0.14; }
.act-card:hover::after { opacity: 0.4; }
/* ═══ Steinerne Textur auf den Aktionskarten ═════════════════
Erzeugt mit tools/gen_texture.py — dort steht auch, warum.
Kurz: `feTurbulence` liefert fraktales Rauschen, `seed` gibt jeder
Kachel eine eigene Struktur aus derselben Formel. Waagerecht viel
niedrigere Frequenz als senkrecht ergibt langgezogene Schlieren,
also geschichteten Fels statt gleichmaessigem Grieseln. Die
feColorMatrix schneidet ueber einen Schwellwert alles Dunkle weg;
sichtbar bleiben nur die hellen Kaemme — die leuchtenden Adern.
Von Hand gemalte Verlaeufe koennen das nicht: sie wiederholen sich
sichtbar, und fuenf Varianten waeren fuenfmal dieselbe Idee. */
.act-card__stone {
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
pointer-events: none;
background-size: cover;
background-position: center;
mix-blend-mode: screen;
opacity: 0.40;
/* Sammelt sich unten rechts und laeuft nach links oben aus:
die Textzone bleibt frei, und an der Kartenkante entsteht
keine sichtbare Abbruchkante. Beide Schreibweisen MUESSEN
dieselbe Geometrie tragen — sonst sieht die Karte je nach
Browser anders aus. */
-webkit-mask-image: radial-gradient(84% 104% at 97% 106%,
#000 0%, rgba(0,0,0,0.6) 30%, transparent 66%);
mask-image: radial-gradient(84% 104% at 97% 106%,
#000 0%, rgba(0,0,0,0.6) 30%, transparent 66%);
transition: opacity 380ms ease;
}
.act-card:hover .act-card__stone { opacity: 0.68; }
.act-card .act-card__stone {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27520%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27t%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.005%200.034%27%20numOctaves%3D%275%27%20seed%3D%273%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27luminanceToAlpha%27%20result%3D%27l%27%2F%3E%3CfeComponentTransfer%20in%3D%27l%27%20result%3D%27c%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%275.4%27%20intercept%3D%27-2.55%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeFlood%20flood-color%3D%27%237fe4f7%27%20result%3D%27f%27%2F%3E%3CfeComposite%20in%3D%27f%27%20in2%3D%27c%27%20operator%3D%27in%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27520%27%20height%3D%27420%27%20filter%3D%27url%28%23t%29%27%2F%3E%3C%2Fsvg%3E");
}
.act-card:nth-child(5n+2) .act-card__stone {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27520%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27t%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.008%200.027%27%20numOctaves%3D%275%27%20seed%3D%2717%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27luminanceToAlpha%27%20result%3D%27l%27%2F%3E%3CfeComponentTransfer%20in%3D%27l%27%20result%3D%27c%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%274.6%27%20intercept%3D%27-2.15%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeFlood%20flood-color%3D%27%236ad8f0%27%20result%3D%27f%27%2F%3E%3CfeComposite%20in%3D%27f%27%20in2%3D%27c%27%20operator%3D%27in%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27520%27%20height%3D%27420%27%20filter%3D%27url%28%23t%29%27%2F%3E%3C%2Fsvg%3E");
}
.act-card:nth-child(5n+3) .act-card__stone {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27520%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27t%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.004%200.042%27%20numOctaves%3D%276%27%20seed%3D%2741%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27luminanceToAlpha%27%20result%3D%27l%27%2F%3E%3CfeComponentTransfer%20in%3D%27l%27%20result%3D%27c%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%276.0%27%20intercept%3D%27-2.95%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeFlood%20flood-color%3D%27%238eecff%27%20result%3D%27f%27%2F%3E%3CfeComposite%20in%3D%27f%27%20in2%3D%27c%27%20operator%3D%27in%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27520%27%20height%3D%27420%27%20filter%3D%27url%28%23t%29%27%2F%3E%3C%2Fsvg%3E");
}
.act-card:nth-child(5n+4) .act-card__stone {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27520%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27t%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.01%200.023%27%20numOctaves%3D%274%27%20seed%3D%2768%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27luminanceToAlpha%27%20result%3D%27l%27%2F%3E%3CfeComponentTransfer%20in%3D%27l%27%20result%3D%27c%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%274.2%27%20intercept%3D%27-1.9%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeFlood%20flood-color%3D%27%2363d2ea%27%20result%3D%27f%27%2F%3E%3CfeComposite%20in%3D%27f%27%20in2%3D%27c%27%20operator%3D%27in%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27520%27%20height%3D%27420%27%20filter%3D%27url%28%23t%29%27%2F%3E%3C%2Fsvg%3E");
}
.act-card:nth-child(5n+5) .act-card__stone {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27520%27%20height%3D%27420%27%3E%3Cfilter%20id%3D%27t%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.006%200.036%27%20numOctaves%3D%275%27%20seed%3D%2795%27%20result%3D%27n%27%2F%3E%3CfeColorMatrix%20in%3D%27n%27%20type%3D%27luminanceToAlpha%27%20result%3D%27l%27%2F%3E%3CfeComponentTransfer%20in%3D%27l%27%20result%3D%27c%27%3E%3CfeFuncA%20type%3D%27linear%27%20slope%3D%275.0%27%20intercept%3D%27-2.4%27%2F%3E%3C%2FfeComponentTransfer%3E%3CfeFlood%20flood-color%3D%27%2379e0f4%27%20result%3D%27f%27%2F%3E%3CfeComposite%20in%3D%27f%27%20in2%3D%27c%27%20operator%3D%27in%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27520%27%20height%3D%27420%27%20filter%3D%27url%28%23t%29%27%2F%3E%3C%2Fsvg%3E");
}
/* ═══ Die gemeinsamen Sinnbilder (Font Awesome) ════════════════════════
Eingefaerbt wird ueber `color` — Schrift-Symbole erben es von der
Umgebung. Dadurch werden sie im Team-Bereich von allein orange, ohne
dass irgendwo eine zweite Fassung gepflegt werden muss.
Die Groesse kommt als font-size aus dem Makro. `line-height: 1` und die
feste Breite halten sie in Zeilen und Rastern an derselben Stelle —
sonst springt der Text je nach Sinnbild um ein bis zwei Pixel. */
.ic {
display: inline-block;
width: 1.15em;
line-height: 1;
text-align: center;
vertical-align: -0.08em;
flex-shrink: 0;
}
/* In Ueberschriften traegt das Zeichen die Leitfarbe, nicht die
Schriftfarbe — sonst verschwindet es in der Zeile. */
h1 > .ic, h2 > .ic, h3 > .ic,
.cc-section-title > .ic {
color: var(--cc-accent);
}
/* Leerzustaende: gross und zurueckhaltend. */
.cc-empty .ic,
[class*="empty"] > .ic {
font-size: 2.1rem;
color: var(--cc-tx-4);
opacity: 0.55;
}
/* In der Seitenleiste sitzen die Zeichen in einem festen Kaestchen, damit
die Beschriftungen exakt untereinander stehen. */
aside#sidebar .nav-icon .ic {
width: 100%;
font-size: 0.95rem;
}
/* ═══════════════════════════════════════════════════════════════════════
Seitenwechsel ohne Neuladen — Gleiter, Fortschritt, Uebergang
═══════════════════════════════════════════════════════════════════════ */
/* ─── Der Gleiter ───────────────────────────────────────────────────
Ersetzt die feste Kappe an der aktiven Zeile. Eine Kappe pro Zeile
kann nicht wandern; dieses eine Element faehrt beim Wechsel von Tab A
nach Tab B an die neue Stelle. */
#sidebar-nav { position: relative; }
.nav-rail {
position: absolute;
/* top MUSS gesetzt sein. Ohne Angabe sitzt das Element an seiner
Flussposition — also unterhalb der Innenpolsterung der Spalte — und
die in moveRail() gerechnete Verschiebung landet um genau diese
Polsterung zu tief. */
top: 0;
/* left wird in moveRail() aus der aktiven Kachel gesetzt. Der Wert hier
ist nur der Startwert fuer den allerersten Anstrich. */
left: 12px;
width: 3px;
height: 0;
border-radius: 0 4px 4px 0;
background: linear-gradient(180deg, var(--cc-accent-hi), var(--cc-accent-lo));
box-shadow: 0 0 12px var(--cc-accent), 0 0 26px var(--cc-accent-glow);
opacity: 0;
pointer-events: none;
z-index: 0;
/* Die Feder gibt dem Wechsel seinen Charakter: schnell los, weich an. */
transition: transform 420ms cubic-bezier(.2, .9, .18, 1),
height 420ms cubic-bezier(.2, .9, .18, 1),
opacity 200ms ease;
}
/* Die alte, feste Kappe entfaellt — sonst leuchten zwei Balken. */
aside#sidebar .nav-link.active::before { content: none; }
@media (prefers-reduced-motion: reduce) {
.nav-rail { transition: opacity 200ms ease; }
}
/* ─── Fortschrittsbalken ────────────────────────────────────────────
htmx setzt .htmx-request am Element mit hx-indicator, solange die
Anfrage laeuft. */
#page-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
z-index: 90;
opacity: 0;
pointer-events: none;
transition: opacity 160ms ease;
}
#page-progress > span {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg,
transparent, var(--cc-accent-hi), var(--cc-accent));
box-shadow: 0 0 12px var(--cc-accent-glow);
}
#page-progress.htmx-request { opacity: 1; }
#page-progress.htmx-request > span {
animation: page-progress 1.1s cubic-bezier(.2, .8, .3, 1) infinite;
}
@keyframes page-progress {
0% { width: 0; margin-left: 0; }
55% { width: 62%; margin-left: 0; }
100% { width: 0; margin-left: 100%; }
}
/* ─── Der Uebergang des Inhalts ─────────────────────────────────────
htmx setzt .htmx-swapping auf den abgehenden Ausschnitt und
.htmx-settling auf den neuen. Kurz gehalten: ein Wechsel soll sich
sofort anfuehlen, nicht wie eine Praesentation. */
#page.htmx-swapping {
opacity: 0;
transform: translateY(5px);
transition: opacity 130ms ease, transform 130ms ease;
}
#page.htmx-settling {
opacity: 0;
transform: translateY(-5px);
}
#page {
opacity: 1;
transform: none;
transition: opacity 190ms ease, transform 190ms ease;
}
@media (prefers-reduced-motion: reduce) {
#page, #page.htmx-swapping, #page.htmx-settling {
transition: none; transform: none; opacity: 1;
}
}
/* ═══ Flackern auf der Karte ═══════════════════════════════════════════
Beobachtung: Beim Wechsel auf die Live-Karte flackerte gelegentlich die
ganze Seite.
Ursache ist nicht die Navigation, sondern die Anzahl der Grafikebenen.
`body::before` ist fest positioniert, groesser als der Bildschirm und
dauerhaft animiert — mit `will-change: transform` haelt der Browser
dafuer PERMANENT eine eigene Ebene vor. Dazu kommen rund 20 Flaechen mit
`backdrop-filter`, jede ebenfalls eine Ebene, und Leaflet legt fuer
Kacheln und Ueberlagerungen weitere obendrauf. Reicht der Grafikspeicher
nicht, schiebt der Compositor Ebenen hin und her — sichtbar als
Flackern ueber die ganze Seite.
Zwei Massnahmen:
1. `will-change` ist raus. Es ist ein Hinweis fuer kurze, bevorstehende
Aenderungen, kein Dauerzustand. Die Animation laeuft ohne genauso.
2. Auf Kartenseiten faellt die Ebene ganz weg. Sie liegt dort ohnehin
vollstaendig hinter der Karte und ist unsichtbar — reine Kosten. */
body:has(#map-page)::before,
body:has(.leaflet-container)::before {
content: none;
}
/* ─── Keine Weichzeichnung auf Kartenseiten ────────────────────────
Der eigentliche Ausloeser, sichtbar auf Jaleels Screenshot: die
Seitenleiste war unsichtbar, ihr Inhalt aber da.
`backdrop-filter` muss lesen, was HINTER der Flaeche liegt. Neben
Leaflets eigenen Grafikebenen schlaegt das fehl — der Browser zeichnet
die Flaeche dann schwarz oder gar nicht, und bei jeder Neubewertung
flackert es. Die Seitenleiste trug blur(22px) saturate(1.6) und war
zugleich `sticky`, also selbst eine eigene Ebene.
Auf einer Kartenseite ist die Weichzeichnung ohnehin wirkungslos:
dahinter liegt die Karte, nicht die Seite. Deshalb hier komplett aus —
der Allquantor ist Absicht, damit auch kuenftige Flaechen erfasst sind.
Die Flaechen haben durchgehend deckende Hintergruende, es aendert sich
also optisch nichts. */
body:has(#map-page) *,
body:has(.leaflet-container) * {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
Anteilsbalken
═══════════════════════════════════════════════════════════════════
Fuer Aufteilungen, die sich zu 100 % ergaenzen — die Wirtschafts-
Uebersicht zeigt damit, woher die Coins kommen und wohin sie gehen.
Bewusst kein Diagrammwerkzeug: eine fremde Bibliothek muesste in den
, und Seiten mit eigenen Kopf-Ressourcen sind vom Seitentausch
ohne Neuladen ausgenommen (siehe base.html). Fuer eine Balkenreihe
waere das ein schlechter Tausch — CSS-Breiten reichen und bleiben
beim Wechseln der Reiter erhalten.
Die Breite kommt als Prozentwert aus der Vorlage. Bei 0 % bleibt der
Balken sichtbar (min-width), sonst verschwaende eine Zeile mit einem
sehr kleinen Anteil ganz und man haelt sie faelschlich fuer leer. */
.cc-bar-row {
margin-bottom: 0.75rem;
}
.cc-bar-row:last-child {
margin-bottom: 0;
}
.cc-bar-labels {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
font-size: 0.78rem;
margin-bottom: 0.3rem;
}
.cc-bar-track {
height: 6px;
border-radius: 3px;
background: var(--cc-bg-4);
border: 1px solid var(--cc-bd-1);
overflow: hidden;
}
.cc-bar-fill {
height: 100%;
min-width: 2px;
border-radius: 3px;
background: linear-gradient(90deg, var(--cc-accent-lo), var(--cc-accent));
/* Beim Wechsel des Zeitraums laufen die Balken auf ihren neuen Wert,
statt zu springen — der Unterschied zwischen 7 und 30 Tagen wird
dadurch als Bewegung lesbar. */
transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* ─── Marke, die mitschrumpft ──────────────────────────────────────
`.cc-pill` ist `inline-flex` mit `white-space: nowrap` — sie gibt
also niemals nach. In einer Tabellenzelle schiebt ein langer Text
damit alle folgenden Spalten aus dem Rahmen; genau das passierte in
der Wirtschafts-Uebersicht mit Gruenden wie „duel-stake (accepted
challenge from …)".
`text-overflow` wirkt nicht auf Flex-Behaelter, deshalb hier
`inline-block`. Der volle Text gehoert bei Verwendung ins
`title`-Attribut, sonst ist er unwiederbringlich weg. */
.cc-pill--clip {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
/* ─── Farbige Pillen wieder herstellen ─────────────────────────────
Beim Umbau auf OBSIDIAN bekam `.cc-pill` weiter oben eine zweite,
vollstaendige Fassung — mit eigenem Rahmen, eigener Flaeche und
eigener Schriftfarbe. Sie steht NACH `.cc-pill--danger`, `--amber`
und `--info` und hat dieselbe Spezifitaet, also gewinnt sie. Die drei
Zusaetze waren seitdem wirkungslos: 165 Stellen in ueber 50 Vorlagen
haben ihre Warn-, Fehler- und Hinweisfarbe verloren und wurden alle
gleich grau gezeichnet.
`--accent` ist nur deshalb heil geblieben, weil es in der neuen
Fassung noch einmal aufgefuehrt wurde. Hier stehen die uebrigen drei
nach, an der einzigen Stelle, an der sie sicher gewinnen: ganz unten.
Kein `!important` — die Reihenfolge genuegt und bleibt nachvollziehbar. */
.cc-pill--amber {
background: var(--cc-amber-soft);
border-color: var(--cc-amber-line);
color: var(--cc-amber);
}
.cc-pill--danger {
background: var(--cc-danger-soft);
border-color: rgba(239, 68, 68, 0.45);
color: var(--cc-danger);
}
.cc-pill--info {
background: var(--cc-info-soft);
border-color: rgba(34, 211, 238, 0.35);
color: var(--cc-info);
}
/* ═══════════════════════════════════════════════════════════════════
Risikoband am Kopf der Spielerseite
═══════════════════════════════════════════════════════════════════
Die Vorlage setzt nur zwei Werte — `--risk-farbe` und
`--risk-flaeche` — alles andere haengt daran. Das ist der Grund fuer
die Variablen: sonst muesste jede der drei Stufen ihre Farbe an fuenf
Stellen als Inline-Stil wiederholen, und beim naechsten Zusatz wuerde
eine davon vergessen.
Die Flaeche ist ein auslaufender Verlauf, kein flaechiger Anstrich.
Voll eingefaerbt wirkte besonders die mittlere Stufe wie ein
olivgruener Block quer ueber die Seite — mehr Alarm, als die Sache
hergibt. Der Streifen links traegt das Signal, der Rest bleibt Seite. */
.risk-band {
border-color: var(--risk-farbe);
border-left: 3px solid var(--risk-farbe);
background: linear-gradient(95deg, var(--risk-flaeche), transparent 58%);
}
/* `.cc-section-title > .ic` faerbt Zeichen in Ueberschriften fest auf die
Leitfarbe. Hier soll es der Stufe folgen — sonst sitzt ein amberfarbenes
Schild vor einer roten Ueberschrift. */
.risk-band .cc-section-title,
.risk-band .cc-section-title > .ic {
color: var(--risk-farbe);
}
/* ═══════════════════════════════════════════════════════════════════
Glocke
═══════════════════════════════════════════════════════════════════
Sitzt in der Benutzerzeile am Fuss der Seitenleiste — die einzige
Chrome, die auf jeder Seite steht. Ein eigener Balken oben haette
nur dafuer Platz gekostet.
Die Klappliste haengt an der Glocke und oeffnet nach OBEN: darunter
ist der Fensterrand. */
.bell-wrap {
position: relative;
flex-shrink: 0;
}
.bell-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem;
border-radius: 999px;
border: 0;
background: transparent;
color: var(--tx-4, var(--cc-tx-4));
cursor: pointer;
transition: color 140ms, background 140ms;
}
.bell-btn:hover {
color: var(--tx-1, var(--cc-tx-1));
background: rgba(255, 255, 255, 0.10);
}
/* Die Zahl an der Glocke. Klein gehalten: der Knopf ist in der
Fusszeile nur ~26px gross, und eine 15px-Marke daneben wirkte wie ein
Aufkleber, der halb daneben klebt. */
.bell-badge {
position: absolute;
top: -3px;
right: -3px;
min-width: 13px;
height: 13px;
padding: 0 3px;
border-radius: 999px;
background: var(--cc-danger, #ef4444);
color: #fff;
font-size: 8px;
font-weight: 700;
line-height: 13px;
text-align: center;
/* Der Ring trennt die Zahl vom Zeichen darunter — ohne ihn
verschwimmen Glockenrand und Ziffer ineinander. */
box-shadow: 0 0 0 2px var(--cc-bg-2, #0a1114);
}
/* Bei Ungelesenem wippt die Glocke einmal kurz. Nur einmal: eine
dauerhaft zappelnde Glocke im Blickfeld ist nach zwei Minuten eine
Zumutung, und weggesehen wird trotzdem. */
.bell-btn.has-new .ic {
animation: bell-nudge 1.6s ease-in-out 1;
transform-origin: 50% 12%;
}
@keyframes bell-nudge {
0%, 62%, 100% { transform: rotate(0); }
68% { transform: rotate(11deg); }
74% { transform: rotate(-9deg); }
80% { transform: rotate(6deg); }
86% { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
.bell-btn.has-new .ic { animation: none; }
}
.bell-panel {
position: absolute;
bottom: calc(100% + 0.5rem);
/* Nach RECHTS aufklappen, ueber den Inhalt. Rechtsbuendig verankert
lief die Liste links aus dem Bild: der Knopf sitzt am rechten Rand
einer 290 px breiten Seitenleiste, die Liste ist 336 px breit. */
left: 0;
right: auto;
width: min(21rem, calc(100vw - 2rem));
max-height: min(26rem, 70vh);
display: flex;
flex-direction: column;
background: var(--cc-bg-2);
border: 1px solid var(--cc-bd-2);
border-radius: var(--r-md);
box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.75);
z-index: 60;
overflow: hidden;
}
.bell-panel[hidden] { display: none; }
.bell-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.6rem 0.85rem;
border-bottom: 1px solid var(--cc-bd-1);
}
/* `.cc-section-hint` traegt global `order: 2`. Gemeint ist das fuer
`.cc-section-head`, wo der Pfad hinter die Haarlinie gehoert — die
Regel wirkt aber in JEDEM Flex-Behaelter. Hier hat sie die Kopfzeile
verdreht: die Beschriftung rutschte hinter den Knopf. Global zu
verengen waere richtiger, traefe aber alle Seiten mit dieser Klasse;
deshalb nur hier zurueckgenommen. */
.bell-head .cc-section-hint { order: 0; }
.bell-list {
overflow-y: auto;
flex: 1;
}
.bell-item {
display: flex;
gap: 0.6rem;
padding: 0.6rem 0.85rem;
border-bottom: 1px solid var(--cc-bd-1);
color: inherit;
text-decoration: none;
cursor: pointer;
}
.bell-item:hover { background: var(--cc-bg-3); }
.bell-item:last-child { border-bottom: 0; }
/* Ungelesenes traegt einen Streifen links statt einer Einfaerbung:
gelesen und ungelesen stehen dicht untereinander, und ein Farbwechsel
der ganzen Zeile laesst die Liste gestreift aussehen. */
.bell-item.is-new { box-shadow: inset 2px 0 0 var(--cc-accent); }
.bell-item .ic { color: var(--cc-tx-3); margin-top: 1px; }
.bell-item.is-new .ic { color: var(--cc-accent); }
.bell-title {
font-size: 0.78rem;
color: var(--cc-tx-1);
line-height: 1.35;
}
.bell-body {
font-size: 0.7rem;
color: var(--cc-tx-3);
margin-top: 1px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bell-time {
font-size: 0.6rem;
color: var(--cc-tx-4);
font-family: 'JetBrains Mono', monospace;
margin-top: 2px;
}
.bell-empty {
padding: 1.6rem 1rem;
text-align: center;
color: var(--cc-tx-4);
font-size: 0.78rem;
}
.bell-foot {
padding: 0.5rem 0.85rem;
border-top: 1px solid var(--cc-bd-1);
text-align: center;
}
/* Die Liste ragt ueber den Rand der Seitenleiste hinaus. Beschneidet die
sich selbst, waere die Haelfte weg — beim Aufklappen also freigeben.
Nur dann: dauerhaft gesetzt wuerde die Seitenleiste bei langen
Navigationslisten nicht mehr scrollen. */
#sidebar:has(.bell-panel:not([hidden])) {
overflow: visible;
}
/* ═══════════════════════════════════════════════════════════════════
Team-Handbuch
═══════════════════════════════════════════════════════════════════
Fliesstext, den jemand wirklich von oben nach unten liest — das gibt
es sonst nirgends im Panel. Deshalb eigene Werte statt der sonst
ueblichen dichten Datenansicht:
* begrenzte Zeilenlaenge (65ch). Ueber die volle Panelbreite springt
das Auge am Zeilenende in die falsche Zeile;
* groessere Zeilenhoehe als in Tabellen;
* Ueberschriften mit viel Luft DAVOR und wenig danach, damit die
Gliederung beim Ueberfliegen traegt. */
.hb {
max-width: 65ch;
line-height: 1.65;
color: var(--cc-tx-2);
font-size: 0.9rem;
}
.hb > *:first-child { margin-top: 0; }
.hb .hb-h1 {
font-size: 1.5rem;
font-weight: 700;
color: var(--cc-tx-1);
margin: 0 0 1.2rem;
}
.hb .hb-h2 {
font-size: 1.05rem;
font-weight: 600;
color: var(--cc-accent);
letter-spacing: 0.02em;
margin: 2.2rem 0 0.7rem;
}
.hb .hb-h3 {
font-size: 0.92rem;
font-weight: 600;
color: var(--cc-tx-1);
margin: 1.5rem 0 0.5rem;
}
.hb p { margin: 0 0 0.85rem; }
.hb strong { color: var(--cc-tx-1); font-weight: 600; }
.hb em { color: var(--cc-tx-3); font-style: italic; }
.hb code {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.82em;
padding: 0.08em 0.35em;
border-radius: var(--r-xs);
background: var(--cc-bg-4);
border: 1px solid var(--cc-bd-1);
color: var(--cc-tx-1);
}
.hb .hb-list { margin: 0 0 0.95rem 1.15rem; padding: 0; }
.hb .hb-list li { margin-bottom: 0.3rem; }
.hb ul.hb-list { list-style: disc; }
.hb ol.hb-list { list-style: decimal; }
.hb .hb-hr {
border: 0;
border-top: 1px solid var(--cc-bd-1);
margin: 2rem 0;
}
/* Kasten fuer die Merksaetze („Slay vs. kick", Kompensationsregeln).
Streifen links statt Rahmen ringsum: der Text laeuft weiter, nur mit
anderer Betonung — ein Kasten haette ihn aus dem Lesefluss gerissen. */
.hb .hb-note {
margin: 0 0 1rem;
padding: 0.65rem 0 0.65rem 0.9rem;
border-left: 3px solid var(--cc-accent);
background: linear-gradient(90deg, var(--cc-accent-soft), transparent 70%);
color: var(--cc-tx-2);
font-size: 0.86rem;
}
/* Die Tabellen sind breiter als die Textspalte — sie duerfen ausbrechen,
sonst waeren die Spalten unlesbar schmal. Scrollt bei Bedarf fuer
sich, damit die Seite nicht seitlich wandert. */
.hb .hb-table-wrap {
max-width: min(100%, 58rem);
width: max-content;
overflow-x: auto;
margin: 0 0 1.2rem;
border: 1px solid var(--cc-bd-1);
border-radius: var(--r-sm);
}
.hb .hb-table-wrap .cc-table { font-size: 0.82rem; }
.hb .hb-table-wrap .cc-table td { vertical-align: top; }
/* Kurze Bezeichner in der ersten Spalte sollen nicht umbrechen
("Strike 1" stand sonst auf zwei Zeilen). Ein hartes nowrap waere
falsch: die Fall-Tabelle hat dort ganze Saetze und wuerde dann
seitlich scrollen. Eine Mindestbreite trifft nur die kurzen. */
.hb .hb-table-wrap .cc-table td:first-child { min-width: 5.5rem; }
.hb .hb-table-wrap .cc-table tbody tr:last-child td { border-bottom: 0; }
/* ═══════════════════════════════════════════════════════════════════════
EIGENE FARBEN JE BENUTZER
═══════════════════════════════════════════════════════════════════════
Das Design bleibt, wie es ist — nur der Farbton wandert. Deshalb steht
hier keine zweite Gestaltung, sondern dieselben Variablen wie oben,
abgeleitet aus zwei Zahlen je Seite:
--u-h / --u-s Spielerseite (Vorgabe 187 / 92%)
--u-ha / --u-sa Teamseite (Vorgabe 34 / 88%)
WARUM IN CSS UND NICHT IN PYTHON ODER JS: Die Ableitung gaebe es sonst
dreimal — einmal fuer die gespeicherte Ansicht, einmal fuer die
Vorschau im Schieberegler, einmal fuer das Overlay. Drei Kopien einer
Formel driften auseinander; das haben wir bei der Ernaehrungsliste
gerade erst aufgeraeumt. So setzt jeder Beteiligte nur zwei Zahlen,
und die Ableitung passiert an genau einer Stelle.
Die Helligkeit bleibt bewusst fest. Sie traegt den Kontrast, und ein
Regler dafuer waere ein Regler fuer „Text unlesbar machen".
Greift nur, wenn gesetzt ist — ohne das bleibt
alles beim Standard, und die globale Abschaltung braucht dann nichts
weiter zu tun, als das Attribut wegzulassen.
═══════════════════════════════════════════════════════════════════════ */
/* Alles am Wurzelknoten selbst. `html[data-usertheme] :root` waere ein
Nachfahrenzugriff, und `:root` IST html — der Ausdruck traefe nichts.
Die Vorgaben stehen mit drin, damit ein unvollstaendig gesetztes
Attribut nicht die halbe Ableitung ins Leere laufen laesst; die
Inline-Werte vom Server ueberschreiben sie. */
html[data-usertheme] {
--u-h: 187;
--u-s: 92%;
--u-ha: 34;
--u-sa: 88%;
--cc-accent: hsl(var(--u-h) var(--u-s) 69%);
--cc-accent-hi: hsl(var(--u-h) var(--u-s) 81%);
--cc-accent-lo: hsl(var(--u-h) var(--u-s) 59%);
--cc-accent-soft: hsl(var(--u-h) var(--u-s) 69% / 0.10);
--cc-accent-glow: hsl(var(--u-h) var(--u-s) 69% / 0.30);
--cc-accent-line: hsl(var(--u-h) var(--u-s) 69% / 0.38);
/* Die Raender tragen denselben Ton, nur stark entsaettigt — sonst
kippt das ganze Geruest mit und die Flaechen fangen an zu leuchten. */
--cc-bd-1: hsl(var(--u-h) 42% 70% / 0.075);
--cc-bd-2: hsl(var(--u-h) 42% 70% / 0.15);
--cc-bd-3: hsl(var(--u-h) 42% 70% / 0.28);
}
/* Teamseite: derselbe Aufbau, eigener Ton. Der Zugriff sitzt an :root,
damit der Seitenhintergrund am mitzieht — genau wie beim
eingebauten Bernstein weiter oben. */
html[data-usertheme]:has(body.app-admin) {
--cc-accent: hsl(var(--u-ha) var(--u-sa) 67%);
--cc-accent-hi: hsl(var(--u-ha) var(--u-sa) 82%);
--cc-accent-lo: hsl(var(--u-ha) var(--u-sa) 60%);
--cc-accent-soft: hsl(var(--u-ha) var(--u-sa) 67% / 0.10);
--cc-accent-glow: hsl(var(--u-ha) var(--u-sa) 67% / 0.30);
--cc-accent-line: hsl(var(--u-ha) var(--u-sa) 67% / 0.42);
--cc-bd-1: hsl(var(--u-ha) 42% 68% / 0.075);
--cc-bd-2: hsl(var(--u-ha) 42% 68% / 0.155);
--cc-bd-3: hsl(var(--u-ha) 42% 68% / 0.30);
}
/* ══ Reiter zusammengefasster Seiten ═══════════════════════════════
Ein Seitenleisten-Eintrag, mehrere Seiten. Bewusst flach: die Leiste
sitzt direkt unter der Ueberschrift und soll die Seite nicht in zwei
konkurrierende Rahmen teilen. */
.cc-tabs .cc-tab {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.42rem 0.9rem;
border-radius: 8px;
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--cc-tx-3);
text-decoration: none;
border: 1px solid transparent;
white-space: nowrap;
transition: background 0.12s ease, color 0.12s ease;
}
.cc-tabs .cc-tab:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--cc-tx-1);
}
.cc-tabs .cc-tab--active {
background: var(--cc-accent-soft);
border-color: var(--cc-accent-line);
color: var(--cc-accent);
font-weight: 600;
}