@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;
	}

	#wrapper .content-page.Horoskop {
		position: fixed;
	}

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

	#rechteSpalte [box="Deutungsregeln"] h3:not( #rechteSpalte.breiteSpalte [box="Deutungsregeln"] h3 ) {
		font-size: 1.4rem;
	}

	.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 { padding:0px; }
	.logo-box .logo-dark { display: block; position: relative; top: -2px; }
	.logo-box .logo-dark img { height:48px; }

	.button-toggle-menu {
		width: 50px;
	}

	.zum-Horoskop a {
		color: slategray;
	}

	.zum-Horoskop a:hover {
		color: darkgoldenrod;
	}

	/* Für Horoskop-Seite */

.navbar-custom .topbar .nav-link {
	padding: 0 .5rem;
}
/* Topbar-Menüs (Benutzermenü, Mega-Menü) müssen über Zeitleiste (#Datumeinstellung 11000)
   UND Sprechkontrolle (#Sprechkontrolle 20000) liegen. Die Dropdowns sitzen im Stacking-
   Context der sticky .navbar-custom (Hyper: z-index 1000) -> diesen Context anheben. 2026-06-14 */
.navbar-custom { z-index: 25000; }
.offcanvas.show:not(.hiding), .offcanvas.showing {
	padding-top: 60px;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	 padding-right: 0px;
	 padding-left: 0px;
}

.container .Pfad-Titel, .container-fluid .Pfad-Titel {
	margin: 7px -6px;
}

.page-title-box .page-title {
	margin: 0px;
	line-height: inherit;
}

.page-title-box .page-title-right {
	margin:0px;
}

.page-title-box .breadcrumb {
	 padding-top: 0px;
}

/*
svg {
	width: 100%;
	height: 100%;
	max-width: 120%;
	max-height: 120%;
}
*/

.btn .spinner-border, .btn .spinner-grow {
	vertical-align: -0.125em;
}
.spinner-border, .spinner-grow {
	width: 0.8rem !important;
	height: 0.8rem !important;
}
#Buehne .schliessen:hover, #grosseBuehne .schliessen:hover {
	background-color:orange;
}
#Karte {
	height:75vh;
	width:100%;
}
#mobileWerkzeuge {
	position: fixed;
	left: 0px;
	bottom: 30px;
	width: 100%;
	padding: 0px 8px;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
/* feste, schmale Seiten-Slots -> Segment bleibt immer mittig (Symmetrie),
   egal ob Zahnrad/Uhr gerade sichtbar sind */
#mobileWerkzeuge .mw-slot {
	flex: 0 0 48px;
	display: flex;
	justify-content: center;
}
/* Zahnrad (links) / Uhr (rechts): Nicht-Buttons, damit der globale
   #mobileWerkzeuge-button-Handler sie nicht als Spaltenumschalter behandelt */
#mobileWerkzeuge .mw-iconbtn {
	width: 44px;
	height: 44px;
	border: 0px;
	background-color: #e8e8e8;
	color: gray;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	cursor: pointer;
}
#mobileWerkzeuge .mw-iconbtn.text-warning {
	color: #f0ad4e;
}
/* Zeitleisten-Schalter (Uhr) unten rechts: bei EINGEBLENDETER Zeitleiste nur leicht sichtbar
   (Tippen blendet sie aus); bei AUSGEBLENDETER Zeitleiste voll sichtbar + markiert
   ("hierüber kommt die Zeitleiste zurück"). 2026-06-14 */
#mobileWerkzeuge .mw-iconbtn#mobileZeitleiste {
	opacity: 0.45;
}
#mobileWerkzeuge .mw-iconbtn#mobileZeitleiste.aktiv {
	opacity: 1;
	color: darkgoldenrod;
	background-color: lightyellow;
}
/* "Saug-/Flash"-Puls: einmalig beim Ausblenden – ein Ring fährt von außen ins Icon,
   kurzer Helligkeitsblitz (als ob die Zeitleiste ins Icon gesogen wird). */
@keyframes zeitleisteSaug {
	0%   { box-shadow: 0 0 0 20px rgba(240,173,78,0);    transform: scale(1);    filter: brightness(1);   }
	45%  { box-shadow: 0 0 0 4px  rgba(240,173,78,0.55); transform: scale(1.18); filter: brightness(1.5); }
	100% { box-shadow: 0 0 0 0    rgba(240,173,78,0);    transform: scale(1);    filter: brightness(1);   }
}
#mobileWerkzeuge .mw-iconbtn.zeitleiste-saug {
	animation: zeitleisteSaug 0.5s ease-out 1;
}
/* Mobil: die Theme-Klasse .table-nowrap (bootstrap.css) erzwingt white-space:nowrap auf
   allen Zellen -> auf schmalen Screens umbrechen lassen statt horizontal zu scrollen.
   Wirkt für alle .table-nowrap-Tabellen (Kontakte, Freigaben …). 2026-06-14 */
@media (max-width: 767.98px) {
	.table-nowrap th, .table-nowrap td { white-space: normal; }
}
/* zusammenhaengende Segment-Pille (app-like), drei gleich breite Segmente */
#mobileWerkzeuge .mw-segment {
	flex: 1 1 auto;
	max-width: 360px;
	display: flex;
	background-color: #e8e8e8;
	border-radius: 14px;
	padding: 3px;
	gap: 2px;
}
#mobileWerkzeuge .mw-seg {
	flex: 1 1 0;
	min-width: 0;
	min-height: 44px;
	border: 0px;
	background-color: transparent;
	color: gray;
	border-radius: 11px;
	padding: 4px 6px;
	font-family: Barlow-Regular;
	font-size: 0.72rem;
	line-height: 1.05;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}
#mobileWerkzeuge .mw-seg i {
	font-size: 18px;
	line-height: 1;
}
#mobileWerkzeuge .mw-seg[mobil="aktiv"] {
	background-color: gold;
	color: black;
	font-family: Barlow-Medium;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.15);
}
.Auge-oeffnen {
	position: fixed;
	z-index: 1000;
	top: 67px;
	width: 35px;
	cursor: pointer;
	background-color: lightyellow;
	padding: 4px 1px 13px 5px;
	border: 1px solid gainsboro;
}
.Auge-oeffnen.linkeSpalte {
	left: 0px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.Auge-oeffnen.linkeSpalte i {
	padding: 0px 3px;
}
.Auge-oeffnen text {
	position: relative;
	left: -3px;
	font-size: 14px;
}
.Auge-oeffnen.rechteSpalte {
	right: 0px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

/* Ende Horoskop-Seite */

	[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; */
	}

	.text-justify {
		text-align: justify;
	}

	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;
	}

	/* Typ-Auswahl-Menü geht bei Mouseover auf */
	.dropdown-toggle:hover>.dropdown-menu, .dropdown:hover>.dropdown-menu {
	  display: block;
	  cursor:pointer;
	}

	/* Typ-Auswahl-Menü geht bei Klick auf Menülink zu */
	.dropdown-toggle:after>.dropdown-menu, .dropdown:after>.dropdown-menu {
	  display: inherit;
	  cursor:inherit;
	}

	.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%;
	}

	#Grafikinfos grafikinfo[inhalt="Vorschau"], #VorschauHinweis {
		background: gold;
		color: #2b2b00;
		border-radius: 999px;
		font-family: BarlowSemiCondensed-Regular;
		font-size: 12px;
		width: fit-content;
		height: fit-content;
	}

	#Grafikinfos grafikinfo[inhalt="Vorschau"] {
		display: inline-block;
		margin-top: 4px;
		padding: 1px 9px;
	}

	#VorschauHinweis {
		position: absolute;
		left: 450px;
		top: 84px;
		z-index: 5;
		padding: 2px 12px;
		box-shadow: 0 1px 4px rgba(0,0,0,.2);
	}

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

	#Grafiklogo {
		width: 30%;
		height: 3%;
		position: absolute;
	}
	/* max-height verhindert das Hochskalieren über die Quellauflösung (100px-Logo):
	   bei großen Bühnen wurde das Logo sonst unscharf */
	#Grafiklogo img { height:100% !important; max-height: 50px; }

	/* Dezenter Einstellungs-Zugang an der Grafik — nur bei Bewegung sichtbar,
	   damit Screenshots der Grafik frei von Bedienelementen bleiben: */
	#Grafikcontainer { position: relative; }
	.Grafik-Einstellungszugang {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 22px;
		color: #b0b0b0;
		opacity: 0;
		transition: opacity 0.25s ease;
		z-index: 60;
		pointer-events: none;
	}
	.Grafik-Einstellungszugang.sichtbar { opacity: 0.85; pointer-events: auto; }
	.Grafik-Einstellungszugang:hover { color: gold; }

	#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-y: 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;
		background-color: lightyellow;
		border-top: 1px solid #dfdfdf;
		width: auto;
	}

	/* Relokations-Ortssuche offen: Container überlaufen lassen, sonst schneidet overflow:hidden
	   die absolut positionierte geoAPI-Vorschlagsliste unten ab (Klasse via Module/Relokation.js). */
	#Datumeinstellung.ort-offen { overflow: visible; }

	#Datumeinstellung i[flach-icon="flach"] {
		display: none;
	}
	
	#Datumeinstellung.flat i[flach-icon="flach"] {
		display: block;
	}
	
	#Datumeinstellung.flat i[flach-icon="normal"] {
		display: none;
	}
	
	#Datumeinstellung .Einstellungen {
		margin: 14px 8px 0px 8px;
		z-index: 10000;
		gap: 0px;
	}
	
	#Datumeinstellung .Einstellungen li {
		display: grid;
		grid-template-columns: auto auto;
		grid-template-areas:
			"input input"
			"prev  next";
		width: 40px;
		align-items: center;
		margin: 0px 3px;
		border-radius: 7px;
		overflow: hidden;
	}
	#Datumeinstellung .Einstellungen li#Jahr {
		width: 55px;
	}
	#Datumeinstellung .Einstellungen li input {
		font-size: 15px !important;
		padding: 1px 0px !important;
		text-align: center;
		order: 1;
		border-radius: 0px;
		grid-area: input;
		border-top-left-radius: 7px;
		border-top-right-radius: 7px;
		color: black;
		font-family: Barlow-Medium;
	}
	#Datumeinstellung .Einstellungen li .navButtons {
		font-size: 17px;
		margin: 0px;
		border: none;
		padding: 2px 0px;
		color: white;
		text-align: center;
		cursor: pointer;
		text-align: center;
		background-color: #939393;
		transition: background 0.5s ease;
	}

	#Datumeinstellung .Einstellungen li .navButtons:hover {
		background-color:#d9d9d9;
		color: black;
		cursor:pointer;
	}

	#Datumeinstellung .Einstellungen li .navButtons.klick {
		background-color:gold !important;
	}

	#Datumeinstellung .Einstellungen li [richtung="Zurueck"]  {
		order: 2;
		grid-area: prev;
	}
	#Datumeinstellung .Einstellungen li [richtung="Vor"] {
		order: 3;
		grid-area: next;
	}

	#Datumeinstellung select {
		padding: 0px 8px 1px 8px !important;
		height: 25px !important;
		border: 1px solid #b9b9b9;
		border-radius: 7px;
	}

	/* Flache Anordnung aktivieren */
	#Datumeinstellung.flat {
	}
	
	#Datumeinstellung.flat .Einstellungen {
		margin: 6px 8px 3px 8px;
	}
	
	#Datumeinstellung.flat .Einstellungen li {
		width: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	/* Reihenfolge festlegen */
	#Datumeinstellung.flat .Einstellungen li [richtung="Zurueck"]  { order: 1; }
	#Datumeinstellung.flat .Einstellungen li [richtung="Vor"] { order: 3; }
	
	/* Eingabefeld optisch kompakt */
	#Datumeinstellung.flat .Einstellungen li input {
		order: 2;
		width: 2rem;
		text-align: center;
		padding: 0px .3rem 0px .2rem !important;
		margin: 0px;
		border-radius: 0px;
		font-size: 14px !important;
	}
	#Datumeinstellung.flat .Einstellungen li#Jahr {
		width: auto;
	}
	#Datumeinstellung.flat .Einstellungen li#Jahr input {
		width: 2.9rem;
	}

	#Datumeinstellung .Wiederkehr select:hover, #Datumeinstellung .Wiederkehr .Pfeil:hover { background-color: #ebff65 !important; }
	#Datumeinstellung .Wiederkehr select, #Datumeinstellung .Wiederkehr .Pfeil { cursor: pointer; }

	#Datumeinstellung .Ortsinfo {
		padding: 2px 12px 6px;
		background: whitesmoke;
		margin-top: 8px;
	}


	#Sprechkontrolle { display:none; width: 260px; height:auto; min-height:92px; position: absolute; top: 48px; left: 1590px; background-color: #fffeea; overflow: hidden; z-index: 20000; }
	#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;
	}

	.Richtungswechsel-Info [data-datum] {
		color: rgb(3, 3, 179);
	}
	.Richtungswechsel-Info [data-datum]:hover {
		color: rgb(181, 152, 0);
	}

	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;
	}

	table tr td.Abstand {
		padding-left: 10px;
	}

	table tr td i.Lupe {
		margin-right: 0px;
		line-height: 1em;
		text-align: center;
	}

	table tr td label {
		padding-top: 2px;
	}

	table tr td div i[filter]:hover {
		background-color: gold;
		color: black;
	}

	table tr.border[himmelskoerper] td {
		line-height: 1em !important;
		padding: 8px 0px 8px 10px;
	}

	.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 3;
	hyphenate-limit-lines: 3;
	-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;
	text-rendering: optimizeLegibility;
}

.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;
}

/* Hinweis-Box */

.Hint-Box {
  position: absolute;
  max-width: 240px;
  background: lightyellow;
  color: black;
  border: 1px solid lightgray;
  border-radius: 7px;
  padding: 1rem 1.25rem;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 1000;
  display: none;
  transition: opacity 0.35s ease;
}

/* Spitze: Standard unten (zeigt nach unten auf Ziel) */
.Hint-Box::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: -8px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
  filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.1));
}

/* Variante: Spitze oben (zeigt nach oben auf Ziel) */
.Hint-Box.bottom::after {
  top: -8px;
  bottom: auto;
  border-top: none;
  border-bottom: 8px solid #fff;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
}

.Hint-Box [hint] {
	font-family: Barlow-Medium;
}

// --- Farben

.nichts {  }
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%); }

/* ════════════════════════════════════════════════════════════════════════
 *  Mittlere Bühne „Horoskop wählen" — Sichtbarkeit & Platzausnutzung
 *  (Kontaktauswahl auf der Grafikseite). 2026-06-18
 * ════════════════════════════════════════════════════════════════════════ */
/* Desktop: geöffnete Bühne über die Zeitleiste (#Datumeinstellung z-index 11000) legen. */
#Buehne { position: relative; z-index: 12000; }

@media (max-width: 767.98px) {
	/* Mobil: Bühne füllt den Schirm UNTERHALB von Topbar + Horoskop-Steuerleiste
	   (statt eines zu kleinen Containers in der Flex-Spalte). Topbar/Steuerleiste
	   bleiben sichtbar & bedienbar darüber — ihre Kontakt-Dropdowns liegen davor.
	   Schließen über das X in der Kopfzeile (bleibt oben kleben). */
	#Buehne {
		position: fixed;
		top: calc(var(--ct-topbar-height, 60px) + 52px);   /* unter Topbar + Horoskop-Steuerleiste */
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-width: 100%;
		margin: 0 !important;
		border-radius: 0;
		/* über Zeitleiste (11000) + untere Werkzeugleiste, ABER unter der Steuerleiste (12000),
		   damit die Topbar-Kontakt-Dropdowns davor liegen und anklickbar bleiben. */
		z-index: 11900;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}
	#Buehne .Buehnentitel {
		position: sticky;
		top: 0;
		background: #fff;
		z-index: 2;
		padding-top: .25rem;
		margin-bottom: .5rem !important;
	}
}