/* EB Assistent Pro – optionale Designstudie November 2026
   Aktiv nur auf html.eb-modern. Print-/Belegausgabe und App unverändert. */
html.eb-modern{
  --nav:#fff;
  --brand:#245fe5;
  --line:#e6eaf2;
  --muted:#66758c;
  --eb-ink:#172139;
  --eb-subtle:#6b7890;
  --eb-border:#e5eaf2;
  --eb-border-strong:#cfd9e7;
  --eb-surface:#fff;
  --eb-soft:#f8faff;
  --eb-canvas:#f5f7fb;
  --eb-hover:#edf3ff;
  --eb-teal:#2864e8;
  --eb-blue:#245fe5;
  --eb-shadow:0 5px 24px rgba(25,40,72,.045);
  color:#172139;
  background:#f5f7fb;
}
html.eb-modern body{background:#f5f7fb;color:#172139}
html.eb-modern .shell{background:#f5f7fb}
html.eb-modern #app .sidebar{
  width:264px;background:#fff;border-right:1px solid #e5eaf2;
  box-shadow:7px 0 30px rgba(27,52,96,.025);padding:20px 12px 14px;
}
html.eb-modern #app .sidebar .brand{
  color:#12213b;font-weight:850;font-size:18px;letter-spacing:-.045em;
  margin:0 6px 18px;padding:10px 7px 22px;border-bottom:1px solid #eef1f7;
}
html.eb-modern #app .sidebar .mark{
  color:#fff;background:linear-gradient(135deg,#356deb,#1e4db7);
  border:1px solid rgba(29,74,186,.13);box-shadow:0 7px 19px rgba(43,96,219,.18);
  border-radius:11px;width:38px;height:38px;
}
html.eb-modern #app .nav{gap:9px;padding:0 3px 16px}
html.eb-modern #app .nav-section{
  border:0;border-radius:11px;background:transparent;padding:2px 4px 5px;
}
html.eb-modern #app .nav-section.is-open{background:#f7f9fd;border:0}
html.eb-modern #app .nav-section-trigger{
  color:#7a899e!important;letter-spacing:.10em;font-size:10px!important;
  min-height:36px;padding:9px 10px!important;
}
html.eb-modern #app .nav-section-trigger:hover,
html.eb-modern #app .nav-section.is-open .nav-section-trigger{
  background:#eef3fc!important;color:#334d75!important;
}
html.eb-modern #app .nav-section.has-current>.nav-section-trigger{
  color:#475f82!important;
}
html.eb-modern #app .nav-section.has-current>.nav-section-trigger:before{background:#2864e8}
html.eb-modern #app .nav-section-chevron{color:#9baabc}
html.eb-modern #app .nav .nav-submenu .nav-link{
  color:#42546e;border-radius:9px;font-size:12.5px;font-weight:650;
  min-height:42px;letter-spacing:-.005em;transition:background .13s,color .13s;
}
html.eb-modern #app .nav .nav-submenu .nav-link:hover{
  color:#2457b6;background:#eaf1ff;border-color:#e2ebff;
}
html.eb-modern #app .nav .nav-submenu .nav-link.active,
html.eb-modern #app .nav .nav-submenu .nav-link.active:hover{
  color:#214fbe;background:#eaf1ff;border:1px solid #d8e5ff;
  box-shadow:inset 3px 0 0 #3569e8;font-weight:800;
}
html.eb-modern #app .nav-icon{
  background:#f0f3f8;color:#6d7d94;border-radius:7px;
}
html.eb-modern #app .nav-link.active .nav-icon{background:#dce9ff;color:#2458d6}
html.eb-modern #app .sidebar-bottom{
  background:#f6f8fc;border:1px solid #e7ebf3;border-radius:13px;
  padding:14px;margin-top:auto;
}
html.eb-modern #app .sidebar-bottom .small{color:#5a6981}
html.eb-modern #app .sidebar-bottom button{
  color:#405472;background:#fff;border:1px solid #dbe3ef;border-radius:9px;
}
html.eb-modern #app .sidebar-bottom button:hover{background:#ecf2ff;border-color:#becfff}
html.eb-modern #app .main{background:#f5f7fb}
html.eb-modern #app .top{
  display:flex;align-items:center;min-height:94px;
  background:rgba(255,255,255,.96);border-bottom:1px solid #e7ebf2;
  box-shadow:none;padding:19px clamp(22px,3.1vw,52px);
}
html.eb-modern #app .top h1{
  font-size:26px;font-weight:820;letter-spacing:-.046em;color:#16253e;
}
html.eb-modern #app .top p{color:#7b8799;font-size:12px;margin-top:4px}
html.eb-modern #app .pill{
  border-radius:9px;color:#627089;background:#f2f5fa;
  border:1px solid #e5eaf2;font-size:10px;letter-spacing:.07em;
  box-shadow:none;padding:8px 11px;
}
html.eb-modern #app .content{
  max-width:1820px;padding:31px clamp(21px,3.1vw,52px) 65px;
}
html.eb-modern #app .toolbar{gap:14px;margin-bottom:21px}
html.eb-modern #app .toolbar h2{font-size:21px;color:#152540;letter-spacing:-.038em}
html.eb-modern #app .muted{color:#6e7c91}
html.eb-modern #app .panel,
html.eb-modern #app .stat,
html.eb-modern #app .doc-overview-card{
  background:#fff;border:1px solid #e4eaf2;
  border-radius:15px;box-shadow:0 5px 21px rgba(31,51,93,.045);
}
html.eb-modern #app .panel{padding:24px 25px;margin-bottom:20px}
html.eb-modern #app .panel h2{
  font-size:17px;font-weight:790;letter-spacing:-.026em;color:#1b2b48;
}
html.eb-modern #app .panel>h2:first-child,
html.eb-modern #app .panel>.toolbar{
  border-bottom:1px solid #edf0f6;padding-bottom:15px;margin-bottom:19px;
}
html.eb-modern #app .stats{gap:16px}
html.eb-modern #app .stat{
  padding:23px 23px 22px;border-top:1px solid #e4eaf2;position:relative;overflow:hidden;
}
html.eb-modern #app .stat:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#4c7df0;
}
html.eb-modern #app .stat .label{
  font-size:12px;color:#77859b;font-weight:710;letter-spacing:.012em;
}
html.eb-modern #app .stat .number{
  color:#1d3153;font-weight:850;font-size:31px;letter-spacing:-.05em;
}
html.eb-modern #app .btn{
  min-height:40px;border:1px solid #d8e0ed;border-radius:10px;
  color:#334965;background:#fff;font-weight:710;box-shadow:none;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .15s;
}
html.eb-modern #app .btn:hover:not(:disabled){
  color:#214b9c;background:#f0f5ff;border-color:#c4d5f4;
  box-shadow:0 3px 8px rgba(36,82,168,.055);
}
html.eb-modern #app .btn.primary{
  background:#2d61df;color:#fff;border-color:#2d61df;
  box-shadow:0 4px 12px rgba(37,91,222,.14);
}
html.eb-modern #app .btn.primary:hover:not(:disabled){
  background:#1f51c6;color:#fff;border-color:#1f51c6;
  box-shadow:0 5px 13px rgba(34,79,185,.2);
}
html.eb-modern #app .btn.small{min-height:32px;border-radius:8px;font-weight:700}
html.eb-modern #app .btn.active{background:#e8efff;border-color:#bbd0ff;color:#2457b5}
html.eb-modern #app .btn.danger{color:#a13945;background:#fffafb;border-color:#f0d4d8}
html.eb-modern #app .btn.ghost{border:0;background:transparent}
html.eb-modern #app .table-wrap{
  border:1px solid #e8edf4;border-radius:12px;overflow-x:auto;background:#fff;
}
html.eb-modern #app .table-wrap th{
  background:#f7f9fc;color:#728097;
  font-size:10px;font-weight:810;letter-spacing:.095em;
  border-bottom:1px solid #e6ebf3;padding:13px 14px;
}
html.eb-modern #app .table-wrap td{
  font-size:13px;color:#33445c;padding:14px;
  border-bottom:1px solid #eef1f6;
}
html.eb-modern #app .table-wrap tbody tr:nth-child(even){background:#fff}
html.eb-modern #app .table-wrap tbody tr:hover,
html.eb-modern #app .table-wrap tr[data-id]:hover{background:#f1f6ff}
html.eb-modern #app .badge{
  border-radius:7px;padding:6px 9px;font-size:11px;font-weight:760;
}
html.eb-modern #app .badge.green{background:#e7f7ee;color:#186341}
html.eb-modern #app .badge.amber{background:#fff5e3;color:#865d13}
html.eb-modern #app .badge.red{background:#fdf0f0;color:#a63f4d}
html.eb-modern #app .field input,
html.eb-modern #app .field textarea,
html.eb-modern #app .field select,
html.eb-modern #app input.control,
html.eb-modern #app select.control,
html.eb-modern #app textarea.control{
  border-radius:10px;border-color:#d5ddea;color:#1b2c48;background:#fff;
  box-shadow:0 1px 2px rgba(18,38,68,.018);
}
html.eb-modern #app .field input:focus,
html.eb-modern #app .field textarea:focus,
html.eb-modern #app .field select:focus,
html.eb-modern #app .control:focus{
  border-color:#6f98ec;outline:3px solid #e3ecff;box-shadow:none;
}
html.eb-modern #app .doc-overview-card{padding:22px}
html.eb-modern #app .doc-overview-card:hover{
  border-color:#b9cdf0;box-shadow:0 10px 24px rgba(31,75,153,.075);
}
html.eb-modern #app .doc-overview-money{background:#f8faff;border-color:#e9edf6}
html.eb-modern #app .doc-editor-toolbar{
  background:#fff;border-color:#e4eaf2;border-radius:15px;box-shadow:var(--eb-shadow);
}
html.eb-modern #app .doc-editor-group{
  border-radius:13px;border-color:#dfe5f0;box-shadow:0 3px 11px rgba(27,48,87,.045);
}
html.eb-modern #app .doc-editor-group-head{
  background:#f0f4fc;color:#2d4e84;border-color:#dfe6f1;border-radius:12px 12px 0 0;
}
html.eb-modern #app .doc-item:nth-of-type(even){background:#fafcff}
html.eb-modern #app .doc-item:hover{background:#f3f7fe}
html.eb-modern #app .doc-template-field{
  background:#f9fbfe;border-color:#e2e9f4;border-radius:12px;
}
html.eb-modern #app .calendar-layout{gap:20px}
html.eb-modern #app .calendar-filter{
  border:1px solid #e6ebf3;border-radius:12px;padding:16px;background:#fff;
}
html.eb-modern #app .cal-grid{border-color:#e6ebf3;background:#e6ebf3;border-radius:13px}
html.eb-modern #app .cal-head{background:#f5f8fd;color:#697b94;font-size:11px}
html.eb-modern #app .cal-day{background:#fff}
html.eb-modern #app .cal-day.today{background:#eff5ff}
html.eb-modern #app .cal-date.today span{background:#2b61dd}
html.eb-modern #app .agenda-day{
  background:#fff;border-color:#e3e9f2;border-radius:13px;box-shadow:0 3px 11px rgba(32,51,87,.028);
}
html.eb-modern #app .agenda-day.today{border-color:#a7c1f2}
html.eb-modern #app .cal-event{border-radius:6px}
html.eb-modern #app .employee-dropdown-menu{
  border-color:#dce5f2;border-radius:12px;
  box-shadow:0 16px 37px rgba(21,42,77,.13);
}
html.eb-modern #app .team-calendar td{background:#fff}
html.eb-modern #app .team-calendar .cal-today{background:#edf4ff}
html.eb-modern #app .pagefoot{color:#9aa7b9;font-size:11px}
html.eb-modern #app .company-save-bar{
  background:rgba(255,255,255,.97);border-color:#d3def0;box-shadow:0 10px 30px rgba(32,64,112,.09);
}
html.eb-modern #modalHost .modal{
  border-radius:17px;border-color:#e0e7f1;box-shadow:0 26px 80px rgba(15,32,56,.24);
}
html.eb-modern #modalHost .modal-head{background:#f9fbff;border-bottom:1px solid #e8edf5}
html.eb-modern #modalHost .modal-actions{background:#fff;border-top:1px solid #e8edf5}
html.eb-modern #modalHost .btn.primary{background:#2d61df;border-color:#2d61df;color:#fff}
html.eb-modern #modalHost .btn{border-radius:9px}
html.eb-modern .login{
  background:radial-gradient(circle at 80% 9%,#467ae2 0,transparent 42%),linear-gradient(150deg,#101d3c,#1a3679);
}
html.eb-modern .login-card{border-radius:23px;box-shadow:0 29px 92px rgba(4,18,57,.31)}
html.eb-modern .login-card .mark{background:#2d61df;border-radius:11px}

/* Preview switch only: always available, never edits server-side settings. */
#app #designPreviewToggle{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  min-height:37px;font-size:12px;font-weight:780;border-radius:10px;
  padding:8px 13px;border:1px solid #bfd5e4;color:#24526f;background:#fff;
  cursor:pointer;
}
#app #designPreviewToggle:before{
  content:"◐";font-size:17px;line-height:1;color:#3680ad;font-weight:400;
}
#app #designPreviewToggle:hover{background:#edf5fa;border-color:#8db6d2}
html.eb-modern #app #designPreviewToggle{
  background:#eaf1ff;border-color:#c7d7ff;color:#2455bf;
}
html.eb-modern #app #designPreviewToggle:before{content:"✓";font-size:13px;font-weight:900;color:#2455bf}
html.eb-modern #app #designPreviewToggle:hover{background:#dae7ff}
#app .design-preview-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* Desktop-only navigation flyouts remain anchored to the heading. */
@media(min-width:721px){
 html.eb-modern #app .sidebar{z-index:20}
 html.eb-modern #app .nav-section.is-open{background:#f7f9fd}
 html.eb-modern #app .nav-submenu{
   background:#fff;border:1px solid #dce5f1;box-shadow:0 18px 44px rgba(27,50,83,.15);
   border-radius:0 13px 13px 13px;
 }
 html.eb-modern #app .nav .nav-submenu .nav-link{color:#42546e}
 html.eb-modern #app .nav .nav-submenu .nav-link:hover{color:#255bc9;background:#eef4ff;border-color:#e0e9ff}
 html.eb-modern #app .nav .nav-submenu .nav-link.active{color:#2153be;background:#e9f1ff;border-color:#d6e5ff}
}
@media(max-width:1160px) and (min-width:721px){
 html.eb-modern #app .sidebar{width:232px;padding-left:9px;padding-right:9px}
 html.eb-modern #app .content{padding-left:23px;padding-right:23px}
}
@media(max-width:720px){
 html.eb-modern #app .shell{display:block}
 html.eb-modern #app .sidebar{position:relative;height:auto;width:100%;padding:12px}
 html.eb-modern #app .sidebar .brand{margin-bottom:10px;padding-bottom:13px}
 html.eb-modern #app .nav-section{border:1px solid #e8edf5}
 html.eb-modern #app .nav-section.is-open{grid-column:span 2}
 html.eb-modern #app .top{min-height:auto;padding:17px 18px;gap:10px;flex-wrap:wrap}
 html.eb-modern #app .top h1{font-size:23px}
 html.eb-modern #app .content{padding:17px 15px 48px}
 html.eb-modern #app .panel{padding:18px}
 html.eb-modern #app .stat{padding:16px}
 #app #designPreviewToggle{font-size:11px;padding:7px 9px;min-height:34px}
 #app .design-preview-actions{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
 html.eb-modern *,html.eb-modern *:before,html.eb-modern *:after{transition:none!important;animation:none!important}
}
@media print {
 html.eb-modern #app #designPreviewToggle{display:none!important}
}

/* Extra keyboard clarity in optional preview. */
html.eb-modern #app .nav .nav-submenu .nav-link:focus-visible{outline:2px solid #3569e8;outline-offset:1px}

/* Improved hover targeting in the modern navigation preview. */
html.eb-modern #app .nav .nav-submenu .nav-link{cursor:pointer}

/* Persistent navigation: all items visible, groups are colored section headings. */
html.eb-modern #app .sidebar{width:278px}
html.eb-modern #app .nav{display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 2px 19px}
html.eb-modern #app .nav-section,
html.eb-modern #app .nav-section.is-open,
html.eb-modern #app .nav-section.has-current{
  position:static;display:block;min-width:0;background:transparent;border:0;
  border-radius:10px;padding:0;margin:0;
}
html.eb-modern #app .nav-section-trigger.nav-section-title,
html.eb-modern #app .nav-section.is-open .nav-section-trigger.nav-section-title{
  display:flex!important;align-items:center;justify-content:flex-start;gap:8px;
  width:100%;min-height:39px;margin:0;padding:10px 13px!important;
  border-radius:9px;border:1px solid #dbe7ff;border-left:4px solid #2b63dc;
  background:#eaf1ff!important;color:#2354b3!important;
  font-size:11px!important;font-weight:850!important;letter-spacing:.075em;
  text-transform:uppercase;cursor:default;box-shadow:none;
}
html.eb-modern #app .nav-section:nth-child(2n) .nav-section-title{
  background:#edf4ff!important;border-color:#dce7f9;border-left-color:#5380dd;
}
html.eb-modern #app .nav-section.has-current > .nav-section-title{
  background:#dfeaff!important;border-color:#c5d8ff;border-left-color:#245cde;
}
html.eb-modern #app .nav-section.has-current > .nav-section-title:before{display:none}
html.eb-modern #app .nav-submenu,
html.eb-modern #app .nav-section.is-open .nav-submenu{
  position:static!important;display:flex!important;flex-direction:column!important;
  width:100%!important;max-width:none!important;min-width:0!important;max-height:none!important;
  overflow:visible!important;left:auto!important;top:auto!important;margin:4px 0 0!important;
  padding:0 0 0 5px!important;gap:2px!important;background:transparent!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
}
html.eb-modern #app .nav .nav-submenu .nav-link{
  min-height:39px;padding:9px 10px 9px 12px;border-radius:9px;
  font-size:12.8px;font-weight:660;color:#42546e;white-space:normal;
  align-items:center;gap:10px;line-height:1.3;width:100%;
}
html.eb-modern #app .nav .nav-submenu .nav-link .nav-icon{width:24px;min-width:24px;height:25px;font-size:14px}
html.eb-modern #app .nav .nav-submenu .nav-link.active{
  color:#174db4;background:#e2edff;border-color:#d2e2ff;
  box-shadow:inset 3px 0 0 #245ee0;font-weight:820;
}
html.eb-modern #app .nav .nav-submenu .nav-link:hover{background:#f0f5ff;color:#2358bd}
html.eb-modern #app .nav .nav-submenu .nav-link.active:hover{background:#dbe9ff}
@media (max-width:1160px) and (min-width:721px){
 html.eb-modern #app .sidebar{width:258px}
}
@media (max-width:720px){
 html.eb-modern #app .sidebar{width:100%;height:auto;position:relative}
 html.eb-modern #app .nav{display:flex!important;flex-direction:column!important;gap:11px;overflow:visible!important;padding:0 2px 12px}
 html.eb-modern #app .nav-section,
 html.eb-modern #app .nav-section.is-open{width:100%;grid-column:auto;min-width:0}
 html.eb-modern #app .nav-submenu,
 html.eb-modern #app .nav-section.is-open .nav-submenu{display:flex!important;flex-direction:column!important}
 html.eb-modern #app .nav .nav-submenu .nav-link{min-height:43px;font-size:13px}
}

/* Final sidebar: Overview is the first item, with no START grouping. */
html.eb-modern #app .nav > .nav-overview-link{
  display:flex!important;align-items:center;gap:11px;width:100%;
  min-height:45px;padding:10px 15px;margin:2px 0 2px;
  text-align:left;font-size:13.5px;font-weight:790;
  color:#334c73;background:transparent;border:1px solid transparent;
  border-radius:11px;line-height:1.3;cursor:pointer;
}
html.eb-modern #app .nav > .nav-overview-link:hover{
  color:#2157b9;background:#edf3ff;border-color:#dfebff;
}
html.eb-modern #app .nav > .nav-overview-link.active{
  color:#194da9;background:#e2edff;border-color:#d0e0ff;
  box-shadow:inset 3px 0 0 #245ee0;font-weight:850;
}
html.eb-modern #app .nav > .nav-overview-link .nav-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:27px;height:27px;border-radius:8px;
  background:#edf2fa;color:#426698;
}
html.eb-modern #app .nav > .nav-overview-link.active .nav-icon{background:#d2e3ff;color:#245cda}
html.eb-modern #app .nav .nav-icon .menu-lucide{
  display:block;width:18px;height:18px;flex:none;
  stroke:currentColor;fill:none;stroke-width:1.8;
}
html.eb-modern #app .nav .nav-submenu .nav-link .nav-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:27px;min-width:27px;height:27px;
}
html.eb-modern #app .nav .nav-submenu .nav-link.active .nav-icon{
  color:#245cda;background:#d5e5ff;
}