/*
Theme Name: RhekTec Theme
Theme URI: https://rhektec.at
Author: RhekTec
Author URI: https://rhektec.at
Description: Praesentationsschicht fuer den RhekTec Builder. Enthaelt Header, Footer, Navigation, Templates und das globale Design-System. Inhalte werden vom Plugin "RhekTec Builder" verwaltet und bleiben beim Theme-Wechsel erhalten (siehe docs/ARCHITECTURE.md).
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
Version: 0.4.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rhektec-theme
*/

/*
 * Basis-Layout und Elementstile fuer die vom RhekTec Builder gerenderten
 * Elemente (rhektec-el-*). Farb-/Typografie-Tokens kommen zur Laufzeit als
 * CSS-Custom-Properties vom Plugin (DesignSystem\CssVariablesOutput) -
 * diese Datei referenziert ausschliesslich die Variablennamen, keine festen
 * Werte, damit globale Aenderungen automatisch durchschlagen (Auftrag
 * Abschnitt 13).
 */

/*
 * D2 (Design-Offensive III, Auftrag Abschnitt 6 "Schriftfamilien").
 * KRITISCHER Fund: das Designsystem dokumentierte "Inter, sans-serif" als
 * Schrift (DesignSystem\DesignSystemRepository::defaults()), aber nirgends
 * im Projekt wurde Inter tatsaechlich als Schriftdatei geladen - jeder
 * Besucher sah dadurch in Wahrheit den System-Font des eigenen Geraets
 * (Arial/Helvetica/Segoe UI), nie die im Designsystem beschriebene
 * Typografie. Selbst gehostet statt per <link> von fonts.googleapis.com
 * geladen (identisches "keine unnoetige externe Laufzeit-Abhaengigkeit"-
 * Prinzip wie die uebrigen Frontend-Assets dieses Projekts, siehe
 * tabs.js/before-after.js-Kommentare: funktioniert auch ohne Internet-
 * zugriff des Website-Besuchers, kein Drittanbieter-Tracking/DSGVO-Risiko
 * durch einen Google-Request aus dem Besucher-Browser).
 *
 * Beide Dateien sind ECHTE Variable Fonts (ein einziges File deckt den
 * gesamten Schriftschnitt-Bereich ab, bezogen direkt von Google Fonts'
 * eigener Auslieferung, SIL Open Font License 1.1 - Lizenztexte liegen
 * neben den Dateien unter rhektec-theme/fonts/OFL-*.txt). Nur der
 * "latin"-Subset (U+0000-00FF deckt deutsche Umlaute/ß vollstaendig ab,
 * siehe unicode-range der Originaldatei) - kein unnoetiger Download fuer
 * Zeichensaetze, die dieses Theme nie ausgibt.
 *
 * Fraunces (serifenbetont, warm, zeitgemaess) als Ueberschriften-Schrift
 * GEGENUEBER Inter (klar, neutral) als Fliesstext-Schrift - bewusste
 * Paarung statt derselben Schrift fuer beides: Ueberschriften brauchen
 * Charakter/Vertrauen (Auftrag Abschnitt 5 "visuelle Hierarchie"), Inter
 * bleibt fuer lange Lesestrecken die bessere Wahl. `--rhektec-font-heading`
 * wurde dafuer im Designsystem auf Fraunces umgestellt (siehe
 * DesignSystemRepository::defaults()).
 */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-variable-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: 'Fraunces';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/fraunces-variable-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;
}

/*
 * P2 (Release-Paket + Kunden-Template "Landeselternverband Salzburg",
 * Auftrag Teil 2 "Verwende folgende Schriftarten: Ueberschriften: Bebas,
 * Fliesstext: Lato"). Identisches Prinzip wie Inter/Fraunces oben: selbst
 * gehostet statt per <link> von fonts.googleapis.com geladen, nur der
 * "latin"-Subset (deckt deutsche Umlaute/ß vollstaendig ab), SIL Open Font
 * License 1.1 (Lizenztexte neben den Dateien unter
 * rhektec-theme/fonts/OFL-*.txt). Tatsaechlich heruntergeladen von Google
 * Fonts' eigener Auslieferung (fonts.gstatic.com, v16 Bebas Neue / v25
 * Lato) - KEINE Behauptung ohne Beleg: siehe CONTENT-PLACEHOLDERS.md fuer
 * den Nachweis, dass diese Dateien tatsaechlich im Paket enthalten UND
 * hier eingebunden sind.
 *
 * "Bebas" im Auftrag bezeichnet die einzige unter diesem Namen frei
 * lizenzierte Schrift (Dharma Type, OFL) - "Bebas Neue", eine reine
 * Versalien-/Display-Schrift mit nur einem Schriftschnitt (400). Kein
 * Variable Font (anders als Inter/Fraunces) - Bebas Neue wird von Google
 * Fonts nur als statischer Schnitt ausgeliefert.
 */
@font-face {
	font-family: 'Bebas Neue';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/bebas-neue-400-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: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/lato-400-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: 'Lato';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/lato-400italic-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: 'Lato';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/lato-700-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: 'Lato';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('fonts/lato-900-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: 'Basic';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/basic-400-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: 'Philosopher';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/philosopher-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Philosopher';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/philosopher-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Philosopher';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/philosopher-400italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * UX6 ("Designsystem vervollstaendigen"): --rhektec-content-width war hier
 * bisher ein fest codierter Wert, unabhaengig vom restlichen, ueber
 * DesignSystem\DesignSystemRepository administrierbaren Designsystem -
 * geaendert auf eine eigene Token-Gruppe ("layout"), die CssVariablesOutput
 * genauso wie colors/spacing/radius/shadow in wp_head ausgibt. Der feste
 * Wert hier entfaellt zugunsten eines Inline-Fallbacks an jeder
 * Verwendungsstelle (var(--rhektec-content-width, 1180px)) - identisches
 * Muster wie bei den Shadow-/Radius-Presets weiter unten in dieser Datei.
 */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--rhektec-font-body, system-ui, sans-serif);
	color: var(--rhektec-color-text, #111827);
	background: var(--rhektec-color-background, #ffffff);
	line-height: 1.65;
}

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

a {
	color: var(--rhektec-color-primary, #1a56db);
}

.rhektec-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.rhektec-site__content {
	flex: 1;
}

/* Block R7 (Accessibility, WCAG 2.4.1 "Bypass Blocks"): .screen-reader-text
 * ist das etablierte WordPress-Core-Muster (identische Werte wie in
 * Core-/Twenty*-Themes) - visuell verborgen, aber fuer Screenreader
 * vorhanden; beim Fokussieren (Tab-Taste) wird der Skip-Link sichtbar, damit
 * sehende Tastaturnutzer ihn ebenfalls erkennen und nutzen koennen. */
.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.rhektec-skip-link:focus {
	position: fixed;
	left: 8px;
	top: 8px;
	width: auto;
	height: auto;
	z-index: 100000;
	padding: 10px 16px;
	background: var(--rhektec-color-background, #ffffff);
	color: var(--rhektec-color-text, #111827);
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	text-decoration: none;
}

/* Header / Navigation */
.rhektec-header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.rhektec-header__inner {
	max-width: var(--rhektec-content-width, 1180px);
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.rhektec-header__brand {
	font-weight: 700;
	font-family: var(--rhektec-font-heading, inherit);
	text-decoration: none;
	color: inherit;
}

.rhektec-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rhektec-nav a {
	text-decoration: none;
	color: inherit;
}

@media (max-width: 640px) {
	.rhektec-header__inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.rhektec-nav ul {
		gap: 12px;
	}
}

/* Footer */
.rhektec-footer {
	margin-top: auto;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding: 32px 24px;
	font-size: 14px;
	color: var(--rhektec-color-muted, #6b7280);
}

.rhektec-footer__inner {
	max-width: var(--rhektec-content-width, 1180px);
	margin: 0 auto;
}

/* Builder-Elemente: Basis-Typografie/Spacing. Farbwerte, Abstaende etc.
 * pro Node werden zusaetzlich als gescopte <style>-Bloecke vom
 * Renderer\TreeRenderer ausgegeben (docs/ARCHITECTURE.md Abschnitt 6). */
/* E3 (Design-Offensive IV): dezent negatives letter-spacing fuer
 * Ueberschriften - bei grossen Schriftgraden ein etabliertes Mittel
 * gegen eine "aufgeblaeht"/generisch wirkende Typografie, bei Fliesstext
 * (.rhektec-el-text) bewusst NICHT gesetzt. */
.rhektec-el-heading {
	font-family: var(--rhektec-font-heading, inherit);
	margin: 0 0 var(--rhektec-spacing-sm, 12px);
	letter-spacing: -0.01em;
}

/*
 * L2 (Design-Fix durch konkrete CSS-Ueberarbeitung): der per-Node-
 * Stylebaustein setzt font-size auf h1/h2 bislang als FESTEN Pixelwert
 * (var(--rhektec-font-size-h1), aktuell 48px) - DesignSystemRepository
 * validiert Scale-Werte gegen ein "\d+(px|rem|em)"-Muster und lehnt
 * clamp() dort bewusst ab (keine Aufweichung der Eingabe-Validierung fuer
 * ein Layout-Problem, Auftrag Abschnitt 5). Eine fluide Groesse laesst
 * sich daher nicht ueber den Admin-Token selbst erzwingen - stattdessen
 * ueberschreibt diese Element+Klassen-Regel (Spezifitaet 0-1-1, hoeher
 * als die einzelne Klasse der generierten Per-Node-Regel 0-1-0) den
 * Festwert ohne !important. Nur h1/h2 (die vom Auftrag explizit mit
 * clamp()-Werten spezifizierten Ebenen) - .rhektec-el-hero__heading hat
 * eine eigene, unabhaengige Regel (siehe dort) und ist von DIESER Regel
 * hier nicht betroffen, bekommt aber seit M2 denselben Zielwertebereich.
 *
 * M2-Nachtrag (Auftrag Abschnitt 2, praezisierte Zielbereiche): auf
 * H1 48-64px / H2 34-44px rekalibriert (vorher 38.4-72px / 28.8-48px -
 * unter- bzw. ueberschritt den jetzt verbindlichen Bereich an beiden
 * Enden).
 *
 * M3-Nachtrag (Auftrag Abschnitt 4 "keine ueberdimensionierten mobilen
 * Headlines, die den Viewport dominieren" / "sinnvoller Zeilenumbruch"):
 * per echtem 390px-Screenshot gefunden - clamp(3rem,...) hatte eine
 * UNTERGRENZE von 48px, die auf schmalen Viewports nie unterschritten
 * wurde. Ergebnis auf der Handwerk-Demo: "Malerwerkstatt" (ein
 * zusammenhaengendes, nicht umbrechbares deutsches Wort) war bei 48px auf
 * 390px Breite schlicht zu breit fuer den verfuegbaren Platz und wurde
 * rechts abgeschnitten (sichtbar als "Malerwerkst" + Zeilenumbruch +
 * "Hofer" statt eines vollstaendigen, sauber umbrechenden Zweizeilers).
 * Die 48-64px-Zielvorgabe (Auftrag Abschnitt 2) bezieht sich erkennbar auf
 * echte Desktop-Breiten - die neue Formel erreicht 64px weiterhin bei
 * ca. 1440px und faellt bei 1024px auf ca. 52px (noch im Zielbereich),
 * skaliert aber unterhalb davon bis auf 34px bei 390px, statt weiterhin
 * stur bei der alten 48px-Untergrenze zu verharren.
 */
h1.rhektec-el-heading {
	font-size: clamp(2.125rem, 1.4rem + 2.9vw, 4rem);
}

h2.rhektec-el-heading {
	font-size: clamp(2.125rem, 1.7rem + 1.5vw, 2.75rem);
}

.rhektec-el-text {
	margin: 0 0 var(--rhektec-spacing-sm, 12px);
}

.rhektec-el-button {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	background: var(--rhektec-color-primary, #1a56db);
	color: #fff;
	padding: 12px 20px;
	border-radius: var(--rhektec-radius-md, 8px);
}

/*
 * E3 (Design-Offensive IV, Auftrag Abschnitt 5 "Buttons ... wirken wie
 * Standard-Widgets"): ausserhalb von .rhektec-el-hero__button gab es fuer
 * KEINE Button-Variante ueberhaupt einen Hover-Zustand - jeder Standalone-
 * Button, jeder CTA-Box-Button, jeder Card-/ImageText-Button blieb beim
 * Hover optisch komplett unveraendert. Identisches "dezente Transformation
 * + Reduced-Motion-Opt-in"-Prinzip wie der bereits bestehende Karten-
 * Hover-Block weiter unten, hier fuer alle Button-Varianten.
 */
.rhektec-el-button:hover {
	background: var(--rhektec-color-primary-hover, #1543ad);
}

.rhektec-el-button--secondary:hover {
	filter: brightness(0.9);
}

.rhektec-el-button--outline:hover {
	background: var(--rhektec-color-primary, #1a56db);
	color: #fff;
}

.rhektec-el-button--ghost:hover {
	background: rgba(0, 0, 0, 0.06);
}

.rhektec-el-button--light:hover {
	background: #f1f5f9;
}

.rhektec-el-button--dark:hover {
	filter: brightness(1.2);
}

@media (prefers-reduced-motion: no-preference) {
	.rhektec-el-button {
		transition: background-color var(--rhektec-transition-fast, 150ms) ease, filter var(--rhektec-transition-fast, 150ms) ease, transform var(--rhektec-transition-fast, 150ms) ease;
	}

	.rhektec-el-button:hover {
		transform: translateY(-1px);
	}
}

.rhektec-el-button--disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.rhektec-el-button--disabled:hover {
	transform: none;
	filter: none;
}

/* Block R1.7.3 (Core Modules, Button: "target/rel/size/alignment"). */
.rhektec-el-button--sm {
	padding: 6px 12px;
	font-size: 0.875rem;
}

.rhektec-el-button--lg {
	padding: 16px 28px;
	font-size: 1.125rem;
}

/*
 * Button "style" (Auftrag Abschnitt 9, "Design Presets vorbereiten":
 * Primary/Secondary/Outline/Ghost) - "primary" ist bewusst die bereits
 * bestehende .rhektec-el-button-Grundregel (kein zusaetzliches Modifier),
 * identisch zum "keine Klasse fuer den Default"-Muster bei size/alignment.
 * Noch kein modulübergreifendes Token-/Preset-System (folgt in R1.10),
 * nur die vier Varianten dieses einen Moduls.
 */
.rhektec-el-button--secondary {
	background: var(--rhektec-color-secondary, #6b7280);
	color: #fff;
}

.rhektec-el-button--outline {
	background: transparent;
	color: var(--rhektec-color-primary, #1a56db);
	border: 2px solid var(--rhektec-color-primary, #1a56db);
}

.rhektec-el-button--ghost {
	background: transparent;
	color: var(--rhektec-color-primary, #1a56db);
}

/* D2 (Design-Offensive, Auftrag Abschnitt 2C: "Primary/Secondary/Outline/
 * Ghost/Light/Dark"). Gleiches Muster wie die vier bestehenden Varianten -
 * "light" fuer Buttons auf dunklem Hintergrund (z. B. Hero--image), "dark"
 * fuer einen kraeftigen Kontrast-Button auf hellem Hintergrund. */
.rhektec-el-button--light {
	background: #ffffff;
	color: var(--rhektec-color-secondary, #0f172a);
}

.rhektec-el-button--dark {
	background: var(--rhektec-color-text, #111827);
	color: #ffffff;
}

/* D2 (Auftrag Abschnitt 2C: "Icon Left/Icon Right") - ButtonElement setzt
 * bei gesetztem Icon zusaetzlich display:inline-flex mit Gap, damit Icon
 * und Label-Text nie ueberlappen, unabhaengig von Label-Laenge/Groesse. */
.rhektec-el-button--icon-left,
.rhektec-el-button--icon-right {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.rhektec-el-button__icon {
	line-height: 1;
}

.rhektec-align-center {
	text-align: center;
}

.rhektec-align-right {
	text-align: right;
}

/*
 * Block R1.7.3 (Core Modules, Divider). Browser-Standard-<hr> hat einen
 * dreiseitigen Inset-Rahmen samt eigener Hoehe - zurueckgesetzt, damit
 * ausschliesslich die per Node gerenderten border-top-*-Deklarationen
 * (style/color/thickness) sowie width/margin (siehe DividerElement)
 * wirken.
 */
.rhektec-el-divider {
	height: 0;
	border: none;
	border-top-width: 0;
}

/* Block R1.7.3 (Core Modules, Video). Responsiver 16:9-Container statt
   fester Pixelmasse - der Nutzer gibt keine Breite/Hoehe an, nur eine
   Provider-URL (siehe VideoElement::contentSchema()). */
.rhektec-el-video {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.rhektec-el-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* Block R1.7.3 (Core Modules, Icon). Dashicons ist ein Icon-Webfont
   (Glyphen ueber ::before, siehe WP-Core-Stylesheet "dashicons", in
   rhektec-theme/functions.php auch fuers Frontend enqueued) - "color"/
   "size" (siehe IconElement::styleSchema()) wirken direkt auf die
   Schriftfarbe/-groesse des Containers. */
.rhektec-el-icon {
	display: inline-block;
	line-height: 1;
}

.rhektec-el-container {
	display: flex;
	flex-wrap: wrap;
}

.rhektec-el-container.rhektec-columns-1 > * { flex: 1 1 100%; }
.rhektec-el-container.rhektec-columns-2 > * { flex: 1 1 calc(50% - 12px); }
.rhektec-el-container.rhektec-columns-3 > * { flex: 1 1 calc(33.333% - 16px); }
.rhektec-el-container.rhektec-columns-4 > * { flex: 1 1 calc(25% - 18px); }
.rhektec-el-container.rhektec-columns-5 > * { flex: 1 1 calc(20% - 18px); }
.rhektec-el-container.rhektec-columns-6 > * { flex: 1 1 calc(16.666% - 18px); }

@media (max-width: 1024px) {
	.rhektec-el-container[class*="rhektec-columns-"] > * {
		flex: 1 1 calc(50% - 12px);
	}
}

@media (max-width: 640px) {
	.rhektec-el-container[class*="rhektec-columns-"] > * {
		flex: 1 1 100%;
	}
}

.rhektec-layout-full-width {
	width: 100%;
}

.rhektec-layout-contained {
	/* F-Serie (Design-Offensive V): ohne explizites width:100% verlaesst
	 * sich diese Regel auf den Browser-Fallback "width:auto", was bei
	 * einem Flex-Element mit margin:0 auto fuer das Stretch-Verhalten
	 * (align-items:stretch des umgebenden Section/Row-Flex-Containers)
	 * UNDEFINIERT ist, sobald die verfuegbare Breite kleiner als
	 * max-width ist (z. B. 390px Mobile vs. 1180px max-width): Section
	 * und Row bekamen dann ihre Breite aus dem Fit-Content ihrer Kinder
	 * statt aus dem tatsaechlich verfuegbaren Platz - echter horizontaler
	 * Overflow auf praktisch jeder Seite mit verschachtelten "contained"
	 * Sections/Rows. width:100% macht die Breite explizit (fuellt den
	 * verfuegbaren Platz bis max-width, dann zentriert margin:auto wie
	 * zuvor) und behebt den Overflow, ohne das Desktop-/Tablet-Verhalten
	 * zu aendern.
	 */
	width: 100%;
	max-width: var(--rhektec-content-width, 1180px);
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Layout-Hierarchie Section > Row > Column > Module (docs/ARCHITECTURE.md
 * Abschnitt 13). Section ist eine Flexbox-Spalte (Row-Kinder werden
 * untereinander gestapelt; erst dieser display:flex macht die vom Renderer
 * ausgegebenen align-items/justify-content/min-height-Deklarationen
 * ueberhaupt wirksam - vorher waren es folgenlose CSS-Deklarationen auf
 * einem display:block-Element, siehe Block R1.3). Row ist eine Flexbox-
 * Zeile, Column ein Flexbox-Element mit darin selbst wieder vertikal
 * gestapeltem Inhalt (Module). */
/*
 * G3 (Design-Offensive V, zweite Runde - Auftrag: "Abstaende zwischen
 * Sections... muessen konsistent sein"): SectionElement::defaultStyle()
 * laesst 'padding' bewusst leer (E4-Fund, siehe .rhektec-layout-contained
 * oben) - das bedeutet aber auch: OHNE einen von einer Seite explizit
 * gesetzten Wert hatte .rhektec-el-section bislang ueberhaupt KEIN
 * Standard-Padding, weder hier noch im generierten Per-Node-Stylebaustein.
 * Jede bisherige Demoseite verliess sich ausschliesslich auf zufaellige
 * Nebeneffekte (die interne Modul-Polsterung von Hero/Cards, Heading-
 * Margins) fuer vertikalen Seitenrhythmus - mit echten 0px
 * Section-Innenabstand in der Mehrzahl der Faelle (per Browsertest
 * verifiziert: 3 von 4 geprueften Sections auf der Lindenhof-Seite hatten
 * computed padding-top/-bottom von 0px). Ein generisches Default-Padding
 * hier behebt das fuer JEDE kuenftige Seite, ohne dass eine Seite das
 * manuell nachziehen muss - eine Section mit explizit gesetztem 'padding'
 * (z. B. eine volle Bildhoehe einnehmende Hero-Section) ueberschreibt es
 * weiterhin zuverlaessig ueber die staerker spezifische/spaeter im
 * Dokument stehende Per-Node-Regel (identisches Kaskaden-Prinzip wie
 * .rhektec-layout-contained).
 */
/*
 * L2 (Design-Fix durch konkrete CSS-Ueberarbeitung): das bisherige
 * Default-Padding (G3) war ein FLACHER Wert (immer --rhektec-spacing-xl,
 * 64px) - identisch auf Desktop, Tablet und Mobile. Der Auftrag gibt
 * explizite, mit der Breite abnehmende Zielbereiche vor (Desktop
 * 80-112px, Tablet 64-80px, Mobile 44-64px) - ein eigener, dedizierter
 * Wert statt der Wiederverwendung von --rhektec-spacing-xl (dieser Token
 * wird an anderer Stelle, z. B. Hero-Padding, bewusst mit einem anderen
 * Zweck weiterverwendet; ihn hier zu aendern haette dort unerwuenschte
 * Nebeneffekte). Eine Seite mit explizit gesetztem 'padding' ueberschreibt
 * dies weiterhin zuverlaessig (identisches Kaskaden-Prinzip wie
 * .rhektec-layout-contained).
 */
.rhektec-el-section {
	display: flex;
	flex-direction: column;
	padding-top: 96px;
	padding-bottom: 96px;
}

@media (max-width: 1024px) {
	.rhektec-el-section {
		padding-top: 72px;
		padding-bottom: 72px;
	}
}

@media (max-width: 640px) {
	.rhektec-el-section {
		padding-top: 56px;
		padding-bottom: 56px;
	}
}

/*
 * M3 (Design-Korrektur: Typografie/Abstaende/Proportionen, Auftrag
 * Abschnitt 2 "Abstaende duerfen nicht zufaellig aus mehreren
 * verschachtelten Wrappern addiert werden"): per echter Browserpruefung
 * gefunden - eine Section, die direkt einen Hero umschliesst, bekam
 * ZUSAETZLICH zum bereits erheblichen eigenen Innenabstand des Hero
 * (.rhektec-el-hero, 64px/32px) das oben definierte generische Section-
 * Default-Padding (96/72/56px). SectionLibrary::buildHero() setzt dafuer
 * zwar bereits 'padding'=>'0' auf der Section, aber jede Seite, deren
 * Hero NICHT ueber ein Section-Library-Preset entstanden ist (z. B.
 * handgebaute Build-Skripte wie das Handwerk-Demo), hatte diesen
 * expliziten Override nie gesetzt - sichtbar als ca. 96px komplett leere
 * Flaeche zwischen Header und dem eigentlichen Hero-Bildinhalt. Diese
 * Regel behebt die URSACHE statt die Symptome auf einzelnen Seiten
 * nachzuziehen: JEDE Section, die direkt (ueber Row>Column) einen Hero
 * enthaelt, bekommt ihr eigenes Padding automatisch auf 0 gesetzt - der
 * Hero verwaltet seinen Innenabstand bereits selbst. :has() wird von
 * allen aktuellen Browsern unterstuetzt (Baseline seit 2023); in den
 * sehr wenigen Faellen ohne Unterstuetzung bleibt lediglich der bisherige
 * explizite Per-Seiten-Override noetig, kein Darstellungsfehler.
 */
.rhektec-el-section:has(> .rhektec-el-row > .rhektec-el-column > .rhektec-el-hero) {
	padding-top: 0;
	padding-bottom: 0;
}

.rhektec-el-row {
	display: flex;
	flex-wrap: wrap;
}

.rhektec-el-column {
	display: flex;
	flex-direction: column;
	/* UX3-Audit: flex-shrink war 0 ("flex: 0 0 auto"). Columns summieren
	 * ihre Breiten (flex-basis) ueblicherweise auf 100% einer Row - sobald
	 * die Row (seit UX3 moeglich) ein "gap" bekommt, braucht der Browser
	 * zusaetzlichen Platz FUER den Gap, kann ihn mit flex-shrink:0 aber
	 * nirgendwo hernehmen und laesst die Columns stattdessen ueberlaufen/
	 * umbrechen (sichtbarer Darstellungsfehler, sobald jemand das neue
	 * Row-Gap-Feld benutzt). flex-shrink:1 behebt das: der Browser
	 * schrumpft alle Columns proportional zu ihrer Basis um den
	 * Gap-Anteil. Ohne Gap (gap:0, der bisherige Normalfall) aendert sich
	 * dadurch nichts - Schrumpfen greift nur, wenn die Summe die Row
	 * tatsaechlich ueberschreitet. */
	flex: 0 1 auto;
	max-width: 100%;
	min-width: 0;
}

/* UX3 (Flexible Container). Zwei-Klassen-Selektoren (hoehere Spezifitaet
 * als die einzelne, pro Node vergebene "rhektec-node-*"-Klasse) setzen
 * NUR flex-grow/flex-shrink bzw. flex-wrap/overflow-x - nie die
 * flex-basis-Kurzform "flex", damit das per Design-Tab gesetzte
 * width/flex-basis (ueber die Node-eigene Klasse) unabhaengig von der
 * CSS-Ladereihenfolge unberuehrt bleibt. */
.rhektec-el-column.rhektec-column-fill {
	flex-grow: 1;
	flex-shrink: 1;
}

/*
 * D3-Nachtrag (Design-Offensive, Auftrag Abschnitt 2D/5 "Testimonial
 * Carousel"/"Image Carousel" ueber die Section Library). RowElements
 * bestehendes "nowrap"-Feld (UX3, "nicht umbrechen, horizontal
 * scrollen") macht JEDE Row - Testimonials/Team/Pricing/Cards
 * gleichermassen - bereits zu einem horizontal scrollenden Container;
 * Scroll-Snap macht daraus einen echten "Carousel"-Eindruck, OHNE ein
 * eigenes Carousel-Modul pro Inhaltstyp zu brauchen (Auftrag: "Baue
 * nichts doppelt"). scroll-snap-align auf die direkten Column-Kinder
 * (nicht auf beliebige Kinder), da eine Row immer nur Columns direkt
 * enthalten darf (siehe RowElement::allowedChildTypes()).
 */
.rhektec-el-row.rhektec-row-nowrap {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--rhektec-spacing-xs, 4px);
}

.rhektec-el-row.rhektec-row-nowrap > .rhektec-el-column {
	scroll-snap-align: start;
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	.rhektec-el-row.rhektec-stack-tablet {
		flex-direction: column;
	}
	/*
	 * UX7 ("Responsive Workflow", Auftrag Abschnitt 16/17: "Reihenfolge pro
	 * Geraeteansicht aendern"). 'stack_reverse' (RowElement::propsSchema())
	 * kehrt die Column-Reihenfolge NUR beim Stapeln um - column-reverse
	 * statt column. Eigene Regel NACH der obigen (gleiche Spezifitaet,
	 * spaetere Quellreihenfolge gewinnt), kein !important noetig.
	 */
	.rhektec-el-row.rhektec-stack-tablet.rhektec-stack-reverse {
		flex-direction: column-reverse;
	}
	/* F-Serie (Design-Offensive V): sobald die Row hier auf
	 * flex-direction:column umschaltet, ist die Hauptachse vertikal -
	 * "flex-basis" wirkt dann auf die Hoehe, nicht mehr auf die Breite.
	 * Die Breite (jetzt Querachse) haengt allein von align-items:stretch
	 * ab, was durch ein per-Node generiertes "max-width:none" (spaeter in
	 * der Kaskade als das Klassen-"max-width:100%" von .rhektec-el-column)
	 * aushebelbar ist - sichtbarer horizontaler Overflow bei
	 * inhaltsreichen Columns. Explizites width:100% erzwingt die Breite
	 * unabhaengig von max-width/Stretch-Eigenheiten.
	 */
	.rhektec-el-row.rhektec-stack-tablet > .rhektec-el-column {
		flex-basis: 100% !important;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.rhektec-el-row.rhektec-stack-tablet > .rhektec-el-column,
	.rhektec-el-row.rhektec-stack-mobile > .rhektec-el-column {
		flex-basis: 100% !important;
		width: 100%;
	}
	.rhektec-el-row.rhektec-stack-tablet,
	.rhektec-el-row.rhektec-stack-mobile {
		flex-direction: column;
	}
	.rhektec-el-row.rhektec-stack-tablet.rhektec-stack-reverse,
	.rhektec-el-row.rhektec-stack-mobile.rhektec-stack-reverse {
		flex-direction: column-reverse;
	}
}

/* Schatten-Presets (Auftrag Abschnitt 2/3/4 "vordefinierte Shadow-Presets") -
 * feste Variantennamen statt freier CSS-Eingabe, damit kein beliebiger
 * CSS-Ausdruck ueber ein Schatten-Feld eingeschleust werden kann.
 *
 * UX6-Nachtrag ("Designsystem vervollstaendigen"): diese vier Klassen
 * hatten bislang eigene, fest codierte box-shadow-Werte - aenderte man die
 * "shadow"-Tokens im Design System Panel (DesignSystem\
 * DesignSystemRepository), hatte das auf jedes Element mit
 * shadow_preset=sm/md/lg/xl NULL Wirkung (komplett entkoppelt vom
 * "globalen Designsystem"-Versprechen, Auftrag Abschnitt 13). Jetzt
 * referenzieren alle vier Klassen var(--rhektec-shadow-*) mit dem
 * bisherigen Wert als Fallback (Theme ohne aktives Plugin bleibt
 * unveraendert). Die Fallback-Werte wurden dabei auf den jeweiligen
 * Repository-Default VEREINHEITLICHT (einlagiger statt zweilagiger
 * Schatten) - eine bewusste kleine visuelle Normalisierung, kein
 * Darstellungsfehler: beide Versionen waren zuvor schon unterschiedlich
 * (Klassenwert vs. Repository-Token), jetzt stimmen sie ueberein. */
.rhektec-shadow-sm {
	box-shadow: var(--rhektec-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.rhektec-shadow-md {
	box-shadow: var(--rhektec-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.rhektec-shadow-lg {
	box-shadow: var(--rhektec-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
}

.rhektec-shadow-xl {
	box-shadow: var(--rhektec-shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.1));
}

/* Transition-Presets (UX4, "Design Controls", Auftrag Abschnitt 6:
 * "Transitions") - feste Dauer-Presets statt einer freien CSS-transition-
 * Zeichenkette, identisches Prinzip wie die Schatten-Presets oben.
 * "all" deckt die ueblichen Hover-Faelle (Hintergrund-/Textfarbe) ab, ohne
 * pro Eigenschaft ein eigenes Preset zu brauchen.
 *
 * D2-Nachtrag (Design-Offensive, Auftrag Abschnitt 3 "Uebergaenge" als
 * globale Tokens): referenzieren jetzt var(--rhektec-transition-*,
 * DesignSystem\DesignSystemRepository) mit dem bisherigen Wert als
 * Fallback - identisches "Token statt hartcodiertem Wert"-Prinzip wie bei
 * den Shadow-Presets (UX6). Ausserhalb von "prefers-reduced-motion: no-
 * preference" wird GAR KEINE transition-Deklaration ausgegeben (Auftrag
 * Abschnitt 3 "Reduced Motion berücksichtigen") - Hover-Zustands-
 * AENDERUNGEN (Farbe etc.) wirken dann weiterhin sofort/ohne Animation,
 * nur die zeitliche Ueberblendung selbst entfaellt. */
@media (prefers-reduced-motion: no-preference) {
	.rhektec-transition-fast {
		transition: all var(--rhektec-transition-fast, 0.15s) ease;
	}

	.rhektec-transition-normal {
		transition: all var(--rhektec-transition-normal, 0.25s) ease;
	}

	.rhektec-transition-slow {
		transition: all var(--rhektec-transition-slow, 0.4s) ease;
	}
}

/*
 * Card "card_style" (Block R1.10, Auftrag Abschnitt 12: "Vorgefertigte
 * Design Presets... Card: Default/Elevated/Bordered/Minimal") -
 * identisches Muster wie die Button-Presets oben: "default" ist die
 * bereits bestehende .rhektec-el-card-Grundregel (kein zusaetzliches
 * Modifier), die drei anderen sind Modifier-Klassen. Farben
 * referenzieren ausschliesslich die globalen Design-Tokens
 * (--rhektec-color-*, DesignSystem\CssVariablesOutput) mit sicherem
 * Fallback, damit eine Aenderung des globalen Farbschemas automatisch in
 * jede Card durchschlaegt, ohne dass hier etwas angepasst werden muss.
 *
 * Nachtrag: die urspruengliche Variantenliste (elevated/flat/outlined)
 * deckte sich nicht mit den vier im Auftrag tatsaechlich benannten
 * Varianten - "default" uebernimmt die bisherige Grundregel (identischer
 * Schatten wie vorher "elevated"), "elevated" bekommt jetzt einen
 * deutlich staerkeren Schatten (eigene, hoehere Stufe statt nur "kein
 * Modifier"), "bordered" entspricht dem bisherigen "outlined", "minimal"
 * ist komplett neu (kein Hintergrund/Schatten/Rahmen - nur Abstand).
 */
/*
 * E3 (Design-Offensive IV, Auftrag Abschnitt 5 "Karten ... wirken wie
 * Standard-Widgets"): ein weicher Drop-Shadow auf JEDER Karte ist genau
 * die generische "Bootstrap-Card"-Anmutung, die der Auftrag explizit als
 * Problem benennt - recherchierte 2026-Praxis bei hochwertigen Seiten
 * (Linear/Vercel-Stil) ersetzt den Default-Schatten durch eine duenne,
 * kaum sichtbare Kontur (1px, ~8% Schwarz) und hebt die Karte erst bei
 * Hover an (siehe der bereits bestehende .rhektec-el-card:hover-Block
 * weiter unten, der unveraendert bleibt - nur der RUHEZUSTAND aendert
 * sich). Wirkt auf hellem wie auf leicht getoentem Section-Hintergrund
 * gleichermassen ruhig, statt auf jeder Karte einen eigenen Schlagschatten
 * zu werfen.
 */
.rhektec-el-card {
	display: block;
	background: #fff;
	border-radius: var(--rhektec-radius-lg, 16px);
	border: 1px solid rgba(15, 23, 42, 0.08);
	padding: var(--rhektec-spacing-md, 16px);
	overflow: hidden;
}

.rhektec-el-card--elevated {
	box-shadow: var(--rhektec-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
}

.rhektec-el-card--bordered {
	box-shadow: none;
	border: 1px solid var(--rhektec-color-muted, #6b7280);
}

.rhektec-el-card--minimal {
	background: transparent;
	box-shadow: none;
	border: none;
	padding: var(--rhektec-spacing-sm, 8px) 0;
}

/*
 * D3 (Design-Offensive II, Auftrag Abschnitt 2 "Card": "kompakte
 * Informationskarte" vs. "grosse hervorgehobene Karte") - orthogonal zu
 * card_style oben (Rahmen/Schatten bleiben unveraendert kombinierbar,
 * z. B. "elevated" + "featured"). "compact" verkleinert Innenabstand und
 * Typografie, "featured" vergroessert Innenabstand/Ueberschrift und hebt
 * die Karte zusaetzlich per Schatten hervor (auch wenn card_style
 * "default" bleibt - eine hervorgehobene Karte soll ohne eine zweite
 * Einstellung bereits auffallen).
 */
.rhektec-el-card--compact {
	padding: var(--rhektec-spacing-sm, 8px);
}
.rhektec-el-card--compact .rhektec-el-card__heading {
	font-size: 1rem;
}
.rhektec-el-card--compact .rhektec-el-card__text {
	font-size: 0.875rem;
}

.rhektec-el-card--featured {
	padding: var(--rhektec-spacing-lg, 24px);
	box-shadow: var(--rhektec-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
}
.rhektec-el-card--featured .rhektec-el-card__heading {
	font-size: 1.375rem;
}

/*
 * D4 (Design-Offensive, Auftrag Abschnitt 2E: "Bild oben/links/als
 * Hintergrund"). Orthogonal zu card_style (Rahmen/Schatten oben) -
 * CardElement::render() wrappt Titel/Text/Button seit D4 immer in
 * .rhektec-el-card__content, "top" (Default) sieht dadurch optisch
 * identisch zum vorherigen Markup aus (kein eigener Flex-Kontext hier).
 */
.rhektec-el-card--image-left {
	display: flex;
	align-items: stretch;
	gap: var(--rhektec-spacing-md, 16px);
}
.rhektec-el-card--image-left > .rhektec-el-card__image {
	flex: 0 0 40%;
	margin: 0;
	height: 100%;
	aspect-ratio: auto;
}
.rhektec-el-card--image-left > .rhektec-el-card__content {
	flex: 1 1 auto;
}
@media (max-width: 640px) {
	.rhektec-el-card--image-left {
		flex-direction: column;
	}
	.rhektec-el-card--image-left > .rhektec-el-card__image {
		flex-basis: auto;
	}
}

.rhektec-el-card--image-background {
	position: relative;
	min-height: 280px;
	display: flex;
	color: #ffffff;
}
.rhektec-el-card--image-background > .rhektec-el-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	z-index: 0;
}
.rhektec-el-card--image-background::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1) 60%);
	z-index: 1;
}
.rhektec-el-card--image-background > .rhektec-el-card__content {
	position: relative;
	z-index: 2;
	align-self: flex-end;
	width: 100%;
}
.rhektec-el-card--image-background .rhektec-el-card__heading,
.rhektec-el-card--image-background .rhektec-el-card__text {
	color: #ffffff;
}

.rhektec-el-card__image {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	border-radius: var(--rhektec-radius-sm, 4px);
}

.rhektec-el-card__heading {
	margin: 0 0 var(--rhektec-spacing-xs, 4px);
	font-family: var(--rhektec-font-heading, inherit);
	color: var(--rhektec-color-text, #111827);
}

.rhektec-el-card__text {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	color: var(--rhektec-color-muted, #6b7280);
}

/*
 * O2 (RhekTec Builder - naechste Phase: echte Referenzlayouts). Schlichte
 * Aufzaehlungsliste statt Pricing's randloser Trennlinien-Variante
 * (.rhektec-el-pricing__features) - die Handwerk-Referenz zeigt echte
 * "<ul><li>"-Bulletpoints unter den Service-Karten-Titeln (siehe
 * REFERENCE-FLOERL-HANDWERK-RAW.md Abschnitt 5), kein Linien-Stil.
 */
.rhektec-el-card__list {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	padding-left: 1.2em;
	color: var(--rhektec-color-muted, #6b7280);
}
.rhektec-el-card__list li {
	margin-bottom: var(--rhektec-spacing-xs, 4px);
}

.rhektec-el-card__button {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	color: var(--rhektec-color-primary, #1a56db);
}

/*
 * D3 (Design-Offensive II, Elements\Types\ImageTextElement). Fuenf
 * Layout-Auspraegungen in einem Modul (siehe dortigen Klassendoc fuer die
 * volle Begruendung) - 'image_left' ist die Flex-Grundregel, die uebrigen
 * vier sind Modifier-Klassen.
 */
.rhektec-el-image-text {
	display: flex;
	align-items: center;
	gap: var(--rhektec-spacing-lg, 32px);
	flex-wrap: wrap;
}

.rhektec-el-image-text--image-right {
	flex-direction: row-reverse;
}

.rhektec-el-image-text__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--rhektec-radius-md, 8px);
}

.rhektec-el-image-text__figure {
	margin: 0;
}

.rhektec-el-image-text__caption {
	margin-top: var(--rhektec-spacing-xs, 4px);
	font-size: var(--rhektec-font-size-small, 13px);
	color: var(--rhektec-color-muted, #6b7280);
}

.rhektec-el-image-text__image,
.rhektec-el-image-text__figure,
.rhektec-el-image-text__content {
	flex: 1 1 320px;
	min-width: 0;
}

.rhektec-el-image-text__heading {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	font-family: var(--rhektec-font-heading, inherit);
	color: var(--rhektec-color-text, #111827);
}

.rhektec-el-image-text__text {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	color: var(--rhektec-color-muted, #6b7280);
}

.rhektec-el-image-text__button {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	color: var(--rhektec-color-primary, #1a56db);
}

/*
 * Auftrag Abschnitt 2 "ueberlappende Bildkompositionen"/"asymmetrische
 * Layouts": das Bild ragt per negativem Margin ueber den Inhaltsblock -
 * ein massvoller, fester Versatz statt einer frei einstellbaren Zahl
 * (Auftrag: "ohne CSS schreiben zu muessen"), nur ab Tablet-Breite
 * wirksam (siehe Media-Query unten), da ein Versatz bei umgebrochenen,
 * volle-Breite-Spalten auf Mobile keinen sichtbaren Effekt mehr haette.
 */
@media (min-width: 1025px) {
	.rhektec-el-image-text--overlap-left .rhektec-el-image-text__content {
		margin-left: -48px;
		position: relative;
		z-index: 1;
		background: var(--rhektec-color-background, #ffffff);
		padding: var(--rhektec-spacing-lg, 32px);
		box-shadow: var(--rhektec-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
		border-radius: var(--rhektec-radius-md, 8px);
	}

	.rhektec-el-image-text--overlap-right {
		flex-direction: row-reverse;
	}

	.rhektec-el-image-text--overlap-right .rhektec-el-image-text__content {
		margin-right: -48px;
		position: relative;
		z-index: 1;
		background: var(--rhektec-color-background, #ffffff);
		padding: var(--rhektec-spacing-lg, 32px);
		box-shadow: var(--rhektec-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
		border-radius: var(--rhektec-radius-md, 8px);
	}
}

/*
 * Auftrag Abschnitt 2 "Bild mit Text-Overlay": das Bild wird per Inline-
 * style (ImageTextElement::render(), identische Overlay-Komposition wie
 * HeroElement) zum Hintergrund des gesamten Moduls, der Text liegt darauf.
 */
.rhektec-el-image-text--text-overlay {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 360px;
	background-size: cover;
	background-position: center;
	border-radius: var(--rhektec-radius-md, 8px);
	overflow: hidden;
	padding: var(--rhektec-spacing-xl, 64px) var(--rhektec-spacing-lg, 32px);
}

.rhektec-el-image-text--text-overlay .rhektec-el-image-text__content {
	flex: 1 1 auto;
	max-width: 640px;
}

/* D2 (Design-Offensive, Auftrag Abschnitt 3 "Hover und Interaktion":
 * "dezente Transformation... Schattenaenderung"). Gilt fuer alle
 * kartenartigen Content-Module (Card/IconBox/Testimonial/Pricing/
 * TeamMember) statt pro Modul einzeln - rein praesentationale CSS-Regel,
 * kein neues Design-Feld noetig (anders als die instanzbezogene
 * background_color-Hoverfaehigkeit auf CardElement selbst). "dezent"
 * bewusst als -4px/-2px statt eines auffaelligen Sprungs. Die Transform-
 * ANIMATION selbst steht NUR unter "prefers-reduced-motion: no-preference"
 * (Auftrag Abschnitt 3 "Barrierefreiheit und Reduced Motion
 * beruecksichtigen") - der Schatten-WERT am Hover-Endzustand gilt davon
 * unabhaengig immer (keine Bewegung, nur ein staerkerer Schatten ist keine
 * Motion-Praeferenzfrage). */
.rhektec-el-card:hover,
.rhektec-el-icon-box:hover,
.rhektec-el-testimonial:hover,
.rhektec-el-pricing:hover,
.rhektec-el-team-member:hover,
.rhektec-el-accommodation-card:hover,
.rhektec-el-tour-card:hover,
.rhektec-el-blog-preview__item:hover {
	box-shadow: var(--rhektec-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
}

.rhektec-el-card--minimal:hover {
	box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
	.rhektec-el-card,
	.rhektec-el-icon-box,
	.rhektec-el-testimonial,
	.rhektec-el-pricing,
	.rhektec-el-team-member,
	.rhektec-el-accommodation-card,
	.rhektec-el-tour-card,
	.rhektec-el-blog-preview__item {
		transition: transform var(--rhektec-transition-normal, 0.25s) ease, box-shadow var(--rhektec-transition-normal, 0.25s) ease;
	}

	.rhektec-el-card:hover,
	.rhektec-el-icon-box:hover,
	.rhektec-el-testimonial:hover,
	.rhektec-el-pricing:hover,
	.rhektec-el-team-member:hover,
	.rhektec-el-accommodation-card:hover,
	.rhektec-el-tour-card:hover,
	.rhektec-el-blog-preview__item:hover {
		transform: translateY(-4px);
	}

	/* Bildzoom (Auftrag Abschnitt 3: "Bildzoom") - Card-Bild/Gallery-/
	 * LogoGrid-Bilder leicht vergroessern, vom jeweiligen "overflow:hidden"-
	 * Container (Card/Gallery-Zelle) immer sauber beschnitten. */
	.rhektec-el-card__image {
		transition: transform var(--rhektec-transition-slow, 0.4s) ease;
	}

	.rhektec-el-card:hover .rhektec-el-card__image {
		transform: scale(1.04);
	}
}

/* Fokuszustand (Auftrag Abschnitt 3/9: "Fokuszustand"/"Tastaturbedienbarkeit").
 * Generische Regel fuer jedes interaktive Element statt pro Modul einzeln -
 * :focus-visible zeigt den Ring nur bei Tastaturfokus, nicht bei jedem
 * Maus-Klick (vermeidet den in vielen Designs unerwuenschten "Fokus-Ring
 * bei jedem Klick"-Effekt, ohne Tastaturnutzer zu benachteiligen). */
.rhektec-el-button:focus-visible,
.rhektec-el-card__button:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--rhektec-color-primary, #1a56db);
	outline-offset: 2px;
}

/*
 * Hero "hero_style" (Block R1.10, drittes Modul mit demselben Preset-
 * Muster wie Button/Card) - "centered" ist wieder die bereits bestehende
 * .rhektec-el-hero-Grundregel, "left"/"split"/"image" sind Modifier-
 * Klassen. background-image wird inline per style-Attribut gesetzt
 * (siehe HeroElement::render(), je Instanz ein anderes Bild), waehrend
 * Positionierung/Farben hier als wiederverwendbare Regeln bleiben.
 *
 * Nachtrag (woertlicher Abgleich gegen Auftrag Abschnitt 12: "Hero:
 * Centered/Left/Split/Image"): "image" war in der urspruenglichen
 * Variantenliste vergessen - im Gegensatz zu den text-fokussierten
 * centered/left/split betont diese Variante bewusst das Bild selbst
 * (deutlich groessere Mindesthoehe, Text in einer halbtransparenten
 * Flaeche am unteren Rand statt zentriert ueber dem gesamten
 * Hintergrund). Bewusst KEINE eigene background-image-Deklaration auf
 * .rhektec-el-hero--image selbst: das Hintergrundbild wird per Inline-
 * style-Attribut gesetzt (HeroElement::render()), das jede CSS-Klassen-
 * Deklaration fuer dieselbe Eigenschaft ohnehin ueberschreiben wuerde -
 * die Abgrenzung dieser Variante passiert daher ausschliesslich ueber
 * Layout/Farbe von .rhektec-el-hero__content, nicht ueber den
 * Hintergrund des Hero selbst.
 */
.rhektec-el-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 320px;
	padding: var(--rhektec-spacing-xl, 64px) var(--rhektec-spacing-lg, 32px);
	background-color: var(--rhektec-color-secondary, #0f172a);
	background-size: cover;
	background-position: center;
}

.rhektec-el-hero--left {
	justify-content: flex-start;
	text-align: left;
}

.rhektec-el-hero--split {
	justify-content: flex-start;
	text-align: left;
	background-position: right center;
}

.rhektec-el-hero--image {
	min-height: 560px;
	align-items: flex-end;
	padding: 0;
	position: relative;
}

/*
 * J2 (URGENT DESIGN RESCUE, Auftrag Abschnitt 4.A "zusammengehoerige
 * Inhalte muessen als Einheit erkennbar sein"): die vollflaechige
 * .rhektec-el-hero__content-Flaeche (I1-Nachtrag) garantiert verlaesslichen
 * Textkontrast, erzeugt bei echter Browsergroesse aber eine harte,
 * unvermittelte Kante zwischen Bild und Textfeld - zwei optisch getrennte
 * Rechtecke statt EINES komponierten Hero. Diese Verlaufszone ueberblendet
 * das untere Bilddrittel sanft in dieselbe Flaechenfarbe, BEVOR die solide
 * Flaeche beginnt - der Textbereich bleibt dadurch unveraendert kontrastsicher
 * (weiterhin voll deckend), nur der Uebergang druemherum wirkt wie ein
 * Verlauf statt einer Schnittkante.
 */
.rhektec-el-hero--image::before {
	content: '';
	position: absolute;
	inset: 0;
	/*
	 * J2-Korrektur: eine auf einen festen Prozentsatz der GESAMTEN Hero-
	 * Hoehe begrenzte Zone (vorherige Fassung: untere 45%) lag bei langen
	 * Inhalten (Headline+Untertitel+Buttons+Kennzahlen) fast vollstaendig
	 * HINTER der bereits deckenden .rhektec-el-hero__content-Flaeche
	 * verborgen, da deren tatsaechliche Hoehe hier nicht bekannt ist
	 * (reiner CSS-Flex-Mechanismus, keine Messung per JS). Die Loesung ist
	 * eine lange, auf den gesamten Hero gespannte Verlaufszone: oben
	 * komplett transparent (reines Bild bleibt sichtbar), ab der Haelfte
	 * bis knapp vor dem unteren Rand vollstaendig deckend - so faellt der
	 * sichtbare UEBERGANG unabhaengig von der tatsaechlichen Content-Hoehe
	 * immer INNERHALB des reinen Bildbereichs, bevor die deckende Flaeche
	 * beginnt.
	 */
	background: linear-gradient(to bottom, transparent 0%, transparent 35%, var(--rhektec-color-secondary, #0f172a) 78%);
	pointer-events: none;
}

/*
 * I1-Nachtrag (Design-Reset): die Bildunterschrift-Flaeche war bislang
 * fest auf ein neutrales Blaugrau (rgba(15,23,42,.55)) verdrahtet -
 * unabhaengig davon, welche Markenfarbe das Designsystem einer Seite
 * tatsaechlich vorgibt (sichtbar z. B. bei einer warmen Boutique-Palette:
 * ein kuehler neutraler Streifen ueber einem warmen Foto wirkt wie ein
 * generischer Theme-Standard statt wie Teil derselben Marke). Eine
 * VOLLFLAECHIGE (nicht transluzente) Flaeche in der Marken-Sekundaerfarbe
 * loest zwei Probleme gleichzeitig: sie bleibt konsistent zur Palette JEDER
 * Seite (ueber var() statt eines Festwerts) UND garantiert verlaesslichen
 * Text-Kontrast unabhaengig davon, wie hell/dunkel die jeweilige
 * Bildregion darunter zufaellig ist (eine transluzente Flaeche haengt vom
 * Bildinhalt ab, eine deckende nicht). `padding:0` auf dem Hero selbst
 * (statt nur padding-bottom) macht die Flaeche dadurch auch seitlich
 * randabfallend, nicht nur die Hero-Hintergrundgrafik.
 */
.rhektec-el-hero--image .rhektec-el-hero__content {
	position: relative;
	z-index: 1;
	background: var(--rhektec-color-secondary, #0f172a);
	padding: var(--rhektec-spacing-lg, 32px) clamp(24px, 6vw, 96px);
	width: 100%;
	max-width: none;
}

/*
 * M3 (Design-Korrektur: Typografie/Abstaende/Proportionen): per echter
 * Browserpruefung bei 390px gefunden - auf dem Handwerk-Demo (Hero mit
 * "left"+"compact"-Variante, in einer verschachtelten contained Row/
 * Column statt full-width) war .rhektec-el-hero__content (max-width:640px)
 * 354px breit, obwohl die umschliessende .rhektec-el-hero (Flexbox-
 * Elternelement) durch mehrfach verschachteltes Container-Padding nur
 * noch 294px Platz hatte - document.body.scrollWidth meldete dadurch
 * 402px bei 390px Viewport. Nachtraegliche Gegenprobe (window.scrollTo(9999,
 * 0) + window.scrollX) zeigte, dass daraus KEIN tatsaechlich nutzbarer
 * horizontaler Scrollbalken entstand (scrollWidth zaehlt in diesem Projekt
 * generell auch bewusst ausserhalb des Viewports positionierte
 * Barrierefreiheits-Elemente wie .screen-reader-text mit) - der eigentliche
 * sichtbare Fehler war die ueberlaufende Hero-Breite selbst (Inhalt duerfte
 * nicht breiter sein als sein Container), nicht ein Scrollbalken. Klassischer
 * Flexbox-Fallstrick: ein Flex-Kind hat per Spezifikation einen
 * impliziten min-width:auto und schrumpft NICHT unter die eigene
 * Inhaltsbreite, selbst wenn max-width kleiner ist als der verfuegbare
 * Platz. .rhektec-el-column loest dasselbe Problem bereits identisch
 * (siehe dortigen Kommentar) - hier bislang vergessen, weil der Hero bei
 * den bisherigen visuellen Pruefungen ueberwiegend in seiner full-width-
 * Variante getestet wurde (dort kommt die Kreuzachsen-Enge gar nicht
 * zustande).
 */
.rhektec-el-hero__content {
	max-width: 640px;
	min-width: 0;
}

/*
 * E3 (Design-Offensive IV, Auftrag Abschnitt 2 "Hero-Bereiche sind nicht
 * ueberzeugend"): die feste --rhektec-font-size-h1 (48px) wird auch fuer
 * normale Seitenueberschriften verwendet - sie global zu vergroessern
 * haette Nebenwirkungen ausserhalb des Hero. Der Hero bekommt daher
 * bewusst eine EIGENE, groessere und FLUIDE Groesse per clamp(): auf
 * schmalen Bildschirmen bleibt sie nahe am bisherigen Wert (kein
 * Zeilenumbruch-Chaos auf 390px), auf breiten Desktops wirkt die
 * Ueberschrift deutlich praesenter (bis 72px statt 48px) - genau die
 * "Groessenverhaeltnisse"/Wirkung, die ein Hero fuer eine Agentur-
 * Website braucht. Leicht negatives letter-spacing ist bei grossen
 * Schriftgraden (nicht bei Fliesstext!) ein etabliertes Mittel gegen
 * "aufgeblaeht" wirkende Headlines.
 */
/*
 * M2 (Design-Korrektur: Typografie/Abstaende/Proportionen, Auftrag
 * Abschnitt 2 "H1: etwa 48-64px"): clamp(2.25rem,...,4.5rem) reichte von
 * 36px bis 72px - unter- UND ueberschritt den jetzt verbindlichen
 * Zielbereich. Die Hero-Headline rendert seit M1 als echtes <h1> (siehe
 * HeroElement::render()) und bekommt denselben Zielbereich wie die
 * generische h1.rhektec-el-heading-Regel weiter unten - zwei CSS-Regeln
 * aus architektonischen Gruenden (Hero hat eigene Klasse/eigenes Markup),
 * aber identischer Wertebereich fuer eine konsistente H1-Groesse,
 * unabhaengig davon, ob die H1 im Hero oder als eigenstaendiges Element
 * auf der Seite steht.
 *
 * M3-Nachtrag: identischer Fund und identische neue Formel wie bei
 * h1.rhektec-el-heading weiter unten (siehe dortigen Kommentar fuer die
 * volle Herleitung) - die Hero-Headline ist seit M1 ebenfalls ein echtes
 * <h1> und litt auf 390px am selben abgeschnittenen Wort ("Malerwerkstatt"
 * im Handwerk-Demo-Hero).
 */
.rhektec-el-hero__heading {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	font-family: var(--rhektec-font-heading, inherit);
	font-size: clamp(2.125rem, 1.4rem + 2.9vw, 4rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.rhektec-el-hero__subheading {
	margin: 0 0 var(--rhektec-spacing-md, 16px);
	opacity: 0.9;
}

.rhektec-el-hero__button {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	padding: 12px 20px;
	border-radius: var(--rhektec-radius-md, 8px);
	background: var(--rhektec-color-primary, #1a56db);
	color: #fff;
}

.rhektec-el-hero__button:hover {
	background: var(--rhektec-color-primary-hover, #1543ad);
}

/* Auftrag Abschnitt 3 "Reduced Motion beruecksichtigen" - identisches
 * Prinzip wie der bestehende D2-Nachtrag oben (.rhektec-transition-*):
 * ausserhalb von "no-preference" keine transition-Deklaration, der
 * Hover-Zustand wechselt dann weiterhin sofort statt animiert. */
@media (prefers-reduced-motion: no-preference) {
	.rhektec-el-hero__button {
		transition: background-color var(--rhektec-transition-fast, 150ms) ease;
	}
}

/*
 * D3 (Design-Offensive II, Auftrag Abschnitt 2 "kompakter Unternehmens-
 * Hero" / "Tourismus-Hero mit grosser Landschaft"): hero_size (Security\
 * FieldTypes\Registry) steuert ausschliesslich die Mindesthoehe, bewusst
 * unabhaengig von hero_style (siehe dortigen Kommentar) - "standard" bleibt
 * die bisherige .rhektec-el-hero-Grundregel (kein Verhaltenssprung fuer
 * Bestandsseiten).
 */
.rhektec-el-hero--compact {
	min-height: 220px;
	padding-top: var(--rhektec-spacing-lg, 32px);
	padding-bottom: var(--rhektec-spacing-lg, 32px);
}

.rhektec-el-hero--large {
	min-height: 680px;
}

/*
 * D3 (Auftrag Abschnitt 2 "Hero mit mehreren CTAs"): Flex-Row fuer beide
 * Buttons, bricht auf schmalen Breiten automatisch um (kein Media-Query
 * noetig - identisches Prinzip wie button_group).
 */
.rhektec-el-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rhektec-spacing-sm, 8px);
	margin-top: var(--rhektec-spacing-sm, 8px);
}

.rhektec-el-hero--left .rhektec-el-hero__buttons,
.rhektec-el-hero--split .rhektec-el-hero__buttons {
	justify-content: flex-start;
}

.rhektec-el-hero__button--secondary {
	background: transparent;
	color: inherit;
	box-shadow: inset 0 0 0 2px currentColor;
}

.rhektec-el-hero__button--secondary:hover {
	background: rgba(255, 255, 255, 0.15);
}

/*
 * D3 (Auftrag Abschnitt 2 "Hero mit Kennzahlen oder Trust-Elementen").
 */
.rhektec-el-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rhektec-spacing-lg, 32px);
	margin-top: var(--rhektec-spacing-lg, 32px);
}

.rhektec-el-hero__stat {
	display: flex;
	flex-direction: column;
}

.rhektec-el-hero__stat-value {
	font-family: var(--rhektec-font-heading, inherit);
	font-size: var(--rhektec-font-size-h3, 28px);
	font-weight: 700;
	line-height: 1.1;
}

.rhektec-el-hero__stat-label {
	font-size: var(--rhektec-font-size-small, 13px);
	opacity: 0.85;
}

/*
 * Nachtrag - Design-Panel-Tab "Advanced" -> "Visibility" (Auftrag
 * Abschnitt 10: "Advanced: Margin, Padding, CSS Class, Element ID,
 * Visibility" - in R1.9 noch nicht umgesetzt, siehe TreeRenderer::
 * renderNode()). Drei EXKLUSIVE, sich nicht ueberlappende Media-Query-
 * Spannen (nicht die kumulative max-width-Kaskade, die
 * TreeRenderer::buildStyleBlock() fuer gewoehnliche Style-Werte nutzt) -
 * "auf Mobile ausblenden" soll ausschliesslich das Mobile-Fenster
 * treffen, nicht automatisch auch Tablet. Die Schwellen (1024px/640px)
 * sind bewusst identisch zu TreeRenderer::BREAKPOINTS (PHP), damit
 * "Tablet" hier exakt denselben Viewport-Bereich meint wie bei jedem
 * anderen responsiven Wert.
 */
@media (min-width: 1025px) {
	.rhektec-hide-desktop {
		display: none !important;
	}
}

@media (min-width: 641px) and (max-width: 1024px) {
	.rhektec-hide-tablet {
		display: none !important;
	}
}

@media (max-width: 640px) {
	.rhektec-hide-mobile {
		display: none !important;
	}
}

/*
 * IconBox (UX5, Auftrag Abschnitt 7: "IconBox" in der Modul-Liste) - Icon,
 * Titel und Kurztext als EIN zusammenhaengender Baustein (siehe
 * Elements\Types\IconBoxElement-Klassendoc, PHP, fuer die Begruendung,
 * warum dies vorher nur aus drei Einzelelementen nachgebaut wurde).
 * "stacked" (Default) = Icon ueber dem Text, zentriert (typisches
 * Features-Grid-Muster). "inline" = Icon links neben dem Text (typisches
 * Service-Listen-Muster). `.rhektec-el-icon-box__icon--badge` ist ein
 * optionaler runder Hintergrund hinter dem Icon (nur aktiv, wenn
 * `icon_background` gesetzt ist, siehe render()).
 */
.rhektec-el-icon-box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--rhektec-spacing-sm, 8px);
}

.rhektec-el-icon-box--stacked {
	align-items: center;
	text-align: center;
}

.rhektec-el-icon-box--inline {
	flex-direction: row;
	align-items: flex-start;
	text-align: left;
}

.rhektec-el-icon-box__icon {
	flex-shrink: 0;
	line-height: 1;
}

.rhektec-el-icon-box__icon--badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	font-size: 1em;
	padding: 0.5em;
	box-sizing: content-box;
}

.rhektec-el-icon-box__heading {
	margin: 0;
	font-family: var(--rhektec-font-heading, inherit);
	color: var(--rhektec-color-text, #111827);
}

.rhektec-el-icon-box__text {
	margin: 0;
	color: var(--rhektec-color-muted, #6b7280);
}

/*
 * Testimonial (UX5, Auftrag Abschnitt 7: "Testimonials" in der Modul-
 * Liste) - ersetzt die vorherige Zweckentfremdung von CardElement in
 * Sections\SectionLibrary::buildTestimonials() (siehe
 * Elements\Types\TestimonialElement-Klassendoc, PHP).
 */
/*
 * I1 (Design-Reset, Auftrag Abschnitt 4 "Cards, Grids, Preisbloecke und
 * Testimonials zu stark auf dieselbe Gestaltung festgelegt"): bis hierhin
 * teilten sich .rhektec-el-card/.rhektec-el-testimonial/.rhektec-el-pricing/
 * .rhektec-el-accommodation-card woertlich dieselbe Basisregel (weisser
 * Kasten, 8px Radius, 1px Hairline-Border, 16px Padding) - jedes
 * Inhaltsmodul der Seite sah dadurch wie eine Variation DESSELBEN generischen
 * Kastens aus, unabhaengig vom Inhalt. Ein Testimonial ist aber inhaltlich
 * kein "Datensatz in einer Box" wie eine Preis- oder Zimmerkarte, sondern
 * eine Aussage - die hochwertige, in Boutique-/Redaktions-Websites etablierte
 * Entsprechung ist ein Pull-Quote OHNE Kasten-Chrome: ein grosses, dekoratives
 * Anfuehrungszeichen in der Ueberschriftschrift, eine duenne Akzentlinie
 * statt eines umlaufenden Rahmens, grosszuegiger eigener Weissraum. Das
 * bricht die Box-Wiederholung sichtbar auf UND macht Zitate als eigene
 * Gattung erkennbar (identisches Architekturprinzip wie Hero/CTA-Box, die
 * ebenfalls keine generische Card-Klasse wiederverwenden, siehe deren
 * Klassendoc).
 */
.rhektec-el-testimonial {
	display: block;
	padding: 0 0 0 var(--rhektec-spacing-lg, 32px);
	border-left: 2px solid var(--rhektec-color-primary, #1a56db);
}

/*
 * I1-Nachtrag 2 (Design-Reset): die erste Fassung positionierte das
 * dekorative Anfuehrungszeichen per position:absolute UEBER der
 * Sterne-Zeile - beide teilten sich dieselbe Ecke, das Zeichen ging darin
 * optisch unter (per echtem Element-Screenshot UND Computed-Style-
 * Pruefung verifiziert, nicht nur angenommen). Jetzt ein normales
 * Block-Element IM Textfluss (kein position/top/left mehr noetig) - es
 * bekommt dadurch garantiert seine eigene Zeile oberhalb von Sternen und
 * Zitat, ohne Ueberlappungsrisiko.
 */
.rhektec-el-testimonial::before {
	content: '\201C';
	display: block;
	font-family: var(--rhektec-font-heading, inherit);
	font-size: 3.5rem;
	line-height: 1;
	margin: 0 0 -0.4rem -0.07em;
	color: var(--rhektec-color-primary, #1a56db);
	opacity: 0.45;
}

.rhektec-el-testimonial__rating {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	color: var(--rhektec-color-accent, #f59e0b);
	letter-spacing: 2px;
}

.rhektec-el-testimonial__quote {
	margin: 0 0 var(--rhektec-spacing-md, 16px);
	padding: 0;
	border: none;
	font-family: var(--rhektec-font-heading, inherit);
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1.5;
	color: var(--rhektec-color-text, #111827);
}

.rhektec-el-testimonial__footer {
	display: flex;
	align-items: center;
	gap: var(--rhektec-spacing-sm, 8px);
}

.rhektec-el-testimonial__image {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.rhektec-el-testimonial__author {
	display: flex;
	flex-direction: column;
	font-style: normal;
}

.rhektec-el-testimonial__name {
	font-weight: 600;
	color: var(--rhektec-color-text, #111827);
}

.rhektec-el-testimonial__role {
	font-size: 0.875em;
	color: var(--rhektec-color-muted, #6b7280);
}

/*
 * Accordion/FAQ (UX5, Auftrag Abschnitt 7: "Accordion/FAQ" in der Modul-
 * Liste) - nativ per <details>/<summary> (siehe
 * Elements\Types\AccordionItemElement-Klassendoc, PHP, fuer die
 * Begruendung: kein JavaScript noetig, Tastatursteuerung/Screenreader-
 * Semantik kommt bereits vom Browser). Der native Dreieck-Marker wird
 * versteckt und durch ein "+"/"-" ersetzt, das sich mit dem offenen
 * Zustand dreht.
 */
.rhektec-el-accordion-item {
	border-bottom: 1px solid var(--rhektec-color-muted, #6b7280);
	padding: var(--rhektec-spacing-sm, 8px) 0;
}

.rhektec-el-accordion-item__question {
	cursor: pointer;
	font-weight: 600;
	color: var(--rhektec-color-text, #111827);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rhektec-spacing-sm, 8px);
}

.rhektec-el-accordion-item__question::-webkit-details-marker {
	display: none;
}

.rhektec-el-accordion-item__question::after {
	content: "+";
	flex-shrink: 0;
	font-weight: 400;
	color: var(--rhektec-color-primary, #1a56db);
	transition: transform 0.15s ease;
}

.rhektec-el-accordion-item[open] > .rhektec-el-accordion-item__question::after {
	content: "\2212";
}

/*
 * I1-Nachtrag (Design-Reset, Auftrag Abschnitt 4 "Zeilenlaengen fuer die
 * tatsaechliche Viewport-Breite ausgelegt"): FAQ-Antworten liegen typisch
 * in einer einspaltigen, 'contained' Row (volle 1132px Inhaltsbreite auf
 * Desktop) - ohne eigene Breitenbegrenzung ergibt das bei 16px
 * Fliesstext ueber 100 Zeichen pro Zeile, deutlich ueber der empfohlenen
 * Lesbarkeits-Obergrenze (~75 Zeichen). `--rhektec-layout-container-narrow`
 * (DesignSystem\DesignSystemRepository, bereits fuer genau diesen Zweck
 * vorgesehen: "ein schmaler Textblock... zusaetzlich... von Sections
 * wahlweise nutzbare Breite") begrenzt die Antwort auf eine lesbare
 * Spalte, ohne dass jede Seite das manuell nachziehen muss.
 */
.rhektec-el-accordion-item__answer {
	margin-top: var(--rhektec-spacing-sm, 8px);
	max-width: var(--rhektec-container-narrow, 720px);
	color: var(--rhektec-color-muted, #6b7280);
}

/*
 * Stats (UX5, Auftrag Abschnitt 7: "Stats" in der Modul-Liste).
 */
.rhektec-el-stats {
	display: flex;
	flex-direction: column;
	gap: var(--rhektec-spacing-xs, 4px);
}

.rhektec-el-stats__number {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
}

.rhektec-el-stats__label {
	color: var(--rhektec-color-muted, #6b7280);
}

/*
 * Team (UX5, Auftrag Abschnitt 7: "Team" in der Modul-Liste).
 */
.rhektec-el-team-member {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rhektec-spacing-xs, 4px);
}

/*
 * D3 (Design-Offensive III): 120px wirkte auf breiten Mehrspalten-Layouts
 * (z. B. zwei Spalten auf 1440px) unausgewogen klein/verloren - ein
 * Ansprechpartner-Foto soll selbstbewusst wirken (Auftrag Abschnitt 5
 * "visuelle Hierarchie"), nicht wie eine Randnotiz. Dezenter Schattenring
 * gibt dem Kreis zusaetzlich Praesenz vor hellen wie dunklen Hintergruenden.
 */
.rhektec-el-team-member__photo {
	width: 176px;
	height: 176px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: var(--rhektec-spacing-sm, 8px);
	box-shadow: var(--rhektec-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.rhektec-el-team-member__name {
	margin: 0;
	font-family: var(--rhektec-font-heading, inherit);
	color: var(--rhektec-color-text, #111827);
}

.rhektec-el-team-member__role {
	margin: 0;
	color: var(--rhektec-color-muted, #6b7280);
}

/*
 * Pricing (UX5, Auftrag Abschnitt 7: "Pricing" in der Modul-Liste).
 * ".rhektec-el-pricing--highlighted" (render(): "highlighted"-Toggle)
 * hebt das empfohlene Paket optisch ab - etabliertes Preistabellen-
 * Muster.
 */
/*
 * I1-Nachtrag (Design-Reset): ".rhektec-el-pricing--highlighted" hob das
 * empfohlene Paket bislang nur ueber einen dickeren, farbigen Rahmen ab -
 * dieselbe weisse Flaeche, derselbe Radius, derselbe Schatten wie die
 * beiden Nachbar-Pakete. Drei fast identische weisse Kaesten nebeneinander
 * (nur ein Rahmen unterscheidet sich) erzeugen keine wirkliche visuelle
 * Hierarchie - auf den ersten Blick wirken alle drei gleich wichtig. Die
 * empfohlene Option bekommt jetzt echte Farbumkehr (dunkler Marken-
 * hintergrund statt nur ein Rahmen) - etabliertes, sofort erkennbares
 * Preistabellen-Muster, das eine Option bewusst aus der Reihe heraushebt,
 * statt alle drei optisch gleichwertig zu belassen. Vergroesserte Flaeche
 * (translateY) verstaerkt die Hierarchie zusaetzlich rein raeumlich.
 */
.rhektec-el-pricing {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: #fff;
	border-radius: var(--rhektec-radius-lg, 16px);
	border: 1px solid rgba(15, 23, 42, 0.08);
	padding: var(--rhektec-spacing-lg, 32px) var(--rhektec-spacing-md, 16px);
}

.rhektec-el-pricing--highlighted {
	background: var(--rhektec-color-secondary, #0f172a);
	border-color: var(--rhektec-color-secondary, #0f172a);
	box-shadow: var(--rhektec-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
	transform: translateY(-8px);
}

@media (max-width: 640px) {
	.rhektec-el-pricing--highlighted {
		transform: none;
	}
}

.rhektec-el-pricing--highlighted .rhektec-el-pricing__name,
.rhektec-el-pricing--highlighted .rhektec-el-pricing__price {
	color: #fff;
}

.rhektec-el-pricing--highlighted .rhektec-el-pricing__features li {
	color: rgba(255, 255, 255, 0.75);
	border-top-color: rgba(255, 255, 255, 0.15);
}

.rhektec-el-pricing--highlighted .rhektec-el-pricing__button {
	color: #fff;
	text-decoration: underline;
}

.rhektec-el-pricing__name {
	margin: 0 0 var(--rhektec-spacing-xs, 4px);
	font-family: var(--rhektec-font-heading, inherit);
	color: var(--rhektec-color-text, #111827);
}

.rhektec-el-pricing__price {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--rhektec-color-primary, #1a56db);
}

.rhektec-el-pricing__features {
	list-style: none;
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	padding: 0;
	width: 100%;
}

.rhektec-el-pricing__features li {
	padding: var(--rhektec-spacing-xs, 4px) 0;
	border-top: 1px solid var(--rhektec-color-muted, #6b7280);
	color: var(--rhektec-color-muted, #6b7280);
}

.rhektec-el-pricing__features li:first-child {
	border-top: none;
}

.rhektec-el-pricing__button {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	color: var(--rhektec-color-primary, #1a56db);
}

/*
 * Button-Gruppe (UX5, Auftrag Abschnitt 7: "Button/ButtonGroup" in der
 * Modul-Liste) - identisches Prinzip wie Section/Row (R1.3): "gap"/
 * "justify-content" sind generische, pro Node deklarierte CSS-Werte
 * (Elements\Types\ButtonGroupElement::styleSchema()), die ohne dieses
 * display:flex folgenlos blieben.
 */
.rhektec-el-button-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

/*
 * UX7-Nachtrag-Fund: ImageElement::render() gibt fuer "kein Bild gewaehlt"
 * seit R1.7.3 ein leeres <div class="rhektec-el-image rhektec-el-image--
 * empty"> aus - bislang KEIN einziges Mal mit eigener CSS-Regel versehen,
 * weil Card/TeamMember (die einzigen bisherigen Verwendungen) den leeren
 * Zustand stattdessen komplett ueberspringen (gar kein <img>-Tag). Als
 * eigenstaendiges Canvas-Element oder - wie bei Gallery/LogoGrid - als
 * direktes Container-Kind kollabiert ein stilloses leeres <div> dagegen
 * auf 0x0 (keine Breite/Hoehe ohne Inhalt) und macht die Section Library-
 * Vorlagen fuer Gallery/LogoGrid dadurch unsichtbar - entdeckt per
 * Playwright-Screenshot (Raster komplett leer trotz sechs Kindern), exakt
 * das in Auftrag Abschnitt 12 explizit ausgeschlossene "leerer Platzhalter
 * als fertiger Zustand".
 */
.rhektec-el-image--empty {
	display: block;
	min-height: 120px;
	background: var(--rhektec-color-muted, #6b7280);
	opacity: 0.15;
	border-radius: inherit;
}

/*
 * Gallery (UX5/UX7-Nachtrag, Auftrag Abschnitt 7: "Gallery" in der
 * Modul-Liste) - CSS Grid statt verschachteltem Row/Column, siehe
 * GalleryElement-Klassendoc. ".rhektec-columns-N" traegt hier (anders als
 * bei .rhektec-el-container, das dieselben Klassennamen fuer ein
 * flex-basis-Raster nutzt) grid-template-columns - beide Regelsaetze
 * ueberschneiden sich nicht, da sie jeweils die Eltern-Klasse
 * (.rhektec-el-gallery bzw. .rhektec-el-container) mit in den Selektor
 * aufnehmen.
 */
.rhektec-el-gallery {
	display: grid;
	gap: var(--rhektec-spacing-sm, 8px);
}
.rhektec-el-gallery.rhektec-columns-1 { grid-template-columns: repeat(1, 1fr); }
.rhektec-el-gallery.rhektec-columns-2 { grid-template-columns: repeat(2, 1fr); }
.rhektec-el-gallery.rhektec-columns-3 { grid-template-columns: repeat(3, 1fr); }
.rhektec-el-gallery.rhektec-columns-4 { grid-template-columns: repeat(4, 1fr); }
.rhektec-el-gallery.rhektec-columns-5 { grid-template-columns: repeat(5, 1fr); }
.rhektec-el-gallery.rhektec-columns-6 { grid-template-columns: repeat(6, 1fr); }
.rhektec-el-gallery > .rhektec-el-image {
	width: 100%;
	/* UX7-Nachtrag-Fund: height:100% allein liess eine leere Grid-Zeile
	 * (ohne eigene intrinsische Hoehe) auf 0px kollabieren, siehe
	 * .rhektec-el-image--empty-Kommentar oben - aspect-ratio gibt jeder
	 * Kachel unabhaengig vom Bild-/Platzhalter-Inhalt eine echte Hoehe. */
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.rhektec-el-gallery[class*="rhektec-columns-"] {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.rhektec-el-gallery[class*="rhektec-columns-"] {
		grid-template-columns: repeat(1, 1fr);
	}
}

/*
 * D3 (Design-Offensive, Auftrag Abschnitt 2D: "Masonry Gallery"/"Image
 * Carousel") - zwei alternative Anordnungen fuer dieselbe Gallery/
 * LogoGrid-Datenstruktur (GalleryElement::styleSchema() "layout"), keine
 * eigenen Module. "masonry" nutzt CSS-Mehrspalten-Layout (column-count)
 * statt CSS-Grid - dadurch behalten Bilder ihr natuerliches Seiten-
 * verhaeltnis (kein erzwungenes 4:3 wie im Grid-Modus) und fuellen die
 * Spalte ohne Luecken, der klassische "Pinterest-Look". "carousel" ist
 * ein horizontal scrollender Flex-Container mit CSS-Scroll-Snap - voll
 * per Tastatur bedienbar (Tab springt zum naechsten Bild, Pfeiltasten/
 * Touch scrollen nativ) OHNE jedes zusaetzliche JavaScript, identisches
 * "nativ vor JS" Prinzip wie AccordionItemElement (<details>). Gleiche
 * zwei Modifier-Klassen fuer .rhektec-el-gallery UND .rhektec-el-logo-grid.
 */
.rhektec-el-gallery--masonry,
.rhektec-el-logo-grid--masonry {
	display: block;
	column-gap: var(--rhektec-spacing-sm, 8px);
}
.rhektec-el-gallery--masonry.rhektec-columns-1,
.rhektec-el-logo-grid--masonry.rhektec-columns-1 { column-count: 1; }
.rhektec-el-gallery--masonry.rhektec-columns-2,
.rhektec-el-logo-grid--masonry.rhektec-columns-2 { column-count: 2; }
.rhektec-el-gallery--masonry.rhektec-columns-3,
.rhektec-el-logo-grid--masonry.rhektec-columns-3 { column-count: 3; }
.rhektec-el-gallery--masonry.rhektec-columns-4,
.rhektec-el-logo-grid--masonry.rhektec-columns-4 { column-count: 4; }
.rhektec-el-gallery--masonry.rhektec-columns-5,
.rhektec-el-logo-grid--masonry.rhektec-columns-5 { column-count: 5; }
.rhektec-el-gallery--masonry.rhektec-columns-6,
.rhektec-el-logo-grid--masonry.rhektec-columns-6 { column-count: 6; }
.rhektec-el-gallery--masonry > .rhektec-el-image,
.rhektec-el-logo-grid--masonry > .rhektec-el-image {
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	margin-bottom: var(--rhektec-spacing-sm, 8px);
	break-inside: avoid;
}

.rhektec-el-gallery--carousel,
.rhektec-el-logo-grid--carousel {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	gap: var(--rhektec-spacing-sm, 8px);
	padding-bottom: var(--rhektec-spacing-xs, 4px);
}
.rhektec-el-gallery--carousel.rhektec-columns-1 > .rhektec-el-image { flex: 0 0 100%; }
.rhektec-el-gallery--carousel.rhektec-columns-2 > .rhektec-el-image { flex: 0 0 calc(50% - 8px); }
.rhektec-el-gallery--carousel.rhektec-columns-3 > .rhektec-el-image { flex: 0 0 calc(33.333% - 8px); }
.rhektec-el-gallery--carousel.rhektec-columns-4 > .rhektec-el-image { flex: 0 0 calc(25% - 8px); }
.rhektec-el-gallery--carousel.rhektec-columns-5 > .rhektec-el-image { flex: 0 0 calc(20% - 8px); }
.rhektec-el-gallery--carousel.rhektec-columns-6 > .rhektec-el-image { flex: 0 0 calc(16.666% - 8px); }
.rhektec-el-logo-grid--carousel > .rhektec-el-image {
	flex: 0 0 160px;
}
.rhektec-el-gallery--carousel > .rhektec-el-image,
.rhektec-el-logo-grid--carousel > .rhektec-el-image {
	scroll-snap-align: start;
	width: auto;
}
@media (max-width: 640px) {
	.rhektec-el-gallery--carousel[class*="rhektec-columns-"] > .rhektec-el-image {
		flex: 0 0 85%;
	}
}

/*
 * D4 (Design-Offensive II, Auftrag Abschnitt 2 "Galerie": "Lightbox").
 * Reine Cue-/Overlay-Darstellung hier (kein JS-Zustand) - die eigentliche
 * Interaktion (Oeffnen/Schliessen/Navigieren) uebernimmt
 * assets/frontend/lightbox.js, das ausschliesslich Klassen auf dem
 * bereits per CSS existierenden .rhektec-lightbox-Overlay umschaltet.
 * ":not(a > img)" waere hier praeziser, aber CSS kann nicht "Elternteil
 * ist ein Link" ausdruecken - render()/lightbox.js entscheiden das bereits
 * serverseitig bzw. zur Klickzeit korrekt (siehe GalleryElement::render()/
 * lightbox.js-Kommentar), dieses Cursor-Cue ist rein kosmetisch und daher
 * absichtlich auf ALLE direkten Bild-Kinder angewandt.
 */
.rhektec-el-gallery--lightbox > .rhektec-el-image {
	cursor: zoom-in;
}

.rhektec-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, 0.92);
	padding: var(--rhektec-spacing-lg, 32px);
}
.rhektec-lightbox--open {
	display: flex;
}
body.rhektec-lightbox-locked {
	overflow: hidden;
}
.rhektec-lightbox__image {
	max-width: 90vw;
	max-height: 85vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: var(--rhektec-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.4));
}
.rhektec-lightbox__close,
.rhektec-lightbox__prev,
.rhektec-lightbox__next {
	position: absolute;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: none;
	border-radius: 999px;
	width: 44px;
	height: 44px;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}
.rhektec-lightbox__close:hover,
.rhektec-lightbox__prev:hover,
.rhektec-lightbox__next:hover {
	background: rgba(255, 255, 255, 0.25);
}
.rhektec-lightbox__close:focus-visible,
.rhektec-lightbox__prev:focus-visible,
.rhektec-lightbox__next:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.rhektec-lightbox__close {
	top: var(--rhektec-spacing-md, 16px);
	right: var(--rhektec-spacing-md, 16px);
}
.rhektec-lightbox__prev {
	left: var(--rhektec-spacing-md, 16px);
	top: 50%;
	transform: translateY(-50%);
}
.rhektec-lightbox__next {
	right: var(--rhektec-spacing-md, 16px);
	top: 50%;
	transform: translateY(-50%);
}
@media (prefers-reduced-motion: no-preference) {
	.rhektec-lightbox__close,
	.rhektec-lightbox__prev,
	.rhektec-lightbox__next {
		transition: background-color var(--rhektec-transition-fast, 0.15s) ease;
	}
}

/*
 * Logo-Raster (UX5/UX7-Nachtrag, Auftrag Abschnitt 7/12: "Logo Grid") -
 * identisches Grid-Prinzip wie Gallery, aber kleinere Kacheln und
 * gedaempfte Darstellung (typisches "Partner/Kunden"-Leisten-Idiom).
 */
.rhektec-el-logo-grid {
	display: grid;
	gap: var(--rhektec-spacing-lg, 32px);
	align-items: center;
}
.rhektec-el-logo-grid.rhektec-columns-1 { grid-template-columns: repeat(1, 1fr); }
.rhektec-el-logo-grid.rhektec-columns-2 { grid-template-columns: repeat(2, 1fr); }
.rhektec-el-logo-grid.rhektec-columns-3 { grid-template-columns: repeat(3, 1fr); }
.rhektec-el-logo-grid.rhektec-columns-4 { grid-template-columns: repeat(4, 1fr); }
.rhektec-el-logo-grid.rhektec-columns-5 { grid-template-columns: repeat(5, 1fr); }
.rhektec-el-logo-grid.rhektec-columns-6 { grid-template-columns: repeat(6, 1fr); }
.rhektec-el-logo-grid > .rhektec-el-image {
	width: 100%;
	height: auto;
	object-fit: contain;
}
.rhektec-el-logo-grid--grayscale > .rhektec-el-image {
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.rhektec-el-logo-grid--grayscale > .rhektec-el-image:hover {
	filter: grayscale(0%);
	opacity: 1;
}

@media (max-width: 1024px) {
	.rhektec-el-logo-grid[class*="rhektec-columns-"] {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 640px) {
	.rhektec-el-logo-grid[class*="rhektec-columns-"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * Blog-Vorschau (UX5/UX7-Nachtrag, Auftrag Abschnitt 7/12: "Blog Preview")
 * - identisches Grid-Prinzip wie Gallery/LogoGrid, Kartenoptik angelehnt
 * an .rhektec-el-card (Schatten/Radius aus denselben Tokens).
 */
.rhektec-el-blog-preview {
	display: grid;
	gap: var(--rhektec-spacing-md, 16px);
}
.rhektec-el-blog-preview.rhektec-columns-1 { grid-template-columns: repeat(1, 1fr); }
.rhektec-el-blog-preview.rhektec-columns-2 { grid-template-columns: repeat(2, 1fr); }
.rhektec-el-blog-preview.rhektec-columns-3 { grid-template-columns: repeat(3, 1fr); }
.rhektec-el-blog-preview.rhektec-columns-4 { grid-template-columns: repeat(4, 1fr); }
.rhektec-el-blog-preview.rhektec-columns-5 { grid-template-columns: repeat(5, 1fr); }
.rhektec-el-blog-preview.rhektec-columns-6 { grid-template-columns: repeat(6, 1fr); }
/* E3 (Design-Offensive IV) - identisches Prinzip wie .rhektec-el-card. */
.rhektec-el-blog-preview__item {
	display: block;
	color: inherit;
	text-decoration: none;
	background: #fff;
	border-radius: var(--rhektec-radius-md, 8px);
	border: 1px solid rgba(15, 23, 42, 0.08);
	overflow: hidden;
}
.rhektec-el-blog-preview__image {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}
.rhektec-el-blog-preview__title {
	margin: var(--rhektec-spacing-md, 16px) var(--rhektec-spacing-md, 16px) 0;
	font-family: var(--rhektec-font-heading, inherit);
	color: var(--rhektec-color-text, #111827);
}
.rhektec-el-blog-preview__excerpt {
	margin: var(--rhektec-spacing-sm, 8px) var(--rhektec-spacing-md, 16px) var(--rhektec-spacing-md, 16px);
	color: var(--rhektec-color-muted, #6b7280);
}

@media (max-width: 1024px) {
	.rhektec-el-blog-preview[class*="rhektec-columns-"] {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 640px) {
	.rhektec-el-blog-preview[class*="rhektec-columns-"] {
		grid-template-columns: repeat(1, 1fr);
	}
}

/*
 * Tabs (WAI-ARIA-Tabs-Pattern). Design-Felder (TabsElement::styleSchema())
 * setzen ausschliesslich CSS-Custom-Properties auf der Wurzel
 * (--rhektec-tabs-*) - jede Regel hier referenziert sie mit einem
 * sinnvollen Fallback, identisches Prinzip wie die globalen Design-Tokens
 * (UX6), nur pro Instanz statt global. Siehe TabsElement-Klassendoc fuer
 * die vollstaendige Begruendung dieses Musters.
 */
.rhektec-el-tabs__list {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	gap: var(--rhektec-tabs-gap, 4px);
	justify-content: var(--rhektec-tabs-bar-justify, flex-start);
	border-bottom: 2px solid var(--rhektec-tabs-border-color, var(--rhektec-color-muted, #6b7280));
	margin: 0 0 var(--rhektec-spacing-md, 16px);
}
.rhektec-el-tabs__tab {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	margin: 0 0 -2px;
	cursor: pointer;
	flex-shrink: 0;
	font: inherit;
	white-space: nowrap;
	background: var(--rhektec-tabs-tab-bg, transparent);
	color: var(--rhektec-tabs-tab-color, var(--rhektec-color-text, #111827));
	padding: var(--rhektec-tabs-tab-padding, 12px 20px);
	border-radius: var(--rhektec-tabs-tab-radius, 0);
	border-bottom: 2px solid transparent;
	transition: background .15s ease, color .15s ease;
}
.rhektec-el-tabs__tab:hover:not([aria-selected="true"]) {
	background: var(--rhektec-color-muted, #6b7280);
	opacity: .85;
}
.rhektec-el-tabs__tab[aria-selected="true"] {
	background: var(--rhektec-tabs-active-bg, transparent);
	color: var(--rhektec-tabs-active-color, var(--rhektec-color-primary, #1a56db));
	border-bottom-color: var(--rhektec-tabs-active-color, var(--rhektec-color-primary, #1a56db));
}
.rhektec-el-tabs__tab:focus-visible {
	outline: 2px solid var(--rhektec-color-primary, #1a56db);
	outline-offset: -2px;
}
.rhektec-el-tabs__panel {
	display: none;
	background: var(--rhektec-tabs-panel-bg, transparent);
	padding: var(--rhektec-tabs-panel-padding, 0);
	border-radius: var(--rhektec-tabs-panel-radius, 0);
}
.rhektec-el-tabs__panel:focus-visible {
	outline: 2px solid var(--rhektec-color-primary, #1a56db);
	outline-offset: 2px;
}
/*
 * Welches Panel sichtbar ist, entscheidet ausschliesslich dieser Attribut-
 * Selektor (data-active-index, von TabsElement::render() gesetzt) - reines
 * CSS, funktioniert bereits beim allerersten Rendern ohne JavaScript
 * (progressive enhancement, siehe TabsElement-Klassendoc). Der Bereich
 * (0..19) ist an Security\FieldTypes\Registry's 'tab_index'-Feldtyp
 * gekoppelt.
 */
.rhektec-el-tabs[data-active-index="0"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(1) { display: block; }
.rhektec-el-tabs[data-active-index="1"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(2) { display: block; }
.rhektec-el-tabs[data-active-index="2"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(3) { display: block; }
.rhektec-el-tabs[data-active-index="3"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(4) { display: block; }
.rhektec-el-tabs[data-active-index="4"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(5) { display: block; }
.rhektec-el-tabs[data-active-index="5"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(6) { display: block; }
.rhektec-el-tabs[data-active-index="6"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(7) { display: block; }
.rhektec-el-tabs[data-active-index="7"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(8) { display: block; }
.rhektec-el-tabs[data-active-index="8"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(9) { display: block; }
.rhektec-el-tabs[data-active-index="9"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(10) { display: block; }
.rhektec-el-tabs[data-active-index="10"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(11) { display: block; }
.rhektec-el-tabs[data-active-index="11"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(12) { display: block; }
.rhektec-el-tabs[data-active-index="12"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(13) { display: block; }
.rhektec-el-tabs[data-active-index="13"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(14) { display: block; }
.rhektec-el-tabs[data-active-index="14"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(15) { display: block; }
.rhektec-el-tabs[data-active-index="15"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(16) { display: block; }
.rhektec-el-tabs[data-active-index="16"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(17) { display: block; }
.rhektec-el-tabs[data-active-index="17"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(18) { display: block; }
.rhektec-el-tabs[data-active-index="18"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(19) { display: block; }
.rhektec-el-tabs[data-active-index="19"] .rhektec-el-tabs__panels > .rhektec-el-tabs__panel:nth-child(20) { display: block; }

/*
 * D3 (Design-Offensive, Auftrag Abschnitt 2D: "Before/After"). Siehe
 * BeforeAfterElement-Klassendoc (PHP) fuer die Clip-Path-Technik und das
 * progressive-enhancement-Verhalten ohne before-after.js.
 */
.rhektec-el-before-after__frame {
	position: relative;
	overflow: hidden;
	border-radius: inherit;
}

.rhektec-el-before-after__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.rhektec-el-before-after__image--after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.rhektec-el-before-after__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #ffffff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
	transform: translateX(-50%);
	pointer-events: none;
}

.rhektec-el-before-after__captions {
	display: flex;
	justify-content: space-between;
	margin-top: var(--rhektec-spacing-xs, 4px);
	font-size: var(--rhektec-font-size-small, 13px);
	color: var(--rhektec-color-muted, #6b7280);
}

.rhektec-el-before-after__range {
	width: 100%;
	margin-top: var(--rhektec-spacing-xs, 4px);
	accent-color: var(--rhektec-color-primary, #1a56db);
}

.rhektec-el-before-after--empty {
	display: none;
}

/*
 * D3 (Design-Offensive, Auftrag Abschnitt 2D: "Image Hotspots"). Siehe
 * ImageHotspotsElement/HotspotElement-Klassendoc (PHP) - reines CSS, kein
 * JavaScript. Die Tooltip-Sichtbarkeit laeuft ueber opacity/visibility
 * (nie display:none), damit aria-describedby fuer Screenreader immer
 * wirkt, unabhaengig vom visuellen Hover-/Fokus-Zustand.
 */
.rhektec-el-image-hotspots {
	position: relative;
	display: block;
}

.rhektec-el-image-hotspots__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: inherit;
}

.rhektec-el-image-hotspots--empty {
	display: none;
}

.rhektec-el-hotspot {
	position: absolute;
	transform: translate(-50%, -50%);
}

.rhektec-el-hotspot__marker {
	position: relative;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--rhektec-color-primary, #1a56db);
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6);
	cursor: pointer;
}

.rhektec-el-hotspot__marker-dot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffffff;
	transform: translate(-50%, -50%);
}

.rhektec-el-hotspot__tooltip {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	min-width: 160px;
	max-width: 240px;
	padding: var(--rhektec-spacing-sm, 8px) var(--rhektec-spacing-sm, 8px);
	border-radius: var(--rhektec-radius-sm, 4px);
	background: var(--rhektec-color-text, #111827);
	color: #ffffff;
	font-size: var(--rhektec-font-size-small, 13px);
	line-height: 1.4;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.rhektec-el-hotspot__tooltip {
		transition: opacity var(--rhektec-transition-fast, 0.15s) ease;
	}
}

.rhektec-el-hotspot__marker:hover + .rhektec-el-hotspot__tooltip,
.rhektec-el-hotspot__marker:focus + .rhektec-el-hotspot__tooltip,
.rhektec-el-hotspot:hover .rhektec-el-hotspot__tooltip,
.rhektec-el-hotspot:focus-within .rhektec-el-hotspot__tooltip {
	opacity: 1;
	visibility: visible;
}

/*
 * D4 (Design-Offensive, Auftrag Abschnitt 2E: "Badge / Label").
 */
.rhektec-el-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--rhektec-radius-sm, 4px);
	font-size: var(--rhektec-font-size-small, 13px);
	font-weight: 600;
	line-height: 1.6;
	background: var(--rhektec-color-muted, #6b7280);
	color: #ffffff;
}
.rhektec-el-badge--primary { background: var(--rhektec-color-primary, #1a56db); }
.rhektec-el-badge--success { background: var(--rhektec-color-success, #15803d); }
.rhektec-el-badge--warning { background: var(--rhektec-color-warning, #b45309); }
.rhektec-el-badge--danger { background: var(--rhektec-color-danger, #b91c1c); }

/*
 * D4 (Design-Offensive, Auftrag Abschnitt 2E: "Alert / Notice"). Helle
 * Tint-Hintergruende + farbiger linker Rahmen statt voller Flaechenfarbe
 * (bessere Lesbarkeit bei laengeren Texten als Badge's Vollton-Chip).
 */
.rhektec-el-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--rhektec-spacing-sm, 8px);
	padding: var(--rhektec-spacing-sm, 8px) var(--rhektec-spacing-md, 16px);
	border-radius: var(--rhektec-radius-sm, 4px);
	border-left: 4px solid var(--rhektec-color-muted, #6b7280);
	background: var(--rhektec-color-surface, #f8fafc);
}
.rhektec-el-alert__icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--rhektec-color-muted, #6b7280);
}
.rhektec-el-alert__text {
	color: var(--rhektec-color-text, #111827);
}
.rhektec-el-alert--info {
	border-left-color: var(--rhektec-color-primary, #1a56db);
	background: #eef2ff;
	background: color-mix(in srgb, var(--rhektec-color-primary, #1a56db) 8%, var(--rhektec-color-surface, #f8fafc));
}
.rhektec-el-alert--info .rhektec-el-alert__icon { color: var(--rhektec-color-primary, #1a56db); }
.rhektec-el-alert--success {
	border-left-color: var(--rhektec-color-success, #15803d);
	background: #eafaf0;
	background: color-mix(in srgb, var(--rhektec-color-success, #15803d) 8%, var(--rhektec-color-surface, #f8fafc));
}
.rhektec-el-alert--success .rhektec-el-alert__icon { color: var(--rhektec-color-success, #15803d); }
.rhektec-el-alert--warning {
	border-left-color: var(--rhektec-color-warning, #b45309);
	background: #fef6ec;
	background: color-mix(in srgb, var(--rhektec-color-warning, #b45309) 8%, var(--rhektec-color-surface, #f8fafc));
}
.rhektec-el-alert--warning .rhektec-el-alert__icon { color: var(--rhektec-color-warning, #b45309); }
.rhektec-el-alert--danger {
	border-left-color: var(--rhektec-color-danger, #b91c1c);
	background: #fdecec;
	background: color-mix(in srgb, var(--rhektec-color-danger, #b91c1c) 8%, var(--rhektec-color-surface, #f8fafc));
}
.rhektec-el-alert--danger .rhektec-el-alert__icon { color: var(--rhektec-color-danger, #b91c1c); }

/*
 * D4 (Design-Offensive, Auftrag Abschnitt 2C: "CTA Box/CTA Banner/CTA mit
 * Bild"). "boxed" (Default) ist eine zentrierte Box, "banner"/
 * "with_image" sind Modifier-Klassen - identisches Muster wie Card/Hero.
 */
.rhektec-el-cta-box {
	display: block;
	padding: var(--rhektec-spacing-lg, 32px);
	text-align: center;
	border-radius: var(--rhektec-radius-lg, 16px);
	background: var(--rhektec-color-surface, #f8fafc);
}
.rhektec-el-cta-box__heading {
	margin: 0 0 var(--rhektec-spacing-xs, 4px);
	font-family: var(--rhektec-font-heading, inherit);
}
.rhektec-el-cta-box__text {
	margin: 0 0 var(--rhektec-spacing-md, 16px);
	color: var(--rhektec-color-muted, #6b7280);
}
.rhektec-el-cta-box__button {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	padding: 12px 20px;
	border-radius: var(--rhektec-radius-md, 8px);
	background: var(--rhektec-color-primary, #1a56db);
	color: #fff;
}

/*
 * N3 (Referenz-Uebernahme, Auftrag Abschnitt 3 "CTA-Modul: ein oder zwei
 * Buttons"): identisches Wrapper-/Modifikator-Muster wie
 * .rhektec-el-hero__buttons/--secondary (siehe dort) - CtaBoxElement::
 * render() setzt diesen Wrapper nur, wenn tatsaechlich ein zweiter Button
 * vorhanden ist, damit der haeufige Einzel-Button-Fall exakt das bisherige
 * Markup/Verhalten behaelt (kein zusaetzlicher Flex-Container noetig).
 */
.rhektec-el-cta-box__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rhektec-spacing-sm, 8px);
}
.rhektec-el-cta-box__button--secondary {
	background: transparent;
	color: var(--rhektec-color-primary, #1a56db);
	box-shadow: inset 0 0 0 2px currentColor;
}
.rhektec-el-cta-box__button--secondary:hover {
	background: rgba(0, 0, 0, 0.05);
}

.rhektec-el-cta-box--banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rhektec-spacing-md, 16px);
	text-align: left;
}
.rhektec-el-cta-box--banner .rhektec-el-cta-box__content {
	display: flex;
	align-items: center;
	gap: var(--rhektec-spacing-lg, 32px);
	flex-wrap: wrap;
}
.rhektec-el-cta-box--banner .rhektec-el-cta-box__heading,
.rhektec-el-cta-box--banner .rhektec-el-cta-box__text {
	margin: 0;
}
@media (max-width: 640px) {
	.rhektec-el-cta-box--banner {
		flex-direction: column;
		text-align: center;
	}
	.rhektec-el-cta-box--banner .rhektec-el-cta-box__content {
		flex-direction: column;
	}
}

.rhektec-el-cta-box--with_image {
	display: flex;
	align-items: center;
	gap: var(--rhektec-spacing-lg, 32px);
	text-align: left;
	padding: 0;
	overflow: hidden;
}
.rhektec-el-cta-box--with_image > .rhektec-el-cta-box__image {
	flex: 0 0 40%;
	width: 40%;
	height: 100%;
	min-height: 200px;
	object-fit: cover;
	margin: 0;
}
.rhektec-el-cta-box--with_image > .rhektec-el-cta-box__content {
	flex: 1 1 auto;
	padding: var(--rhektec-spacing-lg, 32px) var(--rhektec-spacing-lg, 32px) var(--rhektec-spacing-lg, 32px) 0;
}
@media (max-width: 640px) {
	.rhektec-el-cta-box--with_image {
		flex-direction: column;
	}
	.rhektec-el-cta-box--with_image > .rhektec-el-cta-box__image {
		width: 100%;
	}
	.rhektec-el-cta-box--with_image > .rhektec-el-cta-box__content {
		padding: var(--rhektec-spacing-lg, 32px);
	}
}

/*
 * D5 (Design-Offensive, Auftrag Abschnitt 2H: "Unterkunfts-/Hotel-
 * Karten", "Zimmer- und Apartment-Karten"). Kartenoptik angelehnt an
 * .rhektec-el-card (Schatten/Radius aus denselben Tokens).
 */
/* E3 (Design-Offensive IV): bislang weder Rahmen noch Schatten - auf
 * einem hellen Section-Hintergrund ging die Kartenkontur optisch
 * verloren. Identisches Hairline-Border-Prinzip wie .rhektec-el-card. */
.rhektec-el-accommodation-card {
	display: block;
	background: #fff;
	border-radius: var(--rhektec-radius-lg, 16px);
	border: 1px solid rgba(15, 23, 42, 0.08);
	overflow: hidden;
}
.rhektec-el-accommodation-card__media {
	position: relative;
}
.rhektec-el-accommodation-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.rhektec-el-accommodation-card__badge {
	position: absolute;
	top: var(--rhektec-spacing-sm, 8px);
	right: var(--rhektec-spacing-sm, 8px);
}
.rhektec-el-accommodation-card__content {
	padding: var(--rhektec-spacing-md, 16px);
}
.rhektec-el-accommodation-card__name {
	margin: 0 0 var(--rhektec-spacing-xs, 4px);
	font-family: var(--rhektec-font-heading, inherit);
}
.rhektec-el-accommodation-card__description {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	color: var(--rhektec-color-muted, #6b7280);
}
.rhektec-el-accommodation-card__capacity {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	font-size: var(--rhektec-font-size-small, 13px);
}
.rhektec-el-accommodation-card__amenities {
	list-style: none;
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--rhektec-spacing-xs, 4px);
	font-size: var(--rhektec-font-size-small, 13px);
}
.rhektec-el-accommodation-card__amenities li {
	background: var(--rhektec-color-surface, #f8fafc);
	padding: 2px 8px;
	border-radius: var(--rhektec-radius-sm, 4px);
}
.rhektec-el-accommodation-card__price {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	font-weight: 600;
	color: var(--rhektec-color-text, #111827);
}
.rhektec-el-accommodation-card__button {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: var(--rhektec-radius-md, 8px);
	background: var(--rhektec-color-primary, #1a56db);
	color: #fff;
}

/*
 * D5 (Design-Offensive, Auftrag Abschnitt 2H: "Touren und Aktivitaeten",
 * "Destinationen").
 */
/* E3 (Design-Offensive IV) - identisches Prinzip wie
 * .rhektec-el-accommodation-card oben. */
.rhektec-el-tour-card {
	display: block;
	background: #fff;
	border-radius: var(--rhektec-radius-lg, 16px);
	border: 1px solid rgba(15, 23, 42, 0.08);
	overflow: hidden;
}
.rhektec-el-tour-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.rhektec-el-tour-card__content {
	padding: var(--rhektec-spacing-md, 16px);
}
.rhektec-el-tour-card__meta {
	margin: 0 0 var(--rhektec-spacing-xs, 4px);
	font-size: var(--rhektec-font-size-small, 13px);
	color: var(--rhektec-color-primary, #1a56db);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.rhektec-el-tour-card__title {
	margin: 0 0 var(--rhektec-spacing-xs, 4px);
	font-family: var(--rhektec-font-heading, inherit);
}
.rhektec-el-tour-card__description {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	color: var(--rhektec-color-muted, #6b7280);
}
.rhektec-el-tour-card__price {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	font-weight: 600;
}
.rhektec-el-tour-card__button {
	display: inline-block;
	text-decoration: none;
	font-weight: 600;
	color: var(--rhektec-color-primary, #1a56db);
}

/*
 * D5 (Design-Offensive, Auftrag Abschnitt 2H/2J: "Oeffnungszeiten").
 */
.rhektec-el-opening-hours {
	width: 100%;
	border-collapse: collapse;
}
.rhektec-el-opening-hours__heading {
	text-align: left;
	font-weight: 600;
	font-family: var(--rhektec-font-heading, inherit);
	margin-bottom: var(--rhektec-spacing-sm, 8px);
	caption-side: top;
}
.rhektec-el-opening-hours th,
.rhektec-el-opening-hours td {
	padding: var(--rhektec-spacing-xs, 4px) var(--rhektec-spacing-sm, 8px);
	border-bottom: 1px solid var(--rhektec-color-border, #e5e7eb);
	text-align: left;
	font-weight: normal;
}
.rhektec-el-opening-hours__today {
	font-weight: 600;
	color: var(--rhektec-color-primary, #1a56db);
}

/*
 * D5 (Design-Offensive, Auftrag Abschnitt 2H: "Standort und Anfahrt").
 * Bewusst kein Karten-/iframe-Styling (siehe LocationElement-Klassendoc).
 */
.rhektec-el-location__heading {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
	font-family: var(--rhektec-font-heading, inherit);
}
.rhektec-el-location__address {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
}
.rhektec-el-location__phone {
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
}
.rhektec-el-location__phone a,
.rhektec-el-location__directions {
	color: var(--rhektec-color-primary, #1a56db);
	text-decoration: none;
	font-weight: 600;
}
.rhektec-el-location__directions {
	display: inline-block;
	margin-top: var(--rhektec-spacing-xs, 4px);
}

/*
 * D5-Nachtrag: TeamMemberElement um optionale Kontaktfelder erweitert
 * (Auftrag Abschnitt 2H: "Ansprechpartner"/"Kontaktkarten").
 */
.rhektec-el-team-member__phone,
.rhektec-el-team-member__email {
	margin: 0;
	font-size: var(--rhektec-font-size-small, 13px);
}
.rhektec-el-team-member__phone a,
.rhektec-el-team-member__email a {
	color: var(--rhektec-color-primary, #1a56db);
	text-decoration: none;
}

/*
 * D6 (Design-Offensive, Auftrag Abschnitt 2G: "Navigation", "Dropdown
 * Navigation", "Mobile Navigation"). Siehe NavigationElement/
 * navigation.js-Klassendoc fuer die progressive-enhancement-Begruendung
 * (Einklapp-Regeln greifen nur unter ".rhektec-el-navigation--js").
 */
.rhektec-el-navigation {
	display: block;
}

.rhektec-el-navigation__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

.rhektec-el-navigation__toggle-icon,
.rhektec-el-navigation__toggle-icon::before,
.rhektec-el-navigation__toggle-icon::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
}

.rhektec-el-navigation__toggle-icon::before {
	content: '';
	margin-bottom: 5px;
}

.rhektec-el-navigation__toggle-icon::after {
	content: '';
	margin-top: 5px;
}

.rhektec-el-navigation__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rhektec-el-navigation__menu a {
	text-decoration: none;
	color: inherit;
}

.rhektec-el-navigation__menu .current-menu-item > a,
.rhektec-el-navigation__menu a[aria-current="page"] {
	font-weight: 600;
}

/* Dropdown (verschachtelte Menuepunkte) - WordPress' eigener
 * Walker_Nav_Menu gibt verschachtelte <ul class="sub-menu"> bereits
 * automatisch aus (keine eigene Walker-Klasse noetig). Hover UND
 * :focus-within (Tastaturfokus auf einem Link INNERHALB des Submenues
 * haelt es offen, nicht nur Hover auf dem Elternlink) - voll
 * tastaturbedienbar ohne zusaetzliches JavaScript. */
.rhektec-el-navigation__menu li {
	position: relative;
}

.rhektec-el-navigation__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: none;
	flex-direction: column;
	gap: 8px;
	min-width: 180px;
	margin: 0;
	padding: var(--rhektec-spacing-sm, 8px);
	list-style: none;
	background: var(--rhektec-color-background, #ffffff);
	border-radius: var(--rhektec-radius-sm, 4px);
	box-shadow: var(--rhektec-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.rhektec-el-navigation__menu li:hover > .sub-menu,
.rhektec-el-navigation__menu li:focus-within > .sub-menu {
	display: flex;
}

.rhektec-el-navigation__menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

/* Mobile (Auftrag: "Mobile Navigation") - Hamburger-Taste nur auf
 * schmalen Breiten sichtbar; die Einklapp-Regeln selbst greifen NUR
 * unter ".rhektec-el-navigation--js" (siehe navigation.js) - ohne
 * JavaScript bleibt das Menue auf Mobile unveraendert als sichtbare
 * Liste bestehen. */
@media (max-width: 768px) {
	.rhektec-el-navigation__toggle {
		display: flex;
	}

	.rhektec-el-navigation--js .rhektec-el-navigation__menu {
		display: none;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.rhektec-el-navigation--js.rhektec-el-navigation--open .rhektec-el-navigation__menu {
		display: flex;
	}

	/* Auf Mobile sind verschachtelte Menuepunkte immer sichtbar (keine
	 * zweite Ebene Tap-zum-Ausklappen) - sobald das Hauptmenue offen ist,
	 * steht ohnehin genug vertikaler Platz zur Verfuegung. */
	.rhektec-el-navigation__menu .sub-menu {
		position: static;
		display: flex;
		box-shadow: none;
		padding-left: var(--rhektec-spacing-md, 16px);
	}
}

/*
 * D6 (Design-Offensive, Auftrag Abschnitt 2G: "Breadcrumbs").
 */
.rhektec-el-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--rhektec-font-size-small, 13px);
	color: var(--rhektec-color-muted, #6b7280);
}
.rhektec-el-breadcrumbs__item:not(:last-child)::after {
	content: '\203a';
	margin-left: 6px;
}
.rhektec-el-breadcrumbs__item a {
	color: var(--rhektec-color-muted, #6b7280);
	text-decoration: none;
}
.rhektec-el-breadcrumbs__item a:hover {
	text-decoration: underline;
}
.rhektec-el-breadcrumbs__item [aria-current="page"] {
	color: var(--rhektec-color-text, #111827);
}

/*
 * D6 (Design-Offensive, Auftrag Abschnitt 2G: "Social Links").
 */
.rhektec-el-social-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rhektec-spacing-sm, 8px);
}
.rhektec-el-social-links--empty {
	display: none;
}
.rhektec-el-social-links__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--rhektec-color-surface, #f8fafc);
	color: var(--rhektec-color-text, #111827);
	text-decoration: none;
}
.rhektec-el-social-links__link:hover {
	background: var(--rhektec-color-primary, #1a56db);
	color: #ffffff;
}

/*
 * D6 (Design-Offensive, Auftrag Abschnitt 2G: "Back to Top"). Siehe
 * BackToTopElement-Klassendoc - bewusst dauerhaft sichtbar statt
 * Ein-/Ausblenden erst nach dem Scrollen (dafuer waere JS noetig).
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.rhektec-el-back-to-top {
	position: fixed;
	right: var(--rhektec-spacing-md, 16px);
	bottom: var(--rhektec-spacing-md, 16px);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--rhektec-color-primary, #1a56db);
	color: #ffffff;
	text-decoration: none;
	font-size: 18px;
	box-shadow: var(--rhektec-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

/*
 * D6 (Design-Offensive, Auftrag Abschnitt 2G: "Announcement Bar",
 * "Contact Bar"). Vier feste Varianten nutzen dieselben Farbtokens wie
 * AlertElement.
 */
.rhektec-el-announcement-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--rhektec-spacing-sm, 8px);
	padding: var(--rhektec-spacing-xs, 4px) var(--rhektec-spacing-md, 16px);
	text-align: center;
	font-size: var(--rhektec-font-size-small, 13px);
}
.rhektec-el-announcement-bar--info {
	background: var(--rhektec-color-primary, #1a56db);
	color: #ffffff;
}
.rhektec-el-announcement-bar--success {
	background: var(--rhektec-color-success, #15803d);
	color: #ffffff;
}
.rhektec-el-announcement-bar--warning {
	background: var(--rhektec-color-warning, #b45309);
	color: #ffffff;
}
.rhektec-el-announcement-bar--danger {
	background: var(--rhektec-color-danger, #b91c1c);
	color: #ffffff;
}
.rhektec-el-announcement-bar__link {
	color: #ffffff;
	text-decoration: underline;
	font-weight: 600;
	white-space: nowrap;
}

/*
 * D4 (Design-Offensive II, Auftrag Abschnitt 2 "Kontakt": Kontaktformular
 * mit echtem Versand). Erste echte Formularfeld-Styles im Theme (bislang
 * nur Button-/Link-Styling) - bewusst schlicht und an den bestehenden
 * Card/CTA-Box-Tokens ausgerichtet statt eines eigenen Formular-
 * Designsystems.
 */
.rhektec-el-contact-form {
	display: block;
	padding: var(--rhektec-spacing-lg, 32px);
	border-radius: var(--rhektec-radius-lg, 16px);
}
.rhektec-el-contact-form__heading {
	margin: 0 0 var(--rhektec-spacing-xs, 4px);
	font-family: var(--rhektec-font-heading, inherit);
}
.rhektec-el-contact-form__intro {
	margin: 0 0 var(--rhektec-spacing-md, 16px);
	color: var(--rhektec-color-muted, #6b7280);
}
.rhektec-el-contact-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--rhektec-spacing-sm, 8px);
	max-width: 480px;
}
.rhektec-el-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}
.rhektec-el-contact-form__field label {
	font-weight: 600;
	font-size: 0.875rem;
}
.rhektec-el-contact-form__field input,
.rhektec-el-contact-form__field textarea {
	font: inherit;
	padding: 10px 12px;
	border: 1px solid var(--rhektec-color-muted, #6b7280);
	border-radius: var(--rhektec-radius-sm, 4px);
	background: #fff;
	color: var(--rhektec-color-text, #111827);
}
.rhektec-el-contact-form__field input:focus-visible,
.rhektec-el-contact-form__field textarea:focus-visible {
	outline: 2px solid var(--rhektec-color-primary, #1a56db);
	outline-offset: 1px;
}
.rhektec-el-contact-form__field textarea {
	resize: vertical;
}
.rhektec-el-contact-form__button {
	align-self: flex-start;
	margin-top: var(--rhektec-spacing-xs, 4px);
	display: inline-block;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	padding: 12px 20px;
	border: none;
	border-radius: var(--rhektec-radius-md, 8px);
	background: var(--rhektec-color-primary, #1a56db);
	color: #fff;
}
.rhektec-el-contact-form__button:disabled {
	opacity: 0.6;
	cursor: default;
}
@media (prefers-reduced-motion: no-preference) {
	.rhektec-el-contact-form__button {
		transition: background-color var(--rhektec-transition-fast, 0.15s) ease;
	}
}
.rhektec-el-contact-form__button:hover:not(:disabled) {
	background: var(--rhektec-color-primary-hover, #1543ad);
}
/*
 * Honeypot (siehe ContactFormElement-Klassendoc): per Position ausserhalb
 * des sichtbaren Bereichs versteckt statt `display:none`/`visibility:
 * hidden` - einfache Bots ueberspringen oft gezielt genau diese beiden
 * Eigenschaften, eine Positionierung ausserhalb des Viewports umgehen sie
 * seltener. `aria-hidden="true"` (bereits im Markup) haelt es zusaetzlich
 * aus dem Zugriffsbaum fuer Screenreader-Nutzer heraus.
 */
.rhektec-el-contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.rhektec-el-contact-form__success {
	padding: 12px 16px;
	border-radius: var(--rhektec-radius-sm, 4px);
	background: var(--rhektec-color-success, #15803d);
	color: #fff;
}
.rhektec-el-contact-form__error {
	margin-top: var(--rhektec-spacing-sm, 8px);
	padding: 12px 16px;
	border-radius: var(--rhektec-radius-sm, 4px);
	background: var(--rhektec-color-danger, #b91c1c);
	color: #fff;
}

/*
 * P6 (Release-Paket + Kunden-Template "Landeselternverband Salzburg",
 * Auftrag Teil 3 "Aktuelles": "echter WordPress-Blog-Aufbau... saubere
 * Typografie und lesbare Zeilenlaengen... Pagination"). Styling fuer die
 * beiden neuen Block-Templates templates/home.html (Beitragsuebersicht,
 * via Einstellungen > Lesen > "Beitragsseite") und templates/single.html
 * (Einzelbeitrag) - beide nutzen ausschliesslich WordPress-Core-Bloecke
 * (wp:query/wp:post-title/...), kein RhekTec-Tree-Inhalt (Auftrag: "nutze
 * einen ECHTEN WordPress-Blog-Aufbau" statt des Builders), aber dieselben
 * Design-System-Variablen wie jedes rhektec-el-*-Element, damit beide
 * Seitentypen optisch zur selben Website gehoeren.
 */
.rhektec-blog-page__title {
	font-family: var(--rhektec-font-heading, inherit);
	font-size: clamp(2.2rem, 4.5vw, 3.2rem);
	margin: 0 0 var(--rhektec-spacing-lg, 32px);
}

.rhektec-blog-grid__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rhektec-spacing-lg, 32px);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1024px) {
	.rhektec-blog-grid__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.rhektec-blog-grid__list {
		grid-template-columns: 1fr;
	}
}

.rhektec-blog-card {
	display: flex;
	flex-direction: column;
	background: var(--rhektec-color-surface, #ffffff);
	border: 1px solid var(--rhektec-color-border, #e5e7eb);
	border-radius: var(--rhektec-radius-lg, 16px);
	overflow: hidden;
}

.rhektec-blog-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin: 0;
}

.rhektec-blog-card__date {
	display: block;
	margin: var(--rhektec-spacing-md, 16px) var(--rhektec-spacing-md, 16px) 0;
	font-size: 0.875rem;
	color: var(--rhektec-color-muted, #6b7280);
}

.rhektec-blog-card__title {
	margin: var(--rhektec-spacing-xs, 4px) var(--rhektec-spacing-md, 16px) 0;
	font-family: var(--rhektec-font-heading, inherit);
	font-size: 1.3rem;
}

.rhektec-blog-card__title a {
	color: var(--rhektec-color-text, #111827);
	text-decoration: none;
}

.rhektec-blog-card__excerpt {
	flex: 1;
	margin: var(--rhektec-spacing-sm, 8px) var(--rhektec-spacing-md, 16px) 0;
	color: var(--rhektec-color-muted, #6b7280);
	line-height: 1.65;
}

.rhektec-blog-card__more {
	display: inline-block;
	margin: var(--rhektec-spacing-sm, 8px) var(--rhektec-spacing-md, 16px) var(--rhektec-spacing-md, 16px);
	color: var(--rhektec-color-primary, #1a56db);
	font-weight: 600;
	text-decoration: none;
}

.rhektec-blog-pagination {
	display: flex;
	justify-content: center;
	gap: var(--rhektec-spacing-md, 16px);
	margin-top: var(--rhektec-spacing-xl, 48px);
	font-family: var(--rhektec-font-body, inherit);
}

.rhektec-blog-pagination a,
.rhektec-blog-pagination span {
	padding: 8px 14px;
	border-radius: var(--rhektec-radius-sm, 4px);
	color: var(--rhektec-color-text, #111827);
	text-decoration: none;
}

.rhektec-blog-pagination .current {
	background: var(--rhektec-color-primary, #1a56db);
	color: #fff;
}

.rhektec-single-post {
	max-width: 760px;
}

.rhektec-single-post__terms {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rhektec-color-accent, #f59e0b);
	margin-bottom: var(--rhektec-spacing-sm, 8px);
}

.rhektec-single-post__terms a {
	color: inherit;
	text-decoration: none;
}

.rhektec-single-post__title {
	font-family: var(--rhektec-font-heading, inherit);
	font-size: clamp(2rem, 4.5vw, 3rem);
	margin: 0 0 var(--rhektec-spacing-sm, 8px);
}

.rhektec-single-post__date {
	color: var(--rhektec-color-muted, #6b7280);
}

.rhektec-single-post__image img {
	display: block;
	width: 100%;
	max-height: 480px;
	object-fit: cover;
	border-radius: var(--rhektec-radius-lg, 16px);
	margin: var(--rhektec-spacing-lg, 32px) 0;
}

.rhektec-single-post__body {
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--rhektec-color-text, #111827);
}

.rhektec-single-post__body p {
	margin: 0 0 var(--rhektec-spacing-md, 16px);
}

/* =====================================================================
 * Design-Korrektur Landeselternverband (Frontend-Review Desktop+Mobile)
 *
 * Bewusst am ENDE der Datei: alle Regeln hier greifen die URSACHEN der
 * gefundenen Darstellungsfehler an (nicht nur Token-Werte) und gelten
 * auch fuer bereits in der Datenbank gespeicherte Header/Footer-/Seiten-
 * Baeume, weil sie ueber Klassen der Template-Teile
 * (.rhektec-site-header/-footer) und Modul-Klassen greifen und per-Node-
 * Inline-Bloecke des Renderers (Spezifitaet 0-1-0, spaeter im Dokument)
 * dort, wo ein Kunde bewusst etwas einstellt, weiterhin gewinnen.
 * ===================================================================== */

/* --- 1) Grundrhythmus: Template-Teile ohne Fremdabstand, Row-Gap-Default,
 *        keine doppelte Container-Polsterung ------------------------------ */
.wp-site-blocks > .wp-block-template-part,
.wp-site-blocks > main {
	margin-block: 0;
}

.rhektec-site__content {
	margin-block: 0;
}

/* Zeilen ohne eigenen Gap hatten Spalten/Karten Kante an Kante
 * (:where() = Spezifitaet 0, jeder per-Node-Gap ueberschreibt es). */
:where(.rhektec-el-row) {
	gap: var(--rhektec-row-gap, 24px);
}

/* Section (contained) + Row (contained) addierten ihr 24px-Seiten-
 * padding und die 1180px-Begrenzung doppelt: Inhalt sass 24px weiter
 * innen als Header/Footer. Eine verschachtelte Container-Ebene fuegt
 * keine zweite Polsterung hinzu. */
.rhektec-layout-contained > .rhektec-layout-contained,
.rhektec-el-column > .rhektec-layout-contained {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Vertikaler Seitenrhythmus: 96/72/56px je Section ergab 192px (Desktop)
 * leere Flaeche zwischen zwei Abschnitten. */
.rhektec-el-section {
	padding-top: 72px;
	padding-bottom: 72px;
}

@media (max-width: 1024px) {
	.rhektec-el-section {
		padding-top: 60px;
		padding-bottom: 60px;
	}
}

@media (max-width: 640px) {
	.rhektec-el-section {
		padding-top: 44px;
		padding-bottom: 44px;
	}
}

.rhektec-el-section:has(> .rhektec-el-row > .rhektec-el-column > .rhektec-el-hero) {
	padding-top: 0;
	padding-bottom: 0;
}

/* --- 2) Typografie: Zeilenhoehe/Groessen der Ueberschriften ----------- */
.rhektec-el-heading,
.rhektec-el-card__heading,
.rhektec-el-icon-box__heading,
.rhektec-el-hero__heading {
	line-height: 1.12;
	font-weight: 400;
}

/* :where() haelt die Spezifitaet bei 0-1-0 - ein im Builder bewusst
 * gesetzter Wert (per-Node-Block, spaeter im Dokument) gewinnt weiterhin. */
.rhektec-el-heading:where(h3) { font-size: var(--rhektec-font-size-h3, 28px); }
.rhektec-el-heading:where(h4) { font-size: var(--rhektec-font-size-h4, 20px); }
.rhektec-el-heading:where(h5) { font-size: var(--rhektec-font-size-h5, 18px); }
.rhektec-el-heading:where(h6) { font-size: var(--rhektec-font-size-h6, 15px); }

.rhektec-el-heading:where(h3, h4, h5, h6) {
	letter-spacing: 0.01em;
}

/* Lange deutsche Komposita (z. B. "Gruendungsversammlung") duerfen die
 * Nachbarspalte nicht ueberlagern. */
.rhektec-el-heading,
.rhektec-el-card__heading,
.rhektec-el-icon-box__heading {
	overflow-wrap: anywhere;
	hyphens: auto;
}

.rhektec-el-card__heading {
	font-size: 1.375rem;
	margin: 0 0 8px;
}

/* --- 3) Zweispaltige Text/Bild-Zeilen: vertikal mittig, mehr Luft ------ */
.rhektec-el-row:has(> .rhektec-el-column > .rhektec-el-image) {
	align-items: center;
	gap: 56px;
}

@media (max-width: 1024px) {
	.rhektec-el-row:has(> .rhektec-el-column > .rhektec-el-image) {
		gap: 32px;
	}
}

.rhektec-el-column > .rhektec-el-image:not(.rhektec-el-image--empty) {
	width: 100%;
	object-fit: cover;
	border-radius: var(--rhektec-radius-md, 8px);
}

/* --- 4) Buttons: einheitliche Groesse, Ausrichtung und Abstaende ------ */
.rhektec-el-button,
.rhektec-el-hero__button,
.rhektec-el-cta-box__button,
.rhektec-el-card__button,
.rhektec-el-image-text__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 28px;
	border: 2px solid transparent;
	border-radius: var(--rhektec-radius-md, 8px);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
}

.rhektec-el-button {
	background: var(--rhektec-color-primary, #1a56db);
	border-color: var(--rhektec-color-primary, #1a56db);
	color: #fff;
}

.rhektec-el-button:hover {
	background: var(--rhektec-color-primary-hover, #1543ad);
	border-color: var(--rhektec-color-primary-hover, #1543ad);
}

.rhektec-el-button--secondary {
	background: var(--rhektec-color-secondary, #0f172a);
	border-color: var(--rhektec-color-secondary, #0f172a);
}

.rhektec-el-button--outline {
	background: transparent;
	border-color: var(--rhektec-color-primary, #1a56db);
	color: var(--rhektec-color-primary, #1a56db);
}

.rhektec-el-button--outline:hover {
	background: var(--rhektec-color-primary, #1a56db);
	border-color: var(--rhektec-color-primary, #1a56db);
	color: #fff;
}

.rhektec-el-button--ghost {
	background: transparent;
	border-color: transparent;
}

.rhektec-el-button--sm {
	min-height: 40px;
	padding: 8px 18px;
	font-size: 0.9375rem;
}

.rhektec-el-button--lg {
	min-height: 56px;
	padding: 16px 36px;
	font-size: 1.125rem;
}

/* Hero: zweiter Button bekommt dieselbe Rahmenstaerke wie der erste. */
.rhektec-el-hero__button--secondary {
	box-shadow: none;
	border-color: currentColor;
}

/* Nebeneinanderliegende Buttons: einheitlicher Abstand. Das bisherige
 * per-Node-"gap" war nur gesetzt, wenn jemand das Design-Tab beruehrt
 * hatte - Seiten aus der Section Library hatten keinen Abstand. */
.rhektec-el-button-group,
.rhektec-el-hero__buttons,
.rhektec-el-cta-box__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.rhektec-el-hero__buttons {
	margin-top: var(--rhektec-spacing-md, 16px);
}

/* Zentrierter Hero: Buttons mittig, wie Ueberschrift und Text. */
.rhektec-el-hero:not(.rhektec-el-hero--left):not(.rhektec-el-hero--split) .rhektec-el-hero__buttons {
	justify-content: center;
}

@media (max-width: 480px) {
	.rhektec-el-button-group,
	.rhektec-el-hero__buttons {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Hero: heller Text auch ohne gespeichertes "text_color" (Overlay-/
 * Farbwerte fehlen bei per Installer gespeicherten, nicht ueber das
 * Design-Tab gelaufenen Baeumen). */
.rhektec-el-hero {
	color: #ffffff;
}

.rhektec-el-hero--image .rhektec-el-hero__heading,
.rhektec-el-hero .rhektec-el-hero__heading {
	color: inherit;
}

/* --- 5) Icon-Kacheln: ruhig, linksbuendig, eine Flaeche, ein Akzent ---- */
.rhektec-el-row:has(> .rhektec-el-column > .rhektec-el-icon-box) {
	gap: 24px;
}

.rhektec-el-section:has(.rhektec-el-icon-box) {
	gap: 24px;
}

.rhektec-el-column > .rhektec-el-icon-box {
	flex: 1 1 auto;
}

.rhektec-el-icon-box,
.rhektec-el-icon-box.rhektec-el-icon-box--stacked {
	align-items: flex-start;
	gap: 0;
	padding: 32px 28px;
	text-align: left;
	background: var(--rhektec-color-surface, #f8fafc);
	border: 1px solid var(--rhektec-color-border, #e5e7eb);
	border-radius: var(--rhektec-radius-md, 8px);
	box-shadow: none;
}

.rhektec-el-icon-box.rhektec-el-icon-box--inline {
	flex-direction: row;
	gap: 20px;
}

.rhektec-el-icon-box:hover {
	box-shadow: none;
	transform: none;
	border-color: var(--rhektec-color-accent, #f59e0b);
}

.rhektec-el-icon-box .rhektec-el-icon-box__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	margin: 0 0 20px;
	padding: 0;
	box-sizing: border-box;
	font-size: 28px;
	line-height: 1;
	color: var(--rhektec-color-primary, #1a56db);
	background: color-mix(in srgb, var(--rhektec-color-primary, #1a56db) 10%, #ffffff);
	border-radius: var(--rhektec-radius-md, 8px);
}

.rhektec-el-icon-box .rhektec-el-icon-box__icon::before {
	width: auto;
	height: auto;
	font-size: inherit;
	line-height: 1;
}

.rhektec-el-icon-box--inline .rhektec-el-icon-box__icon {
	margin: 0;
}

.rhektec-el-icon-box .rhektec-el-icon-box__heading {
	margin: 0 0 8px;
	font-size: 1.625rem;
	letter-spacing: 0.01em;
	color: var(--rhektec-color-primary, #1a56db);
}

.rhektec-el-icon-box .rhektec-el-icon-box__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--rhektec-color-muted, #6b7280);
}

/* --- 6) Karten: gleiche Fläche/Rundung/Rand wie die Kacheln ----------- */
.rhektec-el-card {
	border-radius: var(--rhektec-radius-md, 8px);
}

.rhektec-el-card--bordered {
	border-color: var(--rhektec-color-border, #e5e7eb);
	padding: 24px;
}

.rhektec-el-card:hover {
	box-shadow: none;
	transform: none;
}

.rhektec-el-card--elevated:hover {
	box-shadow: var(--rhektec-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
}

.rhektec-el-column > .rhektec-el-card {
	flex: 1 1 auto;
}

/* --- 7) Header: volle Breite, Inhalt buendig zum Seiten-Container ------ */
.rhektec-site-header {
	position: relative;
	z-index: 20;
	background: var(--rhektec-color-background, #ffffff);
	border-bottom: 1px solid var(--rhektec-color-border, #e5e7eb);
}

.rhektec-site-header .rhektec-el-section {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.rhektec-site-header .rhektec-el-section > .rhektec-el-row {
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--rhektec-content-width, 1180px);
	margin: 0 auto;
	padding: 14px 24px;
	gap: 32px;
}

.rhektec-site-header .rhektec-el-section > .rhektec-el-row > .rhektec-el-column {
	flex: 0 0 auto;
	width: auto;
	align-items: flex-start;
}

.rhektec-site-header .rhektec-el-section > .rhektec-el-row > .rhektec-el-column:last-child {
	flex: 1 1 auto;
	align-items: flex-end;
}

/* Logo: die im Builder gesetzte Breite (Bild > Design > Breite) gilt - frueher
 * begrenzten feste max-width/max-height-Werte hier jede Groesse auf 240x64.
 * :where() haelt den Standardwert (240px) ohne Spezifitaet, damit jede
 * Node-Breite ihn ueberschreibt. */
:where(.rhektec-site-header .rhektec-el-image) {
	width: 240px;
}

.rhektec-site-header .rhektec-el-image {
	max-width: 100%;
	height: auto;
	border-radius: 0;
	object-fit: contain;
}

.rhektec-site-header .rhektec-el-navigation__menu {
	gap: 8px 28px;
}

.rhektec-site-header .rhektec-el-navigation__menu a {
	display: inline-block;
	padding: 8px 0;
	border-bottom: 2px solid transparent;
	font-weight: 500;
	color: var(--rhektec-color-text, #111827);
}

.rhektec-site-header .rhektec-el-navigation__menu a:hover,
.rhektec-site-header .rhektec-el-navigation__menu .current-menu-item > a,
.rhektec-site-header .rhektec-el-navigation__menu a[aria-current="page"] {
	color: var(--rhektec-color-primary, #1a56db);
	border-bottom-color: var(--rhektec-color-accent, #f59e0b);
}

.rhektec-site-header .rhektec-el-navigation__menu .current-menu-item > a {
	font-weight: 700;
}

@media (max-width: 768px) {
	.rhektec-site-header .rhektec-el-section > .rhektec-el-row {
		padding: 12px 24px;
		gap: 16px;
	}

	.rhektec-site-header .rhektec-el-section > .rhektec-el-row.rhektec-stack-mobile > .rhektec-el-column {
		flex-basis: auto !important;
		width: auto;
	}

	.rhektec-site-header .rhektec-el-image {
		max-width: min(100%, 62vw);
	}

	.rhektec-site-header .rhektec-el-navigation {
		position: static;
	}

	/* Aufgeklapptes Menue als volle-Breite-Flaeche unter dem Header. */
	.rhektec-site-header .rhektec-el-navigation--js .rhektec-el-navigation__menu {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 30;
		padding: 8px 24px 20px;
		background: var(--rhektec-color-background, #ffffff);
		border-bottom: 1px solid var(--rhektec-color-border, #e5e7eb);
	}

	.rhektec-site-header .rhektec-el-navigation__menu a {
		display: block;
		padding: 10px 0;
	}
}

/* --- 8) Footer: volle Bildschirmbreite, Inhalt zentriert im Container -- */
.rhektec-site-footer {
	--lesv-footer-bg: var(--rhektec-color-primary, #1c4870);
	--lesv-footer-bar: color-mix(in srgb, var(--rhektec-color-primary, #1c4870) 72%, #000000);
	--lesv-footer-heading: color-mix(in srgb, var(--rhektec-color-accent, #c68a2e) 70%, #ffffff);
	margin-top: 0;
	background: var(--lesv-footer-bg);
	border-top: 4px solid var(--rhektec-color-accent, #c68a2e);
	color: rgba(255, 255, 255, 0.88);
}

.rhektec-site-footer .rhektec-el-section {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
}

.rhektec-site-footer .rhektec-el-section > .rhektec-el-row {
	width: 100%;
	max-width: var(--rhektec-content-width, 1180px);
	margin: 0 auto;
	padding: 56px 24px 48px;
	gap: 48px;
	background: transparent;
}

.rhektec-site-footer .rhektec-el-section > .rhektec-el-row > .rhektec-el-column {
	flex: 1 1 0;
	align-items: flex-start;
}

.rhektec-site-footer .rhektec-el-heading,
.rhektec-site-footer .rhektec-el-card__heading {
	margin: 0 0 16px;
	font-size: 1.5rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--lesv-footer-heading) !important;
}

.rhektec-site-footer .rhektec-el-card,
.rhektec-site-footer .rhektec-el-card--minimal {
	padding: 0;
	background: transparent;
	color: inherit;
}

.rhektec-site-footer .rhektec-el-card__list {
	margin: 0;
	padding: 0;
	list-style: none;
	color: inherit !important;
}

.rhektec-site-footer .rhektec-el-card__list li {
	margin: 0 0 8px;
	line-height: 1.5;
}

.rhektec-site-footer .rhektec-el-text {
	margin: 0;
	color: rgba(255, 255, 255, 0.78) !important;
}

.rhektec-site-footer a {
	color: #ffffff;
	text-decoration: none;
}

.rhektec-site-footer a:hover {
	color: var(--lesv-footer-heading);
	text-decoration: underline;
}

.rhektec-site-footer .rhektec-el-column > .rhektec-el-row {
	max-width: none;
	padding: 0;
	gap: 20px;
	flex-wrap: wrap;
	background: transparent;
}

.rhektec-site-footer .rhektec-el-column > .rhektec-el-row > .rhektec-el-column {
	flex: 0 0 auto;
}

.rhektec-site-footer .rhektec-el-image,
.rhektec-site-footer .rhektec-el-column > .rhektec-el-image:not(.rhektec-el-image--empty) {
	width: 128px;
	max-width: 100%;
	height: auto;
	border-radius: var(--rhektec-radius-sm, 4px);
	object-fit: contain;
}

/* Spalte mit Ueberschrift + mehreren Bildern (z. B. Partnerlogos): Bilder nebeneinander. */
.rhektec-site-footer .rhektec-el-column:has(> .rhektec-el-image) {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	align-content: flex-start;
	gap: 16px 20px;
}

.rhektec-site-footer .rhektec-el-column:has(> .rhektec-el-image) > .rhektec-el-heading {
	flex: 0 0 100%;
	margin-bottom: 0;
}

/* Untere Leiste: eigene Vollbreiten-Flaeche, Inhalt im Container. */
.rhektec-site-footer .rhektec-el-section > .rhektec-el-row:last-child:not(:first-child) {
	max-width: none;
	margin: 0;
	padding: 18px 24px;
	background: var(--lesv-footer-bar);
}

.rhektec-site-footer .rhektec-el-section > .rhektec-el-row:last-child:not(:first-child) > .rhektec-el-column {
	flex: 0 1 auto;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 32px;
	width: 100%;
	max-width: calc(var(--rhektec-content-width, 1180px) - 48px);
	margin: 0 auto;
}

.rhektec-site-footer .rhektec-el-section > .rhektec-el-row:last-child:not(:first-child) .rhektec-el-text {
	order: 2;
	font-size: 0.875rem;
}

.rhektec-site-footer .rhektec-el-navigation {
	order: 1;
}

.rhektec-site-footer .rhektec-el-navigation__toggle {
	display: none;
}

.rhektec-site-footer .rhektec-el-navigation--js .rhektec-el-navigation__menu {
	display: flex;
	flex-direction: row;
	width: auto;
}

.rhektec-site-footer .rhektec-el-navigation__menu {
	justify-content: flex-start !important;
	gap: 8px 24px;
	font-size: 0.9375rem;
}

@media (max-width: 640px) {
	/* Partnerlogos bleiben auch auf dem Smartphone nebeneinander. */
	.rhektec-site-footer .rhektec-el-column > .rhektec-el-row.rhektec-stack-mobile {
		flex-direction: row;
		gap: 12px;
	}

	.rhektec-site-footer .rhektec-el-column > .rhektec-el-row.rhektec-stack-mobile > .rhektec-el-column {
		flex: 0 0 auto !important;
		width: auto;
	}

	.rhektec-site-footer .rhektec-el-image,
	.rhektec-site-footer .rhektec-el-column > .rhektec-el-image:not(.rhektec-el-image--empty) {
		width: 96px;
	}

	.rhektec-site-footer .rhektec-el-section > .rhektec-el-row {
		padding: 40px 24px 32px;
		gap: 32px;
	}

	.rhektec-site-footer .rhektec-el-section > .rhektec-el-row:last-child:not(:first-child) {
		padding: 16px 24px;
	}
}

/* --- 9) Formular-Platzhalter + Contact Form 7 -------------------------- */
/* Platzhalter-Flaeche fuer den spaeteren Contact-Form-7-Shortcode. */
.rhektec-form-slot {
	margin: 0;
	padding: 32px;
	background: var(--rhektec-color-surface, #f8fafc);
	border: 1px dashed var(--rhektec-color-border, #e5e7eb);
	border-radius: var(--rhektec-radius-md, 8px);
	color: var(--rhektec-color-muted, #6b7280);
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Sobald Contact Form 7 echtes Markup liefert, entfaellt die Platzhalter-
 * Optik (Rahmen/Flaeche) - das Formular bringt seine eigene Gestaltung. */
.rhektec-form-slot:has(.wpcf7) {
	padding: 0;
	background: transparent;
	border: 0;
}

.rhektec-form-slot .wpcf7,
.rhektec-el-contact-form,
.wpcf7 {
	color: var(--rhektec-color-text, #111827);
}

.wpcf7 form {
	margin: 0;
}

.wpcf7 form p {
	margin: 0 0 20px;
}

.wpcf7 label,
.rhektec-el-contact-form__field label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--rhektec-color-text, #111827);
}

.wpcf7-form-control-wrap {
	display: block;
	margin-top: 6px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	margin: 0;
	padding: 12px 14px;
	font: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--rhektec-color-text, #111827);
	background: #ffffff;
	border: 1px solid color-mix(in srgb, var(--rhektec-color-border, #e5e7eb) 55%, var(--rhektec-color-muted, #6b7280));
	border-radius: var(--rhektec-radius-md, 8px);
	box-shadow: none;
	appearance: none;
	-webkit-appearance: none;
}

.wpcf7 select {
	padding-right: 40px;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.wpcf7 textarea {
	min-height: 160px;
	resize: vertical;
}

.wpcf7 input:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover {
	border-color: var(--rhektec-color-muted, #6b7280);
}

.wpcf7 input:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 textarea:focus-visible {
	outline: 2px solid var(--rhektec-color-primary, #1a56db);
	outline-offset: 1px;
	border-color: var(--rhektec-color-primary, #1a56db);
}

.wpcf7 ::placeholder {
	color: var(--rhektec-color-muted, #6b7280);
	opacity: 0.8;
}

.wpcf7 .wpcf7-list-item {
	display: block;
	margin: 0 0 8px;
}

.wpcf7 .wpcf7-list-item label,
.wpcf7 .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
}

.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--rhektec-color-primary, #1a56db);
}

.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px;
	font: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	background: var(--rhektec-color-primary, #1a56db);
	border: 2px solid var(--rhektec-color-primary, #1a56db);
	border-radius: var(--rhektec-radius-md, 8px);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover {
	background: var(--rhektec-color-primary-hover, #1543ad);
	border-color: var(--rhektec-color-primary-hover, #1543ad);
}

.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 button[type="submit"]:focus-visible {
	outline: 2px solid var(--rhektec-color-accent, #f59e0b);
	outline-offset: 2px;
}

.wpcf7 .wpcf7-spinner {
	margin: 0 0 0 12px;
	vertical-align: middle;
}

.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 0.875rem;
	color: var(--rhektec-color-danger, #b91c1c);
}

.wpcf7 input.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid {
	border-color: var(--rhektec-color-danger, #b91c1c);
}

.wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 18px;
	font-size: 0.9375rem;
	background: var(--rhektec-color-surface, #f8fafc);
	border: 1px solid var(--rhektec-color-border, #e5e7eb);
	border-left-width: 4px;
	border-radius: var(--rhektec-radius-md, 8px);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-left-color: var(--rhektec-color-success, #15803d);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-left-color: var(--rhektec-color-danger, #b91c1c);
}

/* Zwei Felder nebeneinander: <div class="rhektec-form-row"> um zwei
 * <p> im CF7-Formular-Editor legen. */
.wpcf7 .rhektec-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 20px;
}

@media (max-width: 640px) {
	.wpcf7 .rhektec-form-row {
		grid-template-columns: 1fr;
	}

	.rhektec-form-slot {
		padding: 24px 20px;
	}
}

/* Eingebautes Formular-Modul: dieselben Felder/Buttons wie CF7. */
.rhektec-el-contact-form__field input,
.rhektec-el-contact-form__field textarea,
.rhektec-el-contact-form__field select {
	min-height: 48px;
	border: 1px solid var(--rhektec-color-border, #e5e7eb);
	border-radius: var(--rhektec-radius-md, 8px);
	font: inherit;
}

.rhektec-el-contact-form__button {
	min-height: 48px;
	padding: 12px 28px;
	border-radius: var(--rhektec-radius-md, 8px);
}

/* --- 10) Abschnitte gliedern, Text/Bild-Abstand (Review-Runde 2) ------ */
/* Zu viel durchgehendes Weiss: jeder zweite Abschnitt bekommt eine
 * vollbreite Flaechenfarbe (box-shadow + clip-path statt Wrapper, damit
 * auch bereits gespeicherte Seiten ohne Umbau profitieren). */
body.rhektec-brand-lesv .rhektec-el-section:nth-of-type(even):not(:has(.rhektec-el-hero)) {
	background: var(--rhektec-color-surface, #f8fafc);
	box-shadow: 0 0 0 100vmax var(--rhektec-color-surface, #f8fafc);
	clip-path: inset(0 -100vmax);
}

body.rhektec-brand-lesv .rhektec-el-section:nth-of-type(even) .rhektec-el-icon-box,
body.rhektec-brand-lesv .rhektec-el-section:nth-of-type(even) .rhektec-el-card--bordered {
	background: #ffffff;
}

.rhektec-el-section {
	padding-top: 64px;
	padding-bottom: 64px;
}

@media (max-width: 1024px) {
	.rhektec-el-section {
		padding-top: 52px;
		padding-bottom: 52px;
	}
}

@media (max-width: 640px) {
	.rhektec-el-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

.rhektec-el-section:has(> .rhektec-el-row > .rhektec-el-column > .rhektec-el-hero) {
	padding-top: 0;
	padding-bottom: 0;
}

/* Text neben Bild: deutlich mehr Luft dazwischen. */
.rhektec-el-row:has(> .rhektec-el-column > .rhektec-el-image) {
	gap: clamp(40px, 6vw, 88px);
}

/* Footer-Logozeile bleibt eng (nicht von der Text/Bild-Regel erfasst). */
.rhektec-site-footer .rhektec-el-column > .rhektec-el-row.rhektec-el-row {
	gap: 20px;
}

/* --- 11) Blog (Aktuelles, Vorschau, Einzelbeitrag) --------------------- */
/* Die Beitragsseite zeigte als H1 den Titel des ERSTEN Beitrags
 * ("Hallo Welt!") - templates/home.html nutzt jetzt eine feste Ueberschrift.
 * WordPress' Flow-Layout setzt zusaetzlich margin-block-start auf jedes
 * Listenelement ausser dem ersten: die Karten der ersten Reihe standen
 * dadurch auf unterschiedlicher Hoehe. */
.rhektec-blog-page {
	padding-top: 56px;
	padding-bottom: 72px;
}

.rhektec-blog-page__title {
	margin: 0 0 40px;
	font-weight: 400;
	line-height: 1.1;
}

.rhektec-blog-grid__list {
	gap: 32px;
	align-items: stretch;
}

.rhektec-blog-grid__list > li,
.rhektec-blog-grid__list > .wp-block-post {
	margin: 0;
	display: flex;
}

.rhektec-blog-grid__list .rhektec-blog-card {
	width: 100%;
	height: 100%;
	margin: 0;
	background: #ffffff;
	border-radius: var(--rhektec-radius-md, 8px);
	box-shadow: none;
}

.rhektec-blog-grid__list .rhektec-blog-card > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.rhektec-blog-card .rhektec-blog-card__date {
	margin: 24px 24px 0;
}

.rhektec-blog-card .rhektec-blog-card__title {
	margin: 8px 24px 0;
	font-weight: 400;
	line-height: 1.15;
	font-size: 1.625rem;
}

.rhektec-blog-card .rhektec-blog-card__excerpt {
	margin: 12px 24px 0;
}

.rhektec-blog-card .rhektec-blog-card__excerpt p {
	margin: 0;
}

.rhektec-blog-card .rhektec-blog-card__more {
	margin: 16px 24px 24px;
}

.rhektec-blog-card:not(:has(.rhektec-blog-card__image)) {
	padding-top: 0;
}

.rhektec-blog-card:hover {
	border-color: var(--rhektec-color-accent, #f59e0b);
}

/* Home-Vorschau ("Aktuelles"-Block): gleiche Karte wie die Beitragsseite. */
.rhektec-el-blog-preview {
	gap: 24px;
	align-items: stretch;
	width: 100%;
}

.rhektec-el-blog-preview__item {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rhektec-color-border, #e5e7eb);
	border-radius: var(--rhektec-radius-md, 8px);
	background: #ffffff;
}

.rhektec-el-blog-preview__image {
	height: auto;
	aspect-ratio: 3 / 2;
}

.rhektec-el-blog-preview__title {
	margin: 20px 24px 0;
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1.15;
}

.rhektec-el-blog-preview__excerpt {
	margin: 12px 24px 24px;
	line-height: 1.6;
}

.rhektec-el-blog-preview__item:not(:has(.rhektec-el-blog-preview__excerpt)) .rhektec-el-blog-preview__title {
	margin-bottom: 24px;
}

.rhektec-el-blog-preview__item:hover {
	box-shadow: none;
	transform: none;
	border-color: var(--rhektec-color-accent, #f59e0b);
}

/* Einzelbeitrag */
.rhektec-single-post {
	padding-top: 56px;
	padding-bottom: 72px;
}

.rhektec-single-post__title {
	font-weight: 400;
	line-height: 1.1;
}

.rhektec-single-post__image img {
	border-radius: var(--rhektec-radius-md, 8px);
}

/* wpautop erzeugt um den Menue-Toggle ein leeres <p> mit Abstand, das
 * Navigation und Logo vertikal gegeneinander verschiebt. */
.rhektec-el-navigation > p {
	display: none;
}

/* =====================================================================
 * 12) Marken-Look: roter Faden aus dem Logo (Lila / Tuerkis / Gold)
 *     Eltern = Lila (primary), Lernende = Tuerkis (tertiary),
 *     Lehrkraefte = Gold (accent). Puzzleteile als Bildmotiv:
 *     images/puzzle-{purple,teal,gold,trio}.svg
 * ===================================================================== */
/* Nur aktiv, wenn die Website als "lesv" markiert ist (body.rhektec-brand-lesv, siehe functions.php). */


/* --- Typografie: Lato wie im Logo, fett statt schmal-versal ---------- */
body.rhektec-brand-lesv .rhektec-el-heading,
body.rhektec-brand-lesv .rhektec-el-card__heading,
body.rhektec-brand-lesv .rhektec-el-icon-box__heading,
body.rhektec-brand-lesv .rhektec-el-hero__heading,
body.rhektec-brand-lesv .rhektec-blog-card__title,
body.rhektec-brand-lesv .rhektec-el-blog-preview__title,
body.rhektec-brand-lesv .rhektec-blog-page__title,
body.rhektec-brand-lesv .rhektec-single-post__title {
	font-family: var(--rhektec-font-heading, inherit);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: none;
	color: var(--rhektec-color-secondary, #2a1a4a);
}

body.rhektec-brand-lesv h1.rhektec-el-heading,
body.rhektec-brand-lesv .rhektec-el-hero__heading,
body.rhektec-brand-lesv .rhektec-blog-page__title {
	font-weight: 800;
	font-size: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
	letter-spacing: -0.02em;
}

body.rhektec-brand-lesv h2.rhektec-el-heading {
	font-weight: 800;
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
	letter-spacing: -0.015em;
}

body.rhektec-brand-lesv .rhektec-el-hero__heading {
	color: inherit;
}

body.rhektec-brand-lesv .rhektec-el-icon-box .rhektec-el-icon-box__heading,
body.rhektec-brand-lesv .rhektec-blog-card .rhektec-blog-card__title,
body.rhektec-brand-lesv .rhektec-el-blog-preview__title,
body.rhektec-brand-lesv .rhektec-el-card__heading {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--rhektec-color-secondary, #2a1a4a);
}

body.rhektec-brand-lesv .rhektec-blog-card .rhektec-blog-card__title a {
	color: inherit;
}

/* --- Buttons: runde Pillen, Gold auf dunklem Hero ------------------- */
body.rhektec-brand-lesv .rhektec-el-button,
body.rhektec-brand-lesv .rhektec-el-hero__button,
body.rhektec-brand-lesv .rhektec-el-cta-box__button,
body.rhektec-brand-lesv .rhektec-el-card__button,
body.rhektec-brand-lesv .rhektec-el-image-text__button,
body.rhektec-brand-lesv .wpcf7 input[type="submit"],
body.rhektec-brand-lesv .wpcf7 button[type="submit"] {
	border-radius: 999px;
	padding-left: 32px;
	padding-right: 32px;
}

body.rhektec-brand-lesv .rhektec-el-hero .rhektec-el-hero__button:not(.rhektec-el-hero__button--secondary) {
	background: var(--rhektec-color-accent, #f0c04c);
	border-color: var(--rhektec-color-accent, #f0c04c);
	color: var(--rhektec-color-secondary, #2a1a4a);
}

body.rhektec-brand-lesv .rhektec-el-hero .rhektec-el-hero__button:not(.rhektec-el-hero__button--secondary):hover {
	background: var(--rhektec-color-accent-hover, #e0aa2a);
	border-color: var(--rhektec-color-accent-hover, #e0aa2a);
}

/* Hero-Bild ohne gespeichertes Overlay: Marken-Aubergine statt weisser
 * Schrift auf hellem Foto. */
body.rhektec-brand-lesv .rhektec-el-hero[style*="url("]:not([style*="gradient"]) {
	background-color: #7a6a9a;
	background-blend-mode: multiply;
}

/* --- Dreifarbiger Streifen (Logo-Farben) an Header und Footer -------- */
body.rhektec-brand-lesv .rhektec-site-header::before,
body.rhektec-brand-lesv .rhektec-site-footer::before {
	content: '';
	display: block;
	height: 6px;
	background: linear-gradient(90deg, #723cc2 0 33.34%, #12a8a6 33.34% 66.67%, #f0c04c 66.67% 100%);
}

/* --- Icon-Kacheln: Puzzleteil-Icons in Lila / Tuerkis / Gold ---------- */
body.rhektec-brand-lesv .rhektec-el-column:nth-child(3n+1) > .rhektec-el-icon-box {
	--tile-c: #723cc2;
	--tile-icon: url('images/puzzle-purple.svg');
	--tile-glyph: #ffffff;
}

body.rhektec-brand-lesv .rhektec-el-column:nth-child(3n+2) > .rhektec-el-icon-box {
	--tile-c: #12a8a6;
	--tile-icon: url('images/puzzle-teal.svg');
	--tile-glyph: #ffffff;
}

body.rhektec-brand-lesv .rhektec-el-column:nth-child(3n) > .rhektec-el-icon-box {
	--tile-c: #f0c04c;
	--tile-icon: url('images/puzzle-gold.svg');
	--tile-glyph: #2a1a4a;
}

body.rhektec-brand-lesv .rhektec-el-icon-box,
body.rhektec-brand-lesv .rhektec-el-icon-box.rhektec-el-icon-box--stacked {
	--tile-c: #723cc2;
	--tile-icon: url('images/puzzle-purple.svg');
	--tile-glyph: #ffffff;
	padding: 28px 28px 32px;
	background: #ffffff;
	border: 1px solid var(--rhektec-color-border, #e3daf2);
	border-top: 5px solid var(--tile-c);
	border-radius: var(--rhektec-radius-md, 12px);
}

body.rhektec-brand-lesv .rhektec-el-section:nth-of-type(odd) .rhektec-el-icon-box {
	background: var(--rhektec-color-surface, #f6f2fc);
}

body.rhektec-brand-lesv .rhektec-el-icon-box:hover {
	border-color: var(--rhektec-color-border, #e3daf2);
	border-top-color: var(--tile-c);
	box-shadow: var(--rhektec-shadow-md, 0 4px 12px rgba(42, 26, 74, 0.1));
}

body.rhektec-brand-lesv .rhektec-el-icon-box .rhektec-el-icon-box__icon {
	flex: 0 0 68px;
	width: 68px;
	height: 68px;
	margin: 0 0 16px;
	padding-top: 12px;
	font-size: 26px;
	color: var(--tile-glyph);
	background: var(--tile-icon) center / contain no-repeat;
	border-radius: 0;
}

body.rhektec-brand-lesv .rhektec-el-icon-box--inline .rhektec-el-icon-box__icon {
	margin: 0;
}

body.rhektec-brand-lesv .rhektec-el-icon-box .rhektec-el-icon-box__text {
	color: var(--rhektec-color-muted, #5e5873);
}

/* --- Puzzle-Motiv an Text/Bild-Zeilen -------------------------------- */
body.rhektec-brand-lesv .rhektec-el-row:has(> .rhektec-el-column > .rhektec-el-image) {
	position: relative;
}

body.rhektec-brand-lesv .rhektec-el-row:has(> .rhektec-el-column > .rhektec-el-image)::after {
	content: '';
	position: absolute;
	right: 16px;
	bottom: -34px;
	z-index: 2;
	width: 132px;
	height: 120px;
	background: url('images/puzzle-trio.svg') center / contain no-repeat;
	pointer-events: none;
}

@media (max-width: 640px) {
	body.rhektec-brand-lesv .rhektec-el-row:has(> .rhektec-el-column > .rhektec-el-image)::after {
		width: 96px;
		height: 88px;
		bottom: -26px;
	}
}

/* --- Footer in Marken-Aubergine -------------------------------------- */
body.rhektec-brand-lesv .rhektec-site-footer {
	--lesv-footer-bg: var(--rhektec-color-secondary, #2a1a4a);
	--lesv-footer-bar: var(--rhektec-color-secondary-hover, #1d1135);
	--lesv-footer-heading: var(--rhektec-color-accent, #f0c04c);
	border-top: 0;
}

body.rhektec-brand-lesv .rhektec-site-footer .rhektec-el-heading,
body.rhektec-brand-lesv .rhektec-site-footer .rhektec-el-card__heading {
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.rhektec-brand-lesv .rhektec-site-footer .rhektec-el-image {
	border-radius: var(--rhektec-radius-sm, 6px);
	background: rgba(255, 255, 255, 0.08);
}

/* --- Karten/Formulare passend ---------------------------------------- */
body.rhektec-brand-lesv .rhektec-el-card,
body.rhektec-brand-lesv .rhektec-blog-grid__list .rhektec-blog-card,
body.rhektec-brand-lesv .rhektec-el-blog-preview__item {
	border-color: var(--rhektec-color-border, #e3daf2);
	border-radius: var(--rhektec-radius-md, 12px);
}

body.rhektec-brand-lesv .rhektec-blog-card__more,
body.rhektec-brand-lesv .rhektec-el-heading a {
	color: var(--rhektec-color-primary, #723cc2);
}

body.rhektec-brand-lesv .rhektec-form-slot {
	border-color: var(--rhektec-color-primary, #723cc2);
	background: var(--rhektec-color-surface, #f6f2fc);
}

body.rhektec-brand-lesv .rhektec-site-footer .rhektec-el-row::after,
body.rhektec-brand-lesv .rhektec-site-header .rhektec-el-row::after {
	display: none;
}

body.rhektec-brand-lesv .rhektec-el-hero[style*="url("]:not([style*="gradient"]) {
	background-color: #9585b8;
}

/* Schrittueberschriften (6 Spalten) duerfen ohne Silbenbruch umbrechen. */
body.rhektec-brand-lesv .rhektec-el-heading:where(h4) {
	font-size: 1.125rem;
}

/* =====================================================================
 * 13) Feinschliff aller Seiten im Marken-Look
 * ===================================================================== */

/* Puzzle-Siegel nur, wenn das Bild das LETZTE Element seiner Spalte ist
 * (sonst ueberlagert es Text darunter, z. B. auf der Kontaktseite). */
body.rhektec-brand-lesv .rhektec-el-row:has(> .rhektec-el-column > .rhektec-el-image)::after {
	display: none;
}

body.rhektec-brand-lesv .rhektec-site__content .rhektec-el-row:has(> .rhektec-el-column > .rhektec-el-image:last-child)::after {
	display: block;
}

/* Bilder neben Text: auf dem Smartphone nicht bildschirmfuellend hoch. */
@media (max-width: 640px) {
	body.rhektec-brand-lesv .rhektec-el-column > .rhektec-el-image:not(.rhektec-el-image--empty) {
		max-height: 340px;
	}
}

/* Karten ohne Rahmen (Linkliste, Download-Hinweise u. a.) im Hauptinhalt
 * als Kacheln mit Farbrand - gleiche Sprache wie die Icon-Kacheln. */
body.rhektec-brand-lesv .rhektec-site__content .rhektec-el-column > .rhektec-el-card--minimal {
	flex: 1 1 auto;
	padding: 24px 28px 28px;
	background: #ffffff;
	border: 1px solid var(--rhektec-color-border, #e3daf2);
	border-top: 5px solid #723cc2;
	border-radius: var(--rhektec-radius-md, 12px);
}

body.rhektec-brand-lesv .rhektec-site__content .rhektec-el-column:nth-child(3n+2) > .rhektec-el-card--minimal {
	border-top-color: #12a8a6;
}

body.rhektec-brand-lesv .rhektec-site__content .rhektec-el-column:nth-child(3n) > .rhektec-el-card--minimal {
	border-top-color: #f0c04c;
}

body.rhektec-brand-lesv .rhektec-site__content .rhektec-el-card--minimal .rhektec-el-card__list {
	margin: 8px 0 0;
	padding-left: 1.1em;
	color: var(--rhektec-color-muted, #5e5873);
	line-height: 1.7;
}

body.rhektec-brand-lesv .rhektec-site__content .rhektec-el-card--minimal .rhektec-el-card__list li::marker {
	color: var(--rhektec-color-primary, #723cc2);
}

body.rhektec-brand-lesv .rhektec-site__content .rhektec-el-card--minimal:hover {
	box-shadow: var(--rhektec-shadow-md, 0 4px 12px rgba(42, 26, 74, 0.1));
}

/* Nummerierte Schritte: Zahl im Puzzleteil (Lila/Tuerkis/Gold im Wechsel). */
body.rhektec-brand-lesv .rhektec-el-column > .rhektec-el-heading:where(h3):has(+ .rhektec-el-heading) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin: 0 0 12px;
	padding-top: 10px;
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1;
	color: #ffffff;
	background: url('images/puzzle-purple.svg') center / contain no-repeat;
}

body.rhektec-brand-lesv .rhektec-el-column:nth-child(3n+2) > .rhektec-el-heading:where(h3):has(+ .rhektec-el-heading) {
	background-image: url('images/puzzle-teal.svg');
}

body.rhektec-brand-lesv .rhektec-el-column:nth-child(3n) > .rhektec-el-heading:where(h3):has(+ .rhektec-el-heading) {
	color: var(--rhektec-color-secondary, #2a1a4a);
	background-image: url('images/puzzle-gold.svg');
}

/* Eingebautes Formular-Modul: Titel wie die uebrigen H2. */
body.rhektec-brand-lesv .rhektec-el-contact-form__heading {
	margin: 0 0 8px;
	font-family: var(--rhektec-font-heading, inherit);
	font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--rhektec-color-secondary, #2a1a4a);
}

body.rhektec-brand-lesv .rhektec-el-contact-form__intro {
	margin: 0 0 24px;
	color: var(--rhektec-color-muted, #5e5873);
}

/* Beitragskategorie/Datum im Einzelbeitrag: lesbar statt Gold auf Weiss. */
body.rhektec-brand-lesv .rhektec-single-post__terms,
body.rhektec-brand-lesv .rhektec-single-post__terms a {
	color: var(--rhektec-color-primary, #723cc2);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Seiteneinleitungen (zentrierte Titel, z. B. Musterstatuten/Linkliste):
 * Lesebreite begrenzen, mehr Luft vor dem Inhalt. */
body.rhektec-brand-lesv .rhektec-el-column > .rhektec-el-text {
	max-width: 68ch;
}

body.rhektec-brand-lesv .rhektec-el-column[style*="center"] > .rhektec-el-text,
body.rhektec-brand-lesv .rhektec-el-hero .rhektec-el-hero__subheading {
	margin-left: auto;
	margin-right: auto;
}

/* Download-/Hinweiskarten mit Rahmen: ebenfalls Farbrand im Wechsel. */
body.rhektec-brand-lesv .rhektec-site__content .rhektec-el-column > .rhektec-el-card--bordered {
	border-top: 5px solid #723cc2;
}

body.rhektec-brand-lesv .rhektec-site__content .rhektec-el-column:nth-child(3n+2) > .rhektec-el-card--bordered {
	border-top-color: #12a8a6;
}

body.rhektec-brand-lesv .rhektec-site__content .rhektec-el-column:nth-child(3n) > .rhektec-el-card--bordered {
	border-top-color: #f0c04c;
}

/* RhekTec-Logo ("Website by") in der unteren Footer-Leiste. */
.rhektec-site-footer .rhektec-el-section > .rhektec-el-row:last-child:not(:first-child) a:has(> .rhektec-el-image) {
	order: 2;
	display: inline-flex;
	align-items: center;
	margin-left: -12px;
}

.rhektec-site-footer .rhektec-el-section > .rhektec-el-row:last-child:not(:first-child) .rhektec-el-image {
	width: auto;
	max-width: 132px;
	max-height: 44px;
	background: none;
	border-radius: 0;
	object-fit: contain;
}

.rhektec-site-footer .rhektec-el-section > .rhektec-el-row:last-child:not(:first-child) > .rhektec-el-column {
	justify-content: flex-start;
}

.rhektec-site-footer .rhektec-el-section > .rhektec-el-row:last-child:not(:first-child) .rhektec-el-text {
	margin-left: auto;
}

/* "Website by rhektec.at": Link dezent, beim Hover Gold. */
.rhektec-site-footer .rhektec-el-section > .rhektec-el-row:last-child:not(:first-child) .rhektec-el-text a {
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

.rhektec-site-footer .rhektec-el-section > .rhektec-el-row:last-child:not(:first-child) .rhektec-el-text a:hover {
	color: var(--lesv-footer-heading);
	text-decoration: underline;
}

/* =========================================================================
 * Landeselternverband: groesseres Logo (quadratisch, Schrift sonst nicht
 * lesbar) und nicht abgeschnittene Footer-Ueberschriften.
 * Logo-Groesse aendern: in "Zusaetzliches CSS" z. B.
 *   body.rhektec-brand-lesv { --lesv-logo-size: 150px; }
 * ========================================================================= */
body.rhektec-brand-lesv {
	--lesv-logo-size: 150px;
}

body.rhektec-brand-lesv .rhektec-site-header .rhektec-el-image {
	width: var(--lesv-logo-size);
	max-width: none;
	height: auto;
}

body.rhektec-brand-lesv .rhektec-site-header .rhektec-el-section > .rhektec-el-row {
	padding-top: 10px;
	padding-bottom: 10px;
}

@media (max-width: 768px) {
	body.rhektec-brand-lesv .rhektec-site-header .rhektec-el-image {
		width: min(var(--lesv-logo-size), 104px);
	}
}

/* Die Card schnitt mit overflow:hidden den linken Rand des fetten "V" ab. */
.rhektec-site-footer .rhektec-el-card,
.rhektec-site-footer .rhektec-el-card--minimal {
	overflow: visible;
}

.rhektec-site-footer .rhektec-el-card__heading,
.rhektec-site-footer .rhektec-el-heading {
	padding-left: 2px;
	overflow: visible;
}

/* =========================================================================
 * Builder 0.4: Foto-Module, Preistabelle, Sprachumschalter, freies Formular
 * (alles generisch - gilt fuer jede Website)
 * ========================================================================= */

/* --- Bild / Galerie: Seitenverhaeltnis, Hover, Bildunterschrift ---------- */
.rhektec-ratio-1-1  { --rhektec-img-ratio: 1 / 1; }
.rhektec-ratio-4-3  { --rhektec-img-ratio: 4 / 3; }
.rhektec-ratio-3-2  { --rhektec-img-ratio: 3 / 2; }
.rhektec-ratio-3-4  { --rhektec-img-ratio: 3 / 4; }
.rhektec-ratio-2-3  { --rhektec-img-ratio: 2 / 3; }
.rhektec-ratio-16-9 { --rhektec-img-ratio: 16 / 9; }

.rhektec-el-image {
	aspect-ratio: var(--rhektec-img-ratio, auto);
}

.rhektec-el-image[style*="object-fit"],
img.rhektec-el-image {
	object-fit: cover;
}

.rhektec-el-gallery > .rhektec-el-image {
	aspect-ratio: var(--rhektec-img-ratio, 4 / 3);
	border-radius: var(--rhektec-gallery-radius, 0);
}

.rhektec-el-gallery--masonry > .rhektec-el-image {
	aspect-ratio: var(--rhektec-img-ratio, auto);
}

.rhektec-hover-zoom > .rhektec-el-image,
.rhektec-el-image.rhektec-hover-zoom,
.rhektec-hover-lift > .rhektec-el-image,
.rhektec-el-image.rhektec-hover-lift {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.rhektec-hover-zoom > .rhektec-el-image:hover,
.rhektec-el-image.rhektec-hover-zoom:hover {
	transform: scale(1.04);
	position: relative;
	z-index: 1;
}

.rhektec-hover-lift > .rhektec-el-image:hover,
.rhektec-el-image.rhektec-hover-lift:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
	position: relative;
	z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
	.rhektec-hover-zoom > .rhektec-el-image,
	.rhektec-hover-lift > .rhektec-el-image,
	.rhektec-el-image.rhektec-hover-zoom,
	.rhektec-el-image.rhektec-hover-lift {
		transition: none;
		transform: none !important;
	}
}

.rhektec-el-image--lightbox {
	cursor: zoom-in;
}

figure.rhektec-el-figure {
	margin: 0;
	aspect-ratio: auto;
}

.rhektec-el-figure__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--rhektec-img-ratio, auto);
	object-fit: cover;
}

.rhektec-el-figure__caption {
	margin-top: 0.5em;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--rhektec-color-muted, #6b7280);
}

/* --- Preistabelle (Pricing > "Als Preistabelle darstellen") -------------- */
.rhektec-el-pricing--table {
	align-items: stretch;
	text-align: left;
	padding: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--rhektec-pr-border, var(--rhektec-color-border, #d1d5db));
	border-radius: 0;
	transform: none;
}

.rhektec-el-pricing--table .rhektec-el-pricing__head {
	padding: 14px 20px 12px;
	text-align: center;
	background: var(--rhektec-pr-header-bg, var(--rhektec-color-secondary, #111827));
	color: var(--rhektec-pr-header-text, #fff);
}

.rhektec-el-pricing--table .rhektec-el-pricing__name,
.rhektec-el-pricing--table .rhektec-el-pricing__subtitle {
	margin: 0;
	color: inherit;
}

.rhektec-el-pricing--table .rhektec-el-pricing__name {
	font-size: 1.4rem;
	font-weight: 400;
}

.rhektec-el-pricing--table .rhektec-el-pricing__subtitle {
	font-size: 0.8rem;
}

.rhektec-el-pricing--table .rhektec-el-pricing__price {
	margin: 0;
	padding: 18px 12px;
	text-align: center;
	font-size: clamp(2.6rem, 6vw, 3.6rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--rhektec-pr-price, var(--rhektec-color-primary, #1a56db));
	border-bottom: 1px solid var(--rhektec-pr-border, var(--rhektec-color-border, #d1d5db));
}

.rhektec-el-pricing--table .rhektec-el-pricing__features {
	margin: 0;
	padding: 18px 22px 22px;
	list-style: none;
}

.rhektec-el-pricing--table .rhektec-el-pricing__features li {
	position: relative;
	padding: 0 0 0 20px;
	margin: 0 0 12px;
	border: 0;
	font-size: 0.875rem;
	color: var(--rhektec-color-muted, #6b7280);
}

.rhektec-el-pricing--table .rhektec-el-pricing__features li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rhektec-pr-price, var(--rhektec-color-primary, #1a56db));
}

/* --- Sprachumschalter ---------------------------------------------------- */
.rhektec-el-lang {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.rhektec-el-lang__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
	opacity: 0.8;
	line-height: 1;
}

.rhektec-el-lang__item:hover,
.rhektec-el-lang__item:focus-visible,
.rhektec-el-lang__item.is-current {
	opacity: 1;
}

.rhektec-el-lang__flag {
	display: block;
	width: var(--rhektec-flag-width, 24px);
	height: auto;
	aspect-ratio: 3 / 2;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.rhektec-el-lang__item.is-current .rhektec-el-lang__flag {
	box-shadow: 0 0 0 2px var(--rhektec-color-primary, #1a56db);
}

/* --- Formular (frei) ----------------------------------------------------- */
.rhektec-el-custom-form .rhektec-el-contact-form__form {
	max-width: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px 20px;
	align-items: flex-start;
}

.rhektec-form > * {
	flex: 1 0 100%;
}

.rhektec-form__group {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 20px;
}

.rhektec-form__group > * {
	flex: 1 0 100%;
}

.rhektec-form .rhektec-form__field--half {
	flex: 1 1 calc(50% - 10px);
	min-width: 220px;
}

.rhektec-form__title {
	margin: 18px 0 0;
	font-family: var(--rhektec-font-heading, inherit);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.rhektec-form__note {
	margin: 0;
	font-size: 0.9rem;
	color: var(--rhektec-color-muted, #6b7280);
}

.rhektec-form__req {
	color: var(--rhektec-color-danger, #b91c1c);
}

.rhektec-form__field select {
	font: inherit;
	padding: 10px 12px;
	border: 1px solid var(--rhektec-color-muted, #6b7280);
	border-radius: var(--rhektec-radius-sm, 4px);
	background: #fff;
	color: var(--rhektec-color-text, #111827);
}

.rhektec-form__field--group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rhektec-form__label {
	font-weight: 600;
	font-size: 0.875rem;
}

.rhektec-form__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.rhektec-form__choice,
.rhektec-form__field--check label {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
	font-size: 0.95rem;
}

.rhektec-form__field--check {
	flex-direction: row;
}

.rhektec-form__field--check input,
.rhektec-form__choice input {
	width: auto;
	margin-top: 0.25em;
}

.rhektec-form .rhektec-el-contact-form__button {
	flex: 0 0 auto;
}

/* --- Karte (OpenStreetMap, Zwei-Klick) ----------------------------------- */
.rhektec-el-osm {
	position: relative;
	display: block;
	min-height: 360px;
	background: #e9eeea;
	overflow: hidden;
}

.rhektec-el-osm__consent {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	text-align: center;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%) 0 0 / 40px 40px,
		linear-gradient(225deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%) 0 0 / 40px 40px,
		#e4ebe5;
}

.rhektec-el-osm__consent[hidden] {
	display: none;
}

.rhektec-el-osm__address {
	margin: 0;
	font-weight: 700;
}

.rhektec-el-osm__notice {
	margin: 0;
	max-width: 46ch;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--rhektec-color-muted, #555);
}

.rhektec-el-osm__load {
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	padding: 11px 26px;
	border: 2px solid var(--rhektec-color-secondary, #262626);
	background: var(--rhektec-color-secondary, #262626);
	color: #fff;
}

.rhektec-el-osm__load:hover,
.rhektec-el-osm__load:focus-visible {
	background: var(--rhektec-color-primary, #1a56db);
	border-color: var(--rhektec-color-primary, #1a56db);
	color: var(--rhektec-color-secondary, #111);
}

.rhektec-el-osm__link {
	font-size: 0.85rem;
}

.rhektec-el-osm__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Lightbox: weicher, mit Zaehler, Beschriftung und Ladeanzeige ------- */
.rhektec-lightbox {
	background: rgba(10, 10, 10, 0.94);
	padding: 0;
}

.rhektec-lightbox--open {
	animation: rhektec-lb-fade 0.2s ease;
}

@keyframes rhektec-lb-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes rhektec-spin {
	to { transform: rotate(360deg); }
}

.rhektec-lightbox__figure {
	position: relative;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 92vw;
}

.rhektec-lightbox__image {
	max-width: 92vw;
	max-height: calc(100vh - 110px);
	box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.rhektec-lightbox--loading .rhektec-lightbox__image {
	opacity: 0;
	transform: scale(0.98);
}

.rhektec-lightbox__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 3px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	opacity: 0;
	animation: rhektec-spin 0.8s linear infinite;
}

.rhektec-lightbox--loading .rhektec-lightbox__spinner {
	opacity: 1;
}

.rhektec-lightbox__caption {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 10px 2px 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
}

.rhektec-lightbox__count {
	margin-left: auto;
	white-space: nowrap;
	opacity: 0.7;
}

.rhektec-lightbox__close,
.rhektec-lightbox__prev,
.rhektec-lightbox__next {
	z-index: 2;
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 640px) {
	.rhektec-lightbox__prev,
	.rhektec-lightbox__next {
		top: auto;
		bottom: 14px;
		transform: none;
	}

	.rhektec-lightbox__prev {
		left: 14px;
	}

	.rhektec-lightbox__next {
		right: 14px;
	}

	.rhektec-lightbox__image {
		max-height: calc(100vh - 150px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rhektec-lightbox--open,
	.rhektec-lightbox__image {
		animation: none;
		transition: none;
	}
}

/* Galerien: Bilder ohne Layout-Sprung nachladen, Masonry ruhiger */
.rhektec-el-gallery--masonry > .rhektec-el-image {
	display: block;
	background: rgba(0, 0, 0, 0.05);
	margin-bottom: var(--rhektec-gallery-gap, 8px);
}

.rhektec-el-gallery > .rhektec-el-image {
	cursor: pointer;
}

/* --- Impressum (Modul) --------------------------------------------------- */
.rhektec-el-imprint {
	max-width: 860px;
	margin: 0 auto;
	line-height: 1.7;
}

.rhektec-el-imprint__title {
	margin: 0 0 1.2em;
}

.rhektec-el-imprint__block {
	margin: 0 0 1.4em;
}

.rhektec-el-imprint__label {
	margin: 0 0 0.25em;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

.rhektec-el-imprint__block p {
	margin: 0 0 0.8em;
}

.rhektec-el-imprint__footer {
	margin: 2em 0 0;
	padding-top: 1em;
	border-top: 1px solid var(--rhektec-color-border, rgba(0, 0, 0, 0.15));
	font-size: 0.9rem;
}

/* --- Trumlinghof: Titelbild direkt unter der Kopfzeile (kein weißer Streifen) --- */
body.rhektec-brand-trumlinghof .tr-hero {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
}

body.rhektec-brand-trumlinghof .tr-hero .rhektec-el-hero__heading {
	display: none !important;
}

/* --- Trumlinghof: ausgeklapptes Handy-Menue lesbar (dunkel, helle Schrift) --- */
@media (max-width: 768px) {
	body.rhektec-brand-trumlinghof .rhektec-site-header .rhektec-el-navigation__menu {
		background: #262626 !important;
		padding: 8px 20px 16px;
		box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
		z-index: 50;
	}

	body.rhektec-brand-trumlinghof .rhektec-site-header .rhektec-el-navigation__menu a {
		color: #fff;
		display: block;
		padding: 10px 0;
	}

	body.rhektec-brand-trumlinghof .rhektec-site-header .rhektec-el-navigation__menu .current-menu-item > a {
		color: #6fe33c;
	}
}