/* Marschplan-System – Basis-Styles (Phase 1). Kein Build-Schritt, keine Abhängigkeiten. */ :root { --primary: #1F3864; /* Aus --primary abgeleitet (App\Services\BrandingColors). Bei abweichender Vereinsfarbe überschreibt branding_head_style() alle drei; ein Test verriegelt die Werte hier gegen die PHP-Rechnung, damit sie nicht auseinanderlaufen. --on-primary = lesbare Schrift AUF einer Primärfläche (Button) --primary-ink = die Marke als Text/dünne Linie/Fokusring auf Seitengrund */ --on-primary: #ffffff; --primary-ink: #1f3864; --ink: #1f2328; --muted: #6b7280; --line: #e6e6e9; --bg: #ffffff; --bg-soft: #f7f7f8; --sidebar: #17171a; /* Lesbare Schrift AUF der Leiste. Wird bei eigener Leistenfarbe berechnet (BrandingColors), damit eine helle Leiste nicht weiße Schrift auf hellem Grund bekommt. Alle weiteren Leisten-Farbwerte mischen sich daraus — vorher standen dort feste Grautöne. */ --sidebar-ink: #ffffff; --sidebar-muted: color-mix(in srgb, var(--sidebar-ink) 58%, var(--sidebar)); --sidebar-active: var(--sidebar-ink); --danger: #b42318; --danger-soft: #fef3f2; --warning: #b54708; --warning-soft: #fffaeb; --success: #067647; --success-soft: #ecfdf3; --radius: 10px; --serif: Georgia, 'Times New Roman', serif; --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Spacing-Scale (4pt-Rhythmus) – statt ad-hoc rem-Werte */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; color-scheme: light; } /* ---------- Dunkles Design (globaler Umschalter, siehe theme.js) ---------- Nur die neutralen Farb-Tokens werden umdefiniert; die Marken-/Statusfarben bleiben, Links werden für dunklen Grund aufgehellt. data-theme am steuert alles. */ :root[data-theme="dark"] { color-scheme: dark; --ink: #e7e8ea; --muted: #a0a6b0; --line: #2b2e35; --bg: #1b1d22; --bg-soft: #131418; --sidebar: #0b0c0f; /* --sidebar-muted/-active leiten sich aus :root aus --sidebar-ink ab und ziehen automatisch mit. */ --danger: #ff7a70; --danger-soft: #2b1512; --warning: #f0a850; --warning-soft: #2a1e0c; --success: #45d18d; --success-soft: #10261b; /* Die Marke als Text auf dunklem Grund: aufgehellt, aber im Farbton erhalten. Ersetzt das früher hier fest verdrahtete #8ab4ff, das jede Vereinsfarbe verschluckt hat. */ --primary-ink: #7295d3; } :root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color: var(--ink); } html { transition: background-color .2s ease, color .2s ease; } /* Umschalt-Button (Topbar-Variante + schwebende Variante für öffentliche/Login-Seiten) */ .theme-toggle { font: inherit; font-size: .85rem; line-height: 1; cursor: pointer; white-space: nowrap; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .75rem; } .theme-toggle:hover { border-color: var(--muted); } .theme-toggle-float { position: fixed; top: 1rem; right: 1rem; z-index: 50; box-shadow: 0 1px 3px rgba(0,0,0,.18); } * { box-sizing: border-box; } html, body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg-soft); font-size: 15px; line-height: 1.5; } a { color: var(--primary-ink); } h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); } /* ---------- Auth / Public zentriert ---------- */ .centered { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; } /* Mit Fußzeile darf der Inhalt nicht mehr die volle Höhe beanspruchen, sonst steht die Fußzeile immer unterhalb des Sichtbereichs. Der Abzug entspricht ihrer typischen Höhe. */ .centered-with-footer { min-height: calc(100vh - 9rem); } /* ---------- Öffentliche Fußzeile ---------- */ .public-footer { max-width: 640px; margin: 0 auto; padding: 1.5rem 2rem 2.5rem; /* Ausrichtung kommt aus der Modifier-Klasse (--links/--mitte/--rechts), damit sie im Backend einstellbar ist. Hier bewusst kein text-align, sonst gäbe es zwei konkurrierende Quellen. */ color: var(--muted); font-size: .82rem; line-height: 1.6; } .public-footer-row + .public-footer-row { margin-top: .35rem; } .public-footer--links { text-align: left; } .public-footer--mitte { text-align: center; } .public-footer--rechts { text-align: right; } .public-footer a { color: var(--muted); text-decoration: underline; } .public-footer a:hover { color: var(--ink); } /* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */ .card-legal { max-width: 720px; text-align: left; } .legal-body { font-size: .95rem; line-height: 1.65; } .legal-body h2 { font-size: 1.1rem; margin: 1.4rem 0 .4rem; } .legal-body h3 { font-size: 1rem; margin: 1.1rem 0 .3rem; } .legal-body p, .legal-body ul, .legal-body ol { margin: .5rem 0; } .legal-body ul, .legal-body ol { padding-left: 1.3rem; } .legal-body a { color: var(--primary-ink); } .legal-back { margin: 1.6rem 0 0; font-size: .9rem; } .reg-legal-hint { margin: .5rem 0 0; font-size: .85rem; color: var(--muted); } .card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; width: 100%; max-width: 380px; box-shadow: 0 1px 2px rgba(0,0,0,.04); } .card h1 { margin: 0 0 .25rem; font-size: 1.6rem; } .card .sub { color: var(--muted); margin: 0 0 1.5rem; font-size: .9rem; } label { display: block; font-size: .82rem; color: var(--muted); margin: 0 0 .3rem; } input[type=text], input[type=password], input[type=email], input[type=tel], select, textarea { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 16px; /* verhindert iOS-Auto-Zoom beim Fokus */ min-height: 44px; /* Touch-Target */ background: var(--bg); margin-bottom: var(--space-4); } textarea { min-height: 5rem; } .card-narrow { max-width: 520px; text-align: center; } input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--primary-ink) 30%, transparent); border-color: var(--primary-ink); } .btn { display: inline-block; /* Markenfläche. --on-primary ist die dazu berechnete lesbare Schrift: weiß auf dunklen Marken, dunkel auf hellen. Vorher stand hier --ink mit festem #fff — die eingestellte Vereinsfarbe hatte damit auf Buttons überhaupt keine Wirkung. */ background: var(--primary); color: var(--on-primary); border: none; border-radius: 8px; padding: .6rem 1.1rem; font: inherit; cursor: pointer; text-decoration: none; transition: opacity .15s ease, border-color .15s ease; } .btn:hover { opacity: .92; } /* Sehr dunkle Vereinsfarben verschwinden auf dunklem Grund sonst als Fläche. Der Rand nutzt die Schriftfarbe des Buttons und ist damit bei jeder Marke sichtbar, ohne ein weiteres Token. */ :root[data-theme="dark"] .btn { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-primary) 25%, transparent); } .btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary-ink) 45%, transparent); outline-offset: 2px; } .btn-block { width: 100%; } /* ---------- Flash ---------- */ .flash { border-radius: 8px; padding: .65rem .85rem; margin-bottom: 1rem; font-size: .9rem; } .flash-error { background: var(--danger-soft); color: var(--danger); } .flash-success { background: var(--success-soft); color: var(--success); } .flash-warning { background: var(--warning-soft); color: var(--warning); } /* ---------- Admin-Layout ---------- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: 230px; background: var(--sidebar); color: var(--sidebar-muted); padding: 1.4rem 0; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar .brand { padding: 0 1.4rem 1.2rem; } .sidebar .brand strong { display: block; color: var(--sidebar-ink); font-family: var(--serif); font-size: 1.25rem; } .sidebar .brand span { display: block; font-size: .72rem; color: var(--sidebar-muted); margin-top: .15rem; } .sidebar .group { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--sidebar-ink) 38%, var(--sidebar)); padding: 1rem 1.4rem .35rem; } .sidebar nav a { display: flex; justify-content: space-between; align-items: center; padding: .5rem 1.4rem; color: var(--sidebar-muted); text-decoration: none; font-size: .9rem; } .sidebar nav a:hover { color: color-mix(in srgb, var(--sidebar-ink) 85%, var(--sidebar)); } .sidebar nav a.active { color: var(--sidebar-active); background: color-mix(in srgb, var(--sidebar-ink) 8%, transparent); } .sidebar nav a .badge { background: color-mix(in srgb, var(--sidebar-ink) 14%, transparent); color: color-mix(in srgb, var(--sidebar-ink) 87%, var(--sidebar)); border-radius: 20px; font-size: .7rem; padding: 0 .5rem; } .main { flex: 1; min-width: 0; } .topbar { padding: 1.6rem 2rem .4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .topbar-title { display: flex; align-items: center; gap: .7rem; min-width: 0; } .topbar-right { display: flex; align-items: center; gap: .6rem; } .topbar h1 { margin: 0; font-size: 1.7rem; font-weight: 400; } .content { padding: 1rem 2rem 3rem; } /* KPI-Kacheln */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .kpi { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; } .kpi .num { font-size: 2rem; font-family: var(--serif); } .kpi .label { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; } .kpi .note { font-size: .78rem; color: var(--muted); margin-top: .35rem; } .kpi.alert { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-soft); } .kpi.alert .num { color: var(--danger); } .panel { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 1.25rem; } .panel h2 { margin: 0 0 .8rem; font-size: 1.1rem; } .empty { color: var(--muted); font-size: .9rem; } .logout-form { display: inline; } .logout-form button { background: none; border: none; color: var(--sidebar-muted); cursor: pointer; font: inherit; padding: 0; } .logout-form button:hover { color: #d7d7db; } /* ---------- Öffentliches Anmeldeformular ---------- */ .reg-wrap { max-width: 720px; margin: 2.5rem auto; padding: 0 1.2rem 4rem; } .reg-head { margin-bottom: 1.5rem; } .reg-club { font-family: var(--serif); font-weight: 500; color: var(--ink); margin-bottom: 1rem; } .reg-head h1 { font-size: 1.9rem; font-weight: 400; margin: 0 0 .6rem; } .reg-intro { color: var(--muted); margin: 0 0 .8rem; } .reg-note { background: var(--bg-soft); border-left: 3px solid var(--primary-ink); padding: .6rem .9rem; border-radius: 6px; font-size: .9rem; color: var(--ink); } .reg-section { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin-bottom: 1.1rem; } .reg-section h2 { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; margin: 0 0 1rem; } .reg-num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; background: var(--ink); color: #fff; border-radius: 50%; font-family: var(--sans); font-size: .85rem; } .reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } @media (max-width: 520px) { .reg-grid { grid-template-columns: 1fr; } } .reg-hint { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; } .reg-check { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; color: var(--ink); margin-top: .5rem; } .reg-check input { width: auto; margin: .2rem 0 0; } .field-error { color: var(--danger); font-size: .8rem; margin: -.6rem 0 1rem; } .reg-wish { margin-bottom: 1.3rem; } .reg-wish-label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; } .reg-day { padding: .5rem 0; border-top: 1px solid var(--line); } .reg-day:first-of-type { border-top: none; } .reg-day-name { font-weight: 600; font-size: .9rem; margin-bottom: .4rem; } .reg-slots { display: flex; flex-wrap: wrap; gap: .5rem; } .reg-slot { display: inline-flex; align-items: center; gap: var(--space-2); border: 1px solid var(--line); border-radius: 8px; padding: var(--space-2) var(--space-3); min-height: 44px; font-size: .9rem; cursor: pointer; } .reg-slot input { width: auto; min-height: 0; margin: 0; } .reg-slot:has(input:checked) { border-color: var(--primary-ink); background: color-mix(in srgb, var(--primary) 8%, transparent); } .reg-slot:focus-within { outline: 2px solid color-mix(in srgb, var(--primary-ink) 30%, transparent); } .reg-slot.is-disabled { opacity: .4; background: var(--bg-soft); cursor: not-allowed; } .reg-slot.is-disabled span { text-decoration: line-through; } .reg-slot input:disabled { cursor: not-allowed; } .reg-slot.is-full { opacity: .6; background: var(--bg-soft); cursor: not-allowed; } .reg-slot.is-full input { cursor: not-allowed; } .reg-slot-full { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--danger); background: var(--danger-soft); border-radius: 999px; padding: .05rem .45rem; margin-left: .15rem; } .reg-slot-load { font-size: .78rem; color: var(--muted); margin-left: .15rem; } /* Ampel-Auslastung: --load-hue kommt inline pro Slot (120=grün … 0=rot, in 10 %-Stufen). */ .reg-slot.has-load { box-shadow: inset 4px 0 0 hsl(var(--load-hue) 68% 45%); } .reg-slot.has-load .reg-slot-load { color: hsl(var(--load-hue) 55% 38%); font-weight: 600; } :root[data-theme="dark"] .reg-slot.has-load { box-shadow: inset 4px 0 0 hsl(var(--load-hue) 60% 55%); } :root[data-theme="dark"] .reg-slot.has-load .reg-slot-load { color: hsl(var(--load-hue) 70% 68%); } .reg-fieldset { border: none; margin: 0 0 var(--space-5); padding: 0; } .reg-required-hint { color: var(--muted); font-size: .8rem; margin: 0 0 var(--space-4); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Tabellen (Admin) ---------- */ .table-wrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: .88rem; } table.data th, table.data td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; } table.data th { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; } table.data tr:hover td { background: var(--bg-soft); } .badge-pill { display: inline-block; border-radius: 20px; padding: .1rem .55rem; font-size: .72rem; } .badge-ok { background: var(--success-soft); color: var(--success); } .badge-wait { background: var(--warning-soft); color: var(--warning); } .badge-neutral { background: var(--bg-soft); color: var(--muted); } /* ---------- Live-Slot-Vorschläge (Phase 3) ---------- */ /* kleinere / sekundäre Button-Varianten (ergänzen .btn) */ .btn-sm { padding: .45rem .8rem; font-size: .85rem; min-height: 44px; } .btn-outline { background: var(--bg); color: var(--ink); border: 1px solid var(--line); } .btn-outline:hover { border-color: var(--primary-ink); opacity: 1; } .btn-outline.is-active, .btn-sm.is-active { background: color-mix(in srgb, var(--primary) 12%, var(--bg)); border-color: var(--primary-ink); color: var(--primary-ink); } .btn:disabled, .btn-sm:disabled { opacity: .4; cursor: not-allowed; } .reg-suggest { border-color: color-mix(in srgb, var(--primary-ink) 30%, var(--line)); } .reg-suggest h2 { color: var(--primary-ink); } .reg-suggest-icon { color: var(--primary-ink); flex: none; } .reg-suggest-lead { margin-top: -.4rem; } .reg-suggest-status { font-size: .9rem; color: var(--muted); } .reg-suggest-status:empty { display: none; } .reg-suggest-status.is-loading { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); } .reg-suggest-status.is-error { color: var(--danger); } .reg-suggest-status.is-empty { color: var(--muted); } .reg-suggest-status.is-picked { color: var(--success); font-weight: 600; } .reg-suggest-status.is-summary { color: var(--ink); font-weight: 600; } .reg-suggest-spin { width: 1rem; height: 1rem; border: 2px solid color-mix(in srgb, var(--primary-ink) 30%, var(--line)); border-top-color: var(--primary-ink); border-radius: 50%; animation: reg-spin .7s linear infinite; } @keyframes reg-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .reg-suggest-spin { animation: none; } } .reg-suggest-list { display: grid; gap: var(--space-3); } .reg-suggest-list:not(:empty) { margin-top: var(--space-3); } /* Karte = klickbarer Button (single: 1 Klick fertig; dual: 1./2. Klick Haupt/Ausweich) */ .reg-sug-card { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--bg-soft); transition: border-color .15s ease, background .15s ease; } .reg-sug-card:hover { border-color: color-mix(in srgb, var(--primary-ink) 40%, var(--line)); } .reg-sug-card:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary-ink) 45%, transparent); outline-offset: 2px; } .reg-sug-card.is-main { border-color: var(--primary-ink); background: color-mix(in srgb, var(--primary) 8%, var(--bg)); } .reg-sug-card.is-alt { border-color: color-mix(in srgb, var(--primary-ink) 45%, var(--line)); background: color-mix(in srgb, var(--primary) 4%, var(--bg)); } .reg-sug-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; } .reg-sug-when { font-weight: 600; color: var(--ink); } .reg-sug-tags { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .reg-sug-badge { display: inline-block; border-radius: 20px; padding: .12rem .6rem; font-size: .72rem; font-weight: 600; } .reg-sug-badge--sehr_gut { background: var(--success-soft); color: var(--success); } .reg-sug-badge--gut { background: color-mix(in srgb, var(--primary) 10%, var(--bg)); color: var(--primary-ink); } .reg-sug-role { display: inline-block; border-radius: 20px; padding: .12rem .6rem; font-size: .72rem; font-weight: 600; background: color-mix(in srgb, var(--primary) 12%, var(--bg)); color: var(--primary-ink); } .reg-sug-load { display: inline-block; font-size: .72rem; font-weight: 600; color: hsl(var(--load-hue, 0) 55% 38%); } :root[data-theme="dark"] .reg-sug-load { color: hsl(var(--load-hue, 0) 70% 68%); } .reg-sug-meta { display: block; color: color-mix(in srgb, var(--muted) 70%, var(--ink)); font-size: .85rem; margin-top: var(--space-1); } /* single-Modus: grüne Bestätigung "Termin gewählt" */ .reg-sug-chosen { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-3); border: 1px solid color-mix(in srgb, var(--success) 40%, var(--line)); background: var(--success-soft); border-radius: var(--radius); padding: var(--space-4); } .reg-sug-chosen-check { flex: none; width: 1.8rem; height: 1.8rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--success); color: #fff; font-weight: 700; } .reg-sug-chosen-body { flex: 1 1 12rem; } .reg-sug-chosen-title { font-weight: 700; color: var(--ink); margin-bottom: var(--space-1); } .reg-sug-chosen-line { color: var(--ink); font-weight: 600; font-size: .9rem; } .reg-sug-chosen-text { color: color-mix(in srgb, var(--ink) 75%, var(--muted)); font-size: .88rem; margin-top: var(--space-1); } .reg-sug-chosen-reset { flex: none; } .reg-suggest-manual { align-self: start; justify-self: start; } /* ---------- Benutzerverwaltung (mp-users) ---------- */ /* Rollen-Farben: feste Mitteltöne, kontrastsicher mit weißer Schrift in Light UND Dark. */ .role-admin { --role-color: #1F3864; } .role-finalisierer { --role-color: #2f6f3e; } .role-optimierer { --role-color: #b0631a; } .role-bearbeiter { --role-color: #3a5a86; } .role-leser { --role-color: #6b7280; } .role-fahrer { --role-color: #2a7d74; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .mp-users-lead { color: var(--muted); font-size: .92rem; max-width: 72ch; margin: 0 0 1.1rem; } .mp-users-lead a { white-space: nowrap; } .mp-users-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.1rem; align-items: start; } .mp-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } /* Toolbar: Suche + Filter-Chips */ .mp-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; padding: .8rem .9rem; border-bottom: 1px solid var(--line); } .mp-search { flex: 1 1 220px; display: flex; align-items: center; gap: .45rem; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; padding: 0 .6rem; margin: 0; } .mp-search span { color: var(--muted); font-size: 1rem; } .mp-search input { border: none; background: transparent; min-height: 38px; margin: 0; padding: 0; flex: 1; font-size: .9rem; } .mp-search input:focus { outline: none; } .mp-chips { display: flex; flex-wrap: wrap; gap: .35rem; } .mp-chip { font: inherit; font-size: .78rem; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--muted); cursor: pointer; } .mp-chip:hover { border-color: var(--muted); } .mp-chip.active { border-color: var(--primary-ink); color: var(--primary-ink); background: color-mix(in srgb, var(--primary) 8%, var(--bg)); } /* Liste */ table.mp-users-table th, table.mp-users-table td { padding-left: .45rem; padding-right: .45rem; } .mp-users-table td { vertical-align: middle; } .mp-row { cursor: pointer; } .mp-row.selected td { background: color-mix(in srgb, var(--primary) 7%, var(--bg)); } .mp-row.selected td:first-child { box-shadow: inset 3px 0 0 var(--primary-ink); } .mp-user-cell { display: flex; align-items: center; gap: .6rem; } .mp-user-text { display: flex; flex-direction: column; min-width: 0; } .mp-user-name { font-weight: 600; color: var(--ink); text-decoration: none; } .mp-user-name:hover { text-decoration: underline; } .mp-user-sub { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; } .mp-login { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem; color: var(--muted); text-align: right; white-space: nowrap; } /* Avatar + Rollen-Badge + Status */ .mp-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--role-color, var(--muted)); color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .02em; } .mp-avatar-lg { width: 46px; height: 46px; font-size: 1rem; } .mp-rolebadge { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: .15rem .5rem .15rem .45rem; border-radius: 20px; background: var(--bg-soft); color: var(--ink); border: 1px solid var(--line); } .mp-rolebadge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--role-color, var(--muted)); } .mp-status { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .85rem; } .mp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .mp-dot.ok { background: var(--success); } .mp-dot.off { background: var(--muted); opacity: .55; } .mp-dot.locked { background: var(--danger); } /* Detail-Panel */ .mp-detail { padding: 1.2rem 1.3rem; position: sticky; top: 1rem; } .mp-detail-head { display: flex; align-items: center; gap: .8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: .4rem; } .mp-detail-name { font-family: var(--serif); font-size: 1.3rem; line-height: 1.1; display: flex; align-items: center; gap: .5rem; } .mp-you { font-size: .62rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--primary-ink); border: 1px solid var(--primary-ink); border-radius: 3px; padding: .05rem .3rem; } .mp-detail-sub { margin-top: .4rem; } .mp-fields { display: flex; flex-direction: column; } .mp-field { display: grid; grid-template-columns: 96px 1fr; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; } .mp-field:last-child { border-bottom: none; } .mp-field-k { font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding-top: .15rem; } .mp-field-v { color: var(--ink); word-break: break-word; } /* Aktionen im Panel (native
= kein JS nötig) */ .mp-detail-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; } .mp-disc { width: 100%; } .mp-disc > summary { list-style: none; cursor: pointer; } .mp-disc > summary::-webkit-details-marker { display: none; } .mp-disc[open] > summary { margin-bottom: .6rem; } .mp-editform { display: flex; flex-direction: column; gap: .6rem; padding: .2rem 0; } .mp-lbl { display: flex; flex-direction: column; gap: .25rem; font-size: .75rem; color: var(--muted); letter-spacing: .02em; text-transform: uppercase; } .mp-lbl input, .mp-lbl select { margin-bottom: 0; text-transform: none; } .mp-check { display: flex; align-items: flex-start; gap: .45rem; font-size: .85rem; color: var(--ink); } .mp-check input { width: auto; min-height: 0; margin: .15rem 0 0; } .mp-hint { font-size: .78rem; color: var(--muted); margin: 0; } .mp-inline { margin: 0; } .mp-btn-danger { background: var(--bg); color: var(--danger); border: 1px solid var(--danger); } .mp-btn-danger:hover { background: var(--danger-soft); opacity: 1; } /* Anlege-Formular */ .mp-user-new { padding: 1.3rem 1.4rem; margin-top: 1.25rem; } .mp-new-head { margin-bottom: 1rem; } .mp-new-title { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 .25rem; } .mp-new-desc { color: var(--muted); font-size: .88rem; margin: 0; } .mp-new-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1.2rem; margin-bottom: 1rem; } .mp-opt { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; } .mp-role-picker { border: none; padding: 0; margin: 0 0 1rem; } .mp-lbl-legend { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: .5rem; } .mp-role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; } .mp-role-option { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-soft); cursor: pointer; } .mp-role-option:hover { background: var(--bg); } .mp-role-option input { position: absolute; opacity: 0; pointer-events: none; } .mp-role-option:has(input:checked) { background: var(--bg); border-color: var(--role-color, var(--primary-ink)); box-shadow: inset 0 0 0 1px var(--role-color, var(--primary-ink)); } .mp-role-option:has(input:focus-visible) { outline: 2px solid color-mix(in srgb, var(--primary-ink) 45%, transparent); outline-offset: 2px; } .mp-role-name { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem; } .mp-role-name::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--role-color, var(--muted)); } .mp-role-desc { font-size: .75rem; color: var(--muted); line-height: 1.35; } .mp-newform-actions { display: flex; justify-content: flex-end; } /* ---------- Menü-Knopf (nur schmale Schirme) ---------- */ .nav-toggle { display: none; /* ab 901 px unsichtbar, s. u. */ font: inherit; font-size: 1.25rem; line-height: 1; background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); cursor: pointer; width: 44px; height: 44px; /* Touch-Ziel */ flex: none; } .nav-toggle:hover { border-color: var(--muted); } .nav-backdrop { display: none; } @media (max-width: 900px) { .mp-users-grid { grid-template-columns: 1fr; } .mp-detail { position: static; } .mp-new-fields { grid-template-columns: 1fr; } .mp-role-grid { grid-template-columns: 1fr 1fr; } /* Seitenleiste raus aus dem Fluss: sie war mit festen 230 px auf einem 390-px-Schirm knapp 60 % der Breite, und die ganze Seite scrollte waagerecht. */ .layout { display: block; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; height: 100dvh; width: min(82vw, 280px); transform: translateX(-100%); transition: transform .22s ease; box-shadow: 2px 0 12px rgba(0,0,0,.28); } body.nav-open .sidebar { transform: translateX(0); } .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.45); } .nav-backdrop[hidden] { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } .main { width: 100%; min-width: 0; } /* Umbrechen statt quetschen: sonst stand die Überschrift bei zusätzlichen Aktionsknöpfen mitten im Wort getrennt da („Marsc/hplan"). */ .topbar { padding: 1rem 1rem .3rem; flex-wrap: wrap; row-gap: .6rem; } .topbar-title { flex: 1 1 100%; } .topbar h1 { font-size: 1.35rem; overflow-wrap: break-word; } .topbar-right { flex-wrap: wrap; } .content { padding: .8rem 1rem 2.5rem; } } /* Ohne Bewegungswunsch gleitet nichts – die Leiste erscheint dann direkt. */ @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } } /* ---------- Berechtigungen-Referenzmatrix ---------- */ .mp-perm-note { display: flex; gap: .8rem; align-items: flex-start; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: 1.1rem; } .mp-perm-note .i { flex: none; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, var(--bg)); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; } .mp-perm-note p { margin: 0; color: var(--muted); font-size: .9rem; } .mp-perm-note strong { color: var(--ink); font-weight: 600; } table.mp-matrix { width: 100%; border-collapse: collapse; font-size: .9rem; } table.mp-matrix th, table.mp-matrix td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); text-align: center; } table.mp-matrix thead th { background: var(--bg-soft); font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } table.mp-matrix th:first-child, table.mp-matrix td:first-child { text-align: left; } .mp-matrix-role { display: inline-flex; flex-direction: column; align-items: center; gap: .3rem; } .mp-matrix-role .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--role-color, var(--muted)); } .mp-cap-name { font-weight: 600; color: var(--ink); } .mp-cap-desc { font-size: .78rem; color: var(--muted); } .mp-yes { color: var(--success); font-weight: 700; } .mp-no { color: var(--muted); opacity: .5; } table.mp-matrix tbody tr:hover td { background: var(--bg-soft); } /* ---------- Fahrer-Zuordnung: Tages-Karten (touren) ---------- */ .mp-tour-summary { color: var(--muted); font-size: .9rem; margin: 0 0 1rem; } .mp-tour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .mp-tour-card { display: flex; flex-direction: column; } .mp-tour-card .hd { padding: .9rem 1rem; border-bottom: 1px solid var(--line); } .mp-tour-day { font-family: var(--serif); font-size: 1.15rem; margin: 0; } .mp-tour-meta { color: var(--muted); font-size: .8rem; margin-top: .2rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .mp-tour-body { padding: .8rem 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; } .mp-driver { display: flex; align-items: center; gap: .55rem; padding: .4rem 0; border-bottom: 1px solid var(--line); } .mp-driver:last-of-type { border-bottom: none; } .mp-driver-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .mp-driver-name { font-weight: 600; font-size: .88rem; } .mp-driver-state { font-size: .74rem; display: inline-flex; align-items: center; gap: .3rem; } .mp-driver-state.ok { color: var(--success); } .mp-driver-state.wait { color: var(--warning); } .mp-driver-remove { background: none; border: none; cursor: pointer; color: var(--muted); font-weight: 700; font-size: 1rem; line-height: 1; padding: 0 .2rem; } .mp-driver-remove:hover { color: var(--danger); } .mp-tour-assign { padding: .7rem 1rem; border-top: 1px solid var(--line); display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; } .mp-tour-empty { color: var(--muted); font-size: .85rem; }