:root { --bg: #f4f6fb; /* helle Blau-Seitenhintergrund */ --card: #ffffff; --ink: #1e2d52; /* sehr dunkles Blau (Text) */ --muted: #8a93a6; /* gedämpftes Blaugrau (Sekundärtext) */ --line: #dbe0ee; /* helle Blau-Rahmen */ --line-strong: #c4ceeb; /* kräftigere Blau-Rahmen */ --primary: #3B5180; /* Primär-/Akzentfarbe */ --primary-dark: #2c4578; /* dunklere Hover-Variante */ --primary-darker: #1e2d52; /* sehr dunkles Blau (aktiv) */ --primary-soft: #eef1f8; /* helle Blau-Fläche (Info-Box, Badge) */ --primary-soft-2: #e8edf8; /* Hover-Fläche */ --accent: #3B5180; /* Links = Primärfarbe */ --ok: #15803d; --ok-soft: #dcfce7; --warn: #b45309; --warn-soft: #fef3c7; --danger: #b91c1c; --danger-soft: #fdecea; --input-bg: #ffffff; /* Formularfelder */ --month-head-bg: #d3dcf2; /* Monats-Kopfzeilen / Matrix-Monat */ --duty-1: #1e2d52; /* Auslastungsgrafik: Pikett-OF */ --duty-2: #3B5180; /* Pikett-OF WE */ --duty-3: #6d80ac; /* Backup-OF */ --duty-4: #a9b4d6; /* Backup-OF WE */ --vacation: #3730a3; /* Ferien-Kennung (Indigo) */ --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); } /* -------------------------------------------------------------------------- */ /* Dark-Mode (Phase 1: Chrome). Wird über aktiviert; */ /* theme-init.js setzt das Attribut vor dem ersten Paint (kein Flackern). */ /* -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --bg: #0f1729; --card: #172136; --ink: #e6ebf5; --muted: #93a0bd; --line: #29324a; --line-strong: #3a4a6b; --primary: #4a63a0; /* etwas heller, damit auf Dunkel lebendig */ --primary-dark: #5b78b8; /* Hover sichtbar aufhellen */ --primary-darker: #b9c6e8; /* dient als Text auf «soft»-Flächen -> hell */ --primary-soft: #223052; --primary-soft-2: #283a63; --accent: #9db4e6; /* Links heller für Kontrast */ --ok: #4ade80; --ok-soft: rgba(34,197,94,.16); --warn: #fbbf24; --warn-soft: rgba(245,158,11,.16); --danger: #f87171; --danger-soft: rgba(239,68,68,.16); --input-bg: #1d2942; --month-head-bg: #26335a; --duty-1: #5b78b8; /* im Dunkel aufgehellt, damit auf dunklem Track sichtbar */ --duty-2: #7089c6; --duty-3: #93a6d4; --duty-4: #c3cce6; --vacation: #c7d2fe; --shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); } /* Badges mit fixen Pastelltönen im Dark angleichen */ :root[data-theme="dark"] .av-vacation, :root[data-theme="dark"] .pill-pending { background: rgba(99,102,241,.22); color: #c7d2fe; } :root[data-theme="dark"] .av-absent { background: rgba(148,163,184,.20); color: #cbd5e1; } :root[data-theme="dark"] .duty-pikett { background: rgba(59,130,246,.24); color: #bfdbfe; } :root[data-theme="dark"] .flash.ok { border-color: rgba(34,197,94,.4); } :root[data-theme="dark"] .flash.err { border-color: rgba(239,68,68,.4); } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Header */ header.topbar { background: var(--primary); color: #fff; padding: 0 20px; display: flex; align-items: center; gap: 20px; box-shadow: var(--shadow); position: sticky; top: 0; z-index: 20; } header.topbar .brand { font-weight: 700; font-size: 18px; color: #fff; padding: 14px 0; display: flex; align-items: center; gap: 8px; } header.topbar nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; } header.topbar nav a { color: #fff; padding: 14px 12px; font-size: 14px; border-bottom: 3px solid transparent; } header.topbar nav a:hover { background: rgba(255,255,255,.12); text-decoration: none; } header.topbar nav a.active { border-bottom-color: #fff; font-weight: 600; } /* Admin-Dropdown im Menü */ .nav-dd { position: relative; } .nav-dd > summary { list-style: none; cursor: pointer; color: #fff; padding: 14px 12px; font-size: 14px; border-bottom: 3px solid transparent; user-select: none; } .nav-dd > summary::-webkit-details-marker { display: none; } .nav-dd > summary:hover { background: rgba(255,255,255,.12); } .nav-dd > summary.active { border-bottom-color: #fff; font-weight: 600; } .nav-dd[open] > summary { background: rgba(255,255,255,.15); } header.topbar nav .nav-dd-menu { position: absolute; top: 100%; left: 0; min-width: 190px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; z-index: 30; display: flex; flex-direction: column; } header.topbar nav .nav-dd-menu a { color: var(--ink); padding: 8px 12px; border-radius: 6px; border-bottom: none; font-size: 14px; } header.topbar nav .nav-dd-menu a:hover { background: var(--primary-soft); } header.topbar nav .nav-dd-menu a.active { background: var(--primary-soft); color: var(--primary-darker); font-weight: 600; } header.topbar .userbox { display: flex; align-items: center; gap: 12px; font-size: 13px; } header.topbar .userbox .role { background: rgba(255,255,255,.2); padding: 2px 8px; border-radius: 20px; font-size: 12px; } header.topbar .userbox a { color: #fff; } .theme-toggle { background: rgba(255,255,255,.14); color: #fff; border: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .theme-toggle:hover { background: rgba(255,255,255,.26); } main { max-width: 1240px; margin: 24px auto; padding: 0 20px; } .wide { max-width: 100%; padding: 0 16px; } h1 { font-size: 22px; margin: 0 0 4px; } h2 { font-size: 17px; margin: 24px 0 10px; } .subtitle { color: var(--muted); margin: 0 0 20px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 20px; } /* Buttons */ .btn { display: inline-block; background: var(--primary); color: #fff; border: none; padding: 9px 16px; border-radius: 8px; font-size: 14px; cursor: pointer; font-weight: 500; } .btn:hover { background: var(--primary-dark); text-decoration: none; color: #fff; } .btn.secondary { background: var(--primary-soft-2); color: var(--primary-darker); } .btn.secondary:hover { background: var(--line-strong); } .btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); } .btn.small { padding: 5px 10px; font-size: 13px; } .btn.ok { background: var(--ok); } .btn.ok:hover { background: #126b31; } .btn.warn { background: var(--warn); } .btn:disabled { opacity: .5; cursor: not-allowed; } /* Forms */ label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 4px; } input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--input-bg); color: var(--ink); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--line-strong); border-color: var(--primary); } .form-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .form-row > div { flex: 1; min-width: 180px; } .inline { display: inline-block; width: auto; } /* Verfügbarkeit: Sammelaktionen-Leiste (gruppiert, gleichmässig ausgerichtet) */ .bulk-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .bulk-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bulk-sep { align-self: stretch; width: 1px; min-height: 28px; background: var(--line); } .bulk-select { width: auto; min-width: 168px; } .bulk-bar .btn { margin: 0; } /* Tables */ .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); } table { border-collapse: collapse; width: 100%; font-size: 13px; } th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } thead th { background: var(--primary-soft); position: sticky; top: 0; font-weight: 600; color: var(--primary-darker); } tbody tr:hover { background: var(--bg); } td.num, th.num { text-align: right; } /* Stat tiles */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; } .tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } .tile .num { font-size: 28px; font-weight: 700; } .tile .lbl { color: var(--muted); font-size: 13px; } .tile.alert .num { color: var(--danger); } /* Badges / availability */ .badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight: 500; } .av-available { background: var(--ok-soft); color: var(--ok); } .av-vacation { background: #e0e7ff; color: #3730a3; } .av-blocked { background: var(--warn-soft); color: var(--warn); } .av-absent { background: #f3f4f6; color: #6b7280; } .duty-pikett { background: #dbeafe; color: #1e40af; font-weight: 600; } .duty-backup { background: var(--primary-soft); color: var(--primary-darker); font-weight: 600; } .pill-open { background: var(--warn-soft); color: var(--warn); } .pill-pending { background: #e0e7ff; color: #3730a3; } .pill-confirmed { background: var(--ok-soft); color: var(--ok); } .pill-current { background: var(--primary); color: #fff; } /* Messages */ .flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; } .flash.ok { background: var(--ok-soft); color: var(--ok); border: 1px solid #bbf7d0; } .flash.err { background: var(--danger-soft); color: var(--danger); border: 1px solid #f5c2c0; } .muted { color: var(--muted); } .small { font-size: 13px; } .right { text-align: right; } .mt { margin-top: 16px; } .nowrap { white-space: nowrap; } code.mono { background: var(--primary-soft); padding: 2px 6px; border-radius: 4px; font-size: 13px; word-break: break-all; color: var(--primary-darker); } /* Login */ .login-wrap { max-width: 380px; margin: 60px auto; } .login-wrap .brand-big { text-align: center; font-size: 24px; font-weight: 700; color: var(--primary); margin-bottom: 6px; } .login-wrap .sub { text-align: center; color: var(--muted); margin-bottom: 24px; } .plan-matrix td, .plan-matrix th { padding: 4px 6px; font-size: 12px; text-align: center; } .plan-matrix td.name, .plan-matrix th.name { text-align: left; position: sticky; left: 0; background: var(--card); z-index: 2; } .plan-matrix thead th { z-index: 3; } .plan-matrix thead tr.matrix-month-row th { top: 0; } .plan-matrix thead tr:last-child th { top: 30px; } .plan-matrix th.matrix-month { background: var(--month-head-bg); color: var(--primary-darker); text-align: center; font-weight: 700; border-left: 2px solid var(--card); font-size: 11px; padding: 5px 6px; letter-spacing: .3px; } .plan-matrix tr.matrix-month-row th.name { background: var(--month-head-bg); } .week-sep { border-left: 2px solid var(--line-strong); } /* Monats-Kopfzeile – Einteilung, Jahresplan, Verfügbarkeit */ tr.month-head td { background: var(--month-head-bg); color: var(--primary-darker); font-weight: 700; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; position: sticky; left: 0; padding: 6px 12px; border-left: 4px solid var(--primary); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); } .assign-table tbody tr:not(.month-head):hover { background: var(--primary-soft); } /* Monatskalender mit durchgehenden Schicht-Balken */ .month-cal2 { min-width: 720px; } .cal-weekhead { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; } .cal-weekhead > div { text-align: center; font-size: 12px; font-weight: 600; color: var(--primary-darker); background: var(--primary-soft); padding: 5px 0; border-radius: 5px; margin: 0 2px; } .cal-week { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 8px; background: var(--card); } .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); } .cal-days > div { text-align: right; padding: 4px 8px; font-size: 12px; font-weight: 700; border-right: 1px solid var(--line); color: var(--ink); } .cal-days > div:last-child { border-right: none; } .cal-days > div.out { background: #f7f8fc; color: var(--muted); } .cal-days > div.today { background: var(--primary-soft); color: var(--primary-darker); box-shadow: inset 0 0 0 2px var(--primary); } .cal-lane { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 2px; } .cal-lane:last-child { padding-bottom: 5px; } .cal-ev { font-size: 11px; line-height: 1.5; border-radius: 5px; padding: 2px 8px; margin: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: filter .12s ease; } .cal-ev:hover { filter: brightness(.97); } .cal-ev.pikett { background: var(--primary-soft); color: var(--primary-darker); border-left: 3px solid var(--primary); } .cal-ev.backup { background: #eaf1fb; color: #34528c; border-left: 3px solid #6d80ac; } .cal-ev.empty { background: #f4f6fb; color: var(--muted); border-left: 3px solid var(--line-strong); } /* Auslastungs-Grafik */ .chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; font-size: 12px; color: var(--muted); } .chart-legend span { display: inline-flex; align-items: center; gap: 6px; } .chart-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .chart-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; opacity: 0; transform: translateY(6px); animation: chartIn .45s ease forwards; } @keyframes chartIn { to { opacity: 1; transform: none; } } .chart-name { flex: 0 0 150px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; } .chart-bar { flex: 1; display: flex; height: 22px; background: var(--primary-soft); border-radius: 6px; overflow: hidden; min-width: 120px; box-shadow: inset 0 0 0 1px var(--line); } .chart-bar span { display: block; height: 100%; position: relative; cursor: default; transition: filter .15s ease, transform .15s ease, box-shadow .15s ease; } .chart-bar span:hover { filter: brightness(1.15) saturate(1.1); transform: scaleY(1.12); box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset; z-index: 3; } /* Custom-Tooltip beim Hover über ein Segment */ .chart-bar span:hover::after { content: attr(data-label); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--primary-darker); color: #fff; font-size: 11px; line-height: 1; padding: 5px 8px; border-radius: 5px; white-space: nowrap; z-index: 10; box-shadow: var(--shadow); pointer-events: none; } .chart-bar span:hover::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--primary-darker); z-index: 10; pointer-events: none; } .chart-row:hover .chart-name { color: var(--primary); font-weight: 600; } .chart-row:hover .chart-total { color: var(--primary); } .chart-total { flex: 0 0 34px; text-align: right; font-weight: 700; font-size: 13px; color: var(--primary-darker); transition: color .15s; } @media (max-width: 560px) { .chart-name { flex-basis: 90px; } } /* Einsatz-Auswertung (einfache Balkenliste) */ .ebar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .ebar-label { flex: 0 0 220px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ebar-track { flex: 1; height: 20px; background: var(--primary-soft); border-radius: 5px; overflow: hidden; min-width: 100px; box-shadow: inset 0 0 0 1px var(--line); } .ebar-track > span { display: block; height: 100%; background: var(--primary); transition: filter .12s; } .ebar-track > span:hover { filter: brightness(1.1); } .ebar-val { flex: 0 0 40px; text-align: right; font-weight: 700; font-size: 13px; color: var(--primary-darker); } @media (max-width: 560px) { .ebar-label { flex-basis: 120px; } } /* Import-Fortschrittsbalken (indeterminiert) */ .import-progress-bar { height: 8px; background: var(--primary-soft); border-radius: 5px; overflow: hidden; margin-top: 12px; } .import-progress-bar > span { display: block; height: 100%; width: 40%; background: var(--primary); border-radius: 5px; animation: importIndet 1.1s ease-in-out infinite; } @keyframes importIndet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } } /* ===== Statistik-Dashboard ===== */ .stat-slicers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .stat-slicers .slicer label { font-size: 12px; } /* Mehrfachauswahl-Filter (Checkbox-Dropdown) */ .ms { position: relative; } .ms > summary { list-style: none; cursor: pointer; display: block; border: 1px solid var(--line); border-radius: 8px; padding: 8px 28px 8px 10px; background: var(--card); font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; } .ms > summary::-webkit-details-marker { display: none; } .ms > summary::after { content: "▾"; position: absolute; right: 10px; top: 8px; color: var(--muted); } .ms[open] > summary::after { content: "▴"; } .ms > summary:focus { outline: 2px solid var(--line-strong); border-color: var(--primary); } /* Einsätze & Pikett: feste Spaltenbreiten, damit alle Monats-Tabellen (je eine eigene ) über den Kopf hinweg einheitlich fluchten. */ .ep-table { table-layout: fixed; } .ep-table td, .ep-table th { overflow-wrap: anywhere; } /* Einsätze & Pikett: Einsatz-Zähler rechtsbündig; klappt die Detail-Tabelle als volle Zeile über alle Spalten auf, damit die Einsatz-Infos die ganze Tabellenbreite nutzen (kein horizontales Scrollen der schmalen Spalte). */ .ep-einsatz { text-align: right; } .ep-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; white-space: nowrap; } .ep-toggle::before { content: "▸"; margin-right: 6px; color: var(--muted); font-size: 12px; } .ep-toggle[aria-expanded="true"]::before { content: "▾"; } /* Detail-Zeile: volle Breite, eigene Sub-Tabelle darin */ .ep-detail-cell { padding: 0 !important; background: var(--bg); } .ep-detail-cell .subtable { margin: 0; } .ep-detail-cell .subtable td, .ep-detail-cell .subtable th { white-space: normal; } .ep-detail-cell .subtable td.nowrap { white-space: nowrap; } .ms-list { position: absolute; z-index: 40; margin-top: 4px; left: 0; min-width: 100%; max-height: 260px; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px; box-shadow: 0 8px 22px rgba(20,32,64,.16); } .ms-opt { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; white-space: nowrap; } .ms-opt:hover { background: var(--primary-soft); } .ms-opt input { width: auto; margin: 0; } .stat-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; } .stat-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; } .stat-crumbs .crumb { color: var(--accent); } .stat-crumbs .crumb.active { color: var(--primary-darker); font-weight: 700; text-decoration: none; } .stat-crumbs .crumb-sep { color: var(--muted); } .stat-chips { display: flex; gap: 6px; flex-wrap: wrap; } .stat-chip { background: var(--primary-soft); color: var(--primary-darker); border: 1px solid var(--line-strong); border-radius: 20px; padding: 3px 10px; font-size: 12px; cursor: pointer; } .stat-chip:hover { background: var(--line-strong); } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 0; } .stat-grid .card { margin-bottom: 16px; } .stat-grid .stat-wide { grid-column: 1 / -1; } .stat-h { margin: 0 0 10px; font-size: 15px; } .stat-chart { width: 100%; height: 300px; } @media (max-width: 820px) { .stat-grid { grid-template-columns: 1fr; } } /* Matrix */ .stat-matrix .stat-cat-row { cursor: pointer; } .stat-matrix .stat-cat-row:hover { background: var(--primary-soft); } .stat-matrix .stat-cat-row .tw { display: inline-block; width: 14px; transition: transform .12s; color: var(--muted); } .stat-matrix .stat-cat-row.open .tw { transform: rotate(90deg); } .stat-matrix .stat-kw-row .kwcell { padding-left: 28px; color: var(--muted); } .stat-raw td, .stat-matrix td { font-size: 13px; } /* ---- Footer + Changelog-Popup ---- */ .app-footer { max-width: 1240px; margin: 10px auto 28px; padding: 0 20px; text-align: center; } .linklike { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--primary); text-decoration: underline; } .linklike:hover { color: var(--primary-dark); } .changelog-dialog { border: none; border-radius: 12px; padding: 0; width: 92%; max-width: 580px; box-shadow: 0 24px 64px rgba(20, 32, 64, .32); color: var(--ink); } .changelog-dialog::backdrop { background: rgba(20, 32, 64, .45); } .changelog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); } .changelog-body { padding: 12px 18px 18px; max-height: 62vh; overflow: auto; } .changelog-ver { margin-bottom: 16px; } .changelog-ver h4 { margin: 8px 0 4px; color: var(--primary-darker); } .changelog-ver ul { margin: 0 0 0 20px; line-height: 1.55; } .changelog-ver li { margin: 2px 0; } /* ---- Anleitung / Hilfe-Seiten ---- */ .doc { max-width: 940px; } .doc h2 { margin: 34px 0 6px; padding-top: 8px; border-top: 1px solid var(--line); } .doc h2:first-of-type { border-top: none; } .doc h3 { margin: 20px 0 4px; } .doc p, .doc li { line-height: 1.6; } .doc ol, .doc ul { margin: 6px 0 6px 22px; } .doc code.mono { font-size: 12px; } .doc-fig { margin: 14px 0 24px; } .doc-shot { max-height: 560px; overflow: auto; border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); background: var(--card); } .doc-shot img { display: block; width: 100%; height: auto; } /* Kompakte Variante: schmaleres Hochformat-Bild ohne Innen-Scroll. */ .doc-shot.compact { max-height: none; overflow: visible; max-width: 360px; } .doc-fig figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; } .doc-toc { background: var(--primary-soft); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 14px 18px; margin: 8px 0 24px; } .doc-toc ol { margin: 6px 0 0 20px; } .doc-toc a { color: var(--primary-darker); } .doc-role-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 20px; } .doc-note { background: var(--primary-soft); border-left: 4px solid var(--primary); border-radius: 6px; padding: 10px 14px; margin: 12px 0; } .doc-kbd { display: inline-block; background: var(--primary-soft); border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 7px; font-size: 12px; font-weight: 600; color: var(--primary-darker); } /* ---- Tablet / Touch-Optimierung ---- */ /* Kompaktere Kopfleiste auf schmalen Breiten (Nav bricht sonst sehr hoch um) */ @media (max-width: 900px) { header.topbar { padding: 8px 14px; gap: 10px; } header.topbar .brand { font-size: 16px; } header.topbar nav { gap: 2px; } header.topbar nav a { padding: 7px 9px; font-size: 14px; } main { margin: 16px auto; } .stat-grid { gap: 12px; } } /* Touch-Geräte: grössere, fingerfreundliche Bedienelemente */ @media (pointer: coarse) { .btn, .btn.small, .btn.secondary { min-height: 42px; } input, select, textarea, .ms > summary { min-height: 42px; } .ms-opt { padding: 11px 8px; } header.topbar nav a { padding-top: 9px; padding-bottom: 9px; } .stat-chip { padding: 7px 12px; } } /* ===== Mini-Spiel «Schlauchleitung» (Easter-Egg) ===== */ .game-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; } .game-card { text-align: center; } .game-stats { display: flex; gap: 28px; justify-content: center; margin-bottom: 12px; } .game-stats .num { font-size: 26px; font-weight: 700; color: var(--primary-darker); } .game-stage { position: relative; display: inline-block; max-width: 100%; } #game-canvas { width: 100%; max-width: 480px; height: auto; display: block; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); touch-action: none; } .game-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--card) 78%, transparent); border-radius: 10px; text-align: center; } .game-overlay.hidden { display: none; } .game-overlay-inner p { margin: 0 0 12px; font-size: 16px; font-weight: 600; } .game-dpad { display: none; margin: 14px auto 0; width: max-content; } .game-dpad button { width: 52px; height: 46px; margin: 3px; font-size: 16px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--primary-soft-2); color: var(--primary-darker); cursor: pointer; } .game-dpad button:active { background: var(--line-strong); } .game-board tr.hs-me { background: var(--primary-soft); font-weight: 600; } .game-board tr.hs-me td { color: var(--primary-darker); } @media (pointer: coarse) { .game-dpad { display: block; } } @media (max-width: 820px) { .game-wrap { grid-template-columns: 1fr; } }