/* ==========================================================================
VINTED MANAGER — "JARVIS" THEME
Dark HUD-Interface: Neon Cyan/Blau + Orange-Akzent, Glassmorphism,
Tech-Grid-Hintergrund, Micro-Animations.
Alle bestehenden Klassen (Chat, Labels, Formulare …) bleiben funktional.
========================================================================== */
/* Fonts werden in base.html per geladen (parallel statt blockierend). */
/* ==========================================================================
DESIGNS (Themes), seit 03.11.2026
Drei Designs, geschaltet ueber :
:root traegt unveraendert die Jarvis-Werte, die beiden Bloecke darunter
ueberschreiben AUSSCHLIESSLICH Variablen. Deshalb gilt fuer das ganze
Stylesheet: keine feste Farbe ausserhalb von :root. Farben mit Alpha
laufen ueber RGB-Tripel (rgba(var(--accent-rgb), 0.16)), Dekoration
(Grid, Ornamente, Animationen) ueber die Variablen --deko-… und --anim-…,
Versalien und Sperrung ueber --ui-transform und --tracking-faktor. tests_web.py prueft,
dass keine Jarvis-Farbe ausserhalb von :root zurueckkommt.
========================================================================== */
:root, .design-vorschau[data-theme="jarvis"] {
/* RGB-Tripel fuer Flaechen mit Alpha. Die Hex-Werte darunter muessen
dazu passen -- wer eine Farbe aendert, aendert beide. */
--accent-rgb: 0, 212, 255;
--accent2-rgb: 255, 158, 61;
--success-rgb: 45, 212, 167;
--danger-rgb: 255, 77, 109;
--warn-rgb: 255, 194, 71;
--muted-rgb: 109, 132, 163;
--blue-rgb: 59, 130, 246;
/* Helle Tönung auf dunklem Grund (Klar dreht sie auf Schwarz). */
--tint-rgb: 255, 255, 255;
/* Kernpalette */
--bg: #04070d;
--bg-2: #070d18;
/* Etwas deckender als früher: erlaubt den Verzicht auf backdrop-filter
(GPU-teuer, Hauptursache für Ruckeln) ohne sichtbaren Qualitätsverlust. */
--panel: rgba(12, 22, 40, 0.88);
--panel-solid: #0b1424;
--border: rgba(var(--accent-rgb), 0.16);
--border-strong: rgba(var(--accent-rgb), 0.45);
--cyan: #00d4ff;
--blue: #3b82f6;
--orange: #ff9e3d;
--text: #d5e4f7;
--muted: #6d84a3;
--gray: var(--muted);
--success: #2dd4a7;
--danger: #ff4d6d;
--warn: #ffc247;
/* Legacy-Aliase (alte Klassen erwarten diese Namen) */
--green: var(--cyan);
--dark: var(--text);
--card: var(--panel-solid);
--glow-cyan: 0 0 8px rgba(var(--accent-rgb), 0.55), 0 0 24px rgba(var(--accent-rgb), 0.18);
--glow-orange: 0 0 8px rgba(var(--accent2-rgb), 0.55), 0 0 24px rgba(var(--accent2-rgb), 0.18);
--font-head: 'Orbitron', 'Share Tech Mono', monospace;
--font-body: 'Rajdhani', 'Segoe UI', sans-serif;
--font-mono: 'Share Tech Mono', 'SF Mono', monospace;
/* QR-Code des zweiten Faktors: Scanner brauchen schwarz auf weiss, in
jedem Design -- deshalb eine eigene Variable statt der Flaechenfarbe. */
--qr-papier: #ffffff;
--r-panel: 14px; /* runde Grundform … */
--r-cut: 2px; /* … mit „abgeschnittenen" Tech-Ecken via clip */
/* ---- Design-System ------------------------------------------------
Bis hierher gab es nur Farben, Schriften und zwei Radien. Alles
andere -- Abstände, Ebenen, Schatten -- stand als Einzelwert im
Stylesheet verteilt, weshalb dieselbe Kachel an zwei Stellen
unterschiedlich aussah. Ab hier gilt: keine neuen Zufallswerte. */
/* Ebenen. Tiefe entsteht durch gestaffelte Helligkeit, nicht durch
Schlagschatten -- auf dunklem Grund wirken Schatten sonst wie Dreck. */
--surface: #080f1b; /* Fläche direkt auf dem Hintergrund */
--surface-2: #0b1424; /* Karte */
--surface-3: #101c30; /* Element auf einer Karte (Hover, Eingabe) */
/* Text-Hierarchie: drei Stufen reichen, mehr wird beliebig. */
--text-strong: #eaf4ff; /* Kennzahlen, Überschriften */
/* --text (Fließtext) und --muted (Labels) stehen oben. */
/* Abstandsraster (4er-Schritte). */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
/* Radien. --r-panel bleibt die Grundform großer Flächen. */
--r-sm: 6px;
--r-md: 10px;
/* Schatten sparsam und nur zur Abhebung schwebender Elemente. */
--sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
--sh-2: 0 6px 18px rgba(0, 0, 0, 0.45);
--sh-3: 0 12px 40px rgba(0, 0, 0, 0.55);
/* Einheitliche Übergangsdauer: vorher .18s/.2s/.25s wild gemischt. */
--t-schnell: .14s;
--t-normal: .2s;
/* ---- Theme-Variablen (Jarvis-Werte; Klar/Graphit ueberschreiben) ---- */
/* Sondertoene, die vorher als Hex im Stylesheet verteilt standen. */
--text-bright: #eaf9ff; /* Knopf-Hover, Hervorhebung im Fliesstext */
--stat-accent2-text: #ffe9d1; /* Kennzahl in orangener Kachel */
--stat-success-text: #d9fff4; /* Kennzahl in gruener Kachel */
--blue-text: #7db4ff; /* Schrift der Marke "verkauft" */
--accent2-dark: #c96a12; /* Startfarbe des orangenen Balkens */
--on-danger: #fff; /* Zahl auf der roten Glocken-Marke */
--papier: #fff; /* Versandschein-Vorschau: Druckvorlage bleibt weiss */
--placeholder: rgba(var(--muted-rgb), 0.6);
--unread-bg: rgba(0, 229, 255, 0.05);
/* Flaechen von Navigation und Leisten. */
--surface-side: linear-gradient(180deg, rgba(10, 18, 34, 0.96), rgba(6, 11, 22, 0.96));
--surface-nav: rgba(6, 11, 22, 0.97);
--surface-top: rgba(7, 13, 24, 0.82);
--surface-top-mobil: rgba(7, 13, 24, 0.97); /* Topbar am Handy, ohne Blur */
--surface-input: rgba(4, 9, 17, 0.6);
--surface-overlay: rgba(2, 5, 10, 0.92);
/* Schatten der Karten und Kacheln (Klar setzt sie deutlich weicher). */
--sh-karte: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
--sh-karte-hover: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px -14px rgba(0, 0, 0, 0.7), 0 0 30px rgba(var(--accent-rgb), 0.06);
--sh-kachel: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -14px rgba(0, 0, 0, 0.6);
--sh-kachel-hover: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 22px rgba(var(--accent-rgb), 0.1);
--sh-nav: 0 -8px 24px rgba(0, 0, 0, 0.45);
--sh-lightbox: 0 0 60px rgba(var(--accent-rgb), 0.15), 0 8px 32px rgba(0, 0, 0, 0.6);
/* Primaerknopf. */
--btn-bg: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(var(--blue-rgb), 0.18));
--btn-fg: var(--cyan);
--btn-fg-hover: var(--text-bright);
--btn-border: var(--border-strong);
/* Typografie. */
--body-size: 16px;
--body-tracking: 0.02em;
--head-transform: uppercase;
--head-tracking: 0.12em;
--ui-transform: uppercase; /* Knoepfe, Navigation, Tabellenkopf, Labels */
--tracking-faktor: 1; /* 0 = keine Sperrung (Klar/Graphit) */
/* Dekoration: 1/block = an, 0/none = aus. */
--deko-grid: 1; /* Tech-Grid + Glows (body::before) */
--deko-ornament: block; /* Unterstrich unter h1 */
--deko-linie: 1; /* Neon-Kante oben auf Karten/Kacheln */
--deko-animationen: 1; /* ambient.js: Cursor-Licht, Boot-Sweep */
--anim-rise: rise;
--anim-blink: blink;
--anim-pulse: pulse;
}
/* ---- Klar: hell, ruhig, viel Weissraum, keine Effekte ------------------
Die Textfarben der Akzente sind dunkler als die Flaechenfarben (RGB-
Tripel): Vinted-Teal #09b1ba hat auf Weiss nur 2,6:1 Kontrast. Fuer
Text gilt deshalb #077f86 (4,8:1), fuer Raender, Toenungen, Ringe und
Balken das helle Teal. Dasselbe bei Erfolg/Warnung/Fehler. */
html[data-theme="klar"], .design-vorschau[data-theme="klar"],
html[data-theme="atelier"], .design-vorschau[data-theme="atelier"],
html[data-theme="kontor"], .design-vorschau[data-theme="kontor"] {
--accent-rgb: 9, 177, 186;
--accent2-rgb: 31, 58, 95;
--success-rgb: 23, 166, 115;
--danger-rgb: 217, 56, 72;
--warn-rgb: 217, 138, 0;
--muted-rgb: 102, 112, 133;
--blue-rgb: 31, 58, 95;
--tint-rgb: 0, 0, 0;
--bg: #f5f6f8;
--bg-2: #eceef1;
--panel: #ffffff;
--panel-solid: #ffffff;
--border: #e3e6ea;
--border-strong: rgba(var(--accent-rgb), 0.6);
--cyan: #077f86;
--blue: #1f3a5f;
--orange: #1f3a5f;
--text: #1b1f24;
--muted: #667085;
--success: #0d7f58;
--danger: #c42f3d;
--warn: #9f6300;
--glow-cyan: 0 0 0 transparent;
--glow-orange: 0 0 0 transparent;
--font-head: 'Inter', 'Segoe UI', sans-serif;
--font-body: 'Inter', 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
--r-panel: 12px;
--r-cut: 8px;
--r-sm: 6px;
--r-md: 10px;
--surface: #ffffff;
--surface-2: #ffffff;
--surface-3: #f0f2f5;
--text-strong: #0f1216;
--sh-1: 0 1px 2px rgba(16, 24, 40, 0.06);
--sh-2: 0 4px 12px rgba(16, 24, 40, 0.08);
--sh-3: 0 12px 32px rgba(16, 24, 40, 0.12);
--text-bright: #ffffff;
--stat-accent2-text: #0f1216;
--stat-success-text: #0f1216;
--blue-text: #1f3a5f;
--accent2-dark: #16294a;
--on-danger: #ffffff;
--placeholder: var(--muted);
--unread-bg: rgba(var(--accent-rgb), 0.07);
--surface-side: #ffffff;
--surface-nav: #ffffff;
--surface-top: rgba(255, 255, 255, 0.92);
--surface-top-mobil: #ffffff;
--surface-input: #ffffff;
--surface-overlay: rgba(20, 22, 25, 0.85);
--sh-karte: 0 1px 2px rgba(16, 24, 40, 0.05);
--sh-karte-hover: 0 4px 14px rgba(16, 24, 40, 0.08);
--sh-kachel: 0 1px 2px rgba(16, 24, 40, 0.05);
--sh-kachel-hover: 0 4px 14px rgba(16, 24, 40, 0.08);
--sh-nav: 0 -2px 10px rgba(16, 24, 40, 0.08);
--sh-lightbox: 0 12px 40px rgba(0, 0, 0, 0.4);
--btn-bg: #077f86;
--btn-fg: #ffffff;
--btn-fg-hover: #ffffff;
--btn-border: #077f86;
--body-size: 15px;
--body-tracking: 0;
--head-transform: none;
--head-tracking: 0;
--ui-transform: none;
--tracking-faktor: 0;
--deko-grid: 0;
--deko-ornament: none;
--deko-linie: 0;
--deko-animationen: 0;
--anim-rise: none;
--anim-blink: none;
--anim-pulse: none;
}
/* ---- Graphit: dunkel, aber ruhig -- Anthrazit statt Schwarz, Amber statt
Neon, keine Animationen, weiche Rundungen. Teilt Schrift und Formen
mit Klar. ------------------------------------------------------------ */
html[data-theme="graphit"], .design-vorschau[data-theme="graphit"],
html[data-theme="nachtschicht"], .design-vorschau[data-theme="nachtschicht"] {
--accent-rgb: 245, 165, 36;
--accent2-rgb: 124, 196, 160;
--success-rgb: 62, 207, 142;
--danger-rgb: 255, 107, 107;
--warn-rgb: 245, 165, 36;
--muted-rgb: 139, 145, 154;
--blue-rgb: 124, 196, 160;
--tint-rgb: 255, 255, 255;
--bg: #141619;
--bg-2: #1a1d21;
--panel: #1d2025;
--panel-solid: #1d2025;
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.22);
--cyan: #f5a524;
--blue: #7cc4a0;
--orange: #7cc4a0;
--text: #e6e8eb;
--muted: #8b919a;
--success: #3ecf8e;
--danger: #ff6b6b;
--warn: #f5a524;
--glow-cyan: 0 2px 8px rgba(0, 0, 0, 0.35);
--glow-orange: 0 2px 8px rgba(0, 0, 0, 0.35);
--font-head: 'Inter', 'Segoe UI', sans-serif;
--font-body: 'Inter', 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
--r-panel: 12px;
--r-cut: 8px;
--r-sm: 6px;
--r-md: 10px;
--surface: #1a1d21;
--surface-2: #1d2025;
--surface-3: #262a31;
--text-strong: #ffffff;
--sh-1: 0 1px 2px rgba(0, 0, 0, 0.3);
--sh-2: 0 6px 18px rgba(0, 0, 0, 0.35);
--sh-3: 0 12px 40px rgba(0, 0, 0, 0.45);
--text-bright: #141619;
--stat-accent2-text: #ffffff;
--stat-success-text: #ffffff;
--blue-text: #7cc4a0;
--accent2-dark: #5a9a7a;
--on-danger: #141619;
--placeholder: var(--muted);
--unread-bg: rgba(var(--accent-rgb), 0.06);
--surface-side: #1a1d21;
--surface-nav: #1a1d21;
--surface-top: rgba(26, 29, 33, 0.92);
--surface-top-mobil: #1a1d21;
--surface-input: #141619;
--surface-overlay: rgba(10, 11, 13, 0.9);
--sh-karte: 0 1px 2px rgba(0, 0, 0, 0.3);
--sh-karte-hover: 0 6px 18px rgba(0, 0, 0, 0.35);
--sh-kachel: 0 1px 2px rgba(0, 0, 0, 0.3);
--sh-kachel-hover: 0 6px 18px rgba(0, 0, 0, 0.35);
--sh-nav: 0 -4px 16px rgba(0, 0, 0, 0.35);
--sh-lightbox: 0 12px 40px rgba(0, 0, 0, 0.6);
--btn-bg: #f5a524;
--btn-fg: #141619;
--btn-fg-hover: #141619;
--btn-border: #f5a524;
--body-size: 15px;
--body-tracking: 0;
--head-transform: none;
--head-tracking: 0;
--ui-transform: none;
--tracking-faktor: 0;
--deko-grid: 0;
--deko-ornament: none;
--deko-linie: 0;
--deko-animationen: 0;
--anim-rise: none;
--anim-blink: none;
--anim-pulse: none;
}
* { box-sizing: border-box; }
html { scrollbar-color: rgba(var(--accent-rgb), 0.35) transparent; }
body {
font-family: var(--font-body);
font-size: var(--body-size);
background: var(--bg);
color: var(--text);
margin: 0;
min-height: 100vh;
min-height: 100dvh; /* iOS: ohne die Adressleiste mitzurechnen */
letter-spacing: var(--body-tracking);
}
/* Tech-Grid + Ambient-Glows auf einer eigenen fixen Ebene.
Vorher: background-attachment:fixed am body — das zwingt den Browser bei
jedem Scrollen zum Neuzeichnen des Hintergrunds (ruckelt massiv, v. a. am
Handy). Ein fixiertes Pseudo-Element liegt dagegen auf einer eigenen
Compositor-Ebene und kostet beim Scrollen nichts. */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background-image:
radial-gradient(ellipse 80% 50% at 20% -10%, rgba(var(--blue-rgb), 0.10), transparent 60%),
radial-gradient(ellipse 60% 40% at 90% 110%, rgba(var(--accent-rgb), 0.05), transparent 60%),
linear-gradient(rgba(var(--accent-rgb), 0.016) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--accent-rgb), 0.016) 1px, transparent 1px);
background-size: auto, auto, 56px 56px, 56px 56px;
transform: translateZ(0);
/* Klar/Graphit blenden Grid und Glows aus (--deko-grid: 0). */
opacity: var(--deko-grid);
}
::selection { background: rgba(var(--accent-rgb), 0.3); }
/* Sichtbarer Fokus-Ring für Tastatur-Navigation (überall, nicht nur Inputs).
:focus-visible → erscheint nur bei Tastatur, stört Maus-Nutzer nicht. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 2px;
border-radius: 6px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
h1, h2, h3 {
font-family: var(--font-head);
text-transform: var(--head-transform);
letter-spacing: var(--head-tracking);
color: var(--text-strong);
}
h1 { font-size: 1.35rem; }
h1::after {
content: "";
display: var(--deko-ornament);
width: 64px; height: 2px;
margin-top: 6px;
background: linear-gradient(90deg, var(--cyan), transparent);
box-shadow: var(--glow-cyan);
}
a { color: var(--cyan); }
/* ==========================================================================
APP-LAYOUT: Sidebar + Topbar + Main
========================================================================== */
.app { display: flex; min-height: 100vh; min-height: 100dvh; }
/* ---- Sidebar ---- */
.sidebar {
width: 216px;
flex: 0 0 auto;
display: flex;
flex-direction: column;
padding: 18px 12px;
background: var(--surface-side);
border-right: 1px solid var(--border);
position: sticky;
top: 0;
height: 100vh;
height: 100dvh;
overflow-y: auto;
}
.side-brand {
font-family: var(--font-head);
font-weight: 900;
font-size: 1.02rem;
letter-spacing: calc(0.18em * var(--tracking-faktor));
color: var(--text-strong);
padding: 6px 10px 18px;
text-shadow: var(--glow-cyan);
white-space: nowrap;
}
.side-brand .cursor {
color: var(--cyan);
animation: var(--anim-blink) 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
/* "Mehr"-Knopf und Sheet gehoeren zur Handy-Navigation (Medienabfrage
unten). In der Sidebar sind sie nie zu sehen. */
.nav-mehr, .nav-sheet, .nav-sheet-hintergrund { display: none; }
.nav-mehr {
background: none;
border: 1px solid transparent;
color: var(--muted);
font: inherit;
font-weight: 600;
cursor: pointer;
}
/* Marke mit Einklapp-Knopf (MacBook: 64px schmale Sidebar, nur Symbole). */
.side-brand { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.side-schmal {
flex: 0 0 auto;
width: 24px; height: 24px;
padding: 0;
border: 1px solid transparent;
border-radius: var(--r-sm);
background: none;
color: var(--muted);
font-family: var(--font-body);
font-size: 1.1rem;
line-height: 1;
text-shadow: none;
letter-spacing: 0;
cursor: pointer;
transition: color var(--t-normal), background var(--t-normal), transform var(--t-normal);
}
.side-schmal:hover { color: var(--text-strong); background: var(--surface-3); }
/* Gruppentitel: klein, ruhig, nicht anklickbar. Er soll die Liste
gliedern, nicht mit den Menüpunkten um Aufmerksamkeit konkurrieren. */
.side-gruppe {
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: calc(0.18em * var(--tracking-faktor));
text-transform: var(--ui-transform);
color: var(--muted);
opacity: 0.75;
padding: 0 12px var(--sp-1);
margin-top: var(--sp-4);
}
.side-gruppe:first-child { margin-top: 0; }
.side-nav a {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
border-radius: 8px 8px 8px var(--r-cut);
color: var(--muted);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: calc(0.06em * var(--tracking-faktor));
text-transform: var(--ui-transform);
border: 1px solid transparent;
position: relative;
transition: color .18s, background .18s, border-color .18s, transform .18s;
}
.side-nav a .ico {
font-size: 0.95rem;
width: 20px;
text-align: center;
color: var(--muted);
transition: color .18s, text-shadow .18s, transform .18s;
}
.side-nav a:hover {
color: var(--text);
background: rgba(var(--accent-rgb), 0.06);
transform: translateX(3px);
}
.side-nav a:hover .ico { color: var(--cyan); text-shadow: var(--glow-cyan); }
/* Aktiver Eintrag: erkennbar über Fläche, Textkontrast und die Kante links --
nicht über eine kräftige Farbfläche. Der Cyan-Verlauf von vorher zog den
Blick staerker an als der Seiteninhalt selbst. */
.side-nav a.active {
color: var(--text-strong);
background: var(--surface-3);
border-color: var(--border);
}
.side-nav a.active .ico { color: var(--cyan); text-shadow: var(--glow-cyan); }
.side-nav a.active::before {
content: "";
position: absolute;
left: -1px; top: 15%;
height: 70%; width: 2px;
background: var(--cyan);
box-shadow: var(--glow-cyan);
border-radius: 2px;
}
.side-foot {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: auto;
padding: 14px 10px 4px;
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--muted);
letter-spacing: calc(0.14em * var(--tracking-faktor));
}
/* ---- Rechte Spalte ---- */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* ---- Topbar ---- */
.topbar {
display: flex;
align-items: center;
gap: 24px;
padding: 14px 28px;
border-bottom: 1px solid var(--border);
background: var(--surface-top);
/* Einziges Element mit Blur: sichtbar (Inhalt scrollt darunter durch)
und nur eine schmale Leiste — vertretbare Kosten. */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
position: sticky;
top: 0;
z-index: 50;
}
/* Zeigt den Namen der aktuellen Seite — vorher stand hier auf jeder Seite
derselbe Satz, der keine Information trug. Das ist zugleich das der
Seite, deshalb die h1-Deko (Versalien, Sperrung, Unterstrich) zurücknehmen. */
.top-title {
margin: 0;
min-width: 0;
font-family: var(--font-body);
font-size: 1.1rem;
font-weight: 700;
text-transform: none;
letter-spacing: calc(0.03em * var(--tracking-faktor));
color: var(--text-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.top-title::after { content: none; }
/* Die Topbar trägt jetzt sieben Elemente statt vier. Bei 22px Abstand
überliefe sie auf Laptop-Breite, deshalb enger und mit sanften Trennern
zwischen den Gruppen (Suche | Status | Kontext | Ich) -- die Trennung macht
die Reihe lesbar, ohne sie mit Rahmen zuzustellen. */
.top-right {
/* Wächst in den freien Platz statt ihn über margin-left:auto zu
verschlucken. Mit dem auto-Rand bekam die Gruppe nur ihre intrinsische
Breite zugeteilt und brach um, obwohl daneben 200px frei waren --
rechtsbündig wird sie jetzt über justify-content. */
flex: 1 1 auto;
display: flex;
align-items: center;
gap: var(--sp-3);
min-width: 0;
/* Umbruch als Auffangnetz statt als Regelfall: die Medienabfragen unten
räumen die Leiste so weit ab, dass sie normalerweise einzeilig bleibt.
Reicht das nicht (sehr lange Seitenüberschrift, zwischen zwei
Haltepunkten, große Schrift), rutscht die Gruppe in eine zweite Zeile,
statt rechts aus dem Fenster zu laufen -- dort waren Konto-Auswahl und
Abmelden vorher schlicht nicht mehr erreichbar. */
flex-wrap: wrap;
justify-content: flex-end;
}
/* Alles behält seine Größe -- bis auf das Suchfeld. Es ist das einzige
Element, das ohne Informationsverlust schmaler werden kann, und fängt
deshalb den Platzmangel ab. Ohne diese Ausnahme schob eine lange
Seitenüberschrift ("Benachrichtigungen") die halbe Leiste aus dem Bild. */
.top-right > * { flex: 0 0 auto; }
.top-right > .top-status,
.top-right > .account-switcher,
.top-right > .top-profil {
border-left: 1px solid var(--border);
padding-left: var(--sp-3);
}
/* ---- Suche (schickt an /inventory?q=) ---- */
.top-right > .top-suche {
/* Wunschbreite 200px, darf aber bis 120px zusammengehen, bevor die
Medienabfrage es ganz ausblendet. */
flex: 0 1 180px;
min-width: 120px;
}
.top-suche {
position: relative;
display: flex;
align-items: center;
}
.top-suche-ico {
position: absolute;
left: 10px;
font-size: 0.95rem;
color: var(--muted);
pointer-events: none;
}
.top-suche input {
width: 100%;
min-width: 0;
padding: 7px 10px 7px 28px;
min-height: 34px;
font-family: var(--font-body);
font-size: 0.86rem;
color: var(--text);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
transition: border-color var(--t-normal), background var(--t-normal);
}
.top-suche input::placeholder { color: var(--muted); }
.top-suche input:focus {
outline: none;
background: var(--surface-3);
border-color: var(--border-strong);
}
/* ---- Agenten-Ampel ---- */
.top-agenten {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: calc(0.02em * var(--tracking-faktor));
color: var(--text);
text-decoration: none;
transition: border-color var(--t-normal), background var(--t-normal);
}
.top-agenten:hover { border-color: var(--border-strong); background: var(--surface-3); }
.top-agenten .lbl { color: var(--muted); }
.top-agenten-zahl {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
color: var(--text-strong);
}
/* Der Punkt trägt die Farbe, die Zahl daneben die Information -- wer die
Farbe nicht unterscheiden kann, liest trotzdem "4/9". */
.top-agenten .pulse-dot { width: 7px; height: 7px; }
.top-agenten.ampel-gruen .pulse-dot { background: var(--success); box-shadow: 0 0 6px var(--success); }
.top-agenten.ampel-gelb .pulse-dot { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.top-agenten.ampel-rot .pulse-dot { background: var(--danger); box-shadow: 0 0 7px var(--danger); }
.top-agenten.ampel-gelb { border-color: rgba(var(--warn-rgb), 0.35); }
.top-agenten.ampel-rot { border-color: rgba(var(--danger-rgb), 0.4); }
/* Bereitschaft ist kein Fehler: grau und ohne Puls, damit es nicht nach
Störung aussieht. */
.top-agenten.ampel-grau .pulse-dot {
background: var(--muted);
box-shadow: none;
animation: none;
}
/* ---- Glocke ---- */
.top-glocke {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: var(--r-md);
color: var(--muted);
font-size: 1rem;
text-decoration: none;
transition: color var(--t-normal), background var(--t-normal);
}
.top-glocke:hover { color: var(--text-strong); background: var(--surface-3); }
.top-glocke.hat-neue { color: var(--warn); }
.top-glocke-zahl {
position: absolute;
top: 1px; right: 0;
min-width: 15px;
padding: 0 3px;
border-radius: 8px;
background: var(--danger);
color: var(--on-danger);
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
line-height: 15px;
text-align: center;
}
/* ---- Profil ---- */
.top-profil { display: flex; align-items: center; gap: var(--sp-2); }
.top-profil-name {
display: flex;
align-items: center;
gap: var(--sp-2);
color: var(--text);
font-size: 0.86rem;
font-weight: 600;
text-decoration: none;
transition: color var(--t-normal);
}
.top-profil-name:hover { color: var(--text-strong); }
.top-avatar {
display: flex;
align-items: center;
justify-content: center;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--surface-3);
border: 1px solid var(--border);
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--text-strong);
}
.top-abmelden {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
font-size: 0.78rem;
}
/* Das Symbol trägt nur am Handy; nebem dem Wort wäre es Dekoration. */
.top-abmelden-ico { display: none; }
.top-status {
display: flex;
align-items: center;
gap: 9px;
font-size: 0.88rem;
font-weight: 600;
letter-spacing: calc(0.02em * var(--tracking-faktor));
color: var(--success);
}
.pulse-dot {
width: 9px; height: 9px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 6px var(--success);
animation: var(--anim-pulse) 1.8s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.35); opacity: 0.55; }
}
.top-time { display: flex; align-items: baseline; gap: 10px; }
.top-clock {
font-family: var(--font-mono);
font-size: 1.1rem;
color: var(--text);
letter-spacing: calc(0.06em * var(--tracking-faktor));
font-variant-numeric: tabular-nums;
}
.top-date {
font-size: 0.88rem;
color: var(--muted);
}
/* Account-Switcher in der Topbar */
.account-switcher select {
padding: 8px 12px;
min-height: 38px;
border: 1px solid var(--border);
border-radius: 8px 8px 8px var(--r-cut);
font-size: 0.9rem;
font-weight: 600;
font-family: var(--font-body);
background: var(--panel-solid);
color: var(--text);
letter-spacing: calc(0.02em * var(--tracking-faktor));
transition: border-color .18s, box-shadow .18s;
}
.account-switcher select:hover { border-color: var(--border-strong); }
/* Zwischenbreiten: die Leiste wird in der Reihenfolge abgeräumt, in der die
Elemente am wenigsten fehlen -- erst Datum, dann Suchfeld, dann die Wörter
neben den Symbolen, zuletzt die Uhr.
Diese Blöcke müssen NACH den Grundregeln von .top-time & Co. stehen: sie
haben dieselbe Spezifität, also entscheidet die Reihenfolge. Weiter oben
platziert wurden sie von "display:flex" wieder überstimmt. */
/* Die Schwellen sind gemessen, nicht geraten: Bezugsfall ist die längste
Seitenüberschrift ("Benachrichtigungen") neben der vollen rechten Gruppe. */
/* Reihenfolge seit 03.11.2026 (Paket B): zuerst Uhr und Datum (Zierde),
dann der Profilname, die Suche bleibt bis 1200px -- auf dem 13-Zoll-
MacBook (1440px) fehlte sie vorher schon. */
@media (max-width: 1500px) {
.top-time { display: none; }
}
@media (max-width: 1400px) {
.top-profil-name .lbl { display: none; }
}
@media (max-width: 1200px) {
/* Unter dieser Breite bliebe vom Suchfeld nur noch ein Stummel; die Seite
Inventar hat ohnehin ein eigenes, vollwertiges Feld. */
.top-right > .top-suche { display: none; }
/* Ab hier nur noch Symbole plus Zahl: "Agenten 6/9" wird zu "● 6/9",
"● Online" zum bloßen Punkt. Die Information steckt in Punktfarbe und
Zahl, das Wort war die Verpackung. Beide behalten ihr title-Attribut. */
.top-agenten .lbl, .top-status .lbl { display: none; }
/* Letzte Einsparung, damit die Gruppe einzeilig bleibt: Abmelden wird zum
Ein-/Aus-Symbol. Beschriftung steckt in title und .sr-only. */
.top-abmelden-ico { display: inline; font-size: 0.95rem; }
.top-abmelden-wort { display: none; }
}
.container {
max-width: 1180px;
width: 100%;
margin: 0 auto;
padding: 26px 32px 60px;
animation: var(--anim-rise) .4s ease both;
}
@keyframes rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* ==========================================================================
FLASH / PANELS / GRID
========================================================================== */
.flash {
padding: 10px 16px;
border-radius: 8px 8px 8px var(--r-cut);
margin-bottom: 16px;
font-size: 0.92rem;
font-weight: 600;
letter-spacing: calc(0.04em * var(--tracking-faktor));
border: 1px solid;
animation: var(--anim-rise) .3s ease both;
}
.flash-success { background: rgba(var(--success-rgb), 0.1); color: var(--success); border-color: rgba(var(--success-rgb), 0.35); }
.flash-error { background: rgba(var(--danger-rgb), 0.1); color: var(--danger); border-color: rgba(var(--danger-rgb), 0.35); }
.flash-warning { background: rgba(var(--warn-rgb), 0.1); color: var(--warn); border-color: rgba(var(--warn-rgb), 0.35); }
/* Glass-Panel mit Neon-Kante oben */
.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-panel) var(--r-panel) var(--r-panel) var(--r-cut);
padding: 20px;
margin-bottom: 20px;
position: relative;
overflow: hidden;
box-shadow: var(--sh-karte);
transition: border-color .25s, box-shadow .25s;
}
.card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.35), transparent);
opacity: var(--deko-linie);
}
.card:hover {
border-color: rgba(var(--accent-rgb), 0.3);
box-shadow: var(--sh-karte-hover);
}
/* HUD-Eckwinkel unten rechts — „eckig trifft rund" ohne extra Markup */
.card::after {
content: "";
position: absolute;
right: 8px; bottom: 8px;
width: 12px; height: 12px;
border-right: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
opacity: 0;
transition: opacity .25s;
pointer-events: none;
}
.card:hover::after { opacity: 0.7; }
/* Nur für Screenreader (z. B. Spaltenüberschrift ohne sichtbaren Text) */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Sprungmarke zur Tastaturbedienung */
.skip-link {
position: absolute;
left: -9999px;
top: 8px;
z-index: 200;
padding: 10px 16px;
background: var(--panel-solid);
border: 1px solid var(--border-strong);
border-radius: 8px;
color: var(--cyan);
text-decoration: none;
font-weight: 700;
letter-spacing: calc(0.1em * var(--tracking-faktor));
text-transform: var(--ui-transform);
font-size: 0.8rem;
}
.skip-link:focus { left: 8px; box-shadow: var(--glow-cyan); }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
/* Feste Spaltenzahl: „Bestand" (3 Kacheln) und „Finanzen" (4 Kacheln) stehen
untereinander -- mit auto-fit bekämen sie unterschiedliche Spaltenbreiten
und die beiden Blöcke würden sichtbar gegeneinander verrutschen. */
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1040px) {
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---- KPI-Cards ---- */
.stat {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--r-panel) var(--r-panel) var(--r-panel) var(--r-cut);
padding: 16px;
text-align: left;
position: relative;
overflow: hidden;
box-shadow: var(--sh-kachel);
transition: transform .22s, border-color .22s, box-shadow .22s;
animation: var(--anim-rise) .45s ease both;
}
.grid .stat:nth-child(2) { animation-delay: .04s; }
.grid .stat:nth-child(3) { animation-delay: .08s; }
.grid .stat:nth-child(4) { animation-delay: .12s; }
.grid .stat:nth-child(5) { animation-delay: .16s; }
.grid .stat:nth-child(6) { animation-delay: .20s; }
.grid .stat:nth-child(7) { animation-delay: .24s; }
.stat::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--cyan), transparent);
opacity: calc(0.28 * var(--deko-linie));
transition: opacity .22s;
}
/* Ecken-Marker wie ein HUD-Ziel — nur beim Hover, sonst zu viel Rauschen */
.stat::after {
content: "";
position: absolute;
right: 6px; top: 6px;
width: 10px; height: 10px;
border-top: 1px solid var(--border-strong);
border-right: 1px solid var(--border-strong);
opacity: 0;
transition: opacity .22s;
}
.stat:hover::after { opacity: 0.6; }
.stat:hover {
transform: translateY(-3px);
border-color: var(--border-strong);
box-shadow: var(--sh-kachel-hover);
}
.stat:hover::before { opacity: var(--deko-linie); }
/* Label über den Wert: die Kachel liest sich dann wie eine Beschriftung mit
Ergebnis, und die große Zahl steht als letztes im Blick. */
.stat .label {
color: var(--muted);
font-size: 0.75rem;
letter-spacing: calc(0.14em * var(--tracking-faktor));
text-transform: var(--ui-transform);
font-weight: 600;
margin-bottom: 8px;
}
.stat .value {
/* Bewusst NICHT Orbitron: dessen Null ist durchgestrichen und sieht dann
aus wie das Ø-Zeichen für „Durchschnitt". Bei Geldbeträgen fatal. */
font-family: var(--font-body);
letter-spacing: calc(0.01em * var(--tracking-faktor));
/* skaliert mit, damit vierstellige Beträge die Karte nicht sprengen */
font-size: clamp(1.5rem, 2.4vw, 2.05rem);
font-weight: 700;
color: var(--text-strong);
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.18);
white-space: nowrap;
line-height: 1.05;
}
/* Akzent-Varianten */
.stat.accent-orange .value { text-shadow: 0 0 10px rgba(var(--accent2-rgb), 0.22); color: var(--stat-accent2-text); }
.stat.accent-orange::before { background: linear-gradient(90deg, transparent, var(--orange), transparent); }
.stat.accent-green .value { text-shadow: 0 0 10px rgba(var(--success-rgb), 0.22); color: var(--stat-success-text); }
.stat.accent-green::before { background: linear-gradient(90deg, transparent, var(--success), transparent); }
/* ==========================================================================
HUD-ELEMENTE: Ringe, Progressbars, Statuszeile
========================================================================== */
.hud-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 16px;
}
.hud-ring-box { display: flex; align-items: center; gap: 16px; }
/* Zwei Quoten nebeneinander in einer Karte */
.hud-pair {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 18px 24px;
}
.hud-ring { width: 92px; height: 92px; flex: 0 0 auto; position: relative; }
.hud-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hud-ring .track { fill: none; stroke: rgba(var(--accent-rgb), 0.14); stroke-width: 8; }
.hud-ring .bar {
fill: none;
stroke: var(--cyan);
stroke-width: 8;
stroke-linecap: round;
filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.7));
stroke-dasharray: 264; /* 2 * PI * r(42) */
stroke-dashoffset: 264;
animation: ringIn 1.2s cubic-bezier(.4, 0, .2, 1) .2s forwards;
}
.hud-ring.orange .bar { stroke: var(--orange); filter: drop-shadow(0 0 5px rgba(var(--accent2-rgb), 0.7)); }
@keyframes ringIn { to { stroke-dashoffset: var(--target, 264); } }
.hud-ring-label { position: relative; }
/* Prozentwert sitzt im Ring: bei 0 % ist der Ring sonst komplett leer und
sieht aus, als wäre die Anzeige kaputt. */
.hud-ring-val {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body); /* siehe .stat .value — Orbitron-Null */
font-weight: 700;
font-size: 1.15rem;
color: var(--text-strong);
font-variant-numeric: tabular-nums;
text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
}
.hud-ring-sub {
font-size: 0.78rem;
color: var(--text);
text-transform: var(--ui-transform);
letter-spacing: calc(0.12em * var(--tracking-faktor));
font-weight: 600;
}
.hud-ring-note {
font-size: 0.78rem;
color: var(--muted);
margin-top: 3px;
font-variant-numeric: tabular-nums;
}
/* Futuristischer Fortschrittsbalken mit Scanner-Schimmer */
.tech-bar {
height: 8px;
border-radius: 4px;
background: rgba(var(--accent-rgb), 0.08);
border: 1px solid var(--border);
overflow: hidden;
position: relative;
}
.tech-bar .fill {
height: 100%;
width: 0;
border-radius: 4px;
background: linear-gradient(90deg, var(--blue), var(--cyan));
box-shadow: var(--glow-cyan);
animation: barIn 1.1s cubic-bezier(.4, 0, .2, 1) .3s forwards;
position: relative;
}
.tech-bar .fill.orange { background: linear-gradient(90deg, var(--accent2-dark), var(--orange)); box-shadow: var(--glow-orange); }
@keyframes barIn { to { width: var(--target, 0%); } }
.tech-bar .fill::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(var(--tint-rgb), 0.35), transparent);
transform: translateX(-100%);
/* Begrenzt statt infinite: Dauer-Animationen halten den Compositor
permanent wach und kosten am Handy spürbar Akku und Flüssigkeit. */
animation: scan 2.6s ease-in-out 1.4s 3;
}
@keyframes scan { to { transform: translateX(100%); } }
.tech-bar-row { margin-bottom: 14px; }
.tech-bar-head {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: calc(0.1em * var(--tracking-faktor));
color: var(--muted);
text-transform: var(--ui-transform);
margin-bottom: 6px;
}
.tech-bar-head b { color: var(--text); font-weight: 400; }
/* ==========================================================================
TABELLEN
========================================================================== */
table {
width: 100%;
border-collapse: collapse;
background: transparent;
border-radius: 10px;
overflow: hidden;
}
th, td {
text-align: left;
padding: 11px 12px;
border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
font-size: 0.92rem;
}
th {
background: rgba(var(--accent-rgb), 0.05);
color: var(--cyan);
font-family: var(--font-mono);
font-weight: 400;
font-size: 0.72rem;
text-transform: var(--ui-transform);
letter-spacing: calc(0.14em * var(--tracking-faktor));
}
tbody tr, table tr { transition: background .15s; }
tr:hover td { background: rgba(var(--accent-rgb), 0.04); }
tbody tr:last-child td { border-bottom: none; }
td a { text-decoration: none; }
td a:hover { text-shadow: var(--glow-cyan); }
/* Zahlenspalten: rechtsbündig + Ziffern gleicher Breite → Beträge fluchten
untereinander und lassen sich zeilenweise vergleichen. */
th.num, td.num {
text-align: right;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
white-space: nowrap;
}
/* Freitext-Spalten dürfen nicht die ganze Tabelle sprengen. */
td.cell-text { max-width: 34ch; line-height: 1.45; }
/* Delta gegenüber dem aktuellen Preis */
.delta { font-family: var(--font-mono); font-size: 0.78rem; margin-left: 6px; }
.delta-down { color: var(--warn); }
.delta-up { color: var(--success); }
/* Horizontales Scrollen bleibt in der Tabelle, statt die Seite zu verbreitern. */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Noch nicht abgehakte Benachrichtigung. Bewusst über einen Balken links und
nicht nur über Schriftfarbe markiert -- Farbe allein ist bei Rot-Grün-Schwäche
keine verlässliche Unterscheidung. */
tr.row-unread td { background: var(--unread-bg); }
tr.row-unread td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
/* ==========================================================================
BUTTONS / BADGES / FORMULARE
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 36px;
padding: 8px 18px;
border-radius: 8px 8px 8px var(--r-cut);
background: var(--btn-bg);
color: var(--btn-fg);
text-decoration: none;
border: 1px solid var(--btn-border);
cursor: pointer;
font-size: 0.82rem;
font-weight: 700;
font-family: var(--font-body);
text-transform: var(--ui-transform);
letter-spacing: calc(0.1em * var(--tracking-faktor));
transition: box-shadow .2s, transform .2s, background .2s, color .2s;
}
.btn:hover {
box-shadow: var(--glow-cyan);
transform: translateY(-1px);
color: var(--btn-fg-hover);
}
.btn:active { transform: translateY(0); }
.btn-secondary {
background: rgba(var(--muted-rgb), 0.12);
color: var(--text);
border-color: rgba(var(--muted-rgb), 0.4);
}
.btn-secondary:hover { box-shadow: 0 0 10px rgba(var(--muted-rgb), 0.4); }
.btn-danger {
background: rgba(var(--danger-rgb), 0.14);
color: var(--danger);
border-color: rgba(var(--danger-rgb), 0.45);
}
.btn-danger:hover { box-shadow: 0 0 10px rgba(var(--danger-rgb), 0.5); }
.btn-outline { background: transparent; color: var(--cyan); border: 1px solid var(--border-strong); }
/* Ohne diese Regel sieht ein gesperrter Knopf aus wie ein bereiter -- beim
Sammelloeschen im Inventar waere das die falsche Einladung. */
.btn:disabled, .btn:disabled:hover {
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
}
.badge {
padding: 3px 10px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
font-family: var(--font-mono);
text-transform: var(--ui-transform);
letter-spacing: calc(0.1em * var(--tracking-faktor));
background: rgba(var(--muted-rgb), 0.15);
color: var(--muted);
border: 1px solid rgba(var(--muted-rgb), 0.3);
}
.badge-online { background: rgba(var(--success-rgb), 0.12); color: var(--success); border-color: rgba(var(--success-rgb), 0.4); }
.badge-sold { background: rgba(var(--blue-rgb), 0.12); color: var(--blue-text); border-color: rgba(var(--blue-rgb), 0.4); }
.badge-draft { background: rgba(var(--warn-rgb), 0.12); color: var(--warn); border-color: rgba(var(--warn-rgb), 0.4); }
.badge-ok { background: rgba(var(--success-rgb), 0.12); color: var(--success); border-color: rgba(var(--success-rgb), 0.4); }
form label {
display: block;
margin-top: 12px;
margin-bottom: 4px;
font-size: 0.78rem;
font-weight: 600;
color: var(--muted);
text-transform: var(--ui-transform);
letter-spacing: calc(0.12em * var(--tracking-faktor));
}
/* password und email standen hier lange nicht drin. Folge: jedes Passwortfeld
der App (Anmeldung, Passwort ändern, Benutzerverwaltung) blieb ein weißer
Browser-Kasten mit schwarzer Schrift auf dunklem Grund -- auf der Anmelde-
seite der einzige helle Fleck überhaupt.
[type=search] gehört bewusst NICHT dazu: die Topbar-Suche bringt ihre eigene
Gestaltung mit (.top-suche input), steht aber weiter oben im Stylesheet und
würde bei gleicher Spezifität von hier aus überschrieben. */
input[type=text], input[type=password], input[type=email],
input[type=number], input[type=date], input[type=file],
select, textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: 8px 8px 8px var(--r-cut);
font-size: 0.95rem;
font-family: var(--font-body);
background: var(--surface-input);
color: var(--text);
transition: border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--border-strong);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12), var(--glow-cyan);
}
input::placeholder, textarea::placeholder { color: var(--placeholder); }
textarea { min-height: 100px; }
.checkbox-group label {
display: inline-block;
margin-right: 16px;
font-weight: 500;
color: var(--text);
text-transform: none;
letter-spacing: calc(0.02em * var(--tracking-faktor));
font-size: 0.92rem;
}
.checkbox-group input { width: auto; margin-right: 6px; accent-color: var(--cyan); }
.warning-box {
background: rgba(var(--accent2-rgb), 0.08);
border: 1px solid rgba(var(--accent2-rgb), 0.4);
color: var(--orange);
padding: 14px 16px;
border-radius: 10px 10px 10px var(--r-cut);
font-size: 0.9rem;
margin-bottom: 16px;
}
.section-title {
font-family: var(--font-head);
font-size: 0.86rem;
font-weight: 700;
margin-bottom: 14px;
text-transform: var(--ui-transform);
letter-spacing: calc(0.16em * var(--tracking-faktor));
color: var(--cyan);
display: flex;
align-items: center;
gap: 10px;
}
.section-title::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.35), transparent);
}
/* ==========================================================================
KUNDEN-CHAT
========================================================================== */
.chat-draft {
border: 1px solid var(--border);
border-left: 3px solid var(--cyan);
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 14px;
background: rgba(var(--accent-rgb), 0.04);
}
.chat-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 0.9rem;
margin-bottom: 8px;
}
.chat-reason {
background: rgba(var(--warn-rgb), 0.1);
color: var(--warn);
border: 1px solid rgba(var(--warn-rgb), 0.3);
border-radius: 6px;
padding: 6px 10px;
font-size: 0.82rem;
margin-bottom: 8px;
}
.chat-line { display: flex; margin-bottom: 10px; }
.chat-line.von-kunde { justify-content: flex-start; }
.chat-line.von-mir { justify-content: flex-end; }
.chat-bubble {
max-width: 70%;
padding: 10px 13px;
border-radius: 12px;
font-size: 0.92rem;
white-space: pre-wrap;
word-break: break-word;
background: rgba(var(--muted-rgb), 0.12);
border: 1px solid rgba(var(--muted-rgb), 0.2);
}
.chat-line.von-mir .chat-bubble {
background: rgba(var(--accent-rgb), 0.09);
border-color: var(--border);
}
.chat-bubble.offen {
background: rgba(var(--accent2-rgb), 0.07);
border: 1px dashed rgba(var(--accent2-rgb), 0.5);
}
.chat-stamp { font-size: 0.78rem; color: var(--muted); margin-top: 4px; font-family: var(--font-mono); }
.inline-form { display: inline-block; margin-top: 8px; }
.muted { color: var(--muted); font-size: 0.85rem; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
/* Aktionsleiste einer Seite. Seit der Seitentitel oben in der Topbar steht,
stehen hier nur noch die Buttons — deshalb rechtsbündig statt space-between. */
.page-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Leerzustand: ruhiger Platzhalter statt nackter Textzeile */
.empty {
padding: 22px 16px;
text-align: center;
color: var(--muted);
font-size: 0.9rem;
border: 1px dashed var(--border);
border-radius: 10px 10px 10px var(--r-cut);
background: rgba(var(--accent-rgb), 0.02);
}
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 26px; }
.text-muted { color: var(--muted); font-size: 0.85rem; }
.photo-thumb {
width: 60px; height: 60px;
object-fit: cover;
border-radius: 6px;
margin-right: 6px;
cursor: zoom-in;
border: 1px solid var(--border);
transition: box-shadow .2s, transform .2s;
}
.photo-thumb:hover { box-shadow: var(--glow-cyan); transform: scale(1.05); }
/* Vorschaubild in der Bestandsliste (320-px-WebP aus dem Speicher) */
.photo-thumb-klein { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
td.sp-foto, th.sp-foto { width: 52px; padding-right: 0; }
/* ==========================================================================
LIGHTBOX
========================================================================== */
.lightbox-overlay {
display: none;
position: fixed;
inset: 0;
background: var(--surface-overlay);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 32px;
cursor: zoom-out;
backdrop-filter: blur(6px);
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
max-width: 100%;
max-height: 100%;
border-radius: 8px;
border: 1px solid var(--border-strong);
box-shadow: var(--sh-lightbox);
}
.lightbox-close {
position: absolute;
top: 20px; right: 28px;
color: var(--cyan);
font-size: 2rem;
line-height: 1;
cursor: pointer;
user-select: none;
text-shadow: var(--glow-cyan);
}
/* ==========================================================================
VERSANDSCHEINE
========================================================================== */
.label-pages { display: flex; flex-wrap: wrap; gap: 20px; }
.label-page {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px;
border: 1px solid var(--border);
border-radius: 8px 8px 8px var(--r-cut);
background: var(--panel);
}
/* Paket Versand (05.11.2026): Die Vorschau ist nur noch im Bearbeitungsmodus
ein Zeichenfeld. Vorher stand hier dauerhaft touch-action: none -- auf dem
iPhone wurde jede Wischbewegung über der Vorschau zu einem neuen Zuschnitt. */
.label-crop {
position: relative;
display: block;
width: 240px;
flex: 0 0 auto;
cursor: default;
touch-action: auto;
user-select: none;
background: var(--papier); /* Labels bleiben weiß — Druckvorlage */
border: 1px solid var(--border-strong);
line-height: 0;
}
.zuschnitt-aktiv .label-crop {
cursor: crosshair;
touch-action: none;
outline: 2px dashed var(--cyan);
outline-offset: 3px;
}
.label-crop .crop-box { opacity: 0.55; }
.zuschnitt-aktiv .label-crop .crop-box { opacity: 1; }
.zuschnitt-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zuschnitt-hinweis { flex: 1 1 100%; margin: 0; font-size: 0.9rem; color: var(--muted); }
/* .btn setzt display: inline-flex und schlägt damit das hidden-Attribut. */
.schein-karte [hidden], .druck-kopf [hidden], .zuschnitt-leiste[hidden] { display: none; }
.label-crop img { width: 100%; height: auto; display: block; pointer-events: none; }
.crop-box {
position: absolute;
border: 2px solid var(--cyan);
background: rgba(var(--accent-rgb), 0.15);
pointer-events: none;
box-shadow: var(--glow-cyan);
}
.label-page-meta {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.85rem;
min-width: 90px;
}
.label-page-meta label { margin: 0; font-weight: 500; text-transform: none; letter-spacing: calc(0.02em * var(--tracking-faktor)); }
.label-page-meta input { width: auto; margin-right: 6px; }
.label-result {
width: 120px; height: 180px;
object-fit: contain;
background: var(--papier);
border: 1px solid var(--border-strong);
border-radius: 4px;
cursor: zoom-in;
margin: 0;
}
.label-select { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.label-select input { width: auto; margin: 0; }
.label-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.print-frame {
width: 100%;
height: 70vh;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--panel-solid);
}
/* Kopf der Versandschein-Seite und der Druckseite: Stand + großer Druckknopf. */
.schein-kopf, .druck-kopf {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.schein-kopf-titel { margin: 4px 0 6px; font-size: 1.2rem; }
.btn-gross { min-height: 48px; padding: 12px 24px; font-size: 0.95rem; }
.druck-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.druck-regel { flex: 1 1 100%; margin: 0; }
.druck-status {
flex: 1 1 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
padding: 10px 14px;
border: 1px solid rgba(var(--success-rgb), 0.4);
border-radius: 8px;
background: rgba(var(--success-rgb), 0.08);
}
.druck-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.druck-liste li { display: flex; align-items: center; gap: 12px; }
/* Vorschau als Bild statt eingebettetem PDF: Caddy sperrt Rahmen (X-Frame-Options: DENY). */
.druck-vorschau {
flex: 0 0 auto;
width: 72px;
height: 108px;
object-fit: contain;
background: var(--papier);
border: 1px solid var(--border-strong);
border-radius: 4px;
}
.druck-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.druck-nr { font-family: var(--font-mono); color: var(--muted); }
.druck-name { font-weight: 600; }
.druck-aufdruck { font-size: 0.9rem; }
.schein-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.schein-gedruckt-am { font-size: 0.8rem; }
.schein-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.schein-filter .aktiv { border-color: var(--cyan); background: rgba(var(--accent-rgb), 0.12); }
.schein-erledigt-liste > summary { cursor: pointer; font-weight: 600; padding: 12px 0 4px; }
.schein-erledigt .label-pages { opacity: 0.85; }
.versand-stand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* ==========================================================================
DIENST-AMPEL (Dashboard) — vorher Inline-Style im Template
========================================================================== */
.dienst-liste { display: flex; flex-direction: column; gap: 8px; }
.dienst-zeile { display: flex; align-items: center; gap: 10px; }
.dienst-punkt { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dienst-gruen { background: var(--success); box-shadow: 0 0 6px rgba(var(--success-rgb), .6); }
.dienst-gelb { background: var(--warn); box-shadow: 0 0 6px rgba(var(--warn-rgb), .6); }
.dienst-rot { background: var(--danger); box-shadow: 0 0 6px rgba(var(--danger-rgb), .6); }
/* grau = Agent läuft nur auf Abruf, Stille ist kein Fehler */
.dienst-grau { background: var(--muted); opacity: .7; }
/* Agenten-Zentrale: Karten-Raster mit Mini-Log pro Agent */
/* Kopfzeile: Titel links, Zählwerk rechts. Auf schmalen Karten rutscht das
Zählwerk unter den Titel, statt ihn zu quetschen. */
.kz-kopf {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-4);
}
.kz-kopf .section-title { margin-bottom: 0; }
.kz-bilanz {
margin-left: auto;
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
font-size: 0.78rem;
color: var(--muted);
}
.kz-zahl { display: inline-flex; align-items: baseline; gap: 5px; }
.kz-zahl b {
font-family: var(--font-mono);
font-size: 0.95rem;
font-variant-numeric: tabular-nums;
}
.kz-zahl.ampel-rot b { color: var(--danger); }
.kz-zahl.ampel-gelb b { color: var(--warn); }
.kz-zahl.ampel-gruen b { color: var(--success); }
.kz-zahl.ampel-grau b { color: var(--muted); }
.agenten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
/* Die Karte ist ein Link auf den Chat mit genau diesem Agenten. Deshalb hier
die Link-Deko zurücknehmen -- die Karte soll wie eine Kachel wirken, nicht
wie ein blauer Textlink. */
.agent-karte {
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-left: 2px solid var(--muted);
border-radius: 10px 10px 10px var(--r-cut);
padding: 13px 14px;
background: rgba(var(--accent-rgb), 0.02);
color: inherit;
text-decoration: none;
transition: border-color var(--t-normal), background var(--t-normal),
transform var(--t-normal);
}
.agent-karte:hover {
background: rgba(var(--accent-rgb), 0.05);
border-color: var(--border-strong);
transform: translateY(-1px);
}
.agent-karte:focus-visible {
outline: 2px solid var(--border-strong);
outline-offset: 2px;
}
.agent-karte.ampel-gruen { border-left-color: var(--success); }
.agent-karte.ampel-gelb { border-left-color: var(--warn); }
.agent-karte.ampel-rot { border-left-color: var(--danger); }
.agent-karte.ampel-grau { border-left-color: var(--muted); }
.agent-kopf { display: flex; align-items: center; gap: 9px; }
.agent-kopf b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zustand zusätzlich als Wort: die Ampelfarbe allein ist bei Rot-Grün-Schwäche
keine verlässliche Unterscheidung. */
.agent-status {
margin-left: auto;
flex: 0 0 auto;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: calc(0.12em * var(--tracking-faktor));
padding: 2px 7px;
border-radius: 4px;
border: 1px solid;
text-transform: var(--ui-transform);
}
.ampel-gruen .agent-status { color: var(--success); border-color: rgba(var(--success-rgb), .35); background: rgba(var(--success-rgb), .08); }
.ampel-gelb .agent-status { color: var(--warn); border-color: rgba(var(--warn-rgb), .35); background: rgba(var(--warn-rgb), .08); }
.ampel-rot .agent-status { color: var(--danger); border-color: rgba(var(--danger-rgb), .35); background: rgba(var(--danger-rgb), .08); }
.ampel-grau .agent-status { color: var(--muted); border-color: rgba(var(--muted-rgb), .3); background: rgba(var(--muted-rgb), .08); }
.agent-detail { margin: 7px 0 0; line-height: 1.45; }
.agent-log {
list-style: none;
margin: 10px 0 0;
padding: 9px 0 0;
border-top: 1px dashed var(--border);
font-size: 0.8rem;
line-height: 1.5;
}
.agent-log li {
display: flex;
gap: 8px;
margin-top: 3px;
color: var(--text);
}
/* Nur der Text kürzt -- die Uhrzeit bleibt immer vollständig lesbar. */
.agent-log li > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-zeit { flex: 0 0 auto; color: var(--muted); font-family: var(--font-mono); font-size: 0.78rem; }
/* ==========================================================================
MOBILE — PWA vom Home-Bildschirm
========================================================================== */
/* Zweiter Faktor (Paket Selbstanmeldung): QR-Code und Wiederherstellungscodes */
.qr-code { display: inline-block; padding: 10px; background: var(--qr-papier); border-radius: 8px; margin: 8px 0; }
.qr-code svg { display: block; width: 200px; height: 200px; }
.qr-schluessel, .codes-liste code { font-family: var(--font-mono); letter-spacing: 0.08em; }
.codes-liste { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.codes-liste li { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; }
/* Plaene (Paket Plaene): Verbrauchsbalken unter "Meine Einstellungen" */
.plan-zeile { margin: 10px 0; }
.plan-kopf { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.plan-balken { width: 100%; height: 10px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
background: transparent; appearance: none; -webkit-appearance: none; accent-color: var(--cyan); }
.plan-balken::-webkit-progress-bar { background: transparent; }
.plan-balken::-webkit-progress-value { background: var(--cyan); }
.plan-balken::-moz-progress-bar { background: var(--cyan); }
.plan-balken-warn { accent-color: var(--danger); }
.plan-balken-warn::-webkit-progress-value { background: var(--danger); }
.plan-balken-warn::-moz-progress-bar { background: var(--danger); }
@media (max-width: 800px) {
.app { flex-direction: column; }
/* Sidebar wird zur festen Bottom-Tab-Bar wie in einer nativen App:
Icons oben, Label darunter, horizontal wischbar, Daumen-erreichbar.
Vorher klebte sie oben und fraß wertvolle Bildschirmhöhe. */
/* Bottom-Navigation mit fuenf festen Tabs (Paket B, 03.11.2026): vier
Primaer-Seiten plus "Mehr", das ein Sheet mit der ganzen gruppierten
Liste oeffnet. Vorher stand die komplette Sidebar-Liste (beim Admin 22
Eintraege) waagerecht scrollbar in der Leiste -- der gesuchte Eintrag
war fast nie im Bild, man wischte blind. */
.sidebar {
position: fixed;
left: 0; right: 0; bottom: 0;
top: auto;
width: 100%;
height: auto;
flex-direction: row;
align-items: stretch;
gap: 0;
padding: 0;
border-right: none;
border-top: 1px solid var(--border);
background: var(--surface-nav);
overflow: visible;
z-index: 100;
box-shadow: var(--sh-nav);
}
/* Marke, Fuss und Gruppentitel gehoeren in die senkrechte Liste. */
.side-brand, .side-foot, .side-gruppe { display: none; }
.side-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
width: 100%;
min-height: 56px;
padding-bottom: env(safe-area-inset-bottom);
}
.side-nav > a { display: none; }
.side-nav > a.nav-primaer,
.side-nav > .nav-mehr {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 3px;
min-width: 0;
min-height: 56px;
padding: 6px 2px;
font-size: 0.66rem;
letter-spacing: 0;
text-transform: var(--ui-transform);
text-align: center;
border-radius: 10px;
white-space: nowrap;
overflow: hidden;
}
/* Lange Beschriftungen ("Versandscheine") kuerzen statt beidseitig
abzuschneiden -- 78px Spaltenbreite reichen nicht fuer jedes Wort. */
.side-nav > a.nav-primaer .lbl, .side-nav > .nav-mehr .lbl {
display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.side-nav .ico { width: auto; font-size: 1.15rem; }
.side-nav a:hover { transform: none; background: none; }
.side-nav a.active::before { display: none; }
.side-nav a.active, .side-nav > .nav-mehr.active {
background: rgba(var(--accent-rgb), 0.12);
border-color: transparent;
color: var(--text-strong);
}
.side-nav a.active .ico, .side-nav > .nav-mehr.active .ico { color: var(--cyan); }
/* Sheet ueber der Leiste mit der kompletten gruppierten Liste. Halb-
transparenter Hintergrund schliesst beim Antippen (app.js). */
.nav-sheet-hintergrund {
position: fixed;
inset: 0;
bottom: calc(56px + env(safe-area-inset-bottom));
background: var(--surface-overlay);
opacity: 0.6;
z-index: 100;
}
.nav-sheet {
position: fixed;
left: 0; right: 0;
bottom: calc(56px + env(safe-area-inset-bottom));
max-height: 70vh;
max-height: 70dvh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 6px 10px 12px;
background: var(--panel-solid);
border-top: 1px solid var(--border);
border-radius: 16px 16px 0 0;
box-shadow: var(--sh-nav);
z-index: 101;
}
.sidebar.offen .nav-sheet, .sidebar.offen .nav-sheet-hintergrund { display: block; }
.nav-sheet .side-gruppe { display: block; margin: 12px 8px 4px; padding: 0; }
.nav-sheet a {
display: flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 0 12px;
border-radius: var(--r-md);
color: var(--text);
text-decoration: none;
font-weight: 600;
font-size: 15px;
}
.nav-sheet a .ico { width: 22px; text-align: center; color: var(--muted); font-size: 1rem; }
.nav-sheet a.active { background: var(--surface-3); color: var(--text-strong); }
.nav-sheet a.active .ico { color: var(--cyan); }
/* Topbar: kompakt, ohne Blur (am Handy die teuerste Einzeloperation).
Uhr raus — die Statusleiste des Handys zeigt die Zeit ohnehin. */
.topbar {
flex-wrap: wrap;
gap: 10px;
padding: 10px 12px;
padding-top: calc(10px + env(safe-area-inset-top));
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: var(--surface-top-mobil);
}
.top-right { gap: 8px; }
.top-time { display: none; }
.top-status .lbl { display: none; } /* Pulspunkt genügt */
.account-switcher select { min-height: 44px; max-width: 44vw; }
/* Trenner weg: bei acht Pixeln Abstand stehen die Striche dichter an den
Symbolen als die Symbole aneinander. */
.top-right > .top-status,
.top-right > .account-switcher,
.top-right > .top-profil { border-left: none; padding-left: 0; }
/* Ampel und Glocke bleiben -- gerade am Handy will man sehen, ob ein
Agent hängt, ohne die Seite Agenten zu öffnen. Nur der Text fällt weg. */
.top-agenten { padding: 5px 8px; }
.top-glocke, .top-agenten { min-height: 34px; }
/* Größerer Tippbereich; das Einklappen auf das Symbol erledigt bereits
die 1050px-Abfrage weiter oben. */
.top-abmelden { padding: 8px 10px; }
/* Unten Platz lassen, damit Tab-Bar (56px) und Support-Knopf (44px +
Rand) die letzte Zeile keiner Liste verdecken. */
.container { padding: 14px 12px calc(56px + env(safe-area-inset-bottom) + 72px); }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat { padding: 13px 14px; }
.card { padding: 16px 14px; }
.hud-row { grid-template-columns: 1fr; }
.hud-ring { width: 72px; height: 72px; }
/* Hover-Effekte sind Touch-Ballast: lösen beim Tippen kurz aus und
machen das Scrollen unruhig. */
.stat:hover, .card:hover, .btn:hover, .photo-thumb:hover { transform: none; box-shadow: none; }
table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* 16px verhindert, dass iOS beim Antippen eines Feldes hineinzoomt.
Die Typen stehen ausdruecklich da: die Grundregel input[type=text] ist
spezifischer als ein blosses "input" und gewann sonst mit 0.95rem. */
input, input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=search], select, textarea, button, .btn { font-size: 16px; }
/* komfortable Touch-Ziele */
.btn { min-height: 44px; }
td.cell-text { max-width: none; }
.flex-between { flex-wrap: wrap; gap: 8px; }
.print-frame { height: 55vh; }
}
/* ==========================================================================
AMBIENT — „das System lebt"
Gehört zu static/ambient.js. Alle Anzeigen stammen aus echten
Browser-Ereignissen, nicht aus erfundenen Werten.
========================================================================== */
/* ---- Cursor-Licht: weicher Schein folgt dem Zeiger über die Panels ---- */
.card {
background:
radial-gradient(260px circle at var(--mx, -300px) var(--my, -300px), rgba(var(--accent-rgb), 0.07), transparent 62%),
var(--panel);
}
.stat {
background:
radial-gradient(200px circle at var(--mx, -300px) var(--my, -300px), rgba(var(--accent-rgb), 0.09), transparent 60%),
var(--panel);
}
.stat.accent-orange {
background:
radial-gradient(200px circle at var(--mx, -300px) var(--my, -300px), rgba(var(--accent2-rgb), 0.10), transparent 60%),
var(--panel);
}
.stat.accent-green {
background:
radial-gradient(200px circle at var(--mx, -300px) var(--my, -300px), rgba(var(--success-rgb), 0.10), transparent 60%),
var(--panel);
}
/* ---- Boot-Sweep beim Seitenaufbau ---- */
.boot-sweep {
position: fixed;
left: 0; right: 0; top: 0;
height: 26vh;
z-index: 900;
pointer-events: none;
background: linear-gradient(180deg,
transparent 0%,
rgba(var(--accent-rgb), 0.03) 44%,
rgba(var(--accent-rgb), 0.20) 50%,
rgba(var(--accent-rgb), 0.03) 56%,
transparent 100%);
animation: bootSweep .6s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes bootSweep {
from { transform: translateY(-26vh); opacity: 1; }
to { transform: translateY(100vh); opacity: 0; }
}
/* ---- Statuszustände in der Topbar ---- */
.top-status .lbl { transition: color .3s; }
.top-status.is-idle { color: var(--muted); }
.top-status.is-idle .pulse-dot {
background: var(--muted);
box-shadow: 0 0 6px var(--muted);
animation-duration: 4.5s;
}
.top-status.is-offline { color: var(--danger); }
.top-status.is-offline .pulse-dot {
background: var(--danger);
box-shadow: 0 0 6px var(--danger);
animation-duration: .9s;
}
/* ---- SYS-LOG in der Sidebar ----
display:flex fuer .side-foot steht bei der Grundregel weiter oben. Hier
stand es bis 03.11.2026 OHNE Medienabfrage hinter der Handy-Abfrage, die
den Fuss versteckt -- gleiche Spezifitaet, spaetere Regel gewinnt, und der
Fuss mit Sys-Log und "SYS // V2.0" hing am Handy rechts in der Leiste. */
.sys-log {
font-family: var(--font-mono);
font-size: 0.6rem;
line-height: 1.7;
letter-spacing: calc(0.06em * var(--tracking-faktor));
color: var(--muted);
min-height: 2.1em;
}
.sys-log-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sys-log-line::before { content: "› "; opacity: 0.5; }
.sys-ver { font-size: 0.62rem; opacity: 0.45; }
/* ==========================================================================
ANMELDUNG — eigenständige Seite ohne Sidebar und Topbar
Wer hier landet, ist nicht angemeldet und soll nichts sehen, was er nicht
sehen darf. Die Seite trägt deshalb das Layout allein und muss den HUD-Ton
des Rests aus eigener Kraft treffen.
========================================================================== */
.login-seite {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
margin: 0;
padding: var(--sp-5) var(--sp-4);
}
/* Feste Breite statt Prozent: das Formular hat zwei kurze Felder, in die
Fläche gezogen wirkt es verloren. */
.login-box {
width: 100%;
max-width: 380px;
animation: var(--anim-rise) .45s ease both;
}
/* ---- Markenkopf: derselbe Schriftzug wie in der Sidebar ---- */
.login-marke {
font-family: var(--font-head);
font-weight: 900;
font-size: 1.5rem;
letter-spacing: calc(0.2em * var(--tracking-faktor));
color: var(--text-strong);
text-align: center;
text-shadow: var(--glow-cyan);
/* Das Sperren schiebt optisch nach rechts; der Ausgleich zentriert ihn. */
text-indent: 0.2em;
}
.login-marke .cursor {
color: var(--cyan);
animation: var(--anim-blink) 1.1s steps(1) infinite;
}
/* Kicker unter dem Namen. Bewusst eine reine Beschriftung und keine
erfundene Statusmeldung -- die Seite kennt vor der Anmeldung nichts,
worüber sie berichten könnte. */
.login-kicker {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: calc(0.28em * var(--tracking-faktor));
text-transform: var(--ui-transform);
color: var(--muted);
text-align: center;
margin-top: var(--sp-2);
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
}
/* Zwei Linien, die den Kicker einfassen: gibt dem Kopf einen Abschluss,
ohne eine weitere Farbe einzuführen. */
.login-kicker::before,
.login-kicker::after {
content: "";
height: 1px;
width: 34px;
background: linear-gradient(90deg, transparent, var(--border-strong));
}
.login-kicker::after { transform: scaleX(-1); }
.login-box .card { margin-top: var(--sp-5); margin-bottom: var(--sp-3); }
/* Das erste Feld im Formular bringt sonst seinen 12px-Rand von form label
mit und reißt eine Lücke unter die Kartenkante. */
.login-box form label:first-of-type { margin-top: 0; }
/* Exakt 16px, nicht die 0.95rem der übrigen Formulare: iOS Safari zoomt beim
Antippen automatisch in die Seite, sobald ein Feld kleiner als 16px schreibt.
Die Anmeldeseite hat keine Navigation, aus der man sich wieder herauszoomen
könnte, und die App läuft am iPhone vom Home-Bildschirm. */
.login-box input[type="text"],
.login-box input[type="password"] {
font-size: 16px;
min-height: 42px;
}
.login-box .btn {
width: 100%;
margin-top: var(--sp-5);
/* Etwas höher als der Standardknopf: er ist das einzige Ziel der Seite. */
min-height: 42px;
letter-spacing: calc(0.16em * var(--tracking-faktor));
}
/* Erklärtext der Ersteinrichtung. */
.login-hinweis {
font-size: 0.86rem;
line-height: 1.5;
color: var(--muted);
margin: 0 0 var(--sp-4);
padding-bottom: var(--sp-4);
border-bottom: 1px solid var(--border);
}
.login-hinweis strong { color: var(--text); }
/* Fußzeile: greift die Systemkennung aus der Sidebar auf, damit die
Anmeldeseite erkennbar zur selben Anwendung gehört. */
.login-fuss {
text-align: center;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: calc(0.14em * var(--tracking-faktor));
color: var(--muted);
opacity: 0.5;
}
/* Auf kleinen Geräten trägt die Karte die Seite allein -- der Rahmen um den
Rahmen (Seitenpolster plus Kartenrand) wird dort zu eng. */
@media (max-width: 420px) {
.login-seite { padding: var(--sp-4) var(--sp-3); }
.login-marke { font-size: 1.25rem; letter-spacing: calc(0.16em * var(--tracking-faktor)); }
.login-box .card { padding: var(--sp-4); }
}
/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ---------- Chancen ---------- */
.chancen-kopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
flex-wrap: wrap;
}
/* Acht Spalten passen auf kein Telefon, und die allgemeine Tabellenregel
arbeitet hier gegen .table-wrap: `width: 100%` presst die Tabelle in den
Rahmen, `overflow: hidden` schneidet die herausragenden Spalten (Marge,
Archivieren) danach ab. Der Rahmen bekommt nichts zu scrollen, weil die
Tabelle formal hineinpasst -- die Spalten sind schlicht weg. Mindestbreite
plus sichtbarer Ueberlauf geben dem Rahmen die echte Breite zu scrollen. */
.chancen-tabelle { min-width: 820px; overflow: visible; }
.chancen-abteilungen {
display: flex;
gap: var(--sp-2);
flex-wrap: wrap;
margin-top: var(--sp-3);
}
.abteilung {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border);
border-radius: 8px;
text-decoration: none;
color: var(--muted);
}
.abteilung-aktiv { border-color: var(--cyan); color: var(--text); }
.abteilung-still { opacity: 0.6; cursor: default; }
.abteilung-zahl {
font-variant-numeric: tabular-nums;
background: rgba(var(--tint-rgb), 0.06);
border-radius: 6px;
padding: 0 var(--sp-2);
}
/* Der Ausloeser sagt, WARUM die Ware knapp wird -- drei sehr verschiedene
Geschaefte. Farblich getrennt, weil man beim Ueberfliegen der Liste sofort
erkennen will, ob eine Frist laeuft (Nachfrage) oder nicht (Angebot endet). */
.ausloeser {
display: inline-block;
font-size: 0.75rem;
padding: 1px var(--sp-2);
border-radius: 6px;
border: 1px solid currentColor;
white-space: nowrap;
}
.ausloeser-nachfrage { color: var(--warn); }
.ausloeser-angebot_endet { color: var(--success); }
.ausloeser-produktion_knapp { color: var(--cyan); }
.chancen-filter {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-wrap: wrap;
}
.chancen-filter input[type="number"] { width: 6rem; }
/* Bestseller-Seite: die Verkaufsquote ist die Kernzahl -- heisse Gruppen
leuchten, duenne Stichproben treten zurueck, statt mit einer Zahl zu
protzen, die nur Rauschen ist. */
.bs-filter label { white-space: nowrap; }
.bs-feld { display: inline-flex; align-items: center; gap: 0.45rem; }
/* Die globale 100%-Breite der Felder wuerde aus der Filterzeile einen
Turm machen: hier sitzen Feld und Beschriftung nebeneinander. */
.bs-filter select, .bs-filter input[type="text"] { width: auto; min-width: 9rem; }
.bs-filter input[type="number"] { width: 5.5rem; }
.bs-filter input[type="checkbox"] { width: auto; margin-right: 0.3rem; }
.bs-quote { font-weight: 700; }
.bs-heiss { color: var(--success); text-shadow: 0 0 10px rgba(var(--success-rgb), 0.25); }
.bs-schwach { color: var(--muted); font-weight: 500; }
.bs-warn { color: var(--warn); }
/* Der Score ist die wichtigste Zahl der Seite -- er soll aus der Tabelle
herausstechen, ohne dass man die Legende nachschlagen muss. */
.chance-score {
display: inline-block;
min-width: 2.5rem;
padding: 0.15rem 0.5rem;
border-radius: 6px;
border: 1px solid transparent;
font-weight: 700;
text-align: center;
}
.stufe-extrem { background: rgba(var(--danger-rgb), 0.15); color: var(--danger); border-color: rgba(var(--danger-rgb), 0.45); }
.stufe-hoch { background: rgba(var(--warn-rgb), 0.15); color: var(--warn); border-color: rgba(var(--warn-rgb), 0.45); }
.stufe-interessant { background: rgba(var(--success-rgb), 0.13); color: var(--success); border-color: rgba(var(--success-rgb), 0.4); }
.stufe-watchlist { background: rgba(var(--muted-rgb), 0.13); color: var(--muted); border-color: rgba(var(--muted-rgb), 0.35); }
.stufe-ignorieren { background: transparent; color: var(--muted); border-color: rgba(var(--muted-rgb), 0.25); }
/* Unbestaetigte Chancen: sichtbar, aber zurueckgenommen. Sie stehen ohnehin
am Ende der Liste -- das Ausgrauen verhindert, dass ein alter Score beim
Ueberfliegen noch wie ein aktueller Befund wirkt. */
.chance-veraltet { opacity: 0.55; }
.chance-veraltet:hover { opacity: 1; }
/* ==========================================================================
NOTIZEN
Der Notizblock zwischen Mensch und Agenten (templates/notizen.html).
Zwei Spalten, in jeder eine Liste von Kacheln -- keine Tabelle, weil eine
Notiz aus Fliesstext besteht und Zeilen sonst unterschiedlich hoch werden.
========================================================================== */
.notiz-spalten {
display: grid;
/* Ab ~760px Gesamtbreite nebeneinander, darunter untereinander. Eine
Notizkachel unter 340px wird durch die Aktionsknöpfe unleserlich. */
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: var(--sp-4);
align-items: start;
}
.notiz-liste {
list-style: none;
margin: var(--sp-4) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.notiz {
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-cut);
padding: var(--sp-3);
}
/* Dringend wird über einen Balken links markiert, nicht nur über die Farbe
des Chips -- dieselbe Überlegung wie bei tr.row-unread. */
.notiz.ist-dringend { box-shadow: inset 3px 0 0 var(--danger); }
.notiz-kopf {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--sp-2);
}
.notiz-titel {
color: var(--text-strong);
font-weight: 600;
font-size: 1rem;
text-decoration: none;
line-height: 1.3;
}
.notiz-titel:hover { text-shadow: var(--glow-cyan); }
.notiz-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-1) var(--sp-3);
margin-top: var(--sp-2);
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--muted);
}
.notiz-faellig { color: var(--warn); }
/* Der Text kommt aus einem