@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --black:#0B0D0F;
  --anthracite:#1B1E22;
  --surface:#22262B;
  --surface-2:#2A2F35;
  --line:#33383E;
  --white:#F4F5F6;
  --grey:#9AA1A9;
  --blue:#2F6FED;
  --blue-light:#6FA3FF;
  --blue-glow: rgba(47,111,237,0.35);
  --green:#3DBE7A;
  --amber:#E0A544;
  --red:#E0574C;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Inter',sans-serif;
  line-height:1.45;
  overscroll-behavior-y:none;
  -webkit-user-select:none;
  user-select:none;
}
input,textarea{-webkit-user-select:text;user-select:text;}
h1,h2,h3,.display{font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-0.01em;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{color:inherit;}

#app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;position:relative;background:var(--black);}

/* ---------- Offline Banner ---------- */
.offline-banner{
  display:none;
  align-items:center;gap:8px;justify-content:center;
  background:var(--amber);color:#241a05;
  font-size:0.8rem;font-weight:600;
  padding:8px 12px;
  padding-top:calc(8px + var(--safe-top));
}
.offline-banner.show{display:flex;}
.offline-banner .dot{width:7px;height:7px;border-radius:50%;background:#241a05;animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}

/* ---------- Top bar ---------- */
.topbar{
  padding:calc(14px + var(--safe-top)) 18px 14px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
  background:rgba(11,13,15,0.92);backdrop-filter:blur(10px);
}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.02rem;font-family:'Montserrat',sans-serif;}
.logo-mark{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#a9cbff,var(--blue) 55%,#1a4bb8 100%);position:relative;box-shadow:inset 0 0 0 1px rgba(111,163,255,0.5);}
.logo-mark::after{content:'';position:absolute;top:22%;left:24%;width:34%;height:24%;background:rgba(255,255,255,0.75);border-radius:50%;transform:rotate(-18deg);}
.topbar .back{font-size:1.4rem;color:var(--blue-light);display:flex;align-items:center;gap:6px;font-weight:600;font-size:0.95rem;}
.icon-btn{width:38px;height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.1rem;}

/* ---------- Screens ---------- */
.screen{display:none;flex:1;flex-direction:column;padding-bottom:calc(90px + var(--safe-bottom));}
.screen.active{display:flex;}
.content{padding:16px 16px 8px;flex:1;}

/* ---------- Bottom nav ---------- */
.bottomnav{
  position:fixed;bottom:0;left:0;right:0;
  max-width:560px;margin:0 auto;
  background:rgba(20,23,27,0.95);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  display:flex;padding-bottom:var(--safe-bottom);
  z-index:30;
}
.bottomnav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;font-size:0.68rem;color:var(--grey);font-weight:600;}
.bottomnav button .ic{font-size:1.25rem;}
.bottomnav button.active{color:var(--blue-light);}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px;}
.section-title{font-size:0.72rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--grey);font-weight:700;margin:20px 0 10px;}
.section-title:first-child{margin-top:0;}

/* ---------- Auftragskarten ---------- */
.order-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:10px;display:flex;flex-direction:column;gap:8px;}
.order-card:active{border-color:var(--blue-light);}
.order-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.order-kunde{font-weight:700;font-size:1rem;}
.order-adresse{color:var(--grey);font-size:0.83rem;margin-top:2px;}
.status-pill{font-size:0.68rem;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;text-transform:uppercase;letter-spacing:0.03em;}
.status-neu{background:rgba(47,111,237,0.18);color:var(--blue-light);}
.status-unterwegs{background:rgba(224,165,68,0.18);color:var(--amber);}
.status-vor_ort{background:rgba(224,165,68,0.25);color:var(--amber);}
.status-abgeschlossen{background:rgba(61,190,122,0.18);color:var(--green);}
.order-meta{display:flex;gap:14px;font-size:0.78rem;color:var(--grey);flex-wrap:wrap;align-items:center;}
.badge{display:inline-flex;align-items:center;gap:4px;background:var(--surface-2);padding:3px 8px;border-radius:8px;font-weight:600;}
.badge.sync-pending{color:var(--amber);}
.badge.sync-synced{color:var(--green);}

/* ---------- Buttons ---------- */
.btn{padding:13px 20px;border-radius:10px;font-weight:700;font-size:0.92rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;transition:transform .12s ease;}
.btn:active{transform:scale(0.98);}
.btn-primary{background:linear-gradient(135deg,var(--blue),#1e56c9);color:#fff;}
.btn-ghost{border:1px solid var(--line);color:var(--white);}
.btn-success{background:linear-gradient(135deg,var(--green),#2a9660);color:#fff;}
.btn-danger{color:var(--red);border:1px solid rgba(224,87,76,0.4);}
.btn-sm{padding:9px 14px;font-size:0.82rem;width:auto;}
.btn-row{display:flex;gap:10px;}

/* ---------- Login ---------- */
.login-screen{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px;gap:24px;}
.login-logo{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:10px;}
.login-logo .mark{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#a9cbff,var(--blue) 55%,#1a4bb8 100%);position:relative;box-shadow:0 8px 30px var(--blue-glow), inset 0 0 0 1.5px rgba(111,163,255,0.5);}
.login-logo .mark::after{content:'';position:absolute;top:20%;left:22%;width:36%;height:26%;background:rgba(255,255,255,0.75);border-radius:50%;transform:rotate(-18deg);}
.login-logo h1{font-size:1.5rem;text-align:center;}
.login-logo p{color:var(--grey);text-align:center;font-size:0.88rem;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:0.78rem;color:var(--grey);margin-bottom:6px;font-weight:600;}
input[type=text],input[type=tel],input[type=password],input[type=date],input[type=time],textarea,select{
  width:100%;padding:13px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--white);font-size:0.94rem;font-family:inherit;
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--blue-light);outline-offset:1px;}
.demo-users{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.demo-users button{background:var(--surface);border:1px solid var(--line);padding:8px 12px;border-radius:8px;font-size:0.8rem;color:var(--blue-light);}

/* ---------- Auftragsdetail ---------- */
.detail-header{margin-bottom:4px;}
.detail-header h2{font-size:1.25rem;}
.detail-header .sub{color:var(--grey);font-size:0.85rem;margin-top:3px;}
.status-stepper{display:flex;gap:8px;margin:14px 0;overflow-x:auto;}
.status-stepper button{flex:1;padding:10px 6px;border-radius:9px;background:var(--surface);border:1px solid var(--line);font-size:0.72rem;font-weight:700;color:var(--grey);white-space:nowrap;}
.status-stepper button.active{background:var(--blue);color:#fff;border-color:var(--blue);}

.info-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:0.9rem;}
.info-row:last-child{border-bottom:none;}
.info-row .label{color:var(--grey);}
.info-row .val{font-weight:600;text-align:right;}

/* ---------- Pakete / Leistungen ---------- */
.pkg-item, .addon-item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--surface);}
.pkg-item.checked, .addon-item.checked{border-color:var(--blue-light);background:rgba(47,111,237,0.1);}
.pkg-item .left, .addon-item .left{display:flex;align-items:center;gap:10px;font-size:0.9rem;font-weight:600;}
.addon-item .price{color:var(--grey);font-size:0.82rem;}
input[type=radio],input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue-light);}
.size-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;}
.size-opt{padding:10px 4px;border-radius:9px;background:var(--surface);border:1px solid var(--line);text-align:center;font-size:0.72rem;font-weight:700;color:var(--grey);}
.size-opt.active{border-color:var(--blue-light);color:var(--blue-light);background:rgba(47,111,237,0.1);}

.price-bar{
  position:sticky;bottom:0;left:0;right:0;
  background:var(--surface);border-top:1px solid var(--line);
  padding:14px 16px;display:flex;justify-content:space-between;align-items:center;
  margin:0 -16px;
}
.price-bar .amount{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.3rem;color:var(--blue-light);}

/* ---------- Medien ---------- */
.media-tabs{display:flex;gap:8px;margin-bottom:12px;}
.media-tabs button{flex:1;padding:9px 4px;border-radius:9px;background:var(--surface);border:1px solid var(--line);font-size:0.78rem;font-weight:700;color:var(--grey);}
.media-tabs button.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.media-capture-row{display:flex;gap:10px;margin-bottom:14px;}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.media-thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);}
.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover;}
.media-thumb .del{position:absolute;top:4px;right:4px;width:22px;height:22px;background:rgba(0,0,0,0.6);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:0.8rem;}
.media-thumb .video-badge{position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,0.6);border-radius:5px;padding:2px 6px;font-size:0.62rem;font-weight:700;}
.media-empty{color:var(--grey);font-size:0.85rem;text-align:center;padding:30px 10px;border:1px dashed var(--line);border-radius:12px;}

/* ---------- Signatur ---------- */
.sig-wrap{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;touch-action:none;}
canvas#sigPad{width:100%;height:180px;display:block;touch-action:none;}

/* ---------- Fullscreen Viewer ---------- */
.viewer{position:fixed;inset:0;background:rgba(0,0,0,0.96);z-index:100;display:none;flex-direction:column;}
.viewer.open{display:flex;}
.viewer-top{display:flex;justify-content:space-between;align-items:center;padding:calc(14px + var(--safe-top)) 16px 10px;}
.viewer-body{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.viewer-body img,.viewer-body video{max-width:100%;max-height:100%;object-fit:contain;}
.viewer-note{padding:12px 16px calc(16px + var(--safe-bottom));color:var(--grey);font-size:0.85rem;text-align:center;}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:calc(96px + var(--safe-bottom));left:50%;transform:translateX(-50%);background:var(--surface-2);border:1px solid var(--line);padding:11px 18px;border-radius:30px;font-size:0.85rem;font-weight:600;z-index:200;opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

/* ---------- Suche ---------- */
.search-bar{position:relative;margin-bottom:12px;}
.search-bar input{padding-left:38px;}
.search-bar .search-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--grey);font-size:0.95rem;pointer-events:none;}

/* ---------- Anfragen ---------- */
.filter-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;margin-bottom:6px;}
.filter-chip{flex-shrink:0;padding:8px 14px;border-radius:20px;background:var(--surface);border:1px solid var(--line);font-size:0.78rem;font-weight:600;color:var(--grey);}
.filter-chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.conv-banner{background:linear-gradient(135deg,rgba(47,111,237,0.16),rgba(111,163,255,0.06));border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:0.85rem;display:flex;justify-content:space-between;align-items:center;}
.conv-banner .big{font-family:'Montserrat',sans-serif;font-weight:800;color:var(--blue-light);font-size:1.05rem;}

.channel-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;}
.channel-ic.whatsapp{background:rgba(61,190,122,0.16);}
.channel-ic.sms{background:rgba(224,165,68,0.16);}
.channel-ic.email{background:rgba(47,111,237,0.16);}
.channel-ic.telefon{background:rgba(154,161,169,0.16);}

.status-pill.status-neu2{background:rgba(47,111,237,0.18);color:var(--blue-light);}
.status-pill.status-kontaktiert{background:rgba(224,165,68,0.18);color:var(--amber);}
.status-pill.status-termin_vereinbart{background:rgba(224,165,68,0.25);color:var(--amber);}
.status-pill.status-auftrag_erstellt{background:rgba(61,190,122,0.18);color:var(--green);}
.status-pill.status-abgelehnt,.status-pill.status-nicht_erreichbar{background:rgba(224,87,76,0.16);color:var(--red);}

.anfrage-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;display:flex;gap:12px;}
.anfrage-card:active{border-color:var(--blue-light);}
.anfrage-msg{color:var(--grey);font-size:0.82rem;margin-top:6px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.dup-warning{background:rgba(224,165,68,0.14);border:1px solid rgba(224,165,68,0.4);color:var(--amber);border-radius:10px;padding:10px 12px;font-size:0.8rem;margin-bottom:12px;}

.nav-badge{position:absolute;top:2px;right:22%;background:var(--red);color:#fff;font-size:0.62rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.bottomnav button{position:relative;}

.chat-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.chat-bubble{max-width:82%;padding:9px 13px;border-radius:14px;font-size:0.85rem;line-height:1.4;}
.chat-bubble.out{align-self:flex-end;background:linear-gradient(135deg,var(--blue),#1e56c9);color:#fff;border-bottom-right-radius:4px;}
.chat-bubble.in{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);border-bottom-left-radius:4px;}
.chat-meta{font-size:0.66rem;opacity:0.7;margin-top:4px;}

.template-row{display:flex;gap:8px;overflow-x:auto;margin-bottom:10px;}
.template-chip{flex-shrink:0;padding:8px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);font-size:0.76rem;color:var(--blue-light);font-weight:600;}
.assign-pill{font-size:0.72rem;font-weight:700;padding:5px 10px;border-radius:20px;background:var(--surface-2);color:var(--grey);}

/* ---------- Avatar / Profil-Menü ---------- */
.avatar-btn{
  width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:0.82rem;color:#fff;flex-shrink:0;
}
.profile-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:400;display:none;}
.profile-overlay.open{display:block;}
.profile-panel{
  position:absolute;top:0;right:0;bottom:0;width:86%;max-width:340px;
  background:var(--anthracite);border-left:1px solid var(--line);
  overflow-y:auto;
  animation:slideIn .22s ease;
}
@keyframes slideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
.profile-header{display:flex;align-items:center;gap:12px;padding:calc(20px + var(--safe-top)) 18px 16px;border-bottom:1px solid var(--line);}
.profile-header .avatar-btn{width:48px;height:48px;font-size:1rem;}
.profile-menu-item{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--line);font-size:0.92rem;font-weight:600;}
.profile-menu-item .ic{font-size:1.15rem;width:22px;text-align:center;}
.role-tag{font-size:0.66rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;padding:3px 8px;border-radius:6px;background:rgba(47,111,237,0.18);color:var(--blue-light);}
.role-tag.admin{background:rgba(224,165,68,0.18);color:var(--amber);}

/* ---------- Login: Mitarbeiterliste ---------- */
.employee-list{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;}
.employee-chip{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);}
.employee-chip:active{border-color:var(--blue-light);}
.employee-chip .avatar-btn{width:36px;height:36px;font-size:0.76rem;}
.employee-chip .name{font-weight:700;font-size:0.9rem;flex:1;}

/* ---------- Home-Dashboard ---------- */
.home-greeting{font-size:1.3rem;font-weight:800;font-family:'Montserrat',sans-serif;}
.home-date{color:var(--grey);font-size:0.85rem;margin-top:2px;margin-bottom:18px;}
.quickstat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px;}
.quickstat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;}
.quickstat .num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.15rem;color:var(--blue-light);}
.quickstat .lbl{font-size:0.65rem;color:var(--grey);margin-top:3px;}
.quickaction-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px;}
.quickaction{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 6px;text-align:center;font-size:0.72rem;font-weight:700;color:var(--white);}
.quickaction .ic{font-size:1.3rem;display:block;margin-bottom:6px;}
.section-link{color:var(--blue-light);font-size:0.78rem;font-weight:700;}
.section-header-row{display:flex;justify-content:space-between;align-items:center;margin:20px 0 10px;}
.section-header-row .section-title{margin:0;}
.countdown-banner{background:linear-gradient(135deg,rgba(47,111,237,0.18),rgba(111,163,255,0.05));border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:0.85rem;}
.countdown-banner .big{font-family:'Montserrat',sans-serif;font-weight:800;color:var(--blue-light);}

/* ---------- Rechnung ---------- */
.invoice-head{text-align:center;margin-bottom:18px;}
.invoice-head .nr{color:var(--grey);font-size:0.8rem;}
.invoice-table{width:100%;border-collapse:collapse;font-size:0.86rem;}
.invoice-table th{text-align:left;color:var(--grey);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.04em;padding-bottom:8px;border-bottom:1px solid var(--line);}
.invoice-table td{padding:10px 0;border-bottom:1px solid var(--line);}
.invoice-table td.amount{text-align:right;font-weight:600;white-space:nowrap;}
.invoice-total{display:flex;justify-content:space-between;align-items:center;padding:18px 0 6px;}
.invoice-total .lbl{font-size:0.95rem;font-weight:700;}
.invoice-total .amount{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.7rem;color:var(--blue-light);}
.payment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.payment-opt{padding:11px 6px;border-radius:9px;background:var(--surface);border:1px solid var(--line);text-align:center;font-size:0.78rem;font-weight:700;color:var(--grey);}
.payment-opt.active{border-color:var(--blue-light);color:var(--blue-light);background:rgba(47,111,237,0.1);}
.invoice-status-pill{display:inline-block;padding:4px 12px;border-radius:20px;font-size:0.72rem;font-weight:700;text-transform:uppercase;}
.invoice-status-pill.entwurf{background:rgba(154,161,169,0.2);color:var(--grey);}
.invoice-status-pill.bezahlt{background:rgba(61,190,122,0.18);color:var(--green);}
.invoice-status-pill.versendet{background:rgba(47,111,237,0.18);color:var(--blue-light);}

/* ---------- misc ---------- */

.empty-state{text-align:center;color:var(--grey);padding:60px 20px;font-size:0.9rem;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px;}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;}
.stat-card .num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:1.5rem;color:var(--blue-light);}
.stat-card .lbl{color:var(--grey);font-size:0.75rem;margin-top:4px;}
textarea{min-height:70px;resize:vertical;}
.hidden{display:none !important;}
::-webkit-scrollbar{display:none;}