/*
Theme Name: Residental Template
Author: Portalworks
Version: 1.0.0
Text Domain: https://portalworks.de/
*/



/***************************************************************
                         FONTS
***************************************************************/
/* poppins-300 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('/ftemplate4/tpl-assets/fonts/poppins-v24-latin_latin-ext-300.woff2') format('woff2'); 
}
/* poppins-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/poppins-v24-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* poppins-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/poppins-v24-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* poppins-500 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('/ftemplate4/tpl-assets/fonts/poppins-v24-latin_latin-ext-500.woff2') format('woff2'); 
}
/* poppins-600 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('/ftemplate4/tpl-assets/fonts/poppins-v24-latin_latin-ext-600.woff2') format('woff2'); 
}
/* poppins-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/poppins-v24-latin_latin-ext-700.woff2') format('woff2'); 
}
/* dm-serif-display-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/dm-serif-display-v17-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* dm-serif-display-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/dm-serif-display-v17-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* cormorant-garamond-300 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  src: url('/ftemplate4/tpl-assets/fonts/cormorant-garamond-v21-latin_latin-ext-300.woff2') format('woff2'); 
}
/* cormorant-garamond-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/cormorant-garamond-v21-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* cormorant-garamond-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/cormorant-garamond-v21-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* cormorant-garamond-500 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  src: url('/ftemplate4/tpl-assets/fonts/cormorant-garamond-v21-latin_latin-ext-500.woff2') format('woff2'); 
}
/* cormorant-garamond-600 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  src: url('/ftemplate4/tpl-assets/fonts/cormorant-garamond-v21-latin_latin-ext-600.woff2') format('woff2'); 
}
/* cormorant-garamond-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/cormorant-garamond-v21-latin_latin-ext-700.woff2') format('woff2'); 
}
/* inter-300 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('/ftemplate4/tpl-assets/fonts/inter-v20-latin_latin-ext-300.woff2') format('woff2'); 
}
/* inter-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* inter-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/inter-v20-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* inter-500 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('/ftemplate4/tpl-assets/fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2'); 
}
/* inter-600 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('/ftemplate4/tpl-assets/fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2'); 
}
/* inter-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/inter-v20-latin_latin-ext-700.woff2') format('woff2'); 
}
/* dancing-script-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/dancing-script-v29-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* dancing-script-500 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  src: url('/ftemplate4/tpl-assets/fonts/dancing-script-v29-latin_latin-ext-500.woff2') format('woff2'); 
}
/* dancing-script-600 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 600;
  src: url('/ftemplate4/tpl-assets/fonts/dancing-script-v29-latin_latin-ext-600.woff2') format('woff2'); 
}
/* dancing-script-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/dancing-script-v29-latin_latin-ext-700.woff2') format('woff2'); 
}
/* lato-300 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('/ftemplate4/tpl-assets/fonts/lato-v25-latin_latin-ext-300.woff2') format('woff2'); 
}
/* lato-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/lato-v25-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* lato-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/lato-v25-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* lato-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/lato-v25-latin_latin-ext-700.woff2') format('woff2'); 
}
/* allison-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Allison';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/allison-v13-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* nunito-300 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  src: url('/ftemplate4/tpl-assets/fonts/nunito-v32-latin_latin-ext-300.woff2') format('woff2'); 
}
/* nunito-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/nunito-v32-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* nunito-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/nunito-v32-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* nunito-500 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  src: url('/ftemplate4/tpl-assets/fonts/nunito-v32-latin_latin-ext-500.woff2') format('woff2'); 
}
/* nunito-600 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  src: url('/ftemplate4/tpl-assets/fonts/nunito-v32-latin_latin-ext-600.woff2') format('woff2'); 
}
/* nunito-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/nunito-v32-latin_latin-ext-700.woff2') format('woff2'); 
}
/* libre-bodoni-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Libre Bodoni';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/libre-bodoni-v9-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* libre-bodoni-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Libre Bodoni';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/libre-bodoni-v9-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* libre-bodoni-500 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Libre Bodoni';
  font-style: normal;
  font-weight: 500;
  src: url('/ftemplate4/tpl-assets/fonts/libre-bodoni-v9-latin_latin-ext-500.woff2') format('woff2'); 
}
/* libre-bodoni-600 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Libre Bodoni';
  font-style: normal;
  font-weight: 600;
  src: url('/ftemplate4/tpl-assets/fonts/libre-bodoni-v9-latin_latin-ext-600.woff2') format('woff2'); 
}
/* libre-bodoni-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Libre Bodoni';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/libre-bodoni-v9-latin_latin-ext-700.woff2') format('woff2'); 
}
/* roboto-300 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('/ftemplate4/tpl-assets/fonts/roboto-v51-latin_latin-ext-300.woff2') format('woff2'); 
}
/* roboto-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/roboto-v51-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* roboto-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/roboto-v51-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* roboto-500 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('/ftemplate4/tpl-assets/fonts/roboto-v51-latin_latin-ext-500.woff2') format('woff2'); 
}
/* roboto-600 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('/ftemplate4/tpl-assets/fonts/roboto-v51-latin_latin-ext-600.woff2') format('woff2'); 
}
/* roboto-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/roboto-v51-latin_latin-ext-700.woff2') format('woff2'); 
}
/* playfair-display-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/playfair-display-v40-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* playfair-display-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/playfair-display-v40-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* playfair-display-500 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  src: url('/ftemplate4/tpl-assets/fonts/playfair-display-v40-latin_latin-ext-500.woff2') format('woff2'); 
}
/* playfair-display-600 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  src: url('/ftemplate4/tpl-assets/fonts/playfair-display-v40-latin_latin-ext-600.woff2') format('woff2'); 
}
/* playfair-display-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/playfair-display-v40-latin_latin-ext-700.woff2') format('woff2'); 
}
/* ubuntu-300 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: url('/ftemplate4/tpl-assets/fonts/ubuntu-v21-latin_latin-ext-300.woff2') format('woff2'); 
}
/* ubuntu-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/ubuntu-v21-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* ubuntu-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/ubuntu-v21-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* ubuntu-500 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('/ftemplate4/tpl-assets/fonts/ubuntu-v21-latin_latin-ext-500.woff2') format('woff2'); 
}
/* ubuntu-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/ubuntu-v21-latin_latin-ext-700.woff2') format('woff2'); 
}
/* karla-300 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Karla';
  font-style: normal;
  font-weight: 300;
  src: url('/ftemplate4/tpl-assets/fonts/karla-v33-latin_latin-ext-300.woff2') format('woff2'); 
}
/* karla-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/karla-v33-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* karla-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Karla';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/karla-v33-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* karla-500 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  src: url('/ftemplate4/tpl-assets/fonts/karla-v33-latin_latin-ext-500.woff2') format('woff2'); 
}
/* karla-600 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  src: url('/ftemplate4/tpl-assets/fonts/karla-v33-latin_latin-ext-600.woff2') format('woff2'); 
}
/* karla-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/karla-v33-latin_latin-ext-700.woff2') format('woff2'); 
}
/* montserrat-300 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('/ftemplate4/tpl-assets/fonts/montserrat-v31-latin_latin-ext-300.woff2') format('woff2'); 
}
/* montserrat-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/montserrat-v31-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* montserrat-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/montserrat-v31-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* montserrat-500 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('/ftemplate4/tpl-assets/fonts/montserrat-v31-latin_latin-ext-500.woff2') format('woff2'); 
}
/* montserrat-600 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('/ftemplate4/tpl-assets/fonts/montserrat-v31-latin_latin-ext-600.woff2') format('woff2'); 
}
/* montserrat-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/montserrat-v31-latin_latin-ext-700.woff2') format('woff2'); 
}
/* merriweather-300 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  src: url('/ftemplate4/tpl-assets/fonts/merriweather-v33-latin_latin-ext-300.woff2') format('woff2'); 
}
/* merriweather-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/merriweather-v33-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* merriweather-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/merriweather-v33-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* merriweather-500 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 500;
  src: url('/ftemplate4/tpl-assets/fonts/merriweather-v33-latin_latin-ext-500.woff2') format('woff2'); 
}
/* merriweather-600 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  src: url('/ftemplate4/tpl-assets/fonts/merriweather-v33-latin_latin-ext-600.woff2') format('woff2'); 
}
/* merriweather-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/merriweather-v33-latin_latin-ext-700.woff2') format('woff2'); 
}
/* lora-regular - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/lora-v37-latin_latin-ext-regular.woff2') format('woff2'); 
}
/* lora-italic - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: url('/ftemplate4/tpl-assets/fonts/lora-v37-latin_latin-ext-italic.woff2') format('woff2'); 
}
/* lora-500 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  src: url('/ftemplate4/tpl-assets/fonts/lora-v37-latin_latin-ext-500.woff2') format('woff2'); 
}
/* lora-600 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  src: url('/ftemplate4/tpl-assets/fonts/lora-v37-latin_latin-ext-600.woff2') format('woff2'); 
}
/* lora-700 - latin_latin-ext */
@font-face {
  font-display: swap; 
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  src: url('/ftemplate4/tpl-assets/fonts/lora-v37-latin_latin-ext-700.woff2') format('woff2'); 
}
/***************************************************************
                         ROOT
***************************************************************/
:root {
    /* Default combo used until the configurator applies a picked theme */
    --font-primary: 'Lora';
    --font-secondary: 'Merriweather';
    --title-weight: 700;
    --title-letter-spacing-mob: 0px;
    --title-letter-spacing-desk: 0px;
    --title-fs-mob: 28px;
    --title-fs-desk: 48px;
    --title-transform: none;

    --primary-color: #87B197;
    --secondary-color: #F3F7F4;
    --third-color: #B7D0C1;
    --text-color: #111111;

    /* Contrast-safe text/icon colour for the default primary/third above
       (JS recomputes these per-instance whenever a theme is applied - see
       applyTheme()/onColorFor() in live-sections.js). */
    --on-primary-color: #FFFFFF;
    --on-third-color: #FFFFFF;
    --on-primary-icon-filter: brightness(0) invert(1);
    --primary-accent-color: #87B197;
}


/************************************
            PRE-DEFINED
*************************************/
body {
  font-family: var(--font-primary);
  color: var(--text-color);
}
/* Scoped to .tpl4-scope (not a bare .btn) - the shared configurator UI's
   own root style.css also defines a bare, unscoped ".btn{...}" (its own
   catalog/finish-flow buttons) which loads AFTER this file in template4.php
   and finished-template4.php. Equal specificity + later load order would
   otherwise let the configurator's own button look (transparent bg,
   334px max-width, 18px font, pill radius) leak into every real button
   inside the mounted design (Absenden, Download, ...) instead of this
   file's intended solid-fill style. */
.tpl4-scope .btn {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  border: none;
  letter-spacing: 0;
  padding: 8px 32px;
  border-radius: 0;
  width: auto;
  max-width: none;
}
.tpl4-scope .btn-primary {
  color: var(--on-primary-color);
  background-color: var(--primary-color);
}
.tpl4-scope .btn-primary:hover,
.tpl4-scope .btn-primary:focus,
.tpl4-scope .btn-primary:active {
  /* Hover background is always the fixed dark --text-color, regardless of
     --on-primary-color above (which tracks the *unhovered* primary-color
     background instead) - force white here so the text stays visible even
     when --on-primary-color resolved dark (light/white primary picked). */
  background-color: var(--text-color) !important;
  color: #FFFFFF !important;
}
.tpl4-scope .btn-secondary {
  color: var(--on-third-color);
  background-color: color-mix(in srgb, var(--third-color) 60%, transparent);
}
.tpl4-scope .btn-secondary:hover,
.tpl4-scope .btn-secondary:focus,
.tpl4-scope .btn-secondary:active {
  background-color: var(--text-color) !important;
  color: #FFFFFF !important;
}
/* Same leak, different tag: the shared style.css also has a bare "p{...}"
   (18px, its own intro-text colour) that would otherwise apply to every
   paragraph in the mounted design too - restore Bootstrap Reboot's own
   default (this file never sets a mobile-tier font-size of its own,
   .content-section-text p only gets one - 18px - from 1200px container
   width up, see the @container block below). */
.tpl4-scope p {
  font-size: 16px;
  color: inherit;
}


.hero-block {
  height: 100svh;
}
/* Preview/thumbnail contexts (configurator canvas + catalog picker cards,
   mode:'scaled') don't need a true full-viewport hero - 100svh always
   resolves to the real browser window's actual height, regardless of the
   stage's own much narrower reference width (1440/390px), so a catalog
   card scaled down from that stage ends up with an absurdly tall hero.
   Capped instead to a fixed fraction of the STAGE's own width (cqi - a %
   of the tpl4-stage container's inline-size, i.e. of stageWidth, never of
   the real viewport) - this keeps the same aspect ratio at any on-screen
   size after fitScaled()'s transform:scale() (a uniform scale preserves
   aspect ratio). !important since it must win over the hero-section-3
   tiered height overrides below regardless of source order. Only
   mode:'final' (finished-template4.php, the real site) keeps the true
   100svh full-viewport hero - untouched, no .tpl4-mode-scaled class there. */
.tpl4-mode-scaled .hero-block {
  height: 150cqi !important; /* mobile-stage (390px) default: taller/portrait-ish crop */
}
@container tpl4-stage (min-width: 576px) {
  .tpl4-mode-scaled .hero-block {
    height: 58cqi !important; /* desktop-stage (1440px): shorter/landscape-ish crop */
  }
}
.hero-block-inner {
  box-shadow: 0px 0px 21.6px 0px #00000080;
  max-width: 490px;
  padding: 30px 0;
}
.hero-section {
  overflow: hidden;
}
.hero-section-1::after {
    position: absolute;
    content: "";
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 490px;
    height: 100%;
    background: linear-gradient(180deg, #5C615A 0%, rgba(92, 97, 90, 0) 75%, #5C615A 100%);
    mix-blend-mode: multiply;
}
.hero-section-4 .hero-block-inner {
  box-shadow: none;
  background: none;
}
.hero-section-4 .hero-block-inner::after {
  display: none;
}
.hero-section-4::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #5C615A 0%, rgba(92, 97, 90, 0) 75%, #5C615A 100%);
    mix-blend-mode: multiply;
}
.site-logo {
  color: #FFFFFF;
  font-size: 30px;
  letter-spacing: 3.5px;
  text-decoration: none;
  font-family: var(--font-secondary);
}
.hero-arrow {
  display: block;
  width: 40px;
  height: 40px;
  background-image: url(/ftemplate4/tpl-assets/images/chevron-down.svg);
  background-position: center;
  background-size: 60%;
  background-repeat: no-repeat;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
}
.hero-section-2 .hero-arrow {
  margin-bottom: 30px;
}
.site-logo.logo-line {
  position: relative;
  padding-bottom: 14px;
}
.site-logo.logo-line-right {
  padding-bottom: 0;
  padding-right: 8px;
}
.site-logo.logo-line::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  width: 45px;
  background-color: #FFFFFF;
}
.site-logo.logo-line-right::after {
  height: 30px;
  width: 2px;
  left: auto;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
} 
.hero-text {
  margin-top: 14px;
  font-size: 18px;
  max-width: 200px;
  font-weight: 300;
}
.disturber {
  background-color: var(--primary-color);
  color: var(--on-primary-color);
  font-weight: 600;
  font-size: 15px;
  padding: 1%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  text-decoration: none;
  z-index: 4;
  position: relative;
  box-shadow: 0px 0px 10px 0px #00000080;
  transform: rotate(-10deg);
  margin-right: auto;
}
.navbar-2 {
  background-color: #00000087;
}
.hero-section-2 .disturber {
  position: absolute;
  bottom: 25%;
  right: 5%;
  transform: rotate(10deg);
}
.navbar-2 .hero-text {
  font-size: 12px;
  margin-top: 0;
  margin-left: 8px;
}
.menu-btn {
  background-color: transparent;
  border: none;
  display: flex;
  padding: 0;
}
.menu-btn img {
  width: 25px;
  filter: brightness(0) invert(1);
}
.offcanvas-header {
  padding: 22px 16px;
}
.btn-close:focus {
  box-shadow: none;
}
.navbar .nav-link {
  font-size: 20px;
  color: var(--text-color);
  font-weight: 400;
  text-transform: uppercase;
  transition: all .2s;
}
.navbar .nav-link.active {
  font-weight: 700;
}
.navbar-nav {
  gap: 12px;
}
.navbar-2.navbar-scrolled {
  background-color: #FFFFFF;
}
.navbar-2.navbar-scrolled .hero-text,
.navbar-2.navbar-scrolled .site-logo {
  color: var(--text-color) !important;
}
.navbar-2.navbar-scrolled .logo-line::after {
  background-color: var(--text-color);
}
.navbar-3 .menu-btn img,
.navbar-2.navbar-scrolled .menu-btn img {
  filter: none;
}
.navbar-3 {
  background-color: #FFFFFF;
}

.navbar-3 .hero-text,
.navbar-3 .site-logo {
  color: var(--text-color) !important;
}
.navbar-3 .logo-line::after {
  background-color: var(--text-color);
}
.hero-section-3 .hero-block {
  height: calc(100svh - 61px);
}
.hero-section-3 {
  padding-top: 61px;
}
/* Same preview-thumbnail cap as the base .hero-block above, see the
   comment there - applies here too since hero-section-3 overrides the
   height with its own nav-offset calc(100svh - Npx) at every tier. */
.tpl4-mode-scaled .hero-section-3 .hero-block {
  height: 150cqi !important;
}
@container tpl4-stage (min-width: 576px) {
  .tpl4-mode-scaled .hero-section-3 .hero-block {
    height: 58cqi !important;
  }
}
.content-section-text h2 {
  margin-bottom: 18px;
  color: var(--primary-accent-color);
  font-family: var(--font-secondary);
  font-size: var(--title-fs-mob);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-letter-spacing-mob);
  text-transform: var(--title-transform);
}
.content-section-text p {
  color: var(--text-color);
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0px;
}
.content-section-text p:last-child {
  margin-bottom: 0;
}
.section-padding {
  padding: 30px 0;
}
/* Inter-section spacing: every downloads style (1/2/3 - all share the
   ".downloads-section" class) and contact-3 are "boxed" - each is
   treated as its own visually-separated block - and always get the full
   padding themselves, regardless of neighbor; that padding is considered
   internal to the block, so it isn't part of the visible gap a viewer
   perceives. Every other section defaults to the plain .section-padding
   value, but bumps up to the full amount on whichever side directly
   touches one of those boxed sections (or hero/footer, which are their
   own always-full-bleed special case - untouched themselves, but still
   need the section next to them to independently supply the full
   amount, exactly like before this spacing system existed) - since that
   neighbor has no background of its own, its own padding IS the visible
   gap, so it alone needs to supply the full amount. Two plain sections
   next to each other keep the tighter half+half split.
   Mobile-first: 30px/60px below, doubling to the desktop 60px/120px
   values (matching the original desktop-only ask) inside the existing
   @container tpl4-stage (min-width:1200px) tier further down this file.
   The hero/footer trigger rules cover BOTH directions (section right
   after hero, AND section right before hero; section right before
   footer, AND section right after footer) - the configurator doesn't
   actually force hero first/footer last (no drag-lock on those slots),
   so a section could end up on either side of either one.
   Each mounted block is nested two levels deep - a bare outer <div>
   appended directly to the sequence (created by finished-template4.php/
   main-func.js), containing live-sections.js's own ".tpl4-stage" wrapper,
   containing the real markup - so two adjacent blocks' <section> elements
   are never direct DOM siblings; only those bare OUTER divs are. See
   live-sections.js mount() - it stamps data-section-type/data-section-style
   onto that outer `container` (not its own inner wrapper) specifically so
   the adjacency selectors below can reach it. */
.downloads-section,
.contact-section-2,
.contact-section-3,
.contact-section-4 {
  padding: 60px 0;
}
[data-section-type="downloads"] + [data-section-style] .section-padding,
[data-section-style="contact-2"] + [data-section-style] .section-padding,
[data-section-style="contact-3"] + [data-section-style] .section-padding,
[data-section-style="contact-4"] + [data-section-style] .section-padding,
[data-section-type="hero"] + [data-section-style] .section-padding,
[data-section-type="footer"] + [data-section-style] .section-padding {
  padding-top: 60px;
}
[data-section-style]:has(+ [data-section-type="downloads"]) .section-padding,
[data-section-style]:has(+ [data-section-style="contact-2"]) .section-padding,
[data-section-style]:has(+ [data-section-style="contact-3"]) .section-padding,
[data-section-style]:has(+ [data-section-style="contact-4"]) .section-padding,
[data-section-style]:has(+ [data-section-type="footer"]) .section-padding,
[data-section-style]:has(+ [data-section-type="hero"]) .section-padding {
  padding-bottom: 60px;
}
.gallery-block-overlay .swiper-slide img {
  aspect-ratio: 5/3;
  width: 100%;
}
/* .gallery-half-swiper .swiper-slide-next::after,
.gallery-half-swiper .swiper-slide-prev::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(270deg,rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 100%);
  transition: all .2s;
}
.gallery-half-swiper .swiper-slide-next::after {
  background: linear-gradient(90deg,rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 100%);
} */

.gallery-block-overlay::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(21, 27, 40, 0.604) 0%, rgba(21, 27, 40, 0) 25%, rgba(21, 27, 40, 0) 75%, rgba(21, 27, 40, 0.6) 100%);
  mix-blend-mode: multiply;
  z-index: 4;
  pointer-events: none;
}
.gallery-block-overlay  .swiper-slide-active {
  z-index: 10;
}
/* Scoped to .tpl4-scope (not bare .swiper-button-*) - swiper-bundle.min.css
   is loaded dynamically via JS the moment a swiper-using block is first
   mounted (see live-sections.js's "swiper" REQUIREMENTS entry), which is
   always AFTER sections.css in the page's own <head> - a bare, equally-
   specific .swiper-button-next/-prev here would lose that cascade tie to
   swiper's own later-loaded defaults regardless of what values we set.
   Same leak class as the .btn/p fix elsewhere in this file, opposite
   direction (swiper's CSS arrives late instead of the shared style.css). */
.tpl4-scope .swiper-button-next,
.tpl4-scope .swiper-button-prev {
  width: 60px;
  height: 60px;
  z-index: 5;
}
.tpl4-scope .swiper-button-next::after,
.tpl4-scope .swiper-button-prev::after {
  font-size: 24px;
  font-weight: 700;
  color: #FFFFFF;
}
.content-section-2 .gallery-half-swiper {
  margin-top: 40px;
}
.gallery-block-big .swiper-slide img,
.content-section-big-img img {
  aspect-ratio: 16/9;
  width: 100%;
}
.gallery-block-ratio .swiper-slide img {
  width: 100%;
  aspect-ratio: 16/9;
}
.swiper-thumbs {
  padding-top: 12px;
}
.gallery-block-ratio .row img {
  width: 100%;
  aspect-ratio: 16/9;
}
.gallery-section-block .row {
  --bs-gutter-x: 16px;
  --bs-gutter-y: 16px;
}
.downloads-item {
  aspect-ratio: 7/5;
  width: 100%;
  box-shadow: 0px 0px 10px 0px #0000004D;
}
.download-item-title {
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 2.1px;
  margin-bottom: 18px;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.downloads-block {
  padding-top: 20px;
}
.downloads-section-2,
.downloads-section-1 {
  background-color: var(--secondary-color);
}
.db-icon img {
  width: 32px;
}
.downloads-box {
  border: 1px solid #CBCBC9;
  padding: 24px;
}
.db-title {
  font-weight: 600;
  color: #000000;
}
.downloads-box::after {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  position: absolute;
  background-color: var(--third-color);
  opacity: .23;
  pointer-events: none;
}
.downloads-block-2 .row {
  --bs-gutter-x: 20px;
  --bs-gutter-y: 20px;
}
.downloads-section-3 {
  background-color: var(--primary-color);
}
.downloads-section-3 .db-title {
  color: var(--on-primary-color);
}
.downloads-section-3 .db-icon img {
  filter: var(--on-primary-icon-filter);
}
.downloads-section-3 .content-section-text h2 {
  color: var(--on-primary-color);
}
.section-top-title {
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 8px;
}
.form-checks-title,
.form-check-label {
  font-weight: 300;
  color: var(--text-color);
  line-height: 1.35;
}
.form-check-label a {
  color: var(--text-color);
  text-decoration: none;
}
.form-check-label a:hover {
  text-decoration: underline;
}
.form-check-input[type=checkbox],
.form-check-input[type=radio] {
  width: 25px;
  height: 25px;
  border: 1px solid var(--text-color);
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  cursor: pointer;
  margin-top: 0;
  margin-right: 10px;
}
.form-check-input[type=checkbox]:checked,
.form-check-input[type=radio]:checked {
  background-color: transparent;
  background-image: none;
  border-color: var(--text-color);
}
.form-check-input[type=checkbox]:checked::before,
.form-check-input[type=radio]:checked::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 15px;
  height: 15px;

  background-color: var(--primary-color);
}
.form-check-input[type=checkbox]:focus,
.form-check-input[type=radio]:focus {
  border-color: var(--text-color);
  box-shadow: none;
}
.form-check {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
.form-control {
  background-color: transparent;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--primary-accent-color);
  color: var(--text-color);
  font-weight: 300;
  padding: 8px 12px;
}
.form-control::placeholder {
  color: var(--text-color);
  font-weight: 300;
}
.form-control:focus {
  box-shadow: none;
  background-color: transparent;
  border-color: var(--text-color);
}
.form-checks-title {
  margin-bottom: 16px;
}
.form-item {
  margin-top: 20px;
}
.form-checks {
  margin-bottom: 20px;
}
.form-btn {
  margin-top: 25px;
}
.contact-section-block {
  margin-top: 40px;
}
.contact-form-container {
  max-width: 785px;
  width: 100%;
}
.contact-section-2 {
  background-color: var(--secondary-color);
}
.contact-side-text p,
.contact-side-text a {
  color: var(--text-color);
  font-weight: 300;
  line-height: 1.6;
  text-decoration: none;
}
.contact-side-text p:last-child {
  margin-bottom: 0;
}
.contact-side-text a:hover {
  text-decoration: underline;
}
.contact-side-text p strong {
  font-weight: 600;
}
.contact-side-title {
  font-weight: 700;
  text-transform: uppercase;
}
.contact-section-side {
  gap: 35px;
  max-width: 280px;
  width: 100%;
}
.contact-side-logo {
  background-color: color-mix(in srgb, var(--third-color) 32%, transparent);
  color: var(--primary-accent-color);
  font-size: 44px;
  text-transform: uppercase;
  letter-spacing: var(--title-letter-spacing-mob);;
  font-weight: 400;
  padding: 0 25px;
  font-family: var(--font-secondary);
  margin-bottom: 26px;
}
.contact-section-block {
  gap: 50px;
}
.downloads-section {
  overflow: hidden;
}
.contact-section-3 {
  background-color: var(--primary-color);
}
.contact-section-3 .contact-side-logo,
.contact-section-3 .section-top-title,
.contact-section-3 .content-section-text h2,
.contact-section-3 .contact-side-title,
.contact-section-3 .contact-side-text p,
.contact-section-3 .contact-side-text a,
.contact-section-3 .form-checks-title,
.contact-section-3 .form-check-label,
.contact-section-3 .form-check-label a,
.contact-section-3 .form-control,
.contact-section-3 .form-control::placeholder {
  color: var(--on-primary-color);
}
.contact-section-3 .form-control,
.contact-section-3 .form-check-input[type=checkbox]:checked,
.contact-section-3 .form-check-input[type=radio]:checked,
.contact-section-3 .form-check-input {
  border-color: var(--on-primary-color);
}
.contact-section-3 .form-check-input[type=checkbox]:checked::before,
.contact-section-3 .form-check-input[type=radio]:checked::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 15px;
  height: 15px;
  background-color: color-mix(in srgb, var(--third-color) 80%, transparent);
}
.contact-section-3 .form-check-input[type=checkbox]:focus,
.contact-section-3 .form-check-input[type=radio]:focus {
  border-color: var(--on-primary-color);
  box-shadow: none;
}
.contact-section-4 {
  background-color: var(--secondary-color);
}
.contact-section-4 .form-control {
  background-color: #FFFFFF;
}
.contact-side-link-icon {
  width: 45px;
  height: 45px;
  background-color: color-mix(in srgb, var(--third-color) 100%, transparent);
}
.contact-section-4 .form-check-input[type=checkbox]:checked::before,
.contact-section-4 .form-check-input[type=radio]:checked::before {
  background-color: color-mix(in srgb, var(--third-color) 100%, transparent);
}
.contact-side-link-icon img {
  width: auto;
  height: auto;
  max-width: 18px;
  max-height: 18px;
}
.contact-side-links a {
  color: var(--text-color);
  font-weight: 300;
  font-size: 18px;
  gap: 14px;
  text-decoration: none;
}
.contact-side-links a:hover,
.contact-side-links a:first-child {
  text-decoration: underline;
}
.contact-side-links {
  gap: 12px;
}
.contact-side-title-2 {
  font-weight: 600;
  margin-bottom: 16px;
  font-size: 24px;
}
.contact-side-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
}
.contact-section-4 .content-section-text h2 {
  color: var(--text-color);
}
footer {
  background-color: var(--primary-color);
  padding: 40px 0;
}
footer a,
footer span {
  color: var(--on-primary-color);
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 1.5px;
}
footer span strong {
  font-weight: 700;
}
footer a:hover {
  text-decoration: underline;
}
.content-section-2 .content-section-text {
  max-width: 1160px;
}
.lage-section-2 .content-section-text {
  max-width: 1095px;
}
.lage-table-icon {
  display: flex;
  align-items: center;
  justify-content: end;
}
.lage-table-icon svg {
  width: auto;
  height: auto;
  max-height: 25px;
  color: var(--primary-accent-color);
}
.lage-table-container thead th {
  color: var(--primary-accent-color);
  font-weight: 700;
  font-size: 18px;
  border-bottom: 3px solid var(--primary-accent-color);
  vertical-align: middle;
  padding: 10px 6px;
}
.lage-table-container thead th:first-child {
  text-align: start;
  padding-left: 0;
}
.lage-table-container tbody td {
  font-weight: 300;
  font-size: 16px;
  padding: 6px;
  border-bottom: 1px solid var(--primary-accent-color);
  text-align: end;
  white-space: nowrap;
}
.lage-table-container tbody td:first-child {
  text-align: start;
  padding-left: 0;
}
.lage-table-container tbody td:last-child {
  text-align: end;
  padding-right: 0;
}
.lage-table-container tbody tr:last-child td {
  border-bottom: none;
}
.angebot-iso-container img {
  max-height: 240px;
  max-width: 100%;
}
.angebot-table-desc span {
  font-weight: 300;
  line-height: 1.6;
}
.angebot-table-desc span strong {
  font-weight: 600;
}
.angebot-table-container thead th {
  background-color: var(--primary-color);
  color: var(--on-primary-color);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 11.5px 6px;
  text-transform: uppercase;
  white-space: nowrap;
}
.angebot-table-container tbody td {
  color: var(--text-color);
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  border: none;
  padding: 11px 6px;
  border-bottom: 1px solid #F1EEEB;
  white-space: nowrap;
}
.angebot-table-container tbody td img {
  width: 24px;
}
.angebot-table-container .table-arrow {
  width: 40px;
  white-space: nowrap;
}
.angebot-table-container .toggle-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
}
.angebot-table-container .toggle-row svg {
  transition: transform 0.2s ease;
}
.angebot-table-container .toggle-row.open svg {
  transform: rotate(180deg);
}
.angebot-table-container .hidden-row > td {
  padding: 0;
  background-color: var(--secondary-color);
  white-space: normal;
  border-bottom: 1px solid #F1EEEB;
}
.angebot-table-container .table-mobile {
  padding: 6px 15px;
}
.angebot-table-container .table-mobile-item {
  padding: 10px 0;
  font-size: 14px;
  color: var(--text-color);
}
.angebot-table-container .table-mobile-item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.angebot-table-container .table-mobile-item span {
  font-weight: 600;
}
.angebot-table-container .table-mobile-item img {
  width: 24px;
}
.angebot-table-container tbody tr:hover td {
  background-color: var(--secondary-color);
}
.filter-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--text-color);
  border-radius: 0;
  background-color: transparent;
  padding: 7px 50px 7px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.9;
  cursor: pointer;
  width: 100%;
}
.filter-select-wrap::after {
  content: "";
  position: absolute;
  top: 45%;
  right: 18px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}
.filter-select:focus,
.filter-select:focus-visible {
  box-shadow: none;
  outline: none;
}
.angebot-table-filter .row {
  row-gap: 24px;
}
.filter-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
}
.price-range-wrap,
.size-range-wrap {
  padding-top: 6px;
}
.range-slider {
  position: relative;
  margin-top: 14px;
  margin-left: 10px;
  margin-right: 10px;
  height: 6px;
  background-color: var(--secondary-color);
  border: none;
  touch-action: none;
}
.range-slider .ui-slider-range {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  background-color: var(--third-color);
  height: 100%;
}
.range-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  top: -7px;
  margin-left: -10px;
  background-color: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  touch-action: none;
}
.range-val {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-color);
}
.availability-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-color);
}
.angebot-table-container .no-flats td {
  font-size: 16px;
  font-weight: 300;
  padding: 20px 6px;
}
.availability-wrap .form-check {
  padding-left: 0;
}
.availability-wrap .form-check-input[type=checkbox] {
  width: 24px;
  height: 24px;
}
.availability-wrap .form-check-input[type=checkbox]:checked {
  background-color: transparent;
}
.availability-wrap .form-check-input[type=checkbox]:checked::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 7px;
  width: 8px;
  height: 14px;
  background-color: transparent;
  border: solid var(--primary-accent-color);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@container tpl4-stage (min-width: 576px){
  .disturber {
    position: absolute;
    top: auto;
    bottom: 25%;
    left: -5%;
  }
  .hero-section-2 .disturber {
    position: absolute;
    bottom: 25%;
    right: 3%;
    left: auto;
  }
}

@container tpl4-stage (min-width: 768px){
  .disturber {
    left: -25%;
  }
}

@container tpl4-stage (min-width: 992px){
  .disturber {
    left: -50%;
    font-size: 21px;
    width: 210px;
    height: 210px;
  }
 
  .hero-arrow {
    width: 70px;
    height: 70px;
    background-size: 60%;
    border: 3px solid #FFFFFF;
  }
  
  .navbar-2 {
    padding: 20px 0;
  }
  .hero-section-2 .disturber {
    bottom: 30%;
    right: 0;
  }
  .navbar .nav-link {
    font-size: 16px;
    color: #FFFFFF;
    font-weight: 400;
    text-transform: uppercase;
  }
  .navbar .nav-link:hover,
  .navbar .nav-link.active {
    color: #FFFFFF;
  }
  .navbar-nav {
    gap: 12px;
  }
  .navbar-3 .nav-link,
  .navbar-3 .nav-link.active,
  .navbar-3 .nav-link:hover,
  .navbar-2.navbar-scrolled .nav-link.active,
  .navbar-2.navbar-scrolled .nav-link:hover,
  .navbar-2.navbar-scrolled .nav-link {
    color: var(--text-color);
  }
  .navbar .nav-link:hover {
    font-weight: 700;
  }
  .hero-section-3 .hero-block {
    height: calc(100svh - 85px);
  }
  .hero-section-3 {
    padding-top: 85px;
  }
  .swiper-thumbs {
    padding-top: 20px;
  }
  .form-checks-title,
  .form-check-label {
    font-size: 18px;
  }
  .form-control,
  .form-control::placeholder {
    font-size: 18px;
  }
  .form-checks-title {
    margin-bottom: 20px;
  }
  .form-item {
    margin-top: 35px;
  }
  .form-checks {
    margin-bottom: 35px;
  }
  .form-btn {
    margin-top: 45px;
  }
  .contact-side-title {
    font-size: 18px;
  }
  .contact-section-side {
    gap: 45px;
  }
  .contact-side-logo {
    margin-bottom: 42px;
    margin-top: 10px;
  }
  .lage-section-1 .lage-map {
    padding-right: 20px;
  }
}

@container tpl4-stage (min-width: 1200px){
  /* Desktop-tier inter-section spacing - doubles the mobile-first 30/60px
     values from the ".section-padding"/"boxed" rules above back up to
     60/120px. See the big comment above ".downloads-section, .contact-section-3"
     further up this file for the full reasoning. */
  .section-padding {
    padding: 60px 0;
  }
  .downloads-section,
  .contact-section-2,
  .contact-section-3,
  .contact-section-4 {
    padding: 120px 0;
  }
  [data-section-type="downloads"] + [data-section-style] .section-padding,
  [data-section-style="contact-2"] + [data-section-style] .section-padding,
  [data-section-style="contact-3"] + [data-section-style] .section-padding,
  [data-section-style="contact-4"] + [data-section-style] .section-padding,
  [data-section-type="hero"] + [data-section-style] .section-padding,
  [data-section-type="footer"] + [data-section-style] .section-padding {
    padding-top: 120px;
  }
  [data-section-style]:has(+ [data-section-type="downloads"]) .section-padding,
  [data-section-style]:has(+ [data-section-style="contact-2"]) .section-padding,
  [data-section-style]:has(+ [data-section-style="contact-3"]) .section-padding,
  [data-section-style]:has(+ [data-section-style="contact-4"]) .section-padding,
  [data-section-style]:has(+ [data-section-type="footer"]) .section-padding,
  [data-section-style]:has(+ [data-section-type="hero"]) .section-padding {
    padding-bottom: 120px;
  }
  .disturber {
    left: -65%;
  }
  .navbar-2 {
    padding: 32px 0;
  }
   .hero-text {
    margin-top: 30px;
    font-size: 20px;
  }
  .site-logo {
    font-size: 44px;
  }
  .site-logo.logo-line {
    padding-bottom: 24px;
  }
  .site-logo.logo-line-right {
    padding-bottom: 0;
    padding-right: 11px;
  }
  .hero-block-inner {
    padding: 40px 0;
  }
  .navbar-2 .hero-text {
    font-size: 16px;
    margin-top: 0;
    margin-left: 24px;
  }
  .site-logo.logo-line-right::after {
    height: 45px;
    width: 3px;
  } 
   .navbar-nav {
    gap: 24px;
  }
   .hero-section-3 .hero-block {
    height: calc(100svh - 130px);
  }
  .hero-section-3 {
    padding-top: 130px;
  }
  .content-section-text h2 {
    margin-bottom: 38px;
    font-size: var(--title-fs-desk);
    letter-spacing: var(--title-letter-spacing-desk);
  }
  .content-section-text p {
    font-size: 18px;
  }
  .content-section-2 .gallery-half-swiper {
    margin-top: 80px;
  }
  .gallery-section-block .row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 24px;
  }
  .download-item-title {
    font-size: 21px;
    margin-bottom: 21px;
  }
  .downloads-block {
    padding-top: 45px;
  }
  .downloads-block-2 {
    padding-top: 60px;
  }
  .section-top-title {
    font-size: 18px;
    margin-bottom: 12px;
  }
  .contact-section-block {
    margin-top: 80px;
  }
  .contact-section-2 .contact-section-block  {
    margin-top: 64px;
  }
  .contact-side-link-icon {
    width: 58px;
    height: 58px;
  }
  .contact-side-link-icon img {
    max-width: 24px;
    max-height: 24px;
  }
  .contact-side-links a {
    font-size: 24px;
    gap: 20px;
  }
  .contact-side-title-2 {
    font-size: 32px;
  }
  .contact-side-name {
    font-size: 24px;
  }
  footer a,
  footer span {
    font-size: 16px;
    letter-spacing: 1.6px;
  }
  .footer-group a,
  .footer-group span,
  .footer-top a {
    position: relative;
  }
  .footer-group a::after,
  .footer-group span::after,
  .footer-top a::after {
    position: absolute;
    content: "";
    width: 1px;
    height: 16px;
    background-color: #FFFFFF;
    top: 50%;
    transform: translateY(-50%);
    right: -12px;
    opacity: .5;
  }
  .footer-group a:last-child:after,
  .footer-top a:last-child:after {
    display: none;
  }
  .content-section-text p {
    margin-bottom: 20px;
  }
  .content-section-text p:last-child {
    margin-bottom: 0;
  }
  .lage-section-1 .lage-map {
    padding-right: 40px;
  }
  .lage-table-icon {
    justify-content: center;
  }
  .angebot-table-desc span {
    font-size: 18px;
  }
  .angebot-table-container thead th {
    font-size: 14px
  }
  .angebot-table-container tbody td {
    font-size: 16px;
  }
  .angebot-block-4 .angebot-iso-container {
    width: 30%;
  }
  .angebot-4-table-info-wrap {
    width: 69%;
  }
  .angebot-block-4 thead th {
    white-space: normal;
    vertical-align: middle;
    padding: 3px 6px;
    text-align: center;
  }
  .angebot-block-4 thead th span {
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .angebot-block-4 .angebot-iso-container {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  .lage-table-container tbody td {
    font-size: 21px;
  }
  .lage-table-container thead th {
    font-size: 23px;
  }
  .lage-table-icon svg {
    max-height: 35px;
  }
}

@container tpl4-stage (min-width: 1400px){
  .container {
    max-width: 1394px;
  }
   .content-section-4-block {
    gap: 34px;
  }
  .content-section-4-block .content-section-big-img {
    width: 52.6%;
    flex-shrink: 0;
  }
  .content-section-4-block .content-section-text h2 {
    max-width: 535px;
  }
  .downloads-block .row {
    --bs-gutter-x: 57px;
  }
  .downloads-block-2 .row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
  }
  .contact-section-block {
    gap: 160px;
  }
  .contact-section-4 .contact-section-block {
    gap: 77px;
  }
  .footer-group a::after,
  .footer-group span::after,
  .footer-top a::after {
    right: -24px;
  }
}

/******************************************************************
 * Every breakpoint-gated Bootstrap utility/grid class actually used across
 * the section fragments is re-implemented below as a @container query keyed
 * to .tpl4-stage's own inline-size, instead of relying on Bootstrap's real
 * @media (which reads the real browser viewport). In "scaled" mode the
 * stage's CSS width is pinned to a fixed reference width regardless of the
 * surrounding page - 1440px for the desktop preview, 390px when the
 * configurator's Desktop/Mobile toggle (see live-sections.js
 * MOBILE_STAGE_WIDTH) is switched to mobile - and a `transform:scale()`
 * only affects paint, not that CSS width, so @container correctly measures
 * it either way. In "final" mode the stage has no fixed width, so it
 * naturally tracks the real page/viewport width and stays responsive as
 * normal for real visitors.
 *
 * Since the configurator's own browser window is normally desktop-sized
 * regardless of which toggle state is active, Bootstrap's real @media
 * versions of these same classes are ALSO always live and would win by
 * themselves whenever the mobile toggle sets the stage narrower than their
 * breakpoint. The block right below (no @container condition - applies
 * unconditionally) resets each one back to its mobile/"off" value at
 * higher specificity than Bootstrap's bare class, so the @container blocks
 * further down are the only thing that can switch it back to the desktop
 * value, and only once the stage container is actually wide enough.
 * Same technique/reasoning as template2's tpl2-stage block - see that
 * file's comment for the fuller writeup.
 ******************************************************************/
.tpl4-stage {
  container-type: inline-size;
  container-name: tpl4-stage;
}

/* Mobile/"off" defaults - must stay before the @container blocks below so
   equal-specificity ties resolve in the @container rule's favor once the
   stage is wide enough. Matches Bootstrap's own mobile-first fallback
   (.row > * { flex-shrink:0; width:100%; max-width:100% }). */
.tpl4-scope .col-sm-6,
.tpl4-scope .col-md-6,
.tpl4-scope .col-lg-4,
.tpl4-scope .col-lg-6,
.tpl4-scope .col-xl-2,
.tpl4-scope .col-xl-3,
.tpl4-scope .col-xl-4,
.tpl4-scope .col-xl-6 {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}
.tpl4-scope .flex-sm-row,
.tpl4-scope .flex-md-row,
.tpl4-scope .flex-xl-row,
.tpl4-scope .flex-xxl-row {
  flex-direction: column !important;
}
/* Gap/margin/padding utilities - same "off" reasoning as the grid resets
   above, for the breakpoint-gated spacing classes used in the fragments.
   Each compound selector is scoped to the exact class combo that appears
   in the markup (there's no other way to know which co-existing base
   value it should restore) - matches template2's col-6.col-xxl-4 tie-
   breaking technique so the @container blocks below win once wide enough. */
.tpl4-scope .gap-3.gap-xl-4 { gap: 1rem !important; }              /* downloads-box: pairs with gap-3 */
.tpl4-scope .gap-3.gap-lg-4 { gap: 1rem !important; }               /* form-checks: pairs with gap-3 */
.tpl4-scope .gap-2.gap-sm-4.gap-xxl-5 { gap: 0.5rem !important; }   /* footer-top: pairs with gap-2 */
.tpl4-scope .gap-2.gap-sm-3.gap-xxl-5 { gap: 0.5rem !important; }   /* footer-bottom: pairs with gap-2 */
.tpl4-scope .gap-2.gap-md-3.gap-lg-4.gap-xxl-5 { gap: 0.5rem !important; } /* footer-group: pairs with gap-2 */
.tpl4-scope .row.g-4.gx-xl-5 { --bs-gutter-x: 1.5rem !important; }  /* downloads row: pairs with g-4 */
.tpl4-scope .mb-xl-5 { margin-bottom: 1.5rem !important; }          /* bare (h2/content-section-text) - mobile gets some breathing room too, not literally 0 */
.tpl4-scope .mb-4.mb-xl-5 { margin-bottom: 1.5rem !important; }     /* angebot-iso-container/table-filter: pairs with mb-4 */
.tpl4-scope .mt-3.mt-lg-4 { margin-top: 1rem !important; }          /* angebot-table-desc: pairs with mt-3 */
.tpl4-scope .mt-4.mt-lg-5 { margin-top: 1.5rem !important; }        /* content-section-big-img: pairs with mt-4 */
.tpl4-scope .mt-4.mt-xxl-0 { margin-top: 1.5rem !important; }       /* content-section-big-img: pairs with mt-4 */
.tpl4-scope .pt-4.pt-xl-5 { padding-top: 1.5rem !important; }       /* content-section-big-img (lage-2): pairs with pt-4 */
/* content-4.html/lage-3.html's text+image row - no base flex-column paired
   with it (just d-xxl-flex alone), so the "off" state is the browser's own
   default block stacking, not a flex row. */
.tpl4-scope .d-xxl-flex {
  display: block !important;
}
/* Angebot table's mobile-only "expand details" column/button - tag-scoped
   (not a bare .d-lg-none catch-all): the same class also sits on
   <tr class="hidden-row d-lg-none" style="display:none"> for the
   JS-toggled detail row, which must stay collapsed by default - an
   untagged rule would force those open unconditionally instead of leaving
   that to the toggle-row click handler. */
.tpl4-scope th.d-lg-none,
.tpl4-scope td.d-lg-none {
  display: table-cell !important;
}
.tpl4-scope button.d-lg-none {
  display: flex !important;
}
/* Angebot table's desktop-only columns (Nutzung/Teilflächen/... - paired
   with base d-none in the markup) - stay hidden by default on mobile. */
.tpl4-scope th.d-lg-table-cell,
.tpl4-scope td.d-lg-table-cell {
  display: none !important;
}

/* Hero-2/hero-3 nav hamburger/offcanvas - Bootstrap's navbar-expand-lg
   forces the links inline and hides the toggler via its own real
   @media(min-width:992), which (same reasoning as above) stays live
   regardless of the stage. Reset back to the closed/hamburger presentation
   by default. */
.tpl4-scope .navbar-expand-lg .navbar-nav {
  flex-direction: column !important;
}
.tpl4-scope .navbar-expand-lg .offcanvas {
  position: fixed !important;
  z-index: 1045 !important;
  visibility: hidden !important;
  transform: translateX(100%) !important;
  transition: transform .3s ease-in-out !important;
  /* Same reasoning as template2: the closed offcanvas's own box is
     0-height here (its content isn't, though) - without a clip, that
     content still overflows past the 0-height box and gets counted in the
     scaled-preview scaling code's wrapper.scrollHeight measurement
     (fitScaled()), padding out the block preview card with blank space. */
  overflow: hidden !important;
}
.tpl4-scope .navbar-expand-lg .offcanvas.show:not(.hiding),
.tpl4-scope .navbar-expand-lg .offcanvas.showing {
  transform: none !important;
}
.tpl4-scope .navbar-expand-lg .offcanvas.show,
.tpl4-scope .navbar-expand-lg .offcanvas.showing,
.tpl4-scope .navbar-expand-lg .offcanvas.hiding {
  visibility: visible !important;
}

@container tpl4-stage (min-width: 576px) {
  .tpl4-scope .col-sm-6 { flex: 0 0 auto !important; width: 50% !important; }
  .tpl4-scope .flex-sm-row { flex-direction: row !important; }
  .tpl4-scope .gap-2.gap-sm-4.gap-xxl-5 { gap: 1.5rem !important; }
  .tpl4-scope .gap-2.gap-sm-3.gap-xxl-5 { gap: 1rem !important; }
}

@container tpl4-stage (min-width: 768px) {
  .tpl4-scope .col-md-6 { flex: 0 0 auto !important; width: 50% !important; }
  .tpl4-scope .flex-md-row { flex-direction: row !important; }
  .tpl4-scope .gap-2.gap-md-3.gap-lg-4.gap-xxl-5 { gap: 1rem !important; }
}

@container tpl4-stage (min-width: 992px) {
  .tpl4-scope .col-lg-4 { flex: 0 0 auto !important; width: 33.33333333% !important; }
  .tpl4-scope .col-lg-6 { flex: 0 0 auto !important; width: 50% !important; }
  .tpl4-scope th.d-lg-none,
  .tpl4-scope td.d-lg-none,
  .tpl4-scope button.d-lg-none {
    display: none !important;
  }
  .tpl4-scope th.d-lg-table-cell,
  .tpl4-scope td.d-lg-table-cell {
    display: table-cell !important;
  }
  .tpl4-scope .navbar-expand-lg .navbar-nav { flex-direction: row !important; }
  .tpl4-scope .navbar-expand-lg .offcanvas {
    position: static !important;
    z-index: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    transform: none !important;
    transition: none !important;
    overflow: visible !important;
  }
  .tpl4-scope .gap-3.gap-lg-4 { gap: 1.5rem !important; }
  .tpl4-scope .gap-2.gap-md-3.gap-lg-4.gap-xxl-5 { gap: 1.5rem !important; }
  .tpl4-scope .mt-3.mt-lg-4 { margin-top: 1.5rem !important; }
  .tpl4-scope .mt-4.mt-lg-5 { margin-top: 3rem !important; }
}

@container tpl4-stage (min-width: 1200px) {
  .tpl4-scope .col-xl-2 { flex: 0 0 auto !important; width: 16.66666667% !important; }
  .tpl4-scope .col-xl-3 { flex: 0 0 auto !important; width: 25% !important; }
  .tpl4-scope .col-xl-4 { flex: 0 0 auto !important; width: 33.33333333% !important; }
  .tpl4-scope .col-xl-6 { flex: 0 0 auto !important; width: 50% !important; }
  .tpl4-scope .flex-xl-row { flex-direction: row !important; }
  .tpl4-scope .gap-3.gap-xl-4 { gap: 1.5rem !important; }
  .tpl4-scope .row.g-4.gx-xl-5 { --bs-gutter-x: 3rem !important; }
  .tpl4-scope .mb-xl-5 { margin-bottom: 3rem !important; }
  .tpl4-scope .mb-4.mb-xl-5 { margin-bottom: 3rem !important; }
  .tpl4-scope .pt-4.pt-xl-5 { padding-top: 3rem !important; }
}

@container tpl4-stage (min-width: 1400px) {
  .tpl4-scope .flex-xxl-row { flex-direction: row !important; }
  .tpl4-scope .d-xxl-flex { display: flex !important; }
  .tpl4-scope .gap-2.gap-sm-4.gap-xxl-5,
  .tpl4-scope .gap-2.gap-sm-3.gap-xxl-5,
  .tpl4-scope .gap-2.gap-md-3.gap-lg-4.gap-xxl-5 { gap: 3rem !important; }
  .tpl4-scope .mt-4.mt-xxl-0 { margin-top: 0 !important; }
}