Vorlage:Strassennamen/styles.css

/* ===========================================================
   TemplateStyles für Vorlage:Strassennamen
   Speichern unter:  Vorlage:Strassennamen/styles.css
   Aufgerufen aus:   Vorlage:Strassennamen
   =========================================================== */

/* Container, der Schild und Begleittext nebeneinander setzt */
.strschild-wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.2em;
	margin: 0.6em 0 1.2em;
}

/* Das Schild selbst – blaue Außenfläche */
.strschild {
	background: #005FA8;             /* Verkehrsblau RAL 5017 */
	padding: 6px;                    /* Abstand zwischen Schildkante und weißem Rand */
	border-radius: 4px;
	box-shadow: 2px 3px 8px rgba( 0, 0, 0, 0.35 );
	display: inline-block;
	flex: 0 0 auto;
	max-width: 100%;
}

/* Weißer Innenrand (typisches Merkmal deutscher Straßennamenschilder) */
.strschild__inner {
	border: 2px solid #ffffff;
	border-radius: 2px;
	padding: 10px 26px;
	text-align: center;
}

/* Beschriftung */
.strschild__name {
	font-family: "DIN 1451 Std", "DIN Mittelschrift", Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: #ffffff;
	white-space: normal;             /* erlaubt Umbruch bei langen Namen */
}

/* Optionaler Begleittext rechts vom Schild */
.strschild__text {
	flex: 1 1 220px;
	color: #2c2c2a;
	font-size: 14px;
	line-height: 1.6;
}

/* ---------- Responsive ---------- */
@media ( max-width: 600px ) {
	.strschild__inner {
		padding: 8px 16px;
	}
	.strschild__name {
		font-size: 22px;
	}
}

/* ---------- Druckansicht ---------- */
@media print {
	.strschild {
		box-shadow: none;
	}
}

/* ---------- Dunkler Modus ---------- */
@media ( prefers-color-scheme: dark ) {
	.strschild__text {
		color: #f1efe8;
	}
	/* Das Schild selbst bleibt absichtlich blau/weiß –
	   genau wie ein echtes Schild auch nachts blau/weiß ist. */
}