@import url(/assets/css/Astro-Symbole.css);
@import url(/assets/css/Dekorative-Fonts.css);
@import url(/assets/css/Bodyfonts.css);

:root {
	--grau: #999999;
	--dunkelgrau: #777777;
	--schiefergrau: slategray;
	--schwarz: black;
	--silber: silver;
	--hellgrau: lightgray;
	--weisserrauch: whitesmoke;
	--muschel: seashell;
	--gelb:yellow;
	--orange:orange;
	--gold:gold;
	--dunkelgold:darkgoldenrod;
	--mokkasin:moccasin;
	--khaki:khaki;
	--dunkelkhaki:darkkhaki;
	--sand:sandybrown;
	--sienna:sienna;
	--blau:blue;
	--dunkelblau:darkblue;
	--himmelblau:lightskyblue;
	--fuchsie:fuchsia;
	--magenta:magenta;
	--stahlblau:steelblue;
	--hellblau:lightblue;
	--tuerkis:turquoise;
	--gruen:green;
	--dunkelgruen:darkgreen;
	--waldgruen:forestgreen;
	--meergruen:seagreen;
	--limettengruen:limegreen;
	--hellgruen:lightgreen;
	--kornseide:cornsilk;
	--bluetenweiss:floralwhite;
	--limette:lime;
	--erde:#8B4513;
	--feuer:#FF4500;
	--wasser:#27AE60;
	--luft:#87CEEB;
	--azur:#e4ffff;
}

	.text-imperastro { color: #c9b528; } /* Roti */
	.bg-imperastro { background-color: #c9b528; } /* Roti */

	html[data-layout="horizontal"] .content, 
	html[data-layout="horizontal"] .menu, 
	html[data-layout="horizontal"] .topbar, 
	html[data-layout="horizontal"] footer > * {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}

	html[data-layout="horizontal"] .app-menu .menu {
		margin: 0;
	}

	body {
		color:black; background-color: white;
		/* font-family: Arsenal-Regular; */
		font-family: Barlow-Regular;
		font-size: 1rem;
		line-height: 1.5rem;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	h1, h2, h3, h4, h5, h6,
	.fw-bold { font-family: Barlow-Semibold; }
	.float-left { float:left; }
	.float-right { float:right; }

	.row {
		--ct-gutter-x: 16px;
	}

	.card {
		margin-bottom: 15px;
	}

	.inaktiv-10 { opacity: 0.1; }
	.inaktiv-20 { opacity: 0.2; pointer-events: none; }
	.inaktiv-30 { opacity: 0.3; pointer-events: none; }
	.inaktiv-40 { opacity: 0.4; pointer-events: none; }
	.inaktiv, .inaktiv-50 { opacity: 0.5; pointer-events: none; }
	.inaktiv-60 { opacity: 0.6; pointer-events: none; }
	.inaktiv-70 { opacity: 0.7; pointer-events: none; }
	.inaktiv-80 { opacity: 0.8; pointer-events: none; }
	.inaktiv-90 { opacity: 0.9; pointer-events: none; }

/*  UBold */

	.font-26 { font-size: 26px; }
	.font-25 { font-size: 25px; }
	.font-24 { font-size: 24px; }
	.font-23 { font-size: 23px; }
	.font-9 { font-size: 9px; }
	.font-8 { font-size: 8px; }
	.font-7 { font-size: 7px; }
	.font-6 { font-size: 6px; }

	/* Ergänzung DISPLAY-Fontgrößen  */

	.display-7 {
	  font-size: calc(1.375rem + 1vw);
	  font-weight: 300;
	  line-height: 1.1;
	}
	@media (min-width: 1200px) {
	  .display-7 {
		font-size: 2rem;
	  }
	}
	
	.display-8 {
	  font-size: calc(1.375rem + 0.3vw);
	  font-weight: 300;
	  line-height: 1.1;
	}
	@media (min-width: 1200px) {
	  .display-8 {
		font-size: 1.5rem;
	  }
	}
	
	.display-9 {
	  font-size: calc(1.375rem);
	  font-weight: 300;
	  line-height: 1.1;
	}
	@media (min-width: 1200px) {
	  .display-9 {
		font-size: 1rem;
	  }
	}

	/* Ende Ergänzung DISPLAY-Fontgrößen  */

	.rotate-270 {
		writing-mode: vertical-rl;
		width: 100%;
		display: flex;
		height: auto;
		align-items: center;
	}

	.rotate-180 {
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}

	.rotate-90 {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		writing-mode: vertical-rl;
		width: 100%;
		display: flex;
		height: auto;
		align-items: center;
	}

	.h-10vh { height: 10vh !important; }
	.h-10 { height: 10% !important; }
	.h-20vh { height: 20vh !important; }
	.h-20 { height: 20% !important; }
	.h-30vh { height: 30vh !important; }
	.h-30 { height: 30% !important; }
	.h-40vh { height: 40vh !important; }
	.h-40 { height: 40% !important; }
	.h-50vh { height: 50vh !important; }
	.h-50 { height: 50% !important; }
	.h-60vh { height: 60vh !important; }
	.h-60 { height: 60% !important; }
	.h-70vh { height: 70vh !important; }
	.h-70 { height: 70% !important; }
	.h-80vh { height: 80vh !important; }
	.h-80 { height: 80% !important; }
	.h-90vh { height: 90vh !important; }
	.h-90 { height: 90% !important; }
	.h-100vh { height: 100vh !important; }
	.h-100 { height: 100% !important; }
	.w-10vw { width: 10vw !important; }
	.w-10 { width: 10% !important; }
	.w-20vw { width: 20vw !important; }
	.w-20 { width: 20% !important; }
	.w-30vw { width: 30vw !important; }
	.w-30 { width: 30% !important; }
	.w-40vw { width: 40vw !important; }
	.w-40 { width: 40% !important; }
	.w-50vw { width: 50vw !important; }
	.w-50 { width: 50% !important; }
	.w-60vw { width: 60vw !important; }
	.w-60 { width: 60% !important; }
	.w-70vw { width: 70vw !important; }
	.w-70 { width: 70% !important; }
	.w-80vw { width: 80vw !important; }
	.w-80 { width: 80% !important; }
	.w-90vw { width: 90vw !important; }
	.w-90 { width: 90% !important; }
	.w-100vw { width: 100vw !important; }
	.w-100 { width: 100% !important; }

	.cursor-pointer { cursor: pointer; }
	body .hover-hellgelb:hover { background-color: lightyellow; }

	.logo-box .logo-dark { display: block; position: relative; left: -8px; top: -2px; }
	.logo-box .logo-dark img { height:48px; }

	[toggle]:hover { cursor:pointer; }

	html[data-layout="horizontal"] .app-menu .menu > .menu-item > .menu-link {
	}

	/* Schließt ein geöffnetes Dropdown-Menü explizit aktiv  */
	.dropdown.force-close:hover .dropdown-menu {
	  opacity: 0 !important;
	  visibility: hidden !important;
	  pointer-events: none;
	}

	.menu .menu-item .menu-link {
		padding: var(--ct-menu-link-padding-y) 6px;
	}

	.menu .menuitem-active {
		background-color: lightyellow;
	}

	html[data-layout="horizontal"] #Hauptmenue .menu-link .menu-icon {
		display: none;
	}

	.content-page {
		position: absolute !important;
	}

	pre {
		display: block;
		margin-top: 0;
		margin-bottom: 1rem;
		overflow: auto;
		font-size: 87.5%;
		white-space: break-spaces;
	}

	.list-group-item {
		background-color: var(--kornseide);
	  	margin-bottom: 3px;
	  	border-radius: 10px;
		padding: 8px 15px;
	}

	.dropdown-toggle:hover>.dropdown-menu, .dropdown:hover>.dropdown-menu {
	  display: block;
	  cursor:pointer;
	}
	
	.dropdown>.dropdown-toggle:active {
	  /*Without this, clicking will make it sticky*/
		/* pointer-events: none; */
	}
	
	#Kontaktauswahl .nav-item, #Typauswahl .nav-item {
		padding-top: 0.1rem !important;
		padding-bottom: 0.1rem !important;
	}

	.Auge .linkeSpalte {
		position: absolute;
		z-index: 10;
		color:black;
		left: 10px;
		top: 77px;
	}

	.Auge .rechteSpalte {
		position: absolute;
		z-index: 10;
		color:black;
		right: 10px;
		top: 77px;
	}

	#Infoleiste-Top {
		position: absolute;
		top: 80px;
		left:0px;
		padding: 0px 38px;
		width: 100%;
	}

	#Werkzeugleiste {
		position: fixed;
		bottom: 0px;
		left: 0px;
		padding: 0px;
		background-color: white;
		width: 100%;
		margin: 0px;
		height: 40px;
		z-index:1010;
	}

	#Werkzeugleiste .page-title-box .page-title { line-height: 55px; }
	#Werkzeugleiste .page-title-right { margin-top:16px; }
	#Werkzeugleiste [href="#Himmelskoerperauswahl"]:hover { color:black; }

	#Austauschbutton, #Statusbutton { position:fixed; z-index: 1020; }
	#Statusbutton { left:15px; bottom:15px; }
	#Austauschbutton { left:45px; bottom:15px; }
	#Austauschbutton i, #Statusbutton i { font-size: 17px; cursor: pointer; }

	#Himmelskoerperauswahl .Einstellungen { border: 1px solid seashell; }

	#Grafikcontainer .Grafik {
		width: 100% !important;
		position: absolute;
	}

	#Grafik {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}

	#Grafikinfos grafikinfo[inhalt="Datun"] {
		width: 80%;
	}
	#Grafikinfos grafikinfo[inhalt="Ort"] {
		width: 65%;
	}
	#Grafikinfos grafikinfo[inhalt="Land"] {
		width: 50%;
	}

	#Grafikoperationen {
		width: 50px;
		height: 50px;
		position: absolute;
	}

	#Grafiklogo {
		width: 30%;
		height: 3%;
		position: absolute;
	}
	#Grafiklogo img { height:100% !important; }

	#Grafik-Einstellungen { max-height: 85vh; overflow-y: scroll; }
	#Grafik-Einstellungen label { border: none; box-shadow: none; }
	#Grafik-Einstellungen input[type="color"] { border-bottom:1px solid lightgray; border-radius: 0px; padding: 5px 0px; margin: 10px 0px; }

	#Kreiswahl a { color:silver; }
	#Kreiswahl a:hover { color:gold; cursor:pointer; }
	#Kreiswahl a.active { color:black; }

	#linkeSpalte, #rechteSpalte, #Buehne {
		overflow-block: scroll !important;
		overflow-x: hidden !important;
	}

	#linkeSpalte, #rechteSpalte { 
		max-width: 280px; 
		background-color: white;
	}

	#linkeSpalte[data-status="ausgeblendet"] { display: none !important; }

	#rechteSpalte.breiteSpalte #rechteReiter { 
		font-size: 1.2em;
	}

	.nurBreit:not( .breiteSpalte .nurBreit ) {
		display: none;
	}

	#rechteSpalte.breiteSpalte #rechteReiter li a { 
		/* padding: 0.2rem 0.7rem 0.3rem 0.6rem !important; */
		font-family: BarlowCondensed-Regular;
		color: black;
	}

	#rechteSpalte #rechteReiter li a text {
		display: none; 
	}

	#rechteSpalte.breiteSpalte #rechteReiter li a text {
		display: flex;
		font-size: 0.9em;
		margin: 3px 2px 3px 2px;
		font-family: BarlowCondensed-Light;
		color: slategray;
	}

	#rechteSpalte.breiteSpalte #Deutung { 
		font-size: 1.2em;
		font-family: Barlow-Light;
		line-height: 1.4em;
		padding: 0px 0.5rem;
	}

	#rechteSpalte.breiteSpalte #Deutung h3 { 
		font-size: 1.4em;
		margin:40px 0px;
	}

	#rechteSpalte .Deutungstexttab { 
		flex-direction: column;
	}

	#rechteSpalte .Deutungsregeln { 
		font-size: 1.75em;
	}

	#rechteSpalte.breiteSpalte .Deutungsregeln { 
		font-size: revert;
	}

	#rechteSpalte .Funktionen .Kachel { 
		width: 47%;
		margin-bottom: 0px;
	}

	#rechteSpalte .Funktionen .Kachel .card-body { 
		padding: 10px;
		text-align: center;
	}

	#rechteSpalte .Funktionen .Kachel .card-body h3 { 
		font-size: 1.05em;
	}

	#rechteSpalte .Funktionen .Kachel .card-text { 
		display: none;
	}

	#rechteSpalte.breiteSpalte .Funktionen .Kachel { 
		width: 49%;
	}

	#rechteSpalte.breiteSpalte .Funktionen .Kachel .card-text { 
		display: flex;
		line-height: 1.3rem;
	}

	#rechteSpalte .Funktionen h4 { 
		font-size: 1.25em;
		margin: 5px 0px 20px;
	}

	#rechteSpalte .Funktionen .Menuelinks { 
		margin-bottom: 30px;
	}

	#Lektion {
		width:100%;
	}

	#Lektion ol {
		width:100%;
	}

	#rechteSpalte.breiteSpalte #Lektion ol, #rechteSpalte.breiteSpalte .Text {
		padding:0px 0px;
	}

	#Lektion.breiteSpalte ol li, #rechteSpalte.breiteSpalte .Text {
		font-size: 1.06em;
		margin-bottom: 20px;
		text-align: justify;
	}

	#rechteSpalte .tab-pane .Chart { 
		padding:20px;
	}

	.vorlesen-lassen {
		margin: 20px 0px;
		display: flex;
		flex-direction: row
	}

	#Datenzentrale .Reiter li a, #Infozentrale .Reiter li a { font-size: 0.9em; font-weight: 400; padding:5px 10px; }

	#Datenzentrale .Inforeiter { background-color: lightyellow; border-top-left-radius: 10px; border-top-right-radius: 10px; }
	#Datenzentrale .Inforeiter ul { background-color: lightyellow; font-size:0.8em;  }
	#Datenzentrale .Inforeiter ul li a.nav-link { font-weight:100; border-right: 1px solid white; padding:5px 10px !important; margin-right:5px; }
	#Datenzentrale .Inforeiter ul li a.nav-link.active { font-weight:bold; background-color: white; }	
	#Datenzentrale .Unterreiter ul { background-color: lightcyan; font-size:0.8em; border-radius: 0px; }
	#Datenzentrale .Unterreiter ul li a.nav-link { font-weight:100; border-right: 1px solid white; padding:5px 10px !important; margin-right:5px; }
	#Datenzentrale .Unterreiter ul li a.nav-link.active { font-weight:bold; border:1px solid lightgray; background-color: white; }

	#Infozentrale .Inforeiter ul { background-color: lightyellow; font-size:0.8em; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; }
	#Infozentrale .Inforeiter ul li a.nav-link { font-weight:100; border-right: 1px solid white; padding:5px 10px !important; margin-right:5px; }
	#Infozentrale .Inforeiter ul li a.nav-link.active { font-weight:bold; background-color: white; }	
	#Infozentrale .Unterreiter ul { background-color: lightcyan; font-size:0.8em; border-radius: 0px; }
	#Infozentrale .Unterreiter ul li a.nav-link { font-weight:100; border-right: 1px solid white; padding:5px 10px !important; margin-right:5px; }
	#Infozentrale .Unterreiter ul li a.nav-link.active { font-weight:bold; border:1px solid lightgray; background-color: white; }
	
	#Hauptdeutungsinhalte { margin-top: 25px; }
	#rechteSpalte.breiteSpalte #Hauptdeutungsinhalte { margin-top: 25px; }
	#Hauptdeutungsinhalte li a.active { background-color: lightyellow; color:black; }

	.schoenerText { padding-top: 5px; }

	.schoenerText p.Initial::first-letter {
		font-size: 3.6em;
		margin: 4px 4px 0px 0px;
		float: left;
		font-family: Milky_Sundae;
/*
		font-family: ConsiderRegular;
		font-family: Monesa;
		font-family: Mosaic_i;
		font-family: Bifaser;
		font-family: DaesangBrothers;
		font-family: BestAugmentRegular;
		font-family: Bizantheum;
		font-family: Panorama-Ligatures;
*/
	}

	.breiteSpalte .schoenerText p.Initial::first-letter {
		font-size: 4.65em;
		margin: 0px 4px 0px 0px;
	}

	.schoenerText p semikolon {
		margin: 0px 15px;
	}

	.schoenerText .Untertitel {
		font-family: Barlow-Light;
		/* font-family: Arsenal-Bold; */
		font-size: 1.15em;
		margin: 40px 0px 15px 0px !important;
		text-transform: uppercase;
		color: black;
	}

	.breiteSpalte .schoenerText .Untertitel, #Lektion .Untertitel {
		letter-spacing: 2px;
	}

	#rechteSpalte .Uebersicht {
		margin-left: 0.5em;
		margin-right: 0.5em;
	}

	input, textarea { font-size: 1.2em !important; }
	body ::placeholder { color: lightgray !important; }

	form.Textbearbeitung {
		position: fixed;
		top: 140px;
		left: 440px;
		width: 830px;
		background-color: #f0f0f0;
		padding: 50px;
		border-radius: 20px;
	}

	.ql-container {
		font-family: Barlow-Regular;
		font-size: inherit;
	}

	[klickbar], [klick-laden] { cursor:pointer; }

	body .Untermenue { display:none; }

	#Datumeinstellung { 
		position: absolute; 
		border-radius: 5px; 
		overflow:hidden; 
		z-index: 11000; 
		padding-bottom: 7px; 
		/* background-color: #ccd2a3; */
		background-color: lightyellow;
		border-top: 1px solid #dfdfdf;
	}
	#Datumeinstellung .Einstellungen { margin:9px 6px 0px 6px; z-index:10000; }
	#Datumeinstellung .Einstellungen li {
		margin: 0px 3px;
		border-radius: 5px;
		overflow: hidden;
		width: 38px;
	}
	#Datumeinstellung .Einstellungen li#Jahr {
		width: 47px;
	}
	#Datumeinstellung .Einstellungen li .navButtons {
		background-color: #939393;
	}
	#Datumeinstellung ul li .navButtons a:hover { background-color:#dcc41d; cursor:pointer; }
	#Datumeinstellung .Einstellungen li input {
		font-size: 14px !important;
		margin: 0px;
		padding: 2px 0px !important;
		text-align: center;
	}
	#Datumeinstellung .Einstellungen li .navButtons a {
		font-size: 17px;
		margin: 0px;
		border: none;
		padding: 4px 3px;
		color: white;
		text-align: center;
	}
	#Datumeinstellung .Wiederkehr select:hover, #Datumeinstellung .Wiederkehr .Pfeil:hover { background-color: #ebff65 !important; }
	#Datumeinstellung .Wiederkehr select, #Datumeinstellung .Wiederkehr .Pfeil { cursor: pointer; }

	#Sprechkontrolle { display:none; width: 260px; height:92px; position: absolute; top: 48px; left: 1590px; background-color: #fffeea; overflow: hidden; z-index: 10000; }
	#Sprechkontrolle .Inhalt { padding:10px; }

	#Kombi-Aspekte select { max-height: 40px; }

	#linkeSpalte .Aspektwirkungen div, #linkeSpalte tr[konstellation] { cursor:pointer; }
	#linkeSpalte .nav-tabs .nav-link, #rechteSpalte .nav-tabs .nav-link {
		padding: 4px 9.5px !important;
		font-family: BarlowCondensed-Regular;
		letter-spacing: 0.5px;
	}
	#rechteSpalte .Planet-Zeichen-Haus-Reiter .nav-link {
		padding: 10px !important;
		font-family: Barlow-Regular;
		color:black !important;
	}

	#linke-Hauptreiter.navtab-bg .nav-link {
		background-color: transparent;
	}

	#linkeSpalte .nav-tabs .nav-item.show .nav-link, #linkeSpalte .nav-tabs .nav-link.active, #rechteSpalte .nav-tabs .nav-item.show .nav-link, #rechteSpalte .nav-tabs .nav-link.active {
		background-color: lightyellow;
		height: 100%;
		border-bottom: 0px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		padding-top: 5px !important;
	}

	.Funktionen div[id][href] { 
		padding:5px 10px; 
		border: 1px solid lightgray; 
		margin-bottom: 5px;
		background-color: lightgray; 
	}

	.Unterricht div[id], .Persoenliches div[id], .Deutungsthemen div[id], .Funktionen div[id][klick-laden] {
		background-color: lightyellow;
	}

	astroinfos sub, astrokombiinfos sub { padding-left:1px; }

	.erweitert { max-height: max-content !important; }

	footer { height: 30px !important; background-color: #f4f4f4 !important; }

	form input[type="text"], form textarea, form select {
		color: black !important;
		background-color: #f8f8f8 !important;
	}

	table tr td { line-height: 1.35em; }

	.Symbol-Hervorhebung {
		background-color: #e5ffbf;
		padding: 2px 6px;
		box-shadow: 2px 2px 5px #b9b9b9;
		border-radius: 5px;
	}

	.right-bar { width: 500px !important; }

	.popover {
		box-shadow: aqua 6px 7px 13px;
		font-family: Barlow-Regular;
		font-size: 15px;
	}

	.wrapper {
		position:fixed;
		width: 100%;
		top: 0px;
	}

	.content-page .Kopfleiste.navbar-custom {
		width: 100%;
		z-index: 1100;
	}

	.popover-header {
		background-color: orange; /* Kopfzeile anpassen */
		color: #fff; /* Weißer Text in der Kopfzeile */
		font-size: 1.3em; /* Schriftgröße ändern */
		padding: 8px 15px;
		background-image: url(/assets/images/Logos/Krone01_100-weiss.png);
		background-repeat: no-repeat;
		background-position: right 10px center;
		background-size: contain;
	}
	
	.popover-body {
		font-size: 1em; /* Textgröße im Body anpassen */
		padding: 14px 18px 17px 18px; /* Innenabstand anpassen */
	}

/*  Ende UBold */

.Silbentrennung, .silbentrennung { 
hyphens: auto;
hyphenate-limit-chars: auto 5;
hyphenate-limit-lines: 2;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-chars: auto 3;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: auto 3;
-ms-hyphenate-limit-lines: 4; }

.keineSilbentrennung { 
	hyphens: none;
	-webkit-hyphens: none;
	-ms-hyphens: none;
}

body [box][sichtbar="nein"] { display: none; }
body [box][sichtbar="ja"] { display: revert; }

body [sichtbar="teils"] {
	position: relative;
	overflow: hidden;
	display: -webkit-box !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	white-space: normal;
}

body .Elementinfo { 
	-webkit-box-shadow: 0px 0px 35px 17px rgba(0,0,0,0.37); 
	box-shadow: 0px 0px 35px 17px rgba(0,0,0,0.37);
	z-index: 100;
}

body .Grafik-Button {
	border-radius: 50%;
	bottom: 30px;
	right: 170px;
	z-index: 990;
	font-size: 1.6rem;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.16);
	cursor: pointer;
	padding: 7px 10px 8px 16px;
}

body .Infozentrale-Button {
	border-radius: 50%;
	bottom: 30px;
	right: 100px;
	z-index: 990;
	font-size: 1.6rem;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.16);
	cursor: pointer;
	padding: 7px 10px 8px 16px;
}

// --- Farben

hellgelb , .text-hellgelb { color: lightyellow; }
.bg-hellgelb { background-color: lightyellow; }
dunkelgrau , .text-dunkelgrau { color: var(--duneklgrau); }
.bg-dunkelgrau { background-color: var(--dunkelgrau); }
grau , .text-grau { color: var(--grau); }
.bg-grau { background-color: var(--grau); }
schiefergrau , .text-schiefergrau { color: var(--schiefergrau); }
.bg-schiefergrau { background-color: var(--schiefergrau); }
silber , .text-silber { color: var(--silber); }
.bg-silber { background-color: var(--silber); }
hellgrau , .text-hellgrau { color: var(--hellgrau); }
.bg-hellgrau { background-color: var(--hellgrau); }
weisserrauch , .text-weisserrauch { color: var(--weisserrauch); }
.bg-weisserrauch { background-color: var(--weisserrauch); }
muschel, .text-muschel { color: var(--muschel); }
.bg-muschel { background-color: var(--muschel); }
gelb, .text-gelb { color: var(--gelb); }
.bg-gelb { background-color: var(--gelb); }
orange, .text-orange { color: var(--orange); }
.bg-orange { background-color: var(--orange); }
gold, .text-gold { color: var(--gold); }
.bg-gold { background-color: var(--gold); }
dunkelgold, .text-dunkelgold { color: var(--dunkelgold); }
.bg-dunkelgold { background-color: var(--dunkelgold); }
mokkasin, .text-mokkasin { color: var(--mokkasin); }
.bg-mokkasin { background-color: var(--mokkasin); }
khaki, .text-khaki { color: var(--khaki); }
.bg-khaki { background-color: var(--khaki); }
dunkelkhaki, .text-mokkasin { color: var(--dunkelkhaki); }
.bg-dunkelkhaki { background-color: var(--dunkelkhaki); }
sand, .text-sand { color: var(--sand); }
.bg-sand { background-color: var(--sand); }
sienna, .text-sienna { color: var(--sienna); }
.bg-sienna { background-color: var(--sienna); }
blau, .text-blau { color: var(--blau); }
.bg-blau { background-color: var(--blau); }
dunkelblau, .text-dunkelblau { color: var(--dunkelblau); }
.bg-dunkelblau { background-color: var(--dunkelblau); }
himmelblau, .text-himmelblau { color: var(--himmelblau); }
.bg-himmelblau { background-color: var(--himmelblau); }
fuchsie, .text-fuchsie { color: var(--fuchsie); }
.bg-fuchsie { background-color: var(--fuchsie); }
magenta, .text-magenta { color: var(--magenta); }
.bg-magenta { background-color: var(--magenta); }
stahlblau, .text-stahlblau { color: var(--stahlblau); }
.bg-stahlblau { background-color: var(--stahlblau); }
hellblau, .text-hellblau { color: var(--hellblau); }
.bg-hellblau { background-color: var(--hellblau); }
tuerkis, .text-tuerkis { color: var(--tuerkis); }
.bg-tuerkis { background-color: var(--tuerkis); }
gruen, .text-gruen { color: var(--gruen); }
.bg-gruen { background-color: var(--gruen); }
dunkelgruen, .text-dunkelgruen { color: var(--dunkelgruen); }
.bg-dunkelgruen { background-color: var(--dunkelgruen); }
waldgruen, .text-waldgruen { color: var(--waldgruen); }
.bg-waldgruen { background-color: var(--waldgruen); }
meergruen, .text-meergruen { color: var(--meergruen); }
.bg-meergruen { background-color: var(--meergruen); }
limettengruen, .text-limettengruen { color: var(--limettengruen); }
.bg-limettengruen { background-color: var(--limettengruen); }
hellgruen, .text-hellgruen { color: var(--hellgruen); }
.bg-hellgruen { background-color: var(--hellgruen); }
limette, .text-limette { color: var(--limette); }
.bg-limette { background-color: var(--limette); }
kornseide, .text-kornseide { color: var(--kornseide); }
.bg-kornseide { background-color: var(--kornseide); }
bluetenweiss, .text-bluetenweiss { color: var(--bluetenweiss); }
.bg-bluetenweiss { background-color: var(--bluetenweiss); }
azur, .text-azur { color: var(--azur); }
.bg-azur { background-color: var(--azur); }


.text-erde { color: var(--erde); }
.text-feuer { color: var(--feuer); }
.text-wasser { color: var(--wasser); }
.text-luft { color: var(--luft); }
.bg-erde { background-color: var(--erde); }
.bg-feuer { background-color: var(--feuer); }
.bg-wasser { background-color: var(--wasser); }
.bg-luft { background-color: var(--luft); }

.btn.bg-gradient-primary { box-shadow: 0 3px 3px 0 rgba(233, 30, 99, 0.15), 0 3px 1px -2px rgba(233, 30, 99, 0.2), 0 1px 5px 0 rgba(233, 30, 99, 0.15); }
.btn-primary:hover,
.btn.bg-gradient-primary:hover { background-color: #e91e63;
border-color: #e91e63;
box-shadow: 0 14px 26px -12px rgba(233, 30, 99, 0.4), 0 4px 23px 0 rgba(233, 30, 99, 0.15), 0 8px 10px -5px rgba(233, 30, 99, 0.2); }
.btn-primary .btn.bg-outline-primary,
.btn.bg-gradient-primary .btn.bg-outline-primary { border: 1px solid #e91e63; }
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
.btn.bg-gradient-primary:not(:disabled):not(.disabled).active,
.btn.bg-gradient-primary:not(:disabled):not(.disabled):active,
.show >
.btn.bg-gradient-primary.dropdown-toggle { color: color-yiq(#e91e63);
background-color: #e91e63; }
.btn-primary.focus, .btn-primary:focus,
.btn.bg-gradient-primary.focus,
.btn.bg-gradient-primary:focus { color: #fff; }

.btn-secondary,
.btn.bg-gradient-secondary { box-shadow: 0 3px 3px 0 rgba(123, 128, 154, 0.15), 0 3px 1px -2px rgba(123, 128, 154, 0.2), 0 1px 5px 0 rgba(123, 128, 154, 0.15); }
.btn-secondary:hover,
.btn.bg-gradient-secondary:hover { background-color: #7b809a;
border-color: #7b809a;
box-shadow: 0 14px 26px -12px rgba(123, 128, 154, 0.4), 0 4px 23px 0 rgba(123, 128, 154, 0.15), 0 8px 10px -5px rgba(123, 128, 154, 0.2); }
.btn-secondary .btn.bg-outline-secondary,
.btn.bg-gradient-secondary .btn.bg-outline-secondary { border: 1px solid #7b809a; }
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle,
.btn.bg-gradient-secondary:not(:disabled):not(.disabled).active,
.btn.bg-gradient-secondary:not(:disabled):not(.disabled):active,
.show >
.btn.bg-gradient-secondary.dropdown-toggle { color: color-yiq(#7b809a);
background-color: #7b809a; }
.btn-secondary.focus, .btn-secondary:focus,
.btn.bg-gradient-secondary.focus,
.btn.bg-gradient-secondary:focus { color: #fff; }

.btn-success,
.btn.bg-gradient-success { box-shadow: 0 3px 3px 0 rgba(76, 175, 80, 0.15), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.15); }
.btn-success:hover,
.btn.bg-gradient-success:hover { background-color: #4CAF50;
border-color: #4CAF50;
box-shadow: 0 14px 26px -12px rgba(76, 175, 80, 0.4), 0 4px 23px 0 rgba(76, 175, 80, 0.15), 0 8px 10px -5px rgba(76, 175, 80, 0.2); }
.btn-success .btn.bg-outline-success,
.btn.bg-gradient-success .btn.bg-outline-success { border: 1px solid #4CAF50; }
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active,
.show > .btn-success.dropdown-toggle,
.btn.bg-gradient-success:not(:disabled):not(.disabled).active,
.btn.bg-gradient-success:not(:disabled):not(.disabled):active,
.show >
.btn.bg-gradient-success.dropdown-toggle { color: color-yiq(#4CAF50);
background-color: #4CAF50; }
.btn-success.focus, .btn-success:focus,
.btn.bg-gradient-success.focus,
.btn.bg-gradient-success:focus { color: #fff; }

.btn-info,
.btn.bg-gradient-info { box-shadow: 0 3px 3px 0 rgba(26, 115, 232, 0.15), 0 3px 1px -2px rgba(26, 115, 232, 0.2), 0 1px 5px 0 rgba(26, 115, 232, 0.15); }
.btn-info:hover,
.btn.bg-gradient-info:hover { background-color: #1A73E8;
border-color: #1A73E8;
box-shadow: 0 14px 26px -12px rgba(26, 115, 232, 0.4), 0 4px 23px 0 rgba(26, 115, 232, 0.15), 0 8px 10px -5px rgba(26, 115, 232, 0.2); }
.btn-info .btn.bg-outline-info,
.btn.bg-gradient-info .btn.bg-outline-info { border: 1px solid #1A73E8; }
.btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active,
.show > .btn-info.dropdown-toggle,
.btn.bg-gradient-info:not(:disabled):not(.disabled).active,
.btn.bg-gradient-info:not(:disabled):not(.disabled):active,
.show >
.btn.bg-gradient-info.dropdown-toggle { color: color-yiq(#1A73E8);
background-color: #1A73E8; }
.btn-info.focus, .btn-info:focus,
.btn.bg-gradient-info.focus,
.btn.bg-gradient-info:focus { color: #fff; }

.btn-warning,
.btn.bg-gradient-warning { box-shadow: 0 3px 3px 0 rgba(251, 140, 0, 0.15), 0 3px 1px -2px rgba(251, 140, 0, 0.2), 0 1px 5px 0 rgba(251, 140, 0, 0.15); }
.btn-warning:hover,
.btn.bg-gradient-warning:hover { background-color: #fb8c00;
border-color: #fb8c00;
box-shadow: 0 14px 26px -12px rgba(251, 140, 0, 0.4), 0 4px 23px 0 rgba(251, 140, 0, 0.15), 0 8px 10px -5px rgba(251, 140, 0, 0.2); }
.btn-warning .btn.bg-outline-warning,
.btn.bg-gradient-warning .btn.bg-outline-warning { border: 1px solid #fb8c00; }
.btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active,
.show > .btn-warning.dropdown-toggle,
.btn.bg-gradient-warning:not(:disabled):not(.disabled).active,
.btn.bg-gradient-warning:not(:disabled):not(.disabled):active,
.show >
.btn.bg-gradient-warning.dropdown-toggle { color: color-yiq(#fb8c00);
background-color: #fb8c00; }
.btn-warning.focus, .btn-warning:focus,
.btn.bg-gradient-warning.focus,
.btn.bg-gradient-warning:focus { color: #fff; }

.btn-danger,
.btn.bg-gradient-danger { box-shadow: 0 3px 3px 0 rgba(244, 67, 53, 0.15), 0 3px 1px -2px rgba(244, 67, 53, 0.2), 0 1px 5px 0 rgba(244, 67, 53, 0.15); }
.btn-danger:hover,
.btn.bg-gradient-danger:hover { background-color: #F44335;
border-color: #F44335;
box-shadow: 0 14px 26px -12px rgba(244, 67, 53, 0.4), 0 4px 23px 0 rgba(244, 67, 53, 0.15), 0 8px 10px -5px rgba(244, 67, 53, 0.2); }
.btn-danger .btn.bg-outline-danger,
.btn.bg-gradient-danger .btn.bg-outline-danger { border: 1px solid #F44335; }
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active,
.show > .btn-danger.dropdown-toggle,
.btn.bg-gradient-danger:not(:disabled):not(.disabled).active,
.btn.bg-gradient-danger:not(:disabled):not(.disabled):active,
.show >
.btn.bg-gradient-danger.dropdown-toggle { color: color-yiq(#F44335);
background-color: #F44335; }
.btn-danger.focus, .btn-danger:focus,
.btn.bg-gradient-danger.focus,
.btn.bg-gradient-danger:focus { color: #fff; }

.btn-light,
.btn.bg-gradient-light { box-shadow: 0 3px 3px 0 rgba(240, 242, 245, 0.15), 0 3px 1px -2px rgba(240, 242, 245, 0.2), 0 1px 5px 0 rgba(240, 242, 245, 0.15); }
.btn-light:hover,
.btn.bg-gradient-light:hover { background-color: #f0f2f5;
border-color: #f0f2f5;
box-shadow: 0 14px 26px -12px rgba(240, 242, 245, 0.4), 0 4px 23px 0 rgba(240, 242, 245, 0.15), 0 8px 10px -5px rgba(240, 242, 245, 0.2); }
.btn-light .btn.bg-outline-light,
.btn.bg-gradient-light .btn.bg-outline-light { border: 1px solid #f0f2f5; }
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active,
.show > .btn-light.dropdown-toggle,
.btn.bg-gradient-light:not(:disabled):not(.disabled).active,
.btn.bg-gradient-light:not(:disabled):not(.disabled):active,
.show >
.btn.bg-gradient-light.dropdown-toggle { color: color-yiq(#f0f2f5);
background-color: #f0f2f5; }

.btn-dark,
.btn.bg-gradient-dark { box-shadow: 0 3px 3px 0 rgba(52, 71, 103, 0.15), 0 3px 1px -2px rgba(52, 71, 103, 0.2), 0 1px 5px 0 rgba(52, 71, 103, 0.15); }
.btn-dark:hover,
.btn.bg-gradient-dark:hover { background-color: #344767;
border-color: #344767;
box-shadow: 0 14px 26px -12px rgba(52, 71, 103, 0.4), 0 4px 23px 0 rgba(52, 71, 103, 0.15), 0 8px 10px -5px rgba(52, 71, 103, 0.2); }
.btn-dark .btn.bg-outline-dark,
.btn.bg-gradient-dark .btn.bg-outline-dark { border: 1px solid #344767; }
.btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active,
.show > .btn-dark.dropdown-toggle,
.btn.bg-gradient-dark:not(:disabled):not(.disabled).active,
.btn.bg-gradient-dark:not(:disabled):not(.disabled):active,
.show >
.btn.bg-gradient-dark.dropdown-toggle { color: color-yiq(#344767);
background-color: #344767; }
.btn-dark.focus, .btn-dark:focus,
.btn.bg-gradient-dark.focus,
.btn.bg-gradient-dark:focus { color: #fff; }

.btn-white,
.btn.bg-gradient-white { box-shadow: 0 3px 3px 0 rgba(255, 255, 255, 0.15), 0 3px 1px -2px rgba(255, 255, 255, 0.2), 0 1px 5px 0 rgba(255, 255, 255, 0.15); }
.btn-white:hover,
.btn.bg-gradient-white:hover { background-color: #fff;
border-color: #fff;
box-shadow: 0 14px 26px -12px rgba(255, 255, 255, 0.4), 0 4px 23px 0 rgba(255, 255, 255, 0.15), 0 8px 10px -5px rgba(255, 255, 255, 0.2); }
.btn-white .btn.bg-outline-white,
.btn.bg-gradient-white .btn.bg-outline-white { border: 1px solid #fff; }
.btn-white:not(:disabled):not(.disabled).active, .btn-white:not(:disabled):not(.disabled):active,
.show > .btn-white.dropdown-toggle,
.btn.bg-gradient-white:not(:disabled):not(.disabled).active,
.btn.bg-gradient-white:not(:disabled):not(.disabled):active,
.show >
.btn.bg-gradient-white.dropdown-toggle { color: color-yiq(#fff);
background-color: #fff; }

.btn-primary,
.btn.bg-gradient-primary { color: #fff; }
.btn-primary:hover,
.btn.bg-gradient-primary:hover { color: #fff; }

.btn-secondary,
.btn.bg-gradient-secondary { color: #fff; }
.btn-secondary:hover,
.btn.bg-gradient-secondary:hover { color: #fff; }

.btn-danger,
.btn.bg-gradient-danger { color: #fff; }
.btn-danger:hover,
.btn.bg-gradient-danger:hover { color: #fff; }

.btn-info,
.btn.bg-gradient-info { color: #fff; }
.btn-info:hover,
.btn.bg-gradient-info:hover { color: #fff; }

.btn-success,
.btn.bg-gradient-success { color: #fff; }
.btn-success:hover,
.btn.bg-gradient-success:hover { color: #fff; }

.btn-warning,
.btn.bg-gradient-warning { color: #fff; }
.btn-warning:hover,
.btn.bg-gradient-warning:hover { color: #fff; }

.btn-dark,
.btn.bg-gradient-dark { color: #fff; }
.btn-dark:hover,
.btn.bg-gradient-dark:hover { color: #fff; }

.btn-light,
.btn.bg-gradient-light { color: #3A416F; }
.btn-light:hover,
.btn.bg-gradient-light:hover { color: #3A416F; }

.dark-version .bg-gradient-dark { background-image: linear-gradient(195deg, #323a54, #1a2035); }

.bg-gradient-primary { background-image: linear-gradient(195deg, #EC407A 0%, #D81B60 100%); }

.bg-gradient-secondary { background-image: linear-gradient(195deg, #747b8a 0%, #495361 100%); }

.bg-gradient-success { background-image: linear-gradient(195deg, #66BB6A 0%, #43A047 100%); }

.bg-gradient-info { background-image: linear-gradient(195deg, #49a3f1 0%, #1A73E8 100%); }

.bg-gradient-warning { background-image: linear-gradient(195deg, #FFA726 0%, #FB8C00 100%); }

.bg-gradient-danger { background-image: linear-gradient(195deg, #EF5350 0%, #E53935 100%); }

.bg-gradient-light { background-image: linear-gradient(195deg, #EBEFF4 0%, #CED4DA 100%); }

.bg-gradient-dark { background-image: linear-gradient(195deg, #42424a 0%, #191919 100%); }

.bg-gradient-faded-primary { background-image: radial-gradient(370px circle at 80% 50%, rgba(233, 30, 99, 0.6) 0, #c1134e 100%); }

.bg-gradient-faded-secondary { background-image: radial-gradient(370px circle at 80% 50%, rgba(123, 128, 154, 0.6) 0, #626780 100%); }

.bg-gradient-faded-success { background-image: radial-gradient(370px circle at 80% 50%, rgba(76, 175, 80, 0.6) 0, #3d8b40 100%); }

.bg-gradient-faded-info { background-image: radial-gradient(370px circle at 80% 50%, rgba(26, 115, 232, 0.6) 0, #135cbc 100%); }

.bg-gradient-faded-warning { background-image: radial-gradient(370px circle at 80% 50%, rgba(251, 140, 0, 0.6) 0, #c87000 100%); }

.bg-gradient-faded-danger { background-image: radial-gradient(370px circle at 80% 50%, rgba(244, 67, 53, 0.6) 0, #e91d0d 100%); }

.bg-gradient-faded-light { background-image: radial-gradient(370px circle at 80% 50%, rgba(240, 242, 245, 0.6) 0, #d1d7e1 100%); }

.bg-gradient-faded-dark { background-image: radial-gradient(370px circle at 80% 50%, rgba(52, 71, 103, 0.6) 0, #233045 100%); }

.bg-gradient-faded-white { background-image: radial-gradient(370px circle at 80% 50%, rgba(255, 255, 255, 0.6) 0, #e6e6e6 100%); }

.bg-gradient-faded-primary-vertical { background-image: radial-gradient(200px circle at 50% 70%, rgba(233, 30, 99, 0.3) 0, #e91e63 100%); }

.bg-gradient-faded-secondary-vertical { background-image: radial-gradient(200px circle at 50% 70%, rgba(123, 128, 154, 0.3) 0, #7b809a 100%); }

.bg-gradient-faded-success-vertical { background-image: radial-gradient(200px circle at 50% 70%, rgba(76, 175, 80, 0.3) 0, #4CAF50 100%); }

.bg-gradient-faded-info-vertical { background-image: radial-gradient(200px circle at 50% 70%, rgba(26, 115, 232, 0.3) 0, #1A73E8 100%); }

.bg-gradient-faded-warning-vertical { background-image: radial-gradient(200px circle at 50% 70%, rgba(251, 140, 0, 0.3) 0, #fb8c00 100%); }

.bg-gradient-faded-danger-vertical { background-image: radial-gradient(200px circle at 50% 70%, rgba(244, 67, 53, 0.3) 0, #F44335 100%); }

.bg-gradient-faded-light-vertical { background-image: radial-gradient(200px circle at 50% 70%, rgba(240, 242, 245, 0.3) 0, #f0f2f5 100%); }

.bg-gradient-faded-dark-vertical { background-image: radial-gradient(200px circle at 50% 70%, rgba(52, 71, 103, 0.3) 0, #344767 100%); }

.bg-gradient-faded-white-vertical { background-image: radial-gradient(200px circle at 50% 70%, rgba(255, 255, 255, 0.3) 0, #fff 100%); }