/*
Theme Name: Modelltoys Austria
Theme URI: https://modelltoys-austria.at/
Description: Eigenes klassisches Theme für den Sammlermodell-Shop Modelltoys Austria. Baut den Aufbau des alten modified-eCommerce-Shops nach: Kategoriespalte links, Produktraster rechts, Filtersuche darüber. Bewusst kein Block-Theme — WooCommerce erzwingt dort den Hover-Zoom in der Produktgalerie, den der Kunde nicht will.
Author: Life Design
Author URI: https://lifedesign.at
Version: 1.27.5
Requires at least: 6.5
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: modelltoys-austria
Tags: e-commerce, two-columns, custom-menu, translation-ready
*/

/* ===========================================================================
   1. Grundwerte

   Die Kunden sind Sammler jenseits der 60, die nach Auskunft des Betreibers
   bis zu zwei Stunden am Stueck stoebern. Daraus folgt alles Weitere:
   17px Grundschrift, ruhige Kontraste, mindestens 40 Pixel Klickflaeche,
   sichtbarer Tastaturfokus — und keine Funktion, die man erst durch
   Herumfahren mit der Maus entdeckt.

   Keine Webfonts. Google Fonts wuerde die IP jedes Besuchers an einen
   Drittanbieter senden (DSGVO), selbst gehostete Schriften kosten Ladezeit
   ohne erkennbaren Gewinn.
   ======================================================================== */

:root {
	/*
	 * DIE MARKENFARBE IST DAS LOGO-BLAU — Entscheidung vom 01.09.2026.
	 *
	 * #3493cd ist exakt der Ton aus dem Logo (aus der Bilddatei gemessen:
	 * 41 % aller nicht-weissen Bildpunkte). Er traegt jetzt die Flaechen:
	 * Knopf, Servicezeile, aktive Kategorie.
	 *
	 * Weisse Schrift darauf kommt auf 3,39:1; die Richtlinie verlangt
	 * 4,5:1 fuer Text unter 19px. Das wurde vorgelegt und bewusst so
	 * entschieden: Die Marke geht vor. NICHT stillschweigend zurueck-
	 * aendern.
	 *
	 * Wo BLAUE SCHRIFT auf hellem Grund steht — Links, Hinweise —, gilt
	 * --mt-blau-schrift (#2a7bac, 4,65:1). Dort waere das Logo-Blau kein
	 * Markenzeichen, sondern nur schlechter lesbarer Text.
	 */
	--mt-blau:          #3493cd;   /* die Marke. Aus dem Logo gemessen.  */
	--mt-blau-dunkel:   #3493cd;   /* Flaechen mit weisser Schrift       */
	--mt-blau-tief:     #2a7bac;   /* Ueberfahren, Gedrueckt             */
	--mt-blau-schrift:  #2a7bac;   /* Blaue SCHRIFT auf hellem Grund.
	                                  4,65:1. Nicht dasselbe wie eine
	                                  blaue Flaeche — siehe Kommentar
	                                  oben.                              */
	--mt-blau-hauch:    #dfeef7;

	--mt-grund:         #ffffff;
	--mt-flaeche:       #f4f7fa;
	--mt-flaeche-2:     #e8eef4;
	--mt-dunkel:        #16202b;

	--mt-linie:         #d3dde5;
	--mt-linie-kraeftig:#a8bccd;

	--mt-text:          #1c2733;
	--mt-text-leise:    #5c6b78;

	--mt-gruen:         #2f7a4f;
	--mt-gruen-hauch:   #e9f4ee;
	--mt-rot:           #a8352f;
	--mt-rot-hauch:     #f9ecea;
	--mt-bernstein:     #8a5d0c;
	--mt-bernstein-hauch:#fbf3e3;

	--mt-schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	              "Helvetica Neue", Arial, sans-serif;

	--mt-breite: 1180px;
	--mt-spalte: 224px;      /* Kategoriespalte */

	--mt-r1: 4px; --mt-r2: 8px; --mt-r3: 12px; --mt-r4: 16px;
	--mt-r5: 24px; --mt-r6: 32px; --mt-r7: 48px;

	/* ==================================================================
	   DAS FEHLENDE STUECK: Masse fuer Bedienelemente.
	   ------------------------------------------------------------------
	   Bis heute stand "mindestens 40 Pixel Klickflaeche" nur im Kommentar —
	   an sieben Stellen, jedes Mal neu ausgerechnet. Daraus wurden fuenf
	   verschiedene Feldhoehen und drei Knopfhoehen fuer dieselbe Sache.
	   Ab hier ist die Vorgabe ein WERT, kein Vorsatz.

	   HOEHEN KOMMEN AUS min-height PLUS box-sizing, nie aus Innenabstand
	   plus Zeilenhoehe. Solange sich eine Hoehe aus padding und font-size
	   ergibt, verschiebt jede Schriftaenderung die Haelfte der Seite und
	   die andere Haelfte nicht.

	   Und: min-height, nicht height. An sechs Stellen stand bisher eine
	   FESTE Hoehe. Wer den Browser zoomt — und diese Kundschaft tut das —
	   dem laeuft der Text dort aus dem Kasten.
	   ================================================================== */
	--mt-klick-min:     40px;   /* Untergrenze. Nichts Anklickbares darunter. */
	--mt-hoehe-klein:   40px;   /* Fuss, Ansichtswahl, Rechtstext-Links       */
	--mt-hoehe-eng:     44px;   /* Filterbox: sieben Bedienelemente je Zeile  */
	--mt-hoehe:         48px;   /* REGELMASS: Knopf, Feld, Auswahl, Werkzeug  */
	--mt-hoehe-zeile:   52px;   /* anklickbare Zeile: Kaestchen, Klappenkopf  */
	--mt-hoehe-gross:   54px;   /* der EINE Hauptknopf je Schritt             */
	--mt-haken:         26px;   /* Kaestchen zum Anhaken UND Auswahlknopf     */

	/* Schriftstufen — acht statt zweiundzwanzig. */
	--mt-s-mini:   13px;
	--mt-s-klein:  14.5px;
	--mt-s-glatt:  15px;
	--mt-s-bedien: 16px;        /* Knopf und Feld                            */
	--mt-s-text:   17px;
	--mt-s-gross:  19px;
	--mt-s-h2:     22px;
	--mt-s-h1:     27px;

	/* Farben, die heute hart im Text stehen. */
	--mt-auf-farbe: #ffffff;    /* Schrift auf farbigem Grund (26x hart)     */
	--mt-papier:    #ffffff;    /* Grund hinter Produktbildern (11x hart)    */

	/* Kanaele fuer halbdurchsichtige Ableitungen — bisher viermal von Hand
	   aus dem Hex abgeschrieben. */
	--mt-kanal-blau:   52 147 205;
	--mt-kanal-dunkel: 22 32 43;

	/* Radien mit eigenem Namen. Bisher haengt der Standardradius an
	   --mt-r1 und ist damit an die Abstandsleiter gekettet: Wer Abstaende
	   aendert, aendert unabsichtlich jede Ecke. */
	--mt-radius:       4px;
	--mt-radius-mini:  2px;
	--mt-radius-pille: 999px;

	/* Schatten: vier statt neun, aus EINER Grundfarbe. */
	--mt-schatten-1:      0 1px 4px  rgb(var(--mt-kanal-dunkel) / .12);
	--mt-schatten-2:      0 2px 8px  rgb(var(--mt-kanal-dunkel) / .14);
	--mt-schatten-kopf:   0 4px 14px rgb(var(--mt-kanal-dunkel) / .12);
	--mt-schatten-klappe: 0 8px 28px rgb(var(--mt-kanal-dunkel) / .22);

	/* Ebenen. Bisher gab es keine Skala, nur gewachsene Zahlen. */
	--mt-ebene-karte:    3;
	--mt-ebene-klappe:  30;
	--mt-ebene-kopf:    60;
	--mt-ebene-fenster: 9000;
	--mt-ebene-sprung:  9999;
}

*, *::before, *::after { box-sizing: border-box; }

/* Sprungziele duerfen nicht unter dem klebenden Kopf verschwinden. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }

body {
	margin: 0;
	background: var(--mt-grund);
	color: var(--mt-text);
	font-family: var(--mt-schrift);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--mt-blau-schrift); }
a:hover, a:focus { color: var(--mt-blau-tief); }

/* DER FOKUSRING MUSS AUF JEDEM GRUND SICHTBAR SEIN.
   Bisher: 3px --mt-blau (#3493cd). Auf einem gefuellten Knopf in
   --mt-blau-dunkel (#2a7bac) ergibt das ein Kontrastverhaeltnis von rund
   1,6:1 — der Ring war dort praktisch nicht zu sehen. Wer mit der Tastatur
   durch die Kassa geht, wusste also an den wichtigsten Stellen nicht, wo er
   steht.

   Jetzt ein doppelter Ring: aussen dunkel, innen hell. Einer der beiden hebt
   sich immer ab — auf Weiss der dunkle, auf Blau der helle. */
:focus-visible {
	/* Auf dem neuen, helleren Knopf muss der Ring dunkler sein als zuvor,
	   sonst verschwindet er darin. --mt-text statt Blau: der Ring ist
	   kein Schmuck, er zeigt der Tastaturbedienung, wo sie steht. */
	outline: 3px solid var(--mt-text);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--mt-auf-farbe);
}
/* Auf hellem Grund braucht es den weissen Zwischenring nicht. */
body:focus-visible, .mt-inhalt :focus-visible { box-shadow: none; }

h1, h2, h3, h4 {
	margin: 0 0 var(--mt-r3);
	line-height: 1.25;
	text-wrap: balance;
	font-weight: 700;
}
h1 { font-size: 27px; }
h2 { font-size: 22px; }
h3 { font-size: 19px; }
h4 { font-size: 17px; }

p { margin: 0 0 var(--mt-r4); }

.mt-leise { color: var(--mt-text-leise); }

.mt-nur-lesehilfe {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}
.mt-sprungmarke {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--mt-blau-dunkel); color: #fff;
	padding: var(--mt-r2) var(--mt-r4);
}
.mt-sprungmarke:focus { left: 0; color: #fff; }

.mt-rahmen {
	max-width: var(--mt-breite);
	margin: 0 auto;
	padding: 0 var(--mt-r4);
}

/* ===========================================================================
   2. Kopfbereich

   NUR DER HAUPTKOPF KLEBT. Die blaue Servicezeile darueber scrollt weg.

   Warum die Aufteilung: Wer zwei Stunden durch 8.934 Artikel blaettert, braucht
   Suche, Merkliste und Warenkorb jederzeit — aber nicht den Hinweis
   "Sammlermodelle seit ueber 20 Jahren". Der klebende Streifen wird dadurch
   flacher, und beim Scrollen schrumpft er noch einmal.

   Die Servicezeile liegt im HTML als GESCHWISTER von <header>, nicht darin.
   Sonst waere die Klebestrecke des Hauptkopfs mit dem Ende des gemeinsamen
   Elternelements zu Ende — position: sticky wirkt nur innerhalb des Elternteils.
   ======================================================================== */

.mt-kopf {
	position: sticky; top: 0; z-index: 60;
	background: var(--mt-grund);
	border-bottom: 3px solid var(--mt-blau);
}
.mt-kopf.mt-gescrollt { box-shadow: 0 4px 14px rgba(22, 32, 43, 0.12); }

/* --- Servicezeile ------------------------------------------------------
   Blau, wie vom Kunden gewuenscht. Der dunklere Blauton und nicht #3493cd:
   Weisse Schrift auf #3493cd erreicht nur ein Kontrastverhaeltnis von 3,0:1
   und ist bei 14 Pixel nicht mehr sicher lesbar. #2a7bac kommt auf 5,1:1 und
   ist genauso eindeutig blau.
   ------------------------------------------------------------------------ */
.mt-servicezeile {
	background: var(--mt-blau-dunkel);
	color: rgba(255, 255, 255, 0.92);
	font-size: 14px;
}
.mt-servicezeile .mt-rahmen {
	display: flex; flex-wrap: wrap; gap: var(--mt-r3) var(--mt-r5);
	align-items: center; justify-content: space-between;
	min-height: 38px;
	padding-top: 4px; padding-bottom: 4px;
}
.mt-neuigkeit { display: inline-flex; align-items: center; gap: var(--mt-r2); }
.mt-neuigkeit::before {
	content: ""; flex: 0 0 auto;
	width: 7px; height: 7px; border-radius: 50%;
	background: #fff;
}
.mt-servicelinks { display: flex; align-items: center; gap: var(--mt-r4); flex-wrap: wrap; }
.mt-servicemenue { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mt-r4); }
.mt-servicezeile a { color: #fff; text-decoration: none; }
.mt-servicezeile a:hover { text-decoration: underline; }

/* --- Hauptkopf ----------------------------------------------------------
   Die Uebergaenge sind kurz und betreffen nur Groessen, nie Farben: Der Kopf
   soll beim Scrollen ruhig schrumpfen, nicht die Aufmerksamkeit auf sich
   ziehen.
   ------------------------------------------------------------------------ */
.mt-kopf-haupt .mt-rahmen {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--mt-r5);
	align-items: center;
	padding-top: var(--mt-r3);
	padding-bottom: var(--mt-r3);
	transition: padding-top .18s ease, padding-bottom .18s ease;
}
.mt-kopf.mt-gescrollt .mt-kopf-haupt .mt-rahmen {
	padding-top: var(--mt-r2);
	padding-bottom: var(--mt-r2);
}

/* --- Logo ---------------------------------------------------------------
   Feste Breite statt nur einer Obergrenze: WordPress schreibt width="300"
   als Attribut ins Bild, dagegen kommt max-width nicht an. Die Hoehe steht
   ueber aspect-ratio fest, damit beim Laden nichts springt.

   Im gescrollten Zustand wird das Logo kleiner. Zusammen mit dem knapperen
   Innenabstand wird der klebende Streifen dadurch rund 20 Pixel flacher —
   spuerbar mehr Katalog im Blick, ohne dass etwas verschwindet.
   ------------------------------------------------------------------------ */
.mt-logo { display: flex; align-items: center; gap: var(--mt-r3); text-decoration: none; }
.mt-logo img {
	display: block;
	width: 152px; height: auto;
	aspect-ratio: 1673 / 796;
	transition: width .18s ease;
}
.mt-kopf.mt-gescrollt .mt-logo img { width: 116px; }

.mt-logo-text { display: block; }
.mt-logo-name {
	display: block; font-size: 25px; font-weight: 700;
	color: var(--mt-blau-schrift); line-height: 1.1; letter-spacing: -0.01em;
}
.mt-logo-zusatz {
	display: block; font-size: 12.5px; color: var(--mt-text-leise);
	letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px;
}
.mt-kopf.mt-gescrollt .mt-logo-name { font-size: 21px; }
.mt-kopf.mt-gescrollt .mt-logo-zusatz { font-size: 11px; }

/* --- Suchleiste --------------------------------------------------------- */
.mt-kopfsuche { position: relative; }
.mt-kopfsuche form { display: flex; }
.mt-kopfsuche input[type="search"],
.mt-kopfsuche input[type="text"] {
	flex: 1 1 auto; min-width: 0;
	border: 2px solid var(--mt-blau);
	border-right: none;
	background: var(--mt-grund);
	padding: 10px var(--mt-r4);
	font-family: inherit; font-size: 16px;
	color: var(--mt-text);
	border-radius: var(--mt-r1) 0 0 var(--mt-r1);
	transition: padding .18s ease;
}
.mt-kopfsuche input::placeholder { color: var(--mt-text-leise); }
.mt-kopfsuche button {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: var(--mt-r2);
	border: 2px solid var(--mt-blau-dunkel);
	background: var(--mt-blau-dunkel); color: #fff;
	padding: 10px var(--mt-r5);
	font-family: inherit; font-size: 16px; font-weight: 600;
	cursor: pointer;
	border-radius: 0 var(--mt-r1) var(--mt-r1) 0;
	transition: padding .18s ease, background .15s ease;
}
.mt-kopfsuche button svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mt-kopfsuche button:hover { background: var(--mt-blau-tief); border-color: var(--mt-blau-tief); }
.mt-kopf.mt-gescrollt .mt-kopfsuche input[type="search"],
.mt-kopf.mt-gescrollt .mt-kopfsuche input[type="text"] { padding-top: 7px; padding-bottom: 7px; }
.mt-kopf.mt-gescrollt .mt-kopfsuche button { padding-top: 7px; padding-bottom: 7px; }

/* --- Werkzeuge rechts: Merkliste, Konto, Warenkorb ---------------------- */
.mt-kopf-werkzeuge { display: flex; align-items: center; gap: var(--mt-r2); }
.mt-werkzeug {
	display: inline-flex; align-items: center; gap: var(--mt-r2);
	border: 1px solid var(--mt-linie);
	background: var(--mt-grund);
	padding: 8px var(--mt-r3);
	min-height: 42px;
	font-size: 14.5px; text-decoration: none; color: var(--mt-text);
	border-radius: var(--mt-r1);
	white-space: nowrap;
	transition: min-height .18s ease, padding .18s ease;
}
.mt-werkzeug:hover { border-color: var(--mt-blau); color: var(--mt-blau-schrift); background: var(--mt-blau-hauch); }
.mt-werkzeug svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mt-werkzeug .mt-zahl {
	display: inline-block; min-width: 21px; text-align: center;
	background: var(--mt-blau-dunkel); color: #fff;
	border-radius: 11px; padding: 1px 6px;
	font-size: 12.5px; font-weight: 700; line-height: 1.5;
}
.mt-kopf.mt-gescrollt .mt-werkzeug { min-height: 38px; padding-top: 6px; padding-bottom: 6px; }
/* KEIN eigener Hover fuer die Merkliste.
   Er war rot, waehrend Konto und Warenkorb daneben blau aufleuchteten — drei
   gleich aussehende Knoepfe, von denen einer aus der Reihe tanzt. Ohne diese
   Regel greift .mt-werkzeug:hover, und das ist genau gewollt.
   Das rote Zaehler-Abzeichen bleibt: Es ist keine Zustandsfarbe, sondern die
   Zahl der gemerkten Modelle, und die soll auffallen. */
.mc-merkliste-kopf .mt-zahl { background: var(--mt-rot); }

/* --- Sprachwahl mit Flaggen, in der blauen Servicezeile -----------------
   Flaggen als Inline-SVG und nicht als Emoji: Windows stellt Flaggen-Emoji
   nicht dar, dort erschiene statt der Flagge das Buchstabenpaar "AT".

   Im Blau braucht die Auswahl andere Farben als auf weissem Grund: helle
   Schrift, ein aufgehellter Rahmen, und die aktive Sprache als weisses Feld
   mit blauer Schrift. Ein weisser Kasten wie im alten Hauptkopf wirkte in der
   blauen Zeile wie ein Fremdkoerper.
   ------------------------------------------------------------------------ */
.mt-sprachen {
	display: inline-flex;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--mt-r1);
	overflow: hidden;
}
.mt-sprachen a, .mt-sprachen > span {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 9px; min-height: 28px;
	font-size: 12.5px; font-weight: 700; letter-spacing: 0.03em;
	color: #fff; text-decoration: none;
	background: transparent;
}
.mt-servicezeile .mt-sprachen a:hover { background: rgba(255, 255, 255, 0.16); text-decoration: none; }
.mt-sprachen a + a, .mt-sprachen > span + span,
.mt-sprachen a + span, .mt-sprachen > span + a { border-left: 1px solid rgba(255, 255, 255, 0.35); }
.mt-sprachen [aria-current="true"] { background: #fff; color: var(--mt-blau-tief); }
.mt-sprachen .mt-sprache-aus { color: rgba(255, 255, 255, 0.6); cursor: not-allowed; }
.mt-flagge {
	width: 19px; height: auto; flex: 0 0 auto;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 2px;
	display: block;
}

/* Weniger Bewegung, wenn der Besucher das eingestellt hat. */
@media (prefers-reduced-motion: reduce) {
	.mt-kopf-haupt .mt-rahmen,
	.mt-logo img,
	.mt-kopfsuche input,
	.mt-kopfsuche button,
	.mt-werkzeug { transition: none; }
}

/* ===========================================================================
   3. Brotkrume
   ======================================================================== */

.mt-brotkrume {
	background: var(--mt-flaeche);
	border-bottom: 1px solid var(--mt-linie);
	font-size: 14.5px;
	color: var(--mt-text-leise);
}
.mt-brotkrume .mt-rahmen { padding-top: 9px; padding-bottom: 9px; }
.mt-brotkrume a { color: var(--mt-text-leise); text-decoration: none; }
.mt-brotkrume a:hover { color: var(--mt-blau-schrift); text-decoration: underline; }

/* ===========================================================================
   4. Grundgerüst: Kategoriespalte links, Inhalt rechts

   Die Spalte steht auf ALLEN Katalogseiten und auch auf der Produktseite —
   ein Sammler springt von Modell zu Modell und soll dabei nicht jedes Mal
   zurueck in den Katalog muessen.

   Sie ist AUSDRUECKLICH NICHT klebend: Bei 489 Kategorien wandert eine
   mitlaufende Spalte staendig im Blickfeld herum, und ein eigener Scrollbalken
   mitten in der Seite ist genau die Art Bedienelement, die diese Zielgruppe
   nicht erwartet.
   ======================================================================== */

.mt-koerper { padding: var(--mt-r5) 0 var(--mt-r7); }
.mt-koerper > .mt-rahmen {
	display: grid;
	grid-template-columns: var(--mt-spalte) minmax(0, 1fr);
	gap: var(--mt-r5);
	align-items: start;
}
.mt-koerper.mt-ohne-spalte > .mt-rahmen { grid-template-columns: minmax(0, 1fr); }

.mt-spalte { position: static; }

/* ===========================================================================
   5. Kasten — das Gestaltungsmittel des alten Shops
   ======================================================================== */

.mt-kasten {
	border: 1px solid var(--mt-linie);
	background: var(--mt-grund);
	margin-bottom: var(--mt-r5);
}
.mt-kasten > .mt-kasten-leiste {
	background: var(--mt-blau-hauch);
	border-bottom: 1px solid var(--mt-linie);
	color: var(--mt-blau-tief);
	font-size: 15px; font-weight: 700;
	padding: 10px var(--mt-r4);
	margin: 0;
}
.mt-kasten > .mt-kasten-inhalt { padding: var(--mt-r4); }
.mt-kasten.mt-kasten-eng > .mt-kasten-inhalt { padding: var(--mt-r2) 0; }

/* ===========================================================================
   6. Kategoriespalte
   ======================================================================== */

.mt-kategorien ul { list-style: none; margin: 0; padding: 0; }
.mt-kategorien li { border-bottom: 1px solid var(--mt-flaeche-2); }
.mt-kategorien li:last-child { border-bottom: none; }
.mt-kategorien a {
	display: flex; justify-content: space-between; gap: var(--mt-r2);
	padding: 9px var(--mt-r4);
	text-decoration: none; color: var(--mt-text);
	font-size: 14.5px; line-height: 1.35;
}
.mt-kategorien a:hover { background: var(--mt-blau-hauch); color: var(--mt-blau-tief); }
.mt-kategorien .mt-anzahl {
	flex: 0 0 auto; color: var(--mt-text-leise); font-size: 12.5px;
	font-variant-numeric: tabular-nums;
}
.mt-kategorien .mt-jetzt > a { background: var(--mt-blau-dunkel); color: #fff; font-weight: 700; }
.mt-kategorien .mt-jetzt > a .mt-anzahl { color: rgba(255, 255, 255, 0.85); }
.mt-kategorien .mt-ebene-2 a { padding-left: var(--mt-r6); font-size: 14px; color: var(--mt-text-leise); }
.mt-kategorien .mt-ebene-3 a { padding-left: calc(var(--mt-r6) + var(--mt-r4)); font-size: 13.5px; color: var(--mt-text-leise); }
.mt-kategorien .mt-ebene-2.mt-jetzt > a,
.mt-kategorien .mt-ebene-3.mt-jetzt > a { color: #fff; }

/* ===========================================================================
   7. Produktraster

   Zur Spezifitaet: WooCommerce baut den Katalog noch als Float-Raster
   (.woocommerce ul.products li.product { float: left; width: 30.75% }, drei
   Klassen). :is(.woocommerce, body) erbt die Spezifitaet einer Klasse und
   trifft ueber "body" trotzdem jede Seite; der Block am Ende dieses
   Abschnitts schaltet die Breiten mit demselben Selektorbau ab.
   ======================================================================== */

:is(.woocommerce, body) ul.products {
	list-style: none; margin: 0 0 var(--mt-r5); padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--mt-spalten, 3), minmax(0, 1fr));
	gap: var(--mt-r4);
}
:is(.woocommerce, body) ul.products.columns-4 { --mt-spalten: 4; }
:is(.woocommerce, body) ul.products::before,
:is(.woocommerce, body) ul.products::after { content: none; display: none; }

:is(.woocommerce, body) ul.products li.product {
	position: relative;   /* Traeger fuer Massstab-Schild und Knopfleiste */
	margin: 0; padding: 0; width: auto; float: none; clear: none;
	border: 1px solid var(--mt-linie);
	background: var(--mt-grund);
	display: flex; flex-direction: column;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
:is(.woocommerce, body) ul.products li.product:hover {
	border-color: var(--mt-blau);
	box-shadow: 0 2px 10px rgba(52, 147, 205, 0.14);
}

:is(.woocommerce, body) ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex; flex-direction: column; flex: 1 1 auto;
	text-decoration: none; color: inherit;
}

/* Das Bild wird EINGEPASST, nicht beschnitten. Die Originale sind Querformat
   (typisch 800 x 503) — ein quadratischer Ausschnitt schneidet dem Auto Dach
   und Räder ab. */
:is(.woocommerce, body) ul.products li.product img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 3 / 2; object-fit: contain;
	background: var(--mt-grund);
	border-bottom: 1px solid var(--mt-linie);
	padding: var(--mt-r3);
	margin: 0;
	box-shadow: none;
}
:is(.woocommerce, body) ul.products li.product .mt-karte-text { padding: var(--mt-r3) var(--mt-r4); flex: 1 1 auto; }
:is(.woocommerce, body) ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px; font-weight: 600; line-height: 1.35;
	margin: 0 0 var(--mt-r2); padding: 0; color: var(--mt-text);
}
:is(.woocommerce, body) ul.products li.product .mt-karte-marke {
	display: block; font-size: 12px; color: var(--mt-text-leise);
	text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;
}
/* Massstab und Artikelnummer in einer Zeile, der Massstab als gefuelltes
   Schild. Er ist das erste Auswahlkriterium eines Sammlers und muss aus der
   grauen Zeile herausspringen — sonst liest ihn beim Ueberfliegen niemand. */
:is(.woocommerce, body) ul.products li.product .mt-karte-zeile {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 6px var(--mt-r2);
	margin-bottom: var(--mt-r2);
}
:is(.woocommerce, body) ul.products li.product .mt-karte-massstab {
	flex: 0 0 auto;
	background: var(--mt-dunkel); color: #fff;
	font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
	line-height: 1.25;
	padding: 3px 9px;
	border-radius: var(--mt-r1);
	font-variant-numeric: tabular-nums;
}
:is(.woocommerce, body) ul.products li.product .mt-karte-nummer {
	font-size: 12.5px; color: var(--mt-text-leise);
	font-variant-numeric: tabular-nums;
}
:is(.woocommerce, body) ul.products li.product .price {
	display: block; font-size: 19px; font-weight: 700; color: var(--mt-text);
	margin: var(--mt-r2) 0 0;
}
:is(.woocommerce, body) ul.products li.product .price del { color: var(--mt-text-leise); font-weight: 400; font-size: 15px; }
:is(.woocommerce, body) ul.products li.product .price ins { text-decoration: none; }
.mt-preis-zusatz { display: block; font-size: 12px; font-weight: 400; color: var(--mt-text-leise); margin-top: 2px; }

:is(.woocommerce, body) ul.products li.product .button,
:is(.woocommerce, body) ul.products li.product .added_to_cart {
	margin: 0 var(--mt-r4) var(--mt-r4);
	text-align: center;
	min-height: 44px;
	display: flex; align-items: center; justify-content: center;
}

/* --- Das Schild oben links: NEU und DEMNAECHST --------------------------
   Zwei Zustaende, die ein Sammler ohne Lesen erkennen soll: Rot heisst "das
   ist gerade hereingekommen", Gelb heisst "das gibt es noch nicht zu kaufen".
   Die Farben sind bewusst verschieden gesaettigt — auf einem 60 Jahre alten
   Auge sind zwei aehnliche Farben keine zwei Zustaende.

   Bis 26.08.2026 stand hier der Massstab. Der steht jetzt im Kartentext.
   ------------------------------------------------------------------------ */
.mt-schild {
	position: absolute; top: 0; left: 0; z-index: 3;
	font-size: 13px; font-weight: 700;
	letter-spacing: 0.06em; text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 0 0 var(--mt-r1) 0;
	pointer-events: none;
}
.mt-schild-neu { background: var(--mt-rot); color: #fff; }
/* #8a5a00 statt #b7791f: Weiss auf dem helleren Ton kommt nur auf 3,64:1,
   auf diesem auf 5,93:1. Der Unterschied zum roten NEU bleibt deutlich. */
.mt-schild-demnaechst { background: #8a5a00; color: #fff; }
/* Angebot: Gruen — deutlich anders als das rote NEU und das braune
   DEMNAECHST, Weiss darauf 5,3:1 (21.09.2026). */
.mt-schild-angebot { background: var(--mt-gruen); color: #fff; }
/* Wie viele Angebote am Telefon stehen, stellt Krammer ein (Shop-
   Einstellungen → Angebote → Davon am Handy); die Regel dazu schreibt
   front-page.php. */

/* --- Die Knopfleiste auf der Karte --------------------------------------
   Erscheint beim Darueberfahren, so von Marcel gewuenscht. Damit bleibt das
   Raster ruhig: 24 Karten mit je zwei dauerhaft sichtbaren Knoepfen sind 48
   Schaltflaechen auf einem Bildschirm.

   ABER: Am Tastbildschirm gibt es kein Darueberfahren. Dort waeren die
   Knoepfe unerreichbar. @media (hover: none) blendet sie deshalb dauerhaft
   ein — dasselbe gilt fuer die Tastaturbedienung ueber :focus-within, sonst
   springt der Fokus auf einen unsichtbaren Knopf.
   ------------------------------------------------------------------------ */
.mt-karte-knoepfe {
	position: absolute; top: var(--mt-r2); right: var(--mt-r2); z-index: 3;
	display: flex; flex-direction: column; gap: 5px; align-items: flex-end;
	opacity: 0;
	transition: opacity 140ms ease;
}
:is(.woocommerce, body) ul.products li.product:hover .mt-karte-knoepfe,
:is(.woocommerce, body) ul.products li.product:focus-within .mt-karte-knoepfe {
	opacity: 1;
}
/* Ein gemerktes Modell zeigt sein Herz immer — sonst weiss man beim
   Ueberfliegen der Trefferliste nicht mehr, was schon auf der Merkliste
   steht. */
:is(.woocommerce, body) ul.products li.product .mt-karte-knoepfe:has(.mc-ist-gemerkt) { opacity: 1; }

@media (hover: none) {
	.mt-karte-knoepfe { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.mt-karte-knoepfe { transition: none; }
}

.mt-karte-knoepfe .mc-knopf-wort,
.mt-karte-knoepfe .mc-merken-wort {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.mt-karte-knoepfe .mc-merken,
.mt-karte-knoepfe .mc-schnellansicht {
	width: 42px; height: 42px; padding: 0;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(22, 32, 43, 0.12);
}

/* Das Float-Raster von WooCommerce endgültig abschalten — derselbe
   Selektorbau, aber später geladen. Die Stylesheets ganz abzuhängen wäre
   falsch: darin steckt auch die Zweispaltigkeit der Kassa und das Umbrechen
   der Warenkorbtabelle am Telefon. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: auto; float: none; clear: none; margin: 0;
}

/* ===========================================================================
   FiboSearch im Kopfbereich

   FiboSearch bringt sein eigenes Aussehen mit: 40 Pixel hoch, 14 Pixel
   Schrift, grauer Knopf. Das ist die Voreinstellung eines Plugins, das nichts
   ueber diesen Shop weiss — und es ist fuer eine Kundschaft ueber 60 zu klein.

   Angeglichen wird an das, was das eigene Formular vorher hatte: 48 Pixel
   Hoehe, 17 Pixel Schrift, der Rand in Shopblau, der Knopf beschriftet und
   in derselben Farbe wie alle anderen Hauptknoepfe.

   Alles unter .mt-kopfsuche, damit ein FiboSearch-Feld an anderer Stelle
   (etwa in einem Widget) davon unberuehrt bleibt.
   ======================================================================== */

.mt-kopfsuche .dgwt-wcas-search-wrapp { max-width: none; }

/* Der Selektor traegt .dgwt-wcas-sf-wrapp und [type="search"] mit, weil
   FiboSearch genau so schreibt. Mit weniger verliert die Regel. */
.mt-kopfsuche .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
	height: 48px;
	font-size: 17px;
	padding: 0 12px;
	/* 1 PIXEL, NICHT 2 — und zwar hier, wo die Regel gewinnt.
	   Gemeldet wurde "das Eingabefeld ist groesser als die anderen".
	   Nachgemessen mit echtem Scrollen: Feld 48, Absendeknopf 48, alle drei
	   Werkzeuge 48, oben buendig. Kein Hoehenunterschied — ein
	   RAHMENunterschied. Das Feld trug 2 Pixel, die Werkzeuge daneben 1.
	   Ein doppelt so kraeftiger Rahmen um ein breites weisses Feld wirkt
	   schwerer und damit groesser, obwohl der Kasten gleich hoch ist.
	   Die Farbe war ausserdem das Grau der Trennlinien; jetzt das Blau der
	   Kopfreihe, damit das Feld zu Knopf und Werkzeugen gehoert. */
	border: 1px solid var(--mt-blau);
	border-right: none;
	border-radius: var(--mt-r1) 0 0 var(--mt-r1);
	background: #fff;
	color: var(--mt-text);
	box-shadow: none;
}
.mt-kopfsuche .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
	border-color: var(--mt-blau-schrift);
	outline: 3px solid rgba(52, 147, 205, .35);
	outline-offset: 0;
}
.mt-kopfsuche .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder { color: #6b7885; opacity: 1; }

.mt-kopfsuche .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
	height: 48px;
	min-width: 116px;
	padding: 0 var(--mt-r4);
	font-size: 16px; font-weight: 600;
	background: var(--mt-blau-dunkel) !important;
	color: #fff !important;
	/* Gleiche Rahmenstaerke wie Feld und Werkzeuge — sonst ist die Reihe
	   nur zur Haelfte begradigt. */
	border: 1px solid var(--mt-blau-dunkel);
	border-radius: 0 var(--mt-r1) var(--mt-r1) 0;
	cursor: pointer;
}
.mt-kopfsuche .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit:hover {
	background: var(--mt-blau-tief) !important;
	border-color: var(--mt-blau-tief);
}
/* Das Lupensymbol im Knopf bekommt Luft zum Wort. */
.mt-kopfsuche .dgwt-wcas-search-submit svg { margin-right: 7px; fill: #fff; }

/* Der Ladekringel sass auf dem alten, runden Feld. */
.mt-kopfsuche .dgwt-wcas-preloader { right: 130px; }
.mt-kopfsuche .dgwt-wcas-close { right: 130px; }

@media (max-width: 860px) {
	.mt-kopfsuche .dgwt-wcas-search-submit { min-width: 0; padding: 0 var(--mt-r3); }
	.mt-kopfsuche .dgwt-wcas-preloader,
	.mt-kopfsuche .dgwt-wcas-close { right: 64px; }
}

/* ===========================================================================
   7a2. Unterkategorien als Kacheln

   Der Altshop zeigte sie auf jeder Kategorieseite oben in der Mitte, als
   Raster blauer Schaltflaechen. Nachgebaut, weil es der schnellste Weg
   tiefer in den Katalog ist: Wer auf "Rennfahrer" geklickt hat, will einen
   Fahrer waehlen, und 63 Namen sind in der Mitte lesbar, am Rand nicht.

   Drei Spalten wie im Altshop, auf schmalen Fenstern zwei und dann eine.
   Jede Flaeche mindestens 48 Pixel hoch.
   ======================================================================== */

.mt-unterkat {
	border: 1px solid var(--mt-linie);
	background: var(--mt-grund);
	margin: 0 0 var(--mt-r5);
}
.mt-unterkat-titel {
	margin: 0;
	background: var(--mt-flaeche);
	border-bottom: 1px solid var(--mt-linie);
	padding: var(--mt-r3) var(--mt-r4);
	font-size: 17px; font-weight: 700;
	color: var(--mt-blau-tief);
}
.mt-unterkat-felder {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mt-r2);
	padding: var(--mt-r4);
}
.mt-unterkat-feld {
	display: flex; align-items: center; justify-content: space-between; gap: var(--mt-r2);
	min-height: 48px;
	padding: 9px var(--mt-r3);
	background: var(--mt-blau-dunkel);
	color: #fff !important;
	text-decoration: none;
	border-radius: var(--mt-r1);
	font-size: 15px; line-height: 1.25;
	transition: background 120ms ease;
}
.mt-unterkat-feld:hover { background: var(--mt-blau-tief); }
.mt-unterkat-feld small {
	flex: 0 0 auto;
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.85);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
	.mt-unterkat-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.mt-unterkat-felder { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.mt-unterkat-feld { transition: none; }
}

/* ===========================================================================
   7b. Startseite: Blöcke, Chips, Katalogweg
   ======================================================================== */

.mt-block { margin: 0 0 var(--mt-r7); }
.mt-block-kopf {
	display: flex; flex-wrap: wrap; gap: var(--mt-r3);
	align-items: baseline; justify-content: space-between;
	border-bottom: 2px solid var(--mt-dunkel);
	padding-bottom: var(--mt-r2);
	margin-bottom: var(--mt-r4);
}
.mt-block-kopf h2 { margin: 0; font-size: 20px; }
.mt-mehr { font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mt-mehr:hover { text-decoration: underline; }

.mt-chips { display: flex; flex-wrap: wrap; gap: var(--mt-r2); }
.mt-chip {
	display: inline-flex; align-items: baseline; gap: 7px;
	border: 1px solid var(--mt-linie);
	background: var(--mt-grund);
	border-radius: 999px;
	padding: 9px var(--mt-r4);
	font-size: 14.5px; text-decoration: none; color: var(--mt-text);
}
.mt-chip span { color: var(--mt-text-leise); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mt-chip:hover { border-color: var(--mt-blau); background: var(--mt-blau-hauch); color: var(--mt-blau-tief); }

.mt-katalogweg {
	display: flex; flex-wrap: wrap; gap: var(--mt-r4);
	align-items: center; justify-content: space-between;
	background: var(--mt-flaeche);
	border: 1px solid var(--mt-linie);
	padding: var(--mt-r5);
	margin-bottom: var(--mt-r7);
}
.mt-katalogweg h2 { font-size: 20px; margin-bottom: 4px; }
.mt-katalogweg p { margin: 0; color: var(--mt-text-leise); }

.mt-einleitung { border-top: 1px solid var(--mt-linie); padding-top: var(--mt-r5); }

/* ===========================================================================
   8. Knöpfe
   ======================================================================== */

/* --- Das Bauteil ------------------------------------------------------
   EINE Regel schreibt Grund, Rahmen und Schrift. Alles andere setzt nur
   die drei Variablen. Wer eine Variante braucht, aendert Werte — nicht
   Eigenschaften, und schon gar nicht Selektoren.

   Kein nacktes "button": ein Knopf ist, was .button traegt. Fremde Knoepfe
   (Fibosearch, Modelltoys-Core) bringen ihre eigene Gestalt mit und werden
   hier nicht mehr ueberfahren.                                          */

.button,
input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
	--knopf-grund:  var(--mt-blau-dunkel);
	--knopf-rand:   var(--mt-blau-dunkel);
	--knopf-schrift: var(--mt-auf-farbe);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mt-r2);

	/* min-height, nicht height: wer den Browser zoomt — und diese
	   Kundschaft tut das — dem darf der Text nicht aus dem Kasten laufen. */
	min-height: var(--mt-hoehe);
	box-sizing: border-box;
	padding: 8px var(--mt-r5);

	background: var(--knopf-grund);
	border: 1px solid var(--knopf-rand);
	color: var(--knopf-schrift);
	border-radius: var(--mt-radius);

	font-family: inherit;
	font-size: var(--mt-s-bedien);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* --- Zustaende: immer alle drei Werte zusammen ------------------------ */

/* DER BESUCHTE ZUSTAND.
   Der Browser faerbt besuchte Links um — bei einem Knopf, der ein <a> ist,
   heisst das: lila Schrift auf blauem Grund, sobald der Kunde einmal dort
   war. Die Browserregel a:visited ist spezifischer als .button und gewinnt
   deshalb gegen die Grundregel.

   In :visited darf aus Datenschutzgruenden nur die Farbe gesetzt werden —
   ob ein Link besucht wurde, soll eine Seite nicht ueber die Groesse eines
   Elements auslesen koennen. Farbe genuegt hier auch. */
.button:visited,
.woocommerce a.button:visited,
.woocommerce a.button.alt:visited {
	color: var(--knopf-schrift);
}

.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	--knopf-grund:  var(--mt-blau-tief);
	--knopf-rand:   var(--mt-blau-tief);
	--knopf-schrift: var(--mt-auf-farbe);
}

/* Die Zustaende schreiben die Eigenschaften SELBST — sonst gewinnt das
   fremde Stylesheet, siehe Erklaerung oben. Dieselbe Selektorbreite wie
   WooCommerce, aber spaeter geladen. */
/* AUCH OHNE .woocommerce ALS VORFAHRE.
   Der Mini-Warenkorb steht im Kopf, nicht im Shop-Bereich. Dort griffen
   die Regeln unten nicht, und es gewann:

       a:hover { color: var(--mt-blau-tief) }        (0,1,1)
       gegen  .button { color: var(--knopf-schrift) } (0,1,0)

   Ein Element-Selektor schlaegt eine Klasse nicht — aber ":hover" zaehlt
   als Klasse, damit steht es 1 Klasse + 1 Element gegen 1 Klasse, und die
   Link-Regel gewinnt. Beim Ueberfahren von "Zur Kassa" sprang die Schrift
   deshalb kurz auf Blau. Mit .button:hover (0,2,0) ist das entschieden. */
.button:hover, .button:focus, .button:active,
a.button:hover, a.button:focus, a.button:active,
a.button:visited:hover, a.button:visited:focus {
	background: var(--knopf-grund);
	background-image: none;
	border-color: var(--knopf-rand);
	color: var(--knopf-schrift);
}

.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button:focus, .woocommerce button.button:focus, .woocommerce input.button:focus,
.woocommerce a.button:active, .woocommerce button.button:active, .woocommerce input.button:active,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce a.button.alt:focus, .woocommerce button.button.alt:focus,
.woocommerce a.button.alt:active, .woocommerce button.button.alt:active,
.woocommerce #respond input#submit:hover, .woocommerce #respond input#submit:focus {
	background: var(--knopf-grund);
	background-image: none;
	border-color: var(--knopf-rand);
	color: var(--knopf-schrift);
}

/* Gedrueckt. Gab es bisher gar nicht — auf einem Tastbildschirm ist der
   Hover wirkungslos, dort IST der gedrueckte Zustand die einzige
   Rueckmeldung, dass der Tipp angekommen ist. */
.button:active,
input[type="submit"]:active,
.woocommerce a.button:active, .woocommerce button.button:active, .woocommerce input.button:active,
.woocommerce #respond input#submit:active {
	--knopf-grund:  var(--mt-blau-tief);
	--knopf-rand:   var(--mt-blau-tief);
	--knopf-schrift: var(--mt-auf-farbe);
	box-shadow: inset 0 2px 5px rgb(var(--mt-kanal-dunkel) / .28);
}

/* Abgeschaltet. Fehlte ebenfalls. WooCommerce setzt disabled an mehreren
   Stellen selbst — bisher sah der Knopf dabei genauso aus wie ein
   benutzbarer, nur dass nichts passierte. */
.button:disabled, .button[aria-disabled="true"], .button.disabled,
input[type="submit"]:disabled,
.woocommerce button.button:disabled, .woocommerce input.button:disabled,
.woocommerce button.button[aria-disabled="true"] {
	--knopf-grund:  var(--mt-flaeche-2);
	--knopf-rand:   var(--mt-linie-kraeftig);
	--knopf-schrift: var(--mt-text-leise);
	cursor: not-allowed;
	box-shadow: none;
}

/* --- Variante: still (heller Grund) ----------------------------------
   Setzt AUSSCHLIESSLICH die drei Variablen. Genau das ist der Unterschied
   zu vorher: Die Variante kann gar nicht mehr die Schrift vergessen. */

.button.mt-still, .woocommerce a.button.mt-still, .woocommerce button.button.mt-still {
	--knopf-grund:  var(--mt-grund);
	--knopf-rand:   var(--mt-linie-kraeftig);
	--knopf-schrift: var(--mt-text);
}
.button.mt-still:hover, .woocommerce a.button.mt-still:hover, .woocommerce button.button.mt-still:hover {
	--knopf-grund:  var(--mt-blau-hauch);
	--knopf-rand:   var(--mt-blau);
	--knopf-schrift: var(--mt-blau-schrift);
}
.button.mt-still:active, .woocommerce a.button.mt-still:active {
	--knopf-grund:  var(--mt-blau-hauch);
	--knopf-rand:   var(--mt-blau-dunkel);
	--knopf-schrift: var(--mt-blau-tief);
}

/* --- Variante: Hauptknopf ---------------------------------------------
   Der EINE Knopf, der einen Schritt abschliesst: bestellen, zur Kassa,
   in den Warenkorb. Er ist hoeher und traegt groessere Schrift — sonst
   nichts. Die Farbe bleibt die des Grundknopfs, denn zwei Blautoene
   nebeneinander unterscheiden heisst nichts, groesser sein schon.

   Angesprochen wird der ZWECK. Wenn ein Plugin den Knopf morgen woandershin
   verschiebt, bleibt er der Hauptknopf. */
#place_order,
.woocommerce .wc-proceed-to-checkout .button,
.woocommerce .single_add_to_cart_button {
	min-height: var(--mt-hoehe-gross);
	padding-inline: var(--mt-r4);
	font-size: var(--mt-s-gross);
}

/* Am Telefon eine Schriftstufe zurueck. Der Knopf hat dort die volle
   Breite und ist ohnehin nicht zu uebersehen; wichtiger ist, dass die
   Beschriftung in EINER Zeile steht. */
@media (max-width: 600px) {
	#place_order,
	.woocommerce .wc-proceed-to-checkout .button,
	.woocommerce .single_add_to_cart_button {
		/* Am Telefon zurueck auf das Regelmass. Der Knopf hat dort ohnehin
		   die volle Breite oder steht neben dem Mengenfeld — in beiden
		   Faellen wirkt er gross genug, und 54 neben einem 48er Feld sieht
		   nur schief aus. Bis 31.08.2026 stimmte das hier zufaellig, weil
		   eine aeltere Regel den Kaufknopf auf 48 zog. Jetzt steht es da. */
		min-height: var(--mt-hoehe);
		font-size: var(--mt-s-bedien);
		padding-inline: var(--mt-r3);
	}
}

/* Volle Breite nur dort, wo der Knopf allein in seiner Zeile steht.
   Auf der Produktseite steht er neben dem Mengenfeld — dort waere das
   falsch. */
#place_order,
.woocommerce .wc-proceed-to-checkout .button {
	display: flex;
	width: 100%;
	float: none;
}

/* Das Auge im Passwortfeld ist kein Knopf im Sinne des Bauteils.
   Es hing bis zum Umbau am nackten Elementselektor "button" und war
   deshalb blau gefuellt — ein blauer Kasten mitten im Eingabefeld. Seit
   der Selektor weg ist, zeigte der Browser seinen eigenen grauen Rahmen.
   Beides falsch; es ist ein Werkzeug im Feld, also traegt es nichts. */
.show-password-input, .woocommerce .show-password-input {
	border: none;
	background: none;
	padding: 0;
	color: var(--mt-text-leise);
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.button, input[type="submit"], .woocommerce a.button, .woocommerce button.button { transition: none; }
}

.woocommerce a.button.loading::after, .woocommerce button.button.loading::after { top: 0.7em; }

/* ===========================================================================
   9. Formularfelder
   ======================================================================== */

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
select, textarea {
	--feld-rand: var(--mt-linie-kraeftig);

	width: 100%;
	box-sizing: border-box;

	/* Regelmass. Dasselbe --mt-hoehe wie beim Knopf: Feld und Knopf
	   nebeneinander sind damit gleich hoch, ohne dass jemand nachrechnet. */
	min-height: var(--mt-hoehe);

	border: 1px solid var(--feld-rand);
	border-radius: var(--mt-radius);
	background: var(--mt-grund);
	color: var(--mt-text);
	font-family: inherit;
	font-size: var(--mt-s-bedien);

	/* Nur noch seitlich gepolstert — die Hoehe macht min-height. */
	padding: 6px var(--mt-r3);
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

textarea { min-height: calc(var(--mt-hoehe) * 2); padding-block: var(--mt-r2); }
select { padding-right: var(--mt-r5); }

input:focus, select:focus, textarea:focus { --feld-rand: var(--mt-blau); }

/* Abgeschaltete Felder sahen bisher aus wie benutzbare. */
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
	--feld-rand: var(--mt-linie);
	background: var(--mt-flaeche);
	color: var(--mt-text-leise);
	cursor: not-allowed;
}

/* Ein falsch ausgefuelltes Feld darf sich nicht NUR durch Farbe melden —
   wer Rot und Grau nicht unterscheidet, sieht sonst gar nichts. Deshalb
   zusaetzlich ein dickerer Rahmen. */
input:user-invalid, select:user-invalid, textarea:user-invalid,
.woocommerce-invalid input.input-text, .woocommerce-invalid select {
	--feld-rand: var(--mt-rot);
	box-shadow: inset 0 0 0 1px var(--mt-rot);
}

label { font-size: var(--mt-s-klein); font-weight: 600; display: block; margin-bottom: 5px; }

/* --- Kaestchen und Auswahlknopf --------------------------------------
   accent-color faerbt Haken und Punkt im Blau des Shops, ohne dass wir
   das Element nachbauen. Ein nachgebautes Kaestchen verliert die
   Tastaturbedienung und die Ansage der Vorlesehilfe — und beides braucht
   diese Kundschaft eher mehr als weniger.                              */

input[type="checkbox"], input[type="radio"] {
	width: var(--mt-haken);
	height: var(--mt-haken);
	flex: 0 0 auto;
	margin: 0;
	accent-color: var(--mt-blau);
	cursor: pointer;
}

/* Kaestchen und Beschriftung gehoeren zusammen: Wer die Beschriftung
   trifft, hat auch das Kaestchen getroffen. Bisher war in der Filterzeile
   nur das 13-Pixel-Quadrat selbst anklickbar. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]),
.mc-filter label.mc-filter-haken {
	display: inline-flex;
	align-items: center;
	gap: var(--mt-r2);
	min-height: var(--mt-klick-min);
	margin-bottom: 0;
	font-weight: 500;
	cursor: pointer;
}

/* Auf der Kassa liegt das Kaestchen absolut im Kasten — dort gilt die
   Kastenregel weiter, und die Ausrichtung per inline-flex wuerde sie
   stoeren. */
.woocommerce-checkout form.checkout label.checkbox,
.woocommerce-checkout label.woocommerce-form__label-for-checkbox { display: block; }

/* Die Filterbox traegt sieben Bedienelemente in einer Zeile — dort ist das
   Regelmass zu gross. Eine EINZIGE bewusste Ausnahme, benannt als solche,
   statt einer zweiten Felddefinition im Plugin. */
.mc-filter input[type="text"], .mc-filter input[type="search"], .mc-filter select {
	min-height: var(--mt-hoehe-eng);
	font-size: var(--mt-s-glatt);
}

/* ===========================================================================
   10. Produktseite
   ======================================================================== */

.mt-produkt-kopf { margin-bottom: var(--mt-r5); }
.mt-produkt-kopf h1 { margin-bottom: 6px; font-size: 25px; }
.mt-produkt-nummer {
	font-size: 14.5px; color: var(--mt-text-leise);
	font-variant-numeric: tabular-nums;
}

.woocommerce div.product { margin: 0; }
.woocommerce div.product div.images,
.woocommerce div.product div.summary { float: none; width: auto; margin: 0; }

.mt-produkt-oben {
	display: grid;
	/* 1,8 zu 1: Mit der Kategoriespalte bleiben fuer den Inhalt rund 900
	   Pixel. Die rechte Spalte traegt Preis, Menge, Knopf und das Datenblatt —
	   das kommt mit 320 Pixeln aus und sah bei gleicher Teilung halbleer aus.
	   Zusammen damit, dass die Bildleiste nach unten gewandert ist, waechst
	   das Hauptbild von rund 450 auf rund 575 Pixel. */
	grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
	gap: var(--mt-r5);
	align-items: start;
	margin-bottom: var(--mt-r6);
}

/* --- Galerie: Hauptbild oben, Bildleiste darunter -----------------------
   Bis 26.08.2026 stand die Leiste links daneben und kostete 64 Pixel plus
   Abstand von der Bildbreite. Auf einem Modellautoshop ist das Bild die
   Ware — es bekommt jetzt die volle Spaltenbreite.

   Die Leiste ist eine gewoehnliche Rasterzeile und nicht mehr absolut
   gesetzt. Der frueher noetige Kunstgriff (ein Rasterelement waechst auf
   seine Inhaltshoehe, auch mit overflow-y: auto) faellt weg, weil eine
   waagrechte Reihe nur so hoch ist wie ein Bildchen.
   ------------------------------------------------------------------------ */
.woocommerce div.product div.images.woocommerce-product-gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mt-r3);
	align-items: start;
	position: relative;
}
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images > .woocommerce-product-gallery__wrapper {
	grid-column: 1; grid-row: 1;
	position: relative;   /* Traeger fuer die Blaetterpfeile, siehe unten */
	border: 1px solid var(--mt-linie);
	background: #fff;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	border: none;
	aspect-ratio: 3 / 2;
	object-fit: contain;
	padding: var(--mt-r4);
	background: #fff;
}

/* Die Bildleiste als waagrechte Reihe unter dem Hauptbild. Mehr als sechs
   Bildchen scrollen seitlich weg statt umzubrechen — eine zweite Reihe wuerde
   die Seite bei jedem Produktwechsel unterschiedlich hoch machen. */
/* ALLE BILDER AUF EINMAL, KEIN WISCHEN.

   Bis 26.08.2026 lag die Bildleiste in einem waagrechten Rollbereich: Bei
   zwoelf Bildern sah man sechs, den Rest musste man heranschieben. Marcels
   Einwand dazu ist der richtige — ein waagrechter Rollbalken mitten in der
   Seite ist genau die Art Bedienelement, die diese Zielgruppe nicht kennt und
   nicht sucht. Wer nicht weiss, dass da noch etwas ist, sieht es nie.

   Jetzt ein Raster, das umbricht: feste 84 Pixel je Bild, so viele je Zeile
   wie hineinpassen, der Rest in die naechste Zeile. Bei zwoelf Bildern sind
   das zwei Zeilen, die man auf einen Blick erfasst. */
.woocommerce div.product div.images .flex-control-thumbs {
	grid-column: 1; grid-row: 2;
	display: grid;
	grid-template-columns: repeat(auto-fill, 84px);
	justify-content: start;
	gap: 6px;
	margin: 0; padding: 0; list-style: none;
	overflow: visible;
}
.woocommerce div.product div.images .flex-control-thumbs li {
	width: 84px; margin: 0; float: none; list-style: none;
}
.woocommerce div.product div.images .flex-control-thumbs img {
	width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
	border: 1px solid var(--mt-linie);
	background: #fff; padding: 3px;
	opacity: 1; cursor: pointer;
	transition: border-color 120ms ease;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	border-color: var(--mt-blau); border-width: 2px; padding: 2px;
}

/* --- Blätterpfeile ------------------------------------------------------
   WooCommerce blendet die FlexSlider-Pfeile aus. Hier bekommen sie ein
   Aussehen: gross und mit Rand, aber erst beim Darueberfahren sichtbar — so
   von Marcel gewuenscht, damit das Bild frei bleibt.

   Am Tastbildschirm gibt es kein Darueberfahren; @media (hover: none) blendet
   sie dort dauerhaft ein. Dasselbe bei Tastaturfokus, sonst springt der Fokus
   auf einen unsichtbaren Knopf.

   Die Pfeile haengen an .flex-viewport, NICHT am Galeriebereich: Seit die
   Bildleiste unter dem Bild steht, waere "die Mitte des Galeriebereichs"
   irgendwo zwischen Bild und Leiste. theme.js schiebt sie beim Aufbau in den
   Bildbereich hinein.
   ------------------------------------------------------------------------ */
.woocommerce div.product div.images .flex-direction-nav { list-style: none; margin: 0; padding: 0; }
.woocommerce div.product div.images .flex-direction-nav a {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: 5;
	opacity: 0;
	transition: opacity 140ms ease, border-color 120ms ease, background-color 120ms ease;
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px;
	margin: 0;
	border: 1px solid var(--mt-linie-kraeftig);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.96);
	color: var(--mt-text);
	/* KEIN opacity hier. Die Sichtbarkeit steht oben (opacity: 0) und wird
	   beim Darueberfahren gesetzt. Bis 26.08.2026 stand an dieser Stelle
	   opacity: 1 aus der Zeit dauerhaft sichtbarer Pfeile — im selben
	   Regelblock gewinnt die spaetere Angabe, und die Hover-Logik war damit
	   wirkungslos. */
	text-indent: 0;
	overflow: hidden;
	font-size: 0;
	box-shadow: 0 2px 8px rgba(22, 32, 43, 0.14);
}
.woocommerce div.product div.images:hover .flex-direction-nav a,
.woocommerce div.product div.images .flex-direction-nav a:focus-visible {
	opacity: 1;
}
@media (hover: none) {
	.woocommerce div.product div.images .flex-direction-nav a { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce div.product div.images .flex-direction-nav a { transition: none; }
}
.woocommerce div.product div.images .flex-direction-nav a::before {
	content: "";
	width: 13px; height: 13px;
	border-top: 3px solid currentColor;
	border-right: 3px solid currentColor;
}
.woocommerce div.product div.images .flex-direction-nav a.flex-prev { left: 10px; }
.woocommerce div.product div.images .flex-direction-nav a.flex-prev::before { transform: rotate(-135deg); margin-left: 4px; }
.woocommerce div.product div.images .flex-direction-nav a.flex-next { right: 10px; }
.woocommerce div.product div.images .flex-direction-nav a.flex-next::before { transform: rotate(45deg); margin-right: 4px; }
.woocommerce div.product div.images .flex-direction-nav a:hover {
	border-color: var(--mt-blau); background: #fff; color: var(--mt-blau-tief);
}
.woocommerce div.product div.images:hover .flex-direction-nav a.flex-disabled { opacity: .3; pointer-events: none; }

/* ===========================================================================
   Die Lightbox (PhotoSwipe)

   WooCommerce liefert PhotoSwipe 4 mit dem Standardaussehen: schwarzer
   Hintergrund, winzige Symbolknoepfe aus einer Sprite-Grafik, ein Zaehler in
   11 Pixel Schrift oben links. Fuer eine Kundschaft ueber 60 ist das dreimal
   zu wenig — man sieht nicht, wo man ist, und findet den Weg hinaus nicht.

   Geaendert wird deshalb:
     der Grund      leicht abgedunkelt und unscharf statt schwarz, damit man
                    sieht, dass die Seite noch da ist und man nicht in einem
                    anderen Programm gelandet ist
     der Zaehler    gross und in ganzen Worten: "Bild 3 von 12"
     der Schliessen-Knopf  ein richtiger Knopf mit Kreuz UND dem Wort
                    "Schliessen" — ein Symbol allein wird nicht erkannt
   ======================================================================== */

.pswp__bg {
	background: rgba(22, 32, 43, 0.72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Der Zaehler oben links. */
.pswp__counter {
	height: auto;
	margin: 10px 0 0 14px;
	padding: 6px 14px;
	font-size: 17px; font-weight: 600; line-height: 1.3;
	color: #fff;
	background: rgba(22, 32, 43, 0.55);
	border-radius: 999px;
	opacity: 1;
	font-variant-numeric: tabular-nums;
}
.pswp__counter::before { content: "Bild "; }

/* Der Schliessen-Knopf: sichtbare Flaeche, Kreuz und Wort. */
.pswp button.pswp__button--close,
.pswp button.pswp__button--close:hover {
	width: auto !important; height: auto !important;
	min-height: 48px;
	margin: 12px 16px 0 0;
	padding: 0 20px 0 15px;
	background-color: #fff !important;
	background-image: none !important;
	border-radius: var(--mt-r1);
	color: var(--mt-text);
	opacity: 1 !important;
	font-size: 16px; font-weight: 600;
	display: inline-flex; align-items: center; gap: 9px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important;
}
.pswp button.pswp__button--close:hover { background-color: var(--mt-flaeche) !important; }
.pswp button.pswp__button--close::before {
	content: "\00d7";
	font-size: 26px; line-height: 1; font-weight: 400;
	background: none !important;
	width: auto; height: auto; position: static;
}
.pswp button.pswp__button--close::after { content: "Schließen"; }

/* Die Blaetterpfeile bekommen eine sichtbare Flaeche. */
.pswp button.pswp__button--arrow--left,
.pswp button.pswp__button--arrow--right {
	background-color: transparent !important;
	background-image: none !important;
	width: 72px !important; height: 72px !important;
	margin-top: -36px;
	opacity: 1 !important;
}
.pswp button.pswp__button--arrow--left::before,
.pswp button.pswp__button--arrow--right::before {
	background-color: rgba(255, 255, 255, 0.94) !important;
	background-image: none !important;
	border-radius: 50%;
	width: 56px; height: 56px;
	top: 8px; left: 8px;
	margin: 0;
	display: grid; place-items: center;
	font-size: 32px; line-height: 1; color: var(--mt-text);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.pswp button.pswp__button--arrow--left::before { content: "\2039"; }
.pswp button.pswp__button--arrow--right::before { content: "\203a"; }

.pswp__top-bar { background: none !important; }

@media (max-width: 560px) {
	.pswp__button--close::after { display: none; }
	.pswp__button--close { padding: 9px 13px; }
}

/* --- Lupe für die Lightbox --------------------------------------------- */
.mt-lupe {
	position: absolute; right: 10px; bottom: 10px; z-index: 5;
	display: inline-flex; align-items: center; gap: 7px;
	border: 1px solid var(--mt-linie-kraeftig);
	border-radius: var(--mt-r1);
	background: rgba(255, 255, 255, 0.96);
	color: var(--mt-text);
	padding: 9px 14px; min-height: 42px;
	font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
	box-shadow: 0 2px 8px rgba(22, 32, 43, 0.14);
}
.mt-lupe svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mt-lupe:hover { border-color: var(--mt-blau); color: var(--mt-blau-tief); background: #fff; }

/* Beim Ziehen keinen Textcursor zeigen. .mt-ziehbar setzt theme.js —
   ohne Skript kann man nicht ziehen, und dann darf der Zeiger es auch nicht
   behaupten. */
.woocommerce div.product div.images .flex-viewport.mt-ziehbar { cursor: grab; }
.woocommerce div.product div.images .flex-viewport.mt-zieht { cursor: grabbing; }
.woocommerce div.product div.images .flex-viewport.mt-zieht img { user-select: none; -webkit-user-drag: none; }

/* --- Preis und Datenblatt ---------------------------------------------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--mt-text); font-size: 30px; font-weight: 700; margin: 0 0 4px;
	line-height: 1.15;
}
.woocommerce div.product p.price del { font-size: 21px; color: var(--mt-text-leise); font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }
.mt-preis-hinweis { font-size: 14.5px; color: var(--mt-text-leise); margin: 0 0 var(--mt-r4); }
.mt-preis-hinweis a { color: var(--mt-text-leise); }

.woocommerce div.product form.cart { margin: 0 0 var(--mt-r4); display: flex; gap: var(--mt-r3); flex-wrap: wrap; align-items: flex-start; }
/* Menge und Kaufknopf stehen nebeneinander, also sind sie gleich hoch.
   Der Kaufknopf traegt seit dem Umbau das Mass des Hauptknopfs (54px) —
   das Feld daneben blieb bei 48 und stand einen halben Zentimeter tiefer.
   Genau die Sorte Unterschied, die man nicht benennen kann, aber sieht. */
/* DIE KAUFZEILE HAT EINE HOEHE, NICHT ZWEI.
   Mengenfeld und Kaufknopf stehen nebeneinander. Solange jeder seine
   eigene Hoehe traegt, muessen zwei Regeln zueinander passen — und beim
   naechsten Bruchstellen-Wechsel passen sie wieder nicht. Deshalb steht
   die Hoehe EINMAL an der Zeile, und beide holen sie sich von dort. */
.woocommerce div.product form.cart { --kaufzeile: var(--mt-hoehe-gross); }
.woocommerce div.product form.cart .quantity input,
.woocommerce div.product form.cart .single_add_to_cart_button {
	min-height: var(--kaufzeile);
	font-size: var(--mt-s-bedien);
}

/* Bis 31.08.2026 stand zehn Zeilen weiter unten
       .woocommerce div.product form.cart .button { min-height:48px }
   — gleich stark wie die Regel darueber, aber spaeter, also gewinnend.
   Das Feld stand auf 54, der Knopf auf 48, und im Quelltext sah es aus,
   als waere es geregelt. Genau diese stillen Ueberholmanoever sind der
   Grund fuer den Umbau. */
.woocommerce div.product form.cart .quantity input { width: 84px; text-align: center; }

@media (max-width: 600px) {
	.woocommerce div.product form.cart { --kaufzeile: var(--mt-hoehe); }
}

.woocommerce .quantity input[type="number"] { padding: 11px 6px; }


.woocommerce div.product p.stock { font-size: 15px; font-weight: 600; margin: 0 0 var(--mt-r3); }
.woocommerce div.product p.stock.in-stock { color: var(--mt-gruen); }
.woocommerce div.product p.stock.out-of-stock { color: var(--mt-rot); }

.mt-daten { border: 1px solid var(--mt-linie); }
.mt-daten dl { margin: 0; }
.mt-daten .mt-zeile {
	display: grid; grid-template-columns: 132px minmax(0, 1fr);
	gap: var(--mt-r3);
	padding: 9px var(--mt-r4);
	border-bottom: 1px solid var(--mt-linie);
	font-size: 15px;
}
.mt-daten .mt-zeile:last-child { border-bottom: none; }
.mt-daten .mt-zeile:nth-child(odd) { background: var(--mt-flaeche); }
.mt-daten dt { color: var(--mt-text-leise); margin: 0; }
.mt-daten dd { margin: 0; }

/* Beschreibung und Bewertungen: offen, nicht hinter Reitern */
.woocommerce div.product .woocommerce-tabs ul.tabs { display: none; }
.woocommerce div.product .woocommerce-tabs .panel { margin: 0; padding: 0; }
.mt-abschnitt { border-top: 1px solid var(--mt-linie); padding-top: var(--mt-r5); margin-top: var(--mt-r5); }
.mt-abschnitt > h2 { font-size: 20px; }

.woocommerce #reviews #comments ol.commentlist li .comment-text { border: 1px solid var(--mt-linie); border-radius: var(--mt-r1); }

.mc-rezension-weg {
	display: inline-block; margin-top: var(--mt-r2);
	font-size: 13.5px; color: var(--mt-rot); text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.mc-rezension-weg:hover { color: var(--mt-rot); opacity: .8; }

/* ===========================================================================
   11. Sortierung und Seitenzahlen
   ======================================================================== */

.mt-katalog-leiste {
	display: flex; flex-wrap: wrap; gap: var(--mt-r4);
	align-items: center; justify-content: space-between;
	border: 1px solid var(--mt-linie);
	background: var(--mt-flaeche);
	padding: 10px var(--mt-r4);
	margin-bottom: var(--mt-r4);
	font-size: 15px;
}
.woocommerce .woocommerce-result-count { margin: 0; color: var(--mt-text-leise); font-size: 15px; }
.woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select { width: auto; font-size: 15px; padding: 7px var(--mt-r5) 7px var(--mt-r3); }

nav.woocommerce-pagination { margin: var(--mt-r5) 0; }
nav.woocommerce-pagination ul { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; list-style: none; }
nav.woocommerce-pagination ul li { border: none; margin: 0; overflow: visible; }
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span {
	display: block; text-decoration: none;
	border: 1px solid var(--mt-linie); border-radius: var(--mt-r1);
	padding: 10px 16px; font-size: 15.5px; min-width: 46px; text-align: center;
	color: var(--mt-text); background: var(--mt-grund);
}
nav.woocommerce-pagination ul li a:hover { border-color: var(--mt-blau); background: var(--mt-blau-hauch); color: var(--mt-blau-tief); }
nav.woocommerce-pagination ul li span.current {
	background: var(--mt-blau-dunkel); border-color: var(--mt-blau-schrift); color: #fff; font-weight: 700;
}

/* ===========================================================================
   12. Meldungen
   ======================================================================== */

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
	border-top: none; border-left: 4px solid var(--mt-blau);
	background: var(--mt-blau-hauch); color: var(--mt-text);
	padding: var(--mt-r4) var(--mt-r5); margin: 0 0 var(--mt-r5);
	font-size: 16px; line-height: 1.55;
	display: flex; flex-wrap: wrap; gap: var(--mt-r3); align-items: center;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }
.woocommerce-message { border-left-color: var(--mt-gruen); background: var(--mt-gruen-hauch); }
.woocommerce-error { border-left-color: var(--mt-rot); background: var(--mt-rot-hauch); list-style: none; }
.woocommerce-error li { margin: 0; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }

/* ===========================================================================
   12b. Katalogkopf

   ======================================================================== */

.woocommerce-products-header { margin-bottom: var(--mt-r4); }
.woocommerce-products-header__title { margin-bottom: var(--mt-r2); }
.woocommerce-products-header .term-description { color: var(--mt-text-leise); max-width: 74ch; }

/* ===========================================================================
   12c. Warenkorb und Kassa

   Beide laufen seit 26.08.2026 wieder ueber die klassischen Kurzbefehle und
   nicht mehr ueber die WooCommerce-Bloecke. Die Bloecke bauen sich im Browser
   selbst zusammen, bringen ihr eigenes Aussehen mit und liessen sich mit dem
   Rest des Shops nicht in Einklang bringen. Die Begruendung im Einzelnen steht
   in C:\Modelltoys-Import\17-kassa.php.

   Leitgedanke der Gestaltung, wie ueberall hier: Der Kunde ist ueber 60, sitzt
   vielleicht das erste Mal an einer Bestellung in diesem Shop und soll an
   keiner Stelle raten muessen, was als Naechstes zu tun ist. Also: grosse
   Zeilen, sichtbare Beschriftungen, ein einziger auffaelliger Knopf je Schritt.
   ======================================================================== */

/* --- Tabellen (Warenkorb, Bestelluebersicht, Bestellungen im Konto) ----- */
.woocommerce table.shop_table {
	border: 1px solid var(--mt-linie); border-radius: 0;
	border-collapse: collapse; width: 100%;
	margin: 0 0 var(--mt-r5);
	background: var(--mt-grund);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-bottom: 1px solid var(--mt-linie);
	padding: var(--mt-r3) var(--mt-r4);
	vertical-align: middle;
	text-align: left;
}
.woocommerce table.shop_table thead th {
	background: var(--mt-flaeche);
	font-size: 13.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--mt-text-leise);
	white-space: nowrap;
}
.woocommerce table.shop_table tbody tr:last-child td { border-bottom: none; }
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td { font-weight: 600; }

/* --- Der Warenkorb ------------------------------------------------------ */
.woocommerce-cart-form { margin: 0; }

/* SPALTENBREITEN.

   Bei table-layout: auto ist eine angegebene Breite nur ein Wunsch: Bleibt
   Platz uebrig, verteilt ihn der Browser auf die Spalten — und zwar zuerst
   auf die, die keine Vorgabe haben. Ohne eine Vorgabe fuer die Namensspalte
   landete der ganze Rest in der Entfernen-Spalte, die dadurch 218 Pixel breit
   wurde (gemessen am 26.08.2026).

   Die Namensspalte bekommt deshalb ausdruecklich den Loewenanteil. Sie
   braucht ihn auch: Modellnamen sind hier gern acht Woerter lang. */
.woocommerce table.cart .product-thumbnail { width: 96px; }
.woocommerce table.cart .product-name { width: 46%; }
.woocommerce table.cart .product-price,
.woocommerce table.cart .product-subtotal { width: 12%; }
.woocommerce table.cart .product-quantity { width: 11%; }
.woocommerce table.cart img {
	width: 84px; height: auto;
	aspect-ratio: 3 / 2; object-fit: contain;
	border: 1px solid var(--mt-linie); background: #fff; padding: 3px;
	display: block;
}
.woocommerce table.cart .product-name a {
	font-weight: 600; font-size: 16px; color: var(--mt-text); text-decoration: none;
}
.woocommerce table.cart .product-name a:hover { color: var(--mt-blau-tief); text-decoration: underline; }
.woocommerce table.cart .product-name .variation,
.woocommerce table.cart dl.variation {
	font-size: 13.5px; color: var(--mt-text-leise); margin: 4px 0 0;
}
.woocommerce table.cart .product-price,
.woocommerce table.cart .product-subtotal { white-space: nowrap; font-variant-numeric: tabular-nums; }
.woocommerce table.cart .product-subtotal { font-weight: 700; }
.woocommerce table.cart td.product-quantity .quantity input { width: 78px; text-align: center; }

/* Der Entfernen-Knopf: ein beschrifteter Kreis, kein blasses Kreuz.
   WooCommerce liefert ein × als Text — hier bekommt es eine Klickflaeche. */
.woocommerce table.cart .product-remove { width: 52px; text-align: center; }
.woocommerce a.remove {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--mt-linie);
	border-radius: 50%;
	color: var(--mt-text-leise) !important;
	background: var(--mt-grund);
	font-size: 22px; line-height: 1; font-weight: 400;
	text-decoration: none;
}
.woocommerce a.remove:hover {
	background: var(--mt-rot-hauch) !important;
	border-color: var(--mt-rot);
	color: var(--mt-rot) !important;
}

/* Die Zeile unter der Tabelle: Gutschein links, Aktualisieren rechts.

   KEIN display: flex AUF DER ZELLE.
   Diese Zelle traegt colspan="6". Sobald sie display: flex bekommt, ist sie
   keine Tabellenzelle mehr — das colspan verfaellt, die Zelle sitzt nur noch
   in der ersten Spalte, und der Gutscheinblock steht als schmaler Kasten
   links unter dem Bild. Genau so sah es aus.

   Die Zelle bleibt deshalb eine Zelle; ausgerichtet wird mit float und
   text-align, wie man es bei Tabellen tut. */
.woocommerce table.cart td.actions {
	background: var(--mt-flaeche);
	text-align: right;
	padding: var(--mt-r3) var(--mt-r4);
}
.woocommerce table.cart td.actions::after { content: ""; display: table; clear: both; }
.woocommerce table.cart td.actions .coupon {
	float: left;
	display: flex; gap: var(--mt-r2); flex-wrap: wrap; align-items: center;
}
.woocommerce table.cart td.actions .coupon input[type="text"] { min-width: 180px; }
/* Erst die Frage, das Feld nach dem Klick (theme.js, gutscheinklappe) — 15.09.2026 */
.woocommerce table.cart td.actions .coupon.mt-zu { display: none; }
.woocommerce table.cart td.actions .mt-gutschein-frage {
	float: left; margin: 0; min-height: var(--mt-hoehe);
	display: flex; align-items: center; gap: 6px;
	font-size: var(--mt-s-klein); color: var(--mt-text-leise);
}
.woocommerce table.cart td.actions .mt-gutschein-frage a { color: var(--mt-blau-tief); text-decoration: underline; }
.woocommerce table.cart td.actions .button { min-height: var(--mt-hoehe); }

/* "Warenkorb aktualisieren" ist die stille Variante: Er steht neben dem
   Hauptweg ("Zur Kassa") und soll ihn nicht ueberstrahlen. Mehr ist dazu
   nicht zu sagen — Ruhe, Ueberfahren und Abgeschaltet kommen aus dem
   Bauteil, samt der Regel, dass jeder Zustand Grund, Rahmen und Schrift
   gemeinsam setzt. */
.woocommerce table.cart td.actions button[name="update_cart"] {
	--knopf-grund:  var(--mt-grund);
	--knopf-rand:   var(--mt-linie-kraeftig);
	--knopf-schrift: var(--mt-text);
}
.woocommerce table.cart td.actions button[name="update_cart"]:hover:not(:disabled) {
	--knopf-grund:  var(--mt-blau-hauch);
	--knopf-rand:   var(--mt-blau);
	--knopf-schrift: var(--mt-blau-schrift);
}

/* Summenkasten neben dem Warenkorb, nicht darunter.
   WooCommerce stellt .cart-collaterals mit float unter die Tabelle. Bei einem
   Warenkorb mit acht Modellen liegt die Summe dann so weit unten, dass man
   scrollen muss, um zu sehen, was man zahlt. */
.woocommerce .cart-collaterals { display: block; width: auto; }
.woocommerce .cart-collaterals::after { content: ""; display: table; clear: both; }
.woocommerce .cart-collaterals .cross-sells { display: none; }
.woocommerce .cart-collaterals .cart_totals {
	float: none; width: auto;
	max-width: 460px; margin-left: auto;
	border: 1px solid var(--mt-linie);
	background: var(--mt-flaeche);
	padding: var(--mt-r4) var(--mt-r5);
}
.woocommerce .cart-collaterals .cart_totals h2 {
	font-size: 18px; margin: 0 0 var(--mt-r3);
	padding-bottom: var(--mt-r2);
	border-bottom: 2px solid var(--mt-dunkel);
}
.woocommerce .cart_totals table.shop_table { border: none; background: none; margin: 0; }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
	border-bottom: 1px dotted var(--mt-linie-kraeftig);
	padding: 9px 0;
	background: none;
}
.woocommerce .cart_totals table.shop_table th { font-weight: 400; color: var(--mt-text-leise); text-transform: none; letter-spacing: 0; font-size: 15px; }
.woocommerce .cart_totals table.shop_table td { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td { border-bottom: none; font-size: 19px; font-weight: 700; color: var(--mt-text); padding-top: var(--mt-r3); }
.woocommerce .cart_totals .wc-proceed-to-checkout { padding: var(--mt-r4) 0 0; }
.woocommerce .cart_totals .wc-proceed-to-checkout .button {
	display: flex; width: 100%; justify-content: center; align-items: center;
	min-height: 52px; font-size: 17px;
}
.woocommerce .woocommerce-shipping-destination { color: var(--mt-text-leise); font-size: 14px; }
.woocommerce .shipping-calculator-button { font-size: 14.5px; }

.woocommerce ul#shipping_method { margin: 0; padding: 0; list-style: none; text-align: right; }
.woocommerce ul#shipping_method li { margin: 0 0 6px; padding: 0; }
.woocommerce ul#shipping_method li:last-child { margin-bottom: 0; }
.woocommerce ul#shipping_method label { cursor: pointer; }

/* Der leere Warenkorb ist eine Sackgasse — hier steht ein Weg zurueck. */
.woocommerce .cart-empty, .woocommerce .wc-empty-cart-message p { font-size: 17px; }
.woocommerce .return-to-shop { margin-top: var(--mt-r4); }
.woocommerce .return-to-shop .button { min-height: 48px; }

/* --- Die Kassa ----------------------------------------------------------
   Zwei Spalten: links die Eingaben, rechts die Bestelluebersicht mit dem
   Bezahlknopf. Die Uebersicht klebt beim Scrollen mit — bei zwoelf
   Formularfeldern ist die Summe sonst dauerhaft ausser Sicht.
   ------------------------------------------------------------------------ */
.woocommerce form.checkout {
	display: grid;
	/* GLEICH BREIT, nicht 1,25 zu 1.
	   Seit die Bestelluebersicht Produktbilder traegt, ist die rechte Spalte
	   die engere von beiden: Gemessen blieben dem Produktnamen 164 Pixel, und
	   "Mercedes Benz AMG GT3 Evo 2025 SPA 24 Stunden Rennen ..." stand darin
	   139 Pixel hoch — rund zehn Zeilen fuer EINE Position.
	   Die linke Spalte verliert dabei nichts: Dort stehen einspaltige
	   Formularfelder, die bei 558 Pixeln genauso gut lesbar sind wie bei 620. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--mt-r5) var(--mt-r6);
	align-items: start;
}
/* Die Eingaben stehen links und ueberspannen BEIDE Zeilen.
   Ohne das span 2 liegt "Ihre Bestellung" in Zeile 1 und die Uebersicht in
   Zeile 2 — und Zeile 2 beginnt erst unter den Eingaben. Die Uebersicht
   rutschte dadurch 1.552 Pixel nach unten, also weit unter das Formular,
   obwohl daneben Platz war (gemessen am 26.08.2026). */
.woocommerce form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin: 0 0 var(--mt-r3); }
.woocommerce form.checkout > #order_review { grid-column: 2; grid-row: 2; }
.woocommerce form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }

/* WooCommerce teilt die Kundendaten selbst noch einmal in zwei Spalten. Bei
   uns steht links schon die Kategoriespalte — dann wird es zu eng. */
.woocommerce form.checkout .col2-set { display: block; width: auto; }
.woocommerce form.checkout .col2-set .col-1,
.woocommerce form.checkout .col2-set .col-2 { float: none; width: auto; margin-bottom: var(--mt-r5); }

.woocommerce form.checkout h3 {
	font-size: 18px; margin: 0 0 var(--mt-r3);
	padding-bottom: var(--mt-r2);
	border-bottom: 2px solid var(--mt-dunkel);
}

.woocommerce-checkout #order_review {
	border: 1px solid var(--mt-linie);
	background: var(--mt-flaeche);
	padding: var(--mt-r4) var(--mt-r5);
	position: sticky; top: 96px;
}
.woocommerce-checkout #order_review table.shop_table { border: none; background: none; margin: 0 0 var(--mt-r3); }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding: 9px 0; border-bottom: 1px dotted var(--mt-linie-kraeftig); background: none;
}
.woocommerce-checkout #order_review table.shop_table thead th { text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.woocommerce-checkout #order_review td.product-total,
/* ALLE Betraege rechtsbuendig, nicht nur die Endsumme.

   Bis 26.08.2026 stand text-align: right nur bei .order-total. Zwischensumme,
   Versand und Umsatzsteuer standen dadurch linksbuendig, die Endsumme rechts —
   in einer Spalte untereinander, in der man Zahlen vergleichen will. Wer
   Betraege untereinander liest, braucht sie an derselben Kante.

   tabular-nums dazu: Ohne das sind die Ziffern verschieden breit und die
   Kommastellen stehen nicht untereinander. */
.woocommerce-checkout #order_review table.shop_table td { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce-checkout #order_review table.shop_table th { text-align: left; }
.woocommerce-checkout #order_review table.shop_table td.product-name { text-align: left; }
.woocommerce-checkout #order_review table.shop_table thead th:last-child { text-align: right; }

/* NUR DIE ENDSUMME IST FETT.

   Vorher waren es vier verschiedene Staerken untereinander: Zwischensumme und
   Umsatzsteuer halbfett (600, aus der allgemeinen Fussregel), die Versandzeile
   fett (ihr eigenes <strong>), die Gesamtsumme fett. Wenn fast alles
   hervorgehoben ist, hebt sich nichts mehr hervor — und der Betrag, auf den es
   ankommt, geht in der Reihe unter.

   Jetzt: alle Zwischenzeilen normal, die Gesamtsumme fett und groesser. */
.woocommerce-checkout #order_review table.shop_table tfoot th,
.woocommerce-checkout #order_review table.shop_table tfoot td,
.woocommerce-checkout #order_review table.shop_table td strong { font-weight: 400; }
/* table.shop_table muss mit hinein: Die Grundregel darueber traegt es und
   ist damit spezifischer — ohne das blieb auch die Gesamtsumme mager. */
.woocommerce-checkout #order_review table.shop_table tfoot .order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot .order-total td,
.woocommerce-checkout #order_review table.shop_table tfoot .order-total td strong { font-weight: 700; }
.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td { font-size: 19px; font-weight: 700; border-bottom: none; padding-top: var(--mt-r3); }
.woocommerce-checkout #order_review .product-name { font-size: 15px; }
.woocommerce-checkout #order_review .product-quantity { color: var(--mt-text-leise); }

/* Die Zahlungsart. Nur eine im Shop (Vorkasse), aber sie muss trotzdem
   erkennbar eine Auswahl sein — sonst uebersieht man den Hinweistext
   darunter, in dem steht, wie bezahlt wird. */
.woocommerce-checkout #payment {
	background: var(--mt-grund);
	border: 1px solid var(--mt-linie);
	border-radius: 0;
	padding: var(--mt-r4);
	margin-top: var(--mt-r4);
}
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none; margin: 0; padding: 0; border: none;
}
.woocommerce-checkout #payment ul.payment_methods li { margin: 0 0 var(--mt-r2); padding: 0; }
.woocommerce-checkout #payment ul.payment_methods li:last-child { margin-bottom: 0; }
.woocommerce-checkout #payment ul.payment_methods label {
	display: inline-flex; align-items: center; gap: var(--mt-r2);
	font-size: 16px; font-weight: 600; cursor: pointer;
	min-height: 40px;
}
/* DER ERKLAERKASTEN IST KEINE WARNUNG.
   Er stand blau umrandet auf blauem Grund, mit einem Dreieck nach oben —
   die Bildsprache eines Hinweises, den man wegklickt. Der Text ist aber
   die WICHTIGSTE Information der ganzen Seite: wie bezahlt wird und wann
   versendet wird. Jetzt ruhig, mit einem kraeftigen Strich links, wie ein
   Zitat: gehoert erkennbar zur Zahlungsart darueber, schreit aber nicht. */
.woocommerce-checkout #payment div.payment_box {
	background: var(--mt-flaeche);
	border: 1px solid var(--mt-linie);
	border-left: 4px solid var(--mt-blau);
	color: var(--mt-text);
	font-size: 15px; line-height: 1.6;
	margin: var(--mt-r2) 0 0;
	padding: var(--mt-r3) var(--mt-r4);
	border-radius: 0 var(--mt-r1) var(--mt-r1) 0;
}
/* Das Dreieck war ein Pseudoelement von WooCommerce. Es bekam bisher nur
   eine andere Farbe — jetzt ist es weg. */
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.payment_box p:last-child { margin-bottom: 0; }
.woocommerce-checkout #payment .form-row.place-order { padding: var(--mt-r4) 0 0; margin: 0; }
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--mt-r3); }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text { font-size: 14px; color: var(--mt-text-leise); }

/* Der Hinweisstreifen ganz oben ("Du hast einen Gutschein?" / "Anmelden") */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: var(--mt-r4); }

/* Bestellbestaetigung */
.woocommerce ul.order_details {
	list-style: none; margin: 0 0 var(--mt-r5); padding: var(--mt-r4);
	display: flex; flex-wrap: wrap; gap: var(--mt-r5);
	background: var(--mt-flaeche); border: 1px solid var(--mt-linie);
}
.woocommerce ul.order_details li {
	border: none; margin: 0; padding: 0;
	font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--mt-text-leise);
}
.woocommerce ul.order_details li strong {
	display: block; font-size: 17px; text-transform: none; letter-spacing: 0;
	color: var(--mt-text); margin-top: 4px;
}

/* --- Formulare, Konto --------------------------------------------------- */
.woocommerce form .form-row { padding: 0; margin-bottom: var(--mt-r4); }
.woocommerce form .form-row label {
	display: block; margin-bottom: 5px;
	font-size: 14.5px; font-weight: 600;
}
.woocommerce form .form-row label .required { color: var(--mt-rot); text-decoration: none; border: none; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }
.woocommerce form .form-row .woocommerce-input-wrapper { width: 100%; }
.woocommerce form .form-row-wide { clear: none; }
.woocommerce form.login, .woocommerce form.register,
.woocommerce form.checkout_coupon, .woocommerce-ResetPassword {
	border: 1px solid var(--mt-linie); border-radius: 0;
	padding: var(--mt-r5); background: var(--mt-grund);
}
.woocommerce form.login .button, .woocommerce form.register .button { min-height: 46px; }
.woocommerce .woocommerce-form__label-for-checkbox { font-weight: 400; display: flex; gap: var(--mt-r2); align-items: flex-start; }
.woocommerce .woocommerce-form__label-for-checkbox input { margin-top: 3px; }

/* Anmeldung, Registrierung, Passwort vergessen — 15.09.2026.
   "Angemeldet bleiben" und "Ich habe die Datenschutzerklaerung gelesen"
   sassen verschoben: Kaestchen oben, Text unten haengend (Marcels Bild).
   Die Regel darueber ist fuer die Kassa gedacht, wo der Text mehrzeilig
   sein kann. Hier ist er einzeilig — Kaestchen und Text auf EINE
   Mittellinie, und die Zeile so hoch wie ein Knopf, damit man sie trifft. */
.woocommerce form.login .woocommerce-form__label-for-checkbox,
.woocommerce form.register .woocommerce-form__label-for-checkbox,
.woocommerce-form-login .woocommerce-form__label-for-checkbox,
.woocommerce-form-register .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--mt-r2);
	min-height: var(--mt-klick-min);
	margin: 0;
	line-height: 1.35;
	cursor: pointer;
}
.woocommerce form.login .woocommerce-form__label-for-checkbox input,
.woocommerce form.register .woocommerce-form__label-for-checkbox input,
.woocommerce-form-login .woocommerce-form__label-for-checkbox input,
.woocommerce-form-register .woocommerce-form__label-for-checkbox input {
	margin: 0;
	width: var(--mt-haken);
	height: var(--mt-haken);
}
.woocommerce form.login .woocommerce-form__label-for-checkbox span,
.woocommerce form.register .woocommerce-form__label-for-checkbox span {
	display: inline;
}
/* Knopf "Anmelden" und "Angemeldet bleiben" stehen in EINEM Absatz —
   nebeneinander auf einer Linie, mit Luft dazwischen. */
.woocommerce form.login p.form-row:has(> button),
.woocommerce form.register p.form-row:has(> button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mt-r3) var(--mt-r4);
}
/* Der Knopf zuerst, das Kaestchen daneben — so stand es auch vorher. */
.woocommerce form.login p.form-row:has(> button) > button,
.woocommerce form.register p.form-row:has(> button) > button { order: -1; }

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--mt-linie); }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--mt-linie); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 13px var(--mt-r4); text-decoration: none; color: var(--mt-text); min-height: 46px; }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--mt-blau-hauch); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--mt-blau-dunkel); color: #fff; font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-content { padding: 0; }

@media (min-width: 769px) {
	.woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 240px; }
	.woocommerce-account .woocommerce-MyAccount-content { float: right; width: calc(100% - 272px); }
	.woocommerce-account .woocommerce::after { content: ""; display: table; clear: both; }
}

@media (max-width: 980px) {
	.woocommerce form.checkout { grid-template-columns: minmax(0, 1fr); }
	.woocommerce form.checkout > #customer_details,
	.woocommerce form.checkout > #order_review_heading,
	.woocommerce form.checkout > #order_review { grid-column: 1; grid-row: auto; }
	.woocommerce-checkout #order_review { position: static; }
	.woocommerce .cart-collaterals .cart_totals { max-width: none; }
}

@media (max-width: 768px) {
	/* Die Warenkorbtabelle bricht auf Zeilen um: WooCommerce liefert dafuer
	   data-title an jeder Zelle, das nutzen wir als Beschriftung. */
	.woocommerce table.shop_table_responsive thead,
	.woocommerce table.cart thead { display: none; }
	.woocommerce table.shop_table_responsive tr,
	.woocommerce table.cart tbody tr {
		display: block; border-bottom: 1px solid var(--mt-linie-kraeftig);
		padding: var(--mt-r3) 0;
	}
	.woocommerce table.shop_table_responsive td,
	.woocommerce table.cart tbody td {
		display: flex; justify-content: space-between; align-items: center; gap: var(--mt-r3);
		border-bottom: none; padding: 6px var(--mt-r3); text-align: right;
	}
	.woocommerce table.shop_table_responsive td::before,
	.woocommerce table.cart tbody td::before {
		content: attr(data-title);
		font-size: 13px; font-weight: 600; color: var(--mt-text-leise);
		text-transform: uppercase; letter-spacing: 0.04em;
		text-align: left;
	}
	.woocommerce table.cart tbody td.product-thumbnail::before,
	.woocommerce table.cart tbody td.product-remove::before { content: none; }
	.woocommerce table.cart tbody td.product-thumbnail { justify-content: flex-start; }
	.woocommerce table.cart img { width: 110px; }
	.woocommerce table.cart td.actions { display: block; text-align: left; }
	.woocommerce table.cart td.actions .coupon { float: none; margin-bottom: var(--mt-r3); }
	/* Die Spaltenvorgaben gelten nur fuer die waagrechte Tabelle. Sobald sie
	   auf Zeilen umbricht, waeren sie hinderlich. */
	.woocommerce table.cart .product-name,
	.woocommerce table.cart .product-price,
	.woocommerce table.cart .product-subtotal,
	.woocommerce table.cart .product-quantity,
	.woocommerce table.cart .product-remove,
	.woocommerce table.cart .product-thumbnail { width: auto; }
	.woocommerce table.cart td.actions .button { width: 100%; }
}

/* ===========================================================================
   13. Fussbereich
   ======================================================================== */

.mt-fuss {
	border-top: 3px solid var(--mt-blau);
	background: var(--mt-flaeche);
	font-size: 15px;
	color: var(--mt-text-leise);
}

.mt-fuss-band { background: var(--mt-grund); border-bottom: 1px solid var(--mt-linie); }
.mt-fuss-merkmale {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--mt-r4);
	padding: var(--mt-r5) 0;
}
.mt-merkmal { display: flex; align-items: center; gap: var(--mt-r3); }
.mt-merkmal svg {
	width: 30px; height: 30px; flex: 0 0 auto;
	fill: none; stroke: var(--mt-blau); stroke-width: 1.6;
	stroke-linecap: round; stroke-linejoin: round;
}
.mt-merkmal b { display: block; color: var(--mt-text); font-size: 15px; }
.mt-merkmal span { display: block; font-size: 13.5px; color: var(--mt-text-leise); }

.mt-fuss-spalten {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--mt-r5);
	padding: var(--mt-r7) 0 var(--mt-r6);
}
.mt-fuss h2 { font-size: 13px; color: var(--mt-text); margin-bottom: var(--mt-r3); text-transform: uppercase; letter-spacing: 0.08em; }
.mt-fuss ul { list-style: none; margin: 0; padding: 0; }
.mt-fuss li { margin-bottom: 8px; }
.mt-fuss a { color: var(--mt-text-leise); text-decoration: none; }
.mt-fuss a:hover { color: var(--mt-blau-schrift); text-decoration: underline; }
.mt-fuss address { font-style: normal; margin-bottom: var(--mt-r3); line-height: 1.7; }
/* width, nicht nur max-width: WordPress schreibt width="300" als Attribut
   ins Bild, und dagegen kommt eine blosse Obergrenze nicht an. */
.mt-fuss-logo { display: block; width: 168px; max-width: 100%; height: auto; margin-bottom: var(--mt-r4); }

.mt-fuss-unten {
	border-top: 1px solid var(--mt-linie);
	padding: var(--mt-r4) 0;
	display: flex; flex-wrap: wrap; gap: var(--mt-r4); justify-content: space-between; align-items: center;
	font-size: 13.5px;
}

/* Sprachumschalter in der Fusszeile (25.09.2026): derselbe Schalter wie oben,
   umgefaerbt fuer den hellen Grund. */
.mt-fuss-sprache { display: inline-flex; align-items: center; gap: 10px; }
.mt-sprachen.mt-sprachen-fuss { border-color: var(--mt-linie); background: #fff; }
.mt-sprachen.mt-sprachen-fuss a { color: var(--mt-text); padding: 6px 12px; min-height: 36px; font-size: 14px; font-weight: 400; letter-spacing: 0; transition: background-color .15s ease, color .15s ease; }
.mt-fuss .mt-sprachen.mt-sprachen-fuss a:hover { background: var(--mt-blau-hauch); color: var(--mt-blau-tief); text-decoration: none; }
.mt-sprachen.mt-sprachen-fuss a + a { border-left-color: var(--mt-linie); }
.mt-fuss .mt-sprachen.mt-sprachen-fuss [aria-current="true"] { background: var(--mt-blau-tief); color: #fff; }

/* ===========================================================================
   14. Inhaltsseiten
   ======================================================================== */

/* --- Volle Breite auf allen Seiten -------------------------------------
   Bis 08.09.2026 stand hier eine Lesebreite von 72ch (rund 660 Pixel) fuer
   den Fliesstext. Marcel hat das gestrichen: Die Unterseiten sollen die
   volle Breite nutzen, so wie es "Zahlung und Versand" ohnehin schon tat —
   dort brach nur die Tarif-Tabelle aus der Begrenzung aus, weshalb die eine
   Seite breit aussah und alle anderen schmal.

   Die frueheren Ausnahmen fuer Warenkorb, Kassa, Kundenkonto und Merkliste
   sind damit hinfaellig. Sie hatten einen ernsten Grund: Am 26.08.2026 war
   .woocommerce 660 Pixel breit in einem 1.148 Pixel breiten Bereich, die
   Warenkorbtabelle gequetscht, der Produktname auf acht Zeilen umgebrochen,
   das Bildchen 8 Pixel breit. Ohne Begrenzung kann das nicht mehr passieren.

   Die Regel fuer Tabellen bleibt: Sie sollen die Breite nutzen und bei
   schmalen Fenstern in einem eigenen Rollbereich stehen, damit die SEITE
   nie seitlich scrollt.
   ------------------------------------------------------------------------ */
.mt-inhalt { max-width: none; }

.mt-inhalt > table,
.mt-inhalt > figure.wp-block-table {
	width: 100%;
	max-width: none;
	display: block;
	overflow-x: auto;
}
.mt-inhalt img { height: auto; }
.mt-inhalt table { width: 100%; border-collapse: collapse; margin-bottom: var(--mt-r5); }
.mt-inhalt th, .mt-inhalt td { border: 1px solid var(--mt-linie); padding: 9px var(--mt-r3); text-align: left; }
.mt-inhalt th { background: var(--mt-flaeche); }
.mt-inhalt td.zahl, .mt-inhalt th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt-tabellenrahmen { overflow-x: auto; }

/* ===========================================================================
   15. Schmale Fenster
   ======================================================================== */

@media (max-width: 1080px) {
	:is(.woocommerce, body) ul.products { --mt-spalten: 3; }
	:is(.woocommerce, body) ul.products.columns-4 { --mt-spalten: 3; }
	.mt-fuss-spalten { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
	/* Auf der Produktseite wird es mit Kategoriespalte zu eng — dort geht
	   das Bild vor. */
	.single-product .mt-koerper > .mt-rahmen { grid-template-columns: minmax(0, 1fr); }
	.single-product .mt-spalte { display: none; }
}

@media (max-width: 900px) {
	.mt-kopf-haupt .mt-rahmen {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "logo werkzeuge" "suche suche";
		row-gap: var(--mt-r3);
	}
	.mt-logo { grid-area: logo; }
	.mt-kopfsuche { grid-area: suche; }
	.mt-kopf-werkzeuge { grid-area: werkzeuge; }
	.mt-logo img { width: 118px; }
	/* Am Telefon nicht zusaetzlich schrumpfen: 118 Pixel sind schon die
	   Untergrenze, bei der "Modelltoys-Austria" unter dem MTA noch lesbar
	   ist. */
	.mt-kopf.mt-gescrollt .mt-logo img { width: 118px; }

	.mt-koerper > .mt-rahmen { grid-template-columns: minmax(0, 1fr); }
	.mt-produkt-oben { grid-template-columns: minmax(0, 1fr); gap: var(--mt-r5); }

	/* Die Galerie braucht hier nichts mehr: Bildleiste unter dem Bild und
	   Pfeile im Bild gelten seit 26.08.2026 in jeder Fenstergroesse. Nur die
	   Bildchen duerfen etwas schmaler werden, damit vier statt drei ins Bild
	   passen. */
	.woocommerce div.product div.images .flex-control-thumbs li { width: 74px; }

	.mt-spalte details.mt-kasten > summary { list-style: none; cursor: pointer; }
	.mt-spalte details.mt-kasten > summary::-webkit-details-marker { display: none; }
}

@media (max-width: 768px) {
	body { font-size: 16px; }
	html { scroll-padding-top: 128px; }
	:is(.woocommerce, body) ul.products { --mt-spalten: 2; gap: var(--mt-r3); }
	:is(.woocommerce, body) ul.products.columns-4 { --mt-spalten: 2; }
	h1 { font-size: 23px; }
	.woocommerce div.product p.price { font-size: 27px; }
	.mt-daten .mt-zeile { grid-template-columns: 108px minmax(0, 1fr); font-size: 14.5px; }
	.mt-werkzeug span.mt-werkzeug-wort { display: none; }
	.mt-sprachen a span:not(.mt-flagge), .mt-sprachen > span span:not(.mt-flagge) { display: none; }
	.mt-sprachen.mt-sprachen-fuss a span:not(.mt-flagge) { display: inline; } /* im Fuss bleibt der Name stehen */
	.mt-fuss-spalten { grid-template-columns: 1fr; gap: var(--mt-r5); padding-top: var(--mt-r5); }
	.mt-servicezeile .mt-rahmen { justify-content: center; text-align: center; }
	.mt-katalogweg { flex-direction: column; align-items: flex-start; }
	.mt-schild { font-size: 12px; padding: 4px 9px; letter-spacing: 0.04em; }
	:is(.woocommerce, body) ul.products li.product .mt-karte-massstab { font-size: 12.5px; }

	/* Die Servicezeile BLEIBT jetzt auch am Telefon.
	   Frueher musste sie hier weg, weil der ganze Kopf klebte und mit ihr
	   206 Pixel gebraucht haette — ein Viertel des Bildschirms, dauerhaft
	   belegt von zwei Links. Seit sie ein Geschwister von <header> ist und
	   nicht mehr darin liegt, scrollt sie beim ersten Wisch weg und der
	   Hauptkopf klebt trotzdem. Damit ist der Verzicht hinfaellig, und die
	   Sprachwahl ist auch am Telefon erreichbar. */
	.mt-servicezeile { font-size: 13px; }
	.mt-servicezeile .mt-rahmen { gap: 6px var(--mt-r4); }
}

/* EIN MODELL JE ZEILE AM TELEFON.
   Die Grenze lag bei 359 Pixeln — ein Wert aus der Zeit des iPhone 5. Ein
   heutiges Geraet ist rund 400 Pixel breit, dort standen also zwei Karten
   nebeneinander, jede rund 180 Pixel. Bild, Marke, Massstab, Artikelnummer
   und Preis in 180 Pixel: fuer Sammler ab 60 unlesbar.
   599 statt 600, damit die Grenze nicht mit der Regel darunter kollidiert. */
@media (max-width: 600px) {
	:is(.woocommerce, body) ul.products { --mt-spalten: 1; }
	:is(.woocommerce, body) ul.products.columns-4 { --mt-spalten: 1; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===========================================================================
   16. Druck
   ======================================================================== */

@media print {
	.mt-servicezeile, .mt-kopfsuche, .mt-kopf-werkzeuge,
	.mt-spalte, .mt-fuss, .mt-katalog-leiste, form.cart,
	.mt-karte-knoepfe, .mt-lupe, .flex-direction-nav,
	.mt-brotkrumen, .mt-ansicht, .mc-merk-werkzeuge, .mc-merk-ansicht,
	.mc-merk-hinweis, .mc-merk-loeschen, .mc-fenster { display: none !important; }
	.mt-kopf { position: static; }
	body { font-size: 12pt; }

	/* KEIN RASTER IM DRUCK.
	   Gemeldet am 31.08.2026: Beim Drucken der Merkliste blieb die erste
	   Seite leer, der Inhalt begann auf Seite zwei.

	   Der Verdacht liegt auf den Layout-Rastern. Chrome legt einen
	   Grid-Container beim Seitenumbruch als EIN Stueck an: Passt er nicht
	   mehr auf die angebrochene Seite, wandert er komplett auf die naechste
	   — und was bleibt, ist eine Seite mit Kopf und sonst nichts. Genau so
	   sah es aus.

	   Im Druck braucht niemand ein Raster: Es gibt eine Spalte, von oben
	   nach unten. display:block laesst den Text ueber Seitengrenzen laufen,
	   wie es sich fuer eine Liste gehoert.

	   NICHT AM BILDSCHIRM NACHSTELLBAR — der Browser hier kann keine
	   Druckseiten erzeugen. Die Regel steht auf dieser Begruendung, nicht
	   auf einer Messung. */
	.mt-koerper > .mt-rahmen,
	.mt-hauptbereich,
	.mt-inhalt,
	.mc-merk {
		display: block !important;
		max-width: none !important;
		break-before: auto !important;
		break-inside: auto !important;
	}

	/* Die Merkliste als Liste, nie als Kartenraster —
	   drei Karten nebeneinander sind auf Papier unlesbar, und sie sind
	   wieder ein Raster. Gilt auch, wenn der Besucher "Raster" gewaehlt
	   hat: Der Ausdruck ist etwas anderes als der Bildschirm. */
	ul.mc-merk-liste,
	[data-mt-ansicht="raster"] ul.mc-merk-liste {
		display: block !important;
		break-inside: auto !important;
	}
	ul.mc-merk-liste .mc-merk-zeile,
	[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-zeile {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start;
		gap: 10mm;
		/* Eine Zeile wird nicht mitten durchgeschnitten. Bei rund 20 mm
		   Hoehe kostet das keine Seite und erspart abgeschnittene Namen. */
		break-inside: avoid;
		page-break-inside: avoid;
		border: none;
		border-bottom: 0.3mm solid #999;
		padding: 3mm 0;
	}
	ul.mc-merk-liste .mc-merk-bild img {
		width: 28mm !important; height: auto !important;
		aspect-ratio: 3 / 2; object-fit: contain;
	}

	/* Der Katalog ebenso: eine Spalte, keine Karten. */
	:is(.woocommerce, body) ul.products {
		display: block !important;
	}
	:is(.woocommerce, body) ul.products li.product {
		break-inside: avoid;
		page-break-inside: avoid;
		border: none;
		border-bottom: 0.3mm solid #999;
	}

	/* Adressen ausschreiben ist im Katalog Unfug — bei rund 9.000 Modellen
	   stuende hinter jedem Namen eine halbe Zeile Adresse. */
	a[href]::after { content: none !important; }
}

.mt-block-beisatz { font-size: 14.5px; color: var(--mt-text-leise); margin: -6px 0 var(--mt-r4); }

/* ===========================================================================
   16. Nachbesserungen nach der Durchsicht am 27.08.2026

   Alles hier ist nachgemessen, nicht geschätzt: Fenster auf 1440 Pixel,
   Warenkorb und Kassa gefüllt, jede Zahl über getBoundingClientRect geholt.
   Die Messwerte stehen jeweils dabei — damit man später sieht, WOVON die
   Änderung ausgegangen ist.
   ======================================================================== */

/* --- Warenkorb: das Produktbild war 43 x 29 Pixel ----------------------- */

.woocommerce table.cart td.product-thumbnail { width: 132px; padding: var(--mt-r3); }
.woocommerce table.cart td.product-thumbnail a { display: block; }
.woocommerce table.cart td.product-thumbnail img,
.woocommerce-cart table.cart td.product-thumbnail img {
	width: 116px; height: 84px;
	max-width: none;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--mt-linie);
	padding: 3px;
}

/* --- Das Kreuz sass nicht mittig im Kreis -------------------------------
   40 x 40 Pixel Kreis, aber line-height 22px und kein Ausrichten im
   Flex-Kasten. Das Zeichen hing dadurch oben. */
.woocommerce table.cart td.product-remove a.remove {
	display: flex !important;
	align-items: center; justify-content: center;
	width: 40px; height: 40px;
	line-height: 1;
	font-size: 26px;
	padding: 0;
	text-decoration: none;
}

/* --- Gutscheinfeld und Knopf waren verschieden gross --------------------
   Feld 186 x 34, Knopf 186 x 66. Jetzt beide gleich hoch und der Knopf
   so breit, wie sein Text braucht. */
.woocommerce table.cart td.actions .coupon { align-items: stretch; }
.woocommerce table.cart td.actions .coupon #coupon_code,
.woocommerce table.cart td.actions .coupon input.input-text {
	width: 220px; min-width: 0;
	height: 48px;
	font-size: 16px;
	margin: 0;
}
.woocommerce table.cart td.actions .coupon button {
	height: 48px;
	white-space: nowrap;
	padding: 0 var(--mt-r4);
	font-size: 16px;
}

/* --- "Warenkorb aktualisieren" war dunkel auf dunkel --------------------
   Gemessen: Schrift #1c2733 auf #2a7bac. Im abgeschalteten Zustand
   praktisch unlesbar. Ein abgeschalteter Knopf soll auch abgeschaltet
   AUSSEHEN — grau, nicht blau mit unleserlicher Schrift. */

/* --- Die Summen waren zu klein und zu blass -----------------------------
   Gemessen: Beschriftung 15px in #5c6b78 auf hellem Blau. Das liest eine
   Kundschaft ueber 60 nicht. */
.woocommerce .cart_totals table.shop_table th {
	font-size: 17px;
	color: var(--mt-text);
	font-weight: 400;
	padding: var(--mt-r3) var(--mt-r3) var(--mt-r3) 0;
}
.woocommerce .cart_totals table.shop_table td {
	font-size: 17px;
	color: var(--mt-text);
	padding: var(--mt-r3) 0;
}
.woocommerce .cart_totals table.shop_table td small,
.woocommerce .cart_totals table.shop_table th small,
.woocommerce .cart_totals .woocommerce-shipping-destination,
.woocommerce .cart_totals .shipping-calculator-button {
	font-size: 15px;
	color: var(--mt-text-leise);
}
.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td { font-size: 21px; }

/* Der Hinweistext unter der Summe stand in 14px Grau auf Hellblau. */
.woocommerce .cart_totals .mt-summe-hinweis,
.woocommerce .cart_totals > p,
.woocommerce .cart-collaterals .cart_totals p {
	font-size: 15px;
	color: var(--mt-text);
	line-height: 1.5;
}

/* ===========================================================================
   Kassa
   ======================================================================== */

/* --- Der Abstand ueber der Bestelluebersicht ----------------------------
   Gemessen: 36 Pixel Luft zwischen "Ihre Bestellung" und dem Kasten,
   weil die Ueberschrift ihren eigenen Aussenabstand mitbringt und der
   Kasten noch einen dazugab. */
/* Der Abstand kam aus dem ZEILENabstand des Rasters, nicht aus einem
   Aussenabstand — gemessen: 35 Pixel, die keine Regel am Element erklaerte.
   Die Spalten brauchen ihren Abstand, die Zeilen nicht. */
.woocommerce form.checkout { row-gap: 0; }
.woocommerce form.checkout > #order_review_heading { margin: 0 0 var(--mt-r3); }
.woocommerce-checkout #order_review { margin-top: 0; padding-top: var(--mt-r4); }

/* --- Schrift in der Bestelluebersicht -----------------------------------
   Gemessen: 13,5px in #5c6b78. */
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table thead th {
	font-size: 15px;
	color: var(--mt-text);
	letter-spacing: 0;
	text-transform: none;
}
.woocommerce-checkout #order_review table.shop_table td { font-size: 16px; color: var(--mt-text); }
.woocommerce-checkout #order_review table.shop_table td small,
.woocommerce-checkout #order_review table.shop_table .includes_tax,
.woocommerce-checkout #order_review table.shop_table .tax_label {
	font-size: 14px; color: var(--mt-text-leise);
}

/* --- Die Linien ---------------------------------------------------------
   Vorher lag ueber jeder Zelle ein eigener Rahmen; das ergab doppelte und
   halbe Striche. Jetzt genau eine Linie je Zeile. */
.woocommerce-checkout #order_review table.shop_table,
.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th { border: none; }
.woocommerce-checkout #order_review table.shop_table tbody tr td,
.woocommerce-checkout #order_review table.shop_table tbody tr th,
.woocommerce-checkout #order_review table.shop_table tfoot tr td,
.woocommerce-checkout #order_review table.shop_table tfoot tr th {
	border-bottom: 1px solid var(--mt-linie);
	padding: var(--mt-r3) 0;
}
.woocommerce-checkout #order_review table.shop_table tfoot .order-total td,
.woocommerce-checkout #order_review table.shop_table tfoot .order-total th {
	border-bottom: none;
	border-top: 2px solid var(--mt-linie-kraeftig);
	padding-top: var(--mt-r4);
}

/* --- Vor- und Nachname nebeneinander ------------------------------------
   Sie standen untereinander und machten das Formular unnoetig lang. */
.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--mt-r4);
}
.woocommerce form.checkout .form-row { grid-column: 1 / -1; float: none; width: auto; padding: 0; margin: 0 0 var(--mt-r4); }
.woocommerce form.checkout .form-row-first { grid-column: 1; }
.woocommerce form.checkout .form-row-last { grid-column: 2; }

@media (max-width: 768px) {
	.woocommerce form.checkout .woocommerce-billing-fields__field-wrapper,
	.woocommerce form.checkout .woocommerce-shipping-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
	.woocommerce form.checkout .form-row-first,
	.woocommerce form.checkout .form-row-last { grid-column: 1 / -1; }
}

/* --- Der Hinweis am UID-Feld -------------------------------------------
   WooCommerce zeichnet ihn als grosse blaue Sprechblase mit Pfeil, 16px,
   Hintergrund #1e85be. Das ueberdeckte das Feld darunter und passte zu
   nichts im Shop. Jetzt eine ruhige Zeile unter dem Feld. */
.woocommerce form .form-row .description,
.woocommerce-checkout .form-row .description {
	position: static !important;
	background: none !important;
	color: var(--mt-text-leise) !important;
	font-size: 14px;
	padding: 4px 0 0;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	max-width: none;
}
.woocommerce form .form-row .description::before,
.woocommerce form .form-row .description::after { display: none !important; }

/* ===========================================================================
   Fusszeile
   ======================================================================== */

/* Gemessen: grid-template-columns 372px 372px 372px 0px — vier Spalten,
   die letzte leer. Das Logo stand allein links, die Links gedraengt rechts. */
.mt-fuss-spalten {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var(--mt-r5);
	align-items: start;
}
@media (max-width: 900px) {
	.mt-fuss-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.mt-fuss-spalten { grid-template-columns: minmax(0, 1fr); }
}

/* Der Widerrufsknopf von German Market und die Sprachwahl von WPML haengen
   sich UNTER die Fusszeile, ausserhalb des Rahmens und mittig. Das sah aus
   wie versehentlich stehen gebliebener Text.

   Der Widerrufsknopf gehoert in die Spalte "Service und Rechtliches" —
   dorthin verschiebt ihn theme.js. Die Sprachwahl steht schon im Kopf und
   wird hier ausgeblendet. */
body > .wpml-ls-statics-footer,
body > .wpml-ls-legacy-list-horizontal { display: none; }

/* --- Der kleine Warenkorb oben rechts -----------------------------------
   Ein Aufklappfeld unter dem Warenkorbknopf. Kein Schubfach von der Seite:
   Das ueberdeckt die halbe Seite und man muss es erst wieder schliessen.
   Hier sieht man kurz, was drin ist, und klickt weiter oder daneben.
   ------------------------------------------------------------------------ */

.mt-korbfeld { position: relative; }

.mt-korbklappe {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
	width: min(380px, calc(100vw - 32px));
	background: var(--mt-grund);
	border: 2px solid var(--mt-blau-dunkel);
	border-radius: var(--mt-r1);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
	padding: var(--mt-r4);
	text-align: left;
}
.mt-korbklappe[hidden] { display: none; }

.mt-korbklappe-leer { margin: 0; font-size: 16px; color: var(--mt-text-leise); }

.mt-korbklappe-liste { list-style: none; margin: 0; padding: 0; }
.mt-korbklappe-zeile {
	/* Drei Spalten: Bild, Text, Tonne. Die dritte kam am 01.09.2026 dazu —
	   ohne sie fiel das Entfernen-Symbol als drittes Kind in eine zweite
	   Rasterzeile und stand unter dem Preis statt daneben. */
	display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: var(--mt-r2);
	align-items: center;
	padding: var(--mt-r3) 0;
	border-bottom: 1px solid var(--mt-linie);
}
.mt-korbklappe-zeile:last-child { border-bottom: none; }
.mt-korbklappe-bild img {
	width: 64px; height: 48px; object-fit: contain;
	border: 1px solid var(--mt-linie); background: #fff; padding: 2px;
}
.mt-korbklappe-text a {
	display: block; font-size: 15px; line-height: 1.35; font-weight: 600;
	color: var(--mt-text); text-decoration: none;
	/* Zwei Zeilen genuegen — Modellnamen sind hier gern acht Woerter lang. */
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
.mt-korbklappe-text a:hover { color: var(--mt-blau-schrift); text-decoration: underline; }
.mt-korbklappe-menge { display: block; font-size: 14px; color: var(--mt-text-leise); margin-top: 2px; }

.mt-korbklappe-mehr { margin: var(--mt-r2) 0 0; font-size: 14px; color: var(--mt-text-leise); }

.mt-korbklappe-summe {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: var(--mt-r3);
	margin-top: var(--mt-r3); padding-top: var(--mt-r3);
	border-top: 2px solid var(--mt-linie-kraeftig);
	font-size: 17px;
}
.mt-korbklappe-summe strong { font-size: 19px; }

.mt-korbklappe-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mt-r2); margin-top: var(--mt-r4); }
.mt-korbklappe-knoepfe .button { text-align: center; padding: 11px var(--mt-r2); font-size: 15px; }
/* Der zweite Knopf ist der Hauptweg — der erste nur die Nebenwahl. */
.mt-korbklappe-knoepfe .button:first-child {
	background: var(--mt-grund); color: var(--mt-text);
	border-color: var(--mt-linie-kraeftig);
}
.mt-korbklappe-knoepfe .button:first-child:hover { background: var(--mt-flaeche); }

/* Solange offen, ist der Knopf sichtbar aktiv. */
.mt-korb-offen .mt-warenkorb { background: var(--mt-blau-hauch); }

/* --- Der Knopf meldet, dass er etwas getan hat -------------------------- */

/* DIE BESTAETIGUNG — ueber die Bauteil-Variablen, nicht ueber !important.
   Vorher standen hier vier !important-Deklarationen, und sie wirkten
   trotzdem nicht: Am 01.09.2026 nachgemessen, der Knopf blieb blau. Statt
   die Ursache mit einem fuenften !important zu ueberdecken, benutzt der
   Zustand jetzt denselben Weg wie Ueberfahren, Gedrueckt und Abgeschaltet.
   Drei Variablen, gesetzt an einer Stelle — und damit auch automatisch
   richtig, wenn spaeter jemand die Knopffarben aendert. */
[data-mt-erledigt],
.mt-korb-erledigt,
.woocommerce a.button[data-mt-erledigt],
.woocommerce button.button[data-mt-erledigt],
.woocommerce a.button.mt-korb-erledigt,
.woocommerce button.button.mt-korb-erledigt,
/* .alt ausdruecklich: WooCommerce faerbt seinen Hauptknopf mit einem
   Selektorglied mehr, siehe Erklaerung oben. Ohne diese vier Zeilen
   bleibt der Kaufknopf auf der Produktseite blau. */
.woocommerce a.button.alt[data-mt-erledigt],
.woocommerce button.button.alt[data-mt-erledigt],
.woocommerce a.button.alt.mt-korb-erledigt,
.woocommerce button.button.alt.mt-korb-erledigt,
.woocommerce div.product form.cart button.single_add_to_cart_button[data-mt-erledigt],
:is(.woocommerce, body) ul.products li.product a.button.mt-korb-erledigt,
:is(.woocommerce, body) ul.products li.product a.button[data-mt-erledigt] {
	--knopf-grund:   var(--mt-gruen);
	--knopf-rand:    var(--mt-gruen);
	--knopf-schrift: var(--mt-auf-farbe);
	background-color: var(--mt-gruen) !important;
	background-image: none !important;
	border-color: var(--mt-gruen) !important;
	color: var(--mt-auf-farbe) !important;
}
/* Der Haken springt kurz auf, das Wort schiebt sich nach.
   Ohne Bewegung sieht ein Farbwechsel wie ein Fehler aus — mit Bewegung
   liest man ihn als Bestaetigung. Kurz halten: 280 ms, danach steht der
   Knopf still, bis er sich nach 2,2 Sekunden zuruecksetzt. */
@keyframes mt-haken-auf {
	from { transform: scale(.3); opacity: 0; }
	60%  { transform: scale(1.15); opacity: 1; }
	to   { transform: none; opacity: 1; }
}
@keyframes mt-wort-auf {
	from { opacity: 0; transform: translateX(-4px); }
	to   { opacity: 1; transform: none; }
}
.mt-korb-haken {
	font-weight: 700;
	margin-right: 6px;
	display: inline-block;
	animation: mt-haken-auf .28s cubic-bezier(.2, 1.3, .4, 1);
}
.mt-korb-wort {
	display: inline-block;
	animation: mt-wort-auf .28s .06s both ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.mt-korbklappe:not([hidden]), .mt-korbklappe.mt-klappe-zu,
	.mt-korb-haken, .mt-korb-wort { animation: none; }
}

/* Den Zweitlink von WooCommerce gar nicht erst zeigen. */
.woocommerce a.added_to_cart { display: none !important; }

/* --- Der Widerrufsknopf, sobald theme.js ihn einsortiert hat ------------ */
.mt-fuss-widerruf { margin-top: var(--mt-r3); }
.mt-fuss-widerruf button,
.mt-fuss-widerruf .button {
	font-size: 15px; padding: 9px var(--mt-r3);
	background: var(--mt-grund); color: var(--mt-blau-tief);
	border: 1px solid var(--mt-linie-kraeftig);
}

/* ===========================================================================
   17. Nachbesserungen 27.08.2026, zweiter Durchgang
   ======================================================================== */

/* --- "Warenkorb anzeigen" soll gar nicht erscheinen ---------------------
   WooCommerce baut den Link im Skript und haengt ihn neben den Knopf. Die
   Regel steht bewusst OHNE .woocommerce davor: Der Link entsteht dort, wo
   der Knopf steht, und das ist nicht immer innerhalb dieses Rahmens. */
a.added_to_cart,
a.added_to_cart.wc-forward,
.woocommerce a.added_to_cart {
	display: none !important;
}

/* --- Das kleine Dreieck neben dem Suchknopf -----------------------------
   FiboSearch zeichnet es im Solaris-Stil als ::before am Absendeknopf.
   Es zeigt auf nichts und erklaert nichts. */
.dgwt-wcas-search-submit::before,
.mt-kopfsuche .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit::before {
	display: none !important;
	content: none !important;
}

/* --- Kein Kursiv im ganzen Shop ----------------------------------------
   Kursive Schrift ist auf Bildschirmen schlechter zu lesen als aufrechte,
   und bei einer Kundschaft ueber 60 faellt das ins Gewicht. WooCommerce und
   German Market setzen sie an mehreren Stellen ein (leere Listen, Hinweise,
   Steuerangaben). */
.mt-koerper em,
.mt-koerper i,
.mt-koerper .woocommerce-info,
.mt-koerper .woocommerce-message,
.mt-koerper small,
.mt-fuss em,
.mt-fuss i,
.woocommerce .quantity .qty,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	font-style: normal;
}

/* --- Das Logo eine Spur kleiner ---------------------------------------- */
.mt-logo img,
.mt-kopf .custom-logo {
	width: 128px;
	height: auto;
}
.mt-kopf.mt-gescrollt .mt-logo img,
.mt-kopf.mt-gescrollt .custom-logo {
	width: 104px;
}

/* --- NEUHEITEN und "erscheint Demnaechst" hervorheben -------------------
   Sie standen zwischen 489 gleich aussehenden Zeilen. Es sind aber die
   beiden Einstiege, die Sammler zuerst suchen: was ist neu, was kommt.

   Hervorgehoben wird mit einer farbigen Kante links und kraeftigerer
   Schrift — nicht mit einer anderen Hintergrundfarbe. Eine zweite Flaeche
   in der Liste wuerde wie ein ausgewaehlter Eintrag aussehen. */
.mt-kategorien .mt-hervor > a {
	font-weight: 700;
	color: var(--mt-blau-tief);
	box-shadow: inset 4px 0 0 var(--mt-blau);
	padding-left: calc(var(--mt-r3) + 4px);
}
.mt-kategorien .mt-hervor.mt-hervor-neu > a { box-shadow: inset 4px 0 0 var(--mt-rot); color: var(--mt-rot); }
.mt-kategorien .mt-hervor.mt-hervor-bald > a { box-shadow: inset 4px 0 0 #8a5a00; color: #8a5a00; }
.mt-kategorien .mt-hervor.mt-hervor-angebot > a { box-shadow: inset 4px 0 0 var(--mt-gruen); color: var(--mt-gruen); }
.mt-kategorien .mt-hervor > a:hover { background: var(--mt-blau-hauch); }
/* Die aktive Kategorie bleibt die aktive — ihre Auszeichnung geht vor. */
.mt-kategorien .mt-jetzt.mt-hervor > a { color: #fff; box-shadow: none; }

/* --- Die Spalte hebt sich ab (Besprechung 09.09.2026) --------------------
   Krammer: "sonst zu viel Weiss" — die Kategoriespalte bekommt einen leicht
   grauen Grund statt Weiss, und die Schrift der Hauptebene wird etwas
   kraeftiger. Nicht fett (700 gibt es nur fuer NEUHEITEN/Demnaechst und die
   aktive Kategorie), sondern 500: die Liste soll ruhig bleiben, nur eben
   nicht mehr wie ein leeres Blatt aussehen. */
.mt-spalte .mt-kategorien { background: #eaeff4; }
.mt-spalte .mt-kategorien > .mt-kasten-inhalt { background: #eaeff4; }
.mt-kategorien .mt-ebene-1 > a, .mt-kategorien .mt-ebene-2 > a, .mt-kategorien .mt-ebene-3 > a { color: #1c2733; }
.mt-kategorien li { border-bottom-color: #d8e0e7; }
.mt-kategorien .mt-ebene-1 > a { font-weight: 500; }
.mt-kategorien a:hover { background: #fff; }

/* --- Die Gesamtzahl unter der Kategorieliste --------------------------- */
.mt-kat-gesamt {
	display: block;
	padding: var(--mt-r3) var(--mt-r4);
	border-top: 1px solid var(--mt-linie);
	background: var(--mt-flaeche);
	font-size: 14.5px;
	color: var(--mt-text-leise);
}
.mt-kat-gesamt strong { color: var(--mt-text); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   18. Nachbesserungen 28.08.2026
   ========================================================================== */

/* --- Kein Kursiv im Suchfeld ---------------------------------------------
   FiboSearch setzt in seiner eigenen style.min.css font-style: italic auf
   den Platzhalter. Unsere Regel überschrieb bisher nur die Farbe, also stand
   "Suchbegriff, Artikelnummer oder Hersteller …" kursiv im Kopf. Kursiv ist
   für die Zielgruppe die schlechtere Schrift — sie liest sich langsamer und
   wirkt auf kleinen Bildschirmen ausgefranst.
   Alle drei Schreibweisen, weil die Browser sie getrennt führen: eine Regel,
   die einen unbekannten Selektor enthält, wird sonst ganz verworfen. */
.mt-kopfsuche .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder,
.mc-filter input::placeholder,
.mt-inhalt input::placeholder,
input::placeholder,
textarea::placeholder { font-style: normal; }
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { font-style: normal; }
input::-moz-placeholder,
textarea::-moz-placeholder { font-style: normal; }

/* --- Suchleiste und Knöpfe gleich hoch -----------------------------------
   Gemessen: das Suchfeld 48 Pixel, die Knöpfe daneben 42. Sechs Pixel
   Unterschied, und die Reihe steht schief. Angeglichen wird nach OBEN — 48
   Pixel Klickfläche sind für die Zielgruppe besser als 42, und die Vorgabe
   von mindestens 40 gilt ohnehin. */
.mt-kopf-werkzeuge .mt-werkzeug,
.mt-korbfeld .mt-werkzeug {
	min-height: 48px;
	padding-top: 0;
	padding-bottom: 0;
	display: inline-flex;
	align-items: center;
}

/* Die Sonderregel fuer Seiten mit Tariftabelle ist am 08.09.2026 entfallen:
   Seit .mt-inhalt keine Lesebreite mehr hat, nutzt jede Seite die volle
   Breite, und die Koerperklasse mt-volle-breite wird nirgends mehr gesetzt. */

/* --- Merkliste ------------------------------------------------------------
   Der Hinweis auf nicht lieferbare Modelle ist entfallen, weil der Shop
   keinen Lagerstand kennt. Die Regeln dazu bleiben hier NICHT stehen: eine
   Klasse, die niemand mehr vergibt, ist eine Falle für den Nächsten. */

/* ==========================================================================
   19. Der Warenkorb-Knopf auf der Produktkarte
   ========================================================================== */

/* NIE UMBRECHEN.
   Die Rueckmeldung machte aus 45 Pixeln 66 und schob die Kachel darunter weg.
   Der Text ist jetzt kurz — die Regel hier sorgt dafuer, dass es auch bei
   einer laengeren Uebersetzung so bleibt. */
:is(.woocommerce, body) ul.products li.product a.button,
:is(.woocommerce, body) ul.products li.product button.button {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* WEISSE SCHRIFT IN JEDEM ZUSTAND.
   WooCommerce haengt nach dem Hinzufuegen die Klasse "added" an den Knopf.
   Damit greifen andere Regeln, und der Text stand blau auf blau — lesbar war
   das nicht. Hier steht der Zustand ausdruecklich fuer alle Faelle. */
:is(.woocommerce, body) ul.products li.product a.button,
:is(.woocommerce, body) ul.products li.product a.button:link,
:is(.woocommerce, body) ul.products li.product a.button:visited,
:is(.woocommerce, body) ul.products li.product a.button:hover,
:is(.woocommerce, body) ul.products li.product a.button:focus,
:is(.woocommerce, body) ul.products li.product a.button.added,
:is(.woocommerce, body) ul.products li.product a.button.loading {
	color: #fff;
}

/* ==========================================================================
   20. Kopfreihe und Widerrufsknopf — 28.08.2026, dritter Durchgang
   ========================================================================== */

/* --- Das Suchfeld ist nicht hoeher, es sieht nur so aus ------------------
   Gemeldet: "das Eingabefeld ist groesser als die anderen". Nachgemessen mit
   echtem Scrollen, nicht durch Setzen der Klasse: Feld 48, Absendeknopf 48,
   alle drei Werkzeuge 48 — im ruhenden UND im gescrollten Kopf, oben
   buendig bei y=18,4.

   Der Unterschied ist der RAHMEN — und der wird oben in Abschnitt 7 gesetzt,
   bei der FiboSearch-Anpassung. Dort steht die Begruendung.

   FESTGEHALTEN, WEIL ES BEIM ERSTEN ANLAUF DANEBENGING: Ich hielt FiboSearch
   fuer den Verursacher und legte hier eine Ueberschreibung an. Sie griff
   nicht. Der Selektor
       .mt-kopfsuche .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input
   hat Spezifitaet (0,4,1); alles, was hier unten kuerzer geschrieben ist,
   verliert dagegen — egal wie weit hinten es steht.
   REGEL: Am Element nachsehen, welche Regel wirklich gewinnt, statt eine
   weitere hinterherzuschieben. Im Browser:
       [...document.styleSheets].flatMap(s => [...s.cssRules])
   und mit el.matches(r.selectorText) pruefen. ACHTUNG: seit CSS-Nesting hat
   JEDE Style-Regel eine (leere) cssRules-Liste, und die ist wahr — wer
   danach verzweigt, sieht keinen einzigen Selektor mehr.
   ------------------------------------------------------------------------ */
/* DIE HOEHE FESTNAGELN, IN BEIDEN ZUSTAENDEN.
   Vorher ergab sie sich aus Innenabstand plus Zeilenhoehe — und die ist bei
   einem <input> etwas anderes als bei einem Flex-Knopf mit Symbol und Wort.
   Solange sich beide zufaellig auf denselben Wert summieren, faellt nichts
   auf; aendert jemand eine Schriftgroesse, laeuft die Reihe wieder schief.
   min-height plus box-sizing macht daraus eine Zusage statt eines Zufalls.
   48 Pixel auch gescrollt: Die Vorgabe lautet mindestens 40 Pixel
   Klickflaeche, und im gescrollten Kopf stand die Regel fuer die Werkzeuge
   auf 38. */
.mt-kopfsuche input[type="search"],
.mt-kopfsuche input[type="text"],
.mt-kopfsuche .dgwt-wcas-search-input,
.mt-kopfsuche button,
.mt-kopfsuche .dgwt-wcas-search-submit,
.mt-kopf-werkzeuge .mt-werkzeug,
.mt-korbfeld .mt-werkzeug,
.mt-kopf.mt-gescrollt .mt-kopfsuche input[type="search"],
.mt-kopf.mt-gescrollt .mt-kopfsuche input[type="text"],
.mt-kopf.mt-gescrollt .mt-kopfsuche button,
.mt-kopf.mt-gescrollt .mt-kopf-werkzeuge .mt-werkzeug,
.mt-kopf.mt-gescrollt .mt-korbfeld .mt-werkzeug {
	min-height: 48px;
	box-sizing: border-box;
}

/* --- Der Widerruf im Fuss ist ein Knopf, kein Link -----------------------
   "Vertrag widerrufen" ist kein Text zum Nachlesen, sondern eine HANDLUNG —
   und stand zwischen fuenf Rechtstexten als sechster gleich aussehender
   Link. Wer widerrufen will, sucht einen Knopf.

   Klein gehalten: Der Fuss ist nicht der Ort fuer einen Aufruf zum Handeln,
   der Knopf soll auffindbar sein und nicht werben. 40 Pixel Hoehe bleiben,
   das ist die Untergrenze fuer die Zielgruppe.
   ------------------------------------------------------------------------ */
.mt-fuss li.mt-menue-knopf { margin-top: var(--mt-r3); }
.mt-fuss li.mt-menue-knopf a {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: 40px; box-sizing: border-box;
	padding: 8px 16px;
	background: var(--mt-grund);
	border: 1px solid var(--mt-linie-kraeftig);
	border-radius: var(--mt-r1);
	color: var(--mt-blau-tief);
	font-size: 14.5px; font-weight: 600;
	text-decoration: none;
}
.mt-fuss li.mt-menue-knopf a:hover,
.mt-fuss li.mt-menue-knopf a:focus-visible {
	background: var(--mt-blau-hauch);
	border-color: var(--mt-blau);
	color: var(--mt-blau-schrift);
	text-decoration: none;
}
/* Das Symbol steckt im Menuepunkt selbst (functions.php), damit es in beiden
   Sprachen ohne zweite Pflegestelle mitkommt. */
.mt-fuss li.mt-menue-knopf svg {
	width: 16px; height: 16px; flex: 0 0 auto;
	fill: none; stroke: currentColor; stroke-width: 1.8;
	stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   21. Ansicht waehlbar: Raster oder Liste, und wie viele nebeneinander

   Das Warum steht in inc/ansicht.php. Hier steht nur, wie es aussieht.

   DIE WAHL HAENGT AM <html>, nicht an der Liste: So gilt sie fuer den
   Katalog UND fuer die Merkliste, ohne dass an zwei Stellen etwas gesetzt
   werden muss. Das kleine Skript im Seitenkopf schreibt sie hin, bevor der
   Browser das erste Mal zeichnet.
   ========================================================================== */

/* --- Die Bedienleiste ---------------------------------------------------- */
.mt-ansicht {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: var(--mt-r2) var(--mt-r3);
}
.mt-ansicht-wort {
	font-size: 15px; color: var(--mt-text-leise);
}
.mt-ansicht-gruppe { display: flex; gap: 6px; }

/* 40 PIXEL, KEIN PIXEL WENIGER.
   Die Vorgabe fuer dieses Projekt lautet mindestens 40 Pixel Klickflaeche.
   Bei einer Zahl von einer Ziffer verleitet nichts so sehr dazu, den Knopf
   auf die Ziffer zusammenschrumpfen zu lassen — deshalb steht die Breite
   hier ausdruecklich. */
.mt-ansicht-knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	min-height: 40px; min-width: 40px; box-sizing: border-box;
	padding: 0 12px;
	background: var(--mt-grund);
	border: 1px solid var(--mt-linie-kraeftig);
	border-radius: var(--mt-r1);
	color: var(--mt-text);
	font-family: inherit; font-size: 14.5px; font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mt-ansicht-knopf svg {
	width: 17px; height: 17px; flex: 0 0 auto;
	fill: currentColor; stroke: none;
}
.mt-ansicht-knopf:hover {
	border-color: var(--mt-blau);
	background: var(--mt-blau-hauch);
	color: var(--mt-blau-schrift);
}
/* DER ZUSTAND KOMMT AUS aria-pressed, nicht aus einer zweiten Klasse.
   Damit koennen sichtbarer und vorgelesener Zustand gar nicht auseinander-
   laufen: Es gibt nur eine Quelle. */
.mt-ansicht-knopf[aria-pressed="true"] {
	background: var(--mt-blau-dunkel);
	border-color: var(--mt-blau-schrift);
	color: #fff;
}
.mt-ansicht-knopf[aria-pressed="true"]:hover {
	background: var(--mt-blau-tief);
	border-color: var(--mt-blau-tief);
	color: #fff;
}

/* Ohne Skript ist die Leiste sinnlos — dann bleibt sie unsichtbar.
   theme.js nimmt das Merkmal beim Start weg. */
.mt-ansicht[data-mt-ansichtswahl] { display: none; }
.mt-ansicht.mt-ansicht-bereit { display: flex; }

/* --- Die gewaehlte Spaltenzahl ------------------------------------------- */
[data-mt-spalten="1"] :is(.woocommerce, body) ul.products { --mt-spalten: 1; }
[data-mt-spalten="2"] :is(.woocommerce, body) ul.products { --mt-spalten: 2; }
[data-mt-spalten="3"] :is(.woocommerce, body) ul.products { --mt-spalten: 3; }
[data-mt-spalten="4"] :is(.woocommerce, body) ul.products { --mt-spalten: 4; }

/* DIE WAHL WIRD GEDECKELT, NICHT UEBERSCHRIEBEN.
   Wer am grossen Bildschirm vier gewaehlt hat und dasselbe Geraet quer
   dreht, soll nicht vier Briefmarken sehen. Die Wahl bleibt gespeichert und
   greift wieder, sobald wieder Platz ist. */
/* Die Grenzen sind DIESELBEN wie die des Standardrasters weiter oben —
   1080 und 680. Nur so bekommt der Besucher, der ausdruecklich drei waehlt,
   auf einer Breite auch drei, wo drei ohnehin die Vorgabe ist. Zwei
   unterschiedliche Bruchstellen waeren ein Widerspruch, den niemand sieht,
   bevor er sich beschwert. */
@media (max-width: 1080px) {
	[data-mt-spalten="4"] :is(.woocommerce, body) ul.products { --mt-spalten: 3; }
}
@media (max-width: 768px) {
	[data-mt-spalten="4"] :is(.woocommerce, body) ul.products,
	[data-mt-spalten="3"] :is(.woocommerce, body) ul.products { --mt-spalten: 2; }
}

/* Knoepfe, die auf dieser Breite nichts bewirken, sind auch nicht da.
   Ein Knopf, der sichtbar gedrueckt wird und nichts aendert, ist schlimmer
   als ein fehlender.
   Es bleiben immer ZWEI zur Auswahl: >1080 zwei/drei/vier, bis 1080
   zwei/drei, bis 680 eins/zwei. Ein einzelner Knopf waere keine Wahl. */
.mt-ansicht-spalten [data-mt-spalten="1"] { display: none; }
@media (max-width: 1080px) { .mt-ansicht-spalten [data-mt-spalten="4"] { display: none; } }
@media (max-width: 768px)  {
	.mt-ansicht-spalten [data-mt-spalten="3"] { display: none; }
	.mt-ansicht-spalten [data-mt-spalten="1"] { display: inline-flex; }
}

/* --- Listenansicht: Bild links, Angaben rechts --------------------------- */
[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products { --mt-spalten: 1; }
[data-mt-ansicht="liste"] .mt-ansicht-spalten { display: none; }

[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product > a.woocommerce-LoopProduct-link {
	flex-direction: row;
	align-items: stretch;
}
[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product img {
	width: 190px; flex: 0 0 190px;
	aspect-ratio: 3 / 2;
	border-bottom: none;
	border-right: 1px solid var(--mt-linie);
}
[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product .mt-karte-text {
	display: flex; flex-direction: column; justify-content: center;
	padding: var(--mt-r3) var(--mt-r4);
}
/* Der Warenkorb-Knopf sitzt in der Zeile rechts statt unten quer,
   die beiden Werkzeuge links davon. */
[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
}
[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product > a.woocommerce-LoopProduct-link {
	grid-column: 1;
	grid-row: 1;
}
[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product > .mt-karte-knoepfe .mc-merken,
[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product > .mt-karte-knoepfe .mc-schnellansicht {
	/* Kein Schatten in der Liste: Er hebt die Symbole vom PRODUKTBILD ab,
	   und ueber einem Bild schweben sie nur im Raster. Hier stehen sie auf
	   weissem Grund in einer eigenen Spalte. */
	box-shadow: none;
}
[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product > .mt-karte-knoepfe {
	grid-column: 2;
	grid-row: 1;

	/* Aus der Ueberlagerung in die Zeile. */
	position: static;
	flex-direction: row;
	align-items: center;
	gap: var(--mt-r2);
	margin-right: var(--mt-r3);

	/* IMMER SICHTBAR, nicht erst beim Ueberfahren.
	   Im Raster erscheinen sie ueber dem Bild, sobald die Maus darueber
	   liegt — dort stoeren sie sonst das Bild. In der Zeile haben sie
	   ihren eigenen Platz, also gibt es keinen Grund, sie zu verstecken.
	   Auf einem Tastbildschirm gibt es ohnehin kein Ueberfahren. */
	opacity: 1;
}
[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product > a.button,
[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product > .added_to_cart {
	grid-column: 3;
	grid-row: 1;
}
[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product .button,
[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product .added_to_cart {
	margin: 0 var(--mt-r4) 0 0;
	width: auto; min-width: 168px;
}

/* Am Telefon hat die Zeile keinen Platz fuer beides nebeneinander —
   dort steht der Knopf wieder unter der Karte. */
@media (max-width: 600px) {
	[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product {
		grid-template-columns: minmax(0, 1fr);
	}
	/* Untereinander: Text, dann Werkzeuge, dann Kaufknopf. */
	[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product > a.woocommerce-LoopProduct-link { grid-column: 1; grid-row: 1; }
	[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product > .mt-karte-knoepfe {
		grid-column: 1; grid-row: 2;
		justify-content: flex-end;
		margin: 0 var(--mt-r3) var(--mt-r2);
	}
	[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product > a.button,
	[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product > .added_to_cart { grid-column: 1; grid-row: 3; }
	[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product img {
		width: 118px; flex: 0 0 118px;
	}
	[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product .button,
	[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product .added_to_cart {
		margin: 0 var(--mt-r3) var(--mt-r3);
	}
}

/* --- Dieselbe Wahl auf der Startseite ------------------------------------
   Sie steht rechts ueber dem Raster, auf der Flucht des "Alles ansehen"-Links
   darueber. Ohne sie sass man in der Liste fest: Die Startseite zeigte die
   gewaehlte Ansicht, hatte aber keinen Schalter zurueck. */
.mt-block-ansicht {
	display: flex; justify-content: flex-end;
	margin: 0 0 var(--mt-r3);
}

/* --- Dieselbe Wahl auf der Merkliste ------------------------------------- */
.mc-merk-ansicht {
	display: flex; justify-content: flex-end;
	margin-bottom: var(--mt-r3);
}

/* Die Merkliste ist von Haus aus eine Liste — "Raster" macht Karten daraus.
   Deshalb greift hier nur der ausdrueckliche Wunsch nach Raster, waehrend
   im Katalog der ausdrueckliche Wunsch nach Liste greift. Ohne Wahl bleibt
   beides, wie es war. */
[data-mt-ansicht="raster"] ul.mc-merk-liste {
	display: grid;
	grid-template-columns: repeat(var(--mt-merk-spalten, 3), minmax(0, 1fr));
	gap: var(--mt-r4);
	align-items: stretch;
}
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-zeile {
	display: flex; flex-direction: column;

	/* STRETCH, NICHT CENTER.
	   Die Grundregel der Zeilenansicht setzt align-items:center — dort ist
	   das richtig, weil die Zeile waagrecht laeuft und Bild, Text und Preis
	   auf einer Mittellinie sitzen sollen. Hier laeuft die Achse aber
	   SENKRECHT, und dieselbe Angabe zentriert deshalb waagrecht: Der
	   Preisblock war 111 Pixel breit und stand mittig in der Karte statt
	   linksbuendig unter dem Titel. Das war der auffaelligste Teil von
	   "sieht ganz anders aus als die Produktboxen". */
	align-items: stretch;

	border: 1px solid var(--mt-linie);
	border-radius: var(--mt-r1);
	overflow: hidden;
}
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-bild {
	width: 100%; flex: 0 0 auto;
}
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-bild img {
	width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain;
}
/* DIESELBEN MASSE WIE IM KATALOG.
   Die Werte stehen oben in Abschnitt 6 bei der Produktkarte; hier stehen
   sie nicht noch einmal als Zahl, sondern als dieselbe Variable bzw.
   derselbe Wert. Wer die Karte aendert, muss hier nachziehen — deshalb
   der Verweis. */
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-text {
	flex: 1 1 auto;
	padding: var(--mt-r3) var(--mt-r4);
}
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-name {
	font-size: 15px;              /* Katalog: .woocommerce-loop-product__title */
	margin-bottom: var(--mt-r2);
}

/* Der Preis steht links wie in der Karte.
   Rechtsbuendig ist er aus der ZEILENansicht geerbt — dort bilden die
   Zeilen untereinander eine Zahlenspalte, und dann ist rechts richtig.
   Im Raster steht die Zahl allein und wirkt nur verrutscht. */
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-preis {
	text-align: left;
	min-width: 0;
	padding: 0 var(--mt-r4);
	margin-top: var(--mt-r2);
}

/* Menge, Tonne und Kaufknopf — 15.09.2026 als RASTER, nicht mehr als Flex.
   Vorher standen Menge, Kaufknopf und Tonne in einer Flex-Zeile ohne
   Umbruch. Sobald die Karte schmaler wurde (vier Spalten, oder drei auf
   einem kleineren Bildschirm), drueckte der Kaufknopf mit seinem
   nowrap-Text den Mengensteller zusammen: Bei drei Spalten blieb nur das
   Minus uebrig, bei vier Spalten war der Steller ein 4 Pixel breiter
   Strich und der Kaufknopf schob sich unter die Tonne (Marcels Bilder vom
   15.09.). Ein Raster mit festen Plaetzen kann das nicht:

       [ − 1 + ]                          [ Tonne ]
       [ In den Warenkorb, volle Breite          ]

   Das Formular um Menge und Kaufknopf verschwindet mit display: contents
   als Kasten — seine Kinder sitzen direkt im Raster, abschicken tut es
   trotzdem. */
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-tun {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) var(--mt-hoehe);
	grid-template-rows: auto auto;
	gap: var(--mt-r2);
	align-items: center;
	margin: var(--mt-r3) var(--mt-r4) var(--mt-r4);
}
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-korb {
	display: contents;
}
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-korb .quantity,
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-korb .mt-menge {
	grid-column: 1;
	grid-row: 1;
	flex: 0 0 auto;
}
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-korb .button {
	grid-column: 1 / -1;
	grid-row: 2;
	width: 100%;
	min-width: 0;
	min-height: var(--mt-hoehe);
	margin: 0;
}
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-korb .quantity input {
	min-height: var(--mt-hoehe);
}
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-raus {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	width: var(--mt-hoehe); min-width: var(--mt-hoehe); height: var(--mt-hoehe);
	margin: 0;
}

/* Der Rahmen hebt sich beim Ueberfahren wie im Katalog. */
[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-zeile:hover {
	border-color: var(--mt-blau);
	background: var(--mt-grund);
}

[data-mt-spalten="1"] ul.mc-merk-liste { --mt-merk-spalten: 1; }
[data-mt-spalten="2"] ul.mc-merk-liste { --mt-merk-spalten: 2; }
[data-mt-spalten="3"] ul.mc-merk-liste { --mt-merk-spalten: 3; }
[data-mt-spalten="4"] ul.mc-merk-liste { --mt-merk-spalten: 4; }
/* Dieselben Bruchstellen wie im Katalog — 1080, 680, 599. */
@media (max-width: 1080px) { [data-mt-spalten="4"] ul.mc-merk-liste { --mt-merk-spalten: 3; } }
@media (max-width: 768px)  { ul.mc-merk-liste { --mt-merk-spalten: 2; }
	[data-mt-spalten="4"] ul.mc-merk-liste,
	[data-mt-spalten="3"] ul.mc-merk-liste { --mt-merk-spalten: 2; } }
@media (max-width: 600px)  { ul.mc-merk-liste { --mt-merk-spalten: 1; }
	[data-mt-spalten="4"] ul.mc-merk-liste,
	[data-mt-spalten="3"] ul.mc-merk-liste,
	[data-mt-spalten="2"] ul.mc-merk-liste { --mt-merk-spalten: 1; } }

/* --- Der Umbruch in der Katalogleiste ------------------------------------
   Drei Gruppen — Trefferzahl, Sortierung, Ansicht — brauchen zusammen rund
   980 Pixel. Neben der Kategoriespalte stehen 900 zur Verfuegung, die
   Ansicht rutscht also in eine zweite Zeile. Gemessen auf einer
   Kategorieseite bei 1280 Pixel Fensterbreite.

   ABGEFANGEN STATT WEGGEKUERZT: Die naheliegende Loesung waere, "Raster"
   und "Liste" wegzulassen und nur die Symbole zu zeigen. Genau das verbietet
   die Vorgabe fuer dieses Projekt — Beschriftungen statt reiner Symbole, wo
   Platz ist. Und Platz ist da, nur eben eine Zeile tiefer.

   margin-left:auto schiebt die Ansicht in der zweiten Zeile nach rechts,
   unter die Sortierung. Ohne das steht sie links und die Leiste sieht aus,
   als waere etwas verrutscht. */
.mt-katalog-leiste { row-gap: var(--mt-r3); }
.mt-katalog-leiste .mt-ansicht { margin-left: auto; }
@media (max-width: 560px) {
	.mt-ansicht-wort { display: none; }
	.mt-ansicht-knopf > span:not(:only-child) { display: none; }
	.mt-ansicht-knopf { padding: 0 10px; }
}

/* ==========================================================================
   22. Die Kassa — 28.08.2026, dritter Durchgang

   Das Warum der einzelnen Punkte steht in inc/kassa.php. Hier steht, wie es
   aussieht.
   ========================================================================== */

/* --- "Ihre Bestellung" braucht Luft nach oben ----------------------------
   Die Überschrift sass ohne Abstand am oberen Rand der rechten Spalte und
   klebte damit an der Zeile darueber. Gemessen: margin-top 0. */
/* NICHT ueber die Kennung angesprochen. "Ihre Bestellung" TRUG die Kennung
   order_review_heading — ein zweites Mal, German Market hatte sie schon an
   seine Überschrift "Zahlungsweise" vergeben. Beim Aufraeumen der Dublette
   (inc/kassa.php) verliert die zweite ihre Kennung, und eine Regel auf
   #order_review_heading haette danach ins Leere gegriffen.
   Über die Stellung im Baum ist es eindeutig und haelt: die Überschrift, die
   unmittelbar in der Bestellübersicht steht. */
.woocommerce-checkout #order_review > h3 {
	margin-top: var(--mt-r5);
	padding-top: var(--mt-r4);
	border-top: 1px solid var(--mt-linie);
}

/* --- Das Modell in der Bestellübersicht ---------------------------------- */
/* KEIN display:grid AUF DER ZELLE — das war der erste Anlauf und er ging
   daneben: Ein <td> mit display:grid ist keine Tabellenzelle mehr. Der
   Browser erzeugt daneben eine anonyme Zelle, und die Spalte laeuft aus dem
   Raster der Tabelle. Gemessen: Kopfzeile 335 Pixel breit, Datenzeile 221 —
   zwei verschiedene Breiten in EINER Spalte, und der Produktname war
   dadurch enger als vorher statt breiter.

   Stattdessen bleibt die Zelle eine Zelle, und das Bild wird aus dem
   Textfluss genommen. So kann der Name nie unter das Bild rutschen, die
   Spaltenbreiten stimmen, und es gibt nichts, was der naechste Umbau von
   WooCommerce durcheinanderbringen koennte. */
.woocommerce-checkout #order_review table.shop_table td.product-name {
	position: relative;
	padding-top: var(--mt-r3);
	padding-bottom: var(--mt-r3);
	padding-left: 78px;
}
.woocommerce-checkout #order_review td.product-name img.mt-kassa-bild {
	position: absolute;
	left: 0; top: var(--mt-r3);
	width: 64px; height: auto;
	aspect-ratio: 3 / 2; object-fit: contain;
	background: var(--mt-grund);
	border: 1px solid var(--mt-linie);
	border-radius: var(--mt-r1);
	padding: 3px;
	margin: 0;
}
.woocommerce-checkout #order_review td.product-name .mt-kassa-name {
	display: block; line-height: 1.45;
}
.woocommerce-checkout #order_review td.product-name .mt-kassa-name a {
	color: var(--mt-text); text-decoration: none;
}
.woocommerce-checkout #order_review td.product-name .mt-kassa-name a:hover { text-decoration: underline; }
.woocommerce-checkout #order_review td.product-name .mc-kassa-menge { margin-top: var(--mt-r2); }
/* Die Preisspalte steht oben, auf einer Hoehe mit dem Namen. */
.woocommerce-checkout #order_review table.shop_table td.product-total { vertical-align: top; padding-top: var(--mt-r3); }

/* --- Wer zustellt -------------------------------------------------------- */
/* DIE MARKE STEHT IN DER ZEILE, nicht in einem eigenen Kasten.
   Der erste Anlauf war ein umrandetes Kaestchen mit Horn UND dem Wort
   "Oesterreichische Post". Zwei Dinge stimmten daran nicht: Es brach in eine
   eigene Zeile um und stand als Fremdkoerper ueber der Versandart statt zu
   ihr zu gehoeren — und "Post" kam doppelt vor, einmal im Kaestchen, einmal
   in "Versand mit der Post" gleich darunter.

   Kein Rahmen, kein Hintergrund: Das Kurzmanual der Post verlangt das Horn
   auf gelbem Grund ODER als gelb gefuellte Fassung, und die steht am besten
   auf der weissen Seite selbst.

   Breite fest, Hoehe ueber aspect-ratio: Die Marke darf nicht verzerrt
   werden, und ohne feste Groesse springt die Zeile beim Nachladen. */
.mt-versender-zeichen {
	width: 34px; height: auto;
	aspect-ratio: 192 / 104;
	display: inline-block;
	vertical-align: -0.35em;
	margin-right: 9px;
	border: none; background: none; padding: 0;
	box-shadow: none;
}

/* --- Kästchen zum Anhaken -------------------------------------------------
   GEMESSEN vorher: 13 x 13 Pixel. Die Vorgabe fuer dieses Projekt lautet
   mindestens 40 Pixel Klickflaeche.

   ZWEITER DURCHGANG, 31.08.2026: Der erste Aufbau war ein Flex-Kasten mit
   drei Kindern — Kaestchen, Satz, Pflichtstern. Sobald der Satz umbrach,
   nahm er die volle Breite, und der rote Stern rutschte an den rechten Rand
   der Box, weit weg vom Text. Das sah aus wie ein Fehler, und es war einer.

   Jetzt fliesst der Text ganz normal, und das Kaestchen sitzt absolut
   davor. Damit steht der Stern wieder unmittelbar hinter dem Satz, egal wie
   oft er umbricht — und die ganze Flaeche bleibt anklickbar. */
:is(.woocommerce, .woocommerce-checkout) form.checkout label.checkbox,
:is(.woocommerce, .woocommerce-checkout) form.checkout label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout label.woocommerce-form__label-for-checkbox {
	display: block;
	position: relative;
	min-height: 52px; box-sizing: border-box;
	padding: 14px 16px 14px 60px;
	margin: 0;
	background: var(--mt-grund);
	border: 1px solid var(--mt-linie-kraeftig);
	border-radius: var(--mt-r1);
	font-size: 15.5px; line-height: 1.5;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
:is(.woocommerce, .woocommerce-checkout) form.checkout label.checkbox:hover,
.woocommerce-checkout label.woocommerce-form__label-for-checkbox:hover {
	border-color: var(--mt-blau);
	background: var(--mt-blau-hauch);
}

/* DAS KAESTCHEN SELBST.
   26 Pixel: gross genug fuer einen Finger, klein genug, dass es nicht wie
   ein Eingabefeld aussieht. accent-color faerbt den Haken im Blau des Shops,
   ohne dass wir das Kaestchen nachbauen muessten — ein nachgebautes
   Kaestchen verliert die Bedienung mit der Tastatur und die Ansage der
   Vorlesehilfe. */
:is(.woocommerce, .woocommerce-checkout) form.checkout input[type="checkbox"],
.woocommerce-checkout form.checkout input[type="checkbox"] {
	position: absolute;
	left: 17px; top: 50%;
	transform: translateY(-50%);
	width: 26px; height: 26px;
	margin: 0;
	accent-color: var(--mt-blau);
	cursor: pointer;
}

/* ANGEHAKT SIEHT MAN AUCH AM RAHMEN.
   Ein 26-Pixel-Haken ist auf einem 15-Zoll-Bildschirm klein. Der ganze
   Kasten wechselt deshalb mit — so erkennt man den Zustand aus dem
   Augenwinkel, ohne genau hinzusehen. */
:is(.woocommerce, .woocommerce-checkout) form.checkout label.checkbox:has(input:checked),
.woocommerce-checkout label.woocommerce-form__label-for-checkbox:has(input:checked) {
	border-color: var(--mt-blau);
	background: var(--mt-blau-hauch);
}
:is(.woocommerce, .woocommerce-checkout) form.checkout label.checkbox:has(input:focus-visible),
.woocommerce-checkout label.woocommerce-form__label-for-checkbox:has(input:focus-visible) {
	border-color: var(--mt-blau-schrift);
	box-shadow: 0 0 0 3px rgba(52, 147, 205, .35);
}

/* "Lieferung an eine andere Adresse?" ist bei WooCommerce ein <h3>, in dem
   ein Kaestchen steckt — waehrend "Ein Konto erstellen?" daneben ein
   <p class="form-row"> ist. Zwei Bauteile fuer dieselbe Frage: das eine
   558 Pixel breit mit Kasten, das andere 312 mit Ueberschriftenlinie
   darunter. Gemessen am 31.08.2026 auf der Kassa.

   Das Markup kommt aus WooCommerce und laesst sich nicht sinnvoll
   umbiegen. Also bekommt die Ueberschrift hier die Gestalt, die ihre
   Funktion hat — sie IST eine Frage mit Kaestchen, keine Ueberschrift. */
.woocommerce-checkout h3#ship-to-different-address {
	/* WooCommerce setzt hier float:left. Ein gefloatetes Blockelement
	   schrumpft auf Inhaltsbreite — daher stand die Frage 305 Pixel breit
	   neben der 558 Pixel breiten daneben. */
	float: none;
	width: 100%;
	box-sizing: border-box;
	margin: var(--mt-r4) 0 0;
	padding: 0;
	border: none;
	font-size: inherit;
	font-weight: normal;
}
.woocommerce-checkout h3#ship-to-different-address > label {
	display: flex;
	align-items: center;
	gap: var(--mt-r3);
	width: 100%;
	box-sizing: border-box;
	min-height: var(--mt-hoehe-zeile);
	padding: var(--mt-r3) var(--mt-r4);
	border: 1px solid var(--mt-linie-kraeftig);
	border-radius: var(--mt-radius);
	font-size: var(--mt-s-glatt);
	font-weight: 600;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.woocommerce-checkout h3#ship-to-different-address > label:hover {
	border-color: var(--mt-blau);
	background: var(--mt-blau-hauch);
}
.woocommerce-checkout h3#ship-to-different-address > label:has(input:checked) {
	border-color: var(--mt-blau);
	background: var(--mt-blau-hauch);
}
.woocommerce-checkout h3#ship-to-different-address input[type="checkbox"] {
	position: static;
	transform: none;
}

/* Der Pflichtstern gehoert an den Satz, nicht an den Rand. */
.woocommerce-checkout label.woocommerce-form__label-for-checkbox .required {
	color: var(--mt-rot);
	text-decoration: none;
	border: none;
	margin-left: 2px;
}

/* Zwei Kaestchen untereinander brauchen Luft, sonst liest man sie als einen
   Block und hakt beide auf gut Glueck an. */
.woocommerce-checkout form.checkout .form-row:has(> label.woocommerce-form__label-for-checkbox),
.woocommerce-checkout form.checkout p:has(> label.woocommerce-form__label-for-checkbox) {
	margin: var(--mt-r4) 0 0;
	padding: 0;
}

/* --- Die Dokumente unter der Zustimmung ---------------------------------- */
.mt-kassa-dokumente {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 8px var(--mt-r2);
	margin: var(--mt-r3) 0 0;
	padding-left: 50px;   /* auf der Flucht des Zustimmungssatzes */
}
.mt-kassa-dokumente-wort {
	font-size: 14px; color: var(--mt-text-leise);
	margin-right: 2px;
}
.mt-kassa-dokumente a {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 40px; box-sizing: border-box;
	padding: 0 12px;
	border: 1px solid var(--mt-linie-kraeftig);
	border-radius: var(--mt-r1);
	background: var(--mt-grund);
	color: var(--mt-blau-tief);
	font-size: 14.5px; font-weight: 600;
	text-decoration: none;
}
.mt-kassa-dokumente a:hover,
.mt-kassa-dokumente a:focus-visible {
	border-color: var(--mt-blau);
	background: var(--mt-blau-hauch);
	color: var(--mt-blau-schrift);
	text-decoration: none;
}
.mt-kassa-dokumente a svg {
	width: 14px; height: 14px; flex: 0 0 auto;
	fill: none; stroke: currentColor; stroke-width: 1.9;
	stroke-linecap: round; stroke-linejoin: round;
}
.mt-kassa-dokumente-hinweis {
	flex-basis: 100%;
	font-size: 13px; color: var(--mt-text-leise);
}

@media (max-width: 768px) {
	.mt-kassa-dokumente { padding-left: 0; }
	.woocommerce-checkout #order_review table.shop_table td.product-name { padding-left: 68px; }
	.woocommerce-checkout #order_review td.product-name img.mt-kassa-bild { width: 56px; }
}

/* --- Die Spaltenbreiten der Bestellübersicht -----------------------------
   Ohne Vorgabe entscheidet der Browser nach dem Inhalt — und die Preiszelle
   traegt seit German Market zwei Zeilen ("€ 247,50" und "Zzgl. € 49,50 USt
   20 % (20 %)"). Sie nahm sich dadurch 198 von 446 Pixeln, waehrend der
   Produktname mit 248 auskommen musste. Der Name ist die Information, die
   der Kunde hier prueft; der Steuerbetrag darf umbrechen.
   table-layout: fixed, sonst greifen die Prozente nicht. */
.woocommerce-checkout #order_review table.shop_table { table-layout: fixed; width: 100%; }
.woocommerce-checkout #order_review table.shop_table th.product-name,
.woocommerce-checkout #order_review table.shop_table td.product-name { width: 66%; }
.woocommerce-checkout #order_review table.shop_table th.product-total,
.woocommerce-checkout #order_review table.shop_table td.product-total { width: 34%; }

/* ==========================================================================
   23. Nachbesserungen 31.08.2026
   ========================================================================== */

/* --- Der Name der Versandart bleibt zusammen -----------------------------
   Gemessen in der Summenspalte: 185 Pixel breit, zwei Zeilen, und der Riss
   lag mitten in "Versand mit der Post:". Das nowrap steht bewusst NUR auf
   dem Namen — der Betrag muss ausweichen duerfen, sonst laeuft die schmale
   Spalte ueber. Getrennt wird in inc/kassa.php am Preis-Element. */
.mt-versandname { white-space: nowrap; }

/* --- Die Gesamtsumme war halb fett ---------------------------------------
   Gemessen: Beschriftung 400, Betrag 700, beide 17 Pixel. Genau dieser
   Unterschied liess die Zahl "komisch fett" wirken — nicht ihre Staerke,
   sondern dass die Zeile in der Mitte das Gewicht wechselte.
   Jetzt traegt die ganze Zeile dasselbe Gewicht und ist dafuer etwas
   groesser: Sie ist die wichtigste Zahl der Seite, sie darf auffallen —
   aber als Zeile, nicht als Bruchstelle. */
/* SPEZIFISCH GENUG, SONST GEWINNT DIE ANDERE REGEL.
   Erster Anlauf: ".woocommerce .cart_totals .order-total th" — drei Klassen,
   ein Element. Weiter oben steht ".woocommerce .cart_totals table.shop_table
   th": ebenfalls drei Klassen, aber ZWEI Elemente, und damit staerker. Die
   Beschriftung blieb deshalb auf 400 stehen, waehrend der Betrag auf 600
   ging — genau der halbe Fettdruck, um den es ging.
   Gemessen nach dem ersten Anlauf: th 400/17px, td 600/17px. */
.woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart_totals table.shop_table tr.order-total td,
.woocommerce .cart_totals table.shop_table tr.order-total td strong,
.woocommerce .cart_totals table.shop_table tr.order-total .amount {
	font-weight: 600;
	font-size: 19px;
}

/* ==========================================================================
   24. Auswahl mit Tippfilter (Filterbox)

   Das Warum steht in theme.js bei wahlfelder(). Hier steht, wie es aussieht.
   ========================================================================== */

/* Das echte Feld bleibt im Formular — sichtbar ist es nicht mehr.
   display:none waere falsch: Manche Browser schicken ein so verstecktes
   Feld zwar mit, aber es laesst sich nicht mehr per Skript fokussieren, und
   die Sprungmarke aus dem <label> ginge ins Leere. */
.mt-wahlfeld-echt {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.mt-wahlfeld { position: relative; }

.mt-wahlfeld-knopf {
	display: flex; align-items: center; justify-content: space-between; gap: var(--mt-r2);
	width: 100%; min-height: 44px; box-sizing: border-box;
	padding: 8px var(--mt-r3);
	background: var(--mt-grund);
	border: 1px solid var(--mt-linie-kraeftig);
	border-radius: var(--mt-r1);
	color: var(--mt-text);
	font-family: inherit; font-size: 16px; text-align: left;
	cursor: pointer;
}
.mt-wahlfeld-knopf:hover { border-color: var(--mt-blau); }
.mt-wahlfeld-knopf:focus-visible {
	outline: 3px solid rgba(52, 147, 205, .35); outline-offset: 0;
	border-color: var(--mt-blau-schrift);
}
.mt-wahlfeld-wert { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-wahlfeld-knopf svg {
	width: 18px; height: 18px; flex: 0 0 auto;
	fill: none; stroke: currentColor; stroke-width: 2;
	stroke-linecap: round; stroke-linejoin: round;
	transition: transform .15s ease;
}
.mt-wahlfeld-knopf[aria-expanded="true"] svg { transform: rotate(180deg); }

/* DIE KLAPPE LIEGT UEBER ALLEM.
   Die Filterbox steht in einem Kasten mit eigenem Hintergrund; ohne z-index
   verschwindet die Liste dahinter. 30 ist hoeher als alles in dieser Box und
   niedriger als der klebende Kopf. */
.mt-wahlfeld-klappe {
	position: absolute; z-index: 30;
	top: calc(100% + 4px); left: 0; right: 0;
	background: var(--mt-grund);
	border: 1px solid var(--mt-blau);
	border-radius: var(--mt-r1);
	box-shadow: 0 8px 24px rgba(16, 42, 61, .18);
	padding: var(--mt-r2);
}
.mt-wahlfeld-suche {
	width: 100%; min-height: 44px; box-sizing: border-box;
	padding: 8px var(--mt-r3);
	border: 1px solid var(--mt-linie-kraeftig);
	border-radius: var(--mt-r1);
	font-family: inherit; font-size: 16px;
}
.mt-wahlfeld-suche::placeholder { font-style: normal; color: var(--mt-text-leise); }

/* 320 Pixel: rund acht Eintraege auf einmal. Mehr macht die Liste zu einem
   zweiten Bildschirm, weniger laesst sie wie ein Versehen aussehen. */
.mt-wahlfeld-liste {
	list-style: none; margin: var(--mt-r2) 0 0; padding: 0;
	max-height: 320px; overflow-y: auto;
	overscroll-behavior: contain;
}
.mt-wahlfeld-eintrag {
	display: flex; align-items: center;
	min-height: 40px; box-sizing: border-box;
	padding: 8px var(--mt-r3);
	border-radius: var(--mt-r1);
	font-size: 15.5px; line-height: 1.35;
	cursor: pointer;
}
.mt-wahlfeld-eintrag:hover,
.mt-wahlfeld-eintrag.mt-wahlfeld-aktiv { background: var(--mt-blau-hauch); }
.mt-wahlfeld-eintrag[aria-selected="true"] {
	background: var(--mt-blau-dunkel); color: #fff; font-weight: 600;
}
.mt-wahlfeld-leer {
	margin: var(--mt-r2) 0 0; padding: var(--mt-r3);
	color: var(--mt-text-leise); font-size: 15px;
}

/* ==========================================================================
   25. Versandzeile und der Warenkorb am Telefon — 31.08.2026
   ========================================================================== */

/* --- Marke links, Text rechts --------------------------------------------
   Bild und Text standen als zwei Inline-Elemente nebeneinander. In der
   schmalen Summenspalte rutschte das Horn dadurch in eine eigene Zeile ÜBER
   den Text — gemeldet und im Bild belegt.

   Als Flex-Zeile kann das nicht mehr passieren: Die Marke ist die erste
   Spalte mit fester Breite, der Text die zweite und bricht in sich selbst.
   align-items: flex-start, damit das Horn an der ERSTEN Textzeile klebt und
   nicht in der Mitte eines dreizeiligen Blocks schwebt. */
.mt-versandzeile {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 9px;
	text-align: right;
}
.mt-versandzeile .mt-versender-zeichen {
	margin: 0;
	margin-top: 2px;
	vertical-align: baseline;
}
.mt-versandtext { display: block; }

/* ==========================================================================
   Der Warenkorb am Telefon

   GEMESSEN bei 402 Pixeln, vorher: WooCommerce stapelt die Tabellenzellen zu
   sechs vollbreiten Zeilen. Das Produktbild ist dabei AUSGEBLENDET (die
   Regel steht in woocommerce-smallscreen.css), das Lösch-Kreuz bekommt eine
   eigene 52-Pixel-Zeile ganz oben, und der Name steht ohne Bild daneben.
   Für einen Shop, in dem man am Bild erkennt, was man bestellt hat, ist das
   die falsche Reihenfolge.

   Jetzt eine Karte je Position: Bild links, darüber der Name, darunter Preis
   und Stückzahl, die Zwischensumme quer darunter, das Kreuz oben rechts.
   ========================================================================== */

@media (max-width: 768px) {
	.woocommerce table.cart thead { display: none; }
	.woocommerce table.cart,
	.woocommerce table.cart tbody { display: block; width: 100%; }

	.woocommerce table.cart tbody tr.cart_item {
		display: grid;
		grid-template-columns: 92px minmax(0, 1fr);
		grid-template-areas:
			"bild name"
			"bild preis"
			"bild menge"
			"summe summe";
		column-gap: var(--mt-r3);
		row-gap: 6px;
		align-items: start;
		position: relative;
		padding: var(--mt-r3);
		margin: 0 0 var(--mt-r3);
		border: 1px solid var(--mt-linie);
		border-radius: var(--mt-r1);
		background: var(--mt-grund);
	}

	/* DAS BILD KOMMT ZURÜCK.
	   woocommerce-smallscreen.css blendet es mit einem eigenen Selektor aus;
	   dagegen hilft nur !important — die Regel dort steht auf
	   ".woocommerce table.cart .product-thumbnail" und damit gleichauf. */
	.woocommerce table.cart tbody td.product-thumbnail {
		display: block !important;
		grid-area: bild;
		width: auto; padding: 0;
		border: none;
	}
	.woocommerce table.cart tbody td.product-thumbnail img,
	.woocommerce-cart table.cart tbody td.product-thumbnail img {
		width: 92px; height: 62px;
	}

	.woocommerce table.cart tbody td.product-name    { grid-area: name; }
	.woocommerce table.cart tbody td.product-price    { grid-area: preis; }
	.woocommerce table.cart tbody td.product-quantity { grid-area: menge; }
	.woocommerce table.cart tbody td.product-subtotal { grid-area: summe; }

	.woocommerce table.cart tbody td {
		display: flex !important;
		justify-content: space-between;
		align-items: center;
		gap: var(--mt-r2);
		width: auto;
		padding: 0;
		border: none;
		text-align: left !important;
	}
	.woocommerce table.cart tbody td.product-name { display: block !important; }
	.woocommerce table.cart tbody td.product-name a {
		font-weight: 600; line-height: 1.35;
	}

	/* Die Zwischensumme quer darunter, abgesetzt — sie ist das Ergebnis
	   dieser Zeile und nicht noch eine Angabe unter vielen. */
	.woocommerce table.cart tbody td.product-subtotal {
		margin-top: 6px; padding-top: 8px;
		border-top: 1px solid var(--mt-linie);
		font-weight: 600;
	}

	/* Beschriftungen: nur dort, wo eine Zahl ohne sie nichts sagt. */
	.woocommerce table.shop_table_responsive tbody td::before,
	.woocommerce-page table.shop_table_responsive tbody td::before {
		content: attr(data-title);
		font-weight: 400;
		color: var(--mt-text-leise);
		font-size: 14.5px;
	}
	.woocommerce table.cart tbody td.product-name::before,
	.woocommerce table.cart tbody td.product-remove::before,
	.woocommerce table.cart tbody td.product-thumbnail::before { content: none !important; }

	/* Das Kreuz oben rechts, nicht als eigene Zeile. */
	.woocommerce table.cart tbody td.product-remove {
		position: absolute;
		top: 6px; right: 6px;
		width: auto; padding: 0;
		display: block !important;
	}
	.woocommerce table.cart tbody td.product-remove a.remove {
		width: 36px; height: 36px;
	}

	/* Gutschein und "Warenkorb aktualisieren" untereinander statt gequetscht. */
	.woocommerce table.cart td.actions {
		display: block !important;
		padding: var(--mt-r3) 0 0;
	}
	.woocommerce table.cart td.actions .coupon {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--mt-r2);
		float: none; width: auto;
		margin-bottom: var(--mt-r3);
	}
	.woocommerce table.cart td.actions .coupon input,
	.woocommerce table.cart td.actions .coupon .button,
	.woocommerce table.cart td.actions > .button {
		width: 100%; float: none; margin: 0;
		min-height: 48px;
	}

	/* Die Summenspalte nimmt die ganze Breite. */
	.woocommerce .cart_totals { width: auto; float: none; }
	.woocommerce .cart-collaterals .cart_totals table th,
	.woocommerce .cart-collaterals .cart_totals table td { padding: 10px 0; }
	.woocommerce .cart_totals .wc-proceed-to-checkout .button { width: 100%; }
}

/* ==========================================================================
   26. Die Kategorieseite ordnen — 31.08.2026

   Der grosse Suchkasten stand auf jeder Kategorieseite ganz oben, der
   Kategoriename klein darueber, die Modelle weit darunter. Wer auf
   "Porsche" geklickt hat, sah als Erstes ein Suchformular — obwohl er
   gerade gesucht HAT.

   Jetzt ein Balken von einer Zeile, der sich aufklappen laesst.
   ========================================================================== */

.mt-filterklappe {
	border: 1px solid var(--mt-linie-kraeftig);
	border-radius: var(--mt-r1);
	background: var(--mt-flaeche);
	margin-bottom: var(--mt-r4);
}
.mt-filterklappe > summary {
	display: flex; align-items: center; gap: var(--mt-r3);
	min-height: 50px; box-sizing: border-box;
	padding: 10px var(--mt-r4);
	cursor: pointer;
	font-size: 16px; font-weight: 600;
	color: var(--mt-blau-schrift);
	list-style: none;
	user-select: none;
}
/* Das Dreieck des Browsers weg — wir setzen einen eigenen Pfeil, der sich
   dreht. Safari braucht dafuer den eigenen Pseudoselektor. */
.mt-filterklappe > summary::-webkit-details-marker { display: none; }
.mt-filterklappe > summary::marker { content: ''; }

/* AUFGEKLAPPT BLEIBT DER KOPF KRAEFTIG.
   Damit sagt die Leiste selbst, in welchem Zustand sie ist — man muss
   nicht erst nach unten sehen, ob Felder da sind. Dieselbe Farbe wie beim
   Ueberfahren: zwei Toene fuer "aktiv" waeren einer zu viel. */
.mt-filterklappe > summary:hover,
.mt-filterklappe[open] > summary { background: var(--mt-blau-hauch); }

/* Offen gehoert der Kopf zum Kasten darunter — die Trennlinie darf weg. */
.mt-filterklappe[open] > summary { border-bottom-color: transparent; }
.mt-filterklappe > summary:focus-visible {
	outline: 3px solid rgba(52, 147, 205, .35);
	outline-offset: -3px;
}
.mt-filterklappe > summary svg {
	width: 20px; height: 20px; flex: 0 0 auto;
	fill: none; stroke: currentColor; stroke-width: 1.8;
	stroke-linecap: round; stroke-linejoin: round;
}
.mt-filterklappe > summary .mt-filterklappe-pfeil {
	margin-left: auto;
	transition: transform .18s ease;
}
.mt-filterklappe[open] > summary .mt-filterklappe-pfeil { transform: rotate(180deg); }
.mt-filterklappe[open] > summary { border-bottom: 1px solid var(--mt-linie); }

/* Der Kasten darin braucht keinen zweiten Rahmen. */
.mt-filterklappe .mc-filter {
	border: none;
	border-radius: 0;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mt-filterklappe > summary .mt-filterklappe-pfeil { transition: none; }
}

/* --- Die Sortierauswahl macht sich so breit wie ihr laengster Eintrag -----
   Gemessen: 310 Pixel auf Deutsch, 224 auf Englisch — der Unterschied ist
   "Nach Durchschnittsbewertung sortieren". Sichtbar steht dort aber immer
   nur die GEWAEHLTE Zeile ("Standardsortierung", 18 Zeichen). Ein Deckel
   schneidet also nichts weg, was jemand zu sehen bekommt; die Auswahlliste
   selbst klappt weiterhin in voller Breite auf.

   Damit passt die Leiste auf Deutsch wieder in EINE Zeile:
   155 + 240 + 382 = 777 plus 40 Pixel Abstaende, bei 860 nutzbaren. */
.woocommerce .woocommerce-ordering select { max-width: 240px; }

/* ==========================================================================
   27. Der Warenkorb am Telefon, zweiter Durchgang — 31.08.2026

   ANGESEHEN, NICHT NUR GEMESSEN. Der erste Durchgang stellte die Karte auf,
   aber im Bild sah man, was Zahlen allein nicht zeigen:

   - Der Steuerhinweis lief RECHTS AUS DER KARTE HERAUS. Gemessen an einer
     Zeile: Inhalt 373 Pixel breit, Zelle 316 — die Zelle war ein Flex-Kasten
     ohne Umbruch, und "Zzgl. € 6,50 USt 20% (20%)" ging von 246 bis 402,
     die Karte endete bei 346.
   - Das Löschkreuz lag ÜBER dem Produktnamen: Kreuz 316..352, Name 134..346.
   ========================================================================== */

@media (max-width: 768px) {
	/* PREIS und ZWISCHENSUMME duerfen umbrechen.
	   Beschriftung und Betrag bleiben in einer Zeile, der Steuerhinweis
	   rutscht darunter — dort hat er die volle Breite und passt. */
	.woocommerce table.cart tbody td.product-price,
	.woocommerce table.cart tbody td.product-subtotal {
		flex-wrap: wrap;
		row-gap: 2px;
	}
	.woocommerce table.cart tbody td .wgm-tax,
	.woocommerce table.cart tbody td .tax_label {
		flex: 0 0 100%;
		text-align: right;
		font-size: 13.5px;
		color: var(--mt-text-leise);
		line-height: 1.4;
	}
	/* Der Zeilenumbruch von German Market ist im Flex-Kasten ein leeres
	   Element, das nur Platz kostet. */
	.woocommerce table.cart tbody td br.wgm-break { display: none; }

	/* PLATZ FUER DAS KREUZ.
	   Ohne diese Reserve legt sich das absolut gesetzte Kreuz ueber die
	   letzten Buchstaben des Produktnamens — bei langen Modellnamen also
	   immer. */
	.woocommerce table.cart tbody td.product-name { padding-right: 44px; }

	/* DAS KREUZ ALS TEIL DER KARTE, nicht als Fremdkoerper.
	   Vorher ein grosser heller Kreis, der ueber dem Text schwebte. Jetzt
	   ein ruhiges Feld in der Ecke, das erst beim Beruehren rot wird — und
	   das Zeichen sitzt mittig darin, nicht oben. */
	.woocommerce table.cart tbody td.product-remove { top: 10px; right: 10px; }
	.woocommerce table.cart tbody td.product-remove a.remove {
		display: flex !important;
		align-items: center; justify-content: center;
		width: 34px; height: 34px;
		line-height: 1;
		border: 1px solid var(--mt-linie-kraeftig);
		border-radius: var(--mt-r1);
		background: var(--mt-grund);
		color: var(--mt-text-leise) !important;
		font-size: 20px;
	}
	.woocommerce table.cart tbody td.product-remove a.remove:hover,
	.woocommerce table.cart tbody td.product-remove a.remove:focus-visible {
		background: var(--mt-rot-hauch);
		border-color: var(--mt-rot);
		color: var(--mt-rot) !important;
	}

	/* KEINE STREIFEN IN DER KARTE.
	   WooCommerce faerbt in der schmalen Ansicht jede zweite Zelle grau.
	   In einer Tabelle hilft das beim Lesen — in einer Karte sieht es aus,
	   als waeren einzelne Zeilen hervorgehoben. */
	.woocommerce table.cart tbody tr.cart_item td,
	.woocommerce-page table.cart tbody tr.cart_item td {
		background: transparent !important;
	}

	/* Der Lieferzeit-Hinweis gehoert zum Namen und nicht dazwischen. */
	.woocommerce table.cart tbody td.product-name dl.variation,
	.woocommerce table.cart tbody td.product-name .wgm-info {
		margin: 4px 0 0;
		font-size: 13.5px;
		color: var(--mt-text-leise);
	}

	/* "Warenkorb aktualisieren" sah aus wie abgeschaltet — heller Text auf
	   hellem Grund. Als zweite Handlung gehoert er zurueckhaltend, aber
	   lesbar. */
	.woocommerce table.cart td.actions > .button {
		background: var(--mt-grund);
		color: var(--mt-blau-tief);
		border: 1px solid var(--mt-linie-kraeftig);
	}
}

/* ==========================================================================
   28. Nachbesserungen 31.08.2026, zweiter Durchgang
   ========================================================================== */

/* --- "Warenkorb ansehen" wurde beim Überfahren unsichtbar ----------------
   Die allgemeine Knopfregel setzt beim Überfahren Schrift auf WEISS und
   Grund auf Blau. Fuer den hellen Zweitknopf holte eine Sonderregel den
   hellen Grund zurueck — die SCHRIFT aber nicht. Ergebnis: weiss auf hell,
   der Knopf war beim Draufzeigen nicht mehr lesbar.

   Im Bild vom 31.08.2026 genau so zu sehen. Jetzt stehen Grund UND Schrift
   ausdruecklich beisammen, damit sie nicht wieder auseinanderlaufen. */
.mt-korbklappe-knoepfe .button:first-child:hover,
.mt-korbklappe-knoepfe .button:first-child:focus-visible {
	background: var(--mt-blau-hauch);
	border-color: var(--mt-blau);
	color: var(--mt-blau-schrift);
}

/* Beide Knoepfe mittig, und zwar ueber den Flex-Kasten statt ueber
   text-align: Bei einem Knopf mit Symbol oder ungleichem Innenabstand
   entscheidet text-align nur ueber die Textzeile, nicht ueber den Inhalt. */
.mt-korbklappe-knoepfe .button {
	display: inline-flex;
	align-items: center; justify-content: center;
	min-height: 46px; box-sizing: border-box;
	text-align: center;
}

/* ==========================================================================
   29. Die Auswahlfelder, zweiter Durchgang — 31.08.2026
   ========================================================================== */

/* --- DER TIPPFILTER WIRKTE NICHT ------------------------------------------
   Gemeldet: "wenn ich Alvis eingebe, wird das gar nicht in den Ergebnissen
   angezeigt". Im Bild bestaetigt — und das Skript hatte recht daran gar
   keinen Anteil: Es meldete "gefiltert: 1, Treffer: Alvis (2)".

   Die Zeilen bekamen also brav ihr hidden — nur sah man davon nichts.
   Grund: Das Attribut hidden wirkt ueber die Vorgabe des Browsers
   (display: none), und die verliert gegen JEDE eigene display-Angabe. Und
   die Zeilen standen auf display: flex.

   Klassischer Fall, und er faellt nur auf, wenn man HINSIEHT statt zu
   messen. Deshalb hier ausdruecklich. */
.mt-wahlfeld-eintrag[hidden] { display: none !important; }

/* --- ALLE FELDER DER FILTERBOX GLEICH HOCH --------------------------------
   Gemessen: Suchfeld 40, Auswahlknopf 44, Preisfelder 41. Drei Hoehen in
   einem Kasten — im Bild sieht man die Stufen sofort.
   44 fuer alle: Das ist die Vorgabe fuer die Klickflaeche und zugleich die
   groesste der drei, also wird nichts kleiner. */
.mc-filter input[type="text"],
.mc-filter input[type="search"],
.mc-filter input[type="number"],
.mc-filter .dgwt-wcas-search-input,
.mc-filter .mt-wahlfeld-knopf,
.mc-filter .mt-wahlfeld-suche,
.mc-filter select {
	min-height: 44px;
	height: 44px;
	box-sizing: border-box;
}
/* Das echte Auswahlfeld bleibt versteckt — es darf keine Hoehe bekommen,
   sonst reisst es eine Luecke in die Reihe. */
.mc-filter select.mt-wahlfeld-echt { height: 1px; min-height: 0; }

/* Die Klappe darf breiter sein als der Knopf: Kategorienamen wie
   "24 Stunden SPA – Francorchamps (45)" brachen sonst in drei Zeilen. */
.mt-wahlfeld-klappe { min-width: 280px; }


/* ==========================================================================
   30. Der Ausdruck der Merkliste, zweiter Durchgang — 31.08.2026

   Die leere erste Seite ist weg (die Raster im Druck waren die Ursache).
   Im Bild vom Ausdruck stand danach aber nur noch das BILD je Zeile — der
   Text daneben fehlte.

   Grund: Die Zeile wurde im Druck auf display:flex gestellt, ohne der
   Textspalte eine Breite zu geben. Ein Flex-Kind ohne flex-Angabe nimmt
   seine Inhaltsbreite; in einem Kasten, dessen Breite der Browser beim
   Seitenaufbau noch nicht kennt, wird daraus null.
   ========================================================================== */

@media print {
	/* Die Textspalte bekommt den Rest — und darf schrumpfen.
	   min-width:0 ist der Teil, den man vergisst: Ohne ihn nimmt ein
	   Flex-Kind mindestens seine Inhaltsbreite ein und laeuft aus der
	   Seite heraus, statt umzubrechen. */
	ul.mc-merk-liste .mc-merk-text,
	[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-text {
		flex: 1 1 auto;
		min-width: 0;
		display: block !important;
	}
	ul.mc-merk-liste .mc-merk-bild,
	[data-mt-ansicht="raster"] ul.mc-merk-liste .mc-merk-bild {
		flex: 0 0 28mm;
	}

	/* SCHWARZ AUF WEISS.
	   Die Bildschirmfarben sind gedaempftes Blaugrau — auf Papier und erst
	   recht in Graustufen wird daraus ein blasses Grau. Im Druck zaehlt
	   Lesbarkeit, nicht Farbklang. */
	.mc-merk, .mc-merk *,
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product * {
		color: #000 !important;
		background: transparent !important;
	}
	.mc-merk-name, .woocommerce-loop-product__title {
		font-weight: 700;
		text-decoration: none;
	}

	/* Was auf Papier nichts verloren hat. */
	.mc-merk-zeile .mc-merk-knopf,
	.mc-merk-zeile .mc-merk-weg,
	.mc-merk-zeile .button,
	.mc-merk-summe .button { display: none !important; }

	/* Ueberschrift und Summe bleiben beisammen. */
	.mc-merk-kopf, .mc-merk-summe { break-inside: avoid; }
}


/* ==========================================================================
   31. Die Kopfsuche am Telefon — 31.08.2026
   ========================================================================== */

/* DAS FELD LAG UNTER DEM KNOPF.
   Gemessen bei 375 Pixeln Fensterbreite: Eingabefeld 343, Knopf 92 —
   zusammen 435 in einer 375 Pixel breiten Zeile. Der Ueberschuss lag nicht
   neben dem Knopf, sondern DAHINTER, und der Platzhalter war ab
   "Artikelnummer o" abgeschnitten.

   Ursache: FiboSearch setzt sein Eingabefeld auf width: 100 %. In einem
   Flex-Kasten heisst das "so breit wie moeglich", und ohne min-width: 0
   schrumpft ein Flex-Kind nicht unter seine Inhaltsbreite. Beides gehoert
   zusammen — width allein reicht nicht. */
.mt-kopfsuche .dgwt-wcas-sf-wrapp { display: flex; align-items: stretch; }
.mt-kopfsuche .dgwt-wcas-sf-wrapp input.dgwt-wcas-search-input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

@media (max-width: 560px) {
	/* NUR DIE LUPE.
	   "Suchen" braucht auf einem Telefon 92 der 375 Pixel — ein Viertel der
	   Zeile fuer ein Wort, das der Knopf ohnehin durch seine Lage sagt.
	   FiboSearch setzt hier reinen Text ohne Symbol, deshalb kommt die Lupe
	   als Hintergrundbild und der Text ueber font-size: 0 weg.

	   DER NAME BLEIBT: Der Knopf traegt aria-label="Suchen" — Vorlesehilfen
	   sagen ihn weiterhin an. Verloren geht nur das, was man sieht, und nur
	   dort, wo kein Platz dafuer ist. */
	.mt-kopfsuche .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit,
	.mt-kopfsuche button[type="submit"] {
		font-size: 0;
		flex: 0 0 56px;
		width: 56px; min-width: 56px;
		padding: 0;
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") !important;
		/* !important, weil weiter oben ein background: … !important auf
		   demselben Knopf steht und die Kurzschreibweise das Bild sonst
		   wieder wegwischt. Im Bild vom 31.08. war der Knopf deshalb eine
		   leere blaue Flaeche. */
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: 21px 21px !important;
		background-color: var(--mt-blau-schrift) !important;
	}
}


/* ==========================================================================
   32. Die Summenzeilen brauchen ihre eigene Breite — 31.08.2026

   DAS PROBLEM, in Zahlen: Die Wertspalte war 140 Pixel breit (804..944),
   der Inhalt der Versandzeile 185 (759..944). Der Name begann also 45 Pixel
   LINKS von seiner Spalte und ragte in die Beschriftung hinein.

   ERSTER ANLAUF: die Spalten neu aufteilen. Wirkungslos — und der Grund ist
   grundsaetzlich: Die Summenzeilen stehen im <tfoot> DERSELBEN Tabelle wie
   die Produktzeilen. Sie erben deren Spalten, und die rechte davon ist die
   schmale Preisspalte (34 %). Eine eigene Breite kann man ihnen dort nicht
   geben, ohne die Produktzeilen mitzuverschieben.

   Auch mehr Prozent haetten es nicht geloest: "Versand mit der Post:" misst
   allein 144 Pixel, dazu Logo und Betrag. In einer geteilten Zeile dieser
   Breite geht das nicht auf.

   DIE LOESUNG: Die Summenzeilen sind KEINE Tabellenzeilen mehr, sondern
   Flex-Zeilen — Beschriftung links, Wert rechts, und der Wert nimmt sich,
   was er braucht. Das darf man hier, weil die Summenzeilen mit den
   Produktspalten gar nicht buendig sein muessen: Sie stehen unter einem
   Trennstrich und werden als eigener Block gelesen. Die Betraege enden
   weiterhin alle an derselben Kante.
   ========================================================================== */

.woocommerce-checkout #order_review table.shop_table tfoot,
.woocommerce .cart_totals table.shop_table tbody {
	display: block;
	width: 100%;
}
.woocommerce-checkout #order_review table.shop_table tfoot tr,
.woocommerce .cart_totals table.shop_table tbody tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mt-r3);
	width: 100%;
}
.woocommerce-checkout #order_review table.shop_table tfoot th,
.woocommerce .cart_totals table.shop_table tbody th {
	flex: 0 0 auto;
	width: auto;
	text-align: left;
	white-space: nowrap;
}
.woocommerce-checkout #order_review table.shop_table tfoot td,
.woocommerce .cart_totals table.shop_table tbody td {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	text-align: right;
}

/* Die Versandzeile darf jetzt in einer Zeile stehen — und wenn es doch
   einmal eng wird, rutscht der Betrag nach unten statt hinauszulaufen. */
.mt-versandzeile { flex-wrap: wrap; }
.mt-versandtext { min-width: 0; }

/* --- Der gesetzte Filter steht IN der Trefferzeile ------------------------
   Erster Anlauf war ein blaues Schild als eigenes Element in der Leiste.
   Es sah aus wie ein Knopf, war aber keiner, kostete eine eigene Spalte und
   brachte die Leiste wieder auf zwei Zeilen.

   Jetzt Teil desselben Satzes: "1–24 von 2.119 Modellen · gefiltert nach
   1:18". Der Wert steht fett, damit man ihn im Satz findet — mehr braucht
   es nicht, denn zurueckgesetzt wird im Filterkasten darueber. */
.woocommerce-result-count .mc-gesetzt {
	color: var(--mt-text-leise);
}
.woocommerce-result-count .mc-gesetzt strong {
	color: var(--mt-blau-schrift);
	font-weight: 700;
}

/* --- Die Trennlinie gehoert an die ZEILE, nicht an die Zellen -------------
   Seit die Summenzeilen Flex-Zeilen sind, zeichnet jede Zelle ihre eigene
   untere Linie — und zwischen den beiden Zellen klafft die Luecke des
   Flex-Abstands. Im Bild sieht man zwei kurze Striche statt einer Linie.
   Also: Linie an die Zeile, Zellen ohne. */
.woocommerce-checkout #order_review table.shop_table tfoot tr,
.woocommerce .cart_totals table.shop_table tbody tr {
	border-bottom: 1px solid var(--mt-linie);
	padding: 10px 0;
}
.woocommerce-checkout #order_review table.shop_table tfoot tr:last-child,
.woocommerce .cart_totals table.shop_table tbody tr:last-child {
	border-bottom: none;
}
.woocommerce-checkout #order_review table.shop_table tfoot th,
.woocommerce-checkout #order_review table.shop_table tfoot td,
.woocommerce .cart_totals table.shop_table tbody th,
.woocommerce .cart_totals table.shop_table tbody td {
	border: none;
	padding-top: 0; padding-bottom: 0;
}
/* Die Gesamtsumme setzt sich mit einer kraeftigeren Linie ab. */
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total,
.woocommerce .cart_totals table.shop_table tbody tr.order-total {
	border-top: 2px solid var(--mt-linie-kraeftig);
	padding-top: 14px;
}

/* Der Reset braucht das tr im Selektor — weiter oben steht
   ".woocommerce-checkout #order_review table.shop_table tfoot tr td", und
   dagegen verliert ein Selektor ohne tr. Deshalb standen ueber der
   Gesamtsumme noch zwei kurze Striche statt einer Linie. */
.woocommerce-checkout #order_review table.shop_table tfoot tr th,
.woocommerce-checkout #order_review table.shop_table tfoot tr td,
.woocommerce .cart_totals table.shop_table tbody tr th,
.woocommerce .cart_totals table.shop_table tbody tr td {
	border: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* --- Und die Gesamtsummen-Zeile ebenso -----------------------------------
   Nachgemessen am 31.08.2026: TH 533..638 und TD 650..804, beide mit
   border-top — zwei kurze Striche mit der Flex-Luecke dazwischen, genau wie
   im Bild. Der allgemeine Reset traf sie nicht, weil weiter oben eine Regel
   MIT .order-total steht und damit spezifischer ist.
   Die Linie zeichnet die ZEILE, nicht ihre Zellen. */
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td,
.woocommerce .cart_totals table.shop_table tbody tr.order-total th,
.woocommerce .cart_totals table.shop_table tbody tr.order-total td {
	border: 0;
}


/* ==========================================================================
   33. Die Blätterleiste — 31.08.2026

   Vorher: nackte Ziffern und ein Pfeil, rund 30 Pixel gross, ohne Rahmen.
   Fuer die Zielgruppe zu klein und zu leise — und der Pfeil sagte nicht,
   wohin er fuehrt.
   ========================================================================== */

.woocommerce nav.woocommerce-pagination { margin: var(--mt-r5) 0 var(--mt-r3); }
.woocommerce nav.woocommerce-pagination ul {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 8px;
	border: none; margin: 0; padding: 0;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: none; margin: 0; padding: 0; overflow: visible;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 46px; min-height: 46px; box-sizing: border-box;
	padding: 0 14px;
	border: 1px solid var(--mt-linie-kraeftig);
	border-radius: var(--mt-r1);
	background: var(--mt-grund);
	color: var(--mt-blau-tief);
	font-size: 16px; font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:focus-visible {
	background: var(--mt-blau-hauch);
	border-color: var(--mt-blau);
	color: var(--mt-blau-schrift);
}
/* DIE AKTUELLE SEITE IST GEFUELLT, nicht nur hell hinterlegt — sie muss man
   aus zwei Metern Abstand finden. */
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current {
	background: var(--mt-blau-dunkel);
	border-color: var(--mt-blau-schrift);
	color: #fff;
}
/* Die Auslassung ist kein Knopf und sieht auch nicht so aus. */
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.dots {
	border-color: transparent; background: none; min-width: 24px; padding: 0;
	color: var(--mt-text-leise);
}
/* "Zurück" und "Weiter" tragen Woerter und duerfen breiter sein. */
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next { padding: 0 var(--mt-r4); }

.mt-seitenstand {
	text-align: center;
	margin: 0 0 var(--mt-r5);
	color: var(--mt-text-leise);
	font-size: 15px;
}

@media (max-width: 560px) {
	/* Am Telefon zaehlt der Weg vor und zurueck; die Zahlen dazwischen
	   kosten nur Zeilen. Erste, letzte und aktuelle bleiben. */
	.woocommerce nav.woocommerce-pagination ul li a.page-numbers:not(.prev):not(.next):not(.first):not(.last) { display: none; }
	.woocommerce nav.woocommerce-pagination ul li a.prev,
	.woocommerce nav.woocommerce-pagination ul li a.next { flex: 1 1 auto; }
}

/* --- Die zwei Knoepfe im Mini-Warenkorb bleiben NEBENEINANDER -------------
   GEMESSEN auf einer Produktseite: Raster "168px 168px", Knopfhoehe 66
   statt 46 — "Warenkorb ansehen" brach auf drei Zeilen um.

   Die Ursache sind die FESTEN 168 Pixel in einer 380 Pixel breiten Klappe:
   380 minus 48 Innenabstand minus 8 Zwischenraum ergibt 324, also 162 je
   Knopf. Der deutsche Text braucht rund 175.

   Also bekommt die Klappe die Breite, die ihr Inhalt braucht, und die
   Knoepfe teilen sie sich zu gleichen Teilen — statt auf zwei Zahlen
   festgenagelt zu sein, die beim naechsten laengeren Wort wieder zu klein
   sind. 440 minus 48 minus 8 macht 192 je Knopf.

   nowrap dazu: Sollte es doch einmal nicht reichen, ist das Ergebnis ein
   abgeschnittenes Wort und kein dreizeiliger Knopf, der die halbe Klappe
   verschiebt. */
/* SCHMALER — 380 statt 440 Pixel.
   440 war eine Notloesung: Bei 380 passten "Warenkorb ansehen" und "Zur
   Kassa" nicht nebeneinander, weil beide feste 168-Pixel-Spalten hatten.
   Die Ursache war die feste Spalte, nicht die Breite der Klappe. Mit
   1fr 1fr und einer Schriftstufe weniger bleiben je 170 Pixel — genug
   fuer "Warenkorb ansehen" in einer Zeile. */
.mt-korbklappe {
	width: 380px;
	max-width: calc(100vw - 32px);
	transform-origin: top right;
}

/* AUFKLAPPEN AUS DER ECKE DES KNOPFES.
   Die Klappe haengt an display:none — darauf laesst sich nichts
   ueberblenden. Eine Animation dagegen laeuft, sobald das Element
   sichtbar wird, und braucht kein zweites Merkmal im Markup. */
@keyframes mt-klappe-auf {
	from { opacity: 0; transform: translateY(-8px) scale(.97); }
	to   { opacity: 1; transform: none; }
}
.mt-korbklappe:not([hidden]) {
	animation: mt-klappe-auf .19s cubic-bezier(.22, .9, .3, 1);
}

/* DIE LISTE SCROLLT, DER REST BLEIBT STEHEN.
   Bei zwoelf Modellen im Korb war die Klappe hoeher als der Bildschirm —
   Zwischensumme und beide Knoepfe standen unterhalb des Sichtfelds, und
   die Klappe selbst laesst sich nicht scrollen. Jetzt scrollt nur die
   Liste; Summe und Knoepfe bleiben immer sichtbar.

   46vh: knapp die Haelfte der Fensterhoehe. Genug fuer vier bis fuenf
   Modelle, und der angeschnittene fuenfte zeigt, dass es weitergeht. */
.mt-korbklappe-liste {
	/* Waagrecht wird hier nie gescrollt — was breiter ist, wird
	   abgeschnitten. Ein Rollbalken quer durch die Klappe ist immer ein
	   Fehler, nie eine Absicht. */
	overflow-x: hidden;

	/* VIER MODELLE SICHTBAR, der Rest scrollt.
	   Eine Zeile misst rund 78 Pixel (Bild 56 plus Abstand). Vier davon
	   sind 312; mit 336 bleibt der fuenfte angeschnitten — daran sieht man,
	   dass es weitergeht, noch bevor man den Rollbalken bemerkt. */
	max-height: 336px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--mt-linie-kraeftig) transparent;
	position: relative;
}
.mt-korbklappe-liste::-webkit-scrollbar { width: 10px; }
.mt-korbklappe-liste::-webkit-scrollbar-thumb {
	background: var(--mt-linie-kraeftig);
	border-radius: var(--mt-radius-pille);
	border: 3px solid var(--mt-grund);
}

/* DER AUSLAUF SAGT: DA KOMMT NOCH WAS.
   Ein Rollbalken allein wird uebersehen — duenn, grau, am Rand. Der weiche
   Auslauf unten ist das Signal, das auch bemerkt, wer nicht danach sucht.
   Er klebt am unteren Rand des Sichtfensters (position: sticky) und wandert
   deshalb beim Scrollen mit. */
.mt-korbklappe-liste::after {
	content: "";
	display: block;
	position: sticky;
	bottom: 0;
	height: 34px;
	margin-top: -34px;
	background: linear-gradient(to top, var(--mt-grund) 30%, transparent);
	pointer-events: none;
	transition: opacity .15s ease;
}
/* Ganz unten angekommen ist nichts mehr anzudeuten. */
.mt-korbklappe-liste.mt-am-ende::after { opacity: 0; }

/* Die Gegenbewegung beim Zuklappen. */
@keyframes mt-klappe-zu {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(-8px) scale(.97); }
}
.mt-korbklappe.mt-klappe-zu {
	animation: mt-klappe-zu .15s ease-in forwards;
}
.mt-korbklappe-liste::-webkit-scrollbar { width: 10px; }
.mt-korbklappe-liste::-webkit-scrollbar-thumb {
	background: var(--mt-linie-kraeftig);
	border-radius: var(--mt-radius-pille);
	border: 3px solid var(--mt-grund);
}
.mt-korbklappe-knoepfe {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
}
.mt-korbklappe-knoepfe .button {
	width: 100%;
	min-height: var(--mt-hoehe);
	white-space: nowrap;
	font-size: var(--mt-s-glatt);
	padding: 0 var(--mt-r2);
}

/* ==========================================================================
   34. Kassa und Warenkorb, Durchgang 31.08.2026 (abends)
   ========================================================================== */

/* --- WARUM DIE KARTE JETZT BEI 768 BEGINNT UND NICHT BEI 680 --------------
   Gemeldet: Zwischen rund 680 und 768 Pixeln zerfaellt der Warenkorb in
   einzelne Kaesten ("Produkt:", "Preis:", "Anzahl:"), und bei "Sendung" und
   "Gesamtsumme" werden die Hintergruende grau.

   Beides ist DIESELBE Ursache: WooCommerce liefert eine eigene Datei
   woocommerce-smallscreen.css, und die greift ab 768 Pixel. Sie stapelt die
   Tabellenzellen und faerbt jede zweite grau. Meine Kartenansicht begann
   aber erst bei 680 — dazwischen lief WooCommerces Stapel-Layout voellig
   ungestaltet.

   Die Bruchstelle gehoert also dorthin, wo die fremde Datei einsetzt. Sonst
   gibt es immer ein Fenster, in dem beides halb gilt. */

/* --- Die Summentabelle nimmt die ganze Breite ----------------------------
   GEMESSEN: Tabelle 411 Pixel breit, die Summenzeilen darin nur 271. Die
   rechte Spalte endete 140 Pixel vor dem Rand des Kastens — genau die
   Luecke, die im Bild auffaellt.

   Ursache: Ich hatte den <tfoot> auf display:block gestellt. Damit ist sein
   umschliessender Kasten nicht mehr die Tabelle, sondern eine anonyme Box,
   die sich nach den Spalten richtet — und width:100% bezieht sich dann auf
   diese 271 Pixel.

   Loesung: Auch die TABELLE wird ein Block, und Kopf und Rumpf bleiben
   Tabellen fuer sich. Dann haben alle drei dieselbe Breite, die Spalten der
   Produktzeilen stimmen weiterhin mit der Kopfzeile ueberein, und die
   Summenzeilen duerfen die volle Breite nehmen.
   Gemessen danach: Kopfzeile 411, Fusszeile 411, Wertspalte 289 statt 149. */
.woocommerce-checkout #order_review table.shop_table { display: block; }
.woocommerce-checkout #order_review table.shop_table thead,
.woocommerce-checkout #order_review table.shop_table tbody {
	display: table;
	width: 100%;
	table-layout: fixed;
}
.woocommerce-checkout #order_review table.shop_table tfoot {
	display: block;
	width: 100%;
}
.woocommerce-checkout #order_review table.shop_table tfoot tr { width: 100%; }

/* --- Die Rechtstexte sind Links, keine Knoepfe ----------------------------
   "darauf klickt eh niemand" — stimmt, und drei gleich grosse Knoepfe unter
   dem Pflichthaken sahen aus, als muesste man sie druecken. Sie sind ein
   ANGEBOT zum Nachlesen, kein Schritt im Ablauf.

   Als Links bleiben sie erreichbar, treten aber zurueck. Die Klickflaeche
   bleibt trotzdem bei 40 Pixeln Hoehe — die Vorgabe fuer dieses Projekt
   gilt auch fuer Links. */
.mt-kassa-dokumente {
	gap: 4px var(--mt-r3);
	padding-left: 0;
	margin-top: var(--mt-r2);
}
.mt-kassa-dokumente a {
	min-height: 40px;
	padding: 0;
	border: none;
	background: none;
	color: var(--mt-blau-tief);
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mt-kassa-dokumente a:hover,
.mt-kassa-dokumente a:focus-visible {
	background: none;
	border: none;
	color: var(--mt-blau-schrift);
	text-decoration: underline;
}
.mt-kassa-dokumente a svg { width: 12px; height: 12px; opacity: .7; }
.mt-kassa-dokumente-hinweis { display: none; }

/* --- Der Mini-Warenkorb am Telefon ----------------------------------------
   Die Klappe ist dort so breit wie der Bildschirm minus Rand. Bei 375
   Pixeln bleiben je Knopf rund 150 — "Warenkorb ansehen" braucht bei 15 px
   Schrift etwa 175. Statt die Knoepfe zu stapeln (das war ausdruecklich
   nicht gewuenscht) wird die Schrift dort eine Spur kleiner und der
   Innenabstand knapper. Nebeneinander bleiben sie. */
@media (max-width: 560px) {
	.mt-korbklappe-knoepfe .button {
		font-size: 14px;
		padding: 0 6px;
		letter-spacing: -0.01em;
	}
}

/* --- Ruhigere, gleichmaessigere Kassa -------------------------------------
   Die Abschnitte der rechten Spalte standen mit unterschiedlichen
   Abstaenden untereinander. Ein Ablauf, den jeder Kunde verstehen muss,
   liest sich besser, wenn die Schritte gleich weit auseinanderliegen. */
.woocommerce-checkout #order_review > * + * { margin-top: var(--mt-r4); }
.woocommerce-checkout #order_review .mt-kassa-dokumente { margin-top: var(--mt-r2); }
.woocommerce-checkout #payment { margin-top: 0; }

/* --- Zwei Nachzuegler aus dem Bild bei 760 Pixeln ------------------------- */

/* 1. DIE GRAUEN FLAECHEN IN DER SUMME.
      woocommerce-smallscreen.css faerbt ab 768 Pixeln jede zweite Zelle —
      in einer Tabelle eine Lesehilfe, in unserem Summenkasten sieht es aus,
      als waeren "Sendung" und "Gesamtsumme" hervorgehoben. Die Regel
      traf bisher nur die Produktzeilen des Warenkorbs, nicht die Summen. */
@media (max-width: 768px) {
	.woocommerce .cart_totals table.shop_table tr,
	.woocommerce .cart_totals table.shop_table th,
	.woocommerce .cart_totals table.shop_table td,
	.woocommerce-checkout #order_review table.shop_table tr,
	.woocommerce-checkout #order_review table.shop_table th,
	.woocommerce-checkout #order_review table.shop_table td {
		background: transparent !important;
	}
}

/* 2. EIN LEERES ELEMENT SCHOB DEN BETRAG IN DIE NAECHSTE ZEILE.
      German Market setzt in jede Preiszelle ein <small class="tax_label">,
      das hier leer bleibt. Ich hatte es zusammen mit dem Steuerhinweis auf
      volle Breite gestellt — ein unsichtbares Element, das eine ganze Zeile
      belegt und alles darunter schiebt. Im Bild stand "Preis" allein und
      "€ 40,83" darunter.
      Leer heisst weg. */
.woocommerce table.cart tbody td .tax_label:empty { display: none; }

/* --- Die Zellen der Warenkorb-Karte fuellen ihre Spalte -------------------
   GEMESSEN bei 760 Pixeln: Die Preiszelle war 72 Pixel breit — Beschriftung
   30 plus Betrag 54 passen darin nicht, also stand "€ 40,83" unter
   "Preis". Dabei ist die Rasterspalte mehrere hundert Pixel breit.

   Grund: Die Zellen sind Rasterkinder OHNE eigene Breitenangabe, und
   WooCommerce setzt ihnen in der schmalen Ansicht width:auto. Ein
   Rasterkind mit auto-Breite und display:flex schrumpft auf seinen Inhalt,
   statt die Spur zu fuellen.
   Also ausdruecklich: fuelle die Spur. */
@media (max-width: 768px) {
	.woocommerce table.cart tbody tr.cart_item td {
		justify-self: stretch;
		width: 100%;
		min-width: 0;
	}
	.woocommerce table.cart tbody tr.cart_item td.product-remove {
		justify-self: end;
		width: auto;
	}
}

/* ==========================================================================
   35. Die Ansicht je Bereich — 31.08.2026

   Vorher hing sie an EINEM Merkmal am <html> und galt damit fuer den ganzen
   Shop: Wer auf der Merkliste "Raster" waehlte, bekam auch im Katalog und
   auf der Startseite Raster. Ausdruecklich nicht gewuenscht.

   Jetzt merkt sich JEDER Bereich seine Wahl unter einem eigenen Schluessel:
       mt-ansicht-katalog / mt-ansicht-merkliste / mt-ansicht-startseite
       mt-spalten-katalog / mt-spalten-merkliste / mt-spalten-startseite

   ANGEWENDET wird trotzdem ein EINZIGES kurzes Merkmal am <html>:
       data-mt-ansicht und data-mt-spalten

   Denn jede Seite gehoert zu genau einem Bereich. PHP schreibt ihn ins
   Kopfskript (mta_ansichtsbereich), das Skript holt den passenden Wert und
   setzt das kurze Merkmal — die Trennung passiert beim LESEN.

   Der erste Anlauf hatte die Bereiche in die Selektoren geschrieben. Daraus
   wurden Ketten wie html[data-mt-ansicht-katalog="liste"] body:not(.home)
   ul.products li.product, und beim Umschreiben ist genau daran ein Fehler
   entstanden: Der erste Zweig endete bei ul.products und bekam die Regeln
   der KARTEN — die Liste stand zweispaltig, unter 599 Pixeln war der
   Katalog 118 Pixel breit. Kurze Selektoren sind das, was man noch richtig
   aendern kann.
   ========================================================================== */

/* --- "Warenkorb ansehen" auf sehr schmalen Geraeten -----------------------
   Bei 378 Pixeln bleiben je Knopf rund 153; der Text braucht bei 14 px
   etwa 152. Das ist keine Reserve, und im Bild war er abgeschnitten.
   Unter 400 Pixeln heisst der Knopf deshalb nur noch "Warenkorb" — das Ziel
   ist dasselbe, das Wort passt, und gestapelt wird nichts. */
/* Hier stand bis 01.09.2026 ein Trick: font-size:0 auf dem Knopf und das
   Wort "Warenkorb" im ::after. Er hinterliess bei gezoomter Darstellung
   einen LEEREN Knopf. Seit die beiden Knoepfe sich die Breite mit 1fr 1fr
   teilen, passt der volle Text ohnehin — siehe Rechnung oben. */
@media (max-width: 400px) {
	.mt-korbklappe-knoepfe .button { font-size: 13.5px; padding-inline: 6px; }
}

/* ==========================================================================
   36. Klappen am Telefon sichtbar machen — 31.08.2026

   "bei den kategorien checkt man garnicht dass man das ausklappen kann" —
   der Kopf sah aus wie eine Ueberschrift, nicht wie ein Schalter.
   ========================================================================== */

.mt-spalte details.mt-kategorien > summary.mt-kasten-leiste {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mt-r3);
	min-height: 52px; box-sizing: border-box;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.mt-spalte details.mt-kategorien > summary::-webkit-details-marker { display: none; }
.mt-spalte details.mt-kategorien > summary::marker { content: ''; }

/* DER PFEIL IST DAS SIGNAL.
   Ein Wort allein sagt nicht, dass sich etwas oeffnet. Der Pfeil zeigt nach
   unten, dreht sich beim Oeffnen — und daneben steht, wie viele Kategorien
   dahinterstecken. Beides zusammen macht aus einer Ueberschrift einen
   Schalter, den man auch als solchen erkennt. */
.mt-spalte details.mt-kategorien > summary::after {
	content: "";
	width: 20px; height: 20px; flex: 0 0 auto;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b587d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform .18s ease;
}
.mt-spalte details.mt-kategorien[open] > summary::after { transform: rotate(180deg); }
.mt-spalte details.mt-kategorien > summary:hover,
.mt-spalte details.mt-kategorien > summary:focus-visible {
	background: var(--mt-blau-hauch);
}

@media (prefers-reduced-motion: reduce) {
	.mt-spalte details.mt-kategorien > summary::after { transition: none; }
}



/* ==========================================================================
   37. Die Gesamtsumme, damit man sie lesen kann — 01.09.2026
   ========================================================================== */

/* Gemeldet: "die summe soll viel groesser dargestellt werden, das kann kein
   rentner lesen". Vorher 17 Pixel — dasselbe wie Zwischensumme und
   Steuerzeile darueber. Die Zahl, wegen der man hinsieht, sah aus wie eine
   Zeile Kleingedrucktes.

   Jetzt 27 Pixel und in Ziffern mit gleicher Breite (tabular-nums), damit
   Betraege untereinander an derselben Stelle das Komma haben. */
.woocommerce-checkout #order_review table.shop_table .order-total th,
.woocommerce-checkout .cart_totals table .order-total th,
.woocommerce .cart_totals table .order-total th {
	font-size: var(--mt-s-gross);
	font-weight: 700;
	color: var(--mt-text);
}
.woocommerce-checkout #order_review table.shop_table .order-total td,
.woocommerce-checkout .cart_totals table .order-total td,
.woocommerce .cart_totals table .order-total td {
	font-size: var(--mt-s-h1);
	font-weight: 700;
	color: var(--mt-text);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}
.woocommerce-checkout #order_review table.shop_table .order-total td .woocommerce-Price-amount,
.woocommerce .cart_totals table .order-total td .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
}
/* Die Steuerzeile darunter bleibt klein — sie erklaert die Summe, sie ist
   nicht die Summe. */
.woocommerce-checkout #order_review table.shop_table .order-total small,
.woocommerce .cart_totals table .order-total small {
	display: block;
	font-size: var(--mt-s-klein);
	font-weight: 400;
	color: var(--mt-text-leise);
}

@media (max-width: 600px) {
	.woocommerce-checkout #order_review table.shop_table .order-total td,
	.woocommerce .cart_totals table .order-total td { font-size: var(--mt-s-h2); }
}

/* --- Entfernen in der Warenkorbklappe ------------------------------------ */

/* Die Zeile hat jetzt drei Teile: Bild, Text, Tonne. */
.mt-korbklappe-zeile { position: relative; }
.mt-korbklappe-raus {
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
	width: var(--mt-klick-min); height: var(--mt-klick-min);
	border: 1px solid transparent;
	border-radius: var(--mt-radius);
	color: var(--mt-text-leise);
	text-decoration: none;
}
.mt-korbklappe-raus svg {
	width: 18px; height: 18px;
	fill: none; stroke: currentColor;
	stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.mt-korbklappe-raus:hover,
.mt-korbklappe-raus:focus-visible {
	border-color: var(--mt-rot);
	color: var(--mt-rot);
	background: var(--mt-rot-hauch);
}
.mt-korbklappe-raus[aria-busy="true"] { opacity: .5; pointer-events: none; }

/* ==========================================================================
   38. Meldungen oben rechts — 01.09.2026
   ========================================================================== */

/* Der Ort wird in theme.js gerechnet (siehe mtMeldungenPlatzieren): Die
   Meldung stellt sich unter den Kopf und unter die offene Warenkorbklappe.
   Hier steht nur, was sich nicht bewegt.

   z-index 55: unter dem Kopf (60) und unter der Klappe (60), aber ueber dem
   Inhalt. Falls beim Scrollen doch einmal etwas uebereinanderkommt, gewinnt
   das Bedienelement — nicht die Meldung. */
.mt-meldungen {
	position: fixed;
	right: var(--mt-r4);
	top: 96px;

	/* Ueber der Warenkorbklappe (60) und dem Kopf (60): Die Meldung soll
	   nicht ausweichen muessen. Sie ist schmal und kurz sichtbar. */
	z-index: 65;
	display: flex;
	flex-direction: column;
	gap: var(--mt-r2);
	width: min(340px, calc(100vw - 32px));

	/* Der Behaelter faengt keine Klicks ab — nur die Meldungen selbst.
	   Sonst waere ein unsichtbarer Streifen ueber der Seite, auf den man
	   klicken kann, ohne dass etwas passiert. */
	pointer-events: none;
}

.mt-meldung {
	display: flex;
	align-items: flex-start;
	gap: var(--mt-r2);
	pointer-events: auto;

	/* Grundfarben; die Art setzt sie um (siehe unten). */
	background: var(--mt-grund);
	color: var(--mt-text);
	border: 1px solid var(--mt-linie-kraeftig);
	padding: var(--mt-r3) var(--mt-r4);
	border-radius: var(--mt-radius);
	box-shadow: var(--mt-schatten-klappe);
	font-size: var(--mt-s-glatt);
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
	animation: mt-meldung-auf .22s cubic-bezier(.22, .9, .3, 1);
}
.mt-meldung-fehler { background: var(--mt-rot); }

.mt-meldung-zeichen {
	flex: 0 0 auto;
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 21px; height: 21px;
	border-radius: var(--mt-radius-pille);
	background: rgb(255 255 255 / .18);
	font-size: 13px; font-weight: 700;
	line-height: 1;
}

/* DAS MINUS ALS STRICH, NICHT ALS ZEICHEN.
   "−" (U+2212) liegt in fast jeder Schrift ueber der optischen Mitte —
   es sitzt auf der Hoehe des Minuszeichens einer Rechnung. align-items
   zentriert den Zeilenkasten, nicht den Strich darin. Ein gezeichneter
   Strich sitzt genau dort, wo man ihn hinsetzt. */
.mt-meldung-weg .mt-meldung-zeichen { font-size: 0; }
.mt-meldung-weg .mt-meldung-zeichen::before {
	content: "";
	display: block;
	width: 9px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}
.mt-meldung-text { min-width: 0; }

@keyframes mt-meldung-auf {
	from { opacity: 0; transform: translateX(20px); }
	to   { opacity: 1; transform: none; }
}
@keyframes mt-meldung-zu {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateX(20px); }
}
.mt-meldung.mt-meldung-zu { animation: mt-meldung-zu .2s ease-in forwards; }

/* Am Telefon ueber die ganze Breite — dort ist rechts kein Platz fuer
   eine Spalte neben dem Inhalt. */
@media (max-width: 600px) {
	/* RECHTS BLEIBEN, NUR SCHMALER.
	   Ueber die ganze Breite gelegt stand die Meldung mitten im Bild und
	   sah aus wie ein Teil der Seite. An derselben Ecke wie am Bildschirm
	   ist sie dort, wo man sie erwartet — und laesst links den Inhalt
	   stehen. */
	.mt-meldungen {
		right: var(--mt-r3);
		left: auto;
		width: min(280px, calc(100vw - 24px));
	}
	.mt-meldung {
		padding: var(--mt-r2) var(--mt-r3);
		font-size: var(--mt-s-klein);
	}
	.mt-meldung-zeichen { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.mt-meldung, .mt-meldung.mt-meldung-zu { animation: none; }
}

/* ==========================================================================
   39. Produktseite: Rezension und aehnliche Modelle — 01.09.2026
   ========================================================================== */

/* --- Die Zustimmung unter der Rezension ----------------------------------
   German Market liefert hier <p><input type="checkbox"><label>…</label></p>.
   Kaestchen und Beschriftung sind GESCHWISTER, nicht verschachtelt — die
   allgemeine Regel (label:has(> input)) greift deshalb nicht, und beide
   standen auf der Grundlinie statt nebeneinander: das 26-Pixel-Kaestchen
   oben, der Text darunter versetzt. */
.comment-form-privacy-policy,
.comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--mt-r2);
	margin: var(--mt-r4) 0;
}
.comment-form-privacy-policy label,
.comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
	font-size: var(--mt-s-glatt);
	line-height: 1.4;
}

/* --- Luft vor den aehnlichen Modellen -------------------------------------
   Gemessen: 0 Pixel. Der Absenden-Knopf des Rezensionsformulars stiess
   direkt an die Ueberschrift "Ähnliche Produkte" — es sah aus, als gehoere
   die Ueberschrift noch zum Formular. */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
	margin-top: var(--mt-r7);
	padding-top: var(--mt-r5);
	border-top: 1px solid var(--mt-linie);
	clear: both;
}
.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2 {
	margin: 0 0 var(--mt-r4);
	font-size: var(--mt-s-h2);
}

/* --- Die drei Arten von Meldung ------------------------------------------
   Bis 01.09.2026 waren alle schwarz. Eine Farbe, die nichts unterscheidet,
   muss man lesen — und beim schnellen Einlegen und Entfernen liest niemand.

   gruen   etwas ist dazugekommen
   hell    etwas ist weggegangen — kein Fehler, also auch kein Rot
   rot     etwas ist schiefgegangen                                        */

.mt-meldung-gut {
	background: var(--mt-gruen);
	border-color: var(--mt-gruen);
	color: var(--mt-auf-farbe);
}
.mt-meldung-weg {
	background: var(--mt-grund);
	border-color: var(--mt-linie-kraeftig);
	color: var(--mt-text);
}
.mt-meldung-weg .mt-meldung-zeichen {
	background: var(--mt-flaeche-2);
	color: var(--mt-text-leise);
}
.mt-meldung-fehler {
	background: var(--mt-rot);
	border-color: var(--mt-rot);
	color: var(--mt-auf-farbe);
}

/* --- Nur EIN Haken auf dem Knopf ------------------------------------------
   WooCommerce haengt an .added ein eigenes Hakensymbol per ::after (eigene
   Schriftart "WooCommerce", content "\e017"). Zusammen mit unserer
   Bestaetigung stand auf dem Knopf dann "✓ Hinzugefügt ✓" — gesehen am
   01.09.2026 in Chrome auf der Produktseite.

   Unser Haken bleibt, weil er zum Text gehoert und mitanimiert wird. */
.woocommerce a.button.added::after,
.woocommerce button.button.added::after,
.woocommerce input.button.added::after,
.woocommerce div.product form.cart button.added::after {
	content: none;
}

/* --- Entfernen aus der Warenkorbklappe ------------------------------------
   Vorher wurde die Zeile nur blass geschaltet und blieb dann so stehen,
   bis die Bruchstuecke nachgeladen waren — je nach Verbindung eine halbe
   Sekunde lang eine graue Zeile, die aussah wie ein Fehler.

   Jetzt faehrt sie zusammen und ist weg. Was der Server sagt, aendert
   daran nichts mehr: Der Klick war eindeutig. */
@keyframes mt-zeile-weg {
	/* NICHT zur Seite schieben: In einem Kasten mit overflow-y:auto
	   erzeugt translateX Ueberbreite und damit einen waagrechten
	   Rollbalken. Schrumpfen wirkt genauso deutlich und braucht keinen
	   Platz. */
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: scale(.94); }
}
.mt-korbklappe-zeile.mt-geht-weg {
	animation: mt-zeile-weg .2s ease-in forwards;
	pointer-events: none;
}
.mt-korbklappe-zeile.mt-faellt-zu {
	overflow: hidden;
	transition: height .22s ease, padding .22s ease, opacity .18s ease;
	height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.mt-korbklappe-zeile.mt-geht-weg { animation: none; opacity: 0; }
	.mt-korbklappe-zeile.mt-faellt-zu { transition: none; }
}

/* ==========================================================================
   40. Mengensteller — 01.09.2026
   ==========================================================================
   Die Pfeilchen des Browsers an einem Zahlenfeld sind rund zehn Pixel hoch
   und liegen uebereinander. Auf der Kassa gab es dafuer laengst richtige
   Knoepfe; ueberall sonst stand das nackte Feld. Jetzt ueberall dasselbe:
   minus, Zahl, plus — jedes Ziel so gross wie ein Knopf.                   */

.mt-menge {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--mt-linie-kraeftig);
	border-radius: var(--mt-radius);
	background: var(--mt-grund);
	overflow: hidden;
}

.mt-menge .mt-menge-knopf {
	flex: 0 0 auto;
	width: 42px;
	min-height: var(--mt-hoehe);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: var(--mt-flaeche);
	color: var(--mt-blau-schrift);
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}
.mt-menge .mt-menge-knopf:hover {
	background: var(--mt-blau-hauch);
	color: var(--mt-blau-tief);
}
.mt-menge .mt-menge-knopf:active { background: var(--mt-flaeche-2); }

/* Das Feld dazwischen: kein eigener Rahmen, keine Pfeile.
   -moz-appearance und ::-webkit-outer-spin-button, weil die Browser die
   Pfeilchen unterschiedlich benennen — eine Schreibweise allein laesst sie
   in der Haelfte der Faelle stehen. */
.mt-menge input[type="number"] {
	width: 56px;
	min-width: 0;
	border: none;
	border-left: 1px solid var(--mt-linie);
	border-right: 1px solid var(--mt-linie);
	border-radius: 0;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
}
.mt-menge input[type="number"]::-webkit-outer-spin-button,
.mt-menge input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}
.mt-menge input[type="number"]:focus {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--mt-blau);
}

/* In der Merkliste und im Warenkorb ist weniger Platz. */
.mc-merk-korb .mt-menge .mt-menge-knopf { width: 36px; }
.mc-merk-korb .mt-menge input[type="number"] { width: 42px; }

@media (max-width: 600px) {
	.woocommerce table.cart .mt-menge .mt-menge-knopf { width: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.mt-menge .mt-menge-knopf { transition: none; }
}

/* --- Der Steller darf den Kaufknopf nicht verdraengen ---------------------
   Nachgemessen auf der Produktseite: Die rechte Spalte ist 320 Pixel breit.
   Der Steller in Grundgroesse misst 42 + 56 + 42 = 140 plus Rahmen, der
   Kaufknopf braucht rund 180 — zusammen 330. Zehn Pixel zu viel, und der
   Knopf rutschte unter die Menge.

   Auf der Produktseite ist der Steller deshalb eine Spur schmaler. Die
   Knopfflaeche bleibt mit 38 x 54 Pixeln deutlich ueber der Untergrenze. */
.woocommerce div.product form.cart .mt-menge .mt-menge-knopf { width: 36px; }
.woocommerce div.product form.cart .mt-menge input[type="number"] { width: 42px; }
.woocommerce div.product form.cart div.mt-menge {
	flex: 0 0 auto;
	float: none;
	/* Der Rand rechts stammt aus WooCommerce und kommt zur Luecke des
	   Flex-Kastens dazu. Nachgerechnet: 122 + 4 + 12 + 180 = 318 in einer
	   313 Pixel breiten Zeile — funf Pixel zu viel, und der Kaufknopf fiel
	   unter die Menge. */
	margin-right: 0;
}

/* Menge und Kaufknopf bleiben in EINER Zeile.
   Nachgerechnet passt es: 116 + 12 Luecke + 180 = 308 in einer 313 Pixel
   breiten Zeile. Der Kasten brach trotzdem um — irgendein Beteiligter
   rundet anders, als die Rechnung sagt. Statt weiter um funf Pixel zu
   feilschen wird der Umbruch hier abgeschaltet; wird es doch einmal eng,
   schrumpft der Knopf (flex: 0 1 auto), statt unter die Menge zu fallen. */
.woocommerce div.product form.cart {
	flex-wrap: nowrap;
	align-items: center;
}
.woocommerce div.product form.cart .single_add_to_cart_button {
	min-width: 0;
}

/* Der Kaufknopf neben dem Mengensteller bleibt EINZEILIG.
   Nachgerechnet: Von 313 Pixeln nimmt der Steller 116 und die Luecke 12 —
   fuer den Knopf bleiben 185. "In den Warenkorb" braucht bei 19px rund 175
   plus 32 Innenabstand, also 207. Es fehlen 22 Pixel, und der Text fiel auf
   zwei Zeilen.

   Eine Schriftstufe zurueck (16px) und knapperes Polster ergeben 172 — das
   passt mit Reserve. Der Knopf bleibt mit 54 Pixeln Hoehe der groesste auf
   der Seite; seine Bedeutung traegt die Hoehe, nicht die Schriftgroesse. */
.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	white-space: nowrap;
	font-size: var(--mt-s-bedien);
	padding-inline: var(--mt-r3);
}

/* ==========================================================================
   41. "Warenkorb ansehen": die Schrift ist dunkel — 01.09.2026
   ==========================================================================
   Viermal gemeldet, jedes Mal eine andere Ursache (font-size:0 beim Zoom,
   Breite 0 waehrend des Bruchstueck-Austauschs, das automatische
   Aufklappen). Zuletzt gemessen: dunkel — beim Kunden trotzdem weiss.

   Deshalb steht die Farbe jetzt fest und ohne Umweg ueber eine Variable.
   Der Knopf ist hell, also ist die Schrift dunkel — in jedem Zustand.
   Das !important richtet sich ausdruecklich auch gegen die eigene
   Variablen-Ebene: Bei einem Knopf, den der Kunde viermal gemeldet hat,
   geht Verlaesslichkeit vor Bauweise.                                      */

.mt-korbklappe .mt-korbklappe-knoepfe .button:first-child,
.mt-korbklappe .mt-korbklappe-knoepfe .button:first-child:link,
.mt-korbklappe .mt-korbklappe-knoepfe .button:first-child:visited,
.mt-korbklappe .mt-korbklappe-knoepfe .button:first-child:active {
	color: var(--mt-text) !important;
	background-color: var(--mt-grund) !important;
	border-color: var(--mt-linie-kraeftig) !important;
	-webkit-text-fill-color: var(--mt-text);
}

/* Beim Ueberfahren bleibt es wie gehabt — das passt laut Rueckmeldung. */
.mt-korbklappe .mt-korbklappe-knoepfe .button:first-child:hover,
.mt-korbklappe .mt-korbklappe-knoepfe .button:first-child:focus-visible {
	color: var(--mt-blau-schrift) !important;
	background-color: var(--mt-blau-hauch) !important;
	border-color: var(--mt-blau) !important;
	-webkit-text-fill-color: var(--mt-blau-schrift);
}

/* ==========================================================================
   42. Kassa: Steller kleiner, Bild groesser, Entfernen moeglich — 01.09.2026
   ========================================================================== */

/* --- Der Mengensteller wie ueberall sonst --------------------------------
   Auf der Kassa lag ein aelterer eigener Steller: 46 x 44 Pixel, 23px
   Schrift, kraeftiger Rahmen. Neben dem neuen wirkte er klobig. Hier
   bekommt er dieselben Masse — und eine Nummer kleiner als anderswo, weil
   die Spalte schmal ist und der gewonnene Platz besser ins Bild geht. */
.woocommerce-checkout #order_review .mc-kassa-menge {
	border-color: var(--mt-linie-kraeftig);
	border-radius: var(--mt-radius);
}
.woocommerce-checkout #order_review .mc-kassa-menge button.mc-kassa-menge-knopf {
	width: 34px; min-width: 34px; height: 38px;
	font-size: 17px;
	color: var(--mt-blau-schrift);
	background: var(--mt-flaeche);
}
.woocommerce-checkout #order_review .mc-kassa-menge button.mc-kassa-menge-knopf:hover {
	background: var(--mt-blau-hauch);
	color: var(--mt-blau-tief);
}
.woocommerce-checkout #order_review .mc-kassa-menge .mc-kassa-menge-feld,
.woocommerce-checkout #order_review .mc-kassa-menge input[type="number"] {
	width: 38px; min-width: 38px;

	/* MIN-HEIGHT MUSS MIT.
	   Gemessen: Knopf 38, Feld 48, Kasten 50. Die allgemeine Feldregel
	   setzt min-height auf das Regelmass — und ein Element wird nicht
	   kleiner als seine min-height, egal was height sagt. Ohne diese
	   Zeile ragt das Feld oben und unten ueber die Knoepfe hinaus. */
	height: 38px;
	min-height: 38px;

	font-size: var(--mt-s-glatt);
	font-weight: 600;
	padding-inline: 0;
}

/* --- Das Bild ist die Angabe, an der man ein Modell wiedererkennt --------
   Von 64 auf 84 Pixel. Bei 1:43-Modellen unterscheiden sich zwei Varianten
   oft nur in der Lackierung; auf 64 Pixeln sieht man das nicht. */
/* table.shop_table gehoert in den Selektor: Die bestehende Regel weiter
   oben hat es (1,3,2), meine hatte es nicht (1,2,1) und verlor. Der
   Innenabstand blieb bei 78 Pixeln, waehrend das Bild auf 84 wuchs — der
   Name lief sechs Pixel unter dem Bild durch. Derselbe Fehler wie bei der
   Gesamtsumme zwei Stunden zuvor. */
.woocommerce-checkout #order_review table.shop_table td.product-name {
	padding-left: 104px;
}
.woocommerce-checkout #order_review table.shop_table td.product-name img.mt-kassa-bild {
	width: 84px;
	padding: 4px;

	/* Feste Hoehe mit contain statt eines erzwungenen Seitenverhaeltnisses:
	   Die Modellfotos sind meist 3:2, manche aber quadratisch oder hoch.
	   So passt jedes hinein, ohne dass etwas abgeschnitten wird — und alle
	   Zeilen bleiben trotzdem gleich hoch. */
	height: 60px;
	aspect-ratio: auto;
	object-fit: contain;
}
.woocommerce-checkout #order_review table.shop_table td.product-name .mt-kassa-name {
	padding-right: 46px;
}

/* --- Entfernen direkt in der Bestelluebersicht ---------------------------
   Wer an der Kassa merkt, dass ein Modell doch nicht mit soll, musste
   bisher zurueck in den Warenkorb. Der Knopf sitzt rechts oben in der
   Zeile, weit weg von "Zahlungspflichtig bestellen". */
.woocommerce-checkout #order_review .mt-kassa-raus {
	position: absolute;
	right: 0; top: var(--mt-r3);
	display: inline-flex; align-items: center; justify-content: center;
	width: var(--mt-klick-min); height: var(--mt-klick-min);
	border: 1px solid transparent;
	border-radius: var(--mt-radius);
	background: none;
	color: var(--mt-text-leise);
	cursor: pointer;
	padding: 0;
}
/* Die Muelltonne als Hintergrundbild — siehe Begruendung in inc/kassa.php:
   wp_kses_post() entfernt SVG-Elemente aus dem Produktnamen.

   currentColor geht in einem Hintergrundbild nicht, deshalb steht die Farbe
   zweimal im Bild: einmal grau fuer den Ruhezustand, einmal rot fuer das
   Ueberfahren. Das ist die Ausnahme von "Farben nur aus Variablen" — ein
   Hintergrundbild kann keine Variable auswerten. */
.woocommerce-checkout #order_review .mt-kassa-raus .mt-kassa-raus-zeichen {
	display: block;
	width: 19px; height: 19px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 4.5h4M6.5 7l.9 12.2a1 1 0 0 0 1 .8h7.2a1 1 0 0 0 1-.8L17.5 7'/%3E%3Cpath d='M10 10.5v6M14 10.5v6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.woocommerce-checkout #order_review .mt-kassa-raus:hover .mt-kassa-raus-zeichen,
.woocommerce-checkout #order_review .mt-kassa-raus:focus-visible .mt-kassa-raus-zeichen {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8352f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 4.5h4M6.5 7l.9 12.2a1 1 0 0 0 1 .8h7.2a1 1 0 0 0 1-.8L17.5 7'/%3E%3Cpath d='M10 10.5v6M14 10.5v6'/%3E%3C/svg%3E");
}
.woocommerce-checkout #order_review .mt-kassa-raus:hover,
.woocommerce-checkout #order_review .mt-kassa-raus:focus-visible {
	border-color: var(--mt-rot);
	color: var(--mt-rot);
	background: var(--mt-rot-hauch);
}
.woocommerce-checkout #order_review .mt-kassa-raus[aria-busy="true"] { opacity: .5; pointer-events: none; }

/* Der Name braucht rechts Platz fuer die Tonne. */


@media (max-width: 600px) {
	.woocommerce-checkout #order_review table.shop_table td.product-name { padding-left: 92px; }
	.woocommerce-checkout #order_review table.shop_table td.product-name img.mt-kassa-bild { width: 72px; }
}

/* --- Die Katalogzahl im Kopf der Filterklappe -----------------------------
   Leiser als der Titel: eine Angabe, keine Aufforderung. Sie steht bewusst
   AUSSEN, damit man sie auch bei zugeklapptem Kasten sieht — dann
   beantwortet sie die Frage, ob sich das Aufklappen lohnt.               */
.mt-filterklappe > summary .mt-filterklappe-zahl {
	font-size: var(--mt-s-klein);
	font-weight: 400;
	color: var(--mt-text-leise);
	margin-left: -6px;
}

/* Am Telefon ist die Zeile knapp — dort tritt die Zahl zurueck. */
@media (max-width: 600px) {
	.mt-filterklappe > summary .mt-filterklappe-zahl { display: none; }
}

/* --- Der Platzhalter am Telefon ------------------------------------------
   Auch die kurze Fassung braucht rund 240 Pixel; im Kopf des Telefons hat
   das Feld etwa 250 und der Text stand bis an den Suchknopf. Dort steht
   deshalb nur noch, was das Feld ist.

   ::placeholder laesst sich nicht ueberschreiben — der Text kommt aus dem
   Markup. Ein zusaetzliches Merkmal am Feld waere sauberer, aber
   FiboSearch baut das Feld selbst; text-overflow ist hier der Eingriff mit
   den wenigsten Nebenwirkungen. */
@media (max-width: 600px) {
	.mt-kopfsuche .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
		font-size: var(--mt-s-klein);
	}
}

/* ==========================================================================
   43. Lightbox und Kassa am Telefon — 01.09.2026
   ========================================================================== */

/* --- Die Blaetterpfeile verdecken das Bild nicht mehr ---------------------
   Vorher: 56 Pixel grosse, fast deckende weisse Kreise, mittig ueber dem
   Bild. Bei einem Modellauto im Querformat liegen sie genau auf Front und
   Heck — also auf dem, was man sehen will.

   Jetzt kleiner (44), weiter aussen und im Ruhezustand nur angedeutet. Wer
   die Maus bewegt oder tippt, bekommt sie voll. Ganz weglassen geht nicht:
   Auf einem Tastbildschirm gibt es kein Ueberfahren, und ohne sichtbares
   Ziel weiss niemand, dass es weitere Bilder gibt.                        */
.pswp button.pswp__button--arrow--left,
.pswp button.pswp__button--arrow--right {
	width: 60px !important; height: 60px !important;
	margin-top: -30px;
}
.pswp button.pswp__button--arrow--left { left: 4px; }
.pswp button.pswp__button--arrow--right { right: 4px; }

.pswp button.pswp__button--arrow--left::before,
.pswp button.pswp__button--arrow--right::before {
	width: 44px; height: 44px;
	top: 8px; left: 8px;
	font-size: 26px;
	background-color: rgba(255, 255, 255, 0.55) !important;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
	transition: background-color .15s ease, box-shadow .15s ease;
}
.pswp button.pswp__button--arrow--left:hover::before,
.pswp button.pswp__button--arrow--right:hover::before,
.pswp button.pswp__button--arrow--left:focus-visible::before,
.pswp button.pswp__button--arrow--right:focus-visible::before {
	background-color: rgba(255, 255, 255, 0.97) !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* --- Der Schliessen-Knopf bleibt sichtbar ---------------------------------
   PhotoSwipe blendet seine Bedienleiste nach ein paar Sekunden ohne
   Bewegung aus (Klasse pswp__ui--idle). Am Telefon gibt es keine
   Mausbewegung, die sie zurueckholt — gemeldet als "es wird nirgendwo ein
   x button angezeigt". Der Schliessen-Knopf ist der einzige Weg heraus und
   bleibt deshalb stehen.                                                  */
.pswp__ui--idle .pswp__top-bar { opacity: 1 !important; }
.pswp__ui--idle .pswp__button--close { opacity: 1 !important; }
.pswp__ui--hidden .pswp__button--close { opacity: 1 !important; display: block !important; }

@media (max-width: 600px) {
	.pswp button.pswp__button--arrow--left,
	.pswp button.pswp__button--arrow--right {
		width: 48px !important; height: 48px !important;
		margin-top: -24px;
	}
	.pswp button.pswp__button--arrow--left::before,
	.pswp button.pswp__button--arrow--right::before {
		width: 36px; height: 36px;
		top: 6px; left: 6px;
		font-size: 22px;
	}
}

/* --- Die Bestelluebersicht am Telefon -------------------------------------
   Gemeldet mit Bild: Der Produktname stand in einer rund 60 Pixel schmalen
   Saeule, ein Wort je Zeile. Zwei Ursachen zusammen — das Bild nimmt links
   92 Pixel, und die Preisspalte hatte keine Begrenzung und wuchs mit dem
   laengsten Betrag samt Steuerzeile.

   Jetzt: Bild schmaler, Preisspalte auf 84 Pixel festgelegt. Damit bleiben
   dem Namen rund 150 statt 60.                                            */
@media (max-width: 600px) {
	.woocommerce-checkout #order_review table.shop_table td.product-name {
		padding-left: 74px;
	}
	.woocommerce-checkout #order_review table.shop_table td.product-name img.mt-kassa-bild {
		width: 62px;
		height: 46px;
	}
	.woocommerce-checkout #order_review table.shop_table td.product-total,
	.woocommerce-checkout #order_review table.shop_table th.product-total {
		width: 84px;
		min-width: 84px;
		padding-left: 4px;
	}
	/* Die Steuerzeile darf umbrechen, der Betrag nicht. */
	.woocommerce-checkout #order_review table.shop_table td.product-total .woocommerce-Price-amount {
		white-space: nowrap;
	}
	.woocommerce-checkout #order_review table.shop_table td.product-total small {
		font-size: 11.5px;
		line-height: 1.3;
	}
	/* Die Tonne rueckt an den Rand, damit der Name die Breite bekommt. */
	.woocommerce-checkout #order_review table.shop_table td.product-name .mt-kassa-name {
		padding-right: 34px;
	}
	.woocommerce-checkout #order_review .mt-kassa-raus {
		width: 34px; height: 34px;
	}
}

/* ==========================================================================
   44. Lightbox-Pfeile auf Abruf, Kassa-Zeile am Telefon — 01.09.2026
   ========================================================================== */

/* --- Die Pfeile erscheinen erst, wenn man sie braucht ---------------------
   Auch halbdurchsichtig lagen sie noch auf dem Bild. Jetzt sind sie im
   Ruhezustand ganz weg und kommen beim Ueberfahren.

   Am Tastbildschirm gibt es kein Ueberfahren — dort steuert PhotoSwipe die
   Bedienleiste selbst: Ein Tipp blendet sie ein und wieder aus
   (pswp__ui--hidden). Genau daran haengen die Pfeile hier, damit sie sich
   auch am Telefon "auf Antippen" verhalten.

   Der Bereich, in dem man ueberfaehrt, bleibt gross (60 Pixel) — nur die
   sichtbare Flaeche verschwindet. Wer die Maus dorthin bewegt, trifft. */
.pswp button.pswp__button--arrow--left::before,
.pswp button.pswp__button--arrow--right::before {
	opacity: 0;
	transform: scale(.85);
	transition: opacity .16s ease, transform .16s ease, background-color .15s ease;
}
.pswp:hover button.pswp__button--arrow--left::before,
.pswp:hover button.pswp__button--arrow--right::before,
.pswp button.pswp__button--arrow--left:focus-visible::before,
.pswp button.pswp__button--arrow--right:focus-visible::before {
	opacity: 1;
	transform: none;
}

/* Tastbildschirm: PhotoSwipe blendet die Bedienleiste beim Tippen ein und
   aus. Solange sie sichtbar ist, sind die Pfeile es auch. */
@media (hover: none) {
	.pswp:not(.pswp--ui-hidden) button.pswp__button--arrow--left::before,
	.pswp:not(.pswp--ui-hidden) button.pswp__button--arrow--right::before {
		opacity: 1;
		transform: none;
	}
	.pswp__ui--hidden button.pswp__button--arrow--left::before,
	.pswp__ui--hidden button.pswp__button--arrow--right::before {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pswp button.pswp__button--arrow--left::before,
	.pswp button.pswp__button--arrow--right::before { transition: none; transform: none; }
}

/* --- Die Bestellzeile am Telefon: Bild oben, Angaben darunter -------------
   Nebeneinander bleibt am Telefon fuer den Namen zu wenig uebrig — auch mit
   dem schmaleren Bild standen dort drei bis vier Woerter je Zeile.

   Untereinander bekommt jede Angabe die volle Breite:

       [ Bild, volle Breite      ]
       [ Titel            ][Tonne]
       [ Lieferzeit, volle Breite]
       [           ][Menge rechts]

   Die Reihen stehen ausdruecklich da (grid-row), weil die Reihenfolge im
   Markup eine andere ist: Bild, Name, Tonne, MENGE, Lieferzeit. Ohne
   Angabe stuende die Menge vor der Lieferzeit.                            */
@media (max-width: 600px) {
	.woocommerce-checkout #order_review table.shop_table td.product-name {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--mt-r2) var(--mt-r3);
		align-items: center;
		padding-left: var(--mt-r3);
		padding-right: var(--mt-r3);
	}

	/* Das Bild steht oben und nimmt die ganze Breite. Es ist nicht mehr
	   absolut positioniert — dafuer gibt es jetzt eine eigene Reihe. */
	.woocommerce-checkout #order_review table.shop_table td.product-name img.mt-kassa-bild {
		position: static;
		grid-column: 1 / -1;
		grid-row: 1;
		width: 100%;
		height: auto;
		max-height: 150px;
		object-fit: contain;
		margin: 0 0 var(--mt-r2);
	}

	.woocommerce-checkout #order_review table.shop_table td.product-name .mt-kassa-name {
		grid-column: 1;
		grid-row: 2;
		padding-right: 0;
		font-weight: 600;
	}

	.woocommerce-checkout #order_review .mt-kassa-raus {
		position: static;
		grid-column: 2;
		grid-row: 2;
		align-self: start;
	}

	/* Die Lieferzeit ueber die ganze Breite — sie ist ein ganzer Satz. */
	.woocommerce-checkout #order_review table.shop_table td.product-name dl.variation {
		grid-column: 1 / -1;
		grid-row: 3;
		margin: 0;
	}

	.woocommerce-checkout #order_review table.shop_table td.product-name .mc-kassa-menge {
		grid-column: 2;
		grid-row: 4;
		justify-self: end;
		margin-top: 0;
	}

	/* Die Preisspalte darf wieder etwas mehr Platz nehmen, weil der Name
	   jetzt die ganze Zeilenbreite hat. */
	.woocommerce-checkout #order_review table.shop_table td.product-total,
	.woocommerce-checkout #order_review table.shop_table th.product-total {
		width: 96px;
		min-width: 96px;
	}
}

/* --- Die Zeile muss aus dem Tabellenlayout heraus -------------------------
   Gemessen nach dem Umbau: Bild 106 Pixel statt voller Breite, Name 0.

   Der Grund ist die Reihenfolge der Berechnung. Eine Tabelle verteilt ihre
   Spalten zuerst — nach dem Inhalt, den sie kennt — und erst danach
   bekommt das Raster in der Zelle seine Breite zugeteilt. Ein
   minmax(0, 1fr) darin kann dann auf null schrumpfen, weil die Tabelle der
   Zelle nie mehr gegeben hat.

   Deshalb wird die ZEILE selbst zum Raster: eine Spalte fuer die Angaben,
   eine fuer den Betrag. Damit rechnet niemand mehr zweimal.             */
@media (max-width: 600px) {
	.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 96px;
		align-items: start;
		gap: 0 var(--mt-r2);
		padding: var(--mt-r3) 0;
		border-bottom: 1px solid var(--mt-linie);
	}
	.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item td {
		border: none;
		padding-top: 0;
		padding-bottom: 0;
	}
	.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item td.product-name {
		grid-column: 1;
		padding-left: 0;
		padding-right: 0;
	}
	.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item td.product-total {
		grid-column: 2;
		width: auto;
		min-width: 0;
		text-align: right;
		padding-right: 0;
	}
	/* Das Bild nimmt jetzt wirklich die Breite der Angabenspalte. */
	.woocommerce-checkout #order_review table.shop_table td.product-name img.mt-kassa-bild {
		max-height: 130px;
	}
}

/* Die Zelle darf ihre Tabellenbreite vergessen.
   Gemessen: Das Raster der Zeile stand korrekt auf "189px 96px", die Zelle
   blieb aber 125 Pixel breit. Ursache ist table-layout: fixed — die
   Spaltenbreite steht dann fest, bevor die Zelle Rasterfeld wird, und eine
   gesetzte width gilt auch im Raster weiter.

   Am Telefon ist die Tabelle ohnehin keine Tabelle mehr, sondern eine
   Liste von Karten. Also darf die feste Aufteilung dort weg.            */
@media (max-width: 600px) {
	.woocommerce-checkout #order_review table.shop_table {
		table-layout: auto;
		width: 100%;
	}
	.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item td.product-name,
	.woocommerce-checkout #order_review table.shop_table tbody tr.cart_item td.product-total {
		width: auto;
		max-width: none;
		min-width: 0;
	}
}

/* Der Mengensteller darf die Spaltenbreite nicht bestimmen.
   Gemessen: Name 70 Pixel in einer 190 Pixel breiten Zelle, umgebrochen auf
   FUENFZEHN Zeilen. Die zweite Rasterspalte stand auf "auto" und richtete
   sich damit nach ihrem breitesten Inhalt — und das war nicht die 34 Pixel
   schmale Tonne, sondern der 108 Pixel breite Steller.

   Der Steller laeuft jetzt ueber beide Spalten und wird rechts ausgerichtet:
   Er steht damit weiterhin ganz rechts, geht aber nicht mehr in die
   Spaltenrechnung ein. Die zweite Spalte ist nur noch so breit wie die
   Tonne.                                                                  */
@media (max-width: 600px) {
	.woocommerce-checkout #order_review table.shop_table td.product-name {
		grid-template-columns: minmax(0, 1fr) 34px;
	}
	.woocommerce-checkout #order_review table.shop_table td.product-name .mc-kassa-menge {
		grid-column: 1 / -1;
		justify-self: end;
	}
}

/* ==========================================================================
   45. Nachbesserungen an Kassa und Lightbox — 01.09.2026
   ========================================================================== */

/* --- Das Bild darf kleiner sein ------------------------------------------
   Ueber die volle Spaltenbreite war es groesser als noetig: Man erkennt das
   Modell auch bei 140 Pixeln, und die Zeile wird dadurch deutlich kuerzer —
   bei sieben Positionen macht das mehrere Bildschirmhoehen aus.          */
@media (max-width: 600px) {
	.woocommerce-checkout #order_review table.shop_table td.product-name img.mt-kassa-bild {
		width: 140px;
		max-width: 100%;
		max-height: 96px;
	}

	/* Der Steller steht links.
	   Rechtsbuendig war er zwar korrekt am Rand SEINER Spalte, aber die
	   endet dort, wo die Preisspalte beginnt — mitten im Bild sah das aus
	   wie versehentlich eingerueckt. Linksbuendig steht er in einer Flucht
	   mit Bild, Titel und Lieferzeit. */
	.woocommerce-checkout #order_review table.shop_table td.product-name .mc-kassa-menge {
		justify-self: start;
	}
}

/* --- Die Pfeile erscheinen wirklich nur auf Abruf -------------------------
   Der erste Versuch hing an .pswp:hover — und .pswp ist das Vollbild. Die
   Maus liegt praktisch immer darauf, also waren die Pfeile praktisch immer
   da. Genau so gemeldet: "die sind immer noch die ganze zeit da".

   Jetzt haengt es am Pfeil selbst. Seine Trefferflaeche ist 60 Pixel breit
   und reicht bis an den Bildrand — wer mit der Maus dorthin geht, wo der
   Pfeil waere, bekommt ihn. In der Mitte, wo man das Modell ansieht, ist
   nichts.                                                                 */
.pswp:hover button.pswp__button--arrow--left::before,
.pswp:hover button.pswp__button--arrow--right::before {
	opacity: 0;
	transform: scale(.85);
}
.pswp button.pswp__button--arrow--left:hover::before,
.pswp button.pswp__button--arrow--right:hover::before,
.pswp button.pswp__button--arrow--left:focus-visible::before,
.pswp button.pswp__button--arrow--right:focus-visible::before {
	opacity: 1;
	transform: none;
}

/* Am Tastbildschirm gibt es kein Ueberfahren: Dort folgen die Pfeile
   PhotoSwipes Bedienleiste, die ein Tipp ein- und ausblendet. */
@media (hover: none) {
	.pswp button.pswp__button--arrow--left::before,
	.pswp button.pswp__button--arrow--right::before { opacity: 1; transform: none; }
	.pswp__ui--hidden button.pswp__button--arrow--left::before,
	.pswp__ui--hidden button.pswp__button--arrow--right::before { opacity: 0; }
}

/* Das Bild bekommt seinen Platz, bevor es da ist.
   Gemessen: 140 x 10 Pixel, weil es noch nicht geladen war (lazy loading —
   die Bestelluebersicht steht weit unten). Ohne reservierte Hoehe springt
   die ganze Liste, sobald die Bilder nachkommen: Wer gerade die Menge
   aendern will, trifft danebe.

   Feste Hoehe mit object-fit: contain — der Platz steht sofort, das Bild
   passt sich hinein. */
@media (max-width: 600px) {
	.woocommerce-checkout #order_review table.shop_table td.product-name img.mt-kassa-bild {
		height: 96px;
		max-height: none;
	}
}

/* 46. Menge/Kaufknopf/Tonne im Merklisten-Raster: seit 15.09.2026 oben in
   Abschnitt "Menge, Tonne und Kaufknopf" als Raster geloest — fuer alle
   Breiten gleich, deshalb hier keine Telefon-Sonderregel mehr. */

/* --- Das Listenbild am Telefon steht oben, statt sich zu strecken --------
   Gemessen auf der Suchergebnisseite: Rahmen 118 x 189 Pixel, Bild darin
   118 x 61 — also 128 Pixel Weissraum unter jedem Modell. Es sah aus, als
   fehlten die Bilder.

   Ursache ist die Grundeinstellung von Rasterfeldern: Sie strecken sich
   auf die Hoehe ihrer Zeile (align-items: stretch). Bei einem Bild mit
   object-fit: contain wird dabei nicht das Bild groesser, sondern nur sein
   Rahmen. Mit align-self: start behaelt es seine eigene Hoehe.           */
@media (max-width: 600px) {
	[data-mt-ansicht="liste"] :is(.woocommerce, body) ul.products li.product img {
		/* FESTE HOEHE, nicht auto.
		   Der erste Versuch nahm die aspect-ratio weg und setzte height:auto —
		   bei einem noch nicht geladenen Bild (naturalHeight 0) gibt es dann
		   gar keine Hoehenangabe mehr, und das Rasterfeld streckte den Rahmen
		   auf 1.524 Pixel. Gemessen und sofort wieder geaendert.

		   Eine feste Hoehe mit contain reserviert den Platz, verzerrt nichts
		   und laesst die Zeilen gleich hoch. */
		align-self: start;
		height: 80px;
		aspect-ratio: auto;
		object-fit: contain;
	}
}

/* ==========================================================================
   47. Die Versandtarife am Telefon — 02.09.2026
   ========================================================================== */

/* --- Am Bildschirm bleibt es eine Tabelle ---------------------------------
   Dort ist der Vergleich ueber die Zeile hinweg genau das, was man will:
   Welche Zone kostet bei 4 kg wie viel.                                   */
.sc-tarife-tabelle {
	width: 100%;
	max-width: 1080px;          /* 18.09.2026: nicht ueber die ganze Breite (Marcel) */
	border-collapse: collapse;
	table-layout: fixed;        /* Preisspalten gleich breit — sieht symmetrisch aus */
}
.sc-tarife-tabelle thead th:first-child { width: 40%; }
.sc-tarife-tabelle th,
.sc-tarife-tabelle td {
	padding: var(--mt-r2) var(--mt-r3);
	border-bottom: 1px solid var(--mt-linie);
	vertical-align: top;
	text-align: left;
}
.sc-tarife-tabelle thead th {
	background: var(--mt-flaeche);
	border-bottom: 2px solid var(--mt-linie-kraeftig);
	white-space: nowrap;
}
.sc-tarife-tabelle thead th:not(:first-child) { text-align: center; }
/* td.zahl, nicht nur .zahl: ".mt-inhalt td.zahl" (rechtsbuendig) wiegt sonst mehr. */
.sc-tarife-tabelle td.zahl,
.sc-tarife-tabelle th.zahl {
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.sc-tarife-tabelle tbody th[scope="row"] { font-weight: 400; }
.sc-tarife-laender {
	display: block;
	margin-top: 4px;
	font-size: var(--mt-s-glatt);
	color: var(--mt-text);      /* 18.09.2026: grau war zu schwach (Marcel) */
	line-height: 1.5;
}
.sc-tarife-brutto {
	font-size: var(--mt-s-klein);
	color: var(--mt-text-leise);
}
.sc-tarife-leer { color: var(--mt-text-leise); }

/* --- Am Telefon wird jedes Zielgebiet ein Kasten -------------------------- */
@media (max-width: 700px) {

	/* Kein Querschieben mehr — es gibt nichts mehr zu schieben. */
	.sc-tarife .sc-tarife-rahmen { overflow-x: visible; }

	/* Der Tabellenkopf faellt weg; seine Angaben stehen ab jetzt in den
	   Zeilen selbst (siehe data-stufe im Kurzbefehl). */
	.sc-tarife-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

	.sc-tarife-tabelle,
	.sc-tarife-tabelle tbody,
	.sc-tarife-tabelle tr,
	.sc-tarife-tabelle th,
	.sc-tarife-tabelle td { display: block; width: auto; }

	/* Ein Kasten je Zielgebiet. */
	.sc-tarife-tabelle tbody tr {
		margin-bottom: var(--mt-r4);
		border: 1px solid var(--mt-linie);
		border-radius: var(--mt-radius);
		overflow: hidden;
		background: var(--mt-grund);
	}

	/* Der Name des Zielgebiets ist die Ueberschrift des Kastens. */
	.sc-tarife-tabelle tbody th[scope="row"] {
		padding: var(--mt-r3);
		background: var(--mt-flaeche);
		border-bottom: 1px solid var(--mt-linie);
		font-size: var(--mt-s-gross);
	}
	.sc-tarife-tabelle tbody th[scope="row"] strong { font-weight: 600; }

	/* Je Gewichtsstufe eine Zeile: links das Gewicht, rechts der Preis. */
	.sc-tarife-tabelle tbody td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--mt-r3);
		padding: var(--mt-r2) var(--mt-r3);
		text-align: right;
		border-bottom: 1px solid var(--mt-linie);
	}
	.sc-tarife-tabelle tbody tr td:last-child { border-bottom: 0; }

	/* Die Gewichtsstufe kommt aus dem Merkmal an der Zelle. */
	.sc-tarife-tabelle tbody td::before {
		content: attr(data-stufe);
		flex: 0 0 auto;
		text-align: left;
		font-weight: 600;
		color: var(--mt-text);
	}

	/* Der Bruttobetrag stand am Bildschirm in einer zweiten Zeile. Hier
	   passt er hinter den Nettobetrag — sonst zerreisst es die Zeile. */
	.sc-tarife-tabelle tbody td br { display: none; }

	/* DIE BETRAEGE STEHEN IN EINER FLUCHT.
	   Ohne feste Breiten richtet sich jede Zeile nach der Laenge ihrer
	   eigenen Zahl: "€ 19,64" und "€ 108,34" fingen an verschiedenen
	   Stellen an, und untereinander sah das aus wie verrutschte Spalten.
	   Die Breiten sind in em angegeben, damit sie der Schriftgroesse
	   folgen — auch wenn jemand die Schrift groesser stellt. */
	.sc-tarife-netto {
		margin-left: auto;
		min-width: 5.2em;
		text-align: right;
	}
	.sc-tarife-brutto {
		min-width: 7.2em;
		margin-left: 8px;
		text-align: right;
	}
	.sc-tarife-tabelle tbody td .sc-tarife-leer { margin-left: auto; }
}

/* ==========================================================================
   48. Nach der Bestellung — 02.09.2026
   ========================================================================== */

/* --- Der Hinweis am Zustimmungskaestchen ---------------------------------- */
.mt-agb-hinweis {
	display: block;
	margin-top: var(--mt-r2);
	font-size: var(--mt-s-klein);
	font-weight: 600;
	color: var(--mt-rot);
}
.mt-agb-fehlt {
	border-color: var(--mt-rot);
}

/* --- Die Eckdaten als Karte ----------------------------------------------
   WooCommerce liefert eine Liste, die ueber die ganze Breite lief: vier
   Angaben untereinander, jede in einer eigenen Zeile mit viel Weissraum
   daneben. Nebeneinander sind sie auf einen Blick erfassbar.            */
.woocommerce ul.order_details.mt-danke-karte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0;
	margin: var(--mt-r5) 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--mt-linie);
	border-radius: var(--mt-radius);
	overflow: hidden;
	background: var(--mt-flaeche);
}
.woocommerce ul.order_details.mt-danke-karte li {
	margin: 0;
	padding: var(--mt-r3) var(--mt-r4);
	border-right: 1px solid var(--mt-linie);
	border-bottom: 0;
	list-style: none;
}
.woocommerce ul.order_details.mt-danke-karte li:last-child { border-right: 0; }

.mt-danke-marke {
	display: block;
	margin-bottom: 2px;
	font-size: var(--mt-s-klein);
	color: var(--mt-text-leise);
}
.woocommerce ul.order_details.mt-danke-karte strong {
	display: block;
	font-size: var(--mt-s-gross);
	font-weight: 600;
	line-height: 1.3;
}

/* --- So geht es weiter ---------------------------------------------------- */
.mt-danke-ablauf {
	margin: var(--mt-r5) 0;
	padding: var(--mt-r4);
	border: 1px solid var(--mt-linie);
	border-radius: var(--mt-radius);
	background: var(--mt-blau-hauch);
}
.mt-danke-ablauf h2 {
	margin: 0 0 var(--mt-r3);
	font-size: var(--mt-s-gross);
}
.mt-danke-ablauf ol {
	counter-reset: schritt;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mt-danke-ablauf li {
	counter-increment: schritt;
	position: relative;
	margin: 0 0 var(--mt-r3);
	padding-left: 42px;
	line-height: 1.55;
}
.mt-danke-ablauf li:last-child { margin-bottom: 0; }
.mt-danke-ablauf li::before {
	content: counter(schritt);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--mt-radius-pille);
	background: var(--mt-blau-dunkel);
	color: var(--mt-auf-farbe);
	font-size: var(--mt-s-klein);
	font-weight: 700;
}
/* NUR die Ueberschrift des Schritts ist ein Block.
   Ohne das :first-child traf die Regel auch die Bestellnummer mitten im
   Satz — "Bitte geben Sie 84819 als Verwendungszweck an." stand dann auf
   drei Zeilen. */
.mt-danke-ablauf li > strong:first-child { display: block; }

.mt-danke-nachsatz { display: block; }

/* Die Bankverbindung, sobald eine hinterlegt ist. */
.mt-danke-konto {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 2px var(--mt-r3);
	margin: var(--mt-r2) 0 0;
	padding: var(--mt-r2) var(--mt-r3);
	border-radius: var(--mt-radius);
	background: var(--mt-grund);
}
.mt-danke-konto dt {
	margin: 0;
	font-size: var(--mt-s-klein);
	color: var(--mt-text-leise);
}
.mt-danke-konto dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}
.mt-danke-mail { white-space: nowrap; font-weight: 600; }
.mt-danke-frage {
	margin: var(--mt-r4) 0 0;
	padding-top: var(--mt-r3);
	border-top: 1px solid var(--mt-linie);
	font-size: var(--mt-s-klein);
}

/* --- Die Bestelldetails --------------------------------------------------
   GEMESSEN am 02.09.2026: Die linke Spalte war 684 Pixel breit, die rechte
   463. In der linken stand bei den Summenzeilen ein einziges Wort
   ("Gesamt:"), rechts daneben ein Betrag — dazwischen ein halber
   Bildschirm Weissraum. Genau so gemeldet: "warum ist bei den
   bestelldetails die linke spalte so extrem laenger als die rechte".

   Jetzt: Die Produktspalte nimmt den Platz, den sie braucht. Die
   Summenzeilen ruecken nach rechts zusammen, Beschriftung direkt neben
   dem Betrag.                                                            */
.woocommerce table.shop_table.order_details.woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce table.shop_table.order_details.woocommerce-table--order-details thead th {
	padding: var(--mt-r2) var(--mt-r3);
	border-bottom: 2px solid var(--mt-linie-kraeftig);
	background: var(--mt-flaeche);
	text-align: left;
}
.woocommerce table.shop_table.order_details.woocommerce-table--order-details thead th.product-total { text-align: right; }

.woocommerce table.shop_table.order_details.woocommerce-table--order-details tbody td {
	padding: var(--mt-r3);
	border-bottom: 1px solid var(--mt-linie);
	vertical-align: top;
}
.woocommerce table.shop_table.order_details.woocommerce-table--order-details tbody td.product-total {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Die Produktzeile: Bild links, Text daneben. */
.mt-bestellzeile {
	display: flex;
	align-items: flex-start;
	gap: var(--mt-r3);
}
.mt-bestellzeile-bild {
	flex: 0 0 auto;
	width: 84px;
}
.mt-bestellzeile-bild img.mt-bestellbild {
	display: block;
	width: 84px;
	height: 60px;
	object-fit: contain;
	border: 1px solid var(--mt-linie);
	border-radius: var(--mt-radius);
	background: var(--mt-grund);
}
.mt-bestellzeile-text { min-width: 0; }
.mt-bestellmenge {
	display: block;
	margin-top: 4px;
	font-size: var(--mt-s-klein);
	color: var(--mt-text-leise);
	font-weight: 400;
}

/* Die Summenzeilen ruecken nach rechts.
   Die Beschriftung steht rechtsbuendig direkt neben dem Betrag, statt am
   linken Rand einer 684 Pixel breiten Spalte zu kleben. */
.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot th {
	padding: var(--mt-r2) var(--mt-r3);
	border-bottom: 1px solid var(--mt-linie);
	text-align: right;
	font-weight: 400;
	color: var(--mt-text-leise);
}
.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot td {
	padding: var(--mt-r2) var(--mt-r3);
	border-bottom: 1px solid var(--mt-linie);
	width: 260px;
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Die Gesamtsumme ist die Zahl, auf die es ankommt. */
.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot tr:has(td .amount) th,
.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot tr:last-of-type th { font-weight: 600; }
.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot tr.order-total th,
.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot tr.order-total td {
	border-top: 2px solid var(--mt-linie-kraeftig);
	border-bottom: 0;
	font-size: var(--mt-s-gross);
	font-weight: 700;
	color: var(--mt-text);
}

/* Der Bestellhinweis ist Fliesstext und darf umbrechen. */
.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot td:not(:has(.amount)) { white-space: normal; }

/* --- Am Telefon ---------------------------------------------------------- */
@media (max-width: 600px) {
	.woocommerce ul.order_details.mt-danke-karte {
		grid-template-columns: 1fr 1fr;
	}
	.woocommerce ul.order_details.mt-danke-karte li {
		border-bottom: 1px solid var(--mt-linie);
	}
	.woocommerce ul.order_details.mt-danke-karte li:nth-child(2n) { border-right: 0; }

	.mt-bestellzeile-bild { width: 64px; }
	.mt-bestellzeile-bild img.mt-bestellbild { width: 64px; height: 46px; }

	.woocommerce table.shop_table.order_details.woocommerce-table--order-details tbody td,
	.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot th,
	.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot td {
		padding: var(--mt-r2);
	}
	.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot td { width: 130px; }
}

/* --- Die Zeilen im Fuss der Bestelldetails --------------------------------
   Jede traegt jetzt ihren Schluessel als Klasse (siehe
   woocommerce/order/order-details.php). Damit laesst sich unterscheiden,
   was ein Betrag ist und was Text — die Zahlungsart und der Bestellhinweis
   standen vorher rechtsbuendig in einer 260 Pixel schmalen Spalte und
   brachen auf vier Zeilen um.                                            */
.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot tr.mt-summe--order-total th,
.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot tr.mt-summe--order-total td {
	border-top: 2px solid var(--mt-linie-kraeftig);
	border-bottom: 0;
	padding-top: var(--mt-r3);
	padding-bottom: var(--mt-r3);
	font-size: var(--mt-s-gross);
	font-weight: 700;
	color: var(--mt-text);
}

/* Text statt Betrag: linksbuendig und mit Platz zum Umbrechen. */
.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot tr.mt-summe--text td {
	width: auto;
	max-width: 420px;
	text-align: left;
	white-space: normal;
	font-variant-numeric: normal;
}

/* Der Bestellhinweis nimmt beide Spalten (siehe order-details.php). */
.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot tr.mt-summe--hinweis td {
	width: auto;
	max-width: none;
	text-align: left;
	white-space: normal;
	font-variant-numeric: normal;
	line-height: 1.55;
}
.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot tr.mt-summe--hinweis strong {
	display: block;
	margin-bottom: 2px;
	font-size: var(--mt-s-klein);
	font-weight: 400;
	color: var(--mt-text-leise);
}

/* --- Die Eckdaten am Telefon ---------------------------------------------
   Zwei Spalten gingen nicht auf: "BESTELLNUMMER" ist breiter als eine
   halbe Bildschirmbreite, sprengte seine Zelle und schob das Datum in die
   naechste Zeile. Das Ergebnis war ein unruhiges Muster aus einer, zwei
   und wieder einer Angabe.

   Untereinander, Beschriftung links und Wert rechts, ist es ruhig und in
   einer Flucht — und braucht weniger Hoehe als zwei krumme Spalten.     */
@media (max-width: 600px) {
	.woocommerce ul.order_details.mt-danke-karte {
		grid-template-columns: 1fr;
	}
	.woocommerce ul.order_details.mt-danke-karte li {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--mt-r3);
		padding: var(--mt-r2) var(--mt-r3);
		border-right: 0;
		border-bottom: 1px solid var(--mt-linie);
	}
	.woocommerce ul.order_details.mt-danke-karte li:last-child { border-bottom: 0; }
	.woocommerce ul.order_details.mt-danke-karte li:nth-child(2n) { border-right: 0; }

	.mt-danke-marke {
		margin-bottom: 0;
		flex: 0 0 auto;
	}
	.woocommerce ul.order_details.mt-danke-karte strong {
		font-size: var(--mt-s-text);
		text-align: right;
	}
}

/* --- WooCommerces Float an den Eckdaten aufheben ---------------------------
   .woocommerce ul.order_details li traegt float: left und eine eigene
   Breite — aus der Zeit, als diese Liste nebeneinander stehende Kaesten
   war. Im Raster ist der Float wirkungslos, die Breite aber nicht: Die
   Zeile wurde 183 statt 343 Pixel breit, und "Beschriftung links, Wert
   rechts" ging sich damit nicht aus.                                     */
.woocommerce ul.order_details.mt-danke-karte li,
ul.order_details.mt-danke-karte li {
	float: none;
	width: auto;
	max-width: none;
	min-width: 0;
}

/* --- Die Bestelldetails am Telefon ----------------------------------------
   Gemessen am 02.09.2026 bei 375 Pixeln: Die Tabelle ragte ueber den
   rechten Rand hinaus, "Zzgl. € 14,83 USt (20%)" war abgeschnitten und die
   Betraege lagen ausserhalb des Bildschirms. Ursache war nowrap in der
   Betragsspalte zusammen mit "Versand mit der Post: € 7,94" — dieser Text
   ist laenger als das halbe Telefon.

   Hier bekommt die Tabelle feste Spalten und darf umbrechen. Die
   Produktzeile stellt sich um: Bild und Name oben, der Preis darunter —
   nebeneinander bliebe fuer beides zu wenig Platz.                      */
@media (max-width: 600px) {

	.woocommerce table.shop_table.order_details.woocommerce-table--order-details {
		/* Kein table-layout: fixed — die feste Aufteilung galt sonst auch
		   fuer die Produktzeile, die als Block ueber die volle Breite laufen
		   soll. Die Summenzeilen bekommen ihre Anteile direkt an den Zellen. */
		table-layout: auto;
		width: 100%;
	}

	/* Die Kopfzeile braucht am Telefon niemand: Was Modell und was Preis
	   ist, sagt die Zeile selbst. */
	.woocommerce table.shop_table.order_details.woocommerce-table--order-details thead { display: none; }

	/* Die Produktzeile bleibt zweispaltig.
	   Ein Versuch mit display: block scheiterte an der Tabellenmechanik:
	   Der Browser legt um eine Block-Zeile trotzdem eine anonyme Zelle, und
	   die Zeile blieb bei zwei Dritteln Breite stehen. Zwei Spalten mit
	   passenden Anteilen sind hier das Verlaessliche — und es sieht aus wie
	   die Summenzeilen darunter. */
	.woocommerce table.shop_table.order_details.woocommerce-table--order-details tbody td {
		padding: var(--mt-r2);
		width: 60%;
	}
	.woocommerce table.shop_table.order_details.woocommerce-table--order-details tbody td.product-total {
		width: 40%;
		white-space: normal;
		font-weight: 600;
		vertical-align: top;
	}

	/* Bild und Name untereinander — nebeneinander bliebe fuer den Namen
	   eine Spalte von drei Woertern Breite. */
	.mt-bestellzeile { display: block; }
	.mt-bestellzeile-bild { width: 72px; margin-bottom: var(--mt-r2); }
	.mt-bestellzeile-bild img.mt-bestellbild { width: 72px; height: 52px; }

	/* Die Summenzeilen bleiben zweispaltig, duerfen aber umbrechen. */
	.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot th {
		width: 45%;
		padding: var(--mt-r2);
		white-space: normal;
		word-break: break-word;
	}
	.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot td {
		width: 55%;
		padding: var(--mt-r2);
		white-space: normal;
	}

	/* Der Hinweis nimmt weiterhin beide Spalten. */
	.woocommerce table.shop_table.order_details.woocommerce-table--order-details tfoot tr.mt-summe--hinweis td {
		width: auto;
	}

	.mt-bestellzeile { gap: var(--mt-r2); }
}

/* --- Aktive Kategorie beim Ueberfahren (22.09.2026) ----------------------
   Marcel, Bild: Auf „* ANGEBOTE *" stehend und mit der Maus darueber wurde
   der Grund hellblau/weiss, die Schrift blieb weiss — unlesbar. Die aktive
   Kategorie bleibt beim Ueberfahren blau, nur einen Ton dunkler. */
.mt-kategorien a { transition: background-color .18s ease, color .18s ease; }
.mt-kategorien .mt-jetzt > a,
.mt-kategorien .mt-jetzt.mt-hervor > a { background: var(--mt-blau-dunkel); color: #fff; box-shadow: none; }
.mt-kategorien .mt-jetzt > a:hover,
.mt-kategorien .mt-jetzt.mt-hervor > a:hover { background: var(--mt-blau-tief); color: #fff; }
.mt-kategorien .mt-jetzt > a .mt-anzahl,
.mt-kategorien .mt-jetzt > a:hover .mt-anzahl { color: rgba(255, 255, 255, 0.85); }

/* Knopf "Cookie-Einstellungen öffnen" in der Datenschutzerklaerung (Borlabs,
   25.09.2026): stand ohne Abstand direkt auf der Cookie-Tabelle. */
.borlabs-cookie-open-dialog-preferences { display: inline-block; margin: 2px 0 22px; }

/* Fusszeile unten (25.09.2026, Marcel): links Copyright, Mitte Preishinweis,
   rechts das Agentur-Logo. Der Sprachumschalter wanderte in die Logospalte
   unter die UID-Nummer. */
.mt-fuss-unten { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--mt-r4); }
.mt-fuss-copy { justify-self: start; }
.mt-fuss-preise { justify-self: center; text-align: center; }
.mt-fuss-agentur { justify-self: end; display: inline-flex; opacity: .75; transition: opacity .2s ease; }
.mt-fuss-agentur:hover { opacity: 1; }
/* !important: Auf Produktseiten setzt WooCommerce ".woocommerce div.product img" auf height:auto/volle Breite — das Logo wurde riesig (25.09.2026). */
.mt-fuss .mt-fuss-agentur img.mt-fuss-agentur-logo { display: block; height: 42px !important; width: auto !important; max-width: none !important; max-height: 42px !important; }
.mt-fuss-marke .mt-fuss-sprache { margin-top: var(--mt-r3); }
@media (max-width: 782px) {
	.mt-fuss-unten { grid-template-columns: 1fr; justify-items: start; gap: var(--mt-r3); }
	.mt-fuss-copy, .mt-fuss-preise, .mt-fuss-agentur { justify-self: start; text-align: left; }
}