/* ============================================================================ WAIDBLICK — Design-System Dunkel & edel: Waldnacht-Flächen, Gold als Akzent, Fraunces für Titel, Inter für die Oberfläche. Helles Schema in derselben Optik (Creme/Gold). Aufbau: 1. Schriften 6. Formulare 11. Tabellen 2. Design-Tokens 7. Meldungen & Laden 12. Dialoge 3. Basis 8. Karten & Panels 13. Login/Auth-Seiten 4. Icons 9. Badges & Chips 14. Hilfsklassen 5. Buttons 10. Tabs 15. App-Shell (nav.js) ============================================================================ */ /* ── 1. Schriften (lokal gehostet, OFL — siehe /fonts/LICENSE-*.txt) ─────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/fraunces.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/fraunces-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── 2. Design-Tokens ────────────────────────────────────────────────────── Dunkel ist Standard. Hell gilt bei data-theme="light" oder — ohne eigene Wahl — wenn das System hell eingestellt ist (siehe /js/theme.js). */ :root { color-scheme: dark; --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; /* Flächen */ --bg: #0d1310; --surface: #141c18; --surface-2: #1a241f; --surface-3: #212d27; --overlay: rgba(4, 8, 6, 0.66); /* Linien */ --border: rgba(222, 205, 160, 0.09); --border-strong: rgba(222, 205, 160, 0.17); /* Text */ --text: #ece6d8; --text-muted: #a9a796; --text-subtle: #7b7f74; /* Akzente */ --accent: #c9a75a; /* Gold — Flächen, Rahmen, Icons */ --accent-hover: #d8b96f; --accent-text: #d9bb72; /* Gold als Schriftfarbe */ --accent-contrast: #17130a; /* Text auf Gold */ --accent-soft: rgba(201, 167, 90, 0.13); --accent-ring: rgba(201, 167, 90, 0.35); --green: #7fa883; --green-soft: rgba(127, 168, 131, 0.14); /* Status */ --danger: #e4806f; --danger-soft: rgba(228, 128, 111, 0.12); --success: #82c08d; --success-soft: rgba(130, 192, 141, 0.12); --warning: #e2b65e; --warning-soft: rgba(226, 182, 94, 0.13); --info: #86afcc; --info-soft: rgba(134, 175, 204, 0.13); /* Navigation (in beiden Schemata dunkel) */ --nav-bg: #0a0f0c; --nav-surface: #141c18; --nav-border: rgba(222, 205, 160, 0.08); --nav-text: #d9d3c4; --nav-text-muted: #8d907f; --nav-active-bg: rgba(201, 167, 90, 0.12); --nav-active-text: #e2c47c; /* Form */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --schatten-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --schatten-md: 0 8px 24px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3); --schatten-lg: 0 24px 64px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35); --uebergang: all 0.18s ease; --sidebar-w: 264px; --topbar-h: 56px; --bottomnav-h: 64px; /* Kompatibilität: alte Variablennamen aus Seiten-Styles und Skripten */ --farbe-wald: var(--text); --farbe-moos: var(--green); --farbe-farn: var(--green); --farbe-hell: var(--green); --farbe-gold: var(--accent); --farbe-gold-hell: var(--accent-hover); --farbe-erde: var(--accent-text); --farbe-beige: var(--surface-2); --farbe-creme: var(--surface); --farbe-text: var(--text); --farbe-text-hell: var(--text-muted); --farbe-grenze: var(--border-strong); --farbe-fehler: var(--danger); --farbe-erfolg: var(--success); } /* Helles Schema — als Mixin zweimal: explizit gewählt oder Systemvorgabe */ :root[data-theme="light"] { color-scheme: light; --bg: #f4efe5; --surface: #fffcf6; --surface-2: #f2ecdf; --surface-3: #e9e1d0; --overlay: rgba(20, 26, 22, 0.45); --border: rgba(70, 58, 30, 0.11); --border-strong: rgba(70, 58, 30, 0.2); --text: #1b211d; --text-muted: #5b6157; --text-subtle: #858a80; --accent: #b48d3c; --accent-hover: #9f7a2c; --accent-text: #85631c; --accent-contrast: #17130a; --accent-soft: rgba(180, 141, 60, 0.13); --accent-ring: rgba(180, 141, 60, 0.35); --green: #2f6b45; --green-soft: rgba(47, 107, 69, 0.1); --danger: #b7412f; --danger-soft: rgba(183, 65, 47, 0.09); --success: #2c7a45; --success-soft: rgba(44, 122, 69, 0.1); --warning: #95650f; --warning-soft: rgba(196, 140, 30, 0.13); --info: #2f6a92; --info-soft: rgba(47, 106, 146, 0.1); --nav-bg: #16211b; --nav-surface: #1e2b24; --nav-border: rgba(255, 255, 255, 0.07); --nav-text: #e7e1d2; --nav-text-muted: #9fa595; --nav-active-bg: rgba(214, 181, 106, 0.16); --nav-active-text: #e5c77f; --schatten-sm: 0 1px 2px rgba(40, 32, 15, 0.08); --schatten-md: 0 8px 24px rgba(40, 32, 15, 0.1), 0 1px 2px rgba(40, 32, 15, 0.06); --schatten-lg: 0 24px 64px rgba(25, 30, 20, 0.22), 0 2px 6px rgba(25, 30, 20, 0.08); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #f4efe5; --surface: #fffcf6; --surface-2: #f2ecdf; --surface-3: #e9e1d0; --overlay: rgba(20, 26, 22, 0.45); --border: rgba(70, 58, 30, 0.11); --border-strong: rgba(70, 58, 30, 0.2); --text: #1b211d; --text-muted: #5b6157; --text-subtle: #858a80; --accent: #b48d3c; --accent-hover: #9f7a2c; --accent-text: #85631c; --accent-contrast: #17130a; --accent-soft: rgba(180, 141, 60, 0.13); --accent-ring: rgba(180, 141, 60, 0.35); --green: #2f6b45; --green-soft: rgba(47, 107, 69, 0.1); --danger: #b7412f; --danger-soft: rgba(183, 65, 47, 0.09); --success: #2c7a45; --success-soft: rgba(44, 122, 69, 0.1); --warning: #95650f; --warning-soft: rgba(196, 140, 30, 0.13); --info: #2f6a92; --info-soft: rgba(47, 106, 146, 0.1); --nav-bg: #16211b; --nav-surface: #1e2b24; --nav-border: rgba(255, 255, 255, 0.07); --nav-text: #e7e1d2; --nav-text-muted: #9fa595; --nav-active-bg: rgba(214, 181, 106, 0.16); --nav-active-text: #e5c77f; --schatten-sm: 0 1px 2px rgba(40, 32, 15, 0.08); --schatten-md: 0 8px 24px rgba(40, 32, 15, 0.1), 0 1px 2px rgba(40, 32, 15, 0.06); --schatten-lg: 0 24px 64px rgba(25, 30, 20, 0.22), 0 2px 6px rgba(25, 30, 20, 0.08); } } /* ── 3. Basis ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.55; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 560; line-height: 1.2; letter-spacing: -0.01em; color: var(--text); font-variation-settings: 'opsz' 48, 'SOFT' 30; } h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem); } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--accent-hover); } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--accent-ring); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } hr { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; } @keyframes einblenden { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes drehen { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── 4. Icons ───────────────────────────────────────────────────────────── oder icon('NAME') */ .icon { width: 1.15em; height: 1.15em; flex-shrink: 0; stroke-width: 1.75; vertical-align: -0.2em; } .icon-sm { width: 0.95em; height: 0.95em; } .icon-lg { width: 1.5em; height: 1.5em; } .icon-xl { width: 2.25em; height: 2.25em; stroke-width: 1.5; } /* ── 5. Buttons ───────────────────────────────────────────────────────── */ .btn, .submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 38px; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 0.875rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: var(--uebergang); background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .btn:hover { background: var(--surface-3); color: var(--text); } .btn:active, .submit-btn:active { transform: translateY(1px); } .btn:disabled, .submit-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; } .btn-primary, .submit-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .btn-primary:hover, .submit-btn:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); } .btn-ghost, .btn-secondary { background: transparent; border-color: var(--border-strong); color: var(--text-muted); } .btn-ghost:hover, .btn-secondary:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } .btn-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); } .btn-danger:hover { background: var(--danger); color: #fff; } .btn-sm { min-height: 30px; padding: 0.3rem 0.65rem; font-size: 0.8rem; border-radius: 7px; } .btn-lg { min-height: 46px; padding: 0.7rem 1.4rem; font-size: 0.95rem; } .btn-icon { padding: 0; width: 38px; } .btn-icon.btn-sm { width: 30px; } .btn-block, .submit-btn { width: 100%; } .submit-btn { min-height: 46px; margin-top: 0.5rem; font-size: 0.95rem; } /* ── 6. Formulare ─────────────────────────────────────────────────────── */ .formular { display: none; } .formular.aktiv { display: block; animation: einblenden 0.25s ease both; } .formular-zeile, .formular-zeile-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; } .formular-zeile-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; } .formular-gruppe { margin-bottom: 1.1rem; } .formular-gruppe > label, .feld-label { display: block; margin-bottom: 0.4rem; font-size: 0.8rem; font-weight: 550; color: var(--text-muted); letter-spacing: 0.01em; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"], input[type="search"], input[type="url"], select, textarea { width: 100%; min-height: 42px; padding: 0.55rem 0.8rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-family: var(--font-ui); font-size: 0.9375rem; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } input::placeholder, textarea::placeholder { color: var(--text-subtle); } input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong)); } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); } input:disabled, select:disabled, textarea:disabled { opacity: 0.6; cursor: not-allowed; } textarea { min-height: 88px; resize: vertical; line-height: 1.5; } select { appearance: none; padding-right: 2.2rem; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 1rem; height: 1rem; } /* Datum/Uhrzeit: Safari (v.a. iOS) gibt diesen Feldern eine eigene Mindestbreite und mehr Höhe — sie ragen dann in die Nachbarspalte bzw. stehen versetzt. Ohne native Optik halten sie sich an Spaltenbreite und Feldhöhe; die Auswahl (Kalender/Uhr) öffnet sich beim Antippen weiterhin. */ input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; height: 42px; line-height: normal; } input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { margin: 0; text-align: left; } input[type="date"]::-webkit-datetime-edit, input[type="time"]::-webkit-datetime-edit, input[type="date"]::-webkit-datetime-edit-fields-wrapper, input[type="time"]::-webkit-datetime-edit-fields-wrapper { padding: 0; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { opacity: 0.6; cursor: pointer; } :root:not([data-theme="light"]) input[type="date"]::-webkit-calendar-picker-indicator, :root:not([data-theme="light"]) input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.85); } @media (prefers-color-scheme: light) { :root:not([data-theme]) input[type="date"]::-webkit-calendar-picker-indicator, :root:not([data-theme]) input[type="time"]::-webkit-calendar-picker-indicator { filter: none; } } .formular-hinweis, .feld-hinweis { font-size: 0.8rem; color: var(--text-subtle); margin-top: 0.35rem; } .checkbox-zeile { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; cursor: pointer; } /* ── 7. Meldungen & Laden ─────────────────────────────────────────────── */ .meldung { display: none; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.9rem; margin-bottom: 1.1rem; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 0.875rem; line-height: 1.45; } .meldung.sichtbar { display: flex; animation: einblenden 0.2s ease both; } .meldung.fehler { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); } .meldung.erfolg { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); } .meldung.info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); color: var(--info); } .meldung.warnung { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning); } .ladeindikator { display: none; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.5rem; margin-bottom: 0.5rem; color: var(--text-muted); font-size: 0.875rem; } .ladeindikator.aktiv { display: flex; } .spinner { width: 18px; height: 18px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: drehen 0.7s linear infinite; flex-shrink: 0; } .skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: schimmern 1.4s ease infinite; } @keyframes schimmern { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Leerer Zustand / Laden in Listen */ .leer-zustand { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 2.75rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; } .leer-zustand .icon { width: 2.5rem; height: 2.5rem; stroke-width: 1.25; color: var(--accent); opacity: 0.85; } .leer-zustand-titel { font-family: var(--font-display); font-size: 1.1rem; color: var(--text); } /* ── 8. Karten & Panels ───────────────────────────────────────────────── */ .info-panel, .karte, .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--schatten-sm); padding: 1.5rem; } .info-panel + .info-panel { margin-top: 1.25rem; } .panel-titel { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 560; color: var(--text); } .panel-titel .icon { color: var(--accent); } .panel-titel .panel-aktion, .panel-titel > a:last-child { margin-left: auto; } .panel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .panel-kopf .panel-titel { margin-bottom: 0; } /* Seitenkopf: Titel links, Aktionen rechts */ .seiten-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; } .seiten-kopf-text { min-width: 0; } .seiten-titel { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem); } .seiten-untertitel { margin-top: 0.35rem; color: var(--text-muted); font-size: 0.95rem; } .seiten-aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; } .seiten-kicker { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.45rem; color: var(--accent-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } /* Begrüßung (Dashboard) */ .begruessung { margin-bottom: 1.75rem; } .begruessung-titel { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.35rem); } .begruessung-untertitel { margin-top: 0.35rem; color: var(--text-muted); font-size: 0.95rem; } /* Kennzahlen */ .karten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; } .statistik-karte { position: relative; display: flex; flex-direction: column; gap: 0.15rem; padding: 1.15rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--schatten-sm); overflow: hidden; } .statistik-karte::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-ring), transparent); opacity: 0.8; } .karte-symbol { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 0.7rem; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font-size: 1.1rem; } .karte-wert { font-family: var(--font-display); font-size: 1.9rem; font-weight: 560; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .karte-bezeichnung { color: var(--text-muted); font-size: 0.82rem; } /* Text statt Zahl (z. B. Revier-Typ): kleiner und mit Silbentrennung statt Umbruch mitten im Wort */ .karte-wert.karte-wert-text { font-size: 1.35rem; overflow-wrap: break-word; hyphens: auto; } /* Schlüssel-Wert-Raster (Profil, Details) */ .profil-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem 1.5rem; } .profil-feld label, .detail-label { display: block; margin-bottom: 0.2rem; font-size: 0.78rem; font-weight: 500; color: var(--text-subtle); } .profil-feld span, .detail-wert { font-size: 0.95rem; color: var(--text); overflow-wrap: anywhere; } /* Liste mit Trennlinien (Mitglieder, Einladungen, Einstellungen) */ .liste { display: flex; flex-direction: column; } .liste-zeile { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 0; border-bottom: 1px solid var(--border); } .liste-zeile:last-child { border-bottom: none; } /* Avatar */ .avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--accent-soft); color: var(--accent-text); font-size: 0.8rem; font-weight: 650; letter-spacing: 0.02em; } .avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; } /* Mitglieder & Einladungen (Dashboard-Dialog, Revierverwaltung, Hegering) */ .abschnitt-label { margin-bottom: 0.6rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); } .mitglieder-liste { margin-bottom: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; } .mitglied-zeile, .einladung-zeile-offen { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; } .mitglied-zeile:last-child, .einladung-zeile-offen:last-child { border-bottom: none; } .einladung-zeile-offen > .icon { color: var(--text-subtle); } .mitglied-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--accent-soft); color: var(--accent-text); font-size: 0.75rem; font-weight: 650; } .mitglied-info { flex: 1; min-width: 0; } .mitglied-name { font-weight: 550; color: var(--text); overflow-wrap: anywhere; } .mitglied-name .selbst { color: var(--text-subtle); font-size: 0.75rem; font-weight: 400; } .mitglied-email { font-size: 0.8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mitglied-badge { flex-shrink: 0; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .badge-p { background: var(--accent-soft); color: var(--accent-text); } .badge-mp { background: var(--warning-soft); color: var(--warning); } .badge-mj { background: var(--green-soft); color: var(--green); } .leer-hinweis { padding: 1.25rem; text-align: center; color: var(--text-muted); font-size: 0.875rem; } .einladung-form { margin-top: 1rem; padding: 1.1rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); } .einladung-form-titel { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.9rem; font-weight: 600; font-size: 0.9rem; } .einladung-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; } .einladung-zeile .formular-gruppe { flex: 2; min-width: 180px; margin-bottom: 0; } .einladung-zeile .formular-gruppe:nth-child(2) { flex: 1; min-width: 140px; } .einladung-zeile > .btn { min-height: 42px; } @media (max-width: 640px) { .mitglied-zeile { flex-wrap: wrap; } .mitglied-info { flex-basis: calc(100% - 50px); } .einladung-zeile > .btn { width: 100%; } } /* ── 9. Badges & Chips ────────────────────────────────────────────────── */ .badge, .chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; background: var(--surface-3); color: var(--text-muted); border: 1px solid var(--border); } .badge-gold, .badge-paechter { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 25%, transparent); } .badge-gruen, .badge-mitjaeger { background: var(--green-soft); color: var(--green); border-color: color-mix(in srgb, var(--green) 25%, transparent); } .badge-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in srgb, var(--info) 25%, transparent); } .badge-warnung { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 25%, transparent); } .badge-gefahr { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); } .badge-erfolg { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 25%, transparent); } /* ── 10. Tabs ─────────────────────────────────────────────────────────── */ /* Segmentierte Umschalter (Login, kleine Bereiche) */ .tab-leiste { display: flex; gap: 4px; padding: 4px; margin-bottom: 1.5rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); } .tab-btn { flex: 1; padding: 0.5rem 0.9rem; border: none; border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 0.875rem; font-weight: 550; cursor: pointer; transition: var(--uebergang); } .tab-btn:hover { color: var(--text); } .tab-btn.aktiv { background: var(--surface); color: var(--text); box-shadow: var(--schatten-sm); } /* Unterstrichene Reiter (Seitenbereiche, Dialoge) */ .reiter { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .reiter::-webkit-scrollbar { display: none; } .reiter-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.7rem 0.9rem; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); font-size: 0.875rem; font-weight: 550; white-space: nowrap; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .reiter-btn:hover { color: var(--text); } .reiter-btn.aktiv { color: var(--accent-text); border-bottom-color: var(--accent); } /* ── 11. Tabellen ─────────────────────────────────────────────────────────
…
Auf dem Handy werden Zeilen zu Karten: … */ .tabelle-wrapper { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } .tabelle { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .tabelle th { padding: 0.7rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; } .tabelle td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text); } .tabelle tbody tr:last-child td { border-bottom: none; } .tabelle tbody tr { transition: background 0.12s ease; } .tabelle tbody tr:hover { background: var(--surface-2); } .tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; } .tabelle .aktionen { text-align: right; white-space: nowrap; } .tabelle .gedimmt { color: var(--text-muted); } @media (max-width: 720px) { .tabelle-responsive { border: none; background: transparent; overflow: visible; } .tabelle-responsive .tabelle thead { display: none; } .tabelle-responsive .tabelle, .tabelle-responsive .tabelle tbody, .tabelle-responsive .tabelle tr, .tabelle-responsive .tabelle td { display: block; width: 100%; } .tabelle-responsive .tabelle tr { margin-bottom: 0.75rem; padding: 0.4rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); } .tabelle-responsive .tabelle tbody tr:hover { background: var(--surface); } .tabelle-responsive .tabelle td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 1rem; border: none; text-align: right; } .tabelle-responsive .tabelle td::before { content: attr(data-label); flex-shrink: 0; color: var(--text-subtle); font-size: 0.8rem; text-align: left; } .tabelle-responsive .tabelle td[data-label=""]::before, .tabelle-responsive .tabelle td:not([data-label])::before { content: none; } .tabelle-responsive .tabelle td.aktionen { justify-content: flex-end; border-top: 1px solid var(--border); margin-top: 0.3rem; padding-top: 0.6rem; } .tabelle-responsive .tabelle td[colspan] { justify-content: center; text-align: center; } } /* ── 12. Dialoge ──────────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; background: var(--overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Nachricht des Admins (MOTD, /js/nav.js) — über allen anderen Dialogen */ #motdDialog { z-index: 1100; align-items: center; } .motd-dialog { max-width: 520px; } .motd-dialog .dialog-titel { display: flex; align-items: center; gap: 0.6rem; } .motd-symbol { display: inline-flex; flex: none; padding: 0.45rem; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-text); } .motd-datum { margin: 0 0 0.6rem; color: var(--text-subtle); font-size: 0.8rem; } .motd-text { line-height: 1.6; overflow-wrap: anywhere; } /* Aus Markdown erzeugtes HTML (markdownHtml in /js/util.js) */ .markdown > :first-child { margin-top: 0; } .markdown > :last-child { margin-bottom: 0; } .markdown p, .markdown ul, .markdown ol, .markdown blockquote { margin: 0 0 0.65rem; } .markdown ul, .markdown ol { padding-left: 1.3rem; } .markdown li + li { margin-top: 0.2rem; } .markdown h3, .markdown h4, .markdown h5 { margin: 0.9rem 0 0.4rem; font-weight: 650; line-height: 1.3; color: var(--text); } .markdown h3 { font-size: 1.05rem; } .markdown h4 { font-size: 0.98rem; } .markdown h5 { font-size: 0.9rem; } .markdown a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .markdown code { padding: 0.08rem 0.35rem; border-radius: 5px; background: var(--surface-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; } .markdown blockquote { padding-left: 0.8rem; border-left: 3px solid var(--border); color: var(--text-muted); } .markdown hr { margin: 0.9rem 0; border: 0; border-top: 1px solid var(--border); } .modal-overlay.offen, .modal-overlay.sichtbar { display: flex; animation: einblenden 0.15s ease both; } .dialog-modal, .modal { width: 100%; max-width: 640px; margin: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--schatten-lg); animation: einblenden 0.2s ease both; overflow: hidden; } .dialog-kopf, .modal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--border); } .dialog-titel, .modal-titel { font-family: var(--font-display); font-size: 1.25rem; font-weight: 560; } .dialog-schliessen, .modal-schliessen { display: grid; place-items: center; width: 34px; height: 34px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; transition: var(--uebergang); } .dialog-schliessen:hover, .modal-schliessen:hover { background: var(--surface-2); color: var(--text); } .dialog-tabs { display: flex; gap: 0.25rem; padding: 0 1.5rem; border-bottom: 1px solid var(--border); overflow-x: auto; } .dialog-tab { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.75rem 0.9rem; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--text-muted); font-size: 0.875rem; font-weight: 550; white-space: nowrap; cursor: pointer; } .dialog-tab:hover { color: var(--text); } .dialog-tab.aktiv { color: var(--accent-text); border-bottom-color: var(--accent); } .dialog-body, .modal-body { padding: 1.5rem; } .dialog-sektion { display: none; } .dialog-sektion.aktiv { display: block; animation: einblenden 0.2s ease both; } .dialog-fuss, .modal-fuss { display: flex; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--surface-2); } @media (max-width: 640px) { .modal-overlay { padding: 0; align-items: flex-end; } .dialog-modal, .modal { margin: 0; max-height: 92vh; overflow-y: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: none; } .dialog-fuss, .modal-fuss { position: sticky; bottom: 0; padding-bottom: max(1rem, env(safe-area-inset-bottom)); } .dialog-fuss .btn, .modal-fuss .btn { flex: 1; } /* Die Nachricht des Admins bleibt auch auf dem Handy mittig statt als Leiste von unten */ #motdDialog { padding: 1rem; } #motdDialog .dialog-modal { max-height: calc(100dvh - 2rem); border-radius: var(--radius-lg); border-bottom: 1px solid var(--border-strong); } #motdDialog .dialog-fuss { padding-bottom: 1rem; } } /* ── 13. Login/Auth-Seiten ───────────────────────────────────────────────── */ .auth-hintergrund { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 4.5rem 1rem 2rem; overflow: hidden; background: radial-gradient(900px 520px at 15% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), radial-gradient(700px 500px at 110% 110%, color-mix(in srgb, var(--green) 18%, transparent), transparent 70%), var(--bg); } .auth-hintergrund::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%); opacity: 0.6; } .auth-karte { position: relative; width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--schatten-lg); animation: einblenden 0.4s ease both; } .auth-karte-breit { max-width: 560px; } .auth-kopf { padding: 2.25rem 2rem 0.5rem; text-align: center; } .auth-logo { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1rem; border-radius: 16px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent-text); font-size: 1.6rem; } .auth-logo .icon { width: 30px; height: 30px; stroke-width: 1.5; } .auth-titel { font-size: 1.85rem; font-weight: 560; letter-spacing: -0.015em; } .auth-untertitel { margin-top: 0.3rem; color: var(--text-muted); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .auth-inhalt { padding: 1.5rem 2rem 2rem; } .auth-fuss { padding: 1rem 2rem; border-top: 1px solid var(--border); text-align: center; font-size: 0.85rem; color: var(--text-muted); } .auth-link { background: none; border: none; color: var(--text-muted); font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .auth-link:hover { color: var(--accent-text); } /* Zustandsansichten (Laden / Erfolg / Fehler / abgelaufen) */ .zustand { text-align: center; animation: einblenden 0.3s ease both; } .zustand-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0.25rem auto 1.1rem; border-radius: 50%; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-text); } .zustand-icon .icon { width: 34px; height: 34px; stroke-width: 1.5; } .zustand-icon.erfolg { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); } .zustand-icon.fehler { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); } .zustand-icon.warnung { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); color: var(--warning); } .zustand-icon .spinner { width: 30px; height: 30px; border-width: 3px; } .zustand-titel { font-family: var(--font-display); font-size: 1.4rem; font-weight: 560; color: var(--text); margin-bottom: 0.5rem; } .zustand-text { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; margin-bottom: 1.25rem; } /* Sprachumschalter auf öffentlichen Seiten (ohne Navigation) */ .oeffentliche-leiste, .lang-switch { position: fixed; top: 1rem; right: 1rem; z-index: 50; display: flex; gap: 0.4rem; } .lang-switch-btn, .leiste-btn { display: inline-grid; place-items: center; min-width: 36px; height: 34px; padding: 0 0.6rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(6px); color: var(--text-muted); font-size: 0.75rem; font-weight: 650; letter-spacing: 0.04em; cursor: pointer; transition: var(--uebergang); } .lang-switch-btn:hover, .leiste-btn:hover { color: var(--text); border-color: var(--accent); } .lang-switch-btn.aktiv { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } /* Nur im dunklen bzw. hellen Schema sichtbar (z.B. Mond/Sonne im Umschalter) */ .nur-hell { display: none; } :root[data-theme="light"] .nur-hell { display: inline-block; } :root[data-theme="light"] .nur-dunkel { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .nur-hell { display: inline-block; } :root:not([data-theme]) .nur-dunkel { display: none; } } /* ── 14. Hilfsklassen ─────────────────────────────────────────────────── */ .gedimmt, .text-muted { color: var(--text-muted); } .text-subtil { color: var(--text-subtle); } .text-gold { color: var(--accent-text); } .text-gefahr { color: var(--danger); } .klein { font-size: 0.82rem; } .zahl, .tabular { font-variant-numeric: tabular-nums; } .versteckt, [hidden] { display: none !important; } .nur-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .reihe { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .stapel { display: flex; flex-direction: column; gap: 1rem; } .raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .raster-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; } .abstand-oben { margin-top: 1.25rem; } .trenner { height: 1px; background: var(--border); margin: 1.25rem 0; } /* Kein Zugriff / Fehlerzustand ganzer Seiten */ .kein-zugriff { max-width: 420px; margin: 12vh auto 0; padding: 2.5rem 1.5rem; text-align: center; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .kein-zugriff-icon { display: grid; place-items: center; margin: 0 auto 1rem; color: var(--accent); font-size: 2.2rem; } .kein-zugriff-icon .icon { width: 2.5rem; height: 2.5rem; stroke-width: 1.4; } /* ── 15. App-Shell (gerendert von /js/nav.js) ──────────────────────────── */ .dashboard-layout { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); } .dashboard-inhalt { flex: 1; width: 100%; max-width: none; margin: 0 auto; padding: 2.25rem 2rem 3rem; } /* Sidebar */ .app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 300; display: flex; flex-direction: column; width: var(--sidebar-w); background: var(--nav-bg); border-right: 1px solid var(--nav-border); color: var(--nav-text); } .app-marke { display: flex; align-items: center; gap: 0.7rem; height: 64px; padding: 0 1.25rem; color: var(--nav-text); text-decoration: none; flex-shrink: 0; } .app-marke:hover { color: var(--nav-text); } .app-marke-logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(145deg, rgba(214, 181, 106, 0.24), rgba(214, 181, 106, 0.06)); border: 1px solid rgba(214, 181, 106, 0.35); color: var(--nav-active-text); } .app-marke-logo .icon { width: 20px; height: 20px; stroke-width: 1.6; } .app-marke-text { font-family: var(--font-display); font-size: 1.25rem; font-weight: 580; letter-spacing: -0.01em; } .app-nav { flex: 1; overflow-y: auto; padding: 0.5rem 0.75rem 1rem; scrollbar-width: thin; scrollbar-color: var(--nav-border) transparent; } .app-nav-gruppe { margin-top: 1.1rem; } .app-nav-gruppe:first-child { margin-top: 0.25rem; } .app-nav-titel { display: flex; align-items: center; justify-content: space-between; padding: 0 0.7rem 0.4rem; color: var(--nav-text-muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .app-nav-titel a { color: var(--nav-text-muted); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; } .app-nav-titel a:hover { color: var(--nav-active-text); background: var(--nav-surface); } .app-nav-link { display: flex; align-items: center; gap: 0.7rem; width: 100%; min-height: 38px; padding: 0.45rem 0.7rem; border: none; border-radius: var(--radius-sm); background: none; color: var(--nav-text); font-size: 0.875rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .app-nav-link .icon { color: var(--nav-text-muted); transition: color 0.15s ease; } .app-nav-link:hover { background: var(--nav-surface); color: var(--nav-text); } .app-nav-link:hover .icon { color: var(--nav-text); } .app-nav-link.aktiv { background: var(--nav-active-bg); color: var(--nav-active-text); } .app-nav-link.aktiv .icon { color: var(--nav-active-text); } .app-nav-link-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-nav-link .badge { background: rgba(214, 181, 106, 0.16); color: var(--nav-active-text); border-color: transparent; } .app-nav-link.app-nav-revier-offen { color: var(--nav-text); font-weight: 600; } .app-nav-link.app-nav-revier-offen .icon { color: var(--nav-active-text); } /* Unterpunkte des aktiven Reviers */ .app-nav-unter { margin: 0.15rem 0 0.35rem 1.05rem; padding-left: 0.65rem; border-left: 1px solid var(--nav-border); } .app-nav-unter .app-nav-link { min-height: 34px; font-size: 0.84rem; color: var(--nav-text-muted); } .app-nav-unter .app-nav-link:hover { color: var(--nav-text); } .app-nav-unter .app-nav-link.aktiv { color: var(--nav-active-text); } .app-nav-leer { padding: 0.35rem 0.7rem; color: var(--nav-text-muted); font-size: 0.82rem; } /* Benutzerbereich unten */ .app-benutzer { position: relative; flex-shrink: 0; padding: 0.75rem; border-top: 1px solid var(--nav-border); } .app-benutzer-btn { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.5rem; border: none; border-radius: var(--radius-sm); background: none; color: var(--nav-text); text-align: left; cursor: pointer; transition: background 0.15s ease; } .app-benutzer-btn:hover, .app-benutzer-btn[aria-expanded="true"] { background: var(--nav-surface); } .app-benutzer-btn .avatar { background: rgba(214, 181, 106, 0.18); color: var(--nav-active-text); } .app-benutzer-name { display: block; font-size: 0.875rem; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-benutzer-mail { display: block; font-size: 0.75rem; color: var(--nav-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-benutzer-text { flex: 1; min-width: 0; } .app-benutzer-btn > .icon { color: var(--nav-text-muted); } /* Ausklapp-Menü (Benutzer) */ .app-menue { position: absolute; left: 0.75rem; right: 0.75rem; bottom: calc(100% - 0.25rem); z-index: 10; padding: 0.35rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--schatten-lg); color: var(--text); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; } .app-menue.offen { opacity: 1; transform: translateY(0); pointer-events: auto; } .app-menue-item { display: flex; align-items: center; gap: 0.65rem; width: 100%; min-height: 36px; padding: 0.45rem 0.6rem; border: none; border-radius: 7px; background: none; color: var(--text); font-size: 0.875rem; text-align: left; text-decoration: none; cursor: pointer; } .app-menue-item .icon { color: var(--text-muted); } .app-menue-item:hover { background: var(--surface-2); color: var(--text); } .app-menue-item.gefahr, .app-menue-item.gefahr .icon { color: var(--danger); } .app-menue-item.gefahr:hover { background: var(--danger-soft); } .app-menue-trenner { height: 1px; margin: 0.35rem 0.25rem; background: var(--border); } .app-menue-label { padding: 0.4rem 0.6rem 0.25rem; color: var(--text-subtle); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .app-menue-segment { display: flex; gap: 3px; margin: 0 0.35rem 0.35rem; padding: 3px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); } .app-menue-segment button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 30px; border: none; border-radius: 6px; background: none; color: var(--text-muted); font-size: 0.78rem; font-weight: 600; cursor: pointer; } .app-menue-segment button:hover { color: var(--text); } .app-menue-segment button.aktiv { background: var(--surface); color: var(--text); box-shadow: var(--schatten-sm); } .app-menue-recht { display: flex; justify-content: center; gap: 0.9rem; padding: 0.35rem 0.6rem 0; font-size: 0.75rem; } .app-menue-recht a { color: var(--text-muted); text-decoration: none; } .app-menue-recht a:hover { color: var(--text); text-decoration: underline; } .app-menue-version { padding: 0.35rem 0.6rem 0.2rem; color: var(--text-subtle); font-size: 0.72rem; text-align: center; } /* Topbar & Bottom-Navigation (nur mobil) */ .app-topbar, .app-bottomnav, .app-backdrop { display: none; } /* Bottom-Navigation und Drawer-Hintergrund: mobil, und auf dem Tablet im Vollbild der Revierkarte (html.rd-karte-vollbild, /js/pages/revier-daten.js) */ .app-backdrop { position: fixed; inset: 0; z-index: 250; background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .app-backdrop.offen { opacity: 1; pointer-events: auto; } .app-bottomnav { position: fixed; inset: auto 0 0 0; z-index: 200; height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--nav-bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--nav-border); } .app-bottomnav-link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-width: 0; border: none; background: none; color: var(--nav-text-muted); font-size: 0.68rem; font-weight: 550; text-decoration: none; cursor: pointer; } .app-bottomnav-link .icon { width: 22px; height: 22px; } .app-bottomnav-link span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 0.25rem; } .app-bottomnav-link.aktiv { color: var(--nav-active-text); } .app-bottomnav-link:hover { color: var(--nav-text); } /* Topbar: mobil, und auf dem Tablet im Kartenvollbild */ .app-topbar { position: sticky; top: 0; z-index: 200; align-items: center; gap: 0.5rem; height: var(--topbar-h); padding: 0 0.75rem; padding-top: env(safe-area-inset-top); background: color-mix(in srgb, var(--nav-bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--nav-border); color: var(--nav-text); } .app-topbar .app-marke { height: auto; padding: 0 0.25rem; } .app-topbar .app-marke-text { font-size: 1.1rem; } .app-topbar-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nav-text-muted); font-size: 0.85rem; text-align: right; } .app-topbar-btn { display: grid; place-items: center; width: 40px; height: 40px; border: none; border-radius: var(--radius-sm); background: none; color: var(--nav-text); cursor: pointer; } .app-topbar-btn:hover { background: var(--nav-surface); } .app-topbar-btn .icon { width: 22px; height: 22px; } @media (max-width: 1023px) { .app-backdrop { display: block; } .app-bottomnav, .app-topbar { display: flex; } } @media (min-width: 1024px) { .dashboard-layout { padding-left: var(--sidebar-w); } } @media (max-width: 1023px) { .app-sidebar { width: min(86vw, 300px); transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: var(--schatten-lg); } .app-sidebar.offen { transform: translateX(0); } .dashboard-layout { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); } .dashboard-inhalt { padding: 1.5rem 1rem 2rem; } body.drawer-offen { overflow: hidden; } } @media (max-width: 640px) { .info-panel, .karte, .panel { padding: 1.15rem; border-radius: var(--radius-md); } .formular-zeile, .formular-zeile-2, .formular-zeile-3, .raster-2 { grid-template-columns: 1fr; } .karten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .statistik-karte { padding: 0.95rem 1rem; } .karte-wert { font-size: 1.55rem; } .seiten-aktionen { width: 100%; } .seiten-aktionen .btn { flex: 1; } .auth-kopf { padding: 1.75rem 1.5rem 0.25rem; } .auth-inhalt { padding: 1.25rem 1.5rem 1.5rem; } .btn, .submit-btn { min-height: 42px; } .btn-sm { min-height: 34px; } } /* ══════════════════════════════════════════════════════════════════════ Revierkarte (Leaflet, /js/revier-karte.js) ══════════════════════════════════════════════════════════════════════ */ .revier-karte { height: 440px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; isolation: isolate; /* Leaflet-z-Indizes bleiben unter Navigation/Dialogen */ background: var(--surface-2); } .revier-karte.klein { height: 320px; } .revier-karte .leaflet-container, .revier-karte.leaflet-container { font-family: var(--font-ui); background: var(--surface-2); } .revier-karte .leaflet-bar, .revier-karte .leaflet-control-layers { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--schatten-md); overflow: hidden; } .revier-karte .leaflet-bar a, .revier-karte .leaflet-control-layers { background: var(--surface); color: var(--text); border-bottom-color: var(--border); } .revier-karte .leaflet-bar a:hover { background: var(--surface-3); color: var(--accent-text); } .revier-karte .leaflet-control-layers-expanded { padding: 0.5rem 0.75rem; font-size: 0.85rem; } .revier-karte .leaflet-control-layers-separator { border-top-color: var(--border); } .revier-karte .leaflet-control-layers label { display: flex; align-items: center; gap: 0.4rem; margin: 0.15rem 0; } .revier-karte .leaflet-control-layers-toggle { background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--text); width: 36px; height: 36px; } .revier-karte .leaflet-control-layers-toggle .icon { width: 18px; height: 18px; } .revier-karte .leaflet-control-attribution { background: rgba(13, 19, 16, 0.72); color: #cfcab9; font-size: 0.68rem; } .revier-karte .leaflet-control-attribution a { color: #e2c47c; } .revier-karte .leaflet-control-scale-line { background: rgba(13, 19, 16, 0.6); color: #ece6d8; border-color: #ece6d8; } .revier-karte .rk-standort { display: flex; align-items: center; justify-content: center; } .revier-karte .rk-standort .icon { width: 17px; height: 17px; } /* Geoman-Werkzeugleiste an das Thema anpassen */ .revier-karte .button-container .leaflet-pm-actions-container .leaflet-pm-action { background: var(--surface-3); color: var(--text); } .revier-karte .button-container.active .leaflet-buttons-control-button { background: var(--accent-soft); } :root:not([data-theme="light"]) .revier-karte .control-icon { filter: invert(0.9) sepia(0.2); } :root[data-theme="light"] .revier-karte .control-icon { filter: none; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .revier-karte .control-icon { filter: none; } } /* „Karte fixieren“ — kein Verschieben, und die Seite scrollt beim Zeichnen nicht mit */ .revier-karte .rk-fixiert, .revier-karte.rk-fixiert { touch-action: none; } .revier-karte .rk-knopf { display: flex; align-items: center; justify-content: center; } .revier-karte .rk-knopf .icon { width: 17px; height: 17px; } .revier-karte .rk-knopf.aktiv { background: var(--accent); color: var(--accent-contrast); } .revier-karte .rk-knopf.aktiv:hover { background: var(--accent-hover); color: var(--accent-contrast); } .revier-karte .rk-zonen-label { background: rgba(13, 19, 16, 0.78); color: #ece6d8; border: 1px solid rgba(222, 205, 160, 0.25); border-radius: 6px; box-shadow: none; padding: 2px 7px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .revier-karte .rk-zonen-label::before { display: none; } /* Export-/Bearbeiten-Knöpfe im Kopf des Reviergrenzen-Panels */ .grenze-aktionen { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* Zonen-Verwaltung und Legende */ .zonen { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .zonen-kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; } .zonen-titel { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; } .zonen-titel .icon { color: var(--accent); } .zonen-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; } .zonen-knoepfe .btn.aktiv { border-color: var(--accent); background: var(--accent-soft); color: var(--text); } .zonen-liste, .zonen-legende { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; } .zonen-leer { color: var(--text-subtle); font-size: 0.875rem; } .zonen-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 13rem) auto auto; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .zonen-zeile input, .zonen-zeile select { min-height: 36px; padding-top: 0.35rem; padding-bottom: 0.35rem; } .zonen-aktionen { display: flex; gap: 0.25rem; } .zonen-farbe { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; border: 2px solid; display: inline-block; } .zonen-pacified { border-color: var(--danger); background: var(--danger-soft); border-style: dashed; } .zonen-area { border-color: var(--info); background: var(--info-soft); } .zonen-flaeche { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; } .zonen-legende-eintrag { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.9rem; } .zonen-legende-name { font-weight: 600; } .zonen-legende-eintrag .zonen-flaeche { margin-left: auto; } @media (max-width: 640px) { .zonen-zeile { grid-template-columns: auto minmax(0, 1fr) auto; } .zonen-zeile .zonen-typ { grid-column: 2 / 3; } .zonen-zeile .zonen-flaeche { grid-column: 3; grid-row: 1; } .zonen-zeile .zonen-aktionen { grid-column: 3; grid-row: 2; justify-content: flex-end; } } .karte-flaeche { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.9rem; color: var(--text-muted); } .karte-flaeche strong { color: var(--text); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .revier-karte { height: 360px; } .revier-karte.klein { height: 260px; } } /* ══════════════════════════════════════════════════════════════════════ Offline-Betrieb (/js/offline.js) ══════════════════════════════════════════════════════════════════════ */ .offline-status { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: flex; align-items: center; gap: 0.5rem; max-width: calc(100vw - 32px); padding: 0.55rem 0.9rem; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong); box-shadow: var(--schatten-md); font-size: 0.85rem; font-weight: 500; } .offline-status[hidden] { display: none; } .offline-status .icon { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; } .offline-status.warnung { border-color: color-mix(in srgb, var(--warning) 45%, transparent); } .offline-status.warnung .icon { color: var(--warning); } @media (max-width: 1023px) { /* über der mobilen Navigation */ .offline-status { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); left: 16px; right: 16px; justify-content: center; } } .offline-optionen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.5rem; margin-top: 1rem; } .offline-optionen .formular-gruppe { margin-bottom: 0; min-width: 14rem; } .offline-optionen .checkbox-zeile { min-height: 44px; } .offline-fortschritt { display: grid; gap: 0.4rem; margin-top: 0.75rem; } .offline-balken { height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; } .offline-balken span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s ease; } .offline-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .offline-tipp { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem; } /* Offline erfasst, noch nicht übertragen */ .tabelle tr.rd-ausstehend td { background: var(--warning-soft); } .tabelle tr.rd-ausstehend .badge { white-space: nowrap; } .tabelle tr.rd-ausstehend .aktionen { display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem; } /* Eigener Standort in der Revierkarte: leicht pulsierender Punkt */ .revier-karte .rk-standort-punkt { animation: rk-puls 2s ease-in-out infinite; } @keyframes rk-puls { 50% { stroke-width: 5; stroke-opacity: 0.7; } } @media (prefers-reduced-motion: reduce) { .revier-karte .rk-standort-punkt { animation: none; } } /* ══════════════════════════════════════════════════════════════════════ Reviereinrichtungen (Punkte auf der Karte) ══════════════════════════════════════════════════════════════════════ */ .rk-einrichtung { --rk-farbe: #a9a796; display: inline-flex; flex-shrink: 0; } .rk-einrichtung-symbol { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(13, 19, 16, 0.88); color: var(--rk-farbe); border: 2px solid var(--rk-farbe); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } .rk-einrichtung-symbol .icon { width: 17px; height: 17px; stroke-width: 2; } .leaflet-marker-icon.rk-einrichtung { background: none; border: none; } .leaflet-marker-draggable .rk-einrichtung-symbol { cursor: grab; } .rk-einrichtung-high_seat, .rk-einrichtung-ladder_stand { --rk-farbe: #d9bb72; } .rk-einrichtung-driven_hunt_stand { --rk-farbe: #e2b65e; } .rk-einrichtung-feeding_site { --rk-farbe: #a3c27a; } .rk-einrichtung-bait_site { --rk-farbe: #e0975e; } .rk-einrichtung-salt_lick { --rk-farbe: #e8e2d4; } .rk-einrichtung-wallow { --rk-farbe: #86afcc; } .rk-einrichtung-trail_camera { --rk-farbe: #b9a2e0; } .rk-einrichtung-game_field { --rk-farbe: #8fcf7a; } .rk-einrichtung-meeting_point { --rk-farbe: #ece6d8; } .rk-einrichtung-other { --rk-farbe: #a9a796; } .revier-karte.rk-setzen, .revier-karte.rk-setzen .leaflet-interactive { cursor: crosshair; } .revier-karte .leaflet-popup-content-wrapper, .revier-karte .leaflet-popup-tip { background: var(--surface); color: var(--text); box-shadow: var(--schatten-md); } .revier-karte .leaflet-popup-content { margin: 0.7rem 0.9rem; } .rk-popup { display: grid; gap: 0.2rem; font-size: 0.85rem; } .rk-popup-art { color: var(--accent-text); font-size: 0.78rem; } .rk-popup-koord { color: var(--text-subtle); font-size: 0.75rem; font-variant-numeric: tabular-nums; } .einrichtungen-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 11rem) minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .einrichtungen-zeile input, .einrichtungen-zeile select, .einrichtungen .zonen-knoepfe select { min-height: 36px; padding-top: 0.35rem; padding-bottom: 0.35rem; } .einrichtungen .zonen-knoepfe select { width: auto; } .einrichtungen-liste { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; } .einrichtungen-setzen-hinweis { margin-top: 0.75rem; } .einrichtungen-legende-titel { display: flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; margin-top: 1.1rem; } .einrichtungen-legende-titel .icon { color: var(--accent); } @media (max-width: 760px) { .einrichtungen-zeile { grid-template-columns: auto minmax(0, 1fr) auto; } .einrichtungen-zeile .einrichtungen-typ, .einrichtungen-zeile .einrichtungen-notiz { grid-column: 2 / 4; } .einrichtungen-zeile .zonen-aktionen { grid-column: 3; grid-row: 1; } } /* ══════════════════════════════════════════════════════════════════════ KWF-Rettungspunkte (grünes Schild mit weißem Kreuz) ══════════════════════════════════════════════════════════════════════ */ .rk-rettungspunkt { display: inline-flex; flex-shrink: 0; } .leaflet-marker-icon.rk-rettungspunkt { background: none; border: none; } .rk-rettungspunkt-symbol { width: 26px; height: 26px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: #1f8a3a; color: #ffffff; border: 2px solid #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } .rk-rettungspunkt-symbol .icon { width: 16px; height: 16px; stroke-width: 3; fill: #ffffff; } .rettungspunkte-quelle a, .rk-popup a { color: var(--accent-text); } /* Admin: Status und Upload */ .rp-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin: 1rem 0; } .rp-status dt { font-size: 0.75rem; color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.05em; } .rp-status dd { margin: 0.15rem 0 0; font-weight: 600; } .rp-schritte { margin: 1rem 0; padding-left: 1.25rem; display: grid; gap: 0.4rem; color: var(--text-muted); font-size: 0.9rem; } .rp-schritte a { color: var(--accent-text); } .rp-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.5rem; } .rp-upload input[type=file] { flex: 1 1 18rem; min-width: 0; } .rp-dateien { margin: 0 0 1rem; font-size: 0.85rem; color: var(--text-muted); } .rp-dateien summary { cursor: pointer; color: var(--text); } .rp-dateien ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; max-height: 16rem; overflow: auto; } .rp-dateien li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; border-bottom: 1px solid var(--border); } /* ══════════════════════════════════════════════════════════════════════ Eingeklappte Seitenleiste (Desktop, /js/nav.js → nav-eingeklappt an ) ══════════════════════════════════════════════════════════════════════ */ .app-sidebar-kopf { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding-right: 0.6rem; } .app-sidebar-kopf .app-marke { min-width: 0; } .app-einklappen { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border: none; border-radius: var(--radius-sm); background: none; color: var(--nav-text-muted); cursor: pointer; } .app-einklappen:hover { background: var(--nav-surface); color: var(--nav-text); } .app-einklappen .icon { width: 18px; height: 18px; } .app-sidebar, .dashboard-layout { transition: width 0.2s ease, padding-left 0.2s ease; } @media (max-width: 1023px) { .app-einklappen { display: none; } } @media (min-width: 1024px) { :root.nav-eingeklappt { --sidebar-w: 72px; } .nav-eingeklappt .app-sidebar-kopf { flex-direction: column; height: auto; padding: 0.6rem 0 0.25rem; gap: 0.35rem; } .nav-eingeklappt .app-sidebar-kopf .app-marke { height: auto; padding: 0; } .nav-eingeklappt .app-marke-text, .nav-eingeklappt .app-nav-titel, .nav-eingeklappt .app-nav-link-text, .nav-eingeklappt .app-nav-link .badge, .nav-eingeklappt .app-nav-leer, .nav-eingeklappt .app-benutzer-text, .nav-eingeklappt .app-benutzer-btn > .icon { display: none; } .nav-eingeklappt .app-nav { padding: 0.5rem 0.6rem 1rem; } .nav-eingeklappt .app-nav-gruppe { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--nav-border); } .nav-eingeklappt .app-nav-gruppe:first-child { border-top: none; padding-top: 0; } .nav-eingeklappt .app-nav-link { justify-content: center; padding: 0.5rem 0; } .nav-eingeklappt .app-nav-unter { margin: 0.15rem 0 0.35rem; padding-left: 0; border-left: none; } .nav-eingeklappt .app-nav-unter .app-nav-link { min-height: 36px; } .nav-eingeklappt .app-benutzer { padding: 0.6rem; } .nav-eingeklappt .app-benutzer-btn { justify-content: center; padding: 0.4rem 0; } /* Benutzermenü klappt neben der schmalen Leiste auf */ .nav-eingeklappt .app-menue { left: calc(100% + 0.5rem); right: auto; bottom: 0.5rem; width: 260px; } } /* Große Revierkarte im eigenen Bereich */ .revier-karte.gross { height: calc(100vh - 300px); height: calc(100dvh - 300px); min-height: 420px; } @media (max-width: 1023px) { .revier-karte.gross { height: calc(100dvh - 260px); min-height: 360px; } } /* Bearbeitungsmodus der großen Revierkarte */ .im-bearbeiten-aus { display: none !important; } .karte-edit-leiste { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1rem; margin-bottom: 0.75rem; padding: 0.6rem 0.8rem; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius-sm); background: var(--accent-soft); } .karte-edit-leiste[hidden] { display: none; } .karte-edit-info { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; } .karte-edit-info .icon { color: var(--accent); flex-shrink: 0; } .karte-edit-knoepfe { display: flex; gap: 0.5rem; margin-left: auto; } #karteFehler, #karteErfolg { margin-bottom: 0.75rem; } /* Speicherstatus der Einrichtungen (automatisches Speichern) */ .einrichtungen-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-muted); margin-right: auto; } .einrichtungen-status .icon { width: 14px; height: 14px; } .einrichtungen-status.gespeichert { color: var(--success); } .einrichtungen-status.speichert .icon { animation: rk-drehen 1s linear infinite; } .einrichtungen-status.offline, .einrichtungen-status.fehler { color: var(--warning); } @keyframes rk-drehen { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .einrichtungen-status.speichert .icon { animation: none; } } /* Ort einer Sichtung: Freitext unter der Auswahl bei „Sonstiges“ */ input.ort-sonstiges { margin-top: 0.5rem; } /* Schnell-Fenster zum Anlegen/Bearbeiten von Einrichtungen in der Karte */ .revier-karte .rk-schnell .leaflet-popup-content { margin: 0.75rem 0.85rem; } .rk-schnell-inhalt { display: grid; gap: 0.35rem; } .rk-schnell-inhalt.schmal .rk-schnell-typen { grid-template-columns: 1fr; } .rk-schnell-inhalt.schmal .rk-schnell-typen { gap: 0.25rem; } .rk-schnell-inhalt.schmal .rk-schnell-typen button { min-height: 34px; padding-top: 0.2rem; padding-bottom: 0.2rem; } .rk-schnell-inhalt > strong { font-size: 0.9rem; margin-bottom: 0.25rem; } .rk-schnell-inhalt .feld-label { margin: 0.35rem 0 0; } .rk-schnell-inhalt input, .rk-schnell-inhalt select { min-height: 38px; padding-top: 0.4rem; padding-bottom: 0.4rem; font-size: 0.9rem; } .rk-schnell-typen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; } .rk-schnell-typen button { display: flex; align-items: center; gap: 0.5rem; min-height: 40px; padding: 0.3rem 0.45rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.8rem; text-align: left; cursor: pointer; } .rk-schnell-typen button:hover { border-color: var(--accent); background: var(--accent-soft); } .rk-schnell-typen button > span:last-child { min-width: 0; line-height: 1.2; } .rk-schnell-typen .rk-einrichtung-symbol { width: 26px; height: 26px; box-shadow: none; } .rk-schnell-typen .rk-einrichtung-symbol .icon { width: 15px; height: 15px; } .rk-schnell-knoepfe { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.6rem; } .rk-schnell-loeschen { color: var(--danger); } /* Offene Einladungen (Dashboard) und Hinweis-Zähler im Menü */ .offene-einladungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .offene-einladung { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; padding: 0.85rem 1rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--radius-md); background: var(--accent-soft); } .offene-einladung-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface); color: var(--accent); flex-shrink: 0; } .offene-einladung-text { flex: 1 1 16rem; min-width: 0; display: grid; gap: 0.1rem; font-size: 0.9rem; } .offene-einladung-text strong { font-size: 1rem; } .offene-einladung-aktionen { display: flex; gap: 0.5rem; margin-left: auto; } .einladungen-panel .meldung { margin-bottom: 0.75rem; } .einladungen-panel .meldung a { color: inherit; font-weight: 600; } .nav-hinweis { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-contrast); font-size: 0.68rem; font-weight: 700; line-height: 1; } .app-bottomnav-link { position: relative; } .app-bottomnav-link .nav-hinweis { position: absolute; top: 6px; left: calc(50% + 6px); } .nav-eingeklappt .app-nav-link { position: relative; } @media (min-width: 1024px) { .nav-eingeklappt .app-nav-link .nav-hinweis { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; font-size: 0.62rem; } } /* ══════════════════════════════════════════════════════════════════════ Revierkarte im Vollbild (Handy/Tablet, html.rd-karte-vollbild) Karte füllt den Bildschirm, die Kartenleiste sitzt unten über der Navigation; Listen und Legenden entfallen (Infos über Tipp auf die Karte). ══════════════════════════════════════════════════════════════════════ */ .rd-karte-vollbild body { overflow: hidden; } .rd-karte-vollbild #sektionKarte.aktiv { position: fixed; z-index: 150; inset: 0 0 calc(var(--bottomnav-h) + env(safe-area-inset-bottom)) 0; display: flex; flex-direction: column; background: var(--bg); animation: none; } .rd-karte-vollbild #sektionKarte.aktiv { top: var(--topbar-h); } /* Tablet quer: Seitenleiste wird zur Schublade, Navigation nach unten */ @media (min-width: 1024px) { .rd-karte-vollbild .dashboard-layout { padding-left: 0; } .rd-karte-vollbild .app-sidebar { transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: var(--schatten-lg); } .rd-karte-vollbild .app-sidebar.offen { transform: translateX(0); } .rd-karte-vollbild .app-backdrop { display: block; } .rd-karte-vollbild .app-bottomnav, .rd-karte-vollbild .app-topbar { display: flex; } } .rd-karte-vollbild #grenzePanel { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; background: var(--surface); } .rd-karte-vollbild #grenzePanel > .revier-karte.gross { order: 1; flex: 1; height: auto; min-height: 0; border: none; border-radius: 0; } .rd-karte-vollbild #grenzePanel > .leer-zustand { order: 1; flex: 1; display: grid; place-content: center; } .rd-karte-vollbild #grenzePanel > .karte-edit-leiste { order: 2; margin: 0; border-width: 1px 0 0; border-radius: 0; padding: 0.45rem 0.75rem; } .rd-karte-vollbild #grenzePanel > .karte-edit-leiste .karte-edit-info { font-size: 0.8rem; } .rd-karte-vollbild #grenzeFlaeche, .rd-karte-vollbild #belegung, .rd-karte-vollbild #grenzeZonen, .rd-karte-vollbild #grenzeZonenSeiten, .rd-karte-vollbild #grenzeEinrichtungenTitel, .rd-karte-vollbild #grenzeEinrichtungen, .rd-karte-vollbild #grenzeEinrichtungenSeiten, .rd-karte-vollbild #rettungspunkte, .rd-karte-vollbild #karteEinrichtungen { display: none !important; } /* Meldungen schweben über der Karte */ .rd-karte-vollbild #grenzePanel > .meldung { position: absolute; top: 0.6rem; left: 3.6rem; right: 3.6rem; z-index: 1100; margin: 0; box-shadow: var(--schatten-md); } /* Kompass (Norden ist oben; mit Lagesensor zusätzlich die Blickrichtung) */ .revier-karte .rk-kompass a { position: relative; width: 44px; height: 44px; display: grid; place-items: center; } .revier-karte .rk-kompass svg { width: 34px; height: 34px; overflow: visible; } .revier-karte .rk-kompass .rk-kompass-n { fill: #d64545; } .revier-karte .rk-kompass .rk-kompass-s { fill: currentColor; opacity: 0.45; } .revier-karte .rk-kompass .rk-kompass-buchstabe { font: 700 7px var(--font-ui); fill: currentColor; text-anchor: middle; } .revier-karte .rk-kompass .rk-kompass-blick { fill: #4a9eff; opacity: 0; transform-origin: 20px 20px; transition: opacity 0.2s; } .revier-karte .rk-kompass a.aktiv { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 2px #4a9eff; } .revier-karte .rk-kompass a.aktiv .rk-kompass-blick { opacity: 0.9; } .revier-karte .rk-kompass-grad { display: block; padding: 0.1rem 0.25rem 0.2rem; text-align: center; background: var(--surface); color: var(--text); font-size: 0.68rem; font-weight: 600; font-variant-numeric: tabular-nums; border-top: 1px solid var(--border); } .revier-karte .rk-kompass-grad[hidden] { display: none; } /* Blickrichtung am eigenen Standort */ .revier-karte .rk-blick { pointer-events: none; } .revier-karte .rk-blick-kegel { display: block; width: 80px; height: 80px; transform-origin: 50% 50%; } .revier-karte .rk-blick-kegel svg { width: 100%; height: 100%; } /* ══════════════════════════════════════════════════════════════════════ Live: Standort teilen, Weg aufzeichnen, Meine Wege (/js/revier-live.js) ══════════════════════════════════════════════════════════════════════ */ .live-leiste { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; } .live-leiste[hidden] { display: none; } .live-knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; } .live-knopf.aktiv, .live-knopf.aktiv:hover { background: color-mix(in srgb, var(--success) 22%, transparent); border-color: var(--success); color: var(--text); } .live-knopf.aktiv .icon { color: var(--success); } .live-knopf-weg.aktiv, .live-knopf-weg.aktiv:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); border-color: var(--danger); } .live-knopf-weg.aktiv .icon { color: var(--danger); } .live-knopf.aktiv .icon { animation: live-puls 1.6s ease-in-out infinite; } @keyframes live-puls { 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .live-knopf.aktiv .icon { animation: none; } } #liveWegeBtn.aktiv { background: var(--accent-soft); border-color: var(--accent); } .live-hinweis, .live-meldung { margin: 0; font-size: 0.8rem; color: var(--text-muted); } .live-hinweis[hidden], .live-meldung[hidden], .live-status[hidden], .live-wege[hidden] { display: none; } .live-meldung.fehler { color: var(--danger); } .live-status { display: flex; flex-wrap: wrap; gap: 0.35rem; } .live-status-teil { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); font-size: 0.78rem; font-variant-numeric: tabular-nums; } .live-status-teil.ok .icon { color: var(--success); } .live-status-teil.aufnahme .icon { color: var(--danger); } .live-status-teil.warnung { border-color: color-mix(in srgb, var(--warning) 45%, transparent); } .live-status-teil.warnung .icon { color: var(--warning); } .live-wege { padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .live-wege .einrichtungen-legende-titel { margin-top: 0; } .live-wege-liste { list-style: none; display: grid; gap: 0.35rem; margin: 0.4rem 0; } .live-wege-leer { color: var(--text-muted); font-size: 0.85rem; } .live-weg { display: flex; align-items: center; gap: 0.5rem; } .live-weg-text { flex: 1; min-width: 0; display: grid; font-size: 0.85rem; } .live-weg-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-weg-text span { color: var(--text-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; } .live-weg-zeigen { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); cursor: pointer; } .live-weg-zeigen.aktiv { border-color: #ff8c1a; color: #ff8c1a; } .live-weg-loeschen { color: var(--danger); } /* Mitjäger in der Karte: farbiger Punkt mit Initialen */ .revier-karte .rk-mitjaeger-punkt { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); color: #fff; font: 700 0.7rem/1 var(--font-ui); letter-spacing: 0.02em; } .revier-karte .rk-mitjaeger.alt { opacity: 0.6; } .revier-karte .rk-mitjaeger.alt .rk-mitjaeger-punkt { filter: grayscale(0.7); } .revier-karte .rk-mitjaeger-alter { position: absolute; top: 31px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 0 0.3rem; border-radius: 6px; background: rgba(13, 19, 16, 0.8); color: #ece6d8; font-size: 0.66rem; font-weight: 600; } .revier-karte .rk-popup .btn { margin-top: 0.35rem; } .live-alt { color: var(--warning); } /* OwnTracks-Hinweis und Mitjäger-Liste unter den Live-Knöpfen */ .live-app { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font-size: 0.8rem; color: var(--text-muted); } .live-app[hidden], .live-mitjaeger[hidden] { display: none; } .live-app > span { flex: 1 1 200px; } .live-app.hinweis { padding: 0.45rem 0.6rem; border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning) 8%, transparent); } .live-app.hinweis > .icon { color: var(--warning); } .live-mitjaeger { list-style: none; display: grid; gap: 0.3rem; margin: 0; padding: 0; } .live-mj { display: flex; align-items: center; gap: 0.5rem; } .live-mj-punkt { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-size: 0.66rem; font-weight: 700; } .live-mj.alt .live-mj-punkt { filter: grayscale(0.7); opacity: 0.7; } .live-mj-text { flex: 1; min-width: 0; display: grid; font-size: 0.85rem; } .live-mj-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-mj-text span { color: var(--text-muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; } .live-mj.alt .live-mj-text span { color: var(--warning); } .live-mj .btn.aktiv { color: var(--accent-text); border-color: var(--accent); } .ot-schritte { display: grid; gap: 0.9rem; margin: 0.5rem 0 0.75rem; padding-left: 1.3rem; } .ot-schritte li { display: grid; gap: 0.3rem; } .ot-knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; } .ot-status { margin: 0; font-size: 0.85rem; color: var(--text-muted); } .ot-manuell { margin: 0 0 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); } .ot-manuell summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; } .ot-manuell .feld-hinweis { margin: 0.5rem 0; } .ot-werte { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.75rem; align-items: center; margin: 0; font-size: 0.85rem; } .ot-werte dt { color: var(--text-muted); } .ot-werte dd { display: flex; align-items: center; gap: 0.35rem; min-width: 0; margin: 0; } .ot-werte code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; } .ot-json { max-height: 50vh; overflow: auto; margin: 0.5rem 0 0; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; white-space: pre-wrap; overflow-wrap: anywhere; } .btn-gefahr-text { color: var(--danger); margin-right: auto; } /* ══════════════════════════════════════════════════════════════════════ Revierinfo (#karteInfo): am Desktop Teil des Panels (display: contents); im Kartenvollbild ein Blatt über der Karte, geöffnet über das Info-Icon neben dem Reviernamen (#karteInfoBtn, /js/pages/revier-daten.js) ══════════════════════════════════════════════════════════════════════ */ .karte-info { display: contents; } .karte-info-kopf, .karte-info-flaeche { display: none; } .app-topbar .rd-karte-info-btn { display: none; flex-shrink: 0; margin-right: -0.35rem; } .rd-karte-vollbild .app-topbar .rd-karte-info-btn { display: grid; } .rd-karte-info-btn[aria-expanded="true"] { background: var(--nav-surface); color: var(--nav-active-text); } /* „Einrichtungen bearbeiten“ als Kartenknopf nur im Vollbild */ .revier-karte .leaflet-bar:has(> .rk-bearbeiten) { display: none; } .rd-karte-vollbild .revier-karte .leaflet-bar:has(> .rk-bearbeiten) { display: block; } .rd-karte-vollbild #karteBearbeitenBtn { display: none; } .rd-karte-vollbild #grenzePanel > .karte-info { position: absolute; inset: auto 0 0 0; z-index: 1050; display: flex; flex-direction: column; gap: 0.75rem; max-height: 75%; overflow-y: auto; overscroll-behavior: contain; padding: 0.6rem 1rem 1rem; background: var(--surface); border-top: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--schatten-lg); } .rd-karte-vollbild .karte-info.offen .karte-info-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .karte-info-titel { margin: 0; font-size: 1rem; } .karte-info-zu { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -0.5rem; border: none; border-radius: var(--radius-sm); background: none; color: var(--text-muted); cursor: pointer; } .karte-info-zu:hover { background: var(--surface-2); color: var(--text); } .rd-karte-vollbild .karte-info.offen .karte-info-flaeche:not([hidden]) { display: flex; order: 1; margin: 0; } .rd-karte-vollbild .karte-info > .live-leiste { order: 2; margin: 0; } .rd-karte-vollbild .karte-info .live-knoepfe { display: grid; grid-template-columns: 1fr 1fr; } .rd-karte-vollbild .karte-info .live-knoepfe .btn { min-height: 44px; justify-content: center; } .rd-karte-vollbild .karte-info #liveWegeBtn { grid-column: 1 / -1; } .rd-karte-vollbild .karte-info > .panel-kopf { order: 3; margin: 0; padding: 0.75rem 0 0; border-top: 1px solid var(--border); } .rd-karte-vollbild .karte-info > .panel-kopf .panel-titel { display: none; } .rd-karte-vollbild .karte-info .grenze-aktionen { width: 100%; } .rd-karte-vollbild .karte-info .grenze-aktionen .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; } .rd-karte-vollbild .karte-info > .panel-kopf:not(:has(.grenze-aktionen > :not([hidden], .im-bearbeiten-aus, #karteBearbeitenBtn))) { display: none; } /* Geschlossen: nur laufendes Teilen/Aufzeichnen und Meldungen schweben über der Karte */ .rd-karte-vollbild #grenzePanel > .karte-info:not(.offen) { bottom: 1.9rem; padding: 0 0.75rem; overflow: visible; background: none; border: none; box-shadow: none; pointer-events: none; } .rd-karte-vollbild .karte-info:not(.offen) > :not(.live-leiste), .rd-karte-vollbild .karte-info:not(.offen) .live-leiste > :not(.live-status, .live-meldung) { display: none !important; } .rd-karte-vollbild .karte-info:not(.offen) .live-status { justify-content: center; } .rd-karte-vollbild .karte-info:not(.offen) .live-status-teil { background: var(--surface); box-shadow: var(--schatten-md); } .rd-karte-vollbild .karte-info:not(.offen) .live-meldung { justify-self: center; padding: 0.35rem 0.75rem; text-align: center; background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--schatten-md); } /* Bearbeitungsmodus: die Leiste unten hat Vorrang */ .rd-karte-vollbild #grenzePanel:has(> #karteEditLeiste:not([hidden])) > .karte-info:not(.offen) { display: none; } /* Tablet: Blatt als Karte rechts unten statt über die ganze Breite */ @media (min-width: 700px) { .rd-karte-vollbild #grenzePanel > .karte-info.offen { inset: auto 0.75rem 0.75rem auto; width: min(440px, calc(100% - 1.5rem)); border: 1px solid var(--border); border-radius: var(--radius-lg); } } /* Hinweis in der Karte (z.B. Flurstücke erst bei näherem Zoom, /js/revier-karte.js) */ .revier-karte .rk-hinweis { position: absolute; z-index: 1000; top: 0.6rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.4rem; max-width: calc(100% - 7.5rem); padding: 0.4rem 0.75rem; border-radius: var(--radius-pill); background: var(--surface); color: var(--text); box-shadow: var(--schatten-md); font: 600 0.78rem/1.25 var(--font-ui); cursor: pointer; } .revier-karte .rk-hinweis[hidden] { display: none; } .revier-karte .rk-hinweis .icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); } /* Streckenliste: Notizen importieren (aufklappbar, /js/strecke-import.js) */ .strecke-import > summary { list-style: none; cursor: pointer; margin-bottom: 0; } .strecke-import > summary::-webkit-details-marker { display: none; } .strecke-import[open] > summary { margin-bottom: 1rem; } .strecke-import-pfeil { color: var(--text-muted); transition: transform 0.2s ease; } .strecke-import[open] .strecke-import-pfeil { transform: rotate(180deg); } .strecke-import textarea { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.85rem; resize: vertical; } .strecke-import code { padding: 0.05rem 0.3rem; border-radius: 4px; background: var(--surface-2); font-size: 0.85em; } .strecke-import-vorschau { margin-top: 1rem; } /* Excel importieren: Beispieldatei, Dateiauswahl (Button statt Dateifeld), bereits vorhandene Zeilen gedimmt */ .strecke-excel-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .strecke-excel-datei { position: relative; cursor: pointer; } .strecke-excel-datei input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; } .strecke-excel-datei:focus-within { outline: 2px solid var(--accent-ring); outline-offset: 2px; } .strecke-excel-name { font-size: 0.85rem; overflow-wrap: anywhere; } .strecke-import-doppelt td { color: var(--text-muted); } @media (max-width: 640px) { .strecke-excel-aktionen .btn { flex: 1 1 100%; } } .strecke-import-zusammenfassung { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; } .strecke-import-fehler td { color: var(--text-muted); } .strecke-import-fehler strong { color: var(--warning); font-weight: 600; } /* Vorschau bleibt auch am Handy eine kompakte Tabelle (waagrecht scrollbar) */ .strecke-import-tabelle { overflow-x: auto; } .strecke-import-tabelle .tabelle { min-width: 640px; font-size: 0.85rem; } .strecke-import-tabelle .tabelle th, .strecke-import-tabelle .tabelle td { padding: 0.45rem 0.6rem; white-space: nowrap; } .strecke-import-tabelle .rd-tabelle-text { white-space: normal; } /* Streckenliste: Übersicht je Wildart, Jagdjahr-Filter, Seiten (/js/pages/revier-daten.js) */ .strecke-filter-jahr { width: auto; min-width: 10rem; margin-left: auto; padding-block: 0.35rem; font-size: 0.85rem; } .strecke-filter-jahr[hidden] { display: none; } .strecke-uebersicht { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.5rem; margin-bottom: 1rem; } .strecke-uebersicht[hidden] { display: none; } .strecke-art { display: grid; gap: 0.1rem; padding: 0.55rem 0.75rem; text-align: left; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); transition: border-color 0.12s ease, background 0.12s ease; } .strecke-art:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .strecke-art-zahl { font: 600 1.35rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; } .strecke-art-name { color: var(--text-muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .strecke-art.gesamt .strecke-art-zahl { color: var(--accent-text); } .strecke-art.aktiv { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); } .paginierung { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.85rem; } .paginierung[hidden] { display: none; } .paginierung-info { color: var(--text-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; } .paginierung-knoepfe { display: inline-flex; align-items: center; gap: 0.35rem; } .paginierung-seite { min-width: 7rem; text-align: center; font-size: 0.85rem; font-variant-numeric: tabular-nums; } /* Streckenliste: Kopfleiste (Jagdjahr, neuer Eintrag), Eintrags-Dialog, Mehrfachauswahl */ .strecke-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1rem; } .strecke-leiste .strecke-filter-jahr { margin-left: 0; } .strecke-leiste-aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-left: auto; } @media (max-width: 640px) { .strecke-leiste-aktionen { width: 100%; } .strecke-leiste-aktionen .btn { flex: 1 1 auto; } } /* Dialoge: breiter für Tabellen-Vorschau, Status neben dem Schließen-Knopf */ .dialog-modal.dialog-breit { max-width: 1000px; } .dialog-kopf-rechts { display: flex; align-items: center; gap: 0.6rem; } .strecke-dialog .rd-zeile-4, .strecke-dialog .formular-zeile-3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; } .strecke-dialog .formular-zeile-3 > :last-child { grid-column: 1 / -1; } .strecke-dialog .formular-gruppe { margin-bottom: 0.9rem; } .strecke-mehrfach { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 1rem; padding: 0.6rem 0.85rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: var(--radius-md); background: var(--accent-soft); } .strecke-mehrfach[hidden] { display: none; } .strecke-mehrfach-anzahl { font-weight: 600; margin-right: auto; } .strecke-mehrfach label { margin: 0; color: var(--text-muted); font-size: 0.85rem; } .strecke-mehrfach select, .strecke-mehrfach input[type="text"] { width: auto; min-width: 11rem; padding-block: 0.35rem; font-size: 0.875rem; } .strecke-mehrfach input[hidden] { display: none; } #streckenTabelle .strecke-auswahl { width: 2.25rem; padding-right: 0; } #streckenTabelle .strecke-auswahl input { display: block; cursor: pointer; } .strecke-link-marke { margin-left: 0.4rem; vertical-align: 0.1em; font-size: 0.7rem; } /* Streckenliste: Auswertung (Kennzahlen, Balken je Wildart/Erleger/Ort, Säulen je Monat/Jagdjahr) */ .strecke-statistik[hidden] { display: none; } .strecke-export { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; } .statistik-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.5rem; margin-bottom: 1rem; } .statistik-kennzahl { display: grid; gap: 0.1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); } .statistik-kennzahl-wert { font: 600 1.4rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; } .statistik-kennzahl.gesamt .statistik-kennzahl-wert { color: var(--accent-text); } .statistik-kennzahl-text { color: var(--text-muted); font-size: 0.8rem; } .statistik-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .stat-karte { min-width: 0; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); } .stat-karte.breit { grid-column: 1 / -1; } .statistik-titel { margin: 0 0 0.65rem; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .stat-zeilen { display: grid; grid-template-columns: minmax(5rem, max-content) minmax(0, 1fr) auto; align-items: center; gap: 0.4rem 0.75rem; } .stat-zeile { display: contents; } .stat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; max-width: 12rem; } .stat-balken { display: flex; height: 0.7rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .stat-teil { height: 100%; background: var(--accent); } .stat-balken.leer { background: none; } .stat-teil.stat-w { background: var(--info); } .stat-teil.stat-u { background: color-mix(in srgb, var(--text-muted) 45%, transparent); } .stat-wert { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; font-size: 0.875rem; } .stat-detail { grid-column: 2 / -1; margin-top: -0.3rem; color: var(--text-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; } .stat-detail:empty { display: none; } .stat-legende { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.75rem 0 0; color: var(--text-muted); font-size: 0.78rem; } .stat-legende span { display: inline-flex; align-items: center; gap: 0.35rem; } .stat-punkt { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--accent); } .stat-punkt.stat-w { background: var(--info); } .stat-punkt.stat-u { background: color-mix(in srgb, var(--text-muted) 45%, transparent); } .stat-saeulen { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 0.3rem; align-items: end; } .stat-saeule { display: grid; grid-template-rows: auto 7rem auto; justify-items: center; gap: 0.2rem; min-width: 0; } .stat-saeule-wert { min-height: 1em; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; } .stat-saeule-flaeche { display: flex; align-items: flex-end; width: 100%; height: 100%; } .stat-saeule-balken { width: 100%; max-width: 2.2rem; margin-inline: auto; border-radius: 4px 4px 0 0; background: var(--accent); } .stat-saeule-name { color: var(--text-muted); font-size: 0.72rem; white-space: nowrap; } @media (max-width: 720px) { /* Mehrfachauswahl nur am Computer */ #streckenTabelle .tabelle .strecke-auswahl, .strecke-mehrfach { display: none !important; } .strecke-dialog .formular-zeile-3 { grid-template-columns: minmax(0, 1fr); } .statistik-raster { grid-template-columns: minmax(0, 1fr); } .statistik-kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-karte { padding: 0.75rem; } .stat-saeulen { gap: 0.15rem; } .stat-saeule { grid-template-rows: auto 5.5rem auto; } .stat-saeule-name { font-size: 0.62rem; } .stat-name { max-width: 8rem; } } /* Handy: kompakte Zeilen nur mit Datum, Wildart, Ort und Bemerkung */ @media (max-width: 720px) { #streckenTabelle .tabelle tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: 0.75rem; row-gap: 0.1rem; margin-bottom: 0.35rem; padding: 0.45rem 0.6rem 0.45rem 0.85rem; } #streckenTabelle .tabelle td { display: block; width: auto; padding: 0; text-align: left; } #streckenTabelle .tabelle td::before { content: none; } #streckenTabelle .tabelle td.nur-breit, #streckenTabelle .tabelle td.leer { display: none; } #streckenTabelle .strecke-datum { grid-column: 1; grid-row: 1; color: var(--text-muted); font-size: 0.85rem; } #streckenTabelle .strecke-wildart { grid-column: 2; grid-row: 1; } #streckenTabelle .strecke-ort { grid-column: 2; font-size: 0.875rem; } #streckenTabelle .strecke-bemerkung { grid-column: 2; max-width: none; font-size: 0.82rem; } #streckenTabelle .tabelle td.aktionen { grid-column: 3; grid-row: 1 / span 3; align-self: center; display: flex; margin: 0; padding: 0; border: none; } .strecke-uebersicht { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; } .strecke-art { padding: 0.4rem 0.55rem; } .strecke-art-zahl { font-size: 1.1rem; } .strecke-art-name { font-size: 0.75rem; } #streckenTabelle .tabelle td.aktionen .btn { width: 34px; height: 34px; } .paginierung { justify-content: center; } .paginierung-info { width: 100%; text-align: center; } } /* Streckenliste: Eintrag direkt in der Liste bearbeiten (sofort gespeichert) */ .tabelle .aktionen .rd-bearbeiten + .rd-loeschen { margin-left: 0.25rem; } .rd-bearbeiten:hover { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .tabelle tbody tr.strecke-edit-zeile, .tabelle tbody tr.strecke-edit-zeile:hover { background: var(--accent-soft); } .strecke-edit { display: grid; gap: 0.6rem; padding: 0.35rem 0; text-align: left; } .strecke-edit-felder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 0.85rem; } .strecke-edit .formular-gruppe { margin-bottom: 0.5rem; } .strecke-edit-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; } @media (max-width: 720px) { #streckenTabelle .tabelle tr.strecke-edit-zeile { display: block; padding: 0.6rem 0.75rem; border-color: var(--accent); } #streckenTabelle .tabelle tr.strecke-edit-zeile > td { display: block; } .strecke-edit-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 0.6rem; } } /* Doppelt tippen zum Bearbeiten; am Handy ersetzt das die Knöpfe in der Zeile */ #streckenTbody tr[data-strecke-id] { cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; } .strecke-doppeltipp { display: none; } .strecke-edit-fuss .einrichtungen-status { margin-right: auto; } .strecke-edit-loeschen { color: var(--danger); } .strecke-edit-loeschen:hover { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } @media (max-width: 720px) { .strecke-doppeltipp:not([hidden]) { display: block; margin: -0.4rem 0 0.6rem; } #streckenTabelle .tabelle td.aktionen .rd-bearbeiten, #streckenTabelle .tabelle td.aktionen [data-action="loescheStrecke"] { display: none; } #streckenTabelle .tabelle td.aktionen:not(:has(> :not(.rd-bearbeiten, [data-action="loescheStrecke"]))) { display: none; } #streckenTabelle .tabelle tr { grid-template-columns: auto minmax(0, 1fr); } #streckenTabelle .tabelle tr.rd-ausstehend { grid-template-columns: auto minmax(0, 1fr) auto; } } /* ── Wildtier-Monitoring: Runden, Erfassungsdialog (/js/pages/revier-monitoring.js) ── */ .mon-status { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: 0.88rem; font-weight: 550; } .mon-status[hidden] { display: none; } .mon-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .mon-runde { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } .mon-runde.offen { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .mon-runde-kopf { display: flex; align-items: center; gap: 0.25rem; padding-right: 0.4rem; } .mon-runde-kopf > .aktionen { flex-shrink: 0; } .mon-runde-auf { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.75rem; align-items: center; padding: 0.7rem 0.9rem; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .mon-einzeln .mon-runde-auf { cursor: default; } .mon-runde-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; } .mon-chips { grid-column: 1; display: flex; flex-wrap: wrap; gap: 0.35rem; } .mon-chip { padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--surface-2); font-size: 0.82rem; } .mon-notiz { font-size: 0.82rem; } .mon-pfeil { grid-column: 2; grid-row: 1 / span 2; color: var(--text-muted); transition: transform 0.2s ease; } .mon-runde.offen .mon-pfeil { transform: rotate(180deg); } .mon-runde-details { padding: 0 0.9rem 0.9rem; } .revier-karte.mon-runden-karte { height: 340px; } .mon-halte { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.4rem; } .mon-halt { display: flex; align-items: flex-start; gap: 0.6rem; padding-top: 0.45rem; border-top: 1px solid var(--border); font-size: 0.9rem; } .mon-halt-nr, .mon-punkt span { display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-contrast); font-size: 0.75rem; font-weight: 700; } .mon-halt-text { flex: 1; min-width: 0; overflow-wrap: anywhere; } .mon-halt .aktionen { display: flex; gap: 0.15rem; flex-shrink: 0; } .mon-halt-neu { margin-top: 0.6rem; } .mon-punkt span { width: 28px; height: 28px; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } .mon-pin { color: var(--accent); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); } .mon-pin .icon { width: 32px; height: 32px; stroke-width: 2.4; fill: color-mix(in srgb, var(--accent) 35%, transparent); } .revier-karte.mon-karte { height: 280px; } .mon-ort-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0; } .mon-ort { flex: 1 1 12rem; display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; min-width: 0; } .mon-ort .icon { color: var(--accent); flex-shrink: 0; } #monEinrichtung { width: auto; max-width: 15rem; padding-block: 0.35rem; font-size: 0.875rem; } .mon-titel { margin: 1rem 0 0.4rem; } .mon-arten { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.4rem; } .mon-art { position: relative; display: flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.45rem 0.65rem; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: inherit; font-size: 0.9rem; font-weight: 550; text-align: left; cursor: pointer; } .mon-art.gewaehlt { border-color: var(--accent); background: var(--accent-soft); } .mon-art > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Anzahl als Abzeichen an der Ecke, damit der Name ganz sichtbar bleibt */ .mon-art-zahl { position: absolute; top: -0.45rem; right: -0.35rem; min-width: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-size: 0.78rem; font-weight: 700; line-height: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--surface); } .mon-auswahl { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.4rem; } .mon-zeile { padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); } .mon-zeile-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; } .mon-zeile-kopf > strong { flex: 1; min-width: 6rem; } .mon-details-btn .icon { margin-left: 0.2rem; } .mon-details-btn[aria-expanded="true"] .icon { transform: rotate(180deg); } .mon-stepper { display: inline-flex; align-items: center; gap: 0.15rem; } .mon-stepper .btn-icon { width: 36px; height: 36px; font-size: 1.2rem; font-weight: 600; } .mon-stepper-wert { min-width: 2rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } .mon-klassen { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.25rem 1rem; margin: 0.35rem 0 0.2rem; } .mon-klasse { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.88rem; } .mon-mehr { margin-top: 1rem; } .mon-mehr summary { cursor: pointer; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.6rem; } @media (max-width: 640px) { .revier-karte.mon-karte { height: 34vh; } .revier-karte.mon-runden-karte { height: 280px; } .mon-arten { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mon-art { font-size: 0.82rem; padding: 0.4rem 0.5rem; } #monEinrichtung { max-width: none; flex: 1 1 100%; } } /* ── Lizenz (Reiter in Revier verwalten, /js/pages/revier-lizenz.js) ── */ .lizenz-untertitel { margin: 1.25rem 0 0.5rem; font-size: 0.95rem; } .lizenz-funktionen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.35rem 1rem; } .lizenz-funktionen li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; } .lizenz-funktionen li.an .icon { color: var(--success); } .lizenz-funktionen li.aus { color: var(--text-muted); } .lizenz-kennung { font-size: 0.8rem; overflow-wrap: anywhere; } .lizenz-schluessel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; } .lizenz-schluessel .formular-gruppe { flex: 1 1 16rem; margin-bottom: 0; } .lizenz-schluessel input { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; text-transform: uppercase; } .lizenz-pakete { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; } .lizenz-paket { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); } .lizenz-paket.aktuell { border-color: var(--accent); background: var(--accent-soft); } .lizenz-paket-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; } .lizenz-paket-preis { font-weight: 600; font-size: 1.05rem; } .lizenz-paket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.88rem; flex: 1; } .lizenz-paket li { display: flex; gap: 0.4rem; align-items: flex-start; } .lizenz-paket li .icon { color: var(--success); margin-top: 0.15rem; flex-shrink: 0; } .lizenz-paket-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .lizenz-mitglieder { margin: 0 0 0.75rem; } .lizenz-mitglieder.lizenz-voll { color: var(--warning); font-weight: 550; } /* Nicht im Paket: Knopf sichtbar, aber gesperrt (Hinweis im title) */ .lizenz-gesperrt, .lizenz-gesperrt:hover { opacity: 0.55; cursor: not-allowed; } /* Monitoring: Umschalter Runden/Auswertung, Filter, Karte der Auswertung */ .mon-ansicht { display: inline-flex; gap: 0.25rem; margin-bottom: 1rem; padding: 0.25rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .mon-ansicht-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.9rem; border: none; border-radius: 999px; background: none; color: var(--text-muted); font: inherit; font-size: 0.9rem; font-weight: 550; cursor: pointer; } .mon-ansicht-btn.aktiv { background: var(--accent-soft); color: var(--accent-text); } .mon-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; } .mon-filter select { width: auto; min-width: 10rem; padding-block: 0.35rem; font-size: 0.875rem; } .mon-karte-block { margin-bottom: 0.75rem; } .mon-karte-block[hidden], .mon-auswertung [hidden] { display: none; } .revier-karte.mon-auswertung-karte { height: clamp(320px, 50vh, 560px); } @media (max-width: 640px) { .mon-filter { width: 100%; } .mon-filter select { flex: 1 1 8rem; min-width: 0; } .revier-karte.mon-auswertung-karte { height: 300px; } } /* ── Hochsitz-Belegung (/js/pages/revier-belegung.js) ── */ .belegung { margin-top: 1rem; } .belegung-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; } .belegung-kopf .einrichtungen-legende-titel { margin: 0; } .belegung-liste { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; } .belegung-zeile { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); } .belegung-zeile.laeuft { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); } .belegung-punkt { flex-shrink: 0; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--warning); } .belegung-zeile.laeuft .belegung-punkt { background: var(--danger); } .belegung-text { flex: 1; min-width: 0; display: grid; gap: 0.1rem; font-size: 0.9rem; overflow-wrap: anywhere; } .belegung-text em { font-style: normal; font-weight: 600; color: var(--danger); } .belegung-leer { font-size: 0.9rem; } /* Ring um belegte Sitze auf der Karte */ .belegung-ring { border-radius: 50%; border: 3px solid #d64545; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); pointer-events: none; } .belegung-ring.jetzt { animation: belegung-puls 2s ease-in-out infinite; } .belegung-ring.spaeter { border-color: #e0a100; border-style: dashed; } @keyframes belegung-puls { 50% { box-shadow: 0 0 0 7px rgba(214, 69, 69, 0.25); } } @media (prefers-reduced-motion: reduce) { .belegung-ring.jetzt { animation: none; } } .belegung-popup { display: grid; gap: 0.3rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--border); } .belegung-popup-zeile { font-size: 0.82rem; } .belegung-popup-zeile.laeuft { color: var(--danger); font-weight: 600; } .belegung-popup-zeile.frei { color: var(--success); font-weight: 600; } .belegung-popup .btn { justify-self: start; } /* ── Revier-Home: Ansitzinfo und Jagdzeiten (/js/pages/revier-ansitz.js) ── */ .home-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1.25rem; margin-bottom: 1.25rem; align-items: start; } .home-raster > .info-panel { margin: 0; } .home-raster > .info-panel[hidden] { display: none; } .ansitz-zeiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0.5rem; } .ansitz-kachel { display: grid; gap: 0.1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); } .ansitz-kachel > .icon { color: var(--accent); margin-bottom: 0.15rem; } .ansitz-wert { font: 600 1.15rem/1.2 var(--font-display); font-variant-numeric: tabular-nums; } .ansitz-text { color: var(--text-muted); font-size: 0.78rem; } .ansitz-wind { margin-top: 0.85rem; } .ansitz-jetzt { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; } .ansitz-jetzt > span { flex: 1; min-width: 0; } .ansitz-jetzt > .icon { color: var(--accent); } .ansitz-pfeil { display: inline-flex; color: var(--accent-text); vertical-align: middle; } .ansitz-pfeil .icon { fill: currentColor; width: 1.15rem; height: 1.15rem; } .ansitz-stunden { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(2.6rem, 1fr); gap: 0.25rem; margin-top: 0.6rem; overflow-x: auto; } .ansitz-stunde { display: grid; justify-items: center; gap: 0.15rem; padding: 0.35rem 0.1rem; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.75rem; font-variant-numeric: tabular-nums; } .ansitz-stunde-zeit { color: var(--text-muted); } .ansitz-stunde-wert { font-weight: 600; } .ansitz-regen { color: var(--info); font-size: 0.68rem; } .ansitz-quelle { margin-top: 0.75rem; } .jz-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .jz-titel { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.4rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .jz-titel.auf .icon { color: var(--success); } .jz-titel.zu .icon { color: var(--danger); } .jz-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.9rem; } .jz-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; } .jz-liste li span { color: var(--text-muted); font-size: 0.82rem; } .jz-bald { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.86rem; } .jz-bald li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.5rem; } .jz-bald li.auf .jz-datum { color: var(--success); } .jz-bald li.zu .jz-datum { color: var(--danger); } .jz-datum { font-weight: 600; font-variant-numeric: tabular-nums; } .jz-spalten + .jz-titel { margin-top: 1rem; } .jz-hinweise { margin-top: 0.85rem; font-size: 0.85rem; } .jz-hinweise summary { cursor: pointer; color: var(--text-muted); } .jz-hinweise ul { margin: 0.4rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; } @media (max-width: 640px) { .jz-spalten { grid-template-columns: minmax(0, 1fr); } } /* Dialog „Hauptpächter wechseln“ (/js/paechter-wechsel.js) */ .pw-bisher { margin: 0.5rem 0 0; padding: 0; border: none; display: grid; gap: 0.4rem; } .pw-bisher legend { margin-bottom: 0.4rem; font-weight: 600; font-size: 0.9rem; } .pw-option { display: flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; cursor: pointer; } .pw-option input { width: auto; margin: 0; } #pwEmail { margin-top: 0.5rem; } /* ── Drückjagd-Planung (/js/pages/revier-drueckjagd.js) ───────────────── */ .mon-runde.dj-vorbei { opacity: 0.72; } .dj-eckdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem 1.5rem; margin: 0; } .dj-eckdaten dt { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } .dj-eckdaten dd { margin: 0.15rem 0 0; } .dj-mehrzeilig { white-space: pre-line; overflow-wrap: anywhere; } .dj-namen-schalter { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; cursor: pointer; } .dj-namen-schalter input { width: auto; margin: 0; } .dj-werkzeuge { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; } .dj-werkzeuge .btn.aktiv { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .dj-modus-hinweis { margin: 0 0 0.6rem; padding: 0.45rem 0.7rem; border-radius: var(--radius-sm); background: var(--info-soft); color: var(--text); } .revier-karte.dj-karte.dj-setzen .leaflet-container { cursor: crosshair; } .dj-speichern-leiste { position: sticky; bottom: 0.75rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.75rem; padding: 0.6rem 0.8rem; border: 1px solid color-mix(in srgb, var(--warning) 50%, var(--border)); border-radius: var(--radius-md); background: var(--warning-soft); box-shadow: var(--schatten-md); font-size: 0.9rem; } .dj-speichern-leiste > span { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; } .dj-tabelle { margin-top: 0.9rem; } .dj-keine-staende { margin-top: 0.9rem; font-size: 0.92rem; color: var(--text-muted); } .dj-nr { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 0.3rem; border-radius: 999px; background: #a88434; color: #fff; font-size: 0.78rem; font-weight: 700; } .dj-stand span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #a88434; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); font: 700 0.8rem var(--font-ui); } .leaflet-marker-draggable.dj-stand span { cursor: grab; } .leaflet-tooltip.dj-stand-label { padding: 0.1rem 0.4rem; border: none; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.92); color: #212521; font-weight: 600; font-size: 0.78rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); } .leaflet-tooltip.dj-stand-label::before { display: none; } .dj-sammel { display: grid; place-items: center; border-radius: 6px; background: #2e6fb0; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } .dj-sammel .icon { width: 18px; height: 18px; } .formular-zeile.dj-zeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .formular-zeile.dj-stand-kopf { grid-template-columns: 7rem minmax(0, 1fr); } .dj-jagdzeiten { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin-top: 0.4rem; font-size: 0.85rem; color: var(--text-muted); } .dj-sektor { margin: 0 0 0.9rem; padding: 0.6rem 0.8rem 0.2rem; border: 1px solid var(--border); border-radius: var(--radius-md); } .dj-sektor legend { padding: 0 0.3rem; font-weight: 600; font-size: 0.9rem; } .dialog-fuss .dj-stand-loeschen { margin-right: auto; color: var(--danger); } @media (max-width: 640px) { .formular-zeile.dj-stand-kopf { grid-template-columns: 6rem minmax(0, 1fr); } } .dj-zeit { display: flex; align-items: center; gap: 0.25rem; } .dj-zeit select { flex: 1 1 0; min-width: 0; padding-left: 0.5rem; padding-right: 1.6rem; } .dj-zeit select:disabled { opacity: 0.5; } .dj-modus-hinweis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; } .dj-listen { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.5rem 1.5rem; margin-top: 0.4rem; } .dj-listen-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .dj-listen-kopf .einrichtungen-legende-titel { margin-bottom: 0; } .dj-eintraege { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.9rem; } .dj-eintrag { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .dj-eintrag-text { flex: 1; min-width: 0; display: grid; gap: 0.1rem; overflow-wrap: anywhere; } .dj-eintrag-text span { color: var(--text-muted); font-size: 0.84rem; } .dj-farbpunkt { flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border-strong); } .dj-gruppe-chip { display: inline-flex; align-items: center; gap: 0.35rem; } .dj-farben { display: flex; flex-wrap: wrap; gap: 0.5rem; } .dj-farbe { position: relative; cursor: pointer; } .dj-farbe input { position: absolute; opacity: 0; width: 1px; height: 1px; } .dj-farbe span { display: block; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); } .dj-farbe input:checked + span { box-shadow: 0 0 0 2px var(--text); } .dj-farbe input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .dj-gruppe-staende { display: grid; gap: 0.35rem; max-height: 16rem; overflow-y: auto; padding-bottom: 0.5rem; } .dj-gruppe-stand { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; } .dj-gruppe-stand input { width: auto; margin: 0; } .leaflet-tooltip.dj-treiben-label { padding: 0.1rem 0.45rem; border: none; border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.85); color: #212521; font-weight: 700; font-size: 0.8rem; box-shadow: none; } .leaflet-tooltip.dj-treiben-label::before { display: none; } .dj-karte.dj-zeichnen .dj-stand, .dj-karte.dj-zeichnen .dj-sammel, .dj-karte.dj-zeichnen .rk-einrichtung { pointer-events: none; } .dj-rollen { margin: -0.2rem 0 0.4rem; } /* ── Drückjagd am Jagdtag (/js/pages/revier-drueckjagd-tag.js, /drueckjagd.html) ── */ .dj-schalter { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; } .dj-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; } .dj-meinstand { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .dj-meinstand-stand { display: flex; gap: 0.9rem; align-items: flex-start; } .dj-meinstand-nr { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #a88434; color: #fff; font: 700 1.35rem var(--font-ui); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); } .dj-meinstand-text { flex: 1; min-width: 0; } .dj-meinstand-text > strong { font-size: 1.05rem; } .dj-meinstand-text dl { display: grid; gap: 0.25rem; margin: 0.4rem 0 0; font-size: 0.9rem; } .dj-meinstand-text dl div { display: flex; gap: 0.5rem; } .dj-meinstand-text dt { min-width: 7.5rem; color: var(--text-muted); } .dj-meinstand-text dd { margin: 0; overflow-wrap: anywhere; } .dj-einladen { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.75rem 1.5rem; } .dj-link-zeile { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; } .dj-link-zeile input { flex: 1 1 14rem; min-width: 0; font-family: ui-monospace, monospace; font-size: 0.82rem; } .dj-marken { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; } .dj-marke { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); font-size: 0.74rem; } .dj-marke.ok { background: var(--success-soft); color: var(--success); } .dj-marke.warn { background: var(--warning-soft); color: var(--warning); } .dj-marke.nein { background: var(--danger-soft); color: var(--danger); } tr.dj-absage td { opacity: 0.6; } .dj-meldung-symbol { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); } .dj-meldung.harvest .dj-meldung-symbol { background: var(--success-soft); color: var(--success); } .dj-meldung.tracking .dj-meldung-symbol { background: var(--warning-soft); color: var(--warning); } .dj-meldung.tracking.offen { border-color: color-mix(in srgb, var(--danger) 50%, var(--border)); } .dj-meldung.tracking.offen .dj-meldung-symbol { background: var(--danger-soft); color: var(--danger); } .badge.dj-badge-warn { background: var(--danger); color: #fff; } .dj-strecke { margin-top: 0.4rem; } .dj-strecke .mon-chips { margin: 0.5rem 0 0.7rem; } .dj-arten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.9rem; } .dj-art { display: grid; justify-items: center; gap: 0.3rem; padding: 0.7rem 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: 600 0.85rem var(--font-ui); cursor: pointer; } .dj-art .icon { width: 22px; height: 22px; } .dj-art[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent); } .dj-meldung-marker { display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); color: #fff; } .dj-meldung-marker.harvest { background: #2f8f4e; } .dj-meldung-marker.tracking { background: #c0392b; } .dj-meldung-marker .icon { width: 14px; height: 14px; } .dj-live { margin-top: 0.75rem; } .dj-live-marker span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2e6fb0; color: #fff; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); font: 700 0.7rem var(--font-ui); } .dj-live-marker.gast span { background: #8e44ad; } .dj-live-marker.alt span { opacity: 0.55; } .dj-farbpunkt.am-stand { background: var(--success); } .dj-meinstand .rd-sektion-intro { margin: 0.9rem 0 0; } .dj-meinstand .dj-knoepfe + .rd-sektion-intro { padding-top: 0.75rem; border-top: 1px solid var(--border); } /* Speicherstatus des Drückjagd-Plans */ .dj-speichern-leiste.gespeichert { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: var(--success-soft); } .dj-speichern-leiste.offen, .dj-speichern-leiste.speichert { border-color: var(--border); background: var(--surface-2); } .dj-speichern-leiste .einrichtungen-status { font-size: 0.88rem; margin-right: 0; } .dj-offline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.7rem; margin-right: auto; } .dj-offline .feld-hinweis { margin: 0; } /* ── Drückjagd auf Handy und Tablet: Reiter, kompakte Listen, große Karte ── */ .dj-tabs, .dj-nur-mobil, .dj-kompakt { display: none; } .dj-nur-mobil[hidden] { display: none !important; } .dj-kompakt { list-style: none; margin: 0; padding: 0; gap: 0.45rem; } .dj-kompakt-eintrag { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: inherit; font: inherit; text-align: left; } button.dj-kompakt-eintrag { cursor: pointer; } button.dj-kompakt-eintrag:active { background: var(--surface-2); } .dj-kompakt-text { flex: 1; min-width: 0; display: grid; gap: 0.12rem; } .dj-kompakt-text strong { font-size: 0.95rem; overflow-wrap: anywhere; } .dj-kompakt-text > span { font-size: 0.82rem; color: var(--text-muted); overflow-wrap: anywhere; } .dj-kompakt-pfeil { flex-shrink: 0; color: var(--text-muted); } .dj-kompakt-eintrag.dj-absage { opacity: 0.6; } .dj-nr.dj-nr-gross { min-width: 34px; height: 34px; font-size: 0.9rem; flex-shrink: 0; } @media (max-width: 1023px) { .dj-knopf-text { display: none; } .dj-nur-mobil { display: inline; } .btn.dj-nur-mobil { display: inline-flex; } /* Kopfleiste: eine Zeile mit Symbolknöpfen */ .dj-kopfleiste { flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; } .dj-kopfleiste { flex-wrap: nowrap; align-items: center; } .dj-kopfleiste .strecke-leiste-aktionen { width: auto; flex: 0 0 auto; flex-wrap: nowrap; gap: 0.35rem; margin-left: auto; } .dj-kopfleiste .strecke-leiste-aktionen .btn { flex: 0 0 auto; } .dj-kopfleiste .btn { min-width: 40px; justify-content: center; } .dj-kopfleiste .dj-offline { flex-wrap: wrap; min-width: 0; } .dj-offline { margin-right: 0; } .dj-offline .feld-hinweis:empty { display: none; } .dj-offline .feld-hinweis { order: 2; flex-basis: 100%; font-size: 0.78rem; } /* Reiter: bleiben unter der App-Leiste stehen */ .dj-tabs { display: flex; position: sticky; top: var(--topbar-h); z-index: 150; gap: 0.2rem; margin: 0 0 0.75rem; padding: 0.35rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--schatten-sm); } .dj-tab { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.4rem 0.05rem; border: none; border-radius: var(--radius-sm); background: none; color: var(--text-muted); font: 600 0.66rem var(--font-ui); letter-spacing: -0.01em; cursor: pointer; } .dj-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dj-tab .icon { width: 20px; height: 20px; } .dj-tab.aktiv { background: var(--accent-soft); color: var(--accent-text); } .dj-tab-zahl { position: absolute; top: 1px; right: calc(50% - 22px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-size: 0.62rem; line-height: 17px; text-align: center; } .dj-tab-zahl.warn { background: var(--danger); color: #fff; } #djDetail .dj-tab-aus { display: none !important; } #djDetail > .info-panel { margin-bottom: 0.75rem; } /* Karte: fast bildschirmhoch, Werkzeuge in einer wischbaren Zeile */ .dj-karten-panel .panel-kopf { flex-wrap: wrap; gap: 0.4rem 1rem; } .dj-werkzeuge { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.1rem; } .dj-werkzeuge::-webkit-scrollbar { display: none; } .dj-werkzeuge .btn { flex-shrink: 0; } .revier-karte.gross.dj-karte { height: calc(100dvh - var(--topbar-h) - var(--bottomnav-h) - 250px); min-height: 330px; } .leaflet-tooltip.dj-stand-label { font-size: 0.68rem; padding: 0 0.3rem; } .leaflet-tooltip.dj-treiben-label { font-size: 0.68rem; } /* Listen statt Tabellen */ .dj-kompakt { display: grid; } #djStandTabelle, #djTeilnehmerTabelle { display: none !important; } .panel-kopf, .dj-listen-kopf { flex-wrap: wrap; gap: 0.5rem; } .dj-listen { grid-template-columns: 1fr; } /* Mein Stand: Beschriftung über dem Wert, Knöpfe halbe Breite */ .dj-meinstand-text dl div { flex-direction: column; gap: 0; } .dj-meinstand-text dt { min-width: 0; font-size: 0.76rem; } .dj-meinstand .dj-knoepfe .btn { flex: 1 1 calc(50% - 0.5rem); justify-content: center; } .dj-meinstand-nr { width: 46px; height: 46px; font-size: 1.2rem; } /* Dialoge: Schussrichtung Von/Bis nebeneinander */ .dj-sektor .formular-zeile-3 { grid-template-columns: 1fr 1fr; } .dj-sektor .formular-zeile-3 > :last-child { grid-column: 1 / -1; } .dj-arten { gap: 0.35rem; } .dj-art { padding: 0.6rem 0.2rem; font-size: 0.8rem; } .dj-eckdaten { grid-template-columns: 1fr; gap: 0.6rem; } } /* Login: „Angemeldet bleiben“ */ .angemeldet-bleiben { display: flex; align-items: flex-start; gap: 0.6rem; margin: -0.25rem 0 1rem; cursor: pointer; } .angemeldet-bleiben input { width: auto; margin: 0.2rem 0 0; flex-shrink: 0; } .angemeldet-bleiben span { display: grid; gap: 0.1rem; font-size: 0.9rem; } .angemeldet-bleiben small { color: var(--text-muted); font-size: 0.78rem; line-height: 1.35; } /* ── Standkarte im Vollbild (.dj-vollbild, auch iPhone: per CSS statt Fullscreen-API) ── */ .dj-vollbild-zu { display: none; } .rk-knopf.rk-vollbild { display: flex; align-items: center; justify-content: center; } .rk-knopf.rk-vollbild .icon { width: 17px; height: 17px; } html.dj-vollbild-an, html.dj-vollbild-an body { overflow: hidden; overscroll-behavior: none; } html.dj-vollbild-an .app-topbar, html.dj-vollbild-an .app-bottomnav { display: none !important; } .info-panel.dj-karten-panel.dj-vollbild { position: fixed; inset: 0; z-index: 900; margin: 0; border: none; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; gap: 0.4rem; padding: calc(env(safe-area-inset-top) + 0.5rem) calc(env(safe-area-inset-right) + 0.5rem) calc(env(safe-area-inset-bottom) + 0.5rem) calc(env(safe-area-inset-left) + 0.5rem); background: var(--surface); } .dj-karten-panel.dj-vollbild .panel-kopf { flex-wrap: wrap; gap: 0.4rem 0.8rem; margin: 0; } .dj-karten-panel.dj-vollbild .panel-titel { display: none; } .dj-karten-panel.dj-vollbild .dj-vollbild-zu { display: inline-flex; order: 2; margin-left: auto; } .dj-karten-panel.dj-vollbild .dj-werkzeuge { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; } .dj-karten-panel.dj-vollbild .dj-werkzeuge .btn { flex-shrink: 0; } .dj-karten-panel.dj-vollbild .dj-modus-hinweis { margin: 0; } .dj-karten-panel.dj-vollbild .revier-karte.dj-karte { flex: 1 1 auto; height: auto !important; min-height: 0; } .dj-karten-panel.dj-vollbild .dj-live { max-height: 28vh; overflow-y: auto; margin-top: 0; } html.dj-vollbild-an .dj-speichern-leiste:not([hidden]) { position: fixed; z-index: 950; left: 0.75rem; right: 0.75rem; bottom: calc(env(safe-area-inset-bottom) + 0.75rem); margin: 0; } /* Die Einblend-Animation des Abschnitts hinterlässt ein transform – sonst hinge position:fixed am Abschnitt */ html.dj-vollbild-an #sektionDrueckjagd { transform: none !important; animation: none !important; } @media (max-width: 640px) { .dj-karten-panel.dj-vollbild .panel-kopf { flex-wrap: nowrap; } .dj-karten-panel.dj-vollbild .dj-vollbild-zu { min-width: 40px; justify-content: center; } .dj-karten-panel.dj-vollbild .dj-vollbild-zu span { display: none; } .dj-karten-panel.dj-vollbild .dj-schalter { gap: 0.3rem 0.7rem; font-size: 0.85rem; } } /* ── Bereiche eines Reviers (#rdReiter) auf Handy/Tablet: alle sichtbar statt verstecktem Scrollen ── Symbol über kurzer Beschriftung, sechs gleich breite Felder; wird es doch zu eng (sehr schmale Geräte), zeigt ein Verlauf am Rand, dass die Leiste weitergeht. */ #rdReiter .reiter-kurz { display: none; } @media (max-width: 1023px) { #rdReiter { gap: 0.15rem; padding: 0.3rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--schatten-sm); margin-bottom: 1rem; } #rdReiter .reiter-btn { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 0.2rem; min-width: 3.3rem; padding: 0.45rem 0.05rem; margin: 0; border: none; border-radius: var(--radius-sm); font-size: 0.64rem; font-weight: 600; letter-spacing: -0.01em; } #rdReiter .reiter-btn .icon { width: 21px; height: 21px; } #rdReiter .reiter-btn.aktiv { background: var(--accent-soft); } #rdReiter .reiter-lang { display: none; } #rdReiter .reiter-kurz { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } #rdReiter.reiter-mehr-rechts { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); } #rdReiter.reiter-mehr-links { -webkit-mask-image: linear-gradient(to left, #000 85%, transparent); mask-image: linear-gradient(to left, #000 85%, transparent); } #rdReiter.reiter-mehr-links.reiter-mehr-rechts { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); } }