/* 00-design-tokens.css
 * Generated from the active LibertyRoots Code Snippets export.
 * Each block keeps the original snippet ID for safe comparison and future cleanup.
 */

/* ============================================================
 * Original Snippet ID 209: AA • Variablen • CSS Snippet 
 * Das ist ein Beispiel-Snippet zur Demonstration, wie Du eigenen CSS-Code zu Deiner Website hinzufügen kannst. Du kannst es entfernen, oder bearbeiten, um eigenen Inhalt hinzuzufügen.
 * ============================================================ */
/* Variablen für CSS Gestaltung */
	:root {
		
		/* 3D Effekt für Elemente und Button */
		--fullwidth-element-3d: inset 0px -10px 10px -10px rgba(0, 0, 0, 0.3),	0 0 10px rgba(0, 0, 0, 0.3);
		--fullwidth-element-3d-frei: inset 0px -10px 10px -10px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.6);
		
		--element-3d-frei: inset 0 -1px 5px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.4);
		--element-3d: inset 0 -1px 5px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.2);								/*.element-background*/
		
		--background-image-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
		
		--button-3d-frei: inset 0 -1px 3px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.8);
		--button-3d-frei-hover: inset 0 -1px 3px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.6);
		
		--button-3d:  inset 0 -1px 3px rgba(0, 0, 0, 0.6), 0 2px 5px rgba(0, 0, 0, 0.6);
		--button-3d-hover: inset 0 -1px 3px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.4);
		
		--element-drop-shadow-frei: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.6));
		--element-drop-shadow-extrem: drop-shadow(0 2px 5px rgba(0, 0, 0, 1));
		--element-drop-shadow: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
		--element-drop-svg: url(drop-shadow.svg#drop-shadow);
		
		--oben-unten-shadow: inset 0px -10px 10px -10px rgba(0, 0, 0, 0.6), inset 0px 10px 10px -10px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.6);
		--oben-unten-shadow-frei: inset 0px -10px 10px -10px rgba(0, 0, 0, 0.6), inset 0px 10px 10px -10px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.6);
		--oben-shadow-frei: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 0, 0, 0.6);
		--oben-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.3);
		
		
		/* Übergänge */
		--uebergang-button: all 100ms ease-in-out;
		--transition-standard: all 200ms ease-in-out;
		
		
		/* Radien */
		--radius-button-outline: 0.45em;
		--radius-button: 0.5em;
		--radius-element: 1em;
		--radius-element-klein: 0.5em;
		
		
		/* Button */
		--padding-button: 1.5vw 2.9vw 1.6vw;
		
		--button-f-size: 20px;
		
		
		/* Schrift Variablen */
		--prim-font: 'fira sans', Helvetica, Arial, sans-serif;
		--second-font: 'lato', Helvetica, Arial, sans-serif;
			
		--font-dick: 900;
		--font-normal: 400;
			
		--text-trans: lowercase;
		
		--text-shadow-h: 0 1px 3px rgba(0, 0, 0, 0.3);
		
		
		/* Farb Variablen */
		--gelb: #ffd500;
		--gelb-hell: #ffef9c;
			
		--rot: #ff3a33;
		--violett: #6d44ff;
		
		--black: #000103;
		--white: #fff;
		
		--green: #54af00;
		--green-hover: #61c900;
		
		
		/* Menü Farb Variablen */
		--dark-menu-button: #37393f;
		--light-menu-button: #e8e8e8;
		
		--dark-menu-button-hover: #43454d;
		--light-menu-button-hover: #ccc;
		
		
		/* Button Farb Variablen */
		--button-font-color: #37393f;
		--button-font-color-hover: #fff;
		
		
		/* Button Variablen */
		--outline-button-background: rgba(80, 80, 80, 0.5);
		--button-margin: 1vw;
		--button-min-width: 10vw;
		
		--button-padding-normal: 1.5vw 2.9vw 1.6vw;
		--button-padding-outline: 1.3vw 2.7vw 1.4vw;
		
		--button-padding-normal-1279: 1.9vw 3.3vw 2vw;
		--button-padding-outline-1279: 1.6vw 3.1vw 1.7vw;
		
		--button-padding-normal-989: 2.3vw 3.7vw 2.4vw;
		--button-padding-outline-989: 2vw 3.5vw 2.1vw;
		
		--button-padding-normal-767: 2.6vw 4vw 2.7vw;
		--button-padding-outline-767: 2.3vw 3.8vw 2.4vw;
		
		--button-padding-normal-479: 2.9vw 4vw 3vw;
		--button-padding-outline-479: 2.6vw 3.8vw 2.7vw;
		
	}