/* ============================================================
   TimeSecPlan – Basis-Stylesheet
   Die mobilen Anpassungen stehen in mobile.css, die NACH
   dieser Datei geladen wird.
   ============================================================ */

:root {
    --bg-color: #f4f6f9;
    --card-bg: #ffffff;
    --primary: #3498db;
    --primary-dark: #2c3e50;
    --primary-sub: #9b59b6;
    --primary-sub-hover: #8e44ad;
    --danger: #e74c3c;
    --text: #2c3e50;
    --text-dark: #2c3e50;
    --text-muted: #7f8c8d;
    --border: #dcdde1;
    --border-light: #e2e8f0;
    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.02);
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    --transition: all 0.2s ease-in-out;
}

/* ============================================================
   GRUNDGERÜST
   ============================================================ */
body {font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color:var(--bg-color); color:var(--text); margin:0; padding:0;}
/* Gilt für den einfachen Seitenkopf (z.B. scanner.php) UND als Flex-Basis
   für .main-header – beide Regeln greifen dort gemeinsam. */
header {background:#2c3e50; color:white; padding:15px 30px; display:flex; justify-content:space-between; align-items:center;}
.container {max-width:80%; margin:30px auto; padding:0 15px;}
.card {background:var(--card-bg); padding:25px; border-radius:8px; box-shadow:0 4px 6px rgba(0,0,0,0.1); margin-bottom:30px;}
.inline-form {display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap;}
input, select, button {padding:10px; border:1px solid var(--border); border-radius:4px; font-size:14px;}
button {background:var(--primary); color:white; border:none; cursor:pointer;}
button:hover { opacity:0.9; }
table {width:100%; border-collapse:collapse; margin-top:10px;}
th, td {padding:12px; text-align:left; border-bottom:1px solid var(--border);}
th { background:#f8f9fa; }

/* ============================================================
   STATUS-ABZEICHEN UND BUTTONS
   ============================================================ */
.badge { padding:5px 10px; border-radius:4px; font-weight:bold; font-size:12px; color:white; display:inline-block; }
.badge-present { background-color:#2ecc71; }
.badge-absent { background-color:#7f8c8d; }
.btn-edit { background:#f1f2f6; color:var(--text); padding:6px 10px; border-radius:4px; cursor:pointer; }
.btn-maps { text-decoration:none; color:#44bd32; font-weight:bold; }

/* ============================================================
   LOGIN-LAYOUT
   ============================================================ */
.login-body { display:flex; justify-content:center; align-items:center; height:100vh; background:#2c3e50; }
.login-card { background:white; padding:40px; border-radius:8px; width:300px; }
.login-card form { display:flex; flex-direction:column; gap:15px; }

/* ============================================================
   BENUTZERVERWALTUNG – EINGABEFELDER MIT SCHWEBENDEM LABEL
   Auswahlfelder (select) bekommen dieselbe Breite, Höhe, Rahmen
   und Schrift wie die Textfelder. Vorher hatten sie keine eigene
   Regel und blieben deshalb schmaler und niedriger.
   ============================================================ */
.input-wrapper { position:relative; margin-top:20px; width:400px; }
.input-wrapper input,
.input-wrapper select { width:100%; box-sizing:border-box; padding:12px; border:2px solid #ccc; border-radius:4px; font-size:16px; outline:none; font-family:inherit; background-color:#fff; }
.input-wrapper select { cursor:pointer; padding:0 12px; }  /* Text über die feste Höhe zentriert, sonst wird er unten abgeschnitten */
.input-wrapper label { position:absolute; left:12px; top:-10px; background-color:white; padding:0 5px; font-size:14px; color:#666; }
.input-wrapper input:focus,
.input-wrapper select:focus { border-color:#007bff; }
.input-wrapper input:focus + label,
.input-wrapper select:focus + label { color:#007bff; }

/* ============================================================
   QR-VERWALTUNG
   ============================================================ */
.qr-canvas-container { display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; padding:10px; border:1px solid #eee; border-radius:4px; }
.btn-print { background:#27ae60; color:white; padding:5px 10px; border:none; border-radius:4px; cursor:pointer; font-size:12px; margin-top:5px; text-decoration:none; display:inline-block; }

/* ============================================================
   OBJEKT-ÜBERSICHT (schichtkalender.php)
   ============================================================ */
.object-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; margin-top:20px; }
.object-card { background:var(--card-bg); text-align:center; padding:30px; border-radius:8px; border-top:4px solid var(--primary); box-shadow:0 4px 6px rgba(0,0,0,0.1); }
.object-card:hover {transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); border-top: 4px solid #27ae60; }
.object-card a { display: inline-block; margin-top: 15px; background: var(--primary); color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-weight: bold; }
.object-card a:hover { background: #27ae60; }
.object-info h3 {margin: 0 0 8px 0; color: #2c3e50;font-size: 18px;}
.object-info p {margin: 0 0 15px 0; color: #7f8c8d;font-size: 12px;}
.btn-calendar {display: block;text-align: center;background: #2980b9;color: white;text-decoration: none;padding: 10px;border-radius: 4px}
.btn-calendar:hover {background: #2471a3;}
.no-objects { text-align: center;color: #7f8c8d;padding: 40px;background: #ffffff;border-radius: 6px;border: 1px solid var(--border);}

/* ============================================================
   LOGIN-PROTOKOLL (anmeldungen.php)
   ============================================================ */
.badge-success { background-color: #2ecc71; }
.badge-failed { background-color: #e74c3c; }
.row-failed { background-color: #fff5f5; }
.ip-warning { color: #d32f2f; background-color: #ffebee; padding: 4px 8px; border-radius: 4px; font-weight: bold; border: 1px solid #ffcdd2; display: inline-block;}
.ip-normal { color: #2c3e50;font-family: monospace;}

/* ============================================================
   SCHICHTKALENDER (schicht_bearbeiten.php)
   ============================================================ */
.shift-badge { background: #f1f2f6; font-size: 11px; padding: 8px; border-radius: 4px; margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center; border-left: 3px solid var(--primary); }
.btn-shift-action { background: none; border: none; cursor: pointer; padding: 0; font-size: 13px; }

/* ============================================================
   SCHICHTLISTEN (kontingente.php / kontingente_sub.php)
   ============================================================ */
.calendar-list-container {display: flex; flex-direction: column; gap: 8px; margin-top: 20px;}
.day-list-row {background: #ffffff; border: 1px solid var(--border-light); border-radius: 6px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 20px; box-shadow: var(--shadow-soft);}
.day-list-row.today {border-color: var(--primary-sub); background: #faf0fc;}
.day-title-shift {font-weight: bold; min-width: 140px; flex-shrink: 0; display: flex; align-items: center; gap: 15px;}
.day-number {font-size: 24px; font-weight: bold; min-width: 35px; text-align: right;}
.day-number.weekend {color: var(--text-muted);}
.day-number.workday {color: var(--text-dark);}
.month-label {font-size: 14px; font-weight: bold; display: block; color: var(--text-dark);}
.weekday-label {font-size: 12px;}
.weekday-label.weekend {color: #e74c3c;}
.weekday-label.workday {color: var(--text-muted);}
.shifts-wrapper {flex: 1; display: flex; flex-direction: column; gap: 6px;}
.no-shifts-text {color: var(--text-muted); font-size: 13px; font-style: italic;}
.shifts-inner-list {display: flex; flex-direction: column; gap: 5px; width: 100%;}
.shift-badge-sub {background: #faf0fc; font-size: 11px; padding: 8px 12px; border-radius: 4px; border-left: 4px solid var(--primary-sub); display: flex; align-items: center; justify-content: space-between; gap: 15px; flex: 1;}
.shift-info-meta {display: flex; align-items: center; gap: 20px; flex-wrap: wrap; flex: 1;}
.location-name {font-size: 13px; font-weight: bold; color: var(--text-dark);}
.time-range {font-size: 13px; font-weight: bold; color: var(--text-dark);}
.overnight-icon {color: var(--primary-sub); font-size: 11px;}
.actions-and-status {display: flex; gap: 15px; align-items: center; flex-shrink: 0;}
.live-counter {background: var(--primary-sub); color: white; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: bold; flex-shrink: 0;}
.live-counter.full {background: #e74c3c;}
.btn-assign {text-decoration: none; padding: 5px 12px; font-size: 12px; background: var(--primary-sub); color: white; font-weight: bold; border-radius: 4px; transition: background 0.2s;}
.btn-assign:hover {background: var(--primary-sub-hover);}
.filter-flex-container {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;}
.filter-form-wrapper {display: flex; gap: 15px; align-items: center; flex-wrap: wrap; width: 100%; max-width: 500px;}
.filter-input-group {flex: 1; min-width: 250px;}
.filter-input-group label {font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; display: block; margin-bottom: 4px;}
.filter-select {border: 1px solid #dcdde1; padding: 8px; border-radius: 4px; width: 100%; background: white; font-size: 13px; font-weight: bold; cursor: pointer;}
.navigator-wrapper {display: flex; align-items: center;}
.navigator-current {margin: 0 15px; font-size: 15px; color: var(--text-dark); background: #eef2f5; padding: 6px 15px; border-radius: 20px;}

/* ============================================================
   FEHLGESCHLAGENE SCANS (buchung_fehler.php)
   ============================================================ */
.reason-text { color: #c0392b; font-weight: 500; }
.danger-card { border-top: 4px solid #e74c3c; }

/* ============================================================
   SCHICHTZUWEISUNG (schicht_besetzen.php)
   ============================================================ */
.info-panel {background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);border-left: 5px solid #2980b9;padding: 20px;border-radius: 8px;margin-bottom: 25px;box-shadow: var(--card-shadow);}
.info-panel h2 {margin: 0 0 5px 0;color: var(--primary-dark);font-size: 22px;}
.info-panel p {margin: 0;color: #4a5568;font-size: 15px;font-weight: 500;}
.info-panel .highlight {color: #2b6cb0;}
.slot-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));gap: 20px;margin-top: 15px;}
.slot-card {background: #ffffff;border: 1px solid var(--border-light);border-radius: 10px;padding: 20px;box-shadow: var(--card-shadow);display: flex;flex-direction: column;gap: 15px;position: relative;transition: var(--transition);}
.slot-card:hover {transform: translateY(-2px);box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);}
.form-group-shift {display: flex;flex-direction: column;gap: 6px;}
.form-group-shift label {font-size: 11px;font-weight: bold;text-transform: uppercase;color: var(--text-muted);letter-spacing: 0.5px;}
.form-control {width: 100%;padding: 10px;border-radius: 6px;border: 1px solid #cbd5e0;background-color: #ffffff;font-size: 14px;color: var(--text-dark);box-sizing: border-box;transition: var(--transition);}
.form-control:focus {outline: none;border-color: #3182ce;box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);}
.live-worker-text {font-size: 15px;font-weight: bold;padding: 4px 0;}
.option-blocked {color: #c0392b;background: #fdf2f2;}
.badge-shift {display: inline-flex;align-items: center;padding: 6px 12px;border-radius: 20px;font-size: 11px;font-weight: bold;text-transform: uppercase;width: fit-content;}
.badge-success-shift {background: #2ecc71;color: white;}
.submit-btn {background: #27ae60;color: white;border: none;padding: 14px 35px;font-size: 16px;font-weight: bold;border-radius: 50px;cursor: pointer;box-shadow: 0 4px 6px rgba(39, 174, 96, 0.2);transition: var(--transition);display: block;margin: 30px 0 0 auto;}
.submit-btn:hover {background: #219653;transform: translateY(-1px);box-shadow: 0 6px 12px rgba(39, 174, 96, 0.25);}
/* Status-Zustände für Karten */
.slot-card.status-live {border-color: #2ecc71;background: #f4fbf7;}
.slot-card.status-beendet {border-color: #ff0000;background: #f7cfcf;opacity: 0.85;}
.slot-number {position: absolute;top: 15px;right: 15px;background: #edf2f7;color: #4a5568;font-size: 11px;font-weight: bold;padding: 4px 8px;border-radius: 20px;}
.slot-title {font-size: 16px;font-weight: bold;color: var(--text-dark);margin: 0;display: flex;align-items: center;gap: 8px;}

/* ============================================================
   SCANNER-ANZEIGE (scanner.php)
   ============================================================ */
.action-indicator { padding:15px; margin-bottom:15px; border-radius:6px; font-weight:bold; font-size:18px; text-align:center; }
.status-check_in { background:#e3f2fd; color:#0d47a1; border:2px solid #1e88e5; }
.status-check_out { background:#ffebee; color:#b71c1c; border:2px solid #e53935; }

/* ============================================================
   LIVE-STATUS (live_monitor.php)
   ============================================================ */
.stats-container { display:flex; gap:20px; margin-bottom:20px; }
.stats-box { background:#fff; padding:15px 25px; border-radius:6px; border-left:5px solid var(--primary); box-shadow:0 2px 5px rgba(0,0,0,0.05); }
.stats-box.active { border-left-color:#2ecc71; }
.stats-number { font-size:24px; font-weight:bold; margin-top:5px; }

/* ============================================================
   OBJEKT-AUSWERTUNG (objekt_auswertung.php)
   ============================================================ */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px; }
.mini-card { background: #f8f9fa; padding: 15px; border-radius: 6px; border: 1px solid var(--border); text-align: center; }
.mini-card h4 { margin: 0 0 5px 0; font-size: 11px; text-transform: uppercase; color: #7f8c8d; }
.mini-card p { margin: 0; font-size: 18px; font-weight: bold; }
.live-pulse { display: inline-block; width: 8px; height: 8px; background: #2ecc71; border-radius: 50%; margin-right: 5px; animation: pulse 1.5s infinite; }
@keyframes pulse { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }

/* ============================================================
   DASHBOARD-MENÜ (dashboard.php)
   ============================================================ */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; }
.menu-box { text-align: center; padding: 30px; border-top: 4px solid var(--primary); }
.menu-box:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); border-top: 4px solid #27ae60; }
.menu-box a { display: inline-block; margin-top: 15px; background: var(--primary); color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-weight: bold; }
.menu-box a:hover { background: #27ae60; }

/* ============================================================
   FILTERMASKEN (buchungen.php / objekt_auswertung.php)
   ============================================================ */
.filter-card { background:#f8f9fa; border:1px solid var(--border); padding:15px; margin-bottom:20px; border-radius:6px; }
.filter-form { display:flex; gap:15px; flex-wrap:wrap; align-items:flex-end; }
.filter-group { display:flex; flex-direction:column; gap:5px; }
.filter-group label { font-size:12px; font-weight:bold; color:#555; }
.btn-reset { background:#7f8c8d; color:white; text-decoration:none; padding:10px 15px; border-radius:4px; font-size:14px; text-align:center; }

/* ============================================================
   SPINNER FÜR LOGOUT (abmelden.php)
   ============================================================ */
.logout-box { text-align:center; padding:30px; }
.spinner { border:4px solid rgba(0,0,0,0.1); width:36px; height:36px; border-radius:50%; border-left-color:#3498db; animation:spin 1s linear infinite; margin:20px auto; }
@keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } }

/* ============================================================
   MODAL-FENSTER
   ============================================================ */
.modal {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(44, 62, 80, 0.7); backdrop-filter:blur(4px); justify-content:center; align-items:center; z-index:9999; padding:20px; box-sizing:border-box;}
.modal-content {background:var(--card-bg); padding:35px; border-radius:8px; width:100%; max-width:500px; max-height:90vh; overflow-y:auto; box-shadow:0 10px 25px rgba(0,0,0,0.2); animation:modalFadeIn 0.3s ease-out;}
.modal-content h3 {margin-top:0; margin-bottom:25px; color:var(--text); font-size:22px; border-bottom:2px solid var(--border); padding-bottom:10px;}
.modal-content label {font-weight:bold; font-size:13px; color:#555; margin-bottom:-5px; grid-column:span 2;}
/* Auswahlfelder im Bearbeiten-Fenster gleich groß wie die Textfelder */
.modal-content input,
.modal-content select {width:100%; box-sizing:border-box; padding:12px; font-size:15px; font-family:inherit; height:44px;}
.modal-content select {grid-column:span 2; background-color:#fff; cursor:pointer; padding:0 12px;}
.modal-content input[type="email"] {grid-column:span 2;}
.modal-actions {grid-column:span 2; display:flex; justify-content:flex-end; gap:12px; margin-top:20px; border-top:1px solid var(--border); padding-top:20px;}
.modal-actions button {padding:12px 25px; font-size:15px; font-weight:bold;}
@keyframes modalFadeIn {
    from { opacity:0; transform:translateY(-20px); }
    to { opacity:1; transform:translateY(0); }
}

/* ============================================================
   UMSCHALTUNG AKTIV / INAKTIV
   mitarbeiter.php, subunternehmen_mitarbeiter.php, subunternehmen_liste.php
   ============================================================ */
.status-tabs {display:flex; gap:8px; margin:15px 0 10px; flex-wrap:wrap;}
.status-tab {display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid var(--border); border-radius:20px; background:#f8f9fa; color:var(--text); text-decoration:none; font-weight:bold; font-size:14px; transition:var(--transition);}
.status-tab:hover {border-color:var(--primary); color:var(--primary);}
.status-tab.is-current {background:var(--primary-dark); border-color:var(--primary-dark); color:#fff;}
.status-count {background:rgba(0,0,0,0.08); border-radius:10px; padding:1px 8px; font-size:12px;}
.status-tab.is-current .status-count {background:rgba(255,255,255,0.2);}

/* Uhrzeit im 15-Minuten-Raster: Stunde : Minute (schicht_bearbeiten.php) */
.time-15 { display:flex; align-items:center; gap:4px; width:100%; }
.time-15 select { flex:1; min-width:0; width:100%; cursor:pointer; padding:8px 4px !important; }
.time-15-sep { font-weight:bold; color:#555; }

/* Live-Monitor: Mitarbeiter durch Admin / Disponent auschecken */
.btn-force-checkout {background:#e74c3c; color:#fff; border:none; border-radius:4px; padding:6px 12px; font-size:13px; font-weight:bold; cursor:pointer; white-space:nowrap;}
.btn-force-checkout:hover {background:#c0392b;}

/* ============================================================
   EINPLANUNGEN: BESTÄTIGUNG DURCH SUBUNTERNEHMEN
   einplanungen.php, Kennzeichen in den Schichtlisten, Hinweisleiste
   ============================================================ */
.approval-badge { display:inline-block; color:#fff; font-size:11px; font-weight:bold; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.approval-bar { background:#fff4e5; border-bottom:2px solid #e67e22; color:#2c3e50; padding:10px 20px; text-align:center; font-size:14px; }
.approval-bar a { color:#d35400; font-weight:bold; margin-left:8px; text-decoration:none; }
.nav-count { display:inline-block; background:#e74c3c; color:#fff; border-radius:10px; font-size:11px; padding:0 7px; margin-left:4px; font-weight:bold; }
.req-hinweis { font-size:13px; color:#7f8c8d; margin:0 0 12px; }
.req-leer { color:#bdc3c7; font-style:italic; margin:0; }
.req-zeile { display:flex; justify-content:space-between; align-items:center; gap:15px; flex-wrap:wrap; border:1px solid var(--border-light); border-radius:6px; padding:12px 14px; margin-bottom:8px; background:#fff; }
.req-info { display:flex; flex-direction:column; gap:3px; font-size:14px; min-width:240px; }
.req-info span { font-size:13px; color:#555; }
.req-klein { font-size:12px !important; color:#7f8c8d !important; }
.req-aktionen { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.req-ablehnen { display:flex; gap:6px; align-items:center; }
.req-ablehnen select { min-width:220px; }
.req-btn { border:none; border-radius:4px; padding:8px 14px; font-size:13px; font-weight:bold; color:#fff; cursor:pointer; white-space:nowrap; }
.req-btn--ok { background:#27ae60; }
.req-btn--nein { background:#e74c3c; }
.req-btn--vor { background:#8e44ad; display:inline-block; }
.req-btn--grau { background:#95a5a6; }
.req-link { font-size:13px; color:#2980b9; font-weight:bold; text-decoration:none; }
/* Platzkarten in schicht_besetzen.php */
.slot-approval { font-size:12px; padding:6px 10px; border-radius:4px; background:#f8f9fa; border-left:3px solid #bdc3c7; }

/* ============================================================
   HEADER UND NAVIGATION
   ============================================================ */
.main-header {background-color:#2c3e50; box-shadow:0 2px 10px rgba(0,0,0,0.15); position:sticky; top:0; z-index:9999; font-family:'Segoe UI', Arial, sans-serif;}
.header-container {max-width:80%; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding:0 20px; height:65px;}
/* Navigations-Struktur */
.nav-bar {height:100%;}
.nav-menu {list-style:none; margin:0; padding:0; display:flex; height:100%; align-items:center;}
.nav-menu > li {position:relative; height:100%; display:flex; align-items:center;}
.nav-menu > li > a,
.dropdown-trigger {color:#ecf0f1; text-decoration:none; padding:0 20px; height:100%; display:flex; align-items:center; font-weight:500; font-size:15px; transition:background 0.2s, color 0.2s; cursor:pointer;}
.nav-menu > li:hover > a,
.dropdown-trigger:hover {background-color:#34495e; color:#3498db;}
/* Dropdown-Logik */
.dropdown-menu {position:absolute; top:65px; left:0; background-color:#ffffff; min-width:240px; box-shadow:0 8px 16px rgba(0,0,0,0.15); list-style:none; padding:10px 0; margin:0; border-radius:0 0 6px 6px; border-top:3px solid #3498db; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity 0.2s, transform 0.2s, visibility 0.2s;}
.dropdown-menu li a {color:#2c3e50; padding:12px 20px; text-decoration:none; display:block; font-size:14px; font-weight:400; transition:background 0.15s, color 0.15s;}
.dropdown-menu li a:hover {background-color:#f8fafc; color:#3498db; padding-left:25px;}
.dropdown:hover .dropdown-menu {opacity:1; visibility:visible; transform:translateY(0);}
/* Rechte Zone: Benutzer und Logout */
.user-status-zone {display:flex; align-items:center; gap:15px;}
.session-timer {font-size:13px; font-weight:bold; color:#bdc3c7; font-variant-numeric:tabular-nums; white-space:nowrap; padding:4px 8px; border-radius:20px; cursor:help; transition:background 0.2s, color 0.2s;}
/* Letzte 2 Minuten gelb, letzte Minute rot */
.session-timer--warn {color:#2c3e50; background:#f1c40f;}
.session-timer--alarm {color:#fff; background:#e74c3c; animation:pulse 1s infinite;}
.user-badge {font-size:12px; font-weight:bold; padding:5px 10px; border-radius:20px; color:white;}
.user-badge.admin { background-color:#e74c3c; }
.user-badge.subunternehmen { background-color:#f39c12; }
/* Diese drei Rollen hatten bisher keine Farbe und damit keine erkennbare Plakette */
.user-badge.disponent { background-color:#2980b9; }
.user-badge.ansicht { background-color:#7f8c8d; }
.user-badge.mitarbeiter { background-color:#27ae60; }
.btn-logout {color:#95a5a6; text-decoration:none; font-size:14px; padding:8px 12px; border:1px solid #7f8c8d; border-radius:4px; transition:all 0.2s;}
.btn-logout:hover {color:#ffffff; background-color:#c0392b; border-color:#c0392b;}
/* Hamburger-Button (auf dem Desktop ausgeblendet) */
.menu-toggle {display:none; flex-direction:column; justify-content:space-between; width:30px; height:21px; background:transparent; border:none; cursor:pointer; padding:0; z-index:10000;}
.menu-toggle span {width:100%; height:3px; background-color:#ffffff; border-radius:2px; transition:all 0.3s ease-in-out;}
/* Animation zum "X", wenn aktiv */
.menu-toggle.toggle-active span:nth-child(1) {transform:translateY(9px) rotate(45deg);}
.menu-toggle.toggle-active span:nth-child(2) {opacity:0;}
.menu-toggle.toggle-active span:nth-child(3) {transform:translateY(-9px) rotate(-45deg);}

/* ------------------------------------------------------------
   Navigation auf Smartphones und Tablets
   (weitere mobile Korrekturen stehen in mobile.css)
   ------------------------------------------------------------ */
@media (max-width:992px) {
    .menu-toggle {display:flex;}
    .header-container {justify-content:space-between;}
    /* Versteckt die Navigation standardmäßig außerhalb des Bildschirms */
    .nav-bar {position:absolute; top:65px; left:0; width:100%; background-color:#2c3e50; flex-direction:column; align-items:stretch; max-height:0; overflow:hidden; transition:max-height 0.3s ease-in-out; box-shadow:0 4px 10px rgba(0,0,0,0.2);}
    /* Wird per JavaScript vergeben, um das Menü auszurollen */
    .nav-bar.nav-active {max-height:90vh; overflow-y:auto;}
    .nav-menu {flex-direction:column; width:100%; gap:0;}
    .nav-menu > li {width:100%; border-bottom:1px solid #34495e;}
    .nav-menu > li > a,
    .dropdown-trigger {padding:15px 20px; width:100%; box-sizing:border-box; justify-content:space-between;}
    /* Mobiles Dropdown-Verhalten: per Klick einblenden */
    .dropdown-menu {position:relative; top:0; width:100%; background-color:#1a252f; box-shadow:none; border-top:none; border-left:4px solid var(--primary); border-radius:0; display:none; transform:none; opacity:1; visibility:visible; padding:5px 0;}
    .dropdown.dropdown-active .dropdown-menu {display:block;}
    .dropdown-menu li a {color:#ecf0f1; padding:12px 35px;}
    .user-status-zone {width:100%; padding:20px; box-sizing:border-box;}
}

/* ============================================================
   OBJEKT-FORMULAR (objekte.php)
   ============================================================ */
.object-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 30px; width: 100%;}
.object-form-left,
.object-form-right { min-width: 0;}
/* Formularfelder */
.form-group { margin-bottom: 18px;}
.form-group label { display: block; margin-bottom: 6px; font-weight: bold;}
.label-hint { font-weight: normal; color: #777; font-size: 13px;}
.form-group input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 15px; background: #fff;}
.form-group input:focus { outline: none; border-color: #3498db; box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.12);}
/* Vom System vergebene Werte (z. B. QR-Kennung): sichtbar, aber nicht änderbar */
.form-group input.readonly-field,
.modal-content input.readonly-field { background:#eef2f5; color:#555; border-color:#dcdde1; cursor:not-allowed; font-family:monospace; font-size:14px; }
.form-group input.readonly-field:focus,
.modal-content input.readonly-field:focus { box-shadow:none; border-color:#dcdde1; }
/* Latitude + Longitude */
.coordinates-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
/* Adresssuche */
.address-search-row { display: flex; gap: 8px;}
.address-search-row input { flex: 1; min-width: 0;}
.address-search-button { flex-shrink: 0; padding: 10px 18px; border: none; border-radius: 5px; background: #2980b9; color: white; font-size: 15px; cursor: pointer;}
.address-search-button:hover { background: #2471a3;}
.address-search-button:disabled { background: #95a5a6; cursor: wait;}
.address-status { min-height: 20px; margin-top: 7px; font-size: 13px; color: #666;}
/* Karte */
.map-wrapper { margin-top: 5px;}
.map-hint { margin-bottom: 7px; color: #666; font-size: 13px;}
#object-map { width: 100%; height: 430px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);}
/* Button "Objekt anlegen" */
.object-submit-button { margin-top: 5px; padding: 11px 22px; border: none; border-radius: 5px; background: #27ae60; color: white; font-size: 15px; cursor: pointer;}
.object-submit-button:hover { background: #219150;}

/* Tablet / kleinere Bildschirme */
@media (max-width: 900px) {
    .object-form-grid { grid-template-columns: 1fr; }
    #object-map { height: 400px; }
}
/* Handy */
@media (max-width: 600px) {
    .coordinates-row { grid-template-columns: 1fr; }
    .address-search-row { flex-direction: column; }
    .address-search-button { width: 100%; }
    #object-map { height: 350px; }
}

/* ============================================================
   ANMELDE- UND KONTOSEITEN
   passwort_vergessen.php, passwort_neu.php, passwort_aendern.php
   Vorher lagen diese Regeln als <style>-Block in den Seiten.
   ============================================================ */
.auth-body { display:flex; justify-content:center; padding:40px 20px; box-sizing:border-box; }
/* max-width schließt hier dank box-sizing die 30px Innenabstand mit ein;
   460/360 entsprechen damit exakt der bisherigen Darstellung. */
.auth-card { background:#ffffff; padding:30px; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,0.1); width:100%; max-width:460px; box-sizing:border-box; }
/* Schmalere Variante für die PIN-Anforderung */
.auth-card.narrow { max-width:360px; }
.auth-card h2 { margin-top:0; color:#2c3e50; font-size:22px; }
.auth-card label { display:block; margin-bottom:5px; font-weight:bold; color:#34495e; }
.auth-card input[type="password"],
.auth-card input[type="email"] { width:100%; padding:10px; margin:10px 0; border:1px solid #bdc3c7; border-radius:4px; box-sizing:border-box; font-size:16px; }
.auth-card .form-group { margin-bottom:15px; }
.user-info { background:#ebf5fb; padding:10px; border-radius:4px; margin-bottom:20px; font-size:14px; color:#2980b9; }
.back-link { display:block; text-align:center; margin-top:15px; color:#7f8c8d; text-decoration:none; }
.back-link:hover { text-decoration:underline; }

/* Breiter Formular-Button dieser Seiten */
.btn { background:#3498db; color:white; border:none; padding:12px; width:100%; font-size:16px; font-weight:bold; border-radius:4px; cursor:pointer; margin-top:10px; display:block; box-sizing:border-box; }
.btn:hover { background:#2980b9; }
/* Grüne Variante zum Speichern (passwort_neu.php) */
.btn-save { background:#2ecc71; }
.btn-save:hover { background:#27ae60; }

/* Meldungsstreifen */
.alert { padding:12px; border-radius:4px; margin-bottom:15px; font-weight:bold; }
.alert-danger { background:#f2dede; color:#a94442; }
.alert-success { background:#dff0d8; color:#3c763d; }

/* ============================================================
   BUCHUNGSBESTÄTIGUNG UND SCAN-FEHLER
   erfolg.php, fehler.php
   Die Akzentfarbe von erfolg.php hängt von Check-In/Check-Out ab
   und wird als --accent direkt am Element gesetzt.
   ============================================================ */
.success-card,
.error-card { text-align:center; padding:40px 20px; }
.success-card { border-top:5px solid var(--accent, #44bd32); }
.error-card { border-top:5px solid #e74c3c; }
.success-icon { font-size:50px; color:var(--accent, #44bd32); margin-bottom:15px; }
.error-icon { font-size:50px; color:#e74c3c; margin-bottom:15px; }
.time-box { background:#f8f9fa; border:1px solid #dcdde1; padding:15px; border-radius:6px; margin:20px 0; font-size:16px; color:#2c3e50; }
/* Automatische Abmeldung nach erfolgreicher Buchung (erfolg.php) */
.auto-logout { margin-top:20px; }
.auto-logout-text { font-size:13px; color:#7f8c8d; margin:0 0 8px; }
.auto-logout-balken { background:#eef2f5; border-radius:10px; height:6px; overflow:hidden; }
.auto-logout-balken > div { width:100%; height:6px; background:var(--accent, #44bd32); }

/* ============================================================
   IMPRESSUM UND DATENSCHUTZ (datenschutz.php)
   Über die Body-Klasse .page-legal gekapselt, weil diese Seite
   .container sowie die Überschriften global überschrieben hat.
   ============================================================ */
.page-legal { line-height:1.6; color:#334155; background-color:#f8fafc; padding:40px 20px; }
.page-legal .container { max-width:850px; margin:0 auto; background:#ffffff; padding:40px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.05); border:1px solid #e2e8f0; }
.page-legal h1 { color:#1e293b; font-size:28px; border-bottom:3px solid #3498db; padding-bottom:12px; margin-top:0; margin-bottom:30px; }
.page-legal h2 { color:#1e293b; font-size:20px; margin-top:40px; margin-bottom:15px; border-bottom:1px solid #e2e8f0; padding-bottom:5px; }
.page-legal h3 { color:#2c3e50; font-size:16px; margin-top:20px; margin-bottom:10px; }
.page-legal p,
.page-legal ul { margin-bottom:15px; }
.page-legal ul { padding-left:20px; }
.page-legal li { margin-bottom:5px; }
.highlight-box { background-color:#f1f5f9; padding:15px 20px; border-left:4px solid #3498db; border-radius:4px; margin:20px 0; line-height:1.8; }
.legal-hinweis { background:#fcf8e3; border:1px solid #faebcc; color:#8a6d3b; padding:10px 14px; border-radius:4px; font-size:14px; }
.btn-back { display:inline-block; background-color:#3498db; color:#ffffff; text-decoration:none; padding:10px 20px; border-radius:4px; font-weight:bold; font-size:14px; transition:background 0.2s; margin-bottom:30px; }
.btn-back:hover { background-color:#2980b9; }
.nav-links { margin-bottom:25px; font-weight:bold; }
.nav-links a { color:#3498db; text-decoration:none; margin-right:15px; }
.nav-links a:hover { text-decoration:underline; }
@media (max-width: 600px) {
    .page-legal { padding:20px 10px; }
    .page-legal .container { padding:20px; }
}

/* ============================================================
   STUNDENZETTEL (stundenzettel.php)
   ============================================================ */
.timesheet-table { width:100%; border-collapse:collapse; margin-top:15px; font-size:13px; }
.timesheet-table th,
.timesheet-table td { border:1px solid #e2e8f0; padding:10px; text-align:left; }
.timesheet-table th { background:#f8f9fa; font-weight:bold; color:#2c3e50; }
.timesheet-table tr.weekend { background:#fcfcfc; }
.timesheet-table tr.today { background:#f1f9ff; font-weight:500; }
.badge-status { padding:3px 8px; border-radius:20px; font-size:11px; font-weight:bold; text-transform:uppercase; display:inline-block; }
.badge-krank { background:#fde8e8; color:#c0392b; }
.badge-urlaub { background:#e1f5fe; color:#2980b9; }
.badge-fehl { background:#fef5e7; color:#d35400; }
.summary-card { background:#2c3e50; color:white; padding:20px; border-radius:6px; margin-top:25px; display:flex; justify-content:space-between; align-items:center; }
.print-btn-container { display:flex; justify-content:flex-end; margin-top:15px; }
/* Bewusst über den Container gekapselt, damit der kleinere
   .btn-print der QR-Verwaltung unverändert bleibt. */
.print-btn-container .btn-print { padding:8px 18px; font-size:13px; margin-top:0; display:inline-flex; align-items:center; gap:8px; box-shadow:0 2px 4px rgba(0,0,0,0.05); transition:background 0.2s; }
.print-btn-container .btn-print:hover { background:#219653; }
/* Unterschriftenfelder erscheinen ausschließlich auf dem Ausdruck */
.print-signatures { display:none; margin-top:50px; }

/* ------------------------------------------------------------
   Druckansicht des Stundenzettels
   Nur wirksam auf Seiten mit <body class="page-timesheet">,
   damit das Drucken anderer Seiten unberührt bleibt.
   ------------------------------------------------------------ */
@media print {
    /* 1. Unwichtige Elemente für das Papier komplett unsichtbar machen */
    .page-timesheet header,
    .page-timesheet .card:first-of-type,
    .page-timesheet .btn-print,
    .page-timesheet .print-btn-container,
    .page-timesheet .btn-logout { display:none !important; }

    /* 2. Layout für Papier-Seitenränder optimieren */
    body.page-timesheet { background:white !important; color:black !important; margin:0; padding:0; font-size:12px; }
    .page-timesheet .container { width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; box-shadow:none !important; }
    .page-timesheet .card { border:none !important; padding:0 !important; box-shadow:none !important; background:transparent !important; }

    /* 3. Tabelle für Schwarz-Weiß-Druck schärfen */
    .page-timesheet .timesheet-table { width:100% !important; margin-top:10px !important; font-size:11px !important; }
    .page-timesheet .timesheet-table th { background:#eaeded !important; color:black !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
    .page-timesheet .timesheet-table tr.weekend { background:transparent !important; }

    /* 4. Zusammenfassung kompakt fixieren */
    .page-timesheet .summary-card { background:#eaeded !important; color:black !important; border:1px solid #bdc3c7 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; margin-top:15px !important; padding:10px 15px !important; }
    .page-timesheet .summary-card p { color:#555 !important; }
    .page-timesheet .summary-card div:last-child { background:transparent !important; color:black !important; padding:0 !important; }

    /* 4b. A4 Hochformat: kompakt und vollständig.
       mobile.css macht Tabellen unter 992px Breite scrollbar (display:block,
       kein Zeilenumbruch). Auf Papier ist die Seite schmaler als 992px – dadurch
       wurden rechte Spalten abgeschnitten. Hier wird das für den Druck aufgehoben. */
    @page { size: A4 portrait; margin: 10mm 10mm; }
    .page-timesheet .approval-bar,
    .page-timesheet nav,
    .page-timesheet .session-timer { display:none !important; }
    .page-timesheet h2 { font-size:15px !important; margin:0 0 2px 0 !important; }
    .page-timesheet h2 + p { font-size:11px !important; margin:0 0 6px 0 !important; }
    .page-timesheet .timesheet-table { display:table !important; table-layout:fixed; overflow:visible !important; white-space:normal !important;
                                       background:none !important; border-collapse:collapse !important; font-size:9.5px !important; margin-top:4px !important; }
    .page-timesheet .timesheet-table thead { display:table-header-group; }   /* Kopfzeile auf jeder Seite wiederholen */
    .page-timesheet .timesheet-table tr { page-break-inside:avoid; break-inside:avoid; }
    .page-timesheet .timesheet-table th,
    .page-timesheet .timesheet-table td { padding:2px 4px !important; font-size:9px !important; line-height:1.2; white-space:normal !important;
                                          overflow-wrap:anywhere; border:1px solid #999 !important; vertical-align:top; }
    /* Spaltenbreiten (die festen Pixelbreiten der Bildschirmansicht passen nicht aufs Papier) */
    .page-timesheet .timesheet-table th:nth-child(1) { width:13% !important; }
    .page-timesheet .timesheet-table th:nth-child(2) { width:21% !important; }
    .page-timesheet .timesheet-table th:nth-child(3) { width:18% !important; }
    .page-timesheet .timesheet-table th:nth-child(4) { width:12% !important; }
    .page-timesheet .timesheet-table th:nth-child(5),
    .page-timesheet .timesheet-table th:nth-child(6),
    .page-timesheet .timesheet-table th:nth-child(7) { width:12% !important; }
    .page-timesheet .badge-status { font-size:8px !important; padding:1px 4px !important; border:1px solid #999; }
    .page-timesheet .timesheet-table span[style*="font-size:11px"] { font-size:7.5px !important; margin-left:3px; white-space:nowrap; }
    /* Zusatzhinweise (z. B. "gewertet ab") in derselben Zeile statt darunter – spart eine Zeile je Tag */
    .page-timesheet .timesheet-table td br { display:none; }
    .page-timesheet .summary-card { page-break-inside:avoid; break-inside:avoid; margin-top:8px !important; padding:6px 12px !important; }
    .page-timesheet .summary-card h3 { font-size:12px !important; }
    .page-timesheet .summary-card p { font-size:9px !important; }
    .page-timesheet .summary-card div:last-child { font-size:16px !important; }

    /* 5. Unterschriften-Felder exklusiv auf dem Papier einblenden */
    .page-timesheet .print-signatures { display:flex !important; justify-content:space-between; gap:50px; width:100%; }
    .page-timesheet .signature-box { flex:1; border-top:1px solid black; text-align:center; padding-top:4px; font-size:9px; margin-top:28px; }
    .page-timesheet .print-signatures { page-break-inside:avoid; break-inside:avoid; }
}

/* ============================================================
   CHECK-IN/OUT-PROTOKOLL (buchungen.php)
   ============================================================ */
.geo-link { font-size:11px; text-decoration:none; background:#eef2f5; padding:2px 6px; border-radius:4px; color:#2c3e50; display:inline-block; margin-top:3px; border:1px solid #dcdde1; }
.geo-link:hover { background:#dcdde1; }
.badge-manual { background:#e67e22; color:white; padding:2px 5px; border-radius:3px; font-size:10px; font-weight:bold; }

/* Einplanungen: Platz an anderes Subunternehmen abgeben */
.req-abgeben { flex-basis: 100%; margin-top: 8px; border-top: 1px dashed #dcdde1; padding-top: 8px; }
.req-abgeben summary { cursor: pointer; font-size: 13px; font-weight: bold; color: #2c3e50; }
.req-abgeben-felder { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; }
.req-abgeben-felder select { flex: 1 1 200px; min-width: 0; }

/* Einplanungen: Kopfzeile mit Aktualisieren-Button */
.req-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 15px; }
.req-titel { margin: 0; font-size: 22px; color: #2c3e50; }
.req-kopf-rechts { display: flex; align-items: center; gap: 12px; }
.req-aktualisieren { text-decoration: none; display: inline-flex; align-items: center; }

/* ------------------------------------------------------------
   HEUTIGE SCHICHT(EN) unter dem Namen
   ------------------------------------------------------------ */
.scan-today {
    text-align: left;
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    padding: 10px 12px;
    margin: -8px 0 18px 0;
    font-size: 13px;
    color: var(--text);
}

.scan-today--leer {
    border-left-color: #bdc3c7;
    color: var(--text-muted);
}

.scan-today-title {
    display: block;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.scan-today-item {
    display: block;
    padding: 3px 0;
}

.scan-today-item + .scan-today-item {
    border-top: 1px dashed var(--border-light);
}

.scan-today-zeit {
    font-weight: bold;
    color: var(--text-dark);
}

.scan-today-hinweis {
    display: block;
    font-size: 12px;
    color: #c0392b;
}

.scan-today-hinweis--ok {
    color: #27ae60;
}

/* Objektverwaltung: QR-Code in der Liste kompakt anzeigen.
   Erzeugt wird er in 300 px, damit der Ausdruck scharf bleibt.
   max-width: mobile.css begrenzt Bilder auf die Spaltenbreite – das hat nur die
   Breite gestaucht (die Höhe blieb 90 px) und den Code verzerrt. Deshalb hier
   aufgehoben und das Seitenverhältnis fest 1:1. */
.qr-code-canvas { width:90px; flex-shrink:0; }
.qr-code-canvas canvas,
.qr-code-canvas img { width:90px !important; height:90px !important; max-width:none !important; aspect-ratio:1 / 1; display:block; }
.qr-canvas-container { padding:6px; }

/* ============================================================
   SCHICHTEN ANLEGEN: Auswahl der Wochentage (schicht_bearbeiten.php)
   ============================================================ */
.wt-auswahl { display: flex; flex-wrap: wrap; gap: 4px; }
.wt-tag { position: relative; cursor: pointer; margin: 0; }
.wt-tag input { position: absolute; opacity: 0; width: 0; height: 0; }
.wt-tag span {
    display: inline-block; min-width: 32px; padding: 6px 0; text-align: center;
    font-size: 12px; font-weight: bold; border-radius: 4px;
    border: 1px solid #dcdde1; background: #fff; color: #95a5a6; user-select: none;
}
.wt-tag input:checked + span { background: #3498db; border-color: #3498db; color: #fff; }
.wt-we input:checked + span { background: #2980b9; border-color: #2980b9; }
.wt-tag input:focus-visible + span { outline: 2px solid #2c3e50; outline-offset: 1px; }
/* Einplanungen (Subunternehmen): aufklappbarer Vorschlag unter den drei Buttons */
.req-vorschlag { display:flex; gap:6px; align-items:center; flex-wrap:wrap; width:100%; margin-top:8px; padding:10px; background:#f7f1fb; border:1px solid #e3d3ee; border-radius:6px; }
.req-vorschlag[hidden] { display:none; }
.req-vorschlag .req-klein { flex-basis:100%; }
.req-vorschlag select { min-width:220px; width:auto; flex:0 1 380px; margin:0; }
/* Schichtbesetzung: Vorschlag des Subunternehmens passt in jede Kartenbreite */
.slot-approval .slot-vorschlag-titel { display:block; color:#8e44ad; font-weight:bold; }
.slot-approval .slot-vorschlag-name  { display:block; margin-top:2px; font-weight:bold; color:#2c3e50; overflow-wrap:anywhere; }
.slot-approval .slot-vorschlag-statt { display:block; color:#7f8c8d; font-size:12px; overflow-wrap:anywhere; }
.slot-vorschlag-aktionen { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.slot-vorschlag-aktionen .req-btn { flex:1 1 110px; min-width:0; white-space:normal; text-align:center; }
.slot-approval .slot-vorschlag-link { display:inline-block; margin-top:6px; }

/* ============================================================
   SCHICHTKALENDER: mehrere Schichten löschen
   ============================================================ */
.bulk-bar { display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap; margin-top:20px; padding:10px 14px; background:#fff; border:1px solid #e2e8f0; border-radius:6px; }
.bulk-alle { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:bold; color:#2c3e50; margin:0; cursor:pointer; }
.bulk-alle input { width:auto; margin:0; }
.bulk-info { font-size:13px; color:#7f8c8d; }
.bulk-knoepfe { display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.bulk-btn { border:none; border-radius:4px; padding:8px 14px; font-size:13px; font-weight:bold; color:#fff; cursor:pointer; white-space:nowrap; width:auto; margin:0; }
.bulk-btn--rot { background:#e74c3c; }
.bulk-btn--rot:disabled { background:#e6b0aa; cursor:not-allowed; }
.bulk-btn--grau { background:#7f8c8d; }
.shift-badge .bulk-cb { width:18px; height:18px; margin:0; flex-shrink:0; cursor:pointer; accent-color:#e74c3c; }
.shift-badge .bulk-cb-platz { width:18px; text-align:center; font-size:12px; opacity:.6; flex-shrink:0; }
@media (max-width:768px) { .bulk-knoepfe { margin-left:0; width:100%; } .bulk-btn { flex:1; } }
/* Leiste am Ende der Monatsliste */
.bulk-bar--unten { margin-top:16px; }
.shift-badge .bulk-cb { margin-left:6px; }

/* ============================================================
   OBJEKT-SCHICHTKALENDER: Tabelle mit Suche (schichtkalender.php)
   ============================================================ */
.osl-card { padding:0; overflow:hidden; }
.osl-kopf { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 16px; border-bottom:1px solid #e2e8f0; }
.osl-suche { display:flex; align-items:center; gap:8px; flex:1 1 260px; max-width:420px; background:#f8fafc; border:1px solid #dcdde1; border-radius:6px; padding:0 10px; }
.osl-suche:focus-within { border-color:var(--primary); background:#fff; }
.osl-suche input { border:none !important; background:transparent !important; box-shadow:none !important; outline:none; margin:0 !important; padding:9px 0 !important; width:100%; font-size:14px; }
.osl-zaehler { font-size:13px; color:#7f8c8d; white-space:nowrap; }
.osl-tabelle-rahmen { overflow-x:auto; }
.osl-tabelle { width:100%; border-collapse:collapse; margin:0; font-size:14px; }
.osl-tabelle th { position:relative; text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#7f8c8d; background:#f8fafc; padding:10px 14px; border-bottom:1px solid #e2e8f0; white-space:nowrap; cursor:pointer; user-select:none; }
.osl-tabelle th:hover { color:#2c3e50; }
.osl-tabelle th[data-sort]::after { content:'↕'; margin-left:4px; opacity:.35; }
.osl-tabelle th[aria-sort="ascending"]::after { content:'▲'; opacity:.8; }
.osl-tabelle th[aria-sort="descending"]::after { content:'▼'; opacity:.8; }
.osl-tabelle th.osl-aktion { cursor:default; }
.osl-tabelle td { padding:10px 14px; border-bottom:1px solid #eef0f2; vertical-align:middle; white-space:nowrap; }
.osl-tabelle tbody tr { cursor:pointer; transition:background .12s; }
.osl-tabelle tbody tr:hover { background:#f4f9fd; }
.osl-tabelle tbody tr:last-child td { border-bottom:none; }
.osl-num { text-align:center !important; width:1%; }
.osl-name { font-weight:bold; color:#2c3e50; white-space:normal; }
.osl-leer { color:#bdc3c7; }
.osl-hinweis { color:#d35400; font-weight:bold; }
.osl-warn { color:#c0392b; font-weight:bold; }
.osl-badge { display:inline-block; min-width:22px; padding:2px 7px; border-radius:10px; font-size:12px; font-weight:bold; }
.osl-badge--offen { background:#fdf2e9; color:#d35400; border:1px solid #f5cba7; }
.osl-badge--ok { background:#eafaf1; color:#27ae60; border:1px solid #abebc6; }
.osl-aktion { text-align:right !important; width:1%; }
.osl-btn { display:inline-block; background:var(--primary); color:#fff !important; text-decoration:none; padding:6px 12px; border-radius:4px; font-size:13px; font-weight:bold; white-space:nowrap; }
.osl-btn:hover { background:#2471a3; }
.osl-keine { padding:20px; margin:0; text-align:center; color:#7f8c8d; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* mobile.css macht Tabellen auf dem Handy zu Scroll-Blöcken – hier bleibt die Tabelle eine Tabelle mit horizontalem Scrollen */
@media (max-width:768px) {
    .osl-tabelle { display:table !important; }
    .osl-tabelle thead { display:table-header-group !important; }
    .osl-tabelle tbody { display:table-row-group !important; }
    .osl-tabelle tr { display:table-row !important; }
    .osl-tabelle th, .osl-tabelle td { display:table-cell !important; padding:8px 10px; }
}
@media (max-width:768px) {
    .osl-card { padding:0 !important; }
    .osl-tabelle th.osl-opt, .osl-tabelle td.osl-opt { display:none !important; }          /* Heute, 14 Tage, Nächste Schicht nur am großen Bildschirm */
    .osl-tabelle td:first-child { white-space:normal; min-width:140px; }
    .osl-suche { max-width:none; }
}

/* ============================================================
   LISTEN MIT SUCHE UND SORTIERUNG (table_tools.js)
   Mitarbeiter, Sub-Mitarbeiter, Subunternehmen – gleiche Optik wie die Objektübersicht
   ============================================================ */
.tl-kopf { padding:12px 0; border-bottom:none; }
.tl-rahmen { border:1px solid #e2e8f0; border-radius:6px; }
.tl-tabelle tbody tr { cursor:default; }
.tl-tabelle td { white-space:nowrap; }   /* Login, E-Mail, Telefon nicht mitten im Wort umbrechen; bei Platzmangel scrollt die Tabelle */
.tl-tabelle th:not([data-sort]) { cursor:default; }
.tl-tabelle th, .tl-tabelle td { padding:9px 10px; }
.tl-tabelle td { font-size:13px; }
.tl-tabelle td code { font-size:12px; }

/* ============================================================
   EINSTELLUNGEN (einstellungen.php)
   ============================================================ */
.set-gruppe { border:1px solid #e2e8f0; border-radius:6px; padding:12px 16px 4px; margin:0 0 16px; }
.set-gruppe legend { font-weight:bold; color:#2c3e50; padding:0 6px; font-size:15px; }
.set-zeile { display:grid; grid-template-columns:minmax(220px, 340px) 1fr; gap:4px 16px; align-items:center; padding:8px 0; border-bottom:1px dashed #eef0f2; }
.set-zeile:last-child { border-bottom:none; }
.set-zeile input[type=email], .set-zeile input[type=url], .set-zeile input[type=text] { margin:0; max-width:420px; }
.set-zeile input.set-zahl { margin:0; width:110px; }
.set-zeile textarea.set-text { margin:0; max-width:420px; width:100%; box-sizing:border-box; font:inherit; font-size:14px; padding:8px 10px; border:1px solid #ccd1d6; border-radius:4px; resize:vertical; }
.set-label { font-size:14px; font-weight:bold; color:#2c3e50; margin:0; }
.set-check { grid-column:1 / -1; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:bold; color:#2c3e50; margin:0; cursor:pointer; }
.set-check input { width:18px; height:18px; margin:0; }
.set-hilfe { grid-column:2; color:#7f8c8d; font-size:12px; }
.set-check + .set-hilfe { grid-column:1 / -1; padding-left:28px; }
.set-fehler .set-label, .set-fehler .set-check { color:#c0392b; }
.set-fehler input { border-color:#e74c3c !important; }
@media (max-width:768px) { .set-zeile { grid-template-columns:1fr; } .set-hilfe { grid-column:1; } }

/* ---- Schicht besetzen (schicht_besetzen.php): Plätze als Tabelle ---- */
.osa-card { margin-top:15px; }
.osa-tabelle tbody tr { cursor:default; }
.osa-tabelle tbody tr:hover { background:#f8fbfe; }
.osa-tabelle td { vertical-align:middle; }
.osa-tabelle td.osa-ma select { min-width:260px; margin:0; }
.osa-tabelle td.osa-status select { min-width:210px; margin:0; font-weight:500; }
.osa-tabelle td.osa-bestaetigung { white-space:normal; min-width:270px; max-width:340px; }
.osa-tabelle td.osa-bestaetigung .slot-approval { margin:0; }
.osa-tabelle .live-worker-text { font-size:14px; padding:0; }
.osa-tabelle tr.status-live td { background:#f4fbf7; }
.osa-tabelle tr.status-live td:first-child { box-shadow:inset 4px 0 0 #2ecc71; }
.osa-tabelle tr.status-beendet td { background:#fbeeee; }
.osa-tabelle tr.status-beendet td:first-child { box-shadow:inset 4px 0 0 #e74c3c; }
.osa-badge { display:inline-block; padding:3px 9px; border-radius:10px; font-size:12px; font-weight:bold; background:#f1f5f9; color:#2c3e50; border:1px solid #dcdde1; white-space:nowrap; }
.osa-badge--live { background:#eafaf1; color:#1e8449; border-color:#abebc6; }
.osa-badge--ende { background:#fdecea; color:#c0392b; border-color:#f5b7b1; }
@media (max-width:768px) {
    .osa-tabelle td.osa-ma select { min-width:200px; }
    .osa-tabelle td.osa-status select { min-width:170px; }
}
@media (max-width:768px) {
    .osa-tabelle td:first-child { min-width:0 !important; white-space:nowrap !important; }
}