/*
Theme Name: Raphael Steiner
Author: Raphael Steiner
Description: Schlankes, klassisches WordPress-Theme fuer eine zweigeteilte Selbststaendigkeit aus IT-Beratung und Fotografie. Weiss, Anthrazit und dunkles Tuerkis, Systemschriften, keine externen Abrufe, native Gutenberg-Bloecke.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: raphael-steiner
Tags: two-columns, custom-logo, custom-menu, block-styles, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--rs-white: #ffffff;
	--rs-paper: #f5f7f7;
	--rs-line: #dde3e2;
	--rs-line-strong: #c3cdcb;

	--rs-ink: #1c2226;          /* Anthrazit, Fliesstext */
	--rs-ink-strong: #12171a;   /* Ueberschriften */
	--rs-ink-muted: #56626a;

	--rs-teal: #0f5b55;         /* dunkles Tuerkis, Primaerfarbe */
	--rs-teal-dark: #0a423e;
	--rs-teal-tint: #e7efee;

	--rs-focus: #0f5b55;

	--rs-content: 46rem;
	--rs-wide: 76rem;
	--rs-gutter: clamp(1.25rem, 5vw, 3rem);

	--rs-radius: 6px;           /* Schaltflaechen, Eingabefelder */
	--rs-radius-lg: 12px;       /* Karten, Bilder */
	--rs-shadow: 0 1px 2px rgba(18, 23, 26, .06), 0 8px 24px rgba(18, 23, 26, .05);
	--rs-shadow-lift: 0 2px 4px rgba(18, 23, 26, .05), 0 12px 32px rgba(18, 23, 26, .10);

	/* Bewegung. Eine Kurve, eine Dauer, ein Weg — damit die ganze Seite
	   im selben Takt laeuft und nicht jede Stelle ihren eigenen hat. */
	--rs-ease: cubic-bezier(.22, .61, .36, 1);
	--rs-motion-travel: 24px;
	--rs-motion-time: 650ms;
	--rs-motion-step: 90ms;

	--rs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--rs-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--rs-step-0: 1.0625rem;
	--rs-step-1: clamp(1.25rem, 0.6vw + 1.1rem, 1.4rem);
	--rs-step-2: clamp(1.5rem, 1.1vw + 1.25rem, 1.9rem);
	--rs-step-3: clamp(1.9rem, 1.9vw + 1.45rem, 2.6rem);
	--rs-step-4: clamp(2.3rem, 3.4vw + 1.5rem, 3.6rem);
}

/* ==========================================================================
   2. Grundlagen
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--rs-white);
	color: var(--rs-ink);
	font-family: var(--rs-font);
	font-size: var(--rs-step-0);
	line-height: 1.65;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
figure { margin: 0; }

h1, h2, h3, h4, h5, h6 {
	color: var(--rs-ink-strong);
	font-weight: 650;
	line-height: 1.18;
	letter-spacing: -0.015em;
	margin: 0 0 .6em;
	text-wrap: balance;
}

h1 { font-size: var(--rs-step-4); letter-spacing: -0.025em; }
h2 { font-size: var(--rs-step-3); margin-top: 2.2em; }
h3 { font-size: var(--rs-step-2); margin-top: 1.8em; }
h4 { font-size: var(--rs-step-1); margin-top: 1.6em; }

p, ul, ol { margin: 0 0 1.15em; }
li { margin-bottom: .4em; }

a {
	color: var(--rs-teal);
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: from-font;
}
a:hover { color: var(--rs-teal-dark); }

hr, .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--rs-line);
	margin-block: 3rem;
	opacity: 1;
}

strong { font-weight: 650; color: var(--rs-ink-strong); }

::selection { background: var(--rs-teal); color: #fff; }

/* Sichtbarer Tastaturfokus, ueberall. */
:focus-visible {
	outline: 3px solid var(--rs-focus);
	outline-offset: 2px;
	border-radius: 2px;
}
.rs-dark :focus-visible,
.rs-hero :focus-visible {
	outline-color: #ffffff;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

.rs-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--rs-ink-strong);
	color: #fff;
	padding: .8rem 1.2rem;
	text-decoration: none;
}
.rs-skip-link:focus {
	left: 1rem;
	top: 1rem;
	color: #fff;
}

/* ==========================================================================
   3. Layout
   ========================================================================== */

.rs-shell { display: flex; flex-direction: column; min-height: 100vh; }
.rs-main { flex: 1 0 auto; }

.rs-container {
	width: 100%;
	max-width: calc(var(--rs-wide) + 2 * var(--rs-gutter));
	margin-inline: auto;
	padding-inline: var(--rs-gutter);
}

/* Eine Spalte, eine linke Kante. Fliesstext bricht frueher um als ein
   breiter Block, beginnt aber an derselben Stelle wie Logo, Ueberschrift
   und Bilderreihe — sonst wirken Ueberschriften gegenueber ihrem eigenen
   Inhalt eingerueckt. Ein Block mit Hintergrund (alignfull) laeuft
   weiterhin bis an den Bildschirmrand. */
:root {
	--rs-inset: max(var(--rs-gutter), calc((100% - var(--rs-wide)) / 2));
}

.rs-content > * {
	max-width: min(var(--rs-content), 100% - (2 * var(--rs-gutter)));
	margin-left: var(--rs-inset);
	margin-right: var(--rs-inset);
}
.rs-content > .alignwide {
	max-width: min(var(--rs-wide), 100% - (2 * var(--rs-gutter)));
}
.rs-content > .alignfull {
	max-width: none;
	width: 100%;
	margin-inline: 0;
}

/* Dasselbe innerhalb der randlosen Baender. WordPress zentriert die
   Kinder eines Gruppenblocks per !important — deshalb steht es hier
   ebenfalls; ohne das gaebe es zwei linke Kanten auf einer Seite. */
.rs-hero > *,
.rs-band > *,
.rs-dark > * {
	position: relative;
	z-index: 1;
	margin-left: max(0px, calc((100% - var(--rs-wide)) / 2)) !important;
	margin-right: 0 !important;
	max-width: min(var(--rs-content), 100%);
}
.rs-hero > .alignwide,
.rs-band > .alignwide,
.rs-dark > .alignwide {
	max-width: min(var(--rs-wide), 100%);
}

.rs-section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.rs-section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

/* ==========================================================================
   4. Kopfbereich und Navigation
   ========================================================================== */

.rs-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid var(--rs-line);
	backdrop-filter: saturate(140%) blur(8px);
	transition: box-shadow .3s var(--rs-ease), background-color .3s var(--rs-ease);
}

/* Sobald die Seite laeuft, wird die Kopfzeile ruhiger: der Untertitel
   klappt weg, ein Schatten setzt sie vom Inhalt ab. Die Hoehe bleibt
   gleich — sie zu aendern wuerde den gesamten Text darunter verspringen
   lassen, und zwar genau dann, wenn jemand liest. */
.rs-header.is-scrolled {
	background: rgba(255, 255, 255, .99);
	box-shadow: 0 1px 0 var(--rs-line), 0 10px 28px rgba(18, 23, 26, .08);
}
.rs-brand__tagline {
	overflow: hidden;
	transition: opacity .28s var(--rs-ease), max-height .28s var(--rs-ease);
	max-height: 1.6em;
	opacity: 1;
}
.rs-header.is-scrolled .rs-brand__tagline {
	opacity: 0;
	max-height: 0;
}

.rs-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 4.5rem;
}

.rs-brand { display: flex; align-items: center; gap: .75rem; }
.rs-brand a { text-decoration: none; color: inherit; }

.rs-brand__name {
	font-size: 1.15rem;
	font-weight: 650;
	letter-spacing: -0.02em;
	color: var(--rs-ink-strong);
	margin: 0;
	line-height: 1.2;
}
.rs-brand__tagline {
	display: block;
	font-size: .8rem;
	font-weight: 400;
	letter-spacing: .01em;
	color: var(--rs-ink-muted);
}
.rs-brand .custom-logo { max-height: 2.75rem; width: auto; }

.rs-nav__toggle {
	display: none;
	align-items: center;
	gap: .55rem;
	background: none;
	border: 1px solid var(--rs-line-strong);
	border-radius: var(--rs-radius);
	color: var(--rs-ink-strong);
	font: inherit;
	font-size: .95rem;
	padding: .55rem .85rem;
	cursor: pointer;
}
.rs-nav__toggle:hover { border-color: var(--rs-teal); color: var(--rs-teal); }

.rs-nav__burger { position: relative; display: block; width: 18px; height: 12px; }
.rs-nav__burger::before,
.rs-nav__burger::after,
.rs-nav__burger span {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform .18s ease, opacity .18s ease;
}
.rs-nav__burger::before { top: 0; }
.rs-nav__burger span { top: 5px; }
.rs-nav__burger::after { top: 10px; }
[aria-expanded="true"] .rs-nav__burger::before { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .rs-nav__burger span { opacity: 0; }
[aria-expanded="true"] .rs-nav__burger::after { transform: translateY(-5px) rotate(-45deg); }

.rs-nav__list {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rs-nav__list li { margin: 0; }
.rs-nav__list a {
	position: relative;
	display: inline-block;
	color: var(--rs-ink);
	text-decoration: none;
	font-size: .98rem;
	padding: .35rem 0;
	transition: color .2s var(--rs-ease);
}
/* Die Linie waechst aus dem Wortanfang heraus, statt fertig zu erscheinen —
   das liest sich als Reaktion auf den Zeiger und nicht als Zustandswechsel. */
.rs-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--rs-teal);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .28s var(--rs-ease);
}
.rs-nav__list a:hover { color: var(--rs-teal); }
.rs-nav__list a:hover::after { transform: scaleX(1); }
.rs-nav__list .current-menu-item > a,
.rs-nav__list .current_page_item > a {
	color: var(--rs-teal);
}
.rs-nav__list .current-menu-item > a::after,
.rs-nav__list .current_page_item > a::after {
	transform: scaleX(1);
}
.rs-nav__list .rs-nav__cta > a::after { content: none; }

/* Der Hervorhebungs-Menuepunkt. Die Auswahl muss die Regel fuer die
   aktuelle Seite weiter oben ueberbieten — sonst steht auf der
   Kontaktseite tuerkise Schrift auf tuerkisem Grund. */
.rs-nav__list .rs-nav__cta > a,
.rs-nav__list .rs-nav__cta.current-menu-item > a,
.rs-nav__list .rs-nav__cta.current_page_item > a {
	background: var(--rs-teal);
	color: #fff;
	border-radius: var(--rs-radius);
	padding: .55rem 1.1rem;
	border-bottom: 0;
}
.rs-nav__list .rs-nav__cta > a:hover {
	background: var(--rs-teal-dark);
	color: #fff;
	border-bottom-color: transparent;
}

@media (max-width: 860px) {
	/* Die eingeklappte Navigation existiert nur mit JavaScript. Ohne JS
	   bleibt das Menue als gestapelte Liste sichtbar und bedienbar. */
	.rs-js .rs-nav__toggle { display: inline-flex; }
	.rs-js .rs-nav__menu {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--rs-white);
		border-bottom: 1px solid var(--rs-line);
		box-shadow: var(--rs-shadow);
		padding: .5rem var(--rs-gutter) 1.5rem;
	}
	.rs-js .rs-nav__menu.is-open { display: block; }
	.rs-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.rs-nav__list li { border-bottom: 1px solid var(--rs-line); }
	.rs-nav__list li:last-child { border-bottom: 0; }
	.rs-nav__list a {
		display: block;
		padding: .95rem .25rem;
		border-bottom: 0;
		font-size: 1.05rem;
	}
	.rs-nav__list .rs-nav__cta > a,
	.rs-nav__list .rs-nav__cta.current-menu-item > a,
	.rs-nav__list .rs-nav__cta.current_page_item > a {
		display: inline-block;
		margin-top: .9rem;
		padding: .7rem 1.25rem;
	}
	.rs-header { position: static; }
	.rs-header__inner { position: relative; }
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.wp-block-button__link,
.rs-button {
	display: inline-block;
	background: var(--rs-teal);
	color: #fff;
	border: 2px solid var(--rs-teal);
	border-radius: var(--rs-radius);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.3;
	padding: .8rem 1.5rem;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s var(--rs-ease), border-color .2s var(--rs-ease),
		color .2s var(--rs-ease), transform .2s var(--rs-ease), box-shadow .2s var(--rs-ease);
}
.wp-block-button__link:hover,
.rs-button:hover {
	background: var(--rs-teal-dark);
	border-color: var(--rs-teal-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--rs-shadow-lift);
}
.wp-block-button__link:active,
.rs-button:active { transform: translateY(0); }

/* Der Pfeil gehoert zur Schaltflaeche, nicht in den Text: so bleibt die
   Beschriftung im Editor sauber und der Hinweis trotzdem ueberall gleich. */
.wp-block-button__link::after,
.rs-button::after {
	content: "\2192";
	display: inline-block;
	margin-left: .5em;
	transition: transform .25s var(--rs-ease);
}
.wp-block-button__link:hover::after,
.rs-button:hover::after { transform: translateX(4px); }

.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link,
.rs-button--ghost {
	background: transparent;
	color: var(--rs-teal);
	border-color: var(--rs-teal);
}
.is-style-outline .wp-block-button__link:hover,
.rs-button--ghost:hover {
	background: var(--rs-teal);
	color: #fff;
}

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 1.5rem; }
.wp-block-buttons > .wp-block-button { margin: 0; }

/* ==========================================================================
   6. Seitenkopf und Inhaltsbausteine
   ========================================================================== */

.rs-page-header {
	background: var(--rs-paper);
	border-bottom: 1px solid var(--rs-line);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.rs-page-header p.rs-page-header__kicker {
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rs-teal);
	margin: 0 0 .6rem;
}
.rs-page-header h1 { margin: 0; max-width: 20ch; }

.rs-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 15% 0%, #1b2a2c 0%, transparent 55%),
		linear-gradient(170deg, #161d21 0%, var(--rs-ink-strong) 55%, #0e1417 100%);
	color: #edf1f0;
	padding-block: clamp(3.5rem, 9vw, 7rem);
	padding-inline: var(--rs-gutter);
	margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}

/* Ein tuerkiser Schimmer, der sehr langsam wandert. Zweck ist Tiefe, nicht
   Aufmerksamkeit: bei voller Fahrt braucht eine Runde ueber zwanzig
   Sekunden, man bemerkt ihn eher, wenn man laenger hinsieht. */
.rs-hero::before {
	content: "";
	position: absolute;
	inset: -25%;
	z-index: -2;
	background:
		radial-gradient(38% 46% at 28% 38%, rgba(20, 122, 113, .50), transparent 70%),
		radial-gradient(32% 40% at 78% 68%, rgba(15, 91, 85, .34), transparent 70%);
	animation: rs-drift 26s ease-in-out infinite alternate;
	pointer-events: none;
}

/* Feines Raster, knapp ueber der Wahrnehmungsschwelle. Es gibt der Flaeche
   Massstab; zum Rand hin blendet es aus, damit keine Kante entsteht. */
.rs-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 72px 72px;
	-webkit-mask-image: radial-gradient(75% 75% at 35% 35%, #000 0%, transparent 100%);
	mask-image: radial-gradient(75% 75% at 35% 35%, #000 0%, transparent 100%);
	pointer-events: none;
}

@keyframes rs-drift {
	from { transform: translate3d(-2%, 1%, 0) scale(1); }
	to   { transform: translate3d(3%, -2%, 0) scale(1.1); }
}
.rs-hero h1, .rs-hero h2 { color: #fff; }
.rs-hero p { color: #ccd6d4; font-size: clamp(1.05rem, .5vw + 1rem, 1.25rem); max-width: 42ch; }
.rs-hero .rs-eyebrow { color: #7fc3bb; }
.rs-hero a:not(.wp-block-button__link) { color: #8fd2ca; }
.rs-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
	background: transparent;
}
.rs-hero .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: #fff;
	color: var(--rs-ink-strong);
	border-color: #fff;
}

.rs-eyebrow {
	font-size: .85rem !important;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rs-teal);
	margin-bottom: .75rem !important;
}

.rs-lead { font-size: clamp(1.1rem, .6vw + 1rem, 1.3rem); color: var(--rs-ink); }

.rs-band {
	background: var(--rs-paper);
	border-top: 1px solid var(--rs-line);
	border-bottom: 1px solid var(--rs-line);
	padding: clamp(2.5rem, 6vw, 4rem) var(--rs-gutter);
	margin-block: clamp(2.5rem, 6vw, 4rem);
}
.rs-band > *:last-child { margin-bottom: 0; }

.rs-note {
	background: var(--rs-teal-tint);
	border-left: 4px solid var(--rs-teal);
	padding: 1.25rem 1.5rem;
	margin-block: 2rem;
}
.rs-note > *:last-child { margin-bottom: 0; }
.rs-note p { font-size: .98rem; }

.rs-draft {
	background: #fff8e6;
	border-left: 4px solid #b8860b;
	padding: 1.25rem 1.5rem;
	margin-block: 2rem;
}
.rs-draft > *:last-child { margin-bottom: 0; }

/* Karten: zwei bis drei Spalten aus core/columns */
.rs-cards.wp-block-columns { gap: 1.5rem; margin-block: 2.5rem; }
.rs-cards .wp-block-column {
	background: var(--rs-white);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius-lg);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	transition: transform .3s var(--rs-ease), border-color .3s var(--rs-ease),
		box-shadow .3s var(--rs-ease),
		opacity var(--rs-motion-time) var(--rs-ease),
		translate var(--rs-motion-time) var(--rs-ease);
	/* Reihenfolge wie oben: nur Deckkraft und Weg warten auf die
	   Staffelung, das Anheben beim Ueberfahren reagiert sofort. */
	transition-delay: 0ms, 0ms, 0ms, var(--rs-reveal-delay, 0ms), var(--rs-reveal-delay, 0ms);
}
.rs-cards .wp-block-column:hover {
	transform: translateY(-3px);
	border-color: var(--rs-teal);
	box-shadow: var(--rs-shadow-lift);
}
.rs-cards .wp-block-column > *:first-child { margin-top: 0; }
.rs-cards .wp-block-column > *:last-child { margin-bottom: 0; }
.rs-cards h2, .rs-cards h3 { margin-top: 0; }

.rs-cards--flat .wp-block-column {
	border: 0;
	border-top: 3px solid var(--rs-teal);
	border-radius: 0;
	background: transparent;
	padding: 1.25rem 0 0;
}

.rs-steps.wp-block-columns { gap: 1.75rem; counter-reset: rs-step; margin-block: 2.5rem; }
.rs-steps .wp-block-column { counter-increment: rs-step; padding-top: 3.25rem; position: relative; }
.rs-steps .wp-block-column::before {
	content: counter(rs-step);
	position: absolute;
	top: 0;
	left: 0;
	width: 2.4rem;
	height: 2.4rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--rs-teal);
	color: #fff;
	font-weight: 650;
	font-size: 1.05rem;
}
.rs-steps h3 { margin-top: 0; font-size: var(--rs-step-1); }
.rs-steps p:last-child { margin-bottom: 0; }

.rs-dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(90% 120% at 85% 15%, #1b2a2c 0%, transparent 60%),
		var(--rs-ink-strong);
	border-radius: var(--rs-radius-lg);
	color: #dfe6e5;
	padding: clamp(2.5rem, 6vw, 4rem) var(--rs-gutter);
	margin-block: clamp(2.5rem, 6vw, 4rem);
}
.rs-dark::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: -1;
	background: radial-gradient(40% 50% at 25% 50%, rgba(20, 122, 113, .30), transparent 70%);
	pointer-events: none;
}
.rs-dark h2, .rs-dark h3 { color: #fff; }
.rs-dark p { color: #dfe6e5; }
.rs-dark > *:last-child { margin-bottom: 0; }
.rs-dark a:not(.wp-block-button__link) { color: #8fd2ca; }

/* Faktenliste */
.rs-facts.wp-block-list { list-style: none; padding: 0; }
.rs-facts.wp-block-list li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: .7rem;
}
.rs-facts.wp-block-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .7rem;
	height: .7rem;
	border: 2px solid var(--rs-teal);
	border-radius: 2px;
}

/* ==========================================================================
   7. Bilder und Platzhalter
   ========================================================================== */

.wp-block-image img {
	display: block;
	border-radius: var(--rs-radius-lg);
	transition: transform .5s var(--rs-ease);
}
/* Das Heranzoomen braucht einen Rahmen, der beschneidet. Nur in Galerien:
   ein einzelnes Bild im Fliesstext soll sich nicht bewegen, wenn der
   Zeiger es zufaellig streift. */
.rs-gallery .wp-block-image {
	overflow: hidden;
	border-radius: var(--rs-radius-lg);
}
.rs-gallery .wp-block-image:hover img { transform: scale(1.04); }
.wp-block-image figcaption,
.wp-element-caption {
	font-size: .875rem;
	color: var(--rs-ink-muted);
	margin-top: .6rem;
	text-align: left;
}

.rs-gallery.wp-block-columns { gap: 1.25rem; margin-block: 2rem; }

.rs-platzhalter img {
	width: 100%;
	background: var(--rs-paper);
	border: 1px dashed var(--rs-line-strong);
}
.rs-platzhalter figcaption {
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8a6d00;
}

/* ==========================================================================
   8. Formulare (Theme-Feinschliff, Basis liegt im Plugin)
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	font: inherit;
	color: var(--rs-ink);
	background: var(--rs-white);
	border: 1px solid var(--rs-line-strong);
	border-radius: var(--rs-radius);
	padding: .7rem .85rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--rs-teal); }
textarea { min-height: 11rem; resize: vertical; }
label { font-weight: 600; display: inline-block; margin-bottom: .35rem; }

/* ==========================================================================
   9. Fusszeile
   ========================================================================== */

.rs-footer {
	background: var(--rs-ink-strong);
	color: #aeb9b8;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	margin-top: 4rem;
	font-size: .95rem;
}
.rs-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3rem;
	justify-content: space-between;
	align-items: flex-start;
}
.rs-footer__brand { color: #fff; font-weight: 650; font-size: 1.05rem; margin: 0 0 .35rem; }
.rs-footer p { margin: 0 0 .4rem; }
.rs-footer a { color: #cfd8d7; text-decoration: none; }
.rs-footer a:hover { color: #fff; text-decoration: underline; }
.rs-footer__menu { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; }
.rs-footer__menu li { margin: 0; }
.rs-footer__legal { color: #7d8a89; font-size: .85rem; margin-top: 1.5rem; }

/* ==========================================================================
   10. Einzelbeitrag, Archiv, 404
   ========================================================================== */

.rs-entry-meta { color: var(--rs-ink-muted); font-size: .9rem; margin-bottom: 2rem; }
/* margin-block statt margin: der seitliche Abstand kommt aus der
   Spaltenregel weiter oben und darf hier nicht zurueckgesetzt werden. */
.rs-post-list { list-style: none; padding: 0; margin-block: 0; }
.rs-post-list li {
	border-bottom: 1px solid var(--rs-line);
	padding-block: 1.5rem;
	margin: 0;
}
.rs-post-list h2 { margin: 0 0 .35rem; font-size: var(--rs-step-1); }
.rs-post-list h2 a { text-decoration: none; }

.rs-pagination { margin-top: 2.5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.rs-post-list li:last-child { border-bottom: 0; }
.rs-pagination .page-numbers {
	border: 1px solid var(--rs-line-strong);
	border-radius: var(--rs-radius);
	padding: .4rem .8rem;
	text-decoration: none;
}
.rs-pagination .current { background: var(--rs-teal); border-color: var(--rs-teal); color: #fff; }

.rs-404 { text-align: center; padding-block: clamp(3rem, 10vw, 7rem); }

/* ==========================================================================
   11. Kleinigkeiten
   ========================================================================== */

.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table td, .wp-block-table th {
	border: 1px solid var(--rs-line);
	padding: .65rem .8rem;
	text-align: left;
}

blockquote, .wp-block-quote {
	border-left: 3px solid var(--rs-teal);
	margin-block: 2rem;
	padding-left: 1.5rem;
	font-size: 1.1rem;
}

code, kbd { font-family: var(--rs-mono); font-size: .92em; background: var(--rs-paper); padding: .1em .35em; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

@media print {
	.rs-header, .rs-footer, .rs-nav__toggle { display: none !important; }
	body { color: #000; }
}

/* ==========================================================================
   12. Bewegung
   --------------------------------------------------------------------------
   Drei Regeln halten das Ganze zusammen:

   1. Der versteckte Ausgangszustand haengt an `.rs-motion`. Diese Klasse
      setzt motion.js als erste Anweisung im Kopf der Seite. Laedt das
      Skript nicht, faellt es aus oder ist JavaScript abgeschaltet, kommt
      die Klasse nie — und alles ist von Anfang an sichtbar. Ein leeres
      weisses Blatt kann so nicht entstehen.
   2. Alles steht in `prefers-reduced-motion: no-preference`. Wer Bewegung
      abbestellt hat, bekommt nicht etwa schnellere Animationen, sondern
      gar keine — und damit auch keinen versteckten Zustand.
   3. Bewegt werden nur `opacity` und `transform`. Kein Element aendert
      seine Groesse oder Lage im Layout, also springt beim Scrollen nichts.

   Die Auswahlliste unten muss zur Liste in assets/js/motion.js passen.
   ========================================================================== */

@keyframes rs-enter {
	from { opacity: 0; transform: translate3d(0, var(--rs-motion-travel), 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes rs-parallax {
	from { transform: translate3d(0, -7%, 0); }
	to   { transform: translate3d(0, 7%, 0); }
}

/* Der Strich unter einer Abschnittsueberschrift existiert immer; nur sein
   Aufziehen ist Bewegung. */
.rs-content > h2::after,
.rs-band > h2::after,
.rs-dark > h2::after {
	content: "";
	display: block;
	width: 2.75rem;
	height: 3px;
	margin-top: .75rem;
	border-radius: 2px;
	background: var(--rs-teal);
}
.rs-dark > h2::after { background: #7fc3bb; }

/* Zeilenmaske fuer die grossen Ueberschriften. Die Innenabstaende fangen
   Unterlaengen auf: ohne sie wuerde das g in "Fotografie" beschnitten. */
.rs-line {
	display: block;
	overflow: hidden;
	padding-bottom: .14em;
	margin-bottom: -.14em;
}
.rs-line > span { display: block; }

@media (prefers-reduced-motion: no-preference) {

	/* ----- Beim Scrollen hereinkommen ----- */

	/* Der Weg laeuft ueber die eigenstaendige Eigenschaft `translate`, nicht
	   ueber `transform`. Beide wirken zugleich, also kann eine Karte sich
	   beim Ueberfahren anheben (`transform`), ohne dass das Einblenden
	   dabei zurueckgesetzt wird — sonst gewaenne je nach Spezifitaet mal
	   das eine, mal das andere. `:where()` haelt die Auswahl bei null,
	   damit `.is-visible` sie ohne `!important` ueberstimmt. */
	.rs-motion :where(
		.rs-content > h2,
		.rs-content > h3,
		.rs-content > p,
		.rs-content > ul,
		.rs-content > ol,
		.rs-content > figure,
		.rs-content > .wp-block-image,
		.rs-content > .wp-block-buttons,
		.rs-content > .wp-block-table,
		.rs-content > blockquote,
		.rs-content > .rs-note,
		.rs-content > .rs-draft,
		.rs-content > .wp-block-separator,
		.rs-band > *:not(.wp-block-columns),
		.rs-dark > *:not(.wp-block-columns),
		.rs-content > .wp-block-columns > .wp-block-column,
		.rs-band > .wp-block-columns > .wp-block-column,
		.rs-dark > .wp-block-columns > .wp-block-column
	) {
		opacity: 0;
		translate: 0 var(--rs-motion-travel);
		transition:
			opacity var(--rs-motion-time) var(--rs-ease),
			translate var(--rs-motion-time) var(--rs-ease);
		transition-delay: var(--rs-reveal-delay, 0ms);
	}

	.rs-motion .is-visible {
		opacity: 1;
		translate: none;
	}

	/* Der Strich zieht sich auf, kurz nachdem die Ueberschrift steht. */
	.rs-motion .rs-content > h2::after,
	.rs-motion .rs-band > h2::after,
	.rs-motion .rs-dark > h2::after {
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform .55s var(--rs-ease) .2s;
	}
	.rs-motion .rs-content > h2.is-visible::after,
	.rs-motion .rs-band > h2.is-visible::after,
	.rs-motion .rs-dark > h2.is-visible::after {
		transform: scaleX(1);
	}

	/* ----- Beim Laden hereinkommen ----- */

	/* Was ohne Scrollen schon zu sehen ist, wartet nicht auf den Beobachter:
	   es kaeme sonst erst nach dem ersten Blick. */
	.rs-motion .rs-hero > *,
	.rs-motion .rs-page-header .rs-container > * {
		animation: rs-enter var(--rs-motion-time) var(--rs-ease) both;
		animation-delay: calc(120ms + var(--rs-enter-step, 0) * var(--rs-motion-step));
	}
	.rs-motion .rs-hero > *:nth-child(2),
	.rs-motion .rs-page-header .rs-container > *:nth-child(2) { --rs-enter-step: 1; }
	.rs-motion .rs-hero > *:nth-child(3) { --rs-enter-step: 2; }
	.rs-motion .rs-hero > *:nth-child(4) { --rs-enter-step: 3; }
	.rs-motion .rs-hero > *:nth-child(5) { --rs-enter-step: 4; }

	/* Eine in Zeilen zerlegte Ueberschrift traegt die Bewegung selbst. */
	.rs-motion .rs-split {
		animation: none;
		opacity: 1;
	}
	.rs-motion .rs-split .rs-line > span {
		transform: translate3d(0, 115%, 0);
		transition: transform .8s var(--rs-ease);
		transition-delay: var(--rs-line-delay, 0ms);
	}
	.rs-motion .rs-split.is-revealed .rs-line > span { transform: none; }

	/* ----- Staffelung in Reihen ----- */

	@media (min-width: 861px) {
		.rs-motion .wp-block-columns > .wp-block-column:nth-child(2) { --rs-reveal-delay: var(--rs-motion-step); }
		.rs-motion .wp-block-columns > .wp-block-column:nth-child(3) { --rs-reveal-delay: calc(2 * var(--rs-motion-step)); }
		.rs-motion .wp-block-columns > .wp-block-column:nth-child(4) { --rs-reveal-delay: calc(3 * var(--rs-motion-step)); }

		/* Die nummerierten Schritte: erst der Kreis, dann die Linie zum
		   naechsten. Gestapelt auf dem Telefon ergibt eine waagerechte
		   Verbindung keinen Sinn, deshalb nur ab dieser Breite. */
		.rs-steps .wp-block-column::after {
			content: "";
			position: absolute;
			top: 1.15rem;
			left: 2.9rem;
			right: -1.75rem;
			height: 2px;
			background: var(--rs-line);
			transform: scaleX(0);
			transform-origin: left center;
			transition: transform .6s var(--rs-ease) .25s;
		}
		.rs-steps .wp-block-column:last-child::after { content: none; }
		.rs-steps .wp-block-column.is-visible::after { transform: scaleX(1); }

		.rs-motion .rs-steps .wp-block-column::before {
			opacity: 0;
			transform: scale(.65);
			transition: opacity .4s var(--rs-ease), transform .4s var(--rs-ease);
			transition-delay: var(--rs-reveal-delay, 0ms);
		}
		.rs-motion .rs-steps .wp-block-column.is-visible::before {
			opacity: 1;
			transform: scale(1);
		}
	}

	/* Auf dem Telefon kommen gestapelte Spalten einzeln ins Bild — eine
	   Staffelung waere dort keine Reihe, sondern nur Wartezeit. */
	@media (max-width: 860px) {
		.rs-motion .wp-block-columns > .wp-block-column { --rs-reveal-delay: 0ms; }
		:root { --rs-motion-travel: 16px; }
	}

	/* ----- Vom Scrollstand abhaengig ----- */

	/* Nur dort, wo der Browser es selbst rechnen kann. Nachgebaut mit einem
	   Scroll-Handler ruckelt so etwas auf schwachen Geraeten; ohne
	   Unterstuetzung passiert hier einfach nichts. */
	@supports (animation-timeline: view()) {
		.rs-dark::before {
			animation: rs-parallax linear both;
			animation-timeline: view();
		}
	}
}

/* Ohne Bewegungswunsch steht der Schimmer im Hero still. */
@media (prefers-reduced-motion: reduce) {
	.rs-hero::before { animation: none; }
}