@charset "UTF-8";
/*==========================
css styles for MuellerSmartHomeEnergieManagement.ch
version 01/2024
author: Norman Sieger
copyright: S:D:I-Norman-Sieger

==========================*/

@font-face {
font-display: swap; 
font-family: 'Inter';
font-style: normal;
font-weight: 200;
src: url('../fonts/inter/inter-v13-latin-200.woff2') format('woff2'); 
}
@font-face {
font-display: swap; 
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: url('../fonts/inter/inter-v13-latin-regular.woff2') format('woff2'); 
}

@font-face {
font-display: swap; 
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: url('../fonts/inter/inter-v13-latin-700.woff2') format('woff2'); 
}

:root {
--ff-primary: 'Inter', sans-serif;
--ff-header: 'Inter', cursive; 
--minFontSize: 1.1rem;
--maxFontSize: 1.25rem;
--scaler: 4vw;
--spacer: 0.8em;
--box-shadow: 0.68em 1.6em 1.5em -0.875em hsla(var(--clr-neutral-hs), 60%, 1);
--clr-neutral-hs: 0, 0%;
--clr-neutral-000: hsla(var(--clr-neutral-hs), 0%, 1);
--clr-neutral-050: hsla(var(--clr-neutral-hs), 50%, 1); 
--clr-neutral-100: hsla(var(--clr-neutral-hs), 100%, 1); 
--clr-primary-hs: 230, 93%;
--clr-primary: hsla(var(--clr-primary-hs), 50%, 1);
--clr-secondary-hs: 0, 100%;
--clr-secondary: hsla(var(--clr-secondary-hs), 33%, 1);
--clr-accent-hs: 119, 100%;
--clr-accent: hsla(var(--clr-accent-hs), 50%, 1);
--clr-links: hsl(229, 84%, 50%);
--clr-links-hover: hsl(222, 100%, 60%);
}

*, *::before, *::after {box-sizing: border-box;
}

h1, .h1, h2, .h2,h3, .h3 {line-height: 1.1; }
body, header, h1, h2, h3, ul, li, button, p {margin: 0; }
img {max-width: 100%; height: auto; display: block; object-fit:cover;}
ul[class], ol[class] { padding: 0; list-style: none;}
button, input, textarea, select {font:inherit;}

html {scroll-behavior: smooth;}

body {
font-family:  var(--ff-primary); 
font-weight: 200;
min-height: 100vh;
font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
line-height: 1.2;
margin: 0;
}


section, .section {
padding: 1.5em 0;

}
.container {
padding: 0;
margin: 0 auto;
width: min(95ch, 100vw - 1.2em);
}

.flow > * + * {
margin-top: var(--flow-space, var(--spacer));
}

p, .p {
--flow-space: 1.6rem;
font-size: clamp( calc(var(--minFontSize) * 0.8), calc(var(--scaler) * 0.7), calc(var(--maxFontSize) * 0.9) );
text-wrap: balance;
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto; 
}

h1, h2 {max-width: 25ch;}

h1, h2, h3, h4, h5, h6 {
font-family: var(--ff-header); 
font-weight: 400;
margin-top: 0;
margin-bottom: 1.3rem;
letter-spacing: -0.1rem;
line-height: 1.2;

} 

h1 {
font-size: clamp( calc(var(--minFontSize) * 1.5), calc(var(--scaler) * 1.2), calc(var(--maxFontSize) * 2.4) );
}

h2 {
font-size: clamp( calc(var(--minFontSize) * 1.3), calc(var(--scaler) * 1.1), calc(var(--maxFontSize) * 2.3) );
}

h3 {
font-size: clamp( calc(var(--minFontSize) * 1.3), calc(var(--scaler) * 1.1), calc(var(--maxFontSize) * 1.9) );
}

.bg-dark {
--bg: var(--clr-neutral-100);
--fg: var(--clr-neutral-000);
color: var(--clr-neutral-100);
background-color: var(--clr-neutral-000);
}
.bg-light {
--bg: var(--clr-neutral-000);
--fg: var(--clr-neutral-100);
color: var(--clr-neutral-000);
background-color: var(--clr-neutral-100);
}

.bg-primary {
--bg: var(--clr-secondary);
--fg: var(--clr-primary);
color: var(--clr-secondary);
background-color: var(--clr-primary);
}
.bg-secondary {
--bg: var(--clr-primary);
--fg: var(--clr-secondary);
color: var(--clr-primary);
background-color: var(--clr-secondary);
}
.bg-accent {
--bg: var(--clr-primary);
--fg: var(--clr-neutral-100);
color: var(--clr-neutral-000);
background-color: var(--clr-accent);
}

.clr-primary {color: var(--clr-primary);}
.clr-secondary {color: var(--clr-secondary);}
.clr-accent {color: var(--clr-accent);}

.clr-neutral-000 {color: var(--clr-neutral-000);} 
.clr-neutral-050 {color: var(--clr-neutral-050);}
.clr-neutral-100 {color: var(--clr-neutral-100);}


.article_item {
transition: background-color 1s ease-out; 
margin-top: var(--spacer);  
padding: clamp(0.75rem, 1%, 2rem); 
display: flex;
flex-direction: column;
}


.article_item footer {
font-size: clamp( calc(var(--minFontSize) * 0.5), calc(var(--scaler) * 0.7), calc(var(--maxFontSize) * 0.8) );
padding-top: 2em;
text-align: right;
flex-grow: 1;
color: var(--clr-neutral-100);
}

.article_item--Hcentered {
text-align: center;
}

.article_item--Vcentered {
justify-content: center;
}

.article_item--centered  {
align-items: center;
justify-content: center;
}

.article_item--shadow {
box-shadow: var(--box-shadow);
}
.article_item p:nth-last-of-type(2) {
flex-grow: 1;
}

.row-2-3-3 {
display: grid;
grid-template-columns: 0.25fr repeat(2,0.375fr);
grid-template-rows: 1fr;
gap: 6px;
}

.row-2-2 {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: 1fr;
gap: 6px;
}

.row-3-3-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr;
gap: 6px;
}

.row-3-5 {
display: grid;
grid-template-columns: 0.375fr 0.625fr;
grid-template-rows: 1fr;
gap: 2em;
}

.row-5-3 {
display: grid;
grid-template-columns:  0.625fr 0.375fr;
grid-template-rows: 1fr;
gap: 6px;
}

@media screen and (max-width:700px) {
.row-2-3-3, .row-2-2, .row-3-3-3, .row-3-5, .row-5-3 {
grid-template-columns: 1fr;
}
}


.menu
{list-style-type: none;}

.logo {
padding: 0;
}
.logo a {
text-decoration: none;
}
.logoimg {
height: 4em;

}

.nav_item {
padding: 0 0.4em;

}
.nav_item a {
text-decoration: none;
}

.nav_item.button {
padding: 0.1em 0.2em;
}
.nav_item:not(.button) a:hover,
.nav_item a:hover::after {
color: var(--clr-neutral-050);
background: var(--clr-neutral-100); 
}

.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.menu li a {
display: block;
padding: 0.8em 0.3em;
color: var(--clr-neutral-000);   
}

.toggle a {
text-decoration: none;
font-size: 2rem;
padding: 0;
}

.menu li.subitem a {padding: 0.5em 2em;}

.toggle {order: 1;}

.nav_item.button {
order: 2;
}
.nav_item {
order: 3;
width: 100%;
text-align: center;
display: none;
}
.active .nav_item {
display: block;
}
.button.secondary {
border-bottom: 0.2em var(--clr-accent) solid;
}
.submenu {
display: none;
}
.submenu-active .submenu {
display: block;
}
.has-submenu i {
font-size: 1rem;
}
.has-submenu > a::after {
color: var(--clr-neutral-100);
padding-left: 0.2em;
content: ' \25BD';
font-size: 1.2em;
}

.subitem a {
padding: 0.9em 0.21em;
}
.submenu-active {
background: var(--clr-neutral-050);
border-radius: 0.4em;
}

@media all and (min-width: 700px) {
.menu {
justify-content: center;
}
.logo {
flex: 1;
}
.nav_item.button {
width: auto;
order: 1;
display: block;
}
.toggle {
flex: 1;
text-align: right;
order: 2;
}
.menu li.button a {
padding: 0.8em 1.3em;
margin: 0.5em 0;
}
.button a {
background: var(--clr-neutral-100);
border: 0.1em var(--clr-neutral-000) solid;
}
.button.secondary {
border: 0;
}
.button.secondary a {
background: transparent;
}
.button a:hover {
text-decoration: none;
}
.button:not(.secondary) a:hover {
background: var(--clr-primary);
border-color: var(--clr-accent);
}
.button a:hover {
background: var(--clr-secondary);
border-color: var(--clr-accent);
}
}

@media all and (min-width: 1000px) {
.menu {
flex-wrap: nowrap;
}
.logo {
order: 0;
}



.nav_item {
order: 1;
position: relative;
display: block;
width: auto;
}
.button {
order: 2;
}

.toggle {
display: none;
}

.submenu-active .submenu {
display: block;
position: absolute;
left: 0;
top: 3.2em /*68px*/;
background: var(--clr-neutral-050);
z-index: 30;
}
.submenu-active {
border-radius: 0;
}
}

.hero {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 55vh; 
}
.herobackground {
min-height: 30vh; 
background: linear-gradient(to left, #6db3f2 0%,#54a3ee 37%,#3690f0 68%,#1e69de 100%);
}

.hero:after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
background: linear-gradient(35deg, rgba(204, 10, 10, 0.24), rgba(16, 50, 107, 0.42));
}

.hero img {
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 100%;
height: 100%;
object-fit: cover;
/* filter: blur(0.5em) ;  */
}

.hero h1,
.hero__title {
font-family: var(--ff-header);
color: hsla(var(--clr-accent-hs), 50%, 1);
font-size: clamp( calc(var(--minFontSize) * 1.5), calc(var(--scaler) * 1.2), calc(var(--maxFontSize) * 2.4) );
line-height: 1; /*with a longer title less space between*/
text-transform: uppercase;
}


.hero p {
margin: 1.5em 1em; 
max-width:50ch;
}


.img--opacity {
opacity: 0.2;
}
.img--blur {
filter: blur(3px);
}

.img--nonstretch {
object-fit: cover;
object-position:center;
height: auto;
}

a:link {color: var(--clr-links); }
a:visited {color: purple; }
a:hover, a:focus {color: var(--clr-links-hover); 
cursor: pointer;}
a:active { color: var(--clr-accent);}


button, .btn {
display: inline-block;
text-decoration: none;
text-transform: uppercase;
padding:  0.5em 1.7em;
border-radius: 30em;
}
button:hover, .btn:hover,
button:focus, .btn:hover {opacity: .65;}
.btn__border {border: 0.2em solid var(--clr-neutral-000); }


#backtotopBtn {
display: none; 
position: fixed; 
bottom: 2rem; 
right: 2rem; 
z-index: 99; 
cursor: pointer; 
background-color: var(  --clr-neutral-050);
border-radius: 50em;
height: 25px;
width: 25px;
}

#backtotopBtn:hover {background-color: var(--accent-color); }

.u-full-width {  width: 100%;
box-sizing: border-box; }
.u-max-full-width {  max-width: 100%;
box-sizing: border-box; }
.u-pull-right {  float: right; margin-left: 1em;}
.u-pull-left {  float: left; margin-right: 1em;}
.u-align-left {  text-align: left;}
.u-align-right {  text-align: right; }
.u-align-center { text-align: center;}
.u-remove-padding {  padding: 0;  }
.u-remove-margin {  margin: 0;}
.u-padding {  padding: 0.5em;}
.u-padding-below {padding-bottom: 1.5em;}

hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
border-top: 1px solid var(--clr-neutral-050); }

span {
font-weight: 700;
background-color: hsla(59, 100%, 45%, 1);
}

footer {
    background-color: hsla(var(--clr-primary-hs), 20%, 1);
}