:root {    
    /* FONT SIZE */
    --font-size-smallest-text: 14px;
    --font-size-small-text: 17px;
    --font-size-text: 20px;
    --font-size-big-text: 22px;
    --font-size-menubutton: 20px;
    --font-size-button: 20px;
    --font-size-input: 20px;
    --font-size-h1: 40px;
    --font-size-h2: 30px;
    --font-size-h3: 25px;

    --font-size-mobile-h1: 30px;

    /* FONT FAMILY */
    --font-family: Open Sans;
    --font-family-monospace: monospace;

    /* TRANSITIONS */
    --trans300: 300ms;
    --trans500: 0ms; /* 500ms after 200ms */
    --trans750: 0ms; /* 750ms after 200ms */
    
    /* VAR */
    --var-header-background: url("../images/header_background.jpg");
    --var-header-height: 400px;
    --var-header-background-blur: 0px;
    --var-header-box-shadow: 0px 0px 0px black;

    --var-message-background-color: var(--col-neutral);
    --var-message-color: var(--col-neutral-con);
    --var-message-transition-delay: 0ms;
    --var-message-translateX: 40px;
    --var-message-opacity: 0;
    --var-message-margin-top: 20px;
    --var-message-margin-bottom: 0px;
    --var-message-z-index: 3;
    --var-message-close-time: 6000;

    --var-pfeife-fill: var(--col-price-disabled);
    --var-pfeife-fill-con: var(--col-price-disabled-con);
    --var-pfeife-hoehe: 200px;

    --var-opt-container-pfeife-geschenk-height: auto;
    --var-opt-container-pfeife-zahlung-lastschrift-height: auto;
    --var-opt-container-pfeife-zahlung-ueberweisung-height: auto;

    --var-opt-container-spende-geschenk-height: auto;
    --var-opt-container-spende-zahlung-lastschrift-height: auto;
    --var-opt-container-spende-zahlung-ueberweisung-height: auto;

    --var-price-background-color: var(--col-price-disabled);
    --var-price-color: var(--col-price-disabled-con);
    
    --var-footer-height: 60px;
    --var-sidebar-height: 0px;
    
    --var-pfeife-eckdaten-background-color: var(--col-price-disabled);
    --var-pfeife-eckdaten-color: var(--col-price-disabled-con);
    
    --var-statusbar-width: 0%;
    --var-statusbar-color: var(--col-background-con);

    --var-werk-container-height: 0px;
    --var-optional-container-max-height: 0px;
    --var-mark-color: var(--col-mark-0);
    --var-register-container-width: 100%;
    --var-zahlung-status-background-color: var(--col-mark-0);
}