/* =========================================================================
   die Urologinnen – Theme-Styles
   Reihenfolge: Tokens · Grundlagen · Layout · Typo-Rollen · Komponenten ·
   Header · Footer · Zustände
   Alle Werte stammen aus docs/design-spec.md und docs/webstruktur.md.
   ========================================================================= */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
	/* Bandfarben */
	--paper: #faf7f2;
	--sand: #f2ebe4;
	--aubergine: #3d2233;
	--aubergine-deep: #2a1724;

	/* Flächen und Striche */
	--surface-raised: #fbf8f5;
	--line: #e2d8ce;

	/* Bildplatzhalter – eigene Toene, damit sie als Fremdkoerper lesbar sind */
	--placeholder-fill: #efe7e0;
	--placeholder-line: #c9bbb0;

	/* Laufweiten: eine fuer Label-Rollen, eine fuer Buttons */
	--track-label: 0.15em;
	--track-btn: 0.08em;

	/* Begrenzung von Bedienelementen. --line traegt nur 1,31:1 und erfuellt die
	   3:1 aus WCAG 1.4.11 nicht; dieser Ton bleibt in der Mauve-Familie. */
	--line-stark: #948289;

	/* Akzent und Text */
	--mauve: #8b596a;
	--mauve-light: #b98395;
	--text: #594e53;
	--text-strong: #1a1317;

	/* Kopflinien der drei Startseiten-Felder */
	--rule-1: var(--aubergine);
	--rule-2: var(--mauve);
	/* Die drei Kopflinien staffeln sich, bleiben aber in der Palette.
	   #9a8a92 war eine vierte Farbe und lag bei 2,77:1 auf Sand. */
	--rule-3: var(--mauve-light);

	/* Text auf dunklem Grund */
	--on-dark: rgb(250 247 242);
	--on-dark-muted: rgb(250 247 242 / 0.82);
	--on-dark-quiet: rgb(250 247 242 / 0.7);
	--on-dark-border: rgb(250 247 242 / 0.5);
	--on-dark-line: rgb(250 247 242 / 0.14);

	/* Schrift */
	--font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
	--font-sans: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

	/* Typo-Skala, fluid 320 → 1280 */
	--fs-display: clamp(2.125rem, 1.75rem + 1.875vw, 3.25rem);
	--fs-statement: clamp(1.6875rem, 1.3958rem + 1.4583vw, 2.5625rem);
	--fs-h2: clamp(1.5625rem, 1.4167rem + 0.7292vw, 2rem);
	--fs-h3: clamp(1.375rem, 1.2917rem + 0.4167vw, 1.625rem);
	--fs-titel: clamp(1.3125rem, 1.2708rem + 0.2083vw, 1.4375rem);
	--fs-lead: clamp(1.25rem, 1.1875rem + 0.3125vw, 1.4375rem);
	--fs-quote: clamp(1.1875rem, 1.125rem + 0.3125vw, 1.375rem);
	--fs-body: clamp(1.125rem, 1.0833rem + 0.2083vw, 1.25rem);
	--fs-klein: 1.0625rem;
	--fs-ui: 0.9375rem;
	--fs-eyebrow: 0.875rem;

	/* Abstände */
	--sp-3xs: 0.25rem;
	--sp-2xs: 0.5rem;
	--sp-xs: 0.75rem;
	--sp-s: 1rem;
	--sp-m: 1.5rem;
	--sp-l: 2rem;
	--sp-xl: 3rem;
	--sp-2xl: clamp(2rem, 1.33rem + 3.33vw, 4rem);
	/* Fluid, sonst stehen die beiden Portraets auf dem Telefon weiter
	   auseinander als das Band von seinen Nachbarn entfernt ist. */
	--sp-3xl: clamp(2.5rem, 1.67rem + 4.17vw, 5rem);

	/* Sektionsabstände */
	--section-lg: clamp(4rem, 3.17rem + 4.17vw, 6.5rem);
	--section-md: clamp(3rem, 2.42rem + 2.92vw, 4.75rem);
	--section-sm: clamp(2rem, 1.67rem + 1.67vw, 3rem);

	/* Breiten */
	--container: 73rem;
	--measure: 34rem;
	--measure-display: 40rem;
	--gutter: clamp(1.25rem, 4.375vw, 3.5rem);

	/* Bewegung. Zwei Dauern, eine Kurve – mehr braucht diese Seite nicht.
	   Die Kurve klingt aus, statt mechanisch zu stoppen. */
	--dauer-schnell: 120ms;
	--dauer-mittel: 180ms;
	--kurve: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* Header */
	--header-h: 64px;
}

@media (min-width: 48em) {
	:root { --header-h: 72px; }
}
@media (min-width: 80em) {
	:root { --header-h: 87px; }
}

/* --- 2. Grundlagen ------------------------------------------------------ */

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

html {
	scroll-padding-top: calc(var(--header-h) + 1rem);
	-webkit-text-size-adjust: 100%;
}
/* Weich gescrollt wird erst, wenn die Leserin selbst etwas ausgeloest hat:
   navigation.js setzt die Klasse bei der ersten Zeiger-, Touch- oder
   Tasteneingabe. Der Ankersprung beim Seitenaufruf bleibt damit ein Sprung.
   Er hat keinen Orientierungswert – die Seite wurde noch nicht gesehen – und
   als Animation braucht er Frames: Ein Tab im Hintergrund oder eine
   eingebettete Ansicht ohne Rendering liefert keine, die Seite bliebe oben
   stehen. Gilt fuer Ankerspruenge und fuer window.scrollTo ohne behavior;
   die prefers-reduced-motion-Regel am Dateiende schaltet es ab. */
html.uro-weich { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font-family: var(--font-serif);
	font-size: var(--fs-body);
	line-height: 1.7;
	font-variant-numeric: oldstyle-nums proportional-nums;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Mediävalziffern gelten für den Fließtext in EB Garamond. Alles Funktionale
   in Inter bekommt Versalziffern zurück – Zahlen in Buttons, Navigation und
   Nummerierung sollen gleich breit stehen. */
.uro-eyebrow,
.uro-btn,
.uro-pfeil,
.uro-karte__nr,
.uro-ablauf,
.uro-ablauf > li::before,
.uro-nav,
.uro-overlay,
.uro-footer,
.uro-bild__regie { font-variant-numeric: lining-nums tabular-nums; }

/* Die Präfix-Zeile ist Pflicht: Safari und iOS kennen bis heute nur
   -webkit-hyphens, das unpräfixierte Property wird dort ignoriert.
   text-wrap: pretty verhindert Schusterjungen am Absatzende. */
p, li, dd, figcaption {
	-webkit-hyphens: auto;
	hyphens: auto;
	text-wrap: pretty;
}

/* Kleintext bleibt bei 1.6 – die 1.7 des Fließtexts sind für lange Absätze
   gedacht, nicht für Karten-, Footer- und Nebentext. */
.uro-klein,
.uro-karte__text,
.uro-footer { line-height: 1.6; }

/* Die ui-Rolle hat eine eigene Zeilenhöhe. Ohne sie erbten Buttons und
   Pfeil-Links die 1.7 des Body und wurden 4px höher als spezifiziert. */
.uro-btn,
.uro-pfeil { line-height: 1.3; }

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 400;
	color: var(--aubergine);
	-webkit-hyphens: auto;
	hyphens: auto;
	/* Notumbruch: greift auch ohne installiertes Trennwörterbuch. Ohne ihn
	   sprengt „Barrierefreiheitserklärung“ bei 320px die Seite. */
	overflow-wrap: break-word;
	margin: 0;
	text-wrap: balance;
}

h1 { font-size: var(--fs-display); line-height: 1.15; }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-size: var(--fs-titel); line-height: 1.35; }

p { margin: 0; }
p + p { margin-top: var(--sp-s); }

strong, b { font-weight: 400; color: var(--text-strong); }

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

::selection { background: var(--mauve); color: var(--paper); }

/* Links im Fließtext – die Rolle, die der Entwurf nicht kennt */
.uro-prose a,
.uro-liste a,
.uro-kontakt a,
p a {
	color: var(--aubergine);
	text-decoration: underline;
	text-decoration-color: var(--mauve);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: text-decoration-color var(--dauer-schnell) var(--kurve);
}
@media (hover: hover) {
	.uro-prose a:hover,
	.uro-liste a:hover,
	.uro-kontakt a:hover,
	p a:hover { text-decoration-color: var(--aubergine); text-decoration-thickness: 2px; }
}

/* --- 3. Layout: Bänder und Container ------------------------------------ */

.uro-band {
	padding-block: var(--section-md);
	padding-inline: var(--gutter);
	background: var(--paper);
}
.uro-band--sand { background: var(--sand); }
.uro-band--dark { background: var(--aubergine); }
.uro-band--lg { padding-block: var(--section-lg); }
.uro-band--sm { padding-block: var(--section-sm); }

.uro-band__inner {
	max-width: var(--container);
	margin-inline: auto;
}

/* WordPress zentriert die Lesespalte per Default – der Entwurf ist linksbündig. */
.uro-band__inner.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.uro-band__inner.is-layout-constrained > .alignwide { margin-left: 0 !important; margin-right: 0 !important; max-width: var(--container); }
/* Volle Breite innerhalb des Bandes für Raster, Listenblöcke und Splits */
.uro-band__inner.is-layout-constrained > .uro-karten,
.uro-band__inner.is-layout-constrained > .uro-felder,
.uro-band__inner.is-layout-constrained > .uro-split,
.uro-band__inner.is-layout-constrained > .uro-faq,
.uro-band__inner.is-layout-constrained > .uro-ablauf,
.uro-band__inner.is-layout-constrained > .uro-liste--zwei,
.uro-band__inner.is-layout-constrained > .uro-schritte,
.uro-band__inner.is-layout-constrained > .uro-blick,
.uro-band__inner.is-layout-constrained > .wp-block-html { max-width: var(--container); }
/* Zentrierter Abschluss */
.uro-abschluss.is-layout-constrained > * { margin-left: auto !important; margin-right: auto !important; }

/* Die Lesespalte kommt aus theme.json (layout.contentSize), nicht von hier.
   Überschriften dürfen breiter laufen als der Fließtext – sonst schrumpfen
   sie mit und brechen früher als nötig. */
:root :where(.uro-band__inner) > :is(h1, h2, h3) { max-width: var(--measure-display); }

/* Text auf dunklen Bändern */
.uro-band--dark { color: var(--on-dark-muted); }
.uro-band--dark h1,
.uro-band--dark h2,
.uro-band--dark h3 { color: var(--on-dark); }

/* Splits – zweispaltig erst ab 1024px */
/* Gestapelt gilt die Blockstufe, nebeneinander der groessere Spaltenabstand.
   Vorher addierte sich zum fluiden gap noch ein zweiter Abstand am Bild. */
.uro-split { display: grid; gap: var(--sp-xl); }
/* Gestapelt bindet die Ueberschrift links an ihren Inhalt rechts mit der
   Blockstufe (l). Der Spaltenabstand (xl) stellte sie weiter von ihrem Text
   weg, als eine Sektion von der naechsten entfernt ist. */
.uro-split--2-3 { row-gap: var(--sp-l); }
@media (min-width: 64em) { .uro-split { column-gap: var(--sp-2xl); } }
@media (min-width: 64em) {
	.uro-split--even { grid-template-columns: 1fr 1fr; }
	/* Die Textspalte ist die Lesespalte, nicht ein Bruchteil des Containers –
	   bei 2fr 3fr lief sie mit 89 Zeichen pro Zeile. */
	.uro-split--2-3 { grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)); }
}

/* Grid-Spalten erben keinen Blockabstand – sonst startet die zweite Spalte tiefer
   als die erste und die Oberkanten treffen sich nicht. */
:root :where(.uro-split) > * { margin-block-start: 0; }

/* Vertikaler Rhythmus: WordPress-blockGap steht in theme.json auf 0px,
   die Abstände kommen ausschließlich von hier.
   Gilt im Bandinneren und in den Spalten der Splits. */
/* Karte und Feld steuern ihre Innenabstaende ueber die margin-bottom ihrer
   Titel. Standen sie zusaetzlich hier, zaehlte der Abstand doppelt: 28px
   statt der gemeinten 12px. */
:root :where(.uro-band__inner, .uro-split > .wp-block-group, .uro-profil) > * + * {
	margin-top: var(--sp-s);
}
:root :where(.uro-band__inner, .uro-split > .wp-block-group, .uro-profil) > * + :is(h2) { margin-top: var(--section-sm); }
:root :where(.uro-band__inner, .uro-split > .wp-block-group, .uro-profil) > * + :is(h3) { margin-top: var(--sp-l); }
:root :where(.uro-band__inner, .uro-split > .wp-block-group, .uro-profil) > :is(h1, h2, h3) + * { margin-top: var(--sp-m); }
:root :where(.uro-band__inner, .uro-split > .wp-block-group, .uro-profil) > :is(h1, h2, h3, p, ul, ol, div) + :is(h2) { margin-top: var(--section-sm); }
:root :where(.uro-band__inner, .uro-split > .wp-block-group, .uro-profil) > :is(h2) + .uro-eyebrow { margin-top: var(--sp-3xs); }
:root :where(.uro-band__inner, .uro-split > .wp-block-group, .uro-profil) > .uro-eyebrow + * { margin-top: var(--sp-xs); }
:root :where(.uro-band__inner, .uro-split > .wp-block-group, .uro-profil) > * + .uro-eyebrow { margin-top: var(--section-sm); }
:root :where(.uro-band__inner, .uro-split > .wp-block-group, .uro-profil) > * + :is(.uro-karten, .uro-felder, .uro-faq, .uro-liste, .uro-raster-liste, .uro-ablauf, .uro-schritte, .uro-blick, .uro-split) { margin-top: var(--section-sm); }
/* und derselbe Abstand nach unten – vorher standen 48px darueber und 16 darunter */
:root :where(.uro-band__inner, .uro-split > .wp-block-group, .uro-profil) > :is(.uro-karten, .uro-felder, .uro-faq, .uro-liste, .uro-raster-liste, .uro-ablauf, .uro-schritte, .uro-blick, .uro-split) + * { margin-top: var(--section-sm); }
/* Die Aktion haengt an der Aktion, nicht an ihrer Huelle: ein Pfeil-Link in
   einem klassenlosen Absatz bekam vorher 16px statt 32px. */
:root :where(.uro-band__inner, .uro-split > .wp-block-group) >
	* + :is(.uro-btns, p:has(> .uro-pfeil)) { margin-top: var(--sp-l); }
/* Eine Überschrift bindet immer an ihren Inhalt, auch wenn dieser Inhalt ein
   Block ist. Vorher bekam „H2 + Raster“ denselben Abstand wie „Inhalt + nächste
   H2“ – Zusammengehöriges stand so weit auseinander wie Getrenntes.
   Der Split bleibt bewusst draußen: er ist eine eigene Sektion. */
:root :where(.uro-band__inner, .uro-split > .wp-block-group) >
	:is(h1, h2, h3) + :is(.uro-karten, .uro-felder, .uro-faq, .uro-liste,
	                      .uro-raster-liste, .uro-ablauf, .uro-schritte, .uro-blick) { margin-top: var(--sp-l); }

/* Lead und Statement sind Auftakte, nicht Fließtext – sie brauchen mehr Luft
   zum Folgeabsatz als ein Absatz zum nächsten. Überschriften und Blöcke
   behalten über :where() ihre eigenen, größeren Abstände. */
:root :where(.uro-band__inner, .uro-split > .wp-block-group) >
	:is(.uro-lead, .uro-statement) + :where(p, address, dl) { margin-top: var(--sp-m); }

/* Das erste Element eines Bandes hat nie einen Außenabstand nach oben. */
:root :where(.uro-band__inner, .uro-split > .wp-block-group, .uro-profil) > :first-child { margin-top: 0; }

/* --- 4. Typografische Rollen -------------------------------------------- */

/* Die Footer-Überschriften sind dieselbe Rolle – sie standen als eigene
   Regel mit abweichender Laufweite ein zweites Mal im Stylesheet. */
.uro-eyebrow,
.uro-footer h3 {
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--mauve);
	margin: 0;
}
.uro-band--dark .uro-eyebrow { color: var(--mauve-light); }

.uro-lead {
	font-size: var(--fs-lead);
	line-height: 1.55;
	color: var(--text-strong);
}
.uro-band--dark .uro-lead { color: var(--on-dark); }

.uro-statement {
	font-size: var(--fs-statement);
	line-height: 1.25;
	color: var(--aubergine);
	max-width: var(--measure-display);
	text-wrap: balance;
}
.uro-band--dark .uro-statement { color: var(--on-dark); }

.uro-tagline {
	font-size: var(--fs-quote);
	color: var(--mauve);
	line-height: 1.3;
}

/* Zitat-/Merksatzblock: linke Regel, aufrecht, nie <blockquote> */
.uro-quote {
	font-size: var(--fs-quote);
	line-height: 1.5;
	color: var(--aubergine);
	border-left: 3px solid var(--mauve);
	padding-left: var(--sp-m);
	margin-block: var(--sp-l);
	max-width: var(--measure);
}

.uro-klein { font-size: var(--fs-klein); }

/* --- 5. Buttons und Pfeil-Links ----------------------------------------- */

.uro-btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-s);
}
.uro-btns > * { flex: 1 1 auto; }
@media (min-width: 40em) {
	.uro-btns > * { flex: 0 0 auto; }
}

.uro-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--sp-s) var(--sp-l);
	/* letter-spacing setzt den Zwischenraum auch hinter den letzten Buchstaben.
	   Ohne diesen Abzug steht die Beschriftung optisch links der Mitte. */
	padding-right: calc(var(--sp-l) - var(--track-btn));
	border: 1px solid transparent;
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-ui);
	font-weight: 600;
	letter-spacing: var(--track-btn);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--dauer-schnell) var(--kurve), color var(--dauer-schnell) var(--kurve), border-color var(--dauer-schnell) var(--kurve);
}
.uro-btn--primaer { background: var(--aubergine); color: var(--paper); }
.uro-btn--outline { background: transparent; color: var(--aubergine); border-color: var(--aubergine); }
.uro-btn--hell { background: var(--paper); color: var(--aubergine); }
.uro-btn--outline-dunkel { background: transparent; color: var(--on-dark); border-color: var(--on-dark-border); }

@media (hover: hover) {
	.uro-btn--primaer:hover { background: var(--aubergine-deep); color: var(--paper); }
	.uro-btn--outline:hover { background: var(--sand); }
	/* Auf Sandbändern wäre der Sand-Hover unsichtbar – dort hellt der Button auf. */
	.uro-band--sand .uro-btn--outline:hover { background: var(--paper); }
	.uro-btn--hell:hover { background: var(--sand); }
	.uro-btn--outline-dunkel:hover { border-color: var(--on-dark); }
}

/* Gedrückt-Zustand. Auf Touch ist das die einzige Rückmeldung überhaupt –
   alle Hover-Regeln liegen in @media (hover: hover) und greifen dort nicht.
   transform steht bewusst nicht in der transition-Liste: Druck muss sofort
   sichtbar sein, sonst ist es kein Feedback mehr. */
.uro-btn:active { transform: translateY(1px); }
.uro-btn--primaer:active { background: var(--aubergine-deep); }
.uro-btn--outline:active,
.uro-btn--hell:active { background: var(--line); }
.uro-btn--outline-dunkel:active { border-color: var(--on-dark); }

.uro-pfeil {
	display: inline-flex;
	align-items: center;
	/* Die Sperrung hinter dem letzten Buchstaben wieder abziehen, damit
	   zwischen Wort und Pfeil optisch 0.5em stehen. */
	gap: calc(0.5em - var(--track-label));
	min-height: 44px;
	padding-block: 0.875rem;
	margin-block: 0 -0.875rem;
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mauve);
	line-height: 1.3;
	transition: color var(--dauer-schnell) var(--kurve);
}
/* Nur der echte Link braucht die 44px-Touchflaeche. Am dekorativen Span in
   der Karte hob sie den Abstand Text->Pfeil auf 38px statt 24px an. */
span.uro-pfeil { min-height: 0; padding-block: 0; margin-block: 0; }

.uro-pfeil::after {
	content: "→";
	transition: transform var(--dauer-schnell) var(--kurve);
}
@media (hover: hover) {
	.uro-pfeil:hover { color: var(--aubergine); }
	.uro-pfeil:hover::after { transform: translateX(2px); }
}
.uro-pfeil:active::after { transform: translateX(2px); }
.uro-band--dark .uro-pfeil,
.uro-footer .uro-pfeil { color: var(--mauve-light); }

/* --- 6. Karten (Leistungen und Diagnostik) ------------------------------ */

.uro-karten {
	display: grid;
	gap: var(--sp-l);
	list-style: none;
	padding: 0;
}
@media (min-width: 40em) { .uro-karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .uro-karten--3 { grid-template-columns: repeat(3, 1fr); } }

.uro-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--paper);
	border: 1px solid var(--line-stark);
	padding: var(--sp-m);
	transition: background-color var(--dauer-schnell) var(--kurve);
}
/* Im Raster 32px wie in DESIGN.md, schmal 24px – die 27px des Entwurfs
   stammten aus keinem Token. */
@media (min-width: 40em) { .uro-karte { padding: var(--sp-l); } }
.uro-band--sand .uro-karte { background: var(--surface-raised); }

.uro-karte__nr {
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--track-label);
	color: var(--mauve);
	margin-bottom: var(--sp-xs);
}
.uro-karte__titel {
	font-size: var(--fs-titel);
	line-height: 1.35;
	margin-bottom: var(--sp-xs);
}
.uro-karte__titel a {
	color: var(--aubergine);
	text-decoration: none;
}
/* Die ganze Karte ist klickbar; der zugängliche Name ist der Titel. */
.uro-karte__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.uro-karte__text { font-size: var(--fs-klein); margin-bottom: var(--sp-m); }
.uro-karte .uro-pfeil { margin-top: auto; }

@media (hover: hover) {
	.uro-karte:hover { background: var(--sand); border-color: var(--mauve); }
	.uro-band--sand .uro-karte:hover { background: var(--paper); }
	.uro-karte:hover .uro-pfeil::after { transform: translateX(2px); }
}
.uro-karte:active { background: var(--sand); }
.uro-band--sand .uro-karte:active { background: var(--paper); }

/* Tastatur bekommt dieselbe Karte markiert wie der Zeiger. Der globale
   Fokusring umschließt sonst nur den Titeltext, weil eine Outline die
   absolut positionierte Klickfläche des Nachfahren nicht mitzeichnet. */
.uro-karte:has(a:focus-visible) { background: var(--sand); border-color: var(--mauve); }
.uro-band--sand .uro-karte:has(a:focus-visible) { background: var(--paper); }
.uro-karte:has(a:focus-visible) .uro-pfeil::after { transform: translateX(2px); }
.uro-karte__titel a:focus-visible { outline: none; }
.uro-karte__titel a:focus-visible::after {
	outline: 2px solid var(--aubergine);
	outline-offset: 2px;
}

/* Karte 07 über die volle Rasterbreite */
@media (min-width: 40em) {
	/* Die Regel hing an einem Wrapper .uro-karte__inner, den es im Markup nie
	   gab – die Karte lief dadurch ungebremst über die volle Rasterbreite und
	   trug 94 Zeichen auf einer Zeile. Jetzt ist die Karte selbst das Raster. */
	.uro-karte--breit {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--sp-l);
		align-items: start;
	}
	.uro-karte--breit > .uro-karte__nr    { grid-column: 1; grid-row: 1; }
	.uro-karte--breit > .uro-karte__titel { grid-column: 1; grid-row: 2; }
	.uro-karte--breit > .uro-karte__text  { grid-column: 2; grid-row: 1 / 3; margin-bottom: 0; }
	.uro-karte--breit > .uro-pfeil        { grid-column: 2; grid-row: 3; }
}

/* --- 7. Drei-Felder-Raster (Startseite) --------------------------------- */

.uro-felder {
	display: grid;
	gap: var(--sp-l);
	list-style: none;
	padding: 0;
}
@media (min-width: 64em) {
	.uro-felder { grid-template-columns: repeat(3, 1fr); gap: var(--sp-l); }
}
.uro-feld { border-top: 2px solid var(--rule-1); padding-top: var(--sp-m); }
.uro-feld:nth-child(2) { border-top-color: var(--rule-2); }
.uro-feld:nth-child(3) { border-top-color: var(--rule-3); }
.uro-feld__titel { font-size: var(--fs-titel); margin-bottom: var(--sp-xs); }
.uro-feld__text { margin-bottom: var(--sp-m); }

/* --- 8. Listen ---------------------------------------------------------- */

.uro-liste { list-style: none; margin: 0; padding: 0; }

/* Trennlinien-Liste: Strichmarker plus Haarlinien */
.uro-liste--strich > li {
	position: relative;
	padding: var(--sp-s) 0 var(--sp-s) 2rem;
	border-bottom: 1px solid var(--line);
	min-height: 48px;
}
.uro-liste--strich > li:first-child { border-top: 1px solid var(--line); }
.uro-liste--strich > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--sp-s) + 0.7em);
	width: 14px;
	border-top: 2px solid var(--mauve);
}

/* Checkliste: derselbe Aufbau wie die Strich-Liste, der Marker ist ein
   Haken – gezeichnet wie der Chevron, ohne Kreis, in mauve. */
.uro-liste--check > li::before {
	top: calc(var(--sp-s) + 0.3em);
	left: 0.2em;
	width: 0.4em;
	height: 0.75em;
	border-top: 0;
	border-right: 1.5px solid var(--mauve);
	border-bottom: 1.5px solid var(--mauve);
	transform: rotate(45deg);
}

/* Geviertstrich-Liste ohne Linien */
.uro-liste--dash > li {
	position: relative;
	padding-left: 2rem;
}
.uro-liste--dash > li + li { margin-top: var(--sp-m); }
.uro-liste--dash > li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--mauve);
}

/* Punktliste */
.uro-liste--punkt > li {
	position: relative;
	padding-left: var(--sp-s);
}
.uro-liste--punkt > li + li { margin-top: var(--sp-xs); }
.uro-liste--punkt > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 5px;
	height: 5px;
	background: var(--mauve);
	border-radius: 50%;
}

/* Zweispaltige Zusagen-Liste (Blasenspiegelung) */
@media (min-width: 64em) {
	.uro-liste--zwei { columns: 2; column-gap: var(--sp-2xl); }
	.uro-liste--zwei > li { break-inside: avoid; }
}

/* Anlaufstelle-Raster */
.uro-raster-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-m); }
@media (min-width: 64em) {
	.uro-raster-liste { grid-template-columns: 1fr 1fr; gap: var(--sp-l) var(--sp-2xl); }
}
.uro-raster-liste > li { position: relative; padding-left: 2rem; }
.uro-raster-liste > li::before { content: "—"; position: absolute; left: 0; color: var(--mauve); }

/* Auf einen Blick: Kurzuebersicht als Leiste. Links die Ueberschrift mit
   einer Zeile, rechts vier Punkte einer Definitionsliste. Gestapelt trennt
   eine Haarlinie oben, nebeneinander eine senkrechte – kein Kasten, keine
   Icons: Begriff in der Titelrolle, Erklaerung im Kleintext. */
.uro-blick { display: grid; gap: var(--sp-l); }
.uro-blick__kopf p { margin-top: var(--sp-xs); font-size: var(--fs-klein); }
.uro-blick__liste { display: grid; gap: var(--sp-m); margin: 0; }
.uro-blick__punkt {
	border-top: 1px solid var(--line);
	padding-top: var(--sp-s);
}
@media (min-width: 40em) {
	.uro-blick__liste { grid-template-columns: repeat(2, 1fr); gap: var(--sp-l); }
}
@media (min-width: 64em) {
	.uro-blick {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 4fr);
		column-gap: var(--sp-m);
		align-items: start;
	}
	.uro-blick__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-m); }
	/* Der Abstand zur Linie ist links wie rechts der Spaltenabstand. */
	.uro-blick__punkt { border-top: 0; border-left: 1px solid var(--line); padding: 0 0 0 var(--sp-m); }
}
.uro-blick dt {
	font-size: var(--fs-titel);
	line-height: 1.35;
	color: var(--aubergine);
	text-wrap: balance;
}
.uro-blick dd {
	margin: var(--sp-xs) 0 0;
	font-size: var(--fs-klein);
	line-height: 1.6;
}

/* --- 9. Prozess-Ablauf -------------------------------------------------- */

.uro-ablauf {
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--sp-m);
	border-left: 1px solid var(--line);
	counter-reset: schritt;
}
.uro-ablauf > li {
	counter-increment: schritt;
	font-family: var(--font-sans);
	font-size: var(--fs-ui);
	color: var(--aubergine);
	padding-block: var(--sp-2xs);
}
.uro-ablauf > li + li { margin-top: var(--sp-s); }
.uro-ablauf > li::before {
	content: "0" counter(schritt);
	display: block;
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--track-label);
	color: var(--mauve);
	margin-bottom: 2px;
}

/* Ab genügend Containerbreite die horizontale Chip-Reihe des Entwurfs */
@container uro-band (min-width: 65rem) {
	.uro-ablauf--6 {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		border-left: 0;
		padding-left: 0;
		gap: var(--sp-m);
	}
	/* Muss das Geschwisterpaar treffen: .uro-ablauf > li + li hat dieselbe
	   Spezifitaet und zentrierte sonst den ersten Chip 8px hoeher. */
	.uro-ablauf--6 > li + li { margin-top: 0; }
	.uro-ablauf--6 > li {
		margin-top: 0;
		background: var(--surface-raised);
		border: 1px solid var(--line);
		padding: 0.5rem 1rem;
		white-space: nowrap;
	}
	.uro-ablauf--6 > li::before { content: none; }
	.uro-ablauf--6 > li { position: relative; }
	/* Der Pfeil gehört zwischen die Chips, nicht in den Chip. Innen stand er
	   auf der Kartenfläche, und zum Zielchip führten weniger Pixel als zum
	   Pfeil selbst – die Leserichtung las sich verkehrt. */
	.uro-ablauf--6 > li:not(:last-child)::after {
		content: "→";
		position: absolute;
		left: 100%;
		top: 50%;
		transform: translate(4px, -50%);
		color: var(--mauve);
	}
}
@container uro-band (min-width: 79rem) {
	.uro-ablauf--7 {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		border-left: 0;
		padding-left: 0;
		gap: var(--sp-m);
	}
	/* Muss das Geschwisterpaar treffen: .uro-ablauf > li + li hat dieselbe
	   Spezifitaet und zentrierte sonst den ersten Chip 8px hoeher. */
	.uro-ablauf--7 > li + li { margin-top: 0; }
	.uro-ablauf--7 > li {
		margin-top: 0;
		background: var(--surface-raised);
		border: 1px solid var(--line);
		padding: 0.5rem 1rem;
		white-space: nowrap;
	}
	.uro-ablauf--7 > li::before { content: none; }
	.uro-ablauf--7 > li { position: relative; }
	.uro-ablauf--7 > li:not(:last-child)::after {
		content: "→";
		position: absolute;
		left: 100%;
		top: 50%;
		transform: translate(4px, -50%);
		color: var(--mauve);
	}
}
.uro-band__inner { container: uro-band / inline-size; }

/* Schrittfolge mit Text: Nummer, Titel, ein Absatz. Gestapelt haengen die
   Schritte wie der Prozess-Ablauf an einer linken Haarlinie; ab 1024px
   stehen sie nebeneinander, jeder unter einer eigenen Kopf-Haarlinie.
   Keine Kaesten, keine Pfeile – die Nummer traegt die Reihenfolge. */
.uro-schritte {
	list-style: none;
	margin: 0;
	padding: 0 0 0 var(--sp-m);
	border-left: 1px solid var(--line);
	counter-reset: schritt;
}
.uro-schritte > li { counter-increment: schritt; }
.uro-schritte > li + li { margin-top: var(--sp-l); }
.uro-schritte > li::before {
	content: "0" counter(schritt);
	display: block;
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	line-height: 1.2;
	letter-spacing: var(--track-label);
	font-variant-numeric: lining-nums tabular-nums;
	color: var(--mauve);
	margin-bottom: var(--sp-xs);
}
.uro-schritte__titel { font-size: var(--fs-titel); line-height: 1.35; }
.uro-schritte__text {
	margin-top: var(--sp-xs);
	font-size: var(--fs-klein);
	line-height: 1.6;
	max-width: var(--measure);
}
/* --stapel bleibt auch auf breiten Schirmen untereinander – neben einem
   Bild in der Spalte waeren drei Spalten zu schmal. */
@media (min-width: 64em) {
	.uro-schritte:not(.uro-schritte--stapel) {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
		column-gap: var(--sp-2xl);
		padding-left: 0;
		border-left: 0;
	}
	.uro-schritte:not(.uro-schritte--stapel) > li { border-top: 1px solid var(--line); padding-top: var(--sp-s); }
	.uro-schritte:not(.uro-schritte--stapel) > li + li { margin-top: 0; }
}

/* --- 10. Profile, FAQ, Kontakt ------------------------------------------ */

.uro-profil + .uro-profil { margin-top: var(--sp-3xl); }
:root .uro-band__inner > h1 + .uro-profil { margin-top: var(--sp-xl); }
.uro-profil__bild img { width: 100%; }

.uro-faq { list-style: none; margin: 0; padding: 0; }
.uro-faq > li {
	border-top: 1px solid var(--line);
	padding-block: var(--sp-l);
}
.uro-faq > li:last-child { border-bottom: 1px solid var(--line); }
.uro-faq__frage { font-size: var(--fs-titel); margin-bottom: var(--sp-xs); }
/* Die Haarlinien spannen über die volle Containerbreite (Bandmotiv), der Text
   steht auf der Lesespalte – vorher liefen die Antworten mit 109 bis 148
   Zeichen pro Zeile. */
.uro-faq > li > * { max-width: var(--measure); }
.uro-faq__frage { max-width: var(--measure-display); }

/* Akkordeon: natives details/summary, kein Skript. Die Frage bleibt eine
   Ueberschrift (H3 in summary), die Haarlinien tragen weiter das Bandmotiv.
   Die Trefferflaeche kommt aus dem Innenabstand, nicht aus der Schrift. */
.uro-faq--akkordeon > li { padding-block: 0; }
.uro-faq--akkordeon > li > details { max-width: none; }
.uro-faq--akkordeon summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-m);
	padding-block: var(--sp-m);
	list-style: none;
	cursor: pointer;
}
.uro-faq--akkordeon summary::-webkit-details-marker { display: none; }
.uro-faq--akkordeon .uro-faq__frage {
	margin: 0;
	transition: color var(--dauer-schnell) var(--kurve);
}
/* Chevron rechts, dieselbe Zeichnung wie der Untermenue-Pfeil im Kopf.
   Er steht auf der Grundlinie der ersten Zeile, auch wenn die Frage
   zweizeilig umbricht. */
.uro-faq--akkordeon summary::after {
	content: "";
	flex: 0 0 auto;
	width: 0.45em;
	height: 0.45em;
	margin-bottom: 0.2em;
	font-size: var(--fs-titel);
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	color: var(--mauve);
	transform: rotate(45deg);
	transition: transform var(--dauer-schnell) var(--kurve), color var(--dauer-schnell) var(--kurve);
}
.uro-faq--akkordeon details[open] > summary::after { transform: rotate(-135deg); }
@media (hover: hover) {
	.uro-faq--akkordeon summary:hover .uro-faq__frage { color: var(--mauve); }
	.uro-faq--akkordeon summary:hover::after { color: var(--aubergine); }
}
.uro-faq__antwort { padding-bottom: var(--sp-m); }
.uro-faq__antwort > * { max-width: var(--measure); }
.uro-faq__antwort > * + * { margin-top: var(--sp-s); }
/* Die Antwort blendet ein, statt aufzuspringen – 180ms und 4px liegen unter
   der Schwelle, ab der Bewegung als Effekt auffaellt. */
.uro-faq--akkordeon details[open] > .uro-faq__antwort {
	animation: uro-faq-auf var(--dauer-mittel) var(--kurve);
}
@keyframes uro-faq-auf {
	from { opacity: 0; transform: translateY(-4px); }
}

.uro-kontakt { font-style: normal; }
.uro-kontakt dt {
	font-family: var(--font-serif);
	font-size: var(--fs-titel);
	color: var(--aubergine);
	margin-top: var(--sp-l);
}
.uro-kontakt dt:first-child { margin-top: 0; }
.uro-kontakt dd { margin: var(--sp-2xs) 0 0; }
/* Farbe allein reicht nicht: aubergine gegen text sind nur 1,8:1.
   Der Unterstrich kommt aus der Fließtext-Linkrolle weiter oben. */
.uro-kontakt .uro-tel {
	font-size: var(--fs-titel);
	font-variant-numeric: lining-nums tabular-nums;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* --- 11. Bilder --------------------------------------------------------- */

.uro-bild { display: block; background: var(--sand); }
.uro-bild img { width: 100%; height: 100%; object-fit: cover; }
/* picture ist inline; als Block traegt es die Hoehe des Rahmens weiter,
   sonst laeuft ein 4:3-Foto aus dem 3:2-Rahmen. */
.uro-bild picture { display: block; height: 100%; }
.uro-bild--45 { aspect-ratio: 4 / 5; }
.uro-bild--32 { aspect-ratio: 3 / 2; }
.uro-bild--169 { aspect-ratio: 16 / 9; }
@media (max-width: 63.99em) {
	/* Die Bremse gehoert an die Huelle: sie traegt das Seitenverhaeltnis,
	   das img fuellt sie ohnehin per object-fit. */
	.uro-bild { max-height: 70vh; }
}

/* Bild-Platzhalter: sichtbar nur im Entwurfszustand (body.uro-entwurf).
   Auf der Live-Seite blenden sie sich selbst aus, damit nie ein gestrichelter
   Kasten mit Regieanweisung ausgeliefert wird. */
.uro-bild--platzhalter {
	display: grid;
	place-items: center;
	padding: var(--sp-m);
	background: var(--placeholder-fill);
	border: 1px dashed var(--placeholder-line);
	text-align: center;
}
/* Auf beiden Bandfarben dieselbe Flaeche – der Platzhalter soll als
   Fremdkoerper lesbar bleiben, nicht sich einfuegen. */
.uro-bild__regie {
	max-width: 24rem;
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
	line-height: 1.8;
	letter-spacing: var(--track-label);
	text-transform: uppercase;
	color: var(--text);
}
.uro-bild__regie b {
	display: block;
	font-weight: 600;
	color: var(--aubergine);
	margin-bottom: var(--sp-2xs);
}
.uro-bild__format {
	display: block;
	margin-top: var(--sp-2xs);
	letter-spacing: var(--track-label);
	color: var(--text);
}

/* Ohne Entwurfszustand verschwinden Platzhalter restlos, und die Sektion
   fällt auf die einspaltige Textvariante zurück. */
body:not(.uro-entwurf) .uro-bild--platzhalter { display: none; }
/* Nur ein Split mit Platzhalter faellt live auf eine Spalte zurueck –
   ein Split mit echtem Foto bleibt zweispaltig. */
body:not(.uro-entwurf) .uro-split--media:has(> .uro-bild--platzhalter),
body:not(.uro-entwurf) .uro-split--media-links:has(> .uro-bild--platzhalter) { display: block; }
body:not(.uro-entwurf) .uro-split--media:has(> .uro-bild--platzhalter) > .wp-block-group,
body:not(.uro-entwurf) .uro-split--media-links:has(> .uro-bild--platzhalter) > .wp-block-group { max-width: var(--measure); }

/* Text links, Bild rechts – ab 1024px. Der Text liegt in einer eigenen
   Gruppe, damit das Bild nicht über die Textzeilen gespannt wird. */

@media (min-width: 64em) {
	.uro-split--media,
	.uro-split--media-links { grid-template-columns: 1fr 1fr; align-items: start; }
	.uro-split--media-links > :first-child { order: 2; }
	/* Kurzer Text neben einem hoeheren Bild: mittig statt oben, sonst haengt
	   unter dem Text ein leeres Drittel (Patientinnen-Hero). */
	.uro-split--mitte { align-items: center; }
}


/* --- 12. Header --------------------------------------------------------- */

.uro-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
}
.uro-skip:focus {
	left: 1rem;
	top: 1rem;
	background: var(--aubergine);
	color: var(--paper);
	padding: 0.75rem 1.25rem;
	font-family: var(--font-sans);
	font-size: var(--fs-ui);
	text-decoration: none;
}

/* WordPress umschließt Template-Parts mit einem eigenen Kasten.
   Der begrenzt position:sticky auf die Header-Höhe – deshalb auflösen. */
.wp-site-blocks > .wp-block-template-part { display: contents; }

.uro-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	transition: box-shadow var(--dauer-mittel) var(--kurve);
}
/* Die einzige erlaubte Ausnahme vom schattenlosen System (DESIGN.md,
   „Elevation & Depth"): ein sehr weicher Schatten, sobald der Kopf klebt.
   Die 1px-Linie bleibt in beiden Zuständen stehen. */
.uro-header--gescrollt { box-shadow: 0 6px 20px -10px rgb(61 34 51 / 0.2); }
/* Bei 320px braucht die Kopfzeile 309px und hat 280px. Deshalb starten
   Abstände, Wortmarke und Button kompakt und öffnen erst ab 40em auf ihr
   volles Maß. Der Termin-Button bleibt dabei auf jeder Breite sichtbar –
   er ist laut docs/webstruktur.md §13 der einzige seitenübergreifende
   Terminweg und darf nicht ausgeblendet werden. */
.uro-header__inner {
	/* Bänder und Footer tragen den Gutter außerhalb der 1168px. Der Kopf trug
	   ihn innerhalb – dadurch begann die Wortmarke 56px weiter rechts als
	   jede H1 darunter. */
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	gap: var(--sp-2xs);
}

.uro-marke {
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: var(--sp-2xs);
	text-decoration: none;
	min-width: 0;
	margin-right: auto;
}
.uro-marke__icon { flex: 0 0 auto; }
.uro-marke__text { min-width: 0; }
.uro-marke__name {
	font-family: var(--font-serif);
	font-size: clamp(1rem, 0.9rem + 0.8vw, 1.6rem);
	line-height: 1.15;
	color: var(--aubergine);
	white-space: nowrap;
}

@media (min-width: 40em) {
	.uro-header__inner { gap: var(--sp-s); }
	.uro-marke { gap: var(--sp-xs); }
}

/* Letzte Sicherung: lieber zweizeilig als unter den Button laufend.
   Zwei Zeilen à 18px plus Claim passen in die 64px hohe Kopfzeile. */
@media (max-width: 30em) {
	.uro-marke__name {
		white-space: normal;
		/* Greift nur, wenn das Wort sonst nicht passt – etwa wenn eine Nutzerin
		   die Laufweite erhoeht (WCAG 1.4.12). Ohne das ueberlappt die
		   Wortmarke dann den Termin-Button. */
		overflow-wrap: break-word;
	}
}
.uro-marke__name em { font-style: normal; color: var(--mauve); }
.uro-marke__claim {
	display: none;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: var(--fs-eyebrow);
	line-height: 1.2;
	margin-top: var(--sp-3xs);
	color: var(--mauve);
}
@media (min-width: 80em) {
	.uro-marke__claim { display: block; }
}

.uro-nav { display: none; }
@media (min-width: 80em) {
	.uro-nav { display: block; }
	/* Die Menuepunkte laufen auf volle Kopfhoehe. Nur so sitzt das Untermenue
	   an der Unterkante des Kopfes und nicht mitten darin. */
	.uro-nav { align-self: stretch; display: flex; }
	/* Nur die oberste Ebene ist eine Reihe – das Untermenue ist eine Liste. */
	.uro-nav > ul {
		display: flex;
		align-items: stretch;
		/* 24px statt 32: die groessere Menueschrift hat die Reserve zwischen
		   Wortmarke und Menue aufgebraucht. Der Button bleibt mit 40px
		   weiterhin deutlich abgesetzt. */
		gap: var(--sp-m);
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.uro-nav a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-block: 0.75rem;
		font-family: var(--font-sans);
		font-size: var(--fs-ui);
		color: var(--text);
		text-decoration: none;
	}
	/* Der Marker hängt am Text, nicht an der 44px hohen Klickbox – sonst
	   steht der Strich 13px unter dem Wort. Dieselbe Mechanik trägt die
	   Zustandsstufe transparent → mauve-light (Hover) → mauve (aktuell). */
	.uro-nav > ul > li > a { position: relative; }
	.uro-nav > ul > li > a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(50% - 0.9em);
		height: 1px;
		background: transparent;
		transition: background-color var(--dauer-schnell) var(--kurve);
	}
	.uro-nav a:hover { color: var(--aubergine); }
	.uro-nav > ul > li > a:hover::after { background: var(--mauve-light); }
	.uro-nav [aria-current] {
		color: var(--aubergine);
		font-weight: 600;
		box-shadow: none;
	}
	.uro-nav > ul > li > [aria-current]::after { background: var(--mauve); }
}

.uro-header__cta { flex: 0 0 auto; }
.uro-header__cta .uro-btn {
	min-height: 44px;
	padding: 0.75rem;
	font-size: var(--fs-eyebrow);
}
@media (min-width: 40em) {
	.uro-header__cta .uro-btn { padding: 0.75rem 1.5rem; }
}

/* Der Primärbutton soll „abgesetzt" stehen (DESIGN.md, Components). Über den
   pauschalen Flex-Gap stand er mit 16px enger am Menü als die Menüpunkte
   untereinander mit 30px – der Abstand zur stärksten Aktion war der kleinste
   im ganzen Kopf. Der Freiraum wird jetzt bewusst platziert. */
@media (min-width: 80em) {
	.uro-header__inner { gap: 0; }
	.uro-marke { margin-right: 0; }
	.uro-nav { margin-left: auto; }
	.uro-header__cta { margin-left: 2.5rem; }
	.uro-header__cta .uro-btn { padding: 0.875rem var(--sp-m); font-size: var(--fs-ui); }
}
.uro-header__cta .uro-btn__lang { display: none; }
@media (min-width: 40em) {
	.uro-header__cta .uro-btn__lang { display: inline; }
	.uro-header__cta .uro-btn__kurz { display: none; }
}

.uro-burger {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}
@media (min-width: 80em) { .uro-burger { display: none; } }
.uro-burger span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--aubergine);
	transition: transform var(--dauer-mittel) var(--kurve), opacity var(--dauer-schnell) var(--kurve);
}
.uro-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.uro-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.uro-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Wortmarke und Burger waren die einzigen Bedienelemente ohne jede
   Rückmeldung. Gleiche Zeichnung wie bei den Fließtext-Links. */
.uro-marke__name {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: transparent;
	text-underline-offset: 0.18em;
	transition: text-decoration-color var(--dauer-schnell) var(--kurve);
}
@media (hover: hover) {
	.uro-marke:hover .uro-marke__name { text-decoration-color: var(--mauve-light); }
	.uro-burger:hover span { background: var(--mauve); }
}
.uro-burger:active { transform: translateY(1px); }

.uro-overlay {
	position: fixed;
	/* +1px für den Rahmen des Headers – sonst legt sich die Ebene auf die Kante. */
	inset: calc(var(--header-h) + 1px) 0 0;
	background: var(--paper);
	overflow-y: auto;
	padding: var(--sp-m) var(--gutter) var(--sp-xl);
	z-index: 40;
}
/* Zeigt, woher die Ebene kommt. 180ms und 6px liegen unter der Schwelle,
   ab der Bewegung als Effekt auffällt. */
.uro-overlay:not([hidden]) {
	animation: uro-overlay-auf var(--dauer-mittel) var(--kurve);
}
@keyframes uro-overlay-auf {
	from { opacity: 0; transform: translateY(-6px); }
}
.uro-overlay[hidden] { display: none; }
@media (min-width: 80em) { .uro-overlay { display: none !important; } }
.uro-overlay ul { list-style: none; margin: 0; padding: 0; }
.uro-overlay > ul > li { border-bottom: 1px solid var(--line); }
.uro-overlay a {
	display: flex;
	align-items: center;
	min-height: 56px;
	font-family: var(--font-sans);
	font-size: var(--fs-klein);
	color: var(--aubergine);
	text-decoration: none;
}
.uro-overlay [aria-current] { font-weight: 600; box-shadow: inset 0 -1px 0 0 var(--mauve); }
.uro-overlay__sub a {
	min-height: 48px;
	padding-left: var(--sp-s);
	font-size: var(--fs-ui);
	color: var(--text);
}
/* --- Untermenues im Kopf ------------------------------------------------
   Kein Hover-Menue: der Menuepunkt bleibt ein Link auf die Uebersicht, das
   Aufklappen liegt in einem eigenen Button daneben. Damit ist derselbe
   Zustand mit Maus, Tastatur und Screenreader erreichbar. */
@media (min-width: 80em) {
	.uro-nav > ul > li { display: flex; align-items: center; }
	.uro-nav__hat { position: relative; gap: 0.125rem; }

	.uro-nav__auf {
		display: grid;
		place-items: center;
		width: 28px;
		min-height: 44px;
		padding: 0;
		background: none;
		border: 0;
		color: var(--text);
		cursor: pointer;
	}
	.uro-nav__auf::after {
		content: "";
		width: 0.4em;
		height: 0.4em;
		margin-top: -0.2em;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transition: transform var(--dauer-schnell) var(--kurve);
	}
	.uro-nav__auf[aria-expanded="true"] { color: var(--aubergine); }
	.uro-nav__auf[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 0.2em; }
	@media (hover: hover) { .uro-nav__auf:hover { color: var(--aubergine); } }

	.uro-nav__sub {
		position: absolute;
		top: calc(100% + 1px);
		left: 0;
		min-width: 16rem;
		margin: 0;
		padding: var(--sp-2xs) 0;
		list-style: none;
		background: var(--paper);
		border: 1px solid var(--line-stark);
		z-index: 60;
		animation: uro-sub-auf var(--dauer-schnell) var(--kurve);
	}
	.uro-nav__sub[hidden] { display: none; }
	/* Das letzte Untermenue darf nicht ueber die rechte Satzkante laufen. */
	.uro-nav__hat:last-child .uro-nav__sub { left: auto; right: 0; }
	.uro-nav__sub a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0.5rem var(--sp-s);
		white-space: nowrap;
	}
	.uro-nav__sub a::after { content: none; }
	@media (hover: hover) { .uro-nav__sub a:hover { background: var(--sand); color: var(--aubergine); } }
	.uro-nav__sub [aria-current] { color: var(--aubergine); font-weight: 600; }
}
@keyframes uro-sub-auf {
	from { opacity: 0; transform: translateY(-4px); }
}

/* --- Nach oben ---------------------------------------------------------- */

.uro-nach-oben {
	/* Fuellstand 0 bis 1, wird beim Scrollen von navigation.js gesetzt. */
	--fortschritt: 0;
	/* Wie weit der Knopf gerade auf dunklem Grund steht, 0 bis 1. Der Wert
	   ist der Ueberdeckungsanteil, nicht ein Schalter – waehrend die Bandkante
	   durch die 44px des Knopfes wandert, kehrt er sich stufenlos um. */
	--dunkel: 0;

	/* Grundwerte fuer hellen Grund. Kennt ein Browser color-mix nicht,
	   bleiben genau diese stehen – der Knopf verliert dann nur die
	   Umkehrung, nicht seine Lesbarkeit. */
	--fuellung: var(--aubergine);
	--grund: var(--paper);
	--rand: var(--line-stark);
	--pfeil: var(--mauve);
	--fuellung: color-mix(in oklab, var(--aubergine) calc((1 - var(--dunkel)) * 100%), var(--paper));
	--grund: color-mix(in oklab, var(--paper) calc((1 - var(--dunkel)) * 100%), var(--aubergine-deep));
	--rand: color-mix(in oklab, var(--line-stark) calc((1 - var(--dunkel)) * 100%), var(--paper));
	--pfeil: color-mix(in oklab, var(--mauve) calc((1 - var(--dunkel)) * 100%), var(--paper));

	position: fixed;
	inset-block-end: var(--sp-m);
	inset-inline-end: var(--gutter);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	/* Der Knopf ist zugleich Standanzeige: er fuellt sich von unten nach oben,
	   je weiter die Seite gelesen ist. Harte Kante statt Verlauf – der
	   Fuellstand soll ablesbar sein, nicht dekorativ. */
	background: linear-gradient(
		to top,
		var(--fuellung) calc(var(--fortschritt) * 100%),
		var(--grund) calc(var(--fortschritt) * 100%)
	);
	border: 1px solid var(--rand);
	border-radius: 0;
	color: var(--pfeil);
	font-size: var(--fs-klein);
	cursor: pointer;
	z-index: 45;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	/* Nur Erscheinen und Verschwinden bekommen einen Uebergang. Fuellstand und
	   Umkehrung nicht: beide haengen am Scrollwert und muessen im Gleichschritt
	   laufen. Ein Uebergang auf der Farbe liesse den Pfeil der Fuellkante
	   hinterherlaufen – man saehe zwei Zustaende gleichzeitig. */
	transition: opacity var(--dauer-mittel) var(--kurve),
			transform var(--dauer-mittel) var(--kurve),
			visibility var(--dauer-mittel);
}
/* Sobald die Fuellung den Pfeil erreicht, steht er auf der Fuellflaeche und
   braucht deren Gegenfarbe – auf hellem Grund Papier auf Aubergine (13,3:1),
   auf dunklem Grund umgekehrt Aubergine auf Papier. */
.uro-nach-oben--gefuellt {
	--pfeil: var(--paper);
	--pfeil: color-mix(in oklab, var(--paper) calc((1 - var(--dunkel)) * 100%), var(--aubergine));
}
/* Zwischen 36 und 64 Prozent laeuft die Fuellkante durch den Pfeil. Ein
   halbfetter Schnitt haelt ihn auf beiden Flaechen lesbar, und der
   Farbwechsel bei der Haelfte laeuft ueber 120ms statt zu springen. */
.uro-nach-oben__pfeil { font-weight: 600; line-height: 1; }
.uro-nach-oben--sichtbar { opacity: 1; visibility: visible; transform: none; }

/* Ab Tabletbreite seitlich auf halber Hoehe – auf dem schmalen Bildschirm
   bliebe er dort ueber dem Text stehen, deshalb dort weiter unten rechts.
   translate uebernimmt die Zentrierung, transform die Einblendung. */
@media (min-width: 64em) {
	.uro-nach-oben {
		inset-block-end: auto;
		inset-block-start: 50%;
		inset-inline-end: var(--sp-m);
		translate: 0 -50%;
	}
}
/* Hover faerbt den Rand, nicht die Flaeche – die traegt den Fuellstand. */
/* Hover faerbt den Rand ueber dieselbe Rolle, damit die Umkehrung greift. */
@media (hover: hover) { .uro-nach-oben:hover { --rand: var(--mauve); } }
.uro-nach-oben:active { transform: translateY(1px); }
/* Bei offenem Menue nicht ueber dem Overlay schweben. */
body.uro-menu-offen .uro-nach-oben { opacity: 0; visibility: hidden; }

/* Genau ein Primaerbutton: bei offenem Menue traegt ihn das Overlay. */
body.uro-menu-offen .uro-header__cta { display: none; }
.uro-overlay__cta { margin-top: var(--sp-l); }
.uro-overlay__cta .uro-btn { width: 100%; font-size: var(--fs-ui); }

body.uro-menu-offen { overflow: hidden; }

/* --- 13. Footer --------------------------------------------------------- */

.uro-footer {
	background: var(--aubergine-deep);
	/* 0.82 wie im dunklen Band; die 0.70 sind laut DESIGN.md der Fusszeile
	   vorbehalten, nicht dem ganzen Footer. */
	color: var(--on-dark-muted);
	/* Beide Werte aus derselben Familie: unten stand ein fester Elementabstand
	   gegen eine fluide Sektionsstufe oben, das Verhältnis wanderte mit der
	   Breite und der Footer sah unten abgeschnitten aus. */
	padding-block: var(--section-md) var(--sp-l);
	padding-inline: var(--gutter);
	font-size: var(--fs-klein);
	/* Halbdurchschuss einer 44px hohen Linkzeile: (44 − 1.6 × 16) / 2 */
	--zeilenluft: 9.2px;
}
.uro-footer__inner { max-width: var(--container); margin-inline: auto; }
.uro-footer__spalten {
	display: grid;
	gap: var(--sp-l);
	/* Ohne das streckt das Grid alle Spalten auf die Höhe der längsten und
	   spannt unter den kurzen unsichtbare Leerflächen auf. */
	align-items: start;
}
@media (min-width: 40em) {
	.uro-footer__spalten { grid-template-columns: 1fr 1fr; gap: var(--sp-xl); }
	/* Sieben Leistungen untereinander machten die Spalte fünfmal so hoch wie
	   ihre Nachbarn. Zweispaltig halbiert sich das, ohne den Footer zu
	   verbreitern. */
	/* 12rem Mindestbreite: passen zwei Spalten nicht, wird es von selbst wieder
	   eine. Das erspart einen eigenen Breakpoint. */
	.uro-footer__liste--zwei { columns: 12rem 2; column-gap: var(--sp-l); }
	.uro-footer__liste--zwei > li { break-inside: avoid; }
}
/* Verteilung folgt dem Inhalt, nicht dem Schema. Bei 1.5fr 1fr 1fr 1fr trug
   die breiteste Spalte 93px Inhalt und die schmalste 486px – und zwischen
   1024 und 1107px brachen „Termin vereinbaren →“ und der längste
   Leistungslink zweizeilig um. */
/* Vier Spalten erst ab 1200px. Bei 1024px waren sie so schmal, dass
   „Termin vereinbaren“, „Perimenopause und Menopause“ und „Prävention und
   Beratung“ zweizeilig umbrachen; bis dahin trägt die Zweispaltigkeit. */
@media (min-width: 75em) {
	.uro-footer__spalten {
		grid-template-columns: 1.05fr 0.8fr 0.85fr 1.9fr;
		column-gap: var(--sp-l);
	}
}

.uro-footer h3 { color: var(--mauve-light); margin-bottom: var(--sp-s); }
.uro-footer ul { list-style: none; margin: 0; padding: 0; }
.uro-footer a { color: inherit; text-decoration: none; }
.uro-footer li a,
.uro-footer__recht a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
@media (hover: hover) {
	.uro-footer a:hover { color: var(--on-dark); text-decoration: underline; }
}
/* Der Halbdurchschuss der 44px hohen Linkzeilen wird herausgerechnet, sonst
   steht unter zwei gleich hohen Überschriften unterschiedlich viel Luft und
   der Abstand innerhalb einer Gruppe wird größer als der zwischen zweien. */
.uro-footer h3 + ul { margin-top: calc(var(--zeilenluft) * -1); }
.uro-footer ul + h3 { margin-top: calc(var(--sp-l) - var(--zeilenluft)); }
.uro-footer [aria-current] { color: var(--on-dark); }
.uro-footer__marke .uro-marke__name { color: var(--on-dark); font-size: var(--fs-h3); }
.uro-footer__marke .uro-marke__name em { color: var(--mauve-light); }
.uro-footer__claim { font-style: italic; font-size: var(--fs-eyebrow); margin-top: var(--sp-2xs); }
.uro-footer__claim--2 { font-size: var(--fs-eyebrow); margin-top: var(--sp-s); }

.uro-footer__unten {
	margin-top: var(--sp-xl);
	padding-top: var(--sp-m);
	border-top: 1px solid var(--on-dark-line);
	/* Die schwaechste Stufe gilt nur hier, nicht im ganzen Footer. */
	color: var(--on-dark-quiet);
	display: flex;
	flex-direction: column;
	gap: var(--sp-m);
	font-family: var(--font-sans);
	font-size: var(--fs-eyebrow);
}
@media (min-width: 48em) {
	.uro-footer__unten { flex-direction: row; justify-content: space-between; align-items: center; }
}
/* Spaltenabstand ist nicht Zeilenabstand: umbrechende Rechtslinks standen
   mit 24px weiter auseinander als die beiden Bloecke der Fusszeile. */
.uro-footer__recht { display: flex; flex-wrap: wrap; column-gap: var(--sp-m); row-gap: 0; }
.uro-footer__namen { text-wrap: balance; }
.uro-footer__namen span { white-space: nowrap; }

/* --- 14. Zustände ------------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--aubergine);
	outline-offset: 2px;
}
/* Der helle Ring haengt am dunklen Kontext, nicht an einer Buttonvariante –
   sonst bekaeme derselbe Button auf hellem Grund einen unsichtbaren Ring. */
.uro-band--dark :focus-visible,
.uro-footer :focus-visible {
	outline-color: var(--paper);
}

/* Windows-Kontrastmodus: Flaechen und eigene Farben fallen dort weg. Was
   traegt, muessen Raender und Systemfarben sein – sonst verschwinden
   Kartengrenzen, Fokusring und der Nach-oben-Knopf. */
@media (forced-colors: active) {
	.uro-karte,
	.uro-nav__sub,
	.uro-nach-oben,
	.uro-bild--platzhalter { border: 1px solid CanvasText; }
	.uro-btn { border: 1px solid ButtonText; }
	:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
	.uro-header--gescrollt { border-bottom: 2px solid CanvasText; }
	.uro-nav > ul > li > [aria-current]::after,
	.uro-nav > ul > li > a:hover::after { background: Highlight; forced-color-adjust: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0.01ms !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-contrast: more) {
	body { color: var(--text-strong); }
	.uro-footer { color: var(--on-dark); }
	.uro-liste--strich > li { border-color: var(--mauve); }
}

/* --- 15. Hilfsklassen --------------------------------------------------- */

.uro-visuell-versteckt {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.uro-zentriert { text-align: center; margin-inline: auto; }
.uro-abschluss { text-align: center; }
.uro-abschluss .uro-btns { justify-content: center; }
.uro-abschluss__karten { text-align: left; }