/* Ergänzungen für die PHP-Seiten, nach style.min.css */

/* Listen aus Blöcken: erster ohne Abstand oben, jeder zweite hinterlegt (auch nachgeladene) */
section.article > div.element:first-child {
	padding-top: 0;
}
section.article > div.element:nth-of-type(even) {
	background-color: rgb(252, 240, 216); /* @creme aus style.less */
}

/* Tools: Kacheln mit variabler Höhe, Zeilen gleich hoch */
.tools {
	display: flex;
	flex-wrap: wrap;
}
.tools .paper {
	height: auto;
	margin-bottom: 10px;
}
.tools h3 {
	margin-bottom: 6px;
}

/* Download-Kacheln (Wocheninfo, Tools) auf dem Handy: kleines Symbol, Text bündig daneben */
@media (max-width: 767px) {
	a.paper {
		display: flex;
		align-items: flex-start;
		height: auto;
		margin-top: 18px;
	}
	a.paper .logo {
		float: none;
		flex: none;
		width: 32px;
		margin-top: 2px;
	}
	a.paper .text {
		margin-left: 12px;
		min-width: 0;
	}
	a.paper h3 {
		font-size: 20px;
		line-height: 1.2;
		margin: 0 0 4px;
		overflow-wrap: anywhere;
	}
	.tools .paper .text div {
		font-size: 14px;
		overflow-wrap: anywhere;
	}
}

/* Termine: Abstand zwischen „in X Tagen“ und dem Text darunter (Handy: untereinander) */
/* style.less setzt den Abstand dort auf 0, .content zieht 10 px hoch */
section.article .row p.when {
	margin-bottom: 25px;
}

/* Auswahl (Videos, Galerie): langer Titel gekürzt */
.select-title {
	width: 100%;
	padding-right: 45px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#video .dropdown-menu,
#gallery .dropdown-menu {
	z-index: 1000;
	background-color: white;
	width: 100%;
	overflow-y: auto; /* Höhe bis zur Fensterunterkante setzt site.js */
}
#video .dropdown-menu > li > a,
#gallery .dropdown-menu > li > a {
	white-space: normal;
}
#video .dropdown-menu small {
	display: block;
}
#video .back,
#gallery .back {
	padding-top: 12px;
}
#video .video-title {
	margin: 22px 0 4px;
}
#video .video-date {
	margin-bottom: 22px;
}
#video .description {
	margin-top: 22px;
}
/* style.less macht den Player nur bis 1767px responsiv, hier immer 16:9 */
#video .video-container {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}
#video .video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Kacheln mit Bild und Titel darüber (Videos, später Galerie), unabhängig von section.tiles */
.media-tiles .tile {
	position: relative;
	display: block;
	overflow: hidden;
	margin-bottom: 22px;
}
.media-tiles .tile img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
}
.media-tiles .tile:hover img {
	transform: scale(1.08);
}
.media-tiles .caption {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 15px;
	background-color: rgba(169, 11, 4, 0.45); /* @dunkelrot, kräftiger als @tileback für Lesbarkeit */
	color: white;
	text-align: center;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	transition: background-color 0.4s ease-in-out;
}
/* Beim Überfahren: Überlagerung weg, Schrift auf 500 % skalieren und ausblenden, zurück beim Verlassen */
.media-tiles .tile:hover .caption {
	background-color: rgba(169, 11, 4, 0);
}
.media-tiles .caption-text {
	transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
.media-tiles .tile:hover .caption-text {
	transform: scale(5);
	opacity: 0;
}
.media-tiles .caption h3 {
	color: white;
	font-family: meta-serif;
	font-size: 20px;
	line-height: 1.2;
	margin: 0;
}
.media-tiles .caption .date {
	font-size: 14px;
	margin-top: 4px;
}

/* Galerie: Raster mit Zoom beim Überfahren */
#gallery .gallery-title {
	margin: 22px 0;
}
#gallery .zoom {
	display: block;
	overflow: hidden;
	height: 200px;
	margin-bottom: 22px;
}
#gallery .zoom img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease-in-out;
}
#gallery .zoom:hover img {
	transform: scale(1.08);
}

/* Lightbox ein- und ausblenden wie bei Angular (ng-enter/ng-leave in style.less);
   style.less gibt .lightbox margin-bottom 22px, beim Vollbild bleibt dann unten ein Streifen */
.lightbox {
	margin: 0;
	opacity: 0;
	backdrop-filter: blur(0);
	transition: opacity 0.4s linear, backdrop-filter 0.4s linear;
}
.lightbox.is-open {
	opacity: 1;
	backdrop-filter: blur(10px);
}

/* Schichtplan (wie die alte Angular-Seite) */
#schedule .schedule-head {
	margin: 22px 0 0;
}
#schedule .favorite-toggle {
	border: 0;
	padding: 0;
	background: none;
	color: rgb(169, 11, 4);
}
#schedule .favorite-toggle[disabled] {
	cursor: default;
}
#schedule .schedule-week {
	margin: 0 0 6px;
}
#schedule .schedule-week a {
	text-decoration: none;
}
#schedule .schedule-select {
	padding: 0 !important;
	margin: 11px 0 0;
}
#schedule #planFilter.open {
	max-height: 1200px;
}
#schedule .schedule-pdf {
	padding-top: 12px;
}
#schedule .select-arrow {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
}
#schedule .select-title {
	position: relative;
}
#schedule .pdf-icon {
	width: 24px;
	height: 24px;
	margin-right: 6px;
	vertical-align: middle;
}
/* WEPlan direkt eingebettet: Browser-Grundstil statt Bootstrap. Maße sind Vielfache von --u
   (1 px des Plans), so füllt die Inhaltsbreite --w den Container */
#schedule .weplan-fluid {
	max-width: 1600px;
}
#schedule .weplan {
	margin: 22px 0 44px;
	overflow: hidden;
	background: white;
	container-type: inline-size;
}
/* Ausschnitt: Breite --w Plan-Einheiten */
#schedule .weplan-inner {
	--u: calc(100cqw / var(--w));
	width: calc(var(--w) * var(--u));
	overflow: clip;
}
#schedule .weplan-pages {
	width: max-content;
	font: 16px/normal 'Times New Roman', serif;
	color: black;
	text-align: left;
}
#schedule .weplan-pages * {
	box-sizing: content-box;
}
/* aller Text steht in spans mit eigener Größe; sonst macht die 16-px-Zeile die Zellen höher */
#schedule .weplan-pages td {
	font-size: 0;
}
/* Schrift der Seite statt Arial 8 px; Zeilen wachsen mit (Tabellenhöhen sind Mindesthöhen) */
#schedule .weplan-pages span {
	font-family: meta-sans, sans-serif !important;
	font-weight: 300 !important;
	font-size: calc(9 * var(--u)) !important; /* größer passt „Früh Verkauf/Zuarbeit“ nicht mehr in eine Zeile */
	line-height: 1.25 !important;
	color: #333 !important;
}
#schedule .weplan-pages td[style*="border"] {
	border-color: #c8c8c8 !important;
}
/* Luft in den Zellen; waagerecht nur wenig, sonst bricht „Früh Verkauf/Zuarbeit“ um */
#schedule .weplan-pages td.jrxtdatacell,
#schedule .weplan-pages td.jrxtrowheader,
#schedule .weplan-pages td.jrxtrowfloating,
#schedule .weplan-pages td.jrxtcolheader {
	padding-left: calc(5 * var(--u)) !important;
	padding-right: calc(3 * var(--u)) !important;
}
#schedule .weplan-pages td.jrxtdatacell,
#schedule .weplan-pages td.jrxtrowheader {
	vertical-align: top !important; /* Export mischt top und middle, dann stehen Zeiten versetzt */
	padding-top: calc(0.5 * var(--u)) !important; /* große Uhrzeit hat oben mehr Weißraum */
	padding-bottom: calc(3.5 * var(--u)) !important;
}
#schedule .weplan-pages td.jrxtcolheader {
	padding-top: calc(3 * var(--u)) !important;
	padding-bottom: calc(3 * var(--u)) !important;
}
#schedule .weplan-pages span.detail {
	font-size: calc(7 * var(--u)) !important; /* Pause, Tätigkeit, Urlaub: kleiner als die Uhrzeit */
}
#schedule .weplan-pages span.staff-no {
	font-size: calc(7 * var(--u)) !important; /* Personalnummer unter dem Namen, so groß wie Pause/Tätigkeit */
	font-weight: 600 !important;
}
/* gleicher Abstand unter Uhrzeit und Name (Pause/Tätigkeit bzw. Personalnummer) */
#schedule .weplan-pages span + span.detail,
#schedule .weplan-pages span.staff-no {
	display: block;
	margin-top: calc(2 * var(--u));
}
#schedule .weplan-pages td.blank {
	padding: 0 !important;
}
#schedule .weplan-pages .zebra {
	background-color: rgb(254, 248, 237); /* @creme, heller */
}
#schedule .weplan-pages .jrxtcolheader {
	background-color: rgb(252, 240, 216); /* @creme */
}
#schedule .weplan-pages .jrxtcolheader span {
	color: rgb(169, 11, 4) !important;
}
/* Rahmen liegen in absoluten Divs; skaliert fehlt beim Runden sonst die untere Linie */
#schedule .weplan-pages div[style*="position: absolute"] {
	overflow: visible !important;
}
#schedule .weplan-pages table {
	background: transparent;
}
#schedule .weplan-pages a {
	text-decoration: none;
}
#schedule .weplan-pages img {
	vertical-align: baseline;
	max-width: none;
}
#schedule .schedule-empty {
	margin: 22px 0;
}

/* Zwei-Finger-Zoom (site.js): in der Lightbox nutzt das Bild beim Zoomen den ganzen Bildschirm */
.lightbox .overlay[data-pinch-zoom] {
	touch-action: none;
	overflow: hidden;
}
.lightbox .lightbox-img img {
	transform-origin: 0 0;
}
/* gezoomtes Bild darf über den Rahmen hinaus, die Pfeile bleiben darüber */
.lightbox .lightbox-img {
	overflow: visible;
}
.lightbox .lightbox-img .gallery-control {
	z-index: 1;
}
/* Touch: kein Hover, sonst bleibt der angetippte Pfeil hell und der andere wirkt deaktiviert */
@media (hover: none) {
	.lightbox .lightbox-img .gallery-control,
	.lightbox .lightbox-img .gallery-control:hover,
	.lightbox .lightbox-img:hover .gallery-control {
		opacity: 0.7;
	}
}
/* Handy: Schichtplan bis an den Bildschirmrand, fester Maßstab (Name + Montag ganz, Dienstag
   halb = --m Plan-Einheiten), waagerecht scrollen mit dem normalen Wischen */
@media (max-width: 767px) {
	#schedule .weplan-fluid {
		padding-left: 0;
		padding-right: 0;
	}
	#schedule .weplan {
		overflow-x: auto;
		overflow-y: hidden;
	}
	#schedule .weplan-inner {
		--u: calc(100cqw / var(--m));
	}
}

/* Login-Panel: Ein- und Ausblenden umkehrbar */
#loginPanel {
	transition: top 0.2s ease-out, opacity 0.2s;
}

/* Akkordeon: Höhe animieren wie Bootstrap */
.panel-collapse.collapsing {
	position: relative;
	height: 0;
	overflow: hidden;
	transition: height 0.35s ease;
}

/* Kasse: Zahlungsweise, anfangs beide rot, nach der Wahl der andere weiß */
.payment-toggle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}
.payment-toggle span {
	margin-right: 6px;
}
.payment-toggle .btn,
.payment-toggle .btn:focus,
.payment-toggle .btn:hover {
	min-width: 145px;
	height: 50px;
	border: 2px solid #a90b04;
	border-radius: 0;
	background-color: #a90b04;
	color: #ffffff;
	box-shadow: none;
}
.payment-toggle.chosen .btn[aria-pressed="false"] {
	background-color: #ffffff;
	color: #a90b04;
}
@media (max-width: 767px) {
	.payment-toggle .btn {
		flex: 1;
	}
	.payment-toggle span {
		width: 100%;
	}
}

/* Link im Aussehen der Text-Knöpfe (button.link-button) */
a.link-button {
	color: #a90b04;
	text-decoration: none;
	transition: all 0.2s ease-out;
}
a.link-button:hover,
a.link-button:focus {
	color: #676767;
	text-decoration: none;
}