/* ================================================================
   AEX.OS – Haupt-Stylesheet
   ================================================================ */

:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-dark-gray: #3a3a3a;
    --color-mint: #30C27D;
    --color-light-gray: #f5f5f5;
    --color-border: #e8e8e8;
    --color-mint-light: #e8f8f7;
    --color-primary: var(--color-dark-gray);
    --color-primary-accent: var(--color-mint);
    --color-text: var(--color-black);
    --color-text-secondary: var(--color-dark-gray);
    --color-background: var(--color-white);
    --color-surface: var(--color-light-gray);
    --color-icon: var(--color-mint);
    --color-shadow: rgba(0,0,0,0.1);
    /* Status-Farben */
    --color-success-bg: #d4edda;
    --color-success-text: #155724;
    --color-success-dark: #1a5c2a;
    --color-danger: #dc3545;
    --color-danger-bg: #f8d7da;
    --color-danger-text: #721c24;
    --color-warning-bg: #fff3cd;
    --color-warning-text: #856404;
    --color-info-bg: #cce5ff;
}

/* Karten, Tiles, Cards */
/* Admin-Dashboard Karten */
/* Modale */
/* Formulare */
/* Buttons */
/* Upload-Bereich */
/* Settings */
/* Toast */
/* Status-Badges */
/* Header-Dropdown (Mobile) */
/* Login */
/* Sonstige Textfarben */

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

/* Skip-Link für Tastaturnavigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 8px 16px;
    z-index: 9999;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
}
html {
  scroll-behavior:smooth;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:var(--color-surface);
  color:var(--color-text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -webkit-touch-callout:none;
  touch-action:manipulation;
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.icon { display:inline-block; width:24px; height:24px; vertical-align:-0.25em; fill:none; stroke:var(--color-icon); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; color:var(--color-icon); }
.icon-sm { width:16px; height:16px; stroke-width:1.5; }
.icon-md { width:36px; height:36px; stroke-width:1.5; }
.icon-lg { width:48px; height:48px; stroke-width:1.5; }
.icon-xl { width:64px; height:64px; stroke-width:1.3; }

/* Custom Checkbox Styling */
.custom-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid var(--color-mint);
  border-radius: 4px;
  cursor: pointer;
  background: var(--color-white);
  transition: all 0.2s;
  flex-shrink: 0;
}
/* Vergrößerter Touch-Bereich über Label */
label:has(.custom-checkbox) {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.custom-checkbox:hover {
  background: rgba(48, 194, 125, 0.1);
  border-color: var(--color-primary-accent);
}
.custom-checkbox:checked {
  background: var(--color-mint);
  border-color: var(--color-mint);
}
.custom-checkbox:checked::after {
  content: '✓';
  display: block;
  color: var(--color-primary);
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  font-weight: bold;
}

/* Toggle-Switch */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.toggle-switch input,
.form-group .toggle-switch input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
}
.toggle-slider {
  position: relative;
  width: 52px;
  height: 28px;
  background: #b0b0b0;
  border-radius: 14px;
  transition: background 0.25s;
  flex-shrink: 0;
}
.toggle-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: var(--color-white);
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--color-mint);
}
.toggle-switch input:checked + .toggle-slider::after {
  transform: translateX(24px);
}
.toggle-label {
  font-size: 0.95rem;
  font-weight: 500;
}

.header {
  background:var(--color-primary);
  color:white;
  padding:12px 24px;
  padding-top:calc(12px + env(safe-area-inset-top));
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
  position:sticky;
  top:0;
  z-index:100;
}
.header-left { display:flex; align-items:center; gap:14px; max-height:60px; }
.header-logo { width:45px; height:45px; border-radius:10px; object-fit:contain; background:linear-gradient(135deg, var(--color-mint) 0%, rgba(48,194,125,0.8) 100%); padding:6px; box-shadow:0 4px 12px rgba(48,194,125,0.3); }
.header-logo-placeholder { width:45px; height:45px; border-radius:10px; background:linear-gradient(135deg, var(--color-mint) 0%, rgba(48,194,125,0.8) 100%); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(48,194,125,0.3); }
.header-logo-placeholder svg { width:28px; height:28px; }
.header h1 { font-size:1.3rem; font-weight:600; display:none; }
#headerLogoArea { height:60px; display:flex; align-items:center; }
#headerLogoArea .header-logo { width:auto; height:60px; border-radius:6px; padding:4px 8px; background:transparent; box-shadow:none; object-fit:contain; }
#headerLogoArea .header-logo-placeholder { width:auto; height:60px; background:transparent; box-shadow:none; border-radius:6px; padding:0; }
#headerLogoArea img { height:60px; width:auto; border-radius:6px; }
.header-right { display:flex; align-items:center; gap:14px; }
.header-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,0.4); }
.header-avatar-placeholder { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,0.3); }
.header-avatar-placeholder .icon { width:18px; height:18px; stroke:rgba(255,255,255,0.7); }
.header-user { font-size:0.9rem; opacity:0.9; }
.btn-icon { background:rgba(255,255,255,0.15); border:none; border-radius:8px; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.2s; }
.btn-icon:hover { background:rgba(255,255,255,0.25); }
.btn-icon .icon { width:20px; height:20px; stroke:white; }

/* Header-Dropdown: auf Desktop ausblenden */
.header-dropdown { display:none; }
.header-avatar-wrap { cursor:default; }

.btn {
  padding:8px 18px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-size:0.9rem;
  font-family:inherit;
  transition:background 0.2s,transform 0.15s;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.btn:active { transform:scale(0.97); }
.btn-primary { background:var(--color-primary); color:white; border:2px solid transparent; transition:all 0.3s; }
.btn-primary:hover { background:var(--color-mint); color:var(--color-primary); border-color:var(--color-primary); }
.btn-secondary { background:var(--color-surface); color:var(--color-text-secondary); border:1px solid var(--color-mint); }
.btn-secondary:hover { background:var(--color-mint-light); border-color:var(--color-primary); }
.btn-danger { background:var(--color-black); color:white; border:1px solid transparent; }
.btn-danger:hover { background:#1a1a1a; }
.btn-logout { background:rgba(255,255,255,0.15); color:white; border:1px solid rgba(255,255,255,0.3); }
.btn-logout:hover { background:rgba(255,255,255,0.25); }
.btn-sm { padding:5px 12px; font-size:0.82rem; }
/* Add-Button: Icon-only, Akzentfarbe als Hintergrund, schwarzes Plus-Symbol */
.btn-add { background:var(--color-primary-accent); color:var(--color-black); border-color:transparent; padding:8px; }
.btn-add:hover { background:var(--color-primary-accent); color:var(--color-black); border-color:transparent; opacity:0.85; }
.btn-add .icon { stroke:var(--color-black); color:var(--color-black); width:20px; height:20px; }
/* Info-Button: gleiche Größe wie Zurück-Button */
.btn-info-icon { background:var(--color-mint); color:#000; border:none; padding:10px 12px; box-shadow:0 4px 12px rgba(48,194,125,0.45); }
.btn-info-icon:hover { background:var(--color-mint); opacity:0.85; }
.btn-info-icon .icon { stroke:#000; color:#000; width:20px; height:20px; }
/* Dropdown-Menü für Add-Button */
.add-dropdown { position:absolute; top:calc(100% + 6px); right:0; background:var(--color-white); border:1px solid var(--color-border); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,0.12); z-index:200; min-width:170px; overflow:hidden; }
.add-dropdown-item { display:flex; align-items:center; gap:8px; width:100%; padding:10px 14px; border:none; background:none; text-align:left; cursor:pointer; font-size:0.9rem; color:var(--color-text); font-family:inherit; }
.add-dropdown-item:hover { background:var(--color-surface); }
.add-dropdown-item .icon { flex-shrink:0; width:16px; height:16px; stroke:var(--color-text-secondary); color:var(--color-text-secondary); }

/* Trash Button - Red Delete Icon (independent of theme) */
.btn-trash {
  background: var(--color-surface);
  border: 1px solid #dc3545;
  color: #dc3545;
  cursor: pointer;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s, border 0.2s;
  min-height: 44px;
  min-width: 44px;
}
.btn-trash:hover {
  background: rgba(220, 53, 69, 0.15);
  border-color: #bb2d3b;
  color: #bb2d3b;
}
.btn-trash:active {
  transform: scale(0.97);
}
.btn-trash .icon {
  width: 20px;
  height: 20px;
  stroke: #dc3545 !important;
  color: #dc3545 !important;
}

/* Archive Button - Archive Icon (uses accent color) */
.btn-archive {
  background: var(--color-surface);
  border: 1px solid var(--color-primary-accent);
  color: var(--color-primary-accent);
  cursor: pointer;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s, border 0.2s;
  min-height: 44px;
  min-width: 44px;
}
.btn-archive:hover {
  background: rgba(48, 194, 125, 0.15);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-archive:active {
  transform: scale(0.97);
}
.btn-archive .icon {
  width: 20px;
  height: 20px;
  stroke: var(--color-primary-accent) !important;
  color: var(--color-primary-accent) !important;
}

.login-container { display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:100vh; padding:20px; background:var(--color-background); }
.login-card { background:var(--color-white); border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,0.1); padding:40px 36px 32px; width:100%; max-width:400px; }
.login-card h2 { text-align:center; color:var(--color-primary); margin-bottom:4px; font-size:1.6rem; font-weight:700; }
.login-claim { text-align:center; color:var(--color-text-secondary); margin-bottom:28px; font-size:0.88rem; letter-spacing:0.02em; }
.login-icon { text-align:center; margin-bottom:20px; }
.login-icon .icon { width:56px; height:56px; stroke-width:1.3; color:var(--color-mint); }
.login-logo { display:block; max-width:160px; max-height:110px; margin:0 auto 24px; object-fit:contain; }
/* Fehlermeldung */
.login-error {
  text-align:center; font-size:0.85rem; min-height:0; max-height:0;
  overflow:hidden; opacity:0; transition:all 0.25s ease;
  color:#d32f2f; background:#fdecea; border-radius:8px; padding:0 12px;
  margin-bottom:0;
}
.login-error.visible {
  min-height:20px; max-height:60px; opacity:1;
  padding:10px 12px; margin-bottom:14px;
}
/* Passwort-Feld Wrapper */
.login-password-wrap {
  position:relative; display:flex; align-items:center;
}
.login-password-wrap input {
  padding-right:44px !important;
}
.login-pw-toggle {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:6px;
  color:var(--color-text-secondary); display:flex; align-items:center;
  justify-content:center; border-radius:50%; transition:background 0.15s;
}
.login-pw-toggle:hover { background:var(--color-light-gray); }
.login-pw-toggle .icon { width:18px; height:18px; }
.login-pw-eye, .login-pw-eye-off { pointer-events:none; }
/* Browser-eigenes Passwort-Auge (Edge/Chrome) ausblenden */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear { display:none; }
input[type="password"]::-webkit-credentials-auto-fill-button { display:none !important; }
/* Remember-Me & Optionen */
.login-options {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:20px; margin-top:-4px;
}
.login-remember {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:0.85rem; color:var(--color-text-secondary);
  user-select:none;
}
.login-remember input[type="checkbox"] {
  width:16px; height:16px; margin:0; cursor:pointer;
  accent-color:var(--color-mint);
}
/* Submit-Button */
.login-submit {
  width:100%; padding:13px 16px !important; font-size:1rem !important;
  font-weight:600; border-radius:10px !important; min-height:48px;
}
/* Passwort vergessen Link */
.login-forgot {
  font-size:0.82rem; color:var(--color-text-secondary);
  text-decoration:none; transition:color 0.15s;
}
.login-forgot:hover { color:var(--color-primary-accent); text-decoration:underline; }
/* Passwort vergessen Overlay */
.forgot-pw-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.4); display:flex;
  justify-content:center; align-items:center; padding:20px;
}
.forgot-pw-card {
  background:var(--color-white); border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,0.15); padding:28px 24px;
  width:100%; max-width:380px;
}
.forgot-pw-card h3 { margin-bottom:8px; font-size:1.1rem; color:var(--color-primary); }
.forgot-pw-desc { font-size:0.85rem; color:var(--color-text-secondary); margin-bottom:16px; line-height:1.4; }
.forgot-pw-message {
  font-size:0.83rem; padding:0; margin-bottom:0;
  border-radius:8px; line-height:1.4; transition:all 0.2s;
}
.forgot-pw-message.forgot-pw-error {
  background:#fdecea; color:#d32f2f; padding:10px 12px; margin-bottom:12px;
}
.forgot-pw-message.forgot-pw-success {
  background:#e8f8f7; color:#2e7d6f; padding:10px 12px; margin-bottom:12px;
}
/* Login-Copyright */
.login-copyright {
  text-align:center; font-size:0.72rem; color:var(--color-text-secondary);
  margin-top:24px; opacity:0.5; line-height:1.5;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
/* Systemstatus */
.login-status {
  text-align:center; font-size:0.78rem; color:var(--color-text-secondary);
  margin-top:20px; margin-bottom:0; opacity:0.7;
}
/* User Expiry Badge */
.user-expiry-badge {
  display:inline-block; font-size:0.72rem; padding:2px 8px;
  border-radius:10px; margin-left:6px; font-weight:500;
  background:#e8f8f7; color:#2e7d6f;
}
.user-expiry-badge.expired {
  background:#fdecea; color:#d32f2f;
}

/* Copyright-Footer */
.app-copyright {
  text-align: center;
  padding: 28px 16px 12px;
  margin-top: 32px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  opacity: 0.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.footer-logo {
  height: 22px;
  width: auto;
  object-fit: contain;
}

.form-group { margin-bottom:16px; }
.form-group label { display:block; margin-bottom:5px; font-weight:500; font-size:0.9rem; color:var(--color-text-secondary); }
.form-group input,.form-group select,.form-group textarea {
  width:100%;
  padding:12px 14px;
  border:1px solid var(--color-border);
  border-radius:8px;
  font-size:1rem;
  font-family:inherit;
  transition:border-color 0.2s;
  min-height:44px;
}
.form-group textarea { resize:vertical; min-height:80px; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { outline:none; border-color:var(--color-mint); }

.page { display:none; }
.page.active { display:block; }
.page-content {
  max-width:1200px;
  margin:0 auto;
  padding:24px;
  padding-bottom:max(24px, env(safe-area-inset-bottom));
}

.welcome { margin-bottom:28px; text-align:center; }
.welcome h2 { color:var(--color-primary); font-size:1.4rem; margin-bottom:4px; }
.welcome p { color:var(--color-text-secondary); font-size:0.95rem; }

.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.tile { background:var(--color-white); border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.1); padding:28px 24px; cursor:pointer; transition:transform 0.2s,box-shadow 0.2s; }
.tile:hover { transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,0.15), 0 0 20px rgba(48,194,125,0.3); }
.tile-icon { margin-bottom:14px; }
.tile h3 { color:var(--color-primary); margin-bottom:6px; font-size:1.15rem; }
.tile p { color:var(--color-text-secondary); font-size:0.85rem; line-height:1.4; }
/* Info-Badges unter Dashboard-Tiles (gleicher Style wie Projekt-Karten) */
.tile-info-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* ═══ Globale Suche (Startseite) ═══ */
.global-search-wrap {
  margin-bottom: 20px;
}
.global-search-bar {
  position: relative;
  display: flex;
  align-items: center;
}
.global-search-icon {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
  pointer-events: none;
}
.global-search-input {
  width: 100% !important;
  padding-left: 38px !important;
  padding-right: 36px !important;
  box-sizing: border-box;
}
/* Marquee-Lauftext – nur auf Mobil sichtbar */
.global-search-marquee {
  display: none;
}
.global-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.global-search-clear:hover {
  background: var(--color-light-gray);
}
/* Suchergebnisse */
.global-search-results {
  margin-top: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
}
.search-group {
  padding: 0;
}
.search-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--color-surface);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border);
}
.search-group-header .icon {
  width: 14px;
  height: 14px;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--color-border);
}
.search-result-item:last-child {
  border-bottom: none;
}
.search-result-item:hover {
  background: var(--color-mint-light);
}
.search-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-mint-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.search-result-icon .icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}
.search-result-text {
  flex: 1;
  min-width: 0;
}
.search-result-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-sub {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-result-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--color-mint-light);
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.search-no-results {
  padding: 24px 16px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

/* Packliste: Material-Thumbnail */
.packliste-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}

/* PC: Flex – Titel links, Aktionsbuttons rechts (original) */
.page-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:24px; }
.page-header h2 { color:var(--color-primary); font-size:1.3rem; display:flex; align-items:center; gap:8px; }
.page-header h2 .icon { width:24px; height:24px; color:var(--color-mint); }
.page-header-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.page-header-center { display:flex; flex-direction:column; flex:1; text-align:center; align-items:center; }

.search-input { padding:8px 14px; border:1px solid var(--color-border); border-radius:8px; font-size:0.9rem; font-family:inherit; width:240px; }
.search-input:focus { outline:none; border-color:var(--color-mint); }

.project-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.project-card { background:var(--color-white); border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.1); padding:22px; cursor:pointer; transition:box-shadow 0.2s,transform 0.2s; }
.project-card:hover { box-shadow:0 6px 14px rgba(0,0,0,0.13); transform:translateY(-2px); }
.project-card h3 { color:var(--color-primary); margin-bottom:10px; font-size:1.1rem; }
.project-detail { display:inline-flex; align-items:center; gap:6px; margin-bottom:6px; font-size:0.88rem; color:var(--color-text-secondary); }
.project-detail .icon { width:16px; height:16px; stroke:var(--color-primary-accent); color:var(--color-primary-accent); flex-shrink:0; }
.status-badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:0.78rem; font-weight:600; margin-top:8px; }
.status-offen { background:var(--color-light-gray); color:var(--color-text-secondary); border:1px solid var(--color-border); }
.status-laufend { background:var(--color-mint-light); color:var(--color-primary); }
.status-abgeschlossen { background:#e2e3e5; color:#383d41; }
.status-pausiert { background:var(--color-light-gray); color:var(--color-text-secondary); }
.status-intern { background:var(--color-surface); color:var(--color-text-secondary); border:1px solid var(--color-border); }
.status-aktiv { background:#d4edda; color:#155724; }
.project-actions { margin-top:14px; display:flex; gap:8px; justify-content:space-between; }
.project-actions .btn { padding:6px 14px; font-size:0.82rem; }
.btn-edit-icon { padding:8px 12px !important; min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; }
.btn-edit-icon .icon { stroke:#000; color:#000; width:20px; height:20px; }

.empty-state {
  text-align:center;
  padding:48px 24px;
  color:var(--color-text-secondary);
  background:var(--color-surface);
  border-radius:12px;
  border:1px dashed var(--color-border);
  width:100%;
  box-sizing:border-box;
}
.empty-state .icon { margin-bottom:16px; display:block; margin-left:auto; margin-right:auto; }
.empty-state p { font-size:1rem; margin-bottom:8px; font-weight:500; color:var(--color-text-secondary); }
.empty-state small { font-size:0.85rem; opacity:0.6; display:block; max-width:280px; margin:0 auto; line-height:1.4; }

/* ═══ ADMIN-DASHBOARD ═══ */
.admin-stats-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.admin-stat-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid var(--color-border);
}
.admin-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}
.admin-stat-label {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin-top: 4px;
}
.admin-user-list {
  display: grid;
  gap: 12px;
}
.admin-user-card {
  background: var(--color-white);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid var(--color-border);
}
.admin-user-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.admin-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.admin-user-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-light-gray);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.admin-user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-user-info strong {
  font-size: 1rem;
  color: var(--color-primary);
}
.admin-user-role {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}
.admin-user-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}
.admin-status-active {
  background: #d4edda;
  color: #155724;
}
.admin-status-inactive {
  background: var(--color-light-gray);
  color: var(--color-text-secondary);
}
.admin-user-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.admin-user-stat {
  text-align: center;
  padding: 8px 4px;
  background: var(--color-surface);
  border-radius: 8px;
}
.admin-user-stat-label {
  display: block;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}
.admin-user-stat-value {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
}
/* Aktivitätszeitraum + Produktivität */
.admin-user-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.admin-extra-block {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 4px;
}
.admin-extra-label {
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.admin-extra-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-primary);
}
.admin-extra-hint {
  font-size: 0.7rem;
  color: var(--color-text-secondary);
}
/* Rang-Badges */
.admin-rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.admin-rank-gold {
  background: linear-gradient(135deg, #ffd700, #ffb300);
  color: #5a4000;
  box-shadow: 0 2px 6px rgba(255, 179, 0, 0.4);
}
.admin-rank-silver {
  background: linear-gradient(135deg, #e0e0e0, #bdbdbd);
  color: #424242;
  box-shadow: 0 2px 6px rgba(189, 189, 189, 0.4);
}
.admin-rank-bronze {
  background: linear-gradient(135deg, #e8a56d, #cd7f32);
  color: #4a2800;
  box-shadow: 0 2px 6px rgba(205, 127, 50, 0.3);
}
.admin-rank-default {
  background: var(--color-light-gray);
  color: var(--color-text-secondary);
}
.admin-rank-none {
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}
/* Platz 1: Goldener Rahmen auf der Karte */
.admin-card-gold {
  border: 2px solid #ffd700;
  box-shadow: 0 2px 12px rgba(255, 215, 0, 0.2);
}
/* Produktivitätsscore */
.admin-productivity-block {
  align-items: center;
  justify-content: center;
  min-width: 110px;
  padding: 8px 12px;
  background: var(--color-surface);
  border-radius: 10px;
  text-align: center;
}
.admin-productivity-score {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
}
/* Produktivitäts-Bewertungs-Badge */
.admin-productivity-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
/* Farbskala nach Produktivitätsklasse */
.admin-prod-excellent { border-left: 4px solid #28a745; }
.admin-prod-excellent .admin-productivity-score { color: #28a745; }
.admin-prod-excellent .admin-productivity-badge { background: #d4edda; color: #155724; }
.admin-prod-good { border-left: 4px solid #17a2b8; }
.admin-prod-good .admin-productivity-score { color: #17a2b8; }
.admin-prod-good .admin-productivity-badge { background: #d1ecf1; color: #0c5460; }
.admin-prod-average { border-left: 4px solid #ffc107; }
.admin-prod-average .admin-productivity-score { color: #d39e00; }
.admin-prod-average .admin-productivity-badge { background: #fff3cd; color: #856404; }
.admin-prod-low { border-left: 4px solid #dc3545; }
.admin-prod-low .admin-productivity-score { color: #dc3545; }
.admin-prod-low .admin-productivity-badge { background: #f8d7da; color: #721c24; }
.admin-prod-none .admin-productivity-score { color: var(--color-text-secondary); }

/* ── Kranktage-Block im Admin-Dashboard ── */
.admin-sickdays-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}
.admin-sickdays-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: 2px;
}
.admin-sick-none .admin-sickdays-value { color: var(--color-text-secondary); }
.admin-sick-none .admin-sickdays-badge { background: var(--color-surface); color: var(--color-text-secondary); }
.admin-sick-ok .admin-sickdays-value { color: #28a745; }
.admin-sick-ok .admin-sickdays-badge { background: #d4edda; color: #155724; }
.admin-sick-high .admin-sickdays-value { color: #dc3545; }
.admin-sick-high .admin-sickdays-badge { background: #f8d7da; color: #721c24; }

/* Mini-Balkendiagramm (24h) */
.admin-activity-chart {
  margin-top: 6px;
}
.admin-activity-bars {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 32px;
}
.admin-bar {
  flex: 1;
  min-width: 0;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s;
}
.admin-activity-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

/* ── Urlaubsanträge ── */
.vacation-list { display:flex; flex-direction:column; gap:10px; }
.vacation-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px var(--color-shadow);
}
.vacation-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.vacation-date-range { font-weight: 600; font-size: 0.95rem; }
.vacation-card-details {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}
.vacation-days { font-weight: 500; }
.vacation-comment { font-style: italic; }
.vacation-admin-comment {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--color-light-gray);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}
.vacation-card-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
/* Status-Badges */
.vacation-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.vacation-badge-pending  { background: #fff3cd; color: #856404; }
.vacation-badge-approved { background: #d4edda; color: #155724; }
.vacation-badge-rejected { background: #f8d7da; color: #721c24; }
/* Admin-Filter Buttons */
.vacation-filter-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.vacation-filter-btn {
  padding: 5px 14px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-white);
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.15s;
}
.vacation-filter-btn.active,
.vacation-filter-btn:hover {
  background: var(--color-primary-accent);
  color: white;
  border-color: var(--color-primary-accent);
}
.vacation-user-name { font-weight: 600; font-size: 0.9rem; color: var(--color-primary); }
.vacation-admin-actions { display:flex; gap:8px; margin-top:8px; }

/* ── Aufgaben (Tasks) ── */
.task-filter-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.task-filter-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 0.2s;
}
.task-filter-btn.active,
.task-filter-btn:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.task-list { display:flex; flex-direction:column; gap:10px; }
.task-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.task-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: var(--color-primary);
}
.task-card-header { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px; }
.task-card-title { font-weight:600; font-size:0.95rem; }
.task-card-details { font-size:0.85rem; color:var(--color-text-secondary); display:flex; gap:12px; flex-wrap:wrap; }
.task-card-actions { display:flex; gap:8px; margin-top:8px; }
.task-card-overdue { border-left: 3px solid #e53e3e; }
.task-badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:0.75rem; font-weight:600; white-space:nowrap; }
.task-badge-open { background:#fff3cd; color:#856404; }
.task-badge-in_progress { background:#d1ecf1; color:#0c5460; }
.task-badge-done { background:#d4edda; color:#155724; }

/* ─── Task Status Spinner ──────────────────────────── */
.task-status-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary-accent);
    border-radius: 50%;
    animation: taskSpin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
    flex-shrink: 0;
}
@keyframes taskSpin { to { transform: rotate(360deg); } }
.task-badge-in_progress { display:inline-flex; align-items:center; }
.task-detail-section .task-status-spinner {
    width: 16px;
    height: 16px;
    border-width: 2.5px;
    margin-right: 5px;
}

.task-detail-section {
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  padding: 20px;
  margin-bottom: 16px;
}
.task-material-list { display:flex; flex-direction:column; gap:8px; }
.task-material-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--color-surface);
  border-radius: 8px;
}
.task-note-area { margin-top:12px; }

/* Task-Modal */
.task-modal { max-width:650px; }

/* Zugewiesen-an Grid */
.task-assigned-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 8px 0;
}
.task-assigned-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
  -webkit-user-select: none;
}
.task-assigned-label:has(input:checked) {
  border-color: var(--color-primary);
  background: rgba(48, 194, 125, 0.08);
}
.task-assigned-name { font-size: 0.9rem; font-weight: 500; }
.task-assigned-role { font-size: 0.72rem; color: var(--color-text-secondary); margin-left: auto; }

/* Material-Input im Task-Modal */
.task-material-input-row { display:flex; gap:10px; margin-bottom:12px; align-items:center; flex-wrap:wrap; }
.task-material-search-wrap { position:relative; flex:1; min-width:140px; display:flex; align-items:center; }
.task-material-search-wrap input[type="text"] { width:100%; padding-right:38px; }
.task-material-qty { width:80px; }
.task-storage-unit { width:auto; min-width:90px; }
.task-material-autocomplete {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}
.task-note-area textarea {
  width: 100%;
  min-height: 80px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.task-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.task-info-item label {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.task-info-item span {
  font-weight: 500;
  font-size: 0.92rem;
}

/* ─── Plan Viewer ──────────────────────────── */
.plan-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 120px);
    overflow: hidden;
    background: var(--color-surface);
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.plan-container:active { cursor: grabbing; }

/* Kopieren-/Auswahl-Popup auf Canvas-Elementen unterdrücken */
#planCanvas, #planAnnotationCanvas, #planMarkerLayer,
#taskPhotoAnnotator, #taskPhotoAnnotator canvas {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.plan-transform {
    position: absolute;
    transform-origin: 0 0;
    will-change: transform;
}
/* Rotations-Wrapper innerhalb planTransform (Rotation getrennt von translate+scale) */
.plan-canvas-rotate {
    position: relative;
    display: inline-block;
    transform-origin: 50% 50%;
    will-change: transform;
}

#planCanvas {
    display: block;
    max-width: none;
}

.plan-marker-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

.plan-marker {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.15s;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
    z-index: 20; /* Über planAnnotationCanvas (z-index:15) */
}
.plan-marker:hover, .plan-marker.active {
    transform: translate(-50%, -100%) scale(1.2);
    z-index: 30;
}
/* Marker-Farbe + -Größe werden per inline-style gesetzt (variable via JS) */
.plan-marker svg { display: block; }
/* Im Zeichenmodus: Marker nicht anklickbar (Canvas muss Events fangen) */
.plan-transform.drawing-mode .plan-marker { pointer-events: none; }
/* Label unter dem Pin-Symbol */
.plan-marker-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    background: rgba(0,0,0,0.72);
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    pointer-events: none;
    margin-top: 3px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-marker-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: var(--color-white);
    border-top: 2px solid var(--color-border);
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    z-index: 50;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    max-height: 55vh;
    overflow-y: auto;
}
.plan-marker-info h4 { margin: 0 0 4px 0; font-size: 0.95rem; }
.plan-marker-info p { margin: 0; font-size: 0.85rem; color: var(--color-text-secondary); }
#planMarkerInfoContent { flex: 1; min-width: 0; }
.marker-info-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.marker-info-photo {
    height: 70px;
    width: 70px;
    border-radius: 6px;
    object-fit: cover;
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    display: block;
}


.plan-longpress-indicator {
    position: absolute;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 3px solid var(--color-primary-accent);
    transform: translate(-50%, -50%) scale(0);
    animation: longPressGrow 0.6s ease-out forwards;
    pointer-events: none;
    z-index: 30;
}
@keyframes longPressGrow {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
}

/* ─── Plan Drawing ─────────────────────────── */
.plan-annotation-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 15;
}
.plan-annotation-canvas.drawing-active {
    pointer-events: auto;
    cursor: crosshair;
    touch-action: none;
}
.plan-measure-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 16;
}
.plan-measure-canvas.measure-active {
    pointer-events: auto;
    cursor: crosshair;
}
#planMeasureScaleLabel {
    padding: 2px 8px;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Plan Viewer: Flex-Layout damit Toolbar + Container sauber untereinander liegen */
#planViewerView .page-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-x: hidden; /* planContainer hat eigenes overflow:hidden für Y */
    position: relative; /* Damit planMarkerInfo (position:absolute) korrekt positioniert */
}
#planViewerView .plan-container {
    flex: 1;
    min-height: 0;
    height: auto;
}

.plan-draw-toolbar {
    /* Desktop: feste Leiste unterhalb des Page-Headers (kein Floating mehr) */
    position: relative;
    top: auto; left: auto;
    transform: none;
    background: var(--color-white);
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    z-index: 60;
    box-shadow: none;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

.plan-tool-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.plan-tool-btn {
    width: 36px; height: 36px;
    min-width: 36px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
    color: var(--color-text);
}
.plan-tool-btn:hover { background: var(--color-surface); }
.plan-tool-btn.active {
    background: rgba(48, 194, 125, 0.12);
    border-color: var(--color-primary-accent);
    border-width: 2px;
    color: var(--color-primary-accent);
}
.plan-tool-btn.active svg { stroke: var(--color-primary-accent); }

/* ─── Marker-Modal: Farb- + Größenwähler ──── */
.pm-color-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    outline: none;
    transition: transform 0.1s;
}
.pm-color-btn:hover { transform: scale(1.15); }
.pm-color-btn.active {
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-primary);
}

.pm-size-btn {
    width: 44px; height: 44px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    padding: 0;
}
.pm-size-btn:hover { background: var(--color-surface); }
.pm-size-btn.active {
    border-color: var(--color-primary-accent);
    color: var(--color-primary-accent);
}

/* ─── Task Photos ──────────────────────────── */
.task-photos-list, .task-photos-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.task-photo-card {
    position: relative;
    width: 80px; height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}
.task-photo-card img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.task-photo-annotated {
    position: absolute;
    top: 2px; right: 2px;
    font-size: 0.7rem;
    background: var(--color-white);
    border-radius: 4px;
    padding: 1px 3px;
}
.task-photo-card .photo-remove {
    position: absolute;
    top: -2px; right: -2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--color-danger);
    color: #fff;
    border: none;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media (max-width: 768px) {
    /* Plan-Viewer: kein Overflow */
    #planViewerView .page-content { overflow-x: hidden; }
    #planViewerView .page-header { padding: 10px 12px; gap: 6px; }
    #planViewerTitle { display: none; } /* Titel ausgeblendet – Nutzer kennt die Zeichnung */
    #planViewerView .page-header-actions { gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
    #planViewerView .page-header-actions .btn { padding: 6px 8px; font-size: 0.78rem; }
    #planViewerView .page-header-actions .btn .icon { width: 16px; height: 16px; }
    /* Plan-Viewer: Zeichnen + Messen-Button nur Icon auf Mobile */
    #planDrawToggle span,
    #planMeasureToggle span { display: none; }
    /* Pläne-Liste: kein Overflow */
    #plaeneView .page-content { overflow-x: hidden; }
    /* Pläne-Karten: Kinder nicht aus Container herauslaufen lassen */
    #plaeneList > div { max-width: 100%; box-sizing: border-box; }
    #plaeneList h4 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .plan-marker svg { width: 28px; height: 28px; }
    /* Mobile: Toolbar wieder ans Bottom docken (fixiert über dem Plan) */
    .plan-draw-toolbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        transform: none;
        border-radius: 12px 12px 0 0;
        border-bottom: none;
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
        padding: 8px 10px;
        gap: 8px;
        justify-content: center;
        max-width: 100vw;
        max-height: 50vh;
        overflow-y: auto;
    }
    .plan-tool-btn { width: 44px; height: 44px; min-width: 44px; }
    .plan-tool-group { gap: 4px; flex-wrap: wrap; justify-content: center; }
    /* Farbe und Linienbreite besser sichtbar */
    .plan-draw-toolbar input[type="color"] { width: 36px; height: 36px; }
    .plan-draw-toolbar input[type="range"] { width: 60px; }
}

@media (max-width: 768px) {
  .empty-state {
    margin-left: -12px;
    margin-right: -12px;
    width: calc(100% + 24px);
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 56px 20px;
  }
}

/* ── Preiskalkulation: Scrollbar sichtbar machen ── */
.preiskalk-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  /* Immer sichtbarer Scrollbar in Primärfarbe */
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) rgba(0,0,0,0.06);
}
.preiskalk-scroll-wrap::-webkit-scrollbar {
  height: 8px;
}
.preiskalk-scroll-wrap::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.06);
  border-radius: 4px;
}
.preiskalk-scroll-wrap::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 4px;
  min-width: 40px;
}
.preiskalk-scroll-wrap::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-accent);
}
/* Swipe-Hinweis: Gradient am rechten Rand wenn scrollbar */
.preiskalk-scroll-hint {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 8px;
  width: 32px;
  background: linear-gradient(to left, var(--color-mint-light) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
/* ── Preiskalkulation: Layout-Klassen ── */
.preiskalk-container {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--color-mint-light);
  border-radius: 8px;
  border-left: 4px solid var(--color-primary-accent);
}
.preiskalk-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.preiskalk-global-markup {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.preiskalk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 520px;
}
.preiskalk-th {
  padding: 8px 10px;
  color: var(--color-text-secondary);
  font-weight: 600;
  border-bottom: 2px solid var(--color-border);
}
.preiskalk-td {
  padding: 8px 10px;
}
.preiskalk-input {
  width: 72px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  text-align: right;
  font-size: 0.9rem;
}
.preiskalk-summary {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.5);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; justify-content:center; align-items:center; padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); overflow:hidden; touch-action:none; }
#confirmModal { z-index:20000; }
#promptModal { z-index:20000; }
.modal-overlay.active { display:flex; }
.modal { background:var(--color-white); border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,0.2); padding:32px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; }
.modal h3 { color:var(--color-primary); margin-bottom:20px; font-size:1.2rem; }
.modal-actions { display:flex; gap:10px; justify-content:center; margin-top:24px; }

/* ── Regiebericht + Packliste Modals ── */
.regiebericht-modal { max-width:800px; width:100%; }
.packliste-modal { max-width:700px; width:100%; }
/* Titel "Regiebericht bearbeiten" in einer Zeile halten */
#rbFormTitle { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.settings-section { background:var(--color-white); border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.1); padding:24px; margin-bottom:20px; }
.settings-section h3 { color:var(--color-primary); margin-bottom:16px; font-size:1.1rem; padding-bottom:10px; border-bottom:1px solid var(--color-border); }
.upload-area { border:2px dashed var(--color-border); border-radius:12px; padding:24px; text-align:center; cursor:pointer; transition:border-color 0.2s,background 0.2s; margin-bottom:12px; }
.upload-area:hover { border-color:var(--color-mint); background:#ffffff; }
.upload-area .icon { width:32px; height:32px; color:var(--color-text-secondary); margin-bottom:8px; }
.upload-area p { color:var(--color-text-secondary); font-size:0.85rem; }
.upload-area p strong { color:var(--color-mint); }
.preview-container { display:flex; align-items:center; gap:16px; margin-top:12px; }
.preview-logo { width:80px; height:80px; border-radius:8px; object-fit:contain; border:1px solid var(--color-border); background:var(--color-light-gray); }
.preview-avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid var(--color-border); }

.placeholder-page { text-align:center; padding:80px 20px; }
.placeholder-page h2 { color:var(--color-primary); margin-bottom:8px; }
.placeholder-page p { color:var(--color-text-secondary); margin-bottom:24px; }
.placeholder-icon { margin-bottom:16px; }

.project-info-bar { background:var(--color-white); border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.1), 0 0 24px rgba(48,194,125,0.6); padding:18px 22px; margin-bottom:24px; }
.project-info-bar h3 { color:var(--color-primary); font-size:1.15rem; margin-bottom:8px; display:flex; align-items:center; justify-content:center; gap:8px; }
.project-info-bar h3 .icon { flex-shrink:0; stroke:var(--color-primary-accent); color:var(--color-primary-accent); }
.project-info-details { display:flex; align-items:center; justify-content:center; gap:6px 16px; flex-wrap:wrap; color:var(--color-text-secondary); font-size:0.88rem; }
.project-info-item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.project-info-item .icon { flex-shrink:0; stroke:var(--color-primary-accent); color:var(--color-primary-accent); }

/* Budget-Bar Container */
.budget-bar { padding:14px 16px; border-radius:8px; margin-bottom:16px; background:var(--color-surface); border:1px solid var(--color-border); }

/* Budget-Statistiken im Projekt-Detail */
.budget-stats { display:flex; gap:24px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.budget-stat { text-align:center; }
.budget-stat-label { font-size:0.72rem; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:2px; }
.budget-stat-value { font-weight:700; font-size:1rem; }
.budget-progress { margin-top:4px; }

.bericht-card { background:var(--color-white); border-radius:12px; box-shadow:0 4px 6px rgba(0,0,0,0.1); padding:18px; margin-bottom:14px; cursor:pointer; transition:box-shadow 0.2s,transform 0.15s; }
.bericht-card:hover { box-shadow:0 6px 14px rgba(0,0,0,0.13); transform:translateY(-1px); }
.bericht-card h4 { color:var(--color-primary); font-size:1rem; margin-bottom:6px; }
.bericht-meta { display:flex; flex-wrap:wrap; gap:14px; font-size:0.82rem; color:var(--color-text-secondary); }
.bericht-meta span { display:flex; align-items:center; gap:4px; }

.monteur-row { display:flex; gap:10px; align-items:flex-end; margin-bottom:10px; }
.monteur-row select,.monteur-row input { flex:1; }
.monteur-row .btn { flex-shrink:0; }
.monteur-list { margin-bottom:10px; }
.monteur-entry { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:var(--color-surface); border-radius:8px; margin-bottom:6px; font-size:0.88rem; }
.total-hours { background:var(--color-mint-light); padding:10px 14px; border-radius:8px; font-weight:600; color:var(--color-primary); margin-bottom:16px; font-size:0.95rem; }

.photo-grid {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
  padding:8px;
  background:var(--color-light-gray);
  border-radius:6px;
  min-height:100px;
}
.photo-thumb-wrap {
  position:relative;
  flex-shrink:0;
}
.photo-thumb {
  width:80px;
  height:80px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid var(--color-border);
  background:var(--color-white);
  display:block;
}
.photo-remove { position:absolute; top:-6px; right:-6px; width:32px; height:32px; min-width:44px; min-height:44px; background:var(--color-black); color:white; border:none; border-radius:50%; font-size:0.85rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }

.material-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.material-tag { background:var(--color-mint-light); color:var(--color-primary); padding:4px 10px; border-radius:16px; font-size:0.82rem; display:flex; align-items:center; gap:4px; }
.material-tag button { background:none; border:none; cursor:pointer; color:var(--color-primary); font-size:0.9rem; padding:0 2px; }

/* Material-Kombinationsvorschläge als Karten */
.material-suggestion-card { display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--color-surface); border:1.5px solid var(--color-border); border-radius:8px; cursor:pointer; font-family:inherit; font-size:0.85rem; font-weight:500; color:var(--color-primary); min-height:44px; text-align:left; transition:border-color 0.15s, background 0.15s; }
.material-suggestion-card:hover, .material-suggestion-card:focus { border-color:var(--color-primary-accent); background:var(--color-mint-light); outline:none; }
.material-suggestion-thumb { width:36px; height:36px; border-radius:4px; object-fit:cover; flex-shrink:0; background:var(--color-light-gray); }
.material-suggestion-placeholder { width:36px; height:36px; border-radius:4px; background:var(--color-light-gray); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.material-suggestion-placeholder .icon { width:16px; height:16px; stroke:var(--color-text-secondary); }

.settings-tab { background:none; border:none; padding:14px 20px; cursor:pointer; font-size:0.95rem; color:var(--color-text-secondary); transition:all 0.3s; position:relative; font-weight:500; }
.settings-tab:hover { color:var(--color-primary); }
.settings-tab.active { color:var(--color-primary); }
.settings-tab.active::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:3px; background:var(--color-primary-accent); }
.settings-tab-content { display:none !important; }
.settings-tab-content.active { display:block !important; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
.voice-btn { background:var(--color-mint); color:white; border:none; border-radius:8px; padding:8px 14px; cursor:pointer; font-size:0.85rem; display:inline-flex; align-items:center; gap:6px; transition:background 0.2s; }
.voice-btn:hover { background:var(--color-primary); }
.voice-btn.recording { background:var(--color-black); animation:pulse 1s infinite; }

@media (max-width:768px) {
    .modal { width:95vw !important; max-width:95vw !important; margin:auto; }
    .form-group { margin-bottom:12px; }
    .settings-section { margin-bottom:16px; }
}

/* Material-Picker: auf Handy oben positionieren (verhindert Tastatur-Überdeckung) */
@media (max-width:600px) {
    #completionMaterialPicker.modal-overlay { align-items:flex-start; padding-top:10px; }
    #completionMaterialPicker .modal { max-height:65vh; }
}

@media (max-width:600px) {
    .page-header { grid-template-columns: auto 1fr auto; }
    .search-input { width:100%; }
    .page-header-actions { flex-wrap:wrap; }
    .header-user { display:none; }
    .monteur-row { flex-direction:column; align-items:stretch; }
    [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
    #plVariantSelect { width:100%; }
    #plMaterialQuantity { width:80px; }
    #rbMaterialQuantity { width:80px; }
    #userList { grid-template-columns:1fr !important; }
    #userListHeader { display:none !important; }
    .userListRow { grid-template-columns:1fr !important; }
    .userListRow > div { padding:4px 0; border-bottom:none !important; }
    .material-tags { flex-wrap:wrap; }
    .material-tag { flex-wrap:wrap; }
    .modal { max-height:85vh; }
    .modal-actions { flex-direction:column; }
    .modal-actions .btn { width:100%; }
}

/* ================================================================
   IN-APP TOAST-BENACHRICHTIGUNGEN
   Ersetzt browser-native alert()-Dialoge.
   Positionen: unten rechts, mobile-safe-area-bewusst.
   Typen: info (mint), success (grün), error (rot), warning (orange)
   ================================================================ */
.toast-container {
  position:fixed;
  top:max(16px, env(safe-area-inset-top));
  left:50%;
  transform:translateX(-50%);
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
  align-items:center;
}
.toast {
  background:var(--color-dark-gray);
  color:white;
  padding:12px 18px;
  border-radius:10px;
  font-size:0.9rem;
  font-family:inherit;
  min-width:220px;
  max-width:min(400px, calc(100vw - 32px));
  box-shadow:0 4px 16px rgba(0,0,0,0.22);
  opacity:0;
  transform:translateY(-8px);
  transition:opacity 0.28s ease, transform 0.28s ease;
  pointer-events:auto;
  word-break:break-word;
  border-left:4px solid var(--color-mint);
  text-align:center;
}
.toast.toast-show { opacity:1; transform:translateY(0); }
.toast.toast-success { border-left-color:#4caf50; }
.toast.toast-error   { border-left-color:#f44336; }
.toast.toast-warning { border-left-color:#ff9800; }
.toast.toast-info    { border-left-color:var(--color-mint); }

@media (max-width:600px) {
  .toast-container { left:16px; right:16px; transform:none; align-items:stretch; }
  .toast { max-width:100%; min-width:0; text-align:left; }
}

/* ================================================================
   TAGESZETTEL – Kein horizontaler Overflow auf Mobile
   ================================================================ */
#zeitTageszettelForm {
    max-width: 100%;
    overflow-x: hidden;
}
#zeitTageszettelForm select,
#zeitTageszettelForm input {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
#zeiterfassungView,
#zeiterfassungView .page-content {
    overflow-x: hidden;
}
@media (max-width: 600px) {
    #zeitTageszettelForm [style*="grid-template-columns:1fr 1fr"],
    #zeitTageszettelForm [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    #zeitTzProjectLines > div {
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto;
    }
    #zeitTzProjectLines > div select {
        grid-column: 1;
        grid-row: 1;
    }
    #zeitTzProjectLines > div input {
        grid-column: 1;
        grid-row: 2;
    }
    #zeitTzProjectLines > div .btn-trash {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
    }
}

/* ================================================================
   PROJEKTFOTOS – Projektselektor & Upload-Button
   ================================================================ */

/* Projektselektor-Block */
.pf-projekt-selector-wrap {
  margin-bottom:20px;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}
.pf-projekt-selector-label {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:600;
  color:var(--color-primary);
  margin-bottom:10px;
  font-size:0.95rem;
}
/* Wrapper um select + Pfeil */
.pf-select-wrap {
  position:relative;
  display:block;
}
.pf-select {
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  padding:14px 48px 14px 16px;
  border:2px solid var(--color-border);
  border-radius:12px;
  font-size:1rem;
  font-family:inherit;
  color:var(--color-text);
  background:var(--color-white);
  cursor:pointer;
  min-height:52px;
  transition:border-color 0.2s, box-shadow 0.2s;
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
.pf-select:focus {
  outline:none;
  border-color:var(--color-mint);
  box-shadow:0 0 0 3px rgba(48,194,125,0.25);
}
.pf-select:hover { border-color:var(--color-primary); }
/* Pfeil-Icon rechts im Select */
.pf-select-arrow {
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  color:var(--color-text-secondary);
  pointer-events:none;
}

/* Großer Upload-Button (öffnet natives Handy-Menü) */
.pf-upload-btn {
  display:block;
  width:100%;
  max-width:520px;
  padding:22px 16px 18px;
  background:var(--color-white);
  border:2px dashed var(--color-mint);
  border-radius:14px;
  cursor:pointer;
  font-size:1rem;
  font-family:inherit;
  font-weight:600;
  color:var(--color-primary);
  text-align:center;
  transition:background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow:0 2px 8px rgba(48,194,125,0.18);
  min-height:44px;
  touch-action:manipulation;
  line-height:1.4;
}
.pf-upload-btn:hover,
.pf-upload-btn:focus {
  background:var(--color-mint-light);
  border-color:var(--color-primary);
  box-shadow:0 4px 16px rgba(48,194,125,0.35);
  outline:none;
}
.pf-upload-btn:active { transform:scale(0.98); }
/* Hinweistext unter dem Haupt-Label */
.pf-upload-hint {
  display:block;
  font-size:0.8rem;
  font-weight:400;
  color:var(--color-text-secondary);
  margin-top:4px;
  letter-spacing:0.02em;
}

/* ================================================================
   PROJEKTFOTOS – Galerie-Grid (Mobile-First, Touch-optimiert)
   ================================================================ */
.pf-galerie {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
}
.pf-foto-wrap {
  position:relative;
  border-radius:8px;
  overflow:hidden;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  aspect-ratio:1;
}
.pf-foto-img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  cursor:pointer;
  transition:opacity 0.2s;
}
.pf-foto-img:hover { opacity:0.88; }
.pf-foto-delete {
  position:absolute;
  top:6px;
  right:6px;
  width:30px;
  height:30px;
  background:rgba(0,0,0,0.65);
  color:white;
  border:none;
  border-radius:50%;
  font-size:0.75rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:30px; /* ≥44px effektiv durch Touch-Hitbox */
  touch-action:manipulation;
}
.pf-foto-delete:hover { background:rgba(0,0,0,0.85); }
.pf-foto-meta {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.55);
  color:white;
  font-size:0.72rem;
  padding:4px 6px;
  line-height:1.3;
}
/* Lightbox */
.pf-lightbox {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.92);
  z-index:10000;
  align-items:center;
  justify-content:center;
  cursor:zoom-out;
}
.pf-lightbox.active { display:flex; }
.pf-lightbox img {
  max-width:min(95vw, 1200px);
  max-height:90vh;
  object-fit:contain;
  border-radius:4px;
  cursor:default;
  box-shadow:0 8px 40px rgba(0,0,0,0.5);
}
.pf-lightbox-close {
  position:absolute;
  top:max(16px, env(safe-area-inset-top));
  right:max(16px, env(safe-area-inset-right));
  background:rgba(255,255,255,0.15);
  color:white;
  border:none;
  border-radius:50%;
  width:44px;
  height:44px;
  font-size:1.2rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  z-index:10001;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.pf-lightbox-close:hover { background:rgba(255,255,255,0.3); }
.pf-lightbox-delete {
  position:absolute;
  bottom:max(24px, env(safe-area-inset-bottom));
  right:max(16px, env(safe-area-inset-right));
  background:rgba(220,53,69,0.8);
  color:white;
  border:none;
  border-radius:50%;
  width:48px;
  height:48px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10001;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.pf-lightbox-delete:hover { background:rgba(220,53,69,1); }

@media (max-width:480px) {
  .pf-galerie { grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; }
}

/* ================================================================
   DRUCKAUSRICHTUNG – für HTML-Exporte und Druckausgaben
   Verwendung: dem Druck-Container die Klasse zuweisen.
   .print-portrait  → Hochformat (Standard)
   .print-landscape → Querformat (für breite Tabellen)

   REGEL: Alle zukünftigen Druckausgaben müssen eine dieser
   Klassen verwenden (siehe CLAUDE.md).
   ================================================================ */
@media print {
    .print-portrait  { page: portrait-page; }
    .print-landscape { page: landscape-page; }
}

@page portrait-page  { size: portrait; margin: 15mm; }
@page landscape-page { size: landscape; margin: 15mm; }

/* Fallback-Variante für HTML-Exporte (inline in exportierten Dateien) */
.print-portrait  { }
.print-landscape { }

/* ================================================================
   MOBILE RESPONSIVE – AEX.OS
   ── Konzept:
      • Tabs umbrechen (flex-wrap) – kein Scrollen, kein Verschieben
      • Grids werden einspaltig
      • Tabellen: Wrapper scrollbar, Tabelle selbst kompakt
      • Buttons: natürlich umbrechen, keine Streckung
      • Nur additive CSS – Desktop-Layout unverändert
   ================================================================ */

/* ================================================================
   PHASE 12: MOBILE LAYOUT SYSTEM (<1024px)
   ── Referenzen:
      • Header: Materialkatalog → Back links | Titel zentriert | Action rechts
      • Formular: Regiebericht → Abstände, Breite, Button-Zonen
   ── Nur additive Overrides – Desktop (>=1024px) bleibt unangetastet
   ================================================================ */
@media (max-width: 1023px) {

  /* ── A) Horizontaler Scroll-Schutz (auch für Tablet) ── */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* ── B) Page-Header: Titel immer perfekt zentriert ──
     Problem: h2 in grid-column:2 ist nur zentriert wenn col 1 und 3
     gleich breit sind. Module ohne Back-Button oder ohne Actions
     hatten den Titel verschoben.
     Fix: h2 spannt wie .page-header-center alle Spalten,
     Back/Actions liegen als Overlay darüber (z-index:1 besteht). */
  .page-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
  }

  .page-header > h2 {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
    justify-content: center;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }

  .page-header > .btn-back {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    pointer-events: auto;
  }

  .page-header > .page-header-actions {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    z-index: 1;
    pointer-events: auto;
  }

  /* page-header-center: bereits korrekt (grid-column: 1/-1) */
  .page-header > .page-header-center {
    grid-column: 1 / -1;
    grid-row: 1;
    pointer-events: none;
  }

  /* Materialkatalog: h2 bekommt Innenabstand damit der Text nicht
     hinter dem Export+Add-Button (≈96px rechts) verschwindet */
  #materialView .page-header > h2 {
    padding: 0 96px;
  }

  /* ── C) Tab-Bars: Umbrechen ab Tablet-Breite ──
     Inline-Tabs (Projekte, Regieberichte, Packliste, Zeiterfassung)
     können bei 769-1023px schon zu eng werden. */
  #zeitTabsContainer,
  .page-content > div[style*="border-bottom"][style*="display:flex"] {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ── D) Touch-Targets: Mindestgröße 44px für alle interaktiven Elemente ── */
  .btn,
  .btn-trash,
  .btn-archive,
  .btn-icon,
  .btn-pw-toggle,
  .settings-tab {
    min-height: 44px;
  }

  /* ── E) Formular-Konsistenz (Referenz: Regiebericht-Form) ──
     Alle Formulare: kein horizontaler Overflow */
  form {
    max-width: 100%;
    box-sizing: border-box;
  }

  form input,
  form select,
  form textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ── F) Page-Header-Actions: Konsistentes Wrapping ── */
  .page-header-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ── G) Formular-Header: Abbrechen-Button ausblenden ──
     Regiebericht-Form und Packliste-Form haben den Abbrechen-Button
     doppelt (Header + Formular-Footer). Auf Mobile den Header-Button
     verstecken, da er den zentrierten Titel überlappt.
     Der Abbrechen-Button unten im Formular bleibt erhalten. */
  #regieberichtFormView .page-header .page-header-actions,
  #packlisteFormView .page-header .page-header-actions {
    display: none;
  }
}

@media (max-width: 768px) {

  /* ══════════════════════════════════════════════════════════════
     A) GRUNDLAYOUT
     ══════════════════════════════════════════════════════════════ */

  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .page-content {
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  /* ── Kompakter Mobile Header mit Avatar-Dropdown ── */
  .header {
    padding: 6px 12px;
    padding-top: calc(6px + env(safe-area-inset-top));
    position: sticky;
  }

  /* Einstellungen + Abmelden auf Mobile ausblenden */
  .header-desktop-only {
    display: none !important;
  }

  .header-user { display: none; }

  .header-right {
    gap: 8px;
    position: relative;
  }

  /* Avatar als Dropdown-Trigger */
  .header-avatar-wrap {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .header-avatar-wrap .header-avatar,
  .header-avatar-wrap .header-avatar-placeholder {
    width: 34px;
    height: 34px;
  }

  /* Dropdown-Menü */
  .header-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 6px;
    background: var(--color-background);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    border: 1px solid var(--color-border);
    min-width: 180px;
    z-index: 200;
    overflow: hidden;
  }
  .header-dropdown.open {
    display: flex;
    flex-direction: column;
  }
  .header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: none;
    border: none;
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--color-text);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
  }
  .header-dropdown-item:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
  }
  .header-dropdown-item:active {
    background: var(--color-surface);
  }
  .header-dropdown-item .icon {
    stroke: var(--color-text-secondary);
    flex-shrink: 0;
  }
  .header-dropdown-logout {
    color: #dc3545;
  }
  .header-dropdown-logout .icon {
    stroke: #dc3545;
  }

  /* Logo etwas dominanter */
  #headerLogoArea { height: 44px; }
  #headerLogoArea .header-logo-placeholder { height: 44px; }
  #headerLogoArea .header-logo-placeholder svg { width: 32px; height: 32px; }
  #headerLogoArea img { height: 44px; }
  #headerLogoArea .header-logo { height: 44px; }

  /* Login mobil */
  .login-card { padding: 28px 20px 24px; }
  .login-card h2 { font-size: 1.35rem; }
  .login-submit { min-height: 48px; }
  .login-options { flex-wrap: wrap; gap: 6px; }
  .forgot-pw-card { padding: 24px 18px; }
  .login-copyright { font-size: 0.68rem; }

  /* Globale Suche: kompakter auf Mobil */
  .global-search-wrap {
    margin-bottom: 16px;
  }
  /* Marquee-Lauftext auf Mobil */
  .global-search-input::placeholder {
    color: transparent !important;
  }
  .global-search-marquee {
    display: block;
    position: absolute;
    left: 38px;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
  }
  .global-search-marquee-text {
    display: inline-block;
    color: var(--color-text-secondary);
    font-size: 14px;
    padding-right: 30px;
    animation: searchMarquee 8s ease-in-out infinite;
  }
  @keyframes searchMarquee {
    0%, 20%   { transform: translateX(0); }
    45%, 55%  { transform: translateX(-35%); }
    80%, 100% { transform: translateX(0); }
  }
  .search-result-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }
  .search-result-icon .icon {
    width: 14px;
    height: 14px;
  }
  .search-result-item {
    padding: 8px 12px;
    gap: 10px;
  }
  .search-group-header {
    padding: 8px 12px;
  }

  /* ══════════════════════════════════════════════════════════════
     B) REGISTERKARTEN (TABS)
     Konzept: Tabs umbrechen in mehrere Zeilen – KEIN Scrollen,
     kein Verschieben. Schlicht und vorhersehbar auf Mobile.
     ══════════════════════════════════════════════════════════════ */

  /* Alle Tab-Container: umbrechen erlaubt, zentriert */
  #zeitTabsContainer,
  .page-content > div[style*="border-bottom"][style*="display:flex"] {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }

  /* Einzelne Tabs: kleiner, umbrechen */
  .settings-tab {
    padding: 8px 12px;
    font-size: 0.85rem;
    flex-shrink: 1;
    white-space: nowrap;
  }

  /* ══════════════════════════════════════════════════════════════
     C) GRIDS → EINSPALTIG
     ══════════════════════════════════════════════════════════════ */

  /* Startseite und Projektliste */
  .dashboard-grid,
  .project-grid {
    grid-template-columns: 1fr;
  }

  /* Alle inline-Grids in Formularen → einspaltig via direkten Klassen-Selektor */
  /* Regiebericht: Datum/Geschoss/Raum (3-spaltig) */
  #regieberichtFormView [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Regiebericht: Stunden (2-spaltig) + Tageszettel Startzeit/Endzeit */
  #regieberichtFormView [style*="grid-template-columns:1fr 1fr"],
  #zeitTageszettelForm [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Regiebericht: Monteure (1fr 80px auto) → 2 Spalten: Feld + Button */
  #regieberichtFormView [style*="grid-template-columns:1fr 80px auto"] {
    grid-template-columns: 1fr auto !important;
  }
  /* Regiebericht: Material-Suche – Suchfeld volle Breite, Menge+Einheit+Plus in Zeile 2 */
  #regieberichtFormView [style*="grid-template-columns:1fr 80px 100px auto"] {
    grid-template-columns: 1fr 1fr auto !important;
    grid-template-rows: auto auto;
  }
  /* Suchfeld-Container über die ganze erste Zeile */
  #regieberichtFormView [style*="grid-template-columns:1fr 80px 100px auto"] > div:first-child {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  /* Menge, Einheit, Plus-Button in Zeile 2 nebeneinander */
  #rbMaterialQuantity {
    grid-column: 1;
    grid-row: 2;
  }
  #rbStorageUnit {
    grid-column: 2;
    grid-row: 2;
  }
  #regieberichtFormView [style*="grid-template-columns:1fr 80px 100px auto"] > .btn-add {
    grid-column: 3;
    grid-row: 2;
  }

  /* Tageszettel Projektzeilen-Grid (2fr 1fr auto) */
  #zeitTzProjectLines > div {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto;
  }
  #zeitTzProjectLines .stunden-input {
    grid-column: 1;
    grid-row: 2;
  }
  #zeitTzProjectLines .btn {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  /* ══════════════════════════════════════════════════════════════
     D) PAGE-HEADER UND BUTTONS
     Mobil: Grid – Zurück links | Titel mitte | Aktionsbuttons rechts
     ══════════════════════════════════════════════════════════════ */

  /* Page-Header: Basis-Grid ist jetzt im 1023px-Block.
     Hier nur phone-spezifische Overrides. */
  .page-header {
    flex-wrap: unset;
  }

  .page-header > .page-header-center {
    align-self: center;
    text-align: center;
  }
  .page-header > .page-header-center h2 {
    font-size: 1.1rem;
    justify-content: center;
    margin: 0;
    line-height: 1.2;
  }
  .page-header > .page-header-center small {
    display: none;
  }

  .page-header-actions .btn {
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  .search-input {
    width: 100%;
    box-sizing: border-box;
  }

  /* Packliste-Thumbnail auf Mobil etwas kleiner */
  .packliste-thumb {
    width: 40px;
    height: 40px;
  }

  /* Tiles kompakter */
  .tile {
    padding: 20px 16px;
  }

  /* ══════════════════════════════════════════════════════════════
     E) MODAL-DIALOGE
     ══════════════════════════════════════════════════════════════ */

  /* Alle Modals: einheitliches Mobile-Verhalten (wie taskModal) */
  .modal {
    padding: 16px !important;
    max-width: min(520px, calc(100vw - 32px)) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Zeiterfassung-Modals mit fester max-width */
  #zeitTageszettelModal .modal,
  #zeitAbsenceModal .modal {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Modal-Buttons untereinander */
  .modal-actions {
    flex-direction: column;
    gap: 8px;
  }
  .modal-actions .btn {
    width: 100%;
  }

  /* ══════════════════════════════════════════════════════════════
     F) ZEITERFASSUNG: TABELLEN + FILTER
     ══════════════════════════════════════════════════════════════ */

  /* Dashboard-Tabelle: äußerer Container kein eigener Scroll (inner div übernimmt) */
  #zeitDashboardContent {
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
  /* iOS-Momentum für das JS-generierte inner div */
  #zeitDashboardContent > div[style*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  #zeitDashboardContent table {
    min-width: 500px;
    font-size: 0.82rem;
  }
  #zeitDashboardContent th,
  #zeitDashboardContent td {
    padding: 8px 10px;
    white-space: nowrap;
  }

  /* Monatsreport und Admin ebenfalls scrollbar */
  #zeitMonatContainer,
  #zeitAdminContainer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tageszettel-Liste: Filter-Zeile (flex-wrap + gap werden unten in Sektion I gesetzt) */
  /* Select + Buttons nebeneinander, Select schrumpft */
  #zeitEmpFilter {
    flex: 1;
    min-width: 100px;
    max-width: 200px;
    box-sizing: border-box;
  }
  /* Buttons passen sich an */
  #zeitTageszettelListContainer > div:first-child .btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 10px;
    font-size: 0.8rem;
  }

  /* Tageszettel-Karten: Stack vertikal */
  #zeitTageszettelListContainer [style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
  }
  #zeitTageszettelListContainer [style*="justify-content:space-between"] > div:last-child {
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }

  /* Wochenabschluss-Tab */
  #zeitWocheContainer > div > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #zeitWeekNum,
  #zeitWeekYear {
    width: calc(50% - 4px) !important;
    min-width: 80px;
    box-sizing: border-box;
  }
  #zeitWeekEmp {
    width: 100% !important;
    box-sizing: border-box;
  }
  #zeitWocheContainer .btn-primary {
    width: 100%;
  }

  /* Tageszettel-Formular: Select volle Breite */
  #zeitTageszettelForm select,
  #zeitAbsenceForm select {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ══════════════════════════════════════════════════════════════
     G) REGIEBERICHT-FORMULAR
     ══════════════════════════════════════════════════════════════ */

  /* Speichern/Abbrechen Reihe */
  #regieberichtFormView form [style*="justify-content:flex-end"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #regieberichtFormView form [style*="justify-content:flex-end"] .btn {
    flex: 1;
    min-width: 120px;
  }

  /* Material-Autocomplete begrenzen */
  #materialAutocomplete,
  #plMaterialAutocomplete {
    max-height: 160px;
  }

  /* Monteur-Zeile */
  .monteur-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* ══════════════════════════════════════════════════════════════
     H) SONSTIGES
     ══════════════════════════════════════════════════════════════ */

  .bericht-meta {
    flex-wrap: wrap;
    gap: 6px;
  }

  .pf-upload-btn,
  .pf-projekt-selector-wrap {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Materialkatalog: Varianten auf Mobile einspaltig */
  #materialForm .variant-card .variant-row {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: 8px !important;
  }

  /* Alle form-groups in variant-rows: volle Breite und Spalte */
  #materialForm .variant-card .variant-row > .form-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Labels sichtbar */
  #materialForm .variant-card .variant-row label {
    display: block !important;
    margin: 0 !important;
    font-size: 0.85rem !important;
  }

  /* Button-Container: mittig zentriert (nur für Datum-Zeile) */
  #materialForm .variant-card > div:last-child > div:last-child {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Button in der Reihe */
  #materialForm .variant-card .variant-row .btn {
    width: auto;
    min-width: 100px;
  }

  .variant-card {
    padding: 10px !important;
    overflow-x: clip;
  }

  /* Material Modal: Breiter auf Mobile */
  #materialModal .modal {
    max-width: calc(100vw - 20px) !important;
    margin: auto 10px;
    overflow-x: clip;
    padding: 20px 16px !important;
  }

  /* Form-Gruppen: volle Breite */
  #materialForm .form-group {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #materialForm input,
  #materialForm select {
    width: 100% !important;
    box-sizing: border-box;
    min-width: 0;
  }

  /* Date input: kompakt mit Platz */
  #materialForm input[type="date"] {
    font-size: 0.85rem;
    padding: 6px 8px !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Select-Felder: kompakt */
  #materialForm select {
    font-size: 0.85rem !important;
    padding: 6px 8px !important;
  }

  /* Date container: mit rechts-Margin für Sicherheit */
  #materialForm .variant-card .form-group:has(input[type="date"]) {
    margin-right: 0 !important;
  }

  /* Material Form: kein horizontaler Überlauf */
  #materialForm {
    overflow-x: visible;
  }

  /* Zeiterfassung: Button-Zeile auf Mobile anpassen */
  #zeitTageszettelListContainer > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #zeitTageszettelListContainer > div:first-child select {
    min-width: 100%;
    max-width: 100%;
    flex-basis: 100% !important;
  }
  #zeitTageszettelListContainer > div:first-child .btn {
    flex: 1;
    min-width: 120px;
    white-space: nowrap;
    font-size: 0.85rem;
  }

  /* Regiebericht: Keine horizontale Verschiebung */
  #regieberichtFormView {
    overflow-x: hidden;
  }
  #regieberichtFormView .page-content {
    overflow-x: hidden;
  }
  #regieberichtForm {
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
  }
  #regieberichtForm > div {
    overflow-x: hidden;
  }
  #regieberichtForm input,
  #regieberichtForm select,
  #regieberichtForm textarea {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Variante hinzufügen Button: mittig zentriert */
  #materialForm > div[style*="text-align:center"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  #materialForm > div[style*="text-align:center"] .btn {
    margin: 0 auto;
  }

  /* Material: Kategorie-Zeile auf Mobile stapeln */
  #materialForm .form-group [style*="display:flex"] {
    flex-direction: column !important;
    gap: 8px !important;
  }
  #materialForm .form-group [style*="display:flex"] select {
    width: 100% !important;
  }
  #materialForm .form-group [style*="display:flex"] button {
    width: 100% !important;
    flex: unset !important;
  }

  /* ══════════════════════════════════════════════════════════════
     I) ZURÜCK-BUTTONS: MOBILE STYLING
     ══════════════════════════════════════════════════════════════ */

  /* Zurück-Button: Text verstecken, nur Icon zeigen */
  .btn-back-text {
    display: none;
  }

  /* Zurück-Button: kompakt, nur Icon auf Mobil */
  .btn-back {
    padding: 10px 12px;
    gap: 6px;
    flex-shrink: 0;
  }

  /* ══════════════════════════════════════════════════════════════
     J) ERGÄNZENDE FLEX-WRAPS UND MIN-WIDTH-FIXES
     ══════════════════════════════════════════════════════════════ */

  /* Allgemein: Inputs/Selects/Textareas schrumpfen in flex/grid-Kontexten korrekt */
  .form-group input,
  .form-group select,
  .form-group textarea {
    min-width: 0;
  }

  /* Packliste: Menge / Verpackung / Preis-Zeile – umbrechen erlauben */
  #plMaterialDetails > div[style*="display:flex"][style*="align-items:center"] {
    flex-wrap: wrap;
  }
  #plQuantityInput {
    flex: 1;
    min-width: 80px;
  }

  /* Pläne: Upload-Button-Zeile – Status-Text umbrechen erlauben */
  #plaeneAdminPanel > div[style*="display:flex"] {
    flex-wrap: wrap;
  }

  /* ── Admin-Dashboard: responsive Anpassungen ── */
  .admin-stats-summary {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .admin-stat-card { padding: 14px 10px; }
  .admin-stat-value { font-size: 1.5rem; }
  .admin-user-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .admin-user-card {
    padding: 12px !important;
    min-width: 0;
    box-sizing: border-box;
  }
  .admin-user-header {
    gap: 8px !important;
    flex-wrap: wrap;
  }
  .admin-rank-badge {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.6rem !important;
  }
  .admin-user-avatar {
    width: 32px !important;
    height: 32px !important;
  }
  .admin-user-info {
    min-width: 0;
  }
  .admin-user-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-user-status {
    flex-shrink: 1 !important;
  }
  .admin-user-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .admin-user-stat {
    min-width: 0;
  }
  .admin-user-extra {
    flex-direction: column !important;
    gap: 12px;
  }
  .admin-productivity-block {
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }
  .admin-productivity-score {
    font-size: 1.3rem;
  }
  .admin-sickdays-block {
    flex-direction: row !important;
    gap: 10px !important;
    justify-content: flex-start !important;
  }
  .admin-sickdays-value {
    font-size: 1.3rem;
  }

  /* ══════════════════════════════════════════════════════════════
     K) CARD-STABILISIERUNG – KONSISTENTE BUTTON-AUSRICHTUNG
     ══════════════════════════════════════════════════════════════ */

  /* Projekt-Karten: Aktions-Buttons dürfen umbrechen */
  .project-actions {
    flex-wrap: wrap;
  }

  /* Regiebericht-Karten: Buttons unter Inhalt stapeln (analog Tageszettel-Fix) */
  #regieberichtList .bericht-card[style*="display:flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
  }
  #regieberichtList .bericht-card > div:first-child {
    min-width: 0;
  }
  #regieberichtList .bericht-card > div:not(:first-child) {
    margin-left: 0 !important;
    flex-wrap: wrap;
  }

  /* Packlisten-Archiv-Karten: Buttons unter Inhalt stapeln */
  #plArchivListe .bericht-card[style*="display:flex"],
  #plArchivListe [style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px;
  }
  #plArchivListe .bericht-card > div:not(:first-child),
  #plArchivListe [style*="justify-content:space-between"] > div:last-child {
    margin-left: 0 !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }

  /* ══════════════════════════════════════════════════════════════
     L) FORM-STABILISIERUNG – MOBILE SAFETY
     ══════════════════════════════════════════════════════════════ */

  /* Allgemein: form-group Inputs/Selects/Textareas nie breiter als ihr Container */
  .form-group input,
  .form-group select,
  .form-group textarea {
    max-width: 100%;
  }

  /* Date-Input: Kalender-Button nicht abschneiden, zentriert */
  input[type="date"] {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 8px !important;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
  }
  /* Webkit-Kalender-Icon: nicht abschneiden */
  input[type="date"]::-webkit-calendar-picker-indicator {
    flex-shrink: 0;
    margin-left: 4px;
    padding: 2px;
  }

  /* Projekt-Modal: PLZ/Ort-Zeile (130px-Spalte) → einspaltig */
  #projectForm [style*="grid-template-columns:130px"] {
    grid-template-columns: 1fr !important;
  }

  /* Packliste-Formular: 2-spaltige Button-Reihe → einspaltig */
  #packlisteForm [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Einstellungen: Flex-Zeilen (z. B. Speichern/Zurücksetzen) dürfen umbrechen */
  .settings-section div[style*="display:flex"] {
    flex-wrap: wrap;
  }

  /* Preiskalkulation: responsive auf Mobile */
  #rbPreiskalkulation {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .preiskalk-container {
    padding: 10px;
    border-left-width: 3px;
  }
  .preiskalk-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }
  .preiskalk-header h3 {
    font-size: 0.9rem !important;
  }
  .preiskalk-global-markup {
    width: 100%;
    font-size: 0.8rem;
  }
  .preiskalk-global-markup label {
    font-size: 0.8rem !important;
  }
  .preiskalk-table {
    font-size: 0.78rem;
    min-width: 420px;
  }
  .preiskalk-th {
    padding: 5px 4px;
    font-size: 0.75rem;
  }
  .preiskalk-td {
    padding: 4px 4px;
    font-size: 0.78rem;
  }
  .preiskalk-input {
    width: 56px;
    padding: 3px 5px;
    font-size: 0.78rem;
  }
  .preiskalk-summary {
    font-size: 0.72rem;
    padding: 8px;
    line-height: 1.6;
  }
  .preiskalk-summary strong {
    white-space: nowrap;
  }

  /* ══════════════════════════════════════════════════════════════
     M) MICRO ALIGNMENT & ICON STABILIZATION
     ══════════════════════════════════════════════════════════════ */

  /* Icons in Buttons nie schrumpfen lassen */
  .btn .icon,
  .btn-trash .icon,
  .btn-archive .icon,
  .btn-icon .icon,
  .voice-btn .icon {
    flex-shrink: 0;
  }

  /* Minimaler Gap für saubere Icon+Text-Abstände in Buttons */
  .btn {
    gap: 4px;
  }

  /* Settings-Tabs: vertikal zentrieren (inline-flex statt default inline) */
  .settings-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  /* Bericht-Karten: Action-Buttons auf einheitliche Mindesthöhe bringen */
  .bericht-card .btn,
  .bericht-card .btn-trash,
  .bericht-card .btn-archive {
    min-height: 44px;
  }

  /* ══════════════════════════════════════════════════════════════
     N) TOUCH & INTERACTION STABILIZATION
     ══════════════════════════════════════════════════════════════ */

  /* 1. iOS/Android: Standard-Tap-Highlight entfernen
        eigene :active-Zustände liefern das visuelle Feedback */
  button,
  a,
  .settings-tab,
  .tile,
  .project-card,
  .bericht-card {
    -webkit-tap-highlight-color: transparent;
  }

  /* 2. Focus-Ring: nur bei Tastaturnavigation sichtbar, nicht bei Touch/Klick */
  .btn:focus:not(:focus-visible),
  .btn-trash:focus:not(:focus-visible),
  .btn-archive:focus:not(:focus-visible),
  .btn-icon:focus:not(:focus-visible),
  .settings-tab:focus:not(:focus-visible) {
    outline: none;
  }

  /* 3. Fehlendes Active-Feedback für Icon-Buttons und Tab-Buttons */
  .btn-icon:active {
    transform: scale(0.93);
    opacity: 0.8;
  }
  .settings-tab:active {
    opacity: 0.7;
  }

  /* 4. Scroll-Container: kein Scroll-Übertrag auf Parent (scroll chaining verhindern) */
  #zeitMonatContainer,
  #zeitAdminContainer {
    overscroll-behavior: contain;
  }

  /* O. Container-Zentrierung auf Mobile */
  .project-info-bar h3 {
    justify-content: center;
  }
  .project-info-details {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .project-card {
    text-align: center;
  }
  .project-card h3 {
    text-align: center;
  }
  .project-detail {
    justify-content: center;
    width: 100%;
  }
  .project-card .status-badge {
    display: inline-block;
  }

  /* Budget-Bar auf Mobile zentriert */
  .budget-stats {
    justify-content: center;
    gap: 16px;
  }
  .budget-progress {
    text-align: center;
  }

  /* Material-Modal: Überschriften + Beschreibung zentriert */
  #materialModal h3,
  #materialModal h4,
  #materialModal h4 + p {
    text-align: center;
  }

  .tile {
    text-align: center;
  }

}

/* ================================================================
   DESKTOP LAYOUT SYSTEM – Einheitliches Layout ab 1024px
   ── Dominantes Muster:
      • Container: max-width 1200px, margin 0 auto, padding 24px
      • Grids: repeat(auto-fit, minmax(280px, 1fr)) für Karten
      • Page-Header: flex, space-between, center
      • Cards: border-radius 12px, box-shadow, padding 22-28px
      • Formulare: max-width 800px, zentriert
   ── Nur additive Overrides – Mobile bleibt unangetastet
   ================================================================ */
@media (min-width: 1024px) {

  /* ── A) Container & Grundlayout ── */

  /* Horizontalen Overflow verhindern */
  html, body {
    overflow-x: hidden;
  }

  /* Einheitlicher Page-Content-Container */
  .page-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px;
  }

  /* ── B) Karten-Grids: Feste Spalten für konsistente Darstellung ── */

  /* Dashboard: 2x2 Grid */
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* Projekt- und Materialkarten: 3 Spalten */
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  /* Fotogalerie: mehr Spalten auf Desktop */
  .pf-galerie {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
  }

  /* ── C) Page-Header: Einheitliche Ausrichtung ── */

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
  }

  .page-header h2 {
    font-size: 1.4rem;
  }

  .page-header-actions {
    gap: 12px;
  }

  /* Suchfeld: breiter auf Desktop */
  .search-input {
    width: 300px;
  }

  /* ── D) Formulare: Konsistente Breite, zentriert ── */

  /* Regiebericht: Gesamter Formular-Bereich zentriert (Form + Export + Preiskalkulation) */
  #regieberichtFormView .page-content {
    max-width: 900px;
  }
  #regieberichtFormView form {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  #rbExportActions,
  #rbPreiskalkulation {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Regiebericht: Sektions-Abstände einheitlich */
  #regieberichtForm > div {
    margin-bottom: 24px;
  }

  /* Regiebericht: Stunden-Sektion als Card */
  #regieberichtForm > div[style*="background:var(--color-mint-light)"] {
    border-radius: 10px;
    padding: 18px;
  }

  /* Regiebericht: Labels einheitlich */
  #regieberichtForm label[style*="font-weight:600"] {
    font-size: 0.95rem;
    margin-bottom: 12px;
  }

  /* Regiebericht: Speichern/Abbrechen-Zeile konsistent */
  #regieberichtForm > div[style*="justify-content:flex-end"] {
    padding-top: 20px;
    margin-top: 28px;
  }

  /* Packlisten-Formular: konsistente Breite */
  #packlisteFormView .page-content {
    max-width: 900px;
  }

  /* Zeiterfassung Tageszettel-Formular */
  #zeitTageszettelForm {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Abwesenheitsformular */
  #zeitAbsenceForm {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Materialkatalog: "Variante hinzufügen"-Button zentrieren
     (.btn ist display:flex → text-align:center wirkt nicht, daher Flex auf Parent) */
  #materialForm > div[style*="text-align:center"] {
    display: flex;
    justify-content: center;
  }

  /* ── E) Settings-Sections: Einheitlich ── */

  .settings-section {
    padding: 28px;
    margin-bottom: 24px;
  }

  /* ── F) Karten: Einheitliches Spacing ── */

  .tile {
    padding: 28px 24px;
  }

  .project-card {
    padding: 24px;
  }

  .bericht-card {
    padding: 20px;
    margin-bottom: 16px;
  }

  /* ── G) Modale: Komfortabel dimensioniert ── */

  .modal {
    max-width: 560px;
    padding: 32px;
  }

  /* Materialmodal: etwas breiter für Varianten */
  #materialModal .modal {
    max-width: 640px;
  }

  /* ── H) Tabellen: Komfortablere Darstellung ── */

  #zeitDashboardContent table {
    font-size: 0.9rem;
  }

  #zeitDashboardContent th,
  #zeitDashboardContent td {
    padding: 10px 14px;
  }

  /* ── I) Projektfotos: Upload-Bereich zentriert ── */

  .pf-upload-btn {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .pf-projekt-selector-wrap {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── J) Projekt-Info-Bar: Konsistente Abstände ── */

  .project-info-bar {
    padding: 20px 28px;
    margin-bottom: 28px;
  }

}

/* Regiebericht Export-Box: zentrierter Inhalt */
.rb-export-box {
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--color-surface);
  border-radius: 8px;
  border: 2px solid var(--color-primary-accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

/* ══════════════════════════════════════════════════════════════
   Nutzerverwaltung – Karten-Layout
   ══════════════════════════════════════════════════════════════ */

/* Desktop: Grid-Header */
.user-list-header {
  display: grid;
  grid-template-columns: 44px 1fr 1fr 1fr 170px;
  gap: 12px;
  padding: 10px;
  border-bottom: 2px solid var(--color-border);
  font-weight: 600;
  font-size: 0.85rem;
  align-items: center;
}

/* Desktop: Nutzer-Zeile als Grid */
.user-card {
  display: grid;
  grid-template-columns: 44px 1fr 1fr 1fr 170px;
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
  font-size: 0.9rem;
}

/* Avatar */
.user-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
}
.user-card-avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-mint-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
}

/* Identität (Avatar + Name) – spannt 2 Grid-Spalten (auto + 1fr) */
.user-card-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  grid-column: span 2;
}
.user-card-name {
  font-weight: 500;
}

/* Desktop: Label ausblenden (Header übernimmt) */
.user-card-label {
  display: none;
}

/* Passwort-Bereich */
.user-card-password {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-family: monospace;
  color: var(--color-text-secondary);
}
.pw-masked {
  letter-spacing: 2px;
}
.pw-visible {
  word-break: break-all;
}

/* Passwort-Toggle-Button */
.btn-pw-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-pw-toggle:hover {
  background: var(--color-surface);
  color: var(--color-primary-accent);
}

/* Status-Spalte */
.user-card-status {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* Aktionen */
.user-card-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.user-card-actions .btn-sm {
  padding: 5px 10px;
  font-size: 0.8rem;
}
.user-card-actions .btn-trash {
  padding: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Mobile: Karten-Layout ── */
@media (max-width: 600px) {
  .user-list-header {
    display: none;
  }
  .user-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    margin-bottom: 8px;
    border-bottom: none;
    background: var(--color-surface);
    border-radius: 8px;
    border: 1px solid var(--color-border);
  }
  .user-card-label {
    display: inline;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
  }
  .user-card-identity {
    gap: 12px;
  }
  .user-card-name {
    font-size: 1rem;
    font-weight: 600;
  }
  .user-card-role {
    font-size: 0.9rem;
  }
  .user-card-actions {
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid var(--color-border);
  }
}

/* ── Urlaubsanträge: Mobile ── */
@media (max-width: 768px) {
  .vacation-card { padding: 12px; }
  .vacation-card-header { flex-wrap: wrap; }
  .vacation-date-range { font-size: 0.88rem; }
  .vacation-filter-bar { justify-content: center; }
  .vacation-filter-btn { font-size: 0.78rem; padding: 5px 10px; }
  .vacation-admin-actions { flex-wrap: wrap; }
  .vacation-admin-actions .btn-sm { flex: 1; min-width: 100px; text-align: center; }
  .vacation-user-name { display: block; margin-bottom: 2px; }
  .vacation-date-range { margin-left: 0 !important; }
}

/* ── Aufgaben (Tasks): Mobile ── */
@media (max-width: 768px) {
  .task-card { padding: 12px; }
  .task-card-header { flex-wrap: wrap; }
  .task-card-title { font-size: 0.88rem; }
  .task-card-details { flex-direction: column; gap: 4px; }
  .task-card-actions { flex-wrap: wrap; }
  .task-card-actions .btn-sm { flex: 1; min-width: 100px; text-align: center; }
  .task-filter-bar { justify-content: center; }
  .task-filter-btn { font-size: 0.78rem; padding: 5px 10px; }
  .task-detail-section { padding: 14px; margin-bottom: 12px; }
  .task-info-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .task-material-item { flex-wrap: wrap; }

  /* Task-Modal: Mobile-Regeln jetzt zentral in Sektion E für alle Modals */
  .task-assigned-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .task-assigned-label {
    padding: 6px 8px;
    gap: 6px;
  }
  .task-assigned-name { font-size: 0.82rem; }
  .task-assigned-role { font-size: 0.68rem; }
  .task-material-input-row { flex-wrap: wrap; }
  .task-material-search-wrap { flex: 1 1 100%; min-width: 0; }
  .task-material-qty { flex: 1; min-width: 60px; }
  .task-storage-unit { flex: 1; min-width: 80px; }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL LOADING SPINNER
   ═══════════════════════════════════════════════════════════════ */
#globalLoader {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
#globalLoader.loader-visible {
  opacity: 1;
}
#globalLoader.loader-blocking {
  pointer-events: auto;
}

.loader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
}

.loader-spinner {
  position: relative;
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 0, 0, 0.08);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: loaderSpin 0.7s linear infinite;
}

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

/* ================================================================
   PWA STANDALONE-MODUS
   Wird aktiv wenn die App vom Homescreen gestartet wird.
   ================================================================ */
@media all and (display-mode: standalone) {
    /* Standalone-Modus: Header-Padding erhöhen damit Inhalt unter Dynamic Island/Notch liegt.
       body braucht KEIN eigenes padding-top – der Header regelt das selbst. */
    .header {
        padding-top: max(20px, calc(env(safe-area-inset-top) + 14px));
    }
}

/* Install-Banner */
#installBanner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-primary);
    color: #fff;
    padding: 14px 20px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 99998;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
    animation: slideUp 0.3s ease;
}
#installBanner strong {
    display: block;
    font-size: 0.95rem;
}
#installBanner .install-sub {
    font-size: 0.78rem;
    opacity: 0.75;
    margin-top: 2px;
}
#installBanner .install-btn {
    background: var(--color-mint);
    color: var(--color-primary);
    border: none;
    padding: 9px 18px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
#installBanner .install-dismiss {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    padding: 6px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.7;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ─── Access-Ablauf-Banner ─────────────────────────────────── */
#accessExpiryBanner {
    margin: 12px 0 4px;
}
.expiry-banner-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--color-danger);
    color: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    overflow: hidden;
}
.expiry-banner-inner.expiry-banner-urgent {
    animation: expiryPulse 2s ease-in-out infinite;
}
.expiry-banner-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.9;
}
.expiry-banner-track {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
}
.expiry-banner-text {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    animation: expiryTicker 18s linear infinite;
}
@keyframes expiryTicker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes expiryPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,53,69,0.4); }
    50%       { box-shadow: 0 0 0 6px rgba(220,53,69,0); }
}