body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1,
h2 {
text-align: center;
}
.mh-related-articles{
text-align:left;}
.mh-related-articles h2{text-align:left;margin-bottom:.5rem;}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 120px;
}
table th,
table td {
hyphens: auto;
border: 1px solid #ddd;
padding: 8px;
text-align: left;
cursor: pointer;
}
table th {
background-color: #f2f2f2;
}
.nosp{
white-space:nowrap;}
table tr:nth-child(even) {
background-color: #f9f9f9;
}
table tr:nth-child(odd) {
background-color: #ffffff;
}
table tr:hover td {
background: #ffff99;
}
.checkmark-placeholder {
color: green;
font-size: 1rem;
display: none;
margin-right: 10px;
}
.checkbox-placeholder {
line-height: 1.25rem;
font-size: 1.25rem;
color: green;
display: none;
margin-right: 5px;
}
.selected-row .checkmark-placeholder {
display: block;
}
.row:not(.selected-row):hover .checkbox-placeholder {
display: block;
}
.selected-row {
background-color: #d9fdd3 !important;
letter-spacing: -0.015em;
font-weight: bold;
}
#mh-restposten-popup{
position:fixed;
top:50%;
left:50%;
transform:
translate(-50%, -50%);
z-index:999999;
width:min(600px, calc(100vw - 40px));
padding:28px 32px;
border-radius:16px;
box-shadow:
0 20px 60px rgba(0,0,0,.25);
font-size:1.05rem;
line-height:1.6;
display:none;
text-align:center;
backdrop-filter:blur(2px);
animation:
mhPopupIn .25s ease;
}
#mh-restposten-popup.success{
background:#f3fff6;
color:#145c2e;
border:1px solid #9ed7af;
}
#mh-restposten-popup.error{
background:#fff3f3;
color:#8a1f1f;
border:1px solid #e1a0a0;
}
@keyframes mhPopupIn{
from{
opacity:0;
transform:
translate(-50%, -52%)
scale(.96);
}
to{
opacity:1;
transform:
translate(-50%, -50%)
scale(1);
}
}
@media screen and (max-width:700px){
#mh-restposten-popup{
width:
calc(100vw - 30px);
padding:22px 20px;
font-size:1rem;
}
}
#close-warenkorb {
display: none;
}
@keyframes shake {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(-15deg);
}
40% {
transform: rotate(15deg);
}
60% {
transform: rotate(-10deg);
}
80% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.cart-icon {
font-size: 150%;
}
#warenkorb-button.shake,
.cart-icon.shake {
display: inline-block;
animation: shake 0.4s ease;
}
#anfrage-form{
position:relative;
}
.mh-anfrage-close{
position:absolute;
right:12px;
top:8px;
font-size:24px;
line-height:24px;
cursor:pointer;
color:#666;
font-weight:bold;
user-select:none;
}
.mh-anfrage-close:hover{
color:#000;
}
#restposten-anfrage-form {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
margin: 1.5rem 0;
background: linear-gradient(
135deg,
#fdfdfd,
#f5f5f5
);
border: 1px solid #ddd;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
#restposten-anfrage-form label {
font-weight: 600;
margin-bottom: 0;
color: #333;
}
#restposten-anfrage-form textarea,
#restposten-anfrage-form input[type="text"],
#restposten-anfrage-form input[type="email"],
#restposten-anfrage-form input[type="tel"] {
width: 100%;
padding: 0.8rem 1rem;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
outline: none;
transition: all 0.2s ease-in-out;
background-color: #fff;
box-sizing:border-box;
margin-top:18px;
margin-bottom:0;
}
#restposten-anfrage-form textarea:focus,
#restposten-anfrage-form input[type="text"]:focus,
#restposten-anfrage-form input[type="email"]:focus,
#restposten-anfrage-form input[type="tel"]:focus {
border-color: #0077cc;
box-shadow: 0 0 6px rgba(0,119,204,0.3);
}
#restposten-anfrage-form button[type="submit"] {
align-self: flex-start;
padding: 0.7rem 1.4rem;
font-size: 1rem;
font-weight: 600;
color: #fff;
background: #0077cc;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s ease-in-out;
}
#restposten-anfrage-form button[type="submit"]:hover {
background: #005fa3;
}
.search-container {
display: block;
text-align: center;
margin: 0 auto;
width: min(80vw, 500px);
}
#search {
font-size: 1rem;
width: calc(100% - 50px);
padding: 8px;
margin: 0 -20px 20px auto;
display: inline-block;
border: 1px solid #333;
border-radius: 4px;
box-sizing: border-box;
}
#clearSearch {
z-index: 10;
font-size: 1.2rem;
color: #fff;
background-color: #e00;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
cursor: pointer;
display: none;
}
#search:not(:placeholder-shown) + #clearSearch {
display: inline-block;
}
#clearButton {
background-color: #87bEcA;
color: white;
}
#clearButton:hover {
background-color: #00BFFF;
color: #000000;
}
#restposten-filter {
width: 100%;
display: block;
padding: 1rem;
margin: 1rem 0;
background: linear-gradient(
135deg,
#f8f9fa,
#e9ecef
);
border: 1px solid #ddd;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
box-sizing:border-box;
}
.menge-input {
width: 80%;
text-align: center;
font-size: 1rem;
background-color: #f0f0f0;
border: 1px solid #f0f0f0;
}
button {
font-size: 1rem;
padding: 10px 20px;
border: none;
cursor: pointer;
text-align: center;
display: inline-block;
margin: 10px auto;
}
button:hover {
opacity: 0.9;
}
#sendeButton,
.anfrageButton {
cursor: pointer;
background-color: #4CAF50;
color: white;
}
#sendeButton:hover,
.anfrageButton:hover {
background-color: #45d049;
color: #000000;
}
.mh-floating-field{
position:relative;
}
.mh-floating-label{
display:none;
margin-top:4px;
font-size:.8rem;
color:#666;
padding-left:4px;
}
.mh-floating-field.active
.mh-floating-label{
display:block;
height:20px;margin-bottom:-20px;
}
.info {
width: min(80vw, 500px);
margin: 0 auto;
text-align: center;
}
.info p {
margin-left: 10%;
text-align: left;
display: block;
}
.info p:before {
content: "!";
color: #cc0000;
margin-right: 5px;
font-size: 3.5rem;
float: left;
font-weight: bold;
margin-top: -.5rem;
}
#restposten {
width: min(1200px,100%);
margin: 0 auto;
}
.external-link {
color: #000066;
background: none;
font-weight: bold;
}
.external-link:hover {
background: #000066;
color: #ffffff;
}
#warenkorb-modal{
display:none;
margin:20px 0;
padding:20px;
background:#fff;
border:1px solid #ddd;
border-radius:10px;
box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.warenkorb-empty{
text-align:center;
font-size:1rem;
color:#666;
}
.warenkorb-tabelle input[type="number"]{
width:90px;
text-align:center;
}
#show-anfrage-form{
background:#28a745;
color:#fff;
border-radius:8px;
}
#show-anfrage-form:hover{
background:#218838;
}
.remove-cart-item{
background:#cc0000;
color:#fff;
border-radius:6px;
padding:5px 10px;
}
.remove-cart-item:hover{
background:#990000;
}
#clear-cart{
background:#444;
color:#fff;
border-radius:6px;
padding:5px 10px;
}
#clear-cart:hover{
background:#222;
}
.anfrage-hinweis{
margin:20px 0;
padding:15px 20px;
background:#fff8e1;
border:1px solid #f0d97a;
border-radius:8px;
line-height:1.5;
color:#5f4b00;
}
#restposten-loading{
display:none;
text-align:center;
margin:20px 0;
}
.restposten-spinner{
width:40px;
height:40px;
border:4px solid #ddd;
border-top:4px solid #0077cc;
border-radius:50%;
animation:mhspin 1s linear infinite;
margin:0 auto 10px auto;
}
@keyframes mhspin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
.restposten-pagination{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin:20px 0;
}
.restposten-pagination button{
background:#0077cc;
color:#fff;
border-radius:6px;
}
.restposten-pagination select{
padding:8px 12px;
font-size:1rem;
}
.restposten-flyer{
position:fixed;
z-index:999999;
background:#0077cc;
color:#fff;
padding:8px 12px;
border-radius:6px;
font-size:.85rem;
font-weight:bold;
pointer-events:none;
transition:
left .7s ease,
top .7s ease,
transform .7s ease,
opacity .7s ease;
box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.cart-bounce{
animation:cartBounce .45s ease;
}
@keyframes cartBounce{
0%{
transform:scale(1);
}
40%{
transform:scale(1.3);
}
100%{
transform:scale(1);
}
}
@media (max-width: 600px) {
table th,
table td {
padding: 6px;
}
button {
padding: 8px 16px;
}
}
@media screen and (max-width: 800px) {
table,
thead,
tbody,
th,
td,
tr {
display:block;
width:100%;
box-sizing:border-box;
}
thead{
display:none;
}
tr{
margin-bottom:20px;
border:1px solid #ddd;
background:#fff;
border-radius:10px;
overflow:hidden;
}
td{
display:block !important;
position:relative !important;
width:100% !important;
box-sizing:border-box;
padding-top:12px !important;
padding-right:12px !important;
padding-bottom:12px !important;
padding-left:170px !important;
min-height:48px;
border-bottom:1px solid #eee;
text-align:right !important;
word-break:break-word;
overflow-wrap:break-word;
}
td.center{text-align:right !important;}
td:last-child{
border-bottom:none;
}
td input,
td .menge-input{
margin-left:auto;
text-align:center;
}
td:before{
position:absolute !important;
left:12px;
top:12px;
width:145px;
font-weight:bold;
color:#666;
line-height:1.3;
white-space:normal;
text-align:left;
display:block;
} .restposten-tabelle:not(.warenkorb-tabelle)
td:nth-of-type(2):before{
content:"Herstellernummer";
}
.restposten-tabelle:not(.warenkorb-tabelle)
td:nth-of-type(3):before{
content:"Artikelname";
}
.restposten-tabelle:not(.warenkorb-tabelle)
td:nth-of-type(4):before{
content:"Hersteller";
}
.restposten-tabelle:not(.warenkorb-tabelle)
td:nth-of-type(5):before{
content:"Verfügbar";
}
.restposten-tabelle:not(.warenkorb-tabelle)
td:nth-of-type(6):before{
content:"Gebraucht";
}
.restposten-tabelle:not(.warenkorb-tabelle)
td:nth-of-type(7):before{
content:"Menge";
} .warenkorb-tabelle
td:nth-of-type(1):before{
content:"Herstellernummer";
}
.warenkorb-tabelle
td:nth-of-type(2):before{
content:"Artikelname";
}
.warenkorb-tabelle
td:nth-of-type(3):before{
content:"Hersteller";
}
.warenkorb-tabelle
td:nth-of-type(4):before{
content:"Anzahl";
}
.warenkorb-tabelle
td:nth-of-type(5):before{
content:"";
}
.menge-input{
width:100px;
max-width:100%;
}
.haken-cell{
padding-left:0 0 0 7px;
min-height:auto;
}
.haken-cell:before{
display:none;
}
} .mh-artikel-layout{
display:grid;
grid-template-columns:1.2fr 420px;
gap:50px;
align-items:start;
margin:40px 0;
}
.mh-artikel-text h1{
font-size:clamp(2rem,4vw,3rem);
line-height:1.1;
margin:0 0 30px;
text-align:left;
}
.mh-grid{
display:grid;
grid-template-columns:220px 1fr;
gap:14px 20px;
margin-bottom:35px;
}
.mh-grid .label{
font-weight:700;
color:#666;
}
.mh-beschreibung{
line-height:1.7;
font-size:1.05rem;
}
.mh-artikel-bild img{
width:100%;
height:auto;
border-radius:18px;
box-shadow:
0 10px 30px rgba(0,0,0,.08);
}
.mh-placeholder-image{
width:100%;
aspect-ratio:1/1;
border-radius:22px;
background:
linear-gradient(
135deg,
#f8fafc,
#e6edf3
);
border:1px solid #d7e0e7;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:30px;
}
.mh-placeholder-icon{
font-size:5rem;
opacity:.14;
margin-bottom:20px;
}
.mh-placeholder-label{
font-size:.95rem;
font-weight:600;
letter-spacing:.04em;
text-transform:uppercase;
color:#7a8793;
}
.mh-related-articles a{
display:inline-block;
white-space:nowrap;
margin-bottom:1rem;}
.mh-related-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:25px;
}
.mh-related-card{
display:block;
padding:20px;
border-radius:16px;
border:1px solid #dde5eb;
text-decoration:none;
color:inherit;
background:#fff;
transition:.15s;
}
.mh-related-card:hover{
transform:translateY(-3px);
box-shadow:
0 8px 24px rgba(0,0,0,.08);
}
.mh-related-title{
font-weight:700;
margin-bottom:10px;
}
.mh-related-meta{
color:#666;
font-size:.95rem;
}
.mh-related-number{
margin-top:10px;
font-family:monospace;
}
@media(max-width:900px){
.mh-artikel-layout{
grid-template-columns:1fr;
}
.mh-grid{
grid-template-columns:1fr;
}
}
.mh-alle-artikel-wrap a,.mh-related-articles a{
margin-bottom:30px;border-radius:5px;
}
.mh-alle-artikel-wrap a:hover,.mh-related-articles a:hover{
margin-bottom:30px;border-radius:5px;
color:white;
background-color: var(--secondarybtnhovercolor);
border-color: var(--secondarybtnhovercolor);
} .artikel-bild-link{
display:inline-block;
float:right;text-align:center;
width:32px;
height:24px;
min-width:24px;
color:#ffffff !important;
text-decoration:none !important;
font-size:24px;
line-height:24px;
box-shadow:0 1px 4px rgba(0,0,0,.18);
transition:.18s ease;
}
.artikel-bild-link:hover{
background:#1e7e34;
transform:scale(1.08);
} .artikelname-cellx{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.artikelname-text{
flex:1;
min-width:0;
}
.artikel-info-link{
display:inline-block;
float:right;text-align:center;
width:24px;
height:24px;
min-width:24px;
border-radius:50%;
background:#0073aa;
color:#ffffff !important;
text-decoration:none !important;
font-size:14px;
font-weight:700;
font-family:Arial,sans-serif;
line-height:25px;
box-shadow:0 1px 4px rgba(0,0,0,.18);
transition:.18s ease;
}
.artikel-info-link:hover{
background:#005f8d;
transform:scale(1.08);
}
.artikel-info-link:active{
transform:scale(.96);
} .mh-popup-table{
width:100%;
border-collapse:collapse;
margin-top:25px;
}
.mh-popup-table th{
width:240px;
text-align:left;
padding:14px;
background:#f3f5f7;
border-bottom:1px solid #dde3e8;
vertical-align:top;
font-weight:700;
}
.mh-popup-table td{
padding:14px;
border-bottom:1px solid #dde3e8;
vertical-align:top;
}
.mh-popup-image-wrap{
margin-top:35px;
text-align:center;
}
.mh-popup-image{
max-width:100%;
max-height:420px;
border-radius:12px;
box-shadow:0 3px 14px rgba(0,0,0,.12);
background:#ffffff;
}
.mh-popup-close-wrap{
margin-top:35px;
text-align:center;
}
.mh-popup-close-button{
background:#0073aa;
color:#ffffff;
border:none;
padding:14px 28px;
border-radius:10px;
cursor:pointer;
font-size:16px;
font-weight:700;
transition:.18s ease;
}
.mh-popup-close-button:hover{
background:#005f8d;
} .mh-popup-share-wrap{
margin-top:35px;
text-align:center;
}
.mh-popup-share-button{
display:inline-flex;
align-items:center;
gap:10px;
padding:14px 24px;
border-radius:12px;
background:#2b6cb0;
color:#ffffff !important;
text-decoration:none !important;
font-weight:700;
font-size:16px;
box-shadow:0 3px 12px rgba(0,0,0,.18);
transition:.18s ease;
}
.mh-popup-share-button:hover{
background:#1f4f85;
transform:translateY(-1px);
}
.mh-popup-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
margin-bottom:25px;
}
.mh-popup-header h2{
margin:0;
flex:1;
line-height:1.2;
margin-bottom:0;
}
.mh-popup-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
align-items:center;
}
.mh-copy-link-button,
.mh-popup-share-button{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 18px;
border-radius:12px;
background:#2b6cb0;
color:#ffffff !important;
text-decoration:none !important;
font-weight:700;
font-size:14px;
white-space:nowrap;
box-shadow:0 3px 12px rgba(0,0,0,.18);
transition:.18s ease;
}
.mh-copy-link-button:hover,
.mh-popup-share-button:hover{
background:#1f4f85;
transform:translateY(-1px);
}
@media (max-width:700px){
.mh-popup-header{
flex-direction:column;
align-items:flex-start;
}
.mh-copy-link-button:hover,	
.mh-popup-share-button{
width:100%;
justify-content:center;
}
}
.mh-image-wrapper{
position:relative;
width:120px;
height:120px;
}
.mh-admin-image-preview{
max-width:120px;
max-height:100px;
object-fit:cover;
border-radius:8px;
border:1px solid #ccd0d4;
display:block;
}
.mh-delete-image{
position:absolute;
top:-8px;
right:-8px;
width:28px;
height:28px;
border-radius:50%;
border:none;
background:#cc0000;
color:#fff;
font-size:16px;
line-height:28px;
cursor:pointer;
padding:0;
margin:0;
}
.mh-delete-image:hover{
background:#990000;
}
.mh-delete-image-form{
position:absolute;
top:0;
right:0;
margin:0;
} #mh-drop-overlay{
positon:absolute;
width:300px;
height:80px;
display:none;
align-items:center;
justify-content:center;
background:rgba(0,115,170,.92);
color:#fff;
font-size:22px;
font-weight:bold;
border:3px dashed #fff;
border-radius:10px;
cursor:pointer;
z-index:99999999;
}
.mh-upload-link{
cursor:pointer;
text-decoration:none;
font-weight:bold;
}
.mh-upload-link:hover{
text-decoration:underline;
}
.mh-restposten-search-form{
display:block;
text-align:center;
padding:.5rem 1rem 1rem;
}
.mh-restposten-search-form input{
display: block;
width: min(100%,700px);
margin: 0 auto 30px auto;
padding: 16px 20px;
border: 1px solid #d1d5db;
border-radius: 24px !important;
background: linear-gradient(180deg,#ffffff,#f8fafc);
font-size: 1.05rem;
font-weight: 600;
box-shadow: 0 6px 20px rgba(0,0,0,.06);
transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.mh-restposten-search-form button{
padding:10px 20px;
cursor:pointer;
}
@media screen and (max-width:700px){
.mh-popup-table th {
width: 100%;}
.mh-popup-table td{
border-bottom:none;
padding-left:5px !important;
width:100% !important;}
.mh-copy-link-button{width:100%;justify-content: center;}
.artikel-info-link,.artikel-bild-link{float:none;}
}