:root{--bg:#f4f6f8;--panel:#fff;--text:#17212b;--muted:#667085;--line:#dce2e8;--accent:#f4b400;--dark:#121a22;--danger:#b42318;--ok:#067647;--shadow:0 10px 30px rgba(16,24,40,.08)}*{box-sizing:border-box}body{margin:0;font:15px/1.45 Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}.app-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.sidebar{background:var(--dark);color:#fff;padding:24px 16px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;margin-bottom:30px}.brand-mark{width:44px;height:44px;border-radius:12px;background:var(--accent);color:#111;display:grid;place-items:center;font-weight:900}.brand span{display:block;color:#aeb8c2;font-size:12px}.nav-item{width:100%;border:0;background:transparent;color:#cbd3dc;padding:12px 14px;border-radius:10px;text-align:left;cursor:pointer;margin:3px 0}.nav-item:hover,.nav-item.active{background:#24313e;color:#fff}.sidebar-footer{margin-top:auto;color:#cbd3dc}.sidebar-footer small{display:block;color:#83909c;margin-top:4px}main{padding:26px 30px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.eyebrow{margin:0;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}.topbar h1{margin:4px 0 0;font-size:28px}.primary,.secondary,.danger,.link-btn,.icon-btn{border:0;border-radius:9px;padding:10px 14px;cursor:pointer}.primary{background:var(--accent);color:#151515;font-weight:700}.secondary{background:#eef1f4;color:#26323d}.danger{background:#fee4e2;color:var(--danger)}.link-btn{background:transparent;color:#475467;padding:6px}.icon-btn{background:transparent;font-size:25px;padding:0 6px}.view{display:none}.view.active{display:block}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.stat,.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.stat{padding:18px}.stat strong{display:block;font-size:28px}.stat span{color:var(--muted)}.grid.two{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}.panel{padding:18px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.panel-head h2{font-size:18px;margin:0}.toolbar{display:flex;gap:10px;margin-bottom:14px}.toolbar input{flex:1}.toolbar input,.toolbar select,input,select,textarea{border:1px solid #cfd6dd;border-radius:9px;padding:10px;background:#fff;width:100%}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;border-bottom:1px solid #edf0f2;padding:11px 8px;vertical-align:top}.table th{font-size:12px;color:var(--muted);text-transform:uppercase}.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef1f4;font-size:12px}.badge.ok{background:#dcfae6;color:var(--ok)}.badge.warn{background:#fff3d6;color:#8b5e00}.actions{display:flex;gap:6px;flex-wrap:wrap}.empty{color:var(--muted);padding:20px 0;text-align:center}.card-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #edf0f2}.card-row:last-child{border-bottom:0}.muted{color:var(--muted);font-size:13px}dialog{border:0;border-radius:16px;padding:0;width:min(760px,94vw);box-shadow:0 24px 80px rgba(0,0,0,.28)}dialog::backdrop{background:rgba(11,18,25,.55)}dialog form,dialog>div:not(.dialog-head){padding:0 22px 22px}.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}.dialog-head h2{margin:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:18px}.form-grid label{font-size:13px;color:#344054}.form-grid input,.form-grid select,.form-grid textarea{margin-top:5px}.full{grid-column:1/-1}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.tabs{display:flex;gap:8px;margin:14px 0}.tab{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;cursor:pointer}.tab.active{background:#222d37;color:#fff}.loadlist{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:12px}.load-head{display:grid;grid-template-columns:1fr 90px 110px 110px 80px;gap:8px;background:#f6f7f8;padding:10px;font-weight:700;font-size:12px}.load-row{display:grid;grid-template-columns:1fr 90px 110px 110px 80px;gap:8px;padding:9px 10px;border-top:1px solid #edf0f2;align-items:center}.load-row input,.load-row select{padding:7px}.checkbox{width:18px;height:18px}.notice{background:#fff8e7;border:1px solid #f7d77b;padding:12px;border-radius:10px;margin:12px 0}@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}main{padding:18px}.stats{grid-template-columns:1fr 1fr}.grid.two{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.load-head,.load-row{grid-template-columns:1fr 70px 90px}.load-head>*:nth-child(4),.load-head>*:nth-child(5),.load-row>*:nth-child(4),.load-row>*:nth-child(5){display:none}}
.template-card{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 4px;border-bottom:1px solid #edf0f2}.load-toolbar{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;margin:12px 0}.load-head,.load-row{grid-template-columns:minmax(220px,1fr) 85px 100px 130px 70px 44px}.mini{padding:7px 10px}@media(max-width:900px){.load-toolbar{grid-template-columns:1fr 1fr}.load-head,.load-row{grid-template-columns:1fr 70px 85px 44px}.load-head>*:nth-child(4),.load-head>*:nth-child(5),.load-row>*:nth-child(4),.load-row>*:nth-child(5){display:none}}
@media print{.sidebar,.topbar,.dialog-head,.tabs,.load-toolbar,.icon-btn{display:none!important}body{background:#fff}dialog{position:static;width:100%;box-shadow:none}dialog::backdrop{display:none}.load-row select,.load-row input{border:0}.load-row .danger{display:none}.load-head,.load-row{grid-template-columns:1fr 80px 90px 130px 70px}}

.material-thumb{width:58px;height:58px;border-radius:10px;object-fit:cover;border:1px solid var(--line);background:#f4f6f8;display:grid;place-items:center;font-size:22px}.material-thumb.tiny{width:42px;height:42px;border-radius:8px}.material-thumb.placeholder{color:#98a2b3}.image-upload-row{display:flex;gap:18px;align-items:center}.image-preview{width:170px;height:120px;border:1px dashed #b9c2cc;border-radius:12px;background:#f7f8fa;display:grid;place-items:center;overflow:hidden;color:var(--muted)}.image-preview img{width:100%;height:100%;object-fit:contain}.image-upload-row .secondary{margin-bottom:8px}.load-head,.load-row{grid-template-columns:52px minmax(220px,1fr) 85px 100px 130px 70px 44px}@media(max-width:900px){.image-upload-row{align-items:flex-start}.load-head,.load-row{grid-template-columns:44px 1fr 70px 44px}.load-head>*:nth-child(4),.load-head>*:nth-child(5),.load-head>*:nth-child(6),.load-row>*:nth-child(4),.load-row>*:nth-child(5),.load-row>*:nth-child(6){display:none}}@media print{.load-head,.load-row{grid-template-columns:52px 1fr 80px 90px 130px 70px 44px}}
.doc-builder{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}.doc-builder h3{margin:0;font-size:16px}.doc-row{display:grid;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #edf0f2}.offer-row{grid-template-columns:minmax(220px,1fr) 80px 90px 110px 120px 44px}.delivery-row{grid-template-columns:120px minmax(240px,1fr) 90px 90px 44px}.doc-row input,.doc-row select{padding:8px}.doc-totals{margin-left:auto;margin-top:14px;max-width:360px}.doc-totals>div{display:flex;justify-content:space-between;padding:6px 0}.doc-totals>div:last-child{font-size:17px;border-top:1px solid var(--line);margin-top:4px;padding-top:10px}@media(max-width:900px){.offer-row{grid-template-columns:1fr 70px 80px 44px}.offer-row>*:nth-child(4),.offer-row>*:nth-child(5){display:none}.delivery-row{grid-template-columns:100px 1fr 70px 44px}.delivery-row>*:nth-child(4){display:none}}

.project-file-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding-top:18px}.project-file-head h3{font-size:22px;margin:3px 0 4px}.project-data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}.info-card{border:1px solid var(--line);background:#fafbfc;border-radius:12px;padding:14px;min-height:86px}.info-card span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}.info-card strong{display:block;font-size:15px}.info-card small{display:block;color:var(--muted);margin-top:3px}.project-data-section{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}.project-data-section h4{margin:0 0 6px}.project-data-section p{margin:0;white-space:pre-wrap}.project-file-actions{padding:0!important}@media(max-width:700px){.project-data-grid{grid-template-columns:1fr}.project-file-head{flex-direction:column}}

/* V4.3 – Projektfilter */
.project-filterbar{display:grid;grid-template-columns:190px minmax(360px,1fr) 145px;gap:10px;align-items:center}
.project-filterbar #project-search{width:100%;min-width:0}
.project-filterbar #project-filter-field{width:190px}
.project-filterbar #status-filter{width:145px}
@media(max-width:900px){
  .project-filterbar{grid-template-columns:1fr}
  .project-filterbar #project-filter-field,.project-filterbar #status-filter{width:100%}
}

/* V4.4 – Outlook-ähnlicher Monatskalender */
.calendar-panel{padding:18px}
.calendar-head{align-items:flex-start}
.calendar-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.calendar-title-row{display:flex;align-items:center;justify-content:space-between;margin:2px 0 10px}
.calendar-title-row h3{margin:0;font-size:22px}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;overflow:hidden;background:#f8fafb}
.calendar-weekdays>div{padding:9px 8px;font-size:12px;font-weight:700;color:var(--muted);text-align:center;border-right:1px solid var(--line)}
.calendar-weekdays>div:last-child{border-right:0}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:minmax(118px,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.calendar-day{position:relative;min-width:0;padding:7px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;cursor:pointer}
.calendar-day.outside{background:#f7f8fa;color:#98a2b3}
.calendar-day.today{background:#fff9e8}
.calendar-day:hover{background:#f9fbfc}
.calendar-day.today:hover{background:#fff6d9}
.calendar-day-number{display:flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:50%;font-size:13px;font-weight:700;margin-left:auto}
.calendar-day.today .calendar-day-number{background:var(--accent);color:#111}
.calendar-events{margin-top:4px;display:flex;flex-direction:column;gap:4px}
.calendar-event{border:0;border-left:4px solid #667085;background:#eef1f4;border-radius:5px;padding:5px 6px;text-align:left;font-size:11px;line-height:1.25;cursor:pointer;overflow:hidden}
.calendar-event strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-event span{display:block;color:#475467;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-event.build{border-left-color:#067647;background:#e8f7ee}
.calendar-event.change{border-left-color:#b54708;background:#fff3e8}
.calendar-event.control{border-left-color:#175cd3;background:#eef4ff}
.calendar-event.remove{border-left-color:#b42318;background:#fff0ef}
.calendar-event.other{border-left-color:#667085;background:#f2f4f7}
.calendar-more{font-size:11px;color:#475467;padding:2px 3px}
.calendar-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}
.calendar-legend span{display:flex;align-items:center;gap:5px}
.dot{width:9px;height:9px;border-radius:50%;background:#667085;display:inline-block}
.dot.build{background:#067647}.dot.change{background:#b54708}.dot.control{background:#175cd3}.dot.remove{background:#b42318}.dot.other{background:#667085}
@media(max-width:900px){
  .calendar-panel{overflow-x:auto}
  .calendar-grid,.calendar-weekdays{min-width:700px}
}

/* V4.5 – separates Dispomodul */
.compact-select{width:auto!important;min-width:190px}
.dispo-notice{margin-bottom:16px}
.dispo-card{border:1px solid var(--line);border-radius:12px;padding:15px;margin-bottom:12px;background:#fff}
.dispo-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dispo-card h3{margin:0 0 3px;font-size:17px}
.dispo-meta{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin:14px 0}
.dispo-meta>div{background:#f7f8fa;border-radius:9px;padding:9px 10px}
.dispo-meta small{display:block;color:var(--muted);font-size:11px;margin-bottom:2px}
.dispo-status{font-weight:700}
.dispo-status.sent{background:#fff3d6;color:#8b5e00}
.dispo-status.accepted{background:#dcfae6;color:#067647}
.dispo-status.rejected{background:#fee4e2;color:#b42318}
.dispo-reason{border-left:3px solid #b42318;padding-left:10px;margin:10px 0;color:#7a271a}
.dispo-actions{display:flex;gap:8px;flex-wrap:wrap}
.accept-btn{background:#dcfae6;color:#067647;font-weight:700}
.reject-btn{background:#fee4e2;color:#b42318;font-weight:700}
.send-dispo-btn{background:#e8f1ff;color:#175cd3}
@media(max-width:900px){.dispo-meta{grid-template-columns:1fr 1fr}.dispo-card-head{flex-direction:column}.compact-select{width:100%!important}}

/* SEFG 5.0 – zusammenhängende, scrollbar bleibende Sidebar */
@media(min-width:901px){
  .sidebar{
    position:sticky;
    top:0;
    height:100vh;
    max-height:100vh;
    overflow-y:auto;
    overflow-x:hidden;
    align-self:start;
  }

  .sidebar > #nav{
    flex:0 0 auto;
    min-height:0;
  }

  .sidebar .nav-spacer{
    flex:0 0 auto;
    min-height:0;
    height:0;
  }

  .sidebar > .sidebar-footer{
    margin-top:12px;
    flex:0 0 auto;
  }
}

/* V4.9 Dispomodul */
#nav{display:flex;flex-direction:column;min-height:0}
.nav-spacer{flex:1;min-height:24px}.nav-group{border-top:1px solid rgba(255,255,255,.12);padding-top:8px}
.nav-group-toggle{display:flex!important;justify-content:space-between;align-items:center;width:100%}.nav-submenu{display:none;padding-left:10px}.nav-group.open .nav-submenu{display:block}
.nav-subitem{font-size:13px!important;padding-left:18px!important}.nav-chevron{transition:.2s}.nav-group.open .nav-chevron{transform:rotate(180deg)}
.dispo-plan-card{border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;background:#fff}
.dispo-plan-grid{display:grid;grid-template-columns:1.1fr .8fr 1fr 1fr;gap:10px;margin:12px 0}.dispo-plan-grid>div{background:#f7f8fa;border-radius:8px;padding:9px}.dispo-plan-grid small{display:block;color:var(--muted);font-size:11px}
select[multiple]{min-height:120px}.resource-tags{display:flex;gap:4px;flex-wrap:wrap}.resource-tag{font-size:11px;background:#eef1f4;border-radius:999px;padding:3px 7px}
.dispo-calendar-panel{overflow-x:auto}.dispo-calendar-weekdays,.dispo-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(160px,1fr));min-width:1120px}
.dispo-calendar-weekdays{border:1px solid var(--line);border-bottom:0;background:#f8fafb}.dispo-calendar-weekdays>div{padding:9px;text-align:center;font-size:12px;font-weight:700;border-right:1px solid var(--line)}
.dispo-calendar-grid{grid-auto-rows:minmax(210px,auto);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.dispo-cal-day{padding:7px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.dispo-cal-day.outside{background:#f7f8fa}.dispo-cal-day.today{background:#fff9e8}.dispo-cal-date{text-align:right;font-weight:800;font-size:12px}
.dispo-cal-job{display:block;width:100%;border:1px solid var(--line);border-left:4px solid #175cd3;border-radius:7px;background:#eef4ff;padding:6px;margin:5px 0;text-align:left;font-size:11px}.dispo-cal-job strong,.dispo-cal-job span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dispo-cal-job span{color:#475467}
.due-warning{font-weight:700;color:#b54708}.due-danger{font-weight:700;color:#b42318}

.login-screen{position:fixed;inset:0;z-index:9999;background:#111923;display:grid;place-items:center;padding:20px}.login-screen.hidden{display:none}
.login-card{width:min(420px,94vw);background:#fff;border-radius:18px;padding:28px;box-shadow:0 28px 90px rgba(0,0,0,.45)}.login-card h1{margin:12px 0 4px}
.login-card label{display:block;margin-top:14px;font-size:13px;color:#344054}.login-card label input,.login-card label select{margin-top:5px}
.login-brand{color:#17212b;margin-bottom:12px}.login-brand span{color:#667085}.login-button{width:100%;margin-top:18px}.login-error{min-height:22px;color:#b42318;font-size:13px;padding-top:7px}
.login-hint{margin-top:14px;padding:10px;border-radius:9px;background:#f2f4f7;color:#667085;font-size:11px}.signed-user{padding:8px 4px;border-top:1px solid rgba(255,255,255,.12)}

#activation-screen {
  display:flex;
  align-items:center;
  justify-content:center;
}

#activation-screen .login-card {
  width:min(420px,94vw);
  margin:0 auto;
}

.signed-user strong{display:block}.nav-logout{width:100%;border:0;background:#24313e;color:#fff;border-radius:8px;padding:8px 10px;margin:5px 0 12px;text-align:left;cursor:pointer}.role-hidden{display:none!important}

/* V4.15 Monteur-Oberfläche */
.monteur-nav-group{border-top:1px solid rgba(255,255,255,.12);padding-top:8px}
.monteur-panel{max-width:1100px}
.monteur-job{border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px;background:#fff}
.monteur-job-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.monteur-job h3{margin:0 0 4px}.monteur-job-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:13px 0}
.monteur-job-grid>div{background:#f7f8fa;border-radius:9px;padding:9px}.monteur-job-grid small{display:block;color:var(--muted);font-size:11px}
.monteur-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-top:10px}
.monteur-photo-grid img{width:100%;aspect-ratio:1.4;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.work-status{font-weight:700}.work-status.open{background:#fff3d6;color:#8b5e00}.work-status.done{background:#dcfae6;color:#067647}
@media(max-width:700px){
  .monteur-job-grid{grid-template-columns:1fr 1fr}
  .monteur-job-head{flex-direction:column}
  .monteur-panel{padding:12px}
}

/* V4.16 Einstellungen & Personalstamm */
.settings-nav-group{border-top:1px solid rgba(255,255,255,.12);padding-top:8px}
.settings-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.settings-card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.settings-card strong{display:block;margin-bottom:6px}.settings-card span{font-size:13px;color:var(--muted)}
.employee-function{font-weight:700}
@media(max-width:800px){.settings-cards{grid-template-columns:1fr}}

/* V4.17 Material & Logistik */
.logistics-nav-group{border-top:1px solid rgba(255,255,255,.12);padding-top:8px}

/* V4.18 Kundenstamm */
.check-row{display:flex!important;align-items:center;gap:9px}.check-row input{width:auto!important;margin:0!important}
.nested-form{padding:12px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}.nested-form.hidden{display:none}

/* V4.20 Projektjournal */
.project-journal-compose{border:1px solid var(--line);border-radius:12px;padding:14px;background:#f8fafc;margin:14px 0}
.project-journal-compose label{display:block}.project-journal-compose textarea{margin-top:6px}.project-journal-compose button{margin-top:10px}
.journal-list{display:flex;flex-direction:column;gap:10px}.journal-entry{border-left:4px solid #98a2b3;border-radius:8px;background:#fff;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px}
.journal-meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin-bottom:7px}.journal-meta strong{color:var(--text)}
.journal-text{white-space:pre-wrap;line-height:1.45}

/* V4.22 Ladelistenlogik */
.loadlist-hint{margin:12px 0}

/* V4.23 – Materialstamm-Verknüpfung in Ladeliste und Aufmaß */
.delivery-material-row{
  display:grid;
  grid-template-columns:380px 120px 95px 120px 38px;
  gap:8px;
  align-items:center;
  justify-content:start;
  width:100%;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}

.delivery-material-row > *{
  min-width:0;
}
.delivery-material-main{display:grid;grid-template-columns:52px 1fr;gap:9px;align-items:center;min-width:0}
.delivery-material-info{min-width:0}.delivery-material-info select,.delivery-material-info input{width:100%}.delivery-material-info .muted{margin-top:4px}
.delivery-unit{font-size:13px;color:var(--muted)}
.measurement-material-row{display:grid;grid-template-columns:52px minmax(260px,1fr) 110px 70px 38px;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
@media(max-width:900px){
  .delivery-material-row{grid-template-columns:1fr 100px 85px 60px 38px}
  .measurement-material-row{grid-template-columns:45px 1fr 90px 60px 38px}
}

/* V4.24 – einklappbare Projekt-/Einsatzdaten in der Ladeliste */
.loadlist-header-box{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden;background:#fff}
.loadlist-header-toggle{width:100%;border:0;background:#f7f8fa;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;cursor:pointer;color:var(--text)}
.loadlist-header-toggle strong{display:block;font-size:14px}.loadlist-header-toggle small{display:block;color:var(--muted);font-size:11px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:760px}
.loadlist-toggle-symbol{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:#fff;border:1px solid var(--line);font-size:20px;line-height:1;font-weight:700;flex:0 0 auto}
.loadlist-header-content{padding:14px;max-height:900px;opacity:1;transition:max-height .2s ease,opacity .15s ease,padding .2s ease}
.loadlist-header-box.collapsed .loadlist-header-content{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden}
.loadlist-header-box.collapsed .loadlist-header-toggle{background:#fff}

/* V4.25 – einheitliche Materialsuche */
.material-combobox{width:100%;min-width:0}
.delivery-material-info datalist{display:none}

/* V4.26 – Excel-artige Materialeingabe */
.excel-row{position:relative}
.excel-material-cell{position:relative}
.excel-input{height:36px;border-radius:4px!important;border:1px solid var(--line)!important;background:#fff!important;padding:6px 8px!important}
.excel-input:focus{outline:2px solid rgba(23,92,211,.18);border-color:#175cd3!important}
.excel-cell-meta{font-size:10px;margin-top:3px}
.material-suggest-box{
  display:none;
  position:absolute;
  left:0;
  top:41px;
  z-index:200;
  width:620px;
  max-width:min(620px, calc(100vw - 80px));
  max-height:330px;
  overflow-y:auto;
  overflow-x:hidden;
  background:#fff;
  border:1px solid #cfd6dd;
  border-radius:9px;
  box-shadow:0 14px 34px rgba(16,24,40,.18);
}

.material-suggest-box.open{
  display:block;
}

.material-suggest-row{
  display:grid;
  grid-template-columns:46px 100px minmax(260px,1fr) 120px;
  align-items:center;
  width:100%;
  min-height:42px;
  gap:14px;
  padding:9px 12px;
  border:0;
  border-bottom:1px solid #eef1f4;
  background:#fff;
  text-align:left;
  cursor:pointer;
  font-size:13px;
}

.material-suggest-row:last-child{
  border-bottom:0;
}

.material-suggest-row:hover,
.material-suggest-row.active{
  background:#eef4ff;
}

.material-suggest-code{
  font-weight:750;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.material-suggest-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.material-suggest-meta{
  color:var(--muted);
  text-align:right;
  white-space:nowrap;
  font-size:12px;
}

.material-suggest-empty{
  padding:14px 12px;
  color:var(--muted);
  font-size:13px;
}

@media(max-width:700px){
  .material-suggest-box{
    width:min(620px, calc(100vw - 40px));
    max-width:calc(100vw - 40px);
  }

  .material-suggest-row{
    grid-template-columns:90px minmax(150px,1fr) 70px;
    gap:8px;
  }
}

/* V4.27 – Dokumentdesigner */
.document-designer{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:22px;align-items:start}
.document-design-controls{display:flex;flex-direction:column;gap:12px}.document-design-controls label{font-size:12px;color:var(--muted)}
.document-design-controls label input,.document-design-controls label select,.document-design-controls label textarea{margin-top:5px}
.docdesign-checks{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#f8fafc}
.docdesign-checks label{display:flex;align-items:center;gap:8px;color:var(--text)}.docdesign-checks input{width:auto!important;margin:0!important}
.doc-logo-actions{margin-top:-5px}.document-preview-wrap{min-width:0}.preview-label{margin-bottom:8px}
.document-preview{background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(16,24,40,.08);padding:28px;min-height:620px}
.preview-doc-head{display:flex;justify-content:space-between;gap:20px;border-bottom:4px solid;padding-bottom:12px}.preview-doc-head>div strong,.preview-doc-head>div small{display:block}.preview-logo{max-width:130px;max-height:58px;object-fit:contain;margin-bottom:8px}
.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}.preview-grid>div{border-bottom:1px solid #eaecf0;padding-bottom:8px}.preview-grid small,.preview-grid span{display:block;color:#667085;font-size:10px}.preview-grid strong{display:block;margin:2px 0;font-size:12px}
.preview-table{width:100%;border-collapse:collapse}.preview-table th,.preview-table td{padding:8px;border-bottom:1px solid #eaecf0;text-align:left;font-size:11px}.preview-table th{border-bottom:2px solid}
.preview-signatures{display:flex;gap:60px;margin-top:60px;font-size:11px}.preview-footer{margin-top:50px;border-top:1px solid #eaecf0;padding-top:10px;color:#667085;font-size:10px}
@media(max-width:1000px){.document-designer{grid-template-columns:1fr}.document-preview{min-height:480px}}

/* V4.28 – Navigation / QR */
.preview-navigation{display:flex;align-items:center;gap:12px;border:1px solid #eaecf0;border-radius:8px;padding:10px;margin:14px 0}
.preview-qr-placeholder{width:62px;height:62px;display:grid;place-items:center;border:3px solid #101828;font-weight:800;letter-spacing:1px}
.preview-navigation strong,.preview-navigation span{display:block}.preview-navigation span{font-size:10px;color:#667085;margin-top:3px}

/* V4.29 Textbausteine */
.textblock-insert-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin:6px 0 8px}
.textblock-preview{max-width:520px;white-space:pre-wrap;max-height:76px;overflow:hidden;color:var(--muted);font-size:12px}

/* V4.31 – Angebotspositionen kompakt */
.offer-position-card{border-bottom:1px solid var(--line);padding:5px 0 8px}
.offer-row-main{grid-template-columns:minmax(220px,2fr) 72px 92px 110px 95px 155px 105px 38px!important;align-items:center}
.holding-inline-controls{display:grid;grid-template-columns:70px 78px;gap:6px;align-items:center}
.holding-inline-placeholder{min-height:1px}
.offer-holding-calc{margin:5px 38px 0 0;padding:6px 9px;background:#f8fafc;border-radius:6px;font-size:11px;color:var(--muted);text-align:right}
.offer-holding-calc strong{color:var(--text)}

/* V4.32 – Vorhaltung über Einheit Tag/Stk. */
.offer-row-main{grid-template-columns:minmax(240px,2fr) 75px 105px 105px 85px 110px 38px!important}
.holding-days-inline{width:100%}

/* V4.33 – Spaltenüberschriften Angebotspositionen */
.offer-column-head{display:grid;grid-template-columns:minmax(240px,2fr) 75px 105px 105px 85px 110px 38px;gap:8px;align-items:end;padding:0 0 6px;margin-bottom:2px;border-bottom:1px solid var(--line);font-size:11px;font-weight:700;color:var(--muted)}
.offer-column-head span{padding:0 3px}

/* V4.35 – Leistungsumfang & Projekt-Timeline */
.project-scope-box{border:1px solid var(--line);border-radius:10px;padding:12px;background:#f8fafc}
.scope-title{font-size:12px;font-weight:700;margin-bottom:9px}
.scope-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.scope-check-grid label{display:flex;align-items:center;gap:8px;font-size:13px}.scope-check-grid input{width:auto!important;margin:0!important}
.service-chip-row{display:flex;gap:7px;flex-wrap:wrap}.service-chip{display:inline-block;padding:5px 9px;border-radius:999px;background:#eef4ff;color:#175cd3;font-size:12px;font-weight:700}
.journal-filterbar{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.journal-filterbar .active-filter{background:#17212b;color:#fff}
.journal-entry.system-event{border-left-color:#175cd3;background:#f8fbff}.journal-entry.manual-note{border-left-color:#12b76a;background:#fbfffc}
.journal-meta>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.journal-type{font-size:9px;font-weight:800;padding:3px 5px;border-radius:4px;background:#eef1f4;color:#475467}
.system-event .journal-type{background:#eef4ff;color:#175cd3}.manual-note .journal-type{background:#ecfdf3;color:#067647}
.journal-category{font-size:10px;padding:2px 6px;border-radius:999px;background:#f2f4f7;color:#667085}.journal-details{margin-top:5px;color:var(--muted);font-size:12px}

/* V4.36 – Individualisierung */
.customization-section{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}
.customization-table-head{font-size:11px;font-weight:700;color:var(--muted);padding:0 4px 6px}
.scope-config-grid{display:grid;grid-template-columns:70px minmax(220px,1fr) 120px 44px;gap:8px;align-items:center}
.customization-row{padding:7px 4px;border-top:1px solid #eef1f4}.customization-row>input[type="checkbox"]{width:auto!important}
.order-actions{display:flex;gap:5px}.dashboard-config-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 4px;border-top:1px solid #eef1f4}
.dashboard-config-row label{display:flex;align-items:center;gap:9px}.dashboard-config-row input{width:auto!important;margin:0!important}
@media(max-width:700px){.scope-config-grid{grid-template-columns:60px 1fr 90px 38px}}

/* V4.37 – Kontrollfahrten */
.control-route-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,.7fr) auto;gap:12px;align-items:end;margin:18px 0}
.control-route-actions{padding-bottom:1px}.control-rides-grid{align-items:start}.control-project-row{padding:9px 5px;border-bottom:1px solid var(--line)}
.control-project-row label{display:flex;align-items:flex-start;gap:9px}.control-project-row input{width:auto!important;margin-top:3px!important}.control-project-row span,.control-project-row small{display:block}
.control-project-row small,.control-route-stop small{color:var(--muted);margin-top:3px}.disabled-row{opacity:.5}
.control-route-stop{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--line)}
.control-route-stop small{display:block}.route-stop-number{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#eef4ff;color:#175cd3;font-weight:800;font-size:12px}
.control-route-summary{margin-top:10px}@media(max-width:800px){.control-route-toolbar{grid-template-columns:1fr}.control-rides-grid{grid-template-columns:1fr!important}}

/* V4.40 – realistische Anmeldung */
.login-card label{display:block;margin-top:12px}
.login-card input{width:100%;box-sizing:border-box}
#login-identifier,#login-password{min-height:42px}

/* V4.41 UI-Master – ruhige Projektübersicht */
.project-table td{vertical-align:middle}
.project-title-link{padding:0;border:0;background:transparent;color:var(--text);font:inherit;font-weight:750;text-align:left;cursor:pointer}
.project-title-link:hover{color:#175cd3;text-decoration:underline;background:transparent}
.project-action-col{width:52px}.project-action-cell{width:52px;text-align:right;overflow:visible!important}
.project-row-menu{position:relative;display:inline-block}
.project-row-menu>summary{list-style:none;width:34px;height:30px;border:1px solid var(--line);border-radius:7px;display:grid;place-items:center;cursor:pointer;font-size:20px;line-height:1;color:var(--muted);background:#fff;user-select:none}
.project-row-menu>summary::-webkit-details-marker{display:none}.project-row-menu>summary:hover{background:#f8fafc;color:var(--text)}
.project-row-menu-panel{position:absolute;z-index:50;right:0;top:36px;min-width:180px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 10px 28px rgba(15,23,42,.14);display:grid;gap:3px;text-align:left}
.project-row-menu-panel button{width:100%;border:0;background:transparent;color:var(--text);text-align:left;padding:8px 10px;border-radius:6px;font-weight:600;cursor:pointer}
.project-row-menu-panel button:hover{background:#f2f4f7}.project-row-menu-panel .danger-text{color:#b42318}.project-row-menu-panel .danger-text:hover{background:#fef3f2}


/* V4.42 UI-Master – Projekt-Dokumentenablage */
.document-hub-note{display:flex;gap:12px;align-items:flex-start;background:#eef5ff;border:1px solid #cfe0ff;border-radius:12px;padding:14px 16px;margin:14px 0;color:#243b5a}.document-hub-note strong{white-space:nowrap}.document-hub-note span{font-size:13px;line-height:1.45}.document-upload-panel{border:1px solid #d8dee8;border-radius:12px;padding:16px;margin:14px 0;background:#fafbfd}.document-upload-panel h4{margin:0 0 4px}.document-upload-grid{
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(150px,.9fr) minmax(150px,1fr) 44px;
  gap:10px;
  align-items:end;
  width:100%;
}

.document-upload-grid > *{
  min-width:0;
}.document-file-picker{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  height:40px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  overflow:hidden;
  cursor:pointer;
}

.document-file-picker:hover{
  border-color:#b8c2d0;
  background:#fbfcfe;
}

.document-file-picker input[type="file"]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

.document-file-picker input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}


.document-file-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-size:13px;
}

.document-file-icon{
  flex:0 0 auto;
  color:var(--muted);
}

.document-upload-button{
  width:44px;
  min-width:44px;
  height:40px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
}.document-upload-grid label{display:grid;gap:6px;font-size:12px;color:#64748b}.document-upload-grid input,.document-upload-grid select{width:100%;box-sizing:border-box}.project-doc-list{display:grid;gap:10px}.project-doc-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid #dce2ea;border-radius:12px;padding:12px 14px;background:#fff}.project-doc-icon{width:38px;height:38px;border-radius:10px;background:#f1f4f8;display:grid;place-items:center;font-size:20px}.project-doc-main{display:grid;gap:5px;min-width:0}.project-doc-main>div:first-child{display:flex;gap:6px;flex-wrap:wrap}.project-doc-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-doc-card .actions{justify-content:flex-end}.tabs{flex-wrap:wrap}@media(max-width:850px){.document-upload-grid{grid-template-columns:1fr}.project-doc-card{grid-template-columns:42px 1fr}.project-doc-card .actions{grid-column:1/-1;justify-content:flex-start}}

/* 4.43 UI-Master: kaufmännische Projektakte */
.commercial-summary{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:12px;margin:16px 0 22px}
.commercial-block{margin-top:22px;padding-top:4px}
.commercial-block .section-head{margin-bottom:12px}
.commercial-block h4{margin:0 0 4px}
@media(max-width:1100px){.commercial-summary{grid-template-columns:repeat(2,minmax(180px,1fr))}}

/* V4.44 – projektübergreifende kaufmännische Navigation */
.commercial-ref{display:inline-block;padding:3px 6px;border-radius:6px;background:#f2f4f7;color:#475467;font-size:11px;font-weight:700;margin:2px 2px 2px 0}
.integration-state{font-size:12px;color:var(--muted)}

.ui-master-version{display:block;font-size:10px;line-height:1.2;margin-top:3px;opacity:.65;font-weight:600;letter-spacing:.02em}

/* SEFG 5.0 UI-Master – Auftragsbestätigungseditor */
.wide-dialog{width:min(1180px,96vw);max-width:1180px}
.commercial-editor-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin:14px 0;border:1px solid #d8e0e8;border-radius:10px;background:#f8fafc}
.commercial-editor-note strong{white-space:nowrap}
.commercial-editor-note span{color:var(--muted)}
.ab-item-table{display:grid;gap:6px}
.ab-item-row{
  display:grid;
  grid-template-columns:
    120px
    minmax(220px,1fr)
    80px
    90px
    90px
    130px
    120px;
  gap:8px;
  align-items:start;
}
.ab-item-row>input,.ab-item-row>div>input{width:100%;box-sizing:border-box}
.ab-item-head{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;padding:0 4px}
.ab-item-row:not(.ab-item-head){padding:8px;border:1px solid #e4e8ed;border-radius:9px;background:#fff}
.price-difference{display:block;margin-top:4px;color:#b54708;font-weight:700}
.commercial-total-line{display:flex;justify-content:flex-end;gap:22px;align-items:center;padding:14px 4px 0;font-size:15px}
.commercial-total-line strong{font-size:18px}
.field-help{display:block;margin-top:5px;color:var(--muted)}
.order-confirmation-actions{flex-wrap:wrap}
@media(max-width:900px){.ab-item-row{grid-template-columns:1fr 1fr}.ab-item-head{display:none}}

/* Fine-Tuning 5.0: Angebotssummen & interne Ladelistenfelder */
.offer-summary{margin-left:auto;width:min(420px,100%);display:grid;gap:0;border-top:1px solid #dfe4ea}
.offer-summary-row{display:grid;grid-template-columns:1fr 150px;gap:18px;padding:10px 4px;border-bottom:1px solid #e7eaee;align-items:center}
.offer-summary-row span{text-align:right}
.offer-summary-row strong{text-align:right;font-variant-numeric:tabular-nums}
.offer-summary-gross{font-size:16px;border-top:2px solid #25364a;border-bottom:3px double #25364a}
.offer-summary-gross strong{font-size:18px}
.field-internal{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-left:5px}

/* Fine-Tuning 2 – kaufmännischer Summenblock */
.offer-summary{margin:26px 0 0 auto!important;width:390px!important;max-width:100%;border-top:0!important}
.offer-summary-row{grid-template-columns:minmax(190px,1fr) 135px!important;column-gap:22px!important;padding:8px 0!important;border-bottom:0!important}
.offer-summary-row span{text-align:right!important;white-space:nowrap}
.offer-summary-row strong{text-align:right!important;white-space:nowrap;font-variant-numeric:tabular-nums}
.offer-summary-gross{margin-top:4px!important;padding-top:11px!important;border-top:2px solid #25364a!important;border-bottom:0!important;font-weight:700}

.journal-entry{
  height:auto;
  min-height:0;
  padding:8px 10px;
}

.journal-meta{
  margin-bottom:2px;
}

.journal-text{
  line-height:1.3;
  margin:0;
  padding:0;
  text-align:left;
  width:100%;
}

.journal-details{
  margin-top:3px;
  text-align:left;
}

/* SEFG 5.0 – VAO-Fristen */

.vao-warning-panel{
  margin-top:16px;
}

.vao-warning-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:13px 12px;
  margin-top:8px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
}

.vao-warning-row:first-child{
  margin-top:0;
}

.vao-warning-row.upcoming{
  border-left:4px solid #b54708;
  background:#fffaf2;
}

.vao-warning-row.expired{
  border-left:4px solid var(--danger);
  background:#fff5f4;
}

.vao-warning-icon{
  width:34px;
  height:34px;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-weight:900;
}

.vao-warning-row.upcoming .vao-warning-icon{
  background:#fff3d6;
  color:#8b5e00;
}

.vao-warning-row.expired .vao-warning-icon{
  background:#fee4e2;
  color:var(--danger);
}

.vao-warning-main{
  min-width:0;
}

.vao-warning-main strong{
  display:block;
  margin-bottom:3px;
}

@media(max-width:700px){

  .vao-warning-row{
    grid-template-columns:38px 1fr;
  }

  .vao-warning-row .secondary{
    grid-column:1/-1;
    width:100%;
  }
}

/* SEFG 5.0 – modulares Fristen- & Warnzentrum */

.warning-dashboard-panel{
  margin-top:16px;
}

.warning-toolbar{
  display:grid;
  grid-template-columns:220px 220px;
  gap:10px;
  margin:14px 0 18px;
}

.warning-count{
  font-size:13px;
  color:var(--muted);
}

.warning-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:13px 12px;
  margin-top:8px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
}

.warning-row:first-child{
  margin-top:0;
}

.warning-row.warning{
  border-left:4px solid #b54708;
  background:#fffaf2;
}

.warning-row.due{
  border-left:4px solid #d97706;
  background:#fff8eb;
}

.warning-row.overdue{
  border-left:4px solid var(--danger);
  background:#fff5f4;
}

.warning-icon{
  width:34px;
  height:34px;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-weight:900;
}

.warning-row.warning .warning-icon,
.warning-row.due .warning-icon{
  background:#fff3d6;
  color:#8b5e00;
}

.warning-row.overdue .warning-icon{
  background:#fee4e2;
  color:var(--danger);
}

.warning-main{
  min-width:0;
}

.warning-title-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:3px;
}

.warning-module{
  display:inline-block;
  padding:3px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  background:#eef1f4;
  color:#475467;
}

.warning-module.core{
  background:#eef4ff;
  color:#175cd3;
}

.warning-module.dispo{
  background:#ecfdf3;
  color:#067647;
}

.warning-module.logistics{
  background:#f4ebff;
  color:#6941c6;
}

.warning-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.warning-state{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.warning-state.warning,
.warning-state.due{
  background:#fff3d6;
  color:#8b5e00;
}

.warning-state.overdue{
  background:#fee4e2;
  color:var(--danger);
}

@media(max-width:700px){

  .warning-toolbar{
    grid-template-columns:1fr;
  }

  .warning-row{
    grid-template-columns:38px 1fr;
  }

  .warning-actions{
    grid-column:1/-1;
    justify-content:flex-end;
  }
}

/* Angebot – Dialoglayout */

.offer-dialog{
  width:min(1300px, calc(100vw - 40px));
  max-width:1300px;
  max-height:92vh;
  padding:0;
  overflow:hidden;
}

.offer-dialog > form{
  display:flex;
  flex-direction:column;
  max-height:92vh;
  padding:22px;
  overflow-y:auto;
  overflow-x:hidden;
}

.offer-master-data{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:14px;
  margin-top:8px;
}

.offer-master-data label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.offer-description-section{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.offer-description-section > label{
  display:block;
  margin-bottom:7px;
}

.offer-description-section textarea{
  width:100%;
  resize:vertical;
  min-height:110px;
  margin-top:10px;
}

.offer-description-section .textblock-insert-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
}

.offer-position-section{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
}

.offer-items{
  width:100%;
  overflow:visible;
}

.offer-totals{
  width:360px;
  max-width:100%;
  margin:22px 0 0 auto;
}

.offer-dialog-actions{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
  position:sticky;
  bottom:-22px;
  background:#fff;
  z-index:5;
}

@media(max-width:750px){
  .offer-master-data{
    grid-template-columns:1fr;
  }

  .offer-totals{
    width:100%;
  }
}

/* Angebotspositionen */

.offer-column-head,
.offer-row{
  display:grid;
  grid-template-columns:
    minmax(260px, 1fr)
    80px
    120px
    120px
    110px
    120px
    118px;
  gap:10px;
  align-items:center;
}

.offer-column-head{
  padding:0 4px 8px;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  border-bottom:1px solid var(--line);
}

.offer-position-card{
  padding:10px 4px;
  border-bottom:1px solid var(--line);
}

.offer-row input,
.offer-row select{
  width:100%;
  min-width:0;
}

.offer-pos-total{
  text-align:right;
  white-space:nowrap;
}

.offer-pos-delete{
  width:36px;
  height:36px;
  padding:0;
  display:grid;
  place-items:center;
}

.offer-pos-holding-placeholder{
  text-align:center;
  color:var(--muted);
}

.offer-holding-calc{
  margin-top:7px;
  padding-left:2px;
  font-size:12px;
  color:var(--muted);
}

.offer-totals{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.offer-totals table{
  width:360px !important;
  max-width:100%;
  margin:0 !important;
}

@media(max-width:900px){

  .offer-column-head{
    display:none;
  }

  .offer-row{
    grid-template-columns:1fr 1fr;
  }

  .offer-pos-description{
    grid-column:1/-1;
  }

  .offer-pos-total{
    text-align:left;
  }

  .offer-pos-delete{
    justify-self:end;
  }
}

/* Angebot – Summenblock */

.offer-summary{
  width:360px;
  max-width:100%;
  margin-left:auto;
}

.offer-summary-row{
  display:grid;
  grid-template-columns:1fr 120px;
  gap:24px;
  align-items:center;
  padding:7px 0;
}

.offer-summary-row span{
  text-align:right;
  color:var(--muted);
}

.offer-summary-row strong{
  text-align:right;
  white-space:nowrap;
}

.offer-summary-gross{
  margin-top:5px;
  padding-top:12px;
  border-top:2px solid var(--line);
}

.offer-summary-gross span,
.offer-summary-gross strong{
  font-weight:800;
  color:var(--text);
}

.offer-summary-gross strong{
  font-size:17px;
}

/* Dokumentdesigner – Logo Editor */

#docdesign-header-zone{
  overflow:hidden;
}

.docdesign-logo-object{
  cursor:move;
  border:1px dashed transparent;
  box-sizing:border-box;
  z-index:5;
}

.docdesign-logo-object:hover{
  border-color:#175cd3;
}

.docdesign-logo-resize{
  position:absolute;
  right:-5px;
  bottom:-5px;
  width:12px;
  height:12px;
  border:2px solid #fff;
  border-radius:50%;
  background:#175cd3;
  cursor:nwse-resize;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.18);
}

.docdesign-preview-company strong{
  white-space:pre-line;
  display:block;
}

.preview-footer{
  white-space:pre-line;
}

/* Ausrichtungshilfen Dokumentdesigner */

#docdesign-header-zone::before,
#docdesign-header-zone::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:50;
  display:none;
}

#docdesign-header-zone::before{
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  border-left:1px dashed #175cd3;
}

#docdesign-header-zone::after{
  left:0;
  right:0;
  top:50%;
  height:1px;
  border-top:1px dashed #175cd3;
}

#docdesign-header-zone.show-center-x::before{
  display:block;
}

#docdesign-header-zone.show-center-y::after{
  display:block;
}

/* Frei verschiebbare Elemente im Dokumentkopf */

.docdesign-header-object{
  cursor:move;
  padding:5px 7px;
  border:1px dashed transparent;
  border-radius:4px;
  user-select:none;
  z-index:6;
}

.docdesign-header-object:hover,
.docdesign-header-object.selected{
  border-color:#175cd3;
  background:rgba(23,92,211,.04);
}

.docdesign-company-object{
  max-width:320px;
}

.docdesign-company-object strong{
  display:block;
  white-space:pre-line;
  line-height:1.35;
}

.docdesign-title-object{
  font-size:20px;
  font-weight:800;
  white-space:nowrap;
}

/* Dokumentdesigner – A4 Arbeitsfläche */

.document-preview{
  background:#eef1f4;
  padding:24px;
  overflow:auto;
}

.docdesign-a4-page{
  position:relative;

  width:794px;
  min-height:1123px;

  margin:0 auto;

  background:#fff;

  box-shadow:
    0 8px 30px rgba(15,23,42,.12);

  box-sizing:border-box;
}

.docdesign-a4-header{
  position:relative;

  height:190px;

  margin:0 48px;

  border-bottom:
    3px solid #175cd3;

  overflow:hidden;
}

.docdesign-a4-content{
  padding:
    28px 48px
    120px;
}

.docdesign-document-title{
  display:flex;
  justify-content:flex-end;

  margin-bottom:26px;
}

.docdesign-document-title h2{
  margin:0;
  font-size:24px;
}

.docdesign-content-placeholder{
  position:relative;
}

.docdesign-a4-footer{
  position:absolute;

  left:48px;
  right:48px;
  bottom:28px;

  min-height:40px;

  padding-top:10px;

  border-top:
    1px solid #d0d5dd;

  color:#667085;

  font-size:11px;

  white-space:pre-line;
}


#docdesign-header-zone{
  box-sizing:border-box;
}


.docdesign-logo-object{
  position:absolute;

  cursor:move;

  border:
    1px dashed transparent;

  box-sizing:border-box;

  z-index:5;
}

.docdesign-logo-object img{
  width:100%;
  height:100%;

  object-fit:contain;

  pointer-events:none;

  user-select:none;
}


.docdesign-header-object{
  position:absolute;

  cursor:move;

  padding:5px 7px;

  border:
    1px dashed transparent;

  border-radius:4px;

  box-sizing:border-box;

  user-select:none;

  z-index:6;
}


.docdesign-company-object{
  max-width:360px;
}

.docdesign-company-object strong{
  display:block;

  white-space:pre-line;

  line-height:1.35;
}


.docdesign-logo-object:hover,
.docdesign-logo-object.selected,
.docdesign-header-object:hover,
.docdesign-header-object.selected{
  border-color:#175cd3;

  background:
    rgba(23,92,211,.04);
}

/* Angebotsdokument – Leistungstext */

.offer-document-longtext{
  margin-top:6px;
  font-size:11px;
  line-height:1.45;
  font-weight:400;
  color:#475467;
}

/* =========================================
   Angebotsposition – Leistungstext Editor
   ========================================= */

.offer-long-description{
  width:70%;
  max-width:720px;
  min-width:420px;
  margin-top:10px;
  box-sizing:border-box;
}

.offer-long-description label{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.offer-long-description textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;

  min-height:75px;
  max-height:220px;

  padding:10px 12px;

  resize:vertical;

  overflow-x:hidden;
  overflow-y:auto;

  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}


/* =========================================
   Angebotsdokument – Langtext
   ========================================= */

.offer-document-longtext{
  display:block;

  margin-top:5px;

  font-size:11px;
  line-height:1.45;
  font-weight:400;
  color:#475467;

  white-space:pre-wrap;

  overflow-wrap:anywhere;
  word-wrap:break-word;
  word-break:break-word;

  max-width:100%;
}


/* Tabellenzellen dürfen nicht durch
   lange Texte auseinandergedrückt werden */

.offer-document-table{
  width:100%;
  table-layout:fixed;
}

.offer-document-table td,
.offer-document-table th{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ab-item-card{
  padding:10px 0;
  border-bottom:1px solid var(--line);
}

.ab-long-description{
  width:70%;
  max-width:720px;
  min-width:420px;
  margin-top:8px;
  margin-left:calc(16% + 10px);
}

.ab-long-description label{
  display:block;
  width:100%;
}

.ab-long-description textarea{
  display:block;
  width:100%;
  min-height:75px;
  max-height:220px;
  box-sizing:border-box;
  resize:vertical;
  overflow-x:hidden;
  overflow-y:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* =========================================
   Auftragsbestätigung – Leistungstext
   ========================================= */

.ab-document-table{
  width:100%;
  table-layout:fixed;
}

.ab-document-table th,
.ab-document-table td{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
  vertical-align:top;
}

.ab-document-longtext{
  display:block;
  max-width:100%;
  margin-top:5px;
  font-size:11px;
  line-height:1.45;
  font-weight:400;
  color:#475467;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* =========================================================
   MARKIERUNGS-AUFMASS
   ========================================================= */

.marking-dialog{
  width:min(1220px,96vw);
  max-width:1220px;
  max-height:94vh;
}

.marking-dialog > form{
  display:flex;
  flex-direction:column;
  max-height:94vh;
  padding:0;
}

.marking-sheet{
  overflow-y:auto;
  padding:22px;
  background:#f4f6f8;
}


/* Kopf */

.marking-header-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:18px;
  margin-bottom:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
}

.marking-header-grid label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:12px;
  font-weight:700;
}

.marking-header-grid .full{
  grid-column:1 / -1;
}

.marking-header-grid input[readonly]{
  background:#f7f8fa;
}


/* Abschnitte */

.marking-section{
  margin-bottom:16px;
  padding:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
}

.marking-section h3{
  margin:0 0 14px;
  font-size:17px;
}

.marking-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:16px;
}

.marking-section-head h3{
  margin:0 0 3px;
}


/* Bildliche Markierungskarten */

.marking-visual-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.marking-visual-card{
  overflow:hidden;
  border:1px solid #d6dce3;
  border-radius:12px;
  background:#fff;
}

.marking-visual-preview{
  padding:14px;
  background:#343a40;
}

.road-preview{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:76px;
  overflow:hidden;
  border-radius:7px;
  background:#4b5056;
}

.road-preview::before,
.road-preview::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:rgba(255,255,255,.08);
}

.road-preview::before{
  top:18px;
}

.road-preview::after{
  bottom:18px;
}


/* echte Linienvorschau */

.road-line{
  position:relative;
  z-index:2;
  display:block;
  width:78%;
}

.road-line.solid{
  background:#f2c94c;
}

.road-line.solid.narrow{
  height:5px;
}

.road-line.solid.wide{
  height:10px;
}

.road-line.dashed{
  background:none;
}

.road-line.dashed::before{
  content:"";
  display:block;
  width:100%;
}

.road-line.dashed.narrow::before{
  height:5px;
  background:
    repeating-linear-gradient(
      to right,
      #f2c94c 0,
      #f2c94c 42px,
      transparent 42px,
      transparent 68px
    );
}

.road-line.dashed.wide::before{
  height:10px;
  background:
    repeating-linear-gradient(
      to right,
      #f2c94c 0,
      #f2c94c 42px,
      transparent 42px,
      transparent 68px
    );
}


/* Inhalt unter Vorschau */

.marking-visual-content{
  padding:14px;
}

.marking-visual-content > strong{
  display:block;
  font-size:15px;
}

.marking-visual-content > span{
  display:block;
  margin:2px 0 12px;
  color:var(--muted);
  font-size:12px;
}

.marking-add-button{
  margin-top:8px;
}


/* einzelne Teilstrecken */

.marking-length-row{
  display:grid;
  grid-template-columns:minmax(100px,1fr) 24px 36px;
  gap:6px;
  align-items:center;
  margin-top:6px;
}

.marking-length-row input{
  text-align:right;
}

.marking-length-total{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:9px;
  padding-top:8px;
  border-top:2px solid #344054;
  font-size:13px;
}


/* Furten / Haltelinien / Auskreuzen */

.marking-special-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.marking-special-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:700;
}


/* Piktogramme */

.marking-symbol-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(120px,1fr));
  gap:12px;
}

.marking-symbol-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  min-height:160px;
  padding:14px;
  border:1px solid #d6dce3;
  border-radius:12px;
  background:#fafafa;
  cursor:pointer;
}

.marking-symbol-card:hover{
  border-color:#98a2b3;
  background:#f7f8fa;
}

.marking-symbol{
  display:grid;
  place-items:center;
  width:74px;
  height:74px;
  font-size:52px;
  font-weight:800;
  line-height:1;
}

.marking-symbol.text{
  font-size:21px;
}

.marking-symbol-card input{
  width:90px;
  margin-top:auto;
  text-align:center;
}


/* Fahrbahnverhältnisse */

.marking-condition-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}

.marking-condition-grid label{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:9px;
  min-height:42px;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fafafa;
  line-height:1.2;
  cursor:pointer;
}

.marking-condition-grid label input[type="checkbox"]{
  flex:0 0 auto;
  width:18px !important;
  height:18px;
  margin:0 !important;
  padding:0;
}


/* Bemerkungen */

#marking-note{
  width:100%;
  min-height:110px;
  resize:vertical;
}


/* Tablet */

@media(max-width:900px){

  .marking-dialog{
    width:98vw;
    max-width:98vw;
  }

  .marking-sheet{
    padding:14px;
  }

  .marking-header-grid{
    grid-template-columns:1fr;
  }

  .marking-header-grid .full{
    grid-column:auto;
  }

  .marking-visual-grid{
    grid-template-columns:1fr;
  }

  .marking-special-grid{
    grid-template-columns:1fr 1fr;
  }

  .marking-symbol-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .marking-condition-grid{
    grid-template-columns:1fr 1fr;
  }

}


/* Smartphone */

@media(max-width:600px){

  .marking-dialog{
    width:100vw;
    max-width:100vw;
    height:100vh;
    max-height:100vh;
    border-radius:0;
  }

  .marking-dialog > form{
    max-height:100vh;
  }

  .marking-sheet{
    padding:10px;
  }

  .marking-header-grid,
  .marking-section{
    padding:13px;
    border-radius:9px;
  }

  .marking-special-grid,
  .marking-condition-grid{
    grid-template-columns:1fr;
  }

  .marking-symbol-grid{
    grid-template-columns:1fr 1fr;
  }

  .road-preview{
    height:68px;
  }

}

/* =========================================================
   MARKIERUNG – FURTEN / HALTELINIE / AUSKREUZUNGEN
   ========================================================= */

.marking-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.marking-feature-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
  border:1px solid #d6dce3;
  border-radius:12px;
  background:#fff;
  color:var(--text);
}

.marking-feature-preview{
  height:125px;
  padding:18px;
}

.road-surface{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#4b5056;
}

.road-surface::before,
.road-surface::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:rgba(255,255,255,.08);
}

.road-surface::before{
  top:22px;
}

.road-surface::after{
  bottom:22px;
}


/* Inhalt */

.marking-feature-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:14px;
}

.marking-feature-body > strong{
  display:block;
  font-size:15px;
}

.marking-feature-body > span{
  display:block;
  min-height:18px;
  margin:2px 0 13px;
  color:var(--muted);
  font-size:12px;
}


/* Eingabefeld mit Einheit */

.marking-value-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  margin-top:auto;
}

.marking-value-field input{
  min-width:0;
  text-align:right;
}

.marking-value-field > span{
  min-width:30px;
  color:var(--muted);
  font-size:12px;
}


/* Fußgänger- und Radwegfurt */

.ford-preview{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ford-preview span{
  display:block;
  background:#f2c94c;
}

.ford-preview.pedestrian{
  gap:10px;
}

.ford-preview.pedestrian span{
  width:34px;
  height:5px;
  border-radius:1px;
}

.ford-preview.cycle{
  gap:10px;
}

.ford-preview.cycle span{
  width:34px;
  height:10px;
  border-radius:1px;
}

/* Haltelinie */

.stop-line-preview{
  position:relative;
  z-index:2;
  width:82%;
  height:26px;
  background:#f2c94c;
}


/* Auskreuzungen */

.cross-preview{
  position:relative;
  z-index:2;
  width:82px;
  height:82px;
}

.cross-preview span{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  background:#f2c94c;
  transform-origin:center;
}

.cross-preview span:first-child{
  transform:
    translate(-50%,-50%)
    rotate(45deg);
}

.cross-preview span:last-child{
  transform:
    translate(-50%,-50%)
    rotate(-45deg);
}

.small-cross{
  width:62px;
  height:62px;
}

.small-cross span{
  height:7px;
}

.large-cross{
  width:94px;
  height:94px;
}

.large-cross span{
  height:9px;
}

.custom-cross{
  width:88px;
  height:72px;
}

.custom-cross span{
  height:7px;
}


/* Sondermaß */

.marking-dimension-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.marking-dimension-grid label,
.marking-custom-qty{
  font-size:11px;
  font-weight:700;
}

.marking-custom-qty{
  display:block;
  margin-top:10px;
}


/* Tablet */

@media(max-width:900px){

  .marking-feature-grid{
    grid-template-columns:1fr 1fr;
  }

}


/* Smartphone */

@media(max-width:600px){

  .marking-feature-grid{
    grid-template-columns:1fr;
  }

  .marking-feature-preview{
    height:105px;
  }

}

/* =========================================================
   MARKIERUNG – PFEILE & PIKTOGRAMME
   ========================================================= */

.marking-pictogram-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(140px,1fr));
  gap:14px;
}

.marking-pictogram-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
  border:1px solid #d6dce3;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}

.marking-pictogram-card:hover{
  border-color:#98a2b3;
}

.marking-pictogram-preview{
  height:150px;
  padding:16px;
}

.marking-pictogram-body{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:10px;
  padding:14px;
}

.marking-pictogram-body strong{
  display:block;
  text-align:center;
  font-size:14px;
}


/* =========================================
   Fahrbahnpfeile
   ========================================= */

.road-arrow{
  position:relative;
  width:90px;
  height:100px;
  z-index:2;
}

.arrow-shaft{
  position:absolute;
  background:#f2c94c;
  border-radius:2px;
}

.arrow-head{
  position:absolute;
  width:0;
  height:0;
}


/* Geradeaus */

.arrow-straight .arrow-shaft{
  left:39px;
  top:30px;
  width:12px;
  height:62px;
}

.arrow-straight .arrow-head{
  left:20px;
  top:3px;
  border-left:25px solid transparent;
  border-right:25px solid transparent;
  border-bottom:38px solid #f2c94c;
}


/* Links */

.arrow-left .arrow-shaft{
  left:35px;
  top:15px;
  width:12px;
  height:78px;
}

.arrow-left .arrow-shaft::after{
  content:"";
  position:absolute;
  top:35px;
  right:0;
  width:42px;
  height:12px;
  background:#f2c94c;
}

.arrow-left .arrow-head{
  left:-6px;
  top:34px;
  border-top:18px solid transparent;
  border-bottom:18px solid transparent;
  border-right:28px solid #f2c94c;
}


/* Rechts */

.arrow-right .arrow-shaft{
  left:43px;
  top:15px;
  width:12px;
  height:78px;
}

.arrow-right .arrow-shaft::after{
  content:"";
  position:absolute;
  top:35px;
  left:0;
  width:42px;
  height:12px;
  background:#f2c94c;
}

.arrow-right .arrow-head{
  right:-6px;
  top:34px;
  border-top:18px solid transparent;
  border-bottom:18px solid transparent;
  border-left:28px solid #f2c94c;
}


/* =========================================
   BUS
   ========================================= */

.road-text-symbol{
  position:relative;
  z-index:2;
  color:#f2c94c;
  font-size:38px;
  font-weight:900;
  letter-spacing:4px;
  transform:rotate(-90deg);
}


/* =========================================
   FAHRRAD
   ========================================= */

.bike-symbol{
  position:relative;
  z-index:2;
  width:110px;
  height:90px;
}

.bike-wheel{
  position:absolute;
  bottom:4px;
  width:35px;
  height:35px;
  border:6px solid #f2c94c;
  border-radius:50%;
}

.wheel-left{
  left:8px;
}

.wheel-right{
  right:8px;
}

.bike-frame{
  position:absolute;
  height:6px;
  background:#f2c94c;
  transform-origin:left center;
}

.frame-a{
  left:27px;
  top:55px;
  width:43px;
  transform:rotate(-55deg);
}

.frame-b{
  left:31px;
  top:53px;
  width:42px;
  transform:rotate(30deg);
}

.frame-c{
  left:47px;
  top:22px;
  width:36px;
  transform:rotate(65deg);
}

.bike-handle{
  position:absolute;
  left:66px;
  top:12px;
  width:28px;
  height:6px;
  background:#f2c94c;
  transform:rotate(-12deg);
}

.bike-seat{
  position:absolute;
  left:36px;
  top:20px;
  width:22px;
  height:6px;
  background:#f2c94c;
}


/* Tablet */

@media(max-width:1050px){

  .marking-pictogram-grid{
    grid-template-columns:repeat(3,1fr);
  }

}


/* Smartphone */

@media(max-width:600px){

  .marking-pictogram-grid{
    grid-template-columns:1fr 1fr;
  }

  .marking-pictogram-preview{
    height:125px;
  }

}

/* =========================================================
   MARKIERUNG – FAHRBAHNVERHÄLTNISSE
   ========================================================= */

.marking-condition-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.marking-condition-grid label{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;

  gap:10px;
  min-height:44px;
  padding:10px 12px;

  border:1px solid var(--line);
  border-radius:9px;

  background:#fafafa;

  font-size:13px;
  font-weight:500;
  line-height:1.2;

  cursor:pointer;
}

.marking-condition-grid label:hover{
  background:#f4f6f8;
  border-color:#b9c2cc;
}

.marking-condition-grid label input[type="checkbox"]{
  display:block;
  flex:0 0 18px;

  width:18px !important;
  height:18px !important;

  min-width:18px;
  max-width:18px;

  margin:0 !important;
  padding:0 !important;
}


/* angehakt etwas deutlicher */

.marking-condition-grid label:has(
  input[type="checkbox"]:checked
){
  background:#fff8e7;
  border-color:#f4b400;
}


/* Tablet */

@media(max-width:900px){

  .marking-condition-grid{
    grid-template-columns:1fr 1fr;
  }

}


/* Smartphone */

@media(max-width:600px){

  .marking-condition-grid{
    grid-template-columns:1fr;
  }

  .marking-condition-grid label{
    min-height:48px;
    font-size:14px;
  }

}

/* =========================================================
   MARKIERUNG – ECHTE SVG FAHRBAHNMARKIERUNGEN
   ========================================================= */

.marking-arrow-grid{
  grid-template-columns:
    repeat(5,minmax(145px,1fr));
}

.marking-road-svg{
  position:relative;
  z-index:2;

  width:86px;
  height:118px;

  overflow:visible;

  fill:#f2c94c;
  color:#f2c94c;
}

.marking-bike-svg{
  width:118px;
  height:92px;

  fill:none;
  stroke:#f2c94c;
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.marking-road-word{
  position:relative;
  z-index:2;

  color:#f2c94c;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:38px;
  font-weight:900;

  letter-spacing:3px;

  transform:rotate(-90deg);
}


/* Furtvorschau näher an echtem Aufmaßblatt */

.ford-preview{
  flex-direction:row;
}

.ford-preview.pedestrian span,
.ford-preview.cycle span{
  flex:0 0 auto;
}


@media(max-width:1050px){

  .marking-arrow-grid{
    grid-template-columns:
      repeat(3,1fr);
  }

}


@media(max-width:600px){

  .marking-arrow-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .marking-road-svg{
    width:72px;
    height:100px;
  }

}

/* =========================================================
   MARKIERUNG – AUSKREUZUNGEN SVG
   ========================================================= */

.marking-cross-svg{
  position:relative;
  z-index:2;

  overflow:visible;

  fill:none;
  stroke:#f2c94c;

  stroke-linecap:square;
  stroke-linejoin:miter;
}

.marking-cross-small{
  width:70px;
  height:70px;

  stroke-width:8;
}

.marking-cross-large{
  width:96px;
  height:96px;

  stroke-width:8;
}

.marking-cross-custom{
  width:104px;
  height:78px;

  stroke-width:7;
}

/* V4.43 – Kontrollaufträge / SOLL-IST */

.control-order-layout{
  display:grid;
  grid-template-columns:minmax(280px,.75fr) minmax(0,2fr);
  gap:18px;
  align-items:start;
}

.control-order-sidebar{
  border-right:1px solid var(--line);
  padding-right:18px;
}

.control-order-card{
  border:1px solid var(--line);
  border-radius:11px;
  padding:13px;
  margin-bottom:10px;
  background:#fff;
  cursor:pointer;
}

.control-order-card:hover{
  background:#f8fafc;
}

.control-order-card.active{
  border-color:#175cd3;
  box-shadow:0 0 0 1px #175cd3 inset;
  background:#f6f9ff;
}

.control-order-card-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.control-order-card h3{
  margin:2px 0 4px;
  font-size:15px;
}

.control-order-card-meta{
  margin-top:9px;
  font-size:12px;
  color:var(--muted);
}

.control-order-detail-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.control-order-detail-head h3{
  margin:3px 0;
  font-size:21px;
}

.control-order-stats{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:9px;
  margin:18px 0;
}

.control-order-stat{
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px;
  background:#fafbfc;
}

.control-order-stat strong{
  display:block;
  font-size:21px;
}

.control-order-stat span{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
}

.control-order-stat.warning{
  background:#fff8e7;
  border-color:#f7d77b;
}

.control-order-stat.success{
  background:#ecfdf3;
  border-color:#abefc6;
}

.control-order-info{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-bottom:20px;
}

.control-order-info>div{
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px;
}

.control-order-info small{
  display:block;
  color:var(--muted);
  font-size:11px;
}

.control-order-rides-head{
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:18px;
}

.control-order-rides-head h3{
  margin:0;
}

.control-ride-filters{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:8px;
  margin:12px 0;
}

.control-order-rhythm{
  border:1px solid var(--line);
  border-radius:11px;
  padding:14px;
  background:#fafbfc;
}

.control-order-rhythm h3{
  margin:0 0 3px;
}

.control-rhythm-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.control-report-missing{
  color:#b42318;
  font-weight:700;
}

.control-report-ok{
  color:#067647;
  font-weight:700;
}

@media(max-width:1100px){
  .control-order-layout{
    grid-template-columns:1fr;
  }

  .control-order-sidebar{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding-right:0;
    padding-bottom:15px;
  }

  .control-order-stats{
    grid-template-columns:repeat(3,1fr);
  }

  .control-order-info{
    grid-template-columns:repeat(2,1fr);
  }

  .control-ride-filters{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:700px){
  .control-order-stats,
  .control-order-info,
  .control-ride-filters,
  .control-rhythm-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   Vornotierungen – responsive Darstellung
   ========================================================= */

/* Tablet */
@media (max-width: 1100px) {
  .prenotification-table {
    font-size: 0.92rem;
  }

  .prenotification-table th,
  .prenotification-table td {
    padding-left: 10px;
    padding-right: 10px;
  }

  .prenotification-table .actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .prenotification-table .actions button {
    white-space: nowrap;
  }
}


/* Smartphone */
@media (max-width: 720px) {
  .prenotification-table,
  .prenotification-table thead,
  .prenotification-table tbody,
  .prenotification-table tr,
  .prenotification-table th,
  .prenotification-table td {
    display: block;
    width: 100%;
  }

  .prenotification-table thead {
    display: none;
  }

  .prenotification-table tbody {
    display: grid;
    gap: 12px;
  }

  .prenotification-table tr {
    background: var(--panel, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 14px;
  }

  .prenotification-table td {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 7px 0;
    border: 0;
  }

  .prenotification-table td::before {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted, #6b7280);
  }

  .prenotification-table td:nth-child(1)::before {
    content: "Projekt";
  }

  .prenotification-table td:nth-child(2)::before {
    content: "Ort / Bereich";
  }

  .prenotification-table td:nth-child(3)::before {
    content: "Gültig ab";
  }

  .prenotification-table td:nth-child(4)::before {
    content: "Gültig bis";
  }

  .prenotification-table td:nth-child(5)::before {
    content: "Vornotiert am";
  }

  .prenotification-table td:nth-child(6)::before {
    content: "Mitarbeiter";
  }

  .prenotification-table td:nth-child(7) {
    display: block;
    padding-top: 12px;
    margin-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .prenotification-table td:nth-child(7)::before {
    display: none;
  }

  .prenotification-table .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .prenotification-table .actions button {
    width: 100%;
    min-height: 40px;
    white-space: normal;
  }

  .prenotification-table .project-title-link {
    text-align: left;
    white-space: normal;
  }
}


/* Sehr schmale Smartphones */
@media (max-width: 480px) {
  .prenotification-table td {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .prenotification-table .actions {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Vornotierung – Skizzenbereich
   ========================================================= */

.prenotification-sketch-section {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
  grid-column: 1 / -1;
  width: 100%;
}

.prenotification-sketch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.prenotification-sketch-placeholder {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  border: 1px dashed rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  background: #f7f8fa;
  text-align: center;
}

.prenotification-sketch-placeholder span {
  color: var(--muted, #6b7280);
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .prenotification-sketch-head {
    align-items: stretch;
    flex-direction: column;
  }

  .prenotification-sketch-head button {
    width: 100%;
    min-height: 44px;
  }

  .prenotification-sketch-placeholder {
    min-height: 180px;
  }
}

/* =========================================================
   Vornotierung – Karteneditor
   ========================================================= */

.prenotification-sketch-dialog {
  width: min(1200px, 96vw);
  max-width: none;
  padding: 0;
}

.prenotification-sketch-editor {
  padding: 20px;
}

.prenotification-sketch-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.prenotification-sketch-toolbar button.active {
  font-weight: 700;
  outline: 2px solid rgba(0, 0, 0, 0.15);
}

.prenotification-sketch-map {
  width: 100%;
  height: min(650px, 68vh);
  min-height: 450px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.prenotification-sign-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.prenotification-sign-tool.active {
  font-weight: 700;
  outline: 2px solid rgba(0, 0, 0, 0.2);
}

.prenotification-vz283-marker {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
}

.prenotification-vz283-marker:active {
  cursor: grabbing;
}

.vz283-sign {
  position: relative;
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  border: 5px solid #d71920;
  border-radius: 50%;
  background: #0753a5;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4);
}

.vz283-cross::before,
.vz283-cross::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 17px;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: #d71920;
  transform-origin: center;
}

.vz283-cross::before {
  transform: rotate(45deg);
}

.vz283-cross::after {
  transform: rotate(-45deg);
}

.vz283-arrow {
  position: absolute;
  z-index: 2;
  top: 7px;
  color: #fff;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
}

.vz283-arrow-begin {
  left: 2px;
}

.vz283-arrow-end {
  right: 2px;
}

.vz283-arrow-left {
  left: 1px;
}

.vz283-arrow-right {
  right: 1px;
}

@media (max-width: 720px) {
  .prenotification-sign-tools {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .prenotification-sign-tool {
    width: 100%;
    min-height: 44px;
  }
}

@media (max-width: 720px) {
  .prenotification-sketch-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  .prenotification-sketch-editor {
    padding: 14px;
  }

  .prenotification-sketch-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .prenotification-sketch-toolbar button {
    width: 100%;
    min-height: 44px;
  }

  .prenotification-sketch-map {
    height: 60vh;
    min-height: 360px;
  }
}

.prenotification-sketch-search {
  display: flex;
  flex: 1;
  gap: 8px;
}

.prenotification-sketch-search input {
  flex: 1;
  min-width: 260px;
}

@media (max-width: 720px) {
  .prenotification-sketch-search {
    width: 100%;
  }

  .prenotification-sketch-search input {
    min-width: 0;
    width: 100%;
  }
}

.prenotification-sketch-placeholder.has-sketch {
  position: relative;
  display: block;

  width: 100%;
  height: 360px;

  padding: 0;

  border-style: solid;
  overflow: hidden;

  background: #f3f5f7;
}

.prenotification-sketch-placeholder.has-sketch
  .maplibregl-canvas {
  cursor: default;
}

.prenotification-vz283-preview-marker {
  cursor: default;
  pointer-events: none;
}

@media (max-width: 720px) {
  .prenotification-sketch-placeholder.has-sketch {
    height: 280px;
  }
}

.vz283-sign-image {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.prenotification-rotation-controls {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #d9dee5;
    border-radius: 10px;
    background: #fff;
}

.prenotification-rotation-controls.hidden {
    display: none;
}

.prenotification-rotation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.prenotification-rotation-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
}

.prenotification-rotation-row input[type="range"] {
    width: 100%;
    min-width: 120px;
    height: 44px;
    touch-action: none;
    cursor: pointer;
}

.prenotification-vz283-marker {
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.prenotification-vz283-marker .vz283-sign-image {
    pointer-events: none;
}

.prenotification-vz283-marker.rotation-selected {
    outline: 3px solid rgba(23, 92, 211, 0.65);
    outline-offset: 3px;
    border-radius: 50%;
}

@media (max-width: 700px) {

    .prenotification-rotation-controls {
        position: sticky;
        bottom: 8px;
        z-index: 20;
        margin-top: 8px;
        padding: 10px;
    }

    .prenotification-rotation-row {
        grid-template-columns: 64px 1fr 64px;
        gap: 8px;
    }

    .prenotification-rotation-row button {
        min-height: 44px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .prenotification-rotation-row input[type="range"] {
        height: 44px;
    }
}

.prenotification-check-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #d9dee7;
}

.prenotification-check-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.prenotification-check-section-head h4 {
  margin: 0 0 4px;
}

@media (max-width: 700px) {

  .prenotification-check-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .prenotification-check-section-head button {
    width: 100%;
  }
}

/* =========================================
   Ausführung / IST-Zeiten
   ========================================= */

.work-sessions-dialog {
  width: min(980px, 94vw);
  max-width: 980px;
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
}

.work-sessions-dialog .dialog-head {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 18px 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.work-sessions-dialog .dialog-head h3 {
  margin: 0 0 4px;
}

.work-sessions-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(92vh - 82px);
  padding: 18px 20px 22px;
  overflow-y: auto;
}

.work-session-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.work-session-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.work-time-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.work-time-grid > div,
.work-summary-grid > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8fafc;
}

.work-time-grid span,
.work-summary-grid span {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  color: var(--muted);
}

.work-time-grid strong,
.work-summary-grid strong {
  display: block;
  font-size: 15px;
}

.work-break-list {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.work-break-list > strong {
  display: block;
  margin-bottom: 9px;
}

.work-break-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

.work-break-row:first-of-type {
  border-top: 0;
}

.work-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.work-session-note {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 3px solid #175cd3;
  background: #f8fafc;
}

.work-session-note > strong {
  display: block;
  margin-bottom: 4px;
}


/* Tablet */

@media (max-width: 900px) {

  .work-sessions-dialog {
    width: min(760px, 96vw);
  }

  .work-time-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .work-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


/* Smartphone */

@media (max-width: 600px) {

  .work-sessions-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .work-sessions-dialog .dialog-head {
    padding: 14px 15px;
  }

  .work-sessions-dialog .dialog-head h3 {
    font-size: 18px;
  }

  .work-sessions-content {
    max-height: calc(100dvh - 74px);
    padding: 12px;
    gap: 12px;
  }

  .work-session-card {
    padding: 14px;
    border-radius: 10px;
  }

  .work-session-head {
    gap: 10px;
  }

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

  .work-time-grid > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
  }

  .work-time-grid span {
    margin-bottom: 0;
  }

  .work-time-grid strong {
    flex-shrink: 0;
  }

  .work-break-list {
    margin-top: 12px;
    padding: 12px;
  }

  .work-break-row {
    align-items: flex-start;
  }

  .work-summary-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .work-summary-grid > div {
    padding: 10px;
  }

  .work-session-note {
    margin-top: 12px;
  }
}

/* =========================================================
   Einsatzfotos / WorkSessions
   ========================================================= */

.work-photo-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.work-photo-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.work-photo-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(210px, 1fr)
  );
  gap: 14px;
}

.work-photo-card {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--panel);
  color: inherit;

  text-align: left;
  font: inherit;
  cursor: pointer;
}

.work-photo-card:hover {
  border-color: var(--gold);
}

.work-photo-preview {
  position: relative;

  width: 100%;
  aspect-ratio: 4 / 3;

  overflow: hidden;

  background: rgba(
    127,
    127,
    127,
    0.08
  );
}

.work-photo-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.work-photo-loading {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 16px;

  text-align: center;
  font-size: 13px;

  color: var(--muted);
}

.work-photo-meta {
  display: grid;
  gap: 7px;

  padding: 12px 13px 13px;
}

.work-photo-meta-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.work-photo-meta-head strong {
  min-width: 0;
}

.work-photo-meta-head .muted {
  flex: 0 0 auto;
  font-size: 12px;
  white-space: nowrap;
}

.work-photo-note {
  line-height: 1.4;
  overflow-wrap: anywhere;
}


/* Tablet */

@media (max-width: 900px) {

  .work-photo-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


/* Smartphone */

@media (max-width: 600px) {

  .work-photo-section {
    margin-top: 16px;
    padding-top: 15px;
  }

  .work-photo-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .work-photo-meta-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .work-photo-meta-head .muted {
    white-space: normal;
  }

}

/* SEFG 5.0 – Artikelstamm Filterleiste */

#view-articles .toolbar {
  display: grid;
  grid-template-columns:
    minmax(280px, 1fr)
    minmax(160px, 190px)
    minmax(140px, 170px)
    minmax(180px, 210px)
    minmax(130px, 150px);
  gap: 10px;
  align-items: center;
}

#view-articles .toolbar > * {
  width: 100%;
  min-width: 0;
}

#view-articles #article-search {
  min-width: 280px;
}

@media (max-width: 1200px) {
  #view-articles .toolbar {
    grid-template-columns:
      minmax(260px, 1fr)
      repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 800px) {
  #view-articles .toolbar {
    grid-template-columns: 1fr;
  }

  #view-articles #article-search {
    min-width: 0;
  }
}

/* Artikelstamm – Filterleiste final */

#article-search {
  min-width: 280px !important;
  width: 100% !important;
}

#article-category-filter,
#article-type-filter,
#article-billing-filter,
#article-status-filter {
  min-width: 0;
  width: 100%;
}

.article-filterbar {
  display: grid !important;
  grid-template-columns:
    minmax(280px, 1.5fr)
    minmax(160px, 1fr)
    minmax(150px, 1fr)
    minmax(180px, 1fr)
    minmax(140px, 1fr) !important;
  gap: 10px;
}

.article-filterbar > * {
  min-width: 0;
  width: 100%;
}

@media (max-width: 900px) {
  .article-filterbar {
    grid-template-columns: 1fr !important;
  }

  #article-search {
    min-width: 0 !important;
  }
}

/* SEFG 5.0 – Ladeliste */

#deliverynote-dialog.loadlist-dialog {
  width: min(1500px, 96vw);
  max-width: 1500px;
  height: min(900px, 94vh);
  max-height: 94vh;
}

#deliverynote-dialog.loadlist-dialog > form {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#deliverynote-dialog .loadlist-header-box {
  flex: 0 0 auto;
}

#deliverynote-dialog .loadlist-hint {
  flex: 0 0 auto;
}

#deliverynote-dialog .doc-builder {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#deliverynote-dialog .doc-builder .panel-head {
  flex: 0 0 auto;
}

#deliverynote-items {
  flex: 1 1 auto;
  min-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
}

#deliverynote-dialog .dialog-actions {
  flex: 0 0 auto;
}

#deliverynote-dialog .delivery-material-row {
  grid-template-columns:
    minmax(420px, 1fr)
    150px
    110px
    90px
    44px;
  align-items: center;
  gap: 10px;
}

#deliverynote-dialog .delivery-material-main {
  min-width: 0;
}

#deliverynote-dialog .delivery-material-info {
  min-width: 0;
}

#deliverynote-dialog .material-combobox {
  width: 100%;
}

#deliverynote-dialog .material-suggest-box {
  z-index: 50;
}

@media (max-width: 900px) {
  #deliverynote-dialog.loadlist-dialog {
    width: 96vw;
    height: 94vh;
  }

  #deliverynote-dialog .delivery-material-row {
    grid-template-columns:
      minmax(220px, 1fr)
      120px
      90px
      70px
      40px;
  }
}

/* Ladeliste – Artikelbild */

#deliverynote-dialog .delivery-material-main {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

#deliverynote-dialog .loadlist-article-image {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border, #d9d9d9);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

#deliverynote-dialog .loadlist-article-image img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

#deliverynote-dialog .loadlist-article-image.empty {
  color: #999;
  font-size: 18px;
}

/* Ladeliste – kompakter Arbeitsbereich FINAL */

#deliverynote-dialog.loadlist-dialog {
  width: min(1500px, 97vw);
  max-width: 1500px;
  height: 94vh;
  max-height: 94vh;
}

#deliverynote-dialog.loadlist-dialog > form {
  height: 94vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 14px;
}

#deliverynote-dialog .loadlist-header-box {
  flex: 0 0 auto;
}

#deliverynote-dialog .loadlist-hint {
  flex: 0 0 auto;
  margin: 8px 0;
  padding: 8px 10px;
}

#deliverynote-dialog .doc-builder {
  flex: 1 1 0;
  min-height: 0;
  margin-top: 8px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
}

#deliverynote-dialog .doc-builder .panel-head {
  flex: 0 0 auto;
  min-height: 40px;
  margin: 0 0 6px;
  position: relative;
  z-index: 2;
}

#deliverynote-dialog #deliverynote-add-item {
  width: auto;
  flex: 0 0 auto;
  position: static;
}

#deliverynote-items {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

/* Position bewusst kompakt halten */

#deliverynote-dialog .delivery-material-row {
  display: grid;
  grid-template-columns:
    minmax(420px, 1fr)
    125px
    85px
    70px
    38px;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  min-height: 52px;
}

#deliverynote-dialog .delivery-material-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

#deliverynote-dialog .loadlist-article-image {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

#deliverynote-dialog .loadlist-article-image img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

#deliverynote-dialog .loadlist-article-image.empty {
  color: #98a2b3;
  font-size: 13px;
}

#deliverynote-dialog .material-combobox {
  height: 34px;
  padding: 6px 8px !important;
}

#deliverynote-dialog .excel-cell-meta {
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.15;
}

#deliverynote-dialog .delivery-material-row > select,
#deliverynote-dialog .delivery-material-row > input {
  height: 34px;
  padding: 6px 8px;
}

#deliverynote-dialog .delivery-unit {
  font-size: 11px;
}

#deliverynote-dialog .delivery-material-row .danger.mini {
  width: 34px;
  height: 34px;
  padding: 0;
}

/* Speichern / Abbrechen bleibt unten,
   nimmt dem Positionsbereich aber keinen Platz weg */

#deliverynote-dialog .dialog-actions {
  flex: 0 0 auto;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  background: #fff;
  position: static;
}

/* Ladeliste – Verkehrszeichen in Artikelsuche */

#deliverynote-dialog .material-suggest-row {
  display: grid;
  grid-template-columns:
    46px
    90px
    minmax(260px, 1fr)
    130px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 5px 8px;
  text-align: left;
}

.loadlist-suggest-image {

  width: 42px;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  flex-shrink: 0;

}

.loadlist-suggest-image img {

  width: 40px;

  height: 40px;

  max-width: 40px;

  max-height: 40px;

  display: block;

  object-fit: contain;

}

#deliverynote-dialog .material-suggest-code {
  font-weight: 700;
  white-space: nowrap;
}

#deliverynote-dialog .material-suggest-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#deliverynote-dialog .material-suggest-meta {
  text-align: right;
  font-size: 11px;
  line-height: 1.2;
}

/* Ladeliste – größeres Bild in ausgewählter Position */

#deliverynote-dialog .delivery-material-row {
  min-height: 60px;
}

#deliverynote-dialog .delivery-material-main {
  grid-template-columns:
    58px
    minmax(0, 1fr);
  gap: 9px;
}

#deliverynote-dialog .loadlist-article-image {
  width: 54px;
  height: 54px;
}

#deliverynote-dialog .loadlist-article-image img {
  width: 50px;
  height: 50px;
}

.offer-status-select{
  width:auto;
  min-width:105px;
  height:30px;
  padding:3px 26px 3px 9px;
  border:1px solid #d7dde5;
  border-radius:8px;
  background:#fff;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}

.offer-status-select:hover{
  border-color:#aeb8c5;
}

.offer-status-select:disabled{
  opacity:.6;
  cursor:wait;
}

.offer-status-accepted{
  background:#f0fdf4;
}

.offer-status-rejected{
  background:#fef2f2;
}

/* =========================================
   Auftragsbestätigung – Positionslayout
   ========================================= */

/* Mehr Luft zwischen Erklärung und Spaltenkopf */
#order-confirmation-dialog .section-head,
#order-confirmation-dialog .section-subtitle,
#order-confirmation-dialog .muted + .ab-item-table{
  margin-bottom:12px;
}

#order-confirmation-dialog .ab-item-table{
  margin-top:14px;
}


/* Kopfzeile sauber ausrichten */
#order-confirmation-dialog .ab-item-head{
  align-items:end;
  padding:0 8px 7px;
}

#order-confirmation-dialog .ab-item-head span{
  line-height:1.2;
}


/* Gesamt-Spalte rechtsbündig */
#order-confirmation-dialog .ab-item-head span:last-child{
  text-align:right;
}

#order-confirmation-dialog .ab-item-row > strong:last-child{
  display:block;
  width:100%;
  text-align:right;
  white-space:nowrap;
  padding-top:8px;
}


/* Einzelne Position optisch zusammenhalten */
#order-confirmation-dialog .ab-item-card{
  border:1px solid #d7dde5;
  border-radius:9px;
  padding:10px;
  margin-bottom:10px;
  background:#fff;
}


/* Leistungstext gehört optisch zur Spalte "Leistung" */
#order-confirmation-dialog .ab-long-description{
  margin-top:8px;

  /* 120px Grundlage + 8px Grid-Gap */
  margin-left:128px;

  /* rechts nicht bis unter Gesamt laufen */
  margin-right:128px;
}

#order-confirmation-dialog .ab-long-description label{
  display:block;
  margin:0;
  font-size:12px;
}

#order-confirmation-dialog .ab-long-description textarea{
  display:block;
  width:100%;
  min-height:72px;
  margin-top:5px;
  resize:vertical;
}


/* Mobil wieder volle Breite */
@media (max-width:900px){
  #order-confirmation-dialog .ab-long-description{
    margin-left:0;
    margin-right:0;
  }
}

/* AB – harte Trennlinien entfernen */
#order-confirmation-dialog hr{
  border:0;
  border-top:1px solid #e2e8f0;
  margin:14px 0;
}

#order-confirmation-dialog .ab-item-table,
#order-confirmation-dialog .ab-item-card,
#order-confirmation-dialog .ab-long-description{
  border-color:#d7dde5;
}

/* AB – Leistungspositionen Toolbar */
#order-confirmation-dialog .ab-items-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
}

#order-confirmation-dialog .ab-items-toolbar strong{
  font-size:14px;
}

#order-confirmation-dialog .ab-items-toolbar button{
  flex:0 0 auto;
  white-space:nowrap;
}

/* =========================================
   AB – Artikel-/Leistungsstamm
   ========================================= */

#order-confirmation-dialog .ab-article-search{
  position:relative;
  min-width:0;
}

#order-confirmation-dialog .ab-article-search > input{
  width:100%;
}

#order-confirmation-dialog .ab-article-results{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  z-index:50;

  max-height:320px;
  overflow-y:auto;

  background:#fff;
  border:1px solid #d7dde5;
  border-radius:8px;

  box-shadow:
    0 8px 24px rgba(0,0,0,.12);
}

#order-confirmation-dialog .ab-article-results button{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;

  padding:9px 10px;

  border:0;
  border-bottom:1px solid #e5e7eb;

  background:#fff;
  text-align:left;
  cursor:pointer;
}

#order-confirmation-dialog .ab-article-results button:last-child{
  border-bottom:0;
}

#order-confirmation-dialog .ab-article-results button:hover{
  background:#f8fafc;
}

#order-confirmation-dialog .ab-article-results img{
  width:36px;
  height:36px;
  object-fit:contain;
  flex:0 0 36px;
}

#order-confirmation-dialog .ab-article-results span{
  display:block;
  min-width:0;
}

#order-confirmation-dialog .ab-article-results strong{
  display:block;
  font-size:13px;
}

#order-confirmation-dialog .ab-article-results small{
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:11px;
}

/* =========================================
   Zentrales ERP-Bestätigungsfenster
   ========================================= */

/* Eigene ERP-Systemdialoge von den alten
   globalen Dialog-Formularregeln entkoppeln */

.erp-confirm-dialog > .erp-confirm-content,
.erp-confirm-dialog > form.erp-confirm-content{
  margin:0;
  padding:22px;
  box-sizing:border-box;
  width:100%;
  max-width:none;
}

.erp-confirm-dialog{
  position:fixed;
  inset:0;
  margin:auto;

  width:min(660px, calc(100vw - 32px));
  height:max-content;
  max-height:calc(100vh - 40px);

  padding:0;
  border:0;
  border-left:4px solid #d5a500;
  border-radius:12px;
  overflow:hidden;
  background:#fff;

  box-shadow:
    0 20px 60px rgba(15,23,42,.25);
}

.erp-confirm-dialog::backdrop{
  background:rgba(15,23,42,.48);
}


.erp-confirm-content{
  position:relative;

  display:grid;
  grid-template-columns:64px 1fr;
  gap:18px;

  padding:22px;
}


.erp-confirm-icon{
  display:flex;
  align-items:center;
  justify-content:center;

  width:56px;
  height:56px;

  border-radius:50%;

  background:#fff3cd;
  color:#8a6700;

  font-size:25px;
  font-weight:700;
}


.erp-confirm-body{
  min-width:0;
}


.erp-confirm-title{
  display:block;

  padding-right:38px;
  margin-bottom:7px;

  font-size:18px;
  line-height:1.25;

  color:#111827;
}


.erp-confirm-message{
  max-width:520px;

  color:#374151;

  font-size:14px;
  line-height:1.55;

  white-space:pre-line;
}


.erp-confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;

  margin-top:22px;
}


.erp-confirm-actions button{
  min-width:110px;
}


.erp-confirm-close{
  position:absolute;
  top:15px;
  right:17px;

  width:32px;
  height:32px;

  padding:0;
  border:0;
  border-radius:7px;

  background:transparent;
  color:#475569;

  font-size:25px;
  line-height:1;

  cursor:pointer;
}


.erp-confirm-close:hover{
  background:#f1f5f9;
  color:#111827;
}


@media (max-width:600px){

  .erp-confirm-content{
    grid-template-columns:1fr;
  }

  .erp-confirm-icon{
    width:46px;
    height:46px;
  }

  .erp-confirm-actions{
    flex-direction:column-reverse;
  }

  .erp-confirm-actions button{
    width:100%;
  }

}

/* =========================================================
   SEFG 5.0 – Login 16:9
   ========================================================= */

#login-screen.login-screen{
  position:fixed;
  inset:0;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:20px;

  background:
    linear-gradient(
      rgba(0,0,0,.08),
      rgba(0,0,0,.16)
    ),
    url("assets/sefg-login-background.png")
      center center / cover no-repeat;

  overflow:hidden;
}

#login-screen.login-screen.hidden{
  display:none;
}

#login-screen .login-card{
  position:relative;

  width:min(420px,92vw);

  /*
   * Etwas unterhalb der Bildmitte,
   * damit das große SEFG-Logo frei bleibt.
   */
  transform:translateY(115px);

  padding:28px;

  background:
    linear-gradient(
      145deg,
      rgba(14,17,20,.88),
      rgba(6,8,10,.84)
    );

  border:1px solid rgba(218,165,60,.58);
  border-radius:18px;

  color:#fff;

  box-shadow:
    0 24px 70px rgba(0,0,0,.58),
    0 0 30px rgba(218,165,60,.10),
    inset 0 1px 0 rgba(255,255,255,.05);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

#login-screen .login-card h1{
  color:#fff;
}

#login-screen .login-card .muted{
  color:rgba(255,255,255,.65);
}

#login-screen .login-card label{
  color:rgba(255,255,255,.88);
}

#login-screen .login-card input{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;
}

#login-screen .login-card input::placeholder{
  color:rgba(255,255,255,.40);
}

#login-screen .login-card input:focus{
  background:rgba(255,255,255,.11);
  border-color:#d8a42d;
  box-shadow:0 0 0 3px rgba(216,164,45,.14);
}

#login-screen .login-button{
  background:
    linear-gradient(
      110deg,
      #b87900 0%,
      #f5c451 48%,
      #c48708 100%
    );

  color:#111;
  border:0;
  font-weight:750;

  box-shadow:
    0 8px 25px rgba(218,155,0,.20);
}

#login-screen .login-button:hover{
  filter:brightness(1.08);
}

#login-screen .login-hint{
  background:rgba(255,255,255,.055);
  color:rgba(255,255,255,.46);
  border:1px solid rgba(255,255,255,.07);
}

#login-screen .login-error{
  color:#ffb4ab;
}

#login-screen .login-brand{
  color:#fff;
}

#login-screen .login-brand span,
#login-screen .login-brand small{
  color:rgba(255,255,255,.60);
}

@media(max-width:700px){
  #login-screen .login-card{
    transform:none;
  }
}

/* =========================================================
   SEFG 5.0 – Firmenlogo
   ========================================================= */

.company-logo-mark{
  display:flex;
  align-items:center;
  justify-content:center;

  width:90px;
  height:62px;

  padding:0;
  overflow:visible;

  background:transparent;
  border:0;
  border-radius:0;

  flex:0 0 90px;
}

.company-logo-mark img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
  object-position:center;
}

/* SEFG 5.0 – Backup-Livestatus */
.backup-live-status{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fafbfc;
}

.backup-live-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

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

.backup-status-grid>div{
  min-width:0;
  padding:9px 10px;
  border:1px solid #edf0f2;
  border-radius:9px;
  background:#fff;
}

.backup-status-grid span{
  display:block;
  margin-bottom:3px;
  color:var(--muted);
  font-size:11px;
}

.backup-status-grid strong{
  display:block;
  overflow:hidden;
  font-size:13px;
  text-overflow:ellipsis;
}

@media(max-width:700px){
  .backup-status-grid{
    grid-template-columns:1fr;
  }
}

/* Dokumentdesigner – Geschäftsbrief Optionen */

.docdesign-business-options{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
}

.docdesign-option-check{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:44px;
  padding:9px 12px;
  margin:0;
  box-sizing:border-box;

  background:#fff;
  border:1px solid #d9dee7;
  border-radius:9px;

  cursor:pointer;
  user-select:none;

  transition:
    border-color .15s ease,
    background-color .15s ease,
    box-shadow .15s ease;
}

.docdesign-option-check:hover{
  border-color:#c5a24a;
  background:#fffdf7;
}

.docdesign-option-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.docdesign-check-box{
  position:relative;
  flex:0 0 24px;

  width:24px;
  height:24px;

  box-sizing:border-box;

  border:2px solid #b8c0cc;
  border-radius:6px;

  background:#fff;

  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
}

.docdesign-check-label{
  flex:1;
  min-width:0;

  font-size:14px;
  font-weight:600;
  line-height:1.3;

  color:#263445;
}

.docdesign-option-check input:checked
  + .docdesign-check-box{
  background:#c5a24a;
  border-color:#c5a24a;
}

.docdesign-option-check input:checked
  + .docdesign-check-box::after{
  content:"";

  position:absolute;

  left:7px;
  top:3px;

  width:6px;
  height:11px;

  border:solid #fff;
  border-width:0 2px 2px 0;

  transform:rotate(45deg);
}

.docdesign-option-check:has(input:checked){
  border-color:#d5bd7d;
  background:#fffdf8;
}

.docdesign-option-check:has(input:focus-visible){
  box-shadow:
    0 0 0 3px rgba(197,162,74,.18);
}

/* ERP-Checkboxen – Projekt Leistungsumfang */

.scope-check-grid .docdesign-option-check{
  min-height:40px;
  padding:7px 10px;
}

.scope-check-grid .docdesign-check-box{
  flex-basis:22px;
  width:22px;
  height:22px;
}

.scope-check-grid .docdesign-check-label{
  font-size:13px;
}

.scope-check-grid
  .docdesign-option-check
  input:checked
  + .docdesign-check-box::after{
  left:6px;
  top:2px;
  width:6px;
  height:11px;
}

/* =========================================================
   SEFG START / SPLASHSCREEN
   ========================================================= */

.app-splash {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      circle at 50% 42%,
      #171b1f 0%,
      #090b0d 38%,
      #020303 72%,
      #000 100%
    );
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.55s ease,
    visibility 0.55s ease;
}

.app-splash.is-finished {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-splash-inner {
  width: min(460px, 78vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-splash-logo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  filter:
    drop-shadow(0 22px 34px rgba(0, 0, 0, 0.7));
}

/*
   Alle vier Bilder sind exakt dasselbe Original.
   Sichtbar gemacht werden jeweils nur bestimmte Bereiche.
*/

.app-splash-part,
.app-splash-logo-final {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Goldener linker Bogen */
.app-splash-part-gold {
  clip-path: polygon(
    0% 0%,
    57% 0%,
    57% 70%,
    45% 70%,
    35% 62%,
    27% 50%,
    22% 35%,
    22% 18%,
    0% 18%
  );

  opacity: 0;

  animation:
    sefgGoldEnter 1.05s
    0.10s cubic-bezier(.16,.84,.25,1) forwards;
}

/* Dunkler rechter Ring */
.app-splash-part-ring {
  clip-path: polygon(
    46% 0%,
    100% 0%,
    100% 72%,
    67% 72%,
    67% 62%,
    77% 51%,
    82% 36%,
    81% 21%,
    72% 10%,
    58% 5%
  );

  opacity: 0;

  animation:
    sefgRingEnter 1.05s
    0.16s cubic-bezier(.16,.84,.25,1) forwards;
}

/* Straße / unterer Mittelteil */
.app-splash-part-road {
  clip-path: polygon(
    28% 27%,
    72% 27%,
    74% 75%,
    100% 75%,
    100% 100%,
    0% 100%,
    0% 75%,
    26% 75%
  );

  opacity: 0;

  animation:
    sefgRoadEnter 0.95s
    0.24s cubic-bezier(.16,.84,.25,1) forwards;
}

/*
   Nach dem Zusammenbau wird das komplette Original eingeblendet.
   Dadurch verschwinden die Clip-Grenzen vollständig.
*/
.app-splash-logo-final {
  opacity: 0;

  animation:
    sefgFinalLogo 0.32s
    1.18s ease-out forwards;
}

/* Lichtimpuls beim Einrasten */
.app-splash-impact {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;

  background:
    rgba(255, 220, 135, 0.95);

  box-shadow:
    0 0 16px rgba(255, 199, 72, 0.95),
    0 0 42px rgba(230, 159, 23, 0.72),
    0 0 90px rgba(218, 139, 0, 0.38);

  transform:
    translate(-50%, -50%) scale(0);

  animation:
    sefgImpact 0.55s
    1.03s ease-out forwards;
}

/* Goldener Sweep nach dem Zusammenbau */
.app-splash-shine {
  position: absolute;
  top: 5%;
  bottom: 10%;
  left: -30%;
  width: 12%;
  pointer-events: none;
  opacity: 0;

  transform:
    rotate(18deg)
    skewX(-8deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 185, 40, 0.05),
      rgba(255, 236, 180, 0.95),
      rgba(255, 190, 52, 0.26),
      transparent
    );

  filter: blur(3px);

  animation:
    sefgGoldSweep 0.75s
    1.20s ease-out forwards;
}

.app-splash-loading {
  position: relative;
  width: 72%;
  height: 3px;
  margin-top: 20px;
  overflow: hidden;
  border-radius: 999px;
  background:
    rgba(255, 255, 255, 0.09);

  opacity: 0;

  animation:
    sefgLoadingAppear 0.35s
    0.45s ease forwards;
}

.app-splash-loading-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #a86b00,
      #e8a91b,
      #ffe09a,
      #d88a00
    );

  box-shadow:
    0 0 12px rgba(224, 159, 25, 0.42);

  animation:
    sefgSplashLoading 1.05s
    ease-in-out infinite;
}

.app-splash-status {
  margin-top: 14px;
  color:
    rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-indent: 0.28em;

  opacity: 0;

  animation:
    sefgLoadingAppear 0.4s
    0.55s ease forwards;
}

@keyframes sefgGoldEnter {
  0% {
    opacity: 0;
    transform:
      translate(-100px, -70px)
      rotate(-16deg)
      scale(0.82);
    filter: blur(5px);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform:
      translate(0, 0)
      rotate(0)
      scale(1);
    filter: blur(0);
  }
}

@keyframes sefgRingEnter {
  0% {
    opacity: 0;
    transform:
      translate(110px, -35px)
      rotate(14deg)
      scale(0.84);
    filter: blur(5px);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform:
      translate(0, 0)
      rotate(0)
      scale(1);
    filter: blur(0);
  }
}

@keyframes sefgRoadEnter {
  0% {
    opacity: 0;
    transform:
      translateY(120px)
      scale(0.88);
    filter: blur(5px);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
    filter: blur(0);
  }
}

@keyframes sefgFinalLogo {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes sefgImpact {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0);
  }

  25% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(7);
  }
}

@keyframes sefgGoldSweep {
  0% {
    left: -30%;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  100% {
    left: 115%;
    opacity: 0;
  }
}

@keyframes sefgLoadingAppear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes sefgSplashLoading {
  0% {
    transform: translateX(-115%);
  }

  55% {
    transform: translateX(115%);
  }

  100% {
    transform: translateX(280%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-splash-part,
  .app-splash-logo-final,
  .app-splash-impact,
  .app-splash-shine,
  .app-splash-loading,
  .app-splash-loading-bar,
  .app-splash-status {
    animation: none;
  }

  .app-splash-logo-final,
  .app-splash-loading,
  .app-splash-status {
    opacity: 1;
  }

  .app-splash-part {
    opacity: 0;
  }
}

.customer-contact-select {
  width: 100%;
  height: 42px;
  padding: 0 12px;

  border: 1px solid var(--border, #cfd7e3);
  border-radius: 8px;

  background: #fff;
  color: inherit;
  font: inherit;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  text-align: left;
  cursor: pointer;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.customer-contact-select:hover {
  border-color: #aeb9c8;
  background: #fafbfc;
}

.customer-contact-select:focus-visible {
  outline: none;
  border-color: #8ba4c7;
  box-shadow: 0 0 0 3px rgba(80, 120, 170, 0.12);
}

#customer-contact-summary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-contact-chevron {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: #697586;
}

.customer-contact-panel {
  position: fixed;
  z-index: 1001;

  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;

  background: #fff;
  border: 1px solid #dfe4eb;
  border-radius: 12px;

  box-shadow:
    0 20px 55px rgba(15, 23, 42, 0.18);

  overflow: hidden;
}

.customer-contact-panel[hidden] {
  display: none;
}

.customer-contact-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  padding: 18px 18px 15px;

  border-bottom: 1px solid #edf0f4;
}

.customer-contact-panel-head strong {
  display: block;
  font-size: 16px;
  line-height: 1.3;
}

#customer-contact-panel-customer {
  margin-top: 3px;
}

.customer-contact-panel-list {
  max-height: 52vh;
  overflow-y: auto;
  padding: 8px;
}

.customer-contact-item {
  width: 100%;
  padding: 12px;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  cursor: pointer;
}

.customer-contact-item:hover {
  background: #f6f8fa;
}

.customer-contact-item + .customer-contact-item {
  border-top: 1px solid #f0f2f5;
  border-radius: 0;
}

.customer-contact-item-main {
  min-width: 0;
  flex: 1;
}

.customer-contact-item-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;

  font-weight: 600;
}

.customer-contact-primary {
  padding: 2px 6px;
  border-radius: 999px;

  background: #f1f4f8;

  color: #536273;
  font-size: 11px;
  font-weight: 500;
}

.customer-contact-item-details {
  margin-top: 3px;

  color: #697586;
  font-size: 13px;
  line-height: 1.45;

  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-contact-item-chevron {
  flex: 0 0 auto;

  color: #8b96a5;
  font-size: 20px;
}

.customer-contact-panel > #customer-contact-panel-add {
  width: calc(100% - 32px);
  margin: 8px 16px 16px;
}

#customer-contact-panel-editor {
  padding: 18px;
}

#customer-contact-panel-editor[hidden] {
  display: none;
}

.customer-contact-editor-head {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 18px;
}

.customer-contact-editor-back {
  border: 0;
  background: transparent;

  padding: 4px 2px;

  color: #536273;
  font: inherit;

  cursor: pointer;
}

.customer-contact-editor-back:hover {
  color: #111827;
}

.customer-contact-editor-fields {
  display: grid;
  gap: 13px;
}

.customer-contact-editor-fields label {
  display: grid;
  gap: 5px;
}

.customer-contact-editor-checks {
  display: grid;
  gap: 8px;

  margin-top: 16px;
}

.customer-contact-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;

  margin-top: 20px;
  padding-top: 16px;

  border-top: 1px solid #edf0f4;
}

/* Datenschutz-Center */

.privacy-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
  align-items: start;
}

.privacy-grid .settings-card {
  min-width: 0;
}

.privacy-card {
  height: 100%;
}

.privacy-audit-card {
  margin-top: 14px;
  width: 100%;
}

.privacy-audit-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.privacy-audit-head > div {
  min-width: 0;
}

.privacy-audit-head span {
  display: block;
  margin-top: 4px;
}

.privacy-audit-scroll {
  height: 420px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.privacy-audit-table {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
}

.privacy-audit-table th,
.privacy-audit-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.privacy-audit-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  font-size: 12px;
  white-space: nowrap;
}

.privacy-audit-table td {
  max-width: 320px;
}

.privacy-audit-details {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .privacy-grid {
    grid-template-columns: 1fr;
  }

  .privacy-audit-head {
    flex-direction: column;
  }

  .privacy-audit-scroll {
    height: 360px;
  }
}

/* Ladeliste – finale Spaltenbreiten */
#deliverynote-dialog .delivery-material-row {
  grid-template-columns: 430px 125px 85px 120px 38px !important;
  justify-content: start;
  align-items: center;
}

#deliverynote-dialog .delivery-unit {
  width: 120px !important;
  min-width: 120px !important;
}

/* Ladeliste – Positionsfelder auf gleicher Höhe */
#deliverynote-dialog .delivery-material-row {
  align-items: start !important;
}

#deliverynote-dialog .delivery-material-row > select,
#deliverynote-dialog .delivery-material-row > input,
#deliverynote-dialog .delivery-material-row > .delivery-unit,
#deliverynote-dialog .delivery-material-row > button {
  margin-top: 0 !important;
}

/* Aufmaß – Platz für Einheiten-Dropdown */
.measurement-material-row {
  grid-template-columns:
    52px
    minmax(260px, 1fr)
    110px
    110px
    38px !important;
}

/* =========================================================
   Rechnung – großer Arbeitsdialog
   ========================================================= */

#invoice-dialog {
  width: calc(100vw - 120px);
  max-width: 1500px;

  height: calc(100vh - 100px);
  max-height: 950px;
}

#invoice-dialog #invoice-form {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#invoice-dialog #invoice-item-list {
  min-height: 220px;
}

#invoice-dialog .dialog-actions {
  margin-top: auto;
  padding-top: 24px;
}

/* =========================================================
   Rechnung – Positionsraster
   ========================================================= */

#invoice-dialog .invoice-position-grid {
  display: grid;
  grid-template-columns:
    44px
    minmax(320px, 1fr)
    90px
    110px
    140px
    150px;
  gap: 16px;
  align-items: center;
}

#invoice-dialog .invoice-position-header {
  padding: 10px 0;
  border-bottom: 1px solid #d0d5dd;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

#invoice-dialog .invoice-draft-item {
  padding: 14px 0;
  border-bottom: 1px solid #e5e7eb;
}

#invoice-dialog .invoice-position-total {
  text-align: right;
  font-weight: 700;
}

/* =========================================================
   Rechnung – Positionstext Seitenpanel
   ========================================================= */

#invoice-dialog {
  position: relative;
}

#invoice-dialog .invoice-position-text-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: 440px;
  max-width: 45%;

  padding: 24px;

  background: #fff;
  border-left: 1px solid #d0d5dd;
  box-shadow: -12px 0 30px rgba(16, 24, 40, 0.12);

  z-index: 20;

  overflow-y: auto;
}

#invoice-dialog .invoice-position-text-panel[hidden] {
  display: none;
}

#invoice-dialog .invoice-position-text-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 24px;
}

#invoice-dialog .invoice-position-text-head h3 {
  margin: 0 0 4px;
}

#invoice-dialog .invoice-position-text-panel label {
  display: block;
}

#invoice-dialog #invoice-position-text-value {
  width: 100%;
  min-height: 320px;
  resize: vertical;
  box-sizing: border-box;

  margin-top: 8px;
}

#invoice-dialog .invoice-position-text-panel .dialog-actions {
  margin-top: 24px;
}

/* =========================================================
   ERP Meldungen – immer über geöffneten Dialogen
   ========================================================= */

.erp-confirm-dialog.erp-overlay-dialog[open] {
  position: fixed;
  inset: 0;

  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;

  margin: 0;
  padding: 0;

  border: 0;
  background: rgba(15, 23, 42, 0.45);

  z-index: 100000;

  display: flex;
  align-items: center;
  justify-content: center;
}

.erp-confirm-dialog.erp-overlay-dialog .erp-confirm-content {
  position: relative;
  z-index: 1;
}

/* =========================================================
   Rechnung – Positionstext Plus-Button
   ========================================================= */

.invoice-position-add-btn {
  width: 26px;
  height: 26px;
  min-width: 26px;

  padding: 0;
  border: 1px solid #d8dee8;
  border-radius: 50%;

  background: #ffffff;
  color: #475569;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  font-weight: 500;
  line-height: 1;

  cursor: pointer;

  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.invoice-position-add-btn:hover {
  background: #f8fafc;
  border-color: #aeb8c7;
  color: #17212b;

  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
}

.invoice-position-add-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.invoice-position-add-btn:focus-visible {
  outline: 2px solid #c99a3d;
  outline-offset: 2px;
}