/* =============================================================================
   Einsatz-Generator – Design angelehnt an die Website der Feuerwehr Westerkappeln
   Schriften lokal (keine Verbindung zu Google), Farben über CSS-Variablen.
   ========================================================================== */

/* --- Schriften --- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/inter-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-latin-800-italic.woff2") format("woff2"); }

[hidden] { display: none !important; }

/* --- Variablen --- */
:root {
    --red: #d20a16;
    --red-dark: #a90710;
    --ink: #111214;
    --ink-2: #1b1c1f;
    --muted: #666b70;
    --paper: #f3f1ed;
    --white: #fff;
    --line: rgba(17, 18, 20, .14);
    --line-light: rgba(255, 255, 255, .16);
    --ok: #1f8a4c;
    --warn: #b7791f;
    --display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wrap: 1210px;
    --gutter: clamp(16px, 4vw, 40px);
}

/* --- Basis --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 100; }
.skip-link:focus { left: 8px; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .95; margin: 0; letter-spacing: -.01em; }
h2 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 10px; }
h1 em, h2 em, .hero-title em { font-style: italic; color: var(--red); }
.eyebrow { margin: 0 0 12px; color: var(--red); font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow-light { color: #fff; opacity: .85; }

/* --- Rote Leiste --- */
.topbar { background: var(--red); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 34px; }
.topbar-right { display: flex; align-items: center; gap: 22px; }
.topbar-mode strong { font-weight: 800; }
.topbar-link { text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); }
.topbar-link:hover { border-bottom-color: #fff; }

/* --- Kopf --- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.header-inner { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; min-height: 96px; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; padding: 10px 0; min-width: 0; }
.brand-logo { height: 72px; width: auto; max-width: 160px; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-kicker { font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.brand-title { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }

.main-nav { display: flex; align-items: stretch; }
.mode-button {
    position: relative; border: 0; background: transparent; cursor: pointer;
    padding: 0 22px; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
    transition: color .15s ease;
}
.mode-button:hover { color: var(--red); }
/* Schräg angeschnittener roter Aktiv-Reiter wie im Vorbild */
.mode-button.active { color: #fff; z-index: 0; }
.mode-button.active::before {
    content: ""; position: absolute; inset: 0 -6px; background: var(--red); z-index: -1;
    clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
/* Kleiner Punkt am Modus, der gerade auf dem Server aktiv ist */
.mode-button.is-operating::after {
    content: ""; position: absolute; top: 50%; right: 6px; width: 7px; height: 7px; margin-top: -3px;
    border-radius: 50%; background: var(--red);
}
.mode-button.active.is-operating::after { background: #fff; }

.nav-toggle { display: none; }

/* --- Systemstatus --- */
.service-status-bar { background: var(--white); border-bottom: 1px solid var(--line); font-size: .78rem; }
.service-status-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 42px; padding-top: 6px; padding-bottom: 6px; }
.service-status-label { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-size: .68rem; }
.service-status-indicators { display: flex; flex-wrap: wrap; gap: 8px; }
.service-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); color: var(--muted); }
.service-indicator::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #b9bcc0; }
.service-indicator strong { color: var(--ink); font-weight: 700; }
.service-indicator.indicator-active::before { background: var(--ok); }
.service-indicator.indicator-warning::before { background: var(--warn); }
.service-indicator.indicator-warning { border-color: rgba(183, 121, 31, .45); }

/* --- Ansichten / Tabs --- */
.mode-section, .tab-content, .sub-tab-content { display: none; }
.mode-section.active, .tab-content.active, .sub-tab-content.active { display: block; }

/* --- Hero mit Hintergrundbild --- */
.hero {
    position: relative; color: #fff; background-color: var(--ink);
    background-image: linear-gradient(90deg, rgba(17,18,20,.92) 0%, rgba(17,18,20,.72) 45%, rgba(17,18,20,.35) 100%), url("background.jpg");
    background-size: cover; background-position: center;
}
.hero-inner { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(32px, 5vw, 56px); }
.hero-compact .hero-inner { padding-bottom: clamp(40px, 6vw, 72px); }
.hero-title { font-size: clamp(3.2rem, 9vw, 7.5rem); line-height: .88; letter-spacing: -.035em; }
.hero-lead { max-width: 620px; margin: 22px 0 0; font-size: clamp(1rem, 1.6vw, 1.2rem); color: rgba(255,255,255,.82); }
.status-box { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.status-indicator em { font-style: italic; }
.status-running .status-indicator em { color: #fff; background: var(--red); padding: 0 .12em; }
.status-stopped .status-indicator em { color: var(--red); }
.control-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: clamp(36px, 6vw, 64px); border-top: 1px solid var(--line-light); }
.hero-stat { display: flex; flex-direction: column; padding: 18px 48px 0 0; min-width: 180px; }
.hero-stat-label { order: 2; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.next-interval-timer, .interval-count { order: 1; font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: 0; cursor: pointer; text-decoration: none;
    padding: 15px 24px; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }
.link-arrow {
    border: 0; background: none; cursor: pointer; padding: 0 0 6px; border-bottom: 2px solid var(--red);
    font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: inherit;
}
.link-arrow::after { content: " →"; color: var(--red); }

/* --- Tabs (Serienmodus) --- */
.tab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 0; overflow-x: auto; }
.tab-button {
    border: 0; background: none; cursor: pointer; padding: 18px 18px 14px; margin-bottom: -1px;
    font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
    border-bottom: 3px solid transparent; white-space: nowrap;
}
.tab-button:hover { color: var(--ink); }
.tab-button.active { color: var(--ink); border-bottom-color: var(--red); }

/* --- Abschnitte --- */
.section { padding: clamp(40px, 6vw, 80px) 0; }
.section-paper { background: var(--paper); }
.section-white { background: var(--white); }
.section-dark { background: var(--ink-2); color: #fff; }
.section-dark .eyebrow { color: var(--red); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.section-hint { margin: 0 0 24px; max-width: 760px; color: var(--muted); }
.editor-hint { margin: 8px 0 18px; padding: 10px 14px; border-left: 3px solid var(--red); background: var(--paper); color: var(--muted); font-size: .9rem; }

.panel { background: var(--white); border: 1px solid var(--line); padding: clamp(18px, 3vw, 32px); margin-bottom: 20px; }
.panel h3 { margin-bottom: 8px; }
.panel .section-hint { margin-bottom: 20px; font-size: .95rem; }

/* --- Schnellstart --- */
.quick-actions-subtitle { margin: 0 0 18px; color: var(--muted); }
.quick-actions-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.quick-actions-empty { margin: 0; padding: 22px; background: var(--white); border: 1px dashed var(--line); color: var(--muted); grid-column: 1 / -1; }
.quick-action-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
    border: 1px solid var(--line); background: var(--white); padding: 20px 22px; cursor: pointer; position: relative;
    transition: background-color .15s ease;
}
.quick-action-btn::after { content: "→"; position: absolute; right: 20px; top: 18px; color: var(--red); font-weight: 800; }
.quick-action-btn:hover { background: #faf9f7; }
.quick-action-label { font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; text-transform: uppercase; padding-right: 24px; }
.quick-action-meta { font-size: .85rem; color: var(--muted); }
.quick-action-status { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.quick-action-btn.active, .quick-action-btn.quick-action-active { box-shadow: inset 4px 0 0 var(--red); }
.quick-action-btn.active .quick-action-status, .quick-action-btn.quick-action-active .quick-action-status { color: var(--red); }

/* --- Live-Log (wie "Aktuelle Einsätze") --- */
.log-container { border-top: 1px solid var(--line-light); }
.log-empty { margin: 0; padding: 28px 0; color: rgba(255,255,255,.6); }
.log-entry { display: grid; grid-template-columns: 120px 1fr auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--line-light); }
.log-time { display: flex; flex-direction: column; }
.log-time-big { font-family: var(--display); font-weight: 800; font-size: 2.9rem; line-height: .9; color: var(--red); font-variant-numeric: tabular-nums; }
.log-date { margin-top: 6px; font-size: .72rem; color: rgba(255,255,255,.55); }
.log-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.log-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 6px 0 4px; color: #fff; }
.log-details { margin: 0; color: rgba(255,255,255,.82); }
.log-address { margin: 2px 0 0; color: rgba(255,255,255,.6); }
.log-badge { display: inline-block; padding: 2px 8px; border: 1px solid var(--red); color: #fff; font-weight: 800; letter-spacing: .08em; }
.log-badge-preset { background: var(--red); }
.log-delivery { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.delivery { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border: 1px solid var(--line-light); color: rgba(255,255,255,.6); white-space: nowrap; }
.delivery-ok { border-color: rgba(76, 201, 128, .6); color: #8ee0ae; }
.delivery-error { border-color: var(--red); color: #fff; background: rgba(210,10,22,.35); }

/* --- Formulare --- */
.config-form { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 14px 24px; align-items: center; }
.config-form-two { grid-template-columns: 1fr 1fr; align-items: start; }
.config-form label, .upload-form label, .field label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.field { display: flex; flex-direction: column; gap: 8px; }
input[type="text"], input[type="number"], input[type="password"], input:not([type]), select, textarea {
    width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 0; background: var(--white);
    font-size: .95rem; transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(210,10,22,.15); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input[type="file"] { font-size: .85rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin: 4px 0 20px; }
.panel .form-actions { margin: 20px 0 0; }
.upload-form { display: grid; grid-template-columns: minmax(180px, 280px) 1fr auto; gap: 14px 24px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }

/* Schalter */
.toggle-cell { display: flex; align-items: center; }
.toggle-switch { position: relative; display: inline-block; width: 52px; height: 28px; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider { position: absolute; inset: 0; background: #cfd0d3; transition: background-color .2s ease; }
.toggle-slider::before { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; transition: transform .2s ease; }
.toggle-switch input:checked + .toggle-slider { background: var(--red); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(24px); }
.toggle-switch input:focus-visible + .toggle-slider { outline: 3px solid var(--ink); outline-offset: 2px; }

/* --- Unternavigation Einstellungen --- */
.sub-tab-nav { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.sub-tab-button {
    border: 0; background: none; cursor: pointer; padding: 12px 16px; margin-bottom: -1px;
    font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
    border-bottom: 3px solid transparent;
}
.sub-tab-button:hover { color: var(--ink); }
.sub-tab-button.active { color: var(--ink); border-bottom-color: var(--red); }

/* --- Vorlagen (Serie & Einsatzgenerator) --- */
.scheduled-controls, .preset-controls { display: flex; gap: 10px; }
.scheduled-list, .preset-list { display: flex; flex-direction: column; gap: 20px; }
.scheduled-empty, .preset-empty { margin: 0; padding: 32px; text-align: center; color: var(--muted); background: var(--white); border: 1px dashed var(--line); }
.scheduled-card, .preset-card { background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--red); padding: clamp(18px, 3vw, 28px); }
.scheduled-header, .preset-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
input.scheduled-title, input.preset-title {
    flex: 1; border: 0; border-bottom: 2px solid var(--line); padding: 4px 0; background: transparent;
    font-family: var(--display); font-weight: 800; font-size: 1.9rem; text-transform: uppercase; line-height: 1.1;
}
input.scheduled-title:focus, input.preset-title:focus { box-shadow: none; border-bottom-color: var(--red); }
.scheduled-status { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.scheduled-status[data-pending]:not([data-pending="0"]) { border-color: var(--red); color: var(--red); }
.scheduled-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.scheduled-field { display: flex; flex-direction: column; gap: 6px; }
.scheduled-field > span { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.field-full-width { grid-column: 1 / -1; }
.selection-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; padding: 10px; background: var(--paper); border: 1px solid var(--line); max-height: 280px; overflow-y: auto; }
.selection-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--white); border: 1px solid var(--line); cursor: pointer; font-size: .88rem; }
.selection-option:hover { border-color: var(--ink); }
.selection-option input { accent-color: var(--red); width: 16px; height: 16px; margin: 0; }
.selection-option:has(input:checked) { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.selection-empty { margin: 0; font-size: .85rem; color: var(--muted); }
.scheduled-actions, .preset-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.scheduled-actions button, .preset-actions button {
    border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; border-radius: 0;
    padding: 11px 16px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.scheduled-actions button:hover, .preset-actions button:hover { background: var(--ink); color: #fff; }
.btn-preset-trigger, .btn-scheduled-queue { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
.btn-preset-trigger:hover, .btn-scheduled-queue:hover { background: var(--red-dark) !important; }
.btn-preset-delete, .btn-scheduled-delete { margin-left: auto; border-color: transparent !important; color: var(--red) !important; }
.btn-preset-delete:hover, .btn-scheduled-delete:hover { background: rgba(210,10,22,.08) !important; }

/* --- Daten-Editor --- */
.editor-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.editor-subtitle { margin: 0; color: var(--muted); font-size: .9rem; }
.io-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-io { display: inline-flex; align-items: center; padding: 9px 14px; border: 1px solid var(--line); background: var(--white); cursor: pointer; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.btn-io:hover { border-color: var(--ink); }
.demo-download { margin: 10px 0 0; font-size: .82rem; color: var(--muted); }
.demo-download a { color: var(--red); font-weight: 600; }
.table-controls { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.table-container { max-height: 460px; overflow: auto; border: 1px solid var(--line); }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data-table th { position: sticky; top: 0; background: var(--ink); color: #fff; text-align: left; padding: 12px 14px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.data-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.data-table tbody tr:nth-child(even) { background: #faf9f7; }
.data-table td[contenteditable="true"]:focus { outline: 2px solid var(--red); outline-offset: -2px; background: #fff; }
.table-actions { width: 1%; text-align: right; }
.btn-delete-row { border: 0; background: none; cursor: pointer; color: var(--red); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.group-card { border: 1px solid var(--line); border-left: 4px solid var(--red); padding: 18px; margin-bottom: 14px; background: var(--white); }
.group-header { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.group-header .stichwort-input { flex: 0 1 200px; font-family: var(--display); font-weight: 800; font-size: 1.3rem; text-transform: uppercase; }
.group-header .alarm-input { flex: 1 1 240px; }
.btn-delete-group { border: 0; background: none; cursor: pointer; color: var(--red); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 10px; }
.group-meta { display: grid; grid-template-columns: minmax(160px, 220px) 160px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.group-probability-label { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.group-probability-hint { font-size: .8rem; color: var(--muted); }
.meldebilder-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.meldebild-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; background: var(--paper); border: 1px solid var(--line); font-size: .88rem; }
.tag-delete-btn { border: 0; background: var(--ink); color: #fff; width: 20px; height: 20px; cursor: pointer; line-height: 1; font-size: .9rem; }
.tag-delete-btn:hover { background: var(--red); }
.add-meldebild-form { display: flex; gap: 10px; }
.btn-add-meldebild { border: 1px solid var(--ink); background: transparent; cursor: pointer; padding: 0 16px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.btn-add-meldebild:hover { background: var(--ink); color: #fff; }

/* --- Einsatzgebiet (Karte) --- */
.source-switch { border: 0; padding: 0; margin: 18px 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.source-switch legend { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; padding: 0; }
.source-option { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.source-option input { accent-color: var(--red); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.source-option span { display: flex; flex-direction: column; gap: 4px; }
.source-option strong { font-family: var(--display); font-weight: 800; font-size: 1.25rem; text-transform: uppercase; line-height: 1; }
.source-option small { color: var(--muted); font-size: .85rem; line-height: 1.4; }
.source-option:has(input:checked) { border-color: var(--red); box-shadow: inset 4px 0 0 var(--red); }
.area-search { display: flex; gap: 10px; margin-bottom: 10px; }
.area-search .btn { flex: none; }
.area-results { border: 1px solid var(--line); background: var(--white); margin-bottom: 12px; max-height: 280px; overflow-y: auto; }
.area-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 12px 14px; cursor: pointer; }
.area-result:last-child { border-bottom: 0; }
.area-result:hover { background: var(--paper); box-shadow: inset 4px 0 0 var(--red); }
.area-result strong { font-weight: 700; }
.area-result span { font-size: .82rem; color: var(--muted); }
.area-empty { margin: 0; padding: 12px 14px; color: var(--muted); font-size: .9rem; list-style: none; }
.area-map-wrap { position: relative; border: 1px solid var(--line); }
.area-map { height: 520px; background: #e8e6e1; z-index: 0; }
.area-map-help { padding: 8px 12px; font-size: .8rem; color: var(--muted); background: var(--paper); border-top: 1px solid var(--line); }
.area-feature-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.area-feature-list li { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 0; border: 1px solid var(--line); background: var(--white); font-size: .88rem; }
.area-feature-list li.area-empty { border: 0; background: none; padding: 0; }
.area-chip-kind { background: var(--ink); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 8px 8px; margin: -6px 0; align-self: stretch; display: flex; align-items: center; }
.area-feature-list button { border: 0; background: none; color: var(--red); cursor: pointer; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.area-pool { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.area-pool-count { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--red); margin-right: 10px; font-variant-numeric: tabular-nums; }
.area-pool-label { color: var(--muted); font-size: .9rem; }
.area-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.leaflet-container { font-family: var(--body); }
.leaflet-draw-toolbar a { border-radius: 0 !important; }
.leaflet-bar, .leaflet-bar a { border-radius: 0 !important; }

.area-filter { margin-top: 16px; }
.area-filter-result { margin: 8px 0 0; font-size: .88rem; color: var(--muted); }
.area-filter-result strong { color: var(--red); }

.area-mix { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 20px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); }
.area-mix-title { margin: 0; width: 100%; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.area-mix-field { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.area-mix-field input { width: 80px; padding: 8px 10px; }
.area-mix-field em { font-style: normal; color: var(--muted); }
.area-mix-hint { margin: 0; width: 100%; font-size: .8rem; color: var(--muted); }
.area-mix-hint code { background: var(--white); padding: 1px 5px; border: 1px solid var(--line); }
.log-badge-place { border-color: #e07b00; }

/* Fortschritt beim Laden */
.area-progress { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-left: 4px solid var(--ink); background: var(--white); }
.area-progress.is-running { border-left-color: var(--red); }
.area-progress.is-done { border-left-color: var(--ok); }
.area-progress.is-error { border-left-color: var(--red); background: rgba(210,10,22,.05); }
.area-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.area-progress-step { font-family: var(--display); font-weight: 800; font-size: 1.3rem; text-transform: uppercase; }
.area-progress-meta { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.area-progress-track { height: 8px; background: var(--paper); overflow: hidden; }
.area-progress-bar { height: 100%; width: 4%; background: var(--red); transition: width .4s ease; }
.area-progress.is-done .area-progress-bar { background: var(--ok); }
.area-progress-bar.is-waiting {
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 10px, transparent 10px 20px);
    background-size: 28px 28px; animation: area-stripes 0.8s linear infinite;
}
@keyframes area-stripes { from { background-position: 0 0; } to { background-position: 28px 0; } }
.area-progress-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 12px 0 0; padding: 0; font-size: .78rem; color: var(--muted); }
.area-progress-steps li::before { content: "○"; margin-right: 6px; }
.area-progress-steps li.done { color: var(--ink); }
.area-progress-steps li.done::before { content: "✓"; color: var(--ok); font-weight: 800; }
.area-progress-steps li.current { color: var(--red); font-weight: 700; }
.area-progress-steps li.current::before { content: "●"; }
.area-progress-steps li.failed { color: var(--red); font-weight: 700; }
.area-progress-steps li.failed::before { content: "✕"; }

/* Liste der gespeicherten Straßen */
.area-streets { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.area-streets-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.area-streets-head h4 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; }
.area-streets-head h4 span { color: var(--muted); font-size: 1rem; }
.area-streets-hint { font-size: .8rem; color: var(--muted); }
.area-streets-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; max-height: 460px; overflow-y: auto; }
.area-street { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.area-street:hover { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--red); }
.area-street strong { font-weight: 700; }
.area-street strong em { font-style: normal; font-size: .72rem; font-weight: 800; color: #fff; background: #e07b00; padding: 1px 5px; margin-left: 4px; }
.area-street span { font-size: .78rem; color: var(--muted); }

/* --- AVV (Pop-up und Druckansicht) --- */
.avv-locked { overflow: hidden; }
.avv-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(17,18,20,.72); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: clamp(12px, 4vw, 48px) 12px; }
.avv-dialog { width: 100%; max-width: 860px; background: var(--paper); border-top: 6px solid var(--red); padding: clamp(20px, 4vw, 40px); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.avv-dialog-head h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 14px; }
.avv-intro { margin: 0 0 22px; color: var(--muted); }
.avv-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.avv-field { display: flex; flex-direction: column; gap: 6px; }
.avv-field span { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.avv-field-wide { grid-column: 1 / -1; }
.avv-details { margin: 22px 0 18px; border: 1px solid var(--line); background: var(--white); }
.avv-details summary { cursor: pointer; padding: 12px 16px; font-weight: 700; }
.avv-details[open] summary { border-bottom: 1px solid var(--line); }
.avv-details .avv-text { padding: 4px 18px 18px; max-height: 50vh; overflow-y: auto; }
.avv-confirm { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); cursor: pointer; }
.avv-confirm input { width: 20px; height: 20px; accent-color: var(--red); flex: none; margin-top: 2px; }
.avv-error { margin: 14px 0 0; padding: 10px 14px; border-left: 4px solid var(--red); background: rgba(210,10,22,.08); }
.avv-buttons { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.avv-text h3 { font-size: 1.7rem; margin: 14px 0 4px; }
.avv-text h4 { font-family: var(--body); font-size: .95rem; font-weight: 800; text-transform: none; letter-spacing: 0; margin: 18px 0 6px; }
.avv-text p, .avv-text li { font-size: .92rem; line-height: 1.55; }
.avv-text p { margin: 0 0 8px; }
.avv-text ul { margin: 0 0 8px; padding-left: 20px; }
.avv-version { color: var(--muted); font-size: .82rem !important; }
.avv-actions { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.avv-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--ink); }
.avv-signatures p { margin: 0 0 4px; }
.avv-sig-label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.avv-sig-note { font-size: .8rem; color: var(--muted); }
@media (max-width: 640px) {
    .avv-fields, .avv-signatures { grid-template-columns: 1fr; }
}
@media print {
    .no-print, .footer { display: none !important; }
    body, .section-paper { background: #fff !important; }
    .section { padding: 0; }
    .panel { border: 0; padding: 0; }
}

/* --- Meldungen --- */
.toast {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 200;
    padding: 14px 22px; min-width: 260px; max-width: calc(100vw - 32px); text-align: center;
    color: #fff; font-weight: 600; background: var(--ink); border-left: 5px solid var(--ok);
    opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.toast.error { border-left-color: var(--red); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* --- Footer --- */
.footer { background: var(--ink); color: rgba(255,255,255,.7); font-size: .88rem; }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; padding-top: 44px; padding-bottom: 28px; }
.footer-brand { display: flex; flex-direction: column; gap: 4px; }
.footer-title { font-family: var(--display); font-weight: 800; font-size: 1.6rem; text-transform: uppercase; color: #fff; line-height: 1; }
.footer-links { display: flex; gap: 22px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-bottom { padding-top: 18px; padding-bottom: 28px; font-size: .78rem; background: linear-gradient(var(--line-light), var(--line-light)) no-repeat center top / calc(100% - 2 * var(--gutter)) 1px; }

/* --- Login & Impressum (eigenständige Seiten) --- */
.page-simple { min-height: 100vh; display: flex; flex-direction: column; }
.page-simple main { flex: 1; }
.login-hero { min-height: calc(100vh - 34px - 160px); display: flex; align-items: center; }
.login-hero .hero-inner { width: 100%; display: grid; grid-template-columns: 1.2fr minmax(300px, 420px); gap: clamp(32px, 6vw, 80px); align-items: center; padding-top: 64px; padding-bottom: 64px; }
.login-card { background: var(--white); color: var(--ink); padding: clamp(24px, 4vw, 40px); border-top: 4px solid var(--red); }
.login-card h2 { font-size: 2.4rem; margin-bottom: 18px; }
.login-logo { height: 64px; width: auto; margin-bottom: 18px; }
.login-form { display: flex; flex-direction: column; gap: 8px; }
.login-form label { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.login-form input { margin-bottom: 10px; }
.login-form .btn { margin-top: 8px; width: 100%; }
.login-error { margin: 0 0 16px; padding: 12px 14px; border-left: 4px solid var(--red); background: rgba(210,10,22,.08); color: var(--ink); font-size: .92rem; }
.login-error code { background: rgba(0,0,0,.06); padding: 1px 5px; }
.impressum-section { margin-bottom: 28px; }
.impressum-section h2 { font-size: 1.8rem; margin-bottom: 8px; }
.impressum-section p { margin: 0; }
.legal-text .impressum-section p + p { margin-top: 10px; }
.impressum-back a + a { margin-left: 18px; }
.impressum-back { margin-top: 40px; }
.impressum-back a { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 4px; }

/* --- Responsiv --- */
@media (max-width: 1080px) {
    .mode-button { padding: 0 14px; font-size: .78rem; }
    .brand-logo { height: 60px; }
}

@media (max-width: 900px) {
    .header-inner { min-height: 76px; align-items: center; }
    .brand-logo { height: 52px; }
    .brand-kicker { display: none; }
    .nav-toggle {
        display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
        border: 0; background: none; cursor: pointer; padding: 8px; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    }
    .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 26px; height: 2px; background: var(--ink); position: relative; content: ""; }
    .nav-toggle-bars::before { position: absolute; top: -8px; }
    .nav-toggle-bars::after { position: absolute; top: 8px; }
    .nav-toggle-bars { margin: 8px 0 6px; }
    .main-nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(0,0,0,.08);
    }
    .nav-open .main-nav { display: flex; }
    .mode-button { padding: 16px var(--gutter); text-align: left; border-top: 1px solid var(--line); font-size: .85rem; }
    .mode-button.active::before { inset: 0; clip-path: none; }
    .mode-button.is-operating::after { right: var(--gutter); }

    .config-form, .config-form-two, .upload-form { grid-template-columns: 1fr; gap: 8px; }
    .config-form label { margin-top: 8px; }
    .group-meta { grid-template-columns: 1fr; }
    .log-entry { grid-template-columns: 84px 1fr; gap: 16px; }
    .log-time-big { font-size: 2.2rem; }
    .log-delivery { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .login-hero .hero-inner { grid-template-columns: 1fr; }
    .source-switch { grid-template-columns: 1fr; }
    .area-map { height: 420px; }
}

@media (max-width: 560px) {
    .topbar-mode { display: none; }
    .brand-title { font-size: 1.25rem; }
    .hero-stat { min-width: 50%; padding-right: 16px; }
    .next-interval-timer, .interval-count { font-size: 2rem; }
    .control-buttons { width: 100%; }
    .control-buttons .btn { flex: 1; }
    .section-head { align-items: flex-start; }
    .scheduled-header, .preset-header { flex-direction: column; align-items: stretch; }
    .scheduled-actions button, .preset-actions button { flex: 1 1 calc(50% - 10px); }
    .btn-preset-delete, .btn-scheduled-delete { margin-left: 0; }
    .add-meldebild-form { flex-direction: column; }
    .btn-add-meldebild { padding: 12px; }
    .table-controls .btn { flex: 1; }
    .log-entry { grid-template-columns: 1fr; gap: 6px; }
    .log-time { flex-direction: row; align-items: baseline; gap: 10px; }
    .log-delivery { grid-column: auto; }
    .selection-checklist { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}