/**
 * Die Katalogseite.
 *
 * **Zurueckhaltend, weil sie in einem fremden Theme steht.** Schriften,
 * Farben und Abstaende kommen vom Laden; hier steht nur, was die Seite
 * braucht, damit sie nicht auseinanderfaellt — das Raster der Kacheln, der
 * Pfad, die Felder. Ein Katalog, der seine eigene Schriftart mitbringt,
 * sieht in jedem zweiten Shop falsch aus.
 *
 * **Jeder Selektor beginnt mit `.tp-katalog:not(#tp-gewicht):not(#tp-gewicht)`.**
 * Das ist kein Tippfehler, sondern Gewicht gegen Themes und Baukaesten, die
 * mit einer ID zuruecksetzen - siehe bei den Kacheln. Neue Regeln schreibt
 * man ohne; `node dev-tools/css-gewicht.mjs` setzt es nach.
 */

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) {
	margin: 0 auto;
	max-width: 1200px;
	padding: 1.5rem 1rem 3rem;

	/*
	 * **Umbrueche nach der Breite des Katalogs, nicht des Fensters** - wie
	 * `.tpc` in der Shopify-Fassung. Steht der Katalog in einer schmalen
	 * Spalte, zaehlt die Spalte. `width: 100%` gehoert dazu: Ein Element mit
	 * Groessen-Containment meldet nach aussen die Breite null und schrumpft
	 * in einem Flex-Layout sonst auf Wortbreite (gemessen in Shopifys
	 * Theme Horizon, 23. August 2026).
	 */
	box-sizing: border-box;
	container-type: inline-size;
	width: 100%;
}

/* ------------------------------------------------------------- Brotkrume */

/*
 * **Die Vorgaben stehen hier, die Abweichungen am Element.**
 *
 * Der Block schreibt nur, was der Haendler geaendert hat, als
 * `--tp-katalog-*` an den Container. Alles andere kommt von hier - und eine
 * spaetere Korrektur an diesen Werten erreicht damit auch Seiten, die schon
 * stehen.
 */
/*
 * **Jede Benutzung traegt ihren Rueckfallwert.**
 *
 * Die Vorgaben stehen hier unten am Container, und eine Zeit lang stand
 * `border: 1px solid var( --tp-katalog-rahmen )` ohne zweites Argument da.
 * Faellt die Definition aus irgendeinem Grund weg - ein
 * Optimierungs-Plugin, das Stylesheets zusammenfasst und dabei eine alte
 * Fassung ausliefert, eine Regel, die ein Theme ueberschreibt -, dann ist
 * die ganze Eigenschaft **ungueltig**: kein Rahmen, keine Ecken, kein
 * Seitenverhaeltnis. Die Kachel steht nackt da, und es sieht aus, als waere
 * das Stylesheet gar nicht geladen.
 *
 * Genau so ist es dem Haendler am 27. September 2026 gegangen, waehrend in
 * der Entwicklungsumgebung alles richtig aussah.
 *
 * > **Eine Variable ohne Rueckfallwert ist ein Einzelpunkt des Versagens.**
 *
 * Mit Rueckfall bleibt die Darstellung heil, was auch immer mit den
 * Variablen geschieht - und die Einstellungen wirken weiterhin, wenn sie
 * ankommen.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) {
	--tp-katalog-spalten: 4;
	--tp-katalog-abstand: 1rem;
	--tp-katalog-ecken: 8px;
	--tp-katalog-verhaeltnis: 4 / 3;
	--tp-katalog-feldbreite: 180px;

	/*
	 * **Farben ohne Vorgabe, ausser dem Akzent.** Die Kachel erbt vom Theme
	 * des Haendlers; ein hartes Weiss fiele in einem dunklen Theme auf. Wer
	 * es will, stellt es ein - eine leere Vorgabe aendert nichts an Laeden,
	 * die schon stehen.
	 */
	--tp-katalog-rahmen: rgba( 0, 0, 0, 0.12 );
	--tp-katalog-akzent: #2c6ecb;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__pfad {
	font-size: 0.9em;
	line-height: 1.8;
	margin-bottom: 0.75rem;
	opacity: 0.85;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__trenner {
	margin: 0 0.4em;
	opacity: 0.6;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__titel {
	margin: 0 0 0.75rem;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__text {
	margin-bottom: 1.5rem;
	max-width: 65ch;
}

/* --------------------------------------------------------- Auswahlfelder */

/*
 * **Die Felder stehen nebeneinander und gleich breit.** Die Werte stammen aus
 * der Shopify-Fassung (`.tpc__selects`): ein Raster, das umbricht, wenn es
 * eng wird, mit 180 Pixeln Mindestbreite je Feld.
 *
 * Vorher war es eine Flexzeile mit Aufschriften darueber - „STEP 1“,
 * „STEP 2“. Das sagte dasselbe zweimal: Was die erste Stufe ist, steht im
 * Feld selbst, und die Reihenfolge sagt den Rest.
 */
/*
 * **Zwei Ebenen: das Formular stapelt, die Felder stehen nebeneinander.**
 *
 * Vorher war das Formular selbst das Raster - und der Knopf darin spannte
 * ueber alle Spalten. Ein Element ueber alle Spalten haelt jede davon fuer
 * belegt, also faellt keine zusammen: Bei einem einzigen Feld blieben vier
 * leere Spalten stehen, und das Feld war ein Fuenftel breit. Gemessen am
 * 25. September 2026: `198px 198px 198px 198px 198px`.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__waehler {
	display: grid;
	gap: 0.625rem;
	justify-items: start;
	margin-bottom: 1rem;
}

/*
 * **Oben buendig, nicht unten.**
 *
 * Hier stand `align-items: end` - aus der Shopify-Fassung uebernommen, wo die
 * Felder sichtbare Aufschriften unterschiedlicher Hoehe tragen. Unsere
 * Aufschriften sind unsichtbar, also gibt es nichts auszugleichen; dafuer
 * richtet `end` die Felder an ihrer **Unterkante** aus. Bringt ein Theme
 * seinen eigenen Abstand mit, stehen sie dann treppenartig versetzt - beim
 * Haendler am 25. September 2026 zu sehen, in der eigenen Umgebung nicht.
 *
 * `start` haelt die Oberkanten buendig, was auch immer ein Theme darunter
 * setzt.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__felder {
	align-items: start;
	display: grid;
	gap: 0.625rem;
	grid-template-columns: repeat( auto-fit, minmax( var( --tp-katalog-feldbreite, 180px ), 1fr ) );
	width: 100%;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__feld {
	align-content: start;
	display: grid;
	gap: 4px;
	margin: 0;
	min-width: 0;
	width: 100%;
}

/*
 * **Sichtbar fuer Vorleser, unsichtbar auf dem Schirm.** Weder `display:
 * none` noch `visibility: hidden` - beides nimmt die Aufschrift auch dem
 * Vorleser weg, und dann heisst das Feld gar nichts mehr.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__verborgen {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__feld select {
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

/*
 * **Der Knopf steht unter den Feldern, nicht zwischen ihnen.** Im Raster
 * waere er eine Spalte und machte ein Feld schmaler. Die Shopify-Fassung
 * kennt ihn gar nicht - sie kommt ohne JavaScript nicht aus. Hier tut sie
 * es, und deshalb bleibt er stehen; der Grund steht in der Vorlage.
 */
/*
 * **Der Knopf steht unter den Feldern.** Er gehoert nicht ins Feldraster -
 * siehe oben. Im Original gibt es ihn gar nicht; dort geht nichts ohne
 * JavaScript. Hier schon, und deshalb bleibt er.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__los {
	justify-self: start;
}

/*
 * **Mit Skript ist der Knopf ueberfluessig.** Die Seite springt dann schon
 * beim Umstellen des Feldes; ein Knopf daneben verspricht einen zweiten
 * Schritt, den es nicht gibt. Die Klasse setzt `catalog.js`, und zwar erst,
 * wenn es wirklich laeuft - deshalb steht sie nicht im Markup.
 */
.tp-katalog.is-mit-js:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__los {
	display: none;
}

/* ------------------------------------------------------------- Die Kacheln */

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln {
	display: grid;
	gap: var( --tp-katalog-abstand, 1rem );
	/*
	 * **Genau wie `.tpc__grid` der Shopify-Fassung.** Die Breite wird in so
	 * viele gleiche Spalten geteilt, wie eingestellt sind; schmaler als 900,
	 * 640 und 360 Pixel werden es hoechstens drei, zwei, eine. Vorher stand
	 * hier eine eigene Rechnung mit `auto-fill` - sie sah anders aus als im
	 * Original, und der Haendler hat mehrfach gebeten, es genau so zu bauen.
	 */
	grid-template-columns: repeat( var( --tp-katalog-spalten, 4 ), minmax( 0, 1fr ) );
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kachel {
	margin: 0;
}

@container (max-width: 900px) {
	.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln {
		grid-template-columns: repeat( min( var( --tp-katalog-spalten, 4 ), 3 ), minmax( 0, 1fr ) );
	}
}

@container (max-width: 640px) {
	.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@container (max-width: 360px) {
	.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/*
 * **Kein Innenabstand um das Bild.** Es reicht bis an den Rand; nur der Text
 * darunter rueckt ein. Ein Bild mit Rand ringsum sieht aus wie ein
 * Aufkleber, eines ohne wie eine Kachel. Die Werte stammen aus `.tpc__tile`.
 */
/*
 * **Die Kachel gegen die Huelle eines Seitenbaukastens.**
 *
 * Drei Versuche lang standen die Kacheln beim Haendler nackt da - Reihenfolge
 * (Prioritaet 20), Rueckfallwerte, drei Klassen im Selektor. Jede Vermutung
 * war gemessen und keine traf. Die Antwort kam erst aus seinem Browser: Das
 * Plugin **Divi Builder** wickelt jeden Seiteninhalt in `#et-boc .et-l`, auch
 * wenn die Seite mit Elementor gebaut ist, und setzt dort mit
 * `#et-boc .et-l a` Rahmen, Ecken, Innenabstand und Hintergrund zurueck.
 * Eine ID wiegt mehr als jede Zahl von Klassen.
 *
 * Deshalb traegt jede Regel dieser Datei an ihrer Wurzel
 * `:not(#tp-gewicht):not(#tp-gewicht)` - zwei IDs Gewicht, ohne dass ein
 * Element eine ID braucht. Gesetzt wird das von `dev-tools/css-gewicht.mjs`,
 * nicht von Hand; der Grund steht dort ausfuehrlich.
 *
 * Was der Haendler einstellt, reist als Variable im `style` des Containers
 * und gilt weiterhin. Eigenes CSS gegen diese Regeln braucht jetzt
 * `!important` - der Preis dafuer, dass die Kachel in fremden Huellen heil
 * bleibt.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln .tp-katalog__kachel a {
	background: var( --tp-katalog-kachelgrund, transparent );
	border: 1px solid var( --tp-katalog-rahmen, rgba( 0, 0, 0, 0.12 ) );
	border-radius: var( --tp-katalog-ecken, 8px );
	color: var( --tp-katalog-kachelschrift, inherit );
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	text-decoration: none;
	transition: border-color 0.12s ease, transform 0.12s ease;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln .tp-katalog__rumpf {
	display: grid;
	gap: 3px;
	padding: 10px 12px 12px;
}

/*
 * **Der Rahmen wird zur Akzentfarbe, kein Schatten.** So haelt es die
 * Shopify-Fassung: Ein Schatten hebt die Kachel aus der Flaeche, eine
 * Rahmenfarbe zeigt, welche gemeint ist - und das ist die Frage beim
 * Ueberfahren.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln .tp-katalog__kachel a:hover,
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln .tp-katalog__kachel a:focus-visible {
	border-color: var( --tp-katalog-akzent, #2c6ecb );
	outline: none;
}

@media (prefers-reduced-motion: no-preference) {
	.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln .tp-katalog__kachel a:hover {
		transform: translateY( -2px );
	}
}

/*
 * **Der Bildplatz bleibt stehen, auch wenn kein Bild da ist.** Sonst sind
 * die Kacheln einer Ebene verschieden hoch, je nachdem, wer gerade ein Bild
 * gepflegt hat — und das Raster wirkt kaputt statt unvollstaendig.
 */
/*
 * **Der Bildkasten hat die Farbe der Kachel, keinen eigenen Grauton.**
 *
 * Hier stand ein zartes Grau, damit die Flaeche vor dem Laden zu sehen ist.
 * Sichtbar wird es aber immer dann, wenn Bild und Format nicht genau
 * zusammenpassen: `object-fit: contain` laesst dann Balken stehen, und die
 * sehen aus wie ein Rahmen, den niemand bestellt hat. Derselbe Satz steht in
 * der Shopify-Fassung - dort ist er schon einmal gelernt worden.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln .tp-katalog__bild {
	aspect-ratio: var( --tp-katalog-verhaeltnis, 4 / 3 );
	background: transparent;
	display: block;
	overflow: hidden;
	position: relative;
}

/*
 * **Das Bild liegt absolut im Kasten, nicht im Fluss** - aus `.tpc__tile-media`
 * der Shopify-Fassung. `aspect-ratio` ist nur ein Wunsch: Ein Bild im Fluss,
 * dem ein Theme `height: auto` gibt, drueckt den Kasten auf, und die Titel
 * stehen auf verschiedener Hoehe. Absolut mit `inset` kann es das nicht.
 *
 * Der Abstand zum Rahmen („Image padding“) ist das `inset` - bei 0, der
 * Vorgabe, genau wie im Original.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__bild img {
	display: block;
	height: calc( 100% - 2 * var( --tp-katalog-bildabstand, 0px ) );
	inset: var( --tp-katalog-bildabstand, 0px );
	max-width: none;
	object-fit: contain;
	position: absolute;
	width: calc( 100% - 2 * var( --tp-katalog-bildabstand, 0px ) );
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln .tp-katalog__name {
	font-weight: 700;
	line-height: 1.25;
}

/*
 * **Beide Angaben in einer Zeile.** Unterkategorien und Zeichnungshinweis
 * stehen nebeneinander, getrennt durch einen Mittelpunkt - wie im Original.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln .tp-katalog__meta {
	/*
	 * Wie `.tpc__tile-meta`: eine gedaempfte **Farbe**, keine Deckkraft.
	 * Mit `opacity` wurde der Zeichnungshinweis mit ausgeblichen - im
	 * Original steht er in vollem Akzent.
	 */
	color: rgba( 0, 0, 0, 0.55 );
	font-size: 0.78rem;

	/*
	 * **Eine eigene Zeilenhoehe.** Ohne sie erbt die Zeile die des Themes -
	 * bei Astra 1,65 der Grundschrift, 23 Pixel fuer 12-Pixel-Schrift. Bricht
	 * die Zeile um, stand die zweite Haelfte beim Haendler weit abgesetzt
	 * darunter (28. September 2026).
	 */
	line-height: 1.4;
}

@media (prefers-color-scheme: dark) {
	.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln .tp-katalog__meta {
		color: rgba( 255, 255, 255, 0.6 );
	}
}

/*
 * **Derselbe Platz wie die Unterkategorien-Zahl.** Beides beantwortet
 * dieselbe Frage - was liegt hinter dieser Kachel - und beides steht nie
 * gleichzeitig da: Eine Kategorie hat entweder Unterkategorien oder ist eine
 * Baugruppe.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln .tp-katalog__blatt {
	color: var( --tp-katalog-akzent, #2c6ecb );
	font-weight: 600;

	/*
	 * **Der Hinweis bricht als Ganzes um, nicht mitten drin.** Bei einer
	 * Kachel, die etwas schmaler ist als im Shopify-Laden, stand beim
	 * Haendler „Parts“ am Ende der Zeile und „diagram“ allein darunter.
	 */
	white-space: nowrap;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__zahl {
	font-size: 0.85em;
	opacity: 0.7;
}

/* ------------------------------------------- Die Leiste „Weitere Baugruppen“ */

/*
 * **1:1 aus der Shopware-Fassung** (`.hp-siblings` in `base.scss`): Kacheln
 * mit Bild und einem zweizeiligen Namensfeld, die aktuelle voll gefärbt,
 * runde Pfeile an den Rändern, keine Bildlaufleiste. Farbe aus der
 * Einstellung, sonst der Akzent des Katalogs; Kachelbreite klein / mittel /
 * groß wie dort 104 / 140 / 180 px.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste {
	--tp-leiste-farbe-gilt: var( --tp-leiste-farbe, var( --tp-katalog-akzent, #2c6ecb ) );
	--tp-leiste-toenung: color-mix( in srgb, var( --tp-leiste-farbe-gilt ) 12%, #fff );
	--tp-leiste-tinte: color-mix( in srgb, var( --tp-leiste-farbe-gilt ) 70%, #000 );
	--tp-leiste-rand: #e3e5ea;
	--tp-leiste-breite: 140px;
	--tp-leiste-schrift: 12px;
	--tp-leiste-abstand: 10px;
	position: relative;
	margin-top: 1.5rem;
	margin-bottom: 20px;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste.is-small {
	--tp-leiste-breite: 104px;
	--tp-leiste-schrift: 11px;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste.is-large {
	--tp-leiste-breite: 180px;
	--tp-leiste-schrift: 13px;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste.hat-ueberlauf {
	padding: 0 36px;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__spur {
	display: flex;
	gap: var( --tp-leiste-abstand );
	margin: 0;
	padding: 3px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__spur::-webkit-scrollbar {
	display: none;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste.is-ziehend .tp-leiste__spur,
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste.is-gleitend .tp-leiste__spur {
	scroll-snap-type: none;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste.is-ziehend .tp-leiste__spur {
	cursor: grabbing;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste.is-ziehend .tp-leiste__kachel {
	pointer-events: none;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__eintrag {
	flex: 0 0 var( --tp-leiste-breite );
	width: var( --tp-leiste-breite );
	min-width: 0;
	margin: 0;
	padding: 0;
	scroll-snap-align: center;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__kachel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var( --tp-leiste-rand );
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__kachel:hover,
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__kachel:focus-visible {
	border-color: var( --tp-leiste-farbe-gilt );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 );
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__kachel.is-aktuell {
	border-color: var( --tp-leiste-farbe-gilt );
	box-shadow: 0 0 0 1px var( --tp-leiste-farbe-gilt );
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__bild {
	position: relative;
	display: block;
	flex: 0 0 auto;
	height: var( --tp-leiste-bildhoehe, 80px );
	margin: 6px;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

/* Das Namensfeld hat immer Platz für zwei Zeilen. */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__name {
	display: flex;
	align-items: center;
	justify-content: center;
	height: calc( var( --tp-leiste-schrift ) * 1.25 * 2 + 14px );
	padding: 6px;
	overflow: hidden;
	box-sizing: border-box;
	border-top: 2px solid var( --tp-leiste-farbe-gilt );
	background: var( --tp-leiste-toenung );
	color: var( --tp-leiste-tinte );
	font-size: var( --tp-leiste-schrift );
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__name > span {
	max-width: 100%;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__name.is-gekuerzt > span {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__kachel.is-aktuell .tp-leiste__name {
	background: var( --tp-leiste-farbe-gilt );
	color: #fff;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__pfeil {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 1px solid var( --tp-leiste-rand );
	border-radius: 50%;
	background: #fff;
	color: #4a545b;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.08 );
	transform: translateY( -50% );
	cursor: pointer;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__pfeil[hidden] {
	display: none;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__pfeil.is-zurueck {
	left: 0;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__pfeil.is-weiter {
	right: 0;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__pfeil:hover {
	border-color: var( --tp-leiste-farbe-gilt );
	color: var( --tp-leiste-farbe-gilt );
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste__pfeil svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Unter der Leiste rückt die Zeichnung an sie heran. */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-leiste + .tp-katalog__zeichnung {
	margin-top: 0;
}

/* ---------------------------------------------------------- Die Zeichnung */

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__zeichnung {
	margin-top: 1.5rem;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__leer {
	opacity: 0.75;
}

/*
 * **Ohne Bilder ein schlichteres Raster.** Die Kacheln werden dann zu einer
 * Liste mit Rahmen — und genau so soll ein frisch angelegter Katalog
 * aussehen, nicht wie eine Wand aus leeren Bilderrahmen.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln.is-ohne-bild {
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__kacheln.is-ohne-bild .tp-katalog__kachel a {
	padding: 0.85rem 1rem;
}

/* --------------------------------------------------------- Die Suche */

/*
 * **Zurueckhaltend wie der Rest.** Feld und Knopf erben vom Theme; eigen ist
 * nur die Trefferliste, weil es sie im Theme nicht gibt. Rahmen, Ecken und
 * Akzent kommen aus denselben Variablen wie die Kacheln - wer die Kacheln
 * einstellt, stellt die Liste gleich mit ein.
 */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__suche {
	margin-bottom: 1rem;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__suchform {
	display: flex;
	gap: 0.5rem;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__suchfeld {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;

	/*
	 * **Ein Feld mit Rahmen, nicht eine Zeile Text.** Beim Haendler am
	 * 28. September 2026 gemessen: Astra nimmt einem Suchfeld Rahmen,
	 * Grund und Innenabstand - uebrig blieb der Platzhalter, der aussah wie
	 * ein Satz auf der Seite. Die Farben kommen aus denselben Variablen wie
	 * die Kacheln; ohne Einstellung ein zartes Grau auf Weiss.
	 */
	background: var( --tp-katalog-kachelgrund, #fff );
	border: 1px solid var( --tp-katalog-rahmen, rgba( 0, 0, 0, 0.18 ) );
	border-radius: var( --tp-katalog-ecken, 8px );
	box-shadow: none;
	box-sizing: border-box;
	color: var( --tp-katalog-kachelschrift, inherit );
	font: inherit;
	line-height: 1.4;
	margin: 0;
	padding: 0.7em 1em;
}

/* Wo der Cursor steht, zeigt der Akzent - ohne den Fokusrahmen zu nehmen. */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__suchfeld:focus {
	border-color: var( --tp-katalog-akzent, #2c6ecb );
	box-shadow: 0 0 0 1px var( --tp-katalog-akzent, #2c6ecb );
	outline: 2px solid transparent;
}

/* Mit Skript erscheinen die Treffer beim Tippen - der Knopf verspraeche einen zweiten Schritt. */
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__suche.is-mit-js .tp-katalog__suchen {
	display: none;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__treffer {
	margin-top: 0.5rem;
	max-height: 60vh;
	overflow-y: auto;
	background: var( --tp-katalog-kachelgrund, transparent );
	border: 1px solid var( --tp-katalog-rahmen, rgba( 0, 0, 0, 0.12 ) );
	border-radius: var( --tp-katalog-ecken, 8px );
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__treffer:empty {
	display: none;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__gruppe {
	margin: 0;
	padding: 0.5rem 0.75rem 0.25rem;
	font-size: 0.78rem;
	opacity: 0.7;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__liste li {
	margin: 0;
	padding: 0;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__liste a {
	display: grid;
	gap: 2px;
	padding: 0.5rem 0.75rem;
	border-top: 1px solid var( --tp-katalog-rahmen, rgba( 0, 0, 0, 0.12 ) );
	color: var( --tp-katalog-kachelschrift, inherit );
	text-decoration: none;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__liste a:hover,
.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__liste a:focus-visible {
	background: rgba( 0, 0, 0, 0.04 );
	outline: none;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__treffername {
	font-weight: 600;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__trefferweg {
	font-size: 0.8rem;
	opacity: 0.7;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__keine {
	margin: 0;
	padding: 0.75rem;
	opacity: 0.75;
}

/* ---------------------------------------- Auf der Ergebnisseite der Seitensuche */

/*
 * **Ein Block unter vielen, keine eigene Seite.** Der Katalog bringt sonst
 * Rand, Hoechstbreite und Innenabstand mit; auf der Ergebnisseite steht er
 * im Inhalt des Themes und soll sich dort einreihen.
 */
.tp-katalog--websuche:not(#tp-gewicht):not(#tp-gewicht) {
	margin: 0 0 2rem;
	max-width: none;
	padding: 0;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__websuche-titel {
	margin: 0 0 0.5rem;
	font-size: 1.1em;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__websuche .tp-katalog__treffer {
	max-height: none;
}

.tp-katalog:not(#tp-gewicht):not(#tp-gewicht) .tp-katalog__websuche-mehr {
	margin: 0.5rem 0 0;
	font-size: 0.9em;
}

/*
 * Bei Astra derselbe Kasten wie um „Search Results for …“: weisser Grund,
 * 3em Innenabstand (48 Pixel bei Astras Grundschrift).
 */
.tp-katalog--astra:not(#tp-gewicht):not(#tp-gewicht) {
	background: #fff;
	margin-top: 2em;
	padding: 3em;
}