/* ============================================
   RechenWerk Design System — Clean WordPress Style
   German flag palette: Black, Red, Gold
   ============================================ */

:root {
	/* Brand Colors — German flag inspired */
	--rw-black: #111111;
	--rw-red: #dd0000;
	--rw-red-dark: #b30000;
	--rw-red-light: #fef2f2;
	--rw-gold: #ffce00;
	--rw-gold-dark: #e5b800;

	/* Backgrounds */
	--rw-bg: #ffffff;
	--rw-bg-alt: #f7f7f7;
	--rw-surface: #ffffff;

	/* Borders */
	--rw-border: #e0e0e0;
	--rw-border-strong: #cccccc;

	/* Text */
	--rw-text: #222222;
	--rw-text-secondary: #555555;
	--rw-text-muted: #888888;
	--rw-text-inverse: #ffffff;

	/* Accent — Red as primary brand color */
	--rw-accent: #dd0000;
	--rw-accent-hover: #b30000;
	--rw-accent-light: #fef2f2;
	--rw-accent-text: #ffffff;

	/* Secondary — Gold */
	--rw-warm: #ffce00;
	--rw-warm-hover: #e5b800;
	--rw-warm-text: #111111;

	/* Typography */
	--rw-font-sans: 'Roboto', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
	--rw-font-display: 'Roboto', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

	/* Font sizes — standard, not oversized */
	--rw-fs-xs: 0.75rem;
	--rw-fs-sm: 0.875rem;
	--rw-fs-base: 1rem;
	--rw-fs-md: 1.125rem;
	--rw-fs-lg: 1.375rem;
	--rw-fs-xl: 1.75rem;
	--rw-fs-2xl: 2rem;
	--rw-fs-3xl: 2.5rem;

	/* Line heights */
	--rw-lh-tight: 1.2;
	--rw-lh-normal: 1.5;
	--rw-lh-relaxed: 1.65;

	/* Spacing */
	--rw-space-1: 0.25rem;
	--rw-space-2: 0.5rem;
	--rw-space-3: 0.75rem;
	--rw-space-4: 1rem;
	--rw-space-5: 1.5rem;
	--rw-space-6: 2rem;
	--rw-space-7: 3rem;
	--rw-space-8: 4rem;

	/* Container */
	--rw-container: 1140px;
	--rw-container-narrow: 760px;

	/* Radius — minimal, professional */
	--rw-radius-sm: 3px;
	--rw-radius-md: 5px;
	--rw-radius-lg: 8px;

	/* Transitions — simple */
	--rw-transition: 200ms ease;

	/* Header */
	--rw-header-h: 72px;
}

/* ============================================
   Reset & Base
   ============================================ */

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

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--rw-font-sans);
	font-size: var(--rw-fs-base);
	line-height: var(--rw-lh-normal);
	color: var(--rw-text);
	background: var(--rw-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rw-font-display);
	font-weight: 700;
	line-height: var(--rw-lh-tight);
	color: var(--rw-text);
}

h1 { font-size: var(--rw-fs-3xl); font-weight: 700; }
h2 { font-size: var(--rw-fs-2xl); font-weight: 700; }
h3 { font-size: var(--rw-fs-xl); font-weight: 600; }
h4 { font-size: var(--rw-fs-lg); font-weight: 600; }

p { line-height: var(--rw-lh-relaxed); margin-bottom: 1rem; }

a {
	color: var(--rw-accent);
	text-decoration: none;
	transition: color var(--rw-transition);
}

a:hover { color: var(--rw-accent-hover); }

img, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { padding-left: 1.25rem; }

button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--rw-accent);
	outline-offset: 2px;
}

::selection {
	background: var(--rw-accent);
	color: #fff;
}

/* ============================================
   Utilities
   ============================================ */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.rw-container {
	width: 100%;
	max-width: var(--rw-container);
	margin: 0 auto;
	padding: 0 20px;
}

.rw-container--narrow { max-width: var(--rw-container-narrow); }

.rw-text-center { text-align: center; }
.rw-text-muted { color: var(--rw-text-muted); }

/* Section title */
.rw-section-title {
	font-size: var(--rw-fs-2xl);
	font-weight: 700;
	margin-bottom: 0.5rem;
	line-height: var(--rw-lh-tight);
}

.rw-section-subtitle {
	font-size: var(--rw-fs-md);
	color: var(--rw-text-muted);
	margin-bottom: 2rem;
	max-width: 600px;
}

.rw-tnum {
	font-variant-numeric: tabular-nums;
}