/*
Theme Name: Benzer
Theme URI: https://benzerdental.ch/
Author: MF MEDIA
Description: Block-Theme für Benzer Dental AG. Schweizer Dentalmaterial seit 1960, B2B. Ohne Page-Builder, ohne Fremd-Framework, ohne externe Schriften.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: benzer
Update URI: false
Tags: block-theme, e-commerce, full-site-editing
*/

/* ------------------------------------------------------------------
   Nur was theme.json nicht abdeckt. Alles andere gehoert in theme.json.
   ------------------------------------------------------------------ */

/* Grundlagen */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }

:where(a:focus-visible),
:where(button:focus-visible),
:where(input:focus-visible),
:where(select:focus-visible) {
	outline: 2px solid var(--wp--preset--color--marke);
	outline-offset: 2px;
}

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

   Der Browser zeichnet Auswahlfelder sonst in seiner eigenen Optik, die mit
   dem Rest der Seite nichts zu tun hat. Betrifft die Sortierung im Shop, die
   Ausführungswahl am Produkt und später die Felder an der Kasse.
   Der Pfeil ist als SVG eingebettet, damit keine zusätzliche Datei nötig ist. */

select,
.woocommerce select,
select.orderby {
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--tinte);
	background-color: var(--wp--preset--color--weiss);
	/* Auswahlpfeil, 10x6, als eingebettetes SVG.
	   Die Farbe steht hier URL-kodiert als %23111111 und nicht als #111111.
	   Beim Farbwechsel auf Schwarz ist genau diese Stelle stehengeblieben,
	   weil eine Suche nach dem Rautezeichen sie nicht findet. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23111111' d='M5 6 0 0h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .85rem center;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 2px;
	padding: .6rem 2.3rem .6rem .85rem;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
	max-width: 100%;
}
select:hover { border-color: var(--wp--preset--color--tuerkis); }
select:focus {
	border-color: var(--wp--preset--color--marke);
	box-shadow: 0 0 0 3px rgba(0,106,178,.14);
	outline: none;
}
select:disabled { opacity: .5; cursor: not-allowed; background-color: var(--wp--preset--color--flaeche); }

/* Sortierung im Shop: gehört optisch zur Ergebniszeile, nicht als Fremdkörper */
select.orderby {
	font-size: var(--wp--preset--font-size--winzig);
	padding: .5rem 2.1rem .5rem .75rem;
	background-color: var(--wp--preset--color--flaeche);
}
select.orderby:hover { background-color: var(--wp--preset--color--weiss); }

/* Eingabefelder in derselben Handschrift */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"], textarea {
	box-sizing: border-box;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--klein);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 2px;
	padding: .6rem .85rem;
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--tinte);
	max-width: 100%;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus,
input[type="number"]:focus, textarea:focus {
	border-color: var(--wp--preset--color--marke);
	box-shadow: 0 0 0 3px rgba(0,106,178,.14);
	outline: none;
}

/* Sprungmarke fuer Tastaturbedienung */
.benzer-sprung {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--wp--preset--color--marke);
	color: #fff;
	text-decoration: none;
}
.benzer-sprung:focus { left: 0; }

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

.benzer-kopf {
	border-bottom: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--weiss);
}
.benzer-kopf__leiste {
	background: #111111;
	color: #fff;
	font-size: var(--wp--preset--font-size--winzig);
	letter-spacing: .03em;
}
.benzer-kopf__leiste a { color: #fff; text-decoration: none; }
.benzer-kopf__leiste a:hover { text-decoration: underline; }

/* Das alte Logo war ein flaches Band (6,5:1) und kam mit 46 px Hoehe aus.
   Das neue ist gestapelt (2,5:1) und braucht entsprechend mehr. */
.benzer-logo img { max-height: 68px; width: auto; }

/* ---------------------------------------------------------------- Kopf: Dienste, Suche, Warenleiste

   Aufbau von der Mutterfirma briegeldental.de uebernommen (Dienstleiste,
   grosse Suche mittig, Warengruppenleiste darunter). Farben und Schrift
   bleiben Benzer. */

.benzer-kopf__dienste { margin: 0; display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
/* Als gefuellte graue Flaeche sah der Hinweis auf dem schwarzen Band aus wie
   eine stehengebliebene Textmarkierung. Eine Kontur passt besser zu einem
   Erscheinungsbild, das ohnehin ueber Linien und nicht ueber Farbe trennt. */
.benzer-kopf__b2b {
	border: 1px solid rgba(255,255,255,.35);
	padding: .18em .65em;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: .92em;
}

.benzer-kopf__haupt { background: var(--wp--preset--color--weiss); }

/* Grosse Suche, der wichtigste Einstieg in einen Katalogshop */
/* ACHTUNG: .benzer-suche ist das Suchfeld IM KOPF, nicht die Ergebnisseite.
   Die Ergebnisseite heisst .benzer-suchseite. Beim ersten Anlauf hatte ich
   beiden denselben Namen gegeben, worauf der Ergebnisbereich sich das
   max-width von 560px geerbt hat und links am Fensterrand klebte. */
.benzer-suche { flex: 1 1 340px; max-width: 560px; }
.benzer-suche .wp-block-search__inside-wrapper { border: 0; gap: 0; }
.benzer-suche .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--linie);
	border-right: 0;
	border-radius: 2px 0 0 2px;
	padding: .7rem .9rem;
	font-size: var(--wp--preset--font-size--klein);
	background: var(--wp--preset--color--flaeche);
}
.benzer-suche .wp-block-search__input:focus {
	background: #fff;
	border-color: var(--wp--preset--color--tuerkis);
	outline: none;
}
.benzer-suche .wp-block-search__button {
	margin: 0;
	border: 0;
	border-radius: 0 2px 2px 0;
	background: #111111;
	color: #fff;
	font-size: var(--wp--preset--font-size--winzig);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 650;
	padding: .7rem 1.4rem;
	cursor: pointer;
}
.benzer-suche .wp-block-search__button:hover { filter: brightness(.93); }

.benzer-kopf__konto { gap: 1.1rem; font-size: var(--wp--preset--font-size--klein); }

/* Warengruppenleiste */
.benzer-warenleiste {
	border-top: 1px solid var(--wp--preset--color--linie);
	border-bottom: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--weiss);
}
.benzer-warenleiste__nav ul {
	list-style: none; margin: 0; padding: 0;
	/* Bewusst kein Umbruch: die Leiste bleibt einzeilig. Passt etwas nicht mehr,
	   fällt es über das Zeichenbudget im Block hinten raus, statt umzubrechen. */
	display: flex; flex-wrap: nowrap; align-items: stretch;
	gap: 0;
}
.benzer-warenleiste__nav a {
	display: block;
	padding: .8rem .85rem;
	font-size: .6875rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 650;
	color: var(--wp--preset--color--tinte);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}
.benzer-warenleiste__nav a:hover {
	color: var(--wp--preset--color--marke);
	border-bottom-color: var(--wp--preset--color--tuerkis);
	background: var(--wp--preset--color--flaeche);
}
.benzer-warenleiste__nav li.is-aktiv a {
	color: var(--wp--preset--color--marke);
	border-bottom-color: var(--wp--preset--color--marke);
}
.benzer-warenleiste__nav li.is-alle { margin-left: auto; }
.benzer-warenleiste__nav li.is-alle a { color: var(--wp--preset--color--tuerkis); }
@media (max-width: 900px) {
	.benzer-warenleiste__nav ul { overflow-x: auto; flex-wrap: nowrap; }
	.benzer-warenleiste__nav li.is-alle { margin-left: 0; }
}

/* Navigation */
.wp-block-navigation .wp-block-navigation-item__content {
	text-decoration: none;
	font-weight: 550;
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: .01em;
	padding-block: .35rem;
	border-bottom: 2px solid transparent;
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--marke);
	border-bottom-color: var(--wp--preset--color--marke);
}

/* ---------------------------------------------------------------- Produktraster */

.woocommerce ul.products,
.wc-block-grid__products,
.wp-block-woocommerce-product-template {
	list-style: none;
	margin: 0;
	padding: 0;
}

.benzer-produkt {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.benzer-produkt:hover {
	border-color: var(--wp--preset--color--marke);
	box-shadow: var(--wp--preset--shadow--karte);
}
.benzer-produkt__bild {
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--flaeche);
	display: grid;
	place-items: center;
	overflow: hidden;
}
.benzer-produkt__bild img {
	width: 100%; height: 100%;
	object-fit: contain;
	padding: 1rem;
	mix-blend-mode: multiply;
}
.benzer-produkt__text { padding: 1rem 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.benzer-produkt__kat {
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.benzer-produkt__name { font-weight: 600; line-height: 1.3; }
.benzer-produkt__name a { color: inherit; text-decoration: none; }
.benzer-produkt__name a:hover { color: var(--wp--preset--color--marke); }
.benzer-produkt__preis { margin-top: auto; padding-top: .5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.benzer-produkt__steuer { font-size: var(--wp--preset--font-size--winzig); color: var(--wp--preset--color--gedaempft); font-weight: 400; }
.benzer-produkt del { color: var(--wp--preset--color--gedaempft); font-weight: 400; margin-right: .4em; }
.benzer-produkt ins { text-decoration: none; color: var(--wp--preset--color--signal); }

/* Empfehlungs-Kennzeichnung */
.benzer-tipp {
	display: inline-flex; align-items: center; gap: .4em;
	font-size: var(--wp--preset--font-size--winzig);
	background: var(--wp--preset--color--marke-hell);
	color: var(--wp--preset--color--marke-dunkel);
	padding: .2em .6em;
	border-radius: 2px;
	font-weight: 600;
	letter-spacing: .01em;
	align-self: flex-start;
}

/* ==================================================================
   Datenblatt-Stil
   Gestaltungsrichtung aus dem Moodboard vom 20.08.2026: der Katalog ist
   die Stärke, nicht die Werbefläche. Feine Linien, kleine technische
   Beschriftungen, sichtbare Artikelnummern, Blau nur als Akzent.
   ================================================================== */

/* Kleine Funktionsbeschriftung, kommt mehrfach vor */
.benzer-marke {
	margin: 0;
	font-size: var(--wp--preset--font-size--winzig);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 650;
	color: var(--wp--preset--color--marke);
}

/* ---------------------------------------------------------------- Markenband

   Seit dem neuen Logo ist das Band schwarz statt blau. Das Logo ist reines
   Schwarz, ein farbiges Band daneben würde mit ihm konkurrieren. Die Fläche
   trägt jetzt allein durch ihre Dunkelheit, Trennung entsteht über Kanten und
   Abstände statt über Farbe. Flach gehalten, damit
   der Katalog nicht nach unten rutscht. */

.benzer-band__marke {
	margin: 0;
	font-size: var(--wp--preset--font-size--winzig);
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 650;
	color: rgba(255,255,255,.78);
}
.benzer-band__text { color: rgba(255,255,255,.9); }

/* Eckdaten als Datenblatt-Tabelle, auf dem Band in Weiss */
.benzer-eckdaten { margin: 0; display: grid; gap: 0; }
.benzer-eckdaten > div {
	display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}
.benzer-eckdaten > div:first-child { border-top: 1px solid var(--wp--preset--color--linie); }
.benzer-eckdaten dt {
	font-size: var(--wp--preset--font-size--winzig);
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--wp--preset--color--gedaempft);
}
.benzer-eckdaten dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}
.benzer-band .benzer-eckdaten > div { border-color: rgba(255,255,255,.28); }
.benzer-band .benzer-eckdaten dt { color: rgba(255,255,255,.72); }
.benzer-band .benzer-eckdaten dd { color: #fff; }

/* Abschnittskopf mit Markenlinie statt schwarzem Strich */
.benzer-abschnitt__kopf {
	padding-bottom: .6rem;
	margin-bottom: var(--wp--preset--spacing--30);
	border-bottom: none;
	position: relative;
}
.benzer-abschnitt__kopf::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 3px;
	background: #111111;
	border-radius: 2px;
}
.benzer-abschnitt__kopf h2 { margin: 0; }
.benzer-abschnitt__hinweis {
	margin: 0;
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.benzer-abschnitt__hinweis a { color: var(--wp--preset--color--marke); text-decoration: none; }
.benzer-abschnitt__hinweis a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Verzeichnis */

.benzer-verzeichnis {
	list-style: none; margin: 0; padding: 0;
	columns: 3; column-gap: var(--wp--preset--spacing--40);
}
@media (max-width: 900px) { .benzer-verzeichnis { columns: 2; } }
@media (max-width: 560px) { .benzer-verzeichnis { columns: 1; } }
.benzer-verzeichnis li { break-inside: avoid; }
.benzer-verzeichnis a {
	display: flex; align-items: baseline; gap: .5rem;
	padding: .45rem 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
	text-decoration: none; color: inherit;
	font-size: var(--wp--preset--font-size--klein);
}
.benzer-verzeichnis a:hover .benzer-verzeichnis__name { color: var(--wp--preset--color--marke); }
.benzer-verzeichnis a:hover { border-bottom-color: var(--wp--preset--color--tuerkis); }
.benzer-verzeichnis a:hover .benzer-verzeichnis__zahl { color: var(--wp--preset--color--tuerkis); }
.benzer-verzeichnis__name { flex: 0 1 auto; }
/* Bewusst ohne Punktlinie. Die wirkte zusammen mit der Zeilentrennlinie
   darunter wie zwei Linien übereinander und war schwer zu lesen. Das Element
   bleibt als Abstandhalter, damit die Zahl rechts stehen bleibt. */
.benzer-verzeichnis__punkte {
	flex: 1 1 auto;
	min-width: 1rem;
}
.benzer-verzeichnis__zahl {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
}

/* ---------------------------------------------------------------- Katalograster */

.benzer-katalog {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
}

.benzer-karte { display: flex; flex-direction: column; position: relative; height: 100%; }
/* Karten einer Reihe gleich hoch, damit Preis und Knopf auf einer Linie sitzen */
.wp-block-woocommerce-product-template > li,
.wc-block-product-template__responsive > li { display: flex; }
.wp-block-woocommerce-product-template > li > .benzer-karte,
.wc-block-product-template__responsive > li > .benzer-karte { width: 100%; }
.benzer-karte__knopf { margin-top: auto; }

.benzer-karte__bild {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	/* Einheitlicher heller Grund für alle Produktbilder. Der Katalog wirkt
	   dadurch geschlossen, obwohl die Aufnahmen aus verschiedenen Quellen stammen. */
	background: #FAFAFA;
	border: 1px solid var(--wp--preset--color--linie);
	overflow: hidden;
	margin-bottom: .7rem;
}
.benzer-karte__foto {
	/* box-sizing muss mit, sonst wird der Innenabstand auf die Breite addiert
	   und das Bild ragt ueber die Kachel hinaus. Gleiche Falle wie bei den
	   WooCommerce-Karten. */
	box-sizing: border-box;
	width: 100%; height: 100%;
	object-fit: contain;
	padding: 12%;
	transition: transform .25s ease;
}
.benzer-karte:hover .benzer-karte__bild { border-color: var(--wp--preset--color--marke); }
.benzer-karte:hover .benzer-karte__foto { transform: scale(1.03); }
.benzer-karte__leer {
	position: absolute; inset: 0;
	background:
		repeating-linear-gradient(45deg, transparent 0 8px, rgba(17,17,17,.045) 8px 9px);
}
.benzer-karte__abzeichen {
	position: absolute; left: 0; top: 0;
	background: #111111;
	color: #fff;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: .25em .6em;
}

.benzer-karte__kopf {
	display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
	margin-bottom: .2rem;
}
.benzer-karte__gruppe {
	text-transform: uppercase; letter-spacing: .07em;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	color: var(--wp--preset--color--tuerkis);
	font-weight: 600;
}
.benzer-karte__nummer {
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: .6875rem;
	color: var(--wp--preset--color--gedaempft);
}
.benzer-karte__name {
	margin: 0 0 .35rem;
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.005em;
}
.benzer-karte__name a { color: inherit; text-decoration: none; }
.benzer-karte__name a:hover { color: var(--wp--preset--color--marke); }
.benzer-karte__fuss {
	margin-top: auto;
	display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
	padding-top: .35rem;
	border-top: 1px solid var(--wp--preset--color--linie);
}
.benzer-karte__preis {
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	font-size: var(--wp--preset--font-size--klein);
}
.benzer-karte__preis del { color: var(--wp--preset--color--gedaempft); font-weight: 400; margin-right: .35em; }
.benzer-karte__preis ins { text-decoration: none; color: var(--wp--preset--color--signal); }
.benzer-karte__steuer { font-size: .625rem; color: var(--wp--preset--color--gedaempft); }
.benzer-karte__varianten {
	margin-top: .3rem;
	font-size: .625rem;
	color: var(--wp--preset--color--gedaempft);
	font-variant-numeric: tabular-nums;
}

/* Liefer- oder Verfuegbarkeitshinweis.
   Der gruene Punkt ist der Bestandsanzeige vorbehalten, die es nur gibt wenn
   ein Lagersystem gepflegt ist. Die Lieferzeit ist eine andere Aussage und
   bekommt deshalb bewusst keinen Punkt, damit sie nicht wie ein Bestand aussieht. */
.benzer-karte__lager {
	display: flex; align-items: center; gap: .4em;
	margin-top: .35rem;
	font-size: .6875rem;
	color: var(--wp--preset--color--gedaempft);
}
.benzer-karte__lager.is-da::before,
.benzer-karte__lager.is-weg::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
}
.benzer-karte__lager.is-da { color: #1B7A4B; }
.benzer-karte__lager.is-da::before { background: #1B9E5F; }
.benzer-karte__lager.is-weg { color: #8A6410; }
.benzer-karte__lager.is-weg::before { background: #C08A1E; }
.benzer-karte__lager.is-lieferzeit { color: var(--wp--preset--color--gedaempft); }

/* ---------------------------------------------------------------- Einstiegskachel

   Muster von der Mutterfirma: farbige Kachel als erste Zelle der Produktreihe.
   Dort gruen, hier im Benzer-Verlauf. */

.benzer-einstieg {
	display: flex; flex-direction: column; justify-content: space-between; gap: 1rem;
	padding: 1.4rem 1.3rem;
	/* Dieselbe Flaeche wie das Heldenband. Beides sind Markenflaechen, sie
	   sollen sich gleich anfuehlen. */
	background: var(--wp--preset--gradient--akzent);
	color: #fff;
	border-radius: 2px;
	/* Hier stand min-height: 100%.
	   
	   Auf Michaels iPhone zog sich die Kachel dadurch ueber die ganze
	   Bildschirmhoehe. In Chrome war bei 402 px alles in Ordnung (196 px
	   hoch), der Fehler trat nur in Safari auf: WebKit loest ein
	   Prozent-Mass in einem Raster mit automatischer Zeilenhoehe anders auf
	   als Chrome.
	   
	   Die Angabe war ohnehin ueberfluessig. Das Raster steht auf
	   align-items: normal, und das heisst bei Grid bereits strecken. Die
	   Kachel passt sich also von selbst der Zeilenhoehe an. Weglassen ist
	   damit nicht nur die Loesung fuer Safari, sondern auch das Richtige. */
}
.benzer-einstieg__titel {
	margin: 0 0 .5rem;
	font-size: var(--wp--preset--font-size--titel-s);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.01em;
}
.benzer-einstieg__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	color: rgba(255,255,255,.88);
	line-height: 1.5;
}
.benzer-einstieg__knopf {
	align-self: flex-start;
	background: #fff;
	/* Auf der blauen Flaeche traegt der Knopf jetzt die Akzentfarbe statt
	   Graphit. Das bindet ihn an die uebrigen Schaltflaechen der Seite. */
	color: var(--wp--preset--color--akzent);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--winzig);
	text-transform: uppercase;
	letter-spacing: .07em;
	font-weight: 700;
	padding: .65em 1.3em;
	border-radius: 2px;
}
.benzer-einstieg__knopf:hover { background: rgba(255,255,255,.88); }

/* Anpassungen, wenn die Karte von WooCommerce-Bloecken gefuellt wird
   (Kategorie- und Shopseite statt eigenem Katalog-Block) */
.benzer-karte .wp-block-woocommerce-product-image { display: block; height: 100%; }
.benzer-karte .wp-block-woocommerce-product-image a { display: block; height: 100%; }
/* Der WooCommerce-Bildblock schreibt object-fit:cover und ein Seitenverhältnis
   direkt ins Element. Das ueberstimmt normales CSS und liess das Foto ueber den
   Kachelrand laufen. Deshalb hier ausnahmsweise !important. */
.benzer-karte .wp-block-woocommerce-product-image img {
	/* box-sizing muss mit, sonst wird der Innenabstand auf die Breite addiert
	   und das Bild ragt um 2 x 12 % ueber die Kachel hinaus. */
	box-sizing: border-box !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	aspect-ratio: auto !important;
	padding: 12%;
}
.benzer-karte .benzer-karte__gruppe a { color: inherit; text-decoration: none; }
.benzer-karte .benzer-karte__gruppe a:hover { color: var(--wp--preset--color--marke); }
.benzer-karte .benzer-karte__nummer .wc-block-components-product-sku__label { display: none; }
.benzer-karte .benzer-karte__name { margin-bottom: .35rem; }
.benzer-karte__knopf .wp-block-button__link,
.benzer-karte__knopf .wc-block-components-product-button__button {
	width: 100%;
	font-size: var(--wp--preset--font-size--winzig);
	padding: .7em 1em;
	border-radius: 2px;
}
.benzer-karte .wc-block-components-product-price { font-size: var(--wp--preset--font-size--klein); }

/* ---------------------------------------------------------------- Beratungsstreifen */

.benzer-beratung { border-top: 1px solid var(--wp--preset--color--linie); }
.benzer-beratung__zusatz { color: var(--wp--preset--color--gedaempft); font-size: var(--wp--preset--font-size--klein); }
.benzer-beratung__kontakt { text-align: right; font-size: var(--wp--preset--font-size--klein); font-variant-numeric: tabular-nums; }
.benzer-beratung__kontakt a { color: var(--wp--preset--color--marke); text-decoration: none; }
.benzer-beratung__kontakt a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Sortimentsraster */

.benzer-sortiment {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
	gap: 1px;
	/* Weiss statt Linienfarbe: leere Restzellen der letzten Reihe bleiben so weiss
	   statt als graue Fläche zu erscheinen. Die Trennlinien zeichnen die Kacheln
	   selbst über box-shadow. */
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 3px;
	overflow: hidden;
}
.benzer-sortiment__kachel {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: 1rem 1.1rem;
	background: var(--wp--preset--color--weiss);
	box-shadow: 0 0 0 1px var(--wp--preset--color--linie);
	text-decoration: none;
	color: inherit;
	transition: background .15s ease;
}
.benzer-sortiment__kachel:hover { background: var(--wp--preset--color--marke-hell); }
.benzer-sortiment__bild {
	flex: 0 0 48px;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	background: var(--wp--preset--color--flaeche);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}
/* Ohne Kategoriebild: dezenter Anfangsbuchstabe statt kaputtem Platzhalter */
.benzer-sortiment__bild:empty::after {
	content: "";
	width: 14px; height: 14px;
	border: 2px solid var(--wp--preset--color--marke);
	border-radius: 2px;
	opacity: .35;
}
.benzer-sortiment__bild img { width: 100%; height: 100%; object-fit: cover; }
.benzer-sortiment__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.benzer-sortiment__name {
	font-weight: 600;
	line-height: 1.25;
	/* Lange Warengruppen wie "Ultraschallflüssigkeiten" duerfen umbrechen,
	   statt am Kachelrand abgeschnitten zu werden. */
	overflow-wrap: anywhere;
	hyphens: auto;
}
.benzer-sortiment__kachel:hover .benzer-sortiment__name { color: var(--wp--preset--color--marke); }
.benzer-sortiment__zahl { font-size: var(--wp--preset--font-size--winzig); color: var(--wp--preset--color--gedaempft); }

/* ---------------------------------------------------------------- Warengruppen-Liste */

.benzer-warengruppen { list-style: none; margin: 0; padding: 0; font-size: var(--wp--preset--font-size--klein); }
.benzer-warengruppen li {
	display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
	padding: .4rem 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}
.benzer-warengruppen li:last-child { border-bottom: 0; }
.benzer-warengruppen a { color: inherit; text-decoration: none; }
.benzer-warengruppen a:hover { color: var(--wp--preset--color--marke); }
.benzer-warengruppen li.is-aktiv a { color: var(--wp--preset--color--marke); font-weight: 650; }
.benzer-warengruppen span {
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
	font-variant-numeric: tabular-nums;
}

/* Hinweis auf die restlichen Warengruppen, wenn die Liste gekürzt ist */
.benzer-warengruppen__mehr { border-bottom: 0; padding-top: .7rem; }
.benzer-warengruppen__mehr a { font-weight: 650; color: var(--wp--preset--color--marke); }

/*
 * Dieselbe Liste steht auch im dunklen Fuss. Dort sind Trennlinie und
 * Zahlenfarbe aus dem hellen Bereich fast unsichtbar, deshalb eigene Werte.
 * Aufgefallen, weil im Fuss vorher gar keine Warengruppen standen, sondern
 * versehentlich alle Seiten.
 */
.benzer-fuss .benzer-warengruppen li { border-bottom-color: rgba(255, 255, 255, .12); }
.benzer-fuss .benzer-warengruppen span { color: #8A8A8A; }
.benzer-fuss .benzer-warengruppen a:hover { color: #fff; text-decoration: underline; }
.benzer-fuss .benzer-warengruppen__mehr a { color: #fff; }

/* ---------------------------------------------------------------- Empfehlungen */

.benzer-empfehlungen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.25rem;
}
.benzer-empfehlung {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--weiss);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 3px;
	overflow: hidden;
}
.benzer-empfehlung__bild {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--flaeche);
}
.benzer-empfehlung__bild img {
	width: 100%; height: 100%;
	object-fit: contain;
	padding: .9rem;
	mix-blend-mode: multiply;
}
.benzer-empfehlung__text { padding: .9rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }

.benzer-empfehlung__meister { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.benzer-empfehlung__kuerzelreihe { display: flex; }
.benzer-empfehlung__kuerzel {
	display: grid; place-items: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--marke);
	color: #fff;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .01em;
	box-shadow: 0 0 0 2px var(--wp--preset--color--weiss);
}
.benzer-empfehlung__kuerzelreihe .benzer-empfehlung__kuerzel + .benzer-empfehlung__kuerzel { margin-left: -7px; }
.benzer-empfehlung__kuerzel.is-rest { background: var(--wp--preset--color--gedaempft); }
.benzer-empfehlung__zahl {
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--marke-dunkel);
	font-weight: 600;
}
.benzer-empfehlung__namen {
	margin: 0;
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
	line-height: 1.45;
}
.benzer-empfehlung__name { margin: 0; font-size: var(--wp--preset--font-size--titel-s); font-weight: 600; line-height: 1.25; }
.benzer-empfehlung__name a { color: inherit; text-decoration: none; }
.benzer-empfehlung__name a:hover { color: var(--wp--preset--color--marke); }
.benzer-empfehlung__preis { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ==================================================================
   Produktseite
   Vorher schwebte alles frei auf weisser Fläche. Jetzt bekommt jeder
   Bereich einen Rahmen: gefasste Bildfläche wie im Katalog, Kaufbox,
   Tafeln für Beschreibung und Daten.
   ================================================================== */

.benzer-produktkopf { align-items: flex-start; }

/* Bildfläche, gleiche Anmutung wie die Katalogkacheln */
.benzer-galerie {
	background: #FAFAFA;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 3px;
	padding: 1.5rem;
	position: sticky;
	top: 1rem;
}
.benzer-galerie .woocommerce-product-gallery { margin: 0 !important; width: 100% !important; float: none !important; }
.benzer-galerie .woocommerce-product-gallery__wrapper { margin: 0; }
.benzer-galerie .woocommerce-product-gallery__image { margin: 0; }
.benzer-galerie img {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	mix-blend-mode: multiply;
}
/* Lupensymbol dezent in die Ecke statt frei im leeren Raum */
.benzer-galerie .woocommerce-product-gallery__trigger {
	top: .5rem; right: .5rem; left: auto;
	background: #fff;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 50%;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	z-index: 2;
}
/* Bildstreifen unter dem Hauptbild */
.benzer-galerie .flex-control-thumbs {
	display: flex; gap: .5rem; flex-wrap: wrap;
	margin: 1rem 0 0; padding: 0; list-style: none;
}
.benzer-galerie .flex-control-thumbs li { width: 64px; margin: 0; }
.benzer-galerie .flex-control-thumbs img {
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 2px;
	background: #fff;
	padding: 4px;
	cursor: pointer;
	aspect-ratio: 1 / 1;
}
.benzer-galerie .flex-control-thumbs img:hover,
.benzer-galerie .flex-control-thumbs img.flex-active { border-color: var(--wp--preset--color--marke); }

/* ---------------------------------------------------------------- Kaufbox */

.benzer-kaufbox {
	border: 1px solid var(--wp--preset--color--linie);
	border-top: 2px solid var(--wp--preset--color--tinte);
	border-radius: 0;
	background: var(--wp--preset--color--weiss);
	padding: 1.4rem 1.5rem 1.5rem;
	box-shadow: var(--wp--preset--shadow--karte);
}
.benzer-kaufbox__preiszeile { margin-bottom: 1rem; }
.benzer-kaufbox__preis {
	font-size: var(--wp--preset--font-size--titel-m);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	color: var(--wp--preset--color--tinte);
}
.benzer-kaufbox__preis del { color: var(--wp--preset--color--gedaempft); font-weight: 400; font-size: .7em; margin-right: .4em; }
.benzer-kaufbox__preis ins { text-decoration: none; color: var(--wp--preset--color--signal); }
.benzer-kaufbox__steuer {
	margin: .35rem 0 0;
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
}

/* Artikelnummer, Verfügbarkeit und Ausführungen als Datenzeile */
.benzer-kennung {
	display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center;
	padding: .7rem 0;
	margin-bottom: 1rem;
	border-top: 1px solid var(--wp--preset--color--linie);
	border-bottom: 1px solid var(--wp--preset--color--linie);
	font-size: var(--wp--preset--font-size--klein);
}
.benzer-kennung__nummer { font-family: var(--wp--preset--font-family--mono); font-size: .78rem; }
.benzer-kennung__nummer span {
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--winzig);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--wp--preset--color--gedaempft);
	margin-right: .2em;
}
.benzer-kennung__lager {
	display: flex; align-items: center; gap: .4em;
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--gedaempft);
}
.benzer-kennung__lager.is-da::before,
.benzer-kennung__lager.is-weg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.benzer-kennung__lager.is-da { color: #1B7A4B; }
.benzer-kennung__lager.is-da::before { background: #1B9E5F; }
.benzer-kennung__lager.is-weg { color: #8A6410; }
.benzer-kennung__lager.is-weg::before { background: #C08A1E; }
.benzer-kennung__lager.is-lieferzeit { color: var(--wp--preset--color--gedaempft); }
.benzer-kennung__varianten { font-size: var(--wp--preset--font-size--winzig); color: var(--wp--preset--color--gedaempft); font-variant-numeric: tabular-nums; }

/* Auswahl, Menge, Knopf */
.benzer-kaufbox__aktion .variations { width: 100%; margin: 0 0 1rem; }
.benzer-kaufbox__aktion .variations td,
.benzer-kaufbox__aktion .variations th { display: block; width: 100%; padding: 0; text-align: left; }
.benzer-kaufbox__aktion .variations label {
	display: block;
	font-size: var(--wp--preset--font-size--winzig);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 650;
	color: var(--wp--preset--color--gedaempft);
	margin-bottom: .35rem;
}
.benzer-kaufbox__aktion select {
	width: 100%;
	padding: .65rem .8rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 2px;
	background: var(--wp--preset--color--weiss);
	font-size: var(--wp--preset--font-size--klein);
	font-family: inherit;
}
.benzer-kaufbox__aktion select:focus { border-color: var(--wp--preset--color--tuerkis); outline: none; }
.benzer-kaufbox__aktion .reset_variations {
	display: inline-block;
	margin-top: .5rem;
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
}
.benzer-kaufbox__aktion form.cart {
	display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap;
	margin: 0;
}
.benzer-kaufbox__aktion form.variations_form { display: block; }
.benzer-kaufbox__aktion .woocommerce-variation-add-to-cart { display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap; }
.benzer-kaufbox__aktion .quantity input {
	width: 74px; height: 100%;
	padding: .75rem .5rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 2px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--klein);
}
.benzer-kaufbox__aktion button[type="submit"] {
	flex: 1 1 auto;
	min-width: 180px;
	background: #111111;
	color: #fff;
	border: 0;
	border-radius: 2px;
	padding: .85rem 1.6rem;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 700;
	letter-spacing: .03em;
	cursor: pointer;
	font-family: inherit;
}
.benzer-kaufbox__aktion button[type="submit"]:hover:not(:disabled) { filter: brightness(.93); }
.benzer-kaufbox__aktion button[type="submit"]:disabled { opacity: .45; cursor: not-allowed; }
.benzer-kaufbox__aktion .woocommerce-variation-price { margin-bottom: .8rem; font-weight: 650; font-variant-numeric: tabular-nums; }
/* Der Varianten-Container ist leer, solange nichts gewaehlt ist. Ohne das
   klafft eine Luecke zwischen Auswahlfeld und Mengenfeld. */
.benzer-kaufbox__aktion .single_variation_wrap { margin: 0; }
.benzer-kaufbox__aktion .woocommerce-variation:empty { display: none; }
.benzer-kaufbox__aktion .woocommerce-variation { margin-bottom: .8rem; }

.benzer-kaufbox__hinweis {
	margin: 1rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid var(--wp--preset--color--linie);
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
	line-height: 1.55;
}

/* ---------------------------------------------------------------- Tafeln */

.benzer-tafel {
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 3px;
	overflow: hidden;
	background: var(--wp--preset--color--weiss);
	height: 100%;
}
.benzer-tafel__kopf {
	margin: 0;
	padding: .8rem 1.2rem;
	background: var(--wp--preset--color--flaeche);
	border-bottom: 1px solid var(--wp--preset--color--linie);
	font-size: var(--wp--preset--font-size--gross) !important;
	font-weight: 650;
}
.benzer-tafel__inhalt { padding: 1.2rem; }
.benzer-tafel__inhalt > *:first-child { margin-top: 0; }
.benzer-tafel__inhalt > *:last-child { margin-bottom: 0; }
/* Tabellen sitzen buendig im Rahmen, ohne doppelten Innenabstand */
.benzer-tafel__inhalt--tabelle { padding: 0; }
.benzer-tafel__inhalt--tabelle .benzer-daten th:first-child,
.benzer-tafel__inhalt--tabelle .benzer-daten td:first-child { padding-left: 1.2rem; }
.benzer-tafel__inhalt--tabelle .benzer-daten th:last-child,
.benzer-tafel__inhalt--tabelle .benzer-daten td:last-child { padding-right: 1.2rem; }
.benzer-daten__nummer { font-family: var(--wp--preset--font-family--mono); font-size: .75rem; white-space: nowrap; }
.benzer-daten__preis { text-align: right; font-weight: 600; white-space: nowrap; }
.benzer-daten thead th {
	background: var(--wp--preset--color--flaeche);
	font-size: var(--wp--preset--font-size--winzig);
	text-transform: uppercase;
	letter-spacing: .06em;
	width: auto;
}
.benzer-daten thead th:last-child { text-align: right; }
.benzer-leer { color: var(--wp--preset--color--gedaempft); font-size: var(--wp--preset--font-size--klein); margin: 0; }

/* ---------------------------------------------------------------- Produktseite */

.benzer-produkt-warengruppen {
	margin: 0 0 .35rem;
	font-size: var(--wp--preset--font-size--winzig);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--wp--preset--color--gedaempft);
}
.benzer-produkt-warengruppen a { color: inherit; text-decoration: none; }
.benzer-produkt-warengruppen a:hover { color: var(--wp--preset--color--marke); text-decoration: underline; }

.benzer-meisterhinweis {
	background: var(--wp--preset--color--marke-hell);
	border-left: 3px solid var(--wp--preset--color--marke);
	padding: .85rem 1.1rem;
	margin: var(--wp--preset--spacing--30) 0;
}
.benzer-meisterhinweis__titel {
	margin: 0 0 .25rem;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 650;
	color: var(--wp--preset--color--marke-dunkel);
}
.benzer-meisterhinweis__namen {
	margin: 0;
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
	line-height: 1.5;
}

/* ==================================================================
   Unterseiten

   Vorher: Text in einer schmalen Spalte, rechts daneben eine grosse Leere,
   Überschrift zu gross, kein Anfang und kein Ende. Jetzt Titelband über die
   volle Breite und der Inhalt in einer gefassten Fläche.
   ================================================================== */

.benzer-seitenkopf {
	background: var(--wp--preset--color--flaeche);
	border-bottom: 1px solid var(--wp--preset--color--linie);
	position: relative;
}
/* Markenkante oben, gleiche Handschrift wie die Abschnittslinien */
.benzer-seitenkopf::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0;
	/* 2px, damit die Kante dieselbe Staerke hat wie die uebrigen Akzente
	   (Kaufbox, Bestelluebersicht, Kontaktkarte). Als blauer Verlauf durfte
	   sie 3px sein, in Schwarz ueber die volle Breite ist das zu laut. */
	height: 2px;
	background: var(--wp--preset--color--tinte);
}
.benzer-seitenkopf__krume { margin: 0 0 .2rem; color: var(--wp--preset--color--gedaempft); }
.benzer-seitenkopf__krume a { color: var(--wp--preset--color--gedaempft); text-decoration: none; }
.benzer-seitenkopf__krume a:hover { color: var(--wp--preset--color--marke); text-decoration: underline; }
.benzer-seitenkopf__titel { letter-spacing: -.015em; }

/* Inhaltsfläche */
.benzer-seiteninhalt { padding: var(--wp--preset--spacing--40); }
.benzer-seiteninhalt > * { max-width: none; }

/* Der Rahmen nutzt die volle Breite, der Lesetext bleibt trotzdem lesbar
   schmal. Eine Zeile mit 200 Zeichen liest niemand gern. */
.benzer-seiteninhalt p,
.benzer-seiteninhalt ul,
.benzer-seiteninhalt ol,
.benzer-seiteninhalt blockquote { max-width: 78ch; }

.benzer-seiteninhalt > *:first-child { margin-top: 0; }
.benzer-seiteninhalt > *:last-child { margin-bottom: 0; }

.benzer-seiteninhalt h2 {
	font-size: var(--wp--preset--font-size--titel-s);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--linie);
}
.benzer-seiteninhalt h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.benzer-seiteninhalt h3 { font-size: var(--wp--preset--font-size--gross); margin-top: var(--wp--preset--spacing--30); }
.benzer-seiteninhalt li { margin-bottom: .3rem; }

/* ==================================================================
   Warenkorb, Kasse, Bestätigung

   Die drei Seiten folgen jetzt derselben Gestaltung wie die übrigen
   Unterseiten: Titelband oben, gefasste Flächen darunter. Dazu eine
   Schrittanzeige, damit man weiss, wo im Ablauf man steht.
   ================================================================== */

.benzer-schritte {
	display: flex; gap: 1.4rem; flex-wrap: wrap;
	margin: 0;
	font-size: var(--wp--preset--font-size--winzig);
	text-transform: uppercase;
	letter-spacing: .07em;
	font-weight: 650;
	color: var(--wp--preset--color--gedaempft);
}
.benzer-schritte span { display: flex; align-items: center; gap: .4em; }
.benzer-schritte span:not(:last-child)::after {
	content: "›";
	margin-left: 1rem;
	color: var(--wp--preset--color--linie);
	font-weight: 400;
}
.benzer-schritte .is-aktiv { color: var(--wp--preset--color--marke); }

/* WooCommerce setzt in der Kasse eigene Abstaende obendrauf. Zusammen mit
   meinem Rumpf-Abstand entstand eine Luecke von 128 px unter dem Titelband. */
.benzer-kasse { padding-top: var(--wp--preset--spacing--20) !important; }
.benzer-kasse .wp-block-woocommerce-checkout { margin-top: 0; }
.benzer-kasse .wc-block-components-notices:empty { display: none; }

/* ---- Kopf und Fuss der Kasse ---- */

.benzer-kassenkopf {
	border-bottom: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--weiss);
}
.benzer-kassenkopf__hilfe {
	margin: 0;
	font-size: var(--wp--preset--font-size--klein);
	display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap;
}
.benzer-kassenkopf__hilfe span { color: var(--wp--preset--color--gedaempft); }
.benzer-kassenkopf__hilfe a {
	color: var(--wp--preset--color--marke);
	text-decoration: none;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}
.benzer-kassenfuss {
	border-top: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--flaeche);
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
}
.benzer-kassenfuss__links { margin: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.benzer-kassenfuss__links a { color: var(--wp--preset--color--gedaempft); text-decoration: none; }
.benzer-kassenfuss__links a:hover { color: var(--wp--preset--color--marke); text-decoration: underline; }
.benzer-kassenfuss__hinweis { margin: 0; }

/* ---- Formularfelder der Kasse ---- */

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-address-form input {
	border: 1px solid var(--wp--preset--color--linie) !important;
	border-radius: 2px !important;
	font-family: inherit !important;
	font-size: var(--wp--preset--font-size--klein) !important;
	background: var(--wp--preset--color--weiss) !important;
	color: var(--wp--preset--color--tinte) !important;
}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-address-form input:focus {
	border-color: var(--wp--preset--color--marke) !important;
	box-shadow: 0 0 0 3px rgba(0,106,178,.14) !important;
	outline: none !important;
}
.wc-block-components-text-input label,
.wc-block-components-checkbox__label { color: var(--wp--preset--color--gedaempft); }

/* Ausgewählte Versand- und Zahlungsart deutlich absetzen */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-radius: 2px;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--wp--preset--color--marke) !important;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--marke);
	background: var(--wp--preset--color--marke-hell);
}

/* Bestellübersicht als gefasste Fläche, wie die Kaufbox am Produkt.
   NUR der äussere Block. Die erste Fassung traf jedes Panel in der
   Seitenspalte und legte die Verlaufskante auch um das Gutscheinfeld. */
.wp-block-woocommerce-checkout-order-summary-block {
	border: 1px solid var(--wp--preset--color--linie) !important;
	border-top: 2px solid var(--wp--preset--color--tinte) !important;
	border-radius: 0 !important;
	background: var(--wp--preset--color--weiss);
	box-shadow: var(--wp--preset--shadow--karte);
}
/* Innere Panels bleiben schlicht */
.wp-block-woocommerce-checkout-order-summary-coupon-form-block,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel {
	border-image: none !important;
	box-shadow: none !important;
}

/* Abschlussknopf im Markenverlauf */
.wc-block-components-checkout-place-order-button {
	background: #111111 !important;
	border: 0 !important;
	border-radius: 2px !important;
	font-family: inherit !important;
	font-weight: 700 !important;
	letter-spacing: .02em;
}
.wc-block-components-checkout-place-order-button:hover:not(:disabled) { filter: brightness(.93); }

/* ---- Warenkorb ---- */

.wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	background: #111111 !important;
	border: 0 !important;
	border-radius: 2px !important;
	font-weight: 700 !important;
}
.wc-block-cart-items__header {
	font-size: var(--wp--preset--font-size--winzig);
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--wp--preset--color--gedaempft);
}
.wc-block-cart .wc-block-components-product-name { font-weight: 600; color: var(--wp--preset--color--tinte); text-decoration: none; }
.wc-block-components-totals-item__value { font-variant-numeric: tabular-nums; }

/* ---- Bestätigung ---- */

.benzer-bestaetigung__status {
	font-size: var(--wp--preset--font-size--gross);
	padding: 1rem 1.2rem;
	background: var(--wp--preset--color--flaeche);
	border-left: 3px solid var(--wp--preset--color--tuerkis);
	margin-bottom: var(--wp--preset--spacing--40);
}
/* Die doppelte h1 des Statusblocks wird in functions.php aus dem Markup
   entfernt, nicht hier versteckt. Versteckt hiesse: steht trotzdem im Quelltext. */
.benzer-bestaetigung__status > p {
	margin: 0;
	font-size: var(--wp--preset--font-size--gross);
	color: var(--wp--preset--color--marke-dunkel);
	font-weight: 600;
}
.benzer-bestaetigung .benzer-tafel__inhalt table { width: 100%; }
.benzer-bestaetigung__hinweis {
	background: var(--wp--preset--color--flaeche);
	border-left: 3px solid var(--wp--preset--color--marke);
	padding: 1rem 1.2rem;
	font-size: var(--wp--preset--font-size--klein);
}
.benzer-bestaetigung__hinweis p:last-child { margin-bottom: 0; }
.benzer-bestaetigung__adressen address { font-style: normal; line-height: 1.6; }

/* ---------------------------------------------------------------- Kontaktkarte */

.benzer-kontakt { align-items: flex-start; }
.benzer-kontaktkarte {
	border: 1px solid var(--wp--preset--color--linie);
	border-top: 2px solid var(--wp--preset--color--tinte);
	background: var(--wp--preset--color--flaeche);
	padding: 1.4rem 1.5rem;
}
.benzer-kontaktkarte__kopf {
	margin: 0 0 1rem !important;
	font-size: var(--wp--preset--font-size--titel-s) !important;
	border-top: 0 !important;
	padding-top: 0 !important;
}
.benzer-kontaktkarte__block {
	margin: 0 0 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--linie);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.6;
	max-width: none;
}
.benzer-kontaktkarte__block:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.benzer-kontaktkarte__block span {
	display: block;
	font-size: var(--wp--preset--font-size--winzig);
	text-transform: uppercase;
	letter-spacing: .07em;
	font-weight: 650;
	color: var(--wp--preset--color--gedaempft);
	margin-bottom: .3rem;
}
.benzer-kontaktkarte__block a { color: var(--wp--preset--color--marke); text-decoration: none; font-variant-numeric: tabular-nums; }
.benzer-kontaktkarte__block a:hover { text-decoration: underline; }

/* Hinweis auf fehlenden Inhalt, damit er nicht wie Text aussieht */
.benzer-platzhalter {
	background: #FFF6E0;
	border-left: 3px solid #C08A1E;
	padding: .9rem 1.1rem;
	font-size: var(--wp--preset--font-size--klein);
	color: #6B4E0A;
}

@media (max-width: 782px) {
	.benzer-seiteninhalt { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20); }
	.benzer-seitenkopf { padding-top: var(--wp--preset--spacing--30) !important; padding-bottom: var(--wp--preset--spacing--30) !important; }
}

/* ---------------------------------------------------------------- Datentabelle */

.benzer-daten { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--klein); }
.benzer-daten th, .benzer-daten td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--wp--preset--color--linie); vertical-align: top; }
.benzer-daten th { width: 38%; font-weight: 600; color: var(--wp--preset--color--gedaempft); }
.benzer-daten td { font-variant-numeric: tabular-nums; }
.benzer-daten tr:last-child th, .benzer-daten tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- Fussbereich */

.benzer-fuss {
	background: var(--wp--preset--color--tinte);
	color: #C9C9C9;
	font-size: var(--wp--preset--font-size--klein);
}
.benzer-fuss a { color: #C9C9C9; text-decoration: none; }
.benzer-fuss a:hover { color: #fff; text-decoration: underline; }
.benzer-fuss h2, .benzer-fuss h3 {
	color: #fff;
	font-size: var(--wp--preset--font-size--winzig);
	text-transform: uppercase;
	letter-spacing: .09em;
	font-weight: 650;
	margin-bottom: .9rem;
}
.benzer-fuss__schluss {
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: var(--wp--preset--font-size--winzig);
	color: #8A8A8A;
}

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

.benzer-b2b {
	background: var(--wp--preset--color--flaeche);
	border-left: 3px solid var(--wp--preset--color--tuerkis);
	padding: 1rem 1.25rem;
	font-size: var(--wp--preset--font-size--klein);
}

/* Werkbank-Abschnitt farbig statt grau */
.benzer-werkbank {
	background: var(--wp--preset--color--flaeche) !important;
}
.benzer-empfehlung__kuerzel { background: var(--wp--preset--color--tuerkis); }
.benzer-empfehlung__zahl { color: var(--wp--preset--color--marke-dunkel); }

/* Beratungsstreifen als farbiger Abschluss */
/* Die Beratungsleiste war blau und hob sich damit von der dunklen Fusszeile
   darunter ab. Schwarz auf Schwarz waeren es zwei Baender, die zu einem
   verschmelzen, getrennt nur durch eine haarfeine Fuge. Deshalb steht sie
   jetzt hell: erst die ruhige Flaeche, dann der dunkle Abschluss. */
.benzer-beratung {
	background: var(--wp--preset--color--flaeche);
	border-top: 1px solid var(--wp--preset--color--linie);
}
.benzer-beratung__zusatz { color: var(--wp--preset--color--gedaempft) !important; }

/* Bewusst dezent: Preiszusatz im Shop */
.woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* ==================================================================
   Handy und Tablet

   Gemessen am 20.08.2026 bei 390 px Breite: Kopfbereich 399 px,
   Markenband 596 px, erstes Produkt erst nach 2352 px Scrollen. In einem
   Shop ist das der eigentliche Fehler, deshalb wird oben zusammengestrichen
   und der Katalog zweispaltig.
   ================================================================== */

@media (max-width: 782px) {

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

	.benzer-kopf__leiste { font-size: .6875rem; }
	/* Die Dienstlinks kosten auf dem Handy eine ganze Zeile und werden dort
	   praktisch nie angetippt. Telefon und Fachbetriebs-Hinweis bleiben. */
	.benzer-kopf__leiste .wp-block-group > p:first-child { display: none; }
	.benzer-kopf__leiste .wp-block-group { justify-content: center; }

	.benzer-kopf__haupt { padding-top: .8rem !important; padding-bottom: .8rem !important; }
	.benzer-kopf__haupt > .wp-block-group { gap: .7rem; }
	.benzer-logo img { max-height: 34px; }

	/* Suche ueber die volle Breite, sie ist der wichtigste Einstieg */
	.benzer-suche { flex: 1 1 100%; max-width: none; order: 3; }
	.benzer-kopf__konto { gap: .8rem; font-size: var(--wp--preset--font-size--winzig); }

	.benzer-warenleiste__nav a { padding: .65rem .7rem; }

	/* ---- Markenband flacher ---- */

	.benzer-band {
		padding-top: var(--wp--preset--spacing--30) !important;
		padding-bottom: var(--wp--preset--spacing--30) !important;
	}
	.benzer-band .wp-block-columns { gap: var(--wp--preset--spacing--30) !important; }
	.benzer-band__text { font-size: var(--wp--preset--font-size--normal) !important; }

	/* Eckdaten zweispaltig statt vier Zeilen untereinander */
	.benzer-eckdaten { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
	.benzer-eckdaten > div { padding: .4rem 0; }
	.benzer-eckdaten > div:nth-child(2) { border-top: 1px solid var(--wp--preset--color--linie); }
	.benzer-band .benzer-eckdaten > div:nth-child(2) { border-top-color: rgba(255,255,255,.28); }

	/* ---- Reihenfolge: Produkte vor das Verzeichnis ----

	   Am Schreibtisch ist das Sortimentsverzeichnis der schnelle Einstieg und
	   steht deshalb oben. Auf dem Handy wird es einspaltig und schiebt mit 18
	   Eintraegen das erste Produkt weit nach unten. Wer mit dem Telefon in
	   einen Shop kommt, will Produkte sehen, nicht ein Inhaltsverzeichnis.
	   Deshalb tauschen die beiden Abschnitte hier die Plaetze. */
	main.wp-block-group { display: flex; flex-direction: column; }
	.benzer-band                     { order: 1; }
	.benzer-abschnitt--katalog       { order: 2; }
	.benzer-abschnitt--verzeichnis   { order: 3; }
	.benzer-werkbank                 { order: 4; }
	.benzer-beratung                 { order: 5; }

	/* ---- Katalog zweispaltig ---- */

	.benzer-katalog {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--20);
	}
	.benzer-karte__name { font-size: var(--wp--preset--font-size--klein); }
	.benzer-karte__kopf { font-size: .625rem; }
	.benzer-karte__nummer { font-size: .625rem; }
	.benzer-karte__bild { margin-bottom: .5rem; }
	.benzer-karte__foto { padding: 8%; }
	/* Einstiegskachel nimmt auf dem Handy die volle Breite */
	.benzer-einstieg { grid-column: 1 / -1; padding: 1.1rem; }

	/* ---- Tippziele vergroessern ---- */

	.benzer-verzeichnis a { padding: .75rem 0; }
	.benzer-warengruppen li { padding: .6rem 0; }
	.benzer-fuss a { display: inline-block; padding: .3rem 0; }
	.benzer-fuss .wp-block-list li { margin-bottom: .2rem; }

	/* ---- Produktseite untereinander ---- */

	.benzer-galerie { position: static; padding: 1rem; }
	.benzer-kaufbox { padding: 1.1rem; }
	.benzer-kaufbox__aktion button[type="submit"] { min-width: 0; width: 100%; }
	.benzer-kaufbox__aktion form.cart,
	.benzer-kaufbox__aktion .woocommerce-variation-add-to-cart { width: 100%; }

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

	.benzer-abschnitt { padding-top: var(--wp--preset--spacing--30) !important; padding-bottom: var(--wp--preset--spacing--30) !important; }
	.benzer-werkbank { padding-top: var(--wp--preset--spacing--40) !important; padding-bottom: var(--wp--preset--spacing--40) !important; }
	.benzer-beratung__kontakt { text-align: left; }
}

@media (max-width: 430px) {
	/* Auf sehr schmalen Geraeten bleibt der Warenkorbbetrag weg, das Symbol reicht */
	.benzer-kopf__konto .wc-block-mini-cart__amount { display: none; }
}

/* ---------------------------------------------------------------- Kasse auf dem Handy

   Gemessen am 21.08.2026 bei 390 px: kein waagerechtes Scrollen, aber die
   Schrittanzeige brach um und liess das Trennzeichen am Zeilenende hängen,
   unter dem Titelband klaffte eine Lücke, und der Bestellknopf war mit 43 px
   knapp unter der üblichen Mindesthöhe für Tippziele. */

@media (max-width: 782px) {
	.benzer-schritte {
		gap: .6rem;
		font-size: .625rem;
		letter-spacing: .04em;
	}
	.benzer-schritte span:not(:last-child)::after { margin-left: .4rem; }

	.benzer-kasse,
	.benzer-bestaetigung { padding-top: var(--wp--preset--spacing--20) !important; }

	/* Tippziele an der Kasse gross genug */
	.wc-block-components-checkout-place-order-button,
	.wc-block-cart__submit-button {
		min-height: 48px;
		font-size: var(--wp--preset--font-size--klein) !important;
	}
	.wc-block-components-radio-control__option { min-height: 48px; }
	.wc-block-components-quantity-selector button { min-width: 40px; min-height: 40px; }
}

/* ==================================================================
   Mobile Fussnavigation

   Aufbau übernommen von treffpunkt-bayrischzell.de: schwebende Pillenleiste
   unten, nicht randlos, milchiger Hintergrund mit Weichzeichner, je Eintrag
   Symbol und Beschriftung, aktiver Eintrag in der Markenfarbe. Dort Grün,
   hier Benzer-Blau. Der Warenkorb trägt zusätzlich eine Zahl, weil das die
   Angabe ist, die unterwegs zählt.
   ================================================================== */

.benzer-mobilnav { display: none; }

@media (max-width: 782px) {
	.benzer-mobilnav {
		display: flex;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		/* Abstand zur Systemleiste auf Geräten mit abgerundeten Ecken */
		bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
		z-index: 90;
		width: min(440px, calc(100% - 24px));
		/* Waagerecht mehr Luft, sonst klebt der erste Eintrag am Pillenrand */
		padding: 6px 10px;
		background: rgba(255,255,255,.82);
		-webkit-backdrop-filter: blur(18px) saturate(1.5);
		backdrop-filter: blur(18px) saturate(1.5);
		border: 1px solid rgba(17,17,17,.08);
		border-radius: 22px;
		box-shadow: 0 6px 24px -8px rgba(17,17,17,.28), 0 2px 6px rgba(17,17,17,.06);
	}

	.benzer-mobilnav__punkt {
		position: relative;
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: 48px;
		padding: 7px 3px 6px;
		color: var(--wp--preset--color--gedaempft);
		font-size: .66rem;
		font-weight: 600;
		letter-spacing: .01em;
		text-decoration: none;
		border-radius: 17px;
		transition: color .15s ease, background .15s ease;
	}
	/* Symbol und Zahl bilden eine eigene Ebene, damit die Zahl die
	   Beschriftung nicht nach unten schiebt.

	   Gemessen am 21.08.2026: Das Symbol sass exakt 25 px links der Mitte,
	   also die halbe Differenz zwischen Beschriftungsbreite (73) und
	   Symbolbreite (23). Es wurde am linken Rand ausgerichtet, obwohl
	   align-items auf center stand. Deshalb hier zusätzlich margin-inline:auto
	   und text-align:center, das erzwingt die Mitte unabhängig davon. */
	.benzer-mobilnav__punkt { text-align: center; }
	.benzer-mobilnav__symbol {
		position: relative;
		display: block;
		width: 23px;
		height: 23px;
		margin-inline: auto;
		line-height: 0;
	}
	.benzer-mobilnav__punkt svg { width: 23px; height: 23px; display: block; margin-inline: auto; }
	.benzer-mobilnav__text { display: block; width: 100%; line-height: 1.2; text-align: center; }
	/* Die Leiste liegt im Fussbereich und erbte dessen Regel
	   `.benzer-fuss a:hover { color: #fff }`. Beim Überfahren wurde der Text
	   dadurch weiss auf dem fast weissen Grund der Leiste, also unlesbar.
	   Deshalb hier alle Zustaende ausdruecklich und mit genug Gewicht setzen. */
	.benzer-fuss .benzer-mobilnav__punkt,
	.benzer-mobilnav__punkt { color: var(--wp--preset--color--gedaempft); }

	.benzer-fuss .benzer-mobilnav__punkt.is-aktiv,
	.benzer-mobilnav__punkt.is-aktiv { color: var(--wp--preset--color--marke); }

	.benzer-fuss .benzer-mobilnav__punkt:hover,
	.benzer-mobilnav__punkt:hover {
		color: var(--wp--preset--color--marke);
		background: var(--wp--preset--color--marke-hell);
		text-decoration: none;
	}
	.benzer-fuss .benzer-mobilnav__punkt:active,
	.benzer-mobilnav__punkt:active {
		color: var(--wp--preset--color--marke-dunkel);
		background: var(--wp--preset--color--tuerkis-hell);
	}
	.benzer-mobilnav__punkt:focus-visible {
		outline: 2px solid var(--wp--preset--color--marke);
		outline-offset: -2px;
	}

	/* Zahl am Warenkorb */
	.benzer-mobilnav__zahl {
		position: absolute;
		top: -6px;
		left: 12px;
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		display: grid;
		place-items: center;
		background: var(--wp--preset--color--signal);
		color: #fff;
		font-size: .58rem;
		font-weight: 700;
		line-height: 1;
		border-radius: 9px;
		box-shadow: 0 0 0 2px rgba(255,255,255,.9);
	}
}

@media (max-width: 360px) {
	.benzer-mobilnav__punkt { font-size: .6rem; gap: 2px; }
	.benzer-mobilnav__punkt svg { width: 21px; height: 21px; }
}

/* ---------------------------------------------------------------- Bewegung aus */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

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

.benzer-suchseite__titel {
	font-weight: 650; font-size: var(--wp--preset--font-size--klein);
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--wp--preset--color--gedaempft);
	margin: 0 0 .6rem;
}
.benzer-suchseite__anzahl { color: var(--wp--preset--color--gedaempft); margin: 0 0 1.2rem; }

.benzer-suchseite__gruppen { margin-bottom: 2rem; }
.benzer-suchseite__gruppen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.benzer-suchseite__gruppen li {
	border: 1px solid var(--wp--preset--color--linie); border-radius: 999px;
	padding: .45rem 1rem; font-size: var(--wp--preset--font-size--klein);
}
.benzer-suchseite__gruppen a { text-decoration: none; color: inherit; font-weight: 650; }
.benzer-suchseite__gruppen a:hover { color: var(--wp--preset--color--marke); }
.benzer-suchseite__gruppen span { color: var(--wp--preset--color--gedaempft); }

.benzer-suchseite__leer {
	background: var(--wp--preset--color--flaeche);
	border-left: 3px solid var(--wp--preset--color--marke);
	padding: 1.4rem 1.6rem; margin-bottom: 2.5rem;
}
.benzer-suchseite__leer p { margin: 0 0 .5rem; }
.benzer-suchseite__leer p:last-child { margin-bottom: 0; }

/* Vorschlaege waehrend des Tippens.
   Die Huelle ist absolut positioniert, damit die Liste ueber dem Inhalt
   schwebt und das Seitenlayout beim Tippen nicht springt. */
/* Bezugsrahmen ist das Suchformular selbst, nicht ein eingeschobenes
   Element neben dem Feld. Siehe Kommentar in assets/js/suche.js. */
.benzer-vorschlag { position: relative; }
.benzer-vorschlag__liste {
	position: absolute; top: calc(100% + .35rem); left: 0; right: 0; z-index: 60;
	background: #fff; border: 1px solid var(--wp--preset--color--linie);
	border-radius: 6px; box-shadow: 0 12px 30px rgba(17, 17, 17, .13);
	max-height: 70vh; overflow-y: auto; padding: .4rem 0;
}
.benzer-vorschlag__titel {
	margin: .5rem 0 .25rem; padding: 0 .9rem;
	font-size: var(--wp--preset--font-size--winzig); font-weight: 650;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--wp--preset--color--gedaempft);
}
.benzer-vorschlag__punkt {
	display: flex; align-items: center; gap: .75rem;
	padding: .5rem .9rem; text-decoration: none; color: inherit;
}
.benzer-vorschlag__punkt:hover,
.benzer-vorschlag__punkt.is-aktiv { background: var(--wp--preset--color--flaeche); }
.benzer-vorschlag__punkt img {
	width: 40px; height: 40px; object-fit: contain; flex: 0 0 40px;
	background: #fff; border: 1px solid var(--wp--preset--color--linie); border-radius: 4px;
}
.benzer-vorschlag__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.benzer-vorschlag__text strong { font-weight: 650; font-size: .95rem; }
.benzer-vorschlag__text span {
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
	font-variant-numeric: tabular-nums;
}
.benzer-vorschlag__preis {
	flex: 0 0 auto; font-size: .9rem; font-weight: 650; white-space: nowrap;
}
.benzer-vorschlag__leer { padding: .9rem; margin: 0; color: var(--wp--preset--color--gedaempft); }
.benzer-vorschlag__alle {
	display: block; padding: .7rem .9rem; margin-top: .3rem;
	border-top: 1px solid var(--wp--preset--color--linie);
	font-size: var(--wp--preset--font-size--klein); font-weight: 650;
	color: var(--wp--preset--color--marke); text-decoration: none;
}
.benzer-vorschlag__alle:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Preisfilter */

/* Der Filter steht in der 230 Pixel schmalen Seitenspalte. Deshalb umbrechend
   aufgebaut statt in einer Reihe: die beiden Felder nebeneinander, alles
   Weitere darunter. In einem breiten Container laeuft er von selbst in eine
   Zeile. */
.benzer-preisfilter {
	display: flex; align-items: flex-end; flex-wrap: wrap; gap: .6rem;
	padding: 1rem; margin: 1.6rem 0;
	background: var(--wp--preset--color--flaeche);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 4px;
}
.benzer-preisfilter__titel {
	flex-basis: 100%;
	font-weight: 650; font-size: var(--wp--preset--font-size--klein);
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--wp--preset--color--gedaempft);
	margin-bottom: .2rem;
}
.benzer-preisfilter__feld { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 5rem; min-width: 0; }
.benzer-preisfilter__feld span {
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
}
.benzer-preisfilter__feld input {
	width: 100%; padding: .45rem .6rem;
	border: 1px solid var(--wp--preset--color--linie); border-radius: 3px;
	background: #fff; font-variant-numeric: tabular-nums;
}
.benzer-preisfilter__feld input:focus {
	outline: 2px solid var(--wp--preset--color--marke); outline-offset: 1px;
}
.benzer-preisfilter__waehrung {
	padding-bottom: .5rem; color: var(--wp--preset--color--gedaempft);
	font-size: var(--wp--preset--font-size--klein);
}
.benzer-preisfilter button {
	flex: 1 1 auto;
	padding: .5rem 1.1rem; border: 0; border-radius: 3px; cursor: pointer;
	background: var(--wp--preset--color--marke); color: #fff; font-weight: 650;
}
.benzer-preisfilter button:hover { filter: brightness(.93); }
.benzer-preisfilter__zurueck {
	padding-bottom: .6rem; font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--marke);
}
/* Der Hinweis rutscht ans rechte Ende, damit er nicht zwischen den
   Bedienelementen klebt. */
.benzer-preisfilter__hinweis {
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--winzig);
	color: var(--wp--preset--color--gedaempft);
}

/* Die Waehrungsangabe braucht in der schmalen Spalte keine eigene Zeile */
.benzer-preisfilter__waehrung { padding-bottom: .55rem; }
.benzer-preisfilter__zurueck { flex-basis: 100%; padding: 0; }


/* ===========================================================================
   Verweise im schwarzweissen System

   Solange die Marke blau war, hat die Farbe gezeigt, was anklickbar ist:
   schwarzer Text, blauer Verweis. Diese Farbe gibt es nicht mehr. Ohne Ersatz
   waeren Verweise und Fliesstext nicht mehr zu unterscheiden und jeder
   Beruehrungszustand, der von Tinte auf Marke wechselte, waere Schwarz auf
   Schwarz, also unsichtbar.

   Diese Aufgabe uebernimmt hier die Unterstreichung. Im Ruhezustand duenn und
   hellgrau, bei Beruehrung in voller Textfarbe. Das ist die uebliche Loesung
   fuer einfarbige Gestaltung und typografisch sauberer als eine Ersatzfarbe.
   =========================================================================== */

/* Titel, die erst bei Beruehrung als Verweis auftreten sollen */
.benzer-produkt__name a:hover,
.benzer-karte__name a:hover,
.benzer-karte .benzer-karte__gruppe a:hover,
.benzer-empfehlung__name a:hover,
.benzer-warengruppen a:hover,
.benzer-verzeichnis a:hover .benzer-verzeichnis__name,
.benzer-sortiment__kachel:hover .benzer-sortiment__name {
	color: var(--wp--preset--color--tinte);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}

/* Verweise, die dauerhaft als solche erkennbar sein muessen */
.benzer-abschnitt__hinweis a,
.benzer-beratung__kontakt a,
.benzer-kontaktkarte__block a,
.benzer-produkt-warengruppen a,
.benzer-kassenfuss__links a {
	color: var(--wp--preset--color--tinte);
	text-decoration: underline;
	text-decoration-color: #C9C9C9;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
}
.benzer-abschnitt__hinweis a:hover,
.benzer-beratung__kontakt a:hover,
.benzer-kontaktkarte__block a:hover,
.benzer-produkt-warengruppen a:hover,
.benzer-seitenkopf__krume a:hover,
.benzer-kassenfuss__links a:hover {
	text-decoration-color: currentColor;
}

/* Fliesstext auf den Inhaltsseiten, etwa Datenschutz und AGB */
.benzer-inhalt a,
.wp-block-post-content a {
	color: var(--wp--preset--color--tinte);
	text-decoration: underline;
	text-decoration-color: #B4B4B4;
	text-underline-offset: .16em;
}
.benzer-inhalt a:hover,
.wp-block-post-content a:hover { text-decoration-color: currentColor; }

/* Was aktiv ist, zeigt sich durch Gewicht statt durch Farbe */
.benzer-warengruppen li.is-aktiv a,
.benzer-schritte .is-aktiv,
.benzer-mobilnav__punkt.is-aktiv {
	color: var(--wp--preset--color--tinte);
	font-weight: 700;
}

/* Die kleine Funktionsbeschriftung war blau. Schwarz waere zu laut fuer eine
   Nebenzeile, deshalb steht sie gedaempft und lebt von der Sperrung. */
.benzer-marke { color: var(--wp--preset--color--gedaempft); }

/* Das neue Logo ist gestapelt und damit deutlich hoeher als das alte Band.
   Der Kopf braucht dafuer mehr Luft, sonst klebt das Zeichen an den Kanten. */
.wp-block-site-logo img { display: block; }

/* ---------------------------------------------------------------------------
   Logo in der Fusszeile

   Die Fusszeile steht auf Tinte, das Logo ist ebenfalls Tinte. Ohne Eingriff
   waere es dort schlicht unsichtbar. WordPress kennt nur ein Logo pro Seite,
   deshalb wird es hier umgekehrt statt ein zweites Bild einzusetzen. Das
   funktioniert exakt, weil das Zeichen reines Einfarbig ist: aus #111111
   wird #EEEEEE. Bei einem farbigen Logo waere dieser Weg falsch.
   --------------------------------------------------------------------------- */
.benzer-fuss .wp-block-site-logo img {
	filter: invert(1);
	max-height: 60px;
	width: auto;
}

/* ---------------------------------------------------------------------------
   Listenstil is-style-benzer-liste

   Der Name steht seit dem Aufbau in parts/footer.html, den zugehoerigen Stil
   gab es nie. Die Rechtliches-Spalte in der Fusszeile stand deshalb mit den
   Standard-Aufzaehlungspunkten von WordPress da, neben der Sortiments-Spalte,
   die ohne auskommt. Beim Durchsehen nach dem Farbwechsel aufgefallen.
   --------------------------------------------------------------------------- */
.is-style-benzer-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}
.is-style-benzer-liste li { margin: 0; }
.is-style-benzer-liste a { text-decoration: none; }
.is-style-benzer-liste a:hover { text-decoration: underline; text-underline-offset: .18em; }

/* Die Brotkrume ist Nebennavigation und bleibt deshalb gedaempft. Erkennbar
   wird sie durch die Unterstreichung, nicht durch mehr Schwaerze. */
.benzer-seitenkopf__krume a {
	color: var(--wp--preset--color--gedaempft);
	text-decoration: underline;
	text-decoration-color: #C9C9C9;
	text-underline-offset: .18em;
}
.benzer-seitenkopf__krume a:hover {
	color: var(--wp--preset--color--tinte);
	text-decoration-color: currentColor;
}

/* ===========================================================================
   Akzentfarbe

   Rueckmeldung des Kunden: der Shop wirkt zu schwarz. Statt die Gestaltung
   wieder einzufaerben bekommt die Farbe hier eine klare Aufgabe:

       Schwarz traegt die Marke, Blau traegt die Interaktion.

   Schwarz bleibt also in Flaechen, Schrift und Struktur. Blau erscheint nur
   dort, wo etwas passiert: Schaltflaechen, aktive Zustaende, die Kante ueber
   einem Kaufbereich. Das bringt Farbe zurueck, ohne dass das Logo mit dem
   Hintergrund konkurriert, und macht nebenbei die Bedienung deutlicher.

   Es ist bewusst das alte Markenblau #006AB2 und keine neu erfundene Farbe.
   Der Kunde hat sich damit identifiziert, es steht im alten Signet und auf
   seinen Drucksachen.
   =========================================================================== */

/* Hauptschaltflaechen */
.benzer-suche .wp-block-search__button,
.benzer-kaufbox button[type="submit"],
.benzer-kaufbox .single_add_to_cart_button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--wp--preset--color--akzent) !important;
	border-color: var(--wp--preset--color--akzent) !important;
}
.benzer-suche .wp-block-search__button:hover,
.benzer-kaufbox button[type="submit"]:hover,
.benzer-kaufbox .single_add_to_cart_button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: #00538C !important;
	border-color: #00538C !important;
}

/* Kanten, die einen Handlungsbereich einleiten */
.benzer-abschnitt__kopf::after,
.benzer-seitenkopf::before {
	background: var(--wp--preset--color--akzent);
}
.benzer-kaufbox,
.benzer-kontaktkarte {
	border-top-color: var(--wp--preset--color--akzent);
}

/* Was aktiv ist oder beruehrt wird */
.benzer-warengruppen li.is-aktiv a,
.benzer-schritte .is-aktiv,
.benzer-mobilnav__punkt.is-aktiv {
	color: var(--wp--preset--color--akzent);
}
.benzer-produkt__name a:hover,
.benzer-karte__name a:hover,
.benzer-karte .benzer-karte__gruppe a:hover,
.benzer-empfehlung__name a:hover,
.benzer-warengruppen a:hover,
.benzer-verzeichnis a:hover .benzer-verzeichnis__name,
.benzer-sortiment__kachel:hover .benzer-sortiment__name {
	color: var(--wp--preset--color--akzent);
}
.benzer-inhalt a:hover,
.wp-block-post-content a:hover,
.benzer-abschnitt__hinweis a:hover,
.benzer-beratung__kontakt a:hover,
.benzer-kontaktkarte__block a:hover,
.benzer-seitenkopf__krume a:hover {
	color: var(--wp--preset--color--akzent);
	text-decoration-color: var(--wp--preset--color--akzent);
}

/* Der Zaehler am Warenkorb, die einzige Stelle im Kopf, die Farbe braucht.
   
   Die Schriftfarbe muss ausdruecklich mit gesetzt werden. Beim ersten Anlauf
   stand hier nur der Hintergrund, und der Zaehler war schlagartig unsichtbar:
   WooCommerce faerbt die Schrift des Abzeichens aus derselben Quelle wie die
   Flaeche, gemessen ergab beides rgb(0,106,178). Die Ziffer war da, nur blau
   auf blau. Michael ist es sofort aufgefallen. */
.benzer-kopf__konto .wc-block-mini-cart__badge,
.benzer-warenkorb__zahl,
.benzer-mobilnav__zahl {
	background: var(--wp--preset--color--akzent) !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Fusszeile in der Akzentfarbe

   Der tiefere Ton aus dem Heldenband, nicht derselbe. Das Band oben laeuft
   von #0071B7 nach #00568F, die Fusszeile nimmt dieses Ende auf. Die Seite
   wird damit nach unten hin dunkler, statt oben und unten dieselbe Flaeche
   zu wiederholen.

   Flach und ohne Verlauf: eine schraeg verlaufende Flaeche wirkt in einer
   Fusszeile voller Spalten und Linien unruhig.
   --------------------------------------------------------------------------- */
.benzer-fuss {
	background: #00568F;
	color: rgba(255,255,255,.86);
}
.benzer-fuss a { color: rgba(255,255,255,.86); }
.benzer-fuss a:hover { color: #fff; }

/* Die Spaltenueberschriften stehen sonst in Gedaempft, das ist auf Blau zu
   dunkel. Sie leben hier von der Sperrung, nicht von der Farbe. */
.benzer-fuss .benzer-marke { color: rgba(255,255,255,.72) !important; }

/* Trennlinien und die Artikelzahlen in der Sortimentsspalte.
   Die Zahlen stehen sonst in Grau (#8A8A8A). Nachgemessen ergab das auf dem
   Blau einen Kontrast von 2,23 zu 1, also klar zu dunkel. Geraten haette ich
   das nicht, im Bildschirmfoto sehen sie unauffaellig aus. */
.benzer-fuss li { border-color: rgba(255,255,255,.22) !important; }
.benzer-fuss .benzer-warengruppen span { color: rgba(255,255,255,.72) !important; }

/* Die Schlusszeile (Urheberrecht, Preishinweis) stand ebenfalls in Grau.
   Sie war der zweite Fund und wurde beim ersten Messen verdeckt, weil ich
   nach Farbe UND Schriftgroesse zusammengefasst hatte und die Artikelzahlen
   denselben Platz belegten. Beim zweiten Durchgang kam sie zum Vorschein. */
.benzer-fuss .benzer-fuss__schluss p { color: rgba(255,255,255,.68) !important; }

/* Das Logo wird weiterhin umgekehrt. Aus #111111 wird #EEEEEE, das steht auf
   dem Blau genauso wie vorher auf der Tinte. */