:root {
    --primary: #0066cc;
    --primary-dark: #0052a3;
    --primary-light: #e8f0fb;
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-400: #a3a3a3;
    --gray-600: #525252;
    --gray-800: #262626;
    --radius: 8px;
    --radius-lg: 16px;
    --shadow: 0 2px 8px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
  }

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

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #1a1a2e;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 20px;
    margin: 0;
  }

  .app-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 375px;
  }

  /* Status-Banner (Offline / Woche gesperrt) */
  .app-status-banner {
    flex-shrink: 0;
    padding: 10px 14px;
    font-size: 0.8rem;
    line-height: 1.45;
    text-align: center;
    z-index: 15;
  }
  .app-status-offline {
    background: #fef3c7;
    color: #92400e;
    border-bottom: 1px solid #fde68a;
  }
  .app-status-woche {
    background: #eff6ff;
    color: #1e40af;
    border-bottom: 1px solid #bfdbfe;
  }

  .tk-gesperrt-hinweis {
    font-size: 0.8rem;
    color: var(--gray-500);
    text-align: center;
    padding: 8px 4px;
  }
  .tk-karte.tk-gesperrt .tk-segment {
    opacity: 0.92;
  }

  /* Phone Frame */
  .phone {
    width: 375px;
    min-height: 667px;
    background: white;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    position: relative;
    border: 8px solid #111;
    flex-shrink: 0;
  }

  .phone-label {
    color: #aaa;
    font-size: 12px;
    text-align: center;
    margin-bottom: 8px;
    font-family: monospace;
    letter-spacing: 1px;
  }

  .screen { display: none; height: 100%; min-height: 651px; padding-bottom: 60px; }
  .screen.active { display: flex; flex-direction: column; }

  /* Nav Tabs (Desktop Preview) */
  .nav-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }

  .nav-tab {
    padding: 6px 14px;
    border-radius: 20px;
    border: none;
    background: #2a2a4a;
    color: #aaa;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .nav-tab.active { background: var(--primary); color: white; }
  .nav-tab:hover { background: #3a3a6a; color: white; }

  /* ── LOGIN SCREEN ── */
  .login-screen {
    background: linear-gradient(135deg, #0066cc, #0044aa);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0;
    padding-bottom: 0 !important;
  }

  .login-logo { margin-bottom: 1rem; color: white; }
  .login-logo--brand {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .login-brand-img {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border-radius: 22px;
    background: #0a0a0a;
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.92),
      0 10px 28px rgba(0, 0, 0, 0.28),
      0 0 24px rgba(255, 107, 0, 0.22);
  }
  .login-brand-img--sm {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }
  .login-title { color: white; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.3rem; }
  .login-subtitle { color: rgba(255,255,255,0.8); font-size: 0.9rem; margin-bottom: 2rem; }

  .login-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    width: 100%;
    max-width: 280px;
  }

  .login-card--welcome {
    text-align: center;
    max-width: 300px;
    padding: 1.35rem 1.25rem 1.15rem;
  }

  .welcome-heading {
    font-size: 0.95rem;
    color: var(--gray-800);
    font-weight: 600;
    margin: 0 0 6px;
  }

  .welcome-copy {
    font-size: 0.78rem;
    color: var(--gray-400);
    line-height: 1.55;
    margin: 0 0 14px;
  }

  .welcome-legal {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 0.72rem;
  }

  .welcome-legal a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
  }

  /* Legal-Screens (Impressum / Datenschutz) */
  .legal-app-header {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 8px;
  }

  .legal-header-title {
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
  }

  .legal-header-spacer {
    width: 32px;
    height: 32px;
  }

  .legal-content {
    padding: 12px 16px 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .legal-doc {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--gray-700);
  }

  .legal-doc h2 {
    margin: 1.1rem 0 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-800);
  }

  .legal-doc h3 {
    margin: 0.75rem 0 0.25rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-700);
  }

  .legal-doc p {
    margin: 0 0 0.55rem;
  }

  .legal-doc ul {
    margin: 0 0 0.55rem;
    padding-left: 1.15rem;
  }

  .legal-doc li {
    margin-bottom: 0.25rem;
  }

  .legal-doc a {
    color: var(--primary);
    word-break: break-word;
  }

  .legal-badge {
    display: inline-block;
    margin: 0 0 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.72rem;
    font-weight: 600;
  }

  .legal-stand {
    margin-top: 1.25rem;
    font-size: 0.75rem;
    color: var(--gray-400);
  }

  .form-label { font-size: 0.8rem; color: var(--gray-600); margin-bottom: 0.4rem; display: block; }

  .pin-display {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 1rem 0;
  }

  .pin-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--gray-200);
    background: white;
    transition: background 0.2s;
  }

  .pin-dot.filled { background: var(--primary); border-color: var(--primary); }

  .pin-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 0.5rem;
  }

  .pin-btn {
    aspect-ratio: 1;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: white;
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--gray-800);
  }

  .pin-btn:active, .pin-btn:hover { background: var(--primary-light); }
  .pin-btn.delete { font-size: 1rem; color: var(--gray-400); }

  /* ── Welcome: Brandingwelle (Login-Geste) ── */
  .wave-unlock {
    width: 100%;
    margin: 0;
  }

  .wave-unlock-hint {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--gray-600);
    margin: 0 0 10px;
    min-height: 2.1em;
    transition: color 0.2s ease;
  }

  .wave-unlock-hint.is-error {
    color: var(--danger);
  }

  .wave-unlock-stage {
    position: relative;
    width: 100%;
    height: 100px;
    border-radius: 16px;
    background:
      radial-gradient(120% 80% at 0% 50%, rgba(255, 107, 0, 0.08), transparent 55%),
      radial-gradient(120% 80% at 100% 50%, rgba(37, 99, 235, 0.1), transparent 55%),
      linear-gradient(180deg, #f7fafc 0%, #eef3f9 100%);
    border: 1px solid rgba(0, 102, 204, 0.12);
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .wave-unlock-stage.is-dragging {
    cursor: grabbing;
    border-color: rgba(255, 107, 0, 0.35);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 0 0 3px rgba(255, 107, 0, 0.12);
  }

  .wave-unlock-stage.is-done {
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 0 0 3px rgba(37, 99, 235, 0.14);
  }

  .wave-unlock-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .wave-unlock-ball {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0a0a0a;
    overflow: hidden;
    pointer-events: none;
    will-change: transform;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.95),
      0 4px 14px rgba(0, 0, 0, 0.22),
      0 0 16px rgba(255, 107, 0, 0.28);
    animation: waveThumbPulse 2.4s ease-in-out infinite;
  }

  .wave-unlock-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
  }

  .wave-unlock-ball.is-active,
  .wave-unlock-stage.is-dragging .wave-unlock-ball {
    animation: none;
    box-shadow:
      0 0 0 2px #fff,
      0 6px 18px rgba(0, 0, 0, 0.28),
      0 0 22px rgba(255, 107, 0, 0.45);
  }

  .wave-unlock-stage.is-done .wave-unlock-ball {
    animation: none;
    box-shadow:
      0 0 0 2px #fff,
      0 6px 18px rgba(0, 0, 0, 0.25),
      0 0 22px rgba(37, 99, 235, 0.45);
  }

  .wave-unlock-stage.reduced-motion .wave-unlock-ball {
    animation: none;
  }

  @keyframes waveThumbPulse {
    0%, 100% {
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.95),
        0 4px 14px rgba(0, 0, 0, 0.22),
        0 0 12px rgba(255, 107, 0, 0.2);
    }
    50% {
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.95),
        0 4px 14px rgba(0, 0, 0, 0.22),
        0 0 20px rgba(255, 107, 0, 0.42);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wave-unlock-ball { animation: none; }
  }

  /* ── HEADER ── */
  .app-header {
    background: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--gray-200);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 10;
  }

  .header-logo { font-weight: 700; color: var(--primary); font-size: 0.9rem; display: flex; align-items: center; gap: 6px; }
  .header-title { font-weight: 600; color: var(--gray-800); font-size: 0.95rem; }
  .header-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
  }

  /* ── BOTTOM NAV ── */
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    display: flex;
    background: white;
    border-top: 1px solid var(--gray-200);
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 20;
  }

  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 2px 12px;
    gap: 3px;
    cursor: pointer;
    color: var(--gray-400);
    font-size: 0.6rem;
    font-weight: 500;
    transition: color 0.2s;
    border: none;
    background: none;
  }

  .bottom-nav[hidden] {
    display: none !important;
  }

  .nav-item.active { color: var(--primary); }
  .nav-item svg { width: 22px; height: 22px; }

  /* ── CONTENT ── */
  .content { flex: 1; overflow-y: auto; background: var(--gray-100); }

  /* ── TIMESHEET SCREEN (Wochenzettel) ── */
  .week-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--primary);
    color: white;
  }

  .week-nav-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-size: 1rem;
  }

  .week-summary {
    background: var(--primary-dark);
    color: white;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
  }
  
  .week-summary-total {
    font-size: 1.5rem;
    font-weight: 700;
  }

  .week-saldo-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .week-saldo-value.positive { color: #86efac; }
  .week-saldo-value.warning { color: #fde68a; }
  .week-saldo-value.neutral { opacity: 0.85; }

  .day-card {
    background: white;
    margin: 12px 16px;
    border-radius: var(--radius);
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  .day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: 8px;
  }

  .day-name { font-weight: 600; color: var(--gray-800); font-size: 0.9rem; }
  .day-total { font-weight: 700; color: var(--primary); font-size: 0.9rem; }

  /* Entry Block */
  .entry-block {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--gray-200);
  }
  .entry-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .time-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  .input-group label {
    display: block;
    font-size: 0.7rem;
    color: var(--gray-400);
    margin-bottom: 4px;
    text-transform: uppercase;
  }

  .time-input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    text-align: center;
    color: var(--gray-800);
    background: var(--gray-100);
  }
  
  .time-input:focus { outline: none; border-color: var(--primary); background: white; }

  .reason-input {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #fca5a5;
    background: #fef2f2;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--gray-800);
  }
  .reason-input:focus { outline: none; border-color: var(--danger); }
  .reason-input.filled { border-color: var(--gray-200); background: white; }

  .project-selector {
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 0.85rem;
    background: white;
  }

  .project-image {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
  }

  .project-name { font-weight: 500; color: var(--gray-600); }

  .attachment-area {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .btn-attachment {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    text-align: left;
  }
  
  .btn-attachment:hover { text-decoration: underline; }

  .attachment-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gray-100);
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--gray-600);
    border: 1px solid var(--gray-200);
    width: max-content;
  }

  .attachment-item .remove { cursor: pointer; color: var(--danger); font-weight: bold; }

  .btn-add-entry {
    width: 100%;
    padding: 10px;
    margin-top: 8px;
    background: none;
    border: 1px dashed var(--gray-400);
    border-radius: var(--radius);
    color: var(--gray-600);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
  }
  .btn-add-entry:hover { background: var(--gray-100); }

  .btn-submit-week {
    margin: 16px;
    width: calc(100% - 32px);
    padding: 14px;
    background: var(--success);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
  }

  .day-empty { opacity: 0.6; }

  /* ── PROJECT SCREEN (New) ── */
  .btn-add-project {
    margin: 16px 16px 0;
    width: calc(100% - 32px);
    padding: 12px;
    background: white;
    color: var(--primary);
    border: 2px dashed var(--primary);
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
  }
  
  .btn-add-project:hover { background: var(--primary-light); }

  /* KW-Leiste: Planungshorizont (Phase 2) */
  .project-kw-bar {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--gray-50, #f8fafc);
    border-bottom: 1px solid var(--gray-200, #e2e8f0);
    scrollbar-width: none;
  }

  .project-kw-bar::-webkit-scrollbar { display: none; }

  .project-kw-chip {
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--gray-300, #cbd5e1);
    background: white;
    color: var(--gray-700, #334155);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
  }

  .project-kw-chip.is-current {
    border-color: var(--primary, #0066cc);
    background: var(--primary-light, #e0f0ff);
    color: var(--primary, #0066cc);
  }

  .project-kw-chip.is-selected {
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.25);
  }

  .project-kw-list {
    padding-top: 4px;
  }

  .project-kw-group {
    scroll-margin-top: 52px;
  }

  .project-kw-group.is-current-week .project-kw-group-title {
    color: var(--primary, #0066cc);
  }

  .project-kw-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gray-500, #64748b);
  }

  .project-kw-group-now {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primary-light, #e0f0ff);
    color: var(--primary, #0066cc);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
  }

  .project-card {
    background: white;
    margin: 16px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  .project-card-toggle {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
  }

  .project-card-toggle:active {
    opacity: 0.92;
  }

  .project-card-accent-inline {
    height: 4px;
  }

  .project-card-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
  }

  .project-card-summary-main {
    min-width: 0;
    flex: 1;
  }

  .project-card-summary-hint {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--gray-400);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .project-card-plan-range {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 6px;
  }

  .project-card-auftrag {
    font-size: 0.72rem;
    color: var(--gray-500);
    margin-bottom: 4px;
  }

  .project-card-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
  }
  .project-card-phone:active { opacity: 0.6; }

  .project-card-notes {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--gray-100);
    border-radius: 8px;
    border-left: 3px solid var(--primary);
  }
  .project-card-notes--offer {
    border-left-color: var(--gray-400);
  }
  .project-card-notes-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--gray-500);
    margin-bottom: 4px;
  }
  .project-card-notes-text {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--gray-700);
    white-space: pre-wrap;
  }

  .project-card-img-clickable {
    display: block;
    width: 100%;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
  }
  .project-card-img-clickable::after {
    content: 'Tippen zum Vergrößern';
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-size: 0.62rem;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    pointer-events: none;
  }

  .baustellen-bild-lightbox {
    position: fixed;
    inset: 0;
    z-index: 12000;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .baustellen-bild-lightbox-inner {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .baustellen-bild-lightbox-img {
    max-width: 100%;
    max-height: calc(100vh - 120px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  }
  .baustellen-bild-lightbox-close {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
  }
  .baustellen-bild-lightbox-actions {
    display: flex;
    gap: 10px;
  }
  .baustellen-bild-lightbox-dl {
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
  }
  .baustellen-bild-lightbox-dl:active { opacity: 0.85; }

  .project-card-summary-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .pill-compact {
    font-size: 0.68rem !important;
    padding: 2px 7px !important;
  }

  .pill-compact-muted {
    background: var(--gray-100);
    color: var(--gray-600);
  }

  .project-card-chevron {
    flex-shrink: 0;
    color: var(--gray-400);
    transition: transform 0.2s ease;
  }

  .project-card-expanded .project-card-chevron {
    transform: rotate(180deg);
  }

  .project-card-details[hidden] {
    display: none !important;
  }

  .project-card-img-pending {
    background-color: var(--gray-200);
  }

  .project-card-img {
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: var(--gray-200);
  }

  .project-card-content { padding: 14px; }
  .project-card-title { font-weight: 600; font-size: 1rem; color: var(--gray-800); }
  .project-card-sub { font-size: 0.8rem; color: var(--gray-400); margin-top: 4px; display: flex; align-items: center; gap: 4px;}

  .project-badges { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

  /* Baustellen-Karte: Farbakzent, Auftraggeber, klickbare Adresse, Mini-Karte */
  .project-card-img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
  }
  .project-card-accent { height: 4px; }
  .project-card-customer {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 0.78rem;
    color: #000;
  }
  .project-card-addr {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    line-height: 1.35;
  }
  .project-card-addr:active { opacity: 0.6; }
  .project-card-addr svg:first-child { flex-shrink: 0; }
  .project-card-map {
    margin-top: 12px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
  }
  .project-card-map iframe {
    display: block;
    width: 100%;
    height: 150px;
    border: 0;
  }

  /* ── OVERVIEW SCREEN ── */
  .stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 16px;
  }

  .stat-card {
    background: white;
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  .stat-label { font-size: 0.7rem; color: var(--gray-400); margin-bottom: 4px; }
  .stat-value { font-size: 1.4rem; font-weight: 700; color: var(--gray-800); }
  .stat-sub { font-size: 0.7rem; color: var(--gray-400); margin-top: 2px; }
  .stat-value.positive { color: var(--success); }
  .stat-value.warning { color: var(--warning); }
  .stat-value.neutral { color: var(--gray-500); }

  /* Soll/Ist — aufklappbare Rechendetails */
  .soll-ist-panel {
    margin: 0 16px 12px;
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
  }

  .soll-ist-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border: none;
    background: white;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    text-align: left;
  }

  .soll-ist-toggle svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .soll-ist-panel.open .soll-ist-toggle svg {
    transform: rotate(180deg);
  }

  .soll-ist-details {
    display: none;
    padding: 0 14px 14px;
    border-top: 1px solid var(--gray-100);
    font-size: 0.78rem;
    color: var(--gray-600);
    line-height: 1.55;
  }

  .soll-ist-panel.open .soll-ist-details {
    display: block;
  }

  .soll-ist-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid var(--gray-100);
  }

  .soll-ist-row:last-child { border-bottom: none; }

  .soll-ist-row strong {
    color: var(--gray-800);
    font-weight: 600;
  }

  .soll-ist-hinweis {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--gray-50, #f9fafb);
    border-radius: 8px;
    font-size: 0.72rem;
    color: var(--gray-500);
  }

  .soll-ist-stand {
    margin-top: 8px;
    font-size: 0.68rem;
    color: var(--gray-400);
  }

  .month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid var(--gray-200);
  }

  .month-nav {
    background: none;
    border: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary);
  }

  .month-nav:hover { background: var(--primary-light); }
  .section-title {
    padding: 12px 16px 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .entry-card {
    background: white;
    margin: 0 16px 8px;
    border-radius: var(--radius);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  .entry-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--primary-dark);
  }
  .entry-icon svg { width: 18px; height: 18px; }

  .entry-icon.work { background: var(--primary-light); }
  .entry-icon.vacation { background: #eff6ff; color: #0066cc; }
  .entry-icon.sick { background: #fef2f2; color: #dc2626; }
  .entry-icon.night { background: #fff7ed; color: #ea580c; }

  .entry-info { flex: 1; }
  .entry-title { font-size: 0.85rem; font-weight: 500; color: var(--gray-800); }
  .entry-sub { font-size: 0.75rem; color: var(--gray-400); margin-top: 2px; }
  .entry-hours { font-size: 0.9rem; font-weight: 600; color: var(--gray-600); }


  /* ── ABSENCE SCREEN ── */
  .absence-header {
    background: white;
    padding: 16px;
    border-bottom: 1px solid var(--gray-200);
  }

  .absence-tabs {
    display: flex;
    gap: 8px;
  }

  .absence-tab {
    flex: 1;
    padding: 8px;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    background: white;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: center;
    color: var(--gray-600);
  }

  .absence-tab.active { background: var(--primary); color: white; border-color: var(--primary); }

  .absence-card {
    background: white;
    margin: 8px 16px;
    border-radius: var(--radius);
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  .absence-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .absence-icon svg { width: 20px; height: 20px; }

  .pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
  }

  .pill.approved { background: #f0fdf4; color: #16a34a; }
  .pill.pending { background: #fffbeb; color: #d97706; }
  .pill.rejected { background: #fef2f2; color: #dc2626; }

  .fab {
    position: absolute;
    bottom: 80px;
    right: 16px;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,102,204,0.4);
    display: flex; align-items: center; justify-content: center;
  }


  /* ── TEAMUEBERSICHT ── */
  .team-cta-card {
    width: calc(100% - 32px);
    margin: 0 16px 12px;
    border: none;
    border-radius: 16px;
    padding: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    box-shadow: 0 8px 22px rgba(0,102,204,0.22);
    cursor: pointer;
  }

  .team-cta-card:active { transform: translateY(1px); }
  .team-cta-eyebrow { font-size: 0.68rem; opacity: 0.78; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
  .team-cta-title { font-size: 1.08rem; font-weight: 800; margin-top: 2px; }
  .team-cta-sub { font-size: 0.78rem; opacity: 0.82; margin-top: 4px; line-height: 1.35; }
  .team-cta-badge { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.26); padding: 7px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }

  .team-screen-header {
    margin: 16px;
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    box-shadow: 0 8px 22px rgba(0,102,204,0.2);
  }

  .team-screen-header h2 { margin: 3px 0 4px; font-size: 1.25rem; line-height: 1.15; }
  .team-screen-header p { margin: 0; font-size: 0.78rem; opacity: 0.82; line-height: 1.35; }

  .team-refresh-btn {
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.16);
    color: white;
    border-radius: 999px;
    padding: 8px 10px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
  }

  .team-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 16px 12px;
  }

  .team-stat, .team-card, .team-hinweise, .team-calendar, .team-empty {
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  .team-stat { padding: 12px; }
  .team-stat span { display: block; font-size: 0.68rem; color: var(--gray-400); font-weight: 600; }
  .team-stat strong { display: block; color: var(--gray-800); font-size: 1.35rem; margin-top: 3px; }
  .team-stat small { color: var(--gray-400); font-size: 0.68rem; }

  .team-card-list { display: grid; gap: 10px; margin: 0 16px 12px; }
  .team-card { padding: 14px; border-left: 5px solid var(--team-color); }
  .team-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .team-card-head strong { display: block; color: var(--gray-800); font-size: 0.95rem; }
  .team-card-head span { display: block; color: var(--gray-400); font-size: 0.73rem; margin-top: 2px; }
  .team-card-head b { min-width: 34px; height: 34px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }

  .team-project-row, .team-member-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .team-project-row span { border-radius: 999px; background: var(--gray-100); color: var(--gray-600); padding: 4px 8px; font-size: 0.68rem; font-weight: 600; }
  .team-member-row span { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-light); color: var(--primary-dark); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800; }

  .team-hinweise { margin: 0 16px 12px; padding: 14px; }
  .team-hinweise h3, .team-calendar h3 { margin: 0 0 10px; color: var(--gray-800); font-size: 0.9rem; }
  .team-hinweise div { border-top: 1px solid var(--gray-100); padding: 9px 0; }
  .team-hinweise div:first-of-type { border-top: 0; padding-top: 0; }
  .team-hinweise strong { display: block; color: var(--gray-800); font-size: 0.78rem; }
  .team-hinweise span { display: block; color: var(--gray-400); font-size: 0.72rem; line-height: 1.35; margin-top: 2px; }

  .team-calendar { margin: 0 16px 12px; padding: 14px; overflow: hidden; }
  .team-calendar-scroll { overflow-x: auto; padding-bottom: 4px; }
  .team-calendar-team { min-width: 720px; border-top: 1px solid var(--gray-100); padding-top: 10px; margin-top: 10px; }
  .team-calendar-team:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
  .team-calendar-team > strong { display: block; color: var(--primary-dark); font-size: 0.8rem; margin-bottom: 8px; }
  .team-calendar-row { display: grid; grid-template-columns: 118px 1fr; gap: 8px; align-items: center; margin-bottom: 5px; }
  .team-calendar-name { color: var(--gray-800); font-size: 0.73rem; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .team-calendar-name small { display: block; color: var(--warning); font-size: 0.62rem; font-weight: 700; }
  .team-calendar-days { display: grid; grid-template-columns: repeat(31, 20px); gap: 3px; }
  .team-day { width: 20px; height: 20px; border-radius: 6px; background: var(--gray-100); color: var(--gray-400); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800; }
  .team-day.ok { background: #dcfce7; color: #15803d; }
  .team-day.missing { background: #fee2e2; color: #b91c1c; }
  .team-day.away { background: #dbeafe; color: #1d4ed8; }
  .team-day.sick { background: #fef2f2; color: #dc2626; }
  .team-day.pending { background: #fef3c7; color: #b45309; }
  .team-day.neutral { background: var(--gray-100); color: var(--gray-300); }
  .team-legend { display: flex; gap: 8px; flex-wrap: wrap; color: var(--gray-400); font-size: 0.68rem; margin-top: 10px; }

  .team-empty { margin: 16px; padding: 18px; text-align: center; color: var(--gray-400); line-height: 1.45; }
  .team-empty strong { display: block; color: var(--gray-800); font-size: 0.95rem; margin-bottom: 4px; }
  .team-empty span { font-size: 0.78rem; }

  /* Team — Mitarbeiter-Akkordeon */
  .team-accordion-wrap { margin: 0 16px 12px; display: grid; gap: 12px; }
  .team-accordion-team {
    background: white;
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    padding: 12px;
  }
  .team-accordion-team-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .team-accordion-team-head strong { color: var(--gray-800); font-size: 0.92rem; }
  .team-accordion-team-head span { color: var(--gray-400); font-size: 0.72rem; font-weight: 600; }
  .team-accordion-list { margin-top: 10px; display: grid; gap: 8px; }
  .team-namen-liste { margin-top: 10px; display: grid; gap: 6px; }
  .team-namen-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--gray-50);
  }
  .team-namen-row strong { color: var(--gray-800); font-size: 0.84rem; font-weight: 600; }
  .team-datenschutz-hinweis {
    margin: 0 16px 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--gray-50);
    color: var(--gray-500);
    font-size: 0.75rem;
    line-height: 1.45;
  }
  .team-accordion-item {
    border: 1px solid var(--gray-100);
    border-radius: 12px;
    overflow: hidden;
    background: var(--gray-50, #f9fafb);
  }
  .team-accordion-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: white;
    cursor: pointer;
    text-align: left;
  }
  .team-accordion-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--primary-light); color: var(--primary-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800; flex-shrink: 0;
  }
  .team-accordion-meta { flex: 1; min-width: 0; }
  .team-accordion-meta strong { display: block; color: var(--gray-800); font-size: 0.84rem; }
  .team-accordion-meta small { display: block; color: var(--gray-400); font-size: 0.72rem; margin-top: 2px; }
  .team-accordion-toggle svg { flex-shrink: 0; color: var(--gray-400); transition: transform 0.2s ease; }
  .team-accordion-item.open .team-accordion-toggle svg { transform: rotate(180deg); }
  .team-accordion-body {
    padding: 8px 10px 10px;
    border-top: 1px solid var(--gray-100);
    background: white;
    max-height: 280px;
    overflow-y: auto;
  }
  #screen-team.active.team-ma-focus {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  #screen-team.active.team-ma-focus > .content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  #screen-team.active.team-ma-focus .team-screen-header {
    margin-bottom: 8px;
    padding: 14px;
  }
  #screen-team.active.team-ma-focus .team-stat-grid,
  #screen-team.active.team-ma-focus .section-title,
  #screen-team.active.team-ma-focus .team-legend-block {
    display: none;
  }
  #screen-team.active.team-ma-focus .team-accordion-wrap {
    flex: 1;
    min-height: 0;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
  }
  #screen-team.active.team-ma-focus .team-accordion-team {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #screen-team.active.team-ma-focus .team-accordion-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  #screen-team.active.team-ma-focus .team-accordion-item.open {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(51, 106, 210, 0.12);
  }
  #screen-team.active.team-ma-focus .team-accordion-item.open .team-accordion-body {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .team-day-row {
    display: grid;
    grid-template-columns: 22px 72px 1fr;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.74rem;
  }
  .team-day-row:last-child { border-bottom: none; }
  .team-day-mark {
    width: 22px; height: 22px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 800;
    background: var(--gray-100); color: var(--gray-400);
  }
  .team-day-row.ok .team-day-mark { background: #dcfce7; color: #15803d; }
  .team-day-row.missing .team-day-mark { background: #fee2e2; color: #b91c1c; }
  .team-day-row.away .team-day-mark { background: #dbeafe; color: #1d4ed8; }
  .team-day-row.sick .team-day-mark { background: #fef2f2; color: #dc2626; }
  .team-day-row.pending .team-day-mark { background: #fef3c7; color: #b45309; }
  .team-day-date { color: var(--gray-600); font-weight: 600; }
  .team-day-detail { color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .team-day-row-tappable { cursor: pointer; }
  .team-day-row-tappable:active { background: var(--gray-50, #f9fafb); }
  .team-tag-sheet-datum { font-size: 1rem; font-weight: 700; color: var(--gray-800); margin: 0 0 12px; }
  .team-tag-sheet-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid var(--gray-100);
    font-size: 0.82rem;
  }
  .team-tag-sheet-row span { color: var(--gray-400); }
  .team-tag-sheet-row strong { color: var(--gray-800); text-align: right; }
  .team-accordion-hinweise { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--gray-200); }
  .team-accordion-hinweise strong { display: block; font-size: 0.72rem; color: var(--warning); }
  .team-accordion-hinweise span { display: block; font-size: 0.7rem; color: var(--gray-400); }
  .team-accordion-actions { margin-top: 10px; display: grid; gap: 6px; }
  .team-accordion-foot { margin: 8px 0 0; font-size: 0.68rem; color: var(--gray-400); line-height: 1.4; }
  .team-action-btn {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--primary);
    color: white;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
  }
  .team-action-btn.secondary { background: var(--primary-light); color: var(--primary-dark); }
  .team-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .team-korrektur-form { margin-top: 14px; display: grid; gap: 10px; }
  .team-korrektur-form label { display: grid; gap: 4px; color: var(--gray-500); font-size: 0.72rem; font-weight: 700; }
  .team-korrektur-form input,
  .team-korrektur-form select,
  .team-korrektur-form textarea {
    width: 100%;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 9px 10px;
    color: var(--gray-800);
    font: inherit;
    background: white;
  }
  .team-legend-block { margin: 0 16px 16px; padding: 10px 12px; background: white; border-radius: var(--radius); }

  /* Team-Prüfung: KW-Akkordeon + Tageskarten */
  .team-kw-list { display: grid; gap: 8px; }
  .team-kw-wrap { display: grid; gap: 8px; }
  .team-kw-wrap [hidden] { display: none !important; }
  .team-kw-now {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 999px;
    padding: 2px 7px;
    vertical-align: middle;
  }
  .team-kw-item {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: var(--gray-50, #f9fafb);
    overflow: hidden;
  }
  .team-kw-item.is-current { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(51, 106, 210, 0.15); }
  .team-kw-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
  }
  .team-kw-meta { flex: 1; min-width: 0; }
  .team-kw-meta strong { display: block; color: var(--gray-800); font-size: 0.82rem; }
  .team-kw-meta small { display: block; color: var(--gray-400); font-size: 0.72rem; margin-top: 2px; }
  .team-kw-toggle svg { flex-shrink: 0; color: var(--gray-400); transition: transform 0.2s ease; }
  .team-kw-item.open .team-kw-toggle svg { transform: rotate(180deg); }
  .team-kw-body { padding: 0 8px 12px; }
  .team-kw-wochenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 4px 10px;
    font-size: 0.78rem;
    color: var(--gray-500);
    border-bottom: 1px dashed var(--gray-200);
    margin-bottom: 4px;
  }
  .team-kw-wochenkopf strong { color: var(--primary); font-size: 0.9rem; }
  .team-kw-actions { margin-top: 8px; display: grid; gap: 6px; }
  .team-tk-karte { margin: 8px 0 !important; box-shadow: none; border: 1px solid var(--gray-100); }
  .team-tk-abwesenheit,
  .team-tk-fehlend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 2px 4px;
    font-size: 0.85rem;
    color: var(--gray-600);
  }
  .team-korrektur-we .team-tag-sheet {
    margin-bottom: 4px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--gray-200);
  }
  .team-we-zeitwahl .we-zeit-btn { cursor: default; }
  .team-we-zeitwahl .we-zeit-input {
    border: none;
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-800);
    text-align: center;
    width: 100%;
    padding: 0;
    margin-top: 2px;
  }
  .team-we-zeitwahl .we-zeit-input:focus { outline: none; }

  /* ── SETTINGS SCREEN ── */
  .settings-profile {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    padding: 24px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: white;
  }

  .profile-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.4);
  }

  .profile-name { font-size: 1.1rem; font-weight: 700; }
  .profile-role { font-size: 0.8rem; opacity: 0.8; margin-top: 2px; }
  .profile-hours { font-size: 0.75rem; opacity: 0.7; margin-top: 4px; }

  .settings-section { margin: 12px 0; }

  .settings-item {
    background: white;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
  }

  .settings-item:first-child { border-radius: var(--radius) var(--radius) 0 0; margin-top: 0; }
  .settings-item:last-child { border-radius: 0 0 var(--radius) var(--radius); border-bottom: none; }

  .settings-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--primary-dark);
  }
  .settings-icon svg { width: 18px; height: 18px; }

  .settings-label { flex: 1; }
  .settings-title { font-size: 0.85rem; font-weight: 500; color: var(--gray-800); }
  .settings-sub { font-size: 0.75rem; color: var(--gray-400); margin-top: 1px; }
  .settings-arrow { color: var(--gray-400); font-size: 0.9rem; }

  .lang-flag {
    background: none;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 4px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--gray-600);
    font-weight: 500;
  }

  .lang-flag.active { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }

  /* ── ONBOARDING ── */
  .onboarding-screen {
    background: white;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
  }

  .onboarding-step {
    display: flex;
    gap: 6px;
    margin-bottom: 2rem;
  }

  .step-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--gray-200);
  }

  .step-dot.active { background: var(--primary); width: 24px; border-radius: 4px; }

  .onboarding-icon { color: var(--primary); margin-bottom: 1.5rem; }
  .onboarding-title { font-size: 1.3rem; font-weight: 700; color: var(--gray-800); margin-bottom: 0.5rem; text-align: center; }
  .onboarding-text { font-size: 0.85rem; color: var(--gray-400); text-align: center; line-height: 1.5; margin-bottom: 2rem; }

  .btn-primary {
    width: 100%;
    padding: 14px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
  }

  .feature-list { width: 100%; margin-bottom: 2rem; }

  .feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.85rem;
    color: var(--gray-600);
  }

  .feature-item:last-child { border-bottom: none; }

  .feature-check { color: var(--success); font-weight: bold; }

  /* Toast – immer im sichtbaren Viewport, über Modals/Overlays */
  .toast {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    max-width: 420px;
    margin: 0 auto;
    background: #1a1a1a;
    color: white;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 13000;
    pointer-events: none;
    line-height: 1.45;
    transition: opacity 0.3s ease;
  }

  /* ── RESPONSIVE (echtes Handy / PWA) ── */
  @media (max-width: 600px) {
    body { padding: 0; background: #fff; }
    .app-shell { max-width: none; width: 100%; }
    .phone {
      width: 100%;
      max-width: none;
      min-height: 100vh;
      min-height: 100dvh;
      border: none;
      border-radius: 0;
      box-shadow: none;
    }
    .modal-backdrop { border-radius: 0; }
  }

  /* Tablet: etwas breiter, weiterhin zentriert */
  @media (min-width: 601px) and (max-width: 1024px) {
    body { padding: 12px 0; }
    .app-shell { max-width: min(520px, 100vw); width: 100%; }
    .phone {
      width: 100%;
      max-width: min(520px, 100vw);
      min-height: min(900px, 100dvh);
      border-radius: 24px;
      border-width: 6px;
    }
    .modal-backdrop { border-radius: 24px; }
  }

  /* Große Bildschirme / TV: Phone-Rahmen etwas größer, zentriert */
  @media (min-width: 1025px) {
    .app-shell { max-width: 420px; }
    .phone { width: 420px; min-height: 740px; }
  }

  .desktop-hint {
    color: #555;
    font-size: 11px;
    text-align: center;
    margin-top: 6px;
  }

  /* ── ABSENCE MODAL (Bottom Sheet) ── */

  /* Backdrop: deckt den Phone-Container ab */
  .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 500;
    display: flex;
    align-items: flex-end;
    border-radius: 40px; /* gleich wie .phone */
    overflow: hidden;
    animation: backdropIn 0.2s ease;
  }

  @keyframes backdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Sheet: gleitet von unten hoch */
  .modal-sheet {
    width: 100%;
    background: white;
    border-radius: 20px 20px 0 0;
    padding: 0 0 24px;
    max-height: 88%;
    overflow-y: auto;
    animation: sheetUp 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }

  @keyframes sheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0);    }
  }

  /* Drag-Handle */
  .modal-handle {
    width: 36px;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    margin: 12px auto 4px;
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--gray-100);
  }

  .modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-800);
  }

  .modal-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--gray-100);
    color: var(--gray-600);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* Formularfelder */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .form-group label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--gray-600);
  }

  .form-group label .required-mark {
    color: var(--danger);
    margin-left: 2px;
  }

  .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--gray-800);
    background: var(--gray-50);
    box-sizing: border-box;
    transition: border-color 0.15s;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
  }

  /* Selects: natives Dropdown — sonst wirken sie wie Textfelder (appearance:none oben) */
  select.form-control {
    -webkit-appearance: menulist;
    appearance: auto;
    background-color: var(--gray-50);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
  }

  select.form-control:focus {
    background-color: white;
  }

  select.form-control.pa-ma-multiselect {
    min-height: 42px;
    overflow: hidden;
  }

  select.form-control.pa-ma-multiselect option {
    padding: 6px 0;
  }

  .form-control:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
  }

  .form-control.error {
    border-color: var(--danger);
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .form-error {
    font-size: 0.72rem;
    color: var(--danger);
    margin-top: 2px;
  }

  .form-days-hint {
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 500;
    text-align: right;
    margin-top: -8px;
  }

  /* AU-Upload Bereich (erscheint nur bei Krank) */
  .au-upload-area {
    border: 1.5px dashed var(--gray-200);
    border-radius: var(--radius);
    padding: 14px;
    text-align: center;
    background: var(--gray-50);
    cursor: pointer;
    transition: border-color 0.15s;
  }

  .au-upload-area:hover { border-color: var(--primary); }

  .au-upload-label {
    font-size: 0.8rem;
    color: var(--gray-400);
    margin-top: 6px;
    display: block;
  }

  .au-file-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--primary-light);
    border-radius: var(--radius);
    font-size: 0.78rem;
    color: var(--primary-dark);
    margin-top: 8px;
  }

  .au-file-pill .remove {
    margin-left: auto;
    cursor: pointer;
    color: var(--gray-400);
    font-size: 1rem;
    line-height: 1;
  }

  /* Aktions-Buttons im Modal */
  .modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 16px;
    margin-top: 4px;
  }

  .btn-modal-cancel {
    padding: 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    background: white;
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
  }

  .btn-modal-save {
    padding: 12px;
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
  }

  .btn-modal-save:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* ── Update-Banner (neue App-Version verfügbar) ─────────── */
  #update-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: var(--primary);
    color: white;
    font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  #update-banner button {
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    background: white;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
  }

  /* ── PWA: iOS Install-Hinweis ── */
  .pwa-ios-hint {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .pwa-ios-hint-card {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem 1.2rem 1.1rem;
    text-align: center;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  }

  .pwa-ios-hint-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #0a0a0a;
    object-fit: contain;
    margin: 0 auto 10px;
    display: block;
  }

  .pwa-ios-hint-card h3 {
    margin: 0 0 10px;
    font-size: 1rem;
    color: var(--gray-800);
  }

  .pwa-ios-hint-steps {
    text-align: left;
    margin: 0 0 14px;
    padding-left: 1.2rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--gray-600);
  }

  .pwa-ios-hint-ok {
    width: 100%;
    border: none;
    border-radius: 10px;
    padding: 12px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
  }

  /* ═══════════════════════════════════════════════════════════
     NEUE ZEITEINGABE (zeiteingabe.js) – Tageskarten + Editor
     Eingebaut 06.07.2026 (Umsetzungsplan Tageskarten/Wheel Picker)
  ═══════════════════════════════════════════════════════════ */

  :root {
    --accent: #f97316;        /* Orange: Haupt-Speichern-Button */
    --accent-dark: #ea580c;
  }

  /* ── Tageskarte ── */
  .tk-karte {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin: 12px 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  }

  .tk-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--gray-100);
  }

  .tk-tag { font-weight: 600; font-size: 0.92rem; color: var(--gray-800); }
  .tk-summe { font-weight: 700; font-size: 0.92rem; color: var(--gray-400); }
  .tk-summe.hat-zeit { color: var(--primary); }

  .tk-segment {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--gray-100);
    background: white;
    padding: 12px 16px;
    cursor: pointer;
    font-family: inherit;
  }
  .tk-segment:active { background: var(--gray-100); }

  .tk-seg-zeit {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .tk-seg-uhr { font-size: 1.15rem; font-weight: 700; color: var(--gray-800); }
  .tk-seg-netto { font-size: 0.95rem; font-weight: 600; color: var(--primary); }

  .tk-seg-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
  }
  .tk-chip {
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
  }
  .tk-seg-ort { font-size: 0.82rem; color: var(--gray-600); }
  .tk-ohne { color: var(--gray-400); }
  .tk-fehlt { color: var(--danger); font-weight: 600; }
  .tk-seg-pause { font-size: 0.75rem; color: var(--gray-400); margin-top: 4px; }

  .tk-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }

  .tk-btn-neu {
    flex: 1 1 100%;
    border: 1.5px dashed var(--gray-200);
    border-radius: var(--radius);
    background: white;
    color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 12px;
    cursor: pointer;
  }
  .tk-btn-neu.gross { padding: 20px; font-size: 1.05rem; }
  .tk-btn-neu:active { background: var(--primary-light); }

  .tk-btn-sek {
    flex: 1;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 9px 8px;
    cursor: pointer;
    white-space: nowrap;
  }
  .tk-btn-sek.einfuegen { background: var(--primary-light); color: var(--primary); font-weight: 600; }

  /* ── Live-Zeiterfassung (Start/Pause/Feierabend) ── */
  .tk-btn-start {
    flex: 1 1 100%;
    border: none;
    border-radius: var(--radius);
    background: var(--success);
    color: white;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 16px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
  }
  .tk-btn-start:active { background: #16a34a; }

  .tk-live {
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-100);
    background: linear-gradient(180deg, #f0fdf4 0%, white 100%);
  }
  .tk-live-kopf {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .tk-live-status {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--success);
  }
  .tk-live-status.pausiert { color: var(--warning); }
  .tk-live-uhr {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gray-800);
    font-variant-numeric: tabular-nums;
  }
  .tk-live-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
  }
  .tk-live-warnung {
    margin-top: 8px;
    background: #fef3c7;
    color: #b45309;
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 0.8rem;
    font-weight: 600;
  }
  .tk-live-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
  }
  .tk-live-btn {
    border: none;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 14px;
    cursor: pointer;
  }
  .tk-live-btn.pause { background: var(--gray-100); color: var(--gray-800); border: 1.5px solid var(--gray-200); }
  .tk-live-btn.pause:active { background: var(--gray-200); }
  .tk-live-btn.feierabend { background: var(--accent); color: white; box-shadow: 0 4px 14px rgba(249, 115, 22, 0.3); }
  .tk-live-btn.feierabend:active { background: var(--accent-dark); }
  .tk-live-verwerfen {
    display: block;
    margin: 10px auto 0;
    border: none;
    background: transparent;
    color: var(--gray-400);
    font-size: 0.75rem;
    text-decoration: underline;
    cursor: pointer;
  }

  /* ── Editor-Sheet ── */
  .we-sheet { max-height: 92%; }
  .we-sheet--flex {
    display: flex;
    flex-direction: column;
    max-height: min(92dvh, calc(100vh - env(safe-area-inset-top, 0px) - 8px));
    overflow: hidden;
    padding-bottom: 0;
  }
  .we-sheet-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .we-sheet--flex .we-sheet-footer {
    flex-shrink: 0;
    margin: 0;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--gray-100);
    background: white;
    position: sticky;
    bottom: 0;
    z-index: 2;
  }
  .team-korrektur-sheet.we-sheet--flex {
    max-height: min(94dvh, calc(100vh - env(safe-area-inset-top, 0px) - 4px));
  }
  .we-body { gap: 16px; }

  .we-zeitwahl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .we-zeit-btn {
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: white;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
  }
  .we-zeit-btn.aktiv { border-color: var(--primary); background: var(--primary-light); }
  .we-zeit-label { display: block; font-size: 0.75rem; color: var(--gray-400); font-weight: 500; }
  .we-zeit-wert { display: block; font-size: 1.7rem; font-weight: 700; color: var(--gray-800); font-variant-numeric: tabular-nums; }
  .we-zeit-btn.aktiv .we-zeit-wert { color: var(--primary); }

  /* ── Wheel Picker ── */
  .we-wheel-bereich { border: 1px solid var(--gray-100); border-radius: var(--radius-lg); padding: 8px; }
  .we-wheel-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    position: relative;
  }
  .we-wheel {
    width: 88px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .we-wheel::-webkit-scrollbar { display: none; }
  .we-wheel-liste { display: flex; flex-direction: column; }
  .we-wheel-item {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-400);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
  }
  .we-wheel-item.aktiv { color: var(--gray-800); font-weight: 700; font-size: 1.7rem; }
  .we-wheel-highlight {
    position: absolute;
    left: 4px; right: 4px;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    border-top: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    border-radius: 6px;
    pointer-events: none;
  }
  .we-wheel-doppelpunkt { font-size: 1.6rem; font-weight: 700; color: var(--gray-800); }

  .we-feinjustierung {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
  }
  .we-min-btn {
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    background: white;
    color: var(--gray-800);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px;
    cursor: pointer;
  }
  .we-min-btn:active { background: var(--gray-100); }

  /* ── Abschnitte / Labels ── */
  .we-abschnitt { display: flex; flex-direction: column; gap: 8px; }
  .we-label { font-size: 0.8rem; font-weight: 600; color: var(--gray-600); }
  .we-pflicht { color: var(--danger); }
  .we-optional { color: var(--gray-400); font-weight: 400; }

  /* ── Pause-Schnellwahl ── */
  .we-pause-reihe { display: flex; gap: 8px; }
  .we-pause-btn {
    flex: 1;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    background: white;
    color: var(--gray-800);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 12px 0;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
  }
  .we-pause-btn.aktiv { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }

  /* ── Tätigkeits-Chips ── */
  .we-chip-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
  .we-chip {
    border: 1.5px solid var(--gray-200);
    border-radius: 999px;
    background: white;
    color: var(--gray-800);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 10px 14px;
    cursor: pointer;
  }
  .we-chip.aktiv { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }

  /* ── Baustellen-Karte ── */
  .we-baustelle-karte {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: white;
    padding: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
  }
  .we-baustelle-karte.leer { border-style: dashed; background: var(--gray-100); }
  .we-baus-farbe { width: 8px; align-self: stretch; border-radius: 4px; flex-shrink: 0; }
  .we-baus-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
  .we-baus-name { font-size: 0.95rem; font-weight: 600; color: var(--gray-800); }
  .we-baus-name.leer-text { color: var(--gray-400); }
  .we-baus-adresse { font-size: 0.78rem; color: var(--gray-400); }
  .we-baus-gps {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 600;
    background: #fef3c7;
    color: #b45309;
    border-radius: 999px;
    padding: 2px 8px;
    margin-top: 2px;
  }
  .we-baus-pfeil { color: #d4d4d4; font-size: 1.4rem; }

  /* ── Baustellen-Auswahl-Overlay ── */
  .we-baus-overlay {
    position: fixed;
    inset: 0;
    background: white;
    z-index: 12500;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden;
  }
  .we-baus-overlay-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
    border-bottom: 1px solid var(--gray-100);
    font-weight: 600;
    color: var(--gray-800);
    flex-shrink: 0;
  }
  .we-baus-suche-wrap {
    flex-shrink: 0;
    padding: 0 12px 8px;
  }
  .we-baus-suche {
    width: 100%;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 11px 12px;
    font-size: 0.95rem;
    font-family: inherit;
  }
  .we-baus-suche:focus {
    outline: none;
    border-color: var(--primary);
  }
  .we-baus-liste {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px calc(24px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .we-baus-leer {
    padding: 24px 12px;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.9rem;
  }
  .we-baus-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: white;
    padding: 12px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
  }
  .we-baus-item:active { background: var(--primary-light); }

  /* ── Textfelder / Netto / Fehler ── */
  .we-text-input {
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 12px;
    font-size: 0.9rem;
    font-family: inherit;
    width: 100%;
  }
  .we-text-input:focus { outline: none; border-color: var(--primary); }

  .we-netto {
    text-align: center;
    font-size: 1rem;
    color: var(--gray-600);
    padding: 6px 0 0;
  }
  .we-netto strong { color: var(--primary); font-size: 1.25rem; }

  .we-fehler {
    display: none;
    background: #fef2f2;
    color: #dc2626;
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 0.85rem;
    line-height: 1.45;
  }

  /* ── Editor-Aktionen ── */
  .we-aktionen { grid-template-columns: auto 1fr; }
  .we-btn-loeschen {
    border: 1.5px solid #fecaca;
    border-radius: var(--radius);
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 14px 16px;
    cursor: pointer;
  }
  .we-btn-speichern {
    position: relative;
    border: none;
    border-radius: var(--radius);
    background: var(--accent);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    padding: 14px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    grid-column: -2 / -1;
  }
  .we-btn-speichern:only-child { grid-column: 1 / -1; }
  .we-btn-speichern:active { background: var(--accent-dark); }
  .we-btn-speichern:disabled { opacity: 0.75; cursor: wait; }

  .we-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: weDrehen 0.7s linear infinite;
  }
  .we-btn-speichern.laeuft .we-spinner { display: inline-block; }

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

  /* ── Auf-Tage-anwenden ── */
  .we-anwenden-hinweis { font-size: 0.85rem; color: var(--gray-600); line-height: 1.5; }
  .we-tage-liste { display: flex; flex-direction: column; gap: 8px; }
  .we-tag-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 12px;
    cursor: pointer;
  }
  .we-tag-check { width: 22px; height: 22px; accent-color: var(--primary); flex-shrink: 0; }
  .we-tag-name { flex: 1; font-size: 0.92rem; font-weight: 500; color: var(--gray-800); }
  .we-tag-belegt {
    font-size: 0.7rem;
    font-weight: 600;
    background: #fef3c7;
    color: #b45309;
    border-radius: 999px;
    padding: 3px 8px;
  }

  /* ── Bestätigungs-Dialog ── */
  .we-confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 12600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-radius: 0;
    animation: backdropIn 0.15s ease;
  }
  .we-confirm {
    background: white;
    border-radius: var(--radius-lg);
    padding: 20px 16px 16px;
    width: 100%;
    max-width: 300px;
    box-shadow: var(--shadow-lg);
  }
  .we-confirm-titel { font-size: 1rem; font-weight: 700; color: var(--gray-800); text-align: center; }
  .we-confirm-text { font-size: 0.85rem; color: var(--gray-600); text-align: center; margin: 8px 0 16px; line-height: 1.5; }
  .we-confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .we-btn-abbrechen {
    padding: 12px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius);
    background: white;
    color: var(--gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
  }
  .we-btn-ok {
    padding: 12px;
    border: none;
    border-radius: var(--radius);
    background: var(--primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
  }

  /* ── Projekt anlegen (PWA) ── */
  .pa-gps-btn {
    width: 100%;
    margin: 4px 0 12px;
    padding: 11px 14px;
    border: 1.5px dashed var(--primary);
    border-radius: var(--radius);
    background: var(--primary-light);
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }
  .pa-gps-btn:disabled { opacity: 0.65; cursor: wait; }

  /* Eingabe + kompaktes Mikrofon nebeneinander */
  .pa-field-mic-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pa-field-mic-row .form-control { flex: 1; min-width: 0; }
  .pa-field-mic-row--area { align-items: flex-start; }
  .pa-field-mic-row--area .pa-mic-icon { margin-top: 6px; }

  .pa-mic-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: #eef2ff;
    color: #4338ca;
    cursor: pointer;
  }
  .pa-mic-icon.pa-mic-active {
    background: #fee2e2;
    color: #b91c1c;
  }

  .pa-ma-hint {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.4;
  }

  /* Team / Mitarbeiter — Chip-Auswahl */
  .pa-pick-section {
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--gray-200, #e2e8f0);
    border-radius: 12px;
    background: #fff;
  }
  .pa-pick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
  }
  .pa-pick-head label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800, #1e293b);
    margin: 0;
  }
  .pa-pick-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary, #336ad2);
    background: var(--primary-light, #eef2ff);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
  }
  .pa-pick-hint {
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.35;
  }
  .pa-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .pa-pick-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1.5px solid var(--gray-200, #e2e8f0);
    border-radius: 999px;
    background: var(--gray-50, #f8fafc);
    color: var(--gray-700, #334155);
    font-size: 0.84rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .pa-pick-chip:active {
    transform: scale(0.98);
  }
  .pa-pick-chip.is-on {
    border-color: var(--primary, #336ad2);
    background: var(--primary-light, #eef2ff);
    color: var(--primary, #336ad2);
    box-shadow: 0 0 0 1px rgba(51, 106, 210, 0.12);
  }
  .pa-pick-chip-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--pa-chip-color, #336ad2);
  }
  .pa-pick-chip-label {
    line-height: 1.2;
    text-align: left;
  }
  .pa-pick-empty {
    margin: 0;
    font-size: 0.84rem;
    color: #94a3b8;
    font-style: italic;
    padding: 4px 2px;
  }

  /* Block D: Projekt-Abnahme vor Ort */
  .btn-projekt-abnahme {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: var(--primary);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }
  .btn-projekt-abnahme:active { opacity: 0.9; }

  .btn-projekt-aufmass {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: #0d9488;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }
  .btn-projekt-aufmass:active { opacity: 0.9; }

  .project-aufmass-hinweis {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.78rem;
  }

  .project-card-aufmass-hint {
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #0f766e;
    line-height: 1.35;
  }

  .project-aufmass-pill {
    border: none;
    font-family: inherit;
    cursor: pointer;
  }
  .project-aufmass-pill:active { opacity: 0.85; }

  .project-aufmass-block {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #99f6e4;
    background: linear-gradient(180deg, #f0fdfa 0%, #ecfdf5 100%);
  }

  .project-aufmass-block-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f766e;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .project-aufmass-offline-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ccfbf1;
    color: #047857;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .project-aufmass-synced-badge {
    background: #dbeafe;
    color: #1d4ed8;
  }

  .ba-sync-btn {
    margin-top: 8px;
    background: #0f766e;
  }

  .ba-sync-erfolg {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.85rem;
    font-weight: 600;
  }

  .project-aufmass-block-stats {
    margin-top: 6px;
    font-size: 0.84rem;
    color: #115e59;
    line-height: 1.4;
  }

  .project-aufmass-block-meta {
    margin-top: 4px;
    font-size: 0.78rem;
    color: #047857;
  }

  .project-aufmass-block-lead {
    margin: 8px 0 12px;
    font-size: 0.8rem;
    color: #047857;
    line-height: 1.45;
  }

  .project-aufmass-sync-hinweis {
    margin: 8px 0 12px;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
  }

  .project-aufmass-block .btn-projekt-aufmass {
    margin-top: 0;
  }

  .project-abschluss-hinweis {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .project-auftrag-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
  }

  .btn-auftrag-status {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }

  .btn-auftrag-start {
    background: #0f766e;
    color: #fff;
  }

  .btn-auftrag-erledigt {
    background: var(--primary);
    color: #fff;
  }

  .btn-auftrag-status:active { opacity: 0.9; }
  .btn-auftrag-status:disabled {
    opacity: 0.65;
    cursor: wait;
  }

  .project-auftrag-hinweis {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .pa-abschluss-progress {
    padding: 0 16px 8px;
    font-size: 0.8rem;
    color: var(--gray-500);
  }

  .pa-abschluss-lead {
    margin: 0 0 12px;
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.45;
  }

  .pa-abschluss-foto-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }

  .pa-abschluss-foto-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: var(--gray-100);
  }

  .pa-abschluss-foto-thumb button {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }

  .pa-signature-wrap {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
  }

  .pa-signature-canvas {
    display: block;
    width: 100%;
    height: 140px;
    touch-action: none;
    cursor: crosshair;
  }

  .pa-signature-clear {
    margin-top: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--primary);
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
  }

  .pa-abschluss-summary {
    padding: 12px;
    border-radius: 12px;
    background: var(--gray-50);
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .pa-abschluss-summary p { margin: 0 0 8px; }
  .pa-abschluss-hinweis-klein {
    margin: 0;
    font-size: 0.8rem;
    color: var(--gray-500);
  }

  .pa-abschluss-actions .btn-modal-cancel {
    visibility: visible;
  }

  /* ── BESTANDSAUFNAHME / AUFMASS (Phase 1) ── */
  .ba-cta-card {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    box-shadow: 0 8px 22px rgba(13, 148, 136, 0.22);
  }

  #screen-bestandsaufnahme .app-header {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 8px;
  }

  .ba-header-back {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
  }

  .ba-header-title { text-align: center; }

  .ba-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--gray-500);
    line-height: 1.55;
    font-size: 0.85rem;
  }

  .ba-empty strong {
    display: block;
    color: var(--gray-800);
    font-size: 1rem;
    margin-bottom: 8px;
  }

  .ba-empty .ba-zurueck-projekte {
    margin-top: 16px;
    width: 100%;
  }

  .ba-projekt-meta {
    font-size: 0.82rem;
    color: var(--gray-500);
    margin: -4px 0 12px;
    line-height: 1.4;
  }

  .ba-kunde-section {
    margin-bottom: 16px;
  }

  .ba-kunde-hinweis {
    font-size: 0.78rem;
    color: var(--gray-500);
    margin: 0 0 10px;
    line-height: 1.4;
  }

  .ba-kunde-hinweis--locked {
    color: #0f766e;
  }

  .ba-kunde-modus {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }

  .ba-kunde-modus-opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    background: var(--gray-50);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    user-select: none;
  }

  .ba-kunde-modus-opt:has(input:checked) {
    border-color: #0d9488;
    background: #ecfdf5;
    color: #0f766e;
  }

  .ba-kunde-modus-opt input {
    margin: 0;
    accent-color: #0d9488;
  }

  .ba-kunde-subhint {
    font-size: 0.72rem;
    color: var(--gray-500);
    margin: -4px 0 10px;
    line-height: 1.35;
  }

  .ba-kunde-felder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
  }

  .ba-kunde-anrede-wrap,
  .ba-kunde-adresse-wrap {
    grid-column: 1 / -1;
  }

  @media (max-width: 480px) {
    .ba-kunde-felder {
      grid-template-columns: 1fr;
    }
  }

  .ba-zurueck-projekte-inline {
    width: 100%;
    margin-top: 10px;
    text-align: center;
    justify-content: center;
  }

  .ba-loeschen-inline {
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border-radius: 10px;
  }

  .ba-intro { padding: 0 0 8px; }
  .ba-intro-pack { font-size: 0.72rem; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 6px; }
  .ba-intro-text { font-size: 0.82rem; color: var(--gray-500); margin: 0; line-height: 1.45; }

  .ba-start-btn { width: calc(100% - 32px); margin: 8px 16px 16px; }

  .ba-draft-list { padding: 0 16px 24px; }
  .ba-draft-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
  .ba-draft-card {
    flex: 1;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    cursor: pointer;
  }

  .ba-draft-title { font-weight: 700; font-size: 0.92rem; color: var(--gray-900); }
  .ba-draft-sub { font-size: 0.74rem; color: var(--gray-500); margin-top: 3px; }
  .ba-draft-open { font-size: 0.72rem; color: var(--primary); font-weight: 700; }
  .ba-draft-delete {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
    border-radius: 10px;
    padding: 0 10px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
  }

  .ba-form, .ba-session, .ba-station-editor { padding: 12px 16px 24px; }
  .ba-form-hint, .ba-demo-hinweis {
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.45;
    margin: 0 0 12px;
  }

  .ba-section { margin-bottom: 16px; }
  .ba-section-title { font-size: 0.82rem; font-weight: 700; color: var(--gray-700); margin-bottom: 8px; }
  .ba-count {
    display: inline-block;
    min-width: 18px;
    text-align: center;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--gray-100);
    font-size: 0.72rem;
    margin-left: 4px;
  }

  .ba-station-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
  .ba-station-empty {
    padding: 14px;
    border-radius: 10px;
    background: var(--gray-50);
    color: var(--gray-500);
    font-size: 0.8rem;
    text-align: center;
  }

  .ba-station-card {
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
    display: grid;
    grid-template-columns: 28px 1fr 16px;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    text-align: left;
  }

  .ba-station-num {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
  }

  .ba-station-title { font-weight: 700; font-size: 0.88rem; }
  .ba-station-sub { font-size: 0.72rem; color: var(--gray-500); margin-top: 2px; }
  .ba-station-chevron { color: var(--gray-400); font-size: 1.1rem; }

  .ba-add-station {
    width: 100%;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px dashed var(--gray-300);
    border-radius: 12px;
    background: var(--gray-50);
    color: var(--primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
  }

  .ba-quick-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .ba-quick-chip {
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    color: var(--gray-700);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
  }

  .ba-quick-chip.ba-quick-active {
    border-color: var(--primary);
    background: rgba(0, 102, 204, 0.08);
    color: var(--primary);
  }

  .ba-foto-row { display: flex; gap: 8px; align-items: center; }
  .ba-foto-input { display: none; }
  .ba-foto-btn { flex: 1; text-align: center; }

  .ba-foto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
  }

  .ba-foto-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
  }

  .ba-foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ba-foto-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    line-height: 1;
  }

  .ba-field-hidden { display: none !important; }

  .ba-field-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: 8px;
  }

  .ba-multiselect-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ba-multiselect-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    background: var(--gray-50);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
    cursor: pointer;
    user-select: none;
  }

  .ba-multiselect-chip:has(input:checked) {
    border-color: #0d9488;
    background: #ecfdf5;
    color: #0f766e;
  }

  .ba-multiselect-chip input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #0d9488;
  }

  .ba-field-section {
    margin-top: 14px;
    margin-bottom: 4px;
  }

  .ba-collapsible {
    margin-top: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }

  .ba-collapsible-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    background: #f8fafc;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--gray-800);
    cursor: pointer;
  }

  .ba-collapsible-chevron {
    color: #0f766e;
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
  }

  .ba-collapsible-label {
    flex: 1;
  }

  .ba-collapsible-badge {
    font-size: 0.68rem;
    font-weight: 700;
    color: #0f766e;
    background: #ecfdf5;
    border: 1px solid #99f6e4;
    border-radius: 999px;
    padding: 2px 8px;
  }

  .ba-collapsible-body {
    padding: 12px 14px 14px;
    border-top: 1px solid var(--gray-200);
  }

  .ba-collapsible-body--closed {
    display: none;
  }

  .ba-section-title--inline {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-700);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--gray-200);
  }

  .ba-item-instance {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: #f8fafc;
  }

  .ba-item-instance-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f766e;
    margin-bottom: 10px;
  }

  .ba-item-dim-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
  }

  .ba-item-fields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ba-item-field {
    min-width: 0;
  }

  .ba-item-field--full {
    grid-column: 1 / -1;
  }

  .ba-item-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-600);
    margin-bottom: 4px;
  }

  .ba-item-field .form-control {
    font-size: 0.85rem;
    padding: 8px 10px;
  }

  @media (max-width: 480px) {
    .ba-item-dim-row,
    .ba-item-fields-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Number-Wheel Aufmaß — nutzt .we-wheel aus Meine Zeiten */
  .nw-compact-bereich {
    padding: 4px 6px;
    margin: 4px 0;
    border-radius: 10px;
  }

  .nw-compact-bereich .we-wheel-wrap {
    justify-content: flex-start;
  }

  .nw-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .nw-slot .we-wheel {
    margin: 0 auto;
  }

  /* Position-Editor — kompakt für Handy */
  .ba-pe-root { margin-top: 4px; }

  .ba-pe-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 6px;
  }

  .ba-pe-hint {
    font-size: 0.74rem;
    color: var(--gray-500);
    margin: 0 0 8px;
  }

  .ba-pe-kat {
    margin-bottom: 8px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }

  .ba-pe-kat-toggle {
    padding: 10px 12px;
    background: #f8fafc;
  }

  .ba-pe-kat-body {
    padding: 8px 10px 10px;
    border-top: 1px solid var(--gray-200);
  }

  .ba-pe-chips {
    margin-bottom: 6px;
  }

  .ba-pe-add-chip {
    padding: 4px 8px;
    font-size: 0.68rem;
    border-color: #0d9488;
    color: #0f766e;
    background: #ecfdf5;
  }

  .ba-pe-pos {
    margin-top: 6px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
  }

  .ba-pe-pos-zeile {
    display: grid;
    grid-template-columns: 1fr auto auto 28px 28px;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
  }

  .ba-pe-pos-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--gray-800);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ba-pe-menge-slot {
    flex-shrink: 0;
  }

  .ba-pe-menge-slot .we-wheel-bereich,
  .ba-pe-dim-slot .we-wheel-bereich {
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
  }

  .ba-pe-einheit {
    width: 58px;
    min-width: 58px;
    font-size: 0.72rem;
    padding: 4px 4px;
  }

  .ba-pe-details-btn,
  .ba-pe-remove {
    width: 28px;
    height: 28px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--gray-50);
    color: var(--gray-600);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .ba-pe-remove {
    color: #b91c1c;
    font-size: 1.1rem;
    line-height: 1;
  }

  .ba-pe-pos-details {
    padding: 6px 8px 8px;
    border-top: 1px solid var(--gray-100);
    background: #f8fafc;
  }

  .ba-pe-dim-row {
    display: flex;
    gap: 6px;
    justify-content: space-between;
    margin-bottom: 6px;
  }

  .ba-pe-dim {
    flex: 1;
    min-width: 0;
    text-align: center;
  }

  .ba-pe-dim-lbl {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 2px;
  }

  .ba-pe-extra-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .ba-pe-zustand,
  .ba-pe-material {
    font-size: 0.78rem;
    padding: 6px 8px;
  }

  .ba-pe-empty {
    font-size: 0.74rem;
    color: var(--gray-500);
    padding: 6px 0;
    text-align: center;
  }

  @media (max-width: 380px) {
    .ba-pe-pos-zeile {
      grid-template-columns: 1fr auto auto 26px 26px;
    }
    .ba-pe-einheit {
      width: 52px;
      min-width: 52px;
    }
  }