/* ============================================================
   ZITATE – "Sternenhimmel"  (blockquote, auch verschachtelt)
   ============================================================ */
blockquote {
	position: relative;
	box-sizing: border-box;
	margin: 0 0 1.5em;
	padding: 0 30px 20px 74px;
	background: rgba(255,255,255,.72);
	border: 1px solid #fff;
	box-shadow: 0 12px 32px rgba(74,63,140,.16), inset 0 0 0 1px rgba(191,204,228,.7);
}

/* Kopf: Name + Datum auf Navy-Streifen */
blockquote cite {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	margin: 0 -30px 20px -74px;
	padding: 15px 24px 15px 74px;
	border: 0;
	font: 400 20px 'Italiana', serif;
	font-style: normal;
	letter-spacing: .07em;
	color: #fff;
	background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 8px, transparent 8px 16px),
	            linear-gradient(110deg, #1f1d4f, #4a3f8c 62%, #7a86c9);
	box-shadow: 0 4px 0 -1px rgba(191,204,228,.9);
}
/* funkelndes Sternbild */
blockquote cite::after {
	content: "";
	position: absolute;
	right: 150px; top: 0; bottom: 0;
	width: 200px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50'%3E%3Cpolyline points='8,40 44,14 82,32 122,8 160,28 192,10' fill='none' stroke='white' stroke-opacity='.75' stroke-width='.9'/%3E%3Cg fill='white'%3E%3Ccircle cx='8' cy='40' r='2'/%3E%3Ccircle cx='44' cy='14' r='3'/%3E%3Ccircle cx='82' cy='32' r='2'/%3E%3Ccircle cx='122' cy='8' r='2.6'/%3E%3Ccircle cx='160' cy='28' r='2'/%3E%3Ccircle cx='192' cy='10' r='3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	opacity: .55;
	animation: osa-twinkle 4s ease-in-out infinite;
	pointer-events: none;
}
/* Datum */
blockquote cite > span {
	float: none;
	order: 3;
	margin-left: auto;
	position: relative;
	z-index: 2;
	white-space: nowrap;
	font: 500 10.5px 'Archivo', sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #bfcce4;
}
/* @Erwähnungen etc. im Kopf nicht wie das Datum behandeln */
blockquote cite span.highlight {
	order: 0; margin: 0; float: none;
	font: inherit; letter-spacing: inherit; text-transform: none; color: inherit;
}
/* Pfeil-Link */
blockquote cite a {
	position: relative;
	z-index: 2;
	font-size: 0;
	line-height: 1;
	text-decoration: none;
	color: #fff;
}
blockquote cite a img { display: none; }
blockquote cite a::after { content: "\279C"; font: 400 17px/1 'Archivo', sans-serif; }

/* großes Anführungszeichen */
blockquote::before {
	content: "\201C";
	position: absolute;
	left: 18px; top: 62px;
	font: 400 112px/1 'Italiana', serif;
	background: linear-gradient(180deg, #4a3f8c, #aab4e0);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 4px 8px rgba(74,63,140,.25));
	pointer-events: none;
}
blockquote::after {
	content: "\201D";
	position: absolute;
	right: 20px; bottom: -34px;
	font: 400 112px/1 'Italiana', serif;
	color: rgba(191,204,228,.55);
	pointer-events: none;
}

/* verschachteltes Zitat */
blockquote blockquote {
	margin: 14px 0 0;
	padding: 0 20px 14px 52px;
	background: rgba(255,255,255,.7);
	box-shadow: none;
}
blockquote blockquote cite {
	margin: 0 -20px 14px -52px;
	padding: 9px 16px 9px 52px;
	font-size: 16px;
	background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 8px, transparent 8px 16px), #4a3f8c;
}
blockquote blockquote cite::after,
blockquote blockquote::after { display: none; }
blockquote blockquote::before { font-size: 70px; left: 10px; top: 44px; }

@keyframes osa-twinkle { 0%,100% { opacity: .35; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { blockquote cite::after { animation: none; } }

/* Handy */
@media (max-width: 560px) {
	blockquote { padding-left: 58px; padding-right: 18px; }
	blockquote cite { margin-left: -58px; margin-right: -18px; padding-left: 58px; font-size: 17px; }
	blockquote cite::after { display: none; }
	blockquote::before { font-size: 84px; left: 12px; }
}