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;
}

.product-card__vergleich {
    font-size: .75rem;
    font-weight: 500;
    color: #6c757d;
    text-decoration: none;
    transition: opacity .12s, color .1s ease-in-out;
    /* Erst beim Ueberfahren der Kachel sichtbar: Die Kachel hat schon
       Titel, Nummer, Abzeichen, Preis und zwei Knoepfe. Ein weiterer
       dauerhaft sichtbarer Text waere einer zu viel. Auf Geraeten ohne
       Zeiger bleibt er sichtbar -- dort gibt es kein Ueberfahren. */
    opacity: 0;
    transition: opacity .12s;
}

.product-card:hover .product-card__vergleich,
.product-card__vergleich:focus {
    opacity: 1;
}

.product-card__vergleich:hover { color: #D2652A; text-decoration: none; }

@media (hover: none) {
    .product-card__vergleich { opacity: 1; }
}

.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)); }
}