/*
   V-KON.media GmbH
   Alessandro Soldo
   2023-01-24
*/

/*
 * Schriftschnitte einzeln
 *
 */

@font-face {
    font-family: 'Jost-Thin';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src:    local(''),
            url(/fonts/Jost/Jost-Thin.woff2) format('woff2'),
            url(/fonts/Jost/Jost-Thin.ttf) format('truetype');
 }

@font-face {
    font-family: 'Jost-ExtraLight';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src:    local(''),
            url(/fonts/Jost/Jost-ExtraLight.woff2) format('woff2'),
            url(/fonts/Jost/Jost-ExtraLight.ttf) format('truetype');
}

@font-face {
    font-family: 'Jost-Light';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src:    local(''),
            url(/fonts/Jost/Jost-Light.woff2) format('woff2'),
            url(/fonts/Jost/Jost-Light.ttf) format('truetype');
}

@font-face {
    font-family: 'Jost-Regular';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src:    local(''),
            url(/fonts/Jost/Jost-Regular.woff2) format('woff2'),
            url(/fonts/Jost/Jost-Regular.ttf) format('truetype');
}


@font-face {
  font-family: 'Jost-Medium';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src:    local(''),
          url(/fonts/Jost/Jost-Medium.woff2) format('woff2'),
          url(/fonts/Jost/Jost-Medium.ttf) format('truetype');
}

@font-face {
    font-family: 'Jost-SemiBold';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src:    local(''),
            url(/fonts/Jost/Jost-SemiBold.woff2) format('woff2'),
            url(/fonts/Jost/Jost-SemiBold.ttf) format('truetype');
}

@font-face {
    font-family: 'Jost-Bold';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src:    local(''),
            url(/fonts/Jost/Jost-Bold.woff2) format('woff2'),
            url(/fonts/Jost/Jost-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Jost-ExtraBold';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src:    local(''),
            url(/fonts/Jost/Jost-ExtraBold.woff2) format('woff2'),
            url(/fonts/Jost/Jost-ExtraBold.ttf) format('truetype');
}

@font-face {
    font-family: 'Jost-Black';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src:    local(''),
            url(/fonts/Jost/Jost-Black.woff2) format('woff2'),
            url(/fonts/Jost/Jost-Black.ttf) format('truetype');
}


@font-face {
  font-family: 'RobotoMono-Regular';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src:    local(''),
          url(/fonts/Roboto/RobotoMono-Regular.woff2) format('woff2'),
          url(/fonts/Roboto/RobotoMono-Regular.ttf) format('truetype');
}


@font-face {
  font-family: 'RobotoMono-Medium';
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src:    local(''),
          url(/fonts/Roboto/RobotoMono-Medium.woff2) format('woff2'),
          url(/fonts/Roboto/RobotoMono-Medium.ttf) format('truetype');
}


/* Zeichensatz Klassen */
.FontJostThin {
  font-family: 'Jost-Thin';
}

.FontJostExtraLight {
  font-family: 'Jost-ExtraLight';
}

.FontJostLight {
  font-family: 'Jost-Light';
}

.FontJostRegular {
  font-family: 'Jost-Regular';
}

.FontJostMedium {
  font-family: 'Jost-Medium';
}

.FontJostSemiBold {
  font-family: 'Jost-SemiBold';
}

.FontJostBold {
  font-family: 'Jost-Bold';
}

.FontJostExtraBold {
  font-family: 'Jost-ExtraBold';
}

.FontJostBlack {
  font-family: 'Jost-Black';
}

.FontRobotoMonoRegular {
  font-family: 'RobotoMono-Regular';
}

.FontRobotoMonoMedium {
  font-family: 'RobotoMono-Medium';
}

path:focus {
  /* dieser eintrag ist nowendig, 
     da ansonsten bei einem click 
     auf ein leaflet polygon eine
     schwarze umrandung um das 
     polygon gezeichnet wird 
  */
  outline: 0 none !important;
}

 /* farben */
:root {
  --menu-top: 1.5em;
  --menu-left: 1.5em;
  --menu-right: 1.5em;
  --menu-bottom: 1.5em;
  --vismo-border-radius: 0.5em;

  /* https://m2.material.io/design/color/the-color-system.html#color-theme-creation */
  --primary:rgb(38, 38, 38);
  --primary-variant:rgb(96, 96, 101);
  --secondary:rgb(255, 150, 29);
  --secondary-variant:rgb(255, 181, 97);
  --background:rgb(38, 38, 38);
  --surface:rgb(255, 255, 255);
  --error:rgb(179,17,0);
  --on-primary:rgb(255, 255, 255);
  --on-secondary:rgb(255, 255, 255);
  --on-background:rgb(255, 255, 255);
  --on-surface:rgb(0, 0, 0);
  --on-error:rgb(255, 255, 255);
  --map-background: rgb(66, 79, 60);

  --fontThin: 'Jost-Thin';
  --fontExtraLight: 'Jost-ExtraLight';
  --fontLight: 'Jost-Light';
  --fontRegular: 'Jost-Regular';
  --fontMedium: 'Jost-Medium';
  --fontSemiBold: 'Jost-SemiBold';
  --fontBold: 'Jost-Bold';
  --fontExtraBoldy: 'Jost-ExtraBold';
  --fontBlack: 'Jost-Black';
  --fontMonoRegular: 'RobotoMono-Regular';
  --fontMonoMedium: 'RobotoMono-Medium';

  --icon-height: 2rem;

  --menu-left: 1.5rem;
  --menu-top: 1.5rem;
  --menu-right: 1.5rem;
  --menu-bottom: 1.5rem;
  --menu-height: 2rem;
  --button-icon-height: 2rem;
  --border-radius: 1.5rem;
  /* Rücksprache Benamung */
  --container-padding-top: 3rem;
  --container-padding-left: 2.5rem

}

* {
  font-family: Jost-Regular, sans-serif;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden; 
  font-size: 1em;
}

/*

@media (max-width: 900px) {
  html, body {
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden; 
      font-size: 0.80em;
  }
}

@media (min-width: 901px) {
  html, body {
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden; 
      font-size: 1em;
  }
}
*/

.transparent {
  opacity: 0;
  transition: opacity 0.5s;
}

.opaque {
  opacity: 1;
  transition: opacity 0.5s;
}

/* scrollbar START */

/* chrome */
*::-webkit-scrollbar {
  width: 0.75rem;
  border-radius: 0.5rem;
}

*::-webkit-scrollbar-track {
  box-shadow: inset 2px 0px 0px var(--on-background), inset -2px 0px 0px var(--on-background);
  background-color: var(--background);
  border-radius: 0.5rem;
  right: 0.75rem;
}

*::-webkit-scrollbar-thumb {
  background: var(--background);
  border-radius: 0.5rem;
  width: 0.75rem;
}

/* hiermit kann der abstand der scrollbar vom unteren und obere rand gesteuert werden */
*::-webkit-scrollbar-button:single-button {
  background-color: var(--on-background);
  display: block;
  border-style: none;
  height: 0.5rem;
  width: 0.5rem;
}

/* scrollbar ENDE */


.cursorMessen {
  /* cursor: crosshair; */
  cursor: url('../img/cursorMessen.png') 16 16, crosshair; /* pfad ist relativ zum stylesheet */
}

.cursorVorDrehen {
  cursor: url('../img/cursorVorDrehen.png') 16 16, grab; /* pfad ist relativ zum stylesheet */
}

.cursorAmDrehen {
  cursor: url('../img/cursorAmDrehen.png') 16 16, grabbing; /* pfad ist relativ zum stylesheet */
}

.cursorDefault {
  cursor: default;
}

.noPointerEvents {
  pointer-events: none;
}

.showHideTransition {
  transition: opacity 0.5s ease;
}