/* =========================================================
   ZITATSEITE – EDITORIAL / LESBAR
   ========================================================= */

.zitatbox,
.zitatbox * {
	box-sizing: border-box;
}

.zitatbox {
	position: relative;

	width: 100%;
	margin: 0;
	padding:
		42px
		clamp(34px, 5vw, 64px)
		54px;

	color: var(--fire-text);
	background: transparent;
}

.zitat-item {
	position: relative;
	padding-right: 92px;
}

.zitat-delete {
	position: absolute;
	z-index: 20;
	top: 12px;
	right: 14px;
}


/* =========================================================
   FILTERBEREICH
   ========================================================= */

/* =========================================================
   FILTER
   ========================================================= */

.zitate-filterbox {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px 26px;

	padding: 18px 32px;

	background: rgba(255,255,255,.015);
	border-top: 1px solid rgba(165,195,200,.10);
	border-bottom: 1px solid rgba(165,195,200,.10);
}

.zitate-filterbox label {
	color: rgba(210,218,215,.82);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	margin-right: 6px;
}

.zitate-filterbox select {
	min-width: 170px;
	height: 36px;
	padding: 0 34px 0 12px;

	color: rgba(230,235,233,.92);
	font-size: 11px;
	font-family: inherit;

	background: rgba(255,255,255,.025);
	border: 1px solid rgba(178,139,173,.25);
	border-radius: 0;

	outline: none;

	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	background-image:
		linear-gradient(45deg, transparent 50%, var(--accent) 50%),
		linear-gradient(135deg, var(--accent) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) 15px,
		calc(100% - 13px) 15px;
	background-size: 5px 5px;
	background-repeat: no-repeat;

	transition:
		border-color .2s ease,
		background .2s ease;
}

.zitate-filterbox select:hover,
.zitate-filterbox select:focus {
	background-color: rgba(255,255,255,.04);
	border-color: rgba(178,139,173,.45);
	color: #fff;
}

/* Dropdownliste */

.zitate-filterbox select option {
	background: #0f1213;
	color: #dfe5e3;
}

/* Firefox */

.zitate-filterbox select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 rgba(230,235,233,.92);
}

/* =========================================================
   FILTERBUTTON
   ========================================================= */

.zitate-filterbox input[type="submit"] {
	height: 36px;
	padding: 0 18px;
	color: var(--fire-accent-light);
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
margin-left:40px;
	background: transparent;
	border: 1px solid rgba(178, 139, 173, 0.34);
	border-radius: 0;

	cursor: pointer;

	transition:
		color .2s ease,
		background .2s ease,
		border-color .2s ease,
		transform .2s ease;
}

.zitate-filterbox input[type="submit"]:hover {
	color: #ffffff;

	background: rgba(178, 139, 173, 0.08);
	border-color: var(--accent);

	transform: translateY(-1px);
}

.zitate-filterbox input[type="submit"]:active {
	transform: translateY(0);
}


/* =========================================================
   EINZELNES ZITAT
   ========================================================= */

.zitat-item {
	position: relative;
	margin: 20px;
	padding:
		16px
		18px
		14px;
padding:20px; 
	box-sizing:border-box;
	background: rgba(255, 255, 255, 0.012);
	border: 1px solid rgba(178, 139, 173, 0.22);

	transition:
		border-color 0.2s ease,
		background 0.2s ease;
}

.zitat-item:hover {
	background: rgba(255, 255, 255, 0.02);
	border-color: rgba(178, 139, 173, 0.42);
}


/* =========================================================
   ZITAT-INFORMATIONEN
   ========================================================= */

.zitat-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px 10px;

	margin: 0 0 12px;
	padding: 0 0 10px;

	color: rgba(184, 196, 193, 0.64);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.55;

	border-bottom: 1px solid rgba(165, 195, 200, 0.09);
}

.zitat-info strong,
.zitat-info b {
	color: rgba(225, 230, 227, 0.86);
	font-weight: 600;
}

.zitat-info a {
	color: var(--accent-light);
	font-weight: 600;
	text-decoration: none;

	transition: color 0.18s ease;
}

.zitat-info a:hover {
	color: #ffffff;
}


/* =========================================================
   ZITATTEXT
   ========================================================= */

.zitat-item blockquote,
.zitatbox blockquote {
	position: relative;

	width: 100%;
	margin: 0;
	padding:
		4px
		12px
		4px
		18px;

	color: rgba(210, 217, 214, 0.76);
	font-size: 11px;
	font-weight: 300;
	line-height: 1.75;

	background: transparent;
	border: 0;
	border-left: 1px solid rgba(178, 139, 173, 0.38);
}

.zitat-item blockquote p,
.zitatbox blockquote p {
	margin: 0;
}


/* =========================================================
   ZUSATZ / QUELLE
   ========================================================= */

.zitat-zusatz {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;

	margin-top: 12px;
	padding: 10px 0 0;

	color: rgba(173, 187, 184, 0.58);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.5;

	border-top: 1px solid rgba(165, 195, 200, 0.08);
}

.zitat-zusatz a {
	color: var(--accent-light);
	font-weight: 600;
	text-decoration: none;

	transition: color 0.18s ease;
}

.zitat-zusatz a:hover {
	color: #ffffff;
}


/* =========================================================
   POPUP
   ========================================================= */

.igzitate-popup {
	position: absolute;
	z-index: 9999;
	top: 30px;
	right: 0;

	width: 280px;
	padding: 18px;

	background:
		linear-gradient(
			145deg,
			rgba(13, 17, 18, 0.99),
			rgba(7, 10, 11, 0.99)
		);

	border: 1px solid rgba(165, 195, 200, 0.16);
	border-left: 2px solid var(--accent);

	box-shadow:
		0 18px 42px rgba(0, 0, 0, 0.42);
}

.igzitate-popup textarea {
	display: block;

	width: 100%;
	min-height: 90px;
	margin: 0 0 10px;
	padding: 10px 11px;

	resize: vertical;

	color: rgba(220, 225, 223, 0.84);
	font-family: var(--fire-body);
	font-size: 11px;
	line-height: 1.6;

	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(165, 195, 200, 0.14);
	border-radius: 0;
	outline: none;
}

.igzitate-popup textarea:focus {
	border-color: rgba(178, 139, 173, 0.48);
}

.igzitate-popup input[type="submit"] {
	width: 100%;
	min-height: 34px;
	padding: 0 12px;

	color: var(--accent-light);
	font-family: var(--fire-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;

	background: transparent;
	border: 1px solid rgba(178, 139, 173, 0.34);

	cursor: pointer;

	transition:
		color 0.18s ease,
		background 0.18s ease,
		border-color 0.18s ease;
}

.igzitate-popup input[type="submit"]:hover {
	color: #ffffff;
	background: rgba(178, 139, 173, 0.08);
	border-color: var(--accent);
}


/* =========================================================
   SCROLLBARS
   ========================================================= */

.igzitate-popup textarea,
.zitatbox {
	scrollbar-width: thin;
	scrollbar-color: var(--accent) transparent;
}

.igzitate-popup textarea::-webkit-scrollbar,
.zitatbox::-webkit-scrollbar {
	width: 4px;
}

.igzitate-popup textarea::-webkit-scrollbar-track,
.zitatbox::-webkit-scrollbar-track {
	background: transparent;
}

.igzitate-popup textarea::-webkit-scrollbar-thumb,
.zitatbox::-webkit-scrollbar-thumb {
	background: rgba(178, 139, 173, 0.4);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 700px) {

	.zitatbox {
		padding:
			30px
			22px
			40px;
	}

	.zitate-filterbox {
		align-items: stretch;
		flex-direction: column;
	}

	.zitate-filterbox select,
	.zitate-filterbox input,
	.zitate-filterbox button {
		width: 100%;
	}

	.igzitate-popup {
		right: auto;
		left: 0;

		width: min(280px, calc(100vw - 44px));
	}

}