/* ===== MODERN CSS RESET ===== */

/* Umfassender Reset mit Ausnahmen für Media-Elemente */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
	all: unset;
	display: revert;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Verhindert Zoom bei Orientierungsänderung */
html {
	text-size-adjust: none;
}

/* Cursor-Verhalten für interaktive Elemente */
a,
button {
	cursor: revert;
}

/* Listen ohne Standard-Marker */
ol,
ul,
menu,
summary {
	list-style: none;
}

/* Responsive Bilder mit besserer Performance */
img {
	max-inline-size: 100%;
	block-size: auto;
	height: auto;
}

/* Table-Layout normalisieren */
table {
	border-collapse: collapse;
}

/* Input-Elemente sollen selektierbar bleiben */
input,
textarea {
	user-select: auto;
}

/* Textarea Whitespace-Verhalten */
textarea {
	white-space: revert;
}

/* Native Meter-Styling beibehalten */
meter {
	appearance: revert;
}

/* Pre-Element Verhalten */
:where(pre) {
	all: revert;
	box-sizing: border-box;
}

/* Placeholder ohne spezielle Farbe */
::placeholder {
	color: unset;
	opacity: 0.6; /* Bessere Accessibility */
}

/* Hidden-Attribut respektieren */
:where([hidden]) {
	display: none;
}

/* Contenteditable-Optimierungen */
:where([contenteditable]:not([contenteditable="false"])) {
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
	line-break: after-white-space;
	user-select: auto;
}

/* Draggable-Verhalten */
:where([draggable="true"]) {
	-webkit-user-drag: element;
}

/* Dialog-Modal Verhalten */
:where(dialog:modal) {
	all: revert;
	box-sizing: border-box;
}

/* Details-Marker verstecken für Custom-Styling */
::-webkit-details-marker {
	display: none;
}

/* ===== PROGRESSIVE FONT LOADING ===== */

@font-face {
	font-family: "sans-font";
	font-style: normal;
	src: url("f/ssar.woff2") format("woff2-variations");
	font-display: swap;
	font-weight: 200 900;
	font-stretch: 75% 125%; /* Variable Font Stretch Support */
}

@font-face {
	font-family: "sans-font";
	font-style: italic;
	src: url("f/ssai.woff2") format("woff2-variations");
	font-display: swap;
	font-weight: 200 900;
	font-stretch: 75% 125%;
}

@font-face {
	font-family: "serif-font";
	font-style: normal;
	src: url("f/sser.woff2") format("woff2-variations");
	font-weight: 200 900;
	font-display: swap;
	font-stretch: 75% 125%;
}

@font-face {
	font-family: "serif-font";
	font-style: italic;
	src: url("f/ssei.woff2") format("woff2-variations");
	font-weight: 200 900;
	font-display: swap;
	font-stretch: 75% 125%;
}

/* ===== DESIGN SYSTEM VARIABLES ===== */

:root {
	/* Color Scheme Support */
	color-scheme: light dark;

	/* Color Palette - OKLCH für bessere Farbkonsistenz */
	/* Light Theme Saturation/Hue Values */
	--sh-canvas-light: 0 280;
	--sh-canvas-accent-light: 0.07 130;
	--sh-accent-light: 0.18 148;
	
	/* Dark Theme Saturation/Hue Values */
	--sh-canvas-dark: 0.0075 280;
	--sh-canvas-accent-dark: 0.07 210;
	--sh-accent-dark: 0.1 160;

	/* Adaptive Color System */
	--c-canvas: oklch(100% 0 280);
	--c-canvas-subtle: oklch(94% 0 280);
	--c-canvas-medium: oklch(85% 0 280);
	--c-canvas-accent: oklch(94% 0.07 130);
	--c-canvas-accent-medium: oklch(85% 0.07 130);
	--c-primary: oklch(26% 0 280);
	--c-secondary: oklch(52% 0 280);
	--c-prominent: oklch(26% 0 280);
	--c-accent: oklch(50% .18 148);
	--c-accent-medium: oklch(50% 0.18 148);
	--c-warning: oklch(90% 0.11 90);
	--c-alert: oklch(58% 0.17 15);
	--c-dark: oklch(26% 0 280);
	--c-focus: dodgerblue;

	@media (prefers-color-scheme: dark) {
		--c-canvas: oklch(22% 0.0075 280);
		--c-canvas-subtle: oklch(33% 0.0075 280);
		--c-canvas-medium: oklch(45% 0.0075 280);
		--c-canvas-accent: oklch(32% 0.07 210);
		--c-canvas-accent-medium: oklch(45% 0.07 210);
		--c-primary: oklch(98% 0.0075 280);
		--c-secondary: oklch(70% 0.0075 280);
		--c-prominent: oklch(100% 0.0075 280);
		--c-accent: oklch(94% 0.1 160);
		--c-accent-medium: oklch(70% 0.1 160);
		--c-warning: oklch(85% 0.11 90);
		--c-alert: oklch(72% 0.17 15);
		--c-dark: oklch(22% 0.0075 280);
	}

	/* Typography Scale - Fluid Typography */
	--rootsize: clamp(1rem, 1rem + 0.5vi, 1.25rem);
	--f-size-2xs: 0.8rem;
	--f-size-xs: 0.85rem;
	--f-size-s: 0.9rem;
	--f-size-m: 1rem;
	--f-size-l: 1.1rem;
	--f-size-xl: 1.182rem;
	--f-size-2xl: 1.25rem;
	--f-size-3xl: clamp(1.125rem, 1.25rem + 1vi, 2.1rem);

	/* Font Weight System mit calc() für bessere Kontrolle */
	--f-weight: 400;
	--f-weight-lb: calc(var(--f-weight) + 100); /* Light Bold */
	--f-weight-mb: calc(var(--f-weight) + 200); /* Medium Bold */
	--f-weight-bd: calc(var(--f-weight) + 300); /* Bold */
	--f-weight-xb: calc(var(--f-weight) + 400); /* Extra Bold */

	/* Spacing System - Fluid Spacing */
	--gap-m: clamp(1rem, 1.231vw + 0.692rem, 2rem);
	--gap-l: calc(var(--gap-m) * 2);
	--gap-xl: calc(var(--gap-m) * 4);
	--gap-s: calc(var(--gap-m) / 2);
	--gap-xs: calc(var(--gap-m) / 4);
	
	/* Motion System für einheitliche Animationen */
	--motion-duration-fast: 150ms;
	--motion-duration-normal: 250ms;
	--motion-duration-slow: 350ms;

	/* Border Radius System */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-xl: 8px;

}

/* ===== BASE STYLES ===== */

html {
	font-size: var(--rootsize);
	line-height: 1.55;
	scroll-behavior: smooth;
	scroll-padding-top: 3rem;
	hanging-punctuation: first last; /* Bessere Typografie */
	
	@media (width >= 600px) {
		line-height: 1.6;
	}
	
	/* Respektiert User-Präferenzen für reduzierte Bewegung */
	@media (prefers-reduced-motion: reduce) {
		scroll-behavior: auto;
	}
}

/* ===== ACCESSIBILITY HELPERS ===== */

/* Screen Reader Only Content */
.screen-reader,
.non-visual {
	border: 0;
	clip: rect(0, 0, 0, 0);
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	inline-size: 1px;
}

/* Sehr kleine Bildschirme - Progressive Enhancement */
@media (max-width: 370px) {
	.notonsmallscreens {
		border: 0;
		clip: rect(0, 0, 0, 0);
		block-size: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		inline-size: 1px;
	}
}

/* ===== BODY & TYPOGRAPHY ===== */

body {
	background-color: var(--c-canvas);
	color: var(--c-primary);
	font-family: "sans-font", system-ui, sans-serif; /* Fallback für bessere Performance */
	font-weight: var(--f-weight);
	min-block-size: 100vh; /* Logische Eigenschaft */
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.main {
	margin-inline: auto;
	min-height: 65dvh;
}



/* ===== BASE TYPOGRAPHY ===== */

em {
	font-style: italic;
}

strong {
	font-weight: var(--f-weight-bd);
}

/**:focus {
	outline: none;
}
*/

*:focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: 3px;
}

/* ===== MAP & SVG STYLING ===== */

.map__area {
	fill: var(--c-canvas-medium);
	stroke: var(--c-canvas);
}

.map__area-text {
	fill: var(--c-primary);
	font-size: var(--f-size-2xl);
}

.map__traffic .route {
	stroke: var(--c-secondary);
}
	
.map__traffic	.text {
	fill: white;
	font-size: var(--f-size-2xs);
}
	
.map__traffic	.map__rail .label {
	fill: var(--c-alert);
}
	
.map__traffic	.map__cars .label {
	fill: oklch(58% 0.17 260);
}

@media (prefers-color-scheme: dark) {
	.map__traffic	.map__cars .label {
		fill: oklch(50% 0.17 260);
	}
}

/* ===== MOTION PREFERENCES ===== */

/* Respektiert User-Präferenzen für reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}