/*
// Copyright 2026 Ulf Haueisen, Frankfurt am Main. All rights reserved.
*/

/* Haupttext */

DIV.hauptcontainer {
	display: flex;
	width: 100%;
	margin-bottom: 20px;
}

DIV.haupt {
	font-size: 0px;
	line-height: 0px;
	width: 100%;
	white-space: nowrap;
}

input.tab-lang {
	display: none;
}

input.tab-lang + DIV {
	position: relative;
	display: inline-block;
	width: 100%;
	white-space: normal;
	vertical-align: top;
	opacity: 0;
	visibility: hidden;
	top: 5px;
	transition: all 0.5s ease-in-out;
}

input.tab-lang:checked + DIV {
	visibility: visible;
	opacity: 1;
	top: 0px;
}

label.tab-lang {
	font-style: italic;
	cursor: pointer;
	color: #0047a1;
}

/* Aktuelles */

DIV.aktuelles {
	width: 100%;
	height: 0;
	padding-bottom: calc(56.25% + 30px);
	position: relative;
}

/* Embla bringt kein Stylesheet mit; die Struktur unten ist alles, was es braucht: Fenster mit
   overflow: hidden, darin eine Flexbox-Reihe, darin Folien der vollen Breite. Die unteren 30px
   von DIV.aktuelles gehoeren der Punktleiste — dieselben 30px wie oben in padding-bottom. */

DIV.aktuelles DIV.embla {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0px 0px 30px 0px;
	margin: 0;
}

DIV.aktuelles DIV.embla.hidden {
	visibility: hidden;
}

DIV.aktuelles DIV.embla__viewport {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 9px;
	box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.6);
}

DIV.aktuelles UL.embla__container {
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
	height: 100%;
	/* Senkrecht darf die Seite weiterscrollen, waagerecht greift Embla zu. */
	touch-action: pan-y pinch-zoom;
}

DIV.aktuelles LI.embla__slide {
	list-style-type: none;
	margin: 0;
	padding: 0;
	flex: 0 0 100%;
	min-width: 0;
	height: 100%;
}

DIV.aktuelles LI.embla__slide A {
	position: relative;
	display: block;
	height: 100%;
}

DIV.aktuelles LI.embla__slide IMG {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

DIV.aktuelles LI.embla__slide H2 {
	position: absolute;
	top: 10px;
	left: 10px;
	line-height: 100%;
	padding: 3px 8px 6px 8px;
	color: #ffffff;
	font-family: open_sans_condensed_light;
	font-size: 28px;
	margin: 0;
	background-image: url(/images/black60.png);
}

DIV.aktuelles LI.embla__slide P {
	position: absolute;
	bottom: 10px;
	left: 10px;
	color: #ffffff;
	padding: 4px 8px 4px 8px;
	margin: 0;
	line-height: normal;
	background-image: url(/images/black60.png);
}

/* Die Pfeile liegen ausserhalb des Fensters und fahren beim Ueberfahren herein. Der Streifen, in
   dem sie mittig sitzen, endet oberhalb der Punktleiste. */

DIV.aktuelles BUTTON.embla__button {
	position: absolute;
	top: 0;
	bottom: 30px;
	margin: auto 0;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	opacity: 0;
	z-index: 10;
	transition: all 0.3s ease-in-out;
}

DIV.aktuelles BUTTON.embla__button SVG {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: rgba(0, 0, 0, 0.8);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(1px 1px 0px rgba(255, 255, 255, 0.3));
}

DIV.aktuelles BUTTON.embla__button--prev {
	left: -50px;
}

DIV.aktuelles BUTTON.embla__button--next {
	right: -50px;
}

DIV.aktuelles DIV.embla:hover BUTTON.embla__button,
DIV.aktuelles BUTTON.embla__button:focus-visible {
	opacity: 0.7;
}

DIV.aktuelles DIV.embla:hover BUTTON.embla__button--prev,
DIV.aktuelles BUTTON.embla__button--prev:focus-visible {
	left: 10px;
}

DIV.aktuelles DIV.embla:hover BUTTON.embla__button--next,
DIV.aktuelles BUTTON.embla__button--next:focus-visible {
	right: 10px;
}

DIV.aktuelles BUTTON.embla__button:hover {
	opacity: 1;
}

DIV.aktuelles DIV.embla__dots {
	display: flex;
	gap: 8px;
	padding: 10px 0px 0px 8px;
}

DIV.aktuelles BUTTON.embla__dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	background: rgba(0, 0, 0, 0.5);
	box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.3);
}

DIV.aktuelles BUTTON.embla__dot:hover {
	background: rgba(0, 0, 0, 0.7);
}

DIV.aktuelles BUTTON.embla__dot.selected {
	background: rgba(0, 0, 0, 0.9);
	cursor: default;
}

/* Auf schmalen Fenstern gibt es kein Ueberfahren — dort stehen die Pfeile fest. */

@media screen and (max-width: 860px) {
	DIV.aktuelles BUTTON.embla__button {
		opacity: 0.7;
	}

	DIV.aktuelles BUTTON.embla__button--prev {
		left: 10px;
	}

	DIV.aktuelles BUTTON.embla__button--next {
		right: 10px;
	}
}

/* Infoabend, Infotag */

.infotaginfoabend {
	display: block;
	overflow: hidden;
	width: 100%;
	margin: 10px 0px 10px 0;
	padding: 10px 0px 10px 0px;
	background-image: url(/aktuelles/images/infotag-infoabend-banner-2.jpg);
	background-size: cover;
	background-color: #e8e8e8;
	border: 1px solid #b0b0b0;
	position: relative;
	border-radius: 9px;
	box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.6);
}

.infotaginfoabend h2 {
	display: inline-block;
	line-height: 100%;
	padding: 3px 8px 6px 8px;
	color: #ffffff;
	font-family: open_sans_condensed_light;
	font-size: 28px;
	margin: 10px;
	backdrop-filter: blur(8px);
	background-color: hsla(0, 0%, 0%, 0.5);
}

.infotaginfoabend > h2 > span {
	white-space: nowrap;
	font-family: open_sans;
	font-size: 15px;
	line-height: 100%;
}

.infotaginfoabend p {
	display: inline-block;
	color: #ffffff;
	padding: 3px 8px 3px 8px;
	margin: 10px;
	background-color: hsla(0, 0%, 0%, 0.5);
	backdrop-filter: blur(8px);
}

/* Glow */

@property --a {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.glowcard {
	overflow: hidden;
	position: relative;
	border-radius: 0.5em;
	place-self: center;
	place-content: center;
	text-wrap: balance;
}

.glowcard::before {
	position: absolute;
	z-index: 0;
	inset: -16px;
	border: solid 16px;
	border-image: conic-gradient(from var(--a), #669900, #99cc33, #ccee66, #006699, #3399cc, #990066, #cc3399, #ff6600, #ff9900, #ffcc00, #669900) 1;
	filter: blur(0.75em);
	animation: a 4s linear infinite;
	content: "";
}

@keyframes a {
	to {
		--a: 1turn;
	}
}