/*
 * RisingWeb Base – Basis-Styles
 *
 * Alle Farben, Schriften und Radien kommen als CSS-Variablen aus
 * config/brand.php (--rw-color-*, --rw-font-*, --rw-radius-*).
 *
 * Die rw-Klassen trägst du in Divi im Feld „CSS-Klasse“ eines Moduls,
 * einer Zeile oder eines Abschnitts ein (Erweitert → CSS-ID & Klassen).
 */

/* ---------- Skala (für alle Marken gleich) ---------- */
:root {
	--rw-space-1: 4px;
	--rw-space-2: 8px;
	--rw-space-3: 16px;
	--rw-space-4: 24px;
	--rw-space-5: 32px;
	--rw-space-6: 48px;
	--rw-space-7: 64px;
	--rw-space-8: 96px;

	--rw-text-sm: 0.875rem;
	--rw-text-base: 1.0625rem;
	--rw-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--rw-text-h3: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
	--rw-text-h2: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
	--rw-text-h1: clamp(2.25rem, 1.8rem + 2.2vw, 3.75rem);

	--rw-shadow: 0 1px 2px rgba(42, 31, 69, 0.06), 0 8px 24px rgba(42, 31, 69, 0.06);
}

/* ---------- Grundtypografie ---------- */
body {
	font-family: var(--rw-font-body);
	font-size: var(--rw-text-base);
	line-height: 1.65;
	color: var(--rw-color-text);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rw-font-heading);
	color: var(--rw-color-text);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

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

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

/* Sichtbarer Fokus für Tastaturnutzer */
:focus-visible {
	outline: 3px solid var(--rw-color-accent-strong);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Hilfsklassen für Divi ---------- */

/* Akzentwort in Fraunces kursiv, z. B. „Websites, die <span class="rw-serif">mitarbeiten</span>“ */
.rw-serif {
	font-family: var(--rw-font-accent);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
}

/* Kleine Überzeile über Headlines */
.rw-eyebrow,
.rw-eyebrow p {
	font-size: var(--rw-text-sm);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rw-color-accent-strong);
}

/* Buttons: Klasse am Divi-Button-Modul oder an einem Link */
.rw-btn.et_pb_button,
.rw-btn .et_pb_button,
a.rw-btn {
	display: inline-block;
	font-family: var(--rw-font-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	padding: 14px 24px;
	border: 2px solid var(--rw-color-accent);
	border-radius: var(--rw-radius-sm);
	background: var(--rw-color-accent);
	color: var(--rw-color-on-accent);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rw-btn.et_pb_button:hover,
.rw-btn .et_pb_button:hover,
a.rw-btn:hover {
	padding: 14px 24px;
	background: var(--rw-color-accent-strong);
	border-color: var(--rw-color-accent-strong);
	color: #fff;
}

/* Zweitbutton: Kontur */
.rw-btn--outline.et_pb_button,
.rw-btn--outline .et_pb_button,
a.rw-btn--outline {
	background: transparent;
	border-color: var(--rw-color-primary);
	color: var(--rw-color-primary);
}

.rw-btn--outline.et_pb_button:hover,
.rw-btn--outline .et_pb_button:hover,
a.rw-btn--outline:hover {
	background: var(--rw-color-primary);
	border-color: var(--rw-color-primary);
	color: var(--rw-color-background);
}

/* Divi-Pfeil-Icon an Buttons ausblenden, damit das Padding stabil bleibt */
.rw-btn.et_pb_button::after,
.rw-btn .et_pb_button::after {
	display: none;
}

/* Karte, z. B. für Leistungen oder Pakete */
.rw-card {
	background: var(--rw-color-surface);
	border: 1px solid var(--rw-color-border);
	border-radius: var(--rw-radius-md);
	padding: var(--rw-space-5);
	box-shadow: var(--rw-shadow);
}

/* Abschnitte */
.rw-section--light {
	background-color: var(--rw-color-background);
}

.rw-section--dark {
	background-color: var(--rw-color-primary);
	color: var(--rw-color-background);
}

.rw-section--dark h1,
.rw-section--dark h2,
.rw-section--dark h3,
.rw-section--dark h4,
.rw-section--dark p {
	color: var(--rw-color-background);
}

.rw-section--dark a:not(.rw-btn):not(.et_pb_button) {
	color: var(--rw-color-accent);
}

/* Nebentext */
.rw-muted,
.rw-muted p {
	color: var(--rw-color-muted);
}

/* ---------- Bewegung reduzieren, wenn im System eingestellt ---------- */
@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;
	}
}