/* ==========================================================================
   net-neu.css — eigene Ergaenzungen zum Original-Stylesheet matten-net.css
   --------------------------------------------------------------------------
   matten-net.css ist das unveraenderte Stylesheet von matten.net. Alles, was
   der Nachbau zusaetzlich braucht, steht hier — und nur das:

     1  Cookie-Hinweis (cookieconsent, Thema "edgeless", Farben laut Spec 1)
     2  Warenkorb-Modal: Zeilen des gefuellten Korbs (im Original nicht erfasst)
     3  Produktseite: Farbfelder mit Bildmuster, Zusatzzeilen (Endpreis,
        Anfragehinweis, Sonderform/Sonderfarbe), Meldungen
     4  Kasse (auf matten.net nicht erfassbar) im Bootstrap-Stil der Seite
     5  Kleinigkeiten: Karten ohne Bild, Rechtstext-Hinweis, Ladezustaende
     6  Volle Fensterbreite (24.10.2026)
     7  Vorteilsleiste ohne uebereinanderliegende Bilder (24.10.2026)
   ========================================================================== */

/* --- 1  Cookie-Hinweis --------------------------------------------------- */
.cc-window {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  padding: 1em 1.8em; background: #2579d3; color: #ffffff;
  font-family: Helvetica, Calibri, Arial, sans-serif; font-size: 16px; line-height: 1.5em;
}
.cc-window[hidden] { display: none; }
.cc-window .cc-message { flex: 1 1 auto; margin-right: 1em; }
.cc-window .cc-link { color: #ffffff; text-decoration: underline; opacity: .8; padding: .2em; }
.cc-window .cc-link:hover { opacity: 1; }
.cc-window .cc-btn {
  display: block; padding: .4em .8em; min-width: 140px; text-align: center;
  background: #cbf1ff; color: #000000; border: 2px solid transparent; font-size: .9em; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.cc-window .cc-btn:hover { background: #b7ebff; }

/* --- 2  Warenkorb-Modal: Zeilen ------------------------------------------ */
#cart-modal .cart-pos-bild { width: 72px; height: auto; }
#cart-modal .cart-pos-attribut { display: block; font-size: .8rem; color: #6c757d; }
#cart-modal .cart-pos-kommentar { display: block; font-size: .75rem; color: #6c757d; white-space: pre-wrap; }
#cart-modal .cart-menge { width: 4.5em; display: inline-block; text-align: right; }
#cart-modal .cart-entfernen { color: #dc3545; padding: 0 .25rem; }
#cart-modal .cart-hinweis { font-size: .8rem; color: #6c757d; }
#cart-modal .cart-fehler { margin: 0 1rem; }

/* --- 3  Produktseite ----------------------------------------------------- */
/* Farbfelder, fuer die kein Hexwert bekannt ist, aber ein Farbmuster-Bild des
   Altsystems (…_farboption.jpg) — das Bild wird als Hintergrund gezeigt. */
.color-input label.color-muster { background-size: cover; background-position: center; color: #fff; text-shadow: 0 0 3px #000; }
.color-input label.color-unbekannt { background-color: #9a9a9a; }
/* Vorschau-Bild fuer die gewaehlte Grundfarbe (aus dem Altsystem, ueber /api/img/) */
#variety-images .product-image-container img { width: 100%; height: auto; }
#variety-images .product-image-nav-item img { width: 100%; height: auto; }
/* Kundenwunsch: Endpreis inkl. MwSt. und Versand direkt unter dem Preis.
   Seit 17.09.2026 einzeilig und ohne zusaetzlichen Abstand (Punkt 5).
   Kein nowrap — der Satz ist laenger als die Preisspalte und wuerde sonst
   waagerecht aus der Seite laufen; stattdessen kleiner gesetzt.
   Seit 01.10.2026 ist nur noch der BETRAG fett (Screenshot des
   Auftraggebers), die Beschriftung davor steht normal. */
/* Seit 13.10.2026 (Entwurf Fuchsius): Betrag vorn und so gross wie der
   Preis darueber, die Beschriftung klein dahinter. */
#endpreis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .4rem; color: #212529; }
#endpreis .endpreis-betrag { font-weight: 700; font-size: 1.5rem; line-height: 1.15; }
#endpreis small { font-size: .8125rem; }
/* Zeile unter dem Preis: was beim Klick geschieht (Anfrage statt Kauf) */
#weg-hinweis { display: block; font-size: .8rem; color: #856404; }
#weg-hinweis:empty { display: none; }

/* ---------------------------------------------------------------------------
   Bestellformular, Aenderungswuensche Fuchsius vom 17.09.2026
   1 Rand vor Form · 2 Sonderfarben einzeilig · 3 flachere Felder ·
   4 MWSt. hinter dem Preis · 5 Endpreis einzeilig · 7 gleiche Breiten
   --------------------------------------------------------------------------- */

/* 3 — Felder flacher und enger, damit die Beschreibung weiter nach oben rueckt.
   Gilt nur im Bestellformular, nicht fuer Kasse oder Konto. */
#order-form .form-control,
#order-form .custom-select { height: calc(1.5em + .375rem + 2px); padding: .1875rem .5rem; font-size: .875rem; }
#order-form .col-form-label { padding-top: .1875rem; padding-bottom: .1875rem; font-size: .875rem; }
#order-form .form-group { margin-bottom: .375rem; }
#order-form .form-row { margin-bottom: 0; }
#order-form .form-text { margin-top: .0625rem; }

/* 2 — Sonderfarbe (Entwurf Fuchsius 13.10.2026): Paar neben "Form", im
   Kasten vorn "Anzahl", dahinter die Zahl. Der Vorsatz wird weiss statt grau
   gezeichnet, damit es wie EIN Feld aussieht (so im Entwurf). */
.sonderfarben-feld { flex-wrap: nowrap; }
#order-form .sonderfarben-feld .input-group-text {
  height: calc(1.5em + .375rem + 2px); padding: .1875rem .5rem; font-size: .875rem;
  background: #fff; color: #6c757d; border-right: 0;
}
#order-form .sonderfarben-feld .form-control { border-left: 0; text-align: right; min-width: 3rem; }
/* "Sonderfarbe" darf in der schmalen Beschriftungsspalte umbrechen (­). */
#order-form label[for="input_sonderfarben"] { line-height: 1.1; hyphens: manual; }

/* 4 — Preisblock (Entwurf Fuchsius 13.10.2026): zwei Zeilen ueber die
   ganze Breite. Vorn eine Beschriftungsspalte so breit wie die der Felder
   (5,5 rem), damit "Preis"/"Standard" unter "Menge" und die beiden Betraege
   buendig untereinander stehen:
     Preis      € 29,05  inkl. MWSt.  Plus 11,90€ Versandkosten
     Standard   € 40,95  Endpreis inkl. MwSt. und Versand
   flex-wrap, damit die Zeilen auf dem Handy umbrechen statt die Seite zu
   verbreitern. */
.preis-block { margin: .25rem 0 .5rem; }
/* Zwei feste Spalten je Zeile: Beschriftung | Werte. Brechen die Werte auf
   dem Handy um, bleiben sie in ihrer Spalte, statt unter "Preis" zu rutschen. */
.preis-zeile, .endpreis-zeile { display: flex; align-items: baseline; gap: 0; }   /* ohne Abstand: Betrag buendig mit den Feldern darueber */
.preis-werte { flex: 1 1 0; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .4rem; }
.preis-beschriftung { flex: 0 0 5.5rem; max-width: 5.5rem; margin: 0; font-size: .875rem; }
.preis-zeile #price { font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: #212529; }
.preis-mwst, .preis-nebenzeile { font-size: .8125rem; }
.preis-nebenzeile { color: #6c757d; }
.endpreis-zeile #endpreis { flex: 1 1 0; min-width: 0; }
/* Ohne "Standard"/"Spezial" bleibt die Spalte trotzdem stehen, damit die
   Betraege buendig bleiben. */
.endpreis-zeile .groessen-art:empty { display: block; }

/* Standard / Spezial (WhatsApp-Notiz 17.09.2026, Wortwahl aus der Mail vom
   18.09.2026): gruen bzw. rot. Farben aus Bootstrap 4 (success/danger),
   damit sie zum uebrigen Shop passen. */
.groessen-art { font-weight: 700; font-size: .8125rem; }
.groessen-art:empty { display: none; }
.groessen-art.ist-standard { color: #28a745; }
.groessen-art.ist-spezial { color: #dc3545; }

/* Kunden-Bemerkung (neu 01.10.2026): mehrzeilig, deshalb von der flachen
   Feldhoehe des Formulars ausgenommen. */
#order-form textarea#input_bemerkung { height: auto; min-height: 4.5rem; resize: vertical; }

/* Knopfzeile: "In den Warenkorb", "Angebot anfordern" und
   "Kunden-Datei hochladen" (neu 01.10.2026). Drei Knoepfe in der Spalte des
   Formulars (rund 510 px bei 1280 px Fensterbreite) gehen nur mit engerem
   Innenabstand und kleinerer Schrift auf — sonst rutscht der dritte Knopf in
   die zweite Zeile und steht nicht mehr neben "Angebot anfordern".
   Umbruch bleibt erlaubt, damit auf dem Handy nichts aus der Seite laeuft. */
.knopf-zeile { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.knopf-zeile .btn {
  padding: .375rem .45rem; font-size: .75rem; white-space: nowrap;
  letter-spacing: 0;   /* das Original-CSS sperrt Knopfschrift — hier zu breit */
}
/* Das echte Datei-Feld bleibt unsichtbar, aber bedienbar (Tastatur,
   Screenreader) — geklickt wird das <label> daneben, das wie ein Knopf
   aussieht. display:none wuerde es aus der Tabulatorfolge nehmen. */
.datei-feld {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Das Original-CSS zeichnet .btn-outline-secondary sehr blass — der Knopf
   sah dadurch aus wie abgeschaltet. Deshalb hier eigene Kontraste. */
.knopf-zeile label[for="input_datei"] {
  cursor: pointer; color: #495057; border-color: #adb5bd; background: #fff;
}
.knopf-zeile label[for="input_datei"]:hover { color: #212529; background: #e9ecef; border-color: #6c757d; }
.datei-feld:focus + label,
.datei-feld:focus-visible + label { outline: 2px solid #007bff; outline-offset: 2px; }
.datei-hinweis { font-size: .8125rem; color: #155724; margin-top: .375rem; word-break: break-word; }
.datei-hinweis:empty { display: none; }
/* Ehrlicher Hinweis: die Datei wird NICHT uebertragen (die Bruecke reicht
   keine Dateien an matten.de durch) — sie wird per E-Mail nachgereicht. */
.datei-erklaerung { display: block; font-size: .75rem; color: #6c757d; margin-top: .25rem; }

/* 7 — Der Farbfeld-Block gibt die Breite vor; das Formular zieht nach.
   Die Felder bleiben zweispaltig, nutzen die Breite aber ganz aus. Beide
   Spalten teilen sich die Breite gleichmaessig, damit Rand und Form (und
   darunter Menge und Preis) buendig untereinander stehen. */
#order-form .form-row > .col { min-width: 0; flex: 1 1 0; }

/* Beschriftung und Feld im festen Verhaeltnis, damit "Rand" und "Form"
   gleich weit vom jeweiligen Feld stehen (im Bild sass "Form" sonst mittig
   in seiner Spalte). Erst ab Tablet-Breite — darunter stapelt Bootstrap
   Beschriftung und Feld absichtlich untereinander. */
@media (min-width: 576px) {
  #order-form .form-group.row > .col-form-label { flex: 0 0 5.5rem; max-width: 5.5rem; }
  /* Null-Basis und min-width 0 (13.10.2026): Mit "auto" bestand ein Feld auf
     seiner vollen Breite und rutschte in den schmalen Paaren unter die
     Beschriftung — im Entwurf des Auftraggebers steht sie links daneben. */
  #order-form .form-group.row > .col-sm-8 { flex: 1 1 0; min-width: 0; max-width: none; }
}

/* Bis 13.10.2026 stand hier ein Ausbruch der Endpreis-Zeile nach links
   (margin-left: -5.5rem). Der Preisblock steht jetzt selbst ueber die ganze
   Breite mit eigener Beschriftungsspalte, das braucht es nicht mehr. */

/* Meldung nach "In den Warenkorb" / "Angebot anfordern" */
#produkt-meldung:empty { display: none; }
#produkt-meldung .alert { margin-top: .75rem; margin-bottom: 0; font-size: .875rem; }
/* Preisfeld: Fehlertexte von berechne() in Rot, aber nicht fett */
#price .preis-fehler { color: #dc3545; font-weight: 400; font-size: .875rem; }
/* Tooltip-Hinweise zu den Massfeldern stehen als Text darunter (Kundenwunsch 7.2) */
.mass-hinweis { display: block; font-size: .8rem; color: #dc3545; }
.mass-hinweis:empty { display: none; }
/* Die Beschreibung des Original-Markups enthaelt Inline-Verweise auf
   matten.de-Pfade ("produkte/aluminium_profilmatten") — sie fuehren hier
   nirgendwohin und werden wie Text dargestellt. */
.description-content a[href^="produkte/"] { pointer-events: none; color: inherit; text-decoration: none; }

/* --- 4  Kasse ------------------------------------------------------------- */
.kasse-schritte { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.kasse-schritte li { flex: 1 1 160px; padding: .5rem .75rem; border: 1px solid #dee2e6; background: #f8f9fa; font-size: .875rem; color: #6c757d; }
.kasse-schritte li[aria-current="step"] { border-color: #007bff; background: #e7f1ff; color: #004085; font-weight: 700; }
.kasse-schritte li[data-erledigt] { border-color: #28a745; color: #155724; }
.kasse-roh pre { background: #f8f9fa; border: 1px solid #dee2e6; padding: .75rem; font-size: .75rem; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; }
.kasse-tabelle td, .kasse-tabelle th { vertical-align: middle; }
.kasse-tabelle img { width: 64px; height: auto; }
#kasse-adresse .form-group label.required::after,
#register-form label.required::after { content: " *"; color: #dc3545; }
.kasse-ergebnis-nummer { font-size: 1.75rem; font-weight: 700; }
.kasse-rohantwort { white-space: pre-wrap; background: #f8f9fa; border: 1px solid #dee2e6; padding: .75rem; font-size: .875rem; }

/* --- 5  Kleinigkeiten ---------------------------------------------------- */
/* Produktkarte ohne lokales Bild: gleiche Hoehe wie ein Kartenbild, leer */
/* Seit 04.10.2026: Karten ohne Bild zeigen den Produktnamen auf grauem Grund;
   Bild und Platzhalter haben dasselbe Seitenverhaeltnis (256 x 170, wie die
   Kacheln), damit die Karten beim verzoegerten Bildladen nicht springen und
   Fotos mit anderem Format nicht verzerrt oder abgeschnitten werden. */
.product-card .card-img-top { aspect-ratio: 256 / 170; object-fit: contain; background: #fff; }
.product-card .card-img-leer {
  display: flex; align-items: center; justify-content: center; width: 100%;
  background: #e9ecef; padding: .5rem; text-align: center; overflow: hidden;
}
.product-card .card-img-name {
  font-size: .8125rem; line-height: 1.3; color: #6c757d; font-weight: 700;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
/* Blaetterleiste: darf auf schmalen Bildschirmen umbrechen (bis zu neun
   Zahlen plus "Vorherige"/"Naechste" passen nicht in 375 px) */
.pagination { flex-wrap: wrap; }
/* Kategorie-Kachel im Bildmenue ohne Bild (im Original ein via.placeholder.com-Bild) */
.category-dropdown-link .kachel-leer { display: block; width: 100%; padding-top: 66.6%; background: #e9ecef; }
/* Vorteilsleiste: die beiden Icons liegen nicht lokal vor — die Flaeche bleibt in Bildgroesse leer */
.info-col .info-bild-leer { display: inline-block; width: 120px; height: 120px; background: #f1f3f5; }
/* Hinweis ueber den Rechtstexten (bewusste Abweichung, siehe LIESMICH.md) */
.rechtstext-hinweis { font-size: .875rem; padding: .375rem .75rem; margin-bottom: 1rem; }
/* Ladezustand von Listen */
[aria-busy="true"] { opacity: .6; }
/* Filter-Gruppen der Produktliste: Knopf statt Inline-onclick, sieht aus wie das Original-<span> */
.filter button.filter-category-parent { background: none; border: 0; padding: 0; text-align: left; }
.filter .filter-category-parent:focus { outline: 2px solid #007bff; outline-offset: 2px; }
/* Mobile Navigation: die Text-Dropdowns des Originals (bg-blue) */
.navbar .dropdown-item.bg-blue { background: #0062cc; color: #fff; }
.navbar .dropdown-item.bg-blue:hover { background: #007bff; color: #fff; }
/* Suchfeld: die Adresszeile ?keyword= soll auch im Kopf sichtbar bleiben */
.search-box input::placeholder { color: #6c757d; }
/* Gaestebuch / leere Zustaende */
.leer-hinweis { color: #6c757d; padding: 1rem 0; }

/* --- 6  Volle Fensterbreite (24.10.2026) -----------------------------------
   Kundenwunsch Fuchsius im Gespraech vom 24.10.2026: "ganze Breite nutzen".
   matten-net.css begrenzt .big-container auf 1400 px und .container je nach
   Fenster auf 540/720/960/1140 px — bei 1709 px Fenster stand der Inhalt
   zwischen x=165 und x=1540, rechts und links blieb ein breiter weisser Rand.
   Jetzt reicht alles bis knapp an den Rand: seitlich 16 px (Handy), 24 px
   (Tablet), 32 px (ab 1200 px).

   Obergrenze 2400 px: Bis 2560 px Fensterbreite (27-Zoll-QHD, der breiteste
   uebliche Buerobildschirm) bleibt die Seite damit praktisch randlos (80 px je
   Seite). Erst auf Ultrabreit-Bildschirmen (3440 px) setzt die Grenze ein —
   sonst stuenden Logo und Warenkorb ueber 3.300 px auseinander, und die
   Menueleiste klebte verloren am linken Rand. */
:root { --seitenrand: 16px; }
@media (min-width: 768px) { :root { --seitenrand: 24px; } }
@media (min-width: 1200px) { :root { --seitenrand: 32px; } }
.big-container,
.container { max-width: 2400px; padding-left: var(--seitenrand); padding-right: var(--seitenrand); }
/* Fusszeile: footer.p-2 bringt schon .5rem mit — die Spalten stehen so buendig
   unter dem Logo. */
footer.footer > .container { max-width: calc(2400px - 1rem); padding-left: calc(var(--seitenrand) - .5rem); padding-right: calc(var(--seitenrand) - .5rem); }
/* Ein .container im .big-container (Vorteilsleiste der Startseite) nicht doppelt einruecken */
.big-container .container { padding-left: 0; padding-right: 0; }
/* Desktop-Menue: matten-net.css setzt den Innenabstand der Leiste auf 0, die
   Menuepunkte bringen selbst .5rem mit. So steht "Mattendesigner" genau unter
   dem linken Rand des Logos. */
.main-navbar > .big-container { padding-left: calc(var(--seitenrand) - .5rem); padding-right: calc(var(--seitenrand) - .5rem); }
/* Die 13 Menuepunkte sind zusammen 1198 px breit — schon im Original lief die
   Leiste zwischen 992 und 1199 px rechts aus dem Fenster (waagerechter
   Rollbalken, "Alle Produkte"/"Blog" abgeschnitten). Mit dem Seitenrand waere es
   bis 1221 px so. Darum dort kleinere Schrift und engere Abstaende; die Zeilen-
   hoehe bleibt gleich (11,2 px x 1,714 = 19,2 px wie .8rem x 1,5), damit das
   Bildmenue weiterhin nahtlos unter der Leiste haengt und beim Herunterfahren
   mit der Maus offen bleibt. */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .main-navbar .nav-link { font-size: .7rem; line-height: 1.7143; padding-left: .3rem !important; padding-right: .3rem !important; }
  .main-navbar .category-dropdown-trigger { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (min-width: 992px) and (max-width: 1099.98px) {
  .main-navbar .nav-link { padding-left: .2rem !important; padding-right: .2rem !important; }
}

/* Bildmenue: die Kacheln wuerden mit der Breite mitwachsen (6 je Reihe, bei
   1920 px je 310 px) — die Vorlagen haben teils nur 150 x 100 px. Darum auf
   breiten Bildschirmen mehr Kacheln je Reihe; jede bleibt 175–235 px breit wie
   bisher. */
@media (min-width: 1440px) {
  .category-dropdown-menu .category-dropdown-link-container { flex: 0 0 12.5%; max-width: 12.5%; }
}
@media (min-width: 1800px) {
  .category-dropdown-menu .category-dropdown-link-container { flex: 0 0 10%; max-width: 10%; }
}

/* Produktkarten (Startseite TOP-ANGEBOTE, Kategorie, Produktliste): MEHR
   Spalten statt breiter gezogener Karten. Raster mit Mindestbreite 230 px je
   Spalte (Karte mind. 200 px + 30 px Abstand wie bisher — das Original zeigt
   bei 1280 px Karten von 208 px); so viele Spalten, wie hineinpassen: in der
   Produktliste bei 1280/1440/1920/2560 px 4/4/6/9 Spalten (vorher immer 4),
   auf der Startseite 5/6/8/10. Auf dem Handy bleiben es zwei. Die
   Bootstrap-Spaltenklassen der Karte (col-6 col-lg-4 col-xl-3) wirken im
   Raster nicht mehr. */
#top-angebote,
#produkt-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 576px) {
  #top-angebote,
  #produkt-raster { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}
#top-angebote > [class*="col-"],
#produkt-raster > [class*="col-"] { flex: none; max-width: none; width: auto; }
/* Startseite: Es gibt nur 5 TOP-ANGEBOTE. Mit auto-fill standen sie ab 1440 px
   links, rechts blieben 3 bis 5 Spalten leer (Pruefbericht 24.10.2026). Jetzt
   fuellen sie die Zeile (auto-fit laesst leere Spalten weg). Damit die Karten
   auf sehr breiten Schirmen nicht riesig werden, ist die Reihe hoechstens
   2000 px breit (5 Karten je 400 px) und steht mittig. Mit einer festen
   Hoechstbreite je Spalte (minmax(230px, 380px)) brach sie bei 1920 px in 4 + 1 um. */
@media (min-width: 576px) {
  #top-angebote { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width: 2000px; margin-left: auto; margin-right: auto; }
}

/* Karussell und Kachel "Was ist neu": Die Bilder sind nur 1024 x 170 px. Ueber
   die volle Breite gezogen (bei 1920 px 1856 px) wurden sie fast doppelt so
   gross und weich. Beide hoechstens 1600 px breit und mittig, bis es Bilder in
   voller Groesse gibt. Die Kachel nimmt dafuer die ganze Zeile statt der halben
   und behaelt das Seitenverhaeltnis des Bildes (statt fest 167 px hoch). */
#carousel { max-width: 1600px; margin-left: auto; margin-right: auto; }
#featured > .col-md-6 { flex: 0 0 100%; max-width: calc(1600px + 30px); margin-left: auto; margin-right: auto; }   /* + Spaltenabstand: Kachel so breit wie das Karussell */
@media (min-width: 768px) {
  #featured .category-thumbnail { height: auto; aspect-ratio: 1024 / 170; background-position: center; }
}

/* Formularseiten (Registrieren): Felder von 900 px Breite liest niemand gern —
   hoechstens 1200 px, linksbuendig unter Ueberschrift und Login-Hinweis. */
#register-form { max-width: 1200px; }

/* Produktliste und Kategorie: die Filterspalte waere bei 25 % auf breiten
   Schirmen 470 px und mehr — sie bleibt 280 px, das Raster nimmt den Rest. */
@media (min-width: 1200px) {
  .filter-spalte { flex: 0 0 280px; max-width: 280px; }
  .raster-spalte { flex: 1 1 0; max-width: none; min-width: 0; }
}

/* Produktseite: Das Grossbild waechst nur maessig mit — die Fotos haben meist
   800 x 600 px (Altsystem) oder 512 x 340 px, breiter gezogen werden sie
   unscharf. Es bekommt hoechstens 46 % bzw. 720 px (ab 2000 px Fenster 800 px).
   Die Bestellspalte nimmt den Rest, aber hoechstens 1010 px: breiter ergaebe
   meterlange Auswahlfelder, und der Bestellbereich nach dem Entwurf von Herrn
   Fuchsius (13.10.2026) verloere seine Proportionen. */
@media (min-width: 992px) {
  .produkt-bilder-spalte { flex: 0 0 min(46%, 720px); max-width: min(46%, 720px); }
  #product_view .single-product-info { flex: 1 1 0; max-width: 1010px; min-width: 0; }
}
@media (min-width: 2000px) {
  .produkt-bilder-spalte { flex-basis: 800px; max-width: 800px; }
}

/* Lange Fliesstexte bleiben lesbar: hoechstens 80 rem (1280 px) breit, sonst
   stuenden auf 1920 px ueber 230 Zeichen in einer Zeile. */
.description-content,
#seite,
#blog > * { max-width: 80rem; }
#mattenfuchs-text { max-width: 80rem; margin-left: auto; margin-right: auto; }

/* --- 7  Vorteilsleiste: Bilder lagen uebereinander (24.10.2026) ------------
   Kundenwunsch "Bilder, die uebereinander sind, fixen". Ursache: die zwei
   Vorteils-Bilder (120 x 120 px, feste Breite im Markup) stehen in Spalten
   .col-2 = 16,7 % der Breite. Unter ca. 840 px ist die Spalte schmaler als das
   Bild; es ragte in die Nachbarspalte, und "EXPRESS DELIVERY" verdeckte
   "BEST PRICE GUARANTEE" zur Haelfte (gemessen 390 px: 60 px Ueberdeckung).
   Jetzt: breitere Spalten unter 992 px, und das Bild passt sich nie breiter an
   als seine Spalte. */
.info-col img { max-width: 100%; height: auto; }
@media (max-width: 991.98px) {
  #vorteile > .info-col { flex: 0 0 33.333%; max-width: 33.333%; }
}
@media (max-width: 575.98px) {
  #vorteile > .info-col { flex: 0 0 50%; max-width: 50%; }
}