/* ===================================================================== QueueApp design system - "Quiet Confidence" Tokens, components, signature elements. ===================================================================== */ /* ---------- Self-hosted variable fonts ---------- */ @font-face { font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/static/fonts/fraunces-latin.woff2') format('woff2-variations'), url('/static/fonts/fraunces-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter Tight'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/static/fonts/inter-tight-latin.woff2') format('woff2-variations'), url('/static/fonts/inter-tight-latin.woff2') format('woff2'); } /* ---------- Tokens ---------- */ :root { /* Tenant accent (set inline in ) — read-only here */ --tenant-primary: #0f172a; --tenant-accent: #0f172a; /* Palette - warm off-whites, deep ink. Subject: medical/retail calm. */ --bg: oklch(98.5% 0.005 80); --bg-soft: oklch(96.5% 0.008 75); --surface: #ffffff; --ink: oklch(20% 0.02 250); --ink-soft: oklch(45% 0.015 250); --ink-mute: oklch(65% 0.012 250); --ink-dim: oklch(82% 0.008 250); --line: oklch(92% 0.008 80); --line-soft: oklch(95% 0.005 80); /* Status */ --status-near: oklch(78% 0.16 80); /* amber */ --status-near-bg: oklch(96% 0.05 85); --status-call: oklch(64% 0.18 152); /* green */ --status-call-bg: oklch(94% 0.06 152); --status-bad: oklch(60% 0.20 25); /* red */ --status-bad-bg: oklch(95% 0.04 25); /* Tenant-derived */ --accent: var(--tenant-primary); /* Type */ --font-display: 'Fraunces', 'Times New Roman', serif; --font-body: 'Inter Tight', -apple-system, system-ui, sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* Geometry */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 32px; /* Shadows - layered, never harsh */ --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.02); --shadow-2: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px -10px rgba(15,23,42,.10); --shadow-3: 0 4px 8px rgba(15,23,42,.04), 0 24px 48px -20px rgba(15,23,42,.18); /* Motion */ --ease-out: cubic-bezier(.16,1,.3,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01", "tnum" 0; } a { color: var(--accent); text-decoration: none; transition: opacity .15s; } a:hover { opacity: .75; } p { margin: 0 0 .75rem; } img { max-width: 100%; } ::selection { background: color-mix(in oklab, var(--accent), transparent 75%); color: var(--ink); } /* ---------- Typography scale ---------- */ h1 { font-family: var(--font-display); font-variation-settings: "opsz" 60, "wght" 500, "SOFT" 30; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 1rem; color: var(--ink); } h2 { font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; margin: 2rem 0 0.75rem; color: var(--ink); } h3 { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; margin: 0 0 0.5rem; color: var(--ink); } h4 { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin: 1.25rem 0 0.5rem; } .muted { color: var(--ink-soft); } .dim { color: var(--ink-mute); } .small { font-size: 0.85rem; } .tiny { font-size: 0.75rem; } .hint { color: var(--ink-soft); font-size: .875rem; } .eyebrow { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); } code, .mono { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-soft); padding: 0.1em 0.45em; border-radius: 5px; color: var(--ink-soft); font-feature-settings: "tnum"; } /* ---------- Layout ---------- */ .container { max-width: 560px; margin: 0 auto; padding: 1rem; } .container.wide { max-width: 1100px; } .stack { display: flex; flex-direction: column; gap: 1rem; } .stack-tight { display: flex; flex-direction: column; gap: 0.5rem; } .row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } @media (max-width: 720px) { .col2 { grid-template-columns: 1fr; } } .row-gap-small { display: flex; gap: .5rem; flex-wrap: wrap; } .row-gap-small > * { flex: 1 1 140px; } /* ---------- Cards (restrained, hairlines instead of boxes where possible) ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-1); } .card.big { text-align: center; padding: 2rem 1.25rem; } .card.flush { padding: 0; overflow: hidden; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .link-card { display: block; color: inherit; position: relative; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .15s; text-decoration: none; } .link-card::after { content: '→'; position: absolute; top: 1.25rem; right: 1.25rem; color: var(--ink-mute); font-size: 1.15rem; transition: transform .25s var(--ease-out), color .15s; } .link-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--ink-dim); text-decoration: none; } .link-card:hover::after { color: var(--accent); transform: translateX(3px); } .card-title { font-weight: 600; margin-bottom: 0.25rem; } /* ---------- Forms ---------- */ label { display: block; margin-bottom: 0.85rem; font-size: 0.85rem; color: var(--ink-soft); font-weight: 500; } label.checkbox { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; margin-bottom: 0.5rem; color: var(--ink); font-weight: 400; font-size: 0.95rem; } label.checkbox input { margin-top: 0.2rem; flex-shrink: 0; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="time"], input[type="color"], input[type="file"], select, textarea { display: block; width: 100%; margin-top: 0.35rem; padding: 0.65rem 0.85rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--surface); color: var(--ink); transition: border-color .12s, box-shadow .12s; } input[type="color"] { padding: 0.2rem; height: 2.5rem; } input[type="time"] { width: auto; min-width: 8rem; } textarea { min-height: 4.5rem; resize: vertical; font-family: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 80%); } input::placeholder, textarea::placeholder { color: var(--ink-mute); } input:disabled { background: var(--bg-soft); color: var(--ink-mute); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.15rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; font-weight: 500; text-decoration: none; transition: background .15s, border-color .15s, transform .05s, box-shadow .15s; box-shadow: var(--shadow-1); } .btn:hover { background: var(--bg-soft); border-color: var(--ink-dim); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); } .btn.primary:hover { background: color-mix(in oklab, var(--ink), white 12%); } .btn.accent { background: var(--accent); color: white; border-color: var(--accent); } .btn.accent:hover { filter: brightness(0.93); background: var(--accent); } .btn.ghost { background: transparent; box-shadow: none; } .btn.danger { background: var(--status-bad); border-color: var(--status-bad); color: white; } .btn.small { padding: 0.4rem 0.85rem; font-size: 0.85rem; } .btn.big { padding: 0.95rem 1.5rem; font-size: 1.05rem; width: 100%; border-radius: 14px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ---------- Alerts ---------- */ .alert { padding: 0.75rem 1rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid; } .alert.error { background: var(--status-bad-bg); border-color: color-mix(in oklab, var(--status-bad), white 70%); color: var(--status-bad); } /* ===================================================================== LANDING - editorial hero, no decoration ===================================================================== */ .hero { max-width: 720px; margin: 0 auto; padding: clamp(3rem, 12vh, 8rem) 1.25rem 4rem; text-align: center; } .hero-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.5rem; } .hero h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 0; letter-spacing: -0.035em; } .hero h1 em { font-style: italic; font-variation-settings: "opsz" 144, "wght" 350, "SOFT" 50; color: var(--ink-soft); } .lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 480px; margin: 1rem auto 2rem; } .hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } /* ---------- Auth ---------- */ .auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; background: radial-gradient(circle at 15% 20%, color-mix(in oklab, var(--accent), transparent 92%), transparent 60%), radial-gradient(circle at 85% 80%, color-mix(in oklab, var(--accent), transparent 95%), transparent 60%), var(--bg); } .auth-wrap .card { max-width: 380px; width: 100%; padding: 2rem 1.75rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-3); } .auth-wrap h1 { font-size: 1.75rem; } /* ===================================================================== CUSTOMER VIEW ===================================================================== */ body.customer { background: var(--bg); min-height: 100vh; } .tenant-head { position: relative; padding: 1.1rem 1rem 1.2rem; background: var(--tenant-accent, oklch(20% 0.02 250)); color: white; /* Dezenter Schatten unten als visueller Abschluss */ box-shadow: 0 1px 0 color-mix(in oklab, var(--tenant-accent, black), white 20%) inset, 0 8px 24px -16px rgba(0,0,0,.25); overflow: hidden; } /* Subtile vertikale Texture, damit der Header nicht "flach" wirkt */ .tenant-head::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, color-mix(in oklab, white, transparent 88%), transparent 60%), radial-gradient(ellipse at bottom left, color-mix(in oklab, var(--tenant-primary, white), transparent 92%), transparent 70%); pointer-events: none; } /* Shade-Layer für sehr helle Akzentfarben: nicht aktiv per Default, kann später per JS via .tenant-head[data-needs-shade] aktiviert werden. */ .tenant-head-shade { display: none; } .tenant-head-inner { position: relative; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 0.85rem; } /* Logo-Rahmen: weißer Halbtransparent-Kreis, damit Logos mit beliebigem Hintergrund vor jedem Tenant-Accent gut aussehen */ .tenant-logo-frame { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; background: color-mix(in oklab, white, transparent 80%); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 7px; box-shadow: 0 1px 0 color-mix(in oklab, white, transparent 70%) inset; } .tenant-logo { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .tenant-name { font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 500; font-size: clamp(1.45rem, 4.8vw, 1.8rem); line-height: 1.05; letter-spacing: -0.015em; color: white; } /* Customer-Seite: ein dezenter Tenant-Primary-Streifen unter dem Header */ body.customer .tenant-head + .ticket-shell { position: relative; } body.customer .tenant-head { border-bottom: 3px solid var(--accent); } /* ----- Ticket hero (the watch face) ----- */ .ticket-hero { text-align: center; padding: 2.5rem 1rem 1rem; } .ticket-eyebrow { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1rem; } .ticket-number { font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 20; font-size: clamp(8rem, 28vw, 12rem); line-height: 0.85; letter-spacing: -0.05em; color: var(--ink); font-feature-settings: "lnum", "tnum"; } .ticket-number .hash { font-variation-settings: "opsz" 144, "wght" 300, "SOFT" 100; color: var(--ink-mute); font-size: 0.55em; vertical-align: 0.2em; margin-right: 0.05em; } .ticket-code { margin-top: 0.85rem; font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.12em; color: var(--ink-soft); } .ticket-code strong { color: var(--ink); font-weight: 600; background: var(--bg-soft); padding: 0.2rem 0.5rem; border-radius: 5px; margin: 0 0.15rem; } /* ----- THE SIGNATURE: queue line ----- */ .queue-line { margin: 2rem 0 1.5rem; padding: 0 1rem; } .queue-line-rail { position: relative; display: flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap; min-height: 32px; padding: 14px 0; } .queue-line-rail::before { content: ''; position: absolute; inset: 50% 1rem auto 1rem; border-top: 1px dashed var(--ink-dim); z-index: 0; } .qd { width: 10px; height: 10px; border-radius: 999px; background: var(--ink-dim); position: relative; z-index: 1; transition: all .35s var(--ease-spring); } .qd.is-called { background: var(--accent); width: 14px; height: 14px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent), transparent 78%); } .qd.is-you { width: 32px; height: 32px; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent), transparent 80%); position: relative; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; } .qd.is-you::after { content: 'Sie'; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); font-size: 0.7rem; font-weight: 600; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; } .queue-line-ends { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--ink-mute); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 1.25rem; padding: 0 .25rem; } .queue-line-ends .end-tip { display: inline-flex; align-items: center; gap: 0.35rem; } .queue-line-ends .end-tip::before { content: '●'; font-size: 0.7em; } /* ----- KPI strip (refined) ----- */ .kpi-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 1rem 0; } .kpi-strip .kpi { background: var(--surface); padding: 1.15rem 1rem; text-align: center; } .kpi-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.35rem; } .kpi-value { font-family: var(--font-display); font-variation-settings: "opsz" 24, "wght" 500; font-size: 1.85rem; line-height: 1; color: var(--ink); font-feature-settings: "tnum", "lnum"; letter-spacing: -0.02em; } /* ----- Status banner (the dramatic moment) ----- */ .banner { border-radius: var(--radius); padding: 1.5rem 1.25rem; margin: 1rem 0; text-align: center; border: 1px solid var(--line); background: var(--surface); transition: all .25s var(--ease-out); } .banner-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--ink); } .banner-sub { color: var(--ink-soft); font-size: 0.92rem; } .banner.wait { /* default look */ } .banner.near { background: var(--status-near-bg); border-color: color-mix(in oklab, var(--status-near), transparent 50%); animation: gentle-amber 2s ease-in-out infinite; } .banner.near .banner-title { color: oklch(40% 0.12 80); } .banner.call { background: var(--accent); border-color: var(--accent); animation: heartbeat 1.5s ease-in-out infinite; } .banner.call .banner-title, .banner.call .banner-sub { color: white; } .banner.call .banner-title { font-size: 1.25rem; } .banner.ok { background: var(--status-call-bg); border-color: color-mix(in oklab, var(--status-call), transparent 50%); } .banner.ok .banner-title { color: oklch(35% 0.12 152); } .banner.err { background: var(--status-bad-bg); border-color: color-mix(in oklab, var(--status-bad), transparent 50%); } .banner.err .banner-title { color: oklch(40% 0.15 25); } .banner.muted-banner { background: var(--bg-soft); } @keyframes gentle-amber { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--status-near), transparent 70%); } 50% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--status-near), transparent 95%); } } @keyframes heartbeat { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent), transparent 50%); transform: scale(1); } 50% { box-shadow: 0 0 0 18px color-mix(in oklab, var(--accent), transparent 100%); transform: scale(1.005); } } @media (prefers-reduced-motion: reduce) { .banner.near, .banner.call { animation: none; } } /* ----- On-my-way box ----- */ .on-my-way-box { margin: 1.5rem 0; text-align: center; } .banner-mini { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.85rem 1rem; border-radius: var(--radius); margin-bottom: 0.75rem; } .ok-mini { background: var(--status-call-bg); border: 1px solid color-mix(in oklab, var(--status-call), transparent 60%); color: oklch(35% 0.12 152); } .ok-mini strong { font-weight: 600; } /* ----- Captcha ----- */ .captcha-box { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; } .captcha-box label { font-size: 0.95rem; color: var(--ink); font-weight: 500; } /* ----- Ad slot (tasteful) ----- */ .ad-slot { display: block; border-radius: var(--radius); overflow: hidden; margin: 1.5rem 0; background: var(--surface); border: 1px solid var(--line); color: inherit; transition: transform .2s var(--ease-out); } .ad-slot:hover { transform: translateY(-1px); text-decoration: none; } .ad-slot img { display: block; width: 100%; height: auto; } .ad-text { padding: 0.85rem 1rem; font-weight: 500; font-size: 0.95rem; color: var(--ink); } .cancel-form { text-align: center; margin-top: 1.5rem; } /* ===================================================================== STAFF VIEW (Operator + Admin) ===================================================================== */ body.staff { background: var(--bg); } .nav-bar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 0.7rem 1rem; margin-bottom: 1rem; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); } .nav-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .nav-brand { font-family: var(--font-display); font-variation-settings: "opsz" 24, "wght" 500, "SOFT" 30; font-size: 1.15rem; letter-spacing: -0.01em; } .nav-links { display: flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; } .nav-links a { color: var(--ink-soft); padding: 0.4rem 0.85rem; border-radius: 8px; font-weight: 500; font-size: 0.9rem; transition: background .12s, color .12s; } .nav-links a:hover { background: var(--bg-soft); color: var(--ink); text-decoration: none; } .logout-form { display: inline; margin: 0 0 0 0.5rem; } /* ---------- Operator panel ---------- */ .op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } @media (max-width: 720px) { .op-grid { grid-template-columns: 1fr; } } .op-grid section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; } .entry-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .entry { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; flex-wrap: wrap; transition: border-color .15s, background .15s; } .entry-list.called .entry { background: color-mix(in oklab, var(--accent), white 90%); border-color: color-mix(in oklab, var(--accent), transparent 50%); } .entry-main { display: flex; align-items: center; gap: 1rem; min-width: 0; flex: 1; } .entry-number { font-family: var(--font-display); font-variation-settings: "opsz" 36, "wght" 500; font-size: 1.85rem; color: var(--ink); font-feature-settings: "tnum", "lnum"; letter-spacing: -0.025em; min-width: 64px; line-height: 1; } .entry-code strong { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; } .entry-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .entry-actions form { margin: 0; } .entry.is-on-way { background: var(--status-call-bg); border-color: color-mix(in oklab, var(--status-call), transparent 50%); } .badge-onway { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--status-call); color: white; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.3rem; } .walkin { background: var(--bg-soft) !important; border-style: dashed !important; } .walkin h3::before { content: '+ '; color: var(--ink-mute); } /* ---------- DISPLAY screen (cinema) ---------- */ body.display { background: oklch(15% 0.02 250); color: white; } .display-wrap { min-height: 100vh; padding: 2.5rem; color: white; display: flex; flex-direction: column; gap: 2rem; } .display-head { display: flex; align-items: center; gap: 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 1.5rem; } .display-head img { height: 56px; background: white; padding: 6px 10px; border-radius: 10px; } .display-tenant { font-family: var(--font-display); font-variation-settings: "opsz" 48, "wght" 500; font-size: 1.75rem; letter-spacing: -0.015em; } .display-queue { color: rgba(255,255,255,0.55); font-size: 1.05rem; } .display-body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; } .display-label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.3em; color: rgba(255,255,255,0.5); text-align: center; margin-bottom: 1rem; } .display-called { text-align: center; } .display-big { font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 30; font-size: clamp(8rem, 22vw, 18rem); line-height: 0.9; color: white; font-feature-settings: "tnum", "lnum"; letter-spacing: -0.05em; } .display-next-row { display: flex; gap: 1.75rem; justify-content: center; flex-wrap: wrap; } .display-next-num { font-family: var(--font-display); font-variation-settings: "opsz" 60, "wght" 400, "SOFT" 60; font-size: clamp(2.5rem, 5vw, 4rem); color: rgba(255,255,255,0.4); font-feature-settings: "tnum"; letter-spacing: -0.03em; } /* ---------- Tables ---------- */ .table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin: 1rem 0; } .table th, .table td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.92rem; } .table th { background: var(--bg-soft); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); } .table tr:last-child td { border-bottom: none; } .table tr:hover td { background: var(--bg-soft); } .table td.num { font-family: var(--font-display); font-variation-settings: "opsz" 18, "wght" 500; font-feature-settings: "tnum", "lnum"; } .inline-form { display: inline-flex; gap: 0.25rem; align-items: center; margin-right: 0.25rem; } .inline-form input[type="password"] { width: auto; margin-top: 0; padding: 0.4rem 0.7rem; } /* ---------- QR / thumbs ---------- */ .qr-preview { max-width: 240px; display: block; margin: 0.5rem 0 1rem; border: 1px solid var(--line); padding: 1rem; background: white; border-radius: var(--radius); } .thumb { max-width: 200px; display: block; margin: 0.5rem 0; border: 1px solid var(--line); padding: 0.5rem; background: white; border-radius: 8px; } /* ---------- Admin KPI cards (data dashboard) ---------- */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1rem 0; } .kpi-grid .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.15rem 1.15rem 1.15rem; position: relative; overflow: hidden; } .kpi-grid .kpi-label { text-align: left; } .kpi-grid .kpi-value { text-align: left; font-size: 2.1rem; margin-top: .4rem; } /* ---------- Bar chart ---------- */ .bar-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 240px; margin: 1rem 0 2rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 32px; height: 100%; position: relative; } .bar { width: 70%; background: var(--ink-dim); border-radius: 6px 6px 0 0; position: relative; min-height: 2px; overflow: hidden; display: flex; align-items: flex-end; margin-top: auto; transition: background .15s; } .bar:hover { background: var(--ink-mute); } .bar-served { width: 100%; background: var(--accent); border-radius: 6px 6px 0 0; } .bar-label { font-size: 0.7rem; color: var(--ink-mute); margin-top: 0.5rem; font-feature-settings: "tnum"; } .bar-num { font-family: var(--font-display); font-variation-settings: "opsz" 14, "wght" 500; font-size: 0.82rem; margin-top: 0.15rem; color: var(--ink); font-feature-settings: "tnum"; } /* ---------- Heatmap ---------- */ .heatmap { display: flex; flex-direction: column; gap: 3px; margin: 1rem 0 2rem; font-size: 0.7rem; overflow-x: auto; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .heatmap-row { display: flex; gap: 3px; } .heatmap-cell { flex: 0 0 32px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); border-radius: 5px; color: var(--ink); font-feature-settings: "tnum"; } .heatmap-cell.head { background: transparent; font-weight: 600; color: var(--ink-mute); } /* ---------- Misc ---------- */ .danger-zone { background: var(--status-bad-bg) !important; border-color: color-mix(in oklab, var(--status-bad), transparent 60%) !important; } .danger-zone form { display: inline-block; margin-right: 0.5rem; } .checkbox-list { list-style: none; padding: 0; margin: 0 0 1rem; } .checkbox-list li { padding: 0.1rem 0; } /* HTMX swap shimmer */ .htmx-swapping { opacity: 0.5; transition: opacity .15s; } /* ---------- Page fade-in ---------- */ main.container, main.staff-main { animation: enter .35s var(--ease-out); } @keyframes enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ===================================================================== ADMIN DASHBOARD - queue intelligence ===================================================================== */ .dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1rem 0 2rem; } .live-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); box-shadow: var(--shadow-1); } .live-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--status-call); position: relative; } .live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 999px; background: var(--status-call); opacity: 0.35; animation: live-pulse 1.6s ease-out infinite; } @keyframes live-pulse { 0% { transform: scale(.7); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } } .dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .dash-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.35rem; box-shadow: var(--shadow-1); } .dash-kpi-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); } .dash-kpi-value { font-family: var(--font-display); font-variation-settings: "opsz" 60, "wght" 500, "SOFT" 20; font-size: 2.6rem; line-height: 1; color: var(--ink); margin: 0.4rem 0 0.4rem; font-feature-settings: "tnum", "lnum"; letter-spacing: -0.025em; } .dash-kpi-unit { font-family: var(--font-body); font-variation-settings: normal; font-size: 1.4rem; font-weight: 500; color: var(--ink-soft); margin-left: 0.2em; } .dash-kpi-sub { font-size: 0.78rem; color: var(--ink-soft); } .dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; } @media (max-width: 960px) { .dash-grid { grid-template-columns: 1fr; } } .section-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 1rem; } .section-head h2 { margin: 0; } .link-arrow { font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); } .link-arrow:hover { color: var(--accent); text-decoration: none; } .empty-state { background: var(--surface); border: 1px dashed var(--ink-dim); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; } .queue-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .queue-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; color: inherit; text-decoration: none; transition: transform .15s var(--ease-out), box-shadow .15s, border-color .15s; box-shadow: var(--shadow-1); } .queue-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--ink-dim); text-decoration: none; } .queue-card.is-overflow { border-color: color-mix(in oklab, var(--status-bad), transparent 50%); background: linear-gradient(180deg, color-mix(in oklab, var(--status-bad), transparent 96%), var(--surface) 40%); } .qc-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .qc-name { font-family: var(--font-display); font-variation-settings: "opsz" 24, "wght" 500; font-size: 1.25rem; letter-spacing: -0.015em; color: var(--ink); } .qc-status { font-size: 0.75rem; color: var(--ink-soft); margin-top: 0.2rem; display: inline-flex; align-items: center; gap: 0.35rem; } .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink-mute); display: inline-block; } .dot.live { background: var(--status-call); } .dot.red { background: var(--status-bad); } .dot.dim { background: var(--ink-dim); } .qc-count { text-align: right; } .qc-count-num { font-family: var(--font-display); font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 30; font-size: 2.6rem; line-height: 1; font-feature-settings: "tnum", "lnum"; color: var(--accent); letter-spacing: -0.025em; } .is-overflow .qc-count-num { color: var(--status-bad); } .qc-count-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); } .qc-depth { position: relative; height: 6px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; margin-bottom: 1rem; } .qc-depth-fill { position: absolute; inset: 0; background: var(--accent); border-radius: 999px; transition: width .35s var(--ease-out); } .is-overflow .qc-depth-fill { background: var(--status-bad); } .qc-depth-threshold { position: absolute; right: 0; top: -2px; bottom: -2px; width: 2px; background: var(--ink-mute); } .qc-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; font-size: 0.8rem; } .qc-stats > div { display: flex; flex-direction: column; gap: 0.1rem; } .qc-stat-label { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .qc-stat-val { font-family: var(--font-display); font-variation-settings: "opsz" 18, "wght" 500; font-size: 1.05rem; color: var(--ink); font-feature-settings: "tnum"; } /* Activity feed */ .dash-activity { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.35rem; } .activity-feed { list-style: none; margin: 0; padding: 0; } .activity-feed .ev { display: grid; grid-template-columns: 48px 16px 1fr; gap: 0.5rem; padding: 0.55rem 0; border-top: 1px solid var(--line-soft); font-size: 0.88rem; align-items: flex-start; } .activity-feed .ev:first-child { border-top: none; } .ev-time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-mute); margin-top: 0.18rem; } .ev-marker { width: 8px; height: 8px; border-radius: 999px; margin-top: 0.45rem; background: var(--ink-mute); justify-self: center; } .ev-join .ev-marker { background: var(--ink-dim); } .ev-call .ev-marker { background: var(--accent); } .ev-served .ev-marker { background: var(--status-call); } .ev-no_show .ev-marker { background: var(--status-bad); } .ev-on_way .ev-marker { background: var(--status-near); } .ev-body strong { font-weight: 500; } /* ===================================================================== DISPLAY screen - cinema-grade ===================================================================== */ .display-wrap { padding: 3rem 4rem !important; } .display-tenant { font-size: 2.5rem !important; } .display-queue { font-size: 1.4rem !important; } .display-label { font-size: 1.5rem !important; letter-spacing: 0.4em !important; margin-bottom: 1.5rem !important; } .display-big { font-size: clamp(20rem, 50vw, 44rem) !important; line-height: 0.85 !important; } .display-next-num { font-size: clamp(5rem, 10vw, 9rem) !important; } .display-next-row { gap: 3rem !important; } /* ===================================================================== OPERATOR overflow alert ===================================================================== */ .overflow-alert { background: var(--status-bad-bg); border: 1px solid color-mix(in oklab, var(--status-bad), transparent 50%); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .overflow-alert-icon { width: 36px; height: 36px; border-radius: 999px; background: var(--status-bad); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .overflow-alert-body { flex: 1; min-width: 220px; } .overflow-alert-title { font-weight: 600; color: oklch(40% 0.15 25); } .overflow-alert-sub { font-size: 0.88rem; color: var(--ink-soft); } .overflow-alert-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* ===================================================================== FEEDBACK widget (in ad slot) ===================================================================== */ .feedback-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin: 1.5rem 0; } .feedback-prompt { font-weight: 500; margin-bottom: 0.5rem; color: var(--ink); } .feedback-reward { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 1rem; } .star-row { display: flex; flex-direction: row-reverse; justify-content: center; gap: 0.4rem; margin: 0.5rem 0; } .star-row input[type=radio] { display: none; } .star-row label { cursor: pointer; font-size: 2rem; color: var(--ink-dim); transition: color .12s, transform .1s; margin: 0; } .star-row label:hover, .star-row label:hover ~ label, .star-row input:checked ~ label { color: oklch(82% 0.18 70); } .star-row label:hover { transform: scale(1.15); } .feedback-thanks { background: var(--status-call-bg); border: 1px solid color-mix(in oklab, var(--status-call), transparent 50%); border-radius: var(--radius); padding: 1.25rem; text-align: center; } .feedback-code { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; background: var(--surface); padding: 0.4rem 0.85rem; border-radius: 8px; display: inline-block; margin-top: 0.5rem; letter-spacing: 0.1em; } .feedback-video { position: relative; padding-top: 56.25%; border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; } .feedback-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ===================================================================== REDESIGN 2026.06.26 — "Zeit-zuerst" für Kunden, klare Stationen für Operator. Wird oben in app.css *appended*, damit es die alten Regeln gezielt überschreibt; alte Klassen bleiben für Übergangs-Templates funktionsfähig. ===================================================================== */ /* ---------- New tokens that extend the existing palette ---------- */ :root { --skin: oklch(98% 0.007 75); /* hint warmer than --bg */ --paper: oklch(99.3% 0.004 80); --hairline: oklch(90% 0.008 80); --hairline-strong: oklch(82% 0.012 80); --gold: oklch(76% 0.13 80); /* "you are here" accent */ --gold-soft: oklch(94% 0.06 85); --teal: oklch(70% 0.13 200); /* informational */ --rose: oklch(70% 0.16 25); --shadow-card: 0 1px 0 oklch(100% 0 0 / 0.6) inset, 0 1px 2px rgba(15,23,42,.04), 0 12px 28px -16px rgba(15,23,42,.14); } /* ===================================================================== CUSTOMER TICKET — the centerpiece. Time-first. ===================================================================== */ body.customer { background: var(--skin); } .ticket-shell { max-width: 520px; margin: 0 auto; padding: 1rem 1rem 4rem; display: flex; flex-direction: column; gap: 1.25rem; } /* skeleton while first SSE roundtrip lands */ .ticket-skeleton { display:flex; flex-direction:column; gap:1rem; padding: 2rem 0; } .skel-line { height: 14px; border-radius: 4px; background: var(--bg-soft); } .skel-line.big { height: 56px; } .skel-line.w-60 { width: 60%; } .skel-line.w-80 { width: 80%; } .skel-rail { height: 48px; border-radius: 24px; background: var(--bg-soft); } .skel-line, .skel-rail { background: linear-gradient(90deg, var(--bg-soft) 0%, oklch(94% 0.005 80) 50%, var(--bg-soft) 100%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Outer card the live status sits in */ .ticket-card { background: var(--paper); border-radius: var(--radius-xl); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); overflow: hidden; position: relative; } /* ----- WHEN HERO ---------------------------------------------------- */ .when-hero { padding: 2rem 1.5rem 1rem; text-align: center; position: relative; } .when-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.25rem; } .when-line { font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 25; line-height: 0.95; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .when-prefix { font-family: var(--font-body); font-weight: 400; font-size: 1rem; color: var(--ink-mute); letter-spacing: 0.02em; } .when-headline { font-size: clamp(3rem, 14vw, 5.5rem); letter-spacing: -0.03em; color: var(--ink); font-feature-settings: "ss01", "tnum"; } .when-headline-quiet { font-size: clamp(2rem, 7vw, 2.75rem); letter-spacing: -0.02em; color: var(--ink-mute); font-variation-settings: "opsz" 100, "wght" 350; } .when-sub { margin-top: 0.75rem; font-size: 0.95rem; color: var(--ink-soft); } .when-sub strong { color: var(--ink); font-weight: 600; } .when-range { margin-top: 0.4rem; font-size: 0.78rem; color: var(--ink-mute); } .when-method { position: absolute; top: 1rem; right: 1rem; font-size: 0.65rem; color: var(--ink-mute); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--hairline); } /* ----- QUEUE RAIL — the signature element ----------------------------- */ .queue-rail-wrap { padding: 0.75rem 1.5rem 0; } .queue-rail { display: flex; align-items: center; gap: 0.45rem; padding: 1rem 1rem; background: var(--bg-soft); border-radius: 999px; border: 1px solid var(--hairline); overflow: hidden; } .rail-anchor { color: var(--ink-mute); flex: 0 0 auto; display: inline-flex; margin-right: 0.25rem; } .rail-dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; background: oklch(82% 0.01 80); position: relative; transition: transform 0.4s var(--ease-out); } .rail-dot.is-onway { background: var(--teal); box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal), transparent 80%); } .rail-dot.is-called { background: var(--status-call); box-shadow: 0 0 0 3px color-mix(in oklab, var(--status-call), transparent 70%); animation: rail-called 1.4s var(--ease-out) infinite; } @keyframes rail-called { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } } /* "YOU" dot — the visual anchor */ .rail-dot.is-you { width: 38px; height: 38px; background: var(--gold); color: oklch(20% 0.02 80); font-weight: 700; font-size: 0.72rem; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px var(--gold-soft), 0 0 0 5px var(--gold), 0 4px 12px -2px color-mix(in oklab, var(--gold), transparent 50%); margin: 0 0.25rem; font-feature-settings: "tnum"; } .rail-you-num { line-height: 1; } .rail-more { margin-left: auto; font-size: 0.75rem; color: var(--ink-mute); font-feature-settings: "tnum"; } .rail-axis { display: flex; justify-content: space-between; margin-top: 0.6rem; font-size: 0.72rem; color: var(--ink-mute); padding: 0 0.5rem; letter-spacing: 0.04em; } .rail-axis-start { font-weight: 600; } /* ----- KPI STRIP (small, precise) ----------------------------------- */ .kpi-strip { display: flex; align-items: center; justify-content: center; gap: 2.5rem; padding: 1.5rem 1.5rem 1.25rem; } .kpi { text-align: center; } .kpi-value { font-family: var(--font-display); font-variation-settings: "opsz" 60, "wght" 450; font-size: 1.5rem; line-height: 1; color: var(--ink); font-feature-settings: "tnum"; } .kpi-label { margin-top: 0.4rem; font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.02em; } .kpi-divider { width: 1px; height: 28px; background: var(--hairline-strong); } /* ----- NEAR BANNER (state="near") ----------------------------------- */ .near-banner { margin: 0 1.5rem 1rem; padding: 0.85rem 1rem; background: var(--gold-soft); border: 1px solid color-mix(in oklab, var(--gold), transparent 60%); border-radius: var(--radius); display: flex; align-items: center; gap: 0.85rem; } .near-banner-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; box-shadow: 0 0 0 0 var(--gold); animation: near-pulse 1.6s var(--ease-out) infinite; } @keyframes near-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--gold), transparent 50%); } 100% { box-shadow: 0 0 0 12px color-mix(in oklab, var(--gold), transparent 100%); } } .near-banner-title { font-weight: 600; color: var(--ink); } .near-banner-sub { font-size: 0.82rem; color: var(--ink-soft); } /* ----- PRIMARY ACTION ----------------------------------------------- */ .ticket-action { padding: 0.5rem 1.5rem 2rem; } .btn-primary-big { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; width: 100%; padding: 1.15rem 1.25rem; background: var(--ink); color: white; border: 0; border-radius: var(--radius-lg); font: inherit; font-size: 1.1rem; font-weight: 600; cursor: pointer; letter-spacing: -0.01em; transition: transform 0.08s, background 0.15s, box-shadow 0.2s; box-shadow: 0 8px 24px -10px rgba(15,23,42,.5); } .btn-primary-big:hover { background: color-mix(in oklab, var(--accent), black 10%); filter: none; } .btn-primary-big:active { transform: translateY(1px); } .btn-primary-big .btn-hint { font-size: 0.72rem; font-weight: 400; letter-spacing: 0.03em; color: oklch(80% 0.01 250); } .btn-quiet { background: transparent; border: 0; color: var(--ink-soft); font: inherit; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hairline-strong); cursor: pointer; padding: 0.4rem 0.8rem; } .btn-quiet.centered { display: block; margin: 0.5rem auto 0; } .btn-quiet:hover { color: var(--ink); text-decoration-color: var(--ink-mute); } .onway-confirm { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; background: color-mix(in oklab, var(--teal), transparent 92%); border: 1px solid color-mix(in oklab, var(--teal), transparent 70%); border-radius: var(--radius); } .onway-confirm-title { font-weight: 600; color: var(--ink); } .onway-confirm-sub { font-size: 0.82rem; color: var(--ink-soft); } .onway-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); flex: 0 0 auto; animation: near-pulse 2s var(--ease-out) infinite; box-shadow: 0 0 0 var(--teal); } /* ----- TERMINAL STATES (called, served, no_show, cancelled) --------- */ .call-stage { padding: 3rem 1.5rem 3.25rem; text-align: center; position: relative; background: linear-gradient(180deg, var(--status-call-bg), color-mix(in oklab, var(--status-call-bg), white 50%)); overflow: hidden; } .call-stage-eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in oklab, var(--status-call), oklch(20% 0.04 152) 50%); margin-bottom: 1.5rem; } .call-stage-title { font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 500; font-size: clamp(3.5rem, 14vw, 5.5rem); line-height: 0.95; letter-spacing: -0.03em; color: oklch(28% 0.06 152); } .call-stage-sub { margin-top: 0.5rem; font-size: 1.05rem; color: oklch(40% 0.04 152); } .call-stage-code { margin-top: 2rem; display: inline-flex; align-items: baseline; gap: 0.75rem; padding: 0.75rem 1.5rem; background: white; border-radius: 999px; box-shadow: var(--shadow-2); } .call-stage-code span { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .call-stage-code strong { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: 0.1em; color: var(--ink); font-feature-settings: "tnum"; } .call-stage-pulse { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--status-call), transparent 80%), transparent 60%); animation: call-glow 2.4s ease-in-out infinite; } @keyframes call-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .terminal-stage { text-align: center; padding: 3rem 1.5rem; } .terminal-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; } .terminal-title { font-family: var(--font-display); font-variation-settings: "opsz" 96, "wght" 450; font-size: 1.75rem; color: var(--ink); letter-spacing: -0.02em; } .terminal-sub { color: var(--ink-soft); margin-top: 0.4rem; } .terminal-ok .terminal-icon { background: var(--status-call-bg); color: var(--status-call); } .terminal-err .terminal-icon { background: var(--status-bad-bg); color: var(--status-bad); } .terminal-muted .terminal-icon { background: var(--bg-soft); color: var(--ink-mute); } /* ----- TICKET ID footer --------------------------------------------- */ .ticket-id { text-align: center; padding: 1rem 1.5rem 0; } .ticket-id-row { display: inline-flex; align-items: baseline; gap: 0.45rem; font-size: 0.85rem; color: var(--ink-soft); } .ticket-id-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; } .ticket-id-num, .ticket-id-code { font-family: var(--font-mono); font-size: 0.95rem; color: var(--ink); font-feature-settings: "tnum"; } .ticket-id-code { letter-spacing: 0.1em; } .ticket-id-sep { color: var(--ink-dim); } .ticket-id-hint { margin-top: 0.4rem; font-size: 0.75rem; color: var(--ink-mute); } .ticket-leave { margin-top: 1rem; } /* ===================================================================== AD CARD (new partial) ===================================================================== */ .ad-card { display: block; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); text-decoration: none; color: inherit; } .ad-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); } .ad-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ad-card-body { padding: 1rem 1.25rem 1.25rem; } .ad-card-headline { font-family: var(--font-display); font-variation-settings: "opsz" 60, "wght" 500; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--ink); } .ad-card-text { color: var(--ink-soft); margin-top: 0.35rem; } .ad-card-cta { display: inline-flex; align-items: center; margin-top: 0.85rem; padding: 0.45rem 0.9rem; background: var(--accent); color: white; border-radius: 999px; font-size: 0.85rem; font-weight: 500; text-decoration: none; } /* ===================================================================== OPERATOR PANEL — clearer split, no overlap on "Wird aufgerufen" ===================================================================== */ .op-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; margin-top: 1rem; } @media (max-width: 820px) { .op-grid { grid-template-columns: 1fr; } } .op-section-head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); font-weight: 600; margin: 0 0 0.75rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; } .op-section-count { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); letter-spacing: 0; text-transform: none; font-feature-settings: "tnum"; } .op-section-meta { font-size: 0.72rem; color: var(--ink-mute); letter-spacing: 0.03em; text-transform: none; } /* ----- Currently Called Card ---------------------------------------- */ .op-current { /* container */ } .op-current-empty { background: var(--paper); border: 1.5px dashed var(--hairline); border-radius: var(--radius-lg); padding: 2rem 1rem; text-align: center; color: var(--ink-soft); } .op-current-empty-mark { font-family: var(--font-display); font-size: 3rem; color: var(--ink-dim); line-height: 1; } .op-current-empty p { margin: 0.5rem 0 0; } .op-current-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.25rem 1.25rem 1rem; margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 1rem; } .op-current-card-head { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 1rem; } .op-current-num { font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 500; font-size: clamp(2.5rem, 8vw, 3.5rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--ink); font-feature-settings: "tnum"; display: flex; align-items: baseline; } .op-current-num-hash { font-size: 0.5em; color: var(--ink-mute); margin-right: 0.1em; } .op-current-meta { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; padding-top: 0.4rem; } .op-current-code-row { display: inline-flex; align-items: baseline; gap: 0.5rem; } .op-current-code-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .op-current-code { font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: 0.12em; color: var(--ink); font-feature-settings: "tnum"; padding: 0.1em 0.45em; background: var(--gold-soft); border-radius: 6px; } .op-current-meta-line { font-size: 0.92rem; } .op-current-meta-line.muted { color: var(--ink-soft); font-size: 0.82rem; } /* Action row — own row, never overlapping the number */ .op-current-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; padding-top: 0.5rem; border-top: 1px solid var(--hairline); } .op-current-actions form { display: inline-flex; flex: 0 0 auto; } .op-current-actions .btn { min-width: 7rem; } /* ----- Waiting list ------------------------------------------------- */ .op-waiting-empty { background: var(--paper); border: 1.5px dashed var(--hairline); border-radius: var(--radius); padding: 1.25rem; text-align: center; } .op-waiting-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.45rem; } .op-row { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.85rem; padding: 0.85rem 0.95rem; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); align-items: center; } .op-row.is-near-top { border-color: var(--hairline-strong); background: linear-gradient(180deg, var(--paper), oklch(99% 0.01 80)); } .op-row.is-on-way { border-color: color-mix(in oklab, var(--teal), transparent 60%); background: color-mix(in oklab, var(--teal), transparent 94%); } .op-row-pos { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); text-align: center; padding: 0.3rem 0; background: var(--bg-soft); border-radius: 6px; font-feature-settings: "tnum"; } .op-row-num { font-family: var(--font-display); font-variation-settings: "opsz" 60, "wght" 500; font-size: 1.35rem; line-height: 1; letter-spacing: -0.01em; color: var(--ink); font-feature-settings: "tnum"; } .op-row-meta { margin-top: 0.3rem; display: flex; flex-direction: column; gap: 0.2rem; } .op-row-name { font-weight: 500; } .op-row-note { font-size: 0.8rem; color: var(--ink-soft); padding: 0.2rem 0.4rem; background: var(--bg-soft); border-radius: 4px; margin-top: 0.2rem; display: inline-block; } .badge-onway { display: inline-block; font-size: 0.72rem; font-weight: 600; color: oklch(35% 0.1 200); background: color-mix(in oklab, var(--teal), transparent 80%); padding: 0.15rem 0.5rem; border-radius: 4px; letter-spacing: 0.02em; } /* Overflow alert */ .op-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem; margin-bottom: 1rem; background: var(--status-bad-bg); border: 1px solid color-mix(in oklab, var(--status-bad), transparent 65%); border-radius: var(--radius); } .op-alert-pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--status-bad); animation: near-pulse 1.4s var(--ease-out) infinite; box-shadow: 0 0 0 var(--status-bad); } .op-alert-title { font-weight: 600; color: oklch(35% 0.1 25); } .op-alert-sub { font-size: 0.85rem; color: oklch(40% 0.06 25); } /* ===================================================================== BIG DISPLAY ===================================================================== */ .display-stage { min-height: 100vh; background: oklch(15% 0.01 250); color: oklch(96% 0.01 80); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; gap: 4rem; } .display-eyebrow { font-size: 1rem; letter-spacing: 0.3em; text-transform: uppercase; color: oklch(60% 0.02 80); margin-bottom: 1.5rem; text-align: center; } .display-now { text-align: center; } .display-now-empty { font-family: var(--font-display); font-size: clamp(8rem, 20vw, 14rem); color: oklch(40% 0.01 80); line-height: 0.9; } .display-now-hint { color: oklch(55% 0.01 80); font-size: 1.1rem; } .display-now-num { font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 350; font-size: clamp(10rem, 28vw, 22rem); line-height: 0.85; letter-spacing: -0.04em; color: oklch(98% 0.01 80); font-feature-settings: "tnum"; } .display-hash { font-size: 0.4em; color: oklch(60% 0.01 80); margin-right: 0.05em; vertical-align: 0.2em; } .display-now-code { margin-top: 1.5rem; font-size: 1.5rem; letter-spacing: 0.05em; color: oklch(70% 0.02 80); } .display-now-code strong { font-family: var(--font-mono); color: var(--gold); letter-spacing: 0.2em; font-feature-settings: "tnum"; margin-left: 0.5em; } .display-next { text-align: center; } .display-next-list { display: flex; gap: 2rem; align-items: center; list-style: none; padding: 0; margin: 0; } .display-next-list li { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .display-next-rank { font-size: 0.85rem; letter-spacing: 0.16em; color: oklch(55% 0.01 80); } .display-next-num { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; color: oklch(80% 0.01 80); font-feature-settings: "tnum"; } /* ===================================================================== BRANDING PAGE — split form + sticky live preview ===================================================================== */ .branding-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 2rem; align-items: start; margin-top: 1.5rem; } @media (max-width: 920px) { .branding-layout { grid-template-columns: 1fr; } .branding-preview { position: static !important; max-height: none !important; } } .branding-form { display: flex; flex-direction: column; gap: 1rem; } .brand-section { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-1); } .brand-section h3 { font-family: var(--font-display); font-variation-settings: "opsz" 60, "wght" 450; font-size: 1.25rem; letter-spacing: -0.01em; margin: 0 0 0.5rem; } .brand-section + .brand-section { margin-top: 0; } .brand-current { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0.8rem; background: var(--bg-soft); border-radius: 10px; margin-bottom: 1rem; } .brand-current img { max-height: 40px; max-width: 120px; object-fit: contain; } .brand-submit-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: 0.5rem 0; } .branding-preview { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; display: flex; flex-direction: column; gap: 0.5rem; } .preview-frame-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; gap: 0.4rem; } .preview-frame-label-dot { width: 8px; height: 8px; background: var(--status-call); border-radius: 50%; animation: near-pulse 2s var(--ease-out) infinite; } .preview-frame { background: var(--pv-background, var(--skin)); border: 1px solid var(--hairline); border-radius: 28px; box-shadow: 0 4px 16px -8px rgba(15,23,42,.15), 0 30px 60px -30px rgba(15,23,42,.25); overflow: hidden; } .preview-header { background: var(--pv-accent, var(--tenant-accent, #0f172a)); color: white; padding: 1rem; display: flex; align-items: center; gap: 0.6rem; } .preview-header-logo { max-height: 28px; max-width: 100px; object-fit: contain; } .preview-header-name { font-weight: 500; font-size: 0.95rem; } .preview-body { padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 1rem; background: var(--paper); } .pv-when { text-align: center; padding: 0.75rem 0; } .pv-eyebrow { font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.6rem; } .pv-headline { display: flex; flex-direction: column; align-items: center; } .pv-prefix { font-size: 0.75rem; color: var(--ink-mute); } .pv-time { font-family: var(--font-display); font-variation-settings: "opsz" 96, "wght" 450; font-size: 2.5rem; line-height: 1; letter-spacing: -0.02em; } .pv-sub { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.4rem; } .pv-sub strong { color: var(--ink); } .pv-rail { display: flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.5rem 0.75rem; background: var(--bg-soft); border-radius: 999px; } .pv-rail-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-dim); } .pv-rail-you { width: 26px; height: 26px; background: var(--gold); color: oklch(20% 0.02 80); font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--gold-soft); } .pv-ad { background: white; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; } .pv-ad img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } .pv-ad-body { padding: 0.75rem 0.85rem; } .pv-ad-headline { font-weight: 600; font-size: 0.95rem; } .pv-ad-text { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.2rem; } .pv-ad-cta { display: inline-block; margin-top: 0.5rem; padding: 0.3rem 0.7rem; background: var(--pv-primary, var(--tenant-primary, #0f172a)); color: white; border: 0; border-radius: 999px; font-size: 0.78rem; font-weight: 500; } .pv-feedback { background: white; border: 1px solid var(--hairline); border-radius: 14px; padding: 0.85rem; text-align: center; } .pv-fb-prompt { font-weight: 500; font-size: 0.9rem; } .pv-fb-stars { color: var(--gold); font-size: 1.4rem; letter-spacing: 0.15em; margin: 0.3rem 0; } .pv-fb-reward { font-size: 0.75rem; color: var(--ink-soft); } .preview-footer { padding: 0.7rem 1rem 1rem; text-align: center; background: var(--paper); border-top: 1px solid var(--hairline); } .preview-meta { margin-top: 0.5rem; line-height: 1.5; } /* ===================================================================== ADMIN AI PAGE ===================================================================== */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .ai-current { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 2rem; box-shadow: var(--shadow-1); } .ai-current-label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.5rem; } .ai-current-value { font-size: 1.5rem; } .pill { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; letter-spacing: 0; } .pill-good { background: color-mix(in oklab, var(--status-call), transparent 75%); color: oklch(30% 0.08 152); } .pill-mid { background: var(--gold-soft); color: oklch(35% 0.1 80); } .pill-base { background: var(--bg-soft); color: var(--ink-soft); } .pill-pending { background: var(--bg-soft); color: var(--ink-soft); } .ai-current-meta { margin-top: 0.5rem; } /* Recommendations */ .ai-recs h2, .ai-suff h2, .ai-train h2, .ai-forecast h2 { font-family: var(--font-display); font-variation-settings: "opsz" 60, "wght" 450; font-size: 1.5rem; letter-spacing: -0.01em; margin: 2rem 0 1rem; } .ai-recs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .ai-rec { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; } .ai-rec-tone-mark { width: 4px; border-radius: 4px; background: var(--ink-mute); align-self: stretch; } .ai-rec-info .ai-rec-tone-mark { background: var(--teal); } .ai-rec-good .ai-rec-tone-mark { background: var(--status-call); } .ai-rec-warn .ai-rec-tone-mark { background: var(--gold); } .ai-rec-bad .ai-rec-tone-mark { background: var(--status-bad); } .ai-rec-title { font-weight: 600; margin-bottom: 0.25rem; } .ai-rec-text { font-size: 0.9rem; color: var(--ink-soft); } /* Sufficiency cards */ .ai-suff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; } .ai-suff-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 1.25rem; position: relative; } .ai-suff-card.is-ready { border-color: color-mix(in oklab, var(--status-call), transparent 55%); } .ai-suff-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 1rem; } .ai-suff-name { font-weight: 600; font-size: 1.05rem; } .ai-suff-progress { height: 6px; width: 100%; background: var(--bg-soft); border-radius: 999px; overflow: hidden; } .ai-suff-progress-bar { height: 100%; background: linear-gradient(90deg, var(--gold), var(--status-call)); transition: width 0.4s var(--ease-out); } .ai-suff-card.is-ready .ai-suff-progress-bar { background: var(--status-call); } .ai-suff-progress-label { margin-top: 0.4rem; font-size: 0.82rem; color: var(--ink-soft); font-feature-settings: "tnum"; } .ai-suff-progress-label strong { color: var(--ink); } .ai-suff-reason { margin-top: 0.6rem; line-height: 1.45; } .ai-suff-hint { margin-top: 0.4rem; color: var(--ink-mute); } /* Train card */ .ai-train-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .ai-train-title { font-weight: 600; font-size: 1.1rem; } .ai-train-text { max-width: 52ch; margin-top: 0.3rem; line-height: 1.5; } .ai-metrics-details { margin-top: 1rem; } .ai-metrics-details summary { cursor: pointer; padding: 0.5rem 0; } .table.tight { font-size: 0.85rem; margin-top: 0.5rem; } .table.tight th { text-align: left; padding-right: 1rem; color: var(--ink-soft); font-weight: 500; } .table.tight td { padding: 0.2rem 0; } /* Forecast chart */ .ai-forecast-chart { display: flex; align-items: flex-end; gap: 4px; height: 200px; padding: 1rem 0 0; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1rem; margin-top: 1rem; } .ai-forecast-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; height: 100%; } .ai-forecast-bar { width: 100%; background: linear-gradient(180deg, var(--gold), var(--status-call)); border-radius: 3px 3px 0 0; transition: height 0.4s var(--ease-out); min-height: 2px; } .ai-forecast-h { font-family: var(--font-mono); font-size: 0.65rem; color: var(--ink-mute); font-feature-settings: "tnum"; } .ai-forecast-empty { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; background: var(--paper); border: 1.5px dashed var(--hairline); border-radius: var(--radius); } .ai-forecast-empty-icon { width: 36px; height: 36px; background: var(--bg-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-mute); font-size: 1.5rem; flex: 0 0 auto; } /* ===================================================================== Misc utilities ===================================================================== */ button:disabled { opacity: 0.4; cursor: not-allowed; } em { font-style: italic; color: var(--ink-soft); } /* ===================================================================== REDESIGN PHASE 2 — Slider, Feedback admin, Walk-in flash, Rail "Ich" ===================================================================== */ /* ---------- Customer rail: "Ich" + Position label above ---------- */ /* * Wichtig: die Position-Pille muss ABSOLUT positioniert sein und darf den * Wrap-Container nicht höher machen. Sonst rutscht der goldene Dot in der * Flex-Row nach unten (relativ zu den grauen Dots), weil `align-items: * center` der Rail die Wrap-Höhe als Bezug nimmt. Lösung: Wrap ist genauso * groß wie der Dot, die Pille schwebt darüber. */ .rail-you-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; margin: 0 0.25rem; /* Wrap hat keine eigene Größe — der Dot drinnen bestimmt sie. */ } .rail-you-pos { position: absolute; bottom: calc(100% + 8px); /* schwebt 8px über dem Dot */ left: 50%; transform: translateX(-50%); font-size: 0.65rem; font-weight: 600; color: oklch(35% 0.06 80); background: var(--gold-soft); padding: 0.18rem 0.55rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--gold), transparent 60%); letter-spacing: 0.04em; white-space: nowrap; font-feature-settings: "tnum"; z-index: 2; pointer-events: none; box-shadow: 0 2px 6px -2px color-mix(in oklab, var(--gold), transparent 60%); } .rail-you-pos::after { content: ''; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%) rotate(45deg); width: 7px; height: 7px; background: var(--gold-soft); border-right: 1px solid color-mix(in oklab, var(--gold), transparent 60%); border-bottom: 1px solid color-mix(in oklab, var(--gold), transparent 60%); } .rail-you-label { font-size: 0.78rem; line-height: 1; font-weight: 700; letter-spacing: 0.02em; } /* Rail braucht oben Padding, damit die Pille nicht oben aus der Karte ragt */ .queue-rail { overflow: visible; padding: 2.2rem 1rem 1rem; } /* Branding-Vorschau: gleiches Prinzip, kleiner skaliert */ .pv-rail-you-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } .pv-rail-you-pos { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: 0.55rem; background: var(--gold-soft); padding: 0.08rem 0.4rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--gold), transparent 60%); color: oklch(35% 0.06 80); font-weight: 600; font-feature-settings: "tnum"; letter-spacing: 0.02em; white-space: nowrap; z-index: 2; pointer-events: none; } .pv-rail-you-pos::after { content: ''; position: absolute; left: 50%; bottom: -3px; transform: translateX(-50%) rotate(45deg); width: 5px; height: 5px; background: var(--gold-soft); border-right: 1px solid color-mix(in oklab, var(--gold), transparent 60%); border-bottom: 1px solid color-mix(in oklab, var(--gold), transparent 60%); } .pv-rail { padding: 1.6rem 0.75rem 0.75rem; overflow: visible; } /* ---------- Walk-in flash card ---------- */ .walkin-flash { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; padding: 1.25rem 1.5rem; margin: 1rem 0 1.25rem; background: linear-gradient(180deg, color-mix(in oklab, var(--gold-soft), white 30%), var(--gold-soft)); border: 1px solid color-mix(in oklab, var(--gold), transparent 50%); border-radius: var(--radius-lg); box-shadow: 0 1px 0 white inset, 0 4px 20px -10px color-mix(in oklab, var(--gold), transparent 50%); transition: opacity 1.5s ease; } .walkin-flash.walkin-flash-faded { opacity: 0.55; } .walkin-flash-mark { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: white; border-radius: 50%; font-size: 1.25rem; color: var(--status-call); box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--gold), transparent 50%); } .walkin-flash-body { min-width: 0; } .walkin-flash-label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(35% 0.06 80); margin-bottom: 0.5rem; } .walkin-flash-row { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .walkin-flash-num { font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 500; font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--ink); font-feature-settings: "tnum"; display: flex; align-items: baseline; } .walkin-flash-num-hash { font-size: 0.45em; color: var(--ink-mute); margin-right: 0.1em; } .walkin-flash-meta { display: flex; flex-direction: column; gap: 0.3rem; } .walkin-flash-code-line { display: inline-flex; align-items: baseline; gap: 0.5rem; } .walkin-flash-code-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); } .walkin-flash-code { font-family: var(--font-mono); font-size: 1.6rem; letter-spacing: 0.16em; font-feature-settings: "tnum"; color: var(--ink); background: white; padding: 0.2rem 0.7rem; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .walkin-flash-name { font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); } .walkin-flash-close { background: transparent; border: 0; font-size: 1.4rem; color: var(--ink-mute); cursor: pointer; padding: 0.25rem 0.5rem; align-self: flex-start; } .walkin-flash-close:hover { color: var(--ink); } /* ---------- Ad Slider on the customer ticket page ---------- */ .ad-slider { background: white; border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; position: relative; } .ad-slider-track { position: relative; /* Maintain stable height — uses the tallest slide as natural baseline. For more pixel-perfection, an aspect-ratio container would work too. */ min-height: 220px; } .ad-slider-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; display: flex; flex-direction: column; } .ad-slider-slide.is-active { opacity: 1; pointer-events: auto; position: relative; /* the active slide drives the height */ } .ad-slider-link { color: inherit; text-decoration: none; display: block; height: 100%; } .ad-slider-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); } .ad-slider-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .ad-slider-body { padding: 0.85rem 1.1rem 1rem; } .ad-slider-headline { font-family: var(--font-display); font-variation-settings: "opsz" 60, "wght" 500; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink); } .ad-slider-caption { color: var(--ink-soft); margin-top: 0.25rem; font-size: 0.9rem; } .ad-slider-dots { display: flex; justify-content: center; gap: 0.45rem; padding: 0.6rem 0 0.85rem; background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--bg-soft), white 40%)); } .ad-slider-dot { width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--ink-dim); padding: 0; cursor: pointer; transition: transform 0.2s, background 0.2s, width 0.2s; } .ad-slider-dot.is-active { background: var(--ink); width: 18px; border-radius: 999px; } .ad-slider-dot:hover { transform: scale(1.2); } /* Branding preview — slider section */ .pv-ad-slider { position: relative; min-height: 130px; } .pv-ad-slide { position: absolute; inset: 0; opacity: 0; display: flex; flex-direction: column; } .pv-ad-slide.is-active { opacity: 1; position: relative; } .pv-ad-slide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .pv-ad-dots { display: flex; justify-content: center; gap: 0.3rem; padding: 0.4rem 0; } .pv-ad-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-dim); } .pv-ad-dot.is-active { background: var(--ink); width: 14px; border-radius: 999px; } /* ---------- Slide list (admin Branding-Seite) ---------- */ .slide-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1rem; } .slide-item { display: grid; grid-template-columns: 110px 1fr auto; gap: 1rem; padding: 1rem; background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: var(--radius); align-items: start; } @media (max-width: 700px) { .slide-item { grid-template-columns: 1fr; } } .slide-item-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--ink-dim); border: 1px solid var(--hairline); } .slide-item-thumb img { width: 100%; height: 100%; object-fit: cover; } .slide-item-pos { position: absolute; top: 0.4rem; left: 0.4rem; background: rgba(15,23,42,.7); color: white; border-radius: 999px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 600; font-feature-settings: "tnum"; } .slide-item-meta { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .slide-item-meta input { font-size: 0.9rem; } .slide-item-actions { display: flex; flex-direction: column; gap: 0.4rem; align-items: stretch; } .icon-btn { padding: 0.3rem 0.7rem; min-width: auto; font-size: 1rem; } .btn-danger-quiet { color: oklch(40% 0.13 25); } .btn-danger-quiet:hover { color: oklch(30% 0.18 25); } .slide-upload { padding: 1rem; background: var(--bg-soft); border: 1.5px dashed var(--hairline-strong); border-radius: var(--radius); display: flex; flex-direction: column; gap: 0.75rem; } .slide-upload label { margin-bottom: 0; } .slide-empty { padding: 1.5rem; background: var(--bg-soft); border: 1.5px dashed var(--hairline); border-radius: var(--radius); margin-bottom: 1rem; } /* ---------- Reward modes radio group ---------- */ .reward-modes { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1rem 1rem 0.5rem; margin: 1rem 0; background: var(--paper); } .reward-modes legend { padding: 0 0.5rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); font-weight: 600; } .reward-mode-row { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; padding: 0.6rem 0.4rem; cursor: pointer; border-radius: 6px; transition: background 0.15s; margin-bottom: 0; } .reward-mode-row:hover { background: var(--bg-soft); } .reward-mode-row input[type="radio"] { margin-top: 0.3rem; } .reward-mode-row span { display: flex; flex-direction: column; gap: 0.15rem; } .reward-mode-row strong { font-weight: 500; color: var(--ink); } .reward-static-input { padding: 0.75rem; background: var(--gold-soft); border-radius: var(--radius); margin-top: 0.5rem; } .reward-static-input label { margin-bottom: 0.3rem; } .reward-static-input p { margin: 0.3rem 0 0; } /* ---------- Stats cross-link to feedback ---------- */ .stats-cross-link { margin-top: 2.5rem; padding: 1.5rem; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; box-shadow: var(--shadow-1); } .stats-cross-link h2 { font-family: var(--font-display); font-variation-settings: "opsz" 60, "wght" 450; font-size: 1.3rem; letter-spacing: -0.01em; margin-top: 0; } .stats-cross-link-muted { background: var(--bg-soft); } /* ---------- Feedback admin page ---------- */ .fb-totals { display: grid; grid-template-columns: 1fr 1.5fr 2fr; gap: 1rem; margin: 1.5rem 0 2.5rem; } @media (max-width: 820px) { .fb-totals { grid-template-columns: 1fr; } } .fb-total-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-1); } .fb-total-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); font-weight: 600; margin-bottom: 0.5rem; } .fb-total-value { font-family: var(--font-display); font-variation-settings: "opsz" 96, "wght" 450; font-size: 2rem; letter-spacing: -0.02em; line-height: 1; } .fb-stars-display { display: inline-flex; gap: 0.15rem; font-size: 1.5rem; color: var(--ink-dim); letter-spacing: 0.05em; } .fb-stars-display span.is-on { color: var(--gold); } .fb-stars-display.fb-stars-small { font-size: 1rem; } .fb-avg-num { font-family: var(--font-display); font-size: 1.4rem; margin-left: 0.5rem; color: var(--ink); font-feature-settings: "tnum"; } /* Histogramm */ .fb-hist { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.25rem; } .fb-hist-row { display: grid; grid-template-columns: 2rem 1fr 2.5rem; gap: 0.6rem; align-items: center; font-size: 0.78rem; } .fb-hist-label { color: var(--ink-soft); } .fb-hist-bar { height: 8px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; } .fb-hist-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--status-call)); border-radius: 999px; min-width: 2px; } .fb-hist-num { font-family: var(--font-mono); text-align: right; font-size: 0.78rem; color: var(--ink); font-feature-settings: "tnum"; } /* Per-queue cards */ .fb-queue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; } .fb-queue-card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; } .fb-queue-card-empty { opacity: 0.6; } .fb-queue-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; } .fb-queue-name { font-weight: 600; font-size: 1.05rem; } .fb-queue-avg { text-align: right; } .fb-spark { display: flex; align-items: flex-end; gap: 2px; height: 36px; } .fb-spark-bar { flex: 1 1 0; background: linear-gradient(180deg, var(--gold), var(--status-call)); border-radius: 2px 2px 0 0; min-height: 3px; } .fb-spark-bar-empty { background: var(--bg-soft); height: 4px; } .fb-spark-axis { display: flex; justify-content: space-between; margin-top: 0.25rem; } .fb-queue-actions { margin-top: auto; } /* Filter + table */ .fb-filter { display: flex; gap: 0.85rem; align-items: flex-end; flex-wrap: wrap; padding: 0.75rem 1rem; background: var(--bg-soft); border-radius: var(--radius); margin: 1rem 0; } .fb-filter-label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.03em; margin: 0; } .fb-filter-label select { font-size: 0.9rem; min-width: 9rem; } .table-scroll { overflow-x: auto; } .fb-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .fb-table th, .fb-table td { padding: 0.65rem 0.75rem; text-align: left; border-bottom: 1px solid var(--hairline); vertical-align: top; } .fb-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); background: var(--bg-soft); font-weight: 600; } .fb-row { transition: background 0.15s; } .fb-row:hover { background: var(--bg-soft); } .fb-row-redeemed { opacity: 0.7; } .fb-row-invalid { background: var(--status-bad-bg); } .fb-row-invalid:hover { background: color-mix(in oklab, var(--status-bad-bg), white 20%); } .fb-cell-date { white-space: nowrap; } .fb-cell-text { max-width: 320px; } .fb-comment { font-size: 0.88rem; color: var(--ink); line-height: 1.45; font-style: italic; } .fb-comment::before { content: '" '; opacity: 0.5; } .fb-comment::after { content: ' "'; opacity: 0.5; } .fb-code-chip { font-family: var(--font-mono); font-size: 0.85rem; background: var(--gold-soft); padding: 0.15rem 0.5rem; border-radius: 4px; letter-spacing: 0.05em; border: 1px solid color-mix(in oklab, var(--gold), transparent 60%); } .fb-cell-status { white-space: nowrap; } .pill-bad { background: var(--status-bad-bg); color: oklch(35% 0.15 25); } .fb-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; } .fb-actions form { margin: 0; } /* ===================================================================== TENANT BRANDING — wo die Marken-Farben in der Kunden-Sicht auftauchen ===================================================================== */ /* * Wir greifen die Tenant-Variablen ``--tenant-primary`` und * ``--tenant-accent`` (gesetzt in base.html aus den Tenant-Spalten) und * verteilen sie auf ein paar wenige Hot-Spots auf der Ticket-Seite: * * - Header-Streifen (oben, schon oben in `.tenant-head` adressiert) * - Queue-Eyebrow (Schlangenname über der Zeit-Hero) * - Primary-Button "Ich bin auf dem Weg" * - KPI-Trennlinie und KPI-Werte (sehr dezent) * * Bewusst NICHT überall — der Hero soll *ruhig* bleiben, die Marke * taucht in den richtigen Momenten auf, nicht überall. */ body.customer .when-eyebrow { color: var(--accent); /* Themes setzen --accent passend; nur falls kein Theme aktiv ist, fällt --accent über :root auf --tenant-primary zurück. */ } /* body.customer .btn-primary-big / :hover: bewusst NICHT mehr hier überschreiben — jedes Theme setzt seine eigene CTA-Farbe in themes.css. Die alte "Tenant-Primary immer" Logik hat die Theme-Hover kaputt gemacht (dunkelblauer Hover auf brass-Button). */ body.customer .kpi-value { color: var(--ink); } /* Subtile Tenant-Akzent-Border am Ticket-Card oben — sehr dezent, dient als visuelle Verbindung zum Header darüber. */ body.customer .ticket-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--tenant-primary, var(--gold)), transparent 60%) 35%, color-mix(in oklab, var(--tenant-primary, var(--gold)), transparent 60%) 65%, transparent ); pointer-events: none; } /* Kleine Touch: das Method-Label oben rechts bekommt einen Hauch der Brand-Farbe als linker Rand */ body.customer .when-method { border-color: color-mix(in oklab, var(--tenant-primary, var(--hairline-strong)), transparent 60%); } /* ===================================================================== MOBILE TICKET — Smartphone-Anpassungen Großzügige Touch-Targets, Safe-Area-Padding für Notch/Home-Indicator, Sticky CTA wenn aktiv (z.B. "Ich komme jetzt" immer in Daumenreichweite). ===================================================================== */ @media (max-width: 540px) { /* Safe-Area-Padding für iPhone notch + home-indicator */ body.customer { padding-bottom: env(safe-area-inset-bottom); padding-top: env(safe-area-inset-top); } .ticket-shell { padding-left: 16px; padding-right: 16px; padding-bottom: calc(env(safe-area-inset-bottom) + 12px); } /* Nummer-Größe etwas reduzieren — auf kleinen Bildschirmen war sie übergroß und drängte den Status-Text aus dem View */ .ticket-number { font-size: clamp(5rem, 22vw, 7rem); line-height: 0.92; } /* Größere Touch-Targets: 44px ist Apple-HIG-Minimum, 48px ist Material */ .btn, .btn.big, .btn-quiet { min-height: 48px; padding-left: 18px; padding-right: 18px; } /* Form-Felder ebenfalls 48px für Tipp-Komfort */ body.customer input[type="text"], body.customer input[type="number"], body.customer input[type="tel"], body.customer input[type="email"], body.customer textarea { min-height: 48px; font-size: 16px; /* verhindert auto-zoom in iOS Safari */ } /* Ticket-ID-Block kompakter; viel kleiner als die Hero-Zahl */ .ticket-id { padding: 12px 16px; } .ticket-id-row { flex-wrap: wrap; gap: 6px 10px; justify-content: center; } .ticket-id-num, .ticket-id-code { font-size: 1.05rem; } /* Banner / Status-Karten brauchen weniger horizontale Padding */ .banner { padding: 16px 14px; } .banner-title { font-size: 1.25rem; line-height: 1.25; } .banner-sub { font-size: 0.95rem; } /* Queue-Line: Dots etwas kleiner, damit mehr passen */ .queue-line-rail { padding: 10px 0; } .qd { width: 8px; height: 8px; } .qd.is-called { width: 12px; height: 12px; } .qd.is-you { width: 26px; height: 26px; font-size: 0.6rem; } /* On-my-way-Button als sticky bottom bar, damit er bei langem Scroll immer in Reichweite bleibt — der Hauptzweck der Ticket-Seite */ .on-my-way-box { position: sticky; bottom: 0; background: linear-gradient(180deg, transparent, var(--bg) 30%); padding: 24px 0 calc(env(safe-area-inset-bottom) + 16px); margin: 0 -16px; z-index: 5; } .on-my-way-box .btn, .on-my-way-box form button { margin-left: 16px; margin-right: 16px; } } /* Noch enger für sehr schmale Geräte (z.B. iPhone SE 1st gen) */ @media (max-width: 380px) { .ticket-number { font-size: 4.5rem; } .ticket-shell { padding-left: 12px; padding-right: 12px; } .ticket-id-row { font-size: 0.85rem; } .banner-title { font-size: 1.1rem; } } /* iOS PWA Standalone-Mode: extra Padding oben, weil Status-Bar */ @media (display-mode: standalone) { body.customer .tenant-head { padding-top: max(12px, env(safe-area-inset-top)); } } /* ===================================================================== JOIN-Seite (QR-Scan Landing) — themen-aware Wenn Kunde gerade den QR gescannt hat, sieht er hier: Kontext (wer sind wir + welche Schlange), aktueller Zustand (wieviele warten, welche Nummer er bekäme, geschätzte Wartezeit) + Formular. Die join-hero / join-context / join-steps sind design-token-basiert, passen sich also automatisch an alle Themes an. ===================================================================== */ .join-hero { text-align: center; padding: 2.5rem 1rem 1.25rem; } .join-eyebrow { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; } .join-title { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 3rem); letter-spacing: -0.025em; color: var(--ink); margin: 0 0 0.25rem; line-height: 1; } .join-desc { color: var(--ink-soft); font-size: 0.95rem; max-width: 320px; margin: 0.75rem auto 0; line-height: 1.4; } .join-context { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 1.5rem; } .join-metric { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-align: center; } .join-metric-full { grid-column: 1 / -1; } .join-metric-num { font-family: var(--font-display); font-size: 2.1rem; color: var(--ink); line-height: 1; letter-spacing: -0.03em; font-variation-settings: "opsz" 60, "wght" 500; } .join-metric-zero { color: var(--ink-dim); } .join-metric-label { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-mute); margin-top: 6px; text-transform: uppercase; font-weight: 500; } .join-steps { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 8px; } .join-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--bg-soft); border-radius: var(--radius); } .join-step-num { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: white; display: inline-flex; align-items: center; justify-content: center; font-weight: 500; font-size: 0.78rem; } .join-steps strong { color: var(--ink); font-weight: 500; } .join-form { margin-bottom: 1.5rem; } .join-form label { display: block; margin-bottom: 12px; } .join-form .btn-primary-big { width: 100%; } /* Call-Next-Form mit optionalem Counter-Input daneben */ .op-callnext-form { display: flex; gap: 8px; align-items: center; margin: 0; } .op-callnext-form input[type="text"] { min-width: 0; font-size: 0.95rem; } /* ===================================================================== CALLED-Stage — "Sie sind dran" Prominente Nummer + Counter-Wegfindung + Code ===================================================================== */ .call-stage-num { font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 20; font-size: clamp(5rem, 22vw, 7rem); line-height: 0.9; color: var(--ink); letter-spacing: -0.04em; text-align: center; margin: 1rem 0 0.5rem; } .call-stage-num-hash { color: var(--ink-dim); font-size: 0.65em; vertical-align: baseline; margin-right: -0.05em; } .call-stage-counter { background: var(--accent); color: white; text-align: center; padding: 1rem 1.25rem; border-radius: var(--radius); margin: 1rem 0; } .call-stage-counter-lab { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; margin-bottom: 0.2rem; } .call-stage-counter-val { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; font-variation-settings: "opsz" 60, "wght" 500; letter-spacing: -0.02em; margin-bottom: 0.3rem; } .call-stage-counter-loc { font-size: 0.88rem; opacity: 0.9; line-height: 1.35; } .terminal-stage { text-align: center; padding: 2.5rem 1.5rem; } .terminal-icon { display: inline-flex; color: var(--accent); margin-bottom: 0.75rem; opacity: 0.9; } .terminal-ok .terminal-icon { color: #2A9D5C; } .terminal-err .terminal-icon { color: #DE4A4A; } .terminal-muted .terminal-icon { color: var(--ink-mute); font-size: 2rem; line-height: 1; } .terminal-title { font-family: var(--font-display); font-size: 1.85rem; color: var(--ink); letter-spacing: -0.02em; margin: 0 0 0.35rem; font-variation-settings: "opsz" 60, "wght" 500; } .terminal-sub { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.45; max-width: 320px; margin: 0 auto; } .terminal-cta { display: inline-block; margin-top: 1.25rem; padding: 0.65rem 1.4rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 0.9rem; font-weight: 500; } .terminal-cta:hover { background: var(--bg-soft); }