/* SBS Containerservice – Design Tokens & Basiskomponenten
   Wird site-weit geladen. Nur sbs-*-Klassen, keine nackten Element-Selektoren
   außerhalb von :where()-Resets, damit nichts in bestehende Seiten hineinwirkt. */

:root {
	/* Flächen – genau fünf, jede Vollbreiten-Sektion bekommt genau eine davon */
	--surface-base: #f8f8f5;
	--surface-alt: #eef1f2;
	--surface-accent: #e2e8ea;
	--surface-card: #ffffff;
	--surface-dark: #081c3a;

	/* Akzente – nie als Flächenfarbe, nur Füllung/Rand/Badge/Glyph/Overline */
	--accent: #e35205;
	--accent-on-dark: #ff7a2e;
	--blue: #0d2a5c;

	/* Text */
	--text: #181716;
	--text-muted: #525b5e;
	--text-on-dark: #9aa4ab;
	/* Fuer Text auf Foto+Scrim: deutlich heller als --text-on-dark,
	   bewusst nicht Weiss (Kundenbefund 19.08.: Weiss war zu grell) */
	--text-on-photo: #e3e9ee;
	--text-inverse: #ffffff;

	/* Linien */
	--line: rgba(24, 23, 22, .13);
	--line-on-dark: rgba(255, 255, 255, .10);

	/* Status */
	--status-green: #2e9e4f;
	/* Formular-Tokens (Kundenbeschluesse 2026-08-20): status-red als
	   Gegenstueck zu status-green, nur fuer Fehlermeldungen; line-input
	   als kraeftigere Haarlinie der Eingabefelder - die 13% von --line
	   tragen auf Feldern nicht (Mockup-Reihe Kontakt-Formular v14). */
	--status-red: #b3352b;
	--line-input: rgba(24, 23, 22, .30);

	/* Zustandsfarben, eingefuehrt 10.08.2026 fuer Formularmeldungen.
	   Je Zustand ein Farbpaar: die kraeftige Farbe traegt Schrift, Rand und
	   Glyphe, die helle nur die Flaeche dahinter.

	   Warum nicht Orange: --accent ist die Handlungsfarbe und markiert genau
	   einen Aufruf je Ansicht (Kapitel 3e). Ein oranger Fehlerhinweis wuerde
	   mit dem Absende-Knopf um dieselbe Aufmerksamkeit ringen, und auf heller
	   Flaeche erreicht Orange als Textfarbe nur 3,60:1.

	   --status-info traegt bewusst denselben Wert wie --blue: ein Hinweis ist
	   kein eigener Zustand, sondern die Hausfarbe in ruhiger Rolle. */
	--status-error: #b42318;
	--status-error-bg: #fef3f2;
	--status-warning: #b54708;
	--status-warning-bg: #fffaeb;
	--status-success: #2e9e4f;
	--status-success-bg: #ecfdf3;
	--status-info: #0d2a5c;
	--status-info-bg: #eef1f2;

	/* Hero-Verlauf – der einzige zulässige Gradient */
	--hero-gradient: linear-gradient(180deg, #eef1f2 0%, #f8f8f5 65%);

	--font-display: 'Bebas Neue', sans-serif;
	--font-body: 'Inter', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-pill: 20px;

	/* Bauhöhe von Topbar + Header. Wird als scroll-padding gebraucht, damit
	   Sprungmarken nicht unter dem stehenbleibenden Header landen. Gemessen
	   am 2026-08-15, nach der Header-Verkleinerung fuer kleine Schirme:
	   153,7px ab 900px Breite; darunter ist die Topbar einzeilig (34px) und
	   der Block maximal 128,4px (bei 895px; 110,1px bei 375px). Werte
	   leicht großzügig. */
	--header-stack: 156px;

	--space-section-desktop: 96px;
	--space-section-mobile: 56px;
}

/* ---------- Resets (low specificity, never fight the cascade) ---------- */

:where(.sbs-eyebrow, .sbs-h1, .sbs-h2, .sbs-h3, .sbs-btn, .sbs-btn-ghost, .sbs-btn-text) {
	box-sizing: border-box;
}

:where(.sbs-card, .sbs-card *) {
	box-sizing: border-box;
}

/* Sprungmarken (#kontakt, #verfuegbar …) würden sonst unter dem
   stehenbleibenden Header landen. Die Admin-Leiste rechnet mit: Der
   Header liest sie in seinem top bereits ein - eingeloggt landeten
   Sprünge deshalb 32px zu tief, die Rubrik-Überschrift verschwand
   hinter dem Header (Kundenbefund 2026-08-16). Ausgeloggt ist die
   Variable leer, der calc ergibt den alten Wert. */
html {
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-stack));
}

@media (max-width: 900px) {
	:root {
		--header-stack: 132px;
	}
}

/* ---------- Typography ---------- */

/*
 * Das ".elementor" vor jeder Klasse ist tragend, nicht kosmetisch.
 *
 * Das Kit setzt ".elementor-kit-258 h1|h2|h3" — Spezifitaet (0,1,1). Eine
 * blosse Klasse (0,1,0) verliert dagegen, und zwar ueberall dort, wo die
 * Klasse DIREKT auf dem Tag sitzt — also in saemtlichen eigenen Widgets.
 * Durchgesetzt hat sich bis zum 2026-08-04 nur der Selektor fuer
 * Heading-Widgets, weil der mit (0,3,0) zufaellig hoch genug lag.
 *
 * Die Skala war dadurch weitgehend wirkungslos: Hero 30px statt bis 68,
 * Sektionstitel 20px statt bis 48, Kartentitel 18px statt bis 28. Aufgefallen
 * ist es erst, als eine einzelne Ueberschrift die Klasse bekam und dadurch
 * aus der Reihe sprang.
 *
 * Alle uebrigen Werte des Kits sind mit unseren identisch (Farbe #181716,
 * Bebas Neue, Gewicht 400, line-height 0.92em, letter-spacing 0.02em) — es
 * ging hier ausschliesslich um die Groesse.
 */
.elementor .sbs-h1,
.elementor .sbs-h2,
.elementor .sbs-h3,
.elementor .sbs-h1 .elementor-heading-title,
.elementor .sbs-h2 .elementor-heading-title,
.elementor .sbs-h3 .elementor-heading-title {
	font-family: var(--font-display);
	line-height: .92;
	letter-spacing: .02em;
	color: var(--text);
	margin: 0;
}

.elementor .sbs-h1,
.elementor .sbs-h1 .elementor-heading-title {
	font-size: clamp(38px, 5.2vw, 68px);
}

.elementor .sbs-h2,
.elementor .sbs-h2 .elementor-heading-title {
	font-size: clamp(32px, 4.2vw, 48px);
}

.elementor .sbs-h3,
.elementor .sbs-h3 .elementor-heading-title {
	font-size: clamp(22px, 2.6vw, 28px);
}

/*
 * Karten-Ueberschriften (Sortiment, Bestand, Leistungen, Referenzen,
 * Info-Liste): Inter 700, nicht Bebas.
 *
 * Auch hier ist das ".elementor" tragend — siehe den Block darueber. Die
 * Klasse sitzt direkt auf dem <h3>, also gewann bis zum 2026-08-04 das Kit
 * mit ".elementor-kit-258 h3" (0,1,1): alle 33 Kartentitel der Startseite
 * rendern in Bebas Neue 18px statt in Inter mit ihren eigenen Groessen. Weil
 * das Customizer-CSS zusaetzlich "font-weight:700!important" auflegt, war das
 * Kunstfett auf einer Schrift ohne fetten Schnitt — dieselbe Safari-Falle wie
 * bei der Hero-Ueberschrift.
 *
 * Die fuenf Groessenregeln weiter unten brauchen dasselbe Praefix, sonst
 * bleiben sie wirkungslos und das Kit setzt weiterhin ueberall 18px.
 */
.elementor .sbs-card-title {
	font-family: var(--font-body);
	font-weight: 700;
	line-height: 1.25;
	color: var(--text);
	margin: 0;
}

.sbs-eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 18px;
}

/* Die Schrägstriche in Akzent-Orange (Kundenauftrag 2026-08-26, aus
   dem Typseiten-Mockup uebernommen). Ornament, keine Beschriftung -
   die Kontrastregel "Orange darf umranden, nicht beschriften" bleibt
   eingehalten, der Eyebrow-Text selbst bleibt blau. */
.sbs-eyebrow::before {
	content: "// ";
	color: var(--accent);
}

/* Sonderfaelle der Seitenkoepfe bleiben, wie sie sind: Auf Foto, Scrim
   und dunkler Flaeche traegt der GANZE Eyebrow die helle
   On-Dark-Stufe (--accent-on-dark) - das dunklere --accent waere dort
   zu dunkel. Die Striche erben deshalb wieder die Kontextfarbe. */
.sbs-hero--foto .sbs-eyebrow::before,
.sbs-bkopf--foto .sbs-eyebrow::before,
.sbs-p2-kopf--scrim .sbs-eyebrow::before,
.sbs-eyebrow--dark::before {
	color: inherit;
}

/* Grau/Schwarz-Regel (Kundenbeschluss 28.08., To-Do 111): Fliesstexte,
   Leads und FAQ-Antworten tragen volles --text; gedeckt bleiben nur
   erklaerende Kartentexte (Ausnahmen direkt darunter) und Meta-Zeilen
   mit eigenen Regeln. Vorher stand die Basisklasse auf --text-muted. */
.sbs-text {
	font-family: var(--font-body);
	color: var(--text);
	line-height: 1.6;
	margin: 0;
}

/* Erklaerende Kartentexte unter starken Titeln bleiben gedeckt
   (Kundenentscheidung 28.08.: Familienregel der Kachelraster und
   der Leistungsliste). */
.sbs-text.sbs-tcard__text,
.sbs-text.sbs-rcard__text,
.sbs-text.sbs-manifest__text {
	color: var(--text-muted);
}

/*
 * Einleitungstext unter einer Seiten-H1 (Bestandsübersicht). Die Klasse
 * stand seit der Seitenanlage im Markup von 8765, hatte aber nie eine
 * Definition. Breite wie der Kopf der Entscheidungsweiche (.sbs-split-head,
 * 640px), Abstand wie der Sortiments-Kopf (14px).
 */
.sbs-intro-text {
	max-width: 640px;
	margin-top: 14px;
}

/* ---------- Buttons (CTA-Hierarchie: Orange > Blau-Outline > Textlink) ---------- */

.elementor .sbs-btn,
.elementor .sbs-btn-ghost,
.elementor .sbs-btn-text,
.elementor .e-loop-item .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Primär: Gebrauchtcontainer
   Rand liegt bewusst schon im Ruhezustand an (Akzentfarbe auf Akzentfläche,
   also unsichtbar) und das Padding ist um die Randstärke reduziert — sonst
   springt der Button beim Hover um 3px auf. */
.elementor .sbs-btn {
	background: var(--accent);
	color: var(--text-inverse);
	border: 1.5px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 11.5px 22.5px;
}

.elementor .sbs-btn:hover,
.elementor .sbs-btn:focus-visible {
	background: var(--surface-card);
	border-color: var(--accent);
	color: var(--accent);
}

/* Sekundär: individuelle Lösung aus dem Bestand */
.elementor .sbs-btn-ghost {
	background: transparent;
	color: var(--blue);
	border: 1.5px solid var(--blue);
	border-radius: var(--radius-sm);
	padding: 11.5px 22.5px;
}

.elementor .sbs-btn-ghost:hover,
.elementor .sbs-btn-ghost:focus-visible {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--text-inverse);
}

/* Tertiär: Neuanfertigung */
.elementor .sbs-btn-text {
	background: none;
	border: none;
	padding: 0;
	color: var(--blue);
	text-decoration: none;
}

.elementor .sbs-btn-text:hover,
.elementor .sbs-btn-text:focus-visible {
	color: var(--accent);
}

/* Native Elementor-Buttons tragen über das Kit die primäre (orange) Stufe.
   In Loop-Items ist das falsch: „Details“ führt nur in die Detailansicht und
   gehört auf die sekundäre Stufe — deshalb dieselben Werte wie .sbs-btn-ghost,
   die Typografie kommt aus dem gemeinsamen Block oben.

   Der eigentliche Gegner war nie das Kit, sondern die Instanz-CSS der
   Loop-Vorlage („.elementor-1578 .elementor-element-… .elementor-button“, vier
   Klassen). Sie hat Schriftgröße, Schrift, Radius, Schatten und Farben aus dem
   gekauften Kit diktiert und jede Regel hier überstimmt. Die Overrides sind am
   2026-08-04 aus der Vorlage entfernt worden; wer sie im Editor erneut setzt,
   hebelt diesen Block wieder aus. */
.elementor .e-loop-item .elementor-button {
	background: transparent;
	color: var(--blue);
	border: 1.5px solid var(--blue);
	border-radius: var(--radius-sm);
	padding: 11.5px 22.5px;
	box-shadow: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.elementor .e-loop-item .elementor-button:hover,
.elementor .e-loop-item .elementor-button:focus-visible {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--text-inverse);
	box-shadow: none;
	transform: none;
}

/* ---------- Native Elementor-Buttons und Links ---------- */

/*
 * Diese beiden Bloecke standen bis zum 2026-08-04 im Kit 258 und sind von
 * dort hierher gezogen worden — unveraendert in den Werten, geaendert nur in
 * der Reichweite.
 *
 * Das Kit haengte die Buttonoptik an den ELEMENTTYP <button> (zusammen mit
 * .elementor-button). Damit war jedes <button> im Dokument ein Kit-Button:
 * der Mega-Ausloeser, der Burger, die Filter-Pillen, die FAQ-Fragen und die
 * Bedienelemente der Bildergalerie. Alle mussten dagegen anarbeiten, und wer
 * eine Eigenschaft vergass, merkte es erst beim Hover — der Rand entsteht dort
 * erst und veraendert die Geometrie.
 *
 * Hier gilt die Optik nur noch fuer .elementor-button. Ein <button> ohne diese
 * Klasse bleibt ein neutrales Bedienelement.
 *
 * Die Werte sind bewusst identisch mit dem frueheren Kit-Stand, damit der
 * Umzug nichts am Aussehen aendert. Sie weichen von .sbs-btn ab (20px gegen
 * 13,5px, Padding 13,5/26,5 gegen 11,5/22,5) — diese Differenz bestand schon
 * vorher und ist nicht Teil dieses Umbaus.
 */
/* Der Elementname im Selektor ist noetig, nicht kosmetisch: Elementor bringt
   in frontend.min.css eigene Groessenklassen mit (".elementor-button.elementor-size-md"
   → 16px, Radius 4px, Padding 15/30). Die haben dieselbe Spezifitaet wie ein
   blosses ".elementor .elementor-button" und laden spaeter, gewinnen also.
   Bisher hat das niemand gemerkt, weil das Kit-CSS noch spaeter lud. */
.elementor a.elementor-button,
.elementor button.elementor-button,
.elementor input[type="submit"].elementor-button {
	background-color: var(--accent);
	color: var(--text-inverse);
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	border: 1.5px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 13.5px 26.5px;
}

.elementor a.elementor-button:hover,
.elementor a.elementor-button:focus,
.elementor button.elementor-button:hover,
.elementor button.elementor-button:focus,
.elementor input[type="submit"].elementor-button:hover,
.elementor input[type="submit"].elementor-button:focus {
	background-color: var(--surface-card);
	color: var(--accent);
	border: 1.5px solid var(--accent);
}

/*
 * Die Link-Grundwerte kamen aus dem Kit (".elementor-kit-258 a"). Seit
 * dem 2026-08-20 (To-Do 36) setzt die Basisregel nur noch die Farbe:
 * Ein Link ist Text und erbt Groesse und Gewicht von dem Text, in dem
 * er steht. Die frueheren 16px/500 waren konservierte Kit-Werte mit
 * (0,1,1) und schlugen jede blosse Komponentenklasse auf einem <a> -
 * Infolist-Titel, Formular-Datenschutzlink, Footer-Legal-Zeile und
 * Hero-Altlink rendern seither wieder in ihrer Umgebungsgroesse.
 * Topbar und Footer-Kontaktlinks nennen ihr Gewicht 500 jetzt selbst.
 */
.elementor a {
	color: var(--blue);
}

.elementor a:hover {
	color: var(--accent);
}

/* ---------- Schaltflaechen ausserhalb des Buttonsystems ---------- */

/*
 * ABSICHERUNG, kein Reparaturpflaster — sie bewirkt im Normalfall nichts.
 *
 * Vorgeschichte: Kit 258 hing die Buttonoptik am ELEMENTTYP <button> statt an
 * einer Klasse. Damit war jedes <button> im Dokument ein Kit-Button, und alle
 * anderen mussten dagegen anarbeiten. Wer eine Eigenschaft vergass, merkte es
 * erst beim Hover — der Rand entsteht dort erst und veraendert die Geometrie.
 * Am 2026-08-04 sprang deshalb der Mega-Ausloeser und schob das Menue mit, und
 * die Bedienelemente der Bildergalerie (.pswp__button--*) trugen unbemerkt
 * einen orangen Rand.
 *
 * Seit dem 2026-08-04 sind die Button- und Link-Werte aus dem Kit entfernt und
 * stehen im Block "Native Elementor-Buttons und Links" weiter oben. Damit ist
 * die Ursache weg und diese Regel greift ins Leere.
 *
 * Sie bleibt trotzdem stehen: Wer im Elementor-Kit unter Stil > Buttons wieder
 * Werte eintraegt, holt die Elementtyp-Regel zurueck — und dann faengt dieser
 * Block sie ab, bevor sie irgendwo Geometrie verschiebt.
 *
 * Bewusst nur die Eigenschaften, die das Kit setzen wuerde: kein padding,
 * keine Schriftgroesse, damit fremde Komponenten ihr Layout behalten.
 * Bewusst OHNE ".elementor"-Praefix, weil die Lightbox direkt am <body> haengt
 * und ein Praefix sie verfehlt.
 */
button:not(.elementor-button):not([class*="sbs-"]),
button:not(.elementor-button):not([class*="sbs-"]):hover,
button:not(.elementor-button):not([class*="sbs-"]):focus {
	background-color: transparent;
	border: none;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* ---------- Cards ---------- */

.sbs-card {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: none;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.sbs-card:hover {
	box-shadow: 0 24px 48px -20px rgba(32, 38, 43, .18);
	transform: translateY(-4px);
}

.sbs-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	padding: 5px 10px;
	border-radius: 20px;
}

.sbs-badge--live {
	background: rgba(46, 158, 79, .1);
	color: var(--status-green);
}

/* Der Punkt hing bis zum 2026-08-04 an ".sbs-badge--live". Er wird jetzt auch
   ausserhalb einer Badge gebraucht (Unterzeile des Hero-CTA), deshalb steht er
   fuer sich. Die Werte sind unveraendert. */
.sbs-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--status-green);
	display: inline-block;
	flex: none;
}

/* ---------- Layout ---------- */

.sbs-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

/*
 * .sbs-wrap auf einem Elementor-CONTAINER: Dort steuert Elementor die
 * Inhaltsbreite ueber den Innen-Kasten (.e-con-inner, Kit-Breite 1200)
 * und frontend.min.css laedt nach sbs.css - die blosse Klasse kam nie
 * an, der Inhalt sass 34px weiter links als das Logo (Kundenbefund
 * 2026-08-18 auf der Bestandsuebersicht). Deshalb bekommt der
 * Innen-Kasten die Wrap-Masse ausdruecklich; Widgets, die den Wrap im
 * eigenen Markup rendern (Kennzahlenband, Startseiten-Sektionen), sind
 * nicht betroffen.
 */
.elementor .e-con.sbs-wrap > .e-con-inner {
	max-width: 1180px;
	padding-inline: 24px;
}

.sbs-sec {
	padding: var(--space-section-desktop) 0;
}

@media (max-width: 767px) {
	.sbs-sec {
		padding: var(--space-section-mobile) 0;
	}
}

/* Kopfabstand: 56px zwischen Header-Unterkante und dem ersten Inhalt jeder
   Seite — die Festlegung von der Startseite (Hero), am 2026-08-19 auf alle
   Seiten ausgerollt. Die Regel sitzt auf der ERSTEN Sektion des Dokuments
   und ist mit (0,4,0) bewusst stark: sie uebersteuert .sbs-sec (96px),
   Instanz-Polster aus dem Editor und das 10px-Containerdefault des Kits,
   das auf .e-con-inner zusaetzlich auflief (Bestandsuebersicht stand
   dadurch bei 96+10). Eine im Editor gesetzte obere Polsterung der ersten
   Sektion wirkt also nicht mehr — gewollt, sonst ist der Abstand wieder
   je Seite verschieden. Farbige Baender duerfen weiterhin am Header
   anliegen: die 56px gelten fuer den Inhalt, nicht fuer die Flaeche.
   Fest in px auf allen Breiten, wie beim Hero. Die Produktseite hat eine
   beschlossene Ausnahme (Brotkrume innerhalb der 56px) — siehe den
   Kopf-Block der Produktseite v2. */
[data-elementor-type="wp-page"] > .e-con.e-parent:first-of-type {
	padding-top: 56px;
}

[data-elementor-type="wp-page"] > .e-con.e-parent:first-of-type > .e-con-inner {
	padding-top: 0;
}

/* Bilder: Baseline-Lücke vermeiden, Kartenrundung greift nur mit eigenem overflow */
.sbs-media {
	display: block;
	overflow: hidden;
	border-radius: var(--radius-md);
}

/*
 * Auch hier entscheidet die Spezifitaet, nicht die Absicht: Elementor setzt
 * ".elementor img { height:auto }" mit (0,1,1). Ein blosses ".sbs-media img"
 * hat dieselbe (0,1,1) und verliert deshalb ueber die Ladereihenfolge —
 * frontend.min.css steht an Position 13, sbs.css an 6.
 *
 * Folge bis zum 2026-08-05: das "height:100%" war ueberall wirkungslos. Kein
 * einziges Bild der Startseite fuellte seinen Rahmen. Die Bilder liefen im
 * eigenen Seitenverhaeltnis, also mal zu kurz (Luecke unter dem Bild: Hero
 * -38px, Referenzen -52px) und mal zu hoch (vom overflow abgeschnitten:
 * Bestand bis +71px, Sortiment bis +181px). Sichtbar wurde es erst da, wo
 * Motive verschiedener Seitenverhaeltnisse nebeneinander stehen.
 */
.elementor .sbs-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================
   Topbar
   ========================================================= */

.sbs-topbar {
	background: var(--surface-dark);
	color: var(--text-on-dark);
}

.sbs-topbar__wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 8px;
	padding-bottom: 8px;
	flex-wrap: wrap;
}

.sbs-topbar__group {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.elementor .sbs-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 12px;
	/* stand bis 2026-08-20 stillschweigend in der .elementor-a-Basisregel */
	font-weight: 500;
	color: var(--text-on-dark);
	text-decoration: none;
}

.elementor .sbs-topbar__item:hover {
	color: var(--accent-on-dark);
}

.sbs-topbar__icon {
	width: 13px;
	height: 13px;
	flex: none;
}

@media (max-width: 767px) {
	.sbs-topbar__hours {
		display: none;
	}
}

/* =========================================================
   Header
   ========================================================= */

/* Topbar und Header bleiben gemeinsam stehen. Sticky muss auf dem
   Theme-Builder-Wrapper sitzen und nicht auf .sbs-header: dessen
   Elternelement ist exakt so hoch wie er selbst, dort gibt es keinen Weg
   zum Kleben — sticky war deshalb wirkungslos. Der Wrapper hängt direkt
   unter <body> und hat die ganze Seitenhöhe als Spielraum.
   Der top-Wert berücksichtigt die WordPress-Adminleiste, damit der Header
   für angemeldete Benutzer nicht darunter verschwindet. */
.elementor-location-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 200;
}

.sbs-header {
	background: var(--surface-base);
	border-bottom: 1px solid var(--line);
}

.sbs-header__wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.elementor .sbs-header__logo {
	color: var(--text);
	font-family: var(--font-body);
	font-weight: 700;
	text-decoration: none;
}

/* Die Breiten sind am 10.08.2026 mit dem neuen Logo umgerechnet worden, nicht
   neu gewaehlt. Das alte PNG war 1542x472 (Verhaeltnis 3,27), das neue SVG ist
   931x414 (2,25) — bei unveraenderten 296px waere das Logo von 90,6px auf
   131,6px Hoehe gewachsen, also um 45%. Der stehende Header nimmt auf 375px
   schon heute knapp ein Viertel der Bildschirmhoehe ein (To-Do 9a), deshalb
   bleibt die Hoehe gleich und die Breite gibt nach:

     296px -> 204px   (Hoehe 90,6px, unveraendert)
     240px -> 165px   (Hoehe 73,5px)
     180px -> 124px   (Hoehe 55,1px)

   Untere Grenze der Logo-Regeln ist 120px Bildschirmbreite; die 124px der
   kleinsten Stufe liegen knapp darueber. Wer das Logo groesser will, aendert
   diese drei Werte — und misst danach den stehenden Block nach. */
.elementor .sbs-header__logo img {
	display: block;
	width: 204px;
	height: auto;
	max-width: none;
}

@media (max-width: 900px) {
	.elementor .sbs-header__logo img {
		width: 165px;
	}
}

@media (max-width: 480px) {
	.elementor .sbs-header__logo img {
		width: 124px;
	}
}

/* Der Burger traegt keinen Text, erbte vom Kit aber trotzdem Schriftgroesse,
   Fettung, Versalien und Weiss. Folgenlos, aber irrefuehrend — deshalb hier
   ausdruecklich neutral. */
.sbs-header .sbs-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	padding: 0;
}

.sbs-header__burger span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--text);
}

.sbs-header__nav {
	display: flex;
	align-items: center;
	gap: 28px;
}

.sbs-header .sbs-header__navlink {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	text-transform: none;
	letter-spacing: normal;
	color: var(--text-muted);
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px 0;
}

.sbs-header .sbs-header__navlink:hover,
.sbs-header .sbs-header__navlink:focus {
	color: var(--blue);
	background: none;
}

/*
 * Kit 258 legt JEDEM <button> im Hover einen 1,5px-Rand in Akzentfarbe an
 * (".elementor-kit-258 button:hover"). Die Kopfzeile enthaelt zwei Buttons —
 * den Mega-Ausloeser und den Burger —, die im Ruhezustand keinen Rand tragen.
 * Beim Hover wachsen sie dadurch um 3px in beide Richtungen: Der Schriftzug
 * "Container" springt und schiebt das darunter haengende Mega-Menue mit.
 * Dazu kaeme aus reset.css noch ein pinkfarbener Hover-Grund.
 *
 * Zurueckgenommen wird das hier und NICHT im Kit — die allgemeine Begruendung
 * steht im Block "Schaltflaechen ausserhalb des Buttonsystems" weiter unten.
 */
.elementor .sbs-header button:hover,
.elementor .sbs-header button:focus {
	border: none;
	background: none;
}

.sbs-header__cta {
	margin-left: 8px;
}

.sbs-header__navitem--mega {
	position: relative;
}

.sbs-mega {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: 374px 1fr;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: 10px;
	box-shadow: 0 26px 50px -20px rgba(32, 38, 43, .28);
	padding: 6px;
	min-width: 570px;
	/* Selbsttragende Breite (Kundenvereinbarung: der CTA der
	   Neuanfertigung-Spalte bricht nie um). Der Festwert 570 hielt die
	   Vereinbarung vom 02.08. nur, bis die Buttons am 04.08. ihre
	   heutige Groesse bekamen (CTA braucht 204px, die Spalte bot 134).
	   max-content laesst die 1fr-Spalte auf den unumbrochenen Inhalt
	   wachsen (rechnerisch 638px); als abgesetztes Element deckelt
	   sonst der schmale Navitem-Bezugsrahmen die Breite auf min-width.
	   Die Zone 901-1024px haengt das breitere Panel linksbuendig an
	   (eigener Media-Block nach den Mobilregeln). */
	width: max-content;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

@media (hover: hover) {
	.sbs-header__navitem--mega:hover .sbs-mega {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}
}

.sbs-header__navitem--mega.is-open .sbs-mega {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.sbs-mega__col {
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sbs-mega__col--secondary {
	border-left: 1px solid var(--line);
	background: var(--surface-base);
}

/* Dropdown "Modelle" (Kundenbeschluss 2026-10-21): dieselben Bauteile
   wie die Gebraucht-Spalte des Dropdowns "Container", nur einspaltig und
   in deren Breite. Die Typen fuehren hier auf die Typseiten, unter
   "Container" auf den gefilterten Bestand. */
.sbs-mega.sbs-mega--modelle {
	grid-template-columns: 374px;
	min-width: 0;
}

.elementor .sbs-mega__kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.elementor a.sbs-mega__kicker {
	/* width auto statt max-content (Kundenwunsch 2026-08-26): die
	   Flex-Spalte streckt den Kicker auf Spaltenbreite, seine
	   border-bottom-Linie laeuft damit durch; die Hover-Toenung
	   fuellt seither ebenfalls die ganze Zeile, wie mobil. */
	width: auto;
	padding: 8px 6px;
	margin: -8px -6px 20px;
	border-radius: 6px 6px 0 0;
	transition: background-color .15s ease;
}

.elementor a.sbs-mega__kicker:hover {
	background: rgba(13, 42, 92, .07);
	color: var(--blue);
}

.elementor .sbs-mega__col--primary a.sbs-mega__kicker:hover {
	background: rgba(227, 82, 5, .08);
	color: var(--accent);
}

.sbs-mega__kicker-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
}

/* Die Kicker-Linien tragen seit dem 2026-08-26 die Spaltenfarbe
   (Kundenentscheidung, Desktop und Mobil): Linie als Umrandung darf
   Orange, die Farblogik von Text und Punkt laeuft damit durch.
   Gewinnt gegen das --line der Kicker-Grundregel ueber die spaetere
   Position bei gleicher Spezifitaet (0,2,0). */
.sbs-mega__col--primary .sbs-mega__kicker {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

.sbs-mega__col--primary .sbs-mega__kicker-dot {
	background: var(--accent);
}

.sbs-mega__col--secondary .sbs-mega__kicker {
	color: var(--blue);
	border-bottom-color: var(--blue);
}

.sbs-mega__col--secondary .sbs-mega__kicker-dot {
	background: var(--blue);
}

.elementor .sbs-mega__status {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12.5px;
	color: var(--text);
	text-decoration: none;
	margin-bottom: 14px;
	padding: 11px 12px;
	background: rgba(46, 158, 79, .08);
	border: 1px solid rgba(46, 158, 79, .25);
	border-radius: var(--radius-sm);
	transition: background-color .15s ease, border-color .15s ease;
}

.elementor .sbs-mega__status:hover {
	background: rgba(46, 158, 79, .16);
	border-color: rgba(46, 158, 79, .4);
}

.sbs-mega__status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--status-green);
	flex: none;
	animation: navPulseRing 2s ease-out infinite;
}

@keyframes navPulseRing {
	0% { box-shadow: 0 0 0 0 rgba(46, 158, 79, .35); }
	70% { box-shadow: 0 0 0 6px rgba(46, 158, 79, 0); }
	100% { box-shadow: 0 0 0 0 rgba(46, 158, 79, 0); }
}

.sbs-mega__status-label {
	flex: 1 1 auto;
	white-space: nowrap;
}

.sbs-mega__status-badge {
	font-family: var(--font-mono);
	font-size: 8.5px;
	font-weight: 600; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--status-green);
	background: rgba(46, 158, 79, .12);
	padding: 3px 8px;
	border-radius: var(--radius-pill);
	flex: none;
}

/* Bestand-Kasten unter der Statuszeile (Kundenbeschluss 2026-08-26):
   die Form der gruenen Sofort-Zeile, die Farbe Blau — Gruen und der
   Puls-Punkt bleiben exklusiv das Sofort-Signal. Die beiden Kaesten
   ruecken als Paar auf 6px zusammen. */
.elementor .sbs-mega__status:has(+ .sbs-mega__status--bestand) {
	margin-bottom: 6px;
}

.elementor .sbs-mega__status--bestand {
	background: rgba(13, 42, 92, .06);
	border-color: rgba(13, 42, 92, .25);
}

.elementor .sbs-mega__status--bestand:hover {
	background: rgba(13, 42, 92, .12);
	border-color: rgba(13, 42, 92, .4);
}

.sbs-mega__status--bestand .sbs-mega__status-dot {
	background: var(--blue);
	animation: none;
}

.sbs-mega__status--bestand .sbs-mega__status-badge {
	color: var(--blue);
	background: rgba(13, 42, 92, .1);
}

/* Zeilenfluss seit dem 2026-10-01 (Kundenbeschluss, Customer Journey):
   gelesen wird zeilenweise von links nach rechts, die wichtigsten Typen
   stehen in den oberen Zeilen (Buero | Kombi, Sanitaer | Mehrfach,
   Aufenthalt | Umkleide, Wohn | Sonder, Lager | Werkstatt). Die
   Repeater-Reihenfolge im Editor entspricht der Rangfolge. Vorher
   (2026-08-26) Spaltenfluss mit fester Zeilenzahl; mit zehn Typen und
   ohne Abschluss-Link "Alle Typen ansehen" entfaellt die Zeilenzahl. */
.sbs-mega__col--primary ul {
	list-style: none;
	/* Der 12px-Unterabstand galt der entfallenen Fusszeile; ohne ihn
	   schliesst der CTA der Nachbarspalte (margin-top auto) buendig
	   mit der letzten Typenzeile ab (Kundenbefund 2026-08-26). */
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: row;
	gap: 2px 20px;
}

/* Der Abschluss-Link traegt die Chevron-Mechanik der frueheren Fusszeile,
   laeuft aber in der Optik seiner Listen-Nachbarn (12,5px, Orange-Hover
   aus der ul-a-Regel); nur Flex und Abstand fuer den Pfeil kommen hier. */
.elementor .sbs-mega__col--primary ul a.sbs-mega__footer-link {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
}

.elementor .sbs-mega__col--primary ul a {
	display: block;
	padding: 7px 8px;
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
}

.elementor .sbs-mega__col--primary ul a:hover {
	background: rgba(227, 82, 5, .08);
	color: var(--accent);
}

.sbs-mega__footer-row {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 10px;
	border-top: 1px dashed var(--line);
}

.elementor .sbs-mega__footer-link {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
}

.sbs-mega__footer-chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid var(--text);
	flex: none;
	transition: border-color .15s ease, color .15s ease;
}

.sbs-mega__footer-chevron--right svg {
	transform: rotate(-90deg);
}

.elementor .sbs-mega__footer-link:hover,
.elementor .sbs-mega__footer-link:hover .sbs-mega__footer-chevron {
	color: var(--accent);
	border-color: var(--accent);
}

.elementor .sbs-mega__col--secondary a:not(.sbs-btn-ghost):not(.sbs-mega__kicker) {
	display: block;
	font-family: var(--font-body);
	font-size: 12.5px;
	/* 600 wie die Typenliste (Kundenbefund 2026-08-26: die fruehere
	   700 liess die Spalte fetter wirken als die Containertypen). */
	font-weight: 600;
	color: var(--text);
	text-decoration: none;
	padding: 7px 8px;
	border-radius: var(--radius-sm);
}

.elementor .sbs-mega__col--secondary a:not(.sbs-btn-ghost):not(.sbs-mega__kicker):hover {
	background: rgba(13, 42, 92, .08);
	color: var(--blue);
}

.sbs-mega__cta.sbs-btn-ghost {
	margin-top: auto;
	justify-content: center;
	width: 100%;
}

/* Burger-Menue bis 1080px (Kundenbeschluss 2026-10-21, "bis 1060px";
   am Staging nachgemessen braucht die Zeile 1063px, dazu 15px fuer
   Scrollleisten unter Windows): mit dem zweiten Dropdown "Modelle"
   brachen darunter "Ueber uns", "Projekt-Anfrage" und der Anfrage-Knopf
   zweizeilig um. Vorher lag die Schwelle bei 900px. */
@media (max-width: 1080px) {
	.sbs-header .sbs-header__burger {
		display: flex;
	}

	.sbs-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--surface-card);
		border-bottom: 1px solid var(--line);
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 24px 20px;
		display: none;
		/* Das Menue haengt absolut im sticky Header: die Seite dahinter
		   scrollt, das Menue nicht. Mit aufgeklapptem Mega (870px bei
		   375x812 gemessen) waren CTA und untere Punkte unerreichbar.
		   Deshalb scrollt das Menue selbst; --header-stack ist 132px
		   unter 900px und 156px darueber (grosses Logo),
		   der kleinen Schirme, dvh faengt die iOS-Adressleiste ab. */
		max-height: calc(100vh - var(--header-stack));
		max-height: calc(100dvh - var(--header-stack));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.sbs-header__nav.is-open {
		display: flex;
	}

	.sbs-header .sbs-header__navlink {
		width: 100%;
		justify-content: space-between;
		padding: 12px 0;
		border-bottom: 1px solid var(--line);
	}

	/* Die Regel gegen den Kit-Hover-Rahmen nimmt "border" pauschal zurueck.
	   Auf schmalen Schirmen trennt aber genau ein border-bottom die
	   Menuepunkte — der muss den Hover ueberleben. */
	.elementor .sbs-header .sbs-header__navlink:hover,
	.elementor .sbs-header .sbs-header__navlink:focus {
		border-bottom: 1px solid var(--line);
	}

	/* Zwischen 901 und 1080px gibt es keine mobile Kontaktleiste: der
	   Anfrage-Knopf bleibt als Abschluss im aufgeklappten Menue stehen. */
	.sbs-header__cta {
		align-self: flex-start;
		margin: 16px 0 0;
	}

	.sbs-mega {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border: none;
		grid-template-columns: 1fr;
		min-width: 0;
		width: auto; /* hebt das max-content des Desktop-Panels auf */
		padding: 0;
		display: none;
	}

	.sbs-mega__col {
		padding: 12px 0 12px 12px;
		min-width: 0;
	}

	.sbs-mega.sbs-mega--modelle {
		grid-template-columns: 1fr;
	}

	.sbs-mega__col--secondary {
		border-left: none;
		/* Die graue Trennlinie zur Gebraucht-Spalte ist seit dem
		   2026-08-26 entfallen (Kundenbeschluss): die Farben der
		   Bereichslabels tragen die Trennung. */
		border-top: none;
		background: none;
		/* Gleiche Spaltenregel wie die Typenliste (Kundenwunsch
		   2026-08-26): Die Eintraege liegen hier direkt in der Spalte
		   (kein ul), deshalb wird die Spalte selbst zum Raster, im
		   Spaltenfluss wie die Typenliste (Kicker-Zeile plus zwei
		   Eintragszeilen; links Modell-Uebersicht und Classic Line,
		   rechts Pro Line und Beratung anfragen). Der Kicker spannt
		   ueber die volle Breite. */
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: column;
		grid-template-rows: repeat(3, auto);
		gap: 2px 20px;
		align-items: start;
	}

	/* Explizite Zellen (Kundenvorgabe 2026-08-26): links Modell-
	   Uebersicht und Beratung anfragen, rechts Classic Line und
	   Pro Line — die DOM-Reihenfolge (Desktop-Stapel) gaebe im
	   Spaltenfluss eine andere Verteilung. nth-child-Mapping wie
	   bei den Anliegen-Kaestchen: aendert sich die Eintragszahl,
	   muss das Mapping mitziehen. Kind 1 ist der Kicker (Zeile 1,
	   volle Breite), der CTA haengt an seiner eigenen Regel unten. */
	.sbs-mega__col--secondary > :nth-child(2) { grid-column: 1; grid-row: 2; } /* Modell-Uebersicht */
	.sbs-mega__col--secondary > :nth-child(3) { grid-column: 2; grid-row: 2; } /* Classic Line */
	.sbs-mega__col--secondary > :nth-child(4) { grid-column: 2; grid-row: 3; } /* Pro Line */

	.sbs-mega__col--secondary .sbs-mega__kicker {
		grid-column: 1 / -1;
	}

	/* Die Kicker-Linien laufen mobil ueber die Menuebreite wie die
	   Navlink-Trenner (Kundenwunsch 2026-08-26). Das width:max-content
	   der Desktop-Hover-Pille machte Element und border-bottom nur
	   textbreit. margin-left -12px hebt die Spalten-Einrueckung fuer
	   die LINIE auf (sie beginnt an der Menuekante wie alle anderen),
	   das padding-left stellt die Textflucht der Spalte wieder her. */
	.elementor .sbs-mega__kicker,
	.elementor a.sbs-mega__kicker {
		width: auto;
		margin: 0 0 16px -12px;
		padding: 0 0 12px 12px;
		border-radius: 0;
	}

	/* Die Typenliste laeuft mobil mit der Desktop-Grundregel
	   (Spaltenfluss, zwei Spalten) — bei 375px sind die Spalten
	   147,5px breit, der laengste Eintrag braucht 144. Nur ganz
	   schmale Schirme fallen auf eine Spalte zurueck (eigener
	   Media-Block nach den Mobilregeln). */

	.sbs-header__navitem--mega.is-open .sbs-mega {
		display: grid;
		/* Die is-open-Regel des Desktops setzt translateX(-50%) fuer die
		   Einblende-Animation und steht mit (0,3,0) AUSSERHALB der Media
		   Queries — das transform:none der Mobilgrundregel (0,1,0) verlor,
		   und das offene Mega stand um die halbe Breite links aus dem Bild
		   (gemessen -139 bis 188 bei 375px). Gleicher Selektor, spaeter in
		   der Datei: hier gewinnt die Ruecknahme. */
		transform: none;
	}

	/* "Beratung anfragen" mobil als normaler Textlink der Spalte
	   (Kundenentscheidung 2026-08-26: der Ghost-Button wirkte im
	   Burger-Menue als Fremdkoerper). Werte identisch mit der
	   a-Regel der Sekundaerspalte oben; Desktop behaelt den Ghost.
	   Die Ghost-Regeln liegen bei (0,2,x) und verlieren hier ueber
	   die spaetere Position. */
	.elementor .sbs-mega__cta {
		display: block;
		width: auto;
		margin-top: 0;
		grid-column: 1; /* linke Spalte, unter Modell-Uebersicht (Kundenvorgabe) */
		grid-row: 3;
		background: none;
		border: none;
		text-align: left;
		font-size: 12.5px;
		font-weight: 600; /* wie die Listen-Nachbarn seit der 600er-Angleichung */
		letter-spacing: normal;
		text-transform: none; /* die Button-Grundregel setzt Versalien */
		line-height: inherit;
		color: var(--text);
		padding: 7px 8px;
		border-radius: var(--radius-sm);
	}

	.elementor .sbs-mega__cta:hover,
	.elementor .sbs-mega__cta:focus-visible {
		background: rgba(13, 42, 92, .08);
		border: none;
		color: var(--blue);
	}
}

/* Unter 900px traegt die mobile Kontaktleiste den Anfrage-Weg — der
   Knopf am Menueende war eine Dopplung (Kundenentscheidung 2026-08-25).
   .elementor davor ist Pflicht: die Button-Grundregel .elementor .sbs-btn
   setzt display mit (0,2,0), die blosse Klasse verlor (gemessen: blieb
   inline-flex). */
@media (max-width: 900px) {
	.elementor .sbs-header__cta {
		display: none;
	}
}

/* Ganz schmale Schirme: eine Spalte, die Eintraege laufen in der
   Rangfolge linear durch (Bueroc., Kombi, Sanitaer, Mehrfach,
   Aufenthalt, Umkleide, Wohn, Sonder, Lager, Werkstatt). */
@media (max-width: 359px) {
	.sbs-mega__col--primary ul,
	.sbs-mega__col--secondary {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		grid-template-rows: none;
	}

	/* Die expliziten Zellen der Sekundaerspalte wuerden hier eine
	   zweite Spalte erzwingen — im Einspalter gilt wieder die
	   DOM-Reihenfolge. */
	.sbs-mega__col--secondary > :nth-child(2),
	.sbs-mega__col--secondary > :nth-child(3),
	.sbs-mega__col--secondary > :nth-child(4),
	.elementor .sbs-mega__cta {
		grid-column: auto;
		grid-row: auto;
	}
}

/* Schmale Desktop-Zone: Das selbsttragend breite Panel (rechnerisch
   638px) ragte zentriert unter dem Navitem links aus dem Fenster
   (bei 940px laege die Kante bei -19); seit 2026-10-21 beginnt die Zone
   bei 1081px, darunter gilt das Burger-Menue. Hier haengt es linksbuendig am
   Menuepunkt; die Einblendung faehrt nur noch senkrecht. Die Regeln
   stehen NACH den Basis- und Hover-Regeln und gewinnen bei gleicher
   Spezifitaet ueber die Reihenfolge. Seit 2026-09-18 reicht die Zone bis
   1120px: zentriert ragte das Panel bis etwa 1110px noch links aus dem
   Fenster (gemessen -15 bei 1082px). Ab 1121px gilt wieder die
   zentrierte Grundform (83px Rand bei 1180px, iPad quer). */
@media (min-width: 1081px) and (max-width: 1120px) {
	.sbs-mega {
		left: -24px;
		transform: translateY(8px);
	}

	.sbs-header__navitem--mega:hover .sbs-mega,
	.sbs-header__navitem--mega.is-open .sbs-mega {
		transform: translateY(0);
	}
}

/* =========================================================
   Hero
   ========================================================= */

/* Der Verlauf und die Akzentkante sitzen auf dem äußeren Container, nicht
   auf dem Widget — genau wie bei jeder anderen Sektion. Auf dem Widget
   endeten sie am 1200er-Raster statt an der Seitenkante.

   Die 56px zum Header liefert seit dem 2026-08-19 die globale
   Kopfabstand-Regel auf der ersten Sektion (siehe .sbs-sec-Block); der
   Hero selbst traegt oben nichts mehr. Vorher lag das 56px-Polster im
   Hero UND als Instanzwert auf dem Band — solange das Band "boxed" war,
   nullte eine Regel auf .e-con-inner den Instanzwert; mit der
   Full-Umstellung vom 2026-08-18 (Kit-Fix) lief sie ins Leere und der
   Abstand verdoppelte sich still auf 112/152px. Deshalb wird hier auch
   die Unterkante des Bandes explizit genullt: den Abstand zum
   Kennzahlenband (96px) bringt der Hero selbst mit. Der Instanzwert
   56/56 in 8746 ist damit vollstaendig uebersteuert. */
.elementor .sbs-hero-band {
	position: relative; /* Bezugsrahmen fuer Bild und Scrim des Foto-Modus */
	background: var(--hero-gradient);
	border-bottom: 4px solid var(--accent);
}

[data-elementor-type="wp-page"] > .e-con.e-parent.sbs-hero-band:first-of-type {
	padding-bottom: 0;
}

.sbs-hero {
	padding: 0 0 var(--space-section-desktop);
}

/* Gleich breite Spalten.

   Zwischenzeitlich stand hier 1.45fr 1fr (Textspalte 632px, Bildspalte
   436px). Das war noetig, solange die Ueberschrift zweizeilig laufen sollte:
   "Hochwertige Raummodule fuer den Norden." brauchte dafuer 615px. Mit der
   jetzigen dreizeiligen Ueberschrift ist der Grund entfallen — sie ist auf
   448px gedeckelt, der Fliesstext auf 515px (48ch). Die Textspalte kommt
   also mit 534px aus und behaelt 19px Reserve.

   Rechengrundlage: Rasterinhalt 1132px minus 64px Abstand = 1068px fuer
   beide Spalten. Wer hier wieder verschiebt, sollte vorher pruefen, was die
   Ueberschrift in ihrer dann gueltigen Fassung braucht. */
.sbs-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: stretch;
}

/* Kein "height: 100%" mehr: das Raster steht auf align-items:stretch, die
   Kachel fuellt die Zeile also ohnehin. Die Angabe war redundant — und sie
   haette den Abstand unten wirkungslos gemacht, weil 100% sich auf die volle
   Zeilenhoehe bezieht und die Kachel dann trotz Aussenabstand ueberragt. */
.sbs-hero__media {
	display: flex;
	flex-direction: column;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 16px;
}

/* Unterkante der Bildkachel auf Unterkante der beiden Buttons.
 *
 * Der Wert ist gemessen, nicht gegriffen: unter den Buttons stehen noch die
 * beiden Unterzeilen und der Alternativ-Link. Zwischen Buttonunterkante und
 * Spaltenende liegen dadurch 76,5px — bei 1280 und bei 1440 derselbe Wert,
 * weil diese Elemente feste Schriftgroessen tragen und nicht mitskalieren.
 *
 * Die Grenze bei 1180px ist kein Vorsichtsabstand, sondern eine Sachgrenze:
 * darunter reicht die Textspalte nicht mehr fuer zwei nebeneinanderstehende
 * Buttons (noetig sind 2 x 242 + 20 = 504px), sie stapeln sich, und
 * "Unterkante der Buttons" meint dann etwas anderes — bei 1024 gemessen
 * 161px statt 76,5. Ab 1180 ist die Spalte durch die max-width der .sbs-wrap
 * konstant 534px breit, der Wert stimmt dort exakt und bleibt stabil.
 *
 * Die Kachel hat innen Luft dafuer: der Rahmen ist 452px hoch, das Bild darin
 * nur 334px. Die Stauchung geht auf diesen Leerraum, nicht auf das Bild.
 *
 * Aendert sich, was unter den Buttons steht, gehoert der Wert neu gemessen.
 */
@media (min-width: 1180px) {
	.sbs-hero__media {
		margin-bottom: 76.5px;
	}
}

/* Der Deckel formt die Ueberschrift zu drei Zeilen:
 *
 *     Hochwertige        305px
 *     Raummodule aus     395px
 *     dem Norden.        299px
 *
 * Ohne Deckel waeren es zwei Zeilen (615 / 374) mit der langen oben, weil ein
 * Browser die Zeile gierig auffuellt.
 *
 * Gemessen bei 68px: der Deckel muss mindestens 395px betragen, damit "aus"
 * noch in Zeile 2 passt, und weniger als 501px, damit "dem" nicht ebenfalls
 * hochrutscht ("Raummodule aus dem" = 501px). 6.59em sind 448px und liegen
 * mittig in diesem Fenster — 53px Reserve nach beiden Seiten.
 *
 * Es gab eine Variante mit der laengsten Zeile unten (Hochwertige /
 * Raummodule / aus dem Norden), die haette aber nur ein 20px breites Fenster
 * gehabt. Diese hier ist die belastbarere.
 *
 * Aendert sich die Ueberschrift redaktionell, gehoert der Wert neu ausgemessen
 * statt geschaetzt.
 *
 * In em, nicht in px: die Schriftgroesse ist eine clamp-Stufe und wandert mit
 * der Fensterbreite. Ein Pixelwert traefe das Fenster bei genau einer Breite.
 *
 * Das ".elementor" ist Pflicht, sonst gewinnt das "margin: 0" aus dem
 * Typografieblock: der traegt seit dem 2026-08-04 selbst ein ".elementor" und
 * damit (0,2,0) gegen die (0,1,0) einer blossen BEM-Klasse.
 */
.elementor .sbs-hero__heading {
	margin: 6px 0 25px;
	max-width: 6.59em;
}

/* Der eingefaerbte Schlussteil der Ueberschrift. Er steht als eigenes
   Widget-Feld, nicht als Auszeichnung im Text — die Ueberschrift laeuft durch
   esc_html(), Markup im Textfeld kaeme als sichtbarer Zeichensalat heraus. */
.sbs-hero__heading-accent {
	color: var(--blue);
}

/* Der Fliesstext haengt NICHT an der Spaltenbreite, sondern an diesem Limit —
   eine breitere Spalte allein aendert an seinem Umbruch nichts. Bei 46ch
   (493px) brach er in sieben Zeilen, sechs Zeilen beginnen bei 501px. Das
   Limit stand also acht Pixel neben der Kante. 48ch gibt der Zeile Reserve
   und bleibt im lesbaren Bereich; 55ch waeren fuenf Zeilen, das ginge auf
   Kosten der Lesbarkeit. */
.sbs-hero__text {
	font-size: 17px;
	max-width: 48ch;
}

/* Zwei Saeulen aus je Schaltflaeche plus Unterzeile. align-items: flex-start
   ist tragend: sonst zieht die laengere Saeule die kuerzere auf ihre Hoehe
   und die Unterzeilen stehen nicht mehr auf einer Linie. */
.sbs-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
	margin-top: 28px;
}

.sbs-hero__cta-col {
	min-width: 0;
}

/* Beide Schaltflaechen tragen dieselbe feste Breite — nur so stehen die
   Saeulen buendig und die Unterzeilen sitzen passgenau unter ihrem Button.

   Die Vorlage kam hier mit 12px Schrift, weil ihre Buttons anders gepolstert
   waren. Noetig ist das nicht: bei der Projektgroesse von 13,5px misst der
   laengste Text ("Ihr Wunschcontainer") 174px und passt in die 214px
   Innenbreite. Die Buttongroesse des Projekts bleibt damit unangetastet —
   eine dritte Groesse im System waere der falsche Preis fuer diese Sektion
   (siehe To-Do 27). */
.elementor .sbs-hero__cta {
	width: 242px;
	white-space: nowrap;
}

.sbs-hero__cta-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 9px 0 0;
	font-family: var(--font-body);
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--text-muted);
	text-align: center;
}

.sbs-hero__cta-note--live {
	font-weight: 600;
}

.sbs-hero__badge strong {
	color: var(--text);
	font-weight: 700;
}

/* Der Altweg ist seit dem 28.08. ein regulaerer Pfeil-Textlink
   (.sbs-tlink im Widget-Markup, To-Do 112): 14px, Pfeil aus ::after,
   Hover-Unterstrich nur am Text-Span. Die fruehere Eigenbau-Optik
   samt Ruhe-Unterstrich ist entfallen - der Unterstrich kam wegen
   frontend.min.css ohnehin nie an (dritte Fundstelle der Falle). */
.sbs-hero__altlink {
	margin-top: 14px;
	font-size: 14px;
	color: var(--text-muted);
}

/* ---------- Hero-Foto-Modus (Kundenentscheidung 2026-08-19) ----------
   Aktiv, sobald das Widget-Feld "Hintergrundfoto" gefuellt ist: das Widget
   rendert dann .sbs-hero--foto samt Bild und Scrim. Bild und Scrim liegen
   absolut im BAND (position:relative unten am Band-Block), damit sie auch
   dessen 56px-Kopfpolster fuellen; inset:0 endet an der Polsterkante, die
   4px-Akzentkante des Bandes bleibt deshalb sichtbar. Die Buttons bleiben
   unveraendert (Kundenvorgabe) — nur Schriftfarben wechseln auf On-Dark.
   Rueckweg: Widget-Feld leeren, der Verlauf uebernimmt wieder. */
/* Elementors Widget-Wrapper traegt position:relative und wuerde Bild und
   Scrim einfangen — sie begaennen dann 56px unter dem Header statt an der
   Navigationsleiste (Kundenbefund 19.08.). Static schalten, damit das Band
   der Bezugsrahmen bleibt. */
.elementor .elementor-widget-sbs-hero {
	position: static;
}

.elementor .sbs-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	z-index: 0;
}

.sbs-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(8,28,58,.86) 0%, rgba(8,28,58,.62) 44%, rgba(8,28,58,.16) 100%);
}

/* Inhalt ueber Bild und Scrim; ohne Bildkachel einspaltig */
/* Foto-Band-Regel 56px oben wie unten (22.09.2026, siehe Bestandskopf):
   der Hero bringt seinen Abstand zur Kante selbst mit, deshalb hier.
   42px Polster ergeben 56px bis zur Textunterkante des letzten Links
   (gemessen 1280 und 390; die Zeilenhoehe des Links traegt 14px bei). */
.sbs-hero.sbs-hero--foto {
	padding-bottom: 42px;
}

.sbs-hero--foto .sbs-hero__grid {
	position: relative;
	z-index: 2;
	grid-template-columns: 1fr;
}

.sbs-hero--foto .sbs-eyebrow {
	color: var(--accent-on-dark);
	font-weight: 600; /* auf dem Foto einen Tick fetter, sonst 400 (Kundenbefund 19.08.) */
}

.sbs-hero--foto .sbs-hero__heading {
	color: #fff;
}

.sbs-hero--foto .sbs-hero__heading-accent {
	color: var(--accent-on-dark);
}

.sbs-hero--foto .sbs-hero__text,
.sbs-hero--foto .sbs-hero__cta-note,
.sbs-hero--foto .sbs-hero__altlink {
	color: var(--text-on-photo);
}

/* On-Photo-Stufe des Pfeil-Textlinks: weiss in Ruhe, On-Photo-Orange
   beim Ueberfahren - schlaegt die blaue Systemregel per Spezifitaet. */
.elementor .sbs-hero--foto .sbs-hero__altlink .sbs-tlink {
	color: #fff;
}

.elementor .sbs-hero--foto .sbs-hero__altlink .sbs-tlink:hover,
.elementor .sbs-hero--foto .sbs-hero__altlink .sbs-tlink:focus-visible {
	color: var(--accent-on-dark);
}

/* Der Ghost-Button ist transparent gebaut und ging auf dem Foto unter
   (Kundenbefund 19.08.): auf dem Band bekommt er die Flaeche der
   Navigationsleiste (--surface-base). Der Hover fuellt weiter blau —
   die Basisregel steht spaeter in der Datei als der System-Hover und
   muss ihn deshalb ausdruecklich wiederherstellen. */
.elementor .sbs-hero--foto .sbs-btn-ghost {
	background: var(--surface-base);
}

.elementor .sbs-hero--foto .sbs-btn-ghost:hover,
.elementor .sbs-hero--foto .sbs-btn-ghost:focus-visible {
	background: var(--blue);
}

/* ---------- Bestandskopf (Widget sbs-bestand-kopf, Mockup v13) ----------
   Foto-Band nach der Designregel Foto-Band-Koepfe (Merkposten 9134),
   gleiche Mechanik wie der Hero-Foto-Modus: Bild und Scrim liegen absolut
   im SEKTIONScontainer und decken auch dessen 56px-Kopfpolster; der
   Container bekommt sein position:relative ueber :has(), weil das Widget
   seinen Vorfahren nicht stylen kann.
   Die 4px-Akzentkante traegt die SEKTION selbst als Instanz-Border
   (95553aa, unten) — wie das Hero-Band der Startseite. Bild und Scrim
   enden an der Polsterkante, die Kante bleibt darunter sichtbar; das
   Kennzahlenband danach traegt nur seine 1px-Haarlinie. (Regel 7 der
   Designregel wurde am 19.08. entsprechend berichtigt: die "orange
   Oberlinie des Kennzahlenbands" aus Kapitel 3n war schon immer diese
   Sektionskante.) Ohne Foto rendert der Kopf hell wie vor dem Umbau. */
.e-con.e-parent:has(.sbs-bkopf--foto) {
	position: relative;
}

.elementor .elementor-widget-sbs-bestand-kopf {
	position: static; /* sonst faengt der Wrapper Bild und Scrim ein (Regel 1) */
}

.elementor .sbs-bkopf__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	z-index: 0;
}

.sbs-bkopf__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(8,28,58,.86) 0%, rgba(8,28,58,.62) 44%, rgba(8,28,58,.16) 100%);
}

.sbs-bkopf__inhalt {
	position: relative;
	z-index: 2;
}

/* em-Deckel wie beim Hero: bricht nach "Container" in zwei Zeilen
   (Umbruchfenster 7,37-8,68em, in echter Bebas Neue gemessen) */
.elementor .sbs-bkopf__titel {
	max-width: 8em;
}

/* Zweifarb-Linie der H1: blau auf hellem Kopf, orange auf dem Foto */
.sbs-bkopf__akzent {
	color: var(--blue);
}

/* Gefilterte Bestandsansicht ("Gebrauchte Buerocontainer im Bestand",
   13.10.2026): der Akzent bleibt zusammen und bricht als Ganzes um,
   sonst zerreisst ihn die 8em-Spalte ("... im / Bestand"). */
.sbs-bkopf__akzent--fest {
	white-space: nowrap;
}

.elementor .sbs-bkopf__text {
	max-width: 48ch;
	margin-top: 16px;
}

/* Claims: Haekchen-Zeile in der Machart der Merkmallisten, laeuft
   bewusst ueber die volle Breite (Kundenentscheidung 19.08.).
   Keine eigene Schriftgroesse: die Claims erben wie der Fliesstext
   die Grundschrift (16px) und bleiben so immer gleich gross wie er
   (Kundenkorrektur 19.08. — 13,5px wirkten daneben zu klein). */
.sbs-bkopf__claims {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-top: 20px;
	font-weight: 600;
	color: var(--text);
}

.sbs-bkopf__claims span::before {
	content: "\2713\00a0\00a0";
	color: var(--accent);
	font-weight: 800;
}

/* On-Photo-Farben (Regel 3) */
.sbs-bkopf--foto .sbs-eyebrow {
	color: var(--accent-on-dark);
	font-weight: 600;
}

.elementor .sbs-bkopf--foto .sbs-bkopf__titel {
	color: #fff;
}

.sbs-bkopf--foto .sbs-bkopf__akzent {
	color: var(--accent-on-dark);
}

.elementor .sbs-bkopf--foto .sbs-bkopf__text,
.sbs-bkopf--foto .sbs-bkopf__claims {
	color: var(--text-on-photo);
}

.sbs-bkopf--foto .sbs-bkopf__claims span::before {
	color: var(--accent-on-dark);
}

/* ---------- Typenkopf (Widget sbs-typ-kopf) ----------
   Foto-Band der zwoelf Containertyp-Seiten (Kundenbeschluss 2026-08-25),
   gerendert in den sbs-bkopf-Klassen des Bestandskopfs — EINE Stilquelle,
   nach dem Muster von Mobilleiste und Produktseiten-Sticky; hier stehen
   nur die Abweichungen. Die 4px-Akzentkante traegt wie beim Bestandskopf
   die Sektions-Instanz (Border unten), position:relative bekommt die
   Sektion ueber das :has(.sbs-bkopf--foto) des Bestandskopf-Blocks. */
.elementor .elementor-widget-sbs-typ-kopf {
	position: static; /* sonst faengt der Wrapper Bild und Scrim ein (Regel 1) */
}

/* Typnamen sind einzelne Komposita ohne Umbruchstelle: der 8em-Deckel des
   Bestandskopf-Titels wuerde "Aufenthaltscontainer" ueberlaufen lassen
   statt umzubrechen. */
.elementor .sbs-tkopf .sbs-bkopf__titel {
	max-width: none;
}

/* Kurzwege (Mini-Weiche, To-Do 143): drei Wege der Startseiten-Weiche in
   Kurzform unter dem Fliesstext, vor den Claims. Gebraucht fuehrt orange,
   Neu und Projekt als Ghost. Auf dem Foto bekommt der Ghost wie im Hero
   die Flaeche der Navigationsleiste (Regel 4 der Foto-Band-Koepfe), der
   Hover fuellt weiter blau. Abstand wie die CTA-Saeulen des Heros. */
.sbs-tkopf__weiche {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.elementor .sbs-bkopf--foto .sbs-tkopf__weiche .sbs-btn-ghost {
	background: var(--surface-base);
}

.elementor .sbs-bkopf--foto .sbs-tkopf__weiche .sbs-btn-ghost:hover,
.elementor .sbs-bkopf--foto .sbs-tkopf__weiche .sbs-btn-ghost:focus-visible {
	background: var(--blue);
}

/* ---------- Produktkopf: Scrim ueber base (Widget-Schalter scrim_kopf) ----
   Dritte Kopfform neben Verlauf-Hero und Foto-Band (Kundenbeschluss
   2026-08-19, Mockup produktkopf-scrim v3). Der Verlauf liegt als
   Hintergrund auf dem SEKTIONScontainer — per :has(), weil das Widget
   seinen Vorfahren nicht stylen kann, und mit (0,4,0), weil das
   Instanz-Weiss der Kopfsektion in post-9011 spaeter laedt. Er deckt
   damit auch die Krumen-Zone; die vertikale Abdunklung oben macht die
   Krume ueber die volle Breite lesbar (Kundenbefund am Mockup v2).
   Dichte Zone rechts unter der Kaufzeile, die Galerie steht auf der
   hellen Seite. Akzentkante nach Regel 7. Rueckweg: Schalter aus. */
.elementor .e-con.e-parent:has(.sbs-p2-kopf--scrim) {
	background:
		linear-gradient(180deg, rgba(8,28,58,.60) 0px, rgba(8,28,58,.55) 44px, rgba(8,28,58,0) 130px),
		linear-gradient(270deg, rgba(8,28,58,.86) 0%, rgba(8,28,58,.62) 44%, rgba(8,28,58,.16) 100%),
		var(--surface-base);
	border-bottom: 4px solid var(--accent);
}

/* Unter 900px stehen Galerie und Kaufzeile untereinander, der Text also
   links auf der hellen Seite des Verlaufs (Befund Wolf Goger 19.10.,
   Preiszusatz und Bestand kaum lesbar). Dort traegt der ganze Kopf die
   dunkle Stufe des Verlaufs; am Desktop bleibt alles wie oben. */
@media (max-width: 900px) {
	.elementor .e-con.e-parent:has(.sbs-p2-kopf--scrim) {
		background:
			linear-gradient(rgba(8,28,58,.86), rgba(8,28,58,.86)),
			var(--surface-base);
	}
}

/* Krume hell ueber die volle Breite — die obere Abdunklung traegt sie */
.sbs-p2-kopf--scrim .sbs-p2-krume,
.sbs-p2-kopf--scrim .sbs-p2-krume b {
	color: var(--text-on-photo);
}

.elementor .sbs-p2-kopf--scrim .sbs-p2-krume a {
	color: var(--text-on-photo);
}

.elementor .sbs-p2-kopf--scrim .sbs-p2-krume a:hover {
	color: #fff;
}

/* On-Photo-Farben der Kaufzeile (Regel 3 der Foto-Band-Designregel) */
.sbs-p2-kopf--scrim .sbs-eyebrow {
	color: var(--accent-on-dark);
	font-weight: 600;
}

.elementor .sbs-p2-kopf--scrim .sbs-p2-kauf__titel {
	color: #fff;
}

.sbs-p2-kopf--scrim .sbs-p2-kauf__lieferzeit {
	color: var(--text-on-photo);
}

.sbs-p2-kopf--scrim .sbs-p2-preis__betrag {
	color: #fff;
}

.sbs-p2-kopf--scrim .sbs-p2-preis__zusatz {
	color: var(--text-on-photo);
}

/* Sofort-Pille in der On-Dark-Fassung: satte Fuellung statt Pastell —
   die 12%-Toenung ginge auf dem Scrim unter */
.sbs-p2-kopf--scrim .sbs-p2-marke {
	background: var(--status-green);
	color: #fff;
}

/* Bestandszeile auf dem Scrim: On-Photo-Grau, die Menge weiss */
.sbs-p2-kopf--scrim .sbs-p2-kauf__bestand {
	color: var(--text-on-photo);
}

.sbs-p2-kopf--scrim .sbs-p2-kauf__bestand b {
	color: #fff;
}

/* Hinweissatz der Kaufzeile bei verkauften Gebrauchtcontainern (To-Do 232,
   sbs-verkauft.php): steht an Stelle von Preis und Bestandszeile */
.sbs-p2-kauf__hinweis {
	font-size: 15px;
	line-height: 1.55;
	color: var(--text-muted);
	margin: 14px 0 24px;
	max-width: 34em;
}

.sbs-p2-kauf__hinweis b {
	color: var(--text);
	font-weight: 600;
}

.sbs-p2-kopf--scrim .sbs-p2-kauf__hinweis {
	color: var(--text-on-photo);
}

.sbs-p2-kopf--scrim .sbs-p2-kauf__hinweis b {
	color: #fff;
}

.sbs-p2-kopf--scrim .sbs-p2-marke::before {
	background: #fff;
}

/* Ghost-Button nach Regel 4; der Blau-Hover steht ausdruecklich hier,
   weil diese Basisregel spaeter laedt als der System-Hover */
.elementor .sbs-p2-kopf--scrim .sbs-btn-ghost {
	background: var(--surface-base);
}

.elementor .sbs-p2-kopf--scrim .sbs-btn-ghost:hover,
.elementor .sbs-p2-kopf--scrim .sbs-btn-ghost:focus-visible {
	background: var(--blue);
}

/* Das Bild sitzt 10px tiefer im Rahmen.
 *
 * Als Innenabstand am Rahmen, nicht als Aussenabstand am Bild: der Rahmen
 * traegt overflow:hidden, und ".sbs-media img" hat height:100%. Ein
 * margin-top am Bild wuerde es dort, wo die Hoehe gerade aufgeht, unten um
 * dieselben 10px beschneiden. Padding verkleinert stattdessen den Innenraum,
 * das Bild passt in jedem Fall.
 *
 * box-sizing gehoert zwingend dazu: der Rahmen ist ein Flex-Kind mit
 * flex:1 1 auto. Ohne border-box legte das Padding 10px auf die Rahmenhoehe
 * drauf, die Kachel wuechse mit — und die Buendigkeit ihrer Unterkante zur
 * Buttonunterkante waere um 10px dahin.
 */
.sbs-hero__frame {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-height: 0;
	padding-top: 10px;
	border-radius: 0;
}

.sbs-hero__frame-badge {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--surface-card);
	border: 1px solid var(--blue);
	border-radius: var(--radius-sm);
	padding: 9px 16px;
	margin-bottom: 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--blue);
}

.sbs-hero__frame-badge-icon {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--accent);
	flex: none;
}

.sbs-hero__caption {
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 12px;
	color: var(--text-muted);
	margin: 14px 0 0;
	text-align: center;
}

@media (max-width: 900px) {
	.sbs-hero__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.sbs-hero__frame {
		aspect-ratio: 16 / 10;
	}
}

/* =========================================================
   Stats-Leiste
   ========================================================= */

/*
 * Trennstreifen zwischen Hero und Trust-Leiste, bewusst schmal.
 * Kein Karten-Look: keine Rundungen, keine Schatten, keine Flaeche je Zelle.
 * Die Wirkung traegt allein das Band, die Haarlinien und das Orange der Werte.
 *
 * Die Flaeche (--surface-accent) sitzt auf dem aeusseren Elementor-Container,
 * nicht hier — sonst endet sie 40px vor jeder Seitenkante. Deshalb hat
 * .sbs-stats selbst weder Hintergrund noch Innenabstand.
 */

/*
 * Der Aussenabstand nach unten (20px) steht bewusst NICHT hier, sondern im
 * Container-Setting selbst. Elementor steuert Container-Abstaende ueber
 * --margin-block-end; ein margin-bottom an dieser Stelle wird davon
 * ueberschrieben und bleibt wirkungslos.
 */
.sbs-stats-band {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.sbs-stats__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0;
	padding: 18px 24px;
	text-align: center;
}

.sbs-stats__item {
	padding: 0 18px;
	border-right: 1px solid var(--line);
}

/* Feste Hoehe, damit die Grundlinien aller sechs Kacheln buendig bleiben —
   nur eine Kachel traegt hier Text, der Rest ein geschuetztes Leerzeichen.
   Nicht auf auto setzen. */
.sbs-stats__prefix {
	display: block;
	height: 13px;
	line-height: 13px;
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 10px;
	color: var(--text-muted);
	text-transform: lowercase;
	letter-spacing: .04em;
}

.sbs-stats__value {
	display: block;
	font-family: var(--font-display);
	font-size: 26px;
	line-height: 1;
	/* Bebas Neue liegt nur als 400 vor; ohne diese Zeile wuerde das <b>
	   synthetisch fett gerendert. */
	font-weight: 400;
	color: var(--accent);
	margin: 0;
}

.sbs-stats__label {
	display: block;
	margin-top: 4px;
	font-family: var(--font-body);
	font-size: 10px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Einziger Breakpoint — sechs Spalten tragen bis 600px, keine Tablet-Zwischenstufe. */
@media (max-width: 600px) {
	.sbs-stats__grid {
		grid-template-columns: repeat(3, 1fr);
		/* Abstand zwischen den beiden Zeilen, sonst klebt das zweite „seit“
		   am Label darueber (Befund Wolf Goger 19.10.2026 am Handy) */
		row-gap: 20px;
		padding: 14px 12px;
	}
}

/*
 * Kennzahlenband der Bestandsübersicht: dieselbe Sprache, vier Spalten.
 * minmax(0, 1fr) statt 1fr — die min-content-Untergrenze von 1fr hat im
 * Mockup eine Spalte aufgedrückt (Vorfall KOM-002); im neuen Rastercode
 * gibt es kein nacktes 1fr mehr.
 */
.sbs-stats--bestand .sbs-stats__grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Im 2x2-Raster stuende "davon" unter den Modellen, obwohl es die Stueck
   am Lager teilt (Befund Wolf Goger 19.10.). Darum oben "insgesamt" neben
   "davon", darunter Modelle neben Stand; am Desktop bleibt die Reihe. */
@media (max-width: 600px) {
	.sbs-stats--bestand .sbs-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 16px;
	}

	.sbs-stats--bestand .sbs-stats__item:nth-child(2),
	.sbs-stats--bestand .sbs-stats__item:nth-child(3) {
		order: -1;
	}
}

/* =========================================================
   Trust-Leiste
   ========================================================= */

/*
 * Zweites Trennband in Folge, direkt unter der Kennzahlenleiste. Bewusst
 * weiss — die einzige Stelle im Dokument, an der Weiss als Sektionsflaeche
 * auftritt (sonst ist es Karten vorbehalten). Es schliesst die grau-blaue
 * Kennzahlenleiste ab, statt mit ihr zu verschmelzen.
 *
 * Die Flaeche selbst sitzt im Container-Setting, nicht hier — siehe Kapitel 3
 * der Referenznotiz. Nur die Unterkante liegt auf der Container-Klasse
 * .sbs-trust-band, damit sie ueber die volle Breite laeuft und nicht im
 * 1180px-Raster endet.
 *
 * Keine eigene Oberkante mehr (Kundenentscheidung 2026-08-19): Die Leiste
 * schliesst direkt an die Kennzahlenleiste an, deren Unterkante ist die EINE
 * Haarlinie zwischen beiden. Der 20px-Zwischenstreifen vom 2026-08-04 ist
 * Geschichte — sein margin-bottom im Container-Setting der Kennzahlenleiste
 * (3ddff1b) steht auf 0, das faerbende ::after ist entfernt. Wer den
 * Streifen zurueckwill: margin-bottom 20 setzen, border-top und das
 * ::after aus der Git-Historie wiederherstellen.
 */
.sbs-trust-band {
	position: relative;
	border-bottom: 1px solid var(--line);
}

/* Der Innenabstand gehoert ans Widget, nicht an den Container: Elementor
   steuert Container-Abstaende ueber --padding-block-* und wuerde ein padding
   von hier ueberschreiben — dieselbe Falle wie beim margin-bottom der
   Kennzahlenleiste. */
/* 31px statt der urspruenglichen 22px: Seit die Sterne in der Wertzeile stehen,
   ist der Inhalt eine Zeile flacher, und das Band wirkte gegen die 111px hohe
   Kennzahlenleiste darueber gedrungen. Zielhoehe des Bandes sind 100px
   einschliesslich der beiden Haarlinien. */
.sbs-trust {
	padding: 31px 0;
}

.sbs-trust__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
}

/* Waagerechtes Icon-Text-Paar, linksbuendig. Das ist der Unterschied zur
   Kennzahlenleiste, die rein vertikal und zentriert aufgebaut ist. Icon ueber
   den Text zu setzen und zu zentrieren macht das Band unnoetig hoch und
   verdoppelt die Anmutung der Leiste darueber. */
.sbs-trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 0 22px;
	border-right: 1px solid var(--line);
}

/* Asymmetrische Innenabstaende, damit die Trennlinien optisch mittig zwischen
   den Spalten sitzen. Die letzte Zelle traegt keine Linie — anders als in der
   Kennzahlenleiste, weil sie hier durch das linksbuendige Layout innerhalb
   der Flaeche sichtbar stehenbliebe. */
.sbs-trust__item:first-child {
	padding-left: 0;
}

.sbs-trust__item:last-child {
	padding-right: 0;
	border-right: 0;
}

.sbs-trust__icon {
	color: var(--blue);
	flex: none;
	width: 28px;
	height: 28px;
}

/* Das Orange markiert die Bewertung als das eine hervorgehobene Signal der
   Leiste. Traegt es mehr als eine Zelle, hebt sich nichts mehr ab. */
.sbs-trust__item--accent .sbs-trust__icon {
	color: var(--accent);
}

.sbs-trust__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* min-width: 0 verhindert, dass ein langer Wert das Raster aufsprengt. */
.sbs-trust__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Bebas Neue liegt nur als 400 vor; ohne font-weight wuerde das <b>
   synthetisch fett gerendert. Die Farbe ist bewusst nicht Orange — anders als
   in der Kennzahlenleiste traegt hier das Icon die Farbe. */
.sbs-trust__value {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1;
	color: var(--text);
	white-space: nowrap;
}

/* „4,9“ ist kurz genug, um umbrechen zu duerfen. */
.sbs-trust__item--stars .sbs-trust__value {
	white-space: normal;
}

.sbs-trust__label {
	font-family: var(--font-body);
	font-size: 11px;
	line-height: 1.3;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 0;
}

/* Alle fuenf Sterne voll, obwohl der Wert 4,9 lautet — eine Halbdarstellung
   bei dieser Groesse liest sich als Darstellungsfehler, nicht als Praezision. */
.sbs-trust__stars {
	display: flex;
	gap: 2px;
	margin: 2px 0 3px;
}

/*
 * Sterne neben den Wert statt darunter (seit 2026-08-04, auf Kundenwunsch).
 * Die urspruengliche Spezifikation schob sie zwischen Wert und Beschriftung
 * ein; jetzt stehen "4,9" und die Sterne in einer Zeile, die Beschriftung
 * darunter.
 *
 * Der Umbruch entsteht ueber "flex-basis: 100%" an der Beschriftung, nicht
 * ueber zusaetzliches Markup — das Widget bleibt unveraendert. Nur die Zelle
 * mit Sternen ist betroffen, die uebrigen drei behalten ihren senkrechten
 * Aufbau.
 */
.sbs-trust__item--stars .sbs-trust__text {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
}

.sbs-trust__item--stars .sbs-trust__stars {
	margin: 0;
}

/* Kein eigener Abstand nach oben — sonst sitzt die Beschriftung dieser Zelle
   tiefer als die der drei anderen, deren Wert und Label unmittelbar
   aufeinanderfolgen. */
.sbs-trust__item--stars .sbs-trust__label {
	flex-basis: 100%;
}

.sbs-trust__stars svg {
	width: 11px;
	height: 11px;
	fill: var(--accent);
	display: block;
}

/*
 * Eine Stufe: unter 900px zwei Zeilen à zwei Spalten — und dabei bleibt
 * es bis ganz hinunter, das Band bricht nie auf eine Spalte (Kundenwunsch
 * 2026-08-18, Vorbild ist der saubere 2x3-Umbruch der Kennzahlenleiste;
 * erledigt zugleich To-Do 28). Die Mittellinie tragen nur die Zellen der
 * linken Spalte; vorher stand die Linie von Zelle 2 am Aussenrand. Die
 * Innenabstaende sind je Spalte gespiegelt, damit beide Zeilen buendig
 * fluchten.
 */
@media (max-width: 900px) {
	.sbs-trust__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 18px;
	}

	/* Linksbuendig statt zentriert (Kundenbefund 2026-08-26): Zentrierte
	   Zellen setzen ungleich breite Paare in den zwei Zeilen versetzt —
	   die schmale Depotflaeche rutschte unter der breiten Bewertung nach
	   rechts. Mit flex-start fluchten beide Zeilen je Spalte; der Desktop
	   (vier Zellen nebeneinander) bleibt zentriert. */
	.sbs-trust__item {
		justify-content: flex-start;
	}

	.sbs-trust__item:nth-child(odd) {
		padding-left: 0;
		border-right: 1px solid var(--line);
	}

	.sbs-trust__item:nth-child(even) {
		padding-right: 0;
		border-right: 0;
	}
}

/* =========================================================
   Auswahlkarten (Choice Cards) — die Entscheidungsweiche
   =========================================================

   Die drei Karten sind absichtlich NICHT gleichwertig gestaltet. Die
   Abstufung traegt die Geschaeftspriorisierung: Gebrauchtware ist das
   Hauptgeschaeft, Neuware das Nebenangebot. Wer alle drei gleich rahmt
   oder Karte 3 ebenfalls eine Toenung gibt, loest die Rangfolge auf und
   damit den Zweck der Sektion.

   Rangfolge:
     Karte 1 (primary)   orange Toenung + oranger Rahmen  + primaerer CTA
     Karte 2 (secondary) blaue  Toenung + neutraler Rahmen + primaerer CTA
     Karte 3 (neutral)   weiss, flach  + neutraler Rahmen + Outline-CTA

   Der orange Rahmen erscheint genau einmal auf der Seite. */

.sbs-choice {
	border-width: 2px;
	padding: 40px 28px;
	text-align: center;
	transition: transform .3s ease, box-shadow .3s ease;
	/* Bezugspunkt fuer die Klickflaeche des CTA, siehe unten */
	position: relative;
}

/* Hebt staerker als .sbs-card (dort -4px / .18). Beide Selektoren haben
   dieselbe Spezifitaet — dass hier gewinnt, haengt allein daran, dass dieser
   Block spaeter in der Datei steht. Nicht nach oben verschieben. */
.sbs-choice:hover {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px -12px rgba(32, 38, 43, .25);
}

/* Die Toenung ersetzt die weisse Kartenflaeche aus .sbs-card. Zum
   transparenten Ende hin scheint deshalb die Sektionsflaeche durch
   (--surface-base), nicht Weiss. Das ist so gewollt. */
.sbs-choice--primary {
	border-color: var(--accent);
	background: linear-gradient(135deg, rgba(227, 82, 5, .04) 0%, transparent 100%);
}

.sbs-choice--secondary {
	background: linear-gradient(135deg, rgba(13, 42, 92, .04) 0%, transparent 100%);
}

/* .sbs-choice--neutral erbt Weiss und die neutrale Linie unveraendert
   von .sbs-card — bewusst keine eigene Regel. */

/* Feste 28px statt der Stufe aus .sbs-h3 (clamp 22-28px): die Karten
   sollen ihre Titel auch auf schmalen Schirmen unveraendert tragen.

   Das ".elementor" davor ist noetig, nicht kosmetisch: das Kit setzt
   ".elementor-kit-258 h3 { font-size: 18px }" — Spezifitaet (0,1,1) gegen
   (0,1,0) einer blossen Klasse, und post-258.css laedt ausserdem spaeter.
   Die Regel gilt ohne Media Query, der Titel stand deshalb auf JEDER Breite
   auf 18px. Dasselbe trifft ".sbs-h3" ueberall dort, wo die Klasse direkt auf
   einem <h3> sitzt statt auf einem Heading-Widget. */
.elementor .sbs-choice__title {
	font-size: 28px;
	margin-bottom: 6px;
}

/* Gemeinsame Pillenform von Untertitel und Badge.
 *
 * Beide sehen seit dem 2026-08-04 gleich aus: transparent, 1px Kontur in der
 * Farbe der Karte, Schrift in --text-muted wie die Merkmalliste. Deshalb steht
 * die Form hier einmal statt zweimal — auch damit sie erhalten bleibt, falls
 * die Badges spaeter wegfallen. Unterscheiden tun sich die beiden nur in
 * ihren Abstaenden, siehe unten.
 *
 * Der Rand steht bewusst NICHT auf currentColor: sonst wuerde er der Schrift
 * folgen und alle drei Konturen waeren grau.
 *
 * Der Untertitel war vorher blaue Versalschrift ohne Kontur (13px, 700,
 * .08em). Diese Werte sind mit der Pillenform entfallen.
 */
.sbs-choice__pill {
	display: block;
	width: fit-content;
	padding: 6px 12px;
	border: 1px solid;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.sbs-choice--primary .sbs-choice__pill {
	border-color: var(--accent);
}

.sbs-choice--secondary .sbs-choice__pill {
	border-color: var(--blue);
}

.sbs-choice--neutral .sbs-choice__pill {
	border-color: var(--text-muted);
}

/* "auto" seitlich, weil die Pille nur ihre Inhaltsbreite einnimmt und sonst
   links kleben wuerde statt mittig zu sitzen.

   Die Schrift steht hier in --blue, nicht im --text-muted der Grundform. Der
   Wert sitzt bewusst am Untertitel und nicht an .sbs-choice__pill: die
   Grundform bleibt damit neutral, falls dort spaeter wieder eine zweite Pille
   haengt. Kontrast 13,1:1. */
.sbs-choice__subtitle {
	margin: 0 auto 20px;
	color: var(--blue);
}

/* text-align:left + display:inline-block gehoeren zusammen: die Liste sitzt
   als Inline-Block mittig im zentrierten Kartentext, ihr Text laeuft aber
   links. Auf display:block klebt sie am linken Rand, auf text-align:center
   flattern die Zeilen. */
.sbs-choice__features {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	text-align: left;
	display: inline-block;
}

.sbs-choice__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.45;
	color: var(--text-muted);
	margin: 12px 0;
}

/* Haekchen als Textglyphe, nicht als SVG oder Icon-Font. Als Pseudo-Element,
   damit es nicht im Vorlesefluss landet — es ist reine Dekoration. */
.sbs-choice__features li::before {
	content: "\2713";
	flex: none;
	color: var(--accent);
	font-weight: 800;
	font-size: 16px;
	margin-top: -2px;
}

/* Freitext statt Merkmalliste (404-Vorlage, 23.09.2026): ein Satz je Karte,
   mittig wie der Rest der Karte, Schrift wie die Listenzeilen. 24px unten
   plus die 12px des CTA-Wraps ergeben dieselben 36px wie bei der Liste. */
.sbs-choice__text {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--text-muted);
	margin: 0 0 24px;
}

/* Eigene Definition statt .sbs-badge: bis auf die Pillenform stimmt dort
   nichts ueberein (Mono statt Inter, andere Laufweite, anderes Padding,
   inline-flex statt zentriertem Block). .sbs-badge haengen sechs weitere
   Widgets an und bleibt unangetastet.

   Der Badge war bis zum 2026-08-04 orange gefuellt mit weisser Schrift — auf
   allen drei Karten gleich. Gemessen war er dabei auf jeder Karte BREITER als
   der Button darunter (266/291/238 gegen 227/255/224px), stand also als
   groessere Pille ueber der kleineren und las sich als zweite Schaltflaeche.
   Jetzt tragen alle drei eine Kontur in der Farbe ihrer Karte.

/* Der Badge holt seine Form aus .sbs-choice__pill weiter oben; hier steht nur
   noch, was ihn vom Untertitel unterscheidet.

   Zur Vorgeschichte: Der Badge war bis zum 2026-08-04 orange gefuellt mit
   weisser Schrift und dabei auf jeder Karte BREITER als der Button darunter
   (266/291/238 gegen 227/255/224px) — er las sich als zweite, groessere
   Schaltflaeche. Orange als 11px-Schrift kam ausserdem nur auf 3,60:1 und lag
   unter den 4,5:1 fuer Text dieser Groesse. Als reine Konturlinie gilt die
   Schwelle fuer nicht-textliche Elemente (3:1), die ist erfuellt.

   1px statt der 1,5px der Buttons — auf einer 11px-Pille traegt der
   Buttonrand zu dick auf. */
.sbs-choice__badge {
	margin: 14px auto 0;
}

/* Abstand ueber dem Button, nachdem die Badgereihe entfallen ist.
 *
 * Achtung beim Rechnen: Die Werte ADDIEREN sich. Die Merkmalliste ist
 * display:inline-block und damit kein Block-Geschwister — ihre 24px
 * Aussenabstand nach unten fallen NICHT mit diesem Wert zusammen. Der
 * sichtbare Abstand ist also 24 + 12 = 36px. Mit 32px hier waeren es 56px
 * gewesen, und genau so ist es beim ersten Versuch auch gekommen.
 *
 * 36px ueber dem Button gegen 42px bis zum Kartenrand: bewusst nicht gleich.
 * Der Innenabstand einer Karte sollte mindestens so gross sein wie die
 * Abstaende in ihr, sonst kippt der Button optisch nach aussen statt zum
 * Inhalt zu gehoeren.
 */
.sbs-choice__cta-wrap {
	margin-top: 12px;
}

/*
 * Ganze Karte klickbar, wie im Sortiment — hier aber ohne Markupaenderung:
 * Der CTA ist bereits ein Link, und seine Beschriftung ist je Karte
 * verschieden ("Bestand ansehen", "Umbau anfragen", ...). Er taugt damit als
 * Linkname, anders als die zwoelfmal gleiche Zeile im Sortiment, wo der Titel
 * den Link tragen musste.
 *
 * Zwei Nebenwirkungen, beide gewollt: Der Zeiger wird ueber der ganzen Karte
 * zur Hand, und der Button zeigt seinen Hover-Zustand, sobald er irgendwo auf
 * der Karte steht — das ::after gehoert zum Button, also gilt dessen :hover.
 *
 * Preis wie im Sortiment: Text innerhalb der Karte laesst sich nicht mehr
 * markieren.
 */
.sbs-choice__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Tastaturbedienung bekommt dieselbe Rueckmeldung wie die Maus */
.sbs-choice:focus-within {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px -12px rgba(32, 38, 43, .25);
}

.elementor .sbs-choice__cta:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

/* Der Button bleibt auf seiner Inhaltsbreite (vorher 100%). Die Aussenmasse
   stimmen ohne Zutun: .sbs-btn traegt 11,5/22,5 plus 1,5px Rand — gerendert
   also genau die 13/24 dieser Sektion. */

/* Sektionskopf der Weiche: schmaler als die Karten darunter, zentriert.

   Steht hier und nicht im Container-Setting, weil Elementor 4.2 auf dieser
   Installation KEIN --width ausgibt — nachgemessen am 2026-08-04: sieben
   Container der Startseite tragen ein width-Setting, das erzeugte
   post-8746.css enthaelt dazu null Regeln, alle sieben rendern auf 100%.
   Wer hier eine Breite im Editor setzt, sieht sie nicht wirken.

   Der Abstand nach unten (52px) und der zur Ueberschrift (12px) stehen
   dagegen sehr wohl im Container-Setting — flex_gap wird ausgegeben. */
.elementor .sbs-split-head {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

/* Linksbuendiger Sektionskopf, 700px — dieselbe Breite wie der Kopf der
   Referenzen und des Sortiments, nur ohne eigenen Namen je Sektion. Neue
   Sektionen nehmen diese Klasse.

   Damit gibt es die Kopfbreite an drei Stellen: hier, als .sbs-ref__head und
   als style="max-width:700px" im Sortiment-Widget. Das ist To-Do 42; wenn es
   drankommt, ist diese Regel das Ziel, auf das die anderen beiden zeigen. */
.elementor .sbs-sec-head {
	max-width: 700px;
}

/* Dreispaltig, ab 900px einspaltig.

   Der Selektor zielt auf .e-con-inner, nicht auf den Container selbst:
   Elementor legt bei einem "boxed" Container einen inneren Wrapper an, und die
   drei Karten sitzen dort. Ein display:grid auf dem aeusseren Element hat genau
   ein Rasterkind — den Wrapper — und die Karten blieben beim Flex-Layout
   stehen. Genau so ist es beim ersten Versuch passiert; sichtbar wurde es
   daran, dass der Wrapper auf 709px schrumpfte statt 1200px zu fuellen.

   Die zweite Zeile faengt den Fall ab, dass der Container im Editor auf volle
   Breite gestellt wird — dann faellt der Wrapper weg und der Container ist
   selbst das Raster.

   Der Abstand steht bewusst NICHT hier, sondern im Elementor-Container-Setting
   (dieselbe Aufteilung wie bei der Kennzahlenleiste). Er sitzt ohnehin schon
   auf .e-con-inner und gilt fuer Grid unveraendert weiter. */
.elementor .sbs-split-grid.e-con-boxed > .e-con-inner,
.elementor .sbs-split-grid:not(.e-con-boxed) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
	.elementor .sbs-split-grid.e-con-boxed > .e-con-inner,
	.elementor .sbs-split-grid:not(.e-con-boxed) {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Sortiment (Typ-Kacheln)
   ========================================================= */

.sbs-tgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.sbs-tgrid--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.sbs-tgrid--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

/* 4/3 wie Referenzen und Bestand. Sechs der zwoelf Motive liegen nativ auf
   4:3 und werden gar nicht beschnitten, fuenf verlieren 5,6% je Seite, und
   das einzige Hochformat (Treppenanlagen) traegt den Mittelschnitt. */
/* Bezugspunkt fuer die ueber die Kachel gezogene Klickflaeche des Titellinks */
.sbs-tcard {
	position: relative;
}

.sbs-tcard__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.sbs-tcard__body {
	padding: 14px 18px 20px;
}

.sbs-tcard__badge {
	background: var(--surface-accent);
	color: var(--blue);
	margin-bottom: 10px;
}

.elementor .sbs-tcard__title {
	font-size: 18px;
	margin-bottom: 6px;
}

.sbs-tcard__text {
	font-size: 13.5px;
	margin-bottom: 16px;
}

.sbs-tcard__ctas {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/*
 * Die ganze Kachel ist klickbar — aber der Link sitzt auf dem Titel, nicht auf
 * der Kachel. Sein ::after zieht die Klickflaeche ueber die Karte. Vorteil
 * gegenueber einem <a> um alles: Der Link heisst "Buerocontainer" statt
 * "Buerocontainer Ein Buero dort, wo gerade keines steht ...", und die Tastatur
 * landet auf dem Titel.
 *
 * Preis: Text innerhalb der Kachel laesst sich nicht mehr markieren.
 *
 * Das ".elementor" ist auch hier tragend — ".elementor a" setzt 16px/500 mit
 * (0,1,1) und wuerde die Titelgroesse sonst ueberschreiben.
 */
.elementor .sbs-tcard__link {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
}

/* Kacheltitel-Hover: orange OHNE Unterstrich - das gewachsene
   Startseiten-Verhalten, vom Kunden am 2026-08-18 fuer alle
   Kachelsorten festgelegt (bewusste Hover-Ausnahme von "Orange darf
   umranden, nicht beschriften"). Ausdruecklich statt ueber die
   Basisregel .elementor a:hover, damit :focus-visible mitzieht und
   keine Deko aus anderen Regeln durchschlaegt. */
.elementor .sbs-tcard__link:hover,
.elementor .sbs-tcard__link:focus-visible {
	color: var(--accent);
	text-decoration: none;
}

.sbs-tcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Sichtsignal, kein Link — siehe Kommentar im Widget. Blau statt Orange, weil
   Orange als Textfarbe auf heller Flaeche nur 3,60:1 erreicht und damit unter
   der Schwelle fuer Kleinschrift liegt. */
.sbs-tcard__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 13.5px; /* = Kacheltext, Beschluss 28.08.: nur Farbe und Gewicht unterscheiden */
	font-weight: 600;
	color: var(--blue);
}

.sbs-tcard__more::after {
	transition: transform .15s ease;
}

.sbs-tcard:hover .sbs-tcard__more::after {
	transform: translateX(3px);
}

/* Staerkere Rueckmeldung als die 4px aus .sbs-card:hover — eine klickbare
   Flaeche muss deutlicher antworten. Werte wie bei .sbs-choice. Gewinnt ueber
   .sbs-card:hover allein durch die spaetere Position in dieser Datei; nicht
   nach oben verschieben. :focus-within zieht die Tastaturbedienung mit. */
.sbs-tcard:hover,
.sbs-tcard:focus-within {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px -12px rgba(32, 38, 43, .25);
}

.elementor .sbs-tcard__link:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

/* Der Zweit-CTA ist auf allen zwoelf Eintraegen leer. Faellt er wieder an,
   braucht er den z-index, sonst liegt er unter der Klickflaeche des Titels. */
.sbs-tcard__cta--secondary {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	padding: 8px 14px;
	border-radius: var(--radius-sm);
	text-decoration: none;
}

.elementor .sbs-tcard__cta--secondary {
	position: relative;
	z-index: 2;
	border: 1px solid var(--line);
	color: var(--text);
}

.elementor .sbs-tcard__cta--secondary:hover {
	border-color: var(--blue);
	color: var(--blue);
}

@media (max-width: 1024px) {
	.sbs-tgrid,
	.sbs-tgrid--cols-3,
	.sbs-tgrid--cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.sbs-tgrid,
	.sbs-tgrid--cols-3,
	.sbs-tgrid--cols-2 {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Referenzen (Projektkarten)
   =========================================================
   Kein gleichmaessiges Raster, sondern ein Leitprojekt links und rechts zwei
   kompakte Teaser plus der Eingang zur Uebersicht. Acht Sektionen der
   Startseite sind gleich breite Zellen in einer Reihe (6 · 4 · 3 · 4 · 4 · 3 ·
   3 · 4); hier ist der Bruch gewollt, weil der Inhalt als einziger wirklich
   ungleich ist — ein Werkstattumbau und eine dreigeschossige Anlage gehoeren
   nicht in gleich breite Zellen.
   ========================================================= */

.sbs-ref__head {
	max-width: 700px;
	margin-bottom: 56px;
}

.sbs-ref__intro {
	margin-top: 14px;
}

.sbs-rgrid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 24px;
}

/* Die beiden Teaser nehmen ihre Inhaltshoehe, der Uebersichtseingang schluckt
   den Rest — daher "1fr" in der dritten Zeile. So schliessen beide Spalten
   unten buendig ab, ohne dass ein Bildrahmen sein Verhaeltnis aufgeben muss. */
.sbs-rgrid__side {
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: 24px;
}

/* position:relative traegt die Klickflaeche des Titel-Links, overflow:hidden
   die Rundung des Bildes an der Kartenkante. */
.sbs-rcard {
	position: relative;
	overflow: hidden;
}

.sbs-rcard__media {
	aspect-ratio: 16 / 10;
	border-radius: 0;
}

.sbs-rcard__body {
	padding: 18px 20px 22px;
}

.sbs-rcard--lead .sbs-rcard__body {
	padding: 24px 28px 28px;
}

/* Kompakte Karte: Bild links, Text rechts. Hier bestimmt der Textblock die
   Kartenhoehe und das Bild fuellt sie — sein Verhaeltnis haengt also an der
   Textlaenge. Gemessen bei 48% Bildbreite: 16/10,4 und 16/9,5, also rund
   sechs Prozent um das Sollverhaeltnis. Fuer den Zuschnitt heisst das 5 bis
   13% Breitenverlust gegenueber 25% im alten 4/3-Rahmen.
   Kacheltexte sollten unter rund 70 Zeichen bleiben; bei 42% Bildbreite und
   1100px Fensterbreite brauchte der Text drei Zeilen und drueckte das
   Verhaeltnis auf 16/13 — deshalb bricht die Zweiteilung schon bei 1240px. */
.sbs-rcard--side {
	display: grid;
	grid-template-columns: 48% 1fr;
	align-items: stretch;
}

.sbs-rcard--side .sbs-rcard__media {
	aspect-ratio: auto;
	height: 100%;
}

.sbs-rcard--side .sbs-rcard__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 16px 18px;
}

/* Faktenzeile in der Sprache der Praefixzeile aus der Kennzahlenleiste. Sie
   traegt die Spannweite des Portfolios: die Zahlen erzaehlen sie, ohne dass
   ein Satz sie behaupten muss. Ersetzt den frueheren Ort-Badge. */
.sbs-rcard__facts {
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 10px;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 8px;
}

/* 18px nach der Kachelregel (Beschluss 28.08.: die Kompaktgroessen
   von Anfang August waren nie an die Familienregel vom 18.08.
   nachgezogen); die Leitkarte ueberschreibt mit 22px als Rangfolge. */
.elementor .sbs-rcard__title {
	font-size: 18px;
	margin-bottom: 8px;
}

/* Seit dem 28.08. auch die Leitkarte auf den 18px der Kachelregel
   (Kundenbeschluss); die Rangfolge tragen Flaeche und Bildgroesse. */
.elementor .sbs-rcard--lead .sbs-rcard__title {
	margin-bottom: 10px;
}

/* ".elementor a" setzt 16px/500 mit (0,1,1) und wuerde die Titelgroesse sonst
   ueberschreiben — der Link muss die Werte des Titels erben. */
.elementor .sbs-rcard__link {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
}

/* Gleiches Titel-Hover-Verhalten wie Sortiment und Bestand: orange
   ohne Unterstrich (Kundenentscheidung 2026-08-18). */
.elementor .sbs-rcard__link:hover,
.elementor .sbs-rcard__link:focus-visible {
	color: var(--accent);
	text-decoration: none;
}

.sbs-rcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* 13,5px wie alle Kacheltexte der Familie (Beschluss 28.08.);
   die Leitkarte unterscheidet sich nur noch im Abstand. */
.sbs-rcard__text {
	font-size: 13.5px;
	margin-bottom: 14px;
}

.sbs-rcard--lead .sbs-rcard__text {
	margin-bottom: 16px;
}

/* Sichtsignal, kein Link — die ganze Kachel ist einer. Blau statt Orange:
   Orange erreicht als Textfarbe auf heller Flaeche nur 3,60:1. */
.sbs-rcard__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 13.5px; /* = Kacheltext, Beschluss 28.08.: nur Farbe und Gewicht unterscheiden */
	font-weight: 600;
	color: var(--blue);
}

.sbs-rcard__more::after {
	transition: transform .15s ease;
}

.sbs-rcard:hover .sbs-rcard__more::after {
	transform: translateX(3px);
}

/* Der Eingang zur Uebersicht: eigene Flaeche statt Karte oder Button. Weiss
   ist Karten vorbehalten, Orange und Blau sind als Flaeche ausgeschlossen —
   bleibt --surface-accent, eine Stufe dunkler als die Sektionsflaeche. */
.sbs-rall {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 150px;
	padding: 28px;
	background: var(--surface-accent);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	transition: box-shadow .2s ease, transform .2s ease;
}

.sbs-rall__label {
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 10px;
}

.sbs-rall__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--blue);
	margin: 0 0 10px;
}

.sbs-rall__title::after {
	transition: transform .15s ease;
}

.elementor .sbs-rall__link {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.sbs-rall__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sbs-rall:hover .sbs-rall__title::after {
	transform: translateX(3px);
}

.sbs-rall__text {
	font-family: var(--font-body);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text-muted);
	margin: 0;
}

/* Staerkere Rueckmeldung als die 4px aus .sbs-card:hover — eine klickbare
   Flaeche muss deutlicher antworten. Werte wie bei .sbs-choice und .sbs-tcard.
   Gewinnt gegen .sbs-card:hover allein durch die spaetere Position in dieser
   Datei; nicht nach oben verschieben. */
.sbs-rcard:hover,
.sbs-rcard:focus-within,
.sbs-rall:hover,
.sbs-rall:focus-within {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px -12px rgba(32, 38, 43, .25);
}

.elementor .sbs-rcard__link:focus-visible,
.elementor .sbs-rall__link:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

.sbs-ref__cta {
	text-align: center;
	margin-top: 40px;
}

/* Die Bruecke zum Kontakt steht ueber dem Button, nicht darunter. Unter einem
   Button sitzt auf dieser Seite die Hero-Unterzeile, und die beruhigt nach der
   Entscheidung — eine Einladung gehoert davor. Die Breite ist auf dasselbe
   Mass wie der Sektionskopf gedeckelt, damit der Satz nicht ueber die vollen
   1200px laeuft und in eine Zeile passt. */
.sbs-ref__cta-intro {
	max-width: 700px;
	margin: 0 auto 18px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	/* Belegaussage vor dem CTA: voll statt gedeckt (Beschluss 28.08.,
	   Regelfall: Saetze, die eine Handlung begruenden, sind schwarz). */
	color: var(--text);
}

/* Unter 1240px faellt die Zweiteilung weg — nicht erst bei 1024. Darunter wird
   die rechte Spalte so schmal, dass der Kacheltext drei Zeilen braucht und das
   Bild ueber Gebuehr schneidet (bei 1100px gemessen: 16/13 statt 16/10). In der
   gestapelten Form hat jede Karte die volle Breite, dort gilt 16/10 wieder
   exakt. Die Leitkarte nimmt dann dieselbe kompakte Form wie die Teaser — ein
   16/10-Bild ueber die volle Breite waere sonst rund 600px hoch. */
@media (max-width: 1240px) {
	.sbs-rgrid,
	.sbs-rgrid__side {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.sbs-rcard--lead {
		display: grid;
		grid-template-columns: 48% 1fr;
		align-items: stretch;
	}

	/* In der gestapelten Form ist jede Karte so breit, dass das Bild deutlich
	   hoeher ausfaellt als der Textblock. Es kann deshalb sein Verhaeltnis
	   selbst vorgeben — ohne aspect-ratio wuerde es hier auf das Verhaeltnis
	   der Bilddatei zurueckfallen (gemessen 16/9) und die Sektion haette drei
	   verschiedene Zuschnitte an drei Fensterbreiten. */
	.sbs-rcard--lead .sbs-rcard__media,
	.sbs-rcard--side .sbs-rcard__media {
		aspect-ratio: 16 / 10;
		height: auto;
	}

	.sbs-rcard--lead .sbs-rcard__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20px 22px;
	}
}

/* Auf dem Telefon liegt das Bild wieder oben — nebeneinander bleibt fuer Bild
   und Text zu wenig Platz. Hier gilt 16/10 wieder exakt. */
@media (max-width: 560px) {
	.sbs-rcard--side,
	.sbs-rcard--lead {
		display: block;
	}

	.sbs-rcard--side .sbs-rcard__media,
	.sbs-rcard--lead .sbs-rcard__media {
		aspect-ratio: 16 / 10;
		height: auto;
	}

	.sbs-rcard--side .sbs-rcard__body,
	.sbs-rcard--lead .sbs-rcard__body {
		display: block;
		padding: 18px 20px 22px;
	}
}

/* =========================================================
   Warum SBS — Leistungsvorteile und Kundenstimmen nebeneinander
   ========================================================= */

/* Zwei ungleiche Spalten: links fuenf Leistungszeilen, rechts das senkrechte
   Karussell der Kundenstimmen. Das Verhaeltnis 1.3fr/1fr stammt aus der alten
   statischen Fassung (.why-us-content) und ergibt bei der 1200px-Box 646px
   links und 498px rechts — genug fuer eine Kundenstimme mit Portrait.

   Selektor auf .e-con-inner, aus demselben Grund wie bei .sbs-split-grid: bei
   einem "boxed" Container sitzen die Spalten im inneren Wrapper.

   Der Spaltenabstand steht im Elementor-Container-Setting (56px), nicht hier. */
.elementor .sbs-why-grid.e-con-boxed > .e-con-inner,
.elementor .sbs-why-grid:not(.e-con-boxed) {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	align-items: start;
}

/* Der Umbruch liegt bei 1200px und nicht wie sonst bei 900px, und zwar an
   einer gemessenen Grenze: Das laengste Zitat braucht 388px Textbreite, um in
   drei Zeilen zu passen; mit dem Innenabstand sind das 436px Spaltenbreite.
   Bei 1024px Fenster hat die rechte Spalte nur 392px — zwei der sechs Zitate
   wurden dort mitten im Satz abgeschnitten.

   1200px ist ausserdem der Punkt, an dem die Inhaltsbox aufhoert zu schrumpfen.
   Oberhalb davon ist die rechte Spalte konstant 468,7px breit, unabhaengig von
   der Fensterbreite. Der Zweispalter gilt damit genau dort, wo er stabil ist. */
@media (max-width: 1200px) {
	.elementor .sbs-why-grid.e-con-boxed > .e-con-inner,
	.elementor .sbs-why-grid:not(.e-con-boxed) {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Leistungsliste (Manifest)
   ========================================================= */

.sbs-manifest {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.sbs-manifest__item {
	display: flex;
	gap: 20px;
	padding: 24px 0;
	border-top: 1px solid var(--line);
}

.sbs-manifest__item:last-child {
	border-bottom: 1px solid var(--line);
}

.sbs-manifest__number {
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 13px;
	color: var(--accent);
	flex: none;
	padding-top: 3px;
}

.elementor .sbs-manifest__title {
	font-size: 17px;
	margin-bottom: 6px;
}

.sbs-manifest__text {
	font-size: 14px;
}

/* =========================================================
   Kundenstimmen (Testimonials)
   ========================================================= */

/* Das Karussell laeuft senkrecht: drei Karten uebereinander sind eine Seite,
   die Pfeile blaettern um eine Seite weiter. Die Hoehe des Fensters setzt
   sbs.js aus der gemessenen ersten Seite — im CSS kann sie nicht stehen, weil
   die Kartenhoehe von der Spaltenbreite abhaengt. Ohne JavaScript bleibt das
   Fenster offen und alle Karten stehen untereinander; das ist der gutartige
   Fall, nicht ein leerer Kasten. */
.sbs-testimonials {
	position: relative;
}

.sbs-testimonials__viewport {
	overflow: hidden;
	/* Luft fuer den Hover-Schatten der untersten Karte: der Schatten aus
	   .sbs-card:hover reicht 28px unter die Karte, der Hub 4px darueber.
	   Der Negativrand nimmt das Polster nach aussen wieder zurueck, damit
	   der Abstand zur Folgesektion unveraendert bleibt. sbs.js rechnet
	   das Polster beim Setzen der Fensterhoehe mit ein (border-box). */
	padding: 4px 0 28px;
	margin: -4px 0 -28px;
}

.sbs-testimonials__track {
	display: flex;
	flex-direction: column;
	/* Mindestens so gross wie das Schatten-Polster des Fensters (28px),
	   sonst schaut die Oberkante der naechsten Seite unten durch das
	   Polster hindurch. Der Seitenversatz wird in sbs.js gemessen, nicht
	   gerechnet — der Abstand darf sich also aendern. */
	gap: 32px;
	transition: transform .35s ease;
}

.sbs-testimonials__page {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sbs-testimonial {
	padding: 22px 24px 18px;
}

.sbs-testimonial__stars {
	display: flex;
	gap: 2px;
	margin-bottom: 10px;
}

.sbs-testimonial__stars svg {
	width: 11px;
	height: 11px;
	color: var(--accent);
}

/* Feste Hoehe von genau drei Zeilen, in beide Richtungen: min-height haelt
   kurze Zitate auf Hoehe, line-clamp schneidet lange ab. Nur so sind alle
   Karten gleich hoch — und nur dann stimmt die Seitenhoehe, die das Skript
   aus der ersten Seite misst. */
.sbs-testimonial__quote {
	font-family: var(--font-body);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--text);
	margin-bottom: 16px;
	min-height: calc(3 * 1.6em);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.sbs-testimonial__person {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sbs-testimonial__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex: none;
	display: block;
}

.sbs-testimonial__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Ersatz fuer ein fehlendes Portrait. Bebas bleibt auf 400 — die Schrift gibt
   es nur in diesem Gewicht, alles darueber rechnet Safari als Kunstfett. */
.sbs-testimonial__avatar--initialen {
	background: var(--blue);
	color: var(--text-inverse);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: .02em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sbs-testimonial__meta {
	min-width: 0;
}

.sbs-testimonial__name {
	display: block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13.5px;
	color: var(--text);
}

.sbs-testimonial__role {
	display: block;
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--text-muted);
}

.sbs-testimonials__nav {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
}

/*
 * DIE eine Stelle fuer alle Karussell-Pfeile (Kundenstimmen und
 * Lager-Teaser). Seit dem 2026-08-18 in der Ghost-Button-Sprache:
 * 1,5px blaue Kontur mit blauem Pfeil, beim Hover fuellt sich der
 * Knopf blau — auffaelliger als die fruehere graue Haarlinie, ohne
 * aufdringlich zu werden (Kundenwunsch).
 *
 * Die Flaeche MUSS im Hover und Focus ausdruecklich stehen: Hello-
 * Elementors reset.css setzt button:hover/:focus auf Rosa mit weisser
 * Schrift und laedt nach sbs.css. :focus bleibt neutral, damit der
 * Zustand nach einem Klick nicht kleben bleibt; die Tastatur bekommt
 * die Fuellung ueber :focus-visible.
 */
.sbs-testimonials .sbs-testimonials__arrow,
.elementor .sbs-lager-teaser__pfeil {
	width: 44px;
	height: 44px;
	/* Fremd-Padding (8/16 aus einer Button-Basisregel) drueckte das
	   SVG auf 10px Breite - die Pfeile waren deshalb nie so gross wie
	   gebaut (Kundenbefund 28.08.). Explizit nullen. */
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid var(--blue);
	background: var(--surface-card);
	color: var(--blue);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.sbs-testimonials .sbs-testimonials__arrow:focus,
.elementor .sbs-lager-teaser__pfeil:focus {
	background: var(--surface-card);
	border-color: var(--blue);
	color: var(--blue);
}

.sbs-testimonials .sbs-testimonials__arrow:hover:not(:disabled),
.sbs-testimonials .sbs-testimonials__arrow:focus-visible,
.elementor .sbs-lager-teaser__pfeil:hover:not(:disabled),
.elementor .sbs-lager-teaser__pfeil:focus-visible {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--text-inverse);
}

/* Der gesperrte Zustand nennt Flaeche und Farben AUSDRUECKLICH: Die
   Fuellregel oben traegt :not(:disabled), der Reset-Hover (rosa) kennt
   diese Ausnahme nicht und griffe sonst auf gesperrten Knoepfen durch
   (Kundenbefund 2026-08-18). Die (0,3,0)-Spezifitaet dieser Regel
   schlaegt den Reset auch im Hover-Zustand. */
.sbs-testimonials .sbs-testimonials__arrow:disabled,
.elementor .sbs-lager-teaser__pfeil:disabled {
	opacity: .35;
	cursor: default;
	background: var(--surface-card);
	border-color: var(--blue);
	color: var(--blue);
}

.sbs-testimonials__arrow svg,
.sbs-lager-teaser__pfeil svg {
	/* 28px statt 20 (Kundenbefund 28.08.): Die Chevron-Glyphe belegt
	   im 24er-Raster nur die halbe Flaeche - bei 20px Darstellung war
	   sie im 44px-Kreis kaum wahrnehmbar. flex:none gegen die
	   Flex-Schrumpfung im Kreis. */
	flex: none;
	width: 28px;
	height: 28px;
}

/* Einspaltig steht das Karussell unter der Leistungsliste. Die Karte ist dann
   entweder viel breiter (1200px) oder viel schmaler (Telefon) als die 468,7px
   der rechten Spalte — drei Zeilen sind in beiden Faellen die falsche Zahl. Auf
   375px braeuchte dasselbe Zitat fuenf, es wuerde also mitten im Satz
   abgeschnitten. Deshalb faellt die Klammerung hier ganz weg; die Karten
   duerfen unterschiedlich hoch werden, das Skript misst die hoechste Seite.

   Die Grenze ist dieselbe wie beim Raster und muss es bleiben: Solange zwei
   Spalten stehen, gilt die feste Zeilenzahl, danach nicht mehr. */
@media (max-width: 1200px) {
	.sbs-testimonial__quote {
		display: block;
		min-height: 0;
		overflow: visible;
	}
}

/* =========================================================
   FAQ
   ========================================================= */

.sbs-faq {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* Zeilenraster statt zweier unabhaengiger Spalten (Kundenauftrag
	   28.08.): jede Zeile teilt sich die Hoehe des hoeheren Nachbarn,
	   die Haarlinien beider Spalten fluchten dadurch pixelgenau -
	   auch bei zweizeiligen Fragen und im aufgeklappten Zustand.
	   Die Zeilenzahl je Spalte liefert das Widget als Variable. */
	grid-template-rows: repeat(var(--sbs-faq-zeilen, 6), auto);
	grid-auto-flow: column;
	gap: 0 48px;
}

.sbs-faq__item {
	min-width: 0;
	border-bottom: 1px solid var(--line);
}

.sbs-faq .sbs-faq__question {
	width: 100%;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	padding: 18px 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	/* Die Versalien kamen bisher aus dem Kit, nicht von hier. */
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--text);
	/* Hello-Elementors reset.css setzt "button { white-space: nowrap }"
	   (laedt nach sbs.css); lange Fragen schoben die Seite auf schmalen
	   Schirmen seitlich aus dem Bild. Fragen duerfen umbrechen. */
	white-space: normal;
}

/* reset.css faerbt "[type=button]:hover" pink (#c36, weisse Schrift) -
   gleiche Spezifitaet (0,2,0) wie unsere Grundregel, und bei Gleichstand
   gewinnt das spaeter geladene reset.css (Kundenbefund 2026-08-16).
   Hover und Fokus behalten deshalb ausdruecklich die eigenen Farben;
   die Rueckmeldung der Frage ist der Chevron, kein Farbwechsel. */
.sbs-faq .sbs-faq__question:hover,
.sbs-faq .sbs-faq__question:focus {
	background: none;
	color: var(--text);
	text-decoration: none;
}

.sbs-faq .sbs-faq__question > span {
	flex: 1 1 auto;
	min-width: 0;
}

.sbs-faq__chevron {
	flex: none;
	width: 16px;
	height: 16px;
	transition: transform .2s ease;
}

.sbs-faq__item.is-open .sbs-faq__chevron {
	transform: rotate(180deg);
}

.sbs-faq__answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height .25s ease;
}

.sbs-faq__answer p {
	padding: 0 0 18px;
	font-size: 14px;
}

@media (max-width: 900px) {
	.sbs-faq {
		grid-template-columns: 1fr;
		/* einspaltig zurueck in den Zeilenfluss, sonst erzeugte das
		   Spalten-Autoflow implizite zweite Spalten */
		grid-template-rows: none;
		grid-auto-flow: row;
	}
}

/* =========================================================
   Liefergebiet (Region-Box)
   ========================================================= */

.sbs-regions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px 32px;
}

.sbs-regions__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--text);
}

.sbs-regions__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: none;
}

.sbs-regions__dot--live {
	background: var(--status-green);
	box-shadow: 0 0 0 3px rgba(46, 158, 79, .15);
}

.sbs-regions__dot--standard {
	background: var(--text-muted);
}

@media (max-width: 767px) {
	.sbs-regions {
		grid-template-columns: 1fr 1fr;
	}
}

/* =========================================================
   Bestand (Availability)
   ========================================================= */

.sbs-availability__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 32px;
}

/* .elementor-Präfix nötig: Kit-CSS (.elementor-kit-258 button:hover) setzt
   border-style:none und wuerde der Pill sonst im Hover den eigenen Rand
   nehmen – das ergaebe einen 2px-Breitensprung. */
/* Versalien und Laufweite standen hier bisher nicht — beides kam vom Kit
   (uppercase, .3px) und sah nur zufaellig richtig aus. Jetzt ausdruecklich
   gesetzt, damit die Pille nicht mitwandert, wenn das Kit sich aendert. */
.elementor .sbs-availability .sbs-pill {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 9px 16px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--line);
	background: var(--surface-card);
	color: var(--text);
	cursor: pointer;
}

/* Ausgegraut heisst: diese Auswahl gibt es in Kombination mit dem, was schon
   gewaehlt ist, nicht. Der Zeiger wird zum Standardpfeil, damit die Pille auch
   ohne Farbunterschied als nicht anklickbar zu erkennen ist - ein Viertel der
   Maenner mit Rot-Gruen-Schwaeche sieht den Kontrastabfall sonst kaum.

   Kein display:none: Wer den Filter kennt, soll sehen, DASS es ihn gibt und
   dass er hier gerade nichts findet. Eine verschwindende Leiste verwirrt mehr,
   als sie hilft. */
.elementor .sbs-availability .sbs-pill:disabled {
	opacity: .38;
	cursor: default;
	background: transparent;
}

.elementor .sbs-availability .sbs-pill.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--text-inverse);
}

/* Drei Kacheln je Reihe. Bis 11.08.2026 waren es vier; die Karten tragen seit
   den Zuordnungszeilen mehr Text, und der bekommt hier 354px statt 253px
   Breite. Preis: das Bild haengt an aspect-ratio 4/3 und waechst mit der
   Spalte mit, die Seite wird dadurch laenger.
   minmax(0, 1fr) statt 1fr: die min-content-Untergrenze war hier latent
   dieselbe Falle wie im Mockup-Raster (Vorfall KOM-002) - behoben mit der
   Umstellung des Teasers auf die Drei-Block-Kachel am 2026-08-18. */
.sbs-inv {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.sbs-invcard__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	position: relative;
}

.sbs-invcard__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--text);
	color: var(--text-inverse);
}

.sbs-invcard__body {
	padding: 14px 16px 18px;
}

.elementor .sbs-invcard__title {
	font-size: 14px;
	margin-bottom: 4px;
}

/* Die ganze Kachel fuehrt zur Produktseite, aber der Link sitzt am Titel.
   Ein <a> um die komplette Kachel waere zwar weniger Code, wuerde einem
   Screenreader aber Bild, Preis und Stueckzahl als einen einzigen Linktext
   vorlesen. So bleibt der Titel der Linktext, und die Flaeche darueber
   kommt aus dem ::after.

   `color: inherit; font: inherit` ist Pflicht, nicht Kosmetik: Seit der
   Entkernung von Kit 258 traegt `.elementor a` Farbe, Groesse und Gewicht
   mit Spezifitaet (0,1,1) und wuerde den Kacheltitel in 16px Blau
   umfaerben - dieselbe Falle wie bei den Sortiment-CTAs. */
.sbs-invcard {
	position: relative;
}

.elementor .sbs-invcard__link {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-decoration: none;
}

.elementor .sbs-invcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Der Zeiger verraet die Klickflaeche auch ausserhalb des Titels. */
.sbs-invcard:hover {
	cursor: pointer;
}

.sbs-invcard__meta {
	font-family: var(--font-body);
	font-size: 12.5px;
	color: var(--text-muted);
}

/* Stueckzahl je Produkt. Mono, weil es eine technische Angabe ist - dieselbe
   Rolle wie das Praefix in der Kennzahlenleiste. Der Preis darueber ist
   derzeit leer, deshalb kein zusaetzlicher Abstand noetig. */
.sbs-invcard__menge {
	display: block;
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 12px;
	letter-spacing: .02em;
	color: var(--text-muted);
}

.sbs-invcard__menge strong {
	font-weight: 600;
	color: var(--text);
}

.sbs-invcard__menge--leer {
	color: var(--text-muted);
	opacity: .75;
}

.sbs-invcard.is-hidden {
	display: none;
}

@media (max-width: 1024px) {
	.sbs-inv {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.sbs-inv {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================
   Hinweisbox
   ========================================================= */

.sbs-notice {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 32px;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

/* Praefix aus demselben Grund wie bei .sbs-hero__heading: sonst ueberstimmt
   das "margin: 0" des Typografieblocks diesen Wert. */
.elementor .sbs-notice__title {
	margin-bottom: 10px;
}

.sbs-notice__text {
	margin-bottom: 20px;
}

/* =========================================================
   Info-Liste (Kontakt-Sidebar)
   ========================================================= */

.sbs-infolist {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.sbs-infolist__item {
	border-top: 1px solid var(--line);
	padding-top: 18px;
}

.sbs-infolist__label {
	margin-bottom: 8px;
}

.elementor .sbs-infolist__title {
	font-size: 15px;
	margin-bottom: 6px;
}

.elementor .sbs-infolist__title a {
	color: var(--blue);
	text-decoration: none;
}

.elementor .sbs-infolist__title a:hover {
	color: var(--accent);
}

.sbs-infolist__text {
	font-size: 13.5px;
}

/* =========================================================
   Footer
   ========================================================= */

/* Aufbau seit dem 08.10.2026 (Mockup mockups/mockup-footer-v1.html, vom
   Kunden freigegeben): Spalte 1 Logo und Kontakt ohne Claim, dann drei
   Linkspalten. Die Typen-Spalte ist breiter, weil ihre Liste zweispaltig
   laeuft. */
.sbs-footer {
	background: var(--surface-dark);
	color: var(--text-on-dark);
	border-top: 3px solid var(--accent);
	padding-top: 64px;
}

.sbs-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 1.15fr 1.75fr .8fr;
	gap: 40px;
	padding-bottom: 56px;
}

/* Kein filter: Hier liegt die weisse Logo-Datei (assets/img/sbs-logo-weiss.svg,
   seit 10.08.2026, davor logo-invers.png). Ein Invertieren wuerde sie wieder
   dunkel machen.

   88px hoch (Kundenbefund 08.10.2026: 48px war zu klein; der Claim darunter
   ist dafuer entfallen), am Handy 72px. */
.elementor .sbs-footer__logo {
	display: block;
	height: 88px;
	width: auto;
	max-width: none;
	margin-bottom: 28px;
}

.sbs-footer__col p {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 14px;
	color: var(--text-on-dark);
}

/* .elementor-Präfix nötig: Kit-CSS (.elementor-kit-258 h4) hat gleiche
   Spezifität, wird aber später geladen und setzt sonst die dunkle Textfarbe.

   Die Haarlinie laeuft ueber die ganze Spaltenbreite und fasst so auch die
   zweispaltige Typenliste unter einer Ueberschrift zusammen. 30 Prozent
   Weiss: --line-on-dark (10 Prozent) traegt die Spalten nicht, reines Weiss
   waere neben den grauen Links zu hart. */
.elementor .sbs-footer__col h4 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-inverse);
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, .30);
}

.sbs-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Zehn Typen in der Rangfolge des Mega-Menues, zeilenweise als Paare. */
.sbs-footer__col ul.sbs-footer__typen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 24px;
	row-gap: 12px;
}

.elementor .sbs-footer__col a {
	font-family: var(--font-body);
	font-size: 15px;
	/* stand bis 2026-08-20 stillschweigend in der .elementor-a-Basisregel */
	font-weight: 500;
	color: var(--text-on-dark);
	text-decoration: none;
}

.elementor .sbs-footer__col a:hover {
	color: var(--accent-on-dark);
}

.sbs-footer__wege {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 14px;
}

/* Die Telefonnummer ist der schnellste Weg und steht deshalb weiss und
   groesser als WhatsApp und E-Mail. */
.elementor .sbs-footer__col a.sbs-footer__tel {
	font-size: 17px;
	font-weight: 600;
	color: var(--text-inverse);
}

.elementor .sbs-footer__col a.sbs-footer__tel:hover {
	color: var(--accent-on-dark);
}

.sbs-footer__col p.sbs-footer__zeiten {
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 12.5px;
	line-height: 1.7;
	margin: 0;
}

.sbs-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 20px 24px;
	border-top: 1px solid var(--line-on-dark);
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 12px;
}

.sbs-footer__legal {
	display: flex;
	/* seit dem fuenften Link (Bauseitige Leistungen, 23.09.2026) breiter als
	   ein Handy; ohne Umbruch lief die Seite bei 390 px auf 435 px auf */
	flex-wrap: wrap;
	column-gap: 20px;
	row-gap: 8px;
	min-width: 0;
}

.elementor .sbs-footer__legal a {
	color: var(--text-on-dark);
	text-decoration: none;
	white-space: nowrap;
}

.elementor .sbs-footer__legal a:hover {
	color: var(--accent-on-dark);
}

@media (max-width: 1024px) {
	.sbs-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px 32px;
	}
}

@media (max-width: 560px) {
	.sbs-footer {
		padding-top: 48px;
	}

	.sbs-footer__grid {
		grid-template-columns: 1fr;
		gap: 36px;
		padding-bottom: 40px;
	}

	.elementor .sbs-footer__logo {
		height: 72px;
		margin-bottom: 24px;
	}

	.sbs-footer__col ul,
	.sbs-footer__col ul.sbs-footer__typen {
		gap: 14px;
		row-gap: 14px;
	}

	.sbs-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Meldung, wenn eine Filterkombination nichts uebrig laesst. Steht immer im
   Markup und wird per Klasse eingeblendet - ein nachtraeglich eingefuegter
   Knoten bliebe fuer Vorlesesoftware stumm. */
.elementor .sbs-inv__leer {
	display: none;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--status-info);
	background: var(--status-info-bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 16px 18px;
	margin: 0;
}

.elementor .sbs-inv__leer.is-sichtbar {
	display: block;
}

.elementor .sbs-inv__leer a {
	color: var(--status-info);
	text-decoration: underline;
	font-size: inherit;
	font-weight: 600;
}

/* Zwei Leisten untereinander brauchen etwas Luft zueinander, sonst lesen sie
   sich als eine einzige lange Reihe. */
.elementor .sbs-availability__pills + .sbs-availability__pills {
	margin-top: 10px;
}

/* Zuordnungen auf der Bestandskarte: nutzbar als / Ausstattung.
   Label in Mono-Versalien wie die Praefixzeile der Kennzahlenleiste, Wert im
   Fliesstext - die Zeile ist eine Betriebsangabe, keine Ueberschrift. */
.elementor .sbs-invcard__zuordnung {
	font-family: var(--font-body);
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--text);
	margin: 0 0 4px;
}

.elementor .sbs-invcard__zuordnung:first-of-type {
	margin-top: 8px;
}

.elementor .sbs-invcard__zuordnung-label {
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-muted);
	display: block;
}

/* Kein Abschneiden: Ein Container mit drei Nutzungen soll alle drei zeigen.
   Die Zeile darf umbrechen, die Karte darf dadurch wachsen - das Raster
   richtet die Karten ohnehin auf gleiche Hoehe aus. */
.elementor .sbs-invcard__zuordnung-wert {
	display: block;
	overflow-wrap: anywhere;
}

/* Die Standzeile unter den Filterleisten. Sie erklaert die Filter beim
   Benutzen - deshalb steht sie zwischen Leisten und Raster, wo der Blick
   nach dem Klick ohnehin hinfaellt, und nicht als Hinweis darueber. */
.elementor .sbs-inv__stand {
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-muted);
	margin: 14px 0 20px;
	line-height: 1.5;
}

/* Probeweise Zusatzangaben auf den Bestandskarten. Der gestrichelte Strich
   links ist die Erinnerung daran, dass diese drei Zeilen erfunden sind und
   nicht aus der Datenbank kommen - er verschwindet mit ihnen.
   NUR ZUR SIMULATION, siehe sbs-katalogfilter.php. */
.elementor .sbs-invcard__zuordnung--probe {
	border-left: 2px dashed var(--line);
	padding-left: 8px;
	margin-left: -10px;
}

/* ==========================================================================
   Produktseite (PDP)
   ==========================================================================

   Sechs Widgets, ein Regelwerk. Die Flaechen setzt der Elementor-Container,
   nicht das Widget - eine Vollbreiten-Sektion traegt genau eine Flaeche
   (Kapitel 3). Hier steht nur, was innerhalb der Sektion passiert.

   Zwei Regeln aus dem Farbsystem bestimmen fast alles daran:

   - **Orange umrandet, es beschriftet nicht.** --accent erreicht auf heller
     Flaeche 3,60:1 und faellt damit unter die Schwelle. Der Preis steht
     deshalb in --text, nicht in Orange, obwohl er die wichtigste Zahl der
     Seite ist. Seine Groesse traegt das Gewicht.
   - **Trennlinien statt Schatten.** Kein box-shadow, nirgends.

   Jede Regel, die auf einem Ueberschriften-Tag sitzt, traegt .elementor -
   sonst gewinnt .elementor-kit-258 h1..h6 mit (0,1,1) und macht Bebas 18px
   daraus. Die Falle hat schon zweimal zugeschlagen, siehe Kapitel 3h. */

/* ---------- Kopf ---------- */

/* Kleiner als die Hero-H1 und ohne Breitengrenze.
   Der Produkttitel ist kein Schlagwort, sondern ein Satz - hier gemessene
   77 Zeichen ("20 ft Bürocontainer, gebraucht – isoliert, klimatisiert,
   kurzfristig lieferbar"). In Hero-Groesse und mit der ersten Fassung
   (max-width: 18ch = 470px bei 65px Bebas) ergab das sieben Zeilen.

   Das h1 im Selektor hebt die Spezifitaet auf (0,2,1) und schlaegt damit
   .elementor .sbs-h1 sicher - nicht nur, weil diese Regel spaeter steht. */
/* Kopf mit Grundriss: Text links, Zeichnung rechts. Erst ab 900px
   nebeneinander - darunter waeren beide Spalten zu schmal, um etwas zu
   erkennen; dort stapelt alles im normalen Fluss.

   Die Zeichnung liegt in **derselben Rasterzeile wie die Ueberschrift**,
   nicht neben dem ganzen Textblock. Nur so schliesst sie oben und unten mit
   ihr ab: Die Zeilenhoehe kommt von der Ueberschrift, die Zeichnung
   uebernimmt sie. Das Eyebrow steht darueber in einer eigenen Zeile, die
   Kerndatenleiste - falls eingeschaltet - darunter ueber beide Spalten. */
@media (min-width: 900px) {
	/* 56/44 statt der urspruenglichen 60/40: Bei diesem Verhaeltnis geht die
	   Zeichnung in Breite **und** Hoehe genau auf - sie fuellt ihre Spalte
	   und schliesst zugleich mit der Ueberschrift ab. Durchgemessen am
	   Testcontainer: 60/40 liess 7px Luft, 58/42 noch 1px, ab 54/46 wird das
	   Bild durch die Hoehe begrenzt und laesst seitlich Platz.

	   Der Punkt haengt am Seitenverhaeltnis des Grundrisses und an der
	   Zeilenzahl der Ueberschrift. Bei anderen Produkten trifft er nicht
	   exakt - dann bleibt schmale Luft, die niemandem auffaellt. Eine Regel,
	   die fuer jeden Titel exakt aufgeht, gibt es nicht: Textumbruch und
	   Bildproportion bedingen sich gegenseitig. */
	.sbs-pdp-head--split {
		display: grid;
		grid-template-columns: 56fr 44fr;
		column-gap: 40px;
	}

	.sbs-pdp-head--split > .sbs-eyebrow,
	.sbs-pdp-head--split > .sbs-pdp-facts,
	.sbs-pdp-head--split > .sbs-pdp-abschluss {
		grid-column: 1 / -1;
	}

	.sbs-pdp-head--split > .sbs-pdp-head__title {
		grid-column: 1;
	}

	/* Der Knopf steht mittig unter dem Grundriss, also in dessen Spalte.

	   Der negative obere Rand holt zurueck, was unter dem Bild leer bleibt:
	   Die Figur reicht bis zur Zeilenunterkante, das Bild endet 0.475em +
	   20px darueber, weil es mit den Buchstaben der Ueberschrift abschliesst.
	   Ohne die Korrektur haette der Knopf rund 50px Abstand statt der
	   gewuenschten 24px. */
	.sbs-pdp-head--split > .sbs-pdp-head__cta {
		grid-column: 2;
		justify-self: center;
		margin-top: calc(24px - var(--pdp-titel-groesse) * 0.475 - 20px);
	}

	/* stretch, damit die Zeichnung die volle Zeilenhoehe bekommt - der
	   Standard waere hier die Eigenhoehe des Bildes. */
	.sbs-pdp-head--split > .sbs-pdp-head__grundriss {
		grid-column: 2;
		align-self: stretch;
		position: relative;
	}

	/* Die Ausrichtung sitzt am **Link**, nicht am Bild - und der Link
	   schrumpft auf die Bildbreite. Beides zusammen laesst ihn das Bild
	   genau umschliessen, und erst dann kann das Lupenzeichen darin mittig
	   stehen: Ein Link, der breiter ist als das Bild, haette eine andere
	   Mitte als die Zeichnung.

	   Ausgerichtet wird an den **Buchstaben** der Ueberschrift, nicht an
	   ihrer Textbox. Bebas laeuft mit line-height 0.92 ueber seine Box
	   hinaus: Die Versalien beginnen 0.245em darueber, unten bleiben 0.475em
	   Luft. Gemessen bei 65,3px Schrift: Versalhoehe 55px, Unterlaenge 1px.
	   Die 20px sind der margin-bottom der Ueberschrift; wer den aendert,
	   aendert ihn hier mit. */
	.elementor .sbs-pdp-head--split > .sbs-pdp-head__grundriss > .sbs-zoom__ausloeser {
		display: block;
		position: relative;
		top: calc(var(--pdp-titel-groesse) * -0.245);
		height: calc(100% - var(--pdp-titel-groesse) * 0.23 - 20px);
		/* Die Breite folgt aus Hoehe und Seitenverhaeltnis - letzteres steht
		   als inline-Stil am Link, aus den Bilddaten. `fit-content` stand
		   hier zuvor und funktionierte nur in Chromium: Es haette die Breite
		   vom Bild geerbt, dessen Hoehe wiederum vom Link kam - eine
		   Prozentebene zu viel fuer WebKit. */
		width: auto;
		margin-left: auto;
	}

	/* Das Bild fuellt die Hoehe des Links und leitet seine Breite daraus ab -
	   kein object-fit noetig, weil der Link ohnehin nur so breit ist wie das
	   Bild. Bleibt dabei Platz in der Spalte, liegt er links, zwischen Text
	   und Zeichnung, und liest sich als groesserer Spaltenabstand.

	   Warum die Verschiebung nicht an der figure sitzt: Elementor setzt
	   `.elementor .elementor-widget … figure { margin: 0 }` mit Spezifitaet
	   (0,4,1) - jeder Rand dort ginge verloren. */
	.elementor .sbs-pdp-head--split > .sbs-pdp-head__grundriss img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

/* Ohne Kasten: kein Rahmen, kein Polster, keine eigene Flaeche. Die
   Zeichnung steht frei; ihr weisser Grund verschwindet ueber multiply in
   der Kopffarbe.

   Hier lag am 2026-08-14 kurz ein perspektivisches Kugelraster als
   Hintergrund - vom Kunden wieder verworfen. `position: relative` bleibt:
   Das Lupenzeichen im Zoom-Link richtet sich daran aus. */
.sbs-pdp-head__grundriss {
	margin: 0;
	position: relative;
}


/* ---------- Bild vergroessert im selben Fenster ---------- */

/* Der Ausloeser ist ein Link auf die Bilddatei. Er soll sich nicht wie ein
   Textlink verhalten - keine Farbe, keine Unterstreichung, nur der Zeiger
   verraet, dass hier etwas passiert. */
.elementor .sbs-zoom__ausloeser {
	display: block;
	position: relative;
	cursor: zoom-in;
	border: 0;
	text-decoration: none;
}

/* Das Lupenzeichen ist dauerhaft sichtbar, nicht erst beim Ueberfahren:
   Auf Tastgeraeten gibt es kein Ueberfahren, und dort waere der Hinweis
   gerade noetig.

   Blau gefuellt, weisse Glyphe. Orange war am 2026-08-13 kurz im Einsatz und
   wurde wieder verworfen: Es markiert genau einen Aufruf je Ansicht, und das
   ist der Anfrage-Knopf. Blau ist die Farbe der Sichtsignale - dieselbe
   Entscheidung wie bei den Sortimentskacheln.

   Unten mittig statt in der Bildmitte: Ueber der Zeichnung verdeckt das
   Zeichen den Grundriss an der Stelle, auf die man schaut. */
.sbs-zoom__lupe {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--blue);
	border: 1px solid var(--blue);
	color: var(--text-inverse);
	pointer-events: none;
}

.sbs-zoom__lupe svg {
	width: 19px;
	height: 19px;
	display: block;
}

/* Eine Sonderregel fuer den Kopf braucht es nicht mehr: Der Link umschliesst
   dort seit dem 2026-08-13 genau das Bild, also ist seine Mitte auch die
   Bildmitte. */

/* Die Vergroesserung ist eine **Karte**, keine Foto-Lightbox.

   Ein Grundriss ist eine technische Zeichnung, kein Bild zum Schwelgen. Der
   dunkle Vollbildgrund einer Galerie setzt ihn in Szene, als waere er ein
   Foto; eine weisse Karte mit Kopfzeile behandelt ihn wie das Dokument, das
   er ist - und bleibt beim Hausstil: Weiss ist Karten vorbehalten,
   Trennlinien statt Schatten.

   Der Grund dahinter ist gedaempftes Blau statt Schwarz. Er soll die Seite
   zuruecktreten lassen, nicht ausloeschen. */
/* display haengt am open-Zustand: Eine Autorenregel ueberstimmt den
   Browser-Standard "dialog:not([open]) { display:none }" - ein
   unbedingtes display:grid liess den geschlossenen Dialog als Karte
   unter dem Footer stehen (Kundenbefund 2026-08-16). */
.sbs-zoom {
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	padding: 24px;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.sbs-zoom[open] {
	display: grid;
	place-items: center;
}

.sbs-zoom:not([open]) {
	display: none;
}

.sbs-zoom::backdrop {
	background: rgba(13, 42, 92, .55);
}

.sbs-zoom__karte {
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* Die Kopfzeile sagt, was man sieht, und traegt den Schliessen-Knopf. Ohne
   sie steht die Zeichnung ohne jede Beschriftung im Raum. */
.sbs-zoom__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--line);
	background: var(--surface-base);
}

.sbs-zoom__titel {
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Schliessen als Textknopf, nicht als Kreuz-Symbol: Es ist die einzige
   Schaltflaeche hier, und ein Wort ist eindeutiger als eine Glyphe. Die
   Optik folgt .sbs-btn-ghost - sekundaere Stufe, kein Orange. */
dialog.sbs-zoom .sbs-zoom__schliessen {
	flex: none;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	padding: 8px 16px;
	color: var(--blue);
	background: transparent;
	border: 1.5px solid var(--blue);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

dialog.sbs-zoom .sbs-zoom__schliessen:hover,
dialog.sbs-zoom .sbs-zoom__schliessen:focus-visible {
	color: var(--text-inverse);
	background: var(--blue);
}

/* Die Flaeche traegt das Bild und faengt Ueberlaenge ab: Ein Grundriss, der
   groesser ist als das Fenster, wird hier scrollbar, statt verkleinert zu
   werden - bei einer Zeichnung ist Lesbarkeit wichtiger als Vollstaendigkeit
   auf einen Blick. */
.sbs-zoom__flaeche {
	overflow: auto;
	padding: 20px;
	background: var(--surface-card);
}

.sbs-zoom__bild {
	display: block;
	margin: 0 auto;
	max-width: none;
	width: auto;
	height: auto;
}

/* Die Grundrisse liegen als PNG **ohne** Transparenz vor - gemessen am
   Testcontainer: 60-Farben-Palette, kein Transparenz-Index, alle Randpixel
   rgb(255,255,255). Ein weisser Block im beigen Kasten waere die Folge.

   `multiply` loest das ohne Eingriff in die Datei: Weiss mal Flaeche ergibt
   die Flaeche, die dunklen Linien bleiben dunkel. Das greift bei jedem
   Grundriss mit weissem Grund, auch bei den Bildern, die noch kommen.

   Grenze: Farbige Flaechen im Plan wuerden mit dem Beige eingefaerbt. Bei
   #f8f8f5 ist die Verschiebung kaum messbar, aber wer bunte Grundrisse
   einstellt, sollte hier nachsehen. */
.sbs-pdp-head__grundriss img {
	mix-blend-mode: multiply;
}

/* Die Titelgroesse steht als Variable, weil die Ausrichtung der Zeichnung
   im Kopf mit ihr rechnet - siehe .sbs-pdp-head__grundriss img. */
.sbs-pdp-head {
	--pdp-titel-groesse: clamp(38px, 5.2vw, 68px);
}

.elementor h1.sbs-pdp-head__title {
	/* TESTWEISE auf die Hero-Groesse, 2026-08-13. Der produktseitige Wert
	   war clamp(28px, 3.6vw, 46px) - zum Zurueckstellen genuegt es, die
	   Variable oben darauf zu setzen. Die Breitengrenze bleibt in jedem Fall
	   weg; sie war die Ursache der sieben Zeilen, nicht die Schriftgroesse. */
	font-size: var(--pdp-titel-groesse);
	margin: 0 0 20px;
	/* Fallback fuer den Fall, dass sbs.js nicht laeuft, und Grundlage fuer
	   alles ab drei Zeilen: verhindert wenigstens ein einzelnes Wort am Ende.
	   Der aufsteigende Umbruch selbst kommt aus initTreppenumbruch(). */
	text-wrap: pretty;
}

/* Nur fuer den Fall, dass jemand die Kerndatenleiste in den Kopf holt statt
   sie in ihrer eigenen grauen Sektion darunter stehen zu lassen. Dann sitzt
   sie auf --surface-base, also mit weniger Kontrast zur Flaeche - der Rahmen
   aus .sbs-pdp-facts traegt sie in dem Fall allein. */
.sbs-pdp-head .sbs-pdp-facts {
	margin: 0 0 28px;
}

/* Preis, Verfuegbarkeitsmarke und Stueckzahl standen bis zum 2026-08-13 hier
   im Kopf. Sie stehen jetzt in der Kerndatenleiste darunter - der Preis als
   .sbs-pdp-preis auf der grauen Flaeche unter den Kacheln. */

/* Die Verfuegbarkeitsmarke sass bis zum 2026-08-13 hier im Kopf. Sie steht
   jetzt in der Kerndatenleiste unter der Lieferzeit, siehe
   .sbs-pdp-facts__marke. */

/* Die Stueckzahl sass bis zum 2026-08-13 hier. Sie steht jetzt als eigene
   Kachel "Bestand" in der Kerndatenleiste. */

/* ---------- Bilder ---------- */

.sbs-pdp-media {
	display: grid;
	gap: 32px;
}

@media (min-width: 900px) {
	/* Foto und Grundriss nebeneinander, das Foto breiter - es entscheidet
	   zuerst. Der Grundriss folgt, sobald der Blick haengengeblieben ist. */
	.sbs-pdp-media {
		grid-template-columns: 3fr 2fr;
		align-items: start;
	}
}

.sbs-pdp-media__gross {
	margin: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--surface-card);
}

.sbs-pdp-media__streifen {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
}

.sbs-pdp-media__streifen figure {
	margin: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--surface-card);
}

.sbs-pdp-media__grundriss {
	margin: 0;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface-card);
}

.elementor .sbs-pdp-media__titel {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	color: var(--text);
	margin: 0 0 14px;
}

/* ---------- Kerndaten ---------- */

/* Die Akzentkante greift die 4px-Kante des Hero auf: Sie bindet die Leiste
   an den Kopf darueber und gibt ihr eine Oberkante, ohne dass Orange zur
   Flaeche wird. Kapitel 3 erlaubt genau das - Orange darf umranden. */
.sbs-pdp-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	margin: 0;
	/* Die Linien zwischen den Feldern sind der Rasterabstand selbst: ein
	   1px-Spalt, durch den die Hintergrundfarbe scheint. Spart vier
	   border-Regeln und faellt an den Raendern nicht doppelt aus. */
	background: var(--line);
	border: 1px solid var(--line);
	/* Nach der Kurzform, nicht davor - `border` wuerde die Oberkante sonst
	   wieder zuruecksetzen. */
	border-top: 3px solid var(--accent);
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* Ab hier stehen die Kacheln in einer Zeile - nach der Regel "gleich breit,
   ausser einer braucht mehr".

   `1fr` ist die Kurzform von `minmax(auto, 1fr)`. Das `auto` als Untergrenze
   bedeutet: keine Spalte wird schmaler als ihr min-content. Solange alle
   Inhalte umbrechen koennen, ist min-content klein und alle Spalten sind
   exakt gleich breit. Sobald ein Inhalt nicht mehr umbrechen kann - die
   Farbangaben tragen geschuetzte Leerzeichen -, steigt dessen min-content
   auf die volle Textlaenge, diese Spalte bekommt genau so viel, und die
   uebrigen teilen sich den Rest zu gleichen Teilen.

   Mit `minmax(150px, 1fr)` ginge das nicht: eine feste Untergrenze laesst
   den Inhalt umbrechen, statt die Spalte wachsen zu lassen. Unterhalb von
   900px gilt genau das - dort soll die Leiste umbrechen, nicht wachsen.

   Die Spaltenzahl kommt als `--pdp-spalten` aus dem PHP, weil sie von den
   gepflegten Feldern abhaengt. Benannte Spalten sind noetig, damit die
   Preiszeile `grid-column: 1 / -1` nutzen kann; mit `grid-auto-flow: column`
   wuerde sie eine weitere Spalte aufmachen statt eine eigene Zeile. */
@media (min-width: 900px) {
	.sbs-pdp-facts {
		grid-template-columns: repeat(var(--pdp-spalten, 6), 1fr);
	}
}

/* Der Preis ueber die volle Breite, als eigene Zeile unter den Kacheln. */
.sbs-pdp-facts__item--preis {
	grid-column: 1 / -1;
}

/* Die Kacheln stehen auf --surface-base, nicht auf Weiss. Weiss ist im
   Farbsystem den Karten vorbehalten; hier geht es nicht um Karten, sondern
   um Felder, die sich vom grauen Band abheben sollen - dafuer genuegt die
   naechste Stufe. */
.sbs-pdp-facts__item {
	display: flex;
	flex-direction: column;
	padding: 18px 20px;
	background: var(--surface-base);
}

.sbs-pdp-facts__label {
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 6px;
}

/* ---------- Datenblatt-Typografie ----------

   Die Zahl traegt, die Einheit ordnet nur ein. Das ist die Konvention
   technischer Datenblaetter, und sie macht die Leiste auf einen Blick
   lesbar: Wer Maße vergleicht, sucht Ziffern, nicht Woerter.

   `tabular-nums` gibt allen Ziffern dieselbe Laufweite. Untereinander
   stehende Zahlen fluchten dadurch - in der Massspalte sieht man es sofort. */
.sbs-pdp-facts__zahl {
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

.sbs-pdp-facts__einheit {
	font-weight: 500;
	color: var(--text-muted);
}

/* Ein Vorsatz wie "mindestens" ist eine Einschraenkung, keine Angabe - er
   steht in der Auszeichnung der Beschriftung, damit er die Zahl nicht
   ueberdeckt. */
.sbs-pdp-facts__vorsatz {
	font-family: var(--font-mono);
	font-size: .68em;
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Der Wertbereich fuellt die Kachel bis zum unteren Rand aus. Damit hat der
   Rahmenton weiter unten etwas, wogegen er sich ausrichten kann.
   align-items: flex-start haelt die Inhalte auf ihrer eigenen Breite - sonst
   wuerde die Massspalte auf volle Kachelbreite gedehnt und das zentrierte
   Mal-Zeichen verloere seinen Bezug. */
.sbs-pdp-facts__wert {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--text);
	margin: 0;
}

/* Die Masskette steht untereinander, jedes Mass mit Einheit und Buchstabe.
   Eine Kachel von 160px traegt "6.055 mm (L) × 2.435 mm (B) × 2.900 mm (H)"
   nicht in einer Zeile, und ein Umbruch mitten in der Kette liesse offen,
   welche Zahl wofuer steht. */
/* Zwei Angaben in einer Kachel: Aussenfarbe und Rahmenton stehen
   untereinander, jede mit eigener Beschriftung. Der Rahmen bekommt keine
   eigene Kachel, weil er ohne die Aussenfarbe nichts aussagt - und weil ihn
   nur 19 der 88 Produkte tragen; eine halb leere Spalte im Raster waere die
   Folge. */
.sbs-pdp-facts__teil {
	display: block;
}

/* Dieselbe Auszeichnung wie die Kachelbeschriftung, nur mit Luft darueber -
   es ist eine zweite Beschriftung innerhalb derselben Kachel, keine neue
   Ebene.

   `margin-top: auto` schiebt die Beschriftung **und alles, was ihr folgt**
   an den unteren Rand der Kachel. Damit endet der Rahmenton auf derselben
   Unterkante wie die letzte Zeile der Massspalte in der Nachbarkachel - die
   Massspalte ist die hoechste und reicht ohnehin bis unten. Das Wort
   "Rahmen" wandert dabei von selbst mit, es steht ja im selben Fluss.

   Die 10px Mindestabstand bleiben als Untergrenze fuer den Fall, dass die
   Farbkachel einmal die hoechste ist - dann gibt es nichts zu verteilen und
   die beiden Angaben duerfen trotzdem nicht aneinanderkleben. */
.sbs-pdp-facts__sublabel {
	display: block;
	margin: 10px 0 6px;
	margin-top: auto;
	padding-top: 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Der Preis unter den Kacheln, auf der grauen Flaeche.

   Bewusst ohne weisse Kachel: Weiss ist Karten vorbehalten, und der Preis
   ist keine technische Angabe unter vielen. Auf der Flaeche zu stehen hebt
   ihn heraus, ohne dass er dafuer eine Farbe braucht.

   Der Betrag steht in --text, nicht in Orange. --accent erreicht auf heller
   Flaeche 3,60:1 und darf nach Kapitel 3 umranden, aber nicht beschriften.
   Die Groesse traegt das Gewicht.

   Betrag und Steuerhinweis tragen dieselbe Schrift und dieselbe Farbe - so,
   wie es war, als beides noch ein einziger Satz im Kopf war. Nur der
   Logistikhinweis faellt kleiner aus, siehe unten.

   Die 5px Einrueckung sind ein optischer Ausgleich: Die Zeile beginnt sonst
   an der Aussenkante der Kacheln, deren Text aber 20px weiter innen steht.
   Ganz auf 20px zu gehen wuerde den Preis wie einen Kachelinhalt aussehen
   lassen - er soll auf der Flaeche stehen, nur nicht hart an ihrer Kante. */
/* Traegt nur noch den Anfrage-Knopf, falls jemand ihn hier statt im Kopf
   einschaltet. Der Preis steht seit dem 2026-08-14 als eigene Zeile im
   Raster. */
.sbs-pdp-abschluss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 16px 24px;
	margin-top: 22px;
}

/* `flex-direction: row` ist hier keine Selbstverstaendlichkeit, sondern die
   Korrektur eines Fehlers: Dieses Element traegt auch .sbs-pdp-facts__wert,
   und die Regel setzt `column` - fuer die gestapelte Masskette. Ohne die
   ausdrueckliche Richtung standen Betrag, Steuer- und Logistikhinweis
   untereinander, obwohl sie mit 769px bequem in die 1093px breite Zelle
   passen. Die Zeile war dadurch 112px statt 41px hoch. */
.sbs-pdp-preis {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 9px;
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(26px, 3.2vw, 36px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--text);
}

/* Jede der drei Angaben bleibt in sich einzeilig. Umbrechen darf die Zeile
   nur **zwischen** ihnen, und das erst, wenn der Platz wirklich nicht
   reicht - ein "exkl. Transport und" mit "Entladung" darunter waere
   schlechter als ein Umbruch vor dem ganzen Hinweis. */
.sbs-pdp-preis > * {
	white-space: nowrap;
}

/* Rund 30 Prozent kleiner als der Rest der Zeile. In em, nicht in px: die
   Zeile selbst waechst per clamp mit der Fensterbreite, und der Hinweis soll
   dieses Verhaeltnis ueber alle Breiten halten. */
.sbs-pdp-preis__logistik {
	font-size: .7em;
}

/* Die Verfuegbarkeitsmarke in der Lieferzeit-Kachel.

   `margin-top: auto` setzt sie an den unteren Rand, auf dieselbe Kante wie
   der Rahmenton und die letzte Zeile der Massspalte. Direkt unter der
   Wochenangabe stuende sie sonst mit 70px Leerraum darunter.

   Es gibt keine Gegenmarke. Fehlt der Term, heisst das nicht "nicht
   lieferbar" - der Container gehoert trotzdem zum Bestand. Eine rote Marke
   "nicht verfuegbar" waere schlicht falsch. */
.sbs-pdp-facts__marke {
	margin-top: auto;
	padding-top: 0;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 11px;
	border-radius: var(--radius-pill);
	color: var(--status-success);
	background: var(--status-success-bg);
	border: 1px solid var(--status-success);
}

/* inline-flex, damit die Spalte nur so breit wird wie das breiteste Mass -
   nur dann hat "mittig" einen Bezug. Ueber die volle Kachelbreite zentriert
   staende das Zeichen irgendwo im Leeren rechts daneben. Die Masse selbst
   bleiben linksbuendig, sie sollen untereinander fluchten. */
.sbs-pdp-facts__mass {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
}

/* Das Mal-Zeichen bekommt eine eigene Zeile, aber keine volle Zeilenhoehe -
   sonst waere die Kachel fuenf Zeilen hoch, und im Raster zieht die hoechste
   Kachel alle anderen mit.

   Kraeftiger als die Masse, nicht schwaecher: das Zeichen haelt die drei
   Zahlen als eine Angabe zusammen. Zu leicht zerfaellt die Kachel in drei
   unverbundene Zeilen. Vorgelesen wird es trotzdem nicht (aria-hidden) - es
   ist ein Zeichen, kein Wort. */
.sbs-pdp-facts__x {
	font-style: normal;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-align: center;
	color: var(--text);
	margin: 4px 0;
}

/* ---------- Merkmale ---------- */

.elementor .sbs-pdp-marks__titel {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	color: var(--text);
	margin: 0 0 16px;
}

.sbs-pdp-marks__liste {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}

/* Blau, nicht orange: dieselbe Entscheidung wie bei den Sortimentskacheln.
   Orange bleibt dem einen Aufruf vorbehalten, und 18 orange Marken wuerden
   ihn erschlagen. */
.sbs-pdp-marks__eintrag {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 8px 13px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface-card);
	color: var(--blue);
}

/* ---------- Ausstattung ---------- */

.elementor .sbs-pdp-spec__titel {
	margin: 0 0 24px;
}

.sbs-pdp-spec__block {
	border-top: 1px solid var(--line);
}

.sbs-pdp-spec__block:last-of-type {
	border-bottom: 1px solid var(--line);
}

.sbs-pdp-spec__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
}

/* Das voreingestellte Dreieck weicht dem eigenen Zeichen weiter unten. */
.sbs-pdp-spec__kopf::-webkit-details-marker {
	display: none;
}

.sbs-pdp-spec__name {
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--text);
}

/* Die Zahl sagt vor dem Aufklappen, ob sich das Aufklappen lohnt. */
.sbs-pdp-spec__zahl {
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 12px;
	color: var(--text-muted);
	margin-left: auto;
}

.sbs-pdp-spec__kopf::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--blue);
	border-bottom: 2px solid var(--blue);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s ease;
}

.sbs-pdp-spec__block[open] .sbs-pdp-spec__kopf::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.sbs-pdp-spec__liste {
	margin: 0;
	padding: 0 0 22px;
}

.sbs-pdp-spec__zeile {
	display: grid;
	gap: 2px 24px;
	padding: 9px 0;
	border-top: 1px solid var(--line);
}

@media (min-width: 640px) {
	/* Label links, Wert rechts daneben - erst ab dieser Breite trägt eine
	   feste Labelspalte, darunter stapelt es. */
	.sbs-pdp-spec__zeile {
		grid-template-columns: 220px 1fr;
		align-items: baseline;
	}
}

.sbs-pdp-spec__label {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--text-muted);
	margin: 0;
}

.sbs-pdp-spec__wert {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--text);
	margin: 0;
}

/* ---------- Hinweise ---------- */

/* Kein Kasten, keine Warnfarbe. Das sind Vorbehalte, keine Fehler - sie
   sollen gelesen, aber nicht gefuerchtet werden. Der blaue Strich links
   ordnet sie der Hausfarbe zu, wie alle Hinweise im Haus. */
.sbs-pdp-notes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.sbs-pdp-notes__eintrag {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-muted);
	padding-left: 16px;
	border-left: 2px solid var(--blue);
}

/* =====================================================================
   Produktseite v2 (Dokument 9011, Spezifikation v1.3)

   Alle Klassen tragen das Praefix sbs-p2-. Die Regeln der v1-Produktseite
   (sbs-pdp-*) bleiben unangetastet, damit der Rueckweg zu Template 9004
   frei bleibt. Flaechenfarbe und Sektionsabstand stehen im
   Elementor-Container-Setting, wie bei 9004.
   ===================================================================== */

/* ---------- Sektion 1: Brotkrume, Galerie, Kaufzeile ---------- */

/* Kopfabstand der Produktseite — beschlossene Ausnahme vom 56px-Standard
   (Kundenentscheidung 2026-08-19): die Brotkrume sitzt INNERHALB der
   56px-Zone, das Titelraster beginnt wie ueberall bei ~56px unter dem
   Header. Rechnung: 18px Polster + 18,8px Krumenzeile + 19px Abstand
   = 55,8px. Das 40px-Instanzpolster der Kopfsektion in 9011 wird hier
   uebersteuert ((0,4,0) gegen Instanz-Variablen); die globale
   Kopfabstand-Regel greift nur auf wp-page-Dokumente, nicht hier.

   Die Krume ist EINZEILIG mit Ellipse gedeckelt: auf schmalen Schirmen
   (und bei den fuenf Langtiteln des Bestands) braeche sie sonst um und
   schoebe das Raster unter die 56px-Marke hinaus (bei 375px gemessen:
   74,5 statt 56). Der gekappte Schlussteil ist der Produkttitel, der
   direkt darunter als H1 vollstaendig steht. */
[data-elementor-type="product"] > .e-con.e-parent:first-of-type > .e-con-inner {
	padding-top: 18px;
}

.sbs-p2-krume {
	font-size: 12.5px;
	color: var(--text-muted);
	margin-bottom: 19px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.elementor .sbs-p2-krume a {
	color: var(--text-muted);
	font-size: 12.5px;
	font-weight: 400;
	text-decoration: none;
}

/* Navigations-Hover nach Linkregel 3ae (To-Do 117): orange statt
   des frueheren Unterstrichs; die Scrim-Variante antwortet weiter
   weiss (On-Photo-Regel im Scrim-Block weiter oben, hoehere
   Spezifitaet). */
.elementor .sbs-p2-krume a:hover {
	color: var(--accent);
}

.sbs-p2-krume b {
	color: var(--text);
	font-weight: 600;
}

.sbs-p2-kopf__raster {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 48px;
	align-items: start;
}

.sbs-p2-kopf__raster--ohne-bild {
	grid-template-columns: 1fr;
}

@media (max-width: 900px) {
	.sbs-p2-kopf__raster {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* Der Bildrahmen: 4/3, wie bei Sortiment und Bestand. Nachgerechnet am
   2026-08-15 ueber alle 257 Bilder der Kategorie 41: Die Masse liegt
   zwischen 1,0 und 1,33 (123 quadratisch, 91 bei ~4:3) - dieselbe Streuung,
   aus der schon zweimal 4/3 folgte. Die 28 Hochformate verlieren mehr;
   die Bilder werden vor dem Livegang ohnehin ersetzt. */
.elementor .sbs-p2-galerie__gross {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface-alt);
}

.elementor .sbs-p2-galerie__gross img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sbs-p2-galerie__streifen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
	margin-top: 8px;
}

.elementor .sbs-p2-galerie__daumen {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 2px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface-alt);
}

.elementor .sbs-p2-galerie__daumen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.elementor .sbs-p2-galerie__daumen.ist-aktiv,
.elementor .sbs-p2-galerie__daumen:focus-visible {
	border-color: var(--accent);
	outline: none;
}

/* Die Kaufzeile rechts. Titelgroesse wie die der v1-Produktseite vor dem
   Herotest: der Kopf teilt sich die Breite mit der Galerie. */
.elementor h1.sbs-p2-kauf__titel {
	font-size: clamp(32px, 4.2vw, 50px);
	margin: 10px 0 18px;
	text-wrap: pretty;
}

.sbs-p2-kauf__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.sbs-p2-marke {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(46, 158, 79, 0.12);
	color: var(--status-green);
	font-size: 12px;
	font-weight: 700;
	padding: 5px 13px;
	border-radius: var(--radius-pill);
}

.sbs-p2-marke::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--status-green);
}

.sbs-p2-kauf__lieferzeit {
	font-size: 13px;
	color: var(--text-muted);
}

.sbs-p2-preis {
	margin: 0 0 24px;
}

.sbs-p2-preis__betrag {
	display: block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(34px, 3.4vw, 44px);
	line-height: 1.05;
	color: var(--text);
}

.sbs-p2-preis__zusatz {
	display: block;
	font-size: 12.5px;
	color: var(--text-muted);
	margin-top: 4px;
}

/*
 * Bestandszeile der Zweiteilung (25.08.2026, To-Do 92, Mockup v3
 * beschlossen): fester Platz unter dem Preis, in jeder Variante
 * vorhanden. Folgt eine Bestandszeile, gibt der Preis einen Teil
 * seines Abstands an sie ab - die beiden gehoeren zusammen.
 */
.sbs-p2-preis:has(+ .sbs-p2-kauf__bestand) {
	margin-bottom: 8px;
}

.sbs-p2-kauf__bestand {
	font-size: 15px; /* 06.10.2026 von 13 auf 15 (Kunde): der Los-Preis ging unter */
	line-height: 1.5;
	color: var(--text-muted);
	margin: 0 0 24px;
}

.sbs-p2-kauf__bestand b {
	font-weight: 600;
	color: var(--text);
}

.sbs-p2-kauf__ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---------- Sektion 2: Spec-Leiste ---------- */

/* Die 3px-Akzentkante sitzt am Sektionscontainer (Klasse im
   Elementor-Setting), damit sie die volle Fensterbreite traegt. */
.sbs-p2-specband-kante {
	border-top: 3px solid var(--accent);
}

/* Die Spaltenzahl kommt als Variable aus dem Widget: leere Zellen
   entfallen, das Raster rueckt auf. */
.sbs-p2-spec {
	display: grid;
	grid-template-columns: repeat(var(--p2-spec-n, 6), 1fr);
	gap: 18px 24px;
}

@media (max-width: 1000px) {
	.sbs-p2-spec {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Der Zweispalter beginnt bei 700px statt der 560 des Mockups: Im
   Dreispalter darunter wuerden die unbrechbaren Langwerte (Masskette,
   RAL-Angaben mit geschuetzten Leerzeichen, je ~190px) ihre Spalten
   sprengen - bei 600px gemessen. */
@media (max-width: 700px) {
	.sbs-p2-spec {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Die Langwerte bekommen die volle Zeile; in einer halben Spalte
	   hebt ihre min-content-Breite das Raster ueber den Displayrand
	   (bei 375px gemessen: 408px rechte Kante). */
	.sbs-p2-spec__zelle--breit {
		grid-column: 1 / -1;
	}

	/* Kurze RAL-Angaben stehen halb und brechen nach dem Komma um
	   (Farbe und Rahmen nebeneinander, Wolf Goger 19.10.). */
	.sbs-p2-spec .sbs-p2-spec__angabe {
		white-space: normal;
	}
}

/* Darueber bleibt die Angabe einzeilig wie mit geschuetzten Leerzeichen. */
.sbs-p2-spec__angabe {
	white-space: nowrap;
}

.sbs-p2-spec__zelle {
	display: grid;
	gap: 3px;
	padding-left: 14px;
	border-left: 1px solid var(--line);
}

.sbs-p2-spec__label {
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 700;
}

.sbs-p2-spec__wert {
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
}

/* ---------- Sektion 3: Trust-Streifen ---------- */

.sbs-p2-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px 24px;
}

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

@media (max-width: 560px) {
	.sbs-p2-trust {
		grid-template-columns: 1fr;
	}
}

/* Linksbuendig statt zentriert wie auf der Startseite - Kundenentscheidung
   2026-08-15: Auf dieser Seite ist alles darueber linksbuendig, und das
   zentrierte Band las sich dagegen wie nach rechts gerueckt (gemessen:
   erster Eintrag bei x=114 gegen x=64 der Spec-Zellen). */
.sbs-p2-trust__zelle {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
}

.sbs-p2-trust__icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: var(--blue);
}

.sbs-p2-trust__icon--akzent {
	color: var(--accent);
}

.sbs-p2-trust__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Wert ueber Beschriftung, wie in der Trust-Leiste der Startseite
   (.sbs-trust__text) - nebeneinander brach die Depot-Zelle am
   Elementuebergang um ("A1" / "Sittensen"), und zwar ohne Leerzeichen,
   weil zwischen den beiden Inline-Elementen keins steht. */
.sbs-p2-trust__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Bebas gibt es nur in 400; ohne Angabe wuerde das <b> synthetisch
   gefettet (Safari verbreitert dabei). */
.sbs-p2-trust__text b {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.05;
	color: var(--text);
	white-space: nowrap;
}

.sbs-p2-trust__text > span {
	font-size: 12px;
	line-height: 1.3;
	color: var(--text-muted);
}

/* ---------- v2 gemeinsam: Sektionskopf-Abstand ---------- */

.sbs-p2-buehne .sbs-sec-head,
.sbs-p2-beschreibung .sbs-sec-head,
.sbs-p2-ausstattung .sbs-sec-head,
.sbs-p2-aehnliche .sbs-sec-head {
	margin-bottom: 32px;
}

/* ---------- Sektion 4: Grundriss-Buehne ---------- */

/* Die Buehne ist ein einspaltiges Raster, und das gap traegt die 16px
   zwischen Grundriss-Karte und Kartenraster - dieselben 16px wie zwischen
   den Karten. Ein margin am figure ist chancenlos: Elementors
   frontend.min.css nullt figure-Margins mit
   ".elementor .elementor-widget:not(...):not(...) figure" - die
   :not()-Argumente zaehlen mit, das sind (0,4,1). Gemessen am 2026-08-15:
   margin-bottom blieb 0, egal mit welchem Praefix. An ein Grid-gap kommt
   keine Margin-Regel heran. */
.sbs-p2-buehne {
	display: grid;
	gap: 16px;
}

/* Im Raster addieren sich Margin und gap statt zu verschmelzen: 16px
   Rest-Margin plus 16px gap ergeben die 32px Kopfabstand der uebrigen
   Sektionen. Ueberschreibt die Sammelregel weiter oben (gleiche
   Spezifitaet, spaeter in der Datei). */
.sbs-p2-buehne .sbs-sec-head {
	margin-bottom: 16px;
}

/* Die Zeichnung auf weisser Karte, volle Inhaltsbreite - die Grundrisse
   sind ~2,5:1 breitformatig, daneben passt nichts. Margin bewusst keine
   (siehe oben). Seit 2026-08-16 ohne Zoom und Lupe (Kundenentscheidung
   nach Pruefung am Worst-Case MEH-019); bei mehreren Zeichnungen wird
   die Karte zum Slider. */
.sbs-p2-buehne__plan {
	position: relative;
	margin: 0;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 20px 24px;
}

/* Der Zaehler oberhalb der Zeichnung - dieselbe leise Sprache wie die
   Beschriftungen der Spec-Leiste. */
.sbs-p2-buehne__zaehler {
	margin: 0 0 12px;
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Alle Blaetter stehen im Markup, sichtbar ist eines - gewechselt wird
   per Klasse. Mit .elementor-Praefix gegen "img { height: auto }" aus
   frontend.min.css (Ladereihenfolge, Kapitel 3j). */
.elementor .sbs-p2-buehne__zeichnung {
	display: none;
	width: 100%;
	height: auto;
}

.elementor .sbs-p2-buehne__zeichnung.ist-aktiv {
	display: block;
}

/* Die Pfeile: gleiche Form wie in der Zoom-Ueberlagerung. */
.elementor .sbs-p2-buehne__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	padding: 0;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--blue);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(32, 38, 43, 0.18);
}

.elementor .sbs-p2-buehne__nav--zurueck {
	left: 10px;
}

.elementor .sbs-p2-buehne__nav--weiter {
	right: 10px;
}

.elementor .sbs-p2-buehne__nav svg {
	width: 20px;
	height: 20px;
	display: block;
}

.elementor .sbs-p2-buehne__nav:hover:not(:disabled),
.elementor .sbs-p2-buehne__nav:focus-visible {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--text-inverse);
}

.elementor .sbs-p2-buehne__nav:disabled {
	opacity: 0.35;
	cursor: default;
	/* Ausdruecklich gegen den Reset-Hover (rosa) auf gesperrten
	   Knoepfen - die Fuellregel traegt :not(:disabled), der Reset
	   nicht. Dieselbe Luecke wie bei den Karussell-Pfeilen. */
	background: var(--surface-card);
	border-color: var(--line);
	color: var(--blue);
}

.sbs-p2-buehne__karten {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

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

@media (max-width: 560px) {
	.sbs-p2-buehne__karten {
		grid-template-columns: 1fr;
	}
}

/* Steckbrief-Karte: ganzflaechig klickbar nach dem Muster der
   Sortimentskacheln - der Link sitzt am Titel, ::after zieht die
   Klickflaeche ueber die Karte. Preis wie dort: Text nicht markierbar. */
.sbs-p2-bkarte {
	position: relative;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 18px;
	transition: transform 0.2s, box-shadow 0.2s;
}

.sbs-p2-bkarte:hover,
.sbs-p2-bkarte:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 16px 30px -14px rgba(32, 38, 43, 0.25);
}

.sbs-p2-bkarte__pfeil {
	position: absolute;
	top: 14px;
	right: 16px;
	color: var(--accent);
	font-size: 16px;
	transition: transform 0.2s;
}

.sbs-p2-bkarte:hover .sbs-p2-bkarte__pfeil {
	transform: translateX(3px);
}

/* Titel mit .elementor-Praefix: das Kit setzt h3 auf Bebas 18px, und
   .elementor a wuerde dem Link 16px/500 geben - beide Regeln brauchen
   (0,2,x), sonst gewinnen sie. */
.elementor .sbs-p2-bkarte__titel {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
}

.elementor .sbs-p2-bkarte__link {
	color: var(--blue);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.elementor .sbs-p2-bkarte__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.elementor .sbs-p2-bkarte__link:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

.sbs-p2-bkarte__werte {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.sbs-p2-bkarte__label {
	font-size: 12px;
	color: var(--text-muted);
}

.sbs-p2-bkarte__wert {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text);
}

/* ---------- Sektion 5: Beschreibung ---------- */

.sbs-p2-beschreibung__text {
	max-width: 760px;
	display: grid;
	gap: 14px;
}

.sbs-p2-beschreibung__text p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
}

/* Kein abgesetzter Einleitungsabsatz mehr (Kundenbeschluss 21.09.2026,
   gebrauchte und neue Container): alle Absätze 15 px normal. */

/* Standardbaustein "Zustand bei Auslieferung" unter der Beschreibung
   gebrauchter Container (02.10.2026): gleiche Absätze, durch eine Haarlinie
   abgesetzt, Titel in der Kachelfamilie. */
.sbs-p2-zustand {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

/* Ohne Beschreibung darüber steht der Baustein direkt unter dem Sektionskopf. */
.sbs-sec-head + .sbs-p2-zustand {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.elementor .sbs-p2-zustand__titel {
	font-size: 18px;
}

/* Aufklappbare Bausteine (05.10.2026): "Zustand bei Auslieferung" und
   "Zu einer Anlage erweiterbar" zeigen ab der zweiten Ansicht eines Besuchs
   nur die Überschrift. Der Titel ist ein Schalter (Knopf-Reset aus
   .sbs-pn-ds__schalter), zu klappt erst mit ist-klappbar aus sbs.js.
   Pfeil = Glyphe 1 wie in der Ziehharmonika des Datenblatts. */
.sbs-p2-klapp.ist-klappbar .sbs-p2-klapp__schalter::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: rotate(90deg);
	transition: transform .15s ease;
}

.sbs-p2-klapp.ist-klappbar.ist-offen .sbs-p2-klapp__schalter::after {
	transform: rotate(-90deg);
}

.sbs-p2-klapp.ist-klappbar:not(.ist-offen) .sbs-p2-klapp__inhalt {
	display: none;
}

/* Die Hülle ist ein Grid mit 14 px Abstand (.sbs-p2-beschreibung__text);
   der Inhalt führt dasselbe Raster für seine Absätze fort. */
.sbs-p2-klapp__inhalt {
	display: grid;
	gap: 14px;
}

/* ---------- Sektion 6: Ausstattung ---------- */

.sbs-p2-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 860px;
}

.sbs-p2-chip {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	padding: 7px 15px;
	font-size: 13px;
	font-weight: 500;
}

.sbs-p2-chip::before {
	content: "\2713\00A0";
	color: var(--accent);
	font-weight: 800;
}

/* ---------- Sektion 7: Datenblatt mit Suche ---------- */

.sbs-p2-ds__kopf {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	border-top: 3px solid var(--accent);
	padding-top: 22px;
	margin-bottom: 20px;
}

.elementor .sbs-p2-ds__titel {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.1;
	margin: 0;
}

/* Das Suchfeld erscheint nur, wenn sbs.js laeuft - ohne Skript wuerde es
   nichts tun und ein totes Bedienelement versprechen. */
.sbs-p2-ds__suche {
	display: none;
}

.sbs-p2-ds.hat-suche .sbs-p2-ds__suche {
	flex: 1;
	min-width: 240px;
	max-width: 420px;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface-card);
	padding: 9px 13px;
}

.sbs-p2-ds__suchicon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--text-muted);
}

.sbs-p2-ds__suchicon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sbs-p2-ds__suche input {
	border: 0;
	outline: 0;
	font-family: inherit;
	font-size: 13.5px;
	width: 100%;
	background: transparent;
	color: var(--text);
}

/* Die Ausstattungs-Sektion entfaellt vollstaendig, wenn das Widget
   mangels Merkmalen nichts rendert (Kundenwunsch 2026-08-17) - sonst
   bliebe die graue Flaeche samt Innenabstand als leeres Band stehen.
   Elementor laesst leere Widgets samt Wrapper ganz weg; deshalb traegt
   die Sektion in 9011 die Klasse sbs-sec-ausstattung, und das CSS
   blendet sie aus, wenn der Widget-Inhalt fehlt. Beschreibung und
   Datenblatt schliessen dann direkt aneinander an (beide Flaeche base). */
.sbs-sec-ausstattung:not(:has(.sbs-p2-ausstattung)) {
	display: none;
}

/* Der Empfehlungs-Einstieg: Satz mit den Containertypen, darunter die
   Kapazitaetszahlen in halber Breite - dieselbe Zeilensprache wie die
   Rubriken, aber ohne eigene Rubrik-Kante. */
.sbs-p2-ds__einstieg {
	margin-bottom: 0;
}

/* Seit 05.10.2026 ist der Einstieg die Rubrik "Empfohlene Verwendung" und
   klappt wie die anderen: zu, wenn die Rubrik nicht offen ist. Die
   Kapazitaetszeilen darin klappen mit ihrer Huelle, nicht einzeln. */
.sbs-pn-ds.ist-akkordeon:not(.ist-suche) .sbs-p2-ds__rubrik:not(.ist-offen) .sbs-p2-ds__einstieg {
	display: none;
}

.sbs-p2-ds__empfehlung {
	margin: 0 0 10px;
	font-size: 15px;
}

.sbs-p2-ds__kapazitaeten {
	margin: 0;
}

.sbs-p2-ds__rubrik {
	margin-bottom: 26px;
}

.elementor .sbs-p2-ds__rubriktitel {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--blue);
	/* Blau statt grau (Kundenvorschlag 2026-08-16): Die Rubriken sollen
	   als eigenstaendige Bloecke erkennbar sein; die blaue Kante nimmt
	   die Titelfarbe auf. Blau darf umranden - als Flaeche bleibt es
	   tabu (Kapitel 3). */
	border-bottom: 2px solid var(--blue);
	padding-bottom: 6px;
	margin: 0 0 8px;
}

/* Datenblatt neue Container als Ziehharmonika (Korrektur C5, 22.09.2026).
   Zu klappt erst, wenn sbs.js die Klasse ist-akkordeon setzt; waehrend
   einer Suche (ist-suche) stehen alle Treffer-Rubriken offen. Der Schalter
   ist ein eigener Knopf: alle Zustaende ausdruecklich, sonst faerbt der
   Hello-Reset ihn pink. Pfeil = Glyphe 1, gedreht; bewusst blau, nicht
   orange (neun gleichrangige Zeilen, kein einzelner naechster Schritt). */
.elementor .sbs-pn-ds__schalter,
.elementor .sbs-pn-ds__schalter:hover,
.elementor .sbs-pn-ds__schalter:focus,
.elementor .sbs-pn-ds__schalter:active {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--blue);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	cursor: pointer;
}

.elementor .sbs-pn-ds__schalter:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

.sbs-pn-ds.ist-akkordeon .sbs-pn-ds__schalter::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: rotate(90deg);
	transition: transform .15s ease;
}

.sbs-pn-ds.ist-akkordeon .sbs-p2-ds__rubrik.ist-offen .sbs-pn-ds__schalter::after {
	transform: rotate(-90deg);
}

.sbs-pn-ds.ist-akkordeon:not(.ist-suche) .sbs-p2-ds__rubrik:not(.ist-offen) .sbs-p2-ds__zeilen {
	display: none;
}

.sbs-pn-ds.ist-akkordeon .sbs-p2-ds__rubrik {
	margin-bottom: 18px;
}

.sbs-pn-ds__aktionen {
	display: flex;
	flex-wrap: wrap; /* ohne Umbruch 414 px breit bei 390 px (23.09.2026) */
	align-items: center;
	column-gap: 18px;
	row-gap: 10px;
}

.elementor .sbs-pn-ds__alle,
.elementor .sbs-pn-ds__alle:hover,
.elementor .sbs-pn-ds__alle:focus,
.elementor .sbs-pn-ds__alle:active {
	padding: 0;
	border: 0;
	background: none;
	color: var(--blue);
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}

.elementor .sbs-pn-ds__alle:hover {
	color: var(--accent);
}

.sbs-pn-ds__alle[hidden] {
	display: none;
}

/* Echte Spalten statt Grid (Kundenbefund 2026-08-16): Ein Grid fuellt
   zeilenweise - links, rechts, naechste Zeile -, gelesen wird eine
   solche Liste aber spaltenweise. Mit columns laeuft der Inhalt erst
   die linke Spalte hinunter, dann die rechte; der Browser balanciert
   die Hoehen selbst, auch wenn der Suchfilter Zeilen ausblendet. */
.sbs-p2-ds__zeilen {
	columns: 2;
	column-gap: 48px;
}

@media (max-width: 700px) {
	.sbs-p2-ds__zeilen {
		columns: 1;
	}
}

.sbs-p2-ds__zeile {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 6px 0;
	border-bottom: 1px dotted var(--line);
	font-size: 13.5px;
	/* Eine Zeile bricht nie mitten im Spaltenwechsel. */
	break-inside: avoid;
}

.sbs-p2-ds__zeile dt {
	color: var(--text-muted);
}

.sbs-p2-ds__zeile dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	max-width: 60%;
}

.sbs-p2-ds__leer {
	font-size: 13px;
	color: var(--text-muted);
}

/* Fussnoten - dieselbe Form wie die Hinweise der v1-Seite. */
.sbs-p2-ds__hinweise {
	margin-top: 20px;
	max-width: 760px;
	display: grid;
	gap: 10px;
}

.sbs-p2-ds__hinweise p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--text-muted);
	padding-left: 16px;
	border-left: 2px solid var(--blue);
}

/* ---------- Sektion 8: Aehnliche Container ---------- */

.sbs-p2-simgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 900px) {
	.sbs-p2-simgrid {
		grid-template-columns: 1fr;
	}
}

.sbs-p2-simcard {
	position: relative;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: transform 0.2s, box-shadow 0.2s;
}

.sbs-p2-simcard:hover,
.sbs-p2-simcard:focus-within {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px -12px rgba(32, 38, 43, 0.25);
}

.sbs-p2-simcard__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--surface-accent);
}

.elementor .sbs-p2-simcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sbs-p2-simcard__inhalt {
	padding: 16px 18px 20px;
}

.elementor .sbs-p2-simcard__titel {
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 4px;
}

.elementor .sbs-p2-simcard__link {
	color: var(--text);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.elementor .sbs-p2-simcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.elementor .sbs-p2-simcard__link:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

.sbs-p2-simcard__sub {
	margin: 0 0 10px;
	font-size: 12.5px;
	color: var(--text-muted);
}

.sbs-p2-simcard__fuss {
	margin: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.sbs-p2-simcard__preis {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 22px;
	color: var(--text);
}

/* Sofort-Badge nach der Designregel "Klickbare Kacheln" (2026-08-18):
   gruene Badge-Pille in der Abschlusszeile statt des frueheren
   Punkt-Texts - dieselbe Sprache wie Bestandskachel und Teaser. */
.sbs-p2-simcard__sofort {
	flex: none;
}

/* ---------- Sektion 10: Anfrage mit Vorbefuellung ---------- */

.sbs-p2-anfrage {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 48px;
	align-items: start;
}

@media (max-width: 900px) {
	.sbs-p2-anfrage {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* Die Karten-Flaeche: vor dem Klick eine gestaltete Karte ohne einen
   einzigen Google-Request, danach das iframe in derselben Box. */
.sbs-p2-karte {
	margin-top: 24px;
	aspect-ratio: 16 / 10;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* Vorschau, Leiste und Knopf der Kartenflaeche: Block „Kartenflaeche“
   am Dateiende (To-Do 321, 24.09.2026). */

/* Safari auf dem iPhone macht ein iframe so breit wie die Seite darin
   und sprengte damit Ueber uns (Befund Wolf Goger 19.10.2026). 1px plus
   min-width 100% haelt es auf Rahmenbreite; min-width 0 am Kasten laesst
   die Rasterspalte nicht mitwachsen. */
.sbs-p2-karte {
	min-width: 0;
	max-width: 100%;
}

.sbs-p2-karte__iframe {
	display: block;
	width: 1px;
	min-width: 100%;
	max-width: 100%;
	height: 100%;
	border: 0;
}

.sbs-p2-vorbefuellung {
	position: relative;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-md);
	padding: 16px 18px;
	margin-bottom: 20px;
	font-size: 13.5px;
}

.sbs-p2-vorbefuellung b {
	display: block;
	font-size: 15px;
	margin-bottom: 2px;
}

/* Zwei Preise (sofort lieferbar und uebriges Los) in eigener Zeile unter
   dem Kurztitel, Reihenfolge wie in der Kaufzeile des Kopfs (06.10.2026) */
.sbs-p2-vorbefuellung__preise {
	display: block;
	margin-top: 2px;
}

/* Doppeloption im Formularkopf (Kundenbeschluss 2026-08-21): zwei
   Absprung-Zeilen statt des frueheren "aendern"-Links - Kontaktseite
   fuer kurze Fragen, Projekt-Anfrage fuer groessere Vorhaben. Die
   Link-Optik kommt aus den .sbs-absprung__*-Klassen (eine Stilquelle,
   Pfeil ohne Unterstrich). */
.sbs-p2-wege {
	margin: 0 0 18px;
}

.sbs-p2-wege__zeile {
	font-size: 14px;
	color: var(--text-muted);
	margin: 0 0 6px;
}

/* ---------- Mobil: Sticky-Leiste ----------
   Zwei Traeger, eine Regelstelle: produkt-v2-kopf (Produktseiten,
   Anfrage auf #anfrage) und sbs-mobilleiste (alle anderen Seiten ueber
   das Footer-Template, Anfrage auf /kontakt/). Die Klassen heissen
   historisch sbs-p2-*, weil die Produktseiten-Leiste zuerst da war. */

.sbs-p2-sticky {
	display: none;
}

@media (max-width: 900px) {
	.sbs-p2-sticky {
		display: flex;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		background: var(--surface-dark);
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
		/* Erst sichtbar, wenn der Seitenkopf aus dem Bild gescrollt ist
		   (Kundenentscheidung 2026-08-20) - die Klasse setzt sbs.js.
		   visibility haelt die Knoepfe vorher aus der Tab-Reihenfolge. */
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0.25s;
	}

	.sbs-p2-sticky--sichtbar {
		transform: none;
		visibility: visible;
	}

	@media (prefers-reduced-motion: reduce) {
		.sbs-p2-sticky {
			transition: none;
		}
	}

	/* Beide Regeln mit .elementor-Praefix gegen die .sbs-btn-Optik-Falle:
	   .elementor a setzt 16px/500 mit (0,1,1). */
	.elementor .sbs-p2-sticky__anfrage,
	.elementor .sbs-p2-sticky__anruf {
		flex: 1;
		text-align: center;
		text-decoration: none;
		font-size: 13px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		padding: 12px 8px;
		border-radius: var(--radius-sm);
	}

	.elementor .sbs-p2-sticky__anfrage {
		background: var(--accent);
		color: #fff;
	}

	.elementor .sbs-p2-sticky__anruf {
		border: 2px solid rgba(255, 255, 255, 0.5);
		color: #fff;
	}

	/* Der Fusszeile Platz verschaffen, damit die Leiste nichts verdeckt. */
	body:has(.sbs-p2-sticky) .elementor-location-footer {
		padding-bottom: 72px;
	}
}

/* =====================================================================
   Header-Verkleinerung fuer kleine Schirme (To-Do 9, live seit der
   v2-Umschaltung am 2026-08-15)

   Uebernommen aus vorbereitet-header-mobil.css. Die Topbar bricht auf
   schmalen Schirmen dreizeilig um und traegt damit den Loewenanteil der
   190px des stehenden Blocks - hier bleibt sie einzeilig: Telefon und
   WhatsApp stehen, E-Mail und Oeffnungszeiten weichen (beides steht im
   Footer und auf /kontakt/). Header-Innenabstand 14px -> 10px.

   --header-stack ist nach dieser Aenderung neu gemessen worden - der
   Wert steht bei den Tokens am Dateianfang.
   ===================================================================== */

@media (max-width: 900px) {
	/* Mit .elementor-Praefix: ".elementor .sbs-topbar__item" setzt
	   display mit (0,2,0) und schlaegt jede blosse Klasse - deshalb hat
	   auch die alte 767px-Ausblendung der Oeffnungszeiten (weiter oben in
	   dieser Datei) nie gewirkt. */
	.elementor .sbs-topbar__item[href^="mailto:"],
	.elementor .sbs-topbar__hours {
		display: none;
	}

	.sbs-header__wrap {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* ---------- Zoom-Ueberlagerung: Fotos einpassen statt scrollen ----------
   Die Flaeche macht Ueberlaenge bewusst scrollbar - fuer Grundrisse bleibt
   das so, ihre Bemassung muss lesbar sein. Fotos (Ausloeser mit
   data-sbs-zoom="passend") gewinnen durch Originalpixel nichts; sie werden
   auf die Fensterhoehe begrenzt.

   Der Deckel rechnet mit Viewport-Einheiten statt einer Prozentkette ueber
   Karte und Flaeche - WebKit loest Prozenthoehen ueber zwei Ebenen nicht
   auf (derselbe Grund wie beim aspect-ratio am Zoombild-Link). Abgezogen
   sind Dialog-Polster (48), Kopfzeile (~64) und Flaechen-Polster (40). */
.sbs-zoom--passend .sbs-zoom__flaeche {
	overflow: hidden;
	display: grid;
	place-items: center;
}

.sbs-zoom--passend .sbs-zoom__bild {
	max-width: 100%;
	max-height: calc(100vh - 160px);
	max-height: calc(100dvh - 160px);
}

/* ---------- Zoom-Ueberlagerung: Blaettern in der Bildfolge ----------
   Die Knoepfe erscheinen nur, wenn der Zoom aus einer Galerie kommt
   (sbs.js setzt hidden); Pfeiltasten und Wischgeste tun dasselbe. Die
   Karte ist der Bezugsrahmen fuer die absolute Position. */
.sbs-zoom__karte {
	position: relative;
}

dialog.sbs-zoom .sbs-zoom__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	padding: 0;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--blue);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(32, 38, 43, 0.18);
}

dialog.sbs-zoom .sbs-zoom__nav--zurueck {
	left: 14px;
}

dialog.sbs-zoom .sbs-zoom__nav--weiter {
	right: 14px;
}

dialog.sbs-zoom .sbs-zoom__nav svg {
	width: 20px;
	height: 20px;
	display: block;
}

dialog.sbs-zoom .sbs-zoom__nav:hover:not(:disabled),
dialog.sbs-zoom .sbs-zoom__nav:focus-visible {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--text-inverse);
}

dialog.sbs-zoom .sbs-zoom__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Das hidden-Attribut gewinnt gegen das display:grid der Knopfregel -
   sonst staenden die Pfeile auch ohne Bildfolge im Dialog. */
dialog.sbs-zoom .sbs-zoom__nav[hidden] {
	display: none;
}

/* =========================================================
   Bestandsübersicht (Seite 8765) — Drei-Block-Kachel
   ========================================================= */

/*
 * Raster nach Spezifikation v1.0, Kapitel 8. minmax(0, 1fr) ist Pflicht:
 * Die min-content-Untergrenze von 1fr hat im Mockup eine Spalte um 100px
 * aufgedrückt (unteilbare Typenkette, Vorfall KOM-002).
 *
 * Breakpoints am Seitenleisten-Layout gerechnet: Die 1180px-Box verliert
 * 48px Wrap-Polster und 260px Leiste samt Spaltenabstand. Drei Spalten
 * brauchen je mindestens ~250px — das trägt ab 1160px Fensterbreite
 * (272px je Spalte), darunter zwei Spalten (349px bei 1024). Unter 1024px
 * entfällt die Leiste (mobiler Filter), die zwei Spalten laufen weiter
 * bis 640px, darunter eine.
 */
/* Testweise zwei Kacheln je Zeile auch auf dem Desktop (Kundenwunsch
   2026-08-18): Nach der Flucht-Vereinheitlichung (Inhaltsbreite 1132)
   waren die Drei-Spalten-Kacheln nur noch ~279px schmal. Zwei Spalten
   geben ~419px je Kachel. Der fruehere Drei-Spalten-Stand samt
   1250er-Schwelle liegt in der Git-Historie. */
.sbs-bgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

@media (max-width: 640px) {
	.sbs-bgrid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Die Suchauftrag-Karte liegt IM Raster und nimmt die volle Breite —
   sie folgt damit auf jede letzte Kachelreihe; ohne sichtbare Kacheln
   rutscht sie in Reihe 1 und beginnt bündig mit der Filterleiste. */
.sbs-bgrid > .sbs-bsuch {
	grid-column: 1 / -1;
}

/* Mehr-anzeigen-Knopf der Mengenbegrenzung. Der Abstand haengt am
   Knopf, nicht an der Huelle - im Leerzustand (Knopf versteckt) bleibt
   sonst ein toter 28px-Streifen. Das explizite [hidden] ist Pflicht:
   .sbs-btn-ghost setzt display inline-flex und schluege sonst den
   UA-Style (bekannter Fallstrick). */
.sbs-bestand__mehr {
	text-align: center;
}

/* Mehr-Knopf als Leiste ueber die volle Rasterbreite mit Zaehlzeile und
   Pfeil nach unten (Kundenbefund 22.09.2026, B4: zweimal uebersehen).
   Weisse Flaeche statt transparent, damit er keinem Karten-Knopf gleicht.
   Hover und Fokus ausdruecklich, sonst gewinnt die Flaeche hier oder der
   Hello-Reset (#c36). Faellt die Probe durch, ist Orange die Ausnahme,
   die der Kunde erwogen hat. */
.sbs-bestand__zaehler {
	margin: 40px 0 12px;
	font-size: 13px;
	color: var(--text-muted);
}

.sbs-bestand__zaehler[hidden] {
	display: none;
}

.elementor .sbs-bestand__mehr .sbs-btn-ghost {
	width: 100%;
	justify-content: center;
	gap: 10px;
	background: var(--surface-card);
	margin-top: 0;
}

.sbs-bestand__zaehler[hidden] + .sbs-btn-ghost {
	margin-top: 40px;
}

.elementor .sbs-bestand__mehr .sbs-btn-ghost:hover,
.elementor .sbs-bestand__mehr .sbs-btn-ghost:focus,
.elementor .sbs-bestand__mehr .sbs-btn-ghost:focus-visible {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--text-inverse);
}

.elementor .sbs-bestand__mehr .sbs-btn-ghost:focus:not(:focus-visible):not(:hover) {
	background: var(--surface-card);
	color: var(--blue);
}

.sbs-bestand__mehr .sbs-btn-ghost[hidden] {
	display: none;
}

/*
 * Drei-Block-Kachel: Block 1 Kopf (Bild, Titel, Abmessung) mit fester
 * Höhe, Block 2 Nutzung flexibel — er nimmt die Restluft der Reihe auf —,
 * Block 3 Fakten und Sichtsignal, per margin-top: auto am unteren Rand
 * verankert. Die Abschnitte liegen direkt auf der Kachel (kein
 * Body-Wrapper), der Randabstand steht je Zeile.
 */
.sbs-bcard {
	position: relative;
	display: flex;
	flex-direction: column;
}

.sbs-bcard:hover {
	cursor: pointer;
}

.sbs-bcard.is-hidden {
	display: none;
}

.sbs-bcard__media {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	position: relative;
}

/* Zustands-Badge links oben, dunkel — wie der bisherige Kachel-Badge. */
.sbs-bcard__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--text);
	color: var(--text-inverse);
	z-index: 2;
}

/* "Fabrikneu" (09.10.2026): orange Pille, weisse Schrift, blauer Punkt.
   Ausdrueckliche Ausnahme von der Regel "Orange nur als Glyphe, nie als
   Flaeche" (22.09.2026), Kundenentscheid 09.10.2026: Das Schild muss auf
   jedem Foto auffallen, Blau ging vor Himmel und Halle unter. Gilt nur
   fuer dieses Schild. */
.sbs-bcard__badge--neu {
	background: var(--accent);
	color: var(--text-inverse);
}

.sbs-bcard__badge--neu::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--blue);
	flex: none;
}

/*
 * Der Sofort-Badge sitzt seit dem 2026-08-18 nicht mehr auf dem Bild,
 * sondern in der Abschlusszeile neben "Details ansehen" - zwei Pillen
 * im Bild waren eine zu viel (Kundenentscheidung). Die Zeile ist ein
 * Flex-Paar: Sichtsignal links, Badge rechts.
 */
.sbs-bcard__ctazeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 10px 16px 15px;
}

/* Seit dem Plaetzetausch (2026-08-18) steht der Badge links und das
   Sichtsignal rechts; margin-left: auto haelt es auch dann rechts,
   wenn kein Badge da ist. */
.sbs-bcard__ctazeile .sbs-bcard__cta {
	margin-left: auto;
}

.sbs-bcard__sofort {
	flex: none;
}

/*
 * Titel immer zweizeilig: min-height reserviert die zwei Zeilen, der
 * line-clamp deckelt sie — längere Titel enden mit Ellipse. Dadurch liegt
 * die Abmessungszeile rasterweit auf gleicher Höhe.
 */
.elementor .sbs-bcard__title {
	/* 18px wie die Sortimentskacheln - Schriftart war schon identisch
	   (Inter 700 ueber .sbs-card-title), die Groesse zieht am 2026-08-18
	   auf Kundenwunsch nach. Die Zwei-Zeilen-Reserve (min-height 2.5em)
	   waechst in em automatisch mit. */
	font-size: 18px;
	margin: 13px 16px 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
	/* Luft fuer den Hover-Unterstrich der ZWEITEN Zeile: overflow:hidden
	   schneidet an der Padding-Kante, und unter der zweiten Zeilenbox
	   blieben nur 0,5px - der Unterstrich (Offset 3px, Staerke 1,5px) war
	   dort gekappt (Kundenbefund 2026-08-18, gemessen). Die Zeilen ab 3
	   malt der line-clamp selbst nicht, das Padding zeigt also nie Text. */
	padding-bottom: 4px;
}

/* Dieselbe .elementor-a-Falle wie bei .sbs-invcard__link: Seit der
   Kit-Entkernung trägt `.elementor a` Farbe, Größe und Gewicht mit
   Spezifität (0,1,1). */
.elementor .sbs-bcard__link {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-decoration: none;
}

.elementor .sbs-bcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Gleiche Strichstaerke wie das Sichtsignal "Details ansehen" (1,5px) —
   zwei verschiedene Unterstriche auf einer Kachel lasen sich als
   Versehen (Kundenbefund 2026-08-18). */
/* Titel-Hover: orange ohne Unterstrich, wie Sortiment und Referenzen
   (Kundenentscheidung 2026-08-18 - das Startseiten-Verhalten gilt fuer
   alle Kachelsorten). */
.elementor .sbs-bcard__link:hover,
.elementor .sbs-bcard__link:focus-visible {
	color: var(--accent);
	text-decoration: none;
}

/* Staerkere Rueckmeldung als die 4px aus .sbs-card:hover — dieselbe
   Begruendung und dieselben Werte wie bei Sortiment und
   Entscheidungsweiche: eine klickbare Flaeche muss deutlicher antworten
   (Designabgleich 2026-08-18, Punkt B4). Gewinnt ueber .sbs-card:hover
   durch die spaetere Position in der Datei. */
.sbs-bcard:hover,
.sbs-bcard:focus-within {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px -12px rgba(32, 38, 43, .25);
}

.elementor .sbs-bcard__link:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/*
 * Steckbrief nach Kundenentwurf vom 2026-08-18 — ersetzt die graue
 * Spec-Box und die "nutzbar als"-Zeile mit Trennpunkten. EINE Sprache
 * fuer den ganzen Mittelteil: Mono-Label (wie Faktenzeile und
 * Kennzahlen-Praefix), darunter der Wert in Inter; Ruhe durch
 * Wiederholung und Weissraum, keine zweite Flaeche in der Karte.
 * Zeile 1 war bis zum 02.10.2026 der Dreispalter Modell/Baugroesse/Zustand,
 * seither die Kopfzeile Modell plus Abmessungen (siehe .sbs-bcard__kopfzeile).
 */
.sbs-bcard__steckbrief {
	margin: 6px 16px 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

/* Gewichtete Spalten statt Drittel (2026-08-18): Die Mitte traegt die
   laengsten Werte ("7–14 Werktage", 90px gemessen), links braucht
   "auf Anfrage" 73px. Beide Dreispalter — Modell-Zeile und Fusszeile —
   nutzen dasselbe Verhaeltnis, die Spaltenflucht durch die Kachel
   bleibt. Nachjustiert auf .95/1.15/.9 mit 8px-Abstand: an der
   schmalsten Drei-Spalten-Kachel (295px ab 1250px Fenster) haben alle
   gemessenen Werte mindestens 4px Reserve. */
.sbs-bcard__fakten {
	display: grid;
	grid-template-columns: minmax(0, .97fr) minmax(0, 1.13fr) minmax(0, .9fr);
	gap: 8px;
}

.sbs-bcard__label {
	display: block;
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 2px;
	white-space: nowrap;
}

/* Kopfzeile des Steckbriefs (Kundenbeschluss 02.10.2026): Modell links,
   Baugroesse und Abmessungen rechts in einer Zeile. Die Modellspalte ist so
   breit wie Spalte 1 der Fusszeile plus deren Abstand, damit das Mass in
   der Flucht der mittleren Fussspalte beginnt; wird es eng (Handy, lange
   Masse), gibt zuerst die Modellspalte bis auf ihren Inhalt nach, erst dann
   bricht das Mass hinter dem Trennstrich um. */
.sbs-bcard__kopfzeile {
	display: flex;
	align-items: flex-start;
}

.sbs-bcard__fakt--modell {
	box-sizing: border-box;
	flex: 0 1000 calc((100% - 16px) * .3233 + 8px);
	min-width: max-content;
	padding-right: 16px;
}

.sbs-bcard__fakt--mass {
	flex: 0 1 auto;
	min-width: 0;
}

.sbs-bcard__teil {
	white-space: nowrap;
}

/* Fusszeilen-Werte brechen nie um ("7–14 Werktage") - die Steckbrief-
   Werte darueber (Nutzbar als, Abmessungen) duerfen weiter umbrechen. */
.sbs-bcard__foot .sbs-bcard__wert {
	white-space: nowrap;
}

/* Modellkachel neue Container, Fusszeile (Kundenbeschluss 22.09.2026, C4):
   grundsaetzlich einzeilig, zweizeilig nur im Notfall auf kleinen Breiten.
   Die Spalten richten sich nach ihrem Inhalt (Herkunft so schmal wie ihr
   Wort, Lieferzeit und Preis ruecken nach), statt fester Anteile; so ragt
   auch ein 5- oder 6-stelliger Preis nicht mehr hinaus. Was zusammen-
   gehoert, halten geschuetzte Leerzeichen (ab n Wochen, ab n EUR). */
.sbs-pn-kachel .sbs-bcard__fakten.sbs-bcard__loszeile {
	grid-template-columns: auto auto auto;
	justify-content: space-between;
	column-gap: 12px;
}

.sbs-pn-kachel .sbs-bcard__loszeile .sbs-bcard__wert {
	white-space: normal;
}

.sbs-bcard__wert {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.45;
	color: var(--text);
}

/* Block 2: keine Reservierung — flexibel. Das padding-bottom sichert den
   Mindestabstand zum Faktenblock. */
.sbs-bcard__nutzung {
	padding-bottom: 14px;
}

.sbs-bcard__merk {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	/* 14px statt 9: etwas mehr Luft zur Nutzbar-als-Zeile des
	   Steckbriefs (Kundenwunsch 2026-08-18, wirkte gedraengt). */
	margin: 14px 16px 0;
	align-content: start;
}

/* An die Ausstattungs-Chips der Produktseite v2 angeglichen (Pillenform,
   weisse Flaeche, oranges Haekchen), bewusst kleiner — Designabgleich
   2026-08-18, Punkt B5. Das Haekchen ist Umrandungs-Orange im Sinne der
   Farbregel: es beschriftet nicht, der Text bleibt dunkel. */
.sbs-bcard__merk span {
	font-size: 10.5px;
	font-weight: 500;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	padding: 4px 9px;
	color: var(--text);
}

.sbs-bcard__merk span::before {
	content: "\2713\00A0";
	color: var(--accent);
	font-weight: 800;
}

.sbs-bcard__merk .sbs-bcard__merk-mehr {
	background: none;
	border: 0;
	padding-left: 2px;
	color: var(--text-muted);
	/* Traegt die ausgeblendeten Merkmale als title-Tooltip; der Zeiger
	   kuendigt das an. z-index hebt ihn ueber die Kachel-Klickflaeche,
	   sonst kaeme der Hover nie an. */
	cursor: help;
	position: relative;
	z-index: 2;
}

.sbs-bcard__merk .sbs-bcard__merk-mehr::before {
	content: none;
}

/* Block 3: margin-top: auto schiebt Fakten und Sichtsignal immer an den
   unteren Kachelrand. Seit dem 2026-08-18 spricht die Fusszeile die
   Steckbrief-Sprache — dasselbe Dreispaltraster (Lagerbestand fluchtet
   unter Modell, Preis unter Baugröße), keine Sondergrößen und keine
   Mindesthöhe mehr, die Werte sind einheitlich hoch. */
.sbs-bcard__foot {
	/* Die graue Trennlinie zur Nutzungszone ist mit dem Feld-Paar vom
	   26.08.2026 entfallen (Kundenbeschluss): die umrandeten Felder
	   tragen die Trennung selbst. Das padding-top bleibt als Abstand. */
	margin: 14px 16px 0;
	margin-top: auto;
	padding-top: 11px;
}

/*
 * Sofort-Block der Zweiteilung (25.08.2026, To-Do 92; Endform nach der
 * Mockup-Reihe v1-v5, Kundenspezifikation): Das gruene Feld traegt sich
 * selbst - eigene graue Ueberschriften ueber den Werten, der Wert
 * traegt die Einheit ("2 Stück"). Wording seit dem 26.08.: Mengen-Label
 * "Davon sofort" (Zwei-Zeilen-Fall) bzw. "Bestand" (Deckungsfall), die
 * gruene Fusszeile "Sofort lieferbar" ist entfallen - die Designsprache
 * traegt das Sofort-Signal allein. Kein gruener Punkt. Die alte gruene
 * Pille der Abschlusszeile ging in diesem Feld auf. Der Negativrand zieht die
 * Flaeche 10px ueber die Textflucht hinaus, die Werte bleiben buendig
 * mit der Los-Zeile; als einziges Kind der Fusszeile (Deckungsfall)
 * entfaellt der Abstand nach oben.
 *
 * Seit dem 26.08.2026 (Kundenbeschluss): das Designelement des
 * Mega-Menue-Paars (Kapitel Bestand-Kasten) gilt auch hier - die
 * Los-Zeile traegt die sanfte blaue Flaeche mit Haarlinie
 * (.sbs-bcard__loszeile, Farben von .sbs-mega__status--bestand), der
 * Sofort-Block behaelt Gruen und bekommt die gruene Haarlinie. Beide
 * Felder teilen die Geometrie: Negativrand -10px, 1px Rand plus 9px
 * Polster ergibt 0 - Text- und Spaltenflucht zum Steckbrief bleiben
 * exakt. Als Paar ruecken sie wie im Mega auf 6px zusammen.
 */
.sbs-bcard__loszeile {
	background: rgba(13, 42, 92, .06);
	border: 1px solid rgba(13, 42, 92, .25);
	border-radius: var(--radius-sm);
	padding: 8px 9px 9px;
	margin: 0 -10px;
}

.sbs-bcard__sofortzeile {
	background: rgba(46, 158, 79, .09);
	border: 1px solid rgba(46, 158, 79, .25);
	border-radius: var(--radius-sm);
	padding: 8px 9px 9px;
	margin: 6px -10px 0;
}

.sbs-bcard__sofortzeile:first-child {
	margin-top: 0;
}

.sbs-bcard__sofortwerte {
	display: grid;
	grid-template-columns: minmax(0, .97fr) minmax(0, 1.13fr) minmax(0, .9fr);
	gap: 8px;
}

.sbs-bcard__sofortzeile .sbs-bcard__wert {
	font-weight: 600;
	white-space: nowrap;
}

/*
 * Sichtsignal "Details ansehen →" — kein Link, die ganze Kachel ist über
 * den Titel klickbar. Der Pfeil ist eine Textglyphe am Pseudo-Element;
 * der Unterstrich beim Hover liegt nur am inneren Text-Span, nie am
 * Pfeil (Kundenregel vom 2026-08-05).
 */
/* An die Sichtsignale von Sortiment und Referenzen angeglichen: Blau
   statt Orange (Farbregel: Orange darf umranden, nicht beschriften —
   3,60:1 als Textfarbe), gemischt geschrieben statt Versalien.
   Designabgleich 2026-08-18, Punkte A1 und B6. Die Strichstaerke des
   Hover-Unterstrichs bleibt bei 1,5px — das Paar mit dem Kacheltitel
   war ausdruecklicher Kundenwunsch. */
.sbs-bcard__cta {
	display: block;
	font-weight: 600;
	font-size: 13.5px; /* = Kacheltext, Beschluss 28.08.: nur Farbe und Gewicht unterscheiden */
	color: var(--blue);
}

.sbs-bcard__cta::after {
	margin-left: 6px;
	transition: transform .2s ease;
}

.sbs-bcard:hover .sbs-bcard__cta::after {
	transform: translateX(3px);
}

/* =========================================================
   Bestandsübersicht — Filter-Seitenleiste, Chips, Leerzustand,
   mobiler Filter (Spezifikation v1.0, Kapitel 6, 7 und 9)
   ========================================================= */

/* Nur fürs Auge unsichtbar, für Vorlesesoftware da — die dauerhafte
   Live-Region des Leerzustands. */
.sbs-visuell-versteckt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	margin: 0;
}

.sbs-blayout {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

/* Aktive Filter als Chips über dem Raster. :empty lässt die Zeile ohne
   Filter keinen Platz kosten. */
.sbs-bestand__chips {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.sbs-bestand__chips:empty {
	display: none;
	margin: 0;
}

.elementor .sbs-bchip {
	font-family: var(--font-body);
	font-size: 11.5px;
	font-weight: 600;
	background: var(--surface-accent);
	border: 0;
	border-radius: var(--radius-pill);
	padding: 7px 12px;
	cursor: pointer;
	color: var(--text);
}

/* Das Entfernen-Zeichen stellt Glyphe 2 der Icon-Bibliothek (X als
   Maske am Dateiende); hier stehen nur Abstand und Daempfung. */
.elementor .sbs-bchip::after {
	margin-left: 7px;
	opacity: .5;
}

/* Blau statt Orange — Orange darf umranden, nicht beschriften
   (Designabgleich 2026-08-18, Punkt A2). Seit To-Do 117 ohne
   Ruhe-Unterstrich: Farbe, Gewicht und das X-Icon tragen die Aktion
   (Linkregel 3ae), Hover antwortet orange. */
.elementor .sbs-bchip--reset {
	background: transparent;
	color: var(--blue);
}

.elementor .sbs-bchip--reset::after {
	opacity: 1;
}

/* reset.css (button:hover/:focus rosa mit weisser Schrift) blocken —
   Chips behalten Flaeche und Schriftfarbe. */
.elementor .sbs-bchip:hover,
.elementor .sbs-bchip:focus {
	background: var(--surface-accent);
	color: var(--text);
}

.elementor .sbs-bchip--reset:hover,
.elementor .sbs-bchip--reset:focus {
	background: transparent;
	color: var(--accent);
}

/* ---------- Die Leiste ---------- */

/* Sticky unterhalb des stehenden Headers; die Admin-Leiste rechnet mit
   (für Besucher ist die Variable leer). Der Scrollbereich in der Leiste
   bekommt den Rest der Fensterhöhe. */
.sbs-bfilter {
	display: flex;
	flex-direction: column;
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-stack));
	max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--header-stack) - 24px);
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* Kopf- und Fußzeile gehören zum mobilen Overlay (unter 1024px). */
.sbs-bfilter__kopf,
.sbs-bfilter__fuss {
	display: none;
}

/* Scrollbereich mit dauerhaft sichtbarer, schmaler Scrollspur —
   das Scroll-Signal, Teil 1. Bewusst ohne Kopfpolster: Der erste
   Gruppenkopf beginnt an der Kartenoberkante, sein blaues Hover-Band
   schmiegt sich in die Rundung der Karte (overflow: hidden an
   .sbs-bfilter beschneidet die Ecken). Kundenwunsch 2026-08-18. */
.sbs-bfilter__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 0 14px 14px;
	scrollbar-width: thin;
	scrollbar-color: rgba(24, 23, 22, .3) transparent;
}

.sbs-bfilter__scroll::-webkit-scrollbar {
	width: 6px;
}

.sbs-bfilter__scroll::-webkit-scrollbar-thumb {
	background: rgba(24, 23, 22, .25);
	border-radius: 3px;
}

.sbs-bfilter__scroll::-webkit-scrollbar-track {
	background: transparent;
}

/* Scroll-Signal, Teil 2: Ausblend-Verlauf plus klickbare Zeile
   „▾ weitere Filter". Erscheint nur, solange unterhalb der Sicht noch
   Filter liegen (Klasse zeigt-mehr aus sbs.js), und verschwindet am
   Listenende. */
.elementor .sbs-bfilter__mehr {
	display: none;
	position: relative;
	border: 0;
	border-top: 1px solid var(--line);
	background: var(--surface-card);
	width: 100%;
	text-align: center;
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 7px 0 9px;
	cursor: pointer;
}

.elementor .sbs-bfilter__mehr::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	height: 36px;
	background: linear-gradient(rgba(255, 255, 255, 0), var(--surface-card));
	pointer-events: none;
}

.sbs-bfilter.zeigt-mehr .sbs-bfilter__mehr {
	display: block;
}

/* Auch hier: reset.css wuerde Hover und Focus rosa mit weisser Schrift
   faerben — Flaeche UND Schriftfarbe explizit setzen. */
.elementor .sbs-bfilter__mehr:hover,
.elementor .sbs-bfilter__mehr:focus {
	background: var(--surface-alt);
	color: var(--text-muted);
}

/* ---------- Akkordeon-Gruppen ---------- */

.sbs-bfgruppe {
	border-bottom: 1px solid var(--line);
}

.sbs-bfgruppe:last-of-type {
	border-bottom: 0;
}

/* Gruppenkopf in der Mono-Sprache der technischen Angaben. Der Zähler
   („AUSSTATTUNG (1)") steht in Orange — Orange markiert, füllt aber
   keine Fläche. */
.elementor .sbs-bfgruppe__kopf {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	cursor: pointer;
	/*
	 * Der Kopf greift per Negativrand ueber das 14px-Innenpolster des
	 * Scrollbereichs hinaus - die blaue Hover-Flaeche laeuft dadurch
	 * ueber die komplette Leistenbreite (Kundenwunsch 2026-08-18).
	 * Das Padding gleicht aus: Der Text steht weiter an derselben
	 * Stelle wie die Optionen darunter.
	 */
	width: calc(100% + 28px);
	margin-left: -14px;
	margin-right: -14px;
	padding: 12px 16px;
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text);
	white-space: normal;
	text-align: left;
}

.elementor .sbs-bfgruppe__kopf::after {
	content: "\25BE";
	margin-left: auto;
	font-size: 10px;
	color: var(--text-muted);
}

.sbs-bfgruppe.is-offen > .sbs-bfgruppe__kopf::after {
	content: "\25B4";
}

/* Hello-Elementors reset.css faerbt button:hover UND button:focus rosa
   (#c36) mit weisser Schrift und laedt nach sbs.css — dieselbe Falle wie
   beim FAQ-Hover, nur dass hier auch die Schriftfarbe ueberschrieben
   werden muss (Kundenbefund 2026-08-18: erst rosa, nach dem halben Fix
   weiss auf hellgrau). Hover und Focus in unserem Blau mit weisser
   Schrift — Kundenentscheidung; der Zaehler wechselt auf die
   Auf-dunkel-Stufe des Orange. */
/* :focus neutral halten, sonst klebte das Blau nach jedem Mausklick am
   Gruppenkopf; die blaue Rueckmeldung geben :hover und :focus-visible
   (Tastatur). Die Reihenfolge traegt: die blauen Regeln stehen nach der
   neutralen und gewinnen bei gleicher Spezifitaet. */
.elementor .sbs-bfgruppe__kopf:focus {
	background: none;
	color: var(--text);
}

.elementor .sbs-bfgruppe__kopf:hover,
.elementor .sbs-bfgruppe__kopf:focus-visible {
	background: var(--blue);
	color: var(--text-inverse);
}

.elementor .sbs-bfgruppe__kopf:hover::after,
.elementor .sbs-bfgruppe__kopf:focus-visible::after {
	color: var(--text-inverse);
}

.elementor .sbs-bfgruppe__kopf:hover .sbs-bfgruppe__anzahl,
.elementor .sbs-bfgruppe__kopf:focus-visible .sbs-bfgruppe__anzahl {
	color: var(--accent-on-dark);
}

/* Der feste Verfügbarkeits-Block klappt nicht — kein Pfeil, kein Zeiger,
   keine Hover-Reaktion. Das content: none braucht (0,4,0), weil die
   is-offen-Pfeilregel mit drei Klassen sonst gewinnt (der feste Block
   traegt is-offen, damit sein Inhalt sichtbar ist). */
.elementor .sbs-bfgruppe__kopf--fest {
	cursor: default;
}

.elementor .sbs-bfgruppe__kopf--fest:hover,
.elementor .sbs-bfgruppe__kopf--fest:focus {
	background: none;
	color: var(--text);
}

.elementor .sbs-bfgruppe.sbs-bfgruppe--fest > .sbs-bfgruppe__kopf::after {
	content: none;
}

/* Blau statt Orange — Orange darf umranden, nicht beschriften
   (Designabgleich 2026-08-18, Punkt A3). Im blauen Hover wechselt der
   Zaehler weiter auf die Auf-dunkel-Stufe des Orange. */
.sbs-bfgruppe__anzahl {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	color: var(--blue);
}

.sbs-bfgruppe__inhalt {
	display: none;
	padding-bottom: 12px;
}

.sbs-bfgruppe.is-offen .sbs-bfgruppe__inhalt {
	display: block;
}

/* Erklärtext in der Gruppe (Kundenwunsch): wie Filter wirken, steht dort,
   wo sie benutzt werden. */
.sbs-bfgruppe__hinweis {
	font-family: var(--font-body);
	font-size: 10.5px;
	color: var(--text-muted);
	margin: 0 0 6px;
	line-height: 1.4;
}

/* ---------- Optionen ---------- */

.sbs-bfopt {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 6px;
	border-radius: 4px;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--text);
	user-select: none;
}

.sbs-bfopt:hover {
	background: var(--surface-alt);
}

.sbs-bfopt input {
	accent-color: var(--accent);
	width: 15px;
	height: 15px;
	margin: 0;
	flex: none;
}

.sbs-bfopt__zahl {
	margin-left: auto;
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 10.5px;
	color: var(--text-muted);
}

/* Ausgegraut heißt: das Ergebnis dieses Klicks wäre leer. Kein
   display:none — wer den Filter kennt, soll sehen, DASS es ihn gibt. */
.sbs-bfopt.is-gesperrt {
	opacity: .38;
	pointer-events: none;
}

/* Der grüne Wortlaut gehört allein „Sofort lieferbar" — dieselbe Rolle
   wie der Pulspunkt der Region-Box. */
.sbs-bfopt__name--sofort {
	color: var(--status-green);
	font-weight: 600;
}

/* Standzeile unten in der Leiste — Mono, wie die Standzeile der alten
   Leisten. role="status" macht sie zur Live-Region. */
.sbs-bfilter__stand {
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 10.5px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--text-muted);
	border-top: 1px solid var(--line);
	padding-top: 12px;
	margin: 12px 0 0;
}

.sbs-bfilter__stand strong {
	color: var(--text);
	font-weight: 600;
}

/* ---------- Leerzustand: Suchauftrag-Karte ---------- */

/* Weiße Karte mit 4px-Akzentkante links. Kein oberer Außenabstand —
   sie beginnt bündig mit der Oberkante der Filterleiste, sobald das
   Raster leer ist. */
.sbs-bsuch {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-md);
	padding: 32px 30px;
}

.sbs-bsuch__titel {
	margin-top: 2px;
}

.sbs-bsuch__text {
	max-width: 560px;
	margin-top: 10px;
}

/* „Vorbefüllt aus Ihrer Auswahl: …" in der Mono-Sprache — dieselbe
   Stimme wie Faktenzeile und Standzeile. */
.sbs-bsuch__vorbefuellt {
	background: var(--surface-alt);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 11.5px;
	color: var(--text);
	margin: 16px 0 20px;
}

/* ---------- Mobiler Filter (unter 1024px) ---------- */

/* Fester Knopf in der Daumenzone. Dunkle Fläche, keine orange — Orange
   bleibt die Handlungsfarbe der CTAs; der Zähler übernimmt das Signal
   in --accent-on-dark. */
.elementor .sbs-bknopf {
	display: none;
	align-items: center;
	gap: 8px;
	position: fixed;
	left: 50%;
	bottom: calc(14px + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 80;
	background: var(--surface-dark);
	color: var(--text-inverse);
	border: 0;
	border-radius: var(--radius-pill);
	padding: 13px 22px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 10px 30px -8px rgba(8, 28, 58, .45);
}

.sbs-bknopf__aktiv {
	font-family: var(--font-mono);
	font-weight: 600; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	color: var(--accent-on-dark);
}

.sbs-bknopf__erg {
	font-weight: 400;
	color: var(--text-on-dark);
	text-transform: none;
	letter-spacing: 0;
}

/* reset.css (button:hover/:focus rosa) blocken — der Knopf bleibt dunkel,
   die Schrift weiss. */
.elementor .sbs-bknopf:hover,
.elementor .sbs-bknopf:focus {
	background: var(--surface-dark);
	color: var(--text-inverse);
}

@media (max-width: 1023px) {
	.sbs-blayout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Die Leiste ist unter 1024px unsichtbar — sie öffnet als
	   Vollbild-Overlay über den Filter-Knopf. */
	.sbs-bfilter {
		display: none;
	}

	.elementor .sbs-bknopf {
		display: flex;
	}

	body.sbs-filter-offen {
		overflow: hidden;
	}

	/* z-index ueber dem stehenden Header (200) — der deckte sonst die
	   oberen Akkordeon-Gruppen des Overlays ab (Kundenbefund 2026-08-18). */
	body.sbs-filter-offen .sbs-bfilter {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 300;
		top: 0;
		max-height: none;
		border: 0;
		border-radius: 0;
	}

	body.sbs-filter-offen .sbs-bfilter__kopf {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border-bottom: 1px solid var(--line);
		font-family: var(--font-mono);
		font-weight: 600;
		font-size: 13px;
		letter-spacing: .12em;
		text-transform: uppercase;
	}

	body.sbs-filter-offen .sbs-bfilter__kopf button {
		background: none;
		border: 0;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
		color: var(--text-muted);
		padding: 4px 8px;
	}

	/* Fixer CTA am Fuß des Overlays — er zählt live („12 Modelle
	   anzeigen") und ist der eine orange Knopf der Fläche. */
	body.sbs-filter-offen .sbs-bfilter__fuss {
		display: block;
		padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--line);
		background: var(--surface-card);
	}

	body.sbs-filter-offen .sbs-bfilter__fuss .sbs-btn {
		width: 100%;
		text-align: center;
		justify-content: center;
	}

	body.sbs-filter-offen .sbs-bknopf {
		display: none;
	}
}

/* Eine per Skript ausgeblendete Sektion (2026-08-24: die dunkle
   Suchauftrag-Sektion, solange das Raster die Suchauftrag-Karte zeigt).
   Eigene Klasse statt hidden-Attribut, weil Elementors display:flex am
   .e-con die UA-Regel [hidden] ueberstimmt (Fallstrick-Kapitel); die
   drei Klassen gewinnen die display-Frage ueber die Spezifitaet. */
.elementor .e-con.sbs-sektion-aus {
	display: none;
}

/* Der Knopf weicht dem Suchauftrag-Formular (Kundenbeschluss 2026-08-24,
   Muster der Produktseiten-Sticky): initBestandFilterKnopfWeiche()
   setzt die Klasse, solange das Formular im Bild steht. Drei Klassen,
   damit die Regel die display:flex-Stufe der Mobilbreite unabhaengig
   von der Reihenfolge schlaegt. */
.elementor .sbs-bknopf.sbs-bknopf--aus {
	display: none;
}

/* =========================================================
   Bestandsübersicht — Trust, dunkle CTA-Sektion,
   Formular-Platzhalter (Spezifikation v1.0, Kapitel 10–13)
   ========================================================= */

/* Eyebrow auf dunkler Fläche: Orange in der helleren Auf-dunkel-Stufe.
   Die "//" kommen weiter aus .sbs-eyebrow::before. */
.sbs-eyebrow--dark {
	color: var(--accent-on-dark);
}

/*
 * Trust-Blöcke: vier Spalten, getrennt durch Haarlinien (der 1px-gap auf
 * der Linienfarbe zeichnet sie). Die Zellen liegen auf --surface-alt —
 * bewusst nicht weiß, Weiß gehört auf dieser Seite den Kacheln; die
 * weiße Trust-Leiste der Startseite ist eine dort begründete Ausnahme.
 */
.sbs-btrust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.sbs-btrust__zelle {
	background: var(--surface-alt);
	padding: 22px 20px;
}

/* Titel in der Anzeigeschrift — Bebas gibt es nur in 400, deshalb steht
   das Gewicht ausdrücklich (das <b> würde sonst Kunstfett erzwingen). */
.sbs-btrust__titel {
	display: block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.1;
	letter-spacing: .02em;
	color: var(--text);
	margin-bottom: 4px;
}

.sbs-btrust__text {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.45;
	color: var(--text-muted);
}

@media (max-width: 900px) {
	.sbs-btrust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.sbs-btrust {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Dunkle CTA-Sektion (Designregel-Erweiterung 2026-08-18): Dunkelblau als
 * Fläche für hervorgehobene CTA-Sektionen, Eyebrow in --accent-on-dark,
 * oranger CTA. Eine solche Sektion je Seite. Die Fläche liegt am Block
 * selbst (er ist ein gerundeter Kasten in der 1180px-Box, kein
 * Vollbreiten-Band).
 */
.sbs-cta-dunkel {
	background: var(--surface-dark);
	color: var(--text-inverse);
	border-radius: var(--radius-md);
	padding: 40px 34px;
}

.elementor .sbs-cta-dunkel .sbs-cta-dunkel__titel {
	color: var(--text-inverse);
}

.sbs-cta-dunkel__text {
	font-family: var(--font-body);
	color: var(--text-on-dark);
	line-height: 1.6;
	max-width: 560px;
	margin: 12px 0 22px;
}

/*
 * Formular-Platzhalter #anfrage: die gestrichelte Kante ist das
 * Probe-Muster des Projekts (wie die Karten-Simulation) — ein interner
 * Reminder, kein Formular. Das Formularkonzept ist eine eigene, vertagte
 * Runde (Beschluss 18.08.2026, mehrere Formulare je Besucher-Kontext).
 */
.sbs-formular-ph {
	background: var(--surface-card);
	border: 2px dashed var(--line);
	border-radius: var(--radius-md);
	padding: 32px 30px;
}

.sbs-formular-ph__titel {
	margin-top: 2px;
}

.sbs-formular-ph__hinweis {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 14px 0;
	line-height: 1.6;
}

.sbs-formular-ph__feld {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	height: 44px;
	margin-bottom: 10px;
}

.sbs-formular-ph__feld--gross {
	height: 96px;
}

.sbs-formular-ph__reihe {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.sbs-formular-ph__reihe .sbs-formular-ph__feld {
	margin-bottom: 0;
}

.sbs-formular-ph__reihe {
	margin-bottom: 10px;
}

@media (max-width: 700px) {
	.sbs-formular-ph__reihe {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================
   Lager-Teaser der Startseite — horizontales Blätter-Karussell
   (Kundenbeschluss 2026-08-18: keine Filter, drei Kacheln je
   Ansicht, Rest wisch- und blätterbar, Auszugs-Zeile, zwei
   Ausgänge zur Bestandsübersicht)
   ========================================================= */

/* Die Auszugs-Zeile in der Mono-Sprache der technischen Angaben. */
.sbs-lager-teaser__hinweis {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 14px;
}

/*
 * Nativer horizontaler Scroller mit Schnappstellen: wischbar auf Touch,
 * die Pfeile blättern seitenweise. Drei Kacheln je Ansicht am Desktop,
 * zwei unter 1024px, EINE unter 720px (Kundenbeschluss 26.08.2026:
 * die Anderthalb-Ansicht machte die Kachel zu schmal fuer den
 * Fusszeilen-Dreispalter; das Weiterblaettern zeigen Pfeile und Wisch).
 * Die Schwelle liegt bei 720, nicht 640: erst ab 720px Fenster ist die
 * Zwei-Kachel-Ansicht 327px breit - darunter laeuft "wenige Werktage"
 * in die Preisspalte und DAVON SOFORT in die Lieferzeit-Spalte
 * (gemessen 26.08.: bei 641px Fenster 12,5px bzw. 2,2px Kollision).
 */
.sbs-lager-teaser__viewport {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 36px) / 3);
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Kein scroll-behavior: smooth - programmatische Smooth-Scrolls
	   bewegen einen Snap-Container nicht in jeder Engine (gemessen
	   2026-08-18). Das weiche Blaettern animiert sbs.js selbst. */
	scrollbar-width: none;
	/* Luft fuer den Hover-Schatten: .sbs-bcard:hover wirft 36px Schatten
	   unter die Karte und hebt sie 8px an — beides wuerde der Scroller
	   sonst abschneiden. Der Negativrand gibt das Polster nach aussen
	   zurueck; netto bleiben unten die bisherigen 4px zu den Pfeilen. */
	padding: 8px 0 32px;
	margin: -8px 0 -28px;
}

.sbs-lager-teaser__viewport::-webkit-scrollbar {
	display: none;
}

.sbs-lager-teaser__viewport > .sbs-bcard {
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.sbs-lager-teaser__viewport {
		grid-auto-columns: calc((100% - 18px) / 2);
	}
}

@media (max-width: 719px) {
	.sbs-lager-teaser__viewport {
		grid-auto-columns: 100%;
	}
}

/* Die Pfeilknoepfe selbst sind bei den Kundenstimmen definiert — DIE
   eine Stelle fuer alle Karussell-Pfeile (siehe dort). */
.sbs-lager-teaser__nav {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
}

/* Zwei Ausgänge, zentriert unter dem Karussell. */
.sbs-lager-teaser__ctas {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 40px;
}

/* ---------- Abschlusskachel des Lager-Teasers („Größer denken?") ---------- */

/* Stilisierte Platzhalterfläche, solange kein Bild gepflegt ist —
   ruhiger Verlauf mit Telefon-Strichzeichnung in der Icon-Sprache der
   Trust-Leiste (stroke 1.6, currentColor). Kein Gestrichelt: die Kachel
   ist Inhalt, kein Probe-Muster. */
.sbs-bcard__platzhalter {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, var(--surface-alt), var(--surface-accent));
	color: var(--blue);
}

.sbs-bcard__platzhalter svg {
	width: 44px;
	height: 44px;
}

.sbs-bcard__hinweistext {
	margin: 8px 16px 0;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.55;
	color: var(--text-muted);
}

/* CTA unten verankert; sein ::after zieht die Klickfläche über die
   ganze Kachel — dasselbe Muster wie die Entscheidungsweiche, der
   Button hovert mit, sobald der Zeiger auf der Karte steht. */
.sbs-bcard__hinweiscta {
	margin: 16px 16px 18px;
	margin-top: auto;
}

.elementor .sbs-bcard--hinweis .sbs-btn-ghost::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* =========================================================================
   Liefergebiet "Im Norden zu Hause" (Startseite, Mockup v1 vom 2026-08-18).
   Stilisierte Karte neben drei Versprechen-Stufen: das Kerngebiet wird als
   Versprechen kommuniziert, nie als Grenze. Alle Zeit- und km-Angaben sind
   bis zur Kundenfreigabe Platzhalter mit Sternchen auf den Vorbehalt.
   ========================================================================= */

.sbs-liefer__kopf {
	max-width: 700px;
	margin-bottom: 36px;
}

.sbs-liefer__untertitel {
	margin-top: 10px;
	max-width: 560px;
}

.sbs-liefer__grid {
	display: grid;
	grid-template-columns: 1.05fr minmax(0, 1fr);
	gap: 44px;
	/* stretch statt start: die Stufen-Spalte streckt sich auf Kartenhoehe,
	   die Trustleiste 2 pinnt sich per margin-top:auto an die Unterkante */
	align-items: stretch;
}

@media (max-width: 960px) {
	.sbs-liefer__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Die Kartenkachel fuellt ihre Spalte (Kundenbefund 2026-08-20: Karte
   und Stufen-Spalte schlossen unten nicht buendig). Zusammen mit dem
   margin-top:auto der Trustleiste 2 stimmt die Unterkante damit in
   beide Richtungen - egal, welche Spalte die hoehere ist. Der
   Ausgleichsraum landet zwischen Karte und Legende. */
.sbs-liefer__links {
	display: flex;
	flex-direction: column;
}

.sbs-liefer__karte {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 18px;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sbs-liefer__karte svg {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 10px;
}

/* SVG-Texte erben sonst die Schrift des naechstgelegenen Vorfahren —
   im Editor-Kontext ist das nicht immer Inter. */
.sbs-liefer__karte svg text {
	font-family: var(--font-body);
}

.sbs-liefer__legende {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	/* auto statt 10px: pinnt die Legende an die Kachelunterkante; den
	   Mindestabstand traegt das margin-bottom des SVG. */
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	color: var(--text-muted);
}

.sbs-liefer__legende span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.sbs-liefer__lg {
	flex: none;
}

.sbs-liefer__lg--depot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--accent);
}

.sbs-liefer__lg--ring {
	width: 16px;
	height: 0;
	border-top: 2px dashed var(--accent);
	opacity: .65;
}

/* Norden-Zone: gleiche Strichlinie wie die Heimatregion, in Blau —
   Farblogik der Stufen-Kacheln (Kundenbeschluss 2026-08-19) */
.sbs-liefer__lg--nord {
	width: 16px;
	height: 0;
	border-top: 2px dashed var(--blue);
	opacity: .7;
}

/* Trustleiste 2 (seit 2026-08-19): sitzt am Ende der Stufen-Spalte und
   schliesst buendig mit der Kartenunterkante ab. Stil und Icons wie die
   Trust-Leiste der Startseite; Weiss vom Kunden ausdruecklich freigegeben. */
.sbs-liefer__zahlen {
	display: flex;
	margin-top: auto;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}

.sbs-liefer__zahlen > div {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 12px;
}

.sbs-liefer__zahlen > div + div {
	border-left: 1px solid var(--line);
}

.sbs-liefer__zahlen svg {
	width: 28px;
	height: 28px;
	color: var(--blue);
	flex: 0 0 auto;
}

.sbs-liefer__zahlen b {
	display: block;
	font-family: var(--font-display);
	/* Bebas nie ueber 400 — Safari rechnet sonst Kunstfett. */
	font-weight: 400;
	font-size: 22px;
	color: var(--text);
	line-height: 1;
}

.sbs-liefer__zahlen span {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: var(--text-muted);
	letter-spacing: .02em;
	text-transform: uppercase;
	font-weight: 600;
}

.sbs-liefer__stufen {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sbs-liefer-stufe {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 20px 22px 18px;
}

.sbs-liefer-stufe--kern {
	border-left: 4px solid var(--accent);
}

.sbs-liefer-stufe--nord {
	border-left: 4px solid var(--blue);
}

.sbs-liefer-stufe--fern {
	border-left: 4px solid var(--line);
}

.sbs-liefer-stufe__titelzeile {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

/* Groesse zusaetzlich zu .sbs-card-title (Inter 700), Praefix wegen der
   Kit-Spezifitaet — siehe die Notiz an .sbs-card-title. */
.elementor .sbs-liefer-stufe__titel {
	font-size: 16px;
}

.sbs-liefer-stufe__reichweite {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--text-muted);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sbs-liefer-stufe__pille {
	margin-left: auto;
	flex: none;
}

.sbs-liefer-stufe__punkte {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sbs-liefer-stufe__punkte li {
	font-size: 13.5px;
	/* Versprechen-Punkte sind Zusagen: volles Schwarz, festgeschrieben
	   am 28.08. - vorher nur geerbt und damit umbau-anfaellig. */
	color: var(--text);
	padding-left: 20px;
	position: relative;
}

.sbs-liefer-stufe__punkte li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.sbs-liefer-stufe--kern .sbs-liefer-stufe__punkte li::before {
	background: var(--accent);
}

.sbs-liefer-stufe--nord .sbs-liefer-stufe__punkte li::before {
	background: var(--blue);
}

.sbs-liefer-stufe--fern .sbs-liefer-stufe__punkte li::before {
	background: var(--text-muted);
	opacity: .55;
}

.sbs-liefer__regionen {
	margin: 26px 0 0;
	font-size: 12.5px;
	color: var(--text-muted);
}

.sbs-liefer__regionen b {
	color: var(--text);
	font-weight: 600;
}

.sbs-liefer__vorbehalt {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--text-muted);
}

/* =====================================================================
   Formular-Systematik (Fluent Forms, Kundenbeschluesse 2026-08-20)
   Bauvorlagen: mockup-kontakt-formular-v15 (Sektion + Feldsprache),
   mockup-kontaktseite-v3 (Seite), mockup-projekt-anfrage-v1 (Formular).
   .sbs-ff ist der Geltungsbereich der Feldsprache; die Fluent-Basis-
   regeln verlieren dagegen ueber die Spezifitaet (0,2,0 gegen 0,1,0).
   ===================================================================== */

/* ---------- Sektionskopf und Absprung ---------- */

.sbs-kontaktsektion__intro {
	max-width: 56ch;
	margin-top: 14px;
}

.sbs-absprung {
	margin-top: 20px;
	font-size: 14px;
}

.sbs-absprung__titel {
	display: block;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 3px;
	color: var(--text);
}

.elementor .sbs-absprung__link {
	color: var(--blue);
	font-weight: 600;
	font-size: 15px; /* wie die Absprung-Titelzeile, Beschluss 28.08. */
	text-decoration: none;
}

/* Pfeil bleibt frei vom Unterstrich (Dauerregel) und rueckt beim Hover */
.sbs-absprung__pfeil {
	display: inline-block;
	margin-left: 4px;
	transition: transform .15s ease;
}

.elementor .sbs-absprung__link:hover {
	color: var(--accent);
}

.elementor .sbs-absprung__link:hover .sbs-absprung__pfeil {
	transform: translateX(3px);
}

.sbs-absprung--karte {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--blue);
	border-radius: var(--radius-md);
	padding: 16px 18px;
	max-width: 560px;
}

/* ---------- Kontakt-Sektion: Raster und Kacheln ---------- */

/* stretch + 1fr-Nachrichtzeile = Symmetrie der Unterkanten (v15) */
.sbs-kontaktsektion__grid {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: 56px;
	margin-top: 44px;
	align-items: stretch;
}

.sbs-kontaktsektion > .sbs-kontaktsektion__grid:first-child {
	margin-top: 0;
}

/* Labelhoehe 18px + 7px Abstand + 1px Fluent-Rest, live nachgemessen:
   die Kachelspalte beginnt auf der Oberkante des ersten Feldkastens
   (v15-Symmetrie, oben) */
.sbs-kontaktsektion__info {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 26px;
}

.sbs-kontaktkachel {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 16px 18px;
}

.sbs-kontaktkachel--blau {
	border-left: 3px solid var(--blue);
}

.sbs-kontaktkachel__label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--blue);
	font-weight: 500;
}

.sbs-kontaktkachel__label::before {
	content: "// ";
	color: var(--accent);
}

.sbs-kontaktkachel__wert {
	font-size: 15px;
	font-weight: 700;
	margin-top: 4px;
}

.elementor .sbs-kontaktkachel__wert a {
	color: var(--text);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.elementor .sbs-kontaktkachel__wert a:hover {
	color: var(--accent);
}

.sbs-kontaktkachel__zusatz {
	font-size: 12.5px;
	color: var(--text-muted);
	margin-top: 3px;
	line-height: 1.5;
}

/* ---------- .sbs-ff: die Feldsprache auf Fluent-Markup ----------
   Fluent packt die Felder in ein <fieldset> - das Raster gehoert
   dorthin, nicht ans <form> (dort haette es genau ein Grid-Kind;
   Befund der Erstabnahme am 2026-08-20). Die Screenreader-Legend
   wird absolut versteckt, sonst belegte sie den ersten Rasterplatz. */

.sbs-ff form fieldset {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
	border: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.sbs-ff legend.ff_screen_reader_title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* form-Praefix hebt auf (0,2,1): Fluents .frm-fluent-form .ff-el-group
   setzt 20px margin-bottom mit (0,2,0) und laedt spaeter */
.sbs-ff form .ff-el-group {
	grid-column: 1 / -1;
	margin-bottom: 0;
}

.sbs-ff form .ff-el-group.sbs-halb {
	grid-column: auto / span 1;
}

.sbs-ff .ff-el-input--label {
	padding: 0;
	margin: 0 0 7px;
	/* feste Hoehe = deterministischer 25px-Versatz der Kachelspalte (v15) */
	height: 18px;
	line-height: 18px;
	display: block;
}

.sbs-ff .ff-el-group .ff-el-input--label label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text);
	line-height: 18px;
	margin: 0;
}

/* Zusatz im Label ("fuer schnelle Rueckfragen"), Bauvorlage v15 */
.sbs-ff .ff-el-group .ff-el-input--label label small {
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--text-muted);
	font-size: 11px;
	margin-left: 6px;
}

.sbs-ff .ff-el-is-required.asterisk-right label::after {
	color: var(--text);
}

/* Das form im Selektor ist tragend (28.08.): Fluents spaeter ladendes
   .ff-default .ff-el-form-control (0,2,0) nahm Farbe und Schriftart -
   erst (0,2,1) gewinnt. Der zweite Gegner (Kit-Feldfarbe ueber
   __globals__, traf Inputs mit (0,3,1)) ist am 28.08. entkernt,
   Sicherung _kit_settings_bak_20260828-104352. Der Platzhalter bleibt
   bewusst bei Fluents Grau (Kundenfreigabe). */
.sbs-ff form .ff-el-form-control {
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--text);
	background: var(--surface-card);
	border: 1px solid var(--line-input);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	width: 100%;
	height: auto;
	line-height: 1.4;
	outline: none;
	box-shadow: none;
}

.sbs-ff .ff-el-form-control:hover {
	border-color: rgba(24, 23, 22, .45);
}

.sbs-ff form .ff-el-form-control:focus {
	border-color: var(--blue);
	/* Fluent setzt im Fokus die Schrift erneut auf sein Grau
	   (.ff-default .ff-el-form-control:focus) - der bekannte
	   Zustands-Fallstrick: jede Eigenschaft in jedem Zustand
	   selbst nennen (Kundenbefund 28.08.). */
	color: var(--text);
	box-shadow: none;
	outline: none;
}

.sbs-ff .ff-el-form-control::placeholder {
	color: #9aa1a5;
}

.sbs-ff textarea.ff-el-form-control {
	min-height: 140px;
	resize: vertical;
}

.sbs-ff .ff-el-help-message {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 6px;
}

/* Fehler: rote Haarlinie plus Meldung in status-red */
.sbs-ff .ff-el-is-error .ff-el-form-control {
	border-color: var(--status-red);
}

.sbs-ff .ff-el-is-error .error,
.sbs-ff .error.text-danger {
	color: var(--status-red);
	font-size: 12.5px;
	font-weight: 600;
	margin-top: 6px;
}

/* Fehler an Pillen: rote Kante, Schrift bleibt Text - Fluent faerbt
   sonst die Beschriftungen (Kundenbefund 3. Runde) */
.sbs-ff .ff-el-is-error .ff-el-form-check label.ff-el-form-check-label {
	color: var(--text);
	border-color: var(--status-red);
}

/* Einwilligung im Fehlerfall: nur die Meldung ist rot - Text bleibt
   gedeckt, der Datenschutz-Link bleibt blau, keine Kante (kein Rahmen) */
.sbs-ff .ff-el-is-error .ff-el-group:has(.ff_gdpr_field) label.ff-el-form-check-label,
.sbs-ff .ff-el-group:has(.ff_gdpr_field).ff-el-is-error label.ff-el-form-check-label {
	color: var(--text-muted);
	border: none;
}

.sbs-ff form .ff-el-is-error a,
.sbs-ff form .ff-el-group.ff-el-is-error label a {
	color: var(--blue);
}

/* ---------- Radios als gleich breite Pillen-Segmente ---------- */

.sbs-ff .ff-el-input--content:has(.ff-el-form-check-radio) {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

/* !important als begruendete Ausnahme: Fluents Check-Margin kommt aus
   einem Plugin-Stylesheet, dessen Regel sich nicht sauber identifizieren
   liess (empirisch belegt am 2026-08-20: Inline-Nullung stellte die
   buendigen Segmente her). Der Geltungsbereich ist eng (.sbs-ff). */
.sbs-ff form .ff-el-input--content > .ff-el-form-check {
	flex: 1 1 0;
	min-width: max-content;
	margin: 0 !important;
	padding: 0;
}

.sbs-ff .ff-el-form-check label.ff-el-form-check-label {
	display: flex;
	align-items: center;
	/* linksbuendig statt zentriert (Kundenbeschluss 28.08., Anlass
	   die vier Radio-Pillen der Kurzanfrage) */
	justify-content: flex-start;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
	background: var(--surface-card);
	border: 1px solid var(--line-input);
	border-radius: var(--radius-sm);
	padding: 8px 10px;
	margin: 0;
	cursor: pointer;
	line-height: 1.4;
}

/* nowrap nur an den Radio-Pillen - Checkbox- und Einwilligungstexte
   muessen umbrechen duerfen */
.sbs-ff .ff-el-form-check:has(.ff-el-form-check-radio) .ff-el-form-check-label {
	white-space: nowrap;
}

.sbs-ff .ff-el-form-check label.ff-el-form-check-label:hover {
	border-color: rgba(24, 23, 22, .45);
}

.sbs-ff .ff-el-form-check:has(input:checked) label.ff-el-form-check-label {
	border-color: var(--blue);
	box-shadow: 0 0 0 1px var(--blue) inset;
}

/* Tastaturfokus (Kundenbeschluss 2026-08-24): Die ganze Zeile bzw. Pille
   traegt die blaue 2px-Kontur (Muster der Kachel-Fokusregel), denn der
   Browser-Standardring am 14px-Kaestchen ist auf den gestylten Pillen
   praktisch unsichtbar. :focus-visible greift nur bei Tastatur, Maus-
   Klicks bleiben konturfrei. Der native Ring am Input weicht zugunsten
   der Label-Kontur. */
.sbs-ff .ff-el-form-check:has(.ff-el-form-check-input:focus-visible) label.ff-el-form-check-label {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

.sbs-ff .ff-el-form-check .ff-el-form-check-input:focus-visible {
	outline: none;
}

.sbs-ff .ff-el-form-check input.ff-el-form-check-input {
	width: 14px;
	height: 14px;
	min-height: 0;
	accent-color: var(--blue);
	margin: 0;
	position: static;
	top: auto;
	transform: none;
	vertical-align: middle;
	flex: none;
}

/* Checkbox-Gruppen (Termine): gestapelte Liste, linksbuendig; Abstand
   wie zwischen den Auswahlknoepfen (einheitliche Felder, 19.10.) */
.sbs-ff .ff-el-input--content:has(input[type="checkbox"].ff-el-form-check-input) {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sbs-ff .ff-el-form-check:has(input[type="checkbox"]) {
	flex: none;
}

/* Kaestchen in derselben Feldgroesse wie die Auswahlknoepfe: Schrift,
   Innenabstand und Markengroesse kommen aus der gemeinsamen Regel oben
   (Kundenwunsch Wolf Goger 19.10.: einheitliche Feldgroessen; vorher
   14px Schrift, 11/14px Innenabstand, 16px Kaestchen). */
.sbs-ff .ff-el-form-check:has(input[type="checkbox"]) .ff-el-form-check-label {
	justify-content: flex-start;
}

/* Einwilligung: kein Pillenrahmen, kleiner Fliess-Text (v11-Beschluss) */
.sbs-ff .ff-el-group:has(.ff_gdpr_field) .ff-el-form-check {
	flex: none;
	min-width: 0;
	width: 100%;
}

.sbs-ff .ff-el-group:has(.ff_gdpr_field) .ff-el-form-check .ff-el-form-check-label {
	white-space: normal;
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
	justify-content: flex-start;
	align-items: flex-start;
	font-size: 13px;
	font-weight: 400;
	color: var(--text-muted);
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}

.sbs-ff .ff-el-group:has(.ff_gdpr_field) .ff-el-form-check-input {
	width: 17px;
	height: 17px;
	margin-top: 2px;
}

/* Der Datenschutz-Link ist ein Inline-Fliesstextlink und folgt der
   Linkregel (28.08.): blau, 600, Unterstrich mit 3px Versatz, Hover
   orange - vorher stand er in 400 ohne Unterstrich und war das
   schwaechste Linksignal der Seite (Kundenbefund). Die Groesse erbt
   er vom Einwilligungstext. */
.sbs-ff .ff-el-group:has(.ff_gdpr_field) a {
	color: var(--blue);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sbs-ff .ff-el-group:has(.ff_gdpr_field) a:hover {
	color: var(--accent);
}

/* ---------- Sendeknopf: .sbs-btn-Werte, alle Zustaende explizit
   (reset.css faerbt Button-Hover sonst rosa - Fallstrick) ---------- */

.sbs-ff form button.ff-btn-submit {
	display: block;
	width: 100%;
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	background: var(--accent);
	color: #fff;
	border: 1.5px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 11.5px 22.5px;
	cursor: pointer;
	white-space: normal;
}

/* Auch Versalien und Laufweite in JEDEM Zustand nennen: Die
   Kit-Abwehr-Regel (button:not(...):hover, Anfang der Datei) traegt im
   Hover (0,3,1) und schluege sonst die Grundregel (0,2,2) - der Knopf
   verlor beim Ueberfahren seine Versalien (Kundenbefund 24.08.). */
.sbs-ff form button.ff-btn-submit:hover,
.sbs-ff form button.ff-btn-submit:focus {
	background: var(--surface-card);
	color: var(--accent);
	border: 1.5px solid var(--accent);
	text-transform: uppercase;
	letter-spacing: .3px;
}

.sbs-ff form button.ff-btn-submit:disabled,
.sbs-ff form button.ff-btn-submit:disabled:hover {
	background: var(--accent);
	color: #fff;
	border: 1.5px solid var(--accent);
	text-transform: uppercase;
	letter-spacing: .3px;
	opacity: .6;
}

/* ---------- Erfolgskarte (ersetzt das Formular an Ort und Stelle) ---------- */

.sbs-ff .ff-message-success {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-top: 3px solid var(--status-green);
	border-radius: var(--radius-md);
	padding: 32px 28px;
	box-shadow: none;
}

/* In der Kontakt-Sektion ersetzt die Erfolgskarte das Formular - sie
   uebernimmt den 26px-Versatz der Kachelspalte, damit ihre Oberkante
   buendig mit der Telefon-Kachel liegt (Kundenbefund 2026-08-20) */
.sbs-kontaktsektion__form .ff-message-success {
	margin-top: 26px;
}

.sbs-ff-erfolg__haken {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--status-green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	margin-bottom: 14px;
}

.sbs-ff-erfolg b {
	display: block;
	font-size: 18px;
	margin-bottom: 6px;
	color: var(--text);
}

.sbs-ff-erfolg p {
	font-size: 13.5px;
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0;
}

.sbs-ff-erfolg ul {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	color: var(--text);
}

.sbs-ff-erfolg li {
	padding-left: 22px;
	position: relative;
	margin-bottom: 6px;
}

.sbs-ff-erfolg li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--status-green);
	font-weight: 700;
}

.sbs-ff-erfolg__alt {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--text-muted);
}

.elementor .sbs-ff-erfolg__alt a {
	color: var(--blue);
	font-size: 12.5px;
}

/* ---------- Kurzanfrage: feste Zeilen plus Symmetrie (v15) ----------
   Sechs Zeilen: Name/Firma - E-Mail/Telefon - Anfrageart - Nachricht
   (1fr, dehnt sich) - Einwilligung - Knopf. Die Zeilenzuordnung haengt
   an der Feldreihenfolge von Formular 4 - wer dort Felder ergaenzt,
   prueft dieses Raster. */

.sbs-ff-kurz .fluentform,
.sbs-ff-kurz form {
	height: 100%;
}

.sbs-ff-kurz form fieldset {
	grid-template-rows: auto auto auto 1fr auto auto;
	height: 100%;
}

.sbs-ff-kurz .ff-el-group:has(textarea) {
	display: flex;
	flex-direction: column;
}

.sbs-ff-kurz .ff-el-group:has(textarea) .ff-el-input--content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sbs-ff-kurz textarea.ff-el-form-control {
	flex: 1;
	min-height: 120px;
}

/* ---------- Produkt-Anfrage: freie Zeilen, Formular 6 ----------
   Kein Zeilen-Korsett wie bei der Kurzanfrage - Formular 6 hat eine
   andere Feldfolge (PLZ und Anliegen als dritte halbe Zeile), das
   Basisraster von .sbs-ff traegt alles. Nur die Nachricht bekommt
   eine Mindesthoehe. */

.sbs-ff-produkt textarea.ff-el-form-control {
	min-height: 140px;
}

/* Hinweis-Bloecke im Produktformular (Depot-Adresse, Anfahrtskosten):
   Karte mit Blaukante, in der Sprache der Kontaktwege-Kacheln. */
.sbs-ff .sbs-ff-hinweis {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--blue);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--text-muted);
}

.sbs-ff .sbs-ff-hinweis b {
	color: var(--text);
}

/* Checkbox-Gruppen nebeneinander (Erwerbsform, Kundenwunsch 2026-08-21):
   die Klasse sbs-inline am Feld dreht die gestapelte Grundregel auf
   eine umbrechende Zeile. Selektor mit demselben :has-Muster plus
   Klasse, damit er die Grundregel sicher schlaegt. */
.sbs-ff .sbs-inline .ff-el-input--content:has(input[type="checkbox"].ff-el-form-check-input) {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

/* Adress-Weichen (sbs.js, initProduktAdressWeichen): ausgeblendete
   Optionen und automatisch entschiedene Weichen. !important nur an der
   Gruppe: Fluents Bedingungslogik setzt dort inline display, und die
   Weiche soll trotz erfuellter Fluent-Bedingung verborgen bleiben. */
.sbs-ff form .ff-el-input--content > .ff-el-form-check.sbs-option-aus {
	display: none;
}

.sbs-ff .ff-el-group.sbs-weiche-auto {
	display: none !important;
}

/* Anliegen kompakt: Zweispalter-Grid mit festem Kundenschnitt
   (2026-08-21) - links Angebot und Beratung, rechts die drei leichteren
   Wege. Grid statt multicol, denn die Checkbox-Grundregel oben stellt
   den Container per :has auf flex, und auf Flex sind Mehrspalten
   wirkungslos (erster Anlauf, vom Kunden gefunden). Der Selektor traegt
   dasselbe :has-Muster plus .sbs-anliegen und gewinnt damit die
   display-Frage. Die Platzierung haengt an nth-child: Wer Optionen
   ergaenzt oder umsortiert, zieht diese Zeilen mit. */
.sbs-ff .sbs-anliegen .ff-el-input--content:has(input[type="checkbox"].ff-el-form-check-input) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 24px;
}

/* Spaltenweise Lesart (Kundenbeschluss 2026-08-24, seit dem 2026-10-05
   ohne die Stellflaechen-Besichtigung): vier Kaestchen 2/2, links Angebot
   und Depot, rechts Rueckfragen und Beratung. Unter 560px zaehlt die
   Feldreihenfolge direkt. */
.sbs-ff .sbs-anliegen .ff-el-form-check:nth-child(1) { grid-area: 1 / 1; }
.sbs-ff .sbs-anliegen .ff-el-form-check:nth-child(2) { grid-area: 2 / 1; }
.sbs-ff .sbs-anliegen .ff-el-form-check:nth-child(3) { grid-area: 1 / 2; }
.sbs-ff .sbs-anliegen .ff-el-form-check:nth-child(4) { grid-area: 2 / 2; }

@media (max-width: 560px) {
	.sbs-ff .sbs-anliegen .ff-el-input--content:has(input[type="checkbox"].ff-el-form-check-input) {
		grid-template-columns: minmax(0, 1fr);
	}

	.sbs-ff .sbs-anliegen .ff-el-form-check:nth-child(-n+4) {
		grid-area: auto;
	}
}

/* Dreier-Variante (2026-10-05): Projekt-Anfrage und Neu-Produktseite
   tragen nur drei Anliegen, die stehen in jeder Breite untereinander. */
.sbs-ff .sbs-anliegen.sbs-anliegen--drei .ff-el-input--content:has(input[type="checkbox"].ff-el-form-check-input) {
	grid-template-columns: minmax(0, 1fr);
}

.sbs-ff .sbs-anliegen.sbs-anliegen--drei .ff-el-form-check:nth-child(-n+4) {
	grid-area: auto;
}

/* Geschlechterverhaeltnis der Projekt-Anfrage (2026-08-24): eine Zeile
   "Maenner [Feld] : [Feld] Frauen" unter eigener Ueberschrift in
   Label-Optik (HTML-Baustein sbs-vh-kopf, gleiche Bedingung wie die
   Felder). Die Feld-Labels ruecken neben ihre Felder, der Doppelpunkt
   ist Fluents Suffix-Baustein am Maenner-Feld. */
.sbs-vh-titel {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text);
	line-height: 18px;
}

.sbs-ff form .ff-el-group.sbs-vh {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sbs-ff .sbs-vh .ff-el-input--label {
	margin: 0;
	flex: none;
}

.sbs-ff .sbs-vh .ff-el-input--content {
	flex: 1;
	min-width: 0;
}

/* Frauen: Label hinter das Feld */
.sbs-ff .sbs-vh--f .ff-el-input--label { order: 2; }
.sbs-ff .sbs-vh--f .ff-el-input--content { order: 1; }

/* Doppelpunkt neben dem Feld - Fluents Input-Group-Kasten entkernen */
.sbs-ff .sbs-vh .ff_input-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sbs-ff .sbs-vh .ff_input-group-text {
	font-weight: 700;
	color: var(--text);
	background: transparent;
	border: none;
	padding: 0;
}

/* Einspaltig gestapelt haengt der Doppelpunkt am Zeilenende - weglassen */
@media (max-width: 560px) {
	.sbs-ff .sbs-vh .ff_input-group-append {
		display: none;
	}
}

/* Containertyp-Wahl des Suchauftrags (2026-08-24): Zwoelf Kaestchen im
   Zweispalter, spaltenweise gelesen - links Kanon 1 bis 6, rechts 7 bis
   12 (Rasterreihenfolge der Sortimentskacheln). Grid statt multicol aus
   demselben Grund wie beim Anliegen-Feld; auto-flow column erspart hier
   das nth-child-Mapping. Unter 560px eine Spalte in Kanon-Reihenfolge. */
.sbs-ff .sbs-typwahl .ff-el-input--content:has(input[type="checkbox"].ff-el-form-check-input) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(6, auto);
	grid-auto-flow: column;
	gap: 10px 24px;
}

@media (max-width: 560px) {
	.sbs-ff .sbs-typwahl .ff-el-input--content:has(input[type="checkbox"].ff-el-form-check-input) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
	}
}

/* Sektionskopf des Anfrage-Formular-Widgets (Suchauftrag der
   Bestandsuebersicht): Eyebrow, Ueberschrift und Einleitung ueber dem
   Formular, linksbuendig wie die uebrigen Sektionskoepfe der Seite. */
.sbs-formkopf {
	margin: 0 0 32px;
}

.elementor .sbs-formkopf__titel {
	margin: 10px 0 12px;
}

.sbs-formkopf__text {
	max-width: 62ch;
}

/* Transparenz-Kasten des Suchauftrags (2026-08-24): zeigt die
   Filterauswahl, die beim Absenden mitgeht - dieselbe Optik wie der
   Vorbefuellungs-Kasten der Produkt-Anfrage (Karte mit Akzentkante).
   Gefuellt von initSuchauftragVorbefuellung(); ohne Auswahl verborgen. */
.sbs-formkontext {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-md);
	padding: 14px 18px;
	margin-bottom: 20px;
	font-size: 13.5px;
	line-height: 1.5;
}

.sbs-formkontext b {
	font-weight: 700;
}

/* Textknopf "Nicht uebermitteln": alle Zustaende explizit, weil Hello-
   Elementors reset.css Button-Hover und -Focus sonst rosa faerbt
   (Fallstrick-Kapitel). */
/* Seit To-Do 117 ohne Ruhe-Unterstrich: Farbe, Gewicht und das
   X-Icon (Glyphe 2 der Bibliothek, am Dateiende) tragen die Aktion. */
.elementor .sbs-formkontext__aus {
	background: transparent;
	border: 0;
	padding: 0;
	margin-left: 6px;
	font-family: var(--font-body);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--blue);
	cursor: pointer;
	white-space: normal;
}

.elementor .sbs-formkontext__aus::after {
	margin-left: 5px;
}

.elementor .sbs-formkontext__aus:hover,
.elementor .sbs-formkontext__aus:focus {
	background: transparent;
	border: 0;
	color: var(--accent);
}

.elementor .sbs-formkontext__aus:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

/* ---------- Projekt-Anfrage: Abschnitte und Sonderfelder ---------- */

.sbs-formseite {
	max-width: 760px;
	margin: 0 auto;
}

.sbs-ff .ff-el-section-break {
	grid-column: 1 / -1;
	margin: 26px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.sbs-ff fieldset > .ff-el-section-break:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.sbs-ff .ff-el-section-break .ff-el-section-title {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--blue);
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
}

.sbs-ff .ff-el-section-break .ff-el-section-title::before {
	content: "// ";
	color: var(--accent);
}

/* Auswahlfelder in der Feldsprache: Fluent stylt select elementbezogen
   (graue Kante #dadbdd), deshalb hier mit select-Element und eigenem
   Chevron statt der nativen Browser-Optik */
.sbs-ff form select.ff-el-form-control {
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--text);
	background-color: var(--surface-card);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230d2a5c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	border: 1px solid var(--line-input);
	border-radius: var(--radius-sm);
	/* 9.5px statt 12: der native Select-Zeilenkasten ist 5px hoeher als
	   der der Inputs - so schliessen beide bei 41px (gemessen) */
	padding: 9.5px 36px 9.5px 14px;
	height: auto;
	line-height: 1.4;
}

.sbs-ff form select.ff-el-form-control:hover {
	border-color: rgba(24, 23, 22, .45);
}

.sbs-ff form select.ff-el-form-control:focus {
	border-color: var(--blue);
	outline: none;
	box-shadow: none;
}

/* Abschnittswechsel: Fluents <hr> auf Titelhoehe entfaellt - die
   Trennung stellt unsere border-top-Regel des Abschnitts */
.sbs-ff .ff-el-section-break hr,
.sbs-ff .ff-el-section-break .ff-section_break_desk:empty {
	display: none;
}

/* Positionen-Tabelle: Haarlinien-Sprache statt Tabellenoptik,
   Plus/Minus-Knoepfe in Systemfarben statt Fluent-Gruen */
.sbs-ff .ff_repeater_table {
	border-collapse: collapse;
	width: 100%;
}

.sbs-ff .ff_repeater_table th,
.sbs-ff .ff_repeater_table td {
	border: none;
	background: none;
	padding: 0 10px 10px 0;
	text-align: left;
	vertical-align: middle;
}

.sbs-ff .ff_repeater_table th .ff-el-input--label {
	margin-bottom: 0;
}

.sbs-ff .ff_repeater_table td.repeat_btn {
	width: 64px;
	padding-right: 0;
}

.sbs-ff .repeat-plus svg,
.sbs-ff .repeat-minus svg {
	fill: var(--blue);
	cursor: pointer;
}

.sbs-ff .repeat-minus svg {
	fill: var(--text-muted);
}

.sbs-ff .repeat-plus:hover svg,
.sbs-ff .repeat-minus:hover svg {
	fill: var(--accent);
}

/* Upload-Knopf als System-Ghost (Kundenentscheidung 2026-08-20):
   blaue Kontur, fuellt sich blau beim Hover - alle Zustaende explizit
   (reset.css-Falle), Selektor ueber Fluents .ff-btn-Grau gehoben */
.sbs-ff form span.ff_upload_btn.ff-btn {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 13.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: var(--blue);
	background: transparent;
	border: 1.5px solid var(--blue);
	border-radius: var(--radius-sm);
	padding: 11.5px 22.5px;
	cursor: pointer;
	line-height: 1.4;
}

.sbs-ff form span.ff_upload_btn.ff-btn:hover,
.sbs-ff form span.ff_upload_btn.ff-btn:focus {
	background: var(--blue);
	color: #fff;
	border: 1.5px solid var(--blue);
}

/* Fluent drueckt die Konturstaerke mit (0,4,0) auf 1px zurueck */
.sbs-ff form .ff_file_upload_holder span.ff_upload_btn.ff-btn {
	border-width: 1.5px;
}

/* ---------- Ansprechpartner (Kontaktseite, Bauvorlage v3) ---------- */

.sbs-team__intro {
	max-width: 56ch;
	margin-top: 14px;
}

.sbs-team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 44px;
}

.sbs-team-kachel {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.sbs-team-kachel__foto {
	aspect-ratio: 4 / 5;
	background: linear-gradient(160deg, #d6dcdf 0%, #c2cacd 100%);
	/* Bezugsrahmen fuer die Ausschnitt-Regler (Zoom/Versatz je Person) */
	position: relative;
	overflow: hidden;
}

.sbs-team-kachel__foto--leer {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 40px;
	color: rgba(8, 28, 58, .35);
	letter-spacing: .04em;
}

.elementor .sbs-team-kachel__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sbs-team-kachel__text {
	padding: 16px 18px 18px;
}

/* Zustaendigkeit als Eyebrow-Titel, wie die Kontaktwege-Kacheln */
.sbs-team-kachel__label {
	display: block;
	font-family: var(--font-mono);
	/* einzeilig (Kundenwunsch): kompakter als die Kontaktwege-Labels,
	   damit auch "Auftragsabwicklung & Logistik" in die Kachel passt */
	font-size: 10px;
	letter-spacing: .08em;
	white-space: nowrap;
	text-transform: uppercase;
	color: var(--blue);
	font-weight: 500;
	margin-bottom: 4px;
}

.sbs-team-kachel__label::before {
	content: "// ";
	color: var(--accent);
}

.sbs-team-kachel__name {
	font-size: 16px;
	font-weight: 700;
}

.sbs-team-kachel__rolle {
	font-size: 13px;
	color: var(--text-muted);
	margin-top: 3px;
}

/* ---------- Seitenkopf ---------- */

.sbs-seitenkopf__intro {
	max-width: 56ch;
	margin-top: 14px;
}

/* Zentrierte Fassung des Seitenkopfs (404-Vorlage, 23.09.2026): Text mittig,
   die begrenzte Einleitung und die Absprung-Karte mit Automargin in die
   Mitte; die Linkzeile als Textblock folgt dem text-align. */
.sbs-seitenkopf--mittig {
	text-align: center;
}

.sbs-seitenkopf--mittig .sbs-seitenkopf__intro,
.sbs-seitenkopf--mittig .sbs-absprung--karte {
	margin-inline: auto;
}

/* ---------- Umbrueche ---------- */

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

@media (max-width: 900px) {
	.sbs-kontaktsektion__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.sbs-kontaktsektion__info {
		margin-top: 0;
	}

	.sbs-ff form fieldset {
		grid-template-columns: 1fr;
	}

	.sbs-ff-kurz form fieldset {
		grid-template-rows: none;
		height: auto;
	}

	.sbs-ff-kurz .fluentform,
	.sbs-ff-kurz form {
		height: auto;
	}
}

@media (max-width: 600px) {
	.sbs-team__grid {
		grid-template-columns: 1fr;
		max-width: 420px;
	}
}

/* ---------- Depot & Anfahrt (Kontaktseite, Bauvorlage v3) ---------- */

.sbs-depot__intro {
	max-width: 56ch;
	margin-top: 14px;
}

.sbs-depot__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	margin-top: 44px;
	align-items: start;
}

.sbs-depot__anfahrt {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sbs-depot__anfahrt li {
	font-size: 14px;
	color: var(--text-muted);
	margin-bottom: 10px;
	line-height: 1.6;
}

.sbs-depot__anfahrt li b {
	color: var(--text);
}

@media (max-width: 900px) {
	.sbs-depot__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* =========================================================
   Typseiten-Schablone (Grill-Beschluss 2026-08-26,
   mockup-typseite-v1.html). Sektionen liegen als Elementor-
   Container mit css_classes "sbs-wrap sbs-sec" und Flaechen-
   farbe als Instanz-Hintergrund; die Widgets rendern nur den
   Inhalt. Kartentitel tragen .sbs-card-title (Inter 700 18px,
   Kit-Abwehr steht bei der globalen Regel).
   ========================================================= */

/* Gemeinsamer Sektionskopf: Breite wie die Koepfe von
   Entscheidungsweiche und Referenzen (700px im CSS, To-Do 42). */
.sbs-thead {
	max-width: 700px;
	margin-bottom: 34px;
}

.sbs-thead .sbs-thead__lead {
	margin-top: 14px;
	font-size: 14.5px;
}

/* Gemeinsame Kartensprache der Typseiten-Bausteine. */
.sbs-tkap__karte,
.sbs-tvar__karte,
.sbs-tverw__karte {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 22px 22px 24px;
}

.sbs-tkarte__text {
	font-family: var(--font-body);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 8px 0 0;
}

/* REGEL Inline-Textlinks im Fliesstext (Kundenregel 28.08., eine
   Regelstelle): blau, Gewicht 600, Unterstrich mit 3px Versatz,
   Hover orange - fuer ALLE redaktionellen Fliesstexte. Traeger ist
   seit To-Do 118 die SAMMELKLASSE .sbs-prosa, die jeder redaktionelle
   Textcontainer im Widget-Markup zusaetzlich traegt (vorher zwei
   handgepflegte Selektorlisten, die beim Umbenennen einer Klasse
   still versagt haben - Protokoll 28.08.). Neue Textcontainer
   bekommen die Klasse im Markup, NICHT einen neuen Selektor hier.
   Das .elementor-Praefix ist tragend: frontend.min.css setzt
   ".elementor a" auf text-decoration none mit (0,1,1) und laedt
   spaeter - ohne Praefix kam der Unterstrich nie an (Befund 28.08.). */
.elementor .sbs-prosa a {
	color: var(--blue);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.elementor .sbs-prosa a:hover {
	color: var(--accent);
}

/* Textlink mit Pfeil (Ratgeber, Zweitweg, Bestand als Zweitweg):
   Unterstrich nur am Text-Span, nie am Pfeil (Dauerregel). */
.elementor .sbs-tlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--blue);
	text-decoration: none;
}

.sbs-tlink::after {
	transition: transform .15s ease;
}

/* Hover orange wie Inline- und Absprung-Links (Beschluss 28.08.,
   To-Do 112): eigenstaendige Links antworten orange, Kachel-
   Sichtsignale bleiben blau, weil ihre Kachel antwortet. Der Pfeil
   erbt die Farbe ueber currentColor. */
.elementor .sbs-tlink:hover,
.elementor .sbs-tlink:focus-visible {
	color: var(--accent);
}

.elementor .sbs-tlink:hover::after {
	transform: translateX(3px);
}

/* Sektion 2: Einsatzbereiche - Icon-Text-Paare im Charakter der
   Trust-Leiste (Kundenbeschluss 26.08.: Weiss signalisiert Klickbares,
   Einsatzbereiche sind Lesestoff): keine Karten, keine Schatten,
   Haarlinien trennen das Zwei-mal-zwei-Raster. Glyphen aus Lucide
   (ISC), eine Definitionsstelle im Widget, Blau wie die Trust-Icons. */
.sbs-teinsatz {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sbs-teinsatz__paar {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 24px 28px;
}

.sbs-teinsatz__paar:nth-child(odd) {
	border-right: 1px solid var(--line);
	padding-left: 0;
}

.sbs-teinsatz__paar:nth-child(even) {
	padding-right: 0;
}

.sbs-teinsatz__paar:nth-child(-n+2) {
	padding-top: 0;
}

.sbs-teinsatz__paar:nth-child(n+3) {
	border-top: 1px solid var(--line);
}

.sbs-teinsatz__icon {
	width: 28px;
	height: 28px;
	flex: none;
	color: var(--blue);
	margin-top: 2px;
}

.sbs-tinline {
	margin: 26px 0 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--text);
}

/* Sektion 3: Kapazitaet. Kennwert in Bebas, nie ueber Gewicht 400
   (Safari-Kunstfett-Falle). */
.sbs-tkap {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* Blaukante wie B2B-Kachel und Formular-Hinweiskarten: das
   wiederkehrende Element fuer weisse Kacheln mit wichtigem
   Informationsgehalt (Kundenregel 27.08.). Bewusst Blau an allen
   dreien - eine Farbrangfolge truege hier keine Bedeutung, und der
   orange Kennwert behaelt seine Alleinstellung. */
.sbs-tkap__karte,
.sbs-tvar__karte {
	border-left: 3px solid var(--blue);
}

/* Sektion Ausfuehrungsvarianten (Kundenidee 29.08., Pilot Kombi):
   Zweispalter aus Grundriss-Karten. Der Bildrahmen traegt die
   20-Fuss-Proportion 6 zu 2,5 (Kundenvorgabe); object-fit contain,
   eine technische Zeichnung wird nie beschnitten. Leeres Bild-Feld
   rendert die gestrichelte Platzhalterflaeche - gestrichelt ist
   Platzhalter-Semantik und fuer echten Inhalt tabu. */
.sbs-tvar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.elementor .sbs-tvar__bild {
	display: block;
	width: 100%;
	aspect-ratio: 12 / 5;
	object-fit: contain;
	margin-bottom: 14px;
}

/* Container-Grundrisse (Rahmen 6:2,5) nutzen den Karten-Innenabstand
   mit (Kundenwunsch 06.10.): Tueren schwenken nach oben und an der
   Stirnseite aus, bis auf wenige Pixel an den Kartenrand. Der
   Bildrahmen ragt oben, links und rechts je 16 px in den Innenabstand
   (22 px). Die Zeichnungen tragen dafuer EINE Zeichenflaeche von
   447,7 x 194 pt, der Container steht darin mittig, Tuerraum links,
   rechts und oben. Platzhalter bleiben unveraendert. */
.elementor .sbs-tvar:not(.sbs-tvar--4-3) .sbs-tvar__bild {
	width: calc(100% + 32px);
	max-width: none;
	aspect-ratio: 2.307;
	margin: -16px -16px 14px;
}

/* Textbreite am Container (Kundenwunsch 06.10., Schalter je Karte):
   Titel und Text beginnen und enden an den Aussenwaenden des
   Grundrisses. Die Aussenwand liegt 49,7 pt vom Rand der 447,7 pt
   breiten Zeichenflaeche, also 11,1 % der Bildbreite; das Bild ragt
   16 px ueber den Textbereich. Wer Zeichenflaeche oder Rahmen
   aendert, rechnet diese Werte neu. */
.sbs-tvar:not(.sbs-tvar--4-3) .sbs-tvar__karte--am-container > .sbs-tkarte__titel,
.sbs-tvar:not(.sbs-tvar--4-3) .sbs-tvar__karte--am-container > .sbs-tkarte__text {
	margin-left: calc(11.1% - 12.4px);
	margin-right: calc(11.1% - 12.4px);
}

/* Bild-Platzhalter, EINE Basisregel (Kundenregel 29.08.: fehlende
   Bilder zeigen eine Platzhalterflaeche, nie ein Loch): gestrichelt
   nach der Platzhalter-Semantik; die Proportion stellt der jeweilige
   Kontext (Varianten 6:2,5, Stufen- und Ausstattungsfotos 4:3 wie
   ihre echten Bilder). */
.sbs-bildplatzhalter {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	border: 1.5px dashed var(--line-input);
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	font-size: 12.5px;
	letter-spacing: .02em;
}

.sbs-tvar__platzhalter {
	aspect-ratio: 12 / 5;
}

/* Rahmen-Schalter der Varianten-Instanz (Mehrfachanlagen 03.09.):
   Anlagen-Grundrisse und Aussenansichten sind hoeher als ein
   20-Fuss-Container; 4:3 wie die Stufen- und Ausstattungsbilder.
   Bild und Platzhalter wechseln gemeinsam, damit Karten mit und ohne
   Zeichnung gleich hoch bleiben. */
.elementor .sbs-tvar--4-3 .sbs-tvar__bild,
.sbs-tvar--4-3 .sbs-tvar__platzhalter {
	aspect-ratio: 4 / 3;
}

.sbs-tkap__platzhalter,
.sbs-taus__platzhalter {
	aspect-ratio: 4 / 3;
}

/* Stufen-Rendering im Kartenkopf (ersetzt das Schema, wenn gesetzt).
   Fester 4/3-Rahmen mit Mittelschnitt, damit alle drei Stufenbilder
   gleich hoch und gleich breit stehen (Kundenauftrag 27.08.); 4/3 ist
   der Kachel-Standard von Sortiment und Bestand und deckt sich mit
   zwei der drei Quellformate. */
.sbs-tkap__karte .sbs-tkap__bild {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	margin-bottom: 14px;
}

/* Grundriss-Schema im Stufenkopf: Architektur-Abstraktion statt Foto
   (Kundenbeschluss 27.08.), Strichsprache und Blau der Icons. */
.sbs-tkap__schema {
	display: block;
	width: 96px;
	height: 56px;
	color: var(--blue);
	margin-bottom: 14px;
}

.sbs-tkap__wert {
	display: block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 24px;
	letter-spacing: .02em;
	line-height: 1.05;
	color: var(--accent);
	margin-bottom: 8px;
}

.sbs-tmasse {
	margin: 24px 0 0;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--text-muted);
}

.sbs-tmasse b {
	color: var(--text);
	font-weight: 600;
}

/* Sektion 3a: ASR-Baustein - Icon-Text-Paare im Charakter der
   Einsatzbereiche (Kundenbeschluss 27.08., A-B-A-Rhythmus der
   Sektionen): keine Karten, senkrechte Haarlinien trennen den
   Dreispalter. Schwellen-Feld nur bei belegtem Wert (zweistufig). */
.sbs-tasr {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sbs-tasr__paar {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 24px 28px;
}

.sbs-tasr__paar:nth-child(odd) {
	border-right: 1px solid var(--line);
	padding-left: 0;
}

.sbs-tasr__paar:nth-child(even) {
	padding-right: 0;
}

.sbs-tasr__paar:nth-child(-n+2) {
	padding-top: 0;
}

.sbs-tasr__paar:nth-child(n+3) {
	border-top: 1px solid var(--line);
}

.sbs-tasr__icon {
	width: 28px;
	height: 28px;
	flex: none;
	color: var(--blue);
	margin-top: 2px;
}

.sbs-tasr__norm {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .06em;
	color: var(--text-muted);
	white-space: nowrap;
}

/* Die belegten Schwellenwerte als weisse Info-Kachel mit Blaukante
   (Kundenregel vom 27.08., wichtige weisse Nicht-Klick-Kacheln).
   Die fruehere gestrichelte Kante war die Platzhalter-Optik der
   weichen Fassung und ist mit den belegten Werten abgeloest. */
.sbs-tasr__schwelle {
	margin: 12px 0 0;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--blue);
	border-radius: var(--radius-sm);
	padding: 10px 13px;
	font-family: var(--font-body);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text);
}

.sbs-tasr__quelle {
	margin: 18px 0 0;
	font-family: var(--font-body);
	font-size: 11.5px;
	color: var(--text-muted);
}

.sbs-tasr__bruecke {
	margin: 18px 0 0;
	max-width: 74ch;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.65;
	color: var(--text);
}

/* Sektion 4: Ausstattung als Galerie ohne Kachelkoerper (Kundenregel
   28.08.: nicht klickbar, keine Faktenkachel - also kein Weiss). Die
   Detailfotos stehen frei auf der Flaeche, darunter die Unterschrift;
   Eintrag ohne Foto rendert als reiner Text (zweistufig). */
.sbs-taus {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 20px;
}

/* 4/3 aus dem Material abgeleitet (alle sechs Detailfotos liegen auf
   1,333 - Hausregel aus Kapitel Bilder in Kartenrastern); als freies
   Galeriebild voll gerundet. */
.sbs-taus__foto {
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
}

.sbs-taus__karte .sbs-taus__titel {
	margin: 14px 0 0;
}

.sbs-taus__karte .sbs-taus__text {
	margin: 6px 0 0;
}

/* Eintrag ohne Bild beginnt direkt mit dem Titel. */
.sbs-taus__karte > .sbs-taus__titel:first-child {
	margin-top: 0;
}

/* Sektion 5: Aufbereitungs-Story. Vorher klein im grossen Nachher. */
/* Raster der Story (Beschluss 28.08.): Textspalte traegt Einleitung,
   Aufzaehlung und Schluss; das Bild sitzt ausschliesslich in der
   Aufzaehlungs-Zeile und schliesst dadurch mit erster und letzter
   Haarlinie buendig ab. Fliesstext kann das Bild nie unter- oder
   ueberlaufen. */
.sbs-tstory {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	grid-template-rows: auto auto auto;
	column-gap: 40px;
}

.sbs-tstory__lead {
	grid-column: 1;
	grid-row: 1;
	font-size: 14.5px;
	margin: 0 0 22px;
}

.sbs-tstory__schritte {
	grid-column: 1;
	grid-row: 2;
}

/* Die Prozess-Schritte als Nummern-Zeilen nach dem Muster der
   Startseiten-Leistungsliste (Kundenbeschluss 28.08.: Erzaehlung
   statt Faktenkachel, also kein Weiss): Mono-Nummer in Orange,
   Haarlinien trennen die Zeilen. */
.sbs-tstory__schritte {
	display: grid;
	gap: 0;
}

.sbs-tschritt {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 14px;
	padding: 22px 0;
	border-top: 1px solid var(--line);
}

.sbs-tschritt:last-child {
	border-bottom: 1px solid var(--line);
}

.sbs-tschritt__nr {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	color: var(--accent);
	padding-top: 4px;
}

.sbs-tstory__bild {
	grid-column: 2;
	grid-row: 2;
	position: relative;
}

/* Hochformat-Paar (Widget erkennt es am Nachher-Bild): die Bildzelle
   beginnt an der Lead-Oberkante statt an der ersten Haarlinie, die
   Unterkante bleibt buendig zur letzten. */
.sbs-tstory--hochformat .sbs-tstory__bild {
	grid-row: 1 / 3;
}

/* Die Bildhoehe kommt aus der Rasterzeile (= Aufzaehlungsblock), das
   Motiv fuellt per cover; das 4/3 gilt erst wieder einspaltig. */
.sbs-tstory__nachher {
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
	overflow: hidden;
	height: 100%;
}

/* Platzhalter ohne Nachher-Bild: fuellt die Bildzelle wie das Bild
   (Kanten buendig zu erster und letzter Haarlinie); der Grundabstand
   der Platzhalter-Basisklasse wuerde die Unterkante verschieben. */
.sbs-tstory__platzhalter {
	height: 100%;
	margin-bottom: 0;
}

.sbs-tstory__vorher {
	position: absolute;
	left: 18px;
	bottom: 18px;
	width: 34%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-sm);
	border: 2px solid var(--surface-card);
	box-shadow: 0 10px 24px rgba(32, 38, 43, .3);
	overflow: hidden;
}

.sbs-tstory__label {
	position: absolute;
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--text);
	background: rgba(255, 255, 255, .92);
	border-radius: var(--radius-pill);
	padding: 4px 10px;
}

.sbs-tstory__label--nachher {
	right: 14px;
	top: 14px;
}

.sbs-tstory__label--vorher {
	left: 26px;
	bottom: 26px;
}

.sbs-tstory__schluss {
	grid-column: 1;
	grid-row: 3;
	margin: 22px 0 0;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.65;
	color: var(--text);
}

/* Sektion 6: Bestandsauszug. Kacheln kommen aus sbs_bestand_kachel()
   und bringen ihr eigenes CSS mit; minmax(0,1fr) gegen die
   min-content-Falle. */
.sbs-tbestand__stand {
	margin: -14px 0 26px;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--text-muted);
}

.sbs-tbestand__stand b {
	color: var(--text);
	font-weight: 600;
}

.sbs-tbgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.sbs-tausgaenge {
	display: flex;
	align-items: center;
	gap: 26px;
	flex-wrap: wrap;
	margin-top: 34px;
}

/* Leerfall- und Kippschalter-Karte (Suchauftrag bzw. Anfrage fuehrt). */
.sbs-tleer {
	background: var(--surface-accent);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 34px 38px;
	max-width: 720px;
}

/* Suchauftrag-Karte im Bestandsauszug (Kundenspezifikation 31.08.):
   fuellt die freien Raster-Spalten - eine bei zwei Modellen, zwei bei
   einem, im Leerfall die volle Zeile. Bauform der Suchauftrag-Karte
   der Bestandsuebersicht (.sbs-bsuch): weisse Karte mit 4px-Kante
   links; die schmalen Fassungen tragen die Kante in Blau mit
   Ghost-CTA, der Leerfall Orange mit Voll-CTA (das eine Voll-Orange
   der Sektion). Flex-Saeule verankert den CTA an der Unterkante,
   wenn die Nachbar-Kacheln die Zeilenhoehe stellen. */
.sbs-tbsuch {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-left: 4px solid var(--blue);
	border-radius: var(--radius-md);
	padding: 26px 26px 28px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.elementor .sbs-tbsuch__titel {
	margin: 8px 0 10px;
}

.sbs-tbsuch__text {
	margin: 0 0 18px;
	max-width: 62ch;
}

.sbs-tbsuch .sbs-btn,
.sbs-tbsuch .sbs-btn-ghost {
	margin-top: auto;
}

.sbs-tbsuch--zwei {
	grid-column: span 2;
}

.sbs-tbsuch--voll {
	grid-column: 1 / -1;
	border-left-color: var(--accent);
	padding: 32px 30px;
}

/* Im Leerfall traegt die Ueberschrift die grosse Sektionsgroesse
   (Vorbild Bestandsuebersicht), in den Kachel-Fassungen die h3. */
.elementor .sbs-tbsuch--voll .sbs-tbsuch__titel {
	font-size: clamp(32px, 4.2vw, 48px);
}

.sbs-tleer .sbs-btn {
	display: inline-block;
	margin-top: 20px;
}

/* Kippschalter anfrage/projekt (04.09.): Standzeile und Kacheln folgen
   der Anfrage-Karte; der negative Anschluss der Standzeile an den Lead
   entfaellt dann, sie bekommt den Abstand der Ausgaenge. */
.sbs-tleer + .sbs-tbestand__stand {
	margin-top: 34px;
}

/* Sektion 7: Verwandte Typen - klickbare Kacheln nach Designregel. */
.sbs-tverw {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 820px;
}

.sbs-tverw__karte {
	position: relative;
	transition: transform .15s ease, box-shadow .15s ease;
}

.sbs-tverw__halbsatz {
	display: block;
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 6px;
}

.elementor .sbs-tverw__link {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.elementor .sbs-tverw__link:hover,
.elementor .sbs-tverw__link:focus-visible {
	color: var(--accent);
	text-decoration: none;
}

.sbs-tverw__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sbs-tverw__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-family: var(--font-body);
	font-size: 13.5px; /* = Kacheltext, Beschluss 28.08.: nur Farbe und Gewicht unterscheiden */
	font-weight: 600;
	color: var(--blue);
}

.sbs-tverw__more::after {
	transition: transform .15s ease;
}

.sbs-tverw__karte:hover .sbs-tverw__more::after {
	transform: translateX(3px);
}

.sbs-tverw__karte:hover,
.sbs-tverw__karte:focus-within {
	transform: translateY(-8px);
	box-shadow: 0 24px 48px -12px rgba(32, 38, 43, .25);
}

.elementor .sbs-tverw__link:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 3px;
}

/* Dreier-Raster, sobald die Abschlusskachel dazukommt (28.08.). */
.sbs-tverw--drei {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: none;
}

/* Abschlusskachel "Groesser denken?!" - Mechanik der Startseiten-
   Kachel (Ghost-CTA, ::after zieht die Klickflaeche ueber die Karte,
   der Button hovert mit), Optik aber wie die Text-Nachbarn: im reinen
   Textkachel-Raster wuerde die Platzhaltergrafik der Startseite
   stoeren. */
.sbs-tverw__karte--hinweis {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.sbs-tverw__karte--hinweis .sbs-tkarte__text {
	margin-bottom: 16px;
}

.sbs-tverw__karte--hinweis .sbs-btn-ghost {
	margin-top: auto;
}

.elementor .sbs-tverw__karte--hinweis .sbs-btn-ghost::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Indexzeile aller Typseiten unter dem Raster - faengt die Besucher
   auf, fuer die der Typname nur Sammelbegriff war (28.08.). Bewusst
   Navigation, kein Fliesstext: daher ohne die Unterstrich-Regel der
   Inline-Textlinks. */
.sbs-tverw__index {
	margin: 26px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-family: var(--font-body);
	font-size: 13.5px;
	line-height: 2;
	color: var(--text-muted);
}

.elementor .sbs-tverw__index a {
	color: var(--blue);
	font-weight: 600;
	text-decoration: none;
}

.elementor .sbs-tverw__index a:hover,
.elementor .sbs-tverw__index a:focus-visible {
	color: var(--accent);
}

/* Breakpoints der Typseiten-Raster. */
@media (max-width: 1024px) {
	.sbs-tbgrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.sbs-tkap,
	.sbs-tvar,
	.sbs-tasr,
	.sbs-tstory {
		grid-template-columns: 1fr;
	}

	/* Einspaltig ordnet die Story: Einleitung, Aufzaehlung, Bild,
	   Schluss; das Bild bekommt sein 4/3 zurueck. Die Hochformat-
	   Variante braucht denselben Selektor, sonst schlaegt ihre
	   (0,2,0)-Regel die Mobilordnung. */
	.sbs-tstory__bild,
	.sbs-tstory--hochformat .sbs-tstory__bild {
		grid-column: 1;
		grid-row: 3;
		margin-top: 22px;
	}

	.sbs-tstory__schluss {
		grid-row: 4;
	}

	.sbs-tstory__nachher,
	.sbs-tstory__platzhalter {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	/* Einspaltig weichen die ASR-Haarlinien von senkrecht auf
	   waagerecht, wie bei den Einsatzbereichen. */
	.sbs-tasr__paar,
	.sbs-tasr__paar:nth-child(odd) {
		border-right: 0;
		padding: 18px 0;
	}

	.sbs-tasr__paar:nth-child(-n+2) {
		padding-top: 18px;
	}

	.sbs-tasr__paar:first-child {
		padding-top: 0;
	}

	.sbs-tasr__paar:nth-child(n+2) {
		border-top: 1px solid var(--line);
	}

	.sbs-taus {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.sbs-teinsatz,
	.sbs-taus,
	.sbs-tbgrid,
	.sbs-tverw {
		grid-template-columns: 1fr;
	}

	/* Einspaltig entfaellt die Mittellinie; getrennt wird nur noch
	   waagerecht, das erste Paar startet an der Kopfkante. */
	.sbs-teinsatz__paar,
	.sbs-teinsatz__paar:nth-child(odd) {
		border-right: 0;
		padding: 18px 0;
	}

	.sbs-teinsatz__paar:nth-child(-n+2) {
		padding-top: 18px;
	}

	.sbs-teinsatz__paar:first-child {
		padding-top: 0;
	}

	.sbs-teinsatz__paar:nth-child(n+2) {
		border-top: 1px solid var(--line);
	}

	.sbs-tleer {
		padding: 26px 22px;
	}

	/* Einspaltig belegt jede Karte genau eine Zeile - ein Spann von 2
	   wuerde im 1fr-Raster stille Zusatzspalten erzeugen. */
	.sbs-tbsuch--zwei {
		grid-column: auto;
	}
}

/* =========================================================
   Icon-Bibliothek, Glyphe 1: Pfeil rechts (Lucide arrow-right,
   ISC, viewBox 24, Strich 2). EINE Definitionsstelle - der
   Einstieg in die eigene Bibliothek: als Maske in currentColor
   erbt das Icon die Linkfarbe wie eine Textglyphe, sitzt aber
   exakt zentrierbar. Kundenbeschluss 28.08.: Icons statt
   Schriftzeichen-Pfeile, und eigenstaendige Links arbeiten ohne
   Unterstriche - nur Farbe, Gewicht und Bewegung (die Inline-
   Fliesstextlinks behalten ihren Unterstrich als einzige Stelle,
   an der er farbunabhaengige Arbeit leistet). vertical-align
   greift nur in den Textfluss-Kontexten (Bestandskachel-CTA,
   Absprung, Buehnen-Karte); in Flex-Traegern zentriert der
   Container. */
.sbs-tlink::after,
.sbs-tcard__more::after,
.sbs-rcard__more::after,
.sbs-rall__title::after,
.sbs-bcard__cta::after,
.sbs-tverw__more::after,
.sbs-absprung__pfeil,
.sbs-p2-bkarte__pfeil,
.sbs-btn__pfeil,
.sbs-bestand__mehr .sbs-btn-ghost::before,
.sbs-bestand__mehr .sbs-btn-ghost::after {
	content: "";
	display: inline-block;
	flex: none; /* Flex-Traeger druecken das Icon sonst zusammen */
	width: 15px;
	height: 15px;
	vertical-align: -2.5px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Glyphe 1 nach unten gedreht: Mehr-Knopf der Raster, links und rechts
   vom Text (22.09.2026). Orange als weiche Ausnahme vom Blau des Ghost-
   Knopfs (Kundenbeschluss 22.09.): das Signal "hier geht es weiter"; auf
   der blauen Hover-Flaeche die helle Akzentstufe fuer den Kontrast. */
.sbs-bestand__mehr .sbs-btn-ghost::before,
.sbs-bestand__mehr .sbs-btn-ghost::after {
	transform: rotate(90deg);
	vertical-align: middle;
	background-color: var(--accent);
}

.sbs-bestand__mehr .sbs-btn-ghost:hover::before,
.sbs-bestand__mehr .sbs-btn-ghost:hover::after,
.sbs-bestand__mehr .sbs-btn-ghost:focus-visible::before,
.sbs-bestand__mehr .sbs-btn-ghost:focus-visible::after {
	background-color: var(--accent-on-dark);
}

/* Glyphe 2: X / Entfernen (Lucide x, ISC, viewBox 24, Strich 2).
   Traeger: die Entfernen-Zeichen der Filter-Chips (vorher
   Schriftzeichen \2715), der Reset-Chip und "Nicht uebermitteln"
   (To-Do 117: die Ruhe-Unterstriche entfallen, das Icon traegt die
   Aktion; Kundenidee X-Icon, Rot verworfen - Rot ist die
   Fehlerfarbe der Formularsprache, das Icon erbt per currentColor
   Blau und den Orange-Hover). 12px passend zu den 11,5-12,5px der
   Traeger; Abstaende stehen bei den Traegern. */
.sbs-bchip::after,
.sbs-formkontext__aus::after {
	content: "";
	display: inline-block;
	flex: none;
	width: 12px;
	height: 12px;
	vertical-align: -1.5px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   Ueber-uns-Seite (Sitzung 02.09., Bauvorlage mockup-ueber-uns-v1)
   Vier Bausteine, die es fuer diese Seite neu oder als Variante
   braucht. Mobilregeln stehen am Ende dieses Blocks, damit sie
   die (0,3,0)-Desktopregeln der Varianten schlagen (bekannte Falle:
   Zustandsregel ausserhalb der Media Query schlaegt die Mobilordnung).
   ========================================================= */

/* Bild-Text-Raster (Widget sbs-bildtext): Mass der Aufbereitungs-Story
   (Text 1.05fr, Bild 1fr, 40px Luecke). Das Bild schliesst oben und
   unten buendig mit dem Fliesstext ab (Kundenwunsch 02.09.): es liegt
   absolut in seiner Zelle, damit seine Eigenhoehe die Rasterzeile nicht
   aufzieht - die Textspalte allein bestimmt die Hoehe, das Motiv fuellt
   per cover. Einspaltig bekommt es sein 4/3 zurueck. */
.sbs-bildtext {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	column-gap: 40px;
	align-items: stretch;
}

.sbs-bildtext__absatz {
	font-size: 14.5px;
	line-height: 1.65;
}

.sbs-bildtext__absatz + .sbs-bildtext__absatz {
	margin-top: 14px;
}

.sbs-bildtext__bild {
	position: relative;
	min-height: 0;
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
	overflow: hidden;
}

.elementor .sbs-bildtext__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Depot-Block in Kachel-Darstellung (Widget sbs-depot, darstellung =
   kacheln): rechts die Kontaktwege-Kacheln der Startseite, links nimmt
   die Zweiklick-Karte die Hoehe der Kachelspalte. */
.sbs-depot__grid--kacheln {
	align-items: stretch;
	margin-top: 56px;
}

.sbs-depot__kacheln {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sbs-depot__grid--kacheln .sbs-p2-karte {
	margin-top: 0;
	aspect-ratio: auto;
	height: 100%;
}

/* Ansprechpartner liegend (Widget sbs-team, layout = liegend): zwei
   Kacheln nebeneinander, Foto links auf Kachelhoehe, Satz zur Person,
   Pfeil-Textlink darunter. */
.sbs-team--liegend .sbs-team__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sbs-team--liegend .sbs-team-kachel {
	display: grid;
	grid-template-columns: 42% minmax(0, 1fr);
}

.sbs-team--liegend .sbs-team-kachel__foto {
	aspect-ratio: auto;
	height: 100%;
}

.elementor .sbs-team--liegend .sbs-team-kachel__foto img {
	object-position: center top;
}

.sbs-team-kachel__satz {
	font-family: var(--font-body);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 10px 0 0;
}

.elementor .sbs-team__link {
	margin-top: 26px;
}

/* Icon-Text-Paare dreispaltig (Widget sbs-typ-einsatz, spalten = 3):
   drei Paare nebeneinander, Haarlinien nur senkrecht dazwischen. Die
   (0,3,0) hier schlagen bewusst die Zwei-mal-zwei-Regeln des Widgets. */
.sbs-teinsatz--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sbs-teinsatz--3 .sbs-teinsatz__paar,
.sbs-teinsatz--3 .sbs-teinsatz__paar:nth-child(odd),
.sbs-teinsatz--3 .sbs-teinsatz__paar:nth-child(even) {
	padding: 0 28px;
	border-top: 0;
	border-right: 1px solid var(--line);
}

.sbs-teinsatz--3 .sbs-teinsatz__paar:first-child {
	padding-left: 0;
}

.sbs-teinsatz--3 .sbs-teinsatz__paar:last-child {
	padding-right: 0;
	border-right: 0;
}

/* Titelgroesse fest im Widget (Befund Wolf Goger 19.10.): bisher kam
   die 18px nur aus der Kit-Regel ".elementor-kit-258 h3". Wo das Kit
   nicht greift, setzte reset.css 1.75rem (28px), und die gewollt
   zweizeiligen Titel brachen dreizeilig um. */
.elementor .sbs-teinsatz .sbs-tkarte__titel {
	font-size: 18px;
}

/* Zwischen 901 und 1100px ist die Spalte fuer "Der Gebrauchtcontainer"
   neben dem Icon zu schmal (gemessen: dreizeilig unter rund 1050px).
   Dort steht das Icon ueber dem Titel, der Text bekommt die volle
   Spaltenbreite. */
@media (min-width: 901px) and (max-width: 1100px) {
	.sbs-teinsatz--3 .sbs-teinsatz__paar {
		flex-direction: column;
		gap: 12px;
	}
}

@media (max-width: 900px) {
	.sbs-bildtext {
		grid-template-columns: 1fr;
	}

	.sbs-bildtext__bild {
		margin-top: 22px;
		aspect-ratio: 4 / 3;
	}

	.elementor .sbs-bildtext__bild img {
		position: static;
	}

	.sbs-depot__grid--kacheln .sbs-p2-karte {
		aspect-ratio: 16 / 10;
		height: auto;
	}

	.sbs-team--liegend .sbs-team__grid {
		grid-template-columns: 1fr;
		max-width: 560px;
	}

	.sbs-teinsatz--3 {
		grid-template-columns: 1fr;
	}

	.sbs-teinsatz--3 .sbs-teinsatz__paar,
	.sbs-teinsatz--3 .sbs-teinsatz__paar:nth-child(odd),
	.sbs-teinsatz--3 .sbs-teinsatz__paar:nth-child(even),
	.sbs-teinsatz--3 .sbs-teinsatz__paar:last-child {
		padding: 18px 0;
		border-right: 0;
		border-top: 1px solid var(--line);
	}

	.sbs-teinsatz--3 .sbs-teinsatz__paar:first-child {
		padding-top: 0;
		border-top: 0;
	}
}

@media (max-width: 480px) {
	.sbs-team--liegend .sbs-team-kachel {
		grid-template-columns: 1fr;
	}

	.sbs-team--liegend .sbs-team-kachel__foto {
		aspect-ratio: 4 / 5;
		height: auto;
	}
}

/* =========================================================
   Hinweisbox als Kachel mit Blaukante (Privatbesucher-Hinweis,
   Wohncontainer 12.09.): weisse, nicht klickbare Kachel mit
   wichtigem Inhalt, linksbuendig, in der Breite der Sektion;
   sitzt als zweites Widget unter dem Einsatz-Absatz.
   ========================================================= */

.elementor .sbs-notice--kachel {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--blue);
	border-radius: var(--radius-md);
	padding: 26px 32px 28px;
	max-width: none;
	margin: 36px 0 0;
	text-align: left;
}

.elementor .sbs-notice--kachel .sbs-notice__title {
	margin: 6px 0 10px;
}

.elementor .sbs-notice--kachel .sbs-notice__text {
	max-width: 72ch;
	margin-bottom: 14px;
}

.elementor .sbs-notice--kachel .sbs-notice__link {
	display: inline-flex;
}

@media (max-width: 640px) {
	.elementor .sbs-notice--kachel {
		padding: 22px 20px 24px 22px;
		margin-top: 28px;
	}
}

/* ==========================================================================
   Produktseite neue Container (sbs-produktseite-neu.php, To-Do 190)
   Musterseiten vom 18./21.09.2026. Etappe 1: Kopf und Spec-Leiste.
   Aufbau wie Produktseite v2, hier nur die Abweichungen.
   ========================================================================== */

/* Renderings statt Fotos: auf getoenter Flaeche, eingepasst statt beschnitten,
   multiply ohne Schatten (Bildsprache 17.09.) */
.elementor .sbs-pn-galerie__gross {
	background: radial-gradient(ellipse 70% 60% at 50% 45%, #ffffff 0%, #eef1f2 58%, #e2e8ea 100%);
}

.elementor .sbs-pn-galerie__gross img {
	object-fit: contain;
	padding: 18px;
	mix-blend-mode: multiply;
}

/* Ansichtsmarker auf heller Flaeche (Kundenbefund 22.09.2026, C2 Runde 2):
   auf dem Scrim waren Blau und Orange kaum zu erkennen. Das Schild sitzt
   unten links im grossen Bild (gegenueber der Lupe), wechselt beim
   Blaettern; die Vorschaubilder sind helle Karten mit dem Symbol in
   eigener Zeile und dem Seitennamen darunter. */
.sbs-pn-galerie__label {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px 5px 6px;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text);
	pointer-events: none;
}

/* Lupe nach unten rechts, auf die Grundlinie des Schilds (22.09.2026):
   mittig konnte das Schild sie ueberdecken. Nur Neucontainer-Galerie. */
.sbs-pn-galerie__gross .sbs-zoom__lupe {
	left: auto;
	right: 12px;
	bottom: 12px;
	transform: none;
}

.sbs-pn-umriss {
	/* 44:30 seit den Ansichtsmarkern (22.09.2026): Platz fuer Schnittlinie
	   und Pfeil ausserhalb des Umrisses */
	width: 36px;
	height: 24.5px;
	flex: none;
	color: #8a9296;
}

.sbs-pn-galerie__streifen {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
}

/* Der Daumen ist eine helle Karte: Bild oben, darunter Symbol und Name */
.elementor .sbs-pn-galerie__daumen {
	display: flex;
	flex-direction: column;
	aspect-ratio: auto;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--surface-card);
	overflow: hidden;
	text-decoration: none;
}

.sbs-pn-galerie__bild {
	display: block;
	aspect-ratio: 4 / 3;
	background: radial-gradient(ellipse at center, #fff 0%, #e2e8ea 100%);
	padding: 4px;
}

.elementor .sbs-pn-galerie__daumen img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.elementor .sbs-pn-galerie__daumen.ist-aktiv,
.elementor .sbs-pn-galerie__daumen:focus-visible {
	border-color: var(--blue);
}

.sbs-pn-galerie__cap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 8px 4px 9px;
	font-size: 11px;
	line-height: 1.3;
	text-align: center;
	color: var(--text);
}

.sbs-pn-galerie__cap .sbs-pn-umriss {
	width: 58px;
	height: 39.5px;
}

@media (max-width: 560px) {
	.sbs-pn-galerie__streifen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* H1 in zwei Zeilen: Modell bis zur Groesse, darunter der Unterscheidungszusatz */
.sbs-pn-titel__haupt,
.sbs-pn-titel__zusatz {
	display: block;
}

.sbs-pn-titel__haupt--lang {
	font-size: .77em;
}

.sbs-pn-titel__zusatz {
	font-size: .5em;
	line-height: 1.1;
	margin-top: 6px;
	color: var(--text-muted);
}

.sbs-p2-kopf--scrim .sbs-pn-titel__zusatz {
	color: var(--text-on-photo);
}

.sbs-pn-preis__netto {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	margin-left: 6px;
	letter-spacing: 0;
	color: var(--text-muted);
}

.sbs-p2-kopf--scrim .sbs-pn-preis__netto {
	color: var(--text-on-photo);
}

.sbs-pn-preis .sbs-p2-preis__zusatz {
	max-width: 46ch;
}

/* Farbwaehler: wechselt Galerie, Lieferzeit und die Farbangaben der Seite */
.sbs-pn-farbwahl {
	margin: 0 0 14px;
}

.sbs-pn-farbwahl__label {
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.sbs-pn-farbwahl__pillen {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.elementor .sbs-pn-farbpille {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--line-input);
	background: transparent;
	color: var(--text);
	border-radius: var(--radius-pill);
	padding: 6px 14px 6px 8px;
	font: 600 13px var(--font-body);
	cursor: pointer;
}

.elementor .sbs-pn-farbpille.ist-aktiv {
	border-color: var(--blue);
}

/* Hover und Fokus ausdrücklich setzen: Ohne eigene Regel greift der
   Button-Reset von Hello Elementor (Pink #c36 mit weißer Schrift,
   Kundenbefund 21.09.). Signal wie die aktive Pille: blaue Kante,
   Fläche und Schrift bleiben. */
.elementor .sbs-pn-farbpille:hover,
.elementor .sbs-pn-farbpille:focus {
	background: transparent;
	color: var(--text);
	border-color: var(--blue);
}

.elementor .sbs-pn-farbpille:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

.sbs-pn-farbpille i {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1px solid rgba(24, 23, 22, .25);
}

.sbs-pn-farbwahl small {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--text-muted);
}

.sbs-pn-lieferzeit {
	font-size: 14px;
	margin: 0 0 26px;
	color: var(--text);
}

.sbs-pn-lieferzeit b {
	font-weight: 700;
}

/* Einladung unter der Lieferzeit: rueckt an die Zeile heran, eine Stufe kleiner */
.sbs-pn-lieferzeit--mit-hinweis {
	margin-bottom: 6px;
}

.sbs-pn-lieferzeit--frueher {
	font-size: 13px;
}

/* Scrim-Fassung: On-Photo-Farben */
.sbs-p2-kopf--scrim .sbs-pn-farbwahl__label,
.sbs-p2-kopf--scrim .sbs-pn-farbwahl small {
	color: rgba(227, 233, 238, .75);
}

.elementor .sbs-p2-kopf--scrim .sbs-pn-farbpille {
	border-color: rgba(227, 233, 238, .45);
	color: #fff;
}

.elementor .sbs-p2-kopf--scrim .sbs-pn-farbpille:hover,
.elementor .sbs-p2-kopf--scrim .sbs-pn-farbpille:focus {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

.elementor .sbs-p2-kopf--scrim .sbs-pn-farbpille.ist-aktiv {
	border-color: #fff;
	background: rgba(255, 255, 255, .12);
}

.sbs-p2-kopf--scrim .sbs-pn-farbpille i {
	border-color: rgba(255, 255, 255, .6);
}

.sbs-p2-kopf--scrim .sbs-pn-lieferzeit {
	color: #fff;
}

/* Trust-Streifen ohne Zeichen (Claims der Neu-Vorlage) */
.sbs-p2-trust__zelle--ohne-zeichen {
	gap: 0;
}

/* Farbgebundene Teile der Neu-Seite: hidden gilt auch gegen display-Regeln */
[data-sbs-pn-farbe][hidden] {
	display: none !important;
}

/* Neu-Seite, Etappe 2: Kartenraster nach Kartenzahl (keine Einzelkarte in
   einer Reihe), Grundriss-Unterschrift */
.sbs-pn-karten {
	grid-template-columns: repeat(var(--sbs-pn-spalten, 4), minmax(0, 1fr));
}

@media (max-width: 1000px) {
	.sbs-pn-karten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.sbs-pn-karten {
		grid-template-columns: 1fr;
	}
}

/* Grundriss-Beschnitt (C3, Test 22.09.2026): der Streifen mit Zeichnung,
   Seitenverhaeltnis und Versatz setzt sbs_pn_inhaltsrahmen() inline;
   margin-top in % bezieht sich auf die Breite, passt also zum Bild. */
.sbs-pn-blatt--beschnitt {
	overflow: hidden;
}

.elementor .sbs-pn-blatt--beschnitt .sbs-p2-buehne__zeichnung {
	margin-top: var(--sbs-pn-oben, 0);
}

/* Runde 2: freigestellt, Grundriss direkt auf der Sektionsflaeche (wie die
   Renderings: multiply statt weisser Karte, Bildsprache 17.09.) */
.sbs-p2-buehne__plan.sbs-pn-plan--frei {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.elementor .sbs-pn-plan--frei .sbs-p2-buehne__zeichnung {
	mix-blend-mode: multiply;
}

.sbs-pn-plan__cap {
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-top: 10px;
}

/* Neu-Seite, Etappe 3: Hinweis-Kachel unter der Kaufzeile (Designregel
   Blaukante), auch auf dem Scrim weiss mit dunkler Schrift */
.elementor .sbs-pn-hinweis {
	margin: 24px 0 0;
	padding: 16px 20px;
}

.elementor .sbs-pn-hinweis .sbs-notice__text {
	margin: 0;
	color: var(--text);
	font-size: 14px;
}

/* Hinweis-Kachel buendig mit der Unterkante der Ansichtsreihe links
   (Kundenwunsch 23.09.2026, To-Do 254): nur im Zweispalter, die Kaufzeile
   wird dann eine Flex-Spalte und die Kachel rutscht nach unten. Ist die
   Kaufzeile hoeher als die Galerie, folgt die Kachel einfach mit 24 px.
   Die 4 px oben gleichen den Zeilenkasten aus, den die Eyebrow im
   Blockfluss hatte; ohne sie rueckte der ganze Block um 4 px nach oben. */
@media (min-width: 901px) {
	.sbs-p2-kopf__raster:has(> .sbs-pn-kauf > .sbs-pn-hinweis) {
		align-items: stretch;
	}

	.sbs-pn-kauf:has(> .sbs-pn-hinweis) {
		display: flex;
		flex-direction: column;
		padding-top: 4px;
	}

	.sbs-pn-kauf:has(> .sbs-pn-hinweis) > .sbs-eyebrow {
		align-self: flex-start;
	}

	.sbs-pn-kauf:has(> .sbs-pn-hinweis) > .sbs-p2-kauf__ctas {
		margin-bottom: 24px;
	}

	.elementor .sbs-pn-kauf > .sbs-pn-hinweis {
		margin-top: auto;
	}
}

/* Modellkachel: Renderings eingepasst auf getoenter Flaeche, eine je Farbe */
.elementor .sbs-pn-kachel__media {
	background: radial-gradient(ellipse 70% 60% at 50% 45%, #ffffff 0%, #eef1f2 58%, #e2e8ea 100%);
}

.elementor .sbs-pn-kachel__media img {
	object-fit: contain;
	padding: 12px;
	mix-blend-mode: multiply;
}

.sbs-pn-kachel .ist-verborgen {
	display: none !important;
}

/* Farbpillen liegen ueber der Klickflaeche des Titel-Links */
.sbs-pn-kpillen {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.elementor .sbs-pn-kpille {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 7px 2px 3px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface-card);
	color: var(--text);
	font: 600 11.5px var(--font-body);
	cursor: pointer;
}

.elementor .sbs-pn-kpille[aria-pressed="true"] {
	border-color: var(--blue);
}

/* Gleicher Schutz vor dem Hello-Button-Reset wie bei den Kopf-Pillen. */
.elementor .sbs-pn-kpille:hover,
.elementor .sbs-pn-kpille:focus {
	background: var(--surface-card);
	color: var(--text);
	border-color: var(--blue);
}

.elementor .sbs-pn-kpille:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 2px;
}

.sbs-pn-kpille i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1px solid rgba(24, 23, 22, .25);
}

.sbs-pn-aehnliche__alle {
	margin: 28px 0 0;
}

/* ==========================================================================
   Seiten neue Container: Übersicht und Linienseite (Mockup v3, 17.09.2026)
   Widgets sbs-nc-klassen, sbs-nc-sofortband, sbs-nc-plus; Nummern-Option
   von sbs-typ-einsatz ("So arbeiten wir").
   ========================================================================== */

/* Klassen-Kacheln: Dreierraster in zwei Reihen, die sechste ist der Absprung */
.sbs-nc-kacheln {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 1000px) {
	.sbs-nc-kacheln {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.sbs-nc-kacheln {
		grid-template-columns: 1fr;
	}
}

.sbs-nc-kachel {
	display: flex;
	flex-direction: column;
}

.sbs-nc-kachel__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	align-items: flex-start;
}

/* Renderings inszeniert: getönte Fläche, zarter Verlauf, kein Schatten */
.elementor .sbs-nc-kachel__media {
	background: radial-gradient(ellipse 70% 60% at 50% 42%, #ffffff 0%, #eef1f2 58%, #e2e8ea 100%);
	border-bottom: 1px solid var(--line);
}

.elementor .sbs-nc-kachel__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 10px;
	mix-blend-mode: multiply;
}

.sbs-nc-kachel__zahl {
	display: block;
	margin: 0 0 12px;
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 10.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.sbs-nc-kachel__sofort {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: -6px 0 12px;
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #1f7a3a;
}

.sbs-nc-kachel__sofort::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--status-green);
	flex: none;
}

.sbs-nc-kachel .sbs-tcard__more {
	margin-top: auto;
}

.sbs-nc-kachel--absprung {
	background: var(--surface-accent);
}

.sbs-nc-kachel--absprung .sbs-nc-kachel__body {
	padding: 24px 26px 26px;
}

.sbs-nc-kachel--absprung .sbs-eyebrow {
	margin-bottom: 10px;
}

.sbs-nc-kachel--absprung .sbs-tcard__text {
	color: var(--text);
}

.elementor .sbs-nc-kachel__knopf {
	margin-top: auto;
	position: relative;
	z-index: 2;
}

/* Absprung als Band unter den Klassen-Kacheln (Kundenbeschluss 23.09.2026,
   To-Do 298): mit sechs Klassen steht das Raster 3 + 3, die Absprung-Kachel
   ist keine Klasse, sondern der Weg aus dem Katalog heraus, und liest sich
   darum als flaches Band ueber die volle Breite. Ab 900 px Text links,
   Knopf rechts; darunter bleibt sie gestapelt wie eine Kachel. */
.sbs-nc-kachel--absprung {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	.sbs-nc-kachel--absprung .sbs-nc-kachel__body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 48px;
		align-items: center;
		padding: 28px 32px;
	}

	.sbs-nc-kachel--absprung .sbs-nc-kachel__body > * {
		grid-column: 1;
	}

	.sbs-nc-kachel--absprung .sbs-tcard__text {
		max-width: 68ch;
		margin-bottom: 0;
	}

	.elementor .sbs-nc-kachel--absprung .sbs-nc-kachel__knopf {
		grid-column: 2;
		grid-row: 1 / span 3;
		margin-top: 0;
		align-self: center;
	}
}

.sbs-nc-klassen__alle,
.sbs-teinsatz__weiter {
	margin: 28px 0 0;
}

/* Sofort-Band: eine Zeile in der grünen Sofort-Sprache; die Sektion
   verschwindet, wenn das Widget nichts ausgibt */
.elementor .e-con.e-parent.sbs-nc-sofort-sektion {
	background: #e6f3ea;
	border-bottom: 1px solid rgba(46, 158, 79, .28);
}

.elementor .e-con.e-parent.sbs-nc-sofort-sektion:not(:has(.sbs-nc-sofortband)) {
	display: none;
}

.sbs-nc-sofortband {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 14px;
	line-height: 1.4;
	color: var(--text);
}

.sbs-nc-sofortband__punkt {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--status-green);
	box-shadow: 0 0 0 4px rgba(46, 158, 79, .18);
	flex: none;
}

.sbs-nc-sofortband b {
	font-weight: 700;
}

.elementor .sbs-nc-sofortband .sbs-tlink {
	margin-left: auto;
}

/* Plus-Block: Bild-Text 45 zu 55, Kennwert-Leiste über die volle Breite */
.sbs-nc-plus__raster {
	display: grid;
	grid-template-columns: 45fr 55fr;
	gap: 48px;
	align-items: stretch;
}

.sbs-nc-plus__text .sbs-prosa {
	margin-top: 16px;
}

.sbs-nc-plus__bild {
	position: relative;
	margin: 0;
	min-height: 380px;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.elementor .sbs-nc-plus__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sbs-nc-plus__quelle {
	position: absolute;
	right: 10px;
	bottom: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(8, 28, 58, .6);
	padding: 3px 7px;
	border-radius: 3px;
}

.sbs-nc-plus__kennwerte {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin-top: 40px;
}

.sbs-nc-plus__kennwerte > div {
	padding: 18px;
	text-align: center;
	border-right: 1px solid var(--line);
}

.sbs-nc-plus__kennwerte > div:last-child {
	border-right: 0;
}

.sbs-nc-plus__kennwerte b {
	display: block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 30px;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--accent);
}

.sbs-nc-plus__kennwerte span {
	display: block;
	margin-top: 6px;
	font-size: 10.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.sbs-nc-plus__meta {
	margin: 16px 0 0;
	font-size: 13.5px;
	color: var(--text-muted);
}

.sbs-nc-plus__wege {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 28px;
}

@media (max-width: 900px) {
	.sbs-nc-plus__raster {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.sbs-nc-plus__bild {
		min-height: 260px;
	}

	.sbs-nc-plus__kennwerte {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sbs-nc-plus__kennwerte > div:nth-child(2n) {
		border-right: 0;
	}

	.sbs-nc-plus__kennwerte > div:nth-child(n+3) {
		border-top: 1px solid var(--line);
	}
}

/* So arbeiten wir: nummerierte Schritte, drei Spalten, Haarlinie oben */
.sbs-teinsatz.sbs-teinsatz--nummern {
	gap: 34px 40px;
}

.sbs-teinsatz--nummern .sbs-teinsatz__paar,
.sbs-teinsatz--nummern .sbs-teinsatz__paar:nth-child(odd),
.sbs-teinsatz--nummern .sbs-teinsatz__paar:nth-child(even),
.sbs-teinsatz--nummern .sbs-teinsatz__paar:first-child,
.sbs-teinsatz--nummern .sbs-teinsatz__paar:last-child {
	display: block;
	padding: 18px 0 0;
	border-right: 0;
	border-top: 1px solid var(--line);
}

.sbs-teinsatz__nr {
	display: block;
	font-family: var(--font-display);
	font-size: 26px;
	line-height: 1;
	color: var(--accent);
	margin-bottom: 10px;
}

@media (max-width: 900px) {
	.sbs-teinsatz.sbs-teinsatz--nummern {
		grid-template-columns: 1fr;
		gap: 26px;
	}
}

/* ---------- Classic-Seite (Mockup v3, Teil B, 21.09.2026) ----------
   B1: Faktenzeile der Linie in Mono unter den Claims des Bestandskopfs.
   B2: Modellauswahl (Widget sbs-nc-raster) in der Bauform der
   Bestandsuebersicht; hier nur die Abweichungen. */
.sbs-bkopf__fakten {
	margin: 14px 0 0;
	font-family: var(--font-mono);
	font-weight: 500; /* Plex Mono nur 500/600 geladen (Beschluss 21.09.2026) */
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.sbs-bkopf--foto .sbs-bkopf__fakten {
	color: rgba(227, 233, 238, .75);
}

/* Gekoppelte Masse ("20-ft-Modul") nicht nach "20-" umbrechen; die Spans
   setzt includes/sbs-masseinheiten.php (Kundenbefund 22.09.2026). */
.sbs-nw {
	white-space: nowrap;
}

/* Foto-Band-Koepfe: unten derselbe Abstand wie oben (Designregel,
   Kundenbeschluss 22.09.2026). 56px vom letzten Inhalt bis zur orangen
   Sektionskante, wie der Kopfabstand oben; vorher 96px Sektionspolster
   plus 10px Kit-Innencontainer = 106. Gilt fuer Bestandskopf und Typenkopf
   im Foto-Modus (Bestandsuebersicht, Neucontainer-Seiten, Typseiten,
   Ueber uns); 46px Polster plus die 10px des Innencontainers ergeben die
   56. Den Hero der Startseite regelt der Hero-Block (.sbs-hero--foto).
   Zuerst am 22.09. nur als Klasse sbs-sec--kopf-knapp an der Classic-Seite
   erprobt, dann zur Regel gemacht. */
.elementor .e-con.e-parent.sbs-sec:has(.sbs-bkopf--foto) {
	padding-bottom: 46px;
}

/* Auch der Sektionskopf der Bestandsuebersicht (To-Do 219, 22.09.):
   dieselbe Kopfform, derselbe Abstand. */
.sbs-nc-raster__kopf,
.sbs-bestand__kopf {
	margin-bottom: 28px;
}

/* Beratungs-Karte: eine Zelle des Rasters (nicht volle Breite wie die
   Suchauftrag-Karte), Blaukante nach Designregel, Knopf unten. */
.sbs-bgrid > .sbs-bsuch.sbs-nc-beratung {
	grid-column: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-left: 3px solid var(--blue);
	padding: 24px 26px 26px;
}

.sbs-nc-beratung .sbs-btn-ghost {
	margin-top: 18px;
}

/* Gerade Trefferzahl: die Karte schliesst die Reihe ueber beide Spalten
   (Klasse setzt sbs.js, Kundenbefund 22.09.2026). */
.sbs-bgrid > .sbs-bsuch.sbs-nc-beratung.sbs-nc-beratung--breit {
	grid-column: 1 / -1;
}

/* B3 Storyline (Widget sbs-nc-story): Kopf 5 zu 6 mit Personenkachel,
   Bild-Text-Zeilen im Wechsel an einer blauen Achse. */
.sbs-nc-story__kopf {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 48px;
	align-items: stretch;
	margin-bottom: 72px;
}

.sbs-nc-story__kopf--allein {
	grid-template-columns: minmax(0, 1fr);
}

.sbs-nc-story__kopf .sbs-thead {
	margin-bottom: 0;
	max-width: none;
}

.sbs-nc-person {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 186px;
	padding: 18px 22px 18px 190px;
	background: var(--surface-card);
	border-left: 3px solid var(--blue);
	border-radius: var(--radius-md);
}

.sbs-nc-person__bild {
	position: absolute;
	left: 18px;
	top: 18px;
	bottom: 18px;
	width: 150px;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.sbs-nc-person__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sbs-nc-person__name {
	display: block;
	margin-top: 4px;
	font-size: 18px;
	font-weight: 700;
	color: var(--text);
}

.sbs-nc-person__rolle {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	color: var(--text-muted);
}

.sbs-nc-person__zitat {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	font-style: italic;
	color: var(--text);
}

.sbs-nc-story__zeilen {
	position: relative;
}

.sbs-nc-story__zeilen::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(13, 42, 92, .35);
}

.sbs-nc-story__zeile {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
	align-items: center;
}

.sbs-nc-story__zeile + .sbs-nc-story__zeile {
	margin-top: 64px;
}

.sbs-nc-story__bild {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--surface-accent);
}

/* .elementor-Stufe (0,2,1): "img { height:auto }" aus frontend.min.css
   schlug die (0,1,1)-Regel bei Gleichstand ueber die Ladereihenfolge,
   das Bild fuellte seinen 4:3-Rahmen nur bei 4:3-Quellen; auf der
   Plus-Seite blieb unter drei 3:2-Fotos ein grauer Streifen
   (Kundenbefund 22.09.). */
.elementor .sbs-nc-story__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sbs-nc-story__quelle {
	position: absolute;
	right: 10px;
	bottom: 8px;
	padding: 3px 7px;
	border-radius: 3px;
	background: rgba(8, 28, 58, .6);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #fff;
}

.sbs-nc-story__achse {
	position: relative;
	z-index: 1;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sbs-nc-story__achse i {
	display: block;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--blue);
	box-shadow: 0 0 0 5px var(--sbs-story-flaeche);
}

/* Sektionsflaeche als Variable (Control "flaeche", 22.09.): Punkt-Hof und
   Zwischenzeile decken die Achse ab und muessen die Flaeche des
   Containers tragen; die Plus-Seite nutzt die Storyline auf base. */
.sbs-nc-story {
	--sbs-story-flaeche: var(--surface-alt);
}

.sbs-nc-story--base {
	--sbs-story-flaeche: var(--surface-base);
}

/* Beratungs-Absprung unter dem Lead (Plus-Seite C6): Voll-Orange und
   Pfeil-Textlink nebeneinander wie die Wege des Plus-Blocks. */
.sbs-nc-story__wege {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin-top: 22px;
}

/* Zwischenzeilen der Plus-Ausstattung ("Serienmaessig", "Auf Wunsch"):
   Mono-Pille in Blau AUF der Achse, also zentriert (Mockup 18.09.; die
   Erstfassung vom 22.09. stand linksbuendig, der Kunde hat es gefunden;
   linksbuendig gilt nur mobil, wo es keine Achse gibt). */
.sbs-nc-story__trenner {
	position: relative;
	z-index: 1;
	margin: 0 0 40px;
	text-align: center;
}

.sbs-nc-story__zeile + .sbs-nc-story__trenner {
	margin-top: 72px;
}

.sbs-nc-story__trenner span {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid rgba(13, 42, 92, .35);
	border-radius: var(--radius-pill);
	background: var(--sbs-story-flaeche);
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--blue);
}

.sbs-nc-story__text {
	max-width: 460px;
	justify-self: start;
}

.sbs-nc-story__zeile--rechts .sbs-nc-story__text {
	justify-self: end;
}

.elementor .sbs-nc-story__text .sbs-h3 {
	margin-bottom: 12px;
}

/* Personenkachel von der Oberkante der H2 bis zur Unterkante des Leads
   (Kundenbefund 22.09.2026, B5): der Sektionskopf loest sich per
   display:contents in drei Rasterzeilen auf, die Eyebrow steht allein in
   Zeile 1, die Kachel belegt die Zeilen 2 und 3 daneben. Keine festen
   Pixel, waechst mit H2 und Lead. Das Portraet sitzt buendig auf der
   Kachelunterkante (in Runde 3 verworfen, siehe unten). Nur Desktop; unter 901px
   gilt der Block unten.
   Zweite Runde (Kundenbefund 22.09.): Spalten wie die Storyline darunter
   (1fr, 88px Achse, 1fr), damit die Kachel am Textrand der rechten
   Storyline-Spalte beginnt; Portraet 130 statt 150px, Innenabstand oben
   und unten 12px, damit das Zitat in H2 plus Lead passt (1280/1440
   gemessen). Das Bild fuellte seine Flaeche nie: .elementor img setzt
   height:auto, daher die .elementor-Stufe. */
@media (min-width: 901px) {
	.sbs-nc-story__kopf:not(.sbs-nc-story__kopf--allein) {
		grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr);
		gap: 0;
		grid-template-rows: auto auto 1fr;
	}

	.sbs-nc-story__kopf:not(.sbs-nc-story__kopf--allein) > .sbs-thead {
		display: contents;
	}

	.sbs-nc-story__kopf:not(.sbs-nc-story__kopf--allein) > .sbs-thead > .sbs-eyebrow {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.sbs-nc-story__kopf:not(.sbs-nc-story__kopf--allein) > .sbs-thead > .sbs-h2 {
		grid-column: 1;
		grid-row: 2;
	}

	.sbs-nc-story__kopf:not(.sbs-nc-story__kopf--allein) > .sbs-thead > .sbs-thead__lead {
		grid-column: 1;
		grid-row: 3;
		align-self: start;
	}

	.sbs-nc-story__kopf:not(.sbs-nc-story__kopf--allein) > .sbs-nc-person {
		grid-column: 3;
		grid-row: 2 / 4;
		min-height: 0;
		padding: 12px 22px 12px 162px;
	}

	/* Beratungs-Absprung (Plus-Seite C6, 22.09.): die Wege bekommen eine
	   vierte Rasterzeile unter dem Lead, die Kachel reicht dann bis zu
	   deren Unterkante. Ohne diese Regel landete das aufgeloeste
	   thead-Kind per Auto-Platzierung in der 88px-Achsenspalte. */
	.sbs-nc-story__kopf:not(.sbs-nc-story__kopf--allein):has(.sbs-nc-story__wege) {
		grid-template-rows: auto auto auto 1fr;
	}

	.sbs-nc-story__kopf:not(.sbs-nc-story__kopf--allein) > .sbs-thead > .sbs-nc-story__wege {
		grid-column: 1;
		grid-row: 4;
		align-self: start;
	}

	.sbs-nc-story__kopf:not(.sbs-nc-story__kopf--allein):has(.sbs-nc-story__wege) > .sbs-nc-person {
		grid-row: 2 / 5;
	}

	/* Dritte Runde (Kundenbeschluss 22.09.): Bild mit gleichem Abstand
	   oben, links und unten (12px) und allen vier Ecken gerundet; das
	   buendige Aufsitzen auf der Unterkante ist verworfen. */
	.sbs-nc-person__bild {
		top: 12px;
		bottom: 12px;
		left: 12px;
		width: 130px;
		border-radius: var(--radius-sm);
	}

	.elementor .sbs-nc-person__bild img {
		height: 100%;
	}
}

@media (max-width: 900px) {
	.sbs-nc-story__kopf {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
		margin-bottom: 48px;
	}

	.sbs-nc-person {
		display: grid;
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 18px;
		min-height: 0;
		padding: 18px;
	}

	.sbs-nc-person__bild {
		position: relative;
		inset: auto;
		width: 120px;
		height: 120px;
	}

	.sbs-nc-story__zeilen::before,
	.sbs-nc-story__achse {
		display: none;
	}

	.sbs-nc-story__zeile,
	.sbs-nc-story__zeile--rechts {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.sbs-nc-story__zeile + .sbs-nc-story__zeile {
		margin-top: 48px;
	}

	.sbs-nc-story__trenner {
		text-align: left;
	}

	.sbs-nc-story__zeile + .sbs-nc-story__trenner {
		margin-top: 48px;
	}

	.sbs-nc-story__zeile--rechts .sbs-nc-story__bild {
		order: -1;
	}

	.sbs-nc-story__text,
	.sbs-nc-story__zeile--rechts .sbs-nc-story__text {
		max-width: none;
		justify-self: stretch;
	}
}

/* ============================================================
   Plus-Seite /neue-container/plus-line/ (22.09.2026)
   Mockup mockup-neucontainer-plus.html, freigegeben 18.09.; Widgets
   sbs-nc-galerie (C2) und sbs-nc-bausteine (C3). Rasterwerte aus dem
   Mockup, Farben und Radien aus dem System.
   ============================================================ */

/* C2 Galerie: drei Spalten, das erste Bild gross links ueber zwei
   Spalten und zwei Zeilen, die uebrigen klein. Unterschrift auf einem
   Verlauf in der Systemfarbe, nennt die Nutzung, nie einen Kunden. */
.sbs-nc-galerie {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 220px;
	gap: 12px;
}

.sbs-nc-galerie__bild {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--surface-accent);
}

.sbs-nc-galerie__bild:first-child {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
}

/* .elementor-Stufe gegen "img { height:auto }" aus frontend.min.css. */
.elementor .sbs-nc-galerie__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sbs-nc-galerie__bild figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 14px 10px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
	background: linear-gradient(to top, rgba(8, 28, 58, .72), rgba(8, 28, 58, 0));
}

.sbs-nc-galerie__quelle {
	margin: 10px 0 0;
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 12px;
	color: var(--text-muted);
}

/* C3 Bausteine: weisse Kacheln ohne Klick, Bild oben in fester Hoehe,
   darunter Titel in der Kachelfamilie, Masszeile in Mono, Zweck als
   Kartentext. Blaukante nach Designregel (weisse, nicht klickbare
   Kachel mit Faktengehalt; To-Do 218, Entscheidung beim Bau 22.09.). */
.sbs-nc-bausteine {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.sbs-nc-baustein {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--blue);
	border-radius: var(--radius-md);
}

.sbs-nc-baustein__bild {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 200px;
	overflow: hidden;
	background: var(--surface-accent);
}

/* Freigestelltes Rendering: das Weiss per multiply verrechnet, kein
   Bodenschatten (Bildregel 17.09.). Die Flaeche ist der Studiohintergrund
   der Paneel-Fotos daneben (oben #e7e7e5, unten fast Weiss, an den
   Bildraendern gemessen), damit Grundmodul und Wandpaneele auf demselben
   Grund stehen (Kundenbefund 22.09.); nicht der blaeuliche Systemverlauf
   der Klassen-Kacheln. */
.sbs-nc-baustein__bild--render {
	padding: 14px;
	background: linear-gradient(180deg, #e7e7e5 0%, #f3f4f0 50%, #fbfbf9 100%);
}

.elementor .sbs-nc-baustein__bild--render img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.elementor .sbs-nc-baustein__bild--foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Zwei Bilder nebeneinander (Wandpaneele). */
.elementor .sbs-nc-baustein__bild--duo img {
	width: 50%;
	height: 100%;
	object-fit: cover;
}

.sbs-nc-baustein__platzhalter {
	width: 100%;
	height: 100%;
	margin: 0;
}

.sbs-nc-baustein__text {
	padding: 16px 18px 20px;
}

.elementor .sbs-nc-baustein__titel {
	font-size: 18px;
	margin: 0 0 6px;
}

.sbs-nc-baustein__mass {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 12.5px;
	color: var(--text-muted);
}

.sbs-nc-baustein .sbs-tkarte__text {
	margin: 0;
}

@media (max-width: 900px) {
	.sbs-nc-galerie {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 150px;
	}

	.sbs-nc-galerie__bild:first-child {
		grid-column: 1 / span 2;
		grid-row: span 2;
	}

	.sbs-nc-bausteine {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.sbs-nc-bausteine {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* C5 Von der Idee zur Genehmigung (Widget sbs-nc-planung): Sektionskopf
   links, grosse Draufsicht rechts, darunter drei Draufsichten in einer
   Reihe, frei auf der Sektionsflaeche ohne Karte (Kundenbefund 18.09.:
   Verlaufsflaechen wirkten deplatziert); Unterschrift mit Haarlinie,
   darunter fuenf nummerierte Schritte OHNE eigene Haarlinie (keine zweite
   Linie unter der Bildunterschrift, Designregel 18.09.). */
.sbs-nc-planung__kopf {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 48px;
	align-items: start;
	margin-bottom: 40px;
}

.sbs-nc-planung__kopf .sbs-thead {
	margin-bottom: 0;
	max-width: none;
}

.sbs-nc-planung__reihe {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin-bottom: 64px;
}

.sbs-nc-planung__bild {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.sbs-nc-planung__flaeche {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 240px;
}

.sbs-nc-planung__bild--gross .sbs-nc-planung__flaeche {
	height: 400px;
}

/* .elementor-Stufe gegen "img { height:auto; max-width:100% }". */
.elementor .sbs-nc-planung__flaeche img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.sbs-nc-planung__bild figcaption {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.sbs-nc-planung__bild figcaption b {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.25;
	color: var(--text);
}

.sbs-nc-planung__bild figcaption span {
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 12.5px;
	color: var(--text-muted);
}

/* Fünf Schritte in einer Reihe statt 3 + 2 (Kundenbeschluss 23.09.2026):
   nicht mehr im Raster der drei Draufsichten, damit kein Schritt wie eine
   Bildunterschrift wirkt, und ohne Loch vor der Gebäudeklasse-Kachel.
   Abstand zu den Draufsichten 65 px (Kundenwahl 23.09., wirkt mit den
   128 px zur Gebäudeklasse-Kachel besser als 129; der Rand der Bildreihe,
   64 px, fällt mit diesem zusammen), Titel mit Raum für
   zwei Zeilen, damit die Texte auf einer Höhe beginnen (alle acht Zeilen
   bei 1280 und 1440). */
.sbs-nc-planung__schritte {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0 28px;
	margin-top: 65px;
}

.sbs-nc-planung__nr {
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--accent);
}

.elementor .sbs-nc-planung__titel {
	font-size: 17px;
	min-height: 2.5em;
	margin: 0 0 8px;
}

.sbs-nc-planung__schritt .sbs-text {
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 900px) {
	.sbs-nc-planung__kopf {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.sbs-nc-planung__bild--gross .sbs-nc-planung__flaeche {
		height: 260px;
	}

	.sbs-nc-planung__reihe,
	.sbs-nc-planung__schritte {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.sbs-nc-planung__schritte {
		margin-top: 0;
	}

	.elementor .sbs-nc-planung__titel {
		min-height: 0;
	}
}

/* ============================================================
   Freigabe-Markierung fuer die Containex-Pruefung (22.09.2026)
   Nur mit body.sbs-cx-pruefung, also nur bei eingeschaltetem Schalter
   (Produkte › Einstellungen Neucontainer). Gelb ist bewusst keine
   Systemfarbe: die Markierung soll als Pruefwerkzeug erkennbar sein,
   wie die gelben Offen-Markierungen der Mockups. Modul
   sbs-freigabe-markierung.php, Skript initContainexMarkierung().
   ============================================================ */
.sbs-cx-pruefung .sbs-cx-leiste {
	background: #ffe066;
	color: #181716;
	font: 600 13px/1.4 "Inter", sans-serif;
	padding: 10px 24px;
	text-align: center;
	border-bottom: 1px solid #e0b800;
}
.sbs-cx-pruefung img.sbs-cx-bild--offen {
	outline: 3px solid #f2c200;
	outline-offset: -3px;
}
/* Freigegebene Bilder tragen nur die graue Pille, keine Umrandung
   (Kundenwunsch 22.09.2026); die Klasse bleibt fuer das Skript. */
.sbs-cx-ebene {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	z-index: 50;
	pointer-events: none;
}
.sbs-cx-pille {
	display: inline-block;
	font-family: "IBM Plex Mono", monospace;
	font-weight: 600;
	font-size: 10px;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 5px 8px;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	vertical-align: middle;
	margin-left: 8px;
}
.sbs-cx-pille--offen {
	background: #ffe066;
	color: #181716;
	border: 1px solid #e0b800;
}
.sbs-cx-pille--frei {
	background: #e2e8ea;
	color: #525b5e;
	border: 1px solid #c5cdd0;
}
.sbs-cx-pille--bild {
	position: absolute;
	margin-left: 0;
	box-shadow: 0 1px 3px rgba(24, 23, 22, .18);
}

/* ---------- Vom Rahmen zur Containeranlage (Widget sbs-nc-aufbau) ----------
   Classic-Seite, To-Do 257, Texte freigegeben 23.09.2026. Kapitel im
   Text-Bild-Wechsel 7 zu 5 (Textspalte 448 px bei 1180 px Inhaltsbreite,
   darauf sind die Blocktexte auf sieben Zeilen gemessen), Abschluss mit
   Bild in voller Breite. Renderings auf Weiss verschmelzen per multiply mit
   der Sektionsflaeche (Designregel: Renderings frei auf der Flaeche). */
.sbs-nc-aufbau__kopf {
	max-width: 760px;
	margin-bottom: 56px;
}

.sbs-nc-aufbau__kapitel {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 56px;
	align-items: center;
}

.sbs-nc-aufbau__kapitel--rechts {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.sbs-nc-aufbau__kapitel--rechts .sbs-nc-aufbau__bild {
	order: 2;
}

.sbs-nc-aufbau__kapitel + .sbs-nc-aufbau__kapitel,
.sbs-nc-aufbau__kapitel + .sbs-nc-aufbau__abschluss {
	margin-top: 72px;
}

.sbs-nc-aufbau__bild {
	margin: 0;
}

.elementor .sbs-nc-aufbau__bild img {
	display: block;
	width: 100%;
	height: auto;
	mix-blend-mode: multiply;
}

.elementor .sbs-nc-aufbau__text .sbs-h3 {
	margin-bottom: 12px;
}

.sbs-nc-aufbau__abschluss .sbs-nc-aufbau__text {
	max-width: 640px;
}

.sbs-nc-aufbau__bild--voll {
	margin-top: 32px;
}

/* Paneelblock: freigestellte PNG, drei je Reihe, gleicher Massstab */
.sbs-nc-aufbau__paneele {
	display: grid;
	grid-template-columns: repeat(3, 132px);
	justify-content: center;
	gap: 22px 14px;
}

.sbs-nc-aufbau__paneel {
	text-align: center;
}

.elementor .sbs-nc-aufbau__paneel img {
	width: 100%;
	max-width: 132px;
	margin: 0 auto;
	mix-blend-mode: normal;
}

.sbs-nc-aufbau__paneel span {
	display: block;
	margin-top: 8px;
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.sbs-nc-aufbau__platzhalter {
	aspect-ratio: 4 / 3;
}

@media (max-width: 900px) {
	.sbs-nc-aufbau__kapitel,
	.sbs-nc-aufbau__kapitel--rechts {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.sbs-nc-aufbau__kapitel--rechts .sbs-nc-aufbau__bild {
		order: 0;
	}

	.sbs-nc-aufbau__kapitel + .sbs-nc-aufbau__kapitel,
	.sbs-nc-aufbau__kapitel + .sbs-nc-aufbau__abschluss {
		margin-top: 56px;
	}

	.sbs-nc-aufbau__paneele {
		grid-template-columns: repeat(3, minmax(0, 110px));
		gap: 16px 12px;
	}

	/* „Vollverglasung“ lief bei 12 px in die Nachbarspalte (390 px, 23.09.) */
	.sbs-nc-aufbau__paneel span {
		font-size: 10px;
		letter-spacing: .02em;
		overflow-wrap: anywhere;
	}
}

/* ---------- Gebäudeklasse-Kachel (Widget sbs-nc-gebaeudeklasse) ----------
   Plus-Seite, C5 unter den fünf Schritten; freigegeben 23.09.2026 (auch GF).
   Weiße Kachel mit Blaukante (Designregel), links Fragen und Schema, rechts
   Ergebnisse 5 zu 7; Abstand zu den Schritten 128 px wie über den
   Schritten (118 plus 10 px Containerabstand, Kundenbeschluss 23.09.),
   mobil 56 px. */
.sbs-nc-gk {
	margin-top: 118px;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--blue);
	border-radius: var(--radius-md);
	padding: 28px 32px;
}

.elementor .sbs-nc-gk__titel {
	font-size: 18px;
	margin-bottom: 8px;
}

.elementor .sbs-nc-gk__intro {
	margin: 0 0 20px;
}

.sbs-nc-gk__raster {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 40px;
}

.sbs-nc-gk__fragen {
	margin: 0;
	padding-left: 22px;
}

.sbs-nc-gk__fragen li {
	margin-bottom: 12px;
	line-height: 1.55;
}

.sbs-nc-gk__fragen li::marker {
	font-family: var(--font-mono);
	font-weight: 600;
	color: var(--blue);
}

.sbs-nc-gk__ergebnis {
	line-height: 1.55;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

.sbs-nc-gk__ergebnis:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.sbs-nc-gk__ergebnis b {
	display: block;
	margin-bottom: 4px;
}

.elementor .sbs-nc-gk__fuss {
	margin: 22px 0 0;
	font-size: 14px;
	color: var(--text-muted);
}

/* Schema: eigene Vektorgrafik, 22 px je Meter */
.sbs-nc-gk__schema {
	margin: 24px 0 0;
	max-width: 380px;
}

.sbs-nc-gk__schema svg {
	display: block;
	width: 100%;
	height: auto;
}

.sbs-nc-gk__boden { stroke: var(--text-muted); stroke-width: 1.5; }
.sbs-nc-gk__fund { fill: var(--text-muted); }
.sbs-nc-gk__modul { fill: #3b3f44; stroke: #2a2d31; stroke-width: 1; }
.sbs-nc-gk__fenster { fill: #cfd8de; }
.sbs-nc-gk__fok { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sbs-nc-gk__grenze { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 4; }
.sbs-nc-gk__mass { stroke: var(--blue); stroke-width: 1.5; fill: none; }
.sbs-nc-gk__t { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .04em; fill: var(--text-muted); }
.sbs-nc-gk__t--blau { fill: var(--blue); }
.sbs-nc-gk__t--grenze { fill: var(--accent); font-weight: 600; }
.sbs-nc-gk__haken-kreis { fill: var(--status-green); }
.sbs-nc-gk__haken { stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
	.sbs-nc-gk {
		margin-top: 46px;
		padding: 22px 20px;
	}

	.sbs-nc-gk__raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

/* ============================================================
   Kartenflaeche (To-Do 321, 24.09.2026): eigene Vorschau-Grafik
   (sbs-karte.php) statt Stecknadel auf Weiss, darueber eine Leiste mit
   Ort, Knopf und Hinweis. Die Karte selbst laedt erst nach Einwilligung
   ueber Real Cookie Banner (sbs.js initKarte). Rahmen, Rundung und
   Seitenverhaeltnis kommen weiter von .sbs-p2-karte.
   ============================================================ */
.sbs-karte {
	display: flex;
	flex-direction: column;
	background: var(--surface-card);
}

/* Vor dem Laden bestimmt der Inhalt die Hoehe (Vorschau mindestens
   200 px plus Leiste); in einer gestreckten Kachelspalte (Ueber uns)
   fuellt die Vorschau den Rest. Nach dem Laden gilt wieder 16/10. */
.sbs-p2-karte.sbs-karte:not(.sbs-karte--geladen) {
	aspect-ratio: auto;
}

.sbs-karte__vorschau {
	position: relative;
	flex: 1 1 auto;
	min-height: 200px;
	background: var(--surface-alt);
	overflow: hidden;
}

.sbs-karte__svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	font-family: Inter, sans-serif;
}

.sbs-karte__leiste {
	flex: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px 18px;
	padding: 14px 18px 12px;
	border-top: 1px solid var(--line);
}

.sbs-karte__ort {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.elementor .sbs-karte__titel {
	font-family: Inter, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text);
}

.sbs-karte__adresse {
	font-size: 13px;
	line-height: 1.4;
	color: var(--text-muted);
}

.sbs-karte__wege {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px 16px;
}

.elementor .sbs-karte__link {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--blue);
	text-decoration: none;
}

.elementor .sbs-karte__link:hover,
.elementor .sbs-karte__link:focus-visible {
	color: var(--accent);
}

.sbs-karte__hinweis {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--text-muted);
}

/* Schmale Kaesten (Kontaktseite, Produkt-Anfrage, Handy): Knoepfe unter
   den Ort. Gemessen wird der Kasten selbst, nicht das Fenster. */
.sbs-karte {
	container-type: inline-size;
}

@container (max-width: 640px) {
	.sbs-karte__leiste {
		grid-template-columns: 1fr;
	}

	.sbs-karte__wege {
		justify-content: flex-start;
	}
}

@media (max-width: 600px) {
	.sbs-karte:not(.sbs-karte--geladen) {
		height: auto;
	}

	.sbs-karte:not(.sbs-karte--geladen) .sbs-karte__vorschau {
		flex: none;
		height: 190px;
		min-height: 0;
	}
}

/* Typseiten, Verwandte: fuehrende Anfragekachel (Kundenbeschluss 25.09.,
   Sondercontainer). Erste Stelle, Akzentflaeche wie die Anfragekarte des
   Bestandsauszugs (.sbs-tleer), der eine orange Knopf sitzt unten. */
.sbs-tverw__karte--fuehrt {
	background: var(--surface-accent);
}

.sbs-tverw__karte--fuehrt .sbs-btn {
	margin-top: auto;
}

/* ============================================================
   Druckansicht der Gebraucht-Produktseite (05.10.2026)
   Ein A4-Datenblatt aus dem Druckdialog. Am Bildschirm ist das Blatt
   verborgen; sbs.js haengt es an <body> und setzt sbs-hat-druck an <html>.
   Maße in pt und mm, weil hier Papier das Ziel ist.
   ============================================================ */
.sbs-druck {
	display: none;
}

@media print {
	@page {
		size: A4;
		margin: 13mm 14mm;
	}

	html.sbs-hat-druck body > *:not(.sbs-druck) {
		display: none !important;
	}

	html.sbs-hat-druck,
	html.sbs-hat-druck body {
		background: #fff !important;
		margin: 0;
		padding: 0;
	}

	html.sbs-hat-druck body > .sbs-druck {
		display: block;
		font-family: var(--font-body);
		font-size: 8.5pt;
		line-height: 1.4;
		color: #111;
	}

	.sbs-druck p {
		margin: 0;
	}

	.sbs-druck__kopf {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		gap: 10mm;
		padding-bottom: 4mm;
		border-bottom: 1.5pt solid var(--blue);
	}

	/* Zwei Klassen plus Element: ".woocommerce-page img { height: auto }"
	   schlug die einfache Klasse, das Logo füllte die Seite (Befund am
	   Probe-PDF, 05.10.2026). */
	html.sbs-hat-druck .sbs-druck img.sbs-druck__logo {
		flex: none;
		height: 13mm;
		width: auto;
		max-width: none;
	}

	.sbs-druck__kontakt {
		flex: none;
		text-align: right;
		font-size: 8pt;
		color: #333;
	}

	.sbs-druck__eyebrow {
		margin-top: 5mm !important;
		font-size: 7.5pt;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--blue);
	}

	.sbs-druck__titel {
		margin-top: 1mm !important;
		font-size: 16pt;
		font-weight: 700;
		line-height: 1.2;
	}

	.sbs-druck__bilder {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 5mm;
		margin-top: 4mm;
		align-items: center;
	}

	.sbs-druck__bilder--eins {
		grid-template-columns: 1fr;
	}

	html.sbs-hat-druck .sbs-druck .sbs-druck__bilder img {
		display: block;
		width: 100%;
		height: 58mm;
		object-fit: contain;
	}

	/* Das Foto füllt sein Feld, der Grundriss bleibt ganz sichtbar. */
	html.sbs-hat-druck .sbs-druck .sbs-druck__bilder img.sbs-druck__foto {
		object-fit: cover;
	}

	.sbs-druck__spec {
		display: flex;
		flex-wrap: wrap;
		gap: 2mm 7mm;
		margin-top: 4mm;
		padding: 2.5mm 0;
		border-top: .5pt solid #999;
		border-bottom: .5pt solid #999;
	}

	.sbs-druck__spec span,
	.sbs-druck__zeile span {
		color: #444;
	}

	.sbs-druck__spec span {
		display: block;
		font-size: 7pt;
		text-transform: uppercase;
		letter-spacing: .05em;
	}

	.sbs-druck__empfehlung {
		margin-top: 3mm !important;
	}

	.sbs-druck__rubriken {
		columns: 2;
		column-gap: 8mm;
		margin-top: 4mm;
	}

	.sbs-druck__rubrik {
		break-inside: avoid;
		margin-bottom: 3.5mm;
	}

	.sbs-druck__rubriktitel {
		font-size: 8pt;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--blue);
		border-bottom: 1pt solid var(--blue);
		padding-bottom: .8mm;
		margin-bottom: 1mm !important;
	}

	.sbs-druck__zeile {
		display: flex;
		justify-content: space-between;
		gap: 4mm;
		padding: .7mm 0;
		border-bottom: .25pt solid #ccc;
	}

	.sbs-druck__zeile b {
		text-align: right;
		font-weight: 600;
	}

	.sbs-druck__text {
		break-inside: avoid;
		margin-top: 3mm;
	}

	.sbs-druck__text p + p {
		margin-top: 1.2mm;
	}

	.sbs-druck__fuss {
		break-inside: avoid;
		margin-top: 4mm;
		padding-top: 2mm;
		border-top: .5pt solid #999;
		font-size: 7.5pt;
		color: #333;
	}

	.sbs-druck__fuss p + p {
		margin-top: .8mm;
	}
}

/* =========================================================
   Ratgeber (To-Do 158, Vorlage mockup-ratgeber-v2, 07.10.2026)
   Uebersicht /ratgeber/ und Beitragsvorlage. Kacheln, FAQ, Autoren-
   Kachel und Foto-Band nutzen die vorhandenen Bausteine (sbs-tverw,
   sbs-faq, sbs-team-kachel, sbs-bkopf); hier steht nur, was der
   Ratgeber zusaetzlich braucht.
   ========================================================= */

/* Kopfabstand 56px auch in der Beitragsvorlage: die Regel der Seiten
   greift nur bei wp-page, die Vorlage ist ein eigenes Dokument. */
[data-elementor-type="single-post"] > .e-con.e-parent:first-of-type {
	padding-top: 56px;
}

[data-elementor-type="single-post"] > .e-con.e-parent:first-of-type > .e-con-inner {
	padding-top: 0;
}

/* Sektion ohne Inhalt (Beitrag ohne FAQ oder ohne Absprung-Typ)
   blendet sich aus, statt ein leeres Band zu zeigen. */
.e-con.sbs-rg-sek:not(:has(.sbs-rg)) {
	display: none;
}

/* Kachelraster: drei je Reihe, Sichtsignal buendig am Kachelfuss. */
.sbs-rg-kacheln {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.sbs-rg-kachel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 24px 26px 26px;
}

.elementor .sbs-rg-kachel .sbs-card-title {
	font-size: 18px;
}

.sbs-rg-kachel .sbs-tverw__more {
	margin-top: auto;
	padding-top: 14px;
}

/* Regel-Uebersicht: vollbreit unter den Buendeln, auf der Akzentflaeche
   (Beschluss 02.10.). Im Weiterlesen-Raster bleibt sie eine Kachel. */
.sbs-rg-kachel--nachschlagen {
	background: var(--surface-accent);
}

.sbs-rg-feld .sbs-rg-kachel--nachschlagen {
	grid-column: 1 / -1;
}

/* Absprung: Kachelpaar, rechts die Bestands-Kachel mit oranger Kante
   und dem einen Voll-Orange des Beitrags. */
.sbs-rg-absprung__paar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 820px;
}

/* Mit der Neu-Kachel (07.10.) drei Spalten in voller Breite, wie die
   Kachelreihen der Uebersicht. */
.sbs-rg-absprung__paar--drei {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: none;
}

.sbs-rg-kachel--bestand {
	border-left: 4px solid var(--accent);
}

.sbs-rg-kachel--bestand:hover,
.sbs-rg-kachel--bestand:focus-within {
	transform: none;
	box-shadow: none;
}

.sbs-rg-kachel--bestand .sbs-btn {
	margin-top: auto;
}

.sbs-rg-kachel--bestand .sbs-tkarte__text {
	margin-bottom: 16px;
}

/* Beitragskopf auf heller Flaeche, Textbreite 760px wie die
   Projekt-Anfrage. */
.sbs-rg-kopf,
.sbs-rg-artikel {
	max-width: 760px;
}

.elementor .sbs-rg-kopf__titel {
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: .95;
}

.sbs-rg-kurzantwort {
	margin-top: 22px;
	font-size: 17px;
	font-weight: 500;
}

.sbs-rg-autorzeile {
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--text-muted);
}

.sbs-rg-autorzeile b {
	font-weight: 600;
	color: var(--text);
}

/* Inhaltsverzeichnis: Navigation, deshalb ohne den Unterstrich der
   Inline-Textlinks. */
.sbs-rg-toc {
	margin: 40px 0 0;
	padding: 18px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.sbs-rg-toc__label {
	display: block;
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 8px;
}

.sbs-rg-toc ol {
	margin: 0;
	padding-left: 20px;
	font-family: var(--font-body);
	font-size: 13.5px;
	line-height: 1.9;
}

.elementor .sbs-rg-artikel .sbs-rg-toc a,
.elementor .sbs-rg-artikel .sbs-rg-quellen a {
	text-decoration: none;
}

/* Fliesstext aus dem Editor. Das .elementor-Praefix ist tragend: das
   Kit setzt h2 und p mit (0,1,1). */
.elementor .sbs-rg-artikel h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(26px, 3vw, 34px);
	line-height: .95;
	letter-spacing: .02em;
	color: var(--text);
	margin: 48px 0 14px;
}

.elementor .sbs-rg-artikel p {
	font-family: var(--font-body);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--text);
	max-width: 74ch;
	margin: 0;
}

.elementor .sbs-rg-artikel p + p {
	margin-top: 14px;
}

.elementor .sbs-rg-artikel ul {
	margin: 12px 0 14px 20px;
	padding: 0;
	font-family: var(--font-body);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--text);
}

.elementor .sbs-rg-artikel li + li {
	margin-top: 6px;
}

/* Rechtsseiten (AGB, Datenschutzerklaerung, Bauseitige Leistungen,
   Impressum; Kundenbefund 19.10.: „wirkt sehr gedraengt“, die PDF-
   Fassungen lesen sich besser). Lesesatz wie die Ratgeber-Beitraege:
   760px Spalte, 14,5px bei 1,65, Luft vor jeder Zwischenueberschrift.
   Aus den PDF dazu eine feine Linie unter der Ueberschrift, in --line
   statt Blau (keine neue Farbregel). Traeger ist die Klasse sbs-recht
   am Textblock, gesetzt von den Bauwerkzeugen. Das .elementor-Praefix
   ist tragend wie beim Ratgeber; h2 schlaegt damit auch .sbs-h3. */
/* Elementor setzt Widgets im Container auf max-width 100 % mit
   ".e-con.e-con > .e-con-inner > .elementor-widget" (0,4,0). */
.elementor .e-con > .e-con-inner > .sbs-recht.elementor-widget,
.elementor .e-con > .sbs-recht.elementor-widget {
	max-width: 760px;
}

.elementor .sbs-recht h2 {
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: .95;
	margin: 44px 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}

.elementor .sbs-recht h2:first-child {
	margin-top: 0;
}

.elementor .sbs-recht p,
.elementor .sbs-recht ul {
	font-family: var(--font-body);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--text);
	margin: 0;
}

.elementor .sbs-recht p + p,
.elementor .sbs-recht ul + p,
.elementor .sbs-recht p + ul {
	margin-top: 12px;
}

.elementor .sbs-recht ul {
	padding-left: 20px;
}

.elementor .sbs-recht li + li {
	margin-top: 6px;
}

/* Regel-Kasten: weisse Kachel mit Blaukante, Regelnummer und
   Fundstelle in Mono, die Zahlen fett (wie die ASR-Kaesten der
   Typseiten). */
.sbs-rk {
	margin: 18px 0 0;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--blue);
	border-radius: var(--radius-sm);
	padding: 14px 18px 16px;
}

.elementor .sbs-rg-artikel .sbs-rk__norm {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 10.5px;
	line-height: 1.5;
	letter-spacing: .06em;
	color: var(--text-muted);
	max-width: none;
}

.sbs-rk__norm b {
	color: var(--blue);
}

.elementor .sbs-rg-artikel .sbs-rk__text {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.55;
	max-width: none;
}

/* Rechenbeispiel: Rechnung statt Regel, deshalb alt-Flaeche ohne
   Blaukante. */
.sbs-beispiel {
	margin: 18px 0 0;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 14px 18px 16px;
}

.elementor .sbs-rg-artikel .sbs-beispiel__label {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.elementor .sbs-rg-artikel .sbs-beispiel p {
	font-size: 13.5px;
	line-height: 1.6;
	max-width: none;
}

.elementor .sbs-rg-artikel .sbs-beispiel p + p {
	margin-top: 8px;
}

.elementor .sbs-rg-artikel .sbs-rg-quellen {
	margin-top: 40px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-size: 11.5px;
	line-height: 1.7;
	color: var(--text-muted);
	max-width: none;
}

/* Bilder im Beitrag (seit Nr. 20, Kundenbeschluss 19.10.2026): Querformat
   ueber die volle Spalte, Hochformat als Paar nebeneinander, am Handy
   untereinander. Abstand ueber padding, weil Elementor figure-Margins
   nullt (siehe Grundriss-Buehne). */
.elementor .sbs-rg-artikel .sbs-rg-bild,
.elementor .sbs-rg-artikel .sbs-rg-bildpaar {
	padding: 20px 0 4px;
}

.sbs-rg-bildpaar {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.elementor .sbs-rg-artikel .sbs-rg-bildpaar figure {
	padding: 0;
}

.elementor .sbs-rg-artikel .sbs-rg-bild img,
.elementor .sbs-rg-artikel .sbs-rg-bildpaar img {
	display: block;
	width: 100%;
	height: auto;
}

.elementor .sbs-rg-artikel .sbs-rg-bild figcaption,
.elementor .sbs-rg-artikel .sbs-rg-bildpaar figcaption {
	margin: 6px 0 0;
	font-family: var(--font-body);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--text-muted);
	text-align: left;
}

@media (max-width: 767px) {
	.sbs-rg-bildpaar {
		grid-template-columns: 1fr;
	}
}

/* Autoren-Kachel: liegende Team-Form, einzeln unter Weiterlesen. */
.sbs-rg-autor {
	display: grid;
	grid-template-columns: 30% minmax(0, 1fr);
	max-width: 620px;
	margin-top: 40px;
	overflow: hidden;
}

.sbs-rg-autor--allein {
	margin-top: 0;
}

.sbs-rg-autor .sbs-team-kachel__foto {
	aspect-ratio: auto;
	height: 100%;
}

.elementor .sbs-rg-autor .sbs-team-kachel__foto img {
	object-position: center top;
}

.sbs-rg-autor .sbs-team-kachel__text {
	padding: 18px 20px 20px;
}

.elementor .sbs-rg-autor__link {
	margin-top: 12px;
}

@media (max-width: 900px) {
	.sbs-rg-kacheln,
	.sbs-rg-absprung__paar--drei {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 700px) {
	.sbs-rg-absprung__paar {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 480px) {
	.sbs-rg-autor {
		grid-template-columns: minmax(0, 1fr);
	}

	.sbs-rg-autor .sbs-team-kachel__foto {
		aspect-ratio: 4 / 5;
	}
}

/* =========================================================
   Preisvergleich im Ratgeber (Nr. 8 neu „Was kostet ein Buerocontainer?“,
   Vorlage mockup-ratgeber-preis-buero-v2, Bauplan freigegeben 20.10.2026).
   Bausteine aus werkzeuge/ratgeber/bausteine.py, alle Klassen sbs-rgp-.
   Die Baender bleiben in der Inhaltsbreite; ihre Flaeche reicht ueber
   box-shadow und clip-path bis an den Fensterrand, ohne waagerechten
   Ueberlauf. Das .elementor .sbs-rg-artikel ist tragend: der Lesesatz
   des Ratgebers setzt h2, p, ul und Links mit (0,2,1) bis (0,2,2).
   ========================================================= */
.sbs-rg-artikel:has(.sbs-rgp-band) {
	max-width: none;
}

.elementor .sbs-rg-artikel .sbs-rgp-band {
	padding: var(--space-section-desktop) 0;
	background: var(--surface-base);
}

.elementor .sbs-rg-artikel .sbs-rgp-band--alt {
	background: var(--surface-alt);
	box-shadow: 0 0 0 100vmax var(--surface-alt);
	clip-path: inset(0 -100vmax);
}

.elementor .sbs-rg-artikel .sbs-rgp-bezug + .sbs-rgp-band {
	margin-top: 56px;
}

.elementor .sbs-rg-artikel .sbs-rgp-band--schluss {
	padding-bottom: 0;
}

@media (max-width: 767px) {
	.elementor .sbs-rg-artikel .sbs-rgp-band {
		padding: var(--space-section-mobile) 0;
	}

	.elementor .sbs-rg-artikel .sbs-rgp-band--schluss {
		padding-bottom: 0;
	}
}

.elementor .sbs-rg-artikel .sbs-rgp h2 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(32px, 4.2vw, 48px);
	line-height: .92;
	letter-spacing: .02em;
	color: var(--text);
	margin: 0;
}

.sbs-rgp-kopf {
	max-width: 700px;
	margin-bottom: 34px;
}

.elementor .sbs-rg-artikel .sbs-rgp-lead {
	margin-top: 14px;
}

.elementor .sbs-rg-artikel .sbs-rgp a.sbs-tlink {
	text-decoration: none;
}

.elementor .sbs-rg-artikel .sbs-rgp img {
	display: block;
	max-width: 100%;
	height: auto;
}

.elementor .sbs-rg-artikel .sbs-rgp-fussnote {
	margin-top: 16px;
	max-width: 100ch;
	font-size: 12px;
	line-height: 1.55;
	color: var(--text-muted);
}

.elementor .sbs-rg-artikel .sbs-rgp-fussnote a {
	font-weight: 600;
}

/* Bezug: welches Modul verglichen wird. */
.sbs-rgp-bezug {
	margin-top: 28px;
	max-width: 760px;
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-left: 3px solid var(--blue);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	font-family: var(--font-body);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text);
}

.sbs-rgp-bezug svg {
	flex: none;
}

/* Dreier-Vergleich: drei Spaltenkarten, deren 13 Zeilen ueber das
   Subgrid auf einer Hoehe stehen. Unter 900px untereinander. */
.sbs-rgp-vergleich {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(13, auto);
	gap: 0 20px;
	font-family: var(--font-body);
}

.sbs-rgp-spalte {
	grid-row: span 13;
	display: grid;
	grid-template-rows: subgrid;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.sbs-rgp-spalte--mitte {
	box-shadow: 0 0 0 2px var(--blue);
}

/* Acht statt sieben Zeilen je Spalte (Ratgeber Nr. 9 Sanitaer): 14 Rasterzeilen. */
.sbs-rgp-vergleich--z8 {
	grid-template-rows: repeat(14, auto);
}

.sbs-rgp-vergleich--z8 .sbs-rgp-spalte {
	grid-row: span 14;
}

.sbs-rgp-sp__bild {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--surface-alt);
}

.elementor .sbs-rg-artikel .sbs-rgp-sp__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sbs-rgp-sp__kopf {
	padding: 18px 22px 4px;
}

.sbs-rgp-sp__art,
.sbs-rgp-lbl {
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.sbs-rgp-sp__name {
	font-family: var(--font-display);
	font-size: 34px;
	line-height: 1;
	letter-spacing: .02em;
	margin-top: 4px;
	color: var(--text);
}

.sbs-rgp-sp__satz {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text-muted);
	margin-top: 6px;
}

.sbs-rgp-sp__preis {
	padding: 14px 22px 16px;
	border-bottom: 1px solid var(--line);
}

.sbs-rgp-ab,
.sbs-rgp-fuss {
	font-size: 12px;
	line-height: 1.45;
	color: var(--text-muted);
}

.sbs-rgp-fuss {
	margin-top: 4px;
}

.sbs-rgp-betrag {
	font-family: var(--font-display);
	font-size: 44px;
	line-height: 1;
	letter-spacing: .01em;
	color: var(--blue);
}

.sbs-rgp-zeile {
	padding: 11px 22px;
	border-bottom: 1px solid var(--line);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text);
}

.sbs-rgp-zeile .sbs-rgp-lbl {
	display: block;
	font-size: 10px;
	margin-bottom: 2px;
}

.sbs-rgp-zeile b {
	font-weight: 700;
}

.sbs-rgp-stufe {
	display: inline-flex;
	gap: 3px;
	vertical-align: middle;
	margin-left: 6px;
}

.sbs-rgp-stufe i {
	width: 14px;
	height: 6px;
	border-radius: 2px;
	background: var(--surface-accent);
}

.sbs-rgp-stufe i.an {
	background: var(--blue);
}

.elementor .sbs-rg-artikel .sbs-rgp-zlink {
	display: flex;
	width: fit-content;
	margin-top: 4px;
	font-size: 13px;
}

.sbs-rgp-passt {
	padding: 14px 22px 4px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--text);
}

.sbs-rgp-passt--nicht {
	padding-top: 6px;
	padding-bottom: 18px;
}

.sbs-rgp-passt .sbs-rgp-lbl {
	display: block;
	font-size: 10px;
	margin-bottom: 4px;
}

.sbs-rgp-passt .sbs-rgp-lbl--ja {
	color: var(--status-green);
}

.sbs-rgp-passt .sbs-rgp-lbl--nein {
	color: var(--accent);
}

.elementor .sbs-rg-artikel .sbs-rgp-passt ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.5;
}

.elementor .sbs-rg-artikel .sbs-rgp-passt li {
	position: relative;
	padding-left: 16px;
}

.elementor .sbs-rg-artikel .sbs-rgp-passt li + li {
	margin-top: 3px;
}

.sbs-rgp-passt li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--status-green);
}

.sbs-rgp-passt--nicht li::before {
	background: transparent;
	border: 1.5px solid var(--accent);
}

.sbs-rgp-sp__link {
	padding: 4px 22px 22px;
	align-self: end;
}

@media (max-width: 900px) {
	.sbs-rgp-vergleich {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		gap: 20px;
	}

	.sbs-rgp-spalte,
	.sbs-rgp-vergleich--z8 .sbs-rgp-spalte {
		grid-row: auto;
		display: block;
	}
}

/* Wo das Geld steckt: Karten mit Zeichnung, Spaltenkoepfe und Werte als
   Text, links buendig mit den drei Spalten der Zeichnung (6,7 %). */
.sbs-rgp-geld {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	font-family: var(--font-body);
}

.sbs-rgp-gkarte {
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: 22px 24px 24px;
}

.elementor .sbs-rg-artikel .sbs-rgp-gkarte h3 {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
	margin: 0;
}

.elementor .sbs-rg-artikel .sbs-rgp-gkarte p {
	margin-top: 8px;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-muted);
}

.sbs-rgp-gkoepfe,
.sbs-rgp-gwerte {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sbs-rgp-gkoepfe {
	margin-top: 18px;
}

.sbs-rgp-gkoepfe > div {
	padding-left: 6.7%;
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.elementor .sbs-rg-artikel .sbs-rgp-gzeich {
	width: 100%;
	margin-top: 6px;
}

.sbs-rgp-gwerte {
	margin-top: 8px;
}

.sbs-rgp-gwerte > div {
	padding: 0 4px 0 6.7%;
}

.sbs-rgp-gwerte b {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--text);
}

.sbs-rgp-gwerte > div:first-child b {
	color: var(--text-muted);
}

.sbs-rgp-gwerte span {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--text-muted);
}

@media (max-width: 900px) {
	.sbs-rgp-geld {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Ehrlich gesagt: Text neben dem Vorher-Nachher-Paar im Hochformat
   (Hochformat nie beschneiden, Kundenregel 19.10.), darunter das dunkle
   Band mit den fuenf Fragen. */
.sbs-rgp-billig {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	align-items: center;
}

.elementor .sbs-rg-artikel .sbs-rgp-billig h2 + p {
	margin-top: 18px;
}

.elementor .sbs-rg-artikel .sbs-rgp-billig .sbs-tlink {
	margin-top: 18px;
}

.sbs-rgp-vn {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.elementor .sbs-rg-artikel .sbs-rgp-vn figure {
	position: relative;
	margin: 0;
	padding: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.elementor .sbs-rg-artikel .sbs-rgp-vn img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.elementor .sbs-rg-artikel .sbs-rgp-vn figcaption {
	position: absolute;
	left: 10px;
	top: 10px;
	right: 10px;
	width: fit-content;
	margin: 0;
	padding: 4px 8px;
	border-radius: 3px;
	background: var(--surface-dark);
	color: #fff;
	font-family: var(--font-mono);
	font-weight: 600;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.elementor .sbs-rg-artikel .sbs-rgp-vorher figcaption {
	background: var(--accent);
}

.sbs-rgp-fragen {
	margin-top: 56px;
	padding: 40px 40px 34px;
	background: var(--surface-dark);
	border-top: 4px solid var(--accent);
	border-radius: var(--radius-md);
	color: var(--text-on-photo);
	font-family: var(--font-body);
}

.sbs-rgp-fragen .sbs-eyebrow {
	color: var(--accent-on-dark);
	font-weight: 600;
	margin-bottom: 10px;
}

.elementor .sbs-rg-artikel .sbs-rgp-fragen h3 {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: .95;
	letter-spacing: .02em;
	color: #fff;
	max-width: 22em;
	margin: 0;
}

.elementor .sbs-rg-artikel .sbs-rgp-fragen ol {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 30px 0 0;
	padding: 0;
}

.elementor .sbs-rg-artikel .sbs-rgp-fragen li {
	margin: 0;
	padding: 0 20px;
	border-left: 1px solid rgba(255, 255, 255, .16);
}

.elementor .sbs-rg-artikel .sbs-rgp-fragen li:first-child {
	padding-left: 0;
	border-left: 0;
}

.sbs-rgp-fragen__nr {
	display: block;
	font-family: var(--font-display);
	font-size: 56px;
	line-height: .9;
	color: var(--accent-on-dark);
}

.sbs-rgp-fragen__q {
	display: block;
	margin-top: 10px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
}

@media (max-width: 900px) {
	.sbs-rgp-billig {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.sbs-rgp-fragen {
		padding: 28px 22px;
	}

	.elementor .sbs-rg-artikel .sbs-rgp-fragen ol {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.elementor .sbs-rg-artikel .sbs-rgp-fragen li,
	.elementor .sbs-rg-artikel .sbs-rgp-fragen li:first-child {
		padding: 0 0 18px;
		border-left: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .16);
	}

	.elementor .sbs-rg-artikel .sbs-rgp-fragen li:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.sbs-rgp-fragen__nr {
		font-size: 44px;
	}
}

/* Was zum Kaufpreis dazukommt: Kostentabelle nach Kostenart. */
.sbs-rgp-kosten {
	max-width: 960px;
	background: var(--surface-card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	overflow: hidden;
	font-family: var(--font-body);
}

.sbs-rgp-kz {
	display: grid;
	grid-template-columns: 1.1fr 1.6fr 1.1fr;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
}

.sbs-rgp-kz:last-child {
	border-bottom: 0;
}

.sbs-rgp-kz > div {
	padding: 13px 18px;
}

.sbs-rgp-kz--kopf {
	background: var(--surface-dark);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sbs-rgp-pos {
	font-weight: 600;
}

.sbs-rgp-inkl {
	color: var(--status-green);
	font-weight: 600;
}

.sbs-rgp-bauseits {
	color: var(--text-muted);
}

.elementor .sbs-rg-artikel .sbs-rgp-weiter {
	margin-top: 14px;
}

.elementor .sbs-rg-artikel .sbs-rgp-band--schluss + .sbs-rg-quellen {
	margin-top: 28px;
}

@media (max-width: 700px) {
	.sbs-rgp-kz {
		grid-template-columns: minmax(0, 1fr);
	}

	.sbs-rgp-kz > div {
		padding: 4px 16px;
	}

	.sbs-rgp-kz > div:first-child {
		padding-top: 12px;
	}

	.sbs-rgp-kz > div:last-child {
		padding-bottom: 12px;
	}

	.sbs-rgp-kz--kopf {
		display: none;
	}
}