/*
 * Modelltoys Core — Filtersuche, Merkliste, Schnellansicht.
 *
 * Die Farben kommen aus den Variablen des Themes, mit Rueckfallwerten fuer den
 * Fall, dass ein anderes Theme aktiv ist.
 *
 * Grundsatz fuer alle Bedienelemente hier: Die Zielgruppe sind Sammler ab 60,
 * die nach eigener Auskunft bis zu zwei Stunden am Stueck stoebern. Deshalb
 * sichtbare Knoepfe statt Hover-Geheimnisse, mindestens 40 Pixel Klickflaeche
 * und Beschriftungen statt reiner Symbole.
 */

/* ===========================================================================
   1. Filtersuche
   ======================================================================== */

.mc-filter {
	border: 1px solid var(--mt-blau, #3493cd);
	background: var(--mt-blau-hauch, #eaf4fa);
	margin: 0 0 var(--mt-r4, 16px);
}

.mc-filter-titel {
	/* Keine Ueberschrift mehr, sondern eine Angabe: Der Kasten hat seinen
	   Titel schon im Klappenkopf. */
	margin: 0 0 var(--mt-r3, 12px);
	font-size: 14.5px;
	font-weight: 400;
	color: var(--mt-text-leise, #5c6b78);
}

.mc-filter-felder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--mt-r3, 12px);
	padding: var(--mt-r4, 16px);
}

.mc-filter .mc-feld { margin: 0; }
.mc-filter .mc-feld-breit { grid-column: span 2; }
.mc-filter .mc-feld-schmal { max-width: 190px; }

.mc-filter label {
	display: block;
	margin-bottom: 4px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mt-text, #1c2733);
}

/* Die Felder kommen aus dem Theme (style.css, Abschnitt 9). Hier stand bis
   31.08.2026 eine zweite, drei Pixel niedrigere Definition derselben Felder —
   die Quelle der ungleichen Feldhoehen im ganzen Shop.

   Falls dieses Plugin je ohne das Theme laufen soll, gehoert eine
   Ersatzdefinition hierher. Solange es das nicht tut, ist eine zweite
   Definition nur eine zweite Wahrheit. */
.mc-filter select { padding-right: 28px; }

.mc-filter-unten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mt-r4, 16px);
	padding: 0 var(--mt-r4, 16px) var(--mt-r4, 16px);
}

.mc-haken {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 14.5px;
	font-weight: 400;
	cursor: pointer;
}
.mc-haken input { width: 18px; height: 18px; margin: 0; }

/* Haken links, Knoepfe rechts — in EINER Zeile (21.09.2026, Marcel: der
   Knopf "Zuruecksetzen" sprang in die naechste Zeile). Die Haken duerfen
   untereinander umbrechen, die Knoepfe bleiben zusammen oben rechts. */
.mc-filter-haken {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mt-r2, 8px) var(--mt-r4, 16px);
}
.mc-filter-knoepfe { margin-left: auto; display: flex; gap: var(--mt-r2, 8px); flex: 0 0 auto; flex-wrap: nowrap; }

/* ZURUECKSETZEN: Die Farben ueber die Variablen des Theme-Knopfs setzen,
   nicht direkt. Die Theme-Regel ".woocommerce a.button:visited" faerbt die
   Schrift mit var(--knopf-schrift) — weiss. Der Link zeigt auf den Katalog,
   der fast immer schon besucht ist: weisse Schrift auf weissem Grund, lesbar
   erst beim Darueberfahren (Marcel, 21.09.2026). */
.mc-filter .button.mc-still,
.mc-filter .button.mc-still:visited {
	--knopf-grund:   #fff;
	--knopf-rand:    var(--mt-linie-kraeftig, #a8bccd);
	--knopf-schrift: var(--mt-text, #1c2733);
	background: #fff;
	color: var(--mt-text, #1c2733);
	border: 1px solid var(--mt-linie-kraeftig, #a8bccd);
}
.mc-filter .button.mc-still:hover,
.mc-filter .button.mc-still:focus-visible {
	--knopf-grund:   var(--mt-flaeche, #f4f7fa);
	--knopf-rand:    var(--mt-blau, #3493cd);
	--knopf-schrift: var(--mt-text, #1c2733);
	background: var(--mt-flaeche, #f4f7fa);
	border-color: var(--mt-blau, #3493cd);
	color: var(--mt-text, #1c2733);
}

.mc-gesetzt { font-size: 14.5px; color: var(--mt-text-leise, #5c6b78); }
.mc-gesetzt strong { color: var(--mt-text, #1c2733); }

/* ===========================================================================
   2. Herstellerangaben auf der Produktseite
   ======================================================================== */

.mc-gpsr-block {
	border: 1px solid var(--mt-linie, #d3dde5);
	background: var(--mt-flaeche, #f4f7fa);
	padding: var(--mt-r4, 16px);
	font-size: 15px;
	max-width: 60ch;
}
.mc-gpsr-block p:last-child { margin-bottom: 0; }

/* ===========================================================================
   3. Merken-Knopf
   ======================================================================== */

.mc-merken {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid var(--mt-linie-kraeftig, #a8bccd);
	background: rgba(255, 255, 255, 0.95);
	color: var(--mt-text, #1c2733);
	border-radius: var(--mt-r1, 4px);
	padding: 8px 12px;
	font: inherit; font-size: 13.5px; font-weight: 600;
	cursor: pointer;
	min-height: 40px;
	transition: border-color 120ms ease, color 120ms ease;
}
.mc-merken:hover { border-color: var(--mt-rot, #a8352f); color: var(--mt-rot, #a8352f); background: #fff; }
.mc-merken .mc-herz {
	width: 18px; height: 18px; flex: 0 0 auto;
	fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round;
}
.mc-merken.mc-ist-gemerkt { border-color: var(--mt-rot, #a8352f); color: var(--mt-rot, #a8352f); }
.mc-merken.mc-ist-gemerkt .mc-herz { fill: var(--mt-rot, #a8352f); stroke: var(--mt-rot, #a8352f); }
.mc-merken[aria-busy="true"] { opacity: .55; pointer-events: none; }

/* Auf der Produktseite größer und mit Beschriftung */
/* NUR der grosse Knopf in der Produktzusammenfassung.
   Ohne "> .summary >" traf diese Regel auch die Herzen in den aehnlichen
   Modellen weiter unten — die stehen im selben div.product. Der
   margin-bottom schob sie dort um acht Pixel gegen die Lupe. */
.woocommerce div.product .summary > .mc-merken {
	font-size: 15px;
	padding: 10px 16px;
	margin-bottom: var(--mt-r4, 16px);
}

/* ===========================================================================
   4. Schnellansicht-Knopf
   ======================================================================== */

.mc-schnellansicht {
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid var(--mt-linie-kraeftig, #a8bccd);
	background: rgba(255, 255, 255, 0.95);
	color: var(--mt-text, #1c2733);
	border-radius: var(--mt-r1, 4px);
	padding: 8px 12px;
	font: inherit; font-size: 13.5px; font-weight: 600;
	cursor: pointer;
	min-height: 40px;
	transition: border-color 120ms ease, color 120ms ease;
}
.mc-schnellansicht:hover { border-color: var(--mt-blau, #3493cd); color: var(--mt-blau-tief, #23668f); background: #fff; }
.mc-schnellansicht svg {
	width: 18px; height: 18px; flex: 0 0 auto;
	fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}

/* ===========================================================================
   5. Das Schnellansicht-Fenster
   ======================================================================== */

.mc-fenster {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	padding: var(--mt-r4, 16px);
	opacity: 0;
	transition: opacity 180ms ease;
}
.mc-fenster[hidden] { display: none; }
.mc-fenster.mc-ist-auf { opacity: 1; }

.mc-fenster-grund {
	position: absolute; inset: 0;
	background: rgba(15, 21, 28, 0.55);
}

/*
 * Der Kasten ist eine Spalte aus zwei Teilen: oben die Leiste mit dem
 * Schließen-Knopf, darunter der scrollende Inhalt.
 *
 * WARUM NICHT MEHR position: sticky + float: right (Stand bis 26.08.2026):
 * Ein Element, das gleichzeitig schwebt und klebt, hat in keinem Browser ein
 * verlaessliches Verhalten. Es hing halb im Titel, wanderte beim Scrollen
 * ueber den Text und stand am rechten Rand teils ausserhalb des Kastens —
 * genau das, was Marcel als "komplett komisch" beschrieben hat.
 *
 * Mit flex-direction: column ist es schlicht die erste Zeile. Sie bleibt beim
 * Scrollen stehen, weil nicht der Kasten scrollt, sondern der Inhalt darin.
 */
.mc-fenster-kasten {
	position: relative;
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--mt-linie, #d3dde5);
	box-shadow: 0 18px 50px rgba(15, 21, 28, 0.28);
	border-radius: var(--mt-r1, 4px);
	width: min(1000px, 100%);
	max-height: min(90vh, 780px);
	overflow: hidden;
	padding: 0;
	transform: translateY(14px) scale(0.985);
	transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.mc-fenster.mc-ist-auf .mc-fenster-kasten { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.mc-fenster, .mc-fenster-kasten { transition: none; }
	.mc-fenster-kasten { transform: none; }
}

/* Der Schließen-Knopf ist beschriftet und groß — ein blosses × in der Ecke
   ist für die Zielgruppe zu wenig. Er steht in einer eigenen Leiste, damit er
   beim Scrollen sichtbar bleibt und nichts ueberdeckt. */
.mc-fenster-leiste,
.mc-fenster-kasten > .mc-fenster-zu {
	flex: 0 0 auto;
	align-self: flex-end;
	margin: var(--mt-r3, 12px) var(--mt-r3, 12px) 0;
}
.mc-fenster-zu {
	position: static; float: none;
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid var(--mt-linie-kraeftig, #a8bccd);
	background: #fff; color: var(--mt-text, #1c2733);
	border-radius: var(--mt-r1, 4px);
	padding: 8px 14px; min-height: 42px;
	font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
	white-space: nowrap;
}
.mc-fenster-zu:hover { border-color: var(--mt-rot, #a8352f); color: var(--mt-rot, #a8352f); background: #fff; }
.mc-fenster-zu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.mc-fenster-inhalt {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 var(--mt-r5, 24px) var(--mt-r5, 24px);
}

.mc-laedt { color: var(--mt-text-leise, #5c6b78); padding: var(--mt-r6, 32px) 0; text-align: center; }

/* --- Inhalt der Schnellansicht ----------------------------------------- */
.mc-sa { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--mt-r5, 24px); clear: both; }

.mc-sa-haupt {
	border: 1px solid var(--mt-linie, #d3dde5);
	background: #fff;
}
.mc-sa-haupt img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 2; object-fit: contain; padding: var(--mt-r3, 12px);
}
.mc-sa-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mc-sa-klein {
	width: 66px; padding: 2px; cursor: pointer;
	border: 1px solid var(--mt-linie, #d3dde5); background: #fff;
}
.mc-sa-klein img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.mc-sa-klein:hover, .mc-sa-klein.mc-ist-aktiv { border-color: var(--mt-blau, #3493cd); border-width: 2px; padding: 1px; }

.mc-sa-text h2 { font-size: 20px; margin: 0 0 6px; line-height: 1.3; }
.mc-sa-nummer { font-size: 13.5px; color: var(--mt-text-leise, #5c6b78); margin: 0 0 var(--mt-r3, 12px); }
.mc-sa-preis { font-size: 26px; font-weight: 700; color: var(--mt-text, #1c2733); }
.mc-sa-preis .price { font-size: inherit; font-weight: inherit; }
/* Angebot wie auf der Produktseite: alter Preis klein, grau, durchgestrichen,
   neuer Preis ohne Unterstrich (21.09.2026). */
.mc-sa-preis del { font-size: 21px; color: var(--mt-text-leise, #5c6b78); font-weight: 400; }
.mc-sa-preis ins { text-decoration: none; }
.mc-sa-preishinweis { font-size: 13.5px; color: var(--mt-text-leise, #5c6b78); margin: 2px 0 var(--mt-r3, 12px); }

.mc-sa-daten { border: 1px solid var(--mt-linie, #d3dde5); margin: 0 0 var(--mt-r4, 16px); }
.mc-sa-daten > div {
	display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--mt-r3, 12px);
	padding: 8px var(--mt-r3, 12px);
	border-bottom: 1px solid var(--mt-linie, #d3dde5); font-size: 14.5px;
}
.mc-sa-daten > div:last-child { border-bottom: none; }
.mc-sa-daten > div:nth-child(odd) { background: var(--mt-flaeche, #f4f7fa); }
.mc-sa-daten dt { color: var(--mt-text-leise, #5c6b78); margin: 0; }
.mc-sa-daten dd { margin: 0; }

.mc-sa-knoepfe { display: flex; flex-wrap: wrap; gap: var(--mt-r3, 12px); align-items: flex-start; }
.mc-sa-korb { display: flex; gap: var(--mt-r2, 8px); align-items: flex-start; margin: 0; }
.mc-sa-korb .quantity input { width: 76px; text-align: center; }
.mc-sa-mehr { margin: var(--mt-r4, 16px) 0 0; font-size: 15px; }

/* ===========================================================================
   6. Die Merklisten-Seite
   ======================================================================== */

.mc-merk-kopf { margin-bottom: var(--mt-r4, 16px); }
.mc-merk-anzahl { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.mc-merk-hinweis { font-size: 14.5px; color: var(--mt-text-leise, #5c6b78); margin: 0; }
.mc-merk-leer { flex-direction: column; align-items: flex-start; }
.mc-merk-leer .button { margin-left: 0; }

/* ===========================================================================
   7. Kurzmeldung nach dem Merken
   ======================================================================== */

.mc-meldung {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
	z-index: 10000;
	background: var(--mt-dunkel, #16202b); color: #fff;
	padding: 12px 20px; border-radius: var(--mt-r1, 4px);
	font-size: 15px; font-weight: 600;
	box-shadow: 0 8px 24px rgba(15, 21, 28, 0.3);
	max-width: calc(100vw - 32px);
}
.mc-meldung.mc-fehler { background: var(--mt-rot, #a8352f); }

@media (max-width: 860px) {
	.mc-sa { grid-template-columns: minmax(0, 1fr); }
	.mc-fenster-kasten { padding: var(--mt-r4, 16px); max-height: 94vh; }
}

@media (max-width: 680px) {
	.mc-filter .mc-feld-breit { grid-column: span 1; }
	.mc-filter .mc-feld-schmal { max-width: none; }
	.mc-filter-haken { flex: 1 1 100%; }
	.mc-filter-knoepfe { margin-left: 0; width: 100%; }
	.mc-filter-knoepfe .button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.mc-merken, .mc-schnellansicht { transition: none; }
}


/* ===========================================================================
   Die Merkliste als Seite

   Zeilen statt Kacheln. Die Begruendung steht ausfuehrlich in
   class-mc-merkliste.php bei seite(): Ein Raster ist zum Stoebern da, die
   Merkliste zum Entscheiden.
   ======================================================================== */

.mc-merk-kopf {
	display: flex; flex-wrap: wrap; gap: var(--mt-r3, 12px) var(--mt-r4, 16px);
	align-items: center; justify-content: space-between;
	border-bottom: 2px solid var(--mt-dunkel, #1c2733);
	padding-bottom: var(--mt-r3, 12px);
	margin-bottom: var(--mt-r3, 12px);
}
.mc-merk-anzahl { margin: 0; font-size: 20px; }
.mc-merk-werkzeuge { display: flex; flex-wrap: wrap; gap: var(--mt-r2, 8px); }
.mc-merk-werkzeuge .button { min-height: 44px; display: inline-flex; align-items: center; }
.mc-merk-hinweis {
	font-size: 14.5px; color: var(--mt-text-leise, #5c6b78);
	margin: 0 0 var(--mt-r4, 16px);
}

.mc-merk-liste { list-style: none; margin: 0 0 var(--mt-r5, 24px); padding: 0; }

.mc-merk-zeile {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr) auto auto;
	gap: var(--mt-r4, 16px);
	align-items: center;
	border: 1px solid var(--mt-linie, #d3dde5);
	border-bottom: none;
	padding: var(--mt-r3, 12px) var(--mt-r4, 16px);
	background: #fff;
	overflow: hidden;
}
.mc-merk-zeile:last-child { border-bottom: 1px solid var(--mt-linie, #d3dde5); }
.mc-merk-zeile:hover { background: var(--mt-blau-hauch, #eef6fb); }

/* BEIM ENTFERNEN DIESELBE BEWEGUNG WIE IM MINI-WARENKORB.
   Dort gefaellt sie: kurz ausblenden, leicht schrumpfen, dann faellt die
   Zeile zusammen. Vorher lief hier eine andere Bewegung — jetzt ist es
   dieselbe, damit Entfernen sich ueberall gleich anfuehlt. */
.mc-merk-zeile.mc-geht-weg {
	opacity: 0;
	transform: scale(.94);
	transition: opacity .2s ease-in, transform .2s ease-in;
	pointer-events: none;
}
.mc-merk-zeile.mc-faellt-zu {
	overflow: hidden;
	height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	border-width: 0 !important;
	transition: opacity .2s ease-in, transform .2s ease-in,
	            height .22s ease, padding .22s ease, margin .22s ease;
}

@media (prefers-reduced-motion: reduce) {
	.mc-merk-zeile.mc-geht-weg,
	.mc-merk-zeile.mc-faellt-zu { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
	.mc-merk-zeile.mc-geht-weg { transition: none; }
}

.mc-merk-bild { display: block; border: 1px solid var(--mt-linie, #d3dde5); background: #fff; }
.mc-merk-bild img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 2; object-fit: contain;
	padding: 4px; margin: 0;
}

.mc-merk-text { min-width: 0; }
.mc-merk-marke {
	display: block; font-size: 12px; color: var(--mt-text-leise, #5c6b78);
	text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px;
}
.mc-merk-name {
	display: block; font-size: 16px; font-weight: 600; line-height: 1.35;
	color: var(--mt-text, #1c2733); text-decoration: none;
	margin-bottom: 6px;
}
.mc-merk-name:hover { color: var(--mt-blau-tief, #1d5c85); text-decoration: underline; }
.mc-merk-daten { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--mt-r2, 8px); }
.mc-merk-massstab {
	background: var(--mt-dunkel, #1c2733); color: #fff;
	font-size: 12.5px; font-weight: 700; line-height: 1.25;
	padding: 3px 9px; border-radius: var(--mt-r1, 4px);
	font-variant-numeric: tabular-nums;
}
.mc-merk-nummer { font-size: 12.5px; color: var(--mt-text-leise, #5c6b78); font-variant-numeric: tabular-nums; }

/* Mindestbreite, sonst quetscht das Raster die Spalte auf die Breite des
   laengsten Wortes und "netto zzgl. USt." bricht um. */
.mc-merk-preis { text-align: right; white-space: nowrap; min-width: 140px; }
.mc-merk-preis .price { font-size: 19px; font-weight: 700; color: var(--mt-text, #1c2733); }
.mc-merk-preis .mt-preis-zusatz { font-size: 12px; }

.mc-merk-tun { display: flex; flex-direction: column; gap: var(--mt-r2, 8px); align-items: stretch; }
.mc-merk-korb { display: flex; gap: 6px; margin: 0; }
.mc-merk-korb .quantity input { width: 68px; text-align: center; }
.mc-merk-korb .button { white-space: nowrap; min-height: 44px; }
/* Ein Symbolknopf, quadratisch. Die Beschriftung steht im title und fuer
   die Vorlesehilfe im Markup — sichtbar braucht die Tonne kein Wort. */
.mc-merk-raus {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
	width: 44px; min-width: 44px; height: 44px;
	border: 1px solid var(--mt-linie, #d3dde5);
	background: #fff; color: var(--mt-text-leise, #5c6b78);
	border-radius: var(--mt-r1, 4px);
	padding: 0;
	font: inherit; cursor: pointer;
}
.mc-merk-raus:hover { border-color: var(--mt-rot, #a8352f); color: var(--mt-rot, #a8352f); background: var(--mt-rot-hauch, #fbf0ef); }
.mc-merk-raus svg {
	width: 19px; height: 19px; fill: none; stroke: currentColor;
	stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.mc-merk-summe {
	display: flex; flex-wrap: wrap; gap: var(--mt-r3, 12px);
	align-items: baseline; justify-content: space-between;
	background: var(--mt-flaeche, #f4f7f9);
	border: 1px solid var(--mt-linie, #d3dde5);
	padding: var(--mt-r4, 16px) var(--mt-r5, 24px);
}
.mc-merk-summe-wort { font-size: 15px; color: var(--mt-text-leise, #5c6b78); }
.mc-merk-summe-zahl { font-size: 24px; font-weight: 700; text-align: right; }
.mc-merk-summe-zahl small { display: block; font-size: 13px; font-weight: 400; color: var(--mt-text-leise, #5c6b78); }
.mc-merk-fussnote { font-size: 13.5px; color: var(--mt-text-leise, #5c6b78); margin: var(--mt-r2, 8px) 0 0; }

/* --- Die leere Liste ---------------------------------------------------- */
.mc-merk-leer {
	text-align: center;
	border: 1px solid var(--mt-linie, #d3dde5);
	background: #fff;
	padding: var(--mt-r7, 48px) var(--mt-r5, 24px);
}
.mc-merk-leer-herz {
	width: 56px; height: 56px;
	fill: none; stroke: var(--mt-linie-kraeftig, #a8bccd); stroke-width: 1.4;
	margin: 0 auto var(--mt-r3, 12px);
	display: block;
}
.mc-merk-leer h2 { margin: 0 0 var(--mt-r2, 8px); font-size: 20px; }
.mc-merk-leer p { margin: 0 auto var(--mt-r5, 24px); max-width: 46ch; color: var(--mt-text-leise, #5c6b78); }
.mc-merk-leer-wege { display: flex; flex-wrap: wrap; gap: var(--mt-r3, 12px); justify-content: center; }

@media (max-width: 900px) {
	.mc-merk-zeile { grid-template-columns: 96px minmax(0, 1fr); }
	.mc-merk-preis { grid-column: 2; text-align: left; }
	.mc-merk-tun { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 520px) {
	.mc-merk-zeile { grid-template-columns: 76px minmax(0, 1fr); gap: var(--mt-r3, 12px); }
	.mc-merk-korb { flex: 1 1 100%; }
	.mc-merk-korb .button { flex: 1 1 auto; }
	.mc-merk-raus { flex: 1 1 100%; }
	.mc-merk-werkzeuge { width: 100%; }
	.mc-merk-werkzeuge .button { flex: 1 1 auto; justify-content: center; }
}

/* --- Drucken ------------------------------------------------------------
   Sammler dieser Altersgruppe drucken Listen aus und nehmen sie zur Boerse
   mit. Gedruckt gehoert alles weg, was man nicht anklicken kann. */
@media print {
	.mc-merk-werkzeuge, .mc-merk-tun, .mc-merk-hinweis { display: none !important; }
	.mc-merk-zeile { break-inside: avoid; page-break-inside: avoid; }
	.mc-merk-zeile:hover { background: none; }
}

/* Die Katalogroesse neben der Ueberschrift der Filtersuche. Kleiner und
   ruhiger als die Ueberschrift — sie beantwortet eine Frage, sie stellt
   keine. */
.mc-filter-gesamt {
	font-size: 15px;
	font-weight: 400;
	color: var(--mt-text-leise, #5c6b78);
	margin-left: 8px;
	white-space: nowrap;
}

/* ==========================================================================
   Der Hinweis ueber dem Bestellknopf — 02.09.2026
   ==========================================================================

   Der Shop fuehrt keinen Lagerstand: Erst wird geprueft, ob das Modell da
   ist, dann bekommt der Kunde die Bankverbindung. Wer das nicht weiss,
   ueberweist sofort nach der Bestellung — und wartet dann auf eine Ware,
   die vielleicht gar nicht mehr da ist.

   Deshalb steht der Hinweis direkt ueber dem Bestellknopf und nicht im
   Kleingedruckten.
   ========================================================================== */
.mc-ablaufhinweis {
	margin: 0 0 var(--mt-r3, 16px);
	padding: var(--mt-r3, 16px);
	border: 1px solid var(--mt-blau, #3493cd);
	border-radius: var(--mt-radius, 8px);
	background: var(--mt-blau-hauch, #dfeef7);
	font-size: var(--mt-s-klein, 15px);
	line-height: 1.55;
}
.mc-ablaufhinweis strong {
	display: block;
	margin-bottom: 4px;
	font-size: var(--mt-s-text, 16px);
}