/* =========================================================================
   Barrierefreiheits-Layer (A11y) für gaertnerei-ritter.de
   Wird auf JEDER Seite geladen — keine Editorial-Wrapper-Abhängigkeit.

   - A1: Skip-Link
   - A2: Touch-Target-Größen (≥ 44×44 px)
   - A3: forced-colors (Windows High Contrast)
   - A4: prefers-contrast: more
   - A5: prefers-reduced-transparency
   - A7: scroll-behavior-Fallback ohne Lenis
   ========================================================================= */

/* =========================================================================
   A1 — Skip-Link "Zum Hauptinhalt springen"
   Versteckt visuell, sichtbar bei :focus. Erstes fokussierbares Element.
   ========================================================================= */
.ritter-skip-link {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	padding: .9rem 1.5rem;
	background: var(--ink, #0F2418);
	color: var(--paper, #F5F1E7);
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: .95rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
	border-radius: 0 0 6px 0;
	transform: translateY(-110%);
	transition: transform .2s cubic-bezier(.18,.89,.32,1);
}
.ritter-skip-link:focus,
.ritter-skip-link:focus-visible {
	transform: translateY(0);
	outline: 3px solid var(--amber, #A04500);
	outline-offset: 2px;
}

/* main-Element bekommt tabindex=-1, soll aber keinen Focus-Ring zeigen,
   wenn es nur per Skip-Link fokussiert wird (programmatischer Focus). */
#main-content:focus { outline: none; }
#main-content:focus-visible { outline: none; }

/* =========================================================================
   A2 — Touch-Target ≥ 44×44 px (WCAG 2.5.5 Level AAA)
   Kleine visuelle Elemente bekommen unsichtbares Padding zur Tap-Vergrößerung.
   ========================================================================= */

/* Section-Nav Dots (5×5 px visuell, 24×24 px Tap-Bereich via padding) */
.ritter-section-nav__dot {
	padding: 10px;
	margin: -10px;
	box-sizing: content-box;
}

/* Hero-Scroll-Pfeil */
.ritter-hero__scroll {
	min-height: 44px;
	min-width: 44px;
	padding: .5rem;
}

/* Magnetische Links/Buttons sind groß genug, aber Section-Links checken */
.ritter-link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

/* Live-Dots / Pulse-Indikatoren sind dekorativ, keine Targets */

/* =========================================================================
   A3 — forced-colors (Windows High Contrast Mode)
   Standard-System-Farben als Override, damit Outlines/Borders sichtbar bleiben.
   ========================================================================= */
@media (forced-colors: active) {
	/* Outlines auf System-Farben zurücksetzen */
	.ritter-skip-link:focus,
	.ritter-skip-link:focus-visible,
	.ritter-editorial a:focus-visible,
	.ritter-editorial button:focus-visible,
	.ritter-cta:focus-visible,
	.ritter-section-nav__dot:focus-visible {
		outline: 3px solid CanvasText !important;
		outline-offset: 2px;
	}

	/* Background-Gradient/Grain im Hero abschalten — sonst unsichtbar */
	.ritter-hero__grad,
	.ritter-hero__grain { display: none; }

	/* Dekorative SVGs nicht einfärben */
	.ritter-loader,
	.ritter-bento__map,
	.ritter-jahr__svg svg {
		forced-color-adjust: auto;
	}

	/* Buttons + Links nutzen Link-Farben */
	.ritter-cta,
	.ritter-link {
		border: 1px solid LinkText;
		color: LinkText;
	}

	/* Bento-Overlay-Text gegen Buntfarben absichern */
	.ritter-bento__overlay {
		background: Canvas;
		color: CanvasText;
		border: 1px solid CanvasText;
	}
}

/* =========================================================================
   A4 — prefers-contrast: more
   User mit Kontrast-Bedarf bekommen dunklere Eyebrows + Muted-Text.
   ========================================================================= */
@media (prefers-contrast: more) {
	:root {
		--muted: #3a4540;        /* war #5E6862 → 4.91:1; jetzt ~8.5:1 auf paper */
		--ink-soft: #0a1813;     /* war #1f3329 → noch dunkler für lede */
	}

	/* Eyebrow + Lede bekommen extra-fettere Schrift */
	.ritter-eyebrow {
		font-weight: 700;
		letter-spacing: .20em;
	}

	/* Borders deutlicher */
	.ritter-footer-editorial,
	.ritter-spread,
	.ritter-bento__cell {
		border-color: var(--ink, #0F2418) !important;
	}

	/* Focus-Ring dicker */
	.ritter-editorial a:focus-visible,
	.ritter-editorial button:focus-visible {
		outline-width: 3px;
		outline-offset: 4px;
	}
}

/* =========================================================================
   A5 — prefers-reduced-transparency
   User mit Transparenz-Bedarf bekommen solide Backgrounds, keine blur-Effekte.
   ========================================================================= */
@media (prefers-reduced-transparency: reduce) {
	/* Reading-Progress-Label */
	.ritter-section-progress__label {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--paper, #F5F1E7) !important;
		border: 1px solid var(--ink, #0F2418);
	}
	.ritter-section-progress.on-dark .ritter-section-progress__label {
		background: var(--ink, #0F2418) !important;
		border: 1px solid var(--paper, #F5F1E7);
	}

	/* Header-Gradient/Overlay ablösen */
	.ritter-hero__grad { opacity: 1; background: transparent; }

	/* Andere blur-Stellen */
	.ritter-bento__overlay {
		background: color-mix(in srgb, var(--ink, #0F2418) 92%, transparent);
	}
}

/* =========================================================================
   A7 — scroll-behavior-Fallback
   Wenn Lenis nicht startet (no-JS), bekommen Anchor-Links sanftes Smooth-Scroll.
   Wenn reduced-motion → harter Sprung (gewollt).
   ========================================================================= */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* =========================================================================
   Zusätzlich: Focus-Ring auf ALLEN Seiten (auch außerhalb .ritter-editorial)
   ========================================================================= */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--amber, #A04500);
	outline-offset: 3px;
}

/* Screen-Reader-Only Helper (wird derzeit nicht genutzt, aber bereitgestellt) */
.ritter-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;
}