/* Vollbild, kein Seiten-Scroll – Layout füllt den Bildschirm */
        html, body {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            color: #222;
            padding: 6px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        #content {
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        /* Oberer schwarzer Balken: Timer | Datum/Uhrzeit | Zug
           Drei Spalten, damit die Uhr auch ohne Timer/Zug mittig bleibt */
        .bahn-bar {
            flex-shrink: 0;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 10px;
            padding: 4px 14px;
            background: #1a1a2e;
            min-height: 56px;
        }

        .bahn-bar.hidden {
            display: none;
        }

        .bahn-slot-left {
            justify-self: start;
            min-width: 0;
        }

        .bahn-slot-right {
            justify-self: end;
            min-width: min-content;
        }

        .alarm-timer {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: baseline;
            gap: 8px;
            white-space: nowrap;
        }

        .alarm-timer.hidden {
            display: none;
        }
        .alarm-timer-label,.alarm-timer-value{flex-shrink:0}
        .alarm-lilo-call{color:#EB0000;font-size:24px;font-weight:bold;line-height:1.1;margin-left:12px;flex-shrink:0}
        .alarm-lilo-call[hidden]{display:none}

        .alarm-timer-label {
            font-size: 22px;
            font-weight: bold;
            color: #fff;
            line-height: 1;
        }

        .alarm-timer-value {
            font-size: 36px;
            font-weight: bold;
            color: #EB0000;
            line-height: 1;
            letter-spacing: 0.02em;
            font-variant-numeric: tabular-nums;
        }

        .bahn-clock {
            justify-self: center;
            font-size: 32px;
            font-weight: bold;
            color: #fff;
            line-height: 1;
            letter-spacing: 0.02em;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .bahn-train {
            display: flex;
            align-items: center;
            gap: 10px;
            justify-self: end;
            white-space: nowrap;
        }

        .bahn-train.hidden {
            display: none;
        }

        .bahn-zug-view {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .bahn-zug-view.hidden,
        .bahn-schranken-view.hidden {
            display: none;
        }

        .bahn-schranken-view {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 3px;
        }

        .bahn-schranken-row {
            display: flex;
            align-items: baseline;
            gap: 8px;
            white-space: nowrap;
        }

        .bahn-label {
            font-size: 22px;
            font-weight: bold;
            color: #fff;
            line-height: 1;
            white-space: nowrap;
        }

        .bahn-schranken-view .bahn-label {
            font-size: 18px;
        }

        .bahn-minutes {
            font-size: 36px;
            font-weight: bold;
            color: #EB0000;
            line-height: 1;
            letter-spacing: 0.02em;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .bahn-schranken-view .bahn-minutes {
            font-size: 28px;
        }

        .bahn-dauer-label {
            font-size: 16px;
            font-weight: bold;
            color: #cfd8dc;
            line-height: 1;
            white-space: nowrap;
        }

        .bahn-dauer-value {
            font-size: 20px;
            font-weight: bold;
            color: #ffd54f;
            line-height: 1;
            letter-spacing: 0.02em;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
        }

        .bahn-bar.urgent .bahn-label,
        .bahn-bar.urgent .bahn-minutes,
        .bahn-bar.closed .bahn-dauer-label,
        .bahn-bar.closed .bahn-dauer-value {
            animation: bahn-blink 0.9s step-start infinite;
        }

        .bahn-bar.closed .bahn-label,
        .bahn-bar.closed .bahn-minutes {
            color: #EB0000;
        }

        @keyframes bahn-blink {
            50% { opacity: 0.15; }
        }

        /* Einsatz-Layout: links Rückmeldungen, rechts Infos + Karte */
        .layout {
            height: 100%;
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: 6px;
            min-height: 0;
            transition: grid-template-columns 0.2s ease;
        }

        .layout.rm-wide {
            grid-template-columns: minmax(460px, 42%) 1fr;
        }

        .layout.rm-wide .main-panel {
            grid-template-columns: minmax(180px, 34%) 1fr;
        }

        /* Zentrale mit mehreren Einsätzen: links die Einsatzliste statt Rückmeldungen */
        .layout.zentrale-multi {
            grid-template-columns: minmax(270px, 30%) 1fr;
        }

        .layout.zentrale-multi .main-panel {
            grid-template-columns: minmax(220px, 36%) 1fr;
        }

        .el-panel {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .el-list {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }

        .el-item {
            display: block;
            box-sizing: border-box;
            width: 100%;
            text-align: left;
            border: none;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            border-left: 5px solid transparent;
            background: #fff;
            padding: 10px 12px;
            cursor: pointer;
            color: inherit;
            font: inherit;
        }

        .el-item:hover {
            background: #f7f7fb;
        }

        .el-item.active {
            background: #fff3f3;
            border-left-color: #EB0000;
        }

        .el-item-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 4px;
        }

        .el-item .status-badge {
            font-size: 12px;
            padding: 3px 8px;
        }

        .el-item-nr {
            font-size: 12px;
            font-weight: bold;
            color: #555;
            font-variant-numeric: tabular-nums;
        }

        .el-item-grund {
            font-size: 16px;
            font-weight: bold;
            line-height: 1.2;
            margin-bottom: 2px;
        }

        .el-item-addr {
            font-size: 13px;
            color: #444;
            line-height: 1.25;
        }

        .card {
            background: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            min-height: 0;
        }

        .rm-panel {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .hero {
            background: #EB0000;
            color: #fff;
            padding: 6px 10px;
            flex-shrink: 0;
        }

        .hero-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
        }

        .hero .einsatzgrund {
            font-size: 22px;
            font-weight: bold;
            line-height: 1.2;
            margin-top: 5px;
            white-space: normal;
            border-bottom: 1px solid rgba(255,255,255,0.3);
            padding-bottom: 5px;
            margin-bottom: 0;
        }

        .hero .adresse {
            font-size: 20px;
            font-weight: 500;
            line-height: 1.25;
            margin-top: 5px;
            opacity: 1;
            white-space: normal;
            letter-spacing: normal;
        }

        .meta-inline {
            font-size: 12px;
            opacity: 0.9;
            margin-top: 2px;
        }

        /* Einsatzstatus-Badge (Alarmiert / Ausgerückt / Am Einsatzort / Erledigt) */
        .status-badge {
            display: inline-block;
            padding: 6px 14px;
            font-size: 18px;
            font-weight: bold;
            background: #fff;
            color: #EB0000;
            white-space: nowrap;
            box-shadow: 0 2px 6px rgba(0,0,0,0.25);
            letter-spacing: 0.03em;
        }

        .status-badge.status-ausgerueckt { background: #add8e6; color: #16324a; }
        .status-badge.status-einsatzort { background: #fa8072; color: #4a1010; }
        .status-badge.status-erledigt { background: #8fee90; color: #0d3b0e; }
        .status-badge.status-alarmiert { background: #ffe082; color: #4a3800; }

        .main-panel {
            height: 100%;
            display: grid;
            grid-template-columns: minmax(200px, 30%) 1fr;
            grid-template-rows: 1fr;
            gap: 6px;
            min-height: 0;
        }

        .info-stack {
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
        }

        .info-stack > .card.details-card {
            flex: 0 1 auto;
            max-height: 32%;
            overflow: auto;
            display: flex;
            flex-direction: column;
        }

        .layout.zentrale .info-stack > .card.details-card {
            flex: 1 1 0;
            min-height: 0;
            overflow: hidden;
        }

        .layout.zentrale .details-card > h2 {
            flex-shrink: 0;
        }

        .layout.zentrale .hero .adresse {
            display: none;
        }

        .layout.zentrale .ausrueck-card tbody {
            min-height: 0;
        }

        .info-stack > .card:not(.ausrueck-card):not(.details-card) {
            flex-shrink: 0;
        }

        .info-grid {
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr);
            gap: 8px 12px;
            padding: 12px 14px;
            font-size: 18px;
            align-content: start;
        }

        .label {
            color: #666;
            font-weight: bold;
        }

        .value {
            color: #111;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Gelbes Infofeld: mind. 2 Zeilen, "//" wird zu Zeilenumbruch */
        .information {
            grid-column: 1 / -1;
            background: #fff8e1;
            padding: 12px 14px;
            border-left: 4px solid #EB0000;
            font-size: 18px;
            line-height: 1.4;
            white-space: normal;
            overflow-wrap: anywhere;
            min-height: calc(2 * 1.4em + 24px);
        }

        .einsatz-table-wrap {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
        }

        .einsatz-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
            font-size: 16px;
            background: #fff;
        }

        .einsatz-table th,
        .einsatz-table td {
            text-align: left;
            padding: 7px 10px;
            vertical-align: top;
            line-height: 1.3;
            height: auto;
            border-bottom: 1px solid #e6e6e6;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .einsatz-table th {
            width: 42%;
            white-space: nowrap;
            background: #f4f4f9;
            color: #333;
            font-weight: bold;
        }

        .einsatz-table tr:nth-child(even) td {
            background: #fafafa;
        }

        .einsatz-table td.information-cell {
            background: #fff8e1;
        }

        h2 {
            margin: 0;
            padding: 5px 10px;
            background: #EB0000;
            color: #fff;
            font-size: 14px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
            font-size: 13px;
        }

        th, td {
            padding: 4px 6px;
            text-align: center;
        }

        th {
            background: #333;
            color: #fff;
        }

        td {
            border-bottom: 1px solid #ddd;
        }


        /* =========================================================
           ELIS Medien-Overlay
           Eigene Regeln statt einer globalen img-Regel.
           Dadurch beeinflussen Fahrzeug-/Streetview-CSS die Diashow nicht.
           ========================================================= */
        #elis-video-overlay {
            position: fixed !important;
            inset: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: hidden !important;
            background: #000;
            z-index: 2147483647 !important;
        }

        #elis-video-overlay > video,
        #elis-web-overlay-frame,
        #elis-slideshow-image {
            position: absolute !important;
            inset: 0 !important;
            box-sizing: border-box !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
        }

        #elis-video-overlay > video,
        #elis-web-overlay-frame {
            width: 100% !important;
            height: 100% !important;
            max-width: none !important;
            max-height: none !important;
        }

        #elis-slideshow-image {
            width: 100vw !important;
            height: 100vh !important;
            min-width: 100vw !important;
            min-height: 100vh !important;
            max-width: none !important;
            max-height: none !important;
            object-fit: contain !important;
            object-position: center center !important;
            background: #000 !important;
        }

        /* Fahrzeugstatus-Farben (gleich wie Fahrzeugstatus-Seite)
           AD Außer Dienst, BE bedingt, FF Frei Funk, FW Frei Wache,
           AU Ausgerückt, AE Am Einsatzort, DI Disposition */
        .status-ad { background-color: #808080; }
        .status-be { background-color: #d3d3d3; }
        .status-ff { background-color: #018000; }
        .status-fw { background-color: #8fee90; }
        .status-au { background-color: #add8e6; }
        .status-ae { background-color: #fa8072; }
        .status-di { background-color: #ffcc80; }

        .ausrueck-fz.status-ad { background-color: #808080; color: #fff; }
        .ausrueck-fz.status-be { background-color: #d3d3d3; color: #111; }
        .ausrueck-fz.status-ff { background-color: #018000; color: #fff; }
        .ausrueck-fz.status-fw { background-color: #8fee90; color: #111; }
        .ausrueck-fz.status-au { background-color: #add8e6; color: #111; }
        .ausrueck-fz.status-ae { background-color: #fa8072; color: #111; }
        .ausrueck-fz.status-di { background-color: #ffcc80; color: #111; }

        .erm {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 4px;
            padding: 6px;
            flex-shrink: 0;
        }

        .erm-item {
            text-align: center;
            padding: 4px 2px;
            background: #f7f7fb;
            border-bottom: 3px solid #ccc;
        }

        .erm-item strong {
            display: block;
            font-size: 16px;
            line-height: 1;
        }

        .erm-item span {
            font-size: 9px;
            color: #555;
        }

        /* ERM-Zähler: Kommt / kommt nicht / später / Anwesend / keine Meldung */
        .erm-ja { border-color: #018000; }
        .erm-nein { border-color: #EB0000; }
        .erm-spaeter { border-color: #ff9800; }
        .erm-speci { border-color: #2196f3; }
        .erm-offen { border-color: #808080; }

        .rm-list {
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        .layout.rm-wide .rm-list {
            column-count: 2;
            column-gap: 4px;
            column-fill: auto;
        }

        .rm-row {
            padding: 6px 10px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            font-size: 13px;
            break-inside: avoid;
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
        }

        .rm-row.erm-ja { background: #8fee90; color: #0d3b0e; }
        .rm-row.erm-nein { background: #fa8072; color: #4a1010; }
        .rm-row.erm-spaeter { background: #ffcc80; color: #4a3000; }
        .rm-row.erm-speci { background: #add8e6; color: #16324a; }
        .rm-row.erm-offen { background: #d3d3d3; color: #333; }

        .rm-name {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }

        .rm-text {
            flex: 1;
            min-width: 0;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .rm-icons {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
        }

        .rm-funktion {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 8px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
            border: 1px solid rgba(255, 255, 255, 0.35);
            background: linear-gradient(145deg, #757575, #424242);
            color: #fff;
        }

        .rm-icon {
            width: 20px;
            height: 20px;
            display: block;
        }

        .rm-icon-img {
            width: 22px;
            height: 22px;
            object-fit: contain;
            display: block;
        }

        .rm-icon-fallback {
            font-size: 14px;
            font-weight: bold;
            line-height: 1;
        }

        .chips {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            padding: 6px 8px;
        }

        .chip {
            background: #eee;
            padding: 4px 8px;
            font-size: 13px;
        }

        /* Große Karte rechts: Route Wache → Einsatzort */
        .map-card {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        #karte {
            flex: 1;
            min-height: 0;
            width: 100%;
            z-index: 0;
        }

        .map-pin {
            background: none;
            border: none;
        }

        .map-pin svg {
            width: 32px;
            height: 32px;
            display: block;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
        }

        .map-pin.selected svg {
            transform: scale(1.22);
            filter: drop-shadow(0 0 5px rgba(235, 0, 0, 0.9));
        }

        .map-pin-fz {
            background: none;
            border: none;
        }

        .map-fz {
            display: inline-block;
            max-width: 92px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 11px;
            font-weight: bold;
            line-height: 1.2;
            padding: 2px 6px;
            border-radius: 3px;
            border: 1px solid #fff;
            color: #111;
            background: #eceff1;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }

        .map-pin-fz.status-ad .map-fz { background: #808080; color: #fff; }
        .map-pin-fz.status-be .map-fz { background: #d3d3d3; }
        .map-pin-fz.status-ff .map-fz { background: #018000; color: #fff; }
        .map-pin-fz.status-fw .map-fz { background: #8fee90; }
        .map-pin-fz.status-au .map-fz { background: #add8e6; }
        .map-pin-fz.status-ae .map-fz { background: #fa8072; }
        .map-pin-fz.status-di .map-fz { background: #ffcc80; }

        /* Ausrückeordnung: 5 Zeilen Platz, Gespanne nebeneinander */
        .ausrueck-card {
            --ausrueck-row-height: clamp(30px, 4.4vh, 47px);
            flex: 1 1 180px;
            min-height: 130px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .ausrueck-card table {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

        .ausrueck-card thead,
        .ausrueck-card tbody {
            display: block;
        }

        .ausrueck-card tbody {
            font-size: 16px;
            flex: 1 1 auto;
            min-height: 0;
            max-height: none;
            overflow-y: auto;
        }

        .ausrueck-card > h2, .ausrueck-card thead {
            flex: 0 0 auto;
        }

        .ausrueck-card tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            height: var(--ausrueck-row-height);
        }

        .ausrueck-card th,
        .ausrueck-card td {
            box-sizing: border-box;
            padding: 2px 6px;
            font-size: 16px;
            line-height: 1.15;
            vertical-align: middle;
            height: var(--ausrueck-row-height);
        }

        .ausrueck-nr {
            width: 2.2em;
            font-weight: bold;
            font-variant-numeric: tabular-nums;
        }

        .ausrueck-card td.ausrueck-fahrzeuge {
            padding: 0;
        }

        .ausrueck-gespann {
            display: flex;
            height: 100%;
            min-height: var(--ausrueck-row-height);
        }

        .ausrueck-fz {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2px 8px;
            font-weight: bold;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ausrueck-fz + .ausrueck-fz {
            border-left: 1px solid rgba(0, 0, 0, 0.18);
        }

        .empty, .error {
            text-align: center;
            font-size: 18px;
            padding: 20px;
            background: #fff;
        }

        .error { color: #EB0000; }

        /* Idle: rotierende Links aus settings.xml, wenn kein Einsatz aktiv */
        .idle-view {
            height: 100%;
            position: relative;
            min-height: 0;
        }

        .idle-frame {
            width: 100%;
            height: 100%;
            border: none;
            background: #fff;
        }

        .idle-indicator {
            position: absolute;
            right: 10px;
            bottom: 10px;
            padding: 4px 10px;
            background: rgba(0, 0, 0, 0.55);
            color: #fff;
            font-size: 12px;
            border-radius: 4px;
            pointer-events: none;
        }