/*
Theme Name: Sirima Massage
Theme URI: https://www.sirima-massage.berlin/
Author: Thomas Reinsch
Description: Blocktheme für Sirima Massage in Berlin-Wilmersdorf. Traditionelle Thaimassage, Massage mit Öl, Aroma-Öl-Massage und Paarmassage.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.11.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sirima-massage
Tags: one-column, block-patterns, full-site-editing, custom-colors, custom-menu
*/

/* ---------------------------------------------------------------
   Schriften

   Zwei Schriften, beide unter der SIL Open Font License: Montserrat für die
   Überschriften, Source Sans 3 für den Fließtext. Montserrat ist geometrisch
   gebaut, Source Sans humanistisch – dieser Unterschied lässt die
   Überschriften wirken. Zwei geometrische Schriften nebeneinander sähen
   unentschieden aus.

   Sie liegen als variable Schnitte in assets/fonts/ und werden von dort
   geladen – nicht von Google. Ein Aufruf bei Google würde die IP-Adresse
   jeder Besucherin an einen Dritten übertragen, und dafür gibt es keine
   Einwilligung.

   Eine Datei je Zeichensatz: "latin" deckt Deutsch und Englisch ab,
   "latin-ext" die Zeichen darüber hinaus. Der Browser lädt nur, was er
   braucht.
   --------------------------------------------------------------- */

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/montserrat-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url('assets/fonts/montserrat-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/source-sans-3-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/source-sans-3-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------
   Grundlagen

   Die Farben und Abstände kommen aus theme.json; hier stehen sie nur
   als Kurzform, damit die Regeln lesbar bleiben.
   --------------------------------------------------------------- */

:root {
	--sirima-rot: var(--wp--preset--color--rot, #7B120E);
	--sirima-rot-dunkel: var(--wp--preset--color--rot-dunkel, #5C0D0A);
	--sirima-rot-gedaempft: var(--wp--preset--color--rot-gedaempft, #8C3A30);
	--sirima-gold: var(--wp--preset--color--gold, #C0872E);
	--sirima-gold-hell: var(--wp--preset--color--gold-hell, #E0C08A);
	--sirima-gruen: var(--wp--preset--color--gruen, #6E852D);
	--sirima-braun: var(--wp--preset--color--braun, #2A190D);
	--sirima-text: var(--wp--preset--color--text, #5C4E42);
	--sirima-text-leise: var(--wp--preset--color--text-leise, #736556);
	--sirima-creme: var(--wp--preset--color--creme, #FDF6EC);
	--sirima-creme-hell: var(--wp--preset--color--creme-hell, #FEF9F2);
	--sirima-sand: var(--wp--preset--color--sand, #F3E5D2);
	--sirima-linie: var(--wp--preset--color--linie, #EADFCE);

	--sirima-breite: 1240px;
	--sirima-rand: clamp(1.25rem, 4vw, 2.5rem);
	--sirima-radius: 10px;
	--sirima-kopf-hoehe: 76px;
}

/* Innenabstand und Rahmen zählen zur Breite. WordPress setzt das nicht für
   alle Elemente – ohne diese Zeile ist .sirima-breit um seine 2 × 40 px
   Innenabstand zu breit und die Begrenzung auf 1240 px greift nicht. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Der browsereigene Fokusring ist ein dünner dunkler Strich – auf dem hellen
   Creme kaum auszumachen. Dieser hier ist kräftiger und hält Abstand zum
   Element, damit er auch auf den roten Knöpfen zu sehen ist. */
:focus-visible {
	outline: 2px solid var(--sirima-rot);
	outline-offset: 2px;
	border-radius: 2px;
}

html {
	scroll-behavior: smooth;
	/* Damit die Sprungmarken nicht unter dem festen Kopf landen. */
	scroll-padding-top: calc(var(--sirima-kopf-hoehe) + 1rem);
}

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

body {
	background: var(--sirima-creme);
	-webkit-font-smoothing: antialiased;
}

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

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

/* Der Hauptbereich darf nicht einschnüren – die Abschnitte bringen ihre
   eigene Breitenbegrenzung mit (.sirima-breit).

   Zwei Regeln, weil WordPress an zwei Stellen begrenzt: einmal am <main>
   selbst über has-global-padding, und einmal an jedem seiner Kinder über
   is-layout-constrained. Ohne die zweite Regel stehen alle Abschnitte in
   einer 780 px schmalen Spalte, während Kopf- und Fußbereich – die
   außerhalb von <main> liegen – über die volle Breite gehen. */
.wp-site-blocks > main.wp-block-group:not(.sirima-inhaltsseite) {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.wp-site-blocks > main.wp-block-group:not(.sirima-inhaltsseite) > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.sirima-breit {
	max-width: var(--sirima-breite);
	margin-inline: auto;
	padding-inline: var(--sirima-rand);
}

/* ---------------------------------------------------------------
   Bausteine: Marke, Knöpfe, Augenbraue, Sinnbilder
   --------------------------------------------------------------- */

.sirima-marke {
	display: block;
	width: auto;
	height: 44px;
}

.sirima-marke--hell {
	height: 42px;
}

@media (max-width: 520px) {
	.sirima-marke {
		height: 40px;
	}
}

/* Der Sprachumschalter: ein schlichtes Kürzel neben dem Termin-Knopf. Er
   soll auffindbar sein, aber dem Knopf nicht die Aufmerksamkeit nehmen. */
.sirima-kopf__sprache {
	flex: none;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--sirima-linie);
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1;
	text-decoration: none;
	color: var(--sirima-text-leise);
	transition: color 0.18s ease, border-color 0.18s ease;
}

.sirima-kopf__sprache:hover,
.sirima-kopf__sprache:focus-visible {
	color: var(--sirima-braun);
	border-color: var(--sirima-gold-hell);
}

.sirima-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 49px;
	padding: 0.85rem 1.5rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.sirima-knopf--voll {
	background: var(--sirima-rot);
	color: var(--sirima-creme-hell);
	border: 1px solid var(--sirima-rot);
}

.sirima-knopf--voll:hover,
.sirima-knopf--voll:focus-visible {
	background: var(--sirima-rot-dunkel);
	border-color: var(--sirima-rot-dunkel);
	color: var(--sirima-creme-hell);
}

/* Nicht das Gold der Symbole, sondern ein dunklerer Ton: #C0872E käme auf
   Creme nur auf 2,6 zu 1, dieser hier auf 4,6 – erst damit ist die
   Beschriftung für alle lesbar. */
.sirima-knopf--rand {
	background: transparent;
	color: #956821;
	border: 1px solid var(--sirima-gold-hell);
	font-weight: 600;
}

.sirima-knopf--rand:hover,
.sirima-knopf--rand:focus-visible {
	background: var(--sirima-creme-hell);
	border-color: var(--sirima-gold);
	color: var(--sirima-braun);
}

.sirima-knopfreihe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
}

.sirima-knopfreihe--mitte {
	justify-content: center;
	margin-top: 2.5rem;
	margin-bottom: 0;
}

/* Auf dem Handy stehen die Knöpfe untereinander und über die volle Breite.
   Nebeneinander passen sie nicht, und unterschiedlich breite Knöpfe
   untereinander sehen aus wie ein Versehen. */
@media (max-width: 520px) {
	.sirima-knopfreihe {
		flex-direction: column;
		align-items: stretch;
	}

	.sirima-knopfreihe .sirima-knopf {
		width: 100%;
	}
}

.sirima-augenbraue {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sirima-rot-gedaempft);
}

.sirima-augenbraue--mitte {
	text-align: center;
}

/* Die Sinnbilder sind ein <picture> mit WebP und PNG darin. Die Größe steht
   am Behälter, das Bild darin füllt ihn – sonst müsste jede der drei
   Größenangaben unten doppelt geschrieben werden. */
.sirima-sinnbild {
	display: block;
	width: 48px;
	height: 48px;
	flex: none;
}

.sirima-sinnbild img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sirima-zeichen {
	flex: none;
}

.sirima-teiler {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	max-width: 22rem;
	margin: 1.5rem 0;
}

.sirima-teiler::before,
.sirima-teiler::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--sirima-gold-hell);
}

.sirima-teiler picture {
	display: block;
	flex: none;
	width: 26px;
	height: 26px;
}

.sirima-teiler img {
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------------
   Kopfbereich
   --------------------------------------------------------------- */

.sirima-kopf-huelle {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--sirima-creme);
	border-bottom: 1px solid var(--sirima-linie);
}

.sirima-kopf {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: var(--sirima-breite);
	min-height: var(--sirima-kopf-hoehe);
	margin-inline: auto;
	padding-inline: var(--sirima-rand);
}

.sirima-kopf__marke {
	text-decoration: none;
	margin-right: auto;
}

.sirima-kopf__navigation {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.sirima-kopf__liste {
	display: flex;
	align-items: center;
	gap: 1.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sirima-kopf__liste a {
	font-size: 0.9375rem;
	color: var(--sirima-text);
	text-decoration: none;
}

.sirima-kopf__liste a:hover,
.sirima-kopf__liste a:focus-visible {
	color: var(--sirima-rot);
}

.sirima-kopf__schalter {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--sirima-linie);
	border-radius: 6px;
	color: var(--sirima-braun);
	cursor: pointer;
}

/* Drei Striche aus einem Element: der mittlere ist der Strich selbst,
   die beiden anderen sind seine Pseudoelemente. */
.sirima-kopf__schalter-strich,
.sirima-kopf__schalter-strich::before,
.sirima-kopf__schalter-strich::after {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	background: currentColor;
	border-radius: 2px;
}

.sirima-kopf__schalter-strich::before,
.sirima-kopf__schalter-strich::after {
	content: "";
	position: relative;
}

.sirima-kopf__schalter-strich::before {
	top: -6px;
}

.sirima-kopf__schalter-strich::after {
	top: 4px;
}

@media (max-width: 1100px) {
	.sirima-kopf__liste {
		gap: 1.25rem;
	}
}

@media (max-width: 940px) {
	.sirima-kopf__schalter {
		display: block;
		order: 3;
	}

	.sirima-kopf__navigation {
		display: none;
		order: 4;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		padding-bottom: 1.5rem;
	}

	.sirima-kopf[data-offen] .sirima-kopf__navigation {
		display: flex;
	}

	.sirima-kopf__sprache {
		align-self: flex-start;
	}

	.sirima-kopf {
		flex-wrap: wrap;
		padding-block: 0.9rem;
	}

	.sirima-kopf__liste {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.sirima-kopf__liste a {
		display: block;
		padding: 0.75rem 0;
		border-bottom: 1px solid var(--sirima-linie);
	}

	.sirima-kopf__termin {
		align-self: flex-start;
	}
}

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */

.sirima-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(30rem, 44vw, 38rem);
	background: var(--sirima-creme);
	overflow: hidden;
}

.sirima-hero__bild {
	position: absolute;
	inset: 0 0 0 auto;
	width: 82%;
	display: block;
}

/* Das <picture> ist von Haus aus inline. Ohne display:block steht unter dem
   Bild die Unterlänge der Textzeile – auf dem Handy ein heller Streifen
   zwischen Bild und Text. */
.sirima-hero__bild picture {
	display: block;
	height: 100%;
}

.sirima-hero__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
}

/* Der Verlauf schiebt die Fotokante unter den Text, statt sie hart
   abzuschneiden. Er liegt über dem Bild, nicht über dem Text. */
.sirima-hero__bild::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--sirima-creme) 0%,
		rgba(253, 246, 236, 0.97) 14%,
		rgba(253, 246, 236, 0.72) 30%,
		rgba(253, 246, 236, 0.28) 48%,
		rgba(253, 246, 236, 0) 66%
	);
}

.sirima-hero__inhalt {
	position: relative;
	z-index: 1;
	width: min(100%, var(--sirima-breite));
	margin-inline: auto;
	padding: clamp(3rem, 6vw, 5rem) var(--sirima-rand);
}

.sirima-hero__titel {
	max-width: 12ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--huge, clamp(2.75rem, 6vw, 4.25rem));
	line-height: 1.03;
	color: var(--sirima-braun);
}

.sirima-hero__text {
	max-width: 37ch;
	margin: 0 0 2rem;
	font-size: 1.0625rem;
}

@media (max-width: 860px) {
	.sirima-hero {
		display: block;
		min-height: 0;
	}

	.sirima-hero__bild {
		position: static;
		width: 100%;
		aspect-ratio: 16 / 10;
	}

	.sirima-hero__bild::after {
		background: linear-gradient(180deg, rgba(253, 246, 236, 0) 55%, var(--sirima-creme) 100%);
	}

	.sirima-hero__inhalt {
		padding-top: 2rem;
	}

	.sirima-hero__titel,
	.sirima-hero__text {
		max-width: none;
	}
}

/* ---------------------------------------------------------------
   Vier Zusagen
   --------------------------------------------------------------- */

.sirima-zusagen {
	background: var(--sirima-creme-hell);
	border-block: 1px solid var(--sirima-linie);
}

.sirima-zusagen__gitter {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: var(--sirima-breite);
	margin-inline: auto;
	padding-inline: var(--sirima-rand);
}

/* Innenabstand, Abstand und Sinnbild sind hier knapper als sonst: die vier
   Spalten sind je 290 px breit, und der Text soll einzeilig überschrieben und
   zweizeilig gesetzt sein. Jedes eingesparte Pixel geht an die Textspalte. */
.sirima-zusage {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.75rem 1rem;
}

.sirima-zusage .sirima-sinnbild {
	width: 42px;
	height: 42px;
}

.sirima-zusage + .sirima-zusage {
	border-left: 1px solid var(--sirima-linie);
}

.sirima-zusage__titel {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--sirima-braun);
}

.sirima-zusage__text {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--sirima-text-leise);
}

/* Früher auf zwei Spalten als die übrigen Reihen: hier stehen Sinnbild und
   Text nebeneinander. Die Textspalte misst (Fensterbreite - 80) / 4 - 86 und
   braucht rund 200 px, damit die Beitexte zweizeilig bleiben – das ist ab
   etwa 1225 px der Fall. Darunter stehen zwei Spalten, dort ist reichlich
   Platz. */
@media (max-width: 1224px) {
	.sirima-zusagen__gitter {
		grid-template-columns: repeat(2, 1fr);
	}

	.sirima-zusage + .sirima-zusage {
		border-left: 0;
	}

	.sirima-zusage:nth-child(even) {
		border-left: 1px solid var(--sirima-linie);
	}

	.sirima-zusage:nth-child(n + 3) {
		border-top: 1px solid var(--sirima-linie);
	}
}

@media (max-width: 520px) {
	.sirima-zusagen__gitter {
		grid-template-columns: 1fr;
	}

	.sirima-zusage:nth-child(even) {
		border-left: 0;
	}

	.sirima-zusage + .sirima-zusage {
		border-top: 1px solid var(--sirima-linie);
	}
}

/* ---------------------------------------------------------------
   Abschnitte
   --------------------------------------------------------------- */

.sirima-abschnitt {
	padding-block: clamp(2.25rem, 7vw, 5.5rem);
}

.sirima-abschnitt--creme {
	background: var(--sirima-creme);
}

.sirima-abschnitt--creme-hell {
	background: var(--sirima-creme-hell);
}

.sirima-abschnitt--sand {
	background: var(--sirima-sand);
}

.sirima-abschnitt--randlos {
	padding-block: 0;
}

.sirima-abschnitt__titel {
	margin: 0 0 3rem;
	font-size: var(--wp--preset--font-size--xx-large, clamp(2rem, 4vw, 2.75rem));
	text-align: center;
	color: var(--sirima-braun);
}

/* ---------------------------------------------------------------
   Massagen und Preise
   --------------------------------------------------------------- */

.sirima-massagen {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.sirima-massage {
	display: flex;
	flex-direction: column;
	background: var(--sirima-creme-hell);
	border: 1px solid var(--sirima-linie);
	border-radius: var(--sirima-radius);
	overflow: hidden;
}

.sirima-massage__bild {
	display: block;
	aspect-ratio: 4 / 3;
}

.sirima-massage__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sirima-massage__text {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem 1.4rem 1.25rem;
}

.sirima-massage__titel {
	margin: 0 0 0.85rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.1875rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--sirima-braun);
}

.sirima-massage__text > p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--sirima-text);
}

.sirima-preisliste {
	margin: 1.5rem 0 0;
	/* Die Preisliste sitzt immer unten, auch wenn der Text kürzer ist –
	   sonst tanzen die vier Karten auf verschiedenen Höhen. */
	margin-top: auto;
	padding-top: 1.25rem;
}

.sirima-preisliste__zeile {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.6rem 0;
	border-top: 1px solid var(--sirima-linie);
	font-size: 0.875rem;
}

/* Leere Zeilen halten nur den Platz. Ohne Linie, ohne Inhalt – sie sorgen
   dafür, dass gleiche Zeitstufen über alle Karten auf einer Höhe liegen. */
.sirima-preisliste__zeile--leer {
	border-top-color: transparent;
}

/* Ein geschütztes Leerzeichen aus dem Stylesheet statt aus dem Quelltext:
   die Zeile behält ihre Höhe, ohne dass Vorleseprogramme etwas vorfinden. */
.sirima-preisliste__zeile--leer::before {
	content: "\00a0";
}

/* Die Schlusslinie sitzt unter der letzten gefüllten Zeile, nicht unter der
   letzten überhaupt – sonst schwebte sie unter einer leeren. */
.sirima-preisliste__zeile--schluss {
	border-bottom: 1px solid var(--sirima-linie);
}

.sirima-preisliste dt {
	margin: 0;
	color: var(--sirima-text);
}

.sirima-preisliste dd {
	margin: 0;
	font-weight: 800;
	color: var(--sirima-braun);
	white-space: nowrap;
}

@media (max-width: 1000px) {
	.sirima-massagen {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.sirima-massagen {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------
   Welche Massage passt zu mir
   --------------------------------------------------------------- */

.sirima-orientierung {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.sirima-orientierung__spalte {
	padding: 0 1.5rem;
	text-align: center;
}

.sirima-orientierung__spalte + .sirima-orientierung__spalte {
	border-left: 1px solid var(--sirima-linie);
}

.sirima-orientierung__kreis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	margin-bottom: 1rem;
	background: #F6EADC;
	border-radius: 50%;
}

.sirima-orientierung__kreis .sirima-sinnbild {
	width: 44px;
	height: 44px;
}

.sirima-orientierung__titel {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.1875rem;
	font-weight: 800;
	color: var(--sirima-braun);
}

.sirima-orientierung__merkmal {
	margin: 0 0 0.9rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--sirima-braun);
}

.sirima-orientierung__text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--sirima-text-leise);
}

@media (max-width: 900px) {
	.sirima-orientierung {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.5rem 0;
	}

	.sirima-orientierung__spalte + .sirima-orientierung__spalte {
		border-left: 0;
	}

	.sirima-orientierung__spalte:nth-child(even) {
		border-left: 1px solid var(--sirima-linie);
	}
}

@media (max-width: 520px) {
	.sirima-orientierung {
		grid-template-columns: 1fr;
	}

	.sirima-orientierung__spalte:nth-child(even) {
		border-left: 0;
	}
}

/* ---------------------------------------------------------------
   Unser Studio
   --------------------------------------------------------------- */

.sirima-studio {
	display: grid;
	grid-template-columns: minmax(18rem, 30%) 1fr;
	align-items: center;
	gap: clamp(2rem, 4vw, 3.5rem);
	/* Links wie der Rest der Seite eingerückt, rechts laufen die Bilder
	   bis an den Rand des Fensters – so steht es im Entwurf. */
	padding-left: max(var(--sirima-rand), calc((100vw - var(--sirima-breite)) / 2 + var(--sirima-rand)));
	padding-block: clamp(3rem, 6vw, 4.5rem);
}

.sirima-studio__titel {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--xx-large, clamp(2rem, 4vw, 2.75rem));
	color: var(--sirima-braun);
}

.sirima-studio__text > p {
	margin: 0 0 1.5rem;
	font-size: 0.9375rem;
}

.sirima-hakenliste {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.sirima-hakenliste li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-bottom: 0.55rem;
	font-size: 0.9375rem;
}

.sirima-hakenliste .sirima-zeichen {
	margin-top: 0.2rem;
	color: var(--sirima-gruen);
}

/* Zwei Felder nebeneinander: links das Foto vom Empfang, rechts die Karte.
   Das Foto bekommt etwas mehr Breite, die Karte braucht vor allem Höhe. */
.sirima-studio__bilder {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 0.9rem;
	height: clamp(22rem, 34vw, 30rem);
}

.sirima-studio__bild {
	display: block;
	overflow: hidden;
	border-radius: var(--sirima-radius);
}

.sirima-studio__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Die Karte: solange sie nicht geladen ist, steht hier der Hinweis mit dem
   Knopf. Nach dem Klick füllt der Rahmen denselben Kasten. */
.sirima-karte {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: 1px solid var(--sirima-linie);
	border-radius: var(--sirima-radius);
	background: var(--sirima-creme);
}

.sirima-karte__hinweis {
	max-width: 22rem;
	padding: 1.75rem 1.5rem;
	text-align: center;
}

.sirima-karte__nadel {
	width: 26px;
	height: 26px;
	color: var(--sirima-gold);
}

.sirima-karte__adresse {
	margin: 0.5rem 0 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--sirima-braun);
}

.sirima-karte__text {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--sirima-text-leise);
}

.sirima-karte__text:last-child {
	margin: 0.9rem 0 0;
}

.sirima-karte--geladen {
	display: block;
	background: none;
}

@media (max-width: 900px) {
	.sirima-studio {
		grid-template-columns: 1fr;
		padding-inline: var(--sirima-rand);
	}

	.sirima-studio__bilder {
		height: 20rem;
	}
}

@media (max-width: 520px) {
	.sirima-studio__bilder {
		grid-template-columns: 1fr;
		height: auto;
	}

	.sirima-studio__bild {
		aspect-ratio: 4 / 3;
	}

	.sirima-karte {
		min-height: 20rem;
	}
}

/* ---------------------------------------------------------------
   Team
   --------------------------------------------------------------- */

/* Ein Vorspann unter der Abschnittsüberschrift: schmaler als das Karussell
   darunter, damit er als Einleitung lesbar bleibt. */
.sirima-abschnitt__titel--eng {
	margin-bottom: 1rem;
}

.sirima-abschnitt__vorspann {
	max-width: 46ch;
	margin: 0 auto 3rem;
	text-align: center;
	color: var(--sirima-text-leise);
}

/* Die Porträts haben eine feste Breite, keine anteilige: dadurch stehen alle
   drei nebeneinander, sobald der Platz reicht (ab rund 1220 px Fenster), und
   erst darunter wird die Reihe zum Karussell. 3 × 22rem + 2 × 1,5rem = 69rem.

   Die Pfeile liegen absolut über den Rändern der Spur, nicht daneben im
   Fluss. Ständen sie im Fluss, würden sie die Spur schmaler machen – dann
   passten drei Porträts nicht mehr, die Pfeile blendeten sich aus, die Spur
   würde breiter, drei passten wieder: ein Flackern ohne Ende. */
.sirima-personen {
	position: relative;
}

.sirima-personen__spur {
	display: flex;
	gap: 1.5rem;
	justify-content: safe center;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.sirima-personen__spur::-webkit-scrollbar {
	display: none;
}

.sirima-person {
	flex: 0 0 min(22rem, 80vw);
	scroll-snap-align: center;
}

.sirima-person__figur {
	margin: 0;
}

.sirima-person__bild {
	display: block;
	overflow: hidden;
	border-radius: var(--sirima-radius);
	box-shadow: var(--wp--preset--shadow--karte, 0 1px 2px rgba(42, 25, 13, .04), 0 10px 28px rgba(42, 25, 13, .06));
}

.sirima-person__bild img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.sirima-person__text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 1rem;
	text-align: center;
}

.sirima-person__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--sirima-braun);
}

.sirima-person__rolle {
	font-size: 0.875rem;
	color: var(--sirima-text-leise);
}

/* Ohne JavaScript bleiben die Pfeile weg – gescrollt wird dann mit dem
   Finger. Erst das Skript setzt data-bedienbar. */
.sirima-personen__pfeil {
	display: none;
	position: absolute;
	top: 40%;
	z-index: 1;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--sirima-linie);
	border-radius: 50%;
	background: var(--sirima-creme-hell);
	color: var(--sirima-braun);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(42, 25, 13, .12);
	transition: border-color 0.18s ease, opacity 0.18s ease;
}

.sirima-personen__pfeil--zurueck {
	left: 0;
}

.sirima-personen__pfeil--vor {
	right: 0;
}

.sirima-personen[data-bedienbar] .sirima-personen__pfeil {
	display: flex;
}

/* Passt alles ins Bild, gibt es nichts zu blättern. */
.sirima-personen[data-ohne-lauf] .sirima-personen__pfeil {
	display: none;
}

.sirima-personen__pfeil:hover:not(:disabled) {
	border-color: var(--sirima-gold-hell);
}

.sirima-personen__pfeil:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Die Punkte sagen, dass es weitergeht. Sie erscheinen nur, wenn es etwas zu
   blättern gibt – passt alles ins Bild, wären sie eine Behauptung. */
.sirima-punkte {
	display: flex;
	justify-content: center;
	margin-top: 0.75rem;
}

.sirima-personen[data-ohne-lauf] .sirima-punkte {
	display: none;
}

/* Der Punkt ist klein, die Schaltfläche darum herum nicht: 28 × 28 px sind
   mit dem Daumen zu treffen. Sichtbar ist nur der Kreis im Inneren, gezeichnet
   als ::before – die Fläche selbst bleibt durchsichtig. */
.sirima-punkt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.sirima-punkt::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--sirima-gold-hell);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.sirima-punkt[data-aktiv]::before {
	background: var(--sirima-rot);
	transform: scale(1.3);
}

/* Auf dem Handy keine Pfeile: dort wird ohnehin gewischt, und über einem
   300 px breiten Porträt säßen sie im Weg. Die Punkte übernehmen den
   Hinweis, dass es weitergeht. */
@media (max-width: 640px) {
	.sirima-personen[data-bedienbar] .sirima-personen__pfeil {
		display: none;
	}
}

/* ---------------------------------------------------------------
   Kundenstimmen
   --------------------------------------------------------------- */

.sirima-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	margin: -1.75rem 0 2.5rem;
}

.sirima-note__sterne {
	display: inline-flex;
	gap: 0.15rem;
	color: var(--sirima-gold);
}

.sirima-note__text {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
	font-size: 0.875rem;
	color: var(--sirima-text-leise);
}

.sirima-note__text strong {
	font-size: 1rem;
	color: var(--sirima-braun);
}

.sirima-stimmen {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sirima-stimmen__spur {
	display: flex;
	gap: 1.5rem;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.sirima-stimmen__spur::-webkit-scrollbar {
	display: none;
}

.sirima-stimme {
	flex: 0 0 calc((100% - 3rem) / 3);
	scroll-snap-align: start;
	padding: 1.5rem 1.5rem 1.25rem;
	background: var(--sirima-creme-hell);
	border-radius: var(--sirima-radius);
	box-shadow: var(--wp--preset--shadow--karte, 0 1px 2px rgba(42, 25, 13, 0.04), 0 10px 28px rgba(42, 25, 13, 0.06));
}

.sirima-stimme blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}

.sirima-stimme blockquote p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--sirima-text);
}

.sirima-stimme__quelle {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--sirima-text-leise);
}

/* Ohne JavaScript gäbe es nichts zu bedienen – dann bleiben die Pfeile weg
   und die Liste wird gewischt. */
.sirima-stimmen__pfeil {
	display: none;
	flex: none;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background: var(--sirima-creme-hell);
	border: 1px solid var(--sirima-linie);
	border-radius: 50%;
	color: var(--sirima-braun);
	cursor: pointer;
}

.sirima-stimmen[data-bedienbar] .sirima-stimmen__pfeil {
	display: flex;
}

.sirima-stimmen__pfeil:disabled {
	opacity: 0.35;
	cursor: default;
}

.sirima-stimmen__mehr {
	margin: 1.75rem 0 0;
	text-align: center;
	font-size: 0.9375rem;
}

.sirima-stimmen__mehr a {
	color: var(--sirima-rot);
}

@media (max-width: 1000px) {
	.sirima-stimme {
		flex-basis: calc((100% - 1.5rem) / 2);
	}
}

@media (max-width: 640px) {
	.sirima-stimme {
		flex-basis: 100%;
	}

	.sirima-note {
		margin-top: -1rem;
	}
}

/* ---------------------------------------------------------------
   Fußbereich
   --------------------------------------------------------------- */

.sirima-fuss {
	background: var(--sirima-braun);
	color: #D8C7B4;
	padding-top: clamp(3rem, 5vw, 4rem);
	font-size: 0.9375rem;
}

/* Die Kontaktspalte bekommt mehr Anteil als die Zeiten: "Konstanzer Straße
   12A" ist die längste Zeile im Fußbereich und soll nicht zwischen Straße
   und Hausnummer umbrechen. */
.sirima-fuss__gitter {
	display: grid;
	grid-template-columns: 1.2fr 1.2fr 0.95fr 1.15fr;
	gap: 2.5rem;
	padding-bottom: 3rem;
}

.sirima-fuss__spalte + .sirima-fuss__spalte,
.sirima-fuss__marke + .sirima-fuss__spalte {
	border-left: 1px solid rgba(224, 192, 138, 0.22);
	padding-left: 2.5rem;
}

.sirima-fuss__marke p {
	margin: 1.25rem 0 0;
	line-height: 1.7;
}

.sirima-fuss__titel {
	margin: 0 0 1.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sirima-gold-hell);
}

.sirima-fuss__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Die beiden Zeilen der Anschrift stehen fest: Straße mit Hausnummer, dann
   Postleitzahl mit Ort. Ohne nowrap fällt die Hausnummer auf eine eigene
   Zeile, sobald die Spalte ein paar Pixel schmaler wird. Nebenbei sorgt es
   dafür, dass die Rasterspalte nie unter diese Breite fällt. */
.sirima-fuss__anschrift {
	white-space: nowrap;
}

.sirima-fuss__liste li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	line-height: 1.6;
}

.sirima-fuss__liste .sirima-zeichen {
	margin-top: 0.15rem;
	color: var(--sirima-gold-hell);
}

.sirima-fuss__liste--zeiten li {
	flex-direction: column;
	gap: 0.15rem;
}

.sirima-fuss__tage {
	color: #EFE1CE;
}

.sirima-fuss__menues {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.5rem;
}

.sirima-fuss__menue {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sirima-fuss__menue li {
	margin-bottom: 0.85rem;
}

.sirima-fuss a {
	color: #D8C7B4;
	text-decoration: none;
}

.sirima-fuss a:hover,
.sirima-fuss a:focus-visible {
	color: var(--sirima-gold-hell);
	text-decoration: underline;
}

.sirima-fuss__zeile {
	margin: 0;
	padding: 1.25rem var(--sirima-rand);
	border-top: 1px solid rgba(224, 192, 138, 0.18);
	text-align: center;
	font-size: 0.8125rem;
	color: #9C8873;
}

@media (max-width: 900px) {
	.sirima-fuss__gitter {
		grid-template-columns: repeat(2, 1fr);
	}

	.sirima-fuss__spalte + .sirima-fuss__spalte,
	.sirima-fuss__marke + .sirima-fuss__spalte {
		border-left: 0;
		padding-left: 0;
	}
}

@media (max-width: 560px) {
	.sirima-fuss__gitter {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------
   Inhaltsseiten (Impressum, Datenschutz, Preise …)
   --------------------------------------------------------------- */

.sirima-inhaltsseite {
	background: var(--sirima-creme);
}

.sirima-inhaltsseite h1 {
	margin-bottom: 2rem;
}