/* olybock.com Layout 2026 (Vorbild lucasballasy.com). Farben je Bereich wie die Titelbilder. */
:root {
	/* Olivers Farben (14.10.2026): Burgund als Rahmen und Akzent, Oliv, Dunkelblau, Anthrazit. Hell als Standard, dunkel folgt dem System. */
	color-scheme: light dark;
	--oly-accent: #5b1f2b;      /* Rahmen, Flächen, Linien */
	--oly-accent-ink: #6b2232;  /* Text und Knöpfe: 11:1 auf Weiß */
	--oly-navy: #1c2b45;
	--oly-bg: #fff;
	--oly-on-ink: #fff;         /* Schrift auf Flächen in --oly-ink */
	--oly-ink: #111;
	--oly-text: #2b2b2e;
	--oly-muted: #6f6f73;
	--oly-line: #e4e2dd;
	--oly-sand: #f4efe7;
	--oly-sand-hover: #efe6d8;
	--oly-stat-text: #4a4a4e;
	--oly-field-bg: #fff;
	--oly-field-border: #d6d4cf;
	--oly-running: #55642f;
	--oly-entrepreneurship: #1c2b45;
	--oly-thinking: #5b1f2b;
	--oly-travel: #3a3d42;
	--oly-travel-cover: #e4dfd6;
	/* Bereichsnamen als Schrift: ruhiges Grau (Oliver 14.10.2026: „too colorful“) */
	--oly-running-ink: var(--oly-muted);
	--oly-entrepreneurship-ink: var(--oly-muted);
	--oly-thinking-ink: var(--oly-muted);
	--oly-travel-ink: var(--oly-muted);
	--oly-sans: "Inter Tight", system-ui, -apple-system, sans-serif;
	--oly-serif: "Newsreader", Georgia, serif;
	--oly-wrap: 1180px;
}
/* Dunkel: folgt dem System, außer der Schalter im Kopf hat hell oder dunkel gewählt (data-theme auf <html>). */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--oly-bg: #1b1c1f;
		--oly-on-ink: #1b1c1f;
		--oly-ink: #ece8e1;
		--oly-text: #d4d0c9;
		--oly-muted: #a29e98;
		--oly-line: #36383c;
		--oly-sand: #26282c;
		--oly-sand-hover: #2e3035;
		--oly-stat-text: #b5b1aa;
		--oly-field-bg: #26282c;
		--oly-field-border: #4a4c51;
		--oly-accent-ink: #ece8e1;
		--oly-travel-cover: #d9d3c8;
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--oly-bg: #1b1c1f;
	--oly-on-ink: #1b1c1f;
	--oly-ink: #ece8e1;
	--oly-text: #d4d0c9;
	--oly-muted: #a29e98;
	--oly-line: #36383c;
	--oly-sand: #26282c;
	--oly-sand-hover: #2e3035;
	--oly-stat-text: #b5b1aa;
	--oly-field-bg: #26282c;
	--oly-field-border: #4a4c51;
	--oly-accent-ink: #ece8e1;
	--oly-travel-cover: #d9d3c8;
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- Rahmen ---------- */
html body.oly-site {
	margin: 0;
	padding: 0 0 0 6px;
	background: var(--oly-accent);
	color: var(--oly-ink);
	font-family: var(--oly-sans);
	-webkit-font-smoothing: antialiased;
}
body.oly-site .brx-body,
body.oly-site #brx-content,
body.oly-site #brx-header,
body.oly-site #brx-footer {
	background: var(--oly-bg);
	max-width: none;
	width: auto;
	margin: 0;
}
body.oly-site #brx-content { min-height: 60vh; }
body.oly-site a { text-decoration: none; }
.oly-wrap { box-sizing: border-box; max-width: var(--oly-wrap); margin: 0 auto; padding: 0 24px; }
.oly, .oly * { box-sizing: border-box; }

/* ---------- Altlasten neutralisieren: ACSS macht jede section und ihre divs zur zentrierten Flex-Spalte,
   eine Inline-Regel setzt h1-h3 auf var(--primary) !important. Deshalb --primary lokal umdefinieren. ---------- */
.oly :where(section), .oly :where(section > div) { display: block; flex-direction: row; align-items: stretch; }
.oly, .oly-nav, .oly-foot, .oly-post-head, .oly-article { --primary: var(--oly-ink); }
.oly-band, .oly-stat--wide { --primary: #fff; }
.oly-col--running .oly-sec-head h2 { --primary: var(--oly-running-ink); }
.oly-col--entrepreneurship .oly-sec-head h2 { --primary: var(--oly-entrepreneurship-ink); }
.oly-col--thinking .oly-sec-head h2 { --primary: var(--oly-thinking-ink); }

/* ---------- Kopf ---------- */
body.oly-site #brx-header { position: sticky; top: 0; z-index: 50; background: var(--oly-bg); padding: 0; box-shadow: 0 1px 0 var(--oly-line); }
.admin-bar.oly-site #brx-header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { #wpadminbar { position: fixed; } }
/* Kopf (14.10.2026): Foto + Name links als eine Marke, Menü rechts, Schalter leise, Abonnieren als Knopf */
.oly-nav .oly-wrap { display: flex; align-items: center; gap: 0; min-height: 68px; }
.oly-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--oly-ink); }
.oly-brand img { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--oly-bg), 0 0 0 3.5px var(--oly-accent); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.oly-brand:hover img, .oly-brand:focus-visible img { transform: rotate(-12deg) scale(1.06); }
.oly-nav nav { margin-right: 18px; }
.oly-nav ul { display: flex; flex-wrap: wrap; gap: 6px 26px; list-style: none; margin: 0; padding: 0; }
.oly-nav li { margin: 0; }
.oly-nav ul a { font-size: 15px; font-weight: 500; color: var(--oly-text); }
.oly-cta { flex: none; margin-left: 10px; display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; background: var(--oly-accent); color: #fff !important; font-size: 14px; font-weight: 600; transition: background .2s; }
.oly-cta:hover { background: var(--oly-ink); color: var(--oly-on-ink) !important; }
.oly-cta:focus-visible { outline: 2px solid var(--oly-accent-ink); outline-offset: 2px; }
.oly-nav a:hover { color: var(--oly-accent-ink); }
.oly-theme { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--oly-muted); cursor: pointer; }
.oly-theme:hover { background: var(--oly-sand); color: var(--oly-ink); }
.oly-theme:focus-visible { outline: 2px solid var(--oly-accent-ink); outline-offset: 2px; }
.oly-theme svg { width: 18px; height: 18px; display: none; }
/* Symbol zeigt das Ziel: dunkel → Sonne, hell → Mond */
.oly-theme[data-mode="dark"] .i-light, .oly-theme[data-mode="light"] .i-dark { display: block; }

/* ---------- Fuß ---------- */
body.oly-site #brx-footer { border-top: 1px solid var(--oly-line); padding: 0; }
.oly-foot .oly-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 28px; padding-bottom: 40px; font-size: 14px; color: var(--oly-muted); }
.oly-foot nav { display: flex; gap: 20px; }
.oly-foot a { color: var(--oly-muted); }
.oly-foot a:hover { color: var(--oly-accent-ink); }

/* ---------- Grundtypo in unseren Bereichen ---------- */
.oly h1, .oly h2, .oly h3, .oly-post-head h1 { color: var(--oly-ink); text-transform: none; margin: 0; }
.oly p { margin: 0; }

/* ---------- Startseite ---------- */
.oly-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: center; padding: 96px 0 90px; }
.oly-hero h1 { font-family: var(--oly-serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.12; letter-spacing: -.015em; margin-bottom: 28px; }
.oly-hero h1 em { font-style: normal; font-family: var(--oly-sans); font-weight: 600; color: var(--oly-accent-ink); letter-spacing: -.03em; }
.oly-hero-text > p { font-size: 18px; line-height: 1.6; max-width: 680px; color: var(--oly-text); margin-bottom: 30px; }
.oly-hero-text > p a { color: var(--oly-accent-ink); font-weight: 500; }

.oly-sec { border-top: 2px solid var(--oly-ink); padding: 22px 0 70px; }
.oly-sec-head { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 26px; }
.oly-sec-head h2 { font-family: var(--oly-sans); font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.oly-sec-head a { color: var(--oly-accent-ink); font-weight: 600; font-size: 17px; white-space: nowrap; }

.oly-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 26px; }
.oly-card { display: block; color: var(--oly-ink); }
.oly-cover { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 752; object-fit: cover; border-radius: 4px; }
.oly-cover--running { background: var(--oly-running); }
.oly-cover--entrepreneurship { background: var(--oly-entrepreneurship); }
.oly-cover--thinking { background: var(--oly-thinking); }
.oly-cover--travel { background: var(--oly-travel-cover); }
.oly-card h3 { font-family: var(--oly-sans); font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; margin: 14px 0 4px; }
.oly-card:hover h3 { color: var(--oly-accent-ink); }
.oly-cat { font-size: 15px; font-weight: 500; }
.oly-cat--running { color: var(--oly-running-ink); }
.oly-cat--entrepreneurship { color: var(--oly-entrepreneurship-ink); }
.oly-cat--thinking { color: var(--oly-thinking-ink); }
.oly-cat--travel { color: var(--oly-travel-ink); }

.oly-now { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; padding-top: 60px; }
.oly-now h2, .oly-about h2, .oly-band h2 { font-family: var(--oly-serif); font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: -.01em; margin-bottom: 14px; }
.oly-kick { color: var(--oly-accent-ink); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.oly-now p { font-size: 17px; line-height: 1.65; color: var(--oly-text); margin-bottom: 16px; }
.oly-more { color: var(--oly-accent-ink); font-weight: 600; }
.oly-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.oly-stat { background: var(--oly-sand); border-radius: 6px; padding: 26px 24px; }
.oly-stat b { display: block; font-family: var(--oly-serif); font-weight: 400; font-size: 46px; line-height: 1; letter-spacing: -.02em; color: var(--oly-ink); }
.oly-stat span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.4; color: var(--oly-stat-text); }
.oly-stat--wide { grid-column: 1 / -1; background: var(--oly-navy); }
.oly-stat--wide b { color: #fff; }
.oly-stat--wide span { color: #c9cee6; }
.oly-stat--wide a { color: #fff; border-bottom: 1px solid var(--oly-accent); }

.oly-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.oly-col .oly-sec-head h2 { font-size: 26px; }
.oly-col--running .oly-sec-head h2 { color: var(--oly-running-ink); }
.oly-col--entrepreneurship .oly-sec-head h2 { color: var(--oly-entrepreneurship-ink); }
.oly-col--thinking .oly-sec-head h2 { color: var(--oly-thinking-ink); }
.oly-list { list-style: none; margin: 0; padding: 0; }
.oly-list li { margin: 0; }
.oly-list a { display: block; padding: 13px 0; border-bottom: 1px solid var(--oly-line); font-size: 17px; line-height: 1.35; color: var(--oly-ink); }
.oly-list a:hover { color: var(--oly-accent-ink); }
.oly-list small { display: block; margin-top: 3px; font-size: 13px; color: var(--oly-muted); }

.oly-about { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; padding-top: 60px; }
.oly-about img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
.oly-about p { font-size: 18px; line-height: 1.65; max-width: 640px; color: var(--oly-text); margin-bottom: 16px; }
.oly-links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 22px; }
.oly-links a { color: var(--oly-accent-ink); font-weight: 600; }

/* ---------- Newsletter (WS Form 1) ---------- */
.oly-band { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--oly-navy); color: #fff; border-radius: 6px; padding: 56px; margin: 10px 0 80px; }
.oly-band h2 { color: #fff; }
.oly-band p { color: #c9cee6; font-size: 17px; line-height: 1.55; }
/* Alte Eigen-CSS setzt Rahmen und Knopf mit !important über --tertiary/--accent; hier lokal umdefinieren. */
.oly-sub { --tertiary: var(--oly-field-border); --accent: var(--oly-ink); }
.oly-band .oly-sub { --tertiary: #3a477a; --accent: var(--oly-accent-ink); }
.oly-sub .wsf-form { font-family: var(--oly-sans); }
.oly-sub .wsf-form .wsf-label { color: var(--oly-text); font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.oly-sub .wsf-form .wsf-text-danger { color: var(--oly-accent-ink); }
html body .oly-sub .wsf-form input.wsf-field:is([type="text"], [type="email"]) {
	height: 46px; padding: 0 14px; border: 1px solid var(--tertiary) !important; border-width: 1px !important; border-radius: 6px; background: var(--oly-field-bg); color: var(--oly-ink);
	font: 400 15px/1 var(--oly-sans); box-shadow: none;
}
/* Eingabetext folgt dem Farbschema (WS Form setzt sonst Schwarz, auf dunklem Feld unsichtbar); Chrome-Autofill ebenso */
html body .oly-sub .wsf-form input.wsf-field:is([type="text"], [type="email"]) { color: var(--oly-ink) !important; -webkit-text-fill-color: var(--oly-ink) !important; caret-color: var(--oly-ink); }
html body .oly-sub .wsf-form input.wsf-field::placeholder { color: var(--oly-muted) !important; -webkit-text-fill-color: var(--oly-muted) !important; opacity: 1; }
html body .oly-sub .wsf-form input.wsf-field:is(:-webkit-autofill, :autofill) { -webkit-text-fill-color: var(--oly-ink) !important; box-shadow: 0 0 0 40px var(--oly-field-bg) inset !important; }
.oly-sub .wsf-form input.wsf-field:is([type="text"], [type="email"]):focus { border-color: var(--oly-accent-ink) !important; outline: 2px solid color-mix(in srgb, var(--oly-accent-ink) 30%, transparent); outline-offset: 0; }
.oly-sub .wsf-form input[type="checkbox"].wsf-field + label { color: var(--oly-muted); font-size: 13px; line-height: 1.45; }
.oly-sub .wsf-form button.wsf-button.wsf-button-full {
	width: auto; height: 46px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--oly-ink); color: var(--oly-on-ink) !important;
	font: 600 15px/1 var(--oly-sans) !important; cursor: pointer; box-shadow: none;
}
.oly-sub .wsf-form button.wsf-button.wsf-button-full:hover { background-color: var(--oly-accent-ink) !important; }
.oly-sub--inline { max-width: 640px; }
.oly-sub--inline .wsf-field-wrapper:is([data-type="text"], [data-type="email"]) { --wsf-c: 6; }
.oly-band .oly-sub .wsf-form .wsf-label { color: #dfe3f3; }
.oly-band .oly-sub .wsf-form input[type="checkbox"].wsf-field + label { color: #9aa3c7; }
.oly-band .oly-sub .wsf-form button.wsf-button.wsf-button-full { background: var(--oly-accent-ink); }
.oly-band .oly-sub .wsf-form button.wsf-button.wsf-button-full:hover { background-color: #fff !important; color: #111 !important; }

/* ---------- Beitrag ---------- */
.oly-post-head { box-sizing: border-box; max-width: 808px; margin: 0 auto; padding: 80px 24px 0; }
.oly-post-head .oly-cat { display: inline-block; margin-bottom: 18px; font-weight: 600; font-size: 15px; }
.oly-post-head h1 { font-family: var(--oly-serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 50px); line-height: 1.12; letter-spacing: -.015em; }
.oly-meta { margin-top: 16px; font-size: 15px; color: var(--oly-muted); }
.oly-post-cover { margin: 40px 0 0; }
.oly-post-cover img { display: block; width: 100%; height: auto; border-radius: 4px; }

body.oly-site .oly-article { box-sizing: border-box; width: 100%; max-width: 808px; margin: 0 auto; padding: 44px 24px 70px; }
body.oly-site .oly-article .brxe-post-content,
body.oly-site .oly-article .brxe-post-content :is(p, li, blockquote) { color: var(--oly-text); font-family: var(--oly-sans); font-size: 19px; line-height: 1.7; }
body.oly-site .oly-article .brxe-post-content :is(h2, h3, h4) { color: var(--oly-ink); font-family: var(--oly-sans); font-weight: 600; letter-spacing: -.015em; line-height: 1.25; text-transform: none; margin: 1.8em 0 .5em; }
body.oly-site .oly-article .brxe-post-content h2 { font-size: 28px; }
body.oly-site .oly-article .brxe-post-content h3 { font-size: 22px; }
body.oly-site .oly-article .brxe-post-content p { margin: 0 0 1.1em; }
body.oly-site .oly-article .brxe-post-content a { color: var(--oly-accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.oly-site .oly-article .brxe-post-content img { max-width: 100%; height: auto; border-radius: 4px; }
body.oly-site .oly-article .brxe-post-content blockquote { border-left: 3px solid var(--oly-accent); margin: 1.5em 0; padding: 0 0 0 22px; font-family: var(--oly-serif); font-size: 22px; }
body.oly-site .oly-article .brxe-post-content :is(ul, ol) { padding-left: 1.3em; margin: 0 0 1.2em; }
body.oly-site .oly-article .brxe-post-content strong { color: var(--oly-ink); }
body.oly-site .oly-article .brxe-post-content .wp-block-table { margin: 1.6em 0; overflow-x: auto; }
body.oly-site .oly-article .brxe-post-content table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.4; }
body.oly-site .oly-article .brxe-post-content :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--oly-line); text-align: left; color: var(--oly-text); }
body.oly-site .oly-article .brxe-post-content th { font-weight: 600; color: var(--oly-ink); border-bottom: 2px solid var(--oly-ink); }
body.oly-site .oly-article .brxe-post-content figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--oly-muted); }
/* Bildunterschriften bei Fotos: groß und erzählend (Oliver 14.10.2026), Tabellen behalten die kleine Unterschrift */
body.oly-site .oly-article .brxe-post-content :is(.wp-block-image, .wp-block-gallery) figcaption { margin: 14px auto 0; max-width: 600px; font-family: var(--oly-serif); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--oly-text); text-align: center; }
@media (max-width: 620px) { body.oly-site .oly-article .brxe-post-content :is(.wp-block-image, .wp-block-gallery) figcaption { font-size: 19px; } }

.oly-post-end .oly-author { display: flex; gap: 34px; align-items: center; max-width: 820px; margin: 0 auto 70px; padding: 38px 44px; background: var(--oly-sand); border-radius: 8px; }
.oly-author img { width: 124px; height: 124px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 4px var(--oly-sand), 0 0 0 6px var(--oly-accent); }
.oly-author p { font-size: 19px; line-height: 1.6; color: var(--oly-text); }
.oly-author p b { display: block; margin-bottom: 6px; font-family: var(--oly-serif); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--oly-ink); }
.oly-author a { color: var(--oly-accent-ink); font-weight: 500; }

/* ---------- Übersichten ---------- */
.oly-index-head { padding: 80px 0 40px; max-width: 820px; }
.oly-index-head h1 { font-family: var(--oly-serif); font-weight: 400; font-size: clamp(38px, 5vw, 56px); line-height: 1.08; }
.oly-index-head p { margin-top: 14px; font-size: 18px; color: var(--oly-text); }
.oly-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.oly-filter a { padding: 8px 16px; border: 1px solid var(--oly-line); border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--oly-ink); }
:root { --oly-running-hi: var(--oly-running); --oly-entrepreneurship-hi: var(--oly-entrepreneurship); --oly-thinking-hi: var(--oly-thinking); --oly-travel-hi: var(--oly-travel); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --oly-running-hi: #b3c27f; --oly-entrepreneurship-hi: #9fb4dc; --oly-thinking-hi: #d98b95; --oly-travel-hi: #c9c5be; } }
:root[data-theme="dark"] { --oly-running-hi: #b3c27f; --oly-entrepreneurship-hi: #9fb4dc; --oly-thinking-hi: #d98b95; --oly-travel-hi: #c9c5be; }
.oly-filter a { --pill: var(--oly-ink); transition: color .15s, border-color .15s; }
.oly-filter a.oly-filter--running { --pill: var(--oly-running-hi); }
.oly-filter a.oly-filter--entrepreneurship { --pill: var(--oly-entrepreneurship-hi); }
.oly-filter a.oly-filter--thinking { --pill: var(--oly-thinking-hi); }
.oly-filter a.oly-filter--travel { --pill: var(--oly-travel-hi); }
/* Hover in der eigenen Bereichsfarbe (ACSS-Link-Hover war noch orange) */
.oly-filter a { --pill-fill: var(--oly-ink); --pill-text: var(--oly-on-ink); transition: color .15s, border-color .15s, background-color .15s; }
.oly-filter a.oly-filter--running { --pill-fill: var(--oly-running); --pill-text: #fff; }
.oly-filter a.oly-filter--entrepreneurship { --pill-fill: var(--oly-entrepreneurship); --pill-text: #fff; }
.oly-filter a.oly-filter--thinking { --pill-fill: var(--oly-thinking); --pill-text: #fff; }
.oly-filter a.oly-filter--travel { --pill-fill: var(--oly-travel); --pill-text: #fff; }
body.oly-site .oly-filter a:not([aria-current="page"]):hover { background: var(--pill-fill); border-color: var(--pill-fill); color: var(--pill-text); }
body.oly-site .oly-filter a:not([aria-current="page"]):hover span { color: inherit; opacity: .8; }
.oly-filter a[aria-current="page"] { background: var(--oly-ink); border-color: var(--oly-ink); color: var(--oly-on-ink); }
.oly-filter a span { margin-left: 4px; font-size: 13px; color: var(--oly-muted); font-variant-numeric: tabular-nums; }
.oly-filter a[aria-current="page"] span { color: inherit; opacity: .8; }
.oly-filter a[class*="oly-filter--"][aria-current="page"] { color: #fff; }
.oly-filter a.oly-filter--running[aria-current="page"] { background: var(--oly-running); border-color: var(--oly-running); }
.oly-filter a.oly-filter--entrepreneurship[aria-current="page"] { background: var(--oly-entrepreneurship); border-color: var(--oly-entrepreneurship); }
.oly-filter a.oly-filter--thinking[aria-current="page"] { background: var(--oly-thinking); border-color: var(--oly-thinking); }
.oly-filter a.oly-filter--travel[aria-current="page"] { background: var(--oly-travel); border-color: var(--oly-travel); }
.oly-card[hidden] { display: none; }
.oly-card.is-in { animation: oly-card-in .35s ease both; }
@keyframes oly-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.oly-index .oly-grid { margin-bottom: 80px; }

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
	.oly-grid, .oly-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.oly-cols .oly-col:last-child { grid-column: 1 / -1; }
	.oly-now, .oly-band { grid-template-columns: 1fr; }
	.oly-hero { gap: 32px; }
	.oly-hero-art .oly-hero-photo { width: 40%; }
	.oly-hero-art .oly-node-dot { width: 48px; height: 48px; }
	.oly-hero-art .oly-node-dot svg { width: 24px; height: 24px; }
	.oly-hero-art .oly-node-label { font-size: 12px; }
	.oly-about { grid-template-columns: 1fr; }
	.oly-about img { max-width: 220px; }
}

/* ---------- Handy ---------- */
@media (max-width: 620px) {
	html body.oly-site { padding-left: 4px; }
	.oly-wrap { padding: 0 16px; }
	.oly-nav .oly-wrap { flex-wrap: wrap; row-gap: 6px; padding-top: 12px; padding-bottom: 6px; min-height: 0; }
	.oly-brand { order: 1; gap: 10px; font-size: 15px; }
	.oly-brand img { width: 32px; height: 32px; }
	.oly-theme { order: 2; width: 34px; height: 34px; }
	.oly-cta { order: 3; height: 34px; padding: 0 14px; font-size: 13px; }
	.oly-nav nav { order: 4; flex-basis: 100%; margin: 0; padding: 4px 0 6px; }
	.oly-nav ul { gap: 4px 20px; flex-wrap: nowrap; overflow-x: auto; }
	.oly-nav ul a { font-size: 14px; }
	.oly-hero { grid-template-columns: 1fr; padding: 28px 0 56px; gap: 20px; }
	.oly-hero-art { order: -1; max-width: 270px; margin: 0 auto; justify-self: center; }
	.oly-hero-art .oly-hero-photo { width: 48%; }
	.oly-grid, .oly-cols { grid-template-columns: 1fr; }
	.oly-sec-head h2 { font-size: 26px; }
	.oly-now h2, .oly-about h2, .oly-band h2 { font-size: 32px; }
	.oly-stat b { font-size: 38px; }
	.oly-band { padding: 32px 22px; }
	.oly-sub--inline .wsf-field-wrapper:is([data-type="text"], [data-type="email"]) { --wsf-c: 12; }
	.oly-post-head { padding: 48px 16px 0; }
	body.oly-site .oly-article { padding: 32px 16px 56px; }
	body.oly-site .oly-article .brxe-post-content,
	body.oly-site .oly-article .brxe-post-content :is(p, li) { font-size: 18px; }
	.oly-post-end .oly-author { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 24px; }
	.oly-author img { width: 96px; height: 96px; }
	.oly-author p { font-size: 17px; }
	.oly-author p b { font-size: 24px; }
	.oly-index-head { padding-top: 52px; }
}

/* ---------- Gutenberg-Seiten (Impressum, Datenschutz): Bricks rendert sie ohne Vorlage ---------- */
body.oly-site #brx-content.wordpress {
	--primary: var(--oly-ink);
	box-sizing: border-box;
	padding: 80px max(24px, calc((100% - 760px) / 2)) 90px;
	color: var(--oly-text); font-family: var(--oly-sans); font-size: 18px; line-height: 1.7;
}
body.oly-site #brx-content.wordpress h1 { font-family: var(--oly-serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 50px); line-height: 1.12; margin: 0 0 32px; }
body.oly-site #brx-content.wordpress :is(h2, h3) { font-family: var(--oly-sans); font-weight: 600; font-size: 24px; line-height: 1.3; text-transform: none; margin: 1.6em 0 .4em; }
body.oly-site #brx-content.wordpress p { margin: 0 0 1em; color: var(--oly-text); }
body.oly-site #brx-content.wordpress a { color: var(--oly-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 620px) { body.oly-site #brx-content.wordpress { padding: 48px 16px 64px; font-size: 17px; } }


/* ================= Spielereien (oly.js) ================= */

/* ---------- Aufmacher-Grafik ---------- */
.oly-hero-art { position: relative; aspect-ratio: 1; width: 100%; max-width: 480px; justify-self: end; }
.oly-hero-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.oly-hero-lines line { stroke: var(--oly-ink); stroke-width: 1.5; stroke-dasharray: 2 8; stroke-linecap: round; opacity: .25; }
.oly-hero-photo { position: absolute; left: 50%; top: 52%; width: 50%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.oly-hero-photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px var(--oly-bg), 0 0 0 7px var(--oly-accent); }
.oly-hero-hi {
	position: absolute; white-space: nowrap; background: var(--oly-ink); color: var(--oly-on-ink); font: 600 14px/1 var(--oly-sans);
	padding: 10px 14px; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.oly-hero-hi { left: 50%; bottom: calc(100% + 16px); transform: translate(-50%, 8px) scale(.85); transform-origin: 50% 100%; }
.oly-hero-hi::after { content: ""; position: absolute; left: 50%; margin-left: -7px; bottom: -6px; border: 7px solid transparent; border-bottom: 0; border-top-color: var(--oly-ink); }
.oly-hero-art.is-hi .oly-hero-hi, .oly-hero-photo:hover .oly-hero-hi { opacity: 1; transform: translate(-50%, 0); }
.oly-node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translate(-50%, -50%); color: var(--oly-ink); }
.oly-node-dot { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; color: #fff; animation: oly-float 6s ease-in-out var(--d, 0s) 2; /* zweimal, dann Ruhe (WCAG 2.2.2) */ transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.oly-node-dot svg { width: 30px; height: 30px; }
.oly-node--running .oly-node-dot { background: var(--oly-running); }
.oly-node--entrepreneurship .oly-node-dot { background: var(--oly-entrepreneurship); }
.oly-node--thinking .oly-node-dot { background: var(--oly-thinking); }
.oly-node-label { font-size: 14px; font-weight: 600; background: var(--oly-bg); padding: 3px 8px; border-radius: 999px; }
/* Bereichs-Icons im Aufmacher: Beschriftung in der eigenen Bereichsfarbe (dunkel aufgehellt), Hover kippt und vergrößert den Punkt (Orange war „out of place“) */
.oly-node-dot { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease; }
.oly-node--running { --node-ink: var(--oly-running); }
.oly-node--entrepreneurship { --node-ink: var(--oly-entrepreneurship); }
.oly-node--thinking { --node-ink: var(--oly-thinking); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .oly-node--running { --node-ink: #b3c27f; }
	:root:not([data-theme="light"]) .oly-node--entrepreneurship { --node-ink: #9fb4dc; }
	:root:not([data-theme="light"]) .oly-node--thinking { --node-ink: #d98b95; }
}
:root[data-theme="dark"] .oly-node--running { --node-ink: #b3c27f; }
:root[data-theme="dark"] .oly-node--entrepreneurship { --node-ink: #9fb4dc; }
:root[data-theme="dark"] .oly-node--thinking { --node-ink: #d98b95; }
.oly-node .oly-node-label { color: var(--node-ink); }
.oly-node:is(:hover, :focus-visible) .oly-node-dot { animation-play-state: paused; transform: scale(1.12) rotate(-6deg); box-shadow: 0 0 0 4px var(--oly-bg), 0 0 0 6px var(--node-ink); }
.oly-node:is(:hover, :focus-visible) .oly-node-label { text-decoration: underline; text-underline-offset: 3px; }
.oly-node:focus-visible { outline: none; }


/* ---------- Geheimes Ziel ---------- */
.oly-secret { all: unset; cursor: pointer; display: block; }
.oly-secret b { display: inline-block; font-variant-numeric: tabular-nums; transition: color .2s; }
.oly-secret:focus-visible { outline: 2px solid var(--oly-accent); outline-offset: 4px; border-radius: 4px; }
.oly-secret.is-spinning b { color: var(--oly-accent-ink); filter: blur(.4px); }
.oly-secret.is-caught b { animation: oly-shake .45s ease; }
/* Im Fließtext: gleiche Spielerei, aber als Wort in der Zeile */
.oly-secret--inline { display: inline; font-weight: 700; color: var(--oly-accent-ink); border-bottom: 1px dashed currentColor; }
.oly-secret--inline + .oly-secret-note:not(:empty) { margin-left: .4em; font-size: .8em; color: var(--oly-muted); }
.oly-stat--secret { transition: background .2s; }
.oly-stat--secret:hover { background: var(--oly-sand-hover); }

/* ---------- Lesestrecke im Beitrag ---------- */
.oly-route { --p: 0; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: repeating-linear-gradient(90deg, var(--oly-line) 0 6px, transparent 6px 12px); pointer-events: none; }
.oly-route-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--oly-accent); }
.oly-runner { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--oly-accent); box-shadow: 0 0 0 3px var(--oly-bg); }
.oly-km { position: absolute; top: 12px; left: calc(var(--p) * 100%); transform: translateX(calc(var(--p) * -100%)); background: var(--oly-ink); color: var(--oly-on-ink); font: 600 12px/1 var(--oly-sans); padding: 5px 8px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s; }
.oly-route .oly-km { opacity: 1; }
.oly-route.is-done .oly-km { background: var(--oly-accent-ink); }
.oly-confetti { position: fixed; z-index: 100; width: 0; height: 0; pointer-events: none; }
.oly-confetti span { position: absolute; width: 8px; height: 12px; border-radius: 2px; animation: oly-confetti 1.4s cubic-bezier(.2, .7, .3, 1) forwards; }

/* ---------- Titelbilder in Bewegung ---------- */
.oly-svg .a { transform-box: fill-box; transform-origin: center; }
.oly-svg .a-grow { transform-origin: 50% 100%; }
.oly-svg .a-type { transform-origin: 0 50%; }
.oly-svg .a-swing { transform-origin: 50% 0; }
.oly-svg .a-lean, .oly-svg .a-leaf { transform-origin: 50% 100%; }
.oly-svg .a-stir { transform-origin: 0 100%; }
.oly-svg .a-hand-slow { transform-origin: 50% 100%; }
.oly-svg .a-hand-fast { transform-origin: 0 0; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a { animation-delay: var(--d, 0s); animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.oly-svg.is-once .a { animation-iteration-count: 1 !important; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-pulse { animation-name: oly-pulse; animation-duration: 1.4s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-pop { animation-name: oly-pop; animation-duration: 1.6s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-march { animation-name: oly-march-svg; animation-duration: 1.2s; animation-timing-function: linear; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-sway { animation-name: oly-sway; animation-duration: 3s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-jitter { animation-name: oly-jitter; animation-duration: .35s; animation-direction: alternate; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-lift { animation-name: oly-lift; animation-duration: 1.1s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-wobble { animation-name: oly-wobble; animation-duration: .9s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-grow { animation-name: oly-grow; animation-duration: 1.6s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-beat { animation-name: oly-beat; animation-duration: 1.1s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-draw { stroke-dasharray: 1; animation-name: oly-draw; animation-duration: 2.2s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-trace { stroke-dasharray: 1500; animation-name: oly-trace; animation-duration: 3s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-swing { animation-name: oly-swing; animation-duration: 1.4s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-hop { animation-name: oly-hop; animation-duration: .9s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-type { animation-name: oly-type; animation-duration: 2s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-flash { animation-name: oly-flash; animation-duration: 1.3s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-drift { animation-name: oly-drift; animation-duration: 2.4s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-nudge { animation-name: oly-nudge; animation-duration: .8s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-flip { animation-name: oly-flip; animation-duration: 3s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-blink { animation-name: oly-blink; animation-duration: 1.2s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-breathe { animation-name: oly-breathe; animation-duration: 3.2s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-spin { animation-name: oly-spin; animation-duration: 9s; animation-timing-function: linear; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-brush { animation-name: oly-brush; animation-duration: .25s; animation-direction: alternate; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-left { animation-name: oly-left; animation-duration: 2.4s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-right { animation-name: oly-right; animation-duration: 2.4s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-bob { animation-name: oly-bob; animation-duration: 2.4s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-twinkle { animation-name: oly-twinkle; animation-duration: 1.2s; animation-direction: alternate; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-rise { animation-name: oly-rise; animation-duration: 3s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-sink { animation-name: oly-sink; animation-duration: 3s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-climb { animation-name: oly-climb; animation-duration: 3s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-hit { animation-name: oly-hit; animation-duration: 2s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-peek { animation-name: oly-peek; animation-duration: 3s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-rain { animation-name: oly-rain; animation-duration: .9s; animation-timing-function: linear; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-scan { animation-name: oly-scan; animation-duration: 3.4s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-leaf { animation-name: oly-leaf; animation-duration: 2s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-slide { animation-name: oly-slide; animation-duration: 3.6s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-reel { animation-name: oly-reel; animation-duration: .8s; animation-timing-function: linear; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-sparkle { animation-name: oly-sparkle; animation-duration: 1.3s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-toggle { animation-name: oly-toggle; animation-duration: 2s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-untoggle { animation-name: oly-untoggle; animation-duration: 2s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-glow { animation-name: oly-glow; animation-duration: 1.6s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-hand-slow { animation-name: oly-spin; animation-duration: 12s; animation-timing-function: linear; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-hand-fast { animation-name: oly-spin; animation-duration: 1.5s; animation-timing-function: linear; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-fly { animation-name: oly-fly; animation-duration: 3s; animation-timing-function: linear; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-lean { animation-name: oly-lean; animation-duration: 1.8s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-stir { animation-name: oly-stir; animation-duration: 1s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-steam { animation-name: oly-steam; animation-duration: 1.8s; }
:is(.oly-card:hover, .oly-card:focus-visible, .oly-svg.is-live) .a-cloud { animation-name: oly-cloud; animation-duration: 4s; }

@keyframes oly-march { to { stroke-dashoffset: -22; } }
@keyframes oly-march-svg { to { stroke-dashoffset: calc(var(--m, 24) * -2); } }
@keyframes oly-pulse { 50% { transform: scale(1.18); } }
@keyframes oly-pop { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.28); } }
@keyframes oly-sway { 50% { transform: translateX(-46px); } }
@keyframes oly-jitter { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes oly-lift { 50% { transform: translateY(-46px); } }
@keyframes oly-wobble { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes oly-grow { 50% { transform: scaleY(.55); } }
@keyframes oly-beat { 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } 60% { transform: scale(1); } }
@keyframes oly-draw { 0% { stroke-dashoffset: 1; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes oly-trace { 0% { stroke-dashoffset: 1500; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes oly-swing { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes oly-hop { 40% { transform: translateY(-28px); } 60% { transform: translateY(0); } }
@keyframes oly-type { 0% { transform: scaleX(0); } 55%, 100% { transform: scaleX(1); } }
@keyframes oly-flash { 0%, 40%, 100% { opacity: 1; transform: scale(1); } 20% { opacity: .2; transform: scale(1.15); } }
@keyframes oly-drift { 50% { transform: translate(34px, -16px); } }
@keyframes oly-nudge { 50% { transform: translateX(24px); } }
@keyframes oly-flip { 0%, 35% { transform: rotate(0); } 50%, 85% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes oly-blink { 50% { opacity: .15; } }
@keyframes oly-breathe { 50% { transform: scale(1.08); } }
@keyframes oly-spin { to { transform: rotate(360deg); } }
@keyframes oly-brush { from { transform: translateY(-22px); } to { transform: translateY(22px); } }
@keyframes oly-left { 50% { transform: translateX(-46px); } }
@keyframes oly-right { 50% { transform: translateX(46px); } }
@keyframes oly-bob { 50% { transform: translateY(-18px); } }
@keyframes oly-twinkle { from { opacity: .25; transform: scale(.7); } to { opacity: 1; transform: scale(1.15); } }
@keyframes oly-rise { 50% { transform: translateY(-40px); } }
@keyframes oly-sink { 50% { transform: translateY(40px); } }
@keyframes oly-climb { 0% { transform: translate(0, 0); } 80%, 100% { transform: translate(640px, -330px); opacity: 0; } }
@keyframes oly-hit { 0% { transform: translate(160px, -120px); opacity: 0; } 40% { transform: translate(0, 0); opacity: 1; } 48% { transform: translate(-8px, 6px); } 56%, 100% { transform: translate(0, 0); } }
@keyframes oly-peek { 50% { transform: translateX(-80px); } }
@keyframes oly-rain { from { transform: translateY(-10px); opacity: 1; } to { transform: translateY(40px); opacity: 0; } }
@keyframes oly-scan { 50% { transform: translateX(-260px); } }
@keyframes oly-leaf { 50% { transform: scale(.7) rotate(-6deg); } }
@keyframes oly-slide { 25% { transform: translateX(-420px); } 75% { transform: translateX(420px); } }
@keyframes oly-reel { to { transform: translateX(-60px); } }
@keyframes oly-sparkle { 50% { transform: scale(.65) rotate(20deg); } }
@keyframes oly-toggle { 0%, 20% { transform: translateX(0); } 45%, 70% { transform: translateX(90px); } 95%, 100% { transform: translateX(0); } }
@keyframes oly-untoggle { 0%, 20% { transform: translateX(0); } 45%, 70% { transform: translateX(-90px); } 95%, 100% { transform: translateX(0); } }
@keyframes oly-glow { 50% { transform: scale(1.06); opacity: .8; } }
@keyframes oly-fly { 0% { transform: translateX(-420px); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(420px); opacity: 0; } }
@keyframes oly-lean { 50% { transform: rotate(6deg); } }
@keyframes oly-stir { 50% { transform: rotate(-12deg); } }
@keyframes oly-steam { 0% { transform: translateY(10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
@keyframes oly-cloud { 50% { transform: translateX(110px); } }
@keyframes oly-float { 50% { transform: translateY(-5px); } }
@keyframes oly-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes oly-confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

@media (max-width: 620px) {
	.oly-node-dot { width: 52px; height: 52px; }
	.oly-node-dot svg { width: 26px; height: 26px; }
	.oly-node-label { font-size: 12px; }
	.oly-hero-hi { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.oly-svg .a, .oly-node-dot { animation: none !important; }
}

/* ---------- 404: Bricks-Standardseite ohne eigene Vorlage ---------- */
body.oly-site.error404 #brx-content.bricks-404-wrapper {
	max-width: none; width: 100%; align-self: stretch; margin: 0; min-height: 60vh; box-sizing: border-box;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
	padding: 90px 24px; background: var(--oly-bg); text-align: center;
}
body.oly-site.error404 .bricks-404-wrapper h1.title {
	--primary: var(--oly-ink); color: var(--oly-ink); font-family: var(--oly-serif); font-weight: 400;
	font-size: clamp(34px, 5vw, 56px); line-height: 1.1; letter-spacing: -.01em; text-transform: none; margin: 0;
}
body.oly-site.error404 .bricks-search-form { width: min(420px, 100%); }
body.oly-site.error404 .bricks-search-form input[type="search"] {
	box-sizing: border-box; width: 100%; height: 50px; padding: 0 18px; border: 1px solid var(--oly-field-border); border-radius: 999px;
	background: var(--oly-field-bg); color: var(--oly-ink); font: 400 17px/1 var(--oly-sans); text-align: left;
}
body.oly-site.error404 .bricks-search-form input[type="search"]::placeholder { color: var(--oly-muted); }
body.oly-site.error404 .bricks-search-form input[type="search"]:focus { outline: 2px solid var(--oly-accent-ink); outline-offset: 2px; }

/* Sprungmarke (nur bei Tastaturfokus sichtbar) in beiden Schemata lesbar */
body.oly-site .skip-link { background: var(--oly-ink); color: var(--oly-on-ink); }

/* Links im Fließtext unterstrichen, damit sie auch ohne Akzentfarbe (dunkel) als Links erkennbar sind */
body.oly-site :is(.oly-hero-text > p a, .oly-sec-head a, .oly-more, .oly-links a, .oly-author a, .oly-now a) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Formular-Rückmeldungen (14.10.2026): WS Form zeichnet Danke-Nachricht und Fehler sonst mit eigenen Farben,
   eingeloggt übernimmt die Nachricht die Formular-Variablen und wird unsichtbar. Darum hier fest, in beiden Schemata. ---------- */
:root { --oly-error: #a4262c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --oly-error: #f28b82; } }
:root[data-theme="dark"] { --oly-error: #f28b82; }
html body [data-wsf-message] .wsf-alert {
	margin: 0 0 8px; padding: 18px 22px !important; border: 0 !important; border-left: 4px solid var(--oly-accent) !important; border-radius: 6px !important;
	background: var(--oly-sand) !important; color: var(--oly-ink) !important; font: 500 18px/1.45 var(--oly-sans) !important;
}
html body [data-wsf-message] .wsf-alert-danger { border-left-color: var(--oly-error) !important; }
.oly-band [data-wsf-message] .wsf-alert { background: rgba(255, 255, 255, .08) !important; color: #fff !important; border-left-color: #fff !important; }
html body .oly-sub .wsf-form .wsf-invalid-feedback { color: var(--oly-error) !important; font-size: 13px; font-weight: 500; margin-top: 6px; }
html body .oly-sub .wsf-form input.wsf-field:is([type="text"], [type="email"]) { background-color: var(--oly-field-bg) !important; box-shadow: none !important; }
html body .oly-sub .wsf-form input.wsf-field:is([type="text"], [type="email"]):focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--oly-accent-ink) 25%, transparent) !important; }
html body .oly-sub .wsf-form.wsf-validated input.wsf-field:is([type="text"], [type="email"]):invalid { border-color: var(--oly-error) !important; }
html body .oly-sub .wsf-form.wsf-validated input[type="checkbox"].wsf-field:invalid { outline: 2px solid var(--oly-error); outline-offset: 1px; }
.oly-band .oly-sub .wsf-form .wsf-invalid-feedback { color: #ffb4ab !important; }

/* Einwilligungs-Kästchen selbst zeichnen (WS Form setzt appearance:none, der Rahmen kam nur aus der alten Customizer-CSS) */
html body .oly-sub .wsf-form input[type="checkbox"].wsf-field {
	width: 22px !important; height: 22px !important; border: 1.5px solid var(--oly-muted) !important; border-radius: 5px !important;
	background: var(--oly-field-bg) center / 14px 14px no-repeat !important; box-shadow: none !important; cursor: pointer;
}
html body .oly-sub .wsf-form input[type="checkbox"].wsf-field:checked {
	background-color: var(--oly-accent) !important; border-color: var(--oly-accent) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}
html body .oly-sub .wsf-form input[type="checkbox"].wsf-field:focus-visible { outline: 2px solid var(--oly-accent-ink) !important; outline-offset: 2px; }
.oly-band .oly-sub .wsf-form input[type="checkbox"].wsf-field { border-color: #9aa3c7 !important; background-color: transparent !important; }
.oly-band .oly-sub .wsf-form input[type="checkbox"].wsf-field:checked { border-color: #fff !important; }
/* Pflicht-Stern in der Farbe der Beschriftung, auf dem blauen Kasten sonst Burgund auf Blau */
html body .oly-sub .wsf-form .wsf-required-wrapper .wsf-text-danger { color: inherit !important; }