/*
Theme Name: MAC-ALU Theme
Theme URI: https://m-page.de/
Author: m-page
Author URI: https://m-page.de/
Description: Woocommerce Theme für www.mac-alu.de
Version: 1.0.0
Text Domain: MAC-ALU Theme
Requires at least: 4.6
Tested up to: 6.0
Requires PHP: 5.6
*/



/* jost-100 - latin */
@font-face {
font-display: swap;
font-family: 'Jost';
font-style: normal;
font-weight: 100;
src: url('/fonts/jost-100.woff2') format('woff2'),
url('/fonts/jost-100.woff') format('woff');
}

/* jost-200 - latin */
@font-face {
font-display: swap;
font-family: 'Jost';
font-style: normal;
font-weight: 200;
src: url('/fonts/jost-200.woff2') format('woff2'),
url('/fonts/jost-200.woff') format('woff');
}

/* jost-300 - latin */
@font-face {
font-display: swap;
font-family: 'Jost';
font-style: normal;
font-weight: 300;
src: url('/fonts/jost-300.woff2') format('woff2'),
url('/fonts/jost-300.woff') format('woff');
}

/* jost-regular - latin */
@font-face {
font-display: swap;
font-family: 'Jost';
font-style: normal;
font-weight: 400;
src: url('/fonts/jost-regular.woff2') format('woff2'),
url('/fonts/jost-regular.woff') format('woff');
}

/* jost-500 - latin */
@font-face {
font-display: swap;
font-family: 'Jost';
font-style: normal;
font-weight: 500;
src: url('/fonts/jost-500.woff2') format('woff2'),
url('/fonts/jost-500.woff') format('woff');
}

/* jost-600 - latin */
@font-face {
font-display: swap;
font-family: 'Jost';
font-style: normal;
font-weight: 600;
src: url('/fonts/jost-600.woff2') format('woff2'),
url('/fonts/jost-600.woff') format('woff');
}

/* jost-700 - latin */
@font-face {
font-display: swap;
font-family: 'Jost';
font-style: normal;
font-weight: 700;
src: url('/fonts/jost-700.woff2') format('woff2'),
url('/fonts/jost-700.woff') format('woff');
}

/* jost-800 - latin */
@font-face {
font-display: swap;
font-family: 'Jost';
font-style: normal;
font-weight: 800;
src: url('/fonts/jost-800.woff2') format('woff2'),
url('/fonts/jost-800.woff') format('woff');
}

/* jost-900 - latin */
@font-face {
font-display: swap;
font-family: 'Jost';
font-style: normal;
font-weight: 900;
src: url('/fonts/jost-900.woff2') format('woff2'),
url('/fonts/jost-900.woff') format('woff');
}







html {scroll-behavior: smooth; font-size: var(--fontsize); font-weight: 300; line-height: 1.3;}

body {color: #2b2b2b; letter-spacing: 1.5px;}
* {margin: 0; padding: 0; list-style-type: none; font-family: 'Jost', Century Gothic,AppleGothic,verdana,tahoma; box-sizing: border-box;}
.tac {text-align: center;}
img {border: 0px; height: auto; hyphens: auto;}

p strong, p b {font-weight: 500;}

@media screen and (max-width : 680px){ .desk_only {display: none !important;} }
@media screen and (min-width : 681px){ .mobile_only {display: none !important;} }
.txtline1 {border-bottom: 2px solid #D2F52A}




/*** INLINE BILDER ***/
:root {
--check1: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODkuOSAxNTUuOSI+PHBhdGggZD0iTTczLDkwLjJMMTc4LjgsMS40YzUuMS00LjMsMTIuMiwyLjQsOCw3LjdMNzMsMTU1LjlMMi45LDU1Yy0zLjYtNS4xLDIuNy0xMS40LDcuOC03LjhMNzMsOTAuMnoiIGZpbGw9IiNjZGQ2MWYiLz48L3N2Zz4=');
--ma-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNTMuMSAxNTMuMSI+PHBhdGggZD0iTTYuNCA2Ni4xdjgwLjVoNTEuOWwxOC4yLTYzLjQgMTguMyA2My40aDUxLjhWNi40SDYuNHY0NC4zIiBmaWxsPSJub25lIiBzdHJva2U9IiNkM2Y2MmIiIHN0cm9rZS13aWR0aD0iMTAiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPjwvc3ZnPg==');
--ico-cart: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNi41LjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDgwIDgwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA4MCA4MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe2Rpc3BsYXk6bm9uZTt9DQoJLnN0MXtkaXNwbGF5OmlubGluZTt9DQoJLnN0MntmaWxsOm5vbmU7c3Ryb2tlOiNGRkZGRkY7c3Ryb2tlLXdpZHRoOjg7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fQ0KCS5zdDN7ZmlsbDpub25lO3N0cm9rZTojRDNGNjJCO3N0cm9rZS13aWR0aDo0O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3Q0e2ZpbGw6bm9uZTtzdHJva2U6I0QzRjYyQjtzdHJva2Utd2lkdGg6NDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQoJLnN0NXtmaWxsOiNEM0Y2MkI7fQ0KPC9zdHlsZT4NCjxnIGlkPSJFYmVuZV8xIiBjbGFzcz0ic3QwIj4NCgk8ZyBjbGFzcz0ic3QxIj4NCgkJPGxpbmUgY2xhc3M9InN0MiIgeDE9Ijc1LjQiIHkxPSI0LjYiIHgyPSI0LjYiIHkyPSI3NS40Ii8+DQoJCTxsaW5lIGNsYXNzPSJzdDIiIHgxPSI0LjYiIHkxPSI0LjYiIHgyPSI3NS40IiB5Mj0iNzUuNCIvPg0KCTwvZz4NCgkNCgkJPGltYWdlIHN0eWxlPSJkaXNwbGF5OmlubGluZTtvdmVyZmxvdzp2aXNpYmxlOyIgd2lkdGg9IjEzMDAiIGhlaWdodD0iMTMwMCIgeGxpbms6aHJlZj0iRUQzOUU5MEIuanBnIiAgdHJhbnNmb3JtPSJtYXRyaXgoMC4xMTUyIDAgMCAwLjExNTIgLTM1LjgzMzMgLTM1LjgzMzMpIj4NCgk8L2ltYWdlPg0KPC9nPg0KPGcgaWQ9IkViZW5lXzIiPg0KCTxwb2x5bGluZSBjbGFzcz0ic3QzIiBwb2ludHM9IjUuNyw1NC45IDUxLjksNTQuOSA2OC4xLDcuMyA3Ny43LDExLjQgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDQiIGQ9Ik03LjYsNDYuNGgzNi45YzEuMSwwLDItMC43LDIuNC0xLjdsOS4xLTI2LjZjMC42LTEuOC0xLTMuNi0yLjgtMy4yTDQuOSwyNS42Yy0xLjMsMC4zLTIuMiwxLjUtMiwyLjhsMi4zLDE1LjkNCgkJQzUuMyw0NS41LDYuNCw0Ni40LDcuNiw0Ni40eiIvPg0KCTxjaXJjbGUgY2xhc3M9InN0NSIgY3g9IjEyLjIiIGN5PSI2NyIgcj0iNi4xIi8+DQoJPGNpcmNsZSBjbGFzcz0ic3Q1IiBjeD0iNDQuOCIgY3k9IjY3IiByPSI2LjEiLz4NCjwvZz4NCjwvc3ZnPg0K');
--navico1: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTIyLjkgMEg5LjFhMi4yMiAyLjIyIDAgMCAwLTIuMiAyLjJ2MjcuNkEyLjIyIDIuMjIgMCAwIDAgOS4xIDMyaDEzLjhhMi4yMiAyLjIyIDAgMCAwIDIuMi0yLjJWMi4yQTIuMjIgMi4yMiAwIDAgMCAyMi45IDB6bS0yLjUgMS40YS42OC42OCAwIDAgMSAuNy43LjY4LjY4IDAgMCAxLS43LjcuNjguNjggMCAwIDEtLjctLjcuNjguNjggMCAwIDEgLjctLjd6bS05LjQuM2g3LjF2LjhIMTF2LS44em04LjMgMjguMmgtNy4xdi0xLjhoNy4ybC0uMSAxLjh6TTguOSAyNlY0LjFIMjNWMjZIOC45eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==');
--navico2: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2ZmZiI+PHBhdGggZD0iTTIyLjcgMTguOWwtMi41LTEuMmMtLjMtLjEtLjYtLjItLjguMnMtMSAxLjItMS4yIDEuNC0uNC4zLS44LjEtMS42LS42LTMtMS44Yy0xLjEtMS0xLjgtMi4yLTIuMS0yLjYtLjItLjQgMC0uNi4yLS44bC42LS42Yy4yLS4yLjItLjQuNC0uNi4xLS4yLjEtLjUgMC0uNi0uMS0uMi0uOC0yLTEuMS0yLjctLjQtLjctLjctLjYtLjktLjZoLS43Yy0uMiAwLS42LjEtMSAuNXMtMS4zIDEuMy0xLjMgMy4xIDEuMyAzLjYgMS41IDMuOCAyLjYgNCA2LjMgNS42Yy45LjQgMS42LjYgMi4xLjguOS4zIDEuNy4yIDIuMy4xLjctLjEgMi4yLS45IDIuNS0xLjhzLjMtMS42LjItMS44YzAtLjItLjMtLjMtLjctLjV6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBkPSJNMTYgM2gwYzMuNSAwIDYuNyAxLjQgOS4yIDMuOEMyNy42IDkuMyAyOSAxMi41IDI5IDE2YzAgNy4yLTUuOCAxMy0xMyAxMy0yLjMgMC00LjYtLjYtNi42LTEuOGgwIDBsLTEuMS0uNi0xLjIuMy0yLjMuNi42LTIuMi4zLTEuMi0uNi0xLjFINXYtLjFjLTEuMy0yLjEtMi00LjUtMi02LjlDMyA4LjggOC44IDMgMTYgM20wLTNDNy4yIDAgMCA3LjIgMCAxNmMwIDMgLjggNiAyLjQgOC41aDBsLTIgNy4yIDcuNC0xLjloMGMyLjUgMS41IDUuMyAyLjIgOC4xIDIuMiA4LjggMCAxNi03LjIgMTYtMTYgMC00LjMtMS43LTguMy00LjctMTEuM0MyNC4zIDEuNyAyMC4zIDAgMTYgMGgweiIvPjwvc3ZnPg==');
--navico3: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTEzLjYgMTYuOGMuNC0uNC44LS44IDEtMS4yLjMtLjUuNC0uOS40LTEuNSAwLS40LS4xLS44LS4yLTEuMS0uMi0uNC0uNC0uNy0uNy0xcy0uNy0uNi0xLjItLjdjLS41LS4yLTEtLjMtMS42LS4zLS45IDAtMS42LjItMi4yLjUtLjYuNC0xIC44LTEuMyAxLjRzLS40IDEuMi0uNCAyaDIuNGMwLS40LjEtLjcuMi0xcy4zLS41LjUtLjZjLjItLjIuNS0uMi44LS4yLjIgMCAuNCAwIC42LjFhMS4zOCAxLjM4IDAgMCAxIC40LjNjLjEuMS4yLjMuMy40LjEuMi4xLjMuMS41IDAgLjMgMCAuNS0uMS43cy0uMi41LS40LjctLjQuNS0uNy44bC00LjQgNC42aDguNVYxOWgtNGwyLTIuMnptMTEuNi44aC0xLjZ2LTYuNWgtMS44TDE2IDE5LjNoNS4xdjEuOGgyLjV2LTEuOGgxLjZ2LTEuN3ptLTMuOC0zdjNoLTIuMmwyLjItM3oiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzAuMiAxOC4zbC4yLTIuMW0tNSAxMC43bDEuNS0xLjVtMS43LTIuNGwuOS0xLjltLjctNy44YTguMyA4LjMgMCAwIDAtLjYtMi4xbS00LTZjLTIuOS0yLjYtNi44LTQtMTAuOS0zLjZDNi44IDIuNC45IDkuNCAxLjYgMTcuM3M3LjcgMTMuOCAxNS43IDEzYzIuMS0uMiA0LjEtLjggNS44LTEuOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPjxwYXRoIGQ9Ik0yOC42IDEuOWwtNy4xIDUgNy45IDMuNy0uOC04Ljd6IiBmaWxsPSIjZmZmIi8+PC9zdmc+');
--navico4: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTI2IDExLjFjMC01LjUtNC41LTEwLTEwLTEwaDAgMGMtNS41IDAtMTAgNC41LTEwIDEwczggMTkuNyAxMCAxOS43aC4yQzE4LjcgMzAgMjYgMTYuNSAyNiAxMS4xek0xNiAxNmE0Ljk1IDQuOTUgMCAwIDEtNS01IDQuOTUgNC45NSAwIDAgMSA1LTUgNC45NSA0Ljk1IDAgMCAxIDUgNWMwIDIuMi0xLjMgNC0zLjMgNC43LS41LjItMS4xLjMtMS43LjMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz48L3N2Zz4=');
--arr_dbl: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMy4yIDI4LjMiIGZpbGw9IiNkM2Y2MmIiPjxwYXRoIGQ9Ik0xOSAwbC0yLjggMi44IDExLjMgMTEuMy0xMS4zIDExLjQgMi44IDIuOCAxNC4yLTE0LjJ6TTIuOCAwTDAgMi44bDExLjMgMTEuM0wwIDI1LjVsMi44IDIuOEwxNyAxNC4xeiIvPjwvc3ZnPg==');
--ar1: 88/160;
--close: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjggMTI4Ij48cGF0aCBkPSJNODguOTU1IDY0bDM1LjA2NS0zNS4wNjVhMy4zNSAzLjM1IDAgMCAwIDAtNC43MzRMMTAzLjggMy45ODFhMy4zNSAzLjM1IDAgMCAwLTQuNzM0IDBMNjQgMzkuMDQ1IDI4LjkzNSAzLjk4YTMuMzUgMy4zNSAwIDAgMC00LjczNCAwTDMuOTggMjQuMjAxYTMuMzUgMy4zNSAwIDAgMCAwIDQuNzM0TDM5LjA0NSA2NCAzLjk4IDk5LjA2NWEzLjM1IDMuMzUgMCAwIDAgMCA0LjczNGwyMC4yMiAyMC4yMmEzLjM1IDMuMzUgMCAwIDAgNC43MzQgMEw2NCA4OC45NTVsMzUuMDY1IDM1LjA2NWEzLjM1IDMuMzUgMCAwIDAgNC43MzQgMGwyMC4yMi0yMC4yMmEzLjM1IDMuMzUgMCAwIDAgMC00LjczNEw4OC45NTUgNjR6IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iNC45NTEiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPjwvc3ZnPg==');

}
/***********/



.wrap {width: 100%; margin: 0 auto; max-width: calc(var(--maxsize) + 32px); padding: 0 16px;}

p {margin: 32px 0;}

.tac {text-align: center;}

a {text-decoration: none; color: #85a200; transition: color 0.3s;}
a:hover {color: #2b2b2b;}

::selection {color: #000; background: #d3f62b;}

.spacer {margin: 128px 0;}
@media screen and (max-width : 1200px){ .spacer {margin: 64px 0;} }
.spacer-xs {margin: 64px 0;}
@media screen and (max-width : 1200px){ .spacer-xs {margin: 32px 0;} }
.spacer-xxs {margin: 32px 0;}
@media screen and (max-width : 1200px){ .spacer-xxs {margin: 16px 0;} }


/*** FONT SCALES ***/
:root {
--fontsize: clamp(14px, calc(1.25vw + 1.5px), 20px);
--ratio: 1.4;
}

/*
@media screen and (min-width : 1201px){ :root {--ratio: 1.618;} }
@media screen and (max-width : 1200px){ :root {--ratio: 1.5;} }
@media screen and (max-width : 900px){ :root {--ratio: 1.14;} }
@media screen and (max-width : 480px){ :root {--ratio: 1.333;} }
*/


.fs-xl4 {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))) !important;}
.fs-xl3 {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio))) !important;}
.fs-xl2 {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio))) !important;}
.fs-xl1 {font-size: calc(var(--fontsize) * (var(--ratio)));}
.fs1 {font-size: var(--fontsize) !important;}
.fs-xs1 {font-size: calc(var(--fontsize) / (var(--ratio))) !important;}
.fs-xs2 {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio))) !important;}
.fs-xs3 {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio))) !important;}
.fs-xs4 {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))) !important;}
:root {
	--fs-xl4: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));
	--fs-xl3: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio)));
	--fs-xl2: calc(var(--fontsize) * (var(--ratio) * var(--ratio)));
	--fs-xl1: calc(var(--fontsize) * (var(--ratio)));
	--fs1: var(--fontsize);
	--fs-xs1: calc(var(--fontsize) / (var(--ratio)));
	--fs-xs2: calc(var(--fontsize) / (var(--ratio) * var(--ratio)));
	--fs-xs3: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio)));
	--fs-xs4: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));
}
/***********/



/*** EINHEITS-ABSTAND ***/
:root {--mg: 40px;}
@media screen and (max-width : 480px){ :root {--mg: 20px;} }

:root {
--maxsize: 1600px;
--mg025: calc(var(--mg) * 0.25);
--mg05: calc(var(--mg) * 0.5);
--mg1-25: calc(var(--mg) * 1.25);
--mg1-5: calc(var(--mg) * 1.5);
--mg1-75: calc(var(--mg) * 1.75);
--mg2: calc(var(--mg) * 2);
--mg2-5: calc(var(--mg) * 2.5);
--mg3: calc(var(--mg) * 3);
--mg4: calc(var(--mg) * 4);
}
/***********/






/*** ÜBERSCHRIFTEN ***/
.title1 {display: block; margin: 16px 0; color: #2b2b2b; font-size: var(--fs-xl2); line-height: 1.4; font-weight: 700; hyphens: auto;}
.title1:before {content:""; display: inline-block; width: var(--fs-xs1); height: calc(var(--fontsize) * 1.4); background: linear-gradient(to bottom, #d3f62b 0%,#c3e61d 100%); clip-path: polygon(0 0, 50% 0, 100% 100%, 0 100%); margin-right: 4px;}
.title1 .line2 {display: block; font-size: var(--fs-xl1); color: #767676; font-weight: 300;}

@media screen and (max-width : 380px){h1,h2,h3,h4,h5,p,li {hyphens: auto} }

/***********/








/*** NAVIGATION ***/
#navspace{height: 100px}
/*DESKTOP*/
#desktop {position: fixed; top: 0px; left: 50%; transform: translateX(-50%); z-index: 100; width: 100%; max-width: calc(var(--maxsize) + 160px); height: 100px; filter: drop-shadow(0 0 10px rgba(0,0,0, 0.3));}
#desktop .inner {width: calc(100% - 160px); max-width: var(--maxsize); margin: 0 80px;}
#desktop .bg {position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #2b2b2b 0%,#3b3b3b 50%,#2b2b2b 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 24px 100%);}
#desktop .bg > div {background: rgba(0,0,0, 0.2); height: 40px;}


.nav_row1 {display: flex; justify-content: space-between;}
.nav_row1 > div:nth-of-type(1) {display: flex; height: 40px;}
.nav_row1 > div:nth-of-type(2) {display: flex; align-items: center; gap: 32px; height: 40px;}

.nav_row2 {display: flex; justify-content: flex-end; padding-left: calc(120px + 24px);}

#desktop .logo {display: block; width: 120px; height: 170px; background: url(/img/logo.webp) center no-repeat; background-size: 100%;}

/*3 Argumente*/
.toparg {display: flex; gap: 24px; color: #FFF; margin: 0 24px;}
.toparg li {line-height: 40px; font-size: 14px; white-space: nowrap;}
.toparg li:before {content:""; vertical-align: bottom; display: inline-block; width: 20px; height: 40px; background: var(--check1) center no-repeat; background-size: 16px;}

/*Cart Icon*/
#desktop .cart_nav {display: inline-block; width: 32px; height: 32px; background: var(--ico-cart) center no-repeat; background-size: 24px; position: relative;}
#desktop .cart_nav span {position: absolute; top: -1px; left: -2px; background: #FFF; border-radius: 10px; color: #2b2b2b; font-size: var(--fs-xs3); font-weight: 500; padding: 1px 2px}

/*Menü obere Reihe*/
.smallnav {display: flex; gap: 24px; align-self: flex-end; /*margin: 0 24px;*/}
.smallnav a {display: block; line-height: 40px; text-transform: uppercase; color: #FFF; font-size: 14px; white-space: nowrap;}
.smallnav a:hover {color: #d3f62b;}

/*Menü untere Reihe*/
.mainnav {display: flex; align-items: center; gap: 24px;}
.mainnav a {display: block; font-size: 14px; line-height: 60px; font-weight: 500; text-transform: uppercase; color: #FFF; transition: all 0.4s;}
.mainnav a:hover {text-shadow: 0 0 10px rgba(255,255,255, .7);}
.mainnav li {position: relative; overflow: hidden;}
.mainnav li > div {width: 40px; height: 5px; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); filter: drop-shadow(0 0 4px #d3f62b); transition: bottom 0.4s;}
.mainnav li > div:after {content:""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #d3f62b; clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 100%, 0 100%);}
.mainnav li:hover > div {bottom: 0px;}
.mainnav > div {width: 1px; height: 20px; background: rgba(255,255,255, .2);}

/*Anfragebutton*/
.anfragebutton {display: flex; align-items: center; gap: 8px; padding: 8px 32px 8px 16px; background: linear-gradient(to right, #1b1b1b, #2b2b2b); color: #d3f62b; font-weight: 500; font-size: var(--fs-xs1); text-transform: uppercase; position: absolute; right: 64px; letter-spacing: 1px; clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); transition: text-shadow 0.4s;}
.anfragebutton:hover {text-shadow: 0 0 10px #d3f62b99; color: #d3f62b;}
.anfragebutton > div {width: 8px; height: 8px; background: #FFF; clip-path: polygon(0 0, 100% 50%, 0 100%);}



@media screen and (max-width : 1200px){
	#desktop .inner {width: calc(100% - 80px); margin: 0 40px;}
	#desktop .logo {width: 100px; height: 141px;}
	.nav_row2 {padding-left: calc(100px + 24px);}
	.toparg li, .smallnav a, .mainnav a {font-size: 12px; letter-spacing: 1px;}

}
@media screen and (max-width : 1100px){
	#desktop {display: none;}
	#navspace{height: 60px}
}


/*MOBILE*/
@media screen and (min-width : 1101px){ #mobile, .mobilemenu {display: none !important;} }
#mobile {position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 60px; background: linear-gradient(to right, #2b2b2b 0%,#3b3b3b 50%,#2b2b2b 100%); display: flex; justify-content: space-between; filter: drop-shadow(0 0 10px rgba(0,0,0, 0.3));}
#mobile > div:nth-of-type(1) {height: 60px; padding: 0 0 0 16px; background: rgba(0,0,0, 0.3); display: flex; gap: 16px; padding-right: 32px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, calc(100% - 16px) 200%, 0 200%);}
#mobile > div:nth-of-type(2) {padding: 0 16px 0 0; display: flex; justify-content: flex-end; gap: 16px; align-items: center;}

#mobile .logo {display: block; width: 55px; height: 78px; background: url(/img/logo.webp) center no-repeat; background-size: 100%;}

/*Menü 3 Icons*/
.iconnav {display: flex; gap: 16px;}
.iconnav a {display: block; width: 24px; height: 60px;}
.nicon1 {display: block; width: 24px; background: var(--navico1) center no-repeat; background-size: 24px;}
.nicon2 {display: block; width: 24px; background: var(--navico2) center no-repeat; background-size: 24px;}
.nicon3 {display: block; width: 24px; height: 100%; background: var(--navico3) center no-repeat; background-size: 24px;}

/*Cart Icon*/
#mobile .cart_nav {width: 32px; height: 32px; background: var(--ico-cart) center no-repeat; background-size: 27px; position: relative;}
#mobile .cart_nav span {position: absolute; top: -2px; left: -2px; background: #FFF; border-radius: 10px; color: #2b2b2b; font-size: var(--fs-xs2); font-weight: 500; padding: 1px 2px}

/*Hamburger Icon*/
#mobile button {width: 32px; height: 25px; border: none; background: none; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;}
#mobile button > div {width: 100%; height: 3px; background: #FFF; transition: all .5s;}
#mobile button > div:nth-of-type(1) {clip-path: polygon(3px 0, 100% 0, 100% 100%, 0 100%);}
#mobile button > div:nth-of-type(3) {clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 0 100%);}
#mobile button.active > div:nth-of-type(1) {transform: rotateY(180deg);}
#mobile button.active > div:nth-of-type(2) {background: #d3f62b;}
#mobile button.active > div:nth-of-type(3) {transform: rotateY(180deg);}

/*Menü*/
.mobilemenu {position: fixed; z-index: 95; width: 100%; height: calc(100% - 60px); top: 60px; transform: translate(0, -100%); left: 0; background: #4b4b4bEE; backdrop-filter: blur(10px);; transition: transform 0.4s; transition-timing-function: cubic-bezier(.55,.06,.68,.19); overflow-y: auto}
.mobilemenu.active {transform: translate(0, 0);}

/*Shop Kategorien*/
.maincats {margin: 64px 16px 32px 16px; display: flex; flex-direction: column; gap: 16px;}
.maincats a {display: block; font-size: 22px; color: #FFF;}
.maincats a:hover {color: #d3f62b;}

/*Sub Nav-Menü*/
.mob_submenu {margin: 32px 16px 64px 16px; display: flex; flex-direction: column; gap: 16px;}
.mob_submenu a {display: block; font-size: 16px; color: #FFF;}
.mob_submenu a:hover {color: #d3f62b;}

.mobilemenu hr {margin: 16px; height: 1px; background: rgba(0,0,0, 0.2); box-shadow: 0 1px 0 0 rgba(255,255,255, .1); border: none;}
/***********/






/*** HERO 01 ***/
#hero01 {aspect-ratio: 16 / 6.7; width: 100%; background: url(/img/hero01.webp) center no-repeat; background-size: cover !important; margin: 32px 0; border-radius: 8px; overflow: hidden; box-shadow: 0 28px 28px rgba(0,0,0, 0.2); position: relative;}

/*Grüne Ecken*/
#hero01:before {content:""; display: block; width: 88px; aspect-ratio: var(--ar1); background: linear-gradient(45deg, #d3f62b 0%,#c3e61d 100%); position: absolute; left: 0; bottom: 0; clip-path: polygon(0 0, 100% 75%, 100% 100%, 0 100%);}
#hero01:after {content:""; display: block; width: 88px; aspect-ratio: var(--ar1); background: linear-gradient(45deg, #d3f62b 0%,#c3e61d 100%); position: absolute; right: 0; top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 25%);}

#hero01 .txt {margin: auto; max-width: 740px; width: 100%; display: flex; gap: 16px; flex-direction: column; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#hero01 .t1 {display: block; font-size: var(--fs-xl4); font-weight: 500; color: #FFF; text-align: center;}
#hero01 .t1 span {color: #d3f62b}
#hero01 .t2 {display: block; font-size: var(--fs-xl1); font-weight: 400; color: #FFF; text-align: center;}

/*Buttons*/
#hero01 .buttons .button {width: 50%;}

/*Responsive Einstellungen*/
@media screen and (max-width : 1300px){
	#hero01:before, #hero01:after {width: 64px;}
	#hero01 .t1 {line-height: 1.3;}
	#hero01 .t2 {display: block; font-weight: 400; color: #FFF; text-align: center;}
	
}

@media screen and (max-width : 900px){
	#hero01:before, #hero01:after {width: 32px;}
	#hero01 {aspect-ratio: unset;}
	#hero01 .txt {position: relative; left: 0; top: 0; transform: translate(0, 0); padding: 64px;}
	#hero01 .buttons {display: flex; flex-direction: column; gap: 16px;}
	#hero01 .buttons .button {display: block; width: fit-content; margin: auto;}
}
@media screen and (max-width : 768px){
	#hero01 {background: url(/img/hero01-800.webp) center no-repeat;}
	#hero01 .txt {padding: 32px; max-width: 620px;}
	#hero01 .t1 {font-size: var(--fs-xl2);}
	#hero01 .t2 {font-size: var(--fontsize);}
}
@media screen and (max-width : 360px){
	#hero01 .t1 {font-size: var(--fs-xl1);}
	#hero01 .t2 {font-size: var(--fs-xs1);}
}
/***********/






/*** KATEGORIEN ÜBERSICHT ***/
.cats_main ul.products {margin: 16px 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 32px;}
.cats_main .card {aspect-ratio: 21 / 9.5; border-radius: 8px; box-shadow: 0 0 0 0 #d3f62b, 0 28px 28px rgba(0,0,0, 0.1), 0 5px 0 0 #3b3b3b; transition: all 0.4s; overflow: hidden; position: relative;}
.cats_main .card:hover {box-shadow: 0 5px 0 0 #d3f62b, 0 28px 28px rgba(0,0,0, 0.2), 0 0 0 0 #3b3b3b;}

/*Grüne Ecke*/
.cats_main .card:before {content:""; display: block; width: 64px; aspect-ratio: var(--ar1); background: linear-gradient(to bottom, #c3e61d 0%,#d3f62b 33%,#ffffff 66%); background-size: 300% 300%; background-position: bottom; position: absolute; z-index: 5; right: 0; top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 25%); transition: all 0.4s;}
.cats_main .card:hover:before {background-position: top;}

/*Bild*/
.cats_main .card img {display: block; object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%; transition: all 0.8s;}
.cats_main .card img.small {display: none;}
.cats_main .card:hover img {transform: scale(1.02, 1.02)}
@media screen and (max-width : 768px){
	.cats_main .card img.full {display: none;}
	.cats_main .card img.small {display: block;}
}

/*Titel*/
.cats_main .ttl {position: absolute; z-index: 5; width: fit-content; left: 16px; bottom: 16px; background: #FFFFFF88; backdrop-filter: blur(2px); font-size: var(--fs1); line-height: 1; font-weight: 700; text-transform: uppercase; color: #000; padding: 16px 64px 16px 24px; border-radius: 8px 0 0 8px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); transition: background 0.4s;}
.cats_main .card:hover .ttl {background: #d3f62bAA;}

@media screen and (min-width : 769px) and (max-width : 1200px) {
	.cats_main .card:before {width: 48px;}
	.cats_main .ttl {left: 8px; bottom: 8px; font-size: var(--fs1); padding: 12px 48px 12px 18px;}
}

@media screen and (max-width : 768px){
	.cats_main ul.products {grid-template-columns: repeat(1,1fr); gap: 32px;}
}

@media screen and (max-width : 480px) {
	.cats_main .card:before {width: 32px;}
	.cats_main .ttl {left: 8px; bottom: 8px; font-size: var(--fs1); padding: 8px 24px 8px 8px;}
}
/***********/






/*** ABSCHNITT VOLLE BREITE MIT BILD ***/
.full_half {display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; margin: 16px 0;}

/*Hälfte mit Bildern*/
.full_half .img {position: relative;}
.full_half .img img {display: block; object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%;}

/*Clip Bilder*/
.full_half .img.left.clip:before {content:""; display: block; height: 100%; aspect-ratio: 1 / 4.4; background: #FFF; position: absolute; z-index: 5; bottom: 0px; left: 0px; clip-path: polygon(-5% 0, 100% 0, 0 105%)}
.full_half .img.left.clip:after {content:""; display: block; height: 100%; aspect-ratio: 1 / 4.4; background: #FFF; position: absolute; z-index: 5; top: 0px; right: 0px; clip-path: polygon(100% 0, 105% 0, 105% 105%, 0 105%, 0 100%)}

.full_half .img.right.clip:before {content:""; display: block; height: 100%; aspect-ratio: 1 / 4.4; background: #FFF; position: absolute; z-index: 5; bottom: 0px; left: 0px; clip-path: polygon(-5% 0, 0 0, 100% 100%, -5% 100%)}
.full_half .img.right.clip:after {content:""; display: block; height: 100%; aspect-ratio: 1 / 4.4; background: #FFF; position: absolute; z-index: 5; top: 0px; right: 0px; clip-path: polygon(0 0, 105% 0, 105% 105%)}
@media screen and (min-width : 1201px){
	.full_half .img.left.clip:before {display: none;}
	.full_half .img.right.clip:after {display: none;}
}

/*Hälfte mit Text*/
.full_half .txt {display: flex; align-items: center;}
.full_half .txt > div {max-width: calc((var(--maxsize) / 2) );}
.full_half .txt.right > div {padding-right: 16px;}
.full_half .txt.left > div {padding-left: 16px;}
.full_half .txt.left {justify-content: flex-end;}
.full_half .txt *:first-child {margin-top: 0;}
.full_half .txt *:last-child {margin-bottom: 0;}

@media screen and (max-width : 1200px){
	.full_half {grid-template-columns: repeat(1,1fr); margin: 64px 16px;}
	.full_half .img {order: 1; max-width: 900px; margin: auto;}
	.full_half .txt {order: 2;}
	.full_half .txt > div {max-width: 100%; padding: 0 !important}
}
/***********/






/*** TXT + BILD BOX ***/
.txt_pic {display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; margin: 16px 0;}

.txt_pic .txt {display: flex; align-items: center;}
.txt_pic .txt *:first-child {margin-top: 0;}
.txt_pic .txt *:last-child {margin-bottom: 0;}

.txt_pic .img {display: flex; align-items: center;}
.txt_pic .img img {display: block; width: 100%;}

@media screen and (max-width : 1200px){
	.txt_pic {grid-template-columns: repeat(1,1fr); margin: 64px 0;}
	.txt_pic .img {order: 1;}
	.txt_pic .txt {order: 2;}
	.txt_pic .img img {max-width: 900px; margin: auto;}
}
/***********/


/*** TXT + BILD BOX DOPPELT ***/
.txt_pic_dbl {display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; margin: 16px 0;}
.txt_pic_dbl > div {display: flex; gap: 16px;}

.txt_pic_dbl > div .img {width: 25%; border-radius: 8px; overflow: hidden;}
.txt_pic_dbl > div .img img {display: block; object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%;}

.txt_pic_dbl > div .txt {width: 75%; font-size: var(--fs-xs1);}
.txt_pic_dbl > div .txt p {margin: 16px 0;}
.txt_pic_dbl > div .txt *:first-child {margin-top: 0;}
.txt_pic_dbl > div .txt *:last-child {margin-bottom: 0;}
@media screen and (max-width : 1000px){
	.txt_pic_dbl {grid-template-columns: repeat(1,1fr);}
}
@media screen and (max-width : 480px){
	.txt_pic_dbl > div {flex-direction: column;}
	.txt_pic_dbl > div .img {width: 100%}
	.txt_pic_dbl > div .txt {width: 100%}
}
/***********/








/*** PRODUKTAUFLISTUNG MIT DETAILS ***/
.articles_big ul.products {display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; margin: 16px 0;}
.articles_big .card { border-radius: 8px; box-shadow: 0 0 0 0 #d3f62b, 0 28px 28px rgba(0,0,0, 0.1), 0 5px 0 0 #3b3b3b; transition: all 0.4s; overflow: hidden; position: relative; aspect-ratio: 3 / 4;}
.articles_big .card:hover {box-shadow: 0 5px 0 0 #d3f62b, 0 28px 28px rgba(0,0,0, 0.2), 0 0 0 0 #3b3b3b;}

/*Grüne Ecke*/
.articles_big .card:before {content:""; display: block; width: 48px; height: 96px; background: linear-gradient(to bottom, #c3e61d 0%,#d3f62b 33%,#ffffff 66%); background-size: 300% 300%; background-position: bottom; position: absolute; z-index: 5; right: 0; top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%); transition: all 0.4s;}
.articles_big .card:hover:before {background-position: top;}

/*Bild*/
.articles_big .card img {display: block; position: absolute; object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%; transition: all 0.8s;}
.articles_big .card:hover img {transform: scale(1.02, 1.02)}

/*Beschreibung*/
.articles_big .desc {position: relative; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.5) 100%); padding: 16px; display: flex; gap: 16px; flex-direction: column; justify-content: space-between;}
.articles_big .desc .ttl {font-size: var(--fs-xl1); font-weight: 600; color: #FFF; text-transform: uppercase; padding-right: 48px; hyphens: auto;}
.articles_big .desc .details {color: #FFF;}
.articles_big .desc .buttons {text-align: center;}
.articles_big .desc .buttons .button {font-size: var(--fs-xs1);}
.articles_big .desc li {font-size: var(--fs-xs1); text-transform: uppercase; margin: 16px 0;}
.articles_big .desc li:before {content:""; vertical-align: bottom; display: inline-block; width: 20px; height: 20px; background: var(--check1) center no-repeat; background-size: 16px; margin-right: 8px; position: relative; top: -2px;}

.articles_big .vars {display: flex; flex-direction: column; gap: 8px;}
.articles_big .var {text-shadow: 1px 1px 3px rgba(0,0,0, .5); font-size: var(--fs-xs1);}
.articles_big .var strong {font-weight: 800;}

/*Preise*/
.articles_big .price {width: fit-content; border-radius: 8px; margin: 0 auto 32px auto; overflow: hidden; padding: 8px 16px; background: #d3f62b; color: #3b3b3b; font-weight: 500;}

.articles_big .price_disc {width: fit-content; border-radius: 8px; margin: 0 auto 32px auto; overflow: hidden;}
.articles_big .price_disc span {display: block; text-align: center;}
.articles_big .price_disc .old {padding: 4px 8px; background: #FFF; font-weight: 500; color: #ca4a4a; font-size: var(--fs-xs1); text-decoration: line-through;}
.articles_big .price_disc .new {padding: 8px 16px; background: #d3f62b; font-weight: 800; color: #3b3b3b;}


@media screen and (max-width : 1200px){
	.articles_big ul.products {grid-template-columns: repeat(2,1fr);}
	.articles_big .desc li {font-size: var(--fs1);}
	.articles_big .desc .buttons .button {font-size: var(--fs1);}
}


@media screen and (max-width : 680px){
	.articles_big ul.products {grid-template-columns: repeat(1,1fr);}
	.articles_big .var {font-size: var(--fs1);}
}
/***********/







/*** KONTAKT LEISTE ***/
.contactbar {background: url(/img/kontaktleiste.webp) center no-repeat; background-size: cover !important; padding: 96px 0;}
.contactbar .wrap {display: grid; grid-template-columns: repeat(2,1fr); gap: 32px;}
.contactbar .wrap > div {text-align: center; color: #FFF; display: grid; justify-content: center; align-items: center;}
.contactbar .t1 {display: block; font-size: var(--fs-xl2); font-weight: 600; text-transform: uppercase; margin-bottom: 16px;}
.contactbar .t1 span {color: #d3f62b}

.contactbar .t2 {display: block; font-size: var(--fs1);}

@media screen and (max-width : 900px){
	.contactbar .wrap {grid-template-columns: repeat(1,1fr);}
	.contactbar {background: url(/img/kontaktleiste-1100.webp) center no-repeat;}
}
/***********/







/*** XBOX ***/
.xbox {display: flex; gap: 32px; position: relative; filter: drop-shadow(0 28px 28px rgba(0,0,0, 0.2)); color: #FFF;}
.xbox > div:nth-of-type(1) {width: 60%; border-radius: 8px 0 0 8px; position: relative; display: flex; justify-content: flex-start; align-items: stretch;}
.xbox > div:nth-of-type(2) {width: calc(40% + 60px); border-radius: 0 8px 8px 0; position: relative; display: flex; justify-content: flex; align-items: center;}

/*Linke Seite*/
.xbox > div:nth-of-type(1) img.bg {display: block; position: absolute; object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%; clip-path: polygon(0 0, 100% 0, calc(100% - 80px) 100%, 0 100%); border-radius: 8px 0 0 8px;}
.xbox > div:nth-of-type(1) .inner {position: relative; z-index: 5; width: calc(100% - 80px); margin-right: 80px; padding: 32px;}

/*Rechte Seite*/
.xbox > div:nth-of-type(2) img.bg {display: block; position: absolute; object-fit: cover; object-position: 50% 50%; width: calc(100% + 80px); height: 100%; right: 0; border-radius: 0 8px 8px 0; clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%);}
.xbox > div:nth-of-type(2) .inner {position: relative; z-index: 5;}

/*Rabatt Seite*/
.xbox .rabatt {padding: 0 32px 32px 32px !important; display: flex; gap: 32px; flex-direction: column; justify-content: space-between; height: 100%;}
.xbox .rabatt .t1 {max-width: 450px; font-weight: 400;}
.xbox .rabatt .t1 span {color: #d3f62b}
.rabatt .button {width: fit-content; margin: 0 auto; font-size: var(--fs-xs1);}
.rabatt .icon-rabatt {width: calc(var(--fs-xl2) * 3); aspect-ratio: 59 / 63; background: url(/img/icon-rabatt.svg) center top no-repeat; background-size: 100%;}

/*Montage Seite*/
.xbox .montage {display: flex !important; justify-content: center; flex-direction: column; gap: 32px; padding: 32px; text-align: center; position: relative;}
.montage .t1 {display: block; font-size: var(--fs-xl2); font-weight: 600; text-transform: uppercase; hyphens: auto;}
.montage .t1 span {color: #d3f62b}
.montage .t2 {display: block; font-size: var(--fs1);}
.montage .button {width: fit-content; margin: 0 auto; font-size: var(--fs-xs1);}

@media screen and (max-width : 900px){
	.xbox {flex-direction: column;}

	.xbox > div:nth-of-type(1) {width: 100%}
	.xbox > div:nth-of-type(1) .inner  {width: 100%; margin-right: 0; text-align: center;}
	.xbox > div:nth-of-type(1) img.bg {width: 100%; clip-path: none; border-radius: 8px;}
	.rabatt .icon-rabatt {margin: auto;}
	.xbox .rabatt .t1 {max-width: none;}

	.xbox > div:nth-of-type(2) {width: 100%}
	.xbox > div:nth-of-type(2) .inner  {width: 100%}
	.xbox > div:nth-of-type(2) img.bg {width: 100%; clip-path: none; border-radius: 8px;}
}
/***********/







/*** PRODUKTE Bilder ***/

.zoom-container {position: relative; width: 100%; height: auto; overflow: hidden;}
.zoom-image {display: block; width: 100%;}
.zoom-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: 200%; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;}

/***********/






/*** PRODUKTE DETAILS ***/
.woocommerce-product {display: grid; gap: 32px; grid-template-columns: repeat(2,1fr); margin: 32px 0;}
@media screen and (max-width : 900px){
	.woocommerce-product {grid-template-columns: repeat(1,1fr);}
}

.product-details {background: #FFF; box-shadow: 0 5px 10px rgba(0,0,0, 0.2); border-radius: 8px; padding-bottom: 16px;}

/*Überschrift*/
.product-details .ttl {padding: 32px;}
.product-details .ttl .title1 {margin: 0}

/*Varianten*/
.product-options {background: linear-gradient(to right, #ececec 0%,#f4f4f4 100%); padding: 32px; display: flex; flex-direction: column; gap: 32px;}
.product-options select {padding: 16px; font-size: var(--fs1); width: 100%; background: #FFF; border: 0; border-radius: 0 8px 0 0; outline: none;}
.product-options select option {font-size: var(--fs-xs1);}
.product-options .slabel {background: #FFF; font-size: var(--fs-xs1); color: #767676; padding: 2px 12px 2px 8px; font-weight: 500; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 101%, 0 101%); display: block; width: fit-content;}
.product-options .slabel2 {padding: 4px 16px 4px 8px; letter-spacing: 0; font-weight: 400;}

/*Varianten per Bild*/
.select_by_pic {display: flex; align-items: center; padding: 16px; font-weight: 400; background: #FFF; cursor: pointer;}
.select_by_pic:hover {background: #F8F8F8;}
.select_by_pic.active {background: #F8F8F8; box-shadow: inset 0 0 0 2px #6b6b6b; font-weight: 700;}
.select_by_pics .pic {aspect-ratio: 4/3; width: 64px; margin-right: 16px;}
.select_by_pics .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;}
[tax="pa_profilform"] .pic {width: 80px;}

/*Varianten per Checkbox*/
.select_by_checkboxes {display: flex; flex-wrap: wrap; background: #FFF;}
.select_by_checkboxes > div {padding: 16px;}

/*Preis*/
.product-price {padding: 16px 32px; text-align: center;}
.product-price b {display: block; font-size: var(--fs-xl2); color: #3b3b3b;}
.woocommerce-product .product-price span {display: block; font-size: var(--fs-xs1); color: #767676;}
.woocommerce-product .product-price span a {color: #000}
.woocommerce-product .product-price .old_price {font-weight: 500; color: #ca4a4a; font-size: var(--fs1); text-decoration: line-through;}

/*Countdown*/
#countdown {display: none; margin-top: 16px;}
#countdown .counter {display: flex; width: fit-content; gap: 8px; padding: 0 16px; margin: 4px auto 8px auto;}
#countdown > b {display: block; text-align: center; font-weight: 600; text-transform: uppercase;}
#countdown .cd_f {width: 60px; text-align: center; padding: 8px 4px; background: #c34b4b; color: #FFF; border-radius: 8px;}
#countdown .cd_f b {display: block; font-weight: 700;}
#countdown .cd_f span {text-transform: uppercase; font-size: var(--fs-xs3); font-weight: 400; display: block; margin-top: 8px;}
@media screen and (max-width : 480px){ #countdown .cd_f {width: 50px;} }

/*Add to Cart*/
.product-addtocart {padding: 16px 32px; text-align: center; display: flex; justify-content: center; align-items: stretch;}
.product-addtocart .arrs {width: 24px; display: flex; flex-direction: column; margin-right: -0.2px;}
.product-addtocart .arrs button {position: relative; background: #3b3b3b; cursor: pointer; height: 50%; border: 0;}
.product-addtocart .arrs button:hover {background: #4b4b4b;}
.product-addtocart .arrs button:nth-of-type(1):before {content:""; display: block; width: 8px; height: 8px; border-top: 2px solid #d3f62b; border-right: 2px solid #d3f62b; position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 3px)) rotate(-45deg);}
.product-addtocart .arrs button:nth-of-type(2):before {content:""; display: block; width: 8px; height: 8px; border-top: 2px solid #d3f62b; border-right: 2px solid #d3f62b;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 3px)) rotate(135deg);}

.product-addtocart .inp {position: relative; display: flex; align-items: center; margin-right: -10px}
.product-addtocart input {border: 0; font-size: var(--fontsize); padding: 0 28px 0 14px; outline: 0; width: 80px; text-align: center; background: none; color: #3b3b3b}
.product-addtocart .inp .bg {background: #3b3b3b; clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%, 0 50%, 4px 50%, 4px calc(100% - 4px), calc(100% - 23px) calc(100% - 4px), calc(100% - 6px) 4px, 4px 4px, 4px 50%, 0 50%); position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

/*Lieferzeit*/
.product-delivery {padding: 16px 32px; text-align: center; color: #767676}
.product-delivery b {font-weight: 500; color: #2b2b2b}

@media screen and (max-width : 480px){
	.product-details .ttl, .product-options, .product-price, .product-addtocart {padding: 16px;}
	.product-options {gap: 16px;}
	.product-addtocart input {width: 70px;}
}

/***********/









/*** KUNDENMAßE ***/
/*PPOM Anpassungen*/
#ppom-price-cloner-wrapper, .legal-price-info, .reset_variations1 {display: none;}
.original-summary {display: none;}
/**/

.custom-comments {display: flex; gap: 32px;}

.custom-comments-arr {width: 16px; background: linear-gradient(to bottom, #c5e62b 0%,#adca24 100%); margin-right: -16px; clip-path: polygon(0 0, 25% 0, 100% 50%, 25% 100%, 0 100%); flex-shrink: 0}
.custom-comments .fields {display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; width: 100%;}

.custom-comments label {background: #FFF;font-size: var(--fs-xs2);color: #767676; padding: 2px 12px 2px 4px; font-weight: 500; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 101%, 0 101%);display: block;width: fit-content;margin-bottom: -1px; display: flex; align-items: center; gap: 4px;}
.custom-comments label i {content:""; display: block; width: 11px; height: 11px; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgMzIwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMTcuNjkzIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiPjxwYXRoIGQ9Ik0yMTAuMDQyIDEyLjk5OWw5Ni45NTcgOTYuOTU3LTE5Ny4wNCAxOTcuMDQtOTYuOTU3LTk2Ljk1N3oiLz48cGF0aCBkPSJNMjU3LjczOSAxNTkuMjE4bC01MC4wNDItNTAuMDQybS43ODIgOTkuMzAzbC03MS45MzYtNzEuOTM2bTIyLjY3NSAxMjEuMTk2bC01MC4wNDItNTAuMDQyIi8+PC9zdmc+") center no-repeat; background-size: 11px;}

.ccinput1 {padding: 4px 8px;font-size: var(--fs-xs1);width: 100%;background: #FFF;border: 0;outline: none; width: 100%;}

.cc-info {border-radius: 10px 0; border: 2px solid #c6c6c6; display: flex; justify-content: center; align-items: center; padding: 0 14px; align-self: stretch; cursor: pointer;}
.cc-info i {display: block; aspect-ratio: 5/24; width: 5px; opacity: .3; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1IDI0Ij48cGF0aCBkPSJNNSA4djE0LjVBMS41IDEuNSAwIDAgMSAzLjUgMjRIMFYxMS41QTMuNTEgMy41MSAwIDAgMSAzLjUgOEg1em0wLTh2Mi41QTMuNSAzLjUgMCAwIDEgMS41IDZILjA2OEMuMDMxIDYgMCA1Ljk2OSAwIDUuOTMyVjEuNUExLjUgMS41IDAgMCAxIDEuNSAwSDV6Ii8+PC9zdmc+") center no-repeat;}

@media screen and (max-width : 480px){
	.custom-comments {gap: 16px;}
	.custom-comments .fields {grid-template-columns: repeat(1,1fr); gap: 16px;}
	.custom-comments-arr {margin-right: 0;}
}

.dark_bg {position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 200; background: rgba(0,0,0, 0.9); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: all .3s; cursor: pointer;}
.dark_bg.active {opacity: 1; pointer-events: auto;}

.infolayer {background: #FFF; padding: 32px; max-width: 1000px; max-height: calc(100% - 64px); width: calc(100% - 64px); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 8px; z-index: 210; box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 40px 0px; overflow: auto;opacity: 0; pointer-events: none; transition: all .3s;}
.infolayer.active {opacity: 1; pointer-events: auto;}

.infolayer .pic {display:block; width: 100%; border-radius: 8px;}

.infolayer img {display: none !important;}
.infolayer.active img {display: block !important;}

.infolayer .close {display: block; width: 64px; aspect-ratio: var(--ar1); background: linear-gradient(45deg, #d3f62b 0%,#c3e61d 100%); position: absolute; right: 0; top: 0; z-index: 100; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 25%); cursor: pointer;}
.infolayer .close:after {content:""; display: block; width: 24px; height: 24px; background: var(--close) center no-repeat; background-size: 24px; position: absolute; top: 16px; right: 16px;}
@media screen and (max-width : 700px){
	.infolayer {padding: 16px; width: calc(100% - 32px); height: calc(100% - 32px); max-height: none;}
	.infolayer .close {width: 48px;}
	.infolayer .close:after {width: 20px; height: 20px; background-size: 20px; top: 12px; right: 12px;}
}
/***********/









/*** TABS PRODUKTSEITE ***/
.woocommerce-tabs {display: flex;}
.woocommerce-tabs .tabs {width: 350px; padding: 32px 0;}
.woocommerce-tabs .description {width: calc(100% - 350px); display: flex;}

/*Tabs*/
.woocommerce-tabs .tabs ul li {padding: 32px 32px 32px 64px; background: #FFF; box-shadow: 0 5px 10px rgba(0,0,0, 0.2); border-radius: 8px 0 0 8px; font-weight: 500; text-transform: uppercase; color: #5b5b5b; text-align: right; hyphens: auto; cursor: pointer; position: relative; transition: all 0.4s;}
.woocommerce-tabs .tabs ul li.active {background: #2b2b2b; color: #FFF;}
.woocommerce-tabs .tabs ul li .arr {width: 33px; height: 28px; background: var(--arr_dbl) center no-repeat; position: absolute; top: 50%; transform: translate(0, -50%); left: 0px; opacity: 0; transition: all 0.4s;}
.woocommerce-tabs .tabs ul li.active .arr {left: 32px; opacity: 1;}
@media screen and (min-width : 1301px){
	.woocommerce-tabs .tabs ul li:nth-of-type(1) {z-index: 11;}
	.woocommerce-tabs .tabs ul li:nth-of-type(2) {z-index: 10;}
	.woocommerce-tabs .tabs ul li:nth-of-type(3) {z-index: 9;}
	.woocommerce-tabs .tabs ul li:nth-of-type(4) {z-index: 8;}
	.woocommerce-tabs .tabs ul li:nth-of-type(5) {z-index: 7;}
	.woocommerce-tabs .tabs ul li:nth-of-type(6) {z-index: 6;}
	.woocommerce-tabs .tabs ul li:nth-of-type(7) {z-index: 5;}
}

/*Beschreibung*/
.woocommerce-tabs .description > div {background: #FFF; box-shadow: 0 10px 20px rgba(0,0,0, 0.1), 0 0 130px rgba(0,0,0, 0.08); border-radius: 8px; position: relative; z-index: 40; padding: 32px; display: none; width: 100%;}
.woocommerce-tabs .description > div *:first-child {margin-top: 0;}
.woocommerce-tabs .description > div *:last-child {margin-bottom: 0;}


@media screen and (max-width : 1300px){
	.woocommerce-tabs .tabs {width: 210px;}
	.woocommerce-tabs .description {width: calc(100% - 210px);}
	.woocommerce-tabs .tabs ul li.active .arr {left: 16px;}
	.woocommerce-tabs .tabs ul li .arr {width: 21px; height: 18px;}
	.woocommerce-tabs .tabs ul li {padding: 24px 16px 24px 32px}
}


@media screen and (max-width : 800px){
	.woocommerce-tabs {flex-direction: column;}
	.woocommerce-tabs .tabs {width: 100%; padding: 0;}
	.woocommerce-tabs .tabs ul {display: grid; grid-template-columns: repeat(2,1fr); margin: 0 16px; border-radius: 8px 8px 0 0}
	.woocommerce-tabs .tabs ul li {border-radius: 0}
	.woocommerce-tabs .description {width: 100%;}
}

@media screen and (max-width : 440px){
	.woocommerce-tabs .tabs ul {grid-template-columns: repeat(1,1fr);}
	.woocommerce-tabs .tabs ul li {padding: 16px 8px 16px 32px}
	
}
/***********/








/*** NOTICES ***/
.woocommerce-notices-wrapper {margin: 32px 0;}
.woocommerce-message, .woocommerce-info {border-radius: 8px; box-shadow: 0 5px 10px rgba(0,0,0, 0.2); padding: 32px; text-align: center; position: relative; overflow: hidden;}
.woocommerce-message a {display: none;}
.woocommerce-message:after, .woocommerce-info:after {content:""; display: block; width: 40px; aspect-ratio: var(--ar1); background: linear-gradient(45deg, #d3f62b 0%,#c3e61d 100%); position: absolute; right: 0; top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 25%);}
.woocommerce-error {border-radius: 8px; box-shadow: 0 5px 10px rgba(0,0,0, 0.2); padding: 32px; text-align: center; position: relative; overflow: hidden;}
.woocommerce-error:after {content:""; display: block; width: 40px; aspect-ratio: var(--ar1); background: linear-gradient(45deg, #f62b2b 0%,#e61d1d 100%); position: absolute; right: 0; top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 25%);}
/***********/







/*** CART RECHTS ***/
.cart_side {position: fixed; z-index: 50; right: 0px; bottom: 100px; padding-left: 32px; filter: drop-shadow(0 10px 20px rgba(0,0,0, .3)); transition: all .5s;}
.cart_side[amount="0"] {transform: translate(100%,0);}
.cart_side .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #3b3b3b; clip-path: polygon(32px 0, 100% 0, 100% 100%, 0 100%);}
.cart_side .con {position: relative; z-index: 5; padding: 16px;}
.cart_side .icon {width: 32px; height: 32px; margin: 8px auto 0 auto; position: relative; background: var(--ico-cart) center no-repeat;}
.cart_side .icon span {position: absolute; top: 0px; left: 0px; transform: translate(-50%, -50%); background: #FFF; border-radius: 20px; padding: 0 4px; font-size: var(--fs-xs2); font-weight: 500; color: #2b2b2b; letter-spacing: 0;}
.cart_side .show {color: #FFF; font-size: var(--fs-xs1); text-transform: uppercase; transition: all .4s;}
.cart_side:hover .show {color: #FFF; text-shadow: 0 0 7px rgba(255,255,255, .8);}

@media screen and (max-width : 800px){
	.cart_side {padding-left: 8px; bottom: 24px;}
	.cart_side .bg {clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%);}
	.cart_side .con {padding: 8px; position: relative; left: 4px;}
	.cart_side .icon {width: 24px; height: 24px;}
	.cart_side .show {letter-spacing: 0;}
}
/***********/





/*** CART/CHECKOUT ELEMENTE ***/
#shipping_dhl_postnumber_field {display: none;}
@media screen and (max-width : 550px){
	.cart-subtotal {padding: 16px;}
	.cart-subtotal th {display: block !important; padding: 0 16px !important; background: none !important;}
	.order-total {padding: 16px !important; background: #2b2b2b !important; color: #FFF !important;}
	.order-total th {display: block !important; padding: 0 16px !important; background: none !important;}
}

.checkout_button {text-align: right; padding: 16px;}
@media screen and (max-width : 550px){
	.checkout_button {text-align: center;}
}
.wc-gzd-product-name-left img {width: 150px; height: 150px;}
/***********/







/*** WARENKORB TABELLE ***/
.shop_table {width: 100%;}
.shop_table th {background: #F4F4F4; padding: 16px; text-align: left;}
.shop_table td {padding: 16px;}
th.product-remove span {display: none;}
th.product-thumbnail span {display: none;}

td.product-thumbnail img {width: 100%; max-width: 150px;}
td.product-remove {font-size: var(--fs-xl3);}
td.product-name a {font-weight: 600; text-transform: uppercase;}
td.product-subtotal {font-weight: 500;}
td.product-price {text-align: left;}

dl.variation {font-size: var(--fs-xs1);}
dl.variation p {margin: 0;}
dl.variation dt {font-weight: 500; margin-top: 8px;}

label.screen-reader-text {display: none;}

.refresh_cart {text-align: right;}

.inp_number {padding: 8px 16px; background: #f4f4f4; border: none; text-align: center;}

@media screen and (min-width : 551px) and (max-width : 750px){
	th.product-thumbnail {display: none;}
	td.product-thumbnail {display: none;}
	td.product-remove {padding: 16px 0;}
	td.product-name * {hyphens: auto}
	.shop_table th {font-size: var(--fs-xs1);}
}
@media screen and (max-width : 550px){
	.shop_table th {display: none;}
	.shop_table tr {display: block; background: #FFF; box-shadow: 0 5px 10px rgba(0,0,0, 0.2); margin: 16px 0; border-radius: 8px;}
	.shop_table td {display: block; padding: 8px 16px;}
	td.product-remove {text-align: center; padding: 0px 16px; background: #4b4b4b;}
	td.product-thumbnail img {max-width: 200px; margin: auto; display: block;}
	td.product-name {text-align: center;}
	td.product-total {text-align: center;}
	dl.variation {width: fit-content; margin: auto;}
	td.product-price {text-align: center;}
	td.product-price bdi:before {content:"Einzelpreis:"; display: block; font-size: var(--fs-xs1); font-weight: bold;}
	td.product-subtotal {text-align: center;}
	td.product-subtotal bdi:before {content:"Zwischensumme:"; display: block; font-size: var(--fs-xs1); font-weight: bold;}
	td.product-quantity {text-align: center;}
	td.product-quantity .quantity:before {content:"Anzahl:"; display: block; font-size: var(--fs-xs1); font-weight: bold;}

	.inp_number {width: 80px;}

	tr.actions {box-shadow: none;}
	.refresh_cart {text-align: center;}
}

/***********/





/*** CHECKOUT ELEMENTE ***/
/*Rechnungsdetails/Versandadresse*/
#customer_details label, .uniforms label {display: block; background: #FFF; font-size: var(--fs-xs1); color: #767676; padding: 2px 12px 2px 8px; font-weight: 500; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 101%, 0 101%); width: fit-content;}
.woocommerce-billing-fields__field-wrapper .woocommerce-input-wrapper input, #customer_details textarea, .uniforms input, .uniforms textarea {display: block; width: 100%; background: #FFF; padding: 16px; border: 0; font-size: var(--fs1);}
#customer_details textarea {min-height: 200px;}
.woocommerce-billing-fields__field-wrapper .woocommerce-input-wrapper input:focus, #customer_details textarea:focus, .uniforms input:focus, .uniforms textarea:focus {outline: none !important;}
.uniforms {background: #F4F4F4; padding: 32px;}

.woocommerce-billing-fields__field-wrapper .woocommerce-input-wrapper select {padding: 16px; font-size: var(--fs1); width: 100%; background: #FFF; border: 0; border-radius: 0 8px 0 0; outline: none;}
.woocommerce-billing-fields__field-wrapper .woocommerce-input-wrapper select option {font-size: var(--fs-xs1);}

#customer_details {display: grid; gap: 32px; grid-template-columns: repeat(2,1fr); background: #F4F4F4; padding: 32px;}

.wc-item-meta li {margin: 16px 0;}
.wc-item-meta li p {margin: 0;}

@media screen and (max-width : 900px){
	#customer_details {grid-template-columns: repeat(1,1fr);}
}

@media screen and (max-width : 550px){
	.woocommerce-table--order-details .det {display: block !important; background: none !important;}
	.woocommerce-table--order-details tfoot tr:last-of-type {background: #2b2b2b; color: #FFF;}
}

.paypal-buttons {margin-top: 32px;}
.payment_box.payment_method_bacs, .payment_box.payment_method_ppcp-gateway {background: #F4F4F4; padding: 16px; margin: 16px 0;}
.payment_box.payment_method_bacs p, .payment_box.payment_method_ppcp-gateway p {margin: 0;}
#order_review br {display: none;}
#order_payment_heading {margin-bottom: 16px;}
.ppcp-hidden {display: none !important;}
#place_order {margin-top: 32px !important;}

button[name="calc_shipping"] {padding: 0;}

#payment button[name="woocommerce_checkout_place_order"] {display: none !important;}
/***********/







/*** MEIN KONTO ELEMENTE ***/
.woocommerce-MyAccount-navigation ul {display: grid; gap: 16px; margin: 32px; grid-template-columns: repeat(3,1fr); margin: 32px 0;}
.woocommerce-MyAccount-navigation ul a {display: block; padding: 16px; background: #FFF; box-shadow: 0 5px 10px rgba(0,0,0, 0.2); border-radius: 8px;}
.woocommerce-MyAccount-navigation ul .is-active a {background: #2b2b2b; color: #FFF;}

.woocommerce-MyAccount-navigation-link--downloads {display: none;}

.woocommerce mark {background: #d3f62b;}

@media screen and (max-width : 680px){
	.woocommerce-MyAccount-navigation ul {grid-template-columns: repeat(2,1fr);}
}
/***********/





/*** BILDER ***/
.lazy {visibility: hidden; opacity: 0; transition: opacity 1s;}
.loading, .loaded {visibility: visible; opacity: 1;}
/***********/







/**** LISTEN ****/
.list1 {margin: 32px 0;}
.list1 li {padding-left: 32px; margin: 16px 0;}
.list1 li:before {content:""; display: inline-block; width: 8px; height: 8px; background: #d3f62b; margin-right: 8px; position: relative; top: -2px;}
@media screen and (max-width : 480px){
	.list1 li {padding-left: 16px;}
}
/***********/








/*** BLOGBEITRÄGE ***/
.posts {display: grid; gap: 32px; grid-template-columns: repeat(3,1fr); margin-bottom: 64px;}
.posts .card {background: #FFF; box-shadow: 0 10px 20px rgba(0,0,0, 0.1), 0 0 130px rgba(0,0,0, 0.08); border-radius: 8px; overflow: hidden; position: relative;}

/*Grüne Ecke*/
.posts .card:after {content:""; display: block; width: 48px; aspect-ratio: var(--ar1); background: linear-gradient(45deg, #d3f62b 0%,#c3e61d 100%); position: absolute; right: 0; top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 25%);}

.posts .card .img {width: 100%; aspect-ratio: 4/3; overflow: hidden; position: relative; background: #DDD;}
.posts .card .img img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;}
.posts .card .img span {position: absolute; left: 32px; bottom: 16px; background: linear-gradient(to bottom, #3b3b3b 0%,#2b2b2b 100%); border-radius: 4px; padding: 4px; color: #FFF; font-size: var(--fs-xs1);}
.posts .card .txt {padding: 32px; display: flex; flex-direction: column; gap: 32px; }
.posts .card .txt p {margin: 0;}
.posts .card .title1 {font-size: var(--fs-xl1); margin: 0;}
.posts .card .title1:before {font-size: var(--fs-xl1); height: calc(var(--fontsize) * 1.0);}
.posts .card .button {font-size: var(--fs-xs1);}

@media screen and (max-width : 1000px){
	.posts {grid-template-columns: repeat(2,1fr);}
}

@media screen and (max-width : 680px){
	.posts {grid-template-columns: repeat(1,1fr);}
	.posts .card:after {width: 36px;}
}

/*Beitrag selbst*/
.the_post {background: #FFF; box-shadow: 0 10px 20px rgba(0,0,0, 0.1), 0 0 130px rgba(0,0,0, 0.08); border-radius: 8px; padding: 48px 32px 32px 32px; position: relative; overflow: hidden;}
.the_post:after {content:""; display: block; width: 48px; aspect-ratio: var(--ar1); background: linear-gradient(45deg, #d3f62b 0%,#c3e61d 100%); position: absolute; right: 0; top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 25%);}

.the_post_date {position: absolute; top: 0; left: 32px; padding: 8px; background: #3b3b3b; color: #FFF; font-size: var(--fs-xs1); border-radius: 0 0 8px 8px;}

.post_breadcrumb {width: fit-content; margin: 32px auto; display: flex; flex-wrap: wrap;}
.post_breadcrumb li {margin: 4px 0 4px 16px;}
.post_breadcrumb li a {color: #687f00;}

.post_breadcrumb li:after {content:"\276F"; display: inline-block; padding-left: 16px;}
.post_breadcrumb li:last-of-type:after {content:"";}
.post_fazit {padding: 32px; border: 1px solid #EEE; box-shadow: 0 0 50px rgba(0,0,0,.1);}
/***********/








/**** BUTTONS ****/
.button {display: inline-block; position: relative; font-size: var(--fontsize); text-transform: uppercase; font-weight: 500; padding: 16px 36px; transition: all .3s; text-align: center; cursor: pointer; user-select: none; background: none; border: 0; outline: none;}


.button .bg {position: absolute; z-index: 0; width: 100%; height: 100%; top: 0; left: 0; transition: all .3s;}
.button span {transition: all .3s; z-index: 5; position: relative; letter-spacing: 0;}

/*Hintergrundfarben*/
.but_bg1 .bg {background: #d3f62b;}	.but_bg1 span {color: #2b2b2b;}		.but_bg1:hover .bg {background: #FFF;}		.but_bg1:hover span {color: #2b2b2b;}
.but_bg1b .bg {background: #d3f62b;}	.but_bg1b span {color: #2b2b2b;}		.but_bg1b:hover .bg {background: #2b2b2b;}	.but_bg1b:hover span {color: #FFF;}
.but_bg1c .bg {background: #d3f62b;}	.but_bg1c span {color: #2b2b2b;}		.but_bg1c:hover .bg {background: #2b2b2b;}	.but_bg1c:hover span {color: #2b2b2b;}
.but_bg2 .bg {background: #FFF;}		.but_bg2 span {color: #FFF;}			.but_bg2:hover .bg {background: #d3f62b;}	.but_bg2:hover span {color: #FFF;}
.but_bg3 .bg {background: #3b3b3b;}		.but_bg3 span {color: #3b3b3b;}			.but_bg3:hover .bg {background: #d3f62b;}	.but_bg3:hover span {color: #000;}

/*Clips Full*/
.but_clip_rt .bg {clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);}	.but_clip_rt {padding-right: 56px}
.but_clip_rb .bg {clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);}	.but_clip_rb {padding-right: 56px}
.but_clip_lt .bg {clip-path: polygon(0 0, 100% 0, 100% 100%, 20px 100%);}	.but_clip_lt {padding-left: 56px}
.but_clip_lb .bg {clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);}	.but_clip_lb {padding-left: 56px}

/*Clips Outline*/
.but_clip_out_rt .bg {clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%, 0 50%, 4px 50%, 4px calc(100% - 4px), calc(100% - 23px) calc(100% - 4px), calc(100% - 6px) 4px, 4px 4px, 4px 50%, 0 50%);}	.but_clip_out_rt {padding-right: 56px}
.but_clip_out_rb .bg {clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%, 0 50%, 4px 50%, 4px calc(100% - 4px), calc(100% - 6px) calc(100% - 4px), calc(100% - 23px) 4px, 4px 4px, 4px 50%, 0 50%);}	.but_clip_out_rb {padding-right: 56px}
.but_clip_out_lt .bg {clip-path: polygon(0 0, 100% 0, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 4px, 6px 4px, 23px calc(100% - 4px), calc(100% - 24px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 50%, 100% 50%, 100% 100%, 20px 100%);}	.but_clip_out_lt {padding-left: 56px}
.but_clip_out_lb .bg {clip-path: polygon(20px 0, 100% 0, 100% 50%, calc(100% - 4px) 50%, calc(100% - 4px) 4px, 23px 4px, 6px calc(100% - 4px), calc(100% - 24px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 50%, 100% 50%, 100% 100%, 0 100%);}	.but_clip_out_lb {padding-left: 56px}

@media screen and (max-width : 768px){
	.button {padding: 12px 24px;}
	.but_clip_rt, .but_clip_rb, .but_clip_out_rt, .but_clip_out_rb {padding-right: 44px}
	.but_clip_lt, .but_clip_lb, .but_clip_out_lt, .but_clip_out_lb {padding-left: 44px}
}

@media screen and (max-width : 380px){
	.button {font-size: var(--fs-xs1);}
}
/***********/






/**** FAQ ****/
#faqbox {position: relative; margin: 32px 0; display: grid; gap: 32px; grid-template-columns: repeat(1,1fr);}

.faqtitle {padding: 32px; background: #FFF; box-shadow: 0 10px 20px rgba(0,0,0, 0.1), 0 0 130px rgba(0,0,0, 0.08); font-weight: 400; cursor: pointer; display: flex; align-items: center; justify-content: space-between; position: relative; border-radius: 8px;}
.faqtitle_wrap {position: relative;}
.faqtxt {padding: 0 32px; display: none;}
.faqtxt p {margin-bottom: 0px;}
.faqtitle .arr {width: 20px; height: 20px; border-right: 4px solid #3b3b3b; border-bottom: 4px solid #3b3b3b; transform: rotate(45deg); margin: 0 16px; transition: all .4s !important; transition-timing-function: cubic-bezier(.89,-0.01,.51,.64) !important;}
.faqtitle .arr.act {transform: rotate(225deg);}

/*Responsive Einstellungen*/
@media screen and (max-width : 680px){
	#faqbox {margin: 16px 0 !important;}
	.faqtitle {padding: 16px;}
	.faqtitle .arr {width: 12px; height: 12px; margin: 0 16px 0 16px;}
	.faqtxt {padding: 0 16px;}
	.faqtxt p {margin-top: 16px;}
}
/***********/






/**** Versandkostentabelle ****/
.calcshippingcosts {margin-bottom: 32px; display: flex; gap: 16px; align-items: center;}
.calcshippingcosts input {padding: 16px; background: #F4F4F4; font-size: var(--fs1); border: 0; outline: 0;}

/***********/





/**** KONTAKT SEITE ****/
.kontakt_details {display: grid; gap: 32px; grid-template-columns: repeat(2,1fr);}
.kontakt_details > div .ttl {font-size: var(--fs-xl1);}
.kontakt_details > div p {margin-top: 0;}

@media screen and (max-width : 480px){
.kontakt_details {grid-template-columns: repeat(1,1fr); gap: 0;}
}
.googlemaps {width: 100%; aspect-ratio: 21/9;}
@media screen and (max-width : 480px){
	.googlemaps {aspect-ratio: 4/3;}
}


/*Formular*/
#kontakt .button1 {margin: 0 !important;}
.kform {display: grid; grid-template-columns: repeat(2,1fr); gap: 32px; margin: 32px 0; padding: 32px; width: 100%; background: #F4F4F4;}
.kform input[type="text"], .kform input[type="email"], .kform textarea {display: block; width: 100%; border: 0; background: #FFF; color: #3b3b3b; padding: 16px; outline: none; font-size: 1rem;font-weight: 300; position: relative;}
.kform textarea {height: 160px;}
.kform input[type="text"]:focus ~ .inpb:before, .kform textarea:focus ~ .inpb:before {background: #c5f844;}
.kform .inpclip {clip-path: polygon(0 0, 100% 0, 100% 100%,7px 100%, 0 calc(100% - 7px));}
.kform .form_cbwrap {display: flex; gap: 16px; align-items: center; width: fit-content; margin: 0 auto;}
.chkbx {display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; background: #FFF; cursor: pointer; position: relative;}
.chkbx div {position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: all 0.3s; background: #d3f62b; opacity: 0;}
.chkbx div:before {content:""; width: 4px; height: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); background: #2b2b2b;}
.chkbx div:after {content:""; width: 20px; height: 4px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); background: #2b2b2b;}
.chkbx input:checked ~ div {opacity: 1;}
.chkbx input {opacity: 0;}

.kform .s1 {grid-column: span 1; position: relative;}
.kform .s2 {grid-column: span 2; position: relative;}
.kform .s1b {display: none;}

#kontakt .success {display: none; width: 100% !important;}
#kontakt .error {display: none; width: 100% !important;}

#kontakt .error {color: #f84444}


/*Responsive Einstellungen*/
@media screen and (max-width : 680px){
	.kform {gap: 16px; margin: 32px 0; padding: 16px; width: 100%;}
	.kform input[type="text"], .kform input[type="email"], .kform textarea {padding: 16px;}
	.kform textarea {height: 150px;}
}

@media screen and (max-width : 480px){
	.kform .form_cbwrap {letter-spacing: 0; font-size: 12px;}
	.chkbx {width: 24px; height: 24px;}
	.chkbx div:before {width: 3px; height: 14px;}
	.chkbx div:after {width: 14px; height: 3px;}
	.kform .s1 {grid-column: span 2;}
}
/***********/








/**** KONFIGURATOR ****/
#konfigurator {position: relative;}

#konfigurator .wrapper {background: #FFF; box-shadow: 0 10px 20px rgba(0,0,0, 0.1), 0 0 130px rgba(0,0,0, 0.08); border-radius: 8px; position: relative;}

#konfigurator .wrapper .slide {padding: 32px; display: none;}
#konfigurator .wrapper .slide[slide="start"] {display: block;}

/* START GRID*/
/*Grid Items*/
#konfigurator .start_grid {display: flex; gap: 32px; justify-content: center; flex-wrap: wrap;}
#konfigurator .start_grid .item {cursor: pointer; aspect-ratio: 1/1; background: #000; box-shadow: 0 0 0 0 #d3f62b, 0 16px 30px rgba(0,0,0, 0.1), 0 5px 0 0 #3b3b3b; border-radius: 8px; padding: 16px; flex: 1 1 200px; min-width: 200px; max-width: 200px; position: relative; transition: box-shadow .4s; overflow: hidden; display: flex; justify-content: center; align-items: flex-end;}
#konfigurator .start_grid .item.selected {box-shadow: 0 5px 0 0 #d3f62b, 0 16px 30px rgba(0,0,0, 0.2), 0 0 0 0 #3b3b3b;}
/*Grüne Ecke*/
#konfigurator .start_grid .item:before {content: ""; display: block; width: 10%; aspect-ratio: var(--ar1); background: linear-gradient(to bottom, #c3e61d 0%,#d3f62b 33%,#ffffff 66%); background-position-x: 0%; background-position-y: 0%; background-size: auto; background-size: 300% 300%; background-position: bottom; position: absolute; z-index: 5; right: 0; top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 50%); transition: all 0.4s;}
#konfigurator .start_grid .item.selected:before {background-position: top;}
/*Bild*/
#konfigurator .start_grid .item img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute; top: 0; left: 0; z-index: 0; opacity: .6; transition: opacity .4s;}
#konfigurator .start_grid .item:hover img {opacity: .8;}
#konfigurator .start_grid .item.selected img {opacity: 1;}
/*Beschriftung*/
#konfigurator .start_grid .item .cont {position: relative; z-index: 1;}
#konfigurator .start_grid .item .cont span {display: block; hyphens: auto; text-align: center; left: 16px; bottom: 16px; background: #ffffffbb; backdrop-filter: blur(5px); font-size: var(--fs-xs1); line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #000; padding: 8px 16px; border-radius: 8px;}
#konfigurator .start_grid .item input {display: none;}


/* GRÖßENANGABE */
.sizes_box {display: flex; gap: 32px; justify-content: center; flex-wrap: wrap;}
.sizes_box > .item {padding: 16px; background: #F4F4F4;}
.sizes_box > .item span, .konfigurator_label {background: #FFF; font-size: var(--fs-xs1); color: #767676; padding: 2px 12px 2px 8px; font-weight: 500; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 101%, 0 101%); display: block; width: fit-content;}
.sizes_box > .item input {padding: 16px; border: 0; background: #FFF; font-size: var(--fs1); outline: none;}


/*Buttons*/
#konfigurator .slidebuttons a {opacity: .5; pointer-events: none; cursor: pointer; transition: all .4s;}
#konfigurator .slidebuttons a.active {opacity: 1; pointer-events: auto;}

#konfigurator .form_cbwrap {font-size: var(--fs-xs1); letter-spacing: 0; text-align: center;}



@media screen and (max-width : 550px){
	#konfigurator .wrapper .slide {padding: 16px;}
	#konfigurator .start_grid {gap: 16px;}
	#konfigurator .start_grid .item {width: calc(50% - 8px); max-width: unset; flex: unset; min-width: 140px;}
}
/***********/












/**** FOOTER ****/
#footwrap {background: linear-gradient(to right, #2b2b2b 0%,#3b3b3b 50%,#2b2b2b 100%);}
footer {max-width: calc(var(--maxsize) + 32px); padding: 0 16px; margin: 128px auto 0 auto;}

#footnav {display: grid; grid-template-columns: repeat(4,1fr); gap: 64px; padding: 64px 0;}
#footnav .cell {position: relative;}
#footnav .cell:nth-of-type(1n+2):before {content:""; display: block; width: 1px; height: 50px; background: rgba(255,255,255, .2); position: absolute; left: -34px; top: 50%; transform: translateY(-50%);}

/*Überschrift*/
footer .ttl {display: block; color: #FFF; text-transform: uppercase; font-weight: 600; font-size: var(--fs-xl1); margin-bottom: 16px; hyphens: auto;}
footer .ttl:before {content:""; display: inline-block; width: var(--fs-xs2); height: calc(var(--fontsize) * 1); background: linear-gradient(to bottom, #d3f62b 0%,#c3e61d 100%); clip-path: polygon(0 0, 50% 0, 100% 100%, 0 100%); margin-right: 4px;}
footer .ttl2 {display: block; color: #FFF; text-transform: uppercase; font-weight: 600; font-size: var(--fs-xl1); margin-bottom: 16px; hyphens: auto;}
footer .ttl2:before {content:""; display: inline-block; width: 1rem; height: 1rem; background: var(--ma-icon) center no-repeat; background-size: 100%; margin-right: 4px;}

/*Liste Icons*/
.footadress li {margin: 8px 0; font-size: var(--fs-xs1); display: flex; align-items: center; color: #dbdbdb;}
.footadress li > div[class^="ico"] {width: 28px; height: 28px; margin-right: 8px;}
.footadress li > div {display: flex; align-items: center;}
.footadress li a {color: #FFF;}
.footadress li .ico-map {background: var(--navico4) center no-repeat;}
.footadress li .ico-phone {background: var(--navico1) center no-repeat;}
@media screen and (max-width : 1200px){
	.footadress li > div[class^="ico"] {width: 20px; height: 20px;}
}

/*Liste1*/
.footlink li {margin: 8px 0;}
.footlink li a {display: block; color: #dbdbdb; font-size: var(--fs-xs1);}
.footlink li a:before {content:""; display: inline-block; width: 4px; height: 4px; background: #FFF; vertical-align: middle; margin-right: 8px; transition: all .4s}
.footlink li:hover a:before {background: #d3f62b;}
.footlink li:hover a {color: #FFF;}

/*Letzte Reihe*/
#lastrow {font-size: var(--fs-xs1); font-weight: 400; color: #FFF; padding: var(--fs-xl1); background: rgba(0,0,0, 0.2); text-align: center; clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 100%, 0 100%);}


@media screen and (max-width : 1000px){
	#footnav {grid-template-columns: repeat(2,1fr);}
	#footnav {gap: 32px;}
	.footlink li a, .footadress li {font-size: var(--fs1);}
}

@media screen and (max-width : 600px){
	#footnav {grid-template-columns: repeat(1,1fr); padding: 32px 0;}
}
/***********/