/* ============================================================ KundenPerformance — Bosbach Consulting CI Farben direkt von bosbach-consulting.de uebernommen: Nahschwarz #0A0A0A Grundton der Marke Gold #D6B75F Akzent Goldverlauf #EFD686 -> #D6B75F (der "Goldeffekt") Silber #C9CBD1 zweite Serie, aus der Logo-Bergspitze Zwei Themes ueber dieselben Tokens. Dunkel ist der Standard und entspricht der Website. Hell haengt an . Die Kopfleiste bleibt in BEIDEN Themes schwarz — dort sitzt das Logo, und das gibt es nur in Weiss. Gold wird bewusst sparsam eingesetzt: Hauptbutton, aktive Navigation, Fokusring, erste Chart-Serie, Logo. Nicht mehr. Ein Werkzeug, in dem alles glitzert, ist ein Spielzeug. ============================================================ */ /* ---------- Schriften (lokal, kein CDN) ---------- */ @font-face { font-family: 'Open Sans'; src: url('/assets/fonts/open-sans.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Jost'; src: url('/assets/fonts/jost.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ---------- Tokens: Dunkel (Standard) ---------- */ :root { --bg: #0a0a0a; --surface: #141414; --surface-2: #1b1b1b; --border: #272727; --border-strong: #383838; --text: #ffffff; --text-muted: #9a9a9a; --text-faint: #6a6a6a; --gold: #d6b75f; --gold-lt: #efd686; --gold-ink: #d6b75f; /* Gold als Textfarbe */ --gold-grad: linear-gradient(90deg, #efd686, #d6b75f); --gold-soft: rgba(214, 183, 95, .12); --silver: #c9cbd1; --good: #57d68d; --good-bg: rgba(87, 214, 141, .12); --bad: #f4736b; --bad-bg: rgba(244, 115, 107, .12); --warn: #d6b75f; --warn-bg: rgba(214, 183, 95, .12); --input-bg: #0f0f0f; --chart-grid: rgba(255, 255, 255, .07); --shadow: 0 1px 2px rgba(0, 0, 0, .4); --shadow-lg: 0 8px 30px rgba(0, 0, 0, .5); --radius: 10px; --font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Jost', 'Century Gothic', 'Futura', var(--font); } /* ---------- Tokens: Hell ---------- */ body.theme-hell { --bg: #f6f6f4; --surface: #ffffff; --surface-2: #fafaf8; --border: #e5e3dd; --border-strong: #d3d0c8; --text: #0a0a0a; --text-muted: #6b6b6b; --text-faint: #909090; /* Reines Gold auf Weiss ist zu blass zum Lesen — als Textfarbe ein abgedunkeltes Gold, das den Kontrastwert schafft. */ --gold-ink: #8a6d1f; --gold-soft: rgba(214, 183, 95, .16); --silver: #8c9098; --good: #1a7f4b; --good-bg: #e8f5ee; --bad: #c0392b; --bad-bg: #fbeae8; --warn: #8a6d1f; --warn-bg: #fdf5e4; --input-bg: #ffffff; --chart-grid: rgba(0, 0, 0, .07); --shadow: 0 1px 3px rgba(20, 20, 20, .07), 0 1px 2px rgba(20, 20, 20, .04); --shadow-lg: 0 8px 30px rgba(20, 20, 20, .10); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--gold-ink); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--gold); color: #0a0a0a; } /* ============================================================ Kopfleiste — in beiden Themes schwarz ============================================================ */ .topbar { display: flex; align-items: center; gap: 34px; background: #0a0a0a; border-bottom: 1px solid #1e1e1e; padding: 0 26px; height: 64px; position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: center; } .brand:hover { text-decoration: none; } .brand img { height: 30px; width: auto; display: block; } /* Feine Goldlinie unter der Kopfleiste — der einzige reine Zierrat, und er kostet nichts an Lesbarkeit. */ .topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgba(214, 183, 95, 0) 0%, rgba(214, 183, 95, .55) 30%, rgba(214, 183, 95, .55) 70%, rgba(214, 183, 95, 0) 100%); } .nav { display: flex; gap: 6px; flex: 1; } .nav a { position: relative; padding: 21px 4px; color: #9a9a9a; font-size: 14px; font-weight: 600; letter-spacing: .3px; margin-right: 18px; } .nav a:hover { color: #fff; text-decoration: none; } .nav a.active { color: #fff; } .nav a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold-grad); } .user-menu { display: flex; align-items: center; gap: 16px; } .user-chip { display: flex; align-items: center; gap: 9px; color: #e8e8e8; font-size: 14px; } .user-chip:hover { text-decoration: none; color: #fff; } .user-chip img, .avatar-fallback { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .avatar-fallback { background: var(--gold-grad); color: #0a0a0a; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: var(--font-display); } .link-btn { background: none; border: none; color: #7a7a7a; cursor: pointer; font-size: 14px; font-family: inherit; padding: 0; } .link-btn:hover { color: #fff; text-decoration: underline; } .inline { display: inline; } /* Dunkel/Hell-Schalter. Sitzt in der schwarzen Kopfleiste, also feste dunkle Farben — nicht die Theme-Variablen. */ .theme-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: 1px solid #2e2e2e; border-radius: 50%; color: #9a9a9a; cursor: pointer; padding: 0; transition: color .12s ease, border-color .12s ease; } .theme-btn svg { width: 17px; height: 17px; display: block; } .theme-btn:hover { color: var(--gold); border-color: var(--gold); } .theme-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ============================================================ Layout ============================================================ */ .main { max-width: 1280px; margin: 0 auto; padding: 34px 26px 80px; } .main-bare { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; } h1 { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -.4px; line-height: 1.15; } h2 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 16px; letter-spacing: -.1px; } h3 { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; } .subtitle { color: var(--text-muted); margin-top: 4px; } /* ============================================================ Karten ============================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 20px; } .card-tight { padding: 0; overflow: hidden; } .card-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-head h2 { margin: 0; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; } /* ============================================================ Formulare ============================================================ */ label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 13.5px; } .hint { color: var(--text-muted); font-size: 12.5px; font-weight: 400; margin-top: 5px; line-height: 1.45; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], select { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 7px; font-size: 15px; font-family: inherit; background: var(--input-bg); color: var(--text); transition: border-color .12s ease, box-shadow .12s ease; } input::placeholder { color: var(--text-faint); } /* Zahlenfelder: die Ziffern sind hier der Inhalt, also gleich breite Ziffern und etwas groesser — man tippt 15 davon am Stueck. */ input[type=number] { font-variant-numeric: tabular-nums; font-size: 15.5px; } input:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%239a9a9a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 2l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; } .field { margin-bottom: 18px; } /* Der native Datei-Knopf ist weiss und englisch ("Choose File") — auf dunklem Grund ein Fremdkoerper. Also selbst gestalten. */ input[type=file] { color: var(--text-muted); font-size: 13.5px; font-family: inherit; margin-bottom: 14px; } input[type=file]::file-selector-button { background: transparent; color: var(--text); border: 1px solid var(--border-strong); border-radius: 7px; padding: 8px 14px; margin-right: 12px; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color .12s ease, background .12s ease; } input[type=file]::file-selector-button:hover { background: var(--surface-2); border-color: var(--gold); } /* ---------- Buttons ---------- */ .btn { display: inline-block; background: var(--gold-grad); color: #0a0a0a; border: none; border-radius: 7px; padding: 11px 20px; font-size: 14.5px; font-weight: 700; font-family: inherit; letter-spacing: .2px; cursor: pointer; transition: filter .12s ease, transform .06s ease; } .btn:hover { filter: brightness(1.08); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .btn-sm { padding: 7px 13px; font-size: 13px; } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); font-weight: 600; } .btn-ghost:hover { background: var(--surface-2); border-color: var(--gold); filter: none; } .btn-danger { background: transparent; color: var(--bad); border: 1px solid var(--border-strong); font-weight: 600; } .btn-danger:hover { background: var(--bad-bg); border-color: var(--bad); filter: none; } /* ============================================================ Tabellen ============================================================ */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } th { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; background: var(--surface-2); } /* Das Cockpit hat 14 Spalten (6 Kennzahlen, jede mit Vormonatsvergleich). Mit dem normalen Zellabstand passt "Anrufe" nicht mehr aufs Bild und der Admin muesste seitlich scrollen, um die letzte Spalte zu sehen — also hier enger. Ausreisser sollen auffallen, ohne dass man scrollt. */ .table-cockpit th, .table-cockpit td { padding: 12px 9px; } .table-cockpit th:first-child, .table-cockpit td:first-child { padding-left: 18px; } .table-cockpit th:last-child, .table-cockpit td:last-child { padding-right: 18px; } .table-cockpit th { font-size: 10px; letter-spacing: .5px; } .table-cockpit td.num { font-size: 13.5px; } .table-cockpit .delta { font-size: 12px; } .table-cockpit .badge { padding: 3px 8px; font-size: 10px; } th a { color: var(--text-muted); } th a:hover { color: var(--text); } th.sorted a { color: var(--gold-ink); } tbody tr { transition: background .1s ease; } tbody tr:hover { background: var(--surface-2); } tbody tr:last-child td { border-bottom: none; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .row-link { font-weight: 600; color: var(--text); } .row-link:hover { color: var(--gold-ink); } /* Veraenderung zum Vormonat */ .delta { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; } .delta-up { color: var(--good); } .delta-down { color: var(--bad); } .delta-flat { color: var(--text-muted); } .delta-none { color: var(--text-faint); } /* ============================================================ Badges ============================================================ */ .badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; } .badge-ok { background: var(--good-bg); color: var(--good); } .badge-open { background: var(--warn-bg); color: var(--warn); } .badge-missing { background: var(--bad-bg); color: var(--bad); } .badge-muted { background: var(--surface-2); color: var(--text-muted); } /* ============================================================ Flash ============================================================ */ .flash { padding: 13px 17px; border-radius: 8px; margin-bottom: 20px; font-size: 14.5px; border: 1px solid transparent; } .flash a { font-weight: 700; } .flash-success { background: var(--good-bg); color: var(--good); border-color: var(--good); } .flash-error { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); } .flash-info { background: var(--gold-soft); color: var(--gold-ink); border-color: rgba(214, 183, 95, .4); } .flash-info a { color: var(--gold-ink); } /* ============================================================ Login — immer dunkel, das ist der erste Eindruck der Marke ============================================================ */ body.bare { background: #0a0a0a; color: #fff; /* Ein Hauch Gold aus der oberen Ecke, wie auf der Website. */ background-image: radial-gradient(circle at 50% 0%, rgba(214, 183, 95, .10), rgba(10, 10, 10, 0) 55%); } .login-box { width: 100%; max-width: 400px; } .login-box .card { padding: 34px 32px; background: #141414; border-color: #272727; box-shadow: var(--shadow-lg); } .login-box label { color: #fff; } .login-box input { background: #0f0f0f; border-color: #383838; color: #fff; } .login-logo { text-align: center; margin-bottom: 32px; } .login-logo img { height: 72px; width: auto; } .login-box h1 { font-size: 19px; text-align: center; margin-bottom: 22px; color: #fff; font-weight: 500; letter-spacing: 0; } .login-box .btn { width: 100%; margin-top: 8px; padding: 12px; font-size: 15px; } .login-foot { text-align: center; margin-top: 22px; font-size: 12.5px; color: #6a6a6a; } /* ============================================================ KPI-Eingabe ============================================================ */ .kpi-group { margin-bottom: 28px; } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .channel-table td { white-space: normal; } .channel-table input { max-width: 150px; } /* ============================================================ Charts ============================================================ */ .chart-box { position: relative; height: 268px; } /* ============================================================ Kennzahlen-Kacheln ============================================================ */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 22px; } .stat { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 17px 19px; box-shadow: var(--shadow); overflow: hidden; } /* Die erste Kachel ist der Umsatz — die eine Zahl, auf die alle zuerst schauen. Sie bekommt den Goldakzent, die anderen nicht. */ .stat:first-child::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold-grad); } .stat:first-child .stat-value { color: var(--gold-ink); } .stat-label { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .9px; font-weight: 700; margin-bottom: 7px; } .stat-value { font-family: var(--font-display); font-size: 27px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.5px; line-height: 1.2; } .stat-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; } .empty { text-align: center; padding: 52px 20px; color: var(--text-muted); } .empty p { margin-bottom: 18px; } /* ============================================================ Klein ============================================================ */ @media (max-width: 720px) { /* Logo, Navigation, Nutzer und Abmelden passen nebeneinander nicht auf ein Handy — die Kopfleiste schob die ganze Seite seitlich raus. Also zwei Zeilen: oben Marke und Nutzer, darunter die Navigation. */ .topbar { height: auto; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 16px 0; } /* Reihenfolge explizit, sonst landet "Abmelden" in einer dritten Zeile: im Quelltext steht die Navigation vor dem Nutzermenue. */ .brand { order: 1; } .user-menu { order: 2; margin-left: auto; gap: 12px; } .nav { order: 3; } .brand img { height: 26px; } /* Nur den Namen ausblenden, nicht das Profilbild — der Avatar-Fallback ist ebenfalls ein . */ .user-chip > span:not(.avatar-fallback) { display: none; } .nav { flex: 0 0 100%; gap: 22px; margin-top: 3px; border-top: 1px solid #1e1e1e; } .nav a { padding: 12px 0; margin-right: 0; font-size: 13.5px; } .main { padding: 24px 16px 60px; } h1 { font-size: 24px; } .grid-2 { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } .kpi-grid { grid-template-columns: 1fr; } /* Die Zahlenfelder auf mind. 16px — darunter zoomt iOS beim Antippen in das Feld hinein, und der Makler sitzt im falschen Ausschnitt fest. */ input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], select { font-size: 16px; } }