/* leuchten – anwendungseigene Stile.
   Der gemeinsame Grundstil steht in /shared/resys.css; hier stehen nur die
   Teile, die es dort nicht gibt: Seitennavigation, Kennzahlen, Importer und
   die Handy-Ansicht für den Monteur. */

/* --- Büroteil: Kopfzeile mit Navigation ------------------------------ */
.buero-rahmen {
    display: flex;
    min-height: calc(100vh - 56px);
}

.buero-navigation {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid var(--gray-200);
    padding: 16px 0;
}

.nav-gruppe {
    padding: 14px 20px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.nav-punkt {
    display: block;
    padding: 9px 20px;
    color: var(--gray-700);
    text-decoration: none;
    border-left: 3px solid transparent;
    font-size: 0.94rem;
}

.nav-punkt:hover { background: var(--gray-50); color: var(--gray-900); }

.nav-punkt.aktiv {
    background: var(--primary-light);
    border-left-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.buero-inhalt {
    flex: 1;
    padding: 24px 28px 60px;
    min-width: 0;   /* sonst sprengen breite Tabellen das Flex-Element */
}

.menue-schalter {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--gray-700);
}

/* --- Kennzahlen ------------------------------------------------------ */
.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.kennzahl {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow);
}

.kennzahl-wert {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gray-900);
}

.kennzahl-titel {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--gray-500);
}

.kennzahl-offen   .kennzahl-wert { color: var(--warning); }
.kennzahl-fertig  .kennzahl-wert { color: var(--success); }
.kennzahl-problem .kennzahl-wert { color: var(--danger); }

.fortschritt {
    height: 10px;
    background: var(--gray-200);
    border-radius: 999px;
    overflow: hidden;
}

.fortschritt-balken {
    height: 100%;
    background: var(--success);
    border-radius: 999px;
    transition: width 0.3s;
}

/* --- Tabellen -------------------------------------------------------- */
.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.tabelle th,
.tabelle td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    vertical-align: top;
}

.tabelle th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    font-weight: 600;
    white-space: nowrap;
}

.tabelle tbody tr:hover { background: var(--gray-50); }

/* Breite Tabellen rollen in sich selbst, damit die Seite nicht quer läuft. */
.tabelle-rollbar {
    overflow-x: auto;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
}

.tabelle-rollbar .tabelle { font-size: 0.82rem; }
.tabelle-rollbar .tabelle td { white-space: nowrap; }

/* --- Importer -------------------------------------------------------- */
.schritt-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
}

.schritt {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: 0.84rem;
    font-weight: 600;
}

.schritt.aktiv    { background: var(--primary); color: #fff; }
.schritt.erledigt { background: var(--success-light); color: var(--success); }

.schritt-knoepfe {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.abschnitt-titel {
    font-size: 1rem;
    font-weight: 600;
    margin: 24px 0 4px;
    color: var(--gray-800);
}

.abschnitt-text { font-size: 0.88rem; margin-bottom: 12px; }

.feld-hinweis {
    font-size: 0.8rem;
    color: var(--gray-500);
    margin-top: 4px;
}

.pflicht { color: var(--danger); }

.hinweis-liste {
    margin: 8px 0 0 18px;
    font-size: 0.88rem;
    color: var(--gray-700);
}

.hinweis-liste li { margin-bottom: 4px; }

/* Zuordnung: links das Zielfeld, rechts die Spaltenauswahl. */
.zuordnung-zeile {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
    gap: 12px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
}

.zuordnung-zeile.pflichtfeld { background: var(--primary-light); }
.zuordnung-zeile.pflichtfeld .zuordnung-feld { padding-left: 8px; }

.zuordnung-feld strong { font-size: 0.92rem; }
.zuordnung-auswahl select { width: 100%; }

.filter-zeile {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.filter-zeile select { flex: 1 1 200px; min-width: 0; }
.filter-zeile input  { flex: 0 1 160px; }

/* --- Monteuransicht (Handy) ------------------------------------------ */
.monteur-kopf {
    position: sticky;
    top: 0;
    z-index: 20;
}

.monteur-titel {
    flex: 1;
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zurueck-pfeil {
    font-size: 1.8rem;
    line-height: 1;
    text-decoration: none;
    color: var(--gray-700);
    padding: 0 10px;
}

.monteur-inhalt { padding: 12px; padding-bottom: 80px; }
.monteur-info   { margin-bottom: 8px; }

/* --- Schmale Schirme -------------------------------------------------- */
@media (max-width: 768px) {
    .menue-schalter { display: block; }

    .buero-rahmen { flex-direction: column; }

    .buero-navigation {
        display: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
    }

    .buero-navigation.offen { display: block; }

    .buero-inhalt { padding: 16px 14px 60px; }

    .zuordnung-zeile { grid-template-columns: 1fr; gap: 6px; }

    .filter-zeile select,
    .filter-zeile input { flex: 1 1 100%; }
}

/* --- Filterleiste ---------------------------------------------------- */
.filterleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 14px;
}

.filter-feld { flex: 0 1 190px; min-width: 0; }
.filter-suche { flex: 1 1 240px; }
.filter-feld select,
.filter-feld input { width: 100%; }

.filter-schalter {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    color: var(--gray-600);
    white-space: nowrap;
}

.filter-schalter input { width: auto; }

.ergebnis-zeile { margin-bottom: 10px; font-size: 0.92rem; }

.blaetterleiste {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    font-size: 0.88rem;
}

/* --- Stand einer Leuchte --------------------------------------------- */
.status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-offen   { background: var(--warning-light); color: #92400e; }
.status-fertig  { background: var(--success-light); color: #14532d; }
.status-problem { background: var(--danger-light);  color: #7f1d1d; }
.status-wartet  { background: var(--gray-200);      color: var(--gray-700); }

.merker {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.72rem;
    white-space: nowrap;
}

.merker-warnung { background: var(--warning-light); color: #92400e; }

.tabelle-klickbar tbody tr { cursor: pointer; }

/* --- Karte ----------------------------------------------------------- */
.karten-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.84rem;
}

.karten-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    color: var(--gray-600);
}

.legende-punkt {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 2px;
    vertical-align: -1px;
    border: 1px solid #fff;
}

.legende-offen      { background: #f59e0b; }
.legende-fertig     { background: #16a34a; }
.legende-problem    { background: #dc2626; }
.legende-wartet     { background: #6b7280; }
.legende-abweichend { background: #f59e0b; border: 2.5px solid #111827; }

.grosse-karte {
    height: calc(100vh - 260px);
    min-height: 420px;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    z-index: 1;   /* bleibt unter der Kopfzeile */
}

.minikarte {
    height: 240px;
    margin-top: 10px;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    z-index: 1;
}

.popup-klein { font-size: 0.8rem; color: var(--gray-500); }

/* --- Detailseite einer Leuchte --------------------------------------- */
.leuchte-kopf { margin-bottom: 12px; }
.leuchte-ort  { font-size: 1.15rem; font-weight: 600; margin: 6px 0 2px; }

.angaben {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 20px;
    margin-top: 12px;
}

.angaben > div { min-width: 0; }

.angaben dt {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    font-weight: 600;
}

.angaben dd {
    margin: 2px 0 0;
    font-size: 0.94rem;
    color: var(--gray-800);
    overflow-wrap: anywhere;
}

.angaben-eng { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; }
.angaben-eng dd { font-size: 0.86rem; }

.hinweis-kasten {
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--gray-50);
    border-left: 3px solid var(--gray-300);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.9rem;
}

.rohdaten-kasten summary { cursor: pointer; }

.verlauf { list-style: none; margin: 10px 0 0; padding: 0; }

.verlauf-eintrag {
    display: flex;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.9rem;
}

.verlauf-eintrag:last-child { border-bottom: none; }
.verlauf-fehler .verlauf-text strong { color: var(--danger); }

.verlauf-zeit {
    flex: 0 0 108px;
    color: var(--gray-500);
    font-size: 0.82rem;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .grosse-karte { height: 60vh; }
    .filter-feld, .filter-suche { flex: 1 1 100%; }
    .verlauf-eintrag { flex-direction: column; gap: 2px; }
    .verlauf-zeit { flex: none; }
}

/* --- Produktpflege --------------------------------------------------- */
.produkt-karte { padding: 0; }

.produkt-karte > summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
}

.produkt-karte[open] > summary { border-bottom: 1px solid var(--gray-200); }
.produkt-fertig > summary { background: var(--gray-50); }

.produkt-titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.produkt-stand { font-size: 0.84rem; color: var(--gray-500); }

.produkt-formular { padding: 16px; }

.scan-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: var(--gray-50);
    border-radius: var(--radius);
}

.scan-leiste .feld-hinweis { margin: 0; flex: 1 1 220px; }
.speicher-hinweis { margin-left: 10px; font-size: 0.84rem; color: var(--gray-500); }

/* --- Scanner --------------------------------------------------------- */
.scan-fenster {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.scan-kasten {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 14px;
    width: 100%;
    max-width: 520px;
}

.scan-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.scan-video {
    width: 100%;
    max-height: 60vh;
    background: #000;
    border-radius: var(--radius);
    object-fit: cover;
}

.scan-meldung {
    margin-top: 10px;
    font-size: 0.88rem;
    color: var(--gray-600);
    text-align: center;
}

/* --- Monteuransicht: Tour --------------------------------------------- */
.tour-kopf {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.tour-zahl {
    flex: 1;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 12px;
    text-align: center;
    font-size: 0.84rem;
    color: var(--gray-500);
}

.tour-zahl strong {
    display: block;
    font-size: 1.5rem;
    color: var(--gray-900);
    line-height: 1.2;
}

.tour-heute strong { color: var(--success); }

.tour-suche {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.tour-suche input { flex: 1; min-width: 0; }
.tour-knoepfe { margin-bottom: 6px; }

.tour-liste {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.tour-liste li { margin-bottom: 8px; }

/* Der ganze Eintrag ist die Schaltflaeche - am Mast wird mit Handschuhen
   getippt, kleine Ziele sind dort unbrauchbar. */
.tour-eintrag {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 12px;
    text-decoration: none;
    color: inherit;
    min-height: 62px;
}

.tour-eintrag:active { background: var(--gray-50); }

.tour-nummer {
    flex: 0 0 auto;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
    font-size: 0.98rem;
    padding: 8px 12px;
    border-radius: var(--radius);
    min-width: 62px;
    text-align: center;
}

.tour-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.92rem;
}

.tour-text > span,
.tour-text > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tour-zusatz { font-size: 0.78rem; color: var(--gray-500); }
.tour-text .merker { align-self: flex-start; white-space: normal; margin-top: 2px; }

.tour-entfernung {
    flex: 0 0 auto;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--gray-500);
    white-space: nowrap;
}

/* --- Buchen ----------------------------------------------------------- */
.buchen-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.btn-gross {
    padding: 15px 20px;
    font-size: 1.02rem;
}

.buchen-sonderfall {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-200);
}

.buchen-sonderfall summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--gray-600);
}

.pruefungs-tabelle { margin: 10px 0; font-size: 0.84rem; }
.pruefungs-tabelle td:last-child { text-align: center; font-weight: 700; }
.pruefung-fehler { background: var(--danger-light); }
.pruefung-fehler td:last-child { color: var(--danger); }

.alert-info {
    background: var(--gray-100);
    color: var(--gray-700);
    border-left: 3px solid var(--gray-400);
}

/* Ein per hidden ausgeblendetes Element muss verschwinden, auch wenn ein
   Grundstil dem Element sonst ein display zuweist. Sonst stuenden alle vier
   Schritte des Importers gleichzeitig auf der Seite. */
[hidden] { display: none !important; }

/* --- Betriebshof auf der Karte ---------------------------------------- */
/* Der Hauptstandort soll auf einen Blick auffallen, auch zwischen vielen
   Leuchtenpunkten - deshalb ein Schlagschatten und keine Verkleinerung. */
.hof-zeichen {
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.45));
}

.legende-hof {
    vertical-align: -5px;
    margin-right: 2px;
}

/* --- Routenplanung ---------------------------------------------------- */
.vorschlag-karte,
.route-karte {
    height: 420px;
    margin-top: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    z-index: 1;
}

.tour-farbe {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    vertical-align: -2px;
}

.stopp-liste {
    list-style: none;
    counter-reset: none;
    margin: 12px 0 0;
    padding: 0;
}

.stopp {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
}

.stopp:last-child { border-bottom: none; }
.stopp-fertig { opacity: 0.6; }

.stopp-position {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gray-800);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stopp-fertig .stopp-position { background: var(--success); }

.stopp-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-decoration: none;
    color: inherit;
    font-size: 0.9rem;
}

.stopp-text:hover strong { color: var(--primary); }
.stopp-text .merker { align-self: flex-start; margin-top: 2px; }

.stopp-rechts {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.stopp-werkzeuge {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.stopp-werkzeuge select { font-size: 0.78rem; padding: 3px 6px; }

@media (max-width: 768px) {
    .vorschlag-karte, .route-karte { height: 320px; }
    .stopp { flex-wrap: wrap; }
    .stopp-rechts { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* Haltenummern auf der Tourenkarte */
.halt-zeichen span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gray-800);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

.halt-fertig span { background: var(--success); }

/* Übersicht des gewählten Gebiets in der Routenplanung */
.gebiet-uebersicht { margin: 12px 0; }
.gebiet-uebersicht:empty { margin: 0; }
.gebiet-titel { font-size: 0.9rem; margin-bottom: 8px; }
.gebiet-uebersicht .tabelle { font-size: 0.84rem; }

/* Bemerkungsfeld an der Leuchte */
.notiz-karte textarea {
    width: 100%;
    margin-top: 8px;
    font-family: inherit;
    font-size: 0.94rem;
    resize: vertical;
}

/* --- Eigene Touren in der Monteuransicht ------------------------------ */
.touren-liste { margin-bottom: 4px; }

.tour-karte {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--gray-300);
    border-radius: var(--radius);
    padding: 14px;
    text-decoration: none;
    color: inherit;
}

/* Die Tour von heute ist die, um die es geht - sie hebt sich ab. */
.tour-heute-karte {
    border-left-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.tour-karte:active { background: var(--gray-50); }

.tour-karte-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 1rem;
}

.tour-karte-zahlen { font-size: 0.86rem; color: var(--gray-600); }
.tour-karte-zahlen strong { color: var(--gray-900); font-size: 1rem; }

.merker-heute {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
}

.tour-karte .fortschritt { height: 6px; }
.tour-keine { margin-bottom: 4px; }

.monteur-seite .abschnitt-titel { margin-top: 18px; }
.monteur-seite .abschnitt-titel:first-child { margin-top: 4px; }

/* Hinweis auf die Tour, zu der eine Leuchte gehört */
.tour-bezug {
    margin-top: 12px;
    padding: 8px 12px;
    background: var(--gray-100);
    border-radius: var(--radius);
    font-size: 0.86rem;
    color: var(--gray-600);
}

.tour-bezug a { color: var(--primary); }

/* --- Navigation zur Leuchte ------------------------------------------- */
.navi-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}

/* Der Navi-Knopf ist auf dem Handy das wichtigste Ziel der Seite und
   bekommt deshalb die volle Breite. */
.navi-knoepfe .btn-block { flex: 1 1 100%; }

.navi-hinweis {
    font-size: 0.82rem;
    color: var(--gray-500);
    overflow-wrap: anywhere;
}

/* --- Standort ganz oben auf der Leuchtenseite -------------------------- */
.standort-karte .leuchte-ort { margin: 8px 0 2px; }
.standort-karte .minikarte { margin-top: 12px; }

/* --- Navi-Knopf in der Halteliste ------------------------------------- */
.btn-navi {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    white-space: nowrap;
    text-decoration: none;
}

.btn-navi:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }

/* Knöpfe in den Sprechblasen der Karten */
.popup-knoepfe {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.popup-knoepfe .btn { flex: 1; text-align: center; white-space: nowrap; }
.leaflet-popup-content { margin: 12px 14px; }

/* Standortvermerk im Verlauf einer Leuchte */
.standort-vermerk {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--gray-500);
}

/* Auffaellig wird es erst, wenn etwas nicht stimmt. */
.standort-weit  { color: var(--warning); font-weight: 600; }
.standort-fehlt { color: var(--danger); font-weight: 600; }

/* Abweichendes Produkt für eine einzelne Leuchte (nur Admins) */
.produkt-abweichend {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
}

.produkt-abweichend > summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--gray-600);
    font-weight: 600;
}

.produkt-abweichend[open] > summary { margin-bottom: 10px; }

/* --- Legende als Filter ----------------------------------------------- */
.legende-schalter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 3px 10px 3px 6px;
    font: inherit;
    font-size: 0.84rem;
    color: var(--gray-400);
    cursor: pointer;
    /* Ausgeschaltete Gruppen sind blass - man sieht auf einen Blick,
       dass gerade nicht alles dargestellt wird. */
    opacity: 0.45;
}

.legende-schalter:hover { background: var(--gray-100); }

.legende-schalter.aktiv {
    color: var(--gray-700);
    opacity: 1;
    border-color: var(--gray-300);
    background: #fff;
}

.legende-schalter .legende-punkt { margin-right: 0; }
.legende-hof-eintrag { display: inline-flex; align-items: center; gap: 4px; color: var(--gray-600); }

/* --- Sortierbare Spaltenköpfe ----------------------------------------- */
.spalten-sortierung {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.spalten-sortierung:hover { color: var(--primary); }
.spalten-sortierung.aktiv { color: var(--primary); }

/* Masten mit mehr als einer Leuchte fallen auf - sie zählen doppelt. */
.stueck-mehrfach { font-weight: 700; color: var(--primary); }

.export-knopf { margin-left: 10px; }

/* Produkt, das einer einzelnen Leuchte von Hand zugewiesen wurde */
.merker-einzeln { background: var(--primary-light); color: var(--primary); }

/* --- Hilfe: Dokumente zum Herunterladen -------------------------------- */
.dokument {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.dokument-zeichen {
    flex: 0 0 auto;
    width: 44px;
    height: 54px;
    border-radius: 4px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary);
}

.dokument-text { flex: 1 1 260px; min-width: 0; }
.dokument-text p { margin-top: 3px; font-size: 0.88rem; }
.dokument-text .feld-hinweis { margin-top: 5px; }
.dokument-knopf { flex: 0 0 auto; }

/* Formular zum Anlegen einer neuen Produktposition */
.produkt-neu > summary { background: var(--gray-50); }
.produkt-neu[open] > summary { background: var(--primary-light); }
.produkt-neu .produkt-titel strong { color: var(--primary); }

/* --- Tourplanung von Hand --------------------------------------------- */
.plan-zahlen { margin-top: 14px; padding: 12px; }
.plan-zahlen .kennzahlen { margin: 0; }
.legende-gewaehlt { background: #d10911; }

/* --- Packliste einer Tour -------------------------------------------------
   Die Stückzahl steht links und gross: der Monteur liest beim Beladen nur
   diese Spalte ab. Fehlt zu einer Leuchte das Produkt, faellt der Kasten
   darueber durch die Warnfarbe auf. */
.hinweis-kasten-warnung {
    background: var(--warning-light);
    border-left-color: var(--warning);
    color: #92400e;
}

.packliste-menge { white-space: nowrap; }
.packliste-menge strong { font-size: 1.15rem; }
.packliste-menge .text-muted { font-size: 0.78rem; margin-left: 4px; }

.app-card-packliste .tabelle td { vertical-align: top; }
.app-card-packliste .tabelle tfoot th {
    border-top: 2px solid var(--gray-300);
    background: transparent;
}

/* Vollstaendig getauschte Zeilen bleiben stehen, treten aber zurueck. */
.app-card-packliste .zeile-erledigt { opacity: 0.45; }

@media (max-width: 640px) {
    /*
     * Auf dem Handy wird aus der Tabelle eine Liste: die Stueckzahl steht
     * links, Bezeichnung und Merkmale stehen rechts untereinander. Nebeneinander
     * waere die dritte Spalte aus dem Bild gelaufen - und genau die Stueckzahl
     * ist das, was der Monteur beim Beladen braucht.
     */
    .app-card-packliste .tabelle-rollbar { overflow: visible; }
    .app-card-packliste .tabelle,
    .app-card-packliste .tabelle tbody,
    .app-card-packliste .tabelle tfoot { display: block; }
    .app-card-packliste .tabelle thead { display: none; }

    .app-card-packliste .tabelle tr {
        display: grid;
        grid-template-columns: 52px 1fr;
        align-items: start;
        padding: 9px 0;
        border-bottom: 1px solid var(--gray-100);
    }
    .app-card-packliste .tabelle tbody tr:last-child { border-bottom: 0; }

    .app-card-packliste .tabelle td,
    .app-card-packliste .tabelle tfoot th {
        display: block;
        white-space: normal;
        border: 0;
        padding: 0 8px 0 0;
    }
    /* Die Stueckzahl ueber die gestapelten Zellen hinweg, damit sie oben
       buendig steht: Leuchtmittel, Bemerkung und Merkmale, also hoechstens
       drei. Nicht belegte Zeilen bleiben 0 hoch, weil kein row-gap gesetzt ist. */
    .app-card-packliste .tabelle td:first-child { grid-row: 1 / span 3; }
    .app-card-packliste .tabelle td.packliste-bemerkungen,
    .app-card-packliste .tabelle td.text-muted { font-size: 0.8rem; margin-top: 2px; }

    .app-card-packliste .tabelle tfoot tr { border-top: 2px solid var(--gray-300); border-bottom: 0; }
    .app-card-packliste .tabelle tfoot th:first-child { grid-row: auto; }
}

/* --- Mehrfachauswahl der LV-Positionen in der Tourenplanung --------------
   Kaestchen statt Klappliste: eine Tour deckt oft mehrere Positionen ab, und
   so sieht man alle gewaehlten auf einen Blick. Die Hoehe ist gedeckelt,
   damit die Karte darunter nicht aus dem Bild rutscht. */
.lv-auswahl {
    max-height: 132px;
    overflow-y: auto;
    padding: 6px 8px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    background: #fff;
}

/* Die Auswahl steht in einer .form-group; deren Regeln im gemeinsamen CSS
   machen jedes label zum Block und jedes input 100 % breit mit Rahmen. Beides
   muss hier gezielt zurueckgenommen werden - daher die zwei Klassen. */
.form-group .lv-eintrag {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 0;
    padding: 3px 2px;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--gray-700);
    cursor: pointer;
    white-space: nowrap;
}

.form-group .lv-eintrag:hover { background: var(--gray-50); }

.form-group .lv-eintrag input[type="checkbox"] {
    width: auto;
    flex: none;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    cursor: pointer;
}
.lv-anzahl { color: var(--gray-400); }

.lv-hinweis {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 5px 0 0;
    font-size: 0.8rem;
    color: var(--gray-400);
}

.lv-leeren {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
}

/* LV-Positionen unter dem Leuchtmittel: eigene Zeile statt eigener Spalte,
   damit die Tabelle auf dem Handy nicht noch breiter wird. */
.packliste-lv {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--gray-400);
}

/* Bemerkungen der Gemeinde in der Packliste: montagerelevant, deshalb in der
   Warnfarbe und nicht gedaempft wie die LV-Positionen darueber. */
.packliste-bemerkung {
    display: inline-block;
    margin-top: 3px;
    margin-right: 4px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--warning-light);
    color: #92400e;
    font-size: 0.78rem;
}

/* Die Packliste traegt lange Texte - Produktname und Bemerkung. Die
   Grundtabelle haelt ihre Zellen auf einer Zeile (.tabelle-rollbar), was hier
   die Spalten rechts aus dem Bild draengt. Deshalb darf hier umbrochen
   werden; nur die Artikelnummer bleibt zusammen. */
.app-card-packliste .tabelle-rollbar .tabelle td { white-space: normal; }
.app-card-packliste .tabelle td.text-muted { white-space: nowrap; }

.app-card-packliste .tabelle td.packliste-bemerkungen {
    min-width: 140px;
    max-width: 240px;
}

/* --- Buchung aus dem Verlauf entfernen (nur Admins) ----------------------
   Der Aufklapper sitzt rechts im Verlaufseintrag und tritt zurueck: das
   Entfernen einer Buchung ist die Ausnahme, nicht der Normalfall. */
.buchung-weg {
    margin-left: auto;
    flex: none;
    font-size: 0.8rem;
}

.buchung-weg > summary {
    cursor: pointer;
    color: var(--gray-400);
    list-style: none;
}

.buchung-weg > summary:hover { color: var(--primary); }
.buchung-weg[open] > summary { color: var(--primary); }

.buchung-weg-feld {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--gray-50);
    min-width: 230px;
}

.buchung-weg-feld label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.78rem;
    color: var(--gray-700);
}

.buchung-weg-feld input {
    width: 100%;
    margin-bottom: 8px;
    padding: 7px 9px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    /* Auf dem Handy unter den Eintrag statt daneben - sonst bleibt fuer den
       Text des Verlaufs kaum Platz. */
    .buchung-weg { margin-left: 0; width: 100%; }
    .buchung-weg-feld { min-width: 0; }
}

/* --- Tour abschliessen ---------------------------------------------------
   Freigegebene Stopps bleiben in der Liste stehen, treten aber zurueck: sie
   gehoeren zur Geschichte der Tour, nicht mehr zu ihrer Arbeit. */
.stopp-freigegeben { opacity: 0.62; }

.merker-freigegeben {
    background: var(--gray-100);
    color: var(--gray-700);
}

.app-card-abschluss strong { display: block; }