/**
 * base.css – Basis-Styles des Mindweb Themes.
 *
 * Inhalt:
 *   1. :root – CSS Custom Properties (Fallbacks für Elementor-V4-Variablen)
 *   2. Moderner CSS-Reset
 *   3. HTML5-Formular-Elemente (App-Like, auf Basis der V4-Variablen)
 *   4. View Transitions
 *   5. Reduzierte Bewegung
 */

/* -------------------------------------------------------------------------
 * 1. :root – Custom Properties
 *
 * Die Variablen --color-* und --spacing-* sind Fallbacks für die
 * gleichnamigen Elementor-V4-Variablen. Werden sie im Elementor-Editor
 * (V4 Variables) gepflegt, überschreiben die Editor-Werte diese Defaults
 * (Kit-CSS lädt nach diesem Stylesheet – Enqueue-Priorität 15 < 20).
 * Projektspezifische Anpassung: Werte hier oder per :root-Override ändern.
 * ---------------------------------------------------------------------- */

:root {
	/* Typografie – fluide Basis-Schriftgröße (16px → 18px zwischen Mobile und Desktop) */
	--font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--line-height-base: 1.5;
	--font-primary: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

	/* Layout */
	--content-width: 72rem;

	/* Anker-Offset für Sticky Header – pro Projekt an die Header-Höhe anpassen */
	--scroll-offset: 6rem;

	/* Farben (Fallbacks für Elementor-V4-Variablen) */
	--color-primary: #2563eb;
	--color-secondary: #64748b;
	--color-text: #1e293b;
	--color-background: #ffffff;
	--color-border: #d3dbe4;

	/* Abstände (Fallbacks für Elementor-V4-Variablen).
	 * rem-basiert: Die Pixelwerte gelten bei 16px-Root und wachsen mit der
	 * fluiden Root-Schriftgröße oben bis +12,5 % (18px-Root) mit. */
	--spacing-1: 0.25rem;  /*  4px @16px Root */
	--spacing-2: 0.5rem;   /*  8px */
	--spacing-3: 0.75rem;  /* 12px */
	--spacing-4: 1rem;     /* 16px */
	--spacing-5: 1.5rem;   /* 24px */
	--spacing-6: 2rem;     /* 32px */

	/* App-Look für Formulare.
	 * Statische Fallbacks für Browser ohne color-mix() – die abgeleiteten
	 * Varianten im @supports-Block unten überschreiben sie in modernen
	 * Browsern und folgen dann automatisch den Farb-Variablen. */
	--radius: 0.625rem;
	--radius-sm: 0.375rem;
	--control-bg: #f7f8fa;
	--control-border-hover: #8dabe7;
	--shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.25);
	--transition: 160ms ease;

	/* Select-Chevron als übersteuerbares Token. Die Farbe (stroke=%2364748b,
	 * Default von --color-secondary) ist im data-URI fixiert – bei Rebrands
	 * oder dunklen Controls dieses Token pro Projekt überschreiben. */
	--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

/* Auf :root UND body deklariert: Custom Properties werden auf dem Element
 * aufgelöst, auf dem sie deklariert sind. Setzt Elementor die Farb-Variablen
 * auf einer Body-/Kit-Klasse (statt :root), folgen die Ableitungen nur dank
 * der body-Deklaration. Projekt-Overrides dieser drei Tokens deshalb
 * ebenfalls auf ':root, body' setzen. */
@supports (color: color-mix(in srgb, red, red)) {
	:root,
	body {
		--control-bg: color-mix(in srgb, var(--color-border) 18%, var(--color-background));
		--control-border-hover: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
		--shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
	}
}

/* -------------------------------------------------------------------------
 * 2. Moderner CSS-Reset
 * ---------------------------------------------------------------------- */

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

html {
	font-size: var(--font-size-base);
	font-family: var(--font-primary);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Fängt den 100vw-Scrollbar-Überstand von .alignfull ab (clip statt
	 * hidden, damit position: sticky funktionsfähig bleibt). */
	overflow-x: clip;
}

/* Anker-Ziele nicht unter Sticky Headern verschwinden lassen.
 * Bewusst KEIN scroll-behavior: smooth – Elementor animiert Anker-Scrolls
 * selbst; CSS-Smooth-Scrolling würde damit kollidieren. */
:target {
	scroll-margin-top: var(--scroll-offset);
}

::selection {
	background-color: var(--color-primary);
	color: var(--color-background);
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
	margin: 0;
}

body {
	min-height: 100vh;
	line-height: var(--line-height-base);
	color: var(--color-text);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

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

/* Das [hidden]-Attribut gewinnt gegen die display-Deklarationen oben
 * (Author-Styles schlagen sonst das UA-Stylesheet). hidden="until-found"
 * ausgenommen: Es muss content-visibility:hidden bleiben, damit
 * Seitensuche/Anker den Inhalt aufklappen können. */
[hidden]:not([hidden="until-found"]) {
	display: none !important;
}

iframe,
embed,
object {
	max-width: 100%;
}

a {
	color: inherit;
}

table {
	border-collapse: collapse;
}

/* -------------------------------------------------------------------------
 * 3. HTML5-Formular-Elemente – App-Like
 *
 * Neutraler, moderner Look für alle nativen Formular-Elemente auf Basis
 * der Elementor-V4-Variablen (color-*, spacing-*). Elementor-eigene
 * Widgets bringen ihr eigenes Styling mit und bleiben unberührt.
 * ---------------------------------------------------------------------- */

button,
input,
optgroup,
select,
textarea {
	margin: 0;
	font: inherit;
	color: inherit;
}

label,
legend {
	display: inline-block;
	margin-block-end: var(--spacing-1);
	font-weight: 500;
	color: var(--color-text);
}

fieldset {
	margin: 0;
	padding: var(--spacing-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

legend {
	padding-inline: var(--spacing-2);
	margin-block-end: 0;
}

/* Textartige Eingabefelder ---------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
textarea,
select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: var(--spacing-2) var(--spacing-3);
	background-color: var(--control-bg);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="month"]:hover,
input[type="week"]:hover,
input[type="time"]:hover,
textarea:hover,
select:hover {
	border-color: var(--control-border-hover);
}

input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="url"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="number"]:focus-visible,
input[type="search"]:focus-visible,
input[type="password"]:focus-visible,
input[type="date"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="month"]:focus-visible,
input[type="week"]:focus-visible,
input[type="time"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
	/* Transparent statt none: Im Forced-Colors-Modus (Windows-Kontrast)
	 * wird box-shadow nicht gerendert, die transparente Outline dafür in
	 * Systemfarbe gezeichnet – der Fokus bleibt sichtbar. */
	outline: 2px solid transparent;
	outline-offset: 1px;
	background-color: var(--color-background);
	border-color: var(--color-primary);
	box-shadow: var(--shadow-focus);
}

::placeholder {
	color: var(--color-secondary);
	opacity: 0.8;
}

textarea {
	min-height: calc(var(--spacing-6) * 3);
	resize: vertical;
}

/* Select mit eigenem Chevron */
select:not([multiple]):not([size]) {
	padding-inline-end: calc(var(--spacing-3) * 2 + 1em);
	background-image: var(--select-chevron);
	background-repeat: no-repeat;
	background-position: right var(--spacing-3) center;
	background-size: 1em;
}

/* background-position kennt keine logischen Keywords – RTL manuell spiegeln
 * (das logische padding-inline-end oben flippt von selbst). */
[dir="rtl"] select:not([multiple]):not([size]) {
	background-position: left var(--spacing-3) center;
}

/* Suchfeld: native Dekoration entfernen */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* Number-Spinner ausblenden – Firefox (Alias + Standard-Property) und
 * Chrome/Safari (Pseudo-Elemente) brauchen getrennte Wege. */
input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Checkbox & Radio ------------------------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
	width: 1.125em;
	height: 1.125em;
	margin: 0;
	vertical-align: middle;
	accent-color: var(--color-primary);
	cursor: pointer;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 2px solid transparent; /* Forced-Colors-Fallback, s. o. */
	outline-offset: 1px;
	box-shadow: var(--shadow-focus);
	border-radius: var(--radius-sm);
}

input[type="radio"]:focus-visible {
	border-radius: 50%;
}

/* Range ------------------------------------------------------------------ */

input[type="range"] {
	width: 100%;
	accent-color: var(--color-primary);
	cursor: pointer;
}

input[type="range"]:focus-visible {
	outline: 2px solid transparent; /* Forced-Colors-Fallback, s. o. */
	outline-offset: 1px;
	box-shadow: var(--shadow-focus);
	border-radius: var(--radius);
}

/* Datei-Upload ------------------------------------------------------------ */

input[type="file"] {
	width: 100%;
	padding: var(--spacing-2);
	color: var(--color-secondary);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius);
	background-color: var(--control-bg);
	cursor: pointer;
}

input[type="file"]::file-selector-button {
	margin-inline-end: var(--spacing-3);
	padding: var(--spacing-1) var(--spacing-3);
	border: 0;
	border-radius: var(--radius-sm);
	background-color: var(--color-primary);
	color: var(--color-background);
	font: inherit;
	cursor: pointer;
	transition: opacity var(--transition);
}

input[type="file"]::file-selector-button:hover {
	opacity: 0.85;
}

/* Farbwähler --------------------------------------------------------------- */

input[type="color"] {
	inline-size: calc(var(--spacing-6) * 1.5);
	block-size: var(--spacing-6);
	padding: var(--spacing-1);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--control-bg);
	cursor: pointer;
}

/* Buttons ------------------------------------------------------------------ */

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
	appearance: none;
	-webkit-appearance: none;
	display: inline-block;
	padding: var(--spacing-2) var(--spacing-4);
	background-color: var(--color-primary);
	color: var(--color-background);
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-weight: 500;
	line-height: var(--line-height-base);
	text-align: center;
	cursor: pointer;
	transition: opacity var(--transition), box-shadow var(--transition), transform var(--transition);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
	opacity: 0.85;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
	transform: scale(0.98);
}

button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible {
	outline: 2px solid transparent; /* Forced-Colors-Fallback, s. o. */
	outline-offset: 1px;
	box-shadow: var(--shadow-focus);
}

/* Deaktivierte Elemente ----------------------------------------------------- */

input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Progress & Meter ----------------------------------------------------------- */

progress,
meter {
	inline-size: 100%;
	block-size: var(--spacing-2);
	accent-color: var(--color-primary);
}

progress {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	border-radius: var(--radius);
	background-color: var(--control-bg);
	overflow: hidden;
}

progress::-webkit-progress-bar {
	background-color: var(--control-bg);
	border-radius: var(--radius);
}

progress::-webkit-progress-value {
	background-color: var(--color-primary);
	border-radius: var(--radius);
}

progress::-moz-progress-bar {
	background-color: var(--color-primary);
	border-radius: var(--radius);
}

/* -------------------------------------------------------------------------
 * 4. View Transitions (Cross-Document, MPA)
 * ---------------------------------------------------------------------- */

@view-transition {
	navigation: auto;
}

/* -------------------------------------------------------------------------
 * 5. Reduzierte Bewegung (Barrierefreiheit)
 *
 * Nutzer mit aktivierter Bewegungsreduzierung bekommen weder
 * View Transitions noch spürbare Animationen.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	/* Gürtel + Hosenträger: Die ::view-transition-Pseudos leben in einem
	 * eigenen Baum und werden vom *-Selektor unten nicht erfasst – falls
	 * ein Browser das verschachtelte @view-transition ignoriert, stoppt
	 * diese Regel die Cross-Fade-Animation trotzdem. */
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}