/*
Theme Name: PatternLib Basis
Theme URI: https://patternlab.aurora.xisio.com/
Description: Xisio-Basistheme. Traegt die Design-Token in theme.json und eine Bibliothek
             von Sektions-Patterns aus reinen Core-Bloecken. Kein eigener Block, kein
             Pflicht-CSS. Pro Kunde wird nur theme.json ausgetauscht.
Author: Ada Fuchs
Template: twentytwentyfive
Version: 0.6.0
License: GPL-2.0-or-later
Text Domain: patternlib
*/

/*
 * Diese Datei ist absichtlich fast leer.
 *
 * Alles Gestalterische gehoert nach theme.json, weil WordPress die Werte von dort in den
 * Editor UND ins Frontend traegt. Genau das hat bei Serenada gefehlt: Design lag in dieser
 * style.css, die nur per wp_enqueue_scripts geladen wurde, also ausschliesslich vorn.
 * Der Editor sah dadurch anders aus als die Seite, und niemand fand den Grund.
 *
 * Was hier trotzdem stehen darf: Feinheiten, die theme.json nicht ausdruecken kann.
 * Alles davon muss ueber add_editor_style() auch im Editor landen, siehe functions.php.
 */

/* Kicker: Versalien ueber der Seitenueberschrift. */
.is-style-kicker {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
}

/* Karten sollen in einer Zeile gleich hoch sein, auch bei ungleichem Text. */
.wp-block-columns.is-style-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.wp-block-columns.is-style-cards > .wp-block-column > .wp-block-group {
	flex: 1;
}

/* Fussbereich: Seitenliste soll wie eine Menuespalte aussehen, nicht wie eine Aufzaehlung. */
footer .wp-block-page-list {
	list-style: none;
	padding-left: 0;
}

footer .wp-block-page-list li {
	margin-block: 0.4em;
}

footer .wp-block-page-list a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

footer .wp-block-page-list a:hover,
footer .wp-block-page-list a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/*
 * Kein X im Fussbereich.
 *
 * Die Vorlage hat dort ein grosses diagonales X. Drei Anlaeufe (Groesse, Position,
 * Media Query) haben es nicht geschafft, es so zu setzen, dass es die Service-Spalte
 * nicht ueberdeckt — der Fussbereich hier ist dreispaltig bis zum rechten Rand, der
 * Fussbereich der Vorlage ist es nicht. Statt weiter zu schieben: weggelassen.
 * Lesbare Links schlagen eine Dekoration, die sie verdeckt.
 *
 * Bei den nummerierten Karten und bei der Kundenstimme steht das X und funktioniert
 * dort, weil es hinter Kartenraendern und Weissraum liegt, nicht hinter Text.
 */

/*
 * Dekoration ueber eine Klasse statt ueber Block-Attribute.
 *
 * Das background-Attribut von core/group von Hand ins Markup zu schreiben, fuehrt im
 * Editor zu "Dieser Block enthaelt unerwarteten oder ungueltigen Inhalt": Der Editor
 * vergleicht das gespeicherte HTML mit dem, was die save()-Funktion des Blocks erzeugen
 * wuerde, und meine Handarbeit traf das nicht exakt. Eine zusaetzliche CSS-Klasse ist
 * fuer diese Pruefung unsichtbar und kann den Konflikt nicht ausloesen.
 */
.wp-block-group.hat-deko-x {
	background-image: url("/wp-content/uploads/2026/08/deko-x.png");
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: auto 52%;
}

@media (max-width: 1200px) {
	.wp-block-group.hat-deko-x {
		background-image: none;
	}
}

/*
 * Keine grauen Streifen zwischen den Sektionen.
 *
 * WordPress setzt auf jeden Block der obersten Ebene einen margin-block-start aus dem
 * blockGap (hier 24 px). Zwischen zwei randabfallenden Sektionen scheint dadurch der
 * Seitenhintergrund als Streifen durch. Der Abstand kommt bei uns aus dem Innenabstand
 * der Sektionen selbst, der aeussere ist ueberfluessig.
 */
.wp-site-blocks > .alignfull,
.wp-site-blocks > .wp-block-group.alignfull,
.wp-site-blocks > .wp-block-cover.alignfull {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*
 * Halbtransparenter Kopfbereich ueber dem Aufmacher.
 *
 * Einstellbar ueber zwei Klassen am Header-Block:
 *   .kopf-ueber-hero        liegt ueber dem Aufmacher, halbtransparent   (Standard)
 *   .kopf-ueber-hero.deckend  bleibt undurchsichtig, ohne Ueberlappung
 *
 * Umschalten im Editor: Header-Block markieren, unter "Erweitert" die Klasse "deckend"
 * ergaenzen oder entfernen. Wer es site-weit anders will, aendert diese Regel.
 *
 * backdrop-filter wird von allen aktuellen Browsern unterstuetzt; wo nicht, bleibt die
 * Flaeche schlicht halbtransparent, was ebenfalls lesbar ist.
 */
.wp-site-blocks > .kopf-ueber-hero:not(.deckend) {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 10;
	background-color: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Der Aufmacher rutscht unter den Kopfbereich, damit nichts verdeckt wird. */
.wp-site-blocks > .kopf-ueber-hero:not(.deckend) + .wp-block-cover {
	padding-block-start: calc(var(--wp--preset--spacing--60) + 4rem);
}

@media (max-width: 781px) {
	/* Auf schmalen Geraeten deckend, sonst kollidiert das Menue mit dem Hero-Text. */
	.wp-site-blocks > .kopf-ueber-hero {
		position: static;
		background-color: var(--wp--preset--color--surface);
		backdrop-filter: none;
	}
	.wp-site-blocks > .kopf-ueber-hero + .wp-block-cover {
		padding-block-start: var(--wp--preset--spacing--60);
	}
}

/*
 * Das X als Hintergrundelement im Aufmacher, optional.
 *
 * Einschalten: dem Cover-Block die Klasse "hat-deko-x-hero" geben.
 * Es liegt hinter dem Text und ueber dem Video, deshalb gedaempft.
 */
.wp-block-cover.hat-deko-x-hero > .wp-block-cover__inner-container::before {
	content: "";
	position: absolute;
	inset-block: -2rem;
	inset-inline-end: -6rem;
	width: 26%;
	background-image: url("/wp-content/uploads/2026/08/deko-x.png");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 0.4;
	pointer-events: none;
	z-index: -1;
}

@media (max-width: 1200px) {
	.wp-block-cover.hat-deko-x-hero > .wp-block-cover__inner-container::before {
		display: none;
	}
}

/*
 * Streifen zum Durchblaettern — Slider ohne JavaScript und ohne Plugin.
 *
 * Technik: CSS Scroll Snap. Ein waagerecht scrollbarer Flex-Container, dessen Kinder an
 * definierten Punkten einrasten. Wischen, Scrollen und Tastatur funktionieren nativ,
 * Screenreader lesen alle Folien nacheinander.
 *
 * Verwendung: dem aeusseren Flex-Block die Klasse "streifen" geben, jedem Kind
 * "streifen__folie". Wie breit eine Folie ist, steuert --folien-breite.
 */
.wp-block-group.streifen {
	--folien-breite: 34rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	scrollbar-width: thin;
	padding-block-end: var(--wp--preset--spacing--20);
	align-items: stretch;
}

.wp-block-group.streifen > .streifen__folie {
	flex: 0 0 min(var(--folien-breite), 85%);
	scroll-snap-align: start;
}

/* Ein sichtbarer Fokusring, wenn der Streifen per Tastatur angesteuert wird. */
.wp-block-group.streifen:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

/* Breite Folien fuer Bildstreifen. */
.wp-block-group.streifen.streifen--breit {
	--folien-breite: 60rem;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.streifen { scroll-behavior: auto; }
}

/*
 * Icons in Kartengroesse.
 *
 * core/icon rendert ein SVG mit fest eingetragenem width/height von 24 px; die fontSize im
 * Blockattribut wirkt darauf nicht. Die Groesse kommt deshalb von hier. Wer ein einzelnes
 * Icon anders will, gibt dem Block eine der Zusatzklassen.
 */
.wp-block-icon.wp-block-icon > svg {
	width: 1em;
	height: 1em;
}

/* Icons in Karten: gross genug, um als Bildmarke zu wirken. */
.wp-block-group.has-muted-background-color > .wp-block-icon.wp-block-icon,
.wp-block-icon.wp-block-icon.icon-gross {
	font-size: 4rem;
	line-height: 1;
	margin-block-end: var(--wp--preset--spacing--10);
}

.wp-block-icon.wp-block-icon.icon-mittel { font-size: 2.5rem; line-height: 1; }
.wp-block-icon.wp-block-icon.icon-klein  { font-size: 1.5rem; line-height: 1; }

/* Die Haken in der Merkmalliste bleiben textnah, sie stehen neben einer Zeile. */
.wp-block-group.is-nowrap > .wp-block-icon.wp-block-icon {
	font-size: 1.5rem;
	line-height: 1;
	margin-block-end: 0;
}

/*
 * Aufmacher: Text nicht am Rand kleben lassen.
 *
 * Die contentSize des Cover-Blocks setzt sich hier nicht durch, deshalb begrenzen wir den
 * Inhalt von aussen. Der Textblock steht linksbuendig innerhalb der Inhaltsbreite, nicht
 * am Fensterrand — so wie in der Vorlage.
 */
.wp-block-cover.hat-deko-x-hero > .wp-block-cover__inner-container.is-layout-constrained {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

.wp-block-cover.hat-deko-x-hero > .wp-block-cover__inner-container.is-layout-constrained > * {
	max-width: 46rem;
	margin-inline: 0;
}

/*
 * Streifen: Blaettern statt Scrollbalken.
 *
 * Der Balken verschwindet, dafuer gibt es zwei Schaltflaechen. Sie entstehen per
 * JavaScript (siehe functions.php) und sind bewusst Fortschritt, nicht Voraussetzung:
 * Ohne JavaScript bleibt der Streifen scroll- und wischbar, nur ohne Knoepfe.
 */
.wp-block-group.streifen {
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.wp-block-group.streifen::-webkit-scrollbar {
	display: none;
}

.streifen-huelle {
	position: relative;
}

.streifen-knopf {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: grid;
	place-items: center;
	inline-size: 3rem;
	block-size: 3rem;
	border: none;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
	transition: opacity 0.2s;
}

.streifen-knopf[hidden] { display: none; }
.streifen-knopf--zurueck { inset-inline-start: -1.5rem; }
.streifen-knopf--vor     { inset-inline-end: -1.5rem; }

.streifen-knopf:hover  { background: var(--wp--preset--color--contrast); }
.streifen-knopf:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

@media (max-width: 900px) {
	/* Auf schmalen Geraeten wischt man, da stoeren Knoepfe nur. */
	.streifen-knopf { display: none; }
}

/*
 * Zeilenlaenge: geregelt ueber contentSize in theme.json, nicht hier.
 *
 * Ein Versuch, Text per max-width zu begrenzen und gleichzeitig linksbuendig mit den
 * Karten zu halten, ist am 21.08.2026 dreimal an WordPress' generierten Layout-Regeln
 * gescheitert. Die tragen dieselbe Spezifitaet und setzen margin-inline: auto, was jede
 * Begrenzung wieder mittig zieht.
 *
 * Der Weg mit dem System statt gegen es: contentSize begrenzt den Text (70rem), Karten,
 * Bilder, Slider und Tabellen laufen als alignwide auf die volle Breite. Ueberschrift und
 * Text stehen dadurch gemeinsam etwas eingerueckt gegenueber den Medien — ein etabliertes
 * Layoutmuster, kein Versehen.
 */

/*
 * Karte mit Einwilligung vor dem Laden.
 *
 * Der Knopf sieht aus wie eine Karte, ist aber nur eine Flaeche mit Hinweis. Erst der
 * Klick holt das iframe von OpenStreetMap. Siehe inc-karte.php und assets/js/karte.js.
 */
.karte-osm {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--40);
	block-size: var(--karte-hoehe, 420px);
	border-radius: 5px;
	overflow: hidden;
	background-color: var(--wp--preset--color--muted);
}

.karte-osm__knopf {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
	block-size: 100%;
	padding: var(--wp--preset--spacing--40);
	border: 2px dashed color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	border-radius: 5px;
	background: none;
	color: var(--wp--preset--color--contrast);
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s;
}

.karte-osm__knopf:hover,
.karte-osm__knopf:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
}

.karte-osm__knopf:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: -3px;
}

.karte-osm__titel {
	font-size: var(--wp--preset--font-size--card);
	font-weight: 600;
}

.karte-osm__hinweis {
	max-inline-size: 44rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.karte-osm__rahmen {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
}

/* Der Ersatzlink steht immer da: als Angebot neben der Karte, als Rettung ohne JavaScript. */
.karte-osm__ersatz {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	margin: 0;
	padding: 0.4em 0.8em;
	background-color: color-mix(in srgb, var(--wp--preset--color--surface) 92%, transparent);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Gerenderter Markdown folgt denselben Regeln wie Bloecke.
 *
 * Der Renderer erzeugt schlichtes HTML ohne wp-block-Klassen. Ohne diese Regeln stuende
 * gerenderter Text in Browser-Standardtypografie neben Bloecken im Theme-Design — der
 * Unterschied faellt sofort auf und laesst die Seite unfertig wirken.
 *
 * Die Werte kommen aus theme.json, nicht aus eigenen Zahlen. Wer die Skala aendert,
 * aendert damit auch den Markdown-Bereich.
 */
.markdown-inhalt {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

.markdown-inhalt > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.markdown-inhalt :is(h2, h3, h4, h5, h6) {
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 600;
	line-height: 1.2;
}

.markdown-inhalt > :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--50);
}

.markdown-inhalt h2 { font-size: var(--wp--preset--font-size--section); }
.markdown-inhalt h3 { font-size: var(--wp--preset--font-size--card); }
.markdown-inhalt h4 { font-size: var(--wp--preset--font-size--lead); }

.markdown-inhalt p {
	max-inline-size: 70rem;
}

.markdown-inhalt :is(ul, ol) {
	padding-inline-start: 1.4em;
}

.markdown-inhalt li + li {
	margin-block-start: 0.4em;
}

.markdown-inhalt a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.markdown-inhalt blockquote {
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--30);
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--lead);
}

.markdown-inhalt code {
	padding: 0.15em 0.4em;
	border-radius: 3px;
	background-color: var(--wp--preset--color--muted);
	font-size: 0.9em;
}

.markdown-inhalt hr {
	margin-block: var(--wp--preset--spacing--50);
	border: 0;
	border-block-start: 1px solid var(--wp--preset--color--muted);
}

.markdown-inhalt img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 5px;
}