/* ===================================================================== QueueApp — themes.css Five visual directions, applied via [data-theme] on . Each theme overrides the base tokens defined in app.css. Component CSS already uses var(--*) so changes propagate. ===================================================================== */ /* ====================== KLINIK (default) =========================== Clinical white + navy + cyan, monospace numbers. For: Arztpraxis, Apotheke, Behörde, Labor. ==================================================================== */ :root[data-theme="klinik"] { --bg: #F4F6F8; --bg-soft: #FAFBFC; --surface: #FFFFFF; --ink: #11243F; --ink-soft: #5A6878; --ink-mute: #8A98AA; --ink-dim: #B5BEC7; --line: #E3E8EE; --line-soft: #EEF1F5; --accent: #0099CC; --font-display: 'IBM Plex Sans', -apple-system, system-ui, sans-serif; --font-body: 'IBM Plex Sans', -apple-system, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --radius-sm: 4px; --radius: 6px; --radius-lg: 10px; --radius-xl: 14px; } /* Hero numbers + KPI numbers: monospace, like a patient monitor */ :root[data-theme="klinik"] .ticket-number, :root[data-theme="klinik"] .display-big, :root[data-theme="klinik"] .display-next-num, :root[data-theme="klinik"] .kpi-value, :root[data-theme="klinik"] .dash-kpi-value, :root[data-theme="klinik"] .entry-number, :root[data-theme="klinik"] .qc-count-num { font-family: var(--font-mono); font-variation-settings: normal; } /* ====================== MARKT ===================================== Clean white + signal-orange + zone-blue. Retail energy. For: Bauhaus, IKEA, Segmüller, MediaMarkt, Großmärkte. ==================================================================== */ :root[data-theme="markt"] { --bg: #F8F8F5; --bg-soft: #FAFAF7; --surface: #FFFFFF; --ink: #1A1611; --ink-soft: #6B6258; --ink-mute: #8B8478; --ink-dim: #C9C2B5; --line: #E5E2DD; --line-soft: #F0EDE7; --accent: #F26419; --font-display: 'Manrope', -apple-system, system-ui, sans-serif; --font-body: 'Manrope', -apple-system, system-ui, sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', monospace; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; } /* ====================== CONCIERGE ================================= Dark slate + ivory text + brass accent. Premium evening. For: Optiker, Privatpraxen, Banken, Hotel-Concierge. ==================================================================== */ :root[data-theme="concierge"] { --bg: #15202B; --bg-soft: #1A2935; --surface: #1A2935; --ink: #F4EFE0; --ink-soft: #B5AC9C; --ink-mute: #8B97A4; --ink-dim: #4D5C6B; --line: rgba(196,154,108,0.18); --line-soft: rgba(196,154,108,0.10); --accent: #C49A6C; --font-display: 'Inter', -apple-system, system-ui, sans-serif; --font-body: 'Inter', -apple-system, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; } :root[data-theme="concierge"] .ticket-number .hash { color: rgba(196,154,108,0.5); } /* ====================== ATELIER =================================== Warm paper + peacock + mandarine. Editorial with serif personality. For: Boutique, Optiker, Café, Galerie, Friseur, Mode-Retail. ==================================================================== */ :root[data-theme="atelier"] { --bg: #F4ECDB; --bg-soft: #FBF5E6; --surface: #FFFFFF; --ink: #173441; --ink-soft: #6B5C46; --ink-mute: #8A7C66; --ink-dim: #B5A88A; --line: #E8DCC2; --line-soft: #F0E7CF; --accent: #E76F23; --font-display: 'DM Serif Display', 'Times New Roman', serif; --font-body: 'Inter', -apple-system, system-ui, sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', monospace; --radius-sm: 10px; --radius: 14px; --radius-lg: 22px; --radius-xl: 999px; } /* Hero numbers — embrace the serif's character */ :root[data-theme="atelier"] .ticket-number, :root[data-theme="atelier"] .display-big, :root[data-theme="atelier"] .entry-number, :root[data-theme="atelier"] .kpi-value, :root[data-theme="atelier"] .dash-kpi-value, :root[data-theme="atelier"] .qc-count-num { font-family: var(--font-display); font-variation-settings: normal; font-weight: 400; } /* ====================== ATRIUM ==================================== Cool white + deep navy + cobalt. Architectural precision. For: Architekturbüro, Designstudio, Tech-Empfang, Engineering. ==================================================================== */ :root[data-theme="atrium"] { --bg: #F9FAFC; --bg-soft: #F4F6FA; --surface: #FFFFFF; --ink: #0A0F1F; --ink-soft: #5A6378; --ink-mute: #8A93A8; --ink-dim: #D8DEE8; --line: #E3E8EE; --line-soft: #EEF1F5; --accent: #2E5BFF; --font-display: 'Inter', -apple-system, system-ui, sans-serif; --font-body: 'Inter', -apple-system, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --radius-sm: 0; --radius: 2px; --radius-lg: 4px; --radius-xl: 6px; } /* Atrium has near-zero radii — sharp, drafted look */ :root[data-theme="atrium"] .ticket-code, :root[data-theme="atrium"] .qc-stat-val, :root[data-theme="atrium"] .kpi-label, :root[data-theme="atrium"] .dash-kpi-label, :root[data-theme="atrium"] .nav-brand { font-family: var(--font-mono); } /* ====================== SHARED THEME UTILITIES ==================== When the body inherits the theme's bg, dark themes need light text on customer pages (where the ticket-page tenant header has a default light surface assumption). ==================================================================== */ :root[data-theme="concierge"] body.customer { background: var(--bg); color: var(--ink); } :root[data-theme="concierge"] .tenant-head { background: var(--bg-soft); border-bottom-color: var(--line); } :root[data-theme="concierge"] .tenant-name { color: var(--ink); } /* Atelier: rounded pill CTAs feel right for boutique vibe */ :root[data-theme="atelier"] .btn.big, :root[data-theme="atelier"] .btn.accent { border-radius: 999px; } /* ===================================================================== LEGACY TOKEN BRIDGES app.css verwendet noch ältere Tokens (--paper, --skin, --hairline, --gold, --teal, --rose) aus der "Quiet Confidence"-Phase. Hier mappen wir sie pro Theme auf die neuen Werte, damit alle Komponenten richtig mit-themen — sonst hätten wir auf dunklen Themes weiße Karten. ===================================================================== */ :root[data-theme="klinik"] { --paper: var(--surface); --skin: var(--bg-soft); --hairline: var(--line); --hairline-strong: #C7D0DA; --gold: var(--accent); /* "you are here" Dot */ --gold-soft: #E6F4F9; --teal: #4DB6CC; --rose: #E04A4A; --shadow-card: 0 1px 2px rgba(17,36,63,0.04), 0 1px 1px rgba(17,36,63,0.02); } :root[data-theme="markt"] { --paper: var(--surface); --skin: var(--bg-soft); --hairline: var(--line); --hairline-strong: #C9C2B5; --gold: var(--accent); --gold-soft: #FFF1E8; --teal: #1E3A8A; /* zonen-blau */ --rose: #E63946; --shadow-card: 0 1px 2px rgba(26,22,17,0.04), 0 1px 1px rgba(26,22,17,0.02); } :root[data-theme="concierge"] { --paper: var(--surface); /* dunkles surface! */ --skin: var(--bg-soft); --hairline: var(--line); --hairline-strong: rgba(196,154,108,0.32); --gold: var(--accent); --gold-soft: rgba(196,154,108,0.16); --teal: #6BA4B8; --rose: #C97B7B; --shadow-card: 0 1px 0 rgba(196,154,108,0.05) inset, 0 8px 24px -10px rgba(0,0,0,0.5); } :root[data-theme="atelier"] { --paper: var(--surface); --skin: var(--bg-soft); --hairline: var(--line); --hairline-strong: #C9B98E; --gold: var(--accent); --gold-soft: #FBE4D0; --teal: #5A8DA4; --rose: #C24B4B; --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 16px -8px rgba(23,52,65,0.10); /* radius-xl auf 22px kappen — 999px machte die ganze ticket-card zur langen Ellipse auf dem Handy. Pill-Optik bleibt bei Buttons + Chips. */ --radius-xl: 22px; } :root[data-theme="atrium"] { --paper: var(--surface); --skin: var(--bg-soft); --hairline: var(--line); --hairline-strong: #C7CEDA; --gold: var(--accent); --gold-soft: #E8EEFF; --teal: #5A78A3; --rose: #D04A4A; --shadow-card: 0 1px 1px rgba(10,15,31,0.04); } /* ===== Dark theme (Concierge) — extra fixes für Surface-Annahmen ====== */ :root[data-theme="concierge"] body { background: var(--bg); color: var(--ink); } :root[data-theme="concierge"] body.customer .tenant-head + .ticket-shell { background: var(--bg); } :root[data-theme="concierge"] .ticket-card, :root[data-theme="concierge"] .card, :root[data-theme="concierge"] .ad-slot, :root[data-theme="concierge"] .feedback-card, :root[data-theme="concierge"] .kpi-strip { background: var(--surface); border-color: var(--line); color: var(--ink); } /* Tertiary buttons / link-cards auf Dark stylen */ :root[data-theme="concierge"] .btn-quiet { color: var(--ink-soft); } :root[data-theme="concierge"] .btn { color: var(--ink); border-color: var(--line); } :root[data-theme="concierge"] .ad-cta { background: var(--accent); color: var(--bg); border-color: var(--accent); } :root[data-theme="concierge"] .ticket-id-num, :root[data-theme="concierge"] .ticket-id-code { color: var(--ink); } :root[data-theme="concierge"] .ticket-id-label { color: var(--ink-mute); } /* ===================================================================== THEME-SPEZIFISCHE TICKET-LAYOUTS Jede Richtung bringt eine eigene Hero-/Queue-Struktur mit — die Klassen sind mit th--... präfixiert, damit sie nicht mit den Basis-Klassen kollidieren. ===================================================================== */ /* ============ KLINIK — Patient-Monitor-Look ============ */ .th-kl-hero { padding: 20px 22px 18px; border-bottom: 1px solid var(--line); } .th-kl-strip { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-family: var(--font-mono); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 14px; } .th-kl-strip-q { color: var(--ink); font-weight: 500; } .th-kl-status { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .th-kl-pip { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 78%); animation: pulse-pip 2s ease-in-out infinite; } @keyframes pulse-pip { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } .th-kl-status-txt { font-size: 14px; color: var(--ink); font-weight: 500; } .th-kl-eta { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; } .th-kl-eta-num { font-family: var(--font-mono); font-size: clamp(4rem, 22vw, 6.5rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--ink); font-weight: 500; font-variation-settings: normal; } .th-kl-eta-unit { font-family: var(--font-mono); font-size: clamp(1.75rem, 8vw, 2.5rem); color: var(--ink-mute); } .th-kl-eta-lab { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-top: 8px; font-family: var(--font-mono); } .th-kl-position { margin: 12px 22px 12px; padding: 12px; background: #F4F6F8; border-radius: 6px; } .th-kl-position-head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px; font-family: var(--font-mono); } .th-kl-position-head strong { color: var(--ink); font-weight: 500; } .th-kl-position-frac { font-family: var(--font-mono); letter-spacing: 0.06em; } .th-kl-position-bar { height: 4px; background: #E3E8EE; border-radius: 2px; overflow: hidden; } .th-kl-position-fill { height: 100%; background: var(--accent); transition: width 0.35s var(--ease-out); } .th-kl-position-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); margin-top: 10px; font-family: var(--font-mono); } .th-kl-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); padding: 0; } .th-kl-ref { background: var(--surface); padding: 14px 22px; } .th-kl-ref-lab { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-family: var(--font-mono); } .th-kl-ref-val { font-family: var(--font-mono); font-size: 20px; font-weight: 500; margin-top: 3px; letter-spacing: 0.02em; color: var(--ink); } /* ============ CONCIERGE — Hotel-Lobby ============ */ .th-cz-strip { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 500; padding: 22px 24px 4px; text-align: center; } .th-cz-eta { text-align: center; padding: 6px 24px 24px; } .th-cz-eta-eyebrow { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; } .th-cz-eta-num { font-size: clamp(6rem, 28vw, 9rem); line-height: 0.85; letter-spacing: -0.06em; color: var(--ink); font-weight: 500; font-variation-settings: normal; } .th-cz-eta-unit { font-size: 13px; letter-spacing: 0.2em; color: var(--ink-mute); margin-top: 8px; } .th-cz-rail-wrap { padding: 18px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .th-cz-rail { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 32px; } .th-cz-dot { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in oklab, var(--accent), transparent 50%); transition: transform 0.2s; } .th-cz-dot.is-called { background: var(--accent); width: 14px; height: 14px; } .th-cz-dot.is-you { width: 32px; height: 32px; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent), transparent 70%); display: inline-flex; align-items: center; justify-content: center; color: var(--bg); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; position: relative; } .th-cz-rail-legend { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-top: 12px; } .th-cz-rail-legend strong { color: var(--accent); font-weight: 500; } .th-cz-meta { display: flex; justify-content: space-between; padding: 16px 24px; } .th-cz-meta-lab { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .th-cz-meta-val { font-family: var(--font-mono); font-size: 15px; font-weight: 500; margin-top: 3px; letter-spacing: 0.04em; color: var(--ink); } /* ============ ATELIER — Editorial-Serif ============ */ .th-at-strip { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); padding: 20px 22px 10px; } .th-at-strip span { color: var(--accent); font-weight: 500; } .th-at-eta { padding: 8px 22px 18px; } .th-at-eta-eyebrow { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; } .th-at-eta-row { display: flex; align-items: baseline; gap: 8px; } .th-at-eta-num { font-family: var(--font-display); font-size: clamp(5rem, 22vw, 7rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--ink); font-weight: 400; font-variation-settings: normal; } .th-at-eta-unit { font-family: var(--font-display); font-size: clamp(1.5rem, 6vw, 2rem); color: var(--accent); font-style: italic; } .th-at-eta-sub { font-family: var(--font-display); font-size: 14px; color: var(--ink-soft); margin-top: 6px; font-style: italic; } .th-at-grid-wrap { padding: 18px 22px; border-top: 1px solid var(--line); } .th-at-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px 0; } .th-at-dot { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in oklab, var(--ink), transparent 65%); flex-shrink: 0; } .th-at-dot.is-served { background: color-mix(in oklab, var(--accent), transparent 50%); } .th-at-dot.is-you { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%); transform: scale(1.15); position: relative; display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 9px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .th-at-grid-cap { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 12px; } .th-at-grid-cap strong { color: var(--ink); font-weight: 500; } .th-at-refs { display: flex; gap: 12px; padding: 12px 22px 18px; } .th-at-ref { flex: 1; background: var(--bg-soft); border-radius: 14px; padding: 10px 14px; } .th-at-ref-lab { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); } .th-at-ref-val { font-family: var(--font-display); font-size: 20px; margin-top: 2px; color: var(--ink); font-variation-settings: normal; } /* ============ ATRIUM — Blueprint ============ */ .th-am-strip { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-family: var(--font-mono); padding: 16px 22px 12px; border-bottom: 1px solid var(--ink); } .th-am-strip strong { color: var(--ink); font-weight: 500; } .th-am-coord { color: var(--accent); font-family: var(--font-mono); } .th-am-eyebrow { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-mute); font-family: var(--font-mono); padding: 18px 22px 4px; } .th-am-eta { position: relative; padding: 4px 22px 22px; display: flex; align-items: baseline; gap: 6px; } .th-am-eta::before, .th-am-eta::after { content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none; } .th-am-eta::before { top: -2px; left: 22px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); } .th-am-eta::after { bottom: 8px; right: 22px; border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); } .th-am-eta-num { font-size: clamp(5rem, 24vw, 7.5rem); line-height: 0.9; letter-spacing: -0.045em; color: var(--ink); font-weight: 500; font-variation-settings: normal; } .th-am-eta-unit { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; color: var(--ink-mute); align-self: flex-start; margin-top: 12px; } .th-am-chart { padding: 16px 22px; border-top: 1px solid var(--line); background: var(--bg-soft); } .th-am-chart-head { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-family: var(--font-mono); margin-bottom: 10px; } .th-am-chart-head strong { color: var(--ink); font-weight: 500; } .th-am-bars { display: flex; gap: 3px; align-items: flex-end; height: 40px; } .th-am-bar { flex: 1; height: 100%; background: var(--ink-dim); min-width: 4px; } .th-am-bar.is-served { background: color-mix(in oklab, var(--accent), transparent 55%); } .th-am-bar.is-you { background: var(--accent); } .th-am-chart-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-soft); margin-top: 10px; font-family: var(--font-mono); letter-spacing: 0.04em; } .th-am-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink); border-top: 1px solid var(--ink); } .th-am-refcell { background: var(--surface); padding: 12px 22px; } .th-am-ref-lab { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); font-family: var(--font-mono); } .th-am-ref-val { font-family: var(--font-mono); font-size: 18px; font-weight: 500; margin-top: 3px; letter-spacing: 0.04em; color: var(--ink); } /* ============ MARKT — Retail-Counter ============ */ .th-mk-strip { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); } .th-mk-strip-brand { font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; } .th-mk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; background: var(--accent); color: white; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .th-mk-eta { padding: 20px 22px 10px; } .th-mk-eta-eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; margin-bottom: 4px; } .th-mk-eta-num { font-size: clamp(4.5rem, 22vw, 6rem); line-height: 0.85; letter-spacing: -0.045em; color: var(--ink); font-weight: 600; font-variation-settings: normal; } .th-mk-eta-unit { font-size: clamp(1.25rem, 6vw, 1.75rem); color: var(--ink-soft); font-weight: 500; margin-left: 6px; } .th-mk-hint { margin: 12px 22px 16px; padding: 11px 14px; border-radius: 10px; background: color-mix(in oklab, var(--accent), transparent 88%); border-left: 3px solid var(--accent); color: var(--ink); font-size: 13px; line-height: 1.4; } .th-mk-position { padding: 12px 22px 18px; } .th-mk-bar-row { display: flex; gap: 4px; align-items: center; padding: 8px 0; } .th-mk-bar { flex: 1; height: 5px; background: var(--line); border-radius: 3px; } .th-mk-bar.is-served { background: color-mix(in oklab, var(--accent), transparent 65%); } .th-mk-bar.is-you { background: var(--accent); height: 10px; } .th-mk-position-cap { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 8px; } .th-mk-refs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 22px 18px; } .th-mk-ref { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg-soft); } .th-mk-ref-lab { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; } .th-mk-ref-val { font-size: 17px; font-weight: 500; margin-top: 2px; letter-spacing: -0.01em; color: var(--ink); } /* ============ Defer-Button (alle Themes) ============ */ .defer-form { margin-top: 12px; } .defer-form .btn-quiet { font-size: 13px; color: var(--ink-mute); padding: 10px 16px; } .defer-form .btn-quiet:hover { color: var(--ink); } /* ============ Concierge dark ad-slot extra ============ */ :root[data-theme="concierge"] .ad-card-text { color: var(--ink-soft); } :root[data-theme="concierge"] .ad-card-cta { color: var(--bg); } /* ===================================================================== HERO-BAR (tenant-head) NUR im Default-Theme Jedes explizite Theme bringt seinen eigenen Strip im Ticket-Card. Der klobige dunkle Header-Balken darüber wirkte redundant und hat die Theme-Optik gebrochen (schwarzer Klotz über Papier/Weiß etc). ===================================================================== */ :root[data-theme="klinik"] body.customer .tenant-head, :root[data-theme="markt"] body.customer .tenant-head, :root[data-theme="concierge"] body.customer .tenant-head, :root[data-theme="atelier"] body.customer .tenant-head, :root[data-theme="atrium"] body.customer .tenant-head { display: none; } /* ===================================================================== CTA-Buttons pro Theme — "Ich bin auf dem Weg" muss sich native anfühlen. ===================================================================== */ /* KLINIK: navy filled, geringe Rundung wie Patient-Monitor */ :root[data-theme="klinik"] .btn-primary-big { background: var(--ink); color: var(--surface); border-radius: var(--radius); border: 1px solid var(--ink); } :root[data-theme="klinik"] .btn-primary-big:hover { background: color-mix(in oklab, var(--ink), black 8%); } /* MARKT: orange filled, mittlere Rundung */ :root[data-theme="markt"] .btn-primary-big { background: var(--accent); color: white; border-radius: 10px; border: 1px solid var(--accent); } :root[data-theme="markt"] .btn-primary-big:hover { background: color-mix(in oklab, var(--accent), black 8%); } /* CONCIERGE: brass auf dark, moderate Rundung */ :root[data-theme="concierge"] .btn-primary-big { background: var(--accent); color: var(--bg); border-radius: 10px; border: 1px solid var(--accent); } :root[data-theme="concierge"] .btn-primary-big .btn-hint { color: rgba(21,32,43,0.7); } :root[data-theme="concierge"] .btn-primary-big:hover { background: color-mix(in oklab, var(--accent), black 10%); } /* ATELIER: mandarine PILL */ :root[data-theme="atelier"] .btn-primary-big { background: var(--accent); color: white; border-radius: 999px; border: 1px solid var(--accent); } :root[data-theme="atelier"] .btn-primary-big:hover { background: color-mix(in oklab, var(--accent), black 8%); } /* ATRIUM: cobalt, sharp corners, uppercase-technical Label */ :root[data-theme="atrium"] .btn-primary-big { background: var(--accent); color: white; border-radius: var(--radius); border: 1px solid var(--accent); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--font-mono); font-weight: 500; } :root[data-theme="atrium"] .btn-primary-big:hover { background: color-mix(in oklab, var(--accent), black 10%); } :root[data-theme="atrium"] .btn-primary-big .btn-hint { letter-spacing: 0.04em; font-family: var(--font-body); text-transform: none; } /* Später-aufrufen — theme-aware Ghost-Button */ :root[data-theme="klinik"] .defer-form .btn-quiet, :root[data-theme="markt"] .defer-form .btn-quiet, :root[data-theme="concierge"] .defer-form .btn-quiet, :root[data-theme="atelier"] .defer-form .btn-quiet, :root[data-theme="atrium"] .defer-form .btn-quiet { border: 1px solid var(--line); color: var(--ink-soft); background: transparent; border-radius: 999px; padding: 10px 18px; } :root[data-theme="klinik"] .defer-form .btn-quiet { border-radius: var(--radius); } :root[data-theme="atrium"] .defer-form .btn-quiet { border-radius: var(--radius); font-family: var(--font-mono); } /* ===================================================================== DASHBOARD-Overview pro Theme Jede Richtung bringt ein eigenes Dashboard-Feeling mit, sonst wirkt das Admin-Interface neutral und disconnected vom gewählten Theme. ===================================================================== */ /* KLINIK — tabular grid, hairlines, mono numbers, kein card-shadow */ :root[data-theme="klinik"] .dash-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 1px !important; background: var(--line) !important; border: 1px solid var(--line) !important; border-radius: 6px !important; overflow: hidden; } :root[data-theme="klinik"] .dash-kpi { background: var(--surface) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 1.2rem 1.35rem; } :root[data-theme="klinik"] .dash-kpi-value { font-family: var(--font-mono); font-variation-settings: normal; font-weight: 400; } :root[data-theme="klinik"] .dash-kpi-label { font-family: var(--font-mono); letter-spacing: 0.12em; color: var(--ink-mute); } :root[data-theme="klinik"] .customer-flow-card, :root[data-theme="klinik"] .flow-queue-card { border-radius: 6px; box-shadow: none; } :root[data-theme="klinik"] .flow-queue-num { font-family: var(--font-mono); font-variation-settings: normal; } :root[data-theme="klinik"] .live-pill { background: #E6F4F9; color: var(--accent); font-family: var(--font-mono); border-radius: 4px; letter-spacing: 0.06em; } /* ATELIER — weiße Bühne + warme Cream-Cards (statt Papier-Bühne) */ :root[data-theme="atelier"] body.staff, :root[data-theme="atelier"] body.staff .container { background: #FFFFFF !important; } :root[data-theme="atelier"] .dash-kpi { background: var(--bg-soft) !important; /* warmes cream #FBF5E6 */ border: 1px solid #E8DCC2 !important; border-radius: 10px !important; box-shadow: none !important; } :root[data-theme="atelier"] .dash-kpi-value { font-family: var(--font-display); font-variation-settings: normal; font-weight: 400; } :root[data-theme="atelier"] .dash-kpi-label { color: var(--ink-mute); } :root[data-theme="atelier"] .queue-card { background: var(--bg-soft) !important; border: 1px solid #E8DCC2 !important; border-radius: 10px !important; box-shadow: none !important; } :root[data-theme="atelier"] .qc-count-num { font-family: var(--font-display); font-variation-settings: normal; color: var(--ink); } :root[data-theme="atelier"] .live-pill, :root[data-theme="atelier"] .kpi-live-pill { background: #FDEEE3; color: #B5510D; border-radius: 999px; padding: 5px 12px; } /* CONCIERGE — dunkles Panel, kein card-shadow, Brass-Live-Pill */ :root[data-theme="concierge"] .dash-kpi { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: none !important; } :root[data-theme="concierge"] .dash-kpi-value { color: var(--ink); } :root[data-theme="concierge"] .queue-card { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: none !important; } :root[data-theme="concierge"] .live-pill { background: var(--gold-soft); color: var(--accent); border-radius: 999px; } /* MARKT — leichter tint, orange Live-Pill */ :root[data-theme="markt"] .dash-kpi { background: var(--surface); border-color: var(--line); border-radius: 10px; box-shadow: none; } :root[data-theme="markt"] .queue-card { border-radius: 10px; box-shadow: none; } :root[data-theme="markt"] .live-pill { background: #FFF1E8; color: #B8470F; border-radius: 999px; } /* ATRIUM — extrem scharf, tabular grid, kaum radius */ :root[data-theme="atrium"] .dash-kpis { gap: 1px !important; background: var(--line) !important; border: 1px solid var(--line) !important; } :root[data-theme="atrium"] .dash-kpi { background: var(--surface) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } :root[data-theme="atrium"] .dash-kpi-value { font-family: var(--font-body); font-variation-settings: normal; font-weight: 500; } :root[data-theme="atrium"] .dash-kpi-label { font-family: var(--font-mono); letter-spacing: 0.16em; } :root[data-theme="atrium"] .queue-card { border-radius: 2px !important; box-shadow: none !important; } :root[data-theme="atrium"] .live-pill { border: 1px solid var(--accent); background: transparent; color: var(--accent); border-radius: 0; font-family: var(--font-mono); letter-spacing: 0.1em; } /* ===================================================================== DASHBOARD — THEME-SPEZIFISCHE DARSTELLUNGEN (direkt von Mockup-CSS) ===================================================================== */ /* Klinik: 3-KPI Tabular-Grid, exakt wie Mockup */ .dash-kpis-3 { grid-template-columns: repeat(3, 1fr) !important; gap: 1px !important; background: #E3E8EE !important; border: 1px solid #E3E8EE !important; border-radius: 0 !important; overflow: hidden; margin-bottom: 16px; } .dash-kpis-3 .dash-kpi { background: #FFFFFF !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 12px 14px !important; } /* Klinik spezifisch */ .dash-kpis-klinik .dash-kpi-label { font-family: var(--font-mono); font-size: 10px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #5A6878 !important; } .dash-kpis-klinik .dash-kpi-value { font-family: var(--font-mono) !important; font-size: 24px !important; font-weight: 400 !important; margin-top: 3px; letter-spacing: -0.02em; color: #11243F !important; font-variation-settings: normal !important; } .live-pill-klinik { display: inline-flex !important; align-items: center; gap: 6px; padding: 4px 10px !important; background: #E6F4F9 !important; border-radius: 4px !important; font-size: 11px !important; color: #0099CC !important; font-family: var(--font-mono) !important; letter-spacing: 0.06em !important; border: none !important; } .live-pill-klinik .live-dot { background: #0099CC !important; } /* Atelier spezifisch */ .dash-h1-serif { font-family: var(--font-display); font-variation-settings: normal; font-weight: 400; } .dash-kpis-atelier .dash-kpi { background: #FBF5E6 !important; border: none !important; border-radius: 10px !important; box-shadow: none !important; } .dash-kpis-atelier.dash-kpis-3 { background: transparent !important; border: none !important; gap: 10px !important; } .dash-kpis-atelier .dash-kpi-label { font-size: 10px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #6B5C46 !important; } .dash-kpis-atelier .dash-kpi-value { font-family: var(--font-display) !important; font-size: 26px !important; font-weight: 400 !important; margin-top: 3px; letter-spacing: -0.02em; color: #173441 !important; font-variation-settings: normal !important; } .live-pill-atelier { background: #FDEEE3 !important; border-radius: 999px !important; color: #B5510D !important; border: none !important; font-weight: 500 !important; padding: 5px 12px !important; } .live-pill-atelier .live-dot { background: #E76F23 !important; } /* Sektion-Label-Styles */ .dash-slabel-klinik { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #5A6878; font-family: var(--font-mono); font-weight: 500; display: block; margin-bottom: 8px; } .dash-slabel-atelier { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #E76F23; font-weight: 500; display: block; margin-bottom: 10px; } /* Listenformat Queue-Rows — Klinik & Atelier */ .dash-queue-list { display: flex; flex-direction: column; } /* Klinik: border-bottom rows */ .dash-queue-list-klinik { border: 1px solid #E3E8EE; border-radius: 6px; overflow: hidden; } .dash-queue-list-klinik .dql-row { display: grid; grid-template-columns: 1fr 90px auto; gap: 12px; align-items: center; padding: 11px 12px; border-bottom: 1px solid #E3E8EE; text-decoration: none; color: inherit; background: #FFFFFF; transition: background 0.15s; } .dash-queue-list-klinik .dql-row:last-child { border-bottom: none; } .dash-queue-list-klinik .dql-row:hover { background: #F4F6F8; } /* Atelier: gerundete Cream-Cards als rows */ .dash-queue-list-atelier { gap: 6px; } .dash-queue-list-atelier .dql-row { display: grid; grid-template-columns: 1fr 90px auto; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 10px; background: #FBF5E6; text-decoration: none; color: inherit; transition: background 0.15s; } .dash-queue-list-atelier .dql-row:hover { background: #F3E8D0; } /* Gemeinsame Row-Elemente */ .dql-name { font-size: 13px; font-weight: 500; color: var(--ink); } .dql-stat { font-size: 11px; color: var(--ink-soft); margin-top: 2px; } .dash-queue-list-klinik .dql-stat { font-family: var(--font-mono); } .dql-bar-wrap { display: flex; align-items: center; } .dql-bar { width: 100%; height: 3px; background: #E3E8EE; border-radius: 2px; overflow: hidden; } .dash-queue-list-atelier .dql-bar { background: rgba(23,52,65,0.1); height: 4px; } .dql-bar-fill { height: 100%; background: var(--accent); } .dql-num { font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: -0.02em; text-align: right; min-width: 32px; } .dash-queue-list-klinik .dql-num { font-family: var(--font-mono); } .dash-queue-list-atelier .dql-num { font-family: var(--font-display); font-variation-settings: normal; font-size: 24px; } .dql-zero { color: #B5BEC7 !important; } .dash-queue-list-atelier .dql-zero { color: #B5A88A !important; }