/*
// Copyright 2026 Ulf Haueisen, Heinrich-Kleyer-Schule, Frankfurt am Main. All rights reserved.
*/

/* Das Banner zum Infotag (_Banner.cshtml). Eine Karte, ganz ein Link: links Kalenderblatt und
   Titel auf dunklem Blau, rechts die vier Wege als Glasflaechen ueber dem Schulgebaeude, unten
   Zeit, Ort und der Knopf im Gelb der Menueleiste. Die Farben der Wege sind die des Glow-Rahmens
   der Startseite. Der Rahmen ist der vierte Hintergrund (border-box), die drei anderen enden an
   der padding-box — so dreht sich nur der Rand.

   Die Umbrueche richten sich nach der Breite der Karte, nicht des Fensters (@container): neben
   dem Seitenmenue des beruflichen Gymnasiums ist sie bei gleichem Fenster schmaler als auf der
   Startseite. Darum traegt das innere SPAN das Raster und den Innenabstand — die Karte selbst
   ist der Container und kann nicht nach ihrer eigenen Breite fragen. */

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

A.infotag {
	--gelb: #ffd65e;
	--nacht: #002344;
	container: infotag / inline-size;
	display: block;
	margin: 10px 0 20px 0;
	border: 2px solid transparent;
	border-radius: 16px;
	color: #ffffff;
	text-decoration: none;
	background-image:
		radial-gradient(circle at 92% -10%, rgba(255, 214, 94, 0.3), transparent 45%), linear-gradient(100deg, var(--nacht) 0%, rgba(0, 35, 68, 0.94) 38%, rgba(12, 82, 146, 0.6) 72%, rgba(12, 82, 146, 0.3) 100%), url(/aktuelles/images/infotag-infoabend-banner-2.jpg),
		conic-gradient(from var(--infotag-winkel), #669900, #99cc33, #ccee66, #006699, #3399cc, #990066, #cc3399, #ff6600, #ff9900, #ffcc00, #669900);
	background-clip: padding-box, padding-box, padding-box, border-box;
	background-origin: padding-box, padding-box, padding-box, border-box;
	background-size: auto, auto, cover, auto;
	background-position:
		0 0,
		0 0,
		70% center,
		0 0;
	background-repeat: no-repeat;
	background-color: var(--nacht);
	box-shadow: 0 14px 32px -14px rgba(0, 35, 68, 0.8);
	animation: infotag-dreh 8s linear infinite;
	transition:
		box-shadow 0.3s ease,
		translate 0.3s ease;
}

@keyframes infotag-dreh {
	to {
		--infotag-winkel: 1turn;
	}
}

A.infotag:hover {
	translate: 0 -2px;
	box-shadow: 0 20px 40px -14px rgba(0, 35, 68, 0.9);
}

A.infotag .infotag__innen {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 18px 24px;
	align-items: center;
	padding: 22px 24px 18px 24px;
}

/* Kalenderblatt */

A.infotag .infotag__blatt {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 108px;
	overflow: hidden;
	border-radius: 14px;
	background: #ffffff;
	color: #0c5292;
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
	rotate: -4deg;
	transition:
		rotate 0.3s ease,
		scale 0.3s ease;
}

A.infotag:hover .infotag__blatt {
	rotate: 0deg;
	scale: 1.04;
}

A.infotag .infotag__wochentag {
	align-self: stretch;
	padding: 4px 0;
	background: var(--gelb);
	color: var(--nacht);
	font-family: open_sans_semibold;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

A.infotag .infotag__tag {
	font-family: open_sans_condensed;
	font-weight: bold;
	font-size: 54px;
	line-height: 1.05;
	padding-top: 4px;
}

A.infotag .infotag__monat {
	padding-bottom: 8px;
	font-family: open_sans_semibold;
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Titel */

A.infotag .infotag__kopf {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

A.infotag .infotag__kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--gelb);
	font-family: open_sans_semibold;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

A.infotag .infotag__countdown {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px 2px 8px;
	border-radius: 99px;
	background: rgba(255, 214, 94, 0.16);
	border: 1px solid rgba(255, 214, 94, 0.5);
	font-family: open_sans;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: none;
}

A.infotag .infotag__countdown::before {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gelb);
	animation: infotag-puls 1.6s ease-in-out infinite;
	content: "";
}

@keyframes infotag-puls {
	50% {
		opacity: 0.25;
	}
}

A.infotag .infotag__titel {
	font-family: open_sans_condensed;
	font-weight: bold;
	font-size: 52px;
	line-height: 1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

A.infotag .infotag__titel > SPAN {
	background: linear-gradient(90deg, var(--gelb), #ff9900);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

A.infotag .infotag__frage {
	max-width: 32em;
	color: rgba(255, 255, 255, 0.88);
	font-size: 15px;
	line-height: 1.45;
	text-wrap: pretty;
}

/* Die vier Wege */

A.infotag .infotag__wege {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

A.infotag .infotag__weg {
	display: flex;
	flex-direction: column;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-left: 4px solid var(--farbe);
	border-radius: 10px;
	background: rgba(0, 35, 68, 0.55);
	backdrop-filter: blur(10px);
	color: rgba(255, 255, 255, 0.82);
	font-size: 12.5px;
	line-height: 1.35;
}

A.infotag .infotag__weg B {
	color: #ffffff;
	font-size: 15px;
}

/* Zeit, Ort, Knopf */

A.infotag .infotag__fuss {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

A.infotag .infotag__info {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, 0.92);
	font-size: 14px;
}

A.infotag SPAN.infotag__info > SVG,
A.infotag SPAN.infotag__mehr > SVG {
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: var(--gelb);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

A.infotag .infotag__mehr {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	padding: 8px 16px 8px 20px;
	border-radius: 99px;
	background: var(--gelb);
	color: var(--nacht);
	font-family: open_sans;
	font-weight: bold;
	font-size: 15px;
	box-shadow: 0 6px 16px -6px rgba(255, 214, 94, 0.7);
}

A.infotag SPAN.infotag__mehr > SVG {
	stroke: currentColor;
	stroke-width: 2.5;
	transition: translate 0.3s ease;
}

A.infotag:hover SPAN.infotag__mehr > SVG {
	translate: 4px 0;
}

@container infotag (max-width: 860px) {
	A.infotag .infotag__innen {
		grid-template-columns: auto minmax(0, 1fr);
	}

	A.infotag .infotag__wege {
		grid-column: 1 / -1;
	}
}

@container infotag (max-width: 540px) {
	A.infotag .infotag__innen {
		gap: 14px 16px;
		padding: 16px 14px 14px 14px;
	}

	A.infotag .infotag__blatt {
		width: 76px;
		border-radius: 11px;
	}

	A.infotag .infotag__wochentag {
		font-size: 10px;
	}

	A.infotag .infotag__tag {
		font-size: 38px;
	}

	A.infotag .infotag__monat {
		font-size: 12px;
		padding-bottom: 6px;
	}

	A.infotag .infotag__titel {
		font-size: 38px;
	}

	A.infotag .infotag__frage {
		font-size: 14px;
	}

	A.infotag .infotag__weg {
		padding: 7px 9px;
		font-size: 11.5px;
	}

	A.infotag .infotag__weg B {
		font-size: 13px;
		hyphens: auto;
	}

	A.infotag .infotag__mehr {
		margin-left: 0;
	}
}

/* Wer weniger Bewegung eingestellt hat: Rand steht still, kein Pulsieren, kein Kippen. */

@media (prefers-reduced-motion: reduce) {
	A.infotag,
	A.infotag .infotag__countdown::before {
		animation: none;
	}

	A.infotag,
	A.infotag .infotag__blatt,
	A.infotag SPAN.infotag__mehr > SVG {
		transition: none;
	}

	A.infotag:hover {
		translate: none;
	}
}