:root{
  --theme-bg:#e3e1dd;
  --theme-bg-soft:#e9e7e3;
  --theme-surface:#ebe8e3;
  --theme-surface-strong:#f0ede8;
  --theme-surface-muted:#dfdfdc;
  --theme-glass-surface:rgba(235,232,227,.82);
  --theme-glass-surface-strong:rgba(241,238,233,.90);
  --theme-glass-surface-muted:rgba(225,223,219,.74);
  --theme-shell-surface:rgba(228,223,216,.94);
  --theme-shell-surface-muted:rgba(220,217,212,.92);
  --theme-nav-surface-start:var(--theme-shell-surface);
  --theme-nav-surface-end:var(--theme-shell-surface-muted);
  --theme-nav-text:#273653;
  --theme-nav-text-soft:#667284;
  --theme-nav-icon-text:#31415f;
  --theme-nav-icon-surface:rgba(122,105,133,.12);
  --theme-nav-active-text:#7d4541;
  --theme-nav-active-surface:rgba(176,106,100,.12);
  --theme-nav-active-icon-surface:rgba(176,106,100,.20);
  --theme-nav-accent:#a6605a;
  --theme-glass-line:rgba(105,83,72,.16);
  --theme-text:#1f2733;
  --theme-text-soft:#667284;
  --theme-line:rgba(17,44,81,.12);
  --theme-shadow:0 18px 36px rgba(14,35,62,.12);
  --theme-brand:#123b6b;
  --theme-brand-strong:#0d2d52;
  --theme-brand-soft:#dbe7f7;
  --theme-accent:#d24b43;
  --theme-accent-soft:#f3c06f;
  --theme-success:#2f6a48;
  --theme-action:#a6605a;
  --theme-action-strong:#7d4541;
  --theme-action-hover:#b36d66;
  --theme-action-hover-strong:#8c4d48;
  --theme-action-soft:rgba(166,96,90,.14);
  --theme-action-line:rgba(125,69,65,.72);
  --theme-action-shadow:0 2px 7px rgba(125,69,65,.18);
  --theme-focus-ring:rgba(166,96,90,.34);
  --theme-primary-control:linear-gradient(135deg,var(--theme-action),var(--theme-action-strong));
  --theme-primary-control-hover:linear-gradient(135deg,var(--theme-action-hover),var(--theme-action-hover-strong));
  --theme-secondary-control:var(--theme-action-soft);
  --theme-secondary-control-line:rgba(125,69,65,.28);
  --theme-secondary-control-text:var(--theme-action-strong);
  --theme-section-header:linear-gradient(180deg,#a6605a,#8d514c);
  --theme-section-header-text:#fff;
  --theme-table-header:linear-gradient(180deg,#a6605a,#7d4541);
  --theme-table-header-text:#fff;
  --theme-neutral-accent-bg:rgba(166,96,90,.09);
  --theme-neutral-accent-line:rgba(166,96,90,.22);
  --theme-neutral-accent-text:#7d4541;
  --app-highlight-rgb:41,87,164;
}

html,
body{
  color:var(--theme-text);
  background:var(--theme-bg);
}

html.dark-mode,
body.dark-mode{
  --theme-bg:#131923;
  --theme-bg-soft:#1a2230;
  --theme-surface:#1f2734;
  --theme-surface-strong:#252f3d;
  --theme-surface-muted:#18202c;
  --theme-glass-surface:rgba(24,32,44,.24);
  --theme-glass-surface-strong:rgba(31,39,52,.38);
  --theme-glass-surface-muted:rgba(24,32,44,.16);
  --theme-nav-surface-start:#3c3b49;
  --theme-nav-surface-end:#1b2942;
  --theme-nav-text:#f4f1ef;
  --theme-nav-text-soft:rgba(244,241,239,.58);
  --theme-nav-icon-text:#d9d2cc;
  --theme-nav-icon-surface:rgba(255,255,255,.07);
  --theme-nav-active-text:#fff7f3;
  --theme-nav-active-surface:rgba(166,96,90,.28);
  --theme-nav-active-icon-surface:rgba(166,96,90,.18);
  --theme-nav-accent:#b86f67;
  --theme-glass-line:rgba(255,255,255,.07);
  --theme-text:#eef1f6;
  --theme-text-soft:#aeb8c7;
  --theme-line:rgba(255,255,255,.08);
  --theme-shadow:0 20px 42px rgba(0,0,0,.35);
  --theme-brand:#b06a64;
  --theme-brand-strong:#9a5751;
  --theme-brand-soft:rgba(176,106,100,.12);
  --theme-accent:#c59661;
  --theme-accent-soft:#d9b483;
  --theme-success:#7ac497;
  --theme-action:#374252;
  --theme-action-strong:#485668;
  --theme-action-hover:#435064;
  --theme-action-hover-strong:#56657a;
  --theme-action-soft:rgba(112,131,158,.14);
  --theme-action-line:rgba(126,145,173,.34);
  --theme-action-shadow:none;
  --theme-focus-ring:rgba(137,153,179,.38);
  --theme-secondary-control:var(--theme-action-soft);
  --theme-secondary-control-line:var(--theme-action-line);
  --theme-secondary-control-text:#d2d8e1;
  --theme-section-header:linear-gradient(180deg,var(--theme-action),var(--theme-action-strong));
  --theme-section-header-text:#fff;
  --theme-table-header:linear-gradient(180deg,var(--theme-action),var(--theme-action-strong));
  --theme-table-header-text:#fff;
  --theme-neutral-accent-bg:rgba(112,131,158,.10);
  --theme-neutral-accent-line:rgba(126,145,173,.22);
  --theme-neutral-accent-text:#c5cedc;
  --app-highlight-rgb:176,106,100;
  background-color:var(--theme-bg) !important;
  background-image:
    linear-gradient(rgba(9,14,23,.18),rgba(9,14,23,.36)),
    url("/static/backgrounds/monkeydocs-dark-blueprint.webp") !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-attachment:fixed !important;
}

html:not(.dark-mode),
html:not(.dark-mode) body{
  background-color:var(--theme-bg) !important;
  background-image:
    linear-gradient(rgba(238,242,248,.01),rgba(238,242,248,.04)),
    url("/static/backgrounds/monkeydocs-light-blueprint-copper.webp") !important;
  background-blend-mode:multiply,multiply !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-attachment:fixed !important;
}

body{
  transition:background-color .25s ease,color .25s ease;
}

html.theme-view-transition::view-transition-group(root){
  animation-duration:.62s;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}

html.theme-view-transition::view-transition-old(root),
html.theme-view-transition::view-transition-new(root){
  animation:none;
  mix-blend-mode:normal;
}

html.theme-view-transition::view-transition-old(root){
  z-index:1;
}

html.theme-view-transition::view-transition-new(root){
  z-index:2;
  animation:themeReveal .62s cubic-bezier(.4,0,.2,1) both;
}

html.theme-transition-fallback,
html.theme-transition-fallback body,
html.theme-transition-fallback body *,
html.theme-transition-fallback body *::before,
html.theme-transition-fallback body *::after{
  transition-property:background-color,color,border-color,box-shadow,opacity,fill,stroke !important;
  transition-duration:.52s !important;
  transition-timing-function:cubic-bezier(.4,0,.2,1) !important;
}

@keyframes themeReveal{
  from{
    clip-path:circle(24px at var(--theme-transition-x) var(--theme-transition-y));
    opacity:.82;
  }
  to{
    clip-path:circle(var(--theme-transition-radius) at var(--theme-transition-x) var(--theme-transition-y));
    opacity:1;
  }
}

@media (prefers-reduced-motion:reduce){
  html.theme-view-transition::view-transition-group(root),
  html.theme-view-transition::view-transition-old(root),
  html.theme-view-transition::view-transition-new(root){
    animation:none !important;
  }
}

a{color:var(--theme-brand)}
button,input,select,textarea{font:inherit}

.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--theme-line);
  border-radius:999px;
  background:var(--theme-surface);
  color:var(--theme-text);
  box-shadow:var(--theme-shadow);
}

body.dark-mode .theme-toggle{
  background:var(--theme-surface-strong);
}

body:not(.dark-mode) .btn-primary,
body:not(.dark-mode) button.primary,
body:not(.dark-mode) .primary-btn{
  background:var(--theme-primary-control) !important;
  border-color:var(--theme-action-line) !important;
  color:#fff !important;
  box-shadow:var(--theme-action-shadow);
}

body:not(.dark-mode) .btn-primary:hover:not(:disabled),
body:not(.dark-mode) button.primary:hover:not(:disabled),
body:not(.dark-mode) .primary-btn:hover:not(:disabled){
  background:var(--theme-primary-control-hover) !important;
}

body:not(.dark-mode) .tab-btn.active,
body:not(.dark-mode) .tab-btn.is-active,
body:not(.dark-mode) .billing-tab.is-active,
body:not(.dark-mode) .admin-tab.is-active,
body:not(.dark-mode) button.tab.active{
  background:var(--theme-primary-control) !important;
  border-color:var(--theme-action-line) !important;
  color:#fff !important;
}

body:not(.dark-mode) .btn-primary:focus-visible,
body:not(.dark-mode) button.primary:focus-visible,
body:not(.dark-mode) .primary-btn:focus-visible,
body:not(.dark-mode) .tab-btn:focus-visible,
body:not(.dark-mode) .billing-tab:focus-visible,
body:not(.dark-mode) .admin-tab:focus-visible{
  outline:2px solid var(--theme-focus-ring);
  outline-offset:2px;
}

/* Wiederverwendbare Rollen für neue und schrittweise modernisierte Seiten. */
.theme-action{
  background:var(--theme-primary-control);
  border-color:var(--theme-action-line);
  color:#fff;
  box-shadow:var(--theme-action-shadow);
}

.theme-action:hover:not(:disabled){
  background:var(--theme-primary-control-hover);
}

.theme-action-secondary{
  background:var(--theme-secondary-control);
  border-color:var(--theme-secondary-control-line);
  color:var(--theme-secondary-control-text);
}

.theme-section-header{
  background:var(--theme-section-header);
  color:var(--theme-section-header-text);
}

.theme-table-header{
  background:var(--theme-table-header);
  color:var(--theme-table-header-text);
}

body.dark-mode table,
body.dark-mode th,
body.dark-mode td{
  border-color:var(--theme-line);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode label,
body.dark-mode p,
body.dark-mode span,
body.dark-mode strong,
body.dark-mode small,
body.dark-mode legend,
body.dark-mode summary{
  color:var(--theme-text);
}

body.dark-mode table{
  background:transparent !important;
  color:var(--theme-text);
}

body.dark-mode th{
  background:var(--theme-table-header) !important;
  color:#fff !important;
}

body.dark-mode td{
  background:var(--theme-glass-surface) !important;
  color:var(--theme-text) !important;
}

body.dark-mode tr:hover td{
  background:var(--theme-glass-surface-strong) !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea{
  background:var(--theme-surface-muted) !important;
  color:var(--theme-text) !important;
  border:1px solid var(--theme-line) !important;
}

body.dark-mode button:not(.theme-toggle){
  box-shadow:none;
}

body.dark-mode .block-box,
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .box,
body.dark-mode .toolbar,
body.dark-mode .category,
body.dark-mode .geraete-box,
body.dark-mode .form-box,
body.dark-mode .admin-section,
body.dark-mode .profile-box,
body.dark-mode .project-card,
body.dark-mode .crew-banner,
body.dark-mode .projekt-info,
body.dark-mode .upload-area,
body.dark-mode .standort-list,
body.dark-mode .dialog-box,
body.dark-mode section,
body.dark-mode article,
body.dark-mode div[class$="-box"],
body.dark-mode div[class*=" block-box"],
body.dark-mode div[class*="user-"],
body.dark-mode div[class*="rechte-"]{
  background:var(--theme-glass-surface) !important;
  color:var(--theme-text);
  border-color:var(--theme-glass-line) !important;
}

body:not(.dark-mode) .block-box,
body:not(.dark-mode) .card,
body:not(.dark-mode) .panel,
body:not(.dark-mode) .box,
body:not(.dark-mode) .toolbar,
body:not(.dark-mode) .category,
body:not(.dark-mode) .geraete-box,
body:not(.dark-mode) .form-box,
body:not(.dark-mode) .admin-section,
body:not(.dark-mode) .profile-box,
body:not(.dark-mode) .project-card,
body:not(.dark-mode) .crew-banner,
body:not(.dark-mode) .projekt-info,
body:not(.dark-mode) .upload-area,
body:not(.dark-mode) .standort-list,
body:not(.dark-mode) .dialog-box,
body:not(.dark-mode) section,
body:not(.dark-mode) article,
body:not(.dark-mode) div[class$="-box"],
body:not(.dark-mode) div[class*=" block-box"],
body:not(.dark-mode) div[class*="user-"],
body:not(.dark-mode) div[class*="rechte-"]{
  background:var(--theme-glass-surface) !important;
  color:var(--theme-text);
  border-color:var(--theme-glass-line) !important;
}

body.dark-mode .dialog .panel,
body.dark-mode .modal,
body.dark-mode .modal-content,
body.dark-mode .popup,
body.dark-mode .popup-content,
body:not(.dark-mode) .dialog .panel,
body:not(.dark-mode) .modal,
body:not(.dark-mode) .modal-content,
body:not(.dark-mode) .popup,
body:not(.dark-mode) .popup-content{
  background:var(--theme-surface) !important;
  color:var(--theme-text);
  border-color:var(--theme-line) !important;
}

body.dark-mode body,
body.dark-mode main{
  background:transparent !important;
}

body.dark-mode .msg,
body.dark-mode .hint{
  color:var(--theme-text-soft) !important;
}

body.dark-mode .toolbar,
body.dark-mode .inline-actions,
body.dark-mode .table-actions,
body.dark-mode .dialog-actions{
  background:transparent !important;
}

body.dark-mode .category h3,
body.dark-mode .geraete-header{
  background:var(--theme-section-header) !important;
  color:#fff !important;
}

body.dark-mode tr:nth-child(even) td,
body.dark-mode .geraet-row:nth-child(even),
body.dark-mode .reparatur-karte:nth-child(even),
body.dark-mode .standort-row:nth-child(even){
  background:var(--theme-glass-surface-strong) !important;
}

body.dark-mode tr:nth-child(odd) td,
body.dark-mode .geraet-row:nth-child(odd),
body.dark-mode .reparatur-karte:nth-child(odd),
body.dark-mode .standort-row:nth-child(odd){
  background:var(--theme-glass-surface) !important;
}

body:not(.dark-mode) table{
  background:transparent !important;
}

body:not(.dark-mode) td{
  background:var(--theme-glass-surface) !important;
  border-color:var(--theme-glass-line) !important;
}

body:not(.dark-mode) tr:nth-child(even) td,
body:not(.dark-mode) .geraet-row:nth-child(even),
body:not(.dark-mode) .reparatur-karte:nth-child(even),
body:not(.dark-mode) .standort-row:nth-child(even){
  background:var(--theme-glass-surface-strong) !important;
}

body:not(.dark-mode) tr:nth-child(odd) td,
body:not(.dark-mode) .geraet-row:nth-child(odd),
body:not(.dark-mode) .reparatur-karte:nth-child(odd),
body:not(.dark-mode) .standort-row:nth-child(odd){
  background:var(--theme-glass-surface) !important;
}

body:not(.dark-mode) tr:hover td{
  background:var(--theme-glass-surface-strong) !important;
}

body.dark-mode .empty,
body.dark-mode em,
body.dark-mode .text-muted{
  color:var(--theme-text-soft) !important;
}

.app-highlight-target{
  border-color:rgba(var(--app-highlight-rgb), 0.62) !important;
  outline:2px solid rgba(var(--app-highlight-rgb), 0.32);
  outline-offset:4px;
  box-shadow:0 0 0 5px rgba(var(--app-highlight-rgb), 0.12);
  animation:appTargetPulse 4.8s ease;
}

body.video-dock-dragging{
  user-select:none;
}

@keyframes appTargetPulse{
  0%{
    box-shadow:0 0 0 0 rgba(var(--app-highlight-rgb), 0);
    outline-color:rgba(var(--app-highlight-rgb), 0);
  }
  8%,
  18%,
  28%,
  38%,
  48%{
    box-shadow:0 0 0 6px rgba(var(--app-highlight-rgb), 0.2);
    outline-color:rgba(var(--app-highlight-rgb), 0.44);
  }
  13%,
  23%,
  33%,
  43%,
  53%{
    box-shadow:0 0 0 2px rgba(var(--app-highlight-rgb), 0.08);
    outline-color:rgba(var(--app-highlight-rgb), 0.12);
  }
  65%,
  100%{
    box-shadow:0 0 0 5px rgba(var(--app-highlight-rgb), 0.12);
    outline-color:rgba(var(--app-highlight-rgb), 0.32);
  }
}