/* ===========================================================================
   legacy.css — gemeinsame Komponenten-Stile aus der Zeit vor dem Design-System
   ===========================================================================
   Diese Regeln lagen als 483-zeiliger <style>-Block IN index.html. Als die
   Einstellungen eine eigene Seite bekamen, waeren ihre Formulare dort ohne
   Stil dagestanden — die Panels haengen an .field-label, .btn, .status,
   .table-wrap und Verwandten.

   Bewusst UNVERAENDERT uebernommen: Modul B verschiebt die Einstellungen,
   es gestaltet sie nicht um. Das Aufloesen dieser Regeln zugunsten der
   ds-*-Komponenten gehoert in Phase 9, Modul fuer Modul.
=========================================================================== */
/* Variable names kept identical to the original theme (--navy-*, --gold, --ink, --line, ...)
     so every existing rule and inline style below re-themes automatically. Only the VALUES
     change: light mode by default, dark mode via [data-theme="dark"] on <html> (see theme.js). */
  :root{
    --navy-950:#f6f7f9; --navy-900:#ffffff; --navy-800:#ffffff;
    --navy-700:#f1f2f5; --navy-600:#e8eaee; --gold:#0D6EFD; --gold-soft:#0b5ed7;
    --ink:#171a21; --ink-dim:#5b6172; --line:#e4e6ec;
    --lexmark:#1f7ae0; --toshiba:#e0334f; --canon:#e85a2b; --ricoh:#1fae8e;
    --sharp:#9b6bd6; --hp:#2fb8e0; --graphax:#e0a82f; --xerox:#5c6bc0;
    --danger:#c22437; --danger-bg:#fdeaec; --ok:#178a4c;
    --shadow-card:0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
    --on-accent:#ffffff;
  }
  [data-theme="dark"]{
    --navy-950:#0e1015; --navy-900:#161922; --navy-800:#161922;
    --navy-700:#1e222c; --navy-600:#272c38; --gold:#3b8bff; --gold-soft:#5b9bf5;
    --ink:#eef0f5; --ink-dim:#a3aabd; --line:#2b3040;
    --danger:#ff6b78; --danger-bg:rgba(255,107,120,.14); --ok:#3ecb7e;
    --shadow-card:0 1px 2px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--navy-950);
    color:var(--ink); font-family:'Inter','Segoe UI',Arial,sans-serif; -webkit-font-smoothing:antialiased;
    transition:background .15s ease, color .15s ease;}
  .mono{font-family:'IBM Plex Mono','SF Mono',Consolas,monospace;}
  header.top{padding:24px 20px 16px;border-bottom:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;}
  .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold);margin:0 0 6px;font-weight:600;}
  h1{margin:0;font-size:23px;font-weight:800;letter-spacing:-0.015em;}
  .sub{margin:6px 0 0;color:var(--ink-dim);font-size:15.5px;}
  .user-bar{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-dim);}
  .user-bar .badge-role{background:var(--navy-700);border:1px solid var(--line);border-radius:99px;
    padding:5px 12px;color:var(--gold);font-weight:700;}

  .step{margin:18px 20px;background:var(--navy-800);border:1px solid var(--line);
    border-radius:16px;overflow:hidden;box-shadow:var(--shadow-card);
    transition:box-shadow .18s ease, border-color .18s ease;}
  .step:hover{box-shadow:0 4px 18px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);}
  .step-head{padding:15px 20px;display:flex;align-items:center;gap:12px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(180deg, rgba(127,140,180,.06), rgba(127,140,180,0));}
  .step-num{width:28px;height:28px;border-radius:9px;background:var(--gold);color:#fff;
    font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
    box-shadow:0 1px 2px rgba(0,0,0,.12);}
  .step-title{font-size:16.5px;font-weight:700;letter-spacing:-.015em;}
  .step-body{padding:20px;}

  .tabs{display:flex;gap:8px;margin-bottom:14px;}
  .tab{flex:1;text-align:center;padding:10px;border-radius:10px;background:var(--navy-700);
    color:var(--ink-dim);font-size:15px;font-weight:700;cursor:pointer;border:1px solid var(--line);
    transition:background .12s,color .12s;}
  .tab.active{background:var(--gold);color:#fff;border-color:var(--gold);}
  .tabpanel{display:none;}
  .tabpanel.active{display:block;}

  input[type=file]{display:none;}
  .upload-zone{border:1.5px dashed var(--line);border-radius:10px;padding:24px;text-align:center;
    cursor:pointer;color:var(--ink-dim);font-size:15.5px;transition:border-color .15s;}
  .upload-zone:hover{border-color:var(--gold-soft);}
  .upload-zone.has-img{padding:10px;}
  .preview-thumb{max-width:100%;max-height:220px;border-radius:8px;display:block;margin:0 auto;}

  textarea{width:100%;min-height:140px;background:var(--navy-900);border:1px solid var(--line);
    color:var(--ink);border-radius:8px;padding:10px;font-size:15px;font-family:inherit;resize:vertical;}

  input, select{font-family:inherit;}
  .btn{background:var(--gold);color:var(--on-accent);border:none;border-radius:8px;
    padding:10px 16px;font-weight:700;font-size:15.5px;cursor:pointer;font-family:inherit;}
  .btn:hover{background:var(--gold-soft);}
  .btn:disabled{opacity:.4;cursor:not-allowed;}
  .btn.secondary{background:var(--navy-600);color:var(--ink);}
  .btn.small{padding:5px 10px;font-size:14.5px;border-radius:6px;}
  .btn.ghost{background:transparent;color:var(--ink-dim);border:1px solid var(--line);}
  .btn-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}

  .status{font-size:15px;color:var(--ink-dim);margin-top:10px;}
  .status.err{color:var(--danger);}
  .status.ok{color:var(--ok);}
  .spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--navy-600);
    border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite;
    vertical-align:middle;margin-right:6px;}
  @keyframes spin{to{transform:rotate(360deg);}}

  table{width:100%;border-collapse:collapse;font-size:14.5px;}
  th{text-align:left;color:var(--ink-dim);font-weight:600;padding:6px 5px;border-bottom:1px solid var(--line);
    text-transform:uppercase;font-size:13px;letter-spacing:.04em;}
  td{padding:4px 5px;border-bottom:1px solid var(--navy-700);}
  td input, td select{width:100%;background:var(--navy-900);border:1px solid var(--line);color:var(--ink);
    border-radius:5px;padding:6px 7px;font-size:15px;font-family:inherit;}
  .table-wrap{overflow-x:auto;}
  /* Auftrags-Tabelle: Mindestbreite, damit die vielen Spalten nicht zusammen-
     gequetscht werden — .table-wrap scrollt horizontal statt Felder zu stauchen.
     Schmale Felder (PLZ/Von/Bis) behalten ihre Inline-Breite. */
  #ordersTable{min-width:1240px;}
  .del-row{color:var(--danger);cursor:pointer;font-size:16px;background:none;border:none;}
  /* Lift/Treppe/Eng steuern nur die Tragmannschaft-Logik -- irrelevant und
     verwirrend fuer Firmen, die dieses Feature deaktiviert haben (z.B.
     Dachdecker/Elektriker, siehe companies.tragmannschaft_enabled). */
  #ordersTable.tm-col-hidden .tm-col{display:none;}
  /* Pill-Radiogruppe fuer Lift/Treppe -- ersetzt das winzige <select>, das auf
     Mobile schwer zu treffen war und alle 3 Werte (inkl. "Unbekannt") gleich
     behandelte. Radios statt Dropdown: alle Optionen sofort sichtbar, groessere
     Toch-Ziele, kein Aufklappen noetig (Phase 2 UX Fix). */
  .pill-group{display:flex;gap:2px;}
  .pill-group label{display:flex;align-items:center;justify-content:center;
    padding:4px 5px;border:1px solid var(--line);border-radius:5px;font-size:10.5px;
    cursor:pointer;background:var(--navy-900);color:var(--ink-dim);white-space:nowrap;
    min-width:26px;min-height:26px;}
  .pill-group input[type=radio]{position:absolute;opacity:0;width:0;height:0;}
  .pill-group label:has(input:checked){background:var(--gold);color:var(--on-accent);
    border-color:var(--gold);font-weight:600;}
  @media (pointer:coarse){
    .pill-group label{min-width:34px;min-height:34px;font-size:12px;padding:6px;}
  }

  .tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;max-height:480px;overflow-y:auto;padding-right:4px;}
  .tech-edit{background:var(--navy-900);border:1px solid var(--line);border-radius:10px;padding:10px;}
  .tech-edit input, .tech-edit select{width:100%;background:var(--navy-800);border:1px solid var(--line);
    color:var(--ink);border-radius:5px;padding:7px 9px;font-size:15.5px;margin-top:3px;font-family:inherit;}
  .tech-edit label{font-size:13px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.04em;
    display:block;margin-top:6px;}
  .tech-edit .row2{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .skill-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;}
  .chip{font-size:13px;padding:3px 7px;border-radius:99px;border:1px solid var(--line);
    background:var(--navy-800);cursor:pointer;color:var(--ink-dim);}
  .chip.active{background:var(--gold);color:var(--on-accent);border-color:var(--gold);font-weight:600;}
  .chip-add{font-size:13px;padding:3px 8px;border-radius:99px;border:1px dashed var(--line);
    background:transparent;color:var(--ink-dim);width:118px;min-width:88px;outline:none;}
  .chip-add:focus{border-color:var(--gold);border-style:solid;color:var(--ink);}
  .chip-add::placeholder{color:var(--ink-dim);}
  .tech-del{float:right;color:var(--danger);background:none;border:none;cursor:pointer;font-size:15.5px;}

  .stats{display:flex;gap:10px;padding:0 16px 16px;flex-wrap:wrap;}
  .stat{flex:1;min-width:88px;background:var(--navy-900);border:1px solid var(--line);
    border-radius:10px;padding:10px 12px;}
  .stat .num{font-family:'IBM Plex Mono',monospace;font-size:20.5px;font-weight:700;color:var(--gold-soft);line-height:1;}
  .stat.warn .num{color:var(--danger);}
  .stat .lbl{font-size:13px;color:var(--ink-dim);margin-top:3px;text-transform:uppercase;letter-spacing:.04em;}

  .legend{display:flex;gap:10px;padding:0 16px 14px;flex-wrap:wrap;font-size:14px;color:var(--ink-dim);}
  .legend span{display:flex;align-items:center;gap:5px;}
  .dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

  .board{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;padding:0 16px 16px;}
  .tech-card{background:var(--navy-900);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;}
  .tech-head{padding:12px 14px 10px;border-bottom:1px solid var(--line);background:var(--navy-700);}
  .tech-name{font-size:16px;font-weight:700;margin:0 0 2px;}
  .tech-meta{font-size:13px;color:var(--ink-dim);display:flex;gap:5px;flex-wrap:wrap;margin-top:4px;}
  .badge{background:var(--navy-600);border-radius:5px;padding:1.5px 6px;font-family:'IBM Plex Mono',monospace;font-size:13px;}
  .gauge-bar{height:5px;background:var(--navy-600);border-radius:99px;overflow:hidden;margin-top:8px;}
  .gauge-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold-soft));}
  .gauge-fill.full{background:linear-gradient(90deg,var(--danger),#ff7a8e);}
  .gauge-label{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink-dim);margin-top:3px;display:flex;justify-content:space-between;}
  .equip-tag{display:inline-block;margin:3px 4px 0 0;font-size:13px;background:#fdf1de;
    color:#92400e;padding:3px 8px;border-radius:6px;border:1px solid #f3ddb0;font-weight:600;}
  .equip-tag.hp{color:#0e6ba8;background:#e6f4fb;border-color:#bde3f4;}
  .equip-tag.warn{color:#c22437;border-color:#f5c6cb;background:#fdeaec;}
  .toggle-cell{text-align:center;}
  .toggle-cell input[type=checkbox]{width:auto;}
  .export-bar{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px;}
  .override-select{background:var(--navy-900);border:1px solid var(--line);color:var(--ink);
    border-radius:5px;padding:3px 5px;font-size:13.5px;font-family:inherit;}
  .conflict-warn{color:var(--danger);font-size:13px;margin-left:4px;font-weight:600;}
  /* Mitarbeiter-Autocomplete (Smart-Suche bei der Zuweisung) */
  .tech-combo{position:relative;display:inline-block;vertical-align:middle;}
  .tech-combo-input{background:var(--navy-900);border:1px solid var(--line);color:var(--ink);
    border-radius:5px;padding:4px 7px;font-size:13.5px;font-family:inherit;min-width:120px;}
  .tech-combo-list{position:absolute;top:100%;left:0;z-index:60;background:var(--card,var(--navy-800));
    border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.18);
    min-width:190px;max-height:230px;overflow-y:auto;margin-top:3px;}
  .tech-combo-opt{padding:6px 10px;cursor:pointer;font-size:13.5px;white-space:nowrap;}
  .tech-combo-opt:hover{background:var(--accent-soft,var(--navy-700));}
  .tech-combo-meta{color:var(--ink-dim,#8a92a8);font-size:11.5px;margin-left:6px;}
  .tech-combo-empty{padding:8px 10px;color:var(--ink-dim,#8a92a8);font-size:12.5px;}
  .history-table{font-size:13.5px;}
  .history-table td, .history-table th{padding:5px 6px;}
  .tag-ai{background:#e6f4fb;color:#0e6ba8;border-radius:6px;padding:3px 8px;font-size:13px;font-weight:600;}
  .tag-manual{background:#fdf1de;color:#92400e;border-radius:6px;padding:3px 8px;font-size:13px;font-weight:600;}
  .outlook-box{margin-top:8px;padding:8px;background:var(--navy-950);border:1px dashed var(--line);
    border-radius:8px;font-size:13.5px;color:var(--ink-dim);}
  .empty-jobs{color:var(--ink-dim);font-size:14px;text-align:center;padding:14px 0;}
  .unassigned-section{margin:0 16px 16px;background:var(--danger-bg);border:1px solid rgba(224,51,79,.4);
    border-radius:10px;padding:12px 14px;}
  .unassigned-section h3{margin:0 0 6px;font-size:14.5px;color:var(--danger);text-transform:uppercase;letter-spacing:.05em;font-weight:800;}
  .un-item{font-size:14px;margin-bottom:3px;}
  footer{text-align:center;color:var(--ink-dim);font-size:13.5px;padding:14px 20px 26px;}

  /* ---- LOGIN SCREEN ----
     Fix: previously position:fixed + flex align-items:center with no overflow
     handling meant that once the signup form (extra fields) made the card
     taller than the viewport, the bottom (incl. the submit button) was
     clipped and unreachable on small screens. Now the outer screen scrolls,
     and the card is centered via auto margins instead of flex-centering. */
  #loginScreen{position:fixed;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    background:var(--navy-950);z-index:50;padding:20px;}
  .login-card{width:100%;max-width:380px;margin:24px auto;background:var(--navy-800);border:1px solid var(--line);
    border-radius:20px;padding:34px 30px;box-shadow:0 20px 44px rgba(16,24,40,.12);position:relative;}
  .login-brand{display:flex;align-items:center;gap:13px;margin:0 0 22px;}
  .login-logo{width:56px;height:56px;flex:0 0 auto;border-radius:14px;box-shadow:0 6px 18px rgba(13,110,253,.28);}
  .login-wordmark{line-height:1.05;}
  .login-wordmark b{font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
  .login-wordmark span{font-size:27px;font-weight:800;letter-spacing:-.02em;color:#0D6EFD;}
  .login-wordmark em{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.28em;
    text-transform:uppercase;color:#00B4FF;margin-top:3px;}
  .login-card h1{font-size:22px;margin:0 0 4px;font-weight:800;letter-spacing:-.01em;}
  .login-card .sub{margin:0 0 20px;}
  .field-label{font-size:14px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.05em;
    display:block;margin-bottom:5px;margin-top:14px;font-weight:700;}
  .login-card input, .login-card select{width:100%;background:var(--navy-900);border:1.5px solid var(--line);color:var(--ink);
    border-radius:10px;padding:12px 14px;font-size:16px;transition:border-color .12s;}
  .login-card input:focus, .login-card select:focus{outline:none;border-color:var(--gold);}
  .saas-panel input[type="text"], .saas-panel input[type="number"], .saas-panel select{
    background:var(--navy-900);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:9px;width:100%;}
  .login-card .btn{width:100%;margin-top:18px;padding:14px;font-size:16px;border-radius:10px;min-height:50px;}
  .login-error{color:var(--danger);font-size:14.5px;margin-top:10px;min-height:14px;font-weight:600;}
  .login-error.login-info{color:var(--ok);}
  /* Social-Login */
  .social-login{margin-top:18px;}
  .social-divider{display:flex;align-items:center;gap:12px;color:var(--ink-dim);font-size:13px;margin:0 0 14px;}
  .social-divider::before,.social-divider::after{content:"";flex:1;height:1px;background:var(--line);}
  .social-btns{display:flex;flex-direction:column;gap:9px;}
  .social-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
    background:var(--navy-700);border:1px solid var(--line);color:var(--ink);border-radius:10px;
    padding:11px 14px;font-size:15px;font-weight:600;cursor:pointer;transition:border-color .12s,background .12s;
    font-family:inherit;}
  .social-btn:hover{border-color:var(--gold);}
  .social-btn svg{flex-shrink:0;display:block;}
  /* Vorlagen-Auswahl (Registrierung) */
  .tpl-search{width:100%;background:var(--navy-800);border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:9px 12px;font-size:14px;font-family:inherit;margin-bottom:8px;}
  .tpl-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:330px;overflow-y:auto;padding:2px;}
  @media(max-width:520px){.tpl-cards{grid-template-columns:1fr;max-height:290px;}}
  .tpl-card{position:relative;text-align:left;background:var(--navy-700);border:1px solid var(--line);border-radius:10px;padding:11px 12px;cursor:pointer;transition:border-color .12s,background .12s;}
  .tpl-card:hover{border-color:var(--gold-soft);}
  .tpl-card.sel{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);}
  .tpl-name{font-weight:700;font-size:14px;color:var(--ink);}
  .tpl-badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
  .tpl-badges span{font-size:10.5px;font-weight:600;color:var(--ink-dim);background:var(--navy-800);border:1px solid var(--line);border-radius:6px;padding:2px 6px;}
  .tpl-rec{display:inline-block;font-size:10px;font-weight:700;color:#fff;background:var(--ok);border-radius:99px;padding:2px 8px;margin-top:7px;}
  .tpl-preview-btn{margin-top:8px;font-size:11.5px;color:var(--gold-soft);background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-weight:600;text-decoration:underline;}
  .tpl-preview-panel{margin-top:7px;font-size:11.5px;line-height:1.5;color:var(--ink-dim);border-top:1px dashed var(--line);padding-top:7px;display:none;}
  .tpl-preview-panel.open{display:block;}
  .tpl-preview-panel b{color:var(--ink);font-weight:600;}
  .tpl-note{font-size:12px;color:var(--ink-dim);margin:9px 0 0;}
  .demo-row{display:flex;gap:6px;margin-top:16px;flex-wrap:wrap;}
  .demo-chip{flex:1;min-width:90px;background:var(--navy-700);border:1px solid var(--line);color:var(--ink-dim);
    border-radius:9px;padding:9px 6px;font-size:13px;font-weight:600;text-align:center;cursor:pointer;transition:border-color .12s,color .12s;}
  .demo-chip:hover{border-color:var(--gold);color:var(--gold);}
  .login-theme-toggle{position:absolute;top:16px;right:16px;}
  @media (max-height: 700px){
    .login-card{margin:8px auto;padding:24px 22px;}
  }

  /* ---- PHASE 10: MOBILE-FRIENDLY DISPATCHER-ANSICHT ---- */
  @media (max-width: 760px){
    body{ font-size:17.5px; }
    header.top{ padding:18px 14px 14px; }
    h1{ font-size:20.5px; }
    .sub{ font-size:15.5px; }
    .step{ margin:14px 10px; border-radius:16px; }
    .step-head{ padding:16px 14px; }
    .step-title{ font-size:17px; }
    .step-body{ padding:14px; }

    /* Formularfelder & Buttons: grösser für Finger statt Maus */
    input, select, textarea{ font-size:17.5px !important; padding:13px !important; border-radius:10px !important; }
    button, .btn{ font-size:17px !important; padding:13px 16px !important; min-height:46px; border-radius:10px !important; }

    /* Kennzahlen-Kacheln: zwei pro Reihe statt gequetschter Reihe */
    .stat{ min-width:44%; flex:1 1 44%; padding:12px 14px; }
    .stat .num{ font-size:22px; }
    .stat .lbl{ font-size:14px; }

    /* Techniker-Karten: eine Spalte, mehr Luft, grössere Schrift */
    .board{ grid-template-columns:1fr; gap:14px; padding:0 10px 14px; }
    .tech-card{ border-radius:14px; }
    .tech-name{ font-size:17.5px; }
    .tech-meta{ font-size:14.5px; }
    .badge{ font-size:14px; padding:3px 8px; }
    .equip-tag{ font-size:14px; padding:3px 8px; }

    /* Tabellen (Historie etc.): horizontal scrollbar statt Zusammenquetschen */
    .history-table{ font-size:15.5px; display:block; overflow-x:auto; white-space:nowrap; }
    .history-table td, .history-table th{ padding:10px 8px; }

    .export-bar{ padding:0 10px 12px; }
    .export-bar button, .export-bar .btn{ flex:1 1 100%; }
    .unassigned-section{ margin:0 10px 14px; padding:14px; }
    .un-item{ font-size:15.5px; }

    .login-card{ padding:22px 18px; }
    .login-card input{ font-size:17.5px !important; padding:14px 12px !important; }
    .demo-row{ flex-direction:column; }
    .demo-chip{ padding:12px 8px; font-size:15.5px; }
  }

  /* ---- FEATURE-NAVIGATION (Form/Checklist/Workflow/Status/Rollen-Builder, Abwesenheiten,
     Smart-Zuweisung, Fahrer-App) — macht alle Backend-Features im Frontend sichtbar ---- */
  .app-nav{ display:flex; gap:8px; flex-wrap:wrap; padding:10px 20px; border-bottom:1px solid var(--line);
    background:rgba(255,255,255,0.02); overflow-x:auto; }
  .app-nav-link{ font-size:15px; color:var(--ink-dim); text-decoration:none; padding:6px 12px;
    border-radius:999px; border:1px solid var(--line); background:var(--navy-800); white-space:nowrap; flex-shrink:0; }
  .app-nav-link:hover{ color:var(--gold-soft); border-color:var(--gold-soft); }
  .app-nav-link.active{ background:var(--gold); color:var(--on-accent); border-color:var(--gold); font-weight:700; }

  /* ---- Dark-mode overrides for tag/chip colors that need different treatment than a simple var() swap ---- */
  [data-theme="dark"] .equip-tag{background:#3a2f1d;color:#ffd27a;border-color:#5a4a1f;}
  [data-theme="dark"] .equip-tag.hp{background:#132a38;color:#7adfff;border-color:#1f4a5a;}
  [data-theme="dark"] .equip-tag.warn{background:#2a1810;color:#ff9f7a;border-color:#5a2f1f;}
  [data-theme="dark"] .tag-ai{background:#132a38;color:#7adfff;}
  [data-theme="dark"] .tag-manual{background:#2a2210;color:#ffd27a;}

  /* ---- Header theme-toggle button (reuses ds-theme-toggle look, sits in the user-bar) ---- */
  .user-bar .ds-theme-toggle{width:34px;height:34px;font-size:15px;}

  /* ================= AUTH (Login / Registrierung, Redesign) ================= */
  /* align-items:flex-start (oben ausgerichtet): der Container WÄCHST mit hohem
     Inhalt (langer Signup-Wizard) und die Seite scrollt natürlich — mit
     align-items:center würde der obere Teil (Marke, Tabs, Formular) über den
     Viewport geschoben und wäre nicht erreichbar. */
  #loginScreen{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:40px 18px;box-sizing:border-box;}
  .auth-wrap{width:100%;max-width:1120px;flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.9fr);
    gap:0;background:var(--navy-800);border:1px solid var(--line);border-radius:20px;overflow:hidden;
    box-shadow:0 30px 80px -40px rgba(16,24,40,.18);}
  .auth-main{padding:34px clamp(24px,4vw,52px);}
  .auth-main > *{max-width:520px;margin-left:auto;margin-right:auto;}
  .auth-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
  .login-brand{display:flex;align-items:center;gap:11px;}
  .login-wordmark{font-size:21px;font-weight:800;letter-spacing:-.02em;}
  .login-wordmark span{color:var(--gold);}
  .auth-sub{color:var(--ink-dim);font-size:15px;margin:0 0 18px;}
  .auth-tabs{display:flex;gap:6px;background:var(--navy-900);border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:22px;}
  .auth-tab{flex:1;background:transparent;border:none;color:var(--ink-dim);font-family:inherit;font-weight:700;font-size:15px;
    padding:11px 10px;border-radius:9px;cursor:pointer;transition:background .12s,color .12s;}
  .auth-tab.active{background:var(--gold);color:var(--on-accent);}
  .auth-view label.field-label{font-size:14px;}
  .auth-view input,.auth-view select{font-size:15.5px;padding:12px 13px;}
  .btn-block{width:100%;display:block;margin-top:14px;padding:13px;font-size:16px;}
  .auth-links{margin-top:14px;font-size:14.5px;}
  .auth-links a{color:var(--ink-dim);}
  .auth-links a:hover{color:var(--gold-soft);}

  /* Passwort anzeigen/verbergen + Stärke */
  .pw-wrap{position:relative;}
  .pw-wrap input{width:100%;padding-right:44px !important;}
  .pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;
    cursor:pointer;font-size:16px;opacity:.7;padding:4px;}
  .pw-toggle:hover{opacity:1;}
  .pw-meter{height:6px;background:var(--navy-900);border-radius:99px;margin-top:8px;overflow:hidden;}
  .pw-bar{height:100%;width:0;border-radius:99px;transition:width .25s,background .25s;background:var(--danger);}
  .pw-hint{font-size:12.5px;color:var(--ink-dim);margin-top:6px;}

  /* Social-Buttons (Login-Reihenfolge Google → Microsoft → E-Mail) */
  .social-login{margin-bottom:18px;}
  .social-divider{display:flex;align-items:center;gap:12px;color:var(--ink-dim);font-size:13px;margin:14px 0 0;}
  .social-divider::before,.social-divider::after{content:"";flex:1;height:1px;background:var(--line);}
  .social-btns{display:flex;flex-direction:column;gap:10px;}
  .social-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--navy-700);
    border:1px solid var(--line);color:var(--ink);border-radius:11px;padding:12px 14px;font-size:15px;font-weight:600;
    cursor:pointer;font-family:inherit;transition:border-color .12s;}
  .social-btn:hover{border-color:var(--gold);}
  .social-btn svg{flex-shrink:0;}

  /* Pilotphase — steht anstelle des Registrierungs-Assistenten, solange die
     öffentliche Selbstregistrierung geschlossen ist (PUBLIC_SIGNUP=0). */
  .pilot-box{padding:4px 0 8px;}
  .pilot-lead{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 16px;line-height:1.45;}
  .pilot-frage{font-size:15px;color:var(--ink);margin:0 0 6px;line-height:1.5;}
  .pilot-sub{font-size:15px;color:var(--ink-dim);margin:0 0 22px;line-height:1.5;}
  /* Der Aufruf ist ein <a> (mailto) -- ohne das sähe er wie ein Link im
     Fliesstext aus: unterstrichen und linksbündig statt wie eine Schaltfläche. */
  .pilot-box .btn{padding:13px;font-size:15.5px;text-decoration:none;text-align:center;display:block;}
  .pilot-hint{font-size:13px;color:var(--ink-dim);margin:16px 0 0;text-align:center;}

  /* Wizard-Schrittanzeige */
  .wiz-steps{display:flex;gap:6px;margin-bottom:20px;}
  .wiz-step{flex:1;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-dim);
    border-bottom:2px solid var(--line);padding-bottom:8px;font-weight:600;}
  .wiz-step .wiz-num{width:21px;height:21px;border-radius:50%;background:var(--navy-700);color:var(--ink-dim);
    display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0;}
  .wiz-step.active{color:var(--ink);border-bottom-color:var(--gold);}
  .wiz-step.active .wiz-num{background:var(--gold);color:var(--on-accent);}
  .wiz-step.done .wiz-num{background:var(--ok);color:#fff;}
  .wiz-nav{display:flex;gap:10px;margin-top:20px;}
  .wiz-nav .btn{flex:1;padding:13px;font-size:15.5px;}
  .wiz-summary{background:var(--navy-900);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px;font-size:14px;}
  .wiz-summary div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;}
  .wiz-summary div span:first-child{color:var(--ink-dim);}
  .wiz-summary div b{color:var(--ink);text-align:right;}
  .chk{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-dim);cursor:pointer;margin:4px 0;line-height:1.45;}
  .chk input{width:18px;height:18px;margin-top:1px;flex-shrink:0;accent-color:var(--gold);}
  .chk a{color:var(--gold-soft);}

  /* Vorlagen-Karten (Registrierung) — lesbar, 3/Reihe Desktop, 1/Reihe Mobile */
  .tpl-search{width:100%;background:var(--navy-900);border:1px solid var(--line);color:var(--ink);border-radius:9px;
    padding:11px 13px;font-size:14.5px;font-family:inherit;margin-bottom:12px;}
  .tpl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;max-height:none;overflow:visible;}
  .tpl-card{position:relative;text-align:left;background:var(--navy-700);border:1px solid var(--line);border-radius:12px;
    padding:14px;cursor:pointer;transition:border-color .12s;display:flex;flex-direction:column;}
  .tpl-card:hover{border-color:var(--gold-soft);}
  .tpl-card.sel{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold);}
  .tpl-name{font-weight:700;font-size:15px;color:var(--ink);}
  .tpl-desc{font-size:13px;color:var(--ink-dim);margin:5px 0 9px;line-height:1.45;flex:1;}
  .tpl-facts{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px;}
  .tpl-facts span{font-size:11.5px;font-weight:600;color:var(--ink-dim);background:var(--navy-900);border:1px solid var(--line);border-radius:6px;padding:3px 7px;}
  .tpl-rec{display:inline-block;font-size:10.5px;font-weight:700;color:#fff;background:var(--ok);border-radius:99px;padding:2px 9px;margin-bottom:8px;align-self:flex-start;}
  .tpl-card-actions{display:flex;gap:8px;align-items:center;margin-top:auto;}
  .tpl-card-actions .btn{padding:8px 12px;font-size:13.5px;flex:1;}
  .lnk{background:none;border:none;color:var(--gold-soft);font-family:inherit;font-weight:600;font-size:13.5px;cursor:pointer;text-decoration:underline;padding:0;}
  .tpl-note{font-size:12.5px;color:var(--ink-dim);margin:12px 0 0;}
  .tpl-chosen{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--navy-900);
    border:1px solid var(--gold);border-radius:11px;padding:12px 14px;font-size:14.5px;flex-wrap:wrap;}
  .tpl-chosen-actions{display:flex;gap:14px;}

  /* Vorlagen-Vollvorschau (Modal) */
  .tpl-modal{position:fixed;inset:0;z-index:1000;background:rgba(6,10,20,.66);display:flex;align-items:center;justify-content:center;padding:18px;}
  .tpl-modal-card{background:var(--navy-800);border:1px solid var(--line);border-radius:16px;max-width:520px;width:100%;max-height:85vh;overflow-y:auto;}
  .tpl-modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--navy-800);}
  .tpl-modal-head b{font-size:17px;}
  .tpl-modal-x{background:none;border:none;color:var(--ink-dim);font-size:20px;cursor:pointer;line-height:1;}
  .tpl-modal-body{padding:18px 20px;font-size:14px;line-height:1.6;color:var(--ink-dim);}
  .tpl-modal-body h4{color:var(--gold-soft);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;margin:16px 0 5px;}
  .tpl-modal-body h4:first-child{margin-top:0;}
  .tpl-modal-body p{margin:0;color:var(--ink);}
  /* "Pro"-Vorschau: Zähler-Badges + visuelle Workflow-Pipeline + Chip-Listen */
  .tpl-m-summary{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;}
  .tpl-m-summary span{font-size:11.5px;font-weight:600;color:var(--ink);background:var(--navy-700);border:1px solid var(--line);border-radius:7px;padding:4px 9px;}
  .tpl-m-summary span b{color:var(--gold-soft);}
  .tpl-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
  .tpl-flow em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--navy-700);border:1px solid var(--line);border-radius:999px;padding:4px 11px;}
  .tpl-flow i{color:var(--gold-soft);font-style:normal;font-weight:700;}
  .tpl-chips{display:flex;flex-wrap:wrap;gap:6px;}
  .tpl-chips span{font-size:12px;color:var(--ink);background:var(--navy-700);border:1px solid var(--line);border-radius:7px;padding:3px 9px;}

  /* RECHTE Marketing-Spalte */
  .auth-side{background:var(--navy-700);border-left:1px solid var(--line);
    display:flex;align-items:flex-start;padding:40px clamp(24px,3vw,44px);}
  [data-theme="dark"] .auth-side{background:linear-gradient(160deg,var(--navy-900),var(--navy-700));}
  .auth-side-inner{width:100%;position:sticky;top:40px;}
  .auth-preview{background:var(--navy-800);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 20px 50px -30px rgba(0,0,0,.6);}
  .ap-bar{display:flex;align-items:center;gap:6px;padding:10px 13px;border-bottom:1px solid var(--line);background:var(--navy-900);}
  .ap-bar span{width:9px;height:9px;border-radius:50%;background:var(--line);}
  .ap-bar em{margin-left:8px;font-style:normal;font-size:11.5px;color:var(--ink-dim);}
  .ap-body{padding:14px;}
  .ap-head{font-size:13.5px;margin-bottom:10px;color:var(--ink);}
  .ap-row{display:flex;align-items:center;gap:10px;background:var(--navy-900);border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:8px;}
  .ap-ico{font-size:15px;}
  .ap-main{flex:1;min-width:0;} .ap-main b{font-size:12.5px;display:block;color:var(--ink);} .ap-main small{font-size:11px;color:var(--ink-dim);}
  .ap-pill{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;}
  .ap-pill.new{background:rgba(13,110,253,.16);color:var(--gold-soft);}
  .ap-pill.asg{background:rgba(23,138,76,.18);color:#54d38a;}
  .ap-pill.done{background:var(--navy-800);color:var(--ink-dim);border:1px solid var(--line);}
  .auth-benefits{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:12px;}
  .auth-benefits li{position:relative;padding-left:28px;font-size:15px;color:var(--ink);font-weight:500;}
  .auth-benefits li::before{content:"✓";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;background:var(--ok);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;}

  @media(max-width:900px){
    .auth-wrap{grid-template-columns:1fr;max-width:520px;}
    .auth-side{display:none;}
    .auth-main > *{max-width:none;}
  }
  @media(max-width:640px){
    .tpl-cards{grid-template-columns:1fr;}
    #loginScreen{padding:16px 12px;}
    .auth-main{padding:24px 18px;}
    .wiz-step span:not(.wiz-num){display:none;}
    .wiz-step{justify-content:center;}
  }
  @media(max-width:400px){ .row2{grid-template-columns:1fr;} }
  /* Testphasen-Banner (Milestone 1) — eskaliert visuell je näher das Ende rückt. */
  .trial-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    max-width:1280px;width:100%;margin:14px auto 0;padding:11px 16px;border-radius:11px;
    font-size:14px;line-height:1.35;border:1px solid var(--line);
    background:var(--card);box-shadow:var(--shadow-card,0 1px 2px rgba(16,24,40,.06));}
  .trial-banner .tb-ico{font-size:18px;flex-shrink:0;}
  .trial-banner .tb-text{flex:1;min-width:180px;}
  .trial-banner .tb-text b{font-weight:800;}
  .trial-banner .tb-sub{color:var(--dim);font-size:12.5px;margin-top:1px;}
  .trial-banner .tb-cta{background:var(--gold);color:var(--on-accent,#fff);border:none;
    border-radius:8px;padding:8px 15px;font-size:13.5px;font-weight:700;cursor:pointer;
    font-family:inherit;white-space:nowrap;}
  .trial-banner .tb-cta:hover{filter:brightness(1.05);}
  .trial-banner .tb-dismiss{background:none;border:none;color:var(--dim);cursor:pointer;
    font-size:18px;line-height:1;padding:2px 6px;border-radius:6px;flex-shrink:0;}
  .trial-banner .tb-dismiss:hover{background:var(--dim-btn-bg,#eef0f5);}
  /* Zustände: info (>7T) neutral, warn (4–7T) bernstein, urgent (≤3T) rot, expired */
  .trial-banner.tb-warn{border-color:#e0a83c;background:color-mix(in srgb,#f5a623 12%,var(--card));}
  .trial-banner.tb-urgent,.trial-banner.tb-expired{border-color:var(--err,#c22437);
    background:color-mix(in srgb,var(--err,#c22437) 12%,var(--card));}
  .trial-banner.tb-info .tb-ico{color:var(--gold);}
  .trial-banner.tb-warn .tb-ico{color:#c9821a;}
  .trial-banner.tb-urgent .tb-ico,.trial-banner.tb-expired .tb-ico{color:var(--err,#c22437);}
