/* ========================================================= FWH – Oberfläche Themen: data-theme (dark|light|auto) · data-shape (edge|round) data-base (graphit|nachtblau|waldgruen|glut) · data-accent (signal|orange|gelb|mint|blau|violett) ========================================================= */ @font-face { font-family: 'FWH Display'; src: url('../fonts/fwh-display-700.woff') format('woff'); font-weight: 600 900; font-display: swap; } @font-face { font-family: 'FWH Display'; src: url('../fonts/fwh-display-400.woff') format('woff'); font-weight: 300 500; font-display: swap; } @font-face { font-family: 'FWH Text'; src: url('../fonts/fwh-text-400.woff') format('woff'); font-weight: 300 500; font-display: swap; } @font-face { font-family: 'FWH Text'; src: url('../fonts/fwh-text-700.woff') format('woff'); font-weight: 600 800; font-display: swap; } :root { --f-disp: 'FWH Display', 'Red Hat Display', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-text: 'FWH Text', 'Red Hat Text', system-ui, -apple-system, 'Segoe UI', sans-serif; --ease: cubic-bezier(.2, .8, .2, 1); --ease-back: cubic-bezier(.2, 1.3, .4, 1); --side-w: 256px; --tab-h: 64px; --top-h: 60px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); /* Form: eckig (Standard) */ --sk: -16.7deg; --unsk: 16.7deg; --r: 0px; --r-sm: 0px; --rb: 0px; --cut: 14px; --cut-sm: 10px; --clip: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); --clip-sm: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm))); /* Akzent (Signalrot) */ --acc-d: #FF4D3D; --acc-l: #D42A1E; --acc-grad-a: #FFC15C; --acc-ink-d: #1A0704; } [data-accent="orange"] { --acc-d: #FF8A1F; --acc-l: #C2560A; --acc-grad-a: #FFD27A; } [data-accent="gelb"] { --acc-d: #FFC629; --acc-l: #946800; --acc-grad-a: #FFE58A; --acc-ink-d: #1A1400; } [data-accent="blau"] { --acc-d: #5AA9FF; --acc-l: #1F5FB8; --acc-grad-a: #A9D3FF; --acc-ink-d: #04142B; } [data-accent="mint"] { --acc-d: #3DDBB4; --acc-l: #0B7F66; --acc-grad-a: #A8F2DE; --acc-ink-d: #03201A; } [data-accent="violett"]{ --acc-d: #B794FF; --acc-l: #6A3FD0; --acc-grad-a: #DCCBFF; --acc-ink-d: #150A2E; } [data-shape="round"] { --sk: 0deg; --unsk: 0deg; --r: 16px; --r-sm: 10px; --rb: 999px; --cut: 0px; --cut-sm: 0px; --clip: none; --clip-sm: none; } /* Grundfarben: jede mit dunkler (d-) und heller (l-) Palette */ :root, [data-base="graphit"] { --d-bg: #0E1116; --d-surface: #161B22; --d-surface-2: #1D242D; --d-surface-3: #232B35; --d-line: #232B35; --d-line-strong: #33404D; --d-ink: #ECEFF3; --d-ink-2: #A3AEBB; --d-ink-3: #808C9B; --d-nav: #090B0F; --d-nav-line: #1D242D; --l-bg: #F3F4F6; --l-surface: #FFFFFF; --l-surface-2: #EEF0F3; --l-surface-3: #E3E7EC; --l-line: #DCE1E7; --l-line-strong: #BEC6D0; --l-ink: #12161C; --l-ink-2: #4E5967; --l-ink-3: #6B7684; --l-nav: #12161C; --l-nav-line: #232B35; } [data-base="nachtblau"] { --d-bg: #0A1120; --d-surface: #111A2C; --d-surface-2: #172338; --d-surface-3: #1E2C45; --d-line: #1E2C45; --d-line-strong: #2D3F60; --d-ink: #EAF0FA; --d-ink-2: #A6B4CC; --d-ink-3: #8090AC; --d-nav: #060B16; --d-nav-line: #16213A; --l-bg: #EEF2F8; --l-surface: #FFFFFF; --l-surface-2: #E7EDF6; --l-surface-3: #DAE2EF; --l-line: #D3DCEA; --l-line-strong: #B4C2D8; --l-ink: #0F1828; --l-ink-2: #47566F; --l-ink-3: #64738E; --l-nav: #0F1A2E; --l-nav-line: #1E2C45; } [data-base="waldgruen"] { --d-bg: #09130F; --d-surface: #101C17; --d-surface-2: #162620; --d-surface-3: #1D3029; --d-line: #1D3029; --d-line-strong: #2B4439; --d-ink: #E8F3EE; --d-ink-2: #A1B9AF; --d-ink-3: #7D978C; --d-nav: #050D0A; --d-nav-line: #14231D; --l-bg: #EEF4F1; --l-surface: #FFFFFF; --l-surface-2: #E4EEE9; --l-surface-3: #D5E3DC; --l-line: #CFDDD6; --l-line-strong: #B0C5BB; --l-ink: #0E1A15; --l-ink-2: #445A51; --l-ink-3: #62776E; --l-nav: #0D1A15; --l-nav-line: #1D3029; } [data-base="glut"] { --d-bg: #130C0B; --d-surface: #1C1312; --d-surface-2: #261A18; --d-surface-3: #30211E; --d-line: #30211E; --d-line-strong: #47312C; --d-ink: #F5EDEB; --d-ink-2: #BEA9A5; --d-ink-3: #98827E; --d-nav: #0B0605; --d-nav-line: #221614; --l-bg: #F6F1EF; --l-surface: #FFFFFF; --l-surface-2: #F0E7E4; --l-surface-3: #E6D8D4; --l-line: #E3D4CF; --l-line-strong: #CCB6B0; --l-ink: #1C1210; --l-ink-2: #5F4A46; --l-ink-3: #7B6661; --l-nav: #1C1210; --l-nav-line: #30211E; } /* Nacht (dunkel) */ :root, [data-theme="dark"] { --bg: var(--d-bg); --surface: var(--d-surface); --surface-2: var(--d-surface-2); --surface-3: var(--d-surface-3); --line: var(--d-line); --line-strong: var(--d-line-strong); --ink: var(--d-ink); --ink-2: var(--d-ink-2); --ink-3: var(--d-ink-3); --nav: var(--d-nav); --nav-ink: #ECEFF3; --nav-muted: #9AA6B4; --nav-line: var(--d-nav-line); --acc: var(--acc-d); --acc-ink: var(--acc-ink-d); --acc-text: var(--acc-d); --ok: #3DD68C; --ok-text: #3DD68C; --warn: #F2B33D; --warn-text: #F2B33D; --orange: #FF9A3D; --orange-text: #FF9A3D; --danger: #FF5A4A; --danger-text: #FF6E60; --info: #6FB2FF; --info-text: #6FB2FF; --shadow: 0 18px 40px rgba(0, 0, 0, .45); --scrim: rgba(5, 7, 10, .72); --input-bg: var(--d-bg); color-scheme: dark; } /* Tag (hell) */ [data-theme="light"] { --bg: var(--l-bg); --surface: var(--l-surface); --surface-2: var(--l-surface-2); --surface-3: var(--l-surface-3); --line: var(--l-line); --line-strong: var(--l-line-strong); --ink: var(--l-ink); --ink-2: var(--l-ink-2); --ink-3: var(--l-ink-3); --nav: var(--l-nav); --nav-ink: #ECEFF3; --nav-muted: #A3AEBB; --nav-line: var(--l-nav-line); --acc: var(--acc-l); --acc-ink: #FFFFFF; --acc-text: var(--acc-l); --ok: #14894F; --ok-text: #0F6B3D; --warn: #F2B33D; --warn-text: #8A5800; --orange: #FF9A3D; --orange-text: #A34A00; --danger: #C21E14; --danger-text: #B01B12; --info: #2563B8; --info-text: #1F4F94; --shadow: 0 18px 40px rgba(18, 22, 28, .14); --scrim: rgba(18, 22, 28, .5); --input-bg: #FFFFFF; color-scheme: light; } @media (prefers-color-scheme: light) { [data-theme="auto"] { --bg: var(--l-bg); --surface: var(--l-surface); --surface-2: var(--l-surface-2); --surface-3: var(--l-surface-3); --line: var(--l-line); --line-strong: var(--l-line-strong); --ink: var(--l-ink); --ink-2: var(--l-ink-2); --ink-3: var(--l-ink-3); --nav: var(--l-nav); --nav-ink: #ECEFF3; --nav-muted: #A3AEBB; --nav-line: var(--l-nav-line); --acc: var(--acc-l); --acc-ink: #FFFFFF; --acc-text: var(--acc-l); --ok: #14894F; --ok-text: #0F6B3D; --warn: #F2B33D; --warn-text: #8A5800; --orange: #FF9A3D; --orange-text: #A34A00; --danger: #C21E14; --danger-text: #B01B12; --info: #2563B8; --info-text: #1F4F94; --shadow: 0 18px 40px rgba(18, 22, 28, .14); --scrim: rgba(18, 22, 28, .5); --input-bg: #FFFFFF; color-scheme: light; } } /* ---------------- Grundlagen ---------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--f-text); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } h1, .ph h1, input, textarea, select, code, .mono { hyphens: manual; -webkit-hyphens: manual; } img, svg { max-width: 100%; } a { color: var(--acc-text); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } h1, h2, h3, h4 { font-family: var(--f-disp); font-weight: 800; margin: 0; line-height: 1.12; } p { margin: 0 0 .8em; } small { font-size: .85em; } hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; } code { font-family: ui-monospace, 'JetBrains Mono', monospace; font-size: .9em; background: var(--surface-2); padding: 1px 5px; } :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } svg.i { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; } .muted { color: var(--ink-2); } .dim { color: var(--ink-3); } .ok-text { color: var(--ok-text); } .warn-text { color: var(--warn-text); } .danger-text { color: var(--danger-text); } .info-text { color: var(--info-text); } .acc-text { color: var(--acc-text); } .nowrap { white-space: nowrap; } .num { font-variant-numeric: tabular-nums; } .disp { font-family: var(--f-disp); font-weight: 800; letter-spacing: .04em; } .caps { font-family: var(--f-disp); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; } /* ---------------- App-Rahmen ---------------- */ .app { min-height: 100vh; display: flex; } .side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); z-index: 30; background: var(--nav); color: var(--nav-ink); display: flex; flex-direction: column; padding: 18px 14px 14px; gap: 14px; overflow-y: auto; scrollbar-width: thin; } .side .brand { display: flex; align-items: center; gap: 12px; padding: 2px 6px 4px; color: var(--nav-ink); text-decoration: none; } .brand-word { font: 900 20px/1 var(--f-disp); letter-spacing: .16em; } .brand-sub { display: block; font: 800 9px/1 var(--f-disp); letter-spacing: .18em; color: var(--nav-muted); margin-top: 4px; text-transform: uppercase; } .side nav { display: flex; flex-direction: column; gap: 2px; } .side .nav-group { font: 800 9.5px var(--f-disp); letter-spacing: .16em; color: var(--nav-muted); padding: 12px 12px 4px; text-transform: uppercase; opacity: .8; } .nav-a { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; color: var(--nav-muted); text-decoration: none !important; font: 800 11.5px var(--f-disp); letter-spacing: .1em; text-transform: uppercase; border-radius: var(--r-sm); transition: background-color .2s, color .2s; } .nav-a:hover { background: rgba(255, 255, 255, .06); color: var(--nav-ink); } .nav-a.on { background: rgba(255, 255, 255, .08); color: #fff; } .nav-a.on::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; background: var(--acc-d); transform: skewX(var(--sk)); border-radius: var(--rb); animation: navbar .45s var(--ease) both; } @keyframes navbar { from { transform: skewX(var(--sk)) scaleY(0); } } .nav-a .badge { margin-left: auto; } .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .side-user { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-sm); color: var(--nav-ink); text-decoration: none !important; } .side-user:hover { background: rgba(255, 255, 255, .06); } .side-user small { display: block; color: var(--nav-muted); font-size: 11.5px; line-height: 1.3; } .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; } .top { position: sticky; top: 0; z-index: 25; height: calc(var(--top-h) + var(--safe-t)); padding: var(--safe-t) 12px 0 14px; display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s; } .top.scrolled { border-bottom-color: var(--line); } .top .brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none !important; } .top .brand-word { font-size: 17px; } .top-spacer { flex: 1; } .content { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 8px 16px calc(var(--tab-h) + 28px + var(--safe-b)); } .content.wide { max-width: none; } .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--nav); border-top: 1px solid var(--nav-line); } .tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--nav-muted); text-decoration: none !important; font: 800 8.5px var(--f-disp); letter-spacing: .08em; text-transform: uppercase; } .tab svg.i { width: 22px; height: 22px; transition: transform .25s var(--ease-back); } .tab:active svg.i { transform: scale(.86); } .tab.on { color: var(--acc-d); } .tab.on::before { content: ''; position: absolute; top: 0; left: 50%; width: 30px; margin-left: -15px; height: 3px; background: var(--acc-d); transform: skewX(var(--sk)); border-radius: var(--rb); animation: tabbar .5s var(--ease) both; } @keyframes tabbar { from { transform: skewX(var(--sk)) scaleX(0); } } .tab .badge { position: absolute; top: 8px; left: calc(50% + 6px); } @media (min-width: 1024px) { .main-col { margin-left: var(--side-w); } .tabbar, .top .brand, .top .m-only { display: none; } .m-only { display: none !important; } .content { padding: 18px clamp(20px, 3vw, 40px) 48px; } .top { padding-left: clamp(20px, 3vw, 40px); padding-right: clamp(16px, 2.4vw, 32px); } } @media (max-width: 1023.98px) { .side { display: none; } .d-only { display: none !important; } } /* ---------------- Bausteine ---------------- */ .badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--acc-d); color: var(--acc-ink-d); font: 800 10px/1 var(--f-disp); font-variant-numeric: tabular-nums; } .badge.soft { background: var(--surface-3); color: var(--ink); } .side .badge.soft { background: #33404D; color: #ECEFF3; } .badge.pop { animation: pop .45s var(--ease-back); } .btn { --sc: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; font: 800 12px var(--f-disp); letter-spacing: .1em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; transform: skewX(var(--sk)) scale(var(--sc)); border-radius: var(--rb); transition: background-color .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s, filter .2s; -webkit-user-select: none; user-select: none; } .btn:hover { border-color: var(--acc); } .btn:active { --sc: .95; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; } .btn-acc { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); } .btn-acc:hover { filter: brightness(1.08); border-color: var(--acc); } .btn-ink { background: var(--ink); border-color: var(--ink); color: var(--bg); } .btn-ink:hover { border-color: var(--ink); filter: brightness(1.1); } .btn-ghost { background: transparent; border-color: transparent; color: var(--acc-text); } .btn-ghost:hover { background: var(--surface-2); border-color: transparent; } .btn-danger { background: transparent; border-color: var(--danger); color: var(--danger-text); } .btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: var(--danger); } .btn-sm { min-height: 34px; padding: 0 12px; font-size: 10.5px; } .btn-lg { min-height: 52px; padding: 0 24px; font-size: 13px; } .btn-block { width: 100%; } .btn-icon { width: 44px; padding: 0; } .btn-icon.btn-sm { width: 34px; } .btn-round { width: 44px; height: 44px; padding: 0; border-radius: 50%; transform: none; } .icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: var(--r-sm); transition: background-color .2s; } .icon-btn:hover { background: var(--surface-2); } .icon-btn .badge { position: absolute; top: 6px; right: 4px; } .shine { position: relative; overflow: hidden; } .shine::after { content: ''; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent); animation: shine 3.8s 1.2s ease-in-out infinite; pointer-events: none; } @keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .btn-row.end { justify-content: flex-end; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; flex: none; font: 800 9.5px var(--f-disp); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transform: skewX(var(--sk)); border-radius: var(--rb); background: var(--surface-2); color: var(--ink-2); } .chip-lg { padding: 6px 11px; font-size: 10.5px; } .chip .dot { width: 6px; height: 6px; } .st-ready { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok-text); } .st-limited { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn-text); } .st-out { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger-text); } .prio-1 { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info-text); } .prio-2 { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn-text); } .prio-3 { background: color-mix(in srgb, var(--orange) 20%, transparent); color: var(--orange-text); } .prio-4 { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger-text); } .prio-5 { background: var(--danger); color: #fff; animation: crit 1.4s ease-in-out infinite; } @keyframes crit { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } } .chip-acc { background: var(--acc); color: var(--acc-ink); } .chip-ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok-text); } .chip-info { background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info-text); } .chip-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn-text); } .dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .dot.ping::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; animation: ping 1.8s ease-out infinite; } @keyframes ping { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } } .card { background: var(--surface); border: 1px solid var(--line); padding: 16px; clip-path: var(--clip); border-radius: var(--r); position: relative; } .card.flat { clip-path: none; } .card.pad-lg { padding: 22px; } .card.tight { padding: 12px; } .card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .card-head h2, .card-head h3 { flex: 1; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; } a.card { color: inherit; text-decoration: none; display: block; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; } a.card:hover { transform: translateY(-2px); border-color: var(--line-strong); } .sec { display: flex; align-items: center; gap: 9px; margin: 22px 0 10px; font: 800 11.5px var(--f-disp); letter-spacing: .14em; text-transform: uppercase; } .sec::before { content: ''; width: 4px; height: 14px; background: var(--acc); transform: skewX(var(--sk)); border-radius: var(--rb); flex: none; } .sec .cnt { color: var(--ink-3); font-size: 10.5px; } .sec .more { margin-left: auto; font-size: 10.5px; letter-spacing: .12em; } .sec:first-child { margin-top: 4px; } .ph { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; margin: 6px 0 18px; } .ph-title { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ph h1 { display: flex; align-items: center; gap: 12px; font-size: clamp(24px, 3.4vw, 32px); letter-spacing: .03em; text-transform: uppercase; } .ph h1::before { content: ''; width: 7px; height: .92em; background: var(--acc); transform: skewX(var(--sk)); border-radius: var(--rb); flex: none; } .ph .sub { color: var(--ink-2); font-size: 14px; padding-left: 19px; margin: 0; } .ph-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .back-link { display: inline-flex; align-items: center; gap: 4px; font: 800 11px var(--f-disp); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px; } .grid { display: grid; gap: 12px; } .g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } .cols { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; } .col-main { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .col-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .stack { display: flex; flex-direction: column; gap: 12px; } .row { display: flex; align-items: center; gap: 10px; } .row.wrap { flex-wrap: wrap; } .spacer { flex: 1; } .list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none !important; transition: background-color .2s; } .li:last-child { border-bottom: 0; } a.li:hover, button.li:hover { background: var(--surface-2); } button.li { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; font: inherit; cursor: pointer; } .li-ico { width: 38px; height: 38px; display: grid; place-items: center; background: var(--surface-2); color: var(--acc-text); flex: none; border-radius: var(--r-sm); } .li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .li-main b { font-weight: 600; font-size: 14px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .li-main small { color: var(--ink-2); font-size: 12px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .li-main.wrap b, .li-main.wrap small { -webkit-line-clamp: 4; } .li .chev { color: var(--ink-3); } .li-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none !important; } .li[hidden], [data-q-group][hidden] { display: none; } .search-field { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; background: var(--input-bg); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); color: var(--ink-2); transition: border-color .2s, box-shadow .2s; } .search-field:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent); } .search-field input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 15px var(--f-text); outline: none; height: 100%; } .li.hl { box-shadow: inset 3px 0 0 var(--acc); } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 8px; } .tiles.t3 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } @media (min-width: 560px) { .tiles.ov { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .tile { background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; border-radius: var(--r); color: inherit; text-decoration: none !important; transition: transform .2s var(--ease), border-color .2s; } a.tile:hover { transform: translateY(-2px); border-color: var(--line-strong); } .tile small { font: 800 9px var(--f-disp); letter-spacing: .14em; color: var(--ink-2); text-transform: uppercase; } .tile small { line-height: 1.2; min-height: 2.4em; } .tile b { font: 800 30px/1.05 var(--f-disp); font-variant-numeric: tabular-nums; } .tile .sub { font: 700 11px var(--f-disp); letter-spacing: .03em; color: var(--ink-2); } .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 34px 18px; border: 1.5px dashed var(--line-strong); color: var(--ink-2); border-radius: var(--r); } .empty svg.i { width: 34px; height: 34px; color: var(--ink-3); } .empty b { color: var(--ink); font-family: var(--f-disp); letter-spacing: .04em; } .note { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; background: color-mix(in srgb, var(--info) 12%, transparent); border-radius: var(--r-sm); font-size: 13.5px; } .note svg.i { color: var(--info-text); margin-top: 1px; } .note.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); } .note.warn svg.i { color: var(--warn-text); } .note.danger { background: color-mix(in srgb, var(--danger) 14%, transparent); } .note.danger svg.i { color: var(--danger-text); } .note.ok { background: color-mix(in srgb, var(--ok) 13%, transparent); } .note.ok svg.i { color: var(--ok-text); } .note p:last-child { margin: 0; } .avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--ink); font: 800 13px var(--f-disp); transform: skewX(var(--sk)); border-radius: var(--rb); } .side .avatar { background: #33404D; color: #ECEFF3; } .avatar span { transform: skewX(var(--unsk)); } .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; } .kv > div { background: var(--surface-2); padding: 8px 11px; display: flex; flex-direction: column; gap: 1px; border-radius: var(--r-sm); min-width: 0; } .kv small { font: 800 8.5px var(--f-disp); letter-spacing: .12em; color: var(--ink-2); text-transform: uppercase; } .kv b { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; } .progress { height: 6px; background: var(--surface-3); overflow: hidden; border-radius: var(--rb); transform: skewX(var(--sk)); } .progress > i { display: block; height: 100%; background: var(--acc); transform-origin: left; animation: grow 1s var(--ease) both; border-radius: var(--rb); } @keyframes grow { from { transform: scaleX(0); } } .plate { display: inline-flex; align-items: stretch; flex: none; background: #fff; color: #111; border: 1.5px solid #111; border-radius: 3px; font: 700 12px/20px var(--f-disp); letter-spacing: .05em; overflow: hidden; padding-right: 6px; white-space: nowrap; } .plate i { font: 700 8px var(--f-text); font-style: normal; background: #1D4FA3; color: #fff; padding: 0 3px 1px; margin-right: 6px; display: flex; align-items: flex-end; } /* ---------------- Formulare ---------------- */ .form { display: flex; flex-direction: column; gap: 14px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; } .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .field > label, .label { font: 800 9.5px var(--f-disp); letter-spacing: .13em; color: var(--ink-2); text-transform: uppercase; } .field > label.check, .field > label.switch { font: 400 14px/1.4 var(--f-text); letter-spacing: 0; text-transform: none; color: var(--ink); } .field > label.check b, .field > label.switch b { font-weight: 600; } .field .hint { font-size: 12px; color: var(--ink-3); } .input, .field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), .field select, .field textarea { width: 100%; min-height: 46px; padding: 10px 12px; background: var(--input-bg); color: var(--ink); border: 2px solid var(--line); border-radius: var(--r-sm); font: 400 15px/1.4 var(--f-text); transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; } .field textarea { min-height: 96px; resize: vertical; } select.input, .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23808C9B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } .input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); } .field input[type=file] { padding: 10px; background: var(--input-bg); border: 2px dashed var(--line-strong); border-radius: var(--r-sm); color: var(--ink-2); width: 100%; } .field.error input, .field.error select, .field.error textarea { border-color: var(--danger); } .field .err { color: var(--danger-text); font-size: 12.5px; } .check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 1.4; padding: 3px 0; } .check input { width: 20px; height: 20px; margin: 0; accent-color: var(--acc); flex: none; } .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 4px 16px; } .switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; } .switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .switch .tr { width: 46px; height: 26px; background: var(--surface-3); border-radius: 13px; position: relative; flex: none; transition: background-color .25s; } .switch .tr::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease-back); box-shadow: 0 2px 6px rgba(0,0,0,.3); } .switch input:checked + .tr { background: var(--acc); } .switch input:checked + .tr::after { transform: translateX(20px); } .switch input:focus-visible + .tr { outline: 2px solid var(--acc); outline-offset: 2px; } .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 84px), 1fr)); gap: 6px; padding-inline: 7px; } [data-shape="round"] .seg { padding-inline: 0; } .seg label { position: relative; cursor: pointer; } .seg input { position: absolute; opacity: 0; } .seg span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 6px 10px; text-align: center; background: var(--surface-2); color: var(--ink-2); font: 800 10.5px var(--f-disp); letter-spacing: .08em; text-transform: uppercase; transform: skewX(var(--sk)); border-radius: var(--rb); transition: background-color .2s, color .2s; } .seg input:checked + span { background: var(--ink); color: var(--bg); } .seg input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; } @media (max-width: 560px) { .seg-wrap { grid-auto-flow: row; } } .doc-ico { position: relative; } .doc-ico i { position: absolute; bottom: -3px; right: -5px; font: 900 7.5px/1 var(--f-disp); letter-spacing: .04em; font-style: normal; background: var(--ink); color: var(--bg); padding: 2px 3px; border-radius: 2px; } .input-group { display: flex; gap: 8px; } .input-group > :first-child { flex: 1; min-width: 0; } /* Prioritätswahl */ .prio-pick { display: flex; flex-direction: column; gap: 6px; } .prio-pick label { position: relative; display: block; cursor: pointer; } .prio-pick input { position: absolute; opacity: 0; } .prio-pick .pp { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px 0 0; background: var(--input-bg); border: 1.5px solid var(--line); border-radius: var(--r-sm); overflow: hidden; transition: background-color .25s, border-color .25s, transform .15s; } .prio-pick .pp::before { content: ''; align-self: stretch; width: 6px; background: var(--pc); flex: none; } .prio-pick .pp b { font: 800 11px var(--f-disp); letter-spacing: .08em; text-transform: uppercase; color: var(--pc); width: 236px; flex: none; } .prio-pick .pp small { flex: 1; color: var(--ink-2); font-size: 12.5px; } .prio-pick .pp i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pc); display: grid; place-items: center; flex: none; } .prio-pick .pp i::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pc); transform: scale(0); transition: transform .3s var(--ease-back); } .prio-pick input:checked + .pp { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 13%, var(--input-bg)); } .prio-pick input:checked + .pp i::after { transform: scale(1); } .prio-pick input:focus-visible + .pp { outline: 2px solid var(--acc); outline-offset: 2px; } .prio-pick label:active .pp { transform: scale(.985); } @media (max-width: 520px) { .prio-pick .pp b { min-width: 0; flex: 1; } .prio-pick .pp small { display: none; } } /* Tabellen */ .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); } .table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .table th { text-align: left; padding: 10px 14px; font: 800 9.5px var(--f-disp); letter-spacing: .12em; color: var(--ink-2); text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; } .table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } .table tr:last-child td { border-bottom: 0; } .table tbody tr { transition: background-color .2s; } .table tbody tr:hover { background: var(--surface-2); } .table a.rowlink { color: inherit; font-weight: 600; } /* Tabs */ .tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; padding-bottom: 2px; } .tabs::-webkit-scrollbar { display: none; } .tabs a, .tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); font: 800 10.5px var(--f-disp); letter-spacing: .1em; text-transform: uppercase; text-decoration: none !important; transform: skewX(var(--sk)); border-radius: var(--rb); cursor: pointer; transition: all .2s; } .tabs a:hover, .tabs button:hover { color: var(--ink); border-color: var(--line-strong); } .tabs .on { background: var(--ink); border-color: var(--ink); color: var(--bg); } .tabs .badge { transform: skewX(var(--unsk)); } /* Meldungen */ .flashes { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; } .flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); font-size: 14px; animation: drop .45s var(--ease) both; } .flash.ok { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); } .flash.ok svg.i { color: var(--ok-text); } .flash.error { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); } .flash.error svg.i { color: var(--danger-text); } .flash.info { background: color-mix(in srgb, var(--info) 14%, var(--surface)); } .flash.info svg.i { color: var(--info-text); } @keyframes drop { from { opacity: 0; transform: translateY(-10px); } } #toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + 18px + var(--safe-b)); transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 420px); } @media (min-width: 1024px) { #toast { bottom: 28px; left: calc(50% + var(--side-w) / 2); } } .toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--ink); color: var(--bg); font: 800 11.5px var(--f-disp); letter-spacing: .08em; text-transform: uppercase; box-shadow: var(--shadow); border-radius: var(--r-sm); border-left: 4px solid var(--acc); animation: toastin .35s var(--ease) both; pointer-events: auto; } .toast.out { animation: toastout .3s ease-in both; } @keyframes toastin { from { opacity: 0; transform: translateY(14px) scale(.96); } } @keyframes toastout { to { opacity: 0; transform: translateY(10px); } } /* Bottom-Sheet / Dialog */ .sheet-wrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; } .sheet-wrap .scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade .3s both; } .sheet { position: relative; width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; background: var(--surface); border-top: 1px solid var(--line-strong); padding: 10px 18px calc(20px + var(--safe-b)); animation: sheetup .45s var(--ease) both; border-radius: var(--r) var(--r) 0 0; } .sheet::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 0 auto 10px; } .sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .sheet-head h2 { flex: 1; font-size: 19px; letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; } .sheet-head h2::before { content: ''; width: 5px; height: 20px; background: var(--acc); transform: skewX(var(--sk)); border-radius: var(--rb); } .sheet-wrap.closing .scrim { animation: fade .25s reverse both; } .sheet-wrap.closing .sheet { animation: sheetdown .28s ease-in both; } @media (min-width: 720px) { .sheet-wrap { align-items: center; padding: 24px; } .sheet { border: 1px solid var(--line-strong); clip-path: var(--clip); border-radius: var(--r); padding: 20px 22px 22px; animation: dlgin .4s var(--ease) both; box-shadow: var(--shadow); } .sheet::before { display: none; } .sheet-wrap.closing .sheet { animation: dlgout .22s ease-in both; } } @keyframes sheetup { from { transform: translateY(100%); } } @keyframes sheetdown { to { transform: translateY(100%); } } @keyframes dlgin { from { opacity: 0; transform: translateY(18px) scale(.97); } } @keyframes dlgout { to { opacity: 0; transform: translateY(10px) scale(.98); } } @keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: scale(.6); } } /* Menü (Dropdown) */ .menu-wrap { position: relative; } .menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; z-index: 50; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); padding: 6px; border-radius: var(--r-sm); animation: menuin .22s var(--ease) both; } .menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; background: transparent; color: var(--ink); font: 600 13.5px var(--f-text); text-align: left; cursor: pointer; text-decoration: none !important; border-radius: var(--r-sm); } .menu a:hover, .menu button:hover { background: var(--surface-2); } .menu .on { color: var(--acc-text); } .menu hr { margin: 6px 0; } .menu .menu-label { font: 800 9px var(--f-disp); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 4px; } @keyframes menuin { from { opacity: 0; transform: translateY(-6px); } } .scope-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); font: 800 11px var(--f-disp); letter-spacing: .1em; text-transform: uppercase; transform: skewX(var(--sk)); border-radius: var(--rb); cursor: pointer; max-width: 46vw; } .scope-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side .scope-btn { width: 100%; height: auto; min-height: 50px; padding: 8px 12px; border-color: #33404D; color: #ECEFF3; transform: none; text-align: left; justify-content: space-between; border-radius: var(--r-sm); max-width: none; } .side .scope-btn small { display: block; font: 400 11.5px var(--f-text); letter-spacing: 0; text-transform: none; color: var(--nav-muted); } /* ---------------- Seiteneinstieg (Animation) ---------------- */ .rise > * { animation: rise .6s var(--ease) both; } .rise > *:nth-child(1) { animation-delay: .02s; } .rise > *:nth-child(2) { animation-delay: .07s; } .rise > *:nth-child(3) { animation-delay: .12s; } .rise > *:nth-child(4) { animation-delay: .17s; } .rise > *:nth-child(5) { animation-delay: .22s; } .rise > *:nth-child(6) { animation-delay: .27s; } .rise > *:nth-child(7) { animation-delay: .32s; } .rise > *:nth-child(8) { animation-delay: .37s; } .rise > *:nth-child(n+9) { animation-delay: .42s; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } } .stagger > * { animation: rise .5s var(--ease) both; } .stagger > *:nth-child(2) { animation-delay: .04s; } .stagger > *:nth-child(3) { animation-delay: .08s; } .stagger > *:nth-child(4) { animation-delay: .12s; } .stagger > *:nth-child(5) { animation-delay: .16s; } .stagger > *:nth-child(6) { animation-delay: .2s; } .stagger > *:nth-child(7) { animation-delay: .24s; } .stagger > *:nth-child(n+8) { animation-delay: .28s; } /* ---------------- Logo ---------------- */ .logo .lg-ring { transform-origin: 256px 256px; } .logo.anim .lg-ring { animation: lgturn 6s cubic-bezier(.5, 0, .2, 1) infinite; } .logo.anim .lg-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flick 2.4s ease-in-out infinite; } @keyframes lgturn { 0%, 60% { transform: rotate(0); } 72%, 86% { transform: rotate(-30deg); } 100% { transform: rotate(0); } } @keyframes flick { 0%, 100% { transform: scale(1, 1); } 35% { transform: scale(.95, 1.05); } 70% { transform: scale(1.03, .97); } } [data-shape="round"] .logo .lg-edge { display: none; } [data-shape="edge"] .logo .lg-round, :root:not([data-shape]) .logo .lg-round { display: none; } /* ---------------- Start ---------------- */ .hello { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 16px; } .hello h1 { display: flex; align-items: center; gap: 11px; font-size: clamp(25px, 3.6vw, 34px); letter-spacing: .03em; text-transform: uppercase; } .hello h1::before { content: ''; width: 7px; height: .9em; background: var(--acc); transform: skewX(var(--sk)); border-radius: var(--rb); } .hello p { margin: 0; color: var(--ink-2); padding-left: 18px; } .next-duty { display: flex; gap: 14px; align-items: flex-start; } .next-duty .nd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .nd-when { font: 800 clamp(26px, 4vw, 34px)/1.05 var(--f-disp); font-variant-numeric: tabular-nums; } .nd-topic { font-weight: 600; font-size: 16px; } .ring { position: relative; width: 64px; height: 64px; flex: none; } .ring svg { transform: rotate(-90deg); } .ring .rg-bg { stroke: var(--surface-3); } .ring .rg-fg { stroke: var(--acc); stroke-linecap: round; animation: ringdraw 1.4s .3s var(--ease) both; } @keyframes ringdraw { from { stroke-dashoffset: 163.4; } } .ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ring b { font: 800 20px/1 var(--f-disp); } .ring small { font: 800 7.5px var(--f-disp); letter-spacing: .12em; color: var(--ink-2); } .status-banner { display: flex; flex-direction: column; gap: 10px; padding: 13px 15px; border: 1px solid; border-radius: var(--r); } .status-banner.ready { background: color-mix(in srgb, var(--ok) 8%, transparent); border-color: color-mix(in srgb, var(--ok) 38%, transparent); } .status-banner.limited { background: color-mix(in srgb, var(--warn) 9%, transparent); border-color: color-mix(in srgb, var(--warn) 42%, transparent); } .status-banner.out { background: color-mix(in srgb, var(--danger) 9%, transparent); border-color: color-mix(in srgb, var(--danger) 42%, transparent); } .status-banner .sb-head { display: flex; align-items: center; gap: 10px; font: 800 13px var(--f-disp); letter-spacing: .08em; text-transform: uppercase; } .status-banner.ready .sb-head { color: var(--ok-text); } .status-banner.limited .sb-head { color: var(--warn-text); } .status-banner.out .sb-head { color: var(--danger-text); } .veh-chips { display: flex; flex-wrap: wrap; gap: 6px; } .veh-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: var(--surface); color: var(--ink); font: 800 10.5px var(--f-disp); letter-spacing: .06em; transform: skewX(var(--sk)); border-radius: var(--rb); text-decoration: none !important; transition: transform .15s; } .veh-chip:hover { transform: skewX(var(--sk)) translateY(-1px); } .veh-chip .dot { width: 7px; height: 7px; } .veh-chip.st-ready .dot { color: var(--ok); } .veh-chip.st-limited .dot { color: var(--warn); } .veh-chip.st-out .dot { color: var(--danger); } .quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @media (min-width: 720px) { .quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .qa { min-height: 70px; display: flex; align-items: center; gap: 11px; padding: 0 15px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none !important; font: 800 12px var(--f-disp); letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r); transition: transform .2s var(--ease), border-color .2s, background-color .2s; } .qa svg.i { width: 23px; height: 23px; color: var(--acc-text); } .qa:hover { transform: translateY(-2px); border-color: var(--line-strong); } .qa:active { transform: scale(.97); } .qa.acc { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); } .qa.acc svg.i { color: currentColor; } .news-item { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; background: color-mix(in srgb, var(--info) 10%, var(--surface)); border-radius: var(--r-sm); } .news-item.important { background: color-mix(in srgb, var(--acc) 12%, var(--surface)); } .news-item .ni-k { font: 800 9.5px var(--f-disp); letter-spacing: .12em; color: var(--info-text); text-transform: uppercase; } .news-item.important .ni-k { color: var(--acc-text); } .news-item p { margin: 2px 0 0; font-size: 14px; white-space: pre-line; } .ow-card h3 { font-size: 16px; letter-spacing: .06em; text-transform: uppercase; } .ow-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 12px; } .ow-metrics small { display: block; font: 800 8.5px var(--f-disp); letter-spacing: .12em; color: var(--ink-2); text-transform: uppercase; } .ow-metrics b { font: 800 19px var(--f-disp); } /* ---------------- Kalender ---------------- */ .cal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .cal-head h2 { font-size: 20px; letter-spacing: .05em; text-transform: uppercase; min-width: 170px; } .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .cal-dow { background: var(--surface-2); padding: 7px 4px; text-align: center; font: 800 9.5px var(--f-disp); letter-spacing: .12em; color: var(--ink-2); } .cal-day { background: var(--surface); min-height: 96px; padding: 5px; display: flex; flex-direction: column; gap: 3px; min-width: 0; position: relative; } .cal-day.other { background: color-mix(in srgb, var(--surface) 55%, var(--bg)); } .cal-day.other .cal-n { color: var(--ink-3); } .cal-day.weekend { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); } .cal-day.today .cal-n { background: var(--acc); color: var(--acc-ink); } .cal-n { align-self: flex-start; min-width: 24px; height: 24px; display: grid; place-items: center; padding: 0 5px; font: 800 12px var(--f-disp); transform: skewX(var(--sk)); border-radius: var(--rb); } .cal-hol { font-size: 9.5px; color: var(--danger-text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-ev { display: block; padding: 2px 5px; font-size: 11px; line-height: 1.3; color: var(--ink); background: color-mix(in srgb, var(--ec) 18%, transparent); border-left: 3px solid var(--ec); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none !important; border-radius: 0 var(--r-sm) var(--r-sm) 0; transition: background-color .2s; } .cal-ev:hover { background: color-mix(in srgb, var(--ec) 30%, transparent); } .cal-ev b { font-weight: 700; margin-right: 3px; } @media (max-width: 719.98px) { .cal-day { min-height: 54px; padding: 3px; } .cal-ev { font-size: 0; height: 6px; padding: 0; border-left-width: 0; background: var(--ec); border-radius: 3px; } .cal-ev b { display: none; } .cal-hol { display: none; } .cal-day.hol .cal-n { color: var(--danger-text); } } .ev-row { display: flex; gap: 14px; align-items: stretch; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none !important; border-radius: var(--r); transition: transform .2s var(--ease), border-color .2s; } .ev-row:hover { transform: translateX(3px); border-color: var(--line-strong); } .ev-date { width: 54px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--surface-2); padding: 6px 0; transform: skewX(var(--sk)); border-radius: var(--r-sm); } .ev-date > * { transform: skewX(var(--unsk)); } .ev-date b { font: 800 21px/1 var(--f-disp); } .ev-date small { font: 800 9px var(--f-disp); letter-spacing: .12em; color: var(--ink-2); text-transform: uppercase; } .ev-bar { width: 4px; background: var(--ec); flex: none; border-radius: var(--rb); } .ev-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; } .ev-main b { font-weight: 600; } .ev-main small { color: var(--ink-2); font-size: 12.5px; } .year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; } .mini-month { background: var(--surface); border: 1px solid var(--line); padding: 10px; border-radius: var(--r); } .mini-month h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; } .mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 11px; } .mini-grid span { padding: 3px 0; border-radius: 3px; color: var(--ink-2); } .mini-grid .h { font: 800 8.5px var(--f-disp); color: var(--ink-3); } .mini-grid .has { background: var(--acc); color: var(--acc-ink); font-weight: 700; } .mini-grid .hol { color: var(--danger-text); font-weight: 700; } /* ---------------- Fahrzeuge ---------------- */ .veh-card { display: flex; flex-direction: column; gap: 10px; } .veh-card .vc-svg { margin: -2px -4px 0; } .veh-card h3 { font-size: 19px; letter-spacing: .04em; } .vehicle-stage { position: relative; background: linear-gradient(180deg, var(--surface) 62%, var(--surface-2)); border: 1px solid var(--line); padding: 12px 14px 10px; clip-path: var(--clip); border-radius: var(--r); overflow: hidden; } .vehicle-stage .vs-toggle { justify-content: flex-end; margin: 0 0 8px !important; } .vehicle-stage .vs-svg { max-width: 760px; margin: 0 auto; } .vehicle-svg { display: block; width: 100%; height: auto; overflow: visible; animation: vfade .6s var(--ease) both; } @keyframes vfade { from { opacity: 0; transform: translateY(6px); } } .vehicle-svg .v-comp { cursor: pointer; } .vehicle-svg .v-comp .shutter { transition: transform .5s var(--ease); transform-box: fill-box; transform-origin: 50% 0; } .vehicle-svg .v-comp:hover .frame { stroke: var(--acc); stroke-width: 2; } .vehicle-svg .v-comp:focus-visible { outline: none; } .vehicle-svg .v-comp:focus-visible .frame, .vehicle-svg .v-comp.sel .frame { stroke: var(--acc); stroke-width: 3; } .vehicle-svg .v-comp.sel .shutter { transform: scaleY(.14); } .vehicle-svg .v-inside { opacity: 0; transition: opacity .35s .1s; } .vehicle-svg .v-comp.sel .v-inside { opacity: 1; } .vehicle-svg .v-crew .frame, .vehicle-svg .v-roof .frame { transition: stroke .2s; } .vehicle-svg .v-roof:hover .frame, .vehicle-svg .v-roof.sel .frame { fill: var(--acc); stroke: var(--acc); } .vehicle-svg.status-out { filter: saturate(.55); } .comp-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .comp-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-bottom: 1px solid var(--line); cursor: pointer; background: transparent; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; color: inherit; font: inherit; transition: background-color .2s; } .comp-row:hover { background: var(--surface-2); } .comp-row.open { background: color-mix(in srgb, var(--acc) 9%, var(--surface)); box-shadow: inset 3px 0 0 var(--acc); } .comp-row .code { font: 800 12px var(--f-disp); color: var(--ink-2); width: 34px; flex: none; } .comp-row.open .code { color: var(--acc-text); } .comp-row b { flex: 1; font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comp-row .chev { color: var(--ink-3); transition: transform .3s var(--ease); } .comp-row.open .chev { transform: rotate(90deg); color: var(--acc-text); } .comp-items { display: none; background: var(--bg); border-bottom: 1px solid var(--line); padding: 4px 0 6px; } .comp-items.open { display: block; } .comp-items .ci { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 14px 0 58px; font-size: 13.5px; color: inherit; text-decoration: none !important; animation: slidein .4s var(--ease) both; } .comp-items .ci:hover { background: var(--surface-2); } .comp-items .ci span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comp-items .ci.bad { background: color-mix(in srgb, var(--warn) 10%, transparent); } .comp-items .ci-actions { display: flex; gap: 8px; padding: 8px 14px 4px 58px; flex-wrap: wrap; } @keyframes slidein { from { opacity: 0; transform: translateX(14px); } } .config-preview { position: sticky; top: calc(var(--top-h) + 10px); } /* ---------------- Tickets ---------------- */ .tk-row { display: flex; gap: 12px; align-items: center; } .tk-no { font: 800 11px var(--f-disp); color: var(--ink-3); flex: none; min-width: 26px; font-variant-numeric: tabular-nums; } .tk-chip { display: flex; margin-top: 5px; } .timeline { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 22px; } .timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); } .tl-item { position: relative; display: flex; flex-direction: column; gap: 3px; animation: rise .5s var(--ease) both; } .tl-item::before { content: ''; position: absolute; left: -21px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); } .tl-item.status::before { border-color: var(--acc); background: var(--acc); } .tl-item small { color: var(--ink-3); font-size: 12px; } .tl-item .tl-body { background: var(--surface-2); padding: 9px 12px; border-radius: var(--r-sm); font-size: 14px; white-space: pre-line; } .steps-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .steps-bar span { padding: 7px 2px; text-align: center; font: 800 8.5px var(--f-disp); letter-spacing: .06em; background: var(--surface-2); color: var(--ink-3); transform: skewX(var(--sk)); border-radius: var(--rb); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .steps-bar .past { color: var(--ink); } .steps-bar .cur { background: var(--acc); color: var(--acc-ink); } .crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .crumbs .chip { background: var(--surface-2); color: var(--ink); font-size: 10.5px; padding: 6px 10px; } .crumbs .sep { color: var(--ink-3); } .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .photo-grid a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); } .photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); } .photo-grid a:hover img { transform: scale(1.05); } .drop { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px dashed var(--line-strong); border-radius: var(--r-sm); cursor: pointer; color: var(--ink-2); transition: border-color .2s, background-color .2s; } .drop:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 6%, transparent); } .drop input { position: absolute; opacity: 0; width: 1px; height: 1px; } .thumbs { display: flex; gap: 6px; flex-wrap: wrap; } .thumbs img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); animation: pop .35s var(--ease-back) both; } .route-box { background: var(--bg); border: 1px solid var(--line); padding: 10px 12px; border-radius: var(--r-sm); display: flex; flex-direction: column; gap: 4px; transition: box-shadow .3s; } .route-box.alarm { animation: alarm 1.2s ease-in-out infinite; } @keyframes alarm { 0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 50%, transparent); } 50% { box-shadow: inset 0 0 0 1px var(--danger), 0 0 16px color-mix(in srgb, var(--danger) 35%, transparent); } } .success-burst { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 30px 10px; } .ok-badge { width: 96px; height: 96px; display: grid; place-items: center; background: var(--ok); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); animation: okpop .6s var(--ease-back) both; } [data-shape="round"] .ok-badge { clip-path: circle(50%); } .ok-badge svg { color: #06231A; } .ok-badge path { stroke-dasharray: 30; animation: draw .45s .35s ease-out both; } @keyframes okpop { from { opacity: 0; transform: scale(.4) rotate(-20deg); } } @keyframes draw { from { stroke-dashoffset: 30; } } /* ---------------- Karte ---------------- */ .map-page .content { padding: 0; max-width: none; } .map-shell { position: relative; height: calc(100vh - var(--top-h) - var(--tab-h) - var(--safe-b) - var(--safe-t)); min-height: 420px; overflow: hidden; background: #11161C; } @media (min-width: 1024px) { .map-shell { height: calc(100vh - var(--top-h)); } } .map-view { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; background: #cfd5dc; } [data-theme="dark"] .map-view .map-tiles { filter: brightness(.72) contrast(1.08) saturate(.7) hue-rotate(185deg) invert(.92); } @media (prefers-color-scheme: dark) { [data-theme="auto"] .map-view .map-tiles { filter: brightness(.72) contrast(1.08) saturate(.7) hue-rotate(185deg) invert(.92); } } .map-tiles img { max-width: none; max-height: none; } .map-view.dragging { cursor: grabbing; } .map-tiles, .map-markers { position: absolute; left: 0; top: 0; will-change: transform; } .map-tiles img { position: absolute; width: 256px; height: 256px; user-select: none; -webkit-user-drag: none; animation: fade .3s both; } .map-ui { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 6; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .map-ui > * { pointer-events: auto; } .map-search { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; background: var(--surface); border: 1.5px solid var(--line-strong); box-shadow: var(--shadow); transform: skewX(var(--sk)); border-radius: var(--rb); max-width: 520px; } .map-search > * { transform: skewX(var(--unsk)); } .map-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 400 15px var(--f-text); outline: none; } .map-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .map-filters::-webkit-scrollbar { display: none; } .mf { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font: 800 10.5px var(--f-disp); letter-spacing: .08em; text-transform: uppercase; transform: skewX(var(--sk)); border-radius: var(--rb); cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: all .2s; } .mf.on { background: var(--ink); color: var(--bg); border-color: var(--ink); } .mf i { width: 9px; height: 9px; border-radius: 50%; flex: none; } .map-ctrl { position: absolute; right: 12px; bottom: 22px; z-index: 6; display: flex; flex-direction: column; gap: 6px; } .map-ctrl button { width: 46px; height: 46px; display: grid; place-items: center; background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); cursor: pointer; border-radius: var(--r-sm); box-shadow: 0 6px 16px rgba(0,0,0,.25); } .map-ctrl .map-add { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); margin-bottom: 8px; } .map-ctrl .map-add.on { background: var(--ink); color: var(--bg); border-color: var(--ink); } .map-ctrl button.on { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); } .map-attr { position: absolute; left: 6px; bottom: 4px; z-index: 5; font-size: 10px; color: #333; background: rgba(255,255,255,.75); padding: 1px 5px; border-radius: 3px; } .map-attr a { color: #333; } .mk { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; padding: 0; animation: mkin .5s var(--ease-back) both; z-index: 2; } .mk .mk-shape { width: 26px; height: 26px; display: grid; place-items: center; background: var(--mc); border: 2px solid #0E1116; box-shadow: 0 4px 10px rgba(0,0,0,.45); transition: transform .25s var(--ease-back); } .mk .mk-shape b { font: 900 11px var(--f-disp); color: #0E1116; } .mk.k-wasser .mk-shape { border-radius: 50%; } .mk.k-teich .mk-shape { border-radius: 50% 50% 50% 0; transform: rotate(-45deg); } .mk.k-teich .mk-shape b { transform: rotate(45deg); } .mk.k-objekt .mk-shape { border-radius: 3px; transform: rotate(45deg); } .mk.k-objekt .mk-shape b { transform: rotate(-45deg); } .mk.sel { z-index: 3; } .mk.sel .mk-shape { border-color: var(--acc-d); scale: 1.2; } .mk.sel::before { content: ''; position: absolute; width: 30px; height: 30px; border: 2px solid var(--acc-d); border-radius: 50%; animation: ping 1.6s ease-out infinite; } .mk-me { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; z-index: 4; pointer-events: none; } .mk-me::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #6FB2FF; animation: ping 2s ease-out infinite; } .mk-me::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #6FB2FF; border: 3px solid #fff; } .mk-new { position: absolute; width: 30px; height: 30px; margin: -30px 0 0 -15px; z-index: 5; pointer-events: none; color: var(--acc-d); animation: mkin .4s var(--ease-back) both; } @keyframes mkin { from { opacity: 0; transform: translateY(-14px) scale(.5); } } .map-card { position: absolute; left: 12px; right: 12px; bottom: 16px; z-index: 7; max-width: 520px; background: var(--surface); border: 1px solid var(--line-strong); padding: 14px; clip-path: var(--clip); border-radius: var(--r); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; animation: cardup .45s var(--ease) both; max-height: 68%; overflow-y: auto; } @keyframes cardup { from { opacity: 0; transform: translateY(30px); } } .map-hint { position: absolute; left: 50%; top: 120px; transform: translateX(-50%); z-index: 7; background: var(--ink); color: var(--bg); padding: 10px 16px; font: 800 11px var(--f-disp); letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r-sm); box-shadow: var(--shadow); animation: drop .4s var(--ease) both; white-space: nowrap; } .map-page .content { position: relative; } .map-page .flashes { position: absolute; z-index: 9; left: 12px; right: 12px; top: 112px; max-width: 520px; margin: 0; pointer-events: none; } .map-page .flash { animation: drop .4s var(--ease) both, fadeout .5s 4.5s forwards; } @keyframes fadeout { to { opacity: 0; transform: translateY(-8px); } } .map-search-wrap { position: relative; max-width: 520px; } .map-q-x { border: 0; background: transparent; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; padding: 4px; } .map-search input::-webkit-search-cancel-button { display: none; } .map-results { position: absolute; left: 0; right: 0; top: 52px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); border-radius: var(--r-sm); overflow: hidden; animation: drop .25s var(--ease) both; max-height: 50vh; overflow-y: auto; } .map-results button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 400 14px var(--f-text); text-align: left; cursor: pointer; } .map-results button:last-child { border-bottom: 0; } .map-results button:hover, .map-results button.on { background: var(--surface-2); } .map-results button small { display: block; color: var(--ink-2); font-size: 12px; } .map-results .mr-ico { width: 22px; height: 22px; flex: none; display: grid; place-items: center; background: var(--mc); border: 2px solid #0E1116; border-radius: 50%; font: 900 10px var(--f-disp); color: #0E1116; } .map-results .mr-empty { padding: 12px; color: var(--ink-2); font-size: 13.5px; } .map-ctrl { transition: bottom .4s var(--ease); } .map-shell.card-open .map-ctrl { bottom: calc(var(--card-h, 0px) + 28px); } @media (min-width: 720px) { .map-shell.card-open .map-ctrl { bottom: 22px; } } .mk .mk-shape { background: var(--mc); } .mk.ms-limited .mk-shape, .mk.ms-out .mk-shape { box-shadow: 0 0 0 3px var(--sc), 0 4px 10px rgba(0,0,0,.45); } .mk.ms-out::after { content: ''; position: absolute; width: 30px; height: 3px; background: #FF5A4A; transform: rotate(-45deg); border-radius: 2px; box-shadow: 0 0 0 1.5px #0E1116; } .mk.hit .mk-shape { animation: mkhit .6s var(--ease-back); } @keyframes mkhit { 50% { scale: 1.45; } } .mk-cl { position: absolute; margin: -21px 0 0 -21px; width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; background: color-mix(in srgb, #5AA9FF 30%, transparent); cursor: pointer; animation: mkin .4s var(--ease-back) both; padding: 0; z-index: 2; } .mk-cl b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #5AA9FF; color: #0E1116; font: 900 13px var(--f-disp); border: 2px solid #0E1116; } .mk-cl.warn b { background: #F2B33D; } .map-card .mc-head { display: flex; align-items: flex-start; gap: 12px; } .map-card .mc-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--mc); border: 2px solid #0E1116; font: 900 15px var(--f-disp); color: #0E1116; border-radius: 50%; } .map-card .mc-ico.obj { border-radius: 6px; } .map-card .mc-title { flex: 1; min-width: 0; } .map-card h2 { font-size: 20px; line-height: 1.15; margin: 0; overflow-wrap: anywhere; } .map-card .mc-sub { font: 700 11px var(--f-disp); letter-spacing: .06em; color: var(--ink-2); text-transform: uppercase; margin-top: 3px; } .map-card .mc-photo { width: 100%; max-height: 180px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); } .map-card .mc-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); white-space: pre-line; } .map-card .mc-sens { background: color-mix(in srgb, var(--warn) 12%, var(--surface-2)); border: 1px dashed var(--warn); padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; white-space: pre-line; animation: fade .3s both; } .map-card .mc-sens small { display: flex; align-items: center; gap: 6px; font: 800 9px var(--f-disp); letter-spacing: .12em; color: var(--warn-text); text-transform: uppercase; margin-bottom: 4px; } .map-card .btn-row { flex-wrap: wrap; gap: 6px; } .map-loading { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 8; overflow: hidden; pointer-events: none; } .map-loading span { position: absolute; left: -40%; width: 40%; height: 100%; background: var(--acc); animation: mload 1.1s ease-in-out infinite; } .map-loading.done { opacity: 0; transition: opacity .4s; } @keyframes mload { to { left: 100%; } } .map-shell.adding .map-view { cursor: crosshair; } .map-shell.adding .mk, .map-shell.adding .mk-cl { opacity: .45; pointer-events: none; } .pos-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-sm); } .pos-row .pos-ico { color: var(--acc-text); display: grid; } .pos-row .pos-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pos-row small { color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; } .sens-field > label { display: flex; align-items: center; gap: 6px; color: var(--warn-text); } .sens-field textarea { border-style: dashed; } .btn-danger-text { color: var(--danger-text); } [data-fill-del][hidden] { display: none; } /* ---------------- Verwaltung ---------------- */ .adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; } .adm-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px; background: var(--surface); border: 1px solid var(--line); clip-path: var(--clip); border-radius: var(--r); color: inherit; text-decoration: none !important; min-height: 138px; transition: transform .25s var(--ease), border-color .25s, background-color .25s; } .adm-card:hover { transform: translateY(-3px); border-color: var(--line-strong); background: var(--surface-2); } .adm-card:active { transform: scale(.98); } .adm-ico { width: 44px; height: 44px; display: grid; place-items: center; background: var(--acc); color: var(--acc-ink); transform: skewX(var(--sk)); border-radius: var(--rb); margin-bottom: 8px; transition: transform .35s var(--ease-back); } .adm-ico svg { transform: skewX(var(--unsk)); } .adm-card:hover .adm-ico { transform: skewX(var(--sk)) rotate(-4deg) scale(1.06); } .adm-card b { font: 800 16px var(--f-disp); letter-spacing: .02em; } .adm-card small { color: var(--ink-2); font-size: 13px; line-height: 1.35; } .adm-meta { margin-top: auto; padding-top: 6px; font: 800 10px var(--f-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--acc-text); } .adm-go { position: absolute; right: 14px; top: 18px; color: var(--ink-3); transition: transform .25s var(--ease), color .25s; } .adm-card:hover .adm-go { transform: translateX(4px); color: var(--acc-text); } a.note { color: inherit; } fieldset.card { margin: 0; min-inline-size: 0; } .row-in { animation: drop .35s var(--ease) both; } .edit-rows { display: flex; flex-direction: column; gap: 6px; } .edit-row { display: flex; align-items: center; gap: 8px; } .edit-row[hidden], [data-row][hidden] { display: none; } .edit-row input { flex: 1; min-width: 0; } .edit-row .cnt { font: 700 11px var(--f-disp); color: var(--ink-3); min-width: 60px; text-align: right; } .drag-dot { color: var(--ink-3); display: grid; } .rule-row, .rule-head { display: grid; grid-template-columns: 1.2fr 1.3fr 1.1fr 1.2fr 44px; gap: 8px; align-items: center; } .rule-head span { font: 800 9.5px var(--f-disp); letter-spacing: .13em; color: var(--ink-2); text-transform: uppercase; } @media (max-width: 860px) { .rule-head { display: none; } .rule-row { grid-template-columns: 1fr 44px; padding: 10px; background: var(--surface-2); border-radius: var(--r-sm); } .rule-row > select { grid-column: 1; } .rule-row > :nth-child(5) { grid-column: 2; grid-row: 1; } } fieldset[disabled] { opacity: .75; } .ok-badge.sm { width: 64px; height: 64px; } .danger-zone summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font: 800 11px var(--f-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--danger-text); list-style: none; } .danger-zone summary::-webkit-details-marker { display: none; } .check.locked { opacity: .6; } .check[hidden] { display: none; } .more-opts summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 800 11px var(--f-disp); letter-spacing: .1em; text-transform: uppercase; color: var(--acc-text); list-style: none; padding: 4px 0; } .more-opts summary::-webkit-details-marker { display: none; } .more-opts[open] summary svg { transform: rotate(45deg); } .more-opts summary svg { transition: transform .25s var(--ease); } .check.locked svg { vertical-align: -1px; } .perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; } .perm-group { background: var(--surface-2); padding: 12px 14px; border-radius: var(--r-sm); display: flex; flex-direction: column; gap: 4px; } .perm-group h3 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 4px; } .perm-group .check small { display: block; color: var(--ink-3); font-size: 11.5px; } .perm-group .check.locked { opacity: .55; } .role-pick { display: flex; flex-direction: column; gap: 10px; } .role-ow { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; } .role-ow > b { display: block; font: 800 10.5px var(--f-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; } .invite-link { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; } .invite-link code { display: block; width: 100%; padding: 10px 12px; background: var(--surface-2); border-radius: var(--r-sm); font-size: 13px; word-break: break-all; user-select: all; } .invite-qr { width: 190px; background: #fff; padding: 8px; border-radius: var(--r-sm); } .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); } .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } .tbl th { text-align: left; font: 800 9.5px var(--f-disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding: 10px 12px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; background: var(--surface-2); } .tbl td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } .tbl tr:last-child td { border-bottom: 0; } .tbl td.mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; } .tbl select, .tbl input { width: 100%; min-width: 120px; } .log-box { background: #0B0E12; color: #CFE3D4; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 14px; border-radius: var(--r-sm); overflow: auto; max-height: 60vh; white-space: pre-wrap; word-break: break-word; } .step-list { counter-reset: st; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; } .step-list li { counter-increment: st; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; } .step-list li::before { content: counter(st); flex: none; width: 26px; height: 26px; display: grid; place-items: center; background: var(--surface-3); font: 800 12px var(--f-disp); transform: skewX(var(--sk)); border-radius: var(--rb); } .drop-zone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px; border: 2px dashed var(--line-strong); border-radius: var(--r); text-align: center; color: var(--ink-2); transition: border-color .2s, background-color .2s; cursor: pointer; } .drop-zone.over, .drop-zone:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 7%, transparent); } .drop-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .drop-zone b { color: var(--ink); font: 800 15px var(--f-disp); } .drop-zone .dz-file { font-size: 13px; color: var(--acc-text); font-weight: 600; } .ver-big { font: 800 44px/1 var(--f-disp); letter-spacing: .02em; } .progress-overlay { position: fixed; inset: 0; z-index: 120; background: var(--scrim); display: grid; place-items: center; animation: fade .25s both; } .progress-overlay .card { width: min(380px, calc(100vw - 32px)); text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; } .spinner { width: 46px; height: 46px; border: 4px solid var(--surface-3); border-top-color: var(--acc); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------------- Guide ---------------- */ .guide-wrap { position: fixed; inset: 0; z-index: 100; } .guide-spot { position: absolute; border: 2px solid var(--acc-d); box-shadow: 0 0 0 4000px var(--scrim); border-radius: var(--r-sm); pointer-events: none; transition: left .55s var(--ease), top .55s var(--ease), width .55s var(--ease), height .55s var(--ease), border-color .3s; } .guide-spot::after { content: ''; position: absolute; inset: -2px; border: 2px solid var(--acc-d); border-radius: inherit; animation: gspot 1.8s ease-out infinite; } .guide-spot.none { border-color: transparent; } .guide-spot.none::after { display: none; } @keyframes gspot { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.06, 1.25); } } .guide-card { position: absolute; width: min(380px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line-strong); padding: 18px 18px 14px; clip-path: var(--clip); border-radius: var(--r); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; transition: left .55s var(--ease), top .55s var(--ease); } .guide-card.in { animation: gcard .5s var(--ease) both; } @keyframes gcard { from { opacity: 0; transform: translateY(12px) scale(.98); } } .guide-card h2 { font-size: 21px; } .guide-card p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; } .guide-k { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 800 10.5px var(--f-disp); letter-spacing: .14em; color: var(--acc-text); text-transform: uppercase; } .guide-k button { border: 0; background: transparent; color: var(--ink-2); font: 800 10px var(--f-disp); letter-spacing: .1em; cursor: pointer; text-transform: uppercase; padding: 6px 2px; } .guide-dots { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; } .guide-dots i { width: 18px; height: 5px; background: var(--line-strong); transform: skewX(var(--sk)); border-radius: var(--rb); transition: background-color .35s; } .guide-dots i.on { background: var(--acc); } .guide-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .guide-center { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 32px)); } .guide-center.in { animation: gcenter .55s var(--ease) both; } @keyframes gcenter { from { opacity: 0; transform: translate(-50%, -44%) scale(.95); } } .guide-burst { position: relative; width: 84px; height: 84px; align-self: center; margin: 4px 0 6px; } .guide-burst i { position: absolute; left: 50%; top: 50%; width: 6px; height: 22px; margin: -11px 0 0 -3px; background: var(--acc); animation: burst .9s .15s var(--ease) both; } @keyframes burst { from { opacity: 1; transform: rotate(var(--r)) translateY(0) skewX(-16.7deg); } to { opacity: 0; transform: rotate(var(--r)) translateY(-70px) skewX(-16.7deg); } } .guide-burst .gb-core { position: absolute; inset: 0; display: grid; place-items: center; background: var(--acc); color: var(--acc-ink); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); animation: okpop .6s var(--ease-back) both; } [data-shape="round"] .guide-burst .gb-core { clip-path: circle(50%); } .guide-roles { display: flex; flex-wrap: wrap; gap: 6px; } .tour-list .li-ico.done { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok-text); } /* ---------------- Anmeldung / Einrichtung ---------------- */ .bare { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; position: relative; overflow: hidden; } .bare-glow { position: fixed; left: -20vw; top: -30vh; width: 80vw; height: 70vh; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--acc-d) 30%, transparent), transparent); filter: blur(40px); pointer-events: none; animation: glow 16s ease-in-out infinite alternate; } @keyframes glow { from { transform: translate3d(-6%, 4%, 0) scale(1); } to { transform: translate3d(8%, -4%, 0) scale(1.15); } } .bare-box { position: relative; width: min(440px, 100%); display: flex; flex-direction: column; gap: 18px; } .bare-box.wide { width: min(760px, 100%); } .bare-brand { display: flex; align-items: center; gap: 14px; } .bare-brand .brand-word { font-size: 34px; } .bare-brand .brand-sub { color: var(--ink-2); font-size: 10px; } .setup-step { display: flex; flex-direction: column; gap: 14px; } .check-list { display: flex; flex-direction: column; gap: 6px; } .check-list div { display: flex; align-items: center; gap: 10px; font-size: 14px; } .check-list .ok svg.i { color: var(--ok-text); } .check-list .bad svg.i { color: var(--danger-text); } .check-list .warn svg.i { color: var(--warn-text); } .code-input { font: 800 30px var(--f-disp) !important; letter-spacing: .4em; text-align: center; } /* ---------------- Sonstiges ---------------- */ .qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .qr-card { background: #fff; color: #111; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; border: 1px solid #ddd; break-inside: avoid; } .qr-card canvas, .qr-card svg { width: 150px; height: 150px; } .qr-card b { font: 800 15px var(--f-disp); letter-spacing: .04em; } .qr-card small { font-size: 11px; color: #555; } .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .swatch { position: relative; cursor: pointer; } .swatch input { position: absolute; opacity: 0; } .swatch > span { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-sm); font: 800 10.5px var(--f-disp); letter-spacing: .08em; text-transform: uppercase; transition: border-color .2s; } .swatch > span i { width: 26px; height: 18px; border-radius: 3px; flex: none; } .swatch input:checked + span { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); } .swatch input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; } .look-preview { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px; background: var(--surface-2); border-radius: var(--r); } .perm-matrix .pm-group { margin-top: 14px; } .perm-matrix .pm-group:first-child { margin-top: 0; } .coverage { display: flex; flex-direction: column; gap: 7px; } .cov-row { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 22px; align-items: center; gap: 10px; font-size: 13px; } .cov-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cov-row .progress { height: 8px; } .cov-row.zero { color: var(--warn-text); font-weight: 700; } .session-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface); } .session-row:last-child { border-bottom: 0; } .session-row .sd { font: 800 12px/1.2 var(--f-disp); } .session-row .sd small { display: block; color: var(--ink-2); font-size: 10px; letter-spacing: .08em; } .session-row .topic { font-weight: 600; } .session-row .topic.empty-t { color: var(--ink-3); font-weight: 400; font-style: italic; } .print-only { display: none; } @media print { @page { size: A4; margin: 14mm; } body { background: #fff !important; color: #111 !important; font-size: 11pt; } .side, .top, .tabbar, .no-print, #toast, .guide-wrap { display: none !important; } .main-col { margin: 0 !important; } .content { padding: 0 !important; max-width: none !important; } .print-only { display: block; } .card, .table-wrap, .list { border-color: #ccc !important; background: #fff !important; clip-path: none !important; } * { animation: none !important; color-adjust: exact; -webkit-print-color-adjust: exact; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* Fahrzeug-Konfigurator */ .swatches.styles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); } .swatches.styles .swatch > span { align-items: center; min-height: 54px; text-transform: none; letter-spacing: 0; } .sw-t { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .sw-t b { font: 800 12px var(--f-disp); letter-spacing: .06em; text-transform: uppercase; } .sw-t small { font: 400 11.5px/1.25 var(--f-text); color: var(--ink-2); } .swatch input:checked + span .sw-t small { color: var(--ink); } @media (min-width: 1024px) { .config-preview { position: sticky; top: calc(var(--top-h) + 12px); } } @media (max-width: 1023.98px) { #vehicle-config.cols { flex-direction: column; flex-wrap: nowrap; align-items: stretch; } #vehicle-config .col-side, #vehicle-config .config-preview { display: contents; } #vehicle-config .vehicle-stage { order: -2; position: sticky; top: calc(var(--top-h) + var(--safe-t)); z-index: 5; box-shadow: var(--shadow); padding: 8px 10px 6px; } #vehicle-config #cfg-summary { order: -1; } #vehicle-config .col-main { order: 0; } #vehicle-config .btn-row { order: 2; } #vehicle-config #cfg-preview .vehicle-svg { max-height: 132px; } #vehicle-config .vs-toggle button { height: 30px; font-size: 9.5px; } } .swatch > span { min-width: 0; } .maker-ico { font: 800 12px var(--f-disp); letter-spacing: .04em; color: var(--ink); } .edit-row .cnt:empty { display: none; } @media (max-width: 640px) { .tbl.stack-m thead { display: none; } .tbl.stack-m tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); } .tbl.stack-m td { padding: 0; border: 0; max-width: none !important; } .tbl.stack-m td:nth-child(3) { grid-column: 1 / -1; font-weight: 600; } .tbl.stack-m td:nth-child(4) { grid-column: 1 / -1; } .tbl.stack-m td:nth-child(4):empty { display: none; } } .swatches.colors { grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); } @media (max-width: 640px) { .prio-pick .pp b { width: auto; flex: 1; } }