/*
 * Global base: typography, links, focus visibility, layout primitives.
 * Loads after the Divi parent stylesheet and tokens.css; components
 * (buttons, cards, tags, navigation, footer decoration) live in
 * components.css.
 *
 * Design concept "Rheinband": design/konzept.html — chapter 06 (type),
 * 07 (space and shape), 09 (motion), 10 (accessibility). Every colour comes
 * from tokens.css: the contrast ratios there are computed, not estimated, so
 * a literal hex would quietly opt out of that guarantee.
 */

html {
	scroll-behavior: smooth;

	/* The header is sticky and about 4.5rem tall, so an anchor jump would
	   otherwise land behind it. */
	scroll-padding-top: 5rem;
}

body {
	background: var(--rq-surface);
	color: var(--rq-text);
	font-family: var(--rq-font-body);
	font-size: var(--rq-step-0);

	/* The concept's running-text leading. Figtree has a large x-height and the
	   measure runs to 68 characters; at 1.5 the lines start to stick. */
	line-height: 1.65;

	/* Matches the approved mockup. Only the rasterizer changes — the computed
	   contrast ratios in tokens.css are unaffected. */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * text-wrap: pretty only rebalances the last two lines, so where it is not
 * supported nothing is lost — but German copy produces one-word last lines
 * often enough to be worth it.
 */
p,
li {
	text-wrap: pretty;
}

/* --- Headings ------------------------------------------------------------
 * Bricolage Grotesque is a variable face with an optical-size axis. Without
 * font-optical-sizing the browser renders every size from the text cut;
 * with it the display cut — tighter fit, finer joints — appears by itself at
 * hero size. That is the whole reason this face was chosen over a static one.
 */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--rq-font-display);
	font-optical-sizing: auto;
	color: var(--rq-ink);
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-wrap: balance;

	/* German compounds ("Antidiskriminierungsberatung") overrun a narrow
	   column long before they would wrap on their own. */
	overflow-wrap: break-word;
}

/*
 * The concept sets headings 1–1.5 % tight. Default tracking only becomes
 * visible at size, so the two display weights take the full −1.5 % and the
 * smaller headings keep the −1 % set above.
 */
h1,
h2 {
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.12;
}

h3,
h4,
h5,
h6 {
	font-weight: 700;
}

/*
 * Sizes. --rq-step-4 reaches 4.4rem, and that is a display size, not an h1
 * size: it belongs to the homepage hero, where the Rheinband gives it room
 * and nothing else competes. Every other h1 on this site is a page title
 * inside a 68ch measure (see the layouts — they all wrap the title in
 * .rq-measure), where 4.4rem would out-shout the copy it introduces and break
 * into three-word lines. So the site-wide h1 stays one step down and the hero
 * opts into the display size instead of the other way round.
 */
h1 { font-size: var(--rq-step-3); }
h2 { font-size: var(--rq-step-3); }
h3 { font-size: var(--rq-step-1); }
h4,
h5,
h6 { font-size: var(--rq-step-0); }

.rq-hero h1 {
	font-size: var(--rq-step-4);
}

/*
 * h2 shares step-3 with h1 because in the concept an h2 is a *section*
 * heading on a designed page, where the h1 above it is the hero at step-4.
 * A page without a hero has no such h1, so its section headings would tie
 * with the page title — there they step down one and the hierarchy holds.
 * Adding .rq-hero to a page is therefore an explicit switch into the display
 * scale, not just a background.
 */
body:not(:has(.rq-hero)) h2 {
	font-size: var(--rq-step-2);
}

/* --- Eyebrow -------------------------------------------------------------
 * The uppercase section label, with the Rheinband as a 26px dash in front of
 * it — the smallest and most frequent appearance of the motif. Set it on the
 * element that carries the label text, e.g.
 * <p class="rq-eyebrow">Nächster Termin</p> inside a Divi text module.
 *
 * Write the source text in sentence case and let CSS do the capitals: some
 * screen readers spell out words that are uppercase in the markup.
 */

.rq-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;

	/* Figtree, even when the label sits on a heading element. */
	font-family: var(--rq-font-body);

	/* Fixed, not a step: uppercase tracking is tuned to one size, and a fluid
	   size would drift away from the +9 % the concept specifies. */
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--rq-text-muted);
}

.rq-eyebrow::before {
	content: '';
	flex: 0 0 auto;
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: var(--rq-band);
}

/* --- Numerals ------------------------------------------------------------
 * Dates come out of inc/events.php inside <time>, and Figtree's default
 * figures are proportional — a column of dates would stagger.
 */

time,
th,
td {
	font-variant-numeric: tabular-nums;
}

/* --- Links ---------------------------------------------------------------
 * Terracotta as type is always the -strong variant (5.45:1 on cream,
 * 4.82:1 on sand). --rq-accent itself is a fill and never lands here.
 */

a {
	color: var(--rq-accent-strong);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--rq-ink);
}

/*
 * Divi resets links to text-decoration: none. Body links then differ from the
 * surrounding text by colour alone, which is not enough on its own, so the
 * underline is put back where links sit inside running text.
 */
.et_pb_text a,
.rq-measure a,
.rq-accordion a {
	text-decoration-line: underline;
}

/*
 * Exceptions, after the rule above so they win.
 *
 * Two kinds. First the header wordmark and both menus: they are Divi modules
 * whose markup includes .et_pb_text, so the exception has to name them rather
 * than the section — an underlined wordmark reads as a mistake. The footer is
 * deliberately NOT excluded wholesale: its links are the same --rq-on-dark as
 * its running text, so without an underline a link in a footer paragraph is
 * invisible as a link. Only its menu opts out.
 *
 * Second the controls. A pill, an arrow or a filled surface already says
 * "this does something", so the underline running text needs would only add
 * noise. They are named class by class because they sit in the same modules as
 * prose links that must keep theirs — and with a.rq-… as well as
 * .et_pb_text a.rq-…, because the class-plus-element form has to outweigh
 * .et_pb_text a wherever the module wrapper is missing.
 */
.et_pb_button,
.rq-cta a,
.rq-header a,
.rq-footer .et_pb_menu a,
.rq-footer nav a,
.et_pb_text a.rq-button,
.et_pb_text a.rq-button-secondary,
.et_pb_text a.rq-chip,
.et_pb_text a.rq-card__link,
.et_pb_text a.rq-quiet-link,
a.rq-button,
a.rq-button-secondary,
a.rq-chip,
a.rq-card__link,
a.rq-quiet-link {
	text-decoration: none;
}

/* --- Dark surfaces -------------------------------------------------------
 * On aubergine exactly three colours are legible enough to be type:
 * --rq-on-dark (16.83:1), --rq-on-dark-muted (10.54:1) and --rq-gold (8.03:1).
 * Nothing else may appear here.
 */

.rq-footer a,
.rq-skip-link {
	color: var(--rq-on-dark);
}

/*
 * rq-footer sits on the footer section, not on a single module, so the running
 * text inside it needs the inversion as well — body copy would otherwise be
 * --rq-text on aubergine (1.1:1) and headings likewise. Named element by
 * element because the h1–h6 rule above sets a colour of its own that
 * inheritance from the section cannot override.
 */
.rq-footer,
.rq-footer p,
.rq-footer li,
.rq-footer h1,
.rq-footer h2,
.rq-footer h3,
.rq-footer h4,
.rq-footer h5,
.rq-footer h6 {
	color: var(--rq-on-dark);
}

.rq-footer .rq-eyebrow {
	color: var(--rq-on-dark-muted);
}

/*
 * Gold, not white: the previous hover moved to a near-identical cream, so the
 * hover state was effectively invisible. Gold is the concept's hover on dark
 * and the only third colour the dark surface allows.
 */
.rq-footer a:hover,
.rq-skip-link:hover {
	color: var(--rq-gold);
}

/* --- Focus ---------------------------------------------------------------
 * Divi ships outline: none in several places; the ring must win against the
 * parent theme, hence the !important (deliberate, documented).
 *
 * --rq-accent is allowed here because a 2px ring is a UI element, not type:
 * it needs 3:1 and reaches 3.88:1 on cream and 4.33:1 on aubergine, so the
 * same ring works on both grounds. The 2px offset keeps it off the glyphs.
 */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--rq-accent) !important;
	outline-offset: 2px !important;
}

/* Skip link — first focusable element, output in inc/a11y.php. */
.rq-skip-link {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 100000;
	background: var(--rq-ink);
	padding: var(--rq-space-xs) var(--rq-space-s);
	border-radius: 0 0 var(--rq-radius) 0;
	font-weight: 600;
	text-decoration: none;
}

.rq-skip-link:focus {
	left: 0;
}

/* --- Layout primitives --------------------------------------------------- */

/* Reading measure for single posts and long-form pages (Theme Builder). */
.rq-measure {
	max-width: var(--rq-measure);
	margin-inline: auto;
}

/*
 * A plain <hr> becomes the Rheinband at its smallest: a 3px rule. The motif
 * is a fill here, never a text colour, and a rule is small enough that the
 * "once large per page" limit does not apply.
 */
hr {
	height: 3px;
	margin-block: var(--rq-space-l);
	border: 0;
	border-radius: 2px;
	background: var(--rq-band);
}

/* Terracotta tint behind ink — 14.1:1, and it keeps the selection inside the
   palette instead of falling back to the browser's blue. */
::selection {
	background: var(--rq-accent-tint);
	color: var(--rq-ink);
}

/* Visually hidden, still read by screen readers. */
.rq-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Motion --------------------------------------------------------------
 * The concept's animations (the drifting band, the card reveal) are set up to
 * be switched off entirely; this block also neutralizes Divi's own scroll and
 * entrance effects, which no setting in the builder turns off per visitor.
 */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	/* body:not(.et-fb) keeps Divi's own builder interface usable for editors
	   who have reduced motion enabled. */
	body:not(.et-fb) *,
	body:not(.et-fb) *::before,
	body:not(.et-fb) *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}