:root { --farbe-bg: #f2f0e9; --farbe-flaeche: #ffffff; --farbe-primaer: #123a4d; --farbe-primaer-hell: #1c5872; --farbe-akzent: #2f8f8f; --farbe-rot: #c0392b; --farbe-gelb: #e0a52c; --farbe-gruen: #2f9e6f; --farbe-grau-inaktiv: #c7c4b8; --farbe-text: #22252a; --farbe-text-mute: #6c6f74; --schatten-sm: 0 1px 2px rgba(18, 58, 77, 0.08); --schatten-md: 0 6px 18px rgba(18, 58, 77, 0.10); --radius-lg: 18px; --radius-md: 14px; } /* ============ Dark Mode ============ Wird per data-Attribut auf umgeschaltet (siehe dunkelmodusAnwenden() in app.js), Präferenz landet in localStorage und gilt pro Gerät/Browser. Die meisten Flächen im Rest der Datei nutzen ohnehin schon die Variablen oben, werden also automatisch mit umgeschaltet - hier zusätzlich die wenigen Stellen, die bewusst einen fest codierten Pastellton nutzen (z.B. Benachrichtigungs-Overlays, Prioritäts-Bubbles), da diese sonst auf dunklem Grund zu hell/grell wirken würden. */ [data-theme="dunkel"] { --farbe-bg: #14181c; --farbe-flaeche: #1e2429; --farbe-primaer: #4a9fc7; --farbe-primaer-hell: #6bb8db; --farbe-akzent: #4fb3b3; --farbe-rot: #e5766a; --farbe-gelb: #e0a52c; --farbe-gruen: #4fc994; --farbe-grau-inaktiv: #4a5058; --farbe-text: #e8e6e0; --farbe-text-mute: #9a9da3; --schatten-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --schatten-md: 0 6px 18px rgba(0, 0, 0, 0.4); } [data-theme="dunkel"] .neue-nachrichten-overlay:not([hidden]) { background: #1a2e38; border-color: #2b4a58; } [data-theme="dunkel"] .neue-nachrichten-titel { border-color: #2b4a58; } [data-theme="dunkel"] .neue-nachrichten-eintrag:hover, [data-theme="dunkel"] .neue-nachrichten-eintrag:active { background: #23404d; } [data-theme="dunkel"] .unbestaetigt-overlay:not([hidden]) { background: #3a3218; border-color: #574a20; } [data-theme="dunkel"] .unbestaetigt-titel { color: #e0c060; border-color: #574a20; } [data-theme="dunkel"] .unbestaetigt-eintrag:hover, [data-theme="dunkel"] .unbestaetigt-eintrag:active { background: #4a3f1f; } [data-theme="dunkel"] .sprechwunsch-overlay:not([hidden]) { background: #2a1a18; } [data-theme="dunkel"] .sprechwunsch-eintrag:hover, [data-theme="dunkel"] .sprechwunsch-eintrag:active { background: #3d2420; } [data-theme="dunkel"] .status-feed-eintrag:hover, [data-theme="dunkel"] .status-feed-eintrag:active { background: #262c32; } [data-theme="dunkel"] .nachricht-eintrag.prio-2 .nachricht-bubble { background: #3d2420; } [data-theme="dunkel"] .nachricht-eintrag.gesendet .nachricht-bubble { background: #1d3830; } [data-theme="dunkel"] .btn-abmelden { background: #3d2420; } [data-theme="dunkel"] .btn-einsatzinfo-loeschen { background: #3d2420; } [data-theme="dunkel"] .btn-befehlstelle-loesen { background: #3d2420; } [data-theme="dunkel"] .karten-basis-auswahl, [data-theme="dunkel"] .sprechwunsch-overlay:not([hidden]), [data-theme="dunkel"] .karte-oben-rechts .neue-nachrichten-overlay:not([hidden]) { background: rgba(30, 36, 41, 0.97); } [data-theme="dunkel"] .uebersicht-karte { background: #2a2e33; } [data-theme="dunkel"] .uebersicht-status-punkt.leer { background: #4a5058; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; background: var(--farbe-bg); color: var(--farbe-text); -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain; /* kein Pull-to-Refresh-Konflikt in der installierten PWA */ } button { touch-action: manipulation; /* kein 300ms-Tap-Delay, kein Doppeltipp-Zoom */ -webkit-touch-callout: none; /* kein Kontextmenü bei langem Antippen */ -webkit-user-select: none; user-select: none; } /* ============ Topbar ============ */ .topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top)); background: var(--farbe-primaer); color: #fff; position: sticky; top: 0; z-index: 10; box-shadow: var(--schatten-md); } .topbar-info { display: flex; align-items: center; gap: 12px; min-width: 0; } .benutzer-anzeige-block { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; } .benutzer-anzeige { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .benutzer-leitstelle-anzeige:not([hidden]) { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-version-anzeige { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; margin-right: 4px; } .verbindung { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(255,255,255,0.12); white-space: nowrap; } .verbindung-punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .verbindung.online { color: #bdeeda; } .verbindung.offline { color: #f2c4bd; } .benutzer-funktion-anzeige:not([hidden]) { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255,255,255,0.75); white-space: nowrap; } .btn-icon:not([hidden]) { background: rgba(255,255,255,0.12); border: none; color: #fff; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.15s ease; } .btn-icon:hover { background: rgba(255,255,255,0.22); } .btn-icon:active { transform: scale(0.94); } /* ============ Login ============ */ .login-bereich:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 100vh; min-height: 100dvh; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); } .login-karte { width: 100%; max-width: 420px; background: var(--farbe-flaeche); border-radius: var(--radius-lg); box-shadow: var(--schatten-md); padding: 32px 28px; text-align: center; } .login-fussnote { width: 100%; max-width: 420px; text-align: center; color: var(--farbe-text-mute); font-size: 11.5px; line-height: 1.5; } .login-fussnote p { margin: 0; } .login-karte h1 { margin: 0 0 4px; font-size: 22px; font-weight: 600; } .login-untertitel { margin: 0 0 24px; color: var(--farbe-text-mute); font-size: 14px; } .btn-icon-inline { vertical-align: -4px; margin-right: 8px; } .btn-primary, .btn-secondary, .btn-abmelden { font-size: 16px; font-weight: 600; padding: 14px 20px; border-radius: var(--radius-md); border: none; cursor: pointer; width: 100%; transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease; } .btn-primary { background: var(--farbe-primaer); color: #fff; box-shadow: var(--schatten-sm); } .btn-primary:active, .btn-secondary:active { transform: scale(0.98); } .btn-secondary { background: var(--farbe-bg); color: var(--farbe-primaer); } .btn-benutzerhandbuch { display: block; box-sizing: border-box; text-align: center; text-decoration: none; margin: 10px 0; } .trenner { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--farbe-text-mute); font-size: 13px; } .trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: #e4e1d6; } .qr-scan-bereich { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .qr-video { width: 100%; border-radius: var(--radius-md); background: #000; aspect-ratio: 4 / 3; object-fit: cover; } .manuelle-form { display: flex; flex-direction: column; gap: 10px; } .manuelle-form input { font-size: 16px; padding: 13px 14px; border-radius: var(--radius-md); border: 1px solid #ddd9cb; background: var(--farbe-bg); } .manuelle-form input:focus { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; } .manuelle-form input:disabled { opacity: 0.6; } .fehler { color: var(--farbe-rot); font-size: 14px; min-height: 20px; margin: 14px 0 0; } /* ============ Hauptansicht ============ */ .haupt-bereich { max-width: 720px; margin: 0 auto; padding: 20px 16px calc(40px + env(safe-area-inset-bottom)); } /* Zentrale nutzt bewusst die volle Bildschirmbreite (PC/Tablet-Oberfläche) statt der schmalen, für Handy-Statustasten gedachten Spalte - nur ein moderates seitliches Padding bleibt. */ .haupt-bereich.zentrale-modus { max-width: none; padding-left: 24px; padding-right: 24px; } .niemand-online-banner:not([hidden]) { background: #fff3cd; color: #6b5400; border: 1px solid #f0d878; border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px; font-weight: 600; text-align: center; } [data-theme="dunkel"] .niemand-online-banner:not([hidden]) { background: #3a3218; color: #e0c060; border-color: #574a20; } .niemand-online-banner-zusatz { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; } .upi-alarm-bereich:not([hidden]) { margin-bottom: 16px; } .upi-alarm-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .upi-alarm-eintrag { background: #fdecea; border: 2px solid var(--farbe-rot); border-radius: var(--radius-md); padding: 12px 14px; animation: upiAlarmPuls 1.2s ease-in-out infinite; } @keyframes upiAlarmPuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.35); } 50% { box-shadow: 0 0 0 6px rgba(192,57,43,0); } } .upi-alarm-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .upi-alarm-stichwort { font-weight: 800; font-size: 15px; color: var(--farbe-rot); text-transform: uppercase; letter-spacing: 0.02em; } .upi-alarm-zeit { font-size: 12px; color: var(--farbe-text-mute); white-space: nowrap; } .upi-alarm-text { font-size: 13.5px; color: var(--farbe-text); margin: 6px 0; white-space: pre-wrap; } .upi-alarm-adresse { font-size: 12.5px; color: var(--farbe-text-mute); margin: 0 0 8px; } .btn-upi-alarm-quittieren { background: var(--farbe-rot); color: #fff; border: none; border-radius: var(--radius-md); padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; } .btn-upi-alarm-quittieren:hover { background: #a33327; } [data-theme="dunkel"] .upi-alarm-eintrag { background: #3a1f1c; } .app-download-banner:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #eaf1f5; /* dezentes Blau statt Gelb - bewusst kein Alarm-/Warncharakter wie beim "Niemand online"-Banner, rein informativ */ color: #123a4d; border: 1px solid #cfe0e8; border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 16px; font-size: 13px; line-height: 1.4; } .app-download-banner a { flex-shrink: 0; background: var(--farbe-primaer); color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; padding: 8px 14px; border-radius: 999px; white-space: nowrap; } [data-theme="dunkel"] .app-download-banner:not([hidden]) { background: #1c2a33; color: #cfe0e8; border-color: #2a3f4c; } .einsatzinfo-anzeige:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--farbe-flaeche); border: 1px solid #ddd9cb; border-left: 4px solid var(--farbe-primaer); border-radius: var(--radius-md); padding: 13px 14px; /* ca. 30% mehr als vorher (10px), Platz für den SOS-Button */ margin-bottom: 16px; } .einsatzinfo-anzeige-inhalt { flex: 1 1 auto; min-width: 0; } .einsatzinfo-anzeige-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--farbe-text-mute); margin-bottom: 3px; } .einsatzinfo-anzeige-text { display: block; font-size: 14px; color: var(--farbe-text); white-space: pre-wrap; word-break: break-word; } [data-theme="dunkel"] .einsatzinfo-anzeige:not([hidden]) { border-left-color: var(--farbe-primaer-hell); } .btn-sos { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; border: none; background: #e67e22; /* orange, wie gefordert - bewusst deutlich von den roten Statustasten/Warnfarben abgesetzt */ color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25); user-select: none; -webkit-user-select: none; touch-action: none; /* verhindert Scroll-/Zoom-Gesten während des Haltens auf Touch-Geräten */ } .btn-sos:active, .btn-sos.sos-aktiv { background: #d35400; } /* Dezenter Puls während der 3-Sekunden-Haltephase - rein visuell, bewusst kein Ton (siehe app.js) */ .btn-sos.sos-haltend { animation: sosPuls 0.6s ease-in-out infinite; } @keyframes sosPuls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* Wechselt während der laufenden Audioaufnahme zwischen Orange und Rot - vertrautes Muster aus dem Digitalfunk (Notruftaste), löst .sos-aktiv (einfarbig dunkelorange) für die Dauer der Aufnahme ab. Rein visuell, weiterhin bewusst kein Ton. */ .btn-sos.sos-aufnahme { animation: sosFarbwechsel 1s step-start infinite; } @keyframes sosFarbwechsel { 0%, 49% { background: #e67e22; } 50%, 100% { background: #c0392b; } } .status-grid:not([hidden]) { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 24px; max-width: 420px; } .status-bezeichnung-anzeige { min-height: 20px; margin: -14px 0 20px; font-size: 13.5px; font-weight: 600; color: var(--farbe-primaer); text-align: center; } .status-taste { aspect-ratio: 1 / 1; border: none; border-radius: var(--radius-md); font-size: 18px; font-weight: 600; background: var(--farbe-flaeche); color: var(--farbe-text); cursor: pointer; box-shadow: var(--schatten-sm); transition: background 0.15s ease, color 0.15s ease, transform 0.08s ease, opacity 0.15s ease; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .status-taste:active { transform: scale(0.95); } .status-taste.inaktiv { background: var(--farbe-grau-inaktiv); color: #4a4a44; opacity: 0.55; box-shadow: none; } [data-theme="dunkel"] .status-taste.inaktiv { color: #e8e6e0; } .status-taste.aktiv-gelb { background: var(--farbe-gelb); color: #3d2600; } .status-taste.aktiv-gruen { background: var(--farbe-gruen); color: #fff; } [data-theme="dunkel"] .status-taste.aktiv-gruen { color: #0d2018; } /* Füllanzeige während der 3-Sekunden-Haltegeste: wächst von unten nach oben; wird die Klasse entfernt (Loslassen vor Ablauf), springt sie dank "transition: none" in der Grundregel sofort auf 0 zurück, statt sichtbar rückwärts zu laufen. Dunkle, kräftige Farbe statt hellem Halbtransparent, damit sie auf JEDER Tastenfarbe (weiß/grau/gelb/grün) gut sichtbar ist. */ .status-taste::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0%; background: rgba(18, 58, 77, 0.65); transition: none; } /* WICHTIGER FIX, auf Wunsch: Diese Animationsdauer muss EXAKT mit STATUS_HALTEZEIT_MS in app.js übereinstimmen (beide aktuell 1 Sekunde) - vorher stand hier fälschlich "2s", während die JS-Logik bereits nach 1 Sekunde auslöst. Ergebnis: Der Füllbalken lief eine für den Nutzer nicht nachvollziehbare 2-Sekunden-Animation, wurde aber exakt nach der Hälfte (1 Sekunde, wenn STATUS_HALTEZEIT_MS abläuft) abrupt entfernt und sprang dank "transition: none" in der Grundregel sofort auf 0 zurück - sah wie ein Abbruch/Fehlschlag aus ("Balken bricht bei der Hälfte ab"), obwohl der Status zu diesem Zeitpunkt bereits erfolgreich gesendet wurde. Rein kosmetischer Fehler, keine tatsächliche Fehlfunktion beim Senden selbst - aber irreführend genug, um einen Sendefehler zu vermuten, wo keiner war. */ .status-taste.wird-gehalten::after { height: 100%; transition: height 1s linear; } /* Karteireiter über dem Nachrichten-/E-Mail-Bereich, auf Wunsch ergänzt - bewusst OHNE feste Höhe am Seiten-Container (.karteireiter-seite): die Größe ergibt sich weiterhin allein aus dem jeweiligen Seiteninhalt, genau wie vor der Umstellung. Nicht aktive Seiten werden komplett aus dem Layout genommen (hidden-Attribut, kein display:none nötig), nehmen also auch keinen Platz ein. */ /* WICHTIGER FIX: ":not([hidden])" ergänzt - vorher setzte diese Regel bedingungslos "display: flex", was das hidden-Attribut (setzt browserseitig "display: none") komplett überschrieb, da beide Regeln dieselbe Spezifität haben und diese hier im Stylesheet später kommt. Dadurch blieb die Leiste beim Client trotz el.karteireiterLeiste.hidden = true weiterhin sichtbar - dasselbe Bug-Muster wie bereits einmal bei .nachrichten-splitter/.email-panel an anderer Stelle in dieser Datei behoben. */ .karteireiter-leiste:not([hidden]) { display: flex; gap: 4px; margin: 10px 0 0; border-bottom: 2px solid #ddd9cb; } .karteireiter-btn { padding: 8px 16px; border: none; background: none; font-size: 13.5px; font-weight: 600; color: var(--farbe-text-mute); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; /* gleicht die 2px Rahmenlinie der Leiste aus, Unterstrich sitzt exakt auf ihr */ } .karteireiter-btn:hover { color: var(--farbe-primaer); } .karteireiter-btn.karteireiter-aktiv { color: var(--farbe-primaer); border-bottom-color: var(--farbe-primaer); } .karteireiter-seite { padding-top: 14px; } .nachrichten-split-bereich { display: flex; align-items: stretch; flex-wrap: wrap; /* auf schmalen Bildschirmen fällt es automatisch untereinander */ gap: 0; } .nachrichten-linke-spalte { flex: 1 1 280px; min-width: 260px; } .nachrichten-splitter:not([hidden]) { width: 6px; flex: 0 0 6px; cursor: col-resize; background: #ddd9cb; border-radius: 3px; margin: 0 10px; align-self: stretch; } .nachrichten-splitter:hover, .nachrichten-splitter.aktiv { background: var(--farbe-primaer); } .nachrichten-rechte-spalte:not([hidden]) { flex: 2 1 320px; min-width: 260px; background: var(--farbe-flaeche); border-radius: var(--radius-md); box-shadow: var(--schatten-sm); } /* Auf schmalen Bildschirmen macht ein Spalten-Trenner keinen Sinn (untereinander gestapelt) */ @media (max-width: 720px) { .nachrichten-splitter { display: none !important; } .nachrichten-rechte-spalte { display: none !important; } .nachrichten-linke-spalte { flex-basis: 100% !important; } } .email-panel:not([hidden]) { display: flex; flex-direction: column; gap: 10px; padding: 12px; height: 100%; overflow-y: auto; } .email-kopf { display: flex; align-items: center; justify-content: space-between; } .email-titel { font-weight: 700; font-size: 14px; } .email-kopf-aktionen { display: flex; gap: 4px; } .btn-icon-klein { border: none; background: var(--farbe-bg); border-radius: 50%; width: 28px; height: 28px; font-size: 13px; cursor: pointer; } .kartenlesezeichen-leiste { display: flex; align-items: center; gap: 4px; } .kartenlesezeichen-leiste .karten-basis-auswahl { max-width: 160px; } .email-konto-form:not([hidden]) { display: flex; flex-direction: column; gap: 8px; } .email-konto-hinweis { font-size: 12px; color: var(--farbe-text-mute); margin: 0; } .email-ordner-reiter { display: flex; gap: 4px; margin: 8px 0; border-bottom: 1px solid #ddd9cb; } .email-ordner-reiter-btn { flex: 1; padding: 6px 8px; border: none; background: none; font-size: 12.5px; font-weight: 600; color: var(--farbe-text-mute); cursor: pointer; border-bottom: 2px solid transparent; } .email-ordner-reiter-btn.email-ordner-reiter-aktiv { color: var(--farbe-primaer); border-bottom-color: var(--farbe-primaer); } .email-konto-zeile { display: flex; gap: 6px; } .email-konto-zeile input[type="text"] { flex: 2 1 auto; min-width: 0; } .email-konto-zeile input[type="number"] { flex: 0 0 70px; } .email-konto-zeile label { display: flex; align-items: center; gap: 4px; font-size: 12.5px; white-space: nowrap; } .email-konto-form input, .email-konto-form select, .email-senden-form input, .email-senden-form textarea { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #ddd9cb; background: var(--farbe-flaeche); color: var(--farbe-text); font-size: 13px; box-sizing: border-box; } .email-senden-form textarea { resize: vertical; font-family: inherit; } .email-konto-aktionen { display: flex; gap: 8px; } .email-konto-aktionen .btn-primary, .email-konto-aktionen .btn-secondary { width: auto; flex: 1 1 0; padding: 9px 14px; font-size: 13.5px; } .email-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .email-eintrag { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border-radius: 8px; cursor: pointer; border-bottom: 1px solid #f2f0e6; } .email-eintrag:hover { background: var(--farbe-bg); } .email-eintrag-kopf { display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; color: var(--farbe-text-mute); } .email-eintrag-von { font-weight: 600; color: var(--farbe-text); } .email-eintrag-betreff { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .email-zurueck { width: auto !important; padding: 5px 12px !important; font-size: 12.5px !important; margin-bottom: 4px; align-self: flex-start; } .email-lesen-bereich:not([hidden]), .email-senden-form:not([hidden]) { display: flex; flex-direction: column; gap: 8px; } .email-lesen-zeile { margin: 0; font-size: 13px; } .email-lesen-koerper { white-space: pre-wrap; font-size: 13.5px; line-height: 1.5; padding: 8px; background: var(--farbe-bg); border-radius: 8px; max-height: 220px; overflow-y: auto; } .email-lesen-anhaenge { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .email-lesen-anhaenge li a { font-size: 12.5px; } .email-lesen-aktionen { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .btn-email-loeschen { margin-left: auto; background: none; border: 1px solid var(--farbe-rot); color: var(--farbe-rot); border-radius: var(--radius-md); padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; } .btn-email-loeschen:hover { background: var(--farbe-rot); color: #fff; } .email-senden-anhaenge-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .email-senden-anhaenge-liste li { display: flex; justify-content: space-between; align-items: center; font-size: 12px; background: var(--farbe-bg); border-radius: 6px; padding: 4px 8px; } .email-senden-anhaenge-liste button { border: none; background: none; cursor: pointer; color: var(--farbe-rot); font-size: 13px; } .nachrichten-filter-bar:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #eaf1f5; border: 1px solid #cfe0e8; border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 10px; font-size: 13px; } .nachrichten-filter-bar span { font-weight: 600; color: var(--farbe-primaer); } .nachrichten-filter-bar-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .btn-nachrichtenverlauf-loeschen { padding: 5px 12px; font-size: 12.5px; font-weight: 600; border-radius: 999px; margin-top: 0; } /* ============ Zentrale-Layout: Karte + Übersichtstabelle statt Statustasten ============ */ .zentrale-bereich { margin-bottom: 24px; } .karten-und-feed-bereich { display: flex; align-items: stretch; flex-wrap: wrap; /* auf schmalen Bildschirmen fällt es automatisch untereinander */ gap: 0; height: 280px; /* Startwert, per karten-hoehen-splitter verschiebbar (siehe app.js) */ min-height: 160px; } .karten-spalte { flex: 2 1 320px; min-width: 280px; height: 100%; } .karten-splitter { width: 6px; flex: 0 0 6px; cursor: col-resize; background: #ddd9cb; border-radius: 3px; margin: 0 6px; align-self: stretch; } .karten-splitter:hover, .karten-splitter.aktiv { background: var(--farbe-primaer); } .karten-hoehen-splitter { height: 6px; cursor: row-resize; background: #ddd9cb; border-radius: 3px; margin: 8px 0; } .karten-hoehen-splitter:hover, .karten-hoehen-splitter.aktiv { background: var(--farbe-primaer); } /* Auf schmalen Bildschirmen macht ein Spalten-Trenner keinen Sinn (untereinander gestapelt) */ @media (max-width: 720px) { .karten-splitter { display: none; } .karten-spalte { flex-basis: 100% !important; } .karten-hoehen-splitter { display: none; } .karten-und-feed-bereich { height: auto !important; } } .status-feed-spalte { position: relative; flex: 1 1 220px; min-width: 200px; height: 100%; background: var(--farbe-flaeche); border-radius: var(--radius-md); box-shadow: var(--schatten-sm); padding: 10px 12px; overflow-y: auto; } .neue-nachrichten-overlay:not([hidden]) { position: sticky; top: 0; z-index: 5; background: #eaf1f5; border: 1px solid #cfe0e8; border-radius: var(--radius-md); box-shadow: var(--schatten-md); padding: 8px 0; margin: -10px -12px 10px; } .neue-nachrichten-titel { font-size: 12.5px; font-weight: 700; color: var(--farbe-primaer); padding: 0 12px 6px; border-bottom: 1px solid #cfe0e8; margin-bottom: 4px; } .neue-nachrichten-liste { list-style: none; margin: 0; padding: 0; } .neue-nachrichten-eintrag { display: flex; flex-direction: column; gap: 2px; padding: 7px 12px; cursor: pointer; font-size: 13px; } .neue-nachrichten-eintrag:hover, .neue-nachrichten-eintrag:active { background: #d9e6ee; } .neue-nachrichten-kopf { display: flex; align-items: center; gap: 8px; } .neue-nachrichten-eintrag .neue-nachrichten-name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .neue-nachrichten-eintrag .neue-nachrichten-anzahl { background: var(--farbe-primaer); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; flex-shrink: 0; } .neue-nachrichten-vorschau { font-size: 12px; color: var(--farbe-text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .unbestaetigt-overlay:not([hidden]) { position: sticky; top: 0; z-index: 5; background: #fff8e1; border: 1px solid #f0e0a8; border-radius: var(--radius-md); box-shadow: var(--schatten-md); padding: 8px 0; margin: -10px -12px 10px; } .unbestaetigt-titel { font-size: 12.5px; font-weight: 700; color: #8a6d00; padding: 0 12px 6px; border-bottom: 1px solid #f0e0a8; margin-bottom: 4px; } .unbestaetigt-liste { list-style: none; margin: 0; padding: 0; } .unbestaetigt-eintrag { display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; } .unbestaetigt-eintrag:hover, .unbestaetigt-eintrag:active { background: #f5ecc7; } .unbestaetigt-eintrag .unbestaetigt-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .btn-unbestaetigt-bestaetigen { border: none; border-radius: 999px; padding: 4px 12px; font-size: 11.5px; font-weight: 700; background: var(--farbe-gruen); color: #fff; cursor: pointer; flex-shrink: 0; } .btn-unbestaetigt-bestaetigen:disabled { opacity: 0.6; cursor: default; } .status-feed-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #eeece2; } .status-feed-kopf-rechts { display: flex; align-items: center; gap: 8px; } .verlauf-typ-dropdown { position: relative; } .verlauf-typ-dropdown .gis-layer-dropdown-knopf { padding: 4px 10px; font-size: 11.5px; border-radius: 999px; } .verlauf-stumm-label:not([hidden]) { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--farbe-text-mute); cursor: pointer; flex-shrink: 0; white-space: nowrap; } .btn-verlauf-manuell { border: none; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer; background: var(--farbe-bg); color: var(--farbe-primaer); flex-shrink: 0; } .verlauf-manuell-form:not([hidden]) { display: flex; gap: 6px; margin-bottom: 8px; } .verlauf-manuell-form input { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 8px; border: 1px solid #ddd9cb; background: var(--farbe-flaeche); color: var(--farbe-text); font-size: 13px; } .verlauf-manuell-form button { border: none; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; background: var(--farbe-primaer); color: #fff; cursor: pointer; flex-shrink: 0; } .status-feed-titel { font-size: 12.5px; font-weight: 700; color: var(--farbe-text-mute); text-transform: uppercase; letter-spacing: 0.03em; } .status-feed-liste { list-style: none; margin: 0; padding: 0; } .btn-ptt { border: none; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; /* verhindert Scrollen/Zoomen während des Gedrückthaltens auf Touch-Geräten */ background: var(--farbe-primaer); color: #fff; transition: background-color 0.1s ease, transform 0.1s ease; } .btn-ptt.aktiv { background: var(--farbe-rot); transform: scale(0.97); } /* Wrapper nötig, damit das Aufnahme-Badge absolut relativ zur Taste positioniert werden kann, ohne selbst Platz im umgebenden Flex-Layout zu beanspruchen - vorher war die Anzeige ein normales Geschwisterelement, das beim Einblenden Platz beanspruchte und dadurch die PTT-Taste sichtbar zur Seite schob. */ .btn-ptt-wrapper { position: relative; display: inline-flex; } .ptt-aufnahme-indikator { position: absolute; top: -4px; right: -4px; font-size: 13px; line-height: 1; pointer-events: none; /* Badge darf keine Klicks abfangen, die eigentlich der Taste darunter gelten */ } .ptt-aufnahme-indikator:not([hidden]) { animation: ptt-sprecher-blinken 1.8s ease-in-out infinite; } .btn-ptt.gesperrt { background: var(--farbe-grau-inaktiv); color: var(--farbe-text); cursor: not-allowed; animation: ptt-sprecher-blinken 1.4s ease-in-out infinite; } .btn-ptt-client:not([hidden]) { display: block; width: 100%; margin-top: 10px; margin-bottom: 20px; padding: 16px; border-radius: var(--radius-md); font-size: 15px; font-weight: 700; box-shadow: var(--schatten-sm); } .btn-ptt-zentrale:not([hidden]) { flex: 0 0 auto; padding: 8px 14px; border-radius: var(--radius-md); font-size: 13.5px; font-weight: 700; box-shadow: var(--schatten-sm); white-space: nowrap; } .ptt-teilnehmer-liste:not([hidden]) { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; background: var(--farbe-flaeche); border-radius: var(--radius-md); padding: 6px 8px; box-shadow: var(--schatten-sm); } .ptt-teilnehmer-eintrag { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; } .ptt-teilnehmer-name { flex: 1; } .ptt-teilnehmer-zeit { font-size: 11px; color: var(--farbe-text-mute); font-family: "SFMono-Regular", Consolas, monospace; } @keyframes ptt-sprecher-blinken { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .status-feed-eintrag { display: flex; align-items: baseline; gap: 6px; padding: 6px 2px; border-bottom: 1px solid #f2f0e6; cursor: pointer; font-size: 12.5px; } /* Ohne diese Regel bleibt eine per Anzeige-Filter (Verlauf-Typ-Checkboxen) ausgeblendete Zeile trotz gesetztem hidden-Attribut sichtbar - die Klassen-Regel oben (display: flex) hat eine höhere CSS-Spezifität als das browsereigene [hidden] { display: none }, das damit stillschweigend überschrieben wird. [hidden] als zusätzlicher Attribut-Selektor erhöht die Spezifität gerade so weit, dass diese Regel gewinnt, ganz ohne !important. */ .status-feed-eintrag[hidden] { display: none; } .status-feed-eintrag { border-left: 3px solid transparent; padding-left: 6px; } .status-feed-eintrag:last-child { border-bottom: none; } .btn-verlauf-abspielen { flex-shrink: 0; border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 10px; line-height: 1; background: var(--farbe-primaer); color: #fff; cursor: pointer; } .btn-verlauf-abspielen:hover { background: var(--farbe-primaer-hell); } .verlauf-abspiel-player { padding: 6px 2px 8px 6px; border-bottom: 1px solid #f2f0e6; font-size: 12px; color: var(--farbe-text-mute); } .status-feed-eintrag:hover, .status-feed-eintrag:active { background: #f6f4ea; } .status-feed-eintrag .status-feed-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--farbe-text); } .status-feed-eintrag .status-feed-zeit { flex-shrink: 0; color: var(--farbe-text-mute); font-size: 11px; font-family: "SFMono-Regular", Consolas, monospace; } .verlauf-eintrag-Status { border-left-color: #4a90d9; } .verlauf-eintrag-StatusBestaetigung { border-left-color: var(--farbe-gruen); } .verlauf-eintrag-Nachricht { border-left-color: #b07fd1; } .verlauf-eintrag-Gespraech { border-left-color: var(--farbe-rot); } .verlauf-eintrag-PttVerbindung { border-left-color: #8a8a8a; } .verlauf-eintrag-Manuell { border-left-color: var(--farbe-text-mute); } .verlauf-eintrag-EmailEingang { border-left-color: #d9a13a; } .verlauf-eintrag-EmailAusgang { border-left-color: #3ab0a1; } .verlauf-eintrag-EmailGeloescht { border-left-color: var(--farbe-rot); } .verlauf-eintrag-NachrichtGeloescht { border-left-color: #c0392b; } .verlauf-eintrag-Annektiert { border-left-color: #6a4fb5; } .verlauf-eintrag-AnnektierungGeloest { border-left-color: #9c7fd6; } .uebersicht-karte-wrapper { position: relative; height: 100%; } .uebersicht-karte { height: 100%; border-radius: var(--radius-md); box-shadow: var(--schatten-sm); background: #e0ded2; /* sichtbarer Platzhalter, solange Leaflet noch lädt */ } .karte-oben-rechts { position: absolute; top: 10px; right: 10px; left: 10px; max-width: 280px; margin-left: auto; display: flex; flex-direction: column; gap: 8px; z-index: 650; /* über Leaflets Marker-Pane (600), unter Modals (1100) */ pointer-events: none; /* Container blockt keine Kartenklicks - Kinder aktivieren es gezielt wieder */ } .karten-basis-auswahl { pointer-events: auto; padding: 7px 10px; border-radius: var(--radius-md); border: 1px solid #ddd9cb; background: rgba(255, 255, 255, 0.97); box-shadow: var(--schatten-sm); font-size: 12.5px; color: var(--farbe-text); } .maus-koordinaten-anzeige:not([hidden]) { position: absolute; bottom: 6px; left: 6px; z-index: 650; background: rgba(255, 255, 255, 0.85); color: #444; font-size: 10.5px; font-family: "SFMono-Regular", Consolas, monospace; padding: 2px 7px; border-radius: 4px; pointer-events: none; white-space: nowrap; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; } .einsatzgebiet-hover-anzeige:not([hidden]) { bottom: 26px; } /* eine Zeile über der Koordinatenanzeige */ [data-theme="dunkel"] .maus-koordinaten-anzeige:not([hidden]) { background: rgba(30, 36, 41, 0.85); color: #c8c5ba; } .sprechwunsch-overlay:not([hidden]) { background: rgba(255, 255, 255, 0.97); border-radius: var(--radius-md); box-shadow: var(--schatten-md); padding: 8px 0; max-height: 260px; overflow-y: auto; } .gis-layer-dropdown { position: relative; } .ptt-geraete-popup:not([hidden]) { position: fixed; /* wird per JS positioniert, siehe pttGeraeteAuswahlOeffnen() - gleiches Muster wie das Tabellen-Aktion-Popup */ z-index: 900; background: var(--farbe-flaeche); border: 1px solid #ddd9cb; border-radius: var(--radius-md); box-shadow: var(--schatten-md); padding: 12px; min-width: 240px; display: flex; flex-direction: column; gap: 10px; } .ptt-geraete-zeile { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--farbe-text-mute); } .ptt-geraete-zeile select { padding: 6px; border-radius: 8px; border: 1px solid #ddd9cb; background: var(--farbe-flaeche); color: var(--farbe-text); font-size: 13px; } .ptt-geraete-hinweis { font-size: 11.5px; color: var(--farbe-text-mute); margin: 0; } .gis-layer-dropdown-knopf { padding: 6px 10px; border-radius: 8px; border: 1px solid #ddd9cb; background: var(--farbe-bg); color: var(--farbe-text); font-size: 13px; cursor: pointer; } /* Auf Wunsch ergänzt: dezent roter Hinweis am Art-Filter-Knopf, sobald mindestens eine Art abgehakt wurde - macht sichtbar, dass hier gerade tatsächlich gefiltert wird, statt dass ein aktiver Filter unbemerkt bleibt. "Dezent" bewusst als Grundton + dünnem farbigen Rand statt kräftigem Rot - reine Karten-Filterung ist kein Fehler-/Warnzustand, nur ein Hinweis. */ #btnArtFilterDropdown.aktiv-gefiltert { background: #fdecea; border-color: #e7a8a0; color: #8a3226; } [data-theme="dunkel"] #btnArtFilterDropdown.aktiv-gefiltert { background: #3a2422; border-color: #6b3a32; color: #e0a396; } .einsatzgebiete-auswahl:not([hidden]) { position: absolute; top: calc(100% + 4px); /* WICHTIGER FIX, auf Wunsch: von "right: 0" auf "left: 0" umgestellt - seit es zwei nebeneinander liegende Dropdowns dieser Art gibt (GIS-Layer UND WFS-Layer, auf Wunsch getrennt), bezog sich "right: 0" jeweils auf den eigenen, schmalen Button-Wrapper - ein Panel, das breiter als sein eigener Wrapper ist (praktisch immer der Fall), blutete dadurch nach LINKS über den Wrapper hinaus und konnte exakt auf dem PANEL des benachbarten Dropdowns landen, wenn beide gleichzeitig geöffnet waren. "left: 0" lässt jedes Panel stattdessen nach RECHTS ausdehnen, vom eigenen Button aus - keine Überlappung zwischen den beiden Panels mehr, selbst wenn beide gleichzeitig offen sind. */ left: 0; z-index: 900; /* deutlich über normalem Seiteninhalt (Karte/Statusfeed), unter Modals (1100) */ pointer-events: auto; background: var(--farbe-flaeche); /* blickdicht statt halbtransparent - klare Abgrenzung zum Inhalt darunter */ border: 1px solid #ddd9cb; border-radius: var(--radius-md); box-shadow: var(--schatten-md); padding: 8px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; min-width: 170px; max-height: 220px; overflow-y: auto; white-space: nowrap; } .einsatzgebiete-auswahl label { display: flex; align-items: center; gap: 6px; cursor: pointer; } .einsatzgebiete-zoom-hinweis { margin: 0 0 6px; font-size: 11px; color: var(--farbe-text-mute); font-style: italic; } /* Auf Wunsch ergänzt: zeigt an, dass eine Kategorie bei der aktuellen Zoomstufe gerade nicht auf der Karte sichtbar ist - rein visuell, ändert nichts am Ankreuz-/Suchverhalten selbst. */ .kategorie-ausserhalb-zoom { color: var(--farbe-text-mute); opacity: 0.55; } /* Auf Wunsch ergänzt: Verwaltungsliste für Punktfarbe/Sichtbarkeitsbereich. */ .ebenen-kategorie-system-titel { margin: 16px 0 6px; font-size: 14px; color: var(--farbe-text-mute); } .ebenen-kategorie-system-titel:first-child { margin-top: 0; } .ebenen-kategorie-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--farbe-grau-inaktiv); } .ebenen-kategorie-name { flex: 1 1 auto; } .ebenen-kategorie-zoom-eingabe { width: 48px; } .ebenen-kategorie-emoji-eingabe { width: 64px; text-align: center; } .ebenen-kategorie-emoji-aktiv-label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; } /* Auf Wunsch ergänzt: Funktionsübersicht-Tabelle je Kategorie. */ .funktionsuebersicht-tabelle { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px; } .funktionsuebersicht-tabelle tr { border-bottom: 1px solid var(--farbe-grau-inaktiv); } .funktionsuebersicht-tabelle td { padding: 5px 8px 5px 0; vertical-align: top; } .funktionsuebersicht-code { font-family: monospace; font-size: 11px; color: var(--farbe-text-mute); white-space: nowrap; } /* Auf Wunsch ergänzt: Dateiablage-Reiter (QNAP/WebDAV). */ .dateiablage-bereich { padding: 12px; } .dateiablage-reiter-leiste { display: flex; gap: 8px; margin-bottom: 10px; } .dateiablage-reiter-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 6px 4px; cursor: pointer; color: var(--farbe-text-mute); font-size: 14px; } .dateiablage-reiter-btn.dateiablage-reiter-aktiv { color: var(--farbe-primaer); border-bottom-color: var(--farbe-primaer); font-weight: 600; } .dateiablage-werkzeugleiste { display: flex; gap: 8px; margin-bottom: 10px; } .dateiablage-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--farbe-grau-inaktiv); } .dateiablage-name { flex: 1 1 auto; overflow-wrap: anywhere; } .dateiablage-meta { color: var(--farbe-text-mute); font-size: 12px; flex-shrink: 0; } /* Auf Wunsch ergänzt: Szenarien (vordefinierte Sammel-Annektierung). */ .szenario-bereich { padding: 12px; } .szenario-werkzeugleiste { display: flex; gap: 8px; margin-bottom: 10px; } .szenario-zeile { border: 1px solid var(--farbe-grau-inaktiv); border-radius: 8px; padding: 10px; margin-bottom: 10px; } .szenario-zeile-kopf { display: flex; align-items: center; gap: 8px; } .szenario-text { flex: 1 1 auto; font-weight: 600; } .szenario-meta { color: var(--farbe-text-mute); font-size: 12px; margin: 6px 0; } .szenario-aktionen { display: flex; gap: 8px; margin-top: 8px; } .szenario-rufnamen-liste { max-height: 180px; overflow-y: auto; margin-bottom: 10px; } .szenario-rufname-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--farbe-grau-inaktiv); } .szenario-rufname-zeile span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Auf Wunsch ergänzt: Zielbefehlstelle-Suchbereich (ersetzt die frühere reine Freitext- Eingabe) - derselbe position:relative-Rahmen wie zuvor bei .szenario-rufname-hinzufuegen, nur unter neuem, treffenderem Namen. */ .szenario-zielbefehlstelle-bereich { position: relative; } #szenarioAmtsbereichAuswahl { width: 100%; padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid #ddd9cb; background: var(--farbe-flaeche); color: var(--farbe-text); font-size: 13px; margin-top: 4px; } /* Auf Wunsch ergänzt: Beschreibung deutlich breiter/höher als die übrigen Formularfelder - das Modal selbst ist inzwischen ebenfalls verbreitert (siehe #szenarioBearbeitenModal weiter unten), die Beschreibung soll diesen Platz auch tatsächlich nutzen. */ .szenario-beschreibung-eingabe { width: 100%; min-height: 80px; font: inherit; resize: vertical; margin-bottom: 8px; } /* Auf Wunsch ergänzt: Amtsbereich-Checkbox-Liste statt Freitextsuche für die Rufnamen-Zuordnung - scrollbar bei vielen Einträgen, jede Zeile eine anklickbare Checkbox+Label-Kombination. */ .szenario-amtsbereich-liste { max-height: 220px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--farbe-grau-inaktiv); border-radius: 8px; padding: 6px 10px; } .szenario-amtsbereich-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; } .szenario-amtsbereich-zeile:not(:last-child) { border-bottom: 1px solid var(--farbe-grau-inaktiv); } .szenario-rufname-treffer { position: absolute; z-index: 10; background: var(--farbe-flaeche); border: 1px solid var(--farbe-grau-inaktiv); border-radius: 6px; max-height: 200px; overflow-y: auto; width: 100%; box-shadow: var(--schatten-sm); } .szenario-rufname-treffer-eintrag { display: block; width: 100%; text-align: left; padding: 8px 10px; background: none; border: none; cursor: pointer; } .szenario-rufname-treffer-eintrag:hover { background: var(--farbe-bg); } /* Auf Wunsch ergänzt (Anlass: Formular-Zeile mit Textarea/Eingabe/Button nebeneinander war unübersichtlich in einem schmalen Modal) - erzwingt eine klare vertikale Anordnung, jedes Element volle Breite, statt der generischen nebeneinander-Anordnung von .kartenbasis-neu-form (die für andere, breitere Formulare im Projekt sinnvoll bleibt und deshalb nicht global geändert wird). */ .szenario-bearbeiten-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; } .szenario-bearbeiten-form input { width: 100%; padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid #ddd9cb; background: var(--farbe-flaeche); color: var(--farbe-text); font-size: 13px; } .szenario-bearbeiten-form button { align-self: flex-start; border: none; border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; background: var(--farbe-primaer); color: #fff; cursor: pointer; } /* WICHTIGER FIX, auf Wunsch (Anlass: der "✕"-Button zum Entfernen eines Rufnamens füllte die ganze Zeile als breite, leere Box aus) - .btn-secondary setzt global width:100% (gedacht für breite Aktions-Buttons), das ist für einen kleinen Icon-Button in einer Liste ungeeignet. Eigene, kompakte Klasse statt der Wiederverwendung von .btn-secondary. */ .szenario-rufname-entfernen-btn { width: auto; flex: 0 0 auto; padding: 4px 10px; font-size: 15px; font-weight: 600; border-radius: var(--radius-md); border: none; cursor: pointer; background: var(--farbe-bg); color: var(--farbe-primaer); } .szenario-rufname-entfernen-btn:active { transform: scale(0.92); } /* Auf Wunsch ergänzt: Emoji-Marker als Alternative zum einfarbigen Punkt (siehe ebenenMarkerErstellen() in app.js). Kein Hintergrund/Rahmen - das Emoji selbst trägt die Bildwirkung, ein zusätzlicher Kreis/Schatten würde nur ablenken. */ .ebenen-emoji-marker-wrapper { background: none; border: none; } .ebenen-emoji-marker { font-size: 22px; line-height: 28px; text-align: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); } /* Auf Wunsch ergänzt: Kennung im Kreis + außen anliegende Richtungspfeilspitze (RTH/Flugzeuge/ Schiffe, siehe ebenenMarkerErstellen()/richtungspfeilMarkerErstellen() in app.js). Die Pfeilspitze rotiert per transform:rotate() um das Zentrum der 34px-Box (transform-origin exakt auf die Boxmitte gesetzt, siehe Rechnung im JS-Kommentar) - der Kreis mit der Kennung bleibt selbst unrotiert und immer aufrecht lesbar. */ .ebenen-pfeil-marker-wrapper { background: none; border: none; } .ebenen-pfeil-marker { position: relative; } .ebenen-pfeil-kreis { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 8px; font-weight: 700; line-height: 1; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; padding: 0 1px; } .ebenen-pfeil-spitze { position: absolute; top: 0; left: 50%; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid; /* Farbe kommt inline per border-bottom-color, siehe app.js */ /* transform-origin kommt inline (siehe app.js) - hängt von der jeweiligen Icon-Gesamtgröße ab (Ebenen-Kategorien 34px, Fahrzeuge 36px), deshalb hier bewusst nicht fest kodiert. */ filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); } /* Auf Wunsch ergänzt: zentriert das bestehende, unverändert 28px große Ruftyp-Badge innerhalb der größeren 36px-Box für Fahrzeuge (siehe uebersichtKarteMarkerSetzen()) - dieselbe Zentrierungstechnik wie bei .ebenen-pfeil-kreis oben. */ .uebersicht-badge-zentriert { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .einsatzgebiete-auswahl .einsatzgebiete-farbpunkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .sprechwunsch-titel { pointer-events: none; font-size: 12.5px; font-weight: 700; color: var(--farbe-rot); padding: 0 12px 6px; border-bottom: 1px solid #eeece2; margin-bottom: 4px; } .sprechwunsch-liste { list-style: none; margin: 0; padding: 0; } .sprechwunsch-eintrag { display: flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer; font-size: 13px; pointer-events: auto; /* Container hat pointer-events:none - hier gezielt wieder aktivieren */ } .sprechwunsch-eintrag:hover, .sprechwunsch-eintrag:active { background: #fdecea; } .sprechwunsch-eintrag .sprechwunsch-name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sprechwunsch-eintrag .sprechwunsch-zeit { font-size: 11px; color: var(--farbe-text-mute); flex-shrink: 0; } .karten-filter-leiste { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; padding: 8px 12px; background: var(--farbe-flaeche); border-radius: var(--radius-md); box-shadow: var(--schatten-sm); font-size: 13.5px; flex-wrap: wrap; } .karten-filter-leiste label { display: flex; align-items: center; gap: 5px; cursor: pointer; } .karten-filter-leiste input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; } .karten-filter-leiste select { padding: 6px 8px; border-radius: 8px; border: 1px solid #ddd9cb; background: var(--farbe-bg); color: var(--farbe-text); font-size: 13px; flex-shrink: 0; } .uebersicht-filter-leiste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .uebersicht-filter-leiste select { flex: 1 1 160px; min-width: 140px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid #ddd9cb; background: var(--farbe-flaeche); color: var(--farbe-text); font-size: 13.5px; } /* Dezente rote Hintergrundfarbe, sobald eine Filter-Combobox nicht mehr auf ihrem Standardwert steht (Standard = Optionstext beginnt mit "Alle") - gilt unabhängig vom umgebenden Container, da die Filter-Comboboxen an mehreren Stellen der Oberfläche liegen (Leitstelle/Befehlstelle oben, Amtsbereich/Ruftyp/Online in der Filterleiste). */ select.filter-nicht-standard { background: #fdecea; border-color: #e8b4ac; } [data-theme="dunkel"] select.filter-nicht-standard { background: #3a1f1c; border-color: #5a2e28; } .filter-freitext { flex: 1 1 200px; min-width: 160px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid #ddd9cb; background: var(--farbe-flaeche); color: var(--farbe-text); font-size: 13.5px; } .uebersicht-tabelle-wrapper { overflow-x: auto; border-radius: var(--radius-md); box-shadow: var(--schatten-sm); } .uebersicht-tabelle { width: 100%; min-width: 900px; /* erzwingt horizontales Scrollen im Wrapper statt Spalten zu quetschen (11 Spalten) */ border-collapse: collapse; background: var(--farbe-flaeche); border-radius: var(--radius-md); overflow: hidden; font-size: 14px; } .uebersicht-tabelle th, .uebersicht-tabelle td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #eeece2; white-space: nowrap; } .uebersicht-tabelle th { background: var(--farbe-bg); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--farbe-text-mute); cursor: pointer; user-select: none; white-space: nowrap; } .uebersicht-tabelle th:hover { color: var(--farbe-primaer); } .uebersicht-tabelle th:not([data-sort]) { cursor: default; } .uebersicht-tabelle th:not([data-sort]):hover { color: var(--farbe-text-mute); } /* Spaltenbreiten: Wache/Amtsbereich/Verbindung (3./4./8. Spalte) hatten zuvor keine feste Breite (rein automatische Größe nach Inhalt) - als Ausgangsbasis wurde je Spalte eine sinnvolle Breite angenommen (Wache/Amtsbereich als Textspalten ähnlich Leitstelle/Befehlstelle, Verbindung nach ihrem tatsächlichen Inhalt "Online"/"Offline" + Punkt-Symbol), darauf die gewünschte relative Änderung angewendet: Wache +50%, Amtsbereich +30%, Verbindung -30%. */ .uebersicht-tabelle th:nth-child(3), .uebersicht-tabelle td:nth-child(3) { width: 135px; } /* Wache: 90px Basis +50% */ .uebersicht-tabelle th:nth-child(4), .uebersicht-tabelle td:nth-child(4) { width: 145px; } /* Amtsbereich: 110px Basis +30% */ .uebersicht-tabelle th:nth-child(8), .uebersicht-tabelle td:nth-child(8) { width: 65px; /* Verbindung: 95px Basis -30% */ white-space: normal; /* Umbruch erlauben, sonst würde der nowrap-Inhalt "Offline" die Verkleinerung wieder aufheben */ } .uebersicht-zeile-klickbar { cursor: pointer; transition: background 0.1s ease; } .uebersicht-zeile-klickbar:hover { background: var(--farbe-bg); } .uebersicht-zeile-klickbar:active { background: #e4e1d3; } .uebersicht-zeile-gesperrt { opacity: 0.5; } .uebersicht-zeile-gesperrt .uebersicht-name-zelle::after { content: " (gesperrt)"; font-style: italic; color: var(--farbe-rot); font-weight: 400; } .uebersicht-zeile-hervorgehoben { animation: zeile-hervorheben 1.5s ease-out; } @keyframes zeile-hervorheben { 0% { background: #fff3c4; } 100% { background: transparent; } } .uebersicht-tabelle tbody tr:last-child td { border-bottom: none; } .uebersicht-einsatzinfo-zelle { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--farbe-text-mute); } .uebersicht-name-zelle { max-width: 99px; /* +10% gegenüber 90px */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uebersicht-wache-zelle { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uebersicht-amtsbereich-zelle { max-width: 112px; /* -30% gegenüber einer 160px-Baseline (wie bei Info) */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uebersicht-paginierung:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 10px 0 16px; } .btn-seite { border: 1px solid #ddd9cb; background: var(--farbe-flaeche); color: var(--farbe-text); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; } .btn-seite:disabled { opacity: 0.4; cursor: default; } .uebersicht-seite-text { font-size: 13px; color: var(--farbe-text-mute); } .einsatzinfo-bearbeiten-bereich:not([hidden]) { display: block; background: var(--farbe-flaeche); border-radius: var(--radius-md); box-shadow: var(--schatten-sm); padding: 14px 16px; margin-bottom: 20px; } .einsatzinfo-bearbeiten-bereich label { display: block; font-size: 13px; color: var(--farbe-text-mute); margin-bottom: 8px; } .einsatzinfo-bearbeiten-bereich label strong { color: var(--farbe-primaer); } .einsatzinfo-bearbeiten-bereich textarea { width: 100%; min-height: 70px; resize: vertical; border-radius: var(--radius-md); border: 1px solid #ddd9cb; background: var(--farbe-bg); color: var(--farbe-text); font: inherit; font-size: 14px; padding: 10px 12px; } .info-bearbeiten-aktionen { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .einsatzinfo-zeichen-zaehler { font-size: 12px; color: var(--farbe-text-mute); margin-right: auto; } .btn-einsatzinfo-loeschen, .btn-einsatzinfo-speichern { border: none; border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; } .btn-einsatzinfo-loeschen { background: #fdecea; color: var(--farbe-rot); } .btn-einsatzinfo-speichern { background: var(--farbe-primaer); color: #fff; } .btn-einsatzinfo-loeschen:active, .btn-einsatzinfo-speichern:active { transform: scale(0.96); } .btn-einsatzinfo-loeschen:disabled, .btn-einsatzinfo-speichern:disabled { opacity: 0.6; cursor: default; } .einsatzinfo-speichern-hinweis { font-size: 12.5px; color: var(--farbe-gruen); min-height: 16px; margin: 8px 0 0; } .befehlstelle-aktion-bereich:not([hidden]) { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #eeece2; } .befehlstelle-aktion-titel { font-size: 12.5px; color: var(--farbe-text-mute); margin-right: auto; } .btn-befehlstelle-annektieren, .btn-befehlstelle-loesen { border: none; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; } .btn-befehlstelle-annektieren { background: var(--farbe-primaer); color: #fff; } .btn-befehlstelle-loesen { background: #fdecea; color: var(--farbe-rot); } .uebersicht-status-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; flex-shrink: 0; } .uebersicht-status-punkt.gelb { background: var(--farbe-gelb); } .uebersicht-status-punkt.gruen { background: var(--farbe-gruen); } .uebersicht-status-punkt.leer { background: var(--farbe-grau-inaktiv); } .uebersicht-verbindung { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .uebersicht-verbindung-punkt { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .uebersicht-verbindung-punkt.online { background: var(--farbe-gruen); } .uebersicht-verbindung-punkt.offline { background: var(--farbe-grau-inaktiv); } .btn-status-bestaetigen { border: none; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; background: var(--farbe-gelb); color: #3d2600; cursor: pointer; white-space: nowrap; } .btn-status-bestaetigen:hover { filter: brightness(0.95); } .btn-status-bestaetigen:active { transform: scale(0.96); } .btn-status-bestaetigen:disabled { opacity: 0.6; cursor: default; } .uebersicht-aktion-zelle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* Kompakter "Aktion"-Button je Tabellenzeile + ein einziges, wiederverwendbares Popup-Menü (Status setzen / Annektieren / Annektion lösen) statt der vorherigen, immer sichtbaren Kombination aus Statusauswahl-Combobox + "Setzen"-Taste direkt in der Zeile. */ .btn-tabellen-aktion { border: none; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; background: var(--farbe-bg); color: var(--farbe-text); cursor: pointer; } .btn-tabellen-aktion:hover { filter: brightness(0.97); } .tabellen-aktion-popup:not([hidden]) { position: fixed; /* wird per JS mit exakten Koordinaten positioniert, siehe tabellenAktionOeffnen() */ z-index: 900; /* über normalem Seiteninhalt, unter Modals (1100) - gleiche Ebene wie das GIS-Layer-Dropdown */ background: var(--farbe-flaeche); border: 1px solid #ddd9cb; border-radius: var(--radius-md); box-shadow: var(--schatten-md); padding: 6px; min-width: 170px; } .tabellen-aktion-menu { display: flex; flex-direction: column; gap: 2px; } .tabellen-aktion-eintrag { border: none; background: none; text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--farbe-text); cursor: pointer; } .tabellen-aktion-eintrag:hover { background: var(--farbe-bg); } .tabellen-aktion-eintrag:disabled { opacity: 0.4; cursor: default; } .tabellen-aktion-eintrag:disabled:hover { background: none; } .tabellen-aktion-status-auswahl { display: flex; align-items: center; gap: 6px; } .tabellen-aktion-zurueck { border: none; background: var(--farbe-bg); border-radius: 50%; width: 26px; height: 26px; flex-shrink: 0; font-size: 13px; cursor: pointer; } #tabellenAktionStatusSelect { flex: 1; min-width: 150px; padding: 6px; border-radius: 8px; border: 1px solid #ddd9cb; background: var(--farbe-flaeche); color: var(--farbe-text); font-size: 12.5px; } .tabellen-aktion-bestaetigen { border: none; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; background: var(--farbe-primaer); color: #fff; cursor: pointer; flex-shrink: 0; } /* Ruftyp-Symbole: RTW/NEF/KTW/DL - eigene, einfache Piktogramme (keine Marken-/Organisationslogos) */ .ruftyp-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; flex-shrink: 0; } .ruftyp-badge svg { width: 16px; height: 16px; } .ruftyp-badge-generisch { background: var(--farbe-grau-inaktiv); color: #3a3a34; font-size: 9px; font-weight: 700; } /* ============ Nachrichten: Chat-Bubbles (inkl. Status-Verlauf, dezent integriert) ============ */ .nachrichten-liste { list-style: none; padding: 10px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; background: #e9e6da; border-radius: var(--radius-md); box-shadow: inset 0 1px 4px rgba(0,0,0,0.06); } /* Etwas mehr Platz am rechten Rand beim Client - erleichtert das Hochscrollen zu älteren Nachrichten per Wischgeste, ohne dabei versehentlich eine Nachricht ganz am Rand anzutippen. Bewusst nur beim Client (nicht im Zentrale-/Befehlstelle-Modus, dort hat die Liste eine andere Spaltenbreite/Nutzung). */ .haupt-bereich:not(.zentrale-modus) .nachrichten-liste { padding-right: 22px; } /* Statusereignisse: bewusst unauffällig und neutral, damit sie sich klar von echten Nachrichten abheben - zentriert, grau, ohne Sprechblasenform (wie Systemhinweise in Chats). */ .status-notiz { align-self: center; background: rgba(0,0,0,0.07); color: var(--farbe-text-mute); font-size: 11.5px; padding: 5px 12px; border-radius: 999px; max-width: 90%; text-align: center; } .nachricht-eintrag:not([hidden]) { display: flex; align-items: flex-end; gap: 8px; max-width: 85%; align-self: flex-start; } .nachricht-eintrag.gesendet { align-self: flex-end; flex-direction: row-reverse; } .nachricht-antwortbar { cursor: pointer; } .nachricht-antwortbar:active .nachricht-bubble { opacity: 0.75; } .nachricht-avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--farbe-primaer); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; } .nachricht-bubble { background: var(--farbe-flaeche); border-radius: 4px 14px 14px 14px; padding: 8px 12px 6px; box-shadow: var(--schatten-sm); min-width: 0; } .nachricht-eintrag.prio-2 .nachricht-bubble { background: #fdecea; } .nachricht-eintrag.gesendet .nachricht-bubble { background: #dbeee7; border-radius: 14px 4px 14px 14px; } .nachricht-absender { font-size: 12.5px; font-weight: 700; color: var(--farbe-primaer); margin-bottom: 2px; } .nachricht-eintrag.prio-2 .nachricht-absender { color: var(--farbe-rot); } .nachricht-eintrag.gesendet .nachricht-absender { color: var(--farbe-akzent); } .nachricht-text { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; } .nachricht-zeit { font-size: 10.5px; color: var(--farbe-text-mute); text-align: right; margin-top: 3px; } .nachricht-haken { margin-left: 4px; font-size: 11px; letter-spacing: -1px; color: var(--farbe-text-mute); } .nachricht-haken.gelesen { color: var(--farbe-primaer); font-weight: 700; font-size: 12px; } .leer-hinweis { color: var(--farbe-text-mute); font-size: 13px; background: transparent !important; box-shadow: none !important; border-left: none !important; padding: 4px 2px !important; max-width: 100% !important; } .schnelltext-leiste:not([hidden]) { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; margin-bottom: 6px; margin-top: 6px; } .btn-schnelltext { flex: 0 0 calc(25% - 4.5px); /* genau 4 pro Zeile (3 Lücken à 6px), danach automatischer Umbruch */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #ddd9cb; background: var(--farbe-flaeche); color: var(--farbe-text); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; cursor: pointer; } .btn-schnelltext:hover, .btn-schnelltext:active { background: var(--farbe-bg); } .nachricht-senden-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; } .nachricht-empfaenger-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .nachricht-empfaenger-zeile select { flex: 1 1 auto; min-width: 0; max-width: none; border-radius: var(--radius-md); border: 1px solid #ddd9cb; padding: 0 10px; font-size: 14px; background: var(--farbe-flaeche); color: var(--farbe-text); } #tonAuswahl { flex: 0 0 auto; max-width: 170px; } .nachricht-empfaenger-zeile select { height: 44px; } /* WICHTIGER FIX, auf Wunsch: Empfänger-Suchfeld bei Zentrale/Befehlstelle hatte bisher keine eigene CSS-Regel und fiel auf die kleine Browser-Standardgröße zurück - deutlich kleiner als das gleich hohe