@charset "utf-8";
/* CSS Document */
:root {
      --container-main: 1340px;
      --top-strip-h: 45px;
      --header-row-h: 175px;
      --breadcrumb-h: 65px;
      --content-spacing: 20px;
      --sidebar-w: 285px;
      --footer-h: 250px;
      --radius: 8px;
      --text-color: #333;
      --link-hover: #41b8b2;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html, body { 
    margin: 0;
    min-height: 100%;
}

	body {
       	margin: 0;
		font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
      	background: #f6f7fb;
		min-width: 100%;
		-ms-text-size-adjust:100%;
      	color: var(--text-color);
      	line-height: 1.5;
    }
	
	/* Main Font */
	body, h1, h2, h3, h4, h5, h6,
	 textarea, select {
		font-size: 14px;
		font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
		-ms-text-size-adjust:100%;
	}

hr{border-top:1px dotted #000;border-bottom:none;border-left:none;border-right:none;height:0;width:100%}
h1{font-size:1.125em; color: #1bbebe}
h2{font-size:1.125em; color: #1bbebe}
h3{font-size:1.125em; color: #1bbebe}
h4{font-size:1.125em; color: #1bbebe}
h5{font-size:1.125em; color: #1bbebe}
h6{font-size:1.125em; color: #1bbebe}

a { color: var(--text-color); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--link-hover); }
img { display: block; max-width: 100%; height: auto; }

.iconbf{color:#1bbebe;font-weight:700}

.wrap { width: var(--container-main); margin-inline: auto; }

.top-strip { height: var(--top-strip-h); background: linear-gradient(90deg,#111,#444); color:#fff; display:flex; align-items:center; }
.top-strip .wrap { display:flex; justify-content:flex-end; align-items:center; height:100%; }

.fehler404{margin:175px;margin-left: 275px;}

header.brand-row { background:#fff; border-bottom:1px solid #e8e9ee; }
.brand-row .wrap { height: var(--header-row-h); display:flex; align-items:center; justify-content:space-between; }
.brand-row .logo { width:225px; height:var(--header-row-h); display:flex; align-items:center; flex:0 0 225px; }
.brand-row .logo img { width:225px; height:auto; object-fit:contain; object-position:left center; }
.brand-row .tiles { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex:1 1 auto; }
.brand-row .tiles a { display:block; width:175px; height:125px; border-radius:6px; overflow:hidden; box-shadow:0 0 0 1px #ececf2 inset; transition:transform .12s ease, box-shadow .12s ease; }
.brand-row .tiles a:hover { transform:translateY(-2px); box-shadow:0 2px 10px rgba(0,0,0,.06); }
.brand-row .tiles img { width:175px; height:125px; object-fit:cover; }

.breadcrumb-row { width:var(--container-main); height:var(--breadcrumb-h); background:#fff; border:1px solid #e1e3ee; border-radius:var(--radius); margin:20px auto; display:flex; align-items:center; padding:0 20px; box-shadow:0 1px 3px rgba(0,0,0,.04); font-size:14px; }
.breadcrumb-row nav a { margin-right:8px; }
.breadcrumb-row nav a::after { content:">"; margin-left:8px; color:#888; }
.breadcrumb-row nav a:last-child::after { content:none; }

main.content { padding-block: var(--content-spacing); }
.content .wrap { display:grid; grid-template-columns: 1fr var(--sidebar-w); gap:20px; align-items:start; }
.card { min-height: 250px; background:#fff; border:1px solid #e8e9ee; border-radius:var(--radius); padding:10px 20px 20px 20px; position:relative; top:-10px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.card {
    overflow: visible !important;
}

footer.site-footer { background:#fff; border-top:1px solid #e8e9ee; padding-block: var(--content-spacing); }
.footer-box { width:var(--container-main); height:var(--footer-h); margin-inline:auto; background:linear-gradient(180deg,#f1f2f8,#e7e9f4); border:1px solid #e1e3ee; border-radius:var(--radius); padding:20px; display:flex; justify-content:space-between; align-items:flex-start; color:var(--text-color); }
.footer-left { display:flex; flex-direction:column; gap:10px; width:45%; }
.footer-links { display:flex; justify-content:flex-start; gap:15px; }
.footer-links ul { list-style:none; margin:0; padding:0; width:45%; }
.footer-links li { margin-bottom:6px; }
.footer-images { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.footer-images h3 { margin:0; font-size:16px; color:var(--text-color); font-weight:600; }
.footer-images .image-row { display:flex; gap:10px; }
.footer-images img { width:150px; height:150px; border-radius:var(--radius); object-fit:cover; }
.footer-credit{ text-align:center; padding:15px 0; font-size:14px; color: var(--text-color); }
.footer-credit a{ color: var(--text-color); text-decoration:none; transition: color .2s ease; }
.footer-credit a:hover{ color: var(--link-hover); }
.copyright { font-size:13px; color:var(--text-color); text-align:left; margin-top: 30px;}

#sitemap-baum li{list-style-type: none;padding:5px}
#sitemap-baum ul{list-style-type:none;margin:0 30px 0 45px;padding:0;border-left:2px dotted #1bbebe}
#sitemap-baum ul li{margin:8px 0 0;padding:0}
#sitemap-baum ul ul{list-style-type:none;border-left:2px dotted #1bbebe;margin:0 0 0 30px;padding:0}
#sitemap-baum ul ul li{margin:0;margin:3px 0 0 0;padding:0;font-size:100%}
#sitemap-baum ul a{margin:0;padding:0 10px;font-size:105%;text-decoration:none;background-color:#fff;border-bottom:1px solid #1bbebe}
#sitemap-baum ul a:visited{background-color:#fff;color:#000;padding-right:15px}
#sitemap-baum ul a:hover,#sitemap-baum ul a:active,#sitemap-baum ul a:focus{background-color:#fff;color:#1bbebe}
#sitemap-baum ul ul a{font-variant:normal;font-weight:400}
#sitemap-baum ul ul a.lev2{font-weight:400}
#sitemap-baum ul span.sm-aktiv{padding-left:10px;font-weight:700}

.messanger{width:183px;height:25px;margin-top:3px;margin-bottom:7px;float:left;font-size:14px}
.messanger-icon-telefon{width:25px;height:25px;margin-bottom:10px;margin-right:10px;float:left;background-image:url(https://static.systemhaus-ehst.de/images/spritesheet.png);background-position:-794px -7px;}
.messanger-icon-email{width:25px;height:25px;margin-bottom:10px;margin-right:10px;float:left;background-image:url(https://static.systemhaus-ehst.de/images/spritesheet.png);background-position:-824px -7px;}
.messanger-icon-whatsapp{width:25px;height:25px;margin-bottom:10px;margin-right:10px;float:left;background-image:url(https://static.systemhaus-ehst.de/images/spritesheet.png);background-position:-734px -37px;}

#online-shop{width: 200px;height: 65px;margin-left: 20px;padding-top: 15px;padding-bottom:10px;}
#online-shop-text{width: 200px;height: 65px;margin-left: 400px;padding-top: 15px;padding-bottom:10px;}


        .section-anchor {
            scroll-margin-top: 80px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
            font-size: 0.95rem;
        }
        th, td {
            border: 1px solid #dddddd;
            padding: 0.5rem 0.6rem;
            vertical-align: top;
        }
        th {
            background-color: #f0f0f0;
            font-weight: 600;
        }
        .small-note {
            font-size: 0.9rem;
            color: #666666;
        }
        @media (prefers-color-scheme: dark) {
            body {
                background-color: #060606;
            }
            .container {
                background-color: #111111;
            }
            p, li, .meta, .small-note {
                color: #e0e0e0;
            }
            h1, h2, h3, h4 {
                color: #ffffff;
            }
            th, td {
                border-color: #444444;
            }
            th {
                background-color: #1f1f1f;
            }
        }
.anfrage-formular{width:925px}
.form-beschriftung{width:150px;height:15px;margin:15px;float:left}
.form-feld{width:225px;height:15px;margin:15px;margin-right:40px;float:left}
.form-mitteilung-titel{width:882px;height:15px;margin:15px;margin-bottom:10px;margin-top:20px;float:left}
.form-mitteilung{width:882px;margin:15px;float:left}
.form-mitteilung-button{width:882px;height:25px;margin:15px;margin-top:0;text-align:center;float:left}
.form-mitteilung-checkbox{width:882px;height:25px;margin:15px;margin-left:12px;margin-bottom:5px;text-align:left;float:left}
.form-mitteilung-hinweis{width:882px;margin:15px;text-align:left;float:left}
.bcc{display:none}

.red{color:#FF0004;font-weight:700}
.green{color:#08ae0c;font-weight:700}

.input-form{margin-top:-5px;padding:5px;width:200px;-webkit-appearance: none;}
.input-form-kl{margin-top:-5px;padding:5px;width:350px;-webkit-appearance: none;}
.input-form2{margin-top:-6px;padding:5px;width:200px;-webkit-appearance: none;}
.input-form3{margin-top:-5px;padding:5px;width:230px;-webkit-appearance: none;}
.input-form3_auswahl{margin-top:-6px;padding:5px;width:243px;-webkit-appearance: none;}
.input-form4{margin-top:-6px;padding:5px;width:228px;-webkit-appearance: none;}
.input-form5{margin-top:-5px;padding:5px;width:216px;-webkit-appearance: none;}
.input-form6{margin-top:-5px;padding:5px;width:100px;-webkit-appearance: none;}
.input-form7{margin-top:-4px;padding:5px;width:216px;-webkit-appearance: none;}
.input-form8{margin-top:-5px;padding:5px;width:175px;-webkit-appearance: none;}
.input-form9{margin-top:-5px;padding:5px;width:165px;-webkit-appearance: none;}
.input-multiform{margin-top:-5px;padding:5px;width:840px;height:125px;font-size: 14px;}
.input-multiform3{margin-top:-5px;padding:5px;width:868px;height:125px;font-size: 14px;}
.input-button{background-color:#1bbebe;color:#FFF;font-size:14px;font-weight:700;margin-top:13px;margin-left:22px;margin-bottom:3px;width:215px;height:32px;-webkit-appearance: none;}


.modell{border:1px solid #999;width:225px;height:35px;margin:10px;text-align:center;padding-top:6px;padding-bottom: 6px;font-size:12px;float:left}
.motor-reihe{height: 25px;width: 990px;color: #1bbebe;font-size:14px;font-weight:700;margin-top: 20px;margin-bottom: 10px;float:left;}
.motor-reihe-titel{height: 25px;width: 990px;color: #1bbebe;font-size:16px;font-weight:700;margin-top: 0px;margin-bottom: 5px;float:left;}

/* ===== PRODUKT-GRID ===== */
.product-grid {
    width: 990px;
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    position: relative;
    overflow: visible !important;
}

/* ===== ITEM ===== */
.product-item {
    position: relative;
    padding: 5px;
    background: #f7f7f7;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: visible !important;
    z-index: 1;
}

/* Beim Hover dieses Item ganz nach oben holen */
.product-item:hover {
    z-index: 9999 !important;
}

/* ===== WRAPPER ===== */
.thumb-wrapper {
    position: relative;
    overflow: visible !important;
}

/* ===== BILD NORMAL ===== */
.product-grid img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    cursor: zoom-in;
    transition: transform 0.25s ease-in-out;
    pointer-events: auto;
    z-index: 1;
}

/* ===== BILD GEZOOMT =====
   — kein Flackern
   — blockiert nicht die Maus
   — skaliert garantiert sauber
*/
.thumb-wrapper:hover img {
    transform: scale(5);
    transform-origin: center center;
    z-index: 9999 !important;
    pointer-events: none !important;
    border: 1px solid #1bbebe;    /* <-- Hier ist dein 1px Rahmen */
}

/* Falls Grid in CARD liegt (bei dir ja der Fall) */
.card {
    overflow: visible !important;
}