@charset "UTF-8";
body {
  /*
   Dummys für leere Layouts ;)
   */
  /* primärfarbe - gibt dem theme seinen namen*/
  --color-primary: #FF00FF;
  --color-primary-for-text: var(--color-primary-for-text-on-light, var(--color-primary));
  --color-primary-lighter: oklch(from var(--color-primary) 80% c h);
  --color-primary-lighter-2: oklch(from var(--color-primary) 90% c h);
  --color-primary-lighter-3: oklch(from var(--color-primary) 95% c h);
  --color-primary-darker: oklch(from var(--color-primary) 40% c h);
  --color-primary-darker-2: oklch(from var(--color-primary) 30% c h);
  --color-primary-darker-3: oklch(from var(--color-primary) 20% c h);

  --color-primary-tint: rgba(from var(--color-primary) r g b / 0.08);
  --color-primary-shade-1: var(--color-primary-lighter); /* wird im darktheme geändert*/
  --color-primary-shade-2: var(--color-primary-lighter-2); /* wird im darktheme geändert*/
  --color-primary-shade-3: var(--color-primary-lighter-3); /* wird im darktheme geändert*/

  /* schrift auf primärfarbe - weiß oder schwarz wahrscheinlich */
  --color-primary-contrast: #FFFFFF;
  /* Sekundärfarbe - wofür wissen wir noch nicht genau */
  --color-secondary: var(--color-primary);

  /* schrift auf primärfarbe - weiß oder schwarz wahrscheinlich */
  --color-secondary-contrast: #FFFFFF;

  /* Entityaction */
  --color-action-primary: var(--color-primary);
  --color-action-secondary: light-dark(var(--color-primary-darker-2), var(--color-primary-lighter-2));

  /*
    Die Akzentfarbe, hier ist interaktivität möglich.
    Sehr starke, auffällige Farben, die den Nutzer lenken
   */
  --color-accent: var(--color-primary);
  --color-accent-contrast: var(--color-primary-contrast);
  /* legacy / deprecated */
  --color-primary-accent: var(--color-accent);

  /*
       Basisfarben - in jedem Layout gleich
   */

  /* Schatten für Karten, boxen, usw */
  --shadow-cards: 0 .5px 3px rgba(0, 0, 0, .25);
  --shadow-sidebar: -1px 0 5px rgba(0, 0, 0, 0.25);
  --shadow-button: none; /* 0 .5px 2px rgba(0,0,0,0.25);*/
  --shadow-button-raised: 0 1px 3px rgba(0,0,0,0.25);

  /* Systemweite Grundfarben */
  --color-status-blue-light: #0066dd;
  --color-status-green-light: #479a3f;
  --color-status-yellow-light: #e3be00;
  --color-status-red-light: #d44216;
  --color-status-orange-light: #f1a129;
  --color-status-grey-light: #888;
  --color-tint-blue-light: #3391ff;
  --color-tint-green-light: #86cc7f;
  --color-tint-yellow-light: #f8e57c;
  --color-tint-red-light: #ef6237;
  --color-tint-orange-light: #fcb64e;
  --color-tint-grey-light: #a8a8a8;

  --color-status-blue-dark: #3391ff;
  --color-status-green-dark: #86cc7f;
  --color-status-yellow-dark: #f8e57c;
  --color-status-red-dark: #ef6237;
  --color-status-orange-dark: #fcb64e;
  --color-status-grey-dark: #a8a8a8;
  --color-tint-blue-dark: #265a9b;
  --color-tint-green-dark: #72956b;
  --color-tint-yellow-dark: #91843c;
  --color-tint-red-dark: #a24c32;
  --color-tint-orange-dark: #7e5c23;
  --color-tint-grey-dark: #646464;

  /** todo: irgendwann varianten für dark/light*/
  --color-crm-sales:   #65b765;
  --color-crm-cutomer: #4182b7;
  --color-crm-contractor: #e4c62e;

  --color-admin-red: #C33333;
  --color-input-mandatory: #C33333;

  /*Darkmode*/
  --color-default-hover-dark: rgba(from var(--color-primary-darker-2) r g b / 0.5); /* rgba(50, 45, 24, 0.5);*/
  --color-current-item-dark: #a28500;
  --color-selected-item-dark: #436748;
  --color-selected-item-hover-dark: #93c69f;
  --color-tint-dark-00625: rgba(0,0,0,0.0625);
  --color-tint-dark-0125: rgba(0,0,0,0.125);
  --color-tint-dark-25: rgba(0,0,0,0.25);
  --color-tint-dark-50: rgba(0,0,0,0.50);
  --color-tint-dark-75: rgba(0,0,0,0.75);
  --color-tint-weekend-dark: rgba(55, 50, 45, 0.33);
  --color-tint-holiday-dark: rgba(255, 160, 100, 0.33);
  --color-tint-vacation-dark:rgba(255, 255, 100, 0.33);
  --color-tint-vacation-request-dark: rgba(161, 213, 209, 0.49);
  --color-tint-sick-dark: rgba(255, 100, 200, 0.33);
  --color-tint-birthday-dark:rgba(150, 200, 100, 0.33);
  --color-tint-extern-dark:rgba(0, 100, 250, 0.33);
  --color-board-card-dark: #444; /*rgba(240, 227, 0, 0.25);*/
  --color-font-weekend-dark: rgba(141, 141, 141, 0.91);
  --color-worker-cap-free-dark: #8c9a84;
  --color-worker-cap-error-dark: #7f5d66;
  --color-worker-cap-time-dark: #3e639f;

  --color-tint-mark-bg-1-dark: #7f5d66;
  --color-tint-mark-bg-2-dark: #697661;;
  --color-tint-mark-bg-3-dark: #324f7e;
  --color-tint-mark-bg-4-dark: #546c4f;
  --color-tint-mark-bg-5-dark: #887100;

  /*Lightmode*/
  --color-default-hover-light: rgba(from var(--color-primary-lighter-2) r g b / 0.5); /*rgba(255, 245, 157, 0.50);*/
  --color-current-item-light: #ffdc00;
  --color-selected-item-light: #A7E0B5;
  --color-selected-item-hover-light: #93c69f;
  --color-tint-light-00625: rgba(255,255,255,0.0625);
  --color-tint-light-0125: rgba(255,255,255,0.125);
  --color-tint-light-25: rgba(255,255,255,0.25);
  --color-tint-light-50: rgba(255,255,255,0.50);
  --color-tint-light-75: rgba(255,255,255,0.75);
  --color-tint-weekend-light: rgba(220, 210, 180, 0.33);
  --color-tint-holiday-light: rgba(255, 160, 100, 0.33);
  --color-tint-vacation-light: rgba(255, 255, 100, 0.33);
  --color-tint-vacation-request-light: rgb(161, 213, 209);
  --color-tint-sick-light: rgba(255, 100, 200, 0.33);
  --color-tint-birthday-light:rgba(150, 200, 100, 0.33);
  --color-tint-extern-light:rgba(0, 100, 250, 0.33);
  --color-board-card-light: #FFF; /*rgba(240, 227, 0, 0.25);*/
  --color-font-weekend-light: rgba(38, 50, 56, .35);
  --color-worker-cap-free-light: #E8FFDB;
  --color-worker-cap-error-light: #FFE0EE;
  --color-worker-cap-time-light: #d8eefe;

  --color-tint-mark-bg-1-light: #FFE0EE;
  --color-tint-mark-bg-2-light: #F2EBDE;
  --color-tint-mark-bg-3-light: #D8E3FF;
  --color-tint-mark-bg-4-light: #D7F4DA;
  --color-tint-mark-bg-5-light: #F7FFE0;

  --color-tr-lodd-dark: transparent;
  --color-tr-lodd-light: transparent;

  /* Die Dark-Farben müssen gut unterscheidbar sein
     wir können hier nicht mit Boxshadows arbeiten */
  --color-shade-dark-none: #000;
  --color-shade-dark-1: #242424; /* Leftarea boxen */
  --color-shade-dark-2: #323232;
  --color-shade-dark-3: #404040;
  --color-shade-dark-4: #525252;
  --color-shade-dark-5: #646464;
  --color-shade-dark-6: #808080;
  --color-shade-dark-9: #A0A0A0; /* smallgrey */

  /* Die Light-Farben liegen viel näher bei einander,
    damit es nicht zu schnell grau wird - hier helfen
     uns boxshadows */
  --color-shade-light-none: #FFF;
  --color-shade-light-1: #F6F6F6; /* Dialog-Hintergrund, Leftarea boxen */
  --color-shade-light-2: #ECECEC;
  --color-shade-light-3: #E4E4E4;
  --color-shade-light-4: #D2D2D2;
  --color-shade-light-5: #C0C0C0;
  --color-shade-light-6: #909090; /* smallgrey */
  --color-shade-light-9: #666666;

  /* Seit 2022.2 deaktivieren wir den Hintergrundblur - er kostet einfach viel zu viel Leistung */
  --backdrop-filter-ui-dark: none; /*blur(5px) contrast(70%) brightness(80%);*/
  --backdrop-filter-ui-light: none; /*blur(5px) contrast(50%) brightness(140%);*/

  /*  Chart Color */
  --color-chart0: var(--color-primary);
  --color-chart1: rgb(183, 9, 0);
  --color-chart2: rgb(0, 172, 166);
  --color-chart3: rgb(92, 139, 0);
  --color-chart4: #F57C00;
  --color-chart5: rgb(255, 0, 170);
  --color-chart6: #FFEE58;
  --color-chart7: rgb(170, 255, 213);
  --color-chart8: rgb(144, 115, 255);
  --color-chart9: rgb(255, 231, 158);
  --color-chart10: #37474E;

  /*  Maße  */

  --height-topmenu1: 48px;
  --height-topmenu2: 0px;
  --height-footer: 32px;
  --width-leftarea: 300px;
  --width-sidebar: 48px;
  --width-componentspacing: 12px;
  --width-componentpadding: 8px;
  --height-toolbar: 34px;
  --height-dialog-header: 48px;
  --height-input: 32px; /* auf touch/mobile 40px */
  --scale-input-label-above: .75;
  --border-radius-input: 4px;
  --border-radius-button: calc(var(--height-input) / 2);
  --padding-input-horz: 12px;
  --padding-input-vert: 5px; /* Bei Änderungen: kontrollieren, ob die Checkbox noch gut aussieht*/
  --width-spacing-dialog-fieldset-vert: 12px;
  --width-spacing-dialog-fieldset-horz: 16px;
  --dialog-row-indent: 24px;
  --height-input-button: 20px;
  --border-radius-input-button: 10px;
  --scale-factor: 1;
  --width-tr-border: 1px;
  --width-date-column: 80px;
  --icon-size: 24px;

  --color-menu1-back: var(--color-card-background);
  --color-menu1-back-hover: var(--color-primary);
  --color-menu1-font: var(--color-card-font);
  --color-menu1-font-hover: var(--color-primary-contrast);

  /*--color-input-label: var(--color-input-font);*/

  --color-menu2-back: var(--color-shade-2);
  --color-menu2-back-hover: var(--color-shade-2-contrast);
  --color-menu2-font: var(--color-shade-2-contrast);
  --color-menu2-font-hover: var(--color-primary);

  --color-menu3-font: var(--color-primary-contrast);
  --color-menu3-back: var(--color-primary-shade-1);
  --color-menu3-font-hover: var(--color-primary-for-text);
  --color-menu3-back-hover: var(--color-card-background);

  --color-button-border: transparent;
  --color-button-back: var(--color-toolbar-button);
  --color-button-font: var(--color-toolbar-font);
  --color-input-button-back: transparent;
  --color-input-button-font: var(--color-toolbar-font);
  --width-button-border: 1px;
  --color-button-raised-back: var(--color-accent);
  --color-button-raised-font: var(--color-accent-contrast);


  --font-weight-column-captions: bold;
  --font-weight-button: 400;
  --width-grid-rowheader: 128px;

  --border-radius-menu-item: 20px;
  --padding-menu-item: 20px;

  --border-radius-modal: 8px;
  --shadow-modal: 0 2px 10px 2px rgba(0,0,0,0.25);

  --transition-strong-ease: cubic-bezier(0.180, 0.005, 0.000, 1.000);
  /*--transition-overshoot-ease: cubic-bezier(0.34, 1.56, 0.64, 1);*/
  --transition-overshoot-ease: cubic-bezier(.04,1.3,.45,.98);
  --transition-overshoot-both: cubic-bezier(0.000, -1, 1, 2);

  /* Material Design v3 */
  --transition-emphazised: cubic-bezier(0.2, 0.0, 0, 1.0);;
  --transition-emphazised-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --transition-emphazised-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);

  --color-form: var(--color-card-background);

  font: var(--font-normal);
  color: var(--color-main-font);
  accent-color: var(--color-accent); /* für native browser-elemente */

  --user-background-image-xq: none; /* Excellent*/
  --user-background-image-hq: none; /* High Quality */
  --user-background-image-lq: none; /* Low Quality */
  --user-background-image: var(--user-background-image-hq, none);

  --notificator-size: 24px;

  --dm-width-sidebar: 324px;
  --dm-padding-sidebar: 10px;
  --dm-margin: 10px;
  --dm-color-stack-back: var(--color-shade-2);
}

@media screen and (min-width: 3840px) {
  body.connection-4g { /* LTE oder WiFi, very big screen: Excellent Quality */
    --user-background-image: var(--user-background-image-xq, none);
  }
}

body.menu-contextbar-classic {
  --height-topmenu2: 24px;
}

body.menu-contextbar-navigation {
  --height-topmenu2: 40px;
}

[class*="jml_input_readonly"]:not(.ro-transparent, .typeradiosender-edit) {
  --color-input-background: var(--color-shade-4);
  --color-accent: var(--color-shade-4);
}

/*
Neues Responsive Menu für pf6
*/
body {
  --debug-device-width: 'Monitor > 1300, ';
  --debug-window-width: 'big window, ';
  --debug-mobile-mode: 'non-mobile';
}
body.mobile-device {--debug-mobile-mode: 'mobile'}

body.debugmode::after {
  display: block;
  position: fixed;
  top: 4px;
  right: 40px;
  height: 10px;
  width: 300px;
  content: var(--debug-device-width) var(--debug-window-width) var(--debug-mobile-mode);
  background: #000;
  color: #FFF;
  text-align: center;
  font-size: 10px;
  line-height: 10px;
}

/*
    Unterschieden wird:

    Non-Mobilemode:
    Größe des Ausgabegeräts   : Schriftgrößen
    (standard, small, portable)

    Größe des Browserfensters : Komponentengrößen

    Mobilmode (touchmode)     :
    Größe des Ausgabegeräts   : Schriftgrößen & Komponentengrößen
*/

body:not(.mobile-device) {
  /*  Standardschriften für große Monitore */
  --font-family: "Roboto", Myriad, Helvetica, Tahoma, Arial, clean, sans-serif;
  --font-header: 500 28px var(--font-family);
  --font-large:  500 22px var(--font-family);
  --font-subheader: 500 16px var(--font-family);
  --font-menu:   400 14px var(--font-family);
  --font-medium: 400 14px var(--font-family);
  --font-normal:     13px var(--font-family);
  --font-small:      11px var(--font-family);
  --font-xsmall:      9px var(--font-family);

  --font-input-label: var(--font-small);
  --font-input: var(--font-medium);
}

body.mobile-device, body.touch-user {
  /*  Standardschriften für MobileMode (Touchbedienung) */
  --font-family: "Roboto", Myriad, Helvetica, Tahoma, Arial, clean, sans-serif;
  --font-header: 500 28px var(--font-family);
  --font-large:  500 22px var(--font-family);
  --font-subheader: 500 16px var(--font-family);
  --font-menu:   400 14px var(--font-family);
  --font-medium: 400 16px var(--font-family); /* DONT CHANGE! unter 16px zoomt ios die inputs */
  --font-normal:     13px var(--font-family);
  --font-small:      11px var(--font-family);
  --font-xsmall:      9px var(--font-family);

  --font-input-label: var(--font-normal);
  --font-input: var(--font-medium); /* DONT CHANGE! unter 16px zoomt ios die inputs */
  --height-input: 40px;
  --padding-input-vert: 8px;
  --width-spacing-dialog-fieldset-vert: 16px;
  --width-spacing-dialog-fieldset-horz: 16px;
  --height-footer: 64px; /* auf handys müssen footer und sidebar gleich dick sein*/
}

/* ---- Das waren die Schriften - je nach Browserfenster nun die Komponenten */

/* medium window, aber nicht so klein wie ein Smartphone in landscape */
@media (max-width: 1300px) and (min-width: 500px) and (min-height:500px){


  body {--debug-window-width: 'medium window < 1300, ';
    --width-grid-rowheader: 96px;
  }

  /* falls wir nicht im mobil(=touch)-modus sind */
  body:not(.mobile-device) {
    /*--width-sidebar: 32px;*/
    --height-toolbar: 32px;
  }
}

/* small netbook oder tablet*/
@media (max-width: 1149px) {
  .navi_main.tmplLogo { display: none; }

  body {--debug-window-width: 'small window < 1050, ';}
  body {
    --scale-factor: 0.75; /* 75% */
    /* zu viel geht kaputt: --width-leftarea: 225px; /* 75% der normalen sidebar */
    /*--height-topmenu1: 56px;*/
    --width-grid-rowheader: 64px;
    --dialog-row-indent: 12px;

  }
  a.cke_button {
    padding: 4px 4px;
  }
}

/* phone (evtl landscape) */
@media (max-width: 799px) {
  body {--debug-window-width: 'smaller window <800, ';}
  body {
    --height-topmenu1: 48px;
    --width-componentspacing: 4px;
    --width-componentpadding: 4px;
  }
}

/* small Phone iPhone 6,7,8,X portrait */
@media (max-device-width: 375px) {
    body {--debug-window-width: 'tiny window <376, ';}
    body {
      --user-background-image: var(--user-background-image-lq, none);
  }
  
  @media (prefers-reduced-transparency) {
    body {
      --disable-backdrop-filter: none; /* none == disabled !*/
      --backdrop-filter-ui-dark: none; /* none == disabled !*/
      --backdrop-filter-ui-light: none; /* none == disabled !*/
    }
  }
  @media (prefers-reduced-motion) {
    body {
      --disable-animation: none; /* none == disabled !*/
    }
  }
}
    /** Zum Schluss ein paar custom properties, die wir einfach nur initialisieren, damit intellij nicht meckert */
    body {
      --header-background: transparent;
      --height-by-rows: 16px;
    }