﻿html {scroll-behavior: smooth; overflow-y: scroll; }
/* body { font-family: 'Heebo', 'Bitter', 'Source Sans 3', sans-serif; background: radial-gradient(circle, rgb(240,240,240) 60%, rgb(210,210,210) 100%);} */
body {
	font-family: 'Heebo', 'Bitter', 'Source Sans 3', sans-serif;
    background: -moz-linear-gradient(45deg, rgb(190, 190, 190) 0%, rgb(210, 210, 210) 29%, rgb(230, 230, 230) 66%, rgb(250, 250, 250) 100%);
    background: -webkit-linear-gradient(45deg, rgb(190, 190, 190) 0%, rgb(210, 210, 210) 29%, rgb(230, 230, 230) 66%, rgb(250, 250, 250) 100%);
    background: linear-gradient(45deg, rgb(190, 190, 190) 0%, rgb(210, 210, 210) 29%, rgb(230, 230, 230) 66%, rgb(250, 250, 250) 100%);
    background-size: 400% 400%;
    -webkit-animation: Gradient 10s ease infinite; /* 15s */
    -moz-animation: Gradient 10s ease infinite; /* 15s */
    animation: Gradient 10s ease infinite; /* 15s */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    overflow: hidden;
    position: relative; 
}

body::before, 
body::after {
    content: "";
    width: 70vmax;
    height: 70vmax;
    position: absolute;
    background: rgba(240, 240, 240, 0.67); /* 0.07 */
    left: -20vmin;
    top: -20vmin;
    animation: morph 60s linear infinite alternate, spin 65s linear infinite; /* morph 15s linear infinite alternate, spin 20s linear infinite */
    z-index: 1;
    will-change: border-radius, transform;
    transform-origin: 55% 55%;
    pointer-events: none; 
}
  
body::after {
    width: 70vmin;
    height: 70vmin;
    left: auto;
    right: -10vmin;
    top: auto;
    bottom: 0;
    animation: morph 10s linear infinite alternate, spin 126s linear infinite reverse; /* 26s */
    transform-origin: 20% 20%; 
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}

@keyframes morph {
    0% {
        border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; 
    }
    100% {
        border-radius: 40% 60%; 
    } 
}

@keyframes spin {
    to {
        transform: rotate(1turn); 
    } 
}
.st0{display:none;}
.st1{display:inline;}
.st2{opacity:0.29;}
.st3{fill:rgb(250, 250, 250);}
.st4{clip-path:url(#SVGID_2_);fill:rgb(240, 240, 240);}
.st5{clip-path:url(#SVGID_4_);}
.st6{clip-path:url(#SVGID_6_);}
.st7{clip-path:url(#SVGID_8_);}
.st8{clip-path:url(#SVGID_10_);}
.st9{fill:none;}
.st10{clip-path:url(#SVGID_12_);}
.st11{opacity:0.7;}
.st12{clip-path:url(#SVGID_14_);}
.st13{opacity:0.2;}
.st14{clip-path:url(#SVGID_16_);}
.st15{opacity:0.3;fill:rgb(250, 250, 250);enable-background:new;}

 /* ENDE BODY */ 
 
.container { max-width: 960px; margin: auto; z-index:2;}
h1 {font-family:'Heebo'; font-weight:600; font-size:1.9em; letter-spacing:0.01em; line-height:115%;}
h2 {font-family:'Heebo'; font-weight:600; font-size:1.2em; line-height:120%; letter-spacing:0.02em;}
h3 {font-family:'Bitter'; font-weight:400; font-size:1.0em; color: rgb(68,28,117); line-height:140%;} 
h4 {font-family:'Bitter'; font-weight:600; font-size:1.15em; color: rgb(68,28,117); line-height:140%;}

.noscript { position: absolute; max-width: 960px; height: auto; z-index: 999; background-color: #C60000; }
.noscript-center { text-align: center; color: #fff; font-size: 2em; line-height: 120%; padding: 40px 30px 0; }
.noscript-center a { color: #fff; background: transparent; text-decoration: underline; }

.hr {border-top:1px solid rgb(68,28,117); width:100%; margin:1em 0; overflow:auto;}
ul {margin-left:-2.5em;}
ol {margin-left:-2.5em;}
li { margin-left:1em;}

/* HEAD */
.head { max-width: 100%; height: auto; padding: 40px 30px 20px 30px; background-image: linear-gradient(160deg,#931EF2 -60%, #B32464 67%); }
.nav-oben-kapitel {display:none;}
.nav-unten-kapitel{display:none;}
.box-weiss-links-head {align:middle; width:100%; height:auto; color:rgb(68,28,117); padding:0.5em 1.5em 1.5em 3.5em; margin-bottom:1.5em; background-color:rgb(255,255,255); }
.box-weiss-links-head img {position:relative; margin-right:0.5em;}
.box-weiss-rechts-head {align:middle; width:100%; height:auto; color:rgb(68,28,117); padding:0.5em 1.5em 1.5em 3.5em; background-color:rgb(255,255,255); overflow:auto; }
.box-weiss-rechts-head img {position:relative; margin-right:0.5em;}
.head-headline { width: 100%; height: auto; color: white; margin-top: 50px; }

/* BOX ZITATE DESKTOP */
.box-zitate {display:none;}

/* BOX ZITATE MOBILE */
.box-zitate-mobile {display:block; max-width:100%; height:auto; color:white; padding:20px 30px 20px 30px; background-color:rgb(179,36,100); margin-top:20px; overflow:auto;}
.gallery-container-mobile {font-family:'Source Sans 3',sans-serif; font-weight:400;}
.gallery-container-mobile img {width:100%; height:auto; margin-top:10px; margin-bottom:20px; border:0px solid red;} /* height:auto; */
.gallery-image-navigation-mobile {background-color:white; border-bottom:0px solid rgb(179,36,100); padding:0; margin:0; overflow:auto;}

/* PURPLE CLOSE */
.box-purple-close { max-width: 100%; height: auto; color: white; padding: 20px 30px 20px 30px; background-image: linear-gradient(100deg,#AC2382 -60%, #B32464 67%); margin-top: 0px; overflow: auto; }
.box-purple-close a { color: white; text-decoration: underline white; text-underline-position: under; }

/* BOX WEISS */
.box-weiss {max-width:100%; height:auto; color:rgb(68,28,117); padding:0px 10px 0px 10px; background-color:White; margin:10px 0 0 0; overflow:auto; }
.box-weiss-close-button-mitte {max-width:100%; height:auto; text-align:center; background-color:rgb(255,255,255); padding:8px 0 10px 0; overflow:auto;}
.box-weiss-close-button-mitte button {text-align:middle; margin-left:10px; margin-right:10px; margin-bottom:10px;}
.box-weiss-text-center {border-top:0px dotted rgb(179,36,100); text-align:center; max-width:100%; height:auto; color:rgb(68,28,117); padding:2% 5% 0% 5%; background-color:white; margin:1em 0 0 0; overflow:auto;}
.weiss-headline {width:100%; height:auto; font-size:1.7em; font-weight:600; color:rgb(179,36,100); line-height:105%; margin-top:1em; }
.headline-produkte {text-align:center; font-size:1.5em; line-height:125%; width:100%; height:auto; font-weight:600; color:rgb(179,36,100); margin-bottom:1.0em; padding-top:1.5em; }

/* FLEXBOX 3 COL */
.flexbox3 {display:flex; flex-wrap:wrap; background-color:white; }
.col3-1 {color:rgb(68,28,117); background:white; padding:0 2.5% 0 2.5%; margin-top:2em; border-bottom:1px dotted rgb(179,36,100); border-right:none;}
.col3-2 {color:rgb(68,28,117); background:white; padding:0 2.5% 0 2.5%; margin-top:1.5em; border-bottom:1px dotted rgb(179,36,100); border-right:none;}
.col3-3 {color:rgb(68,28,117); background:white; padding:0 2.5% 0 2.5%; margin-top:1.5em;}
.item3 {width:100%; margin-bottom: 2%;}
.flexbox3 img {width:40px; height:auto; position:relative; margin-top:-2em; margin-bottom:-4px; }

/* FLEXBOX 5 ist 1-3-1 COL */
.flexbox5 {display:flex; flex-wrap:wrap; background-color:white;}
.col5-1 {width:100%; color:rgb(68,28,117); text-align:center; background:white; margin-top:0em;}
.col5-1 img {width:80px; height:auto; padding:0 0 0 0;}
.col5-2 {width:100%; color:rgb(68,28,117); background:white; padding:0 2.5% 0 2.5%; margin-top:.3em;}
.col5-2 h2{text-align:center; color:rgb(179,36,100);}
.col5-2 a {color:rgb(68,28,117); text-decoration:underline dotted; text-underline-position:under;}
.col5-2 img {float:left; max-width:95%; height:auto;} /* 160px */
.col5-3 {width:100%; color:rgb(68,28,117); background:white; padding:0 2.5% 0 2.5%; margin-top:.3em;}
.item5 {margin-bottom:0;}

/* FLEXBOX 6 FÜR FORM 1-3-1 COL */
.flexbox6 {display:none;}
.mobile-only {border:0px solid red;}
.mobile-offline {display:none;}

/* FOOTER */
.footer {font-family:'Heebo'; font-weight:400; font-size:1.1em; max-width:100%; height:100%; padding:20px 30px 20px 30px; margin:20px 0px 30px 0px; background-image:linear-gradient(160deg,#931EF2 -60%, #B32464 97%);}
.footer-oben {width:100%; height:auto; overflow:auto;}
.footer-oben img{width:140px; height:auto; float:left; margin:0.5em 0 1em 0; border:0;}
.footer-unten {width:100%; height:auto; color:white; font-size:0.85em; word-spacing:25px; padding:1em 0 0 0; border-top:1px solid white;} 
.footer-unten a{color:white; text-decoration:none;}

/* BUTTONS */
.button-kostenlos { font-family: 'Heebo', sans-serif; font-size: 1em; font-weight:500; color: white; border-radius: 0.0em; background-color: transparent; padding: 0.5em 1.2em; text-align: center; text-decoration: none; display: inline-block; margin: 10px 2em 0em 0em; cursor: pointer; border: 1px solid white; }
.button-mehr { font-family: 'Heebo', sans-serif; font-size: 1em; font-weight: 500; color: white; border-radius: 0.0em; background-color: rgb(179,36,100); padding: 0.5em 1.2em; text-align: center; text-decoration: none; display: inline-block; margin: 10px 2em 0em 0em; cursor: pointer; border: 1px solid rgb(203,24,131);}
.button-mehr-trans { font-family: 'Heebo', sans-serif; font-size: 1em; font-weight: 500; color: white; border-radius: 0.0em; background-color: transparent; padding: 0.5em 1.2em; text-align: center; text-decoration: none; display: inline-block; margin: 10px 0em 0em 0em; cursor: pointer; border: 1px solid white;}

/* WORD SPACING NAV HEADER und FOOTER - NOWRAP */
.close-words {word-spacing:0px;}
.nowrap {white-space:nowrap;}

/* //////////////////// Grösser 420 px //////////////////// */ 
@media screen and (min-width: 26.25em) { }

/* //////////////////// Grösser 568 px //////////////////// */ 
@media screen and (min-width: 35.5em) { }

/* //////////////////// Grösser 667 px //////////////////// */ 
@media screen and (min-width: 41.7em) { }

/* //////////////////// Grösser 768 px //////////////////// */ 
@media screen and (min-width: 48em) {
h1 {font-family:'Heebo'; font-weight:600; font-size:3.1em; letter-spacing:0.01em; line-height:115%;}
h2 {font-family:'Heebo'; font-weight:600; font-size:1.2em; line-height:120%; letter-spacing:0.02em; }
h3 {font-family:'Bitter'; font-weight:400; font-size:1.0em; color: rgb(68,28,117); line-height:140%; }
h4 {font-family:'Bitter'; font-weight:600; font-size:1.15em; line-height:140%; }

/* HEAD */
.head { max-width: 100%; height: auto; font-family: 'Heebo'; font-weight: 400; padding: 40px 30px 20px 30px; margin-top: 20px; background-image: linear-gradient(160deg,#931EF2 -60%, #B32464 67%); }
.nav-oben { width: 100%; height: auto; padding: 5px 0 10px 0; }
.nav-oben img { width: 120px; height: auto; float: left; text-align: left; margin-top: -5px; border: 0; }
.nav-oben a { color: white; text-decoration: none; }
.nav-oben-kapitel {display: block; float: right; font-size: 1.05em; line-height: 140%; color: white; word-spacing: 20px; text-align: right; } /* 14 px mit FAQ, 22px ohne */
.nav-oben-kapitel a{text-decoration: underline dotted white; text-underline-position: under;} /* 18 11 2024 */
.head-headline { width: 100%; height: auto; color: white; margin-top: 80px; }
.gallery-container-mobile {display:none;}
.gallery-image-navigation-mobile {display:none;}
.mobile-navigation {display:none;}
.box-weiss-links-head { float: left; width: 45%; height: auto; color: rgb(68,28,117); padding: 0.5em 1.5em 1.5em 3.5em; margin-bottom:0em; background-color: rgb(255,255,255); }
.box-weiss-links-head img { position: relative; margin-right: 0.5em; }
.box-weiss-rechts-head { float: right; width: 45%; height: auto; color: rgb(68,28,117); padding: 0.5em 1.5em 1.5em 3.5em; background-color: rgb(255,255,255); overflow: auto; }
.box-weiss-rechts-head img { position: relative; margin-right: 0.5em; }

/* BOX ZITATE DESKTOP */
.box-zitate {display:block; max-width: 100%; height: auto; color: white; padding: 20px 30px 20px 30px; background-color: rgb(179,36,100); margin-top: 20px; overflow: auto; }
.box-zitate a {color:white; text-decoration:none; }

/* BOX ZITATE MOBILE */
.box-zitate-mobile {display:none;}
.box-purple-mehr { max-width: 100%; height: auto; color: white; padding: 5px 10px 0px 10px; background-color: rgb(179,36,100); margin-top: 20px; overflow: auto; }
.box-purple-mehr a { color: white; text-decoration: underline white; text-underline-position: under; }
.box-purple-close { max-width: 100%; height: auto; color: white; padding: 20px 30px 20px 30px; background-image: linear-gradient(100deg,#AC2382 -60%, #B32464 67%); margin-top: 0px; overflow: auto; }
.box-purple-close a { color: white; text-decoration: underline white; text-underline-position: under; }
.purple-headline { width: 100%; height: auto; font-size: 1.7em; font-weight: bold; color: rgb(255,255,255); line-height: 105%; margin-top: 0px; }

/* BOX WEISS */
.box-weiss { max-width: 100%; height: auto; color: rgb(68,28,117); padding: 20px 30px 20px 30px; background-color: rgb(255,255,255); margin: 20px 0 0px 0; overflow: auto; }
.box-weiss a { color: rgb(203,24,131); text-decoration: underline rgb(203,24,131); text-underline-position: under; }
.box-weiss-text-center {border-top:0px solid white; text-align:center; max-width:100%; height:auto; color:rgb(68,28,117); padding:5% 15% 0% 15%; background-color:white; margin:1em 0 0 0; overflow:auto;}
.box-weiss-close { max-width: 100%; height: auto; color: rgb(68,28,117); padding: 20px 30px 20px 30px; background-color: rgb(255,255,255); margin-top: 0px; border: 0px solid rgb(179,36,100); overflow: auto; }
.box-weiss-close a { color: rgb(203,24,131); text-decoration: underline rgb(203,24,131); text-underline-position: under; }
.box-weiss-close-button-mitte { max-width: 100%; height: auto; text-align: center; background-color: rgb(255,255,255); padding: 20px 0 30px 0; overflow: auto; }
.box-weiss-close-button-mitte button {text-align:middle; margin-left:10px; margin-right:10px; margin-bottom:0px;}
.box-weiss-close-button-mitte button a { text-decoration: none; }
.box-weiss-links { float: left; width: 45%; height: auto; color: rgb(68,28,117); padding: 0.5em 1.5em 1.5em 1.5em; background-color: rgb(255,255,255); }
.box-weiss-rechts { float: right; width: 45%; height: auto; color: rgb(68,28,117); padding: 0.5em 1.5em 1.5em 1.5em; background-color: rgb(255,255,255); overflow: auto; }
.weiss-headline { width: 100%; height: auto; font-size: 1.7em; font-weight: 600; color: rgb(179,36,100); line-height: 105%; margin-top: 0px; }
.headline-produkte {text-align:left; font-size:1.7em; line-height:105%; width:100%; height:auto; margin-bottom:0.0em; padding-top: 0.5em; }

/* FLEXBOX 3 COL */
.flexbox3 { display: flex; flex-wrap: wrap; background-color: white; }
.col3-1 { color: rgb(68,28,117); background: white; padding: 0 2.5% 0 2.5%; margin-top: 0em; border-bottom:none; border-right: 1px dotted rgb(179,36,100); }
.col3-2 { color: rgb(68,28,117); background: white; padding: 0 2.5% 0 2.5%; margin-top: 0em; border-bottom:none; border-right: 1px dotted rgb(179,36,100); }
.col3-3 { color: rgb(68,28,117); background: white; padding: 0 2.5% 0 2.5%; margin-top: 0em; }
.item3 { width: 33.33%; margin-bottom: 2%; }
.flexbox3 img { width: 40px; height: auto; position: relative; margin-top: -2em; margin-bottom: -4px; }

/* FLEXBOX 5 ist 1-3-1 COL */
.flexbox5 {display:flex; flex-wrap:wrap; background-color:white;}
.col5-1 {width:20%; color:rgb(68,28,117); background:white; padding:0 2.5% 0 2.5%; margin-top:1em;}
.col5-1 img {float:right; width:80px; height:auto; padding:1.3em 0  0 0;}
.col5-2 {width:60%; color:rgb(68,28,117); background:white; padding:0 2.5% 0 2.5%; margin-top:1em;}
.col5-2 h2{text-align:left;}
.col5-2 a {color:rgb(68,28,117); text-decoration:underline dotted; text-underline-position:under;}
.col5-2 img {display:block; float:left; max-width:95%; height:auto;} /* 240px */
.col5-3 {width:20%; color:rgb(68,28,117); background:white; padding:0 2.5% 0 2.5%; margin-top:1em;}
.item5 {margin-bottom:0;}

/* FLEXBOX 6 FÜR FORM 1-3-1 COL */
.flexbox6 {display:block;display: flex; flex-wrap:wrap; background-color:white; }
.col6-1 { width: 20%; color: rgb(68,28,117); background: white; padding: 0 2.5% 0 2.5%; margin-top: 1.0em; }
.col6-1 img { float: right; width: 80px; height: auto; padding: 1.3em 0  0 0; }
.col6-2 { text-align: right; width: 17%; color: rgb(68,28,117); background: white; padding: 0 0% 0 0%; margin-top: 1.0em; }
.col6-2 h3 { line-height: 180%; }
.col6-3 h3 { line-height: 180%; }
.col6-3 { width: 63%; color: rgb(68,28,117); background: white; padding: 0 0.5% 0 0.5%; margin-top: 1.0em; }
.item6 { margin-bottom: 0; }

/* FORMULARE */
input[type=button], input[type=reset] { font-family: 'Bitter'; font-weight: 400; font-size: 1.0em; background-color: white; border: 2px solid rgb(179,36,100); color: rgb(179,36,100); padding: 0.5em 1.5em; text-decoration: none; margin-right: 1em; cursor: pointer; }
input[type=button], input[type=submit] { font-family: 'Bitter'; font-weight: 600; font-size: 1.0em; background-color: rgb(179,36,100); border: 2px solid rgb(179,36,100); color: white; padding: 0.5em 1.5em; text-decoration: none; cursor: pointer; }
input[type=text], select { font-size: 0.9em; padding: 0.3em 0.5em; background-color: white; display: inline-block; border: 1px solid rgb(179,36,100); border-radius: 0px; box-sizing: border-box; }
input[type=textarea], textarea { font-family: 'Bitter'; font-weight: 400; font-size: 0.9em; border: 1px solid rgb(179,36,100); border-radius: 0px; padding: 0.5em 0.5em; }
input[type=checkbox] {appearance:none; -webkit-appearance:none; -moz-appearance:none; width:1.5em; height:1.5em; border:1px solid rgb(179,36,100); border-radius:0px; cursor:pointer;}
input[type=checkbox]:checked {background-color:rgb(179,36,100); border:0px solid rgb(179,36,100);}
input[type=checkbox]:checked::before {content:'✓'; position:absolute; display:block; text-align:center; margin-left:5px; border:1px solid rgb(179,36,100);; color:white;}

input[type=select], select {background-color:white; color:grey;}
.abbinder-form { font-family: 'Bitter'; font-weight: 400; font-size: 1.0em; width: 80%; margin-top: 1em; }

/* BUTTON MEHR in BOX PURPLE */
.box-trans-links { float: left; text-align: left; width: 45%; height: auto; padding: 0.5em 1.5em 1.5em 1.5em; background-color: transparent; }
.box-trans-rechts { float: right; text-align: right; width: 45%; height: auto; padding: 0.5em 1.5em 1.5em 1.5em; background-color: transparent; overflow: auto; }
.mobile-only {display:none;}

/* FOOTER */
.footer {font-family:'Heebo'; font-weight:400; font-size:1.1em; max-width:100%; height:100%; padding:20px 30px 20px 30px; margin:20px 0px 30px 0px; background-image:linear-gradient(160deg,#931EF2 -60%, #B32464 97%);}
.footer-oben { width: 100%; height: auto; color: white; font-size: 1.05em; line-height: 140%; word-spacing: 22px; text-align: right; padding: 50px 0 10px 0; overflow:auto;}
.footer-oben img { width: 120px; height: auto; float: left; text-align: left; margin-top: -5px; border: 0; }
.footer-oben a { color: white; text-decoration: none; }
.nav-unten-kapitel { display: block; float: right; font-size: 0.9em; line-height: 140%; color: white; word-spacing: 20px; text-align: right;}
/* .nav-unten-kapitel a{text-decoration: underline dotted white; text-underline-position: under;} /* 18 11 2024 */
.footer-unten { width: 100%; height: auto; color: white; font-size: 0.75em; word-spacing: 25px; text-align: right; padding: 10px 0 0 0; border-top: 1px solid white; }
.footer-unten a { color: white; text-decoration: none; }

/* ZITATE */
.gallery-container {font-family:'Source Sans 3',sans-serif; font-weight:400;}
.gallery-container img {width:100%; height:auto;}
.gallery-image-navigation {height:auto; padding-top:0px;}

/* BUTTONS */
.button-kostenlos {font-family:'Heebo',sans-serif; font-size: 1.1em; font-weight: 500; color: white; border-radius: 0.0em; background-color: transparent; padding: 0.5em 2em; text-align: center; text-decoration: none; display: inline-block; margin: 20px 2em 0em 0em; cursor: pointer; border: 1px solid white;} 
.button-mehr { font-family: 'Heebo', sans-serif; font-size: 1.0em; font-weight: 500; color: white; border-radius: 0.0em; background-color: rgb(179,36,100); padding: 0.5em 2em; text-align: center; text-decoration: none; display: inline-block; margin: 10px 2em 0em 0em; cursor: pointer; border: 1px solid rgb(203,24,131);}
.button-mehr-trans { font-family: 'Heebo', sans-serif; font-size: 1.0em; font-weight: 500; color: white; border-radius: 0.0em; background-color: transparent; padding: 0.5em 2em; text-align: center; text-decoration: none; display: inline-block; margin: 10px 0em 0em 0em; cursor: pointer; border: 1px solid white;}

/* TABLE PREISE */
table { width: 100%; }
table td { width: 50%; }
}
/* COPYRIGHT 2024 FRICK & PARTNER GMBH / CH 8703 ERLENBACH ZÜRICH */