/* =========================================================
   SZENENTRACKER – EVENTVERWALTUNG
   überschreibt das interne Plugin-CSS
   ========================================================= */

:root {

	/* bestehende globale Farben */

	--ev-bg:
		var(--sidebit-bg);

	--ev-bg-deep:
		var(--sidebit-bg-deep);

	--ev-bg-soft:
		var(--sidebit-bg-soft);

	--ev-panel:
		var(--sidebit-panel);

	--ev-panel-raised:
		var(--sidebit-panel-raised);

	--ev-text:
		var(--sidebit-text);

	--ev-text-soft:
		var(--sidebit-text-soft);

	--ev-text-muted:
		var(--sidebit-text-muted);

	--ev-text-strong:
		var(--sidebit-text-strong);

	--ev-accent-dark:
		var(--sidebit-accent-dark);

	--ev-accent:
		var(--sidebit-accent-light);

	--ev-accent-pale:
		var(--sidebit-accent-pale);

	--ev-line:
		var(--sidebit-line);

	--ev-line-strong:
		var(--sidebit-line-strong);

	--ev-line-accent:
		var(--sidebit-line-accent);

	--ev-transparent:
		var(--sidebit-transparent);


	/* Schriften */

	--ev-font:
		var(--sidebit-font);

	--ev-display:
		var(--sidebit-display);


	/* zusätzliche Flächen */

	--ev-red-wash:
		rgba(116, 27, 42, 0.09);

	--ev-red-wash-strong:
		rgba(116, 27, 42, 0.16);

	--ev-black:
		rgba(0, 0, 0, 0.28);

	--ev-danger:
		#b64356;

	--ev-danger-soft:
		rgba(182, 67, 86, 0.12);


	/* Verläufe */

	--ev-panel-gradient:
		linear-gradient(
			135deg,
			var(--ev-panel-raised),
			var(--ev-bg-soft) 58%,
			var(--ev-bg-deep)
		);

	--ev-head-gradient:
		linear-gradient(
			to right,
			var(--ev-red-wash-strong),
			var(--ev-red-wash),
			var(--ev-transparent)
		);

	--ev-line-gradient:
		linear-gradient(
			to right,
			var(--ev-accent),
			var(--ev-line-accent) 30%,
			var(--ev-line) 68%,
			var(--ev-transparent)
		);


	/* Schatten */

	--ev-shadow:
		0 18px 44px var(--ev-black);
}


/* =========================================================
   SEITENBASIS
   ========================================================= */

body:has(.event-form) .event-form,
body:has(.event-form) .event-form *,
body:has(.event-form) .search-form,
body:has(.event-form) .search-form * {
	box-sizing: border-box;
}


/* =========================================================
   HEADLINES
   ========================================================= */

body:has(.event-form) > div h1,
body:has(.event-form) h1 {
	position: relative;

	max-width: 980px;

	margin:
		32px
		0
		46px !important;

	padding:
		0
		0
		20px
		24px !important;

	color:
		var(--ev-text-strong) !important;

	font-family:
		var(--ev-display) !important;

	font-size:
		clamp(44px, 4.7vw, 66px) !important;

	font-weight: 600 !important;
	letter-spacing: -0.025em;
	line-height: 0.96 !important;
}


body:has(.event-form) h1::before {
	position: absolute;

	top: 0.42em;
	left: 2px;

	width: 7px;
	height: 7px;

	content: "";

	border:
		1px solid
		var(--ev-accent);

	transform: rotate(45deg);
}


body:has(.event-form) h1::after {
	position: absolute;

	right: 0;
	bottom: 0;
	left: 24px;

	height: 1px;

	content: "";

	background:
		var(--ev-line-gradient);
}


/* H2 */

body:has(.event-form) h2 {
	position: relative;

	margin:
		42px
		0
		20px !important;

	padding:
		0
		0
		13px !important;

	color:
		var(--ev-accent-pale) !important;

	font-family:
		var(--ev-display) !important;

	font-size:
		clamp(27px, 2.5vw, 35px) !important;

	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	line-height: 1.05 !important;

	text-transform: none !important;
}


body:has(.event-form) h2::before {
	display: block;

	width: 34px;
	height: 1px;

	margin-bottom: 10px;

	content: "";

	background:
		var(--ev-accent-dark);
}


body:has(.event-form) h2::after {
	position: absolute;

	bottom: 0;
	left: 0;

	width: 90px;
	height: 1px;

	content: "";

	background:
		var(--ev-line-gradient);
}


/* die überflüssigen <br> etwas abfangen */

body:has(.event-form) h2 + br {
	display: none;
}


/* =========================================================
   EVENTFORMULAR
   ========================================================= */

body:has(.event-form) .event-form {
	position: relative;

	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap:
		20px
		18px;

	width: 100%;

	margin:
		0
		0
		48px;

	padding:
		30px
		clamp(25px, 3vw, 38px);

	font-family:
		var(--ev-font);

	background:
		var(--ev-panel-gradient);

	border:
		1px solid
		var(--ev-line) !important;

	box-shadow:
		var(--ev-shadow);
}


/* obere rote Akzentlinie */

body:has(.event-form) .event-form::before {
	position: absolute;

	top: -1px;
	left: 32px;

	width: 86px;
	height: 1px;

	content: "";

	background:
		var(--ev-accent);
}


/* =========================================================
   LABELS
   ========================================================= */

body:has(.event-form) .event-form > label,
body:has(.event-form) .search-form > label {
	display: flex;
	flex-direction: column;
	gap: 8px;

	min-width: 0;

	color:
		var(--ev-text-muted);

	font-family:
		var(--ev-font);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.11em;
	line-height: 1.5;

	text-transform: uppercase;
}


/* =========================================================
   INPUTS
   ========================================================= */

body:has(.event-form) .event-form input[type="text"],
body:has(.event-form) .search-form input[type="text"],
body:has(.event-form) .event-form textarea {
	width: 100% !important;

	margin: 0 !important;

	color:
		var(--ev-text-strong) !important;

	font-family:
		var(--ev-font) !important;

	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	line-height: 1.6 !important;

	background:
		var(--ev-bg-deep) !important;

	border:
		1px solid
		var(--ev-line-strong) !important;

	border-radius: 0 !important;

	box-shadow: none !important;

	outline: 0 !important;
}


body:has(.event-form) .event-form input[type="text"],
body:has(.event-form) .search-form input[type="text"] {
	height: 43px;

	padding:
		0
		12px !important;
}


body:has(.event-form) .event-form textarea {
	grid-column:
		1
		/
		-1;

	min-height: 150px;

	padding:
		13px
		14px !important;

	resize: vertical;
}


body:has(.event-form) .event-form input[type="text"]:focus,
body:has(.event-form) .search-form input[type="text"]:focus,
body:has(.event-form) .event-form textarea:focus {
	background:
		var(--ev-panel) !important;

	border-color:
		var(--ev-line-accent) !important;
}


/* Placeholder */

body:has(.event-form) input::placeholder,
body:has(.event-form) textarea::placeholder {
	color:
		var(--ev-text-muted);

	opacity: 1;
}


/* =========================================================
   EVENT ACTIONS
   ========================================================= */

body:has(.event-form) .event-form .actions {
	grid-column:
		1
		/
		-1;

	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;

	margin-top: 2px;
	padding-top: 20px;

	border-top:
		1px solid
		var(--ev-line);
}


/* =========================================================
   BUTTONS
   wichtig: teilweise Inline-Styles im Plugin
   ========================================================= */

body:has(.event-form) .button,
body:has(.event-form) input.button,
body:has(.event-form) a.button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	min-height: 39px !important;

	margin:
		0 !important;

	padding:
		0
		14px !important;

	color:
		var(--ev-text-soft) !important;

	font-family:
		var(--ev-font) !important;

	font-size:
		10px !important;

	font-weight: 700 !important;
	letter-spacing: 0.09em !important;
	line-height: 1.4 !important;

	text-decoration: none !important;
	text-transform: uppercase;

	background:
		var(--ev-bg-soft) !important;

	border:
		1px solid
		var(--ev-line-strong) !important;

	border-radius:
		0 !important;

	box-shadow:
		none !important;

	cursor: pointer;
}


body:has(.event-form) .button:hover,
body:has(.event-form) input.button:hover,
body:has(.event-form) a.button:hover {
	color:
		var(--ev-accent-pale) !important;

	background:
		var(--ev-red-wash) !important;

	border-color:
		var(--ev-line-accent) !important;
}


/* Löschen */

body:has(.event-form) .button-danger {
	color:
		var(--ev-accent-pale) !important;

	border-color:
		var(--ev-line-accent) !important;
}


body:has(.event-form) a.button-danger:hover {
	background:
		var(--ev-danger-soft) !important;

	border-color:
		var(--ev-danger) !important;
}


/* =========================================================
   SUCHFORMULAR
   ========================================================= */

body:has(.event-form) .search-form {
	position: relative;

	display: grid;

	grid-template-columns:
		minmax(0, 1.25fr)
		minmax(180px, 0.75fr)
		minmax(180px, 0.75fr)
		auto;

	align-items: end;

	gap: 16px;

	width: 100%;

	margin:
		0
		0
		46px;

	padding:
		24px
		26px;

	background:
		var(--ev-bg-soft);

	border-top:
		1px solid
		var(--ev-line-strong);

	border-bottom:
		1px solid
		var(--ev-line-strong);
}


body:has(.event-form) .search-form input[type="submit"] {
	min-width: 110px;
}


/* =========================================================
   EVENTTABELLE
   überschreibt das interne table/th/td CSS
   ========================================================= */

body:has(.event-form) table {
	width: 100% !important;

	margin:
		0
		0
		40px !important;

	color:
		var(--ev-text) !important;

	font-family:
		var(--ev-font) !important;

	font-size:
		13px;

	background:
		var(--ev-bg-soft) !important;

	border-collapse:
		separate !important;

	border-spacing:
		0 !important;

	border:
		1px solid
		var(--ev-line-strong) !important;

	box-shadow:
		var(--ev-shadow);
}


body:has(.event-form) table th {
	padding:
		14px
		15px !important;

	color:
		var(--ev-text-muted) !important;

	font-size:
		9px !important;

	font-weight:
		700 !important;

	letter-spacing:
		0.11em;

	line-height:
		1.45;

	text-align:
		left;

	text-transform:
		uppercase;

	background:
		var(--ev-bg-deep) !important;

	border:
		0 !important;

	border-right:
		1px solid
		var(--ev-line) !important;

	border-bottom:
		1px solid
		var(--ev-line-strong) !important;
}


body:has(.event-form) table th:last-child {
	border-right:
		0 !important;
}


body:has(.event-form) table td {
	padding:
		16px
		15px !important;

	color:
		var(--ev-text-soft) !important;

	font-size:
		13px !important;

	line-height:
		1.7;

	vertical-align:
		top;

	background:
		var(--ev-bg-soft) !important;

	border:
		0 !important;

	border-right:
		1px solid
		var(--ev-line) !important;

	border-bottom:
		1px solid
		var(--ev-line) !important;
}


body:has(.event-form) table td:last-child {
	border-right:
		0 !important;
}


body:has(.event-form) table tbody tr:last-child td {
	border-bottom:
		0 !important;
}


/* Eventname etwas hervorheben */

body:has(.event-form) table tbody td:first-child {
	color:
		var(--ev-text-strong) !important;

	font-family:
		var(--ev-display) !important;

	font-size:
		19px !important;

	font-weight:
		600;
	line-height:
		1.25;
}


/* Datumsfelder kompakter */

body:has(.event-form) table th:nth-child(3),
body:has(.event-form) table th:nth-child(4),
body:has(.event-form) table td:nth-child(3),
body:has(.event-form) table td:nth-child(4) {
	width: 125px;

	white-space: nowrap;
}


/* Aktionen */

body:has(.event-form) table th:last-child,
body:has(.event-form) table td:last-child {
	width: 190px;

	white-space: nowrap;
}


body:has(.event-form) table td:last-child .button {
	margin:
		0
		5px
		5px
		0 !important;

	min-height:
		32px !important;

	padding:
		0
		10px !important;

	font-size:
		9px !important;
}


/* =========================================================
   FEHLERMELDUNGEN
   ========================================================= */

body:has(.event-form) .error_messages {
	margin:
		0
		0
		24px !important;

	padding:
		15px
		18px !important;

	color:
		var(--ev-text-strong) !important;

	font-size:
		13px;

	line-height:
		1.7;

	background:
		var(--ev-danger-soft) !important;

	border:
		1px solid
		var(--ev-line-accent) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

	body:has(.event-form) .event-form {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	body:has(.event-form) .event-form > label:first-of-type {
		grid-column:
			1
			/
			-1;
	}


	body:has(.event-form) .search-form {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	body:has(.event-form) .search-form input[type="submit"] {
		width: 100%;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px), (max-device-width: 700px) {

	body:has(.event-form) h1 {
		margin-bottom:
			36px !important;

		font-size:
			clamp(
				42px,
				11vw,
				56px
			) !important;
	}


	body:has(.event-form) h2 {
		font-size:
			clamp(
				30px,
				8vw,
				38px
			) !important;
	}


	body:has(.event-form) .event-form {
		display: block;

		padding:
			24px
			20px;
	}


	body:has(.event-form) .event-form > label {
		margin-bottom: 18px;

		font-size: 12px;
	}


	body:has(.event-form) .event-form textarea {
		margin-bottom:
			20px !important;
	}


	body:has(.event-form) .event-form input[type="text"],
	body:has(.event-form) .search-form input[type="text"],
	body:has(.event-form) .event-form textarea {
		font-size:
			16px !important;
	}


	body:has(.event-form) .event-form input[type="text"],
	body:has(.event-form) .search-form input[type="text"] {
		height:
			46px;
	}


	body:has(.event-form) .event-form .actions {
		justify-content:
			flex-start;
	}


	body:has(.event-form) .button,
	body:has(.event-form) input.button,
	body:has(.event-form) a.button {
		min-height:
			44px !important;

		font-size:
			13px !important;
	}


	/* Suche */

	body:has(.event-form) .search-form {
		display: block;

		padding:
			22px
			20px;
	}


	body:has(.event-form) .search-form > label {
		margin-bottom: 17px;

		font-size: 12px;
	}


	body:has(.event-form) .search-form input[type="submit"] {
		width: 100%;
	}


	/*
	 * Tabelle nicht auf Handybbreite zusammenquetschen.
	 * Stattdessen horizontal scrollen.
	 */

	body:has(.event-form) table {
		display: block;

		width: 100% !important;

		overflow-x:
			auto;

		overflow-y:
			hidden;

		font-size:
			15px;
	}


	body:has(.event-form) table thead,
	body:has(.event-form) table tbody {
		display: table;

		width: 830px;
		min-width: 830px;

		table-layout: fixed;
	}


	body:has(.event-form) table th {
		font-size:
			11px !important;
	}


	body:has(.event-form) table td {
		font-size:
			15px !important;

		line-height:
			1.65;
	}


	body:has(.event-form) table tbody td:first-child {
		font-size:
			21px !important;
	}


	body:has(.event-form) table th:nth-child(1),
	body:has(.event-form) table td:nth-child(1) {
		width: 155px;
	}


	body:has(.event-form) table th:nth-child(2),
	body:has(.event-form) table td:nth-child(2) {
		width: 290px;
	}


	body:has(.event-form) table th:nth-child(3),
	body:has(.event-form) table td:nth-child(3),
	body:has(.event-form) table th:nth-child(4),
	body:has(.event-form) table td:nth-child(4) {
		width: 115px;
	}


	body:has(.event-form) table th:last-child,
	body:has(.event-form) table td:last-child {
		width: 155px;
	}


	body:has(.event-form) table td:last-child .button {
		font-size:
			11px !important;
	}

}


/* =========================================================
   KLEINE HANDYS
   ========================================================= */

@media (max-width: 480px), (max-device-width: 480px) {

	body:has(.event-form) .event-form,
	body:has(.event-form) .search-form {
		padding-right:
			16px;

		padding-left:
			16px;
	}


	body:has(.event-form) .event-form > label,
	body:has(.event-form) .search-form > label {
		font-size:
			13px;
	}


	body:has(.event-form) .event-form input[type="text"],
	body:has(.event-form) .search-form input[type="text"],
	body:has(.event-form) .event-form textarea {
		font-size:
			17px !important;
	}

}

/* =========================================================
   EVENTVERWALTUNG ZENTRIEREN
   gleiche Grundbreite wie Forumbit
   ========================================================= */

body:has(.event-form) {
	--ev-content-width: 1380px;
}


/* Überschriften, Formulare und Eventtabelle mittig halten */

body:has(.event-form) h1,
body:has(.event-form) h2,
body:has(.event-form) .event-form,
body:has(.event-form) .search-form,
body:has(.event-form) table,
body:has(.event-form) .error_messages {
	width:
		min(
			calc(100% - 50px),
			var(--ev-content-width)
		) !important;

	margin-right:
		auto !important;

	margin-left:
		auto !important;
}


/* h1 behält seinen vertikalen Abstand */

body:has(.event-form) h1 {
	margin-top:
		32px !important;

	margin-bottom:
		46px !important;
}


/* h2 ebenfalls */

body:has(.event-form) h2 {
	margin-top:
		42px !important;

	margin-bottom:
		20px !important;
}


/* Formular-Abstände */

body:has(.event-form) .event-form {
	margin-bottom:
		48px !important;
}


body:has(.event-form) .search-form {
	margin-bottom:
		46px !important;
}


body:has(.event-form) table {
	margin-bottom:
		40px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px), (max-device-width: 700px) {

	body:has(.event-form) h1,
	body:has(.event-form) h2,
	body:has(.event-form) .event-form,
	body:has(.event-form) .search-form,
	body:has(.event-form) table,
	body:has(.event-form) .error_messages {
		width:
			calc(100% - 30px) !important;
	}

}


@media (max-width: 480px), (max-device-width: 480px) {

	body:has(.event-form) h1,
	body:has(.event-form) h2,
	body:has(.event-form) .event-form,
	body:has(.event-form) .search-form,
	body:has(.event-form) table,
	body:has(.event-form) .error_messages {
		width:
			calc(100% - 24px) !important;
	}

}