@charset "utf-8";

/********************************************************************************
 *
 * CSS Variablen
 *
 ********************************************************************************/

:root {

	/**
	 * Header-Banner
	 */
	--header-banner---height: 150px;

	/**
	 * Schrift
	 */
	--big-screen---font-family: "Helvetica Neue", Helvetica, Arial, Lucida, sans-serif;
	--big-screen---font-size: 18px;
	--big-screen---line-height: 1.5em;

	--small-screen---font-family: "Helvetica Neue", Helvetica, Arial, Lucida, sans-serif;
	--small-screen---font-size: 18px;
	--small-screen---line-height: 1.5em;


	/**
	 *	Menus
	 */
	--menu-header-brand-big-screen---width: 200px;
	--menu-header-brand-small-screen---width: 100px;

	/** Hamburger Menu */
	--menu-transition-time: 0.3s;

	--hamburger-menu---sausage-length-closed: 22px;
	--hamburger-menu---sausage-thickness-closed: 3px;
	--hamburger-menu---sausage-length-open: 30px;
	--hamburger-menu---sausage-thickness-open: 4px;
	--hamburger-menu---sausage-distance: 5px;

	/* Menu Farbe und Hintergrund */
	--menu-level-1---background-color: #dd0000;
	--menu-level-1---color: #ffffff;
	--menu-level-1---font-family: inherit;
	--menu-level-1---font-weight: normal;

	--menu-level-2---background-color: #dd1100;
	--menu-level-2---color: #ffffff;
	--menu-level-2---font-family: inherit;
	--menu-level-2---font-weight: normal;

	--menu-level-3---background-color: #dd2200;
	--menu-level-3---color: #ffffff;
	--menu-level-3---font-family: inherit;
	--menu-level-3---font-weight: normal;


	/* Menu Farbe und Hintergrund hover, active und focus */
	--menu-active-level-1---background-color: #ff0000;
	--menu-active-level-1---color: #ffffff;

	--menu-active-level-2---background-color: #ff1100;
	--menu-active-level-2---color: #ffffff;

	--menu-active-level-3---background-color: #ff2200;
	--menu-active-level-3---color: #ffffff;


	/* Menu logged in Farbe und Hintergrund */
	--menu-logged-in-level-1---background-color: #ff7700;
	--menu-logged-in-level-1---color: #ffffff;

	--menu-logged-in-level-2---background-color: #ff7711;
	--menu-logged-in-level-2---color: #ffffff;

	--menu-logged-in-level-3---background-color: #ff7722;
	--menu-logged-in-level-3---color: #ffffff;


	/* Menu logged in Farbe und Hintergrund hover, active und focus */
	--menu-logged-in-active-level-1---background-color: #ee7700;
	--menu-logged-in-active-level-1---color: #ffffff;

	--menu-logged-in-active-level-2---background-color: #ee7711;
	--menu-logged-in-active-level-2---color: #ffffff;

	--menu-logged-in-active-level-3---background-color: #ee7722;
	--menu-logged-in-active-level-3---color: #ffffff;


	/* Menu und Menu logged in Grösse und Schriftgrössen nach Level */
	--menu-big-screen-level-1---height: 60px;
	--menu-big-screen-level-1---font-size: 18px;

	--menu-big-screen-level-2---height: 50px;
	--menu-big-screen-level-2---font-size: 18px;

	--menu-big-screen-level-3---height: 40px;
	--menu-big-screen-level-3---font-size: 18px;

	--menu-big-screen---arrow-width: 13px;
	--menu-big-screen---arrow-height: 13px;


	--menu-small-screen-level-1---height: 80px;
	--menu-small-screen-level-1---width: 50px;
	--menu-small-screen-level-1---font-size: 24px;
	--menu-small-screen-level-1-divider---width: 1px;
	--menu-small-screen-level-1-divider---color: #cccccc;

	--menu-small-screen-level-2---height: 60px;
	--menu-small-screen-level-2---font-size: 20px;
	--menu-small-screen-level-2-divider---width: 1px;
	--menu-small-screen-level-2-divider---color: #bbbbbb;

	--menu-small-screen-level-3---height: 50px;
	--menu-small-screen-level-3---font-size: 18px;
	--menu-small-screen-level-3-divider---width: 1px;
	--menu-small-screen-level-3-divider---color: #aaaaaa;

	--menu-small-screen---arrow-width: 15px;
	--menu-small-screen---arrow-height: 15px;

	/**
	 *	Buttons
	 */
	--button---background-color: #dd0000;
	--button---color: #ffffff;

	--button-active---background-color: #bb0000;
	--button-active---color: #ffffff;

	--button-disabled---background-color: #cccccc;
	--button-disabled---color: #ffffff;

	/* Ein disabled button sollte nicht auf hover reagieren! */
	--button-disabled-active---background-color: #cccccc;
	--button-disabled-active---color: #ffffff;


	/**
	 * Headings
	 */
	--header---letter-spacing: 0.05em;

	--mso-title---font-size: 36px; /* Haupttitel */
	--h1---font-size: 28px;
	--h2---font-size: 24px;
	--h3---font-size: 20px;
	--h4---font-size: 18px;

	--mso-title---font-family: inherit;
	--h1---font-family: inherit;
	--h2---font-family: inherit;
	--h3---font-family: inherit;
	--h4---font-family: inherit;

	--mso-title---font-weight: bold;
	--h1---font-weight: normal;
	--h2---font-weight: normal;
	--h3---font-weight: normal;
	--h4---font-weight: normal;

	--mso-title---font-style: normal;
	--h1---font-style: normal;
	--h2---font-style: normal;
	--h3---font-style: normal;
	--h4---font-style: normal;

	--mso-title---text-decoration: none;
	--h1---text-decoration: none;
	--h2---text-decoration: none;
	--h3---text-decoration: none;
	--h4---text-decoration: none;

	--mso-title---color: #11509c;
	--h1---color: #255b9c;
	--h2---color: #30619c;
	--h3---color: #30619c;
	--h4---color: #30619c;

	/**
	 * Input fields
	 */
	--input-field-big-screen---height: 30px;
	--input-field-big-screen---font-size: 16px;

	--input-field-small-screen---height: 40px;
	--input-field-small-screen---font-size: 18px;


	/**
	 * Accordions
	 */
	--accordion---color: #000000;
	--accordion---background-color: #eeeeee;
	--accordion---border: 0;

	--accordion-h1---font-family: inherit;
	--accordion-h2---font-family: inherit;
	--accordion-h3---font-family: inherit;
	--accordion-h4---font-family: inherit;

	--accordion-h1---font-weight: normal;
	--accordion-h2---font-weight: normal;
	--accordion-h3---font-weight: normal;
	--accordion-h4---font-weight: normal;

	--accordion-h1---font-style: normal;
	--accordion-h2---font-style: normal;
	--accordion-h3---font-style: normal;
	--accordion-h4---font-style: normal;

	/* Accordion big screen */
	--accordion-big-screen-h1---size: 60px;
	--accordion-big-screen-h2---size: 50px;
	--accordion-big-screen-h3---size: 40px;
	--accordion-big-screen-h4---size: 30px;

	--accordion-big-screen-h1---font-size: 20px;
	--accordion-big-screen-h2---font-size: 18px;
	--accordion-big-screen-h3---font-size: 16px;
	--accordion-big-screen-h4---font-size: 16px;

	/* Accordion small screen */
	--accordion-small-screen-h1---size: 80px;
	--accordion-small-screen-h2---size: 60px;
	--accordion-small-screen-h3---size: 50px;
	--accordion-small-screen-h4---size: 40px;


	--accordion-small-screen-h1---font-size: 24px;
	--accordion-small-screen-h2---font-size: 20px;
	--accordion-small-screen-h3---font-size: 18px;
	--accordion-small-screen-h4---font-size: 16px;


	--accordion-active---color: #000000;
	--accordion-active---background-color: #dddddd;

	--accordion-inactive---color: #000000;
	--accordion-inactive---background-color: #dddddd;


	/**
	 * Shadows
	 */
	--box-shadow: 10px 10px 10px #000000, 10px 10px 10px #000000;

}