/* =========================================================================
   LEA Infoscreen – Kiosk-Styles
   Dunkles, kontrastreiches Design fuer Wandmonitore (Lesbarkeit aus Distanz)
   ========================================================================= */

:root {
    --bg-0: #0a0e16;
    --bg-1: #111827;
    --bg-2: #1a2232;
    --line: #26303f;
    --text: #f3f6fb;
    --text-dim: #9aa7b8;
    --text-faint: #64748b;
    --accent: #e11d2a;      /* Feuerwehr-Rot */
    --accent-2: #f59e0b;
    --ok: #22c55e;
    --brand-blue: #2f8fd8;

    --cat-technik: #2f6fed;
    --cat-brand: #e11d2a;
    --cat-sonstige: #d0a020;
    --cat-gefahr: #16a34a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: radial-gradient(120% 100% at 100% 0%, #1b1030 0%, var(--bg-0) 55%) fixed;
    color: var(--text);
    font-family: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    cursor: none;
}

body { display: flex; flex-direction: column; }

/* ---------- Kopfzeile ---------- */
.topbar {
    flex: 0 0 auto;
    height: 9vh;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.2vw;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
    border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: baseline; gap: 1vw; }
.brand-mark {
    font-weight: 800;
    font-size: 4.2vh;
    letter-spacing: 0.04em;
    color: var(--brand-blue);
}
.brand-mark::after { content: ""; }
.brand-org { font-size: 3.6vh; font-weight: 700; color: var(--text); }

.topbar-right { display: flex; align-items: center; gap: 1.4vw; }
.clock { font-size: 4.4vh; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.date { font-size: 3vh; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.conn {
    width: 1.4vh; height: 1.4vh; border-radius: 50%;
    background: var(--text-faint);
    box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
}
.conn.online { background: var(--ok); }
.conn.offline { background: var(--accent); }

/* ---------- Views ---------- */
.view { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }
.view[hidden] { display: none; }

/* =========================================================================
   RUHE – Kalender / Agenda
   ========================================================================= */
.ruhe-wrap { height: 100%; display: flex; flex-direction: column; padding: 2vh 2.2vw 2.4vh; }
.ruhe-title {
    font-size: 3vh; font-weight: 700; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 1.4vh; display: flex; align-items: center; gap: 0.8vw;
}
.ruhe-title .badge-count {
    font-size: 2.2vh; background: var(--bg-2); color: var(--text-dim);
    padding: 0.2vh 0.9vw; border-radius: 999px; border: 1px solid var(--line);
}

.agenda { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; gap: 1.1vh; }

.agenda-day-label {
    display: flex; align-items: baseline; gap: 0.8vw;
    font-size: 2.4vh; color: var(--text-faint); font-weight: 700;
    margin-top: 0.6vh;
}
.agenda-day-label .dl-date { color: var(--text); }
.agenda-day-label.is-today .dl-date { color: var(--accent-2); }
.agenda-day-label .dl-rel { color: var(--text-faint); font-weight: 600; font-size: 2vh; }

.event-card {
    display: grid;
    grid-template-columns: 8.5vw 1fr auto;
    align-items: center;
    gap: 1.4vw;
    background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
    border: 1px solid var(--line);
    border-left: 0.7vw solid var(--cat, var(--text-faint));
    border-radius: 1.1vh;
    padding: 1.3vh 1.6vw;
}
.event-time { text-align: center; }
.event-time .t-main { font-size: 3.4vh; font-weight: 800; font-variant-numeric: tabular-nums; }
.event-time .t-sub { font-size: 1.9vh; color: var(--text-faint); }
.event-time .t-allday { font-size: 2.4vh; font-weight: 700; color: var(--text-dim); }

.event-body { min-width: 0; }
.event-title {
    font-size: 3.2vh; font-weight: 700; line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.event-meta { display: flex; align-items: center; gap: 1.2vw; margin-top: 0.5vh; }
.event-cat {
    font-size: 2vh; font-weight: 700; color: #fff;
    background: var(--cat, var(--text-faint));
    padding: 0.2vh 0.8vw; border-radius: 0.6vh;
}
.event-loc {
    font-size: 2.4vh; color: var(--text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: 0.5vw;
}
.event-countdown {
    text-align: right; font-size: 2.2vh; color: var(--text-faint);
    font-weight: 700; white-space: nowrap;
}
.event-countdown .cd-num { font-size: 3.2vh; color: var(--text); display: block; }

.agenda-empty {
    flex: 1 1 auto; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.4vh; color: var(--text-faint);
}
.agenda-empty .emoji { font-size: 9vh; opacity: 0.5; }
.agenda-empty .txt { font-size: 3.2vh; }

/* ---------- Ruhe: Uhr + naechste Termine (Monitor 2) ---------- */
.clockview { height: 100%; display: grid; grid-template-rows: 1.2fr 1fr; }
.clockview .big-clock {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--line);
}
.clockview .bc-time { font-size: 22vh; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.clockview .bc-date { font-size: 4vh; color: var(--text-dim); margin-top: 1vh; }
.clockview .next-list { padding: 2vh 3vw; overflow: hidden; }
.clockview .next-head { font-size: 2.4vh; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 1.4vh; }
.clockview .next-item { display: flex; align-items: center; gap: 1.4vw; padding: 1vh 0; border-bottom: 1px solid var(--line); }
.clockview .next-item .ni-date { font-size: 2.6vh; font-weight: 800; color: var(--accent-2); min-width: 10vw; }
.clockview .next-item .ni-title { font-size: 3vh; font-weight: 700; }
.clockview .next-item .ni-dot { width: 1.2vh; height: 1.2vh; border-radius: 50%; background: var(--cat, var(--text-faint)); }

/* =========================================================================
   EINSATZ
   ========================================================================= */
.einsatz-wrap { height: 100%; display: flex; flex-direction: column; }
.einsatz-wrap.cat-brand { --ecat: var(--cat-brand); }
.einsatz-wrap.cat-technik { --ecat: var(--cat-technik); }
.einsatz-wrap.cat-sonstige { --ecat: var(--cat-sonstige); }
.einsatz-wrap.cat-gefahr { --ecat: var(--cat-gefahr); }
.einsatz-wrap { --ecat: var(--accent); }

.einsatz-banner {
    background: var(--ecat);
    padding: 2.2vh 2.2vw;
    display: flex; align-items: center; gap: 1.6vw;
    animation: alarmpulse 1.6s ease-in-out infinite;
}
@keyframes alarmpulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}
.einsatz-type {
    font-size: 7vh; font-weight: 900; color: #fff;
    background: rgba(0,0,0,0.28); padding: 0.4vh 1.6vw; border-radius: 1.2vh;
    letter-spacing: 0.02em; min-width: 12vw; text-align: center;
}
.einsatz-headtext { flex: 1 1 auto; min-width: 0; }
.einsatz-arttitle { font-size: 6vh; font-weight: 900; color: #fff; line-height: 1.02; }
.einsatz-stufe { font-size: 3vh; color: rgba(255,255,255,0.85); font-weight: 700; margin-top: 0.4vh; }
.einsatz-elapsed { text-align: right; color: #fff; }
.einsatz-elapsed .el-num { font-size: 6vh; font-weight: 800; font-variant-numeric: tabular-nums; }
.einsatz-elapsed .el-lbl { font-size: 2.2vh; opacity: 0.85; }

.einsatz-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr; gap: 2vh; padding: 2.4vh 2.2vw; overflow: hidden; }
.einsatz-body.with-map { grid-template-columns: 1.15fr 1fr; }

.info-block { display: flex; flex-direction: column; gap: 2vh; min-width: 0; }
.info-row .label { font-size: 2.4vh; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 0.5vh; }
.info-row .value { font-size: 4.4vh; font-weight: 700; line-height: 1.1; }
.info-row .value.big { font-size: 5vh; }
.info-row .value.meldebild { font-size: 5.2vh; color: var(--accent-2); }

.orgs { display: flex; flex-wrap: wrap; gap: 0.8vw; }
.org-chip { font-size: 2.6vh; background: var(--bg-2); border: 1px solid var(--line); border-radius: 0.8vh; padding: 0.5vh 1.1vw; color: var(--text-dim); }

.map-block { border-radius: 1.4vh; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); min-height: 0; position: relative; }
.map-block iframe { width: 100%; height: 100%; border: 0; filter: saturate(1.1); }
.leaflet-map { width: 100%; height: 100%; background: #0d1b2a; }
.map-nocoords { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-faint); font-size: 3vh; text-align: center; padding: 2vh; }
/* Einsatz-Marker: pulsierender roter Punkt */
.einsatz-marker { width: 2.4vh; height: 2.4vh; background: var(--accent); border: 0.4vh solid #fff; border-radius: 50%; box-shadow: 0 0 0 0 rgba(225,29,42,0.7); animation: markerpulse 1.6s infinite; }
@keyframes markerpulse {
    0% { box-shadow: 0 0 0 0 rgba(225,29,42,0.7); }
    70% { box-shadow: 0 0 0 3vh rgba(225,29,42,0); }
    100% { box-shadow: 0 0 0 0 rgba(225,29,42,0); }
}
/* Leaflet-Attribution dezenter */
.leaflet-control-attribution { font-size: 1.4vh !important; background: rgba(0,0,0,0.5) !important; color: #ccc !important; }
.leaflet-control-attribution a { color: #9cf !important; }

/* Rueckmeldungen */
.resp-summary { display: flex; align-items: baseline; gap: 1.4vw; margin-bottom: 2vh; }
.resp-total { font-size: 12vh; font-weight: 900; color: var(--ok); line-height: 0.9; font-variant-numeric: tabular-nums; }
.resp-total-lbl { font-size: 3vh; color: var(--text-dim); }
.resp-functions { display: flex; flex-wrap: wrap; gap: 1vw; margin-bottom: 2vh; }
.func-chip { font-size: 3vh; background: var(--bg-2); border: 1px solid var(--line); border-radius: 1vh; padding: 0.8vh 1.4vw; }
.func-chip b { color: var(--ok); font-size: 3.4vh; }
.resp-list { overflow: hidden; display: flex; flex-direction: column; gap: 0.9vh; }
.resp-item { display: flex; align-items: center; gap: 1.2vw; font-size: 3vh; padding: 0.9vh 0; border-bottom: 1px solid var(--line); }
.resp-item .r-status { width: 1.4vh; height: 1.4vh; border-radius: 50%; background: var(--ok); }
.resp-item .r-status.absage { background: var(--accent); }
.resp-item .r-name { font-weight: 700; }
.resp-item .r-func { color: var(--text-dim); }
.resp-item .r-note { color: var(--text-faint); font-size: 2.4vh; margin-left: auto; }

/* ---------- Historie (Ruhe-Fallback, wie offizieller Screen) ---------- */
.history-list { display: flex; flex-direction: column; gap: 1.1vh; }

/* ---------- Offline ---------- */
.offline-banner {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--accent); color: #fff; text-align: center;
    font-size: 2.4vh; padding: 0.8vh; font-weight: 700; z-index: 50;
}

/* Einblend-Uebergang */
.view-einsatz:not([hidden]) { animation: slidein 0.35s ease; }
@keyframes slidein { from { opacity: 0; transform: translateY(2vh); } to { opacity: 1; transform: none; } }

/* Einbrennschutz: minimaler Pixel-Shift */
body.burnin main { will-change: transform; animation: burnshift 90s linear infinite; }
@keyframes burnshift {
    0% { transform: translate(0,0); } 25% { transform: translate(2px,1px); }
    50% { transform: translate(0,2px); } 75% { transform: translate(-2px,1px); } 100% { transform: translate(0,0); }
}