/* =========================================================
   Apotheke Rhein-Waal — Stylesheet
   Mobile First · System-Schriften · WCAG AA
   ========================================================= */

/* --- 1. Design-Tokens (Original-Farben) ---------------- */
:root {
	/* Babyblau — Top-Streifen (aus Original-CSS: #BEE0EB80) */
	--c-blue-bar:    #BEE0EB;
	--c-blue-bar-50: #DEF0F5;
	--c-blue-bar-soft: rgba(190, 224, 235, 0.5);

	/* Mintgrün — unterer Streifen (aus Original-CSS: #60CEB361) */
	--c-mint:        #60CEB3;
	--c-mint-soft:   rgba(96, 206, 179, 0.38);
	--c-mint-bg:     #E2F5EE;

	/* Apothekengrün — Navigationsleiste. Werte WCAG-2.1-AA-tauglich für weißen Text:
	   #3D8B3D auf white = 4.2:1 (large bold), #2E7D32 auf white = 4.6:1 (regular).
	   green-900 (#1B5E20) ergänzt für Hover-Stufe und 7:1+ Kontrast (AAA). */
	--c-green-50:   #EAF7EC;
	--c-green-100:  #C9EAD0;
	--c-green-300:  #8FCF9A;
	--c-green-500:  #5FBA5F;
	--c-green-600:  #4FA84F;
	--c-green-700:  #3D8B3D;
	--c-green-800:  #2E7D32;
	--c-green-900:  #1B5E20;

	/* Steinberg-Blau (für CTAs / Akzente) */
	--c-blue-50:   #E8F2F9;
	--c-blue-100:  #C7DEF0;
	--c-blue-300:  #79AFD3;
	--c-blue-500:  #3D8DB8;
	--c-blue-600:  #1E6FA8;
	--c-blue-700:  #145A8C;
	--c-blue-800:  #0D416A;

	/* Akzent für „Herz" / Notdienst */
	--c-accent:       #E74A5C;
	--c-accent-600:   #C8334A;

	/* Primary-Aliase
	   Kontrast-Strategie:
	   - --c-primary-600 wird als Default-Linkfarbe + CTA-Text auf weißem Grund verwendet → muss ≥ 4.5:1.
	     green-800 (#2E7D32) auf #fff = 4.59:1 ✔
	   - --c-primary-700 ist Hover-Stufe → green-900 (#1B5E20) auf #fff = 7.4:1 ✔ AAA
	   --c-primary (=green-500) bleibt für DEKORATIVE Elemente (Backgrounds, Borders, Icons),
	   nicht für Text auf Weiß. */
	--c-primary:      var(--c-green-500);
	--c-primary-600:  var(--c-green-800);
	--c-primary-700:  var(--c-green-900);
	--c-primary-50:   var(--c-green-50);
	--c-primary-100:  var(--c-green-100);

	/* Hintergründe — warmes Weiß */
	--c-bg:           #FFFFFF;
	--c-surface:      #FFFFFF;
	--c-surface-2:    #F6FAF7;
	--c-surface-3:    #EDF5EF;

	--c-text:         #1A2620;
	--c-text-muted:   #555F58;
	--c-line:         #E2EAE4;

	--c-success:      #0B7A3E;
	--c-warn:         #C7861E;
	--c-danger:       #B22222;

	--c-focus:        #1B6FE0;

	/* Typografie — System-Stack, kein Webfont */
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

	--fs-xs:   0.8125rem;  /* 13 */
	--fs-sm:   0.9375rem;  /* 15 */
	--fs-base: 1.0625rem;  /* 17 — bewusst groß für ältere Zielgruppe */
	--fs-md:   1.1875rem;  /* 19 */
	--fs-lg:   1.4375rem;  /* 23 */
	--fs-xl:   1.875rem;   /* 30 */
	--fs-2xl:  2.375rem;   /* 38 */
	--fs-3xl:  3rem;       /* 48 */
	--fs-4xl:  3.75rem;    /* 60 */

	--lh-tight:  1.2;
	--lh-snug:   1.35;
	--lh-base:   1.65;

	/* 4-px Spacing-Grid */
	--s-0:  0;
	--s-1:  4px;
	--s-2:  8px;
	--s-3:  12px;
	--s-4:  16px;
	--s-5:  20px;
	--s-6:  24px;
	--s-7:  32px;
	--s-8:  40px;
	--s-9:  48px;
	--s-10: 64px;
	--s-11: 80px;
	--s-12: 96px;
	--s-13: 128px;

	/* Radien & Schatten */
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-pill: 999px;

	--sh-sm: 0 1px 2px rgba(20, 32, 26, .06);
	--sh-md: 0 6px 18px -6px rgba(20, 32, 26, .12), 0 2px 6px rgba(20, 32, 26, .05);
	--sh-lg: 0 24px 48px -16px rgba(11, 122, 62, .25), 0 6px 14px rgba(20, 32, 26, .07);

	/* Layout */
	--container: 1180px;
	--gutter: clamp(16px, 4vw, 32px);

	--ease:        cubic-bezier(.32,.72,.32,1);
	--dur-fast:    140ms;
	--dur:         220ms;
	--dur-slow:    420ms;
}

/* Kein automatischer Dark-Mode — der Marke fehlt eine Dark-Logo-Version. */

/* --- 2. Reset & Basis ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
	scroll-behavior: smooth;
	/* WCAG 2.2 SC 2.4.11 — Sticky-Topbar+Nav darf den Fokus nicht verdecken. */
	scroll-padding-top: calc(var(--topbar-h, 40px) + 64px);
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--c-text);
	background: var(--c-bg);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: var(--c-primary-600); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--c-primary-700); }

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: var(--lh-tight);
	letter-spacing: -.015em;
	text-wrap: balance;
}
p { text-wrap: pretty; }

:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

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

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
	position: fixed;
	inset: 8px auto auto 8px;
	z-index: 1000;
	background: var(--c-text);
	color: #fff;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-sm);
	transform: translateY(-200%);
	transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: #fff; }

.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.muted-text { color: var(--c-text-muted); }

/* --- 3. Top-Bar (babyblauer Streifen, sticky) --------- */
.topbar {
	background: var(--c-blue-bar);
	color: var(--c-blue-800);
	font-size: var(--fs-sm);
	position: sticky;
	top: 0;
	z-index: 60;
	box-shadow: 0 1px 0 rgba(20,90,140,.08);
}
/* Mobile-Override für die Nav-Leiste folgt unten direkt nach .primary-nav-wrap,
   damit die CSS-Cascade die Default-Sticky-Regel überschreibt. */
.topbar a { color: var(--c-blue-800); }
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	padding-block: var(--s-2);
	flex-wrap: wrap;
}
.topbar__status {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	margin: 0;
}
.status-dot {
	display: inline-block;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--c-warn);
	box-shadow: 0 0 0 0 currentColor;
}
.status-dot--open  { background: var(--c-green-600); box-shadow: 0 0 0 4px rgba(95,186,95,.25); }
.status-dot--closed{ background: var(--c-accent); box-shadow: 0 0 0 4px rgba(231,74,92,.18); }
.status-text { font-weight: 600; }
/* Sonder-Hinweis in der Topbar (z. B. "Heiligabend", "Brückentag") — auffällig in Akzent-Rot */
.status-note {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	margin-left: var(--s-2);
	background: var(--c-accent);
	color: #fff;
	border-radius: var(--r-pill);
	font-weight: 700;
	font-size: var(--fs-xs);
	letter-spacing: .03em;
	text-transform: uppercase;
}
/* opacity entfernt — reduziert sonst den effektiven Kontrast (Lighthouse-Warnung). */
.topbar__actions {
	display: inline-flex;
	align-items: center;
	gap: var(--s-4);
	flex-wrap: wrap;
}
.topbar__notdienst,
.topbar__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-3);
	border-radius: var(--r-sm);
	text-decoration: none;
	/* WCAG 2.2 SC 2.5.8 (24px AA, 44px AAA-Empfehlung). 44px für Apotheken-Zielgruppe. */
	min-height: 44px;
}
.topbar__notdienst:hover,
.topbar__phone:hover {
	background: rgba(255,255,255,.4);
	color: var(--c-blue-800);
}
.topbar__phone { font-weight: 700; letter-spacing: .01em; }
/* WCAG-AA-Kontrast: blue-800 statt blue-700 auf babyblauer Topbar (7.4:1 statt 5.3:1). */
.status-hours { color: var(--c-blue-800); }

/* --- 4. Site-Header (Logo zentriert, scrollt mit weg) -- */
.site-header {
	background: var(--c-bg);
	position: relative;
	z-index: 30;
}
.site-header__inner {
	display: grid;
	place-items: center;
	padding-block: var(--s-6);
}
/* Header-Logo — Selector auf den Header eingeschränkt, sonst kollidiert er
   mit den Sortiment-Karten weiter unten, die ebenfalls .brand nutzen. */
.site-header .brand,
.custom-logo-link {
	display: inline-flex;
	text-decoration: none;
	line-height: 0;
}
.site-header .brand__logo,
.custom-logo {
	display: block;
	height: clamp(64px, 9vw, 110px);
	width: auto;
	max-width: 100%;
	transition: opacity var(--dur) var(--ease);
}
.site-header .brand:hover .brand__logo,
.custom-logo-link:hover .custom-logo { opacity: .85; }

/* Grüne Navigations-Leiste — Vollbreite, sticky unter Topbar.
   green-700 statt green-500: Kontrast weiß auf grün steigt von 2.4:1 auf 4.2:1 (AA für 14pt+ bold). */
.primary-nav-wrap {
	background: var(--c-green-700);
	color: #fff;
	position: sticky;
	top: var(--topbar-h, 40px);
	z-index: 50;
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.primary-nav-wrap__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
}

/* Mobile-Override: weder Topbar noch Nav-Leiste sticky.
   MUSS nach der Default-.primary-nav-wrap-Regel stehen, damit die Cascade greift. */
@media (max-width: 720px) {
	.topbar          { position: static; }
	.primary-nav-wrap { position: static; top: auto; }
	html             { scroll-padding-top: 0; }
}

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	color: #fff;
	font-weight: 700;
	font-size: var(--fs-md); /* 19px — qualifiziert als "large bold" (≥14pt bold), damit weiß-auf-green-700 (4.2:1) als WCAG AA durchgeht. */
	min-height: 56px;
	width: 100%;
	justify-content: center;
}
.nav-toggle:hover { background: var(--c-green-800); }
.nav-toggle__icon { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; }
.nav-toggle__icon svg { position: absolute; inset: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.nav-toggle__close { opacity: 0; transform: rotate(-90deg) scale(.8); }
[aria-expanded="true"] .nav-toggle__open { opacity: 0; transform: rotate(90deg) scale(.8); }
[aria-expanded="true"] .nav-toggle__close { opacity: 1; transform: rotate(0) scale(1); }

.primary-nav {
	display: none;
	width: 100%;
}

@media (max-width: 959px) {
	.primary-nav[data-open="true"] {
		display: block;
		background: var(--c-green-800);
		padding: var(--s-2) 0 var(--s-3);
		animation: slide-down var(--dur) var(--ease);
		max-height: calc(100vh - var(--topbar-h, 40px) - 56px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
}

@keyframes slide-down {
	from { transform: translateY(-8px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

.nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}
.nav__item { position: relative; }
.nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	text-decoration: none;
	color: #fff;
	font-weight: 700; /* WCAG: 14pt+ bold zählt als "large text" → 3:1 Kontrast genügt. */
	font-size: var(--fs-md);
	min-height: 44px;
	position: relative;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible {
	background: var(--c-green-800);
	color: #fff;
}
.nav__link[aria-current="page"] {
	background: var(--c-green-800);
	color: #fff;
	box-shadow: inset 0 -3px 0 rgba(255,255,255,.85); /* aktiver Underline-Indikator */
}
.nav__chev { transition: transform var(--dur) var(--ease); color: rgba(255,255,255,.85); }
.nav__toggle-sub {
	position: absolute;
	right: var(--s-2);
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--r-pill);
	color: #fff;
}
.nav__toggle-sub:hover { background: rgba(255,255,255,.15); }
.nav__toggle-sub[aria-expanded="true"] svg { transform: rotate(90deg); }

.submenu {
	list-style: none;
	margin: 0;
	padding: var(--s-1) 0 var(--s-1) var(--s-4);
	display: none;
}
.menu-item-has-children > .nav__toggle-sub[aria-expanded="true"] + .submenu,
.menu-item-has-children[data-open="true"] > .submenu { display: block; }
.submenu .nav__link { font-weight: 500; }

/* Desktop-Nav (zentriert, horizontale Pillen) */
@media (min-width: 960px) {
	.nav-toggle { display: none; }
	.primary-nav { display: flex; justify-content: center; }
	.nav { flex-direction: row; align-items: center; gap: var(--s-1); }
	.nav__link { padding: var(--s-3) var(--s-5); }
	.nav > .menu-item-has-children { position: relative; }
	.nav > .menu-item-has-children .nav__chev { display: inline-block; }
	.nav__toggle-sub { display: none; }
	.submenu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 240px;
		max-width: calc(100vw - 32px);
		background: var(--c-green-800);
		padding: var(--s-1) 0;
		display: none;
		z-index: 30;
		box-shadow: var(--sh-md);
		animation: nav-fade var(--dur) var(--ease);
	}
	@keyframes nav-fade {
		from { opacity: 0; transform: translateY(-4px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	.menu-item-has-children:hover > .submenu,
	.menu-item-has-children:focus-within > .submenu { display: block; }
	.submenu .nav__link {
		padding: var(--s-2) var(--s-5);
		font-size: var(--fs-base);
		font-weight: 400;
	}
	.submenu .nav__link:hover,
	.submenu .nav__link:focus-visible { background: rgba(255,255,255,.12); }
}

/* --- 5a. Hero — vollbreites Foto, kein Overlay --------- */
.hero {
	background: var(--c-blue-bar-50);
}
.hero__photo {
	margin: 0;
	display: block;
	width: 100%;
	aspect-ratio: 1300 / 618;
	min-height: 280px;
	max-height: 72vh;
	overflow: hidden;
}
.hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
	display: block;
}
@media (max-width: 720px) {
	.hero__photo { aspect-ratio: 4 / 3; max-height: none; }
}

/* --- 5b. Hero-Banner (clean, ruhig, viel Luft) -------- */
.hero-banner {
	background: var(--c-bg);
	color: var(--c-text);
	padding-block: var(--s-11) var(--s-12);
	text-align: center;
}
.hero-banner__inner {
	max-width: 760px;
	text-align: center;
}
.hero-banner__kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 6px 14px 6px 10px;
	background: var(--c-green-50);
	color: var(--c-blue-700); /* WCAG: blue-700 auf green-50 = 6.57:1 (war green-700 = 3.49:1) */
	border-radius: var(--r-pill);
	font-size: var(--fs-sm);
	font-weight: 700;
	margin-bottom: var(--s-6);
	letter-spacing: .06em;
	text-transform: uppercase;
}
.hero-banner__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-green-500);
	box-shadow: 0 0 0 4px rgba(95,186,95,.18);
}
.hero-banner__title {
	font-size: clamp(2.25rem, 5.5vw, 3.75rem);
	line-height: 1.05;
	margin-bottom: var(--s-6);
	letter-spacing: -.02em;
	color: var(--c-text);
}
.hero-banner__title em {
	font-style: italic;
	font-weight: 700;
	color: var(--c-accent);
	position: relative;
	display: inline-block;
}
.hero-banner__title em::after {
	content: "";
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: -.05em;
	height: 8px;
	background: rgba(231, 74, 92, .22);
	border-radius: 999px;
	z-index: -1;
}
.hero-banner__intro {
	font-size: var(--fs-md);
	color: var(--c-text-muted);
	max-width: 56ch;
	margin: 0 auto var(--s-8);
	line-height: 1.65;
}
.hero-banner__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
	justify-content: center;
}

.panel-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--s-6);
	box-shadow: var(--sh-md);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.panel-card:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.panel-card--accent { background: var(--c-primary); color: #fff; border-color: transparent; }
.panel-card--accent .address__hint, .panel-card--accent .panel-card__sub, .panel-card--accent .link-arrow { color: rgba(255,255,255,.85); }
.panel-card--accent .link-arrow:hover { color: #fff; }
.panel-card__head {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-4);
}
.panel-card__icon {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--c-primary-50);
	color: var(--c-primary);
}
.panel-card--accent .panel-card__icon { background: rgba(255,255,255,.18); color: #fff; }
.panel-card__title { font-weight: 700; font-size: var(--fs-md); }
.panel-card__sub { font-size: var(--fs-sm); color: var(--c-text-muted); display: inline-flex; align-items: center; gap: var(--s-2); }

/* --- 6. Buttons ---------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	border-radius: var(--r-pill);
	font-weight: 700; /* WCAG: bold + ≥14pt → "large bold" */
	text-decoration: none;
	min-height: 48px;
	transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
	cursor: pointer;
}
/* will-change nur auf Hover — vermeidet permanente Composite-Layer für jeden Button. */
.btn:hover { will-change: transform; }
.btn--lg { padding: var(--s-4) var(--s-6); font-size: var(--fs-md); min-height: 56px; }
.btn--primary {
	background: var(--c-green-800); /* AA-Kontrast 4.59:1 mit weißem Text — auch für reguläre Schrift */
	color: #fff;
	box-shadow: 0 6px 16px -8px rgba(11,122,62,.6);
}
.btn--primary:hover {
	background: var(--c-green-900); /* AAA-Kontrast (#1B5E20 = 7.4:1 mit weißem Text) */
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -8px rgba(11,122,62,.7);
}
.btn--primary:active { transform: translateY(0); }
.btn--ghost {
	background: var(--c-surface);
	color: var(--c-text);
	border: 1px solid var(--c-line);
}
.btn--ghost:hover { border-color: var(--c-primary-600); color: var(--c-primary-600); }
.btn--ghost-light {
	background: rgba(255,255,255,.12);
	color: #fff;
	border: 1px solid rgba(255,255,255,.3);
}
.btn--ghost-light:hover { background: rgba(255,255,255,.2); color: #fff; }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	color: var(--c-primary-700);
	font-weight: 600;
	text-decoration: none;
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* --- 7. Quick Actions (mit mintgrünem Streifen) ------- */
.quick-actions {
	padding-block: var(--s-11) var(--s-12);
	background: var(--c-mint-bg);
	border-top: 6px solid var(--c-mint);
}
.quick-actions__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
}
@media (min-width: 720px) { .quick-actions__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }

.quick-card {
	display: flex;
	gap: var(--s-4);
	padding: var(--s-6);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	text-decoration: none;
	color: inherit;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.quick-card:hover {
	transform: translateY(-3px);
	border-color: var(--c-primary);
	box-shadow: var(--sh-md);
	color: inherit;
}
.quick-card__icon {
	flex-shrink: 0;
	width: 56px; height: 56px;
	display: grid;
	place-items: center;
	background: var(--c-primary-50);
	color: var(--c-primary);
	border-radius: var(--r-md);
}
.quick-card__body { display: flex; flex-direction: column; gap: 2px; }
.quick-card__title { font-weight: 700; font-size: var(--fs-md); }
.quick-card__desc { color: var(--c-text-muted); font-size: var(--fs-sm); }
.quick-card__cta { margin-top: var(--s-2); display: inline-flex; align-items: center; gap: var(--s-1); color: var(--c-primary-700); font-weight: 600; }
.quick-card:hover .quick-card__cta svg { transform: translateX(3px); }

/* --- 8. Sections (gemeinsam) --------------------------- */
.section { padding-block: var(--s-12) var(--s-13); }
.section + .section { padding-top: var(--s-12); }
/* "Was wir für Sie tun" — Hintergrundbild + Layered-Overlays für Lesbarkeit.
   Bild-URL wird per --services-bg von services.php gesetzt (arw_resolve_url-aware).
   Layer-Reihenfolge (oben → unten):
     1. Soft-White-Wash      – garantiert hohe Helligkeit unter Schrift/Cards
     2. Mint-Glow im Top     – behält den vorhandenen Look-and-Feel
     3. Foto (CSS-Variable)  – cover, center
     4. Fallback-Farbe       – falls das Bild fehlt
   Wenn --services-bg nicht gesetzt ist, fällt der Layer auf 'none'. */
.section--services {
	--services-bg: none;
	position: relative;
	background-color: var(--c-bg);
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.92) 100%),
		radial-gradient(80% 60% at 50% 0%, var(--c-mint-bg), transparent 65%),
		var(--services-bg);
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: center, top, center;
	background-size: cover, auto, cover;
}
.section--services > .container { position: relative; z-index: 1; }

/* Tablet/Desktop: das Foto darf einen Hauch durchscheinen. */
@media (min-width: 720px) {
	.section--services {
		background-image:
			linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.88) 100%),
			radial-gradient(80% 60% at 50% 0%, var(--c-mint-bg), transparent 65%),
			var(--services-bg);
	}
}

/* Reduzierte Transparenz oder Print: Bild-Layer abdecken. */
@media (prefers-reduced-transparency: reduce), print {
	.section--services {
		background-image:
			radial-gradient(80% 60% at 50% 0%, var(--c-mint-bg), transparent 65%);
		background-color: var(--c-bg);
	}
}
.section--sortiment { background: var(--c-bg); }
.section--aktionen {
	background:
		radial-gradient(80% 60% at 50% 100%, var(--c-blue-bar-50), transparent 60%),
		var(--c-surface-2);
}
.section--visit { background: var(--c-bg); }

.section__head { max-width: 60ch; margin: 0 auto var(--s-10); text-align: center; }
.section__head--split {
	display: flex;
	gap: var(--s-5);
	max-width: none;
	text-align: left;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	margin-bottom: var(--s-9);
}
.section__kicker {
	display: inline-block;
	color: var(--c-primary-700);
	font-weight: 600;
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: var(--s-3);
}
.section__title {
	font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl));
	margin-bottom: var(--s-3);
}
.section__intro { color: var(--c-text-muted); font-size: var(--fs-md); }

/* --- 9. Service-Grid ----------------------------------- */
.service-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
}
@media (min-width: 640px) { .service-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
@media (min-width: 960px) { .service-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }

.service {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--s-7);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.service:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.service__icon {
	display: grid;
	place-items: center;
	width: 56px; height: 56px;
	margin-bottom: var(--s-4);
	border-radius: var(--r-md);
	background: var(--c-primary-50);
	color: var(--c-primary);
}
.service__title { font-size: var(--fs-md); margin-bottom: var(--s-2); }
.service__text { color: var(--c-text-muted); }

/* --- 10. Brand-Grid ------------------------------------ */
.brand-grid {
	display: grid;
	gap: var(--s-5);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .brand-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
@media (min-width: 960px) { .brand-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } }

.brand {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-6);
	border-radius: var(--r-lg);
	border: 1px solid var(--c-line);
	background: var(--c-surface);
	text-decoration: none;
	color: inherit;
	transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	min-height: 180px;
}
.brand:hover { border-color: var(--c-primary); transform: translateY(-3px); box-shadow: var(--sh-md); color: inherit; }
.brand__name { font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.01em; }
.brand__desc { color: var(--c-text-muted); flex: 1; }
.brand__more { margin-top: auto; color: var(--c-primary-700); font-weight: 600; display: inline-flex; align-items: center; gap: var(--s-1); }
.brand:hover .brand__more svg { transform: translateX(3px); }

/* --- 11. Aktionen -------------------------------------- */
.action-grid {
	display: grid;
	gap: var(--s-5);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .action-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.action-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--s-7);
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	position: relative;
}
.action-card__icon {
	width: 48px; height: 48px;
	display: grid;
	place-items: center;
	background: var(--c-primary-50);
	color: var(--c-primary);
	border-radius: var(--r-md);
	margin-bottom: var(--s-2);
}
.badge {
	display: inline-block;
	padding: 4px 10px;
	background: var(--c-primary-100);
	color: var(--c-primary-700);
	border-radius: var(--r-pill);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	width: fit-content;
}
.action-card__title { font-size: var(--fs-md); }
.action-card__text { color: var(--c-text-muted); }
.action-card__links {
	list-style: none;
	margin: var(--s-2) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
}
.action-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-2) var(--s-4);
	border-radius: var(--r-pill);
	background: var(--c-green-50);
	color: var(--c-green-800); /* WCAG: green-700 auf green-50 ≈ 3.5:1 → green-800 = 5.0:1 */
	font-weight: 600;
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
	min-height: 40px;
}
.action-card__link:hover {
	background: var(--c-green-500);
	color: #fff;
	transform: translateY(-1px);
}
.action-card__link:hover svg { transform: translateX(2px); }
.action-card__link svg { transition: transform var(--dur) var(--ease); }

/* --- 10b. Zitat-Block (Inhaberin) --------------------- */
.section--zitat {
	background:
		radial-gradient(60% 80% at 100% 50%, var(--c-blue-bar-50), transparent 60%),
		radial-gradient(60% 80% at 0% 50%, var(--c-mint-bg), transparent 60%),
		var(--c-bg);
	padding-block: var(--s-11) var(--s-12);
}
.zitat__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
	align-items: center;
	justify-items: center;
	max-width: 880px;
	margin-inline: auto;
	text-align: center;
}
@media (min-width: 720px) {
	.zitat__inner {
		grid-template-columns: 200px 1fr;
		text-align: left;
		gap: var(--s-9);
	}
}

.zitat__portrait {
	margin: 0;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 12px 36px -12px rgba(11, 122, 62, .25),
	            0 0 0 8px rgba(255, 255, 255, .9),
	            0 0 0 9px var(--c-mint);
	flex-shrink: 0;
}
.zitat__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.zitat__quote {
	position: relative;
	margin: 0;
	padding: 0;
	color: var(--c-text);
}
.zitat__mark {
	position: absolute;
	top: -.4em;
	left: -.1em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 8rem;
	line-height: 1;
	color: var(--c-mint);
	opacity: .5;
	pointer-events: none;
	z-index: 0;
	font-weight: 700;
}
@media (max-width: 719px) {
	.zitat__mark { left: 50%; transform: translateX(-50%); top: -.5em; }
}

.zitat__text {
	position: relative;
	z-index: 1;
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	line-height: 1.4;
	font-style: italic;
	font-weight: 500;
	color: var(--c-text);
	margin: 0 0 var(--s-5);
	letter-spacing: -.005em;
}

.zitat__cite {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: var(--s-3);
	border-top: 2px solid var(--c-mint);
	width: fit-content;
}
@media (max-width: 719px) {
	.zitat__cite { margin-inline: auto; }
}

.zitat__autor {
	font-style: normal;
	font-weight: 700;
	font-size: var(--fs-md);
	color: var(--c-blue-700);
	letter-spacing: -.01em;
}
.zitat__rolle {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	letter-spacing: .02em;
}

/* --- 11b. Entdecken Sie mehr (Cross-Promotion) -------- */
.section--entdecken {
	background:
		radial-gradient(80% 60% at 50% 0%, var(--c-blue-bar-50), transparent 65%),
		var(--c-bg);
}
.entdecken-grid {
	display: grid;
	gap: var(--s-5);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.entdecken-grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}
.entdecken-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	padding: var(--s-9);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-3);
	box-shadow: var(--sh-sm);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.entdecken-card:hover {
	transform: translateY(-3px);
	border-color: var(--c-green-300);
	box-shadow: var(--sh-md);
}
.entdecken-card__icon {
	width: 52px; height: 52px;
	display: grid;
	place-items: center;
	background: var(--c-green-50);
	color: var(--c-green-700);
	border-radius: var(--r-md);
	margin-bottom: var(--s-2);
}
.entdecken-card__title {
	font-size: var(--fs-lg);
	margin: 0;
	letter-spacing: -.01em;
}
.entdecken-card__text {
	color: var(--c-text-muted);
	margin: 0;
	flex: 1;
	font-size: var(--fs-base);
	line-height: 1.6;
}
.entdecken-card__cta { margin-top: var(--s-3); }

/* --- 11b. Premium-Kosmetik (Apotheker-Entwickler-Linie) ----------------
   Drei Produktkacheln mit Goldakzent — passend zur Verpackung der Premium-Linie.
   aspect-ratio sichert gleiche Höhe; Hover hebt die Karte sanft an. */
.section--premium {
	background:
		radial-gradient(circle at 20% 0%, rgba(212, 175, 55, .06) 0%, transparent 60%),
		radial-gradient(circle at 80% 100%, rgba(212, 175, 55, .04) 0%, transparent 50%),
		var(--c-surface);
	position: relative;
}
.section--premium::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: clamp(120px, 30%, 320px);
	height: 1px;
	background: linear-gradient(90deg, transparent, #C9A24B 30%, #E0C58A 50%, #C9A24B 70%, transparent);
}

.section__head--center { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: var(--s-9); }

/* WCAG: Kicker als kompakte Badge mit dunkelgoldener Schrift auf cremigem Grund.
   Vorher Gradient-Fill #C9A24B…#E0C58A → 1.7–2.4:1 (FAIL).
   Jetzt #5A4410 auf #FAF3E1 ≈ 8.1:1 ✔ AAA — der Goldakzent kommt über Hintergrund + Border. */
.section--premium .section__kicker {
	display: inline-block;
	font-size: var(--fs-xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: #5A4410;
	background: #FAF3E1;
	border: 1px solid #E8DEC2;
	padding: 4px 12px;
	border-radius: var(--r-pill);
	margin-bottom: var(--s-3);
}
.section--premium .section__title { font-size: var(--fs-2xl); margin-bottom: var(--s-3); }
.section--premium .section__intro { color: var(--c-text-muted); font-size: var(--fs-md); }

.premium-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-6);
}
@media (min-width: 640px) {
	.premium-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.premium-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
}

.premium-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #E8DEC2;
	border-radius: var(--r-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 0 rgba(212, 175, 55, .12), 0 6px 18px -8px rgba(26, 38, 32, .12);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
	height: 100%;
}
.premium-card:hover,
.premium-card:focus-visible {
	transform: translateY(-4px);
	border-color: #C9A24B;
	box-shadow: 0 2px 0 rgba(201, 162, 75, .25), 0 18px 32px -14px rgba(138, 105, 20, .35);
	color: inherit;
}
.premium-card__media {
	margin: 0;
	background: linear-gradient(180deg, #FAF7EE 0%, #FDFBF5 100%);
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	padding: var(--s-6);
	border-bottom: 1px solid #F0E6CD;
}
.premium-card__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform var(--dur-slow) var(--ease);
}
.premium-card:hover .premium-card__media img {
	transform: scale(1.04);
}
.premium-card__body {
	padding: var(--s-5) var(--s-6) var(--s-6);
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	flex: 1;
}
.premium-card__name {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--c-text);
	letter-spacing: -.005em;
	text-wrap: balance;
}
.premium-card__sub {
	margin: 0;
	font-size: var(--fs-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700; /* WCAG: 700 statt 600 + dunklerer Ton, sichere AA-Marge bei 13px */
	color: #5A4410; /* ≈ 8.1:1 auf weiß (AAA) — vorher #8A6914 = 4.88:1, knapp */
}

.premium-cta {
	margin-top: var(--s-8);
	text-align: center;
}
.premium-cta__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	border-color: #C9A24B;
	color: #6B5310;
}
.premium-cta__link:hover,
.premium-cta__link:focus-visible {
	background: #FAF3E1;
	border-color: #8A6914;
	color: #4A3700;
}

/* --- 12. Visit ----------------------------------------- */
.visit {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-9);
	align-items: start;
}
@media (min-width: 960px) { .visit { grid-template-columns: 1fr 1fr; gap: var(--s-11); } }
.visit__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }
.visit__map,
.visit__photo {
	border-radius: var(--r-xl);
	overflow: hidden;
	border: 1px solid var(--c-line);
	box-shadow: var(--sh-md);
	margin: 0;
}
.visit__map svg,
.visit__photo img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.info-list { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.info-list__row { display: grid; grid-template-columns: 1fr; gap: var(--s-1); }
@media (min-width: 540px) { .info-list__row { grid-template-columns: 200px 1fr; } }
.info-list__row dt { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--c-text-muted); }
.info-list__row dd { margin: 0; }
.info-list__line { display: inline-block; }

/* --- 13. Hours ----------------------------------------- */
.hours { display: grid; gap: var(--s-2); }
.hours__row { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-1); border-bottom: 1px dashed var(--c-line); }
.hours__row:last-child { border-bottom: 0; }
.hours__row dt { font-weight: 600; }

.address { font-style: normal; line-height: 1.55; }
.address__hint { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* --- 14. CTA-Bar --------------------------------------- */
.cta-bar {
	background:
		radial-gradient(circle at 88% 30%, rgba(231,74,92,.18), transparent 45%),
		linear-gradient(135deg, var(--c-blue-700) 0%, var(--c-blue-600) 60%, var(--c-green-600) 130%);
	color: #fff;
	padding-block: var(--s-10) var(--s-11);
	position: relative;
	overflow: hidden;
}
.cta-bar::after {
	content: "";
	position: absolute;
	right: -40px;
	top: -40px;
	width: 220px; height: 220px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' opacity='.08'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78Z'/></svg>") center / contain no-repeat;
	transform: rotate(-12deg);
	pointer-events: none;
}
.cta-bar a { color: #fff; }
.cta-bar__inner {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	justify-content: space-between;
	align-items: start;
}
@media (min-width: 720px) { .cta-bar__inner { flex-direction: row; align-items: center; } }
.cta-bar__title { font-size: var(--fs-xl); margin-bottom: var(--s-1); }
.cta-bar__text { opacity: .9; }
.cta-bar__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* Elementor-Wrapper — keine Theme-Constraint, Elementor regelt Layout selbst. */
.page-elementor { width: 100%; }
.page-elementor > .elementor { display: block; }

/* "Angebot des Monats" — redundante Adress-Box (steht bereits im Footer) ausblenden,
   damit das Angebotsbild prominent steht wie im Original. */
.page-id-185 .elementor-element-5c8ae8d8 { display: none !important; }
.page-id-185 .elementor-element-b18c778 { padding: 0 !important; min-height: 0 !important; }
.page-id-185 .elementor-element-b18c778 .elementor-widget-image img { width: 100%; height: auto; display: block; }

/* --- 15. Page-Header & Prose --------------------------- */
.page-header {
	padding-block: var(--s-10) var(--s-7);
	background: linear-gradient(180deg, var(--c-primary-50) 0%, var(--c-bg) 100%);
	border-bottom: 1px solid var(--c-line);
}
.page-header__kicker {
	color: var(--c-primary-700);
	font-weight: 600;
	font-size: var(--fs-sm);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: var(--s-2);
}
.page-header__title { font-size: clamp(var(--fs-xl), 5vw, var(--fs-3xl)); max-width: 24ch; }
.page-header__intro { color: var(--c-text-muted); font-size: var(--fs-md); margin-top: var(--s-3); max-width: 60ch; }
.page-header--inline { padding-block: var(--s-7); background: transparent; border-bottom: 0; }
.page-header__meta { color: var(--c-text-muted); font-size: var(--fs-sm); margin-top: var(--s-2); }

.content-prose {
	max-width: 80ch;
	padding-block: var(--s-9) var(--s-11);
	font-size: var(--fs-md);
	line-height: 1.7;
}
.content-prose h1 { font-size: var(--fs-2xl); margin-top: 0; margin-bottom: var(--s-5); letter-spacing: -.02em; }
.content-prose h2 {
	font-size: var(--fs-lg);
	margin-top: var(--s-9);
	margin-bottom: var(--s-3);
	padding-bottom: var(--s-2);
	border-bottom: 2px solid var(--c-mint);
	color: var(--c-blue-700);
}
.content-prose h3 { font-size: var(--fs-md); margin-top: var(--s-6); margin-bottom: var(--s-2); color: var(--c-text); }
.content-prose p { margin-bottom: var(--s-4); }
.content-prose ul, .content-prose ol { padding-left: var(--s-5); margin-bottom: var(--s-5); }
.content-prose li + li { margin-top: var(--s-2); }
.content-prose a {
	color: var(--c-blue-700);
	text-decoration-thickness: 1px;
	text-underline-offset: .25em;
}
.content-prose a:hover { color: var(--c-blue-800); text-decoration-thickness: 2px; }
.content-prose strong { color: var(--c-text); font-weight: 700; }
.content-prose address {
	font-style: normal;
	background: var(--c-surface-2);
	padding: var(--s-4) var(--s-5);
	border-radius: var(--r-md);
	border-left: 4px solid var(--c-blue-500);
	display: inline-block;
	margin-bottom: var(--s-4);
}

/* Definition-List-Layout für Impressum/Datenschutz —
   Label links, Wert rechts. Auf Mobile: gestapelt. */
.content-prose dl.impressum {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4) var(--s-6);
	margin-block: var(--s-5) var(--s-6);
	padding: 0;
}
.content-prose dl.impressum dt {
	font-weight: 700;
	color: var(--c-blue-700);
	font-size: var(--fs-sm);
	letter-spacing: .04em;
	text-transform: uppercase;
	padding-top: var(--s-3);
	border-top: 1px solid var(--c-line);
}
.content-prose dl.impressum dt:first-child { border-top: 0; padding-top: 0; }
.content-prose dl.impressum dd {
	margin: 0 0 var(--s-2);
	color: var(--c-text);
}
.content-prose dl.impressum dd address {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
}

@media (min-width: 720px) {
	.content-prose dl.impressum {
		grid-template-columns: minmax(220px, 1fr) 2fr;
		gap: var(--s-5) var(--s-7);
	}
	.content-prose dl.impressum dt {
		padding-top: var(--s-3);
		border-top: 1px solid var(--c-line);
	}
	.content-prose dl.impressum dd {
		padding-top: var(--s-3);
		border-top: 1px solid var(--c-line);
	}
	.content-prose dl.impressum dt:first-of-type,
	.content-prose dl.impressum dt:first-of-type + dd {
		border-top: 0;
		padding-top: 0;
	}
}

.content-prose .muted-note { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Datenschutz-Dokumenten-Scans (Apotheken-spezifische Datenschutzinformationen) */
.content-prose .datenschutz-figure {
	margin: var(--s-7) 0;
	padding: var(--s-3);
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	box-shadow: var(--sh-sm);
}
.content-prose .datenschutz-figure img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 850px;
	margin-inline: auto;
	border-radius: var(--r-sm);
}
.content-prose .datenschutz-figure figcaption {
	margin-top: var(--s-3);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	text-align: center;
	font-style: italic;
}

.post-hero { margin-block: var(--s-6); border-radius: var(--r-lg); overflow: hidden; }

.kontakt-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
	padding-block: var(--s-9) var(--s-11);
}
@media (min-width: 960px) { .kontakt-grid { grid-template-columns: 1fr 380px; gap: var(--s-9); } }
.contact-card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--s-7);
	box-shadow: var(--sh-sm);
	height: fit-content;
	position: sticky;
	top: 96px;
}
.contact-card__title { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.contact-card__sub { font-size: var(--fs-md); margin-block: var(--s-5) var(--s-3); }
.contact-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: var(--s-2); }
.contact-list li { display: inline-flex; align-items: center; gap: var(--s-3); }
.contact-list svg { color: var(--c-primary); }

/* --- 16. Card-Grid (Posts) ----------------------------- */
.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
	padding-block: var(--s-7);
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.card__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card__title { font-size: var(--fs-md); }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--c-primary-700); }
.card__meta { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* --- 17. Footer ---------------------------------------- */
.site-footer {
	background: var(--c-surface-3);
	color: var(--c-text);
	margin-top: 0; /* Inhalts-Abschnitte bringen ihren eigenen padding-bottom mit;
	                  kein zusätzlicher Margin → kein weißer Streifen vor dem Footer. */
	border-top: 6px solid var(--c-mint);
}
/* Body soll keinen Margin am Ende fügen, falls Browser-Defaults das wollen. */
.site-main { margin-bottom: 0; padding-bottom: 0; }
.site-main:last-child > *:last-child { margin-bottom: 0; }
.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-9);
	padding-block: var(--s-11);
}
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.footer-col__title {
	font-weight: 700;
	font-size: var(--fs-md);
	margin: 0 0 var(--s-4);
	line-height: 1.2;
}
.footer-col__sub {
	display: block;
	font-weight: 500;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}
/* Brand-Spalte: Adresse beginnt direkt unter dem Titel — bündig mit anderen Spalten. */
.footer-col--brand .address { margin-top: 0; }
.footer-col--brand .address strong { display: block; margin-bottom: var(--s-1); }

/* Hinweise-Spalte: zusätzlicher Abstand zwischen Text und Notdienst-Button. */
.footer-col--hinweise .footer-col__cta {
	margin-top: var(--s-5);
	margin-bottom: 0;
}
.footer-col__cta { display: block; }
.footer-contact { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: var(--s-2); }
.footer-contact li { display: inline-flex; align-items: center; gap: var(--s-2); }
.footer-contact svg { color: var(--c-primary); }
/* WCAG: Footer-Hintergrund (#EDF5EF) → blue-700 als Link-Color = 6.92:1 (war green-600 = 2.67:1).
   :not(.btn) lässt Buttons (z.B. Notdienst-CTA) unberührt — die haben weißen Text auf grünem Grund. */
.footer-contact a:not(.btn),
.footer-col a:not(.btn) {
	color: var(--c-blue-700);
	font-weight: 600;
}
.footer-contact a:not(.btn):hover,
.footer-col a:not(.btn):hover { color: var(--c-blue-800); }

.footer-nav, .meta-nav { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.footer-nav a, .meta-nav a { color: var(--c-text); text-decoration: none; }
.footer-nav a:hover, .meta-nav a:hover { color: var(--c-primary-700); text-decoration: underline; text-underline-offset: 0.25em; }

.site-footer__bottom { background: rgba(0,0,0,.04); padding-block: var(--s-5); }
.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	justify-content: space-between;
	align-items: center;
	font-size: var(--fs-base); /* von fs-sm (15px) auf fs-base (17px) */
}
.site-footer__bottom-inner .copy { font-size: var(--fs-base); }
.meta-nav { display: flex; gap: var(--s-5); flex-wrap: wrap; font-size: var(--fs-base); }
.footer-col__title { font-size: var(--fs-lg); }
.footer-col__sub { font-size: var(--fs-base); }
.footer-contact, .hours, .footer-nav, .meta-nav, .address, .muted-text { font-size: var(--fs-base); }

/* --- 17b. Original-Inhalte: "Entdecken Sie mehr"-Karten + CTA-Buttons --- */
.start-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5);
	margin-block: var(--s-6);
}
@media (min-width: 720px) { .start-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }

.start-item {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	padding: var(--s-7);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.start-item:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.start-item h3 { font-size: var(--fs-lg); margin: 0; }
.start-item p { color: var(--c-text-muted); margin: 0; max-width: 50ch; }

/* Original-Klassen aus dem Elementor-Inhalt — als Pillen-Buttons gestylt.
   Spezifität bewusst hoch (body-prefix + a.x.y), damit Elementor's frontend.min.css
   diese Regeln nicht überschreibt. */
body a.info-button,
body a.cta-button,
body a.info-button.cta-button,
.elementor a.info-button,
.elementor a.cta-button {
	display: inline-flex !important;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5) !important;
	margin-top: var(--s-2);
	background: var(--c-green-500) !important;
	color: #fff !important;
	border-radius: var(--r-pill) !important;
	font-weight: 600;
	font-size: var(--fs-base);
	text-decoration: none !important;
	transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
	min-height: 44px;
	box-shadow: 0 4px 12px -6px rgba(95,186,95,.55);
	border: 0 !important;
}
body a.info-button:hover,
body a.cta-button:hover,
.elementor a.info-button:hover,
.elementor a.cta-button:hover {
	background: var(--c-green-600) !important;
	color: #fff !important;
	transform: translateY(-1px);
	text-decoration: none !important;
}
body a.info-button::after,
body a.cta-button::after,
.elementor a.info-button::after,
.elementor a.cta-button::after {
	content: "→";
	display: inline-block;
	transition: transform var(--dur) var(--ease);
}
body a.info-button:hover::after,
body a.cta-button:hover::after,
.elementor a.info-button:hover::after,
.elementor a.cta-button:hover::after { transform: translateX(3px); }

/* --- 4b. Mitteilungs-Banner (Top der Startseite) ------ */
.site-notice {
	position: relative;
	color: var(--c-text);
	border-bottom: 4px solid currentColor;
	padding-block: var(--s-4);
	animation: notice-slide-down var(--dur-slow) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
	.site-notice { animation: none; }
}
@keyframes notice-slide-down {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: translateY(0);     opacity: 1; }
}
.site-notice[hidden] { display: none !important; }

.site-notice--info {
	background: var(--c-mint-bg);
	color: var(--c-green-800); /* WCAG: green-700 auf mint-bg = 3.4:1 → green-800 = 4.6:1 */
	border-color: var(--c-mint);
}
.site-notice--warning {
	background: #FFF7E0;
	color: #8A5A00;
	border-color: #E0A82E;
}
.site-notice--urgent {
	background: #FCE5E7;
	color: var(--c-accent-600);
	border-color: var(--c-accent);
}

.site-notice__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--s-4);
}
.site-notice__icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .65);
	color: currentColor;
}
.site-notice__body {
	flex: 1;
	min-width: 0;
	color: var(--c-text);
}
.site-notice__title {
	margin: 0 0 var(--s-1);
	font-weight: 700;
	font-size: var(--fs-md);
	letter-spacing: -.01em;
}
.site-notice__text {
	margin: 0;
	font-size: var(--fs-base);
	line-height: 1.55;
}
.site-notice__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	margin-top: var(--s-2);
	font-weight: 600;
	color: currentColor;
	text-decoration: underline;
	text-underline-offset: .2em;
}
.site-notice--urgent .site-notice__link,
.site-notice--info .site-notice__link,
.site-notice--warning .site-notice__link { color: inherit; }

.site-notice__close {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: transparent;
	color: currentColor;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease);
}
.site-notice__close:hover,
.site-notice__close:focus-visible { background: rgba(255, 255, 255, .55); }

@media (max-width: 540px) {
	.site-notice__inner { gap: var(--s-3); }
	.site-notice__icon { width: 32px; height: 32px; }
}

/* --- 17c. Cookie-/Datenschutz-Hinweisbanner ----------- */
.cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	background: var(--c-surface);
	border-top: 4px solid var(--c-mint);
	box-shadow: 0 -8px 24px -8px rgba(20, 32, 26, .15);
	padding: var(--s-4) 0;
	font-size: var(--fs-sm);
	animation: cookie-slide-up var(--dur-slow) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
	.cookie-banner { animation: none; }
}
@keyframes cookie-slide-up {
	from { transform: translateY(100%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
.cookie-banner[hidden] { display: none !important; }

.cookie-banner__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	align-items: center;
	justify-content: space-between;
}
.cookie-banner__text {
	flex: 1 1 320px;
	margin: 0;
	color: var(--c-text);
	line-height: 1.55;
}
.cookie-banner__text strong {
	display: block;
	margin-bottom: 2px;
	color: var(--c-blue-700);
}
.cookie-banner__link {
	display: inline-block;
	margin-left: var(--s-2);
	color: var(--c-green-800); /* WCAG: green-700 auf weiß = 3.45:1 → green-800 = 4.6:1 */
	text-decoration: underline;
	text-underline-offset: .2em;
}
.cookie-banner__link:hover { color: var(--c-green-900); }
.cookie-banner__btn {
	flex-shrink: 0;
	min-height: 44px;
	padding: var(--s-2) var(--s-5);
}

@media (max-width: 540px) {
	.cookie-banner__inner { flex-direction: column; align-items: stretch; }
	.cookie-banner__btn   { width: 100%; }
}

/* --- 18. Search-Form ----------------------------------- */
.searchform { display: flex; gap: var(--s-2); margin-block: var(--s-5); }
.searchform__input {
	flex: 1;
	padding: var(--s-3) var(--s-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-pill);
	background: var(--c-surface);
	min-height: 48px;
}
.searchform__submit {
	padding: var(--s-3) var(--s-5);
	background: var(--c-primary);
	color: #fff;
	border-radius: var(--r-pill);
	font-weight: 600;
	min-height: 48px;
}
.searchform__submit:hover { background: var(--c-primary-600); }

/* --- 19. Pagination ------------------------------------ */
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	padding-block: var(--s-5) var(--s-9);
	justify-content: center;
}
.page-numbers {
	min-width: 44px;
	min-height: 44px;
	padding: var(--s-2) var(--s-3);
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-surface);
	color: var(--c-text);
	text-decoration: none;
	font-weight: 600;
}
.page-numbers.current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.page-numbers:hover { border-color: var(--c-primary); }

/* --- 20. High-Contrast & Print ------------------------- */
@media (prefers-contrast: more) {
	:root { --c-line: #4A5A52; --c-text-muted: #14201A; }
	.btn--ghost { border-width: 2px; }
}

@media print {
	.topbar, .nav-toggle, .primary-nav, .primary-nav-wrap, .cta-bar, .quick-actions,
	.visit__map, .visit__photo, .skip-link, .searchform, .nav-links, .pagination {
		display: none !important;
	}
	body { background: #fff; color: #000; }
	a { color: #000; text-decoration: underline; }
	.hero { background: none; padding-block: var(--s-5); }
	.section, .hero-banner, .quick-actions { padding-block: 12pt !important; }
	* { box-shadow: none !important; }
}

/* === Reveal-Animation als CSS-only Pattern (statt Inline-Style via JS) =============
   Ohne JS sind Inhalte sofort sichtbar; mit JS togglet eine .is-in-Klasse. */
@media (prefers-reduced-motion: no-preference) {
	.js .reveal {
		opacity: 0;
		transform: translateY(8px);
		transition: opacity 420ms cubic-bezier(.32,.72,.32,1),
		            transform 420ms cubic-bezier(.32,.72,.32,1);
	}
	.js .reveal.is-in {
		opacity: 1;
		transform: none;
	}
}