table,td,tr
{
/* font-family: 'Droid Sans',Arial,Verdana,sans-serif;*/
/*font-size: 12px;*/
font-variant: normal;
font-weight: normal;
text-align:justify;
text-align:left;
word-spacing:inherit;
color:#AD5C33;
color:#000000;
}
/*.products-view {border: solid 1px orange;}*/
.products-view .block-banner img
{
width: 100%;
}
.products-view #expose_container
{
max-width: 100%;
margin: 0 !important;
}
.products-view td {
font-size: 12px;
}
.staffelpreis_rabatt {
color:#D2652A;
}
/*
nav h1 {
margin: 1em;
font-weight: lighter;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
background: rgba(255,255,255,0.1);
}
nav li:nth-child(2n+1) {
background: rgba(0,0,0,0.1);
}
nav ul a {
display: block;
color: white;
padding: 1em 1.5em;
text-transform: uppercase;
font-size: 0.8em;
font-weight: bold;
}
nav ul a:hover {
background: black;
}
.st-key {width:33%;}
/* Stacktable */
.st-key div.dataTables_sizing {height: auto !important;}
/* Page-Header - berschrift ausblenden?
.page-header__title {display:none;}*/
.product__content__header {
padding-bottom: 32px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 1.17em;
}
.shop-layout__content h4,
.shop-layout__content h5 {
color: #AD5C33;
padding: 0;
padding-bottom: 4px;
margin: 0;
font-size: 14px;
}
#produktgruppe_header h1{
font-size: 24px;
}
#produktgruppe_header h3{
font-size: 14px;
}
.tip {
padding: 15px;
margin: 0;
margin-left: 0px;
margin: 15px;
background-color: #f5f8f9;
color: #004b66;
width: 80%;
font-style: italic;
}
.products-list[data-layout="grid-4-full"] .products-list__body {
width: 100%;
}
.video_container {
width: 250px;
height: 82px;
}
.video_overlay_container {
width: 100px;
height: 80px;
background_repeat: no-repeat;
background-image: url("https://cdn.gemax-werkzeuge.de/images/mediathek/video_overlay_container.png");
}
.video_overlay_container:hover {
background-image: url("https://cdn.gemax-werkzeuge.de/images/mediathek/video_overlay_container_over.png");
}
.thumbnail_container {
width: 100px;
height: 82px;
padding: 5px;
}
.thumbnail_content {
width: 92px;
height: 58px;
background-position: -5px -5px;
}
/* Popup - Form */
.chat-btn {
position: absolute;
right: 14px;
bottom: 30px;
cursor: pointer
}
.chat-btn .close {
display: none
}
.chat-btn i {
transition: all 0.9s ease
}
#check:checked~.chat-btn i {
display: block;
pointer-events: auto;
transform: rotate(180deg)
}
#check:checked~.chat-btn .comment {
display: none
}
.chat-btn i {
font-size: 22px;
color: #fff !important
}
.chat-btn {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
background-color: #0a3f67;
color: #fff;
font-size: 22px;
border: none
}
.wrapper {
position: absolute;
right: 20px;
bottom: 100px;
width: 300px;
background-color: #fff;
border-radius: 5px;
opacity: 0;
transition: all 0.4s;
border: solid 1px #ced4da
}
#check:checked~.wrapper {
opacity: 1
}
.header {
padding: 13px;
background-color: #0a3f67;
border-radius: 5px 5px 0px 0px;
margin-bottom: 10px;
color: #fff;
min-height:30px;
}
.chat-form {
padding: 15px
}
.chat-form input,
textarea,
button {
margin-bottom: 10px
}
.chat-form textarea {
resize: none
}
.form-control:focus,
.btn:focus {
box-shadow: none
}
/*.btn,
.btn:focus,
.btn:hover {
background-color: blue;
border: blue
}*/
#check {
display: none !important
}
/* Popup - Form Ende */
/* ------------------------------------------------------------------
* Merkliste und Vergleich (24.10.2026)
*
* Das Herz sitzt in der oberen rechten Ecke der Kachel -- dort, wo es
* jeder Haendler hat, den wir uns angesehen haben (Contorion setzt es
* auf der Artikelseite neben "Auf den Warenstapler").
*
* ACHTUNG: `position: absolute` setzt eine positionierte Kachel voraus.
* `.product-card` traegt im Theme bereits `position: relative`; ohne
* das sprang das Herz in die obere linke Ecke der SEITE.
* ------------------------------------------------------------------ */
.product-card__merken {
position: absolute;
top: .25rem;
right: .25rem;
z-index: 3;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: .1rem;
}
.product-card__herz {
background: none;
border: 0;
padding: .15rem .3rem;
font-size: 1.25rem;
line-height: 1;
color: #6c757d;
cursor: pointer;
}
.product-card__herz:hover,
.product-card__herz.ist-gemerkt {
color: #D2652A;
}
.indicator__herz {
font-size: 1.25rem;
line-height: 20px;
display: inline-block;
}
.merkliste__fuss {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem;
padding: .35rem .5rem .75rem;
}
.merkliste__notiz {
display: flex;
gap: .25rem;
flex: 1 1 auto;
}
/* ------------------------------------------------------------------
* Variantenauswahl ueber der Trefferliste (24.10.2026)
*
* Vorbild Contorion: eine Zeile je Merkmal, Knoepfe statt Auswahlfeld,
* der gewaehlte dunkel, ein unmoeglicher blass. Begruendung in
* App\Shop\Varianten.
* ------------------------------------------------------------------ */
.variantenwahl {
margin: 0 0 1.25rem;
padding: .75rem 1rem;
background: #f7f8f9;
border-radius: 3px;
}
.variantenwahl__achse {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .35rem .75rem;
padding: .3rem 0;
}
.variantenwahl__label {
flex: 0 0 11rem;
font-weight: 500;
font-size: .875rem;
}
.variantenwahl__einheit { color: #6c757d; font-weight: 400; }
.variantenwahl__werte {
display: flex;
flex-wrap: wrap;
gap: .35rem;
}
/* Die Masse und die Farben kommen aus dem Theme, nicht aus eigener
Erfindung -- `.btn` in saegeblatt-shop/css/style.css:
border-radius 2px, font-weight 500, transition all .1s ease-in-out,
Dunkel #3d464d, gedrueckt #546069, Hausfarbe #D2652A.
Vorgabe M.W. vom 25.10.2026: "passe die neuen Buttons optisch mehr
an unser corporate an, das wackelt alles noch sehr". */
.variantenwahl__knopf {
display: inline-block;
padding: .3rem .8rem;
border: 1px solid #dfe2e5;
border-radius: 2px;
background: #fff;
color: #3d464d;
font-size: .875rem;
font-weight: 500;
line-height: 1.3;
text-decoration: none;
transition: all .1s ease-in-out;
}
.variantenwahl__knopf:hover,
.variantenwahl__knopf:focus { border-color: #3d464d; color: #262626; text-decoration: none; }
.variantenwahl__knopf.ist-gewaehlt {
background: #3d464d;
border-color: #3d464d;
color: #fff;
}
.variantenwahl__knopf.ist-gewaehlt:hover { background: #546069; border-color: #546069; color: #fff; }
/* Unmoeglich heisst blass, nicht weg: Die Angabe "es gibt 52 Zaehne,
aber nicht mit dieser Bohrung" ist wertvoller als ein verschwundener
Knopf. Der Link bleibt bedienbar -- er setzt die Achse neu. */
.variantenwahl__knopf.ist-unmoeglich {
color: #adb5bd;
border-style: dashed;
border-color: #e9ecef;
}
.variantenwahl__zuruecksetzen { padding-top: .4rem; font-size: .8125rem; }
@media (max-width: 575px) {
.variantenwahl__label { flex: 0 0 100%; }
}
/* Das Herz in der Produkttabelle -- neben "zum Produkt", nicht darunter. */
.gmx-ptab__merken { display: inline-block; vertical-align: middle; margin-left: .15rem; }
.gmx-ptab__merken .product-card__herz { padding: .1rem .25rem; font-size: 1.1rem; }
/* Die Variantenauswahl in der Seitenleiste der Produktgruppenseite
(Wunsch M.W., 24.10.2026: "rechts (...) also noch ganz viel Platz").
Dieselben Knoepfe, nur Beschriftung ueber den Werten. */
.variantenwahl--schmal { background: none; padding: 0; margin-bottom: 0; }
.variantenwahl--schmal .variantenwahl__achse { display: block; padding: .15rem 0 .5rem; }
.variantenwahl--schmal .variantenwahl__label { margin-bottom: .3rem; }
.variantenwahl--schmal .variantenwahl__knopf { padding: .25rem .65rem; font-size: .8125rem; }
/* Auf schmalen Geraeten steht die Variantenauswahl nur einmal.
Auf einer Produktgruppenseite gibt es sie zweimal -- in der
Seitenleiste und ueber der Liste. Am Rechner trennen die beiden
rund 1.800 Pixel; auf 375 px sind es anderthalb Bildschirme, und
man sieht dieselben Knoepfe kurz hintereinander zweimal.
Entscheidung M.W. vom 24.10.2026.
ACHTUNG: Die Klasse traegt NUR der untere Block und auch nur dann, wenn
die Seite wirklich eine Produktgruppenseite ist -- auf einer
gewoehnlichen Kategorieseite ist er der einzige. */
@media (max-width: 991.98px) {
.variantenwahl--zweitfassung { display: none; }
}
/* ------------------------------------------------------------------
* Kaufbereich der Artikelseite (24.10.2026)
*
* NICHT: Das Mengenfeld darf NICHT schrumpfen. Gemessen bei 1280 px
* Fensterbreite, als die Vergleichszeile noch in derselben
* `display:flex; flex-wrap:nowrap`-Reihe lag: Das Feld war **55 px**
* breit, und bei 16 px Innenabstand plus Auswahlpfeil blieb fuer die
* Ziffer kein Platz. Befund M.W.: "sieht man keine Zahl mehr, was
* echt problematisch ist".
* ------------------------------------------------------------------ */
.product__actions { flex-wrap: wrap; }
.product__actions > .product__actions-item:first-child { flex: 0 0 5.5rem; }
.product__actions #menge { min-width: 5.5rem; }
/* Kaufen-Knopf, Merken und Vergleichen in einer Reihe, mit Luft
dazwischen; reicht die Breite nicht, rutschen die beiden kleinen
Knoepfe in die naechste Zeile statt den Kaufen-Knopf zu quetschen. */
.product__actions-item--addtocart {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: .5rem;
}
.product__actions-item--addtocart > .btn-primary { flex: 1 1 12rem; }
/* Merken und Vergleichen nebeneinander unter dem Kaufen-Knopf.
In der schmalen Kaufspalte (272 px gemessen) passen drei Knoepfe
nicht in eine Reihe; nebeneinander in einer zweiten Zeile sieht das
gewollt aus statt wie umgebrochen. */
.pdp__nebenknoepfe { display: flex; gap: .5rem; width: 100%; }
.pdp__nebenknoepfe > * { flex: 1 1 0; justify-content: center; }
/* Eckig, nicht rund -- Vorgabe M.W. vom 24.10.2026: runde Knoepfe
sind "zu nah an Wettbewerbern".
ACHTUNG: ohne `btn btn-secondary` am Element. Das Theme setzt dort
`border: 0` und einen grauen Hintergrund, und beides schlug den
eigenen Rahmen -- gemessen am laufenden Shop, die Knoepfe sahen aus
wie zwei Textzeilen. Die Gestaltung steht deshalb vollstaendig
hier. */
/* Masse und Uebergang wie `.btn` des Themes, damit die beiden unter
dem orangen Kaufen-Knopf nicht aus der Reihe fallen: 2 px Radius,
Schriftgrad 1rem, Gewicht 500, Zeilenhoehe 1.5, Hoehe
calc(2.25rem + 2px). Vorher: 15 px, Gewicht 400, 40 px hoch und
ohne Uebergang -- drei Abweichungen auf einmal, und genau die
sieht man. */
.pdp__nebenknopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .4rem;
height: calc(2.25rem + 2px);
padding: .375rem 1.25rem;
border: 1px solid #dfe2e5;
border-radius: 2px;
background: #fff;
color: #3d464d;
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: all .1s ease-in-out;
}
.pdp__nebenknopf:hover,
.pdp__nebenknopf:focus {
border-color: #3d464d;
color: #262626;
text-decoration: none;
}
/* Gedrueckt wie `.btn-primary:active` im Theme. */
.pdp__nebenknopf:active {
border-color: #546069;
background: #546069;
color: #fff;
}
.pdp__nebenknopf-zeichen { font-size: 1.15rem; line-height: 1; }
/* Hausfarbe statt Bootstrap-Rot (#d9534f). Das Rot stand in keiner
Vorlage des Shops -- es kam aus der Bootstrap-Grundpalette. */
.pdp__nebenknopf.ist-gemerkt {
border-color: #D2652A;
color: #D2652A;
}
/* Beschriftetes Anmelden im Kopf (24.10.2026, Vorgabe M.W.).
ACHTUNG: Es steht serverseitig IMMER auf "Anmelden"; den Namen
traegt das Skript im Layout nach. Die Katalogseiten bleiben damit
besucherunabhaengig und oeffentlich zwischenspeicherbar. */
.indicator__anmelden {
display: inline-block;
margin-left: .4rem;
font-size: .8125rem;
line-height: 20px;
vertical-align: top;
white-space: nowrap;
}
.indicator__anmelden.ist-angemeldet { font-weight: 500; }
@media (max-width: 1199.98px) {
/* Im schmalen Band haben Marken, Gewerkeshops und Co. Vorrang. */
.indicator__anmelden { display: none; }
}
/* "Auch im Set erhaeltlich" unter der Buybox (24.10.2026). */
.pdp__sets { list-style: none; margin: .35rem 0 0; padding: 0; }
.pdp__sets li { margin-bottom: .6rem; }
.pdp__sets a { display: flex; gap: .5rem; align-items: center; text-decoration: none; }
.pdp__sets img { width: 44px; height: auto; flex: 0 0 44px; }
.pdp__sets-titel { font-size: .8125rem; line-height: 1.25; }
.pdp__sets-nummer { display: block; font-size: .75rem; margin-left: 2.75rem; }
/* "Zuletzt angesehen" -- eigenes Gitter.
ACHTUNG: Die Produktlisten des Themes bekommen ihre Spalten erst von
main.js (owl.carousel) oder von den Layout-Klassen der Kategorieseite.
Dieses Bruchstueck kommt per fetch in die Seite, nach der
Initialisierung -- ohne eigene Regeln zieht eine einzelne Kachel auf
die volle Spaltenbreite. Gemessen am 24.10.2026: eine Kachel,
673 px hoch. */
.zuletzt__gitter {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 1rem;
}
.zuletzt__gitter .products-list__item { width: auto; }
.zuletzt .product-card { height: 100%; }
@media (max-width: 575px) {
.zuletzt__gitter { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
/* ===================================================================
Die zuegige Kasse (/kasse-zuegig)
===================================================================
Alle Regeln haengen an `.kz-*` und fassen die beiden anderen Kassen
NICHT an -- /kasse ist die Vergleichsgrundlage fuer die Abbruchquote
(Entscheidung M.W. 18.10.2026), die darf sich nicht mitaendern.
🚩 `.checkout__agree` wird hier bewusst nicht benutzt. Die Klasse
traegt `margin-bottom: 36px` (style.css), und zwei Haken
untereinander standen damit so weit auseinander, dass sie nicht
mehr zusammengehoerig aussahen. Dazu kam die Einrueckung von
Bootstraps `.form-check` (padding-left: 1.5em), die fuer einen
nativen Haken gedacht ist -- der 16-px-Kasten des Themes ist aber
ein eigenes Element daneben, und der Fliesstext brach deshalb unter
die Einrueckung statt an den Kasten (Befund M.W., 27.10.2026). */
.kz-haken {
display: flex;
align-items: flex-start;
gap: .5rem;
margin: 0 0 .6rem;
}
.kz-haken .input-check {
flex: 0 0 16px;
margin-top: .15rem;
}
.kz-haken label {
margin: 0;
line-height: 1.35;
cursor: pointer;
}
/* Enger als der Rest des Shops: In der Kasse steht alles, was zusammen
gehoert, auch zusammen. */
.kz-karte { margin-bottom: 1rem; }
.kz-karte .form-group { margin-bottom: .75rem; }
.kz-karte .form-text { margin-top: .15rem; }
/* Der Kasten „Kundenkonto anlegen" -- die Vorteile stehen darin und
nicht hinter einem Link, den niemand anklickt. */
.kz-konto {
background: #f7f7f7;
border: 1px solid #ebebeb;
border-radius: 2px;
padding: .75rem .875rem;
height: 100%;
}
.kz-vorteile {
margin: .5rem 0 0 1.6rem;
padding: 0;
font-size: .8125rem;
line-height: 1.45;
color: #6c757d;
}
/* Die freiwilligen Angaben der Gewerbekunden. Abgesetzt und leiser,
damit die Kasse nicht nach mehr Arbeit aussieht, als sie macht
(Vorgabe M.W., 27.10.2026: "darf auf keinen Fall ein Pflichtfeld
sein und muss visuell so aus der Reihe sein, dass man es nicht so
wahrnimmt"). */
.kz-freiwillig {
border-left: 3px solid #ebebeb;
padding: .25rem 0 .25rem .75rem;
margin: 0 0 .75rem;
}
.kz-freiwillig label { font-size: .8125rem; color: #6c757d; }
/* Die Positionstabelle in der zuegigen Kasse: dieselbe wie auf
/warenkorb, nur kleiner. Die Kasse hat die halbe Breite -- die
Summen stehen in der Spalte daneben. */
.kz-korb { margin-bottom: .5rem; }
.kz-korb .cart-table__column { padding: .4rem .5rem; vertical-align: top; }
.kz-korb .cart-table__column--image { width: 68px; }
.kz-korb .cart-table__product-name { font-size: .875rem; line-height: 1.3; }
.kz-korb .cart-table__options { margin: .15rem 0 0; font-size: .75rem; }
.kz-korb .cart-table__column--total { white-space: nowrap; font-weight: 500; }
/* Die Lieferampel. Punkt plus Satz -- die Farbe allein waere für
Rot-Grün-Blinde keine Auskunft. */
.kz-ampel { display: flex; align-items: baseline; gap: .35rem; margin-top: .25rem; }
.kz-ampel__punkt {
flex: 0 0 .5rem;
width: .5rem;
height: .5rem;
border-radius: 50%;
position: relative;
top: -.05rem;
}
.kz-ampel__punkt--gruen { background: #2e7d32; }
.kz-ampel__punkt--gelb { background: #d2652a; }
.kz-ampel__punkt--rot { background: #b3261e; }
.kz-ampel__text { font-size: .75rem; line-height: 1.3; }
/* ------------------------------------------------------------------ *
* Merkmalsabzeichen ("Set", "Konfiguration")
* ------------------------------------------------------------------ *
*
* Befund M.W. vom 29.10.2026 zum blauen Kaestchen unter der
* Merkmalsliste: *„Das ist ein Tag, das ist eigentlich schon ganz
* cool. Aber das gefaellt mir so nicht. Das passt nicht zum
* Corporate."*
*
* Es hing an `.gmx-set` -- #e6f4ff auf #0d6efd, zwei Bootstrap-Blaus,
* die in keiner Vorlage des Shops stehen. Das Theme fuehrt dagegen
* eine ganze Abzeichenfamilie (`style.css`:3471 ff.):
*
* --sale #ff3333 gefuellt
* --new #3377ff gefuellt
* --hot #614ba6 gefuellt
* --instock #a6c644 Umriss (das gruene "AB LAGER")
* --inexternalstock #e9e579 gefuellt
* --uvp #D2652A Umriss (die Hausfarbe)
* badge-bg-primary #D2652A gefuellt (die Rabattmarke "-30 %")
*
* Masse, Radius, Versalien und Gewicht kommen deshalb unveraendert
* aus `.product-card__badge`. Neu ist nur der Name: `--uvp` traegt
* genau die gewuenschten Farben, heisst aber nach einem Preis --
* `Set` waere eine Falle fuer den
* naechsten Leser. Die Regel ist dieselbe wie dort, Hausfarbe im
* Umriss: ruhiger als die gefuellte Rabattmarke, mit der das
* Abzeichen auf der Artikelseite sonst um Aufmerksamkeit streitet.
*
* ⚠️ `.gmx-set` bleibt bestehen -- `teile/bewertungen.blade.php`
* kennzeichnet damit die Quelle einer Bewertung. Das ist eine andere
* Frage und gehoert einer anderen Baustelle.
*/
.product-card__badge--merkmal {
background: none;
color: #D2652A;
border: solid 2px #D2652A;
}
/* In der Merkmalsliste und in den Kacheln steht das Abzeichen IM
Textfluss, nicht in der absolut gesetzten `.product-card__badges-list`
am Bildrand. `inline-block` gibt ihm dort seine Innenabstaende
zurueck -- ein reines Inline-Element laesst die senkrechten fallen. */
.product-card__badge--merkmal { display: inline-block; vertical-align: middle; }
/* Zweite Zeile unter Merken und Vergleichen. Dieselbe Lücke wie
zwischen den beiden daneben (.5rem), damit die drei Knöpfe ein
Raster ergeben und nicht zwei Gruppen. */
.pdp__nebenknoepfe--zweitzeile { margin-top: .5rem; }
/* Der Knopf ins Anfrageformular.
Befund M.W. vom 29.10.2026 zum Vorgänger (Textlink mit einem Kreis
um das Fragezeichen): „passt überhaupt nicht zum Corporate". Er
steht jetzt als `.pdp__nebenknopf` in der Reihe, und hier
unterscheidet ihn nur die Füllung.
⚠️ Vorlage, keine Ablesung: „der muss natürlich nicht so weiß
sein" (M.W.). Hellgrau statt Weiß macht ihn zur dritten, leiseren
Handlung, ohne die Reihe zu verlassen -- derselbe Rahmen, dieselbe
Höhe, dasselbe Hover. Eine andere Fassung ist ein Wert in dieser
einen Regel. */
.pdp__nebenknopf--frage { background: #f4f5f6; }
.pdp__nebenknopf--frage:hover,
.pdp__nebenknopf--frage:focus { background: #eceef0; }
/* Das Fragezeichen trägt im Gegensatz zu Herz und Doppelpfeil keine
eigene Zeichenbreite -- in der Theme-Schrift steht es sonst dünner
da als die beiden Symbole daneben. */
.pdp__nebenknopf--frage .pdp__nebenknopf-zeichen { font-weight: 700; }
/* ------------------------------------------------------------------ *
* Die Hauptnavigation im blauen Band
* ------------------------------------------------------------------ *
*
* Befund M.W. vom 29.10.2026: „Wir über uns" steht dreizeilig und zu
* klein gequetscht. *„Vermutlich, weil wir jetzt auch noch Merkliste
* und Anmelden dabei haben. (…) Du musst die Abstände zwischen den
* Hauptpunkten meinetwegen ein bisschen kleiner machen."*
*
* Gemessen am 29.10.2026 auf der Artikelseite, Fenster 1440 px:
*
* Startmenü-Block 255 px (`.departments`, fest)
* acht Hauptpunkte, ungebrochen 862 px (Text + 2x14 px Polster)
* Abstand davor + je 4 px dahinter 50 px
* Merkliste, Warenkorb, Anmelden 203 px
* ----------------------------------------
* gebraucht 1370 px
* vorhanden (`.nav-panel__row`) 1296 px
*
* Es fehlen 74 px. Die Punkte sind Flex-Kinder und schrumpfen
* stattdessen unter ihre Textbreite -- daher der Umbruch.
*
* Zwei Stellschrauben, beide aus dem Theme selbst:
* - das Polster `.nav-links__item-body` von 14 auf 10 px
* (das Theme fährt es ab 1199 px selbst auf 9 px herunter),
* - die 4 px hinter jedem Punkt (`.nav-panel__nav-links`), die bei
* acht Punkten 32 px kosten und zwischen zwei Polstern von je
* 10 px nichts mehr beitragen.
*
* Macht 112 px -- 38 px mehr als nötig. `white-space: nowrap` hält
* den Zustand fest: Lieber bräche die Zeile sichtbar über den Rand,
* als dass ein längerer Menüpunkt die Quetschung unbemerkt
* zurückbringt. Die Punkte kommen aus der Datenbank.
*/
@media (min-width: 1400px) {
.nav-links__item-body { padding: 0 10px; white-space: nowrap; }
[dir=ltr] .nav-panel__nav-links { margin-right: 0; }
[dir=rtl] .nav-panel__nav-links { margin-left: 0; }
}
/*
* ⚠️ Zwischen 1200 und 1399 px bleibt es eng, und zwar unvermeidlich.
*
* Dort ist der Bootstrap-Container 1140 statt 1320 px breit; die Reihe
* misst 1116 px, und für die acht Punkte bleiben nach Startmenü und
* den drei Symbolen rechts **640 px**. Der blosse Text der acht Punkte
* braucht schon 638 px -- ohne jedes Polster. Gemessen bei 1280 px:
* Selbst mit 7 px Polster, 13 px Schrift und ohne Abstände laufen
* 20 px über.
*
* Das ist keine Abstandsfrage mehr, sondern eine Frage, was in die
* Leiste gehört. ⛔ Darum hier **kein** `nowrap`: Ein Umbruch ist
* hässlich, ein abgeschnittener Menüpunkt ist kaputt. Das Polster
* geht trotzdem herunter -- es bricht dann nur noch ein Punkt statt
* dreier.
*
* Zur Entscheidung vorgelegt (M.W.): ein Hauptpunkt weniger, eine
* kürzere Beschriftung („Über uns", „Hilfe"), oder der Startmenü-Block
* schmaler als 255 px.
*/
@media (min-width: 1200px) and (max-width: 1399.98px) {
.nav-links__item-body { padding: 0 8px; }
[dir=ltr] .nav-panel__nav-links { margin-right: 0; }
[dir=rtl] .nav-panel__nav-links { margin-left: 0; }
}
/* "Auch im Set erhaeltlich" als eigene Reihe unter den Bildern (03.11.2026).
Ab mehr Sets als die Schwelle in den Shop-Einstellungen. */
.pdp__sets-reihe { margin: 1rem 0; padding: .75rem 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.pdp__sets-ueberschrift { display: block; font-weight: 600; margin-bottom: .5rem; }
.pdp__sets--reihe { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: 0; }
.pdp__sets--reihe li { margin: 0; flex: 0 1 220px; }
.pdp__sets--reihe a { padding: .35rem; border: 1px solid #e5e5e5; border-radius: 4px; }
.pdp__sets--reihe a:hover { border-color: #aaa; }
.pdp__sets--reihe .pdp__sets-nummer { margin-left: calc(.35rem + 44px + .5rem); }
.pdp__marke { display: inline-block; }
/* Sprungziele: Versatz unter die festgeklebte Kopfleiste (03.11.2026).
`.nav-panel--stuck` (Rechner) und `.mobile-header--stuck
.mobile-header__panel` (Handy) sind beide `position: fixed; top: 0`
und 54 px hoch. Ohne diesen Versatz verschwindet die erste Zeile des
Sprungziels darunter -- auf `#trefferliste` waere das die
Ueberschrift "Artikel (N)".
`.gmx-sprungziel` ist eine leere Marke ohne eigene Hoehe; sie steht
in `kategorie.blade.php` vor der Trefferliste. */
.gmx-sprungziel { scroll-margin-top: 70px; }
#variantenwahl, #variantenwahl-seite { scroll-margin-top: 70px; }
/* "Versandkostenfrei" ist rot -- auf jeder Seite (T1034, 06.11.2026).
Der Alt-Shop schreibt an dieser Stelle `` ins
HTML. Im Nachbau stand die Regel bisher nur in
`teile/konfigurator-stil.blade.php`, und die laedt allein die
Konfiguratorseite. Auf der Artikelseite trugen die Staffelkarten die
Klasse `gmx-versandfrei` also ohne jede Wirkung. */
.gmx-versandfrei { color: red; }
/* Validierungsfehler am Feld sichtbar machen (T1030, 06.11.2026).
Vorgabe Karsten: die gesammelte Meldung am Seitenanfang bleibt, das
betroffene Feld wird ZUSAETZLICH markiert. Fuer `.form-control` und
`.form-check-input` erledigt das Bootstrap selbst (`.is-invalid`).
Die Kasse benutzt daneben einen eigenen Schalter des Templates
(`input-check__box`) -- den kennt Bootstrap nicht. `.is-invalid` am
Eingabefeld faerbt hier den sichtbaren Kasten; 2 px statt der
sonstigen 1 px, sonst ist der Unterschied bei 16 px Kantenlaenge
nicht zu sehen.
`.zahlarten--fehler` markiert die ganze Liste der Zahlarten: der
Fehler haengt an der Wahl, nicht an einem einzelnen Knopf. */
.input-check__input.is-invalid ~ .input-check__box {
box-shadow: 0 0 0 2px #dc3545 inset;
}
.payment-methods.zahlarten--fehler .payment-methods__list {
border: 1px solid #dc3545;
border-radius: 2px;
}
/* Der Katalog-Teaser (T210, seit T1818 auch im Fliesstext).
Stand bis zum 09.11.2026 als