/* =====================================================================
   AGENTUR DESIGNSYSTEM
   ---------------------------------------------------------------------
   Einzige Quelle für alle Designwerte.
   Pro Projekt werden NUR die Werte im :root-Block angepasst –
   alle Patterns referenzieren ausschließlich diese Variablen.

   STATUS: Platzhalter-Werte (neutral).
   Finale Werte folgen nach Klärung der Signal-Iduna-CI-Vorgaben
   und der Designrichtungs-Entscheidung (Phase 2).
   ===================================================================== */

:root {
	/* ---- Farben ------------------------------------------------- */
	--c-primary:        #1a2e4a;   /* Hauptfarbe (Platzhalter)        */
	--c-primary-dark:   #12213a;
	--c-accent:         #b07a3f;   /* Akzent (Platzhalter)            */
	--c-accent-soft:    #f3e9dc;
	--c-text:           #22272e;
	--c-text-muted:     #5a6472;
	--c-bg:             #ffffff;
	--c-bg-alt:         #f6f7f9;
	--c-border:         #e3e6ea;
	--c-success:        #2e7d4f;
	--c-error:          #b3362b;

	/* ---- Typografie ---------------------------------------------- */
	--f-heading:        Georgia, 'Times New Roman', serif;      /* Platzhalter */
	--f-body:           -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Platzhalter */

	/* Fluide Größenskala (mobil → Desktop) */
	--fs-xs:            0.8125rem;
	--fs-sm:            0.9375rem;
	--fs-base:          clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--fs-lg:            clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
	--fs-xl:            clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
	--fs-2xl:           clamp(1.75rem, 1.4rem + 1.8vw, 2.625rem);
	--fs-3xl:           clamp(2.25rem, 1.7rem + 2.8vw, 3.5rem);

	--lh-tight:         1.15;
	--lh-base:          1.6;

	/* ---- Abstände ------------------------------------------------ */
	--sp-1:             0.25rem;
	--sp-2:             0.5rem;
	--sp-3:             1rem;
	--sp-4:             1.5rem;
	--sp-5:             2.5rem;
	--sp-6:             4rem;
	--sp-section:       clamp(3.5rem, 2.5rem + 5vw, 7rem);  /* vertikaler Section-Abstand */

	/* ---- Layout -------------------------------------------------- */
	--w-content:        72rem;     /* max. Inhaltsbreite               */
	--w-narrow:         46rem;     /* Textspalten / Formulare          */

	/* ---- Form ---------------------------------------------------- */
	--radius:           0.375rem;  /* Platzhalter – Teil der Designrichtung */
	--radius-lg:        0.75rem;
	--shadow-sm:        0 1px 3px rgba(20, 30, 45, 0.08);
	--shadow-md:        0 6px 24px rgba(20, 30, 45, 0.10);

	/* ---- Motion -------------------------------------------------- */
	--t-fast:           160ms;
	--t-base:           320ms;
	--t-reveal:         480ms;
	--ease:             cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =====================================================================
   BASIS
   ===================================================================== */

body {
	font-family: var(--f-body);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--c-text);
}

h1, h2, h3, h4 {
	font-family: var(--f-heading);
	line-height: var(--lh-tight);
	color: var(--c-primary);
}

/* =====================================================================
   SECTION-GRUNDGERÜST
   Jedes Pattern nutzt: <section class="ds-section"> <div class="ds-container">
   ===================================================================== */

.ds-section {
	padding-block: var(--sp-section);
}

.ds-section--alt {
	background: var(--c-bg-alt);
}

.ds-section--primary {
	background: var(--c-primary);
	color: #fff;
}

.ds-section--primary h1,
.ds-section--primary h2,
.ds-section--primary h3 {
	color: #fff;
}

.ds-container {
	max-width: var(--w-content);
	margin-inline: auto;
	padding-inline: var(--sp-4);
}

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

/* =====================================================================
   BUTTONS
   ===================================================================== */

.ds-btn {
	display: inline-block;
	padding: 0.875rem 1.75rem;
	font-family: var(--f-body);
	font-size: var(--fs-base);
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--radius);
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform var(--t-fast) var(--ease),
	            box-shadow var(--t-fast) var(--ease),
	            background-color var(--t-fast) var(--ease);
}

.ds-btn--primary {
	background: var(--c-accent);
	color: #fff;
}

.ds-btn--primary:hover,
.ds-btn--primary:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.ds-btn--ghost {
	background: transparent;
	color: var(--c-primary);
	border-color: var(--c-primary);
}

.ds-btn--ghost:hover,
.ds-btn--ghost:focus-visible {
	background: var(--c-primary);
	color: #fff;
}

/* Sichtbarer Fokus für Tastaturnutzer (WCAG) */
:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 2px;
}

/* =====================================================================
   MOTION-SYSTEM
   Nutzung: data-reveal auf beliebigen Elementen.
   motion.js setzt .is-visible, sobald das Element ins Sichtfeld scrollt.
   Zahlen: <span data-count="1500"> zählt hoch.
   ===================================================================== */

[data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--t-reveal) var(--ease),
	            transform var(--t-reveal) var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* Gestaffelte Reveals: --reveal-delay pro Element setzen,
   z.B. style="--reveal-delay: 120ms" */

/* WICHTIG: Nutzer mit reduzierter Bewegung sehen alles sofort statisch. */
@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ds-btn {
		transition: none;
	}
}